math-main-components 0.0.41 → 0.0.42

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 (4) hide show
  1. package/dist/components/SearchChips/SearchChips.d.ts +2 -1
  2. package/dist/index.cjs.js +12 -6
  3. package/dist/index.esm.js +12 -6
  4. package/package.json +1 -1
package/dist/components/SearchChips/SearchChips.d.ts CHANGED
@@ -5,7 +5,8 @@ export declare class SearchChip {
5
5
  selected: boolean;
6
6
  constructor(title: string, value: string);
7
7
  }
8
- export declare function SearchChips({ items, onChange }: {
8
+ export declare function SearchChips({ items, onChange, chipsVisible }: {
9
9
  items: SearchChip[];
10
10
  onChange?: (chips: SearchChip[]) => void;
11
+ chipsVisible: number;
11
12
  }): React.JSX.Element;
package/dist/index.cjs.js CHANGED
@@ -463,8 +463,8 @@ function RedirectButton({ type = "forward", onClick }) {
463
463
  React__default["default"].createElement("span", null, "Zur\u00FCck"))));
464
464
  }
465
465
 
466
- var css_248z$6 = ".styles-module_container__VreeH {\n margin-bottom: 20px;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J {\n padding: 10px 18px;\n background: #F0F0F0;\n border-radius: 20px;\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n color: #565656;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n background: #e5e5e5;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n background: #C6D4F8;\n color: #0075FF;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n color: #0075FF;\n}";
467
- var styles$6 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","selected":"styles-module_selected__sArTD"};
466
+ var css_248z$6 = ".styles-module_container__VreeH {\n margin-bottom: 20px;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J,\n.styles-module_container__VreeH .styles-module_show_all__HKn-s {\n padding: 10px 18px;\n background: #F0F0F0;\n border-radius: 20px;\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n color: #565656;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n background: #e5e5e5;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n background: #C6D4F8;\n color: #0075FF;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n color: #0075FF;\n}";
467
+ var styles$6 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","show_all":"styles-module_show_all__HKn-s","selected":"styles-module_selected__sArTD"};
468
468
  styleInject(css_248z$6);
469
469
 
470
470
  class SearchChip {
@@ -476,7 +476,8 @@ class SearchChip {
476
476
  this.value = value;
477
477
  }
478
478
  }
479
- function SearchChips({ items, onChange }) {
479
+ function SearchChips({ items, onChange, chipsVisible = 9 }) {
480
+ const [showAll, setShowAll] = React.useState(false);
480
481
  const [chips, setChips] = React.useState(items);
481
482
  function onClick(item, index) {
482
483
  const newChips = [...chips];
@@ -485,9 +486,14 @@ function SearchChips({ items, onChange }) {
485
486
  if (onChange)
486
487
  onChange(newChips);
487
488
  }
488
- return (React__default["default"].createElement("div", { className: styles$6.container }, chips.map((item, index) => React__default["default"].createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$6.chip, item.selected ? styles$6.selected : styles$6.not_selected].join(" ") },
489
- React__default["default"].createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
490
- item.title))));
489
+ return (React__default["default"].createElement("div", { className: styles$6.container },
490
+ (showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React__default["default"].createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$6.chip, item.selected ? styles$6.selected : styles$6.not_selected].join(" ") },
491
+ React__default["default"].createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
492
+ item.title)),
493
+ showAll ?
494
+ React__default["default"].createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
495
+ :
496
+ React__default["default"].createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen")));
491
497
  }
492
498
 
