intelicoreact 1.0.30 → 1.0.32

package/dist/Atomic/FormElements/Dropdown/Dropdown.js

@@ -275,7 +275,7 @@ var Dropdown = function Dropdown(_ref) {
   };
 
   var setListContainerStyles = function setListContainerStyles() {
-    var _dropdownRef$current$, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma;
+    var _dropdownRef$current$, _getComputedStyle$mar, _getComputedStyle, _getComputedStyle$mar2, _getComputedStyle$max, _getComputedStyle2, _getComputedStyle2$ma, _sw$getBoundingClient;
 
     var lc = getListContainer();
     if (!lc || !isOpen) return false;
@@ -293,12 +293,13 @@ var Dropdown = function Dropdown(_ref) {
     if (initListHeight === null) setInitListHeight(maxHeight);
     var toTop = top - margin;
     var toBottom = windowHeight - top - height - margin * 2;
-    var swHeight = toTop >= maxHeight || toBottom >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
+    var swHeight = sw === null || sw === void 0 ? void 0 : (_sw$getBoundingClient = sw.getBoundingClientRect()) === null || _sw$getBoundingClient === void 0 ? void 0 : _sw$getBoundingClient.height;
+    var maxSwHeight = toTop >= maxHeight || toBottom >= maxHeight ? maxHeight - 3 * margin : toTop > toBottom ? toTop - 3 * margin : toBottom - 4 * margin;
     var listPos = toTop < toBottom || toBottom >= swHeight ? 'bottom' : 'top';
     lc.style.minWidth = "".concat(width, "px");
     lc.style.left = "".concat(left, "px");
     lc.style.top = "".concat(listPos === 'bottom' ? top + height : top - swHeight - 3 * margin, "px");
-    sw.style.maxHeight = "".concat(swHeight, "px");
+    sw.style.maxHeight = "".concat(maxSwHeight, "px");
   };
 
   var renderListContainer = function renderListContainer() {

package/dist/Atomic/FormElements/FileLoader/FileLoader.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _LoadZone = _interopRequireDefault(require("./partial/LoadZone"));
+
+var _LoadedContent = _interopRequireDefault(require("./partial/LoadedContent"));
+
+require("./FileLoader.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var RC = 'file-loader';
+
+var FileLoader = function FileLoader(props) {
+  var _cn;
+
+  var fieldKey = props.fieldKey,
+      value = props.value,
+      disabled = props.disabled,
+      error = props.error,
+      className = props.className,
+      placeholder = props.placeholder,
+      onChange = props.onChange,
+      doLoad = props.doLoad,
+      filterFiles = props.filterFiles,
+      processErrors = props.processErrors,
+      isBlockNullValues = props.isBlockNullValues,
+      _props$isDisableError = props.isDisableErrorsClass,
+      isDisableErrorsClass = _props$isDisableError === void 0 ? true : _props$isDisableError,
+      uploadIcon = props.uploadIcon,
+      downloadIcon = props.downloadIcon,
+      deleteIcon = props.deleteIcon,
+      spiner = props.spiner,
+      isIconAfter = props.isIconAfter,
+      _props$isLinkTypeDown = props.isLinkTypeDownload,
+      isLinkTypeDownload = _props$isLinkTypeDown === void 0 ? false : _props$isLinkTypeDown,
+      _props$isUseLinkTitle = props.isUseLinkTitle,
+      isUseLinkTitle = _props$isUseLinkTitle === void 0 ? false : _props$isUseLinkTitle;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      isLoadContent = _useState2[0],
+      setIsLoadContent = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      dragenter = _useState4[0],
+      setDragenter = _useState4[1];
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)(RC, className, (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "_load-content"), isLoadContent), (0, _defineProperty2.default)(_cn, "".concat(RC, "_load-zone"), !value), (0, _defineProperty2.default)(_cn, "".concat(RC, "_hover"), dragenter), (0, _defineProperty2.default)(_cn, "".concat(RC, "_disabled"), disabled), (0, _defineProperty2.default)(_cn, "".concat(RC, "_error"), !isDisableErrorsClass && !!error), _cn))
+  }, isLoadContent && spiner, value ? /*#__PURE__*/_react.default.createElement(_LoadedContent.default, {
+    RC: RC,
+    value: value,
+    onDelete: function onDelete() {
+      return onChange(null);
+    },
+    icon: downloadIcon,
+    isIconAfter: isIconAfter,
+    deleteIcon: deleteIcon,
+    isUseLinkTitle: isUseLinkTitle,
+    isLinkTypeDownload: isLinkTypeDownload
+  }) : /*#__PURE__*/_react.default.createElement(_LoadZone.default, {
+    RC: RC,
+    fieldKey: fieldKey,
+    onChange: onChange,
+    icon: uploadIcon,
+    doLoad: doLoad,
+    dragenter: dragenter,
+    setDragenter: setDragenter,
+    setIsLoadContent: setIsLoadContent,
+    placeholder: placeholder,
+    filterFiles: filterFiles,
+    processErrors: processErrors,
+    isBlockNullValues: isBlockNullValues
+  }));
+};
+
+var _default = FileLoader;
+exports.default = _default;

