{"version":3,"file":"selectdropdown-Bit3MLNJ.js","sources":["../../src/js/components/selectdropdown.ts"],"sourcesContent":["export function initSelectDropdowns() {\n const allDropdowns = document.querySelectorAll(\n '[data-select-wrapper]',\n );\n\n allDropdowns.forEach((dropdown) => {\n const isForm = dropdown.dataset.selectWrapper === 'True';\n if (isForm) {\n initSelectForm(dropdown);\n } else {\n initSelectMenu(dropdown);\n }\n });\n}\n\n// How the custom select dropdown works:\n// 1. Hide the actual select and the OptionsHandler\n// 2. Loop through all the select options and create a new div for each one taking their value\n// 3. onClick():\n// 3.1. Replace the placeholder with that selected element\n// 3.2. Select the option at the selected fake option's index using select.selectedIndex = index\n// 3.3. Hide the fake options\n\nexport function initSelectForm(dropdown: HTMLElement) {\n const selectButton = dropdown.querySelector(\n '[data-select-button]',\n ) as HTMLElement;\n const selectGroup = dropdown.querySelector(\n '[data-select-group]',\n ) as HTMLSelectElement;\n const placeHolder = dropdown.querySelector(\n '[data-select-placeholder]',\n ) as HTMLElement;\n const options =\n selectGroup.querySelectorAll('[data-select-item]'); // Get all of the options in the real select\n\n // If no placeholder - set default value to first option\n const placeholderText = placeHolder.dataset.selectPlaceholder;\n if (\n (placeholderText === undefined || placeholderText.length === 0) &&\n options.length > 0\n ) {\n selectGroup.selectedIndex = 0;\n placeHolder.textContent = options[0].textContent;\n placeHolder.classList.remove('text-muted-foreground');\n placeHolder.classList.add('text-black');\n }\n // Creating the custom select dropdown\n const customSelectGroup = document.createElement('div');\n customSelectGroup.setAttribute(\n 'class',\n 'flex flex-col bg-white gap-2 p-1 rounded-sm absolute w-full mt-2 border shadow-md invisible',\n );\n customSelectGroup.setAttribute('data-select-custom-group', '');\n dropdown.appendChild(customSelectGroup);\n\n // Open select options\n selectButton.addEventListener('click', () => {\n customSelectGroup.classList.toggle('invisible');\n selectButton.dataset.state = 'open';\n selectButton.setAttribute('aria-expanded', 'true');\n });\n\n // Close the menu when clicking outside\n document.addEventListener('click', (event) => {\n const target = event.target as Node;\n\n if (!customSelectGroup.contains(target) && !selectButton.contains(target)) {\n customSelectGroup.classList.add('invisible');\n }\n });\n\n let count = 0;\n // Populate the custom select list with the options from the real select\n options.forEach((option, index) => {\n if (option.hasAttribute('disabled')) {\n count++;\n return;\n }\n\n const optionText = option.textContent;\n const customOption = document.createElement('div');\n customOption.textContent = optionText;\n\n customOption.setAttribute(\n 'class',\n 'bg-white px-4 py-2 w-full rounded-sm hover:bg-neutral-100 cursor-pointer text-base',\n );\n customOption.setAttribute('data-select-custom-option', option.value);\n\n // Accessibility stuff\n customOption.setAttribute('tabindex', '0');\n customOption.addEventListener('keydown', (event) => {\n const keyboardEvent = event as KeyboardEvent;\n const optionsArray = Array.from(customSelectGroup.children);\n const lastIndex = optionsArray.length - 1;\n\n keyboardEvent.preventDefault();\n // Navigating options\n if (keyboardEvent.key === 'ArrowUp') {\n if (index - count > 0) {\n (optionsArray[index - 1 - count] as HTMLElement).focus();\n } else {\n (optionsArray[lastIndex] as HTMLElement).focus();\n }\n }\n\n if (keyboardEvent.key === 'ArrowDown') {\n if (index - count === lastIndex) {\n (optionsArray[0] as HTMLElement).focus();\n } else {\n (optionsArray[index + 1 - count] as HTMLElement).focus();\n }\n }\n\n // Selecting options\n if (keyboardEvent.key === ' ' || keyboardEvent.key === 'Enter') {\n placeHolder.textContent = customOption.textContent; // Set placeholder to customOption\n placeHolder.classList.remove('text-muted-foreground');\n placeHolder.classList.add('text-black');\n selectGroup.selectedIndex = index; // Select the actual option\n\n selectButton.dataset.state = 'closed';\n selectButton.setAttribute('aria-expanded', 'false');\n\n selectButton.focus();\n customSelectGroup.classList.toggle('invisible');\n }\n });\n\n // Give it an index value\n const optionElement = option as HTMLElement;\n optionElement.dataset.selectItem = index.toString();\n\n // Select an option\n customOption.addEventListener('click', () => {\n placeHolder.textContent = customOption.textContent; // Set placeholder to customOption\n placeHolder.classList.remove('text-muted-foreground');\n placeHolder.classList.add('text-black');\n selectGroup.selectedIndex = index; // Select the actual option\n\n selectButton.dataset.state = 'closed';\n selectButton.setAttribute('aria-expanded', 'false');\n\n customSelectGroup.classList.toggle('invisible');\n });\n\n customSelectGroup.appendChild(customOption);\n });\n}\n\nexport function initSelectMenu(dropdown: HTMLElement) {\n const selectButton = dropdown.querySelector(\n '[data-select-button]',\n ) as HTMLElement;\n const selectGroup = dropdown.querySelector(\n '[data-select-group]',\n ) as HTMLSelectElement;\n const placeHolder = dropdown.querySelector(\n '[data-select-placeholder]',\n ) as HTMLElement;\n const options = selectGroup.querySelectorAll('[data-select-item]');\n\n // Open select options\n selectButton.addEventListener('click', () => {\n selectGroup.classList.toggle('invisible');\n selectButton.dataset.state = 'open';\n selectButton.setAttribute('aria-expanded', 'true');\n });\n\n // Hide menu if mouse clicks elsewhere\n document.addEventListener('click', (event) => {\n const target = event.target as Node;\n\n if (!selectGroup.contains(target) && !selectButton.contains(target)) {\n selectGroup.classList.add('invisible');\n }\n });\n\n let index = 0;\n // Option event listeners\n options.forEach((option) => {\n // Replace placeholder when option is clicked\n option.addEventListener('click', () => {\n placeHolder.textContent = option.textContent; // Set placeholder to customOption\n placeHolder.classList.remove('text-muted-foreground');\n placeHolder.classList.add('text-black');\n\n selectButton.dataset.state = 'closed';\n selectButton.setAttribute('aria-expanded', 'false');\n\n selectGroup.classList.toggle('invisible');\n });\n\n // Make options selectable via keyboard\n option.setAttribute('tabindex', '0');\n option.addEventListener('keyup', (event) => {\n const keyboardEvent = event as KeyboardEvent;\n const lastIndex = options.length - 1;\n\n keyboardEvent.preventDefault(); // Stop scrolling;\n\n // Navigating options\n switch (keyboardEvent.key) {\n case 'ArrowUp':\n if (index > 0) {\n index--;\n } else {\n index = lastIndex;\n }\n (options[index] as HTMLElement).focus();\n break;\n case 'ArrowDown':\n if (index === lastIndex) {\n index = 0;\n } else {\n index++;\n }\n (options[index] as HTMLElement).focus();\n break;\n case ' ':\n case 'Enter':\n placeHolder.textContent = option.textContent; // Set placeholder to customOption\n placeHolder.classList.remove('text-muted-foreground');\n placeHolder.classList.add('text-black');\n\n selectButton.dataset.state = 'closed';\n selectButton.setAttribute('aria-expanded', 'false');\n\n selectGroup.classList.toggle('invisible');\n break;\n default:\n break;\n }\n });\n option.addEventListener('keydown', (event) => {\n event.preventDefault();\n });\n });\n}\n"],"names":["initSelectDropdowns","dropdown","initSelectForm","initSelectMenu","selectButton","selectGroup","placeHolder","options","placeholderText","customSelectGroup","event","target","count","option","index","optionText","customOption","keyboardEvent","optionsArray","lastIndex","optionElement"],"mappings":"AAAO,SAASA,GAAsB,CACf,SAAS,iBAC5B,uBACF,EAEa,QAASC,GAAa,CAClBA,EAAS,QAAQ,gBAAkB,OAEhDC,EAAeD,CAAQ,EAEvBE,EAAeF,CAAQ,CACzB,CACD,CACH,CAUO,SAASC,EAAeD,EAAuB,CACpD,MAAMG,EAAeH,EAAS,cAC5B,sBACF,EACMI,EAAcJ,EAAS,cAC3B,qBACF,EACMK,EAAcL,EAAS,cAC3B,2BACF,EACMM,EACJF,EAAY,iBAAoC,oBAAoB,EAGhEG,EAAkBF,EAAY,QAAQ,mBAEzCE,IAAoB,QAAaA,EAAgB,SAAW,IAC7DD,EAAQ,OAAS,IAEjBF,EAAY,cAAgB,EAChBC,EAAA,YAAcC,EAAQ,CAAC,EAAE,YACzBD,EAAA,UAAU,OAAO,uBAAuB,EACxCA,EAAA,UAAU,IAAI,YAAY,GAGlC,MAAAG,EAAoB,SAAS,cAAc,KAAK,EACpCA,EAAA,aAChB,QACA,6FACF,EACkBA,EAAA,aAAa,2BAA4B,EAAE,EAC7DR,EAAS,YAAYQ,CAAiB,EAGzBL,EAAA,iBAAiB,QAAS,IAAM,CACzBK,EAAA,UAAU,OAAO,WAAW,EAC9CL,EAAa,QAAQ,MAAQ,OAChBA,EAAA,aAAa,gBAAiB,MAAM,CAAA,CAClD,EAGQ,SAAA,iBAAiB,QAAUM,GAAU,CAC5C,MAAMC,EAASD,EAAM,OAEjB,CAACD,EAAkB,SAASE,CAAM,GAAK,CAACP,EAAa,SAASO,CAAM,GACpDF,EAAA,UAAU,IAAI,WAAW,CAC7C,CACD,EAED,IAAIG,EAAQ,EAEJL,EAAA,QAAQ,CAACM,EAAQC,IAAU,CAC7B,GAAAD,EAAO,aAAa,UAAU,EAAG,CACnCD,IACA,MAAA,CAGF,MAAMG,EAAaF,EAAO,YACpBG,EAAe,SAAS,cAAc,KAAK,EACjDA,EAAa,YAAcD,EAEdC,EAAA,aACX,QACA,oFACF,EACaA,EAAA,aAAa,4BAA6BH,EAAO,KAAK,EAGtDG,EAAA,aAAa,WAAY,GAAG,EAC5BA,EAAA,iBAAiB,UAAYN,GAAU,CAClD,MAAMO,EAAgBP,EAChBQ,EAAe,MAAM,KAAKT,EAAkB,QAAQ,EACpDU,EAAYD,EAAa,OAAS,EAExCD,EAAc,eAAe,EAEzBA,EAAc,MAAQ,YACpBH,EAAQF,EAAQ,EACjBM,EAAaJ,EAAQ,EAAIF,CAAK,EAAkB,MAAM,EAEtDM,EAAaC,CAAS,EAAkB,MAAM,GAI/CF,EAAc,MAAQ,cACpBH,EAAQF,IAAUO,EACnBD,EAAa,CAAC,EAAkB,MAAM,EAEtCA,EAAaJ,EAAQ,EAAIF,CAAK,EAAkB,MAAM,IAKvDK,EAAc,MAAQ,KAAOA,EAAc,MAAQ,WACrDX,EAAY,YAAcU,EAAa,YAC3BV,EAAA,UAAU,OAAO,uBAAuB,EACxCA,EAAA,UAAU,IAAI,YAAY,EACtCD,EAAY,cAAgBS,EAE5BV,EAAa,QAAQ,MAAQ,SAChBA,EAAA,aAAa,gBAAiB,OAAO,EAElDA,EAAa,MAAM,EACDK,EAAA,UAAU,OAAO,WAAW,EAChD,CACD,EAGD,MAAMW,EAAgBP,EACRO,EAAA,QAAQ,WAAaN,EAAM,SAAS,EAGrCE,EAAA,iBAAiB,QAAS,IAAM,CAC3CV,EAAY,YAAcU,EAAa,YAC3BV,EAAA,UAAU,OAAO,uBAAuB,EACxCA,EAAA,UAAU,IAAI,YAAY,EACtCD,EAAY,cAAgBS,EAE5BV,EAAa,QAAQ,MAAQ,SAChBA,EAAA,aAAa,gBAAiB,OAAO,EAEhCK,EAAA,UAAU,OAAO,WAAW,CAAA,CAC/C,EAEDA,EAAkB,YAAYO,CAAY,CAAA,CAC3C,CACH,CAEO,SAASb,EAAeF,EAAuB,CACpD,MAAMG,EAAeH,EAAS,cAC5B,sBACF,EACMI,EAAcJ,EAAS,cAC3B,qBACF,EACMK,EAAcL,EAAS,cAC3B,2BACF,EACMM,EAAUF,EAAY,iBAAiB,oBAAoB,EAGpDD,EAAA,iBAAiB,QAAS,IAAM,CAC/BC,EAAA,UAAU,OAAO,WAAW,EACxCD,EAAa,QAAQ,MAAQ,OAChBA,EAAA,aAAa,gBAAiB,MAAM,CAAA,CAClD,EAGQ,SAAA,iBAAiB,QAAUM,GAAU,CAC5C,MAAMC,EAASD,EAAM,OAEjB,CAACL,EAAY,SAASM,CAAM,GAAK,CAACP,EAAa,SAASO,CAAM,GACpDN,EAAA,UAAU,IAAI,WAAW,CACvC,CACD,EAED,IAAIS,EAAQ,EAEJP,EAAA,QAASM,GAAW,CAEnBA,EAAA,iBAAiB,QAAS,IAAM,CACrCP,EAAY,YAAcO,EAAO,YACrBP,EAAA,UAAU,OAAO,uBAAuB,EACxCA,EAAA,UAAU,IAAI,YAAY,EAEtCF,EAAa,QAAQ,MAAQ,SAChBA,EAAA,aAAa,gBAAiB,OAAO,EAEtCC,EAAA,UAAU,OAAO,WAAW,CAAA,CACzC,EAGMQ,EAAA,aAAa,WAAY,GAAG,EAC5BA,EAAA,iBAAiB,QAAUH,GAAU,CAC1C,MAAMO,EAAgBP,EAChBS,EAAYZ,EAAQ,OAAS,EAKnC,OAHAU,EAAc,eAAe,EAGrBA,EAAc,IAAK,CACzB,IAAK,UACCH,EAAQ,EACVA,IAEQA,EAAAK,EAETZ,EAAQO,CAAK,EAAkB,MAAM,EACtC,MACF,IAAK,YACCA,IAAUK,EACJL,EAAA,EAERA,IAEDP,EAAQO,CAAK,EAAkB,MAAM,EACtC,MACF,IAAK,IACL,IAAK,QACHR,EAAY,YAAcO,EAAO,YACrBP,EAAA,UAAU,OAAO,uBAAuB,EACxCA,EAAA,UAAU,IAAI,YAAY,EAEtCF,EAAa,QAAQ,MAAQ,SAChBA,EAAA,aAAa,gBAAiB,OAAO,EAEtCC,EAAA,UAAU,OAAO,WAAW,EACxC,KAEA,CACJ,CACD,EACMQ,EAAA,iBAAiB,UAAYH,GAAU,CAC5CA,EAAM,eAAe,CAAA,CACtB,CAAA,CACF,CACH"}