{"version":3,"file":"TeachingMaterialsPackage-YVyNEIzy.js","sources":["../../src/queries/GetTeachingMaterialsPackage.js","../../src/components/teachingMaterials/TeachingMaterialsPackage.vue"],"sourcesContent":["import { associatedInfo, tmMedia, tmSubjects, tmThemes } from '@/queries/TeachingMaterialsFragments';\nimport gql from 'graphql-tag';\n\nexport const teachingMaterialsPackageQuery = gql`\n  query getPackage($slug: String) {\n    tmPackages(where: { slugName: $slug }) {\n      nodes {\n        associatedArtists {\n          artist {\n            caCount\n            excerpt\n            featuredImage {\n              node {\n                altText\n                mediaDetails {\n                  height\n                  width\n                }\n                sourceUrl\n              }\n            }\n            imageSrcset\n            imageCount\n            slug\n            title\n            vdCount\n          }\n        }\n        associatedTopics {\n          topic {\n            ${associatedInfo}\n            excerpt\n            featuredImage {\n              node {\n                altText\n                sourceUrl\n              }\n            }\n            imageSrcset\n            title\n          }\n        }\n        content\n        excerpt\n        featuredImage {\n          node {\n            altText\n            sourceUrl\n          }\n        }\n        imageSrcset\n        imageCount\n        mainVideo\n        slug\n        ${tmMedia}\n        ${tmSubjects}\n        ${tmThemes}\n        tmGallery\n        tmPackagePageElements {\n          all_resources {\n            header\n            resources\n          }\n          key_terms {\n            header\n            terms {\n              __typename\n              term\n              title\n            }\n          }\n          pdf\n          whats_included\n        }\n        title\n        type\n        videoCount\n      }\n    }\n  }\n`;\n","<template>\n  <section v-if=\"tmPackage && Object.keys(tmPackage).length\" :class=\"['container', $style.package]\">\n    <header :class=\"$style.header\">\n      <nav>\n        <BackLink\n          component=\"TeachingMaterialsPackage\"\n          group=\"teaching_materials\"\n          label=\"Teaching Materials\"\n          path=\"/teaching-materials\"\n        ></BackLink>\n      </nav>\n      <h1 class=\"space-24-32-above\" v-html=\"tmPackage.title\"></h1>\n      <p :class=\"[$style.label, $style.headerP]\">What’s Included</p>\n      <p :class=\"$style.included\">{{ getWhatsIncluded }}</p>\n      <div v-if=\"tmPackage.tmPackagePageElements && tmPackage.tmPackagePageElements.pdf\">\n        <a :href=\"tmPackage.tmPackagePageElements.pdf\" :class=\"$style.pdf\">Download PDF</a>\n      </div>\n      <div :class=\"$style.mst\">\n        <div v-if=\"tmPackage.teachingMaterialMedia.nodes.length\">\n          <p :class=\"$style.label\">Mediums</p>\n          <ul>\n            <li\n              v-for=\"(medium, key) in tmPackage.teachingMaterialMedia.nodes\"\n              :key=\"key\"\n              :class=\"[\n                {\n                  comma: key < tmPackage.teachingMaterialMedia.nodes.length - 1,\n                },\n              ]\"\n            >\n              {{ medium.name }}\n            </li>\n          </ul>\n        </div>\n        <div\n          v-if=\"tmPackage.teachingMaterialSubjects.nodes || tmPackage.teachingMaterialThemes.nodes\"\n        >\n          <p :class=\"$style.label\">Subjects and Themes</p>\n          <ul>\n            <li\n              v-for=\"(item, key) in getSubjectsAndThemes\"\n              :key=\"key\"\n              :class=\"{ comma: key < getSubjectsAndThemes.length - 1 }\"\n            >\n              {{ item.name }}\n            </li>\n          </ul>\n        </div>\n      </div>\n    </header>\n    <section\n      v-if=\"tmPackage.tmGallery || tmPackage.mainVideo\"\n      :class=\"isGallery ? $style.showGallery : 'space-24-32-above'\"\n    >\n      <ProcessContent\n        v-if=\"tmPackage.tmGallery\"\n        :content=\"tmPackage.tmGallery\"\n        :no-wrapper=\"true\"\n        @gallery-closed=\"normalize\"\n      ></ProcessContent>\n      <ProcessContent\n        v-else-if=\"tmPackage.mainVideo\"\n        :content=\"tmPackage.mainVideo\"\n        :class=\"[$style.video, 'aspect-container', 'space-12-16-above']\"\n      ></ProcessContent>\n    </section>\n    <ProcessContent\n      v-if=\"tmPackage.content\"\n      :content=\"tmPackage.content\"\n      wrapper=\"section\"\n      :class=\"$style.content\"\n    ></ProcessContent>\n    <section\n      v-if=\"\n        tmPackage.associatedArtists &&\n        tmPackage.associatedArtists.length &&\n        !(tmPackage.associatedTopics && tmPackage.associatedTopics.length)\n      \"\n      id=\"artists\"\n    >\n      <h2>Artists</h2>\n      <TeachingMaterialsFeatureShowcase\n        :associated=\"tmPackage.associatedArtists\"\n        associated-type=\"artists\"\n        :parent-slug=\"tmPackage.slug\"\n        class=\"space-12-16-above\"\n      ></TeachingMaterialsFeatureShowcase>\n    </section>\n    <section\n      v-else-if=\"tmPackage.associatedTopics && tmPackage.associatedTopics.length\"\n      id=\"topics\"\n    >\n      <h2>Topics</h2>\n      <p class=\"space-12-16-above\">\n        Use these to discuss artwork, ideas and artists as well as for classroom activities\n      </p>\n      <TeachingMaterialsFeatureShowcase\n        :associated=\"tmPackage.associatedTopics\"\n        associated-type=\"topics\"\n        :parent-slug=\"tmPackage.slug\"\n      ></TeachingMaterialsFeatureShowcase>\n    </section>\n    <section v-if=\"findInfo('key_terms', 'tmPackage', instance).length\" :class=\"$style.terms\">\n      <h2\n        v-if=\"tmPackage.tmPackagePageElements.key_terms.header.length\"\n        v-html=\"tmPackage.tmPackagePageElements.key_terms.header\"\n      ></h2>\n      <h2 v-else>Key Terms</h2>\n      <div :class=\"[term, 'space-12-16-above']\">\n        <article\n          v-for=\"(item, key) in findInfo('key_terms', 'tmPackage', instance).slice(0, 4)\"\n          :key=\"key\"\n        >\n          <h3 v-html=\"item.title\"></h3>\n          <p v-html=\"item.term\"></p>\n        </article>\n      </div>\n      <TeachingMaterialsDrawer\n        v-if=\"findInfo('key_terms', 'tmPackage', instance).length > 4\"\n        :content=\"\n          findInfo('key_terms', 'tmPackage', instance).slice(\n            4,\n            findInfo('key_terms', 'tmPackage', instance).length,\n          )\n        \"\n        group=\"key-terms\"\n        title=\"Show All\"\n      ></TeachingMaterialsDrawer>\n    </section>\n    <section\n      v-if=\"findInfo('all_resources', 'tmPackage', instance).length\"\n      :class=\"$style.resources\"\n    >\n      <h2\n        v-if=\"tmPackage.tmPackagePageElements.all_resources.header.length\"\n        v-html=\"tmPackage.tmPackagePageElements.all_resources.header\"\n      ></h2>\n      <h2 v-else>Resources</h2>\n      <ProcessContent\n        :content=\"findInfo('all_resources', 'tmPackage', instance)\"\n        wrapper=\"article\"\n      ></ProcessContent>\n    </section>\n    <p v-if=\"isFreeman\" :class=\"[$style.freeman, 'space-48-64-above']\">\n      These teaching materials are supported by The Freeman Foundation.\n    </p>\n    <p v-if=\"isFreeman\" :class=\"$style.freeman\">\n      <em>Teaching Modern and Contemporary Asian Art</em> and the images, artworks, audio and video\n      clips, illustrations, designs, data and text featured therein, are proprietary to the\n      Guggenheim or used consistent with the owner’s permission or applicable law. Copyright and\n      other proprietary rights may be owned by individuals or entities other than, or in addition\n      to, the Guggenheim. This resource is made available for limited noncommercial, educational and\n      personal use only, or for fair use as defined in the United States copyright laws.\n      <em>Teaching Modern and Contemporary Asian Art</em> and or any portion thereof may not be sold\n      or otherwise commercially distributed.\n    </p>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport BackLink from '@/components/common/BackLink.vue';\nimport { computed, getCurrentInstance, onMounted, ref } from 'vue';\nimport { dataLoaded, useHandleError, useMetaData } from '@/composables/Common.js';\nimport { Package } from '@/types/teachingMaterials.interface';\nimport ProcessContent from '@/components/common/ProcessContent.vue';\nimport TeachingMaterialsDrawer from '@/components/teachingMaterials/TeachingMaterialsDrawer.vue';\nimport TeachingMaterialsFeatureShowcase from '@/components/teachingMaterials/TeachingMaterialsFeatureShowcase.vue';\nimport { teachingMaterialsPackageQuery } from '@/queries/GetTeachingMaterialsPackage';\nimport { term } from '@/styles/teachingMaterials.module.scss';\nimport { useQuery } from 'villus';\nimport { useRoute } from 'vue-router';\nimport { useTeachingMaterials } from '@/composables/TeachingMaterials.js';\n\nconst props = defineProps<{\n  slug: string;\n}>();\n\nconst instance = getCurrentInstance();\nconst route = useRoute();\n\nconst { findInfo, getPromptCount } = useTeachingMaterials();\nconst { handleError } = useHandleError();\nconst { setMetaDescription, setMetaTitle } = useMetaData();\n\nconst isGallery = ref(false);\nconst tmPackage = ref<Package>({});\n\ndefineExpose({ tmPackage });\n\nconst getSubjectsAndThemes = computed(() => {\n  return [\n    ...tmPackage.value.teachingMaterialSubjects.nodes,\n    ...tmPackage.value.teachingMaterialThemes.nodes,\n  ];\n});\nconst getWhatsIncluded = computed(() => {\n  if (tmPackage.value.type !== 'survey') {\n    if (tmPackage.value.associatedTopics && tmPackage.value.associatedTopics.length) {\n      const prompts = getPromptCount(tmPackage.value);\n\n      return `${prompts} topic${\n        parseInt(prompts, 10) > 1 ? 's' : ''\n      } with view and discuss and classroom activities prompts`;\n    }\n\n    return '';\n  }\n\n  return tmPackage.value.tmPackagePageElements.whats_included;\n});\nconst isFreeman = computed(() => {\n  return tmPackage.value.slug === 'teaching-modern-and-contemporary-asian-art';\n});\n\nconst { data } = useQuery({\n  onData: (data) => {\n    if (data.tmPackages && data.tmPackages.nodes.length) {\n      tmPackage.value = data.tmPackages.nodes[0];\n      setMetaTitle(data.tmPackages.nodes[0].title);\n      setMetaDescription(data.tmPackages.nodes[0].excerpt);\n      dataLoaded();\n    }\n\n    if (!data.tmPackages || data.tmPackages.nodes.length === 0) {\n      handleError('TeachingMaterialsPackage', props.slug);\n    }\n  },\n  query: teachingMaterialsPackageQuery,\n  variables: { slug: props.slug },\n});\n\nonMounted(() => {\n  if (route.query && route.query.gallery) {\n    isGallery.value = true;\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: teachingMaterialsPackageQuery,\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\" module>\n.package {\n  h2 {\n    margin: 0;\n  }\n\n  > section:not(:first-of-type) {\n    margin: 3rem 0 0;\n  }\n}\n\n.content {\n  margin-top: 1rem;\n\n  > :first-child {\n    margin-top: 0;\n  }\n\n  > * {\n    grid-column: span 10;\n  }\n\n  h2 {\n    margin-top: 3rem;\n\n    & + p {\n      margin-top: 1rem;\n    }\n  }\n\n  picture {\n    margin-top: 1rem;\n  }\n}\n\n.freeman {\n  @include body-2;\n\n  & {\n    margin-bottom: 0;\n  }\n}\n\n.header {\n  a[href$='.pdf'] {\n    margin-bottom: 0;\n    margin-top: 1rem;\n  }\n\n  h1 + p {\n    margin-top: 0;\n  }\n}\n\n.included {\n  margin-top: 0;\n}\n\n.label {\n  @include heading-4;\n}\n\n.mst {\n  div {\n    margin-right: 2rem;\n\n    &:last-of-type {\n      margin-top: 1rem;\n    }\n  }\n\n  ul {\n    display: inline-flex;\n    flex-wrap: wrap;\n    margin: 0; // defeat global\n    padding-left: 0;\n\n    li {\n      list-style: none; // defeat global\n      margin-bottom: 0;\n      margin-top: 0;\n    }\n  }\n}\n\n.resources {\n  h4 {\n    &:first-of-type {\n      margin-top: 0;\n    }\n  }\n\n  > * {\n    grid-column: span 10;\n  }\n\n  article {\n    p:first-of-type {\n      margin-top: 1rem;\n    }\n  }\n}\n\n.show-gallery {\n  visibility: visible;\n}\n\n.terms {\n  h3 {\n    margin: 0;\n  }\n\n  p {\n    margin: 0.5rem 0 0;\n  }\n}\n\n.video {\n  iframe {\n    height: 100%;\n    left: 0;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n}\n\n@media (min-width: $break-point) {\n  .package {\n    @include grid;\n\n    > * {\n      grid-column: 1 / span 8;\n    }\n\n    p,\n    .resources,\n    .terms {\n      grid-column: 1 / span 8;\n    }\n\n    .content {\n      @include grid-content;\n    }\n\n    .header {\n      @include grid;\n\n      & {\n        grid-column: span 12;\n      }\n\n      > * {\n        grid-column: 1 / span 8;\n      }\n\n      > nav {\n        grid-column: span 12;\n      }\n    }\n  }\n}\n</style>\n"],"names":["teachingMaterialsPackageQuery","gql","associatedInfo","tmMedia","tmSubjects","tmThemes","__default__","params","villusClient","resolve","reject","err","props","__props","instance","getCurrentInstance","route","useRoute","findInfo","getPromptCount","useTeachingMaterials","handleError","useHandleError","setMetaDescription","setMetaTitle","useMetaData","isGallery","ref","tmPackage","__expose","getSubjectsAndThemes","computed","getWhatsIncluded","prompts","isFreeman","useQuery","data","dataLoaded","onMounted"],"mappings":"0hBAGO,MAAMA,EAAgCC;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,cA2B/BC,CAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,UAwBlBC,CAAO;AAAA,UACPC,CAAU;AAAA,UACVC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,yMCuLHC,GAAA,CACb,YAAYC,EAAQC,EAAc,CAChC,OAAO,IAAI,QAAc,CAACC,EAASC,IAAW,CAC5CF,EACG,aAAa,CACZ,MAAOR,EACP,UAAW,CACT,KAAMO,EAAO,IAAA,CACf,CACD,EACA,KAAK,IAAME,GAAS,EACpB,MAAOE,GAAQD,EAAOC,CAAG,CAAC,CAAA,CAC9B,CAAA,CAEL,oFAhFA,MAAMC,EAAQC,EAIRC,EAAWC,EAAmB,EAC9BC,EAAQC,EAAS,EAEjB,CAAE,SAAAC,EAAU,eAAAC,CAAe,EAAIC,EAAqB,EACpD,CAAE,YAAAC,CAAY,EAAIC,EAAe,EACjC,CAAE,mBAAAC,EAAoB,aAAAC,CAAa,EAAIC,EAAY,EAEnDC,EAAYC,EAAI,EAAK,EACrBC,EAAYD,EAAa,EAAE,EAEpBE,EAAA,CAAE,UAAAD,EAAW,EAEpB,MAAAE,EAAuBC,EAAS,IAC7B,CACL,GAAGH,EAAU,MAAM,yBAAyB,MAC5C,GAAGA,EAAU,MAAM,uBAAuB,KAC5C,CACD,EACKI,EAAmBD,EAAS,IAAM,CAClC,GAAAH,EAAU,MAAM,OAAS,SAAU,CACrC,GAAIA,EAAU,MAAM,kBAAoBA,EAAU,MAAM,iBAAiB,OAAQ,CACzE,MAAAK,EAAUd,EAAeS,EAAU,KAAK,EAEvC,MAAA,GAAGK,CAAO,SACf,SAASA,EAAS,EAAE,EAAI,EAAI,IAAM,EACpC,yDAAA,CAGK,MAAA,EAAA,CAGF,OAAAL,EAAU,MAAM,sBAAsB,cAAA,CAC9C,EACKM,EAAYH,EAAS,IAClBH,EAAU,MAAM,OAAS,4CACjC,EAEgB,OAAAO,EAAS,CACxB,OAASC,GAAS,CACZA,EAAK,YAAcA,EAAK,WAAW,MAAM,SAC3CR,EAAU,MAAQQ,EAAK,WAAW,MAAM,CAAC,EACzCZ,EAAaY,EAAK,WAAW,MAAM,CAAC,EAAE,KAAK,EAC3Cb,EAAmBa,EAAK,WAAW,MAAM,CAAC,EAAE,OAAO,EACxCC,EAAA,IAGT,CAACD,EAAK,YAAcA,EAAK,WAAW,MAAM,SAAW,IAC3Cf,EAAA,2BAA4BT,EAAM,IAAI,CAEtD,EACA,MAAOZ,EACP,UAAW,CAAE,KAAMY,EAAM,IAAK,CAC/B,CAAA,EAED0B,EAAU,IAAM,CACVtB,EAAM,OAASA,EAAM,MAAM,UAC7BU,EAAU,MAAQ,GACpB,CACD"}