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

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

@@ -1,96 +1,96 @@
-.lido-shape {
-  position: absolute;
-  top: var(--y);
-  left: var(--x);
-  display: var(--display);
-  z-index: var(--z);
-}
-
-.lido-rectangle {
-  border-radius: 0;
-}
-
-.lido-circle {
-  width: var(--width); /* Ensures width is always used for both dimensions */
-  height: var(--width); /* Make height equal to width for a perfect circle */
-  border-radius: 50%; /* 50% border-radius for a perfect circle */
-  background-color: var(--bgColor);
-}
-
-.lido-ellipse {
-  width: var(--width);
-  height: var(--height);
-  border-radius: 50%; /* Create an ellipse shape */
-  background-color: var(--bgColor);
-}
-
-/* other shapes */
-
-.lido-triangle {
-  width: var(--triangleWidth);
-  height: var(--triangleHeight);
-  background-color: var(--bgColor);
-  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
-}
-
-.lido-rightTriangle {
-  width: var(--triangleWidth);
-  height: var(--triangleHeight);
-  background-color: var(--bgColor);
-  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
-}
-
-.lido-leftTriangle {
-  width: var(--triangleWidth);
-  height: var(--triangleHeight);
-  background-color: var(--triangleBgColor);
-  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
-}
-
-.lido-parallelogram {
-  width: var(--paralleWidth);
-  height: var(--paralleHeight);
-  transform: skew(20deg);
-}
-
-.lido-star {
-  width: var(--starWidth);
-  height: var(--starHeight);
-  background-color: var(--starBgColor);
-  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
-}
-
-.lido-pentagon {
-  width: var(--pentagonWidth);
-  height: var(--pentagonHeight);
-  background-color: var(--pentagonBgColor);
-  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
-}
-
-.lido-heptagon {
-  width: var(--heptagonWidth);
-  height: var(--heptagonHeight);
-  background-color: var(--heptagonBgColor);
-  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
-}
-
-.lido-octagon {
-  width: var(--octagonWidth);
-  height: var(--octagonHeight);
-  background-color: var(--octagonBgColor);
-  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
-}
-
-.lido-rhombus {
-  width: var(--rhombusWidth);
-  height: var(--rhombusHeight);
-  background-color: var(--rhombusBgColor);
-  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-}
-
-.lido-heart {
-  height: var(--heartHeight);
-  width: var(--heartWidth);
-  border-image: radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;
-  clip-path: polygon(-41% 0, 50% 91%, 141% 0);
-}
+.lido-shape {
+  position: absolute;
+  top: var(--y);
+  left: var(--x);
+  display: var(--display);
+  z-index: var(--z);
+}
+
+.lido-rectangle {
+  border-radius: 0;
+}
+
+.lido-circle {
+  width: var(--width); /* Ensures width is always used for both dimensions */
+  height: var(--width); /* Make height equal to width for a perfect circle */
+  border-radius: 50%; /* 50% border-radius for a perfect circle */
+  background-color: var(--bgColor);
+}
+
+.lido-ellipse {
+  width: var(--width);
+  height: var(--height);
+  border-radius: 50%; /* Create an ellipse shape */
+  background-color: var(--bgColor);
+}
+
+/* other shapes */
+
+.lido-triangle {
+  width: var(--triangleWidth);
+  height: var(--triangleHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(50% 0%, 100% 100%, 0% 100%);
+}
+
+.lido-rightTriangle {
+  width: var(--triangleWidth);
+  height: var(--triangleHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(100% 0%, 100% 100%, 0% 100%);
+}
+
+.lido-leftTriangle {
+  width: var(--triangleWidth);
+  height: var(--triangleHeight);
+  background-color: var(--triangleBgColor);
+  clip-path: polygon(0% 0%, 100% 100%, 0% 100%);
+}
+
+.lido-parallelogram {
+  width: var(--paralleWidth);
+  height: var(--paralleHeight);
+  transform: skew(20deg);
+}
+
+.lido-star {
+  width: var(--starWidth);
+  height: var(--starHeight);
+  background-color: var(--starBgColor);
+  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
+}
+
+.lido-pentagon {
+  width: var(--pentagonWidth);
+  height: var(--pentagonHeight);
+  background-color: var(--pentagonBgColor);
+  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
+}
+
+.lido-heptagon {
+  width: var(--heptagonWidth);
+  height: var(--heptagonHeight);
+  background-color: var(--heptagonBgColor);
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+
+.lido-octagon {
+  width: var(--octagonWidth);
+  height: var(--octagonHeight);
+  background-color: var(--octagonBgColor);
+  clip-path: polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%);
+}
+
+.lido-rhombus {
+  width: var(--rhombusWidth);
+  height: var(--rhombusHeight);
+  background-color: var(--rhombusBgColor);
+  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+}
+
+.lido-heart {
+  height: var(--heartHeight);
+  width: var(--heartWidth);
+  border-image: radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;
+  clip-path: polygon(-41% 0, 50% 91%, 141% 0);
+}

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

@@ -54,7 +54,7 @@ export class LidoShape {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: '6712d974e85c5d82dabb5ed0d482ece4b18af16a', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: 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, "disable-speak": this.disableSpeak }));
+        return (h(Host, { key: 'de698fc2f34f63c9bbdf1e308772cf47ebc80d9c', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, "tab-index": this.tabIndex, style: 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, "disable-speak": this.disableSpeak }));
     }
     static get is() { return "lido-shape"; }
     static get originalStyleUrls() {
@@ -117,7 +117,7 @@ export class LidoShape {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The height of the shape (CSS value, e.g., '100px', '50%').\nThis is ignored for polygons."
+                    "text": "The height of the shape (CSS value, e.g., '100px', '50%').\r\nThis is ignored for polygons."
                 },
                 "attribute": "height",
                 "reflect": false,
@@ -135,7 +135,7 @@ export class LidoShape {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The width of the shape (CSS value, e.g., '100px', '50%').\nThis is ignored for polygons."
+                    "text": "The width of the shape (CSS value, e.g., '100px', '50%').\r\nThis is ignored for polygons."
                 },
                 "attribute": "width",
                 "reflect": false,
@@ -243,7 +243,7 @@ export class LidoShape {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Background color of the shape (CSS color value, e.g., '#FFFFFF', 'blue').\nThis is ignored for polygons."
+                    "text": "Background color of the shape (CSS color value, e.g., '#FFFFFF', 'blue').\r\nThis is ignored for polygons."
                 },
                 "attribute": "bg-color",
                 "reflect": false,
@@ -459,7 +459,7 @@ export class LidoShape {
                 "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/slideFill/lido-slide-fill.css

@@ -1,4 +1,4 @@
-.svg-element, svg {
-  width: 100%;
-  height: 100%;
+.svg-element, svg {
+  width: 100%;
+  height: 100%;
 }

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,