sag_components 2.0.0-beta26 → 2.0.0-beta28

package/dist/stories/components/LinkButton.js

@@ -0,0 +1,225 @@
+"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.LinkButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _LinkButton = require("./LinkButton.style");
+var _FilterIcon = require("./icons/FilterIcon");
+var _OptionsIcon = require("./icons/OptionsIcon");
+var _DownloadIcon = require("./icons/DownloadIcon");
+var _DocumentIcon = require("./icons/DocumentIcon");
+var _FlyIcon = require("./icons/FlyIcon");
+var _BellIcon = require("./icons/BellIcon");
+var _MaintenanceIcon = require("./icons/MaintenanceIcon");
+var _ExitIcon = require("./icons/ExitIcon");
+var _EyeIcon = require("./icons/EyeIcon");
+var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
+var _MenuItemRightIcon = require("./icons/MenuItemRightIcon");
+var _ArrowSelectIcon = _interopRequireDefault(require("./icons/ArrowSelectIcon"));
+var _InfoIcon = require("./icons/InfoIcon");
+const LinkButton = _ref => {
+  let {
+    text = '',
+    type = 'primary',
+    size = 'small',
+    height = '',
+    width = '',
+    disabled = false,
+    textColor = '',
+    onClick = () => {},
+    leftIcon = 'none',
+    rightIcon = 'none'
+  } = _ref;
+  // const {
+  //   text,
+  //   type,
+  //   size,
+  //   height,
+  //   width,
+  //   disabled,
+  //   textColor,
+  //   leftIcon,
+  //   rightIcon,
+  //   onClick,
+  //   className,
+  // } = props;
+
+  const [clicked, setClicked] = (0, _react.useState)(false);
+  const handleLinkButtonClick = () => {
+    setClicked(true);
+    onClick(text);
+    setTimeout(() => {
+      setClicked(false);
+    }, 300);
+  };
+  const getIcon = icon => {
+    const iconHeight = size === 'small' ? '12px' : '13px';
+    const iconWidth = size === 'small' ? '12px' : '13px';
+    const newTextColor = textColor || (type === 'secondary' ? '#212121' : '#229E38');
+    const color = disabled ? '#B1B1B1' : newTextColor;
+    switch (icon.toLowerCase()) {
+      case 'filter':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "FilterIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FilterIcon.FilterIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'options':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "OptionsIcon"
+        }, /*#__PURE__*/_react.default.createElement(_OptionsIcon.OptionsIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'download':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "DownloadIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DownloadIcon.DownloadIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'document':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "DocumentIcon"
+        }, /*#__PURE__*/_react.default.createElement(_DocumentIcon.DocumentIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'fly':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "FlyIcon"
+        }, /*#__PURE__*/_react.default.createElement(_FlyIcon.FlyIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'bell':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "BellIcon"
+        }, /*#__PURE__*/_react.default.createElement(_BellIcon.BellIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'maintenance':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "MaintenanceIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MaintenanceIcon.MaintenanceIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'exit':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "ExitIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ExitIcon.ExitIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'eye':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "EyeIcon"
+        }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'arrowdown':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "ArrowDownIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MenuItemOpenIcon.MenuItemOpenIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'arrowright':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "ArrowRightIcon"
+        }, /*#__PURE__*/_react.default.createElement(_MenuItemRightIcon.MenuItemRightIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      case 'select':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "SelectRightIcon"
+        }, /*#__PURE__*/_react.default.createElement(_ArrowSelectIcon.default, {
+          height: "16px",
+          width: "16px",
+          color: color
+        }));
+      case 'info':
+        return /*#__PURE__*/_react.default.createElement(_LinkButton.IconWrapper, {
+          className: "InfoIcon"
+        }, /*#__PURE__*/_react.default.createElement(_InfoIcon.InfoIcon, {
+          height: iconHeight,
+          width: iconWidth,
+          color: color
+        }));
+      default:
+        return '';
+    }
+  };
+  const getLeftIcon = () => {
+    if (!leftIcon || leftIcon === 'none') return '';
+    return getIcon(leftIcon);
+  };
+  const getRightIcon = () => {
+    if (!rightIcon || rightIcon === 'none') return '';
+    return getIcon(rightIcon);
+  };
+  return /*#__PURE__*/_react.default.createElement(_LinkButton.LinkButtonContainer, {
+    className: "LinkButtonContainer",
+    width: width || null,
+    height: height || '20px'
+  }, /*#__PURE__*/_react.default.createElement(_LinkButton.LinkButtonItem, {
+    className: clicked ? 'LinkButtonItem-clicked' : 'LinkButtonItem',
+    onClick: !disabled ? handleLinkButtonClick : null,
+    width: width || null,
+    height: height || '20px',
+    disabled: disabled,
+    text_color: textColor || (type === 'secondary' ? '#212121' : '#229E38'),
+    font_size: size === 'small' ? '14px' : '16px'
+  }, getLeftIcon(), /*#__PURE__*/_react.default.createElement(_LinkButton.Label, {
+    className: "Label",
+    disabled: disabled,
+    font_size: size === 'small' ? '14px' : '16px'
+  }, text), getRightIcon()));
+};
+exports.LinkButton = LinkButton;
+var _default = exports.default = LinkButton; // LinkButton.propTypes = {
+//   text: PropTypes.string,
+//   type: PropTypes.string,
+//   size: PropTypes.string,
+//   height: PropTypes.string,
+//   width: PropTypes.string,
+//   disabled: PropTypes.bool,
+//   textColor: PropTypes.string,
+//   onClick: PropTypes.func,
+//   leftIcon: PropTypes.string,
+//   rightIcon: PropTypes.string,
+//   className: PropTypes.string,
+// };
+// LinkButton.defaultProps = {
+//   text: '',
+//   type: 'primary',
+//   size: 'small',
+//   height: '',
+//   width: '',
+//   disabled: false,
+//   textColor: '',
+//   onClick: () => {},
+//   leftIcon: 'none',
+//   rightIcon: 'none',
+//   className: '',
+// };

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

