lido-player 0.0.2-beta-18-dev → 0.0.2-beta-21-dev

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

@@ -1,217 +1,217 @@
-.lido-shape {
-  position: absolute;
-  top: var(--y);
-  left: var(--x);
-  display: var(--display);
-  z-index: var(--z);
-  justify-content: center;
-  align-items: center;
-}
-
-.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-trapezium {
-  width: var(--trapeziumWidth);
-  height: var(--trapeziumHeight);
-  background-color: var(--bgColor);
-  clip-path: polygon(
-    20% 0%,   /* top left */
-    80% 0%,   /* top right */
-    100% 100%,/* bottom right */
-    0% 100%  /* bottom left */
-  );
-}
-
-.lido-hexagon {
-  width: var(--hexagonWidth);
-  height: var(--hexagonHeight);
-  background-color: var(--bgColor);
-  clip-path: polygon(
-    25% 0%,   /* top left */
-    75% 0%,   /* top right */
-    100% 50%, /* right */
-    75% 100%, /* bottom right */
-    25% 100%, /* bottom left */
-    0% 50%   /* left */
-  );
-}
-
-.lido-cone {
-  width: var(--coneWidth);
-  height: var(--coneHeight);
-  background-color: var(--bgColor);
-  clip-path: polygon(
-    /* Curved top (approximated arc) */
-    15% 10%,
-    25% 4%,
-    35% 1%,
-    50% 0%,
-    65% 1%,
-    75% 4%,
-    85% 10%,
-
-    /* Bottom tip */
-    50% 100%
-  );
-}
-
-
-.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);
-}
-
-/* cube */
-
-.cube {
-  width: 100%;
-  height: 100%;
-  position: relative;
-  transform-style: preserve-3d;
-  /* animation: spin 6s infinite linear; */
-  transform: rotateX(-20deg) rotateY(45deg);
-}
-
-/* all faces */
-.face {
-  position: absolute;
-  width: var(--face-width,150px);
-  height: var(--face-width,150px);
-  background: var(--face-bg-color,150px); /* cube color */
-  box-shadow: inset -20px -20px 40px rgba(0,0,0,0.3);
-}
-
-/* move faces into a cube shape */
-.front  { transform: rotateY(  0deg) translateZ(var(--face-translate, 75px)); }
-.back   { transform: rotateY(180deg) translateZ(var(--face-translate, 75px)); }
-.right  { transform: rotateY( 90deg) translateZ(var(--face-translate, 75px)); }
-.left   { transform: rotateY(-90deg) translateZ(var(--face-translate, 75px)); }
-.top    { transform: rotateX( 90deg) translateZ(var(--face-translate, 75px)); }
-.bottom { transform: rotateX(-90deg) translateZ(var(--face-translate, 75px)); }
-
-
-
-/* Cylinder */
-.lido-cylinder {
-  /* whatever values/units you want */
-  width: var(--width);
-  height: var(--height);
-  border-radius: 100% / 80px;
-  background: 
-    radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),
-    radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),
-    red;
-}
-
-/* sphere */
-.lido-sphere {
-  position: relative;
-  width: var(--width);
-  height: var(--width);
-  border-radius: 50%;
-  background:
-    radial-gradient(circle at 30% 18%, #22d4ff 0%, #18c2f4 9%, rgba(24, 194, 244, 0.2) 18%, transparent 30%),
-    radial-gradient(circle at 36% 26%, #0f8fff 0%, #0b67e6 30%, #083fbe 62%, #120084 100%);
-  box-shadow:
-    inset -22px -26px 40px rgba(5, 0, 70, 0.38),
-    inset 14px 14px 24px rgba(255, 255, 255, 0.05),
-    0 4px 2px rgba(0, 0, 0, 0.78);
-  overflow: visible;
-}
-
-.lido-sphere::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  width: 100%;
-  height: 16%;
-  border-radius: 50%;
-  border-top: 2px dashed rgba(0, 0, 0, 0.65);
-  border-bottom: 3px solid rgba(0, 0, 0, 0.85);
-  box-sizing: border-box;
-  transform: translate(-50%, -50%);
-  pointer-events: none;
+.lido-shape {
+  position: absolute;
+  top: var(--y);
+  left: var(--x);
+  display: var(--display);
+  z-index: var(--z);
+  justify-content: center;
+  align-items: center;
+}
+
+.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-trapezium {
+  width: var(--trapeziumWidth);
+  height: var(--trapeziumHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(
+    20% 0%,   /* top left */
+    80% 0%,   /* top right */
+    100% 100%,/* bottom right */
+    0% 100%  /* bottom left */
+  );
+}
+
+.lido-hexagon {
+  width: var(--hexagonWidth);
+  height: var(--hexagonHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(
+    25% 0%,   /* top left */
+    75% 0%,   /* top right */
+    100% 50%, /* right */
+    75% 100%, /* bottom right */
+    25% 100%, /* bottom left */
+    0% 50%   /* left */
+  );
+}
+
+.lido-cone {
+  width: var(--coneWidth);
+  height: var(--coneHeight);
+  background-color: var(--bgColor);
+  clip-path: polygon(
+    /* Curved top (approximated arc) */
+    15% 10%,
+    25% 4%,
+    35% 1%,
+    50% 0%,
+    65% 1%,
+    75% 4%,
+    85% 10%,
+
+    /* Bottom tip */
+    50% 100%
+  );
+}
+
+
+.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);
+}
+
+/* cube */
+
+.cube {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  transform-style: preserve-3d;
+  /* animation: spin 6s infinite linear; */
+  transform: rotateX(-20deg) rotateY(45deg);
+}
+
+/* all faces */
+.face {
+  position: absolute;
+  width: var(--face-width,150px);
+  height: var(--face-width,150px);
+  background: var(--face-bg-color,150px); /* cube color */
+  box-shadow: inset -20px -20px 40px rgba(0,0,0,0.3);
+}
+
+/* move faces into a cube shape */
+.front  { transform: rotateY(  0deg) translateZ(var(--face-translate, 75px)); }
+.back   { transform: rotateY(180deg) translateZ(var(--face-translate, 75px)); }
+.right  { transform: rotateY( 90deg) translateZ(var(--face-translate, 75px)); }
+.left   { transform: rotateY(-90deg) translateZ(var(--face-translate, 75px)); }
+.top    { transform: rotateX( 90deg) translateZ(var(--face-translate, 75px)); }
+.bottom { transform: rotateX(-90deg) translateZ(var(--face-translate, 75px)); }
+
+
+
+/* Cylinder */
+.lido-cylinder {
+  /* whatever values/units you want */
+  width: var(--width);
+  height: var(--height);
+  border-radius: 100% / 80px;
+  background: 
+    radial-gradient(50% 40px at 50% 40px, #0003 99.99%, #0000 0),
+    radial-gradient(50% 40px at 50% calc(100% - 40px), #fff3 99.99%, #0000 0),
+    red;
+}
+
+/* sphere */
+.lido-sphere {
+  position: relative;
+  width: var(--width);
+  height: var(--width);
+  border-radius: 50%;
+  background:
+    radial-gradient(circle at 30% 18%, #22d4ff 0%, #18c2f4 9%, rgba(24, 194, 244, 0.2) 18%, transparent 30%),
+    radial-gradient(circle at 36% 26%, #0f8fff 0%, #0b67e6 30%, #083fbe 62%, #120084 100%);
+  box-shadow:
+    inset -22px -26px 40px rgba(5, 0, 70, 0.38),
+    inset 14px 14px 24px rgba(255, 255, 255, 0.05),
+    0 4px 2px rgba(0, 0, 0, 0.78);
+  overflow: visible;
+}
+
+.lido-sphere::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 16%;
+  border-radius: 50%;
+  border-top: 2px dashed rgba(0, 0, 0, 0.65);
+  border-bottom: 3px solid rgba(0, 0, 0, 0.85);
+  box-sizing: border-box;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
 }

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

@@ -159,8 +159,8 @@ export class LidoShape {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (h(Host, { key: 'b252b5dbf4624939ef2917a385fc95061695bc64', 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 }, this.shapeType === "lido-cube" &&
-            h("div", { key: '573e3aaee8ada8da25b434058962f034ee7bcd2a', class: "cube" }, h("div", { key: '4d5bb38b531a0a4cc6ffa9df25312b41718c81d2', class: "face top" }), h("div", { key: '01f93868cbc55844969e50256f505391323c4cbe', class: "face bottom" }), h("div", { key: '44ab31e212d6dd0e321a30154e0bd6cba61f5367', class: "face left" }), h("div", { key: '28b970d25d8ce54c4f96d418b05c559964a1e882', class: "face right" }), h("div", { key: '6da6d820eaa308e2401e3063de298be165428ff4', class: "face front" }), h("div", { key: 'caaee0b7580ad10f925a610650098cbe7abc31a4', class: "face back" }))));
+        return (h(Host, { key: '326d0e58f7d2bd177ae04c4ac8eac74b277a0392', 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 }, this.shapeType === "lido-cube" &&
+            h("div", { key: 'f5f762fa74733659b970d5c476da5da10cc9f4c5', class: "cube" }, h("div", { key: '5324a04af38cfbc5eca4c5aa32df51a3e0e5443c', class: "face top" }), h("div", { key: 'a265a3ebfe41e0da844ac934c6af1045cde6cfad', class: "face bottom" }), h("div", { key: '58ce610d7fb003313c3e8ce3be019142086919e5', class: "face left" }), h("div", { key: '9c8ee3317a0331f9c3eeb3527963999765c10144', class: "face right" }), h("div", { key: 'eb674c98aa795f89094b1d510b59f96f742d7c6a', class: "face front" }), h("div", { key: '918b2aa2d5babbb700838d08dbdad100fc846f54', class: "face back" }))));
     }
     static get is() { return "lido-shape"; }
     static get originalStyleUrls() {
@@ -227,7 +227,7 @@ export class LidoShape {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The height of the shape (CSS value, e.g., '100px', '50%').\r\nThis is ignored for polygons."
+                    "text": "The height of the shape (CSS value, e.g., '100px', '50%').\nThis is ignored for polygons."
                 },
                 "getter": false,
                 "setter": false,
@@ -247,7 +247,7 @@ export class LidoShape {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The width of the shape (CSS value, e.g., '100px', '50%').\r\nThis is ignored for polygons."
+                    "text": "The width of the shape (CSS value, e.g., '100px', '50%').\nThis is ignored for polygons."
                 },
                 "getter": false,
                 "setter": false,
@@ -367,7 +367,7 @@ export class LidoShape {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Background color of the shape (CSS color value, e.g., '#FFFFFF', 'blue').\r\nThis is ignored for polygons."
+                    "text": "Background color of the shape (CSS color value, e.g., '#FFFFFF', 'blue').\nThis is ignored for polygons."
                 },
                 "getter": false,
                 "setter": false,
@@ -607,7 +607,7 @@ export class LidoShape {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,

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

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

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

@@ -87,13 +87,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 class="lido-slide-svg"$1>
-          ${clipPathDef}
+            svgText = svgText.replace(/<svg([^>]*)>/, `<svg class="lido-slide-svg"$1>
+          ${clipPathDef}
         `);
             svgText = svgText.replace(/<rect([^>]*)\/?>/, `<rect id="fillArea" $1 clip-path="url(#clipGlass)" />`);
             this.svgContent = svgText;
@@ -218,7 +218,7 @@ export class LidoSlideFill {
         }
     }
     render() {
-        return (h(Host, { key: 'a19d35ba055a5ed9ab38adb02f37c9cb634c272d', 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: '987f42b3c213f570714b2ddf600243e83c3b12ad', innerHTML: this.svgContent, class: "lido-svg-element" })));
+        return (h(Host, { key: 'ba987e7ba4a36b96763c6e434be58f5e64f59d88', 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: '904d482335451cf420b56a24f0ca3a279db4abc8', innerHTML: this.svgContent, class: "lido-svg-element" })));
     }
     static get is() { return "lido-slide-fill"; }
     static get originalStyleUrls() {
@@ -398,7 +398,7 @@ export class LidoSlideFill {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -417,7 +417,7 @@ export class LidoSlideFill {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS padding value applied to each child element inside the container.\r\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS padding value applied to each child element inside the container.\nAccepts standard CSS padding formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -437,7 +437,7 @@ export class LidoSlideFill {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS filter to apply border radius to the image.\r\nExample: '10px' for  images."
+                    "text": "CSS filter to apply border radius to the image.\nExample: '10px' for  images."
                 },
                 "getter": false,
                 "setter": false,
@@ -457,7 +457,7 @@ export class LidoSlideFill {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Fill amount to display inside the SVG rect.\r\nAccepts values like \"30%\" or \"30\" (treated as percentage of fill)"
+                    "text": "Fill amount to display inside the SVG rect.\nAccepts values like \"30%\" or \"30\" (treated as percentage of fill)"
                 },
                 "getter": false,
                 "setter": false,
@@ -476,7 +476,7 @@ export class LidoSlideFill {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Type of number to be displayed on the ruler.\r\nCan be 'integer', 'decimal', or 'fraction'."
+                    "text": "Type of number to be displayed on the ruler.\nCan be 'integer', 'decimal', or 'fraction'."
                 },
                 "getter": false,
                 "setter": false,
@@ -594,7 +594,7 @@ export class LidoSlideFill {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "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"
+                    "text": "Determines the direction in which the rect fill should grow:\n- 'vertical': from bottom to top\n- 'horizontal': from left to right"
                 },
                 "getter": false,
                 "setter": false,