@jumpgroup/jump-design-system 0.3.31 → 0.3.33
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-navbar.cjs.entry.js +45 -0
- package/dist/cjs/jump-navbar.cjs.entry.js.map +1 -0
- package/dist/cjs/jump-pagination-table.cjs.entry.js +3 -3
- package/dist/cjs/jump-pagination.cjs.entry.js +3 -3
- package/dist/cjs/jump-quantity.cjs.entry.js +19 -6
- package/dist/cjs/jump-quantity.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-tab-item.cjs.entry.js +3 -4
- package/dist/cjs/jump-tab-item.cjs.entry.js.map +1 -1
- package/dist/cjs/jump-tab-panel.cjs.entry.js +1 -1
- package/dist/cjs/jump-tab.cjs.entry.js +4 -2
- package/dist/cjs/jump-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/collection-manifest.json +1 -0
- package/dist/collection/components/jump-navbar/jump-navbar.css +13 -0
- package/dist/collection/components/jump-navbar/jump-navbar.js +260 -0
- package/dist/collection/components/jump-navbar/jump-navbar.js.map +1 -0
- package/dist/collection/components/jump-pagination/jump-pagination.js +3 -3
- package/dist/collection/components/jump-pagination-table/jump-pagination-table.js +3 -3
- package/dist/collection/components/jump-quantity/jump-quantity.js +24 -6
- package/dist/collection/components/jump-quantity/jump-quantity.js.map +1 -1
- package/dist/collection/components/jump-quantity/jump-quantity.stories.js +1 -1
- package/dist/collection/components/jump-quantity/jump-quantity.stories.js.map +1 -1
- package/dist/collection/components/jump-tab/jump-tab.css +28 -0
- package/dist/collection/components/jump-tab/jump-tab.js +39 -1
- package/dist/collection/components/jump-tab/jump-tab.js.map +1 -1
- package/dist/collection/components/jump-tab/jump-tab.stories.js +28 -5
- package/dist/collection/components/jump-tab/jump-tab.stories.js.map +1 -1
- package/dist/collection/components/jump-tab-item/jump-tab-item.css +5 -2
- package/dist/collection/components/jump-tab-item/jump-tab-item.js +2 -3
- package/dist/collection/components/jump-tab-item/jump-tab-item.js.map +1 -1
- package/dist/collection/components/jump-tab-panel/jump-tab-panel.js +1 -1
- package/dist/components/jump-navbar.d.ts +11 -0
- package/dist/components/jump-navbar.js +84 -0
- package/dist/components/jump-navbar.js.map +1 -0
- package/dist/components/jump-pagination-table.js +3 -3
- package/dist/components/jump-pagination.js +3 -3
- package/dist/components/jump-quantity.js +20 -6
- package/dist/components/jump-quantity.js.map +1 -1
- package/dist/components/jump-tab-item.js +3 -4
- package/dist/components/jump-tab-item.js.map +1 -1
- package/dist/components/jump-tab-panel.js +1 -1
- package/dist/components/jump-tab.js +6 -2
- package/dist/components/jump-tab.js.map +1 -1
- package/dist/esm/jump-design-system.js +1 -1
- package/dist/esm/jump-navbar.entry.js +41 -0
- package/dist/esm/jump-navbar.entry.js.map +1 -0
- package/dist/esm/jump-pagination-table.entry.js +3 -3
- package/dist/esm/jump-pagination.entry.js +3 -3
- package/dist/esm/jump-quantity.entry.js +19 -6
- package/dist/esm/jump-quantity.entry.js.map +1 -1
- package/dist/esm/jump-tab-item.entry.js +3 -4
- package/dist/esm/jump-tab-item.entry.js.map +1 -1
- package/dist/esm/jump-tab-panel.entry.js +1 -1
- package/dist/esm/jump-tab.entry.js +4 -2
- package/dist/esm/jump-tab.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-108990a7.entry.js +2 -0
- package/dist/jump-design-system/p-108990a7.entry.js.map +1 -0
- package/dist/jump-design-system/p-1a8f69e1.entry.js +2 -0
- package/dist/jump-design-system/p-1a8f69e1.entry.js.map +1 -0
- package/dist/jump-design-system/p-2c95396a.entry.js +2 -0
- package/dist/jump-design-system/{p-3094f68c.entry.js → p-80d94f0f.entry.js} +2 -2
- package/dist/jump-design-system/p-81fdf870.entry.js +2 -0
- package/dist/jump-design-system/p-81fdf870.entry.js.map +1 -0
- package/dist/jump-design-system/p-883548ea.entry.js +2 -0
- package/dist/jump-design-system/p-883548ea.entry.js.map +1 -0
- package/dist/jump-design-system/{p-f3c9fa96.entry.js → p-dbff34ba.entry.js} +2 -2
- package/dist/jump-design-system-elements.json +71 -0
- package/dist/types/components/jump-navbar/jump-navbar.d.ts +47 -0
- package/dist/types/components/jump-quantity/jump-quantity.d.ts +1 -0
- package/dist/types/components/jump-tab/jump-tab.d.ts +5 -0
- package/dist/types/components/jump-tab/jump-tab.stories.d.ts +12 -0
- package/dist/types/components.d.ts +105 -0
- package/package.json +1 -1
- package/dist/jump-design-system/p-188c7c2e.entry.js +0 -2
- package/dist/jump-design-system/p-188c7c2e.entry.js.map +0 -1
- package/dist/jump-design-system/p-62b52857.entry.js +0 -2
- package/dist/jump-design-system/p-d93e4ed5.entry.js +0 -2
- package/dist/jump-design-system/p-d93e4ed5.entry.js.map +0 -1
- package/dist/jump-design-system/p-eebee8f5.entry.js +0 -2
- package/dist/jump-design-system/p-eebee8f5.entry.js.map +0 -1
- /package/dist/jump-design-system/{p-62b52857.entry.js.map → p-2c95396a.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-3094f68c.entry.js.map → p-80d94f0f.entry.js.map} +0 -0
- /package/dist/jump-design-system/{p-f3c9fa96.entry.js.map → p-dbff34ba.entry.js.map} +0 -0
|
@@ -0,0 +1,260 @@
|
|
|
1
|
+
import { Host, h } from "@stencil/core";
|
|
2
|
+
export class JumpNavbar {
|
|
3
|
+
constructor() {
|
|
4
|
+
this.logo = { image_url: '', alt: '', link: '#', target: '_self' };
|
|
5
|
+
this.navItems = [];
|
|
6
|
+
this.secondaryNavItems = [];
|
|
7
|
+
this.mobileThreshold = 768;
|
|
8
|
+
this.type = 'basic';
|
|
9
|
+
this.navPosition = 'inline';
|
|
10
|
+
this.megaMenuAlignment = 'left';
|
|
11
|
+
this.sticky = false;
|
|
12
|
+
this.stickyThreshold = 0;
|
|
13
|
+
this.mobileLogo = this.logo;
|
|
14
|
+
this.user = null;
|
|
15
|
+
this.isMobile = false;
|
|
16
|
+
}
|
|
17
|
+
handleResize() {
|
|
18
|
+
this.isMobile = window.innerWidth < this.mobileThreshold;
|
|
19
|
+
}
|
|
20
|
+
render() {
|
|
21
|
+
var _a, _b;
|
|
22
|
+
return (h(Host, { key: '87fa483a27dc0314a3fadcc0b7c4cf61013ad98d' }, h("jump-button", { key: 'b2756659bde1018ea284a59d0919729e593364ac', variant: "primary", size: "small", text: true, href: this.logo['link'], target: (_a = this.logo['target']) !== null && _a !== void 0 ? _a : '_self' }, h("img", { key: 'b3b7d8f6028d16d0967d7fdb71068cd9f2a0636c', src: this.logo['image_url'], alt: this.logo['alt'] })), this.isMobile &&
|
|
23
|
+
h("div", { key: '9ff3e44a80259536f2bbb58ccc6be5967a3dc189', class: "MobileMenuOffCanvas" }, h("div", { key: 'c8e35bfbea3eb84d9df53fe8f18fa5cdccfe31c0', class: "MobileMenuOffCanvas__Header" }, "/* TODO: ricerca + pulsante chiusura + profilo utente con immagine */"), h("div", { key: 'ac6ad3c511ce635f4aa541a8326e97a77d3c4f2b', class: "MobileMenuOffCanvas__Navbar" }, this.navbar.cloneNode(true)), h("div", { key: 'f0f1ef266da0efa437c08df92a7d481b68892329', class: "MobileMenuOffCanvas__Footer" }, "/* TODO: langswitcher */", this.mobileLogo &&
|
|
24
|
+
h("jump-button", { key: '6eaa0a821b15ea28e8a8672e03cf51c5e57a1ca1', variant: "primary", size: "small", text: true, href: this.mobileLogo['link'], target: (_b = this.mobileLogo['target']) !== null && _b !== void 0 ? _b : '_self' }, h("img", { key: '7ef8f3187b555bc27172d062fb19a20423409bbc', src: this.mobileLogo['image_url'], alt: this.mobileLogo['alt'] })))), h("nav", { key: 'ab7a9bcbd9e907448a6dc393f1efa32e80752856', ref: (el) => {
|
|
25
|
+
this.navbar = el;
|
|
26
|
+
} }, h("ul", { key: '70c90191941c1b371218a69216f30921c5e097af' }, this.navItems.map((item) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: item.link, target: item.target, class: item.class }, item.text, this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&
|
|
27
|
+
h("jump-icon", { slot: "suffix", library: "lucide", name: "chevron-down", size: "small" })), this.secondaryNavItems.map((secondaryItem) => (secondaryItem.parent === item.id &&
|
|
28
|
+
h("ul", { "data-parent": secondaryItem.parent }, secondaryItem.title &&
|
|
29
|
+
h("h4", null, secondaryItem.title), " /* TODO: utilizzare jump-heading? */", secondaryItem.items.map((subItem) => (h("li", null, h("jump-button", { variant: "primary", size: "small", text: true, href: subItem.link, target: subItem.target, class: subItem.class }, subItem.text)))))))))))), h("slot", { key: '7edb581eab5c8942b9670129f893e92eefe9b5f3', name: "actions" }, h("slot", { key: '9e1eaf7c15bd2767d78d00a594a28f1d867ebb6d', name: "lang_switcher" }), h("slot", { key: '9cff169f4012c9dc87e9b6b78497f3c0e53dae58', name: "search" }), h("slot", { key: '465d61b9266c7ff12cfd434decd44579b84ab908', name: "buttons" }), h("slot", { key: 'c7e66e9bc83921f327f4f7fe74e3e68ac3d4a44a', name: "cart" }))));
|
|
30
|
+
}
|
|
31
|
+
static get is() { return "jump-navbar"; }
|
|
32
|
+
static get encapsulation() { return "shadow"; }
|
|
33
|
+
static get originalStyleUrls() {
|
|
34
|
+
return {
|
|
35
|
+
"$": ["jump-navbar.scss"]
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
static get styleUrls() {
|
|
39
|
+
return {
|
|
40
|
+
"$": ["jump-navbar.css"]
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
static get properties() {
|
|
44
|
+
return {
|
|
45
|
+
"logo": {
|
|
46
|
+
"type": "unknown",
|
|
47
|
+
"mutable": false,
|
|
48
|
+
"complexType": {
|
|
49
|
+
"original": "{\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }",
|
|
50
|
+
"resolved": "{ image_url: string; alt: string; link: string; target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\"; }",
|
|
51
|
+
"references": {}
|
|
52
|
+
},
|
|
53
|
+
"required": false,
|
|
54
|
+
"optional": false,
|
|
55
|
+
"docs": {
|
|
56
|
+
"tags": [],
|
|
57
|
+
"text": ""
|
|
58
|
+
},
|
|
59
|
+
"defaultValue": "{ image_url: '', alt: '', link: '#', target: '_self' }"
|
|
60
|
+
},
|
|
61
|
+
"navItems": {
|
|
62
|
+
"type": "unknown",
|
|
63
|
+
"mutable": false,
|
|
64
|
+
"complexType": {
|
|
65
|
+
"original": "Array<{\n id: string,\n text: string,\n link: string,\n class: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }>",
|
|
66
|
+
"resolved": "{ id: string; text: string; link: string; class: string; target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\"; }[]",
|
|
67
|
+
"references": {
|
|
68
|
+
"Array": {
|
|
69
|
+
"location": "global",
|
|
70
|
+
"id": "global::Array"
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
},
|
|
74
|
+
"required": false,
|
|
75
|
+
"optional": false,
|
|
76
|
+
"docs": {
|
|
77
|
+
"tags": [],
|
|
78
|
+
"text": ""
|
|
79
|
+
},
|
|
80
|
+
"defaultValue": "[]"
|
|
81
|
+
},
|
|
82
|
+
"secondaryNavItems": {
|
|
83
|
+
"type": "unknown",
|
|
84
|
+
"mutable": false,
|
|
85
|
+
"complexType": {
|
|
86
|
+
"original": "Array<{\n parent: string | null,\n title: string | null,\n items: Array<{\n text: string,\n link: string,\n class: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }>\n }>",
|
|
87
|
+
"resolved": "{ parent: string; title: string; items: { text: string; link: string; class: string; target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\"; }[]; }[]",
|
|
88
|
+
"references": {
|
|
89
|
+
"Array": {
|
|
90
|
+
"location": "global",
|
|
91
|
+
"id": "global::Array"
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
},
|
|
95
|
+
"required": false,
|
|
96
|
+
"optional": false,
|
|
97
|
+
"docs": {
|
|
98
|
+
"tags": [],
|
|
99
|
+
"text": ""
|
|
100
|
+
},
|
|
101
|
+
"defaultValue": "[]"
|
|
102
|
+
},
|
|
103
|
+
"mobileThreshold": {
|
|
104
|
+
"type": "number",
|
|
105
|
+
"mutable": false,
|
|
106
|
+
"complexType": {
|
|
107
|
+
"original": "number",
|
|
108
|
+
"resolved": "number",
|
|
109
|
+
"references": {}
|
|
110
|
+
},
|
|
111
|
+
"required": false,
|
|
112
|
+
"optional": false,
|
|
113
|
+
"docs": {
|
|
114
|
+
"tags": [],
|
|
115
|
+
"text": ""
|
|
116
|
+
},
|
|
117
|
+
"attribute": "mobile-threshold",
|
|
118
|
+
"reflect": false,
|
|
119
|
+
"defaultValue": "768"
|
|
120
|
+
},
|
|
121
|
+
"type": {
|
|
122
|
+
"type": "string",
|
|
123
|
+
"mutable": false,
|
|
124
|
+
"complexType": {
|
|
125
|
+
"original": "'basic' | 'hamburger_left' | 'hamburger_right'",
|
|
126
|
+
"resolved": "\"basic\" | \"hamburger_left\" | \"hamburger_right\"",
|
|
127
|
+
"references": {}
|
|
128
|
+
},
|
|
129
|
+
"required": false,
|
|
130
|
+
"optional": false,
|
|
131
|
+
"docs": {
|
|
132
|
+
"tags": [],
|
|
133
|
+
"text": ""
|
|
134
|
+
},
|
|
135
|
+
"attribute": "type",
|
|
136
|
+
"reflect": false,
|
|
137
|
+
"defaultValue": "'basic'"
|
|
138
|
+
},
|
|
139
|
+
"navPosition": {
|
|
140
|
+
"type": "string",
|
|
141
|
+
"mutable": false,
|
|
142
|
+
"complexType": {
|
|
143
|
+
"original": "'inline' | 'bottom' | 'megamenu'",
|
|
144
|
+
"resolved": "\"bottom\" | \"inline\" | \"megamenu\"",
|
|
145
|
+
"references": {}
|
|
146
|
+
},
|
|
147
|
+
"required": false,
|
|
148
|
+
"optional": false,
|
|
149
|
+
"docs": {
|
|
150
|
+
"tags": [],
|
|
151
|
+
"text": ""
|
|
152
|
+
},
|
|
153
|
+
"attribute": "nav-position",
|
|
154
|
+
"reflect": false,
|
|
155
|
+
"defaultValue": "'inline'"
|
|
156
|
+
},
|
|
157
|
+
"megaMenuAlignment": {
|
|
158
|
+
"type": "string",
|
|
159
|
+
"mutable": false,
|
|
160
|
+
"complexType": {
|
|
161
|
+
"original": "'left' | 'right'",
|
|
162
|
+
"resolved": "\"left\" | \"right\"",
|
|
163
|
+
"references": {}
|
|
164
|
+
},
|
|
165
|
+
"required": false,
|
|
166
|
+
"optional": false,
|
|
167
|
+
"docs": {
|
|
168
|
+
"tags": [],
|
|
169
|
+
"text": ""
|
|
170
|
+
},
|
|
171
|
+
"attribute": "mega-menu-alignment",
|
|
172
|
+
"reflect": false,
|
|
173
|
+
"defaultValue": "'left'"
|
|
174
|
+
},
|
|
175
|
+
"sticky": {
|
|
176
|
+
"type": "boolean",
|
|
177
|
+
"mutable": false,
|
|
178
|
+
"complexType": {
|
|
179
|
+
"original": "boolean",
|
|
180
|
+
"resolved": "boolean",
|
|
181
|
+
"references": {}
|
|
182
|
+
},
|
|
183
|
+
"required": false,
|
|
184
|
+
"optional": false,
|
|
185
|
+
"docs": {
|
|
186
|
+
"tags": [],
|
|
187
|
+
"text": ""
|
|
188
|
+
},
|
|
189
|
+
"attribute": "sticky",
|
|
190
|
+
"reflect": false,
|
|
191
|
+
"defaultValue": "false"
|
|
192
|
+
},
|
|
193
|
+
"stickyThreshold": {
|
|
194
|
+
"type": "number",
|
|
195
|
+
"mutable": false,
|
|
196
|
+
"complexType": {
|
|
197
|
+
"original": "number",
|
|
198
|
+
"resolved": "number",
|
|
199
|
+
"references": {}
|
|
200
|
+
},
|
|
201
|
+
"required": false,
|
|
202
|
+
"optional": false,
|
|
203
|
+
"docs": {
|
|
204
|
+
"tags": [],
|
|
205
|
+
"text": ""
|
|
206
|
+
},
|
|
207
|
+
"attribute": "sticky-threshold",
|
|
208
|
+
"reflect": false,
|
|
209
|
+
"defaultValue": "0"
|
|
210
|
+
},
|
|
211
|
+
"mobileLogo": {
|
|
212
|
+
"type": "unknown",
|
|
213
|
+
"mutable": false,
|
|
214
|
+
"complexType": {
|
|
215
|
+
"original": "{\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } | null",
|
|
216
|
+
"resolved": "{ image_url: string; alt: string; link: string; target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\"; }",
|
|
217
|
+
"references": {}
|
|
218
|
+
},
|
|
219
|
+
"required": false,
|
|
220
|
+
"optional": false,
|
|
221
|
+
"docs": {
|
|
222
|
+
"tags": [],
|
|
223
|
+
"text": ""
|
|
224
|
+
},
|
|
225
|
+
"defaultValue": "this.logo"
|
|
226
|
+
},
|
|
227
|
+
"user": {
|
|
228
|
+
"type": "unknown",
|
|
229
|
+
"mutable": false,
|
|
230
|
+
"complexType": {
|
|
231
|
+
"original": "{\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } | null",
|
|
232
|
+
"resolved": "{ image_url: string; alt: string; link: string; target: \"_blank\" | \"_parent\" | \"_self\" | \"_top\"; }",
|
|
233
|
+
"references": {}
|
|
234
|
+
},
|
|
235
|
+
"required": false,
|
|
236
|
+
"optional": false,
|
|
237
|
+
"docs": {
|
|
238
|
+
"tags": [],
|
|
239
|
+
"text": ""
|
|
240
|
+
},
|
|
241
|
+
"defaultValue": "null"
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
}
|
|
245
|
+
static get states() {
|
|
246
|
+
return {
|
|
247
|
+
"isMobile": {}
|
|
248
|
+
};
|
|
249
|
+
}
|
|
250
|
+
static get listeners() {
|
|
251
|
+
return [{
|
|
252
|
+
"name": "resize",
|
|
253
|
+
"method": "handleResize",
|
|
254
|
+
"target": "window",
|
|
255
|
+
"capture": false,
|
|
256
|
+
"passive": true
|
|
257
|
+
}];
|
|
258
|
+
}
|
|
259
|
+
}
|
|
260
|
+
//# sourceMappingURL=jump-navbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"jump-navbar.js","sourceRoot":"","sources":["../../../src/components/jump-navbar/jump-navbar.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, Prop, h, Listen, State } from '@stencil/core';\n\n@Component({\n tag: 'jump-navbar',\n styleUrl: 'jump-navbar.scss',\n shadow: true,\n})\nexport class JumpNavbar {\n @Prop() logo: {\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } = { image_url: '', alt: '', link: '#', target: '_self' };\n @Prop() navItems: Array<{\n id: string,\n text: string,\n link: string,\n class: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }> = [];\n @Prop() secondaryNavItems: Array<{\n parent: string | null,\n title: string | null,\n items: Array<{\n text: string,\n link: string,\n class: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n }>\n }> = [];\n @Prop() mobileThreshold: number = 768;\n @Prop() type: 'basic' | 'hamburger_left' | 'hamburger_right' = 'basic';\n @Prop() navPosition: 'inline' | 'bottom' | 'megamenu' = 'inline'; //TODO: Chiedere a Vale se può essere inline + sulla riga sotto mostriamo la tendina oppure è un menu a sé stante quello sotto\n @Prop() megaMenuAlignment: 'left' | 'right' = 'left';\n @Prop() sticky: boolean = false;\n @Prop() stickyThreshold: number = 0; // Possible to get sticky on mobile only after a certain scroll threshold\n @Prop() mobileLogo: {\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } | null = this.logo;\n @Prop() user : {\n image_url: string,\n alt: string,\n link: string,\n target: '_blank' | '_parent' | '_self' | '_top'\n } | null = null;\n\n @State() isMobile: boolean = false;\n\n navbar: HTMLElement;\n\n @Listen('resize', { target: 'window' })\n handleResize() {\n this.isMobile = window.innerWidth < this.mobileThreshold;\n }\n\n render() {\n return (\n <Host>\n <jump-button variant=\"primary\" size=\"small\" text href={this.logo['link']}\n target={this.logo['target'] ?? '_self'}>\n <img src={this.logo['image_url']} alt={this.logo['alt']} />\n </jump-button>\n {this.isMobile &&\n <div class=\"MobileMenuOffCanvas\">\n <div class=\"MobileMenuOffCanvas__Header\">\n /* TODO: ricerca + pulsante chiusura + profilo utente con immagine */\n </div>\n <div class=\"MobileMenuOffCanvas__Navbar\">\n {this.navbar.cloneNode(true)}\n </div>\n <div class=\"MobileMenuOffCanvas__Footer\">\n /* TODO: langswitcher */\n {this.mobileLogo &&\n <jump-button variant=\"primary\" size=\"small\" text href={this.mobileLogo['link']}\n target={this.mobileLogo['target'] ?? '_self'}>\n <img src={this.mobileLogo['image_url']} alt={this.mobileLogo['alt']} />\n </jump-button>\n }\n </div>\n </div>}\n <nav ref={(el: HTMLElement) => {\n this.navbar = el;\n }}>\n <ul>\n {this.navItems.map((item) => (\n <li>\n <jump-button variant=\"primary\" size=\"small\" text href={item.link} target={item.target}\n class={item.class}>\n {item.text}\n {this.secondaryNavItems.some(secondaryItem => secondaryItem.parent === item.id) &&\n <jump-icon slot=\"suffix\" library=\"lucide\" name=\"chevron-down\" size=\"small\"></jump-icon>\n }\n </jump-button>\n\n {this.secondaryNavItems.map((secondaryItem) => (\n secondaryItem.parent === item.id &&\n <ul data-parent={secondaryItem.parent}>\n {secondaryItem.title &&\n <h4>{secondaryItem.title}</h4>} /* TODO: utilizzare jump-heading? */\n {secondaryItem.items.map((subItem) => (\n <li>\n <jump-button variant=\"primary\" size=\"small\" text href={subItem.link} target={subItem.target}\n class={subItem.class}>\n {subItem.text}\n </jump-button>\n </li>\n ))}\n </ul>\n ))}\n </li>\n ))}\n </ul>\n </nav>\n <slot name=\"actions\">\n <slot name=\"lang_switcher\"></slot>\n <slot name=\"search\"></slot>\n <slot name=\"buttons\"></slot>\n <slot name=\"cart\"></slot>\n </slot>\n </Host>\n );\n }\n}\n\n"]}
|
|
@@ -22,7 +22,7 @@ export class JumpPagination {
|
|
|
22
22
|
}
|
|
23
23
|
/* --------------------- RENDER ------------------------------- */
|
|
24
24
|
render() {
|
|
25
|
-
return (h(Host, { key: '
|
|
25
|
+
return (h(Host, { key: 'e7b289bce3ef2bcfe2b45135b463feb2390c50a3', class: "JumpPagination" }, h("div", { key: '6559e463bf9d9973dd037f6b6a23f20816ef1882', class: "JumpPagination__Wrapper" }, h("div", { key: '5650bf9580bd470604e8841faf33e6b029549cda', class: "indicators" }, h("div", { key: 'b40e74ede39cd17fd770cf1fc46d46644a86fc63', class: "elements" }, h("span", { key: 'af919f31f94448c99291a830dd35da7169cd24ec' }, h("span", { key: '96b8773daf276e9285b91f06cf6f5fa28a5d6727' }, this.current), " ", this.pagLabel, " ", h("span", { key: 'e7dd92a3a48e23d5c28d1b6e0f3c07cddd837598' }, this.last))), h("div", { key: '1a3338a3e913f9c92a530203f91e93f6085b607c', class: "arrow" }, this.showFirstAndLast &&
|
|
26
26
|
// <button
|
|
27
27
|
// onClick={() => {this.current = 1} }
|
|
28
28
|
// disabled={(this.current === 1) ? true : false}>
|
|
@@ -30,14 +30,14 @@ export class JumpPagination {
|
|
|
30
30
|
// disabled={(this.current === 1) ? true : false}
|
|
31
31
|
// ></jump-icon>
|
|
32
32
|
// </button>
|
|
33
|
-
h("jump-button", { key: '
|
|
33
|
+
h("jump-button", { key: '23075cb5a2513048e7ee690242f0ce5a54c95538', onClick: () => { this.current = 1; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: '0e834c3117fca9d2dd593a4b5ceb3934e7eb547a', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: 'fc27582a142ed6051187692f6a31a2c51f91e4af', onClick: () => { this.current--; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === 1) ? true : false }, " ", h("jump-icon", { key: 'a2998274cf27c33b80f7fd0c917a5583b70ef8f0', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '26d7a56a2a0312cf526dcf9bc432679c756534f1', onClick: () => { this.current++; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '6769d3484fdd63d2fff5268392111137273b9541', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
34
34
|
// <button
|
|
35
35
|
// onClick={() => {this.current = this.last}}
|
|
36
36
|
// disabled={(this.current === this.last) ? true : false}
|
|
37
37
|
// >
|
|
38
38
|
// <jump-icon library="fa" category="regular" name="chevrons-right" size="small" slot="prefix"></jump-icon>
|
|
39
39
|
// </button>
|
|
40
|
-
h("jump-button", { key: '
|
|
40
|
+
h("jump-button", { key: '7e3c33e8a7c7d7c1dbaeb6009781602023f71133', onClick: () => { this.current = this.last; }, variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: (this.current === this.last) ? true : false }, " ", h("jump-icon", { key: '418f61b2481e76f5766a92e6b7c8d0fad5dcd70a', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
41
41
|
}
|
|
42
42
|
static get is() { return "jump-pagination"; }
|
|
43
43
|
static get encapsulation() { return "shadow"; }
|
|
@@ -70,9 +70,9 @@ export class JumpPaginationTable {
|
|
|
70
70
|
/* --------------------- RENDER ------------------------------- */
|
|
71
71
|
render() {
|
|
72
72
|
var _a;
|
|
73
|
-
return (h(Host, { key: '
|
|
74
|
-
h("jump-button", { key: '
|
|
75
|
-
h("jump-button", { key: '
|
|
73
|
+
return (h(Host, { key: '68cfdc8f670c77a14605e4f151b41e2d551531e5', class: "JumpPaginationTable" }, h("div", { key: '80d51c132999625d22b6e7ed73867e79a043ae99', class: "JumpPaginationTable__Wrapper" }, h("div", { key: '709e412acf386ad3149e7a04208a0ea4948b4f0b', class: "elementsPerPage" }, h("label", { key: '73985f2877b3c242b8deccb68ac11c878780e6ee', htmlFor: "elements" }, (_a = this.labelElementsPerPage) !== null && _a !== void 0 ? _a : 'Elements per page'), h("select", { key: '0def3077b6dc04018aecd2f50b0301bc19c29527', name: "elements", id: "elements", onChange: (e) => this.setElPerPage(e) }, this.elementsRangesArray.map((range) => (h("option", { value: range, selected: (this.elPerPage == range) && true }, range))))), h("div", { key: 'c2691bc0e79d043625977b276ac38ec10a41d73b', class: "indicators" }, h("div", { key: 'd9d62ca7b06479244bb396d38fc01dd86236515d', class: "elements" }, h("span", { key: '51ea23a9d77319738404c8b6ead86ea0a9052e1c' }, h("span", { key: '8fd64ef028151ae61c31998f72036ff4c9c9f151' }, this.first), " - ", h("span", { key: 'a001b2a509920566c34a41afb24a823e0445c3e2' }, this.last), " ", this.pagLabel, " ", h("span", { key: '9a27e142353e7d410655f270988183a82c0792a1' }, this.total))), h("div", { key: 'ba778721da92c9147449de9d0869a06d65615602', class: "arrow" }, this.showFirstAndLast &&
|
|
74
|
+
h("jump-button", { key: '76dfd54bfa05a6c33489aa41f9150c793fac5f85', onClick: () => this.doChangePage('first'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '0aee871e37e2e5b5190fc62cd8c8617d209f57ed', slot: "suffix", name: "chevrons-left" }), " "), h("jump-button", { key: '9e82cf38238d358a4084078b975a3f75bf55e9fe', onClick: () => this.doChangePage('previous'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.first === 1 }, " ", h("jump-icon", { key: '7303a4371e0540dfa28feaf4a1f69662b646e64b', slot: "suffix", name: "chevron-left" }), " "), h("jump-button", { key: '4bfb0713a9a374c30873e046b7ded26965cfce84', onClick: () => this.doChangePage('next'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: '52c929962accd14480152a0dfd2e03904fd79fc4', slot: "suffix", name: "chevron-right" }), " "), this.showFirstAndLast &&
|
|
75
|
+
h("jump-button", { key: '6f0c43ef094c622447cd1095ab70ce6bfd2c464a', onClick: () => this.doChangePage('last'), variant: "primary", text: true, size: "small", name: "scopri", value: "value", "aria-label": "Scopri di pi\u00F9", id: "button", onlyIcon: true, disabled: this.last === this.total }, " ", h("jump-icon", { key: 'cb05b4a61efdebf03a17b353f17572d038df251f', slot: "suffix", name: "chevrons-right" }), " "))))));
|
|
76
76
|
}
|
|
77
77
|
static get is() { return "jump-pagination-table"; }
|
|
78
78
|
static get originalStyleUrls() {
|
|
@@ -9,6 +9,7 @@ export class JumpQuantity {
|
|
|
9
9
|
this.variant = 'vertical';
|
|
10
10
|
this.showButtons = true;
|
|
11
11
|
this.value = undefined;
|
|
12
|
+
this.currentValue = undefined;
|
|
12
13
|
}
|
|
13
14
|
onValueChange(newValue, oldValue) {
|
|
14
15
|
this.change.emit({
|
|
@@ -21,13 +22,15 @@ export class JumpQuantity {
|
|
|
21
22
|
* Get the current value
|
|
22
23
|
*/
|
|
23
24
|
async getValue() {
|
|
24
|
-
return this.
|
|
25
|
+
return this.currentValue;
|
|
25
26
|
}
|
|
26
27
|
async reset() {
|
|
27
28
|
this.value = this.min;
|
|
29
|
+
this.currentValue = this.value;
|
|
28
30
|
}
|
|
29
31
|
componentWillLoad() {
|
|
30
32
|
this.value = this.min;
|
|
33
|
+
this.currentValue = this.value;
|
|
31
34
|
this.internals.setFormValue(this.value.toString());
|
|
32
35
|
}
|
|
33
36
|
formResetCallback() {
|
|
@@ -35,20 +38,30 @@ export class JumpQuantity {
|
|
|
35
38
|
this.internals.setFormValue('');
|
|
36
39
|
}
|
|
37
40
|
handleChange(event) {
|
|
38
|
-
|
|
41
|
+
let value = parseInt(event.target.value);
|
|
42
|
+
if (value < this.min) {
|
|
43
|
+
this.currentValue = this.min;
|
|
44
|
+
}
|
|
45
|
+
else if (value > this.max) {
|
|
46
|
+
this.currentValue = this.max;
|
|
47
|
+
}
|
|
48
|
+
else {
|
|
49
|
+
this.currentValue = event.target.value;
|
|
50
|
+
}
|
|
39
51
|
}
|
|
40
52
|
//avoid user can change the value below the min
|
|
41
53
|
handleBlur(event) {
|
|
42
54
|
if (event.target.value < this.min) {
|
|
43
55
|
this.value = this.min;
|
|
56
|
+
this.currentValue = this.min;
|
|
44
57
|
}
|
|
45
58
|
}
|
|
46
59
|
render() {
|
|
47
|
-
return (h(Host, { key: '
|
|
48
|
-
h("jump-button", { key: '
|
|
60
|
+
return (h(Host, { key: 'c8c5cbaed22ce180cc74a88fe785a1f7b1846c1c', value: this.value, "data-variant": this.variant, "data-hasbuttons": this.showButtons }, this.label && h("label", { key: '92006694c00522d202fba822c843365ab6e0d51b' }, this.label), h("div", { key: '6299b0b6c5a5b64fbcc7c2206a5d4af5c9f45113', class: `jump-quantity__InnerWrapper` }, this.showButtons &&
|
|
61
|
+
h("jump-button", { key: '8d8d7b4a24d527ebc10ea47500de30ed9cc39040', onClick: () => this.currentValue = this.currentValue - this.step, disabled: this.currentValue <= this.min, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '34037f49b6b3cba457b2b6c5db774da655c25b3b', library: "lucide", name: "minus", size: "small" })), h("input", { key: '93a3a85df493c9d10f98fc93f694d7962162eedd', ref: (el) => {
|
|
49
62
|
this.inputEl = el;
|
|
50
|
-
}, type: 'number', value: this.
|
|
51
|
-
h("jump-button", { key: '
|
|
63
|
+
}, type: 'number', value: this.currentValue, onInput: (event) => this.handleChange(event), min: this.min, max: this.max, step: this.step, "aria-hasbuttons": this.showButtons }), this.showButtons &&
|
|
64
|
+
h("jump-button", { key: '76105e10b7432b7fcf0161e44f0e298296b18a6d', onClick: () => this.currentValue = this.currentValue + this.step, disabled: this.currentValue >= this.max, variant: 'neutral', size: 'custom' }, h("jump-icon", { key: '5431d4f069b27f418aca9856099e12a777954009', library: "lucide", name: "plus", size: "small" })))));
|
|
52
65
|
}
|
|
53
66
|
static get is() { return "jump-quantity"; }
|
|
54
67
|
static get encapsulation() { return "shadow"; }
|
|
@@ -209,6 +222,11 @@ export class JumpQuantity {
|
|
|
209
222
|
}
|
|
210
223
|
};
|
|
211
224
|
}
|
|
225
|
+
static get states() {
|
|
226
|
+
return {
|
|
227
|
+
"currentValue": {}
|
|
228
|
+
};
|
|
229
|
+
}
|
|
212
230
|
static get events() {
|
|
213
231
|
return [{
|
|
214
232
|
"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;\n\n @State() currentValue: 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.internals.setFormValue(newValue);\n }\n\n /**\n * Get the current value\n */\n @Method()\n async getValue() {\n return this.currentValue;\n }\n\n @Method()\n async reset() {\n this.value = this.min;\n this.currentValue = this.value;\n }\n\n componentWillLoad() {\n this.value = this.min;\n this.currentValue = this.value;\n this.internals.setFormValue(this.value.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.currentValue = this.min;\n } else if(value > this.max){\n this.currentValue = this.max;\n } else {\n this.currentValue = 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 this.currentValue = 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.currentValue = this.currentValue - this.step} disabled={this.currentValue <= 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.currentValue}\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.currentValue = this.currentValue + this.step} disabled={this.currentValue >= 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"]}
|
|
@@ -78,7 +78,7 @@ const TemplateFormExample = (args, data) => {
|
|
|
78
78
|
const attributes = generateAttributesFromArgs(args);
|
|
79
79
|
return formatHtml(`
|
|
80
80
|
<form id="form_test">
|
|
81
|
-
<jump-quantity ${attributes}></jump-quantity>
|
|
81
|
+
<jump-quantity max="10" ${attributes}></jump-quantity>
|
|
82
82
|
<input type="text" id="prova" value="ciao" />
|
|
83
83
|
<input type="submit" value="invia" />
|
|
84
84
|
</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,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;;4BAEQ,UAAU;;;;;;;;kDAQY,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 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 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"]}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
:host {
|
|
2
2
|
display: block;
|
|
3
3
|
--jump-tab-bg-color: var(--gray-ultralight, #f8f8f8);
|
|
4
|
+
--jump-tab-border-color: var(--neutral-grey-disabled, #CBCBCB);
|
|
4
5
|
}
|
|
5
6
|
:host .Wrapper {
|
|
6
7
|
display: flex;
|
|
@@ -9,4 +10,31 @@
|
|
|
9
10
|
:host .Wrapper.rounded {
|
|
10
11
|
border-radius: 50px;
|
|
11
12
|
background-color: #f8f8f8;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
:host(.center) {
|
|
16
|
+
display: flex;
|
|
17
|
+
justify-content: center;
|
|
18
|
+
align-items: center;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
:host(.left) {
|
|
22
|
+
display: flex;
|
|
23
|
+
justify-content: flex-start;
|
|
24
|
+
align-items: center;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
:host(.right) {
|
|
28
|
+
display: flex;
|
|
29
|
+
justify-content: flex-end;
|
|
30
|
+
align-items: center;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
/* Stile fullBorder */
|
|
34
|
+
:host(.fullBorder) {
|
|
35
|
+
border-bottom: 1px solid var(--jump-tab-border-color);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
:host(.fullBorder) ::slotted([slot=tab-item]) {
|
|
39
|
+
margin-bottom: -1px;
|
|
12
40
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { Host, h } from "@stencil/core";
|
|
2
2
|
export class JumpTab {
|
|
3
3
|
constructor() {
|
|
4
|
+
this.alignment = 'left';
|
|
5
|
+
this.fullBorder = false;
|
|
4
6
|
this.tabGroupName = undefined;
|
|
5
7
|
this.variant = 'inline';
|
|
6
8
|
}
|
|
@@ -72,7 +74,7 @@ export class JumpTab {
|
|
|
72
74
|
}
|
|
73
75
|
}
|
|
74
76
|
render() {
|
|
75
|
-
return (h(Host, { key: '
|
|
77
|
+
return (h(Host, { key: '12b0209abd23ebbff1779b77bf7a32e0c2070eed', class: "JumpTab" + " " + this.alignment + " " + (this.fullBorder && 'fullBorder'), id: this.tabGroupName, ref: (el) => { this.JumpTabEl = el; } }, h("div", { key: 'f9c9158f7c4c61ae42cc1adf125be173288d4aac' }, h("div", { key: '31e61ea8666fa867a6e287729ece824a90b584ff', class: "Wrapper " + this.variant }, h("slot", { key: '2b215a056c8ab946ba8c58269a87b0de2537b759', name: "tab-item" })), h("div", { key: 'e2e0110cc23e5c7e808551f977746fec95466d66' }, h("slot", { key: '15a062d1f5ca5b1f7717b27e1192dbe76e5f8fba', name: "tab-content" })))));
|
|
76
78
|
}
|
|
77
79
|
static get is() { return "jump-tab"; }
|
|
78
80
|
static get encapsulation() { return "shadow"; }
|
|
@@ -88,6 +90,42 @@ export class JumpTab {
|
|
|
88
90
|
}
|
|
89
91
|
static get properties() {
|
|
90
92
|
return {
|
|
93
|
+
"alignment": {
|
|
94
|
+
"type": "string",
|
|
95
|
+
"mutable": false,
|
|
96
|
+
"complexType": {
|
|
97
|
+
"original": "string",
|
|
98
|
+
"resolved": "string",
|
|
99
|
+
"references": {}
|
|
100
|
+
},
|
|
101
|
+
"required": false,
|
|
102
|
+
"optional": false,
|
|
103
|
+
"docs": {
|
|
104
|
+
"tags": [],
|
|
105
|
+
"text": ""
|
|
106
|
+
},
|
|
107
|
+
"attribute": "alignment",
|
|
108
|
+
"reflect": false,
|
|
109
|
+
"defaultValue": "'left'"
|
|
110
|
+
},
|
|
111
|
+
"fullBorder": {
|
|
112
|
+
"type": "boolean",
|
|
113
|
+
"mutable": false,
|
|
114
|
+
"complexType": {
|
|
115
|
+
"original": "boolean",
|
|
116
|
+
"resolved": "boolean",
|
|
117
|
+
"references": {}
|
|
118
|
+
},
|
|
119
|
+
"required": false,
|
|
120
|
+
"optional": false,
|
|
121
|
+
"docs": {
|
|
122
|
+
"tags": [],
|
|
123
|
+
"text": "If true, the jump-tab component have a full bottom border"
|
|
124
|
+
},
|
|
125
|
+
"attribute": "full-border",
|
|
126
|
+
"reflect": false,
|
|
127
|
+
"defaultValue": "false"
|
|
128
|
+
},
|
|
91
129
|
"tabGroupName": {
|
|
92
130
|
"type": "string",
|
|
93
131
|
"mutable": false,
|