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

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: 'd456c09ab61fd1674f001f939f2b27a089806f44', 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: 'ca5a14fcc51d2b6a1756772b358e4654d8aee761' })));
     }
     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: 'a85f168b0399fe5745439ad9d16d77965d1f7a39', 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: '69dd6da05d9855b18ba475cee27e523c4c2e6291' })));
     }
     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: '0c2548741cde2b82c2add3e1a60cbd68905ffede', 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: 'bc2c6f95f984e82bdb905f850d4ad23c11183697' })));
     }
     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,

package/dist/collection/components/scale/lido-balance.css

@@ -1,114 +1,145 @@
-#lido-balance {
-  position: relative;
-  height: 500px;
-  width: 1205px;
-  top: 20%;
-  left: -91px;
-  z-index: 0;
-}
-
-.lido-balance-symbol {
-  position: absolute;
-  top: 64%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 5vw;     
-  font-weight: bold;
-  color: black;
-  pointer-events: none;
-  z-index: 999;
-}
-
-@media (orientation: portrait) {
-  #pivotimg {
-  position: absolute;
-  height:auto;
-  width: 23%;
-  bottom: 18%;     
-  left: 38%;
-  z-index: 100;
-    
-  }
-}
-
-
-@media (orientation: landscape) {
-  #pivotimg {
-    position: absolute;
-    height:auto;
-    width: 23%;
-    bottom: 8%;     
-  left: 38%;
-  z-index: 100;
-  }
-}
-
-.lido-balance .pivot svg {
-  width: 100%;
-  height: auto;
-}
-
-
-#scaleimg {
-  position: absolute;
-  width: 73%;
-  height: auto;
-  top: 61%;
-  left: 14%;
-  z-index: 90;
-}
-.lido-balance .scale svg {
-  width: 100%;
-  height: auto;
-}
-
-@media (orientation: landscape) {
-#handlerimg {
-  position: absolute;
-  width: 35%;
-  height: auto;
-  top:49%;
-  left: 2%;
-}}
-@media (orientation:portrait ) {
-#handlerimg {
-  position: absolute;
-  width: 35%;
-  height: auto;
-  top:53%;
-  left: 2%;
-}}
-.lido-balance .handler svg {
-  width: 100%;
-  height: auto;
-  fill: brown;
-}
-
-@media (orientation: landscape) {
-#handimg {
-  position: absolute;
-  width: 35%;
-  height: auto;
-  top: 49%;
-  right: 2%;
-}}
-@media (orientation:portrait) {
-#handimg {
-  position: absolute;
-  width: 35%;
-  height: auto;
-  top: 53%;
-  right: 2%;
-}}
-.lido-balance .hand svg {
-  width: 100%;
-  height: auto;
-  fill: brown;
-}
-
-.pivot svg path:nth-of-type(1) {
-  fill: brown;
-}
-.pivot svg path[d^="M78.9414"] {
-  fill: white;
-}
+#lido-balance {
+  position: relative;
+  height: 500px;
+  width: 1205px;
+  top: 20%;
+  left: -91px;
+  z-index: 0;
+}
+
+.lido-balance-symbol {
+  position: absolute;
+  top: 64%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 5vw;     
+  font-weight: bold;
+  color: black;
+  pointer-events: none;
+  z-index: 999;
+}
+@media (orientation: portrait) {
+  .lido-balance-shadow {
+    height: 100px;
+    position: absolute;
+    top: 80%;
+    left: 28%;
+  }
+}
+
+@media (orientation: landscape) {
+  .lido-balance-shadow {
+    height: 100px ;
+    position: absolute;
+    top: 90%  ;
+    left: 33%  ;
+  }
+}
+@media (orientation: portrait) {
+  #pivotimg {
+  position: absolute;
+  height:auto;
+  width: 23%;
+  bottom: 18%;     
+  left: 38%;
+  z-index: 100;
+    
+  }
+}
+
+#pivotimg::after {
+  content: "";
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 120%;        
+  height: 60px;     
+  background-image: url("https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Shadow.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  pointer-events: none;
+  z-index: 10;
+}
+
+@media (orientation: landscape) {
+  #pivotimg {
+    position: absolute;
+    height:auto;
+    width: 23%;
+    bottom: 8%;     
+  left: 38%;
+  z-index: 100;
+  }
+}
+
+.lido-balance .pivot svg {
+  width: 100%;
+  height: auto;
+}
+
+
+#scaleimg {
+  position: absolute;
+  width: 73%;
+  height: auto;
+  top: 61%;
+  left: 14%;
+  z-index: 90;
+}
+.lido-balance .scale svg {
+  width: 100%;
+  height: auto;
+}
+
+@media (orientation: landscape) {
+#handlerimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top:49%;
+  left: 2%;
+}}
+@media (orientation:portrait ) {
+#handlerimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top:53%;
+  left: 2%;
+}}
+.lido-balance .handler svg {
+  width: 100%;
+  height: auto;
+  fill: brown;
+}
+
+@media (orientation: landscape) {
+#handimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top: 49%;
+  right: 2%;
+}}
+@media (orientation:portrait) {
+#handimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top: 53%;
+  right: 2%;
+}}
+.lido-balance .hand svg {
+  width: 100%;
+  height: auto;
+  fill: brown;
+}
+
+.pivot svg path:nth-of-type(1) {
+  fill: brown;
+}
+.pivot svg path[d^="M78.9414"] {
+  fill: white;
+}

