{"version":3,"file":"DropDown-4902a1c8.js","sources":["../../src/components/form-fields/DropDown.vue"],"sourcesContent":["<template>\r\n  <div class=\"drop-down dropdown-list\">\r\n    <div class=\"drop-down__selected-container\" ref=\"dropDown\" @click=\"toggleDropDown\">\r\n      <div class=\"drop-down__selected truncate\" :data-properties=\"selectedDataProperties\">\r\n        <span class=\"truncate drop-down__list-item-label\" :title=\"computedSelectedTooltip\">{{ computedSelectedVal }}</span>\r\n        <em class=\"min-w-fit-content\"><small class=\"drop-down__suffix\" v-if=\"computedSelectedSuffix\" v-text=\"computedSelectedSuffix\" /></em>\r\n      </div>\r\n      <div :class=\"['drop-down__icon', showDropDown ? '' : 'collapsed']\"></div>\r\n    </div>\r\n\r\n    <div class=\"drop-down__list-container\" v-if=\"showDropDown\">\r\n      <ul v-if=\"props.listData && props.listData.length\" class=\"list no-bullet\" role=\"listbox\" :aria-expanded=\"showDropDown\">\r\n        <li v-for=\"(listItem, index) in props.listData\" :key=\"index\" role=\"option\" tabindex=\"0\">\r\n          <div class=\"drop-down__list-item\" :data-properties=\"getDataProperties(listItem)\" @click=\"selectItemClicked(listItem, index)\">\r\n            <span class=\"drop-down__list-item-label ml-2\" :title=\"listItem.tooltip ? listItem.tooltip : ''\">{{ listItem.label }}</span>\r\n            <em class=\"min-w-fit-content\"><small class=\"drop-down__suffix\" v-if=\"listItem.suffix\" v-text=\"listItem.suffix\" /></em>\r\n          </div>\r\n        </li>\r\n      </ul>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport '@/assets/css/components/drop-down.scss';\r\nimport { withDefaults, ref, computed, onUpdated } from 'vue';\r\nimport { onClickOutside } from '@vueuse/core';\r\nimport { IDropDownItem } from '../../foundation/interfaces/IDropDownItem';\r\n\r\nconst props = withDefaults(\r\n  defineProps<{\r\n    listData?: IDropDownItem[];\r\n    defaultToFirstItem?: Boolean;\r\n    selectedItem?: IDropDownItem;\r\n    placeholderText?: string;\r\n  }>(),\r\n  {\r\n    defaultToFirstItem: () => {\r\n      return true;\r\n    },\r\n    placeholderText: 'Select item',\r\n  }\r\n);\r\n\r\n// handle when the user clicks outside of the drop down\r\nconst dropDown = ref(null);\r\nconst selectedValue = ref(props.selectedItem as IDropDownItem);\r\nconst showDropDown = ref(false);\r\nconst selectionChanged = ref(false);\r\n\r\nconst emits = defineEmits(['selected-changed']);\r\n\r\nconst selectedDataProperties = computed(() => {\r\n  if (props.listData && props.listData.length && selectedValue.value)\r\n    return JSON.stringify(props.listData.find((item) => item.value === selectedValue.value.value));\r\n  else return '';\r\n});\r\n\r\nconst computedSelectedTooltip = computed(() => selectedValue.value?.tooltip || '');\r\nconst computedSelectedVal = computed(() => selectedValue.value?.label || props.placeholderText);\r\nconst computedSelectedSuffix = computed(() => selectedValue.value?.suffix || '');\r\n\r\nfunction getDataProperties(itemToSerialize: object) {\r\n  return JSON.stringify(itemToSerialize);\r\n}\r\n\r\nfunction selectItemClicked(itemClicked: IDropDownItem, index: number) {\r\n  selectedValue.value = itemClicked;\r\n  showDropDown.value = false;\r\n  selectionChanged.value = true;\r\n  emits('selected-changed', itemClicked, index);\r\n}\r\n\r\nfunction toggleDropDown() {\r\n  showDropDown.value = !showDropDown.value;\r\n}\r\n\r\nonUpdated(() => {\r\n  if (selectionChanged.value) return;\r\n\r\n  if (props.selectedItem) {\r\n    selectedValue.value = props.selectedItem;\r\n  }\r\n\r\n  if (!props.selectedItem && props.defaultToFirstItem) {\r\n    selectedValue.value = props.listData\r\n      ? props.listData[0]\r\n      : {\r\n          label: props.placeholderText,\r\n          value: '',\r\n        };\r\n  }\r\n});\r\n\r\nonClickOutside(dropDown, (event: any) => {\r\n  if (event?.offsetX <= event?.target?.clientWidth) {\r\n    showDropDown.value = false;\r\n  }\r\n});\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.dropdown-list {\r\n  height: 2.5rem;\r\n  width: 100%;\r\n  border-radius: 4px;\r\n  color: $racq-dark-grey;\r\n  border-color: $racq-pale-blue-border;\r\n  background-color: $racq-true-white;\r\n  container-type: size;\r\n}\r\n\r\n.drop-down__selected,\r\n.drop-down__list-item {\r\n  width: 100%;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  padding: 0 0.5rem 0 0;\r\n  align-items: center;\r\n}\r\n\r\n.drop-down__list-item-label {\r\n  line-height: 2;\r\n}\r\n\r\n.drop-down__list-item-label {\r\n  line-height: 2;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  max-width: 15rem;\r\n}\r\n\r\n@container (min-width: 400px) {\r\n  .drop-down__list-item-label {\r\n    max-width: none;\r\n  }\r\n}\r\n</style>\r\n"],"names":["dropDown","ref","selectedValue","props","showDropDown","selectionChanged","selectedDataProperties","computed","item","computedSelectedTooltip","_a","computedSelectedVal","computedSelectedSuffix","getDataProperties","itemToSerialize","selectItemClicked","itemClicked","index","emits","toggleDropDown","onUpdated","onClickOutside","event"],"mappings":"4rBA6CMA,EAAWC,EAAI,IAAI,EACnBC,EAAgBD,EAAIE,EAAM,YAA6B,EACvDC,EAAeH,EAAI,EAAK,EACxBI,EAAmBJ,EAAI,EAAK,EAI5BK,EAAyBC,EAAS,IAClCJ,EAAM,UAAYA,EAAM,SAAS,QAAUD,EAAc,MACpD,KAAK,UAAUC,EAAM,SAAS,KAAMK,GAASA,EAAK,QAAUN,EAAc,MAAM,KAAK,CAAC,EACnF,EACb,EAEKO,EAA0BF,EAAS,IAAM,OAAA,QAAAG,EAAAR,EAAc,QAAd,YAAAQ,EAAqB,UAAW,GAAE,EAC3EC,EAAsBJ,EAAS,WAAM,QAAAG,EAAAR,EAAc,QAAd,YAAAQ,EAAqB,QAASP,EAAM,gBAAe,EACxFS,EAAyBL,EAAS,IAAM,OAAA,QAAAG,EAAAR,EAAc,QAAd,YAAAQ,EAAqB,SAAU,GAAE,EAE/E,SAASG,EAAkBC,EAAyB,CAC3C,OAAA,KAAK,UAAUA,CAAe,CACvC,CAES,SAAAC,EAAkBC,EAA4BC,EAAe,CACpEf,EAAc,MAAQc,EACtBZ,EAAa,MAAQ,GACrBC,EAAiB,MAAQ,GACnBa,EAAA,mBAAoBF,EAAaC,CAAK,CAC9C,CAEA,SAASE,GAAiB,CACXf,EAAA,MAAQ,CAACA,EAAa,KACrC,CAEA,OAAAgB,EAAU,IAAM,CACVf,EAAiB,QAEjBF,EAAM,eACRD,EAAc,MAAQC,EAAM,cAG1B,CAACA,EAAM,cAAgBA,EAAM,qBAC/BD,EAAc,MAAQC,EAAM,SACxBA,EAAM,SAAS,GACf,CACE,MAAOA,EAAM,gBACb,MAAO,EAAA,GAEf,CACD,EAEckB,EAAArB,EAAWsB,GAAe,QACnCA,GAAA,YAAAA,EAAO,YAAWZ,EAAAY,GAAA,YAAAA,EAAO,SAAP,YAAAZ,EAAe,eACnCN,EAAa,MAAQ,GACvB,CACD"}