math-main-components 0.0.34 → 0.0.36

package/dist/components/OptionFieldHorizontal/OptionFieldHorizontal.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
-export declare function OptionFieldHorizontal({ title, iconName, preselected }: {
+export declare function OptionFieldHorizontal({ title, iconName, onClick, preselected }: {
     title: string;
-    iconName: string;
+    iconName?: string;
+    onClick?: (event: any) => void;
     preselected?: boolean;
 }): React.JSX.Element;

package/dist/components/RadioButtons/RadioButtons.d.ts

@@ -4,9 +4,10 @@ export declare class RadioOption {
     name: string;
     constructor(text: string, name: string);
 }
-export declare function RadioButtons({ options, group, selected, width }: {
+export declare function RadioButtons({ options, group, selected, onClick, width }: {
     options: RadioOption[];
     group: string;
     selected?: string;
+    onClick?: (event: any) => void;
     width?: string;
 }): React.JSX.Element;

package/dist/index.cjs.js

@@ -370,13 +370,18 @@ function OptionField({ headline, description, iconName }) {
                 React__default["default"].createElement("p", null, description)))));
 }
 
-var css_248z$b = ".styles-module_container__XCtqW {\n  background: white;\n  border-radius: 12px;\n  padding: 30px;\n  margin-bottom: 30px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n  color: black;\n  border: 1px solid #B1B1B1;\n  transition: 0.2s ease-in-out;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n}\n.styles-module_container__XCtqW:hover {\n  background: #f0f0f0;\n  border-color: #888888;\n}\n.styles-module_container__XCtqW h3 {\n  font-weight: 500;\n  margin: 0;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n  border: 1px solid black;\n}";
+var css_248z$b = ".styles-module_container__XCtqW {\n  background: white;\n  border-radius: 12px;\n  padding: 30px;\n  margin-bottom: 30px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n  color: black;\n  border: 1px solid #B1B1B1;\n  transition: 0.2s ease-in-out;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n  cursor: pointer;\n}\n.styles-module_container__XCtqW:hover {\n  background: #f0f0f0;\n  border-color: #888888;\n}\n.styles-module_container__XCtqW h3 {\n  font-weight: 500;\n  margin: 0;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n  border: 1px solid black;\n}";
 var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
 styleInject(css_248z$b);
 
-function OptionFieldHorizontal({ title, iconName, preselected = false }) {
-    return (React__default["default"].createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
-        React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
+function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }) {
+    function onClickDiv(event) {
+        event.preventDefault();
+        if (onClick)
+            onClick(event);
+    }
+    return (React__default["default"].createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" "), onClick: onClickDiv },
+        iconName && React__default["default"].createElement(SvgIcon, { iconName: iconName, size: "32px" }),
         React__default["default"].createElement("h3", null, title)));
 }
 
@@ -419,10 +424,12 @@ class RadioOption {
         this.name = name;
     }
 }
-function RadioButtons({ options, group, selected, width = "100%" }) {
+function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
     const [selectedOption, setSelected] = React.useState(selected);
     function onUpdateSelected(event) {
         setSelected(event.target.value);
+        if (onClick)
+            onClick(event);
     }
     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 },
         selected && selected == option.name ?

package/dist/index.esm.js

@@ -362,13 +362,18 @@ function OptionField({ headline, description, iconName }) {
                 React.createElement("p", null, description)))));
 }
 
-var css_248z$b = ".styles-module_container__XCtqW {\n  background: white;\n  border-radius: 12px;\n  padding: 30px;\n  margin-bottom: 30px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n  color: black;\n  border: 1px solid #B1B1B1;\n  transition: 0.2s ease-in-out;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n}\n.styles-module_container__XCtqW:hover {\n  background: #f0f0f0;\n  border-color: #888888;\n}\n.styles-module_container__XCtqW h3 {\n  font-weight: 500;\n  margin: 0;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n  border: 1px solid black;\n}";
+var css_248z$b = ".styles-module_container__XCtqW {\n  background: white;\n  border-radius: 12px;\n  padding: 30px;\n  margin-bottom: 30px;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 18px;\n  color: black;\n  border: 1px solid #B1B1B1;\n  transition: 0.2s ease-in-out;\n  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);\n  cursor: pointer;\n}\n.styles-module_container__XCtqW:hover {\n  background: #f0f0f0;\n  border-color: #888888;\n}\n.styles-module_container__XCtqW h3 {\n  font-weight: 500;\n  margin: 0;\n}\n\n.styles-module_container__XCtqW.styles-module_preselected__WoSbB {\n  border: 1px solid black;\n}";
 var styles$b = {"container":"styles-module_container__XCtqW","preselected":"styles-module_preselected__WoSbB"};
 styleInject(css_248z$b);
 
-function OptionFieldHorizontal({ title, iconName, preselected = false }) {
-    return (React.createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" ") },
-        React.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
+function OptionFieldHorizontal({ title, iconName, onClick, preselected = false }) {
+    function onClickDiv(event) {
+        event.preventDefault();
+        if (onClick)
+            onClick(event);
+    }
+    return (React.createElement("div", { className: [styles$b.container, preselected ? styles$b.preselected : styles$b.not_preselected].join(" "), onClick: onClickDiv },
+        iconName && React.createElement(SvgIcon, { iconName: iconName, size: "32px" }),
         React.createElement("h3", null, title)));
 }
 
@@ -411,10 +416,12 @@ class RadioOption {
         this.name = name;
     }
 }
-function RadioButtons({ options, group, selected, width = "100%" }) {
+function RadioButtons({ options, group, selected, onClick, width = "100%" }) {
     const [selectedOption, setSelected] = useState(selected);
     function onUpdateSelected(event) {
         setSelected(event.target.value);
+        if (onClick)
+            onClick(event);
     }
     return (React.createElement("div", { className: styles$8.container, style: { width: width } }, options.map((option) => React.createElement("div", { className: styles$8.option, key: option.name },
         selected && selected == option.name ?

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "math-main-components",
-    "version": "0.0.34",
+    "version": "0.0.36",
     "author": "Emilian Scheel",
     "files": [
         "dist/**/*"