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

package/dist/collection/utils/utilsHandlers/highlightHandler.js

@@ -6,32 +6,32 @@ export function showWrongAnswerAnimation(elements) {
     if (!document.querySelector(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-          @keyframes enhanced-shake {
-              0% { left: 0; }
-              10% { left: -8px; }
-              20% { left: 8px; }
-              30% { left: -8px; }
-              40% { left: 8px; }
-              50% { left: -6px; }
-              60% { left: 6px; }
-              70% { left: -4px; }
-              80% { left: 4px; }
-              90% { left: -2px; }
-              100% { left: 0; }
-          }
-
-          
-          .wrong-answer {
-              position: relative; /* Enable relative positioning to move the element */
-              animation: enhanced-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
-              background-color: #ffdddd; /* Flash red background to indicate wrong answer */
-              box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red shadow */
-
-              border: 4px solid red;
-          }
-
-          
+        style.innerHTML = `
+          @keyframes enhanced-shake {
+              0% { left: 0; }
+              10% { left: -8px; }
+              20% { left: 8px; }
+              30% { left: -8px; }
+              40% { left: 8px; }
+              50% { left: -6px; }
+              60% { left: 6px; }
+              70% { left: -4px; }
+              80% { left: 4px; }
+              90% { left: -2px; }
+              100% { left: 0; }
+          }
+
+          
+          .wrong-answer {
+              position: relative; /* Enable relative positioning to move the element */
+              animation: enhanced-shake 0.6s cubic-bezier(0.36, 0.07, 0.19, 0.97);
+              background-color: #ffdddd; /* Flash red background to indicate wrong answer */
+              box-shadow: 0 0 10px rgba(255, 0, 0, 0.5); /* Subtle red shadow */
+
+              border: 4px solid red;
+          }
+
+          
       `;
         document.head.appendChild(style);
     }
@@ -59,34 +59,34 @@ export function highlightSpeakingElement(element) {
     if (!document.querySelector(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
     `;
         document.head.appendChild(style);
     }

package/dist/collection/utils/utilsHandlers/lidoBalanceHandler.js

@@ -55,8 +55,8 @@ export function balanceResult(container, objectiveString) {
         return false;
     const leftVal = Number((_c = (_a = balanceEl.leftVal) !== null && _a !== void 0 ? _a : (_b = balanceEl.dataset) === null || _b === void 0 ? void 0 : _b.leftVal) !== null && _c !== void 0 ? _c : 0);
     const rightVal = Number((_f = (_d = balanceEl.rightVal) !== null && _d !== void 0 ? _d : (_e = balanceEl.dataset) === null || _e === void 0 ? void 0 : _e.rightVal) !== null && _f !== void 0 ? _f : 0);
-    const hasLeft = !isNaN(leftVal) && leftVal !== 0;
-    const hasRight = !isNaN(rightVal) && rightVal !== 0;
+    const hasLeft = !isNaN(leftVal);
+    const hasRight = !isNaN(rightVal);
     if (!hasLeft || !hasRight) {
         return false;
     }

package/dist/collection/utils/utilsHandlers/lidoCalculatorHandler.js

@@ -2,15 +2,15 @@ import { triggerNextContainer } from "../utils";
 // Helper to animate and remove the active equation cell
 const animationToRemoveEquationSolvedCellForNimbleTable = (activeCell, allCalculateTypes) => {
     return new Promise((resolve) => {
-        const keyframes = `
-      @keyframes widthDecrease {
-        0% { 
-          background-color: ${activeCell.style.backgroundColor};
-          height: ${activeCell.style.height};
-          margin: ${activeCell.style.margin};
-          ${activeCell.innerHTML = ""}
-        }
-        100% { background-color: transparent; height: 0px; margin: 0px; }
+        const keyframes = `
+      @keyframes widthDecrease {
+        0% { 
+          background-color: ${activeCell.style.backgroundColor};
+          height: ${activeCell.style.height};
+          margin: ${activeCell.style.margin};
+          ${activeCell.innerHTML = ""}
+        }
+        100% { background-color: transparent; height: 0px; margin: 0px; }
       }`;
         const styleSheet = document.styleSheets[0];
         styleSheet.insertRule(keyframes, styleSheet.cssRules.length);

package/dist/collection/utils/utilsHandlers/sortHandler.js

@@ -156,11 +156,11 @@ export function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -370,11 +370,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');

package/dist/components/index.js

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

package/dist/components/lido-avatar.js

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

package/dist/components/lido-balance.js

@@ -1,4 +1,4 @@
-import { L as LidoBalance$1, d as defineCustomElement$1 } from './p-44808985.js';
+import { L as LidoBalance$1, d as defineCustomElement$1 } from './p-6ba0f1af.js';
 
 const LidoBalance = LidoBalance$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-calculator.js

@@ -1,4 +1,4 @@
-import { L as LidoCalculator$1, d as defineCustomElement$1 } from './p-e36ddcc1.js';
+import { L as LidoCalculator$1, d as defineCustomElement$1 } from './p-56c8f3da.js';
 
 const LidoCalculator = LidoCalculator$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-canvas.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface LidoCanvas extends Components.LidoCanvas, HTMLElement {}
+export const LidoCanvas: {
+    prototype: LidoCanvas;
+    new (): LidoCanvas;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/lido-canvas.js

@@ -0,0 +1,6 @@
+import { W as WritingPad, d as defineCustomElement$1 } from './p-1c84cf65.js';
+
+const LidoCanvas = WritingPad;
+const defineCustomElement = defineCustomElement$1;
+
+export { LidoCanvas, defineCustomElement };

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-d3f7d561.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-6be6c5eb.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-e9548986.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-4fd6b588.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-12432f23.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-c8815e84.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-b89371ac.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-1f3c2783.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-74b90a9c.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-988477ad.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-b7efadad.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-d0131159.js';
+import { i as instance } from './p-0fbeb3a1.js';
+import { d as defineCustomElement$m } from './p-62d2a5b3.js';
+import { d as defineCustomElement$l } from './p-6ba0f1af.js';
+import { d as defineCustomElement$k } from './p-56c8f3da.js';
+import { d as defineCustomElement$j } from './p-1c84cf65.js';
+import { d as defineCustomElement$i } from './p-d3f7d561.js';
+import { d as defineCustomElement$h } from './p-6be6c5eb.js';
+import { d as defineCustomElement$g } from './p-e9548986.js';
+import { d as defineCustomElement$f } from './p-4fd6b588.js';
+import { d as defineCustomElement$e } from './p-12432f23.js';
+import { d as defineCustomElement$d } from './p-c8815e84.js';
+import { d as defineCustomElement$c } from './p-b89371ac.js';
+import { d as defineCustomElement$b } from './p-1f3c2783.js';
+import { d as defineCustomElement$a } from './p-74b90a9c.js';
+import { d as defineCustomElement$9 } from './p-988477ad.js';
+import { d as defineCustomElement$8 } from './p-b7efadad.js';
+import { d as defineCustomElement$7 } from './p-a8724f06.js';
+import { d as defineCustomElement$6 } from './p-bb907e43.js';
+import { d as defineCustomElement$5 } from './p-04e904b5.js';
+import { d as defineCustomElement$4 } from './p-bef96764.js';
+import { d as defineCustomElement$3 } from './p-d7693f47.js';
+import { d as defineCustomElement$2 } from './p-caa05d1e.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-a8724f06.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-bb907e43.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-04e904b5.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-bef96764.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-d7693f47.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-caa05d1e.js';
 
 const LidoWrap = LidoWrap$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-73e31a86.js → p-04e904b5.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, U as fraction, h, j as Host } from './p-bed94c37.js';
+import { p as proxyCustomElement, H, e as convertUrlToRelative, d as setVisibilityWithDelay, i as initEventsForElement, k as parseProp, U as fraction, h, j as Host } from './p-d0131159.js';
 
 const lidoSlideFillCss = ".svg-element,svg{width:100%;height:100%}";
 const LidoSlideFillStyle0 = lidoSlideFillCss;
@@ -63,13 +63,13 @@ const LidoSlideFill = /*@__PURE__*/ proxyCustomElement(class LidoSlideFill exten
                 const id = pathIndex === 1 ? 'glassPath' : pathIndex === 2 ? 'rulerPath' : `path${pathIndex}`;
                 return `<path id="${id}"${attrs}>`;
             });
-            const clipPathDef = `
-        <clipPath id="clipGlass">
-          <use xlink:href="#glassPath" />
-        </clipPath>
+            const clipPathDef = `
+        <clipPath id="clipGlass">
+          <use xlink:href="#glassPath" />
+        </clipPath>
       `;
-            svgText = svgText.replace(/<svg([^>]*)>/, `<svg$1>
-          ${clipPathDef}
+            svgText = svgText.replace(/<svg([^>]*)>/, `<svg$1>
+          ${clipPathDef}
         `);
             svgText = svgText.replace(/<rect([^>]*)\/?>/, `<rect id="fillArea" $1 clip-path="url(#clipGlass)" />`);
             this.svgContent = svgText;
@@ -194,7 +194,7 @@ const LidoSlideFill = /*@__PURE__*/ proxyCustomElement(class LidoSlideFill exten
         }
     }
     render() {
-        return (h(Host, { key: '57ee54a6a0e7d3bbac893ce535a3375ea529e75a', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '386330e0562851f2f00aba169018c23bf5ffa4b7', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: '3918ed476b3de4977c53ff0bf576253f68e8c84f', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: this.style, min: this.min, max: this.max, division: this.division, numberType: this.numberType, onEntry: this.onEntry, type: this.type, "disable-speak": this.disableSpeak }, h("div", { key: '8f54b0e5de490a162aaa1d7ac9ed485d1628c484', innerHTML: this.svgContent, class: "svg-element" })));
     }
     get el() { return this; }
     static get watchers() { return {