math-main-components 0.0.44 → 0.0.46

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.
Files changed (8) hide show
  1. package/dist/components/InputNames/InputNames.d.ts +4 -4
  2. package/dist/components/InputNumber/InputNumber.d.ts +2 -2
  3. package/dist/components/InputText/InputText.d.ts +2 -2
  4. package/dist/components/RadioButtons/RadioButtons.d.ts +2 -2
  5. package/dist/components/Searchbar/Searchbar.d.ts +2 -2
  6. package/dist/index.cjs.js +27 -24
  7. package/dist/index.esm.js +27 -24
  8. package/package.json +1 -1
package/dist/components/InputNames/InputNames.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { MouseEvent } from 'react';
1
+ import React, { ChangeEvent } from 'react';
2
2
  export declare function InputNames({ width, placeholder, title, defaultValue, onInput, onInputFirstName, onInputLastName, }: {
3
3
  width?: string;
4
4
  placeholder?: {
@@ -13,7 +13,7 @@ export declare function InputNames({ width, placeholder, title, defaultValue, on
13
13
  firstName?: string;
14
14
  lastName?: string;
15
15
  };
16
- onInput?: (name: string, event: MouseEvent<HTMLInputElement>) => void;
17
- onInputFirstName?: (event: MouseEvent<HTMLInputElement>) => void;
18
- onInputLastName?: (event: MouseEvent<HTMLInputElement>) => void;
16
+ onInput?: (name: string, event: ChangeEvent<HTMLInputElement>) => void;
17
+ onInputFirstName?: (event: ChangeEvent<HTMLInputElement>) => void;
18
+ onInputLastName?: (event: ChangeEvent<HTMLInputElement>) => void;
19
19
  }): React.JSX.Element;
package/dist/components/InputNumber/InputNumber.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { HTMLInputTypeAttribute, MouseEvent } from 'react';
1
+ import React, { ChangeEvent, HTMLInputTypeAttribute } from 'react';
2
2
  export declare function InputNumber({ title, name, placeholder, defaultValue, autoFocus, type, width, available, onInput }: {
3
3
  title: string;
4
4
  name: string;
@@ -8,5 +8,5 @@ export declare function InputNumber({ title, name, placeholder, defaultValue, au
8
8
  type?: HTMLInputTypeAttribute;
9
9
  width?: string;
10
10
  available?: boolean;
11
- onInput?: (event: MouseEvent<HTMLInputElement>) => void;
11
+ onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
12
12
  }): React.JSX.Element;
package/dist/components/InputText/InputText.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { MouseEvent } from 'react';
1
+ import React, { ChangeEvent } from 'react';
2
2
  export declare function InputText({ title, name, placeholder, defaultValue, autoFocus, type, width, marginBottom, available, onInput }: {
3
3
  title: string;
4
4
  name: string;
@@ -9,5 +9,5 @@ export declare function InputText({ title, name, placeholder, defaultValue, auto
9
9
  width?: string;
10
10
  marginBottom?: string;
11
11
  available?: boolean;
12
- onInput?: (event: MouseEvent<HTMLInputElement>) => void;
12
+ onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
13
13
  }): React.JSX.Element;
package/dist/components/RadioButtons/RadioButtons.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { MouseEvent } from 'react';
1
+ import React, { ChangeEvent } from 'react';
2
2
  export declare class RadioOption {
3
3
  text: string;
4
4
  name: string;
@@ -8,6 +8,6 @@ export declare function RadioButtons({ options, group, selected, onClick, width
8
8
  options: RadioOption[];
9
9
  group: string;
10
10
  selected?: string;
11
- onClick?: (event: MouseEvent<HTMLInputElement>) => void;
11
+ onClick?: (event: ChangeEvent<HTMLInputElement>) => void;
12
12
  width?: string;
13
13
  }): React.JSX.Element;
package/dist/components/Searchbar/Searchbar.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React, { MouseEvent } from 'react';
1
+ import React, { ChangeEvent, MouseEvent } from 'react';
2
2
  export declare function Searchbar({ placeholder, title, showNoResults, errorTitle, errorMessage, errorButton, helpTitle, helpMessage, errorAction, onInput, onClickResult, withButton, buttonText, suggestions, autoFocus, results }: {
3
3
  placeholder: string;
4
4
  title?: string;
@@ -9,7 +9,7 @@ export declare function Searchbar({ placeholder, title, showNoResults, errorTitl
9
9
  helpTitle?: string;
10
10
  helpMessage?: string;
11
11
  errorAction?: (event: MouseEvent<HTMLButtonElement>) => void;
12
- onInput?: (event: MouseEvent<HTMLInputElement>) => void;
12
+ onInput?: (event: ChangeEvent<HTMLInputElement>) => void;
13
13
  onClickResult?: (event: MouseEvent<HTMLLIElement>, result: any) => void;
14
14
  withButton?: boolean;
15
15
  buttonText?: string;
package/dist/index.cjs.js CHANGED
@@ -136,7 +136,10 @@ styleInject(css_248z$m);
136
136
 
137
137
  function Dialog({ data, text, onClose, onSubmit, children }) {
138
138
  function onClick(event) {
139
- if (event.currentTarget.id == 'dialog-backdrop' || event.currentTarget.id == 'cancel-button') {
139
+ event.preventDefault();
140
+ const element = event.target;
141
+ const id = element.id;
142
+ if (["dialog-backdrop", "cancel-button"].includes(id)) {
140
143
  if (onClose)
141
144
  onClose(event, data?.data);
142
145
  }
@@ -197,7 +200,7 @@ function InputMail({ placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", n
197
200
  const [value, setValue] = React.useState("");
198
201
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
199
202
  React__default["default"].createElement("div", { className: styles$i.container, style: { width: width } },
200
- React__default["default"].createElement("input", { className: `${styles$i.input} ${title != undefined ? styles$i.with_title : styles$i.without_title} ${value.length > 0 ? styles$i.valid : styles$i.not_valid} ${available ? styles$i.available : styles$i.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.currentTarget.value) }),
203
+ React__default["default"].createElement("input", { className: `${styles$i.input} ${title != undefined ? styles$i.with_title : styles$i.without_title} ${value.length > 0 ? styles$i.valid : styles$i.not_valid} ${available ? styles$i.available : styles$i.not_available}`, name: name, placeholder: placeholder, type: "email", onInput: (event) => setValue(event.target.value) }),
201
204
  React__default["default"].createElement("label", { htmlFor: "text", className: styles$i.label },
202
205
  React__default["default"].createElement("span", { className: styles$i.label_text }, title)))));
203
206
  }
@@ -210,12 +213,12 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
210
213
  const [value1, setValue1] = React.useState(defaultValue.firstName ? defaultValue.firstName : "");
211
214
  const [value2, setValue2] = React.useState(defaultValue.lastName ? defaultValue.lastName : "");
212
215
  function onInput1(event) {
213
- setValue1(event.currentTarget.value);
216
+ setValue1(event.target.value);
214
217
  onInputFirstName(event);
215
218
  onInput("firstName", event);
216
219
  }
217
220
  function onInput2(event) {
218
- setValue2(event.currentTarget.value);
221
+ setValue2(event.target.value);
219
222
  onInputLastName(event);
220
223
  onInput("lastName", event);
221
224
  }
@@ -243,7 +246,7 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
243
246
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
244
247
  React__default["default"].createElement("div", { className: styles$g.container, style: { width } },
245
248
  React__default["default"].createElement("input", { className: `${styles$g.input} ${title != undefined ? styles$g.with_title : styles$g.without_title} ${value.length > 0 || defaultValue.length > 0 ? styles$g.valid : styles$g.not_valid} ${available ? styles$g.available : styles$g.not_available}`, name: name, type: type, placeholder: placeholder, ref: inputElement, defaultValue: defaultValue, onInput: (event) => {
246
- setValue(event.currentTarget.value);
249
+ setValue(event.target.value);
247
250
  onInput(event);
248
251
  } }),
249
252
  React__default["default"].createElement("label", { htmlFor: "text", className: styles$g.label },
@@ -260,7 +263,7 @@ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible =
260
263
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
261
264
  React__default["default"].createElement("div", { className: `${styles$f.container} ${isVisible ? styles$f.visible : styles$f.hidden}`, style: { width: width } },
262
265
  React__default["default"].createElement("div", { className: styles$f.form },
263
- React__default["default"].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.currentTarget.value) }),
266
+ React__default["default"].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) }),
264
267
  React__default["default"].createElement("label", { htmlFor: "text", className: styles$f.label },
265
268
  React__default["default"].createElement("span", { className: styles$f.label_text }, title)),
266
269
  React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
@@ -279,7 +282,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
279
282
  fieldRefs.current = [...Array(length)].map((_, i) => fieldRefs.current[i] ?? React.createRef());
280
283
  function onChange(event, position) {
281
284
  const regex = /[0-9]+/;
282
- const value = event.currentTarget.value ? event.currentTarget.value.replace(" ", "") : "";
285
+ const value = event.target.value ? event.target.value.replace(" ", "") : "";
283
286
  if (value == '' || !regex.test(value))
284
287
  return;
285
288
  const digitCountBefore = state[position] == undefined ? 0 : String(state[position]).length;
@@ -324,16 +327,15 @@ function InputPin({ name, length, onFinished = () => { } }) {
324
327
  ref.current.value = "";
325
328
  });
326
329
  }
327
- return (React__default["default"].createElement(React__default["default"].Fragment, null,
328
- React__default["default"].createElement("div", { className: styles$e.container },
329
- React__default["default"].createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
330
- React__default["default"].createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
331
- if (i == 0) {
332
- return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
333
- }
330
+ return (React__default["default"].createElement("div", { className: styles$e.container },
331
+ React__default["default"].createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
332
+ React__default["default"].createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
333
+ if (i == 0) {
334
334
  return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
335
- })),
336
- React__default["default"].createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen"))));
335
+ }
336
+ return React__default["default"].createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
337
+ })),
338
+ React__default["default"].createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
337
339
  }
338
340
 
339
341
  var css_248z$d = ".styles-module_container__zcXGF {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n}\n\n.styles-module_input__Tpth8 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid #a8a8a8;\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n border-color: #0075FF;\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n border-color: #e50000;\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n position: relative;\n}\n\n.styles-module_label__appHO {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: white;\n color: grey;\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: grey;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: linear-gradient(to bottom, rgba(250, 250, 250, 0.9411764706), hsla(0, 0%, 100%, 0.951));\n color: #0063d4;\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n color: #a8a8a8;\n}";
@@ -349,8 +351,9 @@ function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus
349
351
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
350
352
  React__default["default"].createElement("div", { className: styles$d.container, style: { width, marginBottom } },
351
353
  React__default["default"].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) => {
352
- setValue(event.currentTarget.value);
353
- onInput(event);
354
+ setValue(event.target.value);
355
+ if (onInput)
356
+ onInput(event);
354
357
  } }),
355
358
  React__default["default"].createElement("label", { htmlFor: "text", className: styles$d.label },
356
359
  React__default["default"].createElement("span", { className: styles$d.label_text }, title)))));
@@ -426,15 +429,15 @@ class RadioOption {
426
429
  function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
427
430
  const [selectedOption, setSelected] = React.useState(selected);
428
431
  function onUpdateSelected(event) {
429
- setSelected(event.currentTarget.value);
432
+ setSelected(event.target.value);
430
433
  if (onClick)
431
434
  onClick(event);
432
435
  }
433
436
  return (React__default["default"].createElement("div", { className: styles$8.container, style: { width: width } }, options.map((option) => React__default["default"].createElement("div", { className: styles$8.option, key: option.name },
434
437
  selected && selected == option.name ?
435
- React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected, defaultChecked: true })
438
+ React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
436
439
  :
437
- React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected }),
440
+ React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
438
441
  React__default["default"].createElement("label", { htmlFor: option.name }, option.text)))));
439
442
  }
440
443
 
@@ -505,19 +508,19 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
505
508
  const [searchResults, setSearchResults] = React.useState(results);
506
509
  function onInputChanged(event) {
507
510
  event.preventDefault();
508
- setValue(event.currentTarget.value);
511
+ setValue(event.target.value);
509
512
  updateSearch(event);
510
513
  onInput(event);
511
514
  }
512
515
  function updateSearch(event) {
513
516
  event.preventDefault();
514
- const value = event.currentTarget.value;
517
+ const value = event.target.value;
515
518
  if (value == '' || value == undefined || value == null) {
516
519
  setSearchResults(results);
517
520
  }
518
521
  else {
519
522
  setSearchResults(results.filter((result) => {
520
- return result.title.includes(event.currentTarget.value);
523
+ return result.title.includes(event.target.value);
521
524
  }));
522
525
  }
523
526
  }
package/dist/index.esm.js CHANGED
@@ -128,7 +128,10 @@ styleInject(css_248z$m);
128
128
 
129
129
  function Dialog({ data, text, onClose, onSubmit, children }) {
130
130
  function onClick(event) {
131
- if (event.currentTarget.id == 'dialog-backdrop' || event.currentTarget.id == 'cancel-button') {
131
+ event.preventDefault();
132
+ const element = event.target;
133
+ const id = element.id;
134
+ if (["dialog-backdrop", "cancel-button"].includes(id)) {
132
135
  if (onClose)
133
136
  onClose(event, data?.data);
134
137
  }
@@ -189,7 +192,7 @@ function InputMail({ placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", n
189
192
  const [value, setValue] = useState("");
190
193
  return (React.createElement(React.Fragment, null,
191
194
  React.createElement("div", { className: styles$i.container, style: { width: width } },
192
- 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.currentTarget.value) }),
195
+ 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) }),
193
196
  React.createElement("label", { htmlFor: "text", className: styles$i.label },
194
197
  React.createElement("span", { className: styles$i.label_text }, title)))));
195
198
  }
@@ -202,12 +205,12 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
202
205
  const [value1, setValue1] = useState(defaultValue.firstName ? defaultValue.firstName : "");
203
206
  const [value2, setValue2] = useState(defaultValue.lastName ? defaultValue.lastName : "");
204
207
  function onInput1(event) {
205
- setValue1(event.currentTarget.value);
208
+ setValue1(event.target.value);
206
209
  onInputFirstName(event);
207
210
  onInput("firstName", event);
208
211
  }
209
212
  function onInput2(event) {
210
- setValue2(event.currentTarget.value);
213
+ setValue2(event.target.value);
211
214
  onInputLastName(event);
212
215
  onInput("lastName", event);
213
216
  }
@@ -235,7 +238,7 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
235
238
  return (React.createElement(React.Fragment, null,
236
239
  React.createElement("div", { className: styles$g.container, style: { width } },
237
240
  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) => {
238
- setValue(event.currentTarget.value);
241
+ setValue(event.target.value);
239
242
  onInput(event);
240
243
  } }),
241
244
  React.createElement("label", { htmlFor: "text", className: styles$g.label },
@@ -252,7 +255,7 @@ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible =
252
255
  return (React.createElement(React.Fragment, null,
253
256
  React.createElement("div", { className: `${styles$f.container} ${isVisible ? styles$f.visible : styles$f.hidden}`, style: { width: width } },
254
257
  React.createElement("div", { className: styles$f.form },
255
- 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.currentTarget.value) }),
258
+ 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) }),
256
259
  React.createElement("label", { htmlFor: "text", className: styles$f.label },
257
260
  React.createElement("span", { className: styles$f.label_text }, title)),
258
261
  React.createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
@@ -271,7 +274,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
271
274
  fieldRefs.current = [...Array(length)].map((_, i) => fieldRefs.current[i] ?? createRef());
272
275
  function onChange(event, position) {
273
276
  const regex = /[0-9]+/;
274
- const value = event.currentTarget.value ? event.currentTarget.value.replace(" ", "") : "";
277
+ const value = event.target.value ? event.target.value.replace(" ", "") : "";
275
278
  if (value == '' || !regex.test(value))
276
279
  return;
277
280
  const digitCountBefore = state[position] == undefined ? 0 : String(state[position]).length;
@@ -316,16 +319,15 @@ function InputPin({ name, length, onFinished = () => { } }) {
316
319
  ref.current.value = "";
317
320
  });
318
321
  }
319
- return (React.createElement(React.Fragment, null,
320
- React.createElement("div", { className: styles$e.container },
321
- React.createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
322
- React.createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
323
- if (i == 0) {
324
- 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) });
325
- }
322
+ return (React.createElement("div", { className: styles$e.container },
323
+ React.createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
324
+ React.createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
325
+ if (i == 0) {
326
326
  return React.createElement("input", { key: i, pattern: "[0-9]", value: state[i] ? state[i] : "", ref: fieldRefs.current[i], className: styles$e.input, type: "text", onKeyUp: (event) => onKeyUp(event, i), onInput: (event) => onChange(event, i) });
327
- })),
328
- React.createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen"))));
327
+ }
328
+ 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) });
329
+ })),
330
+ React.createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
329
331
  }
330
332
 
331
333
  var css_248z$d = ".styles-module_container__zcXGF {\n display: flex;\n width: 100%;\n margin-bottom: 20px;\n}\n\n.styles-module_input__Tpth8 {\n padding: 14px 20px;\n font-size: 16px;\n border-radius: 12px;\n border: 1.5px solid #a8a8a8;\n outline: none;\n transition: 0.2s ease;\n flex: 1;\n}\n.styles-module_input__Tpth8:focus, .styles-module_input__Tpth8:active {\n border-color: #0075FF;\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n.styles-module_input__Tpth8.styles-module_not_available__CRXjB, .styles-module_input__Tpth8:invalid {\n border-color: #e50000;\n box-shadow: 0px 0px 3px 3px rgba(255, 0, 0, 0.2509803922);\n}\n\n/* animated title */\n.styles-module_container__zcXGF {\n position: relative;\n}\n\n.styles-module_label__appHO {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__-sKjY {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: white;\n color: grey;\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: grey;\n}\n\n.styles-module_input__Tpth8.styles-module_with_title__L3eGj:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__Tpth8:focus + .styles-module_label__appHO .styles-module_label_text__-sKjY,\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: linear-gradient(to bottom, rgba(250, 250, 250, 0.9411764706), hsla(0, 0%, 100%, 0.951));\n color: #0063d4;\n}\n\n.styles-module_input__Tpth8.styles-module_valid__zWcOz + .styles-module_label__appHO .styles-module_label_text__-sKjY {\n color: #a8a8a8;\n}";
@@ -341,8 +343,9 @@ function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus
341
343
  return (React.createElement(React.Fragment, null,
342
344
  React.createElement("div", { className: styles$d.container, style: { width, marginBottom } },
343
345
  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) => {
344
- setValue(event.currentTarget.value);
345
- onInput(event);
346
+ setValue(event.target.value);
347
+ if (onInput)
348
+ onInput(event);
346
349
  } }),
347
350
  React.createElement("label", { htmlFor: "text", className: styles$d.label },
348
351
  React.createElement("span", { className: styles$d.label_text }, title)))));
@@ -418,15 +421,15 @@ class RadioOption {
418
421
  function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
419
422
  const [selectedOption, setSelected] = useState(selected);
420
423
  function onUpdateSelected(event) {
421
- setSelected(event.currentTarget.value);
424
+ setSelected(event.target.value);
422
425
  if (onClick)
423
426
  onClick(event);
424
427
  }
425
428
  return (React.createElement("div", { className: styles$8.container, style: { width: width } }, options.map((option) => React.createElement("div", { className: styles$8.option, key: option.name },
426
429
  selected && selected == option.name ?
427
- React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected, defaultChecked: true })
430
+ React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
428
431
  :
429
- React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected }),
432
+ React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
430
433
  React.createElement("label", { htmlFor: option.name }, option.text)))));
431
434
  }
432
435
 
@@ -497,19 +500,19 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
497
500
  const [searchResults, setSearchResults] = useState(results);
498
501
  function onInputChanged(event) {
499
502
  event.preventDefault();
500
- setValue(event.currentTarget.value);
503
+ setValue(event.target.value);
501
504
  updateSearch(event);
502
505
  onInput(event);
503
506
  }
504
507
  function updateSearch(event) {
505
508
  event.preventDefault();
506
- const value = event.currentTarget.value;
509
+ const value = event.target.value;
507
510
  if (value == '' || value == undefined || value == null) {
508
511
  setSearchResults(results);
509
512
  }
510
513
  else {
511
514
  setSearchResults(results.filter((result) => {
512
- return result.title.includes(event.currentTarget.value);
515
+ return result.title.includes(event.target.value);
513
516
  }));
514
517
  }
515
518
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "math-main-components",
3
- "version": "0.0.44",
3
+ "version": "0.0.46",
4
4
  "author": "Emilian Scheel",
5
5
  "files": [
6
6
  "dist/**/*"