intelicoreact 0.2.12 → 0.2.15

package/dist/Atomic/FormElements/InputMask/InputMask.js

@@ -860,9 +860,6 @@ function InputMask() {
   };
 
   var onCharClick = function onCharClick(e, i) {
-    // ??????????????????? DON'T REMOVE !
-    // e.preventDefault();
-    // e.stopPropagation();
     var _getCharByIndex2 = getCharByIndex(i),
         char = _getCharByIndex2.char,
         maskChar = _getCharByIndex2.maskChar;
@@ -1111,7 +1108,7 @@ function InputMask() {
     setMaskRendered(false);
     if (!maskPattern) maskPattern = '';
     maskPattern.concat(' ').split('').map(function (char, id, i) {
-      return addInnerValueChar({
+      addInnerValueChar({
         char: char,
         i: i,
         data: {
@@ -1119,6 +1116,9 @@ function InputMask() {
           isReadOnly: id === maskPattern.length
         }
       });
+      if (value !== null && value !== void 0 && value[id]) updateInnerValueChar({
+        char: value[id]
+      }, id);
     });
     setMaskRendered(true);
   }, [maskPattern]);

package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.js

@@ -0,0 +1,110 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+require("./CircleProgressBar.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 CircleProgressBar = function CircleProgressBar(_ref) {
+  var amount = _ref.amount,
+      totalAmount = _ref.totalAmount,
+      isReverseType = _ref.isReverseType,
+      children = _ref.children,
+      className = _ref.className,
+      colors = _ref.colors,
+      isInnerLine = _ref.isInnerLine,
+      _ref$radius = _ref.radius,
+      radius = _ref$radius === void 0 ? 59 : _ref$radius,
+      _ref$strokeWidth = _ref.strokeWidth,
+      strokeWidth = _ref$strokeWidth === void 0 ? 2 : _ref$strokeWidth;
+  var circumference = Math.round(2 * Math.PI * radius);
+  var amountProgress = amount < totalAmount ? Math.round(amount / totalAmount * 100) : 100; //%
+
+  var defaultColors = {
+    start: '#6b81dd',
+    finish: '#f06d8d',
+    meter: '#ffcad6'
+  };
+
+  var _useState = (0, _react.useState)(isReverseType ? String(0) : circumference),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      strokeDashoffset = _useState2[0],
+      setStrokeDashoffset = _useState2[1];
+
+  (0, _react.useEffect)(function () {
+    setStrokeDashoffset("calc(".concat(circumference, " - (").concat(circumference, " * ").concat(amountProgress, ") / 100)"));
+  }, [amountProgress]);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _classnames.default)('limit-progress-bar', {
+      'limit-progress-bar--reverse': isReverseType
+    }, className)
+  }, /*#__PURE__*/_react.default.createElement("svg", {
+    className: "limit-progress-bar__progress",
+    width: "124",
+    height: "124",
+    viewBox: "0 0 124 124"
+  }, /*#__PURE__*/_react.default.createElement("defs", null, isReverseType ? /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: "limit-progress-bar-linear-gradient-reverse",
+    x1: "0",
+    y1: "1",
+    x2: "0",
+    y2: "0"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0",
+    stopColor: colors.finish || defaultColors.finish
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "1",
+    stopColor: colors.start || defaultColors.start
+  })) : /*#__PURE__*/_react.default.createElement("linearGradient", {
+    id: "limit-progress-bar-linear-gradient",
+    x1: "0",
+    y1: "1",
+    x2: "0",
+    y2: "0"
+  }, /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "0",
+    stopColor: colors.start || defaultColors.start
+  }), /*#__PURE__*/_react.default.createElement("stop", {
+    offset: "1",
+    stopColor: colors.finish || defaultColors.finish
+  }))), /*#__PURE__*/_react.default.createElement("circle", {
+    className: "limit-progress-bar__meter",
+    cx: radius,
+    cy: radius,
+    r: radius,
+    stroke: !isInnerLine ? '' : colors.meter || defaultColors.meter,
+    strokeWidth: "2"
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    className: "limit-progress-bar__value",
+    cx: radius,
+    cy: radius,
+    r: radius,
+    strokeWidth: String(strokeWidth),
+    stroke: "url(#limit-progress-bar-linear-gradient".concat(isReverseType ? '-reverse' : '', ")"),
+    style: {
+      strokeDasharray: circumference,
+      strokeDashoffset: strokeDashoffset
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "limit-progress-bar__content"
+  }, children));
+};
+
+var _default = CircleProgressBar;
+exports.default = _default;

