lido-player 0.0.2-alpha-57-dev → 0.0.2-alpha-59-dev

package/dist/components/lido-float.js

@@ -1,4 +1,4 @@
-import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-17f84b2f.js';
+import { L as LidoFloat$1, d as defineCustomElement$1 } from './p-f238004e.js';
 
 const LidoFloat = LidoFloat$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-home.js

@@ -1,4 +1,4 @@
-import { L as LidoHome$1, d as defineCustomElement$1 } from './p-e1ba0c44.js';
+import { L as LidoHome$1, d as defineCustomElement$1 } from './p-73e4bb01.js';
 
 const LidoHome = LidoHome$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-image.js

@@ -1,4 +1,4 @@
-import { L as LidoImage$1, d as defineCustomElement$1 } from './p-ff801ba1.js';
+import { L as LidoImage$1, d as defineCustomElement$1 } from './p-84302365.js';
 
 const LidoImage = LidoImage$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-keyboard.js

@@ -1,4 +1,4 @@
-import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-330caab8.js';
+import { L as LidoKeyboard$1, d as defineCustomElement$1 } from './p-4d9462ab.js';
 
 const LidoKeyboard = LidoKeyboard$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-math-matrix.js

@@ -1,4 +1,4 @@
-import { L as LidoMathMatrix$1, d as defineCustomElement$1 } from './p-ffc40642.js';
+import { L as LidoMathMatrix$1, d as defineCustomElement$1 } from './p-6bbad90f.js';
 
 const LidoMathMatrix = LidoMathMatrix$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-pos.js

@@ -1,4 +1,4 @@
-import { L as LidoPos$1, d as defineCustomElement$1 } from './p-4d332eab.js';
+import { L as LidoPos$1, d as defineCustomElement$1 } from './p-5aa24314.js';
 
 const LidoPos = LidoPos$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-random.js

@@ -1,4 +1,4 @@
-import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-9104d427.js';
+import { L as LidoRandom$1, d as defineCustomElement$1 } from './p-9b35082a.js';
 
 const LidoRandom = LidoRandom$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-root.js

