{"version":3,"file":"qV_GFFvP.js","sources":["../../../../storyblok/ClientReviewsDisplay.vue"],"sourcesContent":["<template>\n  <div class=\"client-reviews\" :class=\"{ [`bg-${blok.bgColor}`]: blok.bgColor }\">\n    <GridContainer>\n      <GridItem>\n        <div class=\"header-container\">\n          <h2>{{ blok.title }}</h2>\n        </div>\n        <div ref=\"sliderEl\" class=\"blaze-slider\">\n          <div class=\"blaze-container\">\n            <div class=\"blaze-track-container\">\n              <div class=\"blaze-track\">\n                <div class=\"review\" v-for=\"review in blok.clientReviews\">\n                  <div class=\"m-cgg-icon--open-quote\"></div>\n                  <div class=\"review-body\">\n                    <div class=\"review-text\">\n                      <RichText :text=\"review.reviewText\" />\n                    </div>\n                  </div>\n                  <div class=\"review-footer\">\n                    <div\n                      class=\"image-container\"\n                      v-if=\"review.clientImage.filename\"\n                    >\n                      <StoryblokImg\n                        :image=\"review.clientImage\"\n                        width=\"40\"\n                        height=\"40\"\n                      />\n                    </div>\n                    <div class=\"info-container\">\n                      <span class=\"author\"> {{ review.reviewAuthor }} </span>,\n                      <component\n                        class=\"source\"\n                        :is=\"review.sourceLink.url ? NuxtLink : 'span'\"\n                        :href=\"\n                          review.sourceLink.url\n                            ? getStoryblokUrl(review.sourceLink)\n                            : ''\n                        \"\n                        target=\"_blank\"\n                      >\n                        {{ review.source }}\n                      </component>\n                    </div>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            <div class=\"blaze-pagination\"></div>\n          </div>\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 { getStoryblokUrl } from \"@/utils/getStoryblokUrl\";\nimport {\n  ClientReviewsDataStoryblok,\n  ClientReviewsDisplayStoryblok,\n} from \"~/types/bloks\";\n\nconst props = defineProps<{ blok: ClientReviewsDisplayStoryblok }>();\nconst blok = {\n  ...props.blok,\n  title: props.blok.clientReviews.content.title,\n  clientReviews: props.blok.clientReviews.content.clientReviews,\n};\n\nconst { siteURL } = useRuntimeConfig().public;\n\nconst sliderEl = ref();\n\nonMounted(() => {\n  new BlazeSlider(sliderEl.value, {\n    all: {\n      loop: false,\n      draggable: true,\n      slideGap: \"24px\",\n      slidesToShow: 1,\n      slidesToScroll: 1,\n    },\n    [`(min-width: ${mediaBreakpoints.md.min}px)`]: {\n      slidesToShow: 2,\n      slidesToScroll: 2,\n    },\n    [`(min-width: ${mediaBreakpoints.lg.min}px)`]: {\n      slidesToShow: 3,\n      slidesToScroll: 3,\n    },\n  });\n});\n\nuseJsonld(\n  blok.clientReviews.map((r: ClientReviewsDataStoryblok) => ({\n    \"@context\": \"https://schema.org\",\n    \"@type\": \"Review\",\n    reviewBody: extractRichText(r.reviewText),\n    itemReviewed: {\n      \"@type\": \"Organization\",\n      name: \"ComparaJá.pt\",\n      url: siteURL,\n    },\n    author: {\n      \"@type\": \"Person\",\n      name: r.reviewAuthor,\n    },\n  }))\n);\n</script>\n\n<style lang=\"scss\" scoped>\n.client-reviews {\n  padding: 60px 0;\n\n  .header-container {\n    @include blok-header;\n  }\n\n  .blaze-slider {\n    --slides-to-show: 1;\n    --slide-gap: 24px;\n\n    @media screen and (min-width: $break-md-min) {\n      --slides-to-show: 2;\n    }\n\n    @media screen and (min-width: $break-lg-min) {\n      --slides-to-show: 3;\n    }\n\n    .blaze-container {\n      display: flex;\n      flex-direction: column;\n      gap: 16px;\n\n      @media screen and (min-width: $break-lg-min) {\n        gap: 40px;\n      }\n    }\n\n    .blaze-track-container {\n      max-width: 300px;\n      margin: -15px auto 0;\n      padding-top: 15px;\n\n      @media screen and (min-width: $break-md-min) {\n        max-width: 600px;\n      }\n\n      @media screen and (min-width: $break-lg-min) {\n        max-width: 940px;\n      }\n    }\n  }\n\n  .review {\n    position: relative;\n    border-radius: 16px;\n    border: 1px solid $main-blue;\n    background: $extra-light-blue;\n    display: grid;\n    grid-template-rows: 1fr auto;\n\n    .m-cgg-icon--open-quote {\n      position: absolute;\n      left: 36px;\n      top: -15px;\n      font-size: 30px;\n      font-weight: 700;\n      @include text-gradient-dark-blue;\n    }\n\n    .review-body {\n      padding: 16px 24px;\n    }\n\n    .review-footer {\n      display: grid;\n      grid-template-columns: 40px 1fr;\n      align-items: center;\n      gap: 16px;\n      background: $white;\n      border-bottom-left-radius: 16px;\n      border-bottom-right-radius: 16px;\n      padding: 16px 24px;\n      height: 72px;\n\n      .image-container {\n        border-radius: 50%;\n        overflow: hidden;\n\n        img {\n          display: block;\n          max-width: 100%;\n        }\n      }\n\n      .info-container {\n        font-size: 12px;\n        font-style: italic;\n\n        .author {\n          font-weight: 700;\n        }\n\n        a.source {\n          text-decoration: underline;\n          color: inherit;\n\n          &:hover {\n            color: $main-blue;\n            text-decoration: none;\n          }\n        }\n      }\n    }\n  }\n}\n</style>\n"],"names":["props","__props","blok","siteURL","useRuntimeConfig","sliderEl","ref","onMounted","BlazeSlider","mediaBreakpoints","useJsonld","r","extractRichText"],"mappings":"2rBAmEA,MAAMA,EAAQC,EACRC,EAAO,CACX,GAAGF,EAAM,KACT,MAAOA,EAAM,KAAK,cAAc,QAAQ,MACxC,cAAeA,EAAM,KAAK,cAAc,QAAQ,aAClD,EAEM,CAAE,QAAAG,CAAA,EAAYC,EAAA,EAAmB,OAEjCC,EAAWC,EAAI,EAErB,OAAAC,EAAU,IAAM,CACV,IAAAC,EAAYH,EAAS,MAAO,CAC9B,IAAK,CACH,KAAM,GACN,UAAW,GACX,SAAU,OACV,aAAc,EACd,eAAgB,CAClB,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,CAAA,CAClB,CACD,CAAA,CACF,EAEDC,EACER,EAAK,cAAc,IAAKS,IAAmC,CACzD,WAAY,qBACZ,QAAS,SACT,WAAYC,EAAgBD,EAAE,UAAU,EACxC,aAAc,CACZ,QAAS,eACT,KAAM,eACN,IAAKR,CACP,EACA,OAAQ,CACN,QAAS,SACT,KAAMQ,EAAE,YAAA,CACV,EACA,CACJ"}