package/dist/Atomic/UI/CircleProgressBar/CircleProgressBar.scss

@@ -0,0 +1,62 @@
+.limit-progress-bar {
+  position: relative;
+  display: flex;
+  flex-direction: column-reverse;
+  width: 124px;
+  min-height: 124px;
+  background-color: transparent;
+  border-radius: 50%;
+
+  // &__progress-wrapper {
+  //   width: 124px;
+  //   height: 124px;
+  //   border-radius: 50%;
+
+    // &::before {
+    //   content: "";
+    //   position: absolute;
+    //   z-index: 1;
+    //   top: 3px;
+    //   left: 57px;
+    //   width: 10px;
+    //   height: 10px;
+    //   background-color: #fff;
+    //   border: 2px solid #6b81dd;
+    //   border-radius: 50%;
+
+    //   .limit-progress-bar--reverse & {
+    //     border-color: #f06d8d;
+    //   }
+    // }
+  // }
+
+  &__progress {
+    border-radius: 50%;
+    transform: rotate(-90deg);
+
+    .limit-progress-bar--reverse & {
+      transform: rotate(-90deg) scaleY(-1);
+    }
+
+    & > circle {
+      fill: none;
+      transform: translate(3px, 3px);
+      transition: stroke-dashoffset 0.8s;
+
+      stroke-linecap: round;
+    }
+  }
+
+  &__content {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+  }
+}

package/dist/Atomic/UI/MonoAccordion/MonoAccordion.js

@@ -72,15 +72,19 @@ var MonoAccordion = function MonoAccordion(_ref) {
   (0, _react.useEffect)(function () {
     if (!isOpen) setHeight(0);else setHeight();
   }, [isOpen]);
-  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, datasetProp, {
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    "data-testid": 'test-monoAccordion'
+  }, datasetProp, {
     className: (0, _classnames.default)(RC, className, (_cn = {}, (0, _defineProperty2.default)(_cn, "".concat(RC, "_is-open"), isOpen), (0, _defineProperty2.default)(_cn, "".concat(RC, "_disabled"), disabled), _cn))
   }), /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": 'test-monoAccordion-head',
     className: "".concat(RC, "__head"),
     onClick: handleClick
   }, /*#__PURE__*/_react.default.createElement("div", {
     ref: titleRef,
     className: "".concat(RC, "__tile-container")
   }, titleJSX), /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": 'test-monoAccordion-icon',
     className: "".concat(RC, "__icon-container")
   }, icon)), /*#__PURE__*/_react.default.createElement("div", {
     ref: containerRef,

package/dist/Atomic/UI/NavLine/NavLine.js

@@ -228,16 +228,12 @@ var NavLine = function NavLine(_ref) {
     e.stopPropagation();
     var deltaY = e.deltaY;
     deltaY > 0 ? pushScrollTask('next') : pushScrollTask('prev');
-  };
-
-  (0, _react.useEffect)(function () {
-    var _wrapperRef$current;
+  }; // useEffect(() => {
+  //   if (!wrapperRef?.current) return false;
+  //   wrapperRef?.current?.addEventListener("mousewheel", onWheel, { passive: false });
+  // }, [wrapperRef]);
+  // Count Total NavLine Items Width
 
-    if (!(wrapperRef !== null && wrapperRef !== void 0 && wrapperRef.current)) return false;
-    wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.addEventListener("mousewheel", onWheel, {
-      passive: false
-    });
-  }, [wrapperRef]); // Count Total NavLine Items Width
 
   (0, _react.useEffect)(function () {
     var _navLineItems$0$ref$c, _navLineItems$, _navLineItems$$ref, _navLineItems$$ref$cu;
@@ -261,9 +257,9 @@ var NavLine = function NavLine(_ref) {
   }, [navLineItems === null || navLineItems === void 0 ? void 0 : navLineItems.length]); // Count Wrapper Width
 
   (0, _react.useEffect)(function () {
-    var _wrapperRef$current$g, _wrapperRef$current2, _wrapperRef$current2$;
+    var _wrapperRef$current$g, _wrapperRef$current, _wrapperRef$current$g2;
 
-    setWrapperRefWidth((_wrapperRef$current$g = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : (_wrapperRef$current2$ = _wrapperRef$current2.getBoundingClientRect()) === null || _wrapperRef$current2$ === void 0 ? void 0 : _wrapperRef$current2$.width) !== null && _wrapperRef$current$g !== void 0 ? _wrapperRef$current$g : 0);
+    setWrapperRefWidth((_wrapperRef$current$g = wrapperRef === null || wrapperRef === void 0 ? void 0 : (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : (_wrapperRef$current$g2 = _wrapperRef$current.getBoundingClientRect()) === null || _wrapperRef$current$g2 === void 0 ? void 0 : _wrapperRef$current$g2.width) !== null && _wrapperRef$current$g !== void 0 ? _wrapperRef$current$g : 0);
   }, [wrapperRef]); //Init NavLine Items
 
   (0, _react.useEffect)(function () {
@@ -274,6 +270,7 @@ var NavLine = function NavLine(_ref) {
     }));
   }, [items]);
   return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": 'test-navline',
     className: (0, _classnames.default)({
       'nav-line': !variant
     }, {
@@ -283,15 +280,17 @@ var NavLine = function NavLine(_ref) {
     }, className),
     ref: scrollMode ? wrapperRef : null
   }, scrollMode && totalScrolledItems > 0 && /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": 'test-navline-arrow-left',
     className: "nav-line--simple__arrow nav-line--simple__arrow--prev",
     onClick: scrollToPrevItem
   }, /*#__PURE__*/_react.default.createElement(Icons.ChevronLeft, null)), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(variant === 'simple' ? 'nav-line--simple__inner' : 'nav-line__inner'),
     ref: scrollMode ? wrapperInnerRef : null
