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

package/dist/collection/components/slideFill/lido-slide-fill.js

@@ -59,13 +59,13 @@ export class LidoSlideFill {
                 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;
@@ -190,7 +190,7 @@ export class LidoSlideFill {
         }
     }
     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" })));
     }
     static get is() { return "lido-slide-fill"; }
     static get originalStyleUrls() {
@@ -354,7 +354,7 @@ export class LidoSlideFill {
                 "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
@@ -371,7 +371,7 @@ export class LidoSlideFill {
                 "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,
@@ -389,7 +389,7 @@ export class LidoSlideFill {
                 "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,
@@ -407,7 +407,7 @@ export class LidoSlideFill {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Fill amount to display inside the SVG rect.\nAccepts values like \"30%\" or \"30\" (treated as percentage of fill)"
+                    "text": "Fill amount to display inside the SVG rect.\r\nAccepts values like \"30%\" or \"30\" (treated as percentage of fill)"
                 },
                 "attribute": "fill",
                 "reflect": false
@@ -424,7 +424,7 @@ export class LidoSlideFill {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Type of number to be displayed on the ruler.\nCan be 'integer', 'decimal', or 'fraction'."
+                    "text": "Type of number to be displayed on the ruler.\r\nCan be 'integer', 'decimal', or 'fraction'."
                 },
                 "attribute": "number-type",
                 "reflect": false,
@@ -530,7 +530,7 @@ export class LidoSlideFill {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Determines the direction in which the rect fill should grow:\n- 'vertical': from bottom to top\n- 'horizontal': from left to right"
+                    "text": "Determines the direction in which the rect fill should grow:\r\n- 'vertical': from bottom to top\r\n- 'horizontal': from left to right"
                 },
                 "attribute": "fill-direction",
                 "reflect": false

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

@@ -1,53 +1,53 @@
-.lido-text {
-  /* background-color: #fff; */
-  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
-  transition: background-color 0.3s ease;
-  user-select: none;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  border-radius: 24px;
-  color: #333;
-  cursor: pointer;
-  font-family: 'Baloo Bhai 2', serif;
-}
-
-.text-letters {
-  transition: color 0.3s, text-shadow 0.3s;
-  display: inline-block;
-  padding: 0 2px;  
-}
-
-.text-letters.letter-highlight {
-  color: #8e24aa;
-  background: none;
-  border-radius: 0;
-  text-shadow: 0 2px 8px #8e24aa88;
-  animation: text-letter-bounce 0.4s;
-}
-
-.text-words {
-  transition: color 0.3s, text-shadow 0.3s;
-  display: inline-block;
-  padding: 0 2px;  
-}
-
-.text-words.word-highlight {
-  color: #8e24aa;
-  background: none;
-  border-radius: 0;
-  text-shadow: 0 2px 8px #8e24aa88;
-  animation: text-word-bounce 0.4s;
-}
-
-@keyframes text-letter-bounce {
-  0% { transform: scale(1); }
-  60% { transform: scale(1.4); }
-  100% { transform: scale(1); }
-}
-
-@keyframes text-word-bounce {
-  0% { transform: scale(1); }
-  60% { transform: scale(1.3); }
-  100% { transform: scale(1); }
-}
+.lido-text {
+  /* background-color: #fff; */
+  /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
+  transition: background-color 0.3s ease;
+  user-select: none;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  border-radius: 24px;
+  color: #333;
+  cursor: pointer;
+  font-family: 'Baloo Bhai 2', serif;
+}
+
+.text-letters {
+  transition: color 0.3s, text-shadow 0.3s;
+  display: inline-block;
+  padding: 0 2px;  
+}
+
+.text-letters.letter-highlight {
+  color: #8e24aa;
+  background: none;
+  border-radius: 0;
+  text-shadow: 0 2px 8px #8e24aa88;
+  animation: text-letter-bounce 0.4s;
+}
+
+.text-words {
+  transition: color 0.3s, text-shadow 0.3s;
+  display: inline-block;
+  padding: 0 2px;  
+}
+
+.text-words.word-highlight {
+  color: #8e24aa;
+  background: none;
+  border-radius: 0;
+  text-shadow: 0 2px 8px #8e24aa88;
+  animation: text-word-bounce 0.4s;
+}
+
+@keyframes text-letter-bounce {
+  0% { transform: scale(1); }
+  60% { transform: scale(1.4); }
+  100% { transform: scale(1); }
+}
+
+@keyframes text-word-bounce {
+  0% { transform: scale(1); }
+  60% { transform: scale(1.3); }
+  100% { transform: scale(1); }
+}

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

@@ -1,5 +1,6 @@
 import { h, Host } from "@stencil/core";
 import { initEventsForElement, convertUrlToRelative, parseProp, setVisibilityWithDelay, attachSpeakIcon } from "../../utils/utils";
+import i18next from "../../utils/i18n";
 /**
  * @component LidoText
  *
@@ -123,7 +124,7 @@ export class LidoText {
         }
     }
     render() {
-        return (h(Host, { key: '6b5b31a544cc63cfd4030aa1b56e41cc255b12cf', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, this.string) : this.string));
+        return (h(Host, { key: '89ed432cbbf1f3ca2cdcaf4df80628350badef6d', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, " ", i18next.t(this.string)) : i18next.t(this.string)));
     }
     static get is() { return "lido-text"; }
     static get originalStyleUrls() {
@@ -636,7 +637,7 @@ export class LidoText {
                 "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,
@@ -654,7 +655,7 @@ export class LidoText {
                 "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,
@@ -672,7 +673,7 @@ export class LidoText {
                 "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,
@@ -690,7 +691,7 @@ export class LidoText {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Indicates whether to wrap each letter or each word of the text in a span element.\nThis can be useful for animations or styling individual letters."
+                    "text": "Indicates whether to wrap each letter or each word of the text in a span element.\r\nThis can be useful for animations or styling individual letters."
                 },
                 "attribute": "span-type",
                 "reflect": false,

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

@@ -1,98 +1,98 @@
-:host {
-  display: block;
-  position: relative;
-}
-
-#lido-svgContainer {
-  /* position: absolute; */
-  /* top: 0; */
-  /* left: 0; */
-  /* right: 0; */
-  /* bottom: 50px; */
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  overflow: hidden;
-}
-
-svg {
-  width: 100%;
-  height: 100%;
-  /* max-height: calc(100vh - 50px); */
-  /* border: 1px solid black; */
-  touch-action: none;
-}
-
-#lido-draggableCircle {
-  cursor: pointer;
-  fill: #CF1565;
-  transition: fill 0.2s, r 0.2s;
-}
-
-.lido-blindTracing {
-  stroke: none !important;
-}
-
-.lido-blindFreeTrace {
-  stroke: none !important;
-}
-
-.lido-hovered {
-  cursor: grab;
-  fill: darkred;
-}
-
-#lido-controls {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: space-between;
-  padding: 10px;
-  background-color: #f0f0f0;
-  border-top: 1px solid #ccc;
-}
-
-button {
-  padding: 10px;
-  font-size: 16px;
-}
-
-@media (max-width: 600px) {
-  button {
-    padding: 8px;
-    font-size: 14px;
-  }
-}
-
-.lido-trace-path-green {
-  /* stroke: green !important; */
-}
-
-.lido-flow-indicator {
-  stroke: blue;
-  stroke-width: 2;
-  stroke-dasharray: 6, 6; /* Uniform dotted line */
-  fill: none;
-}
-
-.lido-trace {
-  height: 700px;
-  width: 700px;
-  z-index: 1;
-  /* position: absolute; */
-  justify-items: center;
-  /* align-items: center; */
-  align-content: center;
-}
-
-.trace-animate {
-  animation: trace-bounce 0.5s;
-}
-@keyframes trace-bounce {
-  0%   { transform: scale(1); }
-  30%  { transform: scale(1.05); }
-  60%  { transform: scale(0.95); }
-  100% { transform: scale(1); }
+:host {
+  display: block;
+  position: relative;
+}
+
+#lido-svgContainer {
+  /* position: absolute; */
+  /* top: 0; */
+  /* left: 0; */
+  /* right: 0; */
+  /* bottom: 50px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+}
+
+svg {
+  width: 100%;
+  height: 100%;
+  /* max-height: calc(100vh - 50px); */
+  /* border: 1px solid black; */
+  touch-action: none;
+}
+
+#lido-draggableCircle {
+  cursor: pointer;
+  fill: #CF1565;
+  transition: fill 0.2s, r 0.2s;
+}
+
+.lido-blindTracing {
+  stroke: none !important;
+}
+
+.lido-blindFreeTrace {
+  stroke: none !important;
+}
+
+.lido-hovered {
+  cursor: grab;
+  fill: darkred;
+}
+
+#lido-controls {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: space-between;
+  padding: 10px;
+  background-color: #f0f0f0;
+  border-top: 1px solid #ccc;
+}
+
+button {
+  padding: 10px;
+  font-size: 16px;
+}
+
+@media (max-width: 600px) {
+  button {
+    padding: 8px;
+    font-size: 14px;
+  }
+}
+
+.lido-trace-path-green {
+  /* stroke: green !important; */
+}
+
+.lido-flow-indicator {
+  stroke: blue;
+  stroke-width: 2;
+  stroke-dasharray: 6, 6; /* Uniform dotted line */
+  fill: none;
+}
+
+.lido-trace {
+  height: 700px;
+  width: 700px;
+  z-index: 1;
+  /* position: absolute; */
+  justify-items: center;
+  /* align-items: center; */
+  align-content: center;
+}
+
+.trace-animate {
+  animation: trace-bounce 0.5s;
+}
+@keyframes trace-bounce {
+  0%   { transform: scale(1); }
+  30%  { transform: scale(1.05); }
+  60%  { transform: scale(0.95); }
+  100% { transform: scale(1); }
 }

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

