@fixefy/fixefy-ui-components 0.0.41 → 0.0.43

package/build/FxNotes/styles/notes.styles.js

@@ -0,0 +1,169 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    CommentDate: function() {
+        return CommentDate;
+    },
+    CommentDesc: function() {
+        return CommentDesc;
+    },
+    CommentInput: function() {
+        return CommentInput;
+    },
+    CommentUserTitle: function() {
+        return CommentUserTitle;
+    },
+    CommentWrapper: function() {
+        return CommentWrapper;
+    },
+    CommentsContainer: function() {
+        return CommentsContainer;
+    },
+    CommentsScrollWrapper: function() {
+        return CommentsScrollWrapper;
+    },
+    CommentsWrapper: function() {
+        return CommentsWrapper;
+    },
+    StyledAvatar: function() {
+        return StyledAvatar;
+    },
+    StyledPopover: function() {
+        return StyledPopover;
+    },
+    UserComment: function() {
+        return UserComment;
+    },
+    UserCommentWrapper: function() {
+        return UserCommentWrapper;
+    }
+});
+const _Popover = /*#__PURE__*/ _interop_require_default(require("@mui/material/Popover"));
+const _styles = require("@mui/material/styles");
+const _material = require("@mui/material");
+require("@fixefy/fixefy-ui-utils");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const CommentsContainer = (0, _styles.styled)('div')(()=>({
+        display: 'flex',
+        flexDirection: 'column',
+        marginTop: 16,
+        justifyContent: 'space-between',
+        alignItems: 'flex-start'
+    }));
+const CommentsWrapper = (0, _styles.styled)('div')(({})=>({
+        display: 'flex',
+        alignItems: 'flex-start',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        width: '100%'
+    }));
+const CommentsScrollWrapper = (0, _styles.styled)('div')(({})=>({
+        maxHeight: 170,
+        overflow: 'auto',
+        width: '100%'
+    }));
+const UserCommentWrapper = (0, _styles.styled)('div')(({})=>({
+        display: 'flex',
+        alignItems: 'flex-start',
+        marginTop: 16,
+        '&:first-of-type': {
+            marginTop: 0
+        }
+    }));
+const CommentWrapper = (0, _styles.styled)('div')(({})=>({
+        display: 'flex',
+        alignItems: 'center',
+        width: '100%',
+        marginBottom: 16
+    }));
+const CommentInput = (0, _styles.styled)('input')(({ theme })=>({
+        background: theme.palette.common.white,
+        border: '1px solid #F0F0F0',
+        borderRadius: '4px',
+        height: 36,
+        padding: '0 16px',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 14,
+        lineHeight: '20px',
+        letterSpacing: '0.15px',
+        color: '#172326',
+        width: '100%',
+        '&::focus-visible': {
+            outline: 'unset'
+        }
+    }));
+const StyledAvatar = (0, _styles.styled)(_material.Avatar)(({ theme })=>({
+        width: 32,
+        height: 32,
+        border: `2px solid ${theme.palette.common.white}`,
+        marginRight: '8px',
+        fontFamily: 'Open Sans',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 14,
+        lineHeight: '20px',
+        letterSpacing: '0.15px'
+    }));
+const UserComment = (0, _styles.styled)('div')(({ theme })=>({
+        background: theme.palette.greyscale.contrastText,
+        border: '1px solid #F0F0F0',
+        borderRadius: '4px',
+        padding: '8px 16px',
+        minWidth: 300,
+        display: 'flex',
+        alignItems: 'flex-start',
+        flexDirection: 'column',
+        justifyContent: 'center'
+    }));
+const CommentUserTitle = (0, _styles.styled)('div')(({})=>({
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 11,
+        lineHeight: '16px',
+        letterSpacing: '0.15px',
+        color: '#172326'
+    }));
+const CommentDate = (0, _styles.styled)('div')(({})=>({
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 11,
+        lineHeight: '16px',
+        letterSpacing: '0.15px',
+        color: '#898989'
+    }));
+const CommentDesc = (0, _styles.styled)('div')(({})=>({
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 14,
+        lineHeight: '20px',
+        letterSpacing: '0.15px',
+        color: '#172326'
+    }));
+const StyledPopover = (0, _styles.styled)(_Popover.default)(({ theme })=>({
+        position: 'absolute',
+        right: 12,
+        width: 80,
+        height: 16,
+        background: '#F7F7F7',
+        borderRadius: 4,
+        fontFamily: 'Open Sans',
+        fontStyle: 'normal',
+        fontWeight: 'normal',
+        fontSize: 11,
+        lineHeight: '16px',
+        letterSpacing: '0.1px',
+        color: theme.palette.primary.light
+    }));

