{"version":3,"file":"feature-variantPortfolioBlock-DO2cOix9.js","sources":["../../../../Coloplast.UI/src/shared/services/tracking/microSiteTrackingService.ts","../../../../Coloplast.UI/Features/ProductDeepDive/Views/Blocks/VariantPortfolioBlock/VariantPortfolioBlock.vue","../../../../Coloplast.UI/Features/ProductDeepDive/Views/Blocks/VariantPortfolioBlock/variantPortfolioBlock-entry.ts"],"sourcesContent":["import { trackEcommerce } from './core';\r\nimport { trackingEventNames } from '../../settings/constants';\r\nimport { IHasTrackingParameters } from './interfaces/IHasTrackingParameters';\r\n\r\nexport function track_view_item(itemIndex: number, itemId: string, itemHeadline: string) {\r\n\tconst event = {\r\n\t\tevent: trackingEventNames.VIEW_ITEM,\r\n\t\tecommerce: {\r\n\t\t\titems: [\r\n\t\t\t\t{\r\n\t\t\t\t\tindex: itemIndex,\r\n\t\t\t\t\titem_id: itemId,\r\n\t\t\t\t\titem_name: itemHeadline,\r\n\t\t\t\t}\r\n\t\t\t]\r\n\t\t}\r\n\t};\r\n\ttrackEcommerce(event);\r\n}\r\n\r\nexport function track_view_items(itemListHeadline: string, itemListId: string, itemList: Array<IHasTrackingParameters>) {\r\n\tconst event = {\r\n\t\tevent: trackingEventNames.VIEW_ITEM_LIST,\r\n\t\tecommerce: {\r\n\t\t\titem_list_name: itemListHeadline,\r\n\t\t\titem_list_id: itemListId,\r\n\t\t\titems: itemList,\r\n\t\t}\r\n\t};\r\n\ttrackEcommerce(event);\r\n}","<script setup>\r\n\timport { ref, computed, onMounted } from 'vue';\r\n\timport { DsGrid, DsText, DsButton, dsUseIsMobile } from '@coloplast/design-system';\r\n\timport VariantPortfolioBlockItem from './components/VariantPortfolioBlockItem.vue';\r\n\timport ModalGallery from 'shared/components/mediaItems/ModalGallery.vue';\r\n\timport { track_view_item, track_view_items } from 'shared/services/tracking/microSiteTrackingService.ts';\r\n\timport { formatToSnakeCase } from 'shared/services/transformDataService.js';\r\n\r\n\tconst props = defineProps({\r\n\t\tvm: {\r\n\t\t\ttype: Object,\r\n\t\t\tdefault: () => {},\r\n\t\t},\r\n\t});\r\n\r\n\tconst { isMobile } = dsUseIsMobile();\r\n\r\n\tconst cardsPerPage = 4;\r\n\r\n\tconst displayedCards = ref(cardsPerPage);\r\n\r\n\tconst slicedData = computed(() => {\r\n\t\treturn props.vm.BaseViewModel.Cards.slice(0, displayedCards.value);\r\n\t});\r\n\r\n\tconst showMore = () => {\r\n\t\tdisplayedCards.value += cardsPerPage;\r\n\t\ttrack_view_items(props.vm.CurrentBlock.Headline, formatToSnakeCase(props.vm.CurrentBlock.Headline), trackingItemList.value);\r\n\t};\r\n\r\n\tconst showedModal = ref(false);\r\n\tconst galleryItem = ref({});\r\n\r\n\tconst showModal = (currentGalleryItem, currentGalleryIndex) => {\r\n\t\tshowedModal.value = true;\r\n\t\tgalleryItem.value = currentGalleryItem;\r\n\t\ttrack_view_item(currentGalleryIndex, formatToSnakeCase(currentGalleryItem.Headline), currentGalleryItem.Headline);\r\n\t};\r\n\r\n\tconst hideModal = () => {\r\n\t\tshowedModal.value = false;\r\n\t\tgalleryItem.value = null;\r\n\t};\r\n\r\n\tconst trackingItemList = computed(() => {\r\n\t\tlet currentVisibleItemList = isMobile?.value ? slicedData.value : props.vm.BaseViewModel.Cards;\r\n\r\n\t\treturn currentVisibleItemList.map((item, index) => {\r\n\t\t\treturn {\r\n\t\t\t\tindex: index,\r\n\t\t\t\titem_id: formatToSnakeCase(item?.Headline),\r\n\t\t\t\titem_name: item.Headline,\r\n\t\t\t}\r\n\t\t})\r\n\t});\r\n\r\n\tconst variantPortfolio = ref(null);\r\n\tconst observer = ref(null);\r\n\tconst itemListTracked = ref(false);\r\n\r\n\tonMounted(() => {\r\n\t\tobserver.value = new IntersectionObserver(entries => {\r\n\t\t\tif (entries[0].isIntersecting && !itemListTracked.value) {\r\n\t\t\t\ttrack_view_items(props.vm.CurrentBlock.Headline, formatToSnakeCase(props.vm.CurrentBlock.Headline), trackingItemList.value);\r\n\t\t\t\titemListTracked.value = true;\r\n\t\t\t}\r\n\t\t});\r\n\r\n\t\tobserver.value.observe(variantPortfolio.value);\r\n\t});\r\n</script>\r\n\r\n<template>\r\n\t<div\r\n        ref=\"variantPortfolio\"\r\n\t\tclass=\"c-variant-portfolio__container\"\r\n\t\tdata-testid=\"variant-portfolio\"\r\n\t>\r\n\t\t<DsGrid\r\n\t\t\t:columns=\"1\"\r\n\t\t\t:columns-md=\"2\"\r\n\t\t\tgap=\"md\"\r\n\t\t\thtml-element=\"section\"\r\n\t\t>\r\n\t\t\t<DsText\r\n\t\t\t\tv-if=\"vm.CurrentBlock.Headline\"\r\n\t\t\t\thtml-element=\"h2\"\r\n\t\t\t\ttext-type=\"heading-3xl\"\r\n\t\t\t\tclass=\"c-variant-portfolio__headline\"\r\n\t\t\t>\r\n\t\t\t\t{{ vm.CurrentBlock.Headline }}\r\n\t\t\t</DsText>\r\n\t\t\t<DsText\r\n\t\t\t\tv-if=\"vm.CurrentBlock.Description\"\r\n\t\t\t\tclass=\"c-variant-portfolio__description\"\r\n\t\t\t>\r\n\t\t\t\t{{ vm.CurrentBlock.Description }}\r\n\t\t\t</DsText>\r\n\t\t</DsGrid>\r\n\t\t<DsGrid\r\n\t\t\tv-if=\"vm.BaseViewModel?.Cards?.length\"\r\n\t\t\t:columns=\"1\"\r\n\t\t\t:columns-md=\"2\"\r\n\t\t\t:columns-lg=\"3\"\r\n\t\t\t:columns-xl=\"4\"\r\n\t\t\tgap=\"md\"\r\n\t\t\thtml-element=\"section\"\r\n\t\t>\r\n\t\t\t<VariantPortfolioBlockItem\r\n\t\t\t\tv-for=\"(item, index) in isMobile ? slicedData : vm.BaseViewModel.Cards\"\r\n\t\t\t\t:key=\"`${item.Headline}-${index + 1}`\"\r\n\t\t\t\t:item=\"item\"\r\n\t\t\t\t@click=\"showModal(item, index)\"\r\n\t\t\t/>\r\n\t\t</DsGrid>\r\n\t\t<ModalGallery\r\n\t\t\tv-if=\"showedModal\"\r\n\t\t\t:gallery-item=\"galleryItem\"\r\n\t\t\t@hidden-modal=\"hideModal\"\r\n\t\t/>\r\n\t\t<DsButton\r\n\t\t\tv-if=\"isMobile && vm.BaseViewModel.Cards.length > slicedData.length\"\r\n\t\t\ttype=\"button\"\r\n\t\t\tvariant=\"ghost\"\r\n\t\t\ticon-end=\"add\"\r\n\t\t\tclass=\"c-variant-portfolio__button\"\r\n\t\t\t:click-handler=\"showMore\"\r\n\t\t>\r\n\t\t\t{{ vm.CurrentBlock.ShowMoreButtonLabel }}\r\n\t\t</DsButton>\r\n\t</div>\r\n</template>\r\n","import { createApp } from 'vue';\r\nimport store from 'shared/store';\r\nimport VariantPortfolioBlock from './VariantPortfolioBlock.vue';\r\nimport './c-variant-portfolio.scss';\r\n\r\nconst variantPortfolioBlock = document.getElementById('variant-portfolio-block');\r\n\r\nif (variantPortfolioBlock) {\r\n\tconst app = createApp({\r\n\t\tname: 'VariantPortfolioBlockApp',\r\n\t});\r\n\tapp.use(store);\r\n\tapp.component('variant-portfolio-block', VariantPortfolioBlock);\r\n\tapp.mount(variantPortfolioBlock);\r\n}"],"names":["track_view_item","itemIndex","itemId","itemHeadline","event","trackingEventNames","trackEcommerce","track_view_items","itemListHeadline","itemListId","itemList","cardsPerPage","props","__props","isMobile","dsUseIsMobile","displayedCards","ref","slicedData","computed","showMore","formatToSnakeCase","trackingItemList","showedModal","galleryItem","showModal","currentGalleryItem","currentGalleryIndex","hideModal","item","index","variantPortfolio","observer","itemListTracked","onMounted","entries","variantPortfolioBlock","app","createApp","store","VariantPortfolioBlock"],"mappings":"w0DAIgB,SAAAA,GAAgBC,EAAmBC,EAAgBC,EAAsB,CACxF,MAAMC,EAAQ,CACb,MAAOC,EAAmB,UAC1B,UAAW,CACV,MAAO,CACN,CACC,MAAOJ,EACP,QAASC,EACT,UAAWC,CACZ,CACD,CACD,CAAA,EAEDG,EAAeF,CAAK,CACrB,CAEgB,SAAAG,EAAiBC,EAA0BC,EAAoBC,EAAyC,CACvH,MAAMN,EAAQ,CACb,MAAOC,EAAmB,eAC1B,UAAW,CACV,eAAgBG,EAChB,aAAcC,EACd,MAAOC,CACR,CAAA,EAEDJ,EAAeF,CAAK,CACrB,CCbC,MAAMO,EAAe,sFATrB,MAAMC,EAAQC,EAOR,CAAE,SAAAC,GAAaC,IAIfC,EAAiBC,EAAIN,CAAY,EAEjCO,EAAaC,EAAS,IACpBP,EAAM,GAAG,cAAc,MAAM,MAAM,EAAGI,EAAe,KAAK,CACjE,EAEKI,EAAW,IAAM,CACtBJ,EAAe,OAASL,EACxBJ,EAAiBK,EAAM,GAAG,aAAa,SAAUS,EAAkBT,EAAM,GAAG,aAAa,QAAQ,EAAGU,EAAiB,KAAK,CAC5H,EAEOC,EAAcN,EAAI,EAAK,EACvBO,EAAcP,EAAI,CAAA,CAAE,EAEpBQ,EAAY,CAACC,EAAoBC,IAAwB,CAC9DJ,EAAY,MAAQ,GACpBC,EAAY,MAAQE,EACpB1B,GAAgB2B,EAAqBN,EAAkBK,EAAmB,QAAQ,EAAGA,EAAmB,QAAQ,CAClH,EAEOE,EAAY,IAAM,CACvBL,EAAY,MAAQ,GACpBC,EAAY,MAAQ,IACtB,EAEOF,EAAmBH,EAAS,KACJL,GAAA,MAAAA,EAAU,MAAQI,EAAW,MAAQN,EAAM,GAAG,cAAc,OAE3D,IAAI,CAACiB,EAAMC,KACjC,CACN,MAAOA,EACP,QAAST,EAAkBQ,GAAA,YAAAA,EAAM,QAAQ,EACzC,UAAWA,EAAK,QAChB,EACD,CACD,EAEKE,EAAmBd,EAAI,IAAI,EAC3Be,EAAWf,EAAI,IAAI,EACnBgB,EAAkBhB,EAAI,EAAK,EAEjC,OAAAiB,EAAU,IAAM,CACfF,EAAS,MAAQ,IAAI,qBAAqBG,GAAW,CAChDA,EAAQ,CAAC,EAAE,gBAAkB,CAACF,EAAgB,QACjD1B,EAAiBK,EAAM,GAAG,aAAa,SAAUS,EAAkBT,EAAM,GAAG,aAAa,QAAQ,EAAGU,EAAiB,KAAK,EAC1HW,EAAgB,MAAQ,GAE5B,CAAG,EAEDD,EAAS,MAAM,QAAQD,EAAiB,KAAK,CAC/C,CAAE,qzCChEIK,EAAwB,SAAS,eAAe,yBAAyB,EAE/E,GAAIA,EAAuB,CAC1B,MAAMC,EAAMC,EAAU,CACrB,KAAM,0BAAA,CACN,EACDD,EAAI,IAAIE,CAAK,EACTF,EAAA,UAAU,0BAA2BG,EAAqB,EAC9DH,EAAI,MAAMD,CAAqB,CAChC"}