intelicoreact 1.0.29 → 1.0.30

package/dist/Atomic/FormElements/Dropdown/Dropdown.scss

@@ -1,44 +1,57 @@
 @import "../../../scss/vars";
 
 .dropdown {
+  position: relative;
+
   display: inline-flex;
   flex-direction: column;
-  position: relative;
+
   width: 100%;
+
   border-radius: 7px;
 
   &__container {
-    display: block;
     position: fixed;
     z-index: 99999;
+
+    display: block;
+
     box-sizing: border-box;
   }
 
   &__trigger {
-    background: #ffffff;
-    border: 1px solid #e2e5ec;
+    position: relative;
+
+    display: block;
+    align-items: center;
+
     box-sizing: border-box;
-    border-radius: 3px;
     width: 100%;
     height: 28px;
-    align-items: center;
+
     cursor: pointer;
-    font-weight: 400;
-    display: block;
-    position: relative;
     text-align: left;
 
+    border: 1px solid #E2E5EC;
+    border-radius: 3px;
+    background: #FFF;
+
+    font-weight: 400;
+
     .text {
+      overflow: hidden;
+
+      max-width: calc(100% - 5px);
       padding: 0 16px 0 8px;
+
       white-space: nowrap;
-      overflow: hidden;
       text-overflow: ellipsis;
-      max-width: calc(100% - 5px);
     }
 
     &.error {
       border-color: $color--secondary;
     }
+
     &.placeholder .text {
       opacity: 0.7;
     }
@@ -46,26 +59,32 @@
 
   &__input {
     width: 100%;
-    background: none;
-    border: none;
     height: 16px;
+
     text-overflow: ellipsis;
+
+    border: none;
+    background: none;
+
     font-weight: 400;
   }
 
   &__list {
-    box-sizing: border-box;
     position: relative;
-    background: #ffffff;
-    border: 1px solid #e2e5ec;
-    box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
+    z-index: 6;
+    top: 100%;
+
+    overflow-y: auto;
+
+    box-sizing: border-box;
     min-width: 100%;
+    max-height: 320px;
     margin-top: 4px;
     padding: 5px 0;
-    max-height: 320px;
-    overflow-y: auto;
-    top: 100%;
-    z-index: 6;
+
+    border: 1px solid #E2E5EC;
+    background: #FFF;
+    box-shadow: 0 5px 20px rgb(0 0 0 / 15%);
 
     &::-webkit-scrollbar {
       width: 4px;
@@ -76,62 +95,79 @@
     }
 
     &::-webkit-scrollbar-thumb {
-      background: $color--gray--dark;
       border-radius: 4px;
+      background: $color--gray--dark;
     }
 
     &-top {
-      bottom: calc(100% + 4px);
       top: auto;
+      bottom: calc(100% + 4px);
+
       box-shadow: 0 -3px 10px rgb(0 0 0 / 15%);
     }
 
     &-item {
+      position: relative;
+
       display: flex;
+      overflow: hidden;
       align-items: center;
-      border: none;
-      background: transparent;
+
+      width: 100%;
+      height: 24px;
       padding: 0 20px 0 30px;
-      position: relative;
+
       cursor: pointer;
+      white-space: nowrap;
+
       color: $color--dark;
+      border: none;
+      background: transparent;
+
       font-size: 13px;
       font-weight: 400;
       line-height: 24px;
-      width: 100%;
-      height: 24px;
-      white-space: nowrap;
-      overflow: hidden;
 
       &--modal {
-        color: #1f7499;
-        font-size: 14px;
-        line-height: 20px;
-        letter-spacing: 0.2px;
         position: relative;
+
         width: 100%;
+
         text-align: left;
+        letter-spacing: 0.2px;
 
-        &:after {
-          content: "";
+        color: #1F7499;
+
+        font-size: 14px;
+        line-height: 20px;
+
+        &::after {
           position: absolute;
           bottom: -2px;
-          height: 1px;
+
           width: 300%;
+          height: 1px;
+
+          content: "";
           transform: translateX(-50%);
-          background-color: #e8e9ec;
+
+          background-color: #E8E9EC;
         }
       }
+
       &--no-options {
         box-sizing: border-box;
       }
+
       &:hover,
       &_active {
         background: $color--gray--gentle;
       }
+
       &_disabled {
-        opacity: 0.3;
         pointer-events: none;
+
+        opacity: 0.3;
       }
 
       &-postfix {
@@ -145,13 +181,16 @@
   }
 
   &__arrow {
+    position: absolute;
+    top: 50%;
+    right: 4px;
+
     display: flex;
     align-items: center;
+
     width: 16px;
     height: 16px;
-    position: absolute;
-    right: 4px;
-    top: 50%;
+
     transform: translate(0, -50%);
 
     & svg {
@@ -161,13 +200,15 @@
   }
 
   &__active-icon {
-    align-items: center;
     position: absolute;
-    left: 9px;
     top: 0;
     bottom: 0;
-    margin: auto;
+    left: 9px;
+
     display: none;
+    align-items: center;
+
+    margin: auto;
 
     &_active {
       display: flex;
@@ -181,12 +222,16 @@
 
   &-group {
     margin-top: 10px;
+
     &__name {
-      font-size: 10px;
-      color: $color--gray--dark;
-      text-transform: uppercase;
-      margin-left: 17px;
       margin-bottom: 6px;
+      margin-left: 17px;
+
+      text-transform: uppercase;
+
+      color: $color--gray--dark;
+
+      font-size: 10px;
     }
   }
 
@@ -195,16 +240,20 @@
   }
 
   &__error {
+    position: absolute;
     top: 50px;
     left: 2px;
-    position: absolute;
+
     display: block;
-    font-size: 10px;
+
     color: $color--secondary;
+
+    font-size: 10px;
   }
 
   &.disabled {
     pointer-events: none;
+
     opacity: 0.5;
   }
 }

package/dist/Atomic/FormElements/Dropdown/components/DropdownLoader.scss

@@ -1,56 +1,74 @@
 @mixin fill-parent {
-  left: 0;
   top: 0;
+  left: 0;
+
   width: 100%;
   height: 100%;
 }
 
 .dropdown-loader-box {
   position: absolute;
-  @include fill-parent;
-  background: #fff;
-  opacity: 0.1;
   z-index: 100;
+
+  opacity: 0.1;
+  background: #FFF;
+
+  @include fill-parent;
 }
+
 .lds-ring {
-  display: inline-block;
   position: relative;
+
+  display: inline-block;
+
   width: 100px;
   height: 100px;
 }
+
 .lds-ring.lds-ring_little {
   width: 20px;
   height: 20px;
 }
+
 .lds-ring div {
-  box-sizing: border-box;
-  display: block;
   position: absolute;
+
+  display: block;
+
+  box-sizing: border-box;
   width: 84px;
   height: 84px;
   margin: 8px;
+
+  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+
   border: 8px solid #000;
+  border-color: #000 transparent transparent;
   border-radius: 50%;
-  animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
-  border-color: #000 transparent transparent transparent;
 }
+
 .lds-ring_little div {
   width: 20px;
   height: 20px;
 }
+
 .lds-ring div:nth-child(1) {
   animation-delay: -0.45s;
 }
+
 .lds-ring div:nth-child(2) {
   animation-delay: -0.3s;
 }
+
 .lds-ring div:nth-child(3) {
   animation-delay: -0.15s;
 }
+
 @keyframes lds-ring {
   0% {
     transform: rotate(0deg);
   }
+
   100% {
     transform: rotate(360deg);
   }

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

@@ -53,6 +53,7 @@ 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,
@@ -200,6 +201,7 @@ 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/Input/Input.scss

@@ -1,50 +1,58 @@
 .input {
   position: relative;
+
+  width: 100%;
+  padding: 0 10px;
+
   word-break: break-all;
+
   border: none;
   background: none;
-  padding: 0 10px;
-  width: 100%;
+
   &::-webkit-outer-spin-button,
   &::-webkit-inner-spin-button {
-      -webkit-appearance: none;
+    appearance: none;
   }
 
   &__wrap {
     display: flex;
     align-items: center;
-    border: 1px solid #e2e5ec;
+
     box-sizing: border-box;
-    background-color: #fff;
     height: 28px;
+
+    border: 1px solid #E2E5EC;
     border-radius: 4px;
+    background-color: #FFF;
 
     &_focus {
-      border-color: #6b81dd;
-      filter: drop-shadow(0px 0px 4px rgba(93, 120, 255, 0.5));
+      border-color: #6B81DD;
+      filter: drop-shadow(0 0 4px rgb(93 120 255 / 50%));
     }
 
     &--disabled {
-      background: #f7f8fa;
-      opacity: 0.5;
-      border-color: #a6acb1;
       pointer-events: none;
+
+      opacity: 0.5;
+      border-color: #A6ACB1;
+      background: #F7F8FA;
     }
 
     &_error {
-      border-color: #f06d8d !important;
+      border-color: #F06D8D !important;
     }
   }
 
   &_disabled {
-    background: #f7f8fa;
-    opacity: 0.5;
-    border-color: #a6acb1;
     pointer-events: none;
+
+    opacity: 0.5;
+    border-color: #A6ACB1;
+    background: #F7F8FA;
   }
 
   &_error {
-    border-color: #f06d8d;
+    border-color: #F06D8D;
   }
 
   svg {
@@ -52,49 +60,59 @@
   }
 
   &__input {
+    box-sizing: border-box;
     width: 100%;
     height: 100%;
-    box-sizing: border-box;
-    font-size: 13px;
-    font-weight: 400;
-    color: #1e1e2d;
-    border: none;
     padding: 0 5px;
+
+    color: #1E1E2D;
+    border: none;
     border-radius: 4px;
+
+    font-size: 13px;
+    font-weight: 400;
   }
 
   &__close {
     position: relative;
-    opacity: 0.6;
+
+    visibility: hidden;
+
     width: 14px;
     height: 14px;
-    background: none;
-    cursor: pointer;
     margin-right: 4px;
-    visibility: hidden;
+
+    cursor: pointer;
     pointer-events: none;
+
+    opacity: 0.6;
+    background: none;
+
     &:hover {
       opacity: 1;
     }
 
-    &:before,
-    &:after {
-      content: "";
+    &::before,
+    &::after {
       position: absolute;
       top: 0;
-      left: 0;
       right: 0;
-      margin: auto;
-      height: 14px;
+      left: 0;
+
       width: 2px;
-      background-color: #9aa0b9;
+      height: 14px;
+      margin: auto;
+
+      content: "";
+
+      background-color: #9AA0B9;
     }
 
-    &:before {
+    &::before {
       transform: rotate(45deg);
     }
 
-    &:after {
+    &::after {
       transform: rotate(-45deg);
     }
   }
@@ -102,23 +120,30 @@
   &__nums {
     display: flex;
     align-items: center;
+
     height: 100%;
   }
 
   &__num-btn {
-    cursor: pointer;
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 100%;
+
     width: 24px;
-    border-left: 1px solid #e2e5ec;
+    height: 100%;
+
+    cursor: pointer;
+    user-select: none;
+
+    border-left: 1px solid #E2E5EC;
     background: none;
+
     font-size: 20px;
-    user-select: none;
+
     &.disabled {
       opacity: 0.3;
     }
+
     svg {
       margin-right: 0;
     }
@@ -135,6 +160,6 @@
 
 .input__wrap:hover .input__close {
   visibility: visible;
+
   pointer-events: all;
 }
-

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.js

@@ -90,7 +90,7 @@ var InputCalendar = function InputCalendar(_ref) {
   };
 
   (0, _react.useEffect)(function () {
-    if (typeof isOpened === 'boolean' && !!!isOpened) {
+    if (typeof isOpened === 'boolean' && !isOpened) {
       handleBlur();
     }
   }, [isOpened]);

package/dist/Atomic/FormElements/InputCalendar/InputCalendar.scss

@@ -1,9 +1,11 @@
 .calendar-container {
-  min-width: 200px;
   position: relative;
 
+  min-width: 200px;
+
   &_disabled {
     pointer-events: none;
+
     opacity: 0.5;
   }
 
@@ -11,12 +13,15 @@
     position: absolute;
     z-index: 9;
     top: 100%;
+
     padding: 10px 16px;
+
     border: 1px solid var(--border-color);
 
     &_list-top {
-      bottom: calc(100% + 4px);
       top: auto;
+      bottom: calc(100% + 4px);
+
       box-shadow: 0 -3px 15px rgb(0 0 0 / 15%);
     }
   }

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

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+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 _Input = _interopRequireDefault(require("../Input/Input"));
+
+require("./InputColor.scss");
+
+var _excluded = ["className", "symbolsLimit", "isHexFormat", "initialHexColorBlock"];
+
+//todo подумать куда повесить класснейм
+var InputColor = function InputColor(_ref) {
+  var 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,
+      args = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  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
+    }
+  }), /*#__PURE__*/_react.default.createElement(_Input.default, (0, _extends2.default)({}, args, {
+    symbolsLimit: symbolsLimit || 7,
+    isHexFormat: isHexFormat,
+    className: (0, _classnames.default)(className, 'inputColor__input'),
+    type: "text"
+  })));
+};
+
+var _default = InputColor;
+exports.default = _default;

package/dist/Atomic/FormElements/InputColor/InputColor.scss

@@ -0,0 +1,18 @@
+.inputColor {
+  position: relative;
+  &__color-block {
+    position: absolute;
+    left: 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    min-width: 16px;
+    max-width: 16px;
+    min-height: 16px;
+    max-height: 16px;
+    z-index: 1;
+  }
+  .input {
+    padding-left: 25px;
+  }
+
+}