scorer-ui-kit 2.6.2 → 2.6.4
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/Filters/index.d.ts +2 -2
- package/dist/Filters/molecules/DatePicker.d.ts +5 -0
- package/dist/Global/atoms/NavigationItem.d.ts +1 -3
- package/dist/Global/atoms/TopBarBadge.d.ts +4 -0
- package/dist/Global/index.d.ts +8 -0
- package/dist/index.d.ts +2 -2
- package/dist/index.js +272 -161
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +272 -161
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -5593,7 +5593,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5593
5593
|
})))));
|
|
5594
5594
|
};
|
|
5595
5595
|
|
|
5596
|
-
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$r, _templateObject5$o, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24;
|
|
5596
|
+
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$r, _templateObject5$o, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$8, _templateObject11$6, _templateObject12$5, _templateObject13$4, _templateObject14$2, _templateObject15$1, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26;
|
|
5597
5597
|
var initializeInterval = function initializeInterval(day) {
|
|
5598
5598
|
return {
|
|
5599
5599
|
start: dateFns.set(day, {
|
|
@@ -5614,13 +5614,13 @@ var CalendarArea = styled__default.div(_templateObject6$k || (_templateObject6$k
|
|
|
5614
5614
|
var CalendarHeader = styled__default.div(_templateObject7$j || (_templateObject7$j = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 70px;\n border-bottom: var(--grey-6) 1px solid;\n text-align: center;\n"])));
|
|
5615
5615
|
var CurrentMonth = styled__default.div(_templateObject8$g || (_templateObject8$g = _taggedTemplateLiteralLoose(["\n flex: 1;\n flex-direction: column;\n display: flex;\n align-items: center;\n justify-content: center;\n\n text-align: center;\n font-size: 20px;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0.5px;\n color: var(--primary-10);\n\n span {\n display: block;\n flex: 0;\n font-size: 10px;\n font-weight: 700;\n text-transform: uppercase;\n letter-spacing: 0.33px;\n }\n"])));
|
|
5616
5616
|
var IconWrap$1 = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
|
|
5617
|
-
var PaginateMonth = styled__default.button(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n flex: 0 0 72px;\n border: none;\n background: transparent;\n outline: none;\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n line-height: 20px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-around;\n align-items: center;\n\n transition: color var(--speed-fast) var(--easing-primary-in-out);\n
|
|
5617
|
+
var PaginateMonth = styled__default.button(_templateObject10$8 || (_templateObject10$8 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n flex: 0 0 72px;\n border: none;\n background: transparent;\n outline: none;\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n line-height: 20px;\n text-transform: uppercase;\n letter-spacing: 0.4px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-around;\n align-items: center;\n\n transition: color var(--speed-fast) var(--easing-primary-in-out);\n\n ", "{\n svg * {\n transition: stroke var(--speed-fast) var(--easing-primary-in-out);\n }\n }\n\n &:hover:enabled {\n color: var(--grey-12);\n\n ", "{\n [stroke]{\n stroke: var(--grey-12);\n }\n }\n }\n\n &:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n"])), IconWrap$1, IconWrap$1);
|
|
5618
5618
|
var CalBody = styled__default.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
|
|
5619
5619
|
var CalRow = styled__default.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: repeat(7, 40px);\n height: 40px;\n box-sizing: border-box;\n\n padding: 0 10px;\n"])));
|
|
5620
5620
|
var CalHRow = styled__default(CalRow)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n border-bottom: var(--grey-6) 1px solid;\n"])));
|
|
5621
|
-
var CalCell = styled__default.
|
|
5621
|
+
var CalCell = styled__default.button(_templateObject14$2 || (_templateObject14$2 = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n text-align: center;\n justify-content: center;\n align-items: center;\n border-radius: 5px;\n font-size: 14px;\n font-weight: 400;\n text-decoration: none;\n color: var(--grey-12);\n font-family: var(--font-data);\n"])), resetButtonStyles);
|
|
5622
5622
|
var CalHCell = styled__default(CalCell)(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n color: var(--grey-a11);\n"])));
|
|
5623
|
-
var CalCellB = styled__default(CalCell)(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: relative;\n text-align: center;\n font-size: 14px;\n font-weight: 400;\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n"])), function (_ref) {
|
|
5623
|
+
var CalCellB = styled__default(CalCell)(_templateObject16$1 || (_templateObject16$1 = _taggedTemplateLiteralLoose(["\n cursor: pointer;\n position: relative;\n text-align: center;\n font-size: 14px;\n font-weight: 400;\n\n ", "\n\n ", "\n\n ", ";\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n &:disabled {\n color: var(--grey-6);\n cursor: not-allowed;\n\n ", "\n\n ", ";\n }\n\n"])), function (_ref) {
|
|
5624
5624
|
var thisMonth = _ref.thisMonth;
|
|
5625
5625
|
return !thisMonth && styled.css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n color: var(--grey-a8);\n "])));
|
|
5626
5626
|
}, function (_ref2) {
|
|
@@ -5628,7 +5628,7 @@ var CalCellB = styled__default(CalCell)(_templateObject16$1 || (_templateObject1
|
|
|
5628
5628
|
return isToday && styled.css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--primary-a7);\n "])));
|
|
5629
5629
|
}, function (_ref3) {
|
|
5630
5630
|
var state = _ref3.state;
|
|
5631
|
-
return state !== 'single' && state !== 'start' && state !== 'end' && styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n &:hover {\n background: var(--primary-a6);\n color: var(--white-1);\n }\n "])));
|
|
5631
|
+
return state !== 'single' && state !== 'start' && state !== 'end' && styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n &:hover:enabled {\n background: var(--primary-a6);\n color: var(--white-1);\n }\n "])));
|
|
5632
5632
|
}, function (_ref4) {
|
|
5633
5633
|
var state = _ref4.state;
|
|
5634
5634
|
return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n background: var(--primary-9);\n color: var(--white-1);\n "])));
|
|
@@ -5644,6 +5644,12 @@ var CalCellB = styled__default(CalCell)(_templateObject16$1 || (_templateObject1
|
|
|
5644
5644
|
}, function (_ref8) {
|
|
5645
5645
|
var state = _ref8.state;
|
|
5646
5646
|
return state === 'inside' && styled.css(_templateObject24 || (_templateObject24 = _taggedTemplateLiteralLoose(["\n background: var(--primary-a5);\n border-radius: 0;\n opacity: 1;\n\n &:nth-child(7n+1), &:nth-child(7n){\n &::after {\n background: var(--primary-a5);\n display: block;\n content: '';\n position: absolute;\n left: -10px;\n width: 10px;\n top: 0;\n height: 40px;\n }\n }\n\n &:nth-child(7n)::after {\n left: auto;\n right: -10px;\n }\n "])));
|
|
5647
|
+
}, function (_ref9) {
|
|
5648
|
+
var state = _ref9.state;
|
|
5649
|
+
return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n color: var(--white-1);\n background: var(--red-a9);\n "])));
|
|
5650
|
+
}, function (_ref10) {
|
|
5651
|
+
var state = _ref10.state;
|
|
5652
|
+
return state === 'inside' && styled.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n color: var(--white-1);\n background: var(--red-a7);\n &:nth-child(7n+1), &:nth-child(7n){\n &::after {\n background: var(--red-a7);\n }\n }\n "])));
|
|
5647
5653
|
});
|
|
5648
5654
|
var enDayGuide = ["S", "M", "T", "W", "T", "F", "S"];
|
|
5649
5655
|
var jpDayGuide = ['日', '月', '火', '水', '木', '金', '土'];
|
|
@@ -5659,26 +5665,27 @@ var isDateInterval = function isDateInterval(value) {
|
|
|
5659
5665
|
}
|
|
5660
5666
|
return value.start instanceof Date && value.end instanceof Date;
|
|
5661
5667
|
};
|
|
5662
|
-
var DatePicker = function DatePicker(
|
|
5663
|
-
var
|
|
5664
|
-
dateMode =
|
|
5665
|
-
|
|
5666
|
-
timeMode =
|
|
5667
|
-
|
|
5668
|
-
dateTimeTextUpper =
|
|
5669
|
-
|
|
5670
|
-
dateTimeTextLower =
|
|
5671
|
-
|
|
5672
|
-
timeZoneTitle =
|
|
5673
|
-
|
|
5674
|
-
timeZoneValueTitle =
|
|
5675
|
-
|
|
5676
|
-
hasEmptyValue =
|
|
5677
|
-
|
|
5678
|
-
updateCallback =
|
|
5679
|
-
initialValue =
|
|
5680
|
-
|
|
5681
|
-
lang =
|
|
5668
|
+
var DatePicker = function DatePicker(_ref11) {
|
|
5669
|
+
var _ref11$dateMode = _ref11.dateMode,
|
|
5670
|
+
dateMode = _ref11$dateMode === void 0 ? 'interval' : _ref11$dateMode,
|
|
5671
|
+
_ref11$timeMode = _ref11.timeMode,
|
|
5672
|
+
timeMode = _ref11$timeMode === void 0 ? 'interval' : _ref11$timeMode,
|
|
5673
|
+
_ref11$dateTimeTextUp = _ref11.dateTimeTextUpper,
|
|
5674
|
+
dateTimeTextUpper = _ref11$dateTimeTextUp === void 0 ? 'From' : _ref11$dateTimeTextUp,
|
|
5675
|
+
_ref11$dateTimeTextLo = _ref11.dateTimeTextLower,
|
|
5676
|
+
dateTimeTextLower = _ref11$dateTimeTextLo === void 0 ? 'To' : _ref11$dateTimeTextLo,
|
|
5677
|
+
_ref11$timeZoneTitle = _ref11.timeZoneTitle,
|
|
5678
|
+
timeZoneTitle = _ref11$timeZoneTitle === void 0 ? 'Timezone' : _ref11$timeZoneTitle,
|
|
5679
|
+
_ref11$timeZoneValueT = _ref11.timeZoneValueTitle,
|
|
5680
|
+
timeZoneValueTitle = _ref11$timeZoneValueT === void 0 ? 'JST' : _ref11$timeZoneValueT,
|
|
5681
|
+
_ref11$hasEmptyValue = _ref11.hasEmptyValue,
|
|
5682
|
+
hasEmptyValue = _ref11$hasEmptyValue === void 0 ? false : _ref11$hasEmptyValue,
|
|
5683
|
+
_ref11$updateCallback = _ref11.updateCallback,
|
|
5684
|
+
updateCallback = _ref11$updateCallback === void 0 ? function () {} : _ref11$updateCallback,
|
|
5685
|
+
initialValue = _ref11.initialValue,
|
|
5686
|
+
availableRange = _ref11.availableRange,
|
|
5687
|
+
_ref11$lang = _ref11.lang,
|
|
5688
|
+
lang = _ref11$lang === void 0 ? 'en' : _ref11$lang;
|
|
5682
5689
|
var _useState = React.useState(getInitialValue(hasEmptyValue, initialValue)),
|
|
5683
5690
|
selectedRange = _useState[0],
|
|
5684
5691
|
setSelectedRange = _useState[1];
|
|
@@ -5744,9 +5751,9 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5744
5751
|
}
|
|
5745
5752
|
}, [dateMode, selectedRange, targetedDate]);
|
|
5746
5753
|
React.useEffect(function () {
|
|
5747
|
-
var
|
|
5748
|
-
start =
|
|
5749
|
-
end =
|
|
5754
|
+
var _ref12 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5755
|
+
start = _ref12.start,
|
|
5756
|
+
end = _ref12.end;
|
|
5750
5757
|
if (timeMode === 'interval' && dateFns.isAfter(dateFns.add(start, {
|
|
5751
5758
|
minutes: 1
|
|
5752
5759
|
}), end)) {
|
|
@@ -5760,16 +5767,16 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5760
5767
|
}
|
|
5761
5768
|
}, [selectedRange, timeMode]);
|
|
5762
5769
|
var updateStartDate = React.useCallback(function (start) {
|
|
5763
|
-
var
|
|
5764
|
-
end =
|
|
5770
|
+
var _ref13 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5771
|
+
end = _ref13.end;
|
|
5765
5772
|
setSelectedRange({
|
|
5766
5773
|
start: start,
|
|
5767
5774
|
end: end
|
|
5768
5775
|
});
|
|
5769
5776
|
}, [selectedRange]);
|
|
5770
5777
|
var updateEndDate = React.useCallback(function (end) {
|
|
5771
|
-
var
|
|
5772
|
-
start =
|
|
5778
|
+
var _ref14 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5779
|
+
start = _ref14.start;
|
|
5773
5780
|
setSelectedRange({
|
|
5774
5781
|
start: start,
|
|
5775
5782
|
end: end
|
|
@@ -5794,6 +5801,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5794
5801
|
setDateCallback: updateEndDate
|
|
5795
5802
|
})), React__default.createElement(TimeZoneOption, null, React__default.createElement(TimeZoneLabel, null, timeZoneTitle), React__default.createElement(TimeZoneValue, null, timeZoneValueTitle))), React__default.createElement(CalendarArea, null, React__default.createElement(CalendarHeader, null, React__default.createElement(PaginateMonth, {
|
|
5796
5803
|
type: 'button',
|
|
5804
|
+
disabled: isPrevMonthOutOfRange(focusedMonth, availableRange),
|
|
5797
5805
|
onClick: function onClick() {
|
|
5798
5806
|
return setFocusedMonth(dateFns.addMonths(focusedMonth, -1));
|
|
5799
5807
|
}
|
|
@@ -5807,6 +5815,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5807
5815
|
locale: lang === 'ja' ? locale.ja : locale.enUS
|
|
5808
5816
|
})), React__default.createElement(PaginateMonth, {
|
|
5809
5817
|
type: 'button',
|
|
5818
|
+
disabled: isNextMonthOutOfRange(focusedMonth, availableRange),
|
|
5810
5819
|
onClick: function onClick() {
|
|
5811
5820
|
return setFocusedMonth(dateFns.addMonths(focusedMonth, 1));
|
|
5812
5821
|
}
|
|
@@ -5830,6 +5839,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5830
5839
|
}, days.map(function (day, index) {
|
|
5831
5840
|
return React__default.createElement(CalCellB, {
|
|
5832
5841
|
key: index,
|
|
5842
|
+
disabled: isDayOutOfRange(day, availableRange),
|
|
5833
5843
|
onClick: function onClick() {
|
|
5834
5844
|
return onCellClick(day);
|
|
5835
5845
|
},
|
|
@@ -5881,6 +5891,48 @@ var getInitialValue = function getInitialValue(hasEmptyValue, initialValue) {
|
|
|
5881
5891
|
var validInitial = initialValue ? initialValue : initializeInterval(dateFns.startOfDay(new Date()));
|
|
5882
5892
|
return validInitial instanceof Date ? initializeInterval(validInitial) : validInitial;
|
|
5883
5893
|
};
|
|
5894
|
+
var isPrevMonthOutOfRange = function isPrevMonthOutOfRange(focusedMonth, availableRange) {
|
|
5895
|
+
if (!(availableRange !== null && availableRange !== void 0 && availableRange.start)) return false;
|
|
5896
|
+
try {
|
|
5897
|
+
var startYear = availableRange.start.getFullYear();
|
|
5898
|
+
var startMonth = availableRange.start.getMonth();
|
|
5899
|
+
if (focusedMonth.getFullYear() < startYear || focusedMonth.getFullYear() === startYear && focusedMonth.getMonth() <= startMonth) {
|
|
5900
|
+
return true;
|
|
5901
|
+
}
|
|
5902
|
+
} catch (error) {
|
|
5903
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5904
|
+
}
|
|
5905
|
+
return false;
|
|
5906
|
+
};
|
|
5907
|
+
var isNextMonthOutOfRange = function isNextMonthOutOfRange(focusedMonth, availableRange) {
|
|
5908
|
+
if (!(availableRange !== null && availableRange !== void 0 && availableRange.end)) return false;
|
|
5909
|
+
try {
|
|
5910
|
+
var endYear = availableRange.end.getFullYear();
|
|
5911
|
+
var endMonth = availableRange.end.getMonth();
|
|
5912
|
+
if (focusedMonth.getFullYear() > endYear || focusedMonth.getFullYear() === endYear && focusedMonth.getMonth() >= endMonth) {
|
|
5913
|
+
return true;
|
|
5914
|
+
}
|
|
5915
|
+
} catch (error) {
|
|
5916
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5917
|
+
}
|
|
5918
|
+
return false;
|
|
5919
|
+
};
|
|
5920
|
+
var isDayOutOfRange = function isDayOutOfRange(currentDay, availableRange) {
|
|
5921
|
+
if (!availableRange) return false;
|
|
5922
|
+
var start = availableRange.start,
|
|
5923
|
+
end = availableRange.end;
|
|
5924
|
+
try {
|
|
5925
|
+
if (start && currentDay < start && !dateFns.isSameDay(currentDay, start)) {
|
|
5926
|
+
return true;
|
|
5927
|
+
}
|
|
5928
|
+
if (end && currentDay > end && !dateFns.isSameDay(currentDay, end)) {
|
|
5929
|
+
return true;
|
|
5930
|
+
}
|
|
5931
|
+
} catch (error) {
|
|
5932
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5933
|
+
}
|
|
5934
|
+
return false;
|
|
5935
|
+
};
|
|
5884
5936
|
|
|
5885
5937
|
var _excluded$n = ["children"];
|
|
5886
5938
|
var _templateObject$H, _templateObject2$A;
|
|
@@ -12845,7 +12897,7 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
12845
12897
|
};
|
|
12846
12898
|
};
|
|
12847
12899
|
|
|
12848
|
-
var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$b
|
|
12900
|
+
var _templateObject$1z, _templateObject2$1k, _templateObject3$1c, _templateObject4$15, _templateObject5$$, _templateObject6$M, _templateObject7$I, _templateObject8$z, _templateObject9$q, _templateObject10$l, _templateObject11$f, _templateObject12$d, _templateObject13$b;
|
|
12849
12901
|
var Submenu = styled__default.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
12850
12902
|
var SubmenuHeader = styled__default.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
12851
12903
|
var SubmenuContainerInner = styled__default.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
|
|
@@ -12858,22 +12910,22 @@ var SubmenuItem = styled__default.li(_templateObject8$z || (_templateObject8$z =
|
|
|
12858
12910
|
return styled.css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && styled.css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
|
|
12859
12911
|
});
|
|
12860
12912
|
var SubmenuContainer = styled__default.div(_templateObject11$f || (_templateObject11$f = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n\n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n\n &::after {\n display: block;\n content: '';\n width: 1px;\n position: absolute;\n left: 40px;\n top: 0;\n bottom: 35px;\n background: var(--dividing-line);\n }\n\n"])));
|
|
12861
|
-
var ContextContainer = styled__default.div(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n min-height:
|
|
12862
|
-
var
|
|
12913
|
+
var ContextContainer = styled__default.div(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n min-height: ", ";\n width: inherit;\n\n ", "{\n display: grid;\n grid-template-rows: 0fr;\n };\n\n ", ";\n"])), function (_ref2) {
|
|
12914
|
+
var mobileMenu = _ref2.mobileMenu;
|
|
12915
|
+
return mobileMenu ? '30px' : '70px';
|
|
12916
|
+
}, SubmenuContainer, function (_ref3) {
|
|
12917
|
+
var open = _ref3.open;
|
|
12863
12918
|
return open && styled.css(_templateObject13$b || (_templateObject13$b = _taggedTemplateLiteralLoose(["\n ", "{\n grid-template-rows: 1fr;\n \n transition:\n grid-template-rows var(--speed-normal) var(--easing-primary-in-out),\n opacity var(--speed-fast) var(--easing-primary-in-out);\n \n opacity: 1;\n }\n "])), SubmenuContainer);
|
|
12864
|
-
}, function (_ref3) {
|
|
12865
|
-
var loading = _ref3.loading;
|
|
12866
|
-
return loading === 'true' && styled.css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
|
|
12867
12919
|
});
|
|
12868
12920
|
var NavigationItem = function NavigationItem(_ref4) {
|
|
12869
12921
|
var item = _ref4.item,
|
|
12870
12922
|
menuOpen = _ref4.menuOpen,
|
|
12871
12923
|
submenuOpen = _ref4.submenuOpen,
|
|
12872
12924
|
contextKey = _ref4.contextKey,
|
|
12873
|
-
loading = _ref4.loading,
|
|
12874
12925
|
topLevelPath = _ref4.topLevelPath,
|
|
12875
|
-
|
|
12876
|
-
|
|
12926
|
+
_ref4$mobileMenu = _ref4.mobileMenu,
|
|
12927
|
+
mobileMenu = _ref4$mobileMenu === void 0 ? false : _ref4$mobileMenu,
|
|
12928
|
+
onClickCallback = _ref4.onClickCallback;
|
|
12877
12929
|
var icon = item.icon,
|
|
12878
12930
|
title = item.title,
|
|
12879
12931
|
href = item.href,
|
|
@@ -12883,15 +12935,11 @@ var NavigationItem = function NavigationItem(_ref4) {
|
|
|
12883
12935
|
var refSubmenu = React.useRef(null);
|
|
12884
12936
|
var submenus = generateSubmenus(submenu, onClickCallback) || [];
|
|
12885
12937
|
var hasSubmenu = submenus.length > 0;
|
|
12886
|
-
|
|
12887
|
-
|
|
12888
|
-
|
|
12889
|
-
|
|
12890
|
-
},
|
|
12891
|
-
return React__default.createElement(ContextContainer, {
|
|
12892
|
-
open: submenuOpen,
|
|
12893
|
-
loading: loading ? 'true' : 'false'
|
|
12894
|
-
}, React__default.createElement(ContextItem, Object.assign({}, {
|
|
12938
|
+
return React__default.createElement(ContextContainer, Object.assign({
|
|
12939
|
+
open: submenuOpen
|
|
12940
|
+
}, {
|
|
12941
|
+
mobileMenu: mobileMenu
|
|
12942
|
+
}), React__default.createElement(ContextItem, Object.assign({}, {
|
|
12895
12943
|
title: title,
|
|
12896
12944
|
href: href,
|
|
12897
12945
|
isActive: isActive,
|
|
@@ -12958,7 +13006,7 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
12958
13006
|
return output;
|
|
12959
13007
|
};
|
|
12960
13008
|
|
|
12961
|
-
var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$m, _templateObject11$g, _templateObject12$e, _templateObject13$c, _templateObject14$
|
|
13009
|
+
var _templateObject$1A, _templateObject2$1l, _templateObject3$1d, _templateObject4$16, _templateObject5$10, _templateObject6$N, _templateObject7$J, _templateObject8$A, _templateObject9$r, _templateObject10$m, _templateObject11$g, _templateObject12$e, _templateObject13$c, _templateObject14$9;
|
|
12962
13010
|
var Logo = styled__default(reactRouterDom.Link)(_templateObject$1A || (_templateObject$1A = _taggedTemplateLiteralLoose(["\n height: 50px;\n margin: 0 20px 55px 15px;\n display: flex;\n\n object {\n pointer-events: none;\n }\n"])));
|
|
12963
13011
|
var LogoMark = styled__default.div(_templateObject2$1l || (_templateObject2$1l = _taggedTemplateLiteralLoose(["\n height: 50px;\n flex: 0 0 50px;\n margin-right: 15px;\n display: flex;\n justify-content: center;\n align-items: center;\n\n"])));
|
|
12964
13012
|
var LogoType = styled__default.div(_templateObject3$1d || (_templateObject3$1d = _taggedTemplateLiteralLoose(["\n opacity: 0;\n flex: 1;\n height: 50px;\n display: flex;\n justify-content: left;\n align-items: center;\n"])));
|
|
@@ -12976,7 +13024,7 @@ var Container$10 = styled__default.div(_templateObject11$g || (_templateObject11
|
|
|
12976
13024
|
desktopSize = _ref2.desktopSize;
|
|
12977
13025
|
return styled.css(_templateObject12$e || (_templateObject12$e = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n box-shadow: 0px 0px 7px 0px var(--primary-a2);\n width: ", ";\n border-right: 1px solid var(--dividing-line);\n\n ", ";\n\n ", "{\n transition: opacity var(--speed-normal) var(--easing-primary-in-out);\n opacity: ", ";\n }\n "])), open ? "var(--global-menu-width-open)" : "var(--global-menu-width-closed)", desktopSize === 'xxlarge' ? "" : styled.css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
|
|
12978
13026
|
});
|
|
12979
|
-
var ContainerInner = styled__default.div(_templateObject14$
|
|
13027
|
+
var ContainerInner = styled__default.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n width: var(--global-menu-width-open);\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
12980
13028
|
var MainMenu = function MainMenu(_ref3) {
|
|
12981
13029
|
var content = _ref3.content,
|
|
12982
13030
|
_ref3$home = _ref3.home,
|
|
@@ -13002,11 +13050,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13002
13050
|
var _useState = React.useState(0),
|
|
13003
13051
|
focusedContext = _useState[0],
|
|
13004
13052
|
setFocusedContext = _useState[1];
|
|
13005
|
-
var _useState2 = React.useState(true),
|
|
13006
|
-
loading = _useState2[0],
|
|
13007
|
-
setLoading = _useState2[1];
|
|
13008
13053
|
var location = reactRouterDom.useLocation();
|
|
13009
|
-
var checkedInItems = 0;
|
|
13010
13054
|
var autoMenuOpen = React.useCallback(function (e) {
|
|
13011
13055
|
if (e.pointerType === 'touch') {
|
|
13012
13056
|
return;
|
|
@@ -13031,12 +13075,6 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13031
13075
|
}
|
|
13032
13076
|
setFocusedContext(focusedContext !== contextKey ? contextKey : -1);
|
|
13033
13077
|
}, [setFocusedContext, focusedContext]);
|
|
13034
|
-
var readyCallback = React.useCallback(function () {
|
|
13035
|
-
checkedInItems++;
|
|
13036
|
-
if (checkedInItems === content.items.length) {
|
|
13037
|
-
setLoading(false);
|
|
13038
|
-
}
|
|
13039
|
-
}, [checkedInItems, content]);
|
|
13040
13078
|
return React__default.createElement(PushContainer, {
|
|
13041
13079
|
isPinned: menuState.isMenuPinned
|
|
13042
13080
|
}, ReactDom.createPortal(React__default.createElement(Container$10, {
|
|
@@ -13065,9 +13103,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13065
13103
|
onClickCallback: setFocusedContextCb
|
|
13066
13104
|
}, {
|
|
13067
13105
|
item: item,
|
|
13068
|
-
|
|
13069
|
-
focusedContext: focusedContext,
|
|
13070
|
-
readyCallback: readyCallback
|
|
13106
|
+
focusedContext: focusedContext
|
|
13071
13107
|
}));
|
|
13072
13108
|
})), React__default.createElement(MenuFooter, null, supportUrl && React__default.createElement(FooterItemContainer, null, React__default.createElement(ContextItem, {
|
|
13073
13109
|
compact: true,
|
|
@@ -13180,7 +13216,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
|
13180
13216
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13181
13217
|
};
|
|
13182
13218
|
|
|
13183
|
-
var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$d, _templateObject14$
|
|
13219
|
+
var _templateObject$1D, _templateObject2$1o, _templateObject3$1g, _templateObject4$19, _templateObject5$12, _templateObject6$P, _templateObject7$L, _templateObject8$C, _templateObject9$t, _templateObject10$o, _templateObject11$h, _templateObject12$f, _templateObject13$d, _templateObject14$a;
|
|
13184
13220
|
var DrawerTop = styled__default.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
|
|
13185
13221
|
var DrawerBottom = styled__default.div(_templateObject2$1o || (_templateObject2$1o = _taggedTemplateLiteralLoose(["\n width: 100%;\n position: fixed;\n bottom: 50px;\n @media ", " {\n position: static;\n bottom: 0;\n }\n"])), deviceMediaQuery.medium);
|
|
13186
13222
|
var DrawerHeader = styled__default.h2(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.35px;\n color: var(--grey-11);\n padding: 0;\n margin: 0 0 5px;\n"])));
|
|
@@ -13199,7 +13235,7 @@ var FooterMeta = styled__default.div(_templateObject12$f || (_templateObject12$f
|
|
|
13199
13235
|
return icon !== '' ? '31px;' : '21px;';
|
|
13200
13236
|
});
|
|
13201
13237
|
var NavigationContainer$1 = styled__default.div(_templateObject13$d || (_templateObject13$d = _taggedTemplateLiteralLoose(["\n max-height: 300px;\n overflow: scroll;\n overflow-x: hidden;\n overflow-y: auto;\n border-bottom: var(--dividing-line) 1px solid;\n"])));
|
|
13202
|
-
var FooterText = styled__default.div(_templateObject14$
|
|
13238
|
+
var FooterText = styled__default.div(_templateObject14$a || (_templateObject14$a = _taggedTemplateLiteralLoose(["\n white-space: break-spaces;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n max-width: 136px;\n max-width: ", ";\n color: var(--grey-11);\n opacity: 0.5;\n"])), function (_ref3) {
|
|
13203
13239
|
var icon = _ref3.icon;
|
|
13204
13240
|
return icon !== '' ? '136px;' : '164px;';
|
|
13205
13241
|
});
|
|
@@ -13363,28 +13399,114 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
|
|
|
13363
13399
|
return React__default.createElement(Container$14, null, unread && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(React.Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
|
|
13364
13400
|
};
|
|
13365
13401
|
|
|
13366
|
-
var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$p, _templateObject11$i, _templateObject12$g;
|
|
13367
|
-
var
|
|
13368
|
-
var
|
|
13369
|
-
var
|
|
13370
|
-
|
|
13371
|
-
|
|
13372
|
-
var
|
|
13402
|
+
var _templateObject$1G, _templateObject2$1r, _templateObject3$1j, _templateObject4$1b, _templateObject5$14, _templateObject6$R, _templateObject7$N, _templateObject8$E, _templateObject9$u, _templateObject10$p, _templateObject11$i, _templateObject12$g, _templateObject13$e;
|
|
13403
|
+
var CoreStyle = styled.css(_templateObject$1G || (_templateObject$1G = _taggedTemplateLiteralLoose(["\n display: flex;\n height: 32px;\n padding: 8px;\n align-items: center;\n justify-content: center;\n text-align: center;\n gap: 8px;\n border-radius: 3px;\n\n font-family: Lato;\n font-size: 14px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 85.714% */\n white-space: nowrap;\n\n transition: opacity var(--speed-fast) var(--easing-primary-out);\n\n"])));
|
|
13404
|
+
var ContainerStatic = styled__default.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
|
|
13405
|
+
var themeColor = _ref.themeColor;
|
|
13406
|
+
return themeColor ? styled.css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : styled.css(_templateObject4$1b || (_templateObject4$1b = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13407
|
+
});
|
|
13408
|
+
var DefaultText = styled__default.span(_templateObject5$14 || (_templateObject5$14 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
13409
|
+
var LinkText = styled__default.span(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose([""])));
|
|
13410
|
+
var ContainerLinked = styled__default.div(_templateObject7$N || (_templateObject7$N = _taggedTemplateLiteralLoose(["\n a {\n ", ";\n\n text-decoration: none;\n\n ", ";\n\n &:hover {\n ", ";\n }\n }\n"])), CoreStyle, function (_ref2) {
|
|
13411
|
+
var themeColor = _ref2.themeColor;
|
|
13412
|
+
return themeColor ? styled.css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : styled.css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13413
|
+
}, function (_ref3) {
|
|
13414
|
+
var themeColor = _ref3.themeColor;
|
|
13415
|
+
return themeColor ? styled.css(_templateObject10$p || (_templateObject10$p = _taggedTemplateLiteralLoose(["\n background-color: var(--", "-9);\n border: 2px solid var(--", "-9);\n color: var(--white-12);\n "])), themeColor, themeColor) : styled.css(_templateObject11$i || (_templateObject11$i = _taggedTemplateLiteralLoose(["\n background-color: var(--info-9);\n border: 2px solid var(--info-9);\n color: var(--white-12);\n "])));
|
|
13416
|
+
});
|
|
13417
|
+
var Container$15 = styled__default.div(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
13418
|
+
var ready = _ref4.ready,
|
|
13419
|
+
minWidth = _ref4.minWidth;
|
|
13420
|
+
return styled.css(_templateObject13$e || (_templateObject13$e = _taggedTemplateLiteralLoose(["\n \n visibility: ", ";\n opacity: ", ";\n\n transition: opacity var(--speed-fast) var(--easing-primary-in-out);\n\n ", ", ", "{\n /* Required to accurately measure container sizes and ensure hover doesn't resize. */\n ", ";\n }\n "])), ready ? 'visible' : 'hidden', ready ? '1' : '0', DefaultText, LinkText, ready && "min-width: " + minWidth + "px;");
|
|
13421
|
+
});
|
|
13422
|
+
var TopBarBadge = function TopBarBadge(_ref5) {
|
|
13423
|
+
var text = _ref5.text,
|
|
13424
|
+
color = _ref5.color,
|
|
13425
|
+
linkHref = _ref5.linkHref,
|
|
13426
|
+
linkTo = _ref5.linkTo,
|
|
13427
|
+
linkText = _ref5.linkText;
|
|
13428
|
+
var defaultTextRef = React.useRef();
|
|
13429
|
+
var linkTextRef = React.useRef();
|
|
13430
|
+
var _useState = React.useState(false),
|
|
13431
|
+
ready = _useState[0],
|
|
13432
|
+
setReady = _useState[1];
|
|
13433
|
+
var _useState2 = React.useState(false),
|
|
13434
|
+
hover = _useState2[0],
|
|
13435
|
+
setHover = _useState2[1];
|
|
13436
|
+
var _useState3 = React.useState(0),
|
|
13437
|
+
minWidth = _useState3[0],
|
|
13438
|
+
setMinWidth = _useState3[1];
|
|
13439
|
+
React.useEffect(function () {
|
|
13440
|
+
setReady(false);
|
|
13441
|
+
setTimeout(function () {
|
|
13442
|
+
var _linkTextRef$current;
|
|
13443
|
+
var defaultWidth = defaultTextRef.current.getBoundingClientRect().width;
|
|
13444
|
+
var linkWidth = ((_linkTextRef$current = linkTextRef.current) === null || _linkTextRef$current === void 0 ? void 0 : _linkTextRef$current.getBoundingClientRect().width) || 0;
|
|
13445
|
+
var largestWidth = defaultWidth >= linkWidth ? defaultWidth : linkWidth;
|
|
13446
|
+
setMinWidth(Math.ceil(largestWidth));
|
|
13447
|
+
setReady(true);
|
|
13448
|
+
}, 100);
|
|
13449
|
+
}, [defaultTextRef, linkTextRef, text, linkText, setMinWidth, setReady]);
|
|
13450
|
+
var defaultTextElement = React__default.createElement(DefaultText, {
|
|
13451
|
+
ref: defaultTextRef
|
|
13452
|
+
}, text);
|
|
13453
|
+
var linkTextElement = linkTo || linkHref ? React__default.createElement(LinkText, {
|
|
13454
|
+
ref: linkTextRef
|
|
13455
|
+
}, linkText || text) : null;
|
|
13456
|
+
var badgeComponent;
|
|
13457
|
+
if (linkTo) {
|
|
13458
|
+
badgeComponent = React__default.createElement(ContainerLinked, {
|
|
13459
|
+
themeColor: color
|
|
13460
|
+
}, React__default.createElement(reactRouterDom.Link, {
|
|
13461
|
+
to: linkTo
|
|
13462
|
+
}, !ready ? React__default.createElement(React.Fragment, null, defaultTextElement, linkTextElement) : React__default.createElement(React.Fragment, null, !hover ? defaultTextElement : linkTextElement)));
|
|
13463
|
+
} else if (linkHref) {
|
|
13464
|
+
badgeComponent = React__default.createElement(ContainerLinked, {
|
|
13465
|
+
themeColor: color
|
|
13466
|
+
}, React__default.createElement("a", {
|
|
13467
|
+
href: linkHref
|
|
13468
|
+
}, !ready ? React__default.createElement(React.Fragment, null, defaultTextElement, linkTextElement) : React__default.createElement(React.Fragment, null, !hover ? defaultTextElement : linkTextElement)));
|
|
13469
|
+
} else {
|
|
13470
|
+
badgeComponent = React__default.createElement(ContainerStatic, {
|
|
13471
|
+
themeColor: color
|
|
13472
|
+
}, defaultTextElement);
|
|
13473
|
+
}
|
|
13474
|
+
return React__default.createElement(Container$15, Object.assign({}, {
|
|
13475
|
+
ready: ready,
|
|
13476
|
+
minWidth: minWidth
|
|
13477
|
+
}, {
|
|
13478
|
+
onPointerEnter: function onPointerEnter() {
|
|
13479
|
+
return ready && setHover(true);
|
|
13480
|
+
},
|
|
13481
|
+
onPointerLeave: function onPointerLeave() {
|
|
13482
|
+
return ready && setHover(false);
|
|
13483
|
+
}
|
|
13484
|
+
}), badgeComponent);
|
|
13485
|
+
};
|
|
13486
|
+
|
|
13487
|
+
var _templateObject$1H, _templateObject2$1s, _templateObject3$1k, _templateObject4$1c, _templateObject5$15, _templateObject6$S, _templateObject7$O, _templateObject8$F, _templateObject9$v, _templateObject10$q, _templateObject11$j, _templateObject12$h, _templateObject13$f;
|
|
13488
|
+
var Container$16 = styled__default.div(_templateObject$1H || (_templateObject$1H = _taggedTemplateLiteralLoose(["\n z-index: 9;\n position: sticky;\n top: 0;\n height: 56px;\n padding: 0 16px 0 24px;\n width: 100%;\n display: flex;\n justify-content: space-between;\n align-self: flex-start;\n border-bottom: 1px solid var(--dividing-line);\n background: var(--grey-2);\n box-shadow: 5px 0px 10px 0px var(--primary-a2);\n"])));
|
|
13489
|
+
var RightArea$1 = styled__default.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
|
|
13490
|
+
var SearchBar = styled__default.div(_templateObject3$1k || (_templateObject3$1k = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
|
|
13491
|
+
var IconWrapper$4 = styled__default.div(_templateObject4$1c || (_templateObject4$1c = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n > div {\n display: flex;\n flex-direction: column;\n justify-content: center;\n }\n"])));
|
|
13492
|
+
var SearchInput = styled__default.input(_templateObject5$15 || (_templateObject5$15 = _taggedTemplateLiteralLoose(["\n ", ";\n font-family: var(--font-data);\n flex: 1;\n height: 35px;\n line-height: 35px;\n border: none;\n outline: none;\n background: transparent; \n color: var(--grey-10);\n font-size: 14px;\n\n &::placeholder {\n font-family: var(--font-data);\n font-weight: 400;\n font-style: italic;\n font-size: 14px;\n color: var(--grey-8);\n }\n"])), removeAutoFillStyle);
|
|
13493
|
+
var ButtonArea = styled__default.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
|
|
13494
|
+
var buttonClickAnimation = styled.keyframes(_templateObject7$O || (_templateObject7$O = _taggedTemplateLiteralLoose(["\n 0% {\n opacity:0.9;\n transform: scale(0.85);\n }\n 100% {\n opacity:1;\n transform: scale(1);\n }\n"])));
|
|
13373
13495
|
var DrawerToggle = styled__default.button.attrs({
|
|
13374
13496
|
type: 'button'
|
|
13375
|
-
})(
|
|
13497
|
+
})(_templateObject8$F || (_templateObject8$F = _taggedTemplateLiteralLoose(["\n position: relative;\n flex: 0 56px;\n width: 56px;\n height: inherit;\n display: flex;\n justify-content: center;\n align-items: center;\n border: none;\n background: none;\n outline: none;\n cursor: pointer;\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n right: 0;\n left: 0;\n height: 5px;\n background-color: transparent;\n border-radius: 2px 2px 0 0;\n }\n \n transition: background-color var(--speed-normal) var(--easing-primary-out);\n \n svg {\n transition: transform var(--speed-normal) var(--easing-primary-out);\n }\n\n &:hover {\n opacity: 0.9;\n &::after {\n background-color: var(--primary-6);\n }\n }\n \n ", "\n"])), function (_ref) {
|
|
13376
13498
|
var isActive = _ref.isActive;
|
|
13377
|
-
return isActive && styled.css(
|
|
13499
|
+
return isActive && styled.css(_templateObject9$v || (_templateObject9$v = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: var(--primary-9);\n &::after {\n background-color: var(--primary-9);\n }\n svg {\n transform: scale(1);\n animation: ", " 0.35s cubic-bezier(0.7, 0, 0.84, 0);\n }\n\n }\n "])), buttonClickAnimation);
|
|
13378
13500
|
});
|
|
13379
|
-
var DrawerPortalWrapper = styled__default.div(
|
|
13380
|
-
var Drawer = styled__default.div(
|
|
13501
|
+
var DrawerPortalWrapper = styled__default.div(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose([""])));
|
|
13502
|
+
var Drawer = styled__default.div(_templateObject11$j || (_templateObject11$j = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n\n position: fixed;\n right: -10px;\n top: 56px;\n bottom: 0;\n background: var(--global-element-background);\n border-left: var(--dividing-line) 1px solid;\n \n width: ", ";\n opacity: 0;\n visibility: hidden;\n z-index: 100;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n\n transition:\n opacity var(--speed-normal) var(--easing-primary-in-out),\n right var(--speed-normal) var(--easing-primary-in-out);\n\n ", "\n"])), function (_ref2) {
|
|
13381
13503
|
var baseWidth = _ref2.baseWidth;
|
|
13382
13504
|
return baseWidth ? baseWidth : "200px";
|
|
13383
13505
|
}, function (_ref3) {
|
|
13384
13506
|
var isOpen = _ref3.isOpen;
|
|
13385
|
-
return isOpen && styled.css(
|
|
13507
|
+
return isOpen && styled.css(_templateObject12$h || (_templateObject12$h = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
|
|
13386
13508
|
});
|
|
13387
|
-
var NotificationsContainer = styled__default.div(
|
|
13509
|
+
var NotificationsContainer = styled__default.div(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
|
|
13388
13510
|
var TopBar = function TopBar(_ref4) {
|
|
13389
13511
|
var _ref4$hasNotification = _ref4.hasNotifications,
|
|
13390
13512
|
hasNotifications = _ref4$hasNotification === void 0 ? false : _ref4$hasNotification,
|
|
@@ -13435,7 +13557,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13435
13557
|
hasUserDrawerMeta = _ref4.hasUserDrawerMeta,
|
|
13436
13558
|
copySuccessMessage = _ref4.copySuccessMessage,
|
|
13437
13559
|
includeCopyTitle = _ref4.includeCopyTitle,
|
|
13438
|
-
hasUserDrawerFooter = _ref4.hasUserDrawerFooter
|
|
13560
|
+
hasUserDrawerFooter = _ref4.hasUserDrawerFooter,
|
|
13561
|
+
badge = _ref4.badge;
|
|
13439
13562
|
var _useState = React.useState(null),
|
|
13440
13563
|
openDrawer = _useState[0],
|
|
13441
13564
|
setOpenDrawer = _useState[1];
|
|
@@ -13447,13 +13570,13 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13447
13570
|
return drawerKey;
|
|
13448
13571
|
});
|
|
13449
13572
|
};
|
|
13450
|
-
return React__default.createElement(Container$
|
|
13573
|
+
return React__default.createElement(Container$16, null, hasSearch ? React__default.createElement(SearchBar, null, React__default.createElement(IconWrapper$4, null, React__default.createElement(Icon, {
|
|
13451
13574
|
icon: 'Search',
|
|
13452
13575
|
size: 16,
|
|
13453
13576
|
color: 'grey-6'
|
|
13454
13577
|
})), React__default.createElement(SearchInput, {
|
|
13455
13578
|
placeholder: searchPlaceholder
|
|
13456
|
-
})) : React__default.createElement("div", null), React__default.createElement(ButtonArea, null, customDrawer && React__default.createElement(DrawerToggle, {
|
|
13579
|
+
})) : React__default.createElement("div", null), React__default.createElement(RightArea$1, null, badge && React__default.createElement(TopBarBadge, Object.assign({}, badge)), React__default.createElement(ButtonArea, null, customDrawer && React__default.createElement(DrawerToggle, {
|
|
13457
13580
|
isActive: openDrawer === 'custom',
|
|
13458
13581
|
onClick: function onClick() {
|
|
13459
13582
|
return toggleDrawers('custom');
|
|
@@ -13476,7 +13599,7 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13476
13599
|
icon: 'UserProfile',
|
|
13477
13600
|
size: 20,
|
|
13478
13601
|
color: 'dimmed'
|
|
13479
|
-
}))), ReactDom.createPortal(React__default.createElement(DrawerPortalWrapper, null, React__default.createElement(Drawer, {
|
|
13602
|
+
})))), ReactDom.createPortal(React__default.createElement(DrawerPortalWrapper, null, React__default.createElement(Drawer, {
|
|
13480
13603
|
isOpen: openDrawer === 'user'
|
|
13481
13604
|
}, React__default.createElement(UserMenu, Object.assign({}, {
|
|
13482
13605
|
hasLanguage: hasLanguage,
|
|
@@ -13513,8 +13636,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13513
13636
|
}, customDrawer.customComponent)), document.body));
|
|
13514
13637
|
};
|
|
13515
13638
|
|
|
13516
|
-
var _templateObject$
|
|
13517
|
-
var TabListWrapper = styled__default.div(_templateObject$
|
|
13639
|
+
var _templateObject$1I;
|
|
13640
|
+
var TabListWrapper = styled__default.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
|
|
13518
13641
|
var TabList = function TabList(_ref) {
|
|
13519
13642
|
var children = _ref.children,
|
|
13520
13643
|
defaultTabId = _ref.defaultTabId;
|
|
@@ -13527,11 +13650,11 @@ var TabList = function TabList(_ref) {
|
|
|
13527
13650
|
};
|
|
13528
13651
|
|
|
13529
13652
|
var _excluded$H = ["children", "tabFor", "onClick"];
|
|
13530
|
-
var _templateObject$
|
|
13531
|
-
var TabComponent = styled__default.div(_templateObject$
|
|
13532
|
-
var TabLabel = styled__default.label(_templateObject2$
|
|
13653
|
+
var _templateObject$1J, _templateObject2$1t, _templateObject3$1l;
|
|
13654
|
+
var TabComponent = styled__default.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
|
|
13655
|
+
var TabLabel = styled__default.label(_templateObject2$1t || (_templateObject2$1t = _taggedTemplateLiteralLoose(["\n height: 40px;\n ", "\n font-size: 15px;\n font-weight: ", ";\n letter-spacing: 0.09px;\n color: ", ";\n cursor: pointer;\n border-bottom: ", ";\n padding-top: 6px;\n padding-bottom: 14px;\n flex-shrink: 0;\n user-select: none;\n"])), function (_ref) {
|
|
13533
13656
|
var theme = _ref.theme;
|
|
13534
|
-
return styled.css(_templateObject3$
|
|
13657
|
+
return styled.css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
13535
13658
|
}, function (_ref2) {
|
|
13536
13659
|
var active = _ref2.active;
|
|
13537
13660
|
return active ? '600' : '500';
|
|
@@ -13562,27 +13685,27 @@ var Tab = function Tab(_ref5) {
|
|
|
13562
13685
|
};
|
|
13563
13686
|
|
|
13564
13687
|
var _excluded$I = ["children", "tabId"];
|
|
13565
|
-
var _templateObject$
|
|
13566
|
-
var Container$
|
|
13688
|
+
var _templateObject$1K;
|
|
13689
|
+
var Container$17 = styled__default.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n"])));
|
|
13567
13690
|
var TabContent = function TabContent(_ref) {
|
|
13568
13691
|
var children = _ref.children,
|
|
13569
13692
|
tabId = _ref.tabId,
|
|
13570
13693
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
|
|
13571
13694
|
var _useContext = React.useContext(TabContext),
|
|
13572
13695
|
selected = _useContext.selected;
|
|
13573
|
-
return selected === tabId ? React__default.createElement(Container$
|
|
13696
|
+
return selected === tabId ? React__default.createElement(Container$17, Object.assign({}, props), children) : null;
|
|
13574
13697
|
};
|
|
13575
13698
|
|
|
13576
13699
|
var _excluded$J = ["tabFor", "icon", "closeId", "counter", "status"];
|
|
13577
|
-
var _templateObject$
|
|
13578
|
-
var Container$
|
|
13579
|
-
var LinkTab = styled__default.div(_templateObject2$
|
|
13700
|
+
var _templateObject$1L, _templateObject2$1u, _templateObject3$1m, _templateObject4$1d;
|
|
13701
|
+
var Container$18 = styled__default.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
|
|
13702
|
+
var LinkTab = styled__default.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n display: flex;\n justify-content: center;\n align-items: center;\n height: 100%;\n\n ", ";\n\n ", "\n"])), function (_ref) {
|
|
13580
13703
|
var theme = _ref.theme;
|
|
13581
|
-
return styled.css(_templateObject3$
|
|
13704
|
+
return styled.css(_templateObject3$1m || (_templateObject3$1m = _taggedTemplateLiteralLoose(["\n transition: border ", " ", ";\n border-bottom: 5px solid ", ";\n\n ", " {\n [stroke]{\n stroke: var(--dimmed);\n }\n }\n\n &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.animation.speed.normal, theme.animation.easing.primary.easeInOut, theme.colors.menu.indicator, IconWrapper, theme.colors.menu.hover, IconWrapper, theme.colors.menu.hover);
|
|
13582
13705
|
}, function (_ref2) {
|
|
13583
13706
|
var isActive = _ref2.isActive,
|
|
13584
13707
|
theme = _ref2.theme;
|
|
13585
|
-
return isActive && styled.css(_templateObject4$
|
|
13708
|
+
return isActive && styled.css(_templateObject4$1d || (_templateObject4$1d = _taggedTemplateLiteralLoose(["\n &, &:hover {\n border-bottom-color: ", ";\n ", " {\n [stroke]{\n stroke: ", ";\n }\n }\n }\n "])), theme.colors.menu.active, IconWrapper, theme.colors.menu.active);
|
|
13586
13709
|
});
|
|
13587
13710
|
var MobileTab = function MobileTab(_ref3) {
|
|
13588
13711
|
var tabFor = _ref3.tabFor,
|
|
@@ -13598,7 +13721,7 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
13598
13721
|
var newValue = selected === tabId ? closeId : tabId;
|
|
13599
13722
|
setSelected(newValue);
|
|
13600
13723
|
}, [closeId, selected, setSelected]);
|
|
13601
|
-
return React__default.createElement(Container$
|
|
13724
|
+
return React__default.createElement(Container$18, Object.assign({}, props, {
|
|
13602
13725
|
onClick: function onClick() {
|
|
13603
13726
|
return onChangeTab(tabFor);
|
|
13604
13727
|
}
|
|
@@ -13612,23 +13735,23 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
13612
13735
|
};
|
|
13613
13736
|
|
|
13614
13737
|
var _excluded$K = ["icon", "title", "subtitle", "tabFor"];
|
|
13615
|
-
var _templateObject$
|
|
13616
|
-
var Container$
|
|
13738
|
+
var _templateObject$1M, _templateObject2$1v, _templateObject3$1n, _templateObject4$1e, _templateObject5$16, _templateObject6$T;
|
|
13739
|
+
var Container$19 = styled__default.div(_templateObject$1M || (_templateObject$1M = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n margin-right: 22px;\n padding-bottom: 7px;\n height: 60px;\n cursor: pointer;\n\n ", ";\n ", " {\n margin-left: 2px;\n flex-shrink: 0;\n }\n"])), function (_ref) {
|
|
13617
13740
|
var active = _ref.active;
|
|
13618
|
-
return active ? styled.css(_templateObject2$
|
|
13741
|
+
return active ? styled.css(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : styled.css(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
|
|
13619
13742
|
}, IconWrapper);
|
|
13620
|
-
var Title$a = styled__default.div(_templateObject4$
|
|
13743
|
+
var Title$a = styled__default.div(_templateObject4$1e || (_templateObject4$1e = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-family: ", ";\n letter-spacing: 0.09px;\n font-weight: 500;\n color: ", ";\n margin-bottom: 5px;\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref2) {
|
|
13621
13744
|
var theme = _ref2.theme;
|
|
13622
13745
|
return theme.fontFamily.ui;
|
|
13623
13746
|
}, function (_ref3) {
|
|
13624
13747
|
var active = _ref3.active;
|
|
13625
13748
|
return active ? 'var(--primary-11)' : 'var(--grey-11)';
|
|
13626
13749
|
});
|
|
13627
|
-
var SubTitle$2 = styled__default.div(_templateObject5$
|
|
13750
|
+
var SubTitle$2 = styled__default.div(_templateObject5$16 || (_templateObject5$16 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n font-family: ", ";\n font-style: italic;\n color: var(--grey-a10);\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref4) {
|
|
13628
13751
|
var theme = _ref4.theme;
|
|
13629
13752
|
return theme.fontFamily.data;
|
|
13630
13753
|
});
|
|
13631
|
-
var TextGroup$1 = styled__default.div(_templateObject6$
|
|
13754
|
+
var TextGroup$1 = styled__default.div(_templateObject6$T || (_templateObject6$T = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
|
|
13632
13755
|
var TabWithIcon = function TabWithIcon(_ref5) {
|
|
13633
13756
|
var icon = _ref5.icon,
|
|
13634
13757
|
title = _ref5.title,
|
|
@@ -13642,7 +13765,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
13642
13765
|
setSelected(tabId);
|
|
13643
13766
|
}, [setSelected]);
|
|
13644
13767
|
var active = selected === tabFor;
|
|
13645
|
-
return React__default.createElement(Container$
|
|
13768
|
+
return React__default.createElement(Container$19, Object.assign({}, {
|
|
13646
13769
|
active: active
|
|
13647
13770
|
}, props, {
|
|
13648
13771
|
onClick: function onClick() {
|
|
@@ -13659,9 +13782,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
13659
13782
|
}), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
|
|
13660
13783
|
};
|
|
13661
13784
|
|
|
13662
|
-
var _templateObject$
|
|
13663
|
-
var Container$
|
|
13664
|
-
var TabListWrapper$1 = styled__default.div(_templateObject2$
|
|
13785
|
+
var _templateObject$1N, _templateObject2$1w;
|
|
13786
|
+
var Container$1a = styled__default.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose([""])));
|
|
13787
|
+
var TabListWrapper$1 = styled__default.div(_templateObject2$1w || (_templateObject2$1w = _taggedTemplateLiteralLoose(["\n padding-top: 10px;\n padding-left: ", ";\n box-shadow: 0 -5px 5px 0 var(--black-a1);\n border-bottom: 1px solid var(--grey-6);\n overflow-y: auto;\n scrollbar-width: none; /* Firefox */\n -ms-overflow-style: none; /* Internet Explorer 10+ */\n &::-webkit-scrollbar { /* WebKit */\n width: 0;\n height: 0;\n }\n"])), function (_ref) {
|
|
13665
13788
|
var paddingLeft = _ref.paddingLeft;
|
|
13666
13789
|
return paddingLeft ? paddingLeft : '87px';
|
|
13667
13790
|
});
|
|
@@ -13669,7 +13792,7 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
13669
13792
|
var defaultTabId = _ref2.defaultTabId,
|
|
13670
13793
|
tabList = _ref2.tabList,
|
|
13671
13794
|
paddingLeft = _ref2.paddingLeft;
|
|
13672
|
-
return React__default.createElement(Container$
|
|
13795
|
+
return React__default.createElement(Container$1a, null, React__default.createElement(Tabs, null, React__default.createElement(TabListWrapper$1, Object.assign({}, {
|
|
13673
13796
|
paddingLeft: paddingLeft
|
|
13674
13797
|
}), React__default.createElement(TabList, Object.assign({}, {
|
|
13675
13798
|
defaultTabId: defaultTabId
|
|
@@ -13697,10 +13820,10 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
13697
13820
|
};
|
|
13698
13821
|
|
|
13699
13822
|
var _excluded$L = ["closeId", "closeText"];
|
|
13700
|
-
var _templateObject$
|
|
13701
|
-
var StyledButton$7 = styled__default.button(_templateObject$
|
|
13702
|
-
var IconContainer$4 = styled__default.div(_templateObject2$
|
|
13703
|
-
var TextWrapper$1 = styled__default.div(_templateObject3$
|
|
13823
|
+
var _templateObject$1O, _templateObject2$1x, _templateObject3$1o;
|
|
13824
|
+
var StyledButton$7 = styled__default.button(_templateObject$1O || (_templateObject$1O = _taggedTemplateLiteralLoose(["\n ", "\n \n font-family: var(--font-ui);\n background-color: var(--global-element-background);\n border-top: 1px solid var(--dividing-line);\n font-weight: 400;\n color: var(--grey-10);\n \n height: ", "px;\n position: fixed;\n bottom: 0;\n font-size: 14px;\n outline: none;\n\n width: 100%;\n text-align: center;\n white-space: nowrap;\n padding: 0 40px;\n\n"])), resetButtonStyles, MOBILE_CLOSE_HEIGHT);
|
|
13825
|
+
var IconContainer$4 = styled__default.div(_templateObject2$1x || (_templateObject2$1x = _taggedTemplateLiteralLoose(["\n height: inherit;\n position: absolute;\n top: 0;\n left: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n overflow: hidden;\n margin: 0 20px;\n\n svg {\n display:block;\n }\n"])));
|
|
13826
|
+
var TextWrapper$1 = styled__default.div(_templateObject3$1o || (_templateObject3$1o = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
|
|
13704
13827
|
var CloseButton$1 = function CloseButton(_ref) {
|
|
13705
13828
|
var closeId = _ref.closeId,
|
|
13706
13829
|
_ref$closeText = _ref.closeText,
|
|
@@ -13719,32 +13842,28 @@ var CloseButton$1 = function CloseButton(_ref) {
|
|
|
13719
13842
|
})), React__default.createElement(TextWrapper$1, null, closeText));
|
|
13720
13843
|
};
|
|
13721
13844
|
|
|
13722
|
-
var _templateObject$
|
|
13723
|
-
var Container$
|
|
13724
|
-
var ContentWrapper = styled__default.div(_templateObject2$
|
|
13845
|
+
var _templateObject$1P, _templateObject2$1y;
|
|
13846
|
+
var Container$1b = styled__default.div(_templateObject$1P || (_templateObject$1P = _taggedTemplateLiteralLoose(["\n position: relative;\n min-height: calc(100vh - ", "px);\n width: 100%;\n overflow-y: scroll;\n"])), MOBILE_NAVBAR_HEIGHT + MOBILE_CLOSE_HEIGHT);
|
|
13847
|
+
var ContentWrapper = styled__default.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
|
|
13725
13848
|
var MobileNavbarContent = function MobileNavbarContent(_ref) {
|
|
13726
13849
|
var closeId = _ref.closeId,
|
|
13727
13850
|
children = _ref.children;
|
|
13728
13851
|
var _useContext = React.useContext(TabContext),
|
|
13729
13852
|
selected = _useContext.selected;
|
|
13730
|
-
return selected === closeId ? null : React__default.createElement(Container$
|
|
13853
|
+
return selected === closeId ? null : React__default.createElement(Container$1b, null, React__default.createElement(ContentWrapper, null, children));
|
|
13731
13854
|
};
|
|
13732
13855
|
|
|
13733
|
-
var _templateObject$
|
|
13734
|
-
var Container$
|
|
13735
|
-
var ItemWrapper = styled__default.div(_templateObject2$
|
|
13856
|
+
var _templateObject$1Q, _templateObject2$1z;
|
|
13857
|
+
var Container$1c = styled__default.div(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose([""])));
|
|
13858
|
+
var ItemWrapper = styled__default.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n border-bottom: 1px solid var(--dividing-line);\n"])));
|
|
13736
13859
|
var MobileMenu = function MobileMenu(_ref) {
|
|
13737
13860
|
var content = _ref.content,
|
|
13738
13861
|
supportUrl = _ref.supportUrl,
|
|
13739
13862
|
closeId = _ref.closeId;
|
|
13740
|
-
var _useState = React.useState(
|
|
13741
|
-
|
|
13742
|
-
|
|
13743
|
-
var _useState2 = React.useState(0),
|
|
13744
|
-
focusedContext = _useState2[0],
|
|
13745
|
-
setFocusedContext = _useState2[1];
|
|
13863
|
+
var _useState = React.useState(0),
|
|
13864
|
+
focusedContext = _useState[0],
|
|
13865
|
+
setFocusedContext = _useState[1];
|
|
13746
13866
|
var location = reactRouterDom.useLocation();
|
|
13747
|
-
var checkedInItems = 0;
|
|
13748
13867
|
var _useContext = React.useContext(TabContext),
|
|
13749
13868
|
setSelected = _useContext.setSelected;
|
|
13750
13869
|
var setFocusedContextCb = React.useCallback(function (contextKey) {
|
|
@@ -13756,21 +13875,15 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13756
13875
|
}
|
|
13757
13876
|
setFocusedContext(focusedContext !== contextKey ? contextKey : -1);
|
|
13758
13877
|
}, [closeId, content.items, focusedContext, setSelected]);
|
|
13759
|
-
var readyCallback = React.useCallback(function () {
|
|
13760
|
-
checkedInItems++;
|
|
13761
|
-
if (checkedInItems === content.items.length) {
|
|
13762
|
-
setLoading(false);
|
|
13763
|
-
}
|
|
13764
|
-
}, [checkedInItems, content.items.length]);
|
|
13765
13878
|
var handleCloseMenu = React.useCallback(function () {
|
|
13766
13879
|
setSelected(closeId);
|
|
13767
13880
|
}, [closeId, setSelected]);
|
|
13768
|
-
return React__default.createElement(Container$
|
|
13881
|
+
return React__default.createElement(Container$1c, null, content.items.map(function (item, key) {
|
|
13769
13882
|
return React__default.createElement(ItemWrapper, {
|
|
13770
13883
|
key: key,
|
|
13771
13884
|
"data-key": key
|
|
13772
13885
|
}, React__default.createElement(NavigationItem, Object.assign({
|
|
13773
|
-
|
|
13886
|
+
mobileMenu: true,
|
|
13774
13887
|
topLevelPath: getTopLevelPath(location.pathname),
|
|
13775
13888
|
contextKey: key,
|
|
13776
13889
|
menuOpen: true,
|
|
@@ -13778,9 +13891,7 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13778
13891
|
onClickCallback: setFocusedContextCb
|
|
13779
13892
|
}, {
|
|
13780
13893
|
item: item,
|
|
13781
|
-
|
|
13782
|
-
focusedContext: focusedContext,
|
|
13783
|
-
readyCallback: readyCallback
|
|
13894
|
+
focusedContext: focusedContext
|
|
13784
13895
|
})));
|
|
13785
13896
|
}), supportUrl && React__default.createElement(ItemWrapper, null, React__default.createElement(ContextItem, {
|
|
13786
13897
|
compact: true,
|
|
@@ -13793,10 +13904,10 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13793
13904
|
})));
|
|
13794
13905
|
};
|
|
13795
13906
|
|
|
13796
|
-
var _templateObject$
|
|
13797
|
-
var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$
|
|
13798
|
-
var LogoMark$1 = styled__default.div(_templateObject2$
|
|
13799
|
-
var SVGObject$1 = styled__default.object(_templateObject3$
|
|
13907
|
+
var _templateObject$1R, _templateObject2$1A, _templateObject3$1p;
|
|
13908
|
+
var Logo$1 = styled__default(reactRouterDom.Link)(_templateObject$1R || (_templateObject$1R = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n flex-basis: 0;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n object {\n pointer-events: none;\n height: 25px;\n }\n"])), resetButtonStyles);
|
|
13909
|
+
var LogoMark$1 = styled__default.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
|
|
13910
|
+
var SVGObject$1 = styled__default.object(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose([""])));
|
|
13800
13911
|
var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
13801
13912
|
var _ref$home = _ref.home,
|
|
13802
13913
|
home = _ref$home === void 0 ? "/" : _ref$home,
|
|
@@ -13816,8 +13927,8 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
|
13816
13927
|
};
|
|
13817
13928
|
|
|
13818
13929
|
var _excluded$M = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
|
|
13819
|
-
var _templateObject$
|
|
13820
|
-
var Container$
|
|
13930
|
+
var _templateObject$1S;
|
|
13931
|
+
var Container$1d = styled__default.div(_templateObject$1S || (_templateObject$1S = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n \n z-index: 100;\n display: flex;\n flex-direction: column;\n"])));
|
|
13821
13932
|
var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
13822
13933
|
var closeId = _ref.closeId,
|
|
13823
13934
|
hasLanguage = _ref.hasLanguage,
|
|
@@ -13835,7 +13946,7 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
|
13835
13946
|
var handleCloseMenu = React.useCallback(function () {
|
|
13836
13947
|
setSelected(closeId);
|
|
13837
13948
|
}, [closeId, setSelected]);
|
|
13838
|
-
return React__default.createElement(Container$
|
|
13949
|
+
return React__default.createElement(Container$1d, null, React__default.createElement(UserMenu, Object.assign({}, _extends({
|
|
13839
13950
|
hasLanguage: hasLanguage,
|
|
13840
13951
|
hasLogout: hasLogout,
|
|
13841
13952
|
logoutLink: logoutLink,
|
|
@@ -13851,14 +13962,14 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
|
13851
13962
|
};
|
|
13852
13963
|
|
|
13853
13964
|
var _excluded$N = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
|
|
13854
|
-
var _templateObject$
|
|
13965
|
+
var _templateObject$1T, _templateObject2$1B;
|
|
13855
13966
|
var CLOSE_ID = 'closeMenu';
|
|
13856
13967
|
var NOTI_TAB = 'notifications';
|
|
13857
13968
|
var USER_TAB = 'user';
|
|
13858
13969
|
var MENU_TAB = 'menu';
|
|
13859
13970
|
var CUSTOM_TAB = 'custom';
|
|
13860
|
-
var Container$
|
|
13861
|
-
var HeaderContainer = styled__default.div(_templateObject2$
|
|
13971
|
+
var Container$1e = styled__default.nav(_templateObject$1T || (_templateObject$1T = _taggedTemplateLiteralLoose(["\n background-color: var(--global-element-background);\n position: sticky;\n top: 0;\n left: 0;\n width: 100%;\n z-index: 99;\n"])));
|
|
13972
|
+
var HeaderContainer = styled__default.div(_templateObject2$1B || (_templateObject2$1B = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n height: ", "px;\n border-bottom: var(--dividing-line) 1px solid;\n\n ", " {\n flex-basis: 0;\n flex-grow: 3;\n }\n"])), MOBILE_NAVBAR_HEIGHT, TabListWrapper);
|
|
13862
13973
|
var MobileNavbar = function MobileNavbar(_ref) {
|
|
13863
13974
|
var content = _ref.content,
|
|
13864
13975
|
home = _ref.home,
|
|
@@ -13880,7 +13991,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
|
|
|
13880
13991
|
onLogout = _ref.onLogout,
|
|
13881
13992
|
onLanguageToggle = _ref.onLanguageToggle,
|
|
13882
13993
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
|
|
13883
|
-
return React__default.createElement(Container$
|
|
13994
|
+
return React__default.createElement(Container$1e, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
|
|
13884
13995
|
home: home,
|
|
13885
13996
|
logoMark: logoMark
|
|
13886
13997
|
}, {
|
|
@@ -13979,16 +14090,16 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
13979
14090
|
};
|
|
13980
14091
|
|
|
13981
14092
|
var _excluded$P = ["children"];
|
|
13982
|
-
var _templateObject$
|
|
13983
|
-
var Container$
|
|
13984
|
-
var LogoContainer = styled__default.div(_templateObject2$
|
|
13985
|
-
var LogoTopText = styled__default.div(_templateObject3$
|
|
13986
|
-
var LogoBottomText = styled__default.div(_templateObject4$
|
|
13987
|
-
var SidebarBox = styled__default.div(_templateObject5$
|
|
13988
|
-
var SidebarHeading = styled__default.div(_templateObject6$
|
|
13989
|
-
var SidebarLinkHeading = styled__default.div(_templateObject7$
|
|
13990
|
-
var BackLink$1 = styled__default(reactRouterDom.Link)(_templateObject8$
|
|
13991
|
-
var SLink = styled__default(reactRouterDom.Link)(_templateObject9$
|
|
14093
|
+
var _templateObject$1U, _templateObject2$1C, _templateObject3$1q, _templateObject4$1f, _templateObject5$17, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$w;
|
|
14094
|
+
var Container$1f = styled__default.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteralLoose(["\n width: 286px;\n border-right: 1px solid var(--grey-a7);\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n"])));
|
|
14095
|
+
var LogoContainer = styled__default.div(_templateObject2$1C || (_templateObject2$1C = _taggedTemplateLiteralLoose(["\n height: 84px;\n color: var(--grey-11);\n border-bottom: 1px solid var(--grey-a7);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding-top: 18px;\n padding-bottom: 15px;\n"])));
|
|
14096
|
+
var LogoTopText = styled__default.div(_templateObject3$1q || (_templateObject3$1q = _taggedTemplateLiteralLoose(["\n height: 31px;\n font-family: Monorale;\n font-size: 18px;\n font-weight: 500;\n line-height: 1.72;\n letter-spacing: 4.5px;\n text-align: center;\n"])));
|
|
14097
|
+
var LogoBottomText = styled__default.div(_templateObject4$1f || (_templateObject4$1f = _taggedTemplateLiteralLoose(["\n height: 19px;\n font-family: Monorale;\n font-size: 16px;\n font-weight: 400;\n line-height: normal;\n letter-spacing: 14.11px;\n text-align: center;\n"])));
|
|
14098
|
+
var SidebarBox = styled__default.div(_templateObject5$17 || (_templateObject5$17 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
|
|
14099
|
+
var SidebarHeading = styled__default.div(_templateObject6$U || (_templateObject6$U = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n margin-bottom: 18px;\n"])));
|
|
14100
|
+
var SidebarLinkHeading = styled__default.div(_templateObject7$P || (_templateObject7$P = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
|
|
14101
|
+
var BackLink$1 = styled__default(reactRouterDom.Link)(_templateObject8$G || (_templateObject8$G = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.35px;\n color: var(--grey-10);\n"])));
|
|
14102
|
+
var SLink = styled__default(reactRouterDom.Link)(_templateObject9$w || (_templateObject9$w = _taggedTemplateLiteralLoose(["\n position: absolute;\n right: 30px;\n top: 15px;\n /* width: 80px; */\n /* height: 30px; */\n font-size: 14px;\n font-weight: 600;\n text-align: center;\n color: var(--grey-9);\n border-radius: 3px;\n background-color: var(--primary-2);\n text-decoration: none;\n padding: 7px 20px;\n"])));
|
|
13992
14103
|
var SidebarLink = function SidebarLink(_ref) {
|
|
13993
14104
|
var title = _ref.title,
|
|
13994
14105
|
to = _ref.to;
|
|
@@ -14004,7 +14115,7 @@ var Logo$2 = function Logo(_ref2) {
|
|
|
14004
14115
|
var Sidebar = function Sidebar(_ref3) {
|
|
14005
14116
|
var children = _ref3.children,
|
|
14006
14117
|
props = _objectWithoutPropertiesLoose(_ref3, _excluded$P);
|
|
14007
|
-
return React__default.createElement(Container$
|
|
14118
|
+
return React__default.createElement(Container$1f, Object.assign({}, props), children);
|
|
14008
14119
|
};
|
|
14009
14120
|
|
|
14010
14121
|
Object.defineProperty(exports, 'IconSVGs', {
|