lido-player 0.0.2-alpha-53-dev → 0.0.2-alpha-56-dev

package/dist/cjs/{utils-3c1ce74e.js → utils-a61cfc6b.js}

@@ -18,6 +18,8 @@ const DropLength = 'dropLength';
 const DropToAttr = 'drop-to';
 const DropTimeAttr = 'drop-time';
 const LidoContainer = 'lido-container';
+const LIDO_COMMON_AUDIO_PATH = '__LIDO_COMMON_AUDIO_PATH__';
+const LIDO_COMMON_AUDIO_READY_EVENT = 'lidoCommonAudioPathReady';
 exports.TraceMode = void 0;
 (function (TraceMode) {
     TraceMode["NoFlow"] = "noFlow";
@@ -53,6 +55,7 @@ const speakUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/pub
 const fingerUrl = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Tracing-hand.svg';
 
 function dispatchCustomEvent(eventName, detail) {
+    console.log("👍Event Name : ", eventName, "Detail : ", detail.toString());
     const event = new CustomEvent(eventName, { detail });
     window.dispatchEvent(event);
 }
@@ -174,7 +177,7 @@ function updateBalanceOnDrop(dragElement, dropElement) {
 }
 function calculateValue(elements, operation) {
     if (elements.length === 0)
-        return 0;
+        return null;
     if (operation === "count") {
         return elements.length;
     }
@@ -206,18 +209,15 @@ function calculateValue(elements, operation) {
     }
 }
 function balanceResult(container, objectiveString) {
-    var _a, _b, _c, _d, _e, _f;
     const additionalCheck = container.getAttribute('equationCheck');
     if (!additionalCheck)
         return false;
     const balanceEl = document.querySelector('lido-balance');
     if (!balanceEl)
         return false;
-    const leftVal = Number((_c = (_a = balanceEl.leftVal) !== null && _a !== void 0 ? _a : (_b = balanceEl.dataset) === null || _b === void 0 ? void 0 : _b.leftVal) !== null && _c !== void 0 ? _c : 0);
-    const rightVal = Number((_f = (_d = balanceEl.rightVal) !== null && _d !== void 0 ? _d : (_e = balanceEl.dataset) === null || _e === void 0 ? void 0 : _e.rightVal) !== null && _f !== void 0 ? _f : 0);
-    const hasLeft = !isNaN(leftVal);
-    const hasRight = !isNaN(rightVal);
-    if (!hasLeft || !hasRight) {
+    const leftVal = balanceEl.leftVal;
+    const rightVal = balanceEl.rightVal;
+    if (leftVal == null || rightVal == null) {
         return false;
     }
     const symbol = leftVal > rightVal ? '>' : leftVal < rightVal ? '<' : '=';
@@ -226,9 +226,11 @@ function balanceResult(container, objectiveString) {
     return res;
 }
 
+const tempVanishedValues = [];
 function dragDropAnimation(container, dragElement, dropElement) {
-    container.style.pointerEvents = 'none';
+    container.style.pointerEvents = "none";
     setTimeout(() => {
+        var _a, _b, _c;
         const div = document.createElement('div');
         container.append(div);
         div.classList.add('after-drop-popup-container');
@@ -237,6 +239,11 @@ function dragDropAnimation(container, dragElement, dropElement) {
         const allDragElements = container.querySelectorAll('[type="drag"]');
         const dragParents = Array.from(allDragElements).map(el => el.parentElement);
         const allSameParent = dragParents.every(parent => parent === dragElement.parentElement);
+        JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]');
+        const vanishedValue = (_b = dragElement.getAttribute('value')) !== null && _b !== void 0 ? _b : (_c = dragElement.textContent) === null || _c === void 0 ? void 0 : _c.trim();
+        if (vanishedValue) {
+            tempVanishedValues.push(vanishedValue);
+        }
         // Remove from old parents
         if (allSameParent) {
             dragElement.remove();
@@ -260,6 +267,17 @@ function dragDropAnimation(container, dragElement, dropElement) {
             setTimeout(() => {
                 div.remove();
                 container.style.pointerEvents = 'auto';
+                const objective = container.getAttribute('objective');
+                if (objective && tempVanishedValues.map(v => v.trim()).sort().join(',') === objective.split(',').map(v => v.trim()).sort().join(',')) {
+                    (async () => {
+                        // isCorrect=true;
+                        const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
+                        await executeActions(onCorrect, container);
+                        window.dispatchEvent(new CustomEvent(NextContainerKey));
+                        calculateScore();
+                        tempVanishedValues.length = 0;
+                    })();
+                }
             }, 800); // match animation duration
         }, 2000); // stay for 2 seconds
     }, 250);
@@ -534,9 +552,12 @@ function enableDraggingWithScaling(element) {
                             otherElement.style.border = ''; // Reset border
                             otherElement.style.backgroundColor = 'transparent'; // Reset background color
                         }
-                        if (otherElement.tagName.toLowerCase() === 'lido-image') {
+                        else if (otherElement.tagName.toLowerCase() === 'lido-image') {
                             otherElement.style.opacity = '0';
                         }
+                        else {
+                            otherElement.style.opacity = '1';
+                        }
                     }
                 }
                 else {
@@ -968,7 +989,6 @@ async function onElementDropComplete(dragElement, dropElement) {
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
     // storingEachActivityScore(isCorrect);
     dragElement.style.opacity = '1';
-    await onActivityComplete(dragElement, dropElement);
     const allDropElements = document.querySelectorAll('.drop-element');
     allDropElements.forEach(el => updateDropBorder(el));
     await onActivityComplete(dragElement, dropElement);
@@ -3133,7 +3153,7 @@ function onTouchListenerForOnTouch(element) {
         return;
     const container = document.getElementById('lido-container');
     // const container = element.closest('lido-container') as HTMLElement;
-    if (container && container.getAttribute('disableSpeak') === 'true') {
+    if (container && container.getAttribute('disable-speak') === 'true') {
         return;
     }
     // if (element.closest('[disableSpeak="true"]')) {
@@ -69056,6 +69076,8 @@ async function onActivityComplete(dragElement, dropElement) {
     await executeActions("this.alignMatch='true'", dropElement, dragElement);
     if (dragElement && dropElement) {
         const isCorrect = dropElement['value'].toLowerCase().includes(dragElement['value'].toLowerCase());
+        // storing each activity score based on isCorrect for (all drag-drop events)
+        storingEachActivityScore(isCorrect);
         if (isCorrect) {
             const onCorrect = dropElement.getAttribute('onCorrect');
             if (onCorrect) {
@@ -69202,6 +69224,7 @@ const validateObjectiveStatus = async () => {
             if (attach === 'true') {
                 appendingDragElementsInDrop();
             }
+            storingEachActivityScore(true);
             await executeActions(onCorrect, container);
         }
         if (container.getAttribute('dropAttr') === 'EnableAnimation') {
@@ -69217,12 +69240,12 @@ const validateObjectiveStatus = async () => {
     else {
         const isContinueOnCorrect = container.getAttribute('is-continue-on-correct') === 'true';
         if (!isContinueOnCorrect) {
-            triggerNextContainer();
             await calculateScore();
             triggerNextContainer();
         }
         else {
             const onInCorrect = container.getAttribute('onInCorrect');
+            storingEachActivityScore(false);
             await executeActions(onInCorrect, container);
         }
     }
@@ -69245,6 +69268,9 @@ function convertUrlToRelative(url) {
     if ((url === null || url === void 0 ? void 0 : url.startsWith('http')) || (url === null || url === void 0 ? void 0 : url.startsWith('blob')) || (url === null || url === void 0 ? void 0 : url.startsWith('data'))) {
         return url;
     }
+    if (url.startsWith('/Lido-CommonAudios/')) {
+        return url;
+    }
     if (baseUrl) {
         const newUrl = url.startsWith('/') ? url.slice(1) : url;
         if (newUrl.startsWith(baseUrl.replace(/^\/+|\/+$/g, '')))
@@ -69879,6 +69905,8 @@ const updateCalculatorAnswer = (el) => {
 
 exports.ActivityScoreKey = ActivityScoreKey;
 exports.AudioPlayer = AudioPlayer;
+exports.LIDO_COMMON_AUDIO_PATH = LIDO_COMMON_AUDIO_PATH;
+exports.LIDO_COMMON_AUDIO_READY_EVENT = LIDO_COMMON_AUDIO_READY_EVENT;
 exports.LidoContainer = LidoContainer;
 exports.NextContainerKey = NextContainerKey;
 exports.PrevContainerKey = PrevContainerKey;
@@ -69886,6 +69914,7 @@ exports.RiveService = RiveService;
 exports.SelectedValuesKey = SelectedValuesKey;
 exports.attachSpeakIcon = attachSpeakIcon;
 exports.calculateScale = calculateScale;
+exports.calculateScore = calculateScore;
 exports.commonjsGlobal = commonjsGlobal;
 exports.convertUrlToRelative = convertUrlToRelative;
 exports.dispatchActivityChangeEvent = dispatchActivityChangeEvent;

package/dist/collection/components/calculator/lido-calculator.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { executeActions, equationCheck, storingEachActivityScore } from "../../utils/utils";
+import { executeActions, equationCheck, storingEachActivityScore, calculateScore } from "../../utils/utils";
 import { NextContainerKey } from "../../utils/constants";
 export class LidoCalculator {
     constructor() {
@@ -101,10 +101,12 @@ export class LidoCalculator {
             await executeActions(onCorrect, container);
             if (onCorrect.includes('scrollCellAfterEquationSolved')) {
                 if (this.objective.length === 0) {
+                    calculateScore();
                     window.dispatchEvent(new CustomEvent(NextContainerKey));
                 }
             }
             else {
+                calculateScore();
                 window.dispatchEvent(new CustomEvent(NextContainerKey));
             }
         }
@@ -117,7 +119,7 @@ export class LidoCalculator {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (h(Host, { key: 'de394a3b14826c7fb6d6cf33fbbf1726238cbe3b', 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: '6dbc01d1032553ba6376d60d451b546851f5ebed', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: '353396c173bbdeb5f2fbb235e54fa900d2d0b771', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '083b53c01a3d7bfff1c39a408ed064fd18d3e8a3', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: 'b0936ba134feda621d5f0f26b7de70db51f56cf8', class: "lido-calculator-displayParent" }, h("div", { key: '35507ac35c70c4bf515c904a402e5312dafeffc3', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: 'd7412b0d4c8971aa09d9ca22ee8d25f2773cd2c8', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (h(Host, { key: '394177b08965252a6008cce3284475c6176eca3d', 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: '1c79a951e666ad4171b686400f0ba391783e693f', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: '70da4a0990c7ae72367f8d61026c1d4e6f682d48', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: 'c510e7f1cc6ec5d34683030fff988054ac721225', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: '790d7bd307e296cc8e05e29705ebf4bfdda49906', class: "lido-calculator-displayParent" }, h("div", { key: 'f0195ce772bffdee06483da524f8a392dffdde38', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '00fda79dab52a801acafe6006db0dd50923ea74b', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));

package/dist/collection/components/home/lido-home.js

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { SelectedValuesKey, NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, } from "../../utils/constants";
+import { SelectedValuesKey, NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, LIDO_COMMON_AUDIO_PATH } from "../../utils/constants";
 import { dispatchActivityChangeEvent, dispatchGameCompletedEvent, dispatchGameExitEvent } from "../../utils/customEvents";
 import { calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative, triggerNextContainer, matchStringPattern } from "../../utils/utils";
 import { AudioPlayer } from "../../utils/audioPlayer";
@@ -31,7 +31,6 @@ export class LidoHome {
             if (index != undefined && index < this.containers.length) {
                 // Move to the next container
                 this.currentContainerIndex = index;
-                console.log('container index ; ', this.currentContainerIndex);
                 // window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
                 dispatchActivityChangeEvent(this.currentContainerIndex);
             }
@@ -109,6 +108,7 @@ export class LidoHome {
                 }
             }
         };
+        this.commonAudioPath = undefined;
         this.showNav = true;
         this.activeContainerIndexes = [];
         this.locale = '';
@@ -140,6 +140,9 @@ export class LidoHome {
         // Trigger re-render of containers to update <lido-text> dynamically
         this.containers = [...this.containers];
     }
+    onCommonAudioPathChange(path) {
+        this.publishCommonAudioPath(path);
+    }
     /**
      * 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.
@@ -175,6 +178,7 @@ export class LidoHome {
         });
     }
     componentDidLoad() {
+        this.publishCommonAudioPath(this.commonAudioPath);
         setTimeout(() => {
             this.showDotsandbtn = true;
         }, 10);
@@ -190,6 +194,15 @@ export class LidoHome {
             this.scaleNavbarContainer(); // re-scale navbar on resize
         });
     }
+    publishCommonAudioPath(path) {
+        if (!path)
+            return;
+        const cleanPath = path.replace(/\/+$/, "");
+        window[LIDO_COMMON_AUDIO_PATH] = cleanPath;
+        console.log("[LidoHome] Published common audio path:", cleanPath);
+        // Dispatch a global event so LidoText knows the path is ready
+        window.dispatchEvent(new Event('lidoCommonAudioPathReady'));
+    }
     async handleIcons() {
         var _a;
         const checkUrl = async (url, containerUrl, fallback) => {
@@ -341,20 +354,16 @@ export class LidoHome {
     parseContainers(rootElement) {
         const containerElements = rootElement.querySelectorAll('lido-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);
     }
     areAllDropsFilled() {
         const drops = Array.from(document.querySelectorAll('[type="drop"]'));
         const drags = Array.from(document.querySelectorAll('[type="drag"]')).filter(drag => drag.getAttribute('drop-to'));
-        console.log('drops', drops);
-        console.log('drags', drags);
         return drops.every(drop => {
             const dropId = drop.id;
             return drags.some(drag => drag.getAttribute('drop-to') === dropId);
@@ -473,6 +482,23 @@ export class LidoHome {
     }
     static get properties() {
         return {
+            "commonAudioPath": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "common-audio-path",
+                "reflect": false
+            },
             "showNav": {
                 "type": "boolean",
                 "mutable": false,
@@ -734,6 +760,9 @@ export class LidoHome {
         return [{
                 "propName": "locale",
                 "methodName": "onLangChange"
+            }, {
+                "propName": "commonAudioPath",
+                "methodName": "onCommonAudioPathChange"
             }, {
                 "propName": "xmlData",
                 "methodName": "onXmlDataChange"

package/dist/collection/components/mathMatrix/lido-math-matrix.js

@@ -2,8 +2,8 @@ import { Host, h } from "@stencil/core";
 import { convertUrlToRelative, initEventsForElement, parseProp, validateObjectiveStatus } from "../../utils/utils";
 export class LidoMathMatrix {
     constructor() {
-        this.rows = "7";
-        this.cols = "5";
+        this.rows = "10";
+        this.cols = "10";
         this.defualtFill = 0;
         this.leftIndex = false;
         this.topIndex = false;
@@ -80,8 +80,10 @@ export class LidoMathMatrix {
         const fristElement = this.el.querySelector('.slot');
         if (!slotElement.length || !fristElement)
             return;
-        const slotMaxValues = fristElement.offsetWidth < fristElement.offsetHeight ? fristElement.offsetWidth : fristElement.offsetHeight;
+        const elementSize = Number(this.rows) < Number(this.cols) ? this.el.offsetHeight : this.el.offsetWidth;
+        const numberOfSlots = Number(this.rows) > Number(this.cols) ? Number(this.rows) : Number(this.cols);
         const slotParent = this.el.querySelectorAll('.slot-parent');
+        const slotMaxValues = elementSize / numberOfSlots;
         slotParent.forEach(parent => {
             parent.style.width = `${slotMaxValues}px`;
             Array.from(parent.children).forEach(el => {
@@ -185,7 +187,7 @@ export class LidoMathMatrix {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: '8232965fc3fb0b298233d21d7f50412508dc2256', class: "math-matrix", style: {
+        return (h(Host, { key: 'bbd76954f0a4b67cd89dd10e3c26ce4f7e7712bd', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,
@@ -230,7 +232,7 @@ export class LidoMathMatrix {
                 },
                 "attribute": "rows",
                 "reflect": false,
-                "defaultValue": "\"7\""
+                "defaultValue": "\"10\""
             },
             "cols": {
                 "type": "string",
@@ -248,7 +250,7 @@ export class LidoMathMatrix {
                 },
                 "attribute": "cols",
                 "reflect": false,
-                "defaultValue": "\"5\""
+                "defaultValue": "\"10\""
             },
             "defualtFill": {
                 "type": "number",

package/dist/collection/components/shape/lido-shape.css

@@ -4,6 +4,8 @@
   left: var(--x);
   display: var(--display);
   z-index: var(--z);
+  justify-content: center;
+  align-items: center;
 }
 
 .lido-rectangle {
@@ -53,6 +55,52 @@
   transform: skew(20deg);
 }
 
+.lido-trapezoid {
+  width: var(--trapezoidWidth);
+  height: var(--trapezoidHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(
+    20% 0%,   /* top left */
+    80% 0%,   /* top right */
+    100% 100%,/* bottom right */
+    0% 100%  /* bottom left */
+  );
+}
+
+.lido-hexagon {
+  width: var(--hexagonWidth);
+  height: var(--hexagonHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(
+    25% 0%,   /* top left */
+    75% 0%,   /* top right */
+    100% 50%, /* right */
+    75% 100%, /* bottom right */
+    25% 100%, /* bottom left */
+    0% 50%   /* left */
+  );
+}
+
+.lido-cone {
+  width: var(--coneWidth);
+  height: var(--coneHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(
+    /* Curved top (approximated arc) */
+    15% 10%,
+    25% 4%,
+    35% 1%,
+    50% 0%,
+    65% 1%,
+    75% 4%,
+    85% 10%,
+
+    /* Bottom tip */
+    50% 100%
+  );
+}
+
+
 .lido-star {
   width: var(--starWidth);
   height: var(--starHeight);
@@ -94,3 +142,45 @@
   border-image: radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;
   clip-path: polygon(-41% 0, 50% 91%, 141% 0);
 }
+
+/* cube */
+
+.cube {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  /* animation: spin 6s infinite linear; */
+  transform: rotateX(-20deg) rotateY(45deg);
+}
+
+/* all faces */
+.face {
+  position: absolute;
+  width: var(--face-width,150px);
+  height: var(--face-width,150px);
+  background: var(--face-bg-color,150px); /* cube color */
+  box-shadow: inset -20px -20px 40px rgba(0,0,0,0.3);
+}
+
+/* move faces into a cube shape */
+.front  { transform: rotateY(  0deg) translateZ(var(--face-translate, 75px)); }
+.back   { transform: rotateY(180deg) translateZ(var(--face-translate, 75px)); }
+.right  { transform: rotateY( 90deg) translateZ(var(--face-translate, 75px)); }
+.left   { transform: rotateY(-90deg) translateZ(var(--face-translate, 75px)); }
+.top    { transform: rotateX( 90deg) translateZ(var(--face-translate, 75px)); }
+.bottom { transform: rotateX(-90deg) translateZ(var(--face-translate, 75px)); }
+
+
+
+/* Cylinder */
+.lido-cylinder {
+  /* whatever values/units you want */
+  width: var(--width);
+  height: var(--height);
+  border-radius: 100% / 80px;
+  background: 
+    radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),
+    radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),
+    red;
+}

package/dist/collection/components/shape/lido-shape.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { initEventsForElement, setVisibilityWithDelay } from "../../utils/utils";
+import { initEventsForElement, setVisibilityWithDelay, parseProp } from "../../utils/utils";
 /**
  * @component LidoShape
  *
@@ -33,6 +33,7 @@ export class LidoShape {
         this.margin = '';
         this.delayVisible = '';
         this.disableSpeak = false;
+        this.style = {};
     }
     /**
      * Lifecycle hook that runs after the component is loaded into the DOM.
@@ -41,20 +42,49 @@ export class LidoShape {
     componentDidLoad() {
         setVisibilityWithDelay(this.el, this.delayVisible);
         initEventsForElement(this.el, this.type);
+        this.updateStyles();
+        this.lido3DShapes();
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            x: parseProp(`${this.x}`, orientation),
+            y: parseProp(`${this.y}`, orientation),
+            height: parseProp(`${this.height}`, orientation),
+            width: parseProp(`${this.width}`, orientation),
+        };
+    }
+    lido3DShapes() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        if (this.shapeType === "lido-cube") {
+            const faces = this.el.querySelectorAll(".face");
+            faces.forEach(item => {
+                const face = item;
+                face.style.setProperty("--face-width", parseProp(`${this.width}`, orientation));
+                const translateValue = parseInt(parseProp(`${this.width}`, orientation)) / 2;
+                console.log("translate : ", translateValue);
+                face.style.setProperty("--face-translate", `${translateValue}px`);
+                face.style.setProperty("--face-bg-color", this.bgColor);
+            });
+        }
+        if (this.shapeType === "lido-cylinder") {
+            const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        }
     }
     render() {
         // Inline styles to position and size the shape component
         const style = {
-            height: this.shapeType !== 'polygon' ? this.height : undefined, // Set height unless it's a polygon
-            width: this.shapeType !== 'polygon' ? this.width : undefined, // Set width unless it's a polygon
-            top: this.y,
-            left: this.x,
+            height: this.shapeType !== 'polygon' ? this.style.height : undefined, // Set height unless it's a polygon
+            width: this.shapeType !== 'polygon' ? this.style.width : undefined, // Set width unless it's a polygon
+            top: this.style.y,
+            left: this.style.x,
             display: this.visible ? 'block' : 'none', // Toggle visibility
             zIndex: this.z,
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        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 }));
+        return (h(Host, { key: 'fde795dbc7c3a295a84bb1e5e74ff57cf3fe103a', 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 }, this.shapeType === "lido-cube" &&
+            h("div", { key: '620b82948d6eea342a2e00fab780696fcd2d6794', class: "cube" }, h("div", { key: 'b505a156896edd12c8d686966945168c5eb056d7', class: "face top" }), h("div", { key: '806b4d6aec720340d7a207854b20f910bb845829', class: "face bottom" }), h("div", { key: 'd2619804cabb2761e624139e33d759992d632468', class: "face left" }), h("div", { key: '3874ba7bcbe3eebc133b107a4bfefb38638eeb0f', class: "face right" }), h("div", { key: '0e19cfb0feba399b9a98336b0f6c349ff22e29ed', class: "face front" }), h("div", { key: '9b1d9d75d8897756f32bc023533eb1dc025d8e2f', class: "face back" }))));
     }
     static get is() { return "lido-shape"; }
     static get originalStyleUrls() {
@@ -503,5 +533,10 @@ export class LidoShape {
             }
         };
     }
+    static get states() {
+        return {
+            "style": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }

package/dist/collection/components/slideFill/lido-slide-fill.js

@@ -190,7 +190,7 @@ export class LidoSlideFill {
         }
     }
     render() {
-        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" })));
+        return (h(Host, { key: '12b0ded699dde182bca178f2a58e5dea40536f18', 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: '623f23b8b00bd4d83e99eb264dbb810aaf990ddd', innerHTML: this.svgContent, class: "svg-element" })));
     }
     static get is() { return "lido-slide-fill"; }
     static get originalStyleUrls() {

package/dist/collection/components/text/lido-text.js

@@ -1,6 +1,7 @@
 import { h, Host } from "@stencil/core";
 import { initEventsForElement, convertUrlToRelative, parseProp, setVisibilityWithDelay, attachSpeakIcon } from "../../utils/utils";
 import i18next from "../../utils/i18n";
+import { LIDO_COMMON_AUDIO_PATH, LIDO_COMMON_AUDIO_READY_EVENT } from "../../utils/constants";
 /**
  * @component LidoText
  *
@@ -59,6 +60,30 @@ export class LidoText {
         if (this.showSpeakIcon) {
             attachSpeakIcon(this.el);
         }
+        if (!this.audio || this.audio.trim() === "") {
+            const applyAutoAudio = () => {
+                const autoAudio = this.resolveAutoAudio();
+                if (autoAudio) {
+                    this.audio = autoAudio;
+                    console.log("[LidoText] Auto audio applied:", autoAudio);
+                }
+            };
+            // If path is already available, apply immediately
+            if (window.__LIDO_COMMON_AUDIO_PATH__) {
+                applyAutoAudio();
+            }
+            else {
+                // Otherwise, wait for it
+                window.addEventListener(LIDO_COMMON_AUDIO_READY_EVENT, applyAutoAudio, { once: true });
+            }
+        }
+    }
+    resolveAutoAudio() {
+        const base = window[LIDO_COMMON_AUDIO_PATH];
+        if (!base || !this.string)
+            return null;
+        const fileName = this.string.toLowerCase().trim().replace(/\s+/g, "_").replace(/[^\w-]/g, "");
+        return `${base}/${fileName}.mp3`;
     }
     /**
      * Lifecycle method that runs before the component is rendered.
@@ -124,7 +149,7 @@ export class LidoText {
         }
     }
     render() {
-        return (h(Host, { key: '89ed432cbbf1f3ca2cdcaf4df80628350badef6d', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", i18next.t(this.string)) : i18next.t(this.string)));
+        return (h(Host, { key: '87d82cc0bf52e1eaba8f44d1bdd80c98e896ddbf', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", i18next.t(this.string)) : i18next.t(this.string)));
     }
     static get is() { return "lido-text"; }
     static get originalStyleUrls() {