lido-player 0.0.2-alpha-3 → 0.0.2-alpha-5

package/dist/cjs/index-0d28e716.js

@@ -63,7 +63,20 @@ var loadModule = (cmpMeta, hostRef, hmrVersionId) => {
   if (module) {
     return module[exportName];
   }
-  /*!__STENCIL_STATIC_IMPORT_SWITCH__*/
+  
+        if (!hmrVersionId || !BUILD.hotModuleReplacement) {
+          const processMod = importedModule => {
+              cmpModules.set(bundleId, importedModule);
+              return importedModule[exportName];
+          }
+          switch(bundleId) {
+              
+                case 'lido-col_12.cjs':
+                    return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
+                        /* webpackMode: "lazy" */
+                        './lido-col_12.cjs.entry.js')); }).then(processMod, consoleError);
+          }
+      }
   return Promise.resolve().then(function () { return /*#__PURE__*/_interopNamespace(require(
     /* @vite-ignore */
     /* webpackInclude: /\.entry\.js$/ */

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-64490acd.js');
+const utils = require('./utils-71eb1ea0.js');
 
 
 

package/dist/cjs/{app-col_12.cjs.entry.js → lido-col_12.cjs.entry.js}

@@ -3,12 +3,12 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d28e716.js');
-const utils = require('./utils-64490acd.js');
+const utils = require('./utils-71eb1ea0.js');
 
-const appColCss = ".col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.col>*{}";
-const AppColStyle0 = appColCss;
+const lidoColCss = ".lido-col{top:var(--y, 0);left:var(--x, 0);height:var(--height, 100%);width:var(--width, 100%);background-color:var(--bgColor, #eeeeee);padding:15px;border-radius:10px;display:flex;justify-content:space-around;flex-direction:column;align-items:center}.lido-col>*{}";
+const LidoColStyle0 = lidoColCss;
 
-const AppCol = class {
+const LidoCol = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.id = undefined;
@@ -28,7 +28,6 @@ const AppCol = class {
         this.onTouch = undefined;
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
-        this.onMatch = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -49,16 +48,16 @@ const AppCol = class {
             display: this.visible ? 'flex' : 'none',
             zIndex: this.z,
         };
-        return (index.h(index.Host, { key: '99f188b18d41efb977b7bc17d93d1474e97fd444', id: this.id, class: "col", type: this.type, tabindex: this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '6c663c7c7e5aa6167d5af26ecee8b34305c7da6d' })));
+        return (index.h(index.Host, { key: 'bdfb0189675170177b3f8538ebfb09fe3980f659', id: this.id, class: "lido-col", type: this.type, tabindex: this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'aa871182e527009eb821dc5715937f18a3936c77' })));
     }
     get el() { return index.getElement(this); }
 };
-AppCol.style = AppColStyle0;
+LidoCol.style = LidoColStyle0;
 
-const appContainerCss = ".container{position:relative;height:100%;width:100%;background-color:var(--bgColor, #ffffff);display:flex;flex-direction:column;justify-content:center;align-items:center}";
-const AppContainerStyle0 = appContainerCss;
+const lidoContainerCss = ".lido-container{position:relative;height:100%;width:100%;background-color:var(--bgColor, #ffffff);display:flex;flex-direction:column;justify-content:center;align-items:center}";
+const LidoContainerStyle0 = lidoContainerCss;
 
-const AppContainer = class {
+const LidoContainer = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.id = undefined;
@@ -130,30 +129,30 @@ const AppContainer = class {
             left: '50%',
             transform: 'translate(-50%, -50%)', // Centering the container
         };
-        console.log('🚀 ~ AppContainer ~ canplay:', this.canplay);
-        return (index.h(index.Host, { key: 'e4748f56d1520a0418d3378c695f5968e9d7c53e', id: "container", tabindex: 0, class: "container", objective: this.objective, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, showCheck: this.showCheck, isContinueOnCorrect: this.isContinueOnCorrect }, index.h("slot", { key: '2ea749cec0f51f1ebcd0b810700de21eaf138a7d' })));
+        console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
+        return (index.h(index.Host, { key: '8a81b90cfff5c960eb3dd14c1e4abc3d004274b6', id: "lido-container", tabindex: 0, class: "lido-container", objective: this.objective, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, showCheck: this.showCheck, isContinueOnCorrect: this.isContinueOnCorrect, canplay: `${this.canplay}` }, index.h("slot", { key: '331f83cd312eb3413d09652745c11ff891a8ce03' })));
     }
     get el() { return index.getElement(this); }
 };
-AppContainer.style = AppContainerStyle0;
+LidoContainer.style = LidoContainerStyle0;
 
-const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); body{overflow:hidden}.disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}";
-const AppHomeStyle0 = indexCss;
+const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); body{overflow:hidden}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}";
+const LidoHomeStyle0 = indexCss;
 