package/dist/Atomic/FormElements/FileLoader/FileLoader.scss

@@ -0,0 +1,155 @@
+// @import '../../scss/main.scss';
+
+.file-loader {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+  flex-flow: row nowrap;
+  justify-content: space-between;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 28px;
+  padding: 4px 6px 4px 5px;
+
+  border: 1px solid #E2E5EC;
+  border-radius: 3px;
+  background-color: #FFF;
+
+  &_hover {
+    border-color: #6B81DD;
+    filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
+  }
+
+  &_load-zone {
+    padding: 0;
+  }
+
+  &_load-content {
+    pointer-events: none;
+  }
+
+  &__value-link {
+    display: flex;
+    align-items: center;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+
+    box-sizing: border-box;
+    width: fit-content;
+    height: 100%;
+
+    text-decoration: none;
+
+    color: #166EAD;
+    outline: none;
+
+    font-size: 13px;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 20px;
+
+    svg {
+      width: 16px;
+      height: 16px;
+
+      color: #9AA0B9;
+    }
+  }
+
+  &__value-name {
+    margin-left: 4px;
+  }
+
+  &__value-link_icon-after {
+    .file-loader__value-name {
+      margin-right: 4px;
+      margin-left: 0;
+    }
+  }
+
+  &__delete-value-button {
+    width: 16px;
+    height: 16px;
+
+    cursor: pointer;
+
+    svg {
+      width: auto;
+      height: 100%;
+
+      color: #F06D8D;
+    }
+  }
+
+  &__icon-block {
+    position: absolute;
+    top: calc(50% - 8px);
+    left: 5px;
+
+    width: 16px;
+    height: 16px;
+
+    pointer-events: none;
+
+    color: #9AA0B9;
+
+    svg {
+      width: auto;
+      height: 100%;
+    }
+  }
+
+  &__input-label {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    padding: 4px 6px 4px 25px;
+
+    cursor: pointer;
+
+    color: #1E1E2D;
+
+    font-size: 13px;
+    font-weight: 300;
+
+    font-style: normal;
+    line-height: 20px;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    &_no-icon {
+      padding-left: 5px;
+    }
+  }
+
+  &__input {
+    display: none;
+  }
+
+  .loader-box {
+    opacity: 0.2;
+
+    .lds-ring.lds-ring_little {
+      width: 20px;
+      height: 20px;
+
+      div {
+        border-width: 2px !important;
+      }
+    }
+  }
+
+  &_error {
+    border-color: #F06D8D;
+  }
+
+  &_disabled {
+    pointer-events: none;
+
+    opacity: 0.5;
+  }
+}

package/dist/Atomic/FormElements/FileLoader/partial/AnyOuterClass.scss

@@ -0,0 +1,9 @@
+.any-outer-class__file-loader {
+  font-family: Roboto;
+
+  .file-loader__icon-block {
+    svg {
+      transform: rotate(180deg);
+    }
+  }
+}

