@jumpgroup/jump-design-system 0.3.64 → 0.3.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/jump-design-system.cjs.js +1 -1
- package/dist/cjs/jump-filter-select.cjs.entry.js +4 -1
- package/dist/cjs/jump-filter-select.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-filter-switch.cjs.entry.js +106 -4
- package/dist/cjs/jump-filter-switch.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-quantity.cjs.entry.js +12 -7
- package/dist/cjs/jump-quantity.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js +6 -11
- package/dist/collection/components/jump-card-ecommerce/jump-card-ecommerce.stories.js.map +1 -1
- package/dist/collection/components/jump-filter-select/jump-filter-select.js +18 -1
- package/dist/collection/components/jump-filter-select/jump-filter-select.js.map +1 -1
- package/dist/collection/components/jump-filter-switch/jump-filter-switch.js +235 -5
- package/dist/collection/components/jump-filter-switch/jump-filter-switch.js.map +1 -1
- package/dist/collection/components/jump-quantity/jump-quantity.js +19 -8
- package/dist/collection/components/jump-quantity/jump-quantity.js.map +1 -1
- package/dist/collection/components/jump-quantity/jump-quantity.stories.js +6 -1
- package/dist/collection/components/jump-quantity/jump-quantity.stories.js.map +1 -1
- package/dist/components/jump-filter-select.js +4 -1
- package/dist/components/jump-filter-select.js.map +1 -1
- package/dist/components/jump-filter-switch.js +115 -6
- package/dist/components/jump-filter-switch.js.map +1 -1
- package/dist/components/jump-quantity.js +13 -7
- package/dist/components/jump-quantity.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-filter-select.entry.js +4 -1
- package/dist/esm/jump-filter-select.entry.js.map +1 -1
- package/dist/esm/jump-filter-switch.entry.js +106 -4
- package/dist/esm/jump-filter-switch.entry.js.map +1 -1
- package/dist/esm/jump-quantity.entry.js +12 -7
- package/dist/esm/jump-quantity.entry.js.map +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js +1 -1
- package/dist/jump-design-system/jump-design-system.esm.js.map +1 -1
- package/dist/jump-design-system/p-3c1076e0.entry.js +2 -0
- package/dist/jump-design-system/p-3c1076e0.entry.js.map +1 -0
- package/dist/jump-design-system/{p-35633b03.entry.js → p-469ccf77.entry.js} +2 -2
- package/dist/jump-design-system/p-469ccf77.entry.js.map +1 -0
- package/dist/jump-design-system/{p-53bf2958.entry.js → p-79c78037.entry.js} +4 -4
- package/dist/jump-design-system/{p-53bf2958.entry.js.map → p-79c78037.entry.js.map} +1 -1
- package/dist/jump-design-system-elements.json +4 -0
- package/dist/types/components/jump-filter-select/jump-filter-select.d.ts +1 -0
- package/dist/types/components/jump-filter-switch/jump-filter-switch.d.ts +34 -0
- package/dist/types/components/jump-quantity/jump-quantity.d.ts +1 -0
- package/dist/types/components/jump-quantity/jump-quantity.stories.d.ts +5 -0
- package/dist/types/components.d.ts +34 -0
- package/package.json +1 -1
- package/dist/jump-design-system/p-172a50cb.entry.js +0 -2
- package/dist/jump-design-system/p-172a50cb.entry.js.map +0 -1
- package/dist/jump-design-system/p-35633b03.entry.js.map +0 -1
|
@@ -1 +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;
|
|
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 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"]}
|
|
@@ -8,11 +8,38 @@ export class JumpFilterSwitch {
|
|
|
8
8
|
constructor() {
|
|
9
9
|
this.value = undefined;
|
|
10
10
|
this.label = undefined;
|
|
11
|
+
this.name = 'switch-filter';
|
|
11
12
|
this.checked = false;
|
|
12
13
|
this.disabled = false;
|
|
14
|
+
this.values = [];
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* Watch sulla proprietà checked per reagire ai cambiamenti esterni
|
|
18
|
+
*/
|
|
19
|
+
checkedChanged(newValue, oldValue) {
|
|
20
|
+
if (newValue !== oldValue) {
|
|
21
|
+
// Aggiorna l'elemento sl-switch
|
|
22
|
+
if (this.el) {
|
|
23
|
+
this.el.checked = newValue;
|
|
24
|
+
}
|
|
25
|
+
// Aggiorna i valori
|
|
26
|
+
this.updateValues();
|
|
27
|
+
}
|
|
13
28
|
}
|
|
14
29
|
componentDidLoad() {
|
|
15
30
|
this.listenSLChange();
|
|
31
|
+
// Inizializza i valori in base allo stato del checkbox
|
|
32
|
+
this.updateValues();
|
|
33
|
+
// Se è stato passato un valore di checked, applica lo stato all'elemento sl-switch
|
|
34
|
+
if (this.el && this.checked) {
|
|
35
|
+
this.el.checked = this.checked;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
/**
|
|
39
|
+
* Aggiorna l'array dei valori in base allo stato del checkbox
|
|
40
|
+
*/
|
|
41
|
+
updateValues() {
|
|
42
|
+
this.values = this.checked && this.value ? [this.value] : [];
|
|
16
43
|
}
|
|
17
44
|
/**
|
|
18
45
|
* Ascolta gli eventi di cambio stato dal switch Shoelace
|
|
@@ -25,13 +52,69 @@ export class JumpFilterSwitch {
|
|
|
25
52
|
return;
|
|
26
53
|
}
|
|
27
54
|
this.checked = !this.checked;
|
|
28
|
-
|
|
55
|
+
this.updateValues();
|
|
56
|
+
// Evento specifico per il componente switch
|
|
57
|
+
const switchEventData = {
|
|
29
58
|
value: this.value,
|
|
30
|
-
checked: this.checked
|
|
59
|
+
checked: this.checked
|
|
31
60
|
};
|
|
32
|
-
this.toggleCheckbox.emit(
|
|
61
|
+
this.toggleCheckbox.emit(switchEventData);
|
|
62
|
+
// Evento standard per il sistema di filtri
|
|
63
|
+
const filterEventData = {
|
|
64
|
+
name: this.name,
|
|
65
|
+
values: this.values,
|
|
66
|
+
checked: this.checked
|
|
67
|
+
};
|
|
68
|
+
this.toggleCheckboxFilterChange.emit(filterEventData);
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
/**
|
|
73
|
+
* Metodo pubblico per impostare programmaticamente lo stato del switch
|
|
74
|
+
* @param checked - Il nuovo stato del switch (true = acceso, false = spento)
|
|
75
|
+
* @param emitEvent - Se emettere eventi di cambio stato (default: true)
|
|
76
|
+
* @returns {Promise<boolean>} Il nuovo stato del switch
|
|
77
|
+
*/
|
|
78
|
+
async setValue(checked, emitEvent = true) {
|
|
79
|
+
// Se il component è disabilitato, non fare nulla
|
|
80
|
+
if (this.disabled) {
|
|
81
|
+
return this.checked;
|
|
82
|
+
}
|
|
83
|
+
// Salva il valore precedente per l'evento
|
|
84
|
+
const oldValue = this.checked;
|
|
85
|
+
// Imposta il nuovo valore
|
|
86
|
+
this.checked = checked;
|
|
87
|
+
// Aggiorna l'elemento sl-switch interno
|
|
88
|
+
if (this.el) {
|
|
89
|
+
this.el.checked = checked;
|
|
90
|
+
}
|
|
91
|
+
// Aggiorna l'array dei valori
|
|
92
|
+
this.updateValues();
|
|
93
|
+
// Emetti eventi se richiesto
|
|
94
|
+
if (emitEvent && oldValue !== checked) {
|
|
95
|
+
// Evento specifico per il componente switch
|
|
96
|
+
const switchEventData = {
|
|
97
|
+
value: this.value,
|
|
98
|
+
checked: this.checked,
|
|
99
|
+
programmatic: true
|
|
100
|
+
};
|
|
101
|
+
this.toggleCheckbox.emit(switchEventData);
|
|
102
|
+
// Evento standard per il sistema di filtri
|
|
103
|
+
const filterEventData = {
|
|
104
|
+
name: this.name,
|
|
105
|
+
values: this.values,
|
|
106
|
+
checked: this.checked,
|
|
107
|
+
programmatic: true
|
|
108
|
+
};
|
|
109
|
+
this.toggleCheckboxFilterChange.emit(filterEventData);
|
|
110
|
+
// Evento specifico per cambio valore programmato
|
|
111
|
+
this.valueChange.emit({
|
|
112
|
+
value: this.value,
|
|
113
|
+
checked: this.checked,
|
|
114
|
+
oldChecked: oldValue
|
|
33
115
|
});
|
|
34
116
|
}
|
|
117
|
+
return this.checked;
|
|
35
118
|
}
|
|
36
119
|
/**
|
|
37
120
|
* Metodo pubblico per verificare lo stato corrente del switch
|
|
@@ -40,8 +123,22 @@ export class JumpFilterSwitch {
|
|
|
40
123
|
async isChecked() {
|
|
41
124
|
return this.checked;
|
|
42
125
|
}
|
|
126
|
+
/**
|
|
127
|
+
* Metodo pubblico per ottenere i valori selezionati
|
|
128
|
+
* @returns {string[]} Array contenente il valore se selezionato, altrimenti array vuoto
|
|
129
|
+
*/
|
|
130
|
+
async getValues() {
|
|
131
|
+
return this.values;
|
|
132
|
+
}
|
|
133
|
+
/**
|
|
134
|
+
* Metodo pubblico per ottenere il nome del filtro
|
|
135
|
+
* @returns {string} Il nome del filtro
|
|
136
|
+
*/
|
|
137
|
+
async getName() {
|
|
138
|
+
return this.name;
|
|
139
|
+
}
|
|
43
140
|
render() {
|
|
44
|
-
return (h(Host, { key: '
|
|
141
|
+
return (h(Host, { key: '5aaeb4633e6b9392d4adc3c461d1842ec3a90173', ref: (host) => (this.host = host) }, this.value && this.label && (h("sl-switch", { key: 'd261e71b29afd307de4941f8e81e71d47246e036', value: this.value, ref: (el) => (this.el = el), checked: this.checked, disabled: this.disabled }, this.label))));
|
|
45
142
|
}
|
|
46
143
|
static get is() { return "jump-filter-switch"; }
|
|
47
144
|
static get encapsulation() { return "shadow"; }
|
|
@@ -91,9 +188,27 @@ export class JumpFilterSwitch {
|
|
|
91
188
|
"attribute": "label",
|
|
92
189
|
"reflect": false
|
|
93
190
|
},
|
|
191
|
+
"name": {
|
|
192
|
+
"type": "string",
|
|
193
|
+
"mutable": false,
|
|
194
|
+
"complexType": {
|
|
195
|
+
"original": "string",
|
|
196
|
+
"resolved": "string",
|
|
197
|
+
"references": {}
|
|
198
|
+
},
|
|
199
|
+
"required": false,
|
|
200
|
+
"optional": false,
|
|
201
|
+
"docs": {
|
|
202
|
+
"tags": [],
|
|
203
|
+
"text": "Nome identificativo del filtro, utilizzato negli eventi"
|
|
204
|
+
},
|
|
205
|
+
"attribute": "name",
|
|
206
|
+
"reflect": false,
|
|
207
|
+
"defaultValue": "'switch-filter'"
|
|
208
|
+
},
|
|
94
209
|
"checked": {
|
|
95
210
|
"type": "boolean",
|
|
96
|
-
"mutable":
|
|
211
|
+
"mutable": true,
|
|
97
212
|
"complexType": {
|
|
98
213
|
"original": "boolean",
|
|
99
214
|
"resolved": "boolean",
|
|
@@ -129,6 +244,11 @@ export class JumpFilterSwitch {
|
|
|
129
244
|
}
|
|
130
245
|
};
|
|
131
246
|
}
|
|
247
|
+
static get states() {
|
|
248
|
+
return {
|
|
249
|
+
"values": {}
|
|
250
|
+
};
|
|
251
|
+
}
|
|
132
252
|
static get events() {
|
|
133
253
|
return [{
|
|
134
254
|
"method": "toggleCheckbox",
|
|
@@ -145,10 +265,74 @@ export class JumpFilterSwitch {
|
|
|
145
265
|
"resolved": "any",
|
|
146
266
|
"references": {}
|
|
147
267
|
}
|
|
268
|
+
}, {
|
|
269
|
+
"method": "toggleCheckboxFilterChange",
|
|
270
|
+
"name": "jump-filterchange",
|
|
271
|
+
"bubbles": true,
|
|
272
|
+
"cancelable": true,
|
|
273
|
+
"composed": true,
|
|
274
|
+
"docs": {
|
|
275
|
+
"tags": [],
|
|
276
|
+
"text": ""
|
|
277
|
+
},
|
|
278
|
+
"complexType": {
|
|
279
|
+
"original": "any",
|
|
280
|
+
"resolved": "any",
|
|
281
|
+
"references": {}
|
|
282
|
+
}
|
|
283
|
+
}, {
|
|
284
|
+
"method": "valueChange",
|
|
285
|
+
"name": "jump-switch-value-change",
|
|
286
|
+
"bubbles": true,
|
|
287
|
+
"cancelable": true,
|
|
288
|
+
"composed": true,
|
|
289
|
+
"docs": {
|
|
290
|
+
"tags": [],
|
|
291
|
+
"text": "Evento emesso quando il valore viene cambiato programmaticamente"
|
|
292
|
+
},
|
|
293
|
+
"complexType": {
|
|
294
|
+
"original": "any",
|
|
295
|
+
"resolved": "any",
|
|
296
|
+
"references": {}
|
|
297
|
+
}
|
|
148
298
|
}];
|
|
149
299
|
}
|
|
150
300
|
static get methods() {
|
|
151
301
|
return {
|
|
302
|
+
"setValue": {
|
|
303
|
+
"complexType": {
|
|
304
|
+
"signature": "(checked: boolean, emitEvent?: boolean) => Promise<boolean>",
|
|
305
|
+
"parameters": [{
|
|
306
|
+
"name": "checked",
|
|
307
|
+
"type": "boolean",
|
|
308
|
+
"docs": "- Il nuovo stato del switch (true = acceso, false = spento)"
|
|
309
|
+
}, {
|
|
310
|
+
"name": "emitEvent",
|
|
311
|
+
"type": "boolean",
|
|
312
|
+
"docs": "- Se emettere eventi di cambio stato (default: true)"
|
|
313
|
+
}],
|
|
314
|
+
"references": {
|
|
315
|
+
"Promise": {
|
|
316
|
+
"location": "global",
|
|
317
|
+
"id": "global::Promise"
|
|
318
|
+
}
|
|
319
|
+
},
|
|
320
|
+
"return": "Promise<boolean>"
|
|
321
|
+
},
|
|
322
|
+
"docs": {
|
|
323
|
+
"text": "Metodo pubblico per impostare programmaticamente lo stato del switch",
|
|
324
|
+
"tags": [{
|
|
325
|
+
"name": "param",
|
|
326
|
+
"text": "checked - Il nuovo stato del switch (true = acceso, false = spento)"
|
|
327
|
+
}, {
|
|
328
|
+
"name": "param",
|
|
329
|
+
"text": "emitEvent - Se emettere eventi di cambio stato (default: true)"
|
|
330
|
+
}, {
|
|
331
|
+
"name": "returns",
|
|
332
|
+
"text": "Il nuovo stato del switch"
|
|
333
|
+
}]
|
|
334
|
+
}
|
|
335
|
+
},
|
|
152
336
|
"isChecked": {
|
|
153
337
|
"complexType": {
|
|
154
338
|
"signature": "() => Promise<boolean>",
|
|
@@ -168,8 +352,54 @@ export class JumpFilterSwitch {
|
|
|
168
352
|
"text": "Lo stato corrente del switch (true = acceso, false = spento)"
|
|
169
353
|
}]
|
|
170
354
|
}
|
|
355
|
+
},
|
|
356
|
+
"getValues": {
|
|
357
|
+
"complexType": {
|
|
358
|
+
"signature": "() => Promise<string[]>",
|
|
359
|
+
"parameters": [],
|
|
360
|
+
"references": {
|
|
361
|
+
"Promise": {
|
|
362
|
+
"location": "global",
|
|
363
|
+
"id": "global::Promise"
|
|
364
|
+
}
|
|
365
|
+
},
|
|
366
|
+
"return": "Promise<string[]>"
|
|
367
|
+
},
|
|
368
|
+
"docs": {
|
|
369
|
+
"text": "Metodo pubblico per ottenere i valori selezionati",
|
|
370
|
+
"tags": [{
|
|
371
|
+
"name": "returns",
|
|
372
|
+
"text": "Array contenente il valore se selezionato, altrimenti array vuoto"
|
|
373
|
+
}]
|
|
374
|
+
}
|
|
375
|
+
},
|
|
376
|
+
"getName": {
|
|
377
|
+
"complexType": {
|
|
378
|
+
"signature": "() => Promise<string>",
|
|
379
|
+
"parameters": [],
|
|
380
|
+
"references": {
|
|
381
|
+
"Promise": {
|
|
382
|
+
"location": "global",
|
|
383
|
+
"id": "global::Promise"
|
|
384
|
+
}
|
|
385
|
+
},
|
|
386
|
+
"return": "Promise<string>"
|
|
387
|
+
},
|
|
388
|
+
"docs": {
|
|
389
|
+
"text": "Metodo pubblico per ottenere il nome del filtro",
|
|
390
|
+
"tags": [{
|
|
391
|
+
"name": "returns",
|
|
392
|
+
"text": "Il nome del filtro"
|
|
393
|
+
}]
|
|
394
|
+
}
|
|
171
395
|
}
|
|
172
396
|
};
|
|
173
397
|
}
|
|
398
|
+
static get watchers() {
|
|
399
|
+
return [{
|
|
400
|
+
"propName": "checked",
|
|
401
|
+
"methodName": "checkedChanged"
|
|
402
|
+
}];
|
|
403
|
+
}
|
|
174
404
|
}
|
|
175
405
|
//# sourceMappingURL=jump-filter-switch.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-filter-switch.js","sourceRoot":"","sources":["../../../src/components/jump-filter-switch/jump-filter-switch.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"jump-filter-switch.js","sourceRoot":"","sources":["../../../src/components/jump-filter-switch/jump-filter-switch.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Event, EventEmitter, Watch, Method, State } from '@stencil/core';\nimport '@shoelace-style/shoelace/dist/components/switch/switch.js';\n\n/**\n * Componente switch per filtri con supporto per label e stato\n * @slot - Contenuto opzionale da mostrare accanto al switch (alternativo alla label)\n */\n@Component({\n tag: 'jump-filter-switch',\n styleUrl: 'jump-filter-switch.scss',\n shadow: true,\n})\nexport class JumpFilterSwitch {\n /** Il valore associato al switch */\n @Prop() value: string;\n\n /** La label da mostrare accanto al switch */\n @Prop() label: string;\n\n /** Nome identificativo del filtro, utilizzato negli eventi */\n @Prop() name: string = 'switch-filter';\n\n /** Stato del switch (acceso/spento) */\n @Prop({ reflect: true, mutable: true }) checked: boolean = false;\n\n /** Stato del switch (disabilitato) */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Stato interno per tenere traccia dei valori selezionati */\n @State() values: string[] = [];\n\n /**\n * Watch sulla proprietà checked per reagire ai cambiamenti esterni\n */\n @Watch('checked')\n checkedChanged(newValue: boolean, oldValue: boolean) {\n if (newValue !== oldValue) {\n // Aggiorna l'elemento sl-switch\n if (this.el) {\n this.el.checked = newValue;\n }\n\n // Aggiorna i valori\n this.updateValues();\n }\n }\n\n /** Riferimento all'elemento host */\n host: HTMLElement;\n\n /** Riferimento all'elemento sl-switch interno */\n el: any; // Usiamo any per evitare problemi di tipo con le proprietà specifiche di sl-switch\n\n componentDidLoad() {\n this.listenSLChange();\n // Inizializza i valori in base allo stato del checkbox\n this.updateValues();\n\n // Se è stato passato un valore di checked, applica lo stato all'elemento sl-switch\n if (this.el && this.checked) {\n this.el.checked = this.checked;\n }\n }\n\n /**\n * Aggiorna l'array dei valori in base allo stato del checkbox\n */\n private updateValues() {\n this.values = this.checked && this.value ? [this.value] : [];\n }\n\n /**\n * Ascolta gli eventi di cambio stato dal switch Shoelace\n */\n listenSLChange() {\n if (this.host) {\n this.host.addEventListener('sl-change', () => {\n // Ignora l'evento se lo switch è disabilitato\n if (this.disabled) {\n return;\n }\n\n this.checked = !this.checked;\n this.updateValues();\n\n // Evento specifico per il componente switch\n const switchEventData = {\n value: this.value,\n checked: this.checked\n };\n this.toggleCheckbox.emit(switchEventData);\n\n // Evento standard per il sistema di filtri\n const filterEventData = {\n name: this.name,\n values: this.values,\n checked: this.checked\n };\n this.toggleCheckboxFilterChange.emit(filterEventData);\n });\n }\n }\n\n /**\n * Metodo pubblico per impostare programmaticamente lo stato del switch\n * @param checked - Il nuovo stato del switch (true = acceso, false = spento)\n * @param emitEvent - Se emettere eventi di cambio stato (default: true)\n * @returns {Promise<boolean>} Il nuovo stato del switch\n */\n @Method()\n async setValue(checked: boolean, emitEvent: boolean = true): Promise<boolean> {\n // Se il component è disabilitato, non fare nulla\n if (this.disabled) {\n return this.checked;\n }\n\n // Salva il valore precedente per l'evento\n const oldValue = this.checked;\n\n // Imposta il nuovo valore\n this.checked = checked;\n\n // Aggiorna l'elemento sl-switch interno\n if (this.el) {\n this.el.checked = checked;\n }\n\n // Aggiorna l'array dei valori\n this.updateValues();\n\n // Emetti eventi se richiesto\n if (emitEvent && oldValue !== checked) {\n // Evento specifico per il componente switch\n const switchEventData = {\n value: this.value,\n checked: this.checked,\n programmatic: true\n };\n this.toggleCheckbox.emit(switchEventData);\n\n // Evento standard per il sistema di filtri\n const filterEventData = {\n name: this.name,\n values: this.values,\n checked: this.checked,\n programmatic: true\n };\n this.toggleCheckboxFilterChange.emit(filterEventData);\n\n // Evento specifico per cambio valore programmato\n this.valueChange.emit({\n value: this.value,\n checked: this.checked,\n oldChecked: oldValue\n });\n }\n\n return this.checked;\n }\n\n /**\n * Evento emesso quando cambia lo stato del switch\n */\n @Event({ eventName: 'jump-switch-change' }) toggleCheckbox: EventEmitter;\n @Event({ eventName: 'jump-filterchange' }) toggleCheckboxFilterChange: EventEmitter;\n /**\n * Evento emesso quando il valore viene cambiato programmaticamente\n */\n @Event({ eventName: 'jump-switch-value-change' }) valueChange: EventEmitter;\n\n /**\n * Metodo pubblico per verificare lo stato corrente del switch\n * @returns {boolean} Lo stato corrente del switch (true = acceso, false = spento)\n */\n @Method()\n async isChecked() {\n return this.checked;\n }\n\n /**\n * Metodo pubblico per ottenere i valori selezionati\n * @returns {string[]} Array contenente il valore se selezionato, altrimenti 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 {string} Il nome del filtro\n */\n @Method()\n async getName() {\n return this.name;\n }\n\n render() {\n return (\n <Host ref={(host: HTMLElement) => (this.host = host)}>\n {this.value && this.label && (\n <sl-switch\n value={this.value}\n ref={(el: any) => (this.el = el)}\n checked={this.checked}\n disabled={this.disabled}\n >\n {this.label}\n </sl-switch>\n )}\n </Host>\n );\n }\n}\n"]}
|
|
@@ -8,13 +8,17 @@ export class JumpQuantity {
|
|
|
8
8
|
this.type = 'buttons';
|
|
9
9
|
this.variant = 'vertical';
|
|
10
10
|
this.showButtons = true;
|
|
11
|
-
this.value =
|
|
11
|
+
this.value = this.min;
|
|
12
|
+
this.internalValue = undefined;
|
|
12
13
|
}
|
|
13
14
|
onValueChange(newValue, oldValue) {
|
|
14
15
|
this.change.emit({
|
|
15
16
|
value: newValue,
|
|
16
17
|
oldValue: oldValue,
|
|
17
18
|
});
|
|
19
|
+
this.internalValue = newValue !== null && newValue !== void 0 ? newValue : this.min;
|
|
20
|
+
this.change.emit({ value: this.internalValue, oldValue });
|
|
21
|
+
this.internals.setFormValue(this.internalValue.toString());
|
|
18
22
|
this.internals.setFormValue(newValue);
|
|
19
23
|
}
|
|
20
24
|
/**
|
|
@@ -33,8 +37,9 @@ export class JumpQuantity {
|
|
|
33
37
|
this.value = this.min;
|
|
34
38
|
}
|
|
35
39
|
componentWillLoad() {
|
|
36
|
-
|
|
37
|
-
this.
|
|
40
|
+
var _a;
|
|
41
|
+
this.internalValue = (_a = this.value) !== null && _a !== void 0 ? _a : this.min;
|
|
42
|
+
this.internals.setFormValue(this.internalValue.toString());
|
|
38
43
|
}
|
|
39
44
|
formResetCallback() {
|
|
40
45
|
this.internals.setValidity({});
|
|
@@ -59,11 +64,11 @@ export class JumpQuantity {
|
|
|
59
64
|
}
|
|
60
65
|
}
|
|
61
66
|
render() {
|
|
62
|
-
return (h(Host, { key: '
|
|
63
|
-
h("jump-button", { key: '
|
|
67
|
+
return (h(Host, { key: '16fa43e6148a64681d5cf1c199e890c589375dae', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: 'af99311b2fde98f695d7fe6e30cb61f3ee087d89' }, this.label), h("div", { key: 'e19baf0b29bee7b4aece1cc42c60ea88f5a9e9df', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
|
|
68
|
+
h("jump-button", { key: '7b397b23b21df5447b66791a60f7782c471b5bde', onClick: () => this.value = this.value - this.step, disabled: this.value <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '2a76ed1efa4ce83386c0953660b8a61e1e6e50de', library: "lucide", name: "minus", size: "small" })), h("input", { key: '096583968aeb0dec8811983bbd4dec3d30319d77', ref: (el) => {
|
|
64
69
|
this.inputEl = el;
|
|
65
|
-
}, type: 'number', value: this.
|
|
66
|
-
h("jump-button", { key: '
|
|
70
|
+
}, 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 &&
|
|
71
|
+
h("jump-button", { key: 'ea55769654b304cf23ec5863592ed1c6419e9ccd', onClick: () => this.value = this.value + this.step, disabled: this.value >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: 'd23d4b89d44d12e6f099e3034bb952bc1c06bb30', library: "lucide", name: "plus", size: "small" })))));
|
|
67
72
|
}
|
|
68
73
|
static get is() { return "jump-quantity"; }
|
|
69
74
|
static get encapsulation() { return "shadow"; }
|
|
@@ -220,10 +225,16 @@ export class JumpQuantity {
|
|
|
220
225
|
"text": ""
|
|
221
226
|
},
|
|
222
227
|
"attribute": "value",
|
|
223
|
-
"reflect": false
|
|
228
|
+
"reflect": false,
|
|
229
|
+
"defaultValue": "this.min"
|
|
224
230
|
}
|
|
225
231
|
};
|
|
226
232
|
}
|
|
233
|
+
static get states() {
|
|
234
|
+
return {
|
|
235
|
+
"internalValue": {}
|
|
236
|
+
};
|
|
237
|
+
}
|
|
227
238
|
static get events() {
|
|
228
239
|
return [{
|
|
229
240
|
"method": "change",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,eAAe,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"jump-quantity.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, AttachInternals, Watch, Method, Prop, h, Event, Element, State } from '@stencil/core';\n\n@Component({\n tag: 'jump-quantity',\n styleUrl: 'jump-quantity.scss',\n shadow: true,\n formAssociated: true,\n})\nexport class JumpQuantity {\n\n @AttachInternals() internals: ElementInternals;\n @Element() el;\n\n @Prop() min: number = 1;\n @Prop() max: number;\n @Prop() step: number = 1;\n @Prop() label: string = '';\n @Prop() type: 'buttons' | 'dropdown' | 'input' = 'buttons';\n @Prop() variant: 'vertical' | 'horizontal' = 'vertical';\n @Prop() showButtons: boolean = true;\n @Prop() value: number = this.min;\n\n @State() internalValue: number;\n\n @Event({ eventName: 'jump-change' }) change;\n\n inputEl: HTMLInputElement;\n\n @Watch('value')\n onValueChange(newValue, oldValue) {\n this.change.emit({\n value: newValue,\n oldValue: oldValue,\n });\n this.internalValue = newValue ?? this.min;\n this.change.emit({ value: this.internalValue, oldValue });\n this.internals.setFormValue(this.internalValue.toString());\n this.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.value;\n }\n\n /**\n * Set the current value\n */\n @Method()\n async setMax(value: number) {\n this.max = value;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n }\n\n componentWillLoad() {\n this.internalValue = this.value ?? this.min;\n this.internals.setFormValue(this.internalValue.toString());\n }\n\n formResetCallback() {\n this.internals.setValidity({});\n this.internals.setFormValue('');\n }\n\n handleChange(event) {\n let value = parseInt(event.target.value);\n if(value < this.min){\n this.value = this.min;\n } else if(value > this.max){\n this.value = this.max;\n } else {\n this.value = event.target.value;\n }\n }\n\n //avoid user can change the value below the min\n handleBlur(event) {\n if (event.target.value < this.min) {\n this.value = this.min;\n }\n }\n\n render() {\n return (\n <Host value={this.value} data-variant={this.variant} data-hasbuttons={this.showButtons}>\n {this.label && <label>{this.label}</label>}\n <div class={`jump-quantity__InnerWrapper`}>\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value - this.step} disabled={this.value <= this.min}\n variant='neutral' size='custom'>\n <jump-icon library=\"lucide\" name=\"minus\" size=\"small\"></jump-icon>\n </jump-button>}\n <input ref={(el) => {\n this.inputEl = el;\n }}\n type='number'\n value={this.internalValue}\n onInput={(event) => this.handleChange(event)}\n min={this.min}\n max={this.max}\n step={this.step}\n aria-hasbuttons={this.showButtons}\n />\n {this.showButtons &&\n <jump-button onClick={() => this.value = this.value + this.step} disabled={this.value >= this.max}\n variant='neutral' size='custom'>\n <jump-icon library=\"lucide\" name=\"plus\" size=\"small\"></jump-icon>\n </jump-button>}\n </div>\n </Host>\n );\n }\n}\n"]}
|
|
@@ -18,6 +18,11 @@ export default {
|
|
|
18
18
|
control: 'number',
|
|
19
19
|
description: 'Il valore dello step',
|
|
20
20
|
},
|
|
21
|
+
value: {
|
|
22
|
+
name: 'value',
|
|
23
|
+
control: 'number',
|
|
24
|
+
description: 'Il valore attuale',
|
|
25
|
+
},
|
|
21
26
|
label: {
|
|
22
27
|
name: 'label',
|
|
23
28
|
control: 'text',
|
|
@@ -78,7 +83,7 @@ const TemplateFormExample = (args, data) => {
|
|
|
78
83
|
const attributes = generateAttributesFromArgs(args);
|
|
79
84
|
return formatHtml(`
|
|
80
85
|
<form id="form_test">
|
|
81
|
-
<jump-quantity max="10" ${attributes}></jump-quantity>
|
|
86
|
+
<jump-quantity value="4" max="10" ${attributes}></jump-quantity>
|
|
82
87
|
<input type="text" id="prova" value="ciao" />
|
|
83
88
|
<input type="submit" value="invia" />
|
|
84
89
|
</form>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"jump-quantity.stories.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,IAAI,EAAE,KAAK;YACX,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,kBAAkB;SAChC;QACD,GAAG,EAAE;YACH,IAAI,EAAE,KAAK;YACX,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mBAAmB;SACjC;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,sBAAsB;SACpC;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oBAAoB;SAClC;QACD,WAAW,EAAE;YACX,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,mBAAmB;SACjC;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC;YACnC,WAAW,EAAE,2BAA2B;SACzC;QACD,UAAU;QACV,wBAAwB;QACxB,uBAAuB;QACvB,yCAAyC;QACzC,oEAAoE;QACpE,KAAK;QACL,WAAW;QACX,+BAA+B;QAC/B,qBAAqB;QACrB,8EAA8E;QAC9E,KAAK;KACN;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,kBAAkB,UAAU,mBAAmB,CAAC;AACzD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,mBAAmB;AACnB,4CAA4C;AAC5C,uBAAuB;AACvB,KAAK;AAIL,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACzC,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,kBAAkB,UAAU;;;;;kDAKE,EAAE;;;;;YAKxC,CAAC,CAAC;AACd,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAGxD,+DAA+D;AAC/D,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACzC,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;;
|
|
1
|
+
{"version":3,"file":"jump-quantity.stories.js","sourceRoot":"","sources":["../../../src/components/jump-quantity/jump-quantity.stories.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,UAAU,EAAC,MAAM,mBAAmB,CAAC;AAE1E,eAAe;IACb,KAAK,EAAE,qBAAqB;IAC5B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,GAAG,EAAE;YACH,IAAI,EAAE,KAAK;YACX,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,kBAAkB;SAChC;QACD,GAAG,EAAE;YACH,IAAI,EAAE,KAAK;YACX,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mBAAmB;SACjC;QACD,IAAI,EAAE;YACJ,IAAI,EAAE,MAAM;YACZ,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,sBAAsB;SACpC;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,QAAQ;YACjB,WAAW,EAAE,mBAAmB;SACjC;QACD,KAAK,EAAE;YACL,IAAI,EAAE,OAAO;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,oBAAoB;SAClC;QACD,WAAW,EAAE;YACX,IAAI,EAAE,aAAa;YACnB,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,mBAAmB;SACjC;QACD,OAAO,EAAE;YACP,IAAI,EAAE,SAAS;YACf,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,UAAU,EAAE,YAAY,CAAC;YACnC,WAAW,EAAE,2BAA2B;SACzC;QACD,UAAU;QACV,wBAAwB;QACxB,uBAAuB;QACvB,yCAAyC;QACzC,oEAAoE;QACpE,KAAK;QACL,WAAW;QACX,+BAA+B;QAC/B,qBAAqB;QACrB,8EAA8E;QAC9E,KAAK;KACN;CACF,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,EAAE;IACxB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,kBAAkB,UAAU,mBAAmB,CAAC;AACzD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AACzC,mBAAmB;AACnB,4CAA4C;AAC5C,uBAAuB;AACvB,KAAK;AAIL,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACzC,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC,kBAAkB,UAAU;;;;;kDAKE,EAAE;;;;;YAKxC,CAAC,CAAC;AACd,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;AAGxD,+DAA+D;AAC/D,MAAM,mBAAmB,GAAG,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE;IACzC,IAAI,EAAE,GAAG,IAAI,CAAC,EAAE,CAAC;IACjB,MAAM,UAAU,GAAG,0BAA0B,CAAC,IAAI,CAAC,CAAC;IACpD,OAAO,UAAU,CAAC;;sCAEkB,UAAU;;;;;;;;kDAQE,EAAE;;;;;;;;;;;YAWxC,CAAC,CAAC;AACd,CAAC,CAAA;AACD,MAAM,CAAC,MAAM,WAAW,GAAG,mBAAmB,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC","sourcesContent":["import { generateAttributesFromArgs, formatHtml} from '../../utils/utils';\n\nexport default {\n title: 'Components/Quantity',\n tags: ['autodocs'],\n argTypes: {\n min: {\n name: 'min',\n control: 'number',\n description: 'Il valore minimo',\n },\n max: {\n name: 'max',\n control: 'number',\n description: 'Il valore massimo',\n },\n step: {\n name: 'step',\n control: 'number',\n description: 'Il valore dello step',\n },\n value: {\n name: 'value',\n control: 'number',\n description: 'Il valore attuale',\n },\n label: {\n name: 'label',\n control: 'text',\n description: 'Il testo del label',\n },\n showButtons: {\n name: 'showButtons',\n control: 'boolean',\n description: 'Mostra i pulsanti',\n },\n variant: {\n name: 'variant',\n control: 'select',\n options: ['vertical', 'horizontal'],\n description: 'La direzione dei pulsanti',\n },\n // name: {\n // name: 'Nome Icona',\n // control: 'select',\n // options: Object.keys(feather.icons),\n // description: \"Seleziona il nome dell'icona dal menu a tendina\",\n // },\n // class: {\n // name: 'Classi aggiuntive',\n // control: 'text',\n // description: \"Aggiungi classi aggiuntive all'icona (separate da spazio)\",\n // },\n },\n};\n\nconst Template = (args) =>{\n const attributes = generateAttributesFromArgs(args);\n return `<jump-quantity ${attributes}></jump-quantity>`;\n}\n\nexport const Default = Template.bind({});\n// Default.args = {\n// // name: Object.keys(feather.icons)[0],\n// // class: 'small',\n// };\n\n\n\nconst TemplateCheckValues = (args, data) =>{\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`<jump-quantity ${attributes}></jump-quantity>\n <div>Il valore corrente è: <span class=\"input-value\">loading..<span></div>\n <script>\n (function() {\n let container;\n container = document.querySelector('#story--${id}');\n container.querySelector('jump-quantity').addEventListener('jump-change', (ev) => {\n container.querySelector('.input-value').innerText = ev.detail.value;\n });\n})();\n </script>`);\n}\nexport const CheckValues = TemplateCheckValues.bind({});\n\n\n//TODO: https://codepen.io/olawanlejoel/pen/oNpmGpv FormEntries\nconst TemplateFormExample = (args, data) =>{\n let id = data.id;\n const attributes = generateAttributesFromArgs(args);\n return formatHtml(`\n <form id=\"form_test\">\n <jump-quantity value=\"4\" max=\"10\" ${attributes}></jump-quantity>\n <input type=\"text\" id=\"prova\" value=\"ciao\" />\n <input type=\"submit\" value=\"invia\" />\n </form>\n <div>Il valore corrente è: <span class=\"input-value\">loading..<span></div>\n <script>\n (function() {\n let container;\n container = document.querySelector('#story--${id}');\n container.querySelector('form').addEventListener('submit', (ev) => {\n ev.preventDefault();\n ev.stopPropagation();\n\n const formData = new FormData(ev.target);\n\n console.log(ev, formData);\n container.querySelector('.input-value').innerText = ev.detail.value;\n });\n})();\n </script>`);\n}\nexport const FormExample = TemplateFormExample.bind({});\n"]}
|
|
@@ -4117,6 +4117,7 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
|
|
|
4117
4117
|
this.__registerHost();
|
|
4118
4118
|
this.__attachShadow();
|
|
4119
4119
|
this.selectionChange = createEvent(this, "jump-select-change", 7);
|
|
4120
|
+
this.selectionFilterChange = createEvent(this, "jump-filterchange", 7);
|
|
4120
4121
|
this.value = undefined;
|
|
4121
4122
|
this.placeholder = 'Seleziona un\'opzione';
|
|
4122
4123
|
this.label = undefined;
|
|
@@ -4171,6 +4172,7 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
|
|
|
4171
4172
|
selectedOption
|
|
4172
4173
|
};
|
|
4173
4174
|
this.selectionChange.emit(eventData);
|
|
4175
|
+
this.selectionFilterChange.emit(eventData);
|
|
4174
4176
|
});
|
|
4175
4177
|
}
|
|
4176
4178
|
}
|
|
@@ -4211,12 +4213,13 @@ const JumpFilterSelect$1 = /*@__PURE__*/ proxyCustomElement(class JumpFilterSele
|
|
|
4211
4213
|
programmatic: true // Flag per indicare che il cambio è avvenuto programmaticamente
|
|
4212
4214
|
};
|
|
4213
4215
|
this.selectionChange.emit(eventData);
|
|
4216
|
+
this.selectionFilterChange.emit(eventData);
|
|
4214
4217
|
}
|
|
4215
4218
|
return this.value;
|
|
4216
4219
|
}
|
|
4217
4220
|
render() {
|
|
4218
4221
|
const optionsArray = this.getOptionsArray();
|
|
4219
|
-
return (h(Host, { key: '
|
|
4222
|
+
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' }))));
|
|
4220
4223
|
}
|
|
4221
4224
|
get hostElement() { return this; }
|
|
4222
4225
|
static get style() { return JumpFilterSelectStyle0; }
|