venice-ui 1.2.0 → 1.5.0

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -56,7 +56,6 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
             document.removeEventListener('click', handleClickOutside, true);
         };
     }, [open]);
-    console.log(open);
     return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
         react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }),
         open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "right" },

package/dist/cjs/components/Filters/filtersHelper.js

@@ -17,16 +17,14 @@ exports.getMaxValue = getMaxValue;
 const setTableFilterSet = (headers, elements) => {
     const filterSetting = [];
     headers.forEach((filter) => {
-        if (filter.filter) {
-            filterSetting.push({
-                label: filter.name,
-                name: filter.valueSource,
-                type: filter.filterType ? filter.filterType : 'select',
-                allowValues: (0, exports.getUniqueValues)(elements, filter.valueSource),
-                min: (0, exports.getMinValue)(elements, filter.valueSource),
-                max: (0, exports.getMaxValue)(elements, filter.valueSource),
-            });
-        }
+        filterSetting.push({
+            label: filter.name,
+            name: filter.valueSource,
+            type: filter.filterType ? filter.filterType : 'select',
+            allowValues: (0, exports.getUniqueValues)(elements, filter.valueSource),
+            min: (0, exports.getMinValue)(elements, filter.valueSource),
+            max: (0, exports.getMaxValue)(elements, filter.valueSource),
+        });
     });
     return filterSetting;
 };

package/dist/cjs/components/Form/Form.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Form = void 0;
+const react_1 = __importDefault(require("react"));
+const Input_1 = require("../Input");
+const File_1 = require("../File");
+const FormElements_1 = require("./FormElements");
+const Form = ({ formData, size = 'medium', read }) => {
+    const onChangeHandler = (name, value) => {
+        formData.action(name, value);
+    };
+    const onIntChangeHandler = (name, value) => {
+        let valueString = value;
+        if (valueString.length > 0) {
+            const modify = valueString
+                .replaceAll(',', '.')
+                .replace(/[^\d.-]/g, '')
+                .split('.');
+            let digit = modify.shift();
+            if (modify.length > 0) {
+                digit = digit + '.' + modify.join('');
+            }
+            valueString = digit;
+        }
+        formData.action(name, valueString);
+    };
+    const onFileHandler = (event) => {
+        const fileList = event.currentTarget.files;
+        if (!fileList)
+            return;
+        if (event.currentTarget.files) {
+        }
+        formData.action(event.currentTarget.name, event.currentTarget.files ? event.currentTarget.files[0] : null);
+    };
+    const selectType = (item) => {
+        switch (item.type) {
+            case 'text':
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read }));
+            case 'number':
+                return (react_1.default.createElement(Input_1.Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read }));
+            case 'increase':
+                return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read }));
+            case 'file':
+                return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
+        }
+    };
+    return (react_1.default.createElement(FormElements_1.FormWrapper, null, formData.data.map((item) => {
+        if ('row' in item) {
+            return (react_1.default.createElement(FormElements_1.FormRow, { key: `subRow-${item.row[0].name}` }, item.row.map((rowItem) => (react_1.default.createElement(FormElements_1.FormSubRow, { factor: item.row.length, key: rowItem.name }, selectType(rowItem))))));
+        }
+        else {
+            return react_1.default.createElement(FormElements_1.FormRow, { key: item.name }, selectType(item));
+        }
+    })));
+};
+exports.Form = Form;
+exports.default = exports.Form;

package/dist/cjs/components/Form/FormElements.js

