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

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

@@ -30,6 +30,9 @@ export class LidoMathMatrix {
         this.fontColor = undefined;
         this.previousFilledSlot = -1;
         this.previousFilledSlotElement = null;
+        this.onCorrect = undefined;
+        this.onInCorrect = undefined;
+        this.onEntry = undefined;
         this.style = {};
     }
     updateValue(index) {
@@ -182,14 +185,14 @@ export class LidoMathMatrix {
     render() {
         let slotNumber = 1;
         const slotData = this.getSlotData();
-        return (h(Host, { key: '66d627c33553f3f6473c6d1b465c9af7cc6741d3', class: "math-matrix", style: {
+        return (h(Host, { key: '8232965fc3fb0b298233d21d7f50412508dc2256', class: "math-matrix", style: {
                 height: this.style.height,
                 width: this.style.width,
                 z: this.style.z,
                 display: this.style.display,
                 top: this.style.top,
                 left: this.style.left,
-            }, type: this.type, value: this.value, "tab-index": this.tabIndex, rows: this.style.rows, cols: this.style.cols, text: this.text }, Array.from({ length: parseInt(this.style.rows) + 1 }, (_, rowIndex) => (h("div", { class: "slot-parent", key: `row-${rowIndex}` }, h("div", { style: rowIndex === 0 && { visibility: 'hidden' }, class: "topIndex" }, rowIndex), Array.from({ length: parseInt(this.style.cols) }, (_, colIndex) => {
+            }, type: this.type, value: this.value, "tab-index": this.tabIndex, rows: this.style.rows, cols: this.style.cols, text: this.text, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, Array.from({ length: parseInt(this.style.rows) + 1 }, (_, rowIndex) => (h("div", { class: "slot-parent", key: `row-${rowIndex}` }, h("div", { style: rowIndex === 0 && { visibility: 'hidden' }, class: "topIndex" }, rowIndex), Array.from({ length: parseInt(this.style.cols) }, (_, colIndex) => {
             var _a, _b;
             return rowIndex === 0 ? (h("div", { class: "leftIndex" }, ++colIndex)) : (h("div", { class: `slot slot-${slotNumber} ${this.defualtFill >= slotNumber ? 'slot-active' : 'slot-inactive'}`, onClick: (ev) => this.handleClickSlot(ev.currentTarget), key: `slot-${rowIndex}-${colIndex}`, style: {
                     borderRadius: this.style.borderRadius,
@@ -249,7 +252,7 @@ export class LidoMathMatrix {
             },
             "defualtFill": {
                 "type": "number",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "number",
                     "resolved": "number",
@@ -262,7 +265,7 @@ export class LidoMathMatrix {
                     "text": "Number of slots to pre-fill as active by default"
                 },
                 "attribute": "defualt-fill",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "0"
             },
             "leftIndex": {
@@ -374,7 +377,7 @@ export class LidoMathMatrix {
             },
             "activeBgColor": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -387,12 +390,12 @@ export class LidoMathMatrix {
                     "text": "Background color for active slots"
                 },
                 "attribute": "active-bg-color",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'transparent'"
             },
             "deactiveBgColor": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -402,15 +405,15 @@ export class LidoMathMatrix {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Background color for inactive slots"
+                    "text": ""
                 },
                 "attribute": "deactive-bg-color",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'transparent'"
             },
             "border": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -423,12 +426,12 @@ export class LidoMathMatrix {
                     "text": "Border style applied to each slot"
                 },
                 "attribute": "border",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'2px solid green'"
             },
             "height": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -441,12 +444,12 @@ export class LidoMathMatrix {
                     "text": "Height of the slot container"
                 },
                 "attribute": "height",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'100%'"
             },
             "width": {
                 "type": "string",
-                "mutable": false,
+                "mutable": true,
                 "complexType": {
                     "original": "string",
                     "resolved": "string",
@@ -459,7 +462,7 @@ export class LidoMathMatrix {
                     "text": "Width of the slot container"
                 },
                 "attribute": "width",
-                "reflect": false,
+                "reflect": true,
                 "defaultValue": "'100%'"
             },
             "borderRadius": {
@@ -667,6 +670,57 @@ export class LidoMathMatrix {
                 },
                 "attribute": "font-color",
                 "reflect": false
+            },
+            "onCorrect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "on-correct",
+                "reflect": false
+            },
+            "onInCorrect": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "on-in-correct",
+                "reflect": false
+            },
+            "onEntry": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "on-entry",
+                "reflect": false
             }
         };
     }

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

@@ -66,7 +66,7 @@ export class LidoPos {
         };
     }
     render() {
-        return (h(Host, { key: '20b34af6af7a1f061789d00ade88dc79eec595ef', 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: 'dae7759306330a01ecfb66be08debe8ec1f97d6e' })));
+        return (h(Host, { key: '0eea8147ee3845668e83bed01164dce740aae785', 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: 'ca9378dc185eeb4d495ab3045d6b17424de908dc' })));
     }
     static get is() { return "lido-pos"; }
     static get originalStyleUrls() {
@@ -453,7 +453,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.)."
                 },
                 "attribute": "margin",
                 "reflect": 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

@@ -78,7 +78,7 @@ export class LidoRandom {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (h(Host, { key: '328c7a0533a52a1be5cee0d71fc7a43338e5290f', 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: 'c1a93405cbbd2a06a92134c4ff5853204215c317' })));
+        return (h(Host, { key: 'cc8bb9d31ff6c36201d266f5579288c92c05bf82', 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: 'd91a2403fa78320cbae40456dc0c86b44493bb5a' })));
     }
     static get is() { return "lido-random"; }
     static get originalStyleUrls() {
@@ -483,7 +483,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.)."
                 },
                 "attribute": "margin",
                 "reflect": false,

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

@@ -1,4 +1,5 @@
 import { h, getAssetPath } from "@stencil/core";
+import i18next from "../../utils/i18n";
 /**
  * @component LidoRoot
  *
@@ -8,6 +9,7 @@ import { h, getAssetPath } from "@stencil/core";
  */
 export class LidoRoot {
     constructor() {
+        this.locale = '';
         this.xmlPath = '';
         this.initialIndex = 0;
         this.margin = '';
@@ -23,6 +25,16 @@ export class LidoRoot {
      * Lifecycle method that runs before the component is loaded.
      * It fetches the XML data from the specified path or URL and sets it to the component's state.
      */
+    connectedCallback() {
+        this.setLanguage(this.locale);
+    }
+    onLangChange(newLang) {
+        this.setLanguage(newLang);
+    }
+    setLanguage(lang) {
+        const effectiveLang = lang || i18next.language;
+        i18next.changeLanguage(effectiveLang);
+    }
     async componentWillLoad() {
         var _a, _b;
         // Validate the xmlPath prop
@@ -62,12 +74,30 @@ 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", { initialIndex: this.initialIndex, canplay: this.canplay, xmlData: this.xmlData, baseUrl: this.baseUrl, exitButtonUrl: this.exitButtonUrl, prevButtonUrl: this.prevButtonUrl, nextButtonUrl: this.nextButtonUrl, speakerButtonUrl: this.speakerButtonUrl });
+        return h("lido-home", { showNav: true, activeContainerIndexes: [], initialIndex: this.initialIndex, canplay: this.canplay, xmlData: this.xmlData, baseUrl: this.baseUrl, exitButtonUrl: this.exitButtonUrl, prevButtonUrl: this.prevButtonUrl, nextButtonUrl: this.nextButtonUrl, speakerButtonUrl: this.speakerButtonUrl });
     }
     static get is() { return "lido-root"; }
     static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Language to apply to all texts"
+                },
+                "attribute": "locale",
+                "reflect": false,
+                "defaultValue": "''"
+            },
             "xmlPath": {
                 "type": "string",
                 "mutable": false,
@@ -116,7 +146,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.)."
                 },
                 "attribute": "margin",
                 "reflect": false,
@@ -170,7 +200,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."
                 },
                 "attribute": "exit-button-url",
                 "reflect": false
@@ -187,7 +217,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."
                 },
                 "attribute": "prev-button-url",
                 "reflect": false
@@ -204,7 +234,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."
                 },
                 "attribute": "next-button-url",
                 "reflect": false
@@ -221,7 +251,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."
                 },
                 "attribute": "speaker-button-url",
                 "reflect": false
@@ -233,4 +263,10 @@ export class LidoRoot {
             "xmlData": {}
         };
     }
+    static get watchers() {
+        return [{
+                "propName": "locale",
+                "methodName": "onLangChange"
+            }];
+    }
 }

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; */
+}

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

@@ -78,7 +78,7 @@ export class LidoRow {
         };
     }
     render() {
-        return (h(Host, { key: '4c1f45afe8866df81a6a798afe348e03fa1f4292', 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, "disable-speak": this.disableSpeak }, h("slot", { key: '194de56621025a4b1a4fdb6ccae347f34dc19fdb' })));
+        return (h(Host, { key: '2d2f701dda922276d2485e91f15c8912c90d7b8d', 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, "disable-speak": this.disableSpeak }, h("slot", { key: 'b00002ecc9d5de422094beffc33ae5137b958fa3' })));
     }
     static get is() { return "lido-row"; }
     static get originalStyleUrls() {
@@ -412,7 +412,7 @@ export class LidoRow {
                 "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
@@ -429,7 +429,7 @@ export class LidoRow {
                 "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
@@ -446,7 +446,7 @@ export class LidoRow {
                 "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
@@ -516,7 +516,7 @@ export class LidoRow {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Sets the CSS display property for the component.\nAccepts any valid CSS display value (e.g., 'block', 'flex', 'grid', 'none')."
+                    "text": "Sets the CSS display property for the component.\r\nAccepts any valid CSS display value (e.g., 'block', 'flex', 'grid', 'none')."
                 },
                 "attribute": "display",
                 "reflect": false
@@ -533,7 +533,7 @@ export class LidoRow {
                 "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,