sag_components 2.0.0-beta325 → 2.0.0-beta327

package/dist/index.esm.js

@@ -9297,6 +9297,34 @@ const CheckBoxNotCheckedIcon = _ref => {
   }));
 };
 
+const CheckBoxIndeterminateIcon = ({
+  width = "16",
+  height = "16",
+  color = "#1B30AA"
+}) => {
+  return /*#__PURE__*/React$1.createElement("svg", {
+    width: width,
+    height: height,
+    viewBox: "0 0 13 13",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React$1.createElement("rect", {
+    x: "0.5",
+    y: "0.642578",
+    width: "12.25",
+    height: "12.25",
+    rx: "1.75",
+    fill: color
+  }), /*#__PURE__*/React$1.createElement("rect", {
+    x: "3",
+    y: "5.892578",
+    width: "7.25",
+    height: "2",
+    rx: "1",
+    fill: "white"
+  }));
+};
+
 /* eslint-disable no-nested-ternary */
 const scrollableStyles$d = `
   overflow-y: auto;
@@ -9535,7 +9563,8 @@ const DropdownMultiNew = ({
   checkBoxColor,
   showLabelOnTop,
   orderBy,
-  elementType
+  elementType,
+  showSelectAll = false
 }) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
@@ -9641,6 +9670,22 @@ const DropdownMultiNew = ({
       setIsFocused(true);
     }
   };
+  const allSelected = options?.length > 0 && selectedOptions.length === options.length;
+  const someSelected = selectedOptions.length > 0 && selectedOptions.length < options.length;
+  const handleSelectAllClick = () => {
+    if (disabled) return;
+    if (allSelected || someSelected) {
+      setSelectedOptions([]);
+      onChange({
+        newValue: []
+      });
+    } else {
+      setSelectedOptions(options);
+      onChange({
+        newValue: options
+      });
+    }
+  };
   const handleClearClick = () => {
     if (disabled) return;
     setSelectedOptions([]);
@@ -9776,7 +9821,25 @@ const DropdownMultiNew = ({
     showabove: showAbove,
     disabled: disabled,
     filteredoptions: filteredOptions
-  }, filteredOptions.map(option => /*#__PURE__*/React$1.createElement(OptionItem$2, {
+  }, showSelectAll && /*#__PURE__*/React$1.createElement(OptionItem$2, {
+    className: "OptionItem",
+    onClick: handleSelectAllClick,
+    selected: allSelected
+  }, /*#__PURE__*/React$1.createElement(IconContainer$4, {
+    className: "IconContainer"
+  }, allSelected ? /*#__PURE__*/React$1.createElement(CheckBoxCheckedIcon, {
+    width: "14px",
+    height: "14px",
+    color: disabled ? "#888" : checkBoxColor
+  }) : someSelected ? /*#__PURE__*/React$1.createElement(CheckBoxIndeterminateIcon, {
+    width: "14px",
+    height: "14px",
+    color: disabled ? "#888" : checkBoxColor
+  }) : /*#__PURE__*/React$1.createElement(CheckBoxNotCheckedIcon, {
+    width: "14px",
+    height: "14px",
+    color: disabled ? "#888" : "#212121"
+  })), "Select All"), filteredOptions.map(option => /*#__PURE__*/React$1.createElement(OptionItem$2, {
     className: "OptionItem",
     key: option.value,
     onClick: () => toggleOption(option),
@@ -9834,7 +9897,8 @@ const DropdownNew = props => {
     errorMessage = "",
     labelColor = "#066768",
     checkBoxColor = "#229E38",
-    xIconShow = true
+    xIconShow = true,
+    showSelectAll = false
   } = props;
   const handleOnChange = event => {
     if (event && event.newValue && event.newValue[0]) {
@@ -9870,7 +9934,8 @@ const DropdownNew = props => {
     onChange: handleOnChange,
     showLabelOnTop: showLabelOnTop,
     orderBy: orderBy,
-    elementType: elementType
+    elementType: elementType,
+    showSelectAll: showSelectAll
   }) : /*#__PURE__*/React$1.createElement(DropdownSingleNew, {
     className: "DropdownSingleNew",
     placeHolder: placeHolder,
@@ -10649,24 +10714,23 @@ const QuarterPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const QuarterPicker = _ref => {
-  let {
-    availableQuarters,
-    // ["Q1-2024"]
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const QuarterPicker = ({
+  availableQuarters,
+  // ["Q1-2024"]
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11108,23 +11172,22 @@ const MonthPopupPicker = ({
 };
 
 /* eslint-disable import/no-extraneous-dependencies */
-const MonthPicker = _ref => {
-  let {
-    availableMonths,
-    label,
-    onChange,
-    borderRadius,
-    required,
-    width,
-    height,
-    placeholder,
-    disabled,
-    borderColor,
-    borderColorFocus,
-    textColor,
-    selectedValue,
-    startYear
-  } = _ref;
+const MonthPicker = ({
+  availableMonths,
+  label,
+  onChange,
+  borderRadius,
+  required,
+  width,
+  height,
+  placeholder,
+  disabled,
+  borderColor,
+  borderColorFocus,
+  textColor,
+  selectedValue,
+  startYear
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
@@ -11790,7 +11853,8 @@ const FilterPanel = props => {
           onChange: eventDropdownMulti => onChangeDropdownMultiHandler(eventDropdownMulti, item),
           options: item.dropdownOptions || [],
           width: "100%",
-          height: dropdownHeight
+          height: dropdownHeight,
+          showSelectAll: item.showSelectAll
         });
         break;
       case 'datepicker':
@@ -12330,16 +12394,13 @@ const Td$1 = styled.td`
 `;
 const Tr = styled.tr`
   border-bottom: 1px solid #f3f4f6;
-  ${_ref => {
-  let {
-    enableHover,
-    selectHoverColor
-  } = _ref;
-  return enableHover && `&:hover {
+  ${({
+  enableHover,
+  selectHoverColor
+}) => enableHover && `&:hover {
       background-color: ${selectHoverColor};
       cursor: pointer;
-    }`;
-}}
+    }`}
 `;
 const InfoText = styled.div`
   font-weight: 400;
@@ -24241,24 +24302,23 @@ const DeleteIcon = styled.div`
   position: absolute;
 `;
 
-const QuickFilterDropdownSingle = _ref => {
-  let {
-    label,
-    hoverColor,
-    options,
-    selectedValue,
-    placeHolder,
-    optionHoverColor = '#edf6ff',
-    selectedOptionColor = "#C7E4FF",
-    onChange,
-    disabled,
-    width,
-    error,
-    errorMessage,
-    xIconShow,
-    labelColor,
-    showLabelOnTop
-  } = _ref;
+const QuickFilterDropdownSingle = ({
+  label,
+  hoverColor,
+  options,
+  selectedValue,
+  placeHolder,
+  optionHoverColor = '#edf6ff',
+  selectedOptionColor = "#C7E4FF",
+  onChange,
+  disabled,
+  width,
+  error,
+  errorMessage,
+  xIconShow,
+  labelColor,
+  showLabelOnTop
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState("");
@@ -24716,27 +24776,26 @@ const IconContainer$2 = styled.div`
   cursor:  pointer;
 `;
 
-const QuickFilterDropdownMultiSelection = _ref => {
-  let {
-    label,
-    labelEmptyValue,
-    options,
-    selectedValue,
-    placeHolder,
-    onChange,
-    required,
-    disabled,
-    width,
-    height,
-    error,
-    errorMessage,
-    labelColor,
-    optionHoverColor = '#edf6ff',
-    xIconShow,
-    checkBoxColor,
-    showLabelOnTop,
-    dropdownHeight
-  } = _ref;
+const QuickFilterDropdownMultiSelection = ({
+  label,
+  labelEmptyValue,
+  options,
+  selectedValue,
+  placeHolder,
+  onChange,
+  required,
+  disabled,
+  width,
+  height,
+  error,
+  errorMessage,
+  labelColor,
+  optionHoverColor = '#edf6ff',
+  xIconShow,
+  checkBoxColor,
+  showLabelOnTop,
+  dropdownHeight
+}) => {
   const [isFocused, setIsFocused] = useState(false);
   const [showOptions, setShowOptions] = useState(false);
   const [inputValue, setInputValue] = useState('');
@@ -35216,12 +35275,17 @@ const StyledInput$1 = styled.input`
   background-color: ${props => props.isDarkerBackground ? '#F2F2F2' : 'white'} !important;
   width: ${props => props.width || '90%'};
   height: ${props => props.height || 'auto'};
-  transition: border-color 0.3s ease; 
-  font-size: 14px;
+  transition: border-color 0.3s ease;
   font-weight: 400;
   box-sizing: border-box;
   color: ${props => props.disabled ? '#D0D0D0' : (props.isFocused || props.value ? props.textColor : '#757575') || '#333'};
   cursor: ${props => props.disabled ? 'not-allowed' : 'text'};
+  @media (max-width: 1750px) {
+    font-size: 12px;
+  }
+  @media (max-width: 1536px) {
+    font-size: 10px;
+  }
 `;
 const StyledLabel = styled.label`
   font-size: 14px;
@@ -36282,9 +36346,9 @@ const ToggleSlider = styled.span`
   }
 `;
 
-/**
- * ToggleSwitch component for on/off states.
- * Supports small/large sizes and disabled state.
+/**
+ * ToggleSwitch component for on/off states.
+ * Supports small/large sizes and disabled state.
  */
 function ToggleSwitch(_ref) {
   let {
@@ -47886,6 +47950,9 @@ const SectionTitle$1 = styled$1.div`
   color: #212121;
   font-size: 14px;
   font-weight: 700;
+  @media (max-width: 1280px) {
+    font-size: 12px;
+  }
 `;
 const SubtitleContainer = styled$1.div`
   display: flex;
@@ -47897,6 +47964,9 @@ const Subtitle$1 = styled$1.span`
   color: ${props => props.color};
   font-size: 14px;
   font-weight: 400;
+  @media (max-width: 1280px) {
+    font-size: 11px;
+  }
 `;
 const AddButtonContainer$1 = styled$1.div`
   display: flex;
@@ -47913,6 +47983,9 @@ styled$1(Card)`
 `;
 const VendorHeader$2 = styled$1.div`
   padding: 16px 24px;
+  @media (max-width: 1280px) {
+    padding: 12px 8px;
+  }
 `;
 styled$1.button`
   border: none;
@@ -48091,6 +48164,9 @@ const Container$1 = styled$1.div`
   justify-content: space-between;
   padding: 38px 0 20px;
   box-sizing: border-box;
+  @media (max-width: 1280px) {
+    padding: 20px 0 12px;
+  }
 `;
 const tooltipStyles = css`
   /* CSS-only tooltip */