sag_components 1.0.696 → 1.0.698

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -61,9 +61,12 @@ const BannerEventBox = props => {
61
61
  width: width
62
62
  }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.TitleWrapper, null, formatedBanners(banner).icon, "|", /*#__PURE__*/_react.default.createElement(_BannerEventBox.CardTitle, null, formatedBanners(banner).name)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Description"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, description)), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Block, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Headline, null, "Event Dates:"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Text, null, dates.join(' - '))), /*#__PURE__*/_react.default.createElement(_BannerEventBox.MoreInfo, {
63
63
  onClick: () => onInfoClickHandler(banner)
64
- }, "Creatives"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) => item && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
65
- key: item.name
66
- }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.KeyBlock, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Key, null, item.name), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Count, null, item.items)), index !== data.length - 1 && /*#__PURE__*/_react.default.createElement(_BannerEventBox.Seperator, null)))));
64
+ }, "Creatives"), /*#__PURE__*/_react.default.createElement(_BannerEventBox.DetailsWrapper, null, data === null || data === void 0 ? void 0 : data.map((item, index) => {
65
+ var _item$items;
66
+ return item && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
67
+ key: item.name
68
+ }, /*#__PURE__*/_react.default.createElement(_BannerEventBox.KeyBlock, null, /*#__PURE__*/_react.default.createElement(_BannerEventBox.Key, null, item.name), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_BannerEventBox.Count, null, (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.length)), index !== data.length - 1 && /*#__PURE__*/_react.default.createElement(_BannerEventBox.Seperator, null));
69
+ })));
67
70
  };
68
71
  exports.BannerEventBox = BannerEventBox;
69
72
  var _default = exports.default = BannerEventBox;
@@ -75,13 +78,13 @@ BannerEventBox.defaultProps = {
75
78
  dates: ['2021-06-01', '2021-06-30'],
76
79
  data: [{
77
80
  name: 'Supplier',
78
- items: 7
81
+ items: ['coca', 'cola', 'spring']
79
82
  }, {
80
83
  name: 'Brands',
81
- items: 8
84
+ items: ['coca', 'cola', 'spring', 'cola']
82
85
  }, {
83
86
  name: 'Product Lines',
84
- items: 9
87
+ items: ['coca', 'cola', 'spring']
85
88
  }],
86
89
  onInfoClick: () => {}
87
90
  };
@@ -19,8 +19,7 @@ const BannerEventBoxList = props => {
19
19
  height,
20
20
  data,
21
21
  retailerFile,
22
- toggleColor,
23
- disableToggle
22
+ toggleColor
24
23
  } = props;
25
24
  const [IsItemOpen, setIsItemOpen] = (0, _react.useState)(false);
26
25
  const handleToggle = () => {
@@ -31,14 +30,12 @@ const BannerEventBoxList = props => {
31
30
  }, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.CollapseMenuItemContainer, {
32
31
  onClick: () => handleToggle()
33
32
  }, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ToggleContainer, null, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
34
- disabled: disableToggle,
35
33
  text: "Event Info",
36
34
  leftIcon: "info",
37
35
  rightIcon: "arrowdown",
38
36
  textColor: toggleColor,
39
37
  color: toggleColor
40
38
  }) : /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
41
- disabled: disableToggle,
42
39
  text: "Event Info",
43
40
  leftIcon: "info",
44
41
  rightIcon: "arrowright",
@@ -98,7 +95,6 @@ BannerEventBoxList.defaultProps = {
98
95
  items: ['coca', 'mentos', 'spring', 'cola']
99
96
  }]
100
97
  }],
101
- retailerFile: () => {},
102
- disableToggle: false
98
+ retailerFile: () => {}
103
99
  };
104
100
  var _default = exports.default = BannerEventBoxList;
@@ -10,7 +10,7 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
11
  /* eslint-disable no-nested-ternary */
12
12
  const DropdownWrapper = exports.DropdownWrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n display: flex;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n align-items: flex-start;\n width: ", "; \n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 10px; \n"])), props => props.width || '300px');
