{"version":3,"file":"C7zWxWiq.js","sources":["../../../../src/composables/useEmailSuggestions.ts","../../../../src/components/EmailAutocomplete.vue"],"sourcesContent":["import type { Ref } from 'vue'\n\nimport type { SuggestionType } from '@/repository/search.ts'\n\nexport default function useEmailSuggestions(query: Ref<string | undefined>) {\n  const { t } = useI18n()\n\n  const suggestionType = ref<SuggestionType>('none')\n  const suggestions = ref<string[]>([])\n\n  const suggestionsHeader = computed(() => {\n    if (suggestionType.value === 'recent') return t('auto_suggest.email.header.recent') as string\n    if (suggestionType.value === 'suggest') return t('auto_suggest.email.header.suggest') as string\n    else return ''\n  })\n\n  const isFetching = ref(false)\n\n  const suggestionsTimeout = ref(0)\n\n  const isLoading = computed(() => isFetching.value || suggestionsTimeout.value !== 0)\n\n  const error = ref<Error | null>(null)\n\n  const { searchRepository } = useApi()\n\n  const updateSuggestions = async (query?: string) => {\n    isFetching.value = true\n\n    try {\n      const { type, values } = await searchRepository.getEmailSuggestions(query ?? '')\n\n      suggestionType.value = type\n      suggestions.value = values\n\n      error.value = null\n    } catch (e: unknown) {\n      error.value = e as Error\n    }\n\n    isFetching.value = false\n  }\n\n  watch(query, newQuery => {\n    if (suggestionsTimeout.value) {\n      window.clearTimeout(suggestionsTimeout.value)\n    }\n\n    suggestionsTimeout.value = window.setTimeout(() => {\n      void updateSuggestions(newQuery)\n      suggestionsTimeout.value = 0\n    }, 300)\n  })\n\n  return {\n    suggestionType,\n    suggestions,\n    suggestionsHeader,\n    isFetching,\n    isLoading,\n    error,\n    updateSuggestions,\n  }\n}\n","<script lang=\"ts\" setup>\ninterface MenuItem {\n  title?: string\n  value?: string\n  type?: string\n}\n\nconst props = withDefaults(\n  defineProps<{\n    modelValue?: string | string[]\n    label?: string\n    placeholder?: string\n    rules?: ((value: unknown) => boolean | string)[]\n    multiple?: boolean\n    maxValues?: number\n    maxSuggestions?: number\n    autofocus?: boolean\n  }>(),\n  {\n    maxSuggestions: 3,\n  }\n)\n\nconst emit = defineEmits<{\n  (event: 'focus' | 'blur' | 'tab'): void\n  (event: 'select', value: string): void\n  (event: 'enter', blurComponent: () => void): void\n  (event: 'update:error', isError: boolean): void\n  (event: 'update:modelValue' | 'input', value: string | string[]): void\n}>()\n\nconst { t } = useI18n()\n\nconst widgetStore = useWidgetStore()\n\nconst options = computed(() => {\n  if (!props.multiple) {\n    return {\n      hideDetails: true,\n    }\n  }\n  return {\n    multiple: true,\n    counter: props.maxValues ? Number(props.maxValues) : false,\n    hideDetails: !props.maxValues,\n  }\n})\n\nconst { isEmail } = useValidation()\n\nconst inputRules = computed(() => {\n  if (props.rules) return props.rules\n\n  if (props.multiple) {\n    return [(value: string[]) => value.every(isEmail)]\n  } else {\n    return [(value: string) => isEmail(value)]\n  }\n})\n\nconst selection = computed({\n  get() {\n    if (!props.modelValue) return props.multiple ? [] : ''\n    return props.modelValue\n  },\n  set(newValue: string | string[]) {\n    emit('input', newValue)\n    emit('update:modelValue', newValue)\n  },\n})\n\nconst query = ref<string>()\n\n/**\n * Convenience computed property to abstract away nullish values\n * that may be emitted by Vuetify components.\n */\nconst searchInput = computed({\n  get: () => query.value ?? '',\n  set: (newValue?: string) => {\n    query.value = newValue\n  },\n})\n\nconst { isLoading, suggestions, suggestionType, suggestionsHeader, error, updateSuggestions } =\n  useEmailSuggestions(query)\n\nwatch(error, e => {\n  if (e) {\n    widgetStore.createSnackbar({ message: t('global.general_error') })\n  }\n})\n\n/**\n * Values added by the user that we need to keep track of in order to allow selecting\n * values that are not part of the BE suggestions.\n */\nconst userAdditions = ref<string[]>([])\n\nconst menuItems = computed<MenuItem[]>(() => {\n  const items: MenuItem[] = []\n\n  const selectedValues = (Array.isArray(selection.value) ? selection.value : [selection.value]).filter(Boolean)\n\n  // In some cases we want to show a suggestion header, but only if there are unselected suggestions\n  if (suggestionsHeader.value && suggestions.value.some(suggestion => !selectedValues.includes(suggestion))) {\n    items.push({\n      type: 'subheader',\n      title: suggestionsHeader.value,\n    })\n  }\n\n  const values = [...new Set([...userAdditions.value, ...selectedValues])]\n\n  // Limit number of displayed fresh suggestions\n  const addedSuggestions = suggestions.value\n    .filter(suggestion => !values.includes(suggestion))\n    .slice(0, Number(props.maxSuggestions))\n\n  items.push(...[...values, ...addedSuggestions].map(title => ({ value: title, title })))\n\n  return items\n})\n\n/**\n * Filter function for the Vuetify autocomplete component.\n *\n * Most of the filtering is done by the backend, but we want to prevent showing\n * lingering prefix results between debounce intervals.\n */\nconst itemFilter = (value: string, query: string, item?: { raw: MenuItem }) => {\n  if (suggestionType.value === 'prefix') {\n    return Boolean(query && item?.raw.title?.toLowerCase().startsWith(query.toLowerCase()))\n  }\n\n  return true\n}\n\nconst addEmail = (email: string) => {\n  addEmails([email])\n}\n\nconst addEmails = (emails: string[]) => {\n  emails.forEach(email => {\n    if (!userAdditions.value.includes(email)) {\n      userAdditions.value.push(email)\n    }\n  })\n\n  if (props.multiple && Array.isArray(selection.value)) {\n    selection.value = [...new Set([...selection.value, ...emails])]\n  } else {\n    selection.value = emails[0] ?? ''\n  }\n}\n\nconst removeItem = (value: string) => {\n  if (Array.isArray(selection.value)) {\n    selection.value = selection.value.filter(item => item !== value)\n  }\n}\n\nwatch(selection, (newSelection, oldSelection) => {\n  // We need to remove previous user-provided values that are not part of the selection anymore\n  userAdditions.value = userAdditions.value.filter(addition => newSelection.includes(addition))\n\n  // We want to reset the search query when an item has been selected\n  if (props.multiple && newSelection.length > oldSelection.length) {\n    searchInput.value = ''\n  }\n})\n\nconst separatorPattern = /[,;]/\n\nwatch(searchInput, input => {\n  if (!input) {\n    // TODO: The following method does not exist anymore, check if still needed\n    // autocompleteComponent.value?.setMenuIndex(-1)\n    return\n  }\n\n  if (props.multiple && separatorPattern.test(input)) {\n    const maybeEmails = input\n      .split(separatorPattern)\n      .map(part => part.trim())\n      .filter(Boolean)\n    addEmails(maybeEmails)\n    searchInput.value = ''\n  } else if (!props.multiple) {\n    userAdditions.value = [input]\n    selection.value = input\n  }\n})\n\n/*\n// TODO: Implement under Vuetify 3\n\nconst highlightedIndex = ref(-1)\n\nconst highlightedSuggestion = computed(() => {\n  if (props.multiple) return\n  // Previewing in the input only makes sense for prefix suggestions\n  if (searchInput.value === '' || suggestionType.value !== 'prefix') return\n\n  const item = menuItems.value.filter(item => item.title !== selection.value)[highlightedIndex.value]\n\n  return item?.title\n})\n\nconst autocompleteElement = ref<HTMLElement | null>(null)\nconst placeholderElement = ref<HTMLElement | null>(null)\nconst inputElement = ref<HTMLInputElement | null>(null)\n\nconst observer = ref<MutationObserver | null>(null)\n\nconst repositionPlaceholder = (referenceElement: HTMLElement) => {\n  if (autocompleteElement.value && placeholderElement.value) {\n    const inputRect = referenceElement.getBoundingClientRect()\n    const autocompleteRect = autocompleteElement.value.getBoundingClientRect()\n\n    const absLeft = inputRect.left - autocompleteRect.left\n    const absTop = inputRect.top - autocompleteRect.top + 7.5 // 8px is the padding of the input field\n\n    Object.assign(placeholderElement.value.style, {\n      left: `${absLeft}px`,\n      top: `${absTop}px`,\n    })\n  }\n}\n\nconst setupInputObserver = () => {\n  if (!autocompleteElement.value) return\n\n  placeholderElement.value = autocompleteElement.value.querySelector('.placeholder')\n  inputElement.value = autocompleteElement.value.querySelector('.v-select__slot input')\n\n  observer.value = new MutationObserver(mutations => {\n    for (const mutation of mutations) {\n      if ((mutation.target as HTMLInputElement) === inputElement.value) {\n        repositionPlaceholder(inputElement.value)\n      }\n    }\n  })\n\n  if (inputElement.value) {\n    observer.value.observe(inputElement.value, { attributes: true })\n  }\n}\n\nonMounted(() => {\n  setupInputObserver()\n})\n\n\nonBeforeUnmount(() => {\n  observer.value?.disconnect()\n})\n*/\n\nconst onFocus = () => {\n  // We want to already suggest recently used values\n  // as soon as users focus on the empty input field\n  if (!searchInput.value.length) {\n    void updateSuggestions()\n  }\n  emit('focus')\n}\n\nconst onBlur = () => {\n  if (isEmail(searchInput.value)) {\n    addEmail(searchInput.value)\n  }\n  if (props.multiple) {\n    searchInput.value = ''\n  }\n  emit('blur')\n}\n\nconst autocompleteComponent = ref()\n\n// We need to be able to blur the component from the outside because\n// we may lose focus without Vuetify knowing about it, e.g. when\n// pressing the \"Enter\" key to add another input field.\nconst blurComponent = () => {\n  autocompleteComponent.value?.blur()\n}\n\nconst onEnter = () => {\n  if (isEmail(searchInput.value)) {\n    addEmail(searchInput.value)\n  }\n  emit('enter', blurComponent)\n}\n</script>\n\n<template>\n  <div\n    ref=\"autocompleteElement\"\n    class=\"autocomplete\"\n    :class=\"{ 'multiple-email-chips': multiple }\"\n    data-cy=\"email_autocomplete\"\n  >\n    <v-form @update:model-value=\"isValid => emit('update:error', !isValid)\">\n      <v-autocomplete\n        ref=\"autocompleteComponent\"\n        v-model=\"selection\"\n        v-model:search=\"query\"\n        v-bind=\"options\"\n        variant=\"filled\"\n        hide-no-data\n        autocomplete=\"off\"\n        list=\"autocompleteOff\"\n        aria-autocomplete=\"none\"\n        :hide-selected=\"suggestionType !== 'exact'\"\n        :menu-props=\"{ contentClass: 'autocomplete__menu' }\"\n        :auto-select-first=\"suggestionType !== 'recent' && suggestionType !== 'exact'\"\n        :custom-filter=\"itemFilter\"\n        :filter-keys=\"['title']\"\n        :autofocus=\"autofocus\"\n        :label=\"label\"\n        :placeholder=\"placeholder\"\n        :rules=\"inputRules\"\n        :loading=\"isLoading\"\n        :items=\"menuItems\"\n        menu-icon=\"\"\n        @focus=\"onFocus\"\n        @blur=\"onBlur\"\n        @keydown.enter=\"onEnter\"\n      >\n        <template v-if=\"props.multiple\" #chip=\"{ item }\">\n          <v-chip v-if=\"isEmail(item.title)\" color=\"primary\" closable @click:close=\"removeItem(item.title)\">\n            {{ item.title }}\n          </v-chip>\n          <v-chip v-else color=\"error-lighten-5\" closable @click:close=\"removeItem(item.title)\">\n            {{ item.title }}\n          </v-chip>\n        </template>\n        <template #item=\"{ props: itemProps, item }\">\n          <v-list-item v-bind=\"{ ...itemProps, title: '' }\" :disabled=\"item.raw.type === 'subheader'\">\n            <span v-if=\"item.raw.type === 'subheader'\" class=\"text-subtitle-2\">{{ item.title }}</span>\n            <span v-else-if=\"suggestionType === 'prefix' && item.title.startsWith(searchInput)\">\n              <span>{{ searchInput }}</span\n              ><span class=\"font-weight-bold\">{{ item.title.slice(searchInput.length) }}</span>\n            </span>\n            <span v-else-if=\"suggestionType === 'domain'\">\n              <span class=\"font-weight-bold\">{{ item.title.slice(0, item.title.indexOf('@')) }}</span\n              ><span>{{ item.title.slice(item.title.indexOf('@')) }}</span>\n            </span>\n            <span v-else-if=\"suggestionType === 'suggest' || suggestionType === 'recent'\" class=\"font-weight-bold\">{{\n              item.title\n            }}</span>\n            <span v-else>{{ item.title }}</span>\n          </v-list-item>\n        </template>\n      </v-autocomplete>\n    </v-form>\n  </div>\n</template>\n\n<style lang=\"sass\">\n// We need to apply these styles globally because Vuetify detaches menus by default\n// and we need to overwrite undesired very specific default styles via `!important`\n.autocomplete__menu\n  .v-list\n    box-shadow: 0 12px 20px -5px rgba(0,0,0,0.15) !important\n  .v-list-item\n    &:hover\n      color: $c-primary !important\n    &::before\n      background-color: currentColor !important\n</style>\n\n<style lang=\"sass\" scoped>\n.autocomplete\n  flex: 1 1 auto\n  position: relative\n  &.multiple-email-chips\n    :deep(.v-field__input)\n      row-gap: 16px\n      &:has(> .v-autocomplete__selection)\n        margin-top: 12px\n        margin-bottom: 12px\n    :deep(.v-autocomplete__selection)\n      margin-inline-end: 12px\n  :deep(.v-chip)\n    color: $c-primary\n    background-color: rgba(179, 212, 247, 0.5)\n    font-weight: normal\n    .v-icon\n      color: currentColor\n  :deep(.v-select__selections)\n    min-height: initial !important\n    padding-top: 0 !important\n  :deep(.v-label--active)\n    + .v-select__selections\n      padding-top: 24px !important\n  .placeholder\n    pointer-events: none\n    position: absolute\n    max-height: 32px\n    font-size: 1.125rem\n    line-height: 1.125rem\n</style>\n"],"names":["useEmailSuggestions","query","t","useI18n","suggestionType","ref","suggestions","suggestionsHeader","computed","isFetching","suggestionsTimeout","isLoading","error","searchRepository","useApi","updateSuggestions","type","values","e","watch","newQuery","props","__props","emit","__emit","widgetStore","useWidgetStore","options","isEmail","useValidation","inputRules","value","selection","newValue","searchInput","_a","userAdditions","menuItems","items","selectedValues","suggestion","addedSuggestions","title","itemFilter","item","addEmail","email","addEmails","emails","removeItem","newSelection","oldSelection","addition","separatorPattern","input","maybeEmails","part","onFocus","onBlur","autocompleteComponent","blurComponent","onEnter"],"mappings":"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"}