math-main-components 0.0.13 → 0.0.14
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/InputPassword/InputPassword.d.ts +2 -2
- package/dist/components/OptionField/OptionField.d.ts +1 -2
- package/dist/components/OptionFieldHorizontal/OptionFieldHorizontal.d.ts +1 -2
- package/dist/components/StepBack/StepBack.d.ts +3 -2
- package/dist/components/TextWithIcon/TextWithIcon.d.ts +1 -2
- package/dist/index.cjs.js +23 -32
- package/dist/index.esm.js +23 -32
- package/package.json +1 -1
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare function InputPassword({ placeholder, title, name, isVisible, width, autoComplete,
|
|
2
|
+
export declare function InputPassword({ placeholder, title, name, isVisible, width, autoComplete, forgotLink }: {
|
|
3
3
|
placeholder?: string;
|
|
4
4
|
autoComplete?: string;
|
|
5
5
|
title?: string;
|
|
6
6
|
name: string;
|
|
7
7
|
isVisible?: boolean;
|
|
8
8
|
width?: string;
|
|
9
|
-
|
|
9
|
+
forgotLink?: any;
|
|
10
10
|
}): React.JSX.Element;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare function OptionField({ headline, description,
|
|
2
|
+
export declare function OptionField({ headline, description, iconName }: {
|
|
3
3
|
headline: string;
|
|
4
4
|
description: string;
|
|
5
5
|
iconName?: string;
|
|
6
|
-
link: string;
|
|
7
6
|
}): React.JSX.Element;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
export declare function OptionFieldHorizontal({ title,
|
|
2
|
+
export declare function OptionFieldHorizontal({ title, iconName, preselected }: {
|
|
3
3
|
title: string;
|
|
4
|
-
href: string;
|
|
5
4
|
iconName: string;
|
|
6
5
|
preselected?: boolean;
|
|
7
6
|
}): React.JSX.Element;
|
package/dist/index.cjs.js
CHANGED
|
@@ -250,7 +250,7 @@ var css_248z$f = "@keyframes styles-module_show__OLTZH {\n from {\n max-heig
|
|
|
250
250
|
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"};
|
|
251
251
|
styleInject(css_248z$f);
|
|
252
252
|
|
|
253
|
-
function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete,
|
|
253
|
+
function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete, forgotLink = false }) {
|
|
254
254
|
const [value, setValue] = React.useState("");
|
|
255
255
|
const [hidePassword, setHidePassword] = React.useState(true);
|
|
256
256
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
@@ -261,12 +261,11 @@ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible =
|
|
|
261
261
|
React__default["default"].createElement("span", { className: styles$f.label_text }, title)),
|
|
262
262
|
React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
|
|
263
263
|
React__default["default"].createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
|
|
264
|
-
|
|
265
|
-
React__default["default"].createElement("
|
|
266
|
-
React__default["default"].createElement("span", { className: styles$f.forgot_label }, "Passwort vergessen?")))));
|
|
264
|
+
forgotLink &&
|
|
265
|
+
React__default["default"].createElement("div", { className: styles$f.forgot_container }, forgotLink))));
|
|
267
266
|
}
|
|
268
267
|
|
|
269
|
-
var css_248z$e = ".styles-module_container__--NO0 {\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: center;\n align-items: center;\n user-select: none;\n margin-bottom: 20px;\n}\n.styles-module_container__--NO0
|
|
268
|
+
var css_248z$e = ".styles-module_container__--NO0 {\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: center;\n align-items: center;\n user-select: none;\n margin-bottom: 20px;\n}\n.styles-module_container__--NO0 button {\n background: transparent;\n color: #0075FF;\n border: none;\n font-size: 14px;\n cursor: pointer;\n}\n\n.styles-module_input_wrapper__LPIk1 {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 10px;\n}\n\n.styles-module_input__84v36 {\n padding: 14px 10px;\n width: 30px;\n border-radius: 12px;\n border: 1.5px solid #a8a8a8;\n outline: none;\n transition: 0.2s ease;\n text-align: center;\n font-size: 18px;\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n border-color: #0075FF;\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n letter-spacing: 0px !important;\n}";
|
|
270
269
|
var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
|
|
271
270
|
styleInject(css_248z$e);
|
|
272
271
|
|
|
@@ -334,7 +333,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
|
|
|
334
333
|
}
|
|
335
334
|
return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
|
|
336
335
|
})),
|
|
337
|
-
React__default["default"].createElement("
|
|
336
|
+
React__default["default"].createElement("button", { onClick: resetValues }, "Zur\u00FCcksetzen"))));
|
|
338
337
|
}
|
|
339
338
|
|
|
340
339
|
var css_248z$d = ".styles-module_container__zcXGF {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n}\n\n.styles-module_input__Tpth8 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid #a8a8a8;\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n border-color: #0075FF;\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n border-color: #e50000;\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n position: relative;\n}\n\n.styles-module_label__appHO {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: white;\n color: grey;\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: grey;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: linear-gradient(to bottom, rgba(250, 250, 250, 0.9411764706), hsla(0, 0%, 100%, 0.951));\n color: #0063d4;\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n color: #a8a8a8;\n}";
|
|
@@ -361,25 +360,23 @@ var css_248z$c = ".styles-module_box__Z0iod {\n background: #F4F4F4;\n width:
|
|
|
361
360
|
var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
|
|
362
361
|
styleInject(css_248z$c);
|
|
363
362
|
|
|
364
|
-
function OptionField({ headline, description,
|
|
363
|
+
function OptionField({ headline, description, iconName }) {
|
|
365
364
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
366
|
-
React__default["default"].createElement("
|
|
367
|
-
React__default["default"].createElement("div", { className: styles$c.
|
|
368
|
-
|
|
369
|
-
React__default["default"].createElement("
|
|
370
|
-
|
|
371
|
-
React__default["default"].createElement("p", null, description))))));
|
|
365
|
+
React__default["default"].createElement("div", { className: styles$c.box },
|
|
366
|
+
React__default["default"].createElement("div", { className: styles$c.left_side }, iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName })),
|
|
367
|
+
React__default["default"].createElement("div", { className: styles$c.right_side },
|
|
368
|
+
React__default["default"].createElement("h4", null, headline),
|
|
369
|
+
React__default["default"].createElement("p", null, description)))));
|
|
372
370
|
}
|
|
373
371
|
|
|
374
372
|
var css_248z$b = ".styles-module_container__XCtqW {\n background: white;\n border-radius: 12px;\n padding: 30px;\n margin-bottom: 30px;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px;\n color: black;\n border: 1px solid #B1B1B1;\n transition: 0.2s ease-in-out;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n}\n.styles-module_container__XCtqW:hover {\n background: #f0f0f0;\n border-color: #888888;\n}\n.styles-module_container__XCtqW h3 {\n font-weight: 500;\n margin: 0;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n border: 1px solid black;\n}";
|
|
375
373
|
var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
|
|
376
374
|
styleInject(css_248z$b);
|
|
377
375
|
|
|
378
|
-
function OptionFieldHorizontal({ title,
|
|
379
|
-
return (React__default["default"].createElement("
|
|
380
|
-
React__default["default"].createElement(
|
|
381
|
-
|
|
382
|
-
React__default["default"].createElement("h3", null, title))));
|
|
376
|
+
function OptionFieldHorizontal({ title, iconName, preselected = false }) {
|
|
377
|
+
return (React__default["default"].createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
|
|
378
|
+
React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
|
|
379
|
+
React__default["default"].createElement("h3", null, title)));
|
|
383
380
|
}
|
|
384
381
|
|
|
385
382
|
var css_248z$a = ".styles-module_container__oNbrP {\n padding-top: 10px;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65 {\n padding: 10px 18px;\n background: #0075FF;\n border-radius: 40px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n font-size: 15px;\n color: white;\n align-items: center;\n border: none;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_red__CHF3e {\n background: #e40000;\n}";
|
|
@@ -561,12 +558,11 @@ var css_248z$3 = ".styles-module_container__xRQNT {\n display: flex;\n flex-di
|
|
|
561
558
|
var styles$3 = {"container":"styles-module_container__xRQNT"};
|
|
562
559
|
styleInject(css_248z$3);
|
|
563
560
|
|
|
564
|
-
function StepBack({
|
|
561
|
+
function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
|
|
565
562
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
566
|
-
React__default["default"].createElement("
|
|
567
|
-
React__default["default"].createElement(
|
|
568
|
-
|
|
569
|
-
"Weitere M\u00F6glichkeiten"))));
|
|
563
|
+
React__default["default"].createElement("div", { className: styles$3.container },
|
|
564
|
+
React__default["default"].createElement(SvgIcon, { iconName: iconName }),
|
|
565
|
+
text)));
|
|
570
566
|
}
|
|
571
567
|
|
|
572
568
|
var css_248z$2 = ".styles-module_container__jNs7m {\n margin-top: 30px;\n}\n.styles-module_container__jNs7m h3 {\n font-weight: 500;\n font-size: 16px;\n}\n\n.styles-module_item_list__FxHkg.styles-module_has_children__Uu-8D {\n border-top: 1px solid #D0D0D0;\n border-bottom: 1px solid #D0D0D0;\n}\n\n.styles-module_item_list__FxHkg {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n padding: 8px 14px;\n border-radius: 25px;\n transition: 0.2s ease-in-out;\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_default__SexGH:hover {\n background: rgb(223, 223, 223);\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_red__KD3qJ:hover {\n background: rgb(255, 199, 199);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV {\n padding: 10px 20px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: 10px;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_moreText__-blXb {\n flex: 1;\n margin-bottom: 4px;\n color: #0075FF;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_subtitle__DT5OF {\n color: rgb(162, 162, 162);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(even) {\n background: #F3F3F3;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n border-bottom: 1px solid #D0D0D0;\n}";
|
|
@@ -627,15 +623,10 @@ var css_248z$1 = ".styles-module_container__ItBx0 {\n display: flex;\n flex-di
|
|
|
627
623
|
var styles$1 = {"container":"styles-module_container__ItBx0"};
|
|
628
624
|
styleInject(css_248z$1);
|
|
629
625
|
|
|
630
|
-
function TextWithIcon({ iconName, label,
|
|
631
|
-
return (React__default["default"].createElement("div", { className: styles$1.container },
|
|
632
|
-
React__default["default"].createElement(
|
|
633
|
-
|
|
634
|
-
React__default["default"].createElement("span", null, label))
|
|
635
|
-
:
|
|
636
|
-
React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
637
|
-
React__default["default"].createElement(SvgIcon, { iconName: iconName }),
|
|
638
|
-
React__default["default"].createElement("span", null, label))));
|
|
626
|
+
function TextWithIcon({ iconName, label, }) {
|
|
627
|
+
return (React__default["default"].createElement("div", { className: styles$1.container },
|
|
628
|
+
React__default["default"].createElement(SvgIcon, { iconName: iconName }),
|
|
629
|
+
React__default["default"].createElement("span", null, label)));
|
|
639
630
|
}
|
|
640
631
|
|
|
641
632
|
function degreesToRadians(degrees) {
|
package/dist/index.esm.js
CHANGED
|
@@ -242,7 +242,7 @@ var css_248z$f = "@keyframes styles-module_show__OLTZH {\n from {\n max-heig
|
|
|
242
242
|
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"};
|
|
243
243
|
styleInject(css_248z$f);
|
|
244
244
|
|
|
245
|
-
function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete,
|
|
245
|
+
function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", autoComplete, forgotLink = false }) {
|
|
246
246
|
const [value, setValue] = useState("");
|
|
247
247
|
const [hidePassword, setHidePassword] = useState(true);
|
|
248
248
|
return (React.createElement(React.Fragment, null,
|
|
@@ -253,12 +253,11 @@ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible =
|
|
|
253
253
|
React.createElement("span", { className: styles$f.label_text }, title)),
|
|
254
254
|
React.createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
|
|
255
255
|
React.createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
|
|
256
|
-
|
|
257
|
-
React.createElement("
|
|
258
|
-
React.createElement("span", { className: styles$f.forgot_label }, "Passwort vergessen?")))));
|
|
256
|
+
forgotLink &&
|
|
257
|
+
React.createElement("div", { className: styles$f.forgot_container }, forgotLink))));
|
|
259
258
|
}
|
|
260
259
|
|
|
261
|
-
var css_248z$e = ".styles-module_container__--NO0 {\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: center;\n align-items: center;\n user-select: none;\n margin-bottom: 20px;\n}\n.styles-module_container__--NO0
|
|
260
|
+
var css_248z$e = ".styles-module_container__--NO0 {\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: center;\n align-items: center;\n user-select: none;\n margin-bottom: 20px;\n}\n.styles-module_container__--NO0 button {\n background: transparent;\n color: #0075FF;\n border: none;\n font-size: 14px;\n cursor: pointer;\n}\n\n.styles-module_input_wrapper__LPIk1 {\n display: flex;\n flex-direction: row;\n justify-content: center;\n gap: 10px;\n}\n\n.styles-module_input__84v36 {\n padding: 14px 10px;\n width: 30px;\n border-radius: 12px;\n border: 1.5px solid #a8a8a8;\n outline: none;\n transition: 0.2s ease;\n text-align: center;\n font-size: 18px;\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n border-color: #0075FF;\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n letter-spacing: 0px !important;\n}";
|
|
262
261
|
var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
|
|
263
262
|
styleInject(css_248z$e);
|
|
264
263
|
|
|
@@ -326,7 +325,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
|
|
|
326
325
|
}
|
|
327
326
|
return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
|
|
328
327
|
})),
|
|
329
|
-
React.createElement("
|
|
328
|
+
React.createElement("button", { onClick: resetValues }, "Zur\u00FCcksetzen"))));
|
|
330
329
|
}
|
|
331
330
|
|
|
332
331
|
var css_248z$d = ".styles-module_container__zcXGF {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n}\n\n.styles-module_input__Tpth8 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid #a8a8a8;\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n border-color: #0075FF;\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n border-color: #e50000;\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n position: relative;\n}\n\n.styles-module_label__appHO {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: white;\n color: grey;\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: grey;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: linear-gradient(to bottom, rgba(250, 250, 250, 0.9411764706), hsla(0, 0%, 100%, 0.951));\n color: #0063d4;\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n color: #a8a8a8;\n}";
|
|
@@ -353,25 +352,23 @@ var css_248z$c = ".styles-module_box__Z0iod {\n background: #F4F4F4;\n width:
|
|
|
353
352
|
var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
|
|
354
353
|
styleInject(css_248z$c);
|
|
355
354
|
|
|
356
|
-
function OptionField({ headline, description,
|
|
355
|
+
function OptionField({ headline, description, iconName }) {
|
|
357
356
|
return (React.createElement(React.Fragment, null,
|
|
358
|
-
React.createElement("
|
|
359
|
-
React.createElement("div", { className: styles$c.
|
|
360
|
-
|
|
361
|
-
React.createElement("
|
|
362
|
-
|
|
363
|
-
React.createElement("p", null, description))))));
|
|
357
|
+
React.createElement("div", { className: styles$c.box },
|
|
358
|
+
React.createElement("div", { className: styles$c.left_side }, iconName && React.createElement(SvgIcon, { iconName: iconName })),
|
|
359
|
+
React.createElement("div", { className: styles$c.right_side },
|
|
360
|
+
React.createElement("h4", null, headline),
|
|
361
|
+
React.createElement("p", null, description)))));
|
|
364
362
|
}
|
|
365
363
|
|
|
366
364
|
var css_248z$b = ".styles-module_container__XCtqW {\n background: white;\n border-radius: 12px;\n padding: 30px;\n margin-bottom: 30px;\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 18px;\n color: black;\n border: 1px solid #B1B1B1;\n transition: 0.2s ease-in-out;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n}\n.styles-module_container__XCtqW:hover {\n background: #f0f0f0;\n border-color: #888888;\n}\n.styles-module_container__XCtqW h3 {\n font-weight: 500;\n margin: 0;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n border: 1px solid black;\n}";
|
|
367
365
|
var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
|
|
368
366
|
styleInject(css_248z$b);
|
|
369
367
|
|
|
370
|
-
function OptionFieldHorizontal({ title,
|
|
371
|
-
return (React.createElement("
|
|
372
|
-
React.createElement(
|
|
373
|
-
|
|
374
|
-
React.createElement("h3", null, title))));
|
|
368
|
+
function OptionFieldHorizontal({ title, iconName, preselected = false }) {
|
|
369
|
+
return (React.createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
|
|
370
|
+
React.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
|
|
371
|
+
React.createElement("h3", null, title)));
|
|
375
372
|
}
|
|
376
373
|
|
|
377
374
|
var css_248z$a = ".styles-module_container__oNbrP {\n padding-top: 10px;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65 {\n padding: 10px 18px;\n background: #0075FF;\n border-radius: 40px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n font-size: 15px;\n color: white;\n align-items: center;\n border: none;\n}\n.styles-module_container__oNbrP .styles-module_button__UBk65.styles-module_red__CHF3e {\n background: #e40000;\n}";
|
|
@@ -553,12 +550,11 @@ var css_248z$3 = ".styles-module_container__xRQNT {\n display: flex;\n flex-di
|
|
|
553
550
|
var styles$3 = {"container":"styles-module_container__xRQNT"};
|
|
554
551
|
styleInject(css_248z$3);
|
|
555
552
|
|
|
556
|
-
function StepBack({
|
|
553
|
+
function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
|
|
557
554
|
return (React.createElement(React.Fragment, null,
|
|
558
|
-
React.createElement("
|
|
559
|
-
React.createElement(
|
|
560
|
-
|
|
561
|
-
"Weitere M\u00F6glichkeiten"))));
|
|
555
|
+
React.createElement("div", { className: styles$3.container },
|
|
556
|
+
React.createElement(SvgIcon, { iconName: iconName }),
|
|
557
|
+
text)));
|
|
562
558
|
}
|
|
563
559
|
|
|
564
560
|
var css_248z$2 = ".styles-module_container__jNs7m {\n margin-top: 30px;\n}\n.styles-module_container__jNs7m h3 {\n font-weight: 500;\n font-size: 16px;\n}\n\n.styles-module_item_list__FxHkg.styles-module_has_children__Uu-8D {\n border-top: 1px solid #D0D0D0;\n border-bottom: 1px solid #D0D0D0;\n}\n\n.styles-module_item_list__FxHkg {\n list-style: none;\n padding: 0;\n margin: 0;\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n padding: 8px 14px;\n border-radius: 25px;\n transition: 0.2s ease-in-out;\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_default__SexGH:hover {\n background: rgb(223, 223, 223);\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_red__KD3qJ:hover {\n background: rgb(255, 199, 199);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV {\n padding: 10px 20px;\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n gap: 10px;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_moreText__-blXb {\n flex: 1;\n margin-bottom: 4px;\n color: #0075FF;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_subtitle__DT5OF {\n color: rgb(162, 162, 162);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(even) {\n background: #F3F3F3;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n border-bottom: 1px solid #D0D0D0;\n}";
|
|
@@ -619,15 +615,10 @@ var css_248z$1 = ".styles-module_container__ItBx0 {\n display: flex;\n flex-di
|
|
|
619
615
|
var styles$1 = {"container":"styles-module_container__ItBx0"};
|
|
620
616
|
styleInject(css_248z$1);
|
|
621
617
|
|
|
622
|
-
function TextWithIcon({ iconName, label,
|
|
623
|
-
return (React.createElement("div", { className: styles$1.container },
|
|
624
|
-
React.createElement(
|
|
625
|
-
|
|
626
|
-
React.createElement("span", null, label))
|
|
627
|
-
:
|
|
628
|
-
React.createElement(React.Fragment, null,
|
|
629
|
-
React.createElement(SvgIcon, { iconName: iconName }),
|
|
630
|
-
React.createElement("span", null, label))));
|
|
618
|
+
function TextWithIcon({ iconName, label, }) {
|
|
619
|
+
return (React.createElement("div", { className: styles$1.container },
|
|
620
|
+
React.createElement(SvgIcon, { iconName: iconName }),
|
|
621
|
+
React.createElement("span", null, label)));
|
|
631
622
|
}
|
|
632
623
|
|
|
633
624
|
function degreesToRadians(degrees) {
|