| {"version":3,"file":"Modal.DcRcsIox.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":["attr","div0","div0_class_value","ctx","insert_hydration","target","div1","anchor","append_hydration","current","dirty","div1_intro","create_in_transition","fade","create_if_block","e","show","$$props","size","modalElement","sizeToWidth","handleKeyDown","event","isTopModal","modals","onMount","onDestroy","$$value","$$invalidate"],"mappings":"ukBAsE0CA,EAAAC,EAAA,QAAAC,EAAA,iCAAAC,EACtC,CAAA,EAAAA,EAAA,CAAA,CAAA,EAAA,4GAAA,8KAVHC,EAmBKC,EAAAC,EAAAC,CAAA,EAXJC,EAUKF,EAAAL,CAAA,gKATmC,CAAAQ,GAAAC,EAAA,GAAAR,KAAAA,EAAA,iCAAAC,EACtC,CAAA,EAAAA,EAAA,CAAA,CAAA,EAAA,qMAPSQ,EAAAC,EAAAN,EAAAO,EAAA,CAAA,SAAU,EAAE,CAAA,8GANpBV,EAAI,CAAA,GAAAW,EAAAX,CAAA,8FAAJA,EAAI,CAAA,+KAgBSY,GAAC,CACfA,EAAE,gBAAe,oDArET,KAAAC,EAAO,EAAA,EAAAC,GACP,KAAAC,EAAO,IAAA,EAAAD,EAEdE,EAAe,WAGbC,EAAeF,GAChBA,IAAS,KACL,YACGA,IAAS,KACZ,YACGA,IAAS,KACZ,YAEA,YAIHG,EAAiBC,GAAA,CAClBA,EAAM,MAAQ,UAAYC,EAAA,IAC7B,QAAQ,IAAI,QAAQ,MACpBP,EAAO,EAAA,IAIHO,EAAA,IAAA,OACCC,EAAS,SAAS,uBAAuB,OAAO,EAC/C,OAAAA,EAAO,QAAUA,EAAOA,EAAO,OAAS,CAAC,IAAML,GAGvDM,EAAA,IAAA,IAcAC,EAAA,IAAA,KACCV,EAAO,EAAA,EACHG,GACH,SAAS,KAAK,YAAYA,CAAY,6CAS5BA,EAAYQ,wBAItBC,EAAA,EAAAZ,EAAO,EAAK,2IA1BPA,GAAQG,GACd,SAAS,KAAK,YAAYA,CAAY,EACtC,OAAO,iBAAiB,UAAWE,CAAa,EAChD,SAAS,KAAK,MAAM,SAAW,UACrBF,IACV,OAAO,oBAAoB,UAAWE,CAAa,EACnD,SAAS,KAAK,YAAYF,CAAY,EACtC,SAAS,KAAK,MAAM,SAAW"} |