function dropdownInput(config = {}) { const style = html` `; //set up configuration let { inputId, inputLabel, placeholderText, options, selected } = config; const width = "250px"; const maxHeight = "250px"; //dropdown button const dropdownButton = Inputs.button( html`

${placeholderText}

` ); dropdownButton.classList.add("dropdown-button"); const optionValues = options.map((option) => option.value); //selectInput const selectInput = Inputs.select(optionValues, { multiple: true, value: selected }); selectInput.classList.add("dropdown-select"); selectInput.style.display = "none"; //select and deselect buttons const selectDeselectButtons = Inputs.button([ ["Select All", (value) => "Select All"], ["Deselect All", (value) => "Deselect All"] ]); selectDeselectButtons.classList.add("dropdown-action-buttons"); let selectInputValue = selected.slice(); // Create a copy of selected for selectInputValue let optionListItems = options.map((option) => { const isSelected = selectInputValue.includes(option.value); const listItem = html`

`; // Event listener for the list item listItem.addEventListener("click", (event) => { event.preventDefault(); const clickedListItem = event.currentTarget; const clickedItemId = clickedListItem.id; const index = selectInputValue.indexOf(clickedItemId); if (clickedListItem.classList.contains("selected")) { clickedListItem.classList.remove("selected"); if (index !== -1) { selectInputValue.splice(index, 1); } } else { clickedListItem.classList.add("selected"); selectInputValue.push(option.value); } // Update selectInput value selectInput.value = selectInputValue; // Update form value with selectInputValue form.value = selectInputValue; form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }); return listItem; }); const optionList = html``; const innerDropdown = html`${selectInput} `; innerDropdown.classList.add("dropdown-inner"); innerDropdown.style.display = "none"; innerDropdown.style.width = width; // Function to toggle dropdown visibility const toggleDropdown = () => { innerDropdown.style.display = innerDropdown.style.display === "none" ? "block" : "none"; }; // Toggle the visibility of the select input on button click dropdownButton.onclick = (event) => { toggleDropdown(); }; optionListItems.forEach((t, index) => { const option = options[index].value; if (selectInputValue.includes(option)) { t.classList.add("selected"); } }); selectDeselectButtons.onclick = () => { const buttonText = selectDeselectButtons.value; if (buttonText === "Select All") { selectInput.value = options.map((option) => option.value); selectInputValue = options.map((option) => option.value); form.value = selectInputValue; optionListItems.forEach((t) => { t.classList.add("selected"); }); } else if (buttonText === "Deselect All") { selectInput.value = []; selectInputValue = []; form.value = []; optionListItems.forEach((t) => { t.classList.remove("selected"); }); } form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; //modified from inputs formula by https://observablehq.com/@jashkenas/inputs selectInput.onchange = (e) => { e && e.preventDefault(); const value = selectInput.value; if (form.output) { const out = value; if (out instanceof window.Element) { while (form.output.hasChildNodes()) { form.output.removeChild(form.output.lastChild); } form.output.append(out); } else { form.output.value = out; } } // Update form.value with the selectInput value form.value = value; form.dispatchEvent(new CustomEvent("input", { bubbles: true })); }; const form = html`${inputLabel}`; form.classList.add("dropdown-form"); form.value = selected; const updatePlaceholderText = () => { const selectedValues = form.value; if (selectedValues.length > 0) { const filteredLabels = options .filter((option) => selectedValues.includes(option.value)) .map((filteredOption) => { // Check if the label is an HTML element if ( typeof filteredOption.label === "object" && filteredOption.label instanceof HTMLElement ) { return filteredOption.label.outerHTML; } else { return filteredOption.label; // Assuming label is a string if not HTML } }); const concatenatedText = filteredLabels.join(", "); dropdownButton.querySelector( ".filter-selected" ).innerHTML = `${concatenatedText}`; } else { dropdownButton.querySelector(".filter-selected").innerHTML = placeholderText; } }; // ... (existing code) // Listen for changes in form.value form.addEventListener("input", updatePlaceholderText); // Initial update of placeholder text updatePlaceholderText(); form.appendChild(style); return form; }