sag_components 1.0.1062 → 1.0.1064

package/dist/stories/components/BannerEventBox/BannerEventBox.js

@@ -7,12 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.BannerEventBox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _BannerEventBox = require("./BannerEventBox.style");
-var _FoodLionNewIcon = require("./icons/FoodLionNewIcon");
-var _TheGiantCompanyNewIcon = require("./icons/TheGiantCompanyNewIcon");
-var _StopAndShopNewIcon = require("./icons/StopAndShopNewIcon");
-var _GiantFoodIcon_new = require("./icons/GiantFoodIcon_new");
-var _HannafordIcon_new = require("./icons/HannafordIcon_new");
-var _Button = require("./Button");
+var _FoodLionNewIcon = require("../../icons/FoodLionNewIcon");
+var _TheGiantCompanyNewIcon = require("../../icons/TheGiantCompanyNewIcon");
+var _StopAndShopNewIcon = require("../../icons/StopAndShopNewIcon");
+var _GiantFoodIcon_new = require("../../icons/GiantFoodIcon_new");
+var _HannafordIcon_new = require("../../icons/HannafordIcon_new");
+var _Button = require("../Button/Button");
 const BannerEventBox = props => {
   const {
     width,

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

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TooltipTitle = exports.TooltipLabel = exports.TooltipDiv = exports.Title = exports.LegendContainer = exports.LabelText = exports.LabelBoldText = exports.ControlsContainer = exports.Controls = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _PerformanceAnalyticsLegend = require("./PerformanceAnalyticsLegend");
+var _PerformanceAnalyticsLegend = require("../PerformanceAnalyticsLegend/PerformanceAnalyticsLegend");
 const ControlsContainer = exports.ControlsContainer = _styledComponents.default.div`
   font-family: "Poppins", sans-serif;
   width: ${props => props.width};

package/dist/stories/components/DropdownMulti/DropdownMulti.js

@@ -0,0 +1,290 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DropdownMulti = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Autocomplete = _interopRequireDefault(require("@mui/material/Autocomplete"));
+var _TextField = _interopRequireDefault(require("@mui/material/TextField"));
+var _Checkbox = _interopRequireDefault(require("@mui/material/Checkbox"));
+var _styles = require("@mui/material/styles");
+var _CheckBoxOutlineBlank = _interopRequireDefault(require("@mui/icons-material/CheckBoxOutlineBlank"));
+var _CheckBox = _interopRequireDefault(require("@mui/icons-material/CheckBox"));
+var _ArrowDropDownIcon = require("../../icons/ArrowDropDownIcon");
+var _DropdownMulti = require("./DropdownMulti.style");
+const icon = /*#__PURE__*/_react.default.createElement(_CheckBoxOutlineBlank.default, {
+  fontSize: "small"
+});
+const checkedIcon = /*#__PURE__*/_react.default.createElement(_CheckBox.default, {
+  fontSize: "small"
+});
+
+/**
+ *  SAG DropdownMulti
+ */
+const DropdownMulti = props => {
+  const {
+    name,
+    width = '100%',
+    size,
+    text,
+    shape,
+    placeHolder,
+    limitTagsOnMultiSelect,
+    showPopupIcon,
+    options,
+    onChange,
+    onInputChange,
+    labelColor = '#1B30AA',
+    required,
+    inputRef,
+    allowedInput = 'all',
+    reset = false,
+    disableClearable = false,
+    disabled = false,
+    dropdownListfontSize = '14px',
+    placeHolderFontSize = '14px',
+    dropdownMultiMaxWidth
+  } = props;
+  const [currentInputValue, setCurrentInputValue] = (0, _react.useState)(null);
+  const [selectedOptionsState, setSelectedOptionsState] = (0, _react.useState)([]);
+  (0, _react.useEffect)(() => {
+    setSelectedOptionsState([]);
+  }, [reset]);
+  (0, _react.useEffect)(() => {
+    const delayDebounceFn = setTimeout(() => {
+      onInputChange(currentInputValue);
+    }, 1000);
+    return () => clearTimeout(delayDebounceFn);
+  }, [currentInputValue]);
+  const theme = (0, _styles.createTheme)({
+    components: {
+      MuiFormLabel: {
+        styleOverrides: {
+          asterisk: {
+            color: '#db3131'
+          }
+        }
+      }
+    }
+  });
+
+  // ---------------------------- Multi Text Style -----------------------------------------
+  const getTextFieldStyleMulti = () => {
+    if (shape === 'round') {
+      // round
+      return {
+        '& .MuiOutlinedInput-root': {
+          borderRadius: '12px',
+          legend: {
+            marginLeft: '10px'
+          }
+          // '& .MuiAutocomplete-endAdornment': {
+          //   marginRight: '10px',
+          // },
+        },
+        '& .MuiAutocomplete-inputRoot': {
+          paddingLeft: '10px !important',
+          borderRadius: '12px',
+          // This matches the specificity of the default styles at https://github.com/mui-org/material-ui/blob/v4.11.3/packages/material-ui-lab/src/Autocomplete/Autocomplete.js#L90
+          '&[class*="MuiOutlinedInput-root"] .MuiAutocomplete-input:first-of-type': {
+            // Default left padding is 6px
+            paddingLeft: '10px'
+          },
+          '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#E7E7E7'
+          },
+          '&:hover .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
+          },
+          '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderColor: disabled ? '#E7E7E7' : labelColor
+          }
+        },
+        '& .MuiInputLabel-outlined:not(.MuiInputLabel-shrink)': {
+          // Default transform is "translate(14px, 20px) scale(1)""
+          // This lines up the label with the initial cursor position in the input
+          // after changing its padding-left.
+          transform: 'translate(14px, 18px) scale(1);',
+          fontSize: '14px',
+          color: disabled ? '#E7E7E7' : currentInputValue && currentInputValue.length > 0 ? '#212121' : '#757575'
+        },
+        '& .MuiInputLabel-outlined': {
+          paddingLeft: '10px',
+          color: disabled ? '#E7E7E7' : labelColor,
+          fontSize: '18px'
+        },
+        '& .MuiInputLabel-shrink': {
+          marginLeft: '1px',
+          paddingLeft: '4px',
+          paddingRight: '6px',
+          background: 'white'
+        }
+      };
+    }
+    // square
+    return null;
+  };
+  const onInputChangeHandler = (event, newInputValue) => {
+    setCurrentInputValue({
+      syntheticBaseEvent: event,
+      inputValue: newInputValue
+    });
+  };
+  const onChangeHandler = (event, newValue) => {
+    // const newSelectedOptionsSet = new Set(newValue?.map((item) => item) ?? []);
+    // const newSelectedOptions = Array.from(newSelectedOptionsSet).map((item) => {
+    //   return item;
+    // });
+
+    const newSelectedOptions = newValue === null || newValue === void 0 ? void 0 : newValue.filter((value, index, self) => index === self.findIndex(item => item.id === value.id && item.label === value.label));
+    setSelectedOptionsState(newSelectedOptions);
+    onChange({
+      syntheticBaseEvent: event,
+      newValue: newSelectedOptions
+    });
+  };
+  const isInputAllowed = inputChar => {
+    const NUMERIC_REGEX = /^[0-9-]+$/;
+    const ALPHA_REGEX = /^[a-zA-Z]+$/;
+    const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9-]+$/;
+    switch (allowedInput) {
+      case 'all':
+        return true;
+      case 'alpha':
+        if (ALPHA_REGEX.test(inputChar)) return true;
+        return false;
+      case 'numeric':
+        if (NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      case 'alphaNumeric':
+        if (ALPHA_NUMERIC_REGEX.test(inputChar)) return true;
+        return false;
+      default:
+        return true;
+    }
+  };
+
+  // --------------------------------------- DropdownMulti--------------------------------
+  const getAutocompleteMulti = () => selectedOptionsState && /*#__PURE__*/_react.default.createElement(_styles.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/_react.default.createElement(_Autocomplete.default, {
+    class: name,
+    onChange: (event, newValue) => {
+      onChangeHandler(event, newValue);
+    },
+    onInputChange: (event, newInputValue) => {
+      onInputChangeHandler(event, newInputValue);
+    },
+    multiple: true,
+    style: {
+      maxWidth: dropdownMultiMaxWidth ? "".concat(dropdownMultiMaxWidth) : undefined
+    },
+    limitTags: limitTagsOnMultiSelect,
+    id: "checkboxes-tags",
+    options: options,
+    value: selectedOptionsState,
+    disabled: disabled,
+    disableCloseOnSelect: true,
+    disableClearable: disableClearable,
+    getOptionLabel: option => option.label,
+    popupIcon: showPopupIcon ? /*#__PURE__*/_react.default.createElement(_ArrowDropDownIcon.ArrowDropDownIcon, {
+      width: "0.5em",
+      height: "0.5em"
+    }) : null,
+    renderOption: (props, option, _ref) => {
+      let {
+        selected
+      } = _ref;
+      return /*#__PURE__*/_react.default.createElement("li", props, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+        icon: icon,
+        checkedIcon: checkedIcon,
+        checked: isOptionChecked(option)
+      }), option.label);
+    },
+    renderInput: params =>
+    /*#__PURE__*/
+    // showSearchIcon &&
+    _react.default.createElement(_TextField.default, Object.assign({}, params, {
+      variant: "outlined",
+      label: text,
+      size: size,
+      sx: getTextFieldStyleMulti(),
+      placeholder: placeHolder,
+      InputProps: {
+        ...params.InputProps,
+        style: {
+          fontSize: placeHolderFontSize,
+          fontFamily: 'Poppins'
+        }
+
+        //   endAdornment: (
+        //     <>
+        //       { selectedOptionsState && Object.values( selectedOptionsState)?.map((option, index) => (
+        //         <span key={index} style={{ margin: '0 5px' }}>
+        //           {option.label}
+        //         </span>
+        //       ))}
+        //       {params.InputProps.endAdornment}
+
+        //     </>
+        //   ),
+      },
+      onKeyDown: event => {
+        if (!isInputAllowed(event.key)) {
+          event.preventDefault();
+        }
+      },
+      inputRef: inputRef || null,
+      required: required
+    })),
+    ListboxProps: {
+      style: {
+        fontSize: dropdownListfontSize,
+        // default: 14px
+        fontFamily: 'Poppins'
+      }
+    }
+  }));
+  const isOptionChecked = option => {
+    var _Object$values;
+    if (selectedOptionsState && (_Object$values = Object.values(selectedOptionsState)) !== null && _Object$values !== void 0 && _Object$values.map(itemFilter => itemFilter.label).includes(option.label)) {
+      return true;
+    }
+    return false;
+  };
+
+  // --------------------------------- MAIN -------------------------------------
+  return /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownContainer, {
+    className: "DropdownContainer",
+    width: width
+  }, getAutocompleteMulti());
+};
+exports.DropdownMulti = DropdownMulti;
+var _default = exports.default = DropdownMulti;
+DropdownMulti.defaultProps = {
+  name: 'MultiSelectLarge',
+  width: '500px',
+  size: 'large',
+  text: 'Retailer',
+  limitTagsOnMultiSelect: 2,
+  placeHolder: 'Type...',
+  shape: 'round',
+  showPopupIcon: true,
+  options: [],
+  onChange: () => {},
+  onInputChange: () => {},
+  labelColor: '#1B30AA',
+  required: true,
+  inputRef: undefined,
+  allowedInput: 'all',
+  disableClearable: false,
+  disabled: false,
+  reset: false,
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px',
+  dropdownMultiMaxWidth: undefined
+};

package/dist/stories/components/DropdownMulti/DropdownMulti.stories.js

@@ -0,0 +1,220 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.MultiSelectLarge = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _DropdownMulti = require("./DropdownMulti");
+const options = [{
+  id: 0,
+  label: 'Shufersal'
+}, {
+  id: 1,
+  label: 'EPC'
+}, {
+  id: 2,
+  label: 'Food Lion'
+}, {
+  id: 3,
+  label: 'Hannaford'
+}, {
+  id: 4,
+  label: 'Giant Food'
+}, {
+  id: 5,
+  label: 'The Giant Company'
+}, {
+  id: 6,
+  label: 'Stop&Shop'
+}, {
+  id: 7,
+  label: 'Price Chopper'
+}, {
+  id: 8,
+  label: 'South Eastern Grocers'
+}];
+const filterMultiSelectData1 = [{
+  id: 2,
+  label: 'Food Lion'
+}, {
+  id: 3,
+  label: 'Hannaford'
+}];
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction
+var _default = exports.default = {
+  title: 'SAG/DropdownMulti',
+  component: _DropdownMulti.DropdownMulti,
+  tags: ['autodocs'],
+  argTypes: {
+    width: {
+      control: {
+        type: 'text'
+      },
+      description: 'width of the input field',
+      defaultValue: '300px'
+    },
+    size: {
+      control: {
+        type: 'radio'
+      },
+      options: ['small', 'large'],
+      description: 'size: small/large'
+    },
+    text: {
+      name: 'text',
+      control: {
+        type: 'text'
+      },
+      description: 'text inside of the input field',
+      defaultValue: 'Search...'
+    },
+    placeHolder: {
+      name: 'placeHolder',
+      control: {
+        type: 'text'
+      },
+      description: 'notify the user how to type a text',
+      defaultValue: 'Type...'
+    },
+    multiSelect: {
+      name: 'multiSelect',
+      // control: { type: "boolean",
+      //            },
+      control: false,
+      description: 'true/false - allows multi select - (switch multiSelect / singleSelect is disabled in this story)'
+    },
+    limitTagsOnMultiSelect: {
+      name: 'limitTagsOnMultiSelect',
+      control: {
+        type: 'number'
+      },
+      description: 'limit noumber displayed tags on multi select when not focused'
+    },
+    options: {
+      description: 'array [] of objects: {id: string1 , label: string2 } to fill DropdownMulti options '
+    },
+    shape: {
+      control: {
+        type: 'radio'
+      },
+      options: ['round', 'square'],
+      description: 'shape: round/square'
+    },
+    showPopupIcon: {
+      name: 'showPopupIcon',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide popup (up/down arrow) icon'
+    },
+    showSearchIcon: {
+      name: 'showSearchIcon',
+      control: {
+        type: 'boolean'
+      },
+      description: 'show/hide search icon '
+    },
+    onChange: {
+      action: 'onChange',
+      description: 'returns an option (object) selected by the user'
+    },
+    onInputChange: {
+      action: 'onInputChange',
+      description: 'returns a value (string) displayed in the textbox'
+    },
+    labelColor: {
+      name: 'labelColor',
+      description: 'Sets label color',
+      control: {
+        type: 'color',
+        presetColors: ['#ffffff', '#ff0000', '#00ff00', '#1B30AA']
+      }
+    },
+    required: {
+      name: 'required',
+      control: {
+        type: 'boolean'
+      },
+      description: 'defines if this field is required'
+    },
+    disableClearable: {
+      name: 'disableClearable',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable Clearable functionality'
+    },
+    reset: {
+      name: 'reset',
+      control: {
+        type: 'boolean'
+      },
+      description: 'reset component'
+    },
+    allowedInput: {
+      name: 'allowedInput',
+      control: {
+        type: 'radio'
+      },
+      options: ['alpha', 'numeric', 'alphaNumeric', 'all'],
+      description: 'allowed input characters: numbers, alphabet ot both'
+    },
+    disabled: {
+      name: 'disabled',
+      control: {
+        type: 'boolean'
+      },
+      description: 'disable component'
+    },
+    dropdownListfontSize: {
+      name: 'dropdownListfontSize',
+      control: {
+        type: 'text'
+      },
+      description: 'DropdownMulti List font Size'
+    },
+    placeHolderFontSize: {
+      name: 'placeHolderFontSize',
+      control: {
+        type: 'text'
+      },
+      description: 'Place holder Font Size'
+    },
+    // filterOptionsMultiSelect: {
+    //   description:
+    //     "array [] of objects: {id: string1 , label: string2 } to fill DropdownMulti filter - only for multiselect ",
+    // },
+
+    dropdownMultiMaxWidth: {
+      name: 'dropdownMultiMaxWidth',
+      control: {
+        type: 'text'
+      },
+      description: 'dropdownMulti Fixed Max Width'
+    }
+  }
+};
+const Template = args => /*#__PURE__*/_react.default.createElement(_DropdownMulti.DropdownMulti, args);
+const MultiSelectLarge = exports.MultiSelectLarge = Template.bind({});
+MultiSelectLarge.args = {
+  name: 'MultiSelectLarge',
+  width: '500px',
+  size: 'large',
+  text: 'Retailer',
+  limitTagsOnMultiSelect: 2,
+  placeHolder: 'Type...',
+  shape: 'round',
+  showPopupIcon: true,
+  showSearchIcon: false,
+  options,
+  labelColor: '#1B30AA',
+  required: true,
+  allowedInput: 'all',
+  reset: false,
+  dropdownListfontSize: '14px',
+  placeHolderFontSize: '14px',
+  dropdownMultiMaxWidth: '300px'
+};

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

@@ -0,0 +1,11 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DropdownContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+const DropdownContainer = exports.DropdownContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", ";\n  text-align: left;  \n  position: relative; \n  align-items: center;\n  justify-content: center;\n  font-family: \"Poppins\", sans-serif; \n  font-size: 14px;  \n"])), props => props.width);

package/dist/stories/components/DropdownMultiNew/DropdownMultiNew.js

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DropdownMultiNew = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _CloseXIcon = require("./icons/CloseXIcon");
-var _MenuItemUpIcon = require("./icons/MenuItemUpIcon");
-var _MenuItemOpenIcon = require("./icons/MenuItemOpenIcon");
-var _CheckBoxCheckedIcon = require("./icons/CheckBoxCheckedIcon");
-var _CheckBoxNotCheckedIcon = require("./icons/CheckBoxNotCheckedIcon");
+var _CloseXIcon = require("../../icons/CloseXIcon");
+var _MenuItemUpIcon = require("../../icons/MenuItemUpIcon");
+var _MenuItemOpenIcon = require("../../icons/MenuItemOpenIcon");
+var _CheckBoxCheckedIcon = require("../../icons/CheckBoxCheckedIcon");
+var _CheckBoxNotCheckedIcon = require("../../icons/CheckBoxNotCheckedIcon");
 var _DropdownMultiNew = require("./DropdownMultiNew.style");
 const DropdownMultiNew = _ref => {
   let {

package/dist/stories/components/DropdownNew/DropdownNew.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.DropdownNew = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _DropdownSingleNew = require("./DropdownSingleNew");
-var _DropdownMultiNew = require("./DropdownMultiNew");
+var _DropdownSingleNew = require("../DropdownSingleNew/DropdownSingleNew");
+var _DropdownMultiNew = require("../DropdownMultiNew/DropdownMultiNew");
 var _DropdownNew = require("./DropdownNew.style");
 /* eslint-disable react/prop-types */
 

package/dist/stories/components/FilterPanel/FilterPanel.js

@@ -370,6 +370,7 @@ const FilterPanel = props => {
     return content;
   };
   const displayField = item => {
+    var _item$orderBy, _item$elementType, _item$orderBy2, _item$elementType2;
     let content;
     switch (item.inputType) {
       case 'dropdown':
@@ -377,6 +378,8 @@ const FilterPanel = props => {
           className: "Dropdown_Single",
           name: item.name,
           key: item.reset,
+          orderBy: (_item$orderBy = item.orderBy) !== null && _item$orderBy !== void 0 ? _item$orderBy : 'asc',
+          elementType: (_item$elementType = item.elementType) !== null && _item$elementType !== void 0 ? _item$elementType : 'number',
           isMulti: false,
           placeHolder: item.placeHolder,
           label: item.label,
@@ -399,6 +402,8 @@ const FilterPanel = props => {
           className: "Dropdown_Multi",
           name: item.name,
           key: item.reset,
+          orderBy: (_item$orderBy2 = item.orderBy) !== null && _item$orderBy2 !== void 0 ? _item$orderBy2 : 'asc',
+          elementType: (_item$elementType2 = item.elementType) !== null && _item$elementType2 !== void 0 ? _item$elementType2 : 'number',
           isMulti: true,
           placeHolder: item.placeHolder,
           label: item.label,

package/dist/stories/components/QuickFilter/QuickFilterDropdownMultiSelection.js

@@ -73,7 +73,7 @@ const QuickFilterDropdownMultiSelection = _ref => {
       if (index !== lastIndex) {
         parts.push(text.slice(lastIndex, index));
       }
-      parts.push( /*#__PURE__*/_react.default.createElement("span", {
+      parts.push(/*#__PURE__*/_react.default.createElement("span", {
         key: index,
         className: "highlight"
       }, text.slice(index, index + highlight.length)));

package/dist/stories/components/QuickFilter/QuickFilterDropdownSingle.js

@@ -45,7 +45,7 @@ const QuickFilterDropdownSingle = _ref => {
       if (index !== lastIndex) {
         parts.push(text.slice(lastIndex, index));
       }
-      parts.push( /*#__PURE__*/_react.default.createElement("span", {
+      parts.push(/*#__PURE__*/_react.default.createElement("span", {
         key: index,
         className: "highlight"
       }, text.slice(index, index + highlight.length)));