@@ -0,0 +1,53 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinkButtonItem = exports.LinkButtonContainer = exports.Label = exports.IconWrapper = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const LinkButtonContainer = exports.LinkButtonContainer = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;  
+  width: ${props => props.width};
+  height: ${props => props.height};
+`;
+const LinkButtonItem = exports.LinkButtonItem = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;
+  flex-wrap: nowrap;
+  overflow: hidden;
+  width: ${props => props.width};
+  height: ${props => props.height};  
+  color: ${props => props.disabled ? '#B1B1B1' : props.text_color};    
+  box-sizing: border-box;
+  gap: 8px;  
+  padding: 0 4px; 
+  font-size: ${props => props.font_size};
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;      
+  &:hover {   
+    color: ${props => props.disabled ? '#B1B1B1' : props.text_color};       
+    text-decoration: ${props => props.disabled ? '' : 'underline'}; 
+    cursor: ${props => !props.disabled ? 'pointer' : 'default'};
+  }
+  &.LinkButtonItem-clicked {   
+    cursor: pointer;  
+    transition: background-color 0.3s, color 0.3s;
+  }
+`;
+const Label = exports.Label = _styledComponents.default.label` 
+  user-select: none;   
+  pointer-events: none;
+`;
+const IconWrapper = exports.IconWrapper = _styledComponents.default.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-content: center;  
+`;

package/dist/stories/components/LinnerDataBox.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LinnerDataBox = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LinnerDataBox = require("./LinnerDataBox.style");
+var _CommonFunctions = require("./CommonFunctions");
+/* eslint-disable no-restricted-globals */
+
+const LinnerDataBox = props => {
+  const {
+    width,
+    height,
+    data,
+    backgroundColor,
+    className,
+    customDataFormat
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(_LinnerDataBox.LinnerContainer, {
+    className: className,
+    backgroundColor: backgroundColor,
+    width: width || "100%",
+    height: height || "200px",
+    customDataFormat: customDataFormat
+  }, data.map((item, index) => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxWrap, {
+    key: `${item.title}`,
+    width: `${100 / data.length}%`
+  }, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBox, null, item.title && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxTitle, {
+    className: "DataBoxTitle"
+  }, item.title), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContent, null, item.value !== null && item.value !== undefined && !isNaN(item.value) && item.value !== "null" && item.value !== "undefined" ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, item.sign && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentSign, null, item.sign), customDataFormat ? /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentValue, {
+    className: "DataBoxValue"
+  }, "".concat((0, _CommonFunctions.formattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value))) : /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentValue, null, "".concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)))) : /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentNoValue, null, "No Data")), item.extraInfo.map(extraInfoItem => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCell, null, extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellValue, null, "".concat("$", (0, _CommonFunctions.getFormattedValue)(extraInfoItem.value), (0, _CommonFunctions.getFormattedUnits)(extraInfoItem.value))), extraInfoItem.value !== null && extraInfoItem.value !== undefined && /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellTitle, null, extraInfoItem.title)))), index < data.length - 1 && /*#__PURE__*/_react.default.createElement("div", {
+    className: "vertival-line",
+    style: {
+      width: "1px",
+      minHeight: "100px",
+      height: "100%",
+      backgroundColor: "#D0D0D0"
+    }
+  }))));
+};
+exports.LinnerDataBox = LinnerDataBox;
+var _default = exports.default = LinnerDataBox;
+LinnerDataBox.defaultProps = {
+  className: "",
+  width: "100%",
+  height: "auto",
+  data: [],
+  backgroundColor: "#FFFFFF",
+  customDataFormat: false
+};

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

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LinnerContainer = exports.DataBoxWrap = exports.DataBoxTitle = exports.DataBoxExtraInfoCellValue = exports.DataBoxExtraInfoCellTitle = exports.DataBoxExtraInfoCell = exports.DataBoxExtraInfo = exports.DataBoxContentValue = exports.DataBoxContentSign = exports.DataBoxContentNoValue = exports.DataBoxContent = exports.DataBox = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div`
+  font-family: "Poppins", sans-serif;
+  display: flex;
+  justify-content: space-between;
+  width: ${props => props.width};
+  height: ${props => props.height};
+  background-color: ${props => props.backgroundColor};
+  padding: 50px 40px 30px;
+`;
+const DataBoxWrap = exports.DataBoxWrap = _styledComponents.default.div`
+  display: flex;
+  gap: 10px;
+  justify-content: space-around;
+  align-items: stretch;
+  width: ${props => props.width};
+  height: 100%;
+`;
+const DataBox = exports.DataBox = _styledComponents.default.div`
+  color: #212121;
+  font-weight: 400;
+`;
+const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.span`
+  font-size: 18px;
+  font-weight: 500;
+`;
+const DataBoxContent = exports.DataBoxContent = _styledComponents.default.div`
+  display: flex;
+  align-items: baseline;
+`;
+const DataBoxContentSign = exports.DataBoxContentSign = _styledComponents.default.span`
+  font-size: 18px;
+  font-weight: 500;
+`;
+const DataBoxContentValue = exports.DataBoxContentValue = _styledComponents.default.span`
+  font-size: 40px;
+  font-weight: 500;
+`;
+const DataBoxContentNoValue = exports.DataBoxContentNoValue = _styledComponents.default.span`
+  font-size: 18px;
+  font-weight: 500;
+  margin: 20px auto 0;
+`;
+const DataBoxExtraInfo = exports.DataBoxExtraInfo = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+`;
+const DataBoxExtraInfoCell = exports.DataBoxExtraInfoCell = _styledComponents.default.div`
+  display: flex;
+  gap: 5px;
+`;
+const DataBoxExtraInfoCellTitle = exports.DataBoxExtraInfoCellTitle = _styledComponents.default.div`
+  color: #999;
+  font-size: 12px;
+  text-transform: uppercase;
+`;
+const DataBoxExtraInfoCellValue = exports.DataBoxExtraInfoCellValue = _styledComponents.default.div`
+  color: #999;
+  font-size: 12px;
+  text-transform: uppercase;
+`;

