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

package/dist/collection/components/scale/lido-balance.css

@@ -1,114 +1,145 @@
-#lido-balance {
-  position: relative;
-  height: 500px;
-  width: 1205px;
-  top: 20%;
-  left: -91px;
-  z-index: 0;
-}
-
-.lido-balance-symbol {
-  position: absolute;
-  top: 64%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  font-size: 5vw;     
-  font-weight: bold;
-  color: black;
-  pointer-events: none;
-  z-index: 999;
-}
-
-@media (orientation: portrait) {
-  #pivotimg {
-  position: absolute;
-  height:auto;
-  width: 23%;
-  bottom: 18%;     
-  left: 38%;
-  z-index: 100;
-    
-  }
-}
-
-
-@media (orientation: landscape) {
-  #pivotimg {
-    position: absolute;
-    height:auto;
-    width: 23%;
-    bottom: 8%;     
-  left: 38%;
-  z-index: 100;
-  }
-}
-
-.lido-balance .pivot svg {
-  width: 100%;
-  height: auto;
-}
-
-
-#scaleimg {
-  position: absolute;
-  width: 73%;
-  height: auto;
-  top: 61%;
-  left: 14%;
-  z-index: 90;
-}
-.lido-balance .scale svg {
-  width: 100%;
-  height: auto;
-}
-
-@media (orientation: landscape) {
-#handlerimg {
-  position: absolute;
-  width: 35%;
-  height: auto;
-  top:49%;
-  left: 2%;
-}}
-@media (orientation:portrait ) {
-#handlerimg {
-  position: absolute;
-  width: 35%;
-  height: auto;
-  top:53%;
-  left: 2%;
-}}
-.lido-balance .handler svg {
-  width: 100%;
-  height: auto;
-  fill: brown;
-}
-
-@media (orientation: landscape) {
-#handimg {
-  position: absolute;
-  width: 35%;
-  height: auto;
-  top: 49%;
-  right: 2%;
-}}
-@media (orientation:portrait) {
-#handimg {
-  position: absolute;
-  width: 35%;
-  height: auto;
-  top: 53%;
-  right: 2%;
-}}
-.lido-balance .hand svg {
-  width: 100%;
-  height: auto;
-  fill: brown;
-}
-
-.pivot svg path:nth-of-type(1) {
-  fill: brown;
-}
-.pivot svg path[d^="M78.9414"] {
-  fill: white;
-}
+#lido-balance {
+  position: relative;
+  height: 500px;
+  width: 1205px;
+  top: 20%;
+  left: -91px;
+  z-index: 0;
+}
+
+.lido-balance-symbol {
+  position: absolute;
+  top: 64%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  font-size: 5vw;     
+  font-weight: bold;
+  color: black;
+  pointer-events: none;
+  z-index: 999;
+}
+@media (orientation: portrait) {
+  .lido-balance-shadow {
+    height: 100px;
+    position: absolute;
+    top: 80%;
+    left: 28%;
+  }
+}
+
+@media (orientation: landscape) {
+  .lido-balance-shadow {
+    height: 100px ;
+    position: absolute;
+    top: 90%  ;
+    left: 33%  ;
+  }
+}
+@media (orientation: portrait) {
+  #pivotimg {
+  position: absolute;
+  height:auto;
+  width: 23%;
+  bottom: 18%;     
+  left: 38%;
+  z-index: 100;
+    
+  }
+}
+
+#pivotimg::after {
+  content: "";
+  position: absolute;
+  bottom: -30px;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 120%;        
+  height: 60px;     
+  background-image: url("https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Shadow.svg");
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+  pointer-events: none;
+  z-index: 10;
+}
+
+@media (orientation: landscape) {
+  #pivotimg {
+    position: absolute;
+    height:auto;
+    width: 23%;
+    bottom: 8%;     
+  left: 38%;
+  z-index: 100;
+  }
+}
+
+.lido-balance .pivot svg {
+  width: 100%;
+  height: auto;
+}
+
+
+#scaleimg {
+  position: absolute;
+  width: 73%;
+  height: auto;
+  top: 61%;
+  left: 14%;
+  z-index: 90;
+}
+.lido-balance .scale svg {
+  width: 100%;
+  height: auto;
+}
+
+@media (orientation: landscape) {
+#handlerimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top:49%;
+  left: 2%;
+}}
+@media (orientation:portrait ) {
+#handlerimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top:53%;
+  left: 2%;
+}}
+.lido-balance .handler svg {
+  width: 100%;
+  height: auto;
+  fill: brown;
+}
+
+@media (orientation: landscape) {
+#handimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top: 49%;
+  right: 2%;
+}}
+@media (orientation:portrait) {
+#handimg {
+  position: absolute;
+  width: 35%;
+  height: auto;
+  top: 53%;
+  right: 2%;
+}}
+.lido-balance .hand svg {
+  width: 100%;
+  height: auto;
+  fill: brown;
+}
+
+.pivot svg path:nth-of-type(1) {
+  fill: brown;
+}
+.pivot svg path[d^="M78.9414"] {
+  fill: white;
+}

package/dist/collection/components/scale/lido-balance.js

