lido-player 0.0.2-alpha-24 → 0.0.2-alpha-25

package/dist/cjs/index.cjs.js

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

package/dist/cjs/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-384577d3.js');
+const utils = require('./utils-98308657.js');
 
 var rive = {exports: {}};
 
@@ -10261,13 +10261,15 @@ const LidoKeyboard = class {
         this.onEntry = undefined;
         this.type = undefined;
         this.keyboardInput = false;
-        this.columns = "10";
+        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));
@@ -10280,18 +10282,14 @@ const LidoKeyboard = class {
         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;
+            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";
+                container.style.pointerEvents = 'none';
                 await utils.executeActions(onCorrrect, this.el);
                 utils.triggerNextContainer();
             }
@@ -10347,17 +10345,17 @@ const LidoKeyboard = class {
             padding: utils.parseProp(this.padding, orientation),
             borderRadius: utils.parseProp(this.borderRadius, orientation),
             columns: utils.parseProp(`${this.columns}`, orientation),
-            gap: utils.parseProp(this.gap, 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: '59e8f873174042e62ca4077c6d9ee2d563c45fd5', 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: '07cb55f733a43b5f0c3f2f4aafc98e2ec0fa5a1e', class: "input-area" }, index.h("input", { key: 'b39008a1132d84edb447c65f79cc20b0519ab77b', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), index.h("lido-text", { key: 'ffd684ce0e317d62c8d9b03cd8b00fb18ea48e0a', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        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: 'fb04b691e301cb5fa7820f6715d209c93a09281a', 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: '0f6f9a8369ae7e3e74fd47eb79c0e528ae683504', 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: 'eb27360d9bc144e908aeb39eafd8682d5ac3bda0', class: "keyboard-wrapper", style: {
+            } }), 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',
@@ -10371,7 +10369,7 @@ const LidoKeyboard = class {
             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, type: this.type, class: `key-button${isDisabled ? ' disabled' : ''}`, onClick: () => {
+                }, 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);
                 } }));
@@ -11064,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';
@@ -11118,7 +11116,13 @@ 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() {
@@ -11129,12 +11133,14 @@ const LidoTrace = class {
         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));
@@ -11191,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}`);
@@ -11507,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();
@@ -11576,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) {
@@ -11696,7 +11704,7 @@ const LidoTrace = class {
         };
     }
     render() {
-        return (index.h(index.Host, { key: '402c89a81b7393573cab64d27a2d789727768f5a', 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: '5f9c7cc6f305ff9ef51252bbcbb499577171e2cc', style: this.style, id: "lido-svgContainer" })));
+        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); }

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_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],"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);
+  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;

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  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],"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);
+  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;

package/dist/cjs/{utils-384577d3.js → utils-98308657.js}

@@ -1000,15 +1000,29 @@ function animateDragToTarget(dragElement, targetElement, container, transition =
         return;
     const dropRect = targetElement.getBoundingClientRect();
     const dragRect = dragElement.getBoundingClientRect();
-    const containerScale = getElementScale(container); // Assuming you have this function
-    const dropCenterX = dropRect.left + dropRect.width / 2;
-    const dropCenterY = dropRect.top + dropRect.height / 2;
-    const dragCenterX = dragRect.left + dragRect.width / 2;
-    const dragCenterY = dragRect.top + dragRect.height / 2;
-    const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
-    const scaledTop = (dropCenterY - dragCenterY) / containerScale;
-    dragElement.style.transition = transition;
-    dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
+    if (container.getAttribute('drop-action') === exports.DropAction.InfiniteDrop) {
+        const style = window.getComputedStyle(dragElement);
+        const matrix = new DOMMatrixReadOnly(style.transform);
+        const currentX = matrix.m41 || 0;
+        const currentY = matrix.m42 || 0;
+        const dx = dropRect.left - dragRect.left;
+        const dy = dropRect.top - dragRect.top;
+        const finalX = currentX + dx * (1 / calculateScale());
+        const finalY = currentY + dy * (1 / calculateScale());
+        dragElement.style.transition = 'transform 0.5s ease';
+        dragElement.style.transform = `translate(${finalX}px, ${finalY}px)`;
+    }
+    else {
+        const containerScale = getElementScale(container); // Assuming you have this function
+        const dropCenterX = dropRect.left + dropRect.width / 2;
+        const dropCenterY = dropRect.top + dropRect.height / 2;
+        const dragCenterX = dragRect.left + dragRect.width / 2;
+        const dragCenterY = dragRect.top + dragRect.height / 2;
+        const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
+        const scaledTop = (dropCenterY - dragCenterY) / containerScale;
+        dragElement.style.transition = transition;
+        dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
+    }
 }
 function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedValueData, dragSelectedData, dropSelectedData) {
     var _a;
@@ -1017,21 +1031,21 @@ function handleResetDragElement(dragElement, dropElement, dropHasDrag, selectedV
     const cloneArray = container.querySelectorAll(`#${dragElement.id}`);
     const cloneDragElement = Array.from(cloneArray).find(item => dragElement !== item);
     dragElement.style.transition = 'transform 0.5s ease';
