math-main-components 0.0.136 → 0.0.143
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/Button/Button.d.ts +3 -1
- package/dist/components/PrimaryButton/PrimaryButton.d.ts +1 -1
- package/dist/components/PrimaryButton/index.d.ts +1 -1
- package/dist/components/Table/Table.d.ts +2 -1
- package/dist/index.cjs.js +140 -139
- package/dist/index.d.ts +1 -0
- package/dist/index.esm.js +140 -140
- package/dist/src/index.js +7 -6
- package/package.json +4 -2
package/dist/index.esm.js
CHANGED
|
@@ -56,8 +56,8 @@ function AuthButton({ text, type = "submit", theme = "primary", iconName = "arro
|
|
|
56
56
|
React.createElement(SvgIcon, { iconName: iconName }))));
|
|
57
57
|
}
|
|
58
58
|
|
|
59
|
-
var css_248z$t = ".styles-module_container__TP0rp {\n max-width: 100%;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr {\n padding: 10px 18px;\n
|
|
60
|
-
var styles$t = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","
|
|
59
|
+
var css_248z$t = ".styles-module_container__TP0rp {\n max-width: 100%;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr {\n padding: 10px 18px;\n border-radius: 40px;\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n font-size: 15px;\n font-weight: 400;\n align-items: center;\n border: none;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_blue__DRdbo {\n background: var(--primary-1);\n color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_lightBlue__7EKfp {\n background: var(--primary-2);\n color: var(--primary-1);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_red__EhImH {\n background: var(--red-1);\n color: white;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_grey__kAVD1 {\n background: var(--background-1);\n color: var(--foreground-2);\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI {\n width: 44px;\n height: 44px;\n padding: 0;\n align-items: center;\n justify-content: center;\n}\n.styles-module_container__TP0rp .styles-module_button__Sh-fr.styles-module_onlyIcon__bNVnI span {\n font-size: 22px !important;\n}";
|
|
60
|
+
var styles$t = {"container":"styles-module_container__TP0rp","button":"styles-module_button__Sh-fr","blue":"styles-module_blue__DRdbo","lightBlue":"styles-module_lightBlue__7EKfp","red":"styles-module_red__EhImH","grey":"styles-module_grey__kAVD1","onlyIcon":"styles-module_onlyIcon__bNVnI"};
|
|
61
61
|
styleInject(css_248z$t);
|
|
62
62
|
|
|
63
63
|
function Button({ text, iconName, iconFill = "white", type = "blue", onClick = () => { } }) {
|
|
@@ -158,30 +158,42 @@ function Dialog({ data, text, onClose, onSubmit, children }) {
|
|
|
158
158
|
React.createElement("button", { className: styles$o.submit_button, id: "submit-button", onClick: (event) => onSubmit && onSubmit(event, data?.data) }, "Best\u00E4tigen"))));
|
|
159
159
|
}
|
|
160
160
|
|
|
161
|
-
var css_248z$n = ".styles-
|
|
162
|
-
var styles$n = {"
|
|
161
|
+
var css_248z$n = ".styles-module_card__hT9fw {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 20px;\n padding: 100px 0px;\n}\n.styles-module_card__hT9fw h1 {\n margin: 0;\n font-size: 22px;\n font-weight: 500;\n}\n.styles-module_card__hT9fw p {\n margin: 0;\n font-size: 16px;\n}";
|
|
162
|
+
var styles$n = {"card":"styles-module_card__hT9fw"};
|
|
163
163
|
styleInject(css_248z$n);
|
|
164
164
|
|
|
165
|
+
function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
|
|
166
|
+
return (React.createElement("div", { className: styles$n.card },
|
|
167
|
+
React.createElement(SvgIcon, { size: "60px", iconName: iconName }),
|
|
168
|
+
React.createElement("h1", null, title),
|
|
169
|
+
React.createElement("p", null, subtitle),
|
|
170
|
+
button && React.createElement(Button, { text: button, onClick: onClick, type: "lightBlue" })));
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
var css_248z$m = ".styles-module_container__HOoBj {\n margin-bottom: 30px;\n}\n.styles-module_container__HOoBj button {\n padding: 12px 18px;\n border-radius: 40px;\n border: none;\n color: white;\n font-weight: 400;\n font-size: 16px;\n background: var(--primary-1);\n cursor: pointer;\n display: flex;\n flex-direction: row;\n gap: 10px;\n align-items: center;\n}";
|
|
174
|
+
var styles$m = {"container":"styles-module_container__HOoBj"};
|
|
175
|
+
styleInject(css_248z$m);
|
|
176
|
+
|
|
165
177
|
function FormButton({ text, style = {}, iconName = "", type = "submit", background = "#0075FF", onClick = () => { } }) {
|
|
166
|
-
return (React.createElement("div", { className: styles$
|
|
178
|
+
return (React.createElement("div", { className: styles$m.container, style: style },
|
|
167
179
|
React.createElement("button", { type: type, onClick: onClick, style: { background: background } },
|
|
168
180
|
text,
|
|
169
181
|
iconName && React.createElement(SvgIcon, { iconName: iconName, fill: "white" }))));
|
|
170
182
|
}
|
|
171
183
|
|
|
172
|
-
var css_248z$
|
|
173
|
-
var styles$
|
|
174
|
-
styleInject(css_248z$
|
|
184
|
+
var css_248z$l = ".styles-module_container__9wYEm {\n margin-bottom: 30px;\n width: 100%;\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: 400;\n color: var(--foreground-1);\n}\n.styles-module_container__9wYEm h3 {\n margin-top: 5px;\n}";
|
|
185
|
+
var styles$l = {"container":"styles-module_container__9wYEm"};
|
|
186
|
+
styleInject(css_248z$l);
|
|
175
187
|
|
|
176
188
|
function FormText({ title, value, style }) {
|
|
177
|
-
return (React.createElement("div", { className: styles$
|
|
189
|
+
return (React.createElement("div", { className: styles$l.container, style: style },
|
|
178
190
|
React.createElement("h5", null, title),
|
|
179
191
|
React.createElement("h3", null, value)));
|
|
180
192
|
}
|
|
181
193
|
|
|
182
|
-
var css_248z$
|
|
183
|
-
var styles$
|
|
184
|
-
styleInject(css_248z$
|
|
194
|
+
var css_248z$k = ".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}";
|
|
195
|
+
var styles$k = {"container":"styles-module_container__C99XV","button":"styles-module_button__pGYkF"};
|
|
196
|
+
styleInject(css_248z$k);
|
|
185
197
|
|
|
186
198
|
function ForwardButton({ onClick }) {
|
|
187
199
|
function onClickButton(event) {
|
|
@@ -189,8 +201,8 @@ function ForwardButton({ onClick }) {
|
|
|
189
201
|
if (onClick)
|
|
190
202
|
onClick(event);
|
|
191
203
|
}
|
|
192
|
-
return (React.createElement("div", { className: styles$
|
|
193
|
-
React.createElement("button", { onClick: onClickButton, className: styles$
|
|
204
|
+
return (React.createElement("div", { className: styles$k.container },
|
|
205
|
+
React.createElement("button", { onClick: onClickButton, className: styles$k.button },
|
|
194
206
|
React.createElement(SvgIcon, { iconName: "arrow_back" }))));
|
|
195
207
|
}
|
|
196
208
|
|
|
@@ -198,9 +210,9 @@ function Gap({ size }) {
|
|
|
198
210
|
return (React.createElement("div", { style: { height: size } }));
|
|
199
211
|
}
|
|
200
212
|
|
|
201
|
-
var css_248z$
|
|
202
|
-
var styles$
|
|
203
|
-
styleInject(css_248z$
|
|
213
|
+
var css_248z$j = ".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: 1.5px 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}\n.styles-module_input__v-hUz:focus, .styles-module_input__v-hUz:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__v-hUz.styles-module_not_available__6xu3Y, .styles-module_input__v-hUz:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\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}\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}";
|
|
214
|
+
var styles$j = {"container":"styles-module_container__Jr7LQ","input":"styles-module_input__v-hUz","not_available":"styles-module_not_available__6xu3Y","label":"styles-module_label__SSsD3","label_text":"styles-module_label_text__EOAq5","with_title":"styles-module_with_title__HWcCH","valid":"styles-module_valid__6geu9"};
|
|
215
|
+
styleInject(css_248z$j);
|
|
204
216
|
|
|
205
217
|
function InputArea({ title, name, placeholder = "", defaultValue = "", autoFocus = false, width = "100%", height = "100px", available = true, onInput }) {
|
|
206
218
|
const [value, setValue] = useState(defaultValue);
|
|
@@ -209,32 +221,32 @@ function InputArea({ title, name, placeholder = "", defaultValue = "", autoFocus
|
|
|
209
221
|
element.focus();
|
|
210
222
|
}, [autoFocus]);
|
|
211
223
|
return (React.createElement(React.Fragment, null,
|
|
212
|
-
React.createElement("div", { className: styles$
|
|
213
|
-
React.createElement("textarea", { className: `${styles$
|
|
224
|
+
React.createElement("div", { className: styles$j.container, style: { width } },
|
|
225
|
+
React.createElement("textarea", { className: `${styles$j.input} ${title != undefined ? styles$j.with_title : styles$j.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$j.valid : styles$j.not_valid} ${available ? styles$j.available : styles$j.not_available}`, name: name, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, style: { minHeight: height, maxHeight: height }, onInput: (event) => {
|
|
214
226
|
setValue(event.target.value);
|
|
215
227
|
if (onInput)
|
|
216
228
|
onInput(event);
|
|
217
229
|
} }),
|
|
218
|
-
React.createElement("label", { htmlFor: "text", className: styles$
|
|
219
|
-
React.createElement("span", { className: styles$
|
|
230
|
+
React.createElement("label", { htmlFor: "text", className: styles$j.label },
|
|
231
|
+
React.createElement("span", { className: styles$j.label_text }, title)))));
|
|
220
232
|
}
|
|
221
233
|
|
|
222
|
-
var css_248z$
|
|
223
|
-
var styles$
|
|
224
|
-
styleInject(css_248z$
|
|
234
|
+
var css_248z$i = ".styles-module_input__-GKhx {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px 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-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__-GKhx.styles-module_not_available__XD1kR, .styles-module_input__-GKhx:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\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}\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}";
|
|
235
|
+
var styles$i = {"input":"styles-module_input__-GKhx","not_available":"styles-module_not_available__XD1kR","container":"styles-module_container__--4rV","label":"styles-module_label__mGzwP","label_text":"styles-module_label_text__d0eMb","with_title":"styles-module_with_title__CGOEs","valid":"styles-module_valid__uj8g-"};
|
|
236
|
+
styleInject(css_248z$i);
|
|
225
237
|
|
|
226
238
|
function InputMail({ placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", name = "email", width = "100%", available = true }) {
|
|
227
239
|
const [value, setValue] = useState("");
|
|
228
240
|
return (React.createElement(React.Fragment, null,
|
|
229
|
-
React.createElement("div", { className: styles$
|
|
230
|
-
React.createElement("input", { className: `${styles$
|
|
231
|
-
React.createElement("label", { htmlFor: "text", className: styles$
|
|
232
|
-
React.createElement("span", { className: styles$
|
|
241
|
+
React.createElement("div", { className: styles$i.container, style: { width: width } },
|
|
242
|
+
React.createElement("input", { className: `${styles$i.input} ${title != undefined ? styles$i.with_title : styles$i.without_title} ${value.length > 0 ? styles$i.valid : styles$i.not_valid} ${available ? styles$i.available : styles$i.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.target.value) }),
|
|
243
|
+
React.createElement("label", { htmlFor: "text", className: styles$i.label },
|
|
244
|
+
React.createElement("span", { className: styles$i.label_text }, title)))));
|
|
233
245
|
}
|
|
234
246
|
|
|
235
|
-
var css_248z$
|
|
236
|
-
var styles$
|
|
237
|
-
styleInject(css_248z$
|
|
247
|
+
var css_248z$h = ".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: 1.5px 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-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\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}\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}";
|
|
248
|
+
var styles$h = {"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"};
|
|
249
|
+
styleInject(css_248z$h);
|
|
238
250
|
|
|
239
251
|
function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "" }, title = { firstName: "Vorname", lastName: "Nachname" }, defaultValue = { firstName: "", lastName: "" }, onInput = (name, event) => { }, onInputFirstName = (event) => { }, onInputLastName = (event) => { }, }) {
|
|
240
252
|
const [value1, setValue1] = useState(defaultValue.firstName ? defaultValue.firstName : "");
|
|
@@ -249,20 +261,20 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
|
|
|
249
261
|
onInputLastName(event);
|
|
250
262
|
onInput("lastName", event);
|
|
251
263
|
}
|
|
252
|
-
return (React.createElement("div", { className: styles$
|
|
253
|
-
React.createElement("div", { className: styles$
|
|
254
|
-
React.createElement("input", { className: `${styles$
|
|
255
|
-
React.createElement("label", { htmlFor: "text", className: styles$
|
|
256
|
-
React.createElement("span", { className: styles$
|
|
257
|
-
React.createElement("div", { className: styles$
|
|
258
|
-
React.createElement("input", { className: `${styles$
|
|
259
|
-
React.createElement("label", { htmlFor: "text", className: styles$
|
|
260
|
-
React.createElement("span", { className: styles$
|
|
264
|
+
return (React.createElement("div", { className: styles$h.container, style: { width: width } },
|
|
265
|
+
React.createElement("div", { className: styles$h.form },
|
|
266
|
+
React.createElement("input", { className: `${styles$h.input} ${title.firstName != undefined ? styles$h.with_title : styles$h.without_title} ${value1.length > 0 ? styles$h.valid : styles$h.not_valid}`, name: "firstName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.firstName, defaultValue: defaultValue.firstName, onInput: onInput1 }),
|
|
267
|
+
React.createElement("label", { htmlFor: "text", className: styles$h.label },
|
|
268
|
+
React.createElement("span", { className: styles$h.label_text }, title.firstName))),
|
|
269
|
+
React.createElement("div", { className: styles$h.form },
|
|
270
|
+
React.createElement("input", { className: `${styles$h.input} ${title.lastName != undefined ? styles$h.with_title : styles$h.without_title} ${value2.length > 0 ? styles$h.valid : styles$h.not_valid}`, name: "lastName", type: "name", style: { width: width != "100%" ? "100px" : width }, placeholder: placeholder.lastName, defaultValue: defaultValue.lastName, onInput: onInput2 }),
|
|
271
|
+
React.createElement("label", { htmlFor: "text", className: styles$h.label },
|
|
272
|
+
React.createElement("span", { className: styles$h.label_text }, title.lastName)))));
|
|
261
273
|
}
|
|
262
274
|
|
|
263
|
-
var css_248z$
|
|
264
|
-
var styles$
|
|
265
|
-
styleInject(css_248z$
|
|
275
|
+
var css_248z$g = ".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: 1.5px 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}\n.styles-module_input__ReFFR:focus, .styles-module_input__ReFFR:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__ReFFR.styles-module_not_available__mZ5-1 {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\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}\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}";
|
|
276
|
+
var styles$g = {"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"};
|
|
277
|
+
styleInject(css_248z$g);
|
|
266
278
|
|
|
267
279
|
function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "number", width = "100%", available = true, onInput = (event) => { } }) {
|
|
268
280
|
const [value, setValue] = useState(defaultValue);
|
|
@@ -271,37 +283,37 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
|
|
|
271
283
|
element.focus();
|
|
272
284
|
}, [autoFocus]);
|
|
273
285
|
return (React.createElement(React.Fragment, null,
|
|
274
|
-
React.createElement("div", { className: styles$
|
|
275
|
-
React.createElement("input", { className: `${styles$
|
|
286
|
+
React.createElement("div", { className: styles$g.container, style: { width } },
|
|
287
|
+
React.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, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
|
|
276
288
|
setValue(event.target.value);
|
|
277
289
|
onInput(event);
|
|
278
290
|
} }),
|
|
279
|
-
React.createElement("label", { htmlFor: "text", className: styles$
|
|
280
|
-
React.createElement("span", { className: styles$
|
|
291
|
+
React.createElement("label", { htmlFor: "text", className: styles$g.label },
|
|
292
|
+
React.createElement("span", { className: styles$g.label_text }, title)))));
|
|
281
293
|
}
|
|
282
294
|
|
|
283
|
-
var css_248z$
|
|
284
|
-
var styles$
|
|
285
|
-
styleInject(css_248z$
|
|
295
|
+
var css_248z$f = "@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 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\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: 1.5px solid var(--border-2);\n border-right: none;\n outline: none;\n transition: all 0.2s ease;\n flex: 1;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__sC2fP:focus, .styles-module_input__sC2fP:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_hideButton__83mRI {\n outline: none;\n display: flex;\n align-items: center;\n padding: 10px;\n border: 1.5px solid var(--border-2);\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}\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}";
|
|
296
|
+
var styles$f = {"container":"styles-module_container__UdmOO","forgot_label":"styles-module_forgot_label__EeN6a","visible":"styles-module_visible__QROqh","hidden":"styles-module_hidden__hDKDO","input":"styles-module_input__sC2fP","hideButton":"styles-module_hideButton__83mRI","form":"styles-module_form__m866x","label":"styles-module_label__8PuaL","label_text":"styles-module_label_text__FwJ1F","with_title":"styles-module_with_title__dftgq","valid":"styles-module_valid__SM7w5","show":"styles-module_show__OLTZH","hide":"styles-module_hide__LAgaY"};
|
|
297
|
+
styleInject(css_248z$f);
|
|
286
298
|
|
|
287
299
|
function InputPassword({ placeholder = "", title = "Passwort", name, isVisible = true, width = "100%", minLength = 8, autoComplete, forgotLink = false }) {
|
|
288
300
|
const [value, setValue] = useState("");
|
|
289
301
|
const [hidePassword, setHidePassword] = useState(true);
|
|
290
302
|
return (React.createElement(React.Fragment, null,
|
|
291
|
-
React.createElement("div", { className: `${styles$
|
|
292
|
-
React.createElement("div", { className: styles$
|
|
293
|
-
React.createElement("input", { className: `${styles$
|
|
294
|
-
React.createElement("label", { htmlFor: "text", className: styles$
|
|
295
|
-
React.createElement("span", { className: styles$
|
|
296
|
-
React.createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$
|
|
303
|
+
React.createElement("div", { className: `${styles$f.container} ${isVisible ? styles$f.visible : styles$f.hidden}`, style: { width: width } },
|
|
304
|
+
React.createElement("div", { className: styles$f.form },
|
|
305
|
+
React.createElement("input", { className: `${styles$f.input} ${title != undefined ? styles$f.with_title : styles$f.without_title} ${value.length > 0 ? styles$f.valid : styles$f.not_valid}`, name: name, minLength: minLength, autoComplete: autoComplete, placeholder: placeholder, type: hidePassword ? "password" : "text", onInput: (event) => setValue(event.target.value) }),
|
|
306
|
+
React.createElement("label", { htmlFor: "text", className: styles$f.label },
|
|
307
|
+
React.createElement("span", { className: styles$f.label_text }, title)),
|
|
308
|
+
React.createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
|
|
297
309
|
React.createElement(SvgIcon, { iconName: hidePassword ? "visibility" : "visibility_off" }))),
|
|
298
310
|
forgotLink &&
|
|
299
|
-
React.createElement("div", { className: styles$
|
|
311
|
+
React.createElement("div", { className: styles$f.forgot_container }, forgotLink))));
|
|
300
312
|
}
|
|
301
313
|
|
|
302
|
-
var css_248z$
|
|
303
|
-
var styles$
|
|
304
|
-
styleInject(css_248z$
|
|
314
|
+
var css_248z$e = ".styles-module_container__--NO0 {\n display: flex;\n flex-direction: column;\n gap: 10px;\n justify-content: center;\n align-items: center;\n user-select: none;\n margin-bottom: 20px;\n}\n.styles-module_container__--NO0 button {\n background: transparent;\n color: 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: 1.5px solid var(--border-2);\n outline: none;\n transition: 0.2s ease;\n text-align: center;\n font-size: 18px;\n background: var(--background-1);\n color: var(--foreground-1);\n}\n.styles-module_input__84v36:focus, .styles-module_input__84v36:active {\n border-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_input__84v36:nth-child(3) {\n margin-right: 25px;\n}\n\n.styles-module_input__84v36::placeholder,\n.styles-module_input__84v36:-ms-input-placeholder,\n.styles-module_input__84v36::-ms-input-placeholder {\n letter-spacing: 0px !important;\n}\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}";
|
|
315
|
+
var styles$e = {"container":"styles-module_container__--NO0","input_wrapper":"styles-module_input_wrapper__LPIk1","input":"styles-module_input__84v36"};
|
|
316
|
+
styleInject(css_248z$e);
|
|
305
317
|
|
|
306
318
|
function InputPin({ name, length, onFinished = () => { } }) {
|
|
307
319
|
const [state, setState] = useState({});
|
|
@@ -367,20 +379,20 @@ function InputPin({ name, length, onFinished = () => { } }) {
|
|
|
367
379
|
ref.current.value = "";
|
|
368
380
|
});
|
|
369
381
|
}
|
|
370
|
-
return (React.createElement("div", { className: styles$
|
|
382
|
+
return (React.createElement("div", { className: styles$e.container },
|
|
371
383
|
React.createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
|
|
372
|
-
React.createElement("div", { className: styles$
|
|
384
|
+
React.createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
|
|
373
385
|
if (i == 0) {
|
|
374
|
-
return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$
|
|
386
|
+
return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
|
|
375
387
|
}
|
|
376
|
-
return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$
|
|
388
|
+
return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
|
|
377
389
|
})),
|
|
378
390
|
React.createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
|
|
379
391
|
}
|
|
380
392
|
|
|
381
|
-
var css_248z$
|
|
382
|
-
var styles$
|
|
383
|
-
styleInject(css_248z$
|
|
393
|
+
var css_248z$d = ".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: 1.5px 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-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n border-color: var(--red-1);\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n position: relative;\n}\n\n.styles-module_label__appHO {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: 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}";
|
|
394
|
+
var styles$d = {"container":"styles-module_container__zcXGF","input":"styles-module_input__Tpth8","not_available":"styles-module_not_available__CRXjB","label":"styles-module_label__appHO","label_text":"styles-module_label_text__-sKjY","with_title":"styles-module_with_title__L3eGj","valid":"styles-module_valid__zWcOz"};
|
|
395
|
+
styleInject(css_248z$d);
|
|
384
396
|
|
|
385
397
|
function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus = false, type = "text", width = "100%", marginBottom, available = true, onInput = (event) => { } }) {
|
|
386
398
|
const [value, setValue] = useState(defaultValue);
|
|
@@ -389,32 +401,32 @@ function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus
|
|
|
389
401
|
element.focus();
|
|
390
402
|
}, [autoFocus]);
|
|
391
403
|
return (React.createElement(React.Fragment, null,
|
|
392
|
-
React.createElement("div", { className: styles$
|
|
393
|
-
React.createElement("input", { className: `${styles$
|
|
404
|
+
React.createElement("div", { className: styles$d.container, style: { width, marginBottom } },
|
|
405
|
+
React.createElement("input", { className: `${styles$d.input} ${title != undefined ? styles$d.with_title : styles$d.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$d.valid : styles$d.not_valid} ${available ? styles$d.available : styles$d.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
|
|
394
406
|
setValue(event.target.value);
|
|
395
407
|
if (onInput)
|
|
396
408
|
onInput(event);
|
|
397
409
|
} }),
|
|
398
|
-
React.createElement("label", { htmlFor: "text", className: styles$
|
|
399
|
-
React.createElement("span", { className: styles$
|
|
410
|
+
React.createElement("label", { htmlFor: "text", className: styles$d.label },
|
|
411
|
+
React.createElement("span", { className: styles$d.label_text }, title)))));
|
|
400
412
|
}
|
|
401
413
|
|
|
402
|
-
var css_248z$
|
|
403
|
-
var styles$
|
|
404
|
-
styleInject(css_248z$
|
|
414
|
+
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: 18px;\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 .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 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.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: 16px;\n margin-top: 5px;\n color: var(--foreground-1);\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}";
|
|
415
|
+
var styles$c = {"box":"styles-module_box__Z0iod","left_side":"styles-module_left_side__8ObGs","right_side":"styles-module_right_side__Ypp0D"};
|
|
416
|
+
styleInject(css_248z$c);
|
|
405
417
|
|
|
406
418
|
function OptionField({ headline, description, iconName }) {
|
|
407
419
|
return (React.createElement(React.Fragment, null,
|
|
408
|
-
React.createElement("div", { className: styles$
|
|
409
|
-
React.createElement("div", { className: styles$
|
|
410
|
-
React.createElement("div", { className: styles$
|
|
420
|
+
React.createElement("div", { className: styles$c.box },
|
|
421
|
+
React.createElement("div", { className: styles$c.left_side }, iconName && React.createElement(SvgIcon, { iconName: iconName })),
|
|
422
|
+
React.createElement("div", { className: styles$c.right_side },
|
|
411
423
|
React.createElement("h4", null, headline),
|
|
412
424
|
React.createElement("p", null, description)))));
|
|
413
425
|
}
|
|
414
426
|
|
|
415
|
-
var css_248z$
|
|
416
|
-
var styles$
|
|
417
|
-
styleInject(css_248z$
|
|
427
|
+
var css_248z$b = ".styles-module_container__XCtqW {\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__XCtqW:hover {\n background: var(--background-2);\n border-color: var(--border-3);\n}\n.styles-module_container__XCtqW h3 {\n font-weight: 500;\n margin: 0;\n text-align: center;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n border: 1px solid var(--foreground-1);\n}";
|
|
428
|
+
var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
|
|
429
|
+
styleInject(css_248z$b);
|
|
418
430
|
|
|
419
431
|
function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }) {
|
|
420
432
|
function onClickDiv(event) {
|
|
@@ -422,25 +434,25 @@ function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }
|
|
|
422
434
|
if (onClick)
|
|
423
435
|
onClick(event);
|
|
424
436
|
}
|
|
425
|
-
return (React.createElement("div", { className: [styles$
|
|
437
|
+
return (React.createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" "), onClick: onClickDiv },
|
|
426
438
|
iconName && React.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
|
|
427
439
|
React.createElement("h3", null, title)));
|
|
428
440
|
}
|
|
429
441
|
|
|
430
|
-
var css_248z$
|
|
431
|
-
var styles$
|
|
432
|
-
styleInject(css_248z$
|
|
442
|
+
var css_248z$a = ".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.styles-module_progress__Zj-B7 {\n background: var(--foreground-1);\n position: absolute;\n left: 0;\n top: 0;\n height: 3px;\n}";
|
|
443
|
+
var styles$a = {"container":"styles-module_container__u4q5n","background":"styles-module_background__jt-ry","progress":"styles-module_progress__Zj-B7"};
|
|
444
|
+
styleInject(css_248z$a);
|
|
433
445
|
|
|
434
446
|
function ProgressBar({ length, progress }) {
|
|
435
447
|
return (React.createElement(React.Fragment, null,
|
|
436
|
-
React.createElement("div", { className: styles$
|
|
437
|
-
React.createElement("div", { className: styles$
|
|
438
|
-
React.createElement("div", { className: styles$
|
|
448
|
+
React.createElement("div", { className: styles$a.container },
|
|
449
|
+
React.createElement("div", { className: styles$a.background },
|
|
450
|
+
React.createElement("div", { className: styles$a.progress, style: { width: `${progress / length * 100}%` } })))));
|
|
439
451
|
}
|
|
440
452
|
|
|
441
|
-
var css_248z$
|
|
442
|
-
var styles$
|
|
443
|
-
styleInject(css_248z$
|
|
453
|
+
var css_248z$9 = ".styles-module_container__Grkzw {\n display: flex;\n flex-direction: column;\n gap: 12px;\n color: var(--foreground-3);\n margin-bottom: 20px;\n}\n.styles-module_container__Grkzw [type=radio] {\n position: relative;\n left: 15px;\n top: -4px;\n z-index: 0;\n appearance: none;\n -webkit-appearance: none;\n cursor: pointer;\n margin-left: -3.5px;\n}\n.styles-module_container__Grkzw [type=radio] + label {\n position: absolute;\n cursor: pointer;\n}\n.styles-module_container__Grkzw [type=radio] + label::before {\n width: 15px;\n height: 15px;\n border-radius: 20px;\n border: 2px solid var(--border-2);\n display: block;\n content: \"\";\n float: left;\n margin-right: 8px;\n z-index: 5;\n position: relative;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__Grkzw [type=radio]:checked + label::before {\n background-color: var(--primary-2);\n border-color: var(--primary-1);\n}\n.styles-module_container__Grkzw [type=radio]:hover:not(:checked) + label::before {\n background-color: var(--background-4);\n border-color: var(--background-4);\n}";
|
|
454
|
+
var styles$9 = {"container":"styles-module_container__Grkzw"};
|
|
455
|
+
styleInject(css_248z$9);
|
|
444
456
|
|
|
445
457
|
class RadioOption {
|
|
446
458
|
text;
|
|
@@ -457,7 +469,7 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
|
|
|
457
469
|
if (onClick)
|
|
458
470
|
onClick(event);
|
|
459
471
|
}
|
|
460
|
-
return (React.createElement("div", { className: styles$
|
|
472
|
+
return (React.createElement("div", { className: styles$9.container, style: { width: width } }, options.map((option) => React.createElement("div", { className: styles$9.option, key: option.name },
|
|
461
473
|
selected && selected == option.name ?
|
|
462
474
|
React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
|
|
463
475
|
:
|
|
@@ -465,9 +477,9 @@ function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
|
|
|
465
477
|
React.createElement("label", { htmlFor: option.name }, option.text)))));
|
|
466
478
|
}
|
|
467
479
|
|
|
468
|
-
var css_248z$
|
|
469
|
-
var styles$
|
|
470
|
-
styleInject(css_248z$
|
|
480
|
+
var css_248z$8 = ".styles-module_container__RhsQe {\n margin-right: 8px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 {\n background: none;\n padding: none;\n border: none;\n width: 40px;\n height: 40px;\n transition: 0.2s;\n cursor: pointer;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 20px;\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0 span {\n color: var(--foreground-1);\n}\n.styles-module_container__RhsQe .styles-module_button__HuX-0:hover {\n background: var(--background-1);\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0 {\n flex-direction: row;\n gap: 5px;\n}\n.styles-module_container__RhsQe.styles-module_middle__xg7RF .styles-module_button__HuX-0:hover {\n background: none;\n}";
|
|
481
|
+
var styles$8 = {"container":"styles-module_container__RhsQe","button":"styles-module_button__HuX-0","middle":"styles-module_middle__xg7RF"};
|
|
482
|
+
styleInject(css_248z$8);
|
|
471
483
|
|
|
472
484
|
function RedirectButton({ type = "forward", onClick }) {
|
|
473
485
|
function onClickButton(event) {
|
|
@@ -482,16 +494,16 @@ function RedirectButton({ type = "forward", onClick }) {
|
|
|
482
494
|
case "middle": return "arrow_back";
|
|
483
495
|
}
|
|
484
496
|
};
|
|
485
|
-
return (React.createElement("div", { className: [styles$
|
|
486
|
-
React.createElement("button", { onClick: onClickButton, className: styles$
|
|
497
|
+
return (React.createElement("div", { className: [styles$8.container, styles$8[type]].join(" ") },
|
|
498
|
+
React.createElement("button", { onClick: onClickButton, className: styles$8.button },
|
|
487
499
|
React.createElement(SvgIcon, { iconName: getIcon() }),
|
|
488
500
|
["middle"].includes(type) &&
|
|
489
501
|
React.createElement("span", null, "Zur\u00FCck"))));
|
|
490
502
|
}
|
|
491
503
|
|
|
492
|
-
var css_248z$
|
|
493
|
-
var styles$
|
|
494
|
-
styleInject(css_248z$
|
|
504
|
+
var css_248z$7 = ".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: 10px 18px;\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 -webkit-user-select: none;\n color: var(--foreground-2);\n transition: 0.2s ease-in-out;\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.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}";
|
|
505
|
+
var styles$7 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","show_all":"styles-module_show_all__HKn-s","selected":"styles-module_selected__sArTD"};
|
|
506
|
+
styleInject(css_248z$7);
|
|
495
507
|
|
|
496
508
|
class SearchChip {
|
|
497
509
|
title;
|
|
@@ -512,19 +524,19 @@ function SearchChips({ items, onChange, chipsVisible = 9 }) {
|
|
|
512
524
|
if (onChange)
|
|
513
525
|
onChange(newChips);
|
|
514
526
|
}
|
|
515
|
-
return (React.createElement("div", { className: styles$
|
|
516
|
-
(showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React.createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$
|
|
527
|
+
return (React.createElement("div", { className: styles$7.container },
|
|
528
|
+
(showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React.createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$7.chip, item.selected ? styles$7.selected : styles$7.not_selected].join(" ") },
|
|
517
529
|
React.createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
|
|
518
530
|
item.title)),
|
|
519
531
|
chipsVisible < chips.length && (showAll ?
|
|
520
|
-
React.createElement("div", { className: styles$
|
|
532
|
+
React.createElement("div", { className: styles$7.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
|
|
521
533
|
:
|
|
522
|
-
React.createElement("div", { className: styles$
|
|
534
|
+
React.createElement("div", { className: styles$7.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen"))));
|
|
523
535
|
}
|
|
524
536
|
|
|
525
|
-
var css_248z$
|
|
526
|
-
var styles$
|
|
527
|
-
styleInject(css_248z$
|
|
537
|
+
var css_248z$6 = ".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: 1.5px 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-color: var(--primary-1);\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\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\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}\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}";
|
|
538
|
+
var styles$6 = {"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"};
|
|
539
|
+
styleInject(css_248z$6);
|
|
528
540
|
|
|
529
541
|
function Searchbar({ placeholder, title = "Suchen", showNoResults = false, errorTitle = "Keine Ergebnisse gefunden", errorMessage = "", errorButton = "", helpTitle = "", helpMessage = "", marginBottom = 25, marginTop = 30, errorAction = () => { }, onInput = () => { }, onClickResult = () => { }, withButton = false, buttonText = "Suchen", suggestions = [], autoFocus = false, results = [] }) {
|
|
530
542
|
const [value, setValue] = useState("");
|
|
@@ -553,34 +565,34 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
|
|
|
553
565
|
element.focus();
|
|
554
566
|
}, [autoFocus]);
|
|
555
567
|
return (React.createElement(React.Fragment, null,
|
|
556
|
-
React.createElement("div", { className: styles$
|
|
557
|
-
React.createElement("div", { className: `${styles$
|
|
558
|
-
React.createElement("input", { onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: `${styles$
|
|
559
|
-
React.createElement("label", { htmlFor: "text", className: styles$
|
|
560
|
-
React.createElement("span", { className: styles$
|
|
568
|
+
React.createElement("div", { className: styles$6.container, style: { marginTop: marginTop, marginBottom: marginBottom } },
|
|
569
|
+
React.createElement("div", { className: `${styles$6.form} ${inputFocused ? styles$6.focus : styles$6.not_focused}` },
|
|
570
|
+
React.createElement("input", { onFocus: () => setFocused(true), onBlur: () => setFocused(false), className: `${styles$6.input} ${title != undefined ? styles$6.with_title : styles$6.without_title} ${value.length > 0 ? styles$6.valid : styles$6.not_valid}`, placeholder: placeholder, type: "search", ref: inputElement, onInput: onInputChanged }),
|
|
571
|
+
React.createElement("label", { htmlFor: "text", className: styles$6.label },
|
|
572
|
+
React.createElement("span", { className: styles$6.label_text }, title))),
|
|
561
573
|
withButton && React.createElement("button", { type: "button" }, buttonText),
|
|
562
|
-
suggestions.length > 0 && React.createElement("div", { className: styles$
|
|
574
|
+
suggestions.length > 0 && React.createElement("div", { className: styles$6.suggestions_container },
|
|
563
575
|
React.createElement("ul", null, suggestions.map((suggestion, index) => React.createElement("li", { key: index }, suggestion)))),
|
|
564
|
-
searchResults.length > 0 && React.createElement("div", { className: styles$
|
|
576
|
+
searchResults.length > 0 && React.createElement("div", { className: styles$6.results_container },
|
|
565
577
|
React.createElement("ul", null, searchResults.map((result, index) => React.createElement("li", { key: index, onClick: (event) => onClickResult(event, result) },
|
|
566
578
|
React.createElement("span", null, result.title),
|
|
567
579
|
React.createElement("button", { type: "button" }, buttonText))))),
|
|
568
|
-
searchResults.length == 0 && showNoResults && value.length > 0 && React.createElement("div", { className: styles$
|
|
569
|
-
React.createElement("div", { className: styles$
|
|
580
|
+
searchResults.length == 0 && showNoResults && value.length > 0 && React.createElement("div", { className: styles$6.results_container },
|
|
581
|
+
React.createElement("div", { className: styles$6.error },
|
|
570
582
|
React.createElement(SvgIcon, { iconName: "error" }),
|
|
571
583
|
React.createElement("h3", null, errorTitle),
|
|
572
584
|
React.createElement("p", null, errorMessage),
|
|
573
585
|
errorButton.length > 0 && React.createElement("button", { type: "button", onClick: errorAction }, errorButton))),
|
|
574
|
-
searchResults.length == 0 && showNoResults && value.length == 0 && React.createElement("div", { className: styles$
|
|
575
|
-
React.createElement("div", { className: styles$
|
|
586
|
+
searchResults.length == 0 && showNoResults && value.length == 0 && React.createElement("div", { className: styles$6.results_container },
|
|
587
|
+
React.createElement("div", { className: styles$6.error },
|
|
576
588
|
React.createElement(SvgIcon, { iconName: "lightbulb" }),
|
|
577
589
|
React.createElement("h3", null, helpTitle),
|
|
578
590
|
React.createElement("p", null, helpMessage))))));
|
|
579
591
|
}
|
|
580
592
|
|
|
581
|
-
var css_248z$
|
|
582
|
-
var styles$
|
|
583
|
-
styleInject(css_248z$
|
|
593
|
+
var css_248z$5 = "";
|
|
594
|
+
var styles$5 = {};
|
|
595
|
+
styleInject(css_248z$5);
|
|
584
596
|
|
|
585
597
|
class SliderCard {
|
|
586
598
|
title;
|
|
@@ -592,41 +604,29 @@ class SliderCard {
|
|
|
592
604
|
}
|
|
593
605
|
function Slider({ cards }) {
|
|
594
606
|
const [selected, setSelected] = useState(0);
|
|
595
|
-
return (React.createElement("div", { className: styles$
|
|
607
|
+
return (React.createElement("div", { className: styles$5.container }, cards.map((card, index) => React.createElement("div", { key: index, className: [styles$5.card, selected == index ? styles$5.selected : styles$5.not_selected].join(" ") },
|
|
596
608
|
React.createElement("h1", null, card.title),
|
|
597
609
|
React.createElement("p", null, card.description)))));
|
|
598
610
|
}
|
|
599
611
|
|
|
600
|
-
var css_248z$
|
|
601
|
-
var styles$
|
|
602
|
-
styleInject(css_248z$
|
|
612
|
+
var css_248z$4 = ".styles-module_container__xRQNT {\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 7px;\n color: var(--foreground-3);\n}\n.styles-module_container__xRQNT svg {\n fill: var(--foreground-3);\n}";
|
|
613
|
+
var styles$4 = {"container":"styles-module_container__xRQNT"};
|
|
614
|
+
styleInject(css_248z$4);
|
|
603
615
|
|
|
604
616
|
function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" }) {
|
|
605
617
|
return (React.createElement(React.Fragment, null,
|
|
606
|
-
React.createElement("div", { className: styles$
|
|
618
|
+
React.createElement("div", { className: styles$4.container },
|
|
607
619
|
React.createElement(SvgIcon, { iconName: iconName }),
|
|
608
620
|
text)));
|
|
609
621
|
}
|
|
610
622
|
|
|
611
|
-
var css_248z$4 = ".styles-module_card__hT9fw {\n display: flex;\n align-items: center;\n flex-direction: column;\n gap: 20px;\n padding: 100px 0px;\n}\n.styles-module_card__hT9fw h1 {\n margin: 0;\n font-size: 22px;\n font-weight: 500;\n}\n.styles-module_card__hT9fw p {\n margin: 0;\n font-size: 16px;\n}";
|
|
612
|
-
var styles$4 = {"card":"styles-module_card__hT9fw"};
|
|
613
|
-
styleInject(css_248z$4);
|
|
614
|
-
|
|
615
|
-
function EmptyCard({ title = "Keine Daten", subtitle = "Es sind keine Daten vorhanden.", iconName = "manage_search", button, onClick }) {
|
|
616
|
-
return (React.createElement("div", { className: styles$4.card },
|
|
617
|
-
React.createElement(SvgIcon, { size: "60px", iconName: iconName }),
|
|
618
|
-
React.createElement("h1", null, title),
|
|
619
|
-
React.createElement("p", null, subtitle),
|
|
620
|
-
button && React.createElement(Button, { text: button, onClick: onClick })));
|
|
621
|
-
}
|
|
622
|
-
|
|
623
623
|
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}";
|
|
624
624
|
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"};
|
|
625
625
|
styleInject(css_248z$3);
|
|
626
626
|
|
|
627
|
-
function Table({ items, title = "Titel", actions = [], moreActions, selected, style = "default", marginTop = 30, emptyTitle = "Keine Daten", emptySubtitle = "Es sind keine Daten vorhanden.", emptyIconName = "manage_search" }) {
|
|
627
|
+
function Table({ items, title = "Titel", actions = [], moreActions, selected, style = "default", marginTop = 30, emptyTitle = "Keine Daten", emptySubtitle = "Es sind keine Daten vorhanden.", emptyIconName = "manage_search", enableEmptyCard = true }) {
|
|
628
628
|
return (React.createElement("div", { className: styles$3.container, style: { marginTop: marginTop } },
|
|
629
|
-
items.length == 0 &&
|
|
629
|
+
items.length == 0 && enableEmptyCard &&
|
|
630
630
|
React.createElement(EmptyCard, { title: emptyTitle, subtitle: emptySubtitle, iconName: emptyIconName }),
|
|
631
631
|
items.length > 0 &&
|
|
632
632
|
React.createElement(React.Fragment, null,
|
|
@@ -1048,4 +1048,4 @@ var S3FileCategory;
|
|
|
1048
1048
|
S3FileCategory["default"] = "file";
|
|
1049
1049
|
})(S3FileCategory || (S3FileCategory = {}));
|
|
1050
1050
|
|
|
1051
|
-
export { Accordeon, AuthButton, Button, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, CourseAnnouncementAssetType, Dialog, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, OptionField, OptionFieldHorizontal, ProgressBar, RadioButtons, RadioOption, RedirectButton, S3FileCategory, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard };
|
|
1051
|
+
export { Accordeon, AuthButton, Button, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, CourseAnnouncementAssetType, Dialog, EmptyCard, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, OptionField, OptionFieldHorizontal, ProgressBar, RadioButtons, RadioOption, RedirectButton, S3FileCategory, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard };
|