{"version":3,"file":"UiNotificationPopup.d7c254db.js","sources":["../../../../components/global/ui/UiNotificationPopup.vue"],"sourcesContent":["<template>\n  <transition @after-leave=\"afterLeave\">\n    <div\n      v-if=\"!destroyed\"\n      ref=\"root\"\n      v-show=\"isActive\"\n      class=\"ui-notification-popup is-active\"\n      :class=\"{\n        [`is-size-${size}`]: size,\n      }\"\n      tabindex=\"-1\"\n      :role=\"ariaRole\"\n      :aria-label=\"ariaLabel\"\n      :aria-modal=\"ariaModal\"\n    >\n      <div class=\"ui-notification-popup__bg\" @click=\"cancel('outside')\" />\n      <div ref=\"content\" class=\"ui-notification-popup__outer\">\n        <div class=\"ui-notification-popup__inner\" body-scroll-lock-ignore>\n          <header v-if=\"!!$slots.header\" class=\"ui-notification-popup__header\">\n            <slot name=\"header\" />\n          </header>\n\n          <slot :can-cancel=\"canCancel\" :close=\"close\" />\n          <button\n            v-if=\"showX\"\n            type=\"button\"\n            class=\"ui-notification-popup__close\"\n            @click=\"cancel('x')\"\n          >\n            <icon-close />\n          </button>\n\n          <footer v-if=\"!!$slots.actions\" class=\"ui-notification-popup__actions\">\n            <slot name=\"actions\" />\n          </footer>\n        </div>\n      </div>\n    </div>\n  </transition>\n</template>\n\n<script lang=\"ts\">\nimport { computed, defineComponent, nextTick, onBeforeUnmount, onMounted, type Ref, ref, toRefs, watch } from 'vue';\nimport { type Nullable } from '@/types/generic';\nimport { scrollLock, scrollUnlock } from '@/utils/scroll';\nimport IconClose from '@/components/global/elements/IconClose.vue';\n\nconst CANCEL_OPTIONS: string[] = ['escape', 'x', 'outside', 'button'];\n\nexport default defineComponent({\n  name: 'UiNotificationPopup',\n\n  components: {\n    IconClose,\n  },\n\n  props: {\n    modelValue: Boolean,\n    canCancel: {\n      type: Array,\n      default: () => CANCEL_OPTIONS,\n    },\n    onCancel: {\n      type: Function,\n      default: null,\n    },\n    autoFocus: {\n      type: Boolean,\n      default: true,\n    },\n    ariaRole: {\n      type: String,\n      default: '',\n      validator: (value: string) => ['', 'dialog', 'alertdialog'].includes(value),\n    },\n    ariaModal: Boolean,\n    ariaLabel: {\n      type: String,\n      default: '',\n    },\n    destroyOnHide: {\n      type: Boolean,\n      default: false,\n    },\n    size: {\n      type: String,\n      default: null,\n      validator: (value: string) => ['l', 'm'].includes(value),\n    },\n  },\n\n  setup(props, context) {\n    const { canCancel, modelValue, autoFocus, destroyOnHide } = toRefs(props);\n\n    const root: Ref<Nullable<HTMLElement>> = ref(null);\n    const content: Ref<Nullable<HTMLElement>> = ref(null);\n    const isActive = ref(modelValue.value || false);\n    const destroyed = ref(!modelValue.value);\n\n    const cancelOptions = computed(() => canCancel.value);\n\n    const handleScroll = () => {\n      nextTick(() => {\n        if (isActive.value && content.value) {\n          scrollLock(content.value);\n          return;\n        }\n        scrollUnlock();\n      });\n    };\n\n    const keyPress = (ev: KeyboardEvent) => {\n      if (isActive.value && (ev.key === 'Escape' || ev.key === 'Esc')) {\n        cancel('escape');\n      }\n    };\n\n    const close = () => {\n      context.emit('update:modelValue', false);\n      context.emit('close');\n    };\n\n    const cancel = (method: string) => {\n      if (!cancelOptions.value.includes(method)) {\n        return;\n      }\n      context.emit('cancel', arguments);\n      if (props.onCancel) {\n        props.onCancel.apply(null, arguments);\n      }\n      close();\n    };\n\n    const afterLeave = () => {\n      if (destroyOnHide.value) {\n        destroyed.value = true;\n      }\n    };\n\n    watch(modelValue, (val) => {\n      isActive.value = val;\n    });\n\n    watch(isActive, (val) => {\n      if (val) {\n        destroyed.value = false;\n      }\n      handleScroll();\n\n      nextTick(() => {\n        if (val && root.value && root.value.focus && autoFocus.value) {\n          root.value.focus();\n        }\n      });\n    });\n\n    const showX = computed(() => cancelOptions.value.includes('x'));\n\n    onMounted(() => {\n      if (typeof window !== 'undefined') {\n        document.addEventListener('keyup', keyPress);\n        handleScroll();\n      }\n    });\n\n    onBeforeUnmount(() => {\n      scrollUnlock();\n    });\n\n    return {\n      root,\n      content,\n\n      isActive,\n      destroyed,\n      cancelOptions,\n      showX,\n\n      close,\n      cancel,\n      afterLeave,\n    };\n  },\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.ui-notification-popup {\n  --popup-max-width: #{rem(450)};\n  --popup-max-height: #{rem(600)};\n  --popup-height: auto;\n\n  &.is-size-l {\n    --popup-max-width: #{rem(800)};\n    --popup-height: auto;\n    --popup-max-height: #{rem(1000)};\n  }\n\n  &.is-size-m {\n    --popup-max-width: #{rem(600)};\n    --popup-height: auto;\n    --popup-max-height: #{rem(600)};\n  }\n\n  position: relative;\n  z-index: map-get($z-index, popup-bg);\n\n  &__bg {\n    @include overlay(0, map-get($z-index, popup-bg), fixed);\n    background: rgba(0, 0, 0, 0.6);\n  }\n\n  &__outer {\n    position: fixed;\n    z-index: map-get($z-index, popup);\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    display: flex;\n    overflow: auto;\n\n    padding: rem(20);\n\n    @include mobile {\n      padding: var(--container-spacing);\n    }\n  }\n\n  &__inner {\n    position: relative;\n    flex: 1;\n    height: var(--popup-height);\n    max-height: var(--popup-max-height);\n    width: auto;\n    max-width: var(--popup-max-width);\n    margin: auto;\n    padding: calc-clamp(320, $desktop, 40, 60) calc-clamp(320, $desktop, 25, 30)\n      calc-clamp(320, $desktop, 25, 30);\n    color: black;\n    //border: rem(2) solid var(--primary);\n    border-radius: calc-clamp(320, $desktop, 20, 25);\n    background: #d7e6f2;\n    overflow-y: scroll;\n  }\n\n  &.has-pad & {\n    &__inner {\n      padding: rem(40);\n    }\n  }\n\n  &__close {\n    width: rem(35);\n    height: rem(35);\n    display: block;\n    top: calc-clamp(320, $desktop, 15, 20);\n    right: calc-clamp(320, $desktop, 15, 20);\n    position: absolute;\n    padding: rem(10);\n    border-radius: 50%;\n    @include transition;\n\n    @include hover {\n      background-color: var(--primary);\n      color: var(--white);\n\n      svg {\n        transform: scale(0.7);\n      }\n    }\n\n    svg {\n      width: 100%;\n      height: 100%;\n      @include transition-slow;\n    }\n  }\n\n  &__header {\n    @include fluid(margin-bottom, 30, 40);\n    text-align: center;\n  }\n\n  &__actions {\n    @include fluid(margin-top, 30, 40);\n    text-align: center;\n    display: grid;\n    grid-auto-flow: column;\n    gap: rem(20);\n    align-items: center;\n    justify-content: center;\n  }\n}\n\n.ui-notification-popup__inner {\n  overflow: hidden;\n}\n</style>\n"],"names":["CANCEL_OPTIONS","_sfc_main","IconClose","value","props","context","canCancel","modelValue","autoFocus","destroyOnHide","toRefs","root","ref","content","isActive","destroyed","cancelOptions","computed","handleScroll","nextTick","scrollLock","scrollUnlock","keyPress","ev","cancel","close","method","afterLeave","watch","val","showX","onMounted","onBeforeUnmount","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_hoisted_5","_component_icon_close","_resolveComponent","_openBlock","_createBlock","_Transition","_ctx","_withCtx","_withDirectives","_createElementBlock","_createElementVNode","_cache","$event","_createCommentVNode","_renderSlot"],"mappings":"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"}