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 +130 -125
- package/dist/index.esm.js.map +1 -1
- package/dist/index.js +130 -125
- package/dist/index.js.map +1 -1
- package/dist/types/components/QuickFilterCards/QuickFilterCards.stories.d.ts +25 -18
- package/dist/types/components/QuickFilterCards/QuickFilterCards.style.d.ts +0 -1
- package/package.json +1 -1
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 =
|
|
8714
|
-
|
|
8715
|
-
|
|
8716
|
-
|
|
8717
|
-
|
|
8718
|
-
|
|
8719
|
-
|
|
8720
|
-
|
|
8721
|
-
|
|
8722
|
-
|
|
8723
|
-
|
|
8724
|
-
|
|
8725
|
-
|
|
8726
|
-
|
|
8727
|
-
|
|
8728
|
-
|
|
8729
|
-
|
|
8730
|
-
|
|
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 =
|
|
9204
|
-
|
|
9205
|
-
|
|
9206
|
-
|
|
9207
|
-
|
|
9208
|
-
|
|
9209
|
-
|
|
9210
|
-
|
|
9211
|
-
|
|
9212
|
-
|
|
9213
|
-
|
|
9214
|
-
|
|
9215
|
-
|
|
9216
|
-
|
|
9217
|
-
|
|
9218
|
-
|
|
9219
|
-
|
|
9220
|
-
|
|
9221
|
-
|
|
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 =
|
|
10323
|
-
|
|
10324
|
-
|
|
10325
|
-
|
|
10326
|
-
|
|
10327
|
-
|
|
10328
|
-
|
|
10329
|
-
|
|
10330
|
-
|
|
10331
|
-
|
|
10332
|
-
|
|
10333
|
-
|
|
10334
|
-
|
|
10335
|
-
|
|
10336
|
-
|
|
10337
|
-
|
|
10338
|
-
|
|
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 =
|
|
10782
|
-
|
|
10783
|
-
|
|
10784
|
-
|
|
10785
|
-
|
|
10786
|
-
|
|
10787
|
-
|
|
10788
|
-
|
|
10789
|
-
|
|
10790
|
-
|
|
10791
|
-
|
|
10792
|
-
|
|
10793
|
-
|
|
10794
|
-
|
|
10795
|
-
|
|
10796
|
-
|
|
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 =
|
|
23909
|
-
|
|
23910
|
-
|
|
23911
|
-
|
|
23912
|
-
|
|
23913
|
-
|
|
23914
|
-
|
|
23915
|
-
|
|
23916
|
-
|
|
23917
|
-
|
|
23918
|
-
|
|
23919
|
-
|
|
23920
|
-
|
|
23921
|
-
|
|
23922
|
-
|
|
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 =
|
|
24321
|
-
|
|
24322
|
-
|
|
24323
|
-
|
|
24324
|
-
|
|
24325
|
-
|
|
24326
|
-
|
|
24327
|
-
|
|
24328
|
-
|
|
24329
|
-
|
|
24330
|
-
|
|
24331
|
-
|
|
24332
|
-
|
|
24333
|
-
|
|
24334
|
-
|
|
24335
|
-
|
|
24336
|
-
|
|
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:
|
|
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:
|
|
52396
|
-
height:
|
|
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
|
-
|
|
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: "
|
|
52490
|
-
height: "
|
|
52494
|
+
width: "15",
|
|
52495
|
+
height: "15",
|
|
52491
52496
|
viewBox: "0 0 20 20",
|
|
52492
52497
|
fill: "currentColor"
|
|
52493
52498
|
}, /*#__PURE__*/React$1.createElement("path", {
|