{"version":3,"file":"PopupBase.7f4a22d0.js","sources":["../../../../components/popup/PopupBase.vue"],"sourcesContent":["<template>\n  <div>\n    <transition :name=\"transition\">\n      <div\n        ref=\"popupBase\"\n        v-show=\"show\"\n        class=\"popup\"\n        :class=\"[cssClass, { show: show }, size]\"\n        @keydown.esc=\"closePopUp($event, true)\"\n        @keydown=\"trapFocus($event)\"\n        @click=\"closePopUp\"\n        tabindex=\"-1\"\n        aria-hidden=\"true\"\n        :style=\"{ 'z-index': popupZIndex }\"\n      >\n        <div\n          ref=\"popup_wrapper\"\n          class=\"popup__wrapper\"\n          :class=\"{ 'second-layer': level === 2, 'second-layer-show': level === 2 && show }\"\n        >\n          <div\n            class=\"popup__content\"\n            :class=\"contentCssClass\"\n          >\n            <a\n              href=\"javascript:void(0)\"\n              class=\"close\"\n              :class=\"{ 'disable-close': topLayerOpen && level !== 2}\"\n              @click.prevent=\"closePopUp($event, true)\"\n            >\n              <NavigationClose />\n            </a>\n            <slot />\n          </div>\n        </div>\n      </div>\n    </transition>\n    <transition :name=\"transition\">\n      <div\n        v-if=\"show\"\n        class=\"popup--backdrop\"\n        :style=\"{ 'z-index': backdropZIndex }\"\n      />\n    </transition>\n  </div>\n</template>\n\n<script>\nimport {POPUP} from '~/assets/js/constants'\nimport NavigationClose from '~/assets/icons/navigation_close.svg?component'\n\nexport default {\n  components: {NavigationClose},\n  props: {\n    show: {\n      type: Boolean,\n      required: false,\n      default() {\n        return false\n      }\n    },\n    cssClass: {\n      type: String,\n      required: false,\n      default() {\n        return ''\n      }\n    },\n    contentCssClass: {\n      type: String,\n      required: false,\n      default() {\n        return ''\n      }\n    },\n    transition: {\n      type: String,\n      required: false,\n      default() {\n        return 'fade'\n      }\n    },\n    closeOnOutsideClick: {\n      type: Boolean,\n      required: false,\n      default() {\n        return false\n      }\n    },\n    level: {\n      type: Number,\n      required: false,\n      default() {\n        return 0\n      }\n    },\n    size: {\n      type: String,\n      required: false,\n      default() {\n        return POPUP.Size.large\n      }\n    }\n  },\n  data() {\n    const popupZIndex = POPUP.ZIndex + this.level * 2\n    return {\n      backdropZIndex: popupZIndex - 1,\n      popupZIndex: popupZIndex,\n      topLayerOpen: false\n    }\n  },\n  methods: {\n    checkSecondLayerOpen() {\n      this.topLayerOpen = document.body.getElementsByClassName('second-layer-show').length > 0\n    },\n    closePopUp(event, forceClose = false) {\n      if (\n        !forceClose &&\n        (!this.closeOnOutsideClick || event.target !== event.currentTarget)\n      ) {\n        return\n      }\n      this.$emit('close-pop-up', true)\n    },\n    removeHtmlBodyOptions() {\n      if (!window) {\n        return\n      }\n      document.body.classList.remove('popup--open')\n      document.body.style.paddingRight = ''\n    },\n    getScrollbarWidth() {\n      // Creating invisible container\n      const outer = document.createElement('div')\n      outer.style.visibility = 'hidden'\n      outer.style.overflow = 'scroll' // forcing scrollbar to appear\n      outer.style.msOverflowStyle = 'scrollbar' // needed for WinJS apps\n      document.body.appendChild(outer)\n\n      // Creating inner element and placing it in the container\n      const inner = document.createElement('div')\n      outer.appendChild(inner)\n\n      // Calculating difference between container's full width and the child width\n      const scrollbarWidth = outer.offsetWidth - inner.offsetWidth\n\n      // Removing temporary elements from the DOM\n      outer.parentNode.removeChild(outer)\n\n      return scrollbarWidth\n    },\n    scrollbarVisible(element) {\n      return element.scrollHeight > element.clientHeight\n    },\n    trapFocus(event) {\n      const allFocusableElements = this.$refs.popupBase.querySelectorAll(\n        'button, [href], input, select, textarea, [tabindex]:not([tabindex=\"-1\"]), [contenteditable]'\n      )\n      const focusableElements = Array.from(allFocusableElements).filter(\n        element => element.offsetParent !== null\n      )\n      const firstElement = focusableElements[0]\n      const lastElement = focusableElements[focusableElements.length - 1]\n\n      if (event.key === 'Tab') {\n        if (focusableElements.length === 0) {\n          event.preventDefault()\n          return\n        }\n\n        if (event.shiftKey) {\n          // Shift + Tab, move focus to the previous element\n          if (document.activeElement === firstElement) {\n            event.preventDefault()\n            lastElement.focus()\n          }\n        } else if (document.activeElement === lastElement) {\n          event.preventDefault()\n          firstElement.focus()\n        }\n      }\n    }\n  },\n  beforeUnmount() {\n    this.removeHtmlBodyOptions()\n  },\n  mounted() {\n    this.$eventbus.on('showPopup', () => this.checkSecondLayerOpen())\n    this.$eventbus.on('closePopup', () => this.checkSecondLayerOpen())\n  },\n  watch: {\n    show() {\n      if (this.show) {\n        this.$nextTick().then(() => {\n          const scrollWidth = this.getScrollbarWidth()\n          document.body.style.paddingRight = scrollWidth + 'px'\n          document?.body?.classList?.add('popup--open')\n          this.$refs.popup_wrapper?.focus()\n          if (this.$refs.popup_wrapper) {\n            this.$refs.popup_wrapper.scrollTop = 0\n          }\n          this.$eventbus.emit('showPopup')\n        })\n      } else {\n        this.$nextTick().then(() => {\n          this.$eventbus.emit('closePopup')\n          const popupIsOpen =\n            document.body.getElementsByClassName('popup show').length > 0\n          if (!popupIsOpen) {\n            this.removeHtmlBodyOptions()\n          }\n        })\n      }\n    }\n  }\n}\n</script>\n\n<style lang=\"scss\">\n.slide-leave-active,\n.slide-enter-active {\n  transition: .25s;\n}\n\n.slide-enter {\n  transform: translate(0, -100%);\n}\n\n.slide-leave-to {\n  transform: translate(0, -100%);\n}\n\n.fade-leave-active,\n.fade-enter-active {\n  transition: .25s;\n}\n\n.fade-enter,\n.fade-leave-to {\n  opacity: 0;\n}\n\n.popup,\n.popup--backdrop {\n  position: fixed;\n  inset: 0;\n}\n\n.popup {\n  &--open {\n    overflow: hidden;\n\n    .popup {\n      overflow: hidden scroll;\n    }\n  }\n\n  &--backdrop {\n    z-index: 499;\n    background-color: $color__black;\n    opacity: .3;\n  }\n\n  z-index: 500;\n  overflow: hidden;\n  outline: 0;\n\n  &__wrapper {\n    background-color: $color__white;\n    box-shadow: 0 .188rem .375rem $color--nav__main--background;\n    max-width: 74.25rem;\n    transition: -webkit-transform .3s ease-out;\n    transition: transform .3s ease-out, -webkit-transform .3s ease-out;\n    pointer-events: none;\n    position: static;\n    margin: 7rem auto $default-margin-padding-2x;\n\n    @include breakpoint-down($md) {\n      overflow-x: hidden;\n      margin: 0;\n      inset: 0;\n      min-height: 100%;\n      min-width: 100%;\n    }\n\n    .popup__content {\n      position: relative;\n      pointer-events: auto;\n      padding: 1.5rem $default-margin-padding-width;\n    }\n  }\n\n  &.small {\n    .popup__wrapper {\n      max-width: 35rem;\n      width: auto;\n    }\n  }\n\n  &.medium {\n    .popup__wrapper {\n      max-width: 50rem;\n    }\n  }\n\n  &.large {\n    .popup__wrapper {\n      max-width: 75rem;\n    }\n  }\n\n  .close {\n    font-size: 1.8em;\n    color: $color__text__default;\n    position: absolute;\n    z-index: 11;\n    right: .75rem;\n    top: .75rem;\n\n    &.disable-close {\n      pointer-events: none;\n    }\n  }\n\n  .second-layer  {\n    margin: 14rem auto $default-margin-padding-2x;\n  }\n}\n</style>\n"],"names":["_sfc_main","NavigationClose","POPUP","popupZIndex","event","forceClose","outer","inner","scrollbarWidth","element","allFocusableElements","focusableElements","firstElement","lastElement","scrollWidth","_b","_a","_c","_createElementBlock","_createVNode","_Transition","$props","_createElementVNode","_cache","_withKeys","$event","$options","args","$data","_normalizeClass","_withModifiers","_component_NavigationClose","_renderSlot","_ctx"],"mappings":"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"}