{"version":3,"file":"navsearch-component.min.js","sources":["../../../../resources/webcomponents/src/views/NavSearch.ce.vue","../../../../resources/webcomponents/src/DefineElements/navsearch-component.js"],"sourcesContent":["<template>\n    <div class=\"navsearch__wrapper\" @keydown=\"handleKeyDown\">\n        <div class=\"searchinput\">\n            <input\n            @keyup.enter=\"handleSearch\"\n            @input=\"handleTypeahead\"\n            v-model=\"internalSearchInput\"\n            id=\"navsearch\"\n            type=\"text\"\n            ref=\"inputRef\"\n            placeholder=\"Suchbegriff...\"\n            autocomplete=\"off\"\n            aria-label=\"Suchfeld.\">\n            <button @click=\"handleSearch\" aria-label=\"Suche starten.\">\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n                        <path d=\"M2.99999 8C2.99999 6.67392 3.52677 5.40215 4.46446 4.46447C5.40214 3.52678 6.67391 3 7.99999 3C9.32607 3 10.5978 3.52678 11.5355 4.46447C12.4732 5.40215 13 6.67392 13 8C13 9.32608 12.4732 10.5979 11.5355 11.5355C10.5978 12.4732 9.32607 13 7.99999 13C6.67391 13 5.40214 12.4732 4.46446 11.5355C3.52677 10.5979 2.99999 9.32608 2.99999 8ZM7.99999 1C6.89125 1 5.79837 1.26338 4.81134 1.76843C3.82431 2.27349 2.97138 3.00578 2.32276 3.90501C1.67415 4.80423 1.24842 5.84467 1.08063 6.94064C0.912832 8.03661 1.00778 9.15676 1.35764 10.2089C1.7075 11.2609 2.30228 12.2149 3.09298 12.9921C3.88369 13.7693 4.84771 14.3476 5.90567 14.6794C6.96362 15.0111 8.08524 15.0868 9.17816 14.9001C10.2711 14.7135 11.304 14.27 12.192 13.606L17.292 18.707C17.4795 18.8946 17.7339 19.0001 17.9991 19.0002C18.2644 19.0003 18.5188 18.895 18.7065 18.7075C18.8941 18.52 18.9996 18.2656 18.9997 18.0004C18.9998 17.7351 18.8945 17.4806 18.707 17.293L13.607 12.193C14.3853 11.1525 14.8587 9.91592 14.9741 8.62167C15.0895 7.32741 14.8424 6.02658 14.2604 4.86481C13.6784 3.70304 12.7846 2.72618 11.6789 2.0436C10.5732 1.36103 9.29938 0.999674 7.99999 1Z\" fill=\"#B9B9B9\" stroke=\"white\" stroke-width=\"0.5\"/>\n                </svg>\n            </button>\n        </div>\n        <div v-if=\"typeaheadOpen\" class=\"typeahead\">\n            <template v-if=\"!typeaheadLoading\">\n                <div v-for=\"(suggestion, index) of typeaheadResults\" :key=\"suggestion\">\n                    <button :class=\"{'typeahead--highlight' : index == focusIndex}\" ref=\"suggestionRefs\" @click=\"acceptTypeahead(suggestion)\">{{ suggestion }}</button>\n                </div>\n            </template>\n            <div v-else>\n                <div class=\"loading\">\n                    <div class=\"lds-ring\"><div></div><div></div><div></div><div></div></div>\n                </div>\n            </div>\n        </div>\n        <div v-if=\"typeaheadOpen\" class=\"clickoutside\" @click=\"typeaheadOpen = false\"></div>\n    </div>\n</template>\n\n<script setup>\nimport { ref, watch } from 'vue';\nimport { nextTick } from 'vue';\n\nconst url = new URL(window.location.origin + \"/alle-bildungsangebote\");\nconst params = new URLSearchParams(url.search);\n\nconst internalSearchInput = ref(\"\");\n\nconst typeaheadOpen = ref(false);\nconst typeaheadLoading = ref(false);\nconst typeaheadResults = ref([]);\n\nconst blockTypeahead = ref(false);\n\nconst suggestionRefs = ref([]);\nconst inputRef = ref(null);\nconst focusIndex = ref(-1);\n\nlet debounceTimeout;\n\nconst handleTypeahead = async () => {\n    if(blockTypeahead.value) {\n        return;\n    }\n    if(internalSearchInput.value){\n        typeaheadOpen.value = true;\n    } else {\n        typeaheadOpen.value = false;\n    }\n    if(debounceTimeout) {\n        clearTimeout(debounceTimeout);\n    }\n    \n    debounceTimeout = setTimeout(async () => {\n\n\n        typeaheadLoading.value = true;\n        try {\n            const response = await fetch(`/api/search/search-type-ahead.json?type=event&search=${internalSearchInput.value}`, {\n                method: \"GET\",\n                headers: {\n                    \"Content-Type\": \"application/json\"\n                }\n            })\n            const result = await response.json();\n\n            focusIndex.value = -1;\n\n            if(response.ok) {\n                if(result.length != 0) {\n                    typeaheadResults.value = [...result];\n                } else {\n                    typeaheadResults.value = [\"Keine Ergebnisse gefunden\"];\n                }\n            } else {\n                throw new Error(\"Request failed: \" + result.status)\n            }\n        } catch (err) {\n            typeaheadResults.value = [\"Server antwortet nicht\"];\n            console.error(err);\n        } finally {\n            typeaheadLoading.value = false;\n        }\n\n\n    }, 300)\n\n}\n\nconst handleKeyDown = (event) => {\n    if(event.key === \"ArrowDown\") {\n        blockTypeahead.value = true;\n        focusIndex.value = Math.min(focusIndex.value + 1, suggestionRefs.value.length - 1);\n        nextTick(() => {\n            internalSearchInput.value = suggestionRefs.value[focusIndex.value].innerHTML\n        })\n        \n    } else if(event.key === \"ArrowUp\") {\n        blockTypeahead.value = true;\n        focusIndex.value = Math.max(focusIndex.value - 1, 0);\n        nextTick(() => {\n            internalSearchInput.value = suggestionRefs.value[focusIndex.value].innerHTML\n            if (inputRef.value) {\n                setTimeout(() => {\n                    inputRef.value.selectionStart = inputRef.value.selectionEnd = 10000;\n                },0)\n            }\n        })\n    }\n    setTimeout(() => {\n        blockTypeahead.value = false;\n    }, 100)\n}\n\nconst acceptTypeahead = (suggestion) => {\n    internalSearchInput.value = suggestion;\n    typeaheadOpen.value = false;\n    handleSearch();\n}\n\nwatch(() => internalSearchInput.value, newVal => {\n    if(newVal == \"\") {\n        params.delete(\"search\");\n    }\n})\n\nconst handleSearch = () => {\n    params.set(\"eventFilter\", 'BKh4AGK8A8ttX8mqv6cfew2dH');\n    params.set(\"search\", internalSearchInput.value);\n    params.set(\"searchMode\", true)\n    \n    url.search = params.toString();\n\n    window.location.href = url;\n}\n\n\n</script>\n\n<style lang=\"scss\" scoped>\n\n</style>\n","import { createApp } from \"vue\";\r\n\r\nimport NavSearch from \"../views/NavSearch.ce.vue\";\r\nimport { createPinia } from \"pinia\";\r\n\r\ncustomElements.define('navsearch-component', class extends HTMLElement {\r\n    connectedCallback() {\r\n        const container = document.createElement('div');\r\n        container.id = 'app';\r\n        this.appendChild(container);\r\n        createApp(NavSearch).use(createPinia()).mount(container);\r\n    }\r\n});\r\n"],"names":["url","params","internalSearchInput","ref","typeaheadOpen","typeaheadLoading","typeaheadResults","blockTypeahead","suggestionRefs","inputRef","focusIndex","debounceTimeout","handleTypeahead","response","result","err","handleKeyDown","event","nextTick","acceptTypeahead","suggestion","handleSearch","watch","newVal","container","createApp","NavSearch","createPinia"],"mappings":"sPAuCA,MAAMA,EAAM,IAAI,IAAI,OAAO,SAAS,OAAS,wBAAwB,EAC/DC,EAAS,IAAI,gBAAgBD,EAAI,MAAM,EAEvCE,EAAsBC,EAAI,EAAE,EAE5BC,EAAgBD,EAAI,EAAK,EACzBE,EAAmBF,EAAI,EAAK,EAC5BG,EAAmBH,EAAI,CAAA,CAAE,EAEzBI,EAAiBJ,EAAI,EAAK,EAE1BK,EAAiBL,EAAI,CAAA,CAAE,EACvBM,EAAWN,EAAI,IAAI,EACnBO,EAAaP,EAAI,EAAE,EAEzB,IAAIQ,EAEJ,MAAMC,EAAkB,SAAY,CAC7BL,EAAe,QAGfL,EAAoB,MACnBE,EAAc,MAAQ,GAEtBA,EAAc,MAAQ,GAEvBO,GACC,aAAaA,CAAe,EAGhCA,EAAkB,WAAW,SAAY,CAGrCN,EAAiB,MAAQ,GACzB,GAAI,CACA,MAAMQ,EAAW,MAAM,MAAM,wDAAwDX,EAAoB,KAAK,GAAI,CAC9G,OAAQ,MACR,QAAS,CACL,eAAgB,kBACnB,CACjB,CAAa,EACKY,EAAS,MAAMD,EAAS,OAI9B,GAFAH,EAAW,MAAQ,GAEhBG,EAAS,GACLC,EAAO,QAAU,EAChBR,EAAiB,MAAQ,CAAC,GAAGQ,CAAM,EAEnCR,EAAiB,MAAQ,CAAC,2BAA2B,MAGzD,OAAM,IAAI,MAAM,mBAAqBQ,EAAO,MAAM,CAEzD,OAAQC,EAAK,CACVT,EAAiB,MAAQ,CAAC,wBAAwB,EAClD,QAAQ,MAAMS,CAAG,CAC7B,QAAkB,CACNV,EAAiB,MAAQ,EAC5B,CAGJ,EAAE,GAAG,EAEV,EAEMW,EAAiBC,GAAU,CAC1BA,EAAM,MAAQ,aACbV,EAAe,MAAQ,GACvBG,EAAW,MAAQ,KAAK,IAAIA,EAAW,MAAQ,EAAGF,EAAe,MAAM,OAAS,CAAC,EACjFU,EAAS,IAAM,CACXhB,EAAoB,MAAQM,EAAe,MAAME,EAAW,KAAK,EAAE,SAC/E,CAAS,GAEKO,EAAM,MAAQ,YACpBV,EAAe,MAAQ,GACvBG,EAAW,MAAQ,KAAK,IAAIA,EAAW,MAAQ,EAAG,CAAC,EACnDQ,EAAS,IAAM,CACXhB,EAAoB,MAAQM,EAAe,MAAME,EAAW,KAAK,EAAE,UAC/DD,EAAS,OACT,WAAW,IAAM,CACbA,EAAS,MAAM,eAAiBA,EAAS,MAAM,aAAe,GACjE,EAAC,CAAC,CAEnB,CAAS,GAEL,WAAW,IAAM,CACbF,EAAe,MAAQ,EAC1B,EAAE,GAAG,CACV,EAEMY,EAAmBC,GAAe,CACpClB,EAAoB,MAAQkB,EAC5BhB,EAAc,MAAQ,GACtBiB,GACJ,EAEAC,EAAM,IAAMpB,EAAoB,MAAOqB,GAAU,CAC1CA,GAAU,IACTtB,EAAO,OAAO,QAAQ,CAE9B,CAAC,EAED,MAAMoB,EAAe,IAAM,CACvBpB,EAAO,IAAI,cAAe,2BAA2B,EACrDA,EAAO,IAAI,SAAUC,EAAoB,KAAK,EAC9CD,EAAO,IAAI,aAAc,EAAI,EAE7BD,EAAI,OAASC,EAAO,WAEpB,OAAO,SAAS,KAAOD,CAC3B,onECjJA,eAAe,OAAO,sBAAuB,cAAc,WAAY,CACnE,mBAAoB,CAChB,MAAMwB,EAAY,SAAS,cAAc,KAAK,EAC9CA,EAAU,GAAK,MACf,KAAK,YAAYA,CAAS,EAC1BC,EAAUC,CAAS,EAAE,IAAIC,EAAW,CAAE,EAAE,MAAMH,CAAS,CAC1D,CACL,CAAC"}