math-main-components 0.0.213 → 0.0.215
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/Dropdown/Dropdown.stories.d.ts +1 -2
- package/dist/components/Dropdown/index.d.ts +1 -2
- package/dist/components/SelectFileCard/SelectFileCard.stories.d.ts +11 -0
- package/dist/components/SelectFileCard/index.d.ts +8 -0
- package/dist/index.cjs.js +214 -164
- package/dist/index.d.ts +1 -1
- package/dist/index.esm.js +214 -164
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -9417,7 +9417,7 @@ function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" })
|
|
|
9417
9417
|
text)));
|
|
9418
9418
|
}
|
|
9419
9419
|
|
|
9420
|
-
var css_248z$y = ".styles-module_container__3IVfB {\n margin-bottom: 20px;\n background: var(--background-1);\n border-radius: 30px;\n transition: 0.2s ease-in-out;\n color: var(--foreground-1);\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 16px 20px;\n color: var(--foreground-3);\n background: var(--background-2);\n border-radius: 30px;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: 0.2s ease-in-out;\n gap: 10px;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb span {\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb h3 {\n margin: 0;\n font-weight: 400;\n font-size: 16px;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R {\n box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_head__xFYQb span {\n rotate: 180deg;\n}\n.styles-module_container__3IVfB .styles-module_content__XAf02 {\n transition: all 0.3s ease-in-out;\n line-height: 1.5;\n}\n.styles-module_container__3IVfB.styles-module_not_active__JcVLz .styles-module_content__XAf02 {\n height: 0;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_content__XAf02 {\n max-height: auto;\n overflow: visible;\n opacity: 1;\n padding: 10px
|
|
9420
|
+
var css_248z$y = ".styles-module_container__3IVfB {\n margin-bottom: 20px;\n background: var(--background-1);\n border-radius: 30px;\n transition: 0.2s ease-in-out;\n color: var(--foreground-1);\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb {\n display: flex;\n flex-direction: row;\n align-items: center;\n padding: 16px 20px;\n color: var(--foreground-3);\n background: var(--background-2);\n border-radius: 30px;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n transition: 0.2s ease-in-out;\n font-family: var(--font-1);\n gap: 10px;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb span {\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb h3 {\n margin: 0;\n font-weight: 400;\n font-size: 16px;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__3IVfB .styles-module_head__xFYQb:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R {\n box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_head__xFYQb span {\n rotate: 180deg;\n}\n.styles-module_container__3IVfB .styles-module_content__XAf02 {\n transition: all 0.3s ease-in-out;\n line-height: 1.5;\n padding: 0px 20px;\n}\n.styles-module_container__3IVfB.styles-module_not_active__JcVLz .styles-module_content__XAf02 {\n height: 0;\n max-height: 0;\n overflow: hidden;\n opacity: 0;\n}\n.styles-module_container__3IVfB.styles-module_active__soD8R .styles-module_content__XAf02 {\n max-height: auto;\n overflow: visible;\n opacity: 1;\n padding: 10px 20px;\n}";
|
|
9421
9421
|
var styles$y = {"container":"styles-module_container__3IVfB","head":"styles-module_head__xFYQb","active":"styles-module_active__soD8R","content":"styles-module_content__XAf02","not_active":"styles-module_not_active__JcVLz"};
|
|
9422
9422
|
styleInject(css_248z$y);
|
|
9423
9423
|
|
|
@@ -9471,7 +9471,7 @@ function CardButton({ id, children, iconName, onClick, ...props }) {
|
|
|
9471
9471
|
React__default["default"].createElement("h2", null, children)));
|
|
9472
9472
|
}
|
|
9473
9473
|
|
|
9474
|
-
var css_248z$u = ".styles-module_container__gCCnD {\n margin-bottom: 20px;\n color: var(--foreground-3);\n}\n.styles-module_container__gCCnD [type=checkbox] {\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__gCCnD [type=checkbox] + label {\n position: absolute;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n width: 17px;\n height: 17px;\n border-radius: 5px;\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__gCCnD [type=checkbox] ~ 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: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n background-color: var(--primary-1);\n border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-2);\n}";
|
|
9474
|
+
var css_248z$u = ".styles-module_container__gCCnD {\n margin-bottom: 20px;\n color: var(--foreground-3);\n width: 100%;\n}\n.styles-module_container__gCCnD [type=checkbox] {\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__gCCnD [type=checkbox] + label {\n position: absolute;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n}\n.styles-module_container__gCCnD [type=checkbox] + label::before {\n width: 17px;\n height: 17px;\n border-radius: 5px;\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__gCCnD [type=checkbox] ~ 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: 500;\n}\n.styles-module_container__gCCnD [type=checkbox]:checked + label::before {\n background-color: var(--primary-1);\n border-color: var(--primary-1);\n}\n.styles-module_container__gCCnD [type=checkbox]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-2);\n}";
|
|
9475
9475
|
var styles$u = {"container":"styles-module_container__gCCnD"};
|
|
9476
9476
|
styleInject(css_248z$u);
|
|
9477
9477
|
|
|
@@ -9535,16 +9535,13 @@ function Dialog({ data, enabled, text, onClose, onSubmit = () => { }, children }
|
|
|
9535
9535
|
React__default["default"].createElement("button", { className: styles$r.submit_button, id: "submit-button", onClick: (event) => onSubmit(event, data) }, "Best\u00E4tigen"))));
|
|
9536
9536
|
}
|
|
9537
9537
|
|
|
9538
|
-
var css_248z$q = ".styles-module_container__hGVir {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: \"Playfair\", serif;\n border-radius: 18px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n background: var(--background-1);\n padding: 6px;\n border: 1px solid var(--border-1);\n margin-bottom: 20px;\n font-family: var(--font-1);\n}\n\n.styles-module_container__hGVir {\n border: 1px solid var(--border-1);\n padding: 10px;\n gap: 10px;\n display: flex;\n align-items: center;\n border-radius: 12px;\n cursor: pointer;\n background: var(--background-1);\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__hGVir:hover {\n border-color: var(--primary-2);\n}\n.styles-module_container__hGVir:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_container__hGVir select {\n border: none;\n outline: none;\n background: none;\n cursor: pointer;\n font-size: 16px;\n min-width: 64px;\n height: 100%;\n font-family: var(--font-1);\n}\n\n.styles-module_input__h-BA2::-webkit-outer-spin-button,\n.styles-module_input__h-BA2::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.styles-module_input_container__2u56C {\n padding: 0px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid transparent;\n transition: 0.2s ease;\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n background: var(--background-1);\n border-color: var(--border-1);\n height: 55px;\n}\n.styles-module_input_container__2u56C:hover {\n border-color: var(--primary-2);\n}\n.styles-module_input_container__2u56C .styles-module_unit_label__EVP9q {\n font-size: 16px;\n text-align: right;\n}\n.styles-module_input_container__2u56C:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2 {\n width: 0px;\n min-width: 64px;\n outline: none;\n border: none;\n -moz-appearance: textfield;\n appearance: textfield;\n font-size: 16px;\n text-align: right;\n background: transparent;\n font-family: var(--font-1);\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=number] {\n cursor: pointer;\n flex: 1;\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=range] {\n width: 100%;\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=number]:disabled {\n background: transparent;\n color: var(--foreground-3);\n}";
|
|
9538
|
+
var css_248z$q = ".styles-module_container__hGVir {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: \"Playfair\", serif;\n border-radius: 18px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n background: var(--background-1);\n padding: 6px;\n border: 1px solid var(--border-1);\n margin-bottom: 20px;\n font-family: var(--font-1);\n width: 100%;\n}\n\n.styles-module_container__hGVir {\n border: 1px solid var(--border-1);\n padding: 10px;\n gap: 10px;\n display: flex;\n align-items: center;\n border-radius: 12px;\n cursor: pointer;\n background: var(--background-1);\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__hGVir:hover {\n border-color: var(--primary-2);\n}\n.styles-module_container__hGVir:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_container__hGVir select {\n border: none;\n outline: none;\n background: none;\n cursor: pointer;\n font-size: 16px;\n min-width: 64px;\n height: 100%;\n font-family: var(--font-1);\n}\n\n.styles-module_input__h-BA2::-webkit-outer-spin-button,\n.styles-module_input__h-BA2::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.styles-module_input_container__2u56C {\n padding: 0px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid transparent;\n transition: 0.2s ease;\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n background: var(--background-1);\n border-color: var(--border-1);\n height: 55px;\n}\n.styles-module_input_container__2u56C:hover {\n border-color: var(--primary-2);\n}\n.styles-module_input_container__2u56C .styles-module_unit_label__EVP9q {\n font-size: 16px;\n text-align: right;\n}\n.styles-module_input_container__2u56C:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2 {\n width: 0px;\n min-width: 64px;\n outline: none;\n border: none;\n -moz-appearance: textfield;\n appearance: textfield;\n font-size: 16px;\n text-align: right;\n background: transparent;\n font-family: var(--font-1);\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=number] {\n cursor: pointer;\n flex: 1;\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=range] {\n width: 100%;\n}\n.styles-module_input_container__2u56C .styles-module_input__h-BA2[type=number]:disabled {\n background: transparent;\n color: var(--foreground-3);\n}";
|
|
9539
9539
|
var styles$q = {"container":"styles-module_container__hGVir","input":"styles-module_input__h-BA2","input_container":"styles-module_input_container__2u56C","unit_label":"styles-module_unit_label__EVP9q"};
|
|
9540
9540
|
styleInject(css_248z$q);
|
|
9541
9541
|
|
|
9542
|
-
const Dropdown = ({ options = [], unit = "",
|
|
9543
|
-
const onDropdownChange = (event) => {
|
|
9544
|
-
onInput(event.target.value);
|
|
9545
|
-
};
|
|
9542
|
+
const Dropdown = ({ options = [], unit = "", ...props }) => {
|
|
9546
9543
|
return (React__default["default"].createElement("div", { className: styles$q.container },
|
|
9547
|
-
React__default["default"].createElement("select", { className: styles$q.select,
|
|
9544
|
+
React__default["default"].createElement("select", { className: styles$q.select, ...props },
|
|
9548
9545
|
React__default["default"].createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
|
|
9549
9546
|
options.map((option, index) => (React__default["default"].createElement("option", { key: index, value: option.value }, option.label))))));
|
|
9550
9547
|
};
|
|
@@ -9561,38 +9558,27 @@ function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorh
|
|
|
9561
9558
|
button && React__default["default"].createElement(Button, { onClick: onClick, type: "lightBlue" }, button)));
|
|
9562
9559
|
}
|
|
9563
9560
|
|
|
9564
|
-
var css_248z$o = ".styles-
|
|
9565
|
-
var styles$o = {"container":"styles-
|
|
9561
|
+
var css_248z$o = ".styles-module_container__9wYEm {\n margin-bottom: 30px;\n width: 100%;\n font-family: var(--font-1);\n}\n.styles-module_container__9wYEm h1,\n.styles-module_container__9wYEm h2,\n.styles-module_container__9wYEm h3,\n.styles-module_container__9wYEm h4,\n.styles-module_container__9wYEm h5 {\n margin: 0;\n font-weight: 500;\n color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n margin-top: 5px;\n font-weight: 400;\n}";
|
|
9562
|
+
var styles$o = {"container":"styles-module_container__9wYEm"};
|
|
9566
9563
|
styleInject(css_248z$o);
|
|
9567
9564
|
|
|
9568
|
-
function FormButton({ id, children, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { }, ...props }) {
|
|
9569
|
-
return (React__default["default"].createElement("div", { className: styles$o.container, style: style },
|
|
9570
|
-
React__default["default"].createElement("button", { type: type, onClick: onClick, style: { background: background }, id: id, ...props },
|
|
9571
|
-
children,
|
|
9572
|
-
iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, color: "white" }))));
|
|
9573
|
-
}
|
|
9574
|
-
|
|
9575
|
-
var css_248z$n = ".styles-module_container__9wYEm {\n margin-bottom: 30px;\n width: 100%;\n font-family: var(--font-1);\n}\n.styles-module_container__9wYEm h1,\n.styles-module_container__9wYEm h2,\n.styles-module_container__9wYEm h3,\n.styles-module_container__9wYEm h4,\n.styles-module_container__9wYEm h5 {\n margin: 0;\n font-weight: 500;\n color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n margin-top: 5px;\n font-weight: 400;\n}";
|
|
9576
|
-
var styles$n = {"container":"styles-module_container__9wYEm"};
|
|
9577
|
-
styleInject(css_248z$n);
|
|
9578
|
-
|
|
9579
9565
|
function FormText({ title, value, style }) {
|
|
9580
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9566
|
+
return (React__default["default"].createElement("div", { className: styles$o.container, style: style },
|
|
9581
9567
|
React__default["default"].createElement("h5", null, title),
|
|
9582
9568
|
React__default["default"].createElement("h3", null, value)));
|
|
9583
9569
|
}
|
|
9584
9570
|
|
|
9585
|
-
var css_248z$
|
|
9586
|
-
var styles$
|
|
9587
|
-
styleInject(css_248z$
|
|
9571
|
+
var css_248z$n = ".styles-module_container__C99XV {\n margin-right: 8px;\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF {\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__C99XV .styles-module_button__pGYkF:hover {\n background: var(--background-2);\n}\n.styles-module_container__C99XV .styles-module_button__pGYkF span {\n color: var(--foreground-1) !important;\n}";
|
|
9572
|
+
var styles$n = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
|
|
9573
|
+
styleInject(css_248z$n);
|
|
9588
9574
|
|
|
9589
9575
|
function ForwardButton({ onClick = () => { } }) {
|
|
9590
9576
|
function onClickButton(event) {
|
|
9591
9577
|
event.preventDefault();
|
|
9592
9578
|
onClick(event);
|
|
9593
9579
|
}
|
|
9594
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9595
|
-
React__default["default"].createElement("button", { onClick: onClickButton, className: styles$
|
|
9580
|
+
return (React__default["default"].createElement("div", { className: styles$n.container },
|
|
9581
|
+
React__default["default"].createElement("button", { onClick: onClickButton, className: styles$n.button },
|
|
9596
9582
|
React__default["default"].createElement(SvgIcon, { iconName: "arrow_back" }))));
|
|
9597
9583
|
}
|
|
9598
9584
|
|
|
@@ -9600,9 +9586,9 @@ function Gap({ size }) {
|
|
|
9600
9586
|
return (React__default["default"].createElement("div", { style: { height: size } }));
|
|
9601
9587
|
}
|
|
9602
9588
|
|
|
9603
|
-
var css_248z$
|
|
9604
|
-
var styles$
|
|
9605
|
-
styleInject(css_248z$
|
|
9589
|
+
var css_248z$m = ".styles-module_container__Jr7LQ {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n}\n\n.styles-module_input__v-hUz {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n min-height: 50px;\n line-height: 1.7;\n background: var(--background-1);\n color: var(--foreground-1);\n font-family: var(--font-2);\n}\n.styles-module_input__v-hUz:focus, .styles-module_input__v-hUz:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input__v-hUz.styles-module_not_available__6xu3Y, .styles-module_input__v-hUz:invalid {\n border: var(--invalid-border);\n box-shadow: var(--invalid-shadow);\n}\n\n/* animated title */\n.styles-module_container__Jr7LQ {\n position: relative;\n}\n\n.styles-module_label__SSsD3 {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n font-family: var(--font-1);\n}\n\n.styles-module_label_text__EOAq5 {\n position: absolute;\n top: 20px;\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: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__v-hUz.styles-module_with_title__HWcCH:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__v-hUz:focus + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5,\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n transform: translateY(-50%);\n left: 15px;\n font-size: 14px;\n top: 0;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__v-hUz.styles-module_valid__6geu9 + .styles-module_label__SSsD3 .styles-module_label_text__EOAq5 {\n color: var(--foreground-3);\n}";
|
|
9590
|
+
var styles$m = {"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"};
|
|
9591
|
+
styleInject(css_248z$m);
|
|
9606
9592
|
|
|
9607
9593
|
function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
|
|
9608
9594
|
const [value, setValue] = React.useState(defaultValue);
|
|
@@ -9611,36 +9597,36 @@ function InputArea({ id, title, name, placeholder = "", defaultValue = "", autoF
|
|
|
9611
9597
|
element.focus();
|
|
9612
9598
|
}, [autoFocus]);
|
|
9613
9599
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9614
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9615
|
-
React__default["default"].createElement("textarea", { className: `${styles$
|
|
9600
|
+
React__default["default"].createElement("div", { className: styles$m.container, style: { width } },
|
|
9601
|
+
React__default["default"].createElement("textarea", { className: `${styles$m.input} ${title != undefined ? styles$m.with_title : styles$m.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$m.valid : styles$m.not_valid} ${available ? styles$m.available : styles$m.not_available}`, name: name, id: id, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
|
|
9616
9602
|
setValue(event.target.value);
|
|
9617
9603
|
if (onInput)
|
|
9618
9604
|
onInput(event);
|
|
9619
9605
|
} }),
|
|
9620
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9621
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9606
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$m.label },
|
|
9607
|
+
React__default["default"].createElement("span", { className: styles$m.label_text }, title)))));
|
|
9622
9608
|
}
|
|
9623
9609
|
|
|
9624
|
-
var css_248z$
|
|
9625
|
-
var styles$
|
|
9626
|
-
styleInject(css_248z$
|
|
9610
|
+
var css_248z$l = ".styles-module_input__-GKhx {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__-GKhx:focus, .styles-module_input__-GKhx:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input__-GKhx.styles-module_not_available__XD1kR, .styles-module_input__-GKhx:invalid {\n border: var(--invalid-border);\n box-shadow: var(--invalid-shadow);\n}\n\n/* animated title */\n.styles-module_container__--4rV {\n position: relative;\n display: flex;\n flex-direction: column;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_label__mGzwP {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n font-family: var(--font-1);\n}\n\n.styles-module_label_text__d0eMb {\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: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__-GKhx.styles-module_with_title__CGOEs:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__-GKhx:focus + .styles-module_label__mGzwP .styles-module_label_text__d0eMb,\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: #0063d4;\n}\n\n.styles-module_input__-GKhx.styles-module_valid__uj8g- + .styles-module_label__mGzwP .styles-module_label_text__d0eMb {\n color: var(--foreground-3);\n}";
|
|
9611
|
+
var styles$l = {"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-"};
|
|
9612
|
+
styleInject(css_248z$l);
|
|
9627
9613
|
|
|
9628
9614
|
function InputMail({ id, placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true, defaultValue = "", onInput = () => { }, ...props }) {
|
|
9629
9615
|
const [value, setValue] = React.useState(defaultValue);
|
|
9630
9616
|
React.useEffect(() => setValue(defaultValue), [defaultValue]);
|
|
9631
9617
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9632
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9633
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9618
|
+
React__default["default"].createElement("div", { className: styles$l.container, style: { width: width } },
|
|
9619
|
+
React__default["default"].createElement("input", { className: `${styles$l.input} ${title != undefined ? styles$l.with_title : styles$l.without_title} ${value.length > 0 ? styles$l.valid : styles$l.not_valid} ${available ? styles$l.available : styles$l.not_available}`, name: name, placeholder: placeholder, type: "email", id: id, onInput: (event) => {
|
|
9634
9620
|
setValue(event.target.value);
|
|
9635
9621
|
onInput(event);
|
|
9636
9622
|
}, ...props }),
|
|
9637
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9638
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9623
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$l.label },
|
|
9624
|
+
React__default["default"].createElement("span", { className: styles$l.label_text }, title)))));
|
|
9639
9625
|
}
|
|
9640
9626
|
|
|
9641
|
-
var css_248z$
|
|
9642
|
-
var styles$
|
|
9643
|
-
styleInject(css_248z$
|
|
9627
|
+
var css_248z$k = ".styles-module_container__IXTeq {\n display: flex;\n flex-direction: row;\n gap: 20px;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__flMT5 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__flMT5:focus, .styles-module_input__flMT5:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n\n/* animated title */\n.styles-module_form__chEvQ {\n position: relative;\n flex: 1;\n display: flex;\n}\n\n.styles-module_label__hflX9 {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n font-family: var(--font-1);\n}\n\n.styles-module_label_text__oXgFI {\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: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__flMT5.styles-module_with_title__ubN0L:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__flMT5:focus + .styles-module_label__hflX9 .styles-module_label_text__oXgFI,\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__flMT5.styles-module_valid__76xYu + .styles-module_label__hflX9 .styles-module_label_text__oXgFI {\n color: var(--foreground-3);\n}";
|
|
9628
|
+
var styles$k = {"container":"styles-module_container__IXTeq","input":"styles-module_input__flMT5","form":"styles-module_form__chEvQ","label":"styles-module_label__hflX9","label_text":"styles-module_label_text__oXgFI","with_title":"styles-module_with_title__ubN0L","valid":"styles-module_valid__76xYu"};
|
|
9629
|
+
styleInject(css_248z$k);
|
|
9644
9630
|
|
|
9645
9631
|
function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "" }, title = { firstName: "Vorname", lastName: "Nachname" }, defaultValue = { firstName: "", lastName: "" }, onInput = (name, event) => { }, onInputFirstName = (event) => { }, onInputLastName = (event) => { }, }) {
|
|
9646
9632
|
const [firstName, setFirstName] = React.useState(defaultValue.firstName ? defaultValue.firstName : "");
|
|
@@ -9655,20 +9641,20 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
|
|
|
9655
9641
|
onInputLastName(event);
|
|
9656
9642
|
onInput("lastName", event);
|
|
9657
9643
|
}
|
|
9658
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9659
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9660
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9661
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9662
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9663
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9664
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9665
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9666
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9644
|
+
return (React__default["default"].createElement("div", { className: styles$k.container, style: { width: width } },
|
|
9645
|
+
React__default["default"].createElement("div", { className: styles$k.form },
|
|
9646
|
+
React__default["default"].createElement("input", { className: `${styles$k.input} ${title.firstName != undefined ? styles$k.with_title : styles$k.without_title} ${firstName.length > 0 ? styles$k.valid : styles$k.not_valid}`, name: "firstName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.firstName, defaultValue: defaultValue.firstName, onInput: onInput1 }),
|
|
9647
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$k.label },
|
|
9648
|
+
React__default["default"].createElement("span", { className: styles$k.label_text }, title.firstName))),
|
|
9649
|
+
React__default["default"].createElement("div", { className: styles$k.form },
|
|
9650
|
+
React__default["default"].createElement("input", { className: `${styles$k.input} ${title.lastName != undefined ? styles$k.with_title : styles$k.without_title} ${lastName.length > 0 ? styles$k.valid : styles$k.not_valid}`, name: "lastName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.lastName, defaultValue: defaultValue.lastName, onInput: onInput2 }),
|
|
9651
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$k.label },
|
|
9652
|
+
React__default["default"].createElement("span", { className: styles$k.label_text }, title.lastName)))));
|
|
9667
9653
|
}
|
|
9668
9654
|
|
|
9669
|
-
var css_248z$
|
|
9670
|
-
var styles$
|
|
9671
|
-
styleInject(css_248z$
|
|
9655
|
+
var css_248z$j = ".styles-module_container__Xk2HY {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__ReFFR {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n width: 100%;\n background: var(--background-1);\n color: var(--foreground-1);\n /* Chrome, Safari, Edge, Opera */\n /* Firefox */\n}\n.styles-module_input__ReFFR:focus, .styles-module_input__ReFFR:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input__ReFFR.styles-module_not_available__mZ5-1, .styles-module_input__ReFFR:invalid {\n border: var(--invalid-border);\n box-shadow: var(--invalid-shadow);\n}\n.styles-module_input__ReFFR::-webkit-outer-spin-button, .styles-module_input__ReFFR::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.styles-module_input__ReFFR[type=number] {\n -moz-appearance: textfield;\n appearance: textfield;\n}\n\n/* animated title */\n.styles-module_container__Xk2HY {\n position: relative;\n}\n\n.styles-module_label__4n2Ai {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n font-family: var(--font-1);\n}\n\n.styles-module_label_text__NsKJU {\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: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__ReFFR.styles-module_with_title__vMb1v:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__ReFFR:focus + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU,\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__ReFFR.styles-module_valid__NyP0J + .styles-module_label__4n2Ai .styles-module_label_text__NsKJU {\n color: var(--foreground-3);\n}";
|
|
9656
|
+
var styles$j = {"container":"styles-module_container__Xk2HY","input":"styles-module_input__ReFFR","not_available":"styles-module_not_available__mZ5-1","label":"styles-module_label__4n2Ai","label_text":"styles-module_label_text__NsKJU","with_title":"styles-module_with_title__vMb1v","valid":"styles-module_valid__NyP0J"};
|
|
9657
|
+
styleInject(css_248z$j);
|
|
9672
9658
|
|
|
9673
9659
|
function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "number", width = "100%", available = true, onInput = (event) => { } }) {
|
|
9674
9660
|
const [value, setValue] = React.useState(defaultValue);
|
|
@@ -9677,37 +9663,37 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
|
|
|
9677
9663
|
element.focus();
|
|
9678
9664
|
}, [autoFocus]);
|
|
9679
9665
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9680
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9681
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9666
|
+
React__default["default"].createElement("div", { className: styles$j.container, style: { width } },
|
|
9667
|
+
React__default["default"].createElement("input", { 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, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
|
|
9682
9668
|
setValue(event.target.value);
|
|
9683
9669
|
onInput(event);
|
|
9684
9670
|
} }),
|
|
9685
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9686
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9671
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$j.label },
|
|
9672
|
+
React__default["default"].createElement("span", { className: styles$j.label_text }, title)))));
|
|
9687
9673
|
}
|
|
9688
9674
|
|
|
9689
|
-
var css_248z$
|
|
9690
|
-
var styles$
|
|
9691
|
-
styleInject(css_248z$
|
|
9675
|
+
var css_248z$i = "@keyframes styles-module_show__OLTZH {\n from {\n max-heigth: 0px;\n height: 0px;\n }\n}\n@keyframes styles-module_hide__LAgaY {\n from {\n max-heigth: 0px;\n height: 0px;\n }\n to {\n max-height: fit-content;\n }\n}\n.styles-module_container__UdmOO {\n display: flex;\n flex-direction: column;\n gap: 6px;\n margin-bottom: 30px;\n max-width: 100%;\n border: 1px solid var(--border-2);\n border-radius: 12px;\n transition: all 0.2s ease-in-out;\n box-sizing: border-box;\n}\n.styles-module_container__UdmOO .styles-module_forgot_label__EeN6a {\n font-size: 12px;\n color: var(--foreground-3);\n}\n.styles-module_container__UdmOO.styles-module_visible__QROqh {\n max-height: 100px;\n opacity: 1;\n}\n.styles-module_container__UdmOO.styles-module_hidden__hDKDO {\n overflow: hidden;\n max-height: 0;\n opacity: 0;\n}\n.styles-module_container__UdmOO:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n\n.styles-module_input__sC2fP {\n padding: 14px 20px;\n font-size: 16px;\n border-top-left-radius: 12px;\n border-bottom-left-radius: 12px;\n border-right: none;\n outline: none;\n border: none;\n transition: all 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n\n.styles-module_hideButton__83mRI {\n outline: none;\n display: flex;\n align-items: center;\n padding: 10px;\n border: none;\n border-left: none;\n background: none;\n border-top-right-radius: 12px;\n border-bottom-right-radius: 12px;\n cursor: pointer;\n}\n.styles-module_hideButton__83mRI span {\n color: var(--foreground-3);\n}\n\n/* animated title */\n.styles-module_form__m866x {\n position: relative;\n display: flex;\n}\n\n.styles-module_label__8PuaL {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n font-family: var(--font-1);\n}\n\n.styles-module_label_text__FwJ1F {\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: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__sC2fP.styles-module_with_title__dftgq:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__sC2fP:focus + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F,\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__sC2fP.styles-module_valid__SM7w5 + .styles-module_label__8PuaL .styles-module_label_text__FwJ1F {\n color: var(--foreground-3);\n}";
|
|
9676
|
+
var styles$i = {"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"};
|
|
9677
|
+
styleInject(css_248z$i);
|
|
9692
9678
|
|
|
9693
9679
|
function InputPassword({ id, placeholder = "", title = "Passwort", name = 'password', isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
|
|
9694
9680
|
const [value, setValue] = React.useState("");
|
|
9695
9681
|
const [hidePassword, setHidePassword] = React.useState(true);
|
|
9696
9682
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9697
|
-
React__default["default"].createElement("div", { className: `${styles$
|
|
9698
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9699
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9700
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9701
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9702
|
-
React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$
|
|
9683
|
+
React__default["default"].createElement("div", { className: `${styles$i.container} ${isVisible ? styles$i.visible : styles$i.hidden}`, style: { width: width } },
|
|
9684
|
+
React__default["default"].createElement("div", { className: styles$i.form },
|
|
9685
|
+
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}`, name: name, id: id, minLength: minLength, autoComplete: autoComplete, placeholder: placeholder, type: hidePassword ? "password" : "text", onInput: (event) => setValue(event.target.value) }),
|
|
9686
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$i.label },
|
|
9687
|
+
React__default["default"].createElement("span", { className: styles$i.label_text }, title)),
|
|
9688
|
+
React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$i.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
|
|
9703
9689
|
React__default["default"].createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
|
|
9704
9690
|
forgotLink &&
|
|
9705
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9691
|
+
React__default["default"].createElement("div", { className: styles$i.forgot_container }, forgotLink))));
|
|
9706
9692
|
}
|
|
9707
9693
|
|
|
9708
|
-
var css_248z$
|
|
9709
|
-
var styles$
|
|
9710
|
-
styleInject(css_248z$
|
|
9694
|
+
var css_248z$h = ".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: var(--primary-1);\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: 1px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n text-align: center;\n font-size: 18px;\n font-weight: 400;\n background: var(--background-1);\n color: var(--foreground-1);\n font-family: var(--font-1);\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\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}\n\n@media (max-width: 450px) {\n .styles-module_input__84v36 {\n width: 25px;\n font-size: 16px;\n }\n .styles-module_input_wrapper__LPIk1 {\n gap: 7px;\n }\n .styles-module_input__84v36:nth-child(3) {\n margin-right: 12px;\n }\n}";
|
|
9695
|
+
var styles$h = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
|
|
9696
|
+
styleInject(css_248z$h);
|
|
9711
9697
|
|
|
9712
9698
|
function InputPin({ name, length, onFinished = () => { } }) {
|
|
9713
9699
|
const [state, setState] = React.useState({});
|
|
@@ -9773,20 +9759,20 @@ function InputPin({ name, length, onFinished = () => { } }) {
|
|
|
9773
9759
|
ref.current.value = "";
|
|
9774
9760
|
});
|
|
9775
9761
|
}
|
|
9776
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9762
|
+
return (React__default["default"].createElement("div", { className: styles$h.container },
|
|
9777
9763
|
React__default["default"].createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
|
|
9778
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9764
|
+
React__default["default"].createElement("div", { className: styles$h.input_wrapper }, [...Array(length)].map((value, i) => {
|
|
9779
9765
|
if (i == 0) {
|
|
9780
|
-
return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$
|
|
9766
|
+
return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$h.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
|
|
9781
9767
|
}
|
|
9782
|
-
return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$
|
|
9768
|
+
return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$h.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
|
|
9783
9769
|
})),
|
|
9784
9770
|
React__default["default"].createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
|
|
9785
9771
|
}
|
|
9786
9772
|
|
|
9787
|
-
var css_248z$
|
|
9788
|
-
var styles$
|
|
9789
|
-
styleInject(css_248z$
|
|
9773
|
+
var css_248z$g = ".styles-module_container__zcXGF {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n max-width: 100%;\n}\n\n.styles-module_input__Tpth8 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n border: var(--invalid-border);\n box-shadow: var(--invalid-shadow);\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 font-family: var(--font-1);\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: var(--background-1);\n color: var(--foreground-3);\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: var(--foreground-3);\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: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n color: var(--foreground-3);\n}";
|
|
9774
|
+
var styles$g = {"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"};
|
|
9775
|
+
styleInject(css_248z$g);
|
|
9790
9776
|
|
|
9791
9777
|
function InputText({ id, title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, autoComplete = "off", available = true, onInput = () => { } }) {
|
|
9792
9778
|
const [value, setValue] = React.useState(defaultValue);
|
|
@@ -9796,18 +9782,18 @@ function InputText({ id, title, name, placeholder = "", defaultValue = "", autoF
|
|
|
9796
9782
|
element.focus();
|
|
9797
9783
|
}, [autoFocus]);
|
|
9798
9784
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9799
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9800
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9785
|
+
React__default["default"].createElement("div", { className: styles$g.container, style: { width, marginBottom } },
|
|
9786
|
+
React__default["default"].createElement("input", { className: `${styles$g.input} ${title != undefined ? styles$g.with_title : styles$g.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$g.valid : styles$g.not_valid} ${available ? styles$g.available : styles$g.not_available}`, name: name, id: id, type: type, placeholder: placeholder, autoComplete: autoComplete, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
|
|
9801
9787
|
setValue(event.target.value);
|
|
9802
9788
|
onInput(event);
|
|
9803
9789
|
} }),
|
|
9804
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
9805
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9790
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$g.label },
|
|
9791
|
+
React__default["default"].createElement("span", { className: styles$g.label_text }, title)))));
|
|
9806
9792
|
}
|
|
9807
9793
|
|
|
9808
|
-
var css_248z$
|
|
9809
|
-
var styles$
|
|
9810
|
-
styleInject(css_248z$
|
|
9794
|
+
var css_248z$f = ".styles-module_container__kkDKN {\n display: flex;\n align-items: center;\n gap: 10px;\n font-family: \"Playfair\", serif;\n border-radius: 18px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n background: var(--background-1);\n padding: 6px;\n border: 1px solid var(--border-1);\n margin-bottom: 20px;\n font-family: var(--font-1);\n}\n\n.styles-module_select_container__nqgUF {\n border: 1px solid var(--border-1);\n padding: 0px 20px;\n gap: 10px;\n display: flex;\n align-items: center;\n border-radius: 12px;\n cursor: pointer;\n background: var(--background-1);\n transition: 0.2s ease-in-out;\n height: 55px;\n}\n.styles-module_select_container__nqgUF:hover {\n border-color: var(--primary-2);\n}\n.styles-module_select_container__nqgUF:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_select_container__nqgUF select {\n border: none;\n outline: none;\n background: none;\n cursor: pointer;\n font-size: 16px;\n min-width: 64px;\n height: 100%;\n font-family: var(--font-1);\n}\n\n.styles-module_input__pUgcS::-webkit-outer-spin-button,\n.styles-module_input__pUgcS::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.styles-module_input_container__oRJ75 {\n padding: 0px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid transparent;\n transition: 0.2s ease;\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 6px;\n background: var(--background-1);\n border-color: var(--border-1);\n height: 55px;\n}\n.styles-module_input_container__oRJ75:hover {\n border-color: var(--primary-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_unit_label__bLQWy {\n font-size: 16px;\n text-align: right;\n}\n.styles-module_input_container__oRJ75:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n background: var(--background-2);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS {\n width: 0px;\n min-width: 64px;\n outline: none;\n border: none;\n -moz-appearance: textfield;\n appearance: textfield;\n font-size: 16px;\n text-align: right;\n background: transparent;\n font-family: var(--font-1);\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number] {\n cursor: pointer;\n flex: 1;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=range] {\n width: 100%;\n}\n.styles-module_input_container__oRJ75 .styles-module_input__pUgcS[type=number]:disabled {\n background: transparent;\n color: var(--foreground-3);\n}";
|
|
9795
|
+
var styles$f = {"container":"styles-module_container__kkDKN","select_container":"styles-module_select_container__nqgUF","input":"styles-module_input__pUgcS","input_container":"styles-module_input_container__oRJ75","unit_label":"styles-module_unit_label__bLQWy"};
|
|
9796
|
+
styleInject(css_248z$f);
|
|
9811
9797
|
|
|
9812
9798
|
const NumberDropdown = ({ options = [], unit = "", onChangeDropdown = () => { }, onChangeInput = () => { }, ...props }) => {
|
|
9813
9799
|
const onDropdownChange = (event) => {
|
|
@@ -9816,28 +9802,28 @@ const NumberDropdown = ({ options = [], unit = "", onChangeDropdown = () => { },
|
|
|
9816
9802
|
const onInputChange = (event) => {
|
|
9817
9803
|
onChangeInput(Number(event.target.value));
|
|
9818
9804
|
};
|
|
9819
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9820
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9821
|
-
React__default["default"].createElement("select", { className: styles$
|
|
9805
|
+
return (React__default["default"].createElement("div", { className: styles$f.container },
|
|
9806
|
+
React__default["default"].createElement("div", { className: styles$f.select_container },
|
|
9807
|
+
React__default["default"].createElement("select", { className: styles$f.select, onChange: onDropdownChange },
|
|
9822
9808
|
React__default["default"].createElement("option", { value: "none" }, "Ausw\u00E4hlen"),
|
|
9823
9809
|
options.map((option, index) => (React__default["default"].createElement("option", { key: index, value: option.value }, option.label))))),
|
|
9824
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9825
|
-
React__default["default"].createElement("input", { className: styles$
|
|
9826
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9810
|
+
React__default["default"].createElement("div", { className: styles$f.input_container },
|
|
9811
|
+
React__default["default"].createElement("input", { className: styles$f.input, type: "number", onInput: onInputChange, ...props }),
|
|
9812
|
+
React__default["default"].createElement("span", { className: styles$f.unit_label }, unit))));
|
|
9827
9813
|
};
|
|
9828
9814
|
|
|
9829
|
-
var css_248z$
|
|
9830
|
-
var styles$
|
|
9831
|
-
styleInject(css_248z$
|
|
9815
|
+
var css_248z$e = ".styles-module_container__c0sGu {\n width: 44px;\n height: 44px;\n display: flex;\n align-items: center;\n background: var(--background-1);\n justify-content: center;\n cursor: pointer;\n border-radius: 12px;\n transition: 0.2s ease-in-out;\n border: 2px solid transparent;\n}\n.styles-module_container__c0sGu:hover {\n background: var(--background-2);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC {\n background: var(--primary-2);\n}\n.styles-module_container__c0sGu.styles-module_active__naxTC span {\n color: var(--primary-1);\n}\n.styles-module_container__c0sGu span {\n user-select: none;\n font-weight: 300;\n}";
|
|
9816
|
+
var styles$e = {"container":"styles-module_container__c0sGu","active":"styles-module_active__naxTC"};
|
|
9817
|
+
styleInject(css_248z$e);
|
|
9832
9818
|
|
|
9833
9819
|
const ToggleBox = ({ defaultActive = false, activeIcon = "lock", inactiveIcon = "lock", onSwitch = () => { } }) => {
|
|
9834
|
-
return (React__default["default"].createElement("div", { className: [styles$
|
|
9820
|
+
return (React__default["default"].createElement("div", { className: [styles$e.container, defaultActive ? styles$e.active : styles$e.not_active].join(" "), onClick: () => onSwitch(!defaultActive) },
|
|
9835
9821
|
React__default["default"].createElement(SvgIcon, { iconName: defaultActive ? activeIcon : inactiveIcon })));
|
|
9836
9822
|
};
|
|
9837
9823
|
|
|
9838
|
-
var css_248z$
|
|
9839
|
-
var styles$
|
|
9840
|
-
styleInject(css_248z$
|
|
9824
|
+
var css_248z$d = ".styles-module_container__arGnP {\n display: flex;\n align-items: center;\n gap: 20px;\n font-family: var(--font-1);\n border-radius: 12px;\n transition: 0.2s ease-in-out;\n padding-left: 4px;\n}\n.styles-module_container__arGnP.styles-module_active__ngR3w {\n background: var(--primary-2);\n}\n.styles-module_container__arGnP.styles-module_not_active__85hg4 .styles-module_unit_label__KXhNy {\n color: var(--foreground-3);\n}\n.styles-module_container__arGnP.styles-module_number__tQq8W {\n flex-direction: row;\n}\n.styles-module_container__arGnP.styles-module_range__sCNik {\n flex-direction: column;\n gap: 0px;\n align-items: flex-start;\n}\n\n.styles-module_label_container__hGRIY {\n display: flex;\n flex-direction: row;\n gap: 0px;\n align-items: center;\n}\n.styles-module_label_container__hGRIY.styles-module_range__sCNik {\n width: 100%;\n flex: 1;\n padding-top: 10px;\n}\n\n.styles-module_input__j1DTo::-webkit-outer-spin-button,\n.styles-module_input__j1DTo::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n\n.styles-module_value_container__cqrEX {\n display: flex;\n gap: 6px;\n}\n.styles-module_value_container__cqrEX .styles-module_label__FP5Pa {\n font-family: var(--font-1);\n user-select: none;\n -webkit-user-select: none;\n font-size: 18px;\n}\n.styles-module_value_container__cqrEX .styles-module_label__FP5Pa,\n.styles-module_value_container__cqrEX .styles-module_value__sLYHK {\n transition: 0.2s ease-in-out;\n}\n.styles-module_value_container__cqrEX.styles-module_range__sCNik {\n flex: 1;\n align-items: flex-end;\n padding-right: 20px;\n}\n.styles-module_value_container__cqrEX.styles-module_range__sCNik .styles-module_label__FP5Pa {\n font-size: 20px;\n}\n.styles-module_value_container__cqrEX.styles-module_range__sCNik .styles-module_value__sLYHK {\n font-size: 20px;\n}\n.styles-module_value_container__cqrEX.styles-module_number__tQq8W .styles-module_label__FP5Pa {\n font-size: 20px;\n}\n.styles-module_value_container__cqrEX.styles-module_number__tQq8W .styles-module_value__sLYHK {\n max-height: 0;\n overflow: hidden;\n}\n\n.styles-module_input_container__IgbK5 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1px solid transparent;\n transition: 0.2s ease;\n flex: 1;\n display: flex;\n flex-direction: row;\n gap: 6px;\n}\n.styles-module_input_container__IgbK5 .styles-module_unit_label__KXhNy {\n font-size: 20px;\n text-align: right;\n}\n.styles-module_input_container__IgbK5.styles-module_number__tQq8W {\n border-color: var(--primary-2);\n background: var(--background-1);\n cursor: pointer;\n}\n.styles-module_input_container__IgbK5.styles-module_number__tQq8W:focus-within {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_input_container__IgbK5.styles-module_range__sCNik {\n padding: 10px;\n width: calc(100% - 20px);\n}\n.styles-module_input_container__IgbK5.styles-module_range__sCNik .styles-module_unit_label__KXhNy {\n max-width: 0;\n overflow: hidden;\n}\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo {\n width: 0px;\n min-width: 64px;\n outline: none;\n border: none;\n -moz-appearance: textfield;\n appearance: textfield;\n font-size: 16px;\n text-align: right;\n background: transparent;\n font-family: var(--font-1);\n}\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo[type=number] {\n cursor: pointer;\n flex: 1;\n}\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo[type=range] {\n width: 100%;\n}\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo[type=number]:disabled {\n background: transparent;\n color: var(--foreground-3);\n}\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo[type=number].styles-module_not_available__M038X,\n.styles-module_input_container__IgbK5 .styles-module_input__j1DTo[type=number]:invalid {\n color: #e50000;\n}\n\n.styles-module_label__FP5Pa {\n font-family: var(--font-1);\n user-select: none;\n -webkit-user-select: none;\n cursor: pointer;\n}";
|
|
9825
|
+
var styles$d = {"container":"styles-module_container__arGnP","active":"styles-module_active__ngR3w","not_active":"styles-module_not_active__85hg4","unit_label":"styles-module_unit_label__KXhNy","number":"styles-module_number__tQq8W","range":"styles-module_range__sCNik","label_container":"styles-module_label_container__hGRIY","input":"styles-module_input__j1DTo","value_container":"styles-module_value_container__cqrEX","label":"styles-module_label__FP5Pa","value":"styles-module_value__sLYHK","input_container":"styles-module_input_container__IgbK5","not_available":"styles-module_not_available__M038X"};
|
|
9826
|
+
styleInject(css_248z$d);
|
|
9841
9827
|
|
|
9842
9828
|
function NumberField({ placeholder = "", type = "number", active = false, onChangeActive = () => { }, enableLocked = false, locked, onChangeLocked = () => { }, title = "Zahl", unit = "cm", name, defaultValue = 1, onUpdate = () => { }, disabled, min = 0, max = 10, validate = () => true, ...props }) {
|
|
9843
9829
|
const [value, setValue] = React.useState(defaultValue);
|
|
@@ -9849,35 +9835,35 @@ function NumberField({ placeholder = "", type = "number", active = false, onChan
|
|
|
9849
9835
|
onUpdate(value);
|
|
9850
9836
|
}
|
|
9851
9837
|
};
|
|
9852
|
-
return (React__default["default"].createElement("div", { className: [styles$
|
|
9853
|
-
React__default["default"].createElement("div", { className: [styles$
|
|
9838
|
+
return (React__default["default"].createElement("div", { className: [styles$d.container, active ? styles$d.active : styles$d.not_active, styles$d[type]].join(" ") },
|
|
9839
|
+
React__default["default"].createElement("div", { className: [styles$d.label_container, styles$d[type]].join(" ") },
|
|
9854
9840
|
React__default["default"].createElement(ToggleBox, { activeIcon: 'check', inactiveIcon: 'add', defaultActive: active, onSwitch: (active) => onChangeActive(active) }),
|
|
9855
9841
|
enableLocked &&
|
|
9856
9842
|
React__default["default"].createElement(ToggleBox, { activeIcon: 'lock', inactiveIcon: 'lock_open', defaultActive: locked, onSwitch: (locked) => onChangeLocked(locked) }),
|
|
9857
|
-
React__default["default"].createElement("div", { className: [styles$
|
|
9858
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9859
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9860
|
-
React__default["default"].createElement("div", { className: [styles$
|
|
9861
|
-
React__default["default"].createElement("input", { className: `${styles$
|
|
9862
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9843
|
+
React__default["default"].createElement("div", { className: [styles$d.value_container, styles$d[type]].join(" ") },
|
|
9844
|
+
React__default["default"].createElement("span", { className: styles$d.label }, title),
|
|
9845
|
+
React__default["default"].createElement("span", { className: styles$d.value }, `${value} ${unit}`))),
|
|
9846
|
+
React__default["default"].createElement("div", { className: [styles$d.input_container, styles$d[type]].join(" ") },
|
|
9847
|
+
React__default["default"].createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${String(value).length > 0 ? styles$d.valid : styles$d.not_valid} `, name: name, placeholder: placeholder, type: type, onInput: onInput, disabled: disabled, value: value, max: max, min: min, ...props }),
|
|
9848
|
+
React__default["default"].createElement("span", { className: styles$d.unit_label }, unit))));
|
|
9863
9849
|
}
|
|
9864
9850
|
|
|
9865
|
-
var css_248z$
|
|
9866
|
-
var styles$
|
|
9867
|
-
styleInject(css_248z$
|
|
9851
|
+
var css_248z$c = ".styles-module_box__Z0iod {\n background: var(--background-2);\n width: 400px;\n max-width: 100%;\n border-radius: 22px;\n border: 1px solid var(--border-2);\n display: flex;\n flex-direction: row;\n padding: 22px;\n gap: 18px;\n cursor: pointer;\n margin-bottom: 20px;\n transition: 0.2s ease;\n color: var(--foreground-1);\n}\n.styles-module_box__Z0iod:hover {\n background-color: var(--background-1);\n transform: scale(1.01);\n}\n.styles-module_box__Z0iod:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_box__Z0iod .styles-module_left_side__8ObGs {\n width: 40px;\n display: flex;\n flex-direction: column;\n align-items: center;\n padding-top: 5px;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D {\n flex: 1;\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n margin: 0;\n text-align: left;\n font-size: 1.3rem;\n margin-bottom: 12px;\n margin-top: 5px;\n color: var(--foreground-1);\n font-family: var(--font-1);\n}\n.styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n color: var(--foreground-2);\n margin: 0;\n text-align: left;\n font-size: 1.1rem;\n line-height: 1.6;\n}\n\n@media (max-width: 550px) {\n .styles-module_box__Z0iod {\n width: auto;\n }\n .styles-module_box__Z0iod .styles-module_right_side__Ypp0D h4 {\n font-size: 1.2rem;\n }\n .styles-module_box__Z0iod .styles-module_right_side__Ypp0D p {\n font-size: 1rem;\n }\n}";
|
|
9852
|
+
var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
|
|
9853
|
+
styleInject(css_248z$c);
|
|
9868
9854
|
|
|
9869
9855
|
function OptionField({ id, headline, description, iconName }) {
|
|
9870
9856
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9871
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9872
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9873
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9857
|
+
React__default["default"].createElement("div", { className: styles$c.box, id: id },
|
|
9858
|
+
React__default["default"].createElement("div", { className: styles$c.left_side }, iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName })),
|
|
9859
|
+
React__default["default"].createElement("div", { className: styles$c.right_side },
|
|
9874
9860
|
React__default["default"].createElement("h4", null, headline),
|
|
9875
9861
|
React__default["default"].createElement("p", null, description)))));
|
|
9876
9862
|
}
|
|
9877
9863
|
|
|
9878
|
-
var css_248z$
|
|
9879
|
-
var styles$
|
|
9880
|
-
styleInject(css_248z$
|
|
9864
|
+
var css_248z$b = ".styles-module_container__r0YH2 {\n background: var(--background-1);\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: var(--foreground-1);\n border: 1px solid var(--border-2);\n transition: 0.2s ease-in-out;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n cursor: pointer;\n}\n.styles-module_container__r0YH2:hover {\n background: var(--background-2);\n border-color: var(--border-3);\n}\n.styles-module_container__r0YH2 h3 {\n font-weight: 500;\n margin: 0;\n text-align: center;\n font-family: var(--font-1);\n}\n.styles-module_container__r0YH2:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n\n.styles-module_container__r0YH2.styles-module_preselected__zEukD {\n border: 1px solid var(--foreground-1);\n}";
|
|
9865
|
+
var styles$b = {"container":"styles-module_container__r0YH2","preselected":"styles-module_preselected__zEukD"};
|
|
9866
|
+
styleInject(css_248z$b);
|
|
9881
9867
|
|
|
9882
9868
|
function OptionField2({ title, iconName, onClick, preselected = false }) {
|
|
9883
9869
|
function onClickDiv(event) {
|
|
@@ -9885,36 +9871,36 @@ function OptionField2({ title, iconName, onClick, preselected = false }) {
|
|
|
9885
9871
|
if (onClick)
|
|
9886
9872
|
onClick(event);
|
|
9887
9873
|
}
|
|
9888
|
-
return (React__default["default"].createElement("div", { className: [styles$
|
|
9874
|
+
return (React__default["default"].createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" "), onClick: onClickDiv },
|
|
9889
9875
|
iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
|
|
9890
9876
|
React__default["default"].createElement("h3", null, title)));
|
|
9891
9877
|
}
|
|
9892
9878
|
|
|
9893
|
-
var css_248z$
|
|
9894
|
-
var styles$
|
|
9895
|
-
styleInject(css_248z$
|
|
9879
|
+
var css_248z$a = ".styles-module_popover__3ZbOL {\n overflow-y: scroll;\n overflow-x: hidden;\n margin: 0 auto;\n margin-top: 30px;\n z-index: 10000;\n position: fixed;\n border-top-left-radius: 30px;\n border-top-right-radius: 30px;\n transform: translateY(100%);\n width: 700px;\n max-width: 100%;\n height: 100%;\n left: 50%;\n margin-left: -385px;\n transition: 0.2s cubic-bezier(0.075, 0.82, 0.165, 1);\n background: var(--background-1);\n box-shadow: var(--border-3) 0px 1px 2px 0px, var(--border-3) 0px 1px 3px 1px;\n padding: 35px;\n padding-top: 110px;\n top: 0;\n}\n.styles-module_popover__3ZbOL.styles-module_active__-ZVbh {\n transform: translateY(0px);\n}\n.styles-module_popover__3ZbOL h1 {\n margin: 10px 0px;\n font-weight: 900;\n display: flex;\n align-items: center;\n gap: 10px;\n}\n.styles-module_popover__3ZbOL h4 {\n font-size: 20px;\n margin: 10px 0px;\n color: var(--foreground-3);\n font-weight: 400;\n}\n.styles-module_popover__3ZbOL p {\n line-height: 2;\n margin: 20px 0px;\n}\n.styles-module_popover__3ZbOL img {\n object-fit: contain;\n border-radius: 10px;\n}\n.styles-module_popover__3ZbOL .styles-module_close_button__5RYuU {\n width: 40px;\n height: 40px;\n border-radius: 20px;\n display: flex;\n align-items: center;\n justify-content: center;\n background: var(--background-4);\n cursor: pointer;\n transition: 0.2s ease-in-out;\n position: absolute;\n top: 35px;\n right: 35px;\n color: var(--foreground-2);\n}\n.styles-module_popover__3ZbOL .styles-module_close_button__5RYuU:hover {\n filter: brightness(0.9);\n}\n\n@media (max-width: 800px) {\n .styles-module_popover__3ZbOL {\n width: calc(100% - 40px);\n left: 0;\n margin-left: 0;\n padding: 20px;\n padding-top: 110px;\n }\n}";
|
|
9880
|
+
var styles$a = {"popover":"styles-module_popover__3ZbOL","active":"styles-module_active__-ZVbh","close_button":"styles-module_close_button__5RYuU"};
|
|
9881
|
+
styleInject(css_248z$a);
|
|
9896
9882
|
|
|
9897
9883
|
function Popover({ children, active, onClose }) {
|
|
9898
|
-
return (React__default["default"].createElement("div", { className: [styles$
|
|
9884
|
+
return (React__default["default"].createElement("div", { className: [styles$a.popover, active ? styles$a.active : styles$a.closed].join(" ") },
|
|
9899
9885
|
children,
|
|
9900
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9886
|
+
React__default["default"].createElement("div", { className: styles$a.close_button, onClick: onClose },
|
|
9901
9887
|
React__default["default"].createElement(SvgIcon, { iconName: "close" }))));
|
|
9902
9888
|
}
|
|
9903
9889
|
|
|
9904
|
-
var css_248z$
|
|
9905
|
-
var styles$
|
|
9906
|
-
styleInject(css_248z$
|
|
9890
|
+
var css_248z$9 = ".styles-module_container__u4q5n {\n margin-bottom: 50px;\n width: 400px;\n max-width: 100%;\n}\n\n.styles-module_background__jt-ry {\n background: var(--border-2);\n height: 3px;\n position: relative;\n}\n\n@keyframes styles-module_fadeIn__ytfsX {\n from {\n width: 0;\n }\n to {\n width: 100%;\n }\n}\n@keyframes styles-module_moveIn__E7c-3 {\n from {\n left: 0;\n }\n to {\n left: 100%;\n }\n}\n.styles-module_progress__Zj-B7 {\n left: 0;\n top: 0;\n height: 3px;\n position: relative;\n}\n.styles-module_progress__Zj-B7::before {\n height: 3px;\n content: \"\";\n left: 0;\n top: 0;\n background: var(--foreground-1);\n position: absolute;\n animation: styles-module_fadeIn__ytfsX 2s ease forwards;\n}\n.styles-module_progress__Zj-B7.styles-module_enableDot__CJC4D::after {\n content: \"\";\n height: 10px;\n width: 10px;\n background: var(--foreground-1);\n border-radius: 5px;\n left: 100%;\n bottom: -3.5px;\n position: absolute;\n animation: styles-module_moveIn__E7c-3 2s ease forwards;\n}";
|
|
9891
|
+
var styles$9 = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7","fadeIn":"styles-module_fadeIn__ytfsX","enableDot":"styles-module_enableDot__CJC4D","moveIn":"styles-module_moveIn__E7c-3"};
|
|
9892
|
+
styleInject(css_248z$9);
|
|
9907
9893
|
|
|
9908
9894
|
function ProgressBar({ length, progress, enableDot = false }) {
|
|
9909
9895
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
9910
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9911
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9912
|
-
React__default["default"].createElement("div", { className: [styles$
|
|
9896
|
+
React__default["default"].createElement("div", { className: styles$9.container },
|
|
9897
|
+
React__default["default"].createElement("div", { className: styles$9.background },
|
|
9898
|
+
React__default["default"].createElement("div", { className: [styles$9.progress, enableDot ? styles$9.enableDot : styles$9.disableDot].join(" "), style: { width: `${progress / length * 100}%` } })))));
|
|
9913
9899
|
}
|
|
9914
9900
|
|
|
9915
|
-
var css_248z$
|
|
9916
|
-
var styles$
|
|
9917
|
-
styleInject(css_248z$
|
|
9901
|
+
var css_248z$8 = ".styles-module_container__Grkzw {\n display: flex;\n flex-direction: column;\n gap: 12px;\n color: var(--foreground-3);\n margin-bottom: 20px;\n position: relative;\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] + label::after {\n width: 10px;\n height: 10px;\n border-radius: 10px;\n display: block;\n content: \"\";\n z-index: 6;\n position: absolute;\n left: 4.5px;\n top: 4.5px;\n background-color: var(--background-1);\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw .styles-module_option__nijjM {\n position: relative;\n}\n.styles-module_container__Grkzw [type=radio] ~ span {\n position: absolute;\n opacity: 1;\n color: var(--background-1);\n z-index: 100;\n user-select: none;\n pointer-events: none;\n -webkit-user-select: none;\n font-weight: 500;\n bottom: -1.5px;\n left: -1px;\n}\n.styles-module_container__Grkzw [type=radio]:checked ~ span {\n color: var(--background-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n background-color: var(--background-1);\n border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::after {\n background-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n border-color: var(--primary-2);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::after {\n background: var(--primary-2);\n}";
|
|
9902
|
+
var styles$8 = {"container":"styles-module_container__Grkzw","option":"styles-module_option__nijjM"};
|
|
9903
|
+
styleInject(css_248z$8);
|
|
9918
9904
|
|
|
9919
9905
|
function RadioButtons({ options, group, selected, onInput = () => { }, width = "100%" }) {
|
|
9920
9906
|
const [selectedOption, setSelected] = React.useState(selected);
|
|
@@ -9923,7 +9909,7 @@ function RadioButtons({ options, group, selected, onInput = () => { }, width = "
|
|
|
9923
9909
|
setSelected(event.target.value);
|
|
9924
9910
|
onInput(event);
|
|
9925
9911
|
}
|
|
9926
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9912
|
+
return (React__default["default"].createElement("div", { className: styles$8.container, style: { width: width } }, options.map((option) => React__default["default"].createElement("div", { className: styles$8.option, key: option.name },
|
|
9927
9913
|
selectedOption == option.name ?
|
|
9928
9914
|
React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
|
|
9929
9915
|
:
|
|
@@ -9931,9 +9917,9 @@ function RadioButtons({ options, group, selected, onInput = () => { }, width = "
|
|
|
9931
9917
|
React__default["default"].createElement("label", { htmlFor: option.name }, option.text)))));
|
|
9932
9918
|
}
|
|
9933
9919
|
|
|
9934
|
-
var css_248z$
|
|
9935
|
-
var styles$
|
|
9936
|
-
styleInject(css_248z$
|
|
9920
|
+
var css_248z$7 = ".styles-module_container__RhsQe {\n margin-right: 8px;\n}\n.styles-module_container__RhsQe.styles-module_back__j0HkC {\n display: block;\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 font-family: var(--font-1);\n font-weight: 500;\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_label__bdjMh {\n display: none;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_label__bdjMh {\n display: block;\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}\n\n@media (max-width: 800px) {\n .styles-module_container__RhsQe.styles-module_forward__Vjtye {\n flex-basis: auto;\n }\n .styles-module_container__RhsQe.styles-module_back__j0HkC {\n flex-basis: 100%;\n }\n .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_label__bdjMh {\n display: block;\n }\n .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_button__HuX-0 {\n gap: 5px;\n width: auto;\n }\n .styles-module_container__RhsQe.styles-module_back__j0HkC .styles-module_button__HuX-0:hover {\n background: none;\n }\n}";
|
|
9921
|
+
var styles$7 = {"container":"styles-module_container__RhsQe","back":"styles-module_back__j0HkC","button":"styles-module_button__HuX-0","label":"styles-module_label__bdjMh","middle":"styles-module_middle__xg7RF","forward":"styles-module_forward__Vjtye"};
|
|
9922
|
+
styleInject(css_248z$7);
|
|
9937
9923
|
|
|
9938
9924
|
function RedirectButton({ id, type = "forward", onClick = () => { }, children = "Zurück" }) {
|
|
9939
9925
|
function onClickButton(event) {
|
|
@@ -9948,19 +9934,19 @@ function RedirectButton({ id, type = "forward", onClick = () => { }, children =
|
|
|
9948
9934
|
}
|
|
9949
9935
|
};
|
|
9950
9936
|
return (React__default["default"].createElement("div", { className: [
|
|
9951
|
-
styles$
|
|
9952
|
-
type === "forward" ? styles$
|
|
9953
|
-
type === "back" ? styles$
|
|
9954
|
-
type === "middle" ? styles$
|
|
9937
|
+
styles$7.container,
|
|
9938
|
+
type === "forward" ? styles$7.forward : styles$7.not_forward,
|
|
9939
|
+
type === "back" ? styles$7.back : styles$7.not_back,
|
|
9940
|
+
type === "middle" ? styles$7.middle : styles$7.not_middle
|
|
9955
9941
|
].join(" ") },
|
|
9956
|
-
React__default["default"].createElement("button", { onClick: onClickButton, className: styles$
|
|
9942
|
+
React__default["default"].createElement("button", { onClick: onClickButton, className: styles$7.button, id: id },
|
|
9957
9943
|
React__default["default"].createElement(SvgIcon, { iconName: getIcon() }),
|
|
9958
|
-
React__default["default"].createElement("span", { className: styles$
|
|
9944
|
+
React__default["default"].createElement("span", { className: styles$7.label }, children))));
|
|
9959
9945
|
}
|
|
9960
9946
|
|
|
9961
|
-
var css_248z$
|
|
9962
|
-
var styles$
|
|
9963
|
-
styleInject(css_248z$
|
|
9947
|
+
var css_248z$6 = ".styles-module_container__VreeH {\n margin-bottom: 20px;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J,\n.styles-module_container__VreeH .styles-module_show_all__HKn-s {\n padding: 6px 12px;\n background: var(--background-1);\n border-radius: 20px;\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n cursor: pointer;\n user-select: none;\n font-size: 14px;\n -webkit-user-select: none;\n color: var(--foreground-2);\n transition: 0.2s ease-in-out;\n border: 1px solid transparent;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n filter: brightness(0.95);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:not(.styles-module_selected__sArTD):active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n background: var(--primary-2);\n color: var(--primary-1);\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n color: var(--primary-1);\n}";
|
|
9948
|
+
var styles$6 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","show_all":"styles-module_show_all__HKn-s","selected":"styles-module_selected__sArTD"};
|
|
9949
|
+
styleInject(css_248z$6);
|
|
9964
9950
|
|
|
9965
9951
|
function SearchChips({ items, onChange, chipsVisible = 9 }) {
|
|
9966
9952
|
const [showAll, setShowAll] = React.useState(false);
|
|
@@ -9972,19 +9958,19 @@ function SearchChips({ items, onChange, chipsVisible = 9 }) {
|
|
|
9972
9958
|
if (onChange)
|
|
9973
9959
|
onChange(newChips);
|
|
9974
9960
|
}
|
|
9975
|
-
return (React__default["default"].createElement("div", { className: styles$
|
|
9976
|
-
(showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React__default["default"].createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$
|
|
9961
|
+
return (React__default["default"].createElement("div", { className: styles$6.container },
|
|
9962
|
+
(showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React__default["default"].createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$6.chip, item.selected ? styles$6.selected : styles$6.not_selected].join(" ") },
|
|
9977
9963
|
React__default["default"].createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
|
|
9978
9964
|
item.title)),
|
|
9979
9965
|
chipsVisible < chips.length && (showAll ?
|
|
9980
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9966
|
+
React__default["default"].createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
|
|
9981
9967
|
:
|
|
9982
|
-
React__default["default"].createElement("div", { className: styles$
|
|
9968
|
+
React__default["default"].createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen"))));
|
|
9983
9969
|
}
|
|
9984
9970
|
|
|
9985
|
-
var css_248z$
|
|
9986
|
-
var styles$
|
|
9987
|
-
styleInject(css_248z$
|
|
9971
|
+
var css_248z$5 = ".styles-module_container__k4Z26 {\n width: 100%;\n display: flex;\n flex-direction: row;\n gap: 10px;\n position: relative;\n}\n.styles-module_container__k4Z26 button {\n background: var(--primary-2);\n padding: 0px 18px;\n border: none;\n font-size: 14px;\n border-radius: 10px;\n cursor: pointer;\n color: var(--primary-1);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om {\n display: none;\n position: absolute;\n top: 60px;\n background: var(--background-1);\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n width: 100%;\n border-radius: 14px;\n border: 1px solid var(--border-3);\n z-index: 1000;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-:hover,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om:hover {\n display: block;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n padding: 16px 20px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li:not(:last-child),\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li:not(:last-child) {\n border-bottom: 1px solid var(--border-3);\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X {\n padding: 35px 0px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X h3,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X h3 {\n margin: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p {\n color: var(--foreground-3);\n padding: 0px 30px;\n line-height: 1.5;\n text-align: center;\n margin-bottom: 10px;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n display: flex;\n flex-direction: row;\n padding: 10px 20px;\n align-items: center;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li span {\n flex: 1;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om button {\n padding: 10px 16px;\n}\n\n.styles-module_input__wOJmG {\n padding: 14px 20px;\n font-size: 16px;\n width: 300px;\n border-radius: 12px;\n border: 1px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n width: 100%;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG:active {\n border: var(--focus-border);\n box-shadow: var(--focus-shadow);\n}\n\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_suggestions_container__pceQ-,\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_results_container__OY4Om {\n display: block;\n}\n\ninput[type=search]::-webkit-search-decoration,\ninput[type=search]::-webkit-search-cancel-button,\ninput[type=search]::-webkit-search-results-button,\ninput[type=search]::-webkit-search-results-decoration {\n -webkit-appearance: none;\n}\n\n/* animated text field */\n.styles-module_form__mWTCu {\n position: relative;\n width: 100%;\n}\n\n.styles-module_label__A41g9 {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n font-family: var(--font-1);\n}\n\n.styles-module_label_text__NQHTC {\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: var(--background-1);\n color: var(--foreground-3);\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: var(--foreground-3);\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__wOJmG:focus + .styles-module_label__A41g9 .styles-module_label_text__NQHTC,\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: var(--background-2);\n color: var(--primary-1);\n}\n\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n color: var(--foreground-3);\n}";
|
|
9972
|
+
var styles$5 = {"container":"styles-module_container__k4Z26","suggestions_container":"styles-module_suggestions_container__pceQ-","results_container":"styles-module_results_container__OY4Om","error":"styles-module_error__2Ov4X","input":"styles-module_input__wOJmG","form":"styles-module_form__mWTCu","focus":"styles-module_focus__-6H1f","label":"styles-module_label__A41g9","label_text":"styles-module_label_text__NQHTC","with_title":"styles-module_with_title__rnN-t","valid":"styles-module_valid__AAK-6"};
|
|
9973
|
+
styleInject(css_248z$5);
|
|
9988
9974
|
|
|
9989
9975
|
function Searchbar({ placeholder, title = "Suchen", showNoResults = false, errorTitle = "Keine Ergebnisse gefunden", errorMessage = "", errorButton = "", helpTitle = "", helpMessage = "", width = "100%", marginBottom = 25, marginTop = 30, errorAction = () => { }, onInput = () => { }, onClickResult = () => { }, withButton = false, buttonText = "Suchen", suggestions = [], autoFocus = false, results = [] }) {
|
|
9990
9976
|
const [value, setValue] = React.useState("");
|
|
@@ -10013,31 +9999,95 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
|
|
|
10013
9999
|
element.focus();
|
|
10014
10000
|
}, [autoFocus]);
|
|
10015
10001
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
10016
|
-
React__default["default"].createElement("div", { className: styles$
|
|
10017
|
-
React__default["default"].createElement("div", { className: `${styles$
|
|
10018
|
-
React__default["default"].createElement("input", { onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: `${styles$
|
|
10019
|
-
React__default["default"].createElement("label", { htmlFor: "text", className: styles$
|
|
10020
|
-
React__default["default"].createElement("span", { className: styles$
|
|
10002
|
+
React__default["default"].createElement("div", { className: styles$5.container, style: { marginTop: marginTop, marginBottom: marginBottom, width: width } },
|
|
10003
|
+
React__default["default"].createElement("div", { className: `${styles$5.form} ${inputFocused ? styles$5.focus : styles$5.not_focused}` },
|
|
10004
|
+
React__default["default"].createElement("input", { onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: `${styles$5.input} ${title != undefined ? styles$5.with_title : styles$5.without_title} ${value.length > 0 ? styles$5.valid : styles$5.not_valid}`, placeholder: placeholder, type: "search", ref: inputElement, onInput: onInputChanged }),
|
|
10005
|
+
React__default["default"].createElement("label", { htmlFor: "text", className: styles$5.label },
|
|
10006
|
+
React__default["default"].createElement("span", { className: styles$5.label_text }, title))),
|
|
10021
10007
|
withButton && React__default["default"].createElement("button", { type: "button" }, buttonText),
|
|
10022
|
-
suggestions.length > 0 && React__default["default"].createElement("div", { className: styles$
|
|
10008
|
+
suggestions.length > 0 && React__default["default"].createElement("div", { className: styles$5.suggestions_container },
|
|
10023
10009
|
React__default["default"].createElement("ul", null, suggestions.map((suggestion, index) => React__default["default"].createElement("li", { key: index }, suggestion)))),
|
|
10024
|
-
searchResults.length > 0 && React__default["default"].createElement("div", { className: styles$
|
|
10010
|
+
searchResults.length > 0 && React__default["default"].createElement("div", { className: styles$5.results_container },
|
|
10025
10011
|
React__default["default"].createElement("ul", null, searchResults.map((result, index) => React__default["default"].createElement("li", { key: index, onClick: (event) => onClickResult(event, result) },
|
|
10026
10012
|
React__default["default"].createElement("span", null, result.title),
|
|
10027
10013
|
React__default["default"].createElement("button", { type: "button" }, buttonText))))),
|
|
10028
|
-
searchResults.length == 0 && showNoResults && value.length > 0 && React__default["default"].createElement("div", { className: styles$
|
|
10029
|
-
React__default["default"].createElement("div", { className: styles$
|
|
10014
|
+
searchResults.length == 0 && showNoResults && value.length > 0 && React__default["default"].createElement("div", { className: styles$5.results_container },
|
|
10015
|
+
React__default["default"].createElement("div", { className: styles$5.error },
|
|
10030
10016
|
React__default["default"].createElement(SvgIcon, { iconName: "error" }),
|
|
10031
10017
|
React__default["default"].createElement("h3", null, errorTitle),
|
|
10032
10018
|
React__default["default"].createElement("p", null, errorMessage),
|
|
10033
10019
|
errorButton.length > 0 && React__default["default"].createElement("button", { type: "button", onClick: errorAction }, errorButton))),
|
|
10034
|
-
searchResults.length == 0 && showNoResults && value.length == 0 && React__default["default"].createElement("div", { className: styles$
|
|
10035
|
-
React__default["default"].createElement("div", { className: styles$
|
|
10020
|
+
searchResults.length == 0 && showNoResults && value.length == 0 && React__default["default"].createElement("div", { className: styles$5.results_container },
|
|
10021
|
+
React__default["default"].createElement("div", { className: styles$5.error },
|
|
10036
10022
|
React__default["default"].createElement(SvgIcon, { iconName: "lightbulb" }),
|
|
10037
10023
|
React__default["default"].createElement("h3", null, helpTitle),
|
|
10038
10024
|
React__default["default"].createElement("p", null, helpMessage))))));
|
|
10039
10025
|
}
|
|
10040
10026
|
|
|
10027
|
+
var css_248z$4 = ".styles-module_container__A8p1v {\n margin-bottom: 30px;\n max-width: 100%;\n text-align: center;\n position: relative;\n width: 100%;\n}\n\n.styles-module_profile__1BJ2t img.styles-module_not_active__vz3bM {\n display: none;\n}\n\n.styles-module_profile__1BJ2t img {\n border-radius: 100%;\n width: 55px;\n height: 55px;\n}\n\n.styles-module_icon__wCypS {\n background: var(--foreground-2);\n height: 50px;\n width: 50px;\n border-radius: 25px;\n align-items: center;\n display: flex;\n justify-content: center;\n color: var(--background-1);\n}\n.styles-module_icon__wCypS.styles-module_not_active__vz3bM {\n display: none;\n}\n\n.styles-module_input__aHNrg {\n display: none;\n}\n\n.styles-module_label__0Rajr {\n height: 100%;\n display: flex;\n cursor: pointer;\n padding: 20px;\n align-items: center;\n justify-content: center;\n flex-direction: row;\n border-width: 1px;\n border-style: solid;\n gap: 20px;\n border-radius: 12px;\n border-color: var(--border-1);\n background-color: var(--background-1);\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n transition: 0.2s ease-in-out;\n}\n.styles-module_label__0Rajr .styles-module_description__KAVaa {\n flex: 1;\n text-align: left;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: 4px;\n}\n.styles-module_label__0Rajr .styles-module_description__KAVaa p {\n margin: 0;\n}\n.styles-module_label__0Rajr .styles-module_description__KAVaa span {\n color: grey;\n font-size: 12px;\n}\n\n.styles-module_label__0Rajr.styles-module_active__zXbic,\n.styles-module_label__0Rajr:hover {\n background-color: var(--background-2);\n border-color: var(--border-3);\n}\n\n.styles-module_label__0Rajr.styles-module_active__zXbic {\n box-shadow: var(--focus-shadow);\n}\n\n.styles-module_upload_button__zXlui:hover,\n.styles-module_remove_button__5pK9J:hover {\n filter: brightness(0.9);\n}\n\n.styles-module_upload_button__zXlui {\n height: 50px;\n width: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n border-radius: 30px;\n background: var(--primary-2);\n color: var(--primary-1);\n}\n\n.styles-module_remove_button__5pK9J {\n height: 50px;\n width: 50px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: none;\n border-radius: 30px;\n background: var(--red-2);\n color: var(--red-1);\n transition: 0.2s ease-in-out;\n}\n\n.styles-module_drag_file__lxLfL {\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: 1rem;\n top: 0px;\n right: 0px;\n bottom: 0px;\n left: 0px;\n}";
|
|
10028
|
+
var styles$4 = {"container":"styles-module_container__A8p1v","profile":"styles-module_profile__1BJ2t","not_active":"styles-module_not_active__vz3bM","icon":"styles-module_icon__wCypS","input":"styles-module_input__aHNrg","label":"styles-module_label__0Rajr","description":"styles-module_description__KAVaa","active":"styles-module_active__zXbic","upload_button":"styles-module_upload_button__zXlui","remove_button":"styles-module_remove_button__5pK9J","drag_file":"styles-module_drag_file__lxLfL"};
|
|
10029
|
+
styleInject(css_248z$4);
|
|
10030
|
+
|
|
10031
|
+
function SelectFileCard({ accept = "image/png, image/jpeg, image/jpg", maxSize = 1, onFileSelected, onFileTooLarge = () => { }, ...props }) {
|
|
10032
|
+
const [dragActive, setDragActive] = React.useState(false);
|
|
10033
|
+
const [file, setFile] = React.useState();
|
|
10034
|
+
const inputRef = React.useRef(null);
|
|
10035
|
+
const handleFile = function (file) {
|
|
10036
|
+
if (!file)
|
|
10037
|
+
return;
|
|
10038
|
+
if (file.size / 1024 ** 2 > maxSize) {
|
|
10039
|
+
onFileTooLarge();
|
|
10040
|
+
//toast(`Das Bild darf 1 MB nicht übersteigen`, { type: "warning" })
|
|
10041
|
+
return;
|
|
10042
|
+
}
|
|
10043
|
+
onFileSelected(file);
|
|
10044
|
+
setFile(file);
|
|
10045
|
+
};
|
|
10046
|
+
const handleDrag = function (event) {
|
|
10047
|
+
event.preventDefault();
|
|
10048
|
+
event.stopPropagation();
|
|
10049
|
+
if (event.type === "dragenter" || event.type === "dragover") {
|
|
10050
|
+
setDragActive(true);
|
|
10051
|
+
}
|
|
10052
|
+
else if (event.type === "dragleave") {
|
|
10053
|
+
setDragActive(false);
|
|
10054
|
+
}
|
|
10055
|
+
};
|
|
10056
|
+
const handleDrop = function (event) {
|
|
10057
|
+
event.preventDefault();
|
|
10058
|
+
event.stopPropagation();
|
|
10059
|
+
setDragActive(false);
|
|
10060
|
+
if (event.dataTransfer.files && event.dataTransfer.files[0]) {
|
|
10061
|
+
handleFile(event.dataTransfer.files[0]);
|
|
10062
|
+
}
|
|
10063
|
+
};
|
|
10064
|
+
const handleChange = function (event) {
|
|
10065
|
+
event.preventDefault();
|
|
10066
|
+
if (event.target.files && event.target.files[0]) {
|
|
10067
|
+
handleFile(event.target.files[0]);
|
|
10068
|
+
}
|
|
10069
|
+
};
|
|
10070
|
+
const onButtonClick = () => {
|
|
10071
|
+
if (inputRef.current)
|
|
10072
|
+
inputRef.current.click();
|
|
10073
|
+
};
|
|
10074
|
+
const onRemoveFile = () => {
|
|
10075
|
+
setFile(undefined);
|
|
10076
|
+
};
|
|
10077
|
+
return (React__default["default"].createElement("form", { className: styles$4.container, onDragEnter: handleDrag, onSubmit: (e) => e.preventDefault(), ...props },
|
|
10078
|
+
React__default["default"].createElement("input", { ref: inputRef, accept: accept, type: "file", id: "input-file-upload", className: styles$4.input, multiple: true, onChange: handleChange }),
|
|
10079
|
+
React__default["default"].createElement("label", { className: [styles$4.label, dragActive ? styles$4.active : ""].join(" "), htmlFor: "input-file-upload" },
|
|
10080
|
+
React__default["default"].createElement("div", { className: styles$4.description },
|
|
10081
|
+
React__default["default"].createElement("p", null, file ? "Datei ausgewählt" : "Datei hierherziehen"),
|
|
10082
|
+
React__default["default"].createElement("span", null, file ? file.name : "Maximale Dateigröße beträgt 1 MB")),
|
|
10083
|
+
React__default["default"].createElement("button", { className: styles$4.upload_button, onClick: onButtonClick },
|
|
10084
|
+
React__default["default"].createElement(SvgIcon, { iconName: file ? "done" : "upload" })),
|
|
10085
|
+
file &&
|
|
10086
|
+
React__default["default"].createElement("button", { className: styles$4.remove_button, onClick: onRemoveFile },
|
|
10087
|
+
React__default["default"].createElement(SvgIcon, { iconName: "delete" }))),
|
|
10088
|
+
dragActive && React__default["default"].createElement("div", { className: styles$4.drag_file, onDragEnter: handleDrag, onDragLeave: handleDrag, onDragOver: handleDrag, onDrop: handleDrop })));
|
|
10089
|
+
}
|
|
10090
|
+
|
|
10041
10091
|
var css_248z$3 = ".styles-module_container__jNs7m h3 {\n font-weight: 500;\n font-size: 16px;\n color: var(--foreground-1);\n}\n\n.styles-module_item_list__FxHkg.styles-module_has_children__Uu-8D {\n border-top: 1px solid var(--border-1);\n border-bottom: 1px solid var(--border-1);\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: var(--background-2);\n}\n.styles-module_item_list__FxHkg .styles-module_action__YYTok.styles-module_red__KD3qJ:hover {\n background: var(--red-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_selected__iOu39 {\n color: var(--primary-1) !important;\n border-color: var(--primary-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_selected__iOu39 .styles-module_icon__Jy87z {\n color: var(--primary-1) !important;\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 color: var(--foreground-1);\n flex-wrap: wrap;\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: var(--primary-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_subtitle__DT5OF {\n color: var(--foreground-3);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV .styles-module_icon__Jy87z {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: var(--foreground-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_blue__theVn .styles-module_title__nIwzs {\n color: var(--blue-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV.styles-module_blue__theVn .styles-module_icon__Jy87z {\n color: var(--blue-1) !important;\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(even) {\n background: var(--background-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(odd) {\n background: var(--background-1);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n border-bottom: 1px solid var(--border-1);\n}\n\n@media (max-width: 750px) {\n .styles-module_item_list__FxHkg {\n gap: 20px;\n }\n .styles-module_item_list__FxHkg li.styles-module_item__sgyiV {\n background: var(--background-1);\n border-radius: 12px;\n padding: 20px;\n border: 1px solid var(--border-1);\n transition: 0.2s ease-in-out;\n display: flex;\n flex-direction: column;\n gap: 20px;\n }\n .styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(even) {\n background: var(--background-1);\n }\n .styles-module_item_list__FxHkg li.styles-module_item__sgyiV:nth-child(odd) {\n background: var(--background-1);\n }\n}";
|
|
10042
10092
|
var styles$3 = {"container":"styles-module_container__jNs7m","item_list":"styles-module_item_list__FxHkg","has_children":"styles-module_has_children__Uu-8D","action":"styles-module_action__YYTok","default":"styles-module_default__SexGH","red":"styles-module_red__KD3qJ","item":"styles-module_item__sgyiV","selected":"styles-module_selected__iOu39","icon":"styles-module_icon__Jy87z","moreText":"styles-module_moreText__-blXb","subtitle":"styles-module_subtitle__DT5OF","blue":"styles-module_blue__theVn","title":"styles-module_title__nIwzs"};
|
|
10043
10093
|
styleInject(css_248z$3);
|
|
@@ -10519,7 +10569,6 @@ exports.CopyCode = CopyCode;
|
|
|
10519
10569
|
exports.Dialog = Dialog;
|
|
10520
10570
|
exports.Dropdown = Dropdown;
|
|
10521
10571
|
exports.EmptyCard = EmptyCard;
|
|
10522
|
-
exports.FormButton = FormButton;
|
|
10523
10572
|
exports.FormText = FormText;
|
|
10524
10573
|
exports.ForwardButton = ForwardButton;
|
|
10525
10574
|
exports.Gap = Gap;
|
|
@@ -10540,6 +10589,7 @@ exports.RadioButtons = RadioButtons;
|
|
|
10540
10589
|
exports.RedirectButton = RedirectButton;
|
|
10541
10590
|
exports.SearchChips = SearchChips;
|
|
10542
10591
|
exports.Searchbar = Searchbar;
|
|
10592
|
+
exports.SelectFileCard = SelectFileCard;
|
|
10543
10593
|
exports.Slider = Slider;
|
|
10544
10594
|
exports.StepBack = StepBack;
|
|
10545
10595
|
exports.SvgIcon = SvgIcon;
|