sag_components 1.0.85 → 1.0.86-7.2

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

@@ -0,0 +1,267 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CollapseHeader = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _EyeIcon = require("../../icons/EyeIcon");
+var _FoodLionIcon = require("../../icons/FoodLionIcon");
+var _GiantFoodIcon = require("../../icons/GiantFoodIcon");
+var _HannafordIcon = require("../../icons/HannafordIcon");
+var _StopAndShopIcon = require("../../icons/StopAndShopIcon");
+var _TheGiantCompanyIcon = require("../../icons/TheGiantCompanyIcon");
+var _ComboBoxArrowDownIcon = require("../../icons/ComboBoxArrowDownIcon");
+var _ComboBoxArrowUpIcon = require("../../icons/ComboBoxArrowUpIcon");
+var _ListBox = require("../ListBox/ListBox");
+var _CollapseHeader = require("./CollapseHeader.style");
+const CollapseHeader = props => {
+  var _data$eventDescriptio, _data$objectivesDescr, _data$eventDatesValue, _data$eventDatesValue2;
+  const {
+    className,
+    showRetailerIcon,
+    showPeriodIcon,
+    viewCreativeRetailersData,
+    data,
+    viewCreativeOnClick,
+    width,
+    height,
+    textcolor,
+    showDraft,
+    disabled
+  } = props;
+  const [retailersDataState, setRetailersDataState] = (0, _react.useState)(null);
+  const [viewCreativeListBoxOpenedState, setViewCreativeListBoxOpenedState] = (0, _react.useState)(false);
+  const viewCreativeContainerRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(() => {
+    let newData = [];
+    if (viewCreativeRetailersData && viewCreativeRetailersData.length > 0) {
+      newData = viewCreativeRetailersData === null || viewCreativeRetailersData === void 0 ? void 0 : viewCreativeRetailersData.map(item => ({
+        ...item,
+        checked: false,
+        disabled: false
+      }));
+      setRetailersDataState(newData);
+    } else {
+      setRetailersDataState(null);
+    }
+  }, [viewCreativeRetailersData]);
+  const getRetailerIcon = retailerName => {
+    switch (retailerName) {
+      case 'Food Lion':
+        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, /*#__PURE__*/_react.default.createElement(_FoodLionIcon.FoodLionIcon, {
+          width: "90",
+          height: "20"
+        }), "\xA0");
+      case 'Hannaford':
+        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, /*#__PURE__*/_react.default.createElement(_HannafordIcon.HannafordIcon, {
+          width: "90",
+          height: "20"
+        }), "\xA0");
+      case 'Giant Food':
+        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, /*#__PURE__*/_react.default.createElement(_GiantFoodIcon.GiantFoodIcon, {
+          width: "60",
+          height: "20"
+        }), "\xA0");
+      case 'The Giant Company':
+        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, /*#__PURE__*/_react.default.createElement(_TheGiantCompanyIcon.TheGiantCompanyIcon, {
+          width: "60",
+          height: "20"
+        }), "\xA0");
+      case 'Stop&Shop':
+        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, /*#__PURE__*/_react.default.createElement(_StopAndShopIcon.StopAndShopIcon, {
+          width: "90",
+          height: "20"
+        }), "\xA0");
+      default:
+        return /*#__PURE__*/_react.default.createElement(_CollapseHeader.RetailerIconContainer, {
+          id: "RetailerIconContainer"
+        }, retailerName, retailerName && /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
+          className: "FieldsDelimiter"
+        }, " | "));
+    }
+  };
+  const viewCreativeOnClickHandler = () => {
+    if (retailersDataState && retailersDataState.length > 0) {
+      setViewCreativeListBoxOpenedState(!viewCreativeListBoxOpenedState);
+    } else {
+      viewCreativeOnClick({
+        name: viewCreativeOnClick
+      });
+    }
+  };
+  const listBoxViewCreativeOnClickHandler = props => {
+    var _props$selectedData, _props$selectedData2;
+    const selectedRetailer = ((_props$selectedData = props.selectedData) === null || _props$selectedData === void 0 ? void 0 : _props$selectedData.length) > 0 ? props.selectedData[0].label : null;
+    if (selectedRetailer) {
+      viewCreativeOnClick({
+        selectedRetailer
+      });
+    }
+    if (((_props$selectedData2 = props.selectedData) === null || _props$selectedData2 === void 0 ? void 0 : _props$selectedData2.length) > 0) {
+      setViewCreativeListBoxOpenedState(false);
+    }
+  };
+  const getViewCreativeContainerLeft = () => {
+    const {
+      offsetLeft
+    } = viewCreativeContainerRef.current;
+    return offsetLeft.toString().concat('', 'px');
+  };
+  const getViewCreativeContainerTop = () => {
+    const {
+      offsetTop
+    } = viewCreativeContainerRef.current;
+    return (offsetTop + 33).toString().concat('', 'px');
+  };
+  return /*#__PURE__*/_react.default.createElement(_CollapseHeader.MainContainer, {
+    id: "CollapseHeader",
+    className: className,
+    height: height,
+    width: width,
+    textcolor: textcolor
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.PanelContainer, {
+    id: "PanelContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.EventNameAndViewCreativeContainer, {
+    id: "EventNameAndViewCreativeContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.EventNameViewCreativeSubContainer, {
+    id: "EventNameViewCreativeSubContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeButtonAndListBoxContainer, {
+    id: "ViewCreativeButtonAndListBoxContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeContainer, {
+    id: "ViewCreativeContainer",
+    ref: viewCreativeContainerRef,
+    onClick: viewCreativeOnClickHandler,
+    disabled: disabled
+  }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
+    width: "12",
+    height: "12"
+  }), /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeTextField, {
+    id: "ViewCreativeTextField"
+  }, "View creative"), retailersDataState && (retailersDataState === null || retailersDataState === void 0 ? void 0 : retailersDataState.length) > 0 && (viewCreativeListBoxOpenedState ? /*#__PURE__*/_react.default.createElement(_ComboBoxArrowUpIcon.ComboBoxArrowUpIcon, null) : /*#__PURE__*/_react.default.createElement(_ComboBoxArrowDownIcon.ComboBoxArrowDownIcon, null))), viewCreativeListBoxOpenedState && /*#__PURE__*/_react.default.createElement(_CollapseHeader.ViewCreativeListBoxContainer, {
+    id: "ViewCreativeListBoxContainer",
+    top: getViewCreativeContainerTop(),
+    left: getViewCreativeContainerLeft(),
+    width: "100%",
+    height: "100%",
+    onMouseLeave: () => {
+      setViewCreativeListBoxOpenedState(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_ListBox.ListBox, {
+    id: "ListBox",
+    data: retailersDataState,
+    buttonsBackgroundColorChecked: "#B1B1B1",
+    buttonsBackgroundColorUnchecked: "#FFF",
+    buttonsBorderColor: "##B1B1B1",
+    buttonsIconColor: "#212121",
+    buttonsTextColorChecked: "#212121",
+    buttonsTextColorUnchecked: "#212121",
+    height: "100%",
+    width: "100%",
+    onClick: props => {
+      listBoxViewCreativeOnClickHandler(props);
+    }
+  })))), showDraft && /*#__PURE__*/_react.default.createElement(_CollapseHeader.DraftTag, null, "DRAFT")), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValuesContainer, {
+    id: "FilterValuesContainer"
+  }, showRetailerIcon && /*#__PURE__*/_react.default.createElement(_CollapseHeader.Retailer, {
+    id: "Retailer"
+  }, getRetailerIcon(data.retailer)), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
+    className: "FilterValue"
+  }, data.eventType), data.externalEventDescription && data.externalEventDescription !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
+    className: "FilterValue"
+  }, data.externalEventDescription)), data.externalEventID && data.externalEventID !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
+    className: "FilterValue"
+  }, data.externalEventID)), data.storeType && data.storeType !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
+    className: "FilterValue"
+  }, data.storeType)), data.category && data.category !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
+    className: "FilterValue"
+  }, data.category)), data.supplier && data.supplier !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
+    className: "FilterValue"
+  }, data.supplier)), data.brand && data.brand !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.FieldsDelimiter, {
+    className: "FieldsDelimiter"
+  }, " | "), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValue, {
+    className: "FilterValue"
+  }, data.brand))), /*#__PURE__*/_react.default.createElement(_CollapseHeader.FilterValuesContainer, null, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectiesContainer, {
+    id: "ObjectiesContainer",
+    showPeriodIcon: showPeriodIcon
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesDescription, {
+    id: "ObjectivesDescription"
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesTitle, {
+    id: "ObjectivesTitle"
+  }, (data === null || data === void 0 ? void 0 : (_data$eventDescriptio = data.eventDescription) === null || _data$eventDescriptio === void 0 ? void 0 : _data$eventDescriptio.length) > 0 ? 'Event Description:  ' : ''), data.eventDescription))), /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectiesAndPeriodsContainer, {
+    id: "ObjectiesAndPeriodsContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectiesContainer, {
+    id: "ObjectiesContainer",
+    showPeriodIcon: showPeriodIcon
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesDescription, {
+    id: "ObjectivesDescription"
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.ObjectivesTitle, {
+    id: "ObjectivesTitle"
+  }, (data === null || data === void 0 ? void 0 : (_data$objectivesDescr = data.objectivesDescription) === null || _data$objectivesDescr === void 0 ? void 0 : _data$objectivesDescr.length) > 0 ? 'Objectives:  ' : ''), data.objectivesDescription)), showPeriodIcon && /*#__PURE__*/_react.default.createElement(_CollapseHeader.PeriodsContainer, {
+    id: "PeriodsContainer"
+  }, /*#__PURE__*/_react.default.createElement(_CollapseHeader.SubLineContainer, {
+    id: "SubLineContainer"
+  }, (data === null || data === void 0 ? void 0 : (_data$eventDatesValue = data.eventDatesValue) === null || _data$eventDatesValue === void 0 ? void 0 : _data$eventDatesValue.length) > 0 ? /*#__PURE__*/_react.default.createElement(_CollapseHeader.PeriodLabel, {
+    id: "PeriodLabel"
+  }, "Event Dates: ") : '', (data === null || data === void 0 ? void 0 : (_data$eventDatesValue2 = data.eventDatesValue) === null || _data$eventDatesValue2 === void 0 ? void 0 : _data$eventDatesValue2.length) > 0 ? /*#__PURE__*/_react.default.createElement(_CollapseHeader.PeriodValue, {
+    id: "PeriodValue"
+  }, data.eventDatesValue) : '')))));
+};
+exports.CollapseHeader = CollapseHeader;
+var _default = exports.default = CollapseHeader;
+CollapseHeader.defaultProps = {
+  className: '',
+  showRetailerIcon: true,
+  showPeriodIcon: true,
+  viewCreativeRetailersData: [{
+    label: 'Food Lion'
+  }, {
+    label: 'Stop&Shop'
+  }, {
+    label: 'Giant Food'
+  }, {
+    label: 'The Giant Company'
+  }, {
+    label: 'Hannaford'
+  }],
+  data: {
+    eventType: 'Large Selling Event',
+    retailer: 'The Giant Company',
+    eventDescription: 'Large Selling Event Description',
+    objectivesDescription: 'Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. Adipiscing quam sodales vestibulum pretium sit adipiscing ultricies viverra. Sollicitudin penatibus fermentum fermentum faucibus viverra augue viverra. Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. ',
+    eventDatesValue: 'Feb 1, 2023 - Feb 28, 2023',
+    externalEventDescription: 'Large Selling Event P2 Description',
+    externalEventID: 'LSE2_23',
+    storeType: 'Total',
+    category: '',
+    supplier: '',
+    brand: ''
+  },
+  viewCreativeOnClick: () => {},
+  width: '100%',
+  height: '100%',
+  textcolor: '#212121',
+  showDraft: false,
+  disabled: false
+};

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