-const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{left:0}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes shake{0%{transform:translateX(0);color:red;outline:4px solid red}10%{transform:translateX(-5px);color:red;outline:4px solid red}20%{transform:translateX(5px);color:red;outline:4px solid red}30%{transform:translateX(-5px);color:red;outline:4px solid red}40%{transform:translateX(5px);color:red;outline:4px solid red}50%{transform:translateX(-5px);color:red;outline:4px solid red}60%{transform:translateX(5px);color:red;outline:4px solid red}70%{transform:translateX(-5px);color:red;outline:4px solid red}80%{transform:translateX(5px);color:red;outline:4px solid red}90%{transform:translateX(-5px);color:red;outline:4px solid red}100%{transform:translateX(0);color:red;outline:4px solid red}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}";
-const AppHomeStyle1 = animationCss;
+const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{left:0}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}";
+const LidoHomeStyle1 = animationCss;
 
-const appHomeCss = ".snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.dot-container{text-align:center;position:fixed;z-index:1;width:fit-content;top:1%;left:50%;transform:translate(-50%)}.dot{height:15px;width:15px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer}.dot.completed{background-color:grey}.dot.current{background-color:green}.dot:not(.completed):not(.current){background-color:#bbb}";
-const AppHomeStyle2 = appHomeCss;
+const lidoHomeCss = ".lido-snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.lido-dot-container{text-align:center;position:fixed;z-index:1;width:fit-content;top:1%;left:50%;transform:translate(-50%)}.lido-dot{height:15px;width:15px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}";
+const LidoHomeStyle2 = lidoHomeCss;
 
