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

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

@@ -12,7 +12,7 @@ export class LidoCalculator {
         this.x = '0px';
         this.y = '0px';
         this.bgColor = '#60DADA';
-        this.penIcon = "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/Pen--Streamline-Solar%201.svg";
+        this.penIcon = "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/penIcon.png";
         this.displayValue = '';
         this.style = {};
     }
@@ -29,7 +29,7 @@ export class LidoCalculator {
         this.updateValueAttr();
     }
     handleClick(value) {
-        const MAX_LENGTH = 10;
+        const MAX_LENGTH = 8;
         if (value === 'OK') {
             this.verifyAnswer();
         }
@@ -51,7 +51,8 @@ export class LidoCalculator {
         const container = this.el.closest('lido-container');
         if (!container)
             return;
-        if (this.objective && this.objective.length === 1) {
+        if (this.objective && this.objective != '' && !this.objective.includes(',')) {
+            console.log("hi iscorrect verified");
             isCorrect = userInput === this.objective;
         }
         // --- Multiple Objectives ---
@@ -64,7 +65,7 @@ export class LidoCalculator {
                 isCorrect = true;
             }
             else {
-                isCorrect = false;
+                // isCorrect = false; 
             }
             //  Store behavior based on mode
             if (isContinueOnCorrect) {
@@ -98,7 +99,12 @@ export class LidoCalculator {
             storingEachActivityScore(isCorrect);
             const onCorrect = (container === null || container === void 0 ? void 0 : container.getAttribute('onCorrect')) || '';
             await executeActions(onCorrect, container);
-            if (this.objective.length === 0) {
+            if (onCorrect.includes('scrollCellAfterEquationSolved')) {
+                if (this.objective.length === 0) {
+                    window.dispatchEvent(new CustomEvent(NextContainerKey));
+                }
+            }
+            else {
                 window.dispatchEvent(new CustomEvent(NextContainerKey));
             }
         }
@@ -111,7 +117,7 @@ export class LidoCalculator {
     }
     render() {
         const numbers = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '←', '0', 'OK'];
-        return (h(Host, { key: '61d14ce0ff858db8ff04b502c0d303f18f5552b8', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '86318d0fb2a707af14fca1b1a615536e7bcdb9a3', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: 'd552cf17bedcbb321af0c7fb5fc0b44c89be4561', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "96px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '46f9003a72906617169fb76b19a208e6f6cbb0bc', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: 'a7ffc6dbdaabfa944e115eeecf08cc53808c0234', class: "lido-calculator-displayParent" }, h("div", { key: '27926d1370cbdd4423404ad1f78b1ade381288d9', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: '58288a987ea3090da498fff03220d4d4b24aa7c5', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
+        return (h(Host, { key: 'de394a3b14826c7fb6d6cf33fbbf1726238cbe3b', onEntry: this.onEntry, id: "lidoCalculator", style: { width: this.width, height: this.height, backgroundColor: this.bgColor, left: this.x, top: this.y } }, h("lido-cell", { key: '6dbc01d1032553ba6376d60d451b546851f5ebed', visible: "true", height: "94px", width: "60px" }, h("lido-text", { key: '353396c173bbdeb5f2fbb235e54fa900d2d0b771', visible: "true", id: "lido-calculator-penIcon", type: "click", height: "80px", x: "176%", width: "89px", onEntry: "this.position='relative';", class: "top-icon" }, h("img", { key: '083b53c01a3d7bfff1c39a408ed064fd18d3e8a3', src: this.penIcon, alt: "pen", style: { width: '100%', height: '100%' } }))), h("div", { key: 'b0936ba134feda621d5f0f26b7de70db51f56cf8', class: "lido-calculator-displayParent" }, h("div", { key: '35507ac35c70c4bf515c904a402e5312dafeffc3', class: "lido-calculator-display" }, this.displayValue)), h("div", { key: 'd7412b0d4c8971aa09d9ca22ee8d25f2773cd2c8', class: "lido-calculator-buttons" }, numbers.map((num, i) => (h("lido-text", { id: `btn-${i}`, string: num, visible: "true", type: "click", class: {
                 'lido-calculator-btn-special': num === '←' || num === 'OK',
                 'lido-calculator-btn-default': num !== '←' && num !== 'OK'
             }, onClick: () => this.handleClick(num) }))))));
@@ -159,7 +165,7 @@ export class LidoCalculator {
                 "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,
@@ -289,7 +295,7 @@ export class LidoCalculator {
                 },
                 "attribute": "pen-icon",
                 "reflect": false,
-                "defaultValue": "\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/Pen--Streamline-Solar%201.svg\""
+                "defaultValue": "\"https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/calculator/penIcon.png\""
             }
         };
     }

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

@@ -0,0 +1,38 @@
+:host {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.lido-pad {
+  
+  background:red;
+  border: 2px solid #ccc;
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+}
+button {
+  padding: 6px 14px;
+  border: none;
+  background:transparent;
+  color: #fff;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  position: relative;
+   top: -44%;   
+  left: 16%;   
+  z-index: 10;
+}
+#lido-img1{
+  height:50px;
+  width: 60px;
+}
+canvas {
+  /* flex: 1; */
+  touch-action: none;
+  display: block;
+}

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

@@ -0,0 +1,220 @@
+import { h, Host } from "@stencil/core";
+import { parseProp } from "../../utils/utils";
+export class WritingPad {
+    constructor() {
+        // Flag to track drawing state
+        this.drawing = false;
+        this.bgImage = undefined;
+        this.width = '800px';
+        this.height = '700px';
+        this.x = '0px';
+        this.y = '0px';
+        this.onEntry = '';
+        this.style = {};
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            width: parseProp(this.width, orientation),
+            height: parseProp(this.height, orientation),
+            left: parseProp(this.x, orientation),
+            top: parseProp(this.y, orientation),
+            position: 'absolute',
+        };
+        if (this.canvas) {
+            this.canvas.width = parseInt(parseProp(this.width, orientation));
+            this.canvas.height = parseInt(parseProp(this.height, orientation));
+            this.ctx.strokeStyle = '#000';
+            this.ctx.lineWidth = 10;
+            this.ctx.lineCap = 'round';
+            this.ctx.lineJoin = 'round';
+            this.loadBackground();
+        }
+    }
+    componentDidLoad() {
+        this.canvas = this.el.shadowRoot.querySelector('#lido-canvas');
+        this.ctx = this.canvas.getContext('2d');
+        this.ctx.strokeStyle = '#000';
+        this.ctx.lineWidth = 10;
+        this.ctx.lineCap = 'round';
+        this.ctx.lineJoin = 'round';
+        this.updateStyles();
+        this.loadBackground();
+        this.canvas.addEventListener('pointerdown', e => this.start(e));
+        this.canvas.addEventListener('pointermove', e => this.move(e));
+        window.addEventListener('pointerup', () => this.stop());
+        window.addEventListener('resize', () => this.updateStyles());
+    }
+    loadBackground() {
+        if (!this.bgImage) {
+            this.ctx.fillStyle = '#fff';
+            this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+            return;
+        }
+        const img = new Image();
+        img.crossOrigin = 'anonymous';
+        img.src = this.bgImage;
+        img.onload = () => {
+            this.ctx.drawImage(img, 0, 0, this.canvas.width, this.canvas.height);
+        };
+    }
+    getPos(e) {
+        const r = this.canvas.getBoundingClientRect();
+        return {
+            x: (e.clientX - r.left) * (this.canvas.width / r.width),
+            y: (e.clientY - r.top) * (this.canvas.height / r.height),
+        };
+    }
+    start(e) {
+        this.drawing = true;
+        const pos = this.getPos(e);
+        this.ctx.beginPath();
+        this.ctx.moveTo(pos.x, pos.y);
+    }
+    move(e) {
+        if (!this.drawing)
+            return;
+        const pos = this.getPos(e);
+        this.ctx.lineTo(pos.x, pos.y);
+        this.ctx.stroke();
+    }
+    stop() {
+        this.drawing = false;
+        this.ctx.closePath();
+    }
+    clearCanvas() {
+        this.loadBackground();
+    }
+    render() {
+        return (h(Host, { key: '546c916c460a7581d5ecb9c1c5c07d7630cb64c1', id: "lido-canvas", class: "lido-pad", style: this.style }, h("button", { key: 'f0693ce43a33908dcdd833b48b7a849b73b37cc2', onClick: () => this.clearCanvas() }, h("img", { key: 'e3c029b206565ced465a5f1e352b98a11d54d71f', id: "lido-img1", src: "https://cdn-icons-png.flaticon.com/256/458/458595.png", alt: "Clear" })), h("canvas", { key: '1c07d610b7840cdc3f4359539a6d721f50130462', id: "lido-canvas", style: { width: this.style.width, height: this.style.height, } })));
+    }
+    static get is() { return "lido-canvas"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lido-canvas.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lido-canvas.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "bgImage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "bg-image",
+                "reflect": false
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "'800px'"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "height",
+                "reflect": false,
+                "defaultValue": "'700px'"
+            },
+            "x": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "x",
+                "reflect": false,
+                "defaultValue": "'0px'"
+            },
+            "y": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "y",
+                "reflect": false,
+                "defaultValue": "'0px'"
+            },
+            "onEntry": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "on-entry",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "style": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}

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

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

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

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