lido-player 0.0.2-beta-19-dev → 0.0.2-beta-22-dev

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

@@ -1,145 +1,174 @@
-#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;
-}
+#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%;
+  }
+}
+
+.balance-plate-feedback {
+  position: absolute;
+  top: 52%;
+  width: 34%;
+  height: 12px;
+  border-radius: 0 0 8px 8px;
+  opacity: 0.95;
+  box-shadow: 0 9px 10px -2px rgba(70, 0, 0, 0.6);
+  pointer-events: none;
+  z-index: 95;
+}
+
+.balance-plate-feedback[aria-hidden='true'] { display: none; }
+.balance-plate-feedback.left { left: 2.5%; }
+.balance-plate-feedback.right { right: 2.5%; }
+.balance-plate-feedback::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 4%;
+  width: 92%;
+  height: 11px;
+  border-radius: 0 0 8px 8px;
+  background: inherit;
+  opacity: 0.75;
+  filter: blur(5px);
+  pointer-events: none;
+}
+
+@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

@@ -115,6 +115,7 @@ export class LidoBalance {
          * Current computed value of the right side of the balance.
          */
         this.rightVal = 0;
+        this.feedbackColor = '';
         this.currentAngle = 0;
     }
     async revealSymbol() {
@@ -123,12 +124,24 @@ export class LidoBalance {
     async hideSymbol() {
         this.showSymbol = false;
     }
+    async setFeedbackColor(color = '') {
+        this.feedbackColor = color;
+    }
     async componentWillLoad() {
+        this.initializeInitialSymbol();
         this.updateStyles();
         this.pivotSvg = await this.fetchAndApplyFill(convertUrlToRelative(this.pivotimage));
         this.scaleSvg = await this.fetchAndApplyFill(convertUrlToRelative(this.scaleimage));
         this.handlerSvg = await this.fetchAndApplyFill(convertUrlToRelative(this.handlerimage));
     }
+    initializeInitialSymbol() {
+        var _a, _b;
+        const container = (_a = this.el) === null || _a === void 0 ? void 0 : _a.closest('lido-container');
+        const objective = (_b = container === null || container === void 0 ? void 0 : container.getAttribute('objective')) === null || _b === void 0 ? void 0 : _b.trim();
+        if (objective === '>' || objective === '<' || objective === '=')
+            this.balanceSymbol = objective;
+        this.showSymbol = true;
+    }
     componentDidLoad() {
         this.animateBalance();
         this.leftParentEl = document.getElementById("leftparent");
@@ -193,6 +206,11 @@ export class LidoBalance {
                 const offset = (this.currentAngle / this.maxTilt) * maxOffset;
                 this.leftHandleEl.style.transform = `translateY(${-offset}px)`;
                 this.rightHandleEl.style.transform = `translateY(${offset}px)`;
+                const feedbackOffset = (this.currentAngle / this.maxTilt) * maxOffset;
+                if (this.leftFeedbackEl)
+                    this.leftFeedbackEl.style.transform = `translateY(${-feedbackOffset}px)`;
+                if (this.rightFeedbackEl)
+                    this.rightFeedbackEl.style.transform = `translateY(${feedbackOffset}px)`;
             }
             this.animationFrameId = requestAnimationFrame(rotate);
         };
@@ -213,7 +231,7 @@ export class LidoBalance {
         };
     }
     render() {
-        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 : '')));
+        return (h(Host, { key: 'b455b2b5d330a2125f7fb8b4e2165d2e6e6bc1a0', 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: '657f471d397dd7e3476d5b6e35ee4495c8f2db4c', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: '7b91e1919db1fdbcddf79f43a9ad51695b7c806f', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: '137a1440d55776d0771d8cd71741202c224896db', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: 'd6e0deae63a4e219757240e585d582fb5a72a071', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: 'ef51f98937cf10c017c8289359c92c24e7316a16', class: "balance-plate-feedback left", ref: (el) => (this.leftFeedbackEl = el), style: { backgroundColor: this.feedbackColor }, "aria-hidden": !this.feedbackColor }), h("div", { key: 'f21aade8543977b657a4d2fbcd623cf8769459a0', class: "balance-plate-feedback right", ref: (el) => (this.rightFeedbackEl = el), style: { backgroundColor: this.feedbackColor }, "aria-hidden": !this.feedbackColor }), h("div", { key: '0470afcef443dbeb69a7d651220d5ff50be3836e', id: "balanceSymbol", class: "lido-balance-symbol", "aria-hidden": !this.showSymbol }, this.showSymbol ? this.balanceSymbol : '')));
     }
     static get is() { return "lido-balance"; }
     static get originalStyleUrls() {
@@ -301,7 +319,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\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -321,7 +339,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."
                 },
                 "getter": false,
                 "setter": false,
@@ -361,7 +379,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."
                 },
                 "getter": false,
                 "setter": false,
@@ -381,7 +399,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\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -401,7 +419,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\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -421,7 +439,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\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -441,7 +459,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\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -461,7 +479,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\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -481,7 +499,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\")."
                 },
                 "getter": false,
                 "setter": false,
@@ -541,7 +559,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: \"=\"."
                 },
                 "getter": false,
                 "setter": false,
@@ -561,7 +579,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()`."
                 },
                 "getter": false,
                 "setter": false,
@@ -581,7 +599,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."
                 },
                 "getter": false,
                 "setter": false,
@@ -599,7 +617,8 @@ export class LidoBalance {
             "style": {},
             "tiltf": {},
             "leftVal": {},
-            "rightVal": {}
+            "rightVal": {},
+            "feedbackColor": {}
         };
     }
     static get methods() {
@@ -638,6 +657,27 @@ export class LidoBalance {
                     "tags": []
                 }
             },
+            "setFeedbackColor": {
+                "complexType": {
+                    "signature": "(color?: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "color",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
             "updateTilt": {
                 "complexType": {
                     "signature": "(leftVal: number, rightVal: number) => Promise<void>",