🔽 TLD - tld_chosen - Composant de Sélection Amélioré

📖 Introduction

tld_chosen est un Web Component qui étend <select> avec Chosen.js pour offrir une interface utilisateur améliorée.
Il supporte :

• La sélection multiple ou unique
• Un mode RTL (droite à gauche)
• La désactivation de la recherche
• Une meilleure UX mobile

---

⚡️ Installation / Prérequis

📦 Dépendances

npm install jquery chosen-js

Ajoutez également le CSS :

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

---

🚀 Utilisation

🔹 Sélection Simple

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

🔹 Sélection Multiple

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

🔹 Mode RTL

<tld-chosen rtl>
    <option value="english">Anglais</option>
    <option value="arabic">Arabe</option>
</tld-chosen>

---

🔹 JavaScript

const select = document.querySelector("tld-chosen");

// Récupérer la valeur
console.log("Valeur sélectionnée :", select.value);

// Définir la valeur
select.value = "banana"; // ou ["red", "blue"] pour multiple

// Écouter les changements
select.addEventListener("change", () => {
    console.log("Nouvelle sélection :", select.value);
});

---

🎨 Style CSS

tld-chosen {
    display: block;
}

---

📌 Détails du Code

🏗️ Classe

class tld_chosen extends tld_custom_elements {
    private _rtl: boolean;
    private _disable_search: boolean;
    private _multiple: boolean;
    public _allow_single_deselect: boolean = false;

    constructor(Attributes: { [name: string]: any } = null) {
        super(Attributes);
        this._rtl = false;
        this._disable_search = false;
    }

    get value(): string | string[] {
        return $(this.querySelector("select")).val();
    }

    set value(value: string | string[]) {
        $(this.querySelector("select")).val(value).trigger("chosen:updated");
    }

    render() {
        this.innerHTML = \`
        <select \${this._multiple ? "multiple" : ""}>
            <option value="" selected disabled hidden></option>
            \${this.innerHTML}
        </select>\`;

        if (this.isMobile()) {
            this.RenderPhone();
        } else {
            this.RenderWindows();
        }
    }
}

---

📱 isMobile()

isMobile() {
    return /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
}

🖥️ RenderWindows()

RenderWindows() {
    $(this.querySelector("select")).chosen({
        width: "100%",
        rtl: this._rtl,
        disable_search: this._disable_search,
        include_group_label_in_selected: true,
        no_results_text: "Aucun résultat trouvé",
        allow_single_deselect: this._allow_single_deselect
    });
}

📱 RenderPhone()

RenderPhone() {
    this.setAttribute("phone", "true");
    this.querySelector("select").innerHTML += "<option value='' disabled selected hidden>Choisir une option...</option>";
}

🔄 updateChosen()

updateChosen() {
    $(this.querySelector("select")).trigger("chosen:updated");
}

---

📚 Exemples et Cas Pratiques

📌 Ajout Dynamique

const select = document.createElement("tld-chosen");

["Paris", "Londres", "Berlin"].forEach(city => {
    const option = document.createElement("option");
    option.value = city.toLowerCase();
    option.textContent = city;
    select.appendChild(option);
});

document.body.appendChild(select);

📌 Récupération et Modification

console.log("Valeur sélectionnée :", select.value);
select.value = "londres";

📌 Écoute des Événements

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

---

🎯 Conclusion

tld_chosen améliore considérablement l'expérience utilisateur pour les menus déroulants grâce à Chosen.js.
Il est compatible avec mobile, multisélection, RTL et plus encore.