{"version":3,"file":"ArtworkFilters-DQB1jRsK.js","sources":["../../src/components/artwork/ArtworkNavListItem.vue","../../src/components/artwork/ArtworkNavHeader.vue","../../src/queries/ArtworkNavQuery.js","../../src/composables/ArtworkFilters.js"],"sourcesContent":["<template>\n <a v-if=\"menu.__typename === 'artists' && path === '/artwork/artist'\" :href=\"`#${menu.slug}`\">\n {{ menu.name }}\n </a>\n <router-link\n v-else-if=\"menu.__typename === 'artists' && path !== '/artwork/artist'\"\n :to=\"`/artwork/artist#${menu.slug}`\"\n >\n {{ menu.name }}\n </router-link>\n <router-link\n v-else-if=\"menu.__typename !== 'artists'\"\n :to=\"\n router.resolve({\n name: 'ArtworkTerm',\n params: {\n subtype: menu.__typename.toLowerCase(),\n search: menu.slug,\n },\n }).path\n \"\n >\n {{ prepareMenuName(menu.name) }}\n </router-link>\n</template>\n\n<script setup lang=\"ts\">\nimport { Filters } from '@/types/artwork.interface.ts';\nimport { useRouter } from 'vue-router';\n\ndefineProps<{\n menu: Filters;\n path: string;\n}>();\n\nconst router = useRouter();\n\nfunction prepareMenuName(name: string): string {\n return name\n .split(' ')\n .map((word) =>\n word === 'on' || word === 'of' ? word : word[0].toUpperCase() + word.substring(1),\n )\n .join(' ');\n}\n</script>\n","<template>\n <div>\n <nav :class=\"[$style.filters, 'nav-bar', 'space-12-16-above']\">\n <ul>\n <li\n v-for=\"(item, idx) in artworkFilterSubtypes\"\n :key=\"idx\"\n :class=\"[{ active: checkIsSelected(item.name) }, 'nav-subtypes']\"\n >\n <button\n :id=\"`${item.name}-button`\"\n :for=\"item.name\"\n :class=\"['button-filter', checkIsSelected(item.name) ? 'up' : 'down']\"\n :aria-controls=\"item.name\"\n :aria-expanded=\"checkIsSelected(item.name)\"\n aria-haspopup=\"true\"\n type=\"button\"\n @click.stop.prevent=\"toggle(item.name)\"\n v-html=\"`${item.label}<span class='screenreader-only'> Filter</span>`\"\n ></button>\n <ul\n v-if=\"adjustedFilters && Object.keys(adjustedFilters).length\"\n :id=\"item.name\"\n :ref=\"\n (el) => {\n dropdownRefs[`${item.name}`] = el;\n }\n \"\n :aria-labelledby=\"`${item.name}-button`\"\n class=\"nav-items\"\n role=\"menu\"\n >\n <li\n v-for=\"(menu, index) in adjustedFilters[item.name].nodes\"\n :key=\"index\"\n role=\"none\"\n :class=\"{ pressed: activeFilter === menu.slug }\"\n >\n <ArtworkNavListItem\n :menu=\"menu\"\n :path=\"route.path\"\n class=\"button\"\n :ga4-event=\"\n JSON.stringify({\n filter_location: 'collection',\n filter_type: 'artwork',\n filter_value: `${menu.name}`,\n gtm_tag: 'filter',\n })\n \"\n role=\"menuitem\"\n ></ArtworkNavListItem>\n </li>\n </ul>\n </li>\n </ul>\n </nav>\n <nav :class=\"$style.backLink\">\n <BackLink\n v-if=\"back\"\n component=\"ArtworkTermArtist\"\n group=\"artwork\"\n label=\"Collection Online\"\n name=\"CollectionOnline\"\n ></BackLink>\n </nav>\n </div>\n</template>\n\n<script setup lang=\"ts\">\nimport ArtworkNavListItem from '@/components/artwork/ArtworkNavListItem.vue';\nimport BackLink from '@/components/common/BackLink.vue';\nimport { Filters } from '@/types/artwork.interface.ts';\nimport { onMounted, ref, watch } from 'vue';\nimport { useAnalytics, useFilterInteractions } from '@/composables/Common.js';\nimport { useRoute } from 'vue-router';\n\nconst route = useRoute();\n\nconst props =\n withDefaults(\n defineProps<{\n activeFilter?: string;\n back?: boolean;\n filters: {\n artworkTypes: {\n nodes: Array<Filters>;\n };\n decades: {\n nodes: Array<Filters>;\n };\n movements: {\n nodes: Array<Filters>;\n };\n sites: {\n nodes: Array<Filters>;\n };\n specialCollections: {\n nodes: Array<Filters>;\n }\n }\n }>(),\n { back: true },\n);\n\nconst { ga4Event } = useAnalytics();\n\nconst adjustedFilters = ref({});\n\nconst alphabet = [\n 'A',\n 'B',\n 'C',\n 'D',\n 'E',\n 'F',\n 'G',\n 'H',\n 'I',\n 'J',\n 'K',\n 'L',\n 'M',\n 'N',\n 'O',\n 'P',\n 'Q',\n 'R',\n 'S',\n 'T',\n 'U',\n 'V',\n 'W',\n 'X',\n 'Y',\n 'Z',\n];\n\n// this ordering describes the nav order. \"Artists\" is always first\nconst artworkFilterSubtypes = [\n { name: 'artists', label: 'Artists' },\n { name: 'decades', label: 'Dates' },\n { name: 'artworkTypes', label: 'Mediums' },\n { name: 'movements', label: 'Movements' },\n { name: 'specialCollections', label: 'Special Collections' },\n { name: 'sites', label: 'Venues' },\n];\nconst dropdownRefs = ref<Array<HTMLElement>>([]);\nconst selected = ref('');\nconst siteSelected = [\n 'solomon-r-guggenheim-museum',\n 'peggy-guggenheim-collection',\n 'guggenheim-museum-bilbao',\n];\n\nconst { selectNav } = useFilterInteractions(selected);\n\nwatch(\n () => props.filters,\n (filter) => {\n if (filter && filter.sites.nodes.length !== 3) {\n prepareSites();\n }\n },\n);\n\nonMounted(() => {\n if (Object.keys(props.filters).length) {\n prepareSites();\n }\n});\n\nfunction checkIsSelected(selection: string): boolean {\n return selection === selected.value;\n}\n\nfunction prepareSites(): void {\n // only show selected venues\n const adjustedSites = [...props.filters.sites.nodes]\n .reverse()\n .filter((site) => siteSelected.includes(site.slug));\n\n adjustedFilters.value = {\n ...props.filters,\n artists: { nodes: [] },\n sites: { nodes: adjustedSites },\n };\n\n alphabet.forEach((letter) =>\n adjustedFilters.value.artists.nodes.push({\n __typename: 'artists',\n description: '',\n name: letter,\n slug: letter,\n }),\n );\n}\n\nfunction toggle(selection: string): void {\n selectNav(selection, Object.values(dropdownRefs.value));\n if (selection !== 'artists') {\n ga4Event({\n filter_location: 'collection',\n filter_type: 'artwork',\n filter_value: artworkFilterSubtypes.filter((subtype) => subtype.name === selection)[0].label,\n gtm_tag: 'filter',\n });\n }\n}\n</script>\n\n<style lang=\"scss\">\n@use '@/styles/a11y.module.scss' as *;\n@use '@/styles/navigation.module.scss' as *;\n</style>\n\n<style lang=\"scss\" module>\n.artists {\n a {\n padding: 4px 8px;\n text-decoration: none;\n\n &:hover {\n text-decoration: underline;\n\n &::after {\n background: none;\n }\n }\n\n &:focus {\n color: $white;\n }\n\n &::after {\n background: none;\n }\n }\n}\n.back-link {\n margin-top: 0.5rem;\n}\n.filter {\n @include button-filter;\n\n & {\n cursor: default;\n display: inline-block;\n }\n\n &::after {\n content: none;\n }\n}\n\n@media (min-width: $break-point) {\n .artists {\n display: inline-block;\n margin-right: 1rem;\n }\n .back-link {\n margin-top: 0;\n }\n .filters {\n > ul {\n padding-bottom: 0.625rem;\n max-width: $desktop-width;\n\n ul {\n text-align: left;\n }\n }\n }\n\n .ios {\n display: none;\n }\n}\n</style>\n","export const artworkNavQuery = `\n decades(first: 50) {\n nodes {\n __typename\n description\n name\n slug\n }\n }\n artworkTypes(first: 50) {\n nodes {\n __typename\n description\n name\n slug\n }\n }\n movements(first: 50) {\n nodes {\n __typename\n description\n name\n slug\n }\n }\n specialCollections(first: 50) {\n nodes {\n __typename\n description\n name\n slug\n }\n }\n sites(first: 50) {\n nodes {\n __typename\n description\n name\n slug\n }\n }\n`;\n","export function useArtworkFilters() {\n const getFilters = (data) => {\n const { artworkTypes, decades, movements, sites, specialCollections } = data;\n\n return { artworkTypes, decades, movements, sites, specialCollections };\n };\n\n return { getFilters };\n}\n"],"names":["router","useRouter","prepareMenuName","name","word","route","useRoute","props","__props","ga4Event","useAnalytics","adjustedFilters","ref","alphabet","artworkFilterSubtypes","dropdownRefs","selected","siteSelected","selectNav","useFilterInteractions","watch","filter","prepareSites","onMounted","checkIsSelected","selection","adjustedSites","site","letter","toggle","subtype","artworkNavQuery","useArtworkFilters","data","artworkTypes","decades","movements","sites","specialCollections"],"mappings":"4YAmCA,MAAMA,EAASC,EAAU,EAEzB,SAASC,EAAgBC,EAAsB,CACtC,OAAAA,EACJ,MAAM,GAAG,EACT,IAAKC,GACJA,IAAS,MAAQA,IAAS,KAAOA,EAAOA,EAAK,CAAC,EAAE,YAAgB,EAAAA,EAAK,UAAU,CAAC,CAAA,EAEjF,KAAK,GAAG,CAAA,2vBCkCb,MAAMC,EAAQC,EAAS,EAEjBC,EACJC,EAyBI,CAAE,SAAAC,CAAS,EAAIC,EAAa,EAE5BC,EAAkBC,EAAI,EAAE,EAExBC,EAAW,CACf,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,IACA,GACF,EAGMC,EAAwB,CAC5B,CAAE,KAAM,UAAW,MAAO,SAAU,EACpC,CAAE,KAAM,UAAW,MAAO,OAAQ,EAClC,CAAE,KAAM,eAAgB,MAAO,SAAU,EACzC,CAAE,KAAM,YAAa,MAAO,WAAY,EACxC,CAAE,KAAM,qBAAsB,MAAO,qBAAsB,EAC3D,CAAE,KAAM,QAAS,MAAO,QAAS,CACnC,EACMC,EAAeH,EAAwB,EAAE,EACzCI,EAAWJ,EAAI,EAAE,EACjBK,EAAe,CACnB,8BACA,8BACA,0BACF,EAEM,CAAE,UAAAC,CAAA,EAAcC,EAAsBH,CAAQ,EAEpDI,EACE,IAAMb,EAAM,QACXc,GAAW,CACNA,GAAUA,EAAO,MAAM,MAAM,SAAW,GAC7BC,EAAA,CACf,CAEJ,EAEAC,EAAU,IAAM,CACV,OAAO,KAAKhB,EAAM,OAAO,EAAE,QAChBe,EAAA,CACf,CACD,EAED,SAASE,EAAgBC,EAA4B,CACnD,OAAOA,IAAcT,EAAS,KAAA,CAGhC,SAASM,GAAqB,CAE5B,MAAMI,EAAgB,CAAC,GAAGnB,EAAM,QAAQ,MAAM,KAAK,EAChD,QAAQ,EACR,OAAQoB,GAASV,EAAa,SAASU,EAAK,IAAI,CAAC,EAEpDhB,EAAgB,MAAQ,CACtB,GAAGJ,EAAM,QACT,QAAS,CAAE,MAAO,EAAG,EACrB,MAAO,CAAE,MAAOmB,CAAc,CAChC,EAESb,EAAA,QAASe,GAChBjB,EAAgB,MAAM,QAAQ,MAAM,KAAK,CACvC,WAAY,UACZ,YAAa,GACb,KAAMiB,EACN,KAAMA,CACP,CAAA,CACH,CAAA,CAGF,SAASC,EAAOJ,EAAyB,CACvCP,EAAUO,EAAW,OAAO,OAAOV,EAAa,KAAK,CAAC,EAClDU,IAAc,WACPhB,EAAA,CACP,gBAAiB,aACjB,YAAa,UACb,aAAcK,EAAsB,OAAQgB,GAAYA,EAAQ,OAASL,CAAS,EAAE,CAAC,EAAE,MACvF,QAAS,QAAA,CACV,CACH,kgDC/MWM,GAAkB;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,ECAxB,SAASC,IAAoB,CAOlC,MAAO,CAAE,WANWC,GAAS,CAC3B,KAAM,CAAE,aAAAC,EAAc,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,mBAAAC,CAAkB,EAAKL,EAExE,MAAO,CAAE,aAAAC,EAAc,QAAAC,EAAS,UAAAC,EAAW,MAAAC,EAAO,mBAAAC,CAAoB,CACvE,CAEoB,CACvB"}