@desynova-digital/components 9.0.27 → 9.1.0

package/molecules/filter/filter.js

@@ -1,68 +1,37 @@
-'use strict';
+"use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-var _templateObject = _taggedTemplateLiteral(['\n  position: relative;\n  // width: 21px;\n  // height: 62px;\n  overflow: hidden;\n  transition: width 0.6s ease;\n  //z-index: 2;\n  //width: 360px;\n  overflow: visible;\n  text-align: left;\n  z-index: ', ';\n\n  .filter-button {\n    width: 30px;\n    height: 30px;\n    background: #121d28;\n    border-radius: 50%;\n    padding: 7px 7px;\n    cursor: pointer;\n\n    &.active,\n    &:hover {\n      path {\n        transition: all 0.4s ease-out;\n      }\n    }\n\n    &.active {\n      path {\n        fill: ', ';\n      }\n    }\n\n    &:hover {\n      path {\n        fill: #fff;\n      }\n    }\n  }\n\n  .dashboard-filter-box {\n    border-bottom: 1px #303f51 solid;\n    padding: 4px 0px 0px 0;\n    position: absolute;\n  }\n\n  .search-filter-list-box {\n    display: flex;\n    position: relative;\n    /* padding: 10px 0px; */\n    align-items: center;\n    font-family: \'SFUIText-Medium\';\n    justify-content: flex-end;\n    width: ', ';\n  }\n\n  .filter-message {\n    font-size: 12px;\n    font-family: \'SFUIText-Regular\';\n    color: #afb2ba;\n  }\n  span.chip-button {\n    color: #fff;\n    background: #303f51;\n    color: #fff;\n    margin: 5px;\n    &:hover {\n      color: ', ';\n    }\n    &.checked {\n      background: ', ';\n      color: #0c141d;\n      &:hover {\n        color: #0c141d;\n      }\n    }\n  }\n\n  .filter-list-box {\n    & > span {\n      color: rgb(99, 208, 199);\n      font-size: 10px;\n      margin-bottom: 0px;\n      display: inline-block;\n    }\n\n    .list-holder {\n      overflow: auto;\n      a {\n        top: 7px;\n      }\n      /* width */\n      &::-webkit-scrollbar {\n        width: 2px;\n        height: 2px;\n      }\n\n      /* Track */\n      &::-webkit-scrollbar-track {\n        box-shadow: inset 0 0 5px #a6aab2;\n        border-radius: 10px;\n      }\n\n      /* Handle */\n      &::-webkit-scrollbar-thumb {\n        background: ', ';\n        border-radius: 10px;\n      }\n\n      /* Handle on hover */\n      &::-webkit-scrollbar-thumb:hover {\n        background: ', ';\n      }\n\n      & > div {\n        // width: max-content;\n        & > span {\n          // margin-right: 5px;\n          // background: ', ';\n          // &:hover {\n          //   color: #fff;\n          // }\n        }\n      }\n    }\n  }\n\n  .filter-options-holder {\n    margin-top: 5px;\n    position: absolute;\n    background: #182738;\n    z-index: 2;\n    font-family: \'SFUIText-Medium\';\n    padding: 15px;\n    right: 0;\n\n    .filter-group-title {\n      color: #afb2ba;\n      font-size: 10px;\n      padding-bottom: 10px;\n      color: #ffffff;\n      text-transform: uppercase;\n    }\n\n    .filter-group-item-list {\n      margin: 0px -5px 0px;\n      .ardp-date-picker {\n        display: inline-block;\n        .label-text {\n          color: #cccccc;\n          font-size: 12px;\n          transition: all 0.5s ease-in-out;\n          cursor: pointer;\n          &:hover {\n            color: #fff;\n          }\n        }\n\n        &.checked {\n          .label-text {\n            color: ', ';\n          }\n        }\n\n        .calendar {\n          right: -7px;\n          width: 330px;\n          padding: 15px;\n        }\n      }\n    }\n\n    .filter-group {\n      padding: 15px 0px 10px;\n      border-bottom: 1px solid #303f51;\n      &:first-child {\n        padding: 0px 0px 10px;\n      }\n    }\n\n    button.filter-group-item {\n      background-color: transparent;\n      border: none;\n      margin-right: 12px;\n      cursor: pointer;\n      transition: all 0.5s ease-in-out;\n      color: #cccccc;\n      font-size: 12px;\n      padding: 3px 0px;\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        color: #fff;\n      }\n\n      &.checked {\n        color: ', ';\n      }\n    }\n\n    .action-btn {\n      margin: 0px;\n      pointer-events: auto;\n      border-radius: 999rem;\n      box-shadow: none;\n      padding: 0.5rem 0.7rem;\n    }\n  }\n'], ['\n  position: relative;\n  // width: 21px;\n  // height: 62px;\n  overflow: hidden;\n  transition: width 0.6s ease;\n  //z-index: 2;\n  //width: 360px;\n  overflow: visible;\n  text-align: left;\n  z-index: ', ';\n\n  .filter-button {\n    width: 30px;\n    height: 30px;\n    background: #121d28;\n    border-radius: 50%;\n    padding: 7px 7px;\n    cursor: pointer;\n\n    &.active,\n    &:hover {\n      path {\n        transition: all 0.4s ease-out;\n      }\n    }\n\n    &.active {\n      path {\n        fill: ', ';\n      }\n    }\n\n    &:hover {\n      path {\n        fill: #fff;\n      }\n    }\n  }\n\n  .dashboard-filter-box {\n    border-bottom: 1px #303f51 solid;\n    padding: 4px 0px 0px 0;\n    position: absolute;\n  }\n\n  .search-filter-list-box {\n    display: flex;\n    position: relative;\n    /* padding: 10px 0px; */\n    align-items: center;\n    font-family: \'SFUIText-Medium\';\n    justify-content: flex-end;\n    width: ', ';\n  }\n\n  .filter-message {\n    font-size: 12px;\n    font-family: \'SFUIText-Regular\';\n    color: #afb2ba;\n  }\n  span.chip-button {\n    color: #fff;\n    background: #303f51;\n    color: #fff;\n    margin: 5px;\n    &:hover {\n      color: ', ';\n    }\n    &.checked {\n      background: ', ';\n      color: #0c141d;\n      &:hover {\n        color: #0c141d;\n      }\n    }\n  }\n\n  .filter-list-box {\n    & > span {\n      color: rgb(99, 208, 199);\n      font-size: 10px;\n      margin-bottom: 0px;\n      display: inline-block;\n    }\n\n    .list-holder {\n      overflow: auto;\n      a {\n        top: 7px;\n      }\n      /* width */\n      &::-webkit-scrollbar {\n        width: 2px;\n        height: 2px;\n      }\n\n      /* Track */\n      &::-webkit-scrollbar-track {\n        box-shadow: inset 0 0 5px #a6aab2;\n        border-radius: 10px;\n      }\n\n      /* Handle */\n      &::-webkit-scrollbar-thumb {\n        background: ', ';\n        border-radius: 10px;\n      }\n\n      /* Handle on hover */\n      &::-webkit-scrollbar-thumb:hover {\n        background: ', ';\n      }\n\n      & > div {\n        // width: max-content;\n        & > span {\n          // margin-right: 5px;\n          // background: ', ';\n          // &:hover {\n          //   color: #fff;\n          // }\n        }\n      }\n    }\n  }\n\n  .filter-options-holder {\n    margin-top: 5px;\n    position: absolute;\n    background: #182738;\n    z-index: 2;\n    font-family: \'SFUIText-Medium\';\n    padding: 15px;\n    right: 0;\n\n    .filter-group-title {\n      color: #afb2ba;\n      font-size: 10px;\n      padding-bottom: 10px;\n      color: #ffffff;\n      text-transform: uppercase;\n    }\n\n    .filter-group-item-list {\n      margin: 0px -5px 0px;\n      .ardp-date-picker {\n        display: inline-block;\n        .label-text {\n          color: #cccccc;\n          font-size: 12px;\n          transition: all 0.5s ease-in-out;\n          cursor: pointer;\n          &:hover {\n            color: #fff;\n          }\n        }\n\n        &.checked {\n          .label-text {\n            color: ', ';\n          }\n        }\n\n        .calendar {\n          right: -7px;\n          width: 330px;\n          padding: 15px;\n        }\n      }\n    }\n\n    .filter-group {\n      padding: 15px 0px 10px;\n      border-bottom: 1px solid #303f51;\n      &:first-child {\n        padding: 0px 0px 10px;\n      }\n    }\n\n    button.filter-group-item {\n      background-color: transparent;\n      border: none;\n      margin-right: 12px;\n      cursor: pointer;\n      transition: all 0.5s ease-in-out;\n      color: #cccccc;\n      font-size: 12px;\n      padding: 3px 0px;\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        color: #fff;\n      }\n\n      &.checked {\n        color: ', ';\n      }\n    }\n\n    .action-btn {\n      margin: 0px;\n      pointer-events: auto;\n      border-radius: 999rem;\n      box-shadow: none;\n      padding: 0.5rem 0.7rem;\n    }\n  }\n']),
-    _templateObject2 = _taggedTemplateLiteral(['\n  border: none;\n  cursor: pointer;\n  transition: all 0.5s ease-in-out;\n  font-size: 12px;\n  margin-left: 10px;\n  padding: 10px 30px;\n  background: ', ';\n  border-radius: 999rem;\n  color: #0c141d;\n  &:hover {\n    color: #ffffff;\n  }\n'], ['\n  border: none;\n  cursor: pointer;\n  transition: all 0.5s ease-in-out;\n  font-size: 12px;\n  margin-left: 10px;\n  padding: 10px 30px;\n  background: ', ';\n  border-radius: 999rem;\n  color: #0c141d;\n  &:hover {\n    color: #ffffff;\n  }\n']),
-    _templateObject3 = _taggedTemplateLiteral(['\n  background-color: transparent;\n  border: none;\n  margin-right: 10px;\n  cursor: pointer;\n  transition: all 0.5s ease-in-out;\n  font-size: 12px;\n  margin: 0;\n  padding: 10px 30px;\n  background: #303f51;\n  border-radius: 999rem;\n  color: #ffffff;\n  &:focus {\n    outline: none;\n    background: #303f51;\n    color: ', ';\n  }\n\n  &:hover {\n    color: ', ';\n    background: #303f51;\n  }\n'], ['\n  background-color: transparent;\n  border: none;\n  margin-right: 10px;\n  cursor: pointer;\n  transition: all 0.5s ease-in-out;\n  font-size: 12px;\n  margin: 0;\n  padding: 10px 30px;\n  background: #303f51;\n  border-radius: 999rem;\n  color: #ffffff;\n  &:focus {\n    outline: none;\n    background: #303f51;\n    color: ', ';\n  }\n\n  &:hover {\n    color: ', ';\n    background: #303f51;\n  }\n']),
-    _templateObject4 = _taggedTemplateLiteral(['\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.3);\n  z-index: ', ';\n  display: block;\n'], ['\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.3);\n  z-index: ', ';\n  display: block;\n']),
-    _templateObject5 = _taggedTemplateLiteral(['\n  border-bottom: 1px solid #999999;\n\n  .tags {\n    padding-bottom: 2px;\n  }\n  input:focus {\n    outline: none;\n  }\n\n  .input-filter {\n    background: transparent;\n    font-family: \'SFUIText-Medium\';\n    position: relative;\n    width: 100%;\n    display: block;\n    border: none;\n    color: #999999;\n  }\n  .user-dropdown {\n    background-color: rgb(18, 29, 41);\n    margin-top: 5px;\n    border: 1px solid rgb(153, 153, 153);\n    max-height: 200px;\n    overflow: auto;\n    position: absolute;\n    width: 92%;\n    z-index: 2;\n    cursor: pointer;\n  }\n\n  .dropdown-options {\n    font-family: SFUIText-Regular;\n    font-size: 13px;\n    line-height: normal;\n    color: rgb(204, 204, 204);\n    padding: 7px;\n    :hover {\n      background-color: ', ';\n      color: rgb(255, 255, 255);\n    }\n    &.active {\n      background-color: ', ';\n      color: rgb(255, 255, 255);\n      :hover {\n        background-color: rgb(18, 29, 41);\n        color: rgb(204, 204, 204);\n      }\n    }\n  }\n'], ['\n  border-bottom: 1px solid #999999;\n\n  .tags {\n    padding-bottom: 2px;\n  }\n  input:focus {\n    outline: none;\n  }\n\n  .input-filter {\n    background: transparent;\n    font-family: \'SFUIText-Medium\';\n    position: relative;\n    width: 100%;\n    display: block;\n    border: none;\n    color: #999999;\n  }\n  .user-dropdown {\n    background-color: rgb(18, 29, 41);\n    margin-top: 5px;\n    border: 1px solid rgb(153, 153, 153);\n    max-height: 200px;\n    overflow: auto;\n    position: absolute;\n    width: 92%;\n    z-index: 2;\n    cursor: pointer;\n  }\n\n  .dropdown-options {\n    font-family: SFUIText-Regular;\n    font-size: 13px;\n    line-height: normal;\n    color: rgb(204, 204, 204);\n    padding: 7px;\n    :hover {\n      background-color: ', ';\n      color: rgb(255, 255, 255);\n    }\n    &.active {\n      background-color: ', ';\n      color: rgb(255, 255, 255);\n      :hover {\n        background-color: rgb(18, 29, 41);\n        color: rgb(204, 204, 204);\n      }\n    }\n  }\n']);
-
-var _react = require('react');
-
-var _react2 = _interopRequireDefault(_react);
-
-var _styledComponents = require('styled-components');
-
-var _styledComponents2 = _interopRequireDefault(_styledComponents);
-
-var _propTypes = require('prop-types');
-
-var _propTypes2 = _interopRequireDefault(_propTypes);
-
-var _lodash = require('lodash');
-
-var _tokens = require('@desynova-digital/tokens');
-
-var _button = require('../../atoms/button');
-
-var _button2 = _interopRequireDefault(_button);
-
-var _datePicker = require('../../atoms/datePicker');
-
-var _datePicker2 = _interopRequireDefault(_datePicker);
-
-var _tag = require('../../atoms/tag');
-
-var _tag2 = _interopRequireDefault(_tag);
-
-var _icon = require('../../atoms/icon');
-
-var _icon2 = _interopRequireDefault(_icon);
-
-var _constants = require('./constants');
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
-
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledFilterCompoment = _styledComponents2.default.div(_templateObject, function (_ref) {
+exports["default"] = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _lodash = require("lodash");
+var _tokens = require("@desynova-digital/tokens");
+var _button = _interopRequireDefault(require("../../atoms/button"));
+var _datePicker = _interopRequireDefault(require("../../atoms/datePicker"));
+var _tag = _interopRequireDefault(require("../../atoms/tag"));
+var _icon = _interopRequireDefault(require("../../atoms/icon"));
+var _constants = require("./constants");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+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) { (0, _defineProperty2["default"])(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 _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+var StyledFilterCompoment = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  position: relative;\n  // width: 21px;\n  // height: 62px;\n  overflow: hidden;\n  transition: width 0.6s ease;\n  //z-index: 2;\n  //width: 360px;\n  overflow: visible;\n  text-align: left;\n  z-index: ", ";\n\n  .filter-button {\n    width: 30px;\n    height: 30px;\n    background: #121d28;\n    border-radius: 50%;\n    padding: 7px 7px;\n    cursor: pointer;\n\n    &.active,\n    &:hover {\n      path {\n        transition: all 0.4s ease-out;\n      }\n    }\n\n    &.active {\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:hover {\n      path {\n        fill: #fff;\n      }\n    }\n  }\n\n  .dashboard-filter-box {\n    border-bottom: 1px #303f51 solid;\n    padding: 4px 0px 0px 0;\n    position: absolute;\n  }\n\n  .search-filter-list-box {\n    display: flex;\n    position: relative;\n    /* padding: 10px 0px; */\n    align-items: center;\n    font-family: 'SFUIText-Medium';\n    justify-content: flex-end;\n    width: ", ";\n  }\n\n  .filter-message {\n    font-size: 12px;\n    font-family: 'SFUIText-Regular';\n    color: #afb2ba;\n  }\n  span.chip-button {\n    color: #fff;\n    background: #303f51;\n    color: #fff;\n    margin: 5px;\n    &:hover {\n      color: ", ";\n    }\n    &.checked {\n      background: ", ";\n      color: #0c141d;\n      &:hover {\n        color: #0c141d;\n      }\n    }\n  }\n\n  .filter-list-box {\n    & > span {\n      color: rgb(99, 208, 199);\n      font-size: 10px;\n      margin-bottom: 0px;\n      display: inline-block;\n    }\n\n    .list-holder {\n      overflow: auto;\n      a {\n        top: 7px;\n      }\n      /* width */\n      &::-webkit-scrollbar {\n        width: 2px;\n        height: 2px;\n      }\n\n      /* Track */\n      &::-webkit-scrollbar-track {\n        box-shadow: inset 0 0 5px #a6aab2;\n        border-radius: 10px;\n      }\n\n      /* Handle */\n      &::-webkit-scrollbar-thumb {\n        background: ", ";\n        border-radius: 10px;\n      }\n\n      /* Handle on hover */\n      &::-webkit-scrollbar-thumb:hover {\n        background: ", ";\n      }\n\n      & > div {\n        // width: max-content;\n        & > span {\n          // margin-right: 5px;\n          // background: ", ";\n          // &:hover {\n          //   color: #fff;\n          // }\n        }\n      }\n    }\n  }\n\n  .filter-options-holder {\n    margin-top: 5px;\n    position: absolute;\n    background: #182738;\n    z-index: 2;\n    font-family: 'SFUIText-Medium';\n    padding: 15px;\n    right: 0;\n\n    .filter-group-title {\n      color: #afb2ba;\n      font-size: 10px;\n      padding-bottom: 10px;\n      color: #ffffff;\n      text-transform: uppercase;\n    }\n\n    .filter-group-item-list {\n      margin: 0px -5px 0px;\n      .ardp-date-picker {\n        display: inline-block;\n        .label-text {\n          color: #cccccc;\n          font-size: 12px;\n          transition: all 0.5s ease-in-out;\n          cursor: pointer;\n          &:hover {\n            color: #fff;\n          }\n        }\n\n        &.checked {\n          .label-text {\n            color: ", ";\n          }\n        }\n\n        .calendar {\n          right: -7px;\n          width: 330px;\n          padding: 15px;\n        }\n      }\n    }\n\n    .filter-group {\n      padding: 15px 0px 10px;\n      border-bottom: 1px solid #303f51;\n      &:first-child {\n        padding: 0px 0px 10px;\n      }\n    }\n\n    button.filter-group-item {\n      background-color: transparent;\n      border: none;\n      margin-right: 12px;\n      cursor: pointer;\n      transition: all 0.5s ease-in-out;\n      color: #cccccc;\n      font-size: 12px;\n      padding: 3px 0px;\n      &:focus {\n        outline: none;\n      }\n\n      &:hover {\n        color: #fff;\n      }\n\n      &.checked {\n        color: ", ";\n      }\n    }\n\n    .action-btn {\n      margin: 0px;\n      pointer-events: auto;\n      border-radius: 999rem;\n      box-shadow: none;\n      padding: 0.5rem 0.7rem;\n    }\n  }\n"])), function (_ref) {
   var isMenuOpen = _ref.isMenuOpen;
   return isMenuOpen ? '95' : '1';
 }, function (props) {
@@ -85,43 +54,38 @@ var StyledFilterCompoment = _styledComponents2.default.div(_templateObject, func
 }, function (props) {
   return _tokens.colors[props.theme].filter.lightthemeColor;
 });
-
-var ApplyBtn = (0, _styledComponents2.default)(_button2.default)(_templateObject2, function (props) {
+var ApplyBtn = (0, _styledComponents["default"])(_button["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  border: none;\n  cursor: pointer;\n  transition: all 0.5s ease-in-out;\n  font-size: 12px;\n  margin-left: 10px;\n  padding: 10px 30px;\n  background: ", ";\n  border-radius: 999rem;\n  color: #0c141d;\n  &:hover {\n    color: #ffffff;\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].filter.themeColor;
 });
-var ResetBtn = (0, _styledComponents2.default)(_button2.default)(_templateObject3, function (props) {
+var ResetBtn = (0, _styledComponents["default"])(_button["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  background-color: transparent;\n  border: none;\n  margin-right: 10px;\n  cursor: pointer;\n  transition: all 0.5s ease-in-out;\n  font-size: 12px;\n  margin: 0;\n  padding: 10px 30px;\n  background: #303f51;\n  border-radius: 999rem;\n  color: #ffffff;\n  &:focus {\n    outline: none;\n    background: #303f51;\n    color: ", ";\n  }\n\n  &:hover {\n    color: ", ";\n    background: #303f51;\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].filter.themeColor;
 }, function (props) {
   return _tokens.colors[props.theme].filter.themeColor;
 });
-
-var OverlayStyles = _styledComponents2.default.div(_templateObject4, function (_ref3) {
+var OverlayStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100vh;\n  background-color: rgba(0, 0, 0, 0.3);\n  z-index: ", ";\n  display: block;\n"])), function (_ref3) {
   var isMenuOpen = _ref3.isMenuOpen;
   return isMenuOpen ? '94' : '0';
 });
-
-var UserIdDropdown = _styledComponents2.default.div(_templateObject5, function (props) {
+var UserIdDropdown = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  border-bottom: 1px solid #999999;\n\n  .tags {\n    padding-bottom: 2px;\n  }\n  input:focus {\n    outline: none;\n  }\n\n  .input-filter {\n    background: transparent;\n    font-family: 'SFUIText-Medium';\n    position: relative;\n    width: 100%;\n    display: block;\n    border: none;\n    color: #999999;\n  }\n  .user-dropdown {\n    background-color: rgb(18, 29, 41);\n    margin-top: 5px;\n    border: 1px solid rgb(153, 153, 153);\n    max-height: 200px;\n    overflow: auto;\n    position: absolute;\n    width: 92%;\n    z-index: 2;\n    cursor: pointer;\n  }\n\n  .dropdown-options {\n    font-family: SFUIText-Regular;\n    font-size: 13px;\n    line-height: normal;\n    color: rgb(204, 204, 204);\n    padding: 7px;\n    :hover {\n      background-color: ", ";\n      color: rgb(255, 255, 255);\n    }\n    &.active {\n      background-color: ", ";\n      color: rgb(255, 255, 255);\n      :hover {\n        background-color: rgb(18, 29, 41);\n        color: rgb(204, 204, 204);\n      }\n    }\n  }\n"])), function (props) {
   return _tokens.colors[props.theme].filter.rgbthemeColor;
 }, function (props) {
   return _tokens.colors[props.theme].filter.rgbthemeColor;
 });
-
-var Filter = function (_Component) {
-  _inherits(Filter, _Component);
-
+var Filter = /*#__PURE__*/function (_Component) {
   function Filter(props) {
-    _classCallCheck(this, Filter);
-
-    var _this = _possibleConstructorReturn(this, (Filter.__proto__ || Object.getPrototypeOf(Filter)).call(this, props));
-
-    _this.onSelection = function (groupItem, optionItem) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, Filter);
+    _this = _callSuper(this, Filter, [props]);
+    /**
+     * This function handle the onChange event in the filter.
+     * @param {Object} groupItem GUI elements for the particular section
+     * @param {Object} optionItem the item from the options of that section
+     */
+    (0, _defineProperty2["default"])(_this, "onSelection", function (groupItem, optionItem) {
       var selectedFiltersObj = _this.state.selectedFiltersObj;
-
-
-      var filters = JSON.parse(JSON.stringify(_extends({}, selectedFiltersObj, _defineProperty({}, groupItem.field, _extends({}, selectedFiltersObj[groupItem.field], {
+      var filters = JSON.parse(JSON.stringify(_objectSpread(_objectSpread({}, selectedFiltersObj), {}, (0, _defineProperty2["default"])({}, groupItem.field, _objectSpread(_objectSpread({}, selectedFiltersObj[groupItem.field]), {}, {
         label: optionItem.title // title of options inside the filters object
       })))));
-
       switch (groupItem.display_format) {
         case 'CheckboxGroup':
           {
@@ -148,7 +112,6 @@ var Filter = function (_Component) {
               var optionIndex = multiple.findIndex(function (item) {
                 return item === optionItem.field;
               });
-
               var maxSelection = typeof groupItem.max_selection === 'number' ? groupItem.max_selection : groupItem.options.length;
               if (optionIndex < 0 && multiple.length < maxSelection) {
                 multiple.push(optionItem.field);
@@ -159,17 +122,20 @@ var Filter = function (_Component) {
             }
             break;
           }
-
         case 'datepicker':
           {
             filters[groupItem.field].value.key = optionItem.field; // in date, this needs to be added for highlighting the selected filters
             if (optionItem.field === 'date_range') {
-              _this.setState({ isSelectRangeSelected: true }, function () {
+              _this.setState({
+                isSelectRangeSelected: true
+              }, function () {
                 filters[groupItem.field].value.fromDate = selectedFiltersObj[groupItem.field].value.fromDate;
                 filters[groupItem.field].value.toDate = selectedFiltersObj[groupItem.field].value.toDate;
               });
             } else if (optionItem.field === 'date') {
-              _this.setState({ isSelectDateSelected: true }, function () {
+              _this.setState({
+                isSelectDateSelected: true
+              }, function () {
                 filters[groupItem.field].value.fromDate = selectedFiltersObj[groupItem.field].value.fromDate;
                 filters[groupItem.field].value.toDate = selectedFiltersObj[groupItem.field].value.toDate;
               });
@@ -187,41 +153,39 @@ var Filter = function (_Component) {
               filters[groupItem.field].value.fromDate = _constants.CURRENT_DATE;
               filters[groupItem.field].value.toDate = _constants.CURRENT_DATE;
             }
-
             break;
           }
-
         case 'input':
           {
             var selectedUserIds = _this.state.selectedUserIds;
-
             var selectedUserIndex = selectedUserIds.findIndex(function (user) {
               return user.user_id === optionItem.user_id;
             });
             var updatedUserIds = selectedUserIndex >= 0 ? selectedUserIds.filter(function (user) {
               return user.user_id !== optionItem.user_id;
-            }) : [].concat(_toConsumableArray(selectedUserIds), [optionItem]);
+            }) : [].concat((0, _toConsumableArray2["default"])(selectedUserIds), [optionItem]);
             _this.setState({
               selectedUserIds: updatedUserIds
             });
             var updatedUserid = updatedUserIds.reduce(function (updatedUserid, user) {
-              return user.email_id + ', ' + updatedUserid;
+              return "".concat(user.email_id, ", ").concat(updatedUserid);
             }, '');
             filters[groupItem.field] = updatedUserIds;
             filters.params[groupItem.field] = updatedUserid;
             _this._userFilterInput.current.value = '';
           }
-
         default:
           break;
       }
-
       _this.changeFilters('selected', filters);
-    };
-
-    _this.changeFilters = function (forAction, filters) {
+    });
+    /**
+     * This function performs action based on forAction on filters object
+     * @param {String} forAction action performed on the filter object
+     * @param {Object} filters Object containing current filters selected values
+     */
+    (0, _defineProperty2["default"])(_this, "changeFilters", function (forAction, filters) {
       var initialFilters = _this.props.initialFilters;
-
       var newFilters = null;
       if (forAction === 'reset') {
         newFilters = initialFilters;
@@ -239,15 +203,18 @@ var Filter = function (_Component) {
           _this.applyFilters();
         }
       });
-    };
-
-    _this.handleDebounce = (0, _lodash.debounce)(function (permission, query) {
+    });
+    /**
+     * This function hadles the onchange event for search input field inside filter
+     * @param {string} query Input Filed value
+     * @param {string} permission Type of dashboard
+     */
+    (0, _defineProperty2["default"])(_this, "handleDebounce", (0, _lodash.debounce)(function (permission, query) {
       if (query.length > 1) _this.props.handleUserIdFilterChange(permission, query);
-    }, 250);
-
-    _this.highlightSelectedFilters = function (element, option) {
+    }, 250));
+    // to highlight selected filters
+    (0, _defineProperty2["default"])(_this, "highlightSelectedFilters", function (element, option) {
       var selectedFiltersObj = _this.state.selectedFiltersObj;
-
       var selectedStyle = '';
       if (selectedFiltersObj[element.field]) {
         if (element.select_type === 'select') {
@@ -266,14 +233,11 @@ var Filter = function (_Component) {
         }
       }
       return 'filter-group-item ' + selectedStyle;
-    };
-
-    _this.renderFilterDisplayLabels = function (element) {
+    });
+    // this to render filter label based on selectedFiltersObj
+    (0, _defineProperty2["default"])(_this, "renderFilterDisplayLabels", function (element) {
       var selectedFiltersObj = _this.state.selectedFiltersObj;
-
-
       var label = '';
-
       if (selectedFiltersObj && selectedFiltersObj[element.field]) {
         if (element.select_type === 'select') {
           label = selectedFiltersObj[element.field].value ? selectedFiltersObj[element.field].label : 'All'; // normal label - single select
@@ -281,15 +245,14 @@ var Filter = function (_Component) {
           if (element.field === 'date') {
             // eg. display like this Jan 10
             var value = selectedFiltersObj[element.field].value;
-
             var from = new Date(value ? value.fromDate : _constants.CURRENT_DATE);
             var end = new Date(value ? value.toDate : _constants.CURRENT_DATE);
-            var fromattedFrom = _constants.MONTHS[from.getMonth()] + ' ' + from.getDate();
-            var fromattedEnd = _constants.MONTHS[end.getMonth()] + ' ' + end.getDate();
+            var fromattedFrom = "".concat(_constants.MONTHS[from.getMonth()], " ").concat(from.getDate());
+            var fromattedEnd = "".concat(_constants.MONTHS[end.getMonth()], " ").concat(end.getDate());
             if (value.key === 'date_range' && !value.toDate && !value.fromDate) {
               label = ' - ';
             } else if (value.key === 'date_range' || value.key === 'week' || value.key === 'month' || value.key === 'three_month') {
-              label = fromattedFrom + ' - ' + fromattedEnd;
+              label = "".concat(fromattedFrom, " - ").concat(fromattedEnd);
             } else {
               label = fromattedEnd;
             }
@@ -298,24 +261,26 @@ var Filter = function (_Component) {
           label = selectedFiltersObj[element.field].value.length;
         }
       }
-
-      return '' + (element.title === 'Date' ? '' : element.title + ': ') + label;
-    };
-
-    _this.toggleFiltersMenu = function (flag) {
+      return "".concat(element.title === 'Date' ? '' : "".concat(element.title, ": ")).concat(label);
+    });
+    /**
+     * This function toggle filters menu - show & hide.
+     * @param {boolean} flag contains value true/false to show/ hide filter.
+     */
+    (0, _defineProperty2["default"])(_this, "toggleFiltersMenu", function (flag) {
       var selectedFilters = _this.props.selectedFilters;
-
       if (flag) {
         _this.setState({
           isMenuOpen: flag,
           selectedUserIds: selectedFilters && selectedFilters.user_id_filter
         });
       } else {
-        _this.setState({ isMenuOpen: flag });
+        _this.setState({
+          isMenuOpen: flag
+        });
       }
-    };
-
-    _this.componentDidUpdate = function (prevProps, prevState, snapshot) {
+    });
+    (0, _defineProperty2["default"])(_this, "componentDidUpdate", function (prevProps, prevState, snapshot) {
       if (_this.state.selectedFiltersFor == 'reset') {} else if (_this.state.selectedFiltersFor == 'selected') {} else if (prevProps.selectedFilters && _this.state.selectedFiltersObj == null) {
         _this.setState({
           selectedFiltersObj: _this.props.selectedFilters
@@ -329,35 +294,38 @@ var Filter = function (_Component) {
             diff = true;
           }
         });
-
         if (diff) {
           _this.setState({
             selectedFiltersObj: _this.props.selectedFilters
           });
         }
       }
-    };
-
-    _this.toggleDropDown = function (e) {
+    });
+    /**
+     * This function hides the dropdown list when user clicks outside the area of input box
+     * @param {Object} e click event that gets fired.
+     */
+    (0, _defineProperty2["default"])(_this, "toggleDropDown", function (e) {
       var showDropDownOptions = _this.state.showDropDownOptions;
-
       if (_this._userFilter && _this._userFilter.current && !_this._userFilter.current.contains(e.target)) {
         _this.setState({
           showDropDownOptions: false
         });
       }
-    };
-
-    _this.applyFilters = function (forData) {
+    });
+    /**
+     * This function applies the selected filter based on forData.
+     * @param {string} forData action that needs to be performed on the filter.
+     */
+    (0, _defineProperty2["default"])(_this, "applyFilters", function (forData) {
       var _this$state = _this.state,
-          selectedFiltersObj = _this$state.selectedFiltersObj,
-          selectedUserIds = _this$state.selectedUserIds;
+        selectedFiltersObj = _this$state.selectedFiltersObj,
+        selectedUserIds = _this$state.selectedUserIds;
       var _this$props = _this.props,
-          applyFilters = _this$props.applyFilters,
-          initialFilters = _this$props.initialFilters,
-          refreshDashboard = _this$props.refreshDashboard,
-          tableLoadingActionFunc = _this$props.tableLoadingActionFunc;
-
+        applyFilters = _this$props.applyFilters,
+        initialFilters = _this$props.initialFilters,
+        refreshDashboard = _this$props.refreshDashboard,
+        tableLoadingActionFunc = _this$props.tableLoadingActionFunc;
       _this.toggleFiltersMenu(false);
       if (forData === 'reset') {
         if (refreshDashboard && tableLoadingActionFunc) {
@@ -383,420 +351,309 @@ var Filter = function (_Component) {
       } else {
         applyFilters(selectedFiltersObj, 'apply');
       }
-    };
-
-    _this.getClassName = function (user, indx) {
+    });
+    /**
+     * This function takes the current user object from the dropdown list and checks if it is pre-selected.
+     * @param {Objec} user object that contains details for the user
+     * @returns the name of class with active state or not.
+     */
+    (0, _defineProperty2["default"])(_this, "getClassName", function (user, indx) {
       var _this$state2 = _this.state,
-          selectedUserIds = _this$state2.selectedUserIds,
-          autoSelectIndex = _this$state2.autoSelectIndex;
-
+        selectedUserIds = _this$state2.selectedUserIds,
+        autoSelectIndex = _this$state2.autoSelectIndex;
       if (autoSelectIndex === indx) return 'dropdown-options active';else {
         var index = selectedUserIds.findIndex(function (userObj) {
           return userObj.user_id === user.user_id;
         });
         return index >= 0 ? 'dropdown-options active' : 'dropdown-options';
       }
-    };
-
-    _this.resetSelectedUserFilter = function () {
+    });
+    /**
+     * This function reset userIds in the filter.
+     */
+    (0, _defineProperty2["default"])(_this, "resetSelectedUserFilter", function () {
       _this.setState({
         selectedUserIds: [],
         showDropDownOptions: false,
         autoSelectIndex: -1
       });
-    };
-
-    _this.getMaxDate = function (option, groupItem) {
+    });
+    (0, _defineProperty2["default"])(_this, "getMaxDate", function (option, groupItem) {
       var _this$state3 = _this.state,
-          selectedFiltersObj = _this$state3.selectedFiltersObj,
-          isSelectRangeSelected = _this$state3.isSelectRangeSelected;
-
-
+        selectedFiltersObj = _this$state3.selectedFiltersObj,
+        isSelectRangeSelected = _this$state3.isSelectRangeSelected;
       var maxDate = _constants.CURRENT_DATE;
       if (option.future_date_available) {
         maxDate = new Date('12/31/2099').getTime() * _constants.CONVERT;
       } else if (!isSelectRangeSelected && selectedFiltersObj[groupItem.field].value.fromDate + option.max_days * _constants.CONVERT < _constants.CURRENT_DATE) {
         maxDate = selectedFiltersObj[groupItem.field].value.fromDate + option.max_days * _constants.CONVERT;
       }
-
       return maxDate;
-    };
-
-    _this.render = function () {
+    });
+    (0, _defineProperty2["default"])(_this, "render", function () {
       var _this$props2 = _this.props,
-          filtersStructure = _this$props2.filtersStructure,
-          showSelectedFiltersAsChip = _this$props2.showSelectedFiltersAsChip,
-          filterMessage = _this$props2.filterMessage,
-          width = _this$props2.width,
-          userIdsList = _this$props2.userIdsList;
+        filtersStructure = _this$props2.filtersStructure,
+        showSelectedFiltersAsChip = _this$props2.showSelectedFiltersAsChip,
+        filterMessage = _this$props2.filterMessage,
+        width = _this$props2.width,
+        userIdsList = _this$props2.userIdsList;
       var _this$state4 = _this.state,
-          isMenuOpen = _this$state4.isMenuOpen,
-          selectedFiltersObj = _this$state4.selectedFiltersObj,
-          isSelectRangeSelected = _this$state4.isSelectRangeSelected,
-          isSelectDateSelected = _this$state4.isSelectDateSelected,
-          showDropDownOptions = _this$state4.showDropDownOptions;
-
-      return _react2.default.createElement(
-        _react.Fragment,
-        null,
-        isMenuOpen && _react2.default.createElement(OverlayStyles, { isMenuOpen: true, onClick: function onClick() {
-            return _this.toggleFiltersMenu(false);
-          } }),
-        _react2.default.createElement(
-          StyledFilterCompoment,
-          {
-            theme: _this.props.theme,
-            isMenuOpen: isMenuOpen,
-            showSelectedFiltersAsChip: showSelectedFiltersAsChip
+        isMenuOpen = _this$state4.isMenuOpen,
+        selectedFiltersObj = _this$state4.selectedFiltersObj,
+        isSelectRangeSelected = _this$state4.isSelectRangeSelected,
+        isSelectDateSelected = _this$state4.isSelectDateSelected,
+        showDropDownOptions = _this$state4.showDropDownOptions;
+      return /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, isMenuOpen && /*#__PURE__*/_react["default"].createElement(OverlayStyles, {
+        isMenuOpen: true,
+        onClick: function onClick() {
+          return _this.toggleFiltersMenu(false);
+        }
+      }), /*#__PURE__*/_react["default"].createElement(StyledFilterCompoment, {
+        theme: _this.props.theme,
+        isMenuOpen: isMenuOpen,
+        showSelectedFiltersAsChip: showSelectedFiltersAsChip
+      }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+        role: "presentation",
+        className: "search-filter-list-box",
+        onClick: function onClick() {
+          _this.toggleFiltersMenu(!(isMenuOpen && !showSelectedFiltersAsChip));
+          _this.applyFilters('cancel');
+          if (isMenuOpen && !showSelectedFiltersAsChip) {
+            _this.applyFilters('cancel');
+          } else {
+            _this.toggleFiltersMenu(true);
+          }
+        }
+      }, !showSelectedFiltersAsChip && /*#__PURE__*/_react["default"].createElement("div", {
+        className: isMenuOpen ? 'filter-button active' : 'filter-button'
+      }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
+        name: "filter",
+        width: 16,
+        height: 16,
+        color: "#afb2ba"
+      })), showSelectedFiltersAsChip && /*#__PURE__*/_react["default"].createElement(_react.Fragment, null, /*#__PURE__*/_react["default"].createElement("div", {
+        className: "filter-list-box"
+      }, /*#__PURE__*/_react["default"].createElement("span", {
+        style: {
+          color: _tokens.colors[_this.props.theme].filter.lightthemeColor
+        }
+      }, "FILTERS"), /*#__PURE__*/_react["default"].createElement("div", {
+        className: "list-holder"
+      }, /*#__PURE__*/_react["default"].createElement("div", null, filtersStructure ? filtersStructure.slice(0, 2).map(function (item) {
+        return /*#__PURE__*/_react["default"].createElement(_tag["default"], {
+          key: item.text,
+          theme: _this.props.theme,
+          style: {
+            cursor: 'pointer'
           },
-          _react2.default.createElement(
-            'div',
-            null,
-            _react2.default.createElement(
-              'div',
-              {
-                role: 'presentation',
-                className: 'search-filter-list-box',
-                onClick: function onClick() {
-                  _this.toggleFiltersMenu(!(isMenuOpen && !showSelectedFiltersAsChip));
-                  _this.applyFilters('cancel');
-                  if (isMenuOpen && !showSelectedFiltersAsChip) {
-                    _this.applyFilters('cancel');
-                  } else {
-                    _this.toggleFiltersMenu(true);
-                  }
-                }
+          className: "chip-button checked"
+        }, _this.renderFilterDisplayLabels(item));
+      }) : null, filtersStructure.length - 2 > 0 && /*#__PURE__*/_react["default"].createElement(_tag["default"], {
+        theme: _this.props.theme,
+        className: "chip-button checked"
+      }, "+ ".concat(filtersStructure.length - 2)))))))), isMenuOpen && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "filter-options-holder",
+        style: {
+          width: width
+        }
+      }, filterMessage && /*#__PURE__*/_react["default"].createElement("div", {
+        className: "filter-message"
+      }, filterMessage), filtersStructure && selectedFiltersObj ? filtersStructure.map(function (groupItem) {
+        if (groupItem.display_format === 'input') {
+          return /*#__PURE__*/_react["default"].createElement("div", {
+            className: "filter-group",
+            key: groupItem.field
+          }, /*#__PURE__*/_react["default"].createElement("div", {
+            className: "filter-group-title"
+          }, groupItem.title), /*#__PURE__*/_react["default"].createElement("div", {
+            ref: _this._userFilter
+          }, /*#__PURE__*/_react["default"].createElement(UserIdDropdown, {
+            theme: _this.props.theme
+          }, selectedFiltersObj[groupItem.field] && selectedFiltersObj[groupItem.field].length > 0 && selectedFiltersObj[groupItem.field].map(function (user) {
+            return /*#__PURE__*/_react["default"].createElement("div", {
+              className: "tags"
+            }, /*#__PURE__*/_react["default"].createElement(_tag["default"], {
+              key: "tag-".concat(user.user_id),
+              theme: _this.props.theme,
+              className: "",
+              onRemove: function onRemove(e) {
+                _this.onSelection(groupItem, user);
+              }
+            }, user.name));
+          }), /*#__PURE__*/_react["default"].createElement("input", {
+            className: "input-filter",
+            placeholder: "Enter User Name",
+            ref: _this._userFilterInput,
+            onChange: function onChange(e) {
+              _this.handleDebounce(groupItem.permission, e.target.value);
+              _this.setState({
+                showDropDownOptions: true
+              });
+            },
+            onKeyDown: function onKeyDown(e) {
+              return _this.onKeyDown(e, groupItem);
+            }
+            // onFocus={(e) => this.setState({showDropDownOptions: true})}
+          }), userIdsList && userIdsList.length > 0 && showDropDownOptions && _this._userFilterInput.current.value.length > 1 && /*#__PURE__*/_react["default"].createElement("div", {
+            className: "user-dropdown"
+          }, userIdsList.map(function (user, index) {
+            return /*#__PURE__*/_react["default"].createElement("p", {
+              className: _this.getClassName(user, index),
+              onClick: function onClick(e) {
+                return _this.onSelection(groupItem, user);
+              }
+            }, user.name);
+          })))));
+        }
+        return /*#__PURE__*/_react["default"].createElement("div", {
+          className: "filter-group",
+          key: groupItem.field
+        }, /*#__PURE__*/_react["default"].createElement("div", {
+          className: "filter-group-title"
+        }, groupItem.title), /*#__PURE__*/_react["default"].createElement("div", {
+          className: "filter-group-item-list"
+        }, groupItem.options.map(function (option) {
+          if (option.field === 'date') {
+            return /*#__PURE__*/_react["default"].createElement(_datePicker["default"], {
+              theme: _this.props.theme,
+              label: /*#__PURE__*/_react["default"].createElement(_tag["default"], {
+                key: option.field,
+                theme: _this.props.theme,
+                className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option)
+              }, option.title),
+              className: _this.highlightSelectedFilters(groupItem, option),
+              labelAsText: true,
+              minDate: isSelectDateSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
+              maxDate: _this.getMaxDate(option, groupItem),
+              datepickerStep: 2,
+              selected:
+              // previousSelectedFilters && previousSelectedFilters[groupItem.field].value.key !='date_range' ? []:(
+              selectedFiltersObj[groupItem.field] ? [selectedFiltersObj[groupItem.field].value.fromDate, selectedFiltersObj[groupItem.field].value.fromDate] : []
+              //  )
+              ,
+              onSelectionChange: function onSelectionChange(date) {
+                var filters = _objectSpread({}, selectedFiltersObj);
+                var formattedFrom = new Date(date);
+                var formattedEnd = date.to ? new Date(date.to) : null; // new Date(date.to || CURRENT_DATE);
+
+                filters[groupItem.field].value.fromDate = date;
+                filters[groupItem.field].value.toDate = date;
+                filters[groupItem.field].value.key = 'date';
+                filters[groupItem.field].label = date ? "".concat(_constants.MONTHS[formattedFrom.getMonth()], " ").concat(formattedFrom.getDate(), " ") : 'no selection';
+                _this.setState({
+                  isSelectDateSelected: false
+                }, function () {
+                  _this.changeFilters('selected', filters);
+                });
               },
-              !showSelectedFiltersAsChip && _react2.default.createElement(
-                'div',
-                { className: isMenuOpen ? 'filter-button active' : 'filter-button' },
-                _react2.default.createElement(_icon2.default, { name: 'filter', width: 16, height: 16, color: '#afb2ba' })
-              ),
-              showSelectedFiltersAsChip && _react2.default.createElement(
-                _react.Fragment,
-                null,
-                _react2.default.createElement(
-                  'div',
-                  { className: 'filter-list-box' },
-                  _react2.default.createElement(
-                    'span',
-                    {
-                      style: {
-                        color: _tokens.colors[_this.props.theme].filter.lightthemeColor
-                      }
-                    },
-                    'FILTERS'
-                  ),
-                  _react2.default.createElement(
-                    'div',
-                    { className: 'list-holder' },
-                    _react2.default.createElement(
-                      'div',
-                      null,
-                      filtersStructure ? filtersStructure.slice(0, 2).map(function (item) {
-                        return _react2.default.createElement(
-                          _tag2.default,
-                          {
-                            key: item.text,
-                            theme: _this.props.theme,
-                            style: { cursor: 'pointer' },
-                            className: 'chip-button checked'
-                          },
-                          _this.renderFilterDisplayLabels(item)
-                        );
-                      }) : null,
-                      filtersStructure.length - 2 > 0 && _react2.default.createElement(
-                        _tag2.default,
-                        {
-                          theme: _this.props.theme,
-                          className: 'chip-button checked'
-                        },
-                        '+ ' + (filtersStructure.length - 2)
-                      )
-                    )
-                  )
-                )
-              )
-            )
-          ),
-          isMenuOpen && _react2.default.createElement(
-            'div',
-            { className: 'filter-options-holder', style: { width: width } },
-            filterMessage && _react2.default.createElement(
-              'div',
-              { className: 'filter-message' },
-              filterMessage
-            ),
-            filtersStructure && selectedFiltersObj ? filtersStructure.map(function (groupItem) {
-              if (groupItem.display_format === 'input') {
-                return _react2.default.createElement(
-                  'div',
-                  { className: 'filter-group', key: groupItem.field },
-                  _react2.default.createElement(
-                    'div',
-                    { className: 'filter-group-title' },
-                    groupItem.title
-                  ),
-                  _react2.default.createElement(
-                    'div',
-                    { ref: _this._userFilter },
-                    _react2.default.createElement(
-                      UserIdDropdown,
-                      { theme: _this.props.theme },
-                      selectedFiltersObj[groupItem.field] && selectedFiltersObj[groupItem.field].length > 0 && selectedFiltersObj[groupItem.field].map(function (user) {
-                        return _react2.default.createElement(
-                          'div',
-                          { className: 'tags' },
-                          _react2.default.createElement(
-                            _tag2.default,
-                            {
-                              key: 'tag-' + user.user_id,
-                              theme: _this.props.theme,
-                              className: '',
-                              onRemove: function onRemove(e) {
-                                _this.onSelection(groupItem, user);
-                              }
-                            },
-                            user.name
-                          )
-                        );
-                      }),
-                      _react2.default.createElement('input', {
-                        className: 'input-filter',
-                        placeholder: 'Enter User Name',
-                        ref: _this._userFilterInput,
-                        onChange: function onChange(e) {
-                          _this.handleDebounce(groupItem.permission, e.target.value);
-                          _this.setState({ showDropDownOptions: true });
-                        },
-                        onKeyDown: function onKeyDown(e) {
-                          return _this.onKeyDown(e, groupItem);
-                        }
-                        // onFocus={(e) => this.setState({showDropDownOptions: true})}
-                      }),
-                      userIdsList && userIdsList.length > 0 && showDropDownOptions && _this._userFilterInput.current.value.length > 1 && _react2.default.createElement(
-                        'div',
-                        { className: 'user-dropdown' },
-                        userIdsList.map(function (user, index) {
-                          return _react2.default.createElement(
-                            'p',
-                            {
-                              className: _this.getClassName(user, index),
-                              onClick: function onClick(e) {
-                                return _this.onSelection(groupItem, user);
-                              }
-                            },
-                            user.name
-                          );
-                        })
-                      )
-                    )
-                  )
-                );
+              onCalendarOpen: function onCalendarOpen() {
+                _this.onSelection(groupItem, option);
               }
-              return _react2.default.createElement(
-                'div',
-                { className: 'filter-group', key: groupItem.field },
-                _react2.default.createElement(
-                  'div',
-                  { className: 'filter-group-title' },
-                  groupItem.title
-                ),
-                _react2.default.createElement(
-                  'div',
-                  { className: 'filter-group-item-list' },
-                  groupItem.options.map(function (option) {
-                    if (option.field === 'date') {
-                      return _react2.default.createElement(_datePicker2.default, {
-                        theme: _this.props.theme,
-                        label: _react2.default.createElement(
-                          _tag2.default,
-                          {
-                            key: option.field,
-                            theme: _this.props.theme,
-                            className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option)
-                          },
-                          option.title
-                        ),
-                        className: _this.highlightSelectedFilters(groupItem, option),
-                        labelAsText: true,
-                        minDate: isSelectDateSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
-                        maxDate: _this.getMaxDate(option, groupItem),
-                        datepickerStep: 2,
-                        selected:
-                        // previousSelectedFilters && previousSelectedFilters[groupItem.field].value.key !='date_range' ? []:(
-                        selectedFiltersObj[groupItem.field] ? [selectedFiltersObj[groupItem.field].value.fromDate, selectedFiltersObj[groupItem.field].value.fromDate] : []
-                        //  )
-                        ,
-                        onSelectionChange: function onSelectionChange(date) {
-                          var filters = _extends({}, selectedFiltersObj);
-                          var formattedFrom = new Date(date);
-                          var formattedEnd = date.to ? new Date(date.to) : null; // new Date(date.to || CURRENT_DATE);
-
-                          filters[groupItem.field].value.fromDate = date;
-                          filters[groupItem.field].value.toDate = date;
-
-                          filters[groupItem.field].value.key = 'date';
-                          filters[groupItem.field].label = date ? _constants.MONTHS[formattedFrom.getMonth()] + ' ' + formattedFrom.getDate() + ' ' : 'no selection';
-                          _this.setState({ isSelectDateSelected: false }, function () {
-                            _this.changeFilters('selected', filters);
-                          });
-                        },
-                        onCalendarOpen: function onCalendarOpen() {
-                          _this.onSelection(groupItem, option);
-                        }
-                      });
-                    } else if (option.field === 'date_range') {
-                      return _react2.default.createElement(_datePicker2.default, {
-                        theme: _this.props.theme,
-                        label: _react2.default.createElement(
-                          _tag2.default,
-                          {
-                            key: option.field,
-                            theme: _this.props.theme,
-                            className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option)
-                          },
-                          option.title
-                        ),
-                        className: _this.highlightSelectedFilters(groupItem, option),
-                        labelAsText: true,
-                        rangePicker: true,
-                        minDate: isSelectRangeSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
-                        maxDate: _this.getMaxDate(option, groupItem),
-                        datepickerStep: 2,
-                        selected:
-                        // previousSelectedFilters && previousSelectedFilters[groupItem.field].value.key !='date_range' ? []:(
-                        selectedFiltersObj[groupItem.field] ? [selectedFiltersObj[groupItem.field].value.fromDate, selectedFiltersObj[groupItem.field].value.toDate] : []
-                        //  )
-                        ,
-                        onSelectionChange: function onSelectionChange(date) {
-                          var filters = _extends({}, selectedFiltersObj);
-                          var formattedFrom = date.from ? new Date(date.from) : null;
-                          var formattedEnd = date.to ? new Date(date.to) : null; // new Date(date.to || CURRENT_DATE);
-                          filters[groupItem.field].value.fromDate = date.from;
-                          filters[groupItem.field].value.toDate = date.to; // || CURRENT_DATE;
-                          filters[groupItem.field].value.key = 'date_range';
-                          filters[groupItem.field].label = date.from && date.to ? _constants.MONTHS[formattedFrom.getMonth()] + ' ' + formattedFrom.getDate() + ' - ' + _constants.MONTHS[formattedEnd.getMonth()] + ' ' + formattedEnd.getDate() : 'no selection';
-                          _this.setState({ isSelectRangeSelected: false }, function () {
-                            _this.changeFilters('selected', filters);
-                          });
-                        },
-                        onCalendarOpen: function onCalendarOpen() {
-                          _this.onSelection(groupItem, option);
-                        }
-                      });
-                    } else {
-                      return _react2.default.createElement(
-                        _tag2.default,
-                        {
-                          key: option.field,
-                          theme: _this.props.theme,
-                          className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option),
-                          onClick: function onClick() {
-                            // first range picker false then
-                            _this.setState({ isRangePickerVisible: false }, function () {
-                              _this.onSelection(groupItem, option);
-                            });
-                          }
-                        },
-                        option.title
-                      );
-                    }
-                  })
-                )
-              );
-            }) : null,
-            _react2.default.createElement(
-              'div',
-              {
-                style: {
-                  margin: '15px 0px 0px',
-                  textAlign: 'center',
-                  display: 'flex'
-                }
+            });
+          } else if (option.field === 'date_range') {
+            return /*#__PURE__*/_react["default"].createElement(_datePicker["default"], {
+              theme: _this.props.theme,
+              label: /*#__PURE__*/_react["default"].createElement(_tag["default"], {
+                key: option.field,
+                theme: _this.props.theme,
+                className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option)
+              }, option.title),
+              className: _this.highlightSelectedFilters(groupItem, option),
+              labelAsText: true,
+              rangePicker: true,
+              minDate: isSelectRangeSelected ? null : selectedFiltersObj[groupItem.field].value.fromDate - option.max_days * _constants.CONVERT,
+              maxDate: _this.getMaxDate(option, groupItem),
+              datepickerStep: 2,
+              selected:
+              // previousSelectedFilters && previousSelectedFilters[groupItem.field].value.key !='date_range' ? []:(
+              selectedFiltersObj[groupItem.field] ? [selectedFiltersObj[groupItem.field].value.fromDate, selectedFiltersObj[groupItem.field].value.toDate] : []
+              //  )
+              ,
+              onSelectionChange: function onSelectionChange(date) {
+                var filters = _objectSpread({}, selectedFiltersObj);
+                var formattedFrom = date.from ? new Date(date.from) : null;
+                var formattedEnd = date.to ? new Date(date.to) : null; // new Date(date.to || CURRENT_DATE);
+                filters[groupItem.field].value.fromDate = date.from;
+                filters[groupItem.field].value.toDate = date.to; // || CURRENT_DATE;
+                filters[groupItem.field].value.key = 'date_range';
+                filters[groupItem.field].label = date.from && date.to ? "".concat(_constants.MONTHS[formattedFrom.getMonth()], " ").concat(formattedFrom.getDate(), " - ").concat(_constants.MONTHS[formattedEnd.getMonth()], " ").concat(formattedEnd.getDate()) : 'no selection';
+                _this.setState({
+                  isSelectRangeSelected: false
+                }, function () {
+                  _this.changeFilters('selected', filters);
+                });
               },
-              _react2.default.createElement(
-                ResetBtn,
-                {
-                  theme: _this.props.theme,
-                  appearance: 'cta',
-                  onClick: function onClick() {
-                    // this.toggleFiltersMenu(false);
-                    _this.applyFilters('reset');
-                    // this.changeFilters('reset', null);
-                  }
-                },
-                'Reset'
-              ),
-              _react2.default.createElement(
-                ApplyBtn,
-                {
-                  theme: _this.props.theme,
-                  id: 'apply-btn',
-                  appearance: 'cta',
-                  display: 'rounded',
-                  onClick: function onClick() {
-                    _this.applyFilters();
-                    // this.toggleFiltersMenu(false);
-                  }
-                },
-                'Apply'
-              )
-            )
-          )
-        )
-      );
-    };
-
+              onCalendarOpen: function onCalendarOpen() {
+                _this.onSelection(groupItem, option);
+              }
+            });
+          } else {
+            return /*#__PURE__*/_react["default"].createElement(_tag["default"], {
+              key: option.field,
+              theme: _this.props.theme,
+              className: 'chip-button ' + _this.highlightSelectedFilters(groupItem, option),
+              onClick: function onClick() {
+                // first range picker false then
+                _this.setState({
+                  isRangePickerVisible: false
+                }, function () {
+                  _this.onSelection(groupItem, option);
+                });
+              }
+            }, option.title);
+          }
+        })));
+      }) : null, /*#__PURE__*/_react["default"].createElement("div", {
+        style: {
+          margin: '15px 0px 0px',
+          textAlign: 'center',
+          display: 'flex'
+        }
+      }, /*#__PURE__*/_react["default"].createElement(ResetBtn, {
+        theme: _this.props.theme,
+        appearance: "cta",
+        onClick: function onClick() {
+          // this.toggleFiltersMenu(false);
+          _this.applyFilters('reset');
+          // this.changeFilters('reset', null);
+        }
+      }, "Reset"), /*#__PURE__*/_react["default"].createElement(ApplyBtn, {
+        theme: _this.props.theme,
+        id: "apply-btn",
+        appearance: "cta",
+        display: "rounded",
+        onClick: function onClick() {
+          _this.applyFilters();
+          // this.toggleFiltersMenu(false);
+        }
+      }, "Apply")))));
+    });
     _this.state = {
       isMenuOpen: false,
       selectedFiltersObj: props.selectedFilters ? props.selectedFilters : null,
       selectedFiltersFor: null,
-      isSelectRangeSelected: false, // this is based on max_days
+      isSelectRangeSelected: false,
+      // this is based on max_days
       selectedUserIds: [],
       showDropDownOptions: false,
       autoSelectIndex: -1
     };
-    _this._userFilter = _react2.default.createRef();
-    _this._userFilterInput = _react2.default.createRef();
+    _this._userFilter = /*#__PURE__*/_react["default"].createRef();
+    _this._userFilterInput = /*#__PURE__*/_react["default"].createRef();
     return _this;
   }
-
-  /**
-   * This function handle the onChange event in the filter.
-   * @param {Object} groupItem GUI elements for the particular section
-   * @param {Object} optionItem the item from the options of that section
-   */
-
-
-  /**
-   * This function performs action based on forAction on filters object
-   * @param {String} forAction action performed on the filter object
-   * @param {Object} filters Object containing current filters selected values
-   */
-
-
-  /**
-   * This function hadles the onchange event for search input field inside filter
-   * @param {string} query Input Filed value
-   * @param {string} permission Type of dashboard
-   */
-
-
-  _createClass(Filter, [{
-    key: 'onKeyDown',
-
-
+  (0, _inherits2["default"])(Filter, _Component);
+  return (0, _createClass2["default"])(Filter, [{
+    key: "onKeyDown",
+    value:
     /**
      * This function handles the keypress traverse over the dropdown option list
      * @param {Object} e the event object that is fired
      * @param {Object} groupItem Object containing groupitem details
      */
-    value: function onKeyDown(e, groupItem) {
+    function onKeyDown(e, groupItem) {
       var autoSelectIndex = this.state.autoSelectIndex;
       var userIdsList = this.props.userIdsList;
-
-
       if (userIdsList.length) {
         switch (e.keyCode) {
           case 13:
@@ -833,68 +690,27 @@ var Filter = function (_Component) {
         }
       }
     }
-
-    // to highlight selected filters
-
-
-    // this to render filter label based on selectedFiltersObj
-
-
-    /**
-     * This function toggle filters menu - show & hide.
-     * @param {boolean} flag contains value true/false to show/ hide filter.
-     */
-
   }, {
-    key: 'componentDidMount',
+    key: "componentDidMount",
     value: function componentDidMount() {
       document.body.addEventListener('click', this.toggleDropDown);
     }
-
-    /**
-     * This function hides the dropdown list when user clicks outside the area of input box
-     * @param {Object} e click event that gets fired.
-     */
-
-
-    /**
-     * This function applies the selected filter based on forData.
-     * @param {string} forData action that needs to be performed on the filter.
-     */
-
-
-    /**
-     * This function takes the current user object from the dropdown list and checks if it is pre-selected.
-     * @param {Objec} user object that contains details for the user
-     * @returns the name of class with active state or not.
-     */
-
-
-    /**
-     * This function reset userIds in the filter.
-     */
-
   }]);
-
-  return Filter;
 }(_react.Component);
-
 Filter.propTypes = {
-  theme: _propTypes2.default.oneOf(['light', 'dark', 'nexc']),
-  applyFilters: _propTypes2.default.func,
-  refreshDashboard: _propTypes2.default.func,
-  tableLoadingActionFunc: _propTypes2.default.func,
-  initialFilters: _propTypes2.default.instanceOf(Object),
-  selectedFilters: _propTypes2.default.instanceOf(Object),
-  filtersStructure: _propTypes2.default.instanceOf(Object),
-  filterMessage: _propTypes2.default.string,
-  width: _propTypes2.default.string,
-  showSelectedFiltersAsChip: _propTypes2.default.bool
+  theme: _propTypes["default"].oneOf(['light', 'dark', 'nexc']),
+  applyFilters: _propTypes["default"].func,
+  refreshDashboard: _propTypes["default"].func,
+  tableLoadingActionFunc: _propTypes["default"].func,
+  initialFilters: _propTypes["default"].instanceOf(Object),
+  selectedFilters: _propTypes["default"].instanceOf(Object),
+  filtersStructure: _propTypes["default"].instanceOf(Object),
+  filterMessage: _propTypes["default"].string,
+  width: _propTypes["default"].string,
+  showSelectedFiltersAsChip: _propTypes["default"].bool
 };
-
 Filter.defaultProps = {
   width: '360px',
   theme: 'dark'
 };
-
-exports.default = Filter;
+var _default = exports["default"] = Filter;