-  }, navLineItems.map(function (item) {
+  }, navLineItems.map(function (item, index) {
     var ref = item.ref;
     var Icon = Icons[item === null || item === void 0 ? void 0 : item.icon];
     return isLocal ? /*#__PURE__*/_react.default.createElement("span", {
+      "data-testid": "test-navline-item-".concat(index),
       onClick: function onClick() {
         return onChange(item.tabId);
       },
@@ -317,6 +316,7 @@ var NavLine = function NavLine(_ref) {
     }, item.label), item.count !== undefined ? /*#__PURE__*/_react.default.createElement("span", {
       className: "nav-line--count ml5"
     }, "(", item.count || 0, ")") : null)) : /*#__PURE__*/_react.default.createElement(_reactRouterDom.NavLink, {
+      "data-testid": "test-navline-item-".concat(index),
       to: "".concat(root).concat(item.tabId, "/"),
       key: "tab__".concat(item.tabId),
       className: (0, _classnames.default)({

package/dist/Atomic/UI/PageTitle/PageTitle.js

@@ -28,10 +28,12 @@ var PageTitle = function PageTitle(_ref) {
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__wrap")
   }, /*#__PURE__*/_react.default.createElement("span", {
+    "data-testid": "test-pageTitle-title",
     className: "".concat(RC, "__title")
   }, title), pages.length && /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(RC, "__pages")
   }, /*#__PURE__*/_react.default.createElement("a", {
+    "data-testid": "test-pageTitle-icon",
     className: "".concat(RC, "__link"),
     href: "/"
   }, /*#__PURE__*/_react.default.createElement(_reactFeather.Home, null)), pages.map(function (_ref2, index) {
@@ -42,12 +44,14 @@ var PageTitle = function PageTitle(_ref) {
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(RC, "__delimiter")
     }, "/"), /*#__PURE__*/_react.default.createElement("span", {
+      "data-testid": "test-pageTitle-name",
       className: (0, _classnames.default)("".concat(RC, "__link"), "".concat(RC, "__link_last"))
     }, name)) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
       key: index
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(RC, "__delimiter")
     }, "/"), /*#__PURE__*/_react.default.createElement("a", {
+      "data-testid": "test-pageTitle-link-".concat(index),
       className: "".concat(RC, "__link"),
       href: path
     }, name));

package/dist/Atomic/UI/Price/Price.js

@@ -25,6 +25,7 @@ var Price = function Price(_ref) {
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": 'test-price',
     className: "price ".concat(className)
   }, !unitAfter && unit, formatted, unitAfter && unit);
 };

package/dist/Atomic/UI/PriceRange/PriceRange.js