493
499
  var css_248z$5 = ".styles-module_container__k4Z26 {\n width: 100%;\n display: flex;\n flex-direction: row;\n margin-top: 30px;\n margin-bottom: 25px;\n gap: 10px;\n position: relative;\n}\n.styles-module_container__k4Z26 button {\n background: #BFD5FF;\n padding: 0px 18px;\n border: none;\n font-size: 14px;\n border-radius: 10px;\n cursor: pointer;\n color: #0075FF;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om {\n display: none;\n position: absolute;\n top: 60px;\n background: white;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n width: 100%;\n border-radius: 14px;\n border: 1px solid #C3C3C3;\n z-index: 1000;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-:hover,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om:hover {\n display: block;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n padding: 16px 20px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li:not(:last-child),\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li:not(:last-child) {\n border-bottom: 1px solid #C3C3C3;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X {\n padding: 35px 0px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X h3,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X h3 {\n margin: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p {\n color: grey;\n padding: 0px 30px;\n line-height: 1.5;\n text-align: center;\n margin-bottom: 10px;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n display: flex;\n flex-direction: row;\n padding: 10px 20px;\n align-items: center;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li span {\n flex: 1;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om button {\n padding: 10px 16px;\n}\n\n.styles-module_input__wOJmG {\n padding: 14px 20px;\n font-size: 16px;\n width: 300px;\n border-radius: 12px;\n border: 1.5px solid #a8a8a8;\n outline: none;\n transition: 0.2s ease;\n width: 100%;\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG:active {\n border-color: #0075FF;\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_suggestions_container__pceQ-,\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_results_container__OY4Om {\n display: block;\n}\n\n/* animated text field */\n.styles-module_form__mWTCu {\n position: relative;\n width: 100%;\n}\n\n.styles-module_label__A41g9 {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__NQHTC {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: white;\n color: grey;\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: grey;\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__wOJmG:focus + .styles-module_label__A41g9 .styles-module_label_text__NQHTC,\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: 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__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n color: #a8a8a8;\n}";
package/dist/index.esm.js CHANGED
@@ -455,8 +455,8 @@ function RedirectButton({ type = "forward", onClick }) {
455
455
  React.createElement("span", null, "Zur\u00FCck"))));
456
456
  }
457
457
 
458
- var css_248z$6 = ".styles-module_container__VreeH {\n margin-bottom: 20px;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J {\n padding: 10px 18px;\n background: #F0F0F0;\n border-radius: 20px;\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n color: #565656;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n background: #e5e5e5;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n background: #C6D4F8;\n color: #0075FF;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n color: #0075FF;\n}";
459
- var styles$6 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","selected":"styles-module_selected__sArTD"};
458
+ var css_248z$6 = ".styles-module_container__VreeH {\n margin-bottom: 20px;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n gap: 10px;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J,\n.styles-module_container__VreeH .styles-module_show_all__HKn-s {\n padding: 10px 18px;\n background: #F0F0F0;\n border-radius: 20px;\n display: flex;\n flex-direction: row;\n gap: 5px;\n align-items: center;\n cursor: pointer;\n user-select: none;\n -webkit-user-select: none;\n color: #565656;\n transition: 0.2s ease-in-out;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J:hover {\n background: #e5e5e5;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD {\n background: #C6D4F8;\n color: #0075FF;\n}\n.styles-module_container__VreeH .styles-module_chip__EvZ4J.styles-module_selected__sArTD span {\n color: #0075FF;\n}";
459
+ var styles$6 = {"container":"styles-module_container__VreeH","chip":"styles-module_chip__EvZ4J","show_all":"styles-module_show_all__HKn-s","selected":"styles-module_selected__sArTD"};
460
460
  styleInject(css_248z$6);
461
461
 
462
462
  class SearchChip {
@@ -468,7 +468,8 @@ class SearchChip {
468
468
  this.value = value;
469
469
  }
470
470
  }
471
- function SearchChips({ items, onChange }) {
471
+ function SearchChips({ items, onChange, chipsVisible = 9 }) {
472
+ const [showAll, setShowAll] = useState(false);
472
473
  const [chips, setChips] = useState(items);
473
474
  function onClick(item, index) {
474
475
  const newChips = [...chips];
@@ -477,9 +478,14 @@ function SearchChips({ items, onChange }) {
477
478
  if (onChange)
478
479
  onChange(newChips);
479
480
  }
480
- return (React.createElement("div", { className: styles$6.container }, chips.map((item, index) => React.createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$6.chip, item.selected ? styles$6.selected : styles$6.not_selected].join(" ") },
481
- React.createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
482
- item.title))));
481
+ return (React.createElement("div", { className: styles$6.container },
482
+ (showAll ? chips : chips.slice(0, chipsVisible)).map((item, index) => React.createElement("div", { key: index, onClick: (e) => onClick(item, index), className: [styles$6.chip, item.selected ? styles$6.selected : styles$6.not_selected].join(" ") },
483
+ React.createElement(SvgIcon, { iconName: item.selected ? "close" : "filter_list", size: "20px" }),
484
+ item.title)),
485
+ showAll ?
486
+ React.createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(false) }, "Weniger anzeigen")
487
+ :
488
+ React.createElement("div", { className: styles$6.show_all, onClick: () => setShowAll(true) }, "Mehr anzeigen")));
483
489
  }
