sag_components 1.0.864 → 1.0.866

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.
@@ -26,6 +26,7 @@ const BannerEventBoxList = props => {
26
26
  data,
27
27
  retailer,
28
28
  retailerFile,
29
+ showLoader,
29
30
  showEventDetails,
30
31
  toggleColor,
31
32
  cardsContent,
@@ -60,7 +61,11 @@ const BannerEventBoxList = props => {
60
61
  className: className
61
62
  }, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.CollapseMenuItemContainer, {
62
63
  onClick: () => handleToggle()
63
- }, /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.MainDetails, null, !cardsContent && bannersIcon(), showEventDetails ? /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.SubDetails, null, eventName, ' ', /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ProductName, null, "|"), ' ', eventType, count && /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ProductName, null, ': ', count, ' ', count > 1 ? 'Products' : 'Product')) : ' '), /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ToggleContainer, null, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
64
+ }, showLoader ? /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.LoaderWrapper, {
65
+ id: "LoaderWrapper"
66
+ }, /*#__PURE__*/_react.default.createElement("span", null, "Processing Data"), /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.Loader, {
67
+ loaderColor: loaderColor
68
+ })) : /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.MainDetails, null, !cardsContent && bannersIcon(), showEventDetails ? /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.SubDetails, null, eventName, ' ', /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ProductName, null, "|"), ' ', eventType, count && /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ProductName, null, ': ', count, ' ', count > 1 ? 'Products' : 'Product')) : ' '), /*#__PURE__*/_react.default.createElement(_BannerEventBoxList.ToggleContainer, null, IsItemOpen ? /*#__PURE__*/_react.default.createElement(_LinkButton.default, {
64
69
  disabled: disableToggle,
65
70
  text: linkText,
66
71
  leftIcon: "info",
@@ -133,6 +138,7 @@ BannerEventBoxList.defaultProps = {
133
138
  retailerFile: () => {},
134
139
  cardsContent: true,
135
140
  linkText: 'Event Info',
141
+ showLoader: false,
136
142
  showEventDetails: true,
137
143
  disableToggle: true,
138
144
  children: null,
@@ -5,17 +5,18 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
5
5
  Object.defineProperty(exports, "__esModule", {
6
6
  value: true
7
7
  });
8
- exports.ToggleContainer = exports.SubDetails = exports.ProductName = exports.MainDetails = exports.MainContainer = exports.Loader = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = void 0;
8
+ exports.ToggleContainer = exports.SubDetails = exports.ProductName = exports.MainDetails = exports.MainContainer = exports.LoaderWrapper = exports.Loader = exports.CollapseMenuItemMainContainer = exports.CollapseMenuItemContentContainer = exports.CollapseMenuItemContainer = void 0;
9
9
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
10
10
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
11
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
11
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
12
12
  const CollapseMenuItemMainContainer = exports.CollapseMenuItemMainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n background: white;\n padding: 20px 24px;\n box-shadow: 0px 8px 20px -10px rgba(0, 0, 0, 0.2);\n"])));
13
13
  const CollapseMenuItemContainer = exports.CollapseMenuItemContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: space-between;\n"])));
14
- const rotation = (0, _styledComponents.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n 0% { transform: rotate(0deg) }\n 100% { transform: rotate(360deg) }\n"])));
15
- const Loader = exports.Loader = _styledComponents.default.span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n width: 18px;\n height: 18px;\n border-radius: 50%;\n display: inline-block;\n border-top: 1px solid ", ";\n border-right: 1px solid transparent;\n box-sizing: border-box;\n animation: ", " 1s linear infinite;\n"])), props => props.loaderColor, rotation);
16
- const MainDetails = exports.MainDetails = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n padding-left: 20px;\n"])));
17
- const SubDetails = exports.SubDetails = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n font-weight: 400;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
18
- const ProductName = exports.ProductName = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n color: #8B8989;\n"])));
19
- const ToggleContainer = exports.ToggleContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n cursor: 'pointer';\n display: flex;\n align-items: center;\n"])));
20
- const CollapseMenuItemContentContainer = exports.CollapseMenuItemContentContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 14px;\n margin-top: 12px;\n border-top: 1px solid #D0D0D0;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
21
- const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n display: flex;\n gap: 20px;\n padding: 20px 0 4px;\n"])), props => props.width, props => props.height);
14
+ const rotation = (0, _styledComponents.keyframes)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n 0%, 100% {\n box-shadow: \n 0px -8.32px 0px 0px #ffffff, \n 5.76px -5.76px 0 0px rgba(0,0,0, 0.2), \n 8px 0px 0 0px rgba(0,0,0, 0.2), \n 5.6px 5.6px 0 0px rgba(0,0,0, 0.2), \n 0px 8px 0 0px rgba(0,0,0, 0.2), \n -5.76px 5.76px 0 0px rgba(0,0,0, 0.2), \n -8.32px 0px 0 0px rgba(0,0,0, 0.5), \n -5.76px -5.76px 0 0px rgba(0,0,0, 0.7);\n }\n\n 12.5% {\n box-shadow: \n 0px -8.32px 0px 0px rgba(0,0,0, 0.7), \n 5.76px -5.76px 0 0px #ffffff, \n 8px 0px 0 0px rgba(0,0,0, 0.2), \n 5.6px 5.6px 0 0px rgba(0,0,0, 0.2), \n 0px 8px 0 0px rgba(0,0,0, 0.2), \n -5.76px 5.76px 0 0px rgba(0,0,0, 0.2), \n -8.32px 0px 0 0px rgba(0,0,0, 0.2), \n -5.76px -5.76px 0 0px rgba(0,0,0, 0.5);\n }\n\n 25% {\n box-shadow: \n 0px -8.32px 0px 0px rgba(0,0,0, 0.5), \n 5.76px -5.76px 0 0px rgba(0,0,0, 0.7), \n 8px 0px 0 0px #ffffff, \n 5.6px 5.6px 0 0px rgba(0,0,0, 0.2), \n 0px 8px 0 0px rgba(0,0,0, 0.2), \n -5.76px 5.76px 0 0px rgba(0,0,0, 0.2), \n -8.32px 0px 0 0px rgba(0,0,0, 0.2), \n -5.76px -5.76px 0 0px rgba(0,0,0, 0.2);\n }\n\n 37.5% {\n box-shadow: \n 0px -8.32px 0px 0px rgba(0,0,0, 0.2), \n 5.76px -5.76px 0 0px rgba(0,0,0, 0.5), \n 8px 0px 0 0px rgba(0,0,0, 0.7), \n 5.6px 5.6px 0 0px #ffffff, \n 0px 8px 0 0px rgba(0,0,0, 0.2), \n -5.76px 5.76px 0 0px rgba(0,0,0, 0.2), \n -8.32px 0px 0 0px rgba(0,0,0, 0.2), \n -5.76px -5.76px 0 0px rgba(0,0,0, 0.2);\n }\n\n 50% {\n box-shadow: \n 0px -8.32px 0px 0px rgba(0,0,0, 0.2), \n 5.76px -5.76px 0 0px rgba(0,0,0, 0.2), \n 8px 0px 0 0px rgba(0,0,0, 0.5), \n 5.6px 5.6px 0 0px rgba(0,0,0, 0.7), \n 0px 8px 0 0px #ffffff, \n -5.76px 5.76px 0 0px rgba(0,0,0, 0.2), \n -8.32px 0px 0 0px rgba(0,0,0, 0.2), \n -5.76px -5.76px 0 0px rgba(0,0,0, 0.2);\n }\n\n 62.5% {\n box-shadow: \n 0px -8.32px 0px 0px rgba(0,0,0, 0.2), \n 5.76px -5.76px 0 0px rgba(0,0,0, 0.2), \n 8px 0px 0 0px rgba(0,0,0, 0.2), \n 5.6px 5.6px 0 0px rgba(0,0,0, 0.5), \n 0px 8px 0 0px rgba(0,0,0, 0.7), \n -5.76px 5.76px 0 0px #ffffff, \n -8.32px 0px 0 0px rgba(0,0,0, 0.2), \n -5.76px -5.76px 0 0px rgba(0,0,0, 0.2);\n }\n\n 75% {\n box-shadow: \n 0px -8.32px 0px 0px rgba(0,0,0, 0.2), \n 5.76px -5.76px 0 0px rgba(0,0,0, 0.2), \n 8px 0px 0 0px rgba(0,0,0, 0.2), \n 5.6px 5.6px 0 0px rgba(0,0,0, 0.2), \n 0px 8px 0 0px rgba(0,0,0, 0.5), \n -5.76px 5.76px 0 0px rgba(0,0,0, 0.7), \n -8.32px 0px 0 0px #ffffff, \n -5.76px -5.76px 0 0px rgba(0,0,0, 0.2);\n }\n\n 87.5% {\n box-shadow: \n 0px -8.32px 0px 0px rgba(0,0,0, 0.2), \n 5.76px -5.76px 0 0px rgba(0,0,0, 0.2), \n 8px 0px 0 0px rgba(0,0,0, 0.2), \n 5.6px 5.6px 0 0px rgba(0,0,0, 0.2), \n 0px 8px 0 0px rgba(0,0,0, 0.2), \n -5.76px 5.76px 0 0px rgba(0,0,0, 0.5), \n -8.32px 0px 0 0px rgba(0,0,0, 0.7), \n -5.76px -5.76px 0 0px #ffffff;\n }\n"])));
15
+ const LoaderWrapper = exports.LoaderWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n display: flex;\n gap: 20px;\n align-items: center;\n color: #212121;\n"])));
16
+ const Loader = exports.Loader = _styledComponents.default.span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 10px;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n position: relative;\n text-indent: -9999em;\n animation: ", " 1.1s infinite ease;\n transform: translateZ(0);\n"])), rotation);
17
+ const MainDetails = exports.MainDetails = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n gap: 10px;\n font-size: 16px;\n padding-left: 20px;\n"])));
18
+ const SubDetails = exports.SubDetails = _styledComponents.default.span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 16px;\n font-weight: 400;\n @media (max-width: 1536px) {\n font-size: 14px;\n }\n @media (max-width: 1366px) {\n font-size: 12px;\n }\n"])));
19
+ const ProductName = exports.ProductName = _styledComponents.default.span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n color: #8b8989;\n"])));
20
+ const ToggleContainer = exports.ToggleContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n cursor: \"pointer\";\n display: flex;\n align-items: center;\n"])));
21
+ const CollapseMenuItemContentContainer = exports.CollapseMenuItemContentContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 14px;\n margin-top: 12px;\n border-top: 1px solid #d0d0d0;\n @media (max-width: 1536px) {\n font-size: 12px;\n }\n"])));
22
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n width: ", ";\n height: ", ";\n display: flex;\n gap: 20px;\n padding: 20px 0 4px;\n"])), props => props.width, props => props.height);
@@ -12,7 +12,7 @@ const MainContainer = exports.MainContainer = _styledComponents.default.div(_tem
12
12
  const ToggleBannersWrapper = exports.ToggleBannersWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n"])));
13
13
  const ToggleBanners = exports.ToggleBanners = _styledComponents.default.button(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n gap: 4px;\n color: #2d8de7;\n border: 1px solid #c7e4ff;\n border-radius: 30px;\n background-color: #edf6ff;\n padding: 6px 12px;\n cursor: pointer;\n &.partial {\n color: #757575;\n border: 1px solid #ececec;\n background-color: #ececec;\n }\n > span {\n white-space: nowrap;\n }\n"])));
14
14
  const ArrowWrap = exports.ArrowWrap = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n > svg {\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n }\n &.opened {\n svg {\n transform: rotate(0deg);\n }\n }\n"])));
15
- const ToggledDropdown = exports.ToggledDropdown = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n margin-top: 10px;\n border-radius: 5px;\n background-color: white;\n overflow: hidden;\n z-index: 99;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])));
15
+ const ToggledDropdown = exports.ToggledDropdown = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n margin-top: 10px;\n border-radius: 5px;\n background-color: white;\n overflow: hidden;\n z-index: 99;\n\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);\n"])));
16
16
  const ToggledDropdownTitle = exports.ToggledDropdownTitle = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 14px;\n font-weight: 600;\n padding: 8px 12px;\n margin-bottom: 12px;\n white-space: nowrap;\n"])));