@@ -16,6 +16,7 @@ var PriceRange = function PriceRange(_ref) {
       to = _ref.to,
       mode = _ref.mode;
   return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": 'test-priceRange',
     className: "j4"
   }, mode === 'simple' ? /*#__PURE__*/_react.default.createElement("span", null, from, " - ", to) : /*#__PURE__*/_react.default.createElement("span", null, (0, _fieldValueFormatters.formatToPriceInputAndDollarSymbol)(from.toString()), " - ", (0, _fieldValueFormatters.formatToPriceInputAndDollarSymbol)(to.toString())));
 };

package/dist/Atomic/UI/ProgressLine/ProgressLine.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+require("./ProgressLine.scss");
+
+var ProgressLine = function ProgressLine(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      _ref$labelAlign = _ref.labelAlign,
+      labelAlign = _ref$labelAlign === void 0 ? 'left' : _ref$labelAlign,
+      _ref$renderValue = _ref.renderValue,
+      renderValue = _ref$renderValue === void 0 ? false : _ref$renderValue,
+      _ref$renderValueInPer = _ref.renderValueInPercents,
+      renderValueInPercents = _ref$renderValueInPer === void 0 ? false : _ref$renderValueInPer,
+      _ref$valueMeasurement = _ref.valueMeasurement,
+      valueMeasurement = _ref$valueMeasurement === void 0 ? '' : _ref$valueMeasurement,
+      _ref$valueHorizontalP = _ref.valueHorizontalPosition,
+      valueHorizontalPosition = _ref$valueHorizontalP === void 0 ? 'right' : _ref$valueHorizontalP,
+      _ref$valueVerticalPos = _ref.valueVerticalPosition,
+      valueVerticalPosition = _ref$valueVerticalPos === void 0 ? 'center' : _ref$valueVerticalPos,
+      _ref$symbolsAfterComm = _ref.symbolsAfterComma,
+      symbolsAfterComma = _ref$symbolsAfterComm === void 0 ? 0 : _ref$symbolsAfterComm,
+      _ref$minValue = _ref.minValue,
+      minValue = _ref$minValue === void 0 ? 0 : _ref$minValue,
+      _ref$maxValue = _ref.maxValue,
+      maxValue = _ref$maxValue === void 0 ? 100 : _ref$maxValue,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? 0 : _ref$value,
+      _ref$showExtremums = _ref.showExtremums,
+      showExtremums = _ref$showExtremums === void 0 ? false : _ref$showExtremums,
+      _ref$extremumsPositio = _ref.extremumsPosition,
+      extremumsPosition = _ref$extremumsPositio === void 0 ? 'top' : _ref$extremumsPositio,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'info' : _ref$variant,
+      _ref$useVariantLabelC = _ref.useVariantLabelColor,
+      useVariantLabelColor = _ref$useVariantLabelC === void 0 ? false : _ref$useVariantLabelC,
+      _ref$className = _ref.className,
+      className = _ref$className === void 0 ? '' : _ref$className;
+
+  var getFilledLineWidth = function getFilledLineWidth() {
+    if (value > maxValue) value = maxValue;
+    return "".concat(((value - minValue) * 100 / (maxValue - minValue)).toFixed(symbolsAfterComma), "%");
+  };
+
+  var renderLabel = function renderLabel() {
+    if (!label) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "progress-line__wrapper__label align-".concat(labelAlign)
+    }, label);
+  };
+
+  var renderProgressValue = function renderProgressValue() {
+    if (!renderValue) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "progress-line__wrapper__value"
+    }, renderValueInPercents ? getFilledLineWidth() : "".concat(value, " ").concat(valueMeasurement));
+  };
+
+  var renderExtremums = function renderExtremums() {
+    if (!showExtremums) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "progress-line__wrapper__extremums position-".concat(extremumsPosition)
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "progress-line__wrapper__extremums--min"
+    }, renderValueInPercents ? '0 %' : "".concat(minValue, " ").concat(valueMeasurement)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "progress-line__wrapper__extremums--max"
+    }, renderValueInPercents ? '100 %' : "".concat(maxValue, " ").concat(valueMeasurement)));
+  };
+
+  var renderFilledLine = function renderFilledLine() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "progress-line__wrapper__line--filled",
+      style: {
+        width: getFilledLineWidth()
+      }
+    });
+  };
+
+  var renderLine = function renderLine() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "progress-line__wrapper__line"
+    }, renderExtremums(), renderFilledLine());
+  };
+
+  var render = function render() {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "progress-line"
+    }, renderLabel(), /*#__PURE__*/_react.default.createElement("div", {
+      className: "progress-line__wrapper variant-".concat(variant, " value-").concat(valueVerticalPosition, "-").concat(valueHorizontalPosition, " ").concat(className)
+    }, renderProgressValue(), renderLine()));
+  };
+
+  return render();
+};
+
+var _default = ProgressLine;
+exports.default = _default;

