{"version":3,"file":"DbJA3UWB.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}\n\nconst props = withDefaults(defineProps<Props>(), {\n  class: '',\n  padding: null,\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\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=\"showCloseButton\"\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          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  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    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","watch","element","_a","isActive","scrollLock","scrollUnlock","touchService","TouchService","onMounted","onBeforeUnmount"],"mappings":";;+jBACA,MAAMA,EAA2B,sLASjC,MAAMC,EAAQC,EAKRC,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,EAAAd,EAAqBe,GAAY,OACjCA,KAASC,EAAAN,EAAe,QAAf,MAAAM,EAAsB,QAAQD,GAAO,CACnD,EAEDD,EACE,IAAMlB,EAAM,WACXqB,GAAa,CACR,GAAAA,SAAiBC,EAAW,EAEnBC,EAAA,CAAA,CAEjB,EAEM,MAAAC,EAAe,IAAIC,EAAa,CACpC,SAAU,IACV,UAAW,OACX,WAAY,IAAM,SACZL,EAAAd,EAA0B,QAA1B,YAAAc,EAAiC,aAAc,GACzCP,EAAA,CACV,CACF,CACD,EAED,OAAAa,EAAU,IAAM,CACdZ,EAAe,MAAQC,EAAqB,CAAA,CAC7C,EAEDY,EAAgB,IAAM,OACPJ,EAAA,GAEbH,EAAAN,EAAe,QAAf,MAAAM,EAAsB,YAAW,CAClC","debug_id":"29cb5271-6b06-51bc-b160-8ce95a7c78f2"}