@jumpgroup/jump-design-system 0.3.78 → 0.3.79

package/dist/components/jump-filter-select.js

@@ -4129,17 +4129,8 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
         this.required = false;
         this.loading = false;
         this.open = false;
-        this.hasSlottedOptions = false;
         this.values = [];
     }
-    /**
-     * Controlla se ci sono opzioni definite come slot
-     */
-    componentWillRender() {
-        // Verifica se ci sono elementi sl-option definiti come figli
-        const slotNodes = this.hostElement.childNodes;
-        this.hasSlottedOptions = Array.from(slotNodes).some(node => node.nodeName && node.nodeName.toLowerCase() === 'sl-option');
-    }
     /**
      * Converte le opzioni da string o array a array di oggetti
      */
@@ -4162,36 +4153,61 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
         this.values = this.value ? [this.value] : [];
     }
     componentDidLoad() {
-        this.listenSLChange();
         // Inizializza l'array dei valori
         this.updateValues();
+        // Aspetta che il render sia completato e che Shoelace abbia processato gli slot
+        setTimeout(() => {
+            this.listenSLChange();
+        }, 100); // Aumentiamo il timeout per dare più tempo a Shoelace
+    }
+    componentDidRender() {
+        // Assicuriamoci che il listener sia attivo anche dopo ogni render
+        if (this.el && !this.el._jumpListenerAttached) {
+            this.listenSLChange();
+        }
     }
     /**
      * Ascolta gli eventi di cambio selezione dal select Shoelace
      */
     listenSLChange() {
-        if (this.host) {
-            this.host.addEventListener('sl-change', (event) => {
+        if (this.el && !this.el._jumpListenerAttached) {
+            // Marchiamo l'elemento per evitare listener multipli
+            this.el._jumpListenerAttached = true;
+            this.el.addEventListener('sl-change', (event) => {
                 if (this.disabled) {
                     return;
                 }
+                console.log('sl-change event received:', event.target.value);
+                // AGGIORNA PRIMA I VALORI INTERNI
                 this.value = event.target.value;
                 this.updateValues();
                 const optionsArray = this.getOptionsArray();
-                const selectedOption = optionsArray.find(option => option.value === this.value);
+                let selectedOption = optionsArray.find(option => option.value === this.value);
+                // Se non abbiamo trovato l'opzione nell'array (caso slot), proviamo a trovarla negli elementi sl-option
+                if (!selectedOption && this.value) {
+                    const slotOptions = this.hostElement.querySelectorAll('sl-option');
+                    const slotOption = Array.from(slotOptions).find((opt) => opt.value === this.value);
+                    if (slotOption) {
+                        selectedOption = {
+                            value: this.value,
+                            label: slotOption.textContent || this.value
+                        };
+                    }
+                }
                 // Evento specifico per il componente select
                 const selectEventData = {
                     value: this.value,
                     selectedOption
                 };
                 this.selectionChange.emit(selectEventData);
-                // Evento standard per il sistema di filtri
+                // CORREZIONE: Evento standard per il sistema di filtri con valori aggiornati
                 const filterEventData = {
                     name: this.name,
-                    values: this.values,
-                    value: this.value,
-                    selectedOption
+                    values: this.values, // Ora questo sarà popolato correttamente
+                    value: this.value, // E anche questo
+                    selectedOption // E anche questo
                 };
+                console.log('jump-filter-select: Emitting jump-filterchange with data:', filterEventData);
                 this.selectionFilterChange.emit(filterEventData);
             });
         }
@@ -4209,7 +4225,19 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
      */
     async getSelectedOption() {
         const optionsArray = this.getOptionsArray();
-        return optionsArray.find(option => option.value === this.value);
+        let selectedOption = optionsArray.find(option => option.value === this.value);
+        // Se non abbiamo trovato l'opzione nell'array (caso slot), proviamo a trovarla negli elementi sl-option
+        if (!selectedOption && this.value) {
+            const slotOptions = this.hostElement.querySelectorAll('sl-option');
+            const slotOption = Array.from(slotOptions).find((opt) => opt.value === this.value);
+            if (slotOption) {
+                selectedOption = {
+                    value: this.value,
+                    label: slotOption.textContent || this.value
+                };
+            }
+        }
+        return selectedOption;
     }
     /**
      * Metodo pubblico per ottenere i valori selezionati come array
@@ -4251,7 +4279,18 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
         // Emetti l'evento di cambio se richiesto
         if (emitEvent) {
             const optionsArray = this.getOptionsArray();
-            const selectedOption = optionsArray.find(option => option.value === this.value);
+            let selectedOption = optionsArray.find(option => option.value === this.value);
+            // Se non abbiamo trovato l'opzione nell'array (caso slot), proviamo a trovarla negli elementi sl-option
+            if (!selectedOption && this.value) {
+                const slotOptions = this.hostElement.querySelectorAll('sl-option');
+                const slotOption = Array.from(slotOptions).find((opt) => opt.value === this.value);
+                if (slotOption) {
+                    selectedOption = {
+                        value: this.value,
+                        label: slotOption.textContent || this.value
+                    };
+                }
+            }
             // Evento specifico per il componente select
             const selectEventData = {
                 value: this.value,
@@ -4281,7 +4320,8 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
     }
     render() {
         const optionsArray = this.getOptionsArray();
-        return (h(Host, { key: 'b20f199ca8f48e9e3c068605a752a3c0d4e890f7', ref: (host) => (this.host = host) }, this.label && (h("div", { key: '040d2a5c5c97ed1a1fef948d00c260224adcf1da', class: "select-label" }, this.label)), h("sl-select", { key: '79b62f0c01b8a75a9bdd357395896db1c6ed0c1b', value: this.value, placeholder: this.placeholder, disabled: this.disabled, multiple: this.multiple, required: this.required, loading: this.loading, ref: (el) => (this.el = el) }, !this.hasSlottedOptions && optionsArray.map(option => (h("sl-option", { value: option.value }, option.label))), h("slot", { key: '7f4e8595fe45ddbd9d5957e819a06667e819f322' }))));
+        const hasOptionsFromProp = optionsArray && optionsArray.length > 0;
+        return (h(Host, { key: '97473942caed469dfb681d77e1335542d5d67808', ref: (host) => (this.host = host) }, this.label && (h("div", { key: 'eb5d0f4a428642694bb47f1bedf1da14d375e592', class: "select-label" }, this.label)), h("sl-select", { key: 'c3d4cb422603fdf837e5433dddd061c47832723a', value: this.value, placeholder: this.placeholder, disabled: this.disabled, multiple: this.multiple, required: this.required, loading: this.loading, ref: (el) => (this.el = el) }, hasOptionsFromProp ? (optionsArray.map(option => (h("sl-option", { value: option.value }, option.label)))) : (h("slot", null)))));
     }
     get hostElement() { return this; }
     static get style() { return JumpFilterSelectStyle0; }
@@ -4296,7 +4336,6 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
         "required": [4],
         "loading": [4],
         "open": [32],
-        "hasSlottedOptions": [32],
         "values": [32],
         "getSelectedValue": [64],
         "getSelectedOption": [64],