package/dist/Atomic/FormElements/FileLoader/partial/LoadZone.js

@@ -0,0 +1,175 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("../FileLoader.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var DEFAULT_MAX_FILE_SIZE = 1024 * 1024 * 5; //5Мб
+
+var FILTER_FILES_DEFAULT = function FILTER_FILES_DEFAULT(file) {
+  return file.size <= DEFAULT_MAX_FILE_SIZE ? file : null;
+};
+
+var LoadZone = function LoadZone(_ref) {
+  var RC = _ref.RC,
+      fieldKey = _ref.fieldKey,
+      onChange = _ref.onChange,
+      doLoad = _ref.doLoad,
+      setDragenter = _ref.setDragenter,
+      setIsLoadContent = _ref.setIsLoadContent,
+      icon = _ref.icon,
+      _ref$placeholder = _ref.placeholder,
+      placeholder = _ref$placeholder === void 0 ? '' : _ref$placeholder,
+      _ref$filterFiles = _ref.filterFiles,
+      filterFiles = _ref$filterFiles === void 0 ? FILTER_FILES_DEFAULT : _ref$filterFiles,
+      processErrors = _ref.processErrors,
+      isBlockNullValues = _ref.isBlockNullValues;
+  var dropZoneId = "dropZone-".concat(fieldKey);
+  var handle = {
+    change: function () {
+      var _change = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+        var file, validatedFile;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                setIsLoadContent === null || setIsLoadContent === void 0 ? void 0 : setIsLoadContent(true);
+                file = e.type === 'change' ? e.target.files[0] : e.dataTransfer.files[0];
+
+                if (!filterFiles) {
+                  _context.next = 8;
+                  break;
+                }
+
+                _context.next = 5;
+                return filterFiles(file);
+
+              case 5:
+                _context.t0 = _context.sent;
+                _context.next = 9;
+                break;
+
+              case 8:
+                _context.t0 = file;
+
+              case 9:
+                validatedFile = _context.t0;
+
+                if (!(processErrors && !validatedFile)) {
+                  _context.next = 13;
+                  break;
+                }
+
+                _context.next = 13;
+                return processErrors(file);
+
+              case 13:
+                if (!(!isBlockNullValues || validatedFile)) {
+                  _context.next = 19;
+                  break;
+                }
+
+                _context.t1 = onChange;
+                _context.next = 17;
+                return doLoad(validatedFile).catch(function () {
+                  return null;
+                });
+
+              case 17:
+                _context.t2 = _context.sent;
+                (0, _context.t1)(_context.t2);
+
+              case 19:
+                setIsLoadContent === null || setIsLoadContent === void 0 ? void 0 : setIsLoadContent(false);
+
+              case 20:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function change(_x) {
+        return _change.apply(this, arguments);
+      }
+
+      return change;
+    }(),
+    dragover: function dragover(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      return false;
+    },
+    dragenter: function dragenter(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setDragenter(true);
+      return false;
+    },
+    dragleave: function dragleave(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setDragenter(false);
+      return false;
+    },
+    drop: function drop(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      setDragenter(false);
+      handle.change(e);
+      return false;
+    }
+  };
+  (0, _react.useEffect)(function () {
+    var dropbox = document.getElementById(dropZoneId);
+    dropbox === null || dropbox === void 0 ? void 0 : dropbox.addEventListener('dragenter', handle.dragenter, false);
+    dropbox === null || dropbox === void 0 ? void 0 : dropbox.addEventListener('dragover', handle.dragover, false);
+    dropbox === null || dropbox === void 0 ? void 0 : dropbox.addEventListener('dragleave', handle.dragleave, false);
+    dropbox === null || dropbox === void 0 ? void 0 : dropbox.addEventListener('drop', handle.drop, false);
+    dropbox === null || dropbox === void 0 ? void 0 : dropbox.addEventListener('dragend', handle.dragleave, false);
+    return function () {
+      dropbox === null || dropbox === void 0 ? void 0 : dropbox.removeEventListener('dragenter', handle.dragenter, false);
+      dropbox === null || dropbox === void 0 ? void 0 : dropbox.removeEventListener('dragover', handle.dragover, false);
+      dropbox === null || dropbox === void 0 ? void 0 : dropbox.removeEventListener('dragleave', handle.dragleave, false);
+      dropbox === null || dropbox === void 0 ? void 0 : dropbox.removeEventListener('drop', handle.drop, false);
+      dropbox === null || dropbox === void 0 ? void 0 : dropbox.removeEventListener('dragend', handle.dragleave, false);
+    };
+  }, [fieldKey, doLoad]);
+  return doLoad && typeof doLoad === 'function' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, icon && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)("".concat(RC, "__icon-block"))
+  }, icon), /*#__PURE__*/_react.default.createElement("label", {
+    id: dropZoneId,
+    className: (0, _classnames.default)("".concat(RC, "__input-label"), (0, _defineProperty2.default)({}, "".concat(RC, "__input-label_no-icon"), !icon)),
+    htmlFor: fieldKey
+  }, placeholder, /*#__PURE__*/_react.default.createElement("input", {
+    id: fieldKey,
+    className: (0, _classnames.default)("".concat(RC, "__input")),
+    type: "file",
+    onChange: handle.change
+  }))) : 'develop error: no doLoad';
+};
+
+var _default = LoadZone;
+exports.default = _default;