@@ -0,0 +1,28 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IntputWrapperBig = exports.FormSubRow = exports.FormRow = exports.FormWrapper = void 0;
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.FormWrapper = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+exports.FormRow = styled_components_1.default.div `
+  width: 100%;
+  margin-bottom: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+`;
+exports.FormSubRow = styled_components_1.default.div `
+  display: flex;
+  width: calc((100% - ((${(p) => p.factor} - 1) * 2rem)) / ${(p) => p.factor});
+`;
+exports.IntputWrapperBig = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.6rem;
+`;

package/dist/cjs/components/Form/formHelper.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.updateForm = void 0;
+const updateForm = (state, updateState, field, value) => {
+    updateState({ ...state, [field]: value });
+};
+exports.updateForm = updateForm;

package/dist/cjs/components/Form/formTypes.js

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

package/dist/cjs/components/Form/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Form"), exports);

package/dist/cjs/components/Icons/IconsPath.js

@@ -30,10 +30,17 @@ exports.iconsPath = {
     search: 'm19.6 21-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5 7.625 5 6.312 6.312 5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z',
     more_vert: 'M12 20q-.825 0-1.412-.587Q10 18.825 10 18q0-.825.588-1.413Q11.175 16 12 16t1.413.587Q14 17.175 14 18q0 .825-.587 1.413Q12.825 20 12 20Zm0-6q-.825 0-1.412-.588Q10 12.825 10 12t.588-1.413Q11.175 10 12 10t1.413.587Q14 11.175 14 12q0 .825-.587 1.412Q12.825 14 12 14Zm0-6q-.825 0-1.412-.588Q10 6.825 10 6t.588-1.412Q11.175 4 12 4t1.413.588Q14 5.175 14 6t-.587 1.412Q12.825 8 12 8Z',
     more_horiz: 'M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14Z',
+    move: 'M15 3L17.3 5.3L14.41 8.17L15.83 9.59L18.7 6.7L21 9V3H15ZM3 9L5.3 6.7L8.17 9.59L9.59 8.17L6.7 5.3L9 3H3V9ZM9 21L6.7 18.7L9.59 15.83L8.17 14.41L5.3 17.3L3 15V21H9ZM21 15L18.7 17.3L15.83 14.41L14.41 15.83L17.3 18.7L15 21H21V15Z',
+    move_ne: 'M9 5V7H15.59L4 18.59L5.41 20L17 8.41V15H19V5H9Z',
+    move_nw: 'M5 15H7V8.41L18.59 20L20 18.59L8.41 7H15V5H5V15Z',
+    move_se: 'M19 9H17V15.59L5.41 4L4 5.41L15.59 17H9V19H19V9Z',
+    move_sw: 'M15 19V17H8.41L20 5.41L18.59 4L7 15.59V9H5V19H15Z',
     menu: 'M3 18v-2h18v2Zm0-5v-2h18v2Zm0-5V6h18v2Z',
     unlock: 'M6 8h9V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6H7q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22H6q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8Zm0 12h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17Zm-6 3V10v10Z',
     lock: 'M6 22q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8h1V6q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6ZM6 20V10v10Z',
     person: 'M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z',
+    point_here: 'M5.54 8.46L2 12L5.54 15.54L7.3 13.77L5.54 12L7.3 10.23L5.54 8.46ZM12 18.46L10.23 16.7L8.46 18.46L12 22L15.54 18.46L13.77 16.7L12 18.46ZM18.46 8.46L16.7 10.23L18.46 12L16.7 13.77L18.46 15.54L22 12L18.46 8.46ZM8.46 5.54L10.23 7.3L12 5.54L13.77 7.3L15.54 5.54L12 2L8.46 5.54Z M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z',
+    point_dot: 'M12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8ZM20.94 11C20.48 6.83 17.17 3.52 13 3.06V1H11V3.06C6.83 3.52 3.52 6.83 3.06 11H1V13H3.06C3.52 17.17 6.83 20.48 11 20.94V23H13V20.94C17.17 20.48 20.48 17.17 20.94 13H23V11H20.94ZM12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19Z',
     radio_checked: 'M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z',
     radio_unchecked: 'M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z',
     remove: 'M19 13H5V11H19V13Z',

package/dist/cjs/components/Input/Input.js

@@ -30,9 +30,34 @@ const Aligment_1 = require("../Aligment");
 const Input_styles_1 = require("./Input.styles");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
-const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, }) => {
+const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = Theme_1.mainTheme, readOnly = false, }) => {
+    const calculateNumberValue = (numberValue) => {
+        return isNaN(parseFloat(numberValue))
+            ? numberValue
+            : parseFloat(numberValue);
+    };
     const onChange = (e) => {
-        handleChange(name, e.target.value);
+        let returnedValue = type === 'number' || type === 'increase'
+            ? calculateNumberValue(e.target.value)
+            : e.target.value.toString();
+        handleChange(name, returnedValue);
+    };
+    const onBlurValidation = () => {
+        if (type === 'number' || type === 'increase') {
+            let validateValue = value;
+            if (isNaN(parseFloat(validateValue.toString()))) {
+                validateValue = min !== undefined ? min : 0;
+            }
+            if (typeof value === 'number') {
+                if (min !== undefined && value < min) {
+                    validateValue = min;
+                }
+                else if (max !== undefined && value > max) {
+                    validateValue = max;
+                }
+            }
+            handleChange(name, validateValue);
+        }
     };
     const onKeyDown = (e) => {
         if (handleSubmit && e.key === 'Enter') {
@@ -61,16 +86,18 @@ const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disab
         }
         handleChange(name, newValue);
     };
+    // ${Theme.fontSize.m}/
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
         react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
             label && (react_1.default.createElement(Input_styles_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             react_1.default.createElement(Input_styles_1.InputWrapper, { width: width },
-                react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, error: error, placeholder: placeholder, min: min, max: max, step: step }),
-                inputType === 'password' && (react_1.default.createElement(Input_styles_1.EyeIconWrapper, { size: size },
-                    react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: 'transparent' }))),
-                type === 'increase' && (react_1.default.createElement(Input_styles_1.IconsWrapper, null,
-                    react_1.default.createElement(Icons_1.Icon, { name: "add", size: 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
-                    react_1.default.createElement(Icons_1.Icon, { name: "remove", size: 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
-                error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error)))));
+                react_1.default.createElement(react_1.default.Fragment, null, readOnly ? (react_1.default.createElement(Input_styles_1.InputReadOnlyElement, { inputSize: size }, inputType === 'password' ? '******' : value)) : (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(Input_styles_1.InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                    inputType === 'password' && (react_1.default.createElement(Input_styles_1.EyeIconWrapper, { size: size },
+                        react_1.default.createElement(Icons_1.Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
+                    type === 'increase' && (react_1.default.createElement(Input_styles_1.IconsWrapper, null,
+                        react_1.default.createElement(Icons_1.Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
+                        react_1.default.createElement(Icons_1.Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
+                    error && react_1.default.createElement(Input_styles_1.InputErrorMsg, null, error))))))));
 };
 exports.Input = Input;

package/dist/cjs/components/Input/Input.styles.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.IconsWrapper = exports.EyeIconWrapper = exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputTextElement = void 0;
+exports.IconsWrapper = exports.EyeIconWrapper = exports.InputErrorMsg = exports.InputWrapper = exports.InputLabelElement = exports.InputReadOnlyElement = exports.InputTextElement = void 0;
 const common_1 = require("../common");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme");
@@ -49,6 +49,24 @@ exports.InputTextElement = styled_components_1.default.input `
   -moz-appearance: textfield;
   appearance: textfield;
 `;
+exports.InputReadOnlyElement = styled_components_1.default.div `
+  position: relative;
+  box-sizing: border-box;
+  background-color: ${(p) => p.theme.inputDefaultBackground};
+  border: 1px solid transparent;
+  border-radius: ${Theme_1.Theme.borderRadius.m};
+  font-family: 'Lato', sans-serif;
+  outline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  ${(p) => (0, common_1.setSize)(p.inputSize)}
+  ${(p) => (0, common_1.setHeight)(p.inputSize)}
+  color: ${(p) => p.theme.inputDefaultTextColor};
+  width: ${(p) => (p.width ? p.width : '100%')};
+  padding-left:0;
+  border-bottom:1px solid #dddddd;
+`;
 exports.InputLabelElement = (0, styled_components_1.default)(Typography_1.TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme_1.Theme.padding.s};`}
   ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme_1.Theme.padding.s};`}
@@ -70,7 +88,6 @@ exports.EyeIconWrapper = styled_components_1.default.div `
   ${(p) => (0, common_1.setEyeTopPosition)(p.size)}
 `;
 exports.IconsWrapper = styled_components_1.default.div `
-  display:flex;
+  display: flex;
   align-items: center;
