sag_components 1.0.643 → 1.0.645

package/dist/stories/CampaignTool/Card.stories.js

@@ -85,7 +85,6 @@ var _default = exports.default = {
     // },
   }
 };
-
 const Template = args => /*#__PURE__*/_react.default.createElement(_Card.default, args);
 const SingleCard = exports.SingleCard = Template.bind({});
 _Card.default.args = {

package/dist/stories/components/BarChartsByWeeks.js

@@ -11,6 +11,8 @@ var _recharts = require("recharts");
 var _CommonFunctions = require("./CommonFunctions");
 var _BarChartsByWeeks = require("./BarChartsByWeeks.style");
 var _PerformanceAnalyticsLegend = _interopRequireDefault(require("./PerformanceAnalyticsLegend"));
+/* eslint-disable no-nested-ternary */
+
 const ICON_TYPE_SQUARE = 'Square';
 const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
 
@@ -18,8 +20,8 @@ const ICON_TYPE_LEGEND_LINE_ICON = 'LegendLineIcon';
 const BarChartsByWeeks = props => {
   const {
     title,
-    lineChartData,
     barChartData,
+    isTitleOriganal,
     width,
     height,
     barChartColor,
@@ -75,7 +77,7 @@ const BarChartsByWeeks = props => {
       var _item$title;
       return {
         ...item,
-        titleWeek: item.title && ((_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.toString().length) === 6 ? item.title.toString().substring(4, 6) : 0
+        titleWeek: item.title && isTitleOriganal ? item.title : ((_item$title = item.title) === null || _item$title === void 0 ? void 0 : _item$title.toString().length) === 6 ? item.title.toString().substring(4, 6) : 0
       };
     });
     return newFormattedData;
@@ -112,24 +114,10 @@ const BarChartsByWeeks = props => {
     id: "ResponsiveContainer",
     width: "100%",
     height: showLegend ? '80%' : '86%'
-  }, /*#__PURE__*/_react.default.createElement(_recharts.LineChart, {
-    data: [],
-    margin: {
-      top: 20,
-      right: 90,
-      left: 90,
-      bottom: 10
-    }
-  }, /*#__PURE__*/_react.default.createElement(_recharts.Line, {
-    type: "monotone",
-    dataKey: "existingShoppersPercentValue",
-    fill: "38ACFF",
-    name: "existingShopper",
-    stroke: "38ACFF"
-  })), /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
+  }, /*#__PURE__*/_react.default.createElement(_recharts.BarChart, {
     width: BarChartContainerWidth,
     height: BarChartContainerHeight,
-    data: lineChartData,
+    data: barChartData,
     margin: {
       top: 20,
       right: 0,
@@ -171,22 +159,6 @@ exports.BarChartsByWeeks = BarChartsByWeeks;
 var _default = exports.default = BarChartsByWeeks;
 BarChartsByWeeks.defaultProps = {
   title: 'String',
-  lineChartData: [{
-    title: '202320',
-    value: 6
-  }, {
-    title: '202321',
-    value: 15.2
-  }, {
-    title: '202322',
-    value: 40
-  }, {
-    title: '202323',
-    value: 39
-  }, {
-    title: '202324',
-    value: 17
-  }],
   barChartData: [{
     title: '202320',
     value: 542366
@@ -238,6 +210,7 @@ BarChartsByWeeks.defaultProps = {
   isPercentValue: false,
   interval: 'preserveEnd',
   showLegend: true,
+  isTitleOriganal: false,
   legendData: [{
     title: 'Sales',
     iconType: ICON_TYPE_SQUARE,

package/dist/stories/components/Datepicker.js

@@ -55,7 +55,6 @@ const Datepicker = _ref => {
           width
           // color: labelColor,
         },
-
         '& .MuiOutlinedInput-root': {
           borderRadius: '12px',
           fontFamily: 'Poppins',
@@ -75,18 +74,15 @@ const Datepicker = _ref => {
             borderColor: '#E7E7E7'
             // color: labelColor,
           },
-
           '&:hover .MuiOutlinedInput-notchedOutline': {
             borderColor: disabled ? '#E7E7E7' : labelColor //  "#757575",
             // color: labelColor,
           },
-
           '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
             borderColor: disabled ? '#E7E7E7' : labelColor
             // color: labelColor,
           }
         },
-
         '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
           // Default transform is "translate(14px, 20px) scale(1)""
           // This lines up the label with the initial cursor position in the input

package/dist/stories/components/DropdownMulti.js

@@ -86,7 +86,6 @@ const DropdownMulti = props => {
           //   marginRight: '10px',
           // },
         },
-
         '& .MuiAutocomplete-inputRoot': {
           paddingLeft: '10px !important',
           borderRadius: '12px',
@@ -234,7 +233,6 @@ const DropdownMulti = props => {
         //     </>
         //   ),
       },
-
       onKeyDown: event => {
         if (!isInputAllowed(event.key)) {
           event.preventDefault();

package/dist/stories/components/MonthPopupPicker.js

@@ -123,7 +123,6 @@ const MonthPopupPicker = _ref => {
       // return null;
     })));
   };
-
   return /*#__PURE__*/_react.default.createElement(DatePickerContainer, null, isOpen && renderDatePicker());
 };
 var _default = exports.default = MonthPopupPicker;

package/dist/stories/components/PopupCharts.js

@@ -96,7 +96,6 @@ const PopupCharts = props => {
     width: "100%",
     xselectedColor: rowsData === null || rowsData === void 0 ? void 0 : rowsData.xselectedColor // "#C7E7CD"
   });
-
   const displayTotalHorizontalCharts = rowsData => /*#__PURE__*/_react.default.createElement(_TotalHorizontalCharts.TotalHorizontalCharts, {
     currencySign: true,
     dotCut: true,

package/dist/stories/components/QuarterPopupPicker.js

@@ -15,6 +15,7 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _temp
 /* eslint-disable react/prop-types */
 // import ChervronRightIcon from './icons/ChervronRightIcon';
 // import ChervronLeftIcon from './icons/ChervronLeftIcon';
+
 // Styled components for the date picker
 const DatePickerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
 const DatePickerPopup = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: auto;\n  margin: 5px;\n  height: 120px;\n  top: calc(100% + 5px);\n  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);\n  left: 0;\n  background-color: #fff;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n  padding: 10px;\n  z-index: 1000;\n"])));

package/dist/stories/components/ReportTable.js

@@ -9,6 +9,8 @@ exports.default = exports.ReportTable = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _ArrowSelectIcon = _interopRequireDefault(require("./icons/ArrowSelectIcon"));
 var _Duplicate = _interopRequireDefault(require("./icons/Duplicate"));
+var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
+var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
 var _ReportTable = require("./ReportTable.style");
 var _InfoIcon = require("./icons/InfoIcon");
 /* eslint-disable import/no-unresolved */
@@ -23,95 +25,183 @@ const ReportTable = props => {
     disableInfo,
     selectTextColor,
     onSelectRowClick,
+    onCheckRowClick,
     buttonText,
-    buttonIconName
+    buttonIconName,
+    useCheckBoxes
   } = props;
   const [FormattedTableData, setFormattedTableData] = (0, _react.useState)(tableData);
   (0, _react.useEffect)(() => {
+    var _newTableData$columns, _tableData$columnsHea, _newTableData$columns2, _tableData$rowsValues;
     if (!tableData || !tableData.columnsHeadings || !tableData.rowsValues) {
       return;
     }
-    if (!useSelectButtons) {
-      var _tableData$columnsHea;
-      // do not use select Buttons - remove the "button" from table data
-      const newTableData = {
-        columnsHeadings: [],
-        rowsValues: []
-      };
-      tableData === null || tableData === void 0 ? void 0 : (_tableData$columnsHea = tableData.columnsHeadings) === null || _tableData$columnsHea === void 0 ? void 0 : _tableData$columnsHea.forEach(item => {
-        newTableData.columnsHeadings.push(item);
-      });
-      tableData.rowsValues.forEach(item => {
-        newTableData.rowsValues.push(item);
+    const newTableData = {
+      columnsHeadings: [],
+      rowsValues: []
+    };
+
+    // column heading - checkbox
+    if (useCheckBoxes && !((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === 'checkbox' && item.key === 'checkbox'))) {
+      newTableData.columnsHeadings.push({
+        label: 'checkbox',
+        key: 'checkbox'
       });
-      setFormattedTableData(newTableData);
-      return;
     }
-    if (useSelectButtons) {
-      var _tableData$columnsHea2, _newTableData$columns, _tableData$rowsValues;
-      // use select Buttons - add a "button" to table data
 
-      const newTableData = {
-        columnsHeadings: [],
-        rowsValues: []
-      };
+    // columnsHeadings - regular columns
+    tableData === null || tableData === void 0 ? void 0 : (_tableData$columnsHea = tableData.columnsHeadings) === null || _tableData$columnsHea === void 0 ? void 0 : _tableData$columnsHea.forEach(item => {
+      newTableData.columnsHeadings.push(item);
+    });
 
-      // columnsHeadings
-      tableData === null || tableData === void 0 ? void 0 : (_tableData$columnsHea2 = tableData.columnsHeadings) === null || _tableData$columnsHea2 === void 0 ? void 0 : _tableData$columnsHea2.forEach(item => {
-        newTableData.columnsHeadings.push(item);
+    // column heading - select button
+    if (useSelectButtons && !((_newTableData$columns2 = newTableData.columnsHeadings) !== null && _newTableData$columns2 !== void 0 && _newTableData$columns2.some(item => item.label === 'button' && item.key === 'button'))) {
+      newTableData.columnsHeadings.push({
+        label: 'button',
+        key: 'button'
       });
-      if (!((_newTableData$columns = newTableData.columnsHeadings) !== null && _newTableData$columns !== void 0 && _newTableData$columns.some(item => item.label === 'button' && item.key === 'button'))) {
-        newTableData.columnsHeadings.push({
-          label: 'button',
-          key: 'button'
-        });
-      }
-
-      // rowsValues
-      const newRowValues = (_tableData$rowsValues = tableData.rowsValues) === null || _tableData$rowsValues === void 0 ? void 0 : _tableData$rowsValues.map((item, index) => useSelectButtons ? {
-        ...item,
-        button: 'button',
-        rowIndex: index
-      } : item);
-      newTableData.rowsValues = newRowValues;
-      setFormattedTableData(newTableData);
     }
-  }, [tableData, useSelectButtons]);
+
+    // rowsValues
+    const newRowValues = (_tableData$rowsValues = tableData.rowsValues) === null || _tableData$rowsValues === void 0 ? void 0 : _tableData$rowsValues.map(item => useCheckBoxes ? {
+      checkbox: 'checkbox',
+      ...item
+    } : item);
+    const newRowValuesStep2 = newRowValues === null || newRowValues === void 0 ? void 0 : newRowValues.map(item => useSelectButtons ? {
+      ...item,
+      button: 'button'
+    } : item);
+    const newRowValuesStep3 = newRowValuesStep2 === null || newRowValuesStep2 === void 0 ? void 0 : newRowValuesStep2.map(item => useCheckBoxes ? {
+      ...item,
+      checkboxState: false
+    } : item);
+    const newRowValuesStep4 = newRowValuesStep3 === null || newRowValuesStep3 === void 0 ? void 0 : newRowValuesStep3.map((item, index) => ({
+      ...item,
+      index
+    }));
+    newTableData.rowsValues = newRowValuesStep4;
+    setFormattedTableData(newTableData);
+  }, [tableData, useSelectButtons, useCheckBoxes]);
   const columnsNumber = tableData.columnsHeadings.length;
   const tableWidthSize = 100 / (useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber) * (useSelectButtons ? columnsNumber + 1 : columnsNumber);
-  const handleRowClick = row => {
+  const handleSelectButtonRowClick = row => {
     const {
-      button: propToRemove,
+      checkbox: propToRemove,
       ...rest
     } = row;
-    onSelectRowClick(rest);
+    const {
+      button: propToRemove2,
+      ...rest2
+    } = rest;
+    const {
+      checkboxState: propToRemove3,
+      ...rest3
+    } = rest2;
+    onSelectRowClick(rest3);
+  };
+  const handleRowCheckBoxClick = row => {
+    var _FormattedTableData$r;
+    if (!row) return;
+    const updatedRow = {
+      ...row,
+      checkboxState: !(row !== null && row !== void 0 && row.checkboxState)
+    };
+    const updatedTableRowsData = FormattedTableData === null || FormattedTableData === void 0 ? void 0 : (_FormattedTableData$r = FormattedTableData.rowsValues) === null || _FormattedTableData$r === void 0 ? void 0 : _FormattedTableData$r.map(item => item.index === row.index ? updatedRow : item);
+    setFormattedTableData({
+      ...FormattedTableData,
+      rowsValues: updatedTableRowsData
+    });
+    const {
+      checkbox: propToRemove,
+      ...rest
+    } = updatedRow;
+    const {
+      button: propToRemove2,
+      ...rest2
+    } = rest;
+    onCheckRowClick(rest2);
   };
   const displaySelectButton = rowData => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonContainer, {
-    id: "SelectButtonContainer"
+    className: "SelectButtonContainer"
   }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectButtonSubContainer, {
-    id: "SelectButtonSubContainer",
+    className: "SelectButtonSubContainer",
     selectTextColor: selectTextColor,
-    onClick: () => handleRowClick(rowData)
+    onClick: () => handleSelectButtonRowClick(rowData)
   }, buttonText || 'Select', ' ', buttonIconName === 'duplicate' ? /*#__PURE__*/_react.default.createElement(_Duplicate.default, {
     color: selectTextColor
   }) : /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
-    id: "ArrowSelectIcon"
+    className: "ArrowSelectIcon"
+  })));
+  const displayCheckBox = rowData => /*#__PURE__*/_react.default.createElement(_ReportTable.SelectCheckboxContainer, {
+    className: "SelectCheckboxContainer"
+  }, /*#__PURE__*/_react.default.createElement(_ReportTable.SelectCheckboxSubContainer, {
+    className: "SelectCheckboxSubContainer",
+    selectTextColor: selectTextColor,
+    onClick: () => handleRowCheckBoxClick(rowData)
+  }, rowData !== null && rowData !== void 0 && rowData.checkboxState ? /*#__PURE__*/_react.default.createElement(_CheckBoxCheckedIcon.CheckBoxCheckedIcon, {
+    className: "CheckBoxCheckedIcon",
+    width: "14px",
+    height: "14px",
+    color: selectTextColor
+  }) : /*#__PURE__*/_react.default.createElement(_CheckBoxNotCheckedIcon.CheckBoxNotCheckedIcon, {
+    className: "CheckBoxNotCheckedIcon",
+    width: "14px",
+    height: "14px",
+    color: "#212121"
   })));
+  const getMaxColnumber = () => {
+    let colNumber = maxColumnsNumber;
+    if (useSelectButtons) {
+      colNumber = +1;
+    }
+    if (useCheckBoxes) {
+      colNumber = +1;
+    }
+    return colNumber;
+  };
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_ReportTable.TableWrapper, {
-    maxColumnsNumber: useSelectButtons ? maxColumnsNumber + 1 : maxColumnsNumber,
+    maxColumnsNumber: getMaxColnumber(),
     columnsNumber: columnsNumber
   }, /*#__PURE__*/_react.default.createElement(_ReportTable.Table, {
     tableWidthSize: tableWidthSize
-  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, FormattedTableData.columnsHeadings.map((headline, index) => headline.label === 'button' ? /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
+  }, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
+    className: "headerRow"
+  }, FormattedTableData.columnsHeadings.map((headline, index) => headline.label === 'button' || headline.label === 'checkbox' ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Th, {
     key: index
-  }) : /*#__PURE__*/_react.default.createElement(_ReportTable.Th, {
+  }) :
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Th, {
     key: index
-  }, headline.label)))), /*#__PURE__*/_react.default.createElement("tbody", null, FormattedTableData.rowsValues.map((rowData, index) => /*#__PURE__*/_react.default.createElement(_ReportTable.Tr, {
+  }, headline.label)))), /*#__PURE__*/_react.default.createElement("tbody", null, FormattedTableData.rowsValues.map((rowData, index) =>
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Tr, {
+    className: "row",
     key: index,
     useColorLinearGradient: useColorLinearGradient
-  }, Object.values(rowData).map((value, dataIndex) => value === 'button' ? /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
+  }, Object.values(rowData).map((value, dataIndex) =>
+  // eslint-disable-next-line no-nested-ternary
+  value === 'checkbox' ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Td, {
+    className: "checkbox",
+    key: index
+  }, displayCheckBox(rowData)) : value === 'button' ?
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Td, {
+    className: "button",
     key: index
-  }, displaySelectButton(rowData)) : /*#__PURE__*/_react.default.createElement(_ReportTable.Td, {
+  }, displaySelectButton(rowData)) :
+  /*#__PURE__*/
+  // eslint-disable-next-line react/no-array-index-key
+  _react.default.createElement(_ReportTable.Td, {
+    className: "cell",
     key: dataIndex
   }, value))))))), !disableInfo ? /*#__PURE__*/_react.default.createElement(_ReportTable.InfoBlock, null, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
     color: "#1B30AA"
@@ -163,5 +253,7 @@ ReportTable.defaultProps = {
   useSelectButtons: false,
   disableInfo: false,
   selectTextColor: '#229E38',
-  onSelectRowClick: () => {}
+  onSelectRowClick: () => {},
+  onCheckRowClick: () => {},
+  useCheckBoxes: false
 };

package/dist/stories/components/ReportTable.style.js

@@ -4,10 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tr = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.SelectButtonSubContainer = exports.SelectButtonContainer = exports.InfoText = exports.InfoBlock = void 0;
+exports.Tr = exports.Th = exports.Td = exports.TableWrapper = exports.Table = exports.SelectCheckboxSubContainer = exports.SelectCheckboxContainer = exports.SelectButtonSubContainer = exports.SelectButtonContainer = exports.InfoText = exports.InfoBlock = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 const scrollableStyles = "\n  overflow-y: auto;\n\n  &::-webkit-scrollbar {\n    height: 10px;\n  }\n\n  &::-webkit-scrollbar-track {\n    background: #E8E8E8;\n    border-radius: 5px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background: #D0D0D0;\n    border-radius: 5px;\n  }\n";
 const TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  white-space: nowrap;\n  border: 1px solid #dddddd;\n  border-radius: ", ";\n  overflow-x: ", ";\n  ", "\n"])), props => props.columnsNumber > props.maxColumnsNumber ? ' 12px 12px 6px 6px' : '12px', props => props.columnsNumber > props.maxColumnsNumber ? 'auto' : 'hidden', scrollableStyles);
 const Table = exports.Table = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  width: ", ";\n  table-layout: fixed;\n  position: relative;\n  background-color: white;\n  border-collapse: collapse;\n  th,\n  td {\n    width: 100%;\n    text-align: left;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n"])), props => "".concat(props.tableWidthSize, "%"));
@@ -17,4 +17,6 @@ const Tr = exports.Tr = _styledComponents.default.tr(_templateObject5 || (_templ
 const InfoText = exports.InfoText = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 400;\n  font-size: 14px;\n  color: #212121;\n  padding-top: 20px;\n  padding-bottom: 20px;\n"])));
 const InfoBlock = exports.InfoBlock = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 8px;\n  background-color: white;\n"])));
 const SelectButtonContainer = exports.SelectButtonContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
-const SelectButtonSubContainer = exports.SelectButtonSubContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  padding: 2px 10px;\n  justify-content: flex-end;\n  gap: 8px;\n  color: ", ";\n  border-radius: 10px;\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n"])), props => props.selectTextColor);
+const SelectButtonSubContainer = exports.SelectButtonSubContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  padding: 2px 10px;\n  justify-content: flex-start;\n  gap: 8px;\n  color: ", ";\n  border-radius: 10px;\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n"])), props => props.selectTextColor);
+const SelectCheckboxContainer = exports.SelectCheckboxContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n"])));
+const SelectCheckboxSubContainer = exports.SelectCheckboxSubContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  font-size: 12px;\n  padding: 2px;\n  justify-content: flex-start;\n  gap: 8px;\n  color: ", ";\n  &:hover {\n    background-color: #f0f0f0;\n    cursor: pointer;\n  }\n"])), props => props.selectTextColor);

package/dist/stories/components/SagButton.js

@@ -31,7 +31,6 @@ const SagButton = props => {
       // Add any logic you want to execute after the transition is complete
     }, 300); // Adjust the transition duration (in milliseconds) as needed
   };
-
   return /*#__PURE__*/_react.default.createElement(_SagButton.ButtonContainer, {
     id: "ButtonContainer"
   }, /*#__PURE__*/_react.default.createElement(_SagButton.Button, {

package/dist/stories/components/Select.js

@@ -45,7 +45,6 @@ const Select = _ref => {
     setIsFocused(false);
     setTimeout(() => setShowOptions(false), 200); // Delay hiding options to allow clicking on them
   };
-
   const handleOptionClick = option => {
     onChange({
       target: {

package/dist/stories/components/TotalCostModal.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _Modal = _interopRequireDefault(require("./Modal"));
+var _CodeEditor = _interopRequireDefault(require("./CodeEditor"));
+var _TextField = _interopRequireDefault(require("./TextField"));
+var _Dropdown = _interopRequireDefault(require("./Dropdown"));
+var _reactHookForm = require("react-hook-form");
+var _Modal2 = require("./Modal.style");
+var TotalCostModal = function TotalCostModal(_ref) {
+  var title = _ref.title,
+    isModalOpen = _ref.isModalOpen,
+    setModalOpen = _ref.setModalOpen,
+    setResult = _ref.setResult;
+  var _useState = (0, _react.useState)([{
+      id: "title",
+      label: "Title",
+      type: "text"
+    }, {
+      id: "dotCut",
+      label: "Do Cut",
+      type: "select",
+      options: ["true", "false"]
+    }, {
+      id: "currency",
+      label: "Currency",
+      type: "select",
+      options: ["true", "false"]
+    }, {
+      id: "currencyType",
+      label: "Currency Type",
+      type: "select",
+      options: ["USD", "EUR", "ILS", "GBP", "JPY"]
+    }, {
+      id: "width",
+      label: "Width",
+      type: "text"
+    }, {
+      id: "height",
+      label: "Height",
+      type: "text"
+    }, {
+      id: "textColor",
+      label: "Text Color",
+      type: "text"
+    }, {
+      id: "noDataText",
+      label: "No Data Text",
+      type: "text"
+    }]),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    params = _useState2[0],
+    setParams = _useState2[1];
+  var _useState3 = (0, _react.useState)("Select PACKAGE_COST,REDEMPTION_COST,(PACKAGE_COST+REDEMPTION_COST) AS TOTAL_COST,from FACT_EVENT_MEASURES A INNER JOIN DIM_EVENTS B ON A.EVENT_CODE = B.EVENT_CODE"),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    code = _useState4[0],
+    setCode = _useState4[1];
+  var _useForm = (0, _reactHookForm.useForm)(),
+    register = _useForm.register,
+    handleSubmit = _useForm.handleSubmit,
+    watch = _useForm.watch,
+    control = _useForm.control,
+    errors = _useForm.formState.errors;
+  var onSubmit = function onSubmit(data) {
+    return setResult(data);
+  };
+  return /*#__PURE__*/_react.default.createElement("form", {
+    onSubmit: handleSubmit(onSubmit)
+  }, /*#__PURE__*/_react.default.createElement(_Modal.default, {
+    isOpen: isModalOpen,
+    onClose: function onClose() {
+      return setModalOpen(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement("h2", null, title), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      gap: "10px",
+      display: "grid"
+    }
+  }, /*#__PURE__*/_react.default.createElement(_CodeEditor.default, {
+    value: code,
+    onChange: setCode
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      gap: "10px",
+      display: "grid",
+      gridTemplateColumns: "auto auto auto"
+    }
+  }, params.map(function (item) {
+    if (item.type === "text") {
+      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        control: control,
+        name: item.id,
+        render: function render(_ref2) {
+          var field = _ref2.field;
+          return /*#__PURE__*/_react.default.createElement(_TextField.default, Object.assign({}, field, {
+            allowedInput: "all",
+            height: "100%",
+            label: item.label,
+            multiline: true,
+            placeHolder: "Type...",
+            shape: "round",
+            size: "small",
+            width: "300px"
+          }));
+        }
+      });
+    } else {
+      return /*#__PURE__*/_react.default.createElement(_reactHookForm.Controller, {
+        control: control,
+        name: item.id,
+        render: function render(_ref3) {
+          var field = _ref3.field;
+          return /*#__PURE__*/_react.default.createElement(_Dropdown.default, Object.assign({}, field, {
+            allowedInput: "all",
+            labelColor: "#1B30AA",
+            limitTagsOnMultiSelect: 0,
+            onInputChange: function onInputChange(e) {
+              var _e$inputValue;
+              console.log("e", e);
+              field.onChange((_e$inputValue = e === null || e === void 0 ? void 0 : e.inputValue) !== null && _e$inputValue !== void 0 ? _e$inputValue : "");
+            },
+            options: item.options,
+            placeHolder: "Type...",
+            shape: "round",
+            size: "small",
+            text: item.label,
+            width: "300px"
+          }));
+        }
+      });
+    }
+  }))), /*#__PURE__*/_react.default.createElement(_Modal2.SubmitButton, {
+    type: "submit"
+  })));
+};
+var _default = exports.default = TotalCostModal;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sag_components",
-  "version": "1.0.643",
+  "version": "1.0.645",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/.history/.env_20231001120613

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_YdAmQQKQ2B6ZngEijA0JiqNNUdJvP23G46NK7-fc

package/.history/.env_20231003143620

@@ -1 +0,0 @@
-STORYBOOK_FIGMA_ACCESS_TOKEN=figd_MOcc8-aS91XJ3mFdtNlH4oPVY73ChHlmw6-hKhsb

package/.history/.eslintrc_20230928112617.js

@@ -1,26 +0,0 @@
-module.exports = {
-  env: {
-    browser: true,
-    es2021: true,
-  },
-  extends: 'airbnb',
-  overrides: [
-    {
-      env: {
-        node: true,
-      },
-      files: [
-        '.eslintrc.{js,cjs}',
-      ],
-      parserOptions: {
-        sourceType: 'script',
-      },
-    },
-  ],
-  parserOptions: {
-    ecmaVersion: 'latest',
-    sourceType: 'module',
-  },
-  rules: {
-  },
-};