{"version":3,"file":"CompareButton-c7614d17.js","sources":["../../src/components/buttons/CompareButton.vue"],"sourcesContent":["<template>\r\n  <button\r\n    type=\"button\"\r\n    :class=\"['btn', `btn-${variant}`, 'compare-btn', comparisonStore.isCurrentlySelected(vehicleId) ? 'selected' : '']\"\r\n    @click=\"addOrRemoveCarToCompare\"\r\n    :disabled=\"disableAddToCompare\"\r\n  >\r\n    <img class=\"compare-btn__compare-icon\" :alt=\"compareIconAltText\" />{{ compareLabel }}\r\n  </button>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { computed } from 'vue';\r\nimport { useCarComparisonStore } from '../../foundation/stores/carComparisonStore';\r\n\r\nconst comparisonStore = useCarComparisonStore();\r\n\r\nconst props = defineProps({\r\n  vehicleId: {\r\n    type: String,\r\n    required: true,\r\n  },\r\n  variant: {\r\n    type: String,\r\n    default: 'secondary',\r\n  },\r\n});\r\n\r\nfunction addOrRemoveCarToCompare() {\r\n  if (comparisonStore.isCurrentlySelected(props.vehicleId)) {\r\n    const indexToRemove = comparisonStore.selectedVehicleIds.findIndex((item: string) => item === props.vehicleId);\r\n\r\n    comparisonStore.removeCarToCompare(indexToRemove, false);\r\n  } else {\r\n    comparisonStore.addCarToCompare(props.vehicleId);\r\n  }\r\n}\r\n\r\nconst compareIconAltText = computed(() => {\r\n  return comparisonStore.isCurrentlySelected(props.vehicleId) ? 'An icon with a minus inside a circle.' : 'An icon with a plus inside a circle.';\r\n});\r\n\r\nconst disableAddToCompare = computed(() => {\r\n  return !comparisonStore.isCurrentlySelected(props.vehicleId) && comparisonStore.hasReachedMaxLimit;\r\n});\r\n\r\nconst compareLabel = computed(() => {\r\n  return comparisonStore.isCurrentlySelected(props.vehicleId) ? 'Remove' : 'Compare';\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.compare-btn {\r\n  width: 195px;\r\n  display: flex;\r\n  flex-direction: row;\r\n  gap: 0.5rem;\r\n  height: 2.5rem;\r\n\r\n  .compare-btn__compare-icon {\r\n    content: url(@/assets/img/add-to-compare.svg);\r\n  }\r\n\r\n  &:disabled {\r\n    .compare-btn__compare-icon {\r\n      content: url(@/assets/img/add-to-compare-disabled.svg);\r\n    }\r\n  }\r\n\r\n  &.selected {\r\n    .compare-btn__compare-icon {\r\n      content: url(@/assets/img/remove-from-compare.svg);\r\n    }\r\n\r\n    &.btn-primary {\r\n      background-color: $racq-dark-blue;\r\n      color: #fff;\r\n    }\r\n\r\n    &:hover {\r\n      background-color: $racq-button-highlight-color;\r\n      color: $racq-true-white;\r\n      .compare-btn__compare-icon {\r\n        content: url(@/assets/img/remove-from-compare.svg);\r\n      }\r\n    }\r\n\r\n    &:focus {\r\n      outline: 2px dashed $racq-navy;\r\n    }\r\n\r\n    &:active {\r\n      background-color: $racq-dark-blue;\r\n      outline: 2px dashed $racq-navy;\r\n    }\r\n  }\r\n}\r\n</style>\r\n"],"names":["comparisonStore","useCarComparisonStore","addOrRemoveCarToCompare","props","indexToRemove","item","compareIconAltText","computed","disableAddToCompare","compareLabel"],"mappings":"iaAeMA,EAAkBC,IAaxB,SAASC,GAA0B,CACjC,GAAIF,EAAgB,oBAAoBG,EAAM,SAAS,EAAG,CAClD,MAAAC,EAAgBJ,EAAgB,mBAAmB,UAAWK,GAAiBA,IAASF,EAAM,SAAS,EAE7FH,EAAA,mBAAmBI,EAAe,EAAK,CAAA,MAEvCJ,EAAA,gBAAgBG,EAAM,SAAS,CAEnD,CAEM,MAAAG,EAAqBC,EAAS,IAC3BP,EAAgB,oBAAoBG,EAAM,SAAS,EAAI,wCAA0C,sCACzG,EAEKK,EAAsBD,EAAS,IAC5B,CAACP,EAAgB,oBAAoBG,EAAM,SAAS,GAAKH,EAAgB,kBACjF,EAEKS,EAAeF,EAAS,IACrBP,EAAgB,oBAAoBG,EAAM,SAAS,EAAI,SAAW,SAC1E"}