lido-player 0.0.2-alpha-23 → 0.0.2-alpha-25

package/dist/cjs/index-fe562525.js

@@ -71,10 +71,10 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
           }
           switch(bundleId) {
               
-                case 'lido-avatar_17.cjs':
+                case 'lido-avatar_18.cjs':
                     return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
                         /* webpackMode: "lazy" */
-                        './lido-avatar_17.cjs.entry.js')); }).then(processMod, consoleError);
+                        './lido-avatar_18.cjs.entry.js')); }).then(processMod, consoleError);
           }
       }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-62b0df5b.js');
+const utils = require('./utils-98308657.js');
 require('./index-fe562525.js');
 
 

package/dist/cjs/{lido-avatar_17.cjs.entry.js → lido-avatar_18.cjs.entry.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fe562525.js');
-const utils = require('./utils-62b0df5b.js');
+const utils = require('./utils-98308657.js');
 
 var rive = {exports: {}};
 
@@ -7021,7 +7021,7 @@ const LidoFlash = class {
 };
 LidoFlash.style = LidoFlashCardStyle0;
 
-const lidoFloatCss = ".lido-float{position:relative}.lido-float>*{position:absolute;cursor:pointer}@keyframes float-up{from{top:900px}to{top:-400px;}}";
+const lidoFloatCss = ".lido-float{position:relative}.lido-float>*{position:absolute;cursor:pointer}@keyframes float-up{from{top:var(--el-top)}to{top:-500px}}@keyframes float-lr{from{right:var(--el-left)}to{right:-500px}}";
 const LidoFloatStyle0 = lidoFloatCss;
 
 const LidoFloat = class {
@@ -7036,11 +7036,14 @@ const LidoFloat = class {
         this.width = undefined;
         this.height = undefined;
         this.bgColor = undefined;
+        this.type = undefined;
         this.delayVisible = '';
+        this.floatDirection = 'bottomToTop';
         this.style = undefined;
     }
     componentDidLoad() {
         utils.setVisibilityWithDelay(this.el, this.delayVisible);
+        utils.initEventsForElement(this.el, this.type);
         this.initializeFloatElement();
     }
     /**
@@ -7069,15 +7072,15 @@ const LidoFloat = class {
     updateStyles() {
         const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
         this.style = {
-            height: utils.parseProp(this.height, orientation),
-            width: utils.parseProp(this.width, orientation),
+            height: this.floatDirection !== 'leftToRight' ? "100%" : utils.parseProp(this.height, orientation),
+            width: this.floatDirection === 'leftToRight' ? "100%" : utils.parseProp(this.width, orientation),
             backgroundColor: utils.parseProp(this.bgColor, orientation),
             zIndex: this.z,
             display: this.visible ? 'flex' : 'none',
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'a0ff5cd4fad7b37b183bd555207ad54a9a03d26b', class: "lido-float", id: this.id, "tab-index": this.tabIndex, style: this.style }, index.h("slot", { key: '994b173de0002b0438a84d35ad5143a83822b4e9' })));
+        return (index.h(index.Host, { key: '2866d98e4a22a5825c24f23324473016c5e8c33f', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, index.h("slot", { key: 'dd0a4405b91e1ddb95e90d6dfa1e16f8ac106c58' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -7312,6 +7315,7 @@ const LidoHome = class {
             'lido-cell': index.h("lido-cell", Object.assign({}, props), children),
             'lido-slide-fill': index.h("lido-slide-fill", Object.assign({}, props), children),
             'lido-float': index.h("lido-float", Object.assign({}, props), children),
+            'lido-keyboard': index.h("lido-keyboard", Object.assign({}, props), children),
         };
         // If the tag is known, return the corresponding Stencil component, otherwise log a warning
         if (componentMapping[tagName]) {
@@ -7418,7 +7422,7 @@ const LidoHome = class {
             // If no XML data is provided, prompt the user to provide it
             return index.h("div", null, "Please provide XML data.");
         }
-        return (index.h(index.Host, { class: "lido-home", index: this.currentContainerIndex, totalIndex: this.containers.length }, index.h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.renderDots(), this.exitFlag && (index.h("div", { class: "lido-alert-parent" }, index.h("div", { class: "lido-alert-popup" }, index.h("lido-cell", { class: "lido-alert-content", visible: "true", layout: "col", width: "340px", height: "210px", "bg-color": "#fff", "border-radius": "16px", onEntry: "this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';" }, index.h("lido-text", { visible: "true", string: "Do you want to exit?", width: "294px", height: "38px", class: "popup-exit-text", "font-size": "22px", onEntry: "this.margin-bottom =' -36px';" }), index.h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, index.h("lido-text", { visible: "true", string: "EXIT", width: "92px", height: "53px", "font-size": "16px", margin: "0px 50px 0px 0px", class: "popup-button", onClick: () => this.popUpClick('exit'), borderRadius: "16px", onEntry: 'this.color="#F34D08"; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', fontFamily: "Baloo Bhai 2", "font-weight": "700", bgColor: "white", "border-radius": "16px" }), index.h("lido-text", { visible: "true", string: "KEEP PLAYING", width: "155px", height: "53px", "font-size": "16px", class: "popup-button", onClick: () => this.popUpClick('cancel'), borderRadius: "16px", onEntry: 'this.color=white; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', "font-family": "Baloo Bhai 2", "font-weight": "700", bgColor: "#F34D08", "border-radius": "16px" }))))))));
+        return (index.h(index.Host, { class: "lido-home", index: this.currentContainerIndex, totalIndex: this.containers.length }, index.h("div", { key: this.currentContainerIndex }, (_b = (_a = this.containers)[this.currentContainerIndex]) === null || _b === void 0 ? void 0 : _b.call(_a)), this.renderDots(), this.exitFlag && (index.h("div", { class: "lido-alert-parent" }, index.h("div", { class: "lido-alert-popup" }, index.h("lido-cell", { class: "lido-alert-content", visible: "true", layout: "col", width: "340px", height: "210px", "bg-color": "#fff", "border-radius": "16px", onEntry: "this.box-shadow= '0 4px 8px 0 rgba(0, 0, 0, 0.25)';" }, index.h("lido-text", { visible: "true", string: "Quer sair?", width: "294px", height: "38px", class: "popup-exit-text", "font-size": "22px", onEntry: "this.margin-bottom =' -36px';" }), index.h("lido-cell", { visible: "true", layout: "row", width: "294px", class: "btn-cell" }, index.h("lido-text", { visible: "true", string: "Sair", width: "92px", height: "53px", "font-size": "16px", margin: "0px 50px 0px 0px", class: "popup-button", onClick: () => this.popUpClick('exit'), borderRadius: "16px", onEntry: 'this.color="#F34D08"; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', fontFamily: "Baloo Bhai 2", "font-weight": "700", bgColor: "white", "border-radius": "16px" }), index.h("lido-text", { visible: "true", string: "Continuar a jogar", width: "155px", height: "53px", "font-size": "16px", class: "popup-button", onClick: () => this.popUpClick('cancel'), borderRadius: "16px", onEntry: 'this.color=white; this.font-weight="700"; this.box-shadow="0 2px 0 #F34D08";', "font-family": "Baloo Bhai 2", "font-weight": "700", bgColor: "#F34D08", "border-radius": "16px" }))))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -10233,6 +10237,148 @@ const LidoImage = class {
 };
 LidoImage.style = LidoImageStyle0;
 
+const lidoKeyboardCss = ".lido-keyboard{display:flex;flex-direction:column;align-items:center;gap:30px}.input-area{display:flex;gap:15px}input[type=\"text\"]{font-size:30px;font-weight:600;padding-left:20px;width:300px;height:70px;border:2px solid;background:whitesmoke;border-radius:20px;text-align:center}.keyboard-wrapper{justify-content:center;width:700px}.disabled{opacity:0.5;pointer-events:none}.key-button{background:aquamarine;font-weight:600}";
+const LidoKeyboardStyle0 = lidoKeyboardCss;
+
+const LidoKeyboard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.keys = '';
+        this.width = undefined;
+        this.height = undefined;
+        this.fontSize = undefined;
+        this.fontColor = undefined;
+        this.fontFamily = undefined;
+        this.gap = '10px';
+        this.bgColor = '';
+        this.borderRadius = '';
+        this.y = undefined;
+        this.x = undefined;
+        this.z = undefined;
+        this.margin = undefined;
+        this.padding = undefined;
+        this.visible = undefined;
+        this.onEntry = undefined;
+        this.type = undefined;
+        this.keyboardInput = false;
+        this.columns = '10';
+        this.letterLength = undefined;
+        this.numberOfClick = 0;
+        this.inputString = '';
+        this.style = {};
+    }
+    async inputValidation(e) {
+        if (this.type !== 'click')
+            return;
+        let selcetedValue = JSON.parse(localStorage.getItem(utils.SelectedValuesKey)) || '';
+        selcetedValue = this.inputString;
+        localStorage.setItem(utils.SelectedValuesKey, JSON.stringify(selcetedValue));
+        const container = document.getElementById(utils.LidoContainer);
+        const value = e.target.getAttribute('value');
+        const bubbleValues = container.querySelectorAll(`[value= '${value}']`);
+        const filteredElement = Array.from(bubbleValues).find(el => !el.className.includes('key-button'));
+        this.inputString = value;
+        let isOverlapping;
+        if (filteredElement) {
+            const bodyRect = document.body.getBoundingClientRect();
+            const elemRect = filteredElement.getBoundingClientRect();
+            isOverlapping = elemRect.left < bodyRect.right && elemRect.right > bodyRect.left && elemRect.top < bodyRect.bottom && elemRect.bottom > bodyRect.top;
+        }
+        if (isOverlapping) {
+            filteredElement.style.animation = 'none';
+            this.numberOfClick++;
+            if (this.numberOfClick === this.letterLength) {
+                const onCorrrect = container.getAttribute('onCorrect');
+                container.style.pointerEvents = 'none';
+                await utils.executeActions(onCorrrect, this.el);
+                utils.triggerNextContainer();
+            }
+            else {
+                utils.handleFloatElementPosition(filteredElement);
+                utils.storingEachActivityScore(true);
+            }
+        }
+        else {
+            const onInCorrrect = container.getAttribute('onInCorrect');
+            await utils.executeActions(onInCorrrect, this.el);
+            utils.storingEachActivityScore(false);
+        }
+    }
+    componentDidLoad() {
+        const container = document.getElementById(utils.LidoContainer);
+        if (container.getAttribute('drop-action') === utils.DropAction.InfiniteDrop) {
+            const buttons = this.el.querySelectorAll('.key-button');
+            const firstButton = buttons[0];
+            buttons.forEach((button) => {
+                button.style.width = firstButton.offsetWidth + 'px';
+                button.style.height = firstButton.offsetHeight + 'px';
+            });
+        }
+    }
+    /**
+     * 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 orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: utils.parseProp(this.height, orientation),
+            width: utils.parseProp(this.width, orientation),
+            backgroundColor: utils.parseProp(this.bgColor, orientation),
+            top: utils.parseProp(this.y, orientation),
+            left: utils.parseProp(this.x, orientation),
+            zIndex: this.z,
+            fontSize: utils.parseProp(this.fontSize, orientation),
+            fontFamily: this.fontFamily,
+            color: utils.parseProp(this.fontColor, orientation),
+            display: utils.parseProp(`${this.visible}`, orientation) === 'true' ? 'flex' : 'none',
+            margin: utils.parseProp(this.margin, orientation),
+            padding: utils.parseProp(this.padding, orientation),
+            borderRadius: utils.parseProp(this.borderRadius, orientation),
+            columns: utils.parseProp(`${this.columns}`, orientation),
+            gap: utils.parseProp(this.gap, orientation),
+        };
+    }
+    render() {
+        const keysArray = this.keys.split(',').map(k => k.trim());
+        const container = document.getElementById(utils.LidoContainer);
+        const showCheck = container.getAttribute('show-check') === 'true';
+        return (index.h(index.Host, { key: 'de7d6c8eb01a90851d03d8e3a90c2dda2c437b83', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (index.h("div", { key: '2755d632b00ac4bd9685317c61a6fa9af2972973', class: "input-area" }, index.h("input", { key: '266a08add13f544c583d424fd1ab31911531f65f', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), index.h("lido-text", { key: '81ca8c391f5bd9056e0a6c9030d0e975a493f86f', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+                this.inputString = this.inputString.slice(0, -1);
+                this.inputValidation(event);
+            } }), index.h("lido-text", { key: '721a7b54a4da58c3d68989df08f24a6a41168523', visible: showCheck ? 'true' : 'false', id: "lido-checkButton", string: "Enter", "bg-color": "green", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "150px", height: "70px", type: "click" }))), this.letterLength && (index.h("lido-text", { key: '7b87a8810282fdb4326794042118016edc992dd2', visible: "true", string: `${this.numberOfClick}/${this.letterLength}`, "font-size": "60px", "font-color": "white", onEntry: "this.position='absolute'; this.right='0'; this.fontWeight='800';", x: "unset" })), index.h("div", { key: '80796fa601b359e235a885fdf9e233c3df941605', class: "keyboard-wrapper", style: {
+                display: 'flex',
+                flexWrap: 'wrap',
+                justifyContent: 'center',
+                alignContent: 'stretch',
+                gap: this.gap,
+                width: '100%',
+                height: '100%',
+            } }, keysArray.map((key, index$1) => {
+            const [label, status] = key.split('-');
+            const isDisabled = status === 'disable';
+            let string = label === 'Space' ? ' ' : label;
+            return (index.h("lido-text", { id: 'key-button-' + index$1, style: {
+                    flex: `0 0 calc(${100 / parseInt(this.style.columns)}% - ${this.style.gap})`,
+                }, visible: "true", "font-size": this.style.fontSize, "font-color": this.fontColor, "font-family": this.fontFamily, "bg-color": this.bgColor, string: label, onEntry: this.onEntry, "border-radius": this.style.borderRadius, value: label.toLowerCase(), type: this.type, class: `key-button${isDisabled ? ' disabled' : ''}`, onClick: () => {
+                    this.inputString += string;
+                    this.inputValidation(event);
+                } }));
+        }))));
+    }
+    get el() { return index.getElement(this); }
+};
+LidoKeyboard.style = LidoKeyboardStyle0;
+
 const lidoPosCss = ".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}";
 const LidoPosStyle0 = lidoPosCss;
 
@@ -10296,7 +10442,7 @@ const LidoPos = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '35e70ef17d6b0b3fa77c34b5d5eacc62408aa772', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '37deeb60c7d5b8e5edf954f33ea0207deed93695' })));
+        return (index.h(index.Host, { key: '1ec2896c6d2584a5035ec596afeb3e57a520e63e', id: this.id, class: "lido-pos", type: this.type, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'd38ca25ea13575de4d2236e897d280bc96016ca2' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -10377,7 +10523,7 @@ const LidoRandom = class {
             backgroundColor: this.bgColor,
             margin: this.margin,
         };
-        return (index.h(index.Host, { key: '229c4cba82bdb4501ee53c16f68407e5d01095a0', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'fb10f2952956918e66a4bb5b110719caa4e41670' })));
+        return (index.h(index.Host, { key: 'c2464ba8470ead3808c35aba510362e45cef585b', class: "lido-random", type: this.type, "tab-index": this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, minDrops: this.minDrops, maxDrops: this.maxDrops, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'd6291a93a662a8894920def758352b8e4c561881' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -10398,13 +10544,13 @@ const LidoRoot = class {
      * It fetches the XML data from the specified path or URL and sets it to the component's state.
      */
     async componentWillLoad() {
-        var _a;
+        var _a, _b;
         // Validate the xmlPath prop
         // if (!this.xmlPath) {
         //   console.error('XML path is not provided.');
         //   return;
         // }
-        const xmlPath = (_a = this.xmlPath) !== null && _a !== void 0 ? _a : this.baseUrl + '/index.xml';
+        const xmlPath = (_a = this.xmlPath) !== null && _a !== void 0 ? _a : this.baseUrl + (((_b = this.baseUrl) === null || _b === void 0 ? void 0 : _b.endsWith('/')) ? 'index.xml' : '/index.xml');
         console.log('🚀 ~ LidoRoot ~ componentWillLoad ~ this.baseUrl:', this.baseUrl);
         console.log('🚀 ~ LidoRoot ~ componentWillLoad ~ this.xmlPath:', this.xmlPath);
         console.log('🚀 ~ LidoRoot ~ componentWillLoad ~ xmlPath:', xmlPath);
@@ -10516,7 +10662,7 @@ const LidoRow = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'fd85fc603f1a8d1890984e08df7f627cc3840c24', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'a614ca85c0ab0957e0b4150303036c513505e241' })));
+        return (index.h(index.Host, { key: '2da5c1a525ad612536ba235dd98ca104f2f9209e', class: "lido-row", type: this.type, "tab-index": this.tabIndex, value: this.value, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, minDrops: this.minDrops, maxDrops: this.maxDrops, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '05a5b12376993e8eb27a4003a011c271aecc22a5' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -10572,7 +10718,7 @@ const LidoShape = class {
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
             margin: this.margin,
         };
-        return (index.h(index.Host, { key: 'a70c88433f7024f327b7d3746fd705c75fa776f6', 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 }));
+        return (index.h(index.Host, { key: '3e7faa36779c759c183247aca4e9d8a57e541b79', 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 }));
     }
     get el() { return index.getElement(this); }
 };
@@ -10588,6 +10734,15 @@ const LidoSlideFill = class {
         this.originalY = null;
         this.id = 'lido-slide-fill';
         this.width = undefined;
+        this.height = undefined;
+        this.x = undefined;
+        this.y = undefined;
+        this.z = undefined;
+        this.bgColor = undefined;
+        this.visible = undefined;
+        this.margin = undefined;
+        this.padding = '';
+        this.borderRadius = '0px';
         this.fill = undefined;
         this.numberType = 'integer';
         this.min = 0;
@@ -10596,11 +10751,25 @@ const LidoSlideFill = class {
         this.slider = undefined;
         this.src = undefined;
         this.fillDirection = undefined;
+        this.type = '';
+        this.onEntry = '';
         this.svgContent = '';
+        this.style = undefined;
         this.delayVisible = '';
     }
+    /**
+     * Lifecycle method that runs before the component is rendered.
+     * Initializes styles and sets up event listeners for resize and load events.
+     */
     async componentWillLoad() {
         await this.renderSVG();
+        this.updateStyles();
+        window.addEventListener('resize', this.updateStyles.bind(this)); // Update on screen rotation
+        window.addEventListener('load', this.updateStyles.bind(this)); // Update on screen rotation
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateStyles.bind(this));
+        window.removeEventListener('load', this.updateStyles.bind(this));
     }
     async onSrcChange() {
         await this.renderSVG();
@@ -10630,9 +10799,27 @@ const LidoSlideFill = class {
     }
     componentDidLoad() {
         utils.setVisibilityWithDelay(this.el, this.delayVisible);
+        utils.initEventsForElement(this.el, this.type);
         this.updateFill();
         this.addRulerNumbers();
     }
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            height: utils.parseProp(this.height, orientation),
+            width: utils.parseProp(this.width, orientation),
+            backgroundColor: utils.parseProp(this.bgColor, orientation),
+            top: utils.parseProp(this.y, orientation),
+            left: utils.parseProp(this.x, orientation),
+            zIndex: this.z,
+            display: utils.parseProp(`${this.visible}`, orientation) ? 'flex' : 'none',
+            alignItems: 'center',
+            justifyContent: 'center',
+            margin: utils.parseProp(this.margin, orientation),
+            padding: utils.parseProp(this.padding, orientation),
+            borderRadius: this.borderRadius,
+        };
+    }
     onPropChange() {
         this.updateFill();
         this.addRulerNumbers();
@@ -10729,7 +10916,7 @@ const LidoSlideFill = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: '8fbcce15c7af9525e912d10f504b192d4c2d325a', id: this.id, class: "lido-slide-fill", src: this.src, fill: this.fill, fillDirection: this.fillDirection, slider: this.slider, style: { width: this.width }, min: this.min, max: this.max, division: this.division, numberType: this.numberType }, index.h("div", { key: '294026ccc09d0145537c44f558dcfc8538ce2953', innerHTML: this.svgContent, class: "svg-element" })));
+        return (index.h(index.Host, { key: 'a096a86b0436da6f677db27423a41a49bb3ef4b9', 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 }, index.h("div", { key: '8b544fbd926cf8fb4459a5f68ee1f600f18e04e5', innerHTML: this.svgContent, class: "svg-element" })));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -10744,7 +10931,7 @@ const LidoSlideFill = class {
 };
 LidoSlideFill.style = LidoSlideFillStyle0;
 
