@jumpgroup/jump-design-system 0.3.59 → 0.3.63

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

@@ -0,0 +1,373 @@
+import { Host, h } from "@stencil/core";
+import "@shoelace-style/shoelace/dist/components/select/select.js";
+import "@shoelace-style/shoelace/dist/components/option/option.js";
+/**
+ * Componente select per filtri con supporto per opzioni e stato
+ * @slot - Contenitore per elementi sl-option quando le opzioni sono definite come figli
+ */
+export class JumpFilterSelect {
+    constructor() {
+        this.value = undefined;
+        this.placeholder = 'Seleziona un\'opzione';
+        this.label = undefined;
+        this.options = [];
+        this.disabled = false;
+        this.multiple = false;
+        this.required = false;
+        this.loading = false;
+        this.open = false;
+        this.hasSlottedOptions = false;
+    }
+    /**
+     * 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
+     */
+    getOptionsArray() {
+        if (typeof this.options === 'string') {
+            try {
+                return JSON.parse(this.options);
+            }
+            catch (e) {
+                console.error('Errore nel parsing delle opzioni:', e);
+                return [];
+            }
+        }
+        return this.options;
+    }
+    componentDidLoad() {
+        this.listenSLChange();
+    }
+    /**
+     * Ascolta gli eventi di cambio selezione dal select Shoelace
+     */
+    listenSLChange() {
+        if (this.host) {
+            this.host.addEventListener('sl-change', (event) => {
+                if (this.disabled) {
+                    return;
+                }
+                this.value = event.target.value;
+                const optionsArray = this.getOptionsArray();
+                const selectedOption = optionsArray.find(option => option.value === this.value);
+                const eventData = {
+                    value: this.value,
+                    selectedOption
+                };
+                this.selectionChange.emit(eventData);
+            });
+        }
+    }
+    /**
+     * Metodo pubblico per ottenere il valore selezionato
+     * @returns Il valore attualmente selezionato
+     */
+    async getSelectedValue() {
+        return this.value;
+    }
+    /**
+     * Metodo pubblico per ottenere l'opzione selezionata
+     * @returns L'opzione attualmente selezionata come oggetto {value, label}
+     */
+    async getSelectedOption() {
+        const optionsArray = this.getOptionsArray();
+        return optionsArray.find(option => option.value === this.value);
+    }
+    /**
+     * Metodo pubblico per impostare programmaticamente il valore selezionato
+     * @param newValue - Il nuovo valore da selezionare
+     * @param emitEvent - Se emettere l'evento di cambio (default: true)
+     * @returns Il nuovo valore impostato
+     */
+    async setValue(newValue, emitEvent = true) {
+        this.value = newValue;
+        // Aggiorna anche il valore dell'elemento sl-select interno
+        if (this.el) {
+            this.el.value = newValue;
+        }
+        // Emetti l'evento di cambio se richiesto
+        if (emitEvent) {
+            const optionsArray = this.getOptionsArray();
+            const selectedOption = optionsArray.find(option => option.value === this.value);
+            const eventData = {
+                value: this.value,
+                selectedOption,
+                programmatic: true // Flag per indicare che il cambio è avvenuto programmaticamente
+            };
+            this.selectionChange.emit(eventData);
+        }
+        return this.value;
+    }
+    render() {
+        const optionsArray = this.getOptionsArray();
+        return (h(Host, { key: '3aeb8a1b3c8757bfecd0b5642ddfa87e61f92849', ref: (host) => (this.host = host) }, this.label && (h("div", { key: '504faaf84a96fd84add35cdaaa34e617391d4c82', class: "select-label" }, this.label)), h("sl-select", { key: '9a707596aa5a2c87c0276ecca51588c02d22edb0', 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: 'b4592e359a2aaea92a87ab7240ddb6d2557697c3' }))));
+    }
+    static get is() { return "jump-filter-select"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["jump-filter-select.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["jump-filter-select.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Il valore selezionato"
+                },
+                "attribute": "value",
+                "reflect": true
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Il placeholder da mostrare quando nessun valore \u00E8 selezionato"
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "'Seleziona un\\'opzione'"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "L'etichetta del select"
+                },
+                "attribute": "label",
+                "reflect": false
+            },
+            "options": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | { value: string; label: string }[]",
+                    "resolved": "string | { value: string; label: string; }[]",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opzioni del select come array di oggetti {value, label} o come stringa JSON"
+                },
+                "attribute": "options",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Stato del select (disabilitato)"
+                },
+                "attribute": "disabled",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "multiple": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag per indicare se \u00E8 possibile selezionare pi\u00F9 opzioni"
+                },
+                "attribute": "multiple",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "required": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag per indicare se la selezione \u00E8 obbligatoria"
+                },
+                "attribute": "required",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "loading": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Flag per indicare se il select \u00E8 in stato di caricamento"
+                },
+                "attribute": "loading",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "open": {},
+            "hasSlottedOptions": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "selectionChange",
+                "name": "jump-select-change",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Evento emesso quando cambia la selezione"
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getSelectedValue": {
+                "complexType": {
+                    "signature": "() => Promise<string>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Metodo pubblico per ottenere il valore selezionato",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "Il valore attualmente selezionato"
+                        }]
+                }
+            },
+            "getSelectedOption": {
+                "complexType": {
+                    "signature": "() => Promise<{ value: string; label: string; }>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<{ value: string; label: string; }>"
+                },
+                "docs": {
+                    "text": "Metodo pubblico per ottenere l'opzione selezionata",
+                    "tags": [{
+                            "name": "returns",
+                            "text": "L'opzione attualmente selezionata come oggetto {value, label}"
+                        }]
+                }
+            },
+            "setValue": {
+                "complexType": {
+                    "signature": "(newValue: string, emitEvent?: boolean) => Promise<string>",
+                    "parameters": [{
+                            "name": "newValue",
+                            "type": "string",
+                            "docs": "- Il nuovo valore da selezionare"
+                        }, {
+                            "name": "emitEvent",
+                            "type": "boolean",
+                            "docs": "- Se emettere l'evento di cambio (default: true)"
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string>"
+                },
+                "docs": {
+                    "text": "Metodo pubblico per impostare programmaticamente il valore selezionato",
+                    "tags": [{
+                            "name": "param",
+                            "text": "newValue - Il nuovo valore da selezionare"
+                        }, {
+                            "name": "param",
+                            "text": "emitEvent - Se emettere l'evento di cambio (default: true)"
+                        }, {
+                            "name": "returns",
+                            "text": "Il nuovo valore impostato"
+                        }]
+                }
+            }
+        };
+    }
+    static get elementRef() { return "hostElement"; }
+}
+//# sourceMappingURL=jump-filter-select.js.map

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

