{"version":3,"file":"TheStartFormCar-x7aQKsSr.js","sources":["../../../app/frontend/components/uiElements/TheStartFormCar.vue"],"sourcesContent":["<template lang=\"pug\">\n  .flex.flex-col(class='md:flex-row md:items-center md:bg-white md:rounded-full md:shadow-bottom-light md:p-2')\n    generic-select.w-full(\n      v-model=\"carBrand\"\n      :custom-classes=\"`bg-white rounded-full shadow-bottom-light md:shadow-none focus:outline-none py-4 px-6 md:py-2 ${carBrand ? '' : 'text-emerald-900 text-opacity-40'}`\"\n      arrow-classes='text-emerald-900 stroke-3 scale-90 opacity-25 mr-4 md:mr-0'\n      dropdown-classes=\"z-10 bg-white rounded-lg shadow-bottom-light w-full mt-5 py-5\"\n      dropdown-content-classes=\"max-h-screen-1/2\"\n      :options=\"availableBrands\"\n      filterable\n      :placeholder=\"$t('shared.startForms.car.brandPlaceholder')\"\n      class=\"md:flex-grow\"\n      data-purpose=\"car_brand_select\"\n      name=\"carBrand\"\n    )\n      template(v-slot:query-input=\"{ query, handleQuery, close }\")\n        .mx-4.mb-4.hidden(class='md:block')\n          input.border.border-emerald-200.relative.w-full.text-left.appearance-none.rounded.text-sm.px-4.py-2(\n            class='focus:outline-none focus:border-emerald-900'\n            :value='query'\n            @input='handleQuery($event.target.value)'\n            @keydown.esc='close()'\n          )\n      template(v-slot:default=\"{ isSelectedItem, item, index, isHighlighted, isUniqueItem }\")\n        .select-none.relative.cursor-pointer.px-4(class='bg-white')\n          .flex.items-center.rounded.px-4.py-2(\n            class='hover:bg-emerald-100'\n            :class=\"{ 'bg-emerald-200': isHighlighted(index) || isUniqueItem }\"\n          )\n            img.flex-shrink-0.h-8.w-8.rounded-full(:src=\"item.image\")\n            .font-semibold.text-base.ml-4 {{ item.value }}\n          span.absolute.inset-y-0.right-0.flex.items-center.pr-2(v-if='isSelectedItem(item.value)')\n            sw-icon(name='check' size='h-5 w-5')\n\n    generic-select.w-full.mt-4(\n      v-model=\"carModel\"\n      :custom-classes=\"`bg-white rounded-full shadow-bottom-light md:shadow-none focus:outline-none py-4 px-6 md:py-2 ${carModel ? '' : 'text-emerald-900 text-opacity-40'}`\"\n      arrow-classes='text-emerald-900 stroke-3 scale-90 opacity-25 mr-4 md:mr-0'\n      dropdown-classes=\"z-10 bg-white rounded-lg shadow-bottom-light w-full mt-5 py-5\"\n      dropdown-content-classes=\"max-h-screen-1/2\"\n      :disabled=\"!carBrand\"\n      :options=\"carBrand ? models : []\"\n      filterable\n      :placeholder=\"$t('shared.startForms.car.modelPlaceholder')\"\n      class=\"md:mt-0 md:flex-grow md:border-l-2 md:border-emerald-100 md:ml-6\"\n      data-purpose=\"car_model_select\"\n      name=\"carModel\"\n    )\n      template(v-slot:query-input=\"{ query, handleQuery, close }\")\n        .mx-4.mb-4.hidden(class='md:block')\n          input.border.border-emerald-200.relative.w-full.text-left.appearance-none.rounded.text-sm.px-4.py-2(\n            class='focus:outline-none focus:border-emerald-900'\n            :value='query'\n            @input='handleQuery($event.target.value)'\n            @keydown.esc='close()'\n          )\n      template(v-slot:default=\"{ isSelectedItem, item, index, isHighlighted, isUniqueItem }\")\n        .select-none.relative.cursor-pointer.px-4(class='bg-white')\n          .flex.items-center.rounded.px-4.py-2(\n            class='hover:bg-emerald-100'\n            :class=\"{ 'bg-emerald-200': isHighlighted(index) || isUniqueItem }\"\n          )\n            .font-semibold.text-base.ml-4 {{ item.value }}\n          span.absolute.inset-y-0.right-0.flex.items-center.pr-2(v-if='isSelectedItem(item.value)')\n            sw-icon(name='check' size='h-5 w-5')\n    .mt-4(class=\"md:mt-0 md:flex-shrink-0 md:flex md:items-stretch md:ml-6\")\n      sw-button.w-full.btn-smile.btn-smile-indigo(\n        data-purpose=\"car_start_form_submit\"\n        @click=\"handleSubmit\"\n      ) {{ $t('shared.cta.seePrice') }}\n</template>\n\n<script>\nimport { removeSwVCloak } from '../../mixins/removeSwVCloak';\nimport availableCarBrands from '../../mixins/optionsLists/availableCarBrands.json';\nimport GenericSelect from '../genericComponents/GenericSelect.vue';\n\nexport default {\n  name: 'TheStartFormCar',\n  components: {\n    GenericSelect,\n  },\n  mixins: [removeSwVCloak],\n  props: {\n    initialRawData: {\n      type: String,\n      default: null,\n    },\n    wide: {\n      type: Boolean,\n      default: false,\n    },\n  },\n  data () {\n    return {\n      initialData: JSON.parse(this.initialRawData),\n      carBrand: null,\n      carModel: null,\n    };\n  },\n  computed: {\n    availableBrands () {\n      return availableCarBrands.brands;\n    },\n    models () {\n      return this.initialData.carBrandsAndModels[this.carBrand.toUpperCase()].map((model) => { return { value: model }; });\n    },\n    queryParams () {\n      if (!this.initialData.queryParams) return '';\n\n      return `${this.carBrand ? '&' : '?'}${this.initialData.queryParams}`;\n    },\n  },\n  watch: {\n    carBrand: {\n      handler: function (brand, oldBrand) {\n        if (brand !== oldBrand) {\n          this.carModel = null;\n        }\n      },\n    },\n  },\n  methods: {\n    handleSubmit () {\n      const brandQueryParam = this.carBrand ? `?brand=${this.carBrand}` : '';\n      const modelQueryParam = this.carModel ? `&model=${this.carModel}` : '';\n      this.$turbolinks.visit(`/${this.$i18n.locale}/products/cars/profiling${brandQueryParam + modelQueryParam + this.queryParams}`);\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","GenericSelect","removeSwVCloak","availableCarBrands","model","brand","oldBrand","brandQueryParam","modelQueryParam"],"mappings":"+sIA6EA,MAAAA,EAAA,CACA,KAAA,kBACA,WAAA,CACA,cAAAC,CACA,EACA,OAAA,CAAAC,CAAA,EACA,MAAA,CACA,eAAA,CACA,KAAA,OACA,QAAA,IACA,EACA,KAAA,CACA,KAAA,QACA,QAAA,EACA,CACA,EACA,MAAA,CACA,MAAA,CACA,YAAA,KAAA,MAAA,KAAA,cAAA,EACA,SAAA,KACA,SAAA,IACA,CACA,EACA,SAAA,CACA,iBAAA,CACA,OAAAC,EAAA,MACA,EACA,QAAA,CACA,OAAA,KAAA,YAAA,mBAAA,KAAA,SAAA,aAAA,EAAA,IAAAC,IAAA,CAAA,MAAAA,CAAA,EAAA,CACA,EACA,aAAA,CACA,OAAA,KAAA,YAAA,YAEA,GAAA,KAAA,SAAA,IAAA,GAAA,GAAA,KAAA,YAAA,WAAA,GAFA,EAGA,CACA,EACA,MAAA,CACA,SAAA,CACA,QAAA,SAAAC,EAAAC,EAAA,CACAD,IAAAC,IACA,KAAA,SAAA,KAEA,CACA,CACA,EACA,QAAA,CACA,cAAA,CACA,MAAAC,EAAA,KAAA,SAAA,UAAA,KAAA,QAAA,GAAA,GACAC,EAAA,KAAA,SAAA,UAAA,KAAA,QAAA,GAAA,GACA,KAAA,YAAA,MAAA,IAAA,KAAA,MAAA,MAAA,2BAAAD,EAAAC,EAAA,KAAA,WAAA,EAAA,CACA,CACA,CACA"}