@arquimedes.co/eureka-forms 1.9.87-test → 1.9.88-test

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/{PillElementContainer/PillElementContainer.d.ts → ListMapperElement/ListMapperElement.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { MapperStepProps } from '../../../MapperStep';
 import { MapperElementComponentProps } from '../MapperElement';
-declare function PillElementContainer<Type = any>({ step, form, num, element, children, editable, postview, formStyle, handleDelete, widthStats, customElementModifiers, }: MapperStepProps<Type> & MapperElementComponentProps<Type> & {
+declare function ListMapperElement<Type = any>({ step, form, num, loading, element, children, editable, postview, formStyle, handleDelete, widthStats, customElementModifiers, }: MapperStepProps<Type> & MapperElementComponentProps<Type> & {
     num: number;
     formStyle: {
         textColor: string;
@@ -10,4 +10,4 @@ declare function PillElementContainer<Type = any>({ step, form, num, element, ch
     /** children to render */
     children?: any;
 }): JSX.Element;
-export default PillElementContainer;
+export default ListMapperElement;

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

@@ -0,0 +1,34 @@
+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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './ListMapperElement.module.css';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+function ListMapperElement(_a) {
+    var _b, _c;
+    var step = _a.step, form = _a.form, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, handleDelete = _a.handleDelete, widthStats = _a.widthStats, customElementModifiers = _a.customElementModifiers;
+    var size = form.size;
+    var calcName = (customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {}).calcName;
+    var name = calcName
+        ? calcName(element)
+        : step.unitLabel + ' ' + (num + 1);
+    return (_jsx("div", __assign({ className: widthStats.isMobile ? styles.mobileContainer : styles.container }, { children: _jsxs("div", __assign({ className: styles.contentContainer, style: {
+                width: (size.blockSize + size.spacingSize) *
+                    ((_c = (_b = step.style) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : size.blockNum - 1),
+            } }, { children: [name && (_jsx("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: loading ? '' : name + ':' }))), step.deletable !== false && (_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 ListMapperElement;

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

@@ -3,6 +3,7 @@ import { MapperStepProps } from '../../MapperStep';
 import { MapperElement } from '../MaterialMapperStep';
 export interface MapperElementComponentProps<Type> {
     num: number;
+    loading: boolean;
     element: MapperElement<Type>;
     handleDelete: Function;
 }

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

@@ -12,18 +12,32 @@ var __assign = (this && this.__assign) || function () {
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
 import StepComponent from '../../../Step';
-import PillElementContainer from './PillElementContainer/PillElementContainer';
+import { MapperStyleTypes } from '../../../../../constants/FormStepTypes';
+import styles from './MapperElement.module.css';
+import ListMapperElement from './ListMapperElement/ListMapperElement';
+import PillMapperElement from './PillMapperElement/PillMapperElement';
 function MapperElementComponent(props) {
-    var _a, _b;
+    var _a, _b, _c;
     var level = props.level, form = props.form, step = props.step, element = props.element, editable = props.editable;
     if (element.deleted) {
         return _jsx("div", {});
     }
     var customStepProps = (_b = (_a = props.calcCustomStepProps) === null || _a === void 0 ? void 0 : _a.call(props, element, props.customStepProps)) !== null && _b !== void 0 ? _b : props.customStepProps;
-    return (_jsx(PillElementContainer, __assign({}, props, { step: step }, { children: step.rootSteps.map(function (idSubStep) {
+    var mapSubSteps = function () {
+        return step.rootSteps.map(function (idSubStep) {
             var _a;
             var subStep = form.steps[element.ids[idSubStep]];
             return (_createElement(StepComponent, __assign({}, props, { customStepProps: customStepProps, globalEditable: editable ? (_a = step.editable) !== null && _a !== void 0 ? _a : true : false, step: subStep, key: idSubStep, level: level + 1 })));
-        }) })));
+        });
+    };
+    switch ((_c = step.style) === null || _c === void 0 ? void 0 : _c.type) {
+        case MapperStyleTypes.INLINE:
+            return (_jsx("div", __assign({ className: styles.contentContainer }, { children: mapSubSteps() })));
+        case MapperStyleTypes.LIST:
+            return (_jsx(ListMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
+        case MapperStyleTypes.PILL:
+        default:
+            return (_jsx(PillMapperElement, __assign({}, props, { step: step }, { children: mapSubSteps() })));
+    }
 }
 export default MapperElementComponent;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/MapperElement.module.css

@@ -1,41 +1,3 @@
-.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;
@@ -46,15 +8,3 @@
     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/Element/PillMapperElement/PillMapperElement.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { MapperStepProps } from '../../../MapperStep';
+import { MapperElementComponentProps } from '../MapperElement';
+declare function PillMapperElement<Type = any>({ step, form, num, loading, element, children, editable, postview, formStyle, handleDelete, widthStats, customElementModifiers, }: MapperStepProps<Type> & MapperElementComponentProps<Type> & {
+    num: number;
+    formStyle: {
+        textColor: string;
+    };
+    handleDelete?: Function;
+    /** children to render */
+    children?: any;
+}): JSX.Element;
+export default PillMapperElement;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/{PillElementContainer/PillElementContainer.js → PillMapperElement/PillMapperElement.js}

@@ -9,20 +9,22 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import styles from './PillElementContainer.module.css';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './PillMapperElement.module.css';
 import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
-function PillElementContainer(_a) {
+function PillMapperElement(_a) {
     var _b, _c;
-    var step = _a.step, form = _a.form, num = _a.num, element = _a.element, children = _a.children, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, handleDelete = _a.handleDelete, widthStats = _a.widthStats, customElementModifiers = _a.customElementModifiers;
+    var step = _a.step, form = _a.form, num = _a.num, loading = _a.loading, element = _a.element, children = _a.children, editable = _a.editable, postview = _a.postview, formStyle = _a.formStyle, handleDelete = _a.handleDelete, widthStats = _a.widthStats, customElementModifiers = _a.customElementModifiers;
     var size = form.size;
     var calcName = (customElementModifiers !== null && customElementModifiers !== void 0 ? customElementModifiers : {}).calcName;
     return (_jsx("div", __assign({ className: widthStats.isMobile ? styles.mobileContainer : styles.container }, { children: _jsxs("div", __assign({ className: styles.contentContainer, style: {
                 width: (size.blockSize + size.spacingSize) *
                     ((_c = (_b = step.style) === null || _b === void 0 ? void 0 : _b.size) !== null && _c !== void 0 ? _c : size.blockNum - 1),
-            } }, { children: [_jsxs("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: [calcName
+            } }, { children: [_jsx("div", __assign({ className: styles.titleLbl, style: { color: formStyle.textColor } }, { children: loading
+                        ? ''
+                        : (calcName
                             ? calcName(element)
-                            : step.unitLabel + ' ' + (num + 1), ":"] })), step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
+                            : step.unitLabel + ' ' + (num + 1)) + ':' })), step.deletable !== false && (_jsx("div", __assign({ className: !editable || postview
                         ? styles.disabledDeleteBtn
                         : styles.deleteBtn, style: { color: formStyle.textColor }, onClick: function () {
                         if (editable && !postview) {
@@ -30,4 +32,4 @@ function PillElementContainer(_a) {
                         }
                     } }, { children: _jsx(DeleteRoundedIcon, { fontSize: "inherit" }) }))), children] })) })));
 }
-export default PillElementContainer;
+export default PillMapperElement;

package/dist/FormComponents/Step/MapperStep/MaterialMapperStep/Element/PillMapperElement/PillMapperElement.module.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.d.ts

@@ -6,7 +6,8 @@ export interface MapperElement<Type> {
     deleted?: boolean;
     value?: Type;
 }
-export declare function ElementsComponent<Type = any>({ step, form, inputRef, editable, postview, elements, formStyle, customAdd, dependencyStore, setDependencyStore, ...others }: MapperStepProps<Type> & {
+export declare function ElementsComponent<Type = any>({ step, form, inputRef, editable, postview, elements, formStyle, customAdd, loading, dependencyStore, setDependencyStore, ...others }: MapperStepProps<Type> & {
+    loading?: boolean;
     onChange: (elements: MapperElement<Type>[]) => void;
     elements: MapperElement<Type>[];
     inputRef: any;

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

@@ -42,10 +42,10 @@ import AYFFormStepTypes from '../../../../constants/AYFFormStepTypes';
 import CBRFormStepTypes from '../../../../constants/CBRFormStepTypes';
 export function ElementsComponent(_a) {
     var _b, _c;
-    var step = _a.step, form = _a.form, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, elements = _a.elements, formStyle = _a.formStyle, customAdd = _a.customAdd, dependencyStore = _a.dependencyStore, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["step", "form", "inputRef", "editable", "postview", "elements", "formStyle", "customAdd", "dependencyStore", "setDependencyStore"]);
-    var _d = useState(true), firstRender = _d[0], setFirstRender = _d[1];
+    var step = _a.step, form = _a.form, inputRef = _a.inputRef, editable = _a.editable, postview = _a.postview, elements = _a.elements, formStyle = _a.formStyle, customAdd = _a.customAdd, _d = _a.loading, loading = _d === void 0 ? false : _d, dependencyStore = _a.dependencyStore, setDependencyStore = _a.setDependencyStore, others = __rest(_a, ["step", "form", "inputRef", "editable", "postview", "elements", "formStyle", "customAdd", "loading", "dependencyStore", "setDependencyStore"]);
+    var _e = useState(true), firstRender = _e[0], setFirstRender = _e[1];
     /** Mapper Steps to pass down */
-    var _e = useState(), localSteps = _e[0], setLocalSteps = _e[1];
+    var _f = useState(), localSteps = _f[0], setLocalSteps = _f[1];
     var onChange = function (elements) {
         var _a;
         var _b;
@@ -127,7 +127,7 @@ export function ElementsComponent(_a) {
                     margin: step.description
                         ? '10px 0px'
                         : '0px 0px 5px 0px',
-                } }, { children: step.description }))), elements.map(function (element, index) { return (_jsx(MapperElementComponent, __assign({ num: index, element: element, formStyle: formStyle, step: step, form: __assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) }), editable: editable, postview: postview, dependencyStore: dependencyStore, setDependencyStore: setDependencyStore, handleDelete: function () {
+                } }, { children: step.description }))), elements.map(function (element, index) { return (_jsx(MapperElementComponent, __assign({ num: index, loading: loading, element: element, formStyle: formStyle, step: step, form: __assign(__assign({}, form), { steps: __assign(__assign({}, form.steps), localSteps) }), 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.87-test",
+    "version":"1.9.88-test",
     "scripts": {
         "start": "react-scripts start",
         "build": "react-scripts build",