{"version":3,"file":"ContentElementsSlot.v4pQk_7i.js","sources":["../../../../components/mop/cms/ContentElementsSlot.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { getHashFromString } from '@mop/shared/utils/util';\nimport type { ConcreteComponent } from 'vue';\nimport UiCmsAnchor from '@mop/ui/components/cms/UiCmsAnchor.vue';\nimport UiCmsBenefit from '@mop/ui/components/cms/UiCmsBenefit.vue';\nimport UiCmsCardCarousel from '@mop/ui/components/cms/UiCmsCardCarousel.vue';\nimport UiCmsCountdown from '@mop/ui/components/cms/UiCmsCountdown.vue';\nimport UiCmsCta from '@mop/ui/components/cms/UiCmsCta.vue';\nimport UiCmsDoubleCard from '@mop/ui/components/cms/UiCmsDoubleCard.vue';\nimport UiCmsFaqImageTiles from '@mop/ui/components/cms/UiCmsFaqImageTiles.vue';\nimport UiCmsFullWidthBanner from '@mop/ui/components/cms/UiCmsFullWidthBanner.vue';\nimport UiCmsGenderSwitch from '@mop/ui/components/cms/UiCmsGenderSwitch.vue';\nimport UiCmsHeadline from '@mop/ui/components/cms/UiCmsHeadline.vue';\nimport UiCmsHtml from '@mop/ui/components/cms/UiCmsHtml.vue';\nimport UiCmsImageText from '@mop/ui/components/cms/UiCmsImageText.vue';\nimport UiCmsRichText from '@mop/ui/components/cms/UiCmsRichText.vue';\nimport UiCmsSeoTeaser from '@mop/ui/components/cms/UiCmsSeoTeaser.vue';\nimport UiCmsSeparator from '@mop/ui/components/cms/UiCmsSeparator.vue';\nimport UiCmsSizeTable from '@mop/ui/components/cms/UiCmsSizeTable.vue';\nimport UiCmsSlider from '@mop/ui/components/cms/UiCmsSlider.vue';\nimport UiCmsStaticNavigation from '@mop/ui/components/cms/UiCmsStaticNavigation.vue';\nimport UiCmsTable from '@mop/ui/components/cms/UiCmsTable.vue';\nimport UiCmsTextCarousel from '@mop/ui/components/cms/UiCmsTextCarousel.vue';\nimport UiCmsTimeline from '@mop/ui/components/cms/UiCmsTimeline.vue';\nimport UiCmsTripleCard from '@mop/ui/components/cms/UiCmsTripleCard.vue';\nimport UiCmsTripleTeaser from '@mop/ui/components/cms/UiCmsTripleTeaser.vue';\nimport UiCmsVideoVimeo from '@mop/ui/components/cms/UiCmsVideoVimeo.vue';\nimport UiCmsElementNotFound from '@mop/ui/components/cms/UiCmsElementNotFound.vue';\n\nimport CompanyBlogNewsTripleCard from '@/components/mop/cms/company/BlogNewsTripleCard.vue';\nimport CompanyTopJobs from '@/components/mop/cms/company/TopJobs.vue';\nimport CompanyVacancies from '@/components/mop/cms/company/Vacancies.vue';\nimport CompanyAudio from '@/components/mop/cms/company/Audio.vue';\nimport type { CmsContentElementModel, CmsContentElementModelSlotItem, CmsVisibility } from '@/types/cms';\n\ndefineOptions({\n  name: 'MopCmsContentElementsSlot',\n});\n\nconst props = defineProps({\n  id: {\n    type: String,\n    required: true,\n  },\n  elements: {\n    type: Array as PropType<CmsContentElementModel[]>,\n    required: true,\n  },\n  noPadding: {\n    type: Boolean,\n    default: false,\n  },\n  lazyLoad: {\n    type: Boolean,\n    default: false,\n  },\n  campaignName: {\n    type: String,\n    default: null,\n  },\n});\n\nconst { $storyblokLivePreview } = useNuxtApp();\nconst isStoryblokLivePreview = $storyblokLivePreview.isEnabled;\nconst forceLazyLoadFromIndex = 3;\nconst elementObservers: IntersectionObserver[] = [];\n\nonUnmounted(() => {\n  elementObservers.forEach((elementObserver) => {\n    elementObserver.disconnect();\n  });\n});\n\nconst componentMapping = {\n  // Global ui components\n  Anchor: UiCmsAnchor,\n  Benefit: UiCmsBenefit,\n  CardCarousel: UiCmsCardCarousel,\n  Countdown: UiCmsCountdown,\n  Cta: UiCmsCta,\n  DoubleCard: UiCmsDoubleCard,\n  FaqImageTiles: UiCmsFaqImageTiles,\n  FullWidthBanner: UiCmsFullWidthBanner,\n  GenderSwitch: UiCmsGenderSwitch,\n  Headline: UiCmsHeadline,\n  Html: UiCmsHtml,\n  ImageText: UiCmsImageText,\n  RichText: UiCmsRichText,\n  SeoTeaser: UiCmsSeoTeaser,\n  Separator: UiCmsSeparator,\n  SizeTable: UiCmsSizeTable,\n  Slider: UiCmsSlider,\n  StaticNavigation: UiCmsStaticNavigation,\n  Table: UiCmsTable,\n  TextCarousel: UiCmsTextCarousel,\n  Timeline: UiCmsTimeline,\n  TripleCard: UiCmsTripleCard,\n  TripleTeaser: UiCmsTripleTeaser,\n  VideoVimeo: UiCmsVideoVimeo,\n  // Theme components\n  CompanyBlogNewsTripleCard,\n  CompanyTopJobs,\n  CompanyVacancies,\n  CompanyAudio,\n};\n\nfunction getComponent(element: CmsContentElementModel) {\n  // @ts-ignore\n  const component = componentMapping[element.getType()] || UiCmsElementNotFound;\n  return component as ConcreteComponent | string;\n}\n\nfunction getComponentKey(element: CmsContentElementModel) {\n  if (!isStoryblokLivePreview) {\n    return element.getUid();\n  }\n  return getHashFromString(JSON.stringify(element.getData()));\n}\n\nfunction getComponentData(element: CmsContentElementModel) {\n  return element.getData();\n}\n\nconst elementsRef = computed(() => {\n  return props.elements.reduce((elementList: CmsContentElementModelSlotItem[], element) => {\n    const componentData = getComponentData(element);\n    if (!componentData) {\n      return elementList;\n    }\n\n    if (element.getType() === 'Slider') {\n      componentData.slides?.forEach((slide: { isVisible: boolean; visibility: CmsVisibility }) => {\n        slide.isVisible = true;\n      });\n    }\n\n    componentData.isProductionBuild = isProductionBuild;\n\n    const returnElement: CmsContentElementModelSlotItem = {\n      ...element,\n      componentKey: getComponentKey(element),\n      componentData,\n      componentName: getComponent(element),\n      componentIsVisible: true,\n    };\n\n    elementList.push(returnElement);\n    return elementList;\n  }, []);\n});\n</script>\n\n<template>\n  <div :id=\"`cms-content-slot-${id}`\" :class=\"['cms-content-slot', { 'cms-content-slot--no-padding': noPadding }]\">\n    <div\n      v-for=\"(element, index) in elementsRef\"\n      :key=\"element.componentKey\"\n      :element-id=\"element.getUid()\"\n      :class=\"[\n        'cms-content-slot__row',\n        {\n          'cms-content-slot__row--hidden': element.getVisibility() === constants.STORYBLOK.VISIBILITY_HIDDEN,\n        },\n      ]\"\n    >\n      <span v-if=\"element.getCustomId()\" :id=\"element.getCustomId()\" class=\"cms-content-slot__anchor\" />\n      <component\n        :is=\"element.componentName\"\n        :class=\"`element-count-${elements.length}`\"\n        :data=\"element.componentData\"\n        :component-count=\"elements.length\"\n        :lazy-load=\"lazyLoad || index >= forceLazyLoadFromIndex\"\n        :data-track-element=\"`${element.getType()}|${index + 1}`\"\n      />\n      <div\n        v-if=\"\n          isStoryblokLivePreview &&\n          element.getVisibility() &&\n          element.getVisibility() !== constants.STORYBLOK.VISIBILITY_ALL\n        \"\n        v-storyblok-editable=\"element.componentData\"\n        class=\"cms-content-slot__visibility\"\n      >\n        <span class=\"cms-content-slot__visibility-icon\"> ! </span>\n        <span class=\"cms-content-slot__visibility-detail\">\n          {{ element.getVisibility() }}\n        </span>\n      </div>\n    </div>\n  </div>\n</template>\n\n<style lang=\"scss\" scoped>\n.cms-content-slot--no-padding {\n  &:deep(.ui-cms-padding) {\n    padding-left: 0;\n    padding-right: 0;\n  }\n}\n\n.cms-content-slot__row {\n  position: relative;\n  width: 100%;\n\n  .wrapper__iframe-live-preview & {\n    min-height: 20px;\n  }\n}\n\n.cms-content-slot__anchor {\n  display: inline-block;\n  position: absolute;\n  top: -$sticky-big-header-height;\n}\n\n.cms-content-slot__visibility-detail {\n  display: inline-block;\n}\n\n.cms-content-slot__row--hidden > div:not(.cms-content-slot__visibility) {\n  display: none;\n}\n\n.cms-content-slot__visibility {\n  position: absolute;\n  top: 0;\n  left: 0;\n  background: $signal-alert;\n  color: $white;\n  font-size: 9px;\n  padding: 0 5px;\n\n  @include hover {\n    .cms-content-slot__visibility-icon {\n      display: none;\n    }\n  }\n}\n</style>\n"],"names":["forceLazyLoadFromIndex","props","__props","$storyblokLivePreview","useNuxtApp","isStoryblokLivePreview","elementObservers","onUnmounted","elementObserver","componentMapping","UiCmsAnchor","UiCmsBenefit","UiCmsCardCarousel","UiCmsCountdown","UiCmsCta","UiCmsDoubleCard","UiCmsFaqImageTiles","UiCmsFullWidthBanner","UiCmsGenderSwitch","UiCmsHeadline","UiCmsHtml","UiCmsImageText","UiCmsRichText","UiCmsSeoTeaser","UiCmsSeparator","UiCmsSizeTable","UiCmsSlider","UiCmsStaticNavigation","UiCmsTable","UiCmsTextCarousel","UiCmsTimeline","UiCmsTripleCard","UiCmsTripleTeaser","UiCmsVideoVimeo","CompanyBlogNewsTripleCard","CompanyTopJobs","CompanyVacancies","CompanyAudio","getComponent","element","UiCmsElementNotFound","getComponentKey","getHashFromString","getComponentData","elementsRef","computed","elementList","componentData","_a","slide","isProductionBuild","returnElement"],"mappings":"orFAgEMA,GAAyB,qQAzB/B,MAAMC,EAAQC,EAuBR,CAAE,sBAAAC,GAA0BC,IAC5BC,EAAyBF,EAAsB,UAE/CG,EAA2C,CAAA,EAEjDC,EAAY,IAAM,CACCD,EAAA,QAASE,GAAoB,CAC5CA,EAAgB,WAAW,CAAA,CAC5B,CAAA,CACF,EAED,MAAMC,EAAmB,CAEvB,OAAQC,EACR,QAASC,EACT,aAAcC,EACd,UAAWC,EACX,IAAKC,EACL,WAAYC,EACZ,cAAeC,EACf,gBAAiBC,EACjB,aAAcC,EACd,SAAUC,EACV,KAAMC,EACN,UAAWC,EACX,SAAUC,EACV,UAAWC,EACX,UAAWC,GACX,UAAWC,GACX,OAAQC,GACR,iBAAkBC,GAClB,MAAOC,GACP,aAAcC,GACd,SAAUC,GACV,WAAYC,GACZ,aAAcC,GACd,WAAYC,GAAA,0BAEZC,GACA,eAAAC,GACA,iBAAAC,GAAA,aACAC,EAAA,EAGF,SAASC,EAAaC,EAAiC,CAG9C,OADW9B,EAAiB8B,EAAQ,QAAS,CAAA,GAAKC,EAE3D,CAEA,SAASC,EAAgBF,EAAiC,CACxD,OAAKlC,EAGEqC,EAAkB,KAAK,UAAUH,EAAQ,QAAS,CAAA,CAAC,EAFjDA,EAAQ,QAGnB,CAEA,SAASI,EAAiBJ,EAAiC,CACzD,OAAOA,EAAQ,SACjB,CAEM,MAAAK,EAAcC,EAAS,IACpB5C,EAAM,SAAS,OAAO,CAAC6C,EAA+CP,IAAY,OACjF,MAAAQ,EAAgBJ,EAAiBJ,CAAO,EAC9C,GAAI,CAACQ,EACI,OAAAD,EAGLP,EAAQ,QAAQ,IAAM,YACVS,EAAAD,EAAA,SAAA,MAAAC,EAAQ,QAASC,GAA6D,CAC1FA,EAAM,UAAY,EAAA,IAItBF,EAAc,kBAAoBG,EAElC,MAAMC,EAAgD,CACpD,GAAGZ,EACH,aAAcE,EAAgBF,CAAO,EACrC,cAAAQ,EACA,cAAeT,EAAaC,CAAO,EACnC,mBAAoB,EAAA,EAGtB,OAAAO,EAAY,KAAKK,CAAa,EACvBL,CACT,EAAG,CAAE,CAAA,CACN"}