{"version":3,"file":"OzSideModal-d7649851.js","sources":["../../../app/javascript/library/v4/components/OzSideModal.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport device from '@@/bits/device'\nimport OzDivider, { OzDividerColorScheme } from '@@/library/v4/components/OzDivider.vue'\nimport OzOverlay from '@@/library/v4/components/OzOverlay.vue'\nimport type { VueCssClass } from '@@/types'\nimport { useScroll } from '@vueuse/core'\nimport { computed, ref, useSlots } from 'vue'\n\nconst props = withDefaults(\n  defineProps<{\n    /**\n     *  TailwindCSS width class.\n     *\n     *  - `w-99` is for whiteboard card templates panel\n     *  - `w-100` is for surface panels when on native tablet\n     *  - `w-120` is for surface panels\n     *  - `w-135` is for dashboard layout picker\n     */\n    widthClass?: 'w-99' | 'w-100' | 'w-120' | 'w-135'\n    /**\n     * Extra TailwindCSS classes for the modal container.\n     */\n    containerClasses?: VueCssClass\n    darkMode?: boolean | 'auto'\n    /**\n     * Determines whether the modal should have a rounded top inner corner\n     */\n    topInnerCornerRadius?: 0 | 12 | 24\n    /**\n     * Determines whether the modal should have a rounded bottom inner corner\n     */\n    bottomInnerCornerRadius?: 0 | 12 | 24\n    /**\n     *  TailwindCSS z-index class.\n     *\n     *  - `z-modal2` is for all dialogs\n     *  - `z-sidepanel` is for surface sidepanels\n     */\n    zIndexClass?: 'z-modal2' | 'z-sidepanel'\n    isBodyScrollable?: boolean\n    hideScrollbar?: boolean\n    /**\n     * Determines whether the scrollbar should overlay on top of content,\n     * hideScrollbar must be false for this to work.\n     * This is only supported on Chrome.\n     */\n    scrollbarOverlay?: boolean\n    /**\n     * Determines whether the scrollbar should have a gutter (always preserve\n     * space for the scrollbar, even when it's not visible).\n     */\n    scrollbarGutterStable?: boolean\n    /**\n     * Determines which direction the OzSideModal should slide in\n     */\n    slideDirection?: OzSideModalSlideDirection\n    /**\n     * Determines CSS position\n     */\n    position?: 'fixed' | 'absolute'\n    /**\n     * Determines whether the scrim should be shown\n     */\n    xScrim?: boolean\n\n    /**\n     * Determines whether the divider should be shown\n     */\n    headerDividerMode?: 'always' | 'on-scroll'\n  }>(),\n  {\n    widthClass: 'w-120',\n    containerClasses: undefined,\n    darkMode: 'auto',\n    topInnerCornerRadius: 12,\n    bottomInnerCornerRadius: 0,\n    zIndexClass: undefined,\n    isBodyScrollable: true,\n    hideScrollbar: false,\n    scrollbarOverlay: false,\n    scrollbarGutterStable: false,\n    slideDirection: OzSideModalSlideDirection.EndToStart,\n    position: 'fixed',\n    xScrim: true,\n    headerDividerMode: 'on-scroll',\n  },\n)\n\nconst slots = useSlots()\n\nconst scrollingContainer = ref<HTMLElement>()\nconst { y: scrollTop } = useScroll(scrollingContainer)\n\nconst xHeaderDivider = computed(() => {\n  if (props.headerDividerMode === 'always') return true\n  if (props.headerDividerMode === 'on-scroll' && scrollTop.value > 0) return true\n  return false\n})\n\nconst scrollbarStyles = computed(() => {\n  const defaultScrollbarStyles = [\n    {\n      'overflow-auto': props.isBodyScrollable,\n      'h-full': !props.isBodyScrollable,\n    },\n    {\n      'scrollbar-regular dark:scrollbar-regular-dark': props.darkMode === 'auto',\n      'scrollbar-regular': props.darkMode === false,\n      'dark:scrollbar-regular-dark': props.darkMode === true,\n    },\n    props.scrollbarGutterStable && 'scrollbar-gutter-stable',\n  ]\n  if (props.hideScrollbar) {\n    return 'no-scrollbar overflow-auto'\n  } else if (props.scrollbarOverlay && device.chrome) {\n    return ['scrollbar-overlay', ...defaultScrollbarStyles]\n  } else {\n    return defaultScrollbarStyles\n  }\n})\n\nconst isTransitioningToEnter = ref(true)\nconst emit = defineEmits(['scrim-click', 'scrim-esc', 'transition:after-enter'])\n\nconst handleAfterEnterTransition = (event) => {\n  isTransitioningToEnter.value = false\n  emit('transition:after-enter', event)\n}\n\nconst handleScrimClick = () => {\n  if (isTransitioningToEnter.value) return\n  emit('scrim-click')\n}\n</script>\n\n<script lang=\"ts\">\nexport enum OzSideModalSlideDirection {\n  EndToStart = 'end-to-start',\n  StartToEnd = 'start-to-end',\n}\n\nexport default {}\n</script>\n\n<template>\n  <Transition name=\"slide\" appear @after-enter=\"handleAfterEnterTransition\">\n    <OzOverlay\n      role=\"dialog\"\n      :should-fade-in=\"false\"\n      :z-index-class=\"zIndexClass\"\n      :dark-mode=\"darkMode\"\n      :position=\"position\"\n      :scrim=\"xScrim ? 'modal' : null\"\n      @scrim-click=\"handleScrimClick\"\n      @scrim-esc=\"$emit('scrim-esc')\"\n    >\n      <div\n        :class=\"[\n          'modal-container',\n          // Slide direction\n          {\n            'start-to-end': slideDirection === OzSideModalSlideDirection.StartToEnd,\n            'end-to-start': slideDirection === OzSideModalSlideDirection.EndToStart,\n          },\n          // Positioning\n          position === 'fixed' ? 'fixed' : 'absolute',\n          'inset-y-0',\n          // Position after sliding\n          {\n            'start-0': slideDirection === OzSideModalSlideDirection.StartToEnd,\n            'end-0': slideDirection === OzSideModalSlideDirection.EndToStart,\n          },\n          // Layout\n          widthClass,\n          'flex',\n          'flex-col',\n          'overflow-hidden',\n          topInnerCornerRadius === 12 && {\n            'rounded-se-xl': slideDirection === OzSideModalSlideDirection.StartToEnd,\n            'rounded-ss-xl': slideDirection === OzSideModalSlideDirection.EndToStart,\n          },\n          bottomInnerCornerRadius === 12 && {\n            'rounded-ee-xl': slideDirection === OzSideModalSlideDirection.StartToEnd,\n            'rounded-es-xl': slideDirection === OzSideModalSlideDirection.EndToStart,\n          },\n          topInnerCornerRadius === 24 && {\n            'rounded-se-3xl': slideDirection === OzSideModalSlideDirection.StartToEnd,\n            'rounded-ss-3xl': slideDirection === OzSideModalSlideDirection.EndToStart,\n          },\n          bottomInnerCornerRadius === 24 && {\n            'rounded-ee-3xl': slideDirection === OzSideModalSlideDirection.StartToEnd,\n            'rounded-es-3xl': slideDirection === OzSideModalSlideDirection.EndToStart,\n          },\n          // Shadow\n          'shadow-elevation-3',\n          // Background\n          {\n            'bg-light-ui-100 dark:bg-dark-ui-100': darkMode === 'auto',\n            'bg-light-ui-100': darkMode === false,\n            'bg-dark-ui-100': darkMode === true,\n          },\n          containerClasses,\n        ]\"\n      >\n        <div v-if=\"slots.header\" :class=\"[xHeaderDivider ? 'relative' : '']\">\n          <slot name=\"header\" :scroll-top=\"scrollTop\" />\n          <OzDivider\n            v-if=\"xHeaderDivider\"\n            class=\"absolute inset-x-0 bottom-0 mx-4\"\n            :color-scheme=\"OzDividerColorScheme.Solid\"\n          />\n        </div>\n        <div ref=\"scrollingContainer\" :class=\"scrollbarStyles\">\n          <slot name=\"body\" />\n        </div>\n      </div>\n    </OzOverlay>\n  </Transition>\n</template>\n\n<style lang=\"postcss\" scoped>\n.slide-enter-active,\n.slide-enter-active > .modal-container {\n  transition: all 0.3s cubic-bezier(0, 0, 0.2, 1);\n\n  @media (prefers-reduced-motion) {\n    transition-duration: 0s;\n  }\n}\n\n.slide-leave-active,\n.slide-leave-active > .modal-container {\n  transition: all 0.2s cubic-bezier(0.4, 0, 1, 1);\n\n  @media (prefers-reduced-motion) {\n    transition-duration: 0s;\n  }\n}\n\n.slide-enter,\n.slide-leave-to {\n  opacity: 0;\n}\n\n.slide-enter > .modal-container,\n.slide-leave-to > .modal-container {\n  &.end-to-start {\n    transform: translateX(100%);\n\n    [dir='rtl'] & {\n      transform: translateX(-100%);\n    }\n  }\n\n  &.start-to-end {\n    transform: translateX(-100%);\n\n    [dir='rtl'] & {\n      transform: translateX(100%);\n    }\n  }\n}\n</style>\n"],"names":["OzSideModalSlideDirection","__default__","slots","useSlots","scrollingContainer","ref","y","scrollTop","useScroll","xHeaderDivider","computed","props","headerDividerMode","value","scrollbarStyles","defaultScrollbarStyles","isBodyScrollable","darkMode","scrollbarGutterStable","hideScrollbar","scrollbarOverlay","device","chrome","isTransitioningToEnter","event","emit","handleScrimClick"],"mappings":"gjBAwIYA,GAAAA,IACVA,EAAA,WAAa,eACbA,EAAA,WAAa,eAFHA,IAAAA,GAAA,CAAA,CAAA,EAKZ,MAAAC,EAAe,CAAA,4oBArDTC,EAAQC,IAERC,EAAqBC,IACrB,CAAEC,EAAGC,CAAU,EAAIC,EAAUJ,CAAkB,EAE/CK,EAAiBC,EAAS,IAC1BC,EAAMC,oBAAsB,UAC5BD,EAAMC,oBAAsB,aAAeL,EAAUM,MAAQ,CAElE,EAEKC,EAAkBJ,EAAS,IAAM,CACrC,MAAMK,EAAyB,CAC7B,CACE,gBAAiBJ,EAAMK,iBACvB,SAAU,CAACL,EAAMK,gBACnB,EACA,CACE,gDAAiDL,EAAMM,WAAa,OACpE,oBAAqBN,EAAMM,WAAa,GACxC,8BAA+BN,EAAMM,WAAa,EACpD,EACAN,EAAMO,uBAAyB,yBAAA,EAEjC,OAAIP,EAAMQ,cACD,6BACER,EAAMS,kBAAoBC,EAAOC,OACnC,CAAC,oBAAqB,GAAGP,CAAsB,EAE/CA,CAEX,CAAC,EAEKQ,EAAyBlB,EAAI,EAAI,6LAGHmB,GAAU,CAC5CD,EAAuBV,MAAQ,GAC/BY,EAAK,yBAA0BD,CAAK,oBAGbE,IAAM,CACzBH,EAAuBV,OAC3BY,EAAK,aAAa"}