484
490
 
485
491
  var css_248z$5 = ".styles-module_container__k4Z26 {\n width: 100%;\n display: flex;\n flex-direction: row;\n margin-top: 30px;\n margin-bottom: 25px;\n gap: 10px;\n position: relative;\n}\n.styles-module_container__k4Z26 button {\n background: #BFD5FF;\n padding: 0px 18px;\n border: none;\n font-size: 14px;\n border-radius: 10px;\n cursor: pointer;\n color: #0075FF;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om {\n display: none;\n position: absolute;\n top: 60px;\n background: white;\n box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.2509803922);\n width: 100%;\n border-radius: 14px;\n border: 1px solid #C3C3C3;\n z-index: 1000;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ-:hover,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om:hover {\n display: block;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul {\n list-style: none;\n margin: 0;\n padding: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n padding: 16px 20px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- ul li:not(:last-child),\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li:not(:last-child) {\n border-bottom: 1px solid #C3C3C3;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X {\n padding: 35px 0px;\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 15px;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X h3,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X h3 {\n margin: 0;\n}\n.styles-module_container__k4Z26 .styles-module_suggestions_container__pceQ- .styles-module_error__2Ov4X p,\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om .styles-module_error__2Ov4X p {\n color: grey;\n padding: 0px 30px;\n line-height: 1.5;\n text-align: center;\n margin-bottom: 10px;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li {\n display: flex;\n flex-direction: row;\n padding: 10px 20px;\n align-items: center;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om ul li span {\n flex: 1;\n}\n.styles-module_container__k4Z26 .styles-module_results_container__OY4Om button {\n padding: 10px 16px;\n}\n\n.styles-module_input__wOJmG {\n padding: 14px 20px;\n font-size: 16px;\n width: 300px;\n border-radius: 12px;\n border: 1.5px solid #a8a8a8;\n outline: none;\n transition: 0.2s ease;\n width: 100%;\n}\n.styles-module_input__wOJmG:focus, .styles-module_input__wOJmG:active {\n border-color: #0075FF;\n box-shadow: 0px 0px 3px 3px rgba(0, 87, 255, 0.2509803922);\n}\n\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_suggestions_container__pceQ-,\n.styles-module_form__mWTCu.styles-module_focus__-6H1f + .styles-module_results_container__OY4Om {\n display: block;\n}\n\n/* animated text field */\n.styles-module_form__mWTCu {\n position: relative;\n width: 100%;\n}\n\n.styles-module_label__A41g9 {\n position: absolute;\n bottom: 0px;\n left: 0px;\n width: 100%;\n height: 100%;\n pointer-events: none;\n}\n\n.styles-module_label_text__NQHTC {\n position: absolute;\n bottom: 16px;\n left: 12px;\n transition: 0.3s ease;\n font-size: 16px;\n border-top-left-radius: 5px;\n border-top-right-radius: 5px;\n opacity: initial;\n background: white;\n color: grey;\n padding-right: 8px;\n padding-left: 8px;\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t::placeholder {\n opacity: 0;\n transition: opacity 0.3s ease;\n color: grey;\n}\n\n.styles-module_input__wOJmG.styles-module_with_title__rnN-t:focus::placeholder {\n opacity: 1;\n}\n\n.styles-module_input__wOJmG:focus + .styles-module_label__A41g9 .styles-module_label_text__NQHTC,\n.styles-module_input__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n transform: translateY(-150%);\n left: 15px;\n font-size: 14px;\n background: 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__wOJmG.styles-module_valid__AAK-6 + .styles-module_label__A41g9 .styles-module_label_text__NQHTC {\n color: #a8a8a8;\n}";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "math-main-components",
3
- "version": "0.0.41",
3
+ "version": "0.0.42",
4
4
  "author": "Emilian Scheel",
5
5
  "files": [
6
6
  "dist/**/*"