17
17
  const ToggledDropdownList = exports.ToggledDropdownList = _styledComponents.default.ul(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n list-style-type: none;\n padding: 0;\n margin: 0;\n li {\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 6px;\n padding: 14px 12px;\n align-items: center;\n cursor: pointer;\n &:hover {\n background-color: #f7f8fa;\n }\n\n &.unchecked {\n color: #cfcfcf;\n svg {\n filter: grayscale(1);\n }\n }\n\n > svg {\n min-width: 50px;\n }\n\n > span {\n white-space: nowrap;\n }\n }\n"])));
18
18
  const IconWrap = exports.IconWrap = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n min-width: 54px;\n text-align: center;\n"])));
@@ -8,8 +8,8 @@ exports.Label = exports.InputCommit = exports.IconWrapper = exports.ButtonItem =
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;
11
- const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n //position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center; \n width: ", ";\n height: ", ";\n"])), props => props.width, props => props.height);
12
- const ButtonItem = exports.ButtonItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center;\n flex-wrap: nowrap;\n overflow: hidden;\n width: ", ";\n height: ", "; \n color: ", "; \n border: ", "; \n border-radius: 12px;\n background-color: ", ";\n box-sizing: border-box;\n gap: 8px; \n padding: ", "; \n &:hover {\n background-color: ", ";\n border-color: ", "; \n color: ", "; \n box-shadow: ", ";\n cursor: ", ";\n }\n &.ButtonItem-clicked {\n background-color: ", ";\n cursor: pointer;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n transition: background-color 0.3s, color 0.3s;\n }\n"])), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
13
- const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-family: 'Poppins';\n font-style: normal;\n font-weight: 400; \n pointer-events: none;\n font-size: 14px;\n user-select: none; \n"])));
14
- const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center; \n"])));
15
- const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif; \n border: ", ";\n border-radius: 8px;\n font-weight: 400;\n font-size: 14px; \n width: ", ";\n height: ", "; \n color: ", "; \n border: ", "; \n border-radius: 12px;\n background-color: ", "; \n cursor: pointer;\n padding: ", "; \n \n &:hover {\n background-color: ", ";\n border-color: ", "; \n color: ", "; \n box-shadow: ", ";\n cursor: ", ";\n }\n &.InputCommit-clicked {\n background-color: ", ";\n cursor: pointer;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n transition: background-color 0.3s, color 0.3s;\n }\n"])), props => "0px solid ".concat(props.disabled ? props.disabled_border_color : props.hover_border_color), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
11
+ const ButtonContainer = exports.ButtonContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n //position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center;\n width: ", ";\n height: ", ";\n"])), props => props.width, props => props.height);
12
+ const ButtonItem = exports.ButtonItem = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center;\n flex-wrap: nowrap;\n overflow: hidden;\n width: ", ";\n height: ", ";\n color: ", ";\n border: ", ";\n border-radius: 12px;\n background-color: ", ";\n box-sizing: border-box;\n gap: 8px;\n padding: ", ";\n &:hover {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n box-shadow: ", ";\n cursor: ", ";\n }\n &.ButtonItem-clicked {\n background-color: ", ";\n cursor: pointer;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n transition: background-color 0.3s, color 0.3s;\n }\n"])), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
13
+ const Label = exports.Label = _styledComponents.default.label(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\";\n font-style: normal;\n font-weight: 400;\n pointer-events: none;\n font-size: 14px;\n user-select: none;\n"])));
14
+ const IconWrapper = exports.IconWrapper = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n align-content: center;\n"])));
15
+ const InputCommit = exports.InputCommit = _styledComponents.default.input(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n border: ", ";\n border-radius: 8px;\n font-weight: 400;\n font-size: 14px;\n width: ", ";\n height: ", ";\n color: ", ";\n border: ", ";\n border-radius: 12px;\n background-color: ", ";\n cursor: pointer;\n padding: ", ";\n\n &:hover {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n box-shadow: ", ";\n cursor: ", ";\n }\n &.InputCommit-clicked {\n background-color: ", ";\n cursor: pointer;\n box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);\n transition: background-color 0.3s, color 0.3s;\n }\n"])), props => "0px solid ".concat(props.disabled ? props.disabled_border_color : props.hover_border_color), props => props.width, props => props.height, props => props.disabled ? props.disabled_text_color : props.text_color, props => "1px solid ".concat(props.disabled ? props.disabled_border_color : props.border_color), props => props.disabled ? props.disabled_background_color : props.background_color, props => props.padding, props => props.disabled ? props.disabled_backgroundColor : props.hover_background_color, props => props.disabled ? props.disabled_border_color : props.hover_border_color, props => props.disabled ? props.disabled_text_color : props.hover_text_color, props => props.disabled ? '' : '5px 5px 10px 0px rgba(0, 0, 0, 0.2)', props => !props.disabled ? 'pointer' : 'default', props => props.background_color);
@@ -9,6 +9,6 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
9
9
  var _styledComponents = _interopRequireDefault(require("styled-components"));
