ecomlab-components-next 0.1.19 → 0.1.21

package/dist/components/Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder.js

@@ -0,0 +1,194 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _imask = _interopRequireDefault(require("imask"));
+require("./InputDinamycPlaceholder.scss");
+var _excluded = ["tooltip", "tooltipStatic", "rows", "changeValue", "setChangeValue", "classname", "placeholder", "type", "onChange", "passwordTooltip", "err", "textErr", "infoHeader", "info", "autoComplete", "disabled", "showClearIndicator", "multiline", "maxLength", "autoFocus", "variant", "size", "maxlength", "required", "onBlur", "mask", "readOnly"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }
+var InputDinamycPlaceholder = function InputDinamycPlaceholder(_ref) {
+  var tooltip = _ref.tooltip,
+    tooltipStatic = _ref.tooltipStatic,
+    rows = _ref.rows,
+    changeValue = _ref.changeValue,
+    _ref$setChangeValue = _ref.setChangeValue,
+    setChangeValue = _ref$setChangeValue === void 0 ? false : _ref$setChangeValue,
+    classname = _ref.classname,
+    placeholder = _ref.placeholder,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'text' : _ref$type,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? false : _ref$onChange,
+    _ref$passwordTooltip = _ref.passwordTooltip,
+    passwordTooltip = _ref$passwordTooltip === void 0 ? false : _ref$passwordTooltip,
+    err = _ref.err,
+    textErr = _ref.textErr,
+    infoHeader = _ref.infoHeader,
+    _ref$info = _ref.info,
+    info = _ref$info === void 0 ? false : _ref$info,
+    _ref$autoComplete = _ref.autoComplete,
+    autoComplete = _ref$autoComplete === void 0 ? true : _ref$autoComplete,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$showClearIndicat = _ref.showClearIndicator,
+    showClearIndicator = _ref$showClearIndicat === void 0 ? false : _ref$showClearIndicat,
+    multiline = _ref.multiline,
+    maxLength = _ref.maxLength,
+    _ref$autoFocus = _ref.autoFocus,
+    autoFocus = _ref$autoFocus === void 0 ? false : _ref$autoFocus,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'filled' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'l' : _ref$size,
+    maxlength = _ref.maxlength,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    onBlur = _ref.onBlur,
+    _ref$mask = _ref.mask,
+    mask = _ref$mask === void 0 ? null : _ref$mask,
+    _ref$readOnly = _ref.readOnly,
+    readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    showInfo = _useState2[0],
+    setShowInfo = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hidePassword = _useState4[0],
+    setHidePassword = _useState4[1];
+  var _useState5 = (0, _react.useState)(changeValue || ''),
+    _useState6 = _slicedToArray(_useState5, 2),
+    valueInside = _useState6[0],
+    setValueInside = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isFocus = _useState8[0],
+    setIsFocus = _useState8[1];
+  var inputRef = (0, _react.useRef)(null);
+  var maskRef = (0, _react.useRef)(null);
+  var handleBlur = function handleBlur() {
+    if (onBlur) onBlur(valueInside);
+  };
+  (0, _react.useEffect)(function () {
+    if (onChange) {
+      onChange(valueInside);
+    }
+  }, [valueInside]);
+  (0, _react.useEffect)(function () {
+    setValueInside(changeValue || '');
+  }, [changeValue]);
+  (0, _react.useEffect)(function () {
+    if (type === 'tel' && inputRef.current) {
+      var maskOptions = {
+        mask: mask
+      };
+      maskRef.current = (0, _imask["default"])(inputRef.current, maskOptions);
+      maskRef.current.on('accept', function () {
+        setValueInside(maskRef.current.value);
+      });
+      return function () {
+        return maskRef.current.destroy();
+      };
+    }
+  }, [type]);
+  (0, _react.useEffect)(function () {
+    if (maskRef.current) {
+      maskRef.current.value = changeValue || '';
+      maskRef.current.updateValue();
+    }
+  }, [changeValue]);
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "input-dinamyc-placeholder",
+    style: {
+      width: '100%',
+      marginBottom: tooltip ? '24px' : ''
+    }
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "".concat(err ? 'input-box__err' : 'input-box', " ").concat(size === 's' ? 'size-s' : 'size-l', "  ").concat(disabled ? 'input-box_disabled' : '')
+  }, /*#__PURE__*/_react["default"].createElement("input", {
+    ref: inputRef,
+    className: "input-dynamic",
+    maxLength: maxlength,
+    style: {
+      paddingRight: info ? '56px' : type === 'password' || showClearIndicator ? '30px' : ''
+    },
+    value: valueInside,
+    type: type === 'password' ? hidePassword ? 'password' : 'text' : type,
+    onChange: function onChange(e) {
+      return setValueInside(e.target.value);
+    },
+    spellCheck: "false",
+    onClick: function onClick() {
+      setIsFocus(true);
+      setShowInfo(true);
+    },
+    onBlur: function onBlur() {
+      setIsFocus(false);
+      setShowInfo(false);
+      handleBlur();
+    },
+    readOnly: readOnly,
+    autoComplete: autoComplete ? 'on' : 'off',
+    autoFocus: autoFocus,
+    disabled: disabled,
+    required: required,
+    size: size
+  }), placeholder && /*#__PURE__*/_react["default"].createElement("div", {
+    className: valueInside.length > 0 || isFocus ? 'placeholder-dinamyc_min-blue' : 'placeholder-dinamyc'
+  }, /*#__PURE__*/_react["default"].createElement("label", null, placeholder, required && /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      color: 'red'
+    }
+  }, " *"))), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "input-box__clean-value"
+  }, showClearIndicator && (valueInside === null || valueInside === void 0 ? void 0 : valueInside.length) > 0 && /*#__PURE__*/_react["default"].createElement("button", {
+    className: "btn__clean",
+    onClick: function onClick() {
+      return setValueInside('');
+    }
+  }), type === 'password' && /*#__PURE__*/_react["default"].createElement("button", {
+    className: "btn__".concat(hidePassword ? 'show' : 'hide'),
+    onClick: function onClick() {
+      return setHidePassword(!hidePassword);
+    }
+  }), info && !err && showInfo && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "input-box__info"
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tooltip-box"
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    className: "btn__info",
+    disabled: true
+  }), /*#__PURE__*/_react["default"].createElement("div", {
+    className: "tooltip"
+  }, /*#__PURE__*/_react["default"].createElement("h6", {
+    className: "title"
+  }, infoHeader), /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text"
+  }, info))))), err ? /*#__PURE__*/_react["default"].createElement("div", {
+    className: "err"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text_red"
+  }, textErr)) : /*#__PURE__*/_react["default"].createElement("div", {
+    className: "err"
+  }, /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text_tooltip"
+  }, tooltip))), tooltipStatic && /*#__PURE__*/_react["default"].createElement("p", {
+    className: "text_tooltip-mui"
+  }, tooltipStatic));
+};
+var _default = exports["default"] = InputDinamycPlaceholder;

