@jumpgroup/jump-design-system 0.3.78 → 0.3.79

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

@@ -17,17 +17,8 @@ export class JumpFilterSelect {
         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
      */
@@ -50,36 +41,61 @@ export class JumpFilterSelect {
         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);
             });
         }
@@ -97,7 +113,19 @@ export class JumpFilterSelect {
      */
     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
@@ -139,7 +167,18 @@ export class JumpFilterSelect {
         // 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,
@@ -169,7 +208,8 @@ export class JumpFilterSelect {
     }
     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)))));
     }
     static get is() { return "jump-filter-select"; }
     static get encapsulation() { return "shadow"; }
@@ -350,7 +390,6 @@ export class JumpFilterSelect {
     static get states() {
         return {
             "open": {},
-            "hasSlottedOptions": {},
             "values": {}
         };
     }

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

@@ -1 +1 @@
-{"version":3,"file":"jump-filter-select.js","sourceRoot":"","sources":["../../../src/components/jump-filter-select/jump-filter-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Element } from '@stencil/core';\nimport '@shoelace-style/shoelace/dist/components/select/select.js';\nimport '@shoelace-style/shoelace/dist/components/option/option.js';\n\n/**\n * Componente select per filtri con supporto per opzioni e stato\n * @slot - Contenitore per elementi sl-option quando le opzioni sono definite come figli\n */\n@Component({\n  tag: 'jump-filter-select',\n  styleUrl: 'jump-filter-select.scss',\n  shadow: true,\n})\nexport class JumpFilterSelect {\n  /** Riferimento all'elemento host */\n  @Element() hostElement: HTMLElement;\n\n  /** Il valore selezionato */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  /** Il placeholder da mostrare quando nessun valore è selezionato */\n  @Prop() placeholder: string = 'Seleziona un\\'opzione';\n\n  /** L'etichetta del select */\n  @Prop() label: string;\n\n  /** Nome identificativo del filtro, utilizzato negli eventi */\n  @Prop() name: string = 'select-filter';\n  \n  /** Opzioni del select come array di oggetti {value, label} o come stringa JSON */\n  @Prop() options: string | { value: string; label: string }[] = [];\n\n  /** Stato del select (disabilitato) */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Flag per indicare se è possibile selezionare più opzioni */\n  @Prop() multiple: boolean = false;\n\n  /** Flag per indicare se la selezione è obbligatoria */\n  @Prop() required: boolean = false;\n\n  /** Flag per indicare se il select è in stato di caricamento */\n  @Prop() loading: boolean = false;\n\n  /** Stato interno per gestire l'apertura del dropdown */\n  @State() open: boolean = false;\n\n  /** Flag per determinare se sono presenti opzioni come slot */\n  @State() hasSlottedOptions: boolean = false;\n  \n  /** Stato interno per tenere traccia dei valori selezionati come array per compatibilità con gli altri filtri */\n  @State() values: string[] = [];\n\n  /** Riferimento all'elemento host */\n  host: HTMLElement;\n\n  /** Riferimento all'elemento sl-select interno */\n  el: any;\n\n  /**\n   * Controlla se ci sono opzioni definite come slot\n   */\n  componentWillRender() {\n    // Verifica se ci sono elementi sl-option definiti come figli\n    const slotNodes = this.hostElement.childNodes;\n    this.hasSlottedOptions = Array.from(slotNodes).some(node =>\n      node.nodeName && node.nodeName.toLowerCase() === 'sl-option'\n    );\n  }\n\n  /**\n   * Converte le opzioni da string o array a array di oggetti\n   */\n  private getOptionsArray(): { value: string; label: string }[] {\n    if (typeof this.options === 'string') {\n      try {\n        return JSON.parse(this.options);\n      } catch (e) {\n        console.error('Errore nel parsing delle opzioni:', e);\n        return [];\n      }\n    }\n    return this.options;\n  }\n  \n  /**\n   * Aggiorna l'array dei valori in base al valore selezionato\n   */\n  private updateValues() {\n    this.values = this.value ? [this.value] : [];\n  }\n\n  componentDidLoad() {\n    this.listenSLChange();\n    // Inizializza l'array dei valori\n    this.updateValues();\n  }\n\n  /**\n   * Ascolta gli eventi di cambio selezione dal select Shoelace\n   */\n  listenSLChange() {\n    if (this.host) {\n      this.host.addEventListener('sl-change', (event: any) => {\n        if (this.disabled) {\n          return;\n        }\n\n        this.value = event.target.value;\n        this.updateValues();\n  \n        const optionsArray = this.getOptionsArray();\n        const selectedOption = optionsArray.find(option => option.value === this.value);\n  \n        // Evento specifico per il componente select\n        const selectEventData = {\n          value: this.value,\n          selectedOption\n        };\n        this.selectionChange.emit(selectEventData);\n        \n        // Evento standard per il sistema di filtri\n        const filterEventData = {\n          name: this.name,\n          values: this.values,\n          value: this.value,\n          selectedOption\n        };\n        this.selectionFilterChange.emit(filterEventData);\n      });\n    }\n  }\n\n  /**\n   * Evento emesso quando cambia la selezione\n   */\n  @Event({ eventName: 'jump-select-change' }) selectionChange: EventEmitter;\n  @Event({ eventName: 'jump-filterchange' }) selectionFilterChange: EventEmitter;\n  /**\n   * Evento emesso quando il valore viene cambiato programmaticamente\n   */\n  @Event({ eventName: 'jump-select-value-change' }) valueChange: EventEmitter;\n\n  /**\n   * Metodo pubblico per ottenere il valore selezionato\n   * @returns Il valore attualmente selezionato\n   */\n  @Method()\n  async getSelectedValue() {\n    return this.value;\n  }\n\n  /**\n   * Metodo pubblico per ottenere l'opzione selezionata\n   * @returns L'opzione attualmente selezionata come oggetto {value, label}\n   */\n  @Method()\n  async getSelectedOption() {\n    const optionsArray = this.getOptionsArray();\n    return optionsArray.find(option => option.value === this.value);\n  }\n  \n  /**\n   * Metodo pubblico per ottenere i valori selezionati come array\n   * @returns Array contenente il valore selezionato o un array vuoto\n   */\n  @Method()\n  async getValues() {\n    return this.values;\n  }\n  \n  /**\n   * Metodo pubblico per ottenere il nome del filtro\n   * @returns Il nome del filtro\n   */\n  @Method()\n  async getName() {\n    return this.name;\n  }\n\n  /**\n   * Metodo pubblico per impostare programmaticamente il valore selezionato\n   * @param newValue - Il nuovo valore da selezionare\n   * @param emitEvent - Se emettere l'evento di cambio (default: true)\n   * @returns Il nuovo valore impostato\n   */\n  @Method()\n  async setValue(newValue: string, emitEvent: boolean = true) {\n    // Se il componente è disabilitato, non fare nulla\n    if (this.disabled) {\n      return this.value;\n    }\n    \n    // Salva il valore precedente per l'evento\n    const oldValue = this.value;\n    \n    // Non fare nulla se il valore non è cambiato\n    if (oldValue === newValue) {\n      return this.value;\n    }\n    \n    this.value = newValue;\n    this.updateValues();\n  \n    // Aggiorna anche il valore dell'elemento sl-select interno\n    if (this.el) {\n      this.el.value = newValue;\n    }\n  \n    // Emetti l'evento di cambio se richiesto\n    if (emitEvent) {\n      const optionsArray = this.getOptionsArray();\n      const selectedOption = optionsArray.find(option => option.value === this.value);\n      \n      // Evento specifico per il componente select\n      const selectEventData = {\n        value: this.value,\n        oldValue: oldValue,\n        selectedOption,\n        programmatic: true // Flag per indicare che il cambio è avvenuto programmaticamente\n      };\n      this.selectionChange.emit(selectEventData);\n      \n      // Evento standard per il sistema di filtri\n      const filterEventData = {\n        name: this.name,\n        values: this.values,\n        value: this.value,\n        oldValue: oldValue,\n        selectedOption,\n        programmatic: true\n      };\n      this.selectionFilterChange.emit(filterEventData);\n      \n      // Evento specifico per cambio programmato\n      this.valueChange.emit({\n        value: this.value,\n        oldValue: oldValue,\n        selectedOption\n      });\n    }\n\n    return this.value;\n  }\n\n  render() {\n    const optionsArray = this.getOptionsArray();\n\n    return (\n      <Host ref={(host: HTMLElement) => (this.host = host)}>\n        {this.label && (\n          <div class=\"select-label\">{this.label}</div>\n        )}\n        <sl-select\n          value={this.value}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          multiple={this.multiple}\n          required={this.required}\n          loading={this.loading}\n          ref={(el: any) => (this.el = el)}\n        >\n          {/* Renderizza le opzioni dalla prop options solo se non ci sono sl-option nello slot */}\n          {!this.hasSlottedOptions && optionsArray.map(option => (\n            <sl-option value={option.value}>{option.label}</sl-option>\n          ))}\n\n          {/* Slot per le opzioni definite come figli */}\n          <slot></slot>\n        </sl-select>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"jump-filter-select.js","sourceRoot":"","sources":["../../../src/components/jump-filter-select/jump-filter-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Method, State, Element } from '@stencil/core';\nimport '@shoelace-style/shoelace/dist/components/select/select.js';\nimport '@shoelace-style/shoelace/dist/components/option/option.js';\n\n/**\n * Componente select per filtri con supporto per opzioni e stato\n * @slot - Contenitore per elementi sl-option quando le opzioni sono definite come figli\n */\n@Component({\n  tag: 'jump-filter-select',\n  styleUrl: 'jump-filter-select.scss',\n  shadow: true,\n})\nexport class JumpFilterSelect {\n  /** Riferimento all'elemento host */\n  @Element() hostElement: HTMLElement;\n\n  /** Il valore selezionato */\n  @Prop({ reflect: true, mutable: true }) value: string;\n\n  /** Il placeholder da mostrare quando nessun valore è selezionato */\n  @Prop() placeholder: string = 'Seleziona un\\'opzione';\n\n  /** L'etichetta del select */\n  @Prop() label: string;\n\n  /** Nome identificativo del filtro, utilizzato negli eventi */\n  @Prop() name: string = 'select-filter';\n  \n  /** Opzioni del select come array di oggetti {value, label} o come stringa JSON */\n  @Prop() options: string | { value: string; label: string }[] = [];\n\n  /** Stato del select (disabilitato) */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /** Flag per indicare se è possibile selezionare più opzioni */\n  @Prop() multiple: boolean = false;\n\n  /** Flag per indicare se la selezione è obbligatoria */\n  @Prop() required: boolean = false;\n\n  /** Flag per indicare se il select è in stato di caricamento */\n  @Prop() loading: boolean = false;\n\n  /** Stato interno per gestire l'apertura del dropdown */\n  @State() open: boolean = false;\n  \n  /** Stato interno per tenere traccia dei valori selezionati come array per compatibilità con gli altri filtri */\n  @State() values: string[] = [];\n\n  /** Riferimento all'elemento host */\n  host: HTMLElement;\n\n  /** Riferimento all'elemento sl-select interno */\n  el: any;\n\n  /**\n   * Converte le opzioni da string o array a array di oggetti\n   */\n  private getOptionsArray(): { value: string; label: string }[] {\n    if (typeof this.options === 'string') {\n      try {\n        return JSON.parse(this.options);\n      } catch (e) {\n        console.error('Errore nel parsing delle opzioni:', e);\n        return [];\n      }\n    }\n    return this.options;\n  }\n  \n  /**\n   * Aggiorna l'array dei valori in base al valore selezionato\n   */\n  private updateValues() {\n    this.values = this.value ? [this.value] : [];\n  }\n\n  componentDidLoad() {\n    // Inizializza l'array dei valori\n    this.updateValues();\n    \n    // Aspetta che il render sia completato e che Shoelace abbia processato gli slot\n    setTimeout(() => {\n      this.listenSLChange();\n    }, 100); // Aumentiamo il timeout per dare più tempo a Shoelace\n  }\n\n  componentDidRender() {\n    // Assicuriamoci che il listener sia attivo anche dopo ogni render\n    if (this.el && !this.el._jumpListenerAttached) {\n      this.listenSLChange();\n    }\n  }\n\n  /**\n   * Ascolta gli eventi di cambio selezione dal select Shoelace\n   */\n  listenSLChange() {\n    if (this.el && !this.el._jumpListenerAttached) {\n      // Marchiamo l'elemento per evitare listener multipli\n      this.el._jumpListenerAttached = true;\n      \n      this.el.addEventListener('sl-change', (event: any) => {\n        if (this.disabled) {\n          return;\n        }\n\n        console.log('sl-change event received:', event.target.value);\n\n        // AGGIORNA PRIMA I VALORI INTERNI\n        this.value = event.target.value;\n        this.updateValues();\n  \n        const optionsArray = this.getOptionsArray();\n        let selectedOption = optionsArray.find(option => option.value === this.value);\n        \n        // Se non abbiamo trovato l'opzione nell'array (caso slot), proviamo a trovarla negli elementi sl-option\n        if (!selectedOption && this.value) {\n          const slotOptions = this.hostElement.querySelectorAll('sl-option');\n          const slotOption = Array.from(slotOptions).find((opt: any) => opt.value === this.value);\n          if (slotOption) {\n            selectedOption = {\n              value: this.value,\n              label: slotOption.textContent || this.value\n            };\n          }\n        }\n  \n        // Evento specifico per il componente select\n        const selectEventData = {\n          value: this.value,\n          selectedOption\n        };\n        this.selectionChange.emit(selectEventData);\n        \n        // CORREZIONE: Evento standard per il sistema di filtri con valori aggiornati\n        const filterEventData = {\n          name: this.name,\n          values: this.values, // Ora questo sarà popolato correttamente\n          value: this.value,   // E anche questo\n          selectedOption       // E anche questo\n        };\n        \n        console.log('jump-filter-select: Emitting jump-filterchange with data:', filterEventData);\n        this.selectionFilterChange.emit(filterEventData);\n      });\n    }\n  }\n\n  /**\n   * Evento emesso quando cambia la selezione\n   */\n  @Event({ eventName: 'jump-select-change' }) selectionChange: EventEmitter;\n  @Event({ eventName: 'jump-filterchange' }) selectionFilterChange: EventEmitter;\n  /**\n   * Evento emesso quando il valore viene cambiato programmaticamente\n   */\n  @Event({ eventName: 'jump-select-value-change' }) valueChange: EventEmitter;\n\n  /**\n   * Metodo pubblico per ottenere il valore selezionato\n   * @returns Il valore attualmente selezionato\n   */\n  @Method()\n  async getSelectedValue() {\n    return this.value;\n  }\n\n  /**\n   * Metodo pubblico per ottenere l'opzione selezionata\n   * @returns L'opzione attualmente selezionata come oggetto {value, label}\n   */\n  @Method()\n  async getSelectedOption() {\n    const optionsArray = this.getOptionsArray();\n    let selectedOption = optionsArray.find(option => option.value === this.value);\n    \n    // Se non abbiamo trovato l'opzione nell'array (caso slot), proviamo a trovarla negli elementi sl-option\n    if (!selectedOption && this.value) {\n      const slotOptions = this.hostElement.querySelectorAll('sl-option');\n      const slotOption = Array.from(slotOptions).find((opt: any) => opt.value === this.value);\n      if (slotOption) {\n        selectedOption = {\n          value: this.value,\n          label: slotOption.textContent || this.value\n        };\n      }\n    }\n    \n    return selectedOption;\n  }\n  \n  /**\n   * Metodo pubblico per ottenere i valori selezionati come array\n   * @returns Array contenente il valore selezionato o un array vuoto\n   */\n  @Method()\n  async getValues() {\n    return this.values;\n  }\n  \n  /**\n   * Metodo pubblico per ottenere il nome del filtro\n   * @returns Il nome del filtro\n   */\n  @Method()\n  async getName() {\n    return this.name;\n  }\n\n  /**\n   * Metodo pubblico per impostare programmaticamente il valore selezionato\n   * @param newValue - Il nuovo valore da selezionare\n   * @param emitEvent - Se emettere l'evento di cambio (default: true)\n   * @returns Il nuovo valore impostato\n   */\n  @Method()\n  async setValue(newValue: string, emitEvent: boolean = true) {\n    // Se il componente è disabilitato, non fare nulla\n    if (this.disabled) {\n      return this.value;\n    }\n    \n    // Salva il valore precedente per l'evento\n    const oldValue = this.value;\n    \n    // Non fare nulla se il valore non è cambiato\n    if (oldValue === newValue) {\n      return this.value;\n    }\n    \n    this.value = newValue;\n    this.updateValues();\n  \n    // Aggiorna anche il valore dell'elemento sl-select interno\n    if (this.el) {\n      this.el.value = newValue;\n    }\n  \n    // Emetti l'evento di cambio se richiesto\n    if (emitEvent) {\n      const optionsArray = this.getOptionsArray();\n      let selectedOption = optionsArray.find(option => option.value === this.value);\n      \n      // Se non abbiamo trovato l'opzione nell'array (caso slot), proviamo a trovarla negli elementi sl-option\n      if (!selectedOption && this.value) {\n        const slotOptions = this.hostElement.querySelectorAll('sl-option');\n        const slotOption = Array.from(slotOptions).find((opt: any) => opt.value === this.value);\n        if (slotOption) {\n          selectedOption = {\n            value: this.value,\n            label: slotOption.textContent || this.value\n          };\n        }\n      }\n      \n      // Evento specifico per il componente select\n      const selectEventData = {\n        value: this.value,\n        oldValue: oldValue,\n        selectedOption,\n        programmatic: true // Flag per indicare che il cambio è avvenuto programmaticamente\n      };\n      this.selectionChange.emit(selectEventData);\n      \n      // Evento standard per il sistema di filtri\n      const filterEventData = {\n        name: this.name,\n        values: this.values,\n        value: this.value,\n        oldValue: oldValue,\n        selectedOption,\n        programmatic: true\n      };\n      this.selectionFilterChange.emit(filterEventData);\n      \n      // Evento specifico per cambio programmato\n      this.valueChange.emit({\n        value: this.value,\n        oldValue: oldValue,\n        selectedOption\n      });\n    }\n\n    return this.value;\n  }\n\n  render() {\n    const optionsArray = this.getOptionsArray();\n    const hasOptionsFromProp = optionsArray && optionsArray.length > 0;\n\n    return (\n      <Host ref={(host: HTMLElement) => (this.host = host)}>\n        {this.label && (\n          <div class=\"select-label\">{this.label}</div>\n        )}\n        <sl-select\n          value={this.value}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          multiple={this.multiple}\n          required={this.required}\n          loading={this.loading}\n          ref={(el: any) => (this.el = el)}\n        >\n          {/* Renderizza le opzioni dalla prop options se disponibili, altrimenti usa lo slot */}\n          {hasOptionsFromProp ? (\n            optionsArray.map(option => (\n              <sl-option value={option.value}>{option.label}</sl-option>\n            ))\n          ) : (\n            <slot></slot>\n          )}\n        </sl-select>\n      </Host>\n    );\n  }\n}"]}

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

@@ -25,14 +25,20 @@ const defaultOptions = [
 
 const Template = (args) => {
   const { options, ...otherArgs } = args;
-  const attributes = generateAttributesFromArgs(otherArgs);
-
+  
   // Crea le opzioni per il select
   const optionsToUse = options || defaultOptions;
-  const optionsString = JSON.stringify(optionsToUse).replace(/"/g, '"');
+  
+  // Aggiungi l'attributo options agli args per permettere a generateAttributesFromArgs di gestirlo correttamente
+  const allArgs = {
+    ...otherArgs,
+    options: JSON.stringify(optionsToUse)
+  };
+  
+  const attributes = generateAttributesFromArgs(allArgs);
   
   return formatHtml(`
-    <jump-filter-select ${attributes} options='${optionsString}'>
+    <jump-filter-select ${attributes}>
     </jump-filter-select>
   `);
 };
@@ -120,10 +126,16 @@ OrderingExample.args = {
 
 const TemplateCustomStyles = (args) => {
   const { options, ...otherArgs } = args;
-  const attributes = generateAttributesFromArgs(otherArgs);
   
   const optionsToUse = options || defaultOptions;
-  const optionsString = JSON.stringify(optionsToUse).replace(/"/g, '&quot;');
+  
+  // Aggiungi l'attributo options agli args per permettere a generateAttributesFromArgs di gestirlo correttamente
+  const allArgs = {
+    ...otherArgs,
+    options: JSON.stringify(optionsToUse)
+  };
+  
+  const attributes = generateAttributesFromArgs(allArgs);
 
   return formatHtml(`
     <div>
@@ -138,7 +150,7 @@ const TemplateCustomStyles = (args) => {
           --jump-select-font-size: 16px;
         }
       </style>
-      <jump-filter-select class="custom-select" ${attributes} options='${optionsString}'>
+      <jump-filter-select class="custom-select" ${attributes}>
       </jump-filter-select>
     </div>
   `);
@@ -175,14 +187,20 @@ WithChildOptions.args = {
 // Esempio con un pulsante che imposta il valore programmaticamente
 export const WithSetValueMethod = args => {
   const { options, ...otherArgs } = args;
-  const attributes = generateAttributesFromArgs(otherArgs);
   
   const optionsToUse = options || defaultOptions;
-  const optionsString = JSON.stringify(optionsToUse).replace(/"/g, '&quot;');
+  
+  // Aggiungi l'attributo options agli args per permettere a generateAttributesFromArgs di gestirlo correttamente
+  const allArgs = {
+    ...otherArgs,
+    options: JSON.stringify(optionsToUse)
+  };
+  
+  const attributes = generateAttributesFromArgs(allArgs);
   
   return formatHtml(`
     <div>
-      <jump-filter-select id="programmable-select" ${attributes} options='${optionsString}'>
+      <jump-filter-select id="programmable-select" ${attributes}>
       </jump-filter-select>
       
       <div style="margin-top: 20px;">

package/dist/collection/components/jump-filter-switch/jump-filter-switch.js

@@ -138,7 +138,7 @@ export class JumpFilterSwitch {
         return this.name;
     }
     render() {
-        return (h(Host, { key: 'f7e5939637497219f44aa6ba22acb4a68937d019', ref: (host) => (this.host = host) }, this.value && this.label && (h("sl-switch", { key: '4025228df5c5b4ef987d8ee70cb613ef9c993d9b', value: this.value, ref: (el) => (this.el = el), checked: this.checked, disabled: this.disabled }, this.label))));
+        return (h(Host, { key: '8f226d3fe4682e7e62eb4a389e2951b6aaf41566', ref: (host) => (this.host = host) }, this.value && this.label && (h("sl-switch", { key: 'b12cb3cc7785e582da5917ebec5ff88c0dd91b30', value: this.value, ref: (el) => (this.el = el), checked: this.checked, disabled: this.disabled }, this.label))));
     }
     static get is() { return "jump-filter-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-filtergroup/jump-filtergroup.js

@@ -126,10 +126,10 @@ export class JumpFiltergroup {
         //this.toggleHiddenItems();
     }
     render() {
-        return (h(Host, { key: 'd48d500b033b0706d566bf2fc288af58647ced44' }, this.heading && h("h5", { key: '61a498d5c8f5f4e619565942fac2f42e35c249b8' }, this.heading), h("div", { key: '8e39330b5c1fdcb1921667831bc2eeb24f503e5c', class: "filterGroup" }, h("slot", { key: '01694d0edb05bf1e4939bd6397f2f9a475f0e0f1', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
-            h("jump-button", { key: 'ba5452865b1ff2e5ecb61e481be9e593882b6a13', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
+        return (h(Host, { key: '9d03f151bffb805154f063a84bd714da00d2cf9f' }, this.heading && h("h5", { key: '473a7d0a040e46b3259f1085e1864340b3b59fc9' }, this.heading), h("div", { key: '554a6625704319500a216ece1cc13aeb06d0fef4', class: "filterGroup" }, h("slot", { key: '213781fec2a1faa8aaafd87958ffbd1983eb1b14', ref: (el) => (this.slotItemsWrapper = el) })), this.inputs.length > this.maxElements &&
+            h("jump-button", { key: 'd26b6ce118a5bf19208cb96394fd5972a56cf4ab', variant: "primary", size: "small", text: true, name: this.label, "aria-label": this.label, ref: (showMoreBtn) => {
                     this.showMoreBtn = showMoreBtn;
-                }, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: '8219159cbd596cc6cefa6b07440fb4c5cdbacd03', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
+                }, onClick: () => this.handleShowMore() }, this.label, h("jump-icon", { key: 'bb7a17a36943ffac73e5889eb69016771a6612cf', slot: "suffix", name: !this.showMore ? 'chevron-down' : 'chevron-up' }))));
     }
     static get is() { return "jump-filtergroup"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-navbar/jump-navbar.js

@@ -19,14 +19,14 @@ export class JumpNavbar {
     }
     render() {
         var _a, _b;
-        return (h(Host, { key: '6f08de69934587d46d0e97ac63e409b5613e4d84' }, h("jump-button", { key: 'a21f05cbacf04e83236733e588045e047fb95d00', variant: "primary", size: "small", text: true, href: this.logo['link'], target: (_a = this.logo['target']) !== null && _a !== void 0 ? _a : '_self' }, h("img", { key: '7ae0333a9644192c7699eecf8dd9b79f01e6c292', src: this.logo['image_url'], alt: this.logo['alt'] })), this.isMobile &&
-            h("div", { key: 'bcac331190313c3958b62496c3a6b1799dbf0a06', class: "MobileMenuOffCanvas" }, h("div", { key: '815fcfc1a539d9d7a5353bcfce811ce6067fd7ab', class: "MobileMenuOffCanvas__Header" }, "/* TODO: ricerca + pulsante chiusura + profilo utente con immagine */"), h("div", { key: 'e5a3453677332d6d06e867679f1fce9e2c0d73e8', class: "MobileMenuOffCanvas__Navbar" }, this.navbar.cloneNode(true)), h("div", { key: 'b21b16958faa252dff66cb0e01b0dfbcb9840d8e', class: "MobileMenuOffCanvas__Footer" }, "/* TODO: langswitcher */", this.mobileLogo &&
-                h("jump-button", { key: '8e1234c5ed43013e828fbd95e8fcb5031f623b07', variant: "primary", size: "small", text: true, href: this.mobileLogo['link'], target: (_b = this.mobileLogo['target']) !== null && _b !== void 0 ? _b : '_self' }, h("img", { key: 'ca384db7ad14349b6baa2b7438f1164feeb96b80', src: this.mobileLogo['image_url'], alt: this.mobileLogo['alt'] })))), h("nav", { key: '059a7b48b8cfd33154fef936c25f8321249f1250', ref: (el) => {
+        return (h(Host, { key: 'c3ca42acda8ec6b651b5aed19917da6f2e3b593d' }, h("jump-button", { key: 'a0bfb27d783b855384298cddea88bf8530dac309', variant: "primary", size: "small", text: true, href: this.logo['link'], target: (_a = this.logo['target']) !== null && _a !== void 0 ? _a : '_self' }, h("img", { key: '2341978b73481036ca8ff8705c18b532a258e0f2', src: this.logo['image_url'], alt: this.logo['alt'] })), this.isMobile &&
+            h("div", { key: '8c0f8a79828f53e0cddc70a282188c4795e626d7', class: "MobileMenuOffCanvas" }, h("div", { key: 'dd44366b3adc201a60f72e51d853ebc1ed492492', class: "MobileMenuOffCanvas__Header" }, "/* TODO: ricerca + pulsante chiusura + profilo utente con immagine */"), h("div", { key: '8fbd221bb8f3f574015c8d94976236f4557534ca', class: "MobileMenuOffCanvas__Navbar" }, this.navbar.cloneNode(true)), h("div", { key: '26e1fe3e3654d1d355780e09010fd9dbbcce91c8', class: "MobileMenuOffCanvas__Footer" }, "/* TODO: langswitcher */", this.mobileLogo &&
+                h("jump-button", { key: 'cc5738f24ab07fa9aa1e3a89b90e2310d3f570d2', variant: "primary", size: "small", text: true, href: this.mobileLogo['link'], target: (_b = this.mobileLogo['target']) !== null && _b !== void 0 ? _b : '_self' }, h("img", { key: 'f3dc96e3229fcdfd6a963b93d776d2611d87721b', src: this.mobileLogo['image_url'], alt: this.mobileLogo['alt'] })))), h("nav", { key: 'eb4c284f0e58f4a336c9076d47176f2660ef8c9c', ref: (el) => {
                 this.navbar = el;
-            } }, h("ul", { key: 'da9bbcb6f853f74c5b7c86a50f9bfbcdd7429a02' }, this.navItems.map((item) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: item.link, target: item.target, class: item.class }, item.text, this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&
+            } }, h("ul", { key: 'e5745a9c684740c03b63431f250776ae7836779b' }, this.navItems.map((item) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: item.link, target: item.target, class: item.class }, item.text, this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&
             h("jump-icon", { slot: "suffix", library: "lucide", name: "chevron-down", size: "small" })), this.secondaryNavItems.map((secondaryItem) => (secondaryItem.parent === item.id &&
             h("ul", { "data-parent": secondaryItem.parent }, secondaryItem.title &&
-                h("h4", null, secondaryItem.title), " /* TODO: utilizzare jump-heading? */", secondaryItem.items.map((subItem) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: subItem.link, target: subItem.target, class: subItem.class }, subItem.text)))))))))))), h("slot", { key: '744976cc652586c06c8d57b6c72bcecbad6f18a2', name: "actions" }, h("slot", { key: '015abc23a87fe0463a66ecb582262f5bb9df08c8', name: "lang_switcher" }), h("slot", { key: 'eb48590e68a8a142901fcd1aa765dcb68f543002', name: "search" }), h("slot", { key: 'd8ec80bc6bd8063d884520aba59e0ed70ed2965f', name: "buttons" }), h("slot", { key: '6a26ce21dd00a2bc6c4eb92961e9e8bfcb3be7ba', name: "cart" }))));
+                h("h4", null, secondaryItem.title), " /* TODO: utilizzare jump-heading? */", secondaryItem.items.map((subItem) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: subItem.link, target: subItem.target, class: subItem.class }, subItem.text)))))))))))), h("slot", { key: '09a7005e63bb12d5d1f8b35fa7db7178498359a2', name: "actions" }, h("slot", { key: '2dfabc1a5a007abb5b11b04e0b2457daae3938b4', name: "lang_switcher" }), h("slot", { key: '572997fa2c14881c73e39ca02bc233ac655d7214', name: "search" }), h("slot", { key: '4b5b99f65a35e86030b84a5c2500c68402f7aea4', name: "buttons" }), h("slot", { key: '838333c326920f01917c9d2f896c74e1d898cc9f', name: "cart" }))));
     }
     static get is() { return "jump-navbar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-pagination/jump-pagination.js

@@ -22,7 +22,7 @@ export class JumpPagination {
     }
     /* --------------------- RENDER ------------------------------- */
     render() {
-        return (h(Host, { key: '6d59cfd7f9bee81d599c42e804d0be48c1183b2c', class: "JumpPagination" }, h("div", { key: 'a3620c928b3302e6d5c9c51e99a5770ccf2eed08', class: "JumpPagination__Wrapper" }, h("div", { key: '6afc40de5d106e6a1427d5e7fdcf77628526c697', class: "indicators" }, h("div", { key: '6b2d8c5ccd7d70a5771d0e081d6bd2ef601b24f1', class: "elements" }, h("span", { key: '504c32d0067207719004ea4ad50b560fde48ccaa' }, h("span", { key: 'e22630f7a9523a8c36e5ae5e16aecc95fd6fb9b3' }, this.current), " ", this.pagLabel, " ", h("span", { key: '9627d631cf2dbebf81d4a97a5f62f35320907156' }, this.last))), h("div", { key: 'f513997580f67b7f58a73909bb6046413b1d47ae', class: "arrow" }, this.showFirstAndLast &&
+        return (h(Host, { key: '2c1e0c33955bc82a9371ccf1eca0c5350d05b136', class: "JumpPagination" }, h("div", { key: '85eb248c9268624057f16fc5e50f0ce058e06eac', class: "JumpPagination__Wrapper" }, h("div", { key: 'dd568d3a6f0f32fbed16705cef38f8f1a8613a1e', class: "indicators" }, h("div", { key: '0315ee98935597733bfba159e813699d3ab098e0', class: "elements" }, h("span", { key: '003e190b73aad2d0b88dab5575ce673a75efb35c' }, h("span", { key: 'a32cc0529a7f4ea719ee269425323b629bd0cd5a' }, this.current), " ", this.pagLabel, " ", h("span", { key: '11f60aecd7bdf4b8335bc6376ab25175a8a5fbc0' }, this.last))), h("div", { key: '8497b1df6e084bee3f7169b8112be2e958b9ead6', class: "arrow" }, this.showFirstAndLast &&
             // <button 
             //   onClick={() => {this.current = 1} }
             //   disabled={(this.current === 1) ? true : false}> 
@@ -30,14 +30,14 @@ export class JumpPagination {
             //     disabled={(this.current === 1) ? true : false}
             //     ></jump-icon>   
             // </button>
-            h("jump-button", { key: '479d23ea1aed06af78a0aca4546cbd470db41fc6', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'c66720f530c76a0e251a4dd05adc57ba50db0032', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '490c17ffdc9f4b584338bcc0047eb8d5c5aefb53', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'e78b9de2a3640f71d1a6834adfee60abeb147c70', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: 'b4a8f249de7e4187cd8884b1edfc7329233e5f28', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '52e2ceada52102d6fc546d48a61dc97a8540ad57', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            h("jump-button", { key: 'aff51b684e01e98a22fc78a801a16cef92c89740', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '82fe2c7d55e3aeea6688249be096fff04d4e8a9e', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: 'a6fa825586501964b252afe4c59d0b4ed6319cf5', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'ad4fbb998ac7002620712352f0802f8e614988fc', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: 'ea53f48221f4282174a55ff6d3a4dc3b22ba193d', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '2ae20415c41150bf4ad3c7edc6fcf2bae8cf7ea3', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
             // <button 
             //   onClick={() => {this.current = this.last}}
             //   disabled={(this.current === this.last) ? true : false}
             //   >
             //   <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>   
             // </button> 
-            h("jump-button", { key: 'e81f401f008130ca0ff380f1fa520649709fade6', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'd7bb704276c1aa16e046d56b23a41f94ff00aa74', slot: "suffix", name: "chevrons-right" }), " "))))));
+            h("jump-button", { key: '527c3431dbc4770eeed3dfcdfe19354d8164f1a0', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: 'cd722d6c312b6c6511cd93da1dbcfe445d8998e2', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get is() { return "jump-pagination"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-pagination-table/jump-pagination-table.js

@@ -70,9 +70,9 @@ export class JumpPaginationTable {
     /* --------------------- RENDER ------------------------------- */
     render() {
         var _a;
-        return (h(Host, { key: '47cc6b24347df37305f7df4fe5a8afd7514e6e10', class: "JumpPaginationTable" }, h("div", { key: 'f55fceb2be6ded4feff7aa6755a2cbeaa5945ef9', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '0b01c97f6b6bed5ffb75473f511607c7e8dd5372', class: "elementsPerPage" }, h("label", { key: '74b35bb0d6f5d7fdd5a1ec893662dd0a7e019151', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '4572cf12b14a2ba4cd83ba130a195a41e02612e3', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRangesArray.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: '585299d1d1e3e7a87657a1c96ba387b1922ac67c', class: "indicators" }, h("div", { key: 'e040c1efd9b97d3957c3b7f848db3485caa832ea', class: "elements" }, h("span", { key: '2b0d31316aa647f835536d441288fce844c1a654' }, h("span", { key: 'b824d7c687b1a865c889fc4706c646d8d8848ffa' }, this.first), " - ", h("span", { key: '572dd73f4a9efa7e93ce40211798b35e7c70dbc1' }, this.last), " ", this.pagLabel, " ", h("span", { key: 'b3c51986ed329c5bfe4a096a8eeea0eaf17b9a5d' }, this.total))), h("div", { key: 'f92bd2eb072b9d84860b3e971bad0eb7a665b3c8', class: "arrow" }, this.showFirstAndLast &&
-            h("jump-button", { key: 'a99b6a74d3e5cd2e41ed7555f73fcae79e7a0f47', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '69530966896abe5880b9806105617e1e5b97602f', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '1c6df3f2752d92c276b3a279e74dff939ac3f56f', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: 'afd4a54bed701892067cb83677877b0b3a1deae6', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '4a41c1520ffd5e185c416d9b89c82dd406361815', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: 'f5e95f77772ed5b1ad757b292900dd597cd4d885', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
-            h("jump-button", { key: '3647bdcd23f181b9d7969bf2a895a7c8b7ac5db8', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '963a4017dea5172684587208992277b0086e80c0', slot: "suffix", name: "chevrons-right" }), " "))))));
+        return (h(Host, { key: 'd127efd95559a5c741d63bd2b869b69a5b39c128', class: "JumpPaginationTable" }, h("div", { key: '6ae695734996467308c3ece3d931ea4773fb48f3', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '20e32d72f26642116c5e1800ab1971f48cc1ed3e', class: "elementsPerPage" }, h("label", { key: 'f1836c0aedf64ac928cb6e7c27ca0af7b50f49f3', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: 'e7bb459c1abbb5d2ee710519225379f336834c12', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRangesArray.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: 'fe26f7119c313f7859fcf9effd7137d094dc4cee', class: "indicators" }, h("div", { key: 'b3ce48db1000836ae2ac10c870a1fe52419570b4', class: "elements" }, h("span", { key: 'ba414ac0d2b7133f1bcf9860807fbbb4c22745d4' }, h("span", { key: 'e3015bcb81df21d87950600a041140a165932742' }, this.first), " - ", h("span", { key: 'fb382f5773e9129dc4f3e7be6bca548d40140a1d' }, this.last), " ", this.pagLabel, " ", h("span", { key: '5bb6a635e9007f953c02bbbce227d34338d06598' }, this.total))), h("div", { key: '227fb2bad3a3357ee028e023a06df0f541d485d3', class: "arrow" }, this.showFirstAndLast &&
+            h("jump-button", { key: '834c49e3ecaed5c00329246b4404ad56cbb14468', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '9e7518f27d91f012dc9eb39f80bf5f442820c6b4', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: 'e96effd01cbdaed601b84df41a99b19ca8e8cd99', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '5431958c1b2efc1e10bf88c42a401ad599e26e10', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '8220b582ecdcd455f56d589d2c40ce20afd2f3d8', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '8720edbe060dd5d89a0166f71a728539c743f1c3', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
+            h("jump-button", { key: '82db4d99ccff98c3982bfb31b124a08a58332c1a', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '58bd9a9f71f852201052699d0683a9aa8ce6ee39', slot: "suffix", name: "chevrons-right" }), " "))))));
     }
     static get is() { return "jump-pagination-table"; }
     static get originalStyleUrls() {

package/dist/collection/components/jump-quantity/jump-quantity.js

@@ -64,11 +64,11 @@ export class JumpQuantity {
         }
     }
     render() {
-        return (h(Host, { key: '73eafaacfbd4cd97a05b1fb092f46e6eae738c42', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: 'ce899f6cdf37f0c8e1a72d08c84dbfacb689f312' }, this.label), h("div", { key: '3f61a515fda000b4a992d7ddf084b0690a6113df', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
-            h("jump-button", { key: '662d1a2c8b89bd18203557e1bdba166329f171fa', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: 'b8820c8e48fc8fe8e1d8ffdf99a83234d81bcc88', library: "lucide", name: "minus", size: "small" })), h("input", { key: '95a661f30661ffe2badd7a5da4e9c6bba0767348', ref: (el) => {
+        return (h(Host, { key: '021ef771d6b764fc0038a82ab6342e52d4db9ca5', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '861cb1566ead946d22146a46df9f3cc2a0ba5e7d' }, this.label), h("div", { key: '0b8f3ba368946a370d42237f79c4554381c4b34b', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
+            h("jump-button", { key: 'd83c253c36c743ea4099e7116de9205ade6c4cb8', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '5b51a4d777716767a4850afa196a9b3aa3b86eec', library: "lucide", name: "minus", size: "small" })), h("input", { key: 'a0a1f28ef43a4486a8a7fea980f8e4c28a31c11f', ref: (el) => {
                 this.inputEl = el;
             }, type: 'number', value: this.internalValue, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
-            h("jump-button", { key: '8fa249d9bae3bcd162369d2a61dca3d255a8fa51', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '284beb1782560b3e081f1ad67a52ae90de7a9233', library: "lucide", name: "plus", size: "small" })))));
+            h("jump-button", { key: '7d3feb5f929661778bbb6f14711bc0acf2f3d74d', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '09e8032c6e0e81c24bed6cf41f01ef1c9f0ec607', library: "lucide", name: "plus", size: "small" })))));
     }
     static get is() { return "jump-quantity"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-search-bar-dropdown-item/jump-search-bar-dropdown-item.js

@@ -26,7 +26,7 @@ export class JumpSearchBarDropdownItem {
         });
     }
     render() {
-        return (h(Host, { key: '1d47a172947f5873fa5ee72e30b966d0b4676b0c', ref: (el) => this.componentRef = el }));
+        return (h(Host, { key: '8cbba459dbe5ca9f8785b67e04520dd54832ce52', ref: (el) => this.componentRef = el }));
     }
     static get is() { return "jump-search-bar-dropdown-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-search-bar-mobile/jump-search-bar-mobile.js

@@ -96,16 +96,16 @@ export class JumpSearchBarMobile {
     ;
     /* --------------------- RENDER ------------------------------- */
     render() {
-        return (h(Host, { key: '2536b1f0ae49a8846f83de2a6619a2879fb5c007', class: "JumpSearchBarMobile", ref: (el) => (this.componentRef = el) }, h("jump-icon", { key: 'a0bcb9ee2cd8dec0a6c37132ef65232739120bc7', name: "magnifying-glass", category: "light", onClick: () => this.openDropdown() }), h("div", { key: '672612e8637351b3e558d876e2f9a195e10c8e9e', class: "DropdownWrapper " + (this.isOpen ? 'open' : '') }, h("div", { key: 'e051c440647d74967aa879723306bfc70458ddfa', class: "InputWrapper" }, h("jump-icon", { key: '1cf122efb81cc37fe2521978ee3bcabcbe150a8c', class: "closeButton", category: "light", name: "arrow-left", onClick: () => this.closeDropdown() }), h("input", { key: '18b175b318847b95c24cc245d2d7a3b1a87fa520', placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur }), h("jump-icon", { key: '799b2ec7419725fe9d6ccd38559b33b4885985e2', name: "magnifying-glass", category: "light" })), h("div", { key: 'f09906b6d56210753c6bb0a22e69e2e0950edd88', class: "Results" }, (this.resType == 'recents') &&
-            h("div", { key: 'fd32c692c51f584db8023585a105b471c407abda', class: "Results__Recents" }, this.recents.length != 0 && h("span", { key: 'eb838189df07f24a255f5cef1faa559c3cf50f22', class: "title" }, this.recentsTitle), h("div", { key: '2409d4e8937101f71cb2306e692d11cdcc049038', class: "ResWrapper" }, this.innerResults.length > 0 && this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item) }, h("jump-icon", { name: "magnifying-glass", category: "light" }), item['value']))))), this.resType == 'results' &&
-            h("div", { key: '947f63941d7b7a962d4a6ce51f23771c86e4a57c', class: "Results__Results" }, h("div", { key: '9a960729de62217ae7102b903338800af55fb5eb', class: "ResWrapper" }, this.innerResults === undefined ?
+        return (h(Host, { key: '8e82f7b1d5faddaa1fa8dd7c0d21c5254db63993', class: "JumpSearchBarMobile", ref: (el) => (this.componentRef = el) }, h("jump-icon", { key: '8c15dd4bce72244f49c727e73da4f19bbe0e5de7', name: "magnifying-glass", category: "light", onClick: () => this.openDropdown() }), h("div", { key: '1b90590142feb43a4ed879230fe8a4831e5b6948', class: "DropdownWrapper " + (this.isOpen ? 'open' : '') }, h("div", { key: '5f809148e2ee236ffe98afc5cfbdf44c4cdb38b8', class: "InputWrapper" }, h("jump-icon", { key: '8d57238a39ff3ee9dd00459acffb5a50be1becce', class: "closeButton", category: "light", name: "arrow-left", onClick: () => this.closeDropdown() }), h("input", { key: 'd0a99536bb0890827a9862178fa33308aab58889', placeholder: this.placeholder, type: "search", id: this.identifier, class: "search-input", ref: (el) => { this.jumpSearchBar = el; }, onInput: this.debounce(this.doSearch), onFocus: this.handleFocus, onBlur: this.handleBlur }), h("jump-icon", { key: '831143def53982970c40bc31f4dc7d79cf936ab2', name: "magnifying-glass", category: "light" })), h("div", { key: '148b2510523f6b714241e5ad36328ef5b4316b9a', class: "Results" }, (this.resType == 'recents') &&
+            h("div", { key: '3d9aab39538877fb350415fba9b57ccab85768d0', class: "Results__Recents" }, this.recents.length != 0 && h("span", { key: 'd50cf48b74a63371d2684dbfcae843b13b14dcc6', class: "title" }, this.recentsTitle), h("div", { key: 'ec2557a3c524105797075015a98217f14b6b194a', class: "ResWrapper" }, this.innerResults.length > 0 && this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item) }, h("jump-icon", { name: "magnifying-glass", category: "light" }), item['value']))))), this.resType == 'results' &&
+            h("div", { key: 'f9b1c5de942cc3ecffb707991b839c8481d08cd2', class: "Results__Results" }, h("div", { key: 'dc80f4b4e2dc62671ac55bec72726c0fa4f9efd5', class: "ResWrapper" }, this.innerResults === undefined ?
                 h("div", { class: "helperText" }, h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 100 100", preserveAspectRatio: "xMidYMid", width: "252", height: "252" }, h("g", null, h("g", { transform: "rotate(0 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.9s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(36 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.8s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(72 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.7s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(108 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.6s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(144 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.5s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(180 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.4s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(216 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.3s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(252 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.2s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(288 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "-0.1s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", { transform: "rotate(324 50 50)" }, h("rect", { fill: "#707070", height: "11", width: "4", ry: "1.87", rx: "1.87", y: "27.5", x: "48" }, h("animate", { repeatCount: "indefinite", begin: "0s", dur: "1s", keyTimes: "0;1", values: "1;0", attributeName: "opacity" }))), h("g", null))), this.loadingText)
                 :
                     (this.innerResults.length > 0 ?
                         this.innerResults.map((item) => (h("div", { onClick: () => this.handleResClicked(item), key: item['id'] }, item['img'] && h("img", { src: item['img'], alt: "result" }), item['value'])))
                         :
                             h("div", { class: "helperText" }, this.noResultText)), (this.innerResults && this.innerResults.length > 0) &&
-                h("div", { key: 'a89d62259384695b2662ed092aa7d9f828b5e43d', class: "totalRes" }, h("jump-button", { key: 'faf62951a5a42d2a0f2bf80b75545fd3e4e49f37', variant: "secondary", size: "small", text: true, onClick: () => this.btnOrShowOtherClicked(), target: "_blank" }, " ", this.showAllResText, " "), this.totalResults && h("div", { key: '2f8e1ce5496deaaefdb5d5367232bf7f58dbb1a2' }, this.totalResults, " ", this.resultsText))))))));
+                h("div", { key: 'd465037752274907f4c5aa19175c868b93b8d79f', class: "totalRes" }, h("jump-button", { key: '6e8bfc6e61979f92b0c96de2698e2adda1a53ce2', variant: "secondary", size: "small", text: true, onClick: () => this.btnOrShowOtherClicked(), target: "_blank" }, " ", this.showAllResText, " "), this.totalResults && h("div", { key: '4dca3e806f427d7fa7d9b1d2a3b35d000f9d58b7' }, this.totalResults, " ", this.resultsText))))))));
     }
     static get is() { return "jump-search-bar-mobile"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-side-cart/jump-side-cart.example.js

@@ -51,7 +51,7 @@ export class JumpSideCartExample {
         ];
     }
     render() {
-        return (h("div", { key: 'e7b39ed60d93c4cf1b1950eb825e4b9adc469423', class: "example-container" }, h("button", { key: 'cbbf5e1da70c5051ffaaa42e341a213371ad1ce3', class: "example-button", onClick: this.openCartFromRight }, "Open Cart from Right"), h("button", { key: '9c8ce9eb9455591dcd8053837d768c555cddd920', class: "example-button", onClick: this.openCartFromLeft }, "Open Cart from Left"), h("jump-side-cart", { key: '089052d928794db594a4edb1bdc448587497b6cb', isOpen: this.isCartOpen, items: this.cartItems, position: this.position, discountThreshold: {
+        return (h("div", { key: '5efee94d4b2b177e44dd4de1fdb99facf24af210', class: "example-container" }, h("button", { key: '42d849157bb43fd022e8febfd0abe61ff4f3edf2', class: "example-button", onClick: this.openCartFromRight }, "Open Cart from Right"), h("button", { key: '9067c8fa80e8649e74885c9dc3dd057d42752018', class: "example-button", onClick: this.openCartFromLeft }, "Open Cart from Left"), h("jump-side-cart", { key: '28379da2a29089c10f2cb4f8311a25e508f07277', isOpen: this.isCartOpen, items: this.cartItems, position: this.position, discountThreshold: {
                 amount: 170,
                 percentage: 3
             }, progressPercentage: 30, checkoutLabel: "Vai al Checkout", viewCartLabel: "Vedi carrello", onCartClosed: this.handleCartClosed, onItemQuantityChanged: this.handleUpdateQuantity, onItemRemoved: this.handleRemoveItem, onCheckoutClicked: this.handleCheckout, onViewCartClicked: this.handleViewCart })));

package/dist/collection/components/jump-tab/jump-tab.js

@@ -66,7 +66,7 @@ export class JumpTab {
         }
     }
     render() {
-        return (h(Host, { key: 'a9487cf3bd46c5dac915b90636b9d45e87e576c0', class: "JumpTab " + this.variant, id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: '6b4f8dd93c4ecea25f998196f91057b321657926', class: "Wrapper " + (this.fullBorder ? 'fullBorder' : '') }, h("div", { key: '5987a837094386a68d8262287f23f775d82d049c', class: "ContentWrapper ContentWrapper--Items", style: { '--alignment': this.getAlignment(this.alignment) } }, h("div", { key: '68f9660eaf3b9b5d7afa25ba8c06b50a8cd68acb', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') + " " + (this.fullBorder ? 'fullBorder' : ''), style: { '--alignment': this.getAlignment(this.alignment) } }, h("slot", { key: '046bc6775c4d3417d2ad3356df08710500c010b7', name: "tab-item" }))), h("div", { key: 'a8ada645deff60fafd590dd118ed80d2d318978a', class: "ContentWrapper ContentWrapper--Panel" }, h("slot", { key: '28c698d7c775f5488fd6be00be26a068954d6ecd', name: "tab-content" })))));
+        return (h(Host, { key: '59e43d82c8b42b021901c38df7e011b4214322c4', class: "JumpTab " + this.variant, id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'bf856ca2cdf08bedac4de091665a76fad3839035', class: "Wrapper " + (this.fullBorder ? 'fullBorder' : '') }, h("div", { key: 'e9972902f6be1b6e389a84cc13ebe0d143fd30ec', class: "ContentWrapper ContentWrapper--Items", style: { '--alignment': this.getAlignment(this.alignment) } }, h("div", { key: '7e2bbecf1a4ba7ca854edf4b632039300e3987ed', class: "Content " + this.variant + " " + (this.disabled ? 'disabled' : '') + " " + (this.fullBorder ? 'fullBorder' : ''), style: { '--alignment': this.getAlignment(this.alignment) } }, h("slot", { key: '99ed84c1151955db9c2df9b5ef992fa57ffdb49b', name: "tab-item" }))), h("div", { key: '6881b2bfa14e188654c31088c4a27b8de7ba14f1', class: "ContentWrapper ContentWrapper--Panel" }, h("slot", { key: 'c33f6ee0952db88e1237593a1e264beb9f8c7ed3', name: "tab-content" })))));
     }
     getAlignment(alignment) {
         switch (alignment) {

package/dist/collection/components/jump-tab-item/jump-tab-item.js

@@ -18,8 +18,8 @@ export class JumpTabItem {
         this.variant = parentVariant;
     }
     render() {
-        return (h(Host, { key: '82ce82a7661b0677f7f4041a7ae499cec593f14f', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, h("div", { key: '1805ac3582d5f6d87bcc2e6fb51ac336f5128e57', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
-            h("jump-icon", { key: '0227962214c89e1da7a574163952ab23a17dd7af', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '5922dedce82d6ac398cf72ae12cd7bb0e1400e70', class: "label" }, this.label))));
+        return (h(Host, { key: 'e5cc92e20d207f5a77ae4ef8365cd05e5697ad43', ref: (el) => { this.tabEl = el; }, class: "JumpTabItem " + (this.active ? 'active' : '') + " " + (this.variant) + " " + (this.disabled ? 'disabled' : '') }, h("div", { key: '935051a19cc3feae5745e2ac7d0ea0270e3d9849', class: "Content " + (this.iconName ? this.iconPosition : '') + " " + (this.variant) + " " + (this.active ? 'active' : '') + " " + (this.disabled ? 'disabled' : ''), onClick: () => this.changeTab(this.identifier), id: this.identifier }, (this.iconName && (this.variant == 'inline' || this.variant == 'boxed')) &&
+            h("jump-icon", { key: 'bdd907209efa74af1bb0cfd93b3cd85e02ec9f41', library: "fa", category: "regular", name: this.iconName, size: "small" }), h("span", { key: '6d4747a618f8f2b38a8c4adfc710bdf743f197a0', class: "label" }, this.label))));
     }
     static get is() { return "jump-tab-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/jump-tab-panel/jump-tab-panel.js

@@ -5,7 +5,7 @@ export class JumpTabPanel {
         this.active = false;
     }
     render() {
-        return (h(Host, { key: '3ed1150190842c832987a664f0349558427968a1', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '5541d0e120b67894b2636b6f3870472f13347afe', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: 'c0a04d8bad8c7553866c872ff19e40ed56a08b0a' }))));
+        return (h(Host, { key: 'bde92a51266193503b490c29e2f5658625f7091e', class: "JumpTabPanel", id: this.identifier }, h("div", { key: '28668409b16c37eea9f10f602a83978412baad9a', class: "JumpTabPanel__Content " + (this.active ? 'active' : '') }, h("slot", { key: 'bb06f4ada692c89437dfd980253414240b52f375' }))));
     }
     static get is() { return "jump-tab-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/utils.js

@@ -10,6 +10,10 @@ export const generateAttributesFromArgs = arg => {
             return value ? name : '';
         }
         else {
+            // Per attributi che contengono JSON, usa apici singoli per evitare conflitti con le virgolette nel JSON
+            if (name === 'options' && typeof value === 'string' && (value.startsWith('[') || value.startsWith('{'))) {
+                return `${name}='${value}'`;
+            }
             // take the snake case and convert it to kebab case
             return `${name}="${value}"`;
         }

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { html as beautifyHtml } from 'js-beautify';\n\nexport const generateAttributesFromArgs = arg => {\n  // map attributes to strings. If the attribute is a boolean and is false, don't include it, otherwise include only the attribute name. otherwise include the attribute name and its value\n  // console.log('arg', arg);\n  return (\n    Object.entries(arg)\n      .map(([name, value]) => {\n        name = camelToKebabCase(name);\n        //console.log('name', name);\n        if (typeof value === 'boolean') {\n          return value ? name : '';\n        } else {\n          // take the snake case and convert it to kebab case\n          return `${name}=\"${value}\"`;\n        }\n      })\n      .join(' ')\n      // replace all the spaces with a single space\n      .replace(/\\s+/g, ' ')\n      .trim()\n  );\n};\n\nconst camelToKebabCase = str => {\n  return str.replace(/[A-Z]/g, function (match) {\n    return '-' + match.toLowerCase();\n  });\n};\n\nexport const formatHtml = html => {\n  return beautifyHtml(html, {\n    indent_size: 2,\n  });\n};\n\n// NOTE: utile se vogliamo listare le icone di font awesome nel menu a tendina di storybook\nexport const fontAwesomeLibraryList = async () => {\n  const folders = ['solid', 'regular', 'brands'];\n  const iconList = [];\n\n  for (const folder of folders) {\n    const response = await fetch(`https://designsystem-media.jumpgroup.it/svgs/${folder}/`);\n    const text = await response.text();\n    const parser = new DOMParser();\n    const html = parser.parseFromString(text, 'text/html');\n    const icons = Array.from(html.querySelectorAll('a')).map(a => {\n      if (a.href.includes('.svg')) {\n        return a.href.split('/').pop().replace('.svg', '');\n      }\n    });\n    iconList[folder] = [];\n    iconList[folder].push(...icons.filter(icon => icon !== undefined));\n  }\n\n  return iconList;\n};\n\nexport const lucideLibraryList = async () => {\n  const response = await fetch('https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/');\n  const text = await response.text();\n  const parser = new DOMParser();\n  const html = parser.parseFromString(text, 'text/html');\n  const icons = Array.from(html.querySelectorAll('a')).map(a => {\n    if (a.href.includes('.svg')) {\n      return a.href.split('/').pop().replace('.svg', '');\n    }\n  });\n\n  return icons.filter(icon => icon !== undefined);\n};\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"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","sourcesContent":["import { html as beautifyHtml } from 'js-beautify';\n\nexport const generateAttributesFromArgs = arg => {\n  // map attributes to strings. If the attribute is a boolean and is false, don't include it, otherwise include only the attribute name. otherwise include the attribute name and its value\n  // console.log('arg', arg);\n  return (\n    Object.entries(arg)\n      .map(([name, value]) => {\n        name = camelToKebabCase(name);\n        //console.log('name', name);\n        if (typeof value === 'boolean') {\n          return value ? name : '';\n        } else {\n          // Per attributi che contengono JSON, usa apici singoli per evitare conflitti con le virgolette nel JSON\n          if (name === 'options' && typeof value === 'string' && (value.startsWith('[') || value.startsWith('{'))) {\n            return `${name}='${value}'`;\n          }\n          // take the snake case and convert it to kebab case\n          return `${name}=\"${value}\"`;\n        }\n      })\n      .join(' ')\n      // replace all the spaces with a single space\n      .replace(/\\s+/g, ' ')\n      .trim()\n  );\n};\n\nconst camelToKebabCase = str => {\n  return str.replace(/[A-Z]/g, function (match) {\n    return '-' + match.toLowerCase();\n  });\n};\n\nexport const formatHtml = html => {\n  return beautifyHtml(html, {\n    indent_size: 2,\n  });\n};\n\n// NOTE: utile se vogliamo listare le icone di font awesome nel menu a tendina di storybook\nexport const fontAwesomeLibraryList = async () => {\n  const folders = ['solid', 'regular', 'brands'];\n  const iconList = [];\n\n  for (const folder of folders) {\n    const response = await fetch(`https://designsystem-media.jumpgroup.it/svgs/${folder}/`);\n    const text = await response.text();\n    const parser = new DOMParser();\n    const html = parser.parseFromString(text, 'text/html');\n    const icons = Array.from(html.querySelectorAll('a')).map(a => {\n      if (a.href.includes('.svg')) {\n        return a.href.split('/').pop().replace('.svg', '');\n      }\n    });\n    iconList[folder] = [];\n    iconList[folder].push(...icons.filter(icon => icon !== undefined));\n  }\n\n  return iconList;\n};\n\nexport const lucideLibraryList = async () => {\n  const response = await fetch('https://cdn.jsdelivr.net/npm/lucide-static@0.16.29/icons/');\n  const text = await response.text();\n  const parser = new DOMParser();\n  const html = parser.parseFromString(text, 'text/html');\n  const icons = Array.from(html.querySelectorAll('a')).map(a => {\n    if (a.href.includes('.svg')) {\n      return a.href.split('/').pop().replace('.svg', '');\n    }\n  });\n\n  return icons.filter(icon => icon !== undefined);\n};\n"]}