{"version":3,"file":"review_carousel-C5kEJxGa.js","sources":["../../../app/javascript/components/sliders/review/reviewCarousel.vue","../../../app/javascript/entrypoints/review_carousel.js"],"sourcesContent":["<template>\n  <div>\n    <Carousel class=\"review-card__container mt-4\" :settings=\"settings\" :breakpoints=\"breakpoints\">\n      <Slide class=\"review-card\" v-for=\"(review, i) in reviews\" :key=\"i\">\n        <div class=\"review-card__content\">\n          <div class=\"d-flex align-items-start\">\n            <img :src=\"review.values.photo_url.value\" loading=\"lazy\" class=\"avatar-small\">\n            <div class=\"d-flex flex-column align-items-start\">\n              <span class=\"review-card__name\">\n                {{ review.values.author_name.value }}\n              </span>\n              <span class=\"review-card__date\">\n                <span v-if=\"review.values.timestamp.value\">\n                  {{ formatDate(review.values.timestamp.value) }}\n                </span>\n              </span>\n            </div>\n          </div>\n          <div class=\"stars-container mb-2 mt-3\">\n            <img :src=\"'https://spacebarprod-16905.kxcdn.com/public-assets/star-border'\" class=\"star-border\"\n              alt=\"Active star review\" loading=\"lazy\" v-for=\" n in 5\" :key=\"n + ' active star'\">\n            <div class=\"d-flex\">\n              <div class=\"star-yellow__container\" v-for=\"n in review.values.rating.value\" :key=\"n + ' non active star'\">\n                <img :src=\"'https://spacebarprod-16905.kxcdn.com/public-assets/star-active'\" loading=\"lazy\" class=\"star-yellow\"\n                  alt=\"Non active star\">\n              </div>\n            </div>\n          </div>\n          <div class=\"p-read-more-cont\">\n            <div class=\"p-read-more\" ref=\"reviewCardPCont\">\n              <p class=\"review-card__p\" ref=\"reviewCardP\" v-if=\"review.values.review.value\">\n                {{ review.values.review.value }}\n              </p>\n              <div v-if=\"showReadMore[i]\">\n                <button class=\"read-more\" @click=\"readMore(i)\">\n                  {{ showReadMore[i] ? (locale === 'es' ? 'Leer más' : 'Read More') : (locale === 'es' ? 'Leer menos' : 'Read Less') }}\n                </button>\n              </div>\n              <div v-else-if=\"showReadLess[i]\">\n                <button class=\"read-more\" @click=\"readMore(i)\">\n                  {{ showReadMore[i] ? (locale === 'es' ? 'Leer más' : 'Read More') : (locale === 'es' ? 'Leer menos' : 'Read Less') }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </Slide>\n      <template #addons>\n        <Navigation />\n      </template>\n    </Carousel>\n  </div>\n</template>\n\n<script>\nimport { defineComponent } from 'vue'\nimport { Carousel, Navigation, Slide } from 'vue3-carousel'\nimport Moment from 'moment'\n\nexport default defineComponent({\n  name: 'Breakpoints',\n  inject: [\"locale\", \"$axios\"],\n  components: {\n    Carousel,\n    Slide,\n    Navigation\n  },\n  props: {\n    reviews: Array,\n    // productSlugToHide: String\n  },\n  data: () => ({\n    // carousel settings\n    showReadMore: [],\n    showReadLess: [],\n    settings: {\n      itemsToShow: 1.2,\n      snapAlign: 'center',\n    },\n    prices: {},\n    status: {\n      prices: { loading: false }\n    },\n    // breakpoints are mobile first\n    // any settings not specified will fallback to the carousel settings\n    breakpoints: {\n      400: {\n        itemsToShow: 1.1,\n        snapAlign: 'start',\n      },\n      480: {\n        itemsToShow: 1.2,\n        snapAlign: 'start',\n      },\n      575: {\n        itemsToShow: 1.6,\n        snapAlign: 'start',\n      },\n      768: {\n        itemsToShow: 2.1,\n        snapAlign: 'start',\n      },\n      1000: {\n        itemsToShow: 2.8,\n        snapAlign: 'start',\n      },\n      1199: {\n        itemsToShow: 3.6,\n        snapAlign: 'start'\n      }\n    }\n  }),\n  methods: {\n    readMore(i) {\n      if (this.$refs.reviewCardPCont[i].classList.contains('open')) {\n        this.$refs.reviewCardPCont[i].classList.remove('open');\n        this.$refs.reviewCardP[i].classList.remove('open');\n        this.showReadMore[i] = true;\n        this.showReadLess[i] = false;\n      }\n      else {\n        this.$refs.reviewCardPCont[i].classList.add('open')\n        this.$refs.reviewCardP[i].classList.add('open')\n        this.showReadMore[i] = false;\n        this.showReadLess[i] = true;\n      }\n    },\n    formatDate(date) {\n      if (date) {\n        let format = locale === 'es' ? 'DD/MM/YYYY' : 'MM/DD/YYYY';\n        return Moment.unix(date).local().format(format);\n      }\n    }\n  },\n  mounted() {\n    this.$nextTick(() => {\n      let paragraphs = this.$refs.reviewCardP;\n      paragraphs.forEach((paragraph, i) => {\n        if (paragraph.getBoundingClientRect().height > 40) {\n          this.showReadMore[i] = true;\n        }\n      });\n    });\n  }\n})\n</script>\n<style>\n.carousel__viewport {\n  overflow: initial !important;\n}\n</style>\n<style lang=\"scss\" scoped>\n@import 'https://cdn.jsdelivr.net/npm/vue3-carousel@0.2.9/dist/carousel.min.css';\n\n.avatar-small {\n  width: 55px;\n  height: 55px;\n  background-color: var(--light);\n  border-radius: 50%;\n  margin-right: 15px;\n}\n\n.review-card {\n  padding: 5px 4px;\n  background-color: transparent;\n\n  .review-card__content {\n    position: relative;\n    width: 100%;\n    height: 100%;\n    padding: 15px;\n    padding-bottom: 0;\n    background-color: white;\n    border-radius: 10px;\n    box-shadow: 0px 0px 7px 4px rgba(0, 0, 0, 0.05);\n    margin: 10px !important;\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start !important;\n    justify-content: flex-start !important;\n\n    span {\n      text-align: left;\n    }\n\n    &::after {\n      position: absolute;\n      content: \"\";\n      top: 15px;\n      right: 15px;\n      width: 25px;\n      height: 25px;\n      background: url(https://spacebarprod-16905.kxcdn.com/public-assets/g-icon);\n      background-size: contain;\n      background-repeat: no-repeat;\n    }\n  }\n\n}\n\n.review-card__name {\n  font-weight: 600;\n  font-size: 15px;\n  max-width: 188px;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  overflow: hidden;\n  @media screen and (max-width:575px) {\n    margin-right: 30px;\n  }\n}\n\n.review-card__date {\n  font-weight: 300;\n  color: rgb(176, 176, 176);\n  font-size: 12px;\n  span{\n    font-weight: 600;\n    color: rgb(176, 176, 176) !important;\n  }\n}\n\n.star-border {\n  width: 12px;\n  height: 12px;\n  object-fit: contain;\n  opacity: .4;\n  margin-right: 7px;\n}\n\n.star-yellow__container {\n  width: 12;\n  height: 12px;\n\n  .star-yellow {\n    width: 100%;\n    height: 100%;\n    opacity: 1;\n    margin-right: 7px;\n    object-fit: contain;\n    object-position: left;\n\n  }\n}\n\n.stars-container {\n  position: relative;\n  display: flex;\n\n  div.d-flex {\n    position: absolute;\n  }\n}\n\n.p-read-more-cont {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n  width: 100%;\n  justify-content: space-between;\n  position: relative;\n  background-color: white;\n  min-height: 120px;\n\n}\n\n.p-read-more {\n  position: relative;\n  background-color: white;\n  left: -15px;\n  width: calc(100% + 30px);\n  padding-inline: 15px;\n  z-index: 3;\n  min-height: calc(100% + 15px);\n  -webkit-box-shadow: 0px 7px 4px 5px rgba(0, 0, 0, 0.03);\n  box-shadow: 0px 7px 4px 5px rgba(0, 0, 0, 0.03);\n  border-radius: 0 0 10px 10px;\n\n  &.open {\n    position: absolute;\n    padding-bottom: 20px;\n\n    .read-more {\n      color: rgb(84, 84, 84);\n      font-size: 14px;\n      text-transform: capitalize;\n      text-decoration: underline;\n      bottom: -20px;\n      position: absolute;\n      left: 0;\n      width: 100%;\n      padding-left: 15px;\n      -webkit-box-shadow: 0px 7px 4px 5px rgba(0, 0, 0, 0.03);\n      box-shadow: 0px 7px 4px 5px rgba(0, 0, 0, 0.03);\n      height: 40px;\n      padding-bottom: 10px;\n    }\n  }\n\n  .read-more {\n    color: rgb(84, 84, 84);\n    font-size: 14px;\n    text-transform: capitalize;\n    text-decoration: underline;\n    bottom: 0;\n    background-color: white;\n    left: 0;\n    width: 100%;\n    text-align: left;\n    border-radius: 0 0 10px 10px;\n    padding-top: 10px;\n  }\n}\n\n\n\n.review-card__p {\n  font-size: 13px;\n  font-weight: 300;\n  text-align: left;\n  overflow-wrap: break-word;\n  display: -webkit-box;\n  -webkit-line-clamp: 4;\n  -webkit-box-orient: vertical;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  margin-bottom: 0;\n\n  &.open {\n    overflow-wrap: normal;\n    display: flex;\n    -webkit-line-clamp: initial;\n    -webkit-box-orient: initial;\n    overflow-y: scroll;\n    overflow-x: hidden;\n    text-overflow: initial;\n    max-height: 170px;\n  }\n}\n</style>\n","import App from '@components/sliders/review/reviewCarousel.vue'\nimport { generateApplication } from '@helpers/generate_component.js';\nimport { generateAxiosInstance } from '@helpers/axios_provider.js';\nconst injections = [{\n  name: 'locale',\n  module: locale\n},{\n  name: '$axios',\n  module: generateAxiosInstance()\n}]\nconst props = {\n  reviews: reviews,\n}\ngenerateApplication(App, \"#review-carousel\", { injections, props })"],"names":["_sfc_main","defineComponent","Carousel","Slide","Navigation","i","date","format","Moment","paragraph","_hoisted_1","_hoisted_2","_hoisted_4","_hoisted_5","_hoisted_6","_hoisted_8","_hoisted_9","_createElementVNode","_hoisted_10","_hoisted_12","_createElementBlock","_createVNode","_component_Carousel","_ctx","_component_Navigation","_openBlock","_Fragment","_renderList","review","_createBlock","_component_Slide","_toDisplayString","_hoisted_7","_hoisted_13","$event","_hoisted_14","_hoisted_15","_hoisted_16","injections","generateAxiosInstance","props","generateApplication","App"],"mappings":"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"}