13
- const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px; \n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:hover {\n cursor: ", ";\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '28px', props => props.isFocused || props.hasValue ? '23px' : '10px', props => props.disabled ? 'not-allowed' : 'pointer');
13
+ const Label = exports.Label = _styledComponents.default.label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n\n font-size: ", ";\n font-weight: 400;\n padding-inline-end: 5px;\n padding-inline-start: 5px;\n margin-right: 10px; \n z-index: 2;\n color: ", ";\n background-color: white;\n position: absolute;\n top: ", ";\n left: ", ";\n font-family: Poppins; \n transform: translateY(-50%);\n transition: top 0.3s ease, font-size 0.3s ease, color 0.3s ease;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n gap: 4px;\n &:hover {\n cursor: ", ";\n }\n"])), props => props.isFocused || props.hasValue ? '14px' : '14px', props => props.error ? 'red' : props.disabled ? '#888' : props.labelColor, props => props.isFocused || props.hasValue ? '0px' : '28px', props => props.isFocused || props.hasValue ? '23px' : '10px', props => props.disabled ? 'not-allowed' : 'pointer');
14
14
  const InputContainer = exports.InputContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: row;\n flex-wrap: nowrap; \n justify-content: flex-start;\n align-content: center; \n white-space: pre-wrap;\n align-items: center;\n overflow: hidden;\n padding: 0 5px 0 0;\n margin-bottom: 8px;\n gap: 4px;\n width: 100%;\n height: 100%; \n box-sizing: border-box;\n background-color: transparent; \n border: 1px solid ", ";\n font-family: \"Poppins\", sans-serif;\n font-weight: 400;\n font-size: 14px;\n border-radius: 12px;\n outline: none;\n color: ", ";\n \n &:hover {\n border: 1px solid ", ";\n cursor: ", ";\n }\n\n &:focus { \n border: 1px solid ", "; \n }\n \n"])), props => props.disabled ? '#bdbdbd' : props.error ? 'red' : '#B1B1B1', props => props.disabled ? '#888' : '#212121', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121', props => props.disabled ? 'not-allowed' : 'pointer', props => props.disabled ? '#bdbdbd' : props.error ? 'red' : props.labelColor || '#212121');
15
15
  const InputSubContainer = exports.InputSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n\n display: flex; \n flex-direction: column;\n flex-wrap: nowrap; \n align-content: center; \n align-items: flex-start;\n justify-content: center;\n white-space: pre-wrap;\n overflow: hidden;\n padding: 10px 4px 10px 10px;\n width: 100%;\n height: 100%;\n min-height: 53px;\n box-sizing: border-box;\n background-color: transparent; \n border-radius: 12px;\n outline: none;\n color: ", "; \n"])), props => props.disabled ? '#888' : '#212121');
16
16
  const StyledInput = exports.StyledInput = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n width: calc(100% - 10px);\n height: 20px;\n font-family: Poppins;\n font-weight: 400;\n font-size: 14px;\n outline: none; \n background-color: transparent; \n color: ", "; \n border: none;\n"])), props => props.disabled ? '#888' : '#212121');
@@ -18,7 +18,7 @@ const OptionsContainer = exports.OptionsContainer = _styledComponents.default.di
18
18
  var _props$filteredoption;
19
19
  return props.showoptions && ((_props$filteredoption = props.filteredoptions) === null || _props$filteredoption === void 0 ? void 0 : _props$filteredoption.length) > 0 ? 'block' : 'none';
20
20
  });
21
- const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 8px 12px;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 101;\n width: calc(100% - 23px);\n font-family: Poppins; \n border-radius: 4px; \n background-color: white;\n display: ", ";\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n max-height: 400px;\n overflow: auto;\n"])), props => {
21
+ const OptionsSubContainer = exports.OptionsSubContainer = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style: none;\n font-weight: 400;\n margin: 0;\n padding: 8px 12px;\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 101;\n width: calc(100% - 23px);\n font-family: Poppins; \n border-radius: 4px; \n background-color: ", ";\n display: ", ";\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n max-height: 400px;\n overflow: auto;\n"])), props => props.backgroundColor || 'transparent', props => {
22
22
  var _props$filteredoption2;
23
23
  return props.showoptions && ((_props$filteredoption2 = props.filteredoptions) === null || _props$filteredoption2 === void 0 ? void 0 : _props$filteredoption2.length) > 0 ? 'block' : 'none';
24
24
  });
@@ -31,7 +31,8 @@ const FilterPanel = props => {
31
31
  onItemValueChanged,
32
32
  width,
33
33
  height,
34
- disableOKButton
34
+ disableOKButton,
35
+ className
35
36
  } = props;
36
37
  const [FieldsDataState, setFieldsDataState] = (0, _react.useState)(fieldsData);
37
38
  const [Reset, setReset] = (0, _react.useState)(false);
@@ -419,7 +420,7 @@ const FilterPanel = props => {
419
420
  }, displayField(item))));
420
421
  };