@@ -0,0 +1,116 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.LargeSellingEvent = exports.CrossRetailersEvent = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _CollapseHeader = require("./CollapseHeader");
+const viewCreativeRetailersData1 = [{
+  label: 'Food Lion'
+}, {
+  label: 'Stop&Shop'
+}, {
+  label: 'Giant Food'
+}, {
+  label: 'The Giant Company'
+}, {
+  label: 'Hannaford'
+}];
+const data = {
+  eventType: 'Large Selling Event',
+  retailer: 'The Giant Company',
+  eventDescription: 'Large Selling Event Description',
+  objectivesDescription: 'Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. Adipiscing quam sodales vestibulum pretium sit adipiscing ultricies viverra. Sollicitudin penatibus fermentum fermentum faucibus viverra augue viverra. Lorem ipsum dolor sit amet consectetur. Viverra urna condimentum donec ipsum vitae volutpat phasellus. ',
+  eventDatesValue: 'Feb 1, 2023 - Feb 28, 2023',
+  externalEventDescription: 'Large Selling Event P2 Description',
+  externalEventID: 'LSE2_23',
+  storeType: 'Total',
+  category: '',
+  supplier: '',
+  brand: ''
+};
+var _default = exports.default = {
+  title: 'SAG BI/Collapse Header',
+  component: _CollapseHeader.CollapseHeader,
+  tags: ['autodocs'],
+  argTypes: {
+    data: {
+      name: 'data',
+      control: {
+        type: 'object'
+      },
+      description: ' object: to fill title description '
+    },
+    width: {
+      name: 'width',
+      control: {
+        type: 'text'
+      },
+      description: 'width of the control (in px / %)'
+    },
+    height: {
+      name: 'height',
+      control: {
+        type: 'text'
+      },
+      description: 'height of the control (in px / % )'
+    },
+    textcolor: {
+      name: 'textcolor',
+      description: 'Sets the text color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#0000ff']
+      }
+    },
+    showRetailerIcon: {
+      name: 'showRetailerIcon',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide Retailer Icon'
+    },
+    showDraft: {
+      name: 'showDraft',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide Draft symbol'
+    },
+    disabled: {
+      name: 'disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable component'
+    },
+    viewCreativeOnClick: {
+      action: 'viewCreativeOnClick',
+      description: 'viewCreativeOnClick event - returns an object of viewCreativeOnClick   '
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_CollapseHeader.CollapseHeader, args);
+const LargeSellingEvent = exports.LargeSellingEvent = {
+  args: {
+    showRetailerIcon: true,
+    showPeriodIcon: true,
+    viewCreativeRetailersData: null,
+    data,
+    width: '100%',
+    height: '100%',
+    showDraft: true
+  }
+};
+const CrossRetailersEvent = exports.CrossRetailersEvent = {
+  args: {
+    showRetailerIcon: false,
+    showPeriodIcon: false,
+    viewCreativeRetailersData: viewCreativeRetailersData1,
+    data,
+    width: '100%',
+    height: '100%'
+  }
+};

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

