@jumpgroup/jump-design-system 0.3.68 → 0.3.70

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

@@ -10,6 +10,7 @@ export class JumpFilterSelect {
         this.value = undefined;
         this.placeholder = 'Seleziona un\'opzione';
         this.label = undefined;
+        this.name = 'select-filter';
         this.options = [];
         this.disabled = false;
         this.multiple = false;
@@ -17,6 +18,7 @@ export class JumpFilterSelect {
         this.loading = false;
         this.open = false;
         this.hasSlottedOptions = false;
+        this.values = [];
     }
     /**
      * Controlla se ci sono opzioni definite come slot
@@ -41,8 +43,16 @@ export class JumpFilterSelect {
         }
         return this.options;
     }
+    /**
+     * Aggiorna l'array dei valori in base al valore selezionato
+     */
+    updateValues() {
+        this.values = this.value ? [this.value] : [];
+    }
     componentDidLoad() {
         this.listenSLChange();
+        // Inizializza l'array dei valori
+        this.updateValues();
     }
     /**
      * Ascolta gli eventi di cambio selezione dal select Shoelace
@@ -54,14 +64,23 @@ export class JumpFilterSelect {
                     return;
                 }
                 this.value = event.target.value;
+                this.updateValues();
                 const optionsArray = this.getOptionsArray();
                 const selectedOption = optionsArray.find(option => option.value === this.value);
-                const eventData = {
+                // Evento specifico per il componente select
+                const selectEventData = {
+                    value: this.value,
+                    selectedOption
+                };
+                this.selectionChange.emit(selectEventData);
+                // Evento standard per il sistema di filtri
+                const filterEventData = {
+                    name: this.name,
+                    values: this.values,
                     value: this.value,
                     selectedOption
                 };
-                this.selectionChange.emit(eventData);
-                this.selectionFilterChange.emit(eventData);
+                this.selectionFilterChange.emit(filterEventData);
             });
         }
     }
@@ -80,6 +99,20 @@ export class JumpFilterSelect {
         const optionsArray = this.getOptionsArray();
         return optionsArray.find(option => option.value === this.value);
     }
+    /**
+     * Metodo pubblico per ottenere i valori selezionati come array
+     * @returns Array contenente il valore selezionato o un array vuoto
+     */
+    async getValues() {
+        return this.values;
+    }
+    /**
+     * Metodo pubblico per ottenere il nome del filtro
+     * @returns Il nome del filtro
+     */
+    async getName() {
+        return this.name;
+    }
     /**
      * Metodo pubblico per impostare programmaticamente il valore selezionato
      * @param newValue - Il nuovo valore da selezionare
@@ -87,7 +120,18 @@ export class JumpFilterSelect {
      * @returns Il nuovo valore impostato
      */
     async setValue(newValue, emitEvent = true) {
+        // Se il componente è disabilitato, non fare nulla
+        if (this.disabled) {
+            return this.value;
+        }
+        // Salva il valore precedente per l'evento
+        const oldValue = this.value;
+        // Non fare nulla se il valore non è cambiato
+        if (oldValue === newValue) {
+            return this.value;
+        }
         this.value = newValue;
+        this.updateValues();
         // Aggiorna anche il valore dell'elemento sl-select interno
         if (this.el) {
             this.el.value = newValue;
@@ -96,19 +140,36 @@ export class JumpFilterSelect {
         if (emitEvent) {
             const optionsArray = this.getOptionsArray();
             const selectedOption = optionsArray.find(option => option.value === this.value);
-            const eventData = {
+            // Evento specifico per il componente select
+            const selectEventData = {
                 value: this.value,
+                oldValue: oldValue,
                 selectedOption,
                 programmatic: true // Flag per indicare che il cambio è avvenuto programmaticamente
             };
-            this.selectionChange.emit(eventData);
-            this.selectionFilterChange.emit(eventData);
+            this.selectionChange.emit(selectEventData);
+            // Evento standard per il sistema di filtri
+            const filterEventData = {
+                name: this.name,
+                values: this.values,
+                value: this.value,
+                oldValue: oldValue,
+                selectedOption,
+                programmatic: true
+            };
+            this.selectionFilterChange.emit(filterEventData);
+            // Evento specifico per cambio programmato
+            this.valueChange.emit({
+                value: this.value,
+                oldValue: oldValue,
+                selectedOption
+            });
         }
         return this.value;
     }
     render() {
         const optionsArray = this.getOptionsArray();
-        return (h(Host, { key: '3bbb46b827ae88ce31d6c1da17fc75b6da4269ec', ref: (host) => (this.host = host) }, this.label && (h("div", { key: 'c0d89bc2668692fe9920a20aaf45a5ad9989d7b2', class: "select-label" }, this.label)), h("sl-select", { key: '299284224f4981547900d0bcb215747ebc17d22c', 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: 'f481903e85538e396e4d270e4545dbd8024ed7ef' }))));
+        return (h(Host, { key: '26ecef5862a3d5ef1d903ac9dad378027841d78c', ref: (host) => (this.host = host) }, this.label && (h("div", { key: '24bc20afb81ebe4b760889b3be866cc4c94b43f4', class: "select-label" }, this.label)), h("sl-select", { key: '7b578cf8ab02dd40df93848af918c51f7061bbbe', 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: 'dc85029632cf9c9f6b00b72c4f9a83a8281e25dc' }))));
     }
     static get is() { return "jump-filter-select"; }
     static get encapsulation() { return "shadow"; }
@@ -176,6 +237,24 @@ export class JumpFilterSelect {
                 "attribute": "label",
                 "reflect": false
             },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Nome identificativo del filtro, utilizzato negli eventi"
+                },
+                "attribute": "name",
+                "reflect": false,
+                "defaultValue": "'select-filter'"
+            },
             "options": {
                 "type": "string",
                 "mutable": false,
@@ -271,7 +350,8 @@ export class JumpFilterSelect {
     static get states() {
         return {
             "open": {},
-            "hasSlottedOptions": {}
+            "hasSlottedOptions": {},
+            "values": {}
         };
     }
     static get events() {
@@ -305,6 +385,21 @@ export class JumpFilterSelect {
                     "resolved": "any",
                     "references": {}
                 }
+            }, {
+                "method": "valueChange",
+                "name": "jump-select-value-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emesso quando il valore viene cambiato programmaticamente"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
             }];
     }
     static get methods() {
@@ -349,6 +444,46 @@ export class JumpFilterSelect {
                         }]
                 }
             },