421
422
  return /*#__PURE__*/_react.default.createElement(_FilterPanel.ControlsContainer, {
422
- className: "ControlsContainer",
423
+ className: className,
423
424
  height: height,
424
425
  width: width
425
426
  }, /*#__PURE__*/_react.default.createElement(_FilterPanel.AllFieldsContainer, {
@@ -12,9 +12,11 @@ const LinnerDataBox = props => {
12
12
  const {
13
13
  width,
14
14
  height,
15
- data
15
+ data,
16
+ backgroundColor
16
17
  } = props;
17
18
  return /*#__PURE__*/_react.default.createElement(_LinnerDataBox.LinnerContainer, {
19
+ backgroundColor: backgroundColor,
18
20
  width: width || '100%',
19
21
  height: height || '200px'
20
22
  }, data.map(item => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBox, null, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxTitle, null, item.title), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContent, null, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentSign, null, item.sign), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxContentValue, null, ''.concat((0, _CommonFunctions.getFormattedValue)(item.value), (0, _CommonFunctions.getFormattedUnits)(item.value)))), item.extraInfo.map(extraInfoItem => /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCell, null, /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellValue, null, ''.concat('$', (0, _CommonFunctions.getFormattedValue)(extraInfoItem.value), (0, _CommonFunctions.getFormattedUnits)(extraInfoItem.value))), /*#__PURE__*/_react.default.createElement(_LinnerDataBox.DataBoxExtraInfoCellTitle, null, extraInfoItem.title))))));
@@ -23,6 +25,7 @@ exports.LinnerDataBox = LinnerDataBox;
23
25
  var _default = exports.default = LinnerDataBox;
24
26
  LinnerDataBox.defaultProps = {
25
27
  width: '100%',
26
- height: '200px',
27
- data: []
28
+ height: 'auto',
29
+ data: [],
30
+ backgroundColor: '#FFFFFF'
28
31
  };
@@ -8,13 +8,13 @@ exports.LinnerContainer = exports.DataBoxTitle = exports.DataBoxExtraInfoCellVal
8
8
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
- const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-evenly;\n align-items: center;\n width: ", ";\n height: ", ";\n"])), props => props.width, props => props.height);
12
- const DataBox = exports.DataBox = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n width: auto;\n height: 80%;\n"])));
13
- const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: Poppins;\n font-size: 18px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n"])));
14
- const DataBoxContent = exports.DataBoxContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n"])));
15
- const DataBoxContentValue = exports.DataBoxContentValue = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: Poppins;\n font-size: 40px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n"])));
16
- const DataBoxContentSign = exports.DataBoxContentSign = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-family: Poppins;\n font-size: 18px;\n font-style: normal;\n font-weight: 500;\n line-height: normal;\n"])));
11
+ const LinnerContainer = exports.LinnerContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n width: ", ";\n height: ", ";\n background-color: ", ";\n padding: 50px 40px 30px;\n"])), props => props.width, props => props.height, props => props.backgroundColor);
12
+ const DataBox = exports.DataBox = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-weight: 400;\n"])));
13
+ const DataBoxTitle = exports.DataBoxTitle = _styledComponents.default.span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 18px;\n font-weight: 500;\n"])));
14
+ const DataBoxContent = exports.DataBoxContent = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: baseline;\n"])));
15
+ const DataBoxContentSign = exports.DataBoxContentSign = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 18px;\n font-weight: 500;\n"])));
16
+ const DataBoxContentValue = exports.DataBoxContentValue = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 40px;\n font-weight: 500;\n"])));
17
17
  const DataBoxExtraInfo = exports.DataBoxExtraInfo = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n"])));
18
- const DataBoxExtraInfoCell = exports.DataBoxExtraInfoCell = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 5px;\n flex-direction: row;\n"])));
19
- const DataBoxExtraInfoCellTitle = exports.DataBoxExtraInfoCellTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n color: #999;\n font-family: Poppins;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n text-transform: uppercase;\n"])));
20
- const DataBoxExtraInfoCellValue = exports.DataBoxExtraInfoCellValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n color: #999;\n font-family: Poppins;\n font-size: 12px;\n font-style: normal;\n font-weight: 400;\n line-height: normal;\n text-transform: uppercase;\n"])));
18
+ const DataBoxExtraInfoCell = exports.DataBoxExtraInfoCell = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 5px;\n"])));
19
+ const DataBoxExtraInfoCellTitle = exports.DataBoxExtraInfoCellTitle = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n color: #999;\n font-size: 12px;\n text-transform: uppercase;\n"])));
20
+ const DataBoxExtraInfoCellValue = exports.DataBoxExtraInfoCellValue = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n color: #999;\n font-size: 12px;\n text-transform: uppercase;\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.696",
3
+ "version": "1.0.698",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {