@xaypay/tui 0.2.18 → 0.2.20

package/dist/index.es.js

@@ -597,6 +597,7 @@ var packageResult = {
       }
     },
     tel: {
+      className: 'tel-code',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -1679,6 +1680,37 @@ const SvgDeleteComponent = ({
   fill: fillColor ? fillColor : '#E00'
 }));
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$d = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}";
+var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW"};
+styleInject(css_248z$d);
+
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/forwardRef(({
   or,
@@ -1774,6 +1806,7 @@ const File = /*#__PURE__*/forwardRef(({
   listItemBackgroundColor,
   listItemBackgroundErrorColor,
   maxCHoosenLengthErrorHideTime,
+  showPreviewIconInSmallComponent,
   maxSize = 10,
   preview = true,
   timeForRemoveError = 5000,
@@ -2216,6 +2249,7 @@ const File = /*#__PURE__*/forwardRef(({
       padding: '0px 10px'
     }
   }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: styles$b['small-file-component'],
     style: {
       width: '100%',
       padding: '5px',
@@ -2224,7 +2258,20 @@ const File = /*#__PURE__*/forwardRef(({
       boxSizing: 'border-box',
       justifyContent: 'space-between'
     }
-  }, /*#__PURE__*/React__default.createElement(Button, {
+  }, showPreviewIconInSmallComponent ? !image ? /*#__PURE__*/React__default.createElement(Button, {
+    contentWidth: true,
+    onClick: _ => _,
+    font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
+    size: uploadBtnSize ?? configStyles.FILE.uploadBtn.font.size,
+    style: uploadBtnStyle ?? configStyles.FILE.uploadBtn.font.style,
+    weight: uploadBtnWeight ?? configStyles.FILE.uploadBtn.font.weight,
+    label: uploadBtnLabel ?? configStyles.FILE.uploadBtn.label,
+    color: uploadBtnColor ?? configStyles.FILE.uploadBtn.color,
+    height: uploadBtnHeight ?? configStyles.FILE.uploadBtn.height,
+    hoverColor: uploadBtnHoverColor ?? configStyles.FILE.uploadBtn.colors.hover,
+    backgroundColor: uploadBtnBackgroundColor ?? configStyles.FILE.uploadBtn.colors.background,
+    backgroundHoverColor: uploadBtnBackgroundColorHover ?? configStyles.FILE.uploadBtn.colors.backgroundHover
+  }) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default.createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default.createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React__default.createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React__default.createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React__default.createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React__default.createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
     font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
@@ -2414,6 +2461,7 @@ File.propTypes = {
   listItemBackgroundErrorColor: PropTypes.string,
   maxCHoosenLengthErrorHideTime: PropTypes.number,
   filesArray: PropTypes.arrayOf(PropTypes.object),
+  showPreviewIconInSmallComponent: PropTypes.bool,
   fileExtensions: PropTypes.arrayOf(PropTypes.string)
 };
 
@@ -2678,33 +2726,6 @@ const handleRemoveLeadingZeros = str => {
   return str.replace(/^0+(\d)/, '$1');
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
 var css_248z$c = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{align-items:center;cursor:pointer;display:flex;margin:0 0 8px;min-height:38px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}.table-module_no-tabel-data__6xp3N{align-items:center;display:flex;height:200px;justify-content:center;width:100%}";
 var styles$a = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO","no-tabel-data":"table-module_no-tabel-data__6xp3N"};
 styleInject(css_248z$c);
@@ -4542,6 +4563,7 @@ const TelInput = ({
   radius,
   isHover,
   disabled,
+  telClass,
   inpStyles,
   errorColor,
   inputChange,
@@ -4573,6 +4595,7 @@ const TelInput = ({
     setInnerValue(() => newValue);
   }, [value]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: telClass,
     style: {
       ...inpStyles,
       width: 'auto',
@@ -4741,7 +4764,12 @@ const NumberInput = ({
     let prevValue = innerValue;
     let currentValue = event.target.value.replace(/\.|․|\.|,/g, '.');
     currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength, cardNumber);
-    setInnerValue(() => cardNumber ? currentValue.replace(/(\d{4})(?=\d)/g, '$1-') : currentValue);
+    if (cardNumber) {
+      let digits = currentValue.replace(/\D/g, '');
+      setInnerValue(() => digits.replace(/(\d{4})(?=\d)/g, '$1-'));
+    } else {
+      setInnerValue(() => currentValue);
+    }
     if (inputChange && currentValue !== prevValue) {
       if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER) {
         if (!cardNumber) {
@@ -4814,11 +4842,16 @@ const NumberInput = ({
     if (value !== undefined && value !== null) {
       newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength, cardNumber);
     }
-    setInnerValue(() => cardNumber ? newValue.replace(/(\d{4})(?=\d)/g, '$1-') : newValue);
-    // inputChange(cardNumber ? newValue.replaceAll('-', '') : newValue);
+    if (cardNumber) {
+      let digits = newValue.replace(/\D/g, '');
+      setInnerValue(() => digits.replace(/(\d{4})(?=\d)/g, '$1-'));
+    } else {
+      setInnerValue(() => newValue);
+    }
   }, [dots, value, float, cardNumber, maxNumSize, minNumSize, numberMaxLength]);
   return /*#__PURE__*/React__default.createElement("input", {
     type: "text",
+    inputMode: "decimal",
     value: innerValue,
     disabled: disabled,
     name: inpAttributes?.iName,
@@ -4874,6 +4907,7 @@ const Input = ({
   family,
   padding,
   tooltip,
+  telClass,
   leftIcon,
   required,
   disabled,
@@ -5109,6 +5143,7 @@ const Input = ({
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
     radius: radius ?? configStyles.INPUT.radius,
+    telClass: telClass ?? configStyles.INPUT.tel.className,
     phoneDisplay: phoneDisplay ?? configStyles.INPUT.tel.display,
     phoneAlignItems: phoneAlignItems ?? configStyles.INPUT.tel.alignItems,
     phoneJustifyContent: phoneJustifyContent ?? configStyles.INPUT.tel.justifyContent,
@@ -5296,6 +5331,7 @@ Input.propTypes = {
   regexpErrorMessage: PropTypes.string,
   regexp: PropTypes.instanceOf(RegExp),
   fireInputInsideError: PropTypes.func,
+  telClass: PropTypes.string,
   telBorderRightWidth: PropTypes.string,
   telBorderRightStyle: PropTypes.string,
   telBorderRightColor: PropTypes.string,

package/dist/index.js

@@ -628,6 +628,7 @@ var packageResult = {
       }
     },
     tel: {
+      className: 'tel-code',
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
@@ -1710,6 +1711,37 @@ const SvgDeleteComponent = ({
   fill: fillColor ? fillColor : '#E00'
 }));
 
+function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}
+
+var css_248z$d = ".file-module_small-file-component__nlpcW>svg{max-height:77%!important}";
+var styles$b = {"small-file-component":"file-module_small-file-component__nlpcW"};
+styleInject(css_248z$d);
+
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/React.forwardRef(({
   or,
@@ -1805,6 +1837,7 @@ const File = /*#__PURE__*/React.forwardRef(({
   listItemBackgroundColor,
   listItemBackgroundErrorColor,
   maxCHoosenLengthErrorHideTime,
+  showPreviewIconInSmallComponent,
   maxSize = 10,
   preview = true,
   timeForRemoveError = 5000,
@@ -2247,6 +2280,7 @@ const File = /*#__PURE__*/React.forwardRef(({
       padding: '0px 10px'
     }
   }, fileSizeText ?? configStyles.FILE.sizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: styles$b['small-file-component'],
     style: {
       width: '100%',
       padding: '5px',
@@ -2255,7 +2289,20 @@ const File = /*#__PURE__*/React.forwardRef(({
       boxSizing: 'border-box',
       justifyContent: 'space-between'
     }
-  }, /*#__PURE__*/React__default["default"].createElement(Button, {
+  }, showPreviewIconInSmallComponent ? !image ? /*#__PURE__*/React__default["default"].createElement(Button, {
+    contentWidth: true,
+    onClick: _ => _,
+    font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
+    size: uploadBtnSize ?? configStyles.FILE.uploadBtn.font.size,
+    style: uploadBtnStyle ?? configStyles.FILE.uploadBtn.font.style,
+    weight: uploadBtnWeight ?? configStyles.FILE.uploadBtn.font.weight,
+    label: uploadBtnLabel ?? configStyles.FILE.uploadBtn.label,
+    color: uploadBtnColor ?? configStyles.FILE.uploadBtn.color,
+    height: uploadBtnHeight ?? configStyles.FILE.uploadBtn.height,
+    hoverColor: uploadBtnHoverColor ?? configStyles.FILE.uploadBtn.colors.hover,
+    backgroundColor: uploadBtnBackgroundColor ?? configStyles.FILE.uploadBtn.colors.background,
+    backgroundHoverColor: uploadBtnBackgroundColorHover ?? configStyles.FILE.uploadBtn.colors.backgroundHover
+  }) : image === 'pdf' ? iconPdf ? iconPdf : configStyles.FILE.icon.pdf ? configStyles.FILE.icon.pdf : /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? iconHeic ? iconHeic : configStyles.FILE.icon.heic ? configStyles.FILE.icon.heic : /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : image === 'doc' ? iconDoc ? iconDoc : configStyles.FILE.icon.doc ? configStyles.FILE.icon.doc : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : image === 'docx' ? iconDocx ? iconDocx : configStyles.FILE.icon.docx ? configStyles.FILE.icon.docx : /*#__PURE__*/React__default["default"].createElement(SvgDocIcon, null) : singleFile[0].type === 'image/jpeg' ? iconJpeg ? iconJpeg : configStyles.FILE.icon.jpeg ? configStyles.FILE.icon.jpeg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpeg, null) : singleFile[0].type === 'image/png' ? iconPng ? iconPng : configStyles.FILE.icon.png ? configStyles.FILE.icon.png : /*#__PURE__*/React__default["default"].createElement(SvgListItemPng, null) : singleFile[0].type === 'image/jpg' ? iconJpeg ? iconJpg : configStyles.FILE.icon.jpg ? configStyles.FILE.icon.jpg : /*#__PURE__*/React__default["default"].createElement(SvgListItemJpg, null) : '' : /*#__PURE__*/React__default["default"].createElement(Button, {
     contentWidth: true,
     onClick: _ => _,
     font: uploadBtnFont ?? configStyles.FILE.uploadBtn.font.family,
@@ -2445,6 +2492,7 @@ File.propTypes = {
   listItemBackgroundErrorColor: PropTypes__default["default"].string,
   maxCHoosenLengthErrorHideTime: PropTypes__default["default"].number,
   filesArray: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
+  showPreviewIconInSmallComponent: PropTypes__default["default"].bool,
   fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
 };
 
@@ -2709,33 +2757,6 @@ const handleRemoveLeadingZeros = str => {
   return str.replace(/^0+(\d)/, '$1');
 };
 
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
 var css_248z$c = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}.table-module_list-text__kmKIq{align-items:center;cursor:pointer;display:flex;margin:0 0 8px;min-height:38px;white-space:wrap}.table-module_dots-option-item__jNOxO{box-sizing:border-box;cursor:pointer;display:flex;height:39px;margin-bottom:2px;padding:10px;position:relative;width:100%}.table-module_dots-option-item__jNOxO:after{background-color:#eee;border-radius:1px;-webkit-border-radius:1px;-moz-border-radius:1px;-ms-border-radius:1px;-o-border-radius:1px;content:\"\";height:2px;left:10px;position:absolute;top:calc(100% - 2px);width:calc(100% - 20px)}.table-module_dots-option-item__jNOxO:last-child:after{display:none}.table-module_no-tabel-data__6xp3N{align-items:center;display:flex;height:200px;justify-content:center;width:100%}";
 var styles$a = {"sorting-arrows":"table-module_sorting-arrows__BaN-G","td-span":"table-module_td-span__XHo6k","list-text":"table-module_list-text__kmKIq","dots-option-item":"table-module_dots-option-item__jNOxO","no-tabel-data":"table-module_no-tabel-data__6xp3N"};
 styleInject(css_248z$c);
@@ -4573,6 +4594,7 @@ const TelInput = ({
   radius,
   isHover,
   disabled,
+  telClass,
   inpStyles,
   errorColor,
   inputChange,
@@ -4604,6 +4626,7 @@ const TelInput = ({
     setInnerValue(() => newValue);
   }, [value]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: telClass,
     style: {
       ...inpStyles,
       width: 'auto',
@@ -4772,7 +4795,12 @@ const NumberInput = ({
     let prevValue = innerValue;
     let currentValue = event.target.value.replace(/\.|․|\.|,/g, '.');
     currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength, cardNumber);
-    setInnerValue(() => cardNumber ? currentValue.replace(/(\d{4})(?=\d)/g, '$1-') : currentValue);
+    if (cardNumber) {
+      let digits = currentValue.replace(/\D/g, '');
+      setInnerValue(() => digits.replace(/(\d{4})(?=\d)/g, '$1-'));
+    } else {
+      setInnerValue(() => currentValue);
+    }
     if (inputChange && currentValue !== prevValue) {
       if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER) {
         if (!cardNumber) {
@@ -4845,11 +4873,16 @@ const NumberInput = ({
     if (value !== undefined && value !== null) {
       newValue = handleUtilsCheckTypeNumber(value, newValue, null, float, maxNumSize, dots, innerMinNumSize, numberMaxLength, cardNumber);
     }
-    setInnerValue(() => cardNumber ? newValue.replace(/(\d{4})(?=\d)/g, '$1-') : newValue);
-    // inputChange(cardNumber ? newValue.replaceAll('-', '') : newValue);
+    if (cardNumber) {
+      let digits = newValue.replace(/\D/g, '');
+      setInnerValue(() => digits.replace(/(\d{4})(?=\d)/g, '$1-'));
+    } else {
+      setInnerValue(() => newValue);
+    }
   }, [dots, value, float, cardNumber, maxNumSize, minNumSize, numberMaxLength]);
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
+    inputMode: "decimal",
     value: innerValue,
     disabled: disabled,
     name: inpAttributes?.iName,
@@ -4905,6 +4938,7 @@ const Input = ({
   family,
   padding,
   tooltip,
+  telClass,
   leftIcon,
   required,
   disabled,
@@ -5140,6 +5174,7 @@ const Input = ({
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
     radius: radius ?? configStyles.INPUT.radius,
+    telClass: telClass ?? configStyles.INPUT.tel.className,
     phoneDisplay: phoneDisplay ?? configStyles.INPUT.tel.display,
     phoneAlignItems: phoneAlignItems ?? configStyles.INPUT.tel.alignItems,
     phoneJustifyContent: phoneJustifyContent ?? configStyles.INPUT.tel.justifyContent,
@@ -5327,6 +5362,7 @@ Input.propTypes = {
   regexpErrorMessage: PropTypes__default["default"].string,
   regexp: PropTypes__default["default"].instanceOf(RegExp),
   fireInputInsideError: PropTypes__default["default"].func,
+  telClass: PropTypes__default["default"].string,
   telBorderRightWidth: PropTypes__default["default"].string,
   telBorderRightStyle: PropTypes__default["default"].string,
   telBorderRightColor: PropTypes__default["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/tui.config.js

@@ -141,6 +141,7 @@ export default {
         },
 
         tel: {
+            className: 'tel-code',
             display: 'flex',
             alignItems: 'center',
             justifyContent: 'center',