function multiSelect(options, { placeholder = "Sélectionner…" } = {}) { const wrapper = html`

`; //placeholder const details = html`

`; wrapper.append(details); const summary = details.querySelector("summary"); const container = html`

`; details.append(container); const searchInput = html``; container.append(searchInput); //tout selectionner const selectAllLabel = html` Tout sélectionner `; const selectAllInput = selectAllLabel.querySelector("input"); container.append(selectAllLabel); const checkboxes = options.map(opt => { const label = html` ${opt} `; container.append(label); return label.querySelector("input"); }); function updateSummary() { const selected = checkboxes.filter(cb => cb.checked); const text = selected.length === 0 ? placeholder : selected.length === 1 ? "1 valeur sélectionnée" : `${selected.length} valeurs sélectionnées`; summary.textContent = text; } function updateSelectAll() { const visible = checkboxes.filter(cb => cb.parentElement.style.display !== "none"); if (visible.length === 0) { selectAllInput.checked = false; selectAllInput.indeterminate = false; return; } const checkedCount = visible.filter(cb => cb.checked).length; if (checkedCount === 0) { selectAllInput.checked = false; selectAllInput.indeterminate = false; } else if (checkedCount === visible.length) { selectAllInput.checked = true; selectAllInput.indeterminate = false; } else { selectAllInput.checked = false; selectAllInput.indeterminate = true; } } function updateHighlight() { checkboxes.forEach(cb => { const label = cb.parentElement; if (cb.checked) { label.style.background = "#d6e9ff"; label.style.color = "#0a4fa8"; } else { label.style.background = "transparent"; label.style.color = "inherit"; } }); } checkboxes.forEach(cb => cb.addEventListener("input", () => { updateSelectAll(); updateSummary(); updateHighlight(); wrapper.dispatchEvent(new Event("input", { bubbles: true })); })); selectAllInput.addEventListener("input", () => { const visible = checkboxes.filter(cb => cb.parentElement.style.display !== "none"); visible.forEach(cb => cb.checked = selectAllInput.checked); updateSummary(); updateHighlight(); wrapper.dispatchEvent(new Event("input", { bubbles: true })); }); searchInput.addEventListener("input", () => { const term = searchInput.value.trim().toLowerCase(); checkboxes.forEach(cb => { const libelle = cb.parentElement.querySelector(".libelle").textContent.toLowerCase().trim(); const match = term === "" || libelle.includes(term); // ✅ n'importe où cb.parentElement.style.display = match ? "flex" : "none"; }); updateSelectAll(); }); Object.defineProperty(wrapper, "value", { get() { return checkboxes .filter(cb => cb.checked) .map(cb => cb.parentElement.querySelector(".libelle").textContent.trim()); }, set(arr) { checkboxes.forEach(cb => { const libelle = cb.parentElement.querySelector(".libelle").textContent.trim(); cb.checked = arr.includes(libelle); }); updateSummary(); updateSelectAll(); updateHighlight(); } }); updateSummary(); updateSelectAll(); updateHighlight(); return wrapper; }