package/dist/Atomic/FormElements/FileLoader/partial/LoadedContent.js

@@ -0,0 +1,100 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _utils = require("../../../../Functions/utils");
+
+require("../FileLoader.scss");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var LoadedContent = function LoadedContent(props) {
+  var RC = props.RC,
+      value = props.value,
+      onDelete = props.onDelete,
+      icon = props.icon,
+      isIconAfter = props.isIconAfter,
+      deleteIcon = props.deleteIcon,
+      isUseLinkTitle = props.isUseLinkTitle,
+      isLinkTypeDownload = props.isLinkTypeDownload;
+  var handle = {
+    download: function () {
+      var _download = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+        var target;
+        return _regenerator.default.wrap(function _callee$(_context) {
+          while (1) {
+            switch (_context.prev = _context.next) {
+              case 0:
+                e.stopPropagation();
+                e.preventDefault();
+                target = e.target.tagName === 'SPAN' || e.target.tagName === 'svg' ? e.target.parentNode : e.target;
+                (0, _utils.downloadFile)({
+                  url: target.href,
+                  name: value.name
+                });
+
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }
+        }, _callee);
+      }));
+
+      function download(_x) {
+        return _download.apply(this, arguments);
+      }
+
+      return download;
+    }()
+  };
+  var additionalProps = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread(_objectSpread({}, isUseLinkTitle ? {
+      title: isLinkTypeDownload ? "Download ".concat(value.name) : value.path
+    } : {}), isLinkTypeDownload ? {
+      onClick: handle.download
+    } : {
+      target: '_blank'
+    }), {}, {
+      key: "LoadedContent-isNotUseLinkTitle-".concat(isUseLinkTitle, "-isLinkTypeDownload-").concat(isLinkTypeDownload)
+    });
+  }, [isUseLinkTitle, isLinkTypeDownload]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("a", (0, _extends2.default)({}, additionalProps, {
+    href: value.path,
+    rel: "noreferrer",
+    className: (0, _classnames.default)("".concat(RC, "__value-link"), (0, _defineProperty2.default)({}, "".concat(RC, "__value-link_icon-after"), isIconAfter))
+  }), !isIconAfter && icon, /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("".concat(RC, "__value-name"))
+  }, value.name), isIconAfter && icon), /*#__PURE__*/_react.default.createElement("span", {
+    className: (0, _classnames.default)("".concat(RC, "__delete-value-button")),
+    onClick: onDelete
+  }, deleteIcon || 'X'));
+};
+
+var _default = LoadedContent;
+exports.default = _default;

package/dist/Atomic/FormElements/Input/Input.js

