{"version":3,"file":"BY3rwOxr.js","sources":["../../../../components/KeyboardNavigationProvider/index.vue","../../../../components/Search/Input/index.vue"],"sourcesContent":["<template>\n  <component :is=\"tag\" ref=\"wrapper\">\n    <slot />\n  </component>\n</template>\n\n<script lang=\"ts\" setup>\n/**\n * A wrapper component that handles keyboard navigation inside the provided\n * slot children.\n *\n * The slot must directly contain a list of elements that are either focusable\n * or contain one focusable element (such as <input>, <a> or <button>). The\n * component handles arrow keys (up and down) to focus through the list. It\n * also listens to pressing the space key, which will trigger a click on the\n * element.\n */\n\nconst props = withDefaults(\n  defineProps<{\n    tag?: string\n    isEnabled?: boolean\n  }>(),\n  { tag: 'div', isEnabled: true },\n)\n\nconst emit = defineEmits(['escape'])\n\nconst wrapper = ref<HTMLDivElement | null>(null)\n\n/**\n * Find the focusable element inside the element. Returns the element itself\n * if none are found.\n */\nfunction getFocusableElement(el: HTMLElement): HTMLElement {\n  const focusableChild = el.querySelector('a, button, input')\n  if (focusableChild instanceof HTMLElement) {\n    return focusableChild\n  }\n  return el\n}\n\n/**\n * Handles pressing arrow down and up inside the slot children.\n */\nfunction onKeyDown(e: KeyboardEvent) {\n  if (!wrapper.value || !props.isEnabled) {\n    return\n  }\n\n  if (e.code === 'Escape') {\n    return emit('escape')\n  }\n\n  if (e.code === 'ArrowUp' || e.code === 'ArrowDown' || e.code === 'Space') {\n    const children = [...wrapper.value.children]\n\n    // The currently focused element.\n    const focused = children.find((child) => {\n      return (\n        child === document.activeElement ||\n        child.contains(document.activeElement)\n      )\n    })\n\n    // If no element is focused, focus the first on in the list.\n    if (!focused && e.code !== 'Space') {\n      const first = children[0]\n      if (first && first instanceof HTMLElement) {\n        getFocusableElement(first).focus()\n        e.preventDefault()\n      }\n      return\n    }\n\n    if (focused instanceof HTMLElement) {\n      e.preventDefault()\n      if (e.code === 'ArrowUp') {\n        const prev = focused.previousElementSibling\n        if (prev && prev instanceof HTMLElement) {\n          getFocusableElement(prev).focus()\n        }\n      } else if (e.code === 'ArrowDown') {\n        const next = focused.nextElementSibling\n        if (next && next instanceof HTMLElement) {\n          getFocusableElement(next).focus()\n        }\n      } else if (e.code === 'Space') {\n        focused.click()\n      }\n    }\n  }\n}\n\nonMounted(() => {\n  window.addEventListener('keydown', onKeyDown)\n})\n\nonBeforeUnmount(() => {\n  window.removeEventListener('keydown', onKeyDown)\n})\n</script>\n\n<script lang=\"ts\">\nexport default {\n  name: 'KeyboardNavigationProvider',\n}\n</script>\n","<template>\n  <div\n    v-click-away=\"clickAway\"\n    class=\"relative h-50\"\n    :class=\"{ 'z-search-input-suggestions': showSuggestions }\"\n  >\n    <div\n      class=\"grid grid-cols-[1fr_auto] w-full overflow-hidden bg-white text-gray-600 border rounded-[24px] focus-within:border-purple-500 focus-within:shadow-purple-600\"\n      role=\"search\"\n    >\n      <label for=\"searchinput\" class=\"block col-span-1 row-start-1 relative\">\n        <span class=\"sr-only\">{{\n          label ? label : $texts('search.searchFieldLabel', 'Suchbegriff')\n        }}</span>\n\n        <input\n          id=\"searchinput\"\n          ref=\"input\"\n          v-model=\"searchTermInternal\"\n          type=\"search\"\n          autocomplete=\"off\"\n          name=\"searchterm\"\n          class=\"bg-white text-gray-900 focus:outline-none h-[48px] pl-20 search-input w-full relative placeholder:text-gray-700\"\n          spellcheck=\"false\"\n          aria-owns=\"searchterm-suggestions\"\n          :aria-label=\"$texts('search.searchInput', 'Suchbegriff eingeben')\"\n          :placeholder=\"searchInputPlaceholder\"\n          :focus-on-load=\"focusOnLoad\"\n          @input=\"onInput\"\n          @focus=\"isFocused = true\"\n          @search=\"updateSearchTerm\"\n        />\n      </label>\n\n      <button\n        type=\"submit\"\n        class=\"button m-[4px] is-strong row-start-1 mobile-only:is-icon-only\"\n        @click.prevent=\"updateSearchTerm\"\n      >\n        <SpriteSymbol name=\"search\" aria-hidden=\"true\" />\n        <span class=\"md:not-sr-only sr-only\">\n          {{ $texts('search.ctaButton', 'Suchen') }}\n        </span>\n      </button>\n      <div\n        v-if=\"showSuggestions\"\n        ref=\"suggestionsList\"\n        class=\"col-start-1 col-end-6 border-t border-t-gray-200\"\n      >\n        <div class=\"sr-only\" role=\"status\">\n          {{\n            $textsPlural(\n              'search.numberOfSuggestions',\n              suggestions.length,\n              '1 Ergebnis verfügbar',\n              '@count Ergebnisse verfügbar',\n            )\n          }}\n        </div>\n        <KeyboardNavigationProvider\n          id=\"searchterm-suggestions\"\n          tag=\"ul\"\n          aria-expanded=\"true\"\n          @escape=\"focusInput\"\n        >\n          <li v-for=\"(item, i) in suggestions\" :key=\"item + i\">\n            <button\n              class=\"px-15 md:px-20 py-10 link font-medium block cursor-pointer md:focus:font-bold w-full text-left truncate text-sm md:text-base\"\n              @click=\"$emit('update:modelValue', item)\"\n            >\n              {{ item }}\n            </button>\n          </li>\n        </KeyboardNavigationProvider>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nconst props = defineProps<{\n  modelValue?: string | null\n  getSuggestions?: (term: string) => Promise<string[]>\n  placeholder?: string\n  focusOnLoad?: boolean\n  label?: string\n  completionType?: string\n  completionContext?: Record<string, string>\n}>()\n\nconst { $texts } = useNuxtApp()\nconst searchTermInternal = ref(props.modelValue || '')\nconst isFocused = ref(false)\nconst suggestions = ref<string[]>([])\nconst suggestionsList = ref<HTMLDivElement | null>(null)\nconst input = ref<HTMLInputElement | null>(null)\n\nlet timeout: number | null = null\n\nconst resultsCache: Record<string, string[]> = {}\n\nconst emit = defineEmits(['update:modelValue'])\n\nwatch(\n  () => props.modelValue,\n  function (newValue) {\n    searchTermInternal.value = newValue || ''\n    suggestions.value = []\n  },\n)\n\nconst searchInputPlaceholder = computed(\n  (): string =>\n    props.placeholder ||\n    $texts('search.searchFieldPlaceholder', 'Suchbegriff eingeben'),\n)\n\nfunction updateSearchTerm() {\n  emit('update:modelValue', searchTermInternal.value)\n}\n\nconst interceptor = useFetchInterceptor()\n\nfunction doGetSuggestions(text: string): Promise<string[]> {\n  if (props.getSuggestions) {\n    return props.getSuggestions(text)\n  }\n  return $fetch<string[]>('/api/completion', {\n    query: {\n      text,\n      type: props.completionType,\n      ...(props.completionContext || {}),\n    },\n    ...interceptor,\n  })\n}\n\nfunction updateSuggestions(term: string) {\n  if (resultsCache[term]) {\n    suggestions.value = resultsCache[term]\n    return\n  }\n  timeout = window.setTimeout(async () => {\n    const newSuggestions = await doGetSuggestions(term)\n    resultsCache[term] = newSuggestions\n    // Prevent updating sugestions for a stale search term.\n    if (term !== searchTermInternal.value) {\n      return\n    }\n\n    suggestions.value = newSuggestions\n  }, 100)\n}\n\nfunction onInput() {\n  if (timeout) {\n    window.clearTimeout(timeout)\n  }\n  if (!props.completionType) {\n    return\n  }\n  if (searchTermInternal.value) {\n    updateSuggestions(searchTermInternal.value)\n    return\n  }\n\n  suggestions.value = []\n}\n\nconst showSuggestions = computed<boolean>(\n  () => !!(suggestions.value.length && isFocused.value && props.completionType),\n)\n\nfunction focusInput() {\n  if (!input.value) {\n    return\n  }\n\n  input.value.focus()\n}\n\nfunction clickAway() {\n  isFocused.value = false\n}\n\nonMounted(() => {\n  if (props.focusOnLoad) {\n    focusInput()\n  }\n})\n\ndefineOptions({\n  name: 'SearchInput',\n})\n</script>\n\n<style lang=\"postcss\">\n.search-input::-webkit-search-cancel-button {\n  @apply appearance-none absolute right-0 w-20 h-20 bg-blue-800 top-1/2 -translate-y-1/2;\n  mask: url('~/assets/symbols/close.svg') no-repeat 100% 100%;\n}\n</style>\n"],"names":["__default__","props","__props","emit","__emit","wrapper","ref","getFocusableElement","el","focusableChild","onKeyDown","children","focused","child","first","prev","next","onMounted","onBeforeUnmount","$texts","useNuxtApp","searchTermInternal","isFocused","suggestions","suggestionsList","input","timeout","resultsCache","watch","newValue","searchInputPlaceholder","computed","updateSearchTerm","interceptor","useFetchInterceptor","doGetSuggestions","text","updateSuggestions","term","newSuggestions","onInput","showSuggestions","focusInput","clickAway"],"mappings":"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"}