@@ -42,9 +42,7 @@ export class LidoBalance {
         this.handlerSvg = await this.fetchAndApplyFill(this.handlerimage);
     }
     componentDidLoad() {
-        setTimeout(() => {
-            this.animateBalance();
-        }, 4000);
+        this.animateBalance();
         this.leftParentEl = document.getElementById("leftparent");
         this.rightParentEl = document.getElementById("rightparent");
         initEventsForElement(this.el);
@@ -75,6 +73,7 @@ export class LidoBalance {
     async updateTilt(leftVal, rightVal) {
         const diff = rightVal - leftVal;
         const newTilt = Math.max(-5, Math.min(5, diff));
+        await new Promise(res => setTimeout(res, 350));
         this.tiltf = newTilt;
     }
     animateBalance() {
@@ -94,7 +93,8 @@ export class LidoBalance {
                 this.scaleEl.style.transformOrigin = '50% 80%';
             }
             if (this.leftParentEl && this.rightParentEl) {
-                const maxOffset = 60;
+                const isPortrait = window.innerHeight > window.innerWidth;
+                const maxOffset = isPortrait ? 40 : 60;
                 const offset = (this.currentAngle / this.maxTilt) * maxOffset;
                 this.leftParentEl.style.transform = `translateY(${-offset}px)`;
                 this.rightParentEl.style.transform = `translateY(${offset}px)`;
@@ -124,7 +124,7 @@ export class LidoBalance {
         };
     }
     render() {
-        return (h(Host, { key: '868cc05ae503a6e04039c615815102470eb402d4', id: "lido-balance", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString() }, h("div", { key: '2627a49d1ad5045bd9a3ac217354c9be98f1f52b', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: 'c5b2432f5e3c62ebbb7f17146f18e22e7e2b29bb', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: 'd5e8051aedb784189f19a1e7b0dfd645e95ed4a5', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: '3779886d4fc8dfadc0791f69cb87df78d5f843c8', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'df5d4094c302548bf64f166643a3f05d262d95b1', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
+        return (h(Host, { key: 'd1da72f1bf298dd7c81b0cfefa0e9e563ccbfff1', id: "lido-balance", "bg-color": "red", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString() }, h("div", { key: '737ab206a5156b402d4477a38567480f10419c14', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: '8bc60136950858d5d1b96c38ec4c0635024f8d24', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: '07049a6b5c8e75d831c9287b2b4a0e633791174b', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: '85361c27b1ab6fcc86969bfc9d4dff1df6040165', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'c4208582bfa1b63e4381d44d9a95e9c537dfbc84', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
     }
     static get is() { return "lido-balance"; }
     static get originalStyleUrls() {
@@ -205,7 +205,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Fill color applied to all loaded SVGs (pivot, scale, handler).\nDefaults to \"brown\"."
+                    "text": "Fill color applied to all loaded SVGs (pivot, scale, handler).\r\nDefaults to \"brown\"."
                 },
                 "attribute": "fill",
                 "reflect": false,
@@ -223,7 +223,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Initial tilt value of the balance.\nNegative = tilts left, Positive = tilts right."
+                    "text": "Initial tilt value of the balance.\r\nNegative = tilts left, Positive = tilts right."
                 },
                 "attribute": "tilt",
                 "reflect": false,
@@ -259,7 +259,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Action(s) to execute when the component enters the DOM.\nExample: trigger animations or audio cues."
+                    "text": "Action(s) to execute when the component enters the DOM.\r\nExample: trigger animations or audio cues."
                 },
                 "attribute": "on-entry",
                 "reflect": false,
@@ -277,7 +277,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS height of the component (responsive values allowed).\nDefault: \"auto\"."
+                    "text": "CSS height of the component (responsive values allowed).\r\nDefault: \"auto\"."
                 },
                 "attribute": "height",
                 "reflect": false,
@@ -295,7 +295,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS width of the component (responsive values allowed).\nDefault: \"auto\"."
+                    "text": "CSS width of the component (responsive values allowed).\r\nDefault: \"auto\"."
                 },
                 "attribute": "width",
                 "reflect": false,
@@ -313,7 +313,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Horizontal (X-axis) offset for positioning the component.\nDefault: \"0px\"."
+                    "text": "Horizontal (X-axis) offset for positioning the component.\r\nDefault: \"0px\"."
                 },
                 "attribute": "x",
                 "reflect": false,
@@ -331,7 +331,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Vertical (Y-axis) offset for positioning the component.\nDefault: \"0px\"."
+                    "text": "Vertical (Y-axis) offset for positioning the component.\r\nDefault: \"0px\"."
                 },
                 "attribute": "y",
                 "reflect": false,
@@ -349,7 +349,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Z-index for stacking order of the component.\nDefault: \"0\"."
+                    "text": "Z-index for stacking order of the component.\r\nDefault: \"0\"."
                 },
                 "attribute": "z",
                 "reflect": false,
@@ -367,7 +367,7 @@ export class LidoBalance {
                 "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,
@@ -421,7 +421,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Balance symbol shown when `showSymbol` is true.\nDefault: \"=\"."
+                    "text": "Balance symbol shown when `showSymbol` is true.\r\nDefault: \"=\"."
                 },
                 "attribute": "balance-symbol",
                 "reflect": true,
@@ -439,7 +439,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the balance symbol is currently displayed.\nCan be toggled with `revealSymbol()` and `hideSymbol()`."
+                    "text": "Whether the balance symbol is currently displayed.\r\nCan be toggled with `revealSymbol()` and `hideSymbol()`."
                 },
                 "attribute": "show-symbol",
                 "reflect": true,
@@ -457,7 +457,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Operation type used to calculate balance values.\nSupported: \"count\", \"add\", \"subtract\", etc."
+                    "text": "Operation type used to calculate balance values.\r\nSupported: \"count\", \"add\", \"subtract\", etc."
                 },
                 "attribute": "operation",
                 "reflect": false,

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: '7a626d9f00854cf190c08524153086d0e9f139af', 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%;
 }