{"version":3,"file":"WPPVLlcP.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}\n\nconst props = defineProps<Props>()\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 componentClasses = computed(() => {\n  const classes = ['app-bottom-sheet']\n\n  if (props.class) classes.push(props.class)\n\n  return classes\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\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: () => {\n    if (bottomSheetContentElement.value?.scrollTop === 0) {\n      onClose()\n    }\n  },\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      <div\n        v-if=\"modelValue\"\n        class=\"ui-dialog-overlay\"\n        @mousedown.self=\"onClose\"\n      />\n    </transition>\n\n    <transition name=\"ui-slide-up\">\n      <div\n        v-if=\"modelValue\"\n        ref=\"bottomSheetElement\"\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=\"isVisibleCloseButton\"\n          class=\"app-bottom-sheet__button\"\n          variant=\"transparent\"\n          size=\"xs\"\n          radius=\"lg\"\n          icon=\"close-bigger\"\n          @click=\"onClose\"\n        />\n\n        <div ref=\"bottomSheetContentElement\" class=\"app-bottom-sheet__content\">\n          <slot />\n        </div>\n      </div>\n    </transition>\n  </Teleport>\n</template>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/ui-layer/styles/mixins';\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  transition: transform 0.2s linear;\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    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","componentClasses","computed","classes","onClose","resizeObserver","createResizeObserver","triggerHeight","entries","watch","element","_a","isActive","scrollLock","scrollUnlock","touchService","TouchService","onMounted","onBeforeUnmount"],"mappings":";;wjBACA,MAAMA,EAA2B,sHAOjC,MAAMC,EAAQC,EAERC,EAAOC,EAEPC,EAAqBC,EAA2B,IAAI,EACpDC,EAA4BD,EAA2B,IAAI,EAE3DE,EAAuBF,EAAI,EAAK,EAEhCG,EAAmBC,EAAS,IAAM,CAChC,MAAAC,EAAU,CAAC,kBAAkB,EAEnC,OAAIV,EAAM,OAAeU,EAAA,KAAKV,EAAM,KAAK,EAElCU,CAAA,CACR,EAEKC,EAAU,IAAM,CACpBT,EAAK,oBAAqB,EAAK,CAAA,EAG3BU,EAAiBP,EAA2B,IAAI,EAEhDQ,EAAuB,IAAM,CAC3B,MAAAC,EAAgB,OAAO,YAAcf,EAEpC,OAAA,IAAI,eAAgBgB,GAAY,CAChCA,EAAQ,SAEbR,EAAqB,MAAQQ,EAAQ,CAAC,EAAE,YAAY,QAAUD,EAAA,CAC/D,CAAA,EAGGE,EAAAZ,EAAqBa,GAAY,OACjCA,KAASC,EAAAN,EAAe,QAAf,MAAAM,EAAsB,QAAQD,GAAO,CACnD,EAEDD,EACE,IAAMhB,EAAM,WACXmB,GAAa,CACR,GAAAA,SAAiBC,IAERC,GACf,CAAA,EAGI,MAAAC,EAAe,IAAIC,EAAa,CACpC,SAAU,IACV,UAAW,OACX,WAAY,IAAM,SACZL,EAAAZ,EAA0B,QAA1B,YAAAY,EAAiC,aAAc,GACzCP,GAEZ,CAAA,CACD,EAED,OAAAa,EAAU,IAAM,CACdZ,EAAe,MAAQC,GAAqB,CAC7C,EAEDY,EAAgB,IAAM,OACPJ,KAEbH,EAAAN,EAAe,QAAf,MAAAM,EAAsB,YAAW,CAClC","debug_id":"1ff8d2c4-570f-504c-839b-b711c4666cd5"}