@xaypay/tui 0.2.12 → 0.2.14

package/dist/index.js

@@ -552,6 +552,7 @@ var packageResult = {
       ...fontObject
     },
     label: {
+      dots: false,
       color: presetColors.dark,
       display: 'block',
       lineHeight: '22px',
@@ -1173,6 +1174,18 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    order: {
+      color: '#000',
+      font: {
+        ...fontObject
+      }
+    },
+    draggable: {
+      boxShadow: '1px 1px 9px black',
+      color: {
+        background: 'white'
+      }
     }
   },
   // default properties for <Pagination /> component
@@ -1496,22 +1509,6 @@ const SvgDeleteComponent = ({
   fill: fillColor ? fillColor : '#E00'
 }));
 
-class FileTypeParser {
-  static ftypHeader = new Uint8Array([0x66, 0x74, 0x79, 0x70]);
-  hasISOBaseMediaFile(buffer) {
-    const slicedBuffer = new Uint8Array(buffer.slice(0, 12));
-    return this.check(slicedBuffer, FileTypeParser.ftypHeader, {
-      offset: 4
-    }) && (slicedBuffer[8] & 0x60) !== 0x00;
-  }
-  check(buffer, headers, options) {
-    for (const [index, header] of headers.entries()) {
-      if (header !== buffer[index + options.offset]) return false;
-    }
-    return true;
-  }
-}
-
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/React.forwardRef(({
   or,
@@ -1618,13 +1615,19 @@ const File = /*#__PURE__*/React.forwardRef(({
   const [singleFile, setSingleFile] = React.useState(null);
   const [configStyles, setConfigStyles] = React.useState({});
   const [choosenFileCount, setChoosenFileCount] = React.useState(0);
-  const [image, setImage] = React.useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
+  const [image, setImage] = React.useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url.startsWith('data:image/heif') || defaultData.url.startsWith('data:image/heic') || defaultData.url.startsWith('data:application/octet-stream') ? 'heic' : defaultData.url : 'pdf' : null : null);
   const handleCheckHeicFormat = async file => {
     const buffer = await file.arrayBuffer();
-    const fileTypeParser = new FileTypeParser();
-    const hasISOBaseMediaFile = fileTypeParser.hasISOBaseMediaFile(buffer);
-    if (hasISOBaseMediaFile) {
-      return Promise.resolve();
+    const dataView = new DataView(buffer);
+    if (dataView.byteLength < 12) return false;
+    for (let i = 0; i < dataView.byteLength - 8; i++) {
+      if (dataView.getUint8(i) === 0x66 && dataView.getUint8(i + 1) === 0x74 && dataView.getUint8(i + 2) === 0x79 && dataView.getUint8(i + 3) === 0x70) {
+        const majorBrand = String.fromCharCode(dataView.getUint8(i + 4), dataView.getUint8(i + 5), dataView.getUint8(i + 6), dataView.getUint8(i + 7));
+        const heicIdentifiers = ['heic', 'heix', 'mif1', 'msf1', 'hevc'];
+        if (heicIdentifiers.includes(majorBrand)) {
+          return Promise.resolve();
+        }
+      }
     }
     return Promise.reject();
   };
@@ -1666,6 +1669,7 @@ const File = /*#__PURE__*/React.forwardRef(({
                       file: file[ix],
                       uuid: v4()
                     });
+                    setImage('heic');
                   }).catch(() => {
                     change({
                       file: file[ix],
@@ -1713,6 +1717,7 @@ const File = /*#__PURE__*/React.forwardRef(({
                     file: file[ix],
                     uuid: v4()
                   });
+                  setImage('heic');
                 }).catch(() => {
                   change({
                     file: file[ix],
@@ -1761,18 +1766,21 @@ const File = /*#__PURE__*/React.forwardRef(({
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
           if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif'))) {
             setError('');
-            change(file);
-            setSingleFile(file);
             if (file[0].type === 'application/pdf') {
               setImage('pdf');
+              change(file);
+              setSingleFile(file);
             } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) {
               handleCheckHeicFormat(file[0]).then(() => {
                 setImage('heic');
+                change(file);
+                setSingleFile(file);
               }).catch(() => {
                 setImage(null);
                 setError(formatError ?? configStyles.FILE.error.format);
               });
             } else {
+              change(file);
               setImage(URL.createObjectURL(file[0]));
             }
           } else {
@@ -1828,7 +1836,7 @@ const File = /*#__PURE__*/React.forwardRef(({
   }));
   React.useEffect(() => {
     if (!multiple && defaultData) {
-      if (!defaultData.type) {
+      if (!defaultData.type && !defaultData.url.startsWith('data:image/heif') && !defaultData.url.startsWith('data:image/heic') && !defaultData.url.startsWith('data:application/octet-stream')) {
         alert('Please add type in defaultData prop');
       }
       if (!defaultData.url) {
@@ -2381,7 +2389,7 @@ const handleUtilsCheckTypeTel = (val, prevVal) => {
   }
   return val;
 };
-const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize) => {
+const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumSize, withoutDot, innerMinNumSize, numberMaxLength) => {
   if (maxLength && maxLength > 0) {
     if (val.length > maxLength) {
       val = val.substr(0, maxLength);
@@ -2391,6 +2399,9 @@ const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumS
     if (val.length > 16 && !val.includes('.')) {
       val = val.substr(0, 16);
     }
+    if (numberMaxLength && numberMaxLength > 0 && !val.includes('.')) {
+      val = val.substr(0, numberMaxLength);
+    }
     const floatNumParts = typeof val === 'string' ? val.split(/\.|\․|\.|\,/) : val;
     const int = floatNumParts[0];
     const float = floatNumParts[1];
@@ -2528,28 +2539,38 @@ const TH = ({
   }, item.type === 'show' ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
 };
 
+var img$1 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cmask id='mask0_18604_3112' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3e%3cpath d='M0 0H24V24H0V0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_18604_3112)'%3e%3cpath d='M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z' fill='%23A3A5A9'/%3e%3c/g%3e%3c/svg%3e";
+
 const TD = ({
   row,
   item,
   index,
   rowItem,
+  dragged,
+  dragEnd,
   rowRadius,
+  dragStart,
   hideBorder,
   innerIndex,
   tBodyColor,
+  orderColor,
   borderRight,
-  borderRightColor,
   tBodyPadding,
+  orderFontSize,
   tBodyFontSize,
   openListColor,
+  orderFontStyle,
   tBodyTextAlign,
+  orderFontFamily,
+  orderFontWeight,
   tBodyFontFamily,
   tBodyFontWeight,
   handleCheckDots,
   openListFontSize,
+  borderRightColor,
   openListFontStyle,
-  openListFontWeight,
   handleCheckedBody,
+  openListFontWeight,
   openListFontFamily,
   tableColumnMinWidth,
   tableColumnMaxWidth,
@@ -2677,7 +2698,28 @@ const TD = ({
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
     className: styles$9['td-span']
-  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
+  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'draggableIcon') && /*#__PURE__*/React__default["default"].createElement("div", {
+    draggable: true,
+    style: {
+      width: '24px',
+      height: '24px',
+      cursor: 'grab'
+    },
+    onDrag: dragged,
+    onDragEnd: dragEnd,
+    onDragStart: e => dragStart(e, index, row)
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: img$1,
+    alt: "drag"
+  })), hasOwnerProperty(item, 'draggable') && /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      color: orderColor,
+      fontSize: orderFontSize,
+      fontStyle: orderFontStyle,
+      fontFamily: orderFontFamily,
+      fontWeight: orderFontWeight
+    }
+  }, item.order), hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
     data: item,
     index: index,
     innerIndex: innerIndex,
@@ -2890,20 +2932,41 @@ const Table = ({
   tBodyFontWeight,
   tBodyFontFamily,
   tBodyRowMarginTop,
+  orderColor,
+  orderFontSize,
+  orderFontStyle,
+  orderFontFamily,
+  orderFontWeight,
   className,
   openListColor,
   openListFontSize,
   openListFontStyle,
   openListFontWeight,
   openListFontFamily,
-  hideBorder
+  hideBorder,
+  draggable,
+  showOrder,
+  draggableColor,
+  getDraggableData,
+  draggableItemBoxShadow,
+  draggableItemBackgroundColor
 }) => {
+  const itemRefs = React.useRef({});
+  const headerRef = React.useRef(null);
+  const draggedRowIndex = React.useRef(null);
   const [body, setBody] = React.useState([]);
   const [header, setHeader] = React.useState([]);
   const [disableArr, setDisableArr] = React.useState([]);
   const [classProps, setClassProps] = React.useState({});
+  const [checkDrag, setCheckDrag] = React.useState(false);
   const [checkedArray, setCheckedArray] = React.useState([]);
   const [configStyles, setConfigStyles] = React.useState({});
+  const [dragging, setDragging] = React.useState(false);
+  const [draggedItem, setDraggedItem] = React.useState(null);
+  const [position, setPosition] = React.useState({
+    x: 0,
+    y: 0
+  });
   const handleCheckIfArrow = (bodyData, data) => {
     let removeItemIndex;
     let headerWithoutArrow = [];
@@ -3040,6 +3103,7 @@ const Table = ({
     }
   };
   const handleCheckedHeader = (data, e) => {
+    console.log('ok - - - - - - - ');
     e.stopPropagation();
     let removeItemIndex;
     let checkableItemBool;
@@ -3310,66 +3374,192 @@ const Table = ({
     });
     setBody(() => checkBodyMore);
   };
+  const handleDragStart = (e, index, row) => {
+    setDragging(true);
+    setDraggedItem(row);
+    draggedRowIndex.current = index;
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+  const handleDrag = e => {
+    setPosition({
+      x: e.clientX,
+      y: e.clientY
+    });
+  };
+  const handleDrop = (e, index) => {
+    let correctData = [];
+    const newRows = body;
+    const [draggedRow] = newRows.splice(draggedRowIndex.current, 1);
+    newRows.splice(index, 0, draggedRow);
+    newRows.map(item => {
+      correctData.push([...item]);
+    });
+    setBody(correctData);
+    getDraggableData && getDraggableData(correctData);
+    setCheckDrag(prev => !prev);
+    draggedRowIndex.current = null;
+    correctData = null;
+    setDraggedItem(null);
+    setDragging(false);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+  const handleDragEnd = e => {
+    setDraggedItem(null);
+    setDragging(false);
+    e.dataTransfer.setDragImage(new Image(), 0, 0);
+  };
+  const setRef = (index, element) => {
+    if (element) {
+      itemRefs.current[index] = element;
+    }
+  };
   React.useEffect(() => {
-    let checkedItems = [];
-    const disabledArray = [];
-    const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
-    if (arrowShow) {
-      const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
-      const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
-      const insert = checkForInsertArrow.map((item, index) => {
-        item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'checkBox')) {
-            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
-              if (innerItem.checkBox.disabled === true) {
-                if (!disabledArray[innerIndex]) {
-                  disabledArray[innerIndex] = {
-                    rowIndex: index,
-                    columnIndex: innerIndex
-                  };
+    const draggableArray = body && body.length && body.map((item, index) => {
+      if (showOrder) {
+        Object.values(item).map((innerItem, innerIndex) => {
+          if (innerIndex === 1) {
+            innerItem.content = index + 1, innerItem.draggable = true;
+          }
+          return innerItem;
+        });
+      }
+      return item;
+    });
+    getDraggableData && getDraggableData(draggableArray);
+    setBody(() => draggableArray);
+  }, [checkDrag]);
+  React.useEffect(() => {
+    const isEqual = JSON.stringify(body) === JSON.stringify(dataBody);
+    if (!isEqual) {
+      let insert = [];
+      let newArray = [];
+      let checkedItems = [];
+      const disabledArray = [];
+      const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
+      if (arrowShow) {
+        const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
+        const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
+        insert = checkForInsertArrow.map((item, index) => {
+          item.map((innerItem, innerIndex) => {
+            if (hasOwnerProperty(innerItem, 'checkBox')) {
+              if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
+                if (innerItem.checkBox.disabled === true) {
+                  if (!disabledArray[innerIndex]) {
+                    disabledArray[innerIndex] = {
+                      rowIndex: index,
+                      columnIndex: innerIndex
+                    };
+                  }
                 }
               }
             }
-          }
+          });
+          return item;
         });
-        return item;
-      });
-      checkedItems = handleSetCheckboxArray(insert);
-      setBody(() => insert);
-    } else {
-      const insert = checkBodyForChackedItems.map((item, index) => {
-        item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'checkBox')) {
-            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
-              if (innerItem.checkBox.disabled === true) {
-                if (!disabledArray[innerIndex]) {
-                  disabledArray[innerIndex] = {
-                    rowIndex: index,
-                    columnIndex: innerIndex
-                  };
+        checkedItems = handleSetCheckboxArray(insert);
+        if (draggable) {
+          newArray = insert && insert.length && insert.map((item, index) => {
+            item.map(innerItem => {
+              if (hasOwnerProperty(innerItem, 'colorStatus')) {
+                innerItem.colorStatus = null;
+              }
+            });
+            if (showOrder) {
+              item.unshift({
+                content: index + 1,
+                draggable: true
+              });
+            }
+            item.unshift({
+              draggableIcon: '',
+              colorStatus: draggableColor
+            });
+            return item;
+          });
+        }
+      } else {
+        insert = checkBodyForChackedItems.map((item, index) => {
+          item.map((innerItem, innerIndex) => {
+            if (hasOwnerProperty(innerItem, 'checkBox')) {
+              if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
+                if (innerItem.checkBox.disabled === true) {
+                  if (!disabledArray[innerIndex]) {
+                    disabledArray[innerIndex] = {
+                      rowIndex: index,
+                      columnIndex: innerIndex
+                    };
+                  }
                 }
               }
             }
-          }
+          });
+          return item;
         });
-        return item;
-      });
-      checkedItems = handleSetCheckboxArray(insert);
-      setBody(() => insert);
+        checkedItems = handleSetCheckboxArray(insert);
+        if (draggable) {
+          newArray = insert && insert.length && insert.map((item, index) => {
+            item.map(innerItem => {
+              if (hasOwnerProperty(innerItem, 'colorStatus')) {
+                innerItem.colorStatus = null;
+              }
+            });
+            if (showOrder) {
+              item.unshift({
+                content: index + 1,
+                draggable: true
+              });
+            }
+            item.unshift({
+              draggableIcon: '',
+              colorStatus: draggableColor
+            });
+            return item;
+          });
+        }
+      }
+      getDraggableData && getDraggableData(newArray && newArray.length ? newArray : insert);
+      setBody(() => newArray && newArray.length ? newArray : insert);
+      setDisableArr(disabledArray);
+      setCheckedArray(() => checkedItems);
     }
-    setDisableArr(disabledArray);
-    setCheckedArray(() => checkedItems);
-  }, [dataBody, arrowColumn, arrowShow]);
+  }, [dataBody, arrowColumn, arrowShow, draggable]);
   React.useEffect(() => {
-    if (arrowShow) {
-      const header = dataHeader.slice();
-      const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
-      const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
-      setHeader(() => checkForInsertArrow);
-    } else {
-      setHeader(() => dataHeader);
+    const isEqual = JSON.stringify(header) === JSON.stringify(dataHeader);
+    if (!isEqual) {
+      let insert = [];
+      let newArray = [];
+      if (arrowShow) {
+        const header = dataHeader.slice();
+        const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
+        const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
+        insert = checkForInsertArrow;
+        if (draggable) {
+          newArray = insert;
+          newArray && newArray.length && newArray.unshift({
+            content: ''
+          });
+          if (showOrder) {
+            newArray.unshift({
+              content: ''
+            });
+          }
+        }
+      } else {
+        if (draggable) {
+          newArray = dataHeader;
+          newArray && newArray.length && newArray.unshift({
+            content: ''
+          });
+          if (showOrder) {
+            newArray.unshift({
+              content: ''
+            });
+          }
+        }
+      }
+      setHeader(() => newArray && newArray.length ? newArray : insert);
     }
-  }, [dataHeader, arrowColumn, arrowShow, disableArr]);
+  }, [dataHeader, arrowColumn, arrowShow, disableArr, draggable]);
   React.useEffect(() => {
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.TABLE.className));
   }, [className]);
@@ -3393,7 +3583,9 @@ const Table = ({
     },
     onClick: handleTableClick,
     className: classProps
-  }, header && header.length > 0 && /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", {
+  }, header && header.length > 0 && /*#__PURE__*/React__default["default"].createElement("thead", {
+    ref: headerRef
+  }, /*#__PURE__*/React__default["default"].createElement("tr", {
     style: {
       color: tHeadColor ?? configStyles.TABLE.head.color,
       backgroundColor: tHeadBackgroundColor ?? configStyles.TABLE.head.colors.background,
@@ -3424,20 +3616,26 @@ const Table = ({
     }
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default["default"].createElement("tr", {
+      onDragOver: e => e.preventDefault(),
+      onDrop: e => handleDrop(e, index),
       key: `${item}_${index}`,
       style: {
         backgroundColor: tableRowBGColor ?? configStyles.TABLE.body.row.colors.background,
         borderBottom: index === body.length - 1 ? 'none' : tBodyRowBorder ? tBodyRowBorder : configStyles.TABLE.body.row.border,
         borderColor: hideBorder ? 'transparent' : configStyles.TABLE.body.row.borderColor,
         boxShadow: (tableRowItem ? tableRowItem : configStyles.TABLE.body.row.asItem) ? tableRowBoxShadow ? tableRowBoxShadow : configStyles.TABLE.body.row.box.shadow : 'none'
-      }
+      },
+      ref: el => setRef(index, el)
     }, Object.values(item).map((innerItem, innerIndex) => {
       return /*#__PURE__*/React__default["default"].createElement(TD, {
         index: index,
         item: innerItem,
+        dragged: handleDrag,
         hideBorder: hideBorder,
         innerIndex: innerIndex,
+        dragEnd: handleDragEnd,
         row: Object.values(item),
+        dragStart: handleDragStart,
         id: item.id ? item.id : '',
         handleCheckDots: handleCheckDots,
         key: `${innerItem}_${index}_${innerIndex}`,
@@ -3452,6 +3650,11 @@ const Table = ({
         handleBodyActionClick: handleBodyActionClick,
         handleMoreOptionsClick: handleMoreOptionsClick,
         handleContentListClick: handleContentListClick,
+        orderColor: orderColor ?? configStyles.TABLE.order.color,
+        orderFontSize: orderFontSize ?? configStyles.TABLE.order.font.size,
+        orderFontStyle: orderFontStyle ?? configStyles.TABLE.order.font.style,
+        orderFontFamily: orderFontFamily ?? configStyles.TABLE.order.font.family,
+        orderFontWeight: orderFontWeight ?? configStyles.TABLE.order.font.weight,
         tBodyColor: tBodyColor ?? configStyles.TABLE.body.color,
         rowItem: tableRowItem ?? configStyles.TABLE.body.row.isItem,
         rowRadius: tableRowRadius ?? configStyles.TABLE.body.row.radius,
@@ -3466,6 +3669,52 @@ const Table = ({
         handleOpenCloseRowSingleArrow: handleOpenCloseRowSingleArrow
       });
     }));
+  })), draggable && dragging && draggedItem && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      position: 'fixed',
+      top: `${position.y - 30}px`,
+      left: `${position.x - 30}px`,
+      borderSpacing: '0px',
+      pointerEvents: 'none',
+      height: 'fit-content',
+      blockSize: 'fit-content',
+      borderRadius: tableRowItem ? tableRowRadius ?? configStyles.TABLE.body.row.radius : '0px',
+      boxShadow: draggableItemBoxShadow ?? configStyles.TABLE.draggable.boxShadow,
+      backgroundColor: draggableItemBackgroundColor ?? configStyles.TABLE.draggable.color.background
+    }
+  }, draggedItem.map((innerItem, innerIndex) => {
+    return /*#__PURE__*/React__default["default"].createElement(TD, {
+      item: innerItem,
+      dragged: handleDrag,
+      hideBorder: hideBorder,
+      innerIndex: innerIndex,
+      row: Object.values(draggedItem),
+      dragStart: handleDragStart,
+      handleCheckDots: handleCheckDots,
+      key: `${innerItem}__${innerIndex}`,
+      openListColor: openListColor ?? configStyles.TABLE.openList.color,
+      tableColumnMinWidth: tableColumnMinWidth ?? configStyles.TABLE.column.minWidth,
+      tableColumnMaxWidth: tableColumnMaxWidth ?? configStyles.TABLE.column.maxWidth,
+      openListFontSize: openListFontSize ?? configStyles.TABLE.openList.font.size,
+      openListFontStyle: openListFontStyle ?? configStyles.TABLE.openList.font.style,
+      openListFontWeight: openListFontWeight ?? configStyles.TABLE.openList.font.weight,
+      openListFontFamily: openListFontFamily ?? configStyles.TABLE.openList.font.family,
+      tBodyColor: tBodyColor ?? configStyles.TABLE.body.color,
+      orderColor: orderColor ?? configStyles.TABLE.order.color,
+      rowItem: tableRowItem ?? configStyles.TABLE.body.row.isItem,
+      tBodyPadding: tBodyPadding ?? configStyles.TABLE.body.padding,
+      tBodyTextAlign: tBodyTextAlign ?? configStyles.TABLE.textAlign,
+      rowRadius: tableRowRadius ?? configStyles.TABLE.body.row.radius,
+      tBodyFontSize: tBodyFontSize ?? configStyles.TABLE.body.font.size,
+      orderFontSize: orderFontSize ?? configStyles.TABLE.order.font.size,
+      orderFontStyle: orderFontStyle ?? configStyles.TABLE.order.font.style,
+      tBodyFontFamily: tBodyFontFamily ?? configStyles.TABLE.body.font.family,
+      tBodyFontWeight: tBodyFontWeight ?? configStyles.TABLE.body.font.weight,
+      orderFontFamily: orderFontFamily ?? configStyles.TABLE.order.font.family,
+      orderFontWeight: orderFontWeight ?? configStyles.TABLE.order.font.weight,
+      borderRight: innerIndex === Object.values(draggedItem).length - 1 ? 'none' : configStyles.TABLE.body.row.border,
+      borderRightColor: innerIndex === Object.values(draggedItem).length - 1 ? 'transparent' : configStyles.TABLE.body.row.borderColor
+    });
   })));
 };
 Table.propTypes = {
@@ -4178,12 +4427,15 @@ const NumberInput = ({
   value,
   float,
   radius,
+  withZero,
   disabled,
   inpStyles,
   minNumSize,
   maxNumSize,
+  insideError,
   inputChange,
   inpAttributes,
+  numberMaxLength,
   setInnerErrorMessage
 }) => {
   const [innerValue, setInnerValue] = React.useState('');
@@ -4191,20 +4443,28 @@ const NumberInput = ({
   const handleChange = event => {
     let prevValue = innerValue;
     let currentValue = event.target.value.replace(/\.|․|\.|,/g, '.');
-    currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots);
+    currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength);
     setInnerValue(() => currentValue);
     if (inputChange && currentValue !== prevValue) {
       if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER) {
         if (currentValue === '') {
           setInnerErrorMessage(() => '');
         } else {
+          insideError && insideError();
           setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${Number.MIN_SAFE_INTEGER} - ${Number.MAX_SAFE_INTEGER} թվերի միջակայքում`);
         }
       } else if (innerMinNumSize && currentValue < innerMinNumSize || maxNumSize && currentValue > maxNumSize) {
         if (currentValue === '') {
           setInnerErrorMessage(() => '');
         } else {
-          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} թվերի միջակայքում`);
+          insideError && insideError();
+          if (innerMinNumSize && !maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ պակաս ${innerMinNumSize} - ից`);
+          } else if (!innerMinNumSize && maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ մեծ ${maxNumSize} ֊ ից`);
+          } else if (innerMinNumSize && maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} թվերի միջակայքում`);
+          }
         }
       } else if (currentValue >= Number.MIN_SAFE_INTEGER || currentValue <= Number.MAX_SAFE_INTEGER || innerMinNumSize && currentValue >= innerMinNumSize || maxNumSize && currentValue <= maxNumSize) {
         inputChange(currentValue);
@@ -4213,11 +4473,13 @@ const NumberInput = ({
     }
   };
   const handleBlur = () => {
-    const newVal = handleRemoveLeadingZeros(innerValue);
-    if (parseFloat(newVal) === 0) {
-      inputChange('');
-    } else {
-      inputChange(newVal);
+    if (!withZero) {
+      const newVal = handleRemoveLeadingZeros(innerValue);
+      if (parseFloat(newVal) === 0) {
+        inputChange('');
+      } else {
+        inputChange(newVal);
+      }
     }
   };
   React.useEffect(() => {
@@ -4234,10 +4496,10 @@ const NumberInput = ({
   React.useEffect(() => {
     let newValue = '';
     if (value !== undefined && value !== null) {
-      newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots);
+      newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength);
     }
     setInnerValue(() => newValue);
-  }, [dots, value, float, maxNumSize, minNumSize]);
+  }, [dots, value, float, maxNumSize, minNumSize, numberMaxLength]);
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     value: innerValue,
@@ -4290,6 +4552,7 @@ const Input = ({
   leftIcon,
   required,
   disabled,
+  labelDots,
   iconWidth,
   rightIcon,
   className,
@@ -4323,13 +4586,16 @@ const Input = ({
   phoneAlignItems,
   errorLineHeight,
   labelLineHeight,
+  numberMaxLength,
   backgroundColor,
+  withZero = false,
   labelMarginBottom,
   regexpErrorMessage,
   phoneJustifyContent,
   telBorderRightWidth,
   telBorderRightStyle,
   telBorderRightColor,
+  fireInputInsideError,
   backgroundDisableColor,
   telBorderRightColorHover,
   type = 'text'
@@ -4414,6 +4680,7 @@ const Input = ({
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
+      maxWidth: '100%',
       color: labelColor ?? configStyles.INPUT.label.color,
       fontSize: labelSize ?? configStyles.INPUT.label.font.size,
       fontStyle: labelStyle ?? configStyles.INPUT.label.font.style,
@@ -4421,8 +4688,12 @@ const Input = ({
       fontWeight: labelWeight ?? configStyles.INPUT.label.font.weight,
       lineHeight: labelLineHeight ?? configStyles.INPUT.label.lineHeight,
       marginBottom: labelMarginBottom ?? configStyles.INPUT.label.marginBottom,
-      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family
-    }
+      fontFamily: labelFontFamily ?? configStyles.INPUT.label.font.family,
+      whiteSpace: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'nowrap' : 'normal',
+      overflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'hidden' : 'visible',
+      textOverflow: (labelDots ? labelDots : configStyles.INPUT.label.dots) ? 'ellipsis' : ''
+    },
+    title: label
   }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$7['input-content']}`,
     style: {
@@ -4468,9 +4739,12 @@ const Input = ({
     value: innerValue,
     float: floatToFix,
     disabled: disabled,
+    withZero: withZero,
     inputChange: change,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
+    numberMaxLength: numberMaxLength,
+    insideError: fireInputInsideError,
     minNumSize: minNumSize ? minNumSize : '',
     maxNumSize: maxNumSize ? maxNumSize : '',
     setInnerErrorMessage: setInnerErrorMessage,
@@ -4531,18 +4805,20 @@ const Input = ({
 Input.propTypes = {
   size: PropTypes__default["default"].string,
   name: PropTypes__default["default"].string,
-  style: PropTypes__default["default"].string,
-  weight: PropTypes__default["default"].string,
-  family: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func,
+  style: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
   width: PropTypes__default["default"].string,
   label: PropTypes__default["default"].string,
+  withZero: PropTypes__default["default"].bool,
+  weight: PropTypes__default["default"].string,
+  family: PropTypes__default["default"].string,
   required: PropTypes__default["default"].bool,
   disabled: PropTypes__default["default"].bool,
   height: PropTypes__default["default"].string,
   radius: PropTypes__default["default"].string,
   padding: PropTypes__default["default"].string,
+  labelDots: PropTypes__default["default"].bool,
   tooltip: PropTypes__default["default"].element,
   withoutDot: PropTypes__default["default"].bool,
   className: PropTypes__default["default"].string,
@@ -4579,9 +4855,11 @@ Input.propTypes = {
   phoneAlignItems: PropTypes__default["default"].string,
   errorLineHeight: PropTypes__default["default"].string,
   labelLineHeight: PropTypes__default["default"].string,
+  numberMaxLength: PropTypes__default["default"].number,
   labelMarginBottom: PropTypes__default["default"].string,
   regexpErrorMessage: PropTypes__default["default"].string,
   regexp: PropTypes__default["default"].instanceOf(RegExp),
+  fireInputInsideError: PropTypes__default["default"].func,
   telBorderRightWidth: PropTypes__default["default"].string,
   telBorderRightStyle: PropTypes__default["default"].string,
   telBorderRightColor: PropTypes__default["default"].string,