{"version":3,"file":"EJmRZrRt.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  maxWidth?: number | 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}\n\nconst props = withDefaults(defineProps<Props>(), {\n  maxWidth: 620,\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  return classes\n})\n\nconst componentStyles = computed(() => {\n  return props.maxWidth ? { maxWidth: `${props.maxWidth}px` } : {}\n})\n\nconst contentStyles = computed(() => {\n  return props.padding ? { padding: `${props.padding}px` } : {}\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\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\">\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            <the-button\n              v-if=\"isVisibleClose\"\n              variant=\"transparent\"\n              icon=\"close-bigger\"\n              size=\"sm\"\n              radius=\"lg\"\n              class=\"app-dialog__close\"\n              data-test-id=\"dialog-close-button\"\n              aria-label=\"Закрыть диалоговое окно\"\n              type=\"button\"\n              @click=\"onClose\"\n            />\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@import '../../assets/ui-layer/styles/mixins';\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 !important;\n    top: 8px;\n    right: 8px;\n    z-index: 10;\n    color: var(--ui-text-primary);\n\n    @include media('>=desktop-mini') {\n      top: 12px;\n      right: 12px;\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</style>\n"],"names":["props","__props","emit","__emit","dialogContainerElement","ref","componentClasses","computed","classes","componentStyles","contentStyles","isVisibleClose","onClose","onEscapeKeyUp","event","setActiveState","scrollLock","_a","watch","isActive","scrollUnlock","onMounted","onBeforeUnmount"],"mappings":";;+8BAgBA,MAAMA,EAAQC,EAQRC,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,EAE1CA,CAAA,CACR,EAEKC,EAAkBF,EAAS,IACxBP,EAAM,SAAW,CAAE,SAAU,GAAGA,EAAM,QAAQ,IAAK,EAAI,CAAC,CAChE,EAEKU,EAAgBH,EAAS,IACtBP,EAAM,QAAU,CAAE,QAAS,GAAGA,EAAM,OAAO,IAAK,EAAI,CAAC,CAC7D,EAEKW,EAAiBJ,EAAS,IACvB,CAACP,EAAM,YAAc,CAACA,EAAM,SACpC,EAEKY,EAAU,IAAM,CAChBZ,EAAM,YAEVE,EAAK,oBAAqB,EAAK,CACjC,EAEMW,EAAiBC,GAAyB,EAC1CA,GAAA,YAAAA,EAAO,OAAQ,UAEXF,EAAA,CACV,EAEMG,EAAiB,IAAM,CAChBC,EAAA,EAENhB,EAAM,WAEX,WAAW,IAAM,QACfiB,EAAAb,EAAuB,QAAvB,MAAAa,EAA8B,SAC7B,GAAG,CACR,EAEA,OAAAC,EACE,IAAMlB,EAAM,WACXmB,GAAa,CACR,GAAAA,SAAiBJ,EAAe,EAEvBK,EAAA,CAAA,CAEjB,EAEAC,EAAU,IAAM,CACP,OAAA,iBAAiB,QAASR,CAAa,CAAA,CAC/C,EAEDS,EAAgB,IAAM,CACb,OAAA,oBAAoB,QAAST,CAAa,EAE7Cb,EAAM,YAAyBoB,EAAA,CAAA,CACpC","debug_id":"dff803ba-313d-5806-ba9e-671c6a693557"}