-    dragElement.style.transform = 'translate(0, 0)';
-    if (container.getAttribute('drop-action') === 'infinite-drop')
-        return;
     if (cloneDragElement) {
-        dragElement.style.transform = 'translate(0,0)';
-        animateDragToTarget(dragElement, dropElement, container);
+        animateDragToTarget(dragElement, cloneDragElement, container);
         setTimeout(() => {
-            cloneDragElement.style.width = dragElement.style.width;
-            cloneDragElement.style.height = dragElement.style.height;
+            if (container.getAttribute('drop-action') === exports.DropAction.InfiniteDrop) {
+                dragElement.style.width = cloneDragElement.style.width;
+                dragElement.style.height = cloneDragElement.style.height;
+            }
+            else {
+                cloneDragElement.style.width = dragElement.style.width;
+                cloneDragElement.style.height = dragElement.style.height;
+            }
             dragElement.style.transform = 'translate(0,0)';
             dragElement.style.position = 'unset';
             cloneDragElement.replaceWith(dragElement);
-        }, 250);
-        dragElement.style.position = 'unset';
-        cloneDragElement.replaceWith(dragElement);
+        }, 500);
     }
     else {
         dragElement.style.transform = 'translate(0,0)';
@@ -1305,7 +1319,7 @@ async function onElementDropComplete(dragElement, dropElement) {
     }
     dragToDropMap.set(dragElement, dropElement);
     // Add pulse and highlight effect for a successful match
-    const isCorrect = dropElement['value'].includes(dragElement['value']);
+    const isCorrect = (dropElement['value'].toLowerCase()).includes((dragElement['value']).toLowerCase());
     dispatchElementDropEvent(dragElement, dropElement, isCorrect);
     if (isCorrect) {
         // Perform actions if onMatch is defined
@@ -1433,8 +1447,6 @@ async function onClickDragElement(element) {
     const currentTransform = getComputedStyle(dragEl).transform;
     removeHighlight(element);
     if (currentTransform && currentTransform !== 'none' && currentTransform !== 'matrix(1, 0, 0, 1, 0, 0)') {
-        dragEl.style.transition = 'transform 0.5s ease';
-        dragEl.style.transform = 'translate(0px, 0px)';
         onElementDropComplete(dragEl, null);
         return;
     }
@@ -67999,10 +68011,15 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             dragElement.style.transition = '';
             let dummyElement = document.createElement('div');
             if (isInfinite) {
-                dummyElement = cloneElementWithComputedStyles(dragElement);
-                dummyElement.classList.remove('dropped');
-                dummyElement.removeAttribute('drop-to');
-                dummyElement.removeAttribute('drop-time');
+                const allDummy = container.querySelectorAll(`[id=${dragElement.id}]`);
+                if (allDummy.length === 1) {
+                    dummyElement = cloneElementWithComputedStyles(dragElement);
+                    dummyElement.classList.remove('dropped');
+                    dummyElement.removeAttribute('drop-to');
+                    dummyElement.removeAttribute('drop-time');
+                    dragElement.style.width = dropElement.style.width;
+                    dragElement.style.height = dropElement.style.height;
+                }
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
             dragElement.replaceWith(dummyElement);
@@ -68047,6 +68064,7 @@ function cloneElementWithComputedStyles(originalEl) {
     clone = clone.firstChild;
     clone.setAttribute('height', originalEl.style.height);
     clone.setAttribute('width', originalEl.style.width);
+    clone.setAttribute('visible', 'true');
     return clone;
 }
 // Function to parse actions string

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

@@ -23,13 +23,15 @@ export class LidoKeyboard {
         this.onEntry = undefined;
         this.type = undefined;
         this.keyboardInput = false;
-        this.columns = "10";
+        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(SelectedValuesKey)) || '';
         selcetedValue = this.inputString;
         localStorage.setItem(SelectedValuesKey, JSON.stringify(selcetedValue));
@@ -42,18 +44,14 @@ export class LidoKeyboard {
         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;
+            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";
+                container.style.pointerEvents = 'none';
                 await executeActions(onCorrrect, this.el);
                 triggerNextContainer();
             }
@@ -109,17 +107,17 @@ export class LidoKeyboard {
             padding: parseProp(this.padding, orientation),
             borderRadius: parseProp(this.borderRadius, orientation),
             columns: parseProp(`${this.columns}`, orientation),
-            gap: parseProp(this.gap, orientation)
+            gap: parseProp(this.gap, orientation),
         };
     }
     render() {
         const keysArray = this.keys.split(',').map(k => k.trim());
         const container = document.getElementById(LidoContainer);
         const showCheck = container.getAttribute('show-check') === 'true';
-        return (h(Host, { key: '59e8f873174042e62ca4077c6d9ee2d563c45fd5', class: "lido-keyboard", style: { width: this.style.width, height: this.style.height, position: 'relative', margin: this.style.margin, zIndex: this.z } }, this.keyboardInput && (h("div", { key: '07cb55f733a43b5f0c3f2f4aafc98e2ec0fa5a1e', class: "input-area" }, h("input", { key: 'b39008a1132d84edb447c65f79cc20b0519ab77b', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), h("lido-text", { key: 'ffd684ce0e317d62c8d9b03cd8b00fb18ea48e0a', visible: showCheck ? 'true' : 'false', string: "<<", "bg-color": "black", "font-color": "white", "border-radius": "20px", "font-size": "30px", width: "100px", height: "70px", type: "click", onClick: () => {
+        return (h(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 && (h("div", { key: '2755d632b00ac4bd9685317c61a6fa9af2972973', class: "input-area" }, h("input", { key: '266a08add13f544c583d424fd1ab31911531f65f', type: "text", value: this.inputString, class: "input-area", readonly: true, onInput: (e) => (this.inputString = e.target.value) }), 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);
-            } }), h("lido-text", { key: 'fb04b691e301cb5fa7820f6715d209c93a09281a', 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 && (h("lido-text", { key: '0f6f9a8369ae7e3e74fd47eb79c0e528ae683504', 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" })), h("div", { key: 'eb27360d9bc144e908aeb39eafd8682d5ac3bda0', class: "keyboard-wrapper", style: {
+            } }), 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 && (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" })), h("div", { key: '80796fa601b359e235a885fdf9e233c3df941605', class: "keyboard-wrapper", style: {
                 display: 'flex',
                 flexWrap: 'wrap',
                 justifyContent: 'center',
@@ -133,7 +131,7 @@ export class LidoKeyboard {
             let string = label === 'Space' ? ' ' : label;
             return (h("lido-text", { id: 'key-button-' + index, 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, type: this.type, class: `key-button${isDisabled ? ' disabled' : ''}`, onClick: () => {
+                }, 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);
                 } }));
@@ -479,7 +477,7 @@ export class LidoKeyboard {
                 },
                 "attribute": "columns",
                 "reflect": false,
-                "defaultValue": "\"10\""
+                "defaultValue": "'10'"
             },
             "letterLength": {
                 "type": "number",

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

@@ -4,12 +4,12 @@ import { LidoContainer, TraceMode } from "../../utils/constants";
 // Enum for different tracing modes
 export class LidoTrace {
     constructor() {
-        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';
@@ -58,7 +58,13 @@ export class LidoTrace {
             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;
+        }
         const svgText = await this.fetchSVG(url);
+        console.log("SVG fetched successfully\n");
         await this.loadAnotherSVG(state, true); // Load the first SVG
     }
     componentDidLoad() {
@@ -69,12 +75,14 @@ export class LidoTrace {
         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) {
             speakIcon(this.el);
             this.el.append(speakIcon(this.el));
         }
+        this.initializeSVG();
     }
     disconnectedCallback() {
         window.removeEventListener('resize', this.updateStyles.bind(this));
@@ -131,6 +139,7 @@ export class LidoTrace {
     }
     // 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}`);
@@ -447,6 +456,7 @@ export class LidoTrace {
         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();
@@ -516,7 +526,7 @@ export class LidoTrace {
             if (state.svg) {
                 this.cleanupPreviousSVG(state);
             }
-            const svgText = await this.fetchSVG(convertUrlToRelative(this.svgSource));
+            const svgText = await this.fetchSVG(convertUrlToRelative(this.svgSource.split(';').map(s => s.trim())[this.currentSvgIndex]));
             this.insertSVG(svgText);
             state.svg = this.getSVGElement();
             if (this.mode === TraceMode.BlindTracing || this.mode === TraceMode.BlindFreeTrace) {
@@ -636,7 +646,7 @@ export class LidoTrace {
         };
     }
     render() {
-        return (h(Host, { key: '402c89a81b7393573cab64d27a2d789727768f5a', 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 }, h("div", { key: '5f9c7cc6f305ff9ef51252bbcbb499577171e2cc', style: this.style, id: "lido-svgContainer" })));
+        return (h(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 }, h("div", { key: 'd3e0ac9c6a51bf307d57b3bba3cddfb02fdf7fc1', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {
@@ -998,6 +1008,7 @@ export class LidoTrace {
         return {
             "svgUrls": {},
             "currentSvgIndex": {},
+            "moving": {},
             "style": {},
             "fileIndex": {},
             "isDragging": {},