sag_components 1.0.976 → 1.0.978

package/dist/stories/components/TextField/TextField.stories.js

@@ -1,162 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.RegularField = exports.Password = exports.DefaultValue = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TextField = require("./TextField");
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
-var _default = exports.default = {
-  title: 'SAG Core/TextField',
-  component: _TextField.TextField,
-  tags: ['autodocs'],
-  argTypes: {
-    width: {
-      name: 'width',
-      control: {
-        type: 'text'
-      },
-      description: 'width of the input field'
-    },
-    height: {
-      name: 'height',
-      control: {
-        type: 'text'
-      },
-      description: 'height of the input field'
-    },
-    label: {
-      name: 'label',
-      control: {
-        type: 'text'
-      },
-      description: 'notify the user how to type a text',
-      defaultValue: 'Type...'
-    },
-    focusColor: {
-      name: 'focusColor',
-      control: {
-        type: 'color'
-      },
-      defaultValue: 'blue'
-    },
-    placeHolder: {
-      name: 'placeHolder',
-      control: {
-        type: 'text'
-      },
-      description: 'place holder of the input field'
-    },
-    shape: {
-      control: {
-        type: 'radio'
-      },
-      options: ['round', 'square'],
-      description: 'shape: round/square'
-    },
-    size: {
-      control: {
-        type: 'radio'
-      },
-      options: ['small', 'large'],
-      description: 'size: small/large'
-    },
-    passwordField: {
-      name: 'passwordField',
-      control: {
-        type: 'boolean'
-      },
-      description: 'defines if this field is for input password '
-    },
-    required: {
-      name: 'required',
-      control: {
-        type: 'boolean'
-      },
-      description: 'defines if this field is required'
-    },
-    defaultValue: {
-      name: 'defaultValue',
-      control: {
-        type: 'text'
-      },
-      description: 'sets default value',
-      defaultValue: 'Type...'
-    },
-    resetDefaultValue: {
-      name: 'resetDefaultValue',
-      control: {
-        type: 'boolean'
-      },
-      description: 'change this to reset default value'
-    },
-    allowedInput: {
-      name: 'allowedInput',
-      control: {
-        type: 'radio'
-      },
-      options: ['alpha', 'numeric', 'alphaNumeric', 'all'],
-      description: 'allowed input characters: numbers, alphabet ot both'
-    },
-    onChange: {
-      action: 'onChange',
-      description: 'returns an option (object) selected by the user'
-    },
-    onInputChange: {
-      action: 'onInputChange',
-      description: 'returns a value (string) displayed in the textbox'
-    },
-    multiline: {
-      name: 'multiline',
-      control: {
-        type: 'boolean'
-      },
-      description: 'enable multiline'
-    }
-  }
-};
-const RegularField = exports.RegularField = {
-  args: {
-    width: '100%',
-    height: '100%',
-    defaultValue: undefined,
-    label: 'Email',
-    placeHolder: 'Enter your email address',
-    shape: 'round',
-    size: 'small',
-    passwordField: false,
-    required: false,
-    allowedInput: 'all',
-    multiline: true
-  }
-};
-const DefaultValue = exports.DefaultValue = {
-  args: {
-    width: '100%',
-    height: '100%',
-    defaultValue: '',
-    label: 'Email',
-    placeHolder: 'Enter your email address',
-    shape: 'round',
-    size: 'small',
-    passwordField: false,
-    required: false,
-    allowedInput: 'all'
-  }
-};
-const Password = exports.Password = {
-  args: {
-    width: '100%',
-    height: '100%',
-    defaultValue: '9999',
-    label: 'Password',
-    placeHolder: undefined,
-    shape: 'round',
-    size: 'small',
-    passwordField: true,
-    required: false,
-    allowedInput: 'alphaNumeric'
-  }
-};

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

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

package/dist/stories/components/TitleDescription/TitleDescription.js