@@ -0,0 +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  /** 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      });\n    }\n  }\n\n  /**\n   * Evento emesso quando cambia la selezione\n   */\n  @Event({ eventName: 'jump-select-change' }) selectionChange: 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    }\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} "]}

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

@@ -0,0 +1,211 @@
+import { generateAttributesFromArgs, formatHtml } from '../../utils/utils';
+
+export default {
+  title: 'Components/Filters/JumpFilterSelect',
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: 'text' },
+    placeholder: { control: 'text' },
+    label: { control: 'text' },
+    disabled: { control: 'boolean' },
+    multiple: { control: 'boolean' },
+    required: { control: 'boolean' },
+    loading: { control: 'boolean' },
+  },
+};
+
+// Definisco il tipo come costante anziché come interfaccia
+const defaultOptions = [
+  { value: 'option1', label: 'Opzione 1' },
+  { value: 'option2', label: 'Opzione 2' },
+  { value: 'option3', label: 'Opzione 3' },
+  { value: 'option4', label: 'Opzione 4' },
+  { value: 'option5', label: 'Opzione 5' },
+];
+
+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, '"');
+  
+  return formatHtml(`
+    <jump-filter-select ${attributes} options='${optionsString}'>
+    </jump-filter-select>
+  `);
+};
+
+// Versione alternativa con opzioni definite come elementi figli
+const TemplateWithChildren = (args) => {
+  const { options, ...otherArgs } = args;
+  const attributes = generateAttributesFromArgs(otherArgs);
+  
+  const optionsToUse = options || defaultOptions;
+  const optionsHtml = optionsToUse
+    .map(opt => `<sl-option value="${opt.value}">${opt.label}</sl-option>`)
+    .join('');
+  
+  return formatHtml(`
+    <jump-filter-select ${attributes}>
+      ${optionsHtml}
+    </jump-filter-select>
+  `);
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  placeholder: 'Seleziona un\'opzione',
+  label: 'Ordina per',
+  value: '',
+  disabled: false,
+  multiple: false,
+  required: false,
+  loading: false,
+  options: defaultOptions,
+};
+
+export const WithValue = Template.bind({});
+WithValue.args = {
+  ...Default.args,
+  value: 'option1',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  ...Default.args,
+  disabled: true,
+};
+
+export const Multiple = Template.bind({});
+Multiple.args = {
+  ...Default.args,
+  multiple: true,
+  value: JSON.stringify(['option1', 'option3']),
+};
+
+export const WithCustomLabel = Template.bind({});
+WithCustomLabel.args = {
+  ...Default.args,
+  label: 'Opzioni disponibili',
+};
+
+export const Required = Template.bind({});
+Required.args = {
+  ...Default.args,
+  required: true,
+  label: 'Campo obbligatorio',
+};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  ...Default.args,
+  loading: true,
+};
+
+// Esempio con opzioni specifiche per l'ordinamento
+export const OrderingExample = Template.bind({});
+OrderingExample.args = {
+  ...Default.args, 
+  label: 'Ordina per',
+  placeholder: 'Seleziona un criterio',
+  options: [
+    { value: 'price-asc', label: 'Prezzo crescente' },
+    { value: 'price-desc', label: 'Prezzo decrescente' },
+    { value: 'name-asc', label: 'Nome A-Z' },
+    { value: 'name-desc', label: 'Nome Z-A' },
+  ]
+};
+
+const TemplateCustomStyles = (args) => {
+  const { options, ...otherArgs } = args;
+  const attributes = generateAttributesFromArgs(otherArgs);
+  
+  const optionsToUse = options || defaultOptions;
+  const optionsString = JSON.stringify(optionsToUse).replace(/"/g, '&quot;');
+
+  return formatHtml(`
+    <div>
+      <style>
+        .custom-select {
+          --jump-select-border-color: #ddd;
+          --jump-select-border-color-hover: #00a651;
+          --jump-select-border-color-focus: #00a651;
+          --jump-select-option-selected-background: #00a651;
+          --jump-select-height: 48px;
+          --jump-select-border-radius: 8px;
+          --jump-select-font-size: 16px;
+        }
+      </style>
+      <jump-filter-select class="custom-select" ${attributes} options='${optionsString}'>
+      </jump-filter-select>
+    </div>
+  `);
+};
+
+export const CustomStyles = TemplateCustomStyles.bind({});
+CustomStyles.args = {
+  ...Default.args,
+  label: 'Select con stile personalizzato',
+};
+
+// Esempio con opzioni definite come elementi figli nel HTML
+export const WithChildOptions = args => {
+  const { options, ...otherArgs } = args;
+  const attributes = generateAttributesFromArgs(otherArgs);
+  
+  return formatHtml(`
+    <jump-filter-select ${attributes}>
+      <sl-option value="pizza">Pizza</sl-option>
+      <sl-option value="pasta">Pasta</sl-option>
+      <sl-option value="risotto">Risotto</sl-option>
+      <sl-option value="tiramisu">Tiramisù</sl-option>
+    </jump-filter-select>
+  `);
+};
+
+WithChildOptions.args = {
+  ...Default.args,
+  label: 'Scegli un piatto italiano',
+  placeholder: 'Seleziona un piatto',
+  options: null, // Non usiamo le opzioni da proprietà qui
+};
+
+// 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;');
+  
+  return formatHtml(`
+    <div>
+      <jump-filter-select id="programmable-select" ${attributes} options='${optionsString}'>
+      </jump-filter-select>
+      
+      <div style="margin-top: 20px;">
+        <button onclick="document.querySelector('#programmable-select').setValue('option3')">
+          Seleziona Opzione 3
+        </button>
+        <button onclick="document.querySelector('#programmable-select').setValue('option5')">
+          Seleziona Opzione 5
+        </button>
+        <button onclick="document.querySelector('#programmable-select').setValue('')">
+          Reset
+        </button>
+      </div>
+      
+      <div style="margin-top: 10px;">
+        <small>Clicca sui pulsanti per cambiare il valore programmaticamente</small>
+      </div>
+    </div>
+  `);
+};
+
+WithSetValueMethod.args = {
+  ...Default.args,
+  label: 'Select con metodo setValue',
+  value: 'option1',
+};