package/dist/components/Inputs/InputDinamycPlaceholder/InputDinamycPlaceholder.scss

@@ -0,0 +1,497 @@
+.input-box,
+.input-box__err,
+.input-box_disabled
+{
+    width: 100%;
+    position: relative;
+
+    .input-dynamic {
+        display: flex;
+        width: 100%;
+        height: 56px;
+        padding: var(--space-x2, 8px) var(--space-x5, 12px);
+        align-items: center;
+        gap: var(--space-x2, 8px);
+        align-self: stretch;
+        border-radius: 8px;
+        border: 1px solid #E0E7F2;
+        background: var(--white, #FFF);
+        color: #020617;
+        font-size: 13px;
+        font-weight: 400;
+
+        &:-webkit-autofill,
+        &:-webkit-autofill:hover, 
+        &:-webkit-autofill:focus {
+            -webkit-box-shadow: 0 0 0px 1000px rgb(255, 255, 255) inset;
+            transition: background-color 5000s ease-in-out 0s;
+        }
+
+        &:auto-fill {
+            box-shadow: inset 0 0 0 100px var(--background-color);
+        }
+
+        &::-webkit-outer-spin-button,
+        &::-webkit-inner-spin-button {
+            -webkit-appearance: none;
+            margin: 0;
+        }
+
+        &:focus {
+            outline: none;
+            border: 1px solid #57CC6A;
+
+            &:hover {
+                border: 1px solid #57CC6A;
+            }
+        }
+
+        &:hover {
+            border: 1px solid #64748B;
+        }
+    }
+
+    .placeholder-dinamyc,
+    .placeholder-dinamyc_min,
+    .placeholder-dinamyc_min-blue {
+        width: 100%;
+        position: absolute;
+        top: calc(50% - 8px);
+        left: 14px;
+        pointer-events: none;
+
+        label {
+            position: absolute;
+            color: #64748B;
+            font-family: Inter;
+            font-size: 13px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 16px;
+            z-index: 1;
+            transition: 0.3s;
+        }
+
+        &_min,
+        &_min-blue {
+            display: inline-block;
+            top: -5px;
+            z-index: 1;
+            left: 8px;
+
+            label {
+                position: absolute;
+                z-index: 0;
+                color: #53616E;
+                font-family: Inter;
+                font-size: 11px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 10px;
+                transition: 0.3s;
+                padding-left: 6px;
+                padding-right: 6px;
+
+                &:after {
+                    content: '';
+                    display: inline-block;
+                    position: absolute;
+                    margin-top: 5px;
+                    left: 0;
+                    top: 0;
+                    width: 100%;
+                    height: 6px;
+                    background-color: white;
+                    z-index: -1;
+                }
+            }
+        }
+
+        &_min-blue {
+            label {
+                color: #0B110B;
+            }
+        }
+    }
+
+    &_disabled {
+        .input-dynamic {
+            background-color: #f6f8fd;
+            border: 1px solid #f6f8fd;
+            border-radius: 8px;
+
+            &:focus,
+            &:hover {
+                border: 1px solid #f6f8fd;
+                -webkit-box-shadow: none;
+                -moz-box-shadow: none;
+                box-shadow: none;
+
+                &:hover {
+                    border: 1px solid #f6f8fd;
+                }
+            }
+        }
+    }
+
+    &__err {
+        .input-dynamic {
+            background-color: #FFF5F5;
+            border: 1px solid #FFD8D8;
+            border-radius: 8px;
+
+            &:focus,
+            &:hover {
+                border: 1px solid #FFD8D8;
+                -webkit-box-shadow: none;
+                -moz-box-shadow: none;
+                box-shadow: none;
+
+                &:hover {
+                    border: 1px solid #FFD8D8;
+                }
+            }
+        }
+
+        .placeholder-dinamyc_min {
+            label {
+                &:after {
+                    background-color: #FFF5F5;
+                }
+            }
+        }
+    }
+
+    .err {
+        position: absolute;
+        max-height: 30px;
+        height: 100%;
+        overflow-x: auto;
+        top: calc(100% + 2px);
+        display: flex;
+        gap: 4px;
+        align-items: flex-start;
+
+        // .btn__err {
+        //     width: 16px;
+        //     height: 16px;
+        //     border: none;
+        //     background-color: inherit;
+        //     background-image: url('./img/close_red.svg');
+        //     background-repeat: no-repeat;
+        //     background-size: 16px;
+        //     background-position: center;
+        // }
+
+        .text_tooltip {
+            padding-left: 8px;
+            color: #94A3B8;
+            height: 16px;
+            font-family: "Inter";
+            font-size: 11px;
+            height: auto;
+        }
+
+        .text_red {
+            color: #FF4D4F;
+            font-size: 11px;
+            margin: 0;
+        }
+    }
+
+    &__clean-value {
+        display: flex;
+        gap: 12px;
+        position: absolute;
+        top: calc(50% - 8px);
+        right: 10px;
+        display: flex;
+        gap: 4px;
+        align-items: flex-start;
+
+        .btn__clean {
+            width: 16px;
+            height: 16px;
+            border: none;
+            background-color: inherit;
+            background-image: url('./img/close_grey.svg');
+            background-repeat: no-repeat;
+            background-size: 16px;
+            background-position: center;
+        }
+
+        .btn__show,
+        .btn__hide {
+            width: 16px;
+            height: 16px;
+            border: none;
+            background-color: inherit;
+            background-image: url('./img/show.svg');
+            background-repeat: no-repeat;
+            background-size: 16px;
+            background-position: center;
+        }
+
+        .btn__hide {
+            background-image: url('./img/hide.svg');
+        }
+    }
+
+    &__info {
+        display: flex;
+        position: absolute;
+        //   top: calc(50% - 8px);
+        width: auto;
+        height: auto;
+        right: 20px;
+        gap: 4px;
+        align-items: flex-start;
+        z-index: 10000;
+
+        &:hover {
+            .tooltip {
+                display: flex;
+            }
+        }
+
+        .tooltip {
+            padding: 14px;
+            position: absolute;
+            min-width: 200px;
+            max-width: 200px;
+            left: -92px;
+            border: 2px solid #B2DAFF;
+            fill: #FFF;
+            stroke-width: 2px #B2DAFF solid;
+            margin-top: 8px;
+            z-index: 100000;
+            width: fit-content;
+            border-radius: 8px;
+            height: auto;
+            // position: absolute;
+            background-color: #fff;
+            display: none;
+            flex-direction: column;
+            gap: 4px;
+
+            .title {
+                color: var(--main-menu-primary-text, #020617);
+                font-family: Inter;
+                font-size: 13px;
+                font-style: normal;
+                font-weight: 500;
+                line-height: normal;
+            }
+
+            .text {
+                color: var(--main-menu-teritary-text, #94A3B8);
+                /* Button link/Medium */
+                font-family: Inter;
+                font-size: 13px;
+                font-style: normal;
+                font-weight: 400;
+                line-height: 16px;
+                /* 114.286% */
+            }
+
+            &::after,
+            &::before {
+                content: '';
+                position: absolute;
+                background: rgb(255, 255, 255);
+                top: 40px;
+                left: calc(50% - 5px);
+                top: -6px;
+                width: 10px;
+                height: 10px;
+                border: 2px solid #B2DAFF;
+                border-right: none;
+                border-bottom: none;
+                transform: rotate(45deg);
+                -webkit-transform: rotate(45deg);
+                z-index: 0;
+            }
+
+        }
+
+        .btn__info {
+            width: 16px;
+            height: 16px;
+            border: none;
+            background-color: inherit;
+            background-image: url('./img/info_tooltip.svg');
+            background-repeat: no-repeat;
+            background-size: 16px;
+            background-position: center;
+        }
+
+        .text_red {
+            color: #FF4D4F;
+            font-size: 11px;
+            margin: 0;
+        }
+    }
+
+    // .autorization__input-field {
+    //     width: 100%;
+    //     min-height: 56px;
+    //     height: 100%;
+    //     font-family: 'Inter';
+    //     font-size: 13px;
+    //     padding: 0px;
+    //     margin-top: 24px;
+    //     border-radius: 16px;
+    //     border-radius: 0px;
+    //     border: none;
+    //     background: none;
+
+    //     .css-e4w4as-MuiFormLabel-root-MuiInputLabel-root {
+    //         color: #94A3B8;
+    //         font-size: 13px;
+    //         padding-left: 8px;
+
+    //         &:focus {
+    //             color: #94A3B8;
+    //         }
+    //     }
+
+    //     .css-o943dk-MuiFormLabel-root-MuiInputLabel-root {
+    //         color: #94A3B8;
+    //     }
+
+    //     div {
+    //         border: none;
+    //         background: none;
+    //         border: 1px solid #F0F0F0;
+    //         border-radius: 8px;
+
+    //         &::after {
+    //             display: none;
+    //         }
+
+    //         &::before {
+    //             display: none;
+    //         }
+    //     }
+
+
+    //     input {
+    //         background-color: white;
+    //         border-radius: 8px;
+    //         font-size: 13px;
+
+    //         &::-webkit-outer-spin-button,
+    //         &::-webkit-inner-spin-button {
+    //             -webkit-appearance: none;
+    //             margin: 0;
+    //         }
+
+    //         &:focus {
+    //             border: 1px solid rgba(24, 144, 255, 1);
+    //             -webkit-box-shadow: 0px 0px 9px -3px rgba(24, 144, 255, 1);
+    //             -moz-box-shadow: 0px 0px 9px -3px rgba(24, 144, 255, 1);
+    //             box-shadow: 0px 0px 9px -3px rgba(24, 144, 255, 1);
+    //         }
+
+
+    //     }
+
+    //     input:-webkit-autofill,
+    //     input:-webkit-autofill:hover,
+    //     input:-webkit-autofill:focus input:-webkit-autofill,
+    //     textarea:-webkit-autofill,
+    //     textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
+    //     select:-webkit-autofill,
+    //     select:-webkit-autofill:hover,
+    //     select:-webkit-autofill:focus {
+    //         //   -webkit-text-fill-color: rgb(0, 0, 0);
+    //         -webkit-box-shadow: 0 0 0px 1000px transparent inset;
+    //         transition: background-color 5000s ease-in-out 0s;
+    //         background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(0, 174, 255, 0.04) 50%, rgba(255, 255, 255, 0) 51%, rgba(0, 174, 255, 0.03) 100%);
+    //     }
+
+    //     &::placeholder {
+    //         font-size: 13px;
+    //         font-family: "Inter";
+    //         color: #020617;
+    //     }
+
+    //     &_err {
+    //         border: 1px solid #FF4D4F;
+
+    //     }
+    // }
+
+    // &__err {
+    //     position: absolute;
+    //     top: calc(100%);
+    //     display: flex;
+    //     gap: 4px;
+    //     align-items: flex-start;
+
+    //     &:hover {
+    //         border: none;
+    //     }
+
+    //     .btn__err {
+    //         width: 16px;
+    //         height: 16px;
+    //         border: none;
+    //         background-color: inherit;
+    //         background-image: url('./img/close_red.svg');
+    //         background-repeat: no-repeat;
+    //         background-size: 16px;
+    //         background-position: center;
+    //     }
+
+    //     .text_red {
+    //         color: #FF4D4F;
+    //         font-size: 11px;
+    //         margin: 0;
+    //     }
+    // }
+
+    .input-err {
+        div {
+            border: 2px solid #FFD8D8;
+            border-radius: 8px;
+
+            input {
+                background-color: #FFF5F5;
+
+                &:focus,
+                &:hover {
+                    border: none;
+                    -webkit-box-shadow: none;
+                    -moz-box-shadow: none;
+                    box-shadow: none;
+                }
+            }
+        }
+    }
+}
+
+.size-s {
+    .input-dynamic {
+        height: 40px;
+
+        &__err {}
+    }
+}
+
+.size-l {
+    .input-dynamic {
+        height: 56px;
+
+        &__err {}
+    }
+}
+
+.text_tooltip-mui {
+    padding-left: 8px;
+    color: #94A3B8;
+    height: 16px;
+    font-family: "Inter";
+    font-size: 11px;
+    height: auto;
+}