sag_components 1.0.448 → 1.0.449

package/dist/stories/CampaignTool/Popup.stories.js

@@ -0,0 +1,85 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExamplePopup = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Popup = _interopRequireDefault(require("../components/CampaignTool/Popup"));
+const accordionItemsData1 = [{
+  title: "Details",
+  content: "Content for Details"
+}, {
+  title: "Permissions",
+  content: "Content for Permissions"
+}, {
+  title: "Other",
+  content: "Content for Other"
+}];
+var _default = exports.default = {
+  title: "Campaign Tool/Popup",
+  component: _Popup.default,
+  tags: ["autodocs"],
+  argTypes: {
+    title: {
+      name: "title",
+      control: {
+        type: "text"
+      },
+      description: "title"
+    },
+    isPopupOpen: {
+      name: 'isPopupOpen',
+      control: {
+        type: 'boolean'
+      },
+      description: 'true/false - open or close popup'
+    },
+    width: {
+      name: "width",
+      control: {
+        type: "text"
+      },
+      description: "width of the form"
+    },
+    height: {
+      name: "height",
+      control: {
+        type: "text"
+      },
+      description: "height of the form"
+    },
+    accordionItemBackgroundColor: {
+      name: 'accordionItemBackgroundColor',
+      description: 'Sets the background color for accordion item',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    onSaveClick: {
+      name: "Click on save event",
+      action: "onClick",
+      description: "Click on save event"
+    },
+    onCancelClick: {
+      name: "Click on cancel event",
+      action: "onClick",
+      description: "Click on cancel event"
+    },
+    accordionItemsData: {
+      description: 'array [] of objects: {title: string, content } to fill the accordion items. '
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_Popup.default, args);
+const ExamplePopup = exports.ExamplePopup = Template.bind({});
+ExamplePopup.args = {
+  title: "Offer Details",
+  isPopupOpen: true,
+  accordionItemsData: accordionItemsData1,
+  width: "800px",
+  height: "600px",
+  accordionItemBackgroundColor: "#f4f6f7"
+};

package/dist/stories/CampaignTool/Table.stories.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExampleTable = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Table = require("../components/CampaignTool/Table");
+const theData = [{
+  key: '1',
+  name: 'oren',
+  age: 35
+}, {
+  key: '2',
+  name: 'dror',
+  age: 16
+}, {
+  key: '3',
+  name: 'andrey',
+  age: 22
+}, {
+  key: '4',
+  name: 'hai',
+  age: 46
+}];
+var _default = exports.default = {
+  title: 'Campaign Tool/Table',
+  component: _Table.Table,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      name: 'Width',
+      control: {
+        type: 'text'
+      },
+      description: 'Table width'
+    },
+    height: {
+      name: 'Height',
+      control: {
+        type: 'text'
+      },
+      description: 'Table height'
+    },
+    onCheckAllInput: {
+      name: 'Check all input event',
+      action: 'onClick',
+      description: 'Click on check all'
+    },
+    onSortClick: {
+      name: 'Table head sorting event',
+      action: 'onClick',
+      description: 'Click on table head sorting'
+    },
+    onRowClick: {
+      name: 'Click on row event',
+      action: 'onClick',
+      description: 'Click on a certain row in table'
+    },
+    onRowInputClick: {
+      name: 'Checkbox row event',
+      action: 'onClick',
+      description: 'Click on a certain row checkbox '
+    },
+    actionsColumn: {
+      name: 'Show action column',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide action column',
+      defaultValue: true
+    },
+    sizingTable: {
+      name: 'Sizing table columns',
+      control: {
+        type: 'boolean'
+      },
+      description: 'Sizing table columns ability',
+      defaultValue: true
+    },
+    showPagination: {
+      name: 'Show Pagination',
+      control: {
+        type: 'boolean'
+      },
+      description: 'hide/show pagination',
+      defaultValue: true
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_Table.Table, args);
+const ExampleTable = exports.ExampleTable = Template.bind({});
+ExampleTable.args = {
+  data: theData
+};

package/dist/stories/components/AutocompleteField.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _AutocompleteField = require("./AutocompleteField.style");
+const AutocompleteField = props => {
+  const {
+    choices,
+    onSelect
+  } = props;
+  const [inputValue, setInputValue] = (0, _react.useState)('');
+  const [isFocused, setFocused] = (0, _react.useState)(false);
+  const handleInputChange = e => {
+    setInputValue(e.target.value);
+  };
+  const handleOptionClick = option => {
+    onSelect(option);
+    setInputValue('');
+  };
+  return /*#__PURE__*/_react.default.createElement(_AutocompleteField.AutocompleteContainer, null, /*#__PURE__*/_react.default.createElement(_AutocompleteField.AutocompleteInput, {
+    type: "text",
+    value: inputValue,
+    onChange: handleInputChange,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false),
+    placeholder: " "
+  }), /*#__PURE__*/_react.default.createElement(_AutocompleteField.AutocompleteLabel, null, "Choose an option"), (isFocused || inputValue) && /*#__PURE__*/_react.default.createElement(_AutocompleteField.AutocompleteOptions, null, choices.filter(option => option.toLowerCase().includes(inputValue.toLowerCase())).map((option, index) => /*#__PURE__*/_react.default.createElement(_AutocompleteField.AutocompleteOption, {
+    key: index,
+    onClick: () => handleOptionClick(option)
+  }, option))));
+};
+var _default = exports.default = AutocompleteField;
+AutocompleteField.defaultProps = {
+  choices: ['Apple', 'Banana', 'Orange'],
+  onSelect: () => {}
+};

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

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AutocompleteOptions = exports.AutocompleteOption = exports.AutocompleteLabel = exports.AutocompleteInput = exports.AutocompleteContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+const AutocompleteContainer = exports.AutocompleteContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  position: relative;\n  margin: 20px;\n"])));
+const AutocompleteInput = exports.AutocompleteInput = _styledComponents.default.input(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  padding: 10px;\n  font-size: 16px;\n  border: 1px solid #ccc;\n  border-radius: 4px;\n\n  &:focus + label {\n    top: -10px;\n    font-size: 12px;\n    color: #007bff;\n  }\n"])));
+const AutocompleteLabel = exports.AutocompleteLabel = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  top: 12px;\n  left: 10px;\n  transition: .2s ease;\n  pointer-events: none;\n  font-size: 16px;\n  color: #555;\n  background-color: white;\n"])));
+const AutocompleteOptions = exports.AutocompleteOptions = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  width: 100%;\n  max-height: 150px;\n  overflow-y: auto;\n  border: 1px solid #ccc;\n  border-top: none;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  background-color: #fff;\n  z-index: 1;\n"])));
+const AutocompleteOption = exports.AutocompleteOption = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 10px;\n  cursor: pointer;\n  &:hover {\n    background-color: #f0f0f0;\n  }\n"])));

package/dist/stories/components/CampaignTool/Popup.js

@@ -0,0 +1,96 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _ComboBoxArrowDownIcon = require("../icons/ComboBoxArrowDownIcon");
+var _ComboBoxArrowUpIcon = require("../icons/ComboBoxArrowUpIcon");
+var _Popup = require("./Popup.style");
+const Popup = props => {
+  const {
+    title,
+    accordionItemsData,
+    isPopupOpen,
+    width,
+    height,
+    accordionItemBackgroundColor,
+    onSaveClick,
+    onCancelClick
+  } = props;
+  const [IsPopupOpen, setIsPopupOpen] = (0, _react.useState)(isPopupOpen);
+  (0, _react.useEffect)(() => {
+    setIsPopupOpen(isPopupOpen);
+  }, [isPopupOpen]);
+  const openPopup = () => {
+    setIsPopupOpen(true);
+  };
+  const closePopup = () => {
+    setIsPopupOpen(false);
+  };
+  const AccordionItem = _ref => {
+    let {
+      title,
+      content
+    } = _ref;
+    const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
+    const handleToggle = () => {
+      setIsItemOpen(!IsItemOpen);
+    };
+    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemMainContainer, null, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemContainer, {
+      id: "AccordionItemContainer",
+      accordionItemBackgroundColor: accordionItemBackgroundColor,
+      onClick: handleToggle,
+      style: {
+        cursor: "pointer"
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemTitle, {
+      id: "AccordionItemTitle"
+    }, title), /*#__PURE__*/_react.default.createElement(_Popup.AccordionItemIconContainer, {
+      id: "AccordionItemIconContainer"
+    }, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_ComboBoxArrowUpIcon.ComboBoxArrowUpIcon, null) : /*#__PURE__*/_react.default.createElement(_ComboBoxArrowDownIcon.ComboBoxArrowDownIcon, null))), IsItemOpen && /*#__PURE__*/_react.default.createElement(_Popup.AccordionContentContainer, {
+      id: "AccordionContentContainer"
+    }, content));
+  };
+  const Accordion = _ref2 => {
+    let {
+      items
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_Popup.AccordionContainer, {
+      id: "AccordionContainer"
+    }, items.map((item, index) => /*#__PURE__*/_react.default.createElement(AccordionItem, {
+      key: index,
+      title: item.title,
+      content: item.content
+    })));
+  };
+  return /*#__PURE__*/_react.default.createElement(_Popup.MainContainer, {
+    id: "MainContainer"
+  }, IsPopupOpen && /*#__PURE__*/_react.default.createElement(_Popup.ModalOverlay, {
+    id: "ModalOverlay",
+    className: "modal-overlay",
+    onClick: closePopup
+  }, /*#__PURE__*/_react.default.createElement(_Popup.ModalContent, {
+    id: "ModalContent",
+    className: "modal-content",
+    height: height,
+    width: width,
+    onClick: e => e.stopPropagation()
+  }, /*#__PURE__*/_react.default.createElement(_Popup.TitleContainer, null, /*#__PURE__*/_react.default.createElement(_Popup.Title, null, title), /*#__PURE__*/_react.default.createElement(_Popup.Close, {
+    id: "Close",
+    className: "close",
+    onClick: closePopup
+  }, "\xD7")), /*#__PURE__*/_react.default.createElement(Accordion, {
+    items: accordionItemsData
+  }))));
+};
+var _default = exports.default = Popup;
+Popup.defaultProps = {
+  isPopupOpen: true,
+  width: "800px",
+  height: "600px",
+  onSaveClick: () => {},
+  onCancelClick: () => {}
+};

package/dist/stories/components/CampaignTool/Popup.style.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleContainer = exports.Title = exports.ModalOverlay = exports.ModalContent = exports.MainContainer = exports.Close = exports.AccordionItemTitle = exports.AccordionItemMainContainer = exports.AccordionItemIconContainer = exports.AccordionItemContainer = exports.AccordionContentContainer = exports.AccordionContainer = 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, _templateObject10, _templateObject11, _templateObject12;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
+const ModalOverlay = exports.ModalOverlay = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+const ModalContent = exports.ModalContent = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  font-weight: 500;\n  font-size: 18px;\n  background-color: #fefefe;\n  padding: 20px;\n  border: 1px solid #888;\n  height: ", ";\n  width: ", ";\n  border-radius: 10px;\n  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.height, props => props.width);
+const Close = exports.Close = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: #aaa;\n  float: right;\n  font-size: 28px;\n  font-weight: bold;\n  cursor: pointer;\n\n  .close:hover,\n  .close:focus {\n    color: black;\n    text-decoration: none;\n  }\n"])));
+const TitleContainer = exports.TitleContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display:flex;  \n  justify-content: space-between;\n  align-items: center;\n  margin: 0;\n"])));
+const Title = exports.Title = _styledComponents.default.p(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 18px;\n  margin: 0;\n  \n"])));
+const AccordionContainer = exports.AccordionContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n"])));
+const AccordionItemMainContainer = exports.AccordionItemMainContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["  \n  margin: 0;\n  \n"])));
+const AccordionItemContainer = exports.AccordionItemContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)([" \n  display:flex;  \n  justify-content: space-between;\n  align-items: center;\n  margin: 10px;\n  background-color: ", ";\n"])), props => props.accordionItemBackgroundColor);
+const AccordionItemTitle = exports.AccordionItemTitle = _styledComponents.default.h3(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 600;\n  font-size: 16px;\n  line-height: 25px;\n  margin: 10px; \n"])));
+const AccordionItemIconContainer = exports.AccordionItemIconContainer = _styledComponents.default.h3(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n margin: 0 10px; \n"])));
+const AccordionContentContainer = exports.AccordionContentContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n  font-size: 14px;\n  margin: 10px 10px 10px 30px; \n  \n"])));

package/dist/stories/components/CampaignTool/Table.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Table = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Table = require("./Table.style");
+const Table = props => {
+  const {
+    data,
+    width,
+    height,
+    onCheckAllInput,
+    onSortClick,
+    onRowClick,
+    onRowInputClick,
+    onPaginationClick,
+    actionsColumn,
+    sizingTable,
+    showPagination
+  } = props;
+  const [sortBy, setSortBy] = (0, _react.useState)(null);
+  const [sortOrder, setSortOrder] = (0, _react.useState)('asc');
+  const [resizing, setResizing] = (0, _react.useState)(false);
+  const [resizeColumn, setResizeColumn] = (0, _react.useState)(null);
+  const checkedRef = (0, _react.useRef)([]);
+  const [checkEvent, setCheckEvent] = (0, _react.useState)({
+    isSelectAll: false,
+    selected: [],
+    unselected: []
+  });
+  const [arrow, setArrow] = (0, _react.useState)(null);
+  const handleSort = (event, columnName) => {
+    if (!event.target.classList.contains('dragger')) {
+      setSortBy(columnName);
+      setSortOrder(prevSortOrder => prevSortOrder === 'asc' ? 'desc' : 'asc');
+      setArrow(prevArrow => prevArrow === '⭣' ? '⭡' : '⭣');
+      onSortClick({
+        sortType: sortOrder,
+        column: columnName,
+        data: sortedData
+      });
+    }
+  };
+
+  // the Server do the sorting so this function used for displaying Action data
+  const sortedData = [...data].sort((a, b) => {
+    if (sortOrder === 'asc') {
+      return a[sortBy] > b[sortBy] ? 1 : -1;
+    }
+    return a[sortBy] < b[sortBy] ? 1 : -1;
+  });
+  const handleSelectAllChange = event => {
+    setCheckEvent({
+      isSelectAll: event.target.checked,
+      selected: [],
+      unselected: []
+    });
+    checkedRef.current.map(item => {
+      item.checked = event.target.checked;
+    });
+  };
+  const handleMouseDown = (e, columnName) => {
+    m_pos = e.clientX;
+    setResizing(true);
+    setResizeColumn(columnName);
+  };
+  const handleMouseMove = e => {
+    if (resizing) {
+      const th = document.querySelector("th[data-column=\"".concat(resizeColumn, "\"]"));
+      const dx = e.clientX - m_pos;
+      m_pos = e.clientX;
+      th.style.width = "".concat(parseInt(getComputedStyle(th, '').width) + dx, "px");
+    }
+  };
+  const handleMouseUp = () => {
+    setResizing(false);
+    setResizeColumn(null);
+  };
+  const onRowClickHandler = (event, row) => {
+    if (event.target.type !== 'checkbox') {
+      onRowClick(row);
+    }
+  };
+  const handleCheckboxChange = (event, row) => {
+    if (event.target.checked) {
+      const updatedUnSelected = checkEvent.unselected.filter(item => item.key !== row.key);
+      setCheckEvent({
+        ...checkEvent,
+        unselected: updatedUnSelected,
+        selected: [...checkEvent.selected, row]
+      });
+    } else {
+      const updatedSelected = checkEvent.selected.filter(item => item.key !== row.key);
+      setCheckEvent({
+        ...checkEvent,
+        unselected: [...checkEvent.unselected, row],
+        selected: updatedSelected
+      });
+    }
+  };
+  const onPaginationClickHandler = (event, page) => {
+    onPaginationClick(event, page);
+  };
+  (0, _react.useEffect)(() => {
+    onCheckAllInput(checkEvent);
+  }, [checkEvent]);
+  (0, _react.useEffect)(() => {
+    document.addEventListener('mousemove', handleMouseMove, false);
+    document.addEventListener('mouseup', handleMouseUp, false);
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove, false);
+      document.removeEventListener('mouseup', handleMouseUp, false);
+    };
+  }, [resizing]);
+  let m_pos; // Declare m_pos here so it's accessible in handleMouseMove
+
+  const pageCount = 3; // Set the desired number of pages
+  const pages = Array.from({
+    length: pageCount
+  }, (_, index) => index + 1);
+  return /*#__PURE__*/_react.default.createElement(_Table.TableWrapper, null, /*#__PURE__*/_react.default.createElement(_Table.TableTag, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/_react.default.createElement(_Table.Thead, null, /*#__PURE__*/_react.default.createElement("tr", null, actionsColumn && /*#__PURE__*/_react.default.createElement("th", {
+    className: "actions-th"
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    type: "checkbox",
+    onChange: handleSelectAllChange
+  })), Object.keys(data[0]).map(column => /*#__PURE__*/_react.default.createElement("th", {
+    key: column,
+    "data-column": column,
+    onClick: event => handleSort(event, column)
+  }, /*#__PURE__*/_react.default.createElement("span", null, column), sortBy === column && /*#__PURE__*/_react.default.createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: arrow
+    }
+  }), sizingTable && /*#__PURE__*/_react.default.createElement(_Table.Dragger, {
+    className: "dragger",
+    onMouseDown: e => handleMouseDown(e, column)
+  }))))), /*#__PURE__*/_react.default.createElement(_Table.Tbody, null, data.map(row => /*#__PURE__*/_react.default.createElement("tr", {
+    key: row.key,
+    onClick: event => onRowClickHandler(event, row)
+  }, actionsColumn && /*#__PURE__*/_react.default.createElement("td", null, /*#__PURE__*/_react.default.createElement("input", {
+    ref: el => checkedRef.current[row.key] = el,
+    type: "checkbox",
+    onChange: event => handleCheckboxChange(event, row)
+  })), Object.keys(row).map(column => /*#__PURE__*/_react.default.createElement("td", {
+    key: column
+  }, row[column])))))), showPagination && /*#__PURE__*/_react.default.createElement(_Table.Pagination, null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "double-arrow",
+    onClick: event => onPaginationClickHandler(event, 'firstPage')
+  }, "\xAB")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "single-arrow",
+    onClick: event => onPaginationClickHandler(event, 'previousPage')
+  }, "\u2039")), pages.map(page => /*#__PURE__*/_react.default.createElement("li", {
+    key: page
+  }, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: page === 1 ? 'active' : '',
+    onClick: event => onPaginationClickHandler(event, page)
+  }, page))), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "single-arrow",
+    onClick: event => onPaginationClickHandler(event, 'nextPage')
+  }, "\u203A")), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement(_Table.PaginationButton, {
+    className: "double-arrow",
+    onClick: event => onPaginationClickHandler(event, 'lastPage')
+  }, "\xBB"))));
+};
+exports.Table = Table;
+var _default = exports.default = Table;
+Table.defaultProps = {
+  data: [{
+    key: '',
+    name: '',
+    age: 2
+  }],
+  width: '100%',
+  height: 'auto',
+  onCheckAllInput: () => {},
+  onSortClick: () => {},
+  onRowClick: () => {},
+  onRowInputClick: () => {},
+  onPaginationClick: () => {},
+  showPagination: true,
+  sizingTable: true,
+  actionsColumn: true
+};