-
 `;

package/dist/cjs/components/Table/Table.js

@@ -30,17 +30,14 @@ const Table_styles_1 = require("./Table.styles");
 const Theme_1 = require("../../Theme");
 const date_fns_1 = require("date-fns");
 const Icons_1 = require("../Icons");
-const Aligment_1 = require("../Aligment");
-const Filters_1 = require("../Filters");
 const tableHelper_1 = require("./tableHelper");
-const Chips_1 = require("../Chips");
 const DropdownMenu_1 = require("../DropdownMenu");
 const Table = ({ theme = Theme_1.mainTheme, headers, elements, 
 // isBulkAction = false,
-hover = true, selectable = true, sortable = true, filtrable = false, sort = {
+hover = true, selectable = true, sortable = true, sort = {
     name: '',
     order: 'none',
-}, filters = [], moreActions = [], onRowClick, filtersTitle = 'Select filters', filtersConfirmLabel = 'Approve', filtersCancelLabel = 'Cancel', filterClearAllLabel = 'Clear all filters', sortClearLabel = 'Clear sorting', }) => {
+}, moreActions = [], onRowClick, }) => {
     const checkHeaders = () => {
         const tableHeaders = [...headers];
         if (moreActions.length > 0) {
@@ -53,31 +50,16 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
         return tableHeaders;
     };
     const [tableProps, setTableProps] = (0, react_1.useState)({
-        elements: (0, tableHelper_1.setElements)(elements, sort, filters),
+        elements: elements,
         sort: sort,
-        filters: filters,
         headers: checkHeaders(),
     });
-    const isElementsArrayEqual = (arr1, arr2) => {
-        if (arr1.length !== arr2.length) {
-            return false;
-        }
-        return arr1.every((element, index) => element === arr2[index]);
-    };
-    (0, react_1.useEffect)(() => {
-        setTableProps({
-            ...tableProps,
-            elements: (0, tableHelper_1.setElements)(elements, sort, filters),
-        });
-    }, [elements]);
-    (0, react_1.useEffect)(() => {
-        if (!isElementsArrayEqual(elements, tableProps.elements)) {
-            setTableProps({
-                ...tableProps,
-                elements: (0, tableHelper_1.setElements)(elements, sort, filters),
-            });
-        }
-    });
+    // useEffect(() => {
+    //   setTableProps({
+    //     ...tableProps,
+    //     elements: setElements(elements, sort, filters),
+    //   })
+    // }, [elements])
     const [selectedRow, setSelectedRow] = (0, react_1.useState)('');
     const handleRowClick = (id) => {
         if (selectable) {
@@ -95,28 +77,21 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
             });
         }
     };
-    const handleFilters = (newFilters) => {
-        setTableProps({
-            ...tableProps,
-            elements: (0, tableHelper_1.setElements)(elements, tableProps.sort, newFilters),
-            filters: newFilters,
-        });
-    };
-    const resetSorting = () => {
-        setTableProps({
-            ...tableProps,
-            elements: (0, tableHelper_1.setElements)(elements, { name: '', order: 'asc' }, tableProps.filters),
-            sort: {
-                name: '',
-                order: 'asc',
-            },
-        });
-    };
+    // const resetSorting = () => {
+    //   setTableProps({
+    //     ...tableProps,
+    //     elements: setElements(
+    //       elements,
+    //       { name: '', order: 'asc' },
+    //       tableProps.filters,
+    //     ),
+    //     sort: {
+    //       name: '',
+    //       order: 'asc',
+    //     },
+    //   })
+    // }
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: theme },
-        (filtrable || sortable) && (react_1.default.createElement(Table_styles_1.TableTopBar, null,
-            react_1.default.createElement(Aligment_1.Aligment, { justify: "flex-start", gap: 10 },
-                filtrable && (react_1.default.createElement(Filters_1.Filters, { title: filtersTitle, labelConfirm: filtersConfirmLabel, labelClose: filtersCancelLabel, labelClearAll: filterClearAllLabel, handleSubmitFilters: handleFilters, filters: (0, Filters_1.setTableFilterSet)(headers, elements) })),
-                sortable && tableProps.sort.name !== '' && (react_1.default.createElement(Chips_1.Chips, { label: sortClearLabel, handleClose: resetSorting }))))),
         react_1.default.createElement(Table_styles_1.TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             react_1.default.createElement(Table_styles_1.TableHead, null,
                 react_1.default.createElement(Table_styles_1.TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (react_1.default.createElement(react_1.default.Fragment, null, header.action ? (react_1.default.createElement(Table_styles_1.OptionTableHeaderCell, null)) : (react_1.default.createElement(Table_styles_1.TableHeaderCell, { key: header.name, sortable: sortable, onClick: () => handleHeaderCellClick(header.valueSource), isSorted: tableProps.sort.name === header.valueSource &&
@@ -127,7 +102,7 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
                         react_1.default.createElement(Icons_1.Icon, { name: tableProps.sort.order === 'asc'
                                 ? 'arrow_drop_down'
                                 : 'arrow_drop_up', iconColor: theme.tableCellSortIcon, size: 20 })))))))))),
-            react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (react_1.default.createElement(react_1.default.Fragment, null, header.action ? (react_1.default.createElement(Table_styles_1.OptionTableCell, null,
+            react_1.default.createElement("tbody", null, tableProps.elements.map((item) => (react_1.default.createElement(Table_styles_1.TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (react_1.default.createElement(react_1.default.Fragment, null, header.action ? (react_1.default.createElement(Table_styles_1.OptionTableCell, { key: `${item.id}-${header.name}-action` },
                 react_1.default.createElement(Table_styles_1.OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
                     react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor })))) : (react_1.default.createElement(Table_styles_1.TableCell, { key: `${item.id}-${header.name}` }, header.date
                 ? (0, date_fns_1.format)(item[header.valueSource], 'dd-MM-yyyy')

package/dist/cjs/components/Table/Table.styles.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.OptionTableCellWrapper = exports.OptionTableCell = exports.TableTopBar = exports.TableCell = exports.TableRow = exports.TableHeaderSortIcon = exports.OptionTableHeaderCell = exports.TableHeaderCell = exports.TableHead = exports.TableWrapper = void 0;
+exports.OptionTableCellWrapper = exports.OptionTableCell = exports.TableCell = exports.TableRow = exports.TableHeaderSortIcon = exports.OptionTableHeaderCell = exports.TableHeaderCell = exports.TableHead = exports.TableWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 exports.TableWrapper = styled_components_1.default.table `
   width: 100%;
@@ -79,9 +79,6 @@ exports.TableCell = styled_components_1.default.td `
   padding: 8px;
   border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
 `;
-exports.TableTopBar = styled_components_1.default.div `
-  padding-bottom: 4px;
-`;
 exports.OptionTableCell = styled_components_1.default.td `
   border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
   text-align: center;

package/dist/cjs/components/common/inputStyles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelPosition = exports.panelPosition = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setButtonSize = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPadding = exports.sizes = exports.defaultStyles = void 0;
+exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelPosition = exports.panelPosition = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setButtonSize = exports.setHeight = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPadding = exports.height = exports.sizes = exports.defaultStyles = void 0;
 const polished_1 = require("polished");
 const Theme_1 = require("../../Theme");
 exports.defaultStyles = `