package/build/FxNumberField/FxNumberField.js

@@ -0,0 +1,109 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxNumberField", {
+    enumerable: true,
+    get: function() {
+        return FxNumberField;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _number_fieldstyles = require("./styles/number_field.styles");
+const _KeyboardArrowRight = /*#__PURE__*/ _interop_require_default(require("@mui/icons-material/KeyboardArrowRight"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function FxNumberField({ placeholder, defaultValue, label, hint, onChange }) {
+    const _classes = (0, _number_fieldstyles.useStyles)();
+    const [value, setValue] = (0, _react.useState)(defaultValue || 0);
+    (0, _react.useEffect)(()=>{
+        onChange && onChange(value);
+    }, [
+        value
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+        className: _classes.container,
+        children: [
+            label && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: _classes.label,
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                className: _classes.inputWrapper,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)("input", {
+                        type: "number",
+                        placeholder: placeholder,
+                        value: value,
+                        //@ts-ignore
+                        onChange: (e)=>setValue(e.target.value)
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
+                        className: _classes.inputActions,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                                className: _classes.inputActionsPlus,
+                                onClick: ()=>setValue(value + 1),
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_KeyboardArrowRight.default, {})
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)("button", {
+                                className: _classes.inputActionsMinus,
+                                onClick: ()=>setValue(value - 1),
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_KeyboardArrowRight.default, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            hint && /*#__PURE__*/ (0, _jsxruntime.jsx)("span", {
+                className: _classes.hint,
+                children: hint
+            })
+        ]
+    });
+}

package/build/FxNumberField/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxNumberField", {
+    enumerable: true,
+    get: function() {
+        return _FxNumberField.FxNumberField;
+    }
+});
+const _FxNumberField = require("./FxNumberField");

package/build/FxNumberField/number_field_types.d.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/build/FxNumberField/styles/number_field.styles.js

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useStyles", {
+    enumerable: true,
+    get: function() {
+        return useStyles;
+    }
+});
+const _styles = require("@mui/styles");
+const useStyles = (0, _styles.makeStyles)(()=>({
+        container: {},
+        label: {
+            fontFamily: 'Open Sans',
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            fontSize: 11,
+            lineHeight: '16px',
+            letterSpacing: 0.1,
+            color: '#505050'
+        },
+        hint: {
+            fontStyle: 'normal',
+            fontWeight: 'normal',
+            fontSize: 11,
+            lineHeight: '16px',
+            display: 'flex',
+            alignItems: 'center',
+            letterSpacing: 0.1,
+            color: '#8A8A8A'
+        },
+        inputWrapper: {
+            background: '#FFFFFF',
+            border: '1px solid #EEEEEE',
+            borderRadius: 5,
+            height: 40,
+            display: 'flex',
+            width: 'fit-content',
+            ['& input']: {
+                border: 'none',
+                paddingLeft: 10,
+                borderRadius: 5,
+                ['&:focus-visible']: {
+                    outline: 'none'
+                },
+                ['&::-webkit-inner-spin-button']: {
+                    '-webkit-appearance': 'none'
+                },
+                ['&::-webkit-outer-spin-button']: {
+                    '-webkit-appearance': 'none'
+                }
+            }
+        },
+        inputActions: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center'
+        },
+        inputActionsPlus: {
+            cursor: 'pointer',
+            background: '#FFFFFF',
+            height: '50%',
+            padding: 0,
+            width: 36,
+            border: 'none',
+            borderLeft: '1px solid #EEEEEE',
+            borderBottom: '1px solid #EEEEEE',
+            borderRadius: '0 5px 0 0',
+            color: '#568793',
+            ['& svg']: {
+                transform: 'rotate(270deg)',
+                width: 20,
+                height: 20
+            }
+        },
+        inputActionsMinus: {
+            cursor: 'pointer',
+            background: '#FFFFFF',
+            height: '50%',
+            padding: 0,
+            width: 36,
+            border: 'none',
+            borderLeft: '1px solid #EEEEEE',
+            borderRadius: '0 0 5px 0',
+            color: '#568793',
+            ['& svg']: {
+                transform: 'rotate(90deg)',
+                width: 20,
+                height: 20
+            }
+        }
+    }));

