{"version":3,"file":"Modal.js","sources":["../../../../src/lib/components/common/Modal.svelte"],"sourcesContent":["<script lang=\"ts\">\n\timport { onDestroy, onMount } from 'svelte';\n\timport { fade } from 'svelte/transition';\n\n\timport { flyAndScale } from '$lib/utils/transitions';\n\n\texport let show = true;\n\texport let size = 'md';\n\n\tlet modalElement = null;\n\tlet mounted = false;\n\n\tconst sizeToWidth = (size) => {\n\t\tif (size === 'xs') {\n\t\t\treturn 'w-[16rem]';\n\t\t} else if (size === 'sm') {\n\t\t\treturn 'w-[30rem]';\n\t\t} else if (size === 'md') {\n\t\t\treturn 'w-[48rem]';\n\t\t} else {\n\t\t\treturn 'w-[56rem]';\n\t\t}\n\t};\n\n\tconst handleKeyDown = (event: KeyboardEvent) => {\n\t\tif (event.key === 'Escape' && isTopModal()) {\n\t\t\tconsole.log('Escape');\n\t\t\tshow = false;\n\t\t}\n\t};\n\n\tconst isTopModal = () => {\n\t\tconst modals = document.getElementsByClassName('modal');\n\t\treturn modals.length && modals[modals.length - 1] === modalElement;\n\t};\n\n\tonMount(() => {\n\t\tmounted = true;\n\t});\n\n\t$: if (show && modalElement) {\n\t\tdocument.body.appendChild(modalElement);\n\t\twindow.addEventListener('keydown', handleKeyDown);\n\t\tdocument.body.style.overflow = 'hidden';\n\t} else if (modalElement) {\n\t\twindow.removeEventListener('keydown', handleKeyDown);\n\t\tdocument.body.removeChild(modalElement);\n\t\tdocument.body.style.overflow = 'unset';\n\t}\n\n\tonDestroy(() => {\n\t\tshow = false;\n\t\tif (modalElement) {\n\t\t\tdocument.body.removeChild(modalElement);\n\t\t}\n\t});\n</script>\n\n{#if show}\n\t<!-- svelte-ignore a11y-click-events-have-key-events -->\n\t<!-- svelte-ignore a11y-no-static-element-interactions -->\n\t<div\n\t\tbind:this={modalElement}\n\t\tclass=\"modal fixed top-0 right-0 left-0 bottom-0 bg-black/60 w-full h-screen max-h-[100dvh] flex justify-center z-[9999] overflow-hidden overscroll-contain\"\n\t\tin:fade={{ duration: 10 }}\n\t\ton:mousedown={() => {\n\t\t\tshow = false;\n\t\t}}\n\t>\n\t\t<div\n\t\t\tclass=\" m-auto rounded-2xl max-w-full {sizeToWidth(\n\t\t\t\tsize\n\t\t\t)} mx-2 bg-gray-50 dark:bg-gray-900 shadow-3xl max-h-[100dvh] overflow-y-auto scrollbar-hidden\"\n\t\t\tin:flyAndScale\n\t\t\ton:mousedown={(e) => {\n\t\t\t\te.stopPropagation();\n\t\t\t}}\n\t\t>\n\t\t\t<slot />\n\t\t</div>\n\t</div>\n{/if}\n\n<style>\n\t.modal-content {\n\t\tanimation: scaleUp 0.1s ease-out forwards;\n\t}\n\n\t@keyframes scaleUp {\n\t\tfrom {\n\t\t\ttransform: scale(0.985);\n\t\t\topacity: 0;\n\t\t}\n\t\tto {\n\t\t\ttransform: scale(1);\n\t\t\topacity: 1;\n\t\t}\n\t}\n</style>\n"],"names":["size"],"mappings":";;;;;;QAMY,OAAO,KAAA,IAAA;QACP,OAAO,KAAA,IAAA;MAEd,eAAe;QAGb,cAAeA,WAAAA;QAChBA,UAAS,MAAA;AACL,aAAA;AAAA,eACGA,UAAS,MAAA;AACZ,aAAA;AAAA,eACGA,UAAS,MAAA;AACZ,aAAA;AAAA;AAEA,aAAA;AAAA;;QAIH,gBAAiB,WAAA;AAClB,QAAA,MAAM,QAAQ,YAAY,WAAA,GAAA;AAC7B,cAAQ,IAAI,QAAQ;AACpB,aAAO;AAAA;;AAIH,QAAA,aAAA,MAAA;UACC,SAAS,SAAS,uBAAuB,OAAO;AAC/C,WAAA,OAAO,UAAU,OAAO,OAAO,SAAS,CAAC,MAAM;AAAA;AAiBvD,YAAA,MAAA;AACC,WAAO;AAAA;;;;;QAXD,QAAQ,cAAA;AACd,eAAS,KAAK,YAAY,YAAY;AACtC,aAAO,iBAAiB,WAAW,aAAa;AAChD,eAAS,KAAK,MAAM,WAAW;AAAA;;YAe5B,mMAIQ,cAAY,CAAA,CAAA,gBAAA,mCAAA,OAQiB,YACtC,IAAA,GAAA,IAAA,IAAA,4GAAA,KAAA,MAAA,UAAA,MAAA,QAAA,CAAA,CAAA,IAAA,EAAA;;"}