ecomlab-components-next 0.1.159 → 0.1.162

package/dist/stories/Article/FormBtn/FormBtn.scss

@@ -0,0 +1,446 @@
+.modal-feedback-2 {
+    display: flex;
+    flex-direction: column;
+    padding: 32px;
+    gap: 24px;
+    align-items: center;
+    position: relative;
+    z-index: 1000;
+    display: flex;
+    width: auto;
+    min-width: 360px;
+    margin-left: auto;
+    margin-right: auto;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 8px;
+    background: var(--white, #FFF);
+    box-shadow: 0px 12px 32px 0px rgba(0, 0, 0, 0.12);
+    position: relative;
+    height: fit-content;
+    border-radius: 8px;
+
+    .b24-form-wrapper.b24-form-shadow {
+        box-shadow: none;
+        -webkit-box-shadow: none;
+    }
+
+    .btn-close {
+        cursor: pointer;
+        position: absolute;
+        width: 50px;
+        height: 50px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border: none;
+        background-color: inherit;
+        top: 10px;
+        right: 10px;
+    }
+
+    .b24-form-inner-box {
+        background-color: white;
+    }
+
+    .b24-form-sign {
+        padding-left: 0;
+        padding-right: 0;
+        background-color: white;
+    }
+
+    .b24-form-header,
+    .b24-form-padding-side {
+        form {
+            margin-top: 24px;
+
+            div {
+                display: flex;
+                flex-direction: column;
+            }
+        }
+
+        border: none;
+    }
+
+    .b24-form-header-title {
+        color: var(--, #464853);
+        text-align: center;
+        font-family: Inter;
+        font-size: 30px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 160%;
+        /* 48px */
+        letter-spacing: 0.15px;
+        margin-bottom: 0;
+    }
+
+    .b24-form-control {
+        height: 60px;
+    }
+
+    .b24-form-content,
+    .b24-form-padding-side {
+        padding: 0;
+    }
+
+    .b24-form-btn-block {
+        width: 100%;
+    }
+
+    .b24-form-btn {
+        border-radius: var(--Main-System-10px, 10px);
+        background: #00B45E;
+        width: 100%;
+        height: 60px;
+        color: var(--, #FFF);
+        text-align: center;
+        font-family: Inter;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 160%;
+        /* 32px */
+        letter-spacing: 0.1px;
+
+        &:hover {
+            background: #15803D;
+            transition: 0.5s;
+        }
+    }
+
+    .b24-form-header-description {
+        color: var(--, #464853);
+        text-align: center;
+        font-family: Inter;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 160%;
+        /* 32px */
+        letter-spacing: 0.1px;
+        margin-bottom: 0;
+    }
+
+    .b24-form-field,
+    .b24-form-field-name,
+    .b24-form-control-string,
+    .b24-form-control-alert {
+        .b24-form-control-label {
+            position: absolute;
+            top: -10px;
+        }
+    }
+
+    .b24-form-control-alert {
+        margin-bottom: 15 !important;
+    }
+
+    .b24-form-field {
+        margin-bottom: 24px;
+        -webkit-transition: 200ms linear margin-bottom;
+        -o-transition: 200ms linear margin-bottom;
+        transition: 200ms linear margin-bottom;
+    }
+
+    .b24-form-control-container,
+    .b24-form-control-icon-after {
+        width: 100%;
+        border-radius: 10px;
+        background: #F4F5F9;
+        border: none;
+        color: var(--, #464853);
+        font-family: Inter;
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 600;
+        line-height: 160%;
+        letter-spacing: 0.1px;
+        resize: none;
+        border: none;
+
+        .b24-form-control-label {
+            position: absolute;
+            top: -20px;
+            color: #8E91A1;
+            font-family: Inter;
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 20px;
+            transform: none;
+            flex-direction: row;
+
+            .b24-form-control-required {
+                position: relative;
+                left: .1em;
+            }
+        }
+
+        .b24-form-icon-after,
+        .b24-form-icon-remove {
+            background-image: url('./img/close-icon.svg');
+            background-repeat: no-repeat;
+            background-position: center;
+
+            &::after,
+            &::before {
+                display: none;
+            }
+        }
+
+
+
+
+        .b24-form-control:focus+.b24-form-control-label {
+            position: absolute;
+            top: -20px;
+            color: #8E91A1;
+            font-family: Inter;
+            font-size: 16px;
+            font-style: normal;
+            font-weight: 500;
+            line-height: 20px;
+            transform: none;
+        }
+
+        .b24-form-control,
+        .b24-form-control-not-empty {
+            width: 100%;
+            padding: 0;
+            border-radius: var(--Main-System-10px, 10px);
+            background: #F4F5F9;
+            border: none;
+            color: var(--, #464853);
+            font-family: Inter;
+            font-size: 20px;
+            font-style: normal;
+            font-weight: 600;
+            line-height: 160%;
+            padding-left: 20px;
+            padding-right: 20px;
+            letter-spacing: 0.1px;
+            border: none;
+            border-radius: 10px;
+
+            // &:-webkit-autofill {
+            //     background: #F4F5F9 !important;
+            // }
+
+            &:-webkit-autofill,
+            &:-webkit-autofill:hover,
+            &:-webkit-autofill:focus {
+                -webkit-box-shadow: 0 0 0px 1000px #F4F5F9 inset;
+                transition: background-color 5000s ease-in-out 0s;
+                border-radius: 10px !important;
+            }
+
+            &:focus {
+                outline: none;
+
+
+            }
+        }
+    }
+
+    .b24-form-content,
+    .b24-form-padding-side {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        margin-bottom: 22px;
+
+        .input-box {
+            display: flex;
+            flex-direction: column;
+
+            .text_name-field {
+                color: #8E91A1;
+                font-family: Inter;
+                font-size: 20px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: 160%;
+                letter-spacing: 0.1px;
+            }
+
+
+
+            textarea {
+                width: 100%;
+                height: 120px;
+                border-radius: 10px;
+                background: #F4F5F9;
+                border: none;
+                color: var(--, #464853);
+                font-family: Inter;
+                font-size: 20px;
+                font-style: normal;
+                font-weight: 600;
+                line-height: 160%;
+                padding-left: 20px;
+                padding-right: 20px;
+                letter-spacing: 0.1px;
+                resize: none;
+                padding-top: 16px;
+                padding-bottom: 16px;
+
+                &:focus {
+                    outline: none;
+                }
+            }
+        }
+
+        .text_info {
+            max-width: 300px;
+            text-align: center;
+            margin-top: 28px;
+            color: #696C7B;
+            font-family: Inter;
+            font-size: 15px;
+            font-style: normal;
+            font-weight: 400;
+            line-height: 130%;
+            letter-spacing: 0.075px;
+        }
+    }
+}
+
+body {
+    .blackout {
+        display: flex;
+        width: 100%;
+        height: 100%;
+        min-height: 100vh;
+        z-index: 10;
+        position: fixed;
+        overflow: hidden;
+        align-items: center;
+        justify-content: center;
+        background-color: rgb(0, 0, 0, 0.3);
+        padding: 20px;
+    }
+}
+
+@media (max-width: 420px) {
+    .modal-feedback {
+        margin-left: 10px;
+        margin-right: 10px;
+        max-width: calc(100% - 20px);
+        position: absolute;
+        top: 12px;
+        padding: 24px 16px;
+        min-width: 340px;
+
+        .btn-close {
+            width: 24px;
+            height: 24px;
+            top: 10px;
+            right: 10px;
+        }
+
+        .title {
+            max-width: 80%;
+            font-size: 24px;
+            line-height: 32px;
+        }
+
+        .text {
+            font-size: 16px;
+            line-height: 20px;
+        }
+
+        .input-group {
+            width: 100%;
+
+            .input-box {
+                .text_name-field {
+                    font-size: 16px;
+                }
+
+                input {
+                    width: 100%;
+                    height: 50px;
+                }
+            }
+
+            .text_info {
+                margin-top: 8px;
+            }
+        }
+    }
+
+    .b24-form-btn-block {
+
+        // .b24-form-btn {
+        //     background-color: #4285F4;
+
+        // }
+    }
+}
+
+.blackout {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    min-height: 100vh;
+    z-index: 10;
+    position: fixed;
+    overflow: auto;
+    align-items: center;
+    justify-content: center;
+    background-color: rgb(0, 0, 0, 0.3);
+    padding: 20px;
+}
+
+.form-consultation {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 30px;
+    gap: 10px;
+
+    .text_blue {
+        color: #9959FC;
+        text-align: center;
+        font-family: "Golos Text";
+        font-size: 28px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 28px;
+    }
+
+    .text_grey {
+        color: var(--globalparcing-grayscale-800, #434C5B);
+        text-align: center;
+        font-family: "Golos Text";
+        font-size: 20px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: 28px;
+    }
+}
+
+@media(max-width: 430px) {
+    .form-consultation {
+        padding: 0px;
+
+        .text_blue {
+            font-size: 22px;
+            line-height: 28px;
+        }
+
+        .text_grey {
+            font-size: 16px;
+        }
+
+        .violet-btn {
+            min-width: 100% !important;
+            max-width: 100% !important;
+            font-size: 16px !important;
+        }
+    }
+}

package/dist/stories/Article/FormBtn/img/clos_icon.svg

@@ -0,0 +1,6 @@
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 418">
+<circle id="Ellipse 999" cx="6.5" cy="6.5" r="5.5" stroke="#0B110B" stroke-width="2"/>
+<path id="Vector 141" d="M12.2929 14.7071C12.6834 15.0976 13.3166 15.0976 13.7071 14.7071C14.0976 14.3166 14.0976 13.6834 13.7071 13.2929L12.2929 14.7071ZM9.29289 11.7071L12.2929 14.7071L13.7071 13.2929L10.7071 10.2929L9.29289 11.7071Z" fill="#0B110B"/>
+</g>
+</svg>

package/dist/stories/Article/FormBtn/img/close-icon.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="Union" d="M17.4705 2.73916C18.0807 2.12897 18.0807 1.13965 17.4705 0.529454C16.8603 -0.0807407 15.871 -0.0807407 15.2608 0.529454L8.99998 6.79029L2.73915 0.529454C2.12896 -0.0807393 1.13964 -0.08074 0.529442 0.529454C-0.0807518 1.13965 -0.0807513 2.12897 0.529442 2.73916L6.79027 9L0.529423 15.2608C-0.0807708 15.871 -0.0807714 16.8604 0.529423 17.4706C1.13962 18.0807 2.12894 18.0807 2.73913 17.4706L8.99998 11.2097L15.2608 17.4706C15.871 18.0808 16.8603 18.0808 17.4705 17.4706C18.0807 16.8604 18.0807 15.871 17.4705 15.2608L11.2097 9L17.4705 2.73916Z" fill="#464853"/>
+</svg>

package/dist/stories/Article/ImgArticle/ImgArticle.js

@@ -0,0 +1,204 @@
+"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.ImgArticle = void 0;
+var _universalCookie = _interopRequireDefault(require("universal-cookie"));
+var _noPhoto = _interopRequireDefault(require("../../../common/img/noPhoto.png"));
+var _react = require("react");
+var _InputDinamycPlaceholder = _interopRequireDefault(require("../../InputDinamycPlaceholder/InputDinamycPlaceholder"));
+require("./ImgArticle.scss");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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; }
+var ImgArticle = exports.ImgArticle = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var data = _ref.data,
+    editMode = _ref.editMode,
+    onChange = _ref.onChange;
+  var _useState = (0, _react.useState)(""),
+    _useState2 = _slicedToArray(_useState, 2),
+    extension = _useState2[0],
+    setExtension = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    error = _useState4[0],
+    setError = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    isOpen = _useState6[0],
+    setOpen = _useState6[1];
+  var fileInputRef = (0, _react.useRef)();
+  // const showPlaceholder = (data === undefined || data === '') && uploadedImage === undefined
+  var cookies = new _universalCookie["default"]();
+  var token = cookies.get('auth');
+  var activeLang = localStorage.getItem('lang');
+  var _useState7 = (0, _react.useState)(null),
+    _useState8 = _slicedToArray(_useState7, 2),
+    objImg = _useState8[0],
+    setObjImg = _useState8[1];
+  var _useState9 = (0, _react.useState)(data === null || data === void 0 ? void 0 : data.alt),
+    _useState10 = _slicedToArray(_useState9, 2),
+    altValue = _useState10[0],
+    setAltValue = _useState10[1];
+  var translatePlaceholderOpen = function translatePlaceholderOpen() {
+    if (activeLang == 'rus') return 'Открыть изображение';
+    if (activeLang == 'eng') return 'Open image';
+    if (activeLang == 'tur') return "Resmi büyüt";
+    return 'Открыть изображение';
+  };
+  var translatePlaceholderSelected = function translatePlaceholderSelected() {
+    if (activeLang == 'rus') return 'Выберите изображение';
+    if (activeLang == 'eng') return 'Select an image';
+    if (activeLang == 'tur') return "Bir resim seçin";
+    return 'Выберите изображение';
+  };
+  (0, _react.useImperativeHandle)(ref, function () {
+    return {
+      error: error,
+      // прикрутить открытие системного диалога с выбором изображения
+      focus: function focus() {},
+      data: objImg
+    };
+  }, [objImg]);
+  var fetchPostImg = function fetchPostImg(file) {
+    var fd = new FormData();
+    fd.append('images', file);
+    var url = "https://apps1.ecomru.ru:6001/redactor/images";
+    var requestHeaders = {
+      'Accept': 'application/json',
+      'Cache-control': 'no-cache',
+      'Authorization': "Bearer ".concat(token)
+    };
+    fetch(url, {
+      body: fd,
+      method: 'POST',
+      headers: requestHeaders
+    }).then(function (res) {
+      if (res.ok) {
+        return res.json();
+      } else {
+        throw new Error('bad table response');
+      }
+    }).then(function (json) {
+      if (json.images) {
+        var _json$images;
+        setObjImg({
+          value: (_json$images = json.images) === null || _json$images === void 0 || (_json$images = _json$images[0]) === null || _json$images === void 0 ? void 0 : _json$images.url
+        });
+      }
+    })["catch"](function (err) {
+      console.log(err);
+    })["finally"](function () {
+      mapContentToApiRequest(contentData);
+    });
+  };
+  var handleImageClick = function handleImageClick(e) {
+    if (!editMode) {
+      var html = document.querySelector('html');
+      html.style = 'overflow: hidden';
+      setOpen(!isOpen);
+      return;
+    }
+    if (fileInputRef.current) {
+      fileInputRef.current.click();
+    }
+  };
+  var handleFileInput = function handleFileInput(e) {
+    if (e.target.files.length === 0) {
+      e.preventDefault();
+      return;
+    }
+    var fileBase64Reader = new FileReader();
+    fileBase64Reader.onload = function () {
+      var _fileBase64Reader$res, _extensionAndBase64$;
+      var re = /;base64,/;
+      var extensionAndBase64 = (_fileBase64Reader$res = fileBase64Reader.result) === null || _fileBase64Reader$res === void 0 ? void 0 : _fileBase64Reader$res.split(re);
+      var onlyExtension = (_extensionAndBase64$ = extensionAndBase64[0]) === null || _extensionAndBase64$ === void 0 ? void 0 : _extensionAndBase64$.split('image/')[1];
+      setExtension(onlyExtension);
+      fetchPostImg(e.target.files[0]);
+    };
+    fileBase64Reader.readAsDataURL(e.target.files[0]);
+    setError(false);
+    onChange();
+  };
+  (0, _react.useEffect)(function () {
+    setObjImg({
+      value: data === null || data === void 0 ? void 0 : data.value,
+      alt: data === null || data === void 0 ? void 0 : data.alt
+    });
+  }, [data]);
+  (0, _react.useEffect)(function () {
+    if (!isOpen) {
+      var html = document.querySelector('html');
+      html.style = 'overflow: unset';
+    }
+  }, [isOpen]);
+  (0, _react.useEffect)(function () {
+    setObjImg(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        alt: altValue
+      });
+    });
+  }, [altValue]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "img-container",
+    onClick: handleImageClick
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "blackout",
+    style: {
+      display: isOpen ? 'flex' : 'none'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "img-box"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "img",
+    src: objImg === null || objImg === void 0 ? void 0 : objImg.value
+  }))), /*#__PURE__*/React.createElement("button", {
+    className: editMode ? 'img-container__button' : 'img-container__button__readonly'
+  }, /*#__PURE__*/React.createElement("img", {
+    src: objImg !== null && objImg !== void 0 && objImg.value ? objImg === null || objImg === void 0 ? void 0 : objImg.value : _noPhoto["default"],
+    onError: function onError(e) {
+      e.target.src = _noPhoto["default"];
+      setError(true);
+    },
+    className: "img",
+    extension: extension,
+    alt: altValue ? altValue : ''
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "hidden-placeholder"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "text"
+  }, objImg ? translatePlaceholderOpen() : translatePlaceholderSelected()))), /*#__PURE__*/React.createElement("input", {
+    name: "uploadedImage",
+    ref: fileInputRef,
+    className: "img-container__file-input",
+    type: "file",
+    onChange: handleFileInput,
+    accept: "image/png, image/jpeg"
+  }), editMode && /*#__PURE__*/React.createElement("div", {
+    className: "link_modal",
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "link_modal_container"
+  }, /*#__PURE__*/React.createElement(_InputDinamycPlaceholder["default"], {
+    placeholder: "\u0417\u043D\u0430\u0447\u0435\u043D\u0438\u0435 alt",
+    onChange: function onChange(e) {
+      return setAltValue(e);
+    },
+    changeValue: altValue,
+    autoComplete: false
+  })))));
+});