sag_components 2.0.0-beta139 → 2.0.0-beta140

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.
package/dist/index.esm.js CHANGED
@@ -8710,25 +8710,24 @@ const IconContainer$5 = styled.div`
8710
8710
  cursor: pointer;
8711
8711
  `;
8712
8712
 
8713
- const DropdownSingleNew = _ref => {
8714
- let {
8715
- label,
8716
- labelEmptyValue,
8717
- options,
8718
- selectedValue,
8719
- onChange,
8720
- required,
8721
- disabled,
8722
- width,
8723
- withMarginBottom = true,
8724
- error,
8725
- errorMessage,
8726
- xIconShow,
8727
- labelColor,
8728
- showLabelOnTop,
8729
- orderBy,
8730
- elementType
8731
- } = _ref;
8713
+ const DropdownSingleNew = ({
8714
+ label,
8715
+ labelEmptyValue,
8716
+ options,
8717
+ selectedValue,
8718
+ onChange,
8719
+ required,
8720
+ disabled,
8721
+ width,
8722
+ withMarginBottom = true,
8723
+ error,
8724
+ errorMessage,
8725
+ xIconShow,
8726
+ labelColor,
8727
+ showLabelOnTop,
8728
+ orderBy,
8729
+ elementType
8730
+ }) => {
8732
8731
  const [isFocused, setIsFocused] = useState(false);
8733
8732
  const [showOptions, setShowOptions] = useState(false);
8734
8733
  const [showAbove, setShowAbove] = useState(false);
@@ -9200,26 +9199,25 @@ const IconContainer$4 = styled.div`
9200
9199
  cursor: pointer;
9201
9200
  `;
9202
9201
 
9203
- const DropdownMultiNew = _ref => {
9204
- let {
9205
- label,
9206
- labelEmptyValue,
9207
- options,
9208
- selectedValue,
9209
- onChange,
9210
- required,
9211
- disabled,
9212
- width,
9213
- withMarginBottom = true,
9214
- error,
9215
- errorMessage,
9216
- labelColor,
9217
- xIconShow,
9218
- checkBoxColor,
9219
- showLabelOnTop,
9220
- orderBy,
9221
- elementType
9222
- } = _ref;
9202
+ const DropdownMultiNew = ({
9203
+ label,
9204
+ labelEmptyValue,
9205
+ options,
9206
+ selectedValue,
9207
+ onChange,
9208
+ required,
9209
+ disabled,
9210
+ width,
9211
+ withMarginBottom = true,
9212
+ error,
9213
+ errorMessage,
9214
+ labelColor,
9215
+ xIconShow,
9216
+ checkBoxColor,
9217
+ showLabelOnTop,
9218
+ orderBy,
9219
+ elementType
9220
+ }) => {
9223
9221
  const [isFocused, setIsFocused] = useState(false);
9224
9222
  const [showOptions, setShowOptions] = useState(false);
9225
9223
  const [showAbove, setShowAbove] = useState(false);
@@ -10319,24 +10317,23 @@ const QuarterPopupPicker = ({
10319
10317
  };
10320
10318
 
10321
10319
  /* eslint-disable import/no-extraneous-dependencies */
10322
- const QuarterPicker = _ref => {
10323
- let {
10324
- availableQuarters,
10325
- // ["Q1-2024"]
10326
- label,
10327
- onChange,
10328
- borderRadius,
10329
- required,
10330
- width,
10331
- height,
10332
- placeholder,
10333
- disabled,
10334
- borderColor,
10335
- borderColorFocus,
10336
- textColor,
10337
- selectedValue,
10338
- startYear
10339
- } = _ref;
10320
+ const QuarterPicker = ({
10321
+ availableQuarters,
10322
+ // ["Q1-2024"]
10323
+ label,
10324
+ onChange,
10325
+ borderRadius,
10326
+ required,
10327
+ width,
10328
+ height,
10329
+ placeholder,
10330
+ disabled,
10331
+ borderColor,
10332
+ borderColorFocus,
10333
+ textColor,
10334
+ selectedValue,
10335
+ startYear
10336
+ }) => {
10340
10337
  const [isFocused, setIsFocused] = useState(false);
10341
10338
  const [isOpen, setIsOpen] = useState(false);
10342
10339
  const [value, setValue] = useState('');
@@ -10778,23 +10775,22 @@ const MonthPopupPicker = ({
10778
10775
  };
10779
10776
 
10780
10777
  /* eslint-disable import/no-extraneous-dependencies */
10781
- const MonthPicker = _ref => {
10782
- let {
10783
- availableMonths,
10784
- label,
10785
- onChange,
10786
- borderRadius,
10787
- required,
10788
- width,
10789
- height,
10790
- placeholder,
10791
- disabled,
10792
- borderColor,
10793
- borderColorFocus,
10794
- textColor,
10795
- selectedValue,
10796
- startYear
10797
- } = _ref;
10778
+ const MonthPicker = ({
10779
+ availableMonths,
10780
+ label,
10781
+ onChange,
10782
+ borderRadius,
10783
+ required,
10784
+ width,
10785
+ height,
10786
+ placeholder,
10787
+ disabled,
10788
+ borderColor,
10789
+ borderColorFocus,
10790
+ textColor,
10791
+ selectedValue,
10792
+ startYear
10793
+ }) => {
10798
10794
  const [isFocused, setIsFocused] = useState(false);
10799
10795
  const [isOpen, setIsOpen] = useState(false);
10800
10796
  const [value, setValue] = useState('');
@@ -23905,22 +23901,21 @@ const DeleteIcon = styled.div`
23905
23901
  position: absolute;
23906
23902
  `;
23907
23903
 
23908
- const QuickFilterDropdownSingle = _ref => {
23909
- let {
23910
- label,
23911
- hoverColor,
23912
- options,
23913
- selectedValue,
23914
- placeHolder,
23915
- onChange,
23916
- disabled,
23917
- width,
23918
- error,
23919
- errorMessage,
23920
- xIconShow,
23921
- labelColor,
23922
- showLabelOnTop
23923
- } = _ref;
23904
+ const QuickFilterDropdownSingle = ({
23905
+ label,
23906
+ hoverColor,
23907
+ options,
23908
+ selectedValue,
23909
+ placeHolder,
23910
+ onChange,
23911
+ disabled,
23912
+ width,
23913
+ error,
23914
+ errorMessage,
23915
+ xIconShow,
23916
+ labelColor,
23917
+ showLabelOnTop
23918
+ }) => {
23924
23919
  const [isFocused, setIsFocused] = useState(false);
23925
23920
  const [showOptions, setShowOptions] = useState(false);
23926
23921
  const [inputValue, setInputValue] = useState("");
@@ -24317,24 +24312,23 @@ const IconContainer$2 = styled.div`
24317
24312
  cursor: pointer;
24318
24313
  `;
24319
24314
 
24320
- const QuickFilterDropdownMultiSelection = _ref => {
24321
- let {
24322
- label,
24323
- labelEmptyValue,
24324
- options,
24325
- selectedValue,
24326
- placeHolder,
24327
- onChange,
24328
- required,
24329
- disabled,
24330
- width,
24331
- error,
24332
- errorMessage,
24333
- labelColor,
24334
- xIconShow,
24335
- checkBoxColor,
24336
- showLabelOnTop
24337
- } = _ref;
24315
+ const QuickFilterDropdownMultiSelection = ({
24316
+ label,
24317
+ labelEmptyValue,
24318
+ options,
24319
+ selectedValue,
24320
+ placeHolder,
24321
+ onChange,
24322
+ required,
24323
+ disabled,
24324
+ width,
24325
+ error,
24326
+ errorMessage,
24327
+ labelColor,
24328
+ xIconShow,
24329
+ checkBoxColor,
24330
+ showLabelOnTop
24331
+ }) => {
24338
24332
  const [isFocused, setIsFocused] = useState(false);
24339
24333
  const [showOptions, setShowOptions] = useState(false);
24340
24334
  const [inputValue, setInputValue] = useState('');
@@ -35566,9 +35560,9 @@ const ToggleSlider = styled.span`
35566
35560
  }
35567
35561
  `;
35568
35562
 
35569
- /**
35570
- * ToggleSwitch component for on/off states.
35571
- * Supports small/large sizes and disabled state.
35563
+ /**
35564
+ * ToggleSwitch component for on/off states.
35565
+ * Supports small/large sizes and disabled state.
35572
35566
  */
35573
35567
  function ToggleSwitch(_ref) {
35574
35568
  let {
@@ -51249,10 +51243,11 @@ const ItemManagerPanel = _ref => {
51249
51243
  onClick: e => {
51250
51244
  handleVendorClick(item);
51251
51245
  }
51252
- }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, null, item.name), item.packages.length === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), item.packages.length > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, (() => {
51246
+ }, /*#__PURE__*/React$1.createElement(VendorNameAndPackagesContainer$1, null, /*#__PURE__*/React$1.createElement(VendorName$2, null, item.name), console.log('item.name', item.name), item.packages.length === 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, "No Packages"), item.packages.length > 0 && /*#__PURE__*/React$1.createElement(Subtitle$1, null, (() => {
51253
51247
  const packagesWithStatus = item.packages.filter(pkg => pkg.hasOwnProperty('status') && pkg.status != null && pkg.status !== undefined && pkg.status !== '');
51254
51248
  const allHaveStatus = packagesWithStatus.length === item.packages.length;
51255
51249
  const noneHaveStatus = packagesWithStatus.length === 0;
51250
+ console.log('noneHaveStatus', noneHaveStatus);
51256
51251
  if (noneHaveStatus) {
51257
51252
  return `0/${item.packages.length} sent`;
51258
51253
  } else if (allHaveStatus) {
@@ -51861,7 +51856,7 @@ const OverlayDropdown = _ref => {
51861
51856
  const newItem = {
51862
51857
  ...templateDialog.item,
51863
51858
  label: finalSentence,
51864
- value: `last_defined_${Date.now()}`,
51859
+ value: templateDialog.item.value,
51865
51860
  // Unique value
51866
51861
  overlayCode: templateDialog.group.overlayCode,
51867
51862
  overlayName: templateDialog.group.overlayName,
@@ -52384,6 +52379,9 @@ const StatusCard = styled.div`
52384
52379
  flex-grow: 1;
52385
52380
  flex-basis: 0;
52386
52381
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.10);
52382
+ @media (max-width: 1200px) {
52383
+ padding: 8px;
52384
+ }
52387
52385
  `;
52388
52386
  const CardHeader = styled.div`
52389
52387
  display: flex;
@@ -52392,9 +52390,10 @@ const CardHeader = styled.div`
52392
52390
  margin-bottom: 10px;
52393
52391
  `;
52394
52392
  const CheckmarkContainer = styled.div`
52395
- width: 17px;
52396
- height: 17px;
52393
+ width: 18px;
52394
+ height: 18px;
52397
52395
  border: 2px solid #212121;
52396
+ box-sizing: border-box;
52398
52397
  border-radius: 4px;
52399
52398
  display: flex;
52400
52399
  align-items: center;
@@ -52411,6 +52410,11 @@ const CheckmarkContainer = styled.div`
52411
52410
 
52412
52411
  svg { display: none; }
52413
52412
  &.checked svg { display: block; }
52413
+
52414
+ @media (max-width: 1200px) {
52415
+ width: 16px;
52416
+ height: 16px;
52417
+ }
52414
52418
  `;
52415
52419
  const Circle = styled.div`
52416
52420
  width: 16px;
@@ -52418,19 +52422,17 @@ const Circle = styled.div`
52418
52422
  border-radius: 50%;
52419
52423
  background-color: ${props => props.color};
52420
52424
  margin-right: 8px;
52425
+ @media (max-width: 1200px) {
52426
+ width: 14px;
52427
+ height: 14px;
52428
+ }
52421
52429
  `;
52422
52430
  const CardTitle = styled.h3`
52423
52431
  margin: 0;
52424
52432
  font-size: 18px;
52425
52433
  font-weight: 500;
52426
- `;
52427
- styled.input`
52428
- width: 16px;
52429
- height: 16px;
52430
- accent-color: #066768;
52431
- margin-left: auto;
52432
- &:checked {
52433
- filter: invert(1) hue-rotate(180deg) brightness(2);
52434
+ @media (max-width: 1200px) {
52435
+ font-size: 16px;
52434
52436
  }
52435
52437
  `;
52436
52438
  const CardContent = styled.div`
@@ -52442,6 +52444,9 @@ const StatusCount = styled.span`
52442
52444
  font-size: 32px;
52443
52445
  font-weight: 500;
52444
52446
  line-height: 1;
52447
+ @media (max-width: 1200px) {
52448
+ font-size: 26px;
52449
+ }
52445
52450
  `;
52446
52451
 
52447
52452
  const QuickFilterCards = _ref => {
@@ -52486,8 +52491,8 @@ const QuickFilterCards = _ref => {
52486
52491
  }), /*#__PURE__*/React$1.createElement(CardTitle, null, status), /*#__PURE__*/React$1.createElement(CheckmarkContainer, {
52487
52492
  className: checked ? "checked" : ""
52488
52493
  }, checked && /*#__PURE__*/React$1.createElement("svg", {
52489
- width: "14",
52490
- height: "14",
52494
+ width: "15",
52495
+ height: "15",
52491
52496
  viewBox: "0 0 20 20",
52492
52497
  fill: "currentColor"
52493
52498
  }, /*#__PURE__*/React$1.createElement("path", {