{"version":3,"file":"BlogFeaturedList-yR2oRsey.js","sources":["../../../vue/src/components/blog-cta/BlogFeaturedList.vue"],"sourcesContent":["<script setup>\nimport { ref, onMounted } from 'vue';\n\n// import { gsap } from 'gsap';\nimport { GA } from '@/mixins/Ga';\nimport wysiwyg from '@/components/wysiwyg/Wysiwyg.vue';\nimport { useStore } from '@/store/Store.js';\n\nconst blocks = ref(null);\nconst store = useStore();\n\nconst ga = new GA({ category: 'endBody', action: 'clicInterne' });\n\nconst scrollX = ref(0);\nconst rootEl = ref(null);\n\ndefineProps({\n    type: {\n        type: String,\n        default: '',\n    },\n    space: { type: Boolean, default: true },\n    center: { type: Boolean, default: false },\n    color: {\n        type: String,\n        default: '',\n    },\n    coverColor: {\n        type: String,\n        default: '',\n    },\n    titleTop: {\n        type: String,\n        default: '',\n    },\n    cta: {\n        type: String,\n        default: '',\n    },\n    ctaLink: {\n        type: [String, Object],\n        default: '',\n    },\n    ctaTarget: {\n        type: String,\n        default: '',\n    },\n    blogs: {\n        type: Array,\n        default: () => [],\n    },\n    gaLabel: {\n        type: String,\n        default: '',\n    },\n    wysiwygData: {\n        type: String,\n        default: '',\n    },\n});\n\nonMounted(() => {\n    if (!store.xl.value || !blocks.value) return;\n\n    const client = blocks.value.getBoundingClientRect();\n    scrollX.value = (window.innerWidth - blocks.value.scrollWidth - client.left) * 2;\n});\n</script>\n\n<template>\n    <div\n        ref=\"rootEl\"\n        class=\"BlogFeaturedList px-6 py-0 print:hidden xl:px-20 xl:py-5 xl:pt-10\"\n        :class=\"['is-' + type]\"\n    >\n        <template v-if=\"blogs && blogs.length\">\n            <div\n                class=\"BlogFeaturedList__top relative mb-8 xl:mb-12\"\n                :class=\"{\n                    'xl:text-right': type === 'home',\n                    'text-left': type !== 'home',\n                }\"\n            >\n                <h2\n                    class=\"h2 inline-block\"\n                    :class=\"['text-' + color]\"\n                >\n                    {{ titleTop }}\n                </h2>\n            </div>\n            <div\n                v-if=\"wysiwygData\"\n                class=\"BlogFeaturedList__text mb-8 xl:mb-12\"\n            >\n                <wysiwyg\n                    class=\"h5\"\n                    :class=\"['text-' + color]\"\n                    :center=\"false\"\n                    :space=\"false\"\n                    :color=\"color\"\n                    :data=\"{ data: { wysiwyg: wysiwygData } }\"\n                />\n            </div>\n            <div class=\"BlogFeaturedList__container w-full\">\n                <div\n                    ref=\"blocks\"\n                    class=\"BlogFeaturedList__blocks flex flex-col gap-6 xl:flex-row\"\n                >\n                    <router-link\n                        :to=\"setUri({ uri: blogs[0].uri })\"\n                        class=\"BlogFeaturedList__block group xl:h-124 xl:w-18/24\"\n                    >\n                        <div\n                            class=\"relative h-full\"\n                            v-on:click=\"ga.send({ label: blogs[0].title })\"\n                        >\n                            <div class=\"pointer-events-none absolute bottom-5 left-6 z-2 max-w-[calc(100%-3rem)] font-bold md:bottom-7 md:left-8\">\n                                <div class=\"BlogFeaturedList__category pointer-events-none mb-1 mt-6 text-xxs leading-tight text-white sm:text-base md:text-lg\">\n                                    {{ blogs[0].category[0].title }}\n                                </div>\n                                <h5 class=\"pointer-events-none mb-4 text-base leading-tight text-white sm:text-xl md:text-3xl\">\n                                    {{ blogs[0].title }}\n                                </h5>\n                                <div class=\"pointer-events-none text-xxs leading-tight text-white sm:text-base md:text-lg\">\n                                    Lire l'article\n                                    <Icon\n                                        class=\"ml-2 inline-flex w-4 fill-current transition duration-500 group-hover:translate-x-2\"\n                                        type=\"arrow\"\n                                    />\n                                </div>\n                            </div>\n                            <div class=\"BlogFeaturedList__cover relative z-1 h-full overflow-hidden rounded-xl\">\n                                <div class=\"absolute bottom-0 z-10 h-48 w-full bg-gradient-to-b from-black/0 to-black/50\" />\n                                <Cover\n                                    class=\"relative h-full w-full\"\n                                    imgclass=\"can-hover:hover:scale-105\"\n                                    :clip-path=\"false\"\n                                    :color=\"coverColor\"\n                                    :data=\"blogs[0].cover\"\n                                />\n                            </div>\n                        </div>\n                    </router-link>\n                    <div class=\"BlogFeaturedList__right flex flex-col items-center gap-6 xl:w-8/24 xl:items-stretch\">\n                        <div class=\"flex h-full flex-col gap-6 md:flex-row md:flex-wrap xl:flex-col xl:flex-nowrap xl:justify-stretch\">\n                            <template\n                                v-for=\"(blog, i) in blogs\"\n                                :key=\"blog.uri\"\n                            >\n                                <router-link\n                                    v-if=\"i !== 0\"\n                                    :to=\"setUri({ uri: blog.uri })\"\n                                    class=\"BlogFeaturedList__block flex w-full items-center justify-center gap-4 rounded-xl transition duration-500 md:-m-4 md:w-1/3 md:grow md:items-center md:p-4 md:hover:bg-white xl:w-auto\"\n                                    v-on:click=\"ga.send({ label: blog.title })\"\n                                >\n                                    <div class=\"BlogFeaturedList__cover flex h-24 w-24 shrink-0 grow-0 xl:h-full xl:w-36 xl:justify-start\">\n                                        <Cover\n                                            class=\"relative h-full w-full\"\n                                            imgclass=\"can-hover:hover:scale-110\"\n                                            :clip-path=\"false\"\n                                            :color=\"coverColor\"\n                                            :data=\"blog.cover\"\n                                        />\n                                    </div>\n                                    <div class=\"flex w-full grow flex-col md:w-auto\">\n                                        <div\n                                            class=\"BlogFeaturedList__category text-xxs font-bold\"\n                                            :class=\"['text-' + color]\"\n                                        >\n                                            <span\n                                                v-if=\"blog.day && blog.month && blog.year\"\n                                                class=\"Blogs__date lowercase\"\n                                                >{{ blog.day }} {{ FRMonth[blog.month - 1] }} {{ blog.year }} •\n                                            </span>\n                                            {{ blog.category[0].title }}\n                                        </div>\n                                        <h5\n                                            class=\"line-clamp-5 text-xs font-bold leading-tight\"\n                                            :class=\"['text-' + color]\"\n                                        >\n                                            {{ blog.title }}\n                                        </h5>\n                                    </div>\n                                </router-link>\n                            </template>\n                        </div>\n                        <a\n                            v-if=\"ctaLink && typeof ctaLink == 'string' && ctaLink.startsWith('http')\"\n                            class=\"block whitespace-nowrap\"\n                            :href=\"ctaLink\"\n                            :target=\"ctaTarget\"\n                        >\n                            <Btn\n                                :text=\"cta\"\n                                size=\"small\"\n                                class=\"w-full text-white\"\n                                :class=\"['bg-' + color]\"\n                            />\n                        </a>\n                        <router-link\n                            v-else-if=\"ctaLink\"\n                            class=\"whitespace-nowrap\"\n                            :to=\"ctaLink\"\n                            :target=\"ctaTarget\"\n                            v-on:click=\"ga.send({ label: gaLabel })\"\n                        >\n                            <Btn\n                                :text=\"cta\"\n                                size=\"small\"\n                                class=\"w-full text-white\"\n                                :class=\"['bg-' + color]\"\n                            />\n                        </router-link>\n                    </div>\n                </div>\n            </div>\n        </template>\n    </div>\n</template>\n"],"names":["blocks","ref","store","useStore","ga","GA","scrollX","rootEl","onMounted","client"],"mappings":"wvDAQA,MAAMA,EAASC,EAAI,IAAI,EACjBC,EAAQC,EAAQ,EAEhBC,EAAK,IAAIC,EAAG,CAAE,SAAU,UAAW,OAAQ,aAAa,CAAE,EAE1DC,EAAUL,EAAI,CAAC,EACfM,EAASN,EAAI,IAAI,EA+CvB,OAAAO,EAAU,IAAM,CACZ,GAAI,CAACN,EAAM,GAAG,OAAS,CAACF,EAAO,MAAO,OAEtC,MAAMS,EAAST,EAAO,MAAM,sBAAqB,EACjDM,EAAQ,OAAS,OAAO,WAAaN,EAAO,MAAM,YAAcS,EAAO,MAAQ,CACnF,CAAC"}