lido-player 0.0.2-beta-24 → 0.0.2-beta-26-dev

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

@@ -2,7 +2,7 @@ import { h, Host, getAssetPath } from "@stencil/core";
 import JSZip from "jszip";
 import GameScore, { SelectedValuesKey, NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, LIDO_COMMON_AUDIO_PATH, TemplateID, } from "../../utils/constants";
 import { dispatchActivityChangeEvent, dispatchGameExitEvent } from "../../utils/customEvents";
-import { calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative, triggerNextContainer, matchStringPattern, setActiveZipAssets, clearActiveZipAssets, } from "../../utils/utils";
+import { calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer, convertUrlToRelative, triggerNextContainer, matchStringPattern, setActiveZipAssets, clearActiveZipAssets, resetGoodJobAudioTracking, getGoodJobAudio, } from "../../utils/utils";
 import { AudioPlayer } from "../../utils/audioPlayer";
 import { generateUUIDFallback } from "../../utils/utils";
 import i18next from "../../utils/i18n";
@@ -212,8 +212,8 @@ export class LidoHome {
     }
     translateHomeText(key) {
         var _a;
-        const lang = (_a = this.Lang) === null || _a === void 0 ? void 0 : _a.trim();
-        return lang ? i18next.getFixedT(lang)(key) : i18next.t(key);
+        const lang = ((_a = this.Lang) === null || _a === void 0 ? void 0 : _a.trim()) || i18next.language || 'en';
+        return i18next.getFixedT(lang)(key);
     }
     onCommonAudioPathChange(path) {
         this.publishCommonAudioPath(path);
@@ -223,6 +223,7 @@ export class LidoHome {
      * between containers and parses the XML data into containers.
      */
     async componentWillLoad() {
+        resetGoodJobAudioTracking(this.el);
         // Publish the current player's common-audio path before parsing XML so
         // child lido-text components cannot resolve auto-audio against the
         // previous player's global path.
@@ -553,10 +554,7 @@ export class LidoHome {
         })
             .filter(Boolean);
         if (tagName === 'lido-text' && props.string) {
-            props.string = i18next.t(props.string);
-        }
-        if (tagName === 'lido-text' && props.string) {
-            props.string = i18next.t(props.string);
+            props.string = this.translateHomeText(props.string);
         }
         // Map XML tags to Stencil components
         const componentMapping = {
@@ -618,7 +616,7 @@ export class LidoHome {
         });
     }
     async btnpopup(runId) {
-        var _a, _b;
+        var _a, _b, _c;
         const isStale = () => runId !== this.btnpopupRunId;
         const container = document.getElementById(LidoContainer);
         if (isStale())
@@ -668,11 +666,37 @@ export class LidoHome {
                     break;
             }
         }
+        if (getCancelBtnPopup() || isStale())
+            return;
+        if (templateId === 'flashcardtemplate') {
+            const flashCard = this.el.querySelector('lido-flash-card');
+            await ((_a = flashCard === null || flashCard === void 0 ? void 0 : flashCard.replayGoodJobAudio) === null || _a === void 0 ? void 0 : _a.call(flashCard));
+            if (isStale())
+                return;
+        }
+        if (templateId === 'storyTale') {
+            const pageGoodJob = container.querySelector('#arrow1');
+            if (pageGoodJob) {
+                const originalAudio = pageGoodJob.getAttribute('data-lido-original-audio')
+                    || pageGoodJob.getAttribute('audio')
+                    || undefined;
+                const localizedAudio = getGoodJobAudio(pageGoodJob);
+                if (localizedAudio) {
+                    if (!pageGoodJob.hasAttribute('data-lido-original-audio') && originalAudio) {
+                        pageGoodJob.setAttribute('data-lido-original-audio', originalAudio);
+                    }
+                    pageGoodJob.setAttribute('audio', localizedAudio);
+                }
+                await AudioPlayer.getI().play(pageGoodJob, false, undefined, originalAudio);
+                if (isStale())
+                    return;
+            }
+        }
         if (isStale())
             return;
         if (this.areAllDropsFilled()) {
             const objectiveString = container['objective'];
-            const objectiveArray = (_b = JSON.parse((_a = container.getAttribute(SelectedValuesKey)) !== null && _a !== void 0 ? _a : '[]')) !== null && _b !== void 0 ? _b : [];
+            const objectiveArray = (_c = JSON.parse((_b = container.getAttribute(SelectedValuesKey)) !== null && _b !== void 0 ? _b : '[]')) !== null && _c !== void 0 ? _c : [];
             const res = matchStringPattern(objectiveString, objectiveArray);
             if (res) {
                 triggerNextContainer();
@@ -995,7 +1019,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Exit button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Exit button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1014,7 +1038,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Previous button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Previous button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1033,7 +1057,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Next button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Next button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1052,7 +1076,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Speaker button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Speaker button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -1090,7 +1114,7 @@ export class LidoHome {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Unique identifier for the component instance.\nIf not provided, a UUID is generated to ensure uniqueness."
+                    "text": "Unique identifier for the component instance.\r\nIf not provided, a UUID is generated to ensure uniqueness."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,17 +1,17 @@
-.lido-image {
-  user-select: none;
-  -webkit-user-drag: none;
-  object-fit: contain;
-  width: 100% !important;
-  height: 100% !important;
-  aspect-ratio: 1 / 1; /* Ensures the image retains a 1:1 aspect ratio
-  /* The image will scale to fit within its container, keeping the aspect ratio */
-  transform: rotate(0) !important;
-  margin: 0 !important;
-}
-
-.slice {
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
-}
+.lido-image {
+  user-select: none;
+  -webkit-user-drag: none;
+  object-fit: contain;
+  width: 100% !important;
+  height: 100% !important;
+  aspect-ratio: 1 / 1; /* Ensures the image retains a 1:1 aspect ratio
+  /* The image will scale to fit within its container, keeping the aspect ratio */
+  transform: rotate(0) !important;
+  margin: 0 !important;
+}
+
+.slice {
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: 100% 100%;
+}

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

@@ -552,7 +552,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Specifies the width for border-image slice (e.g., \"30px\", \"2em\").\nOnly used when `isSlice` is enabled."
+                    "text": "Specifies the width for border-image slice (e.g., \"30px\", \"2em\").\r\nOnly used when `isSlice` is enabled."
                 },
                 "getter": false,
                 "setter": false,
@@ -612,7 +612,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -632,7 +632,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS padding value applied to each child element inside the container.\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS padding value applied to each child element inside the container.\r\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -652,7 +652,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS filter to apply visual effects (e.g., blur, brightness) to the image.\nExample: 'blur(5px)', 'brightness(0.8)', 'grayscale(100%)'"
+                    "text": "CSS filter to apply visual effects (e.g., blur, brightness) to the image.\r\nExample: 'blur(5px)', 'brightness(0.8)', 'grayscale(100%)'"
                 },
                 "getter": false,
                 "setter": false,
@@ -672,7 +672,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS filter to apply border radius to the image.\nExample: '10px' for  images."
+                    "text": "CSS filter to apply border radius to the image.\r\nExample: '10px' for  images."
                 },
                 "getter": false,
                 "setter": false,
@@ -692,7 +692,7 @@ export class LidoImage {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS transform property to apply transformations like rotate, scale, translate, etc.\nExample: 'rotate(45deg)' or 'scale(1.2)'."
+                    "text": "CSS transform property to apply transformations like rotate, scale, translate, etc.\r\nExample: 'rotate(45deg)' or 'scale(1.2)'."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,38 +1,38 @@
-.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;
-}
+.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;
+}

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

@@ -139,10 +139,10 @@ export class LidoKeyboard {
         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: '5773e8189c512e90d63217048f9372d00e4a7fe9', 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: '136fa3a2b0459a9a63e14ac8e212997e4bd32224', class: "input-area" }, h("input", { key: 'd9a1dc064d615b40b1e0e2b008dbf79ec70eb19b', type: "text", value: this.inputString, class: "input-area", readonly: true }), h("lido-text", { key: 'e6c53ea590c607b355d1f57d445d078c0bcf9085', 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: '4de3b75fa2905744ad610d147d9b4fe9912dd732', 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: '7b5d293c52747700cde9c1069cfbbdae065e64f9', class: "input-area" }, h("input", { key: '03a91cd87e6bb4f09bf698087258426dd9232f67', type: "text", value: this.inputString, class: "input-area", readonly: true }), h("lido-text", { key: 'd30e033a055df52b30b2f2775c2b3410ee37df63', 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: '815877bd027aa3540871c511df5937cfb0b6f149', 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: '73c08eac4f9c154f47371e812fb337de26b10691', 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: '1e7855724f15fdb432320f6186fc356518a29224', class: "keyboard-wrapper", style: {
+            } }), h("lido-text", { key: '70d78aed7dedbe7d03a05c13c4c320029280bb03', 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: '19306cd12bd98dc8dc7b54b20bad3f2f0318116f', 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: '826900d6ba26175eb45d2e7e4c02fccce2004db3', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',
@@ -514,7 +514,7 @@ export class LidoKeyboard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether the keyboard input is enabled.\nWhen set to `true`, the component will respond to keyboard events."
+                    "text": "Indicates whether the keyboard input is enabled.\r\nWhen set to `true`, the component will respond to keyboard events."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,56 +1,56 @@
-.math-matrix {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-}
-
-.slot {
-  width: 100%;
-  height: 100%;
-  text-align: center;
-  align-content: center;
-  font-size: 42px;
-  font-weight: 800;
-  font-family: 'Baloo Bhai 2';
-  box-sizing: content-box;
-}
-
-.slot:hover {
-  /* background-color: rgba(0, 0, 0, 0.116); */
-  opacity: 0.7;
-}
-
-.slot-parent {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-
-.slot-active {
-  background-color: var(--active-bg-color);
-  background-image: var(--bg-image);
-  background-size: contain;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.slot-inactive {
-  background-color: var(--deactive-bg-color);
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-}
-
-.topIndex, .leftIndex, .bottomIndex {
-  height: 100%;
-  width: 100%;
-  text-align: center;
-  align-content: center;
-  font-size: 30px;
-  font-weight: 600;
-  font-family: 'Baloo Bhai 2';
-}
+.math-matrix {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.slot {
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  align-content: center;
+  font-size: 42px;
+  font-weight: 800;
+  font-family: 'Baloo Bhai 2';
+  box-sizing: content-box;
+}
+
+.slot:hover {
+  /* background-color: rgba(0, 0, 0, 0.116); */
+  opacity: 0.7;
+}
+
+.slot-parent {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+}
+
+.slot-active {
+  background-color: var(--active-bg-color);
+  background-image: var(--bg-image);
+  background-size: contain;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.slot-inactive {
+  background-color: var(--deactive-bg-color);
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.topIndex, .leftIndex, .bottomIndex {
+  height: 100%;
+  width: 100%;
+  text-align: center;
+  align-content: center;
+  font-size: 30px;
+  font-weight: 600;
+  font-family: 'Baloo Bhai 2';
+}

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

@@ -209,7 +209,7 @@ export class LidoMathMatrix {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: '2ef30835855363ba9fc7932122d1d505a451e055', class: "math-matrix", style: {
+        return (h(Host, { key: '8a17727416da00fda95c401c3a005cdea1e732d0', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,

package/dist/collection/components/position/lido-pos.css

@@ -1,16 +1,16 @@
-.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-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;
+}

package/dist/collection/components/position/lido-pos.js

@@ -131,7 +131,7 @@ export class LidoPos {
         };
     }
     render() {
-        return (h(Host, { key: '4c417a789cc167f7d701b8469890631f9871fe6f', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'd5026f61804b53e63aa1cc6c15b3de91543cf426' })));
+        return (h(Host, { key: 'cfd38900b31991e89c21a099fc4f91f77663ae94', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '73f7bfe2d8214693d6f40a4dab6d735906ad4eaa' })));
     }
     static get is() { return "lido-pos"; }
     static get originalStyleUrls() {
@@ -558,7 +558,7 @@ export class LidoPos {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,9 +1,9 @@
-.lido-random {
-  position: relative; /* Ensures children position within this box */
-  width: 100%;
-  height: 100%;
-}
-
-.lido-random > * {
-  position: absolute;
+.lido-random {
+  position: relative; /* Ensures children position within this box */
+  width: 100%;
+  height: 100%;
+}
+
+.lido-random > * {
+  position: absolute;
 }

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

@@ -142,7 +142,7 @@ export class LidoRandom {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (h(Host, { key: 'e0ed354e54ea3c5112d0e068b2a94356ef437874', 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: 'ed0386cda3ba55d89fb08607775a49a4180f08b3' })));
+        return (h(Host, { key: 'a4cec45d407b57833a4296a20230717534adf39b', 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: 'b80726b68b7f1c009f35352b9d05cd573159f87b' })));
     }
     static get is() { return "lido-random"; }
     static get originalStyleUrls() {
@@ -589,7 +589,7 @@ export class LidoRandom {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -87,7 +87,7 @@ export class LidoRoot {
             return h("div", null, "Error loading XML data. Please check the path or URL.");
         }
         // Once the XML data is loaded, pass it to the `lido-home` component
-        return (h("lido-home", Object.assign({ showNav: true, activeContainerIndexes: [], initialIndex: this.initialIndex, canplay: this.canplay, xmlData: this.xmlData, baseUrl: this.baseUrl }, (this.zipUrl ? { zipUrl: this.zipUrl } : {}), { exitButtonUrl: this.exitButtonUrl, prevButtonUrl: this.prevButtonUrl, nextButtonUrl: this.nextButtonUrl, speakerButtonUrl: this.speakerButtonUrl })));
+        return (h("lido-home", Object.assign({ showNav: true, activeContainerIndexes: [], initialIndex: this.initialIndex, canplay: this.canplay, Lang: this.Lang, xmlData: this.xmlData, baseUrl: this.baseUrl }, (this.zipUrl ? { zipUrl: this.zipUrl } : {}), { exitButtonUrl: this.exitButtonUrl, prevButtonUrl: this.prevButtonUrl, nextButtonUrl: this.nextButtonUrl, speakerButtonUrl: this.speakerButtonUrl })));
     }
     static get is() { return "lido-root"; }
     static get assetsDirs() { return ["assets"]; }
@@ -165,7 +165,7 @@ export class LidoRoot {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -245,7 +245,7 @@ export class LidoRoot {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Exit button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Exit button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -264,7 +264,7 @@ export class LidoRoot {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Previous button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Previous button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -283,7 +283,7 @@ export class LidoRoot {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Next button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Next button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,
@@ -302,7 +302,7 @@ export class LidoRoot {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom URL for the Speaker button icon.\nFalls back to the default icon if not provided or invalid."
+                    "text": "Custom URL for the Speaker button icon.\r\nFalls back to the default icon if not provided or invalid."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,10 +1,10 @@
-.lido-row {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  /* position: absolute; */
-}
-
-.lido-row > * {
-  /* position: relative; */
-}
+.lido-row {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  /* position: absolute; */
+}
+
+.lido-row > * {
+  /* position: relative; */
+}