@sensorario/sg-components 0.0.85 → 0.0.87
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/index.es.js +186 -150
- package/dist/sg-components.css +1 -1
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -1,155 +1,155 @@
|
|
|
1
|
-
import { forwardRef as
|
|
2
|
-
import { Fragment as
|
|
1
|
+
import e, { forwardRef as t, useEffect as n, useImperativeHandle as r, useState as i } from "react";
|
|
2
|
+
import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
3
3
|
//#region src/components/Icon/Icon.tsx
|
|
4
|
-
var
|
|
5
|
-
menu: /* @__PURE__ */
|
|
6
|
-
/* @__PURE__ */
|
|
4
|
+
var c = {
|
|
5
|
+
menu: /* @__PURE__ */ s(a, { children: [
|
|
6
|
+
/* @__PURE__ */ o("line", {
|
|
7
7
|
x1: "3",
|
|
8
8
|
y1: "6",
|
|
9
9
|
x2: "21",
|
|
10
10
|
y2: "6"
|
|
11
11
|
}),
|
|
12
|
-
/* @__PURE__ */
|
|
12
|
+
/* @__PURE__ */ o("line", {
|
|
13
13
|
x1: "3",
|
|
14
14
|
y1: "12",
|
|
15
15
|
x2: "21",
|
|
16
16
|
y2: "12"
|
|
17
17
|
}),
|
|
18
|
-
/* @__PURE__ */
|
|
18
|
+
/* @__PURE__ */ o("line", {
|
|
19
19
|
x1: "3",
|
|
20
20
|
y1: "18",
|
|
21
21
|
x2: "21",
|
|
22
22
|
y2: "18"
|
|
23
23
|
})
|
|
24
24
|
] }),
|
|
25
|
-
layout: /* @__PURE__ */
|
|
26
|
-
/* @__PURE__ */
|
|
25
|
+
layout: /* @__PURE__ */ s(a, { children: [
|
|
26
|
+
/* @__PURE__ */ o("rect", {
|
|
27
27
|
x: "3",
|
|
28
28
|
y: "3",
|
|
29
29
|
width: "18",
|
|
30
30
|
height: "18",
|
|
31
31
|
rx: "2"
|
|
32
32
|
}),
|
|
33
|
-
/* @__PURE__ */
|
|
33
|
+
/* @__PURE__ */ o("line", {
|
|
34
34
|
x1: "3",
|
|
35
35
|
y1: "9",
|
|
36
36
|
x2: "21",
|
|
37
37
|
y2: "9"
|
|
38
38
|
}),
|
|
39
|
-
/* @__PURE__ */
|
|
39
|
+
/* @__PURE__ */ o("line", {
|
|
40
40
|
x1: "9",
|
|
41
41
|
y1: "9",
|
|
42
42
|
x2: "9",
|
|
43
43
|
y2: "21"
|
|
44
44
|
})
|
|
45
45
|
] }),
|
|
46
|
-
edit: /* @__PURE__ */
|
|
46
|
+
edit: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("path", { d: "M4 20l1-4L16 5l3 3L8 19l-4 1z" }), /* @__PURE__ */ o("line", {
|
|
47
47
|
x1: "14",
|
|
48
48
|
y1: "7",
|
|
49
49
|
x2: "17",
|
|
50
50
|
y2: "10"
|
|
51
51
|
})] }),
|
|
52
|
-
"help-circle": /* @__PURE__ */
|
|
53
|
-
/* @__PURE__ */
|
|
52
|
+
"help-circle": /* @__PURE__ */ s(a, { children: [
|
|
53
|
+
/* @__PURE__ */ o("circle", {
|
|
54
54
|
cx: "12",
|
|
55
55
|
cy: "12",
|
|
56
56
|
r: "9"
|
|
57
57
|
}),
|
|
58
|
-
/* @__PURE__ */
|
|
59
|
-
/* @__PURE__ */
|
|
58
|
+
/* @__PURE__ */ o("path", { d: "M9.5 9a2.5 2.5 0 0 1 5 0c0 2-2.5 2-2.5 4" }),
|
|
59
|
+
/* @__PURE__ */ o("line", {
|
|
60
60
|
x1: "12",
|
|
61
61
|
y1: "17",
|
|
62
62
|
x2: "12",
|
|
63
63
|
y2: "17.01"
|
|
64
64
|
})
|
|
65
65
|
] }),
|
|
66
|
-
check: /* @__PURE__ */
|
|
67
|
-
"file-plus": /* @__PURE__ */
|
|
68
|
-
/* @__PURE__ */
|
|
69
|
-
/* @__PURE__ */
|
|
70
|
-
/* @__PURE__ */
|
|
66
|
+
check: /* @__PURE__ */ o("polyline", { points: "4 12 9 17 20 6" }),
|
|
67
|
+
"file-plus": /* @__PURE__ */ s(a, { children: [
|
|
68
|
+
/* @__PURE__ */ o("path", { d: "M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z" }),
|
|
69
|
+
/* @__PURE__ */ o("polyline", { points: "14 3 14 8 19 8" }),
|
|
70
|
+
/* @__PURE__ */ o("line", {
|
|
71
71
|
x1: "12",
|
|
72
72
|
y1: "12",
|
|
73
73
|
x2: "12",
|
|
74
74
|
y2: "17"
|
|
75
75
|
}),
|
|
76
|
-
/* @__PURE__ */
|
|
76
|
+
/* @__PURE__ */ o("line", {
|
|
77
77
|
x1: "9.5",
|
|
78
78
|
y1: "14.5",
|
|
79
79
|
x2: "14.5",
|
|
80
80
|
y2: "14.5"
|
|
81
81
|
})
|
|
82
82
|
] }),
|
|
83
|
-
link: /* @__PURE__ */
|
|
84
|
-
/* @__PURE__ */
|
|
85
|
-
/* @__PURE__ */
|
|
86
|
-
/* @__PURE__ */
|
|
83
|
+
link: /* @__PURE__ */ s(a, { children: [
|
|
84
|
+
/* @__PURE__ */ o("path", { d: "M9 15l6-6" }),
|
|
85
|
+
/* @__PURE__ */ o("path", { d: "M8 13.5 5.5 16a3 3 0 0 0 4.24 4.24l2.5-2.5" }),
|
|
86
|
+
/* @__PURE__ */ o("path", { d: "M16 10.5 18.5 8a3 3 0 0 0-4.24-4.24l-2.5 2.5" })
|
|
87
87
|
] }),
|
|
88
|
-
"share-2": /* @__PURE__ */
|
|
89
|
-
/* @__PURE__ */
|
|
88
|
+
"share-2": /* @__PURE__ */ s(a, { children: [
|
|
89
|
+
/* @__PURE__ */ o("circle", {
|
|
90
90
|
cx: "6",
|
|
91
91
|
cy: "12",
|
|
92
92
|
r: "2.4"
|
|
93
93
|
}),
|
|
94
|
-
/* @__PURE__ */
|
|
94
|
+
/* @__PURE__ */ o("circle", {
|
|
95
95
|
cx: "18",
|
|
96
96
|
cy: "6",
|
|
97
97
|
r: "2.4"
|
|
98
98
|
}),
|
|
99
|
-
/* @__PURE__ */
|
|
99
|
+
/* @__PURE__ */ o("circle", {
|
|
100
100
|
cx: "18",
|
|
101
101
|
cy: "18",
|
|
102
102
|
r: "2.4"
|
|
103
103
|
}),
|
|
104
|
-
/* @__PURE__ */
|
|
104
|
+
/* @__PURE__ */ o("line", {
|
|
105
105
|
x1: "8.2",
|
|
106
106
|
y1: "10.8",
|
|
107
107
|
x2: "15.8",
|
|
108
108
|
y2: "7.2"
|
|
109
109
|
}),
|
|
110
|
-
/* @__PURE__ */
|
|
110
|
+
/* @__PURE__ */ o("line", {
|
|
111
111
|
x1: "8.2",
|
|
112
112
|
y1: "13.2",
|
|
113
113
|
x2: "15.8",
|
|
114
114
|
y2: "16.8"
|
|
115
115
|
})
|
|
116
116
|
] }),
|
|
117
|
-
download: /* @__PURE__ */
|
|
118
|
-
/* @__PURE__ */
|
|
119
|
-
/* @__PURE__ */
|
|
120
|
-
/* @__PURE__ */
|
|
117
|
+
download: /* @__PURE__ */ s(a, { children: [
|
|
118
|
+
/* @__PURE__ */ o("path", { d: "M12 3v12" }),
|
|
119
|
+
/* @__PURE__ */ o("polyline", { points: "7 11 12 16 17 11" }),
|
|
120
|
+
/* @__PURE__ */ o("path", { d: "M5 19h14" })
|
|
121
121
|
] }),
|
|
122
|
-
book: /* @__PURE__ */
|
|
123
|
-
printer: /* @__PURE__ */
|
|
124
|
-
/* @__PURE__ */
|
|
125
|
-
/* @__PURE__ */
|
|
122
|
+
book: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("path", { d: "M4 5.5A2.5 2.5 0 0 1 6.5 3H12v18H6.5A2.5 2.5 0 0 1 4 18.5z" }), /* @__PURE__ */ o("path", { d: "M20 5.5A2.5 2.5 0 0 0 17.5 3H12v18h5.5a2.5 2.5 0 0 0 2.5-2.5z" })] }),
|
|
123
|
+
printer: /* @__PURE__ */ s(a, { children: [
|
|
124
|
+
/* @__PURE__ */ o("path", { d: "M6 9V3h12v6" }),
|
|
125
|
+
/* @__PURE__ */ o("rect", {
|
|
126
126
|
x: "4",
|
|
127
127
|
y: "9",
|
|
128
128
|
width: "16",
|
|
129
129
|
height: "8",
|
|
130
130
|
rx: "1.5"
|
|
131
131
|
}),
|
|
132
|
-
/* @__PURE__ */
|
|
132
|
+
/* @__PURE__ */ o("path", { d: "M6 17v4h12v-4" })
|
|
133
133
|
] }),
|
|
134
|
-
eye: /* @__PURE__ */
|
|
134
|
+
eye: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("path", { d: "M2 12c2.5-5 7-8 10-8s7.5 3 10 8c-2.5 5-7 8-10 8s-7.5-3-10-8z" }), /* @__PURE__ */ o("circle", {
|
|
135
135
|
cx: "12",
|
|
136
136
|
cy: "12",
|
|
137
137
|
r: "3"
|
|
138
138
|
})] }),
|
|
139
|
-
columns: /* @__PURE__ */
|
|
139
|
+
columns: /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o("rect", {
|
|
140
140
|
x: "3",
|
|
141
141
|
y: "4",
|
|
142
142
|
width: "8",
|
|
143
143
|
height: "16",
|
|
144
144
|
rx: "1.5"
|
|
145
|
-
}), /* @__PURE__ */
|
|
145
|
+
}), /* @__PURE__ */ o("rect", {
|
|
146
146
|
x: "13",
|
|
147
147
|
y: "4",
|
|
148
148
|
width: "8",
|
|
149
149
|
height: "16",
|
|
150
150
|
rx: "1.5"
|
|
151
151
|
})] })
|
|
152
|
-
},
|
|
152
|
+
}, l = ({ name: e, size: t = 18, ...n }) => /* @__PURE__ */ o("svg", {
|
|
153
153
|
className: "sg-icon",
|
|
154
154
|
width: t,
|
|
155
155
|
height: t,
|
|
@@ -161,30 +161,30 @@ var s = {
|
|
|
161
161
|
strokeLinejoin: "round",
|
|
162
162
|
"aria-hidden": "true",
|
|
163
163
|
...n,
|
|
164
|
-
children:
|
|
165
|
-
}),
|
|
164
|
+
children: c[e]
|
|
165
|
+
}), u = ({ label: e, icon: t, iconOnly: n, className: r, title: i, ...a }) => /* @__PURE__ */ s("button", {
|
|
166
166
|
className: [
|
|
167
167
|
"custom-button",
|
|
168
168
|
t ? "custom-button-with-icon" : "",
|
|
169
169
|
r
|
|
170
170
|
].filter(Boolean).join(" "),
|
|
171
171
|
title: i ?? (n ? e : void 0),
|
|
172
|
-
...
|
|
173
|
-
children: [t && /* @__PURE__ */
|
|
172
|
+
...a,
|
|
173
|
+
children: [t && /* @__PURE__ */ o(l, { name: t }), /* @__PURE__ */ o("span", {
|
|
174
174
|
className: n ? "custom-button-label-visually-hidden" : void 0,
|
|
175
175
|
children: e
|
|
176
176
|
})]
|
|
177
|
-
}),
|
|
177
|
+
}), d = ({ copyright: e = "© 2026 My Company", href: t = "#", links: n = [] }) => /* @__PURE__ */ s("footer", {
|
|
178
178
|
className: "footer",
|
|
179
|
-
children: [/* @__PURE__ */
|
|
179
|
+
children: [/* @__PURE__ */ o("span", { children: /* @__PURE__ */ o("a", {
|
|
180
180
|
href: t,
|
|
181
181
|
children: e
|
|
182
|
-
}) }), n.length > 0 && /* @__PURE__ */
|
|
182
|
+
}) }), n.length > 0 && /* @__PURE__ */ o("nav", { children: n.map(({ label: e, href: t }) => /* @__PURE__ */ o("a", {
|
|
183
183
|
href: t,
|
|
184
184
|
style: { marginLeft: "16px" },
|
|
185
185
|
children: e
|
|
186
186
|
}, t)) })]
|
|
187
|
-
}),
|
|
187
|
+
}), f = [
|
|
188
188
|
{
|
|
189
189
|
label: "guitar",
|
|
190
190
|
href: "https://guitar.simonegentili.com"
|
|
@@ -205,147 +205,183 @@ var s = {
|
|
|
205
205
|
label: "code2image",
|
|
206
206
|
href: "https://code2image.simonegentili.com"
|
|
207
207
|
}
|
|
208
|
-
],
|
|
208
|
+
], p = () => /* @__PURE__ */ o(d, {
|
|
209
209
|
href: "https://simonegentili.com",
|
|
210
210
|
copyright: "© 2026 simonegentili.com",
|
|
211
|
-
links:
|
|
212
|
-
}),
|
|
211
|
+
links: f
|
|
212
|
+
}), m = ({ onNavigate: e, title: t = "Simone Gentili - senior web developer, tech author and chess enthusiast", homePageKey: n = "home", children: r, className: i }) => /* @__PURE__ */ o("header", {
|
|
213
213
|
className: i ? `header ${i}` : "header",
|
|
214
|
-
children: /* @__PURE__ */
|
|
214
|
+
children: /* @__PURE__ */ s("div", {
|
|
215
215
|
className: "header-container",
|
|
216
|
-
children: [/* @__PURE__ */
|
|
216
|
+
children: [/* @__PURE__ */ o("div", {
|
|
217
217
|
className: "logo",
|
|
218
218
|
onClick: () => {
|
|
219
219
|
e?.(n);
|
|
220
220
|
},
|
|
221
|
-
children: /* @__PURE__ */
|
|
221
|
+
children: /* @__PURE__ */ o("h1", {
|
|
222
222
|
className: "logo-text",
|
|
223
223
|
children: t
|
|
224
224
|
})
|
|
225
|
-
}), r && /* @__PURE__ */
|
|
225
|
+
}), r && /* @__PURE__ */ o("div", {
|
|
226
226
|
className: "header-actions",
|
|
227
227
|
children: r
|
|
228
228
|
})]
|
|
229
229
|
})
|
|
230
|
-
}),
|
|
230
|
+
}), h = ({ onNavigate: e }) => /* @__PURE__ */ o(m, {
|
|
231
231
|
onNavigate: e,
|
|
232
232
|
title: "Simone Gentili - senior web developer, tech author and chess enthusiast",
|
|
233
233
|
homePageKey: "home"
|
|
234
|
-
}),
|
|
234
|
+
}), g = ({ isLoggedIn: e, handleLogin: t, handleLogout: n }) => /* @__PURE__ */ o(a, { children: e ? /* @__PURE__ */ o("button", {
|
|
235
235
|
onClick: n,
|
|
236
236
|
style: {
|
|
237
237
|
fontSize: "0.9rem",
|
|
238
238
|
padding: "0.4rem 1rem"
|
|
239
239
|
},
|
|
240
240
|
children: "logout"
|
|
241
|
-
}) : /* @__PURE__ */
|
|
241
|
+
}) : /* @__PURE__ */ o("button", {
|
|
242
242
|
onClick: t,
|
|
243
243
|
style: {
|
|
244
244
|
fontSize: "0.9rem",
|
|
245
245
|
padding: "0.4rem 1rem"
|
|
246
246
|
},
|
|
247
247
|
children: "Login"
|
|
248
|
-
}) }),
|
|
249
|
-
let [
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
248
|
+
}) }), _ = 220, v = ({ open: t, onClose: r, title: a, icon: c, children: l, buttons: d, footer: f, closeLabel: p = "Close", className: m }) => {
|
|
249
|
+
let [h, g] = i(!1), [v, y] = i({
|
|
250
|
+
x: 0,
|
|
251
|
+
y: 0
|
|
252
|
+
}), b = e.useRef(null), [x, S] = i(!1), C = (e) => {
|
|
253
|
+
h || (g(!0), setTimeout(() => {
|
|
254
|
+
g(!1), e();
|
|
255
|
+
}, _));
|
|
253
256
|
};
|
|
254
|
-
|
|
255
|
-
if (!
|
|
256
|
-
let
|
|
257
|
-
e.key === "Escape" &&
|
|
257
|
+
n(() => {
|
|
258
|
+
if (!t) return;
|
|
259
|
+
let e = (e) => {
|
|
260
|
+
e.key === "Escape" && C(r);
|
|
258
261
|
};
|
|
259
|
-
return window.addEventListener("keydown",
|
|
260
|
-
}, [
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
262
|
+
return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
|
|
263
|
+
}, [t, r]);
|
|
264
|
+
let [w, T] = i(t);
|
|
265
|
+
if (t !== w && (T(t), t && y({
|
|
266
|
+
x: 0,
|
|
267
|
+
y: 0
|
|
268
|
+
})), !t) return null;
|
|
269
|
+
function E(e) {
|
|
270
|
+
e.target.closest(".modal-close") || (b.current = {
|
|
271
|
+
pointerX: e.clientX,
|
|
272
|
+
pointerY: e.clientY,
|
|
273
|
+
offsetX: v.x,
|
|
274
|
+
offsetY: v.y
|
|
275
|
+
}, S(!0), e.currentTarget.setPointerCapture(e.pointerId));
|
|
276
|
+
}
|
|
277
|
+
function D(e) {
|
|
278
|
+
if (!b.current) return;
|
|
279
|
+
let { pointerX: t, pointerY: n, offsetX: r, offsetY: i } = b.current;
|
|
280
|
+
y({
|
|
281
|
+
x: r + (e.clientX - t),
|
|
282
|
+
y: i + (e.clientY - n)
|
|
283
|
+
});
|
|
284
|
+
}
|
|
285
|
+
function O() {
|
|
286
|
+
b.current = null, S(!1);
|
|
287
|
+
}
|
|
288
|
+
return /* @__PURE__ */ o("div", {
|
|
289
|
+
className: `modal-overlay${h ? " modal-overlay-closing" : ""}`,
|
|
290
|
+
onClick: () => C(r),
|
|
291
|
+
children: /* @__PURE__ */ s("div", {
|
|
292
|
+
className: `modal-content${m ? ` ${m}` : ""}${h ? " modal-content-closing" : ""}`,
|
|
293
|
+
style: {
|
|
294
|
+
"--drag-x": `${v.x}px`,
|
|
295
|
+
"--drag-y": `${v.y}px`
|
|
296
|
+
},
|
|
265
297
|
onClick: (e) => e.stopPropagation(),
|
|
266
298
|
children: [
|
|
267
|
-
/* @__PURE__ */
|
|
268
|
-
className: "modal-header"
|
|
299
|
+
/* @__PURE__ */ s("div", {
|
|
300
|
+
className: `modal-header${x ? " modal-header-dragging" : ""}`,
|
|
301
|
+
onPointerDown: E,
|
|
302
|
+
onPointerMove: D,
|
|
303
|
+
onPointerUp: O,
|
|
304
|
+
onPointerCancel: O,
|
|
269
305
|
children: [
|
|
270
|
-
|
|
306
|
+
c && /* @__PURE__ */ o("span", {
|
|
271
307
|
className: "modal-icon",
|
|
272
|
-
children:
|
|
308
|
+
children: c
|
|
273
309
|
}),
|
|
274
|
-
|
|
310
|
+
a && /* @__PURE__ */ o("h2", {
|
|
275
311
|
className: "modal-title",
|
|
276
|
-
children:
|
|
312
|
+
children: a
|
|
277
313
|
}),
|
|
278
|
-
/* @__PURE__ */
|
|
314
|
+
/* @__PURE__ */ o("button", {
|
|
279
315
|
type: "button",
|
|
280
316
|
className: "modal-close",
|
|
281
|
-
"aria-label":
|
|
282
|
-
onClick: () =>
|
|
283
|
-
disabled:
|
|
317
|
+
"aria-label": p,
|
|
318
|
+
onClick: () => C(r),
|
|
319
|
+
disabled: h,
|
|
284
320
|
children: "×"
|
|
285
321
|
})
|
|
286
322
|
]
|
|
287
323
|
}),
|
|
288
|
-
/* @__PURE__ */
|
|
324
|
+
/* @__PURE__ */ o("div", {
|
|
289
325
|
className: "modal-children",
|
|
290
|
-
children:
|
|
326
|
+
children: l
|
|
291
327
|
}),
|
|
292
|
-
|
|
328
|
+
d && /* @__PURE__ */ o("div", {
|
|
293
329
|
className: "modal-footer",
|
|
294
|
-
children:
|
|
330
|
+
children: d.map((e, t) => /* @__PURE__ */ o(u, {
|
|
295
331
|
label: e.label,
|
|
296
|
-
onClick: () =>
|
|
297
|
-
disabled:
|
|
332
|
+
onClick: () => C(e.onClick),
|
|
333
|
+
disabled: h
|
|
298
334
|
}, t))
|
|
299
335
|
}),
|
|
300
|
-
|
|
336
|
+
f && /* @__PURE__ */ o("div", {
|
|
301
337
|
className: "modal-footer",
|
|
302
|
-
children:
|
|
338
|
+
children: f
|
|
303
339
|
})
|
|
304
340
|
]
|
|
305
341
|
})
|
|
306
|
-
})
|
|
307
|
-
},
|
|
342
|
+
});
|
|
343
|
+
}, y = ({ label: e, invalid: t, ...n }) => /* @__PURE__ */ s("div", {
|
|
308
344
|
className: "input-wrapper",
|
|
309
|
-
children: [e && /* @__PURE__ */
|
|
345
|
+
children: [e && /* @__PURE__ */ o("label", {
|
|
310
346
|
className: "input-label",
|
|
311
347
|
children: e
|
|
312
|
-
}), /* @__PURE__ */
|
|
348
|
+
}), /* @__PURE__ */ o("input", {
|
|
313
349
|
className: `input-field${t ? " input-field--invalid" : ""}`,
|
|
314
350
|
...n
|
|
315
351
|
})]
|
|
316
|
-
}),
|
|
352
|
+
}), b = ({ label: e, ...t }) => /* @__PURE__ */ s("div", {
|
|
317
353
|
className: "input-wrapper",
|
|
318
|
-
children: [e && /* @__PURE__ */
|
|
354
|
+
children: [e && /* @__PURE__ */ o("label", {
|
|
319
355
|
className: "input-label",
|
|
320
356
|
children: e
|
|
321
|
-
}), /* @__PURE__ */
|
|
357
|
+
}), /* @__PURE__ */ o("input", {
|
|
322
358
|
type: "password",
|
|
323
359
|
className: "input-field",
|
|
324
360
|
...t
|
|
325
361
|
})]
|
|
326
|
-
}),
|
|
327
|
-
let [
|
|
328
|
-
return /* @__PURE__ */
|
|
362
|
+
}), x = ({ open: e, onClose: t, onLogin: n }) => {
|
|
363
|
+
let [r, a] = i(""), [c, l] = i("");
|
|
364
|
+
return /* @__PURE__ */ o(v, {
|
|
329
365
|
open: e,
|
|
330
366
|
onClose: t,
|
|
331
367
|
title: "Login",
|
|
332
|
-
children: /* @__PURE__ */
|
|
368
|
+
children: /* @__PURE__ */ s("form", {
|
|
333
369
|
onSubmit: (e) => {
|
|
334
|
-
e.preventDefault(), n(
|
|
370
|
+
e.preventDefault(), n(r, c);
|
|
335
371
|
},
|
|
336
372
|
children: [
|
|
337
|
-
/* @__PURE__ */
|
|
373
|
+
/* @__PURE__ */ o(y, {
|
|
338
374
|
label: "Username",
|
|
339
|
-
value:
|
|
340
|
-
onChange: (e) =>
|
|
375
|
+
value: r,
|
|
376
|
+
onChange: (e) => a(e.target.value),
|
|
341
377
|
autoFocus: !0
|
|
342
378
|
}),
|
|
343
|
-
/* @__PURE__ */
|
|
379
|
+
/* @__PURE__ */ o(b, {
|
|
344
380
|
label: "Password",
|
|
345
381
|
value: c,
|
|
346
|
-
onChange: (e) =>
|
|
382
|
+
onChange: (e) => l(e.target.value)
|
|
347
383
|
}),
|
|
348
|
-
/* @__PURE__ */
|
|
384
|
+
/* @__PURE__ */ o(u, {
|
|
349
385
|
label: "Login",
|
|
350
386
|
type: "submit",
|
|
351
387
|
style: { width: "100%" }
|
|
@@ -353,90 +389,90 @@ var s = {
|
|
|
353
389
|
]
|
|
354
390
|
})
|
|
355
391
|
});
|
|
356
|
-
},
|
|
392
|
+
}, S = "simonegentili.com-access-token", C = (e) => document.cookie.split("; ").some((t) => t.startsWith(`${e}=`) && t.slice(e.length + 1).length > 0), w = (e) => {
|
|
357
393
|
let t = document.cookie.split("; ").find((t) => t.startsWith(`${e}=`));
|
|
358
394
|
return t ? t.slice(e.length + 1) : null;
|
|
359
|
-
},
|
|
395
|
+
}, T = (e, t) => {
|
|
360
396
|
try {
|
|
361
397
|
return JSON.parse(atob(e.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")))[t] ?? null;
|
|
362
398
|
} catch {
|
|
363
399
|
return null;
|
|
364
400
|
}
|
|
365
|
-
},
|
|
366
|
-
let [v, y] =
|
|
367
|
-
|
|
368
|
-
let D = u ?? (v ? w(
|
|
369
|
-
return
|
|
370
|
-
|
|
371
|
-
}, []), /* @__PURE__ */
|
|
401
|
+
}, E = t(({ title: e = "Quadrato", homePageKey: t = "home", onNavigate: c, cookieName: l = S, username: u = null, usernameJwtField: d = "sub", onLogin: f, onLogout: p, onUserAuthenticated: h }, _) => {
|
|
402
|
+
let [v, y] = i(() => C(l)), [b, E] = i(!1);
|
|
403
|
+
r(_, () => ({ openLoginModal: () => E(!0) }));
|
|
404
|
+
let D = u ?? (v ? T(w(l) ?? "", d) : null);
|
|
405
|
+
return n(() => {
|
|
406
|
+
h?.(v, v ? D : null);
|
|
407
|
+
}, []), /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ o(m, {
|
|
372
408
|
onNavigate: c,
|
|
373
409
|
title: e,
|
|
374
|
-
homePageKey:
|
|
410
|
+
homePageKey: t,
|
|
375
411
|
className: "quadrato-header",
|
|
376
|
-
children: /* @__PURE__ */
|
|
412
|
+
children: /* @__PURE__ */ s("div", {
|
|
377
413
|
className: "quadrato-header-auth",
|
|
378
|
-
children: [v && D && /* @__PURE__ */
|
|
414
|
+
children: [v && D && /* @__PURE__ */ o("span", {
|
|
379
415
|
className: "quadrato-header-username",
|
|
380
416
|
children: D
|
|
381
|
-
}), /* @__PURE__ */
|
|
417
|
+
}), /* @__PURE__ */ o(g, {
|
|
382
418
|
isLoggedIn: v,
|
|
383
419
|
handleLogin: () => E(!0),
|
|
384
420
|
handleLogout: () => {
|
|
385
|
-
|
|
386
|
-
let e =
|
|
387
|
-
y(e),
|
|
421
|
+
p?.();
|
|
422
|
+
let e = C(l);
|
|
423
|
+
y(e), h?.(e, null);
|
|
388
424
|
}
|
|
389
425
|
})]
|
|
390
426
|
})
|
|
391
|
-
}), /* @__PURE__ */
|
|
392
|
-
open:
|
|
427
|
+
}), /* @__PURE__ */ o(x, {
|
|
428
|
+
open: b,
|
|
393
429
|
onClose: () => E(!1),
|
|
394
430
|
onLogin: async (e, t) => {
|
|
395
431
|
await f(e, t);
|
|
396
|
-
let n =
|
|
397
|
-
y(n), E(!1),
|
|
432
|
+
let n = C(l);
|
|
433
|
+
y(n), E(!1), h?.(n, n ? u ?? e : null);
|
|
398
434
|
}
|
|
399
435
|
})] });
|
|
400
436
|
});
|
|
401
|
-
|
|
437
|
+
E.displayName = "QuadratoHeader";
|
|
402
438
|
//#endregion
|
|
403
439
|
//#region src/components/SetPasswordModal/SetPasswordModal.tsx
|
|
404
|
-
var
|
|
405
|
-
let [
|
|
406
|
-
return /* @__PURE__ */
|
|
440
|
+
var D = ({ open: e, onClose: t, onSubmit: n }) => {
|
|
441
|
+
let [r, a] = i(""), [c, l] = i(""), [d, f] = i("");
|
|
442
|
+
return /* @__PURE__ */ o(v, {
|
|
407
443
|
open: e,
|
|
408
444
|
onClose: t,
|
|
409
445
|
title: "Imposta una nuova password",
|
|
410
|
-
children: /* @__PURE__ */
|
|
446
|
+
children: /* @__PURE__ */ s("form", {
|
|
411
447
|
className: "set-password-modal-form",
|
|
412
448
|
onSubmit: (e) => {
|
|
413
|
-
if (e.preventDefault(),
|
|
449
|
+
if (e.preventDefault(), r === "" || c === "") {
|
|
414
450
|
f("Inserisci ed conferma la nuova password.");
|
|
415
451
|
return;
|
|
416
452
|
}
|
|
417
|
-
if (
|
|
453
|
+
if (r !== c) {
|
|
418
454
|
f("Le password non coincidono.");
|
|
419
455
|
return;
|
|
420
456
|
}
|
|
421
|
-
f(""), n(
|
|
457
|
+
f(""), n(r);
|
|
422
458
|
},
|
|
423
459
|
children: [
|
|
424
|
-
/* @__PURE__ */
|
|
460
|
+
/* @__PURE__ */ o(b, {
|
|
425
461
|
label: "Nuova password",
|
|
426
|
-
value:
|
|
427
|
-
onChange: (e) =>
|
|
462
|
+
value: r,
|
|
463
|
+
onChange: (e) => a(e.target.value),
|
|
428
464
|
autoFocus: !0
|
|
429
465
|
}),
|
|
430
|
-
/* @__PURE__ */
|
|
466
|
+
/* @__PURE__ */ o(b, {
|
|
431
467
|
label: "Conferma password",
|
|
432
468
|
value: c,
|
|
433
|
-
onChange: (e) =>
|
|
469
|
+
onChange: (e) => l(e.target.value)
|
|
434
470
|
}),
|
|
435
|
-
d && /* @__PURE__ */
|
|
471
|
+
d && /* @__PURE__ */ o("p", {
|
|
436
472
|
className: "set-password-modal-error",
|
|
437
473
|
children: d
|
|
438
474
|
}),
|
|
439
|
-
/* @__PURE__ */
|
|
475
|
+
/* @__PURE__ */ o(u, {
|
|
440
476
|
label: "Salva password",
|
|
441
477
|
type: "submit",
|
|
442
478
|
style: { width: "100%" }
|
|
@@ -446,4 +482,4 @@ var E = ({ open: e, onClose: t, onSubmit: n }) => {
|
|
|
446
482
|
});
|
|
447
483
|
};
|
|
448
484
|
//#endregion
|
|
449
|
-
export {
|
|
485
|
+
export { g as Authenticator, u as Button, d as Footer, m as Header, l as Icon, v as Modal, E as QuadratoHeader, p as SGFooter, h as SGHeader, D as SetPasswordModal };
|
package/dist/sg-components.css
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
.custom-button{border-radius:var(--primary-radius);border:1px solid var(--primary-border);background:var(--primary-bg);cursor:pointer;font-size:var(--primary-font);font-family:var(--font-family);padding:8px 16px;transition:background .2s}.custom-button:hover{background:var(--primary-hover-bg)}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);
|
|
1
|
+
.custom-button{border-radius:var(--primary-radius);border:1px solid var(--primary-border);background:var(--primary-bg);cursor:pointer;font-size:var(--primary-font);font-family:var(--font-family);padding:8px 16px;transition:background .2s}.custom-button:hover{background:var(--primary-hover-bg)}.custom-button-with-icon{align-items:center;gap:8px;display:inline-flex}.custom-button-label-visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.sg-icon{vertical-align:middle;flex-shrink:0;display:inline-block}.footer{background-color:var(--primary-bg);border-top:1px solid var(--primary-border);font-family:var(--font-family);color:#555;justify-content:space-between;align-items:center;width:100%;padding:16px 32px;font-size:14px;display:flex;position:fixed;bottom:0;left:0}.footer a{color:#1ea7fd;text-decoration:none}.footer a:hover{text-decoration:underline}.logo-text{font-size:var(--font-size-h1);font-family:var(--font-family);margin:0;font-weight:400}.header{z-index:100;width:100%;font-size:var(--font-size);background-color:#fff;border-bottom:1px solid #e1e5e9;position:sticky;top:0;box-shadow:0 2px 4px #0000001a}.header-container{justify-content:flex-start;align-items:center;max-width:1200px;margin:0 auto;padding:16px;display:flex}.header-actions{align-items:center;gap:12px;margin-left:auto;display:flex}.logo{cursor:pointer;color:#333;font-size:24px;font-weight:700;transition:color .2s}.logo:hover{color:#007acc}.logo-full{display:inline}.logo-short{display:none}@media (width<=768px){.header-container{padding:12px 16px}.logo{font-size:var(--font-size)}.logo-full{display:none}.logo-short{display:inline}}@media (width<=480px){.header-container{padding:8px 12px}.logo{font-size:var(--font-size)}}.modal-overlay{background:var(--modal-overlay);z-index:1000;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.25s ease-out sg-modal-overlay-fade-in;display:flex;position:fixed;top:0;left:0}.modal-overlay.modal-overlay-closing{animation:.22s ease-in forwards sg-modal-overlay-fade-out}.modal-content{--drag-x:0px;--drag-y:0px;background:var(--modal-bg);border-radius:var(--primary-radius);font-size:var(--primary-font);min-width:320px;max-width:calc(100vw - 40px);max-height:90vh;transform:translate(var(--drag-x), var(--drag-y));flex-direction:column;animation:.3s ease-out sg-modal-slide-in;display:flex;overflow:hidden;box-shadow:0 2px 16px #00000026}.modal-content.modal-content-closing{animation:.22s ease-in forwards sg-modal-slide-out}@keyframes sg-modal-overlay-fade-in{0%{opacity:0}to{opacity:1}}@keyframes sg-modal-overlay-fade-out{0%{opacity:1}to{opacity:0}}@keyframes sg-modal-slide-in{0%{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}to{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}}@keyframes sg-modal-slide-out{0%{transform:translate(var(--drag-x), var(--drag-y)) scale(1);opacity:1}to{transform:translate(var(--drag-x), calc(var(--drag-y) - 24px)) scale(.97);opacity:0}}.modal-header{background:var(--primary-bg);border-top-left-radius:var(--primary-radius);border-top-right-radius:var(--primary-radius);cursor:grab;touch-action:none;flex:none;align-items:center;gap:8px;padding:16px;display:flex}.modal-header-dragging{cursor:grabbing;-webkit-user-select:none;user-select:none}.modal-icon{color:var(--modal-title-color);display:inline-flex}.modal-title{color:var(--modal-title-color);font-family:var(--font-family);font-size:var(--primary-font);flex:1;margin:0}.modal-close{cursor:pointer;color:var(--modal-title-color);background:0 0;border:none;padding:4px 8px;font-size:20px;line-height:1}.modal-close:disabled{cursor:default;opacity:.6}.modal-children{font-family:var(--font-family);padding:16px;overflow-y:auto}.modal-footer{border-top:1px solid var(--primary-border);flex-wrap:wrap;flex:none;justify-content:flex-end;gap:8px;padding:12px 16px;display:flex}.input-label{font-weight:500;font-family:var(--font-family);font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field--invalid{background-color:#ffe5e5;border-color:#c00}.input-wrapper{margin-bottom:16px}.input-label{font-weight:500;font-size:var(--primary-font);margin-bottom:4px;display:block}.input-field{border-radius:var(--radius);width:calc(100% - 16px);font-size:var(--primary-font);border-style:solid;border-width:1px;padding:8px}.login-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.header.quadrato-header{z-index:999}.quadrato-header-auth{align-items:center;gap:12px;display:flex}.quadrato-header-username{font-size:var(--font-size);color:#333}:root{--unit:3px;--primary-bg:#f5f5f5;--primary-border:#ccc;--radius:calc(var(--unit) * 2);--primary-radius:var(--radius);--primary-font:var(--font-size);--primary-hover-bg:#e0e0e0;--modal-bg:#fff;--modal-overlay:#0000004d;--modal-title-color:#222;--input-bg:#fff;--input-border:#ccc;--input-radius:var(--radius);--input-font:1rem;--font-size:14px;--font-family:Arial, sans-serif;--font-size-h1:calc(var(--font-size) * 1.5)}.theme-dark{--primary-bg:#222;--primary-border:#444;--primary-font:1rem;--font-family:"Inter", Arial, sans-serif;--primary-hover-bg:#333;--modal-bg:#222;--modal-title-color:#fff;--input-bg:#333;--input-border:#555;--input-font:1rem}form{font-family:var(--font-family)}.set-password-modal-form{font-family:var(--font-family);font-size:var(--primary-font);flex-direction:column;gap:16px;display:flex}.set-password-modal-error{color:#d32f2f;font-size:var(--primary-font);margin:0}
|
|
2
2
|
/*$vite$:1*/
|