math-main-components 0.0.44 → 0.0.45

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 +26 -24
  7. package/dist/index.esm.js +26 -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,9 @@ 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 id = event.currentTarget.id;
141
+ if (["dialog-backdrop", "cancel-button"].includes(id)) {
140
142
  if (onClose)
141
143
  onClose(event, data?.data);
142
144
  }
@@ -197,7 +199,7 @@ function InputMail({ placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", n
197
199
  const [value, setValue] = React.useState("");
198
200
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
199
201
  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) }),
202
+ 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
203
  React__default["default"].createElement("label", { htmlFor: "text", className: styles$i.label },
202
204
  React__default["default"].createElement("span", { className: styles$i.label_text }, title)))));
203
205
  }
@@ -210,12 +212,12 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
210
212
  const [value1, setValue1] = React.useState(defaultValue.firstName ? defaultValue.firstName : "");
211
213
  const [value2, setValue2] = React.useState(defaultValue.lastName ? defaultValue.lastName : "");
212
214
  function onInput1(event) {
213
- setValue1(event.currentTarget.value);
215
+ setValue1(event.target.value);
214
216
  onInputFirstName(event);
215
217
  onInput("firstName", event);
216
218
  }
217
219
  function onInput2(event) {
218
- setValue2(event.currentTarget.value);
220
+ setValue2(event.target.value);
219
221
  onInputLastName(event);
220
222
  onInput("lastName", event);
221
223
  }
@@ -243,7 +245,7 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
243
245
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
244
246
  React__default["default"].createElement("div", { className: styles$g.container, style: { width } },
245
247
  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);
248
+ setValue(event.target.value);
247
249
  onInput(event);
248
250
  } }),
249
251
  React__default["default"].createElement("label", { htmlFor: "text", className: styles$g.label },
@@ -260,7 +262,7 @@ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible =
260
262
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
261
263
  React__default["default"].createElement("div", { className: `${styles$f.container} ${isVisible ? styles$f.visible : styles$f.hidden}`, style: { width: width } },
262
264
  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) }),
265
+ 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
266
  React__default["default"].createElement("label", { htmlFor: "text", className: styles$f.label },
265
267
  React__default["default"].createElement("span", { className: styles$f.label_text }, title)),
266
268
  React__default["default"].createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
@@ -279,7 +281,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
279
281
  fieldRefs.current = [...Array(length)].map((_, i) => fieldRefs.current[i] ?? React.createRef());
280
282
  function onChange(event, position) {
281
283
  const regex = /[0-9]+/;
282
- const value = event.currentTarget.value ? event.currentTarget.value.replace(" ", "") : "";
284
+ const value = event.target.value ? event.target.value.replace(" ", "") : "";
283
285
  if (value == '' || !regex.test(value))
284
286
  return;
285
287
  const digitCountBefore = state[position] == undefined ? 0 : String(state[position]).length;
@@ -324,16 +326,15 @@ function InputPin({ name, length, onFinished = () => { } }) {
324
326
  ref.current.value = "";
325
327
  });
326
328
  }
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
- }
329
+ return (React__default["default"].createElement("div", { className: styles$e.container },
330
+ React__default["default"].createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
331
+ React__default["default"].createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
332
+ if (i == 0) {
334
333
  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"))));
334
+ }
335
+ 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) });
336
+ })),
337
+ React__default["default"].createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
337
338
  }
338
339
 
339
340
  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 +350,9 @@ function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus
349
350
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
350
351
  React__default["default"].createElement("div", { className: styles$d.container, style: { width, marginBottom } },
351
352
  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);
353
+ setValue(event.target.value);
354
+ if (onInput)
355
+ onInput(event);
354
356
  } }),
355
357
  React__default["default"].createElement("label", { htmlFor: "text", className: styles$d.label },
356
358
  React__default["default"].createElement("span", { className: styles$d.label_text }, title)))));