package/dist/Atomic/UI/ProgressLine/ProgressLine.scss

@@ -0,0 +1,221 @@
+.progress-line {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  position: relative;
+
+  // Wrapper
+  &__wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    position: relative;
+    justify-content: space-between;
+
+    &__label {
+      font-family: 'Sarabun';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.2px;
+      color: #171D33;
+      margin-bottom: 8px;
+
+      &.align-left {
+        text-align: left;
+      }
+
+      &.align-center {
+        text-align: center;
+      }
+
+      &.align-right {
+        text-align: right;
+      }
+    }
+    &__value {
+      font-family: 'Sarabun';
+      font-style: normal;
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 0.2px;
+      color: #171D33;
+      display: flex;
+      flex-wrap: nowrap;
+      white-space: nowrap;
+    }
+    // Progress Line Value Position
+    //--Top
+    &[class*="value-top-"] {
+      flex-flow: column;
+
+      [class*="__value"]{
+        margin-bottom: 8px;
+      }
+    }
+    &.value-top-center {
+      align-items: center;
+    }
+    &.value-top-left {
+      align-items: flex-start;
+      text-align: left;
+    }
+    &.value-top-right {
+      align-items: flex-end;
+      text-align: right;
+      padding-right: 8px;
+    }
+    //--Middle
+    &[class*="value-center-"] {
+      align-items: center;
+    }
+    &.value-center-left {
+      flex-flow: row;
+
+      [class*="__value"]{
+        margin-right: 8px;
+        text-align: center;
+      }
+    }
+    &.value-center-right {
+      flex-flow: row-reverse;
+
+      [class*="__value"]{
+        margin-left: 8px;
+        text-align: center;
+      }
+    }
+    //--Bottom
+    &[class*="value-bottom-"] {
+      flex-flow: column-reverse;
+
+      [class*="__value"]{
+        margin-top: 8px;
+      }
+    }
+    &.value-bottom-center {
+      align-items: center;
+    }
+    &.value-bottom-left {
+      align-items: flex-start;
+    }
+    &.value-bottom-right {
+      align-items: flex-end;
+    }
+
+    &__line {
+      width: 100%;
+      height: 4px;
+      border-radius: 8px;
+      position: relative;
+      background: #E6F0F7;
+
+      &--filled {
+        height: 100%;
+        width: 0;
+        border-radius: 8px;
+      }
+    }
+
+    // Progress Line Colors
+    &.variant-info {
+      [class$="__line--filled"] {
+        background: #46AAF2;
+      }
+
+      .variant-label-color {
+        color: #46AAF2;
+      }
+    }
+    &.variant-success {
+      [class$="__line--filled"] {
+        background: #54D3AD;
+      }
+
+      .variant-label-color {
+        color: #54D3AD;
+      }
+    }
+    &.variant-error {
+      [class$="__line--filled"] {
+        background: #FA2E69;
+      }
+
+      .variant-label-color {
+        color: #FA2E69;
+      }
+    }
+    &.variant-grey {
+      [class$="__line--filled"] {
+        background: #A6AAB4;
+      }
+
+      .variant-label-color {
+        color: #A6AAB4;
+      }
+    }
+    &.variant-warning {
+      [class$="__line--filled"] {
+        background: #FFDB7C;
+      }
+
+      .variant-label-color {
+        color: #FFDB7C;
+      }
+    }
+
+    // Extremums
+  &__extremums {
+    font-family: 'Sarabun';
+    font-style: normal;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+    color: #171D33;
+    line-height: 1;
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    position: absolute;
+    box-sizing: border-box;
+
+    &--min {
+      left: 0;
+      top: 0;
+    }
+
+    &--max {
+      right: 0;
+    }
+  }
+  &__extremums.position-top {
+    transform: translateY(calc(-100% - 8px));
+  }
+  &__extremums.position-bottom {
+    transform: translateY(8px);
+  }
+  &__extremums.position-top &__extremums--min,
+  &__extremums.position-bottom &__extremums--min {
+    transform: translateX(-50%);
+  }
+  &__extremums.position-top &__extremums--max,
+  &__extremums.position-bottom &__extremums--max {
+    transform: translateX(50%);
+  }
+  &__extremums.position-center {
+    top: 50%;
+    transform: translateY(-50%);
+  }
+  &__extremums.position-center &__extremums--min {
+    transform: translateX(calc(-100% - 8px));
+  }
+  &__extremums.position-center &__extremums--max {
+    transform: translateX(calc(100% + 8px));
+  }
+  }
+}

