math-main-components 0.0.147 → 0.0.148
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/Checkbox/Checkbox.d.ts +2 -1
- package/dist/components/FormButton/FormButton.d.ts +2 -1
- package/dist/components/InputArea/InputArea.d.ts +2 -1
- package/dist/components/InputMail/InputMail.d.ts +2 -1
- package/dist/components/InputPassword/InputPassword.d.ts +2 -1
- package/dist/components/InputText/InputText.d.ts +2 -1
- package/dist/components/OptionField/OptionField.d.ts +2 -1
- package/dist/components/RedirectButton/RedirectButton.d.ts +2 -1
- package/dist/index.cjs.js +21 -20
- package/dist/index.esm.js +21 -20
- package/package.json +1 -1
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ChangeEvent, ReactNode } from 'react';
|
|
2
|
-
export declare function Checkbox({ text, name, checked, defaultChecked, onInput, }: {
|
|
2
|
+
export declare function Checkbox({ id, text, name, checked, defaultChecked, onInput, }: {
|
|
3
|
+
id?: string;
|
|
3
4
|
text: ReactNode;
|
|
4
5
|
name: string;
|
|
5
6
|
checked?: boolean;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { CSSProperties, MouseEvent } from 'react';
|
|
2
|
-
export declare function FormButton({ text, style, iconName, type, background, onClick }: {
|
|
2
|
+
export declare function FormButton({ id, text, style, iconName, type, background, onClick }: {
|
|
3
|
+
id?: string;
|
|
3
4
|
text: string;
|
|
4
5
|
style?: CSSProperties;
|
|
5
6
|
iconName?: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ChangeEvent } from 'react';
|
|
2
|
-
export declare function InputArea({ title, name, placeholder, defaultValue, autoFocus, width, height, available, onInput }: {
|
|
2
|
+
export declare function InputArea({ id, title, name, placeholder, defaultValue, autoFocus, width, height, available, onInput }: {
|
|
3
|
+
id?: string;
|
|
3
4
|
title: string;
|
|
4
5
|
name: string;
|
|
5
6
|
placeholder?: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare function InputMail({ placeholder, title, name, width, available }: {
|
|
2
|
+
export declare function InputMail({ id, placeholder, title, name, width, available }: {
|
|
3
|
+
id: string;
|
|
3
4
|
placeholder?: string;
|
|
4
5
|
title?: string;
|
|
5
6
|
name?: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare function InputPassword({ placeholder, title, name, isVisible, width, minLength, autoComplete, forgotLink }: {
|
|
2
|
+
export declare function InputPassword({ id, placeholder, title, name, isVisible, width, minLength, autoComplete, forgotLink }: {
|
|
3
|
+
id?: string;
|
|
3
4
|
placeholder?: string;
|
|
4
5
|
autoComplete?: string;
|
|
5
6
|
title?: string;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { ChangeEvent } from 'react';
|
|
2
|
-
export declare function InputText({ title, name, placeholder, defaultValue, autoFocus, type, width, marginBottom, available, onInput }: {
|
|
2
|
+
export declare function InputText({ id, title, name, placeholder, defaultValue, autoFocus, type, width, marginBottom, available, onInput }: {
|
|
3
|
+
id?: string;
|
|
3
4
|
title: string;
|
|
4
5
|
name: string;
|
|
5
6
|
placeholder?: string;
|
package/dist/index.cjs.js
CHANGED
|
@@ -59,7 +59,7 @@ styleInject(css_248z$u);
|
|
|
59
59
|
|
|
60
60
|
function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, onClick }) {
|
|
61
61
|
return (React__default["default"].createElement("div", { className: [styles$u.container, isVisible ? styles$u.visible : styles$u.hidden, ["arrow_forward"].includes(iconName) ? styles$u.rotate : null].join(" ") },
|
|
62
|
-
React__default["default"].createElement("button", { type: type, className: `${styles$u.button} ${styles$u[theme]}`, onClick: onClick },
|
|
62
|
+
React__default["default"].createElement("button", { type: type, className: `${styles$u.button} ${styles$u[theme]}`, onClick: onClick, id: id },
|
|
63
63
|
text,
|
|
64
64
|
React__default["default"].createElement(SvgIcon, { iconName: iconName }))));
|
|
65
65
|
}
|
|
@@ -75,7 +75,7 @@ function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick
|
|
|
75
75
|
onClick(event);
|
|
76
76
|
}
|
|
77
77
|
return (React__default["default"].createElement("div", { className: styles$t.container },
|
|
78
|
-
React__default["default"].createElement("button", { className: [styles$t.button, styles$t[type], (text && !iconName) ? styles$t.onlyText : "", (!text && iconName) ? styles$t.onlyIcon : ""].join(" "), onClick: onClickButton },
|
|
78
|
+
React__default["default"].createElement("button", { className: [styles$t.button, styles$t[type], (text && !iconName) ? styles$t.onlyText : "", (!text && iconName) ? styles$t.onlyIcon : ""].join(" "), onClick: onClickButton, id: id },
|
|
79
79
|
text,
|
|
80
80
|
iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, fill: iconFill }))));
|
|
81
81
|
}
|
|
@@ -90,7 +90,7 @@ function CardButton({ id, title, iconName, onClick, }) {
|
|
|
90
90
|
if (onClick)
|
|
91
91
|
onClick(event);
|
|
92
92
|
}
|
|
93
|
-
return (React__default["default"].createElement("div", { className: styles$s.card, onClick: onClickCard },
|
|
93
|
+
return (React__default["default"].createElement("div", { className: styles$s.card, onClick: onClickCard, id: id },
|
|
94
94
|
React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
|
|
95
95
|
React__default["default"].createElement("h2", null, title)));
|
|
96
96
|
}
|
|
@@ -99,9 +99,9 @@ var css_248z$r = ".styles-module_container__gCCnD {\n margin-bottom: 20px;\n w
|
|
|
99
99
|
var styles$r = {"container":"styles-module_container__gCCnD"};
|
|
100
100
|
styleInject(css_248z$r);
|
|
101
101
|
|
|
102
|
-
function Checkbox({ text, name, checked, defaultChecked = false, onInput = () => { }, }) {
|
|
102
|
+
function Checkbox({ id, text, name, checked, defaultChecked = false, onInput = () => { }, }) {
|
|
103
103
|
return (React__default["default"].createElement("div", { className: styles$r.container },
|
|
104
|
-
React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name,
|
|
104
|
+
React__default["default"].createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id }),
|
|
105
105
|
React__default["default"].createElement("label", { htmlFor: name }, text),
|
|
106
106
|
React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })));
|
|
107
107
|
}
|
|
@@ -182,9 +182,9 @@ var css_248z$m = ".styles-module_container__HOoBj {\n margin-bottom: 30px;\n}\n
|
|
|
182
182
|
var styles$m = {"container":"styles-module_container__HOoBj"};
|
|
183
183
|
styleInject(css_248z$m);
|
|
184
184
|
|
|
185
|
-
function FormButton({ text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
|
|
185
|
+
function FormButton({ id, text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
|
|
186
186
|
return (React__default["default"].createElement("div", { className: styles$m.container, style: style },
|
|
187
|
-
React__default["default"].createElement("button", { type: type, onClick: onClick, style: { background: background } },
|
|
187
|
+
React__default["default"].createElement("button", { type: type, onClick: onClick, style: { background: background }, id: id },
|
|
188
188
|
text,
|
|
189
189
|
iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, fill: "white" }))));
|
|
190
190
|
}
|
|
@@ -222,7 +222,7 @@ var css_248z$j = ".styles-module_container__Jr7LQ {\n display: flex;\n width:
|
|
|
222
222
|
var styles$j = {"container":"styles-module_container__Jr7LQ","input":"styles-module_input__v-hUz","not_available":"styles-module_not_available__6xu3Y","label":"styles-module_label__SSsD3","label_text":"styles-module_label_text__EOAq5","with_title":"styles-module_with_title__HWcCH","valid":"styles-module_valid__6geu9"};
|
|
223
223
|
styleInject(css_248z$j);
|
|
224
224
|
|
|
225
|
-
function InputArea({ title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
|
|
225
|
+
function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
|
|
226
226
|
const [value, setValue] = React.useState(defaultValue);
|
|
227
227
|
const inputElement = React.useCallback((element) => {
|
|
228
228
|
if (element && autoFocus)
|
|
@@ -230,7 +230,7 @@ function InputArea({ title, name, placeholder = "", defaultValue = "", autoFocus
|
|
|
230
230
|
}, [autoFocus]);
|
|
231
231
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
232
232
|
React__default["default"].createElement("div", { className: styles$j.container, style: { width } },
|
|
233
|
-
React__default["default"].createElement("textarea", { className: `${styles$j.input} ${title != undefined ? styles$j.with_title : styles$j.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$j.valid : styles$j.not_valid} ${available ? styles$j.available : styles$j.not_available}`, name: name, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
|
|
233
|
+
React__default["default"].createElement("textarea", { className: `${styles$j.input} ${title != undefined ? styles$j.with_title : styles$j.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$j.valid : styles$j.not_valid} ${available ? styles$j.available : styles$j.not_available}`, name: name, id: id, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
|
|
234
234
|
setValue(event.target.value);
|
|
235
235
|
if (onInput)
|
|
236
236
|
onInput(event);
|
|
@@ -243,11 +243,11 @@ var css_248z$i = ".styles-module_input__-GKhx {\n padding: 14px 20px;\n font-s
|
|
|
243
243
|
var styles$i = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
|
|
244
244
|
styleInject(css_248z$i);
|
|
245
245
|
|
|
246
|
-
function InputMail({ placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true }) {
|
|
246
|
+
function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true }) {
|
|
247
247
|
const [value, setValue] = React.useState("");
|
|
248
248
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
249
249
|
React__default["default"].createElement("div", { className: styles$i.container, style: { width: width } },
|
|
250
|
-
React__default["default"].createElement("input", { className: `${styles$i.input} ${title != undefined ? styles$i.with_title : styles$i.without_title} ${value.length > 0 ? styles$i.valid : styles$i.not_valid} ${available ? styles$i.available : styles$i.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.target.value) }),
|
|
250
|
+
React__default["default"].createElement("input", { className: `${styles$i.input} ${title != undefined ? styles$i.with_title : styles$i.without_title} ${value.length > 0 ? styles$i.valid : styles$i.not_valid} ${available ? styles$i.available : styles$i.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.target.value), id: id }),
|
|
251
251
|
React__default["default"].createElement("label", { htmlFor: "text", className: styles$i.label },
|
|
252
252
|
React__default["default"].createElement("span", { className: styles$i.label_text }, title)))));
|
|
253
253
|
}
|
|
@@ -304,7 +304,7 @@ var css_248z$f = "@keyframes styles-module_show__OLTZH {\n from {\n max-heig
|
|
|
304
304
|
var styles$f = {"container":"styles-module_container__UdmOO","forgot_label":"styles-module_forgot_label__EeN6a","visible":"styles-module_visible__QROqh","hidden":"styles-module_hidden__hDKDO","input":"styles-module_input__sC2fP","hideButton":"styles-module_hideButton__83mRI","form":"styles-module_form__m866x","label":"styles-module_label__8PuaL","label_text":"styles-module_label_text__FwJ1F","with_title":"styles-module_with_title__dftgq","valid":"styles-module_valid__SM7w5","show":"styles-module_show__OLTZH","hide":"styles-module_hide__LAgaY"};
|
|
305
305
|
styleInject(css_248z$f);
|
|
306
306
|
|
|
307
|
-
function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
|
|
307
|
+
function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
|
|
308
308
|
const [value, setValue] = React.useState("");
|
|
309
309
|
const [hidePassword, setHidePassword] = React.useState(true);
|
|
310
310
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -402,7 +402,7 @@ var css_248z$d = ".styles-module_container__zcXGF {\n display: flex;\n width:
|
|
|
402
402
|
var styles$d = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
|
|
403
403
|
styleInject(css_248z$d);
|
|
404
404
|
|
|
405
|
-
function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, available = true, onInput = (event) => { } }) {
|
|
405
|
+
function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, available = true, onInput = (event) => { } }) {
|
|
406
406
|
const [value, setValue] = React.useState(defaultValue);
|
|
407
407
|
const inputElement = React.useCallback((element) => {
|
|
408
408
|
if (element && autoFocus)
|
|
@@ -410,7 +410,7 @@ function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus
|
|
|
410
410
|
}, [autoFocus]);
|
|
411
411
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
412
412
|
React__default["default"].createElement("div", { className: styles$d.container, style: { width, marginBottom } },
|
|
413
|
-
React__default["default"].createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$d.valid : styles$d.not_valid} ${available ? styles$d.available : styles$d.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
|
|
413
|
+
React__default["default"].createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$d.valid : styles$d.not_valid} ${available ? styles$d.available : styles$d.not_available}`, name: name, id: id, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
|
|
414
414
|
setValue(event.target.value);
|
|
415
415
|
if (onInput)
|
|
416
416
|
onInput(event);
|
|
@@ -423,9 +423,9 @@ var css_248z$c = ".styles-module_box__Z0iod {\n background: var(--background-2)
|
|
|
423
423
|
var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
|
|
424
424
|
styleInject(css_248z$c);
|
|
425
425
|
|
|
426
|
-
function OptionField({ headline, description, iconName }) {
|
|
426
|
+
function OptionField({ id, headline, description, iconName }) {
|
|
427
427
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
428
|
-
React__default["default"].createElement("div", { className: styles$c.box },
|
|
428
|
+
React__default["default"].createElement("div", { className: styles$c.box, id: id },
|
|
429
429
|
React__default["default"].createElement("div", { className: styles$c.left_side }, iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName })),
|
|
430
430
|
React__default["default"].createElement("div", { className: styles$c.right_side },
|
|
431
431
|
React__default["default"].createElement("h4", null, headline),
|
|
@@ -458,7 +458,7 @@ function ProgressBar({ length, progress }) {
|
|
|
458
458
|
React__default["default"].createElement("div", { className: styles$a.progress, style: { width: `${progress / length * 100}%` } })))));
|
|
459
459
|
}
|
|
460
460
|
|
|
461
|
-
var css_248z$9 = ".styles-module_container__Grkzw {\n display: flex;\n flex-direction: column;\n gap: 12px;\n color: var(--foreground-3);\n margin-bottom: 20px;\n}\n.styles-module_container__Grkzw [type=radio] {\n position: relative;\n left: 15px;\n top: -4px;\n z-index: 0;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n margin-left: -3.5px;\n}\n.styles-module_container__Grkzw [type=radio] + label {\n position: absolute;\n cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n width: 15px;\n height: 15px;\n border-radius: 20px;\n border: 2px solid var(--border-2);\n display: block;\n content: \"\";\n float: left;\n margin-right: 8px;\n z-index: 5;\n position: relative;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n background-color: var(--primary-2);\n border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-4);\n}";
|
|
461
|
+
var css_248z$9 = ".styles-module_container__Grkzw {\n display: flex;\n flex-direction: column;\n gap: 12px;\n color: var(--foreground-3);\n margin-bottom: 20px;\n}\n.styles-module_container__Grkzw [type=radio] {\n position: relative;\n left: 15px;\n top: -4px;\n z-index: 0;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n margin-left: -3.5px;\n}\n.styles-module_container__Grkzw [type=radio] + label {\n position: absolute;\n cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n width: 15px;\n height: 15px;\n border-radius: 20px;\n border: 2px solid var(--border-2);\n display: block;\n content: \"\";\n float: left;\n margin-right: 8px;\n z-index: 5;\n position: relative;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw span {\n position: absolute;\n opacity: 1;\n color: var(--background-2);\n z-index: 100;\n user-select: none;\n pointer-events: none;\n -webkit-user-select: none;\n font-weight: 300;\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n background-color: var(--primary-2);\n border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-4);\n}";
|
|
462
462
|
var styles$9 = {"container":"styles-module_container__Grkzw"};
|
|
463
463
|
styleInject(css_248z$9);
|
|
464
464
|
|
|
@@ -482,14 +482,15 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
|
|
|
482
482
|
React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
|
|
483
483
|
:
|
|
484
484
|
React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
|
|
485
|
-
React__default["default"].createElement("label", { htmlFor: option.name }, option.text)
|
|
485
|
+
React__default["default"].createElement("label", { htmlFor: option.name }, option.text),
|
|
486
|
+
React__default["default"].createElement(SvgIcon, { iconName: "done", size: "21px" })))));
|
|
486
487
|
}
|
|
487
488
|
|
|
488
489
|
var css_248z$8 = ".styles-module_container__RhsQe {\n margin-right: 8px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\n background: none;\n padding: none;\n border: none;\n width: 40px;\n height: 40px;\n transition: 0.2s;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 20px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 span {\n color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n background: var(--background-1);\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n flex-direction: row;\n gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n background: none;\n}";
|
|
489
490
|
var styles$8 = {"container":"styles-module_container__RhsQe","button":"styles-module_button__HuX-0","middle":"styles-module_middle__xg7RF"};
|
|
490
491
|
styleInject(css_248z$8);
|
|
491
492
|
|
|
492
|
-
function RedirectButton({ type = "forward", onClick }) {
|
|
493
|
+
function RedirectButton({ id, type = "forward", onClick }) {
|
|
493
494
|
function onClickButton(event) {
|
|
494
495
|
event.preventDefault();
|
|
495
496
|
if (onClick)
|
|
@@ -503,7 +504,7 @@ function RedirectButton({ type = "forward", onClick }) {
|
|
|
503
504
|
}
|
|
504
505
|
};
|
|
505
506
|
return (React__default["default"].createElement("div", { className: [styles$8.container, styles$8[type]].join(" ") },
|
|
506
|
-
React__default["default"].createElement("button", { onClick: onClickButton, className: styles$8.button },
|
|
507
|
+
React__default["default"].createElement("button", { onClick: onClickButton, className: styles$8.button, id: id },
|
|
507
508
|
React__default["default"].createElement(SvgIcon, { iconName: getIcon() }),
|
|
508
509
|
["middle"].includes(type) &&
|
|
509
510
|
React__default["default"].createElement("span", null, "Zur\u00FCck"))));
|
package/dist/index.esm.js
CHANGED
|
@@ -51,7 +51,7 @@ styleInject(css_248z$u);
|
|
|
51
51
|
|
|
52
52
|
function AuthButton({ id, text, type = "submit", theme = "primary", iconName = "arrow_forward", isVisible = true, onClick }) {
|
|
53
53
|
return (React.createElement("div", { className: [styles$u.container, isVisible ? styles$u.visible : styles$u.hidden, ["arrow_forward"].includes(iconName) ? styles$u.rotate : null].join(" ") },
|
|
54
|
-
React.createElement("button", { type: type, className: `${styles$u.button} ${styles$u[theme]}`, onClick: onClick },
|
|
54
|
+
React.createElement("button", { type: type, className: `${styles$u.button} ${styles$u[theme]}`, onClick: onClick, id: id },
|
|
55
55
|
text,
|
|
56
56
|
React.createElement(SvgIcon, { iconName: iconName }))));
|
|
57
57
|
}
|
|
@@ -67,7 +67,7 @@ function Button({ id, text, iconName, iconFill = "white", type = "blue", onClick
|
|
|
67
67
|
onClick(event);
|
|
68
68
|
}
|
|
69
69
|
return (React.createElement("div", { className: styles$t.container },
|
|
70
|
-
React.createElement("button", { className: [styles$t.button, styles$t[type], (text && !iconName) ? styles$t.onlyText : "", (!text && iconName) ? styles$t.onlyIcon : ""].join(" "), onClick: onClickButton },
|
|
70
|
+
React.createElement("button", { className: [styles$t.button, styles$t[type], (text && !iconName) ? styles$t.onlyText : "", (!text && iconName) ? styles$t.onlyIcon : ""].join(" "), onClick: onClickButton, id: id },
|
|
71
71
|
text,
|
|
72
72
|
iconName && React.createElement(SvgIcon, { iconName: iconName, fill: iconFill }))));
|
|
73
73
|
}
|
|
@@ -82,7 +82,7 @@ function CardButton({ id, title, iconName, onClick, }) {
|
|
|
82
82
|
if (onClick)
|
|
83
83
|
onClick(event);
|
|
84
84
|
}
|
|
85
|
-
return (React.createElement("div", { className: styles$s.card, onClick: onClickCard },
|
|
85
|
+
return (React.createElement("div", { className: styles$s.card, onClick: onClickCard, id: id },
|
|
86
86
|
React.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
|
|
87
87
|
React.createElement("h2", null, title)));
|
|
88
88
|
}
|
|
@@ -91,9 +91,9 @@ var css_248z$r = ".styles-module_container__gCCnD {\n margin-bottom: 20px;\n w
|
|
|
91
91
|
var styles$r = {"container":"styles-module_container__gCCnD"};
|
|
92
92
|
styleInject(css_248z$r);
|
|
93
93
|
|
|
94
|
-
function Checkbox({ text, name, checked, defaultChecked = false, onInput = () => { }, }) {
|
|
94
|
+
function Checkbox({ id, text, name, checked, defaultChecked = false, onInput = () => { }, }) {
|
|
95
95
|
return (React.createElement("div", { className: styles$r.container },
|
|
96
|
-
React.createElement("input", { type: "checkbox", onInput: onInput, name: name,
|
|
96
|
+
React.createElement("input", { type: "checkbox", onInput: onInput, name: name, checked: checked, defaultChecked: defaultChecked, id: id }),
|
|
97
97
|
React.createElement("label", { htmlFor: name }, text),
|
|
98
98
|
React.createElement(SvgIcon, { iconName: "done", size: "21px" })));
|
|
99
99
|
}
|
|
@@ -174,9 +174,9 @@ var css_248z$m = ".styles-module_container__HOoBj {\n margin-bottom: 30px;\n}\n
|
|
|
174
174
|
var styles$m = {"container":"styles-module_container__HOoBj"};
|
|
175
175
|
styleInject(css_248z$m);
|
|
176
176
|
|
|
177
|
-
function FormButton({ text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
|
|
177
|
+
function FormButton({ id, text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
|
|
178
178
|
return (React.createElement("div", { className: styles$m.container, style: style },
|
|
179
|
-
React.createElement("button", { type: type, onClick: onClick, style: { background: background } },
|
|
179
|
+
React.createElement("button", { type: type, onClick: onClick, style: { background: background }, id: id },
|
|
180
180
|
text,
|
|
181
181
|
iconName && React.createElement(SvgIcon, { iconName: iconName, fill: "white" }))));
|
|
182
182
|
}
|
|
@@ -214,7 +214,7 @@ var css_248z$j = ".styles-module_container__Jr7LQ {\n display: flex;\n width:
|
|
|
214
214
|
var styles$j = {"container":"styles-module_container__Jr7LQ","input":"styles-module_input__v-hUz","not_available":"styles-module_not_available__6xu3Y","label":"styles-module_label__SSsD3","label_text":"styles-module_label_text__EOAq5","with_title":"styles-module_with_title__HWcCH","valid":"styles-module_valid__6geu9"};
|
|
215
215
|
styleInject(css_248z$j);
|
|
216
216
|
|
|
217
|
-
function InputArea({ title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
|
|
217
|
+
function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
|
|
218
218
|
const [value, setValue] = useState(defaultValue);
|
|
219
219
|
const inputElement = useCallback((element) => {
|
|
220
220
|
if (element && autoFocus)
|
|
@@ -222,7 +222,7 @@ function InputArea({ title, name, placeholder = "", defaultValue = "", autoFocus
|
|
|
222
222
|
}, [autoFocus]);
|
|
223
223
|
return (React.createElement(React.Fragment, null,
|
|
224
224
|
React.createElement("div", { className: styles$j.container, style: { width } },
|
|
225
|
-
React.createElement("textarea", { className: `${styles$j.input} ${title != undefined ? styles$j.with_title : styles$j.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$j.valid : styles$j.not_valid} ${available ? styles$j.available : styles$j.not_available}`, name: name, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
|
|
225
|
+
React.createElement("textarea", { className: `${styles$j.input} ${title != undefined ? styles$j.with_title : styles$j.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$j.valid : styles$j.not_valid} ${available ? styles$j.available : styles$j.not_available}`, name: name, id: id, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
|
|
226
226
|
setValue(event.target.value);
|
|
227
227
|
if (onInput)
|
|
228
228
|
onInput(event);
|
|
@@ -235,11 +235,11 @@ var css_248z$i = ".styles-module_input__-GKhx {\n padding: 14px 20px;\n font-s
|
|
|
235
235
|
var styles$i = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
|
|
236
236
|
styleInject(css_248z$i);
|
|
237
237
|
|
|
238
|
-
function InputMail({ placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true }) {
|
|
238
|
+
function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true }) {
|
|
239
239
|
const [value, setValue] = useState("");
|
|
240
240
|
return (React.createElement(React.Fragment, null,
|
|
241
241
|
React.createElement("div", { className: styles$i.container, style: { width: width } },
|
|
242
|
-
React.createElement("input", { className: `${styles$i.input} ${title != undefined ? styles$i.with_title : styles$i.without_title} ${value.length > 0 ? styles$i.valid : styles$i.not_valid} ${available ? styles$i.available : styles$i.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.target.value) }),
|
|
242
|
+
React.createElement("input", { className: `${styles$i.input} ${title != undefined ? styles$i.with_title : styles$i.without_title} ${value.length > 0 ? styles$i.valid : styles$i.not_valid} ${available ? styles$i.available : styles$i.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.target.value), id: id }),
|
|
243
243
|
React.createElement("label", { htmlFor: "text", className: styles$i.label },
|
|
244
244
|
React.createElement("span", { className: styles$i.label_text }, title)))));
|
|
245
245
|
}
|
|
@@ -296,7 +296,7 @@ var css_248z$f = "@keyframes styles-module_show__OLTZH {\n from {\n max-heig
|
|
|
296
296
|
var styles$f = {"container":"styles-module_container__UdmOO","forgot_label":"styles-module_forgot_label__EeN6a","visible":"styles-module_visible__QROqh","hidden":"styles-module_hidden__hDKDO","input":"styles-module_input__sC2fP","hideButton":"styles-module_hideButton__83mRI","form":"styles-module_form__m866x","label":"styles-module_label__8PuaL","label_text":"styles-module_label_text__FwJ1F","with_title":"styles-module_with_title__dftgq","valid":"styles-module_valid__SM7w5","show":"styles-module_show__OLTZH","hide":"styles-module_hide__LAgaY"};
|
|
297
297
|
styleInject(css_248z$f);
|
|
298
298
|
|
|
299
|
-
function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
|
|
299
|
+
function InputPassword({ id, placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
|
|
300
300
|
const [value, setValue] = useState("");
|
|
301
301
|
const [hidePassword, setHidePassword] = useState(true);
|
|
302
302
|
return (React.createElement(React.Fragment, null,
|
|
@@ -394,7 +394,7 @@ var css_248z$d = ".styles-module_container__zcXGF {\n display: flex;\n width:
|
|
|
394
394
|
var styles$d = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
|
|
395
395
|
styleInject(css_248z$d);
|
|
396
396
|
|
|
397
|
-
function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, available = true, onInput = (event) => { } }) {
|
|
397
|
+
function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, available = true, onInput = (event) => { } }) {
|
|
398
398
|
const [value, setValue] = useState(defaultValue);
|
|
399
399
|
const inputElement = useCallback((element) => {
|
|
400
400
|
if (element && autoFocus)
|
|
@@ -402,7 +402,7 @@ function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus
|
|
|
402
402
|
}, [autoFocus]);
|
|
403
403
|
return (React.createElement(React.Fragment, null,
|
|
404
404
|
React.createElement("div", { className: styles$d.container, style: { width, marginBottom } },
|
|
405
|
-
React.createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$d.valid : styles$d.not_valid} ${available ? styles$d.available : styles$d.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
|
|
405
|
+
React.createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$d.valid : styles$d.not_valid} ${available ? styles$d.available : styles$d.not_available}`, name: name, id: id, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
|
|
406
406
|
setValue(event.target.value);
|
|
407
407
|
if (onInput)
|
|
408
408
|
onInput(event);
|
|
@@ -415,9 +415,9 @@ var css_248z$c = ".styles-module_box__Z0iod {\n background: var(--background-2)
|
|
|
415
415
|
var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
|
|
416
416
|
styleInject(css_248z$c);
|
|
417
417
|
|
|
418
|
-
function OptionField({ headline, description, iconName }) {
|
|
418
|
+
function OptionField({ id, headline, description, iconName }) {
|
|
419
419
|
return (React.createElement(React.Fragment, null,
|
|
420
|
-
React.createElement("div", { className: styles$c.box },
|
|
420
|
+
React.createElement("div", { className: styles$c.box, id: id },
|
|
421
421
|
React.createElement("div", { className: styles$c.left_side }, iconName && React.createElement(SvgIcon, { iconName: iconName })),
|
|
422
422
|
React.createElement("div", { className: styles$c.right_side },
|
|
423
423
|
React.createElement("h4", null, headline),
|
|
@@ -450,7 +450,7 @@ function ProgressBar({ length, progress }) {
|
|
|
450
450
|
React.createElement("div", { className: styles$a.progress, style: { width: `${progress / length * 100}%` } })))));
|
|
451
451
|
}
|
|
452
452
|
|
|
453
|
-
var css_248z$9 = ".styles-module_container__Grkzw {\n display: flex;\n flex-direction: column;\n gap: 12px;\n color: var(--foreground-3);\n margin-bottom: 20px;\n}\n.styles-module_container__Grkzw [type=radio] {\n position: relative;\n left: 15px;\n top: -4px;\n z-index: 0;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n margin-left: -3.5px;\n}\n.styles-module_container__Grkzw [type=radio] + label {\n position: absolute;\n cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n width: 15px;\n height: 15px;\n border-radius: 20px;\n border: 2px solid var(--border-2);\n display: block;\n content: \"\";\n float: left;\n margin-right: 8px;\n z-index: 5;\n position: relative;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n background-color: var(--primary-2);\n border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-4);\n}";
|
|
453
|
+
var css_248z$9 = ".styles-module_container__Grkzw {\n display: flex;\n flex-direction: column;\n gap: 12px;\n color: var(--foreground-3);\n margin-bottom: 20px;\n}\n.styles-module_container__Grkzw [type=radio] {\n position: relative;\n left: 15px;\n top: -4px;\n z-index: 0;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n margin-left: -3.5px;\n}\n.styles-module_container__Grkzw [type=radio] + label {\n position: absolute;\n cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n width: 15px;\n height: 15px;\n border-radius: 20px;\n border: 2px solid var(--border-2);\n display: block;\n content: \"\";\n float: left;\n margin-right: 8px;\n z-index: 5;\n position: relative;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw span {\n position: absolute;\n opacity: 1;\n color: var(--background-2);\n z-index: 100;\n user-select: none;\n pointer-events: none;\n -webkit-user-select: none;\n font-weight: 300;\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n background-color: var(--primary-2);\n border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-4);\n}";
|
|
454
454
|
var styles$9 = {"container":"styles-module_container__Grkzw"};
|
|
455
455
|
styleInject(css_248z$9);
|
|
456
456
|
|
|
@@ -474,14 +474,15 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
|
|
|
474
474
|
React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
|
|
475
475
|
:
|
|
476
476
|
React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
|
|
477
|
-
React.createElement("label", { htmlFor: option.name }, option.text)
|
|
477
|
+
React.createElement("label", { htmlFor: option.name }, option.text),
|
|
478
|
+
React.createElement(SvgIcon, { iconName: "done", size: "21px" })))));
|
|
478
479
|
}
|
|
479
480
|
|
|
480
481
|
var css_248z$8 = ".styles-module_container__RhsQe {\n margin-right: 8px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\n background: none;\n padding: none;\n border: none;\n width: 40px;\n height: 40px;\n transition: 0.2s;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 20px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 span {\n color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n background: var(--background-1);\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n flex-direction: row;\n gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n background: none;\n}";
|
|
481
482
|
var styles$8 = {"container":"styles-module_container__RhsQe","button":"styles-module_button__HuX-0","middle":"styles-module_middle__xg7RF"};
|
|
482
483
|
styleInject(css_248z$8);
|
|
483
484
|
|
|
484
|
-
function RedirectButton({ type = "forward", onClick }) {
|
|
485
|
+
function RedirectButton({ id, type = "forward", onClick }) {
|
|
485
486
|
function onClickButton(event) {
|
|
486
487
|
event.preventDefault();
|
|
487
488
|
if (onClick)
|
|
@@ -495,7 +496,7 @@ function RedirectButton({ type = "forward", onClick }) {
|
|
|
495
496
|
}
|
|
496
497
|
};
|
|
497
498
|
return (React.createElement("div", { className: [styles$8.container, styles$8[type]].join(" ") },
|
|
498
|
-
React.createElement("button", { onClick: onClickButton, className: styles$8.button },
|
|
499
|
+
React.createElement("button", { onClick: onClickButton, className: styles$8.button, id: id },
|
|
499
500
|
React.createElement(SvgIcon, { iconName: getIcon() }),
|
|
500
501
|
["middle"].includes(type) &&
|
|
501
502
|
React.createElement("span", null, "Zur\u00FCck"))));
|