sag_components 2.0.0-beta98 → 2.0.0-beta99

package/dist/index.js

@@ -71,7 +71,7 @@ const Label$8 = styled__default["default"].label`
   pointer-events: none;
   user-select: none;
 `;
-const IconWrapper$3 = styled__default["default"].div`
+const IconWrapper$4 = styled__default["default"].div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -331,20 +331,23 @@ const ReselectIcon = ({
   fill: color
 }));
 
-const SearchIcon = ({
-  width = '13',
-  height = '13',
-  color = '#212121'
-}) => /*#__PURE__*/React__default["default"].createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 13 13",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React__default["default"].createElement("path", {
-  d: "M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z",
-  fill: color
-}));
+const SearchIcon = _ref => {
+  let {
+    width = '13',
+    height = '13',
+    color = '#212121'
+  } = _ref;
+  return /*#__PURE__*/React__default["default"].createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 13 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React__default["default"].createElement("path", {
+    d: "M8.625 4.875C8.625 3.53906 7.89844 2.32031 6.75 1.64062C5.57812 0.960938 4.14844 0.960938 3 1.64062C1.82812 2.32031 1.125 3.53906 1.125 4.875C1.125 6.23438 1.82812 7.45312 3 8.13281C4.14844 8.8125 5.57812 8.8125 6.75 8.13281C7.89844 7.45312 8.625 6.23438 8.625 4.875ZM7.89844 8.71875C7.05469 9.375 6 9.75 4.875 9.75C2.17969 9.75 0 7.57031 0 4.875C0 2.20312 2.17969 0 4.875 0C7.54688 0 9.75 2.20312 9.75 4.875C9.75 6.02344 9.35156 7.07812 8.69531 7.92188L11.8359 11.0391C12.0469 11.2734 12.0469 11.625 11.8359 11.8359C11.6016 12.0703 11.25 12.0703 11.0391 11.8359L7.89844 8.71875Z",
+    fill: color
+  }));
+};
 
 const PlusIcon = ({
   width = '17',
@@ -428,7 +431,7 @@ const Button$1 = props => {
       width: "16px",
       color: disabled ? disabledTextColor || "#B1B1B1" : hover ? hoverTextColor || (type === "secondary" ? "#229E38" : "#ffffff") : textColor || (type === "secondary" ? "#212121" : "#ffffff")
     };
-    return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, null, /*#__PURE__*/React__default["default"].createElement(IconComponent, iconProps));
+    return /*#__PURE__*/React__default["default"].createElement(IconWrapper$4, null, /*#__PURE__*/React__default["default"].createElement(IconComponent, iconProps));
   };
   const commonProps = {
     width: width || null,
@@ -2911,7 +2914,7 @@ const Label$7 = styled__default["default"].label`
   user-select: none;   
   pointer-events: none;
 `;
-const IconWrapper$2 = styled__default["default"].div`
+const IconWrapper$3 = styled__default["default"].div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3035,7 +3038,7 @@ const LinkButton = _ref => {
     const color = disabled ? '#B1B1B1' : newTextColor;
     switch (icon.toLowerCase()) {
       case 'filter':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "FilterIcon"
         }, /*#__PURE__*/React__default["default"].createElement(FilterIcon, {
           height: iconHeight,
@@ -3043,7 +3046,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'plus':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "PlusIcon"
         }, /*#__PURE__*/React__default["default"].createElement(PlusIcon, {
           height: iconHeight,
@@ -3051,7 +3054,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'options':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "OptionsIcon"
         }, /*#__PURE__*/React__default["default"].createElement(OptionsIcon, {
           height: iconHeight,
@@ -3059,7 +3062,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'download':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "DownloadIcon"
         }, /*#__PURE__*/React__default["default"].createElement(DownloadIcon, {
           height: iconHeight,
@@ -3067,7 +3070,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'document':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "DocumentIcon"
         }, /*#__PURE__*/React__default["default"].createElement(DocumentIcon, {
           height: iconHeight,
@@ -3075,7 +3078,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'fly':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "FlyIcon"
         }, /*#__PURE__*/React__default["default"].createElement(FlyIcon, {
           height: iconHeight,
@@ -3083,7 +3086,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'bell':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "BellIcon"
         }, /*#__PURE__*/React__default["default"].createElement(BellIcon, {
           height: iconHeight,
@@ -3091,7 +3094,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'maintenance':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "MaintenanceIcon"
         }, /*#__PURE__*/React__default["default"].createElement(MaintenanceIcon, {
           height: iconHeight,
@@ -3099,7 +3102,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'exit':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "ExitIcon"
         }, /*#__PURE__*/React__default["default"].createElement(ExitIcon, {
           height: iconHeight,
@@ -3107,7 +3110,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'eye':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "EyeIcon"
         }, /*#__PURE__*/React__default["default"].createElement(EyeIcon, {
           height: iconHeight,
@@ -3115,7 +3118,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowdown':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "ArrowDownIcon"
         }, /*#__PURE__*/React__default["default"].createElement(MenuItemOpenIcon, {
           height: iconHeight,
@@ -3123,7 +3126,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowright':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "ArrowRightIcon"
         }, /*#__PURE__*/React__default["default"].createElement(MenuItemRightIcon, {
           height: iconHeight,
@@ -3131,7 +3134,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'select':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "SelectRightIcon"
         }, /*#__PURE__*/React__default["default"].createElement(ArrowSelectIcon, {
           height: "16px",
@@ -3139,7 +3142,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'info':
-        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+        return /*#__PURE__*/React__default["default"].createElement(IconWrapper$3, {
           className: "InfoIcon"
         }, /*#__PURE__*/React__default["default"].createElement(InfoIcon, {
           height: iconHeight,
@@ -3428,13 +3431,14 @@ const LinnerDataBox = props => {
 const TextFieldContainer = styled__default["default"].div`
     position: relative;
     width: ${props => props.width};
-    > svg {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 10px;
-    
-    }
+`;
+const IconWrapper$2 = styled__default["default"].div`
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: ${props => props.position === 'left' ? '10px' : 'unset'};
+  right: ${props => props.position === 'right' ? '10px' : 'unset'};
+  cursor: pointer;
 `;
 const TextFieldInput = styled__default["default"].input`
   width: 100%;
@@ -3445,7 +3449,7 @@ const TextFieldInput = styled__default["default"].input`
   border-radius: 8px;
   border: 1px solid #B1B1B1;
   background: transparent;
-  text-indent: 14px;
+  text-indent: ${props => props.position === 'left' ? '14px' : '0'};
   &:hover, 
   &:focus {
     border: 1px solid #212121;
@@ -3457,10 +3461,12 @@ const TextFieldInput = styled__default["default"].input`
 
 const SearchInput = props => {
   const {
-    placeholder,
+    placeholder = 'Search',
     onTyping,
-    width,
-    height,
+    width = '100%',
+    height = '40px',
+    position = 'left',
+    iconColor = '#212121',
     className
   } = props;
   const handleInputChange = e => {
@@ -3469,26 +3475,18 @@ const SearchInput = props => {
   return /*#__PURE__*/React__default["default"].createElement(TextFieldContainer, {
     className: className,
     width: width
-  }, /*#__PURE__*/React__default["default"].createElement(TextFieldInput, {
+  }, /*#__PURE__*/React__default["default"].createElement(IconWrapper$2, {
+    position: position
+  }, /*#__PURE__*/React__default["default"].createElement(SearchIcon, {
+    color: iconColor
+  })), /*#__PURE__*/React__default["default"].createElement(TextFieldInput, {
     type: "search",
+    id: "search-input",
     height: height,
     placeholder: placeholder,
-    onChange: handleInputChange
-  }), /*#__PURE__*/React__default["default"].createElement(SearchIcon, null));
-};
-SearchInput.propTypes = {
-  placeholder: PropTypes.string,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  onTyping: PropTypes.func,
-  className: PropTypes.string
-};
-SearchInput.defaultProps = {
-  placeholder: 'Search',
-  width: '100%',
-  height: '40px',
-  onTyping: () => {},
-  className: ''
+    onChange: handleInputChange,
+    position: position
+  }));
 };
 
 const scrollableStyles$c = `
@@ -23881,22 +23879,21 @@ const DeleteIcon = styled__default["default"].div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = React$1.useState(false);
   const [showOptions, setShowOptions] = React$1.useState(false);
   const [inputValue, setInputValue] = React$1.useState("");
@@ -35107,7 +35104,6 @@ const InputSubContainer = styled__default["default"].div`
 const StyledInput = styled__default["default"].input`
   width: calc(100% - 10px);
   height: 20px;
-  font-family: Poppins;
   font-weight: 400;
   font-size: 14px;
   outline: none;  
@@ -35431,6 +35427,7 @@ const TableWrapper$1 = styled__default["default"].div`
     padding: 20px;
     background-color: #fff;
     box-sizing: border-box;
+    position: relative;
 `;
 const Table$1 = styled__default["default"].table`
     width: 100%;
@@ -35710,6 +35707,11 @@ const NoInfoFound = styled__default["default"].div`
     color: #212121;
     position: relative;
 `;
+const TableTop = styled__default["default"].div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
 const Title = styled__default["default"].h2`
     font-size: 24px;
     font-weight: 500;
@@ -35814,14 +35816,27 @@ const Table = props => {
     height = 'auto',
     tableTitle = 'All Events',
     data = [],
+    counter = 0,
     onButtonClick = () => {},
     buttonColor = '#066768',
-    buttonHoverColor = '#388586'
+    buttonHoverColor = '#388586',
+    showSideButton = true,
+    onSideButtonClick = () => {},
+    sideButtonColor = '#066768',
+    sideButtonHoverColor = '#388586'
   } = props;
   return /*#__PURE__*/React__default["default"].createElement(TableWrapper, {
     width: width,
     height: height
-  }, data.length === 0 ? /*#__PURE__*/React__default["default"].createElement(NoInfoFound, null, /*#__PURE__*/React__default["default"].createElement(Title, null, tableTitle), /*#__PURE__*/React__default["default"].createElement(SubTitle, null, "No Events"), /*#__PURE__*/React__default["default"].createElement(NoEventsWrapper, null, /*#__PURE__*/React__default["default"].createElement(NoEvents, null)), /*#__PURE__*/React__default["default"].createElement(NoEventsMessage, null, /*#__PURE__*/React__default["default"].createElement("strong", null, "You haven\u2019t created any events yet"), /*#__PURE__*/React__default["default"].createElement("br", null), "Let\u2019s get started and create your first one!"), /*#__PURE__*/React__default["default"].createElement(Button$1, {
+  }, data.length === 0 ? /*#__PURE__*/React__default["default"].createElement(NoInfoFound, null, /*#__PURE__*/React__default["default"].createElement(TableTop, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Title, null, tableTitle), /*#__PURE__*/React__default["default"].createElement(SubTitle, null, "No Events")), showSideButton && /*#__PURE__*/React__default["default"].createElement(Button$1, {
+    height: "45px",
+    leftIcon: "Plus",
+    text: "New Event",
+    borderRadius: "12px",
+    backgroundColor: sideButtonColor,
+    hoverBackgroundColor: sideButtonHoverColor,
+    onClick: onSideButtonClick
+  })), /*#__PURE__*/React__default["default"].createElement(NoEventsWrapper, null, /*#__PURE__*/React__default["default"].createElement(NoEvents, null)), /*#__PURE__*/React__default["default"].createElement(NoEventsMessage, null, /*#__PURE__*/React__default["default"].createElement("strong", null, "You haven\u2019t created any events yet"), /*#__PURE__*/React__default["default"].createElement("br", null), "Let\u2019s get started and create your first one!"), /*#__PURE__*/React__default["default"].createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
     text: "New Event",
@@ -35829,7 +35844,15 @@ const Table = props => {
     backgroundColor: buttonColor,
     hoverBackgroundColor: buttonHoverColor,
     onClick: onButtonClick
-  })) : /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Title, null, tableTitle), /*#__PURE__*/React__default["default"].createElement(SubTitle, null, data.length, " Events")));
+  })) : /*#__PURE__*/React__default["default"].createElement(TableTop, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(Title, null, tableTitle), /*#__PURE__*/React__default["default"].createElement(SubTitle, null, counter === 0 ? 'No' : counter, " Events")), showSideButton && /*#__PURE__*/React__default["default"].createElement(Button$1, {
+    height: "45px",
+    leftIcon: "Plus",
+    text: "New Event",
+    borderRadius: "12px",
+    backgroundColor: sideButtonColor,
+    hoverBackgroundColor: sideButtonHoverColor,
+    onClick: onSideButtonClick
+  })));
 };
 
 exports.AreaChart = AreaChart;
@@ -35871,6 +35894,7 @@ exports.PieChart = PieChart;
 exports.PopupCharts = PopupCharts;
 exports.QuickFilter = QuickFilter;
 exports.ReportTable = ReportTable;
+exports.SearchInput = SearchInput;
 exports.SingleBarLineCharts = SingleBarLineCharts;
 exports.TabMenu = TabMenu;
 exports.Table = Table;