{"version":3,"file":"DTuNRDuR.js","sources":["../../../../layers/world-of-oris/components/Magazine/RelatedStories/Item.vue","../../../../components/Node/MagazineArticle/index.vue","../../../../layers/world-of-oris/pages/[prefix]/magazine-article/index.vue"],"sourcesContent":["<template>\n  <DrupalLink :to=\"to\">\n    <MediaImage v-bind=\"image\" :image-style=\"imageStyle\" img-class=\"w-full\" />\n    <Text\n      v-if=\"overline\"\n      class=\"mt-16 w-full text-xs font-light uppercase text-grey-dark-02 md:mt-24\"\n    >\n      {{ overline }}\n    </Text>\n    <Text\n      class=\"mt-8 inline-block w-full text-lg font-light uppercase group-hover:underline group-focus:underline md:mt-16\"\n    >\n      {{ title }}\n    </Text>\n  </DrupalLink>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { RelatedStoryArticleFragment } from '#build/graphql-operations'\nimport { falsy } from '~/helpers/type'\n\nconst props = withDefaults(\n  defineProps<{\n    title?: string\n    id?: string\n    categories?: RelatedStoryArticleFragment['categories']\n    image?: RelatedStoryArticleFragment['image']\n    url?: RelatedStoryArticleFragment['url']\n    index?: number\n    totalStories?: number\n  }>(),\n  {\n    title: undefined,\n    id: undefined,\n    index: 0,\n    totalStories: 0,\n    categories: () => [],\n    image: undefined,\n    url: undefined,\n  },\n)\n\nconst to = computed(() => props.url?.path)\n\nconst overline = computed(() =>\n  props.categories\n    ?.map((v) => v.label)\n    .filter(falsy)\n    .join(', '),\n)\n\nconst imageStyleTall = defineImageStyle({\n  type: 'sizes',\n  aspectRatio: 2 / 3,\n  sizes: {\n    sm: 255,\n    md: 200,\n  },\n})\n\nconst imageStyleSmall = defineImageStyle({\n  type: 'sizes',\n  aspectRatio: 3 / 4,\n  sizes: {\n    sm: 255,\n    md: 200,\n  },\n})\n\nconst imageStyleSquare = defineImageStyle({\n  type: 'sizes',\n  aspectRatio: 1,\n  sizes: {\n    sm: 255,\n    md: 200,\n  },\n})\n\nconst imageStyle = computed(() => {\n  if (props.totalStories < 5) {\n    if (props.index % 2) {\n      return imageStyleTall\n    }\n    return imageStyleSquare\n  }\n\n  if (props.index === 0 || props.index === 4) {\n    return imageStyleSquare\n  }\n\n  if (props.index === 1 || props.index === 5) {\n    return imageStyleTall\n  }\n\n  return imageStyleSmall\n})\n\ndefineOptions({\n  name: 'MagazineRelatedStoriesItem',\n})\n</script>\n","<template>\n  <div class=\"mb-[167px] md:mb-[303px]\">\n    <BlokkliProvider\n      v-if=\"blokkliProps\"\n      v-slot=\"{ entity }\"\n      v-bind=\"blokkliProps\"\n      :entity=\"props\"\n    >\n      <section class=\"layout-grid mx-auto mt-112 max-w-screen-xxxl\">\n        <div\n          class=\"col-start-2 col-end-[-2] flex flex-col justify-end lg:col-end-7\"\n        >\n          <div\n            v-if=\"magazineCategories\"\n            class=\"mb-16 text-base/[24px] font-light uppercase tracking-[1.28px] text-black md:mb-24\"\n          >\n            {{ magazineCategories }}\n          </div>\n          <Text\n            v-blokkli-editable:title\n            class=\"text-5xl/[56px] font-light uppercase text-black md:text-6xl lg:text-7xl\"\n          >\n            {{ entity?.title || title }}\n          </Text>\n        </div>\n        <div class=\"col-start-1 col-end-[-1] pt-48 lg:col-start-7 lg:pt-0\">\n          <MediaImage\n            v-blokkli-droppable:field_title_image\n            v-bind=\"entity?.image || image\"\n            img-class=\"w-full\"\n            :image-style=\"imageStyle\"\n          />\n        </div>\n      </section>\n      <BlokkliField :list=\"paragraphs\" name=\"field_paragraphs\" />\n    </BlokkliProvider>\n\n    <div v-if=\"relatedStories.length\" class=\"overflow-hidden\">\n      <h2\n        class=\"mx-16 border-t border-t-grey-light-01 pt-[23px] text-center text-xl font-light uppercase leading-loose tracking-widest md:mx-72 md:pt-[31px]\"\n      >\n        {{ $texts('relatedStories', 'Related Stories') }}\n      </h2>\n      <div class=\"ml-16 md:ml-72 md:mr-48\">\n        <Swiper\n          slides-per-view=\"auto\"\n          :modules=\"[Mousewheel, FreeMode]\"\n          :free-mode=\"true\"\n          :mousewheel=\"{ releaseOnEdges: true, forceToAxis: true }\"\n          :space-between=\"isMobile ? 16 : 24\"\n          class=\"mt-[22px] w-fit md:mt-[38px]\"\n        >\n          <SwiperSlide v-for=\"(story, index) in relatedStories\" :key=\"index\">\n            <MagazineRelatedStoriesItem\n              :key=\"story.id\"\n              :index=\"index\"\n              :total-stories=\"relatedStories.length\"\n              v-bind=\"story\"\n              class=\"w-[255px] md:w-[196px]\"\n            />\n          </SwiperSlide>\n        </Swiper>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { Swiper, SwiperSlide } from 'swiper/vue'\nimport { Mousewheel, FreeMode } from 'swiper/modules'\nimport { type NodeMagazineArticleFragment } from '#graphql-operations'\nimport { falsy, narrowTypeByProperty } from '~/helpers/type'\n\nconst { $texts } = useEasyTexts()\n\nconst props = defineProps<{\n  title?: string\n  categories?: NodeMagazineArticleFragment['categories']\n  image?: NodeMagazineArticleFragment['image']\n  paragraphs?: NodeMagazineArticleFragment['paragraphs']\n  relatedStoriesQuery?: NodeMagazineArticleFragment['relatedStoriesQuery']\n  blokkliProps?: NodeMagazineArticleFragment['blokkliProps']\n}>()\n\nconst { isMobile } = useViewport()\n\nconst magazineCategories = computed(() =>\n  props.categories\n    ?.map((c) => c.label)\n    .filter(falsy)\n    .join(', '),\n)\n\nconst imageStyle = defineImageStyle({\n  type: 'pictures',\n  pictures: {\n    sm: {\n      width: 770,\n      aspectRatio: 1,\n    },\n    md: {\n      width: 1125,\n      aspectRatio: 16 / 9,\n    },\n    lg: {\n      width: 680,\n      aspectRatio: 3 / 2,\n    },\n    xl: {\n      width: 810,\n      aspectRatio: 3 / 2,\n    },\n    xxl: {\n      width: 1345,\n      aspectRatio: 3 / 2,\n    },\n  },\n})\n\nconst relatedStories = computed(() =>\n  (props.relatedStoriesQuery?.items || [])\n    .map((v) => narrowTypeByProperty(v, 'image'))\n    .filter(falsy),\n)\n\nconst scrollBarWidthPx = ref('0px')\nif (process.browser) {\n  const updateScrollBarWidth = () => {\n    const scrollBarWidth =\n      window.innerWidth - document.documentElement.clientWidth\n    scrollBarWidthPx.value = `${scrollBarWidth}px`\n  }\n  updateScrollBarWidth()\n\n  window.visualViewport?.addEventListener('resize', updateScrollBarWidth)\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import 'swiper/scss';\n\n:deep() {\n  @import 'swiper/scss';\n  @import 'swiper/scss/free-mode';\n  @import 'swiper/scss/mousewheel';\n}\n\n.swiper {\n  max-width: calc(100cqw - 16px - v-bind('scrollBarWidthPx'));\n  padding-right: 16px;\n  overflow: visible;\n\n  @screen md {\n    max-width: calc(100cqw - 72px - v-bind('scrollBarWidthPx'));\n    padding-right: 24px;\n  }\n}\n\n:deep(.swiper-slide) {\n  width: 255px;\n\n  @screen md {\n    width: 196px;\n  }\n\n  &:last-child {\n    margin-right: 0 !important;\n  }\n}\n</style>\n","<template>\n  <NodeMagazineArticle\n    v-if=\"node\"\n    v-bind=\"node\"\n    class=\"m-auto max-w-[2500px]\"\n  />\n</template>\n\n<script lang=\"ts\" setup>\nimport type { NodeMagazineArticleFragment } from '#graphql-operations'\n\ndefinePageMeta({\n  name: 'worldoforis-article',\n  path: '/:prefix/worldoforis/:category/:slug(.*)*',\n  drupalRoute: true,\n})\n\nconst nuxtRoute = useRoute()\n\nconst { data: query } = await useAsyncData(nuxtRoute.path, () =>\n  useCachedGraphqlQuery('routeNodeMagazineArticle', {\n    path: nuxtRoute.path,\n  }).then((v) => v.data),\n)\n\nconst { entity: node } =\n  await useDrupalRoute<NodeMagazineArticleFragment>(query)\n</script>\n\n<script lang=\"ts\">\nexport default {\n  name: 'PageArticleSlug',\n}\n</script>\n\n<style lang=\"scss\" scoped>\n:deep(.paragraph),\n.paragraph {\n  @include paragraph-spacing;\n}\n</style>\n"],"names":["props","__props","to","computed","_a","overline","v","falsy","imageStyleTall","defineImageStyle","imageStyleSmall","imageStyleSquare","imageStyle","$texts","useEasyTexts","isMobile","useViewport","magazineCategories","c","relatedStories","narrowTypeByProperty","scrollBarWidthPx","ref","updateScrollBarWidth","scrollBarWidth","__default__","nuxtRoute","useRoute","query","__temp","__restore","_withAsyncContext","useAsyncData","useCachedGraphqlQuery","node","useDrupalRoute"],"mappings":"0+BAqBA,MAAMA,EAAQC,EAqBRC,EAAKC,EAAS,IAAA,OAAM,OAAAC,EAAAJ,EAAM,MAAN,YAAAI,EAAW,KAAI,EAEnCC,EAAWF,EAAS,IAAA,OACxB,OAAAC,EAAAJ,EAAM,aAAN,YAAAI,EACI,IAAKE,GAAMA,EAAE,OACd,OAAOC,GACP,KAAK,MAAI,EAGRC,EAAiBC,EAAiB,CACtC,KAAM,QACN,YAAa,EAAI,EACjB,MAAO,CACL,GAAI,IACJ,GAAI,GACN,CAAA,CACD,EAEKC,EAAkBD,EAAiB,CACvC,KAAM,QACN,YAAa,EAAI,EACjB,MAAO,CACL,GAAI,IACJ,GAAI,GACN,CAAA,CACD,EAEKE,EAAmBF,EAAiB,CACxC,KAAM,QACN,YAAa,EACb,MAAO,CACL,GAAI,IACJ,GAAI,GACN,CAAA,CACD,EAEKG,EAAaT,EAAS,IACtBH,EAAM,aAAe,EACnBA,EAAM,MAAQ,EACTQ,EAEFG,EAGLX,EAAM,QAAU,GAAKA,EAAM,QAAU,EAChCW,EAGLX,EAAM,QAAU,GAAKA,EAAM,QAAU,EAChCQ,EAGFE,CACR,qrCCtBK,KAAA,CAAE,OAAAG,GAAWC,IAEbd,EAAQC,EASR,CAAE,SAAAc,GAAaC,IAEfC,EAAqBd,EAAS,IAAA,OAClC,OAAAC,EAAAJ,EAAM,aAAN,YAAAI,EACI,IAAKc,GAAMA,EAAE,OACd,OAAOX,GACP,KAAK,MAAI,EAGRK,EAAaH,EAAiB,CAClC,KAAM,WACN,SAAU,CACR,GAAI,CACF,MAAO,IACP,YAAa,CACf,EACA,GAAI,CACF,MAAO,KACP,YAAa,GAAK,CACpB,EACA,GAAI,CACF,MAAO,IACP,YAAa,EAAI,CACnB,EACA,GAAI,CACF,MAAO,IACP,YAAa,EAAI,CACnB,EACA,IAAK,CACH,MAAO,KACP,YAAa,EAAI,CACnB,CACF,CAAA,CACD,EAEKU,EAAiBhB,EAAS,IAAA,OAC7B,SAAAC,EAAAJ,EAAM,sBAAN,YAAAI,EAA2B,QAAS,CAAA,GAClC,IAAKE,GAAMc,EAAqBd,EAAG,OAAO,CAAC,EAC3C,OAAOC,CAAK,EAAA,EAGXc,EAAmBC,EAAI,KAAK,EACb,CACnB,MAAMC,EAAuB,IAAM,CACjC,MAAMC,EACJ,OAAO,WAAa,SAAS,gBAAgB,YAC9BH,EAAA,MAAQ,GAAGG,CAAc,IAAA,EAEvBD,KAEdnB,EAAA,OAAA,iBAAA,MAAAA,EAAgB,iBAAiB,SAAUmB,EACpD,6zCCzGAE,GAAe,CACb,KAAM,iBACR,qCAfA,MAAMC,EAAYC,IAEZ,CAAE,KAAMC,IAAU,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAMC,GAAaN,EAAU,KAAM,IACzDO,GAAsB,2BAA4B,CAChD,KAAMP,EAAU,IACjB,CAAA,EAAE,KAAMpB,GAAMA,EAAE,IAAI,EACvB,aAAA,CAAA,mBAEM,CAAE,OAAQ4B,IACR,CAAAL,EAAAC,CAAA,EAAAC,EAAA,IAAAI,GAA4CP,CAAK,CAAA"}