{"version":3,"mappings":";0oBAEO,MAAMA,EAAqBC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EA+CrBC,GAA2BD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8RC8TzBE,GAAA,CACb,YAAYC,EAAQC,EAAc,CAChC,OAAO,IAAI,QAAc,CAACC,EAASC,IAAW,CAC5CF,EACG,aAAa,CACZ,MAAOL,EACP,UAAW,CACT,KAAMI,EAAO,KACf,CACD,EACA,KAAK,IAAME,GAAS,EACpB,MAAOE,GAAQD,EAAOC,CAAG,CAAC,EAC9B,EAEL,uEAzMA,MAAMC,EAAgBC,EAAqB,IAAMC,EAAA,WAAO,6BAAyC,+BAAC,EAC5FC,EAAgBF,EACpB,IAAAC,EAAA,IAAM,OAAO,6BAA2C,+BAC1D,EAEME,EAAQC,EAKRC,EAAQC,GAAS,EAEjB,CAAE,WAAAC,EAAY,YAAAC,EAAa,eAAAC,CAAA,EAAmBC,GAAc,EAC5D,CAAE,YAAAC,CAAY,EAAIC,EAAe,EACjC,CAAE,OAAAC,CAAO,EAAIC,EAAe,EAC5B,CAAE,mBAAAC,EAAoB,aAAAC,CAAa,EAAIC,EAAY,EACnDC,EAAQC,GAAa,EAErBC,EAAcC,EAAI,EAAE,EACpBC,EAAoBD,EAAI,EAAE,EAC1BE,EAAoBF,EAAI,EAAE,EAC1BG,EAAQH,EAAoB,EAAE,EAC9BI,EAAmBJ,EAAI,IAAI,EAC3BK,EAAcL,EAAI,EAAE,EACpBM,EAAoBN,EAAI,EAAE,EAC1BO,EAAeP,EAAIlB,EAAM,IAAI,EAElB0B,EAAS,CACxB,OAASC,GAAS,CACZA,EAAK,OAAS,OAAO,KAAKA,EAAK,KAAK,EAAE,SACxCN,EAAM,MAAQM,EAAK,MACNA,IAAK,MAAM,KAAK,EACVA,IAAK,MAAM,OAAO,EAC1BC,GAAA,EACHC,EAAA,IAGN,CAACF,EAAK,OAAS,OAAO,KAAKA,EAAK,KAAK,EAAE,SAAW,IACpDnB,EAAY,gBAAiBR,EAAM,KAAM,GAAM,WAAW,CAE9D,EACA,MAAOb,EACP,UAAW,CAAE,KAAMa,EAAM,IAAK,CAC/B,GAEK,MAAA8B,EAAYC,GAAS,IACrBV,EAAM,MAAM,QACP,CAAE,QAASA,EAAM,MAAM,QAAQ,UAAW,EAG5C,EACR,EAEK,CACJ,KAAMW,GACN,MAAAC,EACA,QAAAJ,GACEH,EAAS,CACX,aAAc,GACd,OAASC,GAAS,CAChB,GAAIA,EAAM,CACRR,EAAkB,MAAQ,CAAC,EACfI,EAAA,MAAQI,EAAK,iBAAiB,MAC1C,OAAO,KAAKJ,EAAY,KAAK,EAAE,IAAKW,GAAQ,CACpC,MAAAC,EAAUZ,EAAY,MAAMW,CAAG,GAErBC,EAAQ,MAAM,SAA1B,SAAiDA,EAAQ,MAAM,SAA3B,YACpBhB,EAAA,MAAM,KAAKgB,CAAO,EAGpCX,EAAkB,MAAMW,EAAQ,MAAM,OAAO,EAAIA,EAGjDlB,EAAY,MAAM,KAAKkB,EAAQ,MAAM,OAAO,EAC9C,CACD,EAED,MAAMC,EAAcnB,EAAY,MAAMA,EAAY,MAAM,OAAS,CAAC,EAc9D,GAXAjB,EAAM,MAAQiB,EAAY,MAAM,QAAQjB,EAAM,IAAI,EAAI,KACxDyB,EAAa,MAAQzB,EAAM,MAIzBA,EAAM,MAAQA,EAAM,KAAOoC,IAC7BX,EAAa,MAAQW,EACb,kBAAU,GAAI,KAAM,UAAUlC,EAAM,OAAO,IAAI,IAAIkC,CAAW,EAAE,GAItEpC,EAAM,MAAQA,EAAM,KAAOoC,GAAenB,EAAY,MAAM,QAAQjB,EAAM,IAAI,IAAM,GAAI,CAC1F,IAAIqC,EAAO,GAECpB,EAAA,MAAM,QAASqB,GAAS,CAC9BD,GAIArC,EAAM,KAAOsC,IACfb,EAAa,MAAQa,EACb,kBAAU,GAAI,KAAM,UAAUpC,EAAM,OAAO,IAAI,IAAIoC,CAAI,EAAE,EAC1DD,EAAA,GACT,CACD,EAIErC,EAAM,OACIyB,EAAA,MAAQR,EAAY,MAAM,CAAC,GAG1CG,EAAkB,MAAQD,EAAkB,MAAM,OAAO,CAACoB,EAAQC,KAC5Df,EAAa,QAAUe,EAAK,MAAM,SACpCD,EAAO,KAAKC,CAAI,EAGXD,GACN,EAAE,EAGFZ,GACHnB,EAAY,gBAAiByB,CAAK,CAEtC,EACA,MAAO5C,GACP,UAAWyC,CAAA,CACZ,EAEKW,GAAAhB,EAAeiB,GAAQ,CAC3BtB,EAAkB,MAAQD,EAAkB,MAAM,OAAO,CAACoB,EAAQC,KAC5DE,IAAQF,EAAK,MAAM,SACrBD,EAAO,KAAKC,CAAI,EAGXD,GACN,EAAE,EAEDjB,EAAiB,QAAUoB,IACzBpB,EAAiB,OACX,kBAAU,GAAI,KAAM,UAAUpB,EAAM,OAAO,IAAI,IAAIwC,CAAG,EAAE,EAGlEpB,EAAiB,MAAQoB,EAC3B,CACD,EAOD,SAASC,EAAYC,EAAoC,CACnD,IAAAC,EAAM,gBAAgB9B,EAAM,IAAI,KACpC,OAAA8B,GAAmBD,EAAW,MAAM,SAA7B,QAAsC,QAAUA,EAAW,MAAM,QACjEC,GAAA,UACPA,GAAO,GAAGxC,EAAY,CAAC,CAAE,MAAOuC,EAAW,OAAS,CAAE,MAAOA,EAAW,GAAI,CAAC,CAAC,CAAC,UAE1EA,EAAW,gBACdC,GAAO,gBAAgB9B,EAAM,IAAI,gBAAgBT,EAAesC,CAAU,CAAC,WAGtEC,CAAA,CAGA,SAAAC,EAAkBF,EAA4BG,EAAW,GAAc,CAC9E,OAAOA,EACH,GAAG3C,EAAWwC,EAAW,KAAK,CAAC,KAAKtC,EAAesC,CAAU,CAAC,GAC9D,GAAGxC,EAAWwC,EAAW,KAAK,CAAC,GAG5B,SAAAI,EAAad,EAAae,EAAwB,CAKzD,GAJIA,EAAS,GAAKA,GAAU,GAAKf,EAAM,EAAIe,GAIvCA,EAAS,GAAKf,EAAM,IAAMe,EAAS,EAC9B,cAGT,GAAIA,EAAS,GAAKf,EAAM,EAAIe,EAAS,EAC5B,UACT","names":["calendarEventQuery","gql","calendarOccurrencesQuery","__default__","params","villusClient","resolve","reject","err","AddToCalendar","defineAsyncComponent","__vitePreload","ContentDrawer","props","__props","route","useRoute","formatDate","formatDates","formatTimeSpan","useDateFormat","handleError","useHandleError","parent","useRouteParent","setMetaDescription","setMetaTitle","useMetaData","style","useCssModule","activeDates","ref","activeOccurrences","currentOccurrence","event","lastSelectedDate","occurrences","occurrencesByDate","selectedDate","useQuery","data","dataLoaded","execute","queryVars","computed","queryData","error","key","tempObj","lastDateKey","skip","date","result","item","watch","val","getDateline","occurrence","str","getOccurrenceDate","showTime","getSeparator","length"],"ignoreList":[],"sources":["../../src/queries/GetCalendarEvent.js","../../src/components/calendar/CalendarEvent.vue"],"sourcesContent":["import gql from 'graphql-tag';\n\nexport const calendarEventQuery = gql`\n query getEvent($slug: ID!) {\n event(id: $slug, idType: SLUG) {\n content\n description\n eventId\n eventTypes {\n nodes {\n name\n slug\n }\n }\n eventSerieses {\n nodes {\n name\n slug\n }\n }\n excerpt\n featuredImage {\n node {\n altText\n description\n mediaDetails {\n height\n width\n }\n sourceUrl\n }\n }\n featuredImageWidth\n imageSrcset\n multisession\n multisessionCta {\n label\n link\n }\n title\n venues {\n nodes {\n name\n }\n }\n }\n }\n`;\n\nexport const calendarOccurrencesQuery = gql`\n query getOccurrences($eventId: String) {\n eventOccurrences(first: 1000, where: { withDrafts: true, eventId: $eventId }) {\n nodes {\n calendarLinks {\n key\n value\n }\n end {\n day\n meridiem\n month\n time\n timezone\n year\n weekday\n }\n excerpt\n eventSlug\n eventTypes {\n nodes {\n name\n slug\n }\n }\n featuredImage {\n node {\n altText\n sourceUrl\n }\n }\n hideEventTimes\n hideStartTime\n multisession\n soldOutLabel\n specificText\n start {\n day\n isoDate\n meridiem\n month\n status\n time\n timezone\n year\n weekday\n }\n title\n ticketLabel\n ticketLink\n timezoneAbbr\n venue\n }\n pageInfo {\n hasNextPage\n hasPreviousPage\n startCursor\n endCursor\n }\n }\n }\n`;\n","<template>\n <article v-if=\"event && Object.keys(event).length\">\n <PostFeaturedImage\n v-if=\"event.featuredImage\"\n :featured-image=\"event.featuredImage.node\"\n :srcset=\"event.imageSrcset\"\n :is-wide=\"event.featuredImageWidth === 'wide'\"\n ></PostFeaturedImage>\n <header>\n <nav :class=\"$style.back\">\n <BackLink\n component=\"CalendarEvent\"\n group=\"calendar\"\n label=\"Calendar\"\n name=\"CalendarSection\"\n ></BackLink>\n </nav>\n <div :class=\"$style.content\">\n <h1 v-html=\"event.title\"></h1>\n <p\n v-if=\"event && event.eventSerieses && event.eventSerieses.nodes.length\"\n class=\"heading-4 space-0-above\"\n >\n A part of the\n <span v-for=\"(series, key) in event.eventSerieses.nodes\" :key=\"key\">\n <router-link\n :to=\"{ name: 'CalendarSeries', params: { type: 'series', slug: series.slug } }\"\n :ga4-event=\"\n JSON.stringify({\n click_type: 'back_link',\n component: 'CalendarEvent',\n content_group: 'calendar',\n gtm_tag: 'interaction',\n link_text: 'Back to Calendar',\n })\n \"\n v-html=\"series.name\"\n ></router-link>\n {{ getSeparator(key, event.eventSerieses.nodes.length) }}\n </span>\n series.\n </p>\n </div>\n </header>\n <div :class=\"$style.content\">\n <section :class=\"$style.dates\">\n <div>\n <h2>Event Dates</h2>\n <Datepicker\n v-model:selectedDate=\"selectedDate\"\n :class=\"$style.datepicker\"\n :active-dates=\"activeDates\"\n :is-embedded=\"true\"\n ></Datepicker>\n </div>\n <aside v-if=\"Object.keys(currentOccurrence).length\" :class=\"$style.details\">\n <div v-for=\"(occurrence, key) in currentOccurrence\" :key=\"key\" :class=\"$style.detail\">\n <time\n v-if=\"!occurrence.hideEventTimes\"\n :class=\"$style.occurrence\"\n v-html=\"getDateline(occurrence)\"\n ></time>\n <p v-if=\"event.description\" :class=\"$style.description\" v-html=\"event.description\"></p>\n <p v-if=\"occurrence.specificText\" v-html=\"occurrence.specificText\"></p>\n <address v-if=\"occurrence.venue\" v-html=\"occurrence.venue\"></address>\n <a\n v-if=\"occurrence.soldOutLabel\"\n class=\"button-primary\"\n disabled=\"disabled\"\n v-html=\"occurrence.soldOutLabel\"\n ></a>\n <a\n v-if=\"!occurrence.soldOutLabel && !event.multisession && occurrence.ticketLabel\"\n class=\"button-primary\"\n :href=\"occurrence.ticketLink\"\n :ga4-event=\"\n JSON.stringify({\n click_type: 'cta',\n component: 'CalendarEvent',\n content_group: 'calendar',\n gtm_tag: 'link',\n link_text: `${occurrence.ticketLabel}`,\n link_url: `${occurrence.ticketLink}`,\n })\n \"\n v-html=\"occurrence.ticketLabel\"\n ></a>\n <a\n v-if=\"event.multisessionCta.link\" class=\"button-primary\" :href=\"event.multisessionCta.link\"\n :ga4-event=\"\n JSON.stringify({\n click_type: 'sold_out',\n component: 'CalendarEvent',\n content_group: 'calendar',\n gtm_tag: 'interaction',\n link_text: `${occurrence.soldOutLabel}`,\n })\n \"\n v-html=\"event.multisessionCta.label\"\n ></a>\n <AddToCalendar\n v-if=\"!occurrence.soldOutLabel\"\n :links=\"occurrence.calendarLinks\"\n :slug=\"slug\"\n >\n </AddToCalendar>\n </div>\n </aside>\n </section>\n </div>\n <ProcessContent\n :class=\"$style.content\"\n :content=\"event.content\"\n wrapper=\"section\"\n ></ProcessContent>\n <div :class=\"$style.content\">\n <p v-if=\"event && event.eventTypes && Object.keys(event.eventTypes.nodes).length\">\n Explore other\n <span v-for=\"(type, key) in event.eventTypes.nodes\" :key=\"key\">\n <router-link\n :to=\"{ name: 'CalendarSection', query: { q: type.slug } }\"\n :ga4-event=\"\n JSON.stringify({\n click_type: 'link',\n component: `${parent}`,\n content_group: 'calendar',\n gtm_tag: 'interaction',\n link_text: `${type.name}`,\n })\n \"\n >\n {{ type.name }}\n </router-link>\n {{ getSeparator(key, event.eventTypes.nodes.length) }}\n </span>\n events.\n </p>\n <aside v-if=\"event.multisession && activeOccurrences.length > 1\">\n <p>\n This is a multi-session event, you must purchase tickets to all classes to attend the\n program.\n </p>\n </aside>\n <ContentDrawer\n v-if=\"event.multisession && activeOccurrences.length > 1\"\n :class=\"$style.upcoming\"\n :title=\"'Show Upcoming Dates'\"\n >\n <ul>\n <li v-for=\"(item, key) in activeOccurrences\" :key=\"key\">\n <h2\n v-if=\"item.multisession\"\n v-html=\"item.specificText ? item.specificText : `Session ${key + 1}`\"\n ></h2>\n <time v-html=\"getOccurrenceDate(item, !item.hideEventTimes)\"></time>\n </li>\n </ul>\n </ContentDrawer>\n </div>\n </article>\n</template>\n\n<script setup lang=\"ts\">\nimport BackLink from '@/components/common/BackLink.vue';\nimport { calendarEventQuery, calendarOccurrencesQuery } from '@/queries/GetCalendarEvent';\nimport { computed, defineAsyncComponent, ref, useCssModule, watch } from 'vue';\nimport {\n dataLoaded,\n useDateFormat,\n useHandleError,\n useMetaData,\n useRouteParent,\n} from '@/composables/Common.js';\nimport Datepicker from '@/components/calendar/DatePicker.vue';\nimport { EventInterface } from '@/types/event.interface';\nimport PostFeaturedImage from '@/components/common/PostFeaturedImage.vue';\nimport ProcessContent from '@/components/common/ProcessContent.vue';\nimport { useQuery } from 'villus';\nimport { useRoute } from 'vue-router';\n\nconst AddToCalendar = defineAsyncComponent(() => import('@/components/calendar/AddToCalendar.vue'));\nconst ContentDrawer = defineAsyncComponent(\n () => import('@/components/shortcodes/ContentDrawer.vue'),\n);\n\nconst props = defineProps<{\n date?: string;\n slug: string;\n}>();\n\nconst route = useRoute();\n\nconst { formatDate, formatDates, formatTimeSpan } = useDateFormat();\nconst { handleError } = useHandleError();\nconst { parent } = useRouteParent();\nconst { setMetaDescription, setMetaTitle } = useMetaData();\nconst style = useCssModule();\n\nconst activeDates = ref([]);\nconst activeOccurrences = ref([]);\nconst currentOccurrence = ref([]);\nconst event = ref<EventInterface>({});\nconst lastSelectedDate = ref(null);\nconst occurrences = ref([]);\nconst occurrencesByDate = ref({});\nconst selectedDate = ref(props.date);\n\nconst { data } = useQuery({\n onData: (data) => {\n if (data.event && Object.keys(data.event).length) {\n event.value = data.event;\n setMetaTitle(data.event.title);\n setMetaDescription(data.event.excerpt);\n dataLoaded();\n execute();\n }\n\n if (!data.event || Object.keys(data.event).length === 0) {\n handleError('CalendarEvent', props.slug, true, '/calendar');\n }\n },\n query: calendarEventQuery,\n variables: { slug: props.slug },\n});\n\nconst queryVars = computed(() => {\n if (event.value.eventId) {\n return { eventId: event.value.eventId.toString() };\n }\n\n return '';\n});\n\nconst {\n data: queryData,\n error,\n execute,\n} = useQuery({\n fetchOnMount: false,\n onData: (data) => {\n if (data) {\n activeOccurrences.value = [];\n occurrences.value = data.eventOccurrences.nodes;\n Object.keys(occurrences.value).map((key) => {\n const tempObj = occurrences.value[key];\n\n if ('today' === tempObj.start.status || 'future' === tempObj.start.status) {\n activeOccurrences.value.push(tempObj);\n\n // Date keyed object for datepicker selections.\n occurrencesByDate.value[tempObj.start.isoDate] = tempObj;\n\n // Enable only active dates in datepicker.\n activeDates.value.push(tempObj.start.isoDate);\n }\n });\n\n const lastDateKey = activeDates.value[activeDates.value.length - 1];\n\n // Date param is a valid occurrence date.\n if (props.date && activeDates.value.indexOf(props.date) > -1) {\n selectedDate.value = props.date;\n }\n\n // Date param is after last valid occurrence date.\n if (props.date && props.date > lastDateKey) {\n selectedDate.value = lastDateKey;\n history.pushState({}, null, `/event/${route.params.slug}/${lastDateKey}`);\n }\n\n // Date param is before first valid occurrence date.\n if (props.date && props.date < lastDateKey && activeDates.value.indexOf(props.date) === -1) {\n let skip = false;\n\n activeDates.value.forEach((date) => {\n if (skip) {\n return;\n }\n\n if (props.date < date) {\n selectedDate.value = date;\n history.pushState({}, null, `/event/${route.params.slug}/${date}`);\n skip = true;\n }\n });\n }\n\n // No date param, use first valid occurrence date.\n if (!props.date) {\n selectedDate.value = activeDates.value[0];\n }\n\n currentOccurrence.value = activeOccurrences.value.reduce((result, item) => {\n if (selectedDate.value === item.start.isoDate) {\n result.push(item);\n }\n\n return result;\n }, []);\n }\n\n if (!data) {\n handleError('CalendarEvent', error);\n }\n },\n query: calendarOccurrencesQuery,\n variables: queryVars,\n});\n\nwatch(selectedDate, (val) => {\n currentOccurrence.value = activeOccurrences.value.reduce((result, item) => {\n if (val === item.start.isoDate) {\n result.push(item);\n }\n\n return result;\n }, []);\n\n if (lastSelectedDate.value !== val) {\n if (lastSelectedDate.value) {\n history.pushState({}, null, `/event/${route.params.slug}/${val}`);\n }\n\n lastSelectedDate.value = val;\n }\n});\n\n/**\n * Generates the dateline HTML.\n *\n * @param {*} occurrence\n */\nfunction getDateline(occurrence: EventInterface): string {\n let str = `<span class=\"${style.date}\">`;\n str += 'today' === occurrence.start.status ? 'Today' : occurrence.start.weekday;\n str += ', ';\n str += `${formatDates([{ start: occurrence.start }, { start: occurrence.end }])}</span>`;\n\n if (!occurrence.hideStartTime) {\n str += `<span class=\"${style.time} subtitle-2\">${formatTimeSpan(occurrence)}</span>`;\n }\n\n return str;\n}\n\nfunction getOccurrenceDate(occurrence: EventInterface, showTime = true): string {\n return showTime\n ? `${formatDate(occurrence.start)}, ${formatTimeSpan(occurrence)}`\n : `${formatDate(occurrence.start)}`;\n}\n\nfunction getSeparator(key: number, length: number): string {\n if (length > 1 && length <= 2 && key + 1 < length) {\n return ' and ';\n }\n\n if (length > 2 && key + 1 === length - 1) {\n return ' and ';\n }\n\n if (length > 2 && key + 1 < length - 1) {\n return ', ';\n }\n}\n</script>\n\n<script lang=\"ts\">\nexport default {\n beforeRoute(params, villusClient) {\n return new Promise<void>((resolve, reject) => {\n villusClient\n .executeQuery({\n query: calendarEventQuery,\n variables: {\n slug: params.slug,\n },\n })\n .then(() => resolve())\n .catch((err) => reject(err));\n });\n },\n};\n</script>\n\n<style lang=\"scss\">\n@use '@/styles/links.module.scss' as *;\n</style>\n\n<style lang=\"scss\" module>\n.datepicker {\n margin-top: 1rem;\n}\n\n.dates {\n @include space-22-27-above;\n\n h2 {\n @include space-0-above;\n }\n}\n\n.detail + .detail {\n margin-top: 2rem;\n}\n\n.occurrence {\n & + * {\n @include space-12-16-above;\n }\n\n .date {\n @include heading-4;\n }\n\n .date,\n .time {\n display: block;\n }\n}\n\n.occurrences {\n margin-top: 2rem;\n}\n\n.upcoming {\n margin-top: 2rem;\n\n ul {\n margin: 0;\n padding-left: 0;\n }\n\n li {\n list-style: none;\n margin-top: 2rem;\n\n &:first-of-type {\n margin-top: 0;\n }\n }\n\n time {\n @include heading-4;\n\n & {\n display: block;\n margin-top: 1rem;\n }\n }\n}\n\n@media (min-width: $break-point) {\n .content {\n @include grid-content;\n\n .dates {\n display: grid;\n grid-column: 1 / span 6;\n grid-column-gap: $column-gutter-large;\n grid-template-columns: repeat(2, 1fr);\n }\n }\n\n .occurrence {\n .date {\n @include space-0-above;\n }\n }\n}\n</style>\n"],"file":"assets/CalendarEvent-CwSaLE9X.js"}