{"version":3,"mappings":";ocAsEA,MAAMA,EAAaC,EAAqB,IAAMC,EAAA,WAAO,0BAAsC,+BAAC,EAEtFC,EAAQC,EASR,CAAE,SAAAC,EAAU,WAAAC,CAAW,EAAIC,EAAc,EAEzCC,EAAeC,EAAS,IAAM,CAClC,MAAMC,EAAQ,IAAI,KAAK,eAAe,QAAS,CAAE,MAAO,OAAQ,EAAE,OAAOP,EAAM,SAAS,EAClFQ,EAAU,IAAI,KAAK,eAAe,QAAS,CAAE,QAAS,OAAQ,EAAE,OAAOR,EAAM,SAAS,EAErF,OACL,IAAKA,EAAM,UAAU,UAAU,SAAS,EACxC,QAASA,EAAM,UAAU,cAAc,MAAM,GAAG,EAAE,CAAC,EACnD,MAAAO,EACA,QAAAC,EACA,KAAMR,EAAM,UAAU,cAAc,SAAS,CAC/C,EACD,EACKS,EAAgBH,EAAS,IACtBD,EAAa,MAAM,UAAYL,EAAM,OAAO,CAAC,EAAE,MAAM,OAC7D,EAED,SAASU,EAAUC,EAAsB,CACvC,OACGA,IAAQ,GAAK,CAACF,EAAc,OAC5BE,EAAM,GAAKX,EAAM,OAAOW,CAAG,EAAE,MAAM,UAAYX,EAAM,OAAOW,EAAM,CAAC,EAAE,MAAM,QAIhF,SAASC,EAAWD,EAAsB,CACxC,GAAIA,IAAQ,EAAG,CAET,GAAAE,EAAaR,EAAa,MAAOL,EAAM,OAAO,CAAC,EAAE,KAAK,EACjD,SAIL,IAACa,EAAaR,EAAa,MAAOL,EAAM,OAAO,CAAC,EAAE,KAAK,EAEzD,OAAOK,EAAa,MAAM,QAAUL,EAAM,OAAO,CAAC,EAAE,MAAM,KAC5D,CAGK,OAAAA,EAAM,OAAOW,CAAG,EAAE,MAAM,QAAUX,EAAM,OAAOW,EAAM,CAAC,EAAE,MAAM,MAG9D,SAAAE,EAAaC,EAA2BC,EAAuC,CAC/E,OAAAD,EAAM,MAAQC,EAAS","names":["EventTypes","defineAsyncComponent","__vitePreload","props","__props","dateTime","formatTime","useDateFormat","firstDateObj","computed","month","weekday","hasEventToday","isNewDate","key","isNewMonth","isTheSameDay","today","tomorrow"],"ignoreList":[],"sources":["../../src/components/calendar/CalendarMonth.vue"],"sourcesContent":["<template>\n  <section>\n    <article v-if=\"!hasEventToday\" :class=\"[$style.month, $style.grid]\">\n      <h2>\n        <time\n          :class=\"$style.date\"\n          :datetime=\"`${firstDateObj.isoDate} 00:00:00`\"\n          v-html=\"`${firstDateObj.month} ${firstDateObj.year}`\"\n        ></time>\n      </h2>\n      <h3>\n        <time :datetime=\"`${firstDateObj.isoDate} 00:00:00`\">\n          {{ firstDateObj.weekday }} {{ firstDateObj.day }}\n        </time>\n      </h3>\n      <header :class=\"$style.event\">\n        <p>There are no events scheduled for this day.</p>\n      </header>\n    </article>\n    <article\n      v-for=\"(event, key) in events\"\n      :key=\"key\"\n      :class=\"[{ [$style.day]: isNewDate(key), [$style.month]: isNewMonth(key) }, $style.grid]\"\n    >\n      <h2 v-if=\"isNewMonth(key)\">\n        <time :class=\"$style.date\" :datetime=\"dateTime(event.start)\">\n          {{ `${event.start.month} ${event.start.year}` }}\n        </time>\n      </h2>\n      <h3 v-if=\"key === 0 || isNewDate(key)\">\n        <time :datetime=\"dateTime(event.start)\">\n          {{ event.start.weekday }} {{ event.start.day }}\n        </time>\n      </h3>\n      <header :class=\"$style.event\">\n        <router-link\n          :class=\"$style.title\"\n          :to=\"{ name: 'CalendarEvent', params: { slug: event.eventSlug } }\"\n          :ga4-event=\"\n            JSON.stringify({\n              click_type: 'title',\n              component: 'CalendarMonth',\n              content_group: 'calendar',\n              gtm_tag: 'link',\n              link_text: `${event.title}`,\n              link_url: `${event.eventSlug}`,\n            })\n          \"\n        >\n          <h4 v-html=\"event.title\"></h4>\n        </router-link>\n        <time v-if=\"!event.hideStartTime\" :class=\"$style.time\" :datetime=\"dateTime(event.start)\">\n          {{ `${formatTime(event.start)} ${event.timezoneAbbr}` }}\n        </time>\n        <p v-if=\"event.specificText && event.hideStartTime\">{{ event.specificText }}</p>\n        <p v-if=\"showDesc\" v-html=\"event.excerpt\"></p>\n        <EventTypes\n          v-if=\"event.eventTypes && Object.keys(event.eventTypes.nodes).length\"\n          :types=\"event.eventTypes.nodes\"\n        ></EventTypes>\n      </header>\n    </article>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, defineAsyncComponent } from 'vue';\nimport { EventInterface, EventDateInterface } from '@/types/event.interface';\nimport { useDateFormat } from '@/composables/Common.js';\n\nconst EventTypes = defineAsyncComponent(() => import('@/components/calendar/EventTypes.vue'));\n\nconst props = withDefaults(\n  defineProps<{\n    events: EventInterface[];\n    firstDate: Date;\n    showDesc?: boolean;\n  }>(),\n  { showDesc: false }\n);\n\nconst { dateTime, formatTime } = useDateFormat();\n\nconst firstDateObj = computed(() => {\n  const month = new Intl.DateTimeFormat('en-US', { month: 'long' }).format(props.firstDate);\n  const weekday = new Intl.DateTimeFormat('en-US', { weekday: 'long' }).format(props.firstDate);\n\n  return {\n    day: props.firstDate.getDate().toString(),\n    isoDate: props.firstDate.toISOString().split('T')[0],\n    month,\n    weekday,\n    year: props.firstDate.getFullYear().toString(),\n  };\n});\nconst hasEventToday = computed(() => {\n  return firstDateObj.value.isoDate === props.events[0].start.isoDate;\n});\n\nfunction isNewDate(key: number): boolean {\n  return (\n    (key === 0 && !hasEventToday.value) ||\n    (key > 0 && props.events[key].start.isoDate !== props.events[key - 1].start.isoDate)\n  );\n}\n\nfunction isNewMonth(key: number): boolean {\n  if (key === 0) {\n    // Has event the day selected.\n    if (isTheSameDay(firstDateObj.value, props.events[0].start)) {\n      return true;\n    }\n\n    // Does not have an event on the selected day.\n    if (!isTheSameDay(firstDateObj.value, props.events[0].start)) {\n      // Display new month only if the first event is a different month than the selected date.\n      return firstDateObj.value.month !== props.events[0].start.month;\n    }\n  }\n\n  return props.events[key].start.month !== props.events[key - 1].start.month;\n}\n\nfunction isTheSameDay(today: EventDateInterface, tomorrow: EventDateInterface): boolean {\n  return today.day === tomorrow.day;\n}\n</script>\n\n<style lang=\"scss\" module>\n.date {\n  display: block;\n}\n\n.event {\n  @include space-24-32-above;\n\n  :global(.tags) {\n    @include space-0-above;\n  }\n\n  time {\n    display: block;\n  }\n}\n\n.month {\n  margin: 4rem 0 0 0;\n\n  h2,\n  h3 {\n    @include space-24-32-above;\n  }\n}\n\n.time {\n  @include subtitle-2;\n  @include space-0-above;\n}\n\n.title {\n  display: inline-block;\n  text-decoration: none;\n\n  &:hover {\n    text-decoration: underline;\n  }\n\n  h4 {\n    margin-top: 0;\n    width: fit-content;\n  }\n}\n\n@media (min-width: $break-point) {\n  .event {\n    grid-column: 5 / span 8;\n  }\n\n  .grid {\n    @include grid;\n\n    h2 {\n      grid-column: span 12;\n    }\n\n    h3 {\n      grid-column: span 4;\n    }\n  }\n}\n</style>\n"],"file":"assets/CalendarMonth-9Pls6t5G.js"}