package/dist/collection/components/scale/lido-balance.js

@@ -42,9 +42,7 @@ export class LidoBalance {
         this.handlerSvg = await this.fetchAndApplyFill(this.handlerimage);
     }
     componentDidLoad() {
-        setTimeout(() => {
-            this.animateBalance();
-        }, 4000);
+        this.animateBalance();
         this.leftParentEl = document.getElementById("leftparent");
         this.rightParentEl = document.getElementById("rightparent");
         initEventsForElement(this.el);
@@ -75,6 +73,7 @@ export class LidoBalance {
     async updateTilt(leftVal, rightVal) {
         const diff = rightVal - leftVal;
         const newTilt = Math.max(-5, Math.min(5, diff));
+        await new Promise(res => setTimeout(res, 350));
         this.tiltf = newTilt;
     }
     animateBalance() {
@@ -94,7 +93,8 @@ export class LidoBalance {
                 this.scaleEl.style.transformOrigin = '50% 80%';
             }
             if (this.leftParentEl && this.rightParentEl) {
-                const maxOffset = 60;
+                const isPortrait = window.innerHeight > window.innerWidth;
+                const maxOffset = isPortrait ? 40 : 60;
                 const offset = (this.currentAngle / this.maxTilt) * maxOffset;
                 this.leftParentEl.style.transform = `translateY(${-offset}px)`;
                 this.rightParentEl.style.transform = `translateY(${offset}px)`;
@@ -124,7 +124,7 @@ export class LidoBalance {
         };
     }
     render() {
-        return (h(Host, { key: '868cc05ae503a6e04039c615815102470eb402d4', id: "lido-balance", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString() }, h("div", { key: '2627a49d1ad5045bd9a3ac217354c9be98f1f52b', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: 'c5b2432f5e3c62ebbb7f17146f18e22e7e2b29bb', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: 'd5e8051aedb784189f19a1e7b0dfd645e95ed4a5', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: '3779886d4fc8dfadc0791f69cb87df78d5f843c8', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'df5d4094c302548bf64f166643a3f05d262d95b1', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
+        return (h(Host, { key: 'd1da72f1bf298dd7c81b0cfefa0e9e563ccbfff1', id: "lido-balance", "bg-color": "red", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString() }, h("div", { key: '737ab206a5156b402d4477a38567480f10419c14', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: '8bc60136950858d5d1b96c38ec4c0635024f8d24', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: '07049a6b5c8e75d831c9287b2b4a0e633791174b', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: '85361c27b1ab6fcc86969bfc9d4dff1df6040165', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'c4208582bfa1b63e4381d44d9a95e9c537dfbc84', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
     }
     static get is() { return "lido-balance"; }
     static get originalStyleUrls() {
@@ -205,7 +205,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Fill color applied to all loaded SVGs (pivot, scale, handler).\nDefaults to \"brown\"."
+                    "text": "Fill color applied to all loaded SVGs (pivot, scale, handler).\r\nDefaults to \"brown\"."
                 },
                 "attribute": "fill",
                 "reflect": false,
@@ -223,7 +223,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Initial tilt value of the balance.\nNegative = tilts left, Positive = tilts right."
+                    "text": "Initial tilt value of the balance.\r\nNegative = tilts left, Positive = tilts right."
                 },
                 "attribute": "tilt",
                 "reflect": false,
@@ -259,7 +259,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Action(s) to execute when the component enters the DOM.\nExample: trigger animations or audio cues."
+                    "text": "Action(s) to execute when the component enters the DOM.\r\nExample: trigger animations or audio cues."
                 },
                 "attribute": "on-entry",
                 "reflect": false,
@@ -277,7 +277,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS height of the component (responsive values allowed).\nDefault: \"auto\"."
+                    "text": "CSS height of the component (responsive values allowed).\r\nDefault: \"auto\"."
                 },
                 "attribute": "height",
                 "reflect": false,
@@ -295,7 +295,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS width of the component (responsive values allowed).\nDefault: \"auto\"."
+                    "text": "CSS width of the component (responsive values allowed).\r\nDefault: \"auto\"."
                 },
                 "attribute": "width",
                 "reflect": false,
@@ -313,7 +313,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Horizontal (X-axis) offset for positioning the component.\nDefault: \"0px\"."
+                    "text": "Horizontal (X-axis) offset for positioning the component.\r\nDefault: \"0px\"."
                 },
                 "attribute": "x",
                 "reflect": false,
@@ -331,7 +331,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Vertical (Y-axis) offset for positioning the component.\nDefault: \"0px\"."
+                    "text": "Vertical (Y-axis) offset for positioning the component.\r\nDefault: \"0px\"."
                 },
                 "attribute": "y",
                 "reflect": false,
@@ -349,7 +349,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Z-index for stacking order of the component.\nDefault: \"0\"."
+                    "text": "Z-index for stacking order of the component.\r\nDefault: \"0\"."
                 },
                 "attribute": "z",
                 "reflect": false,
@@ -367,7 +367,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls component visibility.\nAccepts boolean (`true`/`false`) or string (\"true\"/\"false\")."
+                    "text": "Controls component visibility.\r\nAccepts boolean (`true`/`false`) or string (\"true\"/\"false\")."
                 },
                 "attribute": "visible",
                 "reflect": false,
@@ -421,7 +421,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Balance symbol shown when `showSymbol` is true.\nDefault: \"=\"."
+                    "text": "Balance symbol shown when `showSymbol` is true.\r\nDefault: \"=\"."
                 },
                 "attribute": "balance-symbol",
                 "reflect": true,
@@ -439,7 +439,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the balance symbol is currently displayed.\nCan be toggled with `revealSymbol()` and `hideSymbol()`."
+                    "text": "Whether the balance symbol is currently displayed.\r\nCan be toggled with `revealSymbol()` and `hideSymbol()`."
                 },
                 "attribute": "show-symbol",
                 "reflect": true,
@@ -457,7 +457,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Operation type used to calculate balance values.\nSupported: \"count\", \"add\", \"subtract\", etc."
+                    "text": "Operation type used to calculate balance values.\r\nSupported: \"count\", \"add\", \"subtract\", etc."
                 },
                 "attribute": "operation",
                 "reflect": false,