@@ -1,272 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TitleDescription = 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 _TitleDescription = require("./TitleDescription.style");
-const TitleDescription = props => {
-  var _data$eventDescriptio, _data$eventDatesValue, _data$eventDatesValue2, _data$objectivesDescr;
-  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(_TitleDescription.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, /*#__PURE__*/_react.default.createElement(_FoodLionIcon.FoodLionIcon, {
-          width: "90",
-          height: "20"
-        }), "\xA0");
-      case 'Hannaford':
-        return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, /*#__PURE__*/_react.default.createElement(_HannafordIcon.HannafordIcon, {
-          width: "90",
-          height: "20"
-        }), "\xA0");
-      case 'Giant Food':
-        return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, /*#__PURE__*/_react.default.createElement(_GiantFoodIcon.GiantFoodIcon, {
-          width: "60",
-          height: "20"
-        }), "\xA0");
-      case 'The Giant Company':
-        return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, /*#__PURE__*/_react.default.createElement(_TheGiantCompanyIcon.TheGiantCompanyIcon, {
-          width: "60",
-          height: "20"
-        }), "\xA0");
-      case 'Stop&Shop':
-        return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, /*#__PURE__*/_react.default.createElement(_StopAndShopIcon.StopAndShopIcon, {
-          width: "90",
-          height: "20"
-        }), "\xA0");
-      default:
-        return /*#__PURE__*/_react.default.createElement(_TitleDescription.RetailerIconContainer, {
-          id: "RetailerIconContainer"
-        }, retailerName, retailerName && /*#__PURE__*/_react.default.createElement(_TitleDescription.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(_TitleDescription.MainContainer, {
-    id: "TitleDescription",
-    className: className,
-    height: height,
-    width: width,
-    textcolor: textcolor
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.PanelContainer, {
-    id: "PanelContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventNameAndViewCreativeContainer, {
-    id: "EventNameAndViewCreativeContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventNameViewCreativeSubContainer, {
-    id: "EventNameViewCreativeSubContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.EventName, {
-    id: "EventName"
-  }, data.eventName), /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeButtonAndListBoxContainer, {
-    id: "ViewCreativeButtonAndListBoxContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ViewCreativeContainer, {
-    id: "ViewCreativeContainer",
-    ref: viewCreativeContainerRef,
-    onClick: viewCreativeOnClickHandler,
-    disabled: disabled
-  }, /*#__PURE__*/_react.default.createElement(_EyeIcon.EyeIcon, {
-    width: "12",
-    height: "12"
-  }), /*#__PURE__*/_react.default.createElement(_TitleDescription.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(_TitleDescription.ViewCreativeListBoxContainer, {
-    id: "ViewCreativeListBoxContainer",
-    left: getViewCreativeContainerLeft(),
-    top: getViewCreativeContainerTop(),
-    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(_TitleDescription.DraftTag, null, "DRAFT")), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, {
-    id: "FilterValuesContainer"
-  }, showRetailerIcon && /*#__PURE__*/_react.default.createElement(_TitleDescription.Retailer, {
-    id: "Retailer"
-  }, getRetailerIcon(data.retailer)), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
-    className: "FilterValue"
-  }, data.eventType), data.externalEventDescription && data.externalEventDescription !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
-    className: "FilterValue"
-  }, data.externalEventDescription)), data.externalEventID && data.externalEventID !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
-    className: "FilterValue"
-  }, data.externalEventID)), data.storeType && data.storeType !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
-    className: "FilterValue"
-  }, data.storeType)), data.category && data.category !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
-    className: "FilterValue"
-  }, data.category)), data.supplier && data.supplier !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
-    className: "FilterValue"
-  }, data.supplier)), data.brand && data.brand !== '' && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.FieldsDelimiter, {
-    className: "FieldsDelimiter"
-  }, " | "), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValue, {
-    className: "FilterValue"
-  }, data.brand))), /*#__PURE__*/_react.default.createElement(_TitleDescription.FilterValuesContainer, null, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectiesContainer, {
-    id: "ObjectiesContainer",
-    showPeriodIcon: showPeriodIcon
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectivesDescription, {
-    id: "ObjectivesDescription"
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.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)), showPeriodIcon && /*#__PURE__*/_react.default.createElement(_TitleDescription.PeriodsContainer, {
-    id: "PeriodsContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.SubLineContainer, {
-    id: "SubLineContainer"
-  }), /*#__PURE__*/_react.default.createElement(_TitleDescription.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(_TitleDescription.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(_TitleDescription.PeriodValue, {
-    id: "PeriodValue"
-  }, data.eventDatesValue) : ''))), /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectiesAndPeriodsContainer, {
-    id: "ObjectiesAndPeriodsContainer"
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectiesContainer, {
-    id: "ObjectiesContainer",
-    showPeriodIcon: showPeriodIcon
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.ObjectivesDescription, {
-    id: "ObjectivesDescription"
-  }, /*#__PURE__*/_react.default.createElement(_TitleDescription.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)))));
-};
-exports.TitleDescription = TitleDescription;
-var _default = exports.default = TitleDescription;
-TitleDescription.defaultProps = {
-  className: '',
-  showRetailerIcon: true,
-  showPeriodIcon: true,
-  viewCreativeRetailersData: [{
-    label: 'Food Lion'
-  }, {
-    label: 'Stop&Shop'
-  }, {
-    label: 'Giant Food'
-  }, {
-    label: 'The Giant Company'
-  }, {
-    label: 'Hannaford'
-  }],
-  data: {
-    eventName: 'Large Selling Event P2 2023',
-    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: true,
-  disabled: false
-};

package/dist/stories/components/TitleDescription/TitleDescription.stories.js

@@ -1,117 +0,0 @@
-"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 _TitleDescription = require("./TitleDescription");
-const viewCreativeRetailersData1 = [{
-  label: 'Food Lion'
-}, {
-  label: 'Stop&Shop'
-}, {
-  label: 'Giant Food'
-}, {
-  label: 'The Giant Company'
-}, {
-  label: 'Hannaford'
-}];
-const data = {
-  eventName: 'Large Selling Event P2 2023',
-  eventType: 'Large Selling Event',
-  retailer: 'The Giant Company',
-  // Food Lion   Stop&Shop    GiantFood    The Giant Company   Hannaford
-  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/TitleDescription',
-  component: _TitleDescription.TitleDescription,
-  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 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%'
-  }
-};