math-main-components 0.0.98 → 0.0.100
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.
|
@@ -3,7 +3,7 @@ export type SearchResult = {
|
|
|
3
3
|
title: string;
|
|
4
4
|
data: unknown;
|
|
5
5
|
};
|
|
6
|
-
export declare function Searchbar<Type extends SearchResult>({ placeholder, title, showNoResults, errorTitle, errorMessage, errorButton, helpTitle, helpMessage, errorAction, onInput, onClickResult, withButton, buttonText, suggestions, autoFocus, results }: {
|
|
6
|
+
export declare function Searchbar<Type extends SearchResult>({ placeholder, title, showNoResults, errorTitle, errorMessage, errorButton, helpTitle, helpMessage, marginBottom, marginTop, errorAction, onInput, onClickResult, withButton, buttonText, suggestions, autoFocus, results }: {
|
|
7
7
|
placeholder: string;
|
|
8
8
|
title?: string;
|
|
9
9
|
showNoResults?: boolean;
|
|
@@ -12,6 +12,8 @@ export declare function Searchbar<Type extends SearchResult>({ placeholder, titl
|
|
|
12
12
|
errorButton?: string;
|
|
13
13
|
helpTitle?: string;
|
|
14
14
|
helpMessage?: string;
|
|
15
|
+
marginBottom?: number;
|
|
16
|
+
marginTop?: number;
|
|
15
17
|
errorAction?: (event: MouseEvent<HTMLButtonElement>) => void;
|
|
16
18
|
onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
17
19
|
onClickResult?: (event: MouseEvent<HTMLLIElement>, result: Type) => void;
|
|
@@ -1,26 +1,22 @@
|
|
|
1
1
|
import React, { MouseEvent, ReactNode } from 'react';
|
|
2
|
-
export
|
|
3
|
-
|
|
4
|
-
default = 1
|
|
5
|
-
}
|
|
6
|
-
export declare class TableItem<DataType> {
|
|
2
|
+
export type TableActionType = "red" | "default";
|
|
3
|
+
export type TableItem<DataType> = {
|
|
7
4
|
title: string;
|
|
8
5
|
subtitle: string;
|
|
9
6
|
moreText: string;
|
|
10
7
|
iconName: string;
|
|
11
8
|
data: DataType;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
export declare class TableItemAction<DataType> {
|
|
9
|
+
};
|
|
10
|
+
export type TableItemAction<DataType> = {
|
|
15
11
|
title: string;
|
|
16
12
|
iconName: string;
|
|
17
13
|
onClick: (event: MouseEvent<HTMLDivElement>, item: TableItem<DataType>, index: number) => void;
|
|
18
14
|
type: TableActionType;
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
export declare function Table<DataType>({ items, title, actions, moreActions, marginTop }: {
|
|
15
|
+
};
|
|
16
|
+
export declare function Table<DataType>({ items, title, actions, moreActions, selected, marginTop }: {
|
|
22
17
|
items: TableItem<DataType>[];
|
|
23
18
|
title: string;
|
|
19
|
+
selected?: number;
|
|
24
20
|
actions?: TableItemAction<DataType>[];
|
|
25
21
|
moreActions?: ((data: DataType, index: number) => ReactNode)[];
|
|
26
22
|
marginTop?: number;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export { Table, TableActionType, TableItem, TableItemAction } from './Table';
|
|
1
|
+
export { Table, type TableActionType, type TableItem, type TableItemAction } from './Table';
|
package/dist/index.cjs.js
CHANGED
|
@@ -530,11 +530,11 @@ function SearchChips({ items, onChange, chipsVisible = 9 }) {
|
|
|
530
530
|
React__default["default"].createElement("div", { className: styles$7.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen")));
|
|
531
531
|
}
|
|
532
532
|
|
|
533
|
-
var css_248z$6 = ".styles-module_container__k4Z26 {\n width: 100%;\n display: flex;\n flex-direction: row;\n
|
|
533
|
+
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}";
|
|
534
534
|
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"};
|
|
535
535
|
styleInject(css_248z$6);
|
|
536
536
|
|
|
537
|
-
function Searchbar({ placeholder, title = "Suchen", showNoResults = false, errorTitle = "Keine Ergebnisse gefunden", errorMessage = "", errorButton = "", helpTitle = "", helpMessage = "", errorAction = (
|
|
537
|
+
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 = [] }) {
|
|
538
538
|
const [value, setValue] = React.useState("");
|
|
539
539
|
const [inputFocused, setFocused] = React.useState(false);
|
|
540
540
|
const [searchResults, setSearchResults] = React.useState(results);
|
|
@@ -561,7 +561,7 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
|
|
|
561
561
|
element.focus();
|
|
562
562
|
}, [autoFocus]);
|
|
563
563
|
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
564
|
-
React__default["default"].createElement("div", { className: styles$6.container },
|
|
564
|
+
React__default["default"].createElement("div", { className: styles$6.container, style: { marginTop: marginTop, marginBottom: marginBottom } },
|
|
565
565
|
React__default["default"].createElement("div", { className: `${styles$6.form} ${inputFocused ? styles$6.focus : styles$6.not_focused}` },
|
|
566
566
|
React__default["default"].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 }),
|
|
567
567
|
React__default["default"].createElement("label", { htmlFor: "text", className: styles$6.label },
|
|
@@ -616,45 +616,14 @@ function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" })
|
|
|
616
616
|
text)));
|
|
617
617
|
}
|
|
618
618
|
|
|
619
|
-
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 {\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}\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:nth-child(even) {\n background: var(--background-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n border-bottom: 1px solid var(--border-1);\n}";
|
|
620
|
-
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","
|
|
619
|
+
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}\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:nth-child(even) {\n background: var(--background-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n border-bottom: 1px solid var(--border-1);\n}";
|
|
620
|
+
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"};
|
|
621
621
|
styleInject(css_248z$3);
|
|
622
622
|
|
|
623
|
-
|
|
624
|
-
(function (TableActionType) {
|
|
625
|
-
TableActionType[TableActionType["red"] = 0] = "red";
|
|
626
|
-
TableActionType[TableActionType["default"] = 1] = "default";
|
|
627
|
-
})(exports.TableActionType || (exports.TableActionType = {}));
|
|
628
|
-
class TableItem {
|
|
629
|
-
title;
|
|
630
|
-
subtitle;
|
|
631
|
-
moreText;
|
|
632
|
-
iconName;
|
|
633
|
-
data;
|
|
634
|
-
constructor(title, subtitle, moreText, iconName, data) {
|
|
635
|
-
this.title = title;
|
|
636
|
-
this.subtitle = subtitle;
|
|
637
|
-
this.moreText = moreText;
|
|
638
|
-
this.iconName = iconName;
|
|
639
|
-
this.data = data;
|
|
640
|
-
}
|
|
641
|
-
}
|
|
642
|
-
class TableItemAction {
|
|
643
|
-
title;
|
|
644
|
-
iconName;
|
|
645
|
-
onClick;
|
|
646
|
-
type = exports.TableActionType.default;
|
|
647
|
-
constructor(title, iconName, type, onClick = () => { }) {
|
|
648
|
-
this.title = title;
|
|
649
|
-
this.iconName = iconName;
|
|
650
|
-
this.onClick = onClick;
|
|
651
|
-
this.type = type;
|
|
652
|
-
}
|
|
653
|
-
}
|
|
654
|
-
function Table({ items, title = "Titel", actions = [], moreActions, marginTop = 30 }) {
|
|
623
|
+
function Table({ items, title = "Titel", actions = [], moreActions, selected, marginTop = 30 }) {
|
|
655
624
|
return (React__default["default"].createElement("div", { className: styles$3.container, style: { marginTop: marginTop } },
|
|
656
625
|
React__default["default"].createElement("h3", null, title),
|
|
657
|
-
React__default["default"].createElement("ul", { className: `${styles$3.item_list} ${items.length > 0 ? styles$3.has_children : styles$3.no_children}` }, items.map((item, index) => React__default["default"].createElement("li", { key: index, className: styles$3.item },
|
|
626
|
+
React__default["default"].createElement("ul", { className: `${styles$3.item_list} ${items.length > 0 ? styles$3.has_children : styles$3.no_children}` }, items.map((item, index) => React__default["default"].createElement("li", { key: index, className: [styles$3.item, selected == index ? styles$3.selected : styles$3.not_selected].join(" ") },
|
|
658
627
|
React__default["default"].createElement("div", { className: styles$3.icon },
|
|
659
628
|
React__default["default"].createElement(SvgIcon, { iconName: item.iconName })),
|
|
660
629
|
React__default["default"].createElement("div", { className: styles$3.title }, item.title),
|
|
@@ -664,8 +633,8 @@ function Table({ items, title = "Titel", actions = [], moreActions, marginTop =
|
|
|
664
633
|
moreActions.map((moreAction, index) => React__default["default"].createElement("div", { className: styles$3.more_action, key: item.title + index }, moreAction(item.data, index))),
|
|
665
634
|
actions.length > 0 && actions.map((action, idx) => React__default["default"].createElement("div", { key: idx, className: [
|
|
666
635
|
styles$3.action,
|
|
667
|
-
action.type
|
|
668
|
-
action.type
|
|
636
|
+
action.type === "red" && styles$3.red,
|
|
637
|
+
action.type === "default" && styles$3.default,
|
|
669
638
|
].join(" "), onClick: (event) => action.onClick(event, item, index) },
|
|
670
639
|
React__default["default"].createElement(SvgIcon, { iconName: action.iconName }),
|
|
671
640
|
action.title)))))));
|
|
@@ -1114,8 +1083,6 @@ exports.SliderCard = SliderCard;
|
|
|
1114
1083
|
exports.StepBack = StepBack;
|
|
1115
1084
|
exports.SvgIcon = SvgIcon;
|
|
1116
1085
|
exports.Table = Table;
|
|
1117
|
-
exports.TableItem = TableItem;
|
|
1118
|
-
exports.TableItemAction = TableItemAction;
|
|
1119
1086
|
exports.Tabs = Tabs;
|
|
1120
1087
|
exports.TextWithIcon = TextWithIcon;
|
|
1121
1088
|
exports.UsageCard = UsageCard;
|
package/dist/index.esm.js
CHANGED
|
@@ -522,11 +522,11 @@ function SearchChips({ items, onChange, chipsVisible = 9 }) {
|
|
|
522
522
|
React.createElement("div", { className: styles$7.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen")));
|
|
523
523
|
}
|
|
524
524
|
|
|
525
|
-
var css_248z$6 = ".styles-module_container__k4Z26 {\n width: 100%;\n display: flex;\n flex-direction: row;\n
|
|
525
|
+
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}";
|
|
526
526
|
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"};
|
|
527
527
|
styleInject(css_248z$6);
|
|
528
528
|
|
|
529
|
-
function Searchbar({ placeholder, title = "Suchen", showNoResults = false, errorTitle = "Keine Ergebnisse gefunden", errorMessage = "", errorButton = "", helpTitle = "", helpMessage = "", errorAction = (
|
|
529
|
+
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
530
|
const [value, setValue] = useState("");
|
|
531
531
|
const [inputFocused, setFocused] = useState(false);
|
|
532
532
|
const [searchResults, setSearchResults] = useState(results);
|
|
@@ -553,7 +553,7 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
|
|
|
553
553
|
element.focus();
|
|
554
554
|
}, [autoFocus]);
|
|
555
555
|
return (React.createElement(React.Fragment, null,
|
|
556
|
-
React.createElement("div", { className: styles$6.container },
|
|
556
|
+
React.createElement("div", { className: styles$6.container, style: { marginTop: marginTop, marginBottom: marginBottom } },
|
|
557
557
|
React.createElement("div", { className: `${styles$6.form} ${inputFocused ? styles$6.focus : styles$6.not_focused}` },
|
|
558
558
|
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 }),
|
|
559
559
|
React.createElement("label", { htmlFor: "text", className: styles$6.label },
|
|
@@ -608,45 +608,14 @@ function StepBack({ iconName = "arrow_back", text = "Weitere Möglichkeiten" })
|
|
|
608
608
|
text)));
|
|
609
609
|
}
|
|
610
610
|
|
|
611
|
-
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 {\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}\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:nth-child(even) {\n background: var(--background-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n border-bottom: 1px solid var(--border-1);\n}";
|
|
612
|
-
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","
|
|
611
|
+
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}\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:nth-child(even) {\n background: var(--background-2);\n}\n.styles-module_item_list__FxHkg li.styles-module_item__sgyiV:not(:last-child) {\n border-bottom: 1px solid var(--border-1);\n}";
|
|
612
|
+
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"};
|
|
613
613
|
styleInject(css_248z$3);
|
|
614
614
|
|
|
615
|
-
|
|
616
|
-
(function (TableActionType) {
|
|
617
|
-
TableActionType[TableActionType["red"] = 0] = "red";
|
|
618
|
-
TableActionType[TableActionType["default"] = 1] = "default";
|
|
619
|
-
})(TableActionType || (TableActionType = {}));
|
|
620
|
-
class TableItem {
|
|
621
|
-
title;
|
|
622
|
-
subtitle;
|
|
623
|
-
moreText;
|
|
624
|
-
iconName;
|
|
625
|
-
data;
|
|
626
|
-
constructor(title, subtitle, moreText, iconName, data) {
|
|
627
|
-
this.title = title;
|
|
628
|
-
this.subtitle = subtitle;
|
|
629
|
-
this.moreText = moreText;
|
|
630
|
-
this.iconName = iconName;
|
|
631
|
-
this.data = data;
|
|
632
|
-
}
|
|
633
|
-
}
|
|
634
|
-
class TableItemAction {
|
|
635
|
-
title;
|
|
636
|
-
iconName;
|
|
637
|
-
onClick;
|
|
638
|
-
type = TableActionType.default;
|
|
639
|
-
constructor(title, iconName, type, onClick = () => { }) {
|
|
640
|
-
this.title = title;
|
|
641
|
-
this.iconName = iconName;
|
|
642
|
-
this.onClick = onClick;
|
|
643
|
-
this.type = type;
|
|
644
|
-
}
|
|
645
|
-
}
|
|
646
|
-
function Table({ items, title = "Titel", actions = [], moreActions, marginTop = 30 }) {
|
|
615
|
+
function Table({ items, title = "Titel", actions = [], moreActions, selected, marginTop = 30 }) {
|
|
647
616
|
return (React.createElement("div", { className: styles$3.container, style: { marginTop: marginTop } },
|
|
648
617
|
React.createElement("h3", null, title),
|
|
649
|
-
React.createElement("ul", { className: `${styles$3.item_list} ${items.length > 0 ? styles$3.has_children : styles$3.no_children}` }, items.map((item, index) => React.createElement("li", { key: index, className: styles$3.item },
|
|
618
|
+
React.createElement("ul", { className: `${styles$3.item_list} ${items.length > 0 ? styles$3.has_children : styles$3.no_children}` }, items.map((item, index) => React.createElement("li", { key: index, className: [styles$3.item, selected == index ? styles$3.selected : styles$3.not_selected].join(" ") },
|
|
650
619
|
React.createElement("div", { className: styles$3.icon },
|
|
651
620
|
React.createElement(SvgIcon, { iconName: item.iconName })),
|
|
652
621
|
React.createElement("div", { className: styles$3.title }, item.title),
|
|
@@ -656,8 +625,8 @@ function Table({ items, title = "Titel", actions = [], moreActions, marginTop =
|
|
|
656
625
|
moreActions.map((moreAction, index) => React.createElement("div", { className: styles$3.more_action, key: item.title + index }, moreAction(item.data, index))),
|
|
657
626
|
actions.length > 0 && actions.map((action, idx) => React.createElement("div", { key: idx, className: [
|
|
658
627
|
styles$3.action,
|
|
659
|
-
action.type
|
|
660
|
-
action.type
|
|
628
|
+
action.type === "red" && styles$3.red,
|
|
629
|
+
action.type === "default" && styles$3.default,
|
|
661
630
|
].join(" "), onClick: (event) => action.onClick(event, item, index) },
|
|
662
631
|
React.createElement(SvgIcon, { iconName: action.iconName }),
|
|
663
632
|
action.title)))))));
|
|
@@ -1072,4 +1041,4 @@ var ManagerPermission;
|
|
|
1072
1041
|
ManagerPermission["file"] = "file";
|
|
1073
1042
|
})(ManagerPermission || (ManagerPermission = {}));
|
|
1074
1043
|
|
|
1075
|
-
export { Accordeon, AuthButton, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, CourseAnnouncementAssetType, Dialog, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, ManagerPermission, OptionField, OptionFieldHorizontal, PrimaryButton, ProgressBar, RadioButtons, RadioOption, RedirectButton, S3FileCategory, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table,
|
|
1044
|
+
export { Accordeon, AuthButton, CardButton, Checkbox, ChooseRole, ChooseRoleItem, CopyCode, CourseAnnouncementAssetType, Dialog, FormButton, FormText, ForwardButton, Gap, InputArea, InputMail, InputNames, InputNumber, InputPassword, InputPin, InputText, ManagerPermission, OptionField, OptionFieldHorizontal, PrimaryButton, ProgressBar, RadioButtons, RadioOption, RedirectButton, S3FileCategory, SearchChip, SearchChips, Searchbar, Slider, SliderCard, StepBack, SvgIcon, Table, Tabs, TextWithIcon, UsageCard };
|