+            "getValues": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "Metodo pubblico per ottenere i valori selezionati come array",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Array contenente il valore selezionato o un array vuoto"
+                        }]
+                }
+            },
+            "getName": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Metodo pubblico per ottenere il nome del filtro",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Il nome del filtro"
+                        }]
+                }
+            },
             "setValue": {
                 "complexType": {
                     "signature": "(newValue: string, emitEvent?: boolean) => Promise<string>",

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":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACtG,OAAO,2DAA2D,CAAC;AACnE,OAAO,2DAA2D,CAAC;AAEnE;;;GAGG;AAMH,MAAM,OAAO,gBAAgB;;;2BAQG,uBAAuB;;uBAMU,EAAE;wBAGpB,KAAK;wBAGtB,KAAK;wBAGL,KAAK;uBAGN,KAAK;oBAGP,KAAK;iCAGQ,KAAK;;IAQ3C;;OAEG;IACH,mBAAmB;QACjB,6DAA6D;QAC7D,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;QAC9C,IAAI,CAAC,iBAAiB,GAAG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CACzD,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,CAAC,WAAW,EAAE,KAAK,WAAW,CAC7D,CAAC;IACJ,CAAC;IAED;;OAEG;IACK,eAAe;QACrB,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,EAAE,CAAC;YACrC,IAAI,CAAC;gBACH,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;YAClC,CAAC;YAAC,OAAO,CAAC,EAAE,CAAC;gBACX,OAAO,CAAC,KAAK,CAAC,mCAAmC,EAAE,CAAC,CAAC,CAAC;gBACtD,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAC,OAAO,CAAC;IACtB,CAAC;IAED,gBAAgB;QACd,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED;;OAEG;IACH,cAAc;QACZ,IAAI,IAAI,CAAC,IAAI,EAAE,CAAC;YACd,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,WAAW,EAAE,CAAC,KAAU,EAAE,EAAE;gBACrD,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;oBAClB,OAAO;gBACT,CAAC;gBAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;gBAEhC,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;gBAC5C,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;gBAEhF,MAAM,SAAS,GAAG;oBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;oBACjB,cAAc;iBACf,CAAC;gBAEF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;gBACrC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YAC7C,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IAQD;;;OAGG;IAEH,KAAK,CAAC,gBAAgB;QACpB,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED;;;OAGG;IAEH,KAAK,CAAC,iBAAiB;QACrB,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAC5C,OAAO,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;IAClE,CAAC;IAED;;;;;OAKG;IAEH,KAAK,CAAC,QAAQ,CAAC,QAAgB,EAAE,YAAqB,IAAI;QACxD,IAAI,CAAC,KAAK,GAAG,QAAQ,CAAC;QAEtB,2DAA2D;QAC3D,IAAI,IAAI,CAAC,EAAE,EAAE,CAAC;YACZ,IAAI,CAAC,EAAE,CAAC,KAAK,GAAG,QAAQ,CAAC;QAC3B,CAAC;QAED,yCAAyC;QACzC,IAAI,SAAS,EAAE,CAAC;YACd,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;YAC5C,MAAM,cAAc,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,CAAC,MAAM,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC;YAEhF,MAAM,SAAS,GAAG;gBAChB,KAAK,EAAE,IAAI,CAAC,KAAK;gBACjB,cAAc;gBACd,YAAY,EAAE,IAAI,CAAC,gEAAgE;aACpF,CAAC;YAEF,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;YACrC,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,IAAI,CAAC,KAAK,CAAC;IACpB,CAAC;IAED,MAAM;QACJ,MAAM,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE,CAAC;QAE5C,OAAO,CACL,EAAC,IAAI,qDAAC,GAAG,EAAE,CAAC,IAAiB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;YACjD,IAAI,CAAC,KAAK,IAAI,CACb,4DAAK,KAAK,EAAC,cAAc,IAAE,IAAI,CAAC,KAAK,CAAO,CAC7C;YACD,kEACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,GAAG,EAAE,CAAC,EAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,EAAE,GAAG,EAAE,CAAC;gBAG/B,CAAC,IAAI,CAAC,iBAAiB,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC,CACrD,iBAAW,KAAK,EAAE,MAAM,CAAC,KAAK,IAAG,MAAM,CAAC,KAAK,CAAa,CAC3D,CAAC;gBAGF,8DAAa,CACH,CACP,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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  /** 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  /** 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  componentDidLoad() {\n    this.listenSLChange();\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\n        const optionsArray = this.getOptionsArray();\n        const selectedOption = optionsArray.find(option => option.value === this.value);\n\n        const eventData = {\n          value: this.value,\n          selectedOption\n        };\n\n        this.selectionChange.emit(eventData);\n        this.selectionFilterChange.emit(eventData);\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  /**\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 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    this.value = newValue;\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      const eventData = {\n        value: this.value,\n        selectedOption,\n        programmatic: true // Flag per indicare che il cambio è avvenuto programmaticamente\n      };\n\n      this.selectionChange.emit(eventData);\n      this.selectionFilterChange.emit(eventData);\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  /** 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"]}

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