@@ -1,26 +1,25 @@
-import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-0712a27e.js';
-import { i as instance } from './p-73e3f0f4.js';
-import { d as defineCustomElement$m } from './p-0a41b2f8.js';
-import { d as defineCustomElement$l } from './p-21852d55.js';
-import { d as defineCustomElement$k } from './p-c4739621.js';
-import { d as defineCustomElement$j } from './p-882b291d.js';
-import { d as defineCustomElement$i } from './p-f3bc4577.js';
-import { d as defineCustomElement$h } from './p-eab0ebb7.js';
-import { d as defineCustomElement$g } from './p-d1b5079b.js';
-import { d as defineCustomElement$f } from './p-480f708a.js';
-import { d as defineCustomElement$e } from './p-17f84b2f.js';
-import { d as defineCustomElement$d } from './p-e1ba0c44.js';
-import { d as defineCustomElement$c } from './p-ff801ba1.js';
-import { d as defineCustomElement$b } from './p-330caab8.js';
-import { d as defineCustomElement$a } from './p-ffc40642.js';
-import { d as defineCustomElement$9 } from './p-4d332eab.js';
-import { d as defineCustomElement$8 } from './p-9104d427.js';
-import { d as defineCustomElement$7 } from './p-2829c82c.js';
-import { d as defineCustomElement$6 } from './p-cca36777.js';
-import { d as defineCustomElement$5 } from './p-f2b53e8e.js';
-import { d as defineCustomElement$4 } from './p-7ab0a273.js';
-import { d as defineCustomElement$3 } from './p-b9875116.js';
-import { d as defineCustomElement$2 } from './p-4e041807.js';
+import { p as proxyCustomElement, H, g as getAssetPath, h } from './p-3513b1f3.js';
+import { d as defineCustomElement$4, i as instance } from './p-2bb1f74d.js';
+import { d as defineCustomElement$m } from './p-99fcbae4.js';
+import { d as defineCustomElement$l } from './p-5eeaccab.js';
+import { d as defineCustomElement$k } from './p-aff68c41.js';
+import { d as defineCustomElement$j } from './p-ad0f335e.js';
+import { d as defineCustomElement$i } from './p-33b83222.js';
+import { d as defineCustomElement$h } from './p-f9426cbe.js';
+import { d as defineCustomElement$g } from './p-5c990168.js';
+import { d as defineCustomElement$f } from './p-6819005f.js';
+import { d as defineCustomElement$e } from './p-f238004e.js';
+import { d as defineCustomElement$d } from './p-73e4bb01.js';
+import { d as defineCustomElement$c } from './p-84302365.js';
+import { d as defineCustomElement$b } from './p-4d9462ab.js';
+import { d as defineCustomElement$a } from './p-6bbad90f.js';
+import { d as defineCustomElement$9 } from './p-5aa24314.js';
+import { d as defineCustomElement$8 } from './p-9b35082a.js';
+import { d as defineCustomElement$7 } from './p-d9b17242.js';
+import { d as defineCustomElement$6 } from './p-de62d08e.js';
+import { d as defineCustomElement$5 } from './p-356e56bd.js';
+import { d as defineCustomElement$3 } from './p-49ccf573.js';
+import { d as defineCustomElement$2 } from './p-e8e9250e.js';
 
 const LidoRoot$1 = /*@__PURE__*/ proxyCustomElement(class LidoRoot extends H {
     constructor() {

package/dist/components/lido-row.js

@@ -1,4 +1,4 @@
-import { L as LidoRow$1, d as defineCustomElement$1 } from './p-2829c82c.js';
+import { L as LidoRow$1, d as defineCustomElement$1 } from './p-d9b17242.js';
 
 const LidoRow = LidoRow$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-shape.js

@@ -1,4 +1,4 @@
-import { L as LidoShape$1, d as defineCustomElement$1 } from './p-cca36777.js';
+import { L as LidoShape$1, d as defineCustomElement$1 } from './p-de62d08e.js';
 
 const LidoShape = LidoShape$1;
 const defineCustomElement = defineCustomElement$1;

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

@@ -1,4 +1,4 @@
-import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-f2b53e8e.js';
+import { L as LidoSlideFill$1, d as defineCustomElement$1 } from './p-356e56bd.js';
 
 const LidoSlideFill = LidoSlideFill$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-text.js

@@ -1,4 +1,4 @@
-import { L as LidoText$1, d as defineCustomElement$1 } from './p-7ab0a273.js';
+import { L as LidoText$1, d as defineCustomElement$1 } from './p-2bb1f74d.js';
 
 const LidoText = LidoText$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-trace.js

@@ -1,4 +1,4 @@
-import { L as LidoTrace$1, d as defineCustomElement$1 } from './p-b9875116.js';
+import { L as LidoTrace$1, d as defineCustomElement$1 } from './p-49ccf573.js';
 
 const LidoTrace = LidoTrace$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/lido-wrap.js

@@ -1,4 +1,4 @@
-import { L as LidoWrap$1, d as defineCustomElement$1 } from './p-4e041807.js';
+import { L as LidoWrap$1, d as defineCustomElement$1 } from './p-e8e9250e.js';
 
 const LidoWrap = LidoWrap$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/{p-73e3f0f4.js → p-2bb1f74d.js}

@@ -1,3 +1,5 @@
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, t as attachSpeakIcon, L as LIDO_COMMON_AUDIO_READY_EVENT, e as convertUrlToRelative, k as parseProp, h, j as Host, u as LIDO_COMMON_AUDIO_PATH } from './p-3513b1f3.js';
+
 const isString = obj => typeof obj === 'string';
 const defer = () => {
   let res;
@@ -2703,4 +2705,204 @@ instance
     },
 });
 
