lido-player 0.0.2-alpha-50-dev → 0.0.2-alpha-52-dev

package/dist/components/p-5b5f59a8.js

@@ -0,0 +1,129 @@
+import { p as proxyCustomElement, H, k as parseProp, h, j as Host } from './p-58c67252.js';
+import { d as defineCustomElement$1 } from './p-39a2e638.js';
+
+const lidoCanvasCss = ":host{display:flex;justify-content:center;align-items:center}.lido-canvas{background:red;border:2px solid #ccc;border-radius:8px;display:flex;flex-direction:column;overflow:hidden;position:relative}#lido-exit-button{padding:6px 14px;border:none;background:transparent;color:#fff;border-radius:6px;cursor:pointer;font-size:14px;position:relative;top:-43%;left:18%;z-index:10}canvas{touch-action:none;display:block}";
+const LidoCanvasStyle0 = lidoCanvasCss;
+
+const LidoCanvas = /*@__PURE__*/ proxyCustomElement(class LidoCanvas extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        // Flag to track drawing state
+        this.drawing = false;
+        this.bgImage = undefined;
+        this.width = '800px';
+        this.height = '700px';
+        this.x = '0px';
+        this.y = '0px';
+        this.onEntry = '';
+        this.style = {};
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            width: parseProp(this.width, orientation),
+            height: parseProp(this.height, orientation),
+            left: parseProp(this.x, orientation),
+            top: parseProp(this.y, orientation),
+            position: 'absolute',
+        };
+        if (this.canvas) {
+            this.canvas.width = parseInt(parseProp(this.width, orientation));
+            this.canvas.height = parseInt(parseProp(this.height, orientation));
+            this.ctx.strokeStyle = '#000';
+            this.ctx.lineWidth = 10;
+            this.ctx.lineCap = 'round';
+            this.ctx.lineJoin = 'round';
+            this.loadBackground();
+        }
+    }
+    componentDidLoad() {
+        this.canvas = this.el.shadowRoot.querySelector('#lido-canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.ctx.strokeStyle = '#000';
+        this.ctx.lineWidth = 10;
+        this.ctx.lineCap = 'round';
+        this.ctx.lineJoin = 'round';
+        this.updateStyles();
+        this.loadBackground();
+        this.canvas.addEventListener('pointerdown', e => this.start(e));
+        this.canvas.addEventListener('pointermove', e => this.move(e));
+        window.addEventListener('pointerup', () => this.stop());
+        window.addEventListener('resize', () => this.updateStyles());
+    }
+    loadBackground() {
+        if (!this.bgImage) {
+            this.ctx.fillStyle = '#fff';
+            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+            return;
+        }
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.src = this.bgImage;
+        img.onload = () => {
+            this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height);
+        };
+    }
+    getPos(e) {
+        const r = this.canvas.getBoundingClientRect();
+        return {
+            x: (e.clientX - r.left) * (this.canvas.width / r.width),
+            y: (e.clientY - r.top) * (this.canvas.height / r.height),
+        };
+    }
+    start(e) {
+        this.drawing = true;
+        const pos = this.getPos(e);
+        this.ctx.beginPath();
+        this.ctx.moveTo(pos.x, pos.y);
+    }
+    move(e) {
+        if (!this.drawing)
+            return;
+        const pos = this.getPos(e);
+        this.ctx.lineTo(pos.x, pos.y);
+        this.ctx.stroke();
+    }
+    stop() {
+        this.drawing = false;
+        this.ctx.closePath();
+    }
+    clearCanvas() {
+        this.loadBackground();
+    }
+    render() {
+        return (h(Host, { key: '6768ff870d132528267f2e824fdc6edf5a5fa2be', id: "lido-canvas", class: "lido-canvas", style: this.style }, h("button", { key: 'ba3d5456edfa4618b6c3f57b97fa18cef45f7ae9', id: "lido-exit-button", onClick: () => this.clearCanvas() }, h("lido-text", { key: '3484c9005819e3d08adf8d36b247d3c45610d0b5', visible: "true", height: "92px", width: "43px", id: "lido-exit-icon", "font-color": "white", onEntry: "this.font-weight='900';", "font-size": "96px", string: 'X' })), h("canvas", { key: 'cd4167cefde8d4cf159779c46283cafbc3b0afcc', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
+    }
+    get el() { return this; }
+    static get style() { return LidoCanvasStyle0; }
+}, [1, "lido-canvas", {
+        "bgImage": [1, "bg-image"],
+        "width": [1],
+        "height": [1],
+        "x": [1],
+        "y": [1],
+        "onEntry": [1, "on-entry"],
+        "style": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["lido-canvas", "lido-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "lido-canvas":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LidoCanvas);
+            }
+            break;
+        case "lido-text":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LidoCanvas as L, defineCustomElement as d };

package/dist/components/{p-52844fa4.js → p-68112f8c.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, e as convertUrlToRelative, k as parseProp, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, e as convertUrlToRelative, k as parseProp, h, j as Host } from './p-58c67252.js';
 
 const lidoColCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}";
 const LidoColStyle0 = lidoColCss;
@@ -80,7 +80,7 @@ const LidoCol = /*@__PURE__*/ proxyCustomElement(class LidoCol extends H {
         };
     }
     render() {
-        return (h(Host, { key: '1cf21bb1e817c9078213312aa7165423eaf54ea7', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'c3bc168ccccacf1425b5d93853bc27ab2962436f' })));
+        return (h(Host, { key: '7845d3364dd13cb42959f67610254ee892119c39', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '09a68a30534c5ea83d7166acd720b4b8f23f494e' })));
     }
     get el() { return this; }
     static get style() { return LidoColStyle0; }

package/dist/components/{p-15971ede.js → p-8a34b98b.js}

@@ -1,4 +1,4 @@
-import { c as commonjsGlobal, K as getDefaultExportFromCjs, p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, M as tinyColor, r as attachSpeakIcon, k as parseProp, e as convertUrlToRelative, h, j as Host } from './p-bed94c37.js';
+import { c as commonjsGlobal, K as getDefaultExportFromCjs, p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, M as tinyColor, r as attachSpeakIcon, k as parseProp, e as convertUrlToRelative, h, j as Host } from './p-58c67252.js';
 
 var lib = {exports: {}};
 

package/dist/components/{p-904711c8.js → p-8f2ed62f.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-58c67252.js';
 
 const lidoShapeCss = ".lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z)}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}";
 const LidoShapeStyle0 = lidoShapeCss;
@@ -52,7 +52,7 @@ const LidoShape = /*@__PURE__*/ proxyCustomElement(class LidoShape extends H {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: '6712d974e85c5d82dabb5ed0d482ece4b18af16a', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }));
+        return (h(Host, { key: '7a626d9f00854cf190c08524153086d0e9f139af', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "disable-speak": this.disableSpeak }));
     }
     get el() { return this; }
     static get style() { return LidoShapeStyle0; }