10
10
  var _templateObject, _templateObject2, _templateObject3, _templateObject4;
11
11
  const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n height: ", ";\n width: ", ";\n font-size: ", ";\n font-family: Poppins;\n margin: 0;\n"])), props => props.height, props => props.width, props => props.fontSize);
12
- const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n border-radius: ", ";\n background: ", ";\n border: 1px solid ", ";\n cursor: ", ";\n"])), props => props.borderRadius, props => props.backgroundColor, props => props.borderColor, props => props.disabled ? "default" : "pointer");
12
+ const Controls = exports.Controls = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n border-radius: ", ";\n background: ", ";\n border: 1px solid ", ";\n cursor: ", ";\n"])), props => props.borderRadius, props => props.backgroundColor, props => props.borderColor, props => props.disabled ? 'default' : 'pointer');
13
13
  const Label = exports.Label = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n padding: 0 10px 0 10px;\n color: ", ";\n @media (max-width: 1536px) {\n font-size: 11px;\n }\n @media (max-width: 1366px) {\n font-size: 10px;\n }\n"])), props => props.textColor);
14
14
  const CheckBoxButtonIconContainer = exports.CheckBoxButtonIconContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin: 0 0 0 10px;\n"])));
@@ -8,11 +8,11 @@ exports.TitleWrapper = exports.Strip = exports.MainContainer = exports.MainCard
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;
11
- const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n /* color: ", "; */\n background-color: white;\n width: ", ";\n height: ", ";\n border-radius: 8px;\n border: 1px solid #F2F2F2;\n"])), props => props.textColor, props => props.width, props => props.height);
12
- const TitleWrapper = exports.TitleWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 22px 16px;\n border-radius: 8px 8px 0 0;\n background-color: #F7F8FA;\n display: flex;\n gap: 10px;\n align-items: baseline;\n"])));
13
- const CardTitle = exports.CardTitle = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 18px;\n font-weight: 500;\n"])));
14
- const MainCard = exports.MainCard = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: 12px 20px 16px;\n\n > #ButtonWrapper {\n margin: 0 auto;\n a {\n padding: 6px 12px;\n }\n }\n"])));
15
- const List = exports.List = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n list-style-type: none;\n padding: 0;\n margin: 0 0 20px;\n font-size: 16px;\n li {\n line-height: 1.2;\n &:not(:last-child) {\n margin-bottom: 16px;\n }\n }\n span {\n font-weight: 600;\n }\n"])));
16
- const Strip = exports.Strip = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n font-weight: 400;\n padding: 2px;\n margin-bottom: 15px;\n text-align: center;\n border-radius: 8px;\n background-color: #F7F8FA;\n"])));
17
- const IconButton = exports.IconButton = _styledComponents.default.button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n background-color: transparent;\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 6px;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n border: 1px solid #B1B1B1;\n border-radius: 12px;\n padding: 6px 16px;\n cursor: pointer;\n transition: box-shadow .3s ease;\n &:hover, &:focus {\n box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n }\n"])));
18
- const ArrowWrap = exports.ArrowWrap = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)([" \n > svg {\n transform: rotate(180deg);\n transition: transform .3s ease;\n }\n &.opened {\n svg {\n transform: rotate(0deg);\n } \n }\n"])));
11
+ const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n font-family: \"Poppins\", sans-serif;\n background-color: white;\n width: ", ";\n height: ", ";\n border-radius: 8px;\n border: 1px solid #f2f2f2;\n"])), props => props.width, props => props.height);
12
+ const TitleWrapper = exports.TitleWrapper = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n padding: 22px 16px;\n border-radius: 8px 8px 0 0;\n background-color: #f7f8fa;\n display: flex;\n gap: 10px;\n align-items: baseline;\n"])));
13
+ const CardTitle = exports.CardTitle = _styledComponents.default.h3(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 18px;\n font-weight: 500;\n"])));
14
+ const MainCard = exports.MainCard = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n padding: 12px 20px 16px;\n\n > #ButtonWrapper {\n margin: 0 auto;\n a {\n padding: 6px 12px;\n }\n }\n"])));
15
+ const List = exports.List = _styledComponents.default.ul(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n list-style-type: none;\n padding: 0;\n margin: 0 0 20px;\n font-size: 16px;\n li {\n line-height: 1.2;\n &:not(:last-child) {\n margin-bottom: 16px;\n }\n }\n span {\n font-weight: 600;\n }\n"])));
16
+ const Strip = exports.Strip = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 12px;\n font-weight: 400;\n padding: 2px;\n margin-bottom: 15px;\n text-align: center;\n border-radius: 8px;\n background-color: #f7f8fa;\n"])));
17
+ const IconButton = exports.IconButton = _styledComponents.default.button(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n background-color: transparent;\n font-size: 14px;\n font-weight: 400;\n display: flex;\n gap: 6px;\n align-items: center;\n justify-content: center;\n margin: 0 auto;\n border: 1px solid #b1b1b1;\n border-radius: 12px;\n padding: 6px 16px;\n cursor: pointer;\n transition: box-shadow 0.3s ease;\n &:hover,\n &:focus {\n box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.1);\n }\n"])));
18
+ const ArrowWrap = exports.ArrowWrap = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n > svg {\n transform: rotate(180deg);\n transition: transform 0.3s ease;\n }\n &.opened {\n svg {\n transform: rotate(0deg);\n }\n }\n"])));
@@ -8,13 +8,13 @@ exports.StyledContainer = exports.OutBanner = exports.OneColumnContainerMainDiv
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 StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n width: ", ";\n height: ", ";\n overflow: ", ";\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n background-color: white; \n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.width, props => props.height, props => props.overflow);
12
- const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n /* align-items: flex-start; */\n justify-content: center; \n background-color: white;\n width: ", ";\n height: ", ";\n display: ", ";\n grid-template-columns: ", ";\n > * {\n box-sizing: border-box;\n }\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
11
+ const StyledContainer = exports.StyledContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n font-family: \"Poppins\", sans-serif;\n width: ", ";\n height: ", ";\n overflow: ", ";\n display: flex;\n position: relative;\n align-items: center;\n justify-content: center;\n border-radius: 10px;\n background-color: white;\n box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);\n"])), props => props.width, props => props.height, props => props.overflow);
12
+ const OneColumnContainerMainDiv = exports.OneColumnContainerMainDiv = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n /* align-items: flex-start; */\n justify-content: center;\n background-color: white;\n width: ", ";\n height: ", ";\n display: ", ";\n grid-template-columns: ", ";\n > * {\n box-sizing: border-box;\n }\n"])), props => props.width, props => props.height, props => props.display, props => props.gridTemplateColumns);
13
13
  const InfoTextContainer = exports.InfoTextContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n background: white;\n overflow: auto;\n padding: 20px;\n box-sizing: border-box;\n"])));
