@helpwave/hightide 0.1.19 → 0.1.21
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/date/DatePicker.js +3 -2
- package/dist/components/date/DatePicker.js.map +1 -1
- package/dist/components/date/DatePicker.mjs +3 -2
- package/dist/components/date/DatePicker.mjs.map +1 -1
- package/dist/components/date/DayPicker.js.map +1 -1
- package/dist/components/date/DayPicker.mjs.map +1 -1
- package/dist/components/date/TimeDisplay.js.map +1 -1
- package/dist/components/date/TimeDisplay.mjs.map +1 -1
- package/dist/components/date/YearMonthPicker.js +3 -2
- package/dist/components/date/YearMonthPicker.js.map +1 -1
- package/dist/components/date/YearMonthPicker.mjs +3 -2
- package/dist/components/date/YearMonthPicker.mjs.map +1 -1
- package/dist/components/dialogs/ConfirmDialog.js +1 -1
- package/dist/components/dialogs/ConfirmDialog.js.map +1 -1
- package/dist/components/dialogs/ConfirmDialog.mjs +1 -1
- package/dist/components/dialogs/ConfirmDialog.mjs.map +1 -1
- package/dist/components/layout-and-navigation/Expandable.d.mts +3 -0
- package/dist/components/layout-and-navigation/Expandable.d.ts +3 -0
- package/dist/components/layout-and-navigation/Expandable.js +3 -2
- package/dist/components/layout-and-navigation/Expandable.js.map +1 -1
- package/dist/components/layout-and-navigation/Expandable.mjs +3 -2
- package/dist/components/layout-and-navigation/Expandable.mjs.map +1 -1
- package/dist/components/layout-and-navigation/FAQSection.js +3 -2
- package/dist/components/layout-and-navigation/FAQSection.js.map +1 -1
- package/dist/components/layout-and-navigation/FAQSection.mjs +3 -2
- package/dist/components/layout-and-navigation/FAQSection.mjs.map +1 -1
- package/dist/components/layout-and-navigation/Overlay.js +1 -1
- package/dist/components/layout-and-navigation/Overlay.js.map +1 -1
- package/dist/components/layout-and-navigation/Overlay.mjs +1 -1
- package/dist/components/layout-and-navigation/Overlay.mjs.map +1 -1
- package/dist/components/layout-and-navigation/Pagination.js.map +1 -1
- package/dist/components/layout-and-navigation/Pagination.mjs.map +1 -1
- package/dist/components/layout-and-navigation/SearchableList.js.map +1 -1
- package/dist/components/layout-and-navigation/SearchableList.mjs.map +1 -1
- package/dist/components/layout-and-navigation/StepperBar.js.map +1 -1
- package/dist/components/layout-and-navigation/StepperBar.mjs.map +1 -1
- package/dist/components/layout-and-navigation/TextImage.js.map +1 -1
- package/dist/components/layout-and-navigation/TextImage.mjs.map +1 -1
- package/dist/components/loading-states/ErrorComponent.js.map +1 -1
- package/dist/components/loading-states/ErrorComponent.mjs.map +1 -1
- package/dist/components/loading-states/LoadingAndErrorComponent.d.mts +5 -10
- package/dist/components/loading-states/LoadingAndErrorComponent.d.ts +5 -10
- package/dist/components/loading-states/LoadingAndErrorComponent.js +14 -331
- package/dist/components/loading-states/LoadingAndErrorComponent.js.map +1 -1
- package/dist/components/loading-states/LoadingAndErrorComponent.mjs +15 -322
- package/dist/components/loading-states/LoadingAndErrorComponent.mjs.map +1 -1
- package/dist/components/loading-states/LoadingAnimation.js.map +1 -1
- package/dist/components/loading-states/LoadingAnimation.mjs.map +1 -1
- package/dist/components/loading-states/LoadingContainer.d.mts +8 -0
- package/dist/components/loading-states/LoadingContainer.d.ts +8 -0
- package/dist/components/loading-states/LoadingContainer.js +34 -0
- package/dist/components/loading-states/LoadingContainer.js.map +1 -0
- package/dist/components/loading-states/LoadingContainer.mjs +10 -0
- package/dist/components/loading-states/LoadingContainer.mjs.map +1 -0
- package/dist/components/modals/ConfirmModal.js +1 -1
- package/dist/components/modals/ConfirmModal.js.map +1 -1
- package/dist/components/modals/ConfirmModal.mjs +1 -1
- package/dist/components/modals/ConfirmModal.mjs.map +1 -1
- package/dist/components/modals/DiscardChangesModal.js +1 -1
- package/dist/components/modals/DiscardChangesModal.js.map +1 -1
- package/dist/components/modals/DiscardChangesModal.mjs +1 -1
- package/dist/components/modals/DiscardChangesModal.mjs.map +1 -1
- package/dist/components/modals/InputModal.js +1 -1
- package/dist/components/modals/InputModal.js.map +1 -1
- package/dist/components/modals/InputModal.mjs +1 -1
- package/dist/components/modals/InputModal.mjs.map +1 -1
- package/dist/components/modals/LanguageModal.js +7 -5
- package/dist/components/modals/LanguageModal.js.map +1 -1
- package/dist/components/modals/LanguageModal.mjs +7 -5
- package/dist/components/modals/LanguageModal.mjs.map +1 -1
- package/dist/components/modals/ThemeModal.js +7 -5
- package/dist/components/modals/ThemeModal.js.map +1 -1
- package/dist/components/modals/ThemeModal.mjs +7 -5
- package/dist/components/modals/ThemeModal.mjs.map +1 -1
- package/dist/components/properties/CheckboxProperty.js.map +1 -1
- package/dist/components/properties/CheckboxProperty.mjs.map +1 -1
- package/dist/components/properties/DateProperty.js.map +1 -1
- package/dist/components/properties/DateProperty.mjs.map +1 -1
- package/dist/components/properties/MultiSelectProperty.js +4 -3
- package/dist/components/properties/MultiSelectProperty.js.map +1 -1
- package/dist/components/properties/MultiSelectProperty.mjs +4 -3
- package/dist/components/properties/MultiSelectProperty.mjs.map +1 -1
- package/dist/components/properties/NumberProperty.js.map +1 -1
- package/dist/components/properties/NumberProperty.mjs.map +1 -1
- package/dist/components/properties/PropertyBase.js.map +1 -1
- package/dist/components/properties/PropertyBase.mjs.map +1 -1
- package/dist/components/properties/SelectProperty.js +4 -3
- package/dist/components/properties/SelectProperty.js.map +1 -1
- package/dist/components/properties/SelectProperty.mjs +4 -3
- package/dist/components/properties/SelectProperty.mjs.map +1 -1
- package/dist/components/properties/TextProperty.js.map +1 -1
- package/dist/components/properties/TextProperty.mjs.map +1 -1
- package/dist/components/table/Table.js +1 -1
- package/dist/components/table/Table.js.map +1 -1
- package/dist/components/table/Table.mjs +1 -1
- package/dist/components/table/Table.mjs.map +1 -1
- package/dist/components/table/TableFilterButton.js +1 -1
- package/dist/components/table/TableFilterButton.js.map +1 -1
- package/dist/components/table/TableFilterButton.mjs +1 -1
- package/dist/components/table/TableFilterButton.mjs.map +1 -1
- package/dist/components/user-action/CopyToClipboardWrapper.js.map +1 -1
- package/dist/components/user-action/CopyToClipboardWrapper.mjs.map +1 -1
- package/dist/components/user-action/DateAndTimePicker.js +3 -2
- package/dist/components/user-action/DateAndTimePicker.js.map +1 -1
- package/dist/components/user-action/DateAndTimePicker.mjs +3 -2
- package/dist/components/user-action/DateAndTimePicker.mjs.map +1 -1
- package/dist/components/user-action/Menu.js +1 -1
- package/dist/components/user-action/Menu.js.map +1 -1
- package/dist/components/user-action/Menu.mjs +1 -1
- package/dist/components/user-action/Menu.mjs.map +1 -1
- package/dist/components/user-action/MultiSelect.js +4 -3
- package/dist/components/user-action/MultiSelect.js.map +1 -1
- package/dist/components/user-action/MultiSelect.mjs +4 -3
- package/dist/components/user-action/MultiSelect.mjs.map +1 -1
- package/dist/components/user-action/SearchBar.js.map +1 -1
- package/dist/components/user-action/SearchBar.mjs.map +1 -1
- package/dist/components/user-action/Select.js +4 -3
- package/dist/components/user-action/Select.js.map +1 -1
- package/dist/components/user-action/Select.mjs +4 -3
- package/dist/components/user-action/Select.mjs.map +1 -1
- package/dist/css/globals.css +53 -6
- package/dist/css/uncompiled/theme/colors-semantic.css +5 -5
- package/dist/css/uncompiled/utitlity/animation.css +27 -1
- package/dist/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +314 -289
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +278 -254
- package/dist/index.mjs.map +1 -1
- package/dist/localization/LanguageProvider.js +2 -1
- package/dist/localization/LanguageProvider.js.map +1 -1
- package/dist/localization/LanguageProvider.mjs +2 -1
- package/dist/localization/LanguageProvider.mjs.map +1 -1
- package/dist/localization/useTranslation.js.map +1 -1
- package/dist/localization/useTranslation.mjs.map +1 -1
- package/dist/theming/useTheme.js +71 -6
- package/dist/theming/useTheme.js.map +1 -1
- package/dist/theming/useTheme.mjs +69 -4
- package/dist/theming/useTheme.mjs.map +1 -1
- package/package.json +1 -1
|
@@ -1,25 +1,20 @@
|
|
|
1
1
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
-
import
|
|
3
|
-
import { PropsWithChildren } from 'react';
|
|
4
|
-
import { LoadingAnimationProps } from './LoadingAnimation.js';
|
|
5
|
-
import { ErrorComponentProps } from './ErrorComponent.js';
|
|
6
|
-
import '../../localization/useTranslation.js';
|
|
7
|
-
import '../../localization/util.js';
|
|
8
|
-
import '../../localization/defaults/form.js';
|
|
2
|
+
import { PropsWithChildren, ReactNode } from 'react';
|
|
9
3
|
|
|
10
4
|
type LoadingAndErrorComponentProps = PropsWithChildren<{
|
|
11
5
|
isLoading?: boolean;
|
|
12
6
|
hasError?: boolean;
|
|
13
|
-
|
|
14
|
-
|
|
7
|
+
loadingComponent?: ReactNode;
|
|
8
|
+
errorComponent?: ReactNode;
|
|
15
9
|
/**
|
|
16
10
|
* in milliseconds
|
|
17
11
|
*/
|
|
18
12
|
minimumLoadingDuration?: number;
|
|
13
|
+
className?: string;
|
|
19
14
|
}>;
|
|
20
15
|
/**
|
|
21
16
|
* A Component that shows the Error and Loading animation, when appropriate and the children otherwise
|
|
22
17
|
*/
|
|
23
|
-
declare const LoadingAndErrorComponent: ({ children, isLoading, hasError,
|
|
18
|
+
declare const LoadingAndErrorComponent: ({ children, isLoading, hasError, loadingComponent, errorComponent, minimumLoadingDuration, className }: LoadingAndErrorComponentProps) => string | number | boolean | Iterable<ReactNode> | react_jsx_runtime.JSX.Element;
|
|
24
19
|
|
|
25
20
|
export { LoadingAndErrorComponent, type LoadingAndErrorComponentProps };
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
var __create = Object.create;
|
|
2
1
|
var __defProp = Object.defineProperty;
|
|
3
2
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
3
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
6
4
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
5
|
var __export = (target, all) => {
|
|
8
6
|
for (var name in all)
|
|
@@ -16,14 +14,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
16
14
|
}
|
|
17
15
|
return to;
|
|
18
16
|
};
|
|
19
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
20
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
21
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
22
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
23
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
24
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
25
|
-
mod
|
|
26
|
-
));
|
|
27
17
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
28
18
|
|
|
29
19
|
// src/components/loading-states/LoadingAndErrorComponent.tsx
|
|
@@ -32,336 +22,29 @@ __export(LoadingAndErrorComponent_exports, {
|
|
|
32
22
|
LoadingAndErrorComponent: () => LoadingAndErrorComponent
|
|
33
23
|
});
|
|
34
24
|
module.exports = __toCommonJS(LoadingAndErrorComponent_exports);
|
|
35
|
-
var import_react3 = require("react");
|
|
36
|
-
|
|
37
|
-
// src/localization/LanguageProvider.tsx
|
|
38
|
-
var import_react2 = require("react");
|
|
39
|
-
|
|
40
|
-
// src/hooks/useLocalStorage.ts
|
|
41
25
|
var import_react = require("react");
|
|
42
26
|
|
|
43
|
-
// src/
|
|
44
|
-
var languages = ["en", "de"];
|
|
45
|
-
var languagesLocalNames = {
|
|
46
|
-
en: "English",
|
|
47
|
-
de: "Deutsch"
|
|
48
|
-
};
|
|
49
|
-
var DEFAULT_LANGUAGE = "en";
|
|
50
|
-
var LanguageUtil = {
|
|
51
|
-
languages,
|
|
52
|
-
DEFAULT_LANGUAGE,
|
|
53
|
-
languagesLocalNames
|
|
54
|
-
};
|
|
55
|
-
|
|
56
|
-
// src/localization/LanguageProvider.tsx
|
|
57
|
-
var import_jsx_runtime = require("react/jsx-runtime");
|
|
58
|
-
var LanguageContext = (0, import_react2.createContext)({
|
|
59
|
-
language: LanguageUtil.DEFAULT_LANGUAGE,
|
|
60
|
-
setLanguage: (v) => v
|
|
61
|
-
});
|
|
62
|
-
var useLanguage = () => (0, import_react2.useContext)(LanguageContext);
|
|
63
|
-
|
|
64
|
-
// src/localization/useTranslation.ts
|
|
65
|
-
var TranslationPluralCount = {
|
|
66
|
-
zero: 0,
|
|
67
|
-
one: 1,
|
|
68
|
-
two: 2,
|
|
69
|
-
few: 3,
|
|
70
|
-
many: 11,
|
|
71
|
-
other: -1
|
|
72
|
-
};
|
|
73
|
-
var useTranslation = (translations, overwriteTranslation = {}) => {
|
|
74
|
-
const { language: languageProp, translation: overwrite } = overwriteTranslation;
|
|
75
|
-
const { language: inferredLanguage } = useLanguage();
|
|
76
|
-
const usedLanguage = languageProp ?? inferredLanguage;
|
|
77
|
-
const usedTranslations = [...translations];
|
|
78
|
-
if (overwrite) {
|
|
79
|
-
usedTranslations.push(overwrite);
|
|
80
|
-
}
|
|
81
|
-
return (key, options) => {
|
|
82
|
-
const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options };
|
|
83
|
-
try {
|
|
84
|
-
for (let i = translations.length - 1; i >= 0; i--) {
|
|
85
|
-
const translation = translations[i];
|
|
86
|
-
const localizedTranslation = translation[usedLanguage];
|
|
87
|
-
if (!localizedTranslation) {
|
|
88
|
-
continue;
|
|
89
|
-
}
|
|
90
|
-
const value = localizedTranslation[key];
|
|
91
|
-
if (!value) {
|
|
92
|
-
continue;
|
|
93
|
-
}
|
|
94
|
-
let forProcessing;
|
|
95
|
-
if (typeof value !== "string") {
|
|
96
|
-
if (count === TranslationPluralCount.zero && value?.zero) {
|
|
97
|
-
forProcessing = value.zero;
|
|
98
|
-
} else if (count === TranslationPluralCount.one && value?.one) {
|
|
99
|
-
forProcessing = value.one;
|
|
100
|
-
} else if (count === TranslationPluralCount.two && value?.two) {
|
|
101
|
-
forProcessing = value.two;
|
|
102
|
-
} else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {
|
|
103
|
-
forProcessing = value.few;
|
|
104
|
-
} else if (count > TranslationPluralCount.many && value?.many) {
|
|
105
|
-
forProcessing = value.many;
|
|
106
|
-
} else {
|
|
107
|
-
forProcessing = value.other;
|
|
108
|
-
}
|
|
109
|
-
} else {
|
|
110
|
-
forProcessing = value;
|
|
111
|
-
}
|
|
112
|
-
forProcessing = forProcessing.replace(/\{\{(\w+)}}/g, (_, placeholder) => {
|
|
113
|
-
return replacements[placeholder] ?? `{{key:${placeholder}}}`;
|
|
114
|
-
});
|
|
115
|
-
return forProcessing;
|
|
116
|
-
}
|
|
117
|
-
} catch (e) {
|
|
118
|
-
console.error(e);
|
|
119
|
-
}
|
|
120
|
-
return `{{${usedLanguage}:${key}}}`;
|
|
121
|
-
};
|
|
122
|
-
};
|
|
123
|
-
|
|
124
|
-
// src/components/loading-states/LoadingAnimation.tsx
|
|
125
|
-
var import_clsx2 = __toESM(require("clsx"));
|
|
126
|
-
|
|
127
|
-
// src/components/icons-and-geometry/Helpwave.tsx
|
|
27
|
+
// src/components/loading-states/LoadingContainer.tsx
|
|
128
28
|
var import_clsx = require("clsx");
|
|
129
|
-
var
|
|
130
|
-
var
|
|
131
|
-
|
|
132
|
-
animate = "none",
|
|
133
|
-
size = 64,
|
|
134
|
-
...props
|
|
135
|
-
}) => {
|
|
136
|
-
const isLoadingAnimation = animate === "loading";
|
|
137
|
-
let svgAnimationKey = "";
|
|
138
|
-
if (animate === "pulse") {
|
|
139
|
-
svgAnimationKey = "animate-pulse";
|
|
140
|
-
} else if (animate === "bounce") {
|
|
141
|
-
svgAnimationKey = "animate-bounce";
|
|
142
|
-
}
|
|
143
|
-
if (size < 0) {
|
|
144
|
-
console.error("size cannot be less than 0");
|
|
145
|
-
size = 64;
|
|
146
|
-
}
|
|
147
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
148
|
-
"svg",
|
|
149
|
-
{
|
|
150
|
-
width: size,
|
|
151
|
-
height: size,
|
|
152
|
-
viewBox: "0 0 888 888",
|
|
153
|
-
fill: "none",
|
|
154
|
-
strokeLinecap: "round",
|
|
155
|
-
strokeWidth: 48,
|
|
156
|
-
...props,
|
|
157
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { className: (0, import_clsx.clsx)(svgAnimationKey), children: [
|
|
158
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
159
|
-
"path",
|
|
160
|
-
{
|
|
161
|
-
className: (0, import_clsx.clsx)({ "animate-wave-big-left-up": isLoadingAnimation }),
|
|
162
|
-
d: "M144 543.235C144 423.259 232.164 326 340.92 326",
|
|
163
|
-
stroke: color,
|
|
164
|
-
strokeDasharray: "1000"
|
|
165
|
-
}
|
|
166
|
-
),
|
|
167
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
168
|
-
"path",
|
|
169
|
-
{
|
|
170
|
-
className: (0, import_clsx.clsx)({ "animate-wave-big-right-down": isLoadingAnimation }),
|
|
171
|
-
d: "M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869",
|
|
172
|
-
stroke: color,
|
|
173
|
-
strokeDasharray: "1000"
|
|
174
|
-
}
|
|
175
|
-
),
|
|
176
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
177
|
-
"path",
|
|
178
|
-
{
|
|
179
|
-
className: (0, import_clsx.clsx)({ "animate-wave-small-left-up": isLoadingAnimation }),
|
|
180
|
-
d: "M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495",
|
|
181
|
-
stroke: color,
|
|
182
|
-
strokeDasharray: "1000"
|
|
183
|
-
}
|
|
184
|
-
),
|
|
185
|
-
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
186
|
-
"path",
|
|
187
|
-
{
|
|
188
|
-
className: (0, import_clsx.clsx)({ "animate-wave-small-right-down": isLoadingAnimation }),
|
|
189
|
-
d: "M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233",
|
|
190
|
-
stroke: color,
|
|
191
|
-
strokeDasharray: "1000"
|
|
192
|
-
}
|
|
193
|
-
)
|
|
194
|
-
] })
|
|
195
|
-
}
|
|
196
|
-
);
|
|
197
|
-
};
|
|
198
|
-
|
|
199
|
-
// src/localization/defaults/form.ts
|
|
200
|
-
var formTranslation = {
|
|
201
|
-
en: {
|
|
202
|
-
add: "Add",
|
|
203
|
-
all: "All",
|
|
204
|
-
apply: "Apply",
|
|
205
|
-
back: "Back",
|
|
206
|
-
cancel: "Cancel",
|
|
207
|
-
change: "Change",
|
|
208
|
-
clear: "Clear",
|
|
209
|
-
click: "Click",
|
|
210
|
-
clickToCopy: "Click to Copy",
|
|
211
|
-
close: "Close",
|
|
212
|
-
confirm: "Confirm",
|
|
213
|
-
copy: "Copy",
|
|
214
|
-
copied: "Copied",
|
|
215
|
-
create: "Create",
|
|
216
|
-
decline: "Decline",
|
|
217
|
-
delete: "Delete",
|
|
218
|
-
discard: "Discard",
|
|
219
|
-
discardChanges: "Discard Changes",
|
|
220
|
-
done: "Done",
|
|
221
|
-
edit: "Edit",
|
|
222
|
-
enterText: "Enter text here",
|
|
223
|
-
error: "Error",
|
|
224
|
-
exit: "Exit",
|
|
225
|
-
fieldRequiredError: "This field is required.",
|
|
226
|
-
invalidEmailError: "Please enter a valid email address.",
|
|
227
|
-
less: "Less",
|
|
228
|
-
loading: "Loading",
|
|
229
|
-
maxLengthError: "Maximum length exceeded.",
|
|
230
|
-
minLengthError: "Minimum length not met.",
|
|
231
|
-
more: "More",
|
|
232
|
-
next: "Next",
|
|
233
|
-
no: "No",
|
|
234
|
-
none: "None",
|
|
235
|
-
of: "of",
|
|
236
|
-
optional: "Optional",
|
|
237
|
-
pleaseWait: "Please wait...",
|
|
238
|
-
previous: "Previous",
|
|
239
|
-
remove: "Remove",
|
|
240
|
-
required: "Required",
|
|
241
|
-
reset: "Reset",
|
|
242
|
-
save: "Save",
|
|
243
|
-
saved: "Saved",
|
|
244
|
-
search: "Search",
|
|
245
|
-
select: "Select",
|
|
246
|
-
selectOption: "Select an option",
|
|
247
|
-
show: "Show",
|
|
248
|
-
showMore: "Show more",
|
|
249
|
-
showLess: "Show less",
|
|
250
|
-
submit: "Submit",
|
|
251
|
-
success: "Success",
|
|
252
|
-
update: "Update",
|
|
253
|
-
unsavedChanges: "Unsaved Changes",
|
|
254
|
-
unsavedChangesSaveQuestion: "Do you want to save your changes?",
|
|
255
|
-
yes: "Yes"
|
|
256
|
-
},
|
|
257
|
-
de: {
|
|
258
|
-
add: "Hinzuf\xFCgen",
|
|
259
|
-
all: "Alle",
|
|
260
|
-
apply: "Anwenden",
|
|
261
|
-
back: "Zur\xFCck",
|
|
262
|
-
cancel: "Abbrechen",
|
|
263
|
-
change: "\xC4ndern",
|
|
264
|
-
clear: "L\xF6schen",
|
|
265
|
-
click: "Klicken",
|
|
266
|
-
clickToCopy: "Zum kopieren klicken",
|
|
267
|
-
close: "Schlie\xDFen",
|
|
268
|
-
confirm: "Best\xE4tigen",
|
|
269
|
-
copy: "Kopieren",
|
|
270
|
-
copied: "Kopiert",
|
|
271
|
-
create: "Erstellen",
|
|
272
|
-
decline: "Ablehnen",
|
|
273
|
-
delete: "L\xF6schen",
|
|
274
|
-
discard: "Verwerfen",
|
|
275
|
-
discardChanges: "\xC4nderungen Verwerfen",
|
|
276
|
-
done: "Fertig",
|
|
277
|
-
edit: "Bearbeiten",
|
|
278
|
-
enterText: "Text hier eingeben",
|
|
279
|
-
error: "Fehler",
|
|
280
|
-
exit: "Beenden",
|
|
281
|
-
fieldRequiredError: "Dieses Feld ist erforderlich.",
|
|
282
|
-
invalidEmailError: "Bitte geben Sie eine g\xFCltige E-Mail-Adresse ein.",
|
|
283
|
-
less: "Weniger",
|
|
284
|
-
loading: "L\xE4dt",
|
|
285
|
-
maxLengthError: "Maximale L\xE4nge \xFCberschritten.",
|
|
286
|
-
minLengthError: "Mindestl\xE4nge nicht erreicht.",
|
|
287
|
-
more: "Mehr",
|
|
288
|
-
next: "Weiter",
|
|
289
|
-
no: "Nein",
|
|
290
|
-
none: "Nichts",
|
|
291
|
-
of: "von",
|
|
292
|
-
optional: "Optional",
|
|
293
|
-
pleaseWait: "Bitte warten...",
|
|
294
|
-
previous: "Vorherige",
|
|
295
|
-
remove: "Entfernen",
|
|
296
|
-
required: "Erforderlich",
|
|
297
|
-
reset: "Zur\xFCcksetzen",
|
|
298
|
-
save: "Speichern",
|
|
299
|
-
saved: "Gespeichert",
|
|
300
|
-
search: "Suche",
|
|
301
|
-
select: "Select",
|
|
302
|
-
selectOption: "Option ausw\xE4hlen",
|
|
303
|
-
show: "Anzeigen",
|
|
304
|
-
showMore: "Mehr anzeigen",
|
|
305
|
-
showLess: "Weniger anzeigen",
|
|
306
|
-
submit: "Abschicken",
|
|
307
|
-
success: "Erfolg",
|
|
308
|
-
update: "Update",
|
|
309
|
-
unsavedChanges: "Ungespeicherte \xC4nderungen",
|
|
310
|
-
unsavedChangesSaveQuestion: "M\xF6chtest du die \xC4nderungen speichern?",
|
|
311
|
-
yes: "Ja"
|
|
312
|
-
}
|
|
313
|
-
};
|
|
314
|
-
|
|
315
|
-
// src/components/loading-states/LoadingAnimation.tsx
|
|
316
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
317
|
-
var LoadingAnimation = ({
|
|
318
|
-
overwriteTranslation,
|
|
319
|
-
loadingText,
|
|
320
|
-
classname
|
|
321
|
-
}) => {
|
|
322
|
-
const translation = useTranslation([formTranslation], overwriteTranslation);
|
|
323
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: (0, import_clsx2.default)("flex-col-2 items-center justify-center w-full h-24", classname), children: [
|
|
324
|
-
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Helpwave, { animate: "loading" }),
|
|
325
|
-
loadingText ?? `${translation("loading")}...`
|
|
326
|
-
] });
|
|
327
|
-
};
|
|
328
|
-
|
|
329
|
-
// src/components/loading-states/ErrorComponent.tsx
|
|
330
|
-
var import_lucide_react = require("lucide-react");
|
|
331
|
-
var import_clsx3 = __toESM(require("clsx"));
|
|
332
|
-
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
333
|
-
var defaultErrorComponentTranslation = {
|
|
334
|
-
en: {
|
|
335
|
-
errorOccurred: "An error occurred"
|
|
336
|
-
},
|
|
337
|
-
de: {
|
|
338
|
-
errorOccurred: "Ein Fehler ist aufgetreten"
|
|
339
|
-
}
|
|
340
|
-
};
|
|
341
|
-
var ErrorComponent = ({
|
|
342
|
-
overwriteTranslation,
|
|
343
|
-
errorText,
|
|
344
|
-
classname
|
|
345
|
-
}) => {
|
|
346
|
-
const translation = useTranslation([defaultErrorComponentTranslation], overwriteTranslation);
|
|
347
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: (0, import_clsx3.default)("flex-col-4 items-center justify-center w-full h-24", classname), children: [
|
|
348
|
-
/* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react.AlertOctagon, { size: 64, className: "text-warning" }),
|
|
349
|
-
errorText ?? `${translation("errorOccurred")} :(`
|
|
350
|
-
] });
|
|
29
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
30
|
+
var LoadingContainer = ({ className }) => {
|
|
31
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.clsx)("relative overflow-hidden shimmer bg-disabled-background rounded-md", className) });
|
|
351
32
|
};
|
|
352
33
|
|
|
353
34
|
// src/components/loading-states/LoadingAndErrorComponent.tsx
|
|
354
|
-
var
|
|
35
|
+
var import_clsx2 = require("clsx");
|
|
36
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
355
37
|
var LoadingAndErrorComponent = ({
|
|
356
38
|
children,
|
|
357
39
|
isLoading = false,
|
|
358
40
|
hasError = false,
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
minimumLoadingDuration
|
|
41
|
+
loadingComponent,
|
|
42
|
+
errorComponent,
|
|
43
|
+
minimumLoadingDuration,
|
|
44
|
+
className
|
|
362
45
|
}) => {
|
|
363
|
-
const [isInMinimumLoading, setIsInMinimumLoading] = (0,
|
|
364
|
-
const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0,
|
|
46
|
+
const [isInMinimumLoading, setIsInMinimumLoading] = (0, import_react.useState)(false);
|
|
47
|
+
const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = (0, import_react.useState)(false);
|
|
365
48
|
if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {
|
|
366
49
|
setIsInMinimumLoading(true);
|
|
367
50
|
setTimeout(() => {
|
|
@@ -370,10 +53,10 @@ var LoadingAndErrorComponent = ({
|
|
|
370
53
|
}, minimumLoadingDuration);
|
|
371
54
|
}
|
|
372
55
|
if (isLoading || minimumLoadingDuration && isInMinimumLoading) {
|
|
373
|
-
return /* @__PURE__ */ (0,
|
|
56
|
+
return loadingComponent ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingContainer, { className: (0, import_clsx2.clsx)(className) });
|
|
374
57
|
}
|
|
375
58
|
if (hasError) {
|
|
376
|
-
return /* @__PURE__ */ (0,
|
|
59
|
+
return errorComponent ?? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LoadingContainer, { className: (0, import_clsx2.clsx)("bg-negative", className) });
|
|
377
60
|
}
|
|
378
61
|
return children;
|
|
379
62
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/loading-states/LoadingAndErrorComponent.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/loading-states/LoadingAnimation.tsx","../../../src/components/icons-and-geometry/Helpwave.tsx","../../../src/localization/defaults/form.ts","../../../src/components/loading-states/ErrorComponent.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport { useState } from 'react'\nimport type { LoadingAnimationProps } from './LoadingAnimation'\nimport { LoadingAnimation } from './LoadingAnimation'\nimport type { ErrorComponentProps } from './ErrorComponent'\nimport { ErrorComponent } from './ErrorComponent'\n\nexport type LoadingAndErrorComponentProps = PropsWithChildren<{\n isLoading?: boolean,\n hasError?: boolean,\n loadingProps?: LoadingAnimationProps,\n errorProps?: ErrorComponentProps,\n /**\n * in milliseconds\n */\n minimumLoadingDuration?: number,\n}>\n\n/**\n * A Component that shows the Error and Loading animation, when appropriate and the children otherwise\n */\nexport const LoadingAndErrorComponent = ({\n children,\n isLoading = false,\n hasError = false,\n errorProps,\n loadingProps,\n minimumLoadingDuration\n }: LoadingAndErrorComponentProps) => {\n const [isInMinimumLoading, setIsInMinimumLoading] = useState(false)\n const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false)\n if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {\n setIsInMinimumLoading(true)\n setTimeout(() => {\n setIsInMinimumLoading(false)\n setHasUsedMinimumLoading(true)\n }, minimumLoadingDuration)\n }\n\n if (isLoading || (minimumLoadingDuration && isInMinimumLoading)) {\n return <LoadingAnimation {...loadingProps}/>\n }\n if (hasError) {\n return <ErrorComponent {...errorProps}/>\n }\n return children\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test || language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value || initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/**\n * The supported languages\n */\nconst languages = ['en', 'de'] as const\n\n/**\n * The supported languages\n */\nexport type Language = typeof languages[number]\n\n/**\n * The supported languages' names in their respective language\n */\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/**\n * The default language\n */\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/**\n * A constant definition for holding data regarding languages\n */\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\n/**\n * A type describing the pluralization of a word\n */\nexport type TranslationPlural = {\n zero?: string,\n one?: string,\n two?: string,\n few?: string,\n many?: string,\n other: string,\n}\n\n/**\n * The type describing all values of a translation\n */\nexport type TranslationType = Record<string, string | TranslationPlural>\n\n/**\n * The type of translations\n */\nexport type Translation<T extends TranslationType> = Record<Language, T>\n\ntype OverwriteTranslationType<T extends TranslationType> = {\n language?: Language,\n translation?: Translation<Partial<T>>,\n}\n\n/**\n * Adds the `language` prop to the component props.\n *\n * @param Translation the type of the translation object\n *\n * @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n */\nexport type PropsForTranslation<\n Translation extends TranslationType,\n Props = unknown\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n}\n\ntype StringKeys<T> = Extract<keyof T, string>;\n\ntype TranslationFunctionOptions = {\n replacements?: Record<string, string>,\n count?: number,\n}\ntype TranslationFunction<T extends TranslationType> = (key: StringKeys<T>, options?: TranslationFunctionOptions) => string\n\nexport const TranslationPluralCount = {\n zero: 0,\n one: 1,\n two: 2,\n few: 3,\n many: 11,\n other: -1,\n}\n\n\nexport const useTranslation = <T extends TranslationType>(\n translations: Translation<Partial<TranslationType>>[],\n overwriteTranslation: OverwriteTranslationType<T> = {}\n): TranslationFunction<T> => {\n const { language: languageProp, translation: overwrite } = overwriteTranslation\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n const usedTranslations = [...translations]\n if (overwrite) {\n usedTranslations.push(overwrite)\n }\n\n return (key: StringKeys<T>, options?: TranslationFunctionOptions): string => {\n const { count, replacements } = { ...{ count: 0, replacements: {} }, ...options }\n\n try {\n for (let i = translations.length - 1; i >= 0; i--) {\n const translation = translations[i]\n const localizedTranslation = translation[usedLanguage]\n if (!localizedTranslation) {\n continue\n }\n const value = localizedTranslation[key]\n if(!value) {\n continue\n }\n\n let forProcessing: string\n if (typeof value !== 'string') {\n if (count === TranslationPluralCount.zero && value?.zero) {\n forProcessing = value.zero\n } else if (count === TranslationPluralCount.one && value?.one) {\n forProcessing = value.one\n } else if (count === TranslationPluralCount.two && value?.two) {\n forProcessing = value.two\n } else if (TranslationPluralCount.few <= count && count < TranslationPluralCount.many && value?.few) {\n forProcessing = value.few\n } else if (count > TranslationPluralCount.many && value?.many) {\n forProcessing = value.many\n } else {\n forProcessing = value.other\n }\n } else {\n forProcessing = value\n }\n forProcessing = forProcessing.replace(/\\{\\{(\\w+)}}/g, (_, placeholder) => {\n return replacements[placeholder] ?? `{{key:${placeholder}}}` // fallback if key is missing\n })\n return forProcessing\n }\n } catch (e) {\n console.error(e)\n }\n return `{{${usedLanguage}:${key}}}`\n }\n}","import type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport clsx from 'clsx'\nimport { Helpwave } from '../icons-and-geometry/Helpwave'\nimport type { FormTranslationType } from '../../localization/defaults/form'\nimport { formTranslation } from '../../localization/defaults/form'\n\ntype LoadingAnimationTranslation = FormTranslationType\n\nexport type LoadingAnimationProps = {\n loadingText?: string,\n classname?: string,\n}\n\n/**\n * A Component to show when loading data\n */\nexport const LoadingAnimation = ({\n overwriteTranslation,\n loadingText,\n classname\n }: PropsForTranslation<LoadingAnimationTranslation, LoadingAnimationProps>) => {\n const translation = useTranslation([formTranslation], overwriteTranslation)\n return (\n <div className={clsx('flex-col-2 items-center justify-center w-full h-24', classname)}>\n <Helpwave animate=\"loading\"/>\n {loadingText ?? `${translation('loading')}...`}\n </div>\n )\n}\n","import type { SVGProps } from 'react'\nimport { clsx } from 'clsx'\n\nexport type HelpwaveProps = SVGProps<SVGSVGElement> & {\n color?: string,\n animate?: 'none' | 'loading' | 'pulse' | 'bounce',\n size?: number,\n}\n\n/**\n * The helpwave loading spinner based on the svg logo.\n */\nexport const Helpwave = ({\n color = 'currentColor',\n animate = 'none',\n size = 64,\n ...props\n }: HelpwaveProps) => {\n const isLoadingAnimation = animate === 'loading'\n let svgAnimationKey = ''\n\n if (animate === 'pulse') {\n svgAnimationKey = 'animate-pulse'\n } else if (animate === 'bounce') {\n svgAnimationKey = 'animate-bounce'\n }\n\n if (size < 0) {\n console.error('size cannot be less than 0')\n size = 64\n }\n\n return (\n <svg\n width={size}\n height={size}\n viewBox=\"0 0 888 888\"\n fill=\"none\"\n strokeLinecap=\"round\"\n strokeWidth={48}\n {...props}\n >\n <g className={clsx(svgAnimationKey)}>\n <path className={clsx({ 'animate-wave-big-left-up': isLoadingAnimation })}\n d=\"M144 543.235C144 423.259 232.164 326 340.92 326\" stroke={color} strokeDasharray=\"1000\"/>\n <path className={clsx({ 'animate-wave-big-right-down': isLoadingAnimation })}\n d=\"M537.84 544.104C429.084 544.104 340.92 446.844 340.92 326.869\" stroke={color} strokeDasharray=\"1000\"/>\n <path className={clsx({ 'animate-wave-small-left-up': isLoadingAnimation })}\n d=\"M462.223 518.035C462.223 432.133 525.348 362.495 603.217 362.495\" stroke={color}\n strokeDasharray=\"1000\"/>\n <path className={clsx({ 'animate-wave-small-right-down': isLoadingAnimation })}\n d=\"M745.001 519.773C666.696 519.773 603.218 450.136 603.218 364.233\" stroke={color}\n strokeDasharray=\"1000\"/>\n </g>\n </svg>\n )\n}\n","import type { Translation } from '../useTranslation'\n\nexport type FormTranslationType = {\n add: string,\n all: string,\n apply: string,\n back: string,\n cancel: string,\n change: string,\n clear: string,\n click: string,\n clickToCopy: string,\n close: string,\n confirm: string,\n copy: string,\n copied: string,\n create: string,\n decline: string,\n delete: string,\n discard: string,\n discardChanges: string,\n done: string,\n edit: string,\n enterText: string,\n error: string,\n exit: string,\n fieldRequiredError: string,\n invalidEmailError: string,\n less: string,\n loading: string,\n maxLengthError: string,\n minLengthError: string,\n more: string,\n next: string,\n no: string,\n none: string,\n of: string,\n optional: string,\n pleaseWait: string,\n previous: string,\n remove: string,\n required: string,\n reset: string,\n save: string,\n saved: string,\n search: string,\n select: string,\n selectOption: string,\n show: string,\n showMore: string,\n showLess: string,\n submit: string,\n success: string,\n unsavedChanges: string,\n unsavedChangesSaveQuestion: string,\n update: string,\n yes: string,\n}\n\nexport const formTranslation: Translation<FormTranslationType> = {\n en: {\n add: 'Add',\n all: 'All',\n apply: 'Apply',\n back: 'Back',\n cancel: 'Cancel',\n change: 'Change',\n clear: 'Clear',\n click: 'Click',\n clickToCopy: 'Click to Copy',\n close: 'Close',\n confirm: 'Confirm',\n copy: 'Copy',\n copied: 'Copied',\n create: 'Create',\n decline: 'Decline',\n delete: 'Delete',\n discard: 'Discard',\n discardChanges: 'Discard Changes',\n done: 'Done',\n edit: 'Edit',\n enterText: 'Enter text here',\n error: 'Error',\n exit: 'Exit',\n fieldRequiredError: 'This field is required.',\n invalidEmailError: 'Please enter a valid email address.',\n less: 'Less',\n loading: 'Loading',\n maxLengthError: 'Maximum length exceeded.',\n minLengthError: 'Minimum length not met.',\n more: 'More',\n next: 'Next',\n no: 'No',\n none: 'None',\n of: 'of',\n optional: 'Optional',\n pleaseWait: 'Please wait...',\n previous: 'Previous',\n remove: 'Remove',\n required: 'Required',\n reset: 'Reset',\n save: 'Save',\n saved: 'Saved',\n search: 'Search',\n select: 'Select',\n selectOption: 'Select an option',\n show: 'Show',\n showMore: 'Show more',\n showLess: 'Show less',\n submit: 'Submit',\n success: 'Success',\n update: 'Update',\n unsavedChanges: 'Unsaved Changes',\n unsavedChangesSaveQuestion: 'Do you want to save your changes?',\n yes: 'Yes',\n },\n de: {\n add: 'Hinzufügen',\n all: 'Alle',\n apply: 'Anwenden',\n back: 'Zurück',\n cancel: 'Abbrechen',\n change: 'Ändern',\n clear: 'Löschen',\n click: 'Klicken',\n clickToCopy: 'Zum kopieren klicken',\n close: 'Schließen',\n confirm: 'Bestätigen',\n copy: 'Kopieren',\n copied: 'Kopiert',\n create: 'Erstellen',\n decline: 'Ablehnen',\n delete: 'Löschen',\n discard: 'Verwerfen',\n discardChanges: 'Änderungen Verwerfen',\n done: 'Fertig',\n edit: 'Bearbeiten',\n enterText: 'Text hier eingeben',\n error: 'Fehler',\n exit: 'Beenden',\n fieldRequiredError: 'Dieses Feld ist erforderlich.',\n invalidEmailError: 'Bitte geben Sie eine gültige E-Mail-Adresse ein.',\n less: 'Weniger',\n loading: 'Lädt',\n maxLengthError: 'Maximale Länge überschritten.',\n minLengthError: 'Mindestlänge nicht erreicht.',\n more: 'Mehr',\n next: 'Weiter',\n no: 'Nein',\n none: 'Nichts',\n of: 'von',\n optional: 'Optional',\n pleaseWait: 'Bitte warten...',\n previous: 'Vorherige',\n remove: 'Entfernen',\n required: 'Erforderlich',\n reset: 'Zurücksetzen',\n save: 'Speichern',\n saved: 'Gespeichert',\n search: 'Suche',\n select: 'Select',\n selectOption: 'Option auswählen',\n show: 'Anzeigen',\n showMore: 'Mehr anzeigen',\n showLess: 'Weniger anzeigen',\n submit: 'Abschicken',\n success: 'Erfolg',\n update: 'Update',\n unsavedChanges: 'Ungespeicherte Änderungen',\n unsavedChangesSaveQuestion: 'Möchtest du die Änderungen speichern?',\n yes: 'Ja',\n }\n}\n","import { AlertOctagon } from 'lucide-react'\nimport type { PropsForTranslation, Translation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport clsx from 'clsx'\n\ntype ErrorComponentTranslation = {\n errorOccurred: string,\n}\n\nconst defaultErrorComponentTranslation: Translation<ErrorComponentTranslation> = {\n en: {\n errorOccurred: 'An error occurred'\n },\n de: {\n errorOccurred: 'Ein Fehler ist aufgetreten'\n }\n}\n\nexport type ErrorComponentProps = {\n errorText?: string,\n classname?: string,\n}\n\n/**\n * The Component to show when an error occurred\n */\nexport const ErrorComponent = ({\n overwriteTranslation,\n errorText,\n classname\n }: PropsForTranslation<ErrorComponentTranslation, ErrorComponentProps>) => {\n const translation = useTranslation([defaultErrorComponentTranslation], overwriteTranslation)\n return (\n <div className={clsx('flex-col-4 items-center justify-center w-full h-24', classname)}>\n <AlertOctagon size={64} className=\"text-warning\"/>\n {errorText ?? `${translation('errorOccurred')} :(`}\n </div>\n )\n}\n"],"mappings":"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","names":["import_react","import_react","import_clsx","import_jsx_runtime","import_jsx_runtime","clsx","import_clsx","import_jsx_runtime","clsx","import_jsx_runtime"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/loading-states/LoadingAndErrorComponent.tsx","../../../src/components/loading-states/LoadingContainer.tsx"],"sourcesContent":["import type { PropsWithChildren, ReactNode } from 'react'\nimport { useState } from 'react'\nimport { LoadingContainer } from './LoadingContainer'\nimport { clsx } from 'clsx'\n\nexport type LoadingAndErrorComponentProps = PropsWithChildren<{\n isLoading?: boolean,\n hasError?: boolean,\n loadingComponent?: ReactNode,\n errorComponent?: ReactNode,\n /**\n * in milliseconds\n */\n minimumLoadingDuration?: number,\n className?: string,\n}>\n\n/**\n * A Component that shows the Error and Loading animation, when appropriate and the children otherwise\n */\nexport const LoadingAndErrorComponent = ({\n children,\n isLoading = false,\n hasError = false,\n loadingComponent,\n errorComponent,\n minimumLoadingDuration,\n className\n }: LoadingAndErrorComponentProps) => {\n const [isInMinimumLoading, setIsInMinimumLoading] = useState(false)\n const [hasUsedMinimumLoading, setHasUsedMinimumLoading] = useState(false)\n if (minimumLoadingDuration && !isInMinimumLoading && !hasUsedMinimumLoading) {\n setIsInMinimumLoading(true)\n setTimeout(() => {\n setIsInMinimumLoading(false)\n setHasUsedMinimumLoading(true)\n }, minimumLoadingDuration)\n }\n\n if (isLoading || (minimumLoadingDuration && isInMinimumLoading)) {\n return (loadingComponent ?? <LoadingContainer className={clsx(className)}/>)\n }\n if (hasError) {\n return (errorComponent ?? <LoadingContainer className={clsx('bg-negative', className)}/>)\n }\n return children\n}\n","import { clsx } from 'clsx'\n\nexport type LoadingComponentProps = {\n className?: string,\n}\n\nexport const LoadingContainer = ({ className }: LoadingComponentProps) => {\n return (\n <div className={clsx('relative overflow-hidden shimmer bg-disabled-background rounded-md', className)}/>\n )\n}"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,mBAAyB;;;ACDzB,kBAAqB;AAQjB;AAFG,IAAM,mBAAmB,CAAC,EAAE,UAAU,MAA6B;AACxE,SACE,4CAAC,SAAI,eAAW,kBAAK,sEAAsE,SAAS,GAAE;AAE1G;;;ADPA,IAAAA,eAAqB;AAqCW,IAAAC,sBAAA;AApBzB,IAAM,2BAA2B,CAAC;AAAA,EACE;AAAA,EACA,YAAY;AAAA,EACZ,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AAC5E,QAAM,CAAC,oBAAoB,qBAAqB,QAAI,uBAAS,KAAK;AAClE,QAAM,CAAC,uBAAuB,wBAAwB,QAAI,uBAAS,KAAK;AACxE,MAAI,0BAA0B,CAAC,sBAAsB,CAAC,uBAAuB;AAC3E,0BAAsB,IAAI;AAC1B,eAAW,MAAM;AACf,4BAAsB,KAAK;AAC3B,+BAAyB,IAAI;AAAA,IAC/B,GAAG,sBAAsB;AAAA,EAC3B;AAEA,MAAI,aAAc,0BAA0B,oBAAqB;AAC/D,WAAQ,oBAAoB,6CAAC,oBAAiB,eAAW,mBAAK,SAAS,GAAE;AAAA,EAC3E;AACA,MAAI,UAAU;AACZ,WAAQ,kBAAkB,6CAAC,oBAAiB,eAAW,mBAAK,eAAe,SAAS,GAAE;AAAA,EACxF;AACA,SAAO;AACT;","names":["import_clsx","import_jsx_runtime"]}
|