-export { instance as i };
+const lidoTextCss = ".lido-text{transition:background-color 0.3s ease;user-select:none;align-items:center;justify-content:center;text-align:center;border-radius:24px;color:#333;cursor:pointer;font-family:'Baloo Bhai 2', serif}.text-letters{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-letters.letter-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-letter-bounce 0.4s}.text-words{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-words.word-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-word-bounce 0.4s}@keyframes text-letter-bounce{0%{transform:scale(1)}60%{transform:scale(1.4)}100%{transform:scale(1)}}@keyframes text-word-bounce{0%{transform:scale(1)}60%{transform:scale(1.3)}100%{transform:scale(1)}}";
+const LidoTextStyle0 = lidoTextCss;
+
+const LidoText = /*@__PURE__*/ proxyCustomElement(class LidoText extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.showSpeakIcon = false;
+        this.id = '';
+        this.value = '';
+        this.string = '';
+        this.fontFamily = '';
+        this.fontSize = '20px';
+        this.fontColor = '';
+        this.highlightWhileSpeaking = false;
+        this.height = 'auto';
+        this.width = 'auto';
+        this.ariaLabel = '';
+        this.ariaHidden = '';
+        this.x = '0px';
+        this.y = '0px';
+        this.z = '0';
+        this.bgColor = '';
+        this.borderImage = '';
+        this.type = '';
+        this.tabIndex = 0;
+        this.visible = false;
+        this.audio = '';
+        this.onTouch = '';
+        this.onInCorrect = '';
+        this.onCorrect = '';
+        this.minDrops = 1;
+        this.maxDrops = 1;
+        this.onEntry = '';
+        this.margin = '';
+        this.padding = '';
+        this.borderRadius = '0px';
+        this.spanType = '';
+        this.style = {};
+        this.delayVisible = '';
+        this.disableSpeak = false;
+    }
+    /**
+     * Lifecycle hook that runs after the component is rendered in the DOM.
+     * It initializes custom events based on the `type` of the text component.
+     */
+    componentDidLoad() {
+        setVisibilityWithDelay(this.el, this.delayVisible);
+        initEventsForElement(this.el, this.type);
+        // only create span element if requested
+        if (this.spanType === 'words' || this.spanType === 'letters') {
+            this.addSpanToText();
+        }
+        if (this.showSpeakIcon) {
+            attachSpeakIcon(this.el);
+        }
+        if (!this.audio || this.audio.trim() === "") {
+            const applyAutoAudio = () => {
+                const autoAudio = this.resolveAutoAudio();
+                if (autoAudio) {
+                    this.audio = autoAudio;
+                    console.log("[LidoText] Auto audio applied:", autoAudio);
+                }
+            };
+            // If path is already available, apply immediately
+            if (window.__LIDO_COMMON_AUDIO_PATH__) {
+                applyAutoAudio();
+            }
+            else {
+                // Otherwise, wait for it
+                window.addEventListener(LIDO_COMMON_AUDIO_READY_EVENT, applyAutoAudio, { once: true });
+            }
+        }
+    }
+    resolveAutoAudio() {
+        const base = window[LIDO_COMMON_AUDIO_PATH];
+        if (!base || !this.string)
+            return null;
+        const fileName = this.string.toLowerCase().trim().replace(/\s+/g, "_").replace(/[^\w-]/g, "");
+        return `${base}/${fileName}.mp3`;
+    }
+    /**
+     * Lifecycle method that runs before the component is rendered.
+     * Initializes styles and sets up event listeners for resize and load events.
+     */
+    componentWillLoad() {
+        this.updateStyles();
+        window.addEventListener('resize', this.updateStyles.bind(this));
+        window.addEventListener('load', this.updateStyles.bind(this));
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateStyles.bind(this));
+        window.removeEventListener('load', this.updateStyles.bind(this));
+    }
+    updateStyles() {
+        const borderImg = this.borderImage ? convertUrlToRelative(this.borderImage) : '';
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: parseProp(this.height, orientation),
+            width: parseProp(this.width, orientation),
+            backgroundColor: parseProp(this.bgColor, orientation),
+            top: parseProp(this.y, orientation),
+            left: parseProp(this.x, orientation),
+            zIndex: this.z,
+            fontSize: parseProp(this.fontSize, orientation),
+            fontFamily: this.fontFamily,
+            color: parseProp(this.fontColor, orientation),
+            display: parseProp(`${this.visible}`, orientation) === "true" ? 'flex' : 'none', // Toggle visibility
+            borderImage: `url(${borderImg})`,
+            borderImageSlice: borderImg ? '0 fill' : '',
+            margin: parseProp(this.margin, orientation),
+            padding: parseProp(this.padding, orientation),
+            borderRadius: parseProp(this.borderRadius, orientation),
+        };
+    }
+    async addSpanToText() {
+        const content = this.el.querySelector('.lido-text-content');
+        if (!content)
+            return;
+        const text = content.textContent || '';
+        content.innerHTML = '';
+        // Wrap each letters in a span inside .lido-text-content
+        if (this.spanType === 'letters') {
+            text.split('').forEach((letter, idx) => {
+                // Skip spaces
+                if (letter.trim() === '')
+                    return;
+                // Create a span for each letter
+                const letterSpan = document.createElement('span');
+                letterSpan.textContent = letter;
+                letterSpan.className = 'text-letters';
+                content.appendChild(letterSpan);
+            });
+        }
+        // Wrap each words in a span inside .lido-text-content
+        if (this.spanType === 'words') {
+            text.split(' ').forEach((word, idx) => {
+                const wordSpan = document.createElement('span');
+                wordSpan.textContent = word;
+                wordSpan.className = 'text-words';
+                content.appendChild(wordSpan);
+            });
+        }
+    }
+    render() {
+        return (h(Host, { key: '9635bba385679026c4f90aac9467612f06a21f1b', 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" }, " ", instance.t(this.string)) : instance.t(this.string)));
+    }
+    get el() { return this; }
+    static get style() { return LidoTextStyle0; }
+}, [0, "lido-text", {
+        "showSpeakIcon": [4, "show-speak-icon"],
+        "id": [1],
+        "value": [1],
+        "string": [1],
+        "fontFamily": [1, "font-family"],
+        "fontSize": [1, "font-size"],
+        "fontColor": [1, "font-color"],
+        "highlightWhileSpeaking": [4, "highlight-while-speaking"],
+        "height": [1],
+        "width": [1],
+        "ariaLabel": [1, "aria-label"],
+        "ariaHidden": [1, "aria-hidden"],
+        "x": [1],
+        "y": [1],
+        "z": [1],
+        "bgColor": [1, "bg-color"],
+        "borderImage": [1, "border-image"],
+        "type": [1],
+        "tabIndex": [2, "tab-index"],
+        "visible": [8],
+        "audio": [1],
+        "onTouch": [1, "on-touch"],
+        "onInCorrect": [1, "on-in-correct"],
+        "onCorrect": [1, "on-correct"],
+        "minDrops": [2, "min-drops"],
+        "maxDrops": [2, "max-drops"],
+        "onEntry": [1, "on-entry"],
+        "margin": [1],
+        "padding": [1],
+        "borderRadius": [1, "border-radius"],
+        "spanType": [1, "span-type"],
+        "delayVisible": [1, "delay-visible"],
+        "disableSpeak": [4, "disable-speak"],
+        "style": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["lido-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "lido-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LidoText);
+            }
+            break;
+    } });
+}
+defineCustomElement();
+
+export { LidoText as L, defineCustomElement as d, instance as i };

