{"version":3,"file":"CarComparisonMobileDataTable-4aa4b78b.js","sources":["../../src/components/car-comparison/CarComparisonMobileDataTable.vue"],"sourcesContent":["<template>\r\n  <p class=\"data-table-heading\">{{ dataPoint.label.value }}</p>\r\n\r\n  <div class=\"data-table-wrapper\">\r\n    <div v-if=\"!comparisonCount\" class=\"d-flex justify-center items-center py-4\"><em>Add a car to compare</em></div>\r\n\r\n    <template v-else v-for=\"(carData, carIndex) in carsToCompare\" :key=\"`car__${carIndex}`\">\r\n      <template v-if=\"objectHasEntries(carData)\">\r\n        <div :class=\"carsToCompareClasses(carData, carIndex)\">\r\n          <div :class=\"`mobile-color-band car-${carIndex}`\" />\r\n\r\n          <span class=\"data-table-value\" v-html=\"getDataValue({ carData, dataPoint })\" />\r\n\r\n          <div class=\"data-table-vehicle\" v-if=\"carData\">\r\n            <small class=\"text-right text-cool-grey\" v-text=\"comparisonStore.getCarYearRange(carData?.Vehicle_UID)\" />\r\n            <span class=\"data-table-vehicle__make-model\">{{ carData.Make }} {{ carData.Model }} {{ carData.Trim }}</span>\r\n          </div>\r\n        </div>\r\n      </template>\r\n    </template>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport { objectHasEntries } from '../../foundation/helpers';\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\n\r\nconst props = defineProps<{\r\n  dataPoint: any;\r\n  carsToCompare: any[];\r\n  getDataValue: Function;\r\n}>();\r\n\r\n// Pinia Store values\r\nconst comparisonStore = useCarComparisonStore();\r\nconst comparisonCount = computed(() => comparisonStore.vehicleIdsInCart.length);\r\n\r\n// Computed values\r\nconst carsToCompareClasses = computed(() => (carData: any, index: number) => {\r\n  return [\r\n    `data-table-item item-${index}`,\r\n    {\r\n      'car-available': carData?.Vehicle_UID,\r\n      'last-item': index === comparisonCount.value,\r\n    },\r\n  ];\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.data-table-heading {\r\n  color: $racq-cool-grey;\r\n  font-weight: bold;\r\n  font-family: $arial-regular-font;\r\n  margin-bottom: 0.5rem;\r\n  margin-top: 1.5rem;\r\n\r\n  &:first-of-type {\r\n    margin-top: 0;\r\n  }\r\n}\r\n\r\n.data-table-value {\r\n  padding-left: 0.5rem;\r\n  align-self: center;\r\n  max-width: 15rem;\r\n}\r\n\r\n.data-table-vehicle {\r\n  display: flex;\r\n  text-align: right;\r\n  flex-direction: column;\r\n  justify-items: end;\r\n  margin-left: auto;\r\n  padding-right: 0.25rem;\r\n  max-width: 50%;\r\n\r\n  &__make-model {\r\n    text-align: right;\r\n    font-size: 0.875rem;\r\n    color: $racq-dark-grey;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.data-table-wrapper {\r\n  border: 1px solid $racq-pale-blue-border;\r\n  border-radius: 0.25rem;\r\n}\r\n\r\n.data-table-item {\r\n  padding: 0.5rem 0.25rem;\r\n  display: flex;\r\n\r\n  &.car-available:not(.last-item) {\r\n    position: relative;\r\n\r\n    // Add a nice <hr /> border effect\r\n    &:before {\r\n      content: '';\r\n      position: absolute;\r\n      bottom: 0;\r\n      left: 50%;\r\n      transform: translate(-50%, -50%);\r\n      height: 1px;\r\n      width: 95%;\r\n      border-bottom: 1px solid $racq-car-advisory-pale-blue;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["comparisonStore","useCarComparisonStore","comparisonCount","computed","carsToCompareClasses","carData","index"],"mappings":"2tBAmCA,MAAMA,EAAkBC,IAClBC,EAAkBC,EAAS,IAAMH,EAAgB,iBAAiB,MAAM,EAGxEI,EAAuBD,EAAS,IAAM,CAACE,EAAcC,IAClD,CACL,wBAAwBA,IACxB,CACE,gBAAiBD,GAAA,YAAAA,EAAS,YAC1B,YAAaC,IAAUJ,EAAgB,KACzC,CAAA,CAEH"}