sag_components 2.0.0-beta98 → 2.0.0-beta99

package/dist/index.d.ts

@@ -1430,4 +1430,6 @@ declare function Execute({ width, height, fill }: {
 
 declare function Table(props: any): react_jsx_runtime.JSX.Element;
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, Heatmap, IconButton, Input, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, ModalWithOverlay, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, Table, ToggleSwitch, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
+declare function SearchInput(props: any): react_jsx_runtime.JSX.Element;
+
+export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, Heatmap, IconButton, Input, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, ModalWithOverlay, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SearchInput, SingleBarLineCharts, TabMenu, Table, ToggleSwitch, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };

package/dist/index.esm.js

@@ -61,7 +61,7 @@ const Label$8 = styled.label`
   pointer-events: none;
   user-select: none;
 `;
-const IconWrapper$3 = styled.div`
+const IconWrapper$4 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -321,20 +321,23 @@ const ReselectIcon = ({
   fill: color
 }));
 
-const SearchIcon = ({
-  width = '13',
-  height = '13',
-  color = '#212121'
-}) => /*#__PURE__*/React$1.createElement("svg", {
-  width: width,
-  height: height,
-  viewBox: "0 0 13 13",
-  fill: "none",
-  xmlns: "http://www.w3.org/2000/svg"
-}, /*#__PURE__*/React$1.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$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 13 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.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',
@@ -418,7 +421,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$1.createElement(IconWrapper$3, null, /*#__PURE__*/React$1.createElement(IconComponent, iconProps));
+    return /*#__PURE__*/React$1.createElement(IconWrapper$4, null, /*#__PURE__*/React$1.createElement(IconComponent, iconProps));
   };
   const commonProps = {
     width: width || null,
@@ -2901,7 +2904,7 @@ const Label$7 = styled.label`
   user-select: none;   
   pointer-events: none;
 `;
-const IconWrapper$2 = styled.div`
+const IconWrapper$3 = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
@@ -3025,7 +3028,7 @@ const LinkButton = _ref => {
     const color = disabled ? '#B1B1B1' : newTextColor;
     switch (icon.toLowerCase()) {
       case 'filter':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "FilterIcon"
         }, /*#__PURE__*/React$1.createElement(FilterIcon, {
           height: iconHeight,
@@ -3033,7 +3036,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'plus':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "PlusIcon"
         }, /*#__PURE__*/React$1.createElement(PlusIcon, {
           height: iconHeight,
@@ -3041,7 +3044,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'options':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "OptionsIcon"
         }, /*#__PURE__*/React$1.createElement(OptionsIcon, {
           height: iconHeight,
@@ -3049,7 +3052,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'download':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "DownloadIcon"
         }, /*#__PURE__*/React$1.createElement(DownloadIcon, {
           height: iconHeight,
@@ -3057,7 +3060,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'document':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "DocumentIcon"
         }, /*#__PURE__*/React$1.createElement(DocumentIcon, {
           height: iconHeight,
@@ -3065,7 +3068,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'fly':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "FlyIcon"
         }, /*#__PURE__*/React$1.createElement(FlyIcon, {
           height: iconHeight,
@@ -3073,7 +3076,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'bell':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "BellIcon"
         }, /*#__PURE__*/React$1.createElement(BellIcon, {
           height: iconHeight,
@@ -3081,7 +3084,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'maintenance':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "MaintenanceIcon"
         }, /*#__PURE__*/React$1.createElement(MaintenanceIcon, {
           height: iconHeight,
@@ -3089,7 +3092,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'exit':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "ExitIcon"
         }, /*#__PURE__*/React$1.createElement(ExitIcon, {
           height: iconHeight,
@@ -3097,7 +3100,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'eye':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "EyeIcon"
         }, /*#__PURE__*/React$1.createElement(EyeIcon, {
           height: iconHeight,
@@ -3105,7 +3108,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowdown':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "ArrowDownIcon"
         }, /*#__PURE__*/React$1.createElement(MenuItemOpenIcon, {
           height: iconHeight,
@@ -3113,7 +3116,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'arrowright':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "ArrowRightIcon"
         }, /*#__PURE__*/React$1.createElement(MenuItemRightIcon, {
           height: iconHeight,
@@ -3121,7 +3124,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'select':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "SelectRightIcon"
         }, /*#__PURE__*/React$1.createElement(ArrowSelectIcon, {
           height: "16px",
@@ -3129,7 +3132,7 @@ const LinkButton = _ref => {
           color: color
         }));
       case 'info':
-        return /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+        return /*#__PURE__*/React$1.createElement(IconWrapper$3, {
           className: "InfoIcon"
         }, /*#__PURE__*/React$1.createElement(InfoIcon, {
           height: iconHeight,
@@ -3418,13 +3421,14 @@ const LinnerDataBox = props => {
 const TextFieldContainer = styled.div`
     position: relative;
     width: ${props => props.width};
-    > svg {
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        left: 10px;
-    
-    }
+`;
+const IconWrapper$2 = styled.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.input`
   width: 100%;
@@ -3435,7 +3439,7 @@ const TextFieldInput = styled.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;
@@ -3447,10 +3451,12 @@ const TextFieldInput = styled.input`
 
 const SearchInput = props => {
   const {
-    placeholder,
+    placeholder = 'Search',
     onTyping,
-    width,
-    height,
+    width = '100%',
+    height = '40px',
+    position = 'left',
+    iconColor = '#212121',
     className
   } = props;
   const handleInputChange = e => {
@@ -3459,26 +3465,18 @@ const SearchInput = props => {
   return /*#__PURE__*/React$1.createElement(TextFieldContainer, {
     className: className,
     width: width
-  }, /*#__PURE__*/React$1.createElement(TextFieldInput, {
+  }, /*#__PURE__*/React$1.createElement(IconWrapper$2, {
+    position: position
+  }, /*#__PURE__*/React$1.createElement(SearchIcon, {
+    color: iconColor
+  })), /*#__PURE__*/React$1.createElement(TextFieldInput, {
     type: "search",
+    id: "search-input",
     height: height,
     placeholder: placeholder,
-    onChange: handleInputChange
-  }), /*#__PURE__*/React$1.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 = `
@@ -23871,22 +23869,21 @@ const DeleteIcon = styled.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] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -35097,7 +35094,6 @@ const InputSubContainer = styled.div`
 const StyledInput = styled.input`
   width: calc(100% - 10px);
   height: 20px;
-  font-family: Poppins;
   font-weight: 400;
   font-size: 14px;
   outline: none;  
@@ -35421,6 +35417,7 @@ const TableWrapper$1 = styled.div`
     padding: 20px;
     background-color: #fff;
     box-sizing: border-box;
+    position: relative;
 `;
 const Table$1 = styled.table`
     width: 100%;
@@ -35700,6 +35697,11 @@ const NoInfoFound = styled.div`
     color: #212121;
     position: relative;
 `;
+const TableTop = styled.div`
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+`;
 const Title = styled.h2`
     font-size: 24px;
     font-weight: 500;
@@ -35804,14 +35806,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$1.createElement(TableWrapper, {
     width: width,
     height: height
-  }, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(Title, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, "No Events"), /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven\u2019t created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let\u2019s get started and create your first one!"), /*#__PURE__*/React$1.createElement(Button$1, {
+  }, data.length === 0 ? /*#__PURE__*/React$1.createElement(NoInfoFound, null, /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, "No Events")), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
+    height: "45px",
+    leftIcon: "Plus",
+    text: "New Event",
+    borderRadius: "12px",
+    backgroundColor: sideButtonColor,
+    hoverBackgroundColor: sideButtonHoverColor,
+    onClick: onSideButtonClick
+  })), /*#__PURE__*/React$1.createElement(NoEventsWrapper, null, /*#__PURE__*/React$1.createElement(NoEvents, null)), /*#__PURE__*/React$1.createElement(NoEventsMessage, null, /*#__PURE__*/React$1.createElement("strong", null, "You haven\u2019t created any events yet"), /*#__PURE__*/React$1.createElement("br", null), "Let\u2019s get started and create your first one!"), /*#__PURE__*/React$1.createElement(Button$1, {
     height: "45px",
     leftIcon: "Plus",
     text: "New Event",
@@ -35819,8 +35834,16 @@ const Table = props => {
     backgroundColor: buttonColor,
     hoverBackgroundColor: buttonHoverColor,
     onClick: onButtonClick
-  })) : /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, data.length, " Events")));
+  })) : /*#__PURE__*/React$1.createElement(TableTop, null, /*#__PURE__*/React$1.createElement("div", null, /*#__PURE__*/React$1.createElement(Title, null, tableTitle), /*#__PURE__*/React$1.createElement(SubTitle, null, counter === 0 ? 'No' : counter, " Events")), showSideButton && /*#__PURE__*/React$1.createElement(Button$1, {
+    height: "45px",
+    leftIcon: "Plus",
+    text: "New Event",
+    borderRadius: "12px",
+    backgroundColor: sideButtonColor,
+    hoverBackgroundColor: sideButtonHoverColor,
+    onClick: onSideButtonClick
+  })));
 };
 
-export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, Heatmap, IconButton, Input, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, ModalWithOverlay, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SingleBarLineCharts, TabMenu, Table, ToggleSwitch, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
+export { AreaChart, BannerEventBoxList, BarChart, BarChartTwoRows, BarChartWithAreaChart, BarChartsByWeeks, BatteryChart, BreakdownPanel, BrushChart, BubbleChart, Build, Button$1 as Button, CollapseData, CollapseHeader, ContainerTable, DialogOverlay, DoubleBarSingleLine, DoublePanelDataRow, DownloadProgress, DropdownNew, EventDetailsCard, EventList, Execute, FilterPanel, Heatmap, IconButton, Input, InsightsCarousel, LinkButton, LinnerDataBox, MarketShareDescription, MenuRoute, ModalWithOverlay, OneColumnContainer, PerformanceAnalyticsLegend, PieChart, PopupCharts, QuickFilter, ReportTable, SearchInput, SingleBarLineCharts, TabMenu, Table, ToggleSwitch, TopToggleList, TotalDoughnutChart, TotalHorizontalCharts, Track, TwoBarCharts, WeeksPicker };
 //# sourceMappingURL=index.esm.js.map