{"version":3,"file":"CustomerReviews-DiyxqsU8.js","sources":["../../../app/javascript/src/components/CustomerReviews.vue"],"sourcesContent":["<template>\n  <div class=\"carousel\">\n    <CustomerReview\n      class=\"review\"\n      v-for=\"(review, i) in reviews\" :key=\"i\"\n      :title=\"review.title\"\n      :description=\"review.description\"\n      :author=\"review.author\"\n      :photo=\"review.photo\"\n      :style=\"positionStyle(review.position)\"\n      :highlight=\"review.position === 0\"\n      @click=\"rotateToPosition(review.position)\"\n    />\n  </div>\n\n  <div v-if=\"mobile\" class=\"nav\">\n    <ArrowIcon class=\"arrow left\" @click=\"rotateToLeft()\"/>\n    <ArrowIcon class=\"arrow right\" @click=\"rotateToRight()\"/>\n  </div>\n</template>\n\n<script setup>\nimport CustomerReview from \"@/modules/MbaExclusive/Components/CustomerReview.vue\";\nimport ArrowIcon from \"app/assets/images/mba/icons/arrow.svg?component\";\nimport { useShared } from \"@/helpers/vueHelpers.js\";\nimport { sleep } from \"@/utils/generalUtils.js\";\n\nconst { reviews } = defineProps({ reviews: Array });\nconst { mobile } = useShared();\n\nconst minPos = reviews.at(0).position;\nconst maxPos = reviews.at(-1).position;\nconst transitionDuration = 100;\n\nfunction positionStyle(pos) {\n  const translateX = 53 * pos;\n  const scaleY = 1 - Math.abs(pos) * 0.05;\n  return {\n    zIndex: 100 - Math.abs(pos),\n    position: pos === 0 ? 'static' : 'absolute',\n    transform: `translateX(${translateX}%) scaleY(${scaleY})`,\n    transitionDuration: `${transitionDuration}ms`,\n  }\n}\n\nasync function rotateToLeft(n = 1) {\n  for (let i = 0; i < n; i++) {\n    reviews.forEach(r => r.position = r.position < maxPos ? r.position + 1 : minPos);\n    await sleep(transitionDuration);\n  }\n}\n\nasync function rotateToRight(n = 1) {\n  for (let i = 0; i < n; i++) {\n    reviews.forEach(r => r.position = r.position > minPos ? r.position - 1 : maxPos);\n    await sleep(transitionDuration);\n  }\n}\n\nfunction rotateToPosition(pos) {\n  if (pos > 0) rotateToRight(pos);\n  if (pos < 0) rotateToLeft(-pos);\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.carousel {\n  display: flex;\n  align-items: flex-end;\n  position: relative;\n\n  .review {\n    cursor: pointer;\n    transform-origin: bottom center;\n    transition-property: transform;\n    transition-timing-function: linear;\n  }\n}\n\n.nav {\n  margin-top: 12px;\n  display: flex;\n  gap: 12px;\n}\n\n.arrow {\n  width: 36px;\n  color: $brand-primary;\n  cursor: pointer;\n\n  &.right {\n    transform: rotate(180deg);\n  }\n}\n</style>"],"names":["transitionDuration","mobile","useShared","minPos","__props","maxPos","positionStyle","pos","translateX","scaleY","rotateToLeft","n","r","sleep","rotateToRight","rotateToPosition"],"mappings":"w4BAgCMA,EAAqB,+DAJ3B,KAAM,CAAE,OAAAC,CAAQ,EAAGC,EAAW,EAExBC,EAASC,EAAO,QAAC,GAAG,CAAC,EAAE,SACvBC,EAASD,EAAA,QAAQ,GAAG,EAAE,EAAE,SAG9B,SAASE,EAAcC,EAAK,CAC1B,MAAMC,EAAa,GAAKD,EAClBE,EAAS,EAAI,KAAK,IAAIF,CAAG,EAAI,IACnC,MAAO,CACL,OAAQ,IAAM,KAAK,IAAIA,CAAG,EAC1B,SAAUA,IAAQ,EAAI,SAAW,WACjC,UAAW,cAAcC,CAAU,aAAaC,CAAM,IACtD,mBAAoB,GAAGT,CAAkB,IAC7C,CACA,CAEA,eAAeU,EAAaC,EAAI,EAAG,CACjC,QAAS,EAAI,EAAG,EAAIA,EAAG,IACrBP,EAAO,QAAC,QAAQQ,GAAKA,EAAE,SAAWA,EAAE,SAAWP,EAASO,EAAE,SAAW,EAAIT,CAAM,EAC/E,MAAMU,EAAMb,CAAkB,CAElC,CAEA,eAAec,EAAcH,EAAI,EAAG,CAClC,QAAS,EAAI,EAAG,EAAIA,EAAG,IACrBP,EAAO,QAAC,QAAQQ,GAAKA,EAAE,SAAWA,EAAE,SAAWT,EAASS,EAAE,SAAW,EAAIP,CAAM,EAC/E,MAAMQ,EAAMb,CAAkB,CAElC,CAEA,SAASe,EAAiBR,EAAK,CACzBA,EAAM,GAAGO,EAAcP,CAAG,EAC1BA,EAAM,GAAGG,EAAa,CAACH,CAAG,CAChC"}