-const AppHome = class {
+const LidoHome = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         /**
          * Event handler for transitioning to the next container in the sequence.
          * If the last container is reached, it shows a completion message.
          */
-        this.nextContainer = (index) => {
+        this.NextContainerKey = (index) => {
             if (index != undefined && index == this.currentContainerIndex)
                 return;
             // Clear selected values from localStorage on container transition
@@ -162,18 +161,21 @@ const AppHome = class {
             if (index != undefined && index < this.containers.length) {
                 // Move to the next container
                 this.currentContainerIndex = index;
-                window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
+                // window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
+                utils.dispatchActivityChangeEvent(this.currentContainerIndex);
             }
             else if (this.currentContainerIndex < this.containers.length - 1) {
                 // Move to the next container
                 this.currentContainerIndex++;
-                window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
+                // window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
+                utils.dispatchActivityChangeEvent(this.currentContainerIndex);
             }
             else if (this.currentContainerIndex >= this.containers.length - 1) {
                 // Show the completion message if all containers have been viewed
                 this.showCompletionMessage = true;
-                const event = new CustomEvent('gameCompleted');
-                window.dispatchEvent(event);
+                // const event = new CustomEvent('gameCompleted');
+                // window.dispatchEvent(event);
+                utils.dispatchGameCompletedEvent();
                 this.currentContainerIndex = 0;
                 // Hide the completion message after 3 seconds
                 setTimeout(() => {
@@ -196,12 +198,12 @@ const AppHome = class {
      * between containers and parses the XML data into containers.
      */
     componentWillLoad() {
-        // Listen for 'nextContainer' event to transition between containers
-        window.addEventListener('nextContainer', () => {
-            this.nextContainer();
+        // Listen for 'NextContainerKey' event to transition between containers
+        window.addEventListener(utils.NextContainerKey, () => {
+            this.NextContainerKey();
         });
         window.addEventListener('changeContainer', (e) => {
-            this.nextContainer(e.detail.index);
+            this.NextContainerKey(e.detail.index);
         });
         // Parse the provided XML data
         this.parseXMLData(this.xmlData);
@@ -215,11 +217,11 @@ const AppHome = class {
      * Lifecycle method that cleans up event listeners when the component is removed from the DOM.
      */
     disconnectedCallback() {
-        window.removeEventListener('nextContainer', () => {
-            this.nextContainer();
+        window.removeEventListener(utils.NextContainerKey, () => {
+            this.NextContainerKey();
         });
         window.removeEventListener('changeContainer', (e) => {
-            this.nextContainer(e.detail.index);
+            this.NextContainerKey(e.detail.index);
         });
     }
     /**
@@ -263,16 +265,16 @@ const AppHome = class {
             .filter(Boolean);
         // Map XML tags to Stencil components
         const componentMapping = {
-            'app-container': (index.h("app-container", Object.assign({}, props, { canplay: this.canplay, baseUrl: this.baseUrl }), children)),
-            'app-col': index.h("app-col", Object.assign({}, props), children),
-            'app-trace': index.h("app-trace", Object.assign({}, props), children),
-            'app-image': index.h("app-image", Object.assign({}, props), children),
-            'app-row': index.h("app-row", Object.assign({}, props), children),
-            'app-text': index.h("app-text", Object.assign({}, props), children),
-            'app-pos': index.h("app-pos", Object.assign({}, props), children),
-            'app-shape': index.h("app-shape", Object.assign({}, props), children),
-            'app-wrap': index.h("app-wrap", Object.assign({}, props), children),
-            'app-random': index.h("app-random", Object.assign({}, props), children),
+            'lido-container': (index.h("lido-container", Object.assign({}, props, { canplay: this.canplay, baseUrl: this.baseUrl }), children)),
+            'lido-col': index.h("lido-col", Object.assign({}, props), children),
+            'lido-trace': index.h("lido-trace", Object.assign({}, props), children),
+            'lido-image': index.h("lido-image", Object.assign({}, props), children),
+            'lido-row': index.h("lido-row", Object.assign({}, props), children),
+            'lido-text': index.h("lido-text", Object.assign({}, props), children),
+            'lido-pos': index.h("lido-pos", Object.assign({}, props), children),
+            'lido-shape': index.h("lido-shape", Object.assign({}, props), children),
+            'lido-wrap': index.h("lido-wrap", Object.assign({}, props), children),
+            'lido-random': index.h("lido-random", Object.assign({}, props), children),
         };
         // If the tag is known, return the corresponding Stencil component, otherwise log a warning
         if (componentMapping[tagName]) {
@@ -284,13 +286,13 @@ const AppHome = class {
         }
     }
     /**
-     * Parses the `app-container` elements from the XML root element and stores them in the `containers` state.
+     * Parses the `lido-container` elements from the XML root element and stores them in the `containers` state.
      *
      * @param rootElement - The root element of the parsed XML document.
      */
     parseContainers(rootElement) {
         const containers = [];
-        const containerElements = rootElement.querySelectorAll('app-container');
+        const containerElements = rootElement.querySelectorAll('lido-container');
         // Parse each container and add it to the array
         containerElements.forEach(container => {
             const parsedElement = this.parseElement(container);
@@ -305,7 +307,7 @@ const AppHome = class {
      * Clicking on a dot allows the user to jump to a specific container.
      */
     renderDots() {
-        return (index.h("div", { id: "dot-indicator", class: "dot-container" }, this.containers.map((_, index$1) => (index.h("span", { class: `dot ${index$1 < this.currentContainerIndex ? 'completed' : index$1 === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index$1) })))));
+        return (index.h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, this.containers.map((_, index$1) => (index.h("span", { class: `lido-dot ${index$1 < this.currentContainerIndex ? 'completed' : index$1 === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index$1) })))));
     }
     /**
      * Jumps to a specific container based on the index of the dot clicked.
@@ -313,7 +315,7 @@ const AppHome = class {
      * @param index - The index of the container to jump to.
      */
     jumpToContainer(index) {
-        this.nextContainer(index);
+        this.NextContainerKey(index);
         // this.currentContainerIndex = index;
         // this.containers = [...this.containers]; // Trigger re-render
     }
@@ -322,15 +324,15 @@ const AppHome = 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, { index: this.currentContainerIndex, totalIndex: this.containers.length }, index.h("div", { key: this.currentContainerIndex }, this.containers[this.currentContainerIndex]), this.renderDots(), this.showCompletionMessage && index.h("div", { class: "snackbar" }, "All containers have been displayed!")));
+        return (index.h(index.Host, { index: this.currentContainerIndex, totalIndex: this.containers.length }, index.h("div", { key: this.currentContainerIndex }, this.containers[this.currentContainerIndex]), this.renderDots(), this.showCompletionMessage && index.h("div", { class: "lido-snackbar" }, "All containers have been displayed!")));
     }
 };
-AppHome.style = AppHomeStyle0 + (AppHomeStyle1 + AppHomeStyle2);
+LidoHome.style = LidoHomeStyle0 + (LidoHomeStyle1 + LidoHomeStyle2);
 
-const appImageCss = ".image{user-select:none;-webkit-user-drag:none;object-fit:contain;max-width:100%;max-height:100%;aspect-ratio:1 / 1;}";
-const AppImageStyle0 = appImageCss;
+const lidoImageCss = ".lido-image{user-select:none;-webkit-user-drag:none;object-fit:contain;max-width:100%;max-height:100%;aspect-ratio:1 / 1;}";
+const LidoImageStyle0 = lidoImageCss;
 
-const AppImage = class {
+const LidoImage = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.value = undefined;
@@ -349,7 +351,6 @@ const AppImage = class {
         this.onTouch = undefined;
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
-        this.onMatch = undefined;
         this.onEntry = undefined;
         this.src = undefined;
     }
@@ -373,16 +374,16 @@ const AppImage = class {
             alignItems: 'center', // Vertically center the image
             justifyContent: 'center', // Horizontally center the image
         };
-        return (index.h(index.Host, { key: 'ee933f90204e8d435ead5226d5d6f5ad907a1b4a', type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("img", { key: 'f8df33300a01f27a6aaf61763677708b6234faf8', class: "image", src: utils.convertUrlToRelative(this.src), alt: "", style: style })));
+        return (index.h(index.Host, { key: 'c3f6e5e47e0a09e4173feaa15072ffaa87ae80a9', type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("img", { key: '5f5392e87f1c688bbb27ef6dfea2e61cafe68169', class: "lido-image", src: utils.convertUrlToRelative(this.src), alt: "", style: style })));
     }
     get el() { return index.getElement(this); }
 };
-AppImage.style = AppImageStyle0;
+LidoImage.style = LidoImageStyle0;
 
-const appPosCss = ".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}.pos>*{position:absolute}";
-const AppPosStyle0 = appPosCss;
+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;
 
-const AppPos = class {
+const LidoPos = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.id = undefined;
@@ -402,7 +403,6 @@ const AppPos = class {
         this.onTouch = undefined;
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
-        this.onMatch = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -423,16 +423,16 @@ const AppPos = class {
             zIndex: this.z,
             display: this.visible ? 'block' : 'none', // Toggle visibility
         };
-        return (index.h(index.Host, { key: '72c646c495d9a645e378fadd35fa1a277a97707a', id: this.id, class: "pos", type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '46f2d0c9369ac51e6224d0826ef279416b9d851f' })));
+        return (index.h(index.Host, { key: '53f6e8cc874145ba3bb885ffa13d655ea8bce80e', id: this.id, class: "lido-pos", type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, value: this.value, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'f4e7a3abe89630dd958935ded2b5ae97596f82d0' })));
     }
     get el() { return index.getElement(this); }
 };
-AppPos.style = AppPosStyle0;
+LidoPos.style = LidoPosStyle0;
 
-const appRandomCss = ".random{display:flex;justify-content:space-between;align-items:center;position:absolute;}.random>*{position:absolute}";
-const AppRandomStyle0 = appRandomCss;
+const lidoRandomCss = ".lido-random{display:flex;justify-content:space-between;align-items:center;position:absolute;}.lido-random>*{position:absolute}";
+const LidoRandomStyle0 = lidoRandomCss;
 
-const AppRandom = class {
+const LidoRandom = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.id = undefined;
@@ -452,7 +452,6 @@ const AppRandom = class {
         this.onTouch = undefined;
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
-        this.onMatch = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -461,7 +460,7 @@ const AppRandom = class {
      */
     componentDidLoad() {
         // Select all direct child elements of the component
-        const slotElements = this.el.querySelectorAll('.random > *');
+        const slotElements = this.el.querySelectorAll('.lido-random > *');
         // Iterate over each child and apply random positions
         slotElements.forEach((child) => {
             const randomTop = Math.random() * 100; // Random value between 0 and 100 for vertical position
@@ -481,13 +480,13 @@ const AppRandom = class {
             zIndex: this.z,
             backgroundColor: this.bgColor,
         };
-        return (index.h(index.Host, { key: 'f2dfffd55f24f7f2de14105682be9c0cfe8fa8ad', class: "random", type: this.type, tabindex: this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '433ce405177d74dca078e6f5e01608567ad4af68' })));
+        return (index.h(index.Host, { key: '0611246d6b0091eebcad0ec0f2999d2b8e98c854', class: "lido-random", type: this.type, tabindex: this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: 'b03397724ad9e902d82eecde3d2981b01e49b3b0' })));
     }
     get el() { return index.getElement(this); }
 };
-AppRandom.style = AppRandomStyle0;
+LidoRandom.style = LidoRandomStyle0;
 
-const AppRoot = class {
+const LidoRoot = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.xmlPath = undefined;
@@ -508,9 +507,9 @@ const AppRoot = class {
         //   return;
         // }
         const xmlPath = (_a = this.xmlPath) !== null && _a !== void 0 ? _a : this.baseUrl + '/index.xml';
-        console.log('🚀 ~ AppRoot ~ componentWillLoad ~ this.baseUrl:', this.baseUrl);
-        console.log('🚀 ~ AppRoot ~ componentWillLoad ~ this.xmlPath:', this.xmlPath);
-        console.log('🚀 ~ AppRoot ~ componentWillLoad ~ xmlPath:', xmlPath);
+        console.log('🚀 ~ LidoRoot ~ componentWillLoad ~ this.baseUrl:', this.baseUrl);
+        console.log('🚀 ~ LidoRoot ~ componentWillLoad ~ this.xmlPath:', this.xmlPath);
+        console.log('🚀 ~ LidoRoot ~ componentWillLoad ~ xmlPath:', xmlPath);
         // Fetch the XML data
         try {
             const resolvedPath = xmlPath.startsWith('http')
@@ -538,16 +537,16 @@ const AppRoot = class {
         if (this.xmlData === null) {
             return index.h("div", null, "Error loading XML data. Please check the path or URL.");
         }
-        // Once the XML data is loaded, pass it to the `app-home` component
-        return index.h("app-home", { initialIndex: this.initialIndex, canplay: this.canplay, xmlData: this.xmlData, baseUrl: this.baseUrl });
+        // Once the XML data is loaded, pass it to the `lido-home` component
+        return index.h("lido-home", { initialIndex: this.initialIndex, canplay: this.canplay, xmlData: this.xmlData, baseUrl: this.baseUrl });
     }
     static get assetsDirs() { return ["assets"]; }
 };
 
-const appRowCss = ".row{display:flex;justify-content:space-between;align-items:center;}.row>*{}";
-const AppRowStyle0 = appRowCss;
+const lidoRowCss = ".lido-row{display:flex;justify-content:space-between;align-items:center;}.lido-row>*{}";
+const LidoRowStyle0 = lidoRowCss;
 
-const AppRow = class {
+const LidoRow = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.value = undefined;
@@ -566,7 +565,6 @@ const AppRow = class {
         this.onTouch = undefined;
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
-        this.onMatch = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -587,16 +585,16 @@ const AppRow = class {
             zIndex: this.z,
             backgroundColor: this.bgColor, // Apply background color if provided
         };
-        return (index.h(index.Host, { key: '41c3b5c1306523da20944f30e3a801b36cbac5d9', class: "row", type: this.type, tabindex: this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '52aaca9eda94648083d734f6eab815f85e5bd32c' })));
+        return (index.h(index.Host, { key: '799f1cbf0c9081ced1ea457944c6cf1ecbbcf5ec', class: "lido-row", type: this.type, tabindex: this.tabIndex, value: this.value, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '106f11f07ad4073a47bed299512cc3287f71546e' })));
     }
     get el() { return index.getElement(this); }
 };
-AppRow.style = AppRowStyle0;
+LidoRow.style = LidoRowStyle0;
 
-const appShapeCss = ".shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z)}.rectangle{border-radius:0}.circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}";
-const AppShapeStyle0 = appShapeCss;
+const lidoShapeCss = ".lido-shape{position:absolute;top:var(--y);left:var(--x);display:var(--display);z-index:var(--z)}.lido-rectangle{border-radius:0}.lido-circle{width:var(--width);height:var(--width);border-radius:50%;background-color:var(--bgColor)}.lido-ellipse{width:var(--width);height:var(--height);border-radius:50%;background-color:var(--bgColor)}.lido-triangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(50% 0%, 100% 100%, 0% 100%)}.lido-rightTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--bgColor);clip-path:polygon(100% 0%, 100% 100%, 0% 100%)}.lido-leftTriangle{width:var(--triangleWidth);height:var(--triangleHeight);background-color:var(--triangleBgColor);clip-path:polygon(0% 0%, 100% 100%, 0% 100%)}.lido-parallelogram{width:var(--paralleWidth);height:var(--paralleHeight);transform:skew(20deg)}.lido-star{width:var(--starWidth);height:var(--starHeight);background-color:var(--starBgColor);clip-path:polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%)}.lido-pentagon{width:var(--pentagonWidth);height:var(--pentagonHeight);background-color:var(--pentagonBgColor);clip-path:polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%)}.lido-heptagon{width:var(--heptagonWidth);height:var(--heptagonHeight);background-color:var(--heptagonBgColor);clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)}.lido-octagon{width:var(--octagonWidth);height:var(--octagonHeight);background-color:var(--octagonBgColor);clip-path:polygon(25% 0%, 75% 0%, 100% 25%, 100% 75%, 75% 100%, 25% 100%, 0% 75%, 0% 25%)}.lido-rhombus{width:var(--rhombusWidth);height:var(--rhombusHeight);background-color:var(--rhombusBgColor);clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)}.lido-heart{height:var(--heartHeight);width:var(--heartWidth);border-image:radial-gradient(var(--heartBgColor) 69%, #0000 70%) 84.5%/50%;clip-path:polygon(-41% 0, 50% 91%, 141% 0)}";
+const LidoShapeStyle0 = lidoShapeCss;
 
-const AppShape = class {
+const LidoShape = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.id = undefined;
@@ -617,7 +615,6 @@ const AppShape = class {
         this.onTouch = undefined;
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
-        this.onMatch = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -638,16 +635,16 @@ const AppShape = class {
             zIndex: this.z,
             backgroundColor: this.shapeType !== 'polygon' ? this.bgColor : 'transparent', // Apply background only if not a polygon
         };
-        return (index.h(index.Host, { key: '895f28cbf17ef12295a38ec7d18373f98761b9f1', class: `shape ${this.shapeType}`, value: this.value, type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }));
+        return (index.h(index.Host, { key: 'b82bed547952d36b52d9f94f609aed1f7e7ab4cf', class: `lido-shape ${this.shapeType}`, value: this.value, type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }));
     }
     get el() { return index.getElement(this); }
 };
-AppShape.style = AppShapeStyle0;
+LidoShape.style = LidoShapeStyle0;
 
-const appTextCss = ".text{background-color:#fff;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transition:background-color 0.3s ease;user-select:none;align-items:center;justify-content:center;text-align:center;border-radius:8px;color:#333;cursor:pointer}.text:hover{background-color:#f0f0f0}";
-const AppTextStyle0 = appTextCss;
+const lidoTextCss = ".lido-text{background-color:#fff;box-shadow:0 2px 4px rgba(0, 0, 0, 0.1);transition:background-color 0.3s ease;user-select:none;align-items:center;justify-content:center;text-align:center;border-radius:8px;color:#333;cursor:pointer}.lido-text:hover{background-color:#f0f0f0}";
+const LidoTextStyle0 = lidoTextCss;
 
-const AppText = class {
+const LidoText = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.id = undefined;
@@ -672,8 +669,8 @@ const AppText = class {
         this.onTouch = undefined;
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
-        this.onMatch = undefined;
         this.onEntry = undefined;
+        this.isAllowOnlyOneDrop = undefined;
     }
     /**
      * Lifecycle hook that runs after the component is rendered in the DOM.
@@ -696,16 +693,16 @@ const AppText = class {
             color: this.fontColor,
             display: this.visible ? 'flex' : 'none', // Show or hide based on visibility prop
         };
-        return (index.h(index.Host, { key: 'e1f55600afa34e7bf93f8c89b22de9b6868953d6', class: "text", value: this.value, type: this.type, tabindex: this.tabIndex, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, id: this.id, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden }, this.string));
+        return (index.h(index.Host, { key: '7de48018c45e8befbd8eae155c0cd7b928e4e726', class: "lido-text", value: this.value, type: this.type, tabindex: this.tabIndex, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, id: this.id, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, isAllowOnlyOneDrop: this.isAllowOnlyOneDrop }, this.string));
     }
     get el() { return index.getElement(this); }
 };
-AppText.style = AppTextStyle0;
+LidoText.style = LidoTextStyle0;
 
-const appTraceCss = ":host{display:block;position:relative}#svgContainer{position:absolute;top:0;left:0;right:0;bottom:50px;display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;max-height:calc(100vh - 50px);touch-action:none}#draggableCircle{cursor:pointer;fill:red;transition:fill 0.2s, r 0.2s}.blindTracing{stroke:none !important}.blindFreeTrace{stroke:none !important}.hovered{cursor:grab;fill:darkred}#controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.trace-path-green{stroke:green !important}";
-const AppTraceStyle0 = appTraceCss;
+const lidoTraceCss = ":host{display:block;position:relative}#lido-svgContainer{position:absolute;top:0;left:0;right:0;bottom:50px;display:flex;justify-content:center;align-items:center;overflow:hidden}svg{width:100%;height:100%;max-height:calc(100vh - 50px);touch-action:none}#lido-draggableCircle{cursor:pointer;fill:red;transition:fill 0.2s, r 0.2s}.lido-blindTracing{stroke:none !important}.lido-blindFreeTrace{stroke:none !important}.lido-hovered{cursor:grab;fill:darkred}#lido-controls{position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:10px;background-color:#f0f0f0;border-top:1px solid #ccc}button{padding:10px;font-size:16px}@media (max-width: 600px){button{padding:8px;font-size:14px}}.lido-trace-path-green{stroke:green !important}";
+const LidoTraceStyle0 = lidoTraceCss;
 
-const AppTrace = class {
+const LidoTrace = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.id = undefined;
@@ -826,7 +823,7 @@ const AppTrace = class {
             arrowMarker.setAttribute('points', '-5,-5 0,0 -5,5');
             arrowMarker.setAttribute('fill', 'blue');
             arrowMarker.setAttribute('transform', `translate(${point.x},${point.y}) rotate(${(angle * 180) / Math.PI})`);
-            arrowMarker.setAttribute('class', 'flow-indicator');
+            arrowMarker.setAttribute('class', 'lido-flow-indicator');
             markers.push(arrowMarker);
             (_a = path.parentNode) === null || _a === void 0 ? void 0 : _a.appendChild(arrowMarker); // Append to the same SVG container
         }
@@ -834,7 +831,7 @@ const AppTrace = class {
     }
     // Show or hide flow indicators based on mode
     updateFlowIndicators(state) {
-        const indicators = state.svg.querySelectorAll('.flow-indicator');
+        const indicators = state.svg.querySelectorAll('.lido-flow-indicator');
         indicators.forEach(indicator => {
             if (state.mode === utils.TraceMode.NoFlow) {
                 indicator.style.display = 'none';
@@ -855,8 +852,8 @@ const AppTrace = class {
             greenPath.setAttribute('stroke-dasharray', pathLength.toString());
             greenPath.setAttribute('stroke-dashoffset', pathLength.toString()); // Hidden initially
             path.parentNode.appendChild(greenPath, path);
-            path.setAttribute('class', 'trace-path'); // Add class for easier reference
-            greenPath.setAttribute('class', 'trace-path-green'); // Add class for easier reference
+            path.setAttribute('class', 'lido-trace-path'); // Add class for easier reference
+            greenPath.setAttribute('class', 'lido-trace-path-green'); // Add class for easier reference
             path.greenPath = greenPath;
             path.classList.add(state.mode);
             // Conditionally hide or show the black path based on blind tracing mode
@@ -884,7 +881,7 @@ const AppTrace = class {
         var _a;
         const firstPathStart = state.paths[0].getPointAtLength(0);
         const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
-        circle.setAttribute('id', 'draggableCircle');
+        circle.setAttribute('id', 'lido-draggableCircle');
         circle.setAttribute('cx', firstPathStart.x.toString());
         circle.setAttribute('cy', firstPathStart.y.toString());
         circle.setAttribute('r', '20'); // Radius of the draggable circle
@@ -1135,7 +1132,7 @@ const AppTrace = class {
             (_a = state.svg) === null || _a === void 0 ? void 0 : _a.removeChild(state.circle);
             state.circle = null;
         }
-        const indicators = (_b = state.svg) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.flow-indicator');
+        const indicators = (_b = state.svg) === null || _b === void 0 ? void 0 : _b.querySelectorAll('.lido-flow-indicator');
         indicators.forEach(indicator => {
             indicator.remove(); // Remove all previous flow indicators
         });
@@ -1150,7 +1147,7 @@ const AppTrace = class {
         state.currentPathIndex++;
         state.lastLength = 0;
         if (state.currentPathIndex >= state.paths.length) {
-            //   this.loadAnotherSVG(state, true);
+            //  this.loadAnotherSVG(state, true);
             utils.triggerNextContainer();
             return;
         }
@@ -1178,16 +1175,16 @@ const AppTrace = class {
         };
         // List of SVG file names to process sequentially
         // const svgFiles = ['A_test.svg', 'B_test.svg', 'C_test.svg', 'D_test.svg', 'अ_test.svg', 'ट_test.svg', 'क_test.svg', 'ख_test.svg', 'ग_test.svg']; // Add more SVG file names as needed
-        return (index.h(index.Host, { key: 'c957926b2f3e281966de8d1dca6580931af54019', class: "trace", id: this.id, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, index.h("div", { key: 'f841bf92fec27ed26594c5ccca937fa20210451f', id: "svgContainer" })));
+        return (index.h(index.Host, { key: '6d09f6c412d9fe6d8fe27512778cf3c043125e31', class: "lido-trace", id: this.id, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, tabindex: this.tabIndex }, index.h("div", { key: '412fce32d5c2416168ed1f124a56e4b2f64d559d', id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg"]; }
 };
-AppTrace.style = AppTraceStyle0;
+LidoTrace.style = LidoTraceStyle0;
 
-const appWrapCss = ".wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.wrap>*{padding:10px;background-color:var(--child-bg-color, #f0f0f0);box-sizing:border-box}";
-const AppWrapStyle0 = appWrapCss;
+const lidoWrapCss = ".lido-wrap{display:grid;grid-gap:10px;grid-template-columns:repeat(auto-fill, minmax(186px, auto))}.lido-wrap>*{padding:10px;background-color:var(--child-bg-color, #f0f0f0);box-sizing:border-box}";
+const LidoWrapStyle0 = lidoWrapCss;
 
-const AppWrap = class {
+const LidoWrap = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.id = undefined;
@@ -1207,7 +1204,6 @@ const AppWrap = class {
         this.onTouch = undefined;
         this.onInCorrect = undefined;
         this.onCorrect = undefined;
-        this.onMatch = undefined;
         this.onEntry = undefined;
     }
     /**
@@ -1228,23 +1224,23 @@ const AppWrap = class {
             zIndex: this.z,
             backgroundColor: this.bgColor,
         };
-        return (index.h(index.Host, { key: 'e3a8cad8af5c14362bd1db98c191ca8738058fd2', class: "wrap", value: this.value, type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onMatch: this.onMatch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '96869c0417ecf29ec6fc9f7bdbbf1b611e302687' })));
+        return (index.h(index.Host, { key: '1fecaadd7e815f461f8d24b1a507c2fe017c9a50', class: "lido-wrap", value: this.value, type: this.type, tabindex: this.tabIndex, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry }, index.h("slot", { key: '14a0fbd1bf8a645421d3c0711cc8839aa9e96b67' })));
     }
     get el() { return index.getElement(this); }
 };
-AppWrap.style = AppWrapStyle0;
+LidoWrap.style = LidoWrapStyle0;
 
-exports.app_col = AppCol;
-exports.app_container = AppContainer;
-exports.app_home = AppHome;
-exports.app_image = AppImage;
-exports.app_pos = AppPos;
-exports.app_random = AppRandom;
-exports.app_root = AppRoot;
-exports.app_row = AppRow;
-exports.app_shape = AppShape;
-exports.app_text = AppText;
-exports.app_trace = AppTrace;
-exports.app_wrap = AppWrap;
+exports.lido_col = LidoCol;
+exports.lido_container = LidoContainer;
+exports.lido_home = LidoHome;
+exports.lido_image = LidoImage;
+exports.lido_pos = LidoPos;
+exports.lido_random = LidoRandom;
+exports.lido_root = LidoRoot;
+exports.lido_row = LidoRow;
+exports.lido_shape = LidoShape;
+exports.lido_text = LidoText;
+exports.lido_trace = LidoTrace;
+exports.lido_wrap = LidoWrap;
 
-//# sourceMappingURL=app-col_12.cjs.entry.js.map
+//# sourceMappingURL=lido-col_12.cjs.entry.js.map