@@ -426,15 +428,15 @@ class RadioOption {
426
428
  function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
427
429
  const [selectedOption, setSelected] = React.useState(selected);
428
430
  function onUpdateSelected(event) {
429
- setSelected(event.currentTarget.value);
431
+ setSelected(event.target.value);
430
432
  if (onClick)
431
433
  onClick(event);
432
434
  }
433
435
  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
436
  selected && selected == option.name ?
435
- React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected, defaultChecked: true })
437
+ React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
436
438
  :
437
- React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected }),
439
+ React__default["default"].createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
438
440
  React__default["default"].createElement("label", { htmlFor: option.name }, option.text)))));
439
441
  }
440
442
 
@@ -505,19 +507,19 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
505
507
  const [searchResults, setSearchResults] = React.useState(results);
506
508
  function onInputChanged(event) {
507
509
  event.preventDefault();
508
- setValue(event.currentTarget.value);
510
+ setValue(event.target.value);
509
511
  updateSearch(event);
510
512
  onInput(event);
511
513
  }
512
514
  function updateSearch(event) {
513
515
  event.preventDefault();
514
- const value = event.currentTarget.value;
516
+ const value = event.target.value;
515
517
  if (value == '' || value == undefined || value == null) {
516
518
  setSearchResults(results);
517
519
  }
518
520
  else {
519
521
  setSearchResults(results.filter((result) => {
520
- return result.title.includes(event.currentTarget.value);
522
+ return result.title.includes(event.target.value);
521
523
  }));
522
524
  }
523
525
  }
package/dist/index.esm.js CHANGED
@@ -128,7 +128,9 @@ 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 id = event.currentTarget.id;
133
+ if (["dialog-backdrop", "cancel-button"].includes(id)) {
132
134
  if (onClose)
133
135
  onClose(event, data?.data);
134
136
  }
@@ -189,7 +191,7 @@ function InputMail({ placeholder = "E-Mail-Adresse", title = "E-Mail-Adresse", n
189
191
  const [value, setValue] = useState("");
190
192
  return (React.createElement(React.Fragment, null,
191
193
  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) }),
194
+ 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
195
  React.createElement("label", { htmlFor: "text", className: styles$i.label },
194
196
  React.createElement("span", { className: styles$i.label_text }, title)))));
195
197
  }
