@arquimedes.co/eureka-forms 1.9.84-test → 1.9.85-test

package/dist/FormComponents/Form/Form.js

@@ -0,0 +1,147 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useState } from 'react';
+import { FormStyleTypes, FormTypes } from '../../constants/FormStepTypes';
+import Navbar from '../../shared/Navbar/Navbar';
+import ColumnForm from './ColumnForm/ColumnForm';
+import StepperForm from './StepperForm/StepperForm';
+import styles from './Form.module.css';
+import { MuiPickersUtilsProvider } from '@material-ui/pickers';
+import DateFnsUtils from '@date-io/date-fns';
+import { createGenerateClassName, createTheme, StylesProvider, ThemeProvider, } from '@material-ui/core';
+import { SEED } from '../../constants/MaterialClassNameSeed';
+import InternalFormStyle from '../../constants/InternalFormStyle';
+import enLocale from 'date-fns/locale/en-US';
+import esLocale from 'date-fns/locale/es';
+var localeMap = {
+    en: enLocale,
+    'en-US': enLocale,
+    es: esLocale,
+};
+export var getLocale = function () {
+    var _a;
+    return ((_a = localeMap[navigator.languages && navigator.languages.length
+        ? navigator.languages[0]
+        : navigator.userLanguage ||
+            navigator.language ||
+            navigator.browserLanguage]) !== null && _a !== void 0 ? _a : localeMap.es);
+};
+function FormComponent(_a) {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var form = _a.form, isWidget = _a.isWidget, internal = _a.internal, postview = _a.postview, organization = _a.organization, containerRef = _a.containerRef, others = __rest(_a, ["form", "isWidget", "internal", "postview", "organization", "containerRef"]);
+    var _p = useState(false), loaded = _p[0], setLoaded = _p[1];
+    var _q = useState(undefined), widthStats = _q[0], setWidthStats = _q[1];
+    /** Calcs the currentBreakPoint and if is mobile */
+    var handleResize = function () {
+        var _a;
+        var currentWidth = (_a = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
+        if (currentWidth !== undefined) {
+            var currentBreakPoint = form.size.blockNum;
+            var padding = postview || internal || !form.isStandAlone ? 0 : 40;
+            while (currentWidth <
+                (form.size.blockSize + form.size.spacingSize) *
+                    currentBreakPoint +
+                    padding) {
+                currentBreakPoint--;
+            }
+            setWidthStats({
+                isResponsive: currentWidth <
+                    (form.size.blockSize + form.size.spacingSize) *
+                        form.size.blockNum +
+                        padding,
+                isMobile: currentWidth <
+                    (form.size.blockSize + form.size.spacingSize) * 2 + padding,
+                currentBreakPoint: currentBreakPoint,
+            });
+        }
+    };
+    useEffect(function () {
+        /** On load add a resize listener to calc the currentBreakpoint */
+        window.addEventListener('resize', handleResize);
+        handleResize();
+        return function () {
+            window.removeEventListener('resize', handleResize);
+        };
+    }, [containerRef.current, (_b = containerRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth]);
+    //If currently displaying internal or form is standalone
+    if ((postview || internal || !form.isStandAlone) &&
+        widthStats !== undefined) {
+        return (_jsx("div", __assign({ style: {
+                backgroundColor: internal
+                    ? 'transparent'
+                    : (_d = (_c = form.style) === null || _c === void 0 ? void 0 : _c.backgroundColor) !== null && _d !== void 0 ? _d : InternalFormStyle.backgroundColor,
+                minHeight: form.isStandAlone && !isWidget ? '100vh' : '100%',
+            } }, { children: _jsx("div", __assign({ className: styles.widgetFormContainer, ref: containerRef }, { children: _jsx(FormTypeComponent, __assign({}, others, { handleLoaded: function () {
+                        setLoaded(true);
+                    }, widthStats: widthStats, form: form, internal: internal, postview: postview, organization: organization, formStyle: internal
+                        ? InternalFormStyle
+                        : __assign(__assign({}, InternalFormStyle), ((_e = form.style) !== null && _e !== void 0 ? _e : {})) })) })) })));
+    }
+    else if (organization && widthStats !== undefined) {
+        //Standalone cant have widget
+        return (_jsxs(React.Fragment, { children: [_jsx(Navbar, { logo: organization.logoUrl, color: (_g = (_f = organization.styles) === null || _f === void 0 ? void 0 : _f.navbarColor) !== null && _g !== void 0 ? _g : (_h = organization.styles) === null || _h === void 0 ? void 0 : _h.primaryColor }), _jsx("div", __assign({ className: styles.standAloneFormContainer, ref: containerRef, style: {
+                        background: (_k = (_j = form.style) === null || _j === void 0 ? void 0 : _j.standAloneBackgroundColor) !== null && _k !== void 0 ? _k : '#ffffff',
+                    } }, { children: _jsx("div", __assign({ className: widthStats.isResponsive
+                            ? styles.fullScreenStandAloneForm
+                            : styles.standAloneFormCard, style: {
+                            backgroundColor: (_m = (_l = form.style) === null || _l === void 0 ? void 0 : _l.backgroundColor) !== null && _m !== void 0 ? _m : InternalFormStyle.backgroundColor,
+                            visibility: loaded ? 'visible' : 'hidden',
+                        } }, { children: _jsx(FormTypeComponent, __assign({}, others, { internal: internal, postview: postview, widthStats: widthStats, form: form, formStyle: (_o = form.style) !== null && _o !== void 0 ? _o : InternalFormStyle, organization: organization, handleLoaded: function () {
+                                setLoaded(true);
+                            } })) })) }))] }));
+    }
+    else {
+        return _jsx("div", {});
+    }
+}
+var muiTheme = createTheme({
+    typography: {
+        fontFamily: 'inherit',
+    },
+});
+var generateClassName = createGenerateClassName({
+    seed: SEED,
+    productionPrefix: 'efjss',
+});
+function FormTypeComponent(_a) {
+    var props = __rest(_a, []);
+    var renderTypes = function () {
+        switch (props.form.type) {
+            case FormTypes.STEPPER: {
+                return _jsx(StepperForm, __assign({}, props));
+            }
+            case FormTypes.COLUMN:
+            default: {
+                return _jsx(ColumnForm, __assign({}, props));
+            }
+        }
+    };
+    switch (props.formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+            return (_jsx(StylesProvider, __assign({ generateClassName: generateClassName }, { children: _jsx(ThemeProvider, __assign({ theme: muiTheme }, { children: _jsx(MuiPickersUtilsProvider, __assign({ utils: DateFnsUtils, locale: getLocale() }, { children: renderTypes() })) })) })));
+        default:
+            return renderTypes();
+    }
+}
+export default FormComponent;

package/dist/FormComponents/Form/Form.module.css

@@ -0,0 +1,39 @@
+.standAloneFormContainer {
+    width: 100%;
+    max-width: 100%;
+    overflow: hidden;
+    min-height: calc(100vh - 60px);
+    display: flex;
+    overflow-x: hidden;
+}
+
+.fullScreenStandAloneForm {
+    width: 100%;
+    padding: 20px;
+    min-height: 100%;
+    overflow: hidden;
+}
+
+.standAloneFormCard {
+    -webkit-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
+    -moz-box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
+    box-shadow: -6px 0px 8px 5px rgba(0, 0, 0, 0.2);
+    margin-top: 30px;
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
+    width: fit-content;
+    border-radius: 15px;
+    padding: 20px;
+    margin-bottom: 30px;
+}
+
+.widgetFormContainer {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
+    width: fit-content;
+    max-width: 100%;
+}

package/dist/FormComponents/Form/StepperForm/StepperForm.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { FormComponentProps } from '../Form';
+declare function StepperForm({}: FormComponentProps): JSX.Element;
+export default StepperForm;

package/dist/FormComponents/Form/StepperForm/StepperForm.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+// import styles from './StepperForm.module.css';
+function StepperForm(_a) {
+    return _jsx("div", {});
+}
+export default StepperForm;

package/dist/FormComponents/Section/MaterialSection/MaterialSection.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { SectionComponentProps } from '../Section';
+declare function MaterialSection({ form, section, widthStats, sendLabel, ...others }: SectionComponentProps): JSX.Element;
+export default MaterialSection;

package/dist/FormComponents/Section/MaterialSection/MaterialSection.js

@@ -0,0 +1,42 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createElement as _createElement } from "react";
+import StepComponent from '../../Step/Step';
+import styles from './MaterialSection.module.css';
+function MaterialSection(_a) {
+    var _b;
+    var form = _a.form, section = _a.section, widthStats = _a.widthStats, sendLabel = _a.sendLabel, others = __rest(_a, ["form", "section", "widthStats", "sendLabel"]);
+    return (_jsx("div", __assign({ className: styles.container, style: {
+            width: (form.size.blockSize + form.size.spacingSize) *
+                form.size.blockNum,
+            justifyContent: sendLabel !== undefined &&
+                widthStats.currentBreakPoint < form.size.blockNum
+                ? 'center'
+                : 'normal',
+        } }, { children: (_b = section.steps) === null || _b === void 0 ? void 0 : _b.map(function (idStep) {
+            var step = form.steps[idStep];
+            return (_createElement(StepComponent, __assign({}, others, { globalEditable: others.editable, widthStats: widthStats, form: form, step: step, key: idStep, level: 0 })));
+        }) })));
+}
+export default MaterialSection;

package/dist/FormComponents/Section/MaterialSection/MaterialSection.module.css

@@ -0,0 +1,8 @@
+.container {
+    display: flex;
+    flex-flow: row wrap;
+    height: fit-content;
+    max-width: 100%;
+    overflow-x: hidden;
+    overflow-y: hidden;
+}

package/dist/FormComponents/Section/Section.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { Control, FieldValues, UseFormGetValues } from 'react-hook-form';
+import { Organization } from '../../@Types';
+import { Form, FormStyle, Section } from '../../@Types/Form';
+import { CustomStep } from '../../App';
+import { WidthStats } from '../Form/Form';
+export interface RecursiveData {
+    form: Form;
+    organization: Organization;
+    control: Control<FieldValues, object>;
+    formStyle: FormStyle;
+    /** If the formsteps can be edited (For internal) */
+    editable: boolean;
+    preview: boolean;
+    postview: boolean;
+    partial: boolean;
+    domain?: string;
+    errors: Record<string, any>;
+    widthStats: WidthStats;
+    clearErrors: Function;
+    getValues: UseFormGetValues<FieldValues>;
+    originalValues: Record<string, any>;
+    customSteps: Record<string, CustomStep>;
+    customStepProps: Record<string, any>;
+    /** Function to call on postview to fetch the download url of a file */
+    fetchDownloadUrl?: (S3Key: string, fileName: string) => Promise<string>;
+    dependencyStore: Record<string, any>;
+    setDependencyStore: (values: Record<string, any>) => void;
+    setFocus: (id: string) => void;
+}
+export interface SectionComponentProps extends RecursiveData {
+    /** The custom send label to display */
+    sendLabel?: string;
+    section: Section;
+    setSections: Function;
+    index: number;
+}
+declare function SectionComponent(props: SectionComponentProps): JSX.Element;
+export default SectionComponent;

package/dist/FormComponents/Section/Section.js

@@ -0,0 +1,23 @@
+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 } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../constants/FormStepTypes';
+import MaterialSection from './MaterialSection/MaterialSection';
+function SectionComponent(props) {
+    switch (props.formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialSection, __assign({}, props));
+        }
+    }
+}
+export default SectionComponent;