-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 2', serif}.lido-text:hover{background-color:#f0f0f0}.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 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}.lido-text:hover{background-color:#f0f0f0}.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 = class {
@@ -10825,7 +11012,7 @@ const LidoText = class {
             fontSize: utils.parseProp(this.fontSize, orientation),
             fontFamily: this.fontFamily,
             color: utils.parseProp(this.fontColor, orientation),
-            display: utils.parseProp(`${this.visible}`, orientation) ? 'flex' : 'none', // Toggle visibility
+            display: utils.parseProp(`${this.visible}`, orientation) === "true" ? 'flex' : 'none', // Toggle visibility
             borderImage: `url(${borderImg})`,
             borderImageSlice: borderImg ? '0 fill' : '',
             margin: utils.parseProp(this.margin, orientation),
@@ -10863,7 +11050,7 @@ const LidoText = class {
         }
     }
     render() {
-        return (index.h(index.Host, { key: 'b20e7357057e57fd2b1763f9d2d711a1521af4cd', 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 }, this.spanType !== '' ? index.h("div", { class: "lido-text-content" }, this.string) : this.string));
+        return (index.h(index.Host, { key: '7ff5b2fb13d760fdc1586a8af5f5e9a6ab722966', 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 }, this.spanType !== '' ? index.h("div", { class: "lido-text-content" }, this.string) : this.string));
     }
     get el() { return index.getElement(this); }
 };
