{"version":3,"mappings":";maA+DA,MAAMA,EAAiBC,EACrB,IAAAC,EAAA,IAAM,OAAO,8BAAwC,+BACvD,EAEMC,EAAQC,EAMRC,EAASC,EAAwB,IAAI,EACrCC,EAAQD,EAAI,EAAK,EACjBE,EAAQF,EAAI,EAAK,EAEjBG,EAAQC,EAAS,EAEjB,CAAE,gBAAAC,CAAgB,EAAIC,EAAQ,EAC9B,CAAE,eAAAC,CAAe,EAAIC,EAAgB,EACrC,CAAE,IAAAC,CAAI,EAAIC,EAAoB,EAE9BC,EAAYC,EAAS,IAAM,WAAWH,CAAG,EAAE,EAC3CI,EAAWD,EAAS,IAAM,UAAUH,CAAG,EAAE,EACzCK,EAAgBF,EAAS,IACzBV,EAAM,MACDL,EAAM,MAAM,MAAM,GAAG,EAAE,KAAK,GAAG,GAGtBA,EAAM,UAAY,GAAGA,EAAM,MAAM,QAAQ,KAAM,EAAE,EAAE,MAAM,GAAG,EAAE,MAAO,UAEtE,MAAM,GAAG,EAAE,KAAK,GAAG,CACrC,EACKkB,EAAkBH,EAAS,IAC1Bf,EAAM,SAIJA,EAAM,SAHJ,GAAGA,EAAM,MAAM,QAAQ,KAAM,EAAE,EAAE,MAAM,GAAG,EAAE,OAAO,OAI7D,EACKmB,EAAeJ,EAAS,IAAMf,EAAM,MAAM,QAAQ,KAAM,EAAE,CAAC,EAEjEoB,EAAU,IAAM,CACVd,EAAM,MAAQe,EAAWf,EAAM,IAAI,IACrCD,EAAM,MAAQ,GAChB,CACD,EAED,SAASiB,GAAmB,CAM1B,GALIlB,EAAM,QACRI,EAAgBM,CAAS,EACzBV,EAAM,MAAQ,IAGZE,EAAM,MAAQe,EAAWf,EAAM,IAAI,EAAG,CACxC,MAAMiB,EAAOjB,EAAM,KAAK,UAAU,CAAC,EAC7BkB,EAAS,SAAS,kBAAkBD,CAAI,EAE1CC,EAAO,SACMd,EAAAc,EAAO,CAAC,CAAC,EACxB,sBAAsB,IAAM,CAC1B,sBAAsB,IAAM,CACnBA,EAAA,CAAC,EAAE,MAAM,EACjB,EACF,EACH,CACF,CAGF,SAASC,GAAoB,OAC3B,KAAM,CAAE,IAAKC,CAAA,EAAY,SAAS,KAAK,sBAAsB,EACvD,CAAE,IAAAC,CAAQ,GAAAC,EAAA1B,EAAO,QAAP,YAAA0B,EAAc,wBACxBC,EAAS,KAAK,IAAIH,CAAO,EAAI,KAAK,IAAIC,CAAG,EAExC,gBAAS,EAAGE,CAAM,EACnBxB,EAAA,MAAQ,CAACA,EAAM,MAGvB,SAASgB,EAAWS,EAAuB,CACnC,MAAAC,EAAOD,EAAK,UAAU,CAAC,EAE7B,OAAO9B,EAAM,QAAQ,SAAS,SAAS+B,CAAI,GAAG","names":["ProcessContent","defineAsyncComponent","__vitePreload","props","__props","drawer","ref","keyed","state","route","useRoute","focusFirstChild","useA11y","scrollToAnchor","useScrollAnchor","uid","useUniqueIdentifier","contentId","computed","handleId","preparedTitle","treatedEndTitle","treatedTitle","onMounted","isInDrawer","afterEnter","name","target","closeDrawer","bodyTop","top","_a","offset","hash","note"],"ignoreList":[],"sources":["../../src/components/shortcodes/ContentDrawer.vue"],"sourcesContent":["<template>\n  <section ref=\"drawer\" :class=\"[{ [$style.show]: state }, $style.drawer]\">\n    <button\n      v-if=\"!state\"\n      :id=\"handleId\"\n      :aria-controls=\"contentId\"\n      aria-expanded=\"false\"\n      class=\"button-reset button-tertiary plus-sign\"\n      :ga4-event=\"\n        JSON.stringify({\n          click_type: 'show',\n          component: 'ContentDrawer',\n          content_group: 'shortcode',\n          gtm_tag: 'interaction',\n          link_text: `${preparedTitle}`,\n        })\n      \"\n      type=\"button\"\n      @keydown.enter=\"keyed = !keyed\"\n      @click.prevent=\"state = !state\"\n    >\n      {{ treatedTitle }}\n    </button>\n    <transition name=\"drawer\" @after-enter=\"afterEnter\">\n      <ProcessContent\n        v-if=\"state && props.content\"\n        :id=\"contentId\"\n        :aria-labelledby=\"handleId\"\n        :content=\"props.content\"\n        wrapper=\"section\"\n      ></ProcessContent>\n      <section v-else-if=\"!props.content\" :id=\"contentId\" :aria-labelledby=\"handleId\">\n        <slot></slot>\n      </section>\n    </transition>\n    <button\n      v-if=\"state\"\n      :id=\"handleId\"\n      :aria-controls=\"contentId\"\n      aria-expanded=\"true\"\n      class=\"button-reset button-tertiary minus-sign\"\n      :ga4-event=\"\n        JSON.stringify({\n          click_type: 'hide',\n          component: 'ContentDrawer',\n          content_group: 'shortcode',\n          gtm_tag: 'interaction',\n          link_text: `${preparedTitle}`,\n        })\n      \"\n      type=\"button\"\n      @click.prevent=\"closeDrawer()\"\n    >\n      {{ treatedEndTitle }}\n    </button>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent, onMounted, ref } from 'vue';\nimport { useA11y, useScrollAnchor, useUniqueIdentifier } from '@/composables/Common.js';\nimport { useRoute } from 'vue-router';\n\nconst ProcessContent = defineAsyncComponent(\n  () => import('@/components/common/ProcessContent.vue')\n);\n\nconst props = defineProps<{\n  content?: string;\n  endTitle?: string;\n  title: string;\n}>();\n\nconst drawer = ref<HTMLElement | null>(null);\nconst keyed = ref(false);\nconst state = ref(false);\n\nconst route = useRoute();\n\nconst { focusFirstChild } = useA11y();\nconst { scrollToAnchor } = useScrollAnchor();\nconst { uid } = useUniqueIdentifier();\n\nconst contentId = computed(() => `content-${uid}`);\nconst handleId = computed(() => `handle-${uid}`);\nconst preparedTitle = computed(() => {\n  if (state.value) {\n    return props.title.split(' ').join('-');\n  }\n\n  const lessTitle = props.endTitle || `${props.title.replace(/\"/g, '').split(' ').shift()} Less`;\n\n  return lessTitle.split(' ').join('-');\n});\nconst treatedEndTitle = computed(() => {\n  if (!props.endTitle) {\n    return `${props.title.replace(/\"/g, '').split(' ').shift()} Less`;\n  }\n\n  return props.endTitle;\n});\nconst treatedTitle = computed(() => props.title.replace(/\"/g, ''));\n\nonMounted(() => {\n  if (route.hash && isInDrawer(route.hash)) {\n    state.value = true;\n  }\n});\n\nfunction afterEnter(): void {\n  if (keyed.value) {\n    focusFirstChild(contentId);\n    keyed.value = false;\n  }\n\n  if (route.hash && isInDrawer(route.hash)) {\n    const name = route.hash.substring(1);\n    const target = document.getElementsByName(name);\n\n    if (target.length) {\n      scrollToAnchor(target[0]);\n      requestAnimationFrame(() => {\n        requestAnimationFrame(() => {\n          target[0].focus();\n        });\n      });\n    }\n  }\n}\n\nfunction closeDrawer(): void {\n  const { top: bodyTop } = document.body.getBoundingClientRect();\n  const { top } = drawer.value?.getBoundingClientRect();\n  const offset = Math.abs(bodyTop) - Math.abs(top);\n\n  window.scrollTo(0, offset);\n  state.value = !state.value;\n}\n\nfunction isInDrawer(hash: string): boolean {\n  const note = hash.substring(1);\n\n  return props.content.includes(`name=\"${note}\"`);\n}\n</script>\n\n<style lang=\"scss\" module>\n.drawer {\n  button {\n    margin-top: 0.75rem;\n  }\n\n  h3 {\n    margin-top: 1rem;\n  }\n\n  p:first-child {\n    margin-top: 1rem;\n  }\n\n  section {\n    max-height: 0;\n    overflow-y: hidden;\n  }\n\n  &.show {\n    section {\n      max-height: 100%;\n      min-height: 0;\n      overflow-y: visible;\n    }\n  }\n}\n</style>\n"],"file":"assets/ContentDrawer-Z0bojixA.js"}