https://www.parcum.be/frontend/autocomplete.component-ClRH4EVW.js

1import{D as a,_ as o}from"./site-B0IjnxmE.js";import{S as u}from"./site-lang-Bijq8_jq.js";import{c as p,f as m}from"./floating-ui.dom-CZ6Jgc9K.js";class v{constructor(){Array.from(document.querySelectorAll("[data-autocomplete]")).forEach(e=>{e.tagName==="SELECT"&&new c(e)}),a.onDynamicContent(document.documentElement,"select[data-autocomplete]",e=>{Array.from(e).forEach(t=>{new c(t)})},"data-autocomplete"),a.onDynamicContent(document.documentElement,"select[data-autocomplete-init]",e=>{Array.from(e).forEach(t=>{const i=document.getElementById(`autocompleteList${t.getAttribute("data-autocomplete-init")}`);i&&i.remove()})},!1,!0)}}class c{constructor(e){this.siteLang=u.getLang(),this.autocompleteListIndex="",this.options=new Array,this.selectedOptions=new Array,this.isMultiple=!1,this.isDisabled=!1,this.isFreeType=!1,this.cssClasses={autocomplete:"relative",autocompleteListCore:"max-h-[12em] overflow-y-scroll absolute left-0 right-0 top-full z-999 max-w-content w-full min-w-full",autocompleteList:"autocomplete__list bg-white shadow-xl",autocompleteOption:"autocomplete__option py-1 px-2 flex items-center justify-between focus:shadow-none focus:outline-none cursor-pointer hover:bg-primary hover:text-primary-contrast hover:after:bg-primary-contrast [&.highlight]:bg-primary [&.highlight]:text-primary-contrast [&.highlight]:after:bg-primary-contrast aria-selected:text-gray-500 aria-selected:after:block",autocompleteOptionAfter:'after:hidden after:text-black after:shrink-0 after:w-[1em] after:h-[1em] after:mask-center after:mask-no-repeat after:mask-contain after:bg-current after:mask-[url("/icons/check.svg")]',autocompleteSelectCore:"flex p-0",autocompleteSelect:"autocomplete__select",autocompleteSelectInput:"autocomplete__input bg-transparent border-none focus:outline-none focus:ring-0 focus:border-none",autocompleteSelectPlaceholder:"autocomplete__placeholder overflow-hidden text-ellipsis whitespace-nowrap opacity-25",autocompleteDropDownIcon:"autocomplete__dropdown-icon flex items-center px-2 text-black",autocompleteDropDownIconAfter:'after:block after:shrink-0 after:w-[1.5em] after:h-[1.5em] after:mask-center after:mask-no-repeat after:mask-contain after:bg-current after:mask-[url("/icons/chevron-down.svg")]',autocompleteSelectionCore:"flex overflow-hidden",autocompleteSelection:"autocomplete__selection rounded-sm bg-primary text-primary-contrast",autocompleteSelectionText:"autocomplete__selection-text px-2",autocompleteSelectionCloseBtn:"autocomplete__selection-close px-1 border-l-1 border-white cursor-pointer focus:bg-primary-700 hover:bg-primary-700",autocompleteSelectionCloseBtnAfter:'after:block after:shrink-0 after:w-[1em] after:h-[1em] after:mask-center after:mask-no-repeat after:mask-contain after:bg-current after:mask-[url("/icons/clear.svg")]',autocompleteInputWrapper:"autocomplete__input-wrapper flex items-center gap-2 flex-wrap p-2 w-[1px] flex-1 [&.has-placeholder]:flex-nowrap"},e.removeAttribute("data-autocomplete"),e.setAttribute("data-autocomplete-init",""),this.getLang(),this.init(e)}init(e){this.autocompleteListIndex=a.getPathTo(e),e.setAttribute("data-autocomplete-init",this.autocompleteListIndex),this.selectElement=e,this.selectMutationObserver=new MutationObserver(this.selectMutation.bind(this)),this.selectMutationObserver.observe(this.selectElement,{attributes:!0,childList:!0,subtree:!0}),Object.keys(this.selectElement.dataset).forEach(l=>{this.cssClasses[l]&&(this.cssClasses[l]=this.selectElement.dataset[l])}),this.isDisabled=this.selectElement.getAttribute("disabled")!=null,this.isFreeType=this.selectElement.getAttribute("free-type")!=null,this.isMultiple=this.selectElement.getAttribute("multiple")!=null,this.selectElement.addEventListener("jschange",()=>{if(this.selectElement.value==""&&(this.selectedOptions=[],this.inputElement.value="",this.inputElement.size=Math.max(this.inputElement.value.length+1,1),this.showPlaceholder(),this.fillList(this.options)),this.isMultiple){this.setOptions();const l=Array.from(this.selectElement.selectedOptions);this.selectedOptions=this.options.filter(r=>{if(l.find(h=>h.value==r.value))return r}),this.showSelectedOptions(),this.fillList(this.options)}}),this.autocompleteElement=document.createElement("div"),this.autocompleteElement.classList.add(...this.cssClasse

1s.autocomplete.split(" ")),this.isDisabled&&this.autocompleteElement.classList.add("disabled"),this.autocompleteSelectElement=document.createElement("div"),this.autocompleteSelectElement.classList.add("autocomplete__select"),this.autocompleteSelectElement.classList.add(...this.cssClasses.autocompleteSelectCore.split(" ")),this.autocompleteSelectElement.classList.add(...this.cssClasses.autocompleteSelect.split(" ")),this.autocompleteElement.insertAdjacentElement("beforeend",this.autocompleteSelectElement),Array.from(this.selectElement.classList).forEach(l=>{this.autocompleteSelectElement.classList.add(l)}),this.autocompleteListReference=e.hasAttribute("data-autocomplete-reference")?document.querySelector(e.getAttribute("data-autocomplete-reference")):this.autocompleteElement,this.autocompleteSelectElement.addEventListener("click",()=>{this.isDisabled||(this.hidePlaceholder(),this.inputElement.focus(),this.showMenu())}),this.autocompletePlaceholderElement=document.createElement("div"),this.autocompletePlaceholderElement.classList.add(...this.cssClasses.autocompleteSelectPlaceholder.split(" ")),this.autocompletePlaceholderElement.setAttribute("aria-hidden","true"),this.autocompleteInputWrapper=document.createElement("div"),this.autocompleteInputWrapper.classList.add(...this.cssClasses.autocompleteInputWrapper.split(" ")),this.autocompleteInputWrapper.classList.add("has-placeholder"),this.autocompleteInputWrapper.insertAdjacentElement("beforeend",this.autocompletePlaceholderElement),this.autocompleteSelectElement.insertAdjacentElement("beforeend",this.autocompleteInputWrapper),this.inputElement=document.createElement("input"),this.inputElement.setAttribute("aria-controls",`autocompleteList${this.autocompleteListIndex}`),this.inputElement.setAttribute("autocapitalize","none"),this.inputElement.setAttribute("type","text"),this.inputElement.setAttribute("autocomplete","off"),this.inputElement.setAttribute("aria-autocomplete","list"),this.inputElement.setAttribute("role","combobox"),this.inputElement.setAttribute("aria-expanded","false"),this.inputElement.setAttribute("data-dont-validate","true"),this.inputElement.classList.add("no-hook"),this.inputElement.classList.add(...this.cssClasses.autocompleteSelectInput.split(" ")),this.inputElement.size=1,this.selectElement.hasAttribute("id")&&(this.inputElement.setAttribute("id",this.selectElement.getAttribute("id")),this.selectElement.removeAttribute("id")),this.inputKeyUpListener=this.onKeyUp.bind(this),this.inputElement.addEventListener("keyup",this.inputKeyUpListener),this.inputKeyDownListener=this.onKeyDown.bind(this),this.inputElement.addEventListener("keydown",this.inputKeyDownListener),this.inputFocusListener=this.onFocus.bind(this),this.inputElement.addEventListener("focus",this.inputFocusListener),this.inputBlurListener=this.onBlur.bind(this),this.inputElement.addEventListener("blur",this.inputBlurListener),this.autocompleteInputWrapper.insertAdjacentElement("beforeend",this.inputElement);const i=document.createElement("button");i.classList.add(...this.cssClasses.autocompleteDropDownIcon.split(" ")),i.classList.add(...this.cssClasses.autocompleteDropDownIconAfter.split(" ")),i.setAttribute("aria-label","Open"),i.setAttribute("tabindex","-1"),i.setAttribute("type","button"),i.addEventListener("click",l=>{l.preventDefault(),this.isDisabled||(l.stopPropagation(),this.toggleMenu(),this.inputElement.focus())}),this.autocompleteSelectElement.insertAdjacentElement("beforeend",i),this.autocompleteListElement=document.createElement("ul"),this.autocompleteListElement.setAttribute("id",`autocompleteList${this.autocompleteListIndex}`),this.autocompleteListElement.setAttribute("role","listbox"),this.autocompleteListElement.classList.add(...this.cssClasses.autocompleteListCore.split(" ")),this.autocompleteListElement.classList.add(...this.cssClasses.autocompleteList.split(" ")),this.autocompleteListElement.classList.add("hidden"),this.isMultiple&&this.autocompleteListElement.setAttribute("aria-multiselectable","true"),this.menuClickListener=this.onMenuClick.bind(this),this.autocompleteListElement.addEventListener("click",this.menuClickListener),this.autocompleteListReference.insertAdjacentElement("beforeend",this.autocompleteListElement),this.setOptions(),this.fillList(this.options),this.isFreeType&&(this.freeTypeOption=document.createElement("option"),this.selectElement.insertAdjacentElement("afterbegin",this.freeTypeOption)),this.statusElement=document.createElement("div"),this.statusElement.setAttribute("aria-live","polite"),this.statusElement.setAttribute("role","status"),this.statusElement.classList.add("sr-only"),this.autocompleteElement.insertAdjacentElement("beforeend",this.statusElement),this.selectElement.insertAdjacentElement("afterend",this.autocompleteElement);const s=window.getComputedStyle(this.autocompleteInputWrapper);this.inputElement.style.maxWidth=`${this.autocompleteInputWrapper.clientWidth-parseFloat(s.paddingLeft)-parseFloat(s.paddingRight)}px`,this.selectElement.setAttribute("aria-hidden","true"),this.selectElement.setAttribute("tabindex","-1"),this.selectElement.classList.add("hidden"),this.isMultiple&&(this.clearOptionClickListener=this.onClickClearOption.bind(this),this.clearOptionKeyDownListener=this.onKeyDownClearOption.bind(this),this.selectedOptions.length>0&&(this.hidePlaceholder(),this.showSelectedOptions())),this.documentClickListener=this.onDocumentClick.bind(this),document.addEventListener("click",this.documentClickListener)}getLang(){if(this.siteLang&&typeof this.siteLang=="string")if(/^[a-zA-Z-]+$/.test(this.siteLang))d(`../i18n/s-autocomplete-${this.siteLang}.json`).then(e=>{this.lang=e}).catch(e=>{console.error("Error loading language file:",e)});else throw new Error(`Invalid siteLang value: ${this.siteLang}`)}selectMutation(e,t){for(let i of e)if(i.type!=="childList"){if(i.type==="attributes")switch(i.attributeName){case"disabled":this.isDisabled=this.selectElement.getAttribute("disabled")!=null,this.isDisabled?this.autocompleteElement.classList.add("disabled"):this.autocompleteElement.classList.remove("disabled");break;case"class":this.autocompleteSelectElement.classList.remove(...Array.from(this.autocompleteSelectElement.classList).filter(s=>s!=="autocomplete__select")),this.autocompleteSelectElement.classList.add(...Array.from(this.selectElement.classList).filter(s=>s!=="hidden")),this.autocompleteSelectElement.classList.add(...this.cssClasse

1s.autocompleteSelectCore.split(" ")),this.autocompleteSelectElement.classList.add(...this.cssClasses.autocompleteSelect.split(" "));break}}}setOptions(){this.options=[],Array.from(this.selectElement.querySelectorAll("option")).forEach((e,t)=>{e.value!==""?(this.options.push({text:e.innerText,value:e.value,class:e.getAttribute("class")||""}),e.selected&&(this.selectedOptions.push(this.options[this.options.length-1]),this.isMultiple||(this.hidePlaceholder(),this.inputElement.value=e.innerText,this.inputElement.size=Math.max(this.inputElement.value.length+1,1)))):t===0&&(this.autocompletePlaceholderElement.innerText=e.innerText)})}fillList(e){this.autocompleteListElement.innerHTML="",e.forEach((t,i)=>{const s=document.createElement("li");s.setAttribute("role","option"),s.setAttribute("data-option-value",t.value),s.setAttribute("id",`option-${this.autocompleteListIndex}-${i}`),s.setAttribute("class",t.class),s.classList.add(...this.cssClasses.autocompleteOption.split(" ")),s.classList.add(...this.cssClasses.autocompleteOptionAfter.split(" ")),this.selectedOptions.find(l=>l.value==t.value)?s.setAttribute("aria-selected","true"):s.setAttribute("aria-selected","false"),s.innerText=t.text,this.autocompleteListElement.insertAdjacentElement("beforeend",s)}),this.updateStatus(e.length)}onKeyUp(e){switch(e.key){case"ArrowLeft":case"ArrowRight":case" ":case"Shift":break;case"Escape":this.autocompleteListElement.classList.contains("hidden")?this.inputElement.value="":this.hideMenu();break;case"Enter":e.preventDefault(),this.hoverOption&&this.selectOption(this.hoverOption);break;case"Tab":this.hideMenu();break;case"ArrowUp":if(e.preventDefault(),this.autocompleteListElement.classList.contains("hidden"))this.onTextBoxDownPressed(e);else if(this.hoverOption){let t=this.hoverOption.previousElementSibling;this.hoverOption&&t?(t.classList.contains("currently-selected-divider")&&(t=t.previousElementSibling||this.autocompleteListElement.lastChild),this.highlightOption(t)):this.highlightOption(this.autocompleteListElement.lastChild)}else this.highlightOption(this.autocompleteListElement.lastChild);break;case"ArrowDown":if(e.preventDefault(),this.autocompleteListElement.classList.contains("hidden"))this.onTextBoxDownPressed(e);else if(this.hoverOption){let t=this.hoverOption.nextElementSibling;this.hoverOption&&t?(t.classList.contains("currently-selected-divider")&&(t=t.nextElementSibling||this.autocompleteListElement.lastChild),this.highlightOption(t)):this.highlightOption(this.autocompleteListElement.firstChild)}else this.highlightOption(this.autocompleteListElement.firstChild);break;default:this.onTextBoxType(e)}}onKeyDown(e){switch(e.key){case"Enter":e.preventDefault(),this.isFreeType&&this.hideMenu();break;case"Backspace":this.inputElement.value==""&&this.isMultiple&&this.selectedOptions.length>0&&(this.selectedOptions.pop(),this.showSelectedOptions());break;case"ArrowLeft":this.isMultiple&&this.selectedOptions.length>0&&Array.from(this.autocompleteInputWrapper.querySelectorAll(".close-btn")).pop().focus();break;case"Tab":this.hoverOption&&this.selectOption(this.hoverOption),this.hideMenu();break}this.inputElement.size=Math.max(this.inputElement.value.length+1,1)}onFocus(e){this.hidePlaceholder(),this.autocompleteSelectElement.classList.add("autocomplete__select--focused"),this.inputElement.size=Math.max(this.inputElement.value.length+1,1)}onBlur(e){this.inputElement.value==""&&this.showPlaceholder(),this.autocompleteSelectElement.classList.remove("autocomplete__select--focused"),this.isMultiple?this.selectedOptions.length>0&&this.hidePlaceholder():this.inputElement.value==""&&this.selectedOptions.length>0?(this.selectedOptions=[],this.selectElement.value=null,this.fillList(this.options),this.selectElement.dispatchEvent(new Event("change",{bubbles:!0}))):(!this.isFreeType&&this.selectedOptions.length>0&&this.inputElement.value!==this.selectedOptions[0].text&&(this.inputElement.value=this.selectedOptions[0].text,this.inputElement.size=Math.max(this.inputElement.value.length+1,1)),!this.isFreeType&&this.selectedOptions.length==0&&this.inputElement.value!==""&&(this.inputElement.value="",this.inputElement.size=Math.max(this.inputElement.value.length+1,1)))}onDocumentClick(e){this.autocompleteElement.contains(e.target)||this.hideMenu()}onTextBoxType(e){let t=this.options;if(this.inputElement.value.trim().length>0&&(t=this.getOptions(this.inputElement.value.trim().toLowerCase())),this.isFreeType){const i=t.find(s=>

1s.value===this.inputElement.value.trim()||s.text===this.inputElement.value.trim());i?(this.inputElement.value=i.text,this.selectedOptions=[i],this.selectElement.value=i.text):this.inputElement.value.trim()!==""&&(t.unshift({text:this.inputElement.value.trim(),value:this.inputElement.value.trim(),class:""}),this.freeTypeOption.value=this.inputElement.value.trim(),this.freeTypeOption.innerText=this.inputElement.value.trim(),this.selectElement.value=this.inputElement.value.trim(),this.selectedOptions=[{text:this.freeTypeOption.textContent,value:this.freeTypeOption.value,class:""}])}this.fillList(t),this.showMenu()}onTextBoxDownPressed(e){let t=this.options;if(this.isFreeType){const i=t.find(s=>s.text===this.inputElement.value.trim());i?(this.inputElement.value=i.text,this.selectedOptions=[i],this.selectElement.value=i.text):this.inputElement.value.trim()!==""&&t.unshift({text:this.inputElement.value.trim(),value:this.inputElement.value.trim(),class:""})}if(this.fillList(t),this.showMenu(),t.length>0){let i=this.getOption(t[0].value);e.key=="ArrowUp"&&(i=this.getOption(t[t.length-1].value)),this.highlightOption(i)}}onMenuClick(e){let t=e.target.closest("[role=option]");t&&this.selectOption(t)}toggleMenu(){this.autocompleteListElement.classList.toggle("hidden"),this.autocompleteListElement.classList.contains("hidden")?(this.inputElement.setAttribute("aria-expanded","false"),this.inputElement.removeAttribute("aria-activedescendant")):(this.inputElement.setAttribute("aria-expanded","true"),this.positionMenu())}showMenu(){this.highlightOption(null),this.autocompleteListElement.classList.remove("hidden"),this.inputElement.setAttribute("aria-expanded","true"),this.positionMenu(),this.selectElement.dispatchEvent(new CustomEvent("autocompleteShowMenu",{bubbles:!0}))}hideMenu(){this.autocompleteListElement.classList.add("hidden"),this.inputElement.setAttribute("aria-expanded","false"),this.inputElement.removeAttribute("aria-activedescendant"),this.selectElement.dispatchEvent(new CustomEvent("autocompleteHideMenu",{bubbles:!0}))}positionMenu(){p(this.autocompleteElement,this.autocompleteListElement,{placement:"bottom-start",middleware:[m()]}).then(({x:e,y:t})=>{Object.assign(this.autocompleteListElement.style,{left:`${e}px`,top:`${t}px`})})}showPlaceholder(){this.autocompletePlaceholderElement.classList.remove("hidden"),this.autocompleteInputWrapper.classList.add("has-placeholder")}hidePlaceholder(){this.autocompletePlaceholderElement.classList.add("hidden"),this.autocompleteInputWrapper.classList.remove("has-placeholder")}selectOption(e){const t=e.getAttribute("data-option-value"),i=Array.from(this.autocompleteListElement.querySelectorAll("[role=option]"));i.forEach(s=>{s.setAttribute("aria-selected","false")}),this.isMultiple?(this.inputElement.value="",this.inputElement.size=1,this.selectedOptions.find(s=>s.value==t)?this.selectedOptions=this.selectedOptions.filter(s=>s.value!==t):this.selectedOptions=[...this.selectedOptions,this.options.find(s=>s.value==t)],this.showSelectedOptions()):(this.selectElement.value=t,this.selectElement.dispatchEvent(new Event("change",{bubbles:!0})),this.inputElement.value=e.innerText,this.isFreeType?this.selectedOptions=[{text:e.innerText,value:t,class:""}]:this.selectedOptions=[this.options.find(s=>s.value==t)]),i.forEach(s=>{this.selectedOptions.find(l=>l.value==s.getAttribute("data-option-value"))&&s.setAttribute("aria-selected","true")}),this.hideMenu(),this.hidePlaceholder(),this.hoverOption=null,this.inputElement.focus(),this.inputElement.size=Math.max(this.inputElement.value.length+1,1)}showSelectedOptions(){Array.from(this.autocompleteInputWrapper.querySelectorAll(".autocomplete__selection")).forEach(e=>{e.parentElement.removeChild(e)}),[...this.selectedOptions].reverse().forEach(e=>{const t=document.createElement("div");t.classList.add("autocomplete__selection"),t.classList.add(...this.cssClasses.autocompleteSelectionCore.split(" ")),t.classList.add(...this.cssClasses.autocompleteSelection.split(" "));const i=document.createElement("span");

1i.classList.add("text"),i.classList.add(...this.cssClasses.autocompleteSelectionText.split(" ")),i.innerHTML=e.text,t.insertAdjacentElement("beforeend",i);const s=document.createElement("button");s.classList.add("close-btn"),s.classList.add(...this.cssClasses.autocompleteSelectionCloseBtn.split(" ")),s.classList.add(...this.cssClasses.autocompleteSelectionCloseBtnAfter.split(" ")),s.setAttribute("data-value",e.value),s.setAttribute("aria-label",`${this.lang.removeOption} ${e.text}`),s.setAttribute("role","button"),s.addEventListener("click",this.clearOptionClickListener),s.addEventListener("keydown",this.clearOptionKeyDownListener),t.insertAdjacentElement("beforeend",s),this.autocompleteInputWrapper.insertAdjacentElement("afterbegin",t)}),Array.from(this.selectElement.querySelectorAll("option")).forEach(e=>{e.selected=this.selectedOptions.find(t=>t.value==e.value)!==void 0}),this.selectedOptions.length>0&&this.hidePlaceholder(),this.selectElement.dispatchEvent(new Event("change",{bubbles:!0}))}onClickClearOption(e){const i=(e.currentTarget||e.target).getAttribute("data-value");this.selectedOptions=this.selectedOptions.filter(s=>s.value!==i),this.showSelectedOptions(),this.fillList(this.options)}onKeyDownClearOption(e){const t=Array.from(this.autocompleteInputWrapper.querySelectorAll(".close-btn")),i=t.indexOf(e.currentTarget||e.target);switch((e.currentTarget||e.target).getAttribute("data-value"),e.key){case"ArrowLeft":i>0&&t[i-1].focus();break;case"ArrowRight":i<t.length-1&&t[i+1].focus(),i==t.length-1&&this.inputElement.focus();break}}updateStatus(e){this.statusElement&&(this.statusElement.innerText=`${e} ${this.lang.resultsAvailable}`)}getOption(e){return this.autocompleteListElement.querySelector(`[data-option-value="${e}"]`)}highlightOption(e){this.hoverOption&&this.hoverOption.classList.remove("highlight"),e&&(e.classList.add("highlight"),this.autocompleteListElement.scrollTop=e.offsetTop,this.inputElement.setAttribute("aria-activedescendant",e.id)),this.hoverOption=e}getOptions(e){return this.options.filter(t=>t.text.trim().toLowerCase().indexOf(e.toLowerCase())>-1||t.text.trim().normalize("NFD").replace(/[\u0300-\u036f]/g,"").toLowerCase().indexOf(e.toLowerCase())>-1)}}function d(n){switch(n){case"../i18n/s-autocomplete-en":case"../i18n/s-autocomplete-en.json":return o(()=>import("./s-autocomplete-en-CG-AgEdW.js"),[]);case"../i18n/s-autocomplete-fr":case"../i18n/s-autocomplete-fr.json":return o(()=>import("./s-autocomplete-fr-D-dH4qtW.js"),[]);case"../i18n/s-autocomplete-nl":case"../i18n/s-autocomplete-nl.json":return o(()=>import("./s-autocomplete-nl-CXBvLRCo.js"),[]);default:return new Promise(function(e,t){(typeof queueMicrotask=="function"?queueMicrotask:setTimeout)(t.bind(null,new Error("Unknown variable dynamic import: "+n)))})}}export{v as default};