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

package/dist/components/lido-cell.js

@@ -1,4 +1,4 @@
-import { L as LidoCell$1, d as defineCustomElement$1 } from './p-29bdd953.js';
+import { L as LidoCell$1, d as defineCustomElement$1 } from './p-cb56a853.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-52844fa4.js';
+import { L as LidoCol$1, d as defineCustomElement$1 } from './p-68112f8c.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-9be56729.js';
+import { L as LidoContainer$1, d as defineCustomElement$1 } from './p-00777872.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-e4e42677.js';
+import { L as LidoFlash, d as defineCustomElement$1 } from './p-0c2aebfb.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-1fbdb431.js';
+import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-2d53e1a5.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-322acda6.js';
+import { L as LidoHome$1, d as defineCustomElement$1 } from './p-b2125fc9.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-15971ede.js';
+import { L as LidoImage$1, d as defineCustomElement$1 } from './p-8a34b98b.js';
 
 const LidoImage = LidoImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-keyboard.js

@@ -1,4 +1,4 @@
-import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-74849cdd.js';
+import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-9d34d59d.js';
 
 const LidoKeyboard = LidoKeyboard$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LidoMathMatrix$1, d as defineCustomElement$1 } from './p-08d0deab.js';
+import { L as LidoMathMatrix$1, d as defineCustomElement$1 } from './p-09f1e2d2.js';
 
 const LidoMathMatrix = LidoMathMatrix$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-d37ab4dc.js';
+import { L as LidoPos$1, d as defineCustomElement$1 } from './p-52e77394.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-3f406017.js';
+import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-06171259.js';
 
 const LidoRandom = LidoRandom$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-root.js

