sag_components 2.0.0-beta34 → 2.0.0-beta341

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

@@ -1,200 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ViewCreativeTextField = exports.ViewCreativeListBoxContainer = exports.ViewCreativeContainer = exports.ViewCreativeButtonAndListBoxContainer = exports.SubLineContainer = exports.RetailerIconContainer = exports.Retailer = exports.PeriodsContainer = exports.PeriodValue = exports.PeriodLabel = exports.PanelContainer = exports.ObjectivesTitle = exports.ObjectivesShowMore = exports.ObjectivesDescription = exports.ObjectiesContainer = exports.ObjectiesAndPeriodsContainer = exports.MainContainer = exports.FilterValuesContainer = exports.FilterValue = exports.FieldsDelimiter = exports.EventNameViewCreativeSubContainer = exports.EventNameAndViewCreativeContainer = exports.DraftTag = exports.DownloadButtonContainer = exports.BottonsContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const MainContainer = exports.MainContainer = _styledComponents.default.div`
-  display: flex;
-  position: relative;
-  font-family: "Poppins", sans-serif;
-  font-size: 1rem;
-  color: ${props => props.textcolor ? props.textcolor : '#000'};
-  width: ${props => props.width};
-  height: ${props => props.height};
-  border-radius: 12px;
-`;
-const PanelContainer = exports.PanelContainer = _styledComponents.default.div`
-  display: flex;
-  align-content: center;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-around;
-  border-radius: 12px;
-  background: white;
-  padding: 20px 0 0;
-  font-weight: 400;
-  white-space: pre-wrap;
-  width: 100%;
-  @media (max-width: 1536px) {
-    padding: 12px 0 0;
-  }
-`;
-const EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContainer = _styledComponents.default.div`
-  display: flex;
-  align-content: center;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-`;
-const EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div`
-  display: flex;
-  position: relative;
-  align-content: center;
-  align-items: center;
-  gap: 20px;
-`;
-const DraftTag = exports.DraftTag = _styledComponents.default.div`
-  color: #E41111;
-  border: 2px solid #E41111;
-  font-size: 20px;
-  padding: 6px 18px;
-`;
-const ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px 10px;
-  border-radius: 8px;
-  border: 1px solid #ccc;
-  color: ${props => props.disabled ? '#B1B1B1' : '#212121'};
-  &:hover {
-    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
-  }
-`;
-const ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4`
-  display: flex;  
-  line-height: 19px;
-  font-size: 14px;
-  font-weight: 400;
-  margin: 3px 10px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const ViewCreativeButtonAndListBoxContainer = exports.ViewCreativeButtonAndListBoxContainer = _styledComponents.default.div`
-  position: relative;
-  overflow: visible;
-  font-size: 18px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _styledComponents.default.div`
-  display: flex;
-  position: absolute;
-  left: ${props => props.left};
-  top:  ${props => props.top};
-  z-index:1000;
-`;
-const FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div`
-  display: flex;
-  align-content: center;
-  align-items: center;
-  width: 100%;
-  margin: 0.5rem 0 0 0;
-`;
-const FilterValue = exports.FilterValue = _styledComponents.default.p`
-  color: #212121;
-  margin: 0;
-  font-size: 14px;
-  font-weight: 400;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const FieldsDelimiter = exports.FieldsDelimiter = _styledComponents.default.p`
-  color: #ccc;
-  margin: 0;
-`;
-const Retailer = exports.Retailer = _styledComponents.default.div`
-  color: #1b30aa;
-  margin: 0;
-  margin-inline-end: 5px;
-`;
-const RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div`
-  display: flex;
-  align-items: center;
-`;
-const ObjectiesContainer = exports.ObjectiesContainer = _styledComponents.default.div`
-  max-width: 70%;
-`;
-const ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div`
-  display: flex;
-  gap: 40px;
-  width: 100%;
-  margin-top: 8px;
-`;
-const ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong`
-  font-weight: 500;
-`;
-const ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p`
-  margin: 0;
-  font-size: 14px;
-  font-weight: 400;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;
-const ObjectivesShowMore = exports.ObjectivesShowMore = _styledComponents.default.a`
-  color: ${props => props.disabled ? '#B1B1B1' : '#1b30aa'};
-  &:hover {
-    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
-  }
-`;
-const BottonsContainer = exports.BottonsContainer = _styledComponents.default.div`
-  align-items: center;
-  justify-content: flex-end;
-  min-height: 1.5rem;
-`;
-const DownloadButtonContainer = exports.DownloadButtonContainer = _styledComponents.default.div``;
-const PeriodsContainer = exports.PeriodsContainer = _styledComponents.default.div`
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
-  justify-content: flex-start;
-  font-size: 14px;
-  @media (max-width: 1536px) {
-    font-size: 12px;
-  }  
-`;
-const SubLineContainer = exports.SubLineContainer = _styledComponents.default.div`
-  display: flex;
-  width: 100%;
-`;
-const PeriodLabel = exports.PeriodLabel = _styledComponents.default.strong`
-  font-size: 14px;
-  font-weight: 500;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }  
-`;
-const PeriodValue = exports.PeriodValue = _styledComponents.default.p`
-  line-height: 19px;
-  font-size: 14px;
-  font-weight: 400;
-  margin: 0 0 0 10px;
-  @media (max-width: 1536px) {
-    font-size: 14px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 12px;
-  }
-`;

package/dist/stories/components/CollapseMenuItem.js

@@ -1,61 +0,0 @@
-"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 _MenuItemClosedIcon = require("./icons/MenuItemClosedIcon");
-var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
-var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
-var _CollapseMenuItem = require("./CollapseMenuItem.style");
-const CollapseMenuItem = props => {
-  const {
-    title,
-    subTitle,
-    children,
-    showBorder,
-    buttonAlignment,
-    className
-  } = props;
-  const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
-  const handleToggle = () => {
-    setIsItemOpen(!IsItemOpen);
-  };
-  return /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemMainContainer, {
-    className: className,
-    showBorder: showBorder
-  }, /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemContainer, {
-    onClick: handleToggle,
-    style: {
-      cursor: 'pointer'
-    }
-  }, buttonAlignment === 'left' && /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.LeftIconContainer, {
-    className: "LeftIconContainer"
-  }, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
-    color: "#212121"
-  }) : /*#__PURE__*/_react.default.createElement(_MenuItemClosedIcon.MenuItemClosedIcon, {
-    color: "#212121"
-  })), /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemTitle, {
-    id: "CollapseMenuItemTitle"
-  }, title), /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemSubTitle, {
-    id: "CollapseMenuItemSubTitle"
-  }, subTitle !== undefined && subTitle !== null && subTitle !== '' ? '|' : ''), /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemSubTitle, {
-    id: "CollapseMenuItemSubTitle"
-  }, subTitle), buttonAlignment === 'right' && /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.RightIconContainer, null, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_MenuItemUpIcon.MenuItemUpIcon, {
-    color: "#212121"
-  }) : /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
-    color: "#212121"
-  }))), IsItemOpen && /*#__PURE__*/_react.default.createElement(_CollapseMenuItem.CollapseMenuItemContentContainer, {
-    id: "CollapseMenuItemContentContainer"
-  }, children || ''));
-};
-var _default = exports.default = CollapseMenuItem;
-CollapseMenuItem.defaultProps = {
-  className: '',
-  title: '',
-  subTitle: '',
-  showBorder: false,
-  buttonAlignment: 'left'
-};

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

@@ -1,61 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RightIconContainer = exports.LeftIconContainer = exports.CollapseMenuItemTitle = exports.CollapseMenuItemSubTitle = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div`
-  margin: 0;
-  background: #ffffff;
-  box-shadow: ${props => props.showBorder ? '0px 0px 20px 0px rgba(0, 0, 0, 0.2)' : null};
-  border-radius: 12px;  
-`;
-const CollapseMenuItemContainer = exports.CollapseMenuItemContainer = _styledComponents.default.div`
-  font-family: "Poppins", sans-serif;
-  font-size: 18px;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  padding: 15px;
-`;
-const CollapseMenuItemTitle = exports.CollapseMenuItemTitle = _styledComponents.default.h3`
-  font-weight: 500;
-  font-size: 18px;
-  line-height: 25px;
-  margin: 0 5px 0 10px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-`;
-const CollapseMenuItemSubTitle = exports.CollapseMenuItemSubTitle = _styledComponents.default.h3`
-  color: #757171;
-  font-weight: 500;
-  font-size: 18px;
-  @media (max-width: 1536px) {
-    font-size: 16px;
-  }
-  @media (max-width: 1366px) {
-    font-size: 14px;
-  }
-  line-height: 25px;
-  margin: 0 5px;
-
-`;
-const LeftIconContainer = exports.LeftIconContainer = _styledComponents.default.h3`
-  margin: 0 0 0 10px;
-`;
-const CollapseMenuItemContentContainer = exports.CollapseMenuItemContentContainer = _styledComponents.default.div`
-  font-weight: 500;
-  font-size: 14px;
-  margin: 0;
-`;
-const RightIconContainer = exports.RightIconContainer = _styledComponents.default.div`
-  width: 20px;
-  height: 20px;
-  margin-left: auto;
-`;

package/dist/stories/components/CommonFunctions.js

@@ -1,99 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isNumericValue = exports.getNumberWithCommas = exports.getFormattedValue = exports.getFormattedUnits = exports.getCurrencySign = exports.formattedValue = void 0;
-/* eslint-disable no-restricted-globals */
-/* eslint-disable no-shadow */
-const getCurrencySign = (currencyTypeToConvert, value) => {
-  if (value === undefined || value === null) {
-    return '';
-  }
-  if (isNaN(parseFloat(value))) {
-    return '';
-  }
-  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);
-  return currencySign;
-};
-exports.getCurrencySign = getCurrencySign;
-const getFormattedUnits = num => {
-  if (num === undefined || num === null) {
-    return '';
-  }
-  if (isNaN(parseFloat(num))) {
-    return '';
-  }
-  if (Math.abs(num) >= 1000000000) {
-    return 'B';
-  }
-  if (Math.abs(num) >= 1000000) {
-    return 'M';
-  }
-  if (Math.abs(num) >= 1000) {
-    return 'K';
-  }
-  return '';
-};
-exports.getFormattedUnits = getFormattedUnits;
-const getFormattedValue = num => {
-  const value = num !== null && num !== void 0 ? num : 0;
-  if (isNaN(parseFloat(value))) {
-    return null;
-  }
-  const formatNumber = value => {
-    const numValue = Number(value);
-    return numValue.toFixed(1);
-  };
-  if (Math.abs(num) >= 1000000000) {
-    return formatNumber(num / 1000000000);
-  }
-  if (Math.abs(num) >= 1000000) {
-    return formatNumber(num / 1000000);
-  }
-  if (Math.abs(num) >= 1000) {
-    return formatNumber(num / 1000);
-  }
-  if (Number.isInteger(num)) {
-    return num;
-  } else {
-    return formatNumber(num);
-  }
-};
-exports.getFormattedValue = getFormattedValue;
-const formattedValue = num => {
-  if (num >= 1000 && num < 10000) {
-    return Math.round(num / 1000);
-  }
-  if (num >= 10000 && num < 100000) {
-    return (num / 1000).toFixed(1);
-  }
-  if (num >= 100000) {
-    return (num / 1000).toFixed(0);
-  }
-  return num.toString();
-};
-exports.formattedValue = formattedValue;
-const getNumberWithCommas = x => {
-  let param = x.toString();
-  const pattern = /(-?\d+)(\d{3})/;
-  while (pattern.test(param)) param = param.replace(pattern, '$1,$2');
-  return param;
-};
-exports.getNumberWithCommas = getNumberWithCommas;
-const isNumericValue = num => {
-  if (num === undefined || num === null) {
-    return false;
-  }
-  if (isNaN(parseFloat(num))) {
-    return false;
-  }
-  return true;
-};
-exports.isNumericValue = isNumericValue;

package/dist/stories/components/Datepicker.js

@@ -1,148 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Datepicker = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _AdapterDayjs = require("@mui/x-date-pickers/AdapterDayjs");
-var _LocalizationProvider = require("@mui/x-date-pickers/LocalizationProvider");
-var _DatePicker = require("@mui/x-date-pickers/DatePicker");
-var _demo = require("@mui/x-date-pickers/internals/demo");
-var _dayjs = _interopRequireDefault(require("dayjs"));
-var _Datepicker = require("./Datepicker.style");
-var _CalendarIcon = require("./icons/CalendarIcon");
-/**
- *  SAG Datepicker
- */
-const Datepicker = _ref => {
-  let {
-    width = '100%',
-    text,
-    format = 'MMM DD, YYYY',
-    shape,
-    onChange,
-    value,
-    disableClearable,
-    disabled = false,
-    labelColor = '#1B30AA'
-  } = _ref;
-  /**
-   *  SAG Datepicker
-   */
-
-  const [valueState, setvalueState] = _react.default.useState(null);
-  (0, _react.useEffect)(() => {
-    if (value) {
-      setvalueState((0, _dayjs.default)(value));
-    } else {
-      setvalueState(null);
-    }
-  }, [value]);
-  (0, _react.useEffect)(() => {}, [valueState]);
-  const getTextFieldStyle = () => {
-    if (shape === 'round') {
-      // round
-      return {
-        '& .MuiInputLabel-inputRoot': {
-          fontFamily: 'Poppins',
-          fontSize: '14px',
-          fontWidth: 400,
-          paddingLeft: '10px !important',
-          borderRadius: '12px',
-          width
-          // color: labelColor,
-        },
-        '& .MuiOutlinedInput-root': {
-          borderRadius: '12px',
-          fontFamily: 'Poppins',
-          fontSize: '14px',
-          fontWidth: 400,
-          width,
-          // color: labelColor,
-          legend: {
-            marginLeft: '10px'
-          },
-          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
-          '&[class*="MuiOutlinedInput-root"] .MuiInputLabel-input:first-of-type': {
-            // Default left padding is 6px
-            paddingLeft: '10px'
-          },
-          '& .MuiOutlinedInput-notchedOutline': {
-            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
-          // after changing its padding-left.
-          transform: 'translate(14px, 18px) scale(1);',
-          fontSize: '14px',
-          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575'
-        },
-        '& .MuiInputLabel-outlined': {
-          fontFamily: 'Poppins',
-          paddingLeft: '10px',
-          color: disabled ? '#E7E7E7' : valueState ? labelColor : '#757575',
-          fontWidth: 400,
-          fontSize: '18px'
-        },
-        '& .MuiInputLabel-shrink': {
-          marginLeft: '1px',
-          paddingLeft: '4px',
-          paddingRight: 0,
-          background: 'white'
-          // color: labelColor,
-        }
-      };
-    }
-    // square
-    return null;
-  };
-  return /*#__PURE__*/_react.default.createElement(_Datepicker.DatepickerContainer, {
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_LocalizationProvider.LocalizationProvider, {
-    dateAdapter: _AdapterDayjs.AdapterDayjs,
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_demo.DemoContainer, {
-    components: ['DatePicker'],
-    width: width
-  }, /*#__PURE__*/_react.default.createElement(_DatePicker.DatePicker, {
-    value: valueState,
-    clearable: true,
-    disabled: disabled,
-    onChange: newValue => {
-      setvalueState(newValue);
-      onChange({
-        newValue: newValue ? newValue.format('YYYY-MM-DD').toString() : null
-      });
-    },
-    sx: getTextFieldStyle(),
-    label: text,
-    slots: {
-      openPickerIcon: _CalendarIcon.CalendarIcon
-    },
-    slotProps: {
-      textField: {
-        fullWidth: true
-      },
-      actionBar: {
-        actions: ['clear']
-      }
-    },
-    format: format
-  }))));
-};
-exports.Datepicker = Datepicker;
-var _default = exports.default = Datepicker;

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

@@ -1,19 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatepickerContainer = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-// import './font.css';
-
-const DatepickerContainer = exports.DatepickerContainer = _styledComponents.default.div`
-  width: ${props => props.width};
-  text-align: left;
-  position: relative; 
-  align-items: center;
-  justify-content: center;
-  font-family: Poppins;  
-  font-size: "14px";
-`;

package/dist/stories/components/DialogOverlay.js

@@ -1,44 +0,0 @@
-"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 _CloseXIcon = require("./icons/CloseXIcon");
-var _DialogOverlay = require("./DialogOverlay.style");
-const DialogOverlay = props => {
-  const {
-    title,
-    children,
-    onDialogClose,
-    className
-  } = props;
-  (0, _react.useEffect)(() => {
-    const modal = document.querySelector('dialog');
-    modal.showModal();
-  }, []);
-  const closeModal = () => {
-    const modal = document.querySelector('dialog');
-    modal.close();
-    onDialogClose();
-  };
-  return /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalWrapper, {
-    className: className
-  }, /*#__PURE__*/_react.default.createElement(_DialogOverlay.Modal, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalHeader, null, /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalTitle, null, title), /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalClose, {
-    type: "button",
-    onClick: closeModal
-  }, /*#__PURE__*/_react.default.createElement(_CloseXIcon.CloseXIcon, {
-    fill: "white"
-  }))), /*#__PURE__*/_react.default.createElement(_DialogOverlay.ModalBody, {
-    id: "modalBody"
-  }, children)));
-};
-var _default = exports.default = DialogOverlay;
-DialogOverlay.defaultProps = {
-  title: 'Title',
-  children: null,
-  onDialogClose: () => {},
-  className: ''
-};