{"version":3,"file":"feature-benefitChallengeBlock-OZg-4Krf.js","sources":["../../../../Coloplast.UI/Features/ProductDeepDive/Views/Blocks/BenefitChallengeBlock/components/BenefitChallengeBlockItem.vue","../../../../Coloplast.UI/Features/ProductDeepDive/Views/Blocks/BenefitChallengeBlock/BenefitChallengeBlock.vue","../../../../Coloplast.UI/Features/ProductDeepDive/Views/Blocks/BenefitChallengeBlock/benefitChallengeBlock-entry.ts"],"sourcesContent":["<!-- eslint-disable @typescript-eslint/no-unused-vars -->\r\n<script setup>\r\n\timport { computed } from 'vue';\r\n\timport { DsText, dsUseIsMobile } from '@coloplast/design-system';\r\n\timport ContentIconText from 'shared/components/contentLibrary/contentIconText.vue';\r\n\r\n\tconst props = defineProps({\r\n\t\titem: {\r\n\t\t\ttype: Object,\r\n\t\t\tdefault: () => {},\r\n\t\t},\r\n\t\titemsLength: {\r\n\t\t\ttype: Number,\r\n\t\t\trequired: true,\r\n\t\t},\r\n\t});\r\n\r\n\tconst { isMobile } = dsUseIsMobile();\r\n\r\n\tconst dynamicSize = computed(() => (isMobile?.value ? 'xs' : 'sm'));\r\n</script>\r\n\r\n<template>\r\n\t<article\r\n\t\tv-if=\"Object.keys(item).length\"\r\n\t\tclass=\"c-benefit-challenge__item\"\r\n\t\t:class=\"{ 'c-benefit-challenge__item--two-column': itemsLength === 2 }\"\r\n\t>\r\n\t\t<picture v-if=\"item.ImageUrl\">\r\n\t\t\t<source\r\n\t\t\t\tmedia=\"(max-width: 767px)\"\r\n\t\t\t\t:srcset=\"`${item.ImageUrl}?im=Resize=(327,200)`\"\r\n\t\t\t/>\r\n\t\t\t<source\r\n\t\t\t\tv-if=\"itemsLength === 3\"\r\n\t\t\t\tmedia=\"(min-width: 768px)\"\r\n\t\t\t\t:srcset=\"`${item.ImageUrl}?im=Resize=(408,280)`\"\r\n\t\t\t/>\r\n\t\t\t<img\r\n\t\t\t\t:src=\"`${item.ImageUrl}?im=Resize=(624,280)`\"\r\n\t\t\t\t:alt=\"item.ImageAltText || item.Title\"\r\n\t\t\t\tclass=\"c-benefit-challenge__item-image\"\r\n\t\t\t/>\r\n\t\t</picture>\r\n\t\t<DsText\r\n\t\t\tv-if=\"item.Title\"\r\n\t\t\thtml-element=\"h3\"\r\n\t\t\ttext-type=\"heading-2xl\"\r\n\t\t\tclass=\"c-benefit-challenge__item-headline\"\r\n\t\t>\r\n\t\t\t{{ item.Title }}\r\n\t\t</DsText>\r\n\t\t<DsText\r\n\t\t\tv-if=\"item.Text\"\r\n\t\t\tclass=\"c-benefit-challenge__item-description\"\r\n\t\t>\r\n\t\t\t{{ item.Text }}\r\n\t\t</DsText>\r\n\t\t<div\r\n\t\t\tv-if=\"item.Attributes?.length\"\r\n\t\t\tclass=\"c-benefit-challenge__item-feature-wrapper\"\r\n\t\t>\r\n\t\t\t<div\r\n\t\t\t\tv-for=\"(feature, index) in item.Attributes\"\r\n\t\t\t\t:key=\"`${feature.Text}-${index + 1}`\"\r\n\t\t\t\tclass=\"c-benefit-challenge__item-feature\"\r\n\t\t\t>\r\n\t\t\t\t<ContentIconText\r\n\t\t\t\t\t:icon=\"feature.Icon\"\r\n\t\t\t\t\t:size=\"dynamicSize\"\r\n\t\t\t\t>\r\n\t\t\t\t\t{{ feature.Text }}\r\n\t\t\t\t</ContentIconText>\r\n\t\t\t</div>\r\n\t\t</div>\r\n\t</article>\r\n</template>\r\n","<script setup>\r\n\timport { computed } from 'vue';\r\n\timport { DsText } from '@coloplast/design-system';\r\n\timport BenefitChallengeBlockItem from './components/BenefitChallengeBlockItem.vue';\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 isImageLayout = computed(() => {\r\n\t\treturn props.vm.BaseViewModel.Cards.some(item => item.ImageUrl);\r\n\t});\r\n</script>\r\n\r\n<!-- eslint-disable vue/no-v-text-v-html-on-component -->\r\n<template>\r\n\t<div class=\"c-benefit-challenge__container\">\r\n\t\t<DsText\r\n\t\t\tv-if=\"vm.CurrentBlock.Headline\"\r\n\t\t\thtml-element=\"h3\"\r\n\t\t\ttext-type=\"heading-3xl\"\r\n\t\t\tclass=\"c-benefit-challenge__headline\"\r\n\t\t>\r\n\t\t\t{{ vm.CurrentBlock.Headline }}\r\n\t\t</DsText>\r\n\t\t<DsText\r\n\t\t\tv-if=\"vm.CurrentBlock.Description\"\r\n\t\t\tclass=\"c-benefit-challenge__description\"\r\n\t\t>\r\n\t\t\t<span v-html=\"vm.CurrentBlock.Description\"></span>\r\n\t\t</DsText>\r\n\t\t<div\r\n\t\t\tv-if=\"vm.BaseViewModel.Cards.length\"\r\n\t\t\tclass=\"c-benefit-challenge__item-wrapper\"\r\n\t\t\t:class=\"{ 'c-benefit-challenge__item-wrapper--no-images' : !isImageLayout }\"\r\n\t\t>\r\n\t\t\t<BenefitChallengeBlockItem\r\n\t\t\t\tv-for=\"(card, index) in vm.BaseViewModel.Cards\"\r\n\t\t\t\t:key=\"`${card.Title}-${index + 1}`\"\r\n\t\t\t\t:item=\"card\"\r\n\t\t\t\t:items-length=\"vm.BaseViewModel.Cards.length\"\r\n\t\t\t/>\r\n\t\t</div>\r\n\t</div>\r\n</template>\r\n","import { createApp } from 'vue';\r\nimport BenefitChallengeBlock from './BenefitChallengeBlock.vue';\r\nimport './c-benefit-challenge.scss';\r\n\r\nconst benefitChallengeBlocks = [...document.querySelectorAll('[data-benefit-challenge]')];\r\n\r\nif (benefitChallengeBlocks) {\r\n\tbenefitChallengeBlocks.forEach((item) => {\r\n\t\tconst app = createApp({\r\n\t\t\tname: 'BenefitChallengeBlockApp',\r\n\t\t});\r\n\t\tapp.component('benefit-challenge-block', BenefitChallengeBlock);\r\n\t\tapp.mount(item);\r\n\t});\r\n}"],"names":["isMobile","dsUseIsMobile","dynamicSize","computed","props","__props","isImageLayout","item","benefitChallengeBlocks","app","createApp","BenefitChallengeBlock"],"mappings":"4eAiBC,KAAM,CAAE,SAAAA,GAAaC,IAEfC,EAAcC,EAAS,IAAOH,GAAA,MAAAA,EAAU,MAAQ,KAAO,IAAK,s1CCdlE,MAAMI,EAAQC,EAORC,EAAgBH,EAAS,IACvBC,EAAM,GAAG,cAAc,MAAM,KAAKG,GAAQA,EAAK,QAAQ,CAC9D,swBCVIC,EAAyB,CAAC,GAAG,SAAS,iBAAiB,0BAA0B,CAAC,EAEpFA,GACoBA,EAAA,QAASD,GAAS,CACxC,MAAME,EAAMC,EAAU,CACrB,KAAM,0BAAA,CACN,EACGD,EAAA,UAAU,0BAA2BE,CAAqB,EAC9DF,EAAI,MAAMF,CAAI,CAAA,CACd"}