scorer-ui-kit 2.9.0 → 2.9.2
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/atoms/FilterDropHandler.d.ts +6 -1
- package/dist/Filters/molecules/DatePicker.d.ts +7 -1
- package/dist/Filters/molecules/DropdownDatePicker.d.ts +2 -0
- package/dist/Form/molecules/DurationSlider.d.ts +1 -0
- package/dist/Global/index.d.ts +3 -0
- package/dist/helpers/index.d.ts +3 -2
- package/dist/index.js +371 -222
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +372 -223
- package/dist/index.modern.js.map +1 -1
- package/dist/theme/index.d.ts +0 -29
- package/dist/theme/legacy/styles.d.ts +0 -11
- package/dist/theme/legacy/typography.d.ts +0 -18
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -6,8 +6,8 @@ var React = require('react');
|
|
|
6
6
|
var React__default = _interopDefault(React);
|
|
7
7
|
var icons = require('@future-standard/icons');
|
|
8
8
|
var ReactDom = _interopDefault(require('react-dom'));
|
|
9
|
-
var reactRouterDom = require('react-router-dom');
|
|
10
9
|
var dateFns = require('date-fns');
|
|
10
|
+
var reactRouterDom = require('react-router-dom');
|
|
11
11
|
var locale = require('date-fns/locale');
|
|
12
12
|
var isequal = _interopDefault(require('lodash.isequal'));
|
|
13
13
|
var debounce = _interopDefault(require('lodash.debounce'));
|
|
@@ -796,24 +796,6 @@ var typography = {
|
|
|
796
796
|
"textDecoration": "none",
|
|
797
797
|
"color": "var(--grey-a11)"
|
|
798
798
|
}
|
|
799
|
-
},
|
|
800
|
-
"modal": {
|
|
801
|
-
"title": {
|
|
802
|
-
"textAlign": "left",
|
|
803
|
-
"fontSize": "20px",
|
|
804
|
-
"fontWeight": 400,
|
|
805
|
-
"textShadow": "0px 0px 10px var(--white-a5)",
|
|
806
|
-
"textDecoration": "none",
|
|
807
|
-
"color": "var(--grey-11)"
|
|
808
|
-
},
|
|
809
|
-
"basicContent": {
|
|
810
|
-
"textAlign": "left",
|
|
811
|
-
"fontSize": "14px",
|
|
812
|
-
"fontWeight": 400,
|
|
813
|
-
"lineHeight": "25px",
|
|
814
|
-
"textDecoration": "none",
|
|
815
|
-
"color": "var(--grey-11)"
|
|
816
|
-
}
|
|
817
799
|
}
|
|
818
800
|
};
|
|
819
801
|
|
|
@@ -1347,17 +1329,6 @@ var styles = {
|
|
|
1347
1329
|
"borderColor": "var(--primary-7)",
|
|
1348
1330
|
"border": "var(--primary-7) 1px solid"
|
|
1349
1331
|
}
|
|
1350
|
-
},
|
|
1351
|
-
"modal": {
|
|
1352
|
-
"overlay": {
|
|
1353
|
-
"backgroundColor": "var(--grey-a3)"
|
|
1354
|
-
},
|
|
1355
|
-
"container": {
|
|
1356
|
-
"boxShadow": "0px 10px 15px 0px var(--primary-a1)",
|
|
1357
|
-
"backgroundColor": "var(--grey-1)",
|
|
1358
|
-
"borderColor": "var(--grey-6)",
|
|
1359
|
-
"border": "var(--grey-6) 1px solid"
|
|
1360
|
-
}
|
|
1361
1332
|
}
|
|
1362
1333
|
};
|
|
1363
1334
|
|
|
@@ -2264,7 +2235,7 @@ var InputActionButton = styled__default.button.attrs({
|
|
|
2264
2235
|
var FeedbackContainer = styled__default.div(_templateObject3$a || (_templateObject3$a = _taggedTemplateLiteralLoose(["\n flex-shrink: 0;\n\n background-color: transparent;\n border: 1px solid transparent;\n\n border-left: none;\n border-radius: 0 3px 3px 0;\n overflow: hidden;\n\n display:flex;\n justify-content:left;\n align-items:center;\n"])));
|
|
2265
2236
|
var FeedbackMessage = styled__default.div(_templateObject4$9 || (_templateObject4$9 = _taggedTemplateLiteralLoose(["\n flex: 0 1 400px;\n padding: 0 10px 0 0;\n\n font-weight: 500;\n color: var(--white-1);\n"])));
|
|
2266
2237
|
var FeedbackIcon = styled__default.div(_templateObject5$7 || (_templateObject5$7 = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n width: 40px;\n display: flex;\n justify-content:center;\n align-items:center;\n\n ", " {\n [stroke]{\n stroke: var(--white-1);\n }\n }\n"])), IconWrapper);
|
|
2267
|
-
var StyledInput = styled__default.input(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n\n font-family: var(--font-data);\n\n height: var(--input-height);\n width: 100%;\n border-radius: 3px;\n\n padding: 0 15px 0 15px;\n box-sizing: border-box;\n outline: none;\n\n color: var(--input-color-default);\n font-size: 14px;\n\n transition
|
|
2238
|
+
var StyledInput = styled__default.input(_templateObject6$4 || (_templateObject6$4 = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", ";\n\n font-family: var(--font-data);\n\n height: var(--input-height);\n width: 100%;\n border-radius: 3px;\n\n padding: 0 15px 0 15px;\n box-sizing: border-box;\n outline: none;\n\n color: var(--input-color-default);\n font-size: 14px;\n\n transition:\n border var(--speed-fast) var(--easing-primary-out),\n background-color var(--speed-fast) var(--easing-primary-out),\n box-shadow var(--speed-fast) var(--easing-primary-out);\n\n &::placeholder {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n font-weight: 400;\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n"])), removeAutoFillStyle, function (_ref) {
|
|
2268
2239
|
var fieldState = _ref.fieldState;
|
|
2269
2240
|
return styled.css(_templateObject7$4 || (_templateObject7$4 = _taggedTemplateLiteralLoose(["\n border: 1px solid var(--input-", "-border-color);\n background: var(--input-", "-background-color);\n box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread) var(--input-", "-shadow-color, transparent);\n "])), fieldState, fieldState, fieldState);
|
|
2270
2241
|
});
|
|
@@ -2275,7 +2246,7 @@ var InputContainer = styled__default.div(_templateObject8$3 || (_templateObject8
|
|
|
2275
2246
|
var Container$5 = styled__default.div(_templateObject10$1 || (_templateObject10$1 = _taggedTemplateLiteralLoose(["\n ", "\n\n"])), function (_ref3) {
|
|
2276
2247
|
var fieldState = _ref3.fieldState,
|
|
2277
2248
|
showFeedback = _ref3.showFeedback;
|
|
2278
|
-
return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n
|
|
2249
|
+
return styled.css(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n\n display: flex;\n position: relative;\n flex-direction: row;\n\n ", "{\n\n &:disabled {\n cursor: not-allowed;\n }\n\n ", ";\n\n }\n\n ", " {\n ", ";\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n "])), StyledInput, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && styled.css(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), FeedbackContainer, ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n display: none;\n "]))), fieldState, fieldState, StyledInput, fieldState, fieldState, fieldState);
|
|
2279
2250
|
});
|
|
2280
2251
|
var Input = function Input(_ref4) {
|
|
2281
2252
|
var _ref4$type = _ref4.type,
|
|
@@ -2375,16 +2346,16 @@ var Label = function Label(_ref3) {
|
|
|
2375
2346
|
|
|
2376
2347
|
var _excluded$6 = ["unit", "label", "name", "type", "placeholder", "defaultValue", "fieldState", "required", "className"];
|
|
2377
2348
|
var _templateObject$j, _templateObject2$d, _templateObject3$c, _templateObject4$b, _templateObject5$9, _templateObject6$5, _templateObject7$5;
|
|
2378
|
-
var StyledInput$1 = styled__default.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: var(--font-data);\n line-height: var(--input-compact-height);\n\n font-size: 14px;\n flex: 1;\n color: var(--input-color-default);\n width: 100%;\n border: none;\n background-color: transparent;\n box-sizing: border-box;\n outline: none;\n
|
|
2379
|
-
var InputContainer$1 = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n display: flex;\n height: var(--input-compact-height);\n padding: 0 8px;\n align-items: center;\n gap: 8px;\n position: relative;\n border-radius: 3px;\n
|
|
2349
|
+
var StyledInput$1 = styled__default.input(_templateObject$j || (_templateObject$j = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: var(--font-data);\n line-height: var(--input-compact-height);\n\n font-size: 14px;\n flex: 1;\n color: var(--input-color-default);\n width: 100%;\n border: none;\n background-color: transparent;\n box-sizing: border-box;\n outline: none;\n\n &::placeholder {\n color: var(--input-color-placeholder);\n font-style: italic;\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n\n &:disabled {\n cursor: not-allowed;\n color: var(--input-color-disabled);\n }\n"])), removeAutoFillStyle);
|
|
2350
|
+
var InputContainer$1 = styled__default.div(_templateObject2$d || (_templateObject2$d = _taggedTemplateLiteralLoose(["\n display: flex;\n height: var(--input-compact-height);\n padding: 0 8px;\n align-items: center;\n gap: 8px;\n position: relative;\n border-radius: 3px;\n\n ", ";\n\n ", "\n\n"])), function (_ref) {
|
|
2380
2351
|
var fieldState = _ref.fieldState;
|
|
2381
|
-
return styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n border: 1px solid var(--input-", "-border-color);\n background: var(--input-", "-background-color);\n transition
|
|
2352
|
+
return styled.css(_templateObject3$c || (_templateObject3$c = _taggedTemplateLiteralLoose(["\n border: 1px solid var(--input-", "-border-color);\n background: var(--input-", "-background-color);\n transition:\n border var(--speed-normal) var(--easing-primary-out),\n background-color var(--speed-normal) var(--easing-primary-out);\n "])), fieldState, fieldState);
|
|
2382
2353
|
}, function (_ref2) {
|
|
2383
2354
|
var hasAction = _ref2.hasAction;
|
|
2384
2355
|
return hasAction && styled.css(_templateObject4$b || (_templateObject4$b = _taggedTemplateLiteralLoose(["\n ", "{\n padding-right: 200px;\n\n // Used to control password manager injection.\n background-position: calc(100% - 50px) 50% !important;\n }\n "])), StyledInput$1);
|
|
2385
2356
|
});
|
|
2386
2357
|
var UnitKey = styled__default.div(_templateObject5$9 || (_templateObject5$9 = _taggedTemplateLiteralLoose(["\n flex: 0 1;\n font-size: 12px;\n font-family: var(--font-ui);\n color: var(--input-color-unit);\n margin-top: 1px;\n white-space: nowrap;\n"])));
|
|
2387
|
-
var Container$6 = styled__default.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n
|
|
2358
|
+
var Container$6 = styled__default.div(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n position: relative;\n\n ", ";\n"])), function (_ref3) {
|
|
2388
2359
|
var fieldState = _ref3.fieldState;
|
|
2389
2360
|
return fieldState && styled.css(_templateObject7$5 || (_templateObject7$5 = _taggedTemplateLiteralLoose(["\n &:focus-within ", " {\n transition: boxShadow var(--speed-fast) var(--easing-primary-in-out);\n box-shadow: 0 3px 3px var(--input-", "-focused-shadow-color, var(--input-", "-shadow-color));\n }\n "])), InputContainer$1, fieldState, fieldState);
|
|
2390
2361
|
});
|
|
@@ -2842,7 +2813,7 @@ var RadioButton = function RadioButton(_ref2) {
|
|
|
2842
2813
|
var _excluded$7 = ["placeholder", "fieldState", "showFeedback", "feedbackMessage", "children"];
|
|
2843
2814
|
var _templateObject$n, _templateObject2$h, _templateObject3$g, _templateObject4$f, _templateObject5$d, _templateObject6$9, _templateObject7$9, _templateObject8$7, _templateObject9$6;
|
|
2844
2815
|
var FeedbackIcon$1 = styled__default.div(_templateObject$n || (_templateObject$n = _taggedTemplateLiteralLoose(["\n flex: 0 0 40px;\n width: 40px;\n display: flex;\n justify-content:center;\n align-items:center;\n padding-top: 2px;\n"])));
|
|
2845
|
-
var StyledTextArea = styled__default.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n padding: 8px 15px;\n box-sizing: border-box;\n outline: none;\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n\n color: var(--input-color-default);\n font-size: 14px;\n
|
|
2816
|
+
var StyledTextArea = styled__default.textarea(_templateObject2$h || (_templateObject2$h = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n padding: 8px 15px;\n box-sizing: border-box;\n outline: none;\n height: 100%;\n width: 100%;\n border-radius: 3px;\n\n\n color: var(--input-color-default);\n font-size: 14px;\n\n transition:\n border var(--speed-fast) var(--easing-primary-out),\n background-color var(--speed-fast) var(--easing-primary-out),\n box-shadow var(--speed-fast) var(--easing-primary-out);\n\n &::placeholder {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n font-weight: 400;\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n"])), function (_ref) {
|
|
2846
2817
|
var fieldState = _ref.fieldState;
|
|
2847
2818
|
return styled.css(_templateObject3$g || (_templateObject3$g = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n border: 1px solid var(--input-", "-border-color);\n background: var(--input-", "-background-color);\n box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread) var(--input-", "-shadow-color, transparent);\n "])), fieldState, fieldState, fieldState);
|
|
2848
2819
|
});
|
|
@@ -2851,7 +2822,7 @@ var FeedbackMessage$1 = styled__default.div(_templateObject5$d || (_templateObje
|
|
|
2851
2822
|
var Container$a = styled__default.div(_templateObject6$9 || (_templateObject6$9 = _taggedTemplateLiteralLoose(["\n ", ";\n"])), function (_ref2) {
|
|
2852
2823
|
var fieldState = _ref2.fieldState,
|
|
2853
2824
|
showFeedback = _ref2.showFeedback;
|
|
2854
|
-
return styled.css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["
|
|
2825
|
+
return styled.css(_templateObject7$9 || (_templateObject7$9 = _taggedTemplateLiteralLoose(["\n display: flex;\n position: relative;\n flex-direction: column;\n\n ", "{\n ", ";\n\n &:disabled {\n cursor: not-allowed;\n }\n\n &:focus {\n box-shadow: var(--input-focused-box-shadow-x) var(--input-focused-box-shadow-y) var(--input-focused-box-shadow-blur) var(--input-focused-box-shadow-spread) var(--input-", "-focused-shadow-color);\n }\n }\n\n ", " {\n border-color: var(--input-", "-border-color);\n background: var(--input-", "-border-color);\n\n ", "\n }\n\n &:focus-within ", " {\n border-color: var(--input-", "-focused-border-color, var(--input-", "-border-color));\n }\n\n "])), StyledTextArea, ['default', 'disabled'].indexOf(fieldState) === -1 && showFeedback && styled.css(_templateObject8$7 || (_templateObject8$7 = _taggedTemplateLiteralLoose(["\n border-bottom-left-radius: 0px;\n border-bottom-right-radius: 0px;\n "]))), fieldState, FeedbackContainer$1, fieldState, fieldState, ['default', 'disabled'].indexOf(fieldState) !== -1 && styled.css(_templateObject9$6 || (_templateObject9$6 = _taggedTemplateLiteralLoose(["\n display:none;\n "]))), FeedbackContainer$1, fieldState, fieldState);
|
|
2855
2826
|
});
|
|
2856
2827
|
var TextArea = function TextArea(_ref3) {
|
|
2857
2828
|
var _ref3$placeholder = _ref3.placeholder,
|
|
@@ -2916,7 +2887,7 @@ var SubjectIcon = styled__default.div(_templateObject3$h || (_templateObject3$h
|
|
|
2916
2887
|
var isCompact = _ref2.isCompact;
|
|
2917
2888
|
return isCompact ? '10px' : '12px';
|
|
2918
2889
|
});
|
|
2919
|
-
var StyledSelect = styled__default.select(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n outline: none;\n border-radius: 3px;\n appearance: none;\n font-family: var(--font-data);\n height: var(--input-height);\n width: 100%;\n border-radius: 3px;\n color: var(--input-color-default);\n font-size: 14px;\n cursor: pointer;\n\n transition
|
|
2890
|
+
var StyledSelect = styled__default.select(_templateObject4$g || (_templateObject4$g = _taggedTemplateLiteralLoose(["\n box-sizing: border-box;\n outline: none;\n border-radius: 3px;\n appearance: none;\n font-family: var(--font-data);\n height: var(--input-height);\n width: 100%;\n border-radius: 3px;\n color: var(--input-color-default);\n font-size: 14px;\n cursor: pointer;\n\n transition:\n border var(--speed-fast) var(--easing-primary-out),\n background-color var(--speed-fast) var(--easing-primary-out),\n box-shadow var(--speed-fast) var(--easing-primary-out);\n\n ", ";\n\n\n ", ";\n\n &:disabled {\n opacity: 1;\n cursor: not-allowed;\n color: var(--input-disabled-color-default);\n border: 1px solid var(--input-disabled-border-color);\n background: var(--input-disabled-background-color);\n box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread) var(--input-disabled-shadow-color, transparent);\n }\n\n &::-ms-expand {\n display: none;\n }\n"])), function (_ref3) {
|
|
2920
2891
|
var fieldState = _ref3.fieldState;
|
|
2921
2892
|
return styled.css(_templateObject5$e || (_templateObject5$e = _taggedTemplateLiteralLoose(["\n border: 1px solid var(--input-", "-border-color);\n background: var(--input-", "-background-color);\n box-shadow: var(--input-box-shadow-x) var(--input-box-shadow-y) var(--input-box-shadow-blur) var(--input-box-shadow-spread) var(--input-", "-shadow-color, transparent);\n "])), fieldState, fieldState, fieldState);
|
|
2922
2893
|
}, function (_ref4) {
|
|
@@ -2926,7 +2897,7 @@ var StyledSelect = styled__default.select(_templateObject4$g || (_templateObject
|
|
|
2926
2897
|
});
|
|
2927
2898
|
var Container$b = styled__default.div(_templateObject8$8 || (_templateObject8$8 = _taggedTemplateLiteralLoose(["\n\n ", ";\n\n"])), function (_ref5) {
|
|
2928
2899
|
var activePlaceholder = _ref5.activePlaceholder;
|
|
2929
|
-
return activePlaceholder && styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n ", " {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n font-weight: 400;\n }\n "])), StyledSelect);
|
|
2900
|
+
return activePlaceholder && styled.css(_templateObject9$7 || (_templateObject9$7 = _taggedTemplateLiteralLoose(["\n ", " {\n font-family: var(--font-data);\n color: var(--input-color-placeholder);\n font-style: italic;\n &:lang(ja) {\n font-style: normal;\n }\n font-weight: 400;\n }\n "])), StyledSelect);
|
|
2930
2901
|
});
|
|
2931
2902
|
var SelectField = function SelectField(_ref6) {
|
|
2932
2903
|
var _ref6$fieldState = _ref6.fieldState,
|
|
@@ -3057,6 +3028,21 @@ var isNotNumber = function isNotNumber(value) {
|
|
|
3057
3028
|
var intValue = Number(value);
|
|
3058
3029
|
return intValue !== intValue;
|
|
3059
3030
|
};
|
|
3031
|
+
var areDatesEqual = function areDatesEqual(storedValue, currentDisplay) {
|
|
3032
|
+
if (storedValue === null && currentDisplay === null) {
|
|
3033
|
+
return true;
|
|
3034
|
+
}
|
|
3035
|
+
if (storedValue === undefined && currentDisplay === null) {
|
|
3036
|
+
return true;
|
|
3037
|
+
}
|
|
3038
|
+
if (isDateInterval(storedValue) && isDateInterval(currentDisplay)) {
|
|
3039
|
+
return dateFns.isEqual(storedValue === null || storedValue === void 0 ? void 0 : storedValue.start, currentDisplay === null || currentDisplay === void 0 ? void 0 : currentDisplay.start) && dateFns.isEqual(storedValue === null || storedValue === void 0 ? void 0 : storedValue.end, currentDisplay === null || currentDisplay === void 0 ? void 0 : currentDisplay.end);
|
|
3040
|
+
}
|
|
3041
|
+
if (storedValue instanceof Date && currentDisplay instanceof Date) {
|
|
3042
|
+
return dateFns.isEqual(storedValue, currentDisplay);
|
|
3043
|
+
}
|
|
3044
|
+
return false;
|
|
3045
|
+
};
|
|
3060
3046
|
|
|
3061
3047
|
var _excluded$9 = ["min", "max", "marks", "defaultValue", "thumbColor", "disabled", "onlyMarkSelect", "inputCallback", "onChangeCallback", "allMarkCentered"];
|
|
3062
3048
|
var _templateObject$p, _templateObject2$j, _templateObject3$i, _templateObject4$h, _templateObject5$f, _templateObject6$b, _templateObject7$b, _templateObject8$9, _templateObject9$8, _templateObject10$5, _templateObject11$3, _templateObject12$3;
|
|
@@ -3077,7 +3063,7 @@ var Mark = styled__default.span(_templateObject5$f || (_templateObject5$f = _tag
|
|
|
3077
3063
|
var leftValue = _ref4.leftValue;
|
|
3078
3064
|
return "calc(" + leftValue + "% + 7px)";
|
|
3079
3065
|
});
|
|
3080
|
-
var MarkLabel = styled__default.span(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -24px;\n left: ", ";\n\n font-size: 10px;\n font-style: italic;\n line-height: normal;\n text-align: center;\n color: var(--grey-a11);\n\n ", "\n ", "\n ", "\n"])), function (_ref5) {
|
|
3066
|
+
var MarkLabel = styled__default.span(_templateObject6$b || (_templateObject6$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: -24px;\n left: ", ";\n\n font-size: 10px;\n font-style: italic;\n &:lang(ja) {\n font-style: normal;\n }\n line-height: normal;\n text-align: center;\n color: var(--grey-a11);\n\n ", "\n ", "\n ", "\n"])), function (_ref5) {
|
|
3081
3067
|
var leftValue = _ref5.leftValue;
|
|
3082
3068
|
return "calc(" + leftValue + "% + 7px)";
|
|
3083
3069
|
}, function (_ref6) {
|
|
@@ -3317,30 +3303,93 @@ var InputFileButton = function InputFileButton(_ref) {
|
|
|
3317
3303
|
}, text));
|
|
3318
3304
|
};
|
|
3319
3305
|
|
|
3320
|
-
var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlledValue", "inputCallback"];
|
|
3321
|
-
var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$i, _templateObject5$g;
|
|
3306
|
+
var _excluded$b = ["max", "min", "defaultValue", "title", "timeUnit", "controlledValue", "inputCallback", "timeFormat"];
|
|
3307
|
+
var _templateObject$r, _templateObject2$l, _templateObject3$k, _templateObject4$i, _templateObject5$g, _templateObject6$c, _templateObject7$c;
|
|
3322
3308
|
var Container$d = styled__default.div(_templateObject$r || (_templateObject$r = _taggedTemplateLiteralLoose([""])));
|
|
3323
3309
|
var Headers = styled__default.div(_templateObject2$l || (_templateObject2$l = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n color: var(--grey-10);\n display: flex;\n justify-content: space-between;\n margin-bottom: 30px;\n padding: 0 6px;\n"])));
|
|
3324
|
-
var ValueLabel = styled__default(Label)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n font-family:
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3328
|
-
var
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
|
|
3334
|
-
|
|
3335
|
-
|
|
3336
|
-
|
|
3337
|
-
|
|
3338
|
-
|
|
3339
|
-
|
|
3340
|
-
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
|
|
3310
|
+
var ValueLabel = styled__default(Label)(_templateObject3$k || (_templateObject3$k = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n margin-bottom: 0;\n"])));
|
|
3311
|
+
var unitStyle = styled.css(_templateObject4$i || (_templateObject4$i = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n color: var(--grey-a11);\n font-style: italic;\n &:lang(ja) {\n font-style: normal;\n }\n font-size: 12px;\n line-height: 1.5;\n"])));
|
|
3312
|
+
var Unit = styled__default.div(_templateObject5$g || (_templateObject5$g = _taggedTemplateLiteralLoose(["\n ", ";\n"])), unitStyle);
|
|
3313
|
+
var ValueTitle = styled__default.div(_templateObject6$c || (_templateObject6$c = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
3314
|
+
var TitleTemplate = styled__default.div(_templateObject7$c || (_templateObject7$c = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n ", ";\n span {\n font-style: normal;\n }\n"])), unitStyle);
|
|
3315
|
+
var getTimeValues = function getTimeValues(value, unit) {
|
|
3316
|
+
switch (unit) {
|
|
3317
|
+
case 'seconds':
|
|
3318
|
+
return {
|
|
3319
|
+
hours: Math.floor(value / 3600),
|
|
3320
|
+
minutes: Math.floor(value % 3600 / 60),
|
|
3321
|
+
seconds: value % 60
|
|
3322
|
+
};
|
|
3323
|
+
case 'minutes':
|
|
3324
|
+
return {
|
|
3325
|
+
hours: Math.floor(value / 60),
|
|
3326
|
+
minutes: value % 60,
|
|
3327
|
+
seconds: 0
|
|
3328
|
+
};
|
|
3329
|
+
default:
|
|
3330
|
+
return {
|
|
3331
|
+
hours: value,
|
|
3332
|
+
minutes: 0,
|
|
3333
|
+
seconds: 0
|
|
3334
|
+
};
|
|
3335
|
+
}
|
|
3336
|
+
};
|
|
3337
|
+
var getValueTitle = function getValueTitle(value, timeUnit, timeFormat) {
|
|
3338
|
+
if (!timeFormat || !isTimeUnit(timeUnit)) {
|
|
3339
|
+
var unit = isTimeUnit(timeUnit) ? getShortTextTimeUnit(value, timeUnit) : timeUnit;
|
|
3340
|
+
return React__default.createElement(ValueTitle, null, React__default.createElement(ValueLabel, {
|
|
3341
|
+
htmlFor: 'duration-slider',
|
|
3342
|
+
labelText: "" + value
|
|
3343
|
+
}), React__default.createElement(Unit, null, unit));
|
|
3344
|
+
}
|
|
3345
|
+
var timeValues = getTimeValues(value, timeUnit);
|
|
3346
|
+
var updatedTitle = timeFormat.split(/(\[H+\]|\[M+\]|\[S+\])/).map(function (part, index) {
|
|
3347
|
+
switch (part) {
|
|
3348
|
+
case '[HH]':
|
|
3349
|
+
return React__default.createElement("span", {
|
|
3350
|
+
key: index
|
|
3351
|
+
}, timeValues.hours.toString().padStart(2, '0'));
|
|
3352
|
+
case '[H]':
|
|
3353
|
+
return React__default.createElement("span", {
|
|
3354
|
+
key: index
|
|
3355
|
+
}, timeValues.hours);
|
|
3356
|
+
case '[MM]':
|
|
3357
|
+
return React__default.createElement("span", {
|
|
3358
|
+
key: index
|
|
3359
|
+
}, timeValues.minutes.toString().padStart(2, '0'));
|
|
3360
|
+
case '[M]':
|
|
3361
|
+
return React__default.createElement("span", {
|
|
3362
|
+
key: index
|
|
3363
|
+
}, timeValues.minutes);
|
|
3364
|
+
case '[SS]':
|
|
3365
|
+
return React__default.createElement("span", {
|
|
3366
|
+
key: index
|
|
3367
|
+
}, timeValues.seconds.toString().padStart(2, '0'));
|
|
3368
|
+
case '[S]':
|
|
3369
|
+
return React__default.createElement("span", {
|
|
3370
|
+
key: index
|
|
3371
|
+
}, timeValues.seconds);
|
|
3372
|
+
default:
|
|
3373
|
+
{
|
|
3374
|
+
var preserveSpacesInPart = part.replace(/\s+/g, "\xA0");
|
|
3375
|
+
return preserveSpacesInPart;
|
|
3376
|
+
}
|
|
3377
|
+
}
|
|
3378
|
+
});
|
|
3379
|
+
return React__default.createElement(ValueTitle, null, React__default.createElement(TitleTemplate, null, updatedTitle));
|
|
3380
|
+
};
|
|
3381
|
+
var DurationSlider = function DurationSlider(_ref) {
|
|
3382
|
+
var max = _ref.max,
|
|
3383
|
+
min = _ref.min,
|
|
3384
|
+
_ref$defaultValue = _ref.defaultValue,
|
|
3385
|
+
defaultValue = _ref$defaultValue === void 0 ? 0 : _ref$defaultValue,
|
|
3386
|
+
_ref$title = _ref.title,
|
|
3387
|
+
title = _ref$title === void 0 ? '' : _ref$title,
|
|
3388
|
+
timeUnit = _ref.timeUnit,
|
|
3389
|
+
controlledValue = _ref.controlledValue,
|
|
3390
|
+
inputCallback = _ref.inputCallback,
|
|
3391
|
+
timeFormat = _ref.timeFormat,
|
|
3392
|
+
props = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
3344
3393
|
var _useState = React.useState(defaultValue),
|
|
3345
3394
|
selectedValue = _useState[0],
|
|
3346
3395
|
setSelectedValue = _useState[1];
|
|
@@ -3351,14 +3400,10 @@ var DurationSlider = function DurationSlider(_ref3) {
|
|
|
3351
3400
|
setSelectedValue(value);
|
|
3352
3401
|
}, [inputCallback]);
|
|
3353
3402
|
var labelValue = controlledValue ? controlledValue : selectedValue;
|
|
3354
|
-
var unit = isTimeUnit(timeUnit) ? getShortTextTimeUnit(labelValue, timeUnit) : timeUnit;
|
|
3355
3403
|
return React__default.createElement(Container$d, null, React__default.createElement(Headers, null, React__default.createElement(Label, {
|
|
3356
3404
|
htmlFor: 'duration-slider',
|
|
3357
3405
|
labelText: title
|
|
3358
|
-
}),
|
|
3359
|
-
htmlFor: 'duration-slider',
|
|
3360
|
-
labelText: "" + labelValue
|
|
3361
|
-
}), React__default.createElement(Unit, null, unit))), React__default.createElement(SliderInput, Object.assign({}, props, {
|
|
3406
|
+
}), getValueTitle(labelValue, timeUnit, timeFormat)), React__default.createElement(SliderInput, Object.assign({}, props, {
|
|
3362
3407
|
id: 'duration-slider',
|
|
3363
3408
|
max: max,
|
|
3364
3409
|
min: min,
|
|
@@ -3804,14 +3849,14 @@ var areDimensionsDiff = function areDimensionsDiff(oldDimensions, newValues) {
|
|
|
3804
3849
|
return isDifferent;
|
|
3805
3850
|
};
|
|
3806
3851
|
|
|
3807
|
-
var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$
|
|
3852
|
+
var _templateObject$u, _templateObject2$o, _templateObject3$m, _templateObject4$j, _templateObject5$h, _templateObject6$d, _templateObject7$d, _templateObject8$a, _templateObject9$9, _templateObject10$6, _templateObject11$4, _templateObject12$4, _templateObject13$3, _templateObject14$2, _templateObject15$1, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22;
|
|
3808
3853
|
var CropLineStyle = styled.css(_templateObject$u || (_templateObject$u = _taggedTemplateLiteralLoose(["\n position: absolute;\n display: block;\n opacity: 0.1;\n"])));
|
|
3809
3854
|
var TopLine = styled__default.div(_templateObject2$o || (_templateObject2$o = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: n-resize;\n width: 100%;\n height: 5px;\n left: 0;\n top: -3px;\n"])), CropLineStyle);
|
|
3810
3855
|
var RightLine = styled__default.div(_templateObject3$m || (_templateObject3$m = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: e-resize;\n right: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
|
|
3811
3856
|
var BottomLine = styled__default.div(_templateObject4$j || (_templateObject4$j = _taggedTemplateLiteralLoose(["\n ", "\n cursor: s-resize;\n bottom: -3px;\n height: 5px;\n width: 100%;\n left: 0;\n"])), CropLineStyle);
|
|
3812
3857
|
var LeftLine = styled__default.div(_templateObject5$h || (_templateObject5$h = _taggedTemplateLiteralLoose(["\n ", ";\n cursor: w-resize;\n left: -3px;\n top: 0;\n width: 5px;\n height: 100%;\n"])), CropLineStyle);
|
|
3813
|
-
var resizeSquaresCss = styled.css(_templateObject6$
|
|
3814
|
-
var PointN = styled__default.div(_templateObject7$
|
|
3858
|
+
var resizeSquaresCss = styled.css(_templateObject6$d || (_templateObject6$d = _taggedTemplateLiteralLoose(["\n position: absolute;\n width: 10px;\n height: 10px;\n border: solid 1px var(--black-a12);\n background-color: var(--white-1);\n"])));
|
|
3859
|
+
var PointN = styled__default.div(_templateObject7$d || (_templateObject7$d = _taggedTemplateLiteralLoose(["\n ", ";\n top: -5px;\n margin-left: -5px;\n left: 50%;\n ", ";\n"])), resizeSquaresCss, function (_ref) {
|
|
3815
3860
|
var isResizable = _ref.isResizable;
|
|
3816
3861
|
return isResizable && styled.css(_templateObject8$a || (_templateObject8$a = _taggedTemplateLiteralLoose(["\n cursor: n-resize;\n "])));
|
|
3817
3862
|
});
|
|
@@ -3881,7 +3926,7 @@ var CropArea = function CropArea(_ref9) {
|
|
|
3881
3926
|
})));
|
|
3882
3927
|
};
|
|
3883
3928
|
|
|
3884
|
-
var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$
|
|
3929
|
+
var _templateObject$v, _templateObject2$p, _templateObject3$n, _templateObject4$k, _templateObject5$i, _templateObject6$e, _templateObject7$e, _templateObject8$b, _templateObject9$a;
|
|
3885
3930
|
var Container$g = styled__default.div(_templateObject$v || (_templateObject$v = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n font-family: ", ";\n z-index: 999;\n"])), function (_ref) {
|
|
3886
3931
|
var theme = _ref.theme;
|
|
3887
3932
|
return theme.fontFamily.ui;
|
|
@@ -3890,14 +3935,14 @@ var InnerContainer$2 = styled__default.div(_templateObject2$p || (_templateObjec
|
|
|
3890
3935
|
var ToolHeader = styled__default.div(_templateObject3$n || (_templateObject3$n = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 17px;\n"])));
|
|
3891
3936
|
var TextGroup = styled__default.div(_templateObject4$k || (_templateObject4$k = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n font-size: 20px;\n font-weight: 500;\n color: var(--mono);\n\n ", " {\n display: flex;\n align-items: center;\n margin-right: 14px;\n }\n"])), IconWrapper);
|
|
3892
3937
|
var ButtonsGroup = styled__default.div(_templateObject5$i || (_templateObject5$i = _taggedTemplateLiteralLoose(["\n button + button {\n margin-left: 10px;\n }\n"])));
|
|
3893
|
-
var PreviewArea = styled__default.div(_templateObject6$
|
|
3938
|
+
var PreviewArea = styled__default.div(_templateObject6$e || (_templateObject6$e = _taggedTemplateLiteralLoose(["\n position: relative;\n overflow: hidden;\n height: ", ";\n width: ", ";\n border-radius: 5px;\n background-color: var(--grey-3);\n background-image: repeating-linear-gradient(45deg, transparent, transparent 35px, var(--white-a10) 35px, var(--white-a10) 70px);\n"])), function (_ref2) {
|
|
3894
3939
|
var canvasHeight = _ref2.canvasHeight;
|
|
3895
3940
|
return canvasHeight ? canvasHeight + "px" : "462px";
|
|
3896
3941
|
}, function (_ref3) {
|
|
3897
3942
|
var canvasWidth = _ref3.canvasWidth;
|
|
3898
3943
|
return canvasWidth ? canvasWidth + "px" : "485px";
|
|
3899
3944
|
});
|
|
3900
|
-
var HiddenImage = styled__default.img(_templateObject7$
|
|
3945
|
+
var HiddenImage = styled__default.img(_templateObject7$e || (_templateObject7$e = _taggedTemplateLiteralLoose(["\n display: none;\n"])));
|
|
3901
3946
|
var SelectedArea = styled__default.div(_templateObject8$b || (_templateObject8$b = _taggedTemplateLiteralLoose(["\n position: absolute;\n border: dashed 1px var(--black-a12);\n box-shadow: 0 0 0 9999em var(--black-a11);\n ", ";\n cursor: move;\n"])), function (_ref4) {
|
|
3902
3947
|
var cropLeft = _ref4.cropLeft,
|
|
3903
3948
|
cropTop = _ref4.cropTop,
|
|
@@ -4167,7 +4212,7 @@ var CropTool = function CropTool(_ref5) {
|
|
|
4167
4212
|
})))))), document.body);
|
|
4168
4213
|
};
|
|
4169
4214
|
|
|
4170
|
-
var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$
|
|
4215
|
+
var _templateObject$w, _templateObject2$q, _templateObject3$o, _templateObject4$l, _templateObject5$j, _templateObject6$f, _templateObject7$f, _templateObject8$c, _templateObject9$b;
|
|
4171
4216
|
var CROP_HEIGHT_AREA = 500;
|
|
4172
4217
|
var CROP_WIDTH_AREA = 475;
|
|
4173
4218
|
var CANVAS_HEIGHT = 490;
|
|
@@ -4182,8 +4227,8 @@ var Container$h = styled__default.div(_templateObject$w || (_templateObject$w =
|
|
|
4182
4227
|
var PreviewImageGroup = styled__default.div(_templateObject3$o || (_templateObject3$o = _taggedTemplateLiteralLoose(["\n position: relative;\n margin-bottom: 17px;\n height: ", ";\n width: ", ";\n"])), PHOTO_HEIGHT, PHOTO_WIDTH);
|
|
4183
4228
|
var PhotoContainerStyle = styled.css(_templateObject4$l || (_templateObject4$l = _taggedTemplateLiteralLoose(["\n position: absolute;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n border-radius: 5px;\n background-color: var(--grey-5);\n"])));
|
|
4184
4229
|
var PreviewImage = styled__default.img(_templateObject5$j || (_templateObject5$j = _taggedTemplateLiteralLoose(["\n ", "\n object-fit: cover;\n"])), PhotoContainerStyle);
|
|
4185
|
-
var PlaceholderText = styled__default.div(_templateObject6$
|
|
4186
|
-
var NoPhoto = styled__default.div(_templateObject7$
|
|
4230
|
+
var PlaceholderText = styled__default.div(_templateObject6$f || (_templateObject6$f = _taggedTemplateLiteralLoose(["\n color: var(--grey-10);\n font-size: 14px;\n"])));
|
|
4231
|
+
var NoPhoto = styled__default.div(_templateObject7$f || (_templateObject7$f = _taggedTemplateLiteralLoose(["\n ", "\n padding-top: 15px;\n ", " {\n margin-top: 18px;\n }\n"])), PhotoContainerStyle, PlaceholderText);
|
|
4187
4232
|
var StyledInputFileButton = styled__default(InputFileButton)(_templateObject8$c || (_templateObject8$c = _taggedTemplateLiteralLoose(["\n width: 100%;\n"])));
|
|
4188
4233
|
var ButtonsWrapper = styled__default.div(_templateObject9$b || (_templateObject9$b = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n\n button {\n margin-bottom: 10px;\n }\n\n"])));
|
|
4189
4234
|
var AvatarUploader = function AvatarUploader(_ref2) {
|
|
@@ -4358,7 +4403,7 @@ var BigIconsSummary = function BigIconsSummary(_ref) {
|
|
|
4358
4403
|
}));
|
|
4359
4404
|
};
|
|
4360
4405
|
|
|
4361
|
-
var _templateObject$y, _templateObject2$s, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$
|
|
4406
|
+
var _templateObject$y, _templateObject2$s, _templateObject3$q, _templateObject4$m, _templateObject5$k, _templateObject6$g;
|
|
4362
4407
|
var Container$j = styled__default.div(_templateObject$y || (_templateObject$y = _taggedTemplateLiteralLoose(["\n font-family: ", ";\n"])), function (_ref) {
|
|
4363
4408
|
var theme = _ref.theme;
|
|
4364
4409
|
return theme.fontFamily.ui;
|
|
@@ -4370,7 +4415,7 @@ var FilesUploadGroup = styled__default.div(_templateObject4$m || (_templateObjec
|
|
|
4370
4415
|
return hasFiles ? '26px 0 20px 0' : '65px 0 42px 0';
|
|
4371
4416
|
});
|
|
4372
4417
|
var Title = styled__default.div(_templateObject5$k || (_templateObject5$k = _taggedTemplateLiteralLoose(["\n color: var(--grey-11);\n font-size: 20px;\n"])));
|
|
4373
|
-
var Description = styled__default.div(_templateObject6$
|
|
4418
|
+
var Description = styled__default.div(_templateObject6$g || (_templateObject6$g = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n line-height: 2.14;\n text-align: center;\n color: var(--grey-10);\n margin-top: 10px;\n max-width: 386px;\n"])));
|
|
4374
4419
|
var getUpdateFiles = function getUpdateFiles(newFiles, files, allowedFileTypes) {
|
|
4375
4420
|
var newFilesTransfer = new DataTransfer();
|
|
4376
4421
|
var rejectedFilesTransfer = new DataTransfer();
|
|
@@ -4490,7 +4535,7 @@ var Form = function Form(_ref2) {
|
|
|
4490
4535
|
};
|
|
4491
4536
|
|
|
4492
4537
|
var _excluded$j = ["text", "icon", "design", "noBorderTop", "textMaxWidth", "size", "onClickCallback", "closeCallback", "hasOnSelectLoading"];
|
|
4493
|
-
var _templateObject$A, _templateObject2$u, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$
|
|
4538
|
+
var _templateObject$A, _templateObject2$u, _templateObject3$r, _templateObject4$n, _templateObject5$l, _templateObject6$h, _templateObject7$g, _templateObject8$d;
|
|
4494
4539
|
var StyledButton$3 = styled__default.button(_templateObject$A || (_templateObject$A = _taggedTemplateLiteralLoose(["\n ", "\n ", ";\n\n color: var(--text-color);\n height: var(--button-height);\n display: flex;\n flex: 1 0 0;\n align-items: center;\n align-self: stretch;\n\n &:hover:enabled {\n background: var(--button-hover-bg);\n\n ", " {\n svg g, svg path {\n stroke: var(--white-a12);\n }\n }\n }\n\n &:active:enabled {\n background: var(--button-active-bg);\n\n ", ";\n\n ", " {\n svg g, svg path {\n stroke: var(--white-a12);\n }\n }\n }\n\n &:disabled {\n color: var(--text-disabled-color);\n cursor: not-allowed;\n }\n"])), resetButtonStyles, function (_ref) {
|
|
4495
4540
|
var noBorderTop = _ref.noBorderTop;
|
|
4496
4541
|
return noBorderTop ? "border-top: none" : styled.css(_templateObject2$u || (_templateObject2$u = _taggedTemplateLiteralLoose(["\n border-top: 1px solid var(--border-color)"])));
|
|
@@ -4501,9 +4546,9 @@ var StyledButton$3 = styled__default.button(_templateObject$A || (_templateObjec
|
|
|
4501
4546
|
var OptionText = styled__default.div(_templateObject4$n || (_templateObject4$n = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: var(--button-font-size);\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n text-align: center;\n font-style: normal;\n font-weight: 600;\n line-height: normal;\n"])));
|
|
4502
4547
|
var TextWrapper = styled__default.div(_templateObject5$l || (_templateObject5$l = _taggedTemplateLiteralLoose(["\n ", "\n display: flex;\n padding: 0px var(--button-h-padding);\n justify-content: center;\n align-items: center;\n gap: 8px;\n align-self: stretch;\n"])), function (_ref3) {
|
|
4503
4548
|
var textMaxWidth = _ref3.textMaxWidth;
|
|
4504
|
-
return textMaxWidth && styled.css(_templateObject6$
|
|
4549
|
+
return textMaxWidth && styled.css(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["max-width: ", ";"])), textMaxWidth);
|
|
4505
4550
|
});
|
|
4506
|
-
var LeftIconWrapper = styled__default.div(_templateObject7$
|
|
4551
|
+
var LeftIconWrapper = styled__default.div(_templateObject7$g || (_templateObject7$g = _taggedTemplateLiteralLoose(["\n ", ";\n\n height: var(--button-height);\n display: flex;\n padding: 3px var(--button-icon-h-padding);\n align-items: center;\n align-self: stretch;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n display: flex;\n justify-content: center;\n align-items: center;\n height: var(--button-icon-size);\n width: var(--button-icon-size);\n g, path {\n stroke: var(--white-a10);\n }\n }\n }\n"])), function (_ref4) {
|
|
4507
4552
|
var isAscendingIcon = _ref4.isAscendingIcon;
|
|
4508
4553
|
return isAscendingIcon && styled.css(_templateObject8$d || (_templateObject8$d = _taggedTemplateLiteralLoose(["\n transform: scaleY(-1);\n "])));
|
|
4509
4554
|
}, IconWrapper);
|
|
@@ -4703,50 +4748,38 @@ function useClickOutside(elRef, elCallback) {
|
|
|
4703
4748
|
}, [elCallback, elRef]);
|
|
4704
4749
|
}
|
|
4705
4750
|
|
|
4706
|
-
var _templateObject$B, _templateObject2$v, _templateObject3$s, _templateObject4$o, _templateObject5$m
|
|
4707
|
-
var Container$k = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n z-index: 999;\n
|
|
4708
|
-
|
|
4709
|
-
|
|
4710
|
-
|
|
4711
|
-
|
|
4712
|
-
return
|
|
4713
|
-
}, function (_ref3) {
|
|
4714
|
-
var theme = _ref3.theme;
|
|
4715
|
-
return theme.styles.modal.overlay;
|
|
4716
|
-
});
|
|
4717
|
-
var CloseIcon = styled__default(Icon)(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose([""])));
|
|
4718
|
-
var CloseButton = styled__default.button(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 0;\n top: -30px;\n color: var(--mono);\n font-size: 14px;\n font-weight: 500;\n\n ", " {\n display: flex;\n margin-left: 12px;\n }\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n ", "\n }\n\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, IconWrapper, function (_ref4) {
|
|
4719
|
-
var _ref4$selected = _ref4.selected,
|
|
4720
|
-
selected = _ref4$selected === void 0 ? false : _ref4$selected;
|
|
4721
|
-
return selected && styled.css(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
|
|
4722
|
-
}, function (_ref5) {
|
|
4723
|
-
var theme = _ref5.theme;
|
|
4724
|
-
return theme && styled.css(_templateObject6$h || (_templateObject6$h = _taggedTemplateLiteralLoose(["\n opacity: .8;\n transition: transform ", " ", ";\n "])), theme.animation.speed.normal, theme.animation.easing.primary.inOut);
|
|
4751
|
+
var _templateObject$B, _templateObject2$v, _templateObject3$s, _templateObject4$o, _templateObject5$m;
|
|
4752
|
+
var Container$k = styled__default.div(_templateObject$B || (_templateObject$B = _taggedTemplateLiteralLoose(["\n position: fixed;\n top: 0;\n left: 0;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: var(--grey-3);\n -webkit-backdrop-filter: blur(5px);\n backdrop-filter: blur(5px);\n z-index: 999;\n font-family: var(--font-ui);\n background-color: var(--grey-a3);\n"])));
|
|
4753
|
+
var CloseIcon = styled__default(Icon)(_templateObject2$v || (_templateObject2$v = _taggedTemplateLiteralLoose([""])));
|
|
4754
|
+
var CloseButton = styled__default.button(_templateObject3$s || (_templateObject3$s = _taggedTemplateLiteralLoose(["\n ", ";\n display: flex;\n align-items: center;\n justify-content: center;\n position: absolute;\n right: 0;\n top: -30px;\n color: var(--mono);\n font-size: 14px;\n font-weight: 500;\n\n ", " {\n display: flex;\n margin-left: 12px;\n }\n ", "\n &:focus {\n outline: none;\n }\n\n &:hover:enabled {\n opacity: .8;\n transition: transform var(--speed-normal) var(--easing-primary-in-out);\n }\n\n &:active:enabled {\n opacity: .9;\n }\n &:disabled {\n opacity: 0.1;\n }\n"])), resetButtonStyles, IconWrapper, function (_ref) {
|
|
4755
|
+
var _ref$selected = _ref.selected,
|
|
4756
|
+
selected = _ref$selected === void 0 ? false : _ref$selected;
|
|
4757
|
+
return selected && styled.css(_templateObject4$o || (_templateObject4$o = _taggedTemplateLiteralLoose(["\n border-bottom: 5px solid var(--primary-7);\n "])));
|
|
4725
4758
|
});
|
|
4726
|
-
var LightBox = styled__default.div(
|
|
4727
|
-
var
|
|
4759
|
+
var LightBox = styled__default.div(_templateObject5$m || (_templateObject5$m = _taggedTemplateLiteralLoose(["\n position: relative;\n margin: ", ";\n z-index: 9999;\n width: ", ";\n padding: ", ";\n border-radius: 5px;\n box-shadow: 0px 10px 15px 0px var(--primary-a1);\n background-color: var(--grey-1);\n border: var(--grey-6) 1px solid;\n"])), function (_ref2) {
|
|
4760
|
+
var isCloseEnable = _ref2.isCloseEnable;
|
|
4761
|
+
return isCloseEnable ? "27px 0 0" : "0";
|
|
4762
|
+
}, function (_ref3) {
|
|
4763
|
+
var width = _ref3.width;
|
|
4728
4764
|
return width ? width : "580px";
|
|
4729
|
-
}, function (
|
|
4730
|
-
var padding =
|
|
4765
|
+
}, function (_ref4) {
|
|
4766
|
+
var padding = _ref4.padding;
|
|
4731
4767
|
return padding ? "30px 40px" : "0";
|
|
4732
|
-
}
|
|
4733
|
-
|
|
4734
|
-
|
|
4735
|
-
|
|
4736
|
-
|
|
4737
|
-
|
|
4738
|
-
|
|
4739
|
-
|
|
4740
|
-
|
|
4741
|
-
|
|
4742
|
-
|
|
4743
|
-
|
|
4744
|
-
|
|
4745
|
-
|
|
4746
|
-
|
|
4747
|
-
customComponent = _ref9.customComponent,
|
|
4748
|
-
onDismiss = _ref9.onDismiss,
|
|
4749
|
-
dismissCallback = _ref9.dismissCallback;
|
|
4768
|
+
});
|
|
4769
|
+
var Modal = function Modal(_ref5) {
|
|
4770
|
+
var _ref5$isOpen = _ref5.isOpen,
|
|
4771
|
+
isOpen = _ref5$isOpen === void 0 ? false : _ref5$isOpen,
|
|
4772
|
+
_ref5$isCloseEnable = _ref5.isCloseEnable,
|
|
4773
|
+
isCloseEnable = _ref5$isCloseEnable === void 0 ? true : _ref5$isCloseEnable,
|
|
4774
|
+
_ref5$closeText = _ref5.closeText,
|
|
4775
|
+
closeText = _ref5$closeText === void 0 ? '' : _ref5$closeText,
|
|
4776
|
+
_ref5$width = _ref5.width,
|
|
4777
|
+
width = _ref5$width === void 0 ? '' : _ref5$width,
|
|
4778
|
+
_ref5$padding = _ref5.padding,
|
|
4779
|
+
padding = _ref5$padding === void 0 ? true : _ref5$padding,
|
|
4780
|
+
customComponent = _ref5.customComponent,
|
|
4781
|
+
onDismiss = _ref5.onDismiss,
|
|
4782
|
+
dismissCallback = _ref5.dismissCallback;
|
|
4750
4783
|
var lightBoxRef = React.useRef(null);
|
|
4751
4784
|
var onClickOutside = function onClickOutside() {
|
|
4752
4785
|
if (isCloseEnable) {
|
|
@@ -4766,7 +4799,8 @@ var Modal = function Modal(_ref9) {
|
|
|
4766
4799
|
return isOpen ? ReactDom.createPortal(React__default.createElement(Container$k, null, React__default.createElement(LightBox, {
|
|
4767
4800
|
ref: lightBoxRef,
|
|
4768
4801
|
width: width,
|
|
4769
|
-
padding: padding
|
|
4802
|
+
padding: padding,
|
|
4803
|
+
isCloseEnable: isCloseEnable
|
|
4770
4804
|
}, isCloseEnable ? React__default.createElement(CloseButton, {
|
|
4771
4805
|
onClick: function onClick() {
|
|
4772
4806
|
return dismiss();
|
|
@@ -4774,7 +4808,7 @@ var Modal = function Modal(_ref9) {
|
|
|
4774
4808
|
}, closeText ? closeText : 'CLOSE', React__default.createElement(CloseIcon, {
|
|
4775
4809
|
icon: 'CloseCompact',
|
|
4776
4810
|
size: 15,
|
|
4777
|
-
color: '
|
|
4811
|
+
color: 'grey-12',
|
|
4778
4812
|
weight: 'regular'
|
|
4779
4813
|
})) : null, customComponent)), document.body) : null;
|
|
4780
4814
|
};
|
|
@@ -5642,7 +5676,7 @@ var DateTimeBlock = function DateTimeBlock(_ref6) {
|
|
|
5642
5676
|
})))));
|
|
5643
5677
|
};
|
|
5644
5678
|
|
|
5645
|
-
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$7, _templateObject11$5, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32;
|
|
5679
|
+
var _templateObject$G, _templateObject2$z, _templateObject3$w, _templateObject4$s, _templateObject5$p, _templateObject6$k, _templateObject7$j, _templateObject8$g, _templateObject9$c, _templateObject10$7, _templateObject11$5, _templateObject12$5, _templateObject13$4, _templateObject14$3, _templateObject15$2, _templateObject16$1, _templateObject17$1, _templateObject18$1, _templateObject19$1, _templateObject20$1, _templateObject21$1, _templateObject22$1, _templateObject23, _templateObject24, _templateObject25, _templateObject26, _templateObject27, _templateObject28, _templateObject29, _templateObject30, _templateObject31, _templateObject32, _templateObject33, _templateObject34;
|
|
5646
5680
|
var initializeInterval = function initializeInterval(day) {
|
|
5647
5681
|
return {
|
|
5648
5682
|
start: dateFns.set(day, {
|
|
@@ -5656,7 +5690,7 @@ var TODAY = new Date();
|
|
|
5656
5690
|
var TODAY_INTERVAL = initializeInterval(dateFns.startOfDay(new Date()));
|
|
5657
5691
|
var Container$o = styled__default.div(_templateObject$G || (_templateObject$G = _taggedTemplateLiteralLoose(["\n display: flex;\n"])));
|
|
5658
5692
|
var DateTimeArea = styled__default.div(_templateObject2$z || (_templateObject2$z = _taggedTemplateLiteralLoose(["\n border-right: var(--grey-6) 1px solid;\n width: 170px;\n display: flex;\n flex-direction: column;\n"])));
|
|
5659
|
-
var TimeZoneOption = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n border-top: var(--grey-6) 1px solid;\n margin-top: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding:
|
|
5693
|
+
var TimeZoneOption = styled__default.div(_templateObject3$w || (_templateObject3$w = _taggedTemplateLiteralLoose(["\n border-top: var(--grey-6) 1px solid;\n margin-top: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 11px;\n box-sizing: border-box;\n"])));
|
|
5660
5694
|
var TimeZoneLabel = styled__default.div(_templateObject4$s || (_templateObject4$s = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n text-align: left;\n font-size: 12px;\n font-weight: 400;\n color: var(--grey-11);\n"])));
|
|
5661
5695
|
var TimeZoneValue = styled__default.div(_templateObject5$p || (_templateObject5$p = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n text-align: left;\n font-size: 12px;\n font-weight: 400;\n color: var(--grey-11);\n"])));
|
|
5662
5696
|
var CalendarArea = styled__default.div(_templateObject6$k || (_templateObject6$k = _taggedTemplateLiteralLoose(["\n user-select: none;\n"])));
|
|
@@ -5665,54 +5699,56 @@ var CurrentMonth = styled__default.div(_templateObject8$g || (_templateObject8$g
|
|
|
5665
5699
|
var IconWrap$1 = styled__default.div(_templateObject9$c || (_templateObject9$c = _taggedTemplateLiteralLoose(["\n [stroke]{\n stroke: var(--grey-8);\n }\n"])));
|
|
5666
5700
|
var PaginateMonth = styled__default.button(_templateObject10$7 || (_templateObject10$7 = _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);
|
|
5667
5701
|
var CalBody = styled__default.div(_templateObject11$5 || (_templateObject11$5 = _taggedTemplateLiteralLoose(["\n padding: 5px 0;\n"])));
|
|
5668
|
-
var
|
|
5669
|
-
var
|
|
5670
|
-
var
|
|
5671
|
-
var
|
|
5672
|
-
var
|
|
5702
|
+
var CalButtons = styled__default.div(_templateObject12$5 || (_templateObject12$5 = _taggedTemplateLiteralLoose(["\n display: flex;\n padding: 4px;\n justify-content: flex-end;\n align-items: flex-start;\n gap: 4px;\n align-self: stretch;\n border-top: 1px solid var(--grey-6);\n"])));
|
|
5703
|
+
var CalRightButtons = styled__default.div(_templateObject13$4 || (_templateObject13$4 = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 4px;\n"])));
|
|
5704
|
+
var CalRow = styled__default.div(_templateObject14$3 || (_templateObject14$3 = _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"])));
|
|
5705
|
+
var CalHRow = styled__default(CalRow)(_templateObject15$2 || (_templateObject15$2 = _taggedTemplateLiteralLoose(["\n border-bottom: var(--grey-6) 1px solid;\n"])));
|
|
5706
|
+
var CalCell = styled__default.button(_templateObject16$1 || (_templateObject16$1 = _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);
|
|
5707
|
+
var CalHCell = styled__default(CalCell)(_templateObject17$1 || (_templateObject17$1 = _taggedTemplateLiteralLoose(["\n text-align: center;\n font-size: 12px;\n font-weight: 700;\n color: var(--grey-a11);\n"])));
|
|
5708
|
+
var ContentDot = styled__default.div(_templateObject18$1 || (_templateObject18$1 = _taggedTemplateLiteralLoose(["\n position: absolute;\n left: 18px;\n bottom: 5px;\n width: 4px;\n height: 4px;\n border-radius: 50%;\n background-color: var(--primary-11);\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_ref) {
|
|
5673
5709
|
var state = _ref.state;
|
|
5674
|
-
return (state === 'single' || state === 'start' || state === 'end') && styled.css(
|
|
5710
|
+
return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject19$1 || (_templateObject19$1 = _taggedTemplateLiteralLoose(["\n background-color: var(--white-12);"])));
|
|
5675
5711
|
}, function (_ref2) {
|
|
5676
5712
|
var state = _ref2.state;
|
|
5677
|
-
return state === 'inside' && styled.css(
|
|
5713
|
+
return state === 'inside' && styled.css(_templateObject20$1 || (_templateObject20$1 = _taggedTemplateLiteralLoose(["\n background-color: var(--primary-12);"])));
|
|
5678
5714
|
}, function (_ref3) {
|
|
5679
5715
|
var isToday = _ref3.isToday;
|
|
5680
|
-
return isToday && styled.css(
|
|
5716
|
+
return isToday && styled.css(_templateObject21$1 || (_templateObject21$1 = _taggedTemplateLiteralLoose(["\n left: 16px;\n bottom: 3px;\n "])));
|
|
5681
5717
|
}, function (_ref4) {
|
|
5682
5718
|
var hasContent = _ref4.hasContent;
|
|
5683
|
-
return !hasContent && styled.css(
|
|
5719
|
+
return !hasContent && styled.css(_templateObject22$1 || (_templateObject22$1 = _taggedTemplateLiteralLoose(["\n display: none;\n "])));
|
|
5684
5720
|
});
|
|
5685
|
-
var DayText = styled__default.span(
|
|
5686
|
-
var CalCellB = styled__default(CalCell)(
|
|
5721
|
+
var DayText = styled__default.span(_templateObject23 || (_templateObject23 = _taggedTemplateLiteralLoose(["\n transform: translateY(-1px);\n"])));
|
|
5722
|
+
var CalCellB = styled__default(CalCell)(_templateObject24 || (_templateObject24 = _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 (_ref5) {
|
|
5687
5723
|
var thisMonth = _ref5.thisMonth;
|
|
5688
|
-
return !thisMonth && styled.css(
|
|
5724
|
+
return !thisMonth && styled.css(_templateObject25 || (_templateObject25 = _taggedTemplateLiteralLoose(["\n color: var(--grey-a8);\n "])));
|
|
5689
5725
|
}, function (_ref6) {
|
|
5690
5726
|
var isToday = _ref6.isToday;
|
|
5691
|
-
return isToday && styled.css(
|
|
5727
|
+
return isToday && styled.css(_templateObject26 || (_templateObject26 = _taggedTemplateLiteralLoose(["\n border: 2px solid var(--primary-a7);\n "])));
|
|
5692
5728
|
}, function (_ref7) {
|
|
5693
5729
|
var state = _ref7.state;
|
|
5694
|
-
return state !== 'single' && state !== 'start' && state !== 'end' && styled.css(
|
|
5730
|
+
return state !== 'single' && state !== 'start' && state !== 'end' && styled.css(_templateObject27 || (_templateObject27 = _taggedTemplateLiteralLoose(["\n &:hover:enabled {\n background: var(--primary-a6);\n color: var(--white-1);\n }\n "])));
|
|
5695
5731
|
}, function (_ref8) {
|
|
5696
5732
|
var state = _ref8.state;
|
|
5697
|
-
return (state === 'single' || state === 'start' || state === 'end') && styled.css(
|
|
5733
|
+
return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject28 || (_templateObject28 = _taggedTemplateLiteralLoose(["\n background: var(--primary-9);\n color: var(--white-1);\n "])));
|
|
5698
5734
|
}, function (_ref9) {
|
|
5699
5735
|
var state = _ref9.state;
|
|
5700
|
-
return state === 'start' && styled.css(
|
|
5736
|
+
return state === 'start' && styled.css(_templateObject29 || (_templateObject29 = _taggedTemplateLiteralLoose(["\n border-top-right-radius: 0;\n border-bottom-right-radius: 0;\n "])));
|
|
5701
5737
|
}, function (_ref10) {
|
|
5702
5738
|
var state = _ref10.state;
|
|
5703
|
-
return state === 'end' && styled.css(
|
|
5739
|
+
return state === 'end' && styled.css(_templateObject30 || (_templateObject30 = _taggedTemplateLiteralLoose(["\n border-top-left-radius: 0;\n border-bottom-left-radius: 0;\n "])));
|
|
5704
5740
|
}, function (_ref11) {
|
|
5705
5741
|
var state = _ref11.state;
|
|
5706
|
-
return state === 'insideHover' && styled.css(
|
|
5742
|
+
return state === 'insideHover' && styled.css(_templateObject31 || (_templateObject31 = _taggedTemplateLiteralLoose(["\n background: var(--primary-a9) !important;\n color: var(--white-1);\n "])));
|
|
5707
5743
|
}, function (_ref12) {
|
|
5708
5744
|
var state = _ref12.state;
|
|
5709
|
-
return state === 'inside' && styled.css(
|
|
5745
|
+
return state === 'inside' && styled.css(_templateObject32 || (_templateObject32 = _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 "])));
|
|
5710
5746
|
}, function (_ref13) {
|
|
5711
5747
|
var state = _ref13.state;
|
|
5712
|
-
return (state === 'single' || state === 'start' || state === 'end') && styled.css(
|
|
5748
|
+
return (state === 'single' || state === 'start' || state === 'end') && styled.css(_templateObject33 || (_templateObject33 = _taggedTemplateLiteralLoose(["\n color: var(--white-1);\n background: var(--red-a9);\n "])));
|
|
5713
5749
|
}, function (_ref14) {
|
|
5714
5750
|
var state = _ref14.state;
|
|
5715
|
-
return state === 'inside' && styled.css(
|
|
5751
|
+
return state === 'inside' && styled.css(_templateObject34 || (_templateObject34 = _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 "])));
|
|
5716
5752
|
});
|
|
5717
5753
|
var enDayGuide = ["S", "M", "T", "W", "T", "F", "S"];
|
|
5718
5754
|
var jpDayGuide = ['日', '月', '火', '水', '木', '金', '土'];
|
|
@@ -5749,7 +5785,19 @@ var DatePicker = function DatePicker(_ref15) {
|
|
|
5749
5785
|
availableRange = _ref15.availableRange,
|
|
5750
5786
|
contentDays = _ref15.contentDays,
|
|
5751
5787
|
_ref15$lang = _ref15.lang,
|
|
5752
|
-
lang = _ref15$lang === void 0 ? 'en' : _ref15$lang
|
|
5788
|
+
lang = _ref15$lang === void 0 ? 'en' : _ref15$lang,
|
|
5789
|
+
_ref15$cancelText = _ref15.cancelText,
|
|
5790
|
+
cancelText = _ref15$cancelText === void 0 ? 'Cancel' : _ref15$cancelText,
|
|
5791
|
+
_ref15$applyText = _ref15.applyText,
|
|
5792
|
+
applyText = _ref15$applyText === void 0 ? 'Apply' : _ref15$applyText,
|
|
5793
|
+
_ref15$hasApply = _ref15.hasApply,
|
|
5794
|
+
hasApply = _ref15$hasApply === void 0 ? false : _ref15$hasApply,
|
|
5795
|
+
_ref15$disableApply = _ref15.disableApply,
|
|
5796
|
+
disableApply = _ref15$disableApply === void 0 ? false : _ref15$disableApply,
|
|
5797
|
+
_ref15$applyCallback = _ref15.applyCallback,
|
|
5798
|
+
applyCallback = _ref15$applyCallback === void 0 ? function () {} : _ref15$applyCallback,
|
|
5799
|
+
_ref15$cancelCallback = _ref15.cancelCallback,
|
|
5800
|
+
cancelCallback = _ref15$cancelCallback === void 0 ? function () {} : _ref15$cancelCallback;
|
|
5753
5801
|
var _useState = React.useState(getInitialValue(hasEmptyValue, initialValue)),
|
|
5754
5802
|
selectedRange = _useState[0],
|
|
5755
5803
|
setSelectedRange = _useState[1];
|
|
@@ -5918,7 +5966,13 @@ var DatePicker = function DatePicker(_ref15) {
|
|
|
5918
5966
|
isToday: isTodayValue
|
|
5919
5967
|
}));
|
|
5920
5968
|
}));
|
|
5921
|
-
}))
|
|
5969
|
+
})), hasApply && React__default.createElement(CalButtons, null, hasApply && React__default.createElement(CalRightButtons, null, React__default.createElement(Button, {
|
|
5970
|
+
design: 'secondary',
|
|
5971
|
+
onClick: cancelCallback
|
|
5972
|
+
}, cancelText), React__default.createElement(Button, {
|
|
5973
|
+
onClick: applyCallback,
|
|
5974
|
+
disabled: !isTimeRangeValid || selectedRange === null || disableApply
|
|
5975
|
+
}, applyText)))));
|
|
5922
5976
|
};
|
|
5923
5977
|
var cellState = function cellState(day, interval, _hoverDate) {
|
|
5924
5978
|
var state = "off";
|
|
@@ -6125,15 +6179,15 @@ var FilterOption = function FilterOption(_ref2) {
|
|
|
6125
6179
|
var _excluded$q = ["color", "hasBorder", "iconSize", "disabled", "noBackground", "hasCrossButton", "onCrossClick", "width"];
|
|
6126
6180
|
var _templateObject$K, _templateObject2$D, _templateObject3$z, _templateObject4$v, _templateObject5$s, _templateObject6$n, _templateObject7$m, _templateObject8$j;
|
|
6127
6181
|
var IconContainer$1 = styled__default.div(_templateObject$K || (_templateObject$K = _taggedTemplateLiteralLoose(["\n padding: 0 2px;\n"])));
|
|
6128
|
-
var Container$r = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", " {\n flex-shrink: 0;\n display: flex;\n }\n\n
|
|
6182
|
+
var Container$r = styled__default.div(_templateObject2$D || (_templateObject2$D = _taggedTemplateLiteralLoose(["\n ", ";\n\n ", " {\n flex-shrink: 0;\n display: flex;\n }\n\n\n"])), function (_ref) {
|
|
6129
6183
|
var hasBorder = _ref.hasBorder,
|
|
6130
6184
|
disabled = _ref.disabled,
|
|
6131
6185
|
noBackground = _ref.noBackground,
|
|
6132
6186
|
width = _ref.width;
|
|
6133
|
-
return styled.css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n
|
|
6187
|
+
return styled.css(_templateObject3$z || (_templateObject3$z = _taggedTemplateLiteralLoose(["\n\n transition: all var(--speed-normal) var(--easing-primary-in);\n gap: 6px;\n height: var(--input-compact-height);\n padding: 0;\n align-items: center;\n display: flex;\n border-radius: 3px;\n\n ", ";\n\n ", ";\n\n ", ";\n\n background-color: ", ";\n\n &:focus-within {\n background-color: ", ";\n border: ", ";\n box-shadow: 0px 4px 9px 0px ", ";\n }\n\n "])), hasBorder && styled.css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n padding: 0 8px;\n border: 1px solid var(--filter-button-stroke-color);\n box-shadow: 0px 4px 9px 0px var(--filter-button-shadow-color);\n\n &:hover {\n border: var(--primary-7) 1px solid;\n box-shadow: 0px 4px 9px 0px var(--primary-a2);\n\n }\n ", "{\n padding: 0;\n }\n "])), IconContainer$1), disabled && styled.css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n opacity: 50%;\n cursor: not-allowed;\n "]))), width && styled.css(_templateObject6$n || (_templateObject6$n = _taggedTemplateLiteralLoose(["\n width: ", ";\n "])), width), noBackground ? 'transparent' : 'var(--grey-1)', noBackground ? 'transparent' : 'var(--grey-1)', hasBorder ? '1px solid var(--primary-9)' : 'none', noBackground ? 'transparent' : 'var(--primary-a2)');
|
|
6134
6188
|
}, IconWrapper);
|
|
6135
6189
|
var CrossButton = styled__default.button(_templateObject7$m || (_templateObject7$m = _taggedTemplateLiteralLoose(["\n ", ";\n flex-shrink: 0;\n flex-grow: 0;\n flex-basis: auto;\n width: 26px;\n\n ", " {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n"])), resetButtonStyles, IconWrapper);
|
|
6136
|
-
var StyledInput$2 = styled__default.input(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n color: var(--grey-12);\n
|
|
6190
|
+
var StyledInput$2 = styled__default.input(_templateObject8$j || (_templateObject8$j = _taggedTemplateLiteralLoose(["\n ", ";\n\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n color: var(--grey-12);\n\n &::placeholder {\n ", ";\n color: var(--grey-11);\n font-style: italic;\n }\n\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n\n &:disabled {\n cursor: not-allowed;\n }\n\n font-size: 12px;\n border: none;\n height: 100%;\n width: 100%;\n background-color: transparent;\n box-sizing: border-box;\n border-radius: 3px;\n outline: none;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n\n"])), removeAutoFillStyle, function (_ref2) {
|
|
6137
6191
|
var color = _ref2.color;
|
|
6138
6192
|
return color && "color: var(--" + color + ")";
|
|
6139
6193
|
});
|
|
@@ -6190,7 +6244,7 @@ var isFilterItem = function isFilterItem(item) {
|
|
|
6190
6244
|
return (typeof item.value === 'number' || typeof item.value === 'string') && typeof item.text === 'string';
|
|
6191
6245
|
};
|
|
6192
6246
|
|
|
6193
|
-
var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "design", "children", "onToggleOpenCallback", "onCloseCallback"];
|
|
6247
|
+
var _excluded$r = ["buttonIcon", "buttonText", "disabled", "minWidth", "minHeight", "isSortAscending", "design", "noCloseOnClickOutside", "children", "onToggleOpenCallback", "onCloseCallback"];
|
|
6194
6248
|
var _templateObject$L, _templateObject2$E, _templateObject3$A, _templateObject4$w;
|
|
6195
6249
|
var Container$s = styled__default.div(_templateObject$L || (_templateObject$L = _taggedTemplateLiteralLoose(["\n position: relative;\n"])));
|
|
6196
6250
|
var ButtonWrapper = styled__default.div(_templateObject2$E || (_templateObject2$E = _taggedTemplateLiteralLoose(["\n display: inline-block;\n"])));
|
|
@@ -6218,7 +6272,7 @@ var getDropPosition = function getDropPosition(buttonRect, minWidth, minHeight)
|
|
|
6218
6272
|
}
|
|
6219
6273
|
return position;
|
|
6220
6274
|
};
|
|
6221
|
-
var FilterDropHandler = function
|
|
6275
|
+
var FilterDropHandler = React.forwardRef(function (_ref3, imperativeRef) {
|
|
6222
6276
|
var buttonIcon = _ref3.buttonIcon,
|
|
6223
6277
|
buttonText = _ref3.buttonText,
|
|
6224
6278
|
_ref3$disabled = _ref3.disabled,
|
|
@@ -6230,6 +6284,7 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6230
6284
|
isSortAscending = _ref3.isSortAscending,
|
|
6231
6285
|
_ref3$design = _ref3.design,
|
|
6232
6286
|
design = _ref3$design === void 0 ? 'default' : _ref3$design,
|
|
6287
|
+
noCloseOnClickOutside = _ref3.noCloseOnClickOutside,
|
|
6233
6288
|
children = _ref3.children,
|
|
6234
6289
|
_ref3$onToggleOpenCal = _ref3.onToggleOpenCallback,
|
|
6235
6290
|
onToggleOpenCallback = _ref3$onToggleOpenCal === void 0 ? function () {} : _ref3$onToggleOpenCal,
|
|
@@ -6244,7 +6299,10 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6244
6299
|
setOpenState = _useState[1];
|
|
6245
6300
|
var buttonWrapperRef = React.useRef(null);
|
|
6246
6301
|
var mainRef = React.useRef(null);
|
|
6247
|
-
var
|
|
6302
|
+
var clickOutsideClose = React.useCallback(function () {
|
|
6303
|
+
if (noCloseOnClickOutside) {
|
|
6304
|
+
return;
|
|
6305
|
+
}
|
|
6248
6306
|
if (openState.isOpen) {
|
|
6249
6307
|
onCloseCallback();
|
|
6250
6308
|
}
|
|
@@ -6254,8 +6312,8 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6254
6312
|
isOpen: isOpen
|
|
6255
6313
|
});
|
|
6256
6314
|
});
|
|
6257
|
-
}, [onCloseCallback, openState.isOpen]);
|
|
6258
|
-
useClickOutside(mainRef,
|
|
6315
|
+
}, [noCloseOnClickOutside, onCloseCallback, openState.isOpen]);
|
|
6316
|
+
useClickOutside(mainRef, clickOutsideClose);
|
|
6259
6317
|
var handleToggleOpen = React.useCallback(function (minWidth, minHeight) {
|
|
6260
6318
|
if (!buttonWrapperRef.current) {
|
|
6261
6319
|
return;
|
|
@@ -6265,7 +6323,7 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6265
6323
|
return;
|
|
6266
6324
|
}
|
|
6267
6325
|
var position = getDropPosition(buttonRect, minWidth, minHeight);
|
|
6268
|
-
onToggleOpenCallback(openState.isOpen);
|
|
6326
|
+
onToggleOpenCallback(!openState.isOpen);
|
|
6269
6327
|
setOpenState(function (prev) {
|
|
6270
6328
|
var isOpen = !prev.isOpen;
|
|
6271
6329
|
return _extends({}, prev, {
|
|
@@ -6274,6 +6332,19 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6274
6332
|
});
|
|
6275
6333
|
});
|
|
6276
6334
|
}, [onToggleOpenCallback, openState.isOpen]);
|
|
6335
|
+
var handleCancel = React.useCallback(function () {
|
|
6336
|
+
setOpenState(function (prev) {
|
|
6337
|
+
var isOpen = false;
|
|
6338
|
+
return _extends({}, prev, {
|
|
6339
|
+
isOpen: isOpen
|
|
6340
|
+
});
|
|
6341
|
+
});
|
|
6342
|
+
}, []);
|
|
6343
|
+
React.useImperativeHandle(imperativeRef, function () {
|
|
6344
|
+
return {
|
|
6345
|
+
cancelClose: handleCancel
|
|
6346
|
+
};
|
|
6347
|
+
});
|
|
6277
6348
|
return React__default.createElement(Container$s, Object.assign({
|
|
6278
6349
|
ref: mainRef
|
|
6279
6350
|
}, props), React__default.createElement(ButtonWrapper, {
|
|
@@ -6295,11 +6366,11 @@ var FilterDropHandler = function FilterDropHandler(_ref3) {
|
|
|
6295
6366
|
disabled: disabled,
|
|
6296
6367
|
minWidth: minWidth
|
|
6297
6368
|
}), children));
|
|
6298
|
-
};
|
|
6369
|
+
});
|
|
6299
6370
|
|
|
6300
6371
|
var _templateObject$M, _templateObject2$F;
|
|
6301
6372
|
var Container$t = styled__default.div(_templateObject$M || (_templateObject$M = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 146px;\n border-top: 1px solid var(--grey-5);\n"])));
|
|
6302
|
-
var LoadingText = styled__default.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n color: var(--grey-11);\n font-size: 12px;\n font-style: italic;\n padding: 15px 0;\n"])));
|
|
6373
|
+
var LoadingText = styled__default.div(_templateObject2$F || (_templateObject2$F = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n color: var(--grey-11);\n font-size: 12px;\n font-style: italic;\n &:lang(ja) {\n font-style: normal;\n }\n padding: 15px 0;\n"])));
|
|
6303
6374
|
var LoadingBox = function LoadingBox(_ref) {
|
|
6304
6375
|
var loadingText = _ref.loadingText;
|
|
6305
6376
|
return React__default.createElement(Container$t, null, React__default.createElement(Spinner, {
|
|
@@ -6317,7 +6388,7 @@ var OptionList = styled__default.div(_templateObject3$B || (_templateObject3$B =
|
|
|
6317
6388
|
return moreItem ? '228px' : '196px';
|
|
6318
6389
|
}, StyledFilterOption);
|
|
6319
6390
|
var ResultsContainer = styled__default.div(_templateObject4$x || (_templateObject4$x = _taggedTemplateLiteralLoose(["\n min-width: 216px;\n"])));
|
|
6320
|
-
var ResultCounter = styled__default.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n color: var(--grey-10);\n font-size: 12px;\n font-style: italic;\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: left;\n height: 32px;\n padding: 0 12px;\n border-top: 1px solid var(--grey-5);\n border-bottom: 1px solid var(--grey-5);\n"])));
|
|
6391
|
+
var ResultCounter = styled__default.div(_templateObject5$t || (_templateObject5$t = _taggedTemplateLiteralLoose(["\n font-family: var(--font-data);\n color: var(--grey-10);\n font-size: 12px;\n font-style: italic;\n &:lang(ja) {\n font-style: normal;\n }\n font-weight: 300;\n display: flex;\n align-items: center;\n justify-content: left;\n height: 32px;\n padding: 0 12px;\n border-top: 1px solid var(--grey-5);\n border-bottom: 1px solid var(--grey-5);\n"])));
|
|
6321
6392
|
var SearchWrapper = styled__default.div(_templateObject6$o || (_templateObject6$o = _taggedTemplateLiteralLoose(["\n height: 40px;\n display: flex;\n align-items: center;\n padding: 0 8px;\n"])));
|
|
6322
6393
|
var EmptyResultText = styled__default.div(_templateObject7$n || (_templateObject7$n = _taggedTemplateLiteralLoose(["\n display: block;\n height: 24px;\n color: var(--grey-11);\n font-weight: 700;\n margin-left: 12px;\n user-select: none;\n pointer-events: none;\n height: inherit;\n display: flex;\n align-items: center;\n font-size: 12px;\n"])));
|
|
6323
6394
|
var Gradient = styled__default.div(_templateObject8$k || (_templateObject8$k = _taggedTemplateLiteralLoose(["\n position: absolute;\n bottom: 0px;\n height: 15px;\n background-image: linear-gradient(to bottom, transparent, var(--grey-3));\n width: 99%;\n left: 50%;\n transform: translateX(-50%);\n pointer-events: none;\n"])));
|
|
@@ -6781,7 +6852,7 @@ var FilterLayout = function FilterLayout(_ref6) {
|
|
|
6781
6852
|
}))))))));
|
|
6782
6853
|
};
|
|
6783
6854
|
|
|
6784
|
-
var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "hasEmptyValue", "availableRange", "contentDays", "onCloseCallback", "onUpdateCallback", "onToggleCallback"];
|
|
6855
|
+
var _excluded$u = ["buttonIcon", "buttonText", "disabled", "initialValue", "dateMode", "timeMode", "selected", "dateTimeTextUpper", "dateTimeTextLower", "timeZoneTitle", "timeZoneValueTitle", "lang", "hasEmptyValue", "availableRange", "contentDays", "cancelText", "applyText", "hasApply", "onCloseCallback", "onUpdateCallback", "onToggleCallback", "onCancelCallback", "onApplyCallback"];
|
|
6785
6856
|
var _templateObject$Q;
|
|
6786
6857
|
var MIN_WIDTH = 470;
|
|
6787
6858
|
var MIN_HEIGHT = 360;
|
|
@@ -6801,12 +6872,22 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
6801
6872
|
lang = _ref.lang,
|
|
6802
6873
|
availableRange = _ref.availableRange,
|
|
6803
6874
|
contentDays = _ref.contentDays,
|
|
6875
|
+
_ref$cancelText = _ref.cancelText,
|
|
6876
|
+
cancelText = _ref$cancelText === void 0 ? 'Cancel' : _ref$cancelText,
|
|
6877
|
+
_ref$applyText = _ref.applyText,
|
|
6878
|
+
applyText = _ref$applyText === void 0 ? 'Apply' : _ref$applyText,
|
|
6879
|
+
_ref$hasApply = _ref.hasApply,
|
|
6880
|
+
hasApply = _ref$hasApply === void 0 ? true : _ref$hasApply,
|
|
6804
6881
|
_ref$onCloseCallback = _ref.onCloseCallback,
|
|
6805
6882
|
onCloseCallback = _ref$onCloseCallback === void 0 ? function () {} : _ref$onCloseCallback,
|
|
6806
6883
|
_ref$onUpdateCallback = _ref.onUpdateCallback,
|
|
6807
6884
|
onUpdateCallback = _ref$onUpdateCallback === void 0 ? function () {} : _ref$onUpdateCallback,
|
|
6808
6885
|
_ref$onToggleCallback = _ref.onToggleCallback,
|
|
6809
6886
|
onToggleCallback = _ref$onToggleCallback === void 0 ? function () {} : _ref$onToggleCallback,
|
|
6887
|
+
_ref$onCancelCallback = _ref.onCancelCallback,
|
|
6888
|
+
onCancelCallback = _ref$onCancelCallback === void 0 ? function () {} : _ref$onCancelCallback,
|
|
6889
|
+
_ref$onApplyCallback = _ref.onApplyCallback,
|
|
6890
|
+
onApplyCallback = _ref$onApplyCallback === void 0 ? function () {} : _ref$onApplyCallback,
|
|
6810
6891
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$u);
|
|
6811
6892
|
var pickerValue = React.useRef(null);
|
|
6812
6893
|
var _useState = React.useState({
|
|
@@ -6815,48 +6896,76 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
6815
6896
|
}),
|
|
6816
6897
|
mountedPicker = _useState[0],
|
|
6817
6898
|
setMountedPicker = _useState[1];
|
|
6899
|
+
var _useState2 = React.useState(false),
|
|
6900
|
+
disableApply = _useState2[0],
|
|
6901
|
+
setDisableApply = _useState2[1];
|
|
6902
|
+
var DropdownHandlerRef = React.useRef(null);
|
|
6818
6903
|
var handleUpdateCallback = React.useCallback(function (data) {
|
|
6819
6904
|
pickerValue.current = data;
|
|
6820
6905
|
onUpdateCallback(data);
|
|
6821
|
-
|
|
6906
|
+
setDisableApply(areDatesEqual(selected, data));
|
|
6907
|
+
}, [onUpdateCallback, selected]);
|
|
6822
6908
|
var handleOnClose = React.useCallback(function () {
|
|
6823
6909
|
if (pickerValue.current && pickerValue.current !== selected) {
|
|
6824
6910
|
onCloseCallback(pickerValue.current);
|
|
6825
6911
|
}
|
|
6826
6912
|
}, [onCloseCallback, selected]);
|
|
6827
6913
|
var handleOnToggle = React.useCallback(function (isOpen) {
|
|
6828
|
-
if (pickerValue.current && pickerValue.current !== selected) {
|
|
6914
|
+
if (!hasApply && pickerValue.current && pickerValue.current !== selected) {
|
|
6829
6915
|
onToggleCallback(pickerValue.current, isOpen);
|
|
6830
6916
|
}
|
|
6831
|
-
if (
|
|
6832
|
-
|
|
6917
|
+
if (isOpen && !mountedPicker.isMount) {
|
|
6918
|
+
setMountedPicker(function (prev) {
|
|
6919
|
+
return _extends({}, prev, {
|
|
6920
|
+
isMount: true
|
|
6921
|
+
});
|
|
6922
|
+
});
|
|
6923
|
+
}
|
|
6924
|
+
}, [hasApply, mountedPicker.isMount, onToggleCallback, selected]);
|
|
6925
|
+
var handleOnCancel = React.useCallback(function () {
|
|
6926
|
+
var _DropdownHandlerRef$c;
|
|
6927
|
+
if (pickerValue.current && pickerValue.current !== selected) {
|
|
6928
|
+
pickerValue.current = selected === undefined ? null : selected;
|
|
6929
|
+
var validInitialValue = selected === null ? undefined : selected;
|
|
6833
6930
|
setMountedPicker({
|
|
6834
|
-
initialValue:
|
|
6835
|
-
isMount:
|
|
6931
|
+
initialValue: validInitialValue,
|
|
6932
|
+
isMount: false
|
|
6836
6933
|
});
|
|
6837
6934
|
}
|
|
6838
|
-
|
|
6935
|
+
onCancelCallback();
|
|
6936
|
+
(_DropdownHandlerRef$c = DropdownHandlerRef.current) === null || _DropdownHandlerRef$c === void 0 ? void 0 : _DropdownHandlerRef$c.cancelClose();
|
|
6937
|
+
}, [onCancelCallback, selected]);
|
|
6938
|
+
var handleOnApply = React.useCallback(function () {
|
|
6939
|
+
var _DropdownHandlerRef$c2;
|
|
6940
|
+
if (pickerValue.current && pickerValue.current !== selected) {
|
|
6941
|
+
onApplyCallback(pickerValue.current);
|
|
6942
|
+
}
|
|
6943
|
+
(_DropdownHandlerRef$c2 = DropdownHandlerRef.current) === null || _DropdownHandlerRef$c2 === void 0 ? void 0 : _DropdownHandlerRef$c2.cancelClose();
|
|
6944
|
+
}, [onApplyCallback, selected]);
|
|
6839
6945
|
React.useEffect(function () {
|
|
6840
|
-
var
|
|
6841
|
-
if (
|
|
6946
|
+
var canUnmount = true;
|
|
6947
|
+
if (canUnmount && selected === null && pickerValue.current !== null) {
|
|
6948
|
+
pickerValue.current = selected;
|
|
6842
6949
|
setMountedPicker({
|
|
6843
6950
|
initialValue: undefined,
|
|
6844
6951
|
isMount: false
|
|
6845
6952
|
});
|
|
6846
6953
|
}
|
|
6847
6954
|
return function () {
|
|
6848
|
-
|
|
6955
|
+
canUnmount = false;
|
|
6849
6956
|
};
|
|
6850
6957
|
}, [selected]);
|
|
6851
|
-
return React__default.createElement(Container$x, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({
|
|
6852
|
-
|
|
6853
|
-
buttonText: buttonText,
|
|
6854
|
-
disabled: disabled
|
|
6855
|
-
}, {
|
|
6958
|
+
return React__default.createElement(Container$x, Object.assign({}, props), React__default.createElement(FilterDropHandler, Object.assign({
|
|
6959
|
+
ref: DropdownHandlerRef,
|
|
6856
6960
|
minWidth: MIN_WIDTH,
|
|
6857
6961
|
minHeight: MIN_HEIGHT,
|
|
6858
6962
|
onCloseCallback: handleOnClose,
|
|
6859
|
-
onToggleOpenCallback: handleOnToggle
|
|
6963
|
+
onToggleOpenCallback: handleOnToggle,
|
|
6964
|
+
noCloseOnClickOutside: hasApply
|
|
6965
|
+
}, {
|
|
6966
|
+
buttonIcon: buttonIcon,
|
|
6967
|
+
buttonText: buttonText,
|
|
6968
|
+
disabled: disabled
|
|
6860
6969
|
}), React__default.createElement(FilterDropdownContainer, null, mountedPicker.isMount && React__default.createElement(DatePicker, Object.assign({}, {
|
|
6861
6970
|
dateMode: dateMode,
|
|
6862
6971
|
timeMode: timeMode,
|
|
@@ -6866,11 +6975,17 @@ var DropdownDatePicker = function DropdownDatePicker(_ref) {
|
|
|
6866
6975
|
timeZoneValueTitle: timeZoneValueTitle,
|
|
6867
6976
|
lang: lang,
|
|
6868
6977
|
availableRange: availableRange,
|
|
6869
|
-
contentDays: contentDays
|
|
6978
|
+
contentDays: contentDays,
|
|
6979
|
+
cancelText: cancelText,
|
|
6980
|
+
applyText: applyText,
|
|
6981
|
+
hasApply: hasApply
|
|
6870
6982
|
}, {
|
|
6871
6983
|
updateCallback: handleUpdateCallback,
|
|
6984
|
+
cancelCallback: handleOnCancel,
|
|
6985
|
+
applyCallback: handleOnApply,
|
|
6872
6986
|
hasEmptyValue: true,
|
|
6873
|
-
initialValue: mountedPicker.initialValue
|
|
6987
|
+
initialValue: mountedPicker.initialValue,
|
|
6988
|
+
disableApply: disableApply
|
|
6874
6989
|
})))));
|
|
6875
6990
|
};
|
|
6876
6991
|
|
|
@@ -7155,10 +7270,13 @@ var createDatePickers = function createDatePickers(datePickersConfig, filtersVal
|
|
|
7155
7270
|
handleDatePickers(value, datePicker.id);
|
|
7156
7271
|
};
|
|
7157
7272
|
var onToggleCallback = function onToggleCallback(value, isOpen) {
|
|
7158
|
-
if (isOpen) {
|
|
7273
|
+
if (!isOpen) {
|
|
7159
7274
|
handleDatePickers(value, datePicker.id);
|
|
7160
7275
|
}
|
|
7161
7276
|
};
|
|
7277
|
+
var onApplyCallback = function onApplyCallback(value) {
|
|
7278
|
+
handleDatePickers(value, datePicker.id);
|
|
7279
|
+
};
|
|
7162
7280
|
var disabled = getDisableValue(filtersValues, singleFilter, datePicker);
|
|
7163
7281
|
var foundPicker = filtersValues.find(function (filter) {
|
|
7164
7282
|
return filter.id === datePicker.id;
|
|
@@ -7172,6 +7290,7 @@ var createDatePickers = function createDatePickers(datePickersConfig, filtersVal
|
|
|
7172
7290
|
var newPicker = _extends({}, datePicker, {
|
|
7173
7291
|
onCloseCallback: onCloseCallback,
|
|
7174
7292
|
onToggleCallback: onToggleCallback,
|
|
7293
|
+
onApplyCallback: onApplyCallback,
|
|
7175
7294
|
disabled: disabled,
|
|
7176
7295
|
selected: foundPicker && (foundPicker.selected instanceof Date || isDateInterval(foundPicker.selected)) ? foundPicker.selected : null,
|
|
7177
7296
|
initialValue: validInitialValue
|
|
@@ -12190,33 +12309,27 @@ var Pagination = function Pagination(props) {
|
|
|
12190
12309
|
|
|
12191
12310
|
var _templateObject$1r, _templateObject2$1c, _templateObject3$15, _templateObject4$$, _templateObject5$V;
|
|
12192
12311
|
var Container$X = styled__default.div(_templateObject$1r || (_templateObject$1r = _taggedTemplateLiteralLoose([""])));
|
|
12193
|
-
var Title$7 = styled__default.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n
|
|
12194
|
-
|
|
12195
|
-
return typography.modal.title;
|
|
12196
|
-
});
|
|
12197
|
-
var MessageBox$1 = styled__default.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n ", ";\n margin: 28px 0;\n"])), function (_ref2) {
|
|
12198
|
-
var typography = _ref2.theme.typography;
|
|
12199
|
-
return typography.modal.basicContent;
|
|
12200
|
-
});
|
|
12312
|
+
var Title$7 = styled__default.div(_templateObject2$1c || (_templateObject2$1c = _taggedTemplateLiteralLoose(["\n font-size: 20px;\n font-weight: 400;\n text-align: left;\n text-shadow: 0px 0px 10px var(--white-a5);\n text-decoration: none;\n color: var(--grey-11);\n"])));
|
|
12313
|
+
var MessageBox$1 = styled__default.div(_templateObject3$15 || (_templateObject3$15 = _taggedTemplateLiteralLoose(["\n font-size: 14px;\n font-weight: 400;\n line-height: 25px;\n text-align: left;\n text-decoration: none;\n color: var(--grey-11);\n margin: 28px 0;\n"])));
|
|
12201
12314
|
var StyledButton$6 = styled__default(Button)(_templateObject4$$ || (_templateObject4$$ = _taggedTemplateLiteralLoose(["\n margin-left: 10px;\n"])));
|
|
12202
|
-
var ButtonsGroup$1 = styled__default.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n text-align: right;\n"])));
|
|
12203
|
-
var ConfirmationModal = function ConfirmationModal(
|
|
12204
|
-
var
|
|
12205
|
-
title =
|
|
12206
|
-
|
|
12207
|
-
message =
|
|
12208
|
-
|
|
12209
|
-
leftButtonText =
|
|
12210
|
-
|
|
12211
|
-
leftButtonDesign =
|
|
12212
|
-
|
|
12213
|
-
leftButtonCallback =
|
|
12214
|
-
|
|
12215
|
-
rightButtonDesign =
|
|
12216
|
-
|
|
12217
|
-
rightButtonText =
|
|
12218
|
-
|
|
12219
|
-
rightButtonCallback =
|
|
12315
|
+
var ButtonsGroup$1 = styled__default.div(_templateObject5$V || (_templateObject5$V = _taggedTemplateLiteralLoose(["\n text-align: right;\n display: flex;\n justify-content: flex-end;\n"])));
|
|
12316
|
+
var ConfirmationModal = function ConfirmationModal(_ref) {
|
|
12317
|
+
var _ref$title = _ref.title,
|
|
12318
|
+
title = _ref$title === void 0 ? '' : _ref$title,
|
|
12319
|
+
_ref$message = _ref.message,
|
|
12320
|
+
message = _ref$message === void 0 ? '' : _ref$message,
|
|
12321
|
+
_ref$leftButtonText = _ref.leftButtonText,
|
|
12322
|
+
leftButtonText = _ref$leftButtonText === void 0 ? 'submit' : _ref$leftButtonText,
|
|
12323
|
+
_ref$leftButtonDesign = _ref.leftButtonDesign,
|
|
12324
|
+
leftButtonDesign = _ref$leftButtonDesign === void 0 ? 'primary' : _ref$leftButtonDesign,
|
|
12325
|
+
_ref$leftButtonCallba = _ref.leftButtonCallback,
|
|
12326
|
+
leftButtonCallback = _ref$leftButtonCallba === void 0 ? function () {} : _ref$leftButtonCallba,
|
|
12327
|
+
_ref$rightButtonDesig = _ref.rightButtonDesign,
|
|
12328
|
+
rightButtonDesign = _ref$rightButtonDesig === void 0 ? 'secondary' : _ref$rightButtonDesig,
|
|
12329
|
+
_ref$rightButtonText = _ref.rightButtonText,
|
|
12330
|
+
rightButtonText = _ref$rightButtonText === void 0 ? 'cancel' : _ref$rightButtonText,
|
|
12331
|
+
_ref$rightButtonCallb = _ref.rightButtonCallback,
|
|
12332
|
+
rightButtonCallback = _ref$rightButtonCallb === void 0 ? function () {} : _ref$rightButtonCallb;
|
|
12220
12333
|
var _useModal = useModal(),
|
|
12221
12334
|
setModalOpen = _useModal.setModalOpen;
|
|
12222
12335
|
var handlePrimaryBtn = function handlePrimaryBtn() {
|
|
@@ -12308,7 +12421,7 @@ var _templateObject$1u, _templateObject2$1f, _templateObject3$17, _templateObjec
|
|
|
12308
12421
|
var Container$Y = styled__default.div(_templateObject$1u || (_templateObject$1u = _taggedTemplateLiteralLoose(["\n max-width: var(--max-content-width);\n margin-top: var(--utility-header-padding-top);\n padding: 0 var(--content-layout-padding-right) 0 var(--content-layout-padding-left);\n height: 48px;\n width: 100%;\n display: flex;\n"])));
|
|
12309
12422
|
var LeftArea = styled__default.div(_templateObject2$1f || (_templateObject2$1f = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: var(--columnPadding, 16px);\n flex: 1 0 0;\n"])));
|
|
12310
12423
|
var Breadcrumbs = styled__default.div(_templateObject3$17 || (_templateObject3$17 = _taggedTemplateLiteralLoose(["\n display: inline-flex;\n align-items: center;\n gap: 8px;\n"])));
|
|
12311
|
-
var Breadcrumb = styled__default.div(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n\n"])));
|
|
12424
|
+
var Breadcrumb = styled__default.div(_templateObject4$10 || (_templateObject4$10 = _taggedTemplateLiteralLoose(["\n flex: 1;\n display: flex;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n white-space: nowrap;\n\n"])));
|
|
12312
12425
|
var BreadcrumbIcon = styled__default.div(_templateObject5$W || (_templateObject5$W = _taggedTemplateLiteralLoose(["\n flex: 0;\n display: flex;\n align-items: center;\n\n > div {\n flex: 1;\n display: flex;\n justify-content: center;\n align-items: center;\n }\n"])));
|
|
12313
12426
|
var HomeIcon = styled__default(BreadcrumbIcon)(_templateObject6$H || (_templateObject6$H = _taggedTemplateLiteralLoose(["\n padding-bottom: 1px;\n svg path {\n transition: stroke var(--speed-normal) var(--easing-primary-out);\n }\n"])));
|
|
12314
12427
|
var BreadcrumbLink = styled__default(reactRouterDom.Link)(_templateObject7$D || (_templateObject7$D = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row;\n gap: 8px;\n flex: 1;\n color: var(--grey-10);\n font-family: var(--font-ui);\n text-decoration: none;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px; /* 100% */\n transition: color var(--speed-normal) var(--easing-primary-out);\n\n &:hover {\n color: var(--grey-12);\n ", " svg {\n path {\n stroke: var(--grey-12);\n }\n }\n }\n"])), HomeIcon);
|
|
@@ -13180,6 +13293,8 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13180
13293
|
_ref3$autoHideText = _ref3.autoHideText,
|
|
13181
13294
|
autoHideText = _ref3$autoHideText === void 0 ? "Auto-Hide" : _ref3$autoHideText,
|
|
13182
13295
|
supportUrl = _ref3.supportUrl,
|
|
13296
|
+
_ref3$supportText = _ref3.supportText,
|
|
13297
|
+
supportText = _ref3$supportText === void 0 ? "Help & Support" : _ref3$supportText,
|
|
13183
13298
|
_ref3$defaultMenuOpen = _ref3.defaultMenuOpen,
|
|
13184
13299
|
defaultMenuOpen = _ref3$defaultMenuOpen === void 0 ? true : _ref3$defaultMenuOpen,
|
|
13185
13300
|
_ref3$canAlwaysPin = _ref3.canAlwaysPin,
|
|
@@ -13253,7 +13368,7 @@ var MainMenu = function MainMenu(_ref3) {
|
|
|
13253
13368
|
compact: true,
|
|
13254
13369
|
isActive: false,
|
|
13255
13370
|
icon: 'Question',
|
|
13256
|
-
title:
|
|
13371
|
+
title: supportText,
|
|
13257
13372
|
href: supportUrl,
|
|
13258
13373
|
menuOpen: menuState.isMenuOpen
|
|
13259
13374
|
})), menuState.canPin ? React__default.createElement(FooterItemContainer, null, React__default.createElement(ContextItem, {
|
|
@@ -13343,7 +13458,7 @@ var _templateObject$1E, _templateObject2$1p, _templateObject3$1g, _templateObjec
|
|
|
13343
13458
|
var Container$12 = styled__default.div(_templateObject$1E || (_templateObject$1E = _taggedTemplateLiteralLoose(["\n padding: 16px 10px 14px 23px;\n display: flex;\n flex-direction: row;\n border-top: 1px solid var(--dividing-line);\n align-items: center;\n cursor: pointer;\n svg {\n margin-top: 7px;\n }\n"])));
|
|
13344
13459
|
var ColumnContainer = styled__default.div(_templateObject2$1p || (_templateObject2$1p = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n padding-left: 14px;\n align-items: flex-start;\n"])));
|
|
13345
13460
|
var Title$8 = styled__default.div(_templateObject3$1g || (_templateObject3$1g = _taggedTemplateLiteralLoose(["\n opacity: 0.76;\n font-family: var(--font-ui);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.34px;\n color: var(--grey-11);\n"])));
|
|
13346
|
-
var SubTitle$1 = styled__default.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n padding-top: 2px;\n opacity: 0.5;\n"])));
|
|
13461
|
+
var SubTitle$1 = styled__default.div(_templateObject4$19 || (_templateObject4$19 = _taggedTemplateLiteralLoose(["\n font-family: var(--font-ui);\n font-size: 10px;\n line-height: 12px;\n font-weight: 500;\n letter-spacing: 0.29px;\n color: var(--grey-11);\n padding-top: 2px;\n opacity: 0.5;\n"])));
|
|
13347
13462
|
var DrawerBottomMenu = function DrawerBottomMenu(_ref) {
|
|
13348
13463
|
var _ref$icon = _ref.icon,
|
|
13349
13464
|
icon = _ref$icon === void 0 ? 'Settings' : _ref$icon,
|
|
@@ -13383,11 +13498,27 @@ var FooterText = styled__default.div(_templateObject14$b || (_templateObject14$b
|
|
|
13383
13498
|
var icon = _ref3.icon;
|
|
13384
13499
|
return icon !== '' ? '136px;' : '164px;';
|
|
13385
13500
|
});
|
|
13501
|
+
var updateLanguageAttribute = function updateLanguageAttribute(initLanguage) {
|
|
13502
|
+
if (initLanguage) {
|
|
13503
|
+
document.documentElement.setAttribute("lang", initLanguage);
|
|
13504
|
+
return initLanguage;
|
|
13505
|
+
}
|
|
13506
|
+
var browserLang = navigator.language.split("-")[0];
|
|
13507
|
+
var htmlLang = document.documentElement.lang;
|
|
13508
|
+
if (!htmlLang) {
|
|
13509
|
+
document.documentElement.setAttribute("lang", browserLang);
|
|
13510
|
+
return browserLang;
|
|
13511
|
+
}
|
|
13512
|
+
return htmlLang;
|
|
13513
|
+
};
|
|
13386
13514
|
var UserMenu = function UserMenu(_ref4) {
|
|
13387
13515
|
var _ref4$hasLanguage = _ref4.hasLanguage,
|
|
13388
13516
|
hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
|
|
13389
13517
|
_ref4$selectedLanguag = _ref4.selectedLanguageText,
|
|
13390
13518
|
selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
|
|
13519
|
+
_ref4$languageOptions = _ref4.languageOptionsText,
|
|
13520
|
+
languageOptionsText = _ref4$languageOptions === void 0 ? 'LANGUAGE / 言語' : _ref4$languageOptions,
|
|
13521
|
+
selectedLangAttribute = _ref4.selectedLangAttribute,
|
|
13391
13522
|
_ref4$hasLogout = _ref4.hasLogout,
|
|
13392
13523
|
hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
|
|
13393
13524
|
_ref4$logoutLink = _ref4.logoutLink,
|
|
@@ -13451,6 +13582,9 @@ var UserMenu = function UserMenu(_ref4) {
|
|
|
13451
13582
|
closeOnClick();
|
|
13452
13583
|
}
|
|
13453
13584
|
}, [closeOnClick]);
|
|
13585
|
+
React.useEffect(function () {
|
|
13586
|
+
updateLanguageAttribute(selectedLangAttribute);
|
|
13587
|
+
}, [selectedLangAttribute]);
|
|
13454
13588
|
return React__default.createElement(React.Fragment, null, React__default.createElement(DrawerTop, null, hasCurrentUser ? React__default.createElement(CurrentUser, null, React__default.createElement(DrawerHeader, null, currentUserText), loggedInUser) : null, hasUserDrawerMeta ? React__default.createElement(NavigationContainer$1, null, userDrawerMeta === null || userDrawerMeta === void 0 ? void 0 : userDrawerMeta.map(function (item, key) {
|
|
13455
13589
|
return React__default.createElement(UserDrawerMeta, Object.assign({
|
|
13456
13590
|
onUserDrawerMetaClick: onUserDrawerMetaClick,
|
|
@@ -13479,7 +13613,7 @@ var UserMenu = function UserMenu(_ref4) {
|
|
|
13479
13613
|
onClickCallback: onThemeToggle
|
|
13480
13614
|
}), hasLanguage && React__default.createElement(DrawerBottomMenu, {
|
|
13481
13615
|
icon: 'Language',
|
|
13482
|
-
title:
|
|
13616
|
+
title: languageOptionsText,
|
|
13483
13617
|
subTitle: selectedLanguageText,
|
|
13484
13618
|
onClickCallback: onLanguageToggle
|
|
13485
13619
|
}), hasUserDrawerFooter ? React__default.createElement(FooterMeta, {
|
|
@@ -13633,17 +13767,17 @@ var Container$16 = styled__default.div(_templateObject$1J || (_templateObject$1J
|
|
|
13633
13767
|
var RightArea$1 = styled__default.div(_templateObject2$1u || (_templateObject2$1u = _taggedTemplateLiteralLoose(["\n display: flex;\n align-items: center;\n gap: 24px;\n height: 100%;\n"])));
|
|
13634
13768
|
var SearchBar = styled__default.div(_templateObject3$1l || (_templateObject3$1l = _taggedTemplateLiteralLoose(["\n flex: 0 1 500px;\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 8px;\n"])));
|
|
13635
13769
|
var IconWrapper$4 = styled__default.div(_templateObject4$1d || (_templateObject4$1d = _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"])));
|
|
13636
|
-
var SearchInput = styled__default.input(_templateObject5$16 || (_templateObject5$16 = _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
|
|
13770
|
+
var SearchInput = styled__default.input(_templateObject5$16 || (_templateObject5$16 = _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\n &:lang(ja)::placeholder {\n font-style: normal;\n };\n"])), removeAutoFillStyle);
|
|
13637
13771
|
var ButtonArea = styled__default.div(_templateObject6$S || (_templateObject6$S = _taggedTemplateLiteralLoose(["\n height: inherit;\n display: flex;\n gap: 0;\n"])));
|
|
13638
13772
|
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"])));
|
|
13639
13773
|
var DrawerToggle = styled__default.button.attrs({
|
|
13640
13774
|
type: 'button'
|
|
13641
|
-
})(_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
|
|
13775
|
+
})(_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) {
|
|
13642
13776
|
var isActive = _ref.isActive;
|
|
13643
13777
|
return isActive && styled.css(_templateObject9$u || (_templateObject9$u = _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);
|
|
13644
13778
|
});
|
|
13645
13779
|
var DrawerPortalWrapper = styled__default.div(_templateObject10$n || (_templateObject10$n = _taggedTemplateLiteralLoose([""])));
|
|
13646
|
-
var Drawer = styled__default.div(_templateObject11$h || (_templateObject11$h = _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
|
|
13780
|
+
var Drawer = styled__default.div(_templateObject11$h || (_templateObject11$h = _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) {
|
|
13647
13781
|
var baseWidth = _ref2.baseWidth;
|
|
13648
13782
|
return baseWidth ? baseWidth : "200px";
|
|
13649
13783
|
}, function (_ref3) {
|
|
@@ -13658,6 +13792,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13658
13792
|
hasLanguage = _ref4$hasLanguage === void 0 ? false : _ref4$hasLanguage,
|
|
13659
13793
|
_ref4$selectedLanguag = _ref4.selectedLanguageText,
|
|
13660
13794
|
selectedLanguageText = _ref4$selectedLanguag === void 0 ? '' : _ref4$selectedLanguag,
|
|
13795
|
+
languageOptionsText = _ref4.languageOptionsText,
|
|
13796
|
+
selectedLangAttribute = _ref4.selectedLangAttribute,
|
|
13661
13797
|
_ref4$hasLogout = _ref4.hasLogout,
|
|
13662
13798
|
hasLogout = _ref4$hasLogout === void 0 ? true : _ref4$hasLogout,
|
|
13663
13799
|
_ref4$logoutLink = _ref4.logoutLink,
|
|
@@ -13759,6 +13895,8 @@ var TopBar = function TopBar(_ref4) {
|
|
|
13759
13895
|
onLogout: onLogout,
|
|
13760
13896
|
onLanguageToggle: onLanguageToggle,
|
|
13761
13897
|
selectedLanguageText: selectedLanguageText,
|
|
13898
|
+
languageOptionsText: languageOptionsText,
|
|
13899
|
+
selectedLangAttribute: selectedLangAttribute,
|
|
13762
13900
|
hasSwitchTheme: hasSwitchTheme,
|
|
13763
13901
|
isLightMode: isLightMode,
|
|
13764
13902
|
switchThemeText: switchThemeText,
|
|
@@ -13891,7 +14029,7 @@ var Title$a = styled__default.div(_templateObject4$1f || (_templateObject4$1f =
|
|
|
13891
14029
|
var active = _ref3.active;
|
|
13892
14030
|
return active ? 'var(--primary-11)' : 'var(--grey-11)';
|
|
13893
14031
|
});
|
|
13894
|
-
var SubTitle$2 = styled__default.div(_templateObject5$17 || (_templateObject5$17 = _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) {
|
|
14032
|
+
var SubTitle$2 = styled__default.div(_templateObject5$17 || (_templateObject5$17 = _taggedTemplateLiteralLoose(["\n font-size: 12px;\n font-family: ", ";\n font-style: italic;\n &:lang(ja) {\n font-style: normal;\n }\n color: var(--grey-a10);\n flex-shrink: 0;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_ref4) {
|
|
13895
14033
|
var theme = _ref4.theme;
|
|
13896
14034
|
return theme.fontFamily.data;
|
|
13897
14035
|
});
|
|
@@ -14003,6 +14141,8 @@ var ItemWrapper = styled__default.div(_templateObject2$1B || (_templateObject2$1
|
|
|
14003
14141
|
var MobileMenu = function MobileMenu(_ref) {
|
|
14004
14142
|
var content = _ref.content,
|
|
14005
14143
|
supportUrl = _ref.supportUrl,
|
|
14144
|
+
_ref$supportText = _ref.supportText,
|
|
14145
|
+
supportText = _ref$supportText === void 0 ? "Help & Support" : _ref$supportText,
|
|
14006
14146
|
closeId = _ref.closeId;
|
|
14007
14147
|
var _useState = React.useState(0),
|
|
14008
14148
|
focusedContext = _useState[0],
|
|
@@ -14041,7 +14181,7 @@ var MobileMenu = function MobileMenu(_ref) {
|
|
|
14041
14181
|
compact: true,
|
|
14042
14182
|
isActive: false,
|
|
14043
14183
|
icon: 'Question',
|
|
14044
|
-
title:
|
|
14184
|
+
title: supportText,
|
|
14045
14185
|
href: supportUrl,
|
|
14046
14186
|
menuOpen: true,
|
|
14047
14187
|
onClickCallback: handleCloseMenu
|
|
@@ -14072,7 +14212,7 @@ var MobileLogoLink = function MobileLogoLink(_ref) {
|
|
|
14072
14212
|
|
|
14073
14213
|
var _excluded$N = ["closeId", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "userSubmenu", "userDrawerBespoke", "loggedInUser", "onLogout", "onLanguageToggle"];
|
|
14074
14214
|
var _templateObject$1U;
|
|
14075
|
-
var Container$1d = styled__default.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n
|
|
14215
|
+
var Container$1d = styled__default.div(_templateObject$1U || (_templateObject$1U = _taggedTemplateLiteralLoose(["\n background: var(--global-element-background);\n\n z-index: 100;\n display: flex;\n flex-direction: column;\n"])));
|
|
14076
14216
|
var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
14077
14217
|
var closeId = _ref.closeId,
|
|
14078
14218
|
hasLanguage = _ref.hasLanguage,
|
|
@@ -14105,7 +14245,7 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
|
|
|
14105
14245
|
})));
|
|
14106
14246
|
};
|
|
14107
14247
|
|
|
14108
|
-
var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "onLogout", "onLanguageToggle"];
|
|
14248
|
+
var _excluded$O = ["content", "home", "logoMark", "supportUrl", "defaultMenuOpen", "closeText", "hasLanguage", "hasLogout", "logoutLink", "hasCurrentUser", "hasNotifications", "userSubmenu", "userDrawerBespoke", "loggedInUser", "notificationsHistory", "customDrawer", "supportText", "onLogout", "onLanguageToggle"];
|
|
14109
14249
|
var _templateObject$1V, _templateObject2$1D;
|
|
14110
14250
|
var CLOSE_ID = 'closeMenu';
|
|
14111
14251
|
var NOTI_TAB = 'notifications';
|
|
@@ -14132,6 +14272,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
|
|
|
14132
14272
|
loggedInUser = _ref.loggedInUser,
|
|
14133
14273
|
notificationsHistory = _ref.notificationsHistory,
|
|
14134
14274
|
customDrawer = _ref.customDrawer,
|
|
14275
|
+
supportText = _ref.supportText,
|
|
14135
14276
|
onLogout = _ref.onLogout,
|
|
14136
14277
|
onLanguageToggle = _ref.onLanguageToggle,
|
|
14137
14278
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$O);
|
|
@@ -14182,6 +14323,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
|
|
|
14182
14323
|
}, React__default.createElement(MobileMenu, Object.assign({}, {
|
|
14183
14324
|
content: content,
|
|
14184
14325
|
supportUrl: supportUrl,
|
|
14326
|
+
supportText: supportText,
|
|
14185
14327
|
defaultMenuOpen: defaultMenuOpen
|
|
14186
14328
|
}, {
|
|
14187
14329
|
closeId: CLOSE_ID
|
|
@@ -14192,7 +14334,7 @@ var MobileNavbar = function MobileNavbar(_ref) {
|
|
|
14192
14334
|
})))));
|
|
14193
14335
|
};
|
|
14194
14336
|
|
|
14195
|
-
var _excluded$P = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "onMenuToggle"];
|
|
14337
|
+
var _excluded$P = ["content", "home", "openWidth", "logoMark", "logoText", "supportUrl", "defaultMenuOpen", "canAlwaysPin", "paddingOverride", "maxWidth", "legacyLayout", "children", "keepOpenText", "autoHideText", "supportText", "onMenuToggle"];
|
|
14196
14338
|
var GlobalUI = function GlobalUI(_ref) {
|
|
14197
14339
|
var content = _ref.content,
|
|
14198
14340
|
home = _ref.home,
|
|
@@ -14206,6 +14348,9 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14206
14348
|
maxWidth = _ref.maxWidth,
|
|
14207
14349
|
legacyLayout = _ref.legacyLayout,
|
|
14208
14350
|
children = _ref.children,
|
|
14351
|
+
keepOpenText = _ref.keepOpenText,
|
|
14352
|
+
autoHideText = _ref.autoHideText,
|
|
14353
|
+
supportText = _ref.supportText,
|
|
14209
14354
|
onMenuToggle = _ref.onMenuToggle,
|
|
14210
14355
|
props = _objectWithoutPropertiesLoose(_ref, _excluded$P);
|
|
14211
14356
|
var _useBreakpoints = useBreakpoints(),
|
|
@@ -14219,7 +14364,10 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14219
14364
|
supportUrl: supportUrl,
|
|
14220
14365
|
defaultMenuOpen: defaultMenuOpen,
|
|
14221
14366
|
canAlwaysPin: canAlwaysPin,
|
|
14222
|
-
onMenuToggle: onMenuToggle
|
|
14367
|
+
onMenuToggle: onMenuToggle,
|
|
14368
|
+
keepOpenText: keepOpenText,
|
|
14369
|
+
autoHideText: autoHideText,
|
|
14370
|
+
supportText: supportText
|
|
14223
14371
|
})), React__default.createElement(MainContainer, null, React__default.createElement(TopBar, Object.assign({}, _extends({}, props))), React__default.createElement(ContentArea, Object.assign({}, {
|
|
14224
14372
|
maxWidth: maxWidth,
|
|
14225
14373
|
paddingOverride: paddingOverride,
|
|
@@ -14229,7 +14377,8 @@ var GlobalUI = function GlobalUI(_ref) {
|
|
|
14229
14377
|
home: home,
|
|
14230
14378
|
logoMark: logoMark,
|
|
14231
14379
|
supportUrl: supportUrl,
|
|
14232
|
-
defaultMenuOpen: defaultMenuOpen
|
|
14380
|
+
defaultMenuOpen: defaultMenuOpen,
|
|
14381
|
+
supportText: supportText
|
|
14233
14382
|
}, props))), React__default.createElement(ContentArea, null, children));
|
|
14234
14383
|
};
|
|
14235
14384
|
|