@arquimedes.co/eureka-forms 3.0.35-test → 3.0.36

package/dist/Shared/RoundedTimePicker/RoundedTimePicker.js

@@ -0,0 +1,314 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+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, { useCallback, useState } from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import InputLabel from '@material-ui/core/InputLabel';
+import FormControl from '@material-ui/core/FormControl';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
+import Select from '@material-ui/core/Select';
+import { ClickAwayListener, FormHelperText, MenuItem, Popper, } from '@material-ui/core';
+import ScheduleRoundedIcon from '@material-ui/icons/ScheduleRounded';
+import styles from './RoundedTimePicker.module.css';
+import RoundedTextField from '../RoundedTextField/RoundedTextField';
+import Toggle from '../Toggle/Toggle';
+var useStyles = makeStyles(function (theme) { return ({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+    },
+    formControl: {
+        margin: theme.spacing(1),
+        minWidth: 120,
+    },
+    selectEmpty: {
+        marginTop: theme.spacing(2),
+    },
+}); });
+var useOutlinedInputStyles = function (props) {
+    var _a;
+    return makeStyles({
+        root: {
+            cursor: props.cantEdit ? 'default' : 'default',
+            height: props.height,
+            borderRadius: props.borderRadius,
+            backgroundColor: props.backgroundColor,
+            fontSize: props.fontSize,
+            '& $notchedOutline': {
+                borderColor: props.outlineColor,
+                '& legend': {
+                    fontSize: 'calc(' + props.fontSize + ' * 0.75)',
+                },
+            },
+            '&:hover $notchedOutline': {
+                borderColor: props.cantEdit
+                    ? props.outlineColor
+                    : props.focusColor,
+            },
+            '& .Mui-disabled': {
+                cursor: 'default',
+                color: props.color,
+                pointerEvents: 'none',
+            },
+            '& .Mui-error': {
+                color: props.errorColor,
+            },
+            '&.Mui-error .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
+            },
+            '&.Mui-disabled .EF-MuiOutlinedInput-notchedOutline': {
+                borderColor: props.outlineColor,
+            },
+            '& .EF-MuiSelect-root': {
+                paddingLeft: props.paddingLeft,
+                paddingRight: props.paddingRight,
+            },
+            '&$focused $notchedOutline': {
+                borderColor: props.focusColor,
+            },
+            '& .EF-MuiSelect-icon': {
+                color: ((_a = props.color) === null || _a === void 0 ? void 0 : _a.startsWith('#'))
+                    ? props.color + '8a'
+                    : props.color,
+            },
+            '& .EF-MuiSelect-icon.Mui-disabled': {
+                color: props.outlineColor,
+            },
+            '& .EF-MuiSelect-icon.iconOutlined': {
+                right: 8,
+            },
+            '& .EF-MuiSelect-iconOpen': {
+                transform: props.showIcon ? 'none' : 'rotate(180deg)',
+            },
+            color: props.color,
+        },
+        focused: {},
+        notchedOutline: {},
+    });
+};
+var useLabelInputStyles = function (props) {
+    return makeStyles(function () {
+        var _a;
+        return ({
+            focused: {
+                color: props.focusColor + ' !important',
+            },
+            root: {
+                color: ((_a = props.color) === null || _a === void 0 ? void 0 : _a.startsWith('#'))
+                    ? props.color + '8a'
+                    : props.color,
+                fontWeight: props.fontWeight,
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                maxWidth: 'calc(100% - 45px)',
+                textOverflow: 'ellipsis',
+                marginTop: props.height != '40px' ? '-4px' : '0px',
+                '&.EF-MuiInputLabel-shrink': {
+                    marginTop: '0px',
+                    maxWidth: 'calc(100% - 5px)',
+                },
+                '& .Mui-error': {
+                    color: props.errorColor,
+                },
+                '&.Mui-error': {
+                    color: props.errorColor,
+                },
+            },
+        });
+    });
+};
+var useHelperTextStyles = function (props) {
+    return makeStyles(function () { return ({
+        root: {
+            color: props.helperTextColor,
+            '&.Mui-error': {
+                color: props.errorColor,
+            },
+        },
+    }); });
+};
+var useMenuStyles = function () {
+    return makeStyles(function () { return ({
+        root: {
+            '& .EF-MuiPaper-root': {
+                opacity: '0 !important',
+            },
+        },
+    }); });
+};
+function CustomSelect(_a) {
+    var _b, _c, _d;
+    var value = _a.value, onChange = _a.onChange, label = _a.label, minWidth = _a.minWidth, helperText = _a.helperText, _e = _a.color, color = _e === void 0 ? '#293241' : _e, _f = _a.errorColor, errorColor = _f === void 0 ? '#cc2936' : _f, _g = _a.focusColor, focusColor = _g === void 0 ? '#3d5a7f' : _g, _h = _a.outlineColor, outlineColor = _h === void 0 ? '#0000003b' : _h, _j = _a.helperTextColor, helperTextColor = _j === void 0 ? '#989898' : _j, _k = _a.backgroundColor, backgroundColor = _k === void 0 ? '#ffffff' : _k, _l = _a.readOnly, readOnly = _l === void 0 ? false : _l, _m = _a.borderRadius, borderRadius = _m === void 0 ? 10 : _m, _o = _a.paddingLeft, paddingLeft = _o === void 0 ? 14 : _o, _p = _a.paddingRight, paddingRight = _p === void 0 ? 32 : _p, _q = _a.cantEdit, cantEdit = _q === void 0 ? false : _q, _r = _a.containerMargin, containerMargin = _r === void 0 ? '8px' : _r, _s = _a.height, height = _s === void 0 ? '40px' : _s, _t = _a.fontSize, fontSize = _t === void 0 ? '1rem' : _t, required = _a.required, error = _a.error, pickDays = _a.pickDays, _u = _a.minDays, minDays = _u === void 0 ? 0 : _u, maxDays = _a.maxDays, pickHours = _a.pickHours, _v = _a.minHours, minHours = _v === void 0 ? 0 : _v, maxHours = _a.maxHours, pickMinutes = _a.pickMinutes, _w = _a.minMinutes, minMinutes = _w === void 0 ? 0 : _w, maxMinutes = _a.maxMinutes, working = _a.working, others = __rest(_a, ["value", "onChange", "label", "minWidth", "helperText", "color", "errorColor", "focusColor", "outlineColor", "helperTextColor", "backgroundColor", "readOnly", "borderRadius", "paddingLeft", "paddingRight", "cantEdit", "containerMargin", "height", "fontSize", "required", "error", "pickDays", "minDays", "maxDays", "pickHours", "minHours", "maxHours", "pickMinutes", "minMinutes", "maxMinutes", "working"]);
+    var StyleProps = {
+        color: color,
+        height: height,
+        readOnly: readOnly,
+        fontSize: fontSize,
+        cantEdit: cantEdit,
+        errorColor: errorColor,
+        focusColor: focusColor,
+        paddingLeft: paddingLeft,
+        paddingRight: paddingRight,
+        outlineColor: outlineColor,
+        borderRadius: borderRadius,
+        helperTextColor: helperTextColor,
+        backgroundColor: backgroundColor,
+        showIcon: true,
+    };
+    var classes = useStyles();
+    var outlinedInputClasses = useOutlinedInputStyles(StyleProps)();
+    var labelClasses = useLabelInputStyles(StyleProps)();
+    var helperTextClasses = useHelperTextStyles(StyleProps)();
+    var menuClasses = useMenuStyles()();
+    var _x = useState(false), open = _x[0], setOpen = _x[1];
+    var ref = React.useRef(null);
+    var handleChange = useCallback(function (value) {
+        var time = __assign({}, value);
+        if (time.days === 0) {
+            delete time.days;
+        }
+        if (value.hours === 0) {
+            delete time.hours;
+        }
+        if (time.minutes === 0) {
+            delete time.minutes;
+        }
+        if (working !== undefined) {
+            time.working = working;
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(time);
+    }, []);
+    var calcLabel = function () {
+        var parts = [label];
+        if (working === true)
+            parts.push('(Hábil)');
+        if (required)
+            parts.push('*');
+        return parts.join(' ');
+    };
+    return (_jsxs(React.Fragment, { children: [open && (_jsx(ClickAwayListener, __assign({ mouseEvent: "onMouseDown", onClickAway: function () { return setOpen(false); } }, { children: _jsx(Popper, __assign({ open: true, anchorEl: ref.current, placement: 'bottom-start', modifiers: {
+                        preventOverflow: {
+                            enabled: true,
+                            priority: ['top', 'bottom', 'left', 'right'],
+                            boundariesElement: 'window',
+                            padding: 20,
+                        },
+                    }, style: { zIndex: 1301 } }, { children: _jsxs("div", __assign({ className: styles.container, style: {
+                            paddingTop: error && helperText ? '0px' : '30px',
+                        } }, { children: [error && helperText && (_jsx("div", __assign({ className: styles.errorMessage, style: {
+                                    color: errorColor,
+                                } }, { children: helperText }))), pickDays && (_jsx("div", __assign({ className: styles.numberPickerContainer }, { children: _jsx(RoundedTextField, { label: "D\u00EDas", type: "number", inputProps: {
+                                        min: minDays,
+                                        max: maxDays,
+                                    }, value: ((_b = value === null || value === void 0 ? void 0 : value.days) !== null && _b !== void 0 ? _b : minDays) + '', onChange: function (e) {
+                                        handleChange(__assign(__assign({}, value), { days: parseInt(e.target.value) }));
+                                    } }) }))), pickHours && (_jsx("div", __assign({ className: styles.numberPickerContainer }, { children: _jsx(RoundedTextField, { label: "Horas", type: "number", inputProps: {
+                                        min: minHours,
+                                        max: maxHours,
+                                    }, value: ((_c = value === null || value === void 0 ? void 0 : value.hours) !== null && _c !== void 0 ? _c : minHours) + '', onChange: function (e) {
+                                        handleChange(__assign(__assign({}, value), { hours: parseInt(e.target.value) }));
+                                    } }) }))), pickMinutes && (_jsx("div", __assign({ className: styles.numberPickerContainer }, { children: _jsx(RoundedTextField, { label: "Minutos", type: "number", inputProps: {
+                                        min: minMinutes,
+                                        max: maxMinutes,
+                                    }, value: ((_d = value === null || value === void 0 ? void 0 : value.minutes) !== null && _d !== void 0 ? _d : minMinutes) + '', onChange: function (e) {
+                                        handleChange(__assign(__assign({}, value), { minutes: parseInt(e.target.value) }));
+                                    } }) }))), working === undefined && (_jsxs("div", __assign({ className: styles.workingContainer }, { children: ["H\u00E1biles:", _jsx(Toggle, { checked: !!(value === null || value === void 0 ? void 0 : value.working), disabled: working !== undefined, onChange: function (working) {
+                                            handleChange(__assign(__assign({}, value), { working: working }));
+                                        } })] })))] })) })) }))), _jsxs(FormControl, __assign({ variant: "outlined", className: classes.formControl, size: "small", style: minWidth !== undefined
+                    ? { minWidth: minWidth, outlineColor: outlineColor, margin: containerMargin }
+                    : {
+                        margin: containerMargin,
+                    }, fullWidth: true, required: required, error: error }, { children: [label && (_jsx(InputLabel, __assign({ classes: labelClasses }, { children: label }))), _jsx(Select, __assign({}, others, { innerRef: ref, title: calcTimeString(value), value: value ? 0 : '', IconComponent: ScheduleRoundedIcon, onClose: function () {
+                            if (!cantEdit)
+                                setOpen(false);
+                        }, onOpen: function () {
+                            if (cantEdit)
+                                return;
+                            setOpen(true);
+                            if (required)
+                                handleChange(value !== null && value !== void 0 ? value : {});
+                        }, onFocus: function (e) {
+                            var _a;
+                            if (!((_a = e.relatedTarget) === null || _a === void 0 ? void 0 : _a.closest('.EF-MuiPaper-root')) &&
+                                !cantEdit) {
+                                setOpen(true);
+                            }
+                        }, onBlur: function () {
+                            if (!cantEdit)
+                                setOpen(false);
+                        }, input: _jsx(OutlinedInput, { disabled: cantEdit, name: label, label: label ? calcLabel() : undefined, classes: outlinedInputClasses }), renderValue: function () {
+                            return calcTimeString(value);
+                        }, MenuProps: {
+                            PopoverClasses: menuClasses,
+                        } }, { children: _jsx(MenuItem, { value: 0 }) })), helperText !== undefined && (_jsx(FormHelperText, __assign({ classes: helperTextClasses }, { children: helperText })))] }))] }));
+}
+/**
+ * Generic textfield with apps designs. Is class due to the use in the react-hook-forms library
+ */
+var RoundedTimePicker = /** @class */ (function (_super) {
+    __extends(RoundedTimePicker, _super);
+    function RoundedTimePicker() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    RoundedTimePicker.prototype.render = function () {
+        return _jsx(CustomSelect, __assign({}, this.props));
+    };
+    return RoundedTimePicker;
+}(React.Component));
+export default RoundedTimePicker;
+function calcTimeString(value) {
+    if (!value)
+        return undefined;
+    var parts = [];
+    if (value.days) {
+        parts.push("".concat(value.days, " D\u00EDa").concat(value.days > 1 ? 's' : ''));
+    }
+    if (value.hours) {
+        parts.push("".concat(value.hours, " Hora").concat(value.hours > 1 ? 's' : ''));
+    }
+    if (value.minutes) {
+        parts.push("".concat(value.minutes, " Minuto").concat(value.minutes > 1 ? 's' : ''));
+    }
+    if (parts.length === 0)
+        return value.working ? 'Horario Hábil Más Cercano' : 'Inmediatamente';
+    if (value.working) {
+        var isMultiple = parts.length > 1 || parts[0].includes('s');
+        return parts.join(', ') + (isMultiple ? ' Hábiles' : ' Hábil');
+    }
+    return parts.join(', ');
+}

package/dist/Shared/SmartDraftRenderer/FormDecorator.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { ContentState } from 'draft-js';
 export interface DecoratorComponentProps {
     children: JSX.Element;
@@ -8,5 +9,5 @@ export interface DecoratorComponentProps {
     end: number;
     editable?: boolean;
 }
-export declare function FormDecorator({ children, entityKey }: DecoratorComponentProps): JSX.Element;
+export declare function FormDecorator({ children, entityKey, }: DecoratorComponentProps): JSX.Element;
 export declare function FormDecoratorsStrategy(contentBlock: any, callback: any, contentState: any): void;

package/dist/Shared/SmartDraftRenderer/FormDecorator.js

@@ -1,20 +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 } from "react/jsx-runtime";
 import { useContext } from 'react';
 import { DraftEntityTypes } from '../../constants/Draft/DraftEntityTypes';
+import { DraftLoadingContext } from './SmartDraftRenderer';
 import styles from './FormDecorator.module.css';
-import { DraftLoadingContext } from './DraftLoadingContext';
-export function FormDecorator({ children, entityKey }) {
-    const loading = useContext(DraftLoadingContext);
-    return (_jsx("span", { id: entityKey, className: loading ? styles.loadingDecorator : styles.decorator, style: {
+export function FormDecorator(_a) {
+    var children = _a.children, entityKey = _a.entityKey;
+    var loading = useContext(DraftLoadingContext);
+    return (_jsx("span", __assign({ id: entityKey, className: loading ? styles.loadingDecorator : styles.decorator, style: {
             overflow: 'hidden',
             position: 'relative',
             padding: '0px 3px',
             borderRadius: 12,
-        }, children: children }));
+        } }, { children: children })));
 }
 export function FormDecoratorsStrategy(contentBlock, callback, contentState) {
-    contentBlock.findEntityRanges((character) => {
-        const entityKey = character.getEntity();
-        return entityKey !== null && contentState.getEntity(entityKey).getType() === DraftEntityTypes.EUREKA;
+    contentBlock.findEntityRanges(function (character) {
+        var entityKey = character.getEntity();
+        return (entityKey !== null &&
+            contentState.getEntity(entityKey).getType() ===
+                DraftEntityTypes.EUREKA);
     }, callback);
 }

package/dist/Shared/SmartDraftRenderer/LinkDecorator.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ContentBlock, ContentState } from 'draft-js';
+export interface LinkComponentProps {
+    children: React.ReactNode;
+    contentState: ContentState;
+    entityKey?: string;
+    decoratedText: string;
+}
+export declare function LinkComponent({ children, decoratedText, }: LinkComponentProps): JSX.Element;
+export declare function findLinkEntities(contentBlock: ContentBlock, callback: (start: number, end: number) => void): void;
+export declare const linkDecorator: {
+    strategy: typeof findLinkEntities;
+    component: typeof LinkComponent;
+};

package/dist/Shared/SmartDraftRenderer/LinkDecorator.js

@@ -0,0 +1,60 @@
+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";
+export function LinkComponent(_a) {
+    var children = _a.children, decoratedText = _a.decoratedText;
+    // Add protocol if missing
+    var getHref = function (url) {
+        if (url.startsWith('http://') || url.startsWith('https://')) {
+            return url;
+        }
+        return "https://".concat(url);
+    };
+    var handleClick = function (e) {
+        e.preventDefault();
+        window.open(getHref(decoratedText), '_blank', 'noopener,noreferrer');
+    };
+    return (_jsx("a", __assign({ href: getHref(decoratedText), onClick: handleClick, style: {
+            color: '#1976d2',
+            textDecoration: 'underline',
+            cursor: 'pointer',
+        }, target: "_blank", rel: "noopener noreferrer" }, { children: children })));
+}
+export function findLinkEntities(contentBlock, callback) {
+    try {
+        var text = contentBlock.getText();
+        // Return early if no text
+        if (!text)
+            return;
+        // Create a new regex instance for each call to avoid state issues
+        var urlRegex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/g;
+        var matchArr = void 0;
+        var start = void 0;
+        while ((matchArr = urlRegex.exec(text)) !== null) {
+            start = matchArr.index;
+            callback(start, start + matchArr[0].length);
+            // Prevent infinite loop if regex doesn't advance
+            if (matchArr.index === urlRegex.lastIndex) {
+                urlRegex.lastIndex++;
+            }
+        }
+    }
+    catch (error) {
+        // Fail silently to avoid breaking the editor
+        // eslint-disable-next-line no-console
+        console.warn('LinkDecorator: Error finding link entities:', error);
+    }
+}
+export var linkDecorator = {
+    strategy: findLinkEntities,
+    component: LinkComponent,
+};

package/dist/Shared/SmartDraftRenderer/SmartDraftRenderer.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { EurekaDraft } from '../../@Types/Draft/Draft';
+export declare const DraftLoadingContext: React.Context<boolean>;
 interface SmartDraftRendererProps {
     property: string;
     draft: EurekaDraft;
@@ -7,5 +8,5 @@ interface SmartDraftRendererProps {
     dependencies: Record<string, any>;
     onChange?: (value: EurekaDraft) => void;
 }
-declare function SmartDraftRenderer({ draft, margin, onChange, property, dependencies }: SmartDraftRendererProps): JSX.Element;
+declare function SmartDraftRenderer({ draft, margin, onChange, property, dependencies, }: SmartDraftRendererProps): JSX.Element;
 export default SmartDraftRenderer;

package/dist/Shared/SmartDraftRenderer/SmartDraftRenderer.js

@@ -1,56 +1,72 @@
+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 { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
-import { useContext, useEffect, useMemo } from 'react';
+import { createContext, useContext, useEffect, useMemo } from 'react';
+import { IdFormContext } from '../../App/App';
 import { DraftApi } from '../../Services/DraftService';
 import { convertFromRaw, EditorState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
 import { produce } from 'immer';
 import CustomContext from '../../Contexts/CustomContext';
 import { FormDecoratorsStrategy, FormDecorator } from './FormDecorator';
+import { linkDecorator } from './LinkDecorator';
 import { skipToken } from '@reduxjs/toolkit/query';
 import { useAppSelector } from '../../hooks';
-import { IdFormContext } from '../../Contexts/FormContext';
-import { DraftLoadingContext } from './DraftLoadingContext';
-function SmartDraftRenderer({ draft, margin, onChange, property, dependencies }) {
-    const idForm = useContext(IdFormContext);
-    const mapDraftEntities = useContext(CustomContext).mapDraftEntities;
-    const postview = useAppSelector((state) => state.global.postview);
-    const hasEntities = useMemo(() => Object.keys(draft.entityMap).length > 0, [draft]);
-    const { data: mapped, isFetching } = DraftApi.useMapDraftQuery(!hasEntities || postview
+export var DraftLoadingContext = createContext(true);
+function SmartDraftRenderer(_a) {
+    var draft = _a.draft, margin = _a.margin, onChange = _a.onChange, property = _a.property, dependencies = _a.dependencies;
+    var idForm = useContext(IdFormContext);
+    var mapDraftEntities = useContext(CustomContext).mapDraftEntities;
+    var postview = useAppSelector(function (state) { return state.global.postview; });
+    var hasEntities = useMemo(function () { return Object.keys(draft.entityMap).length > 0; }, [draft]);
+    var _b = DraftApi.useMapDraftQuery(!hasEntities || postview
         ? skipToken
         : {
-            idForm,
-            property,
-            dependencies,
-            mapDraftEntities,
-        });
-    useEffect(() => {
+            idForm: idForm,
+            property: property,
+            dependencies: dependencies,
+            mapDraftEntities: mapDraftEntities,
+        }), mapped = _b.data, isFetching = _b.isFetching;
+    useEffect(function () {
         if (mapped && !postview)
-            onChange?.(mapped);
-    }, [mapped, onChange, postview]);
-    const { editorState, isEmpty } = useMemo(() => {
-        const content = convertFromRaw(cleanUpDraftParams(isFetching ? draft : (mapped ?? draft)));
+            onChange === null || onChange === void 0 ? void 0 : onChange(mapped);
+    }, [mapped]);
+    var _c = useMemo(function () {
+        var content = convertFromRaw(cleanUpDraftParams(isFetching ? draft : mapped !== null && mapped !== void 0 ? mapped : draft));
         return {
             editorState: EditorState.createWithContent(content),
             isEmpty: !content.hasText(),
         };
-    }, [mapped, draft, isFetching]);
+    }, [mapped, draft, isFetching]), editorState = _c.editorState, isEmpty = _c.isEmpty;
     if (isEmpty)
         return _jsx(_Fragment, {});
-    return (_jsx("div", { style: { margin }, children: _jsx(DraftLoadingContext.Provider, { value: !postview && isFetching, children: _jsx(Editor, { readOnly: true, toolbarHidden: true, editorState: editorState, editorClassName: 'Erk-Forms-Draft', customDecorators: customDecorators }) }) }));
+    return (_jsx("div", __assign({ style: { margin: margin } }, { children: _jsx(DraftLoadingContext.Provider, __assign({ value: !postview && isFetching }, { children: _jsx(Editor, { readOnly: true, toolbarHidden: true, editorState: editorState, editorClassName: 'Erk-Forms-Draft', customDecorators: customDecorators }) })) })));
 }
 export default SmartDraftRenderer;
 function cleanUpDraftParams(draft) {
-    return produce(draft, (draft) => {
-        for (const block of draft.blocks) {
-            for (const entity of block.entityRanges) {
-                const { offset, length } = entity;
+    return produce(draft, function (draft) {
+        for (var _i = 0, _a = draft.blocks; _i < _a.length; _i++) {
+            var block = _a[_i];
+            for (var _b = 0, _c = block.entityRanges; _b < _c.length; _b++) {
+                var entity = _c[_b];
+                var offset = entity.offset, length_1 = entity.length;
                 //Change text into spaces
-                block.text = block.text.replace(block.text.substring(offset, offset + length), ' '.repeat(length));
+                block.text = block.text.replace(block.text.substring(offset, offset + length_1), ' '.repeat(length_1));
             }
         }
     });
 }
-const customDecorators = [
+var customDecorators = [
+    linkDecorator,
     {
         strategy: FormDecoratorsStrategy,
         component: FormDecorator,

package/dist/Shared/Toggle/Toggle.d.ts

@@ -1,9 +1,18 @@
-interface ToggleProps {
+/// <reference types="react" />
+import { SwitchProps } from '@material-ui/core';
+interface StyleProps {
+    /** The color of the toggle */
+    color?: string;
+    /** The color of the toggle when unchecked */
+    baseColor?: string;
+}
+interface RoundedToggleProps extends Omit<SwitchProps, 'color' | 'onChange'>, StyleProps {
+    /** If the toggle is checked */
     checked?: boolean;
-    size?: 'small' | 'medium';
-    onChange?: (checked: boolean) => void | Promise<void>;
+    /** Function to call when the toggle is clicked on */
+    onChange: (checked: boolean) => void;
     /** If the Toggle is disabled */
     disabled?: boolean;
 }
-declare function ErkToggle({ checked, onChange, size, ...others }: ToggleProps): JSX.Element;
-export default ErkToggle;
+declare function RoundedToggle({ color, baseColor, checked, onChange, disabled, size, }: RoundedToggleProps): JSX.Element;
+export default RoundedToggle;

package/dist/Shared/Toggle/Toggle.js

@@ -1,33 +1,36 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { styled, Switch as MuiSwitch } from '@mui/material';
-const Styled = styled(MuiSwitch)(({ theme, checked, size }) => ({
-    marginTop: size === 'medium' ? -6 : undefined,
-    marginBottom: size === 'medium' ? -6 : undefined,
-    overflow: 'visible',
-    '& .Erk-MuiSwitch-switchBase': {
-        marginTop: size === 'small' ? -5 : undefined,
-        transform: size === 'small' ? 'translateX(-5px)' : undefined,
-        color: '#b8b8b8',
-        '&.Mui-checked': {
-            transform: size === 'small' ? 'translateX(12px)' : undefined,
-            '& .Erk-MuiSwitch-thumb': {
-                backgroundColor: theme.palette.primary.main,
-            },
+import { makeStyles, Switch } from '@material-ui/core';
+var useStyles = function (props) {
+    var _a;
+    return makeStyles({
+        root: {
+            padding: '6px 12px',
+            height: 26,
         },
-        '& .Erk-MuiSwitch-thumb': {
-            width: size === 'small' ? 16 : 20,
-            height: size === 'small' ? 16 : 20,
+        switchBase: {
+            padding: '3px 6px',
+            color: props.baseColor + ' !important',
+            '&$checked': {
+                color: props.color + ' !important',
+            },
+            '&$checked + $track': {
+                backgroundColor: props.color + ' !important',
+            },
+            '&:hover': {
+                backgroundColor: ((_a = props.color) === null || _a === void 0 ? void 0 : _a.startsWith('#'))
+                    ? props.color + '40'
+                    : props.color,
+            },
         },
-    },
-    '& .Erk-MuiSwitch-track': {
-        backgroundColor: checked ? theme.palette.primary.main : undefined,
-        opacity: checked ? 0.5 : undefined,
-    },
-}));
-function ErkToggle({ checked, onChange, size = 'medium', ...others }) {
-    return (_jsx(Styled, { ...others, checked: checked, onChange: () => {
-            if (onChange)
-                void onChange(!checked);
-        }, size: size }));
+        checked: {},
+        track: {},
+    });
+};
+function RoundedToggle(_a) {
+    var _b = _a.color, color = _b === void 0 ? '#3d5a7f' : _b, _c = _a.baseColor, baseColor = _c === void 0 ? '#b8b8b8' : _c, _d = _a.checked, checked = _d === void 0 ? true : _d, onChange = _a.onChange, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.size, size = _f === void 0 ? 'medium' : _f;
+    var classes = useStyles({ color: color, baseColor: baseColor })();
+    return (_jsx(Switch, { size: size, classes: classes, checked: checked, disabled: disabled, onChange: function (event) {
+            onChange(event.target.checked);
+        } }));
 }
-export default ErkToggle;
+export default RoundedToggle;