{"version":3,"file":"LearningThroughArtPost-CbKEvL42.js","sources":["../../src/components/learningThroughArt/LearningThroughArtPost.vue"],"sourcesContent":["<template>\n  <article v-if=\"Object.keys(post).length\" class=\"container\">\n    <PostFeaturedImage\n      v-if=\"post.featuredImage\"\n      :is-aspect=\"true\"\n      :is-wide=\"post.featuredImageWidth === 'wide'\"\n      :featured-image=\"post.featuredImage.node\"\n      :srcset=\"post.imageSrcset\"\n      :ga4-data='`{\n          \"click_type\": \"hero\",\n          \"component\": \"LearningThroughArtPost\",\n          \"content_group\": \"lta\",\n          \"gtm_tag\": \"image\",\n          \"file_name\": \"${post.featuredImage.node.sourceUrl.split(\"/\").pop()}\"\n        }`'\n    ></PostFeaturedImage>\n    <article :class=\"$style.article\">\n      <header>\n        <nav>\n          <BackLink\n            component=\"LearningThroughArtPost\"\n            group=\"lta\"\n            label=\"Curriculum\"\n            name=\"LearningThroughArtCurriculum\"\n          ></BackLink>\n        </nav>\n        <h1 class=\"space-24-32-above\" v-html=\"post.title\"></h1>\n      </header>\n      <LearningThroughArtTerms :lesson=\"post\"></LearningThroughArtTerms>\n      <ProcessContent\n        v-if=\"type === 'art-investigation'\"\n        ref=\"mainContent\"\n        wrapper=\"section\"\n        :content=\"post.content\"\n      ></ProcessContent>\n      <section v-else :class=\"[$style.making, 'space-12-16-above']\">\n        <div v-if=\"post.unitPlan.pdf\">\n          <a\n            :class=\"$style.pdf\"\n            :href=\"post.unitPlan.pdf\"\n            :ga4-event=\"\n              JSON.stringify({\n                click_type: 'download',\n                component: 'LearningThroughArtPost',\n                content_group: 'lta',\n                gtm_tag: 'link',\n                link_text: 'Download unit plan',\n                link_url: `Download_${post.unitPlan.pdf}`,\n              })\n            \"\n          >\n            Download Unit Plan (PDF)\n          </a>\n        </div>\n        <div v-if=\"post.unitPlan.overview\">\n          <h2>Unit Plan Overview</h2>\n          <div v-html=\"post.unitPlan.overview\"></div>\n          <div\n            v-if=\"post.unitPlan.additional_details\"\n            v-html=\"post.unitPlan.additional_details\"\n          ></div>\n        </div>\n        <div v-if=\"post.unitPlan.parts\" :class=\"$style.parts\">\n          <div v-for=\"(unit, index) in post.unitPlan.parts\" :key=\"index\" class=\"space-48-64-above\">\n            <h2 v-html=\"unit.title\"></h2>\n            <p v-if=\"unit.question\" v-html=\"unit.question\"></p>\n            <div v-for=\"(activity, idx) in unit.activities\" :key=\"idx\">\n              <h3>Activity {{ idx + 1 }}:</h3>\n              <p v-if=\"activity.artwork\" v-html=\"activity.artwork\"></p>\n              <p v-if=\"activity.recommended_time\" v-html=\"activity.recommended_time\"></p>\n              <p v-if=\"activity.materials\" v-html=\"activity.materials\"></p>\n              <div v-html=\"activity.activity_details\"></div>\n            </div>\n          </div>\n        </div>\n        <div v-if=\"post.unitPlan.resource_materials\" class=\"space-48-64-above\">\n          <h2>Resource Materials</h2>\n          <ProcessContent :content=\"post.unitPlan.resource_materials\"></ProcessContent>\n        </div>\n        <div v-if=\"post.unitPlan.miscellaneous\" class=\"space-48-64-above\">\n          <h2>Miscellaneous</h2>\n          <div v-html=\"post.unitPlan.miscellaneous\"></div>\n        </div>\n        <div\n          v-if=\"post.makingArtTeachers || post.classroomTeachers || post.artistAssistants\"\n          class=\"space-48-64-above\"\n        >\n          <h2>Teacher Information</h2>\n          <h3\n            v-if=\"post.makingArtTeachers\"\n            v-html=\"`Teaching Artist: ${post.makingArtTeachers.nodes[0].name}`\"\n          ></h3>\n          <div\n            v-if=\"post.makingArtTeachers && post.makingArtTeachers.nodes[0].info\"\n            :class=\"[$style.teacher, 'space-12-16-above']\"\n          >\n            <picture>\n              <img\n                :alt=\"post.makingArtTeachers.nodes[0].name\"\n                :src=\"proxySource(post.makingArtTeachers.nodes[0].info.image)\"\n                loading=\"lazy\"\n                width=\"160\"\n              />\n            </picture>\n            <div>\n              <div :class=\"$style.bio\" v-html=\"post.makingArtTeachers.nodes[0].info.bio\"></div>\n              <div v-if=\"post.makingArtTeachers.nodes[0].posts\">\n                <h3>Projects by {{ post.makingArtTeachers.nodes[0].name }}</h3>\n                <p\n                  v-for=\"(related, index) in post.makingArtTeachers.nodes[0].posts\"\n                  :key=\"index\"\n                  :class=\"[$style.projects, 'body-2']\"\n                >\n                  <router-link\n                    :to=\"{\n                      name: getRelatedRoute,\n                      params: {\n                        slug: related.slug,\n                      },\n                    }\"\n                    :ga4-event=\"\n                      JSON.stringify({\n                        click_type: 'related',\n                        component: 'LearningThroughArtPost',\n                        content_group: 'lta',\n                        gtm_tag: 'link',\n                        link_text: `${related.title}`,\n                        link_url: `${related.slug}`,\n                      })\n                    \"\n                    v-html=\"related.title\"\n                  ></router-link>\n                </p>\n              </div>\n            </div>\n          </div>\n          <h3\n            v-if=\"post.classroomTeachers\"\n            v-html=\"`Classroom Teachers: ${post.classroomTeachers}`\"\n          ></h3>\n          <h3\n            v-if=\"post.artistAssistants\"\n            v-html=\"`Artist Assistants: ${post.artistAssistants}`\"\n          ></h3>\n        </div>\n      </section>\n    </article>\n  </article>\n</template>\n\n<script setup lang=\"ts\">\nimport BackLink from '@/components/common/BackLink.vue';\nimport { computed } from 'vue';\nimport LearningThroughArtTerms from '@/components/learningThroughArt/LearningThroughArtTerms.vue';\nimport PostFeaturedImage from '@/components/common/PostFeaturedImage.vue';\nimport { PostInvestigation, PostMaking } from '@/types/lta.interface';\nimport ProcessContent from '@/components/common/ProcessContent.vue';\nimport { useImageProxy } from '@/composables/Common.js';\n\nconst props = defineProps<{\n  post: PostInvestigation | PostMaking;\n  type: string;\n}>();\n\nconst { proxySource } = useImageProxy();\n\nconst getRelatedRoute = computed(() =>\n  props.type === 'art-making'\n    ? 'LearningThroughArtPostMaking'\n    : 'LearningThroughArtPostInvestigation'\n);\n</script>\n\n<style lang=\"scss\" module>\n.article {\n  margin-top: 0;\n}\n\n.bio {\n  p {\n    &:first-of-type {\n      margin-top: 0;\n    }\n  }\n}\n\n.making {\n  img {\n    float: left;\n    margin: 0 px-to-rem(20) px-to-rem(20) 0;\n  }\n}\n\n.overview,\n.parts {\n  div {\n    clear: both;\n  }\n}\n\n.pdf {\n  margin-bottom: 0;\n\n  a {\n    text-decoration: none;\n  }\n}\n\n.projects {\n  margin-top: 0;\n\n  &:first-of-type {\n    margin-top: 0.5rem;\n  }\n}\n\n.teacher {\n  align-items: flex-start;\n  display: flex;\n\n  img {\n    max-width: 160px;\n  }\n}\n\n@media (min-width: $break-point) {\n  .article {\n    @include grid;\n\n    > div {\n      grid-column: 1 / span 8;\n    }\n\n    > header {\n      @include grid;\n      grid-column: span 12;\n\n      h1 {\n        grid-column: 1 / span 8;\n      }\n\n      nav {\n        grid-column: span 12;\n      }\n    }\n\n    > section {\n      @include grid-content;\n    }\n  }\n}\n</style>\n"],"names":["props","__props","proxySource","useImageProxy","getRelatedRoute","computed"],"mappings":"k8BA+JA,MAAMA,EAAQC,EAKR,CAAE,YAAAC,CAAY,EAAIC,EAAc,EAEhCC,EAAkBC,EAAS,IAC/BL,EAAM,OAAS,aACX,+BACA,qCACN;;;;;;"}