suus-component-library 0.1.30 → 0.1.32
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/components/form/button/Button.d.ts +1 -1
- package/dist/components/form/button/Button.d.ts.map +1 -1
- package/dist/index.d.ts +4 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/suus-component-library.css +1 -1
- package/dist/suus-component-library.js +319 -215
- package/dist/suus-component-library.umd.cjs +1 -1
- package/package.json +5 -5
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Fragment as e, jsx as t, jsxs as n } from "react/jsx-runtime";
|
|
2
|
-
import {
|
|
3
|
-
var
|
|
2
|
+
import { createContext as r, useCallback as i, useContext as a, useEffect as o, useId as s, useMemo as c, useRef as l, useState as u } from "react";
|
|
3
|
+
var d = {
|
|
4
4
|
suusButton: "_suusButton_1ucmz_1",
|
|
5
5
|
icon: "_icon_1ucmz_45",
|
|
6
6
|
label: "_label_1ucmz_62",
|
|
@@ -13,40 +13,40 @@ var c = {
|
|
|
13
13
|
};
|
|
14
14
|
//#endregion
|
|
15
15
|
//#region src/components/form/button/Button.tsx
|
|
16
|
-
function
|
|
16
|
+
function f({ label: r, onClick: i, type: a = "button", disabled: o = !1, loading: s = !1, variant: c = "primary", colorToken: l = "--color-juice-sugarcane", icon: u, ...f }) {
|
|
17
17
|
return /* @__PURE__ */ t("button", {
|
|
18
18
|
type: a,
|
|
19
19
|
onClick: i,
|
|
20
20
|
disabled: o || s,
|
|
21
|
-
style: { "--button-background-color": `var(${
|
|
21
|
+
style: { "--button-background-color": `var(${l})` },
|
|
22
22
|
className: [
|
|
23
|
-
|
|
24
|
-
c
|
|
25
|
-
s ?
|
|
23
|
+
d.suusButton,
|
|
24
|
+
d[c],
|
|
25
|
+
s ? d.loading : ""
|
|
26
26
|
].filter(Boolean).join(" "),
|
|
27
27
|
"aria-busy": s,
|
|
28
28
|
...f,
|
|
29
29
|
children: s ? /* @__PURE__ */ t("span", {
|
|
30
|
-
className: `${
|
|
30
|
+
className: `${d.loader} ${c === "primary" ? "" : d.loaderSecondary}`,
|
|
31
31
|
"aria-hidden": "true"
|
|
32
|
-
}) : /* @__PURE__ */ n(e, { children: [
|
|
33
|
-
className:
|
|
34
|
-
children:
|
|
32
|
+
}) : /* @__PURE__ */ n(e, { children: [u ? /* @__PURE__ */ t("span", {
|
|
33
|
+
className: d.icon,
|
|
34
|
+
children: u
|
|
35
35
|
}) : null, /* @__PURE__ */ t("span", {
|
|
36
|
-
className:
|
|
36
|
+
className: d.label,
|
|
37
37
|
children: r
|
|
38
38
|
})] })
|
|
39
39
|
});
|
|
40
40
|
}
|
|
41
41
|
//#endregion
|
|
42
42
|
//#region src/components/banner-hero/banner-hero.tsx
|
|
43
|
-
var
|
|
44
|
-
function
|
|
45
|
-
let [v, y] =
|
|
43
|
+
var p = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 800'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0%25' stop-color='%23e8f3ec'/%3E%3Cstop offset='100%25' stop-color='%23d7e6dc'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='800' fill='url(%23g)'/%3E%3C/svg%3E", m = (e) => e === "--color-juice-sugarcane" || e === "--color-juice-tamarind" || e === "--color-juice-guarana" || e === "--color-juice-icetea";
|
|
44
|
+
function h({ title: e, description: r, colorToken: i, imageBackgroundDesktop: a, imageBackgroundTablet: o, imageBackgroundMobile: s, fallbackImageSrc: c, labelButtonPrimary: l, actionButtonPrimary: d, labelButtonSecondary: h, actionButtonSecondary: g, gradientOverlay: _ = !1 }) {
|
|
45
|
+
let [v, y] = u(null), b = a?.trim(), x = o?.trim(), S = s?.trim(), C = c?.trim() || p, w = [
|
|
46
46
|
b,
|
|
47
47
|
x,
|
|
48
48
|
S
|
|
49
|
-
].filter(Boolean).join("|"), T = !!b && v !== w, E =
|
|
49
|
+
].filter(Boolean).join("|"), T = !!b && v !== w, E = m(i) ? i : void 0, D = T ? [
|
|
50
50
|
S ? `${S} 900w` : "",
|
|
51
51
|
x ? `${x} 1600w` : "",
|
|
52
52
|
`${b} 2400w`
|
|
@@ -83,12 +83,12 @@ function f({ title: e, description: r, colorToken: i, imageBackgroundDesktop: a,
|
|
|
83
83
|
}),
|
|
84
84
|
/* @__PURE__ */ n("div", {
|
|
85
85
|
className: "banner-hero-buttonbar",
|
|
86
|
-
children: [
|
|
87
|
-
label:
|
|
86
|
+
children: [l && /* @__PURE__ */ t(f, {
|
|
87
|
+
label: l,
|
|
88
88
|
variant: "primary",
|
|
89
89
|
colorToken: E,
|
|
90
|
-
onClick:
|
|
91
|
-
}), h && /* @__PURE__ */ t(
|
|
90
|
+
onClick: d
|
|
91
|
+
}), h && /* @__PURE__ */ t(f, {
|
|
92
92
|
label: h,
|
|
93
93
|
variant: "secondary",
|
|
94
94
|
onClick: g
|
|
@@ -100,7 +100,111 @@ function f({ title: e, description: r, colorToken: i, imageBackgroundDesktop: a,
|
|
|
100
100
|
})
|
|
101
101
|
});
|
|
102
102
|
}
|
|
103
|
-
|
|
103
|
+
//#endregion
|
|
104
|
+
//#region src/components/accordion/accordion-context.ts
|
|
105
|
+
var g = r(null), _ = {
|
|
106
|
+
accordion: "_accordion_h1kjy_1",
|
|
107
|
+
glassy: "_glassy_h1kjy_9"
|
|
108
|
+
};
|
|
109
|
+
//#endregion
|
|
110
|
+
//#region src/components/accordion/accordion.tsx
|
|
111
|
+
function v(e, t = !1) {
|
|
112
|
+
let n = Array.from(new Set((e ?? []).filter(Boolean)));
|
|
113
|
+
return t ? n : n.slice(0, 1);
|
|
114
|
+
}
|
|
115
|
+
function y({ children: e, variant: n = "default", allowMultipleOpen: r = !1, defaultOpenItems: a, openItems: o, onOpenItemsChange: s, className: l }) {
|
|
116
|
+
let [d, f] = u(() => v(a, r)), p = o !== void 0, m = v(p ? o : d, r), h = c(() => new Set(m), [m]), y = i((e) => {
|
|
117
|
+
let t = h.has(e), n;
|
|
118
|
+
n = t ? m.filter((t) => t !== e) : r ? [...m, e] : [e], p || f(n), s?.(n);
|
|
119
|
+
}, [
|
|
120
|
+
r,
|
|
121
|
+
m,
|
|
122
|
+
p,
|
|
123
|
+
s,
|
|
124
|
+
h
|
|
125
|
+
]), b = c(() => ({
|
|
126
|
+
variant: n,
|
|
127
|
+
isOpen: (e) => h.has(e),
|
|
128
|
+
toggle: y
|
|
129
|
+
}), [
|
|
130
|
+
h,
|
|
131
|
+
y,
|
|
132
|
+
n
|
|
133
|
+
]);
|
|
134
|
+
return /* @__PURE__ */ t("div", {
|
|
135
|
+
className: [
|
|
136
|
+
_.accordion,
|
|
137
|
+
n === "glassy" ? _.glassy : "",
|
|
138
|
+
l ?? ""
|
|
139
|
+
].filter(Boolean).join(" "),
|
|
140
|
+
children: /* @__PURE__ */ t(g.Provider, {
|
|
141
|
+
value: b,
|
|
142
|
+
children: e
|
|
143
|
+
})
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
var b = {
|
|
147
|
+
tile: "_tile_l4lii_1",
|
|
148
|
+
tileDefault: "_tileDefault_l4lii_5",
|
|
149
|
+
tileGlassy: "_tileGlassy_l4lii_9",
|
|
150
|
+
trigger: "_trigger_l4lii_17",
|
|
151
|
+
triggerDefault: "_triggerDefault_l4lii_36",
|
|
152
|
+
triggerGlassy: "_triggerGlassy_l4lii_44",
|
|
153
|
+
labelGroup: "_labelGroup_l4lii_52",
|
|
154
|
+
icon: "_icon_l4lii_59",
|
|
155
|
+
label: "_label_l4lii_52",
|
|
156
|
+
indicator: "_indicator_l4lii_70",
|
|
157
|
+
content: "_content_l4lii_77",
|
|
158
|
+
contentDefault: "_contentDefault_l4lii_83",
|
|
159
|
+
contentGlassy: "_contentGlassy_l4lii_87"
|
|
160
|
+
};
|
|
161
|
+
//#endregion
|
|
162
|
+
//#region src/components/accordion/components/tile-accordion.tsx
|
|
163
|
+
function x({ itemId: e, label: r, icon: i, children: o, variant: c, defaultOpen: l = !1, className: d, disabled: f, onClick: p, ...m }) {
|
|
164
|
+
let h = a(g), _ = s(), v = e ?? _, [y, x] = u(l), S = c ?? h?.variant ?? "default", C = h ? h.isOpen(v) : y, w = `${v}-trigger`, T = `${v}-content`;
|
|
165
|
+
function E(e) {
|
|
166
|
+
f || (h ? h.toggle(v) : x((e) => !e)), p?.(e);
|
|
167
|
+
}
|
|
168
|
+
return /* @__PURE__ */ n("div", {
|
|
169
|
+
className: [
|
|
170
|
+
b.tile,
|
|
171
|
+
S === "glassy" ? b.tileGlassy : b.tileDefault,
|
|
172
|
+
C ? b.tileOpen : "",
|
|
173
|
+
d ?? ""
|
|
174
|
+
].filter(Boolean).join(" "),
|
|
175
|
+
children: [/* @__PURE__ */ n("button", {
|
|
176
|
+
type: "button",
|
|
177
|
+
id: w,
|
|
178
|
+
className: [b.trigger, S === "glassy" ? b.triggerGlassy : b.triggerDefault].filter(Boolean).join(" "),
|
|
179
|
+
onClick: E,
|
|
180
|
+
"aria-expanded": C,
|
|
181
|
+
"aria-controls": T,
|
|
182
|
+
disabled: f,
|
|
183
|
+
...m,
|
|
184
|
+
children: [/* @__PURE__ */ n("span", {
|
|
185
|
+
className: b.labelGroup,
|
|
186
|
+
children: [i ? /* @__PURE__ */ t("span", {
|
|
187
|
+
className: b.icon,
|
|
188
|
+
children: i
|
|
189
|
+
}) : null, /* @__PURE__ */ t("span", {
|
|
190
|
+
className: b.label,
|
|
191
|
+
children: r
|
|
192
|
+
})]
|
|
193
|
+
}), /* @__PURE__ */ t("span", {
|
|
194
|
+
className: b.indicator,
|
|
195
|
+
"aria-hidden": "true",
|
|
196
|
+
children: C ? "-" : "+"
|
|
197
|
+
})]
|
|
198
|
+
}), C ? /* @__PURE__ */ t("div", {
|
|
199
|
+
id: T,
|
|
200
|
+
role: "region",
|
|
201
|
+
"aria-labelledby": w,
|
|
202
|
+
className: [b.content, S === "glassy" ? b.contentGlassy : b.contentDefault].filter(Boolean).join(" "),
|
|
203
|
+
children: o
|
|
204
|
+
}) : null]
|
|
205
|
+
});
|
|
206
|
+
}
|
|
207
|
+
var S = {
|
|
104
208
|
checkboxWrapper: "_checkboxWrapper_hv63b_1",
|
|
105
209
|
checkboxInput: "_checkboxInput_hv63b_15",
|
|
106
210
|
checkboxLabel: "_checkboxLabel_hv63b_24",
|
|
@@ -115,14 +219,14 @@ var p = {
|
|
|
115
219
|
};
|
|
116
220
|
//#endregion
|
|
117
221
|
//#region src/components/form/checkbox/Checkbox.tsx
|
|
118
|
-
function
|
|
222
|
+
function C({ label: e, name: r, id: i, error: a, variant: o = "default", className: s, disabled: c, ...l }) {
|
|
119
223
|
let u = i ?? `${r}-checkbox`;
|
|
120
224
|
return /* @__PURE__ */ n("div", {
|
|
121
225
|
className: [
|
|
122
|
-
|
|
123
|
-
o === "glassy" ?
|
|
124
|
-
a ?
|
|
125
|
-
c ?
|
|
226
|
+
S.checkboxWrapper,
|
|
227
|
+
o === "glassy" ? S.checkboxWrapperGlassy : "",
|
|
228
|
+
a ? S.checkboxWrapperError : "",
|
|
229
|
+
c ? S.checkboxWrapperDisabled : "",
|
|
126
230
|
s ?? ""
|
|
127
231
|
].filter(Boolean).join(" "),
|
|
128
232
|
children: [
|
|
@@ -131,38 +235,38 @@ function m({ label: e, name: r, id: i, error: a, variant: o = "default", classNa
|
|
|
131
235
|
id: u,
|
|
132
236
|
name: r,
|
|
133
237
|
disabled: c,
|
|
134
|
-
className:
|
|
238
|
+
className: S.checkboxInput,
|
|
135
239
|
"aria-invalid": !!a,
|
|
136
240
|
"aria-describedby": `${r}-error`,
|
|
137
241
|
...l
|
|
138
242
|
}),
|
|
139
243
|
/* @__PURE__ */ n("label", {
|
|
140
244
|
htmlFor: u,
|
|
141
|
-
className:
|
|
245
|
+
className: S.checkboxLabel,
|
|
142
246
|
children: [/* @__PURE__ */ t("span", {
|
|
143
|
-
className:
|
|
247
|
+
className: S.customCheckbox,
|
|
144
248
|
"aria-hidden": "true",
|
|
145
249
|
children: /* @__PURE__ */ t("svg", {
|
|
146
|
-
className:
|
|
250
|
+
className: S.checkIcon,
|
|
147
251
|
viewBox: "0 0 24 24",
|
|
148
252
|
focusable: "false",
|
|
149
253
|
"aria-hidden": "true",
|
|
150
254
|
children: /* @__PURE__ */ t("path", { d: "M20 6L9 17L4 12" })
|
|
151
255
|
})
|
|
152
256
|
}), /* @__PURE__ */ t("span", {
|
|
153
|
-
className:
|
|
257
|
+
className: S.checkboxText,
|
|
154
258
|
children: e
|
|
155
259
|
})]
|
|
156
260
|
}),
|
|
157
261
|
/* @__PURE__ */ t("span", {
|
|
158
262
|
id: `${r}-error`,
|
|
159
|
-
className: [
|
|
263
|
+
className: [S.errorMessage, a ? "" : S.errorMessageHidden].filter(Boolean).join(" "),
|
|
160
264
|
children: a || "\xA0"
|
|
161
265
|
})
|
|
162
266
|
]
|
|
163
267
|
});
|
|
164
268
|
}
|
|
165
|
-
var
|
|
269
|
+
var w = {
|
|
166
270
|
chip: "_chip_1po0g_1",
|
|
167
271
|
chipDefault: "_chipDefault_1po0g_21",
|
|
168
272
|
chipGlassy: "_chipGlassy_1po0g_36",
|
|
@@ -171,38 +275,38 @@ var h = {
|
|
|
171
275
|
};
|
|
172
276
|
//#endregion
|
|
173
277
|
//#region src/components/form/chip/Chip.tsx
|
|
174
|
-
function
|
|
175
|
-
let [
|
|
278
|
+
function T({ children: e, variant: n = "default", clickable: r = !0, checked: i, defaultChecked: a = !1, onCheckedChange: o, className: s, ...c }) {
|
|
279
|
+
let [l, d] = u(a), f = typeof i == "boolean", p = f ? i : l;
|
|
176
280
|
function m(e) {
|
|
177
281
|
if (!r) return;
|
|
178
282
|
let t = !p;
|
|
179
|
-
f || d(t), o?.(t),
|
|
283
|
+
f || d(t), o?.(t), c.onClick?.(e);
|
|
180
284
|
}
|
|
181
|
-
let
|
|
285
|
+
let h = n === "glassy" ? w.chipGlassy : w.chipDefault, g = p ? w.chipChecked : "", _ = r ? "" : w.chipDisabled;
|
|
182
286
|
return r ? /* @__PURE__ */ t("button", {
|
|
183
287
|
type: "button",
|
|
184
288
|
"aria-pressed": p,
|
|
185
289
|
className: [
|
|
186
|
-
|
|
290
|
+
w.chip,
|
|
291
|
+
h,
|
|
187
292
|
g,
|
|
188
|
-
|
|
189
|
-
c ?? ""
|
|
293
|
+
s ?? ""
|
|
190
294
|
].filter(Boolean).join(" "),
|
|
191
295
|
onClick: m,
|
|
192
|
-
...
|
|
296
|
+
...c,
|
|
193
297
|
children: e
|
|
194
298
|
}) : /* @__PURE__ */ t("span", {
|
|
195
299
|
className: [
|
|
196
|
-
|
|
300
|
+
w.chip,
|
|
301
|
+
h,
|
|
197
302
|
g,
|
|
198
303
|
_,
|
|
199
|
-
|
|
200
|
-
c ?? ""
|
|
304
|
+
s ?? ""
|
|
201
305
|
].filter(Boolean).join(" "),
|
|
202
306
|
children: e
|
|
203
307
|
});
|
|
204
308
|
}
|
|
205
|
-
var
|
|
309
|
+
var E = {
|
|
206
310
|
dateInputWrapper: "_dateInputWrapper_liktj_1",
|
|
207
311
|
inputDateField: "_inputDateField_liktj_6",
|
|
208
312
|
inputDateFieldGlassy: "_inputDateFieldGlassy_liktj_38",
|
|
@@ -214,80 +318,80 @@ var _ = {
|
|
|
214
318
|
};
|
|
215
319
|
//#endregion
|
|
216
320
|
//#region src/components/form/date-picker/DatePicker.tsx
|
|
217
|
-
function
|
|
218
|
-
let
|
|
219
|
-
function
|
|
220
|
-
|
|
321
|
+
function D({ label: e, name: r, id: i, value: a = null, maxDate: o, minDate: s, error: c, variant: u = "default", className: d, ref: f, onDateChange: p, onBlur: m, disabled: h, ...g }) {
|
|
322
|
+
let _ = i ?? r, v = l(null), y = o ?? /* @__PURE__ */ new Date();
|
|
323
|
+
function b(e) {
|
|
324
|
+
v.current = e, typeof f == "function" ? f(e) : f && (f.current = e);
|
|
221
325
|
}
|
|
222
|
-
function
|
|
326
|
+
function x(e) {
|
|
223
327
|
let t = e.target.value;
|
|
224
328
|
if (!t) {
|
|
225
329
|
p?.(null);
|
|
226
330
|
return;
|
|
227
331
|
}
|
|
228
|
-
p?.(
|
|
332
|
+
p?.(k(t));
|
|
229
333
|
}
|
|
230
|
-
function
|
|
231
|
-
h || (
|
|
334
|
+
function S() {
|
|
335
|
+
h || (v.current?.showPicker?.(), v.current?.focus());
|
|
232
336
|
}
|
|
233
337
|
return /* @__PURE__ */ n("div", {
|
|
234
338
|
className: "inputBlockVertical",
|
|
235
339
|
children: [
|
|
236
340
|
/* @__PURE__ */ t("label", {
|
|
237
|
-
htmlFor:
|
|
341
|
+
htmlFor: _,
|
|
238
342
|
className: ["inputLabel", u === "glassy" ? "inputLabelGlassy" : ""].filter(Boolean).join(" "),
|
|
239
343
|
children: e
|
|
240
344
|
}),
|
|
241
345
|
/* @__PURE__ */ n("div", {
|
|
242
|
-
className:
|
|
346
|
+
className: E.dateInputWrapper,
|
|
243
347
|
children: [/* @__PURE__ */ t("input", {
|
|
244
|
-
id:
|
|
348
|
+
id: _,
|
|
245
349
|
name: r,
|
|
246
|
-
ref:
|
|
350
|
+
ref: b,
|
|
247
351
|
type: "date",
|
|
248
|
-
value:
|
|
249
|
-
max: y
|
|
250
|
-
min:
|
|
352
|
+
value: O(a),
|
|
353
|
+
max: O(y),
|
|
354
|
+
min: s ? O(s) : void 0,
|
|
251
355
|
disabled: h,
|
|
252
|
-
onChange:
|
|
356
|
+
onChange: x,
|
|
253
357
|
onBlur: m,
|
|
254
358
|
className: [
|
|
255
|
-
|
|
256
|
-
u === "glassy" ?
|
|
257
|
-
|
|
359
|
+
E.inputDateField,
|
|
360
|
+
u === "glassy" ? E.inputDateFieldGlassy : "",
|
|
361
|
+
c ? E.inputError : "",
|
|
258
362
|
d ?? ""
|
|
259
363
|
].filter(Boolean).join(" "),
|
|
260
|
-
"aria-invalid": !!
|
|
364
|
+
"aria-invalid": !!c,
|
|
261
365
|
"aria-describedby": `${r}-error`,
|
|
262
366
|
...g
|
|
263
367
|
}), /* @__PURE__ */ t("button", {
|
|
264
368
|
type: "button",
|
|
265
|
-
className:
|
|
266
|
-
onClick:
|
|
369
|
+
className: E.calendarIconButton,
|
|
370
|
+
onClick: S,
|
|
267
371
|
disabled: h,
|
|
268
372
|
"aria-label": "Datum auswählen",
|
|
269
373
|
tabIndex: -1,
|
|
270
|
-
children: /* @__PURE__ */ t(
|
|
374
|
+
children: /* @__PURE__ */ t(A, {})
|
|
271
375
|
})]
|
|
272
376
|
}),
|
|
273
377
|
/* @__PURE__ */ t("span", {
|
|
274
378
|
id: `${r}-error`,
|
|
275
|
-
className: [
|
|
276
|
-
children:
|
|
379
|
+
className: [E.errorMessage, c ? "" : E.errorMessageHidden].filter(Boolean).join(" "),
|
|
380
|
+
children: c || "\xA0"
|
|
277
381
|
})
|
|
278
382
|
]
|
|
279
383
|
});
|
|
280
384
|
}
|
|
281
|
-
function
|
|
385
|
+
function O(e) {
|
|
282
386
|
return e ? `${e.getFullYear()}-${String(e.getMonth() + 1).padStart(2, "0")}-${String(e.getDate()).padStart(2, "0")}` : "";
|
|
283
387
|
}
|
|
284
|
-
function
|
|
388
|
+
function k(e) {
|
|
285
389
|
let [t, n, r] = e.split("-").map(Number);
|
|
286
390
|
return new Date(t, n - 1, r);
|
|
287
391
|
}
|
|
288
|
-
function
|
|
392
|
+
function A() {
|
|
289
393
|
return /* @__PURE__ */ n("svg", {
|
|
290
|
-
className:
|
|
394
|
+
className: E.icon,
|
|
291
395
|
xmlns: "http://www.w3.org/2000/svg",
|
|
292
396
|
viewBox: "0 0 24 24",
|
|
293
397
|
fill: "none",
|
|
@@ -300,7 +404,7 @@ function x() {
|
|
|
300
404
|
]
|
|
301
405
|
});
|
|
302
406
|
}
|
|
303
|
-
var
|
|
407
|
+
var j = {
|
|
304
408
|
inputSelectField: "_inputSelectField_1505j_1",
|
|
305
409
|
inputSelectFieldGlassy: "_inputSelectFieldGlassy_1505j_12",
|
|
306
410
|
inputError: "_inputError_1505j_24",
|
|
@@ -309,7 +413,7 @@ var S = {
|
|
|
309
413
|
};
|
|
310
414
|
//#endregion
|
|
311
415
|
//#region src/components/form/dropdown/Dropdown.tsx
|
|
312
|
-
function
|
|
416
|
+
function M({ label: e, name: r, options: i, placeholder: a, error: o, variant: s = "default", className: c, disabled: l, ...u }) {
|
|
313
417
|
return /* @__PURE__ */ n("div", {
|
|
314
418
|
className: "inputBlockVertical",
|
|
315
419
|
children: [
|
|
@@ -323,9 +427,9 @@ function C({ label: e, name: r, options: i, placeholder: a, error: o, variant: s
|
|
|
323
427
|
name: r,
|
|
324
428
|
disabled: l,
|
|
325
429
|
className: [
|
|
326
|
-
|
|
327
|
-
s === "glassy" ?
|
|
328
|
-
o ?
|
|
430
|
+
j.inputSelectField,
|
|
431
|
+
s === "glassy" ? j.inputSelectFieldGlassy : "",
|
|
432
|
+
o ? j.inputError : "",
|
|
329
433
|
c ?? ""
|
|
330
434
|
].filter(Boolean).join(" "),
|
|
331
435
|
"aria-invalid": !!o,
|
|
@@ -342,13 +446,13 @@ function C({ label: e, name: r, options: i, placeholder: a, error: o, variant: s
|
|
|
342
446
|
}),
|
|
343
447
|
/* @__PURE__ */ t("span", {
|
|
344
448
|
id: `${r}-error`,
|
|
345
|
-
className: [
|
|
449
|
+
className: [j.errorMessage, o ? "" : j.errorMessageHidden].filter(Boolean).join(" "),
|
|
346
450
|
children: o || "\xA0"
|
|
347
451
|
})
|
|
348
452
|
]
|
|
349
453
|
});
|
|
350
454
|
}
|
|
351
|
-
var
|
|
455
|
+
var N = {
|
|
352
456
|
appLink: "_appLink_o2z21_1",
|
|
353
457
|
appLinkDefault: "_appLinkDefault_o2z21_19",
|
|
354
458
|
appLinkGlassy: "_appLinkGlassy_o2z21_30",
|
|
@@ -359,7 +463,7 @@ var w = {
|
|
|
359
463
|
};
|
|
360
464
|
//#endregion
|
|
361
465
|
//#region src/components/form/link/Link.tsx
|
|
362
|
-
function
|
|
466
|
+
function P({ children: e, href: r, onClick: i, newTab: a = !1, showArrow: o = !0, arrowPosition: s = "right", variant: c = "default", className: l, ...u }) {
|
|
363
467
|
function d(e) {
|
|
364
468
|
r || e.preventDefault(), i?.(e);
|
|
365
469
|
}
|
|
@@ -369,32 +473,32 @@ function T({ children: e, href: r, onClick: i, newTab: a = !1, showArrow: o = !0
|
|
|
369
473
|
target: r && a ? "_blank" : void 0,
|
|
370
474
|
rel: r && a ? "noopener noreferrer" : void 0,
|
|
371
475
|
className: [
|
|
372
|
-
|
|
373
|
-
c === "glassy" ?
|
|
476
|
+
N.appLink,
|
|
477
|
+
c === "glassy" ? N.appLinkGlassy : N.appLinkDefault,
|
|
374
478
|
l ?? ""
|
|
375
479
|
].filter(Boolean).join(" "),
|
|
376
480
|
...u,
|
|
377
481
|
children: [
|
|
378
482
|
o && s === "left" && /* @__PURE__ */ t("span", {
|
|
379
|
-
className: [
|
|
483
|
+
className: [N.icon, N.iconLeft].join(" "),
|
|
380
484
|
"aria-hidden": "true",
|
|
381
|
-
children: /* @__PURE__ */ t(
|
|
485
|
+
children: /* @__PURE__ */ t(I, {})
|
|
382
486
|
}),
|
|
383
487
|
/* @__PURE__ */ t("span", {
|
|
384
|
-
className:
|
|
488
|
+
className: N.label,
|
|
385
489
|
children: e
|
|
386
490
|
}),
|
|
387
491
|
o && s === "right" && /* @__PURE__ */ t("span", {
|
|
388
|
-
className:
|
|
492
|
+
className: N.icon,
|
|
389
493
|
"aria-hidden": "true",
|
|
390
|
-
children: /* @__PURE__ */ t(
|
|
494
|
+
children: /* @__PURE__ */ t(F, {})
|
|
391
495
|
})
|
|
392
496
|
]
|
|
393
497
|
});
|
|
394
498
|
}
|
|
395
|
-
function
|
|
499
|
+
function F() {
|
|
396
500
|
return /* @__PURE__ */ n("svg", {
|
|
397
|
-
className:
|
|
501
|
+
className: N.arrowIcon,
|
|
398
502
|
xmlns: "http://www.w3.org/2000/svg",
|
|
399
503
|
viewBox: "0 0 24 24",
|
|
400
504
|
fill: "none",
|
|
@@ -402,9 +506,9 @@ function E() {
|
|
|
402
506
|
children: [/* @__PURE__ */ t("path", { d: "M5 12H19" }), /* @__PURE__ */ t("path", { d: "M13 6L19 12L13 18" })]
|
|
403
507
|
});
|
|
404
508
|
}
|
|
405
|
-
function
|
|
509
|
+
function I() {
|
|
406
510
|
return /* @__PURE__ */ n("svg", {
|
|
407
|
-
className:
|
|
511
|
+
className: N.arrowIcon,
|
|
408
512
|
xmlns: "http://www.w3.org/2000/svg",
|
|
409
513
|
viewBox: "0 0 24 24",
|
|
410
514
|
fill: "none",
|
|
@@ -412,7 +516,7 @@ function D() {
|
|
|
412
516
|
children: [/* @__PURE__ */ t("path", { d: "M19 12H5" }), /* @__PURE__ */ t("path", { d: "M11 6L5 12L11 18" })]
|
|
413
517
|
});
|
|
414
518
|
}
|
|
415
|
-
var
|
|
519
|
+
var L = {
|
|
416
520
|
iconButton: "_iconButton_14rp3_1",
|
|
417
521
|
withFrame: "_withFrame_14rp3_17",
|
|
418
522
|
withoutFrame: "_withoutFrame_14rp3_24",
|
|
@@ -425,7 +529,7 @@ var O = {
|
|
|
425
529
|
};
|
|
426
530
|
//#endregion
|
|
427
531
|
//#region src/components/form/icon-button/IconButton.tsx
|
|
428
|
-
function
|
|
532
|
+
function R({ label: e, icon: n, variant: r = "default", frame: i = !0, active: a = !1, size: o = "default", className: s, type: c = "button", disabled: l, ...u }) {
|
|
429
533
|
return /* @__PURE__ */ t("button", {
|
|
430
534
|
type: c,
|
|
431
535
|
"aria-label": e,
|
|
@@ -433,23 +537,23 @@ function k({ label: e, icon: n, variant: r = "default", frame: i = !0, active: a
|
|
|
433
537
|
"aria-pressed": a,
|
|
434
538
|
disabled: l,
|
|
435
539
|
className: [
|
|
436
|
-
|
|
437
|
-
i ?
|
|
438
|
-
r === "glassy" ?
|
|
439
|
-
a ?
|
|
440
|
-
o === "small" ?
|
|
441
|
-
o === "large" ?
|
|
540
|
+
L.iconButton,
|
|
541
|
+
i ? L.withFrame : L.withoutFrame,
|
|
542
|
+
r === "glassy" ? L.glassy : "",
|
|
543
|
+
a ? L.active : "",
|
|
544
|
+
o === "small" ? L.small : "",
|
|
545
|
+
o === "large" ? L.large : "",
|
|
442
546
|
s ?? ""
|
|
443
547
|
].filter(Boolean).join(" "),
|
|
444
548
|
...u,
|
|
445
549
|
children: /* @__PURE__ */ t("span", {
|
|
446
|
-
className:
|
|
550
|
+
className: L.icon,
|
|
447
551
|
"aria-hidden": "true",
|
|
448
552
|
children: n
|
|
449
553
|
})
|
|
450
554
|
});
|
|
451
555
|
}
|
|
452
|
-
var
|
|
556
|
+
var z = {
|
|
453
557
|
passwordInputWrapper: "_passwordInputWrapper_1ris8_1",
|
|
454
558
|
inputTextField: "_inputTextField_1ris8_6",
|
|
455
559
|
inputTextFieldGlassy: "_inputTextFieldGlassy_1ris8_18",
|
|
@@ -461,8 +565,8 @@ var A = {
|
|
|
461
565
|
};
|
|
462
566
|
//#endregion
|
|
463
567
|
//#region src/components/form/password/Password.tsx
|
|
464
|
-
function
|
|
465
|
-
let [p, m] =
|
|
568
|
+
function B({ label: e, name: r, id: i, error: a, variant: o = "default", className: s, disabled: c, ref: l, autoComplete: d = "current-password", ...f }) {
|
|
569
|
+
let [p, m] = u(!1), h = i ?? r;
|
|
466
570
|
function g() {
|
|
467
571
|
m((e) => !e);
|
|
468
572
|
}
|
|
@@ -475,44 +579,44 @@ function j({ label: e, name: r, id: i, error: a, variant: o = "default", classNa
|
|
|
475
579
|
children: e
|
|
476
580
|
}),
|
|
477
581
|
/* @__PURE__ */ n("div", {
|
|
478
|
-
className:
|
|
582
|
+
className: z.passwordInputWrapper,
|
|
479
583
|
children: [/* @__PURE__ */ t("input", {
|
|
480
584
|
id: h,
|
|
481
585
|
name: r,
|
|
482
|
-
ref:
|
|
586
|
+
ref: l,
|
|
483
587
|
type: p ? "text" : "password",
|
|
484
|
-
disabled:
|
|
588
|
+
disabled: c,
|
|
485
589
|
autoComplete: d,
|
|
486
590
|
className: [
|
|
487
|
-
|
|
488
|
-
o === "glassy" ?
|
|
489
|
-
a ?
|
|
490
|
-
|
|
591
|
+
z.inputTextField,
|
|
592
|
+
o === "glassy" ? z.inputTextFieldGlassy : "",
|
|
593
|
+
a ? z.inputError : "",
|
|
594
|
+
s ?? ""
|
|
491
595
|
].filter(Boolean).join(" "),
|
|
492
596
|
"aria-invalid": !!a,
|
|
493
597
|
"aria-describedby": `${r}-error`,
|
|
494
598
|
...f
|
|
495
599
|
}), /* @__PURE__ */ t("button", {
|
|
496
600
|
type: "button",
|
|
497
|
-
className:
|
|
601
|
+
className: z.togglePasswordButton,
|
|
498
602
|
onClick: g,
|
|
499
|
-
disabled:
|
|
603
|
+
disabled: c,
|
|
500
604
|
"aria-label": p ? "Passwort ausblenden" : "Passwort anzeigen",
|
|
501
605
|
"aria-pressed": p,
|
|
502
|
-
children: t(p ?
|
|
606
|
+
children: t(p ? H : V, {})
|
|
503
607
|
})]
|
|
504
608
|
}),
|
|
505
609
|
/* @__PURE__ */ t("span", {
|
|
506
610
|
id: `${r}-error`,
|
|
507
|
-
className: [
|
|
611
|
+
className: [z.errorMessage, a ? "" : z.errorMessageHidden].filter(Boolean).join(" "),
|
|
508
612
|
children: a || "\xA0"
|
|
509
613
|
})
|
|
510
614
|
]
|
|
511
615
|
});
|
|
512
616
|
}
|
|
513
|
-
function
|
|
617
|
+
function V() {
|
|
514
618
|
return /* @__PURE__ */ n("svg", {
|
|
515
|
-
className:
|
|
619
|
+
className: z.icon,
|
|
516
620
|
xmlns: "http://www.w3.org/2000/svg",
|
|
517
621
|
viewBox: "0 0 24 24",
|
|
518
622
|
fill: "none",
|
|
@@ -524,9 +628,9 @@ function M() {
|
|
|
524
628
|
})]
|
|
525
629
|
});
|
|
526
630
|
}
|
|
527
|
-
function
|
|
631
|
+
function H() {
|
|
528
632
|
return /* @__PURE__ */ t("svg", {
|
|
529
|
-
className:
|
|
633
|
+
className: z.icon,
|
|
530
634
|
xmlns: "http://www.w3.org/2000/svg",
|
|
531
635
|
viewBox: "0 0 24 24",
|
|
532
636
|
fill: "none",
|
|
@@ -534,7 +638,7 @@ function N() {
|
|
|
534
638
|
children: /* @__PURE__ */ t("path", { d: "M17.94 17.94A10.94 10.94 0 0 1 12 20C7 20 2.73 16.11 1 12c.74-1.64 1.82-3.06 3.11-4.24m3.52-2.42A10.94 10.94 0 0 1 12 4c5 0 9.27 3.89 11 8-1.1 2.42-2.91 4.5-5.06 5.94M1 1l22 22" })
|
|
535
639
|
});
|
|
536
640
|
}
|
|
537
|
-
var
|
|
641
|
+
var U = {
|
|
538
642
|
inputWrapper: "_inputWrapper_1qpua_1",
|
|
539
643
|
inputTextField: "_inputTextField_1qpua_6",
|
|
540
644
|
inputTextFieldGlassy: "_inputTextFieldGlassy_1qpua_18",
|
|
@@ -550,9 +654,9 @@ var P = {
|
|
|
550
654
|
};
|
|
551
655
|
//#endregion
|
|
552
656
|
//#region src/components/form/postal-code/PostalCode.tsx
|
|
553
|
-
function
|
|
554
|
-
let b =
|
|
555
|
-
A && w.trim().length >= 4 && E.length,
|
|
657
|
+
function W({ label: e, name: r, id: i, error: a, variant: c = "default", className: d, disabled: f, placeholder: p = "z.B. 8001 oder Zürich", ref: m, onChange: h, onBlur: g, onValueChange: _, onSuggestionSelect: v, ...y }) {
|
|
658
|
+
let b = s(), x = i ?? `${r}-${b}`, S = l(null), C = l(!1), [w, T] = u(""), [E, D] = u([]), [O, k] = u(!1), [A, j] = u(!1), M = w.trim().match(/^(\d+)\s+(.+)$/), N = !!M, P = M?.[1], F = M?.[2], I = N && E.some((e) => e.postalCode === P && e.locality === F), L = /^\d+$/.test(w.trim()), R = w.trim().length >= 4 && L && !O, z = R && E.some((e) => e.postalCode === w.trim()), B = R && !z, V = a ?? (B ? "Diese Schweizer Postleitzahl wurde nicht gefunden." : void 0);
|
|
659
|
+
A && w.trim().length >= 4 && E.length, o(() => {
|
|
556
660
|
let e = w.trim();
|
|
557
661
|
if (e.length < 2) {
|
|
558
662
|
D([]), j(!1);
|
|
@@ -589,7 +693,7 @@ function F({ label: e, name: a, id: c, error: l, variant: u = "default", classNa
|
|
|
589
693
|
window.clearTimeout(r), t.abort();
|
|
590
694
|
};
|
|
591
695
|
}, [w]);
|
|
592
|
-
function
|
|
696
|
+
function H(e) {
|
|
593
697
|
S.current = e, typeof m == "function" ? m(e) : m && (m.current = e);
|
|
594
698
|
}
|
|
595
699
|
function W(e) {
|
|
@@ -604,16 +708,16 @@ function F({ label: e, name: a, id: c, error: l, variant: u = "default", classNa
|
|
|
604
708
|
children: [
|
|
605
709
|
/* @__PURE__ */ t("label", {
|
|
606
710
|
htmlFor: x,
|
|
607
|
-
className: ["inputLabel",
|
|
711
|
+
className: ["inputLabel", c === "glassy" ? "inputLabelGlassy" : ""].filter(Boolean).join(" "),
|
|
608
712
|
children: e
|
|
609
713
|
}),
|
|
610
714
|
/* @__PURE__ */ n("div", {
|
|
611
|
-
className:
|
|
715
|
+
className: U.inputWrapper,
|
|
612
716
|
children: [
|
|
613
717
|
/* @__PURE__ */ t("input", {
|
|
614
718
|
id: x,
|
|
615
|
-
name:
|
|
616
|
-
ref:
|
|
719
|
+
name: r,
|
|
720
|
+
ref: H,
|
|
617
721
|
type: "text",
|
|
618
722
|
inputMode: "search",
|
|
619
723
|
autoComplete: "postal-code",
|
|
@@ -623,56 +727,56 @@ function F({ label: e, name: a, id: c, error: l, variant: u = "default", classNa
|
|
|
623
727
|
onChange: W,
|
|
624
728
|
onBlur: g,
|
|
625
729
|
className: [
|
|
626
|
-
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
730
|
+
U.inputTextField,
|
|
731
|
+
c === "glassy" ? U.inputTextFieldGlassy : "",
|
|
732
|
+
z || I ? U.inputValid : "",
|
|
733
|
+
B || a ? U.inputError : "",
|
|
630
734
|
d ?? ""
|
|
631
735
|
].filter(Boolean).join(" "),
|
|
632
|
-
"aria-invalid": !!
|
|
633
|
-
"aria-describedby": `${
|
|
736
|
+
"aria-invalid": !!V,
|
|
737
|
+
"aria-describedby": `${r}-error`,
|
|
634
738
|
...y
|
|
635
739
|
}),
|
|
636
740
|
O && /* @__PURE__ */ t("span", {
|
|
637
|
-
className:
|
|
741
|
+
className: U.loading,
|
|
638
742
|
children: "Lädt…"
|
|
639
743
|
}),
|
|
640
744
|
E.length > 0 && /* @__PURE__ */ t("ul", {
|
|
641
|
-
className:
|
|
745
|
+
className: U.suggestionList,
|
|
642
746
|
children: E.map((e) => /* @__PURE__ */ t("li", { children: /* @__PURE__ */ n("button", {
|
|
643
747
|
type: "button",
|
|
644
|
-
className:
|
|
748
|
+
className: U.suggestionItem,
|
|
645
749
|
onMouseDown: (e) => e.preventDefault(),
|
|
646
750
|
onClick: () => G(e),
|
|
647
751
|
children: [/* @__PURE__ */ t("span", { children: e.postalCode }), /* @__PURE__ */ t("span", {
|
|
648
|
-
className:
|
|
752
|
+
className: U.locality,
|
|
649
753
|
children: e.locality
|
|
650
754
|
})]
|
|
651
755
|
}) }, e.label))
|
|
652
756
|
}),
|
|
653
|
-
A && w.trim().length >= 2 && E.length === 0 && !O && !
|
|
654
|
-
className:
|
|
757
|
+
A && w.trim().length >= 2 && E.length === 0 && !O && !I && !B && /* @__PURE__ */ t("div", {
|
|
758
|
+
className: U.emptyState,
|
|
655
759
|
children: "Keine Schweizer PLZ oder Ortschaft gefunden."
|
|
656
760
|
})
|
|
657
761
|
]
|
|
658
762
|
}),
|
|
659
|
-
|
|
660
|
-
className:
|
|
763
|
+
z && /* @__PURE__ */ t("span", {
|
|
764
|
+
className: U.successMessage,
|
|
661
765
|
children: "Gültige Schweizer Postleitzahl"
|
|
662
766
|
}),
|
|
663
|
-
|
|
664
|
-
className:
|
|
767
|
+
I && /* @__PURE__ */ t("span", {
|
|
768
|
+
className: U.successMessage,
|
|
665
769
|
children: "Gültige Schweizer Postleitzahl"
|
|
666
770
|
}),
|
|
667
771
|
/* @__PURE__ */ t("span", {
|
|
668
|
-
id: `${
|
|
669
|
-
className: [
|
|
670
|
-
children:
|
|
772
|
+
id: `${r}-error`,
|
|
773
|
+
className: [U.errorMessage, V ? "" : U.errorMessageHidden].filter(Boolean).join(" "),
|
|
774
|
+
children: V || "\xA0"
|
|
671
775
|
})
|
|
672
776
|
]
|
|
673
777
|
});
|
|
674
778
|
}
|
|
675
|
-
var
|
|
779
|
+
var G = {
|
|
676
780
|
radioGroup: "_radioGroup_1yjda_5",
|
|
677
781
|
optionGroup: "_optionGroup_1yjda_16",
|
|
678
782
|
optionWrapper: "_optionWrapper_1yjda_23",
|
|
@@ -689,46 +793,46 @@ var I = {
|
|
|
689
793
|
};
|
|
690
794
|
//#endregion
|
|
691
795
|
//#region src/components/form/radiobutton/RadioButton.tsx
|
|
692
|
-
function
|
|
796
|
+
function K({ label: e, name: r, options: i, error: a, variant: o = "default", disabled: s, value: c, defaultValue: l, onChange: u, ...d }) {
|
|
693
797
|
let f = c !== void 0;
|
|
694
798
|
return /* @__PURE__ */ t("div", {
|
|
695
799
|
className: "inputBlockVertical",
|
|
696
800
|
children: /* @__PURE__ */ n("fieldset", {
|
|
697
|
-
className: [
|
|
801
|
+
className: [G.radioGroup].filter(Boolean).join(" "),
|
|
698
802
|
"aria-invalid": !!a,
|
|
699
803
|
"aria-describedby": `${r}-error`,
|
|
700
804
|
children: [
|
|
701
805
|
e && /* @__PURE__ */ t("label", {
|
|
702
806
|
htmlFor: r,
|
|
703
|
-
className: [
|
|
807
|
+
className: [G.inputLabel, o === "glassy" ? "--form-input-glassy-text-label" : "--form-input-default-text-label"].filter(Boolean).join(" "),
|
|
704
808
|
children: e
|
|
705
809
|
}),
|
|
706
810
|
/* @__PURE__ */ t("div", {
|
|
707
|
-
className:
|
|
811
|
+
className: G.optionGroup,
|
|
708
812
|
children: i.map((e) => {
|
|
709
813
|
let i = f ? { checked: c === e.value } : { defaultChecked: l === e.value };
|
|
710
814
|
return /* @__PURE__ */ n("label", {
|
|
711
|
-
className: [
|
|
815
|
+
className: [G.optionWrapper, s ? G.optionWrapperDisabled : ""].filter(Boolean).join(" "),
|
|
712
816
|
children: [/* @__PURE__ */ t("input", {
|
|
713
817
|
type: "radio",
|
|
714
818
|
name: r,
|
|
715
819
|
value: e.value,
|
|
716
820
|
disabled: s,
|
|
717
|
-
className:
|
|
821
|
+
className: G.radioInput,
|
|
718
822
|
onChange: u,
|
|
719
823
|
...i,
|
|
720
824
|
...d
|
|
721
825
|
}), /* @__PURE__ */ n("span", {
|
|
722
826
|
className: [
|
|
723
|
-
|
|
724
|
-
o === "glassy" ?
|
|
725
|
-
a ?
|
|
827
|
+
G.optionButton,
|
|
828
|
+
o === "glassy" ? G.optionButtonGlassy : G.optionButtonDefault,
|
|
829
|
+
a ? G.optionButtonError : ""
|
|
726
830
|
].filter(Boolean).join(" "),
|
|
727
831
|
children: [/* @__PURE__ */ t("span", {
|
|
728
|
-
className:
|
|
832
|
+
className: G.optionTitle,
|
|
729
833
|
children: e.label
|
|
730
834
|
}), e.description && /* @__PURE__ */ t("span", {
|
|
731
|
-
className:
|
|
835
|
+
className: G.optionDescription,
|
|
732
836
|
children: e.description
|
|
733
837
|
})]
|
|
734
838
|
})]
|
|
@@ -737,14 +841,14 @@ function L({ label: e, name: r, options: i, error: a, variant: o = "default", di
|
|
|
737
841
|
}),
|
|
738
842
|
/* @__PURE__ */ t("span", {
|
|
739
843
|
id: `${r}-error`,
|
|
740
|
-
className: [
|
|
844
|
+
className: [G.errorMessage, a ? "" : G.errorMessageHidden].filter(Boolean).join(" "),
|
|
741
845
|
children: a || "\xA0"
|
|
742
846
|
})
|
|
743
847
|
]
|
|
744
848
|
})
|
|
745
849
|
});
|
|
746
850
|
}
|
|
747
|
-
var
|
|
851
|
+
var q = {
|
|
748
852
|
switchWrapper: "_switchWrapper_1dr6p_1",
|
|
749
853
|
switchCheckbox: "_switchCheckbox_1dr6p_5",
|
|
750
854
|
switchLabel: "_switchLabel_1dr6p_13",
|
|
@@ -762,54 +866,54 @@ var R = {
|
|
|
762
866
|
};
|
|
763
867
|
//#endregion
|
|
764
868
|
//#region src/components/form/switch/Switch.tsx
|
|
765
|
-
function
|
|
869
|
+
function J({ name: e, id: r, label: i, error: a, variant: o = "default", className: s, disabled: c, ...l }) {
|
|
766
870
|
let u = r ?? `${e}-switch`;
|
|
767
871
|
return /* @__PURE__ */ t("div", {
|
|
768
872
|
className: "inputBlockHorizontal",
|
|
769
873
|
children: /* @__PURE__ */ n("div", {
|
|
770
|
-
className: [
|
|
874
|
+
className: [q.switchWrapper, s ?? ""].filter(Boolean).join(" "),
|
|
771
875
|
children: [
|
|
772
876
|
/* @__PURE__ */ t("input", {
|
|
773
877
|
id: u,
|
|
774
878
|
name: e,
|
|
775
879
|
type: "checkbox",
|
|
776
880
|
disabled: c,
|
|
777
|
-
className:
|
|
881
|
+
className: q.switchCheckbox,
|
|
778
882
|
"aria-invalid": !!a,
|
|
779
883
|
"aria-describedby": `${e}-error`,
|
|
780
884
|
...l
|
|
781
885
|
}),
|
|
782
886
|
/* @__PURE__ */ n("label", {
|
|
783
887
|
htmlFor: u,
|
|
784
|
-
className: [
|
|
888
|
+
className: [q.switchLabel, o === "glassy" ? q.switchLabelGlassy : q.switchLabelDefault].filter(Boolean).join(" "),
|
|
785
889
|
children: [i && /* @__PURE__ */ t("span", {
|
|
786
|
-
className:
|
|
890
|
+
className: q.switchText,
|
|
787
891
|
children: i
|
|
788
892
|
}), /* @__PURE__ */ t("span", {
|
|
789
|
-
className: [
|
|
893
|
+
className: [q.switchBackground, o === "glassy" ? q.switchBackgroundGlassy : q.switchBackgroundDefault].filter(Boolean).join(" "),
|
|
790
894
|
children: /* @__PURE__ */ n("span", {
|
|
791
|
-
className:
|
|
895
|
+
className: q.switchButton,
|
|
792
896
|
"aria-hidden": "true",
|
|
793
897
|
children: [/* @__PURE__ */ t("span", {
|
|
794
|
-
className:
|
|
795
|
-
children: /* @__PURE__ */ t(
|
|
898
|
+
className: q.iconChecked,
|
|
899
|
+
children: /* @__PURE__ */ t(Y, {})
|
|
796
900
|
}), /* @__PURE__ */ t("span", {
|
|
797
|
-
className:
|
|
798
|
-
children: /* @__PURE__ */ t(
|
|
901
|
+
className: q.iconUnchecked,
|
|
902
|
+
children: /* @__PURE__ */ t(X, {})
|
|
799
903
|
})]
|
|
800
904
|
})
|
|
801
905
|
})]
|
|
802
906
|
}),
|
|
803
907
|
/* @__PURE__ */ t("span", {
|
|
804
908
|
id: `${e}-error`,
|
|
805
|
-
className: [
|
|
909
|
+
className: [q.errorMessage, a ? "" : q.errorMessageHidden].filter(Boolean).join(" "),
|
|
806
910
|
children: a || "\xA0"
|
|
807
911
|
})
|
|
808
912
|
]
|
|
809
913
|
})
|
|
810
914
|
});
|
|
811
915
|
}
|
|
812
|
-
function
|
|
916
|
+
function Y() {
|
|
813
917
|
return /* @__PURE__ */ t("svg", {
|
|
814
918
|
width: "16",
|
|
815
919
|
height: "16",
|
|
@@ -825,7 +929,7 @@ function B() {
|
|
|
825
929
|
})
|
|
826
930
|
});
|
|
827
931
|
}
|
|
828
|
-
function
|
|
932
|
+
function X() {
|
|
829
933
|
return /* @__PURE__ */ t("svg", {
|
|
830
934
|
width: "16",
|
|
831
935
|
height: "16",
|
|
@@ -840,7 +944,7 @@ function V() {
|
|
|
840
944
|
})
|
|
841
945
|
});
|
|
842
946
|
}
|
|
843
|
-
var
|
|
947
|
+
var Z = {
|
|
844
948
|
inputLabel: "_inputLabel_1hmxe_1",
|
|
845
949
|
inputTextField: "_inputTextField_1hmxe_5",
|
|
846
950
|
inputTextFieldGlassy: "_inputTextFieldGlassy_1hmxe_22",
|
|
@@ -850,13 +954,13 @@ var H = {
|
|
|
850
954
|
};
|
|
851
955
|
//#endregion
|
|
852
956
|
//#region src/components/form/textfield/TextField.tsx
|
|
853
|
-
function
|
|
957
|
+
function Q({ label: e, name: r, error: i, placeholder: a, variant: o = "default", className: s, ref: c, ...l }) {
|
|
854
958
|
return /* @__PURE__ */ n("div", {
|
|
855
959
|
className: "inputBlockVertical",
|
|
856
960
|
children: [
|
|
857
961
|
/* @__PURE__ */ t("label", {
|
|
858
962
|
htmlFor: r,
|
|
859
|
-
className: [
|
|
963
|
+
className: [Z.inputLabel, o === "glassy" ? "inputLabelGlassy" : ""].filter(Boolean).join(" "),
|
|
860
964
|
children: e
|
|
861
965
|
}),
|
|
862
966
|
/* @__PURE__ */ t("input", {
|
|
@@ -865,9 +969,9 @@ function U({ label: e, name: r, error: i, placeholder: a, variant: o = "default"
|
|
|
865
969
|
ref: c,
|
|
866
970
|
placeholder: a,
|
|
867
971
|
className: [
|
|
868
|
-
|
|
869
|
-
o === "glassy" ?
|
|
870
|
-
i ?
|
|
972
|
+
Z.inputTextField,
|
|
973
|
+
o === "glassy" ? Z.inputTextFieldGlassy : "",
|
|
974
|
+
i ? Z.inputError : "",
|
|
871
975
|
s ?? ""
|
|
872
976
|
].filter(Boolean).join(" "),
|
|
873
977
|
"aria-invalid": !!i,
|
|
@@ -876,13 +980,13 @@ function U({ label: e, name: r, error: i, placeholder: a, variant: o = "default"
|
|
|
876
980
|
}),
|
|
877
981
|
/* @__PURE__ */ t("span", {
|
|
878
982
|
id: `${r}-error`,
|
|
879
|
-
className: [
|
|
983
|
+
className: [Z.errorMessage, i ? "" : Z.errorMessageHidden].filter(Boolean).join(" "),
|
|
880
984
|
children: i || "\xA0"
|
|
881
985
|
})
|
|
882
986
|
]
|
|
883
987
|
});
|
|
884
988
|
}
|
|
885
|
-
var
|
|
989
|
+
var $ = {
|
|
886
990
|
wrapper: "_wrapper_1get6_1",
|
|
887
991
|
label: "_label_1get6_7",
|
|
888
992
|
labelGlassy: "_labelGlassy_1get6_13",
|
|
@@ -908,11 +1012,11 @@ var W = {
|
|
|
908
1012
|
};
|
|
909
1013
|
//#endregion
|
|
910
1014
|
//#region src/components/form/upload/Upload.tsx
|
|
911
|
-
function
|
|
912
|
-
let y =
|
|
913
|
-
|
|
914
|
-
T && w(
|
|
915
|
-
}, [
|
|
1015
|
+
function ee({ label: e, name: r, id: i, file: a, error: l, variant: d = "default", accept: f = "image/*", maxSizeBytes: p = 5 * 1024 * 1024, disabled: m, className: h, onChange: g, onFileChange: _, ...v }) {
|
|
1016
|
+
let y = s(), b = i ?? `${r}-${y}`, [x, S] = u(!1), [C, w] = u(a ?? null), T = a !== void 0, E = T ? a : C, D = c(() => !E || !E.type.startsWith("image/") ? null : URL.createObjectURL(E), [E]);
|
|
1017
|
+
o(() => {
|
|
1018
|
+
T && w(a ?? null);
|
|
1019
|
+
}, [a, T]), o(() => () => {
|
|
916
1020
|
D && URL.revokeObjectURL(D);
|
|
917
1021
|
}, [D]);
|
|
918
1022
|
function O(e) {
|
|
@@ -939,20 +1043,20 @@ function G({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
|
|
|
939
1043
|
}
|
|
940
1044
|
let F = Math.round(p / (1024 * 1024));
|
|
941
1045
|
return /* @__PURE__ */ n("div", {
|
|
942
|
-
className: [
|
|
1046
|
+
className: [$.wrapper, h ?? ""].filter(Boolean).join(" "),
|
|
943
1047
|
children: [
|
|
944
1048
|
/* @__PURE__ */ t("label", {
|
|
945
|
-
className: [
|
|
1049
|
+
className: [$.label, d === "glassy" ? $.labelGlassy : ""].filter(Boolean).join(" "),
|
|
946
1050
|
htmlFor: b,
|
|
947
1051
|
children: e
|
|
948
1052
|
}),
|
|
949
1053
|
/* @__PURE__ */ n("div", {
|
|
950
1054
|
className: [
|
|
951
|
-
|
|
952
|
-
d === "glassy" ?
|
|
953
|
-
x ?
|
|
954
|
-
|
|
955
|
-
m ?
|
|
1055
|
+
$.dropzone,
|
|
1056
|
+
d === "glassy" ? $.dropzoneGlassy : "",
|
|
1057
|
+
x ? $.dragOver : "",
|
|
1058
|
+
l ? $.errorState : "",
|
|
1059
|
+
m ? $.disabled : ""
|
|
956
1060
|
].filter(Boolean).join(" "),
|
|
957
1061
|
onDragOver: j,
|
|
958
1062
|
onDragLeave: M,
|
|
@@ -960,32 +1064,32 @@ function G({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
|
|
|
960
1064
|
children: [
|
|
961
1065
|
/* @__PURE__ */ t("input", {
|
|
962
1066
|
id: b,
|
|
963
|
-
name:
|
|
964
|
-
className:
|
|
1067
|
+
name: r,
|
|
1068
|
+
className: $.hiddenInput,
|
|
965
1069
|
type: "file",
|
|
966
1070
|
accept: f,
|
|
967
1071
|
disabled: m,
|
|
968
1072
|
onChange: A,
|
|
969
|
-
"aria-invalid": !!
|
|
970
|
-
"aria-describedby": `${
|
|
1073
|
+
"aria-invalid": !!l,
|
|
1074
|
+
"aria-describedby": `${r}-error`,
|
|
971
1075
|
...v
|
|
972
1076
|
}),
|
|
973
1077
|
/* @__PURE__ */ t("label", {
|
|
974
1078
|
htmlFor: b,
|
|
975
|
-
className:
|
|
1079
|
+
className: $.dropzoneContent,
|
|
976
1080
|
children: E ? /* @__PURE__ */ n("span", {
|
|
977
|
-
className:
|
|
1081
|
+
className: $.selected,
|
|
978
1082
|
children: [D && /* @__PURE__ */ t("img", {
|
|
979
|
-
className:
|
|
1083
|
+
className: $.preview,
|
|
980
1084
|
src: D,
|
|
981
1085
|
alt: `Vorschau von ${E.name}`
|
|
982
1086
|
}), /* @__PURE__ */ n("span", {
|
|
983
|
-
className:
|
|
1087
|
+
className: $.fileMeta,
|
|
984
1088
|
children: [/* @__PURE__ */ t("span", {
|
|
985
|
-
className:
|
|
1089
|
+
className: $.fileName,
|
|
986
1090
|
children: E.name
|
|
987
1091
|
}), /* @__PURE__ */ n("span", {
|
|
988
|
-
className:
|
|
1092
|
+
className: $.fileSize,
|
|
989
1093
|
children: [
|
|
990
1094
|
(E.size / 1024).toFixed(0),
|
|
991
1095
|
" KB ·",
|
|
@@ -995,18 +1099,18 @@ function G({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
|
|
|
995
1099
|
})]
|
|
996
1100
|
})]
|
|
997
1101
|
}) : /* @__PURE__ */ n("span", {
|
|
998
|
-
className:
|
|
1102
|
+
className: $.placeholder,
|
|
999
1103
|
children: [
|
|
1000
1104
|
/* @__PURE__ */ t("span", {
|
|
1001
|
-
className:
|
|
1105
|
+
className: $.big,
|
|
1002
1106
|
children: "Datei hier reinziehen"
|
|
1003
1107
|
}),
|
|
1004
1108
|
/* @__PURE__ */ t("span", {
|
|
1005
|
-
className:
|
|
1109
|
+
className: $.small,
|
|
1006
1110
|
children: "…oder klicken, um auszuwählen"
|
|
1007
1111
|
}),
|
|
1008
1112
|
/* @__PURE__ */ n("span", {
|
|
1009
|
-
className:
|
|
1113
|
+
className: $.hint,
|
|
1010
1114
|
children: [
|
|
1011
1115
|
"Erlaubt: ",
|
|
1012
1116
|
f,
|
|
@@ -1020,7 +1124,7 @@ function G({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
|
|
|
1020
1124
|
}),
|
|
1021
1125
|
E && /* @__PURE__ */ t("button", {
|
|
1022
1126
|
type: "button",
|
|
1023
|
-
className:
|
|
1127
|
+
className: $.remove,
|
|
1024
1128
|
onClick: P,
|
|
1025
1129
|
disabled: m,
|
|
1026
1130
|
children: "Entfernen"
|
|
@@ -1028,12 +1132,12 @@ function G({ label: e, name: o, id: c, file: l, error: u, variant: d = "default"
|
|
|
1028
1132
|
]
|
|
1029
1133
|
}),
|
|
1030
1134
|
/* @__PURE__ */ t("span", {
|
|
1031
|
-
id: `${
|
|
1032
|
-
className: [
|
|
1033
|
-
children:
|
|
1135
|
+
id: `${r}-error`,
|
|
1136
|
+
className: [$.errorMessage, l ? "" : $.errorMessageHidden].filter(Boolean).join(" "),
|
|
1137
|
+
children: l || "\xA0"
|
|
1034
1138
|
})
|
|
1035
1139
|
]
|
|
1036
1140
|
});
|
|
1037
1141
|
}
|
|
1038
1142
|
//#endregion
|
|
1039
|
-
export {
|
|
1143
|
+
export { y as Accordion, h as BannerHero, f as Button, C as Checkbox, T as Chip, D as DatePicker, M as Dropdown, R as IconButton, P as Link, B as Password, W as PostalCode, K as RadioButton, J as Switch, Q as TextField, x as TileAccordion, ee as Upload };
|