package/dist/components/{p-74849cdd.js → p-9d34d59d.js}

@@ -1,5 +1,5 @@
-import { p as proxyCustomElement, H, S as SelectedValuesKey, L as LidoContainer, o as executeActions, O as triggerNextContainer, u as handleFloatElementPosition, n as storingEachActivityScore, Q as DropAction, k as parseProp, h, j as Host } from './p-bed94c37.js';
-import { d as defineCustomElement$1 } from './p-afbc196f.js';
+import { p as proxyCustomElement, H, S as SelectedValuesKey, L as LidoContainer, o as executeActions, O as triggerNextContainer, u as handleFloatElementPosition, n as storingEachActivityScore, Q as DropAction, k as parseProp, h, j as Host } from './p-58c67252.js';
+import { d as defineCustomElement$1 } from './p-39a2e638.js';
 
 const lidoKeyboardCss = ".lido-keyboard{display:flex;flex-direction:column;align-items:center;gap:30px}.input-area{display:flex;gap:15px}input[type=\"text\"]{font-size:30px;font-weight:600;padding-left:20px;width:300px;height:70px;border:2px solid;background:whitesmoke;border-radius:20px;text-align:center}.keyboard-wrapper{justify-content:center;width:700px}.disabled{opacity:0.5;pointer-events:none}.key-button{background:aquamarine;font-weight:600}";
 const LidoKeyboardStyle0 = lidoKeyboardCss;
