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

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

@@ -1,100 +1,100 @@
-.lido-col {
-  /* position: absolute; */
-  top: var(--y, 0);
-  left: var(--x, 0);
-  height: var(--height, 100%);
-  width: var(--width, 100%);
-  background-color: var(--bgColor, #eeeeee);
-  /* position: relative; */
-  padding: 15px;
-  border-radius: 10px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  align-items: center;
-  
-}
-
-.lido-col > * {
-  /* position: relative; */
-}
-
-.lido-row {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  /* position: absolute; */
-}
-
-.lido-row > * {
-  /* position: relative; */
-}
-
-.lido-wrap {
-  display: grid;
-  grid-gap: 10px;
-  grid-template-columns: repeat(auto-fill, minmax(186px, auto));
-}
-
-.lido-wrap > * {
-  padding: 10px;
-  /* background-color: var(--child-bg-color, #f0f0f0); */
-  box-sizing: border-box;
-}
-
-.lido-flex {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  gap: 10px;
-}
-
-.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; /* Ensures children position within this box */
-  width: 100%;
-  height: 100%;
-}
-
-.lido-random > * {
-  position: absolute;
-}
-
-/*Scrollbar Width */
-.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;
-}
-
+.lido-col {
+  /* position: absolute; */
+  top: var(--y, 0);
+  left: var(--x, 0);
+  height: var(--height, 100%);
+  width: var(--width, 100%);
+  background-color: var(--bgColor, #eeeeee);
+  /* position: relative; */
+  padding: 15px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+  
+}
+
+.lido-col > * {
+  /* position: relative; */
+}
+
+.lido-row {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  /* position: absolute; */
+}
+
+.lido-row > * {
+  /* position: relative; */
+}
+
+.lido-wrap {
+  display: grid;
+  grid-gap: 10px;
+  grid-template-columns: repeat(auto-fill, minmax(186px, auto));
+}
+
+.lido-wrap > * {
+  padding: 10px;
+  /* background-color: var(--child-bg-color, #f0f0f0); */
+  box-sizing: border-box;
+}
+
+.lido-flex {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: flex-start;
+  gap: 10px;
+}
+
+.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; /* Ensures children position within this box */
+  width: 100%;
+  height: 100%;
+}
+
+.lido-random > * {
+  position: absolute;
+}
+
+/*Scrollbar Width */
+.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;
+}
+

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

@@ -131,7 +131,7 @@ export class LidoCell {
         this.el.className = `lido-${parseProp(this.layout, orientation)}`;
     }
     render() {
-        return (h(Host, { key: '00183a8d67c4c64eae2d2bb2e3db5def7ffe3caf', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '33fbb691c5c8f015bc9c6cf1e86c237758f126c3' })));
+        return (h(Host, { key: '0f7d35324da319917dec546cbb1f25065897bb02', id: this.id, class: "lido-cell", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, "flex-direction": this.flexDirection, "disable-speak": this.disableSpeak }, h("slot", { key: '2a337b5fae7641bbe78c5f1aa1c96e12c1281f4a' })));
     }
     static get is() { return "lido-cell"; }
     static get originalStyleUrls() {
@@ -176,7 +176,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Defines the width of the scrollbar within the cell (e.g., '14px').\nDefaults to '0px' if not specified, effectively hiding the scrollbar."
+                    "text": "Defines the width of the scrollbar within the cell (e.g., '14px').\r\nDefaults to '0px' if not specified, effectively hiding the scrollbar."
                 },
                 "attribute": "scrollbar-width",
                 "reflect": false,
@@ -356,7 +356,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The gap between child elements inside the column (CSS value, e.g., '10px', '5px 10px').\nThis is applicable when the layout is set to `wrap` or `flex`."
+                    "text": "The gap between child elements inside the column (CSS value, e.g., '10px', '5px 10px').\r\nThis is applicable when the layout is set to `wrap` or `flex`."
                 },
                 "attribute": "gap",
                 "reflect": false,
@@ -536,7 +536,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "attribute": "child-elements-length",
                 "reflect": false,
