lido-player 0.0.2-beta-16-dev → 0.0.2-beta-17

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

@@ -1,145 +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) {
-  .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;
-}
+#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: var(--lido-balance-shadow-url);
+  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

@@ -1,19 +1,19 @@
-import { h, Host } from "@stencil/core";
+import { h, Host, getAssetPath } from "@stencil/core";
 import { initEventsForElement, convertUrlToRelative, parseProp } from "../../utils/utils";
 export class LidoBalance {
     constructor() {
         /**
-        * URL of the pivot (base stand) image used in the balance visualization.
-        */
-        this.pivotimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Display%20stand.svg';
+         * URL of the pivot (base stand) image used in the balance visualization.
+         */
+        this.pivotimage = '';
         /**
          * URL of the scale (bar) image that tilts based on the weight difference.
          */
-        this.scaleimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Bar.svg';
+        this.scaleimage = '';
         /**
          * URL of the handler (side stands / hooks) image for the balance.
          */
-        this.handlerimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Stands.svg';
+        this.handlerimage = '';
         /**
          * Fill color applied to all loaded SVGs (pivot, scale, handler).
          * Defaults to "brown".
@@ -161,7 +161,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));
+        await new Promise(res => setTimeout(res, 700));
         this.tiltf = newTilt;
     }
     animateBalance() {
@@ -209,10 +209,11 @@ export class LidoBalance {
             display: parseProp(`${this.visible}`, orientation) === "true" ? 'flex' : 'none',
             margin: parseProp(this.margin, orientation),
             padding: parseProp(this.padding, orientation),
+            '--lido-balance-shadow-url': `url(${getAssetPath('assets/Shadow.svg')})`,
         };
     }
     render() {
-        return (h(Host, { key: '2d7a59cde91392b0e19efb592a81e6aa9466654d', id: "lido-balance", "bg-color": "red", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString(), "pivot-image": this.pivotSvg, "scale-image": this.scaleSvg, "handler-image": this.handlerSvg }, h("div", { key: '7048f924b6f45de2023f28e19c486810e109d94e', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: '05c1ab110c0c4ca918fa452b5d0cfbe57d3e6a1a', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: '5db42befb11d6505a6167d93e8e9015d65dc0f8a', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: 'bce64e72aeaf1a99d6ef381da369d393f300e025', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'ee8b45ff347a6421169c9c7fce66b9079e930424', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
+        return (h(Host, { key: 'dea6f583bb2de36cfe7ee5bf401cdcaf975685b8', id: "lido-balance", "bg-color": "red", onEntry: this.onEntry, class: "lido-balance", tilt: this.tilt.toString(), style: this.style, operation: this.operation.toString(), "pivot-image": this.pivotSvg, "scale-image": this.scaleSvg, "handler-image": this.handlerSvg }, h("div", { key: 'da588147b7aeafc8a529c8f8399e5acbabbf3bb7', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: 'f1a0aa6b8f080a0db945c44b2a1cbb715541db4f', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: 'e1c742d85d924a6c24c6c8103dcfcf2d41533b88', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: 'c1ea8165c0d2c590616edee9b189e8a3d4198c1a', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'd666d445b0a5fd04394c335ea1494ac7e80f1b07', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
     }
     static get is() { return "lido-balance"; }
     static get originalStyleUrls() {
@@ -225,6 +226,7 @@ export class LidoBalance {
             "$": ["lido-balance.css"]
         };
     }
+    static get assetsDirs() { return ["assets"]; }
     static get properties() {
         return {
             "pivotimage": {
@@ -245,7 +247,7 @@ export class LidoBalance {
                 "setter": false,
                 "reflect": false,
                 "attribute": "pivotimage",
-                "defaultValue": "'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Display%20stand.svg'"
+                "defaultValue": "''"
             },
             "scaleimage": {
                 "type": "string",
@@ -265,7 +267,7 @@ export class LidoBalance {
                 "setter": false,
                 "reflect": false,
                 "attribute": "scaleimage",
-                "defaultValue": "'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Bar.svg'"
+                "defaultValue": "''"
             },
             "handlerimage": {
                 "type": "string",
@@ -285,7 +287,7 @@ export class LidoBalance {
                 "setter": false,
                 "reflect": false,
                 "attribute": "handlerimage",
-                "defaultValue": "'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Stands.svg'"
+                "defaultValue": "''"
             },
             "fill": {
                 "type": "string",
@@ -299,7 +301,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Fill color applied to all loaded SVGs (pivot, scale, handler).\r\nDefaults to \"brown\"."
+                    "text": "Fill color applied to all loaded SVGs (pivot, scale, handler).\nDefaults to \"brown\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -319,7 +321,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Initial tilt value of the balance.\r\nNegative = tilts left, Positive = tilts right."
+                    "text": "Initial tilt value of the balance.\nNegative = tilts left, Positive = tilts right."
                 },
                 "getter": false,
                 "setter": false,
@@ -359,7 +361,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Action(s) to execute when the component enters the DOM.\r\nExample: trigger animations or audio cues."
+                    "text": "Action(s) to execute when the component enters the DOM.\nExample: trigger animations or audio cues."
                 },
                 "getter": false,
                 "setter": false,
@@ -379,7 +381,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS height of the component (responsive values allowed).\r\nDefault: \"auto\"."
+                    "text": "CSS height of the component (responsive values allowed).\nDefault: \"auto\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -399,7 +401,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS width of the component (responsive values allowed).\r\nDefault: \"auto\"."
+                    "text": "CSS width of the component (responsive values allowed).\nDefault: \"auto\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -419,7 +421,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Horizontal (X-axis) offset for positioning the component.\r\nDefault: \"0px\"."
+                    "text": "Horizontal (X-axis) offset for positioning the component.\nDefault: \"0px\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -439,7 +441,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Vertical (Y-axis) offset for positioning the component.\r\nDefault: \"0px\"."
+                    "text": "Vertical (Y-axis) offset for positioning the component.\nDefault: \"0px\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -459,7 +461,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Z-index for stacking order of the component.\r\nDefault: \"0\"."
+                    "text": "Z-index for stacking order of the component.\nDefault: \"0\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -479,7 +481,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Controls component visibility.\r\nAccepts boolean (`true`/`false`) or string (\"true\"/\"false\")."
+                    "text": "Controls component visibility.\nAccepts boolean (`true`/`false`) or string (\"true\"/\"false\")."
                 },
                 "getter": false,
                 "setter": false,
@@ -539,7 +541,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Balance symbol shown when `showSymbol` is true.\r\nDefault: \"=\"."
+                    "text": "Balance symbol shown when `showSymbol` is true.\nDefault: \"=\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -559,7 +561,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the balance symbol is currently displayed.\r\nCan be toggled with `revealSymbol()` and `hideSymbol()`."
+                    "text": "Whether the balance symbol is currently displayed.\nCan be toggled with `revealSymbol()` and `hideSymbol()`."
                 },
                 "getter": false,
                 "setter": false,
@@ -579,7 +581,7 @@ export class LidoBalance {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Operation type used to calculate balance values.\r\nSupported: \"count\", \"add\", \"subtract\", etc."
+                    "text": "Operation type used to calculate balance values.\nSupported: \"count\", \"add\", \"subtract\", etc."
                 },
                 "getter": false,
                 "setter": false,