{"version":3,"file":"CQ4B6tUS.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/bottom-sheet/BottomSheet.vue"],"sourcesContent":["<script setup lang=\"ts\">\nconst WINDOW_HEIGHT_MULTIPLIER = 0.9\n\ntype Props = {\n  modelValue: boolean\n  class?: string\n  padding?: string | null\n  persistentClose?: boolean\n  scrollableElementSelector?: string\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  class: '',\n  padding: null,\n  scrollableElementSelector: undefined,\n})\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst bottomSheetElement = ref<HTMLDivElement | null>(null)\nconst bottomSheetContentElement = ref<HTMLDivElement | null>(null)\n\nconst isVisibleCloseButton = ref(false)\n\nconst showCloseButton = computed(() => {\n  return props.persistentClose || isVisibleCloseButton.value\n})\n\nconst componentClasses = computed(() => {\n  const classes = ['app-bottom-sheet']\n\n  if (props.class) classes.push(props.class)\n\n  return classes\n})\n\nconst contentStyles = computed(() => {\n  return props.padding ? { padding: `${props.padding}px` } : {}\n})\n\nconst onClose = () => {\n  emit('update:modelValue', false)\n}\n\nconst resizeObserver = ref<ResizeObserver | null>(null)\n\nconst createResizeObserver = () => {\n  const triggerHeight = window.innerHeight * WINDOW_HEIGHT_MULTIPLIER\n\n  return new ResizeObserver((entries) => {\n    if (!entries.length) return\n\n    isVisibleCloseButton.value = entries[0].contentRect.height >= triggerHeight\n  })\n}\n\nconst getScrollableElement = () => {\n  if (!props.scrollableElementSelector) return\n\n  return bottomSheetContentElement.value?.querySelector(\n    props.scrollableElementSelector,\n  ) as HTMLElement\n}\n\nconst checkScrollState = () => {\n  const scrollableElement = getScrollableElement()\n\n  if (scrollableElement) return scrollableElement.scrollTop === 0\n\n  return bottomSheetContentElement.value?.scrollTop === 0\n}\n\nwatch(bottomSheetElement, (element) => {\n  if (element) resizeObserver.value?.observe(element)\n})\n\nwatch(\n  () => props.modelValue,\n  (isActive) => {\n    if (isActive) return scrollLock()\n\n    scrollUnlock()\n  },\n)\n\nconst touchService = new TouchService({\n  distance: 100,\n  direction: 'down',\n  onTouchEnd: () => checkScrollState() && onClose(),\n})\n\nonMounted(() => {\n  resizeObserver.value = createResizeObserver()\n})\n\nonBeforeUnmount(() => {\n  scrollUnlock()\n\n  resizeObserver.value?.disconnect()\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <transition name=\"ui-fade\">\n      <template v-if=\"modelValue\">\n        <slot v-if=\"$slots.overlay\" name=\"overlay\" />\n\n        <div\n          v-else\n          class=\"ui-dialog-overlay\"\n          data-test-id=\"bottom-sheet-overlay\"\n          @mousedown.self=\"onClose\"\n        />\n      </template>\n    </transition>\n\n    <transition name=\"ui-slide-up\">\n      <div\n        v-if=\"modelValue\"\n        ref=\"bottomSheetElement\"\n        data-test-id=\"bottom-sheet\"\n        :class=\"componentClasses\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        @touchstart=\"touchService.onStart\"\n        @touchmove=\"touchService.onMove\"\n        @touchend=\"touchService.onEnd\"\n      >\n        <div class=\"app-bottom-sheet__header\" role=\"button\" @click=\"onClose\" />\n\n        <the-button\n          v-if=\"showCloseButton\"\n          data-test-id=\"bottom-sheet-close\"\n          class=\"app-bottom-sheet__button\"\n          variant=\"transparent\"\n          size=\"xs\"\n          radius=\"lg\"\n          icon=\"close-bigger\"\n          type=\"button\"\n          @click=\"onClose\"\n        />\n\n        <div\n          ref=\"bottomSheetContentElement\"\n          data-test-id=\"bottom-sheet-content\"\n          class=\"app-bottom-sheet__content\"\n          :style=\"contentStyles\"\n        >\n          <slot />\n        </div>\n      </div>\n    </transition>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/ui-layer/styles/mixins' as *;\n\n.app-bottom-sheet {\n  position: fixed;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 9001;\n  max-height: calc(100vh - 60px);\n  overflow: hidden;\n  background-color: var(--ui-white);\n  border-radius: 20px 20px 0 0;\n  will-change: transform;\n\n  @supports (height: 100dvh) {\n    max-height: calc(100dvh - 30px);\n  }\n\n  &__header {\n    position: relative;\n    height: 28px;\n    color: var(--ui-text-secondary);\n\n    &::before {\n      position: absolute;\n      top: 12px;\n      left: 50%;\n      width: 36px;\n      height: 5px;\n      content: '';\n      background-color: var(--ui-secondary);\n      border-radius: 10px;\n      opacity: 0.2;\n      transform: translateX(-50%);\n    }\n  }\n\n  &__button {\n    position: absolute;\n    top: 16px;\n    right: 16px;\n    z-index: 1000;\n    background-color: #fff;\n    box-shadow: var(--ui-card-shadow);\n  }\n\n  &__content {\n    position: relative;\n    max-height: calc(100vh - 90px);\n    padding: 13px 20px 24px;\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n    overscroll-behavior: none;\n    @include invisible-scroll-bar();\n\n    @supports (height: 100dvh) {\n      max-height: calc(100dvh - 60px);\n    }\n  }\n}\n</style>\n"],"names":["WINDOW_HEIGHT_MULTIPLIER","props","__props","emit","__emit","bottomSheetElement","ref","bottomSheetContentElement","isVisibleCloseButton","showCloseButton","computed","componentClasses","classes","contentStyles","onClose","resizeObserver","createResizeObserver","triggerHeight","entries","getScrollableElement","_a","checkScrollState","scrollableElement","watch","element","isActive","scrollLock","scrollUnlock","touchService","TouchService","onMounted","onBeforeUnmount"],"mappings":";;skBACA,MAAMA,EAA2B,iOAUjC,MAAMC,EAAQC,EAMRC,EAAOC,EAEPC,EAAqBC,EAA2B,IAAI,EACpDC,EAA4BD,EAA2B,IAAI,EAE3DE,EAAuBF,EAAI,EAAK,EAEhCG,EAAkBC,EAAS,IACxBT,EAAM,iBAAmBO,EAAqB,KACtD,EAEKG,EAAmBD,EAAS,IAAM,CAChC,MAAAE,EAAU,CAAC,kBAAkB,EAEnC,OAAIX,EAAM,OAAeW,EAAA,KAAKX,EAAM,KAAK,EAElCW,CAAA,CACR,EAEKC,EAAgBH,EAAS,IACtBT,EAAM,QAAU,CAAE,QAAS,GAAGA,EAAM,OAAO,IAAK,EAAI,CAAC,CAC7D,EAEKa,EAAU,IAAM,CACpBX,EAAK,oBAAqB,EAAK,CACjC,EAEMY,EAAiBT,EAA2B,IAAI,EAEhDU,EAAuB,IAAM,CAC3B,MAAAC,EAAgB,OAAO,YAAcjB,EAEpC,OAAA,IAAI,eAAgBkB,GAAY,CAChCA,EAAQ,SAEbV,EAAqB,MAAQU,EAAQ,CAAC,EAAE,YAAY,QAAUD,EAAA,CAC/D,CACH,EAEME,EAAuB,IAAM,OAC7B,GAAClB,EAAM,0BAEX,OAAOmB,EAAAb,EAA0B,QAA1B,YAAAa,EAAiC,cACtCnB,EAAM,0BAEV,EAEMoB,EAAmB,IAAM,OAC7B,MAAMC,EAAoBH,EAAqB,EAE3C,OAAAG,EAA0BA,EAAkB,YAAc,IAEvDF,EAAAb,EAA0B,QAA1B,YAAAa,EAAiC,aAAc,CACxD,EAEMG,EAAAlB,EAAqBmB,GAAY,OACjCA,KAASJ,EAAAL,EAAe,QAAf,MAAAK,EAAsB,QAAQI,GAAO,CACnD,EAEDD,EACE,IAAMtB,EAAM,WACXwB,GAAa,CACR,GAAAA,SAAiBC,EAAW,EAEnBC,EAAA,CAAA,CAEjB,EAEM,MAAAC,EAAe,IAAIC,EAAa,CACpC,SAAU,IACV,UAAW,OACX,WAAY,IAAMR,EAAiB,GAAKP,EAAQ,CAAA,CACjD,EAED,OAAAgB,EAAU,IAAM,CACdf,EAAe,MAAQC,EAAqB,CAAA,CAC7C,EAEDe,EAAgB,IAAM,OACPJ,EAAA,GAEbP,EAAAL,EAAe,QAAf,MAAAK,EAAsB,YAAW,CAClC","debug_id":"7a53a5b4-449f-5de5-a104-d113aa71e7a4"}