{"version":3,"file":"BmIJB1-t.js","sources":["../../../../pages/knowledge-hub/articles/index.vue"],"sourcesContent":["<template>\n  <DsPageContent>\n    <DsHero\n      v-if=\"content\"\n      :title=\"content.title\"\n      theme=\"grey\"\n      :navigation-data=\"backLink\"\n      :with-title-size-large=\"false\"\n    />\n    <KnowledgeHubFilters\n      :initial-filters=\"initialFilters\"\n      @selected=\"handleFiltersUpdate\"\n    />\n\n    <DsSection v-if=\"isLoading\">\n      <DsPlaceholderLoader />\n    </DsSection>\n\n    <template v-else>\n      <DsSection\n        v-if=\"_articles && _articles.length\"\n        :with-space=\"false\"\n        class=\"ds-padding-y-48\"\n      >\n        <DsGrid\n          :items=\"_articles\"\n          :column-width=\"{ small: 12, medium: 6, large: 4 }\"\n        >\n          <template #default=\"{ item }\">\n            <DsCardBlog\n              class=\"kh-article-card ds-md-margin-bottom-24\"\n              :image=\"item.image\"\n              :image-with-sizes=\"item.imageWithSizes\"\n              :title=\"item.title\"\n              :tag=\"item.tag\"\n              :link=\"item.link\"\n              :subtitle=\"`${item.dateFormatted} · ${t('minutesAmount', item.minutesToRead)}`\"\n              aspect-ratio=\"16/9\"\n              show-placeholder-on-image-error\n            />\n          </template>\n        </DsGrid>\n        <DsPlaceholderLoader v-if=\"isLoadingMore\" />\n        <div class=\"ds-grid\">\n          <div class=\"ds-grid__col ds-grid__col--12\">\n            <button\n              v-if=\"canLoadMore\"\n              class=\"ds-button ds-button--secondary ds-button--black ds-button-link ds-margin-top-48\"\n              :class=\"{ 'ds-button-link--disabled': isLoadingMore }\"\n              @click=\"loadMore\"\n            >\n              {{ labels.loadMoreArticlesButton }}\n            </button>\n          </div>\n        </div>\n      </DsSection>\n      <DsSection v-else>\n        <div class=\"ds-grid\">\n          <div class=\"ds-grid__col ds-grid__col--12\">\n            <h2 class=\"ds-heading-xsmall\">\n              {{ content.noResultsTitle }}\n            </h2>\n            <p>\n              {{ content.noResultsSubtitle }}\n            </p>\n          </div>\n        </div>\n      </DsSection>\n    </template>\n  </DsPageContent>\n</template>\n<script setup>\nimport { DsPageContent, DsHero, DsSection, DsPlaceholderLoader, DsGrid, DsCardBlog } from 'awds'\nimport { PageKnowledgeHubArticles } from '../../../../core/data-layer/definitions/knowledgeHub'\nimport KnowledgeHubFilters from '../../../components/knowledge-hub/knowledge-hub-filters.vue'\nimport { mapperKnowledgeHubArticlesSummaries } from '../../../../core/data-layer/knowledge-hub/summary/mapper-knowledge-hub-articles-summaries'\nimport buildQuery from '../../../data-layer/pages/page-knowledge-hub-articles/query-page-knowledge-hub-articles'\n\nconst { t } = useI18n()\nconst { queryContentful } = useQueries()\n\nconst { labels } = useKnowledgeHubGlobalData()\nconst { locale: localeRef } = useI18n()\nconst { getLocaleIso } = useLocales()\nconst { useStandardAsyncData, onBeforeAdyenData, onAfterAdyenData, content } = useKnowledgeHubPageData()\n\nconst route = useRoute()\nconst { getSlug, getParentPath } = usePageUtils()\nconst slug = getSlug(route.path) || 'articles'\n\nconst store = useRoutesStore()\nconst router = useRouter()\n\nconst LIMIT = 18\n\nawait onBeforeAdyenData({\n  globalDataContentType: 'PageKnowledgeHubArticles'\n})\n\nconst filtersToQuery = (filters) =>\n  filters.reduce(\n    (prevValue, filter) => ({\n      ...prevValue,\n      [filter.name]: filter.value\n    }),\n    {}\n  )\nconst queryToFilters = (query) =>\n  Object.entries(query).map(([name, value]) => {\n    if (['industries', 'topics', 'products'].includes(name) && !Array.isArray(value)) {\n      return { name, value: [value] }\n    }\n    return { name, value }\n  })\n\nconst { data } = await useAsyncData('knowledge-hub-articles' + route.params.slug + '-' + localeRef.value, async () => {\n  const { pageData } = await useStandardAsyncData(PageKnowledgeHubArticles, {})\n  if (!pageData || !Object.keys(pageData).length) {\n    throw createError({ statusCode: 404, message: 'Page not found' })\n  }\n\n  const slugParent = getParentPath(route.path)\n\n  return {\n    pageData,\n    slugParent\n  }\n})\n\nconst page = ref(0)\nconst _articles = ref([])\nconst initialFilters = ref([])\nconst isLoading = ref(false)\nconst isLoadingMore = ref(false)\nconst _total = ref(1)\n\nconst parentPageUrl = computed(() => {\n  return data.value?.slugParent\n})\n\nconst backLink = computed(() => {\n  return { text: labels.value.backLinkTitle || 'Knowledge Hub', url: parentPageUrl.value }\n})\n\nconst canLoadMore = computed(() => {\n  return _total.value > _articles.value.length\n})\n\nonMounted(() => {\n  const { query } = route\n  const calculatedInitialFilters = queryToFilters(query)\n  initialFilters.value = calculatedInitialFilters\n\n  updateData(filtersToQuery(calculatedInitialFilters))\n})\n\nonBeforeRouteUpdate((to, from, next) => {\n  const { query } = to\n  updateData(query)\n  next()\n})\n\nconst handleFiltersUpdate = (updatedFilters) => {\n  const queryValues = filtersToQuery(updatedFilters)\n  if (JSON.stringify(route.query) !== JSON.stringify(queryValues)) {\n    router.push({ query: queryValues })\n  }\n}\n\nconst fetchArticles = async (queryParams) => {\n  const { articleType, products, industries, topics } = queryParams\n  const locale = getLocaleIso(localeRef.value)\n  const gqlQuery = buildQuery(articleType ? [articleType] : [], products, industries, topics)\n  const variables = {\n    locale,\n    skip: page.value * LIMIT,\n    limit: LIMIT,\n    slug,\n    preview: false\n  }\n\n  const { articles } = await queryContentful(\n    {\n      query: gqlQuery,\n      variables\n    },\n    { log: false }\n  )\n\n  const articleItems = articles.items\n  const articleTotal = articles.total\n\n  const imageSizes = {\n    small: { width: 368, height: 207, aspectRatio: '16/9' },\n    medium: { width: 324, height: 182, aspectRatio: '16/9' },\n    large: { width: 327, height: 184, aspectRatio: '16/9' }\n  }\n\n  const { getUrl, getInternalUrl } = useRoutes(store.routes, localeRef)\n\n  const options = {\n    getUrl,\n    getInternalUrl,\n    locale: localeRef.value,\n    imageOptions: {\n      resize: true,\n      lazy: true,\n      sizes: imageSizes\n    }\n  }\n\n  return {\n    articles: mapperKnowledgeHubArticlesSummaries(articleItems, options),\n    total: articleTotal\n  }\n}\n\nconst updateData = async (queryParams) => {\n  isLoading.value = true\n  page.value = 0\n  try {\n    const { articles, total } = await fetchArticles(queryParams)\n    _articles.value = articles\n    _total.value = total\n    isLoading.value = false\n  } catch (e) {\n    isLoading.value = false\n    // eslint-disable-next-line no-console\n    console.error(e)\n    throw new Error(`Query failed! - ${e}`)\n  }\n}\n\nconst loadMore = async () => {\n  isLoadingMore.value = true\n  page.value = page.value + 1\n  try {\n    const { query } = route\n    const { articles } = await fetchArticles(query)\n    isLoadingMore.value = false\n    _articles.value = [..._articles.value, ...articles]\n  } catch (e) {\n    // eslint-disable-next-line no-console\n    console.error(e)\n    throw new Error(`Query failed! - ${e}`)\n  }\n}\n\nawait onAfterAdyenData(data.value)\n</script>\n<style lang=\"scss\" scoped>\n@import 'awds/foundation-vars.scss';\n\n/* Prevent misalignment: Add a fixed max height to the card to prevent issues when using SVGs that are not transformed using fixed width and height */\n.kh-article-card :deep(.ds-blog-card__image img) {\n  max-height: 282px;\n}\n</style>\n"],"names":["LIMIT","t","useI18n","queryContentful","useQueries","labels","useKnowledgeHubGlobalData","localeRef","getLocaleIso","useLocales","useStandardAsyncData","onBeforeAdyenData","onAfterAdyenData","content","useKnowledgeHubPageData","route","useRoute","getSlug","getParentPath","usePageUtils","slug","store","useRoutesStore","router","useRouter","__temp","__restore","_withAsyncContext","filtersToQuery","filters","prevValue","filter","queryToFilters","query","name","value","data","useAsyncData","pageData","PageKnowledgeHubArticles","createError","slugParent","page","ref","_articles","initialFilters","isLoading","isLoadingMore","_total","parentPageUrl","computed","_a","backLink","canLoadMore","onMounted","calculatedInitialFilters","updateData","onBeforeRouteUpdate","to","from","next","handleFiltersUpdate","updatedFilters","queryValues","fetchArticles","queryParams","articleType","products","industries","topics","locale","gqlQuery","buildQuery","variables","articles","articleItems","articleTotal","imageSizes","getUrl","getInternalUrl","useRoutes","options","mapperKnowledgeHubArticlesSummaries","total","e","loadMore"],"mappings":"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"}