✅ TLD - tld_checkbox - Composant de Cases à Cocher

📖 Introduction

tld_checkbox est un Web Component permettant de créer des cases à cocher (checkbox) interactives en TypeScript.
Il prend en charge les sélections uniques et multiples et permet d'écouter les changements via des événements.

---

⚡️ Installation / Prérequis

📦 Dépendances

Ajoutez le fichier CSS pour styliser le composant :

<link rel="stylesheet" href="5_index.css">

---

🚀 Utilisation

🔹 Ajout du Composant dans une Page HTML

Utilisation simple avec des options définies dans le HTML :

<tld-checkbox>
    <option value="apple">Pomme</option>
    <option value="banana">Banane</option>
    <option value="cherry">Cerise</option>
</tld-checkbox>

Pour activer la sélection multiple, ajoutez l’attribut multiple :

<tld-checkbox multiple>
    <option value="red">Rouge</option>
    <option value="green">Vert</option>
    <option value="blue">Bleu</option>
</tld-checkbox>

🔹 Gestion en JavaScript

const checkbox = document.querySelector("tld-checkbox");

// Écoute des changements
checkbox.addEventListener("change", () => {
    console.log("Valeur sélectionnée :", checkbox.value);
});

// Définition dynamique de la valeur
checkbox.value = "banana"; // Sélectionne "Banane"

// Pour une sélection multiple
checkbox.value = ["red", "blue"];

---

🎨 Style CSS

Ajoutez ce fichier CSS (5_index.css) pour assurer l'affichage correct du composant :

tld-checkbox {
    margin: 5px;
    padding: 5px;
    display: block;
}

tld-checkbox .checkbox_etat {
    position: relative;
    min-width: 15px;
    min-height: 15px;
    cursor: pointer;
    margin: 0.5rem;
    border: 1px solid var(--gray-500);
    border-radius: var(--border-radius-full);
    box-sizing: border-box;
    transition: background-color 0.3s ease;
}

tld-checkbox .checkbox_etat.active {
    background-color: var(--purple-200);
    display: flex;
    align-items: center;
    justify-content: center;
}

---

📌 Détails du Code

🏗️ Définition de la Classe

tld_checkbox étend tld_custom_elements et gère les cases à cocher de manière interactive.

class tld_checkbox extends tld_custom_elements {
    private _multiple: boolean = false;

    public get value() {
        return this._multiple
            ? Array.from(this.querySelectorAll<HTMLElement>(".checkbox_etat.active")).map(ac => ac.dataset.value)
            : this.querySelector(".checkbox_etat.active")?.dataset.value || null;
    }

    public set value(value: any) {
        this.querySelectorAll(".active").forEach(el => el.classList.remove("active"));
        if (this._multiple) {
            if (!Array.isArray(value)) return;
            value.forEach(item => this.changeValue(item));
        } else {
            this.changeValue(value);
        }
    }

    public changeValue(value: string | number) {
        if (typeof value === "string") {
            this.querySelector<HTMLElement>(`.checkbox_etat[data-value="${value}"]`)?.click();
        } else if (typeof value === "number") {
            this.querySelector<HTMLElement>(`.checkbox_option:nth-child(${value + 1}) .checkbox_etat`)?.click();
        }
    }
}

🎨 Méthodes Clés

🔄 render()

Transforme les <option> HTML en cases à cocher interactives.

render() {
    const options = this.querySelectorAll("option");
    const backup = document.createElement("div");
    backup.classList.add("checkbox_backup_option");
    backup.style.display = "none";

    options.forEach(option => backup.append(option));
    this.innerHTML = "";
    this.appendChild(backup);

    const main = document.createElement("div");
    options.forEach(option => {
        const div = document.createElement("div");
        div.classList.add("checkbox_option");
        div.innerHTML = `
            <div class="checkbox_etat" tabindex="0" data-value="${option.value}"></div>
            <p class="checkbox_label">${option.textContent}</p>
        `;

        div.querySelector(".checkbox_etat").addEventListener("click", (e) => {
            let target = e.target as HTMLElement;

            if (this._multiple) {
                target.classList.toggle("active");
            } else {
                this.querySelector(".active")?.classList.remove("active");
                target.classList.add("active");
            }

            this.dispatchEvent(new CustomEvent("change"));
        });

        main.appendChild(div);

        if (option.hasAttribute("selected")) {
            div.querySelector<HTMLElement>(".checkbox_etat").click();
        }
    });

    this.appendChild(main);
}

---

📚 Exemples et Cas Pratiques

📌 Ajouter Dynamiquement des Options

const checkbox = document.createElement("tld-checkbox");

const options = ["Paris", "Londres", "Berlin"].map(city => {
    const option = document.createElement("option");
    option.value = city.toLowerCase();
    option.textContent = city;
    return option;
});

options.forEach(option => checkbox.appendChild(option));
document.body.appendChild(checkbox);

📌 Récupérer et Modifier la Valeur

console.log("Valeur sélectionnée :", checkbox.value);

checkbox.value = "londres"; // Sélectionne Londres

📌 Écouter les Événements

checkbox.addEventListener("change", () => {
    console.log("Nouvelle sélection :", checkbox.value);
});

---

🎯 Conclusion

tld_checkbox est un Web Component polyvalent permettant de gérer des cases à cocher interactives. Il prend en charge la sélection unique et multiple, tout en offrant une interface personnalisable.