@@ -0,0 +1,35 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24, _templateObject25;
+const MainContainer = exports.MainContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  font-family: \"Poppins\", sans-serif;\n  font-size: 1rem;\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  border-radius: 12px;\n"])), props => props.textcolor ? props.textcolor : '#000', props => props.width, props => props.height);
+const PanelContainer = exports.PanelContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  flex-direction: column;\n  align-items: center;\n  justify-content: space-around;\n  border-radius: 12px;\n  background: white;\n  padding: 20px 0 0;\n  font-weight: 400;\n  white-space: pre-wrap;\n  width: 100%;\n  @media (max-width: 1536px) {\n    padding: 12px 0 0;\n  }\n"])));
+const EventNameAndViewCreativeContainer = exports.EventNameAndViewCreativeContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n"])));
+const EventNameViewCreativeSubContainer = exports.EventNameViewCreativeSubContainer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: relative;\n  align-content: center;\n  align-items: center;\n  gap: 20px;\n"])));
+const DraftTag = exports.DraftTag = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  color: #E41111;\n  border: 2px solid #E41111;\n  font-size: 20px;\n  padding: 6px 18px;\n"])));
+const ViewCreativeContainer = exports.ViewCreativeContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 2px 10px;\n  border-radius: 8px;\n  border: 1px solid #ccc;\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), props => props.disabled ? '#B1B1B1' : '#212121', props => !props.disabled ? 'pointer' : 'default');
+const ViewCreativeTextField = exports.ViewCreativeTextField = _styledComponents.default.h4(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;  \n  line-height: 19px;\n  font-size: 14px;\n  font-weight: 400;\n  margin: 3px 10px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const ViewCreativeButtonAndListBoxContainer = exports.ViewCreativeButtonAndListBoxContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n  overflow: visible;\n  font-size: 18px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));
+const ViewCreativeListBoxContainer = exports.ViewCreativeListBoxContainer = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  position: absolute;\n  left: ", ";\n  top:  ", ";\n  z-index:1000;\n"])), props => props.left, props => props.top);
+const FilterValuesContainer = exports.FilterValuesContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-content: center;\n  align-items: center;\n  width: 100%;\n  margin: 0.5rem 0 0 0;\n"])));
+const FilterValue = exports.FilterValue = _styledComponents.default.p(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  color: #212121;\n  margin: 0;\n  font-size: 14px;\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"])));
+const FieldsDelimiter = exports.FieldsDelimiter = _styledComponents.default.p(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n  color: #ccc;\n  margin: 0;\n"])));
+const Retailer = exports.Retailer = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n  color: #1b30aa;\n  margin: 0;\n  margin-inline-end: 5px;\n"])));
+const RetailerIconContainer = exports.RetailerIconContainer = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n"])));
+const ObjectiesContainer = exports.ObjectiesContainer = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n  max-width: 70%;\n"])));
+const ObjectiesAndPeriodsContainer = exports.ObjectiesAndPeriodsContainer = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  gap: 40px;\n  width: 100%;\n  margin-top: 8px;\n"])));
+const ObjectivesTitle = exports.ObjectivesTitle = _styledComponents.default.strong(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n  font-weight: 500;\n"])));
+const ObjectivesDescription = exports.ObjectivesDescription = _styledComponents.default.p(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n  margin: 0;\n  font-size: 14px;\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"])));
+const ObjectivesShowMore = exports.ObjectivesShowMore = _styledComponents.default.a(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  &:hover {\n    cursor: ", ";\n  }\n"])), props => props.disabled ? '#B1B1B1' : '#1b30aa', props => !props.disabled ? 'pointer' : 'default');
+const BottonsContainer = exports.BottonsContainer = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n  align-items: center;\n  justify-content: flex-end;\n  min-height: 1.5rem;\n"])));
+const DownloadButtonContainer = exports.DownloadButtonContainer = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)([""])));
+const PeriodsContainer = exports.PeriodsContainer = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: flex-start;\n  justify-content: flex-start;\n  font-size: 14px;\n  @media (max-width: 1536px) {\n    font-size: 12px;\n  }  \n"])));
+const SubLineContainer = exports.SubLineContainer = _styledComponents.default.div(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 100%;\n"])));
+const PeriodLabel = exports.PeriodLabel = _styledComponents.default.strong(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: 14px;\n  font-weight: 500;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }  \n"])));
+const PeriodValue = exports.PeriodValue = _styledComponents.default.p(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2.default)(["\n  line-height: 19px;\n  font-size: 14px;\n  font-weight: 400;\n  margin: 0 0 0 10px;\n  @media (max-width: 1536px) {\n    font-size: 14px;\n  }\n  @media (max-width: 1366px) {\n    font-size: 12px;\n  }\n"])));