lido-player 0.0.2-beta-25-dev → 0.0.2-beta-26-dev

package/dist/collection/components/scale/assets/Shadow.svg

@@ -1,9 +1,9 @@
-<svg width="120" height="60" viewBox="0 0 120 60" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <defs>
-    <radialGradient id="shadowGradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60 34) rotate(90) scale(34 46)">
-      <stop offset="0" stop-color="#000000" stop-opacity="0.35"/>
-      <stop offset="1" stop-color="#000000" stop-opacity="0"/>
-    </radialGradient>
-  </defs>
-  <ellipse cx="60" cy="34" rx="46" ry="14" fill="url(#shadowGradient)"/>
-</svg>
+<svg width="120" height="60" viewBox="0 0 120 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <radialGradient id="shadowGradient" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(60 34) rotate(90) scale(34 46)">
+      <stop offset="0" stop-color="#000000" stop-opacity="0.35"/>
+      <stop offset="1" stop-color="#000000" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <ellipse cx="60" cy="34" rx="46" ry="14" fill="url(#shadowGradient)"/>
+</svg>

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

@@ -1,174 +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%;
-  }
-}
-
-.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;
-}
+#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

@@ -231,7 +231,7 @@ export class LidoBalance {
         };
     }
     render() {
-        return (h(Host, { key: 'e0e67ca26ec3906d9f085686dcb7c12f5022c35c', 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: 'e69bada9ab75d0d73dbf2b999b52e149125d213b', innerHTML: this.pivotSvg, id: "pivotimg", class: "pivot" }), h("div", { key: '2b0cc721fe9e90c4343e9401ce6b2c5a6c689d2e', innerHTML: this.scaleSvg, id: "scaleimg", class: "scale", ref: (el) => (this.scaleEl = el) }), h("div", { key: 'd2acc209d2fb3e74c148b8464895bec91f9e32ad', innerHTML: this.handlerSvg, id: "handlerimg", class: "handler", ref: (el) => (this.leftHandleEl = el) }), h("div", { key: 'e5c1c7f4143e97c30b0866dde1919667b3ec4a61', innerHTML: this.handlerSvg, id: "handimg", class: "hand", ref: (el) => (this.rightHandleEl = el) }), h("div", { key: '425602ff5dcbd12479651c7ed3f9585dcc1fcf06', class: "balance-plate-feedback left", ref: (el) => (this.leftFeedbackEl = el), style: { backgroundColor: this.feedbackColor }, "aria-hidden": !this.feedbackColor }), h("div", { key: '2bb09b99cc5ed98773c65465a1c6f28c89e97800', class: "balance-plate-feedback right", ref: (el) => (this.rightFeedbackEl = el), style: { backgroundColor: this.feedbackColor }, "aria-hidden": !this.feedbackColor }), h("div", { key: 'cc31758d61122a9e7ecca387d4e62fcab55516a4', 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() {
@@ -319,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,
@@ -339,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,
@@ -379,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,
@@ -399,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,
@@ -419,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,
@@ -439,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,
@@ -459,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,
@@ -479,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,
@@ -499,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,
@@ -559,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,
@@ -579,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,
@@ -599,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,