lido-player 0.0.2-alpha-17 → 0.0.2-alpha-19

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-f626a4b8.js');
+const utils = require('./utils-677af176.js');
 require('./index-fe562525.js');
 
 

package/dist/cjs/lido-avatar_17.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fe562525.js');
-const utils = require('./utils-f626a4b8.js');
+const utils = require('./utils-677af176.js');
 
 var rive = {exports: {}};
 
@@ -6679,7 +6679,7 @@ const LidoCell = class {
             }
         }, 50);
         if (this.showSpeakIcon) {
-            utils.attachSpeakIcon(this.el, this.x, this.y);
+            utils.attachSpeakIcon(this.el);
         }
     }
     /**
@@ -6722,7 +6722,7 @@ const LidoCell = class {
         this.el.className = `lido-${utils.parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (index.h(index.Host, { key: 'bfe66118617e201c5539c90f36baafb5f3a6f4d0', 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 }, index.h("slot", { key: 'b3ea80bf41ea813681e35ac5704e770c5f05dcc6' })));
+        return (index.h(index.Host, { key: '9f65539e85d22f775f44c310ecd7accc5f599859', 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 }, index.h("slot", { key: '1c81a23db893dfc3af36f0ed98f9d5ce3cafebf3' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -6772,7 +6772,7 @@ const LidoCol = class {
         utils.initEventsForElement(this.el, this.type);
         utils.handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength);
         if (this.showSpeakIcon) {
-            utils.attachSpeakIcon(this.el, this.x, this.y);
+            utils.attachSpeakIcon(this.el);
         }
     }
     /**
@@ -6807,7 +6807,7 @@ const LidoCol = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'cb6eb9e4851477c3392469bc52115a796c48b9e0', 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 }, index.h("slot", { key: '71ea9bb8da2874d4127dcaf9eecb99d936be3391' })));
+        return (index.h(index.Host, { key: '753487ca4817b020aaf7e34dadff00a61c826dfc', 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 }, index.h("slot", { key: 'a9d9f0f2c30dc02e6468e597b5a02e032d786538' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -7161,7 +7161,7 @@ const LidoHome = class {
                 else {
                     rightbtn.style.visibility = 'visible';
                 }
-            }, 100);
+            }, 800);
         };
         this.popUpClick = (comment) => {
             const alertElement = this.el.querySelector('.lido-alert-popup');
@@ -7381,7 +7381,7 @@ const LidoHome = class {
                 item.style.transform = `scale(${utils.calculateScale()})`;
             });
             navBar.style.width = window.outerWidth + 'px';
-        }, 100);
+        }, 700);
     }
     /**
      * Renders navigation dots for each container, indicating the progress of the user.
@@ -7418,7 +7418,7 @@ const LidoHome = class {
             // If no XML data is provided, prompt the user to provide it
             return index.h("div", null, "Please provide XML data.");
         }
-        return (index.h(index.Host, { class: "lido-home", index: this.currentContainerIndex, totalIndex: this.containers.length }, index.h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.showDotsandbtn && this.renderDots(), this.exitFlag && (index.h("div", { class: "lido-alert-parent" }, index.h("div", { class: "lido-alert-popup" }, index.h("lido-cell", { class: "lido-alert-content", visible: "true", layout: "col", width: "720px", height: "360px", "bg-color": "#fff", "border-radius": "16px", onEntry: "this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';" }, index.h("lido-text", { visible: "true", string: "Do you want to exit?", width: "622px", height: "57px", class: "popup-exit-text", "font-size": "40px", onEntry: "this.margin-bottom =' -36px';" }), index.h("lido-cell", { visible: "true", layout: "row", width: "80%", class: "btn-cell" }, index.h("lido-text", { visible: "true", string: "EXIT", width: "240px", height: "105px", "font-size": "24px", 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" }), index.h("lido-text", { visible: "true", string: "KEEP PLAYING", width: "280px", height: "105px", "font-size": "24px", 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 (index.h(index.Host, { class: "lido-home", index: this.currentContainerIndex, totalIndex: this.containers.length }, index.h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.showDotsandbtn && this.renderDots(), this.exitFlag && (index.h("div", { class: "lido-alert-parent" }, index.h("div", { class: "lido-alert-popup" }, index.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)';" }, index.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';" }), index.h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, index.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" }), index.h("lido-text", { visible: "true", string: "KEEP 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 index.getElement(this); }
     static get watchers() { return {
@@ -10181,7 +10181,7 @@ const LidoImage = class {
             }
         }
         if (this.showSpeakIcon) {
-            utils.attachSpeakIcon(this.el, this.x, this.y);
+            utils.attachSpeakIcon(this.el);
         }
     }
     /**
@@ -10362,7 +10362,7 @@ const LidoRandom = class {
             });
         }, 50);
         if (this.showSpeakIcon) {
-            utils.attachSpeakIcon(this.el, this.x, this.y);
+            utils.attachSpeakIcon(this.el);
         }
     }
     render() {
@@ -10377,7 +10377,7 @@ const LidoRandom = class {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (index.h(index.Host, { key: 'a4bbd44f0ff8058b808d9118b8c22a0545de6632', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '421469c42d2f015cc4bf7e26b6f8e2f56d29abbe' })));
+        return (index.h(index.Host, { key: '229c4cba82bdb4501ee53c16f68407e5d01095a0', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'fb10f2952956918e66a4bb5b110719caa4e41670' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -10483,7 +10483,7 @@ const LidoRow = class {
         utils.initEventsForElement(this.el, this.type);
         utils.handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength);
         if (this.showSpeakIcon) {
-            utils.attachSpeakIcon(this.el, this.x, this.y);
+            utils.attachSpeakIcon(this.el);
         }
     }
     /**
@@ -10516,7 +10516,7 @@ const LidoRow = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'bea2b6a6be9168f1854075ff0d61dffb3469f1f5', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'ba5ef737a961749412dfa91523381b7193fdbde7' })));
+        return (index.h(index.Host, { key: 'fd85fc603f1a8d1890984e08df7f627cc3840c24', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'a614ca85c0ab0957e0b4150303036c513505e241' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -10796,7 +10796,7 @@ const LidoText = class {
             this.addSpanToText();
         }
         if (this.showSpeakIcon) {
-            utils.attachSpeakIcon(this.el, this.x, this.y);
+            utils.attachSpeakIcon(this.el);
         }
     }
     /**
@@ -10863,7 +10863,7 @@ const LidoText = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '77cc78e6a7228c771d78fe2ef8926ad15f474f7a', 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 }, this.spanType !== '' ? index.h("div", { class: "lido-text-content" }, this.string) : this.string));
+        return (index.h(index.Host, { key: 'b20e7357057e57fd2b1763f9d2d711a1521af4cd', 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 }, this.spanType !== '' ? index.h("div", { class: "lido-text-content" }, this.string) : this.string));
     }
     get el() { return index.getElement(this); }
 };
@@ -11553,7 +11553,7 @@ const LidoWrap = class {
             this.el.classList.add('lido-flex');
         }
         if (this.showSpeakIcon) {
-            utils.attachSpeakIcon(this.el, this.x, this.y);
+            utils.attachSpeakIcon(this.el);
         }
     }
     /**
@@ -11583,7 +11583,7 @@ const LidoWrap = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '396ad713cde9f794c740975daee6587f4166394a', 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 }, index.h("slot", { key: '2016d52840e7d3db136680f4969d66e5b4d156d7' })));
+        return (index.h(index.Host, { key: 'f093d948bae3bd98d6c6a205b88ab2dcb6c809b3', 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 }, index.h("slot", { key: '02e2e72ace7ca4eae384ed410cacc2e3a337b6f7' })));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/{utils-f626a4b8.js → utils-677af176.js}

@@ -68496,21 +68496,28 @@ const speakIcon = (targetElement) => {
         }
         setCancelBtnPopup(false); // Reset cancel state
     });
-    if (targetElement['type'] === 'option') {
-        speakIcon.style.position = 'unset';
-        return parentDiv;
-    }
     targetElement.style.position = 'relative';
     return speakIcon;
 };
-const attachSpeakIcon = async (element, x, y) => {
-    const speakIconElement = speakIcon(element);
+const attachSpeakIcon = async (element) => {
+    let speakIconElement = speakIcon(element);
     if (element['type'] === 'option') {
-        const icon = speakIconElement.firstChild;
-        icon.style.marginLeft = x;
-        icon.style.marginTop = y;
+        element.style.position = 'unset';
+        const speakDiv = document.createElement('div');
+        speakDiv.className = element.className;
+        speakDiv.style.position = 'relative';
+        speakDiv.style.backgroundColor = 'transparent';
+        speakDiv.style.padding = '0';
+        speakDiv.style.width = '100%';
+        speakDiv.style.height = '100%';
+        Array.from(element.children).forEach(child => {
+            speakDiv.appendChild(child);
+        });
+        speakDiv.appendChild(speakIconElement);
+        speakIconElement.style.position = 'absolute';
+        speakIconElement = speakDiv;
     }
-    element.append(speakIconElement);
+    element.appendChild(speakIconElement);
 };
 const clearLocalStorage = () => {
     AudioPlayer.getI().stop();

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

@@ -87,7 +87,7 @@ export class LidoCell {
             }
         }, 50);
         if (this.showSpeakIcon) {
-            attachSpeakIcon(this.el, this.x, this.y);
+            attachSpeakIcon(this.el);
         }
     }
     /**
@@ -130,7 +130,7 @@ export class LidoCell {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: 'bfe66118617e201c5539c90f36baafb5f3a6f4d0', 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 }, h("slot", { key: 'b3ea80bf41ea813681e35ac5704e770c5f05dcc6' })));
+        return (h(Host, { key: '9f65539e85d22f775f44c310ecd7accc5f599859', 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 }, h("slot", { key: '1c81a23db893dfc3af36f0ed98f9d5ce3cafebf3' })));
     }
     static get is() { return "lido-cell"; }
     static get originalStyleUrls() {

package/dist/collection/components/column/lido-col.js

@@ -49,7 +49,7 @@ export class LidoCol {
         initEventsForElement(this.el, this.type);
         handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength);
         if (this.showSpeakIcon) {
-            attachSpeakIcon(this.el, this.x, this.y);
+            attachSpeakIcon(this.el);
         }
     }
     /**
@@ -84,7 +84,7 @@ export class LidoCol {
         };
     }
     render() {
-        return (h(Host, { key: 'cb6eb9e4851477c3392469bc52115a796c48b9e0', 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: '71ea9bb8da2874d4127dcaf9eecb99d936be3391' })));
+        return (h(Host, { key: '753487ca4817b020aaf7e34dadff00a61c826dfc', 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: 'a9d9f0f2c30dc02e6468e597b5a02e032d786538' })));
     }
     static get is() { return "lido-col"; }
     static get originalStyleUrls() {

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

@@ -78,7 +78,7 @@ export class LidoHome {
                 else {
                     rightbtn.style.visibility = 'visible';
                 }
-            }, 100);
+            }, 800);
         };
         this.popUpClick = (comment) => {
             const alertElement = this.el.querySelector('.lido-alert-popup');
@@ -298,7 +298,7 @@ export class LidoHome {
                 item.style.transform = `scale(${calculateScale()})`;
             });
             navBar.style.width = window.outerWidth + 'px';
-        }, 100);
+        }, 700);
     }
     /**
      * Renders navigation dots for each container, indicating the progress of the user.
@@ -335,7 +335,7 @@ export class LidoHome {
             // If no XML data is provided, prompt the user to provide it
             return h("div", null, "Please provide XML data.");
         }
-        return (h(Host, { class: "lido-home", index: this.currentContainerIndex, totalIndex: this.containers.length }, h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.showDotsandbtn && 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: "720px", height: "360px", "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: "622px", height: "57px", class: "popup-exit-text", "font-size": "40px", onEntry: "this.margin-bottom =' -36px';" }), h("lido-cell", { visible: "true", layout: "row", width: "80%", class: "btn-cell" }, h("lido-text", { visible: "true", string: "EXIT", width: "240px", height: "105px", "font-size": "24px", 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: "KEEP PLAYING", width: "280px", height: "105px", "font-size": "24px", 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", index: this.currentContainerIndex, totalIndex: this.containers.length }, h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.showDotsandbtn && 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: "KEEP 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" }))))))));
     }
     static get is() { return "lido-home"; }
     static get originalStyleUrls() {

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

@@ -58,7 +58,7 @@ export class LidoImage {
             }
         }
         if (this.showSpeakIcon) {
-            attachSpeakIcon(this.el, this.x, this.y);
+            attachSpeakIcon(this.el);
         }
     }
     /**

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

@@ -63,7 +63,7 @@ export class LidoRandom {
             });
         }, 50);
         if (this.showSpeakIcon) {
-            attachSpeakIcon(this.el, this.x, this.y);
+            attachSpeakIcon(this.el);
         }
     }
     render() {
@@ -78,7 +78,7 @@ export class LidoRandom {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (h(Host, { key: 'a4bbd44f0ff8058b808d9118b8c22a0545de6632', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '421469c42d2f015cc4bf7e26b6f8e2f56d29abbe' })));
+        return (h(Host, { key: '229c4cba82bdb4501ee53c16f68407e5d01095a0', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'fb10f2952956918e66a4bb5b110719caa4e41670' })));
     }
     static get is() { return "lido-random"; }
     static get originalStyleUrls() {

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

@@ -44,7 +44,7 @@ export class LidoRow {
         initEventsForElement(this.el, this.type);
         handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength);
         if (this.showSpeakIcon) {
-            attachSpeakIcon(this.el, this.x, this.y);
+            attachSpeakIcon(this.el);
         }
     }
     /**
@@ -77,7 +77,7 @@ export class LidoRow {
         };
     }
     render() {
-        return (h(Host, { key: 'bea2b6a6be9168f1854075ff0d61dffb3469f1f5', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'ba5ef737a961749412dfa91523381b7193fdbde7' })));
+        return (h(Host, { key: 'fd85fc603f1a8d1890984e08df7f627cc3840c24', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'a614ca85c0ab0957e0b4150303036c513505e241' })));
     }
     static get is() { return "lido-row"; }
     static get originalStyleUrls() {

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

@@ -55,7 +55,7 @@ export class LidoText {
             this.addSpanToText();
         }
         if (this.showSpeakIcon) {
-            attachSpeakIcon(this.el, this.x, this.y);
+            attachSpeakIcon(this.el);
         }
     }
     /**
@@ -122,7 +122,7 @@ export class LidoText {
         }
     }
     render() {
-        return (h(Host, { key: '77cc78e6a7228c771d78fe2ef8926ad15f474f7a', 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 }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, this.string) : this.string));
+        return (h(Host, { key: 'b20e7357057e57fd2b1763f9d2d711a1521af4cd', 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 }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, this.string) : this.string));
     }
     static get is() { return "lido-text"; }
     static get originalStyleUrls() {

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

@@ -49,7 +49,7 @@ export class LidoWrap {
             this.el.classList.add('lido-flex');
         }
         if (this.showSpeakIcon) {
-            attachSpeakIcon(this.el, this.x, this.y);
+            attachSpeakIcon(this.el);
         }
     }
     /**
@@ -79,7 +79,7 @@ export class LidoWrap {
         };
     }
     render() {
-        return (h(Host, { key: '396ad713cde9f794c740975daee6587f4166394a', 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 }, h("slot", { key: '2016d52840e7d3db136680f4969d66e5b4d156d7' })));
+        return (h(Host, { key: 'f093d948bae3bd98d6c6a205b88ab2dcb6c809b3', 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 }, h("slot", { key: '02e2e72ace7ca4eae384ed410cacc2e3a337b6f7' })));
     }
     static get is() { return "lido-wrap"; }
     static get originalStyleUrls() {

package/dist/collection/utils/utils.js

@@ -731,21 +731,28 @@ export const speakIcon = (targetElement) => {
         }
         setCancelBtnPopup(false); // Reset cancel state
     });
-    if (targetElement['type'] === 'option') {
-        speakIcon.style.position = 'unset';
-        return parentDiv;
-    }
     targetElement.style.position = 'relative';
     return speakIcon;
 };
-export const attachSpeakIcon = async (element, x, y) => {
-    const speakIconElement = speakIcon(element);
+export const attachSpeakIcon = async (element) => {
+    let speakIconElement = speakIcon(element);
     if (element['type'] === 'option') {
-        const icon = speakIconElement.firstChild;
-        icon.style.marginLeft = x;
-        icon.style.marginTop = y;
+        element.style.position = 'unset';
+        const speakDiv = document.createElement('div');
+        speakDiv.className = element.className;
+        speakDiv.style.position = 'relative';
+        speakDiv.style.backgroundColor = 'transparent';
+        speakDiv.style.padding = '0';
+        speakDiv.style.width = '100%';
+        speakDiv.style.height = '100%';
+        Array.from(element.children).forEach(child => {
+            speakDiv.appendChild(child);
+        });
+        speakDiv.appendChild(speakIconElement);
+        speakIconElement.style.position = 'absolute';
+        speakIconElement = speakDiv;
     }
-    element.append(speakIconElement);
+    element.appendChild(speakIconElement);
 };
 export const clearLocalStorage = () => {
     AudioPlayer.getI().stop();

package/dist/components/index.js

@@ -1 +1 @@
-export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-a5ae9716.js';
+export { f as format, g as getAssetPath, s as setAssetPath, a as setNonce, b as setPlatformOptions } from './p-4817b81a.js';

package/dist/components/lido-avatar.js

@@ -1,4 +1,4 @@
-import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-4aee55d9.js';
+import { L as LidoAvatar$1, d as defineCustomElement$1 } from './p-1bf7f8c5.js';
 
 const LidoAvatar = LidoAvatar$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-cell.js

@@ -1,4 +1,4 @@
-import { L as LidoCell$1, d as defineCustomElement$1 } from './p-a9306687.js';
+import { L as LidoCell$1, d as defineCustomElement$1 } from './p-06f1ae64.js';
 
 const LidoCell = LidoCell$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-col.js

@@ -1,4 +1,4 @@
-import { L as LidoCol$1, d as defineCustomElement$1 } from './p-176b51e2.js';
+import { L as LidoCol$1, d as defineCustomElement$1 } from './p-bcd6fcc5.js';
 
 const LidoCol = LidoCol$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-container.js

@@ -1,4 +1,4 @@
-import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-bc8352b8.js';
+import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-0c349e4c.js';
 
 const LidoContainer = LidoContainer$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-flash-card.js

@@ -1,4 +1,4 @@
-import { L as LidoFlash, d as defineCustomElement$1 } from './p-603fc533.js';
+import { L as LidoFlash, d as defineCustomElement$1 } from './p-7f5a97ff.js';
 
 const LidoFlashCard = LidoFlash;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-float.js

@@ -1,4 +1,4 @@
-import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-d034cc2d.js';
+import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-f47d09ca.js';
 
 const LidoFloat = LidoFloat$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-home.js

@@ -1,4 +1,4 @@
-import { L as LidoHome$1, d as defineCustomElement$1 } from './p-2bc770cd.js';
+import { L as LidoHome$1, d as defineCustomElement$1 } from './p-342bd0f2.js';
 
 const LidoHome = LidoHome$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-image.js

@@ -1,4 +1,4 @@
-import { L as LidoImage$1, d as defineCustomElement$1 } from './p-7cdd1958.js';
+import { L as LidoImage$1, d as defineCustomElement$1 } from './p-8173be9b.js';
 
 const LidoImage = LidoImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-pos.js

@@ -1,4 +1,4 @@
-import { L as LidoPos$1, d as defineCustomElement$1 } from './p-44b368f5.js';
+import { L as LidoPos$1, d as defineCustomElement$1 } from './p-cb3950d0.js';
 
 const LidoPos = LidoPos$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-random.js

@@ -1,4 +1,4 @@
-import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-f8855c9f.js';
+import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-cbc2a355.js';
 
 const LidoRandom = LidoRandom$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-root.js

@@ -1,20 +1,20 @@
-import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-a5ae9716.js';
-import { d as defineCustomElement$h } from './p-4aee55d9.js';
-import { d as defineCustomElement$g } from './p-a9306687.js';
-import { d as defineCustomElement$f } from './p-176b51e2.js';
-import { d as defineCustomElement$e } from './p-bc8352b8.js';
-import { d as defineCustomElement$d } from './p-603fc533.js';
-import { d as defineCustomElement$c } from './p-d034cc2d.js';
-import { d as defineCustomElement$b } from './p-2bc770cd.js';
-import { d as defineCustomElement$a } from './p-7cdd1958.js';
-import { d as defineCustomElement$9 } from './p-44b368f5.js';
-import { d as defineCustomElement$8 } from './p-f8855c9f.js';
-import { d as defineCustomElement$7 } from './p-0881da0d.js';
-import { d as defineCustomElement$6 } from './p-78c15747.js';
-import { d as defineCustomElement$5 } from './p-28c69665.js';
-import { d as defineCustomElement$4 } from './p-5fbc5d57.js';
-import { d as defineCustomElement$3 } from './p-0514f191.js';
-import { d as defineCustomElement$2 } from './p-1274b536.js';
+import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-4817b81a.js';
+import { d as defineCustomElement$h } from './p-1bf7f8c5.js';
+import { d as defineCustomElement$g } from './p-06f1ae64.js';
+import { d as defineCustomElement$f } from './p-bcd6fcc5.js';
+import { d as defineCustomElement$e } from './p-0c349e4c.js';
+import { d as defineCustomElement$d } from './p-7f5a97ff.js';
+import { d as defineCustomElement$c } from './p-f47d09ca.js';
+import { d as defineCustomElement$b } from './p-342bd0f2.js';
+import { d as defineCustomElement$a } from './p-8173be9b.js';
+import { d as defineCustomElement$9 } from './p-cb3950d0.js';
+import { d as defineCustomElement$8 } from './p-cbc2a355.js';
+import { d as defineCustomElement$7 } from './p-a647a4fe.js';
+import { d as defineCustomElement$6 } from './p-e5d3e84e.js';
+import { d as defineCustomElement$5 } from './p-5dea6a86.js';
+import { d as defineCustomElement$4 } from './p-509e23d5.js';
+import { d as defineCustomElement$3 } from './p-0846f16a.js';
+import { d as defineCustomElement$2 } from './p-b145c3fa.js';
 
 const LidoRoot$1 = /*@__PURE__*/ proxyCustomElement(class LidoRoot extends H {
     constructor() {

package/dist/components/lido-row.js

@@ -1,4 +1,4 @@
-import { L as LidoRow$1, d as defineCustomElement$1 } from './p-0881da0d.js';
+import { L as LidoRow$1, d as defineCustomElement$1 } from './p-a647a4fe.js';
 
 const LidoRow = LidoRow$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-shape.js

@@ -1,4 +1,4 @@
-import { L as LidoShape$1, d as defineCustomElement$1 } from './p-78c15747.js';
+import { L as LidoShape$1, d as defineCustomElement$1 } from './p-e5d3e84e.js';
 
 const LidoShape = LidoShape$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-28c69665.js';
+import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-5dea6a86.js';
 
 const LidoSlideFill = LidoSlideFill$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-text.js

@@ -1,4 +1,4 @@
-import { L as LidoText$1, d as defineCustomElement$1 } from './p-5fbc5d57.js';
+import { L as LidoText$1, d as defineCustomElement$1 } from './p-509e23d5.js';
 
 const LidoText = LidoText$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-trace.js

@@ -1,4 +1,4 @@
-import { L as LidoTrace$1, d as defineCustomElement$1 } from './p-0514f191.js';
+import { L as LidoTrace$1, d as defineCustomElement$1 } from './p-0846f16a.js';
 
 const LidoTrace = LidoTrace$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-wrap.js

@@ -1,4 +1,4 @@
-import { L as LidoWrap$1, d as defineCustomElement$1 } from './p-1274b536.js';
+import { L as LidoWrap$1, d as defineCustomElement$1 } from './p-b145c3fa.js';
 
 const LidoWrap = LidoWrap$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-a9306687.js → p-06f1ae64.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, m as parseProp, h, j as Host } from './p-a5ae9716.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, k as handlingChildElements, l as attachSpeakIcon, m as parseProp, h, j as Host } from './p-4817b81a.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;
@@ -85,7 +85,7 @@ const LidoCell = /*@__PURE__*/ proxyCustomElement(class LidoCell extends H {
             }
         }, 50);
         if (this.showSpeakIcon) {
-            attachSpeakIcon(this.el, this.x, this.y);
+            attachSpeakIcon(this.el);
         }
     }
     /**
@@ -128,7 +128,7 @@ const LidoCell = /*@__PURE__*/ proxyCustomElement(class LidoCell extends H {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: 'bfe66118617e201c5539c90f36baafb5f3a6f4d0', 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 }, h("slot", { key: 'b3ea80bf41ea813681e35ac5704e770c5f05dcc6' })));
+        return (h(Host, { key: '9f65539e85d22f775f44c310ecd7accc5f599859', 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 }, h("slot", { key: '1c81a23db893dfc3af36f0ed98f9d5ce3cafebf3' })));
     }
     get el() { return this; }
     static get style() { return LidoCellStyle0; }

package/dist/components/{p-0514f191.js → p-0846f16a.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, T as TraceMode, d as setVisibilityWithDelay, E as speakIcon, e as convertUrlToRelative, L as LidoContainer, y as executeActions, F as triggerNextContainer, h, j as Host } from './p-a5ae9716.js';
+import { p as proxyCustomElement, H, T as TraceMode, d as setVisibilityWithDelay, E as speakIcon, e as convertUrlToRelative, L as LidoContainer, y as executeActions, F as triggerNextContainer, h, j as Host } from './p-4817b81a.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%;max-height:calc(100vh - 50px);touch-action:none}#lido-draggableCircle{cursor:pointer;fill:red;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-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;