package/dist/stories/components/CampaignTool/Table.style.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Thead = exports.Tbody = exports.TableWrapper = exports.TableTag = exports.PaginationButton = exports.Pagination = exports.Dragger = 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;
+/* eslint-disable import/prefer-default-export */
+const TableWrapper = exports.TableWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  font-family: \"Poppins\", sans-serif;\n  background-color: white;\n"])));
+const TableTag = exports.TableTag = _styledComponents.default.table(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  border-collapse: collapse;\n  table-layout: fixed;\n  width: ", ";\n  height: ", ";\n  margin-bottom: 15px;\n    th,\n    td {\n        position: relative;\n        font-weight: 400;\n        border: 1px solid #ddd;\n        padding: 8px;\n    }\n"])), props => props.width, props => props.height);
+const Thead = exports.Thead = _styledComponents.default.thead(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    color: white;\n    background-color: #000000;\n    tr {\n        > th {\n            position: relative;\n            &.actions-th,\n            &:last-of-type {\n                > div {\n                    display: none;\n                }\n            }\n            \n            &.actions-th {\n                width: 22px;\n            }\n        }\n    }\n"])));
+const Tbody = exports.Tbody = _styledComponents.default.tbody(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n    tr {\n        &:nth-child(even) {\n            background-color: #f2f2f2;\n        }\n        &:hover {\n            background-color: #ddd;\n        }\n    }\n"])));
+const Dragger = exports.Dragger = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    width: 5px;\n    height: 100%;\n    position: absolute;\n    top: 0;\n    right: 0;\n    cursor: col-resize;\n"])));
+const Pagination = exports.Pagination = _styledComponents.default.ul(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    gap: 5px;\n"])));
+const PaginationButton = exports.PaginationButton = _styledComponents.default.button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-block;\n    padding: 8px 12px;\n    background-color: #ffffff;\n    border: 1px solid #ccc;\n    text-decoration: none;\n    color: #333;\n    border-radius: 4px;\n    cursor: pointer;\n    &:hover, &:focus {\n      background-color: #e0e0e0;\n    }\n    &.active {\n        background-color: #aaa;\n    }\n"])));

package/dist/stories/components/CommonFunctions.js

@@ -6,15 +6,15 @@ Object.defineProperty(exports, "__esModule", {
 exports.isNumericValue = exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = void 0;
 const getCurrencySign = (currencyTypeToConvert, value) => {
   if (value === undefined || value === null) {
-    return '';
+    return "";
   }
   if (isNaN(parseFloat(value))) {
-    return '';
+    return "";
   }
-  if (!currencyTypeToConvert) return '';
-  let currencySign = '';
-  const currencyFormatter = new Intl.NumberFormat('en-US', {
-    style: 'currency',
+  if (!currencyTypeToConvert) return "";
+  let currencySign = "";
+  const currencyFormatter = new Intl.NumberFormat("en-US", {
+    style: "currency",
     currency: currencyTypeToConvert
   });
   currencySign = currencyFormatter.format(Math.abs(value)).substring(0, 1);
@@ -23,21 +23,21 @@ const getCurrencySign = (currencyTypeToConvert, value) => {
 exports.getCurrencySign = getCurrencySign;
 const getFormattedUnits = num => {
   if (num === undefined || num === null) {
-    return '';
+    return "";
   }
   if (isNaN(parseFloat(num))) {
-    return '';
+    return "";
   }
   if (Math.abs(num) >= 1000000000) {
-    return 'B';
+    return "B";
   }
   if (Math.abs(num) >= 1000000) {
-    return 'M';
+    return "M";
   }
   if (Math.abs(num) >= 1000) {
-    return 'K';
+    return "K";
   }
-  return '';
+  return "";
 };
 exports.getFormattedUnits = getFormattedUnits;
 const getFormattedValue = num => {
@@ -50,13 +50,13 @@ const getFormattedValue = num => {
 
   // if (typeof num === 'number') {
   if (Math.abs(num) >= 1000000000) {
-    return (num / 1000000000).toFixed(1).replace(/\.0$/, '');
+    return (num / 1000000000).toFixed(1).replace(/\.0$/, "");
   }
   if (Math.abs(num) >= 1000000) {
-    return (num / 1000000).toFixed(1).replace(/\.0$/, '');
+    return (num / 1000000).toFixed(1).replace(/\.0$/, "");
   }
   if (Math.abs(num) >= 1000) {
-    return (num / 1000).toFixed(1).replace(/\.0$/, '');
+    return (num / 1000).toFixed(1).replace(/\.0$/, "");
   }
   return num;
   // }
@@ -65,7 +65,7 @@ exports.getFormattedValue = getFormattedValue;
 const getNumberWithCommas = x => {
   let param = x.toString();
   const pattern = /(-?\d+)(\d{3})/;
-  while (pattern.test(param)) param = param.replace(pattern, '$1,$2');
+  while (pattern.test(param)) param = param.replace(pattern, "$1,$2");
   return param;
 };
 exports.getNumberWithCommas = getNumberWithCommas;

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

@@ -8,6 +8,6 @@ exports.DropdownContainer = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _templateObject;
-//import './font.css';
+// import './font.css';
 
-const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";  \n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Poppins;  \n  font-size: \"14px\";\n"])), props => props.width);
+const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: Poppins;  \n  font-size: \"14px\";\n"])), props => props.width);