lido-player 0.0.2-alpha-30 → 0.0.2-alpha-32

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-faffb5aa.js');
+const utils = require('./utils-90a0261a.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-faffb5aa.js');
+const utils = require('./utils-90a0261a.js');
 
 var rive = {exports: {}};
 
@@ -7116,6 +7116,7 @@ const LidoHome = class {
             if (index != undefined && index < this.containers.length) {
                 // Move to the next container
                 this.currentContainerIndex = index;
+                console.log("container index ; ", this.currentContainerIndex);
                 // window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
                 utils.dispatchActivityChangeEvent(this.currentContainerIndex);
             }
@@ -7128,6 +7129,7 @@ const LidoHome = class {
             else if (this.currentContainerIndex >= this.containers.length - 1) {
                 // const event = new CustomEvent('gameCompleted');
                 // window.dispatchEvent(event);
+                localStorage.removeItem(utils.ActivityScoreKey);
                 utils.dispatchGameCompletedEvent();
                 this.currentContainerIndex = null;
             }
@@ -7180,6 +7182,8 @@ const LidoHome = class {
             if (alertElement) {
                 if (comment === 'exit') {
                     utils.dispatchGameExitEvent();
+                    utils.AudioPlayer.getI().stop();
+                    localStorage.removeItem(utils.ActivityScoreKey);
                     utils.clearLocalStorage();
                     alertElement.remove();
                 }
@@ -7214,6 +7218,10 @@ const LidoHome = class {
             next: this.nextButtonUrl || utils.nextUrl,
             speak: this.speakerButtonUrl || utils.speakUrl,
         };
+        if (this.currentContainerIndex === 0) {
+            localStorage.removeItem(utils.ActivityScoreKey);
+            utils.clearLocalStorage();
+        }
         // Listen for 'NextContainerKey' event to transition between containers
         window.addEventListener(utils.NextContainerKey, () => {
             this.NextContainerKey();
@@ -7228,6 +7236,8 @@ const LidoHome = class {
         this.parseXMLData(this.xmlData);
         // Remove stored values in localStorage when the page is about to be unloaded
         window.addEventListener('beforeunload', () => {
+            utils.AudioPlayer.getI().stop();
+            localStorage.removeItem(utils.ActivityScoreKey);
             utils.clearLocalStorage();
         });
     }
@@ -10989,7 +10999,7 @@ const LidoSlideFill = class {
 };
 LidoSlideFill.style = LidoSlideFillStyle0;
 
-const lidoTextCss = ".lido-text{transition:background-color 0.3s ease;user-select:none;align-items:center;justify-content:center;text-align:center;border-radius:24px;color:#333;cursor:pointer;font-family:'Baloo Bhai 2', serif}.lido-text:hover{background-color:#f0f0f0}.text-letters{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-letters.letter-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-letter-bounce 0.4s}.text-words{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-words.word-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-word-bounce 0.4s}@keyframes text-letter-bounce{0%{transform:scale(1)}60%{transform:scale(1.4)}100%{transform:scale(1)}}@keyframes text-word-bounce{0%{transform:scale(1)}60%{transform:scale(1.3)}100%{transform:scale(1)}}";
+const lidoTextCss = ".lido-text{transition:background-color 0.3s ease;user-select:none;align-items:center;justify-content:center;text-align:center;border-radius:24px;color:#333;cursor:pointer;font-family:'Baloo Bhai 2', serif}.text-letters{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-letters.letter-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-letter-bounce 0.4s}.text-words{transition:color 0.3s, text-shadow 0.3s;display:inline-block;padding:0 2px}.text-words.word-highlight{color:#8e24aa;background:none;border-radius:0;text-shadow:0 2px 8px #8e24aa88;animation:text-word-bounce 0.4s}@keyframes text-letter-bounce{0%{transform:scale(1)}60%{transform:scale(1.4)}100%{transform:scale(1)}}@keyframes text-word-bounce{0%{transform:scale(1)}60%{transform:scale(1.3)}100%{transform:scale(1)}}";
 const LidoTextStyle0 = lidoTextCss;
 
 const LidoText = class {
@@ -11114,7 +11124,7 @@ const LidoText = class {
 };
 LidoText.style = LidoTextStyle0;
 
-const lidoTraceCss = ":host{display:block;position:relative}#lido-svgContainer{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:#81C127;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{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}";
+const lidoTraceCss = ":host{display:block;position:relative}#lido-svgContainer{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:#CF1565;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{}.lido-flow-indicator{stroke:blue;stroke-width:2;stroke-dasharray:6, 6;fill:none}.lido-trace{height:700px;width:700px;z-index:1;justify-items:center;align-content:center}.trace-animate{animation:trace-bounce 0.5s}@keyframes trace-bounce{0%{transform:scale(1)}30%{transform:scale(1.05)}60%{transform:scale(0.95)}100%{transform:scale(1)}}";
 const LidoTraceStyle0 = lidoTraceCss;
 
 const LidoTrace = class {
@@ -11441,7 +11451,7 @@ const LidoTrace = class {
         circle.setAttribute('cx', firstPathStart.x.toString());
         circle.setAttribute('cy', firstPathStart.y.toString());
         circle.setAttribute('r', `calc(${strokeWidth || 10} / 3)`); // Radius of the draggable circle
-        circle.setAttribute('fill', '#81C127');
+        circle.setAttribute('fill', '#CF1565'); // fill the color for the circle 
         (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(circle);
         state.circle = circle;
         this.resetIdleTimer(state); // ← start idle timer once the SVG is ready
@@ -11800,11 +11810,11 @@ const LidoTrace = class {
             top: utils.parseProp(this.y, orientation),
             left: utils.parseProp(this.x, orientation),
             zIndex: this.z,
-            position: 'absolute',
+            // position: 'absolute',
         };
     }
     render() {
-        return (index.h(index.Host, { key: '7c8ab62563bab140ef74bb305b03fb44236cf18e', 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: '5ee3c13207fb1e0ffecc19c07b90dddd271b2ace', style: this.style, id: "lido-svgContainer" })));
+        return (index.h(index.Host, { key: 'b3e4e80fb1fa3d1e83ff30aa6258c83c379cb9d4', 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: 'a0c74bd35eba5de7afa4c4d600cc031e169a01d3', style: this.style, id: "lido-svgContainer" })));
     }
     static get assetsDirs() { return ["svg", "images"]; }
     get el() { return index.getElement(this); }

package/dist/cjs/{utils-faffb5aa.js → utils-90a0261a.js}

@@ -674,11 +674,13 @@ async function onElementDropComplete(dragElement, dropElement) {
                     const div = document.createElement('div');
                     container.append(div);
                     div.classList.add('after-drop-popup-container');
-                    const hasType = dragElement.nextElementSibling;
                     dragElement.style.scale = `1`;
                     dropElement.style.scale = `1`;
+                    const allDragElements = container.querySelectorAll('[type="drag"]');
+                    const dragParents = Array.from(allDragElements).map(el => el.parentElement);
+                    const allSameParent = dragParents.every(parent => parent === dragElement.parentElement);
                     // Remove from old parents
-                    if (hasType && hasType.getAttribute('type') === 'drag') {
+                    if (allSameParent) {
                         dragElement.remove();
                         dropElement.remove();
                     }
@@ -705,15 +707,6 @@ async function onElementDropComplete(dragElement, dropElement) {
             }
         }
     }
-    if (dragElement) {
-        if (dropElement) {
-            dragElement.setAttribute(DropToAttr, dropElement === null || dropElement === void 0 ? void 0 : dropElement.id);
-        }
-        else {
-            dragElement.removeAttribute(DropToAttr);
-        }
-        dragElement.setAttribute(DropTimeAttr, new Date().getTime().toString());
-    }
     if (dropElement) {
         if (dropElement.getAttribute('drop-attr') === 'stretch') {
             if (!dropElement.hasAttribute('data-original-width')) {
@@ -736,12 +729,26 @@ async function onElementDropComplete(dragElement, dropElement) {
                 let dragSelected = JSON.parse(dragSelectedData);
                 for (const key in dragSelected) {
                     if (dragSelected[key].includes(dragElement['value']) && dragElement.classList.contains('dropped')) {
-                        delete dragSelected[key];
+                        const preDropId = dragElement.getAttribute('drop-to');
+                        const preDrop = container.querySelector(`#${preDropId}`);
+                        const preDropIndex = preDrop.getAttribute('tab-index');
+                        if (preDropIndex) {
+                            delete dragSelected[preDropIndex];
+                        }
                     }
                 }
                 localStorage.setItem(DragSelectedMapKey, JSON.stringify(dragSelected));
             }
             dragElement.classList.add('dropped');
+            if (dragElement) {
+                if (dropElement) {
+                    dragElement.setAttribute(DropToAttr, dropElement === null || dropElement === void 0 ? void 0 : dropElement.id);
+                }
+                else {
+                    dragElement.removeAttribute(DropToAttr);
+                }
+                dragElement.setAttribute(DropTimeAttr, new Date().getTime().toString());
+            }
             // Check for overlaps and highlight only the most overlapping element
             if (dropElement && !((_c = dropHasDrag[dropTabIndex]) === null || _c === void 0 ? void 0 : _c.isFull)) {
                 let mostOverlappedElement = findMostoverlappedElement$1(dragElement, 'drag');
@@ -2954,16 +2961,23 @@ function onTouchListenerForOnTouch(element) {
         setDraggingDisabled(false);
     };
     const onPointerDown = (event) => {
-        event.stopPropagation(); // Prevent bubbling to other elements
+        event.stopPropagation();
         onholdTriggered = false;
-        onholdTimer = setTimeout(playAudio, onholdTime);
+        onholdTimer = setTimeout(() => {
+            playAudio();
+        }, onholdTime);
     };
     const onPointerUp = async (event) => {
-        event.stopPropagation();
         clearTimeout(onholdTimer);
         if (!onholdTriggered && onTouch) {
             await executeActions(onTouch, element);
         }
+        else if (!onTouch) {
+            if (['category', 'option'].includes(element.getAttribute('type') || '')) {
+                element.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true }));
+            }
+        }
+        setDraggingDisabled(false);
     };
     const onPointerLeave = () => {
         clearTimeout(onholdTimer);
@@ -67829,6 +67843,7 @@ function handleFloatElementPosition(element) {
         console.error(`No container found with id: lido-container`);
         return;
     }
+    stopHighlightForSpeakingElement(element);
     const floatContainer = container.querySelector('.lido-float');
     if (!floatContainer)
         return;
@@ -68669,7 +68684,6 @@ const attachSpeakIcon = async (element) => {
     element.appendChild(speakIconElement);
 };
 const clearLocalStorage = () => {
-    AudioPlayer.getI().stop();
     localStorage.removeItem(DragSelectedMapKey);
     localStorage.removeItem(DragMapKey);
     localStorage.removeItem(SelectedValuesKey);
@@ -68755,6 +68769,7 @@ function getCancelBtnPopup() {
     return cancelBtnPopupState;
 }
 
+exports.ActivityScoreKey = ActivityScoreKey;
 exports.AudioPlayer = AudioPlayer;
 exports.LidoContainer = LidoContainer;
 exports.NextContainerKey = NextContainerKey;

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

@@ -1,5 +1,5 @@
 import { h, Host } from "@stencil/core";
-import { NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, } from "../../utils/constants";
+import { NextContainerKey, PrevContainerKey, LidoContainer, exitUrl, prevUrl, nextUrl, speakUrl, ActivityScoreKey, } from "../../utils/constants";
 import { dispatchActivityChangeEvent, dispatchGameCompletedEvent, dispatchGameExitEvent } from "../../utils/customEvents";
 import { clearLocalStorage, calculateScale, getCancelBtnPopup, setCancelBtnPopup, executeActions, triggerPrevcontainer } from "../../utils/utils";
 import { AudioPlayer } from "../../utils/audioPlayer";
@@ -25,6 +25,7 @@ export class LidoHome {
             if (index != undefined && index < this.containers.length) {
                 // Move to the next container
                 this.currentContainerIndex = index;
+                console.log("container index ; ", this.currentContainerIndex);
                 // window.dispatchEvent(new CustomEvent('activityChange', { detail: { index: this.currentContainerIndex } }));
                 dispatchActivityChangeEvent(this.currentContainerIndex);
             }
@@ -37,6 +38,7 @@ export class LidoHome {
             else if (this.currentContainerIndex >= this.containers.length - 1) {
                 // const event = new CustomEvent('gameCompleted');
                 // window.dispatchEvent(event);
+                localStorage.removeItem(ActivityScoreKey);
                 dispatchGameCompletedEvent();
                 this.currentContainerIndex = null;
             }
@@ -89,6 +91,8 @@ export class LidoHome {
             if (alertElement) {
                 if (comment === 'exit') {
                     dispatchGameExitEvent();
+                    AudioPlayer.getI().stop();
+                    localStorage.removeItem(ActivityScoreKey);
                     clearLocalStorage();
                     alertElement.remove();
                 }
@@ -123,6 +127,10 @@ export class LidoHome {
             next: this.nextButtonUrl || nextUrl,
             speak: this.speakerButtonUrl || speakUrl,
         };
+        if (this.currentContainerIndex === 0) {
+            localStorage.removeItem(ActivityScoreKey);
+            clearLocalStorage();
+        }
         // Listen for 'NextContainerKey' event to transition between containers
         window.addEventListener(NextContainerKey, () => {
             this.NextContainerKey();
@@ -137,6 +145,8 @@ export class LidoHome {
         this.parseXMLData(this.xmlData);
         // Remove stored values in localStorage when the page is about to be unloaded
         window.addEventListener('beforeunload', () => {
+            AudioPlayer.getI().stop();
+            localStorage.removeItem(ActivityScoreKey);
             clearLocalStorage();
         });
     }

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

@@ -12,10 +12,6 @@
   font-family: 'Baloo Bhai 2', serif;
 }
 
-.lido-text:hover {
-  background-color: #f0f0f0;
-}
-
 .text-letters {
   transition: color 0.3s, text-shadow 0.3s;
   display: inline-block;

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

@@ -25,7 +25,7 @@ svg {
 
 #lido-draggableCircle {
   cursor: pointer;
-  fill: #81C127;
+  fill: #CF1565;
   transition: fill 0.2s, r 0.2s;
 }
 

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

@@ -325,7 +325,7 @@ export class LidoTrace {
         circle.setAttribute('cx', firstPathStart.x.toString());
         circle.setAttribute('cy', firstPathStart.y.toString());
         circle.setAttribute('r', `calc(${strokeWidth || 10} / 3)`); // Radius of the draggable circle
-        circle.setAttribute('fill', '#81C127');
+        circle.setAttribute('fill', '#CF1565'); // fill the color for the circle 
         (_a = state.svg) === null || _a === void 0 ? void 0 : _a.appendChild(circle);
         state.circle = circle;
         this.resetIdleTimer(state); // ← start idle timer once the SVG is ready
@@ -684,11 +684,11 @@ export class LidoTrace {
             top: parseProp(this.y, orientation),
             left: parseProp(this.x, orientation),
             zIndex: this.z,
-            position: 'absolute',
+            // position: 'absolute',
         };
     }
     render() {
-        return (h(Host, { key: '7c8ab62563bab140ef74bb305b03fb44236cf18e', 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: '5ee3c13207fb1e0ffecc19c07b90dddd271b2ace', style: this.style, id: "lido-svgContainer" })));
+        return (h(Host, { key: 'b3e4e80fb1fa3d1e83ff30aa6258c83c379cb9d4', 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: 'a0c74bd35eba5de7afa4c4d600cc031e169a01d3', style: this.style, id: "lido-svgContainer" })));
     }
     static get is() { return "lido-trace"; }
     static get originalStyleUrls() {

package/dist/collection/stories/Templates/categorize2/categorize2.stories.js

@@ -126,34 +126,34 @@ function getContainerXml(args) {
 			<lido-cell layout="landscape.row,portrait.wrap" z="0" visible="true" type="optionArea"  height="landscape.32%,portrait.38%" width="landscape.99%,portrait.98%" bg-Color="#FEEDE6"  margin="landscape.-33px 0px 32px 0px, portrait.23px 0px 18px 0px" onEntry=" this.border='1px solid #FAB89C';this.overflow=' hidden'; this.gap='25px'; this.align-items='center'; this.justify-content='center';this.border-radius='6px';">
 
 				${args.image1.length === 0 && args.option1.length === 0 ? '' : `<lido-cell layout="col"   audio="${args.option1Audio}" x="29px" y="-221px"  z="1" onTouch=""  visible="true" type="option"  tab-index="6" id="i1"  value="${args.option1}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0'; this.box-sizing='unset'; this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image1.length === 0 ? '' : `<lido-image visible="true"    height="145px" width="145px" bgColor="transparent"  src="${args.image1}" onEntry="this.flex=' 0 0 auto'; this.boxShadow='unset';this.transition = 'transform 0.5s ease';" ></lido-image>`}
+					${args.image1.length === 0 ? '' : `<lido-image visible="true"    height="145px" width="145px" bgColor="transparent"  src="${args.image1}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto'; this.boxShadow='unset';this.transition = 'transform 0.5s ease';" ></lido-image>`}
 					
-					${args.option1.length === 0 ? '' : `<lido-text visible="true"  height="31px" width="145px" string="${args.option1}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}				
+					${args.option1.length === 0 ? '' : `<lido-text visible="true"  height="31px" width="145px" string="${args.option1}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}				
 				</lido-cell>`}
 				${args.image2.length === 0 && args.option2.length === 0 ? '' : `<lido-cell layout="col" onTouch=""   audio="${args.option2Audio}" x="29px" y="-221px"  visible="true" type="option"   tab-index="7" id="i2"  value="${args.option2}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image2.length === 0 ? '' : ` <lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image2}" onEntry="this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"></lido-image>`}
-					${args.option2.length === 0 ? '' : ` <lido-text visible="true"  height="31px" width="145px" string="${args.option2}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
+					${args.image2.length === 0 ? '' : ` <lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image2}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"></lido-image>`}
+					${args.option2.length === 0 ? '' : ` <lido-text visible="true"  height="31px" width="145px" string="${args.option2}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
 				</lido-cell>`}
 
 
 				${args.image3.length === 0 && args.option3.length === 0 ? '' : `<lido-cell layout="col"  onTouch=""  audio="${args.option3Audio}" x="29px" y="-221px"  visible="true" type="option"  tab-index="8" id="i3"  value="${args.option3}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image3.length === 0 ? '' : `<lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image3}" onEntry="this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';" z="5"></lido-image>`}
-					${args.option3.length === 0 ? '' : `<lido-text visible="true"  height="31px" width="145px" string="${args.option3}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
+					${args.image3.length === 0 ? '' : `<lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image3}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';" z="5"></lido-image>`}
+					${args.option3.length === 0 ? '' : `<lido-text visible="true"  height="31px" width="145px" string="${args.option3}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
 				</lido-cell>`}
 
 				${args.image4.length === 0 && args.option4.length === 0 ? '' : `<lido-cell layout="col" onTouch=""  audio="${args.option4Audio}" x="29px" y="-221px"  visible="true" type="option"  tab-index="9" id="i4"  value="${args.option4}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image4.length === 0 ? '' : `<lido-image visible="true"  height="145px" width="145px" bgColor="transparent"  src="${args.image4}" onEntry="this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
-					${args.option4.length === 0 ? '' : `<lido-text visible="true" onTouch=""   height="31px" width="145px" string="${args.option4}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
+					${args.image4.length === 0 ? '' : `<lido-image visible="true"  height="145px" width="145px" bgColor="transparent"  src="${args.image4}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
+					${args.option4.length === 0 ? '' : `<lido-text visible="true" onTouch=""   height="31px" width="145px" string="${args.option4}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
 				</lido-cell>`}
 
 				${args.image5.length === 0 && args.option5.length === 0 ? '' : `<lido-cell layout="col" onTouch=""  audio="${args.option5Audio}" x="29px" y="-221px" visible="true" type="option"  tab-index="10" id="i5"  value="${args.option5}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image5.length === 0 ? '' : `<lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image5}" onEntry="this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
-					${args.option5.length === 0 ? '' : `<lido-text visible="true" onTouch=""   height="31px" width="145px" string="${args.option5}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>1`}
+					${args.image5.length === 0 ? '' : `<lido-image visible="true"   height="145px" width="145px" bgColor="transparent"  src="${args.image5}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
+					${args.option5.length === 0 ? '' : `<lido-text visible="true" onTouch=""   height="31px" width="145px" string="${args.option5}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>1`}
 				</lido-cell>`}
 
 				${args.image6.length === 0 && args.option6.length === 0 ? '' : `<lido-cell layout="col" onTouch=""  audio="${args.option6Audio}" x="29px" y="-221px"  visible="true" type="option"  tab-index="11" id="i6"  value="${args.option6}" height="217px" width="149px" bg-Color="white" onEntry="this.padding='0px';this.flex-shrink='0';this.box-sizing='unset';this.align-items='center';this.justify-content='center';this.border-radius='6px';this. box-shadow=' 0px 8px 0px -2px rgba(0, 0, 0, 0.1)'">
-					${args.image6.length === 0 ? '' : `<lido-image visible="true"  height="145px" width="145px" bgColor="transparent"  src="${args.image6}" onEntry="this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
-					${args.option6.length === 0 ? '' : `<lido-text visible="true" onTouch=""  height="31px" width="145px" string="${args.option6}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
+					${args.image6.length === 0 ? '' : `<lido-image visible="true"  height="145px" width="145px" bgColor="transparent"  src="${args.image6}" onEntry="this.pointer-events=' none';this.flex=' 0 0 auto';this.boxShadow='unset';this.transition = 'transform 0.5s ease';"  z="5"></lido-image>`}
+					${args.option6.length === 0 ? '' : `<lido-text visible="true" onTouch=""  height="31px" width="145px" string="${args.option6}" font-family="'Baloo Bhai 2'" font-size="32px" margin="0px 0px 0px 0px" onEntry="this.pointer-events=' none';this.border-radius='0px'; this.fontWeight='500';" bg-Color="white"></lido-text>`}
 				</lido-cell>`}
 
 			</lido-cell>