@@ -118,10 +118,10 @@ const LidoKeyboard = /*@__PURE__*/ proxyCustomElement(class LidoKeyboard extends
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (h(Host, { key: 'e4cd1fc51d8d3c87ed011120f13454bbef1883b3', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '114224c18345951e749db6f1eba242cc1179431f', class: "input-area" }, h("input", { key: '14741df7dc29f51420c1164ddebf60fd464fade4', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '3bb801fbcab03b58a628c4c365f46113e9829fdc', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (h(Host, { key: '030937c20c1e5652a528e9f5e3335faafe18fff1', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '4c928db14ba00f8aa20dcdb9e220f0486949e861', class: "input-area" }, h("input", { key: 'f8db5e6f76aba08fb5893fd3fff7e6739dd5f854', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: '58156eabbdd1fe9d06fa0ff3e192ab0f434fcd9e', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
                 this.inputString = this.inputString.slice(0, -1);
                 this.inputValidation(event);
-            } }), h("lido-text", { key: '46212bcfe4e5c22744d13d8235d82bdb73bce802', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: 'a886ac1d7ceadda37eadd4bed59bd5096d46619f', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: '5238d1dc1bafda2ffab63932d1f5d29ef449bf4b', class: "keyboard-wrapper", style: {
+            } }), h("lido-text", { key: '79538fe14d2645dc7ae62f4e24da2300a680b1cc', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (h("lido-text", { key: '0d09084f44fe8a69e19006daccd1029e291b43e5', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), h("div", { key: '9b2686af38ffed8e792f93f8302f01d59dbd2748', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',

package/dist/components/{p-73e31a86.js → p-a2f96840.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, U as fraction, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, U as fraction, h, j as Host } from './p-58c67252.js';
 
 const lidoSlideFillCss = ".svg-element,svg{width:100%;height:100%}";
 const LidoSlideFillStyle0 = lidoSlideFillCss;
@@ -63,13 +63,13 @@ const LidoSlideFill = /*@__PURE__*/ proxyCustomElement(class LidoSlideFill exten
                 const id = pathIndex === 1 ? 'glassPath' : pathIndex === 2 ? 'rulerPath' : `path${pathIndex}`;
                 return `<path id="${id}"${attrs}>`;
             });
-            const clipPathDef = `
-        <clipPath id="clipGlass">
-          <use xlink:href="#glassPath" />
-        </clipPath>
+            const clipPathDef = `
+        <clipPath id="clipGlass">
+          <use xlink:href="#glassPath" />
+        </clipPath>
       `;
-            svgText = svgText.replace(/<svg([^>]*)>/, `<svg$1>
-          ${clipPathDef}
+            svgText = svgText.replace(/<svg([^>]*)>/, `<svg$1>
+          ${clipPathDef}
         `);
             svgText = svgText.replace(/<rect([^>]*)\/?>/, `<rect id="fillArea" $1 clip-path="url(#clipGlass)" />`);
             this.svgContent = svgText;
@@ -194,7 +194,7 @@ const LidoSlideFill = /*@__PURE__*/ proxyCustomElement(class LidoSlideFill exten
         }
     }
     render() {
-        return (h(Host, { key: '57ee54a6a0e7d3bbac893ce535a3375ea529e75a', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '386330e0562851f2f00aba169018c23bf5ffa4b7', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: '3918ed476b3de4977c53ff0bf576253f68e8c84f', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '8f54b0e5de490a162aaa1d7ac9ed485d1628c484', innerHTML: this.svgContent, class: "svg-element" })));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/{p-90465904.js → p-a516a324.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, V as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, W as speakIcon, o as executeActions, O as triggerNextContainer, L as LidoContainer, k as parseProp, h, j as Host, X as fingerUrl } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, V as TraceMode, e as convertUrlToRelative, d as setVisibilityWithDelay, W as speakIcon, o as executeActions, O as triggerNextContainer, L as LidoContainer, k as parseProp, h, j as Host, X as fingerUrl } from './p-58c67252.js';
 
 const lidoTraceCss = ":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)}}";
 const LidoTraceStyle0 = lidoTraceCss;
@@ -715,7 +715,7 @@ const LidoTrace = /*@__PURE__*/ proxyCustomElement(class LidoTrace extends H {
         };
     }
     render() {
-        return (h(Host, { key: '6be6d97477a80afc0275eef5b17718a5f43ce358', 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: '4e650d7142c61549aec021fd2a8da4e592eaf94e', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '204d2999e3d6f0c36c991566e19608870e287d7a', 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: '9c97878119641e2efc26fa7d711c7639276417ac', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return this; }

package/dist/components/{p-322acda6.js → p-b2125fc9.js}

@@ -1,28 +1,30 @@
-import { p as proxyCustomElement, H, w as dispatchActivityChangeEvent, A as ActivityScoreKey, x as dispatchGameCompletedEvent, y as dispatchGameExitEvent, z as AudioPlayer, B as generateUUIDFallback, C as exitUrl, D as prevUrl, E as nextUrl, F as speakUrl, N as NextContainerKey, P as PrevContainerKey, L as LidoContainer, h, G as getCancelBtnPopup, t as calculateScale, I as triggerPrevcontainer, o as executeActions, j as Host, e as convertUrlToRelative, J as setCancelBtnPopup } from './p-bed94c37.js';
-import { d as defineCustomElement$j } from './p-cbac3cbc.js';
-import { d as defineCustomElement$i } from './p-44808985.js';
-import { d as defineCustomElement$h } from './p-e36ddcc1.js';
-import { d as defineCustomElement$g } from './p-29bdd953.js';
-import { d as defineCustomElement$f } from './p-52844fa4.js';
-import { d as defineCustomElement$e } from './p-9be56729.js';
-import { d as defineCustomElement$d } from './p-e4e42677.js';
-import { d as defineCustomElement$c } from './p-1fbdb431.js';
-import { d as defineCustomElement$b } from './p-15971ede.js';
-import { d as defineCustomElement$a } from './p-74849cdd.js';
-import { d as defineCustomElement$9 } from './p-08d0deab.js';
-import { d as defineCustomElement$8 } from './p-d37ab4dc.js';
-import { d as defineCustomElement$7 } from './p-3f406017.js';
-import { d as defineCustomElement$6 } from './p-7f7e5672.js';
-import { d as defineCustomElement$5 } from './p-904711c8.js';
-import { d as defineCustomElement$4 } from './p-73e31a86.js';
-import { d as defineCustomElement$3 } from './p-afbc196f.js';
-import { d as defineCustomElement$2 } from './p-90465904.js';
-import { d as defineCustomElement$1 } from './p-835b973d.js';
+import { p as proxyCustomElement, H, w as dispatchActivityChangeEvent, A as ActivityScoreKey, x as dispatchGameCompletedEvent, y as dispatchGameExitEvent, z as AudioPlayer, B as generateUUIDFallback, C as exitUrl, D as prevUrl, E as nextUrl, F as speakUrl, N as NextContainerKey, P as PrevContainerKey, L as LidoContainer, h, G as getCancelBtnPopup, t as calculateScale, I as triggerPrevcontainer, o as executeActions, j as Host, e as convertUrlToRelative, J as setCancelBtnPopup } from './p-58c67252.js';
+import { i as instance } from './p-0fbeb3a1.js';
+import { d as defineCustomElement$k } from './p-11bf64aa.js';
+import { d as defineCustomElement$j } from './p-26df0769.js';
+import { d as defineCustomElement$i } from './p-3ce3744c.js';
+import { d as defineCustomElement$h } from './p-5b5f59a8.js';
+import { d as defineCustomElement$g } from './p-cb56a853.js';
+import { d as defineCustomElement$f } from './p-68112f8c.js';
+import { d as defineCustomElement$e } from './p-00777872.js';
+import { d as defineCustomElement$d } from './p-0c2aebfb.js';
+import { d as defineCustomElement$c } from './p-2d53e1a5.js';
+import { d as defineCustomElement$b } from './p-8a34b98b.js';
+import { d as defineCustomElement$a } from './p-9d34d59d.js';
+import { d as defineCustomElement$9 } from './p-09f1e2d2.js';
+import { d as defineCustomElement$8 } from './p-52e77394.js';
+import { d as defineCustomElement$7 } from './p-06171259.js';
+import { d as defineCustomElement$6 } from './p-3f4d4c0a.js';
+import { d as defineCustomElement$5 } from './p-8f2ed62f.js';
+import { d as defineCustomElement$4 } from './p-a2f96840.js';
+import { d as defineCustomElement$3 } from './p-39a2e638.js';
+import { d as defineCustomElement$2 } from './p-a516a324.js';
+import { d as defineCustomElement$1 } from './p-c4abfd0f.js';
 
 const indexCss = "@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:0 2px 4px rgba(151, 150, 150, 0.1) !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}";
 const LidoHomeStyle0 = indexCss;
 
-const animationCss = "@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 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)\n            drop-shadow(0 0 10px yellow)\n            drop-shadow(0 0 20px yellow)\n            drop-shadow(0 0 30px orange)}50%{filter:drop-shadow(0 0 10px yellow)\n            drop-shadow(0 0 20px yellow)\n            drop-shadow(0 0 40px yellow)\n            drop-shadow(0 0 50px orange)}100%{filter:drop-shadow(0 0 5px yellow)\n            drop-shadow(0 0 10px yellow)\n            drop-shadow(0 0 20px yellow)\n            drop-shadow(0 0 30px orange)}}";
+const animationCss = "@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 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)\r\n            drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 30px orange)}50%{filter:drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 40px yellow)\r\n            drop-shadow(0 0 50px orange)}100%{filter:drop-shadow(0 0 5px yellow)\r\n            drop-shadow(0 0 10px yellow)\r\n            drop-shadow(0 0 20px yellow)\r\n            drop-shadow(0 0 30px orange)}}";
 const LidoHomeStyle1 = animationCss;
 
 const lidoHomeCss = ".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}";
@@ -86,6 +88,8 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
         };
         // update arrow visibility
         this.updateArrowVisibility = () => {
+            if (!this.showNav)
+                return;
             setTimeout(() => {
                 const containerElement = this.el.querySelector('lido-container');
                 if (!containerElement)
@@ -126,6 +130,9 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
                 }
             }
         };
+        this.showNav = true;
+        this.activeContainerIndexes = [];
+        this.locale = '';
         this.xmlData = '';
         this.initialIndex = 0;
         this.canplay = true;
@@ -143,6 +150,17 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
         this.containers = [];
         this.showDotsandbtn = false;
     }
+    onLangChange(newLang) {
+        this.setLanguage(newLang);
+        // re-render all containers with updated locale
+        this.containers = [...this.containers];
+    }
+    setLanguage(lang) {
+        const effectiveLang = lang || instance.language; // fallback to current
+        instance.changeLanguage(effectiveLang);
+        // Trigger re-render of containers to update <lido-text> dynamically
+        this.containers = [...this.containers];
+    }
     /**
      * Lifecycle method that runs before the component is loaded. It sets up event listeners for transitioning
      * between containers and parses the XML data into containers.
@@ -298,6 +316,9 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
             return null;
         })
             .filter(Boolean);
+        if (tagName === 'lido-text' && props.string) {
+            props.string = instance.t(props.string);
+        }
         // Map XML tags to Stencil components
         const componentMapping = {
             'lido-container': (h("lido-container", Object.assign({}, props, { canplay: this.canplay, baseUrl: this.baseUrl, height: this.height }), children)),
@@ -319,6 +340,7 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
             'lido-math-matrix': h("lido-math-matrix", Object.assign({}, props), children),
             'lido-balance': h("lido-balance", Object.assign({}, props), children),
             'lido-calculator': h("lido-calculator", Object.assign({}, props), children),
+            'lido-canvas': h("lido-canvas", Object.assign({}, props), children),
         };
         // If the tag is known, return the corresponding Stencil component, otherwise log a warning
         if (componentMapping[tagName]) {
@@ -336,11 +358,15 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
      */
     parseContainers(rootElement) {
         const containerElements = rootElement.querySelectorAll('lido-container');
-        const containers = Array.from(containerElements).map(container => {
+        const containers = Array.from(containerElements).map((container, index) => {
+            console.log("nammadhaaaaaaa", this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(index));
+            if (this.activeContainerIndexes.length && !this.activeContainerIndexes.includes(index))
+                return;
             // Return a factory function that generates a fresh JSX node each time
             return () => this.parseElement(container);
-        });
+        }).filter(Boolean); // Remove any undefined entries
         this.containers = containers;
+        console.log("container :::", containers);
     }
     async btnpopup() {
         setCancelBtnPopup(false);
@@ -396,17 +422,17 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
      */
     renderDots() {
         const style = { pointerEvents: this.canplay ? 'none' : '' };
-        return (h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, h("div", { class: "lido-exit-button popup\n        -button", onClick: () => {
+        return (h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, h("div", { class: "lido-exit-button popup\r\n        -button", onClick: () => {
                 this.exitFlag = true;
                 AudioPlayer.getI().stop();
-            } }, h("lido-image", { src: this.navBarIcons.exit })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
+            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.exit })), h("div", { class: "lido-btn-dot-container" }, h("div", { id: "lido-arrow-left", onClick: () => {
                 triggerPrevcontainer();
-            } }, h("lido-image", { src: this.navBarIcons.prev })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
+            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.prev })), this.containers.map((_, index) => (h("div", { class: "parent_dots" }, h("span", { class: `lido-dot ${index < this.currentContainerIndex ? 'completed' : index === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index), style: style })))), h("div", { id: "lido-arrow-right", onClick: event => {
                 console.log('Target:', event.target); // What was clicked
                 console.log('Current Target:', event.currentTarget); // Where the onClick is bound
                 console.log('✅ Button clicked - nextBtn action triggered');
                 executeActions("this.nextBtn='true'", event.currentTarget);
-            } }, h("lido-image", { src: this.navBarIcons.next }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup() }, h("lido-image", { visible: "true", src: this.navBarIcons.speak }))));
+            }, style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { src: this.navBarIcons.next }))), h("div", { id: "main-audio", class: "popup-button", onClick: () => this.btnpopup(), style: { visibility: this.showNav ? "visible" : "hidden" } }, h("lido-image", { visible: "true", src: this.navBarIcons.speak }))));
     }
     /**
      * Jumps to a specific container based on the index of the dot clicked.
@@ -428,14 +454,18 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
         const style = {
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { class: "lido-home", uuid: this.uuid, index: this.currentContainerIndex, totalIndex: this.containers.length, style: style }, h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.renderDots(), this.exitFlag && (h("div", { class: "lido-alert-parent" }, h("div", { class: "lido-alert-popup" }, h("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)';" }, h("lido-text", { visible: "true", string: "Quer sair?", width: "294px", height: "38px", class: "popup-exit-text", "font-size": "22px", onEntry: "this.margin-bottom =' -36px';" }), h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, h("lido-text", { visible: "true", string: "Sair", 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" }), h("lido-text", { visible: "true", string: "Continuar a jogar", 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" }))))))));
+        return (h(Host, { class: "lido-home", uuid: this.uuid, index: this.currentContainerIndex, totalIndex: this.containers.length, style: style }, h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.renderDots(), this.exitFlag && (h("div", { class: "lido-alert-parent" }, h("div", { class: "lido-alert-popup" }, h("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)';" }, h("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';" }), h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, h("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" }), h("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" }))))))));
     }
     get el() { return this; }
     static get watchers() { return {
+        "locale": ["onLangChange"],
         "xmlData": ["onXmlDataChange"]
     }; }
     static get style() { return LidoHomeStyle0 + (LidoHomeStyle1 + LidoHomeStyle2); }
 }, [0, "lido-home", {
+        "showNav": [4, "show-nav"],
+        "activeContainerIndexes": [16],
+        "locale": [1],
         "xmlData": [1, "xml-data"],
         "initialIndex": [2, "initial-index"],
         "canplay": [4],
@@ -453,13 +483,14 @@ const LidoHome = /*@__PURE__*/ proxyCustomElement(class LidoHome extends H {
         "containers": [32],
         "showDotsandbtn": [32]
     }, undefined, {
+        "locale": ["onLangChange"],
         "xmlData": ["onXmlDataChange"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["lido-home", "lido-avatar", "lido-balance", "lido-calculator", "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"];
+    const components = ["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"];
     components.forEach(tagName => { switch (tagName) {
         case "lido-home":
             if (!customElements.get(tagName)) {
@@ -468,15 +499,20 @@ function defineCustomElement() {
             break;
         case "lido-avatar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$j();
+                defineCustomElement$k();
             }
             break;
         case "lido-balance":
             if (!customElements.get(tagName)) {
-                defineCustomElement$i();
+                defineCustomElement$j();
             }
             break;
         case "lido-calculator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "lido-canvas":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }

package/dist/components/{p-835b973d.js → p-c4abfd0f.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, k as parseProp, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, k as parseProp, h, j as Host } from './p-58c67252.js';
 
 const lidoWrapCss = ".lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;background-color:var(--child-bg-color, #f0f0f0);box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}";
 const LidoWrapStyle0 = lidoWrapCss;
@@ -78,7 +78,7 @@ const LidoWrap = /*@__PURE__*/ proxyCustomElement(class LidoWrap extends H {
         };
     }
     render() {
-        return (h(Host, { key: '7e2bb4af31b5aff0f063a9f6c3cab96cdd25f31f', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: '03179b28e45692e61aff0bf3634ef0a72bab0726' })));
+        return (h(Host, { key: '50bc5770105477d0ef7cb080957c8d00198c8b09', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: 'fcd1f5801e34171d1925e39f6c543f229a5d42bd' })));
     }
     get el() { return this; }
     static get style() { return LidoWrapStyle0; }

package/dist/components/{p-29bdd953.js → p-cb56a853.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, k as parseProp, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, q as handlingChildElements, r as attachSpeakIcon, k as parseProp, h, j as Host } from './p-58c67252.js';
 
 const lidoCellCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}.lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}.lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}.lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}.lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}.lido-col::-webkit-scrollbar,.lido-wrap::-webkit-scrollbar,.lido-flex::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}.lido-col::-webkit-scrollbar-thumb,.lido-wrap::-webkit-scrollbar-thumb,.lido-flex::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;border:3px solid transparent;background-clip:content-box}.lido-col::-webkit-scrollbar-track,.lido-wrap::-webkit-scrollbar-track,.lido-flex::-webkit-scrollbar-track{background:#f1f1f1}";
 const LidoCellStyle0 = lidoCellCss;
@@ -129,7 +129,7 @@ const LidoCell = /*@__PURE__*/ proxyCustomElement(class LidoCell extends H {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: '00183a8d67c4c64eae2d2bb2e3db5def7ffe3caf', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '33fbb691c5c8f015bc9c6cf1e86c237758f126c3' })));
+        return (h(Host, { key: '0f7d35324da319917dec546cbb1f25065897bb02', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '2a337b5fae7641bbe78c5f1aa1c96e12c1281f4a' })));
     }
     get el() { return this; }
     static get style() { return LidoCellStyle0; }