@arquimedes.co/eureka-forms 1.9.30-test → 1.9.32-test

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/MapperElement.d.ts

@@ -1,11 +1,9 @@
 /// <reference types="react" />
-import { FormStep } from '../../../../../@Types/FormStep';
 import { MapperStepProps } from '../../MapperStep';
 import { MapperElement } from '../MaterialMapperStep';
-declare function MapperElementComponent({ step, form, index, level, element, formStyle, handleDelete, ...others }: MapperStepProps & {
+declare function MapperElementComponent({ step, form, level, element, handleDelete, ...others }: MapperStepProps & {
     index: number;
     element: MapperElement;
     handleDelete: Function;
-    steps: Record<string, FormStep>;
 }): JSX.Element;
 export default MapperElementComponent;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/MapperElement.js

@@ -21,29 +21,17 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { createElement as _createElement } from "react";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
-import styles from './MapperElement.module.css';
+import { jsx as _jsx } from "react/jsx-runtime";
 import StepComponent from '../../../Step';
+import PillElementContainer from './PillElementContainer/PillElementContainer';
 function MapperElementComponent(_a) {
-    var step = _a.step, form = _a.form, index = _a.index, level = _a.level, element = _a.element, formStyle = _a.formStyle, handleDelete = _a.handleDelete, others = __rest(_a, ["step", "form", "index", "level", "element", "formStyle", "handleDelete"]);
+    var step = _a.step, form = _a.form, level = _a.level, element = _a.element, handleDelete = _a.handleDelete, others = __rest(_a, ["step", "form", "level", "element", "handleDelete"]);
     if (element.deleted) {
         return _jsx("div", {});
     }
-    return (_jsx("div", __assign({ className: others.widthStats.isMobile || form.size.blockNum < 3
-            ? styles.mobileContainer
-            : styles.container }, { children: _jsxs("div", __assign({ className: styles.contentContainer, style: {
-                width: (form.size.blockSize + form.size.spacingSize) *
-                    (form.size.blockNum - 1),
-            } }, { children: [_jsxs("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: [step.unitLabel + ' ' + index + 1, ":"] })), _jsx("div", __assign({ className: !others.editable || others.postview
-                        ? styles.disabledDeleteBtn
-                        : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
-                        if (others.editable && !others.postview) {
-                            handleDelete();
-                        }
-                    } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })), step.rootSteps.map(function (idSubStep, index) {
-                    var subStep = form.steps[idSubStep];
-                    return (_createElement(StepComponent, __assign({}, others, { formStyle: formStyle, form: form, step: subStep, key: index, level: level + 1 })));
-                })] })) })));
+    return (_jsx(PillElementContainer, __assign({ handleDelete: handleDelete }, others, { step: step, size: form.size }, { children: step.rootSteps.map(function (idSubStep, index) {
+            var subStep = form.steps[idSubStep];
+            return (_createElement(StepComponent, __assign({}, others, { form: form, step: subStep, key: index, level: level + 1 })));
+        }) })));
 }
 export default MapperElementComponent;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/PillElementContainer/PillElementContainer.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { MapperStepProps } from '../../../MapperStep';
+import { Form } from '../../../../../../@Types';
+import { Mapper } from '../../../../../../@Types/FormStep';
+declare function PillElementContainer({ step, size, index, children, editable, postview, formStyle, handleDelete, widthStats, }: Pick<MapperStepProps, 'editable' | 'postview' | 'widthStats'> & {
+    step: Mapper;
+    index: number;
+    formStyle: {
+        textColor: string;
+    };
+    size: Form['size'];
+    handleDelete?: Function;
+    /** children to render */
+    children?: any;
+}): JSX.Element;
+export default PillElementContainer;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/PillElementContainer/PillElementContainer.js

@@ -0,0 +1,30 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import styles from './PillElementContainer.modules.css';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+function PillElementContainer(_a) {
+    var step = _a.step, size = _a.size, index = _a.index, children = _a.children, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, handleDelete = _a.handleDelete, widthStats = _a.widthStats;
+    return (_jsx("div", __assign({ className: widthStats.isMobile || size.blockNum < 3
+            ? styles.mobileContainer
+            : styles.container }, { children: _jsxs("div", __assign({ className: styles.contentContainer, style: {
+                width: (size.blockSize + size.spacingSize) *
+                    (size.blockNum - 1),
+            } }, { children: [_jsxs("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: [step.unitLabel + ' ' + index + 1, ":"] })), _jsx("div", __assign({ className: !editable || postview
+                        ? styles.disabledDeleteBtn
+                        : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
+                        if (editable && !postview) {
+                            handleDelete === null || handleDelete === void 0 ? void 0 : handleDelete();
+                        }
+                    } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) })), children] })) })));
+}
+export default PillElementContainer;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/PillElementContainer/PillElementContainer.modules.css

@@ -0,0 +1,60 @@
+.container,
+.mobileContainer {
+    background-color: #f0f0f0;
+    border: 1px solid #d6d6d6;
+    width: fit-content;
+    border-radius: 20px;
+    margin-bottom: 10px;
+    margin-top: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    position: relative;
+}
+.container {
+    max-width: calc(100% - 112px);
+    padding-right: 55px;
+    padding-left: 55px;
+}
+
+.mobileContainer {
+    max-width: calc(100% - 42px);
+    padding-right: 20px;
+    padding-left: 20px;
+}
+
+.titleLbl {
+    width: 100%;
+    font-size: 20px;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: default;
+    margin-left: 10px;
+    margin-bottom: 10px;
+}
+
+.contentContainer {
+    margin-left: auto;
+    margin-right: auto;
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}
+
+.deleteBtn,
+.disabledDeleteBtn {
+    font-size: 24px;
+    position: absolute;
+    right: 15px;
+    top: 15px;
+}
+
+.deleteBtn {
+    cursor: pointer;
+}

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/MaterialMapperStep.js

@@ -101,7 +101,7 @@ function Elements(_a) {
                     margin: step.description
                         ? '10px 0px'
                         : '0px 0px 5px 0px',
-                } }, { children: step.description }))), elements.map(function (incident, index) { return (_jsx(MapperElementComponent, __assign({ index: index, element: incident, formStyle: formStyle, step: step, form: form, steps: step.steps, editable: editable, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
+                } }, { children: step.description }))), elements.map(function (incident, index) { return (_jsx(MapperElementComponent, __assign({ index: index, element: incident, formStyle: formStyle, step: step, form: __assign(__assign({}, form), { steps: step.steps }), editable: editable, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
                     var tempElements = __spreadArray([], elements, true);
                     tempElements[index].deleted = true;
                     onChange(tempElements);

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@arquimedes.co/eureka-forms",
     "repository": "git://github.com/Arquimede5/Eureka-Forms.git",
-    "version":"1.9.30-test",
+    "version":"1.9.32-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",