package/dist/stories/components/ListBox.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ListBox = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _CheckBoxButton = require("./CheckBoxButton");
+var _ListBox = require("./ListBox.style");
+/* ListBox */
+const ListBox = _ref => {
+  let {
+    data,
+    width = '100%',
+    height = '100%',
+    borderColor = '#B1B1B1',
+    buttonsIconColor = '#1B30AA',
+    buttonsBorderColor = '#1B30AA',
+    buttonsTextColorChecked = '#212121',
+    buttonsTextColorUnchecked = '#212121',
+    buttonsBackgroundColorChecked = '#1B30AA',
+    buttonsBackgroundColorUnchecked = '#FFF',
+    onClick,
+    ...props
+  } = _ref;
+  const [dataState, setDataState] = (0, _react.useState)(data);
+  (0, _react.useEffect)(() => {
+    const selectedData = dataState === null || dataState === void 0 ? void 0 : dataState.filter(item => item.checked === true);
+    onClick({
+      data: dataState,
+      selectedData
+    });
+  }, [dataState]);
+  const dispalyButtons = function (data, height) {
+    let paddingBottom = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '5px';
+    if (data && data.length > 0) {
+      return /*#__PURE__*/_react.default.createElement(_ListBox.ButtonsContainer, {
+        id: "ButtonsContainer",
+        height: height,
+        paddingBottom: paddingBottom
+      }, data === null || data === void 0 ? void 0 : data.map(item => /*#__PURE__*/_react.default.createElement(_ListBox.ButtonContainer, {
+        id: "ButtonContainer"
+      }, /*#__PURE__*/_react.default.createElement(_CheckBoxButton.CheckBoxButton, {
+        backgroundColorChecked: buttonsBackgroundColorChecked,
+        backgroundColorUnchecked: buttonsBackgroundColorUnchecked,
+        borderColor: buttonsBorderColor,
+        borderRadius: "12px",
+        checked: item.checked,
+        disabled: item.disabled,
+        showIconInCheckBoxButtons: false,
+        fontSize: "14px",
+        height: "19px",
+        iconColor: buttonsIconColor,
+        iconSize: "12px",
+        label: item.label,
+        onClick: props => {
+          const newData = dataState === null || dataState === void 0 ? void 0 : dataState.map(item => item.label === props.label ? {
+            ...item,
+            checked: props.checked
+          } : {
+            ...item
+          });
+          setDataState(newData);
+        },
+        textColorChecked: buttonsTextColorChecked,
+        textColorUnchecked: buttonsTextColorUnchecked,
+        width: "100%"
+      }))));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_ListBox.MainContainer, {
+    id: "MainContainer",
+    height: height,
+    width: width
+  }, /*#__PURE__*/_react.default.createElement(_ListBox.PanelContainer, {
+    id: "PanelContainer",
+    borderColor: borderColor
+  }, dispalyButtons(dataState, height = '50px', '0')));
+};
+exports.ListBox = ListBox;
+var _default = exports.default = ListBox;

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

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelContainer = exports.MainContainer = exports.ButtonsContainer = exports.ButtonContainer = 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-style: normal;
+  font-size: 1rem;
+  border-radius: 12px;
+  width: ${props => props.width};
+  height: ${props => props.height};
+`;
+const PanelContainer = exports.PanelContainer = _styledComponents.default.div`
+  display: flex;
+  align-content: center;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  border: 1px solid ${props => props.borderColor};
+  border-radius: 12px;
+  background: #ffffff;
+  padding: 0.1rem;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 19px;
+  white-space: pre-wrap;
+  overflow: hidden;
+  width: 100%;
+`;
+const ButtonsContainer = exports.ButtonsContainer = _styledComponents.default.div`
+  display: flex;
+  flex-direction: column;
+  //flex-wrap: wrap;
+  width: 100%;
+  padding-bottom: ${props => props.paddingBottom}; 
+`;
+const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div`
+  /* display: flex; */
+  white-space: nowrap;
+  margin: 0;
+  padding: 6px;
+`;

package/dist/stories/components/MarketShareDescription.js

@@ -0,0 +1,109 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MarketShareDescription = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _LampIcon = require("./icons/LampIcon");
+var _ExportIcon = _interopRequireDefault(require("./icons/ExportIcon"));
+var _MarketShareDescription = require("./MarketShareDescription.style");
+var _CommonFunctions = require("./CommonFunctions");
+const MarketShareDescription = props => {
+  const {
+    width,
+    height,
+    marketShareData,
+    iconColor,
+    onBannerClick,
+    dotCut
+  } = props;
+  const displayField = dataItem => {
+    var _dataItem$value;
+    const content = /*#__PURE__*/_react.default.createElement(_MarketShareDescription.FieldTitleAndValueSubContainer, {
+      className: "FieldTitleAndValueSubContainer"
+    }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.FieldTitle, {
+      className: "FieldTitle"
+    }, dataItem.label), /*#__PURE__*/_react.default.createElement(_MarketShareDescription.FormattedValue, {
+      className: "FormattedValue"
+    }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.TextBeforeAndAfterValue, {
+      className: "TextBeforeAndAfterValue"
+    }, dataItem.textBefore), dotCut ? (0, _CommonFunctions.getFormattedValue)(dataItem.value && Math.abs(dataItem.value) > 0 && dataItem.value % 1 !== 0 ? (_dataItem$value = dataItem.value) === null || _dataItem$value === void 0 ? void 0 : _dataItem$value.toFixed(2) : dataItem.value) : (0, _CommonFunctions.getNumberWithCommas)(dataItem.value), dotCut ? (0, _CommonFunctions.getFormattedUnits)(dataItem.value) : '', /*#__PURE__*/_react.default.createElement(_MarketShareDescription.TextBeforeAndAfterValue, null, dataItem.textAfter)));
+    return content;
+  };
+  const dispalyRowFields = data => {
+    if (!data && !data.length > 0) return '';
+    const content = /*#__PURE__*/_react.default.createElement(_MarketShareDescription.FieldsContainer, {
+      className: "FieldsContainer",
+      height: "160px"
+    }, data === null || data === void 0 ? void 0 : data.map((item, index) => /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.OneFieldsContainer, {
+      className: "OneFieldsContainer",
+      padding: index === 0 ? '0px' : '0 0 0 40px'
+    }, displayField(item)), (data === null || data === void 0 ? void 0 : data.length) !== index + 1 ? /*#__PURE__*/_react.default.createElement(_MarketShareDescription.ColumnLineSeporatorContainer, {
+      className: "ColumnLineSeporatorContainer_vertical"
+    }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.ColumnLineSeporator, {
+      className: "ColumnLineSeporator"
+    })) : '')));
+    return content;
+  };
+  const displayRows = () => {
+    if (!marketShareData || (marketShareData === null || marketShareData === void 0 ? void 0 : marketShareData.length) === 0) return '';
+    const content = /*#__PURE__*/_react.default.createElement(_MarketShareDescription.AllRowsContainer, {
+      className: "AllRowsContainer"
+    }, marketShareData.map((item, index) => {
+      var _item$rowFooter;
+      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.OneRowContainer, {
+        className: "OneRowContainer"
+      }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.RowTitle, {
+        className: "RowTitle"
+      }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.InfoTextLabel, {
+        className: "InfoTextLabel",
+        dangerouslySetInnerHTML: {
+          __html: item.rowTitle
+        }
+      }), item.showBanner && /*#__PURE__*/_react.default.createElement(_MarketShareDescription.OutBanner, {
+        className: "OutBanner",
+        onClick: () => onBannerClick({
+          eventName: 'onBannerClick',
+          rowName: item.name
+        })
+      }, /*#__PURE__*/_react.default.createElement(_ExportIcon.default, {
+        color: "#212121"
+      }), "View By Banner")), dispalyRowFields(item.fieldsArray), /*#__PURE__*/_react.default.createElement(_MarketShareDescription.InfoTextContainer, {
+        className: "InfoTextContainer"
+      }, item.rowFooter && ((_item$rowFooter = item.rowFooter) === null || _item$rowFooter === void 0 ? void 0 : _item$rowFooter.length) > 0 ? /*#__PURE__*/_react.default.createElement(_MarketShareDescription.IconContainer, {
+        className: "IconContainer"
+      }, /*#__PURE__*/_react.default.createElement(_LampIcon.LampIcon, {
+        width: "23px",
+        height: "19px",
+        fill: iconColor
+      })) : '', /*#__PURE__*/_react.default.createElement(_MarketShareDescription.InfoTextLabel, {
+        className: "InfoTextLabel",
+        dangerouslySetInnerHTML: {
+          __html: item.rowFooter
+        }
+      }))), (marketShareData === null || marketShareData === void 0 ? void 0 : marketShareData.length) !== index + 1 ? /*#__PURE__*/_react.default.createElement(_MarketShareDescription.ColumnLineSeporatorContainer, {
+        className: "ColumnLineSeporatorContainer_horizontal"
+      }, /*#__PURE__*/_react.default.createElement(_MarketShareDescription.ColumnLineSeporator, {
+        className: "ColumnLineSeporator"
+      })) : '');
+    }));
+    return content;
+  };
+  return /*#__PURE__*/_react.default.createElement(_MarketShareDescription.MainContainer, {
+    className: "MainContainer",
+    height: height,
+    width: width
+  }, displayRows());
+};
+exports.MarketShareDescription = MarketShareDescription;
+var _default = exports.default = MarketShareDescription;
+MarketShareDescription.defaultProps = {
+  marketShareData: [],
+  width: '100%',
+  height: '100%',
+  iconColor: '#1B30AA',
+  onBannerClick: () => {},
+  dotCut: false
+};