package/dist/Atomic/UI/Status/Status.js

@@ -29,6 +29,7 @@ var Status = function Status(_ref) {
   var text = children && typeof children === 'string' ? children : value || label || status;
   var formatedLabel = (text === null || text === void 0 ? void 0 : text[0].toUpperCase()) + (text === null || text === void 0 ? void 0 : text.slice(1));
   return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": 'test-status',
     className: (0, _classnames.default)({
       disabled: disabled
     }, className)

package/dist/Atomic/UI/Table/Partials/TdHeader.js

@@ -16,12 +16,16 @@ require("../Table.scss");
 var _Langs = _interopRequireDefault(require("../../../../../../Langs"));
 
 var TdHeader = function TdHeader(_ref) {
-  var item = _ref.item;
+  var item = _ref.item,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'test-table-header' : _ref$testId;
   var txt = _Langs.default[global.lng];
 
   switch (item.type) {
     case 'double':
-      return /*#__PURE__*/_react.default.createElement("th", null, /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement("th", {
+        "data-testid": testId
+      }, /*#__PURE__*/_react.default.createElement("div", {
         className: "j46"
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: ""
@@ -31,6 +35,7 @@ var TdHeader = function TdHeader(_ref) {
 
     default:
       return /*#__PURE__*/_react.default.createElement("th", {
+        "data-testid": testId,
         className: (0, _classnames.default)(item.className)
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)({

package/dist/Atomic/UI/Table/Partials/TdRow.js

@@ -48,7 +48,9 @@ var TdRow = function TdRow(_ref) {
       changePriority = _ref.changePriority,
       getAdviceWeight = _ref.getAdviceWeight,
       onActionClick = _ref.onActionClick,
-      isDeleted = _ref.isDeleted;
+      isDeleted = _ref.isDeleted,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'test-table-row' : _ref$testId;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -71,6 +73,7 @@ var TdRow = function TdRow(_ref) {
         value = _ref3[1];
 
     return key === 'id' || key === 'isDeleted' ? null : /*#__PURE__*/_react.default.createElement("td", {
+      "data-testid": testId,
       key: key,
       className: (0, _classnames.default)('cards-table__body-item', {
         'cards-table__accordion': value.type === 'accordion'

package/dist/Atomic/UI/Table/Table.js

@@ -28,7 +28,9 @@ var Table = function Table(_ref) {
       onChange = _ref.onChange,
       className = _ref.className,
       header = _ref.header,
-      onActionClick = _ref.onActionClick;
+      onActionClick = _ref.onActionClick,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'test-table' : _ref$testId;
 
   var handleArrayChange = function handleArrayChange(value, index) {
     rows[index] = value;
@@ -39,6 +41,7 @@ var Table = function Table(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
     className: (0, _classnames.default)('simple-table', (0, _defineProperty2.default)({}, "simple-table--".concat(className), className))
   }, /*#__PURE__*/_react.default.createElement("table", null, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, header === null || header === void 0 ? void 0 : header.map(function (item) {
     return /*#__PURE__*/_react.default.createElement(_TdHeader.default, {

package/dist/Atomic/UI/Tag/Tag.js

@@ -26,8 +26,13 @@ var Tag = function Tag(_ref) {
       removeItem = _ref.removeItem,
       name = _ref.name,
       _ref$onClick = _ref.onClick,
-      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick;
+      onClick = _ref$onClick === void 0 ? function () {} : _ref$onClick,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'test-tag' : _ref$testId,
+      _ref$testIdRemove = _ref.testIdRemove,
+      testIdRemove = _ref$testIdRemove === void 0 ? 'test-tag-remove' : _ref$testIdRemove;
   return /*#__PURE__*/_react.default.createElement("div", {
+    "data-testid": testId,
     className: (0, _classnames.default)('tag', className, {
       'tag-warn': warning
     }),
@@ -37,6 +42,7 @@ var Tag = function Tag(_ref) {
   }), /*#__PURE__*/_react.default.createElement("span", {
     className: "tag__label"
   }, label || name), removeItem && /*#__PURE__*/_react.default.createElement("button", {
+    "data-testid": testIdRemove,
     onClick: function onClick() {
       return removeItem();
     },

package/dist/Atomic/UI/TagList/TagList.js

@@ -48,7 +48,9 @@ var TagList = function TagList(_ref) {
       _ref$withToggle = _ref.withToggle,
       withToggle = _ref$withToggle === void 0 ? true : _ref$withToggle,
       _ref$shownItemsCount = _ref.shownItemsCount,
-      shownItemsCount = _ref$shownItemsCount === void 0 ? 'auto' : _ref$shownItemsCount;
+      shownItemsCount = _ref$shownItemsCount === void 0 ? 'auto' : _ref$shownItemsCount,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === void 0 ? 'test-taglist' : _ref$testId;
   var wrapperRef = (0, _react.useRef)(null);
 
   var _useState = (0, _react.useState)(-1),
@@ -143,12 +145,15 @@ var TagList = function TagList(_ref) {
   }); // Set TagList Items
 
   (0, _react.useEffect)(function () {
+    setStaticTagsCount(-1);
+    setRenderItemsCount(-1);
+    setRenderAll(false);
     setTagList(items.map(function (item) {
       return _objectSpread(_objectSpread({}, item), {}, {
         itemRef: /*#__PURE__*/(0, _react.createRef)()
       });
     }));
-  }, [items]); // Count Row Tags
+  }, [items.length]); // Count Row Tags
 
   (0, _react.useEffect)(function () {
     if (!withToggle) return false;
@@ -179,7 +184,9 @@ var TagList = function TagList(_ref) {
         className: "tag-list_wrapper_item ".concat(item.isHidden ? 'tag-list_wrapper_item--hidden' : ''),
         key: "tag-list-item-".concat(i),
         ref: (0, _utils.checkedRef)(item === null || item === void 0 ? void 0 : item.itemRef)
-      }, /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({}, item, {
+      }, /*#__PURE__*/_react.default.createElement(_Tag.default, (0, _extends2.default)({
+        testId: "test-taglist-item-".concat(i)
+      }, item, {
         removeItem: removeItem
       })));
     });

package/dist/Atomic/UI/TagList/TagList.scss

@@ -5,6 +5,7 @@
   min-width: 100%;
 
   &--only-static-items{
+    display: flex;
     .tag-list_wrapper_item{
       margin-bottom: 0!important;
     }

package/dist/Atomic/UI/UserBox/UserBox.js

@@ -32,11 +32,13 @@ var UserBox = function UserBox(_ref) {
   var renderUser = function renderUser() {
     if (isModal) {
       return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+        "data-testid": "test-userBox",
         style: {
           backgroundColor: (0, _utils.getColorById)(id, colors)
         },
         className: "td-user-box__avatar"
       }, getNameFirstLetter), /*#__PURE__*/_react.default.createElement(_Button.default, {
+        testId: "test-userBox-onclick",
         className: "p0 no-shadow",
         onClick: onClick,
         label: name,

package/dist/Functions/utils.js

@@ -151,7 +151,7 @@ var changeMeta = function changeMeta(key) {
       return i.key === key;
     });
     document.title = (_item$title = item === null || item === void 0 ? void 0 : item.title) !== null && _item$title !== void 0 ? _item$title : defaultMeta === null || defaultMeta === void 0 ? void 0 : defaultMeta.title;
-    document.description = (_item$description = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description !== void 0 ? _item$description : defaultMeta === null || defaultMeta === void 0 ? void 0 : defaultMeta.description;
+    document.querySelector('meta[name="description"]').setAttribute("content", (_item$description = item === null || item === void 0 ? void 0 : item.description) !== null && _item$description !== void 0 ? _item$description : defaultMeta === null || defaultMeta === void 0 ? void 0 : defaultMeta.description);
   }
 };
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "intelicoreact",
-  "version": "0.2.12",
+  "version": "0.2.15",
   "description": "",
   "main": "dist/index.js",
   "files": [