venice-ui 2.4.13 → 3.0.1

package/dist/esm/components/List/List.js

@@ -1,118 +1,121 @@
-import { Aligment } from '../Aligment';
 import React from 'react';
-import { ListIconWrapper, ListRow, ListRowExtend, ListText, MoreWrapper, } from './list.styles';
-import { Checkbox } from '../Checkbox';
 import { ThemeProvider } from 'styled-components';
-import { Icon } from '../Icons';
-import { mainTheme, Theme } from '../../Theme';
-import { OptionTableCellWrapper } from '../Table/Table.styles';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { Aligment } from '../Aligment';
+import { ListIconWrapper, ListRoot, ListRow, ListRowExtend, ListRowOptionsWrapper, ListRowRoot, } from './iLst.styles';
+import { Icon } from '../Icon';
+import { Checkbox } from '../Checkbox';
 import { DropdownMenu } from '../DropdownMenu';
-export const List = ({ isCheckbox = false, isCollapsable = false, isSelectable = false, haveMoreOptions = false, isStatus = false, items, handleChange, handleSelect, selected, theme = mainTheme, levelActions = [], }) => {
-    const updateItem = (items, rowID, updater) => {
-        items.forEach((_item) => {
-            if (_item.id === rowID) {
-                updater(_item);
-            }
-            else if (_item.children.length > 0) {
-                updateItem(_item.children, rowID, updater);
-            }
-        });
-        return items;
-    };
-    const showRow = (rowID) => {
-        const newListOption = [...items];
-        updateItem(items, rowID, (item) => {
-            item.extend = !item.extend;
-        });
-        handleChange(newListOption);
-    };
-    const getValue = (item) => {
-        return item.selected ? item.selected : false;
-    };
-    const getIntermedian = (item) => {
-        if (item.children.length === 0) {
-            return false;
+const cloneItems = (items) => items.map((item) => ({
+    ...item,
+    children: cloneItems(item.children),
+}));
+const updateItem = (items, rowID, updater) => {
+    for (const item of items) {
+        if (item.id === rowID) {
+            updater(item);
+            return true;
         }
-        else {
-            return (item.children.some((_item) => _item.selected) &&
-                !item.children.every((_item) => _item.selected));
+        if (item.children.length > 0 && updateItem(item.children, rowID, updater)) {
+            return true;
         }
-    };
-    const changeSelectedItem = (item, newValue) => {
-        item.selected = newValue;
-        if (item.children.length > 0) {
-            item.children.forEach((_child) => {
-                changeSelectedItem(_child, newValue);
-            });
+    }
+    return false;
+};
+const updateSelectedState = (item, newValue) => {
+    item.selected = newValue;
+    item.children.forEach((child) => updateSelectedState(child, newValue));
+};
+const updateParentSelection = (items, itemID) => {
+    let found = false;
+    for (const item of items) {
+        const childFound = item.children.length > 0 && updateParentSelection(item.children, itemID);
+        if (childFound) {
+            item.selected = item.children.every((child) => child.selected);
+            found = true;
         }
-        return item;
-    };
-    const searchParent = (items, itemID, parentItem) => {
-        for (const _item of items) {
-            if (_item.id === itemID) {
-                return parentItem;
-            }
-            if (_item.children.length > 0) {
-                const found = searchParent(_item.children, itemID, _item);
-                if (found)
-                    return found;
-            }
+        if (item.id === itemID) {
+            found = true;
         }
-        return undefined;
-    };
-    const checkParent = (items, itemID) => {
-        const parent = searchParent(items, itemID);
-        if (parent) {
-            parent.selected = parent?.children.every((_item) => _item.selected);
-            checkParent(items, parent.id);
+    }
+    return found;
+};
+export const List = ({ theme, themeVariant = 'default', items, handleChange, handleSelect, isCheckbox, selected, isCollapsable, isStatusable, isSelectable, haveMoreOptions, levelActions = [], }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const checkboxConfig = componentsConfig.list;
+    const getValue = (item) => Boolean(item.selected);
+    const getIntermedian = (item) => {
+        if (item.children.length === 0) {
+            return false;
         }
-        return items;
+        const hasSelectedChild = item.children.some((child) => child.selected);
+        const hasUnselectedChild = item.children.some((child) => !child.selected);
+        return hasSelectedChild && hasUnselectedChild;
+    };
+    const showRow = (rowID) => {
+        const newListOption = cloneItems(items);
+        updateItem(newListOption, rowID, (item) => {
+            item.extend = !item.extend;
+        });
+        handleChange(newListOption);
     };
     const handleClick = (item) => {
-        const newListOption = [...items];
+        const newListOption = cloneItems(items);
         const isIntermedian = getIntermedian(item);
-        const isSeleted = getValue(item);
-        if (isSeleted || isIntermedian) {
-            changeSelectedItem(item, false);
-        }
-        else {
-            changeSelectedItem(item, true);
-        }
-        updateItem(newListOption, item.id, (item) => Object.assign(item, item));
-        checkParent(newListOption, item.id);
+        const isSelected = getValue(item);
+        const nextValue = !(isSelected || isIntermedian);
+        updateItem(newListOption, item.id, (target) => {
+            updateSelectedState(target, nextValue);
+        });
+        updateParentSelection(newListOption, item.id);
         handleChange(newListOption);
     };
-    const handleRowClick = (item, e) => {
-        e.stopPropagation();
-        if (isCheckbox) {
-            handleClick(item);
-        }
-        else if (isSelectable && handleSelect) {
-            handleSelect(item.id);
-        }
-    };
-    const gerenrateRow = (row, level) => {
+    const renderRow = (row, level) => {
         const rowHaveStatus = row.statusDone || row.statusError || row.statusWarnning;
-        return (React.createElement(React.Fragment, null,
-            React.createElement(ListRow, { key: row.id, level: level, selected: isSelectable && selected ? selected === row.id : false, action: isCheckbox || isSelectable, isExtend: row.extend || false, onClick: (e) => handleRowClick(row, e) },
-                isCollapsable && (React.createElement(ListIconWrapper, { extend: (row.extend && row.children.length !== 0) || (isStatus && rowHaveStatus) ? true : false, onClick: (e) => {
-                        e.stopPropagation();
-                    } },
-                    row.children.length !== 0 && (React.createElement(Icon, { name: "arrow_drop_down", size: 20, noPadding: true, onClick: () => showRow(row.id), iconBgHoverColor: "transparent" })),
-                    row.children.length === 0 && isStatus && rowHaveStatus && (React.createElement(Icon, { name: row.statusError ? "error" : row.statusWarnning ? "warning" : "check_circle", size: 16, noPadding: true, iconColor: row.statusError ? Theme.colors.red : row.statusWarnning ? Theme.colors.orange : Theme.colors.green })))),
-                isCheckbox && (React.createElement("div", { onClick: (e) => e.stopPropagation() },
-                    React.createElement(Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "small" }))),
-                React.createElement(ListText, { selected: isSelectable && selected ? selected === row.id : false }, row.value),
-                haveMoreOptions && levelActions[level]?.moreActions && (React.createElement(MoreWrapper, null,
-                    React.createElement(OptionTableCellWrapper, { onClick: (e) => e.stopPropagation() },
-                        React.createElement(DropdownMenu, { options: levelActions[level]?.moreActions || [], targetID: row.id, iconName: "more_vert", iconColor: theme.tableMoreIconColor, iconHoverColor: theme.tableHoverMoreIconColor, iconBgHoverColor: "transparent", position: "right" }))))),
-            row.extend && row.children.length > 0 && (React.createElement(ListRowExtend, null, row.children.map((_chiledRow) => {
-                return gerenrateRow(_chiledRow, level + 1);
-            })))));
+        return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+            React.createElement(ListRowRoot, { theme: resolvedTheme, config: checkboxConfig, 
+                // action={}
+                level: level },
+                React.createElement(ListRow, { theme: resolvedTheme, config: checkboxConfig, isSelected: isSelectable && selected ? selected === row.id : false },
+                    React.createElement(React.Fragment, null,
+                        React.createElement(Aligment, { justify: "start-flex", gap: checkboxConfig.size.gap, align: "center" },
+                            isCollapsable && (React.createElement(ListIconWrapper, { theme: resolvedTheme, config: checkboxConfig, isExtended: row.extend || false, onClick: (e) => {
+                                    e.stopPropagation();
+                                } },
+                                row.children.length !== 0 && (React.createElement(Icon, { name: "chevron_down", onClick: () => showRow(row.id), hoverBackground: "transparent" })),
+                                row.children.length === 0 &&
+                                    isStatusable &&
+                                    rowHaveStatus && (React.createElement(Icon, { name: row.statusError
+                                        ? 'error'
+                                        : row.statusWarnning
+                                            ? 'warning'
+                                            : 'check_circle', hoverBackground: "transparent", hoverColor: row.statusError
+                                        ? checkboxConfig.color.status.error
+                                        : row.statusWarnning
+                                            ? checkboxConfig.color.status.warning
+                                            : checkboxConfig.color.status.success, color: row.statusError
+                                        ? checkboxConfig.color.status.error
+                                        : row.statusWarnning
+                                            ? checkboxConfig.color.status.warning
+                                            : checkboxConfig.color.status.success })))),
+                            isCheckbox && (React.createElement("div", { onClick: (e) => e.stopPropagation() },
+                                React.createElement(Checkbox, { handleClick: () => handleClick(row), value: getValue(row), isIntermedian: getIntermedian(row), size: "sm" }))),
+                            row.value),
+                        React.createElement(ListRowOptionsWrapper, { onClick: (e) => e.stopPropagation() }, haveMoreOptions && levelActions[level]?.moreActions && (React.createElement(DropdownMenu, { options: levelActions[level]?.moreActions || [], targetID: row.id, position: 'right' })))))),
+            row.children.length > 0 && (React.createElement(ListRowExtend, { isExtended: row.extend || false },
+                React.createElement("div", null, row.children.map((_chiledRow) => {
+                    return renderRow(_chiledRow, level + 1);
+                }))))));
     };
     let level = 0;
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(Aligment, { direction: "column", width: "100%", align: "flex-start" }, items.map((_row) => {
-            return gerenrateRow(_row, level);
-        }))));
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(ListRoot, { theme: resolvedTheme, config: checkboxConfig },
+            React.createElement(Aligment, { direction: "column", width: "100%", align: "flex-start" }, items.map((_row) => {
+                return renderRow(_row, level);
+            })))));
 };

package/dist/esm/components/List/iLst.styles.js

@@ -0,0 +1,62 @@
+import styled from 'styled-components';
+export const ListRoot = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: start-flex;
+  flex-direction: column;
+  background-color: ${({ theme, config }) => config.color.default.background};
+`;
+export const ListRowRoot = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: start-flex;
+  box-sizing: border-box;
+  padding: 0 ${({ config }) => config.size.paddingX}px;
+  padding-left: ${({ level, config }) => level * config.size.indent}px;
+  width: 100%;
+  height: ${({ config }) => config.size.rowHeight}px;
+`;
+export const ListRow = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0 ${({ config }) => config.size.paddingX}px;
+  background: ${({ theme, config, isSelected }) => isSelected
+    ? config.color.selected.background
+    : config.color.default.background};
+  border-radius: ${({ config }) => config.size.borderRadius}px;
+  cursor: pointer;
+  &:hover {
+    background: ${({ theme, config, isSelected }) => isSelected
+    ? config.color.selected.hoverBackground
+    : config.color.hover.background};
+  }
+  width: 100%;
+  height: 100%;
+`;
+export const ListIconWrapper = styled.div `
+  display: flex;
+  transition: transform 0.2s ease;
+  transform: ${({ isExtended }) => isExtended ? 'rotate(-90deg)' : 'rotate(0deg)'};
+  width: ${({ config }) => config.size.iconSpace}px;
+  height: ${({ config }) => config.size.iconSpace}px;
+  align-items: center;
+  justify-content: center;
+`;
+export const ListRowExtend = styled.div `
+  display: grid;
+  grid-template-rows: ${({ isExtended }) => (isExtended ? '1fr' : '0fr')};
+  transition: grid-template-rows 0.2s ease;
+  width: 100%;
+
+  & > div {
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+`;
+export const ListRowOptionsWrapper = styled.div `
+  display: flex;
+`;

package/dist/esm/components/Loader/Loader.js

@@ -1,12 +1,15 @@
+import { resolveThemeWithComponentsConfig } from '../../config';
 import React from 'react';
-import { mainTheme } from '../../Theme';
-import { Aligment } from '../Aligment';
-import { LoaderElement, LoaderItem } from './Loader.styles';
-export const Loader = ({ theme = mainTheme, color = theme.action, size = 'medium', }) => {
-    return (React.createElement(Aligment, { justify: 'center', align: 'center' },
-        React.createElement(LoaderElement, { size: size },
-            React.createElement(LoaderItem, { color: color, size: size }),
-            React.createElement(LoaderItem, { color: color, size: size }),
-            React.createElement(LoaderItem, { color: color, size: size }),
-            React.createElement(LoaderItem, { color: color, size: size }))));
+import { ThemeProvider } from 'styled-components';
+import { LoaderRoot } from './Loader.styles';
+export const Loader = ({ theme, size = 'sm', themeVariant = 'default', }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const loaderConfig = componentsConfig.loader;
+    return (React.createElement(ThemeProvider, { theme: resolvedTheme },
+        React.createElement(LoaderRoot, { theme: resolvedTheme, config: loaderConfig, size: size })));
 };

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

@@ -1,54 +1,15 @@
-import { setAnimationParams } from '../common';
-import styled, { keyframes } from 'styled-components';
-export const Action1 = keyframes `
-  0% {transform: scale(0);}
-  100% {transform: scale(1);}
-`;
-export const Action2 = (move) => keyframes `
-  0% {transform: translate(0, 0);}
-  100% {transform: translate(${move}, 0);}
-`;
-export const Action3 = keyframes `
-  0% {transform: scale(1);}
-  100% {transform: scale(0);}
-`;
-export const LoaderElement = styled.div `
-  display: inline-block;
-  position: relative;
-  width: ${p => setAnimationParams(p.size).width};
-  height: ${p => setAnimationParams(p.size).itemSize};
-  
-`;
-export const LoaderItem = styled.div `
-  position: absolute;
-  top: 0px;
-  width: ${p => setAnimationParams(p.size).itemSize};
-  height: ${p => setAnimationParams(p.size).itemSize};
+import styled from 'styled-components';
+export const LoaderRoot = styled.div `
+  width: ${({ config, size }) => config.size[size].size}px;
+  height: ${({ config, size }) => config.size[size].size}px;
+  border: ${({ config, size }) => config.size[size].border}px solid currentColor;
+  border-top-color: transparent;
   border-radius: 50%;
-  background-color: ${(p) => p.color};
-  animation-timing-function: ease-in-out;
-  :nth-child(1) {
-    left: ${p => setAnimationParams(p.size).itemOne};
-    animation-name: ${Action1};
-    animation-duration: ${p => setAnimationParams(p.size).duration};
-    animation-iteration-count: infinite;
-  }
-  :nth-child(2) {
-    left: ${p => setAnimationParams(p.size).itemTwo};
-    animation-name: ${p => Action2(setAnimationParams(p.size).move)};
-    animation-duration: ${p => setAnimationParams(p.size).duration};
-    animation-iteration-count: infinite;
-  }
-  :nth-child(3) {
-    left: ${p => setAnimationParams(p.size).itemThree};
-    animation-name: ${p => Action2(setAnimationParams(p.size).move)};
-    animation-duration: ${p => setAnimationParams(p.size).duration};
-    animation-iteration-count: infinite;
-  }
-  :nth-child(4) {
-    left: ${p => setAnimationParams(p.size).itemFour};
-    animation-name: ${Action3};
-    animation-duration: ${p => setAnimationParams(p.size).duration};
-    animation-iteration-count: infinite;
+  flex-shrink: 0;
+  animation: loaderSpin 0.7s linear infinite;
+  @keyframes loaderSpin {
+    to {
+      transform: rotate(360deg);
+    }
   }
 `;

package/dist/esm/components/Modal/Modal.js

@@ -1,11 +1,24 @@
-import React, { useEffect } from 'react';
-import { ElementHeader } from '../ElementHeader';
-import { mainTheme } from '../../Theme/Theme';
-import { ScrollCotainer } from '../common';
-import { ModalElement, ModalOverlayer } from './Modal.styles';
+import { wordbook } from '../../config';
+import { useEffect } from 'react';
+import { resolveThemeWithComponentsConfig } from '../../config';
 import { ThemeProvider } from 'styled-components';
+import { ModalContent, ModalOverlayer, ModalRoot } from './Modal.styles';
+import React from 'react';
+import { Header } from '../Header';
 import { ButtonsFooter } from '../ButtonsFooter';
-export const Modal = ({ isOpen, theme = mainTheme, children, title, handleConfirm, handleClose, handleAdditional, labelConfirm, labelClose = 'Cancel', labelAdditional, submitDisabled, size = 'small', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, decorativeEdge = false, }) => {
+import { createPortal } from 'react-dom';
+export const Modal = ({ theme, themeVariant = 'default', isOpen, children, title, handleConfirm, handleClose, handleAdditional, submitDisabled, size = 'sm', submitLoader = false, additionalType = 'button', additionalValue = false, headerDivader = false, additionaNormalMode = false, exitOnEsc = false, additionDisabled = false, labels = {
+    primary: undefined,
+    secondary: wordbook.actions.cancel,
+    additional: undefined,
+}, }) => {
+    const resolvedThemeData = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const resolvedTheme = resolvedThemeData.resolvedTheme;
+    const { componentsConfig } = resolvedThemeData;
+    const modalConfig = componentsConfig.modal;
     useEffect(() => {
         const handleKeyDown = (e) => {
             if (e.key === 'Escape') {
@@ -19,10 +32,15 @@ export const Modal = ({ isOpen, theme = mainTheme, children, title, handleConfir
             document.removeEventListener('keydown', handleKeyDown);
         };
     }, [isOpen]);
-    return (React.createElement(ThemeProvider, { theme: theme },
-        React.createElement(ModalOverlayer, null,
-            React.createElement(ModalElement, { size: size, decorativeEdge: decorativeEdge },
-                React.createElement(ElementHeader, { title: title, handleClose: handleClose, bottomDivader: headerDivader }),
-                React.createElement(ScrollCotainer, null, children),
-                React.createElement(ButtonsFooter, { handleConfirm: handleConfirm, handleClose: handleClose, handleAdditional: handleAdditional, labelConfirm: labelConfirm, labelClose: labelClose, labelAdditional: labelAdditional, submitDisabled: submitDisabled, submitLoader: submitLoader, additionalType: additionalType, additionalValue: additionalValue, additionaNormalMode: additionaNormalMode, additionDisabled: additionDisabled })))));
+    return (React.createElement(React.Fragment, null, isOpen &&
+        createPortal(React.createElement(ThemeProvider, { theme: resolvedTheme },
+            React.createElement(ModalOverlayer, { config: modalConfig, theme: resolvedTheme },
+                React.createElement(ModalRoot, { config: modalConfig, theme: resolvedTheme, size: size },
+                    React.createElement(Header, { title: title, handleClose: handleClose, bottomDivader: headerDivader }),
+                    React.createElement(ModalContent, { config: modalConfig, theme: resolvedTheme }, children),
+                    React.createElement(ButtonsFooter, { onPrimaryAction: handleConfirm, onSecondaryAction: handleClose, onAdditionalAction: handleAdditional, primaryDisabled: submitDisabled, primaryLoading: submitLoader, additionalType: additionalType, additionalValue: additionalValue, isAdditionalDanger: additionaNormalMode, additionDisabled: additionDisabled, labels: {
+                            primary: labels.primary,
+                            secondary: labels.secondary,
+                            additional: labels.additional,
+                        } })))), document.body)));
 };

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

@@ -1,33 +1,61 @@
-import styled from 'styled-components';
-import { Theme } from '../../Theme';
+import styled, { keyframes } from 'styled-components';
+const overlayerFadeIn = keyframes `
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+`;
+const modalIn = keyframes `
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+`;
 export const ModalOverlayer = styled.div `
   box-sizing: border-box;
   align-items: center;
-  background-color: ${Theme.colors.overlayer};
+  background-color: ${({ config, theme }) => config.color.overlayer};
+  animation: ${overlayerFadeIn} 180ms ease-out;
   display: flex;
   justify-content: center;
   height: 100vh;
   left: 0;
   top: 0;
-  padding: ${Theme.padding.l};
+  padding: ${({ config, theme }) => config.size.common.overlayerPadding}px;
   width: 100%;
   position: fixed;
-  z-index: ${Theme.zIndex.modalOverlayer};
+  z-index: ${({ config, theme }) => config.size.common.zIndex.modalOverlayer};
 `;
-export const ModalElement = styled.div `
-  box-sizing: border-box;
-  display: flex;
+export const ModalRoot = styled.div `
+    box-sizing: border-box;
+  animation: ${modalIn} 220ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    display: flex;
+    width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+    flex-direction: column;
+    position: relative;
+    background-color: ${({ config, theme }) => config.color.background};
+    max-width: ${({ config, size }) => config.size[size].width}!important;
+    box-shadow: ${({ config }) => config.color.shadow};
+    border-radius: ${({ config }) => config.size.common.borderRadius}px;
+
+    > * {
+      flex-shrink: 0;
+    }
+`;
+export const ModalContent = styled.div `
   width: 100%;
-  background-color: ${p => p.theme.contentBackground};
-  border-radius: ${Theme.borderRadius.m};
-  max-height: 100%;
-  overflow: hidden;
-  flex-direction: column;
-  position: relative;
-  max-width: 60rem;
-  box-shadow: ${Theme.shadow.m}
-  ${p => p.size === 'small' && `max-width:500px;`}
-  ${p => p.size === 'medium' && `max-width:750px;`}
-  ${p => p.size === 'large' && `max-width:100%;`}
-  ${p => p.decorativeEdge && `border-left: 4px solid ${Theme.colors.primary};`}
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: ${({ config }) => config.size.common.paddingY}px
+    ${({ config }) => config.size.common.paddingX}px;
+  overflow: auto;
+  box-sizing: border-box;
 `;

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

@@ -1 +1 @@
-export { Modal } from './Modal';
+export * from './Modal';

package/dist/esm/components/Numerical/Numerical.js

@@ -0,0 +1,101 @@
+import React, { useEffect, useState } from 'react';
+import { resolveThemeWithComponentsConfig } from '../../config';
+import { Aligment } from '../Aligment';
+import { InputElement, PrefixWrapper } from '../Input/Input.styles';
+import { Icon } from '../Icon';
+import { ComponentRoot } from '../ComponentRoot';
+export const Numerical = ({ theme, themeVariant = 'default', label, labelPosition = 'top', value, type = 'number', min, max, step = 0.1, name, disabled = false, size = 'md', handleChange, handleSubmit, width, error = false, helperText, placeholder, autoFocus, readOnly = false, prefix, suffix, handleFieldFocus, handleFieldBlur, prefixIcon, suffixIcon, suffixIconAction, prefixIconAction, required = false, optional = false, optionalLabel, withClear, componentWidth = '100%' }) => {
+    const { resolvedTheme, componentsConfig } = resolveThemeWithComponentsConfig({
+        theme,
+        themeVariant,
+    });
+    const inputConfig = componentsConfig.input;
+    const [inputValue, setInputValue] = useState(value);
+    useEffect(() => {
+        setInputValue(value);
+    }, [value]);
+    const calculateNumberValue = (numberValue) => {
+        return isNaN(parseFloat(numberValue))
+            ? numberValue
+            : parseFloat(numberValue);
+    };
+    const onChange = (e) => {
+        let returnedValue = calculateNumberValue(e.target.value);
+        setInputValue(returnedValue);
+        handleChange(name, returnedValue);
+    };
+    const onFocus = () => {
+        handleFieldFocus && handleFieldFocus(name);
+    };
+    const onBlurValidation = () => {
+        let validateValue = inputValue;
+        if (isNaN(parseFloat(validateValue.toString()))) {
+            validateValue = min !== undefined ? min : 0;
+        }
+        if (typeof inputValue === 'number') {
+            if (min !== undefined && inputValue < min) {
+                validateValue = min;
+            }
+            else if (max !== undefined && inputValue > max) {
+                validateValue = max;
+            }
+        }
+        handleFieldBlur && handleFieldBlur();
+        handleChange(name, validateValue);
+    };
+    const getFiledType = (filedType) => {
+        return filedType === 'increase' ? 'number' : filedType;
+    };
+    const [inputType] = useState(getFiledType(type));
+    const onKeyDown = async (e) => {
+        if (handleSubmit && e.key === 'Enter') {
+            const currentValue = calculateNumberValue(e.currentTarget.value);
+            handleChange(name, currentValue);
+            handleSubmit();
+        }
+    };
+    const increaseValue = (filedValue) => {
+        let newValue = parseFloat((filedValue + step).toFixed(2));
+        if (max !== undefined && newValue >= max) {
+            newValue = max;
+        }
+        setInputValue(newValue);
+        handleChange(name, newValue);
+    };
+    const decreaseValue = (filedValue) => {
+        let newValue = parseFloat((filedValue - step).toFixed(2));
+        if (min !== undefined && newValue < min) {
+            newValue = min;
+        }
+        setInputValue(newValue);
+        handleChange(name, newValue);
+    };
+    const onSuffixIconClick = () => {
+        if (suffixIconAction) {
+            suffixIconAction(name);
+        }
+    };
+    const onPrefixIconClick = () => {
+        if (prefixIconAction) {
+            prefixIconAction(name);
+        }
+    };
+    const clearValue = () => {
+        setInputValue('');
+        handleChange(name, '');
+    };
+    return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: disabled, error: error, readOnly: readOnly, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: inputConfig, componentWidth: componentWidth, label: label },
+        React.createElement(React.Fragment, null,
+            prefixIcon && !readOnly && (React.createElement(Icon, { name: prefixIcon, size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onPrefixIconClick })),
+            prefix && !readOnly && (React.createElement(PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: inputConfig, error: error, disabled: disabled, readOnly: readOnly }, prefix)),
+            React.createElement(InputElement, { inputSize: size, type: inputType, theme: resolvedTheme, inputConfig: inputConfig, error: error, isDisabled: disabled, readOnly: readOnly, placeholder: !readOnly ? placeholder : undefined, name: name, min: min, max: max, step: step, onChange: onChange, onKeyDown: onKeyDown, onBlur: onBlurValidation, onFocus: onFocus, value: inputValue }),
+            suffixIcon && !readOnly && (React.createElement(Icon, { name: suffixIcon, size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: onSuffixIconClick })),
+            type === 'increase' && !readOnly && (React.createElement(Aligment, { direction: "row", justify: "flex-end" },
+                React.createElement(Icon, { name: "add", size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: () => increaseValue(inputValue) }),
+                React.createElement(Icon, { name: "remove", size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: () => decreaseValue(inputValue) }))),
+            withClear &&
+                inputValue &&
+                inputValue?.toString().length > 0 &&
+                !readOnly && (React.createElement(Icon, { name: "close", size: inputConfig.size[size].iconSize, background: "transparent", hoverBackground: "transparent", isDisabled: disabled || readOnly, onClick: () => clearValue() })),
+            suffix && !readOnly && (React.createElement(PrefixWrapper, { inputSize: size, theme: resolvedTheme, inputConfig: inputConfig, error: error, disabled: disabled, readOnly: readOnly }, suffix)))));
+};

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

@@ -0,0 +1 @@
+export { Numerical } from './Numerical';