lido-player 0.0.2-alpha-95 → 0.0.2-alpha-96

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.
@@ -8567,8 +8567,9 @@ const LidoCalculator = class {
8567
8567
  else {
8568
8568
  await index$1.executeActions(onInCorrect, container);
8569
8569
  }
8570
- index$1.calculateScore();
8571
8570
  if (!isContinueOnCorrect) {
8571
+ container.setAttribute("game-completed", "true");
8572
+ index$1.calculateScore();
8572
8573
  index$1.triggerNextContainer();
8573
8574
  }
8574
8575
  }
@@ -8576,7 +8577,7 @@ const LidoCalculator = class {
8576
8577
  }
8577
8578
  render() {
8578
8579
  const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
8579
- return (index.h(index.Host, { key: 'f74605bdd05ece961c175ff64aba213961797587', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: 'df158e5e1a545a3d763e3e5a8bf07861b826aad0', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: 'c6afe2c1e7970b2d6f5a6d63a6cc8f2ceb403f74', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '60e8e03c6d344c6b8be3c2a7417fb4ed55a2af9e', src: index$1.convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: 'cf53e61f86acc8dce793ee1b09d880ee6fe8e35e', class: "lido-calculator-displayParent" }, index.h("div", { key: '0522a16f1ff07e3e42078eab83f58b4a0e9a6fbf', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: 'c0145ed065199cc68ed136ebc3077a2857da7b2b', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
8580
+ return (index.h(index.Host, { key: '561785bf36e862832ec1f8550684f5c15ecc1166', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, index.h("lido-cell", { key: '21789df12ab18c3bdba7b68ce2943c2d6bd83e45', visible: "true", height: "94px", width: "60px" }, index.h("lido-text", { key: 'bb3018fac89a5a96f5949457c30dd2c199c72ea8', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, index.h("img", { key: '2d4fee4142ed51970cddc623ae1635e80808062b', src: index$1.convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), index.h("div", { key: '25b755eeeaaeec450aabae4867ad5f14dcf77202', class: "lido-calculator-displayParent" }, index.h("div", { key: '51f310c071edbb264f2f3636118721449651f8f2', class: "lido-calculator-display" }, this.displayValue)), index.h("div", { key: 'd7489f877e4fbbd27afaf143666fc241f4df3427', class: "lido-calculator-buttons" }, numbers.map((num, i) => (index.h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
8580
8581
  'lido-calculator-btn-special': num === '←' || num === 'OK',
8581
8582
  'lido-calculator-btn-default': num !== '←' && num !== 'OK'
8582
8583
  }, onClick: () => this.handleClick(num) }))))));
@@ -18576,9 +18577,6 @@ const LidoTrace = class {
18576
18577
  await this.playTraceAnimation();
18577
18578
  }
18578
18579
  index$1.storingEachActivityScore(true);
18579
- if (this.el && this.onCorrect) {
18580
- await index$1.executeActions(this.onCorrect, this.el);
18581
- }
18582
18580
  console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
18583
18581
  const delay = 1000; // milliseconds
18584
18582
  if (this.currentSvgIndex < this.svgUrls.length - 1) {
@@ -18588,10 +18586,19 @@ const LidoTrace = class {
18588
18586
  const svgContainer = document.getElementById('lido-svgContainer');
18589
18587
  svgContainer.style.visibility = 'visible';
18590
18588
  this.moving = false;
18589
+ if (this.el && this.onCorrect) {
18590
+ await index$1.executeActions(this.onCorrect, this.el);
18591
+ }
18591
18592
  return;
18592
18593
  }
18593
18594
  index$1.calculateScore();
18594
18595
  console.log('All SVGs completed, hiding component.');
18596
+ const container = document.querySelector(index$1.LidoContainer);
18597
+ const containerOnCorrect = container.getAttribute("onCorrect");
18598
+ if (container && containerOnCorrect) {
18599
+ await new Promise(resolve => setTimeout(resolve, delay));
18600
+ await index$1.executeActions(containerOnCorrect, this.el);
18601
+ }
18595
18602
  index$1.triggerNextContainer();
18596
18603
  }
18597
18604
  // Get the pointer position relative to the SVG
@@ -18802,7 +18809,7 @@ const LidoTrace = class {
18802
18809
  };
18803
18810
  }
18804
18811
  render() {
18805
- return (index.h(index.Host, { key: '253a2c8840d47f1758eb2e025de799921ba7e972', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '182018457f29150918f52ef92bc0fc4fc70bb463', style: this.style, id: "lido-svgContainer" })));
18812
+ return (index.h(index.Host, { key: '3f7da73f3c075a90ea0ce27022ed06a60c814fb4', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, index.h("div", { key: '209d9faf31cf0ec234ee2fd34521eec8bbbf8ac4', style: this.style, id: "lido-svgContainer" })));
18806
18813
  }
18807
18814
  static get assetsDirs() { return ["svg", "images"]; }
18808
18815
  get el() { return index.getElement(this); }
@@ -174,8 +174,9 @@ export class LidoCalculator {
174
174
  else {
175
175
  await executeActions(onInCorrect, container);
176
176
  }
177
- calculateScore();
178
177
  if (!isContinueOnCorrect) {
178
+ container.setAttribute("game-completed", "true");
179
+ calculateScore();
179
180
  triggerNextContainer();
180
181
  }
181
182
  }
@@ -183,7 +184,7 @@ export class LidoCalculator {
183
184
  }
184
185
  render() {
185
186
  const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
186
- return (h(Host, { key: 'f74605bdd05ece961c175ff64aba213961797587', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: 'df158e5e1a545a3d763e3e5a8bf07861b826aad0', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'c6afe2c1e7970b2d6f5a6d63a6cc8f2ceb403f74', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '60e8e03c6d344c6b8be3c2a7417fb4ed55a2af9e', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: 'cf53e61f86acc8dce793ee1b09d880ee6fe8e35e', class: "lido-calculator-displayParent" }, h("div", { key: '0522a16f1ff07e3e42078eab83f58b4a0e9a6fbf', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: 'c0145ed065199cc68ed136ebc3077a2857da7b2b', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
187
+ return (h(Host, { key: '561785bf36e862832ec1f8550684f5c15ecc1166', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '21789df12ab18c3bdba7b68ce2943c2d6bd83e45', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'bb3018fac89a5a96f5949457c30dd2c199c72ea8', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '2d4fee4142ed51970cddc623ae1635e80808062b', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '25b755eeeaaeec450aabae4867ad5f14dcf77202', class: "lido-calculator-displayParent" }, h("div", { key: '51f310c071edbb264f2f3636118721449651f8f2', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: 'd7489f877e4fbbd27afaf143666fc241f4df3427', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
187
188
  'lido-calculator-btn-special': num === '←' || num === 'OK',
188
189
  'lido-calculator-btn-default': num !== '←' && num !== 'OK'
189
190
  }, onClick: () => this.handleClick(num) }))))));
@@ -702,9 +702,6 @@ export class LidoTrace {
702
702
  await this.playTraceAnimation();
703
703
  }
704
704
  storingEachActivityScore(true);
705
- if (this.el && this.onCorrect) {
706
- await executeActions(this.onCorrect, this.el);
707
- }
708
705
  console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
709
706
  const delay = 1000; // milliseconds
710
707
  if (this.currentSvgIndex < this.svgUrls.length - 1) {
@@ -714,10 +711,19 @@ export class LidoTrace {
714
711
  const svgContainer = document.getElementById('lido-svgContainer');
715
712
  svgContainer.style.visibility = 'visible';
716
713
  this.moving = false;
714
+ if (this.el && this.onCorrect) {
715
+ await executeActions(this.onCorrect, this.el);
716
+ }
717
717
  return;
718
718
  }
719
719
  calculateScore();
720
720
  console.log('All SVGs completed, hiding component.');
721
+ const container = document.querySelector(LidoContainer);
722
+ const containerOnCorrect = container.getAttribute("onCorrect");
723
+ if (container && containerOnCorrect) {
724
+ await new Promise(resolve => setTimeout(resolve, delay));
725
+ await executeActions(containerOnCorrect, this.el);
726
+ }
721
727
  triggerNextContainer();
722
728
  }
723
729
  // Get the pointer position relative to the SVG
@@ -928,7 +934,7 @@ export class LidoTrace {
928
934
  };
929
935
  }
930
936
  render() {
931
- return (h(Host, { key: '253a2c8840d47f1758eb2e025de799921ba7e972', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '182018457f29150918f52ef92bc0fc4fc70bb463', style: this.style, id: "lido-svgContainer" })));
937
+ return (h(Host, { key: '3f7da73f3c075a90ea0ce27022ed06a60c814fb4', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '209d9faf31cf0ec234ee2fd34521eec8bbbf8ac4', style: this.style, id: "lido-svgContainer" })));
932
938
  }
933
939
  static get is() { return "lido-trace"; }
934
940
  static get originalStyleUrls() {
@@ -1 +1 @@
1
- import{L as o,d as s}from"./p-BVaiv1nz.js";const a=o,p=s;export{a as LidoCalculator,p as defineCustomElement}
1
+ import{L as o,d as s}from"./p-1qOeKb23.js";const p=o,r=s;export{p as LidoCalculator,r as defineCustomElement}
@@ -1 +1 @@
1
- import{L as o,d as s}from"./p-A2ykt6D6.js";const t=o,p=s;export{t as LidoHome,p as defineCustomElement}
1
+ import{L as s,d as o}from"./p-DsaycW90.js";const a=s,p=o;export{a as LidoHome,p as defineCustomElement}
@@ -1 +1 @@
1
- import{t,p as o,H as s,getAssetPath as e,h as a}from"./index.js";import{d as i,i as l}from"./p-XacgbiAe.js";import{d as r}from"./p-q6x112RN.js";import{d as n}from"./p-1PmJa9_u.js";import{d as m}from"./p-BVaiv1nz.js";import{d}from"./p-DWnRy2OX.js";import{d as c}from"./p-DFnbzZUc.js";import{d as p}from"./p-B97yn0-n.js";import{d as u}from"./p-BToRx4je.js";import{d as h}from"./p-CfdL3fZ9.js";import{d as f}from"./p-BLx2hZ8d.js";import{d as b}from"./p-A2ykt6D6.js";import{d as k}from"./p-BOTEFjDY.js";import{d as x}from"./p-5cqqnSZl.js";import{d as E}from"./p-Blfvc5ur.js";import{d as j}from"./p-Czy5pBTg.js";import{d as g}from"./p-D4JZI_JB.js";import{d as L}from"./p-CusU-d3G.js";import{d as v}from"./p-DqskvXvD.js";import{d as B}from"./p-Dr5sh_El.js";import{d as U}from"./p-JtdpRTRi.js";import{d as D}from"./p-De6WHLEQ.js";const y=o(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.Lang="",this.xmlPath="",this.initialIndex=0,this.margin="",this.canplay=!0,this.baseUrl=""}connectedCallback(){this.setLanguage(this.Lang)}onLangChange(t){this.setLanguage(t)}setLanguage(t){l.changeLanguage(t||l.language)}async componentWillLoad(){var t,o;const s=null!==(t=this.xmlPath)&&void 0!==t?t:this.baseUrl+((null===(o=this.baseUrl)||void 0===o?void 0:o.endsWith("/"))?"index.xml":"/index.xml");console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ this.baseUrl:",this.baseUrl),console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ this.xmlPath:",this.xmlPath),console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ xmlPath:",s);try{const t=s.startsWith("http")?s:e(s),o=await fetch(t);if(!o.ok)throw Error("Failed to fetch XML data: "+o.statusText);const a=await o.text();this.xmlData=a}catch(t){console.error("Error fetching XML data:",t),this.xmlData=null}}render(){return void 0===this.xmlData?a("div",null,"Loading..."):null===this.xmlData?a("div",null,"Error loading XML data. Please check the path or URL."):a("lido-home",{showNav:!0,activeContainerIndexes:[],initialIndex:this.initialIndex,canplay:this.canplay,xmlData:this.xmlData,baseUrl:this.baseUrl,exitButtonUrl:this.exitButtonUrl,prevButtonUrl:this.prevButtonUrl,nextButtonUrl:this.nextButtonUrl,speakerButtonUrl:this.speakerButtonUrl})}static get assetsDirs(){return["assets"]}static get watchers(){return{Lang:[{onLangChange:0}]}}},[0,"lido-root",{Lang:[1,"lang"],xmlPath:[1,"xml-path"],initialIndex:[2,"initial-index"],margin:[1],canplay:[4],baseUrl:[1,"base-url"],exitButtonUrl:[1,"exit-button-url"],prevButtonUrl:[1,"prev-button-url"],nextButtonUrl:[1,"next-button-url"],speakerButtonUrl:[1,"speaker-button-url"],xmlData:[32]},void 0,{Lang:[{onLangChange:0}]}]);function w(){"undefined"!=typeof customElements&&["lido-root","lido-avatar","lido-balance","lido-calculator","lido-canvas","lido-cell","lido-col","lido-container","lido-flash-card","lido-float","lido-home","lido-image","lido-keyboard","lido-math-matrix","lido-pos","lido-random","lido-row","lido-shape","lido-slide-fill","lido-text","lido-trace","lido-wrap"].forEach((o=>{switch(o){case"lido-root":customElements.get(t(o))||customElements.define(t(o),y);break;case"lido-avatar":customElements.get(t(o))||r();break;case"lido-balance":customElements.get(t(o))||n();break;case"lido-calculator":customElements.get(t(o))||m();break;case"lido-canvas":customElements.get(t(o))||d();break;case"lido-cell":customElements.get(t(o))||c();break;case"lido-col":customElements.get(t(o))||p();break;case"lido-container":customElements.get(t(o))||u();break;case"lido-flash-card":customElements.get(t(o))||h();break;case"lido-float":customElements.get(t(o))||f();break;case"lido-home":customElements.get(t(o))||b();break;case"lido-image":customElements.get(t(o))||k();break;case"lido-keyboard":customElements.get(t(o))||x();break;case"lido-math-matrix":customElements.get(t(o))||E();break;case"lido-pos":customElements.get(t(o))||j();break;case"lido-random":customElements.get(t(o))||g();break;case"lido-row":customElements.get(t(o))||L();break;case"lido-shape":customElements.get(t(o))||v();break;case"lido-slide-fill":customElements.get(t(o))||B();break;case"lido-text":customElements.get(t(o))||i();break;case"lido-trace":customElements.get(t(o))||U();break;case"lido-wrap":customElements.get(t(o))||D()}}))}w();const R=y,C=w;export{R as LidoRoot,C as defineCustomElement}
1
+ import{t,p as o,H as s,getAssetPath as e,h as a}from"./index.js";import{d as i,i as l}from"./p-XacgbiAe.js";import{d as r}from"./p-q6x112RN.js";import{d as n}from"./p-1PmJa9_u.js";import{d as m}from"./p-1qOeKb23.js";import{d}from"./p-DWnRy2OX.js";import{d as c}from"./p-DFnbzZUc.js";import{d as p}from"./p-B97yn0-n.js";import{d as u}from"./p-BToRx4je.js";import{d as h}from"./p-CfdL3fZ9.js";import{d as f}from"./p-BLx2hZ8d.js";import{d as b}from"./p-DsaycW90.js";import{d as x}from"./p-BOTEFjDY.js";import{d as E}from"./p-5cqqnSZl.js";import{d as k}from"./p-Blfvc5ur.js";import{d as j}from"./p-Czy5pBTg.js";import{d as L}from"./p-D4JZI_JB.js";import{d as g}from"./p-CusU-d3G.js";import{d as v}from"./p-DqskvXvD.js";import{d as B}from"./p-Dr5sh_El.js";import{d as U}from"./p-B4Jyt3YL.js";import{d as y}from"./p-De6WHLEQ.js";const D=o(class extends s{constructor(t){super(),!1!==t&&this.__registerHost(),this.Lang="",this.xmlPath="",this.initialIndex=0,this.margin="",this.canplay=!0,this.baseUrl=""}connectedCallback(){this.setLanguage(this.Lang)}onLangChange(t){this.setLanguage(t)}setLanguage(t){l.changeLanguage(t||l.language)}async componentWillLoad(){var t,o;const s=null!==(t=this.xmlPath)&&void 0!==t?t:this.baseUrl+((null===(o=this.baseUrl)||void 0===o?void 0:o.endsWith("/"))?"index.xml":"/index.xml");console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ this.baseUrl:",this.baseUrl),console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ this.xmlPath:",this.xmlPath),console.log("🚀 ~ LidoRoot ~ componentWillLoad ~ xmlPath:",s);try{const t=s.startsWith("http")?s:e(s),o=await fetch(t);if(!o.ok)throw Error("Failed to fetch XML data: "+o.statusText);const a=await o.text();this.xmlData=a}catch(t){console.error("Error fetching XML data:",t),this.xmlData=null}}render(){return void 0===this.xmlData?a("div",null,"Loading..."):null===this.xmlData?a("div",null,"Error loading XML data. Please check the path or URL."):a("lido-home",{showNav:!0,activeContainerIndexes:[],initialIndex:this.initialIndex,canplay:this.canplay,xmlData:this.xmlData,baseUrl:this.baseUrl,exitButtonUrl:this.exitButtonUrl,prevButtonUrl:this.prevButtonUrl,nextButtonUrl:this.nextButtonUrl,speakerButtonUrl:this.speakerButtonUrl})}static get assetsDirs(){return["assets"]}static get watchers(){return{Lang:[{onLangChange:0}]}}},[0,"lido-root",{Lang:[1,"lang"],xmlPath:[1,"xml-path"],initialIndex:[2,"initial-index"],margin:[1],canplay:[4],baseUrl:[1,"base-url"],exitButtonUrl:[1,"exit-button-url"],prevButtonUrl:[1,"prev-button-url"],nextButtonUrl:[1,"next-button-url"],speakerButtonUrl:[1,"speaker-button-url"],xmlData:[32]},void 0,{Lang:[{onLangChange:0}]}]);function w(){"undefined"!=typeof customElements&&["lido-root","lido-avatar","lido-balance","lido-calculator","lido-canvas","lido-cell","lido-col","lido-container","lido-flash-card","lido-float","lido-home","lido-image","lido-keyboard","lido-math-matrix","lido-pos","lido-random","lido-row","lido-shape","lido-slide-fill","lido-text","lido-trace","lido-wrap"].forEach((o=>{switch(o){case"lido-root":customElements.get(t(o))||customElements.define(t(o),D);break;case"lido-avatar":customElements.get(t(o))||r();break;case"lido-balance":customElements.get(t(o))||n();break;case"lido-calculator":customElements.get(t(o))||m();break;case"lido-canvas":customElements.get(t(o))||d();break;case"lido-cell":customElements.get(t(o))||c();break;case"lido-col":customElements.get(t(o))||p();break;case"lido-container":customElements.get(t(o))||u();break;case"lido-flash-card":customElements.get(t(o))||h();break;case"lido-float":customElements.get(t(o))||f();break;case"lido-home":customElements.get(t(o))||b();break;case"lido-image":customElements.get(t(o))||x();break;case"lido-keyboard":customElements.get(t(o))||E();break;case"lido-math-matrix":customElements.get(t(o))||k();break;case"lido-pos":customElements.get(t(o))||j();break;case"lido-random":customElements.get(t(o))||L();break;case"lido-row":customElements.get(t(o))||g();break;case"lido-shape":customElements.get(t(o))||v();break;case"lido-slide-fill":customElements.get(t(o))||B();break;case"lido-text":customElements.get(t(o))||i();break;case"lido-trace":customElements.get(t(o))||U();break;case"lido-wrap":customElements.get(t(o))||y()}}))}w();const C=D,R=w;export{C as LidoRoot,R as defineCustomElement}
@@ -1 +1 @@
1
- import{L as o,d as p}from"./p-JtdpRTRi.js";const s=o,t=p;export{s as LidoTrace,t as defineCustomElement}
1
+ import{L as o,d as s}from"./p-B4Jyt3YL.js";const t=o,p=s;export{t as LidoTrace,p as defineCustomElement}
@@ -0,0 +1 @@
1
+ import{t,p as i,H as e,d as o,e as s,S as a,s as l,C as r,A as n,f as c,g as d,N as h,j as u,h as p,c as b,b as f}from"./index.js";import{d as m}from"./p-DFnbzZUc.js";import{d as x}from"./p-XacgbiAe.js";const g=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.onOk=o(this,"onOk"),this.width="479px",this.visible=!1,this.height="711px",this.objective="",this.onEntry="",this.x="0px",this.y="0px",this.bgColor="#60DADA",this.penIcon="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/penIcon.png",this.displayValue="",this.style={},this.userAnswers=[],this.tempInputs=[]}updateValueAttr(){this.el.setAttribute("value",this.displayValue)}componentWillLoad(){if(!this.objective){const t=this.el.closest("lido-container");t&&(this.objective=(t.getAttribute("objective")||"").replace("=","").trim())}this.updateValueAttr()}handleClick(t){"OK"===t?this.verifyAnswer():"←"===t?this.displayValue=this.displayValue.slice(0,-1):this.displayValue.length<8&&(this.displayValue+=t),this.updateValueAttr()}async verifyAnswer(){var t;const i=this.displayValue.trim();if(!i)return;let e=!1;const o=this.el.closest("lido-container");if(!o)return;if(this.objective&&""!=this.objective&&!this.objective.includes(","))console.log("hi iscorrect verified"),e=Number(i)===Number(this.objective);else if(this.objective&&this.objective.includes(",")){const t="true"===o.getAttribute("is-continue-on-correct"),s=this.objective.split(",").map((t=>t.trim())),a=this.userAnswers.length;a<s.length&&Number(i)===Number(s[a])&&(e=!0),t?e&&this.userAnswers.push(Number(i)):this.userAnswers.push(Number(i))}else if(""===this.objective){const t=o.getAttribute("equationCheck")||"";if(!t)return;try{const o=s(t);e=Number(o)===Number(i.trim()),console.log("Equation check:",o,i,e)}catch(t){console.error("Error evaluating equation:",t),e=!1}}this.onOk.emit(e);const p=document.getElementById("btn-11");if(e){const s="nimbleTable"===o.getAttribute("template-id"),u=this.objective.includes(",");s&&u||o.setAttribute("game-completed","true"),this.tempInputs.push(i);const b=JSON.parse(null!==(t=o.getAttribute(a))&&void 0!==t?t:"[]"),f=Array.isArray(b)?b.filter((t=>""!==String(t).trim())):[],m=this.tempInputs[this.tempInputs.length-1];if(""!==String(m).trim()&&f.push(m),o.setAttribute(a,JSON.stringify(f)),p.style.pointerEvents="none",this.displayValue="",l(e,r),s&&u){const t=o.querySelector("[type='calculate']");t&&(t.getAttribute("audio")||"").trim()&&(t.style.boxShadow="none !important",t.setAttribute("onCorrect","this.speak='true'"),n.getI().play(t))}const x=(null==o?void 0:o.getAttribute("onCorrect"))||"";if(await c(x,o),!x.includes("scrollCellAfterEquationSolved"))if(u){const t=this.objective.split(",").map((t=>t.trim()));this.userAnswers.length>=t.length&&(o.setAttribute("game-completed","true"),d(),window.dispatchEvent(new CustomEvent(h)))}else d(),window.dispatchEvent(new CustomEvent(h))}else{p.style.pointerEvents="none",this.displayValue="",l(e,r);const t=(null==o?void 0:o.getAttribute("onInCorrect"))||"",i=(null==o?void 0:o.getAttribute("onCorrect"))||"",s="true"===o.getAttribute("is-continue-on-correct");s?await c(t,o):await c(i,o),s||(o.setAttribute("game-completed","true"),d(),u())}p.style.pointerEvents="auto"}render(){return p(f,{key:"561785bf36e862832ec1f8550684f5c15ecc1166",onEntry:this.onEntry,id:"lidoCalculator",style:{width:this.width,height:this.height,backgroundColor:this.bgColor,left:this.x,top:this.y}},p("lido-cell",{key:"21789df12ab18c3bdba7b68ce2943c2d6bd83e45",visible:"true",height:"94px",width:"60px"},p("lido-text",{key:"bb3018fac89a5a96f5949457c30dd2c199c72ea8",visible:"true",id:"lido-calculator-penIcon",type:"click",height:"80px",x:"176%",width:"89px",onEntry:"this.position='relative';",class:"top-icon"},p("img",{key:"2d4fee4142ed51970cddc623ae1635e80808062b",src:b(this.penIcon),alt:"pen",style:{width:"100%",height:"100%"}}))),p("div",{key:"25b755eeeaaeec450aabae4867ad5f14dcf77202",class:"lido-calculator-displayParent"},p("div",{key:"51f310c071edbb264f2f3636118721449651f8f2",class:"lido-calculator-display"},this.displayValue)),p("div",{key:"d7489f877e4fbbd27afaf143666fc241f4df3427",class:"lido-calculator-buttons"},["1","2","3","4","5","6","7","8","9","←","0","OK"].map(((t,i)=>p("lido-text",{id:`btn-${i}`,string:t,visible:"true",type:"click",class:{"lido-calculator-btn-special":"←"===t||"OK"===t,"lido-calculator-btn-default":"←"!==t&&"OK"!==t},onClick:()=>this.handleClick(t)})))))}get el(){return this}static get style(){return"#lidoCalculator{border-radius:19px;border:5px solid #029A9A;position:relative;display:flex;flex-direction:column;padding:2%;box-sizing:border-box}.lido-calculator-btn-special{background-color:#014D4D !important;--btn-shadow-color:#0a2f2f !important}.lido-calculator-btn-default{background-color:#029A9A !important;color:#000;--btn-shadow-color:#0f4242 !important}#lido-calculator-penIcon{--btn-bg-color:#FB7038 !important;--btn-shadow-px:0 8px 0 !important;--btn-shadow-color:#D74B12 !important;border-radius:5px !important}.lido-calculator-displayParent{width:89%;height:107px;background-color:rgb(68, 186, 186);border-radius:5px;margin:14px auto 17px auto;overflow:hidden;display:flex;align-items:end}.lido-calculator-display{width:97%;height:94px;background:#029A9A;color:#fff;text-align:right;display:flex;justify-content:flex-end;align-items:center;font-size:72px;font-weight:700;font-family:'Baloo Bhai 2', serif;border-radius:5px 0px 0px 5px;box-sizing:border-box;margin:0 0px -6px auto}.lido-calculator-buttons{flex:1;display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:1fr;gap:0%;width:100%;justify-items:center;align-items:center;position:relative;top:-1%}.lido-calculator-buttons lido-text{display:flex !important;justify-content:center;align-items:center;width:96px !important;height:80px !important;font-size:72px !important;font-weight:700 !important;color:#fff;border-radius:5px !important;cursor:pointer;text-align:center;line-height:1;box-sizing:border-box;transition:transform 0.1s}.lido-calculator-buttons lido-text:active{transform:scale(0.95)}"}},[0,"lido-calculator",{width:[1],visible:[8],height:[1],objective:[1],onEntry:[1,"on-entry"],x:[1],y:[1],bgColor:[1,"bg-color"],penIcon:[1,"pen-icon"],displayValue:[32],style:[32]}]);function y(){"undefined"!=typeof customElements&&["lido-calculator","lido-cell","lido-text"].forEach((i=>{switch(i){case"lido-calculator":customElements.get(t(i))||customElements.define(t(i),g);break;case"lido-cell":customElements.get(t(i))||m();break;case"lido-text":customElements.get(t(i))||x()}}))}y();export{g as L,y as d}
@@ -1 +1 @@
1
- import{t,p as i,H as e,z as s,c as o,k as n,B as r,E as a,s as h,f as l,g as c,j as d,L as u,a as f,h as g,b as w}from"./index.js";const p=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.showSpeakIcon=!1,this.id="",this.svgSource="",this.svgUrls=[],this.audioUrls=[],this.currentSvgIndex=0,this.moving=!1,this.value="",this.height="auto",this.width="auto",this.audio="",this.x="0px",this.y="0px",this.z="0",this.ariaLabel="",this.ariaHidden="",this.tabIndex=0,this.mode=s.ShowFlow,this.fingerHintUrl="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg",this.highlightTextId="",this.animationTrace=!1,this.delayVisible="",this.disableSpeak=!1,this.style={},this.fileIndex=-1,this.isDragging=!1,this.activePointerId=null,this.freeTraceUpdateCounter=0,this.idleTimer=null,this.fingerImg=null}async initializeSVG(){let t={fileIndex:-1,currentPathIndex:0,lastLength:0,totalPathLength:0,isDragging:!1,circle:null,paths:[],svg:null,proximityThreshold:375,freeTraceProximityThreshold:350,rafId:null,pointerMoveEvent:null,activePointerId:null,mode:this.mode,flowMarkers:[],freeTraceLines:[],currentFreePath:[],lastPointerPos:null};const i=this.svgUrls[this.currentSvgIndex];console.log("Loading SVG from URL:",i),i&&""!==i.trim()?(await this.fetchSVG(o(i)),console.log("SVG fetched successfully\n"),await this.loadAnotherSVG(t,!0)):console.error("No SVG URL provided or index out of bounds.")}componentDidLoad(){n(this.el,this.delayVisible)}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.updateStyles.bind(this)),window.addEventListener("load",this.updateStyles.bind(this)),this.svgUrls=this.svgSource.split(";").map((t=>t.trim())),console.log("svgUrls",this.svgUrls),this.currentSvgIndex=0,console.log("curentSvgIndex",this.currentSvgIndex),this.showSpeakIcon&&(r(this.el),this.el.append(r(this.el))),this.initializeSVG()}disconnectedCallback(){window.removeEventListener("resize",this.updateStyles.bind(this)),window.removeEventListener("load",this.updateStyles.bind(this))}resetIdleTimer(t){null!==this.idleTimer&&(clearTimeout(this.idleTimer),this.idleTimer=null),this.idleTimer=window.setTimeout((()=>{this.showFingerHint(t)}),3e3)}showFingerHint(t){var i;if(this.fingerImg)return;const e=t.paths[t.currentPathIndex];if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","image"),n=new Image;n.onload=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(this.fingerHintUrl))},n.onerror=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(a))},n.src=o(this.fingerHintUrl||a),s.setAttribute("width","40"),s.setAttribute("height","40"),s.setAttribute("id","lido-finger-hint"),s.style.pointerEvents="none",s.style.opacity="0.8",s.setAttribute("x","0"),s.setAttribute("y","0");const r=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");r.setAttribute("dur","2s"),r.setAttribute("repeatCount","indefinite");const h=document.createElementNS("http://www.w3.org/2000/svg","mpath");h.setAttributeNS("http://www.w3.org/1999/xlink","href",`#${e.id}`),r.appendChild(h),s.appendChild(r),null===(i=t.svg)||void 0===i||i.appendChild(s),this.fingerImg=s}hideFingerHint(){this.fingerImg&&this.fingerImg.parentNode&&this.fingerImg.parentNode.removeChild(this.fingerImg),this.fingerImg=null}async fetchSVG(t){console.log(`Fetching SVG from: ${t}`);const i=await fetch(t);if(!i.ok)throw new Error(`Failed to fetch SVG (${t}): ${i.statusText}`);return await i.text()}calculateBoundingBox(t,i=22){let e=1/0,s=1/0,o=-1/0,n=-1/0;return t.forEach((t=>{const i=t.getTotalLength();for(let r=0;r<=100;r++){const a=t.getPointAtLength(r/100*i);a.x<e&&(e=a.x),a.y<s&&(s=a.y),a.x>o&&(o=a.x),a.y>n&&(n=a.y)}})),e-=i,s-=i,o+=i,n+=i,{minX:e,minY:s,maxX:o,maxY:n}}insertSVG(t){const i=document.getElementById("lido-svgContainer");if(!i)return;i.innerHTML=t;const e=i.querySelector("svg");e.removeAttribute("width"),e.removeAttribute("height");const s=e.querySelectorAll("path, line"),o=this.calculateBoundingBox(Array.from(s));e.setAttribute("viewBox",`${o.minX} ${o.minY} ${o.maxX-o.minX} ${o.maxY-o.minY}`)}getSVGElement(){return document.getElementById("lido-svgContainer").querySelector("svg")}getPaths(t){return Array.from(t.querySelectorAll("path, line"))}createFlowMarkersForPath(t){var i;if(!t)return;const e=t.ownerSVGElement;if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d",t.getAttribute("d")||""),s.setAttribute("stroke","blue"),s.setAttribute("stroke-width","2"),s.setAttribute("stroke-dasharray","6,6"),s.setAttribute("fill","none"),s.setAttribute("class","lido-flow-indicator"),null===(i=t.parentNode)||void 0===i||i.appendChild(s);let o=e.querySelector("defs#lido-flow-defs");o||(o=document.createElementNS("http://www.w3.org/2000/svg","defs"),o.setAttribute("id","lido-flow-defs"),e.insertBefore(o,e.firstChild));const n=`arrow-${Math.random().toString(36)}`,r=document.createElementNS("http://www.w3.org/2000/svg","marker");r.setAttribute("id",n),r.setAttribute("markerWidth","10"),r.setAttribute("markerHeight","10"),r.setAttribute("refX","5"),r.setAttribute("refY","5"),r.setAttribute("orient","auto"),r.setAttribute("markerUnits","strokeWidth");const a=document.createElementNS("http://www.w3.org/2000/svg","path");return a.setAttribute("d","M0,0 L10,5 L0,10 L2,5 Z"),a.setAttribute("fill","blue"),r.appendChild(a),o.appendChild(r),s.setAttribute("marker-end",`url(#${n})`),s}updateFlowIndicators(t){t.svg.querySelectorAll(".lido-flow-indicator").forEach((i=>{t.mode===s.NoFlow?i.style.display="none":t.mode===s.ShowFlow&&(i.style.display="block")}))}setupDrawingPath(t){t.paths.forEach(((i,e)=>{const o=i.getTotalLength();i.setAttribute("id","lido-path-"+e);const n=i.cloneNode();n.style.opacity="100",n.style["stroke-opacity"]="100";const r=i.style["stroke-width"]||i.getAttribute("stroke-width");n.setAttribute("stroke-width",r),n.setAttribute("stroke-dasharray",o.toString()),n.setAttribute("stroke-dashoffset",o.toString()),i.parentNode.appendChild(n,i),i.setAttribute("class","lido-trace-path"),n.setAttribute("class","lido-trace-path-green"),i.greenPath=n,i.classList.add(t.mode),t.mode===s.BlindTracing||t.mode===s.BlindFreeTrace?i.setAttribute("stroke","none"):(i.setAttribute("stroke","#000"),i.setAttribute("stroke-width",r),i.setAttribute("fill","none"),i.setAttribute("stroke-dasharray",o.toString()),i.setAttribute("stroke-dashoffset","0")),e===t.currentPathIndex&&t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(i))})),t.totalPathLength=t.paths[t.currentPathIndex].getTotalLength()}setupDraggableCircle(t){var i;const e=t.paths[0].getPointAtLength(0),s=document.createElementNS("http://www.w3.org/2000/svg","circle");t.paths[t.currentPathIndex].style["stroke-width"]||t.paths[t.currentPathIndex].getAttribute("stroke-width"),s.setAttribute("id","lido-draggableCircle"),s.setAttribute("cx",e.x.toString()),s.setAttribute("cy",e.y.toString()),s.setAttribute("r","calc(20)"),s.setAttribute("fill","#CF1565"),null===(i=t.svg)||void 0===i||i.appendChild(s),t.circle=s,this.resetIdleTimer(t)}addEventListeners(t){var i,e,s,o;if(!t.circle||!t.paths||0===t.paths.length)return;t.circle.addEventListener("pointerdown",(i=>{i.preventDefault();const e=this.getPointerPosition(i,t.svg),s={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};this.getDistanceSquared(e,s)<=t.proximityThreshold*t.proximityThreshold&&(t.isDragging=!0,t.activePointerId=i.pointerId,t.circle.setPointerCapture(i.pointerId)),this.hideFingerHint(),this.resetIdleTimer(t)})),null===(i=t.svg)||void 0===i||i.addEventListener("pointermove",(i=>{t.isDragging&&i.pointerId===t.activePointerId&&(t.pointerMoveEvent=i,t.rafId||(t.rafId=requestAnimationFrame((()=>{this.handlePointerMove(t),t.rafId=null}))))}));const n=i=>{i.pointerId===t.activePointerId&&(t.isDragging=!1,t.activePointerId=null,this.hideFingerHint(),this.resetIdleTimer(t))};null===(e=t.svg)||void 0===e||e.addEventListener("pointerup",n),null===(s=t.svg)||void 0===s||s.addEventListener("pointercancel",n),null===(o=t.svg)||void 0===o||o.addEventListener("contextmenu",(t=>{t.preventDefault()}))}async handlePointerMove(t){var i,e,o,n,r,a;if(!t.isDragging)return;if(!t.circle||!t.paths||0===t.paths.length)return;this.hideFingerHint();const h=this.getPointerPosition(t.pointerMoveEvent,t.svg),l={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};if(t.lastPointerPos){const i=h.x-t.lastPointerPos.x,e=h.y-t.lastPointerPos.y;if(i*i+e*e<1)return}const c=t.paths[t.currentPathIndex];if(!c)return void console.error("No valid path found at the current index");let d;if(d=t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace?t.freeTraceProximityThreshold*t.freeTraceProximityThreshold:t.proximityThreshold*t.proximityThreshold,this.getDistanceSquared(h,l)>d)return;const u=this.getClosestPointOnPath(c,h);if(!(this.getDistanceSquared(h,u)>d)){if(t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace){if(this.freeTraceUpdateCounter=(this.freeTraceUpdateCounter||0)+1,this.freeTraceUpdateCounter%2!=0)return;if(t.currentFreePath||(t.currentFreePath=[]),!t.currentFreePath[t.currentPathIndex]){const e=document.createElementNS("http://www.w3.org/2000/svg","polyline"),s=t.paths[t.currentPathIndex].style["stroke-width"]||t.paths[t.currentPathIndex].getAttribute("stroke-width");e.setAttribute("stroke-width",s),e.setAttribute("fill","none"),e.setAttribute("stroke-linecap","round"),e.setAttribute("stroke","lightgreen"),e.setAttribute("points",`${h.x},${h.y}`),null===(i=t.svg)||void 0===i||i.appendChild(e),t.currentFreePath[t.currentPathIndex]=e,t.currentFreePolylinePoints=t.currentFreePolylinePoints||[],t.currentFreePolylinePoints[t.currentPathIndex]=[{x:h.x,y:h.y}],t.lastPointerPos=h,t.freeTracePointsCount=1}const s=10;if(t.freeTracePointsCount=(t.freeTracePointsCount||1)+1,t.freeTracePointsCount>s)return;t.currentFreePolylinePoints=t.currentFreePolylinePoints||[];let n=t.currentFreePolylinePoints[t.currentPathIndex]||[];n.push({x:h.x,y:h.y}),t.currentFreePolylinePoints[t.currentPathIndex]=n;const r=n.map((t=>`${t.x},${t.y}`)).join(" ");t.currentFreePath[t.currentPathIndex].setAttribute("points",r),t.circle.setAttribute("cx",h.x.toString()),t.circle.setAttribute("cy",h.y.toString());const a=null===(e=t.svg)||void 0===e?void 0:e.childNodes;let l=!1;for(let t=0;t<((null==a?void 0:a.length)||0);t++){const i=null==a?void 0:a.item(t);if(i&&"circle"===i.tagName){l=!0;break}}return!l&&t.circle&&(null===(o=t.svg)||void 0===o||o.appendChild(t.circle)),t.lastPointerPos=h,void(n.length>=s&&(this.moveToNextPath(t),t.currentFreePath[t.currentPathIndex]=null,t.currentFreePolylinePoints[t.currentPathIndex]=[],t.freeTracePointsCount=0))}if(t.isDragging&&u.length>=t.lastLength){t.lastLength=u.length,(Math.abs(u.x-l.x)>1||Math.abs(u.y-l.y)>1)&&(t.circle.setAttribute("cx",u.x.toString()),t.circle.setAttribute("cy",u.y.toString()));const i=null===(n=t.svg)||void 0===n?void 0:n.childNodes;let e=!1;for(let t=0;t<((null==i?void 0:i.length)||0);t++){const s=null==i?void 0:i.item(t);if(s&&"circle"===s.tagName){e=!0;break}}!e&&t.circle&&(null===(r=t.svg)||void 0===r||r.appendChild(t.circle)),null===(a=c.greenPath)||void 0===a||a.setAttribute("stroke-dashoffset",(t.totalPathLength-t.lastLength).toString());const s=.95;let o=t.lastLength/t.totalPathLength,h=c.getPointAtLength(0),d=c.getPointAtLength(c.getTotalLength());this.getDistanceSquared(h,d)<200&&t.totalPathLength>50?o>=s&&(await this.animatePathToEnd(t,c),t.currentPathIndex<t.paths.length-1?this.moveToNextPath(t):t.currentPathIndex===t.paths.length-1&&this.moveToNextContainer()):t.totalPathLength-1-t.lastLength<5&&t.currentPathIndex<t.paths.length-1?this.moveToNextPath(t):t.totalPathLength-1-t.lastLength<5&&t.currentPathIndex===t.paths.length-1&&this.moveToNextContainer()}}}animatePathToEnd(t,i,e=300){if(!i||!t.svg)return Promise.resolve();if(t._animatingToEnd)return Promise.resolve();t._animatingToEnd=!0;const s=t.lastLength||0,o=i.getTotalLength(),n=performance.now(),r=i.greenPath||i.parentNode&&i.parentNode.querySelector(".lido-trace-path-green");return new Promise((a=>{const h=l=>{const c=Math.min(1,(l-n)/e),d=s+(o-s)*c;t.lastLength=d;const u=i.getPointAtLength(d);if(t.circle&&(t.circle.setAttribute("cx",u.x.toString()),t.circle.setAttribute("cy",u.y.toString())),r&&r.setAttribute("stroke-dashoffset",(t.totalPathLength-d).toString()),c<1)requestAnimationFrame(h);else{if(t.lastLength=o,t.circle){const e=i.getPointAtLength(o);t.circle.setAttribute("cx",e.x.toString()),t.circle.setAttribute("cy",e.y.toString())}r&&r.setAttribute("stroke-dashoffset","0"),t._animatingToEnd=!1,a()}};requestAnimationFrame(h)}))}async moveToNextContainer(){if(this.isDragging=!1,!this.moving){if(this.moving=!0,this.highlightTextId&&this.highlightLetter(this.currentSvgIndex),this.animationTrace&&await this.playTraceAnimation(),h(!0),this.el&&this.onCorrect&&await l(this.onCorrect,this.el),console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`),this.currentSvgIndex<this.svgUrls.length-1)return await new Promise((t=>setTimeout(t,1e3))),this.currentSvgIndex++,await this.initializeSVG(),document.getElementById("lido-svgContainer").style.visibility="visible",void(this.moving=!1);c(),console.log("All SVGs completed, hiding component."),d()}}getPointerPosition(t,i){var e;const s=i.createSVGPoint();s.x=t.clientX,s.y=t.clientY;const o=null===(e=i.getScreenCTM())||void 0===e?void 0:e.inverse();return o?s.matrixTransform(o):{x:t.clientX,y:t.clientY}}getDistanceSquared(t,i){const e=t.x-i.x,s=t.y-i.y;return e*e+s*s}getClosestPointOnPath(t,i){const e=t.getTotalLength();let s={x:0,y:0,length:0},o=1/0,n={length:0},r=1/0;for(let s=0;s<=e;s+=40){const e=t.getPointAtLength(s),o=this.getDistanceSquared(i,e);o<r&&(r=o,n={x:e.x,y:e.y,length:s})}const a=Math.max(n.length-40,0),h=Math.min(n.length+40,e);for(let e=a;e<=h;e+=6){const n=t.getPointAtLength(e),r=this.getDistanceSquared(i,n);r<o&&(o=r,s={x:n.x,y:n.y,length:e})}return s}async loadAnotherSVG(t,i){t.isDragging=!1;try{t.svg&&this.cleanupPreviousSVG(t);const i=await this.fetchSVG(o(this.svgSource.split(";").map((t=>t.trim()))[this.currentSvgIndex]));this.insertSVG(i),t.svg=this.getSVGElement(),this.mode!==s.BlindTracing&&this.mode!==s.BlindFreeTrace||t.svg.querySelectorAll("image").forEach((t=>{t.style.display="none"})),t.paths=this.getPaths(t.svg),this.setupDrawingPath(t),this.setupDraggableCircle(t),this.addEventListeners(t)}catch(t){console.error(`Error loading SVG (${this.svgSource}):`,t)}}cleanupPreviousSVG(t){var i,e;t.circle&&(null===(i=t.svg)||void 0===i||i.removeChild(t.circle),t.circle=null),(null===(e=t.svg)||void 0===e?void 0:e.querySelectorAll(".lido-flow-indicator")).forEach((t=>{t.remove()})),t.currentPathIndex=0,t.lastLength=0,t.totalPathLength=t.paths[0].getTotalLength(),this.hideFingerHint(),this.resetIdleTimer(t)}async moveToNextPath(t){var i,e;if(t.isDragging=!1,t.currentPathIndex++,t.lastLength=0,this.hideFingerHint(),t.currentPathIndex>=t.paths.length)return void this.moveToNextContainer();const o=t.paths[t.currentPathIndex];if(!o)return void console.error("No valid path found at the next index");t.totalPathLength=o.getTotalLength();const n=o.getPointAtLength(0);null===(i=t.circle)||void 0===i||i.setAttribute("cx",n.x.toString()),null===(e=t.circle)||void 0===e||e.setAttribute("cy",n.y.toString()),t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(o)),this.resetIdleTimer(t)}async playTraceAnimation(){const t=document.getElementById(this.id);t&&(t.classList.add("trace-animate"),await new Promise((t=>setTimeout(t,500))),t.classList.remove("trace-animate"))}async highlightLetter(t){if(!document.getElementById(u))return;const i=this.el;if(!i)return;const e=this.highlightTextId;if(!e)return;const s=document.getElementById(e);if(!s)return;const n=this.audio;if(!n)return;this.audioUrls=n.split(";").map((t=>t.trim())),console.log("audioUrls",this.audioUrls);const r=s.getAttribute("span-type");if(!r)return;const a=s.querySelector(".lido-text-content");if(a){if("letters"===r){const e=a.querySelectorAll(".text-letters");if(t<0||t>=e.length)return;const n=e[t];if(n){const t=i.querySelector("#lido-svgContainer");if(await l("this.alignMatch='true';",s,t),t.style.animation="trace-animation 0.4s forwards",t.style.setProperty("--trace-width",n.offsetWidth-5+"px"),t.style.setProperty("--trace-height",n.offsetHeight-5+"px"),await l("this.alignMatch='true';",n,t),setTimeout((()=>{n.classList.add("letter-highlight"),t.style.transform="",t.style.animation="",t.style.visibility="hidden"}),500),this.audioUrls[this.currentSvgIndex]){console.log("Playing audio:",this.audioUrls[this.currentSvgIndex]);const t=new Audio(o(this.audioUrls[this.currentSvgIndex]));await t.play()}}}if("words"===r){const i=a.querySelectorAll(".text-words");if(t<0||t>=i.length)return;const e=i[t];if(e&&(e.classList.add("word-highlight"),this.audioUrls[this.currentSvgIndex])){const t=new Audio(o(this.audioUrls[this.currentSvgIndex]));await t.play()}}}}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:f(this.height,t),width:f(this.width,t),top:f(this.y,t),left:f(this.x,t),zIndex:this.z}}render(){return g(w,{key:"253a2c8840d47f1758eb2e025de799921ba7e972",class:"lido-trace",id:this.id,audio:this.audio,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,style:this.style,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,tabindex:this.tabIndex,"disable-speak":this.disableSpeak},g("div",{key:"182018457f29150918f52ef92bc0fc4fc70bb463",style:this.style,id:"lido-svgContainer"}))}static get assetsDirs(){return["svg","images"]}get el(){return this}static get watchers(){return{svgSource:[{initializeSVG:0}],mode:[{initializeSVG:0}]}}static get style(){return":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}"}},[0,"lido-trace",{showSpeakIcon:[4,"show-speak-icon"],id:[1],svgSource:[1,"svg-source"],value:[1],height:[1],width:[1],audio:[1],x:[1],y:[1],z:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],tabIndex:[2,"tab-index"],mode:[1],fingerHintUrl:[1,"finger-hint-url"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],highlightTextId:[1,"highlight-text-id"],animationTrace:[4,"animation-trace"],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],svgUrls:[32],audioUrls:[32],currentSvgIndex:[32],moving:[32],style:[32],fileIndex:[32],isDragging:[32],activePointerId:[32],freeTraceUpdateCounter:[32],idleTimer:[32],fingerImg:[32]},void 0,{svgSource:[{initializeSVG:0}],mode:[{initializeSVG:0}]}]);function m(){"undefined"!=typeof customElements&&["lido-trace"].forEach((i=>{"lido-trace"===i&&(customElements.get(t(i))||customElements.define(t(i),p))}))}m();export{p as L,m as d}
1
+ import{t,p as i,H as e,z as s,c as o,k as n,B as r,E as a,s as h,f as l,g as c,L as d,j as u,a as f,h as w,b as g}from"./index.js";const m=i(class extends e{constructor(t){super(),!1!==t&&this.__registerHost(),this.showSpeakIcon=!1,this.id="",this.svgSource="",this.svgUrls=[],this.audioUrls=[],this.currentSvgIndex=0,this.moving=!1,this.value="",this.height="auto",this.width="auto",this.audio="",this.x="0px",this.y="0px",this.z="0",this.ariaLabel="",this.ariaHidden="",this.tabIndex=0,this.mode=s.ShowFlow,this.fingerHintUrl="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg",this.highlightTextId="",this.animationTrace=!1,this.delayVisible="",this.disableSpeak=!1,this.style={},this.fileIndex=-1,this.isDragging=!1,this.activePointerId=null,this.freeTraceUpdateCounter=0,this.idleTimer=null,this.fingerImg=null}async initializeSVG(){let t={fileIndex:-1,currentPathIndex:0,lastLength:0,totalPathLength:0,isDragging:!1,circle:null,paths:[],svg:null,proximityThreshold:375,freeTraceProximityThreshold:350,rafId:null,pointerMoveEvent:null,activePointerId:null,mode:this.mode,flowMarkers:[],freeTraceLines:[],currentFreePath:[],lastPointerPos:null};const i=this.svgUrls[this.currentSvgIndex];console.log("Loading SVG from URL:",i),i&&""!==i.trim()?(await this.fetchSVG(o(i)),console.log("SVG fetched successfully\n"),await this.loadAnotherSVG(t,!0)):console.error("No SVG URL provided or index out of bounds.")}componentDidLoad(){n(this.el,this.delayVisible)}componentWillLoad(){this.updateStyles(),window.addEventListener("resize",this.updateStyles.bind(this)),window.addEventListener("load",this.updateStyles.bind(this)),this.svgUrls=this.svgSource.split(";").map((t=>t.trim())),console.log("svgUrls",this.svgUrls),this.currentSvgIndex=0,console.log("curentSvgIndex",this.currentSvgIndex),this.showSpeakIcon&&(r(this.el),this.el.append(r(this.el))),this.initializeSVG()}disconnectedCallback(){window.removeEventListener("resize",this.updateStyles.bind(this)),window.removeEventListener("load",this.updateStyles.bind(this))}resetIdleTimer(t){null!==this.idleTimer&&(clearTimeout(this.idleTimer),this.idleTimer=null),this.idleTimer=window.setTimeout((()=>{this.showFingerHint(t)}),3e3)}showFingerHint(t){var i;if(this.fingerImg)return;const e=t.paths[t.currentPathIndex];if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","image"),n=new Image;n.onload=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(this.fingerHintUrl))},n.onerror=()=>{s.setAttributeNS("http://www.w3.org/1999/xlink","href",o(a))},n.src=o(this.fingerHintUrl||a),s.setAttribute("width","40"),s.setAttribute("height","40"),s.setAttribute("id","lido-finger-hint"),s.style.pointerEvents="none",s.style.opacity="0.8",s.setAttribute("x","0"),s.setAttribute("y","0");const r=document.createElementNS("http://www.w3.org/2000/svg","animateMotion");r.setAttribute("dur","2s"),r.setAttribute("repeatCount","indefinite");const h=document.createElementNS("http://www.w3.org/2000/svg","mpath");h.setAttributeNS("http://www.w3.org/1999/xlink","href",`#${e.id}`),r.appendChild(h),s.appendChild(r),null===(i=t.svg)||void 0===i||i.appendChild(s),this.fingerImg=s}hideFingerHint(){this.fingerImg&&this.fingerImg.parentNode&&this.fingerImg.parentNode.removeChild(this.fingerImg),this.fingerImg=null}async fetchSVG(t){console.log(`Fetching SVG from: ${t}`);const i=await fetch(t);if(!i.ok)throw new Error(`Failed to fetch SVG (${t}): ${i.statusText}`);return await i.text()}calculateBoundingBox(t,i=22){let e=1/0,s=1/0,o=-1/0,n=-1/0;return t.forEach((t=>{const i=t.getTotalLength();for(let r=0;r<=100;r++){const a=t.getPointAtLength(r/100*i);a.x<e&&(e=a.x),a.y<s&&(s=a.y),a.x>o&&(o=a.x),a.y>n&&(n=a.y)}})),e-=i,s-=i,o+=i,n+=i,{minX:e,minY:s,maxX:o,maxY:n}}insertSVG(t){const i=document.getElementById("lido-svgContainer");if(!i)return;i.innerHTML=t;const e=i.querySelector("svg");e.removeAttribute("width"),e.removeAttribute("height");const s=e.querySelectorAll("path, line"),o=this.calculateBoundingBox(Array.from(s));e.setAttribute("viewBox",`${o.minX} ${o.minY} ${o.maxX-o.minX} ${o.maxY-o.minY}`)}getSVGElement(){return document.getElementById("lido-svgContainer").querySelector("svg")}getPaths(t){return Array.from(t.querySelectorAll("path, line"))}createFlowMarkersForPath(t){var i;if(!t)return;const e=t.ownerSVGElement;if(!e)return;const s=document.createElementNS("http://www.w3.org/2000/svg","path");s.setAttribute("d",t.getAttribute("d")||""),s.setAttribute("stroke","blue"),s.setAttribute("stroke-width","2"),s.setAttribute("stroke-dasharray","6,6"),s.setAttribute("fill","none"),s.setAttribute("class","lido-flow-indicator"),null===(i=t.parentNode)||void 0===i||i.appendChild(s);let o=e.querySelector("defs#lido-flow-defs");o||(o=document.createElementNS("http://www.w3.org/2000/svg","defs"),o.setAttribute("id","lido-flow-defs"),e.insertBefore(o,e.firstChild));const n=`arrow-${Math.random().toString(36)}`,r=document.createElementNS("http://www.w3.org/2000/svg","marker");r.setAttribute("id",n),r.setAttribute("markerWidth","10"),r.setAttribute("markerHeight","10"),r.setAttribute("refX","5"),r.setAttribute("refY","5"),r.setAttribute("orient","auto"),r.setAttribute("markerUnits","strokeWidth");const a=document.createElementNS("http://www.w3.org/2000/svg","path");return a.setAttribute("d","M0,0 L10,5 L0,10 L2,5 Z"),a.setAttribute("fill","blue"),r.appendChild(a),o.appendChild(r),s.setAttribute("marker-end",`url(#${n})`),s}updateFlowIndicators(t){t.svg.querySelectorAll(".lido-flow-indicator").forEach((i=>{t.mode===s.NoFlow?i.style.display="none":t.mode===s.ShowFlow&&(i.style.display="block")}))}setupDrawingPath(t){t.paths.forEach(((i,e)=>{const o=i.getTotalLength();i.setAttribute("id","lido-path-"+e);const n=i.cloneNode();n.style.opacity="100",n.style["stroke-opacity"]="100";const r=i.style["stroke-width"]||i.getAttribute("stroke-width");n.setAttribute("stroke-width",r),n.setAttribute("stroke-dasharray",o.toString()),n.setAttribute("stroke-dashoffset",o.toString()),i.parentNode.appendChild(n,i),i.setAttribute("class","lido-trace-path"),n.setAttribute("class","lido-trace-path-green"),i.greenPath=n,i.classList.add(t.mode),t.mode===s.BlindTracing||t.mode===s.BlindFreeTrace?i.setAttribute("stroke","none"):(i.setAttribute("stroke","#000"),i.setAttribute("stroke-width",r),i.setAttribute("fill","none"),i.setAttribute("stroke-dasharray",o.toString()),i.setAttribute("stroke-dashoffset","0")),e===t.currentPathIndex&&t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(i))})),t.totalPathLength=t.paths[t.currentPathIndex].getTotalLength()}setupDraggableCircle(t){var i;const e=t.paths[0].getPointAtLength(0),s=document.createElementNS("http://www.w3.org/2000/svg","circle");t.paths[t.currentPathIndex].style["stroke-width"]||t.paths[t.currentPathIndex].getAttribute("stroke-width"),s.setAttribute("id","lido-draggableCircle"),s.setAttribute("cx",e.x.toString()),s.setAttribute("cy",e.y.toString()),s.setAttribute("r","calc(20)"),s.setAttribute("fill","#CF1565"),null===(i=t.svg)||void 0===i||i.appendChild(s),t.circle=s,this.resetIdleTimer(t)}addEventListeners(t){var i,e,s,o;if(!t.circle||!t.paths||0===t.paths.length)return;t.circle.addEventListener("pointerdown",(i=>{i.preventDefault();const e=this.getPointerPosition(i,t.svg),s={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};this.getDistanceSquared(e,s)<=t.proximityThreshold*t.proximityThreshold&&(t.isDragging=!0,t.activePointerId=i.pointerId,t.circle.setPointerCapture(i.pointerId)),this.hideFingerHint(),this.resetIdleTimer(t)})),null===(i=t.svg)||void 0===i||i.addEventListener("pointermove",(i=>{t.isDragging&&i.pointerId===t.activePointerId&&(t.pointerMoveEvent=i,t.rafId||(t.rafId=requestAnimationFrame((()=>{this.handlePointerMove(t),t.rafId=null}))))}));const n=i=>{i.pointerId===t.activePointerId&&(t.isDragging=!1,t.activePointerId=null,this.hideFingerHint(),this.resetIdleTimer(t))};null===(e=t.svg)||void 0===e||e.addEventListener("pointerup",n),null===(s=t.svg)||void 0===s||s.addEventListener("pointercancel",n),null===(o=t.svg)||void 0===o||o.addEventListener("contextmenu",(t=>{t.preventDefault()}))}async handlePointerMove(t){var i,e,o,n,r,a;if(!t.isDragging)return;if(!t.circle||!t.paths||0===t.paths.length)return;this.hideFingerHint();const h=this.getPointerPosition(t.pointerMoveEvent,t.svg),l={x:parseFloat(t.circle.getAttribute("cx")),y:parseFloat(t.circle.getAttribute("cy"))};if(t.lastPointerPos){const i=h.x-t.lastPointerPos.x,e=h.y-t.lastPointerPos.y;if(i*i+e*e<1)return}const c=t.paths[t.currentPathIndex];if(!c)return void console.error("No valid path found at the current index");let d;if(d=t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace?t.freeTraceProximityThreshold*t.freeTraceProximityThreshold:t.proximityThreshold*t.proximityThreshold,this.getDistanceSquared(h,l)>d)return;const u=this.getClosestPointOnPath(c,h);if(!(this.getDistanceSquared(h,u)>d)){if(t.mode===s.FreeTrace||t.mode===s.BlindFreeTrace){if(this.freeTraceUpdateCounter=(this.freeTraceUpdateCounter||0)+1,this.freeTraceUpdateCounter%2!=0)return;if(t.currentFreePath||(t.currentFreePath=[]),!t.currentFreePath[t.currentPathIndex]){const e=document.createElementNS("http://www.w3.org/2000/svg","polyline"),s=t.paths[t.currentPathIndex].style["stroke-width"]||t.paths[t.currentPathIndex].getAttribute("stroke-width");e.setAttribute("stroke-width",s),e.setAttribute("fill","none"),e.setAttribute("stroke-linecap","round"),e.setAttribute("stroke","lightgreen"),e.setAttribute("points",`${h.x},${h.y}`),null===(i=t.svg)||void 0===i||i.appendChild(e),t.currentFreePath[t.currentPathIndex]=e,t.currentFreePolylinePoints=t.currentFreePolylinePoints||[],t.currentFreePolylinePoints[t.currentPathIndex]=[{x:h.x,y:h.y}],t.lastPointerPos=h,t.freeTracePointsCount=1}const s=10;if(t.freeTracePointsCount=(t.freeTracePointsCount||1)+1,t.freeTracePointsCount>s)return;t.currentFreePolylinePoints=t.currentFreePolylinePoints||[];let n=t.currentFreePolylinePoints[t.currentPathIndex]||[];n.push({x:h.x,y:h.y}),t.currentFreePolylinePoints[t.currentPathIndex]=n;const r=n.map((t=>`${t.x},${t.y}`)).join(" ");t.currentFreePath[t.currentPathIndex].setAttribute("points",r),t.circle.setAttribute("cx",h.x.toString()),t.circle.setAttribute("cy",h.y.toString());const a=null===(e=t.svg)||void 0===e?void 0:e.childNodes;let l=!1;for(let t=0;t<((null==a?void 0:a.length)||0);t++){const i=null==a?void 0:a.item(t);if(i&&"circle"===i.tagName){l=!0;break}}return!l&&t.circle&&(null===(o=t.svg)||void 0===o||o.appendChild(t.circle)),t.lastPointerPos=h,void(n.length>=s&&(this.moveToNextPath(t),t.currentFreePath[t.currentPathIndex]=null,t.currentFreePolylinePoints[t.currentPathIndex]=[],t.freeTracePointsCount=0))}if(t.isDragging&&u.length>=t.lastLength){t.lastLength=u.length,(Math.abs(u.x-l.x)>1||Math.abs(u.y-l.y)>1)&&(t.circle.setAttribute("cx",u.x.toString()),t.circle.setAttribute("cy",u.y.toString()));const i=null===(n=t.svg)||void 0===n?void 0:n.childNodes;let e=!1;for(let t=0;t<((null==i?void 0:i.length)||0);t++){const s=null==i?void 0:i.item(t);if(s&&"circle"===s.tagName){e=!0;break}}!e&&t.circle&&(null===(r=t.svg)||void 0===r||r.appendChild(t.circle)),null===(a=c.greenPath)||void 0===a||a.setAttribute("stroke-dashoffset",(t.totalPathLength-t.lastLength).toString());const s=.95;let o=t.lastLength/t.totalPathLength,h=c.getPointAtLength(0),d=c.getPointAtLength(c.getTotalLength());this.getDistanceSquared(h,d)<200&&t.totalPathLength>50?o>=s&&(await this.animatePathToEnd(t,c),t.currentPathIndex<t.paths.length-1?this.moveToNextPath(t):t.currentPathIndex===t.paths.length-1&&this.moveToNextContainer()):t.totalPathLength-1-t.lastLength<5&&t.currentPathIndex<t.paths.length-1?this.moveToNextPath(t):t.totalPathLength-1-t.lastLength<5&&t.currentPathIndex===t.paths.length-1&&this.moveToNextContainer()}}}animatePathToEnd(t,i,e=300){if(!i||!t.svg)return Promise.resolve();if(t._animatingToEnd)return Promise.resolve();t._animatingToEnd=!0;const s=t.lastLength||0,o=i.getTotalLength(),n=performance.now(),r=i.greenPath||i.parentNode&&i.parentNode.querySelector(".lido-trace-path-green");return new Promise((a=>{const h=l=>{const c=Math.min(1,(l-n)/e),d=s+(o-s)*c;t.lastLength=d;const u=i.getPointAtLength(d);if(t.circle&&(t.circle.setAttribute("cx",u.x.toString()),t.circle.setAttribute("cy",u.y.toString())),r&&r.setAttribute("stroke-dashoffset",(t.totalPathLength-d).toString()),c<1)requestAnimationFrame(h);else{if(t.lastLength=o,t.circle){const e=i.getPointAtLength(o);t.circle.setAttribute("cx",e.x.toString()),t.circle.setAttribute("cy",e.y.toString())}r&&r.setAttribute("stroke-dashoffset","0"),t._animatingToEnd=!1,a()}};requestAnimationFrame(h)}))}async moveToNextContainer(){if(this.isDragging=!1,this.moving)return;if(this.moving=!0,this.highlightTextId&&this.highlightLetter(this.currentSvgIndex),this.animationTrace&&await this.playTraceAnimation(),h(!0),console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`),this.currentSvgIndex<this.svgUrls.length-1)return await new Promise((t=>setTimeout(t,1e3))),this.currentSvgIndex++,await this.initializeSVG(),document.getElementById("lido-svgContainer").style.visibility="visible",this.moving=!1,void(this.el&&this.onCorrect&&await l(this.onCorrect,this.el));c(),console.log("All SVGs completed, hiding component.");const t=document.querySelector(d),i=t.getAttribute("onCorrect");t&&i&&(await new Promise((t=>setTimeout(t,1e3))),await l(i,this.el)),u()}getPointerPosition(t,i){var e;const s=i.createSVGPoint();s.x=t.clientX,s.y=t.clientY;const o=null===(e=i.getScreenCTM())||void 0===e?void 0:e.inverse();return o?s.matrixTransform(o):{x:t.clientX,y:t.clientY}}getDistanceSquared(t,i){const e=t.x-i.x,s=t.y-i.y;return e*e+s*s}getClosestPointOnPath(t,i){const e=t.getTotalLength();let s={x:0,y:0,length:0},o=1/0,n={length:0},r=1/0;for(let s=0;s<=e;s+=40){const e=t.getPointAtLength(s),o=this.getDistanceSquared(i,e);o<r&&(r=o,n={x:e.x,y:e.y,length:s})}const a=Math.max(n.length-40,0),h=Math.min(n.length+40,e);for(let e=a;e<=h;e+=6){const n=t.getPointAtLength(e),r=this.getDistanceSquared(i,n);r<o&&(o=r,s={x:n.x,y:n.y,length:e})}return s}async loadAnotherSVG(t,i){t.isDragging=!1;try{t.svg&&this.cleanupPreviousSVG(t);const i=await this.fetchSVG(o(this.svgSource.split(";").map((t=>t.trim()))[this.currentSvgIndex]));this.insertSVG(i),t.svg=this.getSVGElement(),this.mode!==s.BlindTracing&&this.mode!==s.BlindFreeTrace||t.svg.querySelectorAll("image").forEach((t=>{t.style.display="none"})),t.paths=this.getPaths(t.svg),this.setupDrawingPath(t),this.setupDraggableCircle(t),this.addEventListeners(t)}catch(t){console.error(`Error loading SVG (${this.svgSource}):`,t)}}cleanupPreviousSVG(t){var i,e;t.circle&&(null===(i=t.svg)||void 0===i||i.removeChild(t.circle),t.circle=null),(null===(e=t.svg)||void 0===e?void 0:e.querySelectorAll(".lido-flow-indicator")).forEach((t=>{t.remove()})),t.currentPathIndex=0,t.lastLength=0,t.totalPathLength=t.paths[0].getTotalLength(),this.hideFingerHint(),this.resetIdleTimer(t)}async moveToNextPath(t){var i,e;if(t.isDragging=!1,t.currentPathIndex++,t.lastLength=0,this.hideFingerHint(),t.currentPathIndex>=t.paths.length)return void this.moveToNextContainer();const o=t.paths[t.currentPathIndex];if(!o)return void console.error("No valid path found at the next index");t.totalPathLength=o.getTotalLength();const n=o.getPointAtLength(0);null===(i=t.circle)||void 0===i||i.setAttribute("cx",n.x.toString()),null===(e=t.circle)||void 0===e||e.setAttribute("cy",n.y.toString()),t.mode===s.ShowFlow&&(t.flowMarkers=this.createFlowMarkersForPath(o)),this.resetIdleTimer(t)}async playTraceAnimation(){const t=document.getElementById(this.id);t&&(t.classList.add("trace-animate"),await new Promise((t=>setTimeout(t,500))),t.classList.remove("trace-animate"))}async highlightLetter(t){if(!document.getElementById(d))return;const i=this.el;if(!i)return;const e=this.highlightTextId;if(!e)return;const s=document.getElementById(e);if(!s)return;const n=this.audio;if(!n)return;this.audioUrls=n.split(";").map((t=>t.trim())),console.log("audioUrls",this.audioUrls);const r=s.getAttribute("span-type");if(!r)return;const a=s.querySelector(".lido-text-content");if(a){if("letters"===r){const e=a.querySelectorAll(".text-letters");if(t<0||t>=e.length)return;const n=e[t];if(n){const t=i.querySelector("#lido-svgContainer");if(await l("this.alignMatch='true';",s,t),t.style.animation="trace-animation 0.4s forwards",t.style.setProperty("--trace-width",n.offsetWidth-5+"px"),t.style.setProperty("--trace-height",n.offsetHeight-5+"px"),await l("this.alignMatch='true';",n,t),setTimeout((()=>{n.classList.add("letter-highlight"),t.style.transform="",t.style.animation="",t.style.visibility="hidden"}),500),this.audioUrls[this.currentSvgIndex]){console.log("Playing audio:",this.audioUrls[this.currentSvgIndex]);const t=new Audio(o(this.audioUrls[this.currentSvgIndex]));await t.play()}}}if("words"===r){const i=a.querySelectorAll(".text-words");if(t<0||t>=i.length)return;const e=i[t];if(e&&(e.classList.add("word-highlight"),this.audioUrls[this.currentSvgIndex])){const t=new Audio(o(this.audioUrls[this.currentSvgIndex]));await t.play()}}}}updateStyles(){const t=window.innerHeight>window.innerWidth?"portrait":"landscape";this.style={height:f(this.height,t),width:f(this.width,t),top:f(this.y,t),left:f(this.x,t),zIndex:this.z}}render(){return w(g,{key:"3f7da73f3c075a90ea0ce27022ed06a60c814fb4",class:"lido-trace",id:this.id,audio:this.audio,onCorrect:this.onCorrect,onInCorrect:this.onInCorrect,style:this.style,"aria-label":this.ariaLabel,"aria-hidden":this.ariaHidden,tabindex:this.tabIndex,"disable-speak":this.disableSpeak},w("div",{key:"209d9faf31cf0ec234ee2fd34521eec8bbbf8ac4",style:this.style,id:"lido-svgContainer"}))}static get assetsDirs(){return["svg","images"]}get el(){return this}static get watchers(){return{svgSource:[{initializeSVG:0}],mode:[{initializeSVG:0}]}}static get style(){return":host{display:block;position:relative}#lido-svgContainer{display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;touch-action:none}#lido-draggableCircle{cursor:pointer;fill:#CF1565;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}"}},[0,"lido-trace",{showSpeakIcon:[4,"show-speak-icon"],id:[1],svgSource:[1,"svg-source"],value:[1],height:[1],width:[1],audio:[1],x:[1],y:[1],z:[1],ariaLabel:[1,"aria-label"],ariaHidden:[1,"aria-hidden"],tabIndex:[2,"tab-index"],mode:[1],fingerHintUrl:[1,"finger-hint-url"],onInCorrect:[1,"on-in-correct"],onCorrect:[1,"on-correct"],highlightTextId:[1,"highlight-text-id"],animationTrace:[4,"animation-trace"],delayVisible:[1,"delay-visible"],disableSpeak:[4,"disable-speak"],svgUrls:[32],audioUrls:[32],currentSvgIndex:[32],moving:[32],style:[32],fileIndex:[32],isDragging:[32],activePointerId:[32],freeTraceUpdateCounter:[32],idleTimer:[32],fingerImg:[32]},void 0,{svgSource:[{initializeSVG:0}],mode:[{initializeSVG:0}]}]);function p(){"undefined"!=typeof customElements&&["lido-trace"].forEach((i=>{"lido-trace"===i&&(customElements.get(t(i))||customElements.define(t(i),m))}))}p();export{m as L,p as d}
@@ -1 +1 @@
1
- import{t,p as o,H as a,F as e,G as i,I as r,J as n,K as s,A as l,M as d,O as p,P as c,Q as h,N as m,R as x,getAssetPath as u,U as f,L as b,h as g,T as w,f as k,V as y,S as v,W as j,j as X,n as B,X as C,b as E,c as z,Y as D}from"./index.js";import{d as O,i as A}from"./p-XacgbiAe.js";import{d as P}from"./p-q6x112RN.js";import{d as T}from"./p-1PmJa9_u.js";import{d as L}from"./p-BVaiv1nz.js";import{d as S}from"./p-DWnRy2OX.js";import{d as Y}from"./p-DFnbzZUc.js";import{d as F}from"./p-B97yn0-n.js";import{d as $}from"./p-BToRx4je.js";import{d as R}from"./p-CfdL3fZ9.js";import{d as I}from"./p-BLx2hZ8d.js";import{d as U}from"./p-BOTEFjDY.js";import{d as N}from"./p-5cqqnSZl.js";import{d as J}from"./p-Blfvc5ur.js";import{d as W}from"./p-Czy5pBTg.js";import{d as Z}from"./p-D4JZI_JB.js";import{d as _}from"./p-CusU-d3G.js";import{d as q}from"./p-DqskvXvD.js";import{d as H}from"./p-Dr5sh_El.js";import{d as M}from"./p-JtdpRTRi.js";import{d as K}from"./p-De6WHLEQ.js";const G=o(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.commonAudioPath="",this.showNav=!0,this.activeContainerIndexes=[],this.Lang="",this.xmlData="",this.initialIndex=0,this.canplay=!0,this.baseUrl="",this.height="",this.uuid=e(),this.currentContainerIndex=this.initialIndex,this.exitFlag=!1,this.containers=[],this.templateData=[],this.placeholderRegex=/\{([a-zA-Z0-9_]+)\}/g,this.NextContainerKey=t=>{var o,a;console.log("🚀 ~ LidoHome ~ NextContainerKey ~","ths uuid",this.uuid,"doc uuid",document.querySelector("lido-home").getAttribute("uuid"),"are both equal : ",this.uuid===(null===(o=document.querySelector("lido-home"))||void 0===o?void 0:o.getAttribute("uuid"))),this.uuid===(null===(a=document.querySelector("lido-home"))||void 0===a?void 0:a.getAttribute("uuid"))&&(null!=t&&t==this.currentContainerIndex||(null!=t&&t<this.containers.length?(this.currentContainerIndex=t,i(this.currentContainerIndex)):this.currentContainerIndex<this.containers.length-1?(this.currentContainerIndex++,i(this.currentContainerIndex)):this.currentContainerIndex>=this.containers.length-1&&(localStorage.removeItem(r),n(),this.currentContainerIndex=null),this.containers=[...this.containers],this.updateArrowVisibility()))},this.PrevContainerKey=t=>{console.log("👉 PrevContainerKey CALLED with index:",t),this.currentContainerIndex<=0||(this.currentContainerIndex--,i(this.currentContainerIndex),this.containers=[...this.containers],this.updateArrowVisibility())},this.showDotsandbtn=!1,this.updateArrowVisibility=()=>{this.showNav&&setTimeout((()=>{const t=this.el.querySelector("lido-container");if(!t)return;const o=t.getAttribute("show-prev-button"),a=t.getAttribute("show-next-button"),e=this.el.querySelector("#lido-arrow-right");this.el.querySelector("#lido-arrow-left").style.visibility="true"!==o?"hidden":"visible",e.style.visibility="true"!==a?"hidden":"visible"}),100)},this.btnpopupRunId=0,this.handleWindowTouch=()=>{this.cancelBtnpopupRun()},this.handleWindowPointer=t=>{"touch"===t.pointerType&&this.cancelBtnpopupRun()},this.popUpClick=t=>{const o=this.el.querySelector(".lido-alert-popup");this.exitFlag=!1,o&&("exit"===t?(s(),l.getI().stop(),localStorage.removeItem(r),o.remove(),this.currentContainerIndex=0):o.remove())}}onLangChange(t){this.setLanguage(t),this.containers=[...this.containers]}setLanguage(t){A.changeLanguage(t||A.language),this.containers=[...this.containers]}onCommonAudioPathChange(t){this.publishCommonAudioPath(t)}async componentWillLoad(){if(this.navBarIcons={exit:this.exitButtonUrl||h,prev:this.prevButtonUrl||c,next:this.nextButtonUrl||p,speak:this.speakerButtonUrl||d},0===this.currentContainerIndex&&localStorage.removeItem(r),window.addEventListener(m,(()=>{this.NextContainerKey()})),window.addEventListener(x,(()=>{this.PrevContainerKey()})),window.addEventListener("changeContainer",(t=>{this.NextContainerKey(t.detail.index)})),await this.loadTemplateData(),(this.xmlData||"").trim().includes("lido-container"))this.parseXMLData(this.xmlData);else{const t=await this.decompressBrotliBase64(this.xmlData);this.parseXMLData(t)}window.addEventListener("beforeunload",(()=>{l.getI().stop(),localStorage.removeItem(r)}))}async loadTemplateData(){if(!this.baseUrl)return;const t=[`${this.baseUrl.replace(/\/+$/,"")}/data.json`];for(const o of t)try{const t=o.startsWith("http")?o:u(o),a=await fetch(t);if(!a.ok)continue;const e=await a.json();if(Array.isArray(e)&&(this.templateData=e.filter((t=>t&&"object"==typeof t)),this.templateData.length))return}catch(t){console.warn(`[LidoHome] Failed to load template data from ${o}`,t)}}async decompressBrotliBase64(t){var o;for(t=(t||"").trim().replace(/^data:.*;base64,/,"").replace(/^['"]|['"]$/g,"").replace(/\\n/g,"").replace(/\s+/g,"").replace(/-/g,"+").replace(/_/g,"/");t.length%4;)t+="=";const a=atob(t),e=new Uint8Array(a.length);for(let t=0;t<a.length;t++)e[t]=a.charCodeAt(t);if("DecompressionStream"in window)try{const t=new window.DecompressionStream("br"),o=new Blob([e]).stream().pipeThrough(t),a=await new Response(o).arrayBuffer();return(new TextDecoder).decode(a)}catch(t){console.warn("[LidoRoot] Native Brotli unavailable, trying WASM fallback.",t)}try{const t=await import("./p-WP-EeUIB.js").then((function(t){return t.d})),a=t.BrotliDecompressBuffer||(null===(o=t.default)||void 0===o?void 0:o.BrotliDecompressBuffer);if("function"!=typeof a)throw new Error("BrotliDecompressBuffer function not found in brotli/dec/decode");const i=a(e);return(new TextDecoder).decode(i)}catch(t){throw new Error(`Brotli decompression failed (native + fallback): ${t instanceof Error?t.message:String(t)}`)}}componentDidLoad(){this.publishCommonAudioPath(this.commonAudioPath),setTimeout((()=>{this.showDotsandbtn=!0}),10),this.updateArrowVisibility(),this.scaleNavbarContainer(),this.handleIcons(),window.addEventListener("resize",(()=>{this.scaleNavbarContainer()})),window.addEventListener("touchstart",this.handleWindowTouch,{passive:!0}),window.addEventListener("pointerdown",this.handleWindowPointer,{passive:!0})}publishCommonAudioPath(t){if(!t)return;const o=t.replace(/\/+$/,"");window[f]=o,console.log("[LidoHome] Published common audio path:",o),window.dispatchEvent(new Event("lidoCommonAudioPathReady"))}async handleIcons(){var t;const o=async(t,o,a)=>t?z(t):o?z(o):null!=a&&a,a=document.getElementById(b),e=a.getAttribute("exit-button-url"),i=a.getAttribute("prev-button-url"),r=a.getAttribute("next-button-url"),n=null!==(t=a.getAttribute("speak-button-url"))&&void 0!==t?t:a.getAttribute("speaker-button-url");this.navBarIcons={exit:`${await o(this.exitButtonUrl,e,h)}`,prev:`${await o(this.prevButtonUrl,i,c)}`,next:`${await o(this.nextButtonUrl,r,p)}`,speak:`${await o(this.speakerButtonUrl,n,d)}`}}updateBackgroundImage(){const t=document.querySelector(b),o=t.getAttribute("bg-image");document.body.style.background="none",t.style.backgroundImage=o?`url(${o})`:"none",t.style.backgroundPosition=o?"bottom":"none",setTimeout((()=>{const o=document.querySelector(".lido-dot-container");o.classList.add("nav-for-lanai"),t.append(o)}),50)}disconnectedCallback(){window.removeEventListener(m,(()=>{this.NextContainerKey()})),window.removeEventListener("changeContainer",(t=>{this.NextContainerKey(t.detail.index)})),window.removeEventListener(x,(()=>{this.PrevContainerKey()})),window.removeEventListener("resize",(()=>{this.scaleNavbarContainer()})),window.removeEventListener("touchstart",this.handleWindowTouch),window.removeEventListener("pointerdown",this.handleWindowPointer)}parseXMLData(t){if(t){const o=(new DOMParser).parseFromString(t,"text/xml");this.parseContainers(o.documentElement)}}resolveContainerData(t){var o;return(null===(o=this.templateData)||void 0===o?void 0:o.length)?this.templateData[t]?this.templateData[t]:1===this.templateData.length?this.templateData[0]:null:null}replacePlaceholders(t,o){return o&&t?t.replace(this.placeholderRegex,((t,a)=>{const e=o[a];return null==e?`{${a}}`:String(e)})):t}applyDataToElement(t,o){return o?([t,...Array.from(t.querySelectorAll("*"))].forEach((t=>{Array.from(t.attributes).forEach((a=>{const e=a.value.replace(this.placeholderRegex,((t,a)=>{const e=o[a];return null==e?`{${a}}`:String(e)}));e!==a.value&&t.setAttribute(a.name,e)}))})),t):t}onXmlDataChange(t){this.parseXMLData(t)}parseElement(t){const o=t.nodeName.toLowerCase(),a={};Array.from(t.attributes).forEach((t=>{a[t.name]=t.value}));const e=Array.from(t.childNodes).map((t=>1===t.nodeType?this.parseElement(t):3===t.nodeType&&""!==t.textContent.trim()?t.textContent:null)).filter(Boolean);"lido-text"===o&&a.string&&(a.string=A.t(a.string)),"lido-text"===o&&a.string&&(a.string=A.t(a.string));const i={"lido-container":g("lido-container",Object.assign({},a,{canplay:this.canplay,baseUrl:this.baseUrl,height:this.height}),e),"lido-flash-card":g("lido-flash-card",Object.assign({},a),e),"lido-col":g("lido-col",Object.assign({},a),e),"lido-trace":g("lido-trace",Object.assign({},a),e),"lido-image":g("lido-image",Object.assign({},a),e),"lido-row":g("lido-row",Object.assign({},a),e),"lido-text":g("lido-text",Object.assign({},a),e),"lido-pos":g("lido-pos",Object.assign({},a),e),"lido-shape":g("lido-shape",Object.assign({},a),e),"lido-wrap":g("lido-wrap",Object.assign({},a),e),"lido-random":g("lido-random",Object.assign({},a),e),"lido-avatar":g("lido-avatar",Object.assign({},a),e),"lido-cell":g("lido-cell",Object.assign({},a),e),"lido-slide-fill":g("lido-slide-fill",Object.assign({},a),e),"lido-float":g("lido-float",Object.assign({},a),e),"lido-keyboard":g("lido-keyboard",Object.assign({},a),e),"lido-math-matrix":g("lido-math-matrix",Object.assign({},a),e),"lido-balance":g("lido-balance",Object.assign({},a),e),"lido-calculator":g("lido-calculator",Object.assign({},a),e),"lido-canvas":g("lido-canvas",Object.assign({},a),e)};return i[o]?i[o]:(console.warn(`Unknown tag: ${o}`),null)}parseContainers(t){const o=t.querySelectorAll("lido-container"),a=Array.from(o).map(((t,o)=>{if(this.activeContainerIndexes.length&&!this.activeContainerIndexes.includes(o))return;const a=this.resolveContainerData(o),e=this.applyDataToElement(t,a);return()=>this.parseElement(e)})).filter(Boolean);this.containers=a}areAllDropsFilled(){const t=Array.from(document.querySelectorAll('[type="drop"]')),o=Array.from(document.querySelectorAll('[type="drag"]')).filter((t=>t.getAttribute("drop-to")));return t.every((t=>{const a=t.id;return o.some((t=>t.getAttribute("drop-to")===a))}))}async btnpopup(t){var o,a;const e=()=>t!==this.btnpopupRunId,i=document.getElementById(b);if(console.log("game completed !"),e())return;if(!i||"true"===i.getAttribute("game-completed"))return;if(D(!1),await l.getI().stop(),e())return;const r=i.querySelectorAll("*"),n=i.getAttribute(w);if(n){const t=this.el.querySelector(`#${n}`);if(t&&(await k("this.speak='true';",t),e()))return}for(const t of Array.from(r)){if(y()||e())break;const o=t.getAttribute("tab-index"),a=t;if(o&&Number(o)>0){const t=t=>{const o=t.getBoundingClientRect();return o.width>0&&o.height>0&&o.bottom>0&&o.right>0&&o.top<window.innerHeight&&o.left<window.innerWidth};console.log("Element visibility",t(a));const o=null==a?void 0:a.getAttribute("type");if(a&&"true"!==a.getAttribute("disable-speak")&&((null==o?void 0:o.trim())&&t(a)||!o||!o.trim())&&await l.getI().play(a),y()||e()){await l.getI().stop();break}if(await new Promise((t=>setTimeout(t,300))),e())break}}if(!e())if(this.areAllDropsFilled()){const t=i.objective,e=null!==(a=JSON.parse(null!==(o=i.getAttribute(v))&&void 0!==o?o:"[]"))&&void 0!==a?a:[],r=j(t,e);console.log("Resultt",r),r&&X()}else"true"===i.getAttribute("game-completed")?X():console.log("Not yet filled ")}async cancelBtnpopupRun(){this.btnpopupRunId++,D(!0),await l.getI().stop()}async handleBtnpopupClick(){await this.cancelBtnpopupRun();const t=this.btnpopupRunId;D(!1),await this.btnpopup(t)}scaleNavbarContainer(){setTimeout((()=>{const t=document.querySelector(".lido-dot-container");t&&((1600===window.innerWidth&&900===window.innerHeight||900===window.innerWidth&&1600===window.innerHeight)&&document.querySelectorAll(".lido-exit-button, #main-audio").forEach((t=>{t.style.marginLeft="10px",t.style.marginRight="10px"})),t.style.top=window.innerWidth>window.innerHeight?"6%":"3.5%",t.style.transform="translate(-50%, -50%)",t.style.visibility="visible",Array.from(t.children).forEach((t=>{t.style.transform=`scale(${B()})`})),t.style.width=window.outerWidth+"px")}),500)}renderDots(){const t={pointerEvents:this.canplay?"none":""};return g("div",{id:"lido-dot-indicator",class:"lido-dot-container",style:{visibility:"hidden"}},g("div",{class:"lido-exit-button popup\r\n -button",onClick:()=>{this.exitFlag=!0,l.getI().stop()}},g("lido-image",{src:this.navBarIcons.exit})),g("div",{class:"lido-btn-dot-container"},g("div",{id:"lido-arrow-left",onClick:()=>{C()}},g("lido-image",{src:this.navBarIcons.prev})),this.containers.map(((o,a)=>g("div",{class:"parent_dots"},g("span",{class:"lido-dot "+(a<this.currentContainerIndex?"completed":a===this.currentContainerIndex?"current":""),onClick:()=>this.jumpToContainer(a),style:t})))),g("div",{id:"lido-arrow-right",onClick:t=>{console.log("Target:",t.target),console.log("Current Target:",t.currentTarget),console.log("✅ Button clicked - nextBtn action triggered"),k("this.nextBtn='true'",t.currentTarget)}},g("lido-image",{src:this.navBarIcons.next}))),g("div",{id:"main-audio",class:"popup-button",onClick:()=>this.handleBtnpopupClick()},g("lido-image",{visible:"true",src:this.navBarIcons.speak})))}jumpToContainer(t){this.NextContainerKey(t)}render(){var t,o;return console.log("🚀 ~ LidoHome ~ render ~ this.containers:",this),this.xmlData?g(E,{class:"lido-home",uuid:this.uuid,"template-id":"",index:this.currentContainerIndex,totalIndex:this.containers.length,style:{userSelect:"none"}},g("div",{key:this.currentContainerIndex},null===(o=(t=this.containers)[this.currentContainerIndex])||void 0===o?void 0:o.call(t)),this.renderDots(),this.exitFlag&&g("div",{class:"lido-alert-parent"},g("div",{class:"lido-alert-popup"},g("lido-cell",{class:"lido-alert-content",visible:"true",layout:"col",width:"340px",height:"210px","bg-color":"#fff","border-radius":"16px",onEntry:"this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';"},g("lido-text",{visible:"true",string:"Do you want to exit?",width:"294px",height:"38px",class:"popup-exit-text","font-size":"22px",onEntry:"this.margin-bottom =' -36px';"}),g("lido-cell",{visible:"true",layout:"row",width:"294px",class:"btn-cell"},g("lido-text",{visible:"true",string:"Exit",width:"92px",height:"53px","font-size":"16px",margin:"0px 50px 0px 0px",class:"popup-button",onClick:()=>this.popUpClick("exit"),borderRadius:"16px",onEntry:'this.color="#F34D08"; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";',fontFamily:"Baloo Bhai 2","font-weight":"700",bgColor:"white","border-radius":"16px"}),g("lido-text",{visible:"true",string:"Continue playing",width:"155px",height:"53px","font-size":"16px",class:"popup-button",onClick:()=>this.popUpClick("cancel"),borderRadius:"16px",onEntry:'this.color=white; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";',"font-family":"Baloo Bhai 2","font-weight":"700",bgColor:"#F34D08","border-radius":"16px"})))))):g("div",null,"Please provide XML data.")}get el(){return this}static get watchers(){return{Lang:[{onLangChange:0}],commonAudioPath:[{onCommonAudioPathChange:0}],xmlData:[{onXmlDataChange:0}]}}static get style(){return"@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;pointer-events:none;z-index:9999;background:linear-gradient( 180deg, rgba(255, 235, 59, 0.95), rgba(255, 214, 0, 0.95) );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:left 55ms linear, top 55ms linear, width 55ms ease-out, height 55ms ease-out, opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height}@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes placeToRight{from{}to{transform:translateX(2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}@keyframes glowPulse{0%{filter:drop-shadow(0 0 5px yellow) drop-shadow(0 0 10px yellow) drop-shadow(0 0 20px yellow) drop-shadow(0 0 30px orange)}50%{filter:drop-shadow(0 0 10px yellow) drop-shadow(0 0 20px yellow) drop-shadow(0 0 40px yellow) drop-shadow(0 0 50px orange)}100%{filter:drop-shadow(0 0 5px yellow) drop-shadow(0 0 10px yellow) drop-shadow(0 0 20px yellow) drop-shadow(0 0 30px orange)}}@keyframes trace-animation{0%{}100%{width:var(--trace-width, 100px);height:var(--trace-height, 100px)}}.lido-snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.lido-dot-container{display:flex;justify-content:space-between;align-items:center;visibility:hidden;position:absolute;left:50%;padding:0 5px;z-index:1;width:100vw;max-width:100vw;box-sizing:border-box;height:0px}.lido-dot{height:18px;width:18px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer;z-index:1}.lido-btn-dot-container{flex-shrink:1;flex-grow:1;display:flex;justify-content:center;align-items:center;text-align:center;z-index:1;min-width:0;height:0px}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}#lido-arrow-left,#lido-arrow-right{width:88px;height:88px;display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:1000;box-shadow:0px 8px 0px 0px #8b310f;background-color:#f34d08;cursor:pointer;visibility:hidden;flex-shrink:0}#lido-arrow-left:active,#lido-arrow-right:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px}.navbar{display:flex;justify-content:center}.lido-exit-button,#main-audio{width:80px;height:80px;z-index:1000;cursor:pointer;background-color:white;display:flex;align-items:center;justify-content:center;border:4px solid #f34d08;border-radius:16px;box-shadow:0px 8px #f34d08;flex-shrink:0;}#main-audio:active,.popup-button:active .lido-exit-button:active{margin-bottom:-8px;box-shadow:0px 0px 0px 0px !important}.lido-alert-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:1000}@media (max-width: 768px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0 8px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0 8px}.lido-dot{height:16px;width:16px;margin:0 2.5px}}@media (max-width: 480px){#lido-arrow-left,#lido-arrow-right{width:74px;height:74px;margin:0px 5px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0px 5px}.lido-dot{height:15px;width:15px;margin:0 1.5px}.lido-dot-container{padding:0 3px}}@media (max-width: 375px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 3px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 3px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 2px}}@media (max-width: 320px){#lido-arrow-left,#lido-arrow-right,.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 2px}.lido-dot{height:12px;width:12px;margin:0 0.5px}.lido-dot-container{padding:0 2px}}@media (max-width: 900px) and (orientation: landscape){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 5px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 5px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 5px}}.popup-exit-text{white-space:nowrap;font-size:22px;font-weight:600;margin-top:-8%}.lido-alert-parent{z-index:10000 !important;position:absolute;top:0;left:0}.popup-button{width:80px;height:80px;z-index:1000;cursor:pointer;display:flex;align-items:center;justify-content:center;border:4px solid #F34D08;border-radius:16px;box-shadow:0 8px 0 #F34D08}.nav-for-lanai{position:absolute;top:0%;left:0%;max-width:none;width:100%;height:auto;visibility:visible}"}},[0,"lido-home",{commonAudioPath:[1,"common-audio-path"],showNav:[4,"show-nav"],activeContainerIndexes:[16],Lang:[1,"lang"],xmlData:[1,"xml-data"],initialIndex:[2,"initial-index"],canplay:[4],baseUrl:[1,"base-url"],height:[1],exitButtonUrl:[1,"exit-button-url"],prevButtonUrl:[1,"prev-button-url"],nextButtonUrl:[1,"next-button-url"],speakerButtonUrl:[1,"speaker-button-url"],avatarUrl:[1,"avatar-url"],uuid:[1],navBarIcons:[32],currentContainerIndex:[32],exitFlag:[32],containers:[32],templateData:[32],showDotsandbtn:[32]},void 0,{Lang:[{onLangChange:0}],commonAudioPath:[{onCommonAudioPathChange:0}],xmlData:[{onXmlDataChange:0}]}]);function Q(){"undefined"!=typeof customElements&&["lido-home","lido-avatar","lido-balance","lido-calculator","lido-canvas","lido-cell","lido-col","lido-container","lido-flash-card","lido-float","lido-image","lido-keyboard","lido-math-matrix","lido-pos","lido-random","lido-row","lido-shape","lido-slide-fill","lido-text","lido-trace","lido-wrap"].forEach((o=>{switch(o){case"lido-home":customElements.get(t(o))||customElements.define(t(o),G);break;case"lido-avatar":customElements.get(t(o))||P();break;case"lido-balance":customElements.get(t(o))||T();break;case"lido-calculator":customElements.get(t(o))||L();break;case"lido-canvas":customElements.get(t(o))||S();break;case"lido-cell":customElements.get(t(o))||Y();break;case"lido-col":customElements.get(t(o))||F();break;case"lido-container":customElements.get(t(o))||$();break;case"lido-flash-card":customElements.get(t(o))||R();break;case"lido-float":customElements.get(t(o))||I();break;case"lido-image":customElements.get(t(o))||U();break;case"lido-keyboard":customElements.get(t(o))||N();break;case"lido-math-matrix":customElements.get(t(o))||J();break;case"lido-pos":customElements.get(t(o))||W();break;case"lido-random":customElements.get(t(o))||Z();break;case"lido-row":customElements.get(t(o))||_();break;case"lido-shape":customElements.get(t(o))||q();break;case"lido-slide-fill":customElements.get(t(o))||H();break;case"lido-text":customElements.get(t(o))||O();break;case"lido-trace":customElements.get(t(o))||M();break;case"lido-wrap":customElements.get(t(o))||K()}}))}Q();export{G as L,Q as d}
1
+ import{t,p as o,H as a,F as e,G as i,I as r,J as n,K as s,A as l,M as d,O as p,P as c,Q as h,N as m,R as x,getAssetPath as u,U as f,L as b,h as g,T as w,f as k,V as y,S as v,W as j,j as X,n as B,X as C,b as E,c as z,Y as D}from"./index.js";import{d as O,i as A}from"./p-XacgbiAe.js";import{d as L}from"./p-q6x112RN.js";import{d as P}from"./p-1PmJa9_u.js";import{d as S}from"./p-1qOeKb23.js";import{d as T}from"./p-DWnRy2OX.js";import{d as Y}from"./p-DFnbzZUc.js";import{d as F}from"./p-B97yn0-n.js";import{d as $}from"./p-BToRx4je.js";import{d as I}from"./p-CfdL3fZ9.js";import{d as U}from"./p-BLx2hZ8d.js";import{d as R}from"./p-BOTEFjDY.js";import{d as N}from"./p-5cqqnSZl.js";import{d as q}from"./p-Blfvc5ur.js";import{d as J}from"./p-Czy5pBTg.js";import{d as W}from"./p-D4JZI_JB.js";import{d as Z}from"./p-CusU-d3G.js";import{d as _}from"./p-DqskvXvD.js";import{d as H}from"./p-Dr5sh_El.js";import{d as M}from"./p-B4Jyt3YL.js";import{d as K}from"./p-De6WHLEQ.js";const G=o(class extends a{constructor(t){super(),!1!==t&&this.__registerHost(),this.commonAudioPath="",this.showNav=!0,this.activeContainerIndexes=[],this.Lang="",this.xmlData="",this.initialIndex=0,this.canplay=!0,this.baseUrl="",this.height="",this.uuid=e(),this.currentContainerIndex=this.initialIndex,this.exitFlag=!1,this.containers=[],this.templateData=[],this.placeholderRegex=/\{([a-zA-Z0-9_]+)\}/g,this.NextContainerKey=t=>{var o,a;console.log("🚀 ~ LidoHome ~ NextContainerKey ~","ths uuid",this.uuid,"doc uuid",document.querySelector("lido-home").getAttribute("uuid"),"are both equal : ",this.uuid===(null===(o=document.querySelector("lido-home"))||void 0===o?void 0:o.getAttribute("uuid"))),this.uuid===(null===(a=document.querySelector("lido-home"))||void 0===a?void 0:a.getAttribute("uuid"))&&(null!=t&&t==this.currentContainerIndex||(null!=t&&t<this.containers.length?(this.currentContainerIndex=t,i(this.currentContainerIndex)):this.currentContainerIndex<this.containers.length-1?(this.currentContainerIndex++,i(this.currentContainerIndex)):this.currentContainerIndex>=this.containers.length-1&&(localStorage.removeItem(r),n(),this.currentContainerIndex=null),this.containers=[...this.containers],this.updateArrowVisibility()))},this.PrevContainerKey=t=>{console.log("👉 PrevContainerKey CALLED with index:",t),this.currentContainerIndex<=0||(this.currentContainerIndex--,i(this.currentContainerIndex),this.containers=[...this.containers],this.updateArrowVisibility())},this.showDotsandbtn=!1,this.updateArrowVisibility=()=>{this.showNav&&setTimeout((()=>{const t=this.el.querySelector("lido-container");if(!t)return;const o=t.getAttribute("show-prev-button"),a=t.getAttribute("show-next-button"),e=this.el.querySelector("#lido-arrow-right");this.el.querySelector("#lido-arrow-left").style.visibility="true"!==o?"hidden":"visible",e.style.visibility="true"!==a?"hidden":"visible"}),100)},this.btnpopupRunId=0,this.handleWindowTouch=()=>{this.cancelBtnpopupRun()},this.handleWindowPointer=t=>{"touch"===t.pointerType&&this.cancelBtnpopupRun()},this.popUpClick=t=>{const o=this.el.querySelector(".lido-alert-popup");this.exitFlag=!1,o&&("exit"===t?(s(),l.getI().stop(),localStorage.removeItem(r),o.remove(),this.currentContainerIndex=0):o.remove())}}onLangChange(t){this.setLanguage(t),this.containers=[...this.containers]}setLanguage(t){A.changeLanguage(t||A.language),this.containers=[...this.containers]}onCommonAudioPathChange(t){this.publishCommonAudioPath(t)}async componentWillLoad(){if(this.navBarIcons={exit:this.exitButtonUrl||h,prev:this.prevButtonUrl||c,next:this.nextButtonUrl||p,speak:this.speakerButtonUrl||d},0===this.currentContainerIndex&&localStorage.removeItem(r),window.addEventListener(m,(()=>{this.NextContainerKey()})),window.addEventListener(x,(()=>{this.PrevContainerKey()})),window.addEventListener("changeContainer",(t=>{this.NextContainerKey(t.detail.index)})),await this.loadTemplateData(),(this.xmlData||"").trim().includes("lido-container"))this.parseXMLData(this.xmlData);else{const t=await this.decompressBrotliBase64(this.xmlData);this.parseXMLData(t)}window.addEventListener("beforeunload",(()=>{l.getI().stop(),localStorage.removeItem(r)}))}async loadTemplateData(){if(!this.baseUrl)return;const t=[`${this.baseUrl.replace(/\/+$/,"")}/data.json`];for(const o of t)try{const t=o.startsWith("http")?o:u(o),a=await fetch(t);if(!a.ok)continue;const e=await a.json();if(Array.isArray(e)&&(this.templateData=e.filter((t=>t&&"object"==typeof t)),this.templateData.length))return}catch(t){console.warn(`[LidoHome] Failed to load template data from ${o}`,t)}}async decompressBrotliBase64(t){var o;for(t=(t||"").trim().replace(/^data:.*;base64,/,"").replace(/^['"]|['"]$/g,"").replace(/\\n/g,"").replace(/\s+/g,"").replace(/-/g,"+").replace(/_/g,"/");t.length%4;)t+="=";const a=atob(t),e=new Uint8Array(a.length);for(let t=0;t<a.length;t++)e[t]=a.charCodeAt(t);if("DecompressionStream"in window)try{const t=new window.DecompressionStream("br"),o=new Blob([e]).stream().pipeThrough(t),a=await new Response(o).arrayBuffer();return(new TextDecoder).decode(a)}catch(t){console.warn("[LidoRoot] Native Brotli unavailable, trying WASM fallback.",t)}try{const t=await import("./p-WP-EeUIB.js").then((function(t){return t.d})),a=t.BrotliDecompressBuffer||(null===(o=t.default)||void 0===o?void 0:o.BrotliDecompressBuffer);if("function"!=typeof a)throw new Error("BrotliDecompressBuffer function not found in brotli/dec/decode");const i=a(e);return(new TextDecoder).decode(i)}catch(t){throw new Error(`Brotli decompression failed (native + fallback): ${t instanceof Error?t.message:String(t)}`)}}componentDidLoad(){this.publishCommonAudioPath(this.commonAudioPath),setTimeout((()=>{this.showDotsandbtn=!0}),10),this.updateArrowVisibility(),this.scaleNavbarContainer(),this.handleIcons(),window.addEventListener("resize",(()=>{this.scaleNavbarContainer()})),window.addEventListener("touchstart",this.handleWindowTouch,{passive:!0}),window.addEventListener("pointerdown",this.handleWindowPointer,{passive:!0})}publishCommonAudioPath(t){if(!t)return;const o=t.replace(/\/+$/,"");window[f]=o,console.log("[LidoHome] Published common audio path:",o),window.dispatchEvent(new Event("lidoCommonAudioPathReady"))}async handleIcons(){var t;const o=async(t,o,a)=>t?z(t):o?z(o):null!=a&&a,a=document.getElementById(b),e=a.getAttribute("exit-button-url"),i=a.getAttribute("prev-button-url"),r=a.getAttribute("next-button-url"),n=null!==(t=a.getAttribute("speak-button-url"))&&void 0!==t?t:a.getAttribute("speaker-button-url");this.navBarIcons={exit:`${await o(this.exitButtonUrl,e,h)}`,prev:`${await o(this.prevButtonUrl,i,c)}`,next:`${await o(this.nextButtonUrl,r,p)}`,speak:`${await o(this.speakerButtonUrl,n,d)}`}}updateBackgroundImage(){const t=document.querySelector(b),o=t.getAttribute("bg-image");document.body.style.background="none",t.style.backgroundImage=o?`url(${o})`:"none",t.style.backgroundPosition=o?"bottom":"none",setTimeout((()=>{const o=document.querySelector(".lido-dot-container");o.classList.add("nav-for-lanai"),t.append(o)}),50)}disconnectedCallback(){window.removeEventListener(m,(()=>{this.NextContainerKey()})),window.removeEventListener("changeContainer",(t=>{this.NextContainerKey(t.detail.index)})),window.removeEventListener(x,(()=>{this.PrevContainerKey()})),window.removeEventListener("resize",(()=>{this.scaleNavbarContainer()})),window.removeEventListener("touchstart",this.handleWindowTouch),window.removeEventListener("pointerdown",this.handleWindowPointer)}parseXMLData(t){if(t){const o=(new DOMParser).parseFromString(t,"text/xml");this.parseContainers(o.documentElement)}}resolveContainerData(t){var o;return(null===(o=this.templateData)||void 0===o?void 0:o.length)?this.templateData[t]?this.templateData[t]:1===this.templateData.length?this.templateData[0]:null:null}replacePlaceholders(t,o){return o&&t?t.replace(this.placeholderRegex,((t,a)=>{const e=o[a];return null==e?`{${a}}`:String(e)})):t}applyDataToElement(t,o){return o?([t,...Array.from(t.querySelectorAll("*"))].forEach((t=>{Array.from(t.attributes).forEach((a=>{const e=a.value.replace(this.placeholderRegex,((t,a)=>{const e=o[a];return null==e?`{${a}}`:String(e)}));e!==a.value&&t.setAttribute(a.name,e)}))})),t):t}onXmlDataChange(t){this.parseXMLData(t)}parseElement(t){const o=t.nodeName.toLowerCase(),a={};Array.from(t.attributes).forEach((t=>{a[t.name]=t.value}));const e=Array.from(t.childNodes).map((t=>1===t.nodeType?this.parseElement(t):3===t.nodeType&&""!==t.textContent.trim()?t.textContent:null)).filter(Boolean);"lido-text"===o&&a.string&&(a.string=A.t(a.string)),"lido-text"===o&&a.string&&(a.string=A.t(a.string));const i={"lido-container":g("lido-container",Object.assign({},a,{canplay:this.canplay,baseUrl:this.baseUrl,height:this.height}),e),"lido-flash-card":g("lido-flash-card",Object.assign({},a),e),"lido-col":g("lido-col",Object.assign({},a),e),"lido-trace":g("lido-trace",Object.assign({},a),e),"lido-image":g("lido-image",Object.assign({},a),e),"lido-row":g("lido-row",Object.assign({},a),e),"lido-text":g("lido-text",Object.assign({},a),e),"lido-pos":g("lido-pos",Object.assign({},a),e),"lido-shape":g("lido-shape",Object.assign({},a),e),"lido-wrap":g("lido-wrap",Object.assign({},a),e),"lido-random":g("lido-random",Object.assign({},a),e),"lido-avatar":g("lido-avatar",Object.assign({},a),e),"lido-cell":g("lido-cell",Object.assign({},a),e),"lido-slide-fill":g("lido-slide-fill",Object.assign({},a),e),"lido-float":g("lido-float",Object.assign({},a),e),"lido-keyboard":g("lido-keyboard",Object.assign({},a),e),"lido-math-matrix":g("lido-math-matrix",Object.assign({},a),e),"lido-balance":g("lido-balance",Object.assign({},a),e),"lido-calculator":g("lido-calculator",Object.assign({},a),e),"lido-canvas":g("lido-canvas",Object.assign({},a),e)};return i[o]?i[o]:(console.warn(`Unknown tag: ${o}`),null)}parseContainers(t){const o=t.querySelectorAll("lido-container"),a=Array.from(o).map(((t,o)=>{if(this.activeContainerIndexes.length&&!this.activeContainerIndexes.includes(o))return;const a=this.resolveContainerData(o),e=this.applyDataToElement(t,a);return()=>this.parseElement(e)})).filter(Boolean);this.containers=a}areAllDropsFilled(){const t=Array.from(document.querySelectorAll('[type="drop"]')),o=Array.from(document.querySelectorAll('[type="drag"]')).filter((t=>t.getAttribute("drop-to")));return t.every((t=>{const a=t.id;return o.some((t=>t.getAttribute("drop-to")===a))}))}async btnpopup(t){var o,a;const e=()=>t!==this.btnpopupRunId,i=document.getElementById(b);if(console.log("game completed !"),e())return;if(!i||"true"===i.getAttribute("game-completed"))return;if(D(!1),await l.getI().stop(),e())return;const r=i.querySelectorAll("*"),n=i.getAttribute(w);if(n){const t=this.el.querySelector(`#${n}`);if(t&&(await k("this.speak='true';",t),e()))return}for(const t of Array.from(r)){if(y()||e())break;const o=t.getAttribute("tab-index"),a=t;if(o&&Number(o)>0){const t=t=>{const o=t.getBoundingClientRect();return o.width>0&&o.height>0&&o.bottom>0&&o.right>0&&o.top<window.innerHeight&&o.left<window.innerWidth};console.log("Element visibility",t(a));const o=null==a?void 0:a.getAttribute("type");if(a&&"true"!==a.getAttribute("disable-speak")&&((null==o?void 0:o.trim())&&t(a)||!o||!o.trim())&&await l.getI().play(a),y()||e()){await l.getI().stop();break}if(await new Promise((t=>setTimeout(t,300))),e())break}}if(!e())if(this.areAllDropsFilled()){const t=i.objective,e=null!==(a=JSON.parse(null!==(o=i.getAttribute(v))&&void 0!==o?o:"[]"))&&void 0!==a?a:[],r=j(t,e);console.log("Resultt",r),r&&X()}else"true"===i.getAttribute("game-completed")?X():console.log("Not yet filled ")}async cancelBtnpopupRun(){this.btnpopupRunId++,D(!0),await l.getI().stop()}async handleBtnpopupClick(){await this.cancelBtnpopupRun();const t=this.btnpopupRunId;D(!1),await this.btnpopup(t)}scaleNavbarContainer(){setTimeout((()=>{const t=document.querySelector(".lido-dot-container");t&&((1600===window.innerWidth&&900===window.innerHeight||900===window.innerWidth&&1600===window.innerHeight)&&document.querySelectorAll(".lido-exit-button, #main-audio").forEach((t=>{t.style.marginLeft="10px",t.style.marginRight="10px"})),t.style.top=window.innerWidth>window.innerHeight?"6%":"3.5%",t.style.transform="translate(-50%, -50%)",t.style.visibility="visible",Array.from(t.children).forEach((t=>{t.style.transform=`scale(${B()})`})),t.style.width=window.outerWidth+"px")}),500)}renderDots(){const t={pointerEvents:this.canplay?"none":""};return g("div",{id:"lido-dot-indicator",class:"lido-dot-container",style:{visibility:"hidden"}},g("div",{class:"lido-exit-button popup\r\n -button",onClick:()=>{this.exitFlag=!0,l.getI().stop()}},g("lido-image",{src:this.navBarIcons.exit})),g("div",{class:"lido-btn-dot-container"},g("div",{id:"lido-arrow-left",onClick:()=>{C()}},g("lido-image",{src:this.navBarIcons.prev})),this.containers.map(((o,a)=>g("div",{class:"parent_dots"},g("span",{class:"lido-dot "+(a<this.currentContainerIndex?"completed":a===this.currentContainerIndex?"current":""),onClick:()=>this.jumpToContainer(a),style:t})))),g("div",{id:"lido-arrow-right",onClick:t=>{console.log("Target:",t.target),console.log("Current Target:",t.currentTarget),console.log("✅ Button clicked - nextBtn action triggered"),k("this.nextBtn='true'",t.currentTarget)}},g("lido-image",{src:this.navBarIcons.next}))),g("div",{id:"main-audio",class:"popup-button",onClick:()=>this.handleBtnpopupClick()},g("lido-image",{visible:"true",src:this.navBarIcons.speak})))}jumpToContainer(t){this.NextContainerKey(t)}render(){var t,o;return console.log("🚀 ~ LidoHome ~ render ~ this.containers:",this),this.xmlData?g(E,{class:"lido-home",uuid:this.uuid,"template-id":"",index:this.currentContainerIndex,totalIndex:this.containers.length,style:{userSelect:"none"}},g("div",{key:this.currentContainerIndex},null===(o=(t=this.containers)[this.currentContainerIndex])||void 0===o?void 0:o.call(t)),this.renderDots(),this.exitFlag&&g("div",{class:"lido-alert-parent"},g("div",{class:"lido-alert-popup"},g("lido-cell",{class:"lido-alert-content",visible:"true",layout:"col",width:"340px",height:"210px","bg-color":"#fff","border-radius":"16px",onEntry:"this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';"},g("lido-text",{visible:"true",string:"Do you want to exit?",width:"294px",height:"38px",class:"popup-exit-text","font-size":"22px",onEntry:"this.margin-bottom =' -36px';"}),g("lido-cell",{visible:"true",layout:"row",width:"294px",class:"btn-cell"},g("lido-text",{visible:"true",string:"Exit",width:"92px",height:"53px","font-size":"16px",margin:"0px 50px 0px 0px",class:"popup-button",onClick:()=>this.popUpClick("exit"),borderRadius:"16px",onEntry:'this.color="#F34D08"; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";',fontFamily:"Baloo Bhai 2","font-weight":"700",bgColor:"white","border-radius":"16px"}),g("lido-text",{visible:"true",string:"Continue playing",width:"155px",height:"53px","font-size":"16px",class:"popup-button",onClick:()=>this.popUpClick("cancel"),borderRadius:"16px",onEntry:'this.color=white; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";',"font-family":"Baloo Bhai 2","font-weight":"700",bgColor:"#F34D08","border-radius":"16px"})))))):g("div",null,"Please provide XML data.")}get el(){return this}static get watchers(){return{Lang:[{onLangChange:0}],commonAudioPath:[{onCommonAudioPathChange:0}],xmlData:[{onXmlDataChange:0}]}}static get style(){return"@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+Bhai+2:wght@400..800&display=swap'); body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-image:url(\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/template/audioIcon.png\");background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;pointer-events:none;z-index:9999;background:linear-gradient( 180deg, rgba(255, 235, 59, 0.95), rgba(255, 214, 0, 0.95) );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:left 55ms linear, top 55ms linear, width 55ms ease-out, height 55ms ease-out, opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height}@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes placeToRight{from{}to{transform:translateX(2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}@keyframes glowPulse{0%{filter:drop-shadow(0 0 5px yellow) drop-shadow(0 0 10px yellow) drop-shadow(0 0 20px yellow) drop-shadow(0 0 30px orange)}50%{filter:drop-shadow(0 0 10px yellow) drop-shadow(0 0 20px yellow) drop-shadow(0 0 40px yellow) drop-shadow(0 0 50px orange)}100%{filter:drop-shadow(0 0 5px yellow) drop-shadow(0 0 10px yellow) drop-shadow(0 0 20px yellow) drop-shadow(0 0 30px orange)}}@keyframes trace-animation{0%{}100%{width:var(--trace-width, 100px);height:var(--trace-height, 100px)}}.lido-snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.lido-dot-container{display:flex;justify-content:space-between;align-items:center;visibility:hidden;position:absolute;left:50%;padding:0 5px;z-index:1;width:100vw;max-width:100vw;box-sizing:border-box;height:0px}.lido-dot{height:18px;width:18px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer;z-index:1}.lido-btn-dot-container{flex-shrink:1;flex-grow:1;display:flex;justify-content:center;align-items:center;text-align:center;z-index:1;min-width:0;height:0px}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}#lido-arrow-left,#lido-arrow-right{width:88px;height:88px;display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:1000;box-shadow:0px 8px 0px 0px #8b310f;background-color:#f34d08;cursor:pointer;visibility:hidden;flex-shrink:0}#lido-arrow-left:active,#lido-arrow-right:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px}.navbar{display:flex;justify-content:center}.lido-exit-button,#main-audio{width:80px;height:80px;z-index:1000;cursor:pointer;background-color:white;display:flex;align-items:center;justify-content:center;border:4px solid #f34d08;border-radius:16px;box-shadow:0px 8px #f34d08;flex-shrink:0;}#main-audio:active,.popup-button:active .lido-exit-button:active{margin-bottom:-8px;box-shadow:0px 0px 0px 0px !important}.lido-alert-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:1000}@media (max-width: 768px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0 8px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0 8px}.lido-dot{height:16px;width:16px;margin:0 2.5px}}@media (max-width: 480px){#lido-arrow-left,#lido-arrow-right{width:74px;height:74px;margin:0px 5px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0px 5px}.lido-dot{height:15px;width:15px;margin:0 1.5px}.lido-dot-container{padding:0 3px}}@media (max-width: 375px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 3px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 3px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 2px}}@media (max-width: 320px){#lido-arrow-left,#lido-arrow-right,.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 2px}.lido-dot{height:12px;width:12px;margin:0 0.5px}.lido-dot-container{padding:0 2px}}@media (max-width: 900px) and (orientation: landscape){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 5px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 5px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 5px}}.popup-exit-text{white-space:nowrap;font-size:22px;font-weight:600;margin-top:-8%}.lido-alert-parent{z-index:10000 !important;position:absolute;top:0;left:0}.popup-button{width:80px;height:80px;z-index:1000;cursor:pointer;display:flex;align-items:center;justify-content:center;border:4px solid #F34D08;border-radius:16px;box-shadow:0 8px 0 #F34D08}.nav-for-lanai{position:absolute;top:0%;left:0%;max-width:none;width:100%;height:auto;visibility:visible}"}},[0,"lido-home",{commonAudioPath:[1,"common-audio-path"],showNav:[4,"show-nav"],activeContainerIndexes:[16],Lang:[1,"lang"],xmlData:[1,"xml-data"],initialIndex:[2,"initial-index"],canplay:[4],baseUrl:[1,"base-url"],height:[1],exitButtonUrl:[1,"exit-button-url"],prevButtonUrl:[1,"prev-button-url"],nextButtonUrl:[1,"next-button-url"],speakerButtonUrl:[1,"speaker-button-url"],avatarUrl:[1,"avatar-url"],uuid:[1],navBarIcons:[32],currentContainerIndex:[32],exitFlag:[32],containers:[32],templateData:[32],showDotsandbtn:[32]},void 0,{Lang:[{onLangChange:0}],commonAudioPath:[{onCommonAudioPathChange:0}],xmlData:[{onXmlDataChange:0}]}]);function Q(){"undefined"!=typeof customElements&&["lido-home","lido-avatar","lido-balance","lido-calculator","lido-canvas","lido-cell","lido-col","lido-container","lido-flash-card","lido-float","lido-image","lido-keyboard","lido-math-matrix","lido-pos","lido-random","lido-row","lido-shape","lido-slide-fill","lido-text","lido-trace","lido-wrap"].forEach((o=>{switch(o){case"lido-home":customElements.get(t(o))||customElements.define(t(o),G);break;case"lido-avatar":customElements.get(t(o))||L();break;case"lido-balance":customElements.get(t(o))||P();break;case"lido-calculator":customElements.get(t(o))||S();break;case"lido-canvas":customElements.get(t(o))||T();break;case"lido-cell":customElements.get(t(o))||Y();break;case"lido-col":customElements.get(t(o))||F();break;case"lido-container":customElements.get(t(o))||$();break;case"lido-flash-card":customElements.get(t(o))||I();break;case"lido-float":customElements.get(t(o))||U();break;case"lido-image":customElements.get(t(o))||R();break;case"lido-keyboard":customElements.get(t(o))||N();break;case"lido-math-matrix":customElements.get(t(o))||q();break;case"lido-pos":customElements.get(t(o))||J();break;case"lido-random":customElements.get(t(o))||W();break;case"lido-row":customElements.get(t(o))||Z();break;case"lido-shape":customElements.get(t(o))||_();break;case"lido-slide-fill":customElements.get(t(o))||H();break;case"lido-text":customElements.get(t(o))||O();break;case"lido-trace":customElements.get(t(o))||M();break;case"lido-wrap":customElements.get(t(o))||K()}}))}Q();export{G as L,Q as d}
@@ -8565,8 +8565,9 @@ const LidoCalculator = class {
8565
8565
  else {
8566
8566
  await executeActions(onInCorrect, container);
8567
8567
  }
8568
- calculateScore();
8569
8568
  if (!isContinueOnCorrect) {
8569
+ container.setAttribute("game-completed", "true");
8570
+ calculateScore();
8570
8571
  triggerNextContainer();
8571
8572
  }
8572
8573
  }
@@ -8574,7 +8575,7 @@ const LidoCalculator = class {
8574
8575
  }
8575
8576
  render() {
8576
8577
  const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
8577
- return (h(Host, { key: 'f74605bdd05ece961c175ff64aba213961797587', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: 'df158e5e1a545a3d763e3e5a8bf07861b826aad0', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'c6afe2c1e7970b2d6f5a6d63a6cc8f2ceb403f74', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '60e8e03c6d344c6b8be3c2a7417fb4ed55a2af9e', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: 'cf53e61f86acc8dce793ee1b09d880ee6fe8e35e', class: "lido-calculator-displayParent" }, h("div", { key: '0522a16f1ff07e3e42078eab83f58b4a0e9a6fbf', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: 'c0145ed065199cc68ed136ebc3077a2857da7b2b', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
8578
+ return (h(Host, { key: '561785bf36e862832ec1f8550684f5c15ecc1166', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '21789df12ab18c3bdba7b68ce2943c2d6bd83e45', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'bb3018fac89a5a96f5949457c30dd2c199c72ea8', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '2d4fee4142ed51970cddc623ae1635e80808062b', src: convertUrlToRelative(this.penIcon), alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '25b755eeeaaeec450aabae4867ad5f14dcf77202', class: "lido-calculator-displayParent" }, h("div", { key: '51f310c071edbb264f2f3636118721449651f8f2', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: 'd7489f877e4fbbd27afaf143666fc241f4df3427', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
8578
8579
  'lido-calculator-btn-special': num === '←' || num === 'OK',
8579
8580
  'lido-calculator-btn-default': num !== '←' && num !== 'OK'
8580
8581
  }, onClick: () => this.handleClick(num) }))))));
@@ -18574,9 +18575,6 @@ const LidoTrace = class {
18574
18575
  await this.playTraceAnimation();
18575
18576
  }
18576
18577
  storingEachActivityScore(true);
18577
- if (this.el && this.onCorrect) {
18578
- await executeActions(this.onCorrect, this.el);
18579
- }
18580
18578
  console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
18581
18579
  const delay = 1000; // milliseconds
18582
18580
  if (this.currentSvgIndex < this.svgUrls.length - 1) {
@@ -18586,10 +18584,19 @@ const LidoTrace = class {
18586
18584
  const svgContainer = document.getElementById('lido-svgContainer');
18587
18585
  svgContainer.style.visibility = 'visible';
18588
18586
  this.moving = false;
18587
+ if (this.el && this.onCorrect) {
18588
+ await executeActions(this.onCorrect, this.el);
18589
+ }
18589
18590
  return;
18590
18591
  }
18591
18592
  calculateScore();
18592
18593
  console.log('All SVGs completed, hiding component.');
18594
+ const container = document.querySelector(LidoContainer$1);
18595
+ const containerOnCorrect = container.getAttribute("onCorrect");
18596
+ if (container && containerOnCorrect) {
18597
+ await new Promise(resolve => setTimeout(resolve, delay));
18598
+ await executeActions(containerOnCorrect, this.el);
18599
+ }
18593
18600
  triggerNextContainer();
18594
18601
  }
18595
18602
  // Get the pointer position relative to the SVG
@@ -18800,7 +18807,7 @@ const LidoTrace = class {
18800
18807
  };
18801
18808
  }
18802
18809
  render() {
18803
- return (h(Host, { key: '253a2c8840d47f1758eb2e025de799921ba7e972', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '182018457f29150918f52ef92bc0fc4fc70bb463', style: this.style, id: "lido-svgContainer" })));
18810
+ return (h(Host, { key: '3f7da73f3c075a90ea0ce27022ed06a60c814fb4', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '209d9faf31cf0ec234ee2fd34521eec8bbbf8ac4', style: this.style, id: "lido-svgContainer" })));
18804
18811
  }
18805
18812
  static get assetsDirs() { return ["svg", "images"]; }
18806
18813
  get el() { return getElement(this); }