@@ -202,12 +204,12 @@ function InputNames({ width = "100%", placeholder = { firstName: "", lastName: "
202
204
  const [value1, setValue1] = useState(defaultValue.firstName ? defaultValue.firstName : "");
203
205
  const [value2, setValue2] = useState(defaultValue.lastName ? defaultValue.lastName : "");
204
206
  function onInput1(event) {
205
- setValue1(event.currentTarget.value);
207
+ setValue1(event.target.value);
206
208
  onInputFirstName(event);
207
209
  onInput("firstName", event);
208
210
  }
209
211
  function onInput2(event) {
210
- setValue2(event.currentTarget.value);
212
+ setValue2(event.target.value);
211
213
  onInputLastName(event);
212
214
  onInput("lastName", event);
213
215
  }
@@ -235,7 +237,7 @@ function InputNumber({ title, name, placeholder = "", defaultValue = "", autoFoc
235
237
  return (React.createElement(React.Fragment, null,
236
238
  React.createElement("div", { className: styles$g.container, style: { width } },
237
239
  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);
240
+ setValue(event.target.value);
239
241
  onInput(event);
240
242
  } }),
241
243
  React.createElement("label", { htmlFor: "text", className: styles$g.label },
@@ -252,7 +254,7 @@ function InputPassword({ placeholder = "", title = "Passwort", name, isVisible =
252
254
  return (React.createElement(React.Fragment, null,
253
255
  React.createElement("div", { className: `${styles$f.container} ${isVisible ? styles$f.visible : styles$f.hidden}`, style: { width: width } },
254
256
  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) }),
257
+ 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
258
  React.createElement("label", { htmlFor: "text", className: styles$f.label },
257
259
  React.createElement("span", { className: styles$f.label_text }, title)),
258
260
  React.createElement("button", { title: hidePassword ? "Passwort anzeigen" : "Passwort verstecken", className: styles$f.hideButton, onClick: () => setHidePassword(!hidePassword), type: "button" },
@@ -271,7 +273,7 @@ function InputPin({ name, length, onFinished = () => { } }) {
271
273
  fieldRefs.current = [...Array(length)].map((_, i) => fieldRefs.current[i] ?? createRef());
272
274
  function onChange(event, position) {
273
275
  const regex = /[0-9]+/;
274
- const value = event.currentTarget.value ? event.currentTarget.value.replace(" ", "") : "";
276
+ const value = event.target.value ? event.target.value.replace(" ", "") : "";
275
277
  if (value == '' || !regex.test(value))
276
278
  return;
277
279
  const digitCountBefore = state[position] == undefined ? 0 : String(state[position]).length;
@@ -316,16 +318,15 @@ function InputPin({ name, length, onFinished = () => { } }) {
316
318
  ref.current.value = "";
317
319
  });
318
320
  }
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
- }
321
+ return (React.createElement("div", { className: styles$e.container },
322
+ React.createElement("input", { name: name, type: "hidden", defaultValue: Object.values(state).join("") }),
323
+ React.createElement("div", { className: styles$e.input_wrapper }, [...Array(length)].map((value, i) => {
324
+ if (i == 0) {
326
325
  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"))));
326
+ }
327
+ 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) });
328
+ })),
329
+ React.createElement("button", { type: "button", onClick: resetValues }, "Zur\u00FCcksetzen")));
329
330
  }
330
331
 
331
332
  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 +342,9 @@ function InputText({ title, name, placeholder = "", defaultValue = "", autoFocus
341
342
  return (React.createElement(React.Fragment, null,
342
343
  React.createElement("div", { className: styles$d.container, style: { width, marginBottom } },
343
344
  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);
345
+ setValue(event.target.value);
346
+ if (onInput)
347
+ onInput(event);
346
348
  } }),
347
349
  React.createElement("label", { htmlFor: "text", className: styles$d.label },
348
350
  React.createElement("span", { className: styles$d.label_text }, title)))));
@@ -418,15 +420,15 @@ class RadioOption {
418
420
  function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
419
421
  const [selectedOption, setSelected] = useState(selected);
420
422
  function onUpdateSelected(event) {
421
- setSelected(event.currentTarget.value);
423
+ setSelected(event.target.value);
422
424
  if (onClick)
423
425
  onClick(event);
424
426
  }
425
427
  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
428
  selected && selected == option.name ?
427
- React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected, defaultChecked: true })
429
+ React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected, defaultChecked: true })
428
430
  :
429
- React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onClick: onUpdateSelected }),
431
+ React.createElement("input", { type: "radio", id: option.name, name: group, value: option.name, onInput: onUpdateSelected }),
430
432
  React.createElement("label", { htmlFor: option.name }, option.text)))));
431
433
  }
432
434
 
@@ -497,19 +499,19 @@ function Searchbar({ placeholder, title = "Suchen", showNoResults = false, error
497
499
  const [searchResults, setSearchResults] = useState(results);
498
500
  function onInputChanged(event) {
499
501
  event.preventDefault();
500
- setValue(event.currentTarget.value);
502
+ setValue(event.target.value);
501
503
  updateSearch(event);
502
504
  onInput(event);
503
505
  }
504
506
  function updateSearch(event) {
505
507
  event.preventDefault();
506
- const value = event.currentTarget.value;
508
+ const value = event.target.value;
507
509
  if (value == '' || value == undefined || value == null) {
508
510
  setSearchResults(results);
509
511
  }
510
512
  else {
511
513
  setSearchResults(results.filter((result) => {
512
- return result.title.includes(event.currentTarget.value);
514
+ return result.title.includes(event.target.value);
513
515
  }));
514
516
  }
515
517
  }
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.45",
4
4
  "author": "Emilian Scheel",
5
5
  "files": [
6
6
  "dist/**/*"