{"version":3,"file":"CL_30id5.js","sources":["../../../../components/organisms/VAgenciesList/VAgenciesList.vue","../../../../pages/agences/index.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { Agency } from '~/types/api'\nimport { InternalRouteName } from '~/constants/internal-route-name'\nimport { getStructuredDataScript } from '~/utils/structured-data'\n\ninterface AgenciesListProps {\n    agencies: Agency[]\n}\n\nconst props = defineProps<AgenciesListProps>()\nconst agencies = computed<Agency[]>(() => props.agencies)\n\nconst selectedAgency = ref<Agency | null>(null)\n\nconst select = (agency: Agency) => {\n    selectedAgency.value = agency\n}\n\nwatch(selectedAgency, (agency: Agency | null) => {\n    const agencyElement = document.getElementById(`agency-${agency?.id}`)\n    if (!agencyElement) return\n\n    const link = agencyElement.querySelector('a')\n\n    if (link) {\n        // In some case scrollIntoView not working on GMap marked clicked multiple times\n        // Use css focus functionality in priority\n        link.focus()\n    }\n    else {\n        agencyElement.scrollIntoView({\n            behavior: 'smooth',\n            block: 'center',\n        })\n    }\n})\n\nconst { $getInternalPageUrl } = useNuxtApp()\n\nconst structuredDataScript = getStructuredDataScript({\n    '@context': 'https://schema.org',\n    '@type': 'ItemList',\n    'itemListElement': agencies.value.map((agency, i) => {\n        return {\n            '@type': 'ListItem',\n            'position': i + 1,\n            'item': {\n                '@id': agency.id,\n                'name': agency?.title,\n                'url': $getInternalPageUrl({ name: InternalRouteName.AGENCY_ENTITY, params: { slug: agency.slug } }),\n            },\n        }\n    }),\n})\n</script>\n\n<template>\n    <div :class=\"$style.root\">\n        <VAgenciesMap\n            id=\"agencies-map\"\n            hidden-on-mobile\n            :agencies=\"agencies\"\n            :selected-agency=\"selectedAgency\"\n            @on-marker-clicked=\"select\"\n        />\n        <component :is=\"structuredDataScript\" />\n        <ul :class=\"$style.list\">\n            <li\n                v-for=\"agency in agencies\"\n                :id=\"`agency-${agency.id}`\"\n                :key=\"agency.id\"\n                :class=\"[$style.agency, agency.id === selectedAgency?.id && $style['agency--selected']]\"\n            >\n                <VAgencyCard\n                    :agency=\"agency\"\n                    direction=\"horizontal\"\n                    title-tag=\"h2\"\n                    image-size=\"72px\"\n                    :class=\"$style.card\"\n                    @click=\"selectedAgency = agency\"\n                />\n                <VButton\n                    size=\"s\"\n                    outlined\n                    :class=\"$style.button\"\n                    :to=\"{ name: InternalRouteName.AGENCY_ENTITY, params: { slug: agency.slug } }\"\n                    :label=\"$t('choose_button.label')\"\n                >\n                    <template #icon>\n                        <SvgIcon\n                            name=\"chevron-right\"\n                            width=\"24\"\n                            height=\"24\"\n                            viewBox=\"0 0 24 24\"\n                        />\n                    </template>\n                </VButton>\n            </li>\n        </ul>\n    </div>\n</template>\n\n<style lang=\"scss\" module>\n.root {\n    display: grid;\n    padding: var(--spacing-sm);\n    border-radius: var(--radius-md);\n    background-color: color(white);\n    grid-gap: var(--spacing-sm);\n\n    @include media('>=lg') {\n        height: 700px;\n        padding: 42px;\n        grid-template-columns: 1fr 1fr;\n    }\n\n    @include media('>=vl') {\n        grid-template-columns: 4fr 3fr;\n    }\n}\n\n.list {\n    display: flex;\n    height: 100%;\n    flex-direction: column;\n    padding: 0;\n    margin: 0;\n    gap: var(--spacing-2-xs);\n    overflow-y: auto;\n    scroll-behavior: smooth;\n}\n\n.agency {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    justify-content: space-between;\n    padding: var(--spacing-sm) var(--spacing-sm);\n    border: 1px solid color(surfaces-secondary);\n    border-radius: var(--radius-md);\n    background-color: color(surfaces-secondary);\n    gap: var(--spacing-sm);\n\n    @include media('>=lg') {\n        flex-direction: row;\n        align-items: flex-end;\n\n        &--selected {\n            border-color: color(line-primary-selected);\n        }\n    }\n}\n\n.card {\n    width: 100%;\n\n    @include media('<lg') {\n        flex-direction: row-reverse !important;\n        justify-content: space-between;\n    }\n\n    @include media('>=lg') {\n        cursor: pointer;\n    }\n}\n\n.button {\n    flex-shrink: 0;\n}\n</style>\n","<script lang=\"ts\" setup>\nimport type { Agency, JsonLdCollection } from '~/types/api'\nimport { InternalRouteName } from '~/constants/internal-route-name'\n\ndefinePageMeta({\n    layout: false,\n    name: InternalRouteName.AGENCY_INDEX,\n})\n\nconst { $apiFetch } = useNuxtApp()\nconst { data, error } = await useAsyncData<JsonLdCollection<Agency>>(() => {\n    return $apiFetch<JsonLdCollection<Agency>>('/agencies', {\n        query: {\n            'order[slug]': 'asc',\n        },\n    })\n})\n\nif (error.value) {\n    throw createError({ statusCode: 404, statusMessage: error.value?.message })\n}\n\n/*\n * Find existing CMS page to complete the form\n */\nconst { webPage } = await useAsyncWebPageData('agences', false)\n\nconst { t } = useI18n()\n\nconst agencies = computed(() => data.value?.['hydra:member'])\nconst pageTitle = computed(() => webPage.value?.title || t('pages.agency_index.title'))\nconst pageText = computed(() => webPage.value?.text || t('pages.agency_index.text'))\n\nconst { metaClient, metaServer } = usePageSeoMeta(webPage, { title: t('pages.agency_index.title') })\n\nuseSeoMeta(metaClient)\nuseServerSeoMeta(metaServer)\nuseCacheControl({\n    maxAge: 60 * 5, // 5 minutes\n    sMaxAge: 60 * 30, // 30 minutes\n    staleWhileRevalidate: 60 * 30,\n    public: true,\n})\n</script>\n\n<template>\n    <NuxtLayout name=\"default\">\n        <template #header>\n            <VWebPageHeader\n                :web-page=\"webPage\"\n                :title=\"pageTitle\"\n                layout=\"gradient-mask\"\n            />\n        </template>\n        <template #default>\n            <VPageStructuredData\n                :web-page=\"webPage\"\n                :title=\"pageTitle\"\n            />\n            <div :class=\"$style.introduction\">\n                <VMarkdown\n                    :content=\"pageText\"\n                    :class=\"$style['introduction__text']\"\n                />\n                <SvgIcon\n                    :class=\"$style.logo\"\n                    name=\"profile\"\n                    width=\"108\"\n                    height=\"108\"\n                    viewBox=\"0 0 108 108\"\n                />\n            </div>\n            <VAgenciesList\n                v-if=\"agencies?.length\"\n                :agencies=\"agencies\"\n                class=\"main-content-width--mobile-wider\"\n                :class=\"$style.list\"\n            />\n        </template>\n    </NuxtLayout>\n</template>\n\n<style lang=\"scss\" module>\n.introduction {\n    display: flex;\n    width: 100%;\n    max-width: min(var(--main-container-max-width), calc(100% - var(--gutter) * 2));\n    flex-direction: column;\n    align-items: center;\n    margin-bottom: var(--spacing-sm);\n    gap: rem(32);\n    margin-inline: auto;\n\n    @include media('>=md') {\n        flex-direction: row;\n        justify-content: space-between;\n        margin-bottom: var(--spacing-xl);\n    }\n}\n\n.introduction__text {\n    max-width: 80ch;\n}\n\n.logo {\n    flex-shrink: 0;\n\n    @include media('<md') {\n        width: rem(69);\n    }\n}\n\n.list {\n    margin-block: rem(24);\n\n    @include media('>=md') {\n        margin-block: rem(24) rem(48);\n    }\n}\n</style>\n"],"names":["props","__props","agencies","computed","selectedAgency","ref","select","agency","watch","agencyElement","link","$getInternalPageUrl","useNuxtApp","structuredDataScript","getStructuredDataScript","i","InternalRouteName","$apiFetch","data","error","__temp","__restore","_withAsyncContext","useAsyncData","createError","_a","webPage","useAsyncWebPageData","t","useI18n","pageTitle","pageText","metaClient","metaServer","usePageSeoMeta","useSeoMeta"],"mappings":"4tBASA,MAAMA,EAAQC,EACRC,EAAWC,EAAmB,IAAMH,EAAM,QAAQ,EAElDI,EAAiBC,EAAmB,IAAI,EAExCC,EAAUC,GAAmB,CAC/BH,EAAe,MAAQG,CAAA,EAGrBC,EAAAJ,EAAiBG,GAA0B,CAC7C,MAAME,EAAgB,SAAS,eAAe,UAAUF,GAAA,YAAAA,EAAQ,EAAE,EAAE,EACpE,GAAI,CAACE,EAAe,OAEd,MAAAC,EAAOD,EAAc,cAAc,GAAG,EAExCC,EAGAA,EAAK,MAAM,EAGXD,EAAc,eAAe,CACzB,SAAU,SACV,MAAO,QAAA,CACV,CACL,CACH,EAEK,KAAA,CAAE,oBAAAE,GAAwBC,IAE1BC,EAAuBC,EAAwB,CACjD,WAAY,qBACZ,QAAS,WACT,gBAAmBZ,EAAS,MAAM,IAAI,CAACK,EAAQQ,KACpC,CACH,QAAS,WACT,SAAYA,EAAI,EAChB,KAAQ,CACJ,MAAOR,EAAO,GACd,KAAQA,GAAA,YAAAA,EAAQ,MAChB,IAAOI,EAAoB,CAAE,KAAMK,EAAkB,cAAe,OAAQ,CAAE,KAAMT,EAAO,IAAK,CAAA,CAAG,CACvG,CAAA,EAEP,CAAA,CACJ,uqCC5CK,KAAA,CAAE,UAAAU,GAAcL,IAChB,CAAE,KAAAM,EAAM,MAAAC,CAAA,GAAgB,CAAAC,EAAAC,CAAA,EAAAC,EAAA,IAAAC,GAAuC,IAC1DN,EAAoC,YAAa,CACpD,MAAO,CACH,cAAe,KACnB,CAAA,CACH,EACL,aAAC,CAAA,mBAED,GAAIE,EAAM,MACA,MAAAK,EAAY,CAAE,WAAY,IAAK,eAAeC,EAAAN,EAAM,QAAN,YAAAM,EAAa,QAAS,EAM9E,KAAM,CAAE,QAAAC,CAAQ,GAAI,CAAAN,EAAAC,CAAA,EAAAC,EAAA,IAAMK,GAAoB,UAAW,EAAK,CAAA,mBAExD,CAAE,EAAAC,GAAMC,IAER3B,EAAWC,EAAS,IAAA,OAAM,OAAAsB,EAAAP,EAAK,QAAL,YAAAO,EAAa,gBAAe,EACtDK,EAAY3B,EAAS,WAAM,QAAAsB,EAAAC,EAAQ,QAAR,YAAAD,EAAe,QAASG,EAAE,0BAA0B,EAAC,EAChFG,EAAW5B,EAAS,WAAM,QAAAsB,EAAAC,EAAQ,QAAR,YAAAD,EAAe,OAAQG,EAAE,yBAAyB,EAAC,EAE7E,CAAE,WAAAI,EAAY,WAAAC,CAAe,EAAAC,EAAeR,EAAS,CAAE,MAAOE,EAAE,0BAA0B,CAAA,CAAG,EAEnG,OAAAO,EAAWH,CAAU"}