package/dist/FormComponents/Step/@Construction/CBRElementStep/CBRElementStep.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { StepProps } from '../../Step';
+import { CBRElementStep } from '../../../../@Types/CBRFormStep';
+declare function CBRElementStepComponent(props: ElementSubStepRendererProps): JSX.Element;
+export default CBRElementStepComponent;
+export interface ElementSubStepRendererProps extends Omit<StepProps, 'step'> {
+    step: CBRElementStep;
+}

package/dist/FormComponents/Step/@Construction/CBRElementStep/CBRElementStep.js

@@ -0,0 +1,139 @@
+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);
+};
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import SmartSelectStep from '../../SmartSelectStep/SmartSelectStep';
+import CBRFormStepTypes from '../../../../constants/CBRFormStepTypes';
+import axios from 'axios';
+import InputIcon from '../../../../shared/InputIcon/InputIcon';
+function CBRElementStepComponent(props) {
+    return (_jsx(SmartSelectStep, __assign({}, props, { step: props.step, icon: _jsx(InputIcon, { icon: 'LEAK' }), getOptions: getElementOptions, getOptionSelected: function (option, value) {
+            return option.id === value.id;
+        }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value.id; }, calcDepError: calcDepError, calcInvalidDeps: calcInvalidDependencies, valueOverwrite: function (value) {
+            if (value) {
+                return __assign(__assign({}, value), { subStep: props.step.subStep });
+            }
+            else {
+                return null;
+            }
+        } }, { children: _jsx(ElementSubStepRenderer, {}) })));
+}
+export default CBRElementStepComponent;
+function ElementSubStepRenderer(_a) {
+    var _b;
+    var value = _a.value, stepProps = _a.stepProps;
+    if (!value || stepProps == undefined) {
+        return _jsx("div", {});
+    }
+    var subStep = stepProps === null || stepProps === void 0 ? void 0 : stepProps.form.steps[(_b = stepProps.step.subStep) !== null && _b !== void 0 ? _b : ''];
+    if ((subStep === null || subStep === void 0 ? void 0 : subStep.type) !== CBRFormStepTypes.CBR_LOCATIVAS) {
+        return _jsx("div", {});
+    }
+    return (_jsx(SmartSelectStep, __assign({}, stepProps, { step: subStep, level: stepProps.level + 1, icon: _jsx(InputIcon, { icon: 'LEAK' }), calcInvalidDeps: calcInvalidDependencies, getOptions: getElementOptions, calcDepError: calcDepError, getOptionSelected: function (option, value) {
+            return option.id === value.id;
+        }, getValueString: function (value) { return value === null || value === void 0 ? void 0 : value.id; } }, { children: _jsx(ElementSubStepRenderer, {}) })));
+}
+var getElementOptions = function (_a, step, dependencyStore) {
+    var idOrganization = _a.idOrganization;
+    return __awaiter(void 0, void 0, void 0, function () {
+        var idProyecto, response, father_1;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (!step.dependencies) return [3 /*break*/, 2];
+                    idProyecto = (_b = dependencyStore[step.dependencies[0]]) === null || _b === void 0 ? void 0 : _b.id;
+                    if (!idProyecto) {
+                        return [2 /*return*/, null]; //null para indicar que falta la depedency
+                    }
+                    return [4 /*yield*/, axios.get("https://integrations.".concat(process.env.REACT_APP_DOMAIN, "/sinco/cbr/Locativas?idOrganization=").concat(idOrganization))];
+                case 1:
+                    response = (_c.sent()).data;
+                    father_1 = dependencyStore[step.dependencies[1]];
+                    if (father_1 !== undefined && father_1.id === undefined) {
+                        return [2 /*return*/, null];
+                    }
+                    return [2 /*return*/, response.filter(function (locativa) {
+                            if (father_1 === null || father_1 === void 0 ? void 0 : father_1.id) {
+                                return (locativa.id.startsWith(father_1.id) &&
+                                    locativa.id !== father_1.id);
+                            }
+                            else {
+                                return locativa.id.length === 2;
+                            }
+                        })];
+                case 2: return [2 /*return*/, null];
+            }
+        });
+    });
+};
+var calcInvalidDependencies = function (step, dependencyStore) {
+    var _a;
+    var deps = [];
+    if (step.dependencies) {
+        for (var _i = 0, _b = step.dependencies; _i < _b.length; _i++) {
+            var idDep = _b[_i];
+            if (((_a = dependencyStore[idDep]) === null || _a === void 0 ? void 0 : _a.id) === undefined) {
+                deps.push(idDep);
+            }
+        }
+    }
+    return deps;
+};
+var calcDepError = function (steps) {
+    for (var _i = 0, steps_1 = steps; _i < steps_1.length; _i++) {
+        var step = steps_1[_i];
+        var type = step.type;
+        if (type === CBRFormStepTypes.CBR_PROYECTO) {
+            return 'Selecciona un proyecto';
+        }
+        if (type === CBRFormStepTypes.CBR_LOCATIVAS) {
+            return 'Selecciona un padre';
+        }
+    }
+    return undefined;
+};

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/CBRIncidentsStep.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { CBRIncidentsStep as CBRIncidentsStepType } from '../../../../@Types/CBRFormStep';
+import { StepProps } from '../../Step';
+export interface CBRIncidentsStepProps extends Omit<StepProps, 'step'> {
+    /** The CBRIncidentsStep to display */
+    step: CBRIncidentsStepType;
+}
+declare function CBRIncidentsStep(props: CBRIncidentsStepProps): JSX.Element;
+export default CBRIncidentsStep;

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/CBRIncidentsStep.js

