lido-player 0.0.2-beta-19-dev → 0.0.2-beta-22-dev

package/dist/collection/components/column/lido-col.js

@@ -78,7 +78,7 @@ export class LidoCol {
         };
     }
     render() {
-        return (h(Host, { key: 'b2ecb19a78feed7275d9e996255db4144d5e0153', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, 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 }, h("slot", { key: '2d285d2c1557647e05abb470490da6c7c735a39d' })));
+        return (h(Host, { key: '334206d6054442fec787cfb479a68ae164404730', id: this.id, class: "lido-col", type: this.type, "tab-index": this.tabIndex, value: this.value, 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 }, h("slot", { key: '590cd219bc5a02e6b96eafe108fb8b310daf941d' })));
     }
     static get is() { return "lido-col"; }
     static get originalStyleUrls() {
@@ -467,7 +467,7 @@ export class LidoCol {
                 "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`."
                 },
                 "getter": false,
                 "setter": false,
@@ -486,7 +486,7 @@ export class LidoCol {
                 "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -505,7 +505,7 @@ export class LidoCol {
                 "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -562,7 +562,7 @@ export class LidoCol {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Applies a CSS box-shadow to the component.\nAccepts any valid CSS box-shadow value.\nExample: \"0px 4px 10px rgba(0, 0, 0, 0.1)\""
+                    "text": "Applies a CSS box-shadow to the component.\r\nAccepts any valid CSS box-shadow value.\r\nExample: \"0px 4px 10px rgba(0, 0, 0, 0.1)\""
                 },
                 "getter": false,
                 "setter": false,
@@ -621,7 +621,7 @@ export class LidoCol {
                 "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.)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,10 +1,10 @@
-.lido-container {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  background-color: var(--bgColor, transparent);
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
+.lido-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  background-color: var(--bgColor, transparent);
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -452,7 +452,7 @@ export class LidoContainer {
             margin: this.margin,
             userSelect: 'none', // Prevent any field selection
         };
-        return (h(Host, { key: '9dd374c6cdfcc88a5b18e7dc7fec527c853a4719', id: "lido-container", Lang: this.Lang, "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}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '8295782a74ce6ef8ca9a623de8a28b539d9f6d4f', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'eb3c995b777986e07dcb6aa935ef38d41aa1e7e7' })));
+        return (h(Host, { key: '1862e30fedda58726edc107f81fae1f63e96d009', id: "lido-container", Lang: this.Lang, "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}`, "template-id": this.templateId, audio: this.audio, "highlight-word-by-word": `${this.highlightWordByWord}` }, h("lido-text", { key: '86fd014a61ba9cba6d67e2d921b2d8a8a289dbc7', visible: "false", id: this.templateId, audio: "", string: this.instructName }), h("slot", { key: 'c3128ea2164892757b32cb076d717436947f9a4c' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -579,7 +579,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Custom CSS styles to be applied to the container.\nAllows for dynamic styling through inline styles or class names."
+                    "text": "Custom CSS styles to be applied to the container.\r\nAllows for dynamic styling through inline styles or class names."
                 },
                 "getter": false,
                 "setter": false,
@@ -1019,7 +1019,7 @@ export class LidoContainer {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines if the activity should proceed automatically only after a correct response.\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
+                    "text": "Determines if the activity should proceed automatically only after a correct response.\r\nAcceptable values: \"true\" or \"false\". Defaults to \"false\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -1059,7 +1059,7 @@ export class LidoContainer {
                 "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.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -1079,7 +1079,7 @@ export class LidoContainer {
                 "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -1098,7 +1098,7 @@ export class LidoContainer {
                 "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -1117,7 +1117,7 @@ export class LidoContainer {
                 "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."
                 },
                 "getter": false,
                 "setter": false,
@@ -1136,7 +1136,7 @@ export class LidoContainer {
                 "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."
                 },
                 "getter": false,
                 "setter": false,

package/dist/collection/components/flashCard/lido-flash-card.css

@@ -1,28 +1,46 @@
-
-
-.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);
-}
+
+
+.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);
+}
+
+/* Flash Card's local next button is positioned against the 1600x900 Lido
+   canvas, rather than against the viewport or the global navigation bar. */
+lido-container[template-id="flashcardtemplate"] #arrow {
+  position: absolute !important;
+  left: auto !important;
+  top: 50% !important;
+  right: 13.3% !important;
+  transform: translateY(-50%);
+  z-index: 4 !important;
+  overflow: visible;
+}
+
+@media (orientation: portrait) {
+  lido-container[template-id="flashcardtemplate"] #arrow {
+    right: -4.3% !important;
+  }
+}

package/dist/collection/components/flashCard/lido-flash-card.js

@@ -4,7 +4,8 @@
  *  controllable `flipped` prop.
  * ------------------------------------------------------------------*/
 import { Host, h } from "@stencil/core";
-import { parseProp, initEventsForElement, setVisibilityWithDelay } from "../../utils/utils";
+import { parseProp, initEventsForElement, setVisibilityWithDelay, executeActions } from "../../utils/utils";
+import { AudioPlayer } from "../../utils/audioPlayer";
 export class LidoFlash {
     constructor() {
         /* ---------- Generic Lido props (mirrors lido‑row) ---------- */
@@ -82,6 +83,38 @@ export class LidoFlash {
          * `reflect` keeps the `<lido-flash-card flipped>` attribute in sync.
          */
         this.flipped = false;
+        this.autoFlipAfter = 4500;
+        this.instructionDone = false;
+        this.onAudioEnded = (event) => {
+            var _a;
+            const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
+            const instruction = this.instructionText();
+            if (!target || (target !== instruction && target.id !== 'lido-avatar' && !this.el.contains(target)))
+                return;
+            if (target === this.instructionText()) {
+                this.instructionDone = true;
+                window.setTimeout(() => {
+                    this.speakFront();
+                }, 1200);
+            }
+            else if (target === this.frontText()) {
+                if (this.flipped)
+                    return;
+                if (this.autoFlipTimer)
+                    window.clearTimeout(this.autoFlipTimer);
+                this.autoFlipTimer = window.setTimeout(() => {
+                    if (!this.flipped)
+                        this.handleFlip();
+                }, this.autoFlipAfter);
+            }
+            else if (target === this.backText()) {
+                if (this.flipped)
+                    this.showArrow();
+            }
+            else if (target.id === 'lido-avatar') {
+                executeActions("this.avatarAnimate='Idle'", target);
+            }
+        };
         /**
          * CSS margin value applied to each child element inside the container.
          * Accepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.).
@@ -114,7 +147,76 @@ export class LidoFlash {
         };
         /** Toggle the card when it is clicked. */
         this.handleFlip = () => {
+            var _a;
+            if (this.autoFlipTimer)
+                window.clearTimeout(this.autoFlipTimer);
+            AudioPlayer.getI().stop();
+            const goingBack = !this.flipped;
             this.flipped = !this.flipped;
+            this.setArrowVisible(false);
+            if (goingBack) {
+                const text = this.backText();
+                if (text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim()))
+                    executeActions("this.speak='true'", text);
+                else
+                    this.showArrow();
+            }
+            else {
+                this.speakFront();
+            }
+        };
+        this.instructionText = () => { var _a; return document.getElementById(((_a = this.el.closest('lido-container')) === null || _a === void 0 ? void 0 : _a.getAttribute('template-id')) || ''); };
+        this.frontText = () => this.el.querySelector('.card-front lido-text');
+        this.backText = () => this.el.querySelector('.card-back lido-text');
+        this.speakFront = () => {
+            var _a;
+            const text = this.frontText();
+            if (this.instructionDone && !this.flipped && text && ((_a = text.textContent) === null || _a === void 0 ? void 0 : _a.trim())) {
+                executeActions("this.speak='true'", text);
+            }
+        };
+        this.showArrow = () => {
+            if (!this.flipped)
+                return;
+            const arrow = document.getElementById('arrow');
+            if (!arrow)
+                return;
+            // Existing ZIPs may not have the newer template onTouch action. Reuse
+            // the same direct nextBtn action as the shared home arrow for them.
+            if (!arrow.getAttribute('onTouch'))
+                arrow.setAttribute('onTouch', "this.nextBtn='true';");
+            const mascot = document.getElementById('lido-avatar');
+            const scaffoldAudio = arrow.getAttribute('audio');
+            if (mascot && scaffoldAudio) {
+                mascot.setAttribute('audio', scaffoldAudio);
+                arrow.removeAttribute('audio');
+            }
+            this.setArrowVisible(true);
+            if (mascot) {
+                executeActions("this.avatarAnimate='Idle speak'", mascot);
+                AudioPlayer.getI().play(mascot, true);
+            }
+        };
+        this.setArrowVisible = (visible) => {
+            const arrow = document.getElementById('arrow');
+            if (!arrow)
+                return;
+            arrow.visible = visible;
+            arrow.setAttribute('visible', String(visible));
+            // lido-cell's visible prop is a non-reflected string prop; keep the
+            // rendered host in sync as well so an attribute update cannot leave its
+            // previous inline display:none in place.
+            arrow.style.display = visible ? 'block' : 'none';
+            arrow.style.visibility = visible ? 'visible' : 'hidden';
+            arrow.style.opacity = visible ? '1' : '0';
+            const arrowImage = arrow.querySelector('lido-image');
+            if (arrowImage) {
+                arrowImage.style.display = visible ? 'flex' : 'none';
+                arrowImage.style.visibility = visible ? 'visible' : 'hidden';
+                arrowImage.style.opacity = visible ? '1' : '0';
+            }
+            if (typeof arrow.updateStyles === 'function')
+                arrow.updateStyles();
         };
     }
     /* ---------- Watches ---------- */
@@ -130,25 +232,20 @@ export class LidoFlash {
     }
     componentDidLoad() {
         setVisibilityWithDelay(this.el, this.delayVisible);
-        const card = this.el.querySelector('.card');
-        if (card) {
-            setTimeout(() => {
-                card.classList.add('flipped');
-                setTimeout(() => {
-                    card.classList.remove('flipped');
-                }, 500);
-            }, 500);
-        }
         initEventsForElement(this.el, this.type);
+        window.addEventListener('lidoAudioEnded', this.onAudioEnded);
         // handlingChildElements(this.el, this.minLength, this.maxLength, this.childElementsLength, 'inline-block');
     }
     disconnectedCallback() {
+        window.removeEventListener('lidoAudioEnded', this.onAudioEnded);
+        if (this.autoFlipTimer)
+            window.clearTimeout(this.autoFlipTimer);
         window.removeEventListener('resize', this.updateStyles);
         window.removeEventListener('load', this.updateStyles);
     }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: 'cd0d8539f24de1fd7805b271de839ee8efeb4287', 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: 'a97eaa100216652cc4deaf8b6f73e9ea07a125f2', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: '7a6f94b89da76b2c7fc911c44d2aaa63a3d2164d', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '15936f96d44db217c042584cc225a42dc3f74e98', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+        return (h(Host, { key: '8d65b494352e0c0aefb3815c87a798967ccb65aa', 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: 'db3d4fce4f9f54437485ab1274b1f9bd3b3486bc', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'd37770b0b08eac533265d7f8049c598df047aa37', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '2f8431017cfed9f9adb679442be833a65704d41e', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {
@@ -515,7 +612,7 @@ export class LidoFlash {
                 "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`."
                 },
                 "getter": false,
                 "setter": false,
@@ -591,7 +688,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the card is flipped (back side visible).\n`mutable` lets the component toggle itself on click;\n`reflect` keeps the `<lido-flash-card flipped>` attribute in sync."
+                    "text": "Whether the card is flipped (back side visible).\r\n`mutable` lets the component toggle itself on click;\r\n`reflect` keeps the `<lido-flash-card flipped>` attribute in sync."
                 },
                 "getter": false,
                 "setter": false,
@@ -599,6 +696,26 @@ export class LidoFlash {
                 "attribute": "flipped",
                 "defaultValue": "false"
             },
+            "autoFlipAfter": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "auto-flip-after",
+                "defaultValue": "4500"
+            },
             "margin": {
                 "type": "string",
                 "mutable": false,
@@ -611,7 +728,7 @@ export class LidoFlash {
                 "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.)."
                 },
                 "getter": false,
                 "setter": false,

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

@@ -1,30 +1,30 @@
-.lido-float {
-  position: relative;
-}
-
-.lido-float > * {
-  position: absolute;
-  cursor: pointer;
-}
-
-@keyframes float-up {
-  from {
-    top: var(--el-top);
-  }
-  to {
-    top: -500px;
-  }
-}
-
-#removeShadow {
-  box-shadow: unset !important;
-}
-
-@keyframes float-lr {
-  from {
-    right: var(--el-left);
-  }
-  to {
-    right: -500px;
-  }
-}
+.lido-float {
+  position: relative;
+}
+
+.lido-float > * {
+  position: absolute;
+  cursor: pointer;
+}
+
+@keyframes float-up {
+  from {
+    top: var(--el-top);
+  }
+  to {
+    top: -500px;
+  }
+}
+
+#removeShadow {
+  box-shadow: unset !important;
+}
+
+@keyframes float-lr {
+  from {
+    right: var(--el-left);
+  }
+  to {
+    right: -500px;
+  }
+}

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

@@ -85,7 +85,7 @@ export class LidoFloat {
         };
     }
     render() {
-        return (h(Host, { key: '26ada4c2834a58fe1f45348a32f9d1dcecb79a14', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '6f4ca358f564e268390f221cc1f84af1f303761b' })));
+        return (h(Host, { key: 'c461f1142dd6addd9ceb41ade183b044b875681f', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '240439bfda6a9e4e2d67e6ae2b5c878d99e632b3' })));
     }
     static get is() { return "lido-float"; }
     static get originalStyleUrls() {
@@ -328,7 +328,7 @@ export class LidoFloat {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Direction of the float element's movement (e.g., 'leftToRight', 'bottomToTop').\nThis can be used to control the animation or positioning of the float elements."
+                    "text": "Direction of the float element's movement (e.g., 'leftToRight', 'bottomToTop').\r\nThis can be used to control the animation or positioning of the float elements."
                 },
                 "getter": false,
                 "setter": false,