@@ -0,0 +1 @@
+//# sourceMappingURL=index.js.map

package/dist/collection/components/jump-side-cart/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/jump-side-cart/index.ts"],"names":[],"mappings":"","sourcesContent":[""]}

package/dist/collection/components/jump-side-cart/jump-side-cart.css

@@ -0,0 +1,315 @@
+:host {
+  --cart-width: 400px;
+  --cart-bg: #ffffff;
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+  --border-color: #e5e5e5;
+  --text-primary: #333333;
+  --text-secondary: #666666;
+  --primary-color: #80bb55;
+  --secondary-color: #f5f5f5;
+  --error-color: #dc3545;
+  --success-color: #28a745;
+}
+
+.side-cart {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  z-index: 1000;
+  pointer-events: none;
+}
+.side-cart--open {
+  pointer-events: all;
+}
+.side-cart--right {
+  right: 0;
+}
+.side-cart--right .side-cart__content {
+  right: 0;
+  transform: translateX(100%);
+}
+.side-cart--right.side-cart--open .side-cart__content {
+  transform: translateX(0);
+}
+.side-cart--left {
+  left: 0;
+}
+.side-cart--left .side-cart__content {
+  left: 0;
+  transform: translateX(-100%);
+}
+.side-cart--left.side-cart--open .side-cart__content {
+  transform: translateX(0);
+}
+
+.side-cart__overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--overlay-bg);
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.side-cart--open .side-cart__overlay {
+  opacity: 1;
+}
+
+.side-cart__content {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: var(--cart-width);
+  max-width: 90vw;
+  background: var(--cart-bg);
+  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease;
+  display: flex;
+  flex-direction: column;
+}
+.side-cart--left .side-cart__content {
+  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.side-cart__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+.side-cart__header h2 {
+  margin: 0;
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.side-cart__header .close-btn {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  color: var(--text-secondary);
+  padding: 0.25rem;
+  line-height: 1;
+}
+.side-cart__header .close-btn:hover {
+  color: var(--text-primary);
+}
+
+.side-cart__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1rem;
+}
+
+.empty-cart {
+  text-align: center;
+  padding: 2rem 0;
+  color: var(--text-secondary);
+}
+
+.cart-items {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.cart-item {
+  display: flex;
+  gap: 0.75rem;
+  padding: 1rem;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}
+.cart-item__image {
+  flex-shrink: 0;
+  width: 80px;
+  height: 80px;
+}
+.cart-item__image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.cart-item__details {
+  flex: 1;
+  min-width: 0;
+}
+.cart-item__brand {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+  font-weight: 500;
+}
+.cart-item__name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--text-primary);
+  margin-bottom: 0.25rem;
+  line-height: 1.3;
+}
+.cart-item__description {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  margin-bottom: 0.5rem;
+}
+.cart-item__price {
+  font-weight: 600;
+  color: var(--text-primary);
+}
+.cart-item__original-price {
+  margin-left: 0.5rem;
+  text-decoration: line-through;
+  color: var(--text-secondary);
+  font-weight: normal;
+}
+.cart-item__controls {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.quantity-controls {
+  display: flex;
+  align-items: center;
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+}
+.quantity-controls .quantity-btn {
+  background: none;
+  border: none;
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  color: var(--text-primary);
+}
+.quantity-controls .quantity-btn:hover:not(:disabled) {
+  background: var(--secondary-color);
+}
+.quantity-controls .quantity-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.quantity-controls .quantity {
+  min-width: 40px;
+  text-align: center;
+  padding: 0 0.5rem;
+  border-left: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  font-weight: 500;
+}
+
+.remove-btn {
+  background: none;
+  border: none;
+  color: var(--error-color);
+  font-size: 0.75rem;
+  cursor: pointer;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+.remove-btn:hover {
+  background: rgba(220, 53, 69, 0.1);
+}
+
+.progress-section {
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.progress-bar {
+  width: 100%;
+  height: 8px;
+  background: var(--secondary-color);
+  border-radius: 4px;
+  overflow: hidden;
+  margin-bottom: 0.5rem;
+}
+.progress-bar .progress-fill {
+  height: 100%;
+  background: var(--primary-color);
+  transition: width 0.3s ease;
+}
+
+.progress-text {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  text-align: center;
+}
+
+.side-cart__footer {
+  border-top: 1px solid var(--border-color);
+  padding: 1rem;
+}
+
+.totals {
+  margin-bottom: 1rem;
+}
+.totals .subtotal, .totals .savings {
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 0.5rem;
+}
+.totals .subtotal {
+  font-weight: 600;
+  font-size: 1.125rem;
+}
+.totals .savings {
+  color: var(--success-color);
+  font-size: 0.875rem;
+}
+
+.actions {
+  display: flex;
+  gap: 0.75rem;
+}
+.actions .btn {
+  flex: 1;
+  padding: 0.75rem;
+  border: none;
+  border-radius: 6px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+.actions .btn--primary {
+  background: var(--primary-color);
+  color: white;
+}
+.actions .btn--primary:hover {
+  background: #68a03b; /* Darker shade of --primary-color */
+  filter: brightness(0.9);
+}
+.actions .btn--secondary {
+  background: var(--secondary-color);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+.actions .btn--secondary:hover {
+  background: #e8e8e8; /* Darker shade of --secondary-color */
+  filter: brightness(0.95);
+}
+
+@media (max-width: 768px) {
+  .side-cart__content {
+    width: 100vw;
+    max-width: none;
+  }
+  .cart-item__details {
+    font-size: 0.8rem;
+  }
+  .cart-item__name {
+    font-size: 0.8rem;
+  }
+}

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

@@ -0,0 +1,30 @@
+:host {
+  display: block;
+}
+
+.example-container {
+  display: flex;
+  min-height: 100vh;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 2rem;
+  background-color: #f5f5f5;
+}
+
+.example-button {
+  padding: 0.75rem 1.5rem;
+  background-color: #80bb55;
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-weight: 500;
+  transition: background-color 0.2s ease;
+}
+.example-button:hover {
+  background-color: #68a03b;
+}
+.example-button:active {
+  transform: translateY(1px);
+}