{"version":3,"file":"PillItem-4488d1b7.js","sources":["../../src/components/form-fields/PillItem.vue"],"sourcesContent":["<template>\r\n  <div :class=\"[defaultClass, showAsLink ? linkClass : '']\">\r\n    <button @click=\"closeClicked\" class=\"unstyled-btn d-flex items-center\" :aria-label=\"displayText || 'Remove item'\">\r\n      <div class=\"pill-item__display-text\" v-text=\"displayText\" />\r\n\r\n      <div class=\"pill-item__remove-icon\" />\r\n    </button>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\nimport { ref, computed } from 'vue';\r\n\r\nconst emit = defineEmits<{\r\n  (event: 'remove', displayText: string, dataModel: any): void;\r\n}>();\r\n\r\nconst props = defineProps({\r\n  dataModel: {\r\n    type: [String, Object],\r\n    required: true,\r\n  },\r\n  displayTextField: {\r\n    type: String,\r\n    default: '',\r\n  },\r\n  showAsLink: {\r\n    type: Boolean,\r\n    default: false,\r\n  },\r\n});\r\n\r\nconst linkClass = ref('link');\r\nconst defaultClass = ref('pill-item__container');\r\n\r\nconst displayText = computed(() => {\r\n  if (props.displayTextField && typeof props.dataModel === 'object') {\r\n    return props.dataModel[props.displayTextField];\r\n  }\r\n\r\n  // calculate the field to return if no field specified\r\n  if (props.dataModel && typeof props.dataModel === 'object') {\r\n    // grab the first item in the object\r\n    const keyList = Object.keys(props.dataModel);\r\n    return props.dataModel[keyList[0]];\r\n  }\r\n\r\n  return props.dataModel;\r\n});\r\n\r\nfunction closeClicked(event: Event) {\r\n  event.preventDefault();\r\n  event.stopPropagation();\r\n  emit('remove', displayText.value, props.dataModel);\r\n}\r\n</script>\r\n<style lang=\"scss\" scoped>\r\n.pill-item__container {\r\n  background-color: lightgray;\r\n  border-radius: 15px;\r\n  height: 34px;\r\n  display: flex;\r\n  width: fit-content;\r\n  display: flex;\r\n  justify-content: center;\r\n  align-items: center;\r\n\r\n  &.link {\r\n    background: transparent;\r\n    .pill-item__display-text {\r\n      text-decoration: underline;\r\n      color: $racq-blue;\r\n    }\r\n\r\n    & .pill-item__remove-icon {\r\n      background-image: url(@/assets/img/pill-item-link-remove.svg);\r\n    }\r\n  }\r\n}\r\n\r\n.pill-item__remove-icon {\r\n  margin-left: auto;\r\n  margin-right: 1rem;\r\n  display: flex;\r\n  align-items: center;\r\n  background-image: url(@/assets/img/pill-item-remove.svg);\r\n  background-repeat: no-repeat;\r\n  background-position: center;\r\n  width: 0.75rem;\r\n  height: 0.75rem;\r\n  cursor: pointer;\r\n}\r\n\r\n.pill-item__display-text {\r\n  display: flex;\r\n  color: $racq-cool-grey;\r\n  align-items: center;\r\n  margin-left: 1rem;\r\n  margin-right: 5px;\r\n  cursor: pointer;\r\n  font-family: $arial-regular-font;\r\n  font-size: 1rem;\r\n  font-weight: normal;\r\n}\r\n</style>\r\n"],"names":["linkClass","ref","defaultClass","displayText","computed","props","keyList","closeClicked","event","emit"],"mappings":"4fAgCMA,EAAYC,EAAI,MAAM,EACtBC,EAAeD,EAAI,sBAAsB,EAEzCE,EAAcC,EAAS,IAAM,CACjC,GAAIC,EAAM,kBAAoB,OAAOA,EAAM,WAAc,SAChD,OAAAA,EAAM,UAAUA,EAAM,kBAI/B,GAAIA,EAAM,WAAa,OAAOA,EAAM,WAAc,SAAU,CAE1D,MAAMC,EAAU,OAAO,KAAKD,EAAM,SAAS,EACpC,OAAAA,EAAM,UAAUC,EAAQ,GACjC,CAEA,OAAOD,EAAM,SAAA,CACd,EAED,SAASE,EAAaC,EAAc,CAClCA,EAAM,eAAe,EACrBA,EAAM,gBAAgB,EACtBC,EAAK,SAAUN,EAAY,MAAOE,EAAM,SAAS,CACnD"}