diff --git a/dist/cookcli-recipe-strategy.js b/dist/cookcli-recipe-strategy.js index 1bbd92f..0d114e0 100644 --- a/dist/cookcli-recipe-strategy.js +++ b/dist/cookcli-recipe-strategy.js @@ -386,72 +386,87 @@ class CookCliRecipeViewStrategy extends HTMLElement { class CookcliStrategyEditor extends HTMLElement { setConfig(config) { this._config = config; + if (this.isConnected) { + this._render(); + } } set hass(hass) { this._hass = hass; + if (this.isConnected) { + this._render(); + } } - // Méthode appelée quand l'utilisateur modifie un champ - _valueChanged(ev) { - if (!this._config || !this._hass) { + // Appelé automatiquement quand l'élément est inséré dans le DOM + connectedCallback() { + this._render(); + } + + _render() { + // On attend d'avoir hass avant de rendre : ha-textfield en a besoin + // pour son thème et ses styles. + if (!this._hass) { + this.innerHTML = `
Chargement…
`; return; } - const target = ev.target; - const newConfig = { ...this._config }; - - // Mettre à jour la clé correspondant au nom du champ - newConfig[target.configValue] = target.value; - // Informer Home Assistant du changement - this.dispatchEvent( - new CustomEvent("config-changed", { - bubbles: true, - composed: true, - detail: { config: newConfig }, - }) - ); - } + const c = this._config || {}; - // Méthode de rendu (obligatoire pour afficher le formulaire) - connectedCallback() { this.innerHTML = ` -
+
+ + + +
`; - } - configChanged(newConfig) { - this.dispatchEvent( - new CustomEvent("config-changed", { - bubbles: true, - composed: true, - detail: { config: newConfig }, - }) - ); + // On attache les écouteurs en JS natif, car la syntaxe @change de Lit + // n'est pas interprétée dans un innerHTML classique. + this.querySelectorAll("[data-config-key]").forEach((champ) => { + champ.addEventListener("change", (ev) => { + const cle = ev.target.dataset.configKey; + const nouvelleConfig = { ...this._config, [cle]: ev.target.value }; + this._config = nouvelleConfig; + + // On notifie HA du changement : il met à jour la config du dashboard + this.dispatchEvent( + new CustomEvent("config-changed", { + bubbles: true, + composed: true, + detail: { config: nouvelleConfig }, + }) + ); + }); + }); } }