@@ -712,7 +712,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '6be6d97477a80afc0275eef5b17718a5f43ce358', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '4e650d7142c61549aec021fd2a8da4e592eaf94e', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: '204d2999e3d6f0c36c991566e19608870e287d7a', class: "lido-trace", id: this.id, audio: this.audio, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex, "disable-speak": this.disableSpeak }, h("div", { key: '9c97878119641e2efc26fa7d711c7639276417ac', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {
@@ -974,7 +974,7 @@ export class LidoTrace {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Mode for the tracing interaction, defining how users interact with the SVG paths.\nOptions may include `\"noFlow\"`, `\"showFlow\"`, `\"freeTrace\"`, `\"blindTracing\"`, and `\"blindFreeTrace\"`"
+                    "text": "Mode for the tracing interaction, defining how users interact with the SVG paths.\r\nOptions may include `\"noFlow\"`, `\"showFlow\"`, `\"freeTrace\"`, `\"blindTracing\"`, and `\"blindFreeTrace\"`"
                 },
                 "attribute": "mode",
                 "reflect": false,

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

@@ -1,18 +1,18 @@
-.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-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;
+}

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

@@ -80,7 +80,7 @@ export class LidoWrap {
         };
     }
     render() {
-        return (h(Host, { key: '7e2bb4af31b5aff0f063a9f6c3cab96cdd25f31f', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: '03179b28e45692e61aff0bf3634ef0a72bab0726' })));
+        return (h(Host, { key: '50bc5770105477d0ef7cb080957c8d00198c8b09', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, minDrops: this.minDrops, maxDrops: this.maxDrops, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, disableSpeak: this.disableSpeak }, h("slot", { key: 'fcd1f5801e34171d1925e39f6c543f229a5d42bd' })));
     }
     static get is() { return "lido-wrap"; }
     static get originalStyleUrls() {
@@ -431,7 +431,7 @@ export class LidoWrap {
                 "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
@@ -448,7 +448,7 @@ export class LidoWrap {
                 "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
@@ -465,7 +465,7 @@ export class LidoWrap {
                 "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
@@ -482,7 +482,7 @@ export class LidoWrap {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Enables flex layout mode for the container.\nIf set to `\"true\"`, the component will use a flex layout (`display: flex`) instead of the default grid layout (`display: grid`).\nAdditionally, the `lido-wrap` class will be replaced with `lido-flex` to allow custom flex-specific styling."
+                    "text": "Enables flex layout mode for the container.\r\nIf set to `\"true\"`, the component will use a flex layout (`display: flex`) instead of the default grid layout (`display: grid`).\r\nAdditionally, the `lido-wrap` class will be replaced with `lido-flex` to allow custom flex-specific styling."
                 },
                 "attribute": "flex",
                 "reflect": false
@@ -535,7 +535,7 @@ export class LidoWrap {
                 "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,