@@ -1,29 +1,32 @@
-import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-bed94c37.js';
-import { d as defineCustomElement$l } from './p-cbac3cbc.js';
-import { d as defineCustomElement$k } from './p-44808985.js';
-import { d as defineCustomElement$j } from './p-e36ddcc1.js';
-import { d as defineCustomElement$i } from './p-29bdd953.js';
-import { d as defineCustomElement$h } from './p-52844fa4.js';
-import { d as defineCustomElement$g } from './p-9be56729.js';
-import { d as defineCustomElement$f } from './p-e4e42677.js';
-import { d as defineCustomElement$e } from './p-1fbdb431.js';
-import { d as defineCustomElement$d } from './p-322acda6.js';
-import { d as defineCustomElement$c } from './p-15971ede.js';
-import { d as defineCustomElement$b } from './p-74849cdd.js';
-import { d as defineCustomElement$a } from './p-08d0deab.js';
-import { d as defineCustomElement$9 } from './p-d37ab4dc.js';
-import { d as defineCustomElement$8 } from './p-3f406017.js';
-import { d as defineCustomElement$7 } from './p-7f7e5672.js';
-import { d as defineCustomElement$6 } from './p-904711c8.js';
-import { d as defineCustomElement$5 } from './p-73e31a86.js';
-import { d as defineCustomElement$4 } from './p-afbc196f.js';
-import { d as defineCustomElement$3 } from './p-90465904.js';
-import { d as defineCustomElement$2 } from './p-835b973d.js';
+import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-58c67252.js';
+import { i as instance } from './p-0fbeb3a1.js';
+import { d as defineCustomElement$m } from './p-11bf64aa.js';
+import { d as defineCustomElement$l } from './p-26df0769.js';
+import { d as defineCustomElement$k } from './p-3ce3744c.js';
+import { d as defineCustomElement$j } from './p-5b5f59a8.js';
+import { d as defineCustomElement$i } from './p-cb56a853.js';
+import { d as defineCustomElement$h } from './p-68112f8c.js';
+import { d as defineCustomElement$g } from './p-00777872.js';
+import { d as defineCustomElement$f } from './p-0c2aebfb.js';
+import { d as defineCustomElement$e } from './p-2d53e1a5.js';
+import { d as defineCustomElement$d } from './p-b2125fc9.js';
+import { d as defineCustomElement$c } from './p-8a34b98b.js';
+import { d as defineCustomElement$b } from './p-9d34d59d.js';
+import { d as defineCustomElement$a } from './p-09f1e2d2.js';
+import { d as defineCustomElement$9 } from './p-52e77394.js';
+import { d as defineCustomElement$8 } from './p-06171259.js';
+import { d as defineCustomElement$7 } from './p-3f4d4c0a.js';
+import { d as defineCustomElement$6 } from './p-8f2ed62f.js';
+import { d as defineCustomElement$5 } from './p-a2f96840.js';
+import { d as defineCustomElement$4 } from './p-39a2e638.js';
+import { d as defineCustomElement$3 } from './p-a516a324.js';
+import { d as defineCustomElement$2 } from './p-c4abfd0f.js';
 
 const LidoRoot$1 = /*@__PURE__*/ proxyCustomElement(class LidoRoot extends H {
     constructor() {
         super();
         this.__registerHost();
+        this.locale = '';
         this.xmlPath = '';
         this.initialIndex = 0;
         this.margin = '';
@@ -39,6 +42,16 @@ const LidoRoot$1 = /*@__PURE__*/ proxyCustomElement(class LidoRoot extends H {
      * 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 || instance.language;
+        instance.changeLanguage(effectiveLang);
+    }
     async componentWillLoad() {
         var _a, _b;
         // Validate the xmlPath prop
@@ -78,10 +91,14 @@ const LidoRoot$1 = /*@__PURE__*/ proxyCustomElement(class LidoRoot extends H {
             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 assetsDirs() { return ["assets"]; }
+    static get watchers() { return {
+        "locale": ["onLangChange"]
+    }; }
 }, [0, "lido-root", {
+        "locale": [1],
         "xmlPath": [1, "xml-path"],
         "initialIndex": [2, "initial-index"],
         "margin": [1],
@@ -92,12 +109,14 @@ const LidoRoot$1 = /*@__PURE__*/ proxyCustomElement(class LidoRoot extends H {
         "nextButtonUrl": [1, "next-button-url"],
         "speakerButtonUrl": [1, "speaker-button-url"],
         "xmlData": [32]
+    }, undefined, {
+        "locale": ["onLangChange"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["lido-root", "lido-avatar", "lido-balance", "lido-calculator", "lido-cell", "lido-col", "lido-container", "lido-flash-card", "lido-float", "lido-home", "lido-image", "lido-keyboard", "lido-math-matrix", "lido-pos", "lido-random", "lido-row", "lido-shape", "lido-slide-fill", "lido-text", "lido-trace", "lido-wrap"];
+    const components = ["lido-root", "lido-avatar", "lido-balance", "lido-calculator", "lido-canvas", "lido-cell", "lido-col", "lido-container", "lido-flash-card", "lido-float", "lido-home", "lido-image", "lido-keyboard", "lido-math-matrix", "lido-pos", "lido-random", "lido-row", "lido-shape", "lido-slide-fill", "lido-text", "lido-trace", "lido-wrap"];
     components.forEach(tagName => { switch (tagName) {
         case "lido-root":
             if (!customElements.get(tagName)) {
@@ -106,15 +125,20 @@ function defineCustomElement$1() {
             break;
         case "lido-avatar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$l();
+                defineCustomElement$m();
             }
             break;
         case "lido-balance":
             if (!customElements.get(tagName)) {
-                defineCustomElement$k();
+                defineCustomElement$l();
             }
             break;
         case "lido-calculator":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "lido-canvas":
             if (!customElements.get(tagName)) {
                 defineCustomElement$j();
             }

package/dist/components/lido-row.js

@@ -1,4 +1,4 @@
-import { L as LidoRow$1, d as defineCustomElement$1 } from './p-7f7e5672.js';
+import { L as LidoRow$1, d as defineCustomElement$1 } from './p-3f4d4c0a.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-904711c8.js';
+import { L as LidoShape$1, d as defineCustomElement$1 } from './p-8f2ed62f.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-73e31a86.js';
+import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-a2f96840.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-afbc196f.js';
+import { L as LidoText$1, d as defineCustomElement$1 } from './p-39a2e638.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-90465904.js';
+import { L as LidoTrace$1, d as defineCustomElement$1 } from './p-a516a324.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-835b973d.js';
+import { L as LidoWrap$1, d as defineCustomElement$1 } from './p-c4abfd0f.js';
 
 const LidoWrap = LidoWrap$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-9be56729.js → p-00777872.js}

@@ -1,4 +1,5 @@
-import { p as proxyCustomElement, H, t as calculateScale, e as convertUrlToRelative, i as initEventsForElement, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, t as calculateScale, e as convertUrlToRelative, i as initEventsForElement, h, j as Host } from './p-58c67252.js';
+import { i as instance } from './p-0fbeb3a1.js';
 
 const lidoContainerCss = ".lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, transparent);display:flex;flex-direction:column;justify-content:center;align-items:center}";
 const LidoContainerStyle0 = lidoContainerCss;
@@ -7,6 +8,7 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
     constructor() {
         super();
         this.__registerHost();
+        this.locale = '';
         this.showDropBorder = true;
         this.appendToDropOnCompletion = false;
         this.id = '';
@@ -45,6 +47,31 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
         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
@@ -86,6 +113,15 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
             this.el.style.width = '1600px';
         }
     }
+    updateChildTextLanguage(lang) {
+        const appliedLang = lang || instance.language || 'en';
+        instance.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.
@@ -107,6 +143,8 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
             styleElement.innerHTML = this.customStyle;
             document.head.appendChild(styleElement);
         }
+        const langToApply = this.resolveLanguage();
+        this.updateChildTextLanguage(langToApply);
     }
     disconnectedCallback() {
         window.removeEventListener('resize', () => this.scaleContainer(this.el));
@@ -126,11 +164,15 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
             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' })));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "locale": ["languageChanged"]
+    }; }
     static get style() { return LidoContainerStyle0; }
 }, [4, "lido-container", {
+        "locale": [1],
         "showDropBorder": [4, "show-drop-border"],
         "appendToDropOnCompletion": [4, "append-to-drop-on-completion"],
         "id": [1],
@@ -168,6 +210,8 @@ const LidoContainer = /*@__PURE__*/ proxyCustomElement(class LidoContainer exten
         "showNextButton": [1, "show-next-button"],
         "delayVisible": [1, "delay-visible"],
         "disableSpeak": [4, "disable-speak"]
+    }, undefined, {
+        "locale": ["languageChanged"]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/{p-3f406017.js → p-06171259.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, r as attachSpeakIcon, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, r as attachSpeakIcon, h, j as Host } from './p-58c67252.js';
 
 const lidoRandomCss = ".lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}";
 const LidoRandomStyle0 = lidoRandomCss;
@@ -76,7 +76,7 @@ const LidoRandom = /*@__PURE__*/ proxyCustomElement(class LidoRandom extends H {
             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' })));
     }
     get el() { return this; }
     static get style() { return LidoRandomStyle0; }

package/dist/components/{p-08d0deab.js → p-09f1e2d2.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, i as initEventsForElement, e as convertUrlToRelative, k as parseProp, T as validateObjectiveStatus, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, i as initEventsForElement, e as convertUrlToRelative, k as parseProp, T as validateObjectiveStatus, h, j as Host } from './p-58c67252.js';
 
 const lidoMathMatrixCss = ".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{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'}";
 const LidoMathMatrixStyle0 = lidoMathMatrixCss;
@@ -35,6 +35,9 @@ const LidoMathMatrix = /*@__PURE__*/ proxyCustomElement(class LidoMathMatrix ext
         this.fontColor = undefined;
         this.previousFilledSlot = -1;
         this.previousFilledSlotElement = null;
+        this.onCorrect = undefined;
+        this.onInCorrect = undefined;
+        this.onEntry = undefined;
         this.style = {};
     }
     updateValue(index) {
@@ -187,14 +190,14 @@ const LidoMathMatrix = /*@__PURE__*/ proxyCustomElement(class LidoMathMatrix ext
     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,
@@ -208,18 +211,18 @@ const LidoMathMatrix = /*@__PURE__*/ proxyCustomElement(class LidoMathMatrix ext
 }, [0, "lido-math-matrix", {
         "rows": [1],
         "cols": [1],
-        "defualtFill": [2, "defualt-fill"],
+        "defualtFill": [1538, "defualt-fill"],
         "leftIndex": [4, "left-index"],
         "topIndex": [4, "top-index"],
         "bottomIndex": [4, "bottom-index"],
         "clickable": [4],
         "activeOnlyVisible": [4, "active-only-visible"],
         "matrixImage": [1, "matrix-image"],
-        "activeBgColor": [1, "active-bg-color"],
-        "deactiveBgColor": [1, "deactive-bg-color"],
-        "border": [1],
-        "height": [1],
-        "width": [1],
+        "activeBgColor": [1537, "active-bg-color"],
+        "deactiveBgColor": [1537, "deactive-bg-color"],
+        "border": [1537],
+        "height": [1537],
+        "width": [1537],
         "borderRadius": [1, "border-radius"],
         "z": [1],
         "margin": [1],
@@ -232,6 +235,9 @@ const LidoMathMatrix = /*@__PURE__*/ proxyCustomElement(class LidoMathMatrix ext
         "x": [1],
         "y": [1],
         "fontColor": [1, "font-color"],
+        "onCorrect": [1, "on-correct"],
+        "onInCorrect": [1, "on-in-correct"],
+        "onEntry": [1, "on-entry"],
         "previousFilledSlot": [32],
         "previousFilledSlotElement": [32],
         "style": [32]

package/dist/components/{p-e4e42677.js → p-0c2aebfb.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, k as parseProp, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, k as parseProp, d as setVisibilityWithDelay, i as initEventsForElement, h, j as Host } from './p-58c67252.js';
 
 const lidoFlashCardCss = ".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)}";
 const LidoFlashCardStyle0 = lidoFlashCardCss;
@@ -76,7 +76,7 @@ const LidoFlash = /*@__PURE__*/ proxyCustomElement(class LidoFlash extends H {
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: 'df221d302a1e91eb995af2f70aa69957cb769ffe', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'd799a3525d9af4ba98d7750a3a76a313dd9cdd76', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'fb7734ca5648e2cf8a91d551b383a5c2c3eae255', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '6071da403b17a079f80f0c5dd576dac7b5a2c357', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: 'b8f000d4e9d04d9954f81dc7e05b109dc16cb223', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: this.handleFlip, "disable-speak": this.disableSpeak }, h("div", { key: 'cea63b67d1b6a925ab0520eaa7c5166288bcd71e', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '3517e09bb91ac4c6fb2c066539f2d4f51436938f', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '5a14a4ab70898852046f1128c99e5a285c1c37f7', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     get el() { return this; }
     static get watchers() { return {