{"version":3,"mappings":"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","names":["TeachingMaterialsDrawer","defineAsyncComponent","__vitePreload","n","getPromptCount","useTeachingMaterials","proxySource","useImageProxy","preparePackages","features","feature","teachingMaterialsFilteredSectionFiltersQuery","gql","tmArtists","tmMedia","tmSubjects","tmThemes","emit","__emit","route","useRoute","router","useRouter","handleError","useHandleError","metaDescription","setMetaDescription","setMetaTitle","useMetaData","activeFilters","ref","currentFilterName","currentResultType","dropdownRefs","filterRefs","filtersMap","inputsRefs","lastFocused","noResult","queryFilters","resultsFilters","resultsInputsRefs","selected","shouldSkip","sortedResults","selectNav","useFilterInteractions","checkShouldSkip","computed","setNoResult","getFilter","allFilters","changeCase","getQueryFilters","preparedFilterName","useQuery","data","isFetching","execute","dataLoaded","sortResults","sharedPackageQuery","sharedTopicQuery","onMounted","result","watch","val","applyFilters","adjusted","target","activeFilter","previous","err","isActiveButton","key","isActiveFilter","setFilter","filter","nextTick","results","sorted","teachingMaterialsSectionQuery","associatedInfo","__default__","params","villusClient","resolve","reject","hideContent","isFiltered","preparedExhibitions","exhibition","error","filtersActivated","normalize","resultsFound"],"ignoreList":[],"sources":["../../src/components/teachingMaterials/TeachingMaterialsFeatures.vue","../../src/queries/GetTeachingMaterialsFilteredSection.js","../../src/components/teachingMaterials/TeachingMaterialsFilteredSection.vue","../../src/queries/GetTeachingMaterialsSection.js","../../src/components/teachingMaterials/TeachingMaterialsSection.vue"],"sourcesContent":["<template>\n  <section :class=\"$style.features\">\n    <article v-for=\"(feature, key) in features\" :key=\"key\" class=\"space-48-64-above\">\n      <div v-if=\"feature.display === 'max'\">\n        <h2>\n          <router-link\n            :class=\"$style.title\"\n            :to=\"{ name: 'TeachingMaterialsPackage', params: { slug: feature.package.slug } }\"\n            v-html=\"feature.header || feature.package.title\"\n          ></router-link>\n        </h2>\n        <div :class=\"[$style.feature, 'space-12-16-above']\">\n          <ProcessContent\n            v-if=\"feature.package.mainVideo\"\n            :content=\"feature.package.mainVideo\"\n            :class=\"[$style.video, 'aspect-container']\"\n          ></ProcessContent>\n          <router-link\n            v-else\n            :to=\"{ name: 'TeachingMaterialsPackage', params: { slug: feature.package.slug } }\"\n            :class=\"[$style.picture, 'aspect-container']\"\n          >\n            <picture>\n              <img\n                v-if=\"feature.package.featuredImage\"\n                :alt=\"feature.package.featuredImage.node.altText\"\n                :src=\"proxySource(feature.package.featuredImage.node.sourceUrl, 840)\"\n                :srcset=\"feature.package.imageSrcset\"\n                class=\"aspect-image\"\n                loading=\"lazy\"\n                sizes=\"(min-width: 960px) 870px, 100vw\"\n              />\n            </picture>\n          </router-link>\n          <div :class=\"$style.info\">\n            <div\n              :class=\"[$style.excerpt, 'space-12-16-above']\"\n              v-html=\"feature.package.excerpt\"\n            ></div>\n            <h3\n              v-if=\"\n                feature.package.tmPackagePageElements &&\n                feature.package.tmPackagePageElements.whats_included.length\n              \"\n            >\n              What’s Included\n            </h3>\n            <p\n              v-if=\"\n                feature.package.tmPackagePageElements &&\n                feature.package.tmPackagePageElements.whats_included.length\n              \"\n              class=\"space-8-10-above\"\n              v-html=\"feature.package.tmPackagePageElements.whats_included\"\n            ></p>\n            <router-link\n              :to=\"{ name: 'TeachingMaterialsPackage', params: { slug: feature.package.slug } }\"\n              :class=\"[moreLink, $style.explore, 'space-12-16-above']\"\n            >\n              Explore the materials\n            </router-link>\n          </div>\n        </div>\n        <TeachingMaterialsDrawer\n          v-if=\"feature.isShowAll === '1'\"\n          :content=\"preparePackages(feature.showcase.packages)\"\n          group=\"max\"\n          title=\"Show All\"\n          :is-module=\"true\"\n        ></TeachingMaterialsDrawer>\n        <header v-else :class=\"[$style.header, 'space-48-64-above']\">\n          <h3\n            v-html=\"\n              `${changeCase(feature.showcase.type)} ${\n                feature.showcase.type === 'artists' ? 'Included' : ''\n              }`\n            \"\n          ></h3>\n          <router-link\n            :class=\"moreLink\"\n            :to=\"{\n              name: 'TeachingMaterialsPackage',\n              params: { slug: feature.package.slug },\n              hash: `#${feature.showcase.type}`,\n            }\"\n          >\n            More\n          </router-link>\n        </header>\n        <TeachingMaterialsFeatureShowcase\n          :showcase=\"feature.showcase\"\n          :parent-slug=\"feature.package.slug\"\n        ></TeachingMaterialsFeatureShowcase>\n      </div>\n      <div v-else-if=\"feature.display === 'min'\">\n        <h2 v-html=\"feature.header || feature.package.title\"></h2>\n        <div :class=\"[$style.min, 'space-12-16-above']\">\n          <router-link\n            :to=\"{ name: 'TeachingMaterialsPackage', params: { slug: feature.package.slug } }\"\n            class=\"aspect-container\"\n          >\n            <picture>\n              <img\n                v-if=\"feature.package.featuredImage\"\n                :alt=\"feature.package.featuredImage.node.altText\"\n                :src=\"proxySource(feature.package.featuredImage.node.sourceUrl, 840)\"\n                :srcset=\"feature.package.imageSrcset\"\n                class=\"aspect-image\"\n                loading=\"lazy\"\n                sizes=\"(min-width: 960px) 870px, 100vw\"\n              />\n            </picture>\n          </router-link>\n          <div>\n            <h3>\n              <router-link\n                :class=\"$style.minExcerpt\"\n                :to=\"{ name: 'TeachingMaterialsPackage', params: { slug: feature.package.slug } }\"\n                v-html=\"feature.package.title\"\n              ></router-link>\n            </h3>\n            <p :class=\"$style.minExcerpt\" v-html=\"feature.package.excerpt\"></p>\n            <router-link\n              :to=\"{ name: 'TeachingMaterialsPackage', params: { slug: feature.package.slug } }\"\n              :class=\"[moreLink, $style.link, 'space-12-16-above']\"\n            >\n              Explore the materials\n            </router-link>\n            <div :class=\"$style.borderTop\">\n              <p :class=\"$style.label\">\n                Topics with View and Discuss and Classroom Activities Prompts:\n                {{ getPromptCount(feature.package) }}\n              </p>\n            </div>\n          </div>\n        </div>\n        <TeachingMaterialsDrawer\n          v-if=\"feature.isShowAll === '1'\"\n          :content=\"preparePackages(feature.showcase.packages)\"\n          group=\"min\"\n          title=\"Show All\"\n          :is-module=\"true\"\n        ></TeachingMaterialsDrawer>\n      </div>\n    </article>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport { Artist, Package, Topic } from '@/types/teachingMaterials.interface';\nimport { changeCase } from '@/utils';\nimport { defineAsyncComponent } from 'vue';\nimport { moreLink } from '@/styles/links.module.scss';\nimport ProcessContent from '@/components/common/ProcessContent.vue';\nimport TeachingMaterialsFeatureShowcase from '@/components/teachingMaterials/TeachingMaterialsFeatureShowcase.vue';\nimport { useImageProxy } from '@/composables/Common.js';\nimport { useTeachingMaterials } from '@/composables/TeachingMaterials.js';\n\nconst TeachingMaterialsDrawer = defineAsyncComponent(\n  () => import('@/components/teachingMaterials/TeachingMaterialsDrawer.vue')\n);\n\ndefineProps<{\n  features: Array<{\n    display: string;\n    header: string;\n    isShowAll: string;\n    package: Package;\n    showcase: {\n      artists: Array<{\n        artist: Artist;\n      }>;\n      packages: Array<Package>;\n      topics: Array<Topic>;\n      type: string;\n    };\n  }>;\n  skip?: boolean;\n}>();\n\nconst { getPromptCount } = useTeachingMaterials();\nconst { proxySource } = useImageProxy();\n\nfunction preparePackages(features: Array<Package>): Array<Package> {\n  if (features && features.length) {\n    return features.map((feature) => feature.package);\n  }\n\n  return [];\n}\n</script>\n\n<style lang=\"scss\" module>\n.border-top {\n  border-top: 1px solid $black;\n}\n.excerpt {\n  p {\n    margin-top: 0; // defeat global\n  }\n}\n.explore {\n  display: inline-block;\n}\n.features {\n  > article:first-of-type {\n    margin-top: 1rem;\n  }\n  a {\n    text-decoration: none;\n  }\n  h2 {\n    margin-top: 0; // defeat global\n  }\n}\n.header {\n  align-items: baseline;\n  display: flex;\n\n  h3 {\n    margin: 0; // defeat global\n  }\n}\n.label {\n  @include info;\n  @include space-8-10-above;\n\n  & {\n    line-height: 1rem;\n  }\n}\n.link {\n  display: inline-block;\n  margin-bottom: 1rem;\n  text-decoration: none;\n}\n.video {\n  grid-column: 1 / span 2;\n\n  iframe {\n    height: 100%;\n    left: 0;\n    max-height: 320px;\n    max-width: 570px;\n    position: absolute;\n    top: 0;\n    width: 100%;\n  }\n}\n\n@media (min-width: $break-point) {\n  .excerpt {\n    margin-top: 0;\n  }\n  .feature,\n  .min {\n    @include grid;\n\n    a {\n      grid-column: span 8;\n    }\n\n    > a {\n      @include space-5-above;\n    }\n    > div {\n      grid-column: span 4;\n    }\n  }\n  .min {\n    h3 {\n      margin-top: 0;\n    }\n  }\n  .picture,\n  .video {\n    grid-column: span 8;\n  }\n  .header {\n    margin-top: 1rem;\n  }\n  .info {\n    grid-column: span 4;\n  }\n}\n</style>\n","import gql from 'graphql-tag';\nimport {\n  tmArtists,\n  tmMedia,\n  tmSubjects,\n  tmThemes,\n} from '@/queries/TeachingMaterialsFragments';\n\nexport const teachingMaterialsFilteredSectionFiltersQuery = gql`\n  query getAllFilters {\n    ${tmArtists}\n    ${tmMedia}\n    ${tmSubjects}\n    ${tmThemes}\n  }\n`;\n","<template>\n  <section key=\"filters\" :class=\"$style.filtered\">\n    <nav\n      id=\"tm_filters\"\n      :class=\"[$style.filters, { [$style.noBorder]: !currentFilterName }, 'nav-bar']\"\n    >\n      <ul>\n        <li\n          v-for=\"(type, key) in filtersMap\"\n          :key=\"key\"\n          :class=\"[{ active: selected === key }, 'nav-subtypes']\"\n        >\n          <button\n            :id=\"`${key}-button`\"\n            :ref=\"\n              (el) => {\n                filterRefs[key] = el;\n              }\n            \"\n            :name=\"key\"\n            type=\"button\"\n            :aria-controls=\"key\"\n            :aria-expanded=\"isActiveButton(key)\"\n            :class=\"[\n              'button-filter',\n              { active: isActiveButton(key) },\n              selected === key ? 'up' : 'down',\n            ]\"\n            :ga4-event=\"\n              JSON.stringify({\n                filter_location: 'teaching_materials',\n                filter_type: 'lesson',\n                filter_value: `${type}s`,\n                gtm_tag: 'filter',\n              })\n            \"\n            @click.stop.prevent=\"setFilter(key)\"\n          >\n            {{ type }}\n          </button>\n          <div\n            v-if=\"getFilter.length\"\n            :id=\"key\"\n            :ref=\"\n              (el) => {\n                dropdownRefs[`${key}`] = el;\n              }\n            \"\n            class=\"nav-items\"\n          >\n            <div\n              v-for=\"(filter, idx) in getFilter\"\n              :key=\"idx\"\n              :aria-labelledby=\"currentFilterName\"\n            >\n              <input\n                :id=\"String(idx)\"\n                :ref=\"\n                  (el) => {\n                    inputsRefs[`${currentFilterName}-${idx}`] = el;\n                  }\n                \"\n                v-model=\"activeFilters\"\n                :aria-checked=\"isActiveFilter(filter.slug)\"\n                type=\"checkbox\"\n                :value=\"filter.slug\"\n              />\n              <label class=\"button\" :for=\"String(idx)\">\n                <div>\n                  <IconCheck v-if=\"isActiveFilter(filter.slug)\"></IconCheck>\n                  <IconBox v-else></IconBox>\n                </div>\n                <span>{{ filter.name }}</span>\n              </label>\n            </div>\n            <button\n              class=\"apply\"\n              name=\"apply filter\"\n              type=\"button\"\n              :ga4-event=\"\n                JSON.stringify({\n                  click_type: 'apply',\n                  component: 'TeachingMaterialsFilteredSection',\n                  content_group: 'teaching_materials',\n                  gtm_tag: 'interaction',\n                  link_text: `${preparedFilterName}`,\n                })\n              \"\n              @click.prevent=\"applyFilters()\"\n            >\n              Apply\n            </button>\n          </div>\n        </li>\n      </ul>\n    </nav>\n    <div v-if=\"resultsFilters.length\" :class=\"$style.resultsRemove\">\n      <div v-if=\"sortedResults && Object.keys(sortedResults).length\" :class=\"$style.resultLabels\">\n        <nav id=\"tm-section-backlink\" aria-label=\"back link\">\n          <BackLink\n            component=\"TeachingMaterialsSection\"\n            group=\"teaching_materials\"\n            label=\"For Educators\"\n            path=\"/for-educators\"\n          ></BackLink>\n        </nav>\n        <h1 class=\"space-24-32-above\">Teaching Materials</h1>\n        <p class=\"body-2\">Filtered by:</p>\n        <div v-for=\"(filter, key) in resultsFilters\" :key=\"key\">\n          <input\n            :id=\"`input-${String(key)}`\"\n            :ref=\"\n              (el) => {\n                resultsInputsRefs[filter] = el;\n              }\n            \"\n            v-model=\"resultsFilters\"\n            :checked=\"isActiveFilter(filter)\"\n            type=\"checkbox\"\n            :value=\"filter\"\n          />\n          <label :class=\"[$style.resultLabels, 'body-2']\" :for=\"`input-${String(key)}`\">\n            {{ slugToTitle(filter) }}\n          </label>\n        </div>\n        <router-link :to=\"{ path: '/teaching-materials' }\" class=\"button-secondary\">\n          Clear\n        </router-link>\n      </div>\n    </div>\n    <section v-if=\"sortedResults && Object.keys(sortedResults).length\" :class=\"$style.section\">\n      <section v-for=\"(value, key) in sortedResults\" :key=\"key\" class=\"space-48-64-above\">\n        <h2 v-if=\"value.length\">{{ changeCase(key) }}</h2>\n        <TeachingMaterialsArticle\n          v-if=\"value.length\"\n          :is-filtered=\"true\"\n          :is-full=\"false\"\n          :content=\"value\"\n          :filters=\"resultsFilters\"\n          :type=\"changeCase(currentResultType)\"\n          :class=\"$style.results\"\n        ></TeachingMaterialsArticle>\n        <TeachingMaterialsDrawer\n          v-if=\"value.length > 2\"\n          :content=\"value.slice(2, value.length)\"\n          :group=\"key\"\n          title=\"Show All\"\n          :is-filtered=\"true\"\n          :filters=\"resultsFilters\"\n          :type=\"changeCase(currentResultType)\"\n        ></TeachingMaterialsDrawer>\n      </section>\n    </section>\n    <p v-if=\"!isFetching && noResult && sortedResults && Object.keys(sortedResults).length < 1\">\n      There are no results to match your selection.\n    </p>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport BackLink from '@/components/common/BackLink.vue';\nimport { changeCase, slugToTitle } from '@/utils';\nimport { computed, defineAsyncComponent, nextTick, onMounted, ref, watch } from 'vue';\nimport {\n  dataLoaded,\n  useFilterInteractions,\n  useHandleError,\n  useMetaData,\n} from '@/composables/Common.js';\nimport gql from 'graphql-tag';\nimport IconBox from '@/assets/svgs/IconBox.svg?component';\nimport IconCheck from '@/assets/svgs/IconCheck.svg?component';\nimport { Package, Topic } from '@/types/teachingMaterials.interface';\nimport { sharedPackageQuery, sharedTopicQuery } from '@/queries/TeachingMaterialsFragments';\nimport TeachingMaterialsArticle from '@/components/teachingMaterials/TeachingMaterialsArticle.vue';\nimport { teachingMaterialsFilteredSectionFiltersQuery } from '@/queries/GetTeachingMaterialsFilteredSection';\nimport { useQuery } from 'villus';\nimport { useRoute, useRouter } from 'vue-router';\nimport { useTeachingMaterials } from '@/composables/TeachingMaterials.js';\n\nconst TeachingMaterialsDrawer = defineAsyncComponent(\n  () => import('@/components/teachingMaterials/TeachingMaterialsDrawer.vue')\n);\n\ninterface Sorted {\n  topics: Array<Topic>;\n  surveys: Array<Package>;\n  exhibitions: Array<Package>;\n}\n\nconst emit = defineEmits({\n  'filter-clicked': null,\n  'found-results': null,\n});\n\nconst route = useRoute();\nconst router = useRouter();\n\nconst { handleError } = useHandleError();\nconst { metaDescription } = useTeachingMaterials();\nconst { setMetaDescription, setMetaTitle } = useMetaData();\n\nconst activeFilters = ref<Array<string>>([]);\nconst currentFilterName = ref('');\nconst currentResultType = ref('');\nconst dropdownRefs = ref([]);\nconst filterRefs = ref({});\nconst filtersMap = {\n  artists: 'Artist',\n  media: 'Medium',\n  subjects: 'Class Subject',\n  themes: 'Theme',\n};\nconst inputsRefs = ref([]);\nconst lastFocused = ref('');\nconst noResult = ref(false);\nconst queryFilters = ref<Array<string>>([]);\nconst resultsFilters = ref<Array<string>>([]);\nconst resultsInputsRefs = ref([]);\nconst selected = ref('');\nconst shouldSkip = ref(true);\nconst sortedResults = ref<Sorted>();\n\nconst { selectNav } = useFilterInteractions(selected);\n\nconst checkShouldSkip = computed(() => {\n  if (\n    Object.keys(route.query).length &&\n    !Object.keys(filtersMap).includes(String(route.query.type))\n  ) {\n    setNoResult();\n\n    return true;\n  }\n\n  return shouldSkip.value;\n});\n\nconst getFilter = computed(() => {\n  if (\n    allFilters.value &&\n    currentFilterName.value &&\n    allFilters.value[`teachingMaterial${changeCase(currentFilterName.value)}`].nodes.length\n  ) {\n    return allFilters.value[`teachingMaterial${changeCase(currentFilterName.value)}`].nodes;\n  }\n\n  return [];\n});\n\nconst getQueryFilters = computed(() => {\n  if (route.query && Object.keys(route.query).length) {\n    return `where: { filter${changeCase(route.query.type)}: $filters }`;\n  }\n\n  return '';\n});\n\nconst preparedFilterName = computed(() => {\n  if (filtersMap[currentFilterName.value]) {\n    return filtersMap[currentFilterName.value].split(' ').join('-');\n  }\n\n  return 'No-Filters-Selected';\n});\n\nconst { data: allFilters } = useQuery({\n  query: teachingMaterialsFilteredSectionFiltersQuery,\n});\n\nconst { data, isFetching, execute } = useQuery({\n  fetchOnMount: false,\n  onData: data => {\n    setMetaTitle(`Teaching Materials Filtered by ${filtersMap[currentFilterName.value]}`);\n    setMetaDescription(metaDescription);\n    dataLoaded();\n\n    if (data.allTeachingMaterials && data.allTeachingMaterials.nodes.length) {\n      emit('found-results');\n      sortedResults.value = sortResults(data.allTeachingMaterials.nodes);\n      shouldSkip.value = true;\n    }\n\n    if (!data.allTeachingMaterials || data.allTeachingMaterials.nodes.length === 0) {\n      noResult.value = true;\n      shouldSkip.value = true;\n    }\n  },\n  query: gql`\n    query getFiltered($filters: String) {\n      allTeachingMaterials(\n        first: 1000,\n        ${getQueryFilters.value}\n      ) {\n        nodes {\n          __typename\n          ... on Tm_package {\n            ...sharedPackage\n          }\n          ... on Tm_topic {\n            ...sharedTopic\n          }\n        }\n      }\n    }\n    ${sharedPackageQuery}\n    ${sharedTopicQuery}\n  `,\n  skip: checkShouldSkip,\n  variables: {\n    filters: route.query && route.query.q ? route.query.q : '',\n  },\n});\n\nonMounted(() => {\n  if (route.query) {\n    if (isFetching) {\n      dataLoaded(false);\n    }\n\n    if (route.query.type) {\n      currentFilterName.value = String(route.query.type);\n      currentResultType.value = String(route.query.type);\n    }\n\n    if (route.query.q) {\n      queryFilters.value = route.query.q.toString().split(',');\n      activeFilters.value = queryFilters.value;\n      resultsFilters.value = queryFilters.value;\n      shouldSkip.value = false;\n    }\n\n    if (Object.keys(route.query).length) {\n      execute().then((result) => {\n        if (result.error) {\n          handleError('TeachingMaterialsFilteredSection', result.error, false);\n        }\n      });\n    }\n  }\n});\n\nwatch(resultsFilters, (val) => {\n  if (val.length) {\n    activeFilters.value = val;\n    applyFilters();\n  }\n\n  if (val.length === 0) {\n    router.push({\n      path: '/teaching-materials',\n    });\n  }\n});\n\nfunction applyFilters(): void {\n  lastFocused.value = currentFilterName.value;\n\n  if (activeFilters.value.length) {\n    if (allFilters && allFilters.value) {\n      // ensure only current filter type is applied\n      const adjusted = activeFilters.value.filter(activeFilter => allFilters\n        .value[`teachingMaterial${changeCase(currentFilterName.value)}`]\n        .nodes\n        .some((target) => target.slug === activeFilter)\n      );\n\n      activeFilters.value = adjusted;\n    }\n\n    if (\n      resultsFilters.value.length &&\n      JSON.stringify(resultsFilters.value) !== JSON.stringify(activeFilters.value) &&\n      route.query.type !== currentFilterName.value\n    ) {\n      // ensure previous filters are cleared\n      const previous = new Set(resultsFilters.value);\n\n      activeFilters.value = activeFilters.value.filter(target => !previous.has(target));\n    }\n\n    // re: https://github.com/vuejs/vue-router/issues/2872\n    router\n      .push({\n        path: router.currentRoute.value.path,\n        query: { q: activeFilters.value.join(','), type: currentFilterName.value },\n      })\n      .catch((err) => { }); // eslint-disable-line\n  }\n\n  if (!queryFilters.value.length && !activeFilters.value.length) {\n    router.push({ path: router.currentRoute.value.path });\n  }\n}\n\nfunction isActiveButton(key: string): boolean {\n  return key === currentFilterName.value;\n}\n\nfunction isActiveFilter(key: string): boolean {\n  return activeFilters.value.indexOf(key) >= 0;\n}\n\nfunction setFilter(filter: string): void {\n  currentFilterName.value = filter;\n  nextTick(() => selectNav(filter, Object.values(dropdownRefs.value)));\n}\n\nfunction setNoResult(): void {\n  noResult.value = true;\n}\n\nfunction sortResults(results: Array<Package | Topic>): Sorted {\n  const sorted = { topics: [], surveys: [], exhibitions: [] } as Sorted;\n\n  if (results.length) {\n    results.forEach((result) => {\n      if (result.__typename === 'Tm_package') {\n        if (result.type === 'exhibition') {\n          sorted.exhibitions.push(result);\n        }\n\n        if (result.type === 'survey' || result.type === 'default') {\n          sorted.surveys.push(result);\n        }\n      }\n\n      if (result.__typename === 'Tm_topic') {\n        sorted.topics.push(result);\n      }\n    });\n  }\n\n  // reset focus\n  if (filterRefs && Object.keys(filterRefs).length) {\n    filterRefs.value[currentFilterName.value].focus();\n  }\n\n  return sorted;\n}\n</script>\n\n<style lang=\"scss\">\n@use '@/styles/navigation.module.scss' as *;\n</style>\n\n<style lang=\"scss\" module>\n.filtered {\n  :global(.fade-enter) {\n    opacity: 0;\n  }\n\n  :global(.fade-enter-active) {\n    transition: opacity 0.3s;\n  }\n\n  :global(.fade-leave-to) {\n    opacity: 0;\n  }\n}\n\n.no-border {\n  border-bottom: none;\n}\n\n.results {\n  margin-top: 1rem;\n\n  > article:first-of-type {\n    margin-top: 0;\n  }\n}\n\n.result-labels {\n  > div {\n    display: inline-block;\n    margin: 1rem 0.5rem 0 0;\n  }\n\n  input[type='checkbox'] {\n    height: 0;\n    opacity: 0;\n    position: absolute;\n    width: 0;\n\n    &::after {\n      display: none;\n    }\n  }\n\n  label {\n    cursor: pointer;\n    text-decoration: underline;\n  }\n}\n\n.results-remove {\n  a {\n    display: block;\n    width: fit-content;\n    text-decoration: none;\n\n    &:hover {\n      text-decoration: none;\n    }\n  }\n}\n.section {\n  margin-top: 2rem;\n\n  > section {\n    h2 {\n      margin-top: 0; // defeat global\n    }\n\n    &:first-of-type {\n      margin-top: 0;\n    }\n  }\n}\n.selected {\n  background-color: $black;\n}\n\n@media (min-width: $break-point) {\n  .filtered {\n    @include grid;\n\n    > nav,\n    > div {\n      grid-column: 1 / span 8;\n    }\n\n    .section {\n      grid-column: span 12;\n    }\n  }\n\n  .filters {\n    p {\n      margin-top: 0;\n    }\n  }\n}\n</style>\n","import { associatedInfo } from '@/queries/TeachingMaterialsFragments';\nimport gql from 'graphql-tag';\n\nexport const teachingMaterialsSectionQuery = gql`\n  query getContent {\n    tmFeatures {\n      closingText\n      introText\n      features {\n        display\n        header\n        isShowAll\n        package {\n          associatedTopics {\n            topic {\n              ${associatedInfo}\n            }\n          }\n          excerpt\n          featuredImage {\n            node {\n              altText\n              sourceUrl\n            }\n          }\n          imageSrcset\n          imageCount\n          mainVideo\n          slug\n          title\n          tmPackagePageElements {\n            whats_included\n          }\n          videoCount\n        }\n        showcase {\n          artists {\n            artist {\n              ${associatedInfo}\n              excerpt\n              featuredImage {\n                node {\n                  altText\n                  sourceUrl\n                }\n              }\n              imageSrcset\n              title\n            }\n          }\n          packages {\n            package {\n              associatedTopics {\n                topic {\n                  ${associatedInfo}\n                }\n              }\n              doNotDisplay\n              excerpt\n              featuredImage {\n                node {\n                  altText\n                  sourceUrl\n                }\n              }\n              imageSrcset\n              imageCount\n              slug\n              title\n              tmPackagePageElements {\n                all_resources {\n                  header\n                  resources\n                }\n                key_terms {\n                  header\n                  terms {\n                    term\n                    title\n                  }\n                }\n                pdf\n                whats_included\n              }\n              type\n              videoCount\n            }\n          }\n          topics {\n            topic {\n              ${associatedInfo}\n              excerpt\n              featuredImage {\n                node {\n                  altText\n                  sourceUrl\n                }\n              }\n              imageSrcset\n              title\n            }\n          }\n          type\n        }\n      }\n      stackedFeature {\n        altText\n        button {\n          button_type\n          link\n          pdf\n          title\n        }\n        excerpt\n        imageSrcset\n        header\n        image\n        link\n        subtitle\n        title\n      }\n    }\n    tmPackages(\n      first: 500,\n      where: { packageType: \"exhibition\" }\n    ) {\n      nodes {\n        associatedTopics {\n          topic {\n            ${associatedInfo}\n          }\n        }\n        doNotDisplay\n        excerpt\n        featuredImage {\n          node {\n            altText\n            sourceUrl\n          }\n        }\n        imageSrcset\n        imageCount\n        slug\n        title\n        tmPackagePageElements {\n          all_resources {\n            header\n            resources\n          }\n          key_terms {\n            header\n            terms {\n              term\n              title\n            }\n          }\n          pdf\n          whats_included\n        }\n        type\n        videoCount\n      }\n    }\n  }\n`;\n","<template>\n  <section :class=\"[{ [$style.filterOpened]: isFiltered }, $style.section, 'container']\">\n    <TeachingMaterialsFilteredSection\n      @filter-clicked=\"filtersActivated\"\n      @found-results=\"resultsFound\"\n      @cancel=\"normalize\"\n    ></TeachingMaterialsFilteredSection>\n    <header v-show=\"!hideContent\">\n      <nav id=\"tm-section-backlink\" aria-label=\"back link\">\n        <BackLink\n          component=\"TeachingMaterialsSection\"\n          group=\"teaching_materials\"\n          label=\"For Educators\"\n          path=\"/for-educators\"\n        ></BackLink>\n      </nav>\n      <h1 class=\"space-24-32-above\">Teaching Materials</h1>\n      <p v-if=\"results && results.tmFeatures\" class=\"space-0-above\">\n        {{\n          results.tmFeatures.introText ||\n          'Explore a range of materials on art and artists for use in the classroom or during visits to the museum.'\n        }}\n      </p>\n    </header>\n    <transition appear enter-from-class=\"content-enter\" enter-active-class=\"content-enter-active\">\n      <section v-show=\"!hideContent && !isFiltered\" :class=\"$style.content\">\n        <TeachingMaterialsFeatures\n          v-if=\"\n            results &&\n            results.tmFeatures &&\n            results.tmFeatures.features &&\n            results.tmFeatures.features.length\n          \"\n          :features=\"results.tmFeatures.features\"\n        ></TeachingMaterialsFeatures>\n        <section\n          v-if=\"results && results.tmPackages && results.tmPackages.nodes.length\"\n          :class=\"[$style.exhibitions, 'space-48-64-above']\"\n        >\n          <h2>Past Exhibitions</h2>\n          <article\n            v-for=\"(exhibition, key) in preparedExhibitions.slice(0, 1)\"\n            :key=\"key\"\n            class=\"space-48-64-above\"\n          >\n            <div :class=\"$style.exhibition\">\n              <router-link\n                :to=\"{\n                  name: 'TeachingMaterialsPackage',\n                  params: { slug: exhibition.slug },\n                }\"\n                class=\"aspect-container\"\n              >\n                <picture>\n                  <img\n                    v-if=\"exhibition.featuredImage && exhibition.featuredImage.node.sourceUrl\"\n                    :alt=\"exhibition.featuredImage.node.altText\"\n                    :src=\"proxySource(exhibition.featuredImage.node.sourceUrl, 840)\"\n                    :srcset=\"exhibition.imageSrcset\"\n                    class=\"aspect-image\"\n                    loading=\"lazy\"\n                    sizes=\"(min-width: 960px) 870px, 100vw\"\n                  />\n                </picture>\n              </router-link>\n              <div>\n                <h3>\n                  <router-link\n                    :to=\"{\n                      name: 'TeachingMaterialsPackage',\n                      params: { slug: exhibition.slug },\n                    }\"\n                    v-html=\"exhibition.title\"\n                  ></router-link>\n                </h3>\n                <div v-html=\"exhibition.excerpt\"></div>\n                <router-link\n                  :to=\"{\n                    name: 'TeachingMaterialsPackage',\n                    params: { slug: exhibition.slug },\n                  }\"\n                  :class=\"[moreLink, $style.link]\"\n                >\n                  Explore the materials\n                </router-link>\n                <div :class=\"$style.labels\">\n                  <p class=\"info\">\n                    Topics with View and Discuss and Classroom Activities Prompts:\n                    {{ getPromptCount(exhibition) }}\n                  </p>\n                </div>\n              </div>\n            </div>\n          </article>\n          <TeachingMaterialsDrawer\n            v-if=\"results.tmPackages.nodes.length > 1\"\n            :content=\"preparedExhibitions.slice(1, results.tmPackages.nodes.length)\"\n            group=\"past-exhibitions\"\n            title=\"Show All\"\n            :is-module=\"true\"\n          ></TeachingMaterialsDrawer>\n        </section>\n        <section\n          v-if=\"results && results.tmFeatures && results.tmFeatures.stackedFeature\"\n          class=\"space-48-64-above\"\n        >\n          <StackedContent\n            :header=\"results.tmFeatures.stackedFeature.header\"\n            header-level=\"h2\"\n            :is-six-span=\"true\"\n            :stacks=\"new Array(results.tmFeatures.stackedFeature)\"\n          ></StackedContent>\n        </section>\n        <section\n          v-if=\"!hideContent && !isFiltered && results && results.tmFeatures\"\n          :class=\"[$style.closing, 'space-48-64-above']\"\n        >\n          <div v-html=\"results.tmFeatures.closingText\"></div>\n        </section>\n      </section>\n    </transition>\n  </section>\n</template>\n\n<script setup lang=\"ts\">\nimport BackLink from '@/components/common/BackLink.vue';\nimport { moreLink } from '@/styles/links.module.scss';\nimport { computed, onMounted, ref } from 'vue';\nimport { dataLoaded, useHandleError, useImageProxy, useMetaData } from '@/composables/Common.js';\nimport { Section } from '@/types/teachingMaterials.interface';\nimport StackedContent from '@/components/shortcodes/StackedContent.vue';\nimport TeachingMaterialsDrawer from '@/components/teachingMaterials/TeachingMaterialsDrawer.vue';\nimport TeachingMaterialsFeatures from '@/components/teachingMaterials/TeachingMaterialsFeatures.vue';\nimport TeachingMaterialsFilteredSection from '@/components/teachingMaterials/TeachingMaterialsFilteredSection.vue';\nimport { teachingMaterialsSectionQuery } from '@/queries/GetTeachingMaterialsSection';\nimport { useQuery } from 'villus';\nimport { useRoute } from 'vue-router';\nimport { useTeachingMaterials } from '@/composables/TeachingMaterials.js';\n\nconst route = useRoute();\n\nconst { getPromptCount, metaDescription } = useTeachingMaterials();\nconst { handleError } = useHandleError();\nconst { proxySource } = useImageProxy();\nconst { setMetaDescription, setMetaTitle } = useMetaData();\n\nconst hideContent = ref(false);\nconst isFiltered = ref(false);\nconst results = ref<Section>({});\nconst shouldSkip = ref(true);\n\nconst preparedExhibitions = computed(() => {\n  if (results.value && results.value.tmPackages.nodes.length) {\n    return results.value.tmPackages.nodes.filter((exhibition) => !exhibition.doNotDisplay);\n  }\n\n  return [];\n});\n\nconst { data, error, execute } = useQuery({\n  fetchOnMount: false,\n  onData: (data) => {\n    if (Object.keys(data).length) {\n      results.value = data;\n      setMetaTitle('Teaching Materials');\n      setMetaDescription(metaDescription);\n      dataLoaded();\n    }\n\n    if (Object.keys(data).length === 0) {\n      handleError('TeachingMaterialsSection', error);\n    }\n  },\n  query: teachingMaterialsSectionQuery,\n  skip: shouldSkip,\n});\n\nonMounted(() => {\n  shouldSkip.value = !!route.query.q;\n\n  if (!shouldSkip.value) {\n    execute();\n  }\n});\n\nfunction filtersActivated(): void {\n  isFiltered.value = true;\n  shouldSkip.value = true;\n}\n\nfunction normalize(): void {\n  isFiltered.value = false;\n  shouldSkip.value = false;\n}\n\nfunction resultsFound(): void {\n  hideContent.value = true;\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: teachingMaterialsSectionQuery,\n          variables: {},\n        })\n        .then(() => resolve())\n        .catch((err) => reject(err));\n    });\n  },\n};\n</script>\n\n<style lang=\"scss\" module>\n.content {\n  margin-top: calc(#{px-to-rem(50)} - #{px-to-rem(20)});\n\n  > section {\n    h2 {\n      margin-top: 0;\n    }\n  }\n}\n\n.exhibition {\n  a {\n    text-decoration: none;\n\n    &:global(.more-link) {\n      display: inline-block;\n    }\n\n    &:hover {\n      text-decoration: underline;\n    }\n  }\n\n  > div {\n    margin-top: 1rem;\n  }\n}\n\n.exhibitions {\n  > article {\n    &:first-of-type {\n      margin-top: 1rem;\n    }\n  }\n}\n\n.labels {\n  border-top: 1px solid $black;\n  clear: both;\n  display: block;\n\n  p {\n    line-height: 1rem;\n  }\n}\n\n.link {\n  display: inline-block;\n  margin-bottom: 1rem;\n  margin-top: 1rem;\n  text-decoration: none;\n}\n\n.section {\n  > header {\n    > nav {\n      margin-top: 0.5rem;\n    }\n  }\n\n  :global(.content-enter),\n  :global(.content-leave-to) {\n    opacity: 0;\n  }\n\n  :global(.content-enter-active) {\n    transition: opacity 0.3s;\n  }\n\n  :global(.content-leave-active) {\n    transition: opacity 0.01s;\n  }\n}\n\n@media (min-width: $break-point) {\n  .exhibition {\n    @include grid;\n\n    a {\n      grid-column: span 8;\n    }\n    h3 {\n      margin-top: 0;\n    }\n    > a {\n      @include space-5-above;\n    }\n    > div {\n      grid-column: span 4;\n      margin-top: 0;\n    }\n  }\n\n  .labels {\n    > p {\n      @include space-8-10-above;\n    }\n  }\n\n  .section {\n    > header {\n      @include grid;\n\n      > h1 {\n        grid-column: 1 / span 8;\n      }\n\n      > nav {\n        grid-column: span 12;\n        margin-top: 0;\n      }\n\n      > p {\n        grid-column: 1 / span 8;\n      }\n    }\n\n    .content {\n      @include grid;\n\n      > * {\n        grid-column: span 12;\n      }\n\n      .closing {\n        grid-column: 1 / span 8;\n      }\n    }\n  }\n}\n</style>\n"],"file":"assets/TeachingMaterialsSection-C_c4XvVe.js"}