package/dist/components/{p-f3bc4577.js → p-33b83222.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-0712a27e.js';
+import { p as proxyCustomElement, H, d as setVisibilityWithDelay, i as initEventsForElement, r as handlingChildElements, t as attachSpeakIcon, k as parseProp, h, j as Host } from './p-3513b1f3.js';
 
 const lidoCellCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}.lido-row{display:flex;justify-content:space-around;align-items:center;}.lido-row>*{}.lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;box-sizing:border-box}.lido-flex{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px}.lido-pos{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);display:flex;justify-content:space-around;flex-direction:column;position:fixed}.lido-pos>*{position:absolute}.lido-random{position:relative;width:100%;height:100%}.lido-random>*{position:absolute}.lido-col::-webkit-scrollbar,.lido-wrap::-webkit-scrollbar,.lido-flex::-webkit-scrollbar{width:var(--scrollbar-width);height:var(--scrollbar-width)}.lido-col::-webkit-scrollbar-thumb,.lido-wrap::-webkit-scrollbar-thumb,.lido-flex::-webkit-scrollbar-thumb{background-color:#888;border-radius:10px;border:3px solid transparent;background-clip:content-box}.lido-col::-webkit-scrollbar-track,.lido-wrap::-webkit-scrollbar-track,.lido-flex::-webkit-scrollbar-track{background:#f1f1f1}";
 const LidoCellStyle0 = lidoCellCss;