lido-player 0.0.2-alpha-49 → 0.0.2-alpha-43-dev

package/dist/collection/stories/Templates/checker-block/checkerBlock.stories.js

@@ -0,0 +1,156 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/CheckerBlock',
+    argTypes: {
+        shapeNumber: { control: 'number' },
+    },
+};
+export default meta;
+export const Blocks = {
+    args: {
+        shapeNumber: 1
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const shape = generateSlots(args.shapeNumber);
+    let tabIndex = 1;
+    let objective = [];
+    // Generate <lido-math-matrix> elements for each slot
+    const dropMatrices = Object.entries(shape)
+        .map(([key, { width, height }], index) => {
+        objective.push(`slot${index + 1}`);
+        return `
+        <lido-math-matrix id="drop-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="#967ca6" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drop" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white"></lido-math-matrix>
+        `;
+    })
+        .join("\n");
+    const dragMatrices = Object.entries(shape)
+        .map(([key, { width, height }], index) => {
+        const colors = ['#a657fa', '#fa7f98', '#dee60e', '#71f24e', '#55d9a4'];
+        const randomColor = colors[Math.floor(Math.random() * colors.length)];
+        return `
+        <lido-math-matrix id="drag-${index + 1}" visible="true" width="1600px" height="900px" rows="${width}" cols="${height}" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" activeBgColor="${randomColor}" defualtFill="${width * height}" tab-index="${tabIndex++}" type="drag" value="slot${index + 1}" clickable="false" border="2px solid black" font-color="white"></lido-math-matrix>`;
+    })
+        .join("\n");
+    return `<main>
+    <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="${objective}" onCorrect="this.sleep='200'; all.animation='placeToLeft 1.5s linear'; this.sleep='1500';" is-continue-on-correct="true" is-allow-only-correct="true" bg-color="transparent" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/create%20sentence/Spring.png">
+
+	<lido-cell visible="true" id="all" layout="row" height="900px" width="1600px" onEntry="this.justifyContent='unset';">
+    <lido-cell visible="true" layout="col" width="30%" height="90%" bg-color="transparent" z="2">
+			<lido-cell visible="true" layout="random" width="100%" height="100%" bg-color="transparent" x="50px">
+				${dragMatrices}
+			</lido-cell>
+		</lido-cell>
+		<lido-cell id="truck" visible="true" layout="pos" x="0" y="0" z="1" onEntry="this.animation='rightToPlace 1.5s linear';">
+			<lido-image visible="true" width="1500px" height="900px" x="185px" y='20px' src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/CheckerBlock/checkerBlockTruck.svg"></lido-image>
+			<lido-math-matrix id="matrix" visible="true" width="1570px" height="860px" x="800px" y="23px" rows="10" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="false" defualtFill="100" text="1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100" border="2px solid #736e6cff" border-radius="0" active-bg-color="#d7d5d9" clickable="false" type="checkerBlock" font-color="#4f2e35"></lido-math-matrix>
+			${dropMatrices}
+			
+		</lido-cell>
+	</lido-cell>
+	
+</lido-container>
+  </main>`;
+}
+function generateSlots(level) {
+    switch (level) {
+        case 1:
+            return generateRandomSquare();
+        case 2:
+            return generateHorizontalStrips();
+        case 3:
+            return generateVerticalStrips();
+        case 8:
+            return generateHorizontalHalfStrips();
+        case 9:
+            return generate2by2Squares();
+        case 10:
+            return generateDoubleSquares();
+        case 11:
+            return generateSingleSquares();
+        default:
+            return generateRandomSquare();
+    }
+}
+function generateRandomSquare() {
+    const slots = {};
+    let generated = 0;
+    while (generated < 8) {
+        const type = Math.floor(Math.random() * 3);
+        const width = type === 0 ? 2 : 3;
+        const height = type === 0 ? 3 : (type === 1 ? 2 : 3);
+        generated++;
+        slots[`slot-${generated}`] = { width, height };
+    }
+    return slots;
+}
+function generateHorizontalStrips() {
+    const slots = {};
+    let generated = 0;
+    while (generated < 5) {
+        const width = 10;
+        const height = 1;
+        generated++;
+        slots[`slot-${generated}`] = { width, height };
+    }
+    return slots;
+}
+function generateHorizontalHalfStrips() {
+    const slots = {};
+    let generated = 0;
+    while (generated < 10) {
+        const width = 5;
+        const height = 1;
+        generated++;
+        slots[`slot-${generated}`] = { width, height };
+    }
+    return slots;
+}
+function generateVerticalStrips() {
+    const slots = {};
+    let generated = 0;
+    while (generated < 5) {
+        const width = 1;
+        const height = 10;
+        generated++;
+        slots[`slot-${generated}`] = { width, height };
+    }
+    return slots;
+}
+function generate2by2Squares() {
+    const slots = {};
+    let generated = 0;
+    while (generated < 10) {
+        const width = 2;
+        const height = 2;
+        generated++;
+        slots[`slot-${generated}`] = { width, height };
+    }
+    return slots;
+}
+function generateDoubleSquares() {
+    const slots = {};
+    let generated = 0;
+    while (generated < 10) {
+        const width = 2;
+        const height = 1;
+        generated++;
+        slots[`slot-${generated}`] = { width, height };
+    }
+    return slots;
+}
+function generateSingleSquares() {
+    const slots = {};
+    let generated = 0;
+    while (generated < 10) {
+        const width = 1;
+        const height = 1;
+        generated++;
+        slots[`slot-${generated}`] = { width, height };
+    }
+    return slots;
+}

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

@@ -0,0 +1,49 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/CheckerBlock',
+    argTypes: {
+        shapeNumber: { control: 'number' },
+    },
+};
+export default meta;
+export const CheckerBlock = {
+    args: {
+        shapeNumber: 1
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    const shape = generateSlots();
+    console.log("shape : ", shape);
+    return `<main>
+    <lido-container visible="true" show-next-button="true" dropAttr="math-matrix" objective="nammadha" onCorrect="this.sleep='120000';">
+	<lido-math-matrix id="matrix3" visible="true" rows="10" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="false" defualtFill="100" active-bg-color="#deb3f2" clickable="false" type="checkerBlock"></lido-math-matrix>
+
+	<lido-cell visible="true" layout="pos" x="0" y="0">
+		<lido-math-matrix id="matrix1" visible="true" width="1600px" height="900px" rows="1" cols="10" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" text="false" activeBgColor="#9a3dc5ff" defualtFill="10" tab-index="1" type="drop" value="nammadha" clickable="false"></lido-math-matrix>
+	</lido-cell>
+
+	<lido-cell visible="true" layout="pos" x="0" y="0">
+		<lido-math-matrix id="matrix4" visible="true" width="1600px" height="900px" rows="2" cols="3" top-index="false" left-index="false" bottom-index="false" active-only-visible="true" text="false" activeBgColor="#9a3dc5ff" defualtFill="9" tab-index="3" type="drag" value="nammadha" clickable="false"></lido-math-matrix>
+	</lido-cell>
+
+</lido-container>
+  </main>`;
+}
+function generateSlots() {
+    const gridSize = 10;
+    const slots = {};
+    let generated = 0;
+    const getCell = (row, col) => row * 10 + col + 1;
+    while (generated < 8) {
+        const type = Math.floor(Math.random() * 3);
+        const width = type === 0 ? 2 : 3;
+        const height = type === 0 ? 3 : (type === 1 ? 2 : 3);
+        generated++;
+        slots[`slot-${generated}`] = { width, height };
+        return slots;
+    }
+}

package/dist/collection/stories/Templates/fillAnswer/fill-answer.stories.js

@@ -0,0 +1,66 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/fillAnswer',
+    argTypes: {
+        firstNum: { control: 'text' },
+        operator: { control: 'text' },
+        secontNum: { control: 'text' },
+        equator: { control: 'text' },
+        answer: { control: 'text' },
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+    },
+};
+export default meta;
+export const OrderTractor = {
+    args: {
+        firstNum: '3', operator: '+', secontNum: '4', equator: '=', answer: '7',
+        option1: '5', option2: '7', option3: '3', option4: '2',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `
+    <main>
+	<lido-container id="lido-container" is-allow-only-correct="true"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/fill-in-the-blanks/cloud.png" objective="${args.answer}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';  " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false">
+		<!-- Chimple Avatar -->
+		<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1267px, portrait.541px" y="landscape.587px, portrait.1304px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="this.animation='rightToPlace 2.5s linear';">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+		</lido-cell>
+
+		<!--Parent cell  -->
+		<lido-cell layout="col" visible="true" width="100%" height="100%" bg-color="transparent">
+			<!-- heading -->
+			<lido-cell audio="" layout="row" visible="true" width="landscape.45%, portrait.69%" height="landscape.15%, portrait.auto" bg-color="white"  onEntry="this.borderRadius='10px'; this.padding='8px';this.animation='topToPlace 2.5s linear';" margin="landscape.110px 0px 0px 0px , portrait.400px 0px 0px 0px">
+			<lido-text id="question" visible="false" string="solve the problem and select the correct answer from below" value="solve the problem and select the correct answer from below" onEntry="this.sleep='2000';this.speak='true';"></lido-text>
+			
+					<lido-text tab-index="1" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.firstNum}" bg-color="transparent" onEntry="this.position='relative'; this.fontWeight='600';this.display='inline'; this.padding='0px 20px 0px 0px'; "></lido-text>
+					<lido-text tab-index="2" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.operator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
+					<lido-text tab-index="3" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.secontNum}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
+					<lido-text tab-index="4" font-family="'Baloo Bhai 2'" visible="true" font-size="88px" y="-10px" string="${args.equator}" bg-color="transparent" onEntry="this.position='relative';this.fontWeight='600';this.display='inline';this.boxShadow='0 0 0'; this.padding='0px 21px 0px 0px';"></lido-text>
+					<lido-text tab-index="5" id="drop1" disable-edit="true" visible="true" width="164px" height="landscape.73px,portrait.77px" value="${args.answer}"  type="drop" is-allow-only-one-drop="true" drop-Attr="stretch" onEntry="this.border-radius='10px';this.box-shoadow=''; this.margin-right='35px';" ></lido-text>
+					
+				
+			</lido-cell>
+			<lido-cell layout="row" childElementsLength="4" onEntry="this.gap='28px'; this.animation='rightToPlace 2.5s linear';   this.gridTemplateColumns = 'repeat(2, 1fr)';  this.gridTemplateRows = 'repeat(2, 1fr)';" visible="true" margin="landscape.6px 25px 74px 0px, portrait.-170px 128px 0px 117px">
+				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option1" value="${args.option1}" tab-index="14" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option1}" fontColor="black" font-size="88px"   type="drag">
+				</lido-text>
+				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option2" value="${args.option2}" tab-index="15" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option2}" fontColor="black" font-size="88px"  type="drag">
+				</lido-text>
+				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option3" value="${args.option3}" tab-index="16" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px'; this.fontWeight='600'; " width="auto" height="landscape.87px, portrait.91px" string="${args.option3}" fontColor="black" font-size="88px" type="drag">
+				</lido-text>
+				<lido-text  font-family="'Baloo Bhai 2'" audio="" id="option4" value="${args.option4}" tab-index="17" visible="true" bg-color="#fcf3b1" onEntry="this.padding='0px 48px'; this.borderRadius='24px';  this.fontWeight='600';" width="auto" height="landscape.87px, portrait.91px" string="${args.option4}" fontColor="black" font-size="88px"   type="drag">
+				</lido-text>
+			</lido-cell>
+			
+		</lido-cell>
+	</lido-container>
+    </main>
+  `;
+}

package/dist/collection/stories/Templates/foodJar/food-jar.stories.js

@@ -0,0 +1,65 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/foodJar',
+    argTypes: {
+        firstNum: { control: 'text' },
+        operator: { control: 'text' },
+        secondNum: { control: 'text' },
+        equator: { control: 'text' },
+        answer: { control: 'text' },
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+        option4: { control: 'text' },
+        option5: { control: 'text' },
+    },
+};
+export default meta;
+export const OrderTractor = {
+    args: {
+        firstNum: '10', operator: '+', secondNum: '5', equator: '=', answer: '15',
+        option1: '=', option2: '5', option3: '+', option4: '15', option5: '10',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `
+    <main>
+	<lido-container id="lido-container" is-allow-only-correct="true"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/Sky.png" objective="${[args.firstNum, args.operator, args.secondNum, args.equator, args.answer].join(',')}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';  " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false" custom-style="#drop1, #drop2, #drop3, #drop4, #drop5{border: none !important;boxShadow: none !important;}  ">
+	<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1px, portrait.20px" y="landscape.5px, portrait.100px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+	</lido-cell>
+
+	<!-- image math matrix -->
+		<lido-cell layout="row" visible="true" width="100%" height="landscape.40%,portrait.80%" bg-color="transparent" margin="landscape.100px 0px 0px 0px,portrait.500px 0px 0px 0px">
+			<lido-math-matrix id="mat1" rows="3" cols="4"  defualtFill="${args.firstNum}" leftIndex="false" topIndex="false" clickable="true" matrixImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png" activeBgColor="transparent" inactiveBgColor="transparent" border="none" height="100%" width="100%" visible="true"></lido-math-matrix>
+			<lido-math-matrix id="mat2" rows="3" cols="4" defualtFill="${args.secondNum}" leftIndex="false" topIndex="false" clickable="true" matrixImage="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/apple.png" activeBgColor="transparent" inactiveBgColor="transparent" border="none" height="100%" width="100%" visible="true"></lido-math-matrix>
+		</lido-cell>
+
+		<!-- drop elements -->
+		<lido-cell visible="true" id="answer" layout="row" height="landscape.30%,portrait.40%" width="landscape.80%,portrait.100%" bg-color="transparent" onEntry="this.alignItems='center';" margin="landscape.0,portrait.0px 0px 0px 0px">
+			<lido-image id="drop1"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.firstNum}" visible="true" tab-index="1" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"  onCorrect="lido-avatar.avatarAnimate='Success'"></lido-image>
+			<lido-image id="drop2"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.operator}" visible="true" tab-index="2" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"  onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
+			<lido-image id="drop3"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.secondNum}" visible="true" tab-index="3" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop" onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
+			<lido-image id="drop4"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.equator}" visible="true" tab-index="4" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"   onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
+			<lido-image id="drop5"  width="landscape.300px,portrait.200px" height="landscape.200px,portrait.200px" value="${args.answer}" visible="true" tab-index="5" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljargrey_equation.png" bg-Color="transparent" onEntry="" type="drop"   onCorrect="lido-avatar.avatarAnimate='Success'" ></lido-image>
+		</lido-cell>
+
+		<!-- drag elements -->
+		<lido-cell visible="true" id="answer" layout="row" height="landscape.30%,portrait.40%" width="landscape.80%,portrait.100%" bg-color="transparent" onEntry="this.alignItems='center';" >
+			<lido-text id="drg1"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option1}" value="${args.option1}" tab-index="6" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
+			<lido-text id="drg2"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option2}" value="${args.option2}" tab-index="7" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
+			<lido-text id="drg3"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option3}" value="${args.option3}" tab-index="8" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
+			<lido-text id="drg4"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option4}" value="${args.option4}" tab-index="9" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
+			<lido-text id="drg5"  height="landscape.200px,portrait.200px" width="landscape.160px,portrait.155px" visible="true" font-family="'Baloo Bhai 2'" font-size="90px" string="${args.option5}" value="${args.option5}" tab-index="10" bg-Color="transparent" onEntry="  this.fontWeight='1000';" type="drag" border-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/FoodJar/smalljar_equation.png" ></lido-text>
+			</lido-cell>
+
+    </lido-container>
+    </main>
+  `;
+}

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

@@ -0,0 +1,105 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/matchBox',
+};
+export default meta;
+export const Blanks = {
+    args: {
+        ans1: '6',
+        ans2: '8',
+        ans3: '5',
+        ans4: '4',
+        ans5: '1',
+        option1: '6',
+        option2: '4',
+        option3: '5',
+        option4: '1',
+        option5: '8',
+        row1: '3',
+        col1: '2',
+        row2: '2',
+        col2: '2',
+        row3: '5',
+        col3: '1',
+        row4: '1',
+        col4: '1',
+        row5: '4',
+        col5: '2',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `
+  <main>
+
+	<lido-container visible="true" dropAttr="EnableAnimation" is-allow-only-correct="true" objective="${args.ans1},${args.ans2},${args.ans3},${args.ans4},${args.ans5}" id="ldo-container" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" is-continue-on-correct="true">
+		<lido-cell visible="true"  onEntry="this.position='relative';" y="landscape.57%,portrait.77%">	
+				<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="360px" width="485px"  y="landscape.200px,portrait.0px" onEntry="this.position='relative';" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+				</lido-avatar>
+			</lido-cell>
+		<lido-cell layout="row" visible="true" margin="landscape.-336px 0px -49px,portrait.-103px 0px 333px 0px" bg-color="transparent" height="90%" width="landscape.84%,portrait.100%">
+			<lido-image layout="col" is-slice="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/matchBox/linematching_building1.png" visible="true" height="100%" width="landscape.30%,portrait.40%"  onEntry="this.display='grid';  this.align-items='center';this.justify-content='center';this.gap='26px';">
+				<lido-cell layout="col" visible="true" margin="0px 18px 0px -18px" bg-color="transparent" height="89%" width="100%" onEntry="this.display='flex'; align-items='center'; justify-content='space-around';">
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="1" type="drag" id="drag1" value="${args.option1}" height="100px" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-math-matrix id="matrix1" clickable="false" rows="${args.row1}" cols="${args.col1}"  defualtFill="${args.option1}" leftIndex="false" topIndex="false"  matrixImage="" activeBgColor="pink" inactiveBgColor="transparent"   border="2px solid black" height="150px" width="150px"
+			 		visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+				</lido-image>
+			
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="2" type="drag" id="drag2" value="${args.option2}" height="100px" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-math-matrix id="matrix2" clickable="false" rows="${args.row2}" cols="${args.col2}"  defualtFill="${args.option2}" leftIndex="false" topIndex="false"  matrixImage="" activeBgColor="pink" inactiveBgColor="transparent"   border="2px solid black" height="150px" width="150px"
+			 		visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+				</lido-image>
+			
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="3" type="drag" id="drag3" value="${args.option3}" height="100px" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-math-matrix id="matrix3" clickable="false" rows="${args.row3}" cols="${args.col3}"  defualtFill="${args.option3}" leftIndex="false" topIndex="false"  matrixImage="" activeBgColor="pink" inactiveBgColor="transparent"   border="2px solid black" height="150px" width="150px"
+			 		visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+				
+			</lido-image>
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="4" type="drag" id="drag4" value="${args.option4}" height="100px" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-math-matrix id="matrix4" clickable="false" rows="${args.row4}" cols="${args.col4}"  defualtFill="${args.option4}" leftIndex="false" topIndex="false"  matrixImage="" activeBgColor="pink" inactiveBgColor="transparent"   border="2px solid black" height="150px" width="150px"
+			 		visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+				</lido-image>
+			
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="5" type="drag" id="drag5" value="${args.option5}" height="100px" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-math-matrix id="matrix5" clickable="false" rows="${args.row5}" cols="${args.col5}"  defualtFill="${args.option5}" leftIndex="false" topIndex="false"  matrixImage="" activeBgColor="pink" inactiveBgColor="transparent"   border="2px solid black" height="150px" width="150px"
+			 		visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+				</lido-image>
+				</lido-cell>
+			</lido-image>
+			
+			<lido-image layout="col" is-slice="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/matchBox/linematching_building2.png" visible="true" height="100%" width="landscape.30%,portrait.40%"  onEntry="this.display='grid';  this.align-items='center';this.justify-content='center';this.gap='26px';">
+				<lido-cell layout="col" visible="true" margin="0px 18px 0px -18px" bg-color="transparent" height="89%" width="100%" onEntry="this.display='flex'; align-items='center'; justify-content='space-around';">
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="11" type="drop" id="drop1" value="6" height="100px" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-math-matrix id="matrix11" clickable="false" rows="3" cols="2"  defualtFill="6" leftIndex="false" topIndex="false"  matrixImage="" activeBgColor="palegreen" inactiveBgColor="transparent"   border="2px solid black" height="150px" width="150px"
+			 		visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+				</lido-image>
+			
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="12" type="drop" id="drop2" value="8" height="100px" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-math-matrix id="matrix12" clickable="false" rows="4" cols="2"  defualtFill="8" leftIndex="false" topIndex="false"  matrixImage="" activeBgColor="palegreen" inactiveBgColor="transparent"   border="2px solid black" height="150px" width="150px"
+			 		visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+				</lido-image>
+			
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="13" type="drop" id="drop3" value="5" height="100px" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-math-matrix id="matrix13" clickable="false" rows="5" cols="1"  defualtFill="5" leftIndex="false" topIndex="false"  matrixImage="" activeBgColor="palegreen" inactiveBgColor="transparent"   border="2px solid black" height="150px" width="150px"
+			 		visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+				
+			</lido-image>
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="14" type="drop" id="drop4" value="4" height="100px" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-math-matrix id="matrix14" clickable="false" rows="2" cols="2"  defualtFill="4" leftIndex="false" topIndex="false"  matrixImage="" activeBgColor="palegreen" inactiveBgColor="transparent"   border="2px solid black" height="150px" width="150px"
+			 		visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+				</lido-image>
+			
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="15" type="drop" id="drop5" value="1" height="100px" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-math-matrix id="matrix15" clickable="false" rows="1" cols="1"  defualtFill="1" leftIndex="false" topIndex="false"  matrixImage="" activeBgColor="palegreen" inactiveBgColor="transparent"   border="2px solid black" height="150px" width="150px"
+			 		visible="true" margin="landscape.0,portrait.-26px 0px 0px 0px"></lido-math-matrix>
+				</lido-image>
+				</lido-cell>
+			</lido-image>
+		</lido-cell>
+    </lido-container>
+    </main>
+   `;
+}

package/dist/collection/stories/Templates/matchBox/matchBox2.stories.js

@@ -0,0 +1,92 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/matchBox2',
+    argTypes: {
+        dragimg1: { control: 'file' },
+        dragimg2: { control: 'file' },
+        dragimg3: { control: 'file' },
+        dragimg4: { control: 'file' },
+    },
+};
+export default meta;
+export const Blanks = {
+    args: {
+        drag1: 'lion',
+        dragimg1: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/lion.jpg",
+        drag2: 'zebra',
+        dragimg2: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/zebra.jpg",
+        drag3: 'tiger',
+        dragimg3: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/tiger.jpg",
+        drag4: 'hygine',
+        dragimg4: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hygiene%201.png",
+        drop1: 'hygine',
+        dropimg1: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/hygiene%201.png",
+        drop2: 'lion',
+        dropimg2: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/lion.jpg",
+        drop3: 'tiger',
+        dropimg3: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/tiger.jpg",
+        drop4: 'zebra',
+        dropimg4: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/picturemeaning/zebra.jpg",
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `
+  <main>
+
+	<lido-container visible="true" dropAttr="EnableAnimation" is-allow-only-correct="true" objective="${args.drop1},${args.drop2},${args.drop3},${args.drop4}" id="ldo-container" onCorrect="lido-avatar.avatarAnimate='Success';this.sleep='2000';" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/trace/Sky.png" is-continue-on-correct="true">
+		<lido-cell visible="true"  onEntry="this.position='relative';" y="landscape.57%,portrait.77%">	
+				<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="360px" width="485px"  y="landscape.200px,portrait.0px" onEntry="this.position='relative';" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+				</lido-avatar>
+			</lido-cell>
+		<lido-cell layout="row" visible="true" margin="landscape.-336px 0px -49px,portrait.-103px 0px 333px 0px" bg-color="transparent" height="90%" width="landscape.84%,portrait.100%">
+			<lido-image layout="col" is-slice="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/matchBox/linematching_building1.png" visible="true" height="100%" width="landscape.30%,portrait.40%"  onEntry="this.display='grid';  this.align-items='center';this.justify-content='center';this.gap='26px';">
+				<lido-cell layout="col" visible="true" margin="0px 18px 0px -18px" bg-color="transparent" height="89%" width="100%" onEntry="this.display='flex'; align-items='center'; justify-content='space-around';">
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="1" type="drag" id="drag1" value="${args.drag1}" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-image visible="true" height="150px" width="150px" src="${args.dragimg1}"></lido-image>
+				</lido-image>
+			
+				
+			
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="3" type="drag" id="drag3" value="${args.drag2}" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-image visible="true" height="150px" width="150px" src="${args.dragimg2}"></lido-image>
+				
+				</lido-image>
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="2" type="drag" id="drag2" value="${args.drag3}" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-image visible="true" height="150px" width="150px" src="${args.dragimg3}"></lido-image>
+				</lido-image>
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="4" type="drag" id="drag4" value="${args.drag4}" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-image visible="true" height="150px" width="150px" src="${args.dragimg4}"></lido-image>
+				</lido-image>
+		
+				</lido-cell>
+			</lido-image>
+			
+			<lido-image layout="col" is-slice="true" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/matchBox/linematching_building2.png" visible="true" height="100%" width="landscape.30%,portrait.40%"  onEntry="this.display='grid';  this.align-items='center';this.justify-content='center';this.gap='26px';">
+				<lido-cell layout="col" visible="true" margin="0px 18px 0px -18px" bg-color="transparent" height="89%" width="100%" onEntry="this.display='flex'; align-items='center'; justify-content='space-around';">
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="11" type="drop" id="drop1" value="hygine" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-image visible="true" height="150px" width="150px" src="${args.dropimg1}"></lido-image>
+				</lido-image>
+			
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="12" type="drop" id="drop2" value="lion" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-image visible="true" height="150px" width="150px" src="${args.dropimg2}"></lido-image>
+				</lido-image>
+			
+				
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="14" type="drop" id="drop4" value="tiger" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-image visible="true" height="150px" width="150px" src="${args.dropimg3}"></lido-image>
+				</lido-image>
+			
+				<lido-image z="10" visible="true" is-slice="true" src="https://wallpapers.com/images/featured/blank-white-7sn5o1woonmklx1h.jpg" tab-index="15" type="drop" id="drop5" value="zebra" height="auto" width="auto" onEntry="this.display='flex'; this.align-items='center'; this.justify-content='center';" bg-color="white">
+					<lido-image visible="true" height="150px" width="150px" src="${args.dropimg4}"></lido-image>
+				</lido-image>
+				</lido-cell>
+			</lido-image>
+		</lido-cell>
+    </lido-container>
+    </main>
+   `;
+}

package/dist/collection/stories/Templates/matchingCard/matching-card.stories.js

@@ -0,0 +1,47 @@
+import { html } from "lit";
+const meta = {
+    title: 'Templates/matchingCard',
+    argTypes: {
+        answer: { control: 'text' },
+        option1: { control: 'text' },
+        option2: { control: 'text' },
+        option3: { control: 'text' },
+    },
+};
+export default meta;
+export const OrderTractor = {
+    args: {
+        answer: 'correct',
+        option1: 'incorrect', option2: 'correct', option3: 'incorrect',
+    },
+    render: args => {
+        const xml = getContainerXml(args);
+        return html `<lido-home .xmlData="${xml}"></lido-home>`;
+    },
+};
+function getContainerXml(args) {
+    return `
+    <main>
+     <lido-container id="lido-container" is-allow-only-correct="true"  value="mainContainer1" bg-image="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Spring.png" objective="${args.answer}" width="100%" bg-color="transparent" visible="true" onCorrect="lido-avatar.avatarAnimate='Success'; this.sleep='2000'; truck.animation='placeToLeft 2.5s linear'; imgs.animation='placeToLeft 2.5s linear'; dragEle.animation='placeToLeft 2.5s linear'; this.sleep='2000';  " onEntry="this.justifyContent='space-around';" onInCorrect="lido-avatar.avatarAnimate='Fail'; this.sleep='2000';" show-check="false" is-continue-on-correct="true" after-drop="false" custom-style="#dropEle{border: none !important} #drag1,#drag2,#drag3{box-shadow: none !important}">
+	<!-- Chimple Avatar -->
+	<lido-cell layout="pos" id="pos1" disable-edit="true" value="pos2" height="landscape.448px,portrait.402px" width="landscape.350px,portrait.398px" x="landscape.1px, portrait.20px" y="landscape.5px, portrait.318px" aria-hidden="true" z="1" bg-color="transparent" visible="true" onEntry="">
+			<lido-avatar id="lido-avatar" disable-edit="true" visible="true" height="100%" width="100%"  src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/temp2/chimplecharacter.riv" alt-text="{chimpleCharacterRive}">
+			</lido-avatar>
+	</lido-cell>
+
+	<lido-text id="trainAudio" visible="false" audio="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/train1%20(1).m4a" onEntry="this.speak='true';"></lido-text>
+    <lido-image id="truck"  height="60%" width="landscape.100%,portrait.200%" visible="true"  bg-Color="transparent" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/train.svg" margin="landscape.14px 0px 0px 0px,portrait.452px 0px 0px 0px" onEntry="this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';"></lido-image>
+		<lido-cell id="imgs" visible="true" x="landscape.-158px,portrait.0" y="landscape.-495px,portrait.-652px" layout="row" height="80%" width="landscape.35%,portrait.70%" bg-color="transparent" margin="landscape.-115px 0px 0px 345px,portrait.0px 0px 0px 95px" onEntry="this.position='relative';this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';">
+		   	<lido-image id="qn" height="landscape.320px,portrait.320px" value="${args.answer}" width="landscape.320px,portrait.320px" tab-index="2" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047094.png"></lido-image>
+		   	<lido-image id="dropEle" height="landscape.320px,portrait.320px" value="${args.answer}" width="landscape.320px,portrait.320px" tab-index="1" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/card_shadow.png" type="drop"></lido-image>
+		</lido-cell>
+	<lido-cell id="dragEle" visible="true" layout="row" width="100%" height="40%" bg-color="transparent" margin="landscape.-580px 0px 50px 0px,portrait.-532px 0px 162px 0px" onEntry="this.animation='rightToPlace 2.5s linear';" onCorrect="this.animation='placeToLeft 2.5s linear';">
+	   	<lido-image id="drag1" height="landscape.320px,portrait.320px" width="landscape.320px,portrait.320px" tab-index="1" value="${args.option1}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047093.png" type="drag"></lido-image>
+		<lido-image id="drag2" height="landscape.320px,portrait.320px" width="landscape.320px,portrait.320px" tab-index="2" value="${args.option2}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047094.png" type="drag"></lido-image>
+		<lido-image id="drag3" height="landscape.320px,portrait.320px" width="landscape.320px,portrait.320px" tab-index="3" value="${args.option3}" src="https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/MatchingCard/Group%2047095.png" type="drag"></lido-image>
+	</lido-cell>
+
+    </lido-container>
+    </main>
+  `;
+}