@@ -554,7 +554,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The minimum number of child elements that must be displayed inside the row.\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
+                    "text": "The minimum number of child elements that must be displayed inside the row.\r\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
                 },
                 "attribute": "min-length",
                 "reflect": false,
@@ -572,7 +572,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum number of child elements that can be displayed inside the row.\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "text": "The maximum number of child elements that can be displayed inside the row.\r\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
                 },
                 "attribute": "max-length",
                 "reflect": false,
@@ -590,7 +590,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the layout behavior of the component's children.\n\n- `wrap`: Applies a grid layout to the children, allowing them to wrap automatically in a grid format.\n- `flex`: Applies a flex layout with wrapping behavior (`flex-wrap`).\n- `col`: Arranges children in a single column using a vertical flex direction.\n- `row`: Arranges children in a single row using a horizontal flex direction.\n- `pos`: Applies absolute positioning to children, allowing manual placement using `x` and `y` values.\n- `random`: Positions child elements randomly within the container using absolute positioning.\n\nDefault: `'wrap'`"
+                    "text": "Determines the layout behavior of the component's children.\r\n\r\n- `wrap`: Applies a grid layout to the children, allowing them to wrap automatically in a grid format.\r\n- `flex`: Applies a flex layout with wrapping behavior (`flex-wrap`).\r\n- `col`: Arranges children in a single column using a vertical flex direction.\r\n- `row`: Arranges children in a single row using a horizontal flex direction.\r\n- `pos`: Applies absolute positioning to children, allowing manual placement using `x` and `y` values.\r\n- `random`: Positions child elements randomly within the container using absolute positioning.\r\n\r\nDefault: `'wrap'`"
                 },
                 "attribute": "layout",
                 "reflect": false,
@@ -644,7 +644,7 @@ export class LidoCell {
                 "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.)."
                 },
                 "attribute": "margin",
                 "reflect": false,
@@ -662,7 +662,7 @@ export class LidoCell {
                 "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.)."
                 },
                 "attribute": "padding",
                 "reflect": false,
@@ -680,7 +680,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS align-items property to control the alignment of flex items.\nExample: 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'."
+                    "text": "CSS align-items property to control the alignment of flex items.\r\nExample: 'flex-start', 'flex-end', 'center', 'baseline', 'stretch'."
                 },
                 "attribute": "align-items",
                 "reflect": false,
@@ -698,7 +698,7 @@ export class LidoCell {
                 "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."
                 },
                 "attribute": "border-radius",
                 "reflect": false,
@@ -716,7 +716,7 @@ export class LidoCell {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS flex direction for the component, which can be used to control the layout of child elements.\nAccepts values like 'row', 'column', etc."
+                    "text": "CSS flex direction for the component, which can be used to control the layout of child elements.\r\nAccepts values like 'row', 'column', etc."
                 },
                 "attribute": "flex-direction",
                 "reflect": false,

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

@@ -1,19 +1,19 @@
-.lido-col {
-  /* position: absolute; */
-  top: var(--y, 0);
-  left: var(--x, 0);
-  height: var(--height, 100%);
-  width: var(--width, 100%);
-  background-color: var(--bgColor, #eeeeee);
-  /* position: relative; */
-  padding: 15px;
-  border-radius: 10px;
-  display: flex;
-  justify-content: space-around;
-  flex-direction: column;
-  align-items: center;
-}
-
-.lido-col > * {
-  /* position: relative; */
-}
+.lido-col {
+  /* position: absolute; */
+  top: var(--y, 0);
+  left: var(--x, 0);
+  height: var(--height, 100%);
+  width: var(--width, 100%);
+  background-color: var(--bgColor, #eeeeee);
+  /* position: relative; */
+  padding: 15px;
+  border-radius: 10px;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  align-items: center;
+}
+
+.lido-col > * {
+  /* position: relative; */
+}

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

@@ -84,7 +84,7 @@ export class LidoCol {
         };
     }
     render() {
-        return (h(Host, { key: '1cf21bb1e817c9078213312aa7165423eaf54ea7', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: 'c3bc168ccccacf1425b5d93853bc27ab2962436f' })));
+        return (h(Host, { key: '7845d3364dd13cb42959f67610254ee892119c39', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, minDrops: this.minDrops, maxDrops: this.maxDrops, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, h("slot", { key: '09a68a30534c5ea83d7166acd720b4b8f23f494e' })));
     }
     static get is() { return "lido-col"; }
     static get originalStyleUrls() {
@@ -435,7 +435,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "attribute": "child-elements-length",
                 "reflect": false
@@ -452,7 +452,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The minimum number of child elements that must be displayed inside the row.\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
+                    "text": "The minimum number of child elements that must be displayed inside the row.\r\nIf `childElementsLength` is less than this value, additional elements may be shown to meet this minimum."
                 },
                 "attribute": "min-length",
                 "reflect": false
@@ -469,7 +469,7 @@ export class LidoCol {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The maximum number of child elements that can be displayed inside the row.\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
+                    "text": "The maximum number of child elements that can be displayed inside the row.\r\nIf `childElementsLength` exceeds this value, excess elements will be hidden."
                 },
                 "attribute": "max-length",
                 "reflect": false
@@ -520,7 +520,7 @@ export class LidoCol {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Applies a CSS box-shadow to the component.\nAccepts any valid CSS box-shadow value.\nExample: \"0px 4px 10px rgba(0, 0, 0, 0.1)\""
+                    "text": "Applies a CSS box-shadow to the component.\r\nAccepts any valid CSS box-shadow value.\r\nExample: \"0px 4px 10px rgba(0, 0, 0, 0.1)\""
                 },
                 "attribute": "box-shadow",
                 "reflect": false
@@ -573,7 +573,7 @@ export class LidoCol {
                 "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.)."
                 },
                 "attribute": "margin",
                 "reflect": false,

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

@@ -1,10 +1,10 @@
-.lido-container {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background-color: var(--bgColor, transparent);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
+.lido-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: var(--bgColor, transparent);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -1,5 +1,6 @@
 import { Host, h } from "@stencil/core";
 import { convertUrlToRelative, initEventsForElement, calculateScale } from "../../utils/utils";
+import i18next from "../../utils/i18n";
 /**
  * @component LidoContainer
  *
@@ -9,6 +10,7 @@ import { convertUrlToRelative, initEventsForElement, calculateScale } from "../.
  */
 export class LidoContainer {
     constructor() {
+        this.locale = '';
         this.showDropBorder = true;
         this.appendToDropOnCompletion = false;
         this.id = '';
@@ -47,6 +49,31 @@ export class LidoContainer {
         this.delayVisible = '';
         this.disableSpeak = false;
     }
+    languageChanged(newLang) {
+        const langToApply = newLang || this.resolveLanguage();
+        this.updateChildTextLanguage(langToApply);
+    }
+    componentWillLoad() {
+        const langToApply = this.resolveLanguage();
+        this.updateChildTextLanguage(langToApply);
+    }
+    resolveLanguage() {
+        var _a, _b;
+        const rootEl = this.el.closest('lido-root');
+        const rootLang = (rootEl === null || rootEl === void 0 ? void 0 : rootEl.locale) || '';
+        if (rootLang === null || rootLang === void 0 ? void 0 : rootLang.trim())
+            return rootLang;
+        const homeEl = this.el.closest('lido-home');
+        const homeLang = (homeEl === null || homeEl === void 0 ? void 0 : homeEl.locale) || '';
+        if (homeLang === null || homeLang === void 0 ? void 0 : homeLang.trim())
+            return homeLang;
+        if ((_a = this.locale) === null || _a === void 0 ? void 0 : _a.trim())
+            return this.locale;
+        const xmlLang = this.el.getAttribute('locale');
+        if (xmlLang === null || xmlLang === void 0 ? void 0 : xmlLang.trim())
+            return xmlLang;
+        return (_b = this.el.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+    }
     convertToPixels(height, parentElement = document.body) {
         if (!height)
             return 0; // Handle empty or invalid input
@@ -88,6 +115,15 @@ export class LidoContainer {
             this.el.style.width = '1600px';
         }
     }
+    updateChildTextLanguage(lang) {
+        const appliedLang = lang || i18next.language || 'en';
+        i18next.changeLanguage(appliedLang);
+        const texts = this.el.querySelectorAll('lido-text');
+        texts.forEach((textEl) => {
+            textEl.locale = appliedLang;
+            textEl.dispatchEvent(new CustomEvent('languageChanged', { bubbles: true }));
+        });
+    }
     /**
      * Lifecycle hook that runs after the component is loaded.
      * - It scales the container.
@@ -109,6 +145,8 @@ export class LidoContainer {
             styleElement.innerHTML = this.customStyle;
             document.head.appendChild(styleElement);
         }
+        const langToApply = this.resolveLanguage();
+        this.updateChildTextLanguage(langToApply);
     }
     disconnectedCallback() {
         window.removeEventListener('resize', () => this.scaleContainer(this.el));
@@ -128,7 +166,7 @@ export class LidoContainer {
             userSelect: 'none', // Prevent any field selection
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '1f61c4443b96466e2802b5550e8d999319b41ce7', id: "lido-container", "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak }, h("slot", { key: '2df61e731d3a9de3fd9cdb23f47035ee2e35c30a' })));
+        return (h(Host, { key: '5d7f2f02c5a231a18897942ea0d2f3a200efa502', id: "lido-container", locale: this.locale, "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage, "exit-button-url": this.exitButtonUrl, "prev-button-url": this.prevButtonUrl, "next-button-url": this.nextButtonUrl, "speaker-button-url": this.speakerButtonUrl, "disable-speak": this.disableSpeak }, h("slot", { key: 'b82aff47d621fc4f9d6abe5b7add974853f69219' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -143,6 +181,24 @@ export class LidoContainer {
     }
     static get properties() {
         return {
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Language to apply to all texts"
+                },
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "showDropBorder": {
                 "type": "boolean",
                 "mutable": false,
@@ -227,7 +283,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom CSS styles to be applied to the container.\nAllows for dynamic styling through inline styles or class names."
+                    "text": "Custom CSS styles to be applied to the container.\r\nAllows for dynamic styling through inline styles or class names."
                 },
                 "attribute": "custom-style",
                 "reflect": false,
@@ -623,7 +679,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if the activity should proceed automatically only after a correct response.\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
+                    "text": "Determines if the activity should proceed automatically only after a correct response.\r\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
                 },
                 "attribute": "is-allow-only-correct",
                 "reflect": false,
@@ -659,7 +715,7 @@ export class LidoContainer {
                 "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.)."
                 },
                 "attribute": "margin",
                 "reflect": false,
@@ -677,7 +733,7 @@ export class LidoContainer {
                 "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."
                 },
                 "attribute": "exit-button-url",
                 "reflect": false
@@ -694,7 +750,7 @@ export class LidoContainer {
                 "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."
                 },
                 "attribute": "prev-button-url",
                 "reflect": false
@@ -711,7 +767,7 @@ export class LidoContainer {
                 "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."
                 },
                 "attribute": "next-button-url",
                 "reflect": false
@@ -728,7 +784,7 @@ export class LidoContainer {
                 "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."
                 },
                 "attribute": "speaker-button-url",
                 "reflect": false
@@ -808,4 +864,10 @@ export class LidoContainer {
         };
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "locale",
+                "methodName": "languageChanged"
+            }];
+    }
 }

package/dist/collection/components/flashCard/lido-flash-card.css

@@ -1,28 +1,28 @@
-
-
-.card {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  transform-style: preserve-3d;
-  transition: transform 0.6s ease;
-  cursor: pointer;
-}
-
-.card.flipped {
-  transform: rotateY(180deg);
-}
-
-.card-face {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  backface-visibility: hidden;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.card-back {
-  transform: rotateY(180deg);
-}
+
+
+.card {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  transform-style: preserve-3d;
+  transition: transform 0.6s ease;
+  cursor: pointer;
+}
+
+.card.flipped {
+  transform: rotateY(180deg);
+}
+
+.card-face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  backface-visibility: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.card-back {
+  transform: rotateY(180deg);
+}