@@ -0,0 +1,23 @@
+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 } from "react/jsx-runtime";
+import { FormStyleTypes } from '../../../../constants/FormStepTypes';
+import MaterialCBRIncidentsStep from './MaterialCBRIncidentsStep/MaterialCBRIncidentsStep';
+function CBRIncidentsStep(props) {
+    switch (props.formStyle.type) {
+        case FormStyleTypes.MATERIAL:
+        default: {
+            return _jsx(MaterialCBRIncidentsStep, __assign({}, props));
+        }
+    }
+}
+export default CBRIncidentsStep;

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CBRIncidentsStepProps } from '../../CBRIncidentsStep';
+import { Incident } from '../MaterialCBRIncidentsStep';
+declare function IncidentComponent({ step, form, level, incident, formStyle, handleDelete, ...others }: CBRIncidentsStepProps & {
+    incident: Incident;
+    handleDelete: Function;
+}): JSX.Element;
+export default IncidentComponent;

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.js

@@ -0,0 +1,49 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './Incident.module.css';
+import StepComponent from '../../../../Step';
+import DeleteRoundedIcon from '@material-ui/icons/DeleteRounded';
+import TextAreaStep from '../../../../TextAreaStep/TextAreaStep';
+function IncidentComponent(_a) {
+    var step = _a.step, form = _a.form, level = _a.level, incident = _a.incident, formStyle = _a.formStyle, handleDelete = _a.handleDelete, others = __rest(_a, ["step", "form", "level", "incident", "formStyle", "handleDelete"]);
+    var spaceStep = form.steps[incident.idSpaceStep];
+    var elementStep = form.steps[incident.idElementStep];
+    var commentStep = form.steps[incident.idCommentStep];
+    if (incident.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 + ' ' + incident.num, ":"] })), _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" }) })), _jsx(StepComponent, __assign({}, others, { formStyle: formStyle, form: form, step: spaceStep, level: level + 1 })), _jsx(StepComponent, __assign({}, others, { form: form, formStyle: formStyle, step: elementStep, level: level + 1 })), _jsx(TextAreaStep, __assign({}, others, { form: form, formStyle: formStyle, step: commentStep, maxLength: 200, level: level + 1 }))] })) })));
+}
+export default IncidentComponent;

package/dist/FormComponents/Step/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/Incident/Incident.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/@Construction/CBRIncidentsStep/MaterialCBRIncidentsStep/MaterialCBRIncidentsStep.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { CBRIncidentsStepProps } from '../CBRIncidentsStep';
+export interface Incident {
+    idSpaceStep: string;
+    idElementStep: string;
+    idCommentStep: string;
+    deleted?: boolean;
+    num: number;
+}
+declare function CBRIncidentsStep(props: CBRIncidentsStepProps): JSX.Element;
+export default CBRIncidentsStep;