@@ -53,7 +53,6 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       onKeyDown = _ref$onKeyDown === void 0 ? function () {} : _ref$onKeyDown,
       isNotBlinkErrors = _ref.isNotBlinkErrors,
       isPriceInput = _ref.isPriceInput,
-      isHexFormat = _ref.isHexFormat,
       onlyNumbers = _ref.onlyNumbers,
       isOnlyString = _ref.isOnlyString,
       disabled = _ref.disabled,
@@ -201,7 +200,6 @@ var Input = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
       }
 
       if (!isNotValidateASCII) inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
-      if (isHexFormat) inputValue = (0, _fieldValueFormatters.formatToHex)(inputValue);
       if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
       if (isCropFirstNool && inputValue[0] == 0) return '';
       if (onlyNumbers && isOnlyString || isOnlyString) inputValue = (0, _fieldValueFormatters.formatToLetters)(inputValue, softStringMode);else if (onlyNumbers) inputValue = handle.correctMinMax(inputValue, 'max');

package/dist/Atomic/FormElements/InputColor/InputColor.js

@@ -11,37 +11,60 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
-
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _Input = _interopRequireDefault(require("../Input/Input"));
 
+var _fieldValueFormatters = require("../../../Functions/fieldValueFormatters");
+
 require("./InputColor.scss");
 
-var _excluded = ["className", "symbolsLimit", "isHexFormat", "initialHexColorBlock"];
+var _excluded = ["value", "className", "symbolsLimit", "onChange", "withHexFormat", "initialHexOfColorBlock", "testId"];
 
-//todo подумать куда повесить класснейм
 var InputColor = function InputColor(_ref) {
-  var className = _ref.className,
+  var value = _ref.value,
+      className = _ref.className,
       symbolsLimit = _ref.symbolsLimit,
-      _ref$isHexFormat = _ref.isHexFormat,
-      isHexFormat = _ref$isHexFormat === void 0 ? true : _ref$isHexFormat,
-      _ref$initialHexColorB = _ref.initialHexColorBlock,
-      initialHexColorBlock = _ref$initialHexColorB === void 0 ? 'transparent' : _ref$initialHexColorB,
+      onChange = _ref.onChange,
+      _ref$withHexFormat = _ref.withHexFormat,
+      withHexFormat = _ref$withHexFormat === void 0 ? {
+    withSharp: true,
+    isTurnOn: true
+  } : _ref$withHexFormat,
+      _ref$initialHexOfColo = _ref.initialHexOfColorBlock,
+      initialHexOfColorBlock = _ref$initialHexOfColo === void 0 ? 'transparent' : _ref$initialHexOfColo,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'inputColor' : _ref$testId,
       args = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  // HANDLES
+  var handle = {
+    change: function change(e) {
+      var inputValue = e !== null && e !== void 0 && e.target ? e.target.value : e;
+      inputValue = (0, _fieldValueFormatters.formatToOnlyASCIICodeText)(inputValue);
+      if (withHexFormat !== null && withHexFormat !== void 0 && withHexFormat.isTurnOn) inputValue = (0, _fieldValueFormatters.formatToHex)({
+        inputValue: inputValue,
+        withSharp: withHexFormat === null || withHexFormat === void 0 ? void 0 : withHexFormat.withSharp
+      });
+      if (symbolsLimit && inputValue.length > +symbolsLimit) inputValue = inputValue.substring(0, +symbolsLimit);
+      onChange === null || onChange === void 0 ? void 0 : onChange(inputValue);
+    }
+  };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('inputColor', className)
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)('inputColor__color-block'),
     style: {
-      backgroundColor: args.value || initialHexColorBlock
+      backgroundColor: value && value.length === 7 ? value : initialHexOfColorBlock
     }
   }), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, args, {
+    value: value,
+    onChange: handle.change,
     symbolsLimit: symbolsLimit || 7,
-    isHexFormat: isHexFormat,
-    className: (0, _classnames.default)(className, 'inputColor__input'),
-    type: "text"
+    className: (0, _classnames.default)('input inputColor__input'),
+    type: "text",
+    testId: testId
   })));
 };