{"version":3,"file":"Drawer-Dz_tWLpn.js","sources":["../../../app/javascript/components/shared/Drawer.vue"],"sourcesContent":["<template>\n  <teleport to=\"#end-of-body\">\n    <div :class=\"transitionFromBottom ? 'drawer-bottom' : 'drawer-right'\">\n      <fade-transition>\n        <div\n          v-if=\"isOpen\"\n          :class=\"backdropClasses\"\n          class=\"fixed pin drawer-backdrop\"\n          @click=\"closeDrawerFromBackground\"></div>\n      </fade-transition>\n      <drawer-transition :position=\"transitionDirection\">\n        <div\n          v-if=\"isOpen\"\n          class=\"fixed bottom-0 right-0 drawer flex flex-col inner-drawer\"\n          :class=\"[topAlignment, backgroundColourClass, collapseClass, size]\">\n          <div class=\"flex-1 overflow-auto\">\n            <div class=\"px-5 md:px-6 pt-5 md:pt-6 pb-3\">\n              <div class=\"md:p-3 flex flex-col\">\n                <div\n                  v-if=\"!requiresInteraction\"\n                  class=\"self-end\"\n                  @click=\"manuallyCloseDrawer\">\n                  <svg-icon\n                    class=\"cursor-pointer\"\n                    height=\"24px\"\n                    width=\"24px\"\n                    name=\"close-display\" />\n                </div>\n                <slot name=\"header\"></slot>\n              </div>\n            </div>\n            <div\n              v-if=\"$slots.content\"\n              class=\"px-5 md:px-6 pb-6\">\n              <div class=\"md:px-3\">\n                <slot name=\"content\"></slot>\n              </div>\n            </div>\n          </div>\n          <div v-if=\"$slots.controls\">\n            <slot name=\"controls\"></slot>\n          </div>\n        </div>\n      </drawer-transition>\n    </div>\n  </teleport>\n</template>\n\n<script>\nimport SvgIcon from \"@/app/javascript/components/shared/SvgIcon.vue\";\nimport DrawerTransition from \"@/app/javascript/components/transitions/DrawerTransition.vue\";\nimport FadeTransition from \"@/app/javascript/components/transitions/FadeTransition.vue\";\n\nexport default {\n  name: \"Drawer\",\n  components: {\n    SvgIcon,\n    DrawerTransition,\n    FadeTransition\n  },\n  props: {\n    isOpen: {\n      type: Boolean,\n      required: true\n    },\n    transitionFromBottom: {\n      type: Boolean,\n      default: false\n    },\n    requiresInteraction: {\n      type: Boolean,\n      default: false\n    },\n    showBackdrop: {\n      type: Boolean,\n      default: true\n    },\n    preventBackgroundClose: {\n      type: Boolean,\n      default: false\n    },\n    fullHeight: {\n      type: Boolean,\n      default: false\n    },\n    backgroundColour: {\n      type: String,\n      default: \"paper-1\"\n    },\n    quickCollapse: {\n      type: Boolean,\n      default: false\n    },\n    size: {\n      type: String,\n      default: \"normal\"\n    }\n  },\n  emits: [\"closeDrawer\"],\n  data() {\n    return {\n      collapsed: false\n    };\n  },\n  computed: {\n    backdropClasses() {\n      return {\n        \"bg-ink\": this.showBackdrop,\n        \"opacity-backdrop\": this.showBackdrop && !this.collapsed,\n        \"opacity-25\": this.collapsed\n      };\n    },\n    collapseClass() {\n      return this.collapsed ? \"collapsed\" : \"\";\n    },\n    transitionDirection() {\n      if (this.transitionFromBottom) return \"bottom\";\n      return \"right\";\n    },\n    topAlignment() {\n      return this.transitionFromBottom ? this.bottomDrawerHeight : \"top-0\";\n    },\n    backgroundColourClass() {\n      return `bg-${this.backgroundColour}`;\n    },\n    bottomDrawerHeight() {\n      if (this.fullHeight) {\n        return \"h-full\";\n      }\n      return \"max-height\";\n    }\n  },\n  watch: {\n    isOpen(newVal) {\n      const mmCornerPeel = document.querySelector(\".mm-corner-peel\");\n      const emailPopUp = document.querySelector(\".marketing-pop-up-container\");\n\n      this.toggleHiddenClass(mmCornerPeel, newVal);\n      this.toggleHiddenClass(emailPopUp, newVal);\n      this.toggleChatVisibility(newVal);\n\n      document.documentElement.classList.toggle(\"overflow-y-hidden\", newVal);\n      document.body.classList.toggle(\"overflow-y-hidden\", newVal);\n      document.documentElement.classList.toggle(\"md:overflow-y-unset\", newVal);\n      document.body.classList.toggle(\"md:overflow-y-unset\", newVal);\n    }\n  },\n  created() {\n    const onKeydown = e => {\n      if (this.isOpen && e.keyCode === 27) {\n        this.$emit(\"closeDrawer\");\n      } else if (e.key === \"Alt\" && this.quickCollapse) {\n        this.collapsed = true;\n      }\n    };\n\n    const onKeyUp = () => {\n      this.collapsed = false;\n    };\n    document.addEventListener(\"keydown\", onKeydown);\n    document.addEventListener(\"keyup\", onKeyUp);\n  },\n  methods: {\n    toggleHiddenClass(element, isHidden) {\n      if (element) {\n        if (isHidden) {\n          element.classList.add(\"hidden\");\n        } else {\n          element.classList.remove(\"hidden\");\n        }\n      }\n    },\n    toggleChatVisibility(isHidden) {\n      if (isHidden) {\n        document.body.classList.add(\"hide-chat\");\n      } else {\n        document.body.classList.remove(\"hide-chat\");\n      }\n    },\n    manuallyCloseDrawer() {\n      if (!this.requiresInteraction) {\n        this.$emit(\"closeDrawer\");\n      }\n    },\n    closeDrawerFromBackground() {\n      if (!this.preventBackgroundClose) {\n        this.manuallyCloseDrawer();\n      }\n    }\n  }\n};\n</script>\n\n<style lang=\"scss\">\n.drawer {\n  width: 100%;\n  z-index: 1000001;\n\n  @media (min-width: $screen-md-min) {\n    z-index: 1000001;\n    overflow-y: scroll;\n    overflow-x: hidden;\n\n    &.normal {\n      width: 400px;\n    }\n\n    &.extra-large {\n      width: 900px;\n    }\n  }\n}\n\n.drawer-backdrop {\n  transition: opacity 0.1s;\n  z-index: 1000000;\n}\n\n.drawer-bottom {\n  .max-height {\n    max-height: calc(100vh - 80px);\n  }\n}\n\n.inner-drawer {\n  transition: transform 0.3s ease-in-out;\n}\n\n.collapsed {\n  transform: translate(100%, 0);\n}\n</style>\n"],"names":["_sfc_main","SvgIcon","DrawerTransition","FadeTransition","newVal","mmCornerPeel","emailPopUp","onKeydown","e","onKeyUp","element","isHidden","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_5","_createBlock","_Teleport","_createElementVNode","_normalizeClass","$props","_createVNode","_component_fade_transition","_withCtx","_createElementBlock","$options","args","_createCommentVNode","_component_drawer_transition","_component_svg_icon","_renderSlot","_ctx","_openBlock","_hoisted_4","_hoisted_6"],"mappings":"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"}