{"version":3,"file":"vctDovmI.js","sources":["../../../../storyblok/ProviderSliderDisplay.vue"],"sourcesContent":["<template>\n  <div\n    class=\"providers-slider\"\n    :class=\"{ [`bg-${blok.bgColor}`]: blok.bgColor }\"\n  >\n    <GridContainer>\n      <GridItem>\n        <div class=\"header-container\">\n          <h2>{{ blok.title }}</h2>\n        </div>\n\n        <div ref=\"sliderEl\" class=\"blaze-slider\">\n          <div class=\"blaze-container\">\n            <div class=\"blaze-track-container\">\n              <div class=\"blaze-track\">\n                <component\n                  class=\"provider-slide\"\n                  v-for=\"provider in blok.providers\"\n                  :is=\"getStoryblokUrl(provider.link) ? NuxtLink : 'div'\"\n                  :href=\"getStoryblokUrl(provider.link)\"\n                  :aria-label=\"\n                    getStoryblokUrl(provider.link)\n                      ? t('aria.link', { i: provider.providerName })\n                      : undefined\n                  \"\n                >\n                  <StoryblokImg :image=\"provider.image\" />\n                </component>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <div class=\"btn-container\" v-if=\"blok.button?.length\">\n          <NavigationButton :blok=\"blok.button[0]\" />\n        </div>\n      </GridItem>\n    </GridContainer>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport { NuxtLink } from \"#components\";\nimport BlazeSlider from \"blaze-slider\";\nimport { GridContainer, GridItem, mediaBreakpoints } from \"cja-phoenix\";\nimport NavigationButton from \"./NavigationButton.vue\";\nimport { getStoryblokUrl } from \"@/utils/getStoryblokUrl\";\nimport { ProviderSliderDisplayStoryblok } from \"~/types/bloks\";\n\nconst { t } = useI18n();\n\nconst props = defineProps<{ blok: ProviderSliderDisplayStoryblok }>();\nconst blok = {\n  ...props.blok,\n  providers: props.blok.providerSlider.content.providers,\n};\n\nconst sliderEl = ref();\n\nonMounted(() => {\n  new BlazeSlider(sliderEl.value, {\n    all: {\n      enableAutoplay: true,\n      autoplayInterval: 3000,\n      slidesToShow: 2,\n      slidesToScroll: 1,\n      slideGap: \"16px\",\n    },\n    [`(min-width: ${mediaBreakpoints.sm.min}px)`]: {\n      slidesToShow: 3,\n      slidesToScroll: 1,\n    },\n    [`(min-width: ${mediaBreakpoints.md.min}px)`]: {\n      slidesToShow: 5,\n      slidesToScroll: 2,\n      slideGap: \"24px\",\n    },\n    [`(min-width: ${mediaBreakpoints.lg.min}px)`]: {\n      autoplayInterval: 5000,\n      slidesToShow: 6,\n      slidesToScroll: 3,\n    },\n    [`(min-width: ${mediaBreakpoints.xl.min}px)`]: {\n      slidesToShow: 7,\n      slidesToScroll: 3,\n    },\n  });\n});\n</script>\n\n<style lang=\"scss\" scoped>\n.providers-slider {\n  padding: 40px 0;\n\n  .header-container {\n    margin-bottom: 32px;\n    @include blok-header;\n\n    h2 {\n      margin: 0;\n    }\n  }\n\n  .blaze-slider {\n    --slides-to-show: 1;\n    --slide-gap: 16px;\n\n    @media screen and (min-width: $break-xs-min) {\n      --slides-to-show: 2;\n    }\n\n    @media screen and (min-width: $break-sm-min) {\n      --slides-to-show: 3;\n    }\n\n    @media screen and (min-width: $break-md-min) {\n      --slides-to-show: 5;\n      --slide-gap: 24px;\n    }\n\n    @media screen and (min-width: $break-lg-min) {\n      --slides-to-show: 6;\n    }\n\n    @media screen and (min-width: $break-xl-min) {\n      --slides-to-show: 7;\n    }\n  }\n\n  .provider-slide {\n    display: flex;\n    flex-direction: row;\n    justify-content: center;\n    align-items: center;\n    padding: 24px;\n    background: $white;\n    border-radius: 16px;\n\n    img {\n      display: block;\n      max-width: 100%;\n    }\n  }\n\n  .btn-container {\n    margin-top: 32px;\n    display: flex;\n    justify-content: center;\n  }\n\n  &:not([class*=\"bg-\"]) {\n    .provider-slide {\n      border: 1px solid $light-grey;\n    }\n  }\n}\n</style>\n\n<i18n lang=\"json\">\n{\n  \"pt\": {\n    \"aria\": {\n      \"link\": \"Página da instituição - {i}\"\n    }\n  }\n}\n</i18n>\n"],"names":["t","useI18n","props","__props","blok","sliderEl","ref","onMounted","BlazeSlider","mediaBreakpoints"],"mappings":"+dAiDM,KAAA,CAAE,EAAAA,CAAE,EAAIC,EAAQ,EAEhBC,EAAQC,EACRC,EAAO,CACX,GAAGF,EAAM,KACT,UAAWA,EAAM,KAAK,eAAe,QAAQ,SAC/C,EAEMG,EAAWC,EAAI,EAErB,OAAAC,EAAU,IAAM,CACV,IAAAC,EAAYH,EAAS,MAAO,CAC9B,IAAK,CACH,eAAgB,GAChB,iBAAkB,IAClB,aAAc,EACd,eAAgB,EAChB,SAAU,MACZ,EACA,CAAC,eAAeI,EAAiB,GAAG,GAAG,KAAK,EAAG,CAC7C,aAAc,EACd,eAAgB,CAClB,EACA,CAAC,eAAeA,EAAiB,GAAG,GAAG,KAAK,EAAG,CAC7C,aAAc,EACd,eAAgB,EAChB,SAAU,MACZ,EACA,CAAC,eAAeA,EAAiB,GAAG,GAAG,KAAK,EAAG,CAC7C,iBAAkB,IAClB,aAAc,EACd,eAAgB,CAClB,EACA,CAAC,eAAeA,EAAiB,GAAG,GAAG,KAAK,EAAG,CAC7C,aAAc,EACd,eAAgB,CAAA,CAClB,CACD,CAAA,CACF"}