@@ -30,6 +30,18 @@ exports.sizes = {
   line-height: ${Theme_1.Theme.lineHeight.l};
   `,
 };
+exports.height = {
+    small: `
+  height: calc( ${Theme_1.Theme.lineHeight.s} + 2 * (${Theme_1.Theme.padding.s}) + 2px);
+  `,
+    medium: `
+  height: calc( ${Theme_1.Theme.lineHeight.m} + 2 * (${Theme_1.Theme.padding.m}) + 2px);
+
+  `,
+    large: `
+  font-height: calc( ${Theme_1.Theme.lineHeight.l} + 2 * (${Theme_1.Theme.padding.m}) + 2px);
+  `,
+};
 exports.inputPadding = {
     small: `
   padding: ${Theme_1.Theme.padding.s};
@@ -79,6 +91,10 @@ const setSize = (size) => {
     return exports.sizes[size] + exports.inputPadding[size];
 };
 exports.setSize = setSize;
+const setHeight = (size) => {
+    return exports.height[size];
+};
+exports.setHeight = setHeight;
 const setButtonSize = (size, loader) => {
     return (exports.sizes[size] + (loader ? exports.buttonLoaderPadding[size] : exports.buttonPadding[size]));
 };

package/dist/cjs/index.js

@@ -23,6 +23,7 @@ __exportStar(require("./components/Dropdown"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
 __exportStar(require("./components/ElementHeader"), exports);
 __exportStar(require("./components/DropdownMenu"), exports);
+__exportStar(require("./components/Form"), exports);
 __exportStar(require("./components/File"), exports);
 __exportStar(require("./components/Filters"), exports);
 __exportStar(require("./components/Icons"), exports);

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -30,7 +30,6 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
             document.removeEventListener('click', handleClickOutside, true);
         };
     }, [open]);
-    console.log(open);
     return (React.createElement(DropdownMenuElement, null,
         React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }),
         open && (React.createElement(Panel, { ref: ref, size: size, position: "right" },

package/dist/esm/components/Filters/filtersHelper.js

@@ -11,16 +11,14 @@ export const getMaxValue = (elements, source) => {
 export const setTableFilterSet = (headers, elements) => {
     const filterSetting = [];
     headers.forEach((filter) => {
-        if (filter.filter) {
-            filterSetting.push({
-                label: filter.name,
-                name: filter.valueSource,
-                type: filter.filterType ? filter.filterType : 'select',
-                allowValues: getUniqueValues(elements, filter.valueSource),
-                min: getMinValue(elements, filter.valueSource),
-                max: getMaxValue(elements, filter.valueSource),
-            });
-        }
+        filterSetting.push({
+            label: filter.name,
+            name: filter.valueSource,
+            type: filter.filterType ? filter.filterType : 'select',
+            allowValues: getUniqueValues(elements, filter.valueSource),
+            min: getMinValue(elements, filter.valueSource),
+            max: getMaxValue(elements, filter.valueSource),
+        });
     });
     return filterSetting;
 };

package/dist/esm/components/Form/Form.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { Input } from '../Input';
+import { File } from '../File';
+import { FormRow, FormSubRow, FormWrapper } from './FormElements';
+export const Form = ({ formData, size = 'medium', read }) => {
+    const onChangeHandler = (name, value) => {
+        formData.action(name, value);
+    };
+    const onIntChangeHandler = (name, value) => {
+        let valueString = value;
+        if (valueString.length > 0) {
+            const modify = valueString
+                .replaceAll(',', '.')
+                .replace(/[^\d.-]/g, '')
+                .split('.');
+            let digit = modify.shift();
+            if (modify.length > 0) {
+                digit = digit + '.' + modify.join('');
+            }
+            valueString = digit;
+        }
+        formData.action(name, valueString);
+    };
+    const onFileHandler = (event) => {
+        const fileList = event.currentTarget.files;
+        if (!fileList)
+            return;
+        if (event.currentTarget.files) {
+        }
+        formData.action(event.currentTarget.name, event.currentTarget.files ? event.currentTarget.files[0] : null);
+    };
+    const selectType = (item) => {
+        switch (item.type) {
+            case 'text':
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "text", size: size, handleChange: onChangeHandler, readOnly: read }));
+            case 'number':
+                return (React.createElement(Input, { label: item.label, value: item.value, name: item.name, type: "number", size: size, min: item.min, max: item.max, step: item.step, handleChange: onIntChangeHandler, readOnly: read }));
+            case 'increase':
+                return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read }));
+            case 'file':
+                return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
+        }
+    };
+    return (React.createElement(FormWrapper, null, formData.data.map((item) => {
+        if ('row' in item) {
+            return (React.createElement(FormRow, { key: `subRow-${item.row[0].name}` }, item.row.map((rowItem) => (React.createElement(FormSubRow, { factor: item.row.length, key: rowItem.name }, selectType(rowItem))))));
+        }
+        else {
+            return React.createElement(FormRow, { key: item.name }, selectType(item));
+        }
+    })));
+};
+export default Form;

package/dist/esm/components/Form/FormElements.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+export const FormWrapper = styled.div `
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+`;
+export const FormRow = styled.div `
+  width: 100%;
+  margin-bottom: 0.8rem;
+  display: flex;
+  justify-content: space-between;
+`;
+export const FormSubRow = styled.div `
+  display: flex;
+  width: calc((100% - ((${(p) => p.factor} - 1) * 2rem)) / ${(p) => p.factor});
+`;
+export const IntputWrapperBig = styled.div `
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.6rem;
+`;

package/dist/esm/components/Form/formHelper.js

@@ -0,0 +1,3 @@
+export const updateForm = (state, updateState, field, value) => {
+    updateState({ ...state, [field]: value });
+};

package/dist/esm/components/Form/formTypes.js

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/Form/index.js

@@ -0,0 +1 @@
+export * from './Form';

package/dist/esm/components/Icons/IconsPath.js

