{"version":3,"file":"C_9mZEAu.js","sources":["../../../../components/TableOfContents/index.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"tocItems.length\"\n    class=\"bg-primary-100 border-t-2 border-primary-600 mt-20 md:mt-30 xl:mt-40\"\n    :class=\"{ 'sticky bottom-0 z-50': !isEditing }\"\n  >\n    <a\n      href=\"#table-of-contents\"\n      class=\"pre-heading text-primary-700 py-20 lg:py-25 flex justify-between mobile-only:text-lg container\"\n      @click=\"onClick\"\n    >\n      <span>{{ $texts('toc.title', 'Auf dieser Seite') }}</span>\n      <SpriteSymbol\n        v-show=\"!tocVisible\"\n        name=\"arrow-south\"\n        class=\"size-20\"\n        aria-hidden=\"true\"\n      />\n    </a>\n  </div>\n  <div\n    v-if=\"tocItems.length\"\n    id=\"table-of-contents\"\n    ref=\"tocEl\"\n    class=\"bg-primary-100 pb-20 lg:pb-30 mb-20 md:mb-30 xl:mb-40 -mt-1 scroll-mt-20\"\n  >\n    <nav class=\"container\">\n      <ul\n        class=\"grid grid-cols-1 md:grid-cols-3 auto-rows-auto gap-10 md:gap-20\"\n      >\n        <li v-for=\"(item, key) in tocItems\" :key=\"key\">\n          <a\n            :href=\"'#' + item.link\"\n            class=\"link with-icon text-lg xl:text-xl text-balance\"\n          >\n            <span>{{ item.text }}</span>\n          </a>\n        </li>\n      </ul>\n    </nav>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport type { FieldListItem } from '#blokkli/types'\nimport type {\n  ParagraphFragment,\n  ParagraphDynamicTeaserListFragment,\n  ParagraphExpandSectionFragment,\n  ParagraphFocusTeaserFragment,\n  ParagraphFromLibraryFragment,\n  ParagraphGalleryFragment,\n  ParagraphPopularLinksFragment,\n  ParagraphSectionTitleFragment,\n  ParagraphTableFragment,\n  ParagraphTeaserListFragment,\n  ParagraphVideoRemoteFragment,\n  ParagraphCsdServiceFragment,\n} from '#graphql-operations'\nimport { useElementVisibility } from '@vueuse/core'\nimport { slugify } from '~/helpers/slugify'\nimport { falsy } from '~/helpers/type'\nimport { buildSectionTitle } from '~/helpers/dynamicTeaserList'\n\nconst tocEl = ref<HTMLDivElement | null>(null)\nconst { $texts } = useNuxtApp()\n\nconst tocVisible = useElementVisibility(tocEl)\n\nfunction onClick(e: MouseEvent) {\n  if (tocVisible.value) {\n    e.preventDefault()\n  }\n}\n\ntype TocItem = {\n  text: string\n  link: string\n}\n\ntype NarrowedParagraphItem<T extends ParagraphFragment> = FieldListItem & {\n  props: T\n}\n\nconst props = defineProps<{\n  title?: string\n  items?: TocItem[]\n  paragraphItems?: FieldListItem[]\n  isEditing?: boolean\n}>()\n\nconst tocItems = computed(() => {\n  if (props.paragraphItems) {\n    return build(props.paragraphItems || []) || []\n  }\n  return props.items || []\n})\n\n// This type guard ensures that TS knows which ParagraphFragment we're actually working with.\n// To keep things simple and the amount of type guard functions at a minimum, we're working with generics.\nfunction hasFragmentType<T extends ParagraphFragment>(\n  item: FieldListItem,\n  desiredEntityBundle: string,\n): item is NarrowedParagraphItem<T> {\n  return item.bundle === desiredEntityBundle\n}\n\nfunction hasData(item: FieldListItem) {\n  const props = item.props\n\n  if (!props) {\n    return false\n  }\n\n  if (hasFragmentType<ParagraphTableFragment>(item, 'table')) {\n    return (\n      (props.structuredTable &&\n        props.structuredTable.thead &&\n        props.structuredTable.thead.length > 0) ||\n      (props.structuredTable.tbody && props.structuredTable.tbody.length > 0)\n    )\n  }\n\n  if (hasFragmentType<ParagraphPopularLinksFragment>(item, 'popular_links')) {\n    return !!props.links?.length\n  }\n\n  if (hasFragmentType<ParagraphVideoRemoteFragment>(item, 'video_remote')) {\n    return !!props.video?.url\n  }\n\n  if (hasFragmentType<ParagraphSectionTitleFragment>(item, 'section_title')) {\n    return !!props.title\n  }\n\n  if (hasFragmentType<ParagraphCsdServiceFragment>(item, 'csd_service')) {\n    return !!props.csdService\n  }\n\n  if (hasFragmentType<ParagraphTeaserListFragment>(item, 'event_list')) {\n    return !!props.items?.length\n  }\n\n  // Everything else isn't targeted, such as expand section etc.\n  // or wouldn't show up in the ToC anyway, since the `getTocItem`\n  // function may very well return `undefined`, or it's shown regardless\n  // of its content state, such as the gallery.\n  return true\n}\n\nfunction build(items: FieldListItem[]): TocItem[] {\n  function getTocItem(\n    item?: FieldListItem,\n    overrideOptions?: Record<string, string>,\n  ): string | undefined {\n    if (!item || !('props' in item)) {\n      return\n    }\n\n    // No data, no toc.\n    if (!hasData(item)) {\n      return\n    }\n\n    const options: Record<string, string | number | boolean> =\n      overrideOptions || item.options || {}\n\n    if (\n      hasFragmentType<ParagraphFromLibraryFragment>(item, 'from_library') &&\n      item.props.libraryItem?.block\n    ) {\n      return getTocItem(item.props.libraryItem.block, item.options)\n    }\n\n    // By default, the checkbox is enabled, so the value of the option is\n    // either undefined, null or an empty string.\n    // Only when the checkbox was explicitly unchecked is the value '0'\n    // (or 0 when set by PHP because PHP).\n    if (\n      'showInToc' in options &&\n      (options.showInToc === '0' ||\n        options.showInToc === 0 ||\n        options.showInToc === '')\n    ) {\n      return\n    }\n\n    if (\n      hasFragmentType<ParagraphExpandSectionFragment>(item, 'expand_section') ||\n      hasFragmentType<ParagraphTableFragment>(item, 'table') ||\n      hasFragmentType<ParagraphPopularLinksFragment>(item, 'popular_links') ||\n      hasFragmentType<ParagraphVideoRemoteFragment>(item, 'video_remote') ||\n      hasFragmentType<ParagraphGalleryFragment>(item, 'gallery') ||\n      hasFragmentType<ParagraphFocusTeaserFragment>(item, 'focus_teaser')\n    ) {\n      return item.props.title\n    }\n\n    if (hasFragmentType<ParagraphTeaserListFragment>(item, 'teaser_list')) {\n      return item.props.title || $texts('teaserListTitle', 'Aktuelles')\n    }\n\n    if (hasFragmentType<ParagraphSectionTitleFragment>(item, 'section_title')) {\n      return item.props.anchor || item.props.title\n    }\n\n    // This check was added for some reason, but it makes no sense.\n    // It forces users to explicitly uncheck and check the checkbox in the\n    // editor so that '1' is actually stored. Since the default value is true\n    // (see comment above), this check here excludes a value of '', undefined\n    // or null which would indicate \"no value was set\", which normally would\n    // make the paragraph appear in the ToC.\n    if (\n      options.showInToc === '1' &&\n      hasFragmentType<ParagraphCsdServiceFragment>(item, 'csd_service')\n    ) {\n      return item.props.csdService && 'name' in item.props.csdService\n        ? item.props.csdService.name\n        : undefined\n    }\n\n    if (hasFragmentType<ParagraphTeaserListFragment>(item, 'event_list')) {\n      return item.props.title || $texts('events', 'Veranstaltungen')\n    }\n\n    if (\n      hasFragmentType<ParagraphDynamicTeaserListFragment>(\n        item,\n        'dynamic_teaser_list',\n      ) &&\n      item.props.contentType\n    ) {\n      return buildSectionTitle(item.props.contentType)\n    }\n  }\n\n  return items\n    .map((v) => getTocItem(v))\n    .filter(falsy)\n    .map((v) => {\n      return {\n        text: v,\n        link: slugify(v),\n      }\n    })\n    .filter((v) => !!v.text)\n}\n\ndefineOptions({\n  name: 'TableOfContents',\n})\n</script>\n"],"names":["tocEl","ref","$texts","useNuxtApp","tocVisible","useElementVisibility","onClick","e","props","__props","tocItems","computed","build","hasFragmentType","item","desiredEntityBundle","hasData","items","getTocItem","overrideOptions","options","_a","buildSectionTitle","v","falsy","slugify"],"mappings":"4eAgEM,MAAAA,EAAQC,EAA2B,IAAI,EACvC,CAAE,OAAAC,CAAO,EAAIC,EAAW,EAExBC,EAAaC,EAAqBL,CAAK,EAE7C,SAASM,EAAQC,EAAe,CAC1BH,EAAW,OACbG,EAAE,eAAe,CACnB,CAYF,MAAMC,EAAQC,EAORC,EAAWC,EAAS,IACpBH,EAAM,eACDI,EAAMJ,EAAM,gBAAkB,CAAA,CAAE,GAAK,CAAC,EAExCA,EAAM,OAAS,CAAC,CACxB,EAIQ,SAAAK,EACPC,EACAC,EACkC,CAClC,OAAOD,EAAK,SAAWC,CAAA,CAGzB,SAASC,EAAQF,EAAqB,WACpC,MAAMN,EAAQM,EAAK,MAEnB,OAAKN,EAIDK,EAAwCC,EAAM,OAAO,EAEpDN,EAAM,iBACLA,EAAM,gBAAgB,OACtBA,EAAM,gBAAgB,MAAM,OAAS,GACtCA,EAAM,gBAAgB,OAASA,EAAM,gBAAgB,MAAM,OAAS,EAIrEK,EAA+CC,EAAM,eAAe,EAC/D,CAAC,GAACN,EAAAA,EAAM,QAANA,MAAAA,EAAa,QAGpBK,EAA8CC,EAAM,cAAc,EAC7D,CAAC,GAACN,EAAAA,EAAM,QAANA,MAAAA,EAAa,KAGpBK,EAA+CC,EAAM,eAAe,EAC/D,CAAC,CAACN,EAAM,MAGbK,EAA6CC,EAAM,aAAa,EAC3D,CAAC,CAACN,EAAM,WAGbK,EAA6CC,EAAM,YAAY,EAC1D,CAAC,GAACN,EAAAA,EAAM,QAANA,MAAAA,EAAa,QAOjB,GApCE,EAoCF,CAGT,SAASI,EAAMK,EAAmC,CACvC,SAAAC,EACPJ,EACAK,EACoB,OAMhB,GALA,CAACL,GAAQ,EAAE,UAAWA,IAKtB,CAACE,EAAQF,CAAI,EACf,OAGF,MAAMM,EACJD,GAAmBL,EAAK,SAAW,CAAC,EAEtC,GACED,EAA8CC,EAAM,cAAc,KAClEO,EAAAP,EAAK,MAAM,cAAX,MAAAO,EAAwB,OAExB,OAAOH,EAAWJ,EAAK,MAAM,YAAY,MAAOA,EAAK,OAAO,EAQ5D,GAAA,gBAAeM,IACdA,EAAQ,YAAc,KACrBA,EAAQ,YAAc,GACtBA,EAAQ,YAAc,KAMxB,IAAAP,EAAgDC,EAAM,gBAAgB,GACtED,EAAwCC,EAAM,OAAO,GACrDD,EAA+CC,EAAM,eAAe,GACpED,EAA8CC,EAAM,cAAc,GAClED,EAA0CC,EAAM,SAAS,GACzDD,EAA8CC,EAAM,cAAc,EAElE,OAAOA,EAAK,MAAM,MAGhB,GAAAD,EAA6CC,EAAM,aAAa,EAClE,OAAOA,EAAK,MAAM,OAASZ,EAAO,kBAAmB,WAAW,EAG9D,GAAAW,EAA+CC,EAAM,eAAe,EACtE,OAAOA,EAAK,MAAM,QAAUA,EAAK,MAAM,MASzC,GACEM,EAAQ,YAAc,KACtBP,EAA6CC,EAAM,aAAa,EAEzD,OAAAA,EAAK,MAAM,YAAc,SAAUA,EAAK,MAAM,WACjDA,EAAK,MAAM,WAAW,KACtB,OAGF,GAAAD,EAA6CC,EAAM,YAAY,EACjE,OAAOA,EAAK,MAAM,OAASZ,EAAO,SAAU,iBAAiB,EAI7D,GAAAW,EACEC,EACA,qBAAA,GAEFA,EAAK,MAAM,YAEJ,OAAAQ,EAAkBR,EAAK,MAAM,WAAW,EACjD,CAGF,OAAOG,EACJ,IAAKM,GAAML,EAAWK,CAAC,CAAC,EACxB,OAAOC,CAAK,EACZ,IAAKD,IACG,CACL,KAAMA,EACN,KAAME,EAAQF,CAAC,CACjB,EACD,EACA,OAAQA,GAAM,CAAC,CAACA,EAAE,IAAI,CAAA"}