@@ -10875,12 +11062,12 @@ const LidoTraceStyle0 = lidoTraceCss;
 const LidoTrace = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
-        this.moving = false;
         this.showSpeakIcon = false;
         this.id = '';
         this.svgSource = '';
         this.svgUrls = [];
         this.currentSvgIndex = 0;
+        this.moving = false;
         this.value = '';
         this.height = 'auto';
         this.width = 'auto';
@@ -10897,6 +11084,7 @@ const LidoTrace = class {
         this.highlightTextId = '';
         this.animationTrace = false;
         this.delayVisible = '';
+        this.style = {};
         this.fileIndex = -1;
         this.isDragging = false;
         this.activePointerId = null;
@@ -10928,20 +11116,35 @@ const LidoTrace = class {
             lastPointerPos: null,
         };
         const url = this.svgUrls[this.currentSvgIndex];
+        console.log("Loading SVG from URL:", url);
+        if (!url || url.trim() === '') {
+            console.error("No SVG URL provided or index out of bounds.");
+            return;
+        }
         await this.fetchSVG(url);
+        console.log("SVG fetched successfully\n");
         await this.loadAnotherSVG(state, true); // Load the first SVG
     }
     componentDidLoad() {
         utils.setVisibilityWithDelay(this.el, this.delayVisible);
     }
     componentWillLoad() {
+        this.updateStyles();
+        window.addEventListener('resize', this.updateStyles.bind(this));
+        window.addEventListener('load', this.updateStyles.bind(this));
         this.svgUrls = this.svgSource.split(';').map(s => s.trim());
+        console.log("svgUrls", this.svgUrls);
         this.currentSvgIndex = 0;
-        this.initializeSVG();
+        console.log("curentSvgIndex", this.currentSvgIndex);
         if (this.showSpeakIcon) {
             utils.speakIcon(this.el);
             this.el.append(utils.speakIcon(this.el));
         }
+        this.initializeSVG();
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateStyles.bind(this));
+        window.removeEventListener('load', this.updateStyles.bind(this));
     }
     /** ───────────────────────────────────────────────────────────
      *  Idle‑timer helpers
@@ -10994,6 +11197,7 @@ const LidoTrace = class {
     }
     // Fetch the SVG file asynchronously
     async fetchSVG(url) {
+        console.log(`Fetching SVG from: ${url}`);
         const response = await fetch(url);
         if (!response.ok) {
             throw new Error(`Failed to fetch SVG (${url}): ${response.statusText}`);
@@ -11310,6 +11514,7 @@ const LidoTrace = class {
         if (this.animationTrace) {
             await this.playTraceAnimation();
         }
+        console.log(`Moving to next container after SVG index: ${this.currentSvgIndex}`);
         if (this.currentSvgIndex < this.svgUrls.length - 1) {
             this.currentSvgIndex++;
             await this.initializeSVG();
@@ -11379,7 +11584,7 @@ const LidoTrace = class {
             if (state.svg) {
                 this.cleanupPreviousSVG(state);
             }
-            const svgText = await this.fetchSVG(utils.convertUrlToRelative(this.svgSource));
+            const svgText = await this.fetchSVG(utils.convertUrlToRelative(this.svgSource.split(';').map(s => s.trim())[this.currentSvgIndex]));
             this.insertSVG(svgText);
             state.svg = this.getSVGElement();
             if (this.mode === utils.TraceMode.BlindTracing || this.mode === utils.TraceMode.BlindFreeTrace) {
@@ -11487,16 +11692,19 @@ const LidoTrace = class {
                 word.classList.add('word-highlight');
         }
     }
-    render() {
-        const style = {
-            height: this.height,
-            width: this.width,
-            top: this.y,
-            left: this.x,
-            zIndex: this.z,
-            // position: 'absolute' as const,
+    updateStyles() {
+        const orientation = window.innerHeight > window.innerWidth ? 'portrait' : 'landscape';
+        this.style = {
+            'height': utils.parseProp(this.height, orientation),
+            'width': utils.parseProp(this.width, orientation),
+            'top': utils.parseProp(this.y, orientation),
+            'left': utils.parseProp(this.x, orientation),
+            'zIndex': this.z,
+            'position': 'absolute',
         };
-        return (index.h(index.Host, { key: '363897475f678b89b72bf19d76fcafcab8e1fd97', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, index.h("div", { key: 'db92cddb2e7cf888a747c33b22a39c261beba7f4', style: { height: this.height, width: this.width }, id: "lido-svgContainer" })));
+    }
+    render() {
+        return (index.h(index.Host, { key: 'ee0e1841a0d3086d453bd29568c53169456a75ca', class: "lido-trace", id: this.id, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, index.h("div", { key: 'd3e0ac9c6a51bf307d57b3bba3cddfb02fdf7fc1', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return index.getElement(this); }
@@ -11583,7 +11791,7 @@ const LidoWrap = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: 'f093d948bae3bd98d6c6a205b88ab2dcb6c809b3', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.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 }, index.h("slot", { key: '02e2e72ace7ca4eae384ed410cacc2e3a337b6f7' })));
+        return (index.h(index.Host, { key: '2cbff3a777cabde661963c99831a79e71b4baa5e', class: "lido-wrap", value: this.value, type: this.type, "tab-index": this.tabIndex, style: this.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 }, index.h("slot", { key: '936b5147064c7448e01af2f77a555d9b674a9ad3' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -11597,6 +11805,7 @@ exports.lido_flash_card = LidoFlash;
 exports.lido_float = LidoFloat;
 exports.lido_home = LidoHome;
 exports.lido_image = LidoImage;
+exports.lido_keyboard = LidoKeyboard;
 exports.lido_pos = LidoPos;
 exports.lido_random = LidoRandom;
 exports.lido_root = LidoRoot;

package/dist/cjs/lido-player.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["lido-avatar_17.cjs",[[0,"lido-root",{"xmlPath":[1,"xml-path"],"initialIndex":[2,"initial-index"],"margin":[1],"canplay":[4],"baseUrl":[1,"base-url"],"xmlData":[32]}],[0,"lido-home",{"xmlData":[1,"xml-data"],"initialIndex":[2,"initial-index"],"canplay":[4],"baseUrl":[1,"base-url"],"height":[1],"currentContainerIndex":[32],"exitFlag":[32],"containers":[32],"showDotsandbtn":[32]},null,{"xmlData":["onXmlDataChange"]}],[0,"lido-avatar",{"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"src":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"delayVisible":[1,"delay-visible"]}],[4,"lido-cell",{"showSpeakIcon":[4,"show-speak-icon"],"scrollbarWidth":[1,"scrollbar-width"],"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"gap":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[1],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"childElementsLength":[2,"child-elements-length"],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"layout":[1],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"padding":[1],"alignItems":[1,"align-items"],"borderRadius":[1,"border-radius"],"flexDirection":[1,"flex-direction"],"delayVisible":[1,"delay-visible"],"style":[32]}],[4,"lido-col",{"showSpeakIcon":[4,"show-speak-icon"],"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"childElementsLength":[2,"child-elements-length"],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"direction":[1],"borderImage":[1,"border-image"],"boxShadow":[1,"box-shadow"],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"style":[32]}],[4,"lido-container",{"showDropBorder":[4,"show-drop-border"],"appendToDropOnCompletion":[4,"append-to-drop-on-completion"],"id":[1],"objective":[1],"customStyle":[1,"custom-style"],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"bgImage":[1,"bg-image"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"canplay":[4],"showCheck":[4,"show-check"],"isContinueOnCorrect":[4,"is-continue-on-correct"],"isAllowOnlyCorrect":[4,"is-allow-only-correct"],"baseUrl":[1,"base-url"],"margin":[1],"showPrevButton":[1,"show-prev-button"],"showNextButton":[1,"show-next-button"],"delayVisible":[1,"delay-visible"]}],[4,"lido-flash-card",{"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"direction":[1],"display":[1],"front":[8],"back":[8],"flipped":[1540],"margin":[1],"delayVisible":[1,"delay-visible"],"style":[32]},null,{"flipped":["handleFlippedChange"]}],[4,"lido-float",{"id":[1],"value":[1],"z":[1],"tabIndex":[2,"tab-index"],"visible":[4],"onEntry":[1,"on-entry"],"width":[1],"height":[1],"bgColor":[1,"bg-color"],"delayVisible":[1,"delay-visible"],"style":[32]}],[0,"lido-image",{"showSpeakIcon":[4,"show-speak-icon"],"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[8],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"src":[1],"isSlice":[1,"is-slice"],"sliceWidth":[1,"slice-width"],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"padding":[1],"filter":[1],"borderRadius":[1,"border-radius"],"transform":[1],"delayVisible":[1,"delay-visible"],"style":[32]}],[4,"lido-pos",{"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[8],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"style":[32]}],[4,"lido-random",{"showSpeakIcon":[4,"show-speak-icon"],"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1]}],[4,"lido-row",{"showSpeakIcon":[4,"show-speak-icon"],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"childElementsLength":[2,"child-elements-length"],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"direction":[1],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"display":[1],"margin":[1],"style":[32]}],[0,"lido-shape",{"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"shapeType":[1,"shape-type"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"delayVisible":[1,"delay-visible"]}],[0,"lido-slide-fill",{"id":[1],"width":[1],"fill":[1],"numberType":[1,"number-type"],"min":[2],"division":[2],"max":[2],"slider":[4],"src":[1],"fillDirection":[1,"fill-direction"],"delayVisible":[1,"delay-visible"],"svgContent":[32]},null,{"src":["onSrcChange"],"fill":["onPropChange"],"division":["onPropChange"],"fillDirection":["onPropChange"],"numberType":["onPropChange"],"min":["onPropChange"],"max":["onPropChange"]}],[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"],"style":[32]}],[0,"lido-trace",{"showSpeakIcon":[4,"show-speak-icon"],"id":[1],"svgSource":[1,"svg-source"],"value":[1],"height":[1],"width":[1],"x":[1],"y":[1],"z":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"tabIndex":[2,"tab-index"],"mode":[1],"fingerHintUrl":[1,"finger-hint-url"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"highlightTextId":[1,"highlight-text-id"],"animationTrace":[4,"animation-trace"],"delayVisible":[1,"delay-visible"],"svgUrls":[32],"currentSvgIndex":[32],"fileIndex":[32],"isDragging":[32],"activePointerId":[32],"idleTimer":[32],"fingerImg":[32]},null,{"svgSource":["initializeSVG"],"mode":["initializeSVG"]}],[4,"lido-wrap",{"showSpeakIcon":[4,"show-speak-icon"],"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"childElementsLength":[2,"child-elements-length"],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"flex":[1],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"style":[32]}]]]], options);
+  return index.bootstrapLazy([["lido-avatar_18.cjs",[[0,"lido-root",{"xmlPath":[1,"xml-path"],"initialIndex":[2,"initial-index"],"margin":[1],"canplay":[4],"baseUrl":[1,"base-url"],"xmlData":[32]}],[0,"lido-home",{"xmlData":[1,"xml-data"],"initialIndex":[2,"initial-index"],"canplay":[4],"baseUrl":[1,"base-url"],"height":[1],"currentContainerIndex":[32],"exitFlag":[32],"containers":[32],"showDotsandbtn":[32]},null,{"xmlData":["onXmlDataChange"]}],[0,"lido-keyboard",{"keys":[1],"width":[1],"height":[1],"fontSize":[1,"font-size"],"fontColor":[1,"font-color"],"fontFamily":[1,"font-family"],"gap":[1],"bgColor":[1,"bg-color"],"borderRadius":[1,"border-radius"],"y":[1],"x":[1],"z":[1],"margin":[1],"padding":[1],"visible":[1],"onEntry":[1,"on-entry"],"type":[1],"keyboardInput":[4,"keyboard-input"],"columns":[1],"letterLength":[2,"letter-length"],"numberOfClick":[32],"inputString":[32],"style":[32]}],[0,"lido-avatar",{"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"src":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"delayVisible":[1,"delay-visible"]}],[4,"lido-cell",{"showSpeakIcon":[4,"show-speak-icon"],"scrollbarWidth":[1,"scrollbar-width"],"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"gap":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[1],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"childElementsLength":[2,"child-elements-length"],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"layout":[1],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"padding":[1],"alignItems":[1,"align-items"],"borderRadius":[1,"border-radius"],"flexDirection":[1,"flex-direction"],"delayVisible":[1,"delay-visible"],"style":[32]}],[4,"lido-col",{"showSpeakIcon":[4,"show-speak-icon"],"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"childElementsLength":[2,"child-elements-length"],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"direction":[1],"borderImage":[1,"border-image"],"boxShadow":[1,"box-shadow"],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"style":[32]}],[4,"lido-container",{"showDropBorder":[4,"show-drop-border"],"appendToDropOnCompletion":[4,"append-to-drop-on-completion"],"id":[1],"objective":[1],"customStyle":[1,"custom-style"],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"bgImage":[1,"bg-image"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"canplay":[4],"showCheck":[4,"show-check"],"isContinueOnCorrect":[4,"is-continue-on-correct"],"isAllowOnlyCorrect":[4,"is-allow-only-correct"],"baseUrl":[1,"base-url"],"margin":[1],"showPrevButton":[1,"show-prev-button"],"showNextButton":[1,"show-next-button"],"delayVisible":[1,"delay-visible"]}],[4,"lido-flash-card",{"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"direction":[1],"display":[1],"front":[8],"back":[8],"flipped":[1540],"margin":[1],"delayVisible":[1,"delay-visible"],"style":[32]},null,{"flipped":["handleFlippedChange"]}],[4,"lido-float",{"id":[1],"value":[1],"z":[1],"tabIndex":[2,"tab-index"],"visible":[4],"onEntry":[1,"on-entry"],"width":[1],"height":[1],"bgColor":[1,"bg-color"],"type":[1],"delayVisible":[1,"delay-visible"],"floatDirection":[1,"float-direction"],"style":[32]}],[0,"lido-image",{"showSpeakIcon":[4,"show-speak-icon"],"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[8],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"src":[1],"isSlice":[1,"is-slice"],"sliceWidth":[1,"slice-width"],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"padding":[1],"filter":[1],"borderRadius":[1,"border-radius"],"transform":[1],"delayVisible":[1,"delay-visible"],"style":[32]}],[4,"lido-pos",{"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[8],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"style":[32]}],[4,"lido-random",{"showSpeakIcon":[4,"show-speak-icon"],"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1]}],[4,"lido-row",{"showSpeakIcon":[4,"show-speak-icon"],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"childElementsLength":[2,"child-elements-length"],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"direction":[1],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"display":[1],"margin":[1],"style":[32]}],[0,"lido-shape",{"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"shapeType":[1,"shape-type"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"delayVisible":[1,"delay-visible"]}],[0,"lido-slide-fill",{"id":[1],"width":[1],"height":[1],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"visible":[8],"margin":[1],"padding":[1],"borderRadius":[1,"border-radius"],"fill":[1],"numberType":[1,"number-type"],"min":[2],"division":[2],"max":[2],"slider":[4],"src":[1],"fillDirection":[1,"fill-direction"],"type":[1],"onEntry":[1,"on-entry"],"delayVisible":[1,"delay-visible"],"svgContent":[32],"style":[32]},null,{"src":["onSrcChange"],"fill":["onPropChange"],"division":["onPropChange"],"fillDirection":["onPropChange"],"numberType":["onPropChange"],"min":["onPropChange"],"max":["onPropChange"]}],[0,"lido-trace",{"showSpeakIcon":[4,"show-speak-icon"],"id":[1],"svgSource":[1,"svg-source"],"value":[1],"height":[1],"width":[1],"x":[1],"y":[1],"z":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"tabIndex":[2,"tab-index"],"mode":[1],"fingerHintUrl":[1,"finger-hint-url"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"highlightTextId":[1,"highlight-text-id"],"animationTrace":[4,"animation-trace"],"delayVisible":[1,"delay-visible"],"svgUrls":[32],"currentSvgIndex":[32],"moving":[32],"style":[32],"fileIndex":[32],"isDragging":[32],"activePointerId":[32],"idleTimer":[32],"fingerImg":[32]},null,{"svgSource":["initializeSVG"],"mode":["initializeSVG"]}],[4,"lido-wrap",{"showSpeakIcon":[4,"show-speak-icon"],"id":[1],"value":[1],"height":[1],"width":[1],"ariaLabel":[1,"aria-label"],"ariaHidden":[1,"aria-hidden"],"x":[1],"y":[1],"z":[1],"bgColor":[1,"bg-color"],"type":[1],"tabIndex":[2,"tab-index"],"visible":[4],"audio":[1],"onTouch":[1,"on-touch"],"onInCorrect":[1,"on-in-correct"],"onCorrect":[1,"on-correct"],"onEntry":[1,"on-entry"],"childElementsLength":[2,"child-elements-length"],"minLength":[2,"min-length"],"maxLength":[2,"max-length"],"flex":[1],"minDrops":[2,"min-drops"],"maxDrops":[2,"max-drops"],"margin":[1],"style":[32]}],[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"],"style":[32]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;