@@ -27,10 +27,17 @@ export const iconsPath = {
     search: 'm19.6 21-6.3-6.3q-.75.6-1.725.95Q10.6 16 9.5 16q-2.725 0-4.612-1.887Q3 12.225 3 9.5q0-2.725 1.888-4.613Q6.775 3 9.5 3t4.613 1.887Q16 6.775 16 9.5q0 1.1-.35 2.075-.35.975-.95 1.725l6.3 6.3ZM9.5 14q1.875 0 3.188-1.312Q14 11.375 14 9.5q0-1.875-1.312-3.188Q11.375 5 9.5 5 7.625 5 6.312 6.312 5 7.625 5 9.5q0 1.875 1.312 3.188Q7.625 14 9.5 14Z',
     more_vert: 'M12 20q-.825 0-1.412-.587Q10 18.825 10 18q0-.825.588-1.413Q11.175 16 12 16t1.413.587Q14 17.175 14 18q0 .825-.587 1.413Q12.825 20 12 20Zm0-6q-.825 0-1.412-.588Q10 12.825 10 12t.588-1.413Q11.175 10 12 10t1.413.587Q14 11.175 14 12q0 .825-.587 1.412Q12.825 14 12 14Zm0-6q-.825 0-1.412-.588Q10 6.825 10 6t.588-1.412Q11.175 4 12 4t1.413.588Q14 5.175 14 6t-.587 1.412Q12.825 8 12 8Z',
     more_horiz: 'M6 14C5.45 14 4.97917 13.8042 4.5875 13.4125C4.19583 13.0208 4 12.55 4 12C4 11.45 4.19583 10.9792 4.5875 10.5875C4.97917 10.1958 5.45 10 6 10C6.55 10 7.02083 10.1958 7.4125 10.5875C7.80417 10.9792 8 11.45 8 12C8 12.55 7.80417 13.0208 7.4125 13.4125C7.02083 13.8042 6.55 14 6 14ZM12 14C11.45 14 10.9792 13.8042 10.5875 13.4125C10.1958 13.0208 10 12.55 10 12C10 11.45 10.1958 10.9792 10.5875 10.5875C10.9792 10.1958 11.45 10 12 10C12.55 10 13.0208 10.1958 13.4125 10.5875C13.8042 10.9792 14 11.45 14 12C14 12.55 13.8042 13.0208 13.4125 13.4125C13.0208 13.8042 12.55 14 12 14ZM18 14C17.45 14 16.9792 13.8042 16.5875 13.4125C16.1958 13.0208 16 12.55 16 12C16 11.45 16.1958 10.9792 16.5875 10.5875C16.9792 10.1958 17.45 10 18 10C18.55 10 19.0208 10.1958 19.4125 10.5875C19.8042 10.9792 20 11.45 20 12C20 12.55 19.8042 13.0208 19.4125 13.4125C19.0208 13.8042 18.55 14 18 14Z',
+    move: 'M15 3L17.3 5.3L14.41 8.17L15.83 9.59L18.7 6.7L21 9V3H15ZM3 9L5.3 6.7L8.17 9.59L9.59 8.17L6.7 5.3L9 3H3V9ZM9 21L6.7 18.7L9.59 15.83L8.17 14.41L5.3 17.3L3 15V21H9ZM21 15L18.7 17.3L15.83 14.41L14.41 15.83L17.3 18.7L15 21H21V15Z',
+    move_ne: 'M9 5V7H15.59L4 18.59L5.41 20L17 8.41V15H19V5H9Z',
+    move_nw: 'M5 15H7V8.41L18.59 20L20 18.59L8.41 7H15V5H5V15Z',
+    move_se: 'M19 9H17V15.59L5.41 4L4 5.41L15.59 17H9V19H19V9Z',
+    move_sw: 'M15 19V17H8.41L20 5.41L18.59 4L7 15.59V9H5V19H15Z',
     menu: 'M3 18v-2h18v2Zm0-5v-2h18v2Zm0-5V6h18v2Z',
     unlock: 'M6 8h9V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6H7q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22H6q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8Zm0 12h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17Zm-6 3V10v10Z',
     lock: 'M6 22q-.825 0-1.412-.587Q4 20.825 4 20V10q0-.825.588-1.413Q5.175 8 6 8h1V6q0-2.075 1.463-3.538Q9.925 1 12 1t3.538 1.462Q17 3.925 17 6v2h1q.825 0 1.413.587Q20 9.175 20 10v10q0 .825-.587 1.413Q18.825 22 18 22Zm0-2h12V10H6v10Zm6-3q.825 0 1.413-.587Q14 15.825 14 15q0-.825-.587-1.413Q12.825 13 12 13q-.825 0-1.412.587Q10 14.175 10 15q0 .825.588 1.413Q11.175 17 12 17ZM9 8h6V6q0-1.25-.875-2.125T12 3q-1.25 0-2.125.875T9 6ZM6 20V10v10Z',
     person: 'M12 12q-1.65 0-2.825-1.175Q8 9.65 8 8q0-1.65 1.175-2.825Q10.35 4 12 4q1.65 0 2.825 1.175Q16 6.35 16 8q0 1.65-1.175 2.825Q13.65 12 12 12Zm-8 8v-2.8q0-.85.438-1.563.437-.712 1.162-1.087 1.55-.775 3.15-1.163Q10.35 13 12 13t3.25.387q1.6.388 3.15 1.163.725.375 1.162 1.087Q20 16.35 20 17.2V20Zm2-2h12v-.8q0-.275-.137-.5-.138-.225-.363-.35-1.35-.675-2.725-1.013Q13.4 15 12 15t-2.775.337Q7.85 15.675 6.5 16.35q-.225.125-.362.35-.138.225-.138.5Zm6-8q.825 0 1.413-.588Q14 8.825 14 8t-.587-1.412Q12.825 6 12 6q-.825 0-1.412.588Q10 7.175 10 8t.588 1.412Q11.175 10 12 10Zm0-2Zm0 10Z',
+    point_here: 'M5.54 8.46L2 12L5.54 15.54L7.3 13.77L5.54 12L7.3 10.23L5.54 8.46ZM12 18.46L10.23 16.7L8.46 18.46L12 22L15.54 18.46L13.77 16.7L12 18.46ZM18.46 8.46L16.7 10.23L18.46 12L16.7 13.77L18.46 15.54L22 12L18.46 8.46ZM8.46 5.54L10.23 7.3L12 5.54L13.77 7.3L15.54 5.54L12 2L8.46 5.54Z M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z',
+    point_dot: 'M12 8C9.79 8 8 9.79 8 12C8 14.21 9.79 16 12 16C14.21 16 16 14.21 16 12C16 9.79 14.21 8 12 8ZM20.94 11C20.48 6.83 17.17 3.52 13 3.06V1H11V3.06C6.83 3.52 3.52 6.83 3.06 11H1V13H3.06C3.52 17.17 6.83 20.48 11 20.94V23H13V20.94C17.17 20.48 20.48 17.17 20.94 13H23V11H20.94ZM12 19C8.13 19 5 15.87 5 12C5 8.13 8.13 5 12 5C15.87 5 19 8.13 19 12C19 15.87 15.87 19 12 19Z',
     radio_checked: 'M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20ZM12 17C14.7614 17 17 14.7614 17 12C17 9.23858 14.7614 7 12 7C9.23858 7 7 9.23858 7 12C7 14.7614 9.23858 17 12 17Z',
     radio_unchecked: 'M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2ZM12 20C7.58 20 4 16.42 4 12C4 7.58 7.58 4 12 4C16.42 4 20 7.58 20 12C20 16.42 16.42 20 12 20Z',
     remove: 'M19 13H5V11H19V13Z',

package/dist/esm/components/Input/Input.js

@@ -1,12 +1,37 @@
 import React, { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
 import { Aligment } from '../Aligment';
-import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, } from './Input.styles';
+import { InputTextElement, InputLabelElement, InputErrorMsg, InputWrapper, EyeIconWrapper, IconsWrapper, InputReadOnlyElement, } from './Input.styles';
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
-export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, }) => {
+export const Input = ({ label, labelPosition = 'top', value, type = 'text', name, disabled = false, size = 'medium', handleChange, handleSubmit, width, error, placeholder, min, max, step = 0.1, autoFocus, theme = mainTheme, readOnly = false, }) => {
+    const calculateNumberValue = (numberValue) => {
+        return isNaN(parseFloat(numberValue))
+            ? numberValue
+            : parseFloat(numberValue);
+    };
     const onChange = (e) => {
-        handleChange(name, e.target.value);
+        let returnedValue = type === 'number' || type === 'increase'
+            ? calculateNumberValue(e.target.value)
+            : e.target.value.toString();
+        handleChange(name, returnedValue);
+    };
+    const onBlurValidation = () => {
+        if (type === 'number' || type === 'increase') {
+            let validateValue = value;
+            if (isNaN(parseFloat(validateValue.toString()))) {
+                validateValue = min !== undefined ? min : 0;
+            }
+            if (typeof value === 'number') {
+                if (min !== undefined && value < min) {
+                    validateValue = min;
+                }
+                else if (max !== undefined && value > max) {
+                    validateValue = max;
+                }
+            }
+            handleChange(name, validateValue);
+        }
     };
     const onKeyDown = (e) => {
         if (handleSubmit && e.key === 'Enter') {
@@ -35,15 +60,17 @@ export const Input = ({ label, labelPosition = 'top', value, type = 'text', name
         }
         handleChange(name, newValue);
     };
+    // ${Theme.fontSize.m}/
     return (React.createElement(ThemeProvider, { theme: theme },
         React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap' },
             label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
             React.createElement(InputWrapper, { width: width },
-                React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, error: error, placeholder: placeholder, min: min, max: max, step: step }),
-                inputType === 'password' && (React.createElement(EyeIconWrapper, { size: size },
-                    React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: 'transparent' }))),
-                type === 'increase' && (React.createElement(IconsWrapper, null,
-                    React.createElement(Icon, { name: "add", size: 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
-                    React.createElement(Icon, { name: "remove", size: 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
-                error && React.createElement(InputErrorMsg, null, error)))));
+                React.createElement(React.Fragment, null, readOnly ? (React.createElement(InputReadOnlyElement, { inputSize: size }, inputType === 'password' ? '******' : value)) : (React.createElement(React.Fragment, null,
+                    React.createElement(InputTextElement, { autoFocus: autoFocus, inputSize: size, type: showPassword ? 'text' : inputType, disabled: disabled, name: name, value: value, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, error: error, placeholder: placeholder, min: min, max: max, step: step }),
+                    inputType === 'password' && (React.createElement(EyeIconWrapper, { size: size },
+                        React.createElement(Icon, { name: showPassword ? 'visability_off' : 'visibility', size: 24, onClick: tooglePassword, iconColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" }))),
+                    type === 'increase' && (React.createElement(IconsWrapper, null,
+                        React.createElement(Icon, { name: "add", size: size === 'small' ? 16 : 24, onClick: () => increaseValue(value), iconColor: theme.inputDefaultTextColor }),
+                        React.createElement(Icon, { name: "remove", size: size === 'small' ? 16 : 24, onClick: () => decreaseValue(value), iconColor: theme.inputDefaultTextColor }))),
+                    error && React.createElement(InputErrorMsg, null, error))))))));
 };

package/dist/esm/components/Input/Input.styles.js

@@ -1,4 +1,4 @@
-import { setSize, setEyeTopPosition } from '../common';
+import { setSize, setEyeTopPosition, setHeight } from '../common';
 import styled from 'styled-components';
 import { Theme } from '../../Theme';
 import { TextLabel } from '../Typography';
@@ -43,6 +43,24 @@ export const InputTextElement = styled.input `
   -moz-appearance: textfield;
   appearance: textfield;
 `;
+export const InputReadOnlyElement = styled.div `
+  position: relative;
+  box-sizing: border-box;
+  background-color: ${(p) => p.theme.inputDefaultBackground};
+  border: 1px solid transparent;
+  border-radius: ${Theme.borderRadius.m};
+  font-family: 'Lato', sans-serif;
+  outline: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  ${(p) => setSize(p.inputSize)}
+  ${(p) => setHeight(p.inputSize)}
+  color: ${(p) => p.theme.inputDefaultTextColor};
+  width: ${(p) => (p.width ? p.width : '100%')};
+  padding-left:0;
+  border-bottom:1px solid #dddddd;
+`;
 export const InputLabelElement = styled(TextLabel) `
   ${(p) => p.labelPosition === 'top' && `margin-bottom: ${Theme.padding.s};`}
   ${(p) => p.labelPosition === 'left' && `margin-right: ${Theme.padding.s};`}
@@ -64,7 +82,6 @@ export const EyeIconWrapper = styled.div `
   ${(p) => setEyeTopPosition(p.size)}
 `;
 export const IconsWrapper = styled.div `
-  display:flex;
+  display: flex;
   align-items: center;
-
 `;

package/dist/esm/components/Table/Table.js

@@ -1,20 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { ThemeProvider } from 'styled-components';
-import { OptionTableCell, OptionTableCellWrapper, OptionTableHeaderCell, TableCell, TableHead, TableHeaderCell, TableHeaderSortIcon, TableRow, TableTopBar, TableWrapper, } from './Table.styles';
+import { OptionTableCell, OptionTableCellWrapper, OptionTableHeaderCell, TableCell, TableHead, TableHeaderCell, TableHeaderSortIcon, TableRow, TableWrapper, } from './Table.styles';
 import { mainTheme } from '../../Theme';
 import { format } from 'date-fns';
 import { Icon } from '../Icons';
-import { Aligment } from '../Aligment';
-import { Filters, setTableFilterSet } from '../Filters';
-import { applySort, setElements, setSortParams } from './tableHelper';
-import { Chips } from '../Chips';
+import { applySort, setSortParams } from './tableHelper';
 import { DropdownMenu } from '../DropdownMenu';
 export const Table = ({ theme = mainTheme, headers, elements, 
 // isBulkAction = false,
-hover = true, selectable = true, sortable = true, filtrable = false, sort = {
+hover = true, selectable = true, sortable = true, sort = {
     name: '',
     order: 'none',
-}, filters = [], moreActions = [], onRowClick, filtersTitle = 'Select filters', filtersConfirmLabel = 'Approve', filtersCancelLabel = 'Cancel', filterClearAllLabel = 'Clear all filters', sortClearLabel = 'Clear sorting', }) => {
+}, moreActions = [], onRowClick, }) => {
     const checkHeaders = () => {
         const tableHeaders = [...headers];
         if (moreActions.length > 0) {
@@ -27,31 +24,16 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
         return tableHeaders;
     };
     const [tableProps, setTableProps] = useState({
-        elements: setElements(elements, sort, filters),
+        elements: elements,
         sort: sort,
-        filters: filters,
         headers: checkHeaders(),
     });
-    const isElementsArrayEqual = (arr1, arr2) => {
-        if (arr1.length !== arr2.length) {
-            return false;
-        }
-        return arr1.every((element, index) => element === arr2[index]);
-    };
-    useEffect(() => {
-        setTableProps({
-            ...tableProps,
-            elements: setElements(elements, sort, filters),
-        });
-    }, [elements]);
-    useEffect(() => {
-        if (!isElementsArrayEqual(elements, tableProps.elements)) {
-            setTableProps({
-                ...tableProps,
-                elements: setElements(elements, sort, filters),
-            });
-        }
-    });
+    // useEffect(() => {
+    //   setTableProps({
+    //     ...tableProps,
+    //     elements: setElements(elements, sort, filters),
+    //   })
+    // }, [elements])
     const [selectedRow, setSelectedRow] = useState('');
     const handleRowClick = (id) => {
         if (selectable) {
@@ -69,28 +51,21 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
             });
         }
     };
-    const handleFilters = (newFilters) => {
-        setTableProps({
-            ...tableProps,
-            elements: setElements(elements, tableProps.sort, newFilters),
-            filters: newFilters,
-        });
-    };
-    const resetSorting = () => {
-        setTableProps({
-            ...tableProps,
-            elements: setElements(elements, { name: '', order: 'asc' }, tableProps.filters),
-            sort: {
-                name: '',
-                order: 'asc',
-            },
-        });
-    };
+    // const resetSorting = () => {
+    //   setTableProps({
+    //     ...tableProps,
+    //     elements: setElements(
+    //       elements,
+    //       { name: '', order: 'asc' },
+    //       tableProps.filters,
+    //     ),
+    //     sort: {
+    //       name: '',
+    //       order: 'asc',
+    //     },
+    //   })
+    // }
     return (React.createElement(ThemeProvider, { theme: theme },
-        (filtrable || sortable) && (React.createElement(TableTopBar, null,
-            React.createElement(Aligment, { justify: "flex-start", gap: 10 },
-                filtrable && (React.createElement(Filters, { title: filtersTitle, labelConfirm: filtersConfirmLabel, labelClose: filtersCancelLabel, labelClearAll: filterClearAllLabel, handleSubmitFilters: handleFilters, filters: setTableFilterSet(headers, elements) })),
-                sortable && tableProps.sort.name !== '' && (React.createElement(Chips, { label: sortClearLabel, handleClose: resetSorting }))))),
         React.createElement(TableWrapper, { cellPadding: "0", cellSpacing: "0" },
             React.createElement(TableHead, null,
                 React.createElement(TableRow, { hover: false, selectable: false, active: false }, tableProps.headers.map((header) => (React.createElement(React.Fragment, null, header.action ? (React.createElement(OptionTableHeaderCell, null)) : (React.createElement(TableHeaderCell, { key: header.name, sortable: sortable, onClick: () => handleHeaderCellClick(header.valueSource), isSorted: tableProps.sort.name === header.valueSource &&
@@ -101,7 +76,7 @@ hover = true, selectable = true, sortable = true, filtrable = false, sort = {
                         React.createElement(Icon, { name: tableProps.sort.order === 'asc'
                                 ? 'arrow_drop_down'
                                 : 'arrow_drop_up', iconColor: theme.tableCellSortIcon, size: 20 })))))))))),
-            React.createElement("tbody", null, tableProps.elements.map((item) => (React.createElement(TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (React.createElement(React.Fragment, null, header.action ? (React.createElement(OptionTableCell, null,
+            React.createElement("tbody", null, tableProps.elements.map((item) => (React.createElement(TableRow, { key: item.id, hover: hover, active: selectedRow === item.id, selectable: selectable, onClick: () => handleRowClick(item.id) }, tableProps.headers.map((header) => (React.createElement(React.Fragment, null, header.action ? (React.createElement(OptionTableCell, { key: `${item.id}-${header.name}-action` },
                 React.createElement(OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
                     React.createElement(DropdownMenu, { options: moreActions, targetID: item.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor })))) : (React.createElement(TableCell, { key: `${item.id}-${header.name}` }, header.date
                 ? format(item[header.valueSource], 'dd-MM-yyyy')

package/dist/esm/components/Table/Table.styles.js

@@ -73,9 +73,6 @@ export const TableCell = styled.td `
   padding: 8px;
   border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
 `;
-export const TableTopBar = styled.div `
-  padding-bottom: 4px;
-`;
 export const OptionTableCell = styled.td `
   border-bottom: 1px solid ${(p) => p.theme.tableBorderColor};
   text-align: center;

package/dist/esm/components/common/inputStyles.js

@@ -27,6 +27,18 @@ export const sizes = {
   line-height: ${Theme.lineHeight.l};
   `,
 };
+export const height = {
+    small: `
+  height: calc( ${Theme.lineHeight.s} + 2 * (${Theme.padding.s}) + 2px);
+  `,
+    medium: `
+  height: calc( ${Theme.lineHeight.m} + 2 * (${Theme.padding.m}) + 2px);
+
+  `,
+    large: `
+  font-height: calc( ${Theme.lineHeight.l} + 2 * (${Theme.padding.m}) + 2px);
+  `,
+};
 export const inputPadding = {
     small: `
   padding: ${Theme.padding.s};
@@ -75,6 +87,9 @@ export const eyeTopPosition = {
 export const setSize = (size) => {
     return sizes[size] + inputPadding[size];
 };
+export const setHeight = (size) => {
+    return height[size];
+};
 export const setButtonSize = (size, loader) => {
     return (sizes[size] + (loader ? buttonLoaderPadding[size] : buttonPadding[size]));
 };

package/dist/esm/index.js

@@ -7,6 +7,7 @@ export * from './components/Dropdown';
 export * from './components/DropdownMenu';
 export * from './components/ElementHeader';
 export * from './components/DropdownMenu';
+export * from './components/Form';
 export * from './components/File';
 export * from './components/Filters';
 export * from './components/Icons';

package/dist/types/components/Filters/Filters.d.ts

@@ -1,4 +1,10 @@
 import { FC } from 'react';
+export interface IFilterConfigProps {
+    name: string;
+    valueSource: string;
+    date?: boolean;
+    filterType?: 'select' | 'range';
+}
 export interface IApplyFilterResults {
     name: string;
     type: string;

package/dist/types/components/Filters/filtersHelper.d.ts

@@ -1,8 +1,7 @@
-import { ITableHeaderProps } from '../Table';
-import { IApplyFilterResults, IFilterProps } from './Filters';
+import { IApplyFilterResults, IFilterConfigProps, IFilterProps } from './Filters';
 export type TAllowValues = 'string' | 'number';
 export declare const getUniqueValues: (elements: any, source: string) => string[];
 export declare const getMinValue: (elements: any, source: string) => number;
 export declare const getMaxValue: (elements: any, source: string) => number;
-export declare const setTableFilterSet: (headers: ITableHeaderProps[], elements: any) => IFilterProps[];
+export declare const setTableFilterSet: (headers: IFilterConfigProps[], elements: any) => IFilterProps[];
 export declare const applyFiltersToTable: (elements: any, filters: IApplyFilterResults[]) => any[];

package/dist/types/components/Form/Form.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { FormSourceData } from './formTypes';
+import { InputSize } from 'types';
+export interface FormProps {
+    formData: FormSourceData;
+    size?: InputSize;
+    read?: boolean;
+}
+export declare const Form: FC<FormProps>;
+export default Form;

package/dist/types/components/Form/FormElements.d.ts

@@ -0,0 +1,8 @@
+export declare const FormWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const FormRow: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface FormSubRowProps {
+    factor: number;
+}
+export declare const FormSubRow: import("styled-components").StyledComponent<"div", any, FormSubRowProps, never>;
+export declare const IntputWrapperBig: import("styled-components").StyledComponent<"div", any, {}, never>;
+export {};

package/dist/types/components/Form/formHelper.d.ts

@@ -0,0 +1 @@
+export declare const updateForm: (state: any, updateState: any, field: string, value: string | number) => void;

package/dist/types/components/Form/formTypes.d.ts

@@ -0,0 +1,23 @@
+export interface FormDataProps {
+    type: string;
+    label: string;
+    value: any;
+    name: string;
+    min?: number;
+    max?: number;
+    step?: number;
+}
+interface FormDataParentProps {
+    row: FormDataProps[];
+}
+export type DataType = FormDataProps | FormDataParentProps;
+export interface FormSourceData {
+    data: DataType[];
+    action: any;
+}
+export interface IDetailsProps {
+    label: string;
+    value: any;
+    type: string;
+}
+export {};

package/dist/types/components/Form/index.d.ts

@@ -0,0 +1 @@
+export * from './Form';

package/dist/types/components/Icons/IconsPath.d.ts

@@ -27,10 +27,17 @@ export declare const iconsPath: {
     search: string;
     more_vert: string;
     more_horiz: string;
+    move: string;
+    move_ne: string;
+    move_nw: string;
+    move_se: string;
+    move_sw: string;
     menu: string;
     unlock: string;
     lock: string;
     person: string;
+    point_here: string;
+    point_dot: string;
     radio_checked: string;
     radio_unchecked: string;
     remove: string;

package/dist/types/components/Input/Input.styles.d.ts

@@ -11,6 +11,12 @@ interface IInputTextElementProps extends InputHTMLAttributes<HTMLInputElement> {
     inputmode?: any;
 }
 export declare const InputTextElement: import("styled-components").StyledComponent<"input", any, IInputTextElementProps, never>;
+interface IInputReadOnlyElementProps {
+    inputSize: InputSize;
+    width?: string;
+    theme: any;
+}
+export declare const InputReadOnlyElement: import("styled-components").StyledComponent<"div", any, IInputReadOnlyElementProps, never>;
 export declare const InputLabelElement: import("styled-components").StyledComponent<"div", any, import("../Typography").ITextLabelProps, never>;
 interface IInputWrapperProps {
     width?: string;

package/dist/types/components/Table/Table.d.ts

@@ -1,13 +1,10 @@
 import { FC } from 'react';
-import { IApplyFilterResults } from '../Filters';
 import { IAction } from '../../types';
 export interface ITableHeaderProps {
     name: string;
     valueSource: string;
     sort?: boolean;
     date?: boolean;
-    filter?: boolean;
-    filterType?: 'select' | 'range';
     action?: boolean;
 }
 export interface ITableSortProps {
@@ -24,13 +21,7 @@ interface ITableProps {
     sortable?: boolean;
     filtrable?: boolean;
     sort?: ITableSortProps;
-    filters?: IApplyFilterResults[];
     onRowClick?: (id: string) => void;
-    filtersTitle?: string;
-    filtersConfirmLabel?: string;
-    filtersCancelLabel?: string;
-    filterClearAllLabel?: string;
-    sortClearLabel?: string;
 }
 export declare const Table: FC<ITableProps>;
 export {};

package/dist/types/components/Table/Table.styles.d.ts

@@ -21,7 +21,6 @@ interface ITableCellProps {
     theme: any;
 }
 export declare const TableCell: import("styled-components").StyledComponent<"td", any, ITableCellProps, never>;
-export declare const TableTopBar: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OptionTableCell: import("styled-components").StyledComponent<"td", any, {}, never>;
 export declare const OptionTableCellWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/types/components/common/inputStyles.d.ts

@@ -5,6 +5,11 @@ export declare const sizes: {
     medium: string;
     large: string;
 };
+export declare const height: {
+    small: string;
+    medium: string;
+    large: string;
+};
 export declare const inputPadding: {
     small: string;
     medium: string;
@@ -31,6 +36,7 @@ export declare const eyeTopPosition: {
     large: string;
 };
 export declare const setSize: (size: InputSize) => string;
+export declare const setHeight: (size: InputSize) => string;
 export declare const setButtonSize: (size: InputSize, loader: boolean) => string;
 export declare const setButtonLoaderSize: (size: InputSize) => string;
 export declare const setEyeTopPosition: (size: InputSize) => string;

package/dist/types/index.d.ts

@@ -7,6 +7,7 @@ export * from './components/Dropdown';
 export * from './components/DropdownMenu';
 export * from './components/ElementHeader';
 export * from './components/DropdownMenu';
+export * from './components/Form';
 export * from './components/File';
 export * from './components/Filters';
 export * from './components/Icons';

package/dist/types/types/types.d.ts

@@ -14,4 +14,5 @@ export interface IFormElement {
     disabled?: boolean;
     error?: string;
     placeholder?: string;
+    readOnly?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "1.2.0",
+  "version": "1.5.0",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",