{"version":3,"file":"CHokEXtw.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  additional?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  class: '',\n  padding: null,\n  scrollableElementSelector: undefined,\n})\n\nconst bottomSheetContent = defineModel('bottomSheetContent', {\n  required: false,\n  default: true,\n})\n\nconst emit = defineEmits(['update:modelValue', 'update:bottomSheetContent'])\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:bottomSheetContent', true)\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\nconst setLockState = () => {\n  if (props.additional) return\n\n  scrollLock()\n}\n\nconst setUnlockState = () => {\n  if (props.additional) return\n\n  scrollUnlock()\n}\n\nwatch(bottomSheetElement, (element) => {\n  if (element) resizeObserver.value?.observe(element)\n})\n\nwatch(\n  () => props.modelValue,\n  (isActive) => {\n    if (isActive) return setLockState()\n\n    setUnlockState()\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  setUnlockState()\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        v-show=\"bottomSheetContent\"\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","bottomSheetContent","_useModel","emit","__emit","bottomSheetElement","ref","bottomSheetContentElement","isVisibleCloseButton","showCloseButton","computed","componentClasses","classes","contentStyles","onClose","resizeObserver","createResizeObserver","triggerHeight","entries","getScrollableElement","_a","checkScrollState","scrollableElement","setLockState","scrollLock","setUnlockState","scrollUnlock","watch","element","isActive","touchService","TouchService","onMounted","onBeforeUnmount"],"mappings":";;goBACA,MAAMA,EAA2B,yYAWjC,MAAMC,EAAQC,EAMRC,EAAqBC,EAAYF,EAAA,oBAGtC,EAEKG,EAAOC,EAEPC,EAAqBC,EAA2B,IAAI,EACpDC,EAA4BD,EAA2B,IAAI,EAE3DE,EAAuBF,EAAI,EAAK,EAEhCG,EAAkBC,EAAS,IACxBX,EAAM,iBAAmBS,EAAqB,KACtD,EAEKG,EAAmBD,EAAS,IAAM,CAChC,MAAAE,EAAU,CAAC,kBAAkB,EAEnC,OAAIb,EAAM,OAAea,EAAA,KAAKb,EAAM,KAAK,EAElCa,CAAA,CACR,EAEKC,EAAgBH,EAAS,IACtBX,EAAM,QAAU,CAAE,QAAS,GAAGA,EAAM,OAAO,IAAK,EAAI,CAAC,CAC7D,EAEKe,EAAU,IAAM,CACpBX,EAAK,4BAA6B,EAAI,EACtCA,EAAK,oBAAqB,EAAK,CACjC,EAEMY,EAAiBT,EAA2B,IAAI,EAEhDU,EAAuB,IAAM,CAC3B,MAAAC,EAAgB,OAAO,YAAcnB,EAEpC,OAAA,IAAI,eAAgBoB,GAAY,CAChCA,EAAQ,SAEbV,EAAqB,MAAQU,EAAQ,CAAC,EAAE,YAAY,QAAUD,EAAA,CAC/D,CACH,EAEME,EAAuB,IAAM,OAC7B,GAACpB,EAAM,0BAEX,OAAOqB,EAAAb,EAA0B,QAA1B,YAAAa,EAAiC,cACtCrB,EAAM,0BAEV,EAEMsB,EAAmB,IAAM,OAC7B,MAAMC,EAAoBH,EAAqB,EAE3C,OAAAG,EAA0BA,EAAkB,YAAc,IAEvDF,EAAAb,EAA0B,QAA1B,YAAAa,EAAiC,aAAc,CACxD,EAEMG,EAAe,IAAM,CACrBxB,EAAM,YAECyB,EAAA,CACb,EAEMC,EAAiB,IAAM,CACvB1B,EAAM,YAEG2B,EAAA,CACf,EAEMC,EAAAtB,EAAqBuB,GAAY,OACjCA,KAASR,EAAAL,EAAe,QAAf,MAAAK,EAAsB,QAAQQ,GAAO,CACnD,EAEDD,EACE,IAAM5B,EAAM,WACX8B,GAAa,CACR,GAAAA,SAAiBN,EAAa,EAEnBE,EAAA,CAAA,CAEnB,EAEM,MAAAK,EAAe,IAAIC,EAAa,CACpC,SAAU,IACV,UAAW,OACX,WAAY,IAAMV,EAAiB,GAAKP,EAAQ,CAAA,CACjD,EAED,OAAAkB,EAAU,IAAM,CACdjB,EAAe,MAAQC,EAAqB,CAAA,CAC7C,EAEDiB,EAAgB,IAAM,OACLR,EAAA,GAEfL,EAAAL,EAAe,QAAf,MAAAK,EAAsB,YAAW,CAClC","debug_id":"7e1bf6a5-4000-57fe-abfc-6505616f599a"}