lido-player 0.0.2-alpha-49 → 0.0.2-alpha-43-dev

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

@@ -0,0 +1,549 @@
+import { h, Host } from "@stencil/core";
+import { initEventsForElement, parseProp } from "../../utils/utils";
+export class LidoBalance {
+    constructor() {
+        this.currentAngle = 0;
+        this.pivotimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Display%20stand.svg';
+        this.scaleimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Bar.svg';
+        this.handlerimage = 'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Stands.svg';
+        this.fill = 'brown';
+        this.tilt = 0;
+        this.maxTilt = 9.5;
+        this.onEntry = '';
+        this.height = 'auto';
+        this.width = 'auto';
+        this.x = '0px';
+        this.y = '0px';
+        this.z = '0';
+        this.visible = false;
+        this.margin = '';
+        this.padding = '';
+        this.balanceSymbol = '=';
+        this.showSymbol = false;
+        this.operation = 'count';
+        this.pivotSvg = '';
+        this.scaleSvg = '';
+        this.handlerSvg = '';
+        this.style = {};
+        this.tiltf = 0;
+        this.leftVal = 0;
+        this.rightVal = 0;
+    }
+    async revealSymbol() {
+        this.showSymbol = true;
+    }
+    async hideSymbol() {
+        this.showSymbol = false;
+    }
+    async componentWillLoad() {
+        this.updateStyles();
+        this.pivotSvg = await this.fetchAndApplyFill(this.pivotimage);
+        this.scaleSvg = await this.fetchAndApplyFill(this.scaleimage);
+        this.handlerSvg = await this.fetchAndApplyFill(this.handlerimage);
+    }
+    componentDidLoad() {
+        setTimeout(() => {
+            this.animateBalance();
+        }, 4000);
+        this.leftParentEl = document.getElementById("leftparent");
+        this.rightParentEl = document.getElementById("rightparent");
+        initEventsForElement(this.el);
+    }
+    disconnectedCallback() {
+        if (this.animationFrameId != null)
+            cancelAnimationFrame(this.animationFrameId);
+    }
+    async fetchAndApplyFill(url) {
+        try {
+            const res = await fetch(url);
+            if (!res.ok)
+                return '';
+            let svg = await res.text();
+            svg = svg.replace(/fill="[^"]*"/g, '');
+            svg = svg.replace(/stroke="[^"]*"/g, '');
+            svg = svg.replace(/<svg([^>]*)>/, `<svg$1 fill="${this.fill}" stroke="${this.fill}">`);
+            return svg;
+        }
+        catch (e) {
+            console.error('SVG fetch failed:', e);
+            return '';
+        }
+    }
+    tiltChanged(newValue) {
+        this.tiltf = newValue;
+    }
+    async updateTilt(leftVal, rightVal) {
+        const diff = rightVal - leftVal;
+        const newTilt = Math.max(-5, Math.min(5, diff));
+        this.tiltf = newTilt;
+    }
+    animateBalance() {
+        const rotate = () => {
+            let targetAngle = (this.tiltf / 5) * this.maxTilt;
+            if (targetAngle > this.maxTilt)
+                targetAngle = this.maxTilt;
+            if (targetAngle < -this.maxTilt)
+                targetAngle = -this.maxTilt;
+            this.currentAngle += (targetAngle - this.currentAngle) * 0.1;
+            if (this.currentAngle > this.maxTilt)
+                this.currentAngle = this.maxTilt;
+            if (this.currentAngle < -this.maxTilt)
+                this.currentAngle = -this.maxTilt;
+            if (this.scaleEl) {
+                this.scaleEl.style.transform = `rotate(${this.currentAngle}deg)`;
+                this.scaleEl.style.transformOrigin = '50% 80%';
+            }
+            if (this.leftParentEl && this.rightParentEl) {
+                const maxOffset = 60;
+                const offset = (this.currentAngle / this.maxTilt) * maxOffset;
+                this.leftParentEl.style.transform = `translateY(${-offset}px)`;
+                this.rightParentEl.style.transform = `translateY(${offset}px)`;
+            }
+            if (this.leftHandleEl && this.rightHandleEl) {
+                const isPortrait = window.innerHeight > window.innerWidth;
+                const maxOffset = isPortrait ? 40 : 60;
+                const offset = (this.currentAngle / this.maxTilt) * maxOffset;
+                this.leftHandleEl.style.transform = `translateY(${-offset}px)`;
+                this.rightHandleEl.style.transform = `translateY(${offset}px)`;
+            }
+            this.animationFrameId = requestAnimationFrame(rotate);
+        };
+        rotate();
+    }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: parseProp(this.height, orientation),
+            width: parseProp(this.width, orientation),
+            top: parseProp(this.y, orientation),
+            left: parseProp(this.x, orientation),
+            zIndex: this.z,
+            display: parseProp(`${this.visible}`, orientation) === "true" ? 'flex' : 'none',
+            margin: parseProp(this.margin, orientation),
+            padding: parseProp(this.padding, orientation),
+        };
+    }
+    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 : '')));
+    }
+    static get is() { return "lido-balance"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["lido-balance.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["lido-balance.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "pivotimage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the pivot (base stand) image used in the balance visualization."
+                },
+                "attribute": "pivotimage",
+                "reflect": false,
+                "defaultValue": "'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Display%20stand.svg'"
+            },
+            "scaleimage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the scale (bar) image that tilts based on the weight difference."
+                },
+                "attribute": "scaleimage",
+                "reflect": false,
+                "defaultValue": "'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Bar.svg'"
+            },
+            "handlerimage": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "URL of the handler (side stands / hooks) image for the balance."
+                },
+                "attribute": "handlerimage",
+                "reflect": false,
+                "defaultValue": "'https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/balancing/Stands.svg'"
+            },
+            "fill": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Fill color applied to all loaded SVGs (pivot, scale, handler).\nDefaults to \"brown\"."
+                },
+                "attribute": "fill",
+                "reflect": false,
+                "defaultValue": "'brown'"
+            },
+            "tilt": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Initial tilt value of the balance.\nNegative = tilts left, Positive = tilts right."
+                },
+                "attribute": "tilt",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "maxTilt": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Maximum allowed tilt angle (in degrees) for the balance bar."
+                },
+                "attribute": "max-tilt",
+                "reflect": false,
+                "defaultValue": "9.5"
+            },
+            "onEntry": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Action(s) to execute when the component enters the DOM.\nExample: trigger animations or audio cues."
+                },
+                "attribute": "on-entry",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "height": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS height of the component (responsive values allowed).\nDefault: \"auto\"."
+                },
+                "attribute": "height",
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "width": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS width of the component (responsive values allowed).\nDefault: \"auto\"."
+                },
+                "attribute": "width",
+                "reflect": false,
+                "defaultValue": "'auto'"
+            },
+            "x": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Horizontal (X-axis) offset for positioning the component.\nDefault: \"0px\"."
+                },
+                "attribute": "x",
+                "reflect": false,
+                "defaultValue": "'0px'"
+            },
+            "y": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Vertical (Y-axis) offset for positioning the component.\nDefault: \"0px\"."
+                },
+                "attribute": "y",
+                "reflect": false,
+                "defaultValue": "'0px'"
+            },
+            "z": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Z-index for stacking order of the component.\nDefault: \"0\"."
+                },
+                "attribute": "z",
+                "reflect": false,
+                "defaultValue": "'0'"
+            },
+            "visible": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean | string",
+                    "resolved": "boolean | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Controls component visibility.\nAccepts boolean (`true`/`false`) or string (\"true\"/\"false\")."
+                },
+                "attribute": "visible",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "margin": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS margin applied to the outer container."
+                },
+                "attribute": "margin",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "padding": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS padding applied to the outer container."
+                },
+                "attribute": "padding",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "balanceSymbol": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Balance symbol shown when `showSymbol` is true.\nDefault: \"=\"."
+                },
+                "attribute": "balance-symbol",
+                "reflect": true,
+                "defaultValue": "'='"
+            },
+            "showSymbol": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the balance symbol is currently displayed.\nCan be toggled with `revealSymbol()` and `hideSymbol()`."
+                },
+                "attribute": "show-symbol",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "operation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Operation type used to calculate balance values.\nSupported: \"count\", \"add\", \"subtract\", etc."
+                },
+                "attribute": "operation",
+                "reflect": false,
+                "defaultValue": "'count'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "pivotSvg": {},
+            "scaleSvg": {},
+            "handlerSvg": {},
+            "style": {},
+            "tiltf": {},
+            "leftVal": {},
+            "rightVal": {}
+        };
+    }
+    static get methods() {
+        return {
+            "revealSymbol": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "hideSymbol": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "updateTilt": {
+                "complexType": {
+                    "signature": "(leftVal: number, rightVal: number) => Promise<void>",
+                    "parameters": [{
+                            "name": "leftVal",
+                            "type": "number",
+                            "docs": ""
+                        }, {
+                            "name": "rightVal",
+                            "type": "number",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "tilt",
+                "methodName": "tiltChanged"
+            }];
+    }
+}

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: '887f02445ef694f84ebc85e05e4dfb740d0bc78b', 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: '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 }));
     }
     static get is() { return "lido-shape"; }
     static get originalStyleUrls() {

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

@@ -190,7 +190,7 @@ export class LidoSlideFill {
         }
     }
     render() {
-        return (h(Host, { key: 'a7be214e99b8917ebe3d4ae0275036e77967d3b7', 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: 'e3210823de751a3fdff90b54bf93fc13890ca28a', innerHTML: this.svgContent, class: "svg-element" })));
+        return (h(Host, { key: '57ee54a6a0e7d3bbac893ce535a3375ea529e75a', 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: '386330e0562851f2f00aba169018c23bf5ffa4b7', innerHTML: this.svgContent, class: "svg-element" })));
     }
     static get is() { return "lido-slide-fill"; }
     static get originalStyleUrls() {

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

@@ -123,7 +123,7 @@ export class LidoText {
         }
     }
     render() {
-        return (h(Host, { key: '44444c496287fcacce28fa0073d1b87a80d07874', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, this.string) : this.string));
+        return (h(Host, { key: '6b5b31a544cc63cfd4030aa1b56e41cc255b12cf', class: "lido-text", value: this.value, type: this.type, "tab-index": this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, minDrops: this.minDrops, maxDrops: this.maxDrops, id: this.id, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, "span-type": this.spanType, "disable-speak": this.disableSpeak }, this.spanType !== '' ? h("div", { class: "lido-text-content" }, this.string) : this.string));
     }
     static get is() { return "lido-text"; }
     static get originalStyleUrls() {