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.modern.js
CHANGED
|
@@ -5590,7 +5590,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5590
5590
|
})))));
|
|
5591
5591
|
};
|
|
5592
5592
|
|
|
5593
|
-
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;
|
|
5593
|
+
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;
|
|
5594
5594
|
var initializeInterval = function initializeInterval(day) {
|
|
5595
5595
|
return {
|
|
5596
5596
|
start: set(day, {
|
|
@@ -5611,13 +5611,13 @@ var CalendarArea = styled.div(_templateObject6$k || (_templateObject6$k = _tagge
|
|
|
5611
5611
|
var CalendarHeader = styled.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"])));
|
|
5612
5612
|
var CurrentMonth = styled.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"])));
|
|
5613
5613
|
var IconWrap$1 = styled.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
|
|
5614
|
-
var PaginateMonth = styled.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
|
|
5614
|
+
var PaginateMonth = styled.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);
|
|
5615
5615
|
var CalBody = styled.div(_templateObject11$6 || (_templateObject11$6 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
|
|
5616
5616
|
var CalRow = styled.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"])));
|
|
5617
5617
|
var CalHRow = styled(CalRow)(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n border-bottom: var(--grey-6) 1px solid;\n"])));
|
|
5618
|
-
var CalCell = styled.
|
|
5618
|
+
var CalCell = styled.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);
|
|
5619
5619
|
var CalHCell = styled(CalCell)(_templateObject15$1 || (_templateObject15$1 = _taggedTemplateLiteralLoose(["\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n color: var(--grey-a11);\n"])));
|
|
5620
|
-
var CalCellB = styled(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) {
|
|
5620
|
+
var CalCellB = styled(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) {
|
|
5621
5621
|
var thisMonth = _ref.thisMonth;
|
|
5622
5622
|
return !thisMonth && css(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n color: var(--grey-a8);\n "])));
|
|
5623
5623
|
}, function (_ref2) {
|
|
@@ -5625,7 +5625,7 @@ var CalCellB = styled(CalCell)(_templateObject16$1 || (_templateObject16$1 = _ta
|
|
|
5625
5625
|
return isToday && css(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--primary-a7);\n "])));
|
|
5626
5626
|
}, function (_ref3) {
|
|
5627
5627
|
var state = _ref3.state;
|
|
5628
|
-
return state !== 'single' && state !== 'start' && state !== 'end' && css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n &:hover {\n background: var(--primary-a6);\n color: var(--white-1);\n }\n "])));
|
|
5628
|
+
return state !== 'single' && state !== 'start' && state !== 'end' && css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n &:hover:enabled {\n background: var(--primary-a6);\n color: var(--white-1);\n }\n "])));
|
|
5629
5629
|
}, function (_ref4) {
|
|
5630
5630
|
var state = _ref4.state;
|
|
5631
5631
|
return (state === 'single' || state === 'start' || state === 'end') && css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n background: var(--primary-9);\n color: var(--white-1);\n "])));
|
|
@@ -5641,6 +5641,12 @@ var CalCellB = styled(CalCell)(_templateObject16$1 || (_templateObject16$1 = _ta
|
|
|
5641
5641
|
}, function (_ref8) {
|
|
5642
5642
|
var state = _ref8.state;
|
|
5643
5643
|
return state === 'inside' && 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 "])));
|
|
5644
|
+
}, function (_ref9) {
|
|
5645
|
+
var state = _ref9.state;
|
|
5646
|
+
return (state === 'single' || state === 'start' || state === 'end') && css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n color: var(--white-1);\n background: var(--red-a9);\n "])));
|
|
5647
|
+
}, function (_ref10) {
|
|
5648
|
+
var state = _ref10.state;
|
|
5649
|
+
return state === 'inside' && 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 "])));
|
|
5644
5650
|
});
|
|
5645
5651
|
var enDayGuide = ["S", "M", "T", "W", "T", "F", "S"];
|
|
5646
5652
|
var jpDayGuide = ['日', '月', '火', '水', '木', '金', '土'];
|
|
@@ -5656,26 +5662,27 @@ var isDateInterval = function isDateInterval(value) {
|
|
|
5656
5662
|
}
|
|
5657
5663
|
return value.start instanceof Date && value.end instanceof Date;
|
|
5658
5664
|
};
|
|
5659
|
-
var DatePicker = function DatePicker(
|
|
5660
|
-
var
|
|
5661
|
-
dateMode =
|
|
5662
|
-
|
|
5663
|
-
timeMode =
|
|
5664
|
-
|
|
5665
|
-
dateTimeTextUpper =
|
|
5666
|
-
|
|
5667
|
-
dateTimeTextLower =
|
|
5668
|
-
|
|
5669
|
-
timeZoneTitle =
|
|
5670
|
-
|
|
5671
|
-
timeZoneValueTitle =
|
|
5672
|
-
|
|
5673
|
-
hasEmptyValue =
|
|
5674
|
-
|
|
5675
|
-
updateCallback =
|
|
5676
|
-
initialValue =
|
|
5677
|
-
|
|
5678
|
-
lang =
|
|
5665
|
+
var DatePicker = function DatePicker(_ref11) {
|
|
5666
|
+
var _ref11$dateMode = _ref11.dateMode,
|
|
5667
|
+
dateMode = _ref11$dateMode === void 0 ? 'interval' : _ref11$dateMode,
|
|
5668
|
+
_ref11$timeMode = _ref11.timeMode,
|
|
5669
|
+
timeMode = _ref11$timeMode === void 0 ? 'interval' : _ref11$timeMode,
|
|
5670
|
+
_ref11$dateTimeTextUp = _ref11.dateTimeTextUpper,
|
|
5671
|
+
dateTimeTextUpper = _ref11$dateTimeTextUp === void 0 ? 'From' : _ref11$dateTimeTextUp,
|
|
5672
|
+
_ref11$dateTimeTextLo = _ref11.dateTimeTextLower,
|
|
5673
|
+
dateTimeTextLower = _ref11$dateTimeTextLo === void 0 ? 'To' : _ref11$dateTimeTextLo,
|
|
5674
|
+
_ref11$timeZoneTitle = _ref11.timeZoneTitle,
|
|
5675
|
+
timeZoneTitle = _ref11$timeZoneTitle === void 0 ? 'Timezone' : _ref11$timeZoneTitle,
|
|
5676
|
+
_ref11$timeZoneValueT = _ref11.timeZoneValueTitle,
|
|
5677
|
+
timeZoneValueTitle = _ref11$timeZoneValueT === void 0 ? 'JST' : _ref11$timeZoneValueT,
|
|
5678
|
+
_ref11$hasEmptyValue = _ref11.hasEmptyValue,
|
|
5679
|
+
hasEmptyValue = _ref11$hasEmptyValue === void 0 ? false : _ref11$hasEmptyValue,
|
|
5680
|
+
_ref11$updateCallback = _ref11.updateCallback,
|
|
5681
|
+
updateCallback = _ref11$updateCallback === void 0 ? function () {} : _ref11$updateCallback,
|
|
5682
|
+
initialValue = _ref11.initialValue,
|
|
5683
|
+
availableRange = _ref11.availableRange,
|
|
5684
|
+
_ref11$lang = _ref11.lang,
|
|
5685
|
+
lang = _ref11$lang === void 0 ? 'en' : _ref11$lang;
|
|
5679
5686
|
var _useState = useState(getInitialValue(hasEmptyValue, initialValue)),
|
|
5680
5687
|
selectedRange = _useState[0],
|
|
5681
5688
|
setSelectedRange = _useState[1];
|
|
@@ -5741,9 +5748,9 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5741
5748
|
}
|
|
5742
5749
|
}, [dateMode, selectedRange, targetedDate]);
|
|
5743
5750
|
useEffect(function () {
|
|
5744
|
-
var
|
|
5745
|
-
start =
|
|
5746
|
-
end =
|
|
5751
|
+
var _ref12 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5752
|
+
start = _ref12.start,
|
|
5753
|
+
end = _ref12.end;
|
|
5747
5754
|
if (timeMode === 'interval' && isAfter(add(start, {
|
|
5748
5755
|
minutes: 1
|
|
5749
5756
|
}), end)) {
|
|
@@ -5757,16 +5764,16 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5757
5764
|
}
|
|
5758
5765
|
}, [selectedRange, timeMode]);
|
|
5759
5766
|
var updateStartDate = useCallback(function (start) {
|
|
5760
|
-
var
|
|
5761
|
-
end =
|
|
5767
|
+
var _ref13 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5768
|
+
end = _ref13.end;
|
|
5762
5769
|
setSelectedRange({
|
|
5763
5770
|
start: start,
|
|
5764
5771
|
end: end
|
|
5765
5772
|
});
|
|
5766
5773
|
}, [selectedRange]);
|
|
5767
5774
|
var updateEndDate = useCallback(function (end) {
|
|
5768
|
-
var
|
|
5769
|
-
start =
|
|
5775
|
+
var _ref14 = selectedRange ? selectedRange : TODAY_INTERVAL,
|
|
5776
|
+
start = _ref14.start;
|
|
5770
5777
|
setSelectedRange({
|
|
5771
5778
|
start: start,
|
|
5772
5779
|
end: end
|
|
@@ -5791,6 +5798,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5791
5798
|
setDateCallback: updateEndDate
|
|
5792
5799
|
})), 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, {
|
|
5793
5800
|
type: 'button',
|
|
5801
|
+
disabled: isPrevMonthOutOfRange(focusedMonth, availableRange),
|
|
5794
5802
|
onClick: function onClick() {
|
|
5795
5803
|
return setFocusedMonth(addMonths(focusedMonth, -1));
|
|
5796
5804
|
}
|
|
@@ -5804,6 +5812,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5804
5812
|
locale: lang === 'ja' ? ja : enUS
|
|
5805
5813
|
})), React__default.createElement(PaginateMonth, {
|
|
5806
5814
|
type: 'button',
|
|
5815
|
+
disabled: isNextMonthOutOfRange(focusedMonth, availableRange),
|
|
5807
5816
|
onClick: function onClick() {
|
|
5808
5817
|
return setFocusedMonth(addMonths(focusedMonth, 1));
|
|
5809
5818
|
}
|
|
@@ -5827,6 +5836,7 @@ var DatePicker = function DatePicker(_ref9) {
|
|
|
5827
5836
|
}, days.map(function (day, index) {
|
|
5828
5837
|
return React__default.createElement(CalCellB, {
|
|
5829
5838
|
key: index,
|
|
5839
|
+
disabled: isDayOutOfRange(day, availableRange),
|
|
5830
5840
|
onClick: function onClick() {
|
|
5831
5841
|
return onCellClick(day);
|
|
5832
5842
|
},
|
|
@@ -5878,6 +5888,48 @@ var getInitialValue = function getInitialValue(hasEmptyValue, initialValue) {
|
|
|
5878
5888
|
var validInitial = initialValue ? initialValue : initializeInterval(startOfDay(new Date()));
|
|
5879
5889
|
return validInitial instanceof Date ? initializeInterval(validInitial) : validInitial;
|
|
5880
5890
|
};
|
|
5891
|
+
var isPrevMonthOutOfRange = function isPrevMonthOutOfRange(focusedMonth, availableRange) {
|
|
5892
|
+
if (!(availableRange !== null && availableRange !== void 0 && availableRange.start)) return false;
|
|
5893
|
+
try {
|
|
5894
|
+
var startYear = availableRange.start.getFullYear();
|
|
5895
|
+
var startMonth = availableRange.start.getMonth();
|
|
5896
|
+
if (focusedMonth.getFullYear() < startYear || focusedMonth.getFullYear() === startYear && focusedMonth.getMonth() <= startMonth) {
|
|
5897
|
+
return true;
|
|
5898
|
+
}
|
|
5899
|
+
} catch (error) {
|
|
5900
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5901
|
+
}
|
|
5902
|
+
return false;
|
|
5903
|
+
};
|
|
5904
|
+
var isNextMonthOutOfRange = function isNextMonthOutOfRange(focusedMonth, availableRange) {
|
|
5905
|
+
if (!(availableRange !== null && availableRange !== void 0 && availableRange.end)) return false;
|
|
5906
|
+
try {
|
|
5907
|
+
var endYear = availableRange.end.getFullYear();
|
|
5908
|
+
var endMonth = availableRange.end.getMonth();
|
|
5909
|
+
if (focusedMonth.getFullYear() > endYear || focusedMonth.getFullYear() === endYear && focusedMonth.getMonth() >= endMonth) {
|
|
5910
|
+
return true;
|
|
5911
|
+
}
|
|
5912
|
+
} catch (error) {
|
|
5913
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5914
|
+
}
|
|
5915
|
+
return false;
|
|
5916
|
+
};
|
|
5917
|
+
var isDayOutOfRange = function isDayOutOfRange(currentDay, availableRange) {
|
|
5918
|
+
if (!availableRange) return false;
|
|
5919
|
+
var start = availableRange.start,
|
|
5920
|
+
end = availableRange.end;
|
|
5921
|
+
try {
|
|
5922
|
+
if (start && currentDay < start && !isSameDay(currentDay, start)) {
|
|
5923
|
+
return true;
|
|
5924
|
+
}
|
|
5925
|
+
if (end && currentDay > end && !isSameDay(currentDay, end)) {
|
|
5926
|
+
return true;
|
|
5927
|
+
}
|
|
5928
|
+
} catch (error) {
|
|
5929
|
+
console.warn('Invalid available range:', availableRange, error);
|
|
5930
|
+
}
|
|
5931
|
+
return false;
|
|
5932
|
+
};
|
|
5881
5933
|
|
|
5882
5934
|
var _excluded$n = ["children"];
|
|
5883
5935
|
var _templateObject$H, _templateObject2$A;
|
|
@@ -12842,7 +12894,7 @@ var useMenu = function useMenu(defaultMenuOpen, canAlwaysPin) {
|
|
|
12842
12894
|
};
|
|
12843
12895
|
};
|
|
12844
12896
|
|
|
12845
|
-
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
|
|
12897
|
+
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;
|
|
12846
12898
|
var Submenu = styled.ul(_templateObject$1z || (_templateObject$1z = _taggedTemplateLiteralLoose(["\n display: block;\n position: relative;\n margin-left: 40px;\n padding: 0;\n\n"])));
|
|
12847
12899
|
var SubmenuHeader = styled.div(_templateObject2$1k || (_templateObject2$1k = _taggedTemplateLiteralLoose(["\n display: block;\n height: 40px;\n margin-left: 40px;\n"])));
|
|
12848
12900
|
var SubmenuContainerInner = styled.div(_templateObject3$1c || (_templateObject3$1c = _taggedTemplateLiteralLoose(["\n overflow: hidden;\n"])));
|
|
@@ -12855,22 +12907,22 @@ var SubmenuItem = styled.li(_templateObject8$z || (_templateObject8$z = _taggedT
|
|
|
12855
12907
|
return css(_templateObject9$q || (_templateObject9$q = _taggedTemplateLiteralLoose(["\n \n &:hover {\n color: var(--grey-12);\n }\n\n ", "\n\n "])), isActive && css(_templateObject10$l || (_templateObject10$l = _taggedTemplateLiteralLoose(["\n &, &:hover {\n color: var(--grey-11);\n font-weight: 600;\n }\n "]))));
|
|
12856
12908
|
});
|
|
12857
12909
|
var SubmenuContainer = styled.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"])));
|
|
12858
|
-
var ContextContainer = styled.div(_templateObject12$d || (_templateObject12$d = _taggedTemplateLiteralLoose(["\n min-height:
|
|
12859
|
-
var
|
|
12910
|
+
var ContextContainer = styled.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) {
|
|
12911
|
+
var mobileMenu = _ref2.mobileMenu;
|
|
12912
|
+
return mobileMenu ? '30px' : '70px';
|
|
12913
|
+
}, SubmenuContainer, function (_ref3) {
|
|
12914
|
+
var open = _ref3.open;
|
|
12860
12915
|
return open && 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);
|
|
12861
|
-
}, function (_ref3) {
|
|
12862
|
-
var loading = _ref3.loading;
|
|
12863
|
-
return loading === 'true' && css(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n ", "{\n max-height: none !important;\n opacity: 1;\n }\n "])), SubmenuContainer);
|
|
12864
12916
|
});
|
|
12865
12917
|
var NavigationItem = function NavigationItem(_ref4) {
|
|
12866
12918
|
var item = _ref4.item,
|
|
12867
12919
|
menuOpen = _ref4.menuOpen,
|
|
12868
12920
|
submenuOpen = _ref4.submenuOpen,
|
|
12869
12921
|
contextKey = _ref4.contextKey,
|
|
12870
|
-
loading = _ref4.loading,
|
|
12871
12922
|
topLevelPath = _ref4.topLevelPath,
|
|
12872
|
-
|
|
12873
|
-
|
|
12923
|
+
_ref4$mobileMenu = _ref4.mobileMenu,
|
|
12924
|
+
mobileMenu = _ref4$mobileMenu === void 0 ? false : _ref4$mobileMenu,
|
|
12925
|
+
onClickCallback = _ref4.onClickCallback;
|
|
12874
12926
|
var icon = item.icon,
|
|
12875
12927
|
title = item.title,
|
|
12876
12928
|
href = item.href,
|
|
@@ -12880,15 +12932,11 @@ var NavigationItem = function NavigationItem(_ref4) {
|
|
|
12880
12932
|
var refSubmenu = useRef(null);
|
|
12881
12933
|
var submenus = generateSubmenus(submenu, onClickCallback) || [];
|
|
12882
12934
|
var hasSubmenu = submenus.length > 0;
|
|
12883
|
-
|
|
12884
|
-
|
|
12885
|
-
|
|
12886
|
-
|
|
12887
|
-
},
|
|
12888
|
-
return React__default.createElement(ContextContainer, {
|
|
12889
|
-
open: submenuOpen,
|
|
12890
|
-
loading: loading ? 'true' : 'false'
|
|
12891
|
-
}, React__default.createElement(ContextItem, Object.assign({}, {
|
|
12935
|
+
return React__default.createElement(ContextContainer, Object.assign({
|
|
12936
|
+
open: submenuOpen
|
|
12937
|
+
}, {
|
|
12938
|
+
mobileMenu: mobileMenu
|
|
12939
|
+
}), React__default.createElement(ContextItem, Object.assign({}, {
|
|
12892
12940
|
title: title,
|
|
12893
12941
|
href: href,
|
|
12894
12942
|
isActive: isActive,
|
|
@@ -12955,7 +13003,7 @@ var generateSubmenus = function generateSubmenus(submenu, onClickCallback) {
|
|
|
12955
13003
|
return output;
|
|
12956
13004
|
};
|
|
12957
13005
|
|
|
12958
|
-
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$
|
|
13006
|
+
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;
|
|
12959
13007
|
var Logo = styled(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"])));
|
|
12960
13008
|
var LogoMark = styled.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"])));
|
|
12961
13009
|
var LogoType = styled.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"])));
|
|
@@ -12973,7 +13021,7 @@ var Container$10 = styled.div(_templateObject11$g || (_templateObject11$g = _tag
|
|
|
12973
13021
|
desktopSize = _ref2.desktopSize;
|
|
12974
13022
|
return 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' ? "" : css(_templateObject13$c || (_templateObject13$c = _taggedTemplateLiteralLoose(["\n transition: width var(--speed-normal) var(--easing-primary-in);\n "]))), LogoType, open ? 1 : 0);
|
|
12975
13023
|
});
|
|
12976
|
-
var ContainerInner = styled.div(_templateObject14$
|
|
13024
|
+
var ContainerInner = styled.div(_templateObject14$9 || (_templateObject14$9 = _taggedTemplateLiteralLoose(["\n width: var(--global-menu-width-open);\n display: flex;\n flex-direction: column;\n height: 100%;\n"])));
|
|
12977
13025
|
var MainMenu = function MainMenu(_ref3) {
|
|
12978
13026
|
var content = _ref3.content,
|
|
12979
13027
|
_ref3$home = _ref3.home,
|
|
@@ -12999,11 +13047,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
12999
13047
|
var _useState = useState(0),
|
|
13000
13048
|
focusedContext = _useState[0],
|
|
13001
13049
|
setFocusedContext = _useState[1];
|
|
13002
|
-
var _useState2 = useState(true),
|
|
13003
|
-
loading = _useState2[0],
|
|
13004
|
-
setLoading = _useState2[1];
|
|
13005
13050
|
var location = useLocation();
|
|
13006
|
-
var checkedInItems = 0;
|
|
13007
13051
|
var autoMenuOpen = useCallback(function (e) {
|
|
13008
13052
|
if (e.pointerType === 'touch') {
|
|
13009
13053
|
return;
|
|
@@ -13028,12 +13072,6 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13028
13072
|
}
|
|
13029
13073
|
setFocusedContext(focusedContext !== contextKey ? contextKey : -1);
|
|
13030
13074
|
}, [setFocusedContext, focusedContext]);
|
|
13031
|
-
var readyCallback = useCallback(function () {
|
|
13032
|
-
checkedInItems++;
|
|
13033
|
-
if (checkedInItems === content.items.length) {
|
|
13034
|
-
setLoading(false);
|
|
13035
|
-
}
|
|
13036
|
-
}, [checkedInItems, content]);
|
|
13037
13075
|
return React__default.createElement(PushContainer, {
|
|
13038
13076
|
isPinned: menuState.isMenuPinned
|
|
13039
13077
|
}, ReactDom.createPortal(React__default.createElement(Container$10, {
|
|
@@ -13062,9 +13100,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13062
13100
|
onClickCallback: setFocusedContextCb
|
|
13063
13101
|
}, {
|
|
13064
13102
|
item: item,
|
|
13065
|
-
|
|
13066
|
-
focusedContext: focusedContext,
|
|
13067
|
-
readyCallback: readyCallback
|
|
13103
|
+
focusedContext: focusedContext
|
|
13068
13104
|
}));
|
|
13069
13105
|
})), React__default.createElement(MenuFooter, null, supportUrl && React__default.createElement(FooterItemContainer, null, React__default.createElement(ContextItem, {
|
|
13070
13106
|
compact: true,
|
|
@@ -13177,7 +13213,7 @@ var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
|
13177
13213
|
}), React__default.createElement(ColumnContainer, null, React__default.createElement(Title$8, null, title), React__default.createElement(SubTitle$1, null, subTitle)));
|
|
13178
13214
|
};
|
|
13179
13215
|
|
|
13180
|
-
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$
|
|
13216
|
+
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;
|
|
13181
13217
|
var DrawerTop = styled.div(_templateObject$1D || (_templateObject$1D = _taggedTemplateLiteralLoose([""])));
|
|
13182
13218
|
var DrawerBottom = styled.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);
|
|
13183
13219
|
var DrawerHeader = styled.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"])));
|
|
@@ -13196,7 +13232,7 @@ var FooterMeta = styled.div(_templateObject12$f || (_templateObject12$f = _tagge
|
|
|
13196
13232
|
return icon !== '' ? '31px;' : '21px;';
|
|
13197
13233
|
});
|
|
13198
13234
|
var NavigationContainer$1 = styled.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"])));
|
|
13199
|
-
var FooterText = styled.div(_templateObject14$
|
|
13235
|
+
var FooterText = styled.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) {
|
|
13200
13236
|
var icon = _ref3.icon;
|
|
13201
13237
|
return icon !== '' ? '136px;' : '164px;';
|
|
13202
13238
|
});
|
|
@@ -13360,28 +13396,114 @@ var NotificationsHistory = function NotificationsHistory(_ref) {
|
|
|
13360
13396
|
return React__default.createElement(Container$14, null, unread && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, readNotificationsText), renderNotifications(unread, 'unread')), read && React__default.createElement(Fragment, null, React__default.createElement(StatusContainer, null, unreadNotificationsText), renderNotifications(read, 'read')));
|
|
13361
13397
|
};
|
|
13362
13398
|
|
|
13363
|
-
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;
|
|
13364
|
-
var
|
|
13365
|
-
var
|
|
13366
|
-
var
|
|
13367
|
-
|
|
13368
|
-
|
|
13369
|
-
var
|
|
13399
|
+
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;
|
|
13400
|
+
var CoreStyle = 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"])));
|
|
13401
|
+
var ContainerStatic = styled.div(_templateObject2$1r || (_templateObject2$1r = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n"])), CoreStyle, function (_ref) {
|
|
13402
|
+
var themeColor = _ref.themeColor;
|
|
13403
|
+
return themeColor ? css(_templateObject3$1j || (_templateObject3$1j = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject4$1b || (_templateObject4$1b = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13404
|
+
});
|
|
13405
|
+
var DefaultText = styled.span(_templateObject5$14 || (_templateObject5$14 = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
13406
|
+
var LinkText = styled.span(_templateObject6$R || (_templateObject6$R = _taggedTemplateLiteralLoose([""])));
|
|
13407
|
+
var ContainerLinked = styled.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) {
|
|
13408
|
+
var themeColor = _ref2.themeColor;
|
|
13409
|
+
return themeColor ? css(_templateObject8$E || (_templateObject8$E = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--", "-9);\n color: var(--", "-11);\n "])), themeColor, themeColor) : css(_templateObject9$u || (_templateObject9$u = _taggedTemplateLiteralLoose(["\n background-color: transparent;\n border: 2px solid var(--info-9);\n color: var(--info-11);\n "])));
|
|
13410
|
+
}, function (_ref3) {
|
|
13411
|
+
var themeColor = _ref3.themeColor;
|
|
13412
|
+
return themeColor ? 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) : 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 "])));
|
|
13413
|
+
});
|
|
13414
|
+
var Container$15 = styled.div(_templateObject12$g || (_templateObject12$g = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref4) {
|
|
13415
|
+
var ready = _ref4.ready,
|
|
13416
|
+
minWidth = _ref4.minWidth;
|
|
13417
|
+
return 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;");
|
|
13418
|
+
});
|
|
13419
|
+
var TopBarBadge = function TopBarBadge(_ref5) {
|
|
13420
|
+
var text = _ref5.text,
|
|
13421
|
+
color = _ref5.color,
|
|
13422
|
+
linkHref = _ref5.linkHref,
|
|
13423
|
+
linkTo = _ref5.linkTo,
|
|
13424
|
+
linkText = _ref5.linkText;
|
|
13425
|
+
var defaultTextRef = useRef();
|
|
13426
|
+
var linkTextRef = useRef();
|
|
13427
|
+
var _useState = useState(false),
|
|
13428
|
+
ready = _useState[0],
|
|
13429
|
+
setReady = _useState[1];
|
|
13430
|
+
var _useState2 = useState(false),
|
|
13431
|
+
hover = _useState2[0],
|
|
13432
|
+
setHover = _useState2[1];
|
|
13433
|
+
var _useState3 = useState(0),
|
|
13434
|
+
minWidth = _useState3[0],
|
|
13435
|
+
setMinWidth = _useState3[1];
|
|
13436
|
+
useEffect(function () {
|
|
13437
|
+
setReady(false);
|
|
13438
|
+
setTimeout(function () {
|
|
13439
|
+
var _linkTextRef$current;
|
|
13440
|
+
var defaultWidth = defaultTextRef.current.getBoundingClientRect().width;
|
|
13441
|
+
var linkWidth = ((_linkTextRef$current = linkTextRef.current) === null || _linkTextRef$current === void 0 ? void 0 : _linkTextRef$current.getBoundingClientRect().width) || 0;
|
|
13442
|
+
var largestWidth = defaultWidth >= linkWidth ? defaultWidth : linkWidth;
|
|
13443
|
+
setMinWidth(Math.ceil(largestWidth));
|
|
13444
|
+
setReady(true);
|
|
13445
|
+
}, 100);
|
|
13446
|
+
}, [defaultTextRef, linkTextRef, text, linkText, setMinWidth, setReady]);
|
|
13447
|
+
var defaultTextElement = React__default.createElement(DefaultText, {
|
|
13448
|
+
ref: defaultTextRef
|
|
13449
|
+
}, text);
|
|
13450
|
+
var linkTextElement = linkTo || linkHref ? React__default.createElement(LinkText, {
|
|
13451
|
+
ref: linkTextRef
|
|
13452
|
+
}, linkText || text) : null;
|
|
13453
|
+
var badgeComponent;
|
|
13454
|
+
if (linkTo) {
|
|
13455
|
+
badgeComponent = React__default.createElement(ContainerLinked, {
|
|
13456
|
+
themeColor: color
|
|
13457
|
+
}, React__default.createElement(Link, {
|
|
13458
|
+
to: linkTo
|
|
13459
|
+
}, !ready ? React__default.createElement(Fragment, null, defaultTextElement, linkTextElement) : React__default.createElement(Fragment, null, !hover ? defaultTextElement : linkTextElement)));
|
|
13460
|
+
} else if (linkHref) {
|
|
13461
|
+
badgeComponent = React__default.createElement(ContainerLinked, {
|
|
13462
|
+
themeColor: color
|
|
13463
|
+
}, React__default.createElement("a", {
|
|
13464
|
+
href: linkHref
|
|
13465
|
+
}, !ready ? React__default.createElement(Fragment, null, defaultTextElement, linkTextElement) : React__default.createElement(Fragment, null, !hover ? defaultTextElement : linkTextElement)));
|
|
13466
|
+
} else {
|
|
13467
|
+
badgeComponent = React__default.createElement(ContainerStatic, {
|
|
13468
|
+
themeColor: color
|
|
13469
|
+
}, defaultTextElement);
|
|
13470
|
+
}
|
|
13471
|
+
return React__default.createElement(Container$15, Object.assign({}, {
|
|
13472
|
+
ready: ready,
|
|
13473
|
+
minWidth: minWidth
|
|
13474
|
+
}, {
|
|
13475
|
+
onPointerEnter: function onPointerEnter() {
|
|
13476
|
+
return ready && setHover(true);
|
|
13477
|
+
},
|
|
13478
|
+
onPointerLeave: function onPointerLeave() {
|
|
13479
|
+
return ready && setHover(false);
|
|
13480
|
+
}
|
|
13481
|
+
}), badgeComponent);
|
|
13482
|
+
};
|
|
13483
|
+
|
|
13484
|
+
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;
|
|
13485
|
+
var Container$16 = styled.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"])));
|
|
13486
|
+
var RightArea$1 = styled.div(_templateObject2$1s || (_templateObject2$1s = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
|
|
13487
|
+
var SearchBar = styled.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"])));
|
|
13488
|
+
var IconWrapper$4 = styled.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"])));
|
|
13489
|
+
var SearchInput = styled.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);
|
|
13490
|
+
var ButtonArea = styled.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
|
|
13491
|
+
var buttonClickAnimation = 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"])));
|
|
13370
13492
|
var DrawerToggle = styled.button.attrs({
|
|
13371
13493
|
type: 'button'
|
|
13372
|
-
})(
|
|
13494
|
+
})(_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) {
|
|
13373
13495
|
var isActive = _ref.isActive;
|
|
13374
|
-
return isActive && css(
|
|
13496
|
+
return isActive && 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);
|
|
13375
13497
|
});
|
|
13376
|
-
var DrawerPortalWrapper = styled.div(
|
|
13377
|
-
var Drawer = styled.div(
|
|
13498
|
+
var DrawerPortalWrapper = styled.div(_templateObject10$q || (_templateObject10$q = _taggedTemplateLiteralLoose([""])));
|
|
13499
|
+
var Drawer = styled.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) {
|
|
13378
13500
|
var baseWidth = _ref2.baseWidth;
|
|
13379
13501
|
return baseWidth ? baseWidth : "200px";
|
|
13380
13502
|
}, function (_ref3) {
|
|
13381
13503
|
var isOpen = _ref3.isOpen;
|
|
13382
|
-
return isOpen && css(
|
|
13504
|
+
return isOpen && css(_templateObject12$h || (_templateObject12$h = _taggedTemplateLiteralLoose(["\n right: 0;\n opacity: 1;\n visibility: visible;\n "])));
|
|
13383
13505
|
});
|
|
13384
|
-
var NotificationsContainer = styled.div(
|
|
13506
|
+
var NotificationsContainer = styled.div(_templateObject13$f || (_templateObject13$f = _taggedTemplateLiteralLoose(["\n overflow-y: scroll;\n margin-right: -17px;\n"])));
|
|
13385
13507
|
var TopBar = function TopBar(_ref4) {
|
|
13386
13508
|
var _ref4$hasNotification = _ref4.hasNotifications,
|
|
13387
13509
|
hasNotifications = _ref4$hasNotification === void 0 ? false : _ref4$hasNotification,
|
|
@@ -13432,7 +13554,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13432
13554
|
hasUserDrawerMeta = _ref4.hasUserDrawerMeta,
|
|
13433
13555
|
copySuccessMessage = _ref4.copySuccessMessage,
|
|
13434
13556
|
includeCopyTitle = _ref4.includeCopyTitle,
|
|
13435
|
-
hasUserDrawerFooter = _ref4.hasUserDrawerFooter
|
|
13557
|
+
hasUserDrawerFooter = _ref4.hasUserDrawerFooter,
|
|
13558
|
+
badge = _ref4.badge;
|
|
13436
13559
|
var _useState = useState(null),
|
|
13437
13560
|
openDrawer = _useState[0],
|
|
13438
13561
|
setOpenDrawer = _useState[1];
|
|
@@ -13444,13 +13567,13 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13444
13567
|
return drawerKey;
|
|
13445
13568
|
});
|
|
13446
13569
|
};
|
|
13447
|
-
return React__default.createElement(Container$
|
|
13570
|
+
return React__default.createElement(Container$16, null, hasSearch ? React__default.createElement(SearchBar, null, React__default.createElement(IconWrapper$4, null, React__default.createElement(Icon, {
|
|
13448
13571
|
icon: 'Search',
|
|
13449
13572
|
size: 16,
|
|
13450
13573
|
color: 'grey-6'
|
|
13451
13574
|
})), React__default.createElement(SearchInput, {
|
|
13452
13575
|
placeholder: searchPlaceholder
|
|
13453
|
-
})) : React__default.createElement("div", null), React__default.createElement(ButtonArea, null, customDrawer && React__default.createElement(DrawerToggle, {
|
|
13576
|
+
})) : 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, {
|
|
13454
13577
|
isActive: openDrawer === 'custom',
|
|
13455
13578
|
onClick: function onClick() {
|
|
13456
13579
|
return toggleDrawers('custom');
|
|
@@ -13473,7 +13596,7 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13473
13596
|
icon: 'UserProfile',
|
|
13474
13597
|
size: 20,
|
|
13475
13598
|
color: 'dimmed'
|
|
13476
|
-
}))), ReactDom.createPortal(React__default.createElement(DrawerPortalWrapper, null, React__default.createElement(Drawer, {
|
|
13599
|
+
})))), ReactDom.createPortal(React__default.createElement(DrawerPortalWrapper, null, React__default.createElement(Drawer, {
|
|
13477
13600
|
isOpen: openDrawer === 'user'
|
|
13478
13601
|
}, React__default.createElement(UserMenu, Object.assign({}, {
|
|
13479
13602
|
hasLanguage: hasLanguage,
|
|
@@ -13510,8 +13633,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13510
13633
|
}, customDrawer.customComponent)), document.body));
|
|
13511
13634
|
};
|
|
13512
13635
|
|
|
13513
|
-
var _templateObject$
|
|
13514
|
-
var TabListWrapper = styled.div(_templateObject$
|
|
13636
|
+
var _templateObject$1I;
|
|
13637
|
+
var TabListWrapper = styled.div(_templateObject$1I || (_templateObject$1I = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n"])));
|
|
13515
13638
|
var TabList = function TabList(_ref) {
|
|
13516
13639
|
var children = _ref.children,
|
|
13517
13640
|
defaultTabId = _ref.defaultTabId;
|
|
@@ -13524,11 +13647,11 @@ var TabList = function TabList(_ref) {
|
|
|
13524
13647
|
};
|
|
13525
13648
|
|
|
13526
13649
|
var _excluded$H = ["children", "tabFor", "onClick"];
|
|
13527
|
-
var _templateObject$
|
|
13528
|
-
var TabComponent = styled.div(_templateObject$
|
|
13529
|
-
var TabLabel = styled.label(_templateObject2$
|
|
13650
|
+
var _templateObject$1J, _templateObject2$1t, _templateObject3$1l;
|
|
13651
|
+
var TabComponent = styled.div(_templateObject$1J || (_templateObject$1J = _taggedTemplateLiteralLoose(["\n margin-right: 39px;\n display: flex;\n align-items: center;\n line-height: 20px;\n"])));
|
|
13652
|
+
var TabLabel = styled.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) {
|
|
13530
13653
|
var theme = _ref.theme;
|
|
13531
|
-
return css(_templateObject3$
|
|
13654
|
+
return css(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n "])), theme.fontFamily.ui);
|
|
13532
13655
|
}, function (_ref2) {
|
|
13533
13656
|
var active = _ref2.active;
|
|
13534
13657
|
return active ? '600' : '500';
|
|
@@ -13559,27 +13682,27 @@ var Tab = function Tab(_ref5) {
|
|
|
13559
13682
|
};
|
|
13560
13683
|
|
|
13561
13684
|
var _excluded$I = ["children", "tabId"];
|
|
13562
|
-
var _templateObject$
|
|
13563
|
-
var Container$
|
|
13685
|
+
var _templateObject$1K;
|
|
13686
|
+
var Container$17 = styled.div(_templateObject$1K || (_templateObject$1K = _taggedTemplateLiteralLoose(["\n"])));
|
|
13564
13687
|
var TabContent = function TabContent(_ref) {
|
|
13565
13688
|
var children = _ref.children,
|
|
13566
13689
|
tabId = _ref.tabId,
|
|
13567
13690
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$I);
|
|
13568
13691
|
var _useContext = useContext(TabContext),
|
|
13569
13692
|
selected = _useContext.selected;
|
|
13570
|
-
return selected === tabId ? React__default.createElement(Container$
|
|
13693
|
+
return selected === tabId ? React__default.createElement(Container$17, Object.assign({}, props), children) : null;
|
|
13571
13694
|
};
|
|
13572
13695
|
|
|
13573
13696
|
var _excluded$J = ["tabFor", "icon", "closeId", "counter", "status"];
|
|
13574
|
-
var _templateObject$
|
|
13575
|
-
var Container$
|
|
13576
|
-
var LinkTab = styled.div(_templateObject2$
|
|
13697
|
+
var _templateObject$1L, _templateObject2$1u, _templateObject3$1m, _templateObject4$1d;
|
|
13698
|
+
var Container$18 = styled.button(_templateObject$1L || (_templateObject$1L = _taggedTemplateLiteralLoose(["\n ", "\n flex-basis: auto;\n flex-grow: 1;\n"])), resetButtonStyles);
|
|
13699
|
+
var LinkTab = styled.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) {
|
|
13577
13700
|
var theme = _ref.theme;
|
|
13578
|
-
return css(_templateObject3$
|
|
13701
|
+
return 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);
|
|
13579
13702
|
}, function (_ref2) {
|
|
13580
13703
|
var isActive = _ref2.isActive,
|
|
13581
13704
|
theme = _ref2.theme;
|
|
13582
|
-
return isActive && css(_templateObject4$
|
|
13705
|
+
return isActive && 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);
|
|
13583
13706
|
});
|
|
13584
13707
|
var MobileTab = function MobileTab(_ref3) {
|
|
13585
13708
|
var tabFor = _ref3.tabFor,
|
|
@@ -13595,7 +13718,7 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
13595
13718
|
var newValue = selected === tabId ? closeId : tabId;
|
|
13596
13719
|
setSelected(newValue);
|
|
13597
13720
|
}, [closeId, selected, setSelected]);
|
|
13598
|
-
return React__default.createElement(Container$
|
|
13721
|
+
return React__default.createElement(Container$18, Object.assign({}, props, {
|
|
13599
13722
|
onClick: function onClick() {
|
|
13600
13723
|
return onChangeTab(tabFor);
|
|
13601
13724
|
}
|
|
@@ -13609,23 +13732,23 @@ var MobileTab = function MobileTab(_ref3) {
|
|
|
13609
13732
|
};
|
|
13610
13733
|
|
|
13611
13734
|
var _excluded$K = ["icon", "title", "subtitle", "tabFor"];
|
|
13612
|
-
var _templateObject$
|
|
13613
|
-
var Container$
|
|
13735
|
+
var _templateObject$1M, _templateObject2$1v, _templateObject3$1n, _templateObject4$1e, _templateObject5$16, _templateObject6$T;
|
|
13736
|
+
var Container$19 = styled.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) {
|
|
13614
13737
|
var active = _ref.active;
|
|
13615
|
-
return active ? css(_templateObject2$
|
|
13738
|
+
return active ? css(_templateObject2$1v || (_templateObject2$1v = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid var(--primary-11);\n "]))) : css(_templateObject3$1n || (_templateObject3$1n = _taggedTemplateLiteralLoose(["\n border-bottom: 3px solid transparent;\n "])));
|
|
13616
13739
|
}, IconWrapper);
|
|
13617
|
-
var Title$a = styled.div(_templateObject4$
|
|
13740
|
+
var Title$a = styled.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) {
|
|
13618
13741
|
var theme = _ref2.theme;
|
|
13619
13742
|
return theme.fontFamily.ui;
|
|
13620
13743
|
}, function (_ref3) {
|
|
13621
13744
|
var active = _ref3.active;
|
|
13622
13745
|
return active ? 'var(--primary-11)' : 'var(--grey-11)';
|
|
13623
13746
|
});
|
|
13624
|
-
var SubTitle$2 = styled.div(_templateObject5$
|
|
13747
|
+
var SubTitle$2 = styled.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) {
|
|
13625
13748
|
var theme = _ref4.theme;
|
|
13626
13749
|
return theme.fontFamily.data;
|
|
13627
13750
|
});
|
|
13628
|
-
var TextGroup$1 = styled.div(_templateObject6$
|
|
13751
|
+
var TextGroup$1 = styled.div(_templateObject6$T || (_templateObject6$T = _taggedTemplateLiteralLoose(["\n margin-left: 12px;\n margin-right: 20px;\n"])));
|
|
13629
13752
|
var TabWithIcon = function TabWithIcon(_ref5) {
|
|
13630
13753
|
var icon = _ref5.icon,
|
|
13631
13754
|
title = _ref5.title,
|
|
@@ -13639,7 +13762,7 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
13639
13762
|
setSelected(tabId);
|
|
13640
13763
|
}, [setSelected]);
|
|
13641
13764
|
var active = selected === tabFor;
|
|
13642
|
-
return React__default.createElement(Container$
|
|
13765
|
+
return React__default.createElement(Container$19, Object.assign({}, {
|
|
13643
13766
|
active: active
|
|
13644
13767
|
}, props, {
|
|
13645
13768
|
onClick: function onClick() {
|
|
@@ -13656,9 +13779,9 @@ var TabWithIcon = function TabWithIcon(_ref5) {
|
|
|
13656
13779
|
}), title), subtitle && React__default.createElement(SubTitle$2, null, subtitle)));
|
|
13657
13780
|
};
|
|
13658
13781
|
|
|
13659
|
-
var _templateObject$
|
|
13660
|
-
var Container$
|
|
13661
|
-
var TabListWrapper$1 = styled.div(_templateObject2$
|
|
13782
|
+
var _templateObject$1N, _templateObject2$1w;
|
|
13783
|
+
var Container$1a = styled.div(_templateObject$1N || (_templateObject$1N = _taggedTemplateLiteralLoose([""])));
|
|
13784
|
+
var TabListWrapper$1 = styled.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) {
|
|
13662
13785
|
var paddingLeft = _ref.paddingLeft;
|
|
13663
13786
|
return paddingLeft ? paddingLeft : '87px';
|
|
13664
13787
|
});
|
|
@@ -13666,7 +13789,7 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
13666
13789
|
var defaultTabId = _ref2.defaultTabId,
|
|
13667
13790
|
tabList = _ref2.tabList,
|
|
13668
13791
|
paddingLeft = _ref2.paddingLeft;
|
|
13669
|
-
return React__default.createElement(Container$
|
|
13792
|
+
return React__default.createElement(Container$1a, null, React__default.createElement(Tabs, null, React__default.createElement(TabListWrapper$1, Object.assign({}, {
|
|
13670
13793
|
paddingLeft: paddingLeft
|
|
13671
13794
|
}), React__default.createElement(TabList, Object.assign({}, {
|
|
13672
13795
|
defaultTabId: defaultTabId
|
|
@@ -13694,10 +13817,10 @@ var TabsWithIconBar = function TabsWithIconBar(_ref2) {
|
|
|
13694
13817
|
};
|
|
13695
13818
|
|
|
13696
13819
|
var _excluded$L = ["closeId", "closeText"];
|
|
13697
|
-
var _templateObject$
|
|
13698
|
-
var StyledButton$7 = styled.button(_templateObject$
|
|
13699
|
-
var IconContainer$4 = styled.div(_templateObject2$
|
|
13700
|
-
var TextWrapper$1 = styled.div(_templateObject3$
|
|
13820
|
+
var _templateObject$1O, _templateObject2$1x, _templateObject3$1o;
|
|
13821
|
+
var StyledButton$7 = styled.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);
|
|
13822
|
+
var IconContainer$4 = styled.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"])));
|
|
13823
|
+
var TextWrapper$1 = styled.div(_templateObject3$1o || (_templateObject3$1o = _taggedTemplateLiteralLoose(["\n text-transform: uppercase;\n"])));
|
|
13701
13824
|
var CloseButton$1 = function CloseButton(_ref) {
|
|
13702
13825
|
var closeId = _ref.closeId,
|
|
13703
13826
|
_ref$closeText = _ref.closeText,
|
|
@@ -13716,32 +13839,28 @@ var CloseButton$1 = function CloseButton(_ref) {
|
|
|
13716
13839
|
})), React__default.createElement(TextWrapper$1, null, closeText));
|
|
13717
13840
|
};
|
|
13718
13841
|
|
|
13719
|
-
var _templateObject$
|
|
13720
|
-
var Container$
|
|
13721
|
-
var ContentWrapper = styled.div(_templateObject2$
|
|
13842
|
+
var _templateObject$1P, _templateObject2$1y;
|
|
13843
|
+
var Container$1b = styled.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);
|
|
13844
|
+
var ContentWrapper = styled.div(_templateObject2$1y || (_templateObject2$1y = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n"])));
|
|
13722
13845
|
var MobileNavbarContent = function MobileNavbarContent(_ref) {
|
|
13723
13846
|
var closeId = _ref.closeId,
|
|
13724
13847
|
children = _ref.children;
|
|
13725
13848
|
var _useContext = useContext(TabContext),
|
|
13726
13849
|
selected = _useContext.selected;
|
|
13727
|
-
return selected === closeId ? null : React__default.createElement(Container$
|
|
13850
|
+
return selected === closeId ? null : React__default.createElement(Container$1b, null, React__default.createElement(ContentWrapper, null, children));
|
|
13728
13851
|
};
|
|
13729
13852
|
|
|
13730
|
-
var _templateObject$
|
|
13731
|
-
var Container$
|
|
13732
|
-
var ItemWrapper = styled.div(_templateObject2$
|
|
13853
|
+
var _templateObject$1Q, _templateObject2$1z;
|
|
13854
|
+
var Container$1c = styled.div(_templateObject$1Q || (_templateObject$1Q = _taggedTemplateLiteralLoose([""])));
|
|
13855
|
+
var ItemWrapper = styled.div(_templateObject2$1z || (_templateObject2$1z = _taggedTemplateLiteralLoose(["\n padding: 14px 0;\n border-bottom: 1px solid var(--dividing-line);\n"])));
|
|
13733
13856
|
var MobileMenu = function MobileMenu(_ref) {
|
|
13734
13857
|
var content = _ref.content,
|
|
13735
13858
|
supportUrl = _ref.supportUrl,
|
|
13736
13859
|
closeId = _ref.closeId;
|
|
13737
|
-
var _useState = useState(
|
|
13738
|
-
|
|
13739
|
-
|
|
13740
|
-
var _useState2 = useState(0),
|
|
13741
|
-
focusedContext = _useState2[0],
|
|
13742
|
-
setFocusedContext = _useState2[1];
|
|
13860
|
+
var _useState = useState(0),
|
|
13861
|
+
focusedContext = _useState[0],
|
|
13862
|
+
setFocusedContext = _useState[1];
|
|
13743
13863
|
var location = useLocation();
|
|
13744
|
-
var checkedInItems = 0;
|
|
13745
13864
|
var _useContext = useContext(TabContext),
|
|
13746
13865
|
setSelected = _useContext.setSelected;
|
|
13747
13866
|
var setFocusedContextCb = useCallback(function (contextKey) {
|
|
@@ -13753,21 +13872,15 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13753
13872
|
}
|
|
13754
13873
|
setFocusedContext(focusedContext !== contextKey ? contextKey : -1);
|
|
13755
13874
|
}, [closeId, content.items, focusedContext, setSelected]);
|
|
13756
|
-
var readyCallback = useCallback(function () {
|
|
13757
|
-
checkedInItems++;
|
|
13758
|
-
if (checkedInItems === content.items.length) {
|
|
13759
|
-
setLoading(false);
|
|
13760
|
-
}
|
|
13761
|
-
}, [checkedInItems, content.items.length]);
|
|
13762
13875
|
var handleCloseMenu = useCallback(function () {
|
|
13763
13876
|
setSelected(closeId);
|
|
13764
13877
|
}, [closeId, setSelected]);
|
|
13765
|
-
return React__default.createElement(Container$
|
|
13878
|
+
return React__default.createElement(Container$1c, null, content.items.map(function (item, key) {
|
|
13766
13879
|
return React__default.createElement(ItemWrapper, {
|
|
13767
13880
|
key: key,
|
|
13768
13881
|
"data-key": key
|
|
13769
13882
|
}, React__default.createElement(NavigationItem, Object.assign({
|
|
13770
|
-
|
|
13883
|
+
mobileMenu: true,
|
|
13771
13884
|
topLevelPath: getTopLevelPath(location.pathname),
|
|
13772
13885
|
contextKey: key,
|
|
13773
13886
|
menuOpen: true,
|
|
@@ -13775,9 +13888,7 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13775
13888
|
onClickCallback: setFocusedContextCb
|
|
13776
13889
|
}, {
|
|
13777
13890
|
item: item,
|
|
13778
|
-
|
|
13779
|
-
focusedContext: focusedContext,
|
|
13780
|
-
readyCallback: readyCallback
|
|
13891
|
+
focusedContext: focusedContext
|
|
13781
13892
|
})));
|
|
13782
13893
|
}), supportUrl && React__default.createElement(ItemWrapper, null, React__default.createElement(ContextItem, {
|
|
13783
13894
|
compact: true,
|
|
@@ -13790,10 +13901,10 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
13790
13901
|
})));
|
|
13791
13902
|
};
|
|
13792
13903
|
|
|
13793
|
-
var _templateObject$
|
|
13794
|
-
var Logo$1 = styled(Link)(_templateObject$
|
|
13795
|
-
var LogoMark$1 = styled.div(_templateObject2$
|
|
13796
|
-
var SVGObject$1 = styled.object(_templateObject3$
|
|
13904
|
+
var _templateObject$1R, _templateObject2$1A, _templateObject3$1p;
|
|
13905
|
+
var Logo$1 = styled(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);
|
|
13906
|
+
var LogoMark$1 = styled.div(_templateObject2$1A || (_templateObject2$1A = _taggedTemplateLiteralLoose(["\n margin-right: 15px;\n"])));
|
|
13907
|
+
var SVGObject$1 = styled.object(_templateObject3$1p || (_templateObject3$1p = _taggedTemplateLiteralLoose([""])));
|
|
13797
13908
|
var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
13798
13909
|
var _ref$home = _ref.home,
|
|
13799
13910
|
home = _ref$home === void 0 ? "/" : _ref$home,
|
|
@@ -13813,8 +13924,8 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
|
13813
13924
|
};
|
|
13814
13925
|
|
|
13815
13926
|
var _excluded$M = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
|
|
13816
|
-
var _templateObject$
|
|
13817
|
-
var Container$
|
|
13927
|
+
var _templateObject$1S;
|
|
13928
|
+
var Container$1d = styled.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"])));
|
|
13818
13929
|
var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
13819
13930
|
var closeId = _ref.closeId,
|
|
13820
13931
|
hasLanguage = _ref.hasLanguage,
|
|
@@ -13832,7 +13943,7 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
|
13832
13943
|
var handleCloseMenu = useCallback(function () {
|
|
13833
13944
|
setSelected(closeId);
|
|
13834
13945
|
}, [closeId, setSelected]);
|
|
13835
|
-
return React__default.createElement(Container$
|
|
13946
|
+
return React__default.createElement(Container$1d, null, React__default.createElement(UserMenu, Object.assign({}, _extends({
|
|
13836
13947
|
hasLanguage: hasLanguage,
|
|
13837
13948
|
hasLogout: hasLogout,
|
|
13838
13949
|
logoutLink: logoutLink,
|
|
@@ -13848,14 +13959,14 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
|
13848
13959
|
};
|
|
13849
13960
|
|
|
13850
13961
|
var _excluded$N = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
|
|
13851
|
-
var _templateObject$
|
|
13962
|
+
var _templateObject$1T, _templateObject2$1B;
|
|
13852
13963
|
var CLOSE_ID = 'closeMenu';
|
|
13853
13964
|
var NOTI_TAB = 'notifications';
|
|
13854
13965
|
var USER_TAB = 'user';
|
|
13855
13966
|
var MENU_TAB = 'menu';
|
|
13856
13967
|
var CUSTOM_TAB = 'custom';
|
|
13857
|
-
var Container$
|
|
13858
|
-
var HeaderContainer = styled.div(_templateObject2$
|
|
13968
|
+
var Container$1e = styled.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"])));
|
|
13969
|
+
var HeaderContainer = styled.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);
|
|
13859
13970
|
var MobileNavbar = function MobileNavbar(_ref) {
|
|
13860
13971
|
var content = _ref.content,
|
|
13861
13972
|
home = _ref.home,
|
|
@@ -13877,7 +13988,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
|
|
|
13877
13988
|
onLogout = _ref.onLogout,
|
|
13878
13989
|
onLanguageToggle = _ref.onLanguageToggle,
|
|
13879
13990
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$N);
|
|
13880
|
-
return React__default.createElement(Container$
|
|
13991
|
+
return React__default.createElement(Container$1e, null, React__default.createElement(Tabs, null, React__default.createElement(HeaderContainer, null, React__default.createElement(MobileLogoLink, Object.assign({}, {
|
|
13881
13992
|
home: home,
|
|
13882
13993
|
logoMark: logoMark
|
|
13883
13994
|
}, {
|
|
@@ -13976,16 +14087,16 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
13976
14087
|
};
|
|
13977
14088
|
|
|
13978
14089
|
var _excluded$P = ["children"];
|
|
13979
|
-
var _templateObject$
|
|
13980
|
-
var Container$
|
|
13981
|
-
var LogoContainer = styled.div(_templateObject2$
|
|
13982
|
-
var LogoTopText = styled.div(_templateObject3$
|
|
13983
|
-
var LogoBottomText = styled.div(_templateObject4$
|
|
13984
|
-
var SidebarBox = styled.div(_templateObject5$
|
|
13985
|
-
var SidebarHeading = styled.div(_templateObject6$
|
|
13986
|
-
var SidebarLinkHeading = styled.div(_templateObject7$
|
|
13987
|
-
var BackLink$1 = styled(Link)(_templateObject8$
|
|
13988
|
-
var SLink = styled(Link)(_templateObject9$
|
|
14090
|
+
var _templateObject$1U, _templateObject2$1C, _templateObject3$1q, _templateObject4$1f, _templateObject5$17, _templateObject6$U, _templateObject7$P, _templateObject8$G, _templateObject9$w;
|
|
14091
|
+
var Container$1f = styled.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"])));
|
|
14092
|
+
var LogoContainer = styled.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"])));
|
|
14093
|
+
var LogoTopText = styled.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"])));
|
|
14094
|
+
var LogoBottomText = styled.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"])));
|
|
14095
|
+
var SidebarBox = styled.div(_templateObject5$17 || (_templateObject5$17 = _taggedTemplateLiteralLoose(["\n position: relative;\n border-bottom: 1px solid var(--grey-a7);\n padding: 22px 20px 21px 20px;\n"])));
|
|
14096
|
+
var SidebarHeading = styled.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"])));
|
|
14097
|
+
var SidebarLinkHeading = styled.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"])));
|
|
14098
|
+
var BackLink$1 = styled(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"])));
|
|
14099
|
+
var SLink = styled(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"])));
|
|
13989
14100
|
var SidebarLink = function SidebarLink(_ref) {
|
|
13990
14101
|
var title = _ref.title,
|
|
13991
14102
|
to = _ref.to;
|
|
@@ -14001,7 +14112,7 @@ var Logo$2 = function Logo(_ref2) {
|
|
|
14001
14112
|
var Sidebar = function Sidebar(_ref3) {
|
|
14002
14113
|
var children = _ref3.children,
|
|
14003
14114
|
props = _objectWithoutPropertiesLoose(_ref3, _excluded$P);
|
|
14004
|
-
return React__default.createElement(Container$
|
|
14115
|
+
return React__default.createElement(Container$1f, Object.assign({}, props), children);
|
|
14005
14116
|
};
|
|
14006
14117
|
|
|
14007
14118
|
export { ActionButtons, ActionsBar, AlertBar, AlertWrapper, AreaUploadManager, AvatarUploader, BackLink$1 as BackLink, BaseStyles, BasicSearchInput, Button, ButtonWithIcon, ButtonWithLoading, ButtonsStack, CameraPanelWrapper, CameraPanels, Checkbox, ConfirmationModal, Content$1 as Content, ContentLayout, Controls, CropTool, DatePicker, DebouncedSearcher, DropArea, DurationSlider, EditCell, FilterBar, FilterButton, FilterDropdown, FilterDropdownContainer, FilterInputs, FilterLayout, FiltersResults, FlexContentPlaceholder, Form, FullWidthContentBlock, GlobalUI, Icon, IconButton$2 as IconButton, Input, InputFileButton, IntroductionText, Label, Layout, LineReducer, LineSetContext, LineUI, LineUI$1 as LineUIRTC, LineUIVideo, Logo$2 as Logo, MainContainer, MainMenu, MediaBox, ModalContext, ModalProvider, MultilineContent, Notification, NotificationProvider, PTZContext, PTZProvider, reducer as PTZReducer, PageHeader, PageTitle, Pagination, PasswordField, PercentageSlider, RadioButton, SelectField, SelectWrapper, Sidebar, SidebarBox, SidebarHeading, SidebarLink, SidebarLinkHeading, SliderInput, SmallInput, SortDropdown, Spinner, SplitButton, SplitLayout, StatusIcon, Switch, Tab, TabContent, TabContext, TabList, TabWithIcon, TableHeaderTitle, TableRowThumbnail, Tabs, TabsWithIconBar, Tag, TagList, TagListWrapper$1 as TagListWrapper, TextArea, TextAreaField, TextField, ThemeVariables, Tooltip, TopBar, TypeTable, UtilityHeader, WebRTCPlayer as WebRTCClient, index as defaultTheme, isDateInterval, isFilterItem, resetButtonStyles, useClickOutside, useCopyToClipboard, useInterval, useMediaModal, useModal, useNotification, usePTZ, usePoll, useThemeToggle, useTitle, useTo };
|