{"version":3,"file":"WcW5ict5.js","sources":["../../../../node_modules/@smenaspace/ui-layer/components/dialog/Dialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { DialogSize } from './types'\n\ntype Props = {\n  modelValue: boolean\n  autoWidth?: boolean\n  maxWidth?: number | null\n  height?: string | null\n  padding?: string | null\n  size?: DialogSize\n  class?: string\n  persistent?: boolean\n  fixed?: boolean\n  autofocus?: boolean\n  hideClose?: boolean\n  transparent?: boolean\n  appear?: boolean\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  maxWidth: 620,\n  height: null,\n  padding: null,\n  size: 'sm',\n  class: '',\n  autofocus: true,\n})\n\nconst emit = defineEmits(['update:modelValue'])\n\nconst dialogContainerElement = ref<HTMLDivElement | null>(null)\n\nconst componentClasses = computed(() => {\n  const classes = ['app-dialog', `app-dialog--size-${props.size}`]\n\n  if (props.class) classes.push(props.class)\n\n  if (props.transparent) classes.push('app-dialog--transparent')\n\n  if (props.fixed) classes.push('app-dialog--fixed')\n\n  if (props.autoWidth) classes.push('app-dialog--auto-width')\n\n  return classes\n})\n\nconst componentStyles = computed(() => {\n  return props.maxWidth ? { maxWidth: `${props.maxWidth}px` } : {}\n})\n\nconst contentStyles = computed(() => {\n  const style: Record<string, unknown> = {}\n\n  if (props.padding) style.padding = `${props.padding}px`\n\n  if (props.height) style.height = `${props.height}px`\n\n  return style\n})\n\nconst isVisibleClose = computed(() => {\n  return !props.persistent && !props.hideClose\n})\n\nconst onClose = () => {\n  if (props.persistent) return\n\n  emit('update:modelValue', false)\n}\n\nconst onEscapeKeyUp = (event: KeyboardEvent) => {\n  if (event?.key !== 'Escape') return\n\n  onClose()\n}\n\nconst setActiveState = () => {\n  scrollLock()\n\n  if (!props.autofocus) return\n\n  setTimeout(() => {\n    dialogContainerElement.value?.focus()\n  }, 300)\n}\n\nwatch(\n  () => props.modelValue,\n  (isActive) => {\n    if (isActive) return setActiveState()\n\n    scrollUnlock()\n  },\n)\n\nonMounted(() => {\n  window.addEventListener('keyup', onEscapeKeyUp)\n\n  if (props.appear) setActiveState()\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keyup', onEscapeKeyUp)\n\n  if (props.modelValue) scrollUnlock()\n})\n</script>\n\n<template>\n  <Teleport to=\"body\">\n    <transition name=\"ui-fade\" :appear=\"appear\">\n      <div\n        v-if=\"modelValue\"\n        class=\"app-dialog-overlay ui-dialog-overlay\"\n        data-test-id=\"dialog-overlay\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n      >\n        <div\n          ref=\"dialogContainerElement\"\n          class=\"app-dialog-overlay__container\"\n          data-test-id=\"dialog-overlay-container\"\n          tabindex=\"0\"\n          @mousedown.self=\"onClose\"\n        >\n          <div\n            :class=\"componentClasses\"\n            :style=\"componentStyles\"\n            data-test-id=\"dialog\"\n          >\n            <div\n              v-if=\"isVisibleClose\"\n              class=\"app-dialog__close\"\n              @click=\"onClose\"\n            >\n              <slot v-if=\"$slots.close\" name=\"close\" />\n\n              <the-button\n                v-else\n                variant=\"transparent\"\n                icon=\"close-bigger\"\n                size=\"xs\"\n                radius=\"lg\"\n                data-test-id=\"dialog-close-button\"\n                aria-label=\"Закрыть диалоговое окно\"\n                type=\"button\"\n              />\n            </div>\n\n            <div\n              class=\"app-dialog__content\"\n              :style=\"contentStyles\"\n              data-test-id=\"dialog-content\"\n            >\n              <slot />\n            </div>\n          </div>\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-dialog-overlay {\n  &__container {\n    display: flex;\n    align-items: flex-start;\n    justify-content: center;\n    width: 100%;\n    height: 100%;\n    padding: 20px 0;\n    overflow: auto;\n    @include invisible-scroll-bar();\n    outline: none;\n\n    @include media('>=tablet') {\n      padding: 20px;\n    }\n  }\n}\n\n.app-dialog {\n  position: relative;\n  width: calc(100% - 25px);\n  margin: auto;\n  background-color: var(--ui-white);\n  border-radius: var(--dialog-radius);\n  outline: none;\n\n  @include media('>=desktop-mini') {\n    width: 100%;\n  }\n\n  &__close {\n    position: absolute;\n    top: 12px;\n    right: 12px;\n    z-index: 10;\n    width: 32px;\n    height: 32px;\n\n    @include media('>=desktop-mini') {\n      top: 16px;\n      right: 16px;\n    }\n  }\n\n  &__content {\n    padding: var(--dialog-padding);\n  }\n\n  &--size-sm {\n    --dialog-radius: 16px;\n    --dialog-padding: 32px 24px 24px;\n\n    @include media('>=desktop-mini') {\n      --dialog-radius: 10px;\n      --dialog-padding: 52px 30px 32px;\n    }\n  }\n\n  &--size-md {\n    --dialog-radius: 10px;\n    --dialog-padding: 56px 16px 40px;\n\n    @include media('>=desktop-mini') {\n      --dialog-padding: 52px 30px 40px;\n    }\n  }\n\n  &--fixed {\n    height: 100%;\n    overflow: hidden;\n\n    .app-dialog__content {\n      height: 100%;\n      overflow-y: auto;\n    }\n  }\n\n  &--transparent {\n    background-color: transparent !important;\n  }\n\n  &--auto-width {\n    @include media('>=desktop-mini') {\n      width: auto !important;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","emit","__emit","dialogContainerElement","ref","componentClasses","computed","classes","componentStyles","contentStyles","style","isVisibleClose","onClose","onEscapeKeyUp","event","setActiveState","scrollLock","_a","watch","isActive","scrollUnlock","onMounted","onBeforeUnmount"],"mappings":";;kiCAmBA,MAAMA,EAAQC,EASRC,EAAOC,EAEPC,EAAyBC,EAA2B,IAAI,EAExDC,EAAmBC,EAAS,IAAM,CACtC,MAAMC,EAAU,CAAC,aAAc,oBAAoBR,EAAM,IAAI,EAAE,EAE/D,OAAIA,EAAM,OAAeQ,EAAA,KAAKR,EAAM,KAAK,EAErCA,EAAM,aAAqBQ,EAAA,KAAK,yBAAyB,EAEzDR,EAAM,OAAeQ,EAAA,KAAK,mBAAmB,EAE7CR,EAAM,WAAmBQ,EAAA,KAAK,wBAAwB,EAEnDA,CAAA,CACR,EAEKC,EAAkBF,EAAS,IACxBP,EAAM,SAAW,CAAE,SAAU,GAAGA,EAAM,QAAQ,IAAK,EAAI,CAAC,CAChE,EAEKU,EAAgBH,EAAS,IAAM,CACnC,MAAMI,EAAiC,CAAC,EAExC,OAAIX,EAAM,UAASW,EAAM,QAAU,GAAGX,EAAM,OAAO,MAE/CA,EAAM,SAAQW,EAAM,OAAS,GAAGX,EAAM,MAAM,MAEzCW,CAAA,CACR,EAEKC,EAAiBL,EAAS,IACvB,CAACP,EAAM,YAAc,CAACA,EAAM,SACpC,EAEKa,EAAU,IAAM,CAChBb,EAAM,YAEVE,EAAK,oBAAqB,EAAK,CACjC,EAEMY,EAAiBC,GAAyB,EAC1CA,GAAA,YAAAA,EAAO,OAAQ,UAEXF,EAAA,CACV,EAEMG,EAAiB,IAAM,CAChBC,EAAA,EAENjB,EAAM,WAEX,WAAW,IAAM,QACfkB,EAAAd,EAAuB,QAAvB,MAAAc,EAA8B,SAC7B,GAAG,CACR,EAEA,OAAAC,EACE,IAAMnB,EAAM,WACXoB,GAAa,CACR,GAAAA,SAAiBJ,EAAe,EAEvBK,EAAA,CAAA,CAEjB,EAEAC,EAAU,IAAM,CACP,OAAA,iBAAiB,QAASR,CAAa,EAE1Cd,EAAM,QAAuBgB,EAAA,CAAA,CAClC,EAEDO,EAAgB,IAAM,CACb,OAAA,oBAAoB,QAAST,CAAa,EAE7Cd,EAAM,YAAyBqB,EAAA,CAAA,CACpC","debug_id":"d205c698-2bbf-5620-b9cd-dc602e92023f"}