14
14
  const InfoTitleLabel = exports.InfoTitleLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 600;\n color: black;\n margin: 0px 0px 10px 0px;\n font-size: 18px;\n line-height: 32px;\n"])));
15
15
  const InfoTextLabel = exports.InfoTextLabel = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n font-size: 14px;\n line-height: 20px;\n font-weight: 400;\n"])));
16
16
  const ColumnTitle = exports.ColumnTitle = _styledComponents.default.span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n color: black;\n display: inline-block;\n font-size: 20px;\n font-weight: 500;\n padding: 20px 20px 0;\n"])));
17
17
  const IconContainer = exports.IconContainer = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n width: 20px;\n height: 20px;\n top: 10px;\n right: 10px;\n position: absolute;\n"])));
18
18
  const LoadingDiv = exports.LoadingDiv = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n gap: 10px;\n"])));
19
- const BannerContainer = exports.BannerContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n z-index: 99;\n top: 18px;\n right: ", "; \n user-select: none;\n"])), props => props.right);
20
- const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)([" \n display: flex;\n justify-content: flex-end;\n align-items: center; \n gap: 8px; \n font-size: 14px;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n @media (max-width: 1536px) {\n font-size: 13px;\n }\n > svg {\n width: 14px;\n height: 14px;\n @media (max-width: 1536px) {\n width: 13px;\n height: 13px;\n }\n @media (max-width: 1366px) {\n width: 12px;\n height: 12px;\n }\n }\n"])), props => props.textColor);
19
+ const BannerContainer = exports.BannerContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n z-index: 99;\n top: 18px;\n right: ", ";\n user-select: none;\n"])), props => props.right);
20
+ const OutBanner = exports.OutBanner = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n justify-content: flex-end;\n align-items: center;\n gap: 8px;\n font-size: 14px;\n font-weight: 400;\n color: ", ";\n cursor: pointer;\n @media (max-width: 1536px) {\n font-size: 13px;\n }\n > svg {\n width: 14px;\n height: 14px;\n @media (max-width: 1536px) {\n width: 13px;\n height: 13px;\n }\n @media (max-width: 1366px) {\n width: 12px;\n height: 12px;\n }\n }\n"])), props => props.textColor);
@@ -14,5 +14,5 @@ const TooltipDiv = exports.TooltipDiv = _styledComponents.default.div(_templateO
14
14
  const TooltipLabel = exports.TooltipLabel = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 400;\n width: fit-content;\n"])));
15
15
  const TooltipTitle = exports.TooltipTitle = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n color: #212121;\n font-size: 14px;\n font-weight: 600;\n"])));
16
16
  const Title = exports.Title = _styledComponents.default.h5(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n font-weight: 500;\n font-size: 18px;\n line-height: 20px;\n margin: 0 0 30px;\n @media (max-width: 1536px) {\n font-size: 16px;\n margin: 0 0 20px;\n }\n @media (max-width: 1366px) {\n font-size: 14px;\n }\n"])));
17
- const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 0.7em;\n\n"])));
17
+ const LabelBoldText = exports.LabelBoldText = _styledComponents.default.tspan(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 0.7em;\n"])));
18
18
  const LabelText = exports.LabelText = _styledComponents.default.tspan(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n font-size: 0.6em;\n"])));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sag_components",
3
- "version": "1.0.864",
3
+ "version": "1.0.866",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "scripts": {