package/build/FxProgressCircle/FxProgressCircle.js

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxProgressCircle", {
+    enumerable: true,
+    get: function() {
+        return FxProgressCircle;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _progress_circlestyles = require("./styles/progress_circle.styles");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const FxProgressCircle = ({ radius = 70, border = 70, value, hasLabel = true, max = 100, color, type = 'progress' })=>{
+    const _value = value ? value / max : 0;
+    const p = 2 * Math.PI * (radius - border / 2);
+    const strokeWidth = border;
+    const strokeDashoffset = p * (1 - _value);
+    const strokeDasharray = p;
+    const label = type === 'progress' ? `${value}/${max}` : `${value.toFixed()}%`;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_progress_circlestyles.Container, {
+        children: [
+            hasLabel && type === 'progress' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_progress_circlestyles.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_progress_circlestyles.Slider, {
+                // ref={(potar) => (potar = potar)}
+                viewBox: `0 0 ${radius * 2} ${radius * 2}`,
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_progress_circlestyles.SliderCircle, {
+                        style: {
+                            strokeWidth
+                        },
+                        r: radius - border / 2,
+                        cx: radius,
+                        cy: radius,
+                        color: color
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_progress_circlestyles.SliderBar, {
+                        style: {
+                            strokeWidth,
+                            strokeDashoffset,
+                            strokeDasharray
+                        },
+                        r: radius - border / 2,
+                        cx: radius,
+                        cy: radius,
+                        color: color
+                    })
+                ]
+            }),
+            hasLabel && type === 'percentage' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_progress_circlestyles.Label, {
+                sx: {
+                    ml: 1
+                },
+                children: label
+            })
+        ]
+    });
+};

package/build/FxProgressCircle/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "FxProgressCircle", {
+    enumerable: true,
+    get: function() {
+        return _FxProgressCircle.FxProgressCircle;
+    }
+});
+const _FxProgressCircle = require("./FxProgressCircle");

package/build/FxProgressCircle/progress_circle_types.d.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

package/build/FxProgressCircle/styles/progress_circle.styles.js

@@ -0,0 +1,106 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Container: function() {
+        return Container;
+    },
+    Label: function() {
+        return Label;
+    },
+    Slider: function() {
+        return Slider;
+    },
+    SliderBar: function() {
+        return SliderBar;
+    },
+    SliderCircle: function() {
+        return SliderCircle;
+    }
+});
+const _styles = require("@mui/material/styles");
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+function ownKeys(object, enumerableOnly) {
+    var keys = Object.keys(object);
+    if (Object.getOwnPropertySymbols) {
+        var symbols = Object.getOwnPropertySymbols(object);
+        if (enumerableOnly) {
+            symbols = symbols.filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+            });
+        }
+        keys.push.apply(keys, symbols);
+    }
+    return keys;
+}
+function _object_spread_props(target, source) {
+    source = source != null ? source : {};
+    if (Object.getOwnPropertyDescriptors) {
+        Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
+    } else {
+        ownKeys(Object(source)).forEach(function(key) {
+            Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+        });
+    }
+    return target;
+}
+const Container = (0, _styles.styled)("div")(({})=>({
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+    }));
+const Label = (0, _styles.styled)("span")(({ theme })=>_object_spread_props(_object_spread({}, theme.typography.body1), {
+        color: theme.palette.typography.title,
+        marginRight: 8
+    }));
+const Slider = (0, _styles.styled)("svg")(({})=>({
+        display: "block",
+        width: 22,
+        height: 22,
+        transform: "rotate(-90deg)"
+    }));
+const SliderCircle = (0, _styles.styled)("circle")(({ theme, color })=>({
+        fill: "transparent",
+        stroke: color !== null && color !== void 0 ? color : theme.palette.green2scale.main,
+        opacity: 0.1
+    }));
+const SliderBar = (0, _styles.styled)("circle")(({ theme, color })=>({
+        fill: "transparent",
+        stroke: color !== null && color !== void 0 ? color : theme.palette.green2scale.main,
+        strokeDashoffset: 0,
+        strokeDasharray: 0
+    }));