{"version":3,"mappings":"y4BAGA,MAAMA,EAAUC,EAAqB,IAAMC,EAAA,WAAO,uBAAwC,sFAAC,EAErFC,EAAQC,EAQRC,EAAOC,EAEb,SAASC,EAAeC,EAAyB,CAC5CL,EAAM,MAENK,EAAM,MAAQ,UACXC,GAER,CAEA,SAASA,GAAQ,CAChBJ,EAAK,OAAO,CACb,CAWA,OAAAK,EAAU,IAAM,CAER,wBAAiB,UAAWH,CAAc,EACjD,EAEDI,EAAgB,IAAM,CAEd,2BAAoB,UAAWJ,CAAc,EACpD","names":["Spinner","defineAsyncComponent","__vitePreload","props","__props","emit","__emit","keydownHandler","event","close","onMounted","onBeforeUnmount"],"sources":["../../src/components/Files/Templates/Designs/Mobler/src/components/SearchModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\r\nimport { defineAsyncComponent, onMounted, onBeforeUnmount } from 'vue'\r\nimport { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'\r\nconst Spinner = defineAsyncComponent(() => import('@/components/ui/decoration/Spinner.vue'))\r\n\r\nconst props = defineProps({\r\n\tshow: Boolean,\r\n\tloading: Boolean,\r\n\texit: {\r\n\t\ttype: String,\r\n\t\tdefault: 'Luk'\r\n\t}\r\n})\r\nconst emit = defineEmits(['close'])\r\n\r\nfunction keydownHandler(event: { key: string; }) {\r\n\tif(!props.show) return\r\n\r\n\tif (event.key === 'Escape') {\r\n\t\tclose()\r\n\t}\r\n}\r\n\r\nfunction close() {\r\n\temit('close')\r\n}\r\n\r\n// When modal is opened, append the overflow-hidden class to the html element\r\n// watch(props.show, (value) => {\r\n//   if (value) {\r\n//     document.documentElement.classList.add('overflow-hidden', 'modal-open')\r\n//   } else {\r\n//     document.documentElement.classList.remove('overflow-hidden', 'modal-open')\r\n//   }\r\n// })\r\n\r\nonMounted(() => {\r\n\t// Listen for keydown events\r\n\twindow.addEventListener('keydown', keydownHandler)\r\n})\r\n\r\nonBeforeUnmount(() => {\r\n\t// Remove keydown event listener\r\n\twindow.removeEventListener('keydown', keydownHandler)\r\n})\r\n\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n\t\tv-show=\"show\"\r\n\t\tref=\"modal\"\r\n\t\tclass=\"items-center overflow-hidden z-40 fixed inset-0\"\r\n\t\t:class=\"{ 'flex': show, hidden: !show }\"\r\n\t\trole=\"dialog\"\r\n\t\t:aria-hidden=\"show ? 'false' : 'true'\"\r\n\t\taria-labelledby=\"popup-headline\"\r\n\t\taria-describedby=\"popup-description\"\r\n\t>\r\n\t\t<div\r\n\t\t\tclass=\"absolute inset-0 bg-black opacity-50\"\r\n\t\t\taria-hidden=\"true\"\r\n\t\t\t@click=\"close\"\r\n\t\t></div>\r\n\t\t<div\r\n\t\t\tclass=\"m-auto w-full lg:w-[calc(100vw-1rem)] xl:w-[calc(1280px-2rem)] 2xl:w-[calc(1536px-2rem)] bg-white absolute lg:top-[42px] top-0 lg:-left-8 lg:-right-8 inset-x-0\"\r\n\t\t\t>\r\n\t\t\t<div class=\"flex flex-col lg:flex-row\">\r\n\t\t\t\t<div class=\"flex bg-white w-full h-[96px] lg:hidden\"></div>\r\n\t\t\t\t<aside class=\"p-8 lg:pt-24 lg:w-[24rem] xl:w-[26rem] 2xl:w-[32rem] bg-white overflow-y-scroll overflow-hiddenbar hidden lg:block\">\r\n\t\t\t\t\t<slot name=\"popular\"></slot>\r\n\t\t\t\t</aside>\r\n\r\n\t\t\t\t<div class=\"min-h-[80vh] max-h-[90vh] lg:max-h-[90vh] flex-1 px-4 py-8 lg:py-0 pb-20 lg:px-8 lg:pb-8 bg-grey-light overflow-y-scroll overflow-hiddenbar\">\r\n\t\t\t\t\t<div class=\"hidden lg:flex  justify-between py-8\">\r\n\t\t\t\t\t\t<slot name=\"modal-title\"></slot>\r\n\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\tclass=\"justify-self-end ml-auto px-3 text-base hover:underline\"\r\n\t\t\t\t\t\t\t@click=\"close\"\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<span class=\"mr-2 hidden lg:inline-flex\">{{ exit }}</span>\r\n\t\t\t\t\t\t\t<font-awesome-icon :icon=\"['fal', 'close']\" />\r\n\t\t\t\t\t\t</button>\r\n\t\t\t\t\t</div>\r\n\r\n\t\t\t\t\t<Spinner v-if=\"loading\">\r\n\t\t\t\t\t\tSøger efter produkter...\r\n\t\t\t\t\t</Spinner>\r\n\t\t\t\t\t<div v-else>\r\n\t\t\t\t\t\t<slot name=\"content\">\r\n\t\t\t\t\t\t\tSearch results\r\n\t\t\t\t\t\t</slot>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</div>\r\n\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n"],"file":"assets/SearchModal-8d355124.js"}