ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/DropDownSelector/DropdownSelector.scss

@@ -0,0 +1,272 @@
+@font-face {
+    font-family: Rubik;
+    src: url("../../fonts/Rubik/Rubik-Regular.ttf");
+    font-weight: 400;
+    font-style: normal;
+}
+
+
+.selector_wrapper_size-l,
+.selector_wrapper_value-top_size-l,
+.selector_wrapper,
+.selector_wrapper_value-top,
+.selector_wrapper_disabled {
+    display: flex;
+    padding: 0;
+    height: auto;
+    padding: 0;
+    width: 100%;
+    min-height: 40px;
+    min-width: 210px;
+    max-width: 210px;
+    height: auto;
+    border-radius: 8px;
+    position: relative;
+
+    &__text_tooltip {
+        padding-left: 8px;
+        color: #94A3B8;
+        height: 16px;
+        font-family: "Inter";
+        font-size: 12px;
+        height: auto;
+        margin-top: 4px;
+    }
+
+    //динамический placeholder
+    .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: 14px;
+            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: 12px;
+                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 {
+
+        .placeholder-dinamyc,
+        .placeholder-dinamyc_min,
+        .placeholder-dinamyc_min-blue {
+            label {
+                color: #D3DEE7;
+            }
+
+            &_min,
+            &_min-blue {
+                label {
+                    color: #D3DEE7;
+                }
+            }
+
+            &_min-blue {
+                label {
+                    color: #D3DEE7;
+                }
+            }
+        }
+    }
+
+    &:hover {
+        outline: none;
+    }
+
+    .dropdown_selector {
+
+        width: 100%;
+        border-radius: 8px;
+        position: relative;
+        border: 1px solid #E0E7F2;
+        min-height: 36px;
+
+        &:hover {
+            border: 1px solid #64748B;
+        }
+
+        &:active,
+        &:focus-within {
+            border: 1px solid #57CC6A;
+            border-radius: 8px;
+
+            .css-t3ipsp-control {
+                &:focus-within {
+                    border: none;
+                }
+            }
+        }
+
+        .css-13cymwt-control,
+        .css-t3ipsp-control {
+            min-height: 36px;
+            height: 100%;
+            outline: none;
+            box-shadow: none;
+        }
+    }
+
+    .css-16xfy0z-control {
+        background-color: white;
+    }
+
+    .dropdown_selector__err {
+        border: 1px solid red;
+    }
+
+    .dropdown_selector>div {
+        border-radius: 8px;
+        height: 100%;
+        min-height: 100%;
+        outline: none;
+        border: none;
+    }
+
+    // options выпадающего списка
+    .option-item {
+        border-radius: 0px;
+        width: 100%;
+        display: flex;
+        align-items: center;
+        min-height: 40px;
+        border-bottom: 2px solid var(--stroke-primary-primary, #E0E7F2);
+        background-color: white;
+
+        &:last-child {
+            border: none;
+        }
+
+        &:hover,
+        &:active {
+            background-color: #F5F5FB;
+            border-radius: 0px;
+            cursor: default;
+        }
+
+        .text {
+            color: #020617;
+            font-family: Inter;
+            font-size: 14px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 14px;
+            width: 100%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            font-size: 12px;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+        }
+    }
+
+    .no-options {
+        color: #020617;
+        font-family: Inter;
+        font-size: 14px;
+        font-style: normal;
+        font-weight: 400;
+        line-height: 12px;
+        padding: 4px;
+    }
+
+    .option-task {
+        border-radius: 0px;
+        display: flex;
+        flex-direction: column;
+        align-items: start;
+        min-height: 40px;
+        border-bottom: 2px solid #E0E7F2;
+
+        .text {
+            text-overflow: ellipsis;
+            overflow: hidden;
+            display: -webkit-box;
+            font-size: 14px;
+            -webkit-line-clamp: 2;
+            -webkit-box-orient: vertical;
+        }
+
+        &:last-child {
+            border: none;
+        }
+
+        &:hover,
+        &:active {
+            background-color: #E6F7FF;
+            border-radius: 0px;
+            cursor: default;
+        }
+
+        .text_min {
+            font-size: 12px;
+
+            span {
+                color: #8F99A3;
+            }
+        }
+    }
+
+    &_size-l {
+
+        .dropdown_selector {
+            min-height: 56px;
+
+            &:disabled {
+                min-height: 56px;
+            }
+        }
+    }
+}

package/dist/stories/DropDownSelector/img/close_icon.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Basic icons ">
+<path id="Vector" d="M11 3L3 11" stroke="#475569" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M3 3L11 11" stroke="#475569" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/dist/stories/DropDownSelector/img/close_icon_disabled.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Basic icons ">
+<path id="Vector" d="M11 3L3 11" stroke="#D3DEE7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M3 3L11 11" stroke="#D3DEE7" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

package/dist/stories/InputDinamycPlaceholder/InputDinamycPlaceholder.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = require("react");
+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"];
+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,
+    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 ? 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];
+  (0, _react.useEffect)(function () {
+    if (onChange) {
+      onChange(valueInside);
+    }
+  }, [valueInside]);
+  (0, _react.useEffect)(function () {
+    if (changeValue || changeValue === 0 || changeValue === '') {
+      setValueInside(changeValue);
+      if (setChangeValue) {
+        setChangeValue(false);
+      }
+    }
+  }, [changeValue]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "input-dinamyc-placeholder",
+    style: {
+      width: '100%',
+      marginBottom: tooltip ? '24px' : ''
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(err ? 'input-box__err' : 'input-box', " ").concat(size == 's' ? 'size-s' : 'size-l')
+  }, /*#__PURE__*/React.createElement("input", {
+    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) {
+      setValueInside(e.target.value);
+    },
+    spellCheck: "false",
+    onClick: function onClick(e) {
+      setIsFocus(true);
+      setShowInfo(true);
+    },
+    readOnly: !isFocus && (type == 'password' || type == 'email') && !autoComplete,
+    onBlur: function onBlur(e) {
+      setIsFocus(false);
+      setShowInfo(false);
+    },
+    autoComplete: autoComplete ? 'on' : 'off',
+    autoFocus: autoFocus,
+    disabled: disabled,
+    required: required,
+    size: size
+  }), placeholder && /*#__PURE__*/React.createElement("div", {
+    className: (valueInside === null || valueInside === void 0 ? void 0 : valueInside.length) > 0 ? isFocus ? 'placeholder-dinamyc_min-blue' : 'placeholder-dinamyc_min' : 'placeholder-dinamyc'
+  }, /*#__PURE__*/React.createElement("label", null, placeholder, required ? /*#__PURE__*/React.createElement("span", {
+    style: {
+      color: 'red'
+    }
+  }, " *") : '')), /*#__PURE__*/React.createElement("div", {
+    className: "input-box__clean-value"
+  }, showClearIndicator && (valueInside === null || valueInside === void 0 ? void 0 : valueInside.length) > 0 && /*#__PURE__*/React.createElement("button", {
+    className: "btn__clean",
+    onClick: function onClick(e) {
+      return setValueInside('');
+    }
+  }), type == 'password' && /*#__PURE__*/React.createElement("button", {
+    className: "btn__".concat(hidePassword ? 'show' : 'hide'),
+    onClick: function onClick(e) {
+      return setHidePassword(!hidePassword);
+    }
+  }), info && !err && showInfo && /*#__PURE__*/React.createElement("div", {
+    className: "input-box__info"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "tooltip-box"
+  }, /*#__PURE__*/React.createElement("button", {
+    className: "btn__info",
+    disabled: true
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "tooltip"
+  }, /*#__PURE__*/React.createElement("h6", {
+    className: "title"
+  }, infoHeader), /*#__PURE__*/React.createElement("p", {
+    className: "text"
+  }, info))))), err ? /*#__PURE__*/React.createElement("div", {
+    className: "err"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "text_red"
+  }, textErr)) : /*#__PURE__*/React.createElement("div", {
+    className: "err"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "text_tooltip"
+  }, tooltip))), tooltipStatic && /*#__PURE__*/React.createElement("p", {
+    className: "text_tooltip-mui"
+  }, tooltipStatic));
+};
+var _default = exports["default"] = InputDinamycPlaceholder;