@desynova-digital/components 9.3.20 → 9.3.22
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/atoms/cardV2/contentV2.js +53 -27
- package/atoms/icon/icons.json +21 -0
- package/atoms/inputText/inputText.js +1 -1
- package/molecules/table/table.js +46 -8
- package/package.json +2 -2
|
@@ -17,7 +17,7 @@ var _cardV = require("./cardV2");
|
|
|
17
17
|
var _icon = _interopRequireDefault(require("../../atoms/icon"));
|
|
18
18
|
var _tokens = require("@desynova-digital/tokens");
|
|
19
19
|
var _statusV = _interopRequireDefault(require("../../../tokens/statusV2"));
|
|
20
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
|
|
20
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject0;
|
|
21
21
|
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
|
|
22
22
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
23
23
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
@@ -31,18 +31,37 @@ var TitleStyles = (0, _styledComponents["default"])(function (props) {
|
|
|
31
31
|
var isTitleClick = _ref.isTitleClick;
|
|
32
32
|
return isTitleClick ? 'pointer' : 'default';
|
|
33
33
|
});
|
|
34
|
-
var
|
|
35
|
-
var
|
|
36
|
-
var
|
|
37
|
-
|
|
38
|
-
|
|
34
|
+
var FolderNameRowStyles = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n align-items: center;\n gap: 6px;\n width: 100%;\n min-width: 0;\n margin-top: 4px;\n"])));
|
|
35
|
+
var FolderNameTextStyles = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-block;\n min-width: 0;\n flex: 1;\n color: ", ";\n font-family: SFUIText-Medium;\n font-size: 12px;\n font-style: normal;\n font-weight: 500;\n line-height: 12px;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n"])), function (_ref2) {
|
|
36
|
+
var _colors$theme, _colors$theme$card;
|
|
37
|
+
var theme = _ref2.theme;
|
|
38
|
+
return ((_colors$theme = _tokens.colors[theme]) === null || _colors$theme === void 0 ? void 0 : (_colors$theme$card = _colors$theme.card) === null || _colors$theme$card === void 0 ? void 0 : _colors$theme$card.themeColor) || '#00cec6';
|
|
39
|
+
});
|
|
40
|
+
var FolderNameBadgeStyles = _styledComponents["default"].span(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n padding: 3px 6px;\n border-radius: 4px;\n background: ", ";\n border: 1px solid ", ";\n color: ", ";\n text-align: center;\n font-family: 'SFUIText-Regular';\n font-size: 10px;\n line-height: 10px;\n font-style: normal;\n font-weight: 400;\n"])), function (_ref3) {
|
|
41
|
+
var _colors$theme2, _colors$theme2$card;
|
|
42
|
+
var theme = _ref3.theme;
|
|
43
|
+
return "".concat(((_colors$theme2 = _tokens.colors[theme]) === null || _colors$theme2 === void 0 ? void 0 : (_colors$theme2$card = _colors$theme2.card) === null || _colors$theme2$card === void 0 ? void 0 : _colors$theme2$card.themeColor) || '#00cec6', "1A");
|
|
44
|
+
}, function (_ref4) {
|
|
45
|
+
var _colors$theme3, _colors$theme3$card;
|
|
46
|
+
var theme = _ref4.theme;
|
|
47
|
+
return ((_colors$theme3 = _tokens.colors[theme]) === null || _colors$theme3 === void 0 ? void 0 : (_colors$theme3$card = _colors$theme3.card) === null || _colors$theme3$card === void 0 ? void 0 : _colors$theme3$card.themeColor) || '#00cec6';
|
|
48
|
+
}, function (_ref5) {
|
|
49
|
+
var _colors$theme4, _colors$theme4$card;
|
|
50
|
+
var theme = _ref5.theme;
|
|
51
|
+
return ((_colors$theme4 = _tokens.colors[theme]) === null || _colors$theme4 === void 0 ? void 0 : (_colors$theme4$card = _colors$theme4.card) === null || _colors$theme4$card === void 0 ? void 0 : _colors$theme4$card.themeColor) || '#00cec6';
|
|
52
|
+
});
|
|
53
|
+
var ContentBody = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n"])));
|
|
54
|
+
var ContentStyles = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n padding: ", ";\n background-color: ", ";\n border-radius: 0 0 10px 10px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n &.no-meta-row {\n ", "\n }\n\n &.no-meta-row .footer-row {\n margin-top: 10px;\n }\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: ' ';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ", ";\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container {\n position: absolute;\n bottom: 100%;\n margin-right: 110px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n padding-bottom: 10px;\n\n .overlappig-popup {\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding: 12px;\n width: 300px;\n z-index: 10;\n\n .popup-pointer {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid ", ";\n\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n\n .overlapping-episod-list-container {\n max-height: 165px;\n overflow: scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n\n .divider {\n height: 1px;\n width: 100%;\n margin: 10px 0;\n background: #303f51;\n }\n .header-container {\n display: flex;\n position: relative;\n .thumbnail {\n width: 100px;\n height: 55px;\n background-size: cover !important;\n background-repeat: no-repeat !important;\n margin-right: 10px;\n border-radius: 2px;\n }\n .episod-title {\n font-size: 12px;\n margin-bottom: 8px;\n max-width: 180px;\n line-height: 14px;\n color: #fff;\n }\n .episod-details {\n font-size: 10px;\n color: #afb2ba;\n }\n }\n\n .overlappig-popup-title {\n font-size: 12px;\n line-height: 12px;\n color: #afb2ba;\n margin-bottom: 15px;\n }\n }\n }\n\n :hover {\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px;\n }\n }\n .meta-row {\n display: flex;\n align-items: center;\n margin-top: 6px;\n cursor: default;\n column-gap: 10px\n }\n .category-count {\n margin-top: 6px;\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 10px;\n line-height: 12px;\n }\n .meta-badge {\n ", "\n font-size: 8px;\n line-height: 12px;\n padding: 1px 3px;\n border-radius: 4px;\n font-family: SFUIText-Regular;\n min-height: 12px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .meta-text {\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 10px;\n font-style: normal;\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .footer-row {\n display: flex;\n align-items: center;\n margin-top: 16px;\n column-gap: 12px;\n position: relative;\n cursor: default;\n }\n .meta-row + .footer-row {\n margin-top: 10px;\n }\n .footer-text {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n }\n .footer-icons {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .footer-icon {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 12px;\n display: inline-flex;\n align-items: center;\n }\n .footer-text-language {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n text-transform: capitalize;\n }\n .chip-row {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 5px;\n margin-top: 10px;\n overflow: hidden;\n }\n .chip {\n display: flex;\n min-width: 0;\n padding: 4px;\n justify-content: center;\n align-items: center;\n gap: 10px;\n border-radius: 3px;\n background: ", ";\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n overflow: hidden;\n text-overflow: ellipsis;\n text-transform: uppercase;\n white-space: nowrap;\n }\n"])), function (_ref6) {
|
|
55
|
+
var type = _ref6.type,
|
|
56
|
+
width = _ref6.width,
|
|
57
|
+
match_details = _ref6.match_details;
|
|
39
58
|
return type === 'search' || width === 'sm' || (match_details === null || match_details === void 0 ? void 0 : match_details.available) === true ? 'auto' : width === 'md' ? '74px' : '90px';
|
|
40
|
-
}, function (
|
|
41
|
-
var width =
|
|
59
|
+
}, function (_ref7) {
|
|
60
|
+
var width = _ref7.width;
|
|
42
61
|
return width === 'sm' ? 'auto' : width === 'md' ? '125px' : '222px';
|
|
43
|
-
}, function (
|
|
44
|
-
var type =
|
|
45
|
-
width =
|
|
62
|
+
}, function (_ref8) {
|
|
63
|
+
var type = _ref8.type,
|
|
64
|
+
width = _ref8.width;
|
|
46
65
|
if (width === 'sm' && type === 'search') {
|
|
47
66
|
return '0px 13px';
|
|
48
67
|
}
|
|
@@ -50,34 +69,34 @@ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templ
|
|
|
50
69
|
return '13px 16px';
|
|
51
70
|
}
|
|
52
71
|
return '13px 15px';
|
|
53
|
-
}, function (
|
|
54
|
-
var bgColor =
|
|
55
|
-
type =
|
|
72
|
+
}, function (_ref9) {
|
|
73
|
+
var bgColor = _ref9.bgColor,
|
|
74
|
+
type = _ref9.type;
|
|
56
75
|
return type === 'search' ? 'transparent' : bgColor === 'secondary' && type !== 'search' ? '#0C141D' : '#15212F';
|
|
57
|
-
}, function (
|
|
58
|
-
var type =
|
|
59
|
-
width =
|
|
60
|
-
match_details =
|
|
76
|
+
}, function (_ref0) {
|
|
77
|
+
var type = _ref0.type,
|
|
78
|
+
width = _ref0.width,
|
|
79
|
+
match_details = _ref0.match_details;
|
|
61
80
|
return type === 'search' || width === 'sm' || (match_details === null || match_details === void 0 ? void 0 : match_details.available) === true ? 'height: auto;' : width === 'md' ? 'height: 62px;' : '';
|
|
62
81
|
}, function (props) {
|
|
63
82
|
return _tokens.colors[props.theme].filter.rgbthemeColor;
|
|
64
83
|
}, function (props) {
|
|
65
84
|
return _tokens.colors[props.theme].card.themeColor;
|
|
66
|
-
}, function (
|
|
67
|
-
var upload_type =
|
|
85
|
+
}, function (_ref1) {
|
|
86
|
+
var upload_type = _ref1.upload_type;
|
|
68
87
|
var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
|
|
69
88
|
var color = isRC ? '#ff6327' : '#00CEC6';
|
|
70
89
|
var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
|
|
71
|
-
return (0, _styledComponents.css)(
|
|
72
|
-
}, function (
|
|
73
|
-
var upload_type =
|
|
90
|
+
return (0, _styledComponents.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n border: 1px solid ", ";\n color: ", ";\n background-color: ", ";\n "])), color, color, bg);
|
|
91
|
+
}, function (_ref10) {
|
|
92
|
+
var upload_type = _ref10.upload_type;
|
|
74
93
|
return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
|
|
75
94
|
}, function (props) {
|
|
76
95
|
return _tokens.colors[props.theme].tag.background;
|
|
77
96
|
}, function (props) {
|
|
78
97
|
return _tokens.colors[props.theme].card.themeColor;
|
|
79
98
|
});
|
|
80
|
-
var SeasonEpisodeContainer = _styledComponents["default"].span(
|
|
99
|
+
var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject0 || (_templateObject0 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-shrink: 0;\n padding: 3px 4px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: 4px;\n background: rgba(255, 255, 255, 0.12);\n border: 1px solid rgba(255, 255, 255, 0.08);\n color: #fff;\n text-align: center;\n font-family: 'SFUIText-Regular';\n font-size: 10px;\n line-height: 10px;\n font-style: normal;\n font-weight: 400;\n height: auto;\n width: auto;\n margin-left: 6px;\n box-sizing: border-box;\n span {\n padding: 0px 2px;\n }\n"])));
|
|
81
100
|
var formatCreationDate = function formatCreationDate(creation) {
|
|
82
101
|
if (creation === null || creation === undefined || creation === '') return '';
|
|
83
102
|
var rawValue = String(creation).trim();
|
|
@@ -117,7 +136,9 @@ var ContentV2 = function ContentV2(props) {
|
|
|
117
136
|
extension = props.extension,
|
|
118
137
|
season_id = props.season_id,
|
|
119
138
|
isAdobe = props.isAdobe,
|
|
120
|
-
match_details = props.match_details
|
|
139
|
+
match_details = props.match_details,
|
|
140
|
+
data_type = props.data_type,
|
|
141
|
+
name = props.name;
|
|
121
142
|
var shouldShowMatchFields = (match_details === null || match_details === void 0 ? void 0 : match_details.available) === true;
|
|
122
143
|
var displayChips = shouldShowMatchFields ? ((match_details === null || match_details === void 0 ? void 0 : match_details.top_fields) || []).map(function (item) {
|
|
123
144
|
return item === null || item === void 0 ? void 0 : item.field;
|
|
@@ -229,7 +250,7 @@ var ContentV2 = function ContentV2(props) {
|
|
|
229
250
|
}, /*#__PURE__*/_react["default"].createElement("span", {
|
|
230
251
|
className: "title-text",
|
|
231
252
|
title: title || h1
|
|
232
|
-
}, title || h1), resolvedEpisodeLabel ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, resolvedEpisodeLabel) : null, show_page_id && asset_type !== 'sports' && !isAdobe ? /*#__PURE__*/_react["default"].createElement("span", {
|
|
253
|
+
}, title || h1), resolvedEpisodeLabel && data_type !== 'folder' ? /*#__PURE__*/_react["default"].createElement(SeasonEpisodeContainer, null, resolvedEpisodeLabel) : null, show_page_id && asset_type !== 'sports' && !isAdobe ? /*#__PURE__*/_react["default"].createElement("span", {
|
|
233
254
|
title: "Open Page",
|
|
234
255
|
className: "files-associated-icon",
|
|
235
256
|
onMouseEnter: function onMouseEnter() {
|
|
@@ -243,7 +264,12 @@ var ContentV2 = function ContentV2(props) {
|
|
|
243
264
|
width: 8,
|
|
244
265
|
height: 8,
|
|
245
266
|
color: isFilesIconHovered ? '#00CEC6' : '#AFB2BA'
|
|
246
|
-
})) : null)
|
|
267
|
+
})) : null), data_type === 'folder' && (name === null || name === void 0 ? void 0 : name.length) > 0 ? /*#__PURE__*/_react["default"].createElement(FolderNameRowStyles, null, /*#__PURE__*/_react["default"].createElement(FolderNameTextStyles, {
|
|
268
|
+
theme: props.theme,
|
|
269
|
+
title: name
|
|
270
|
+
}, name), (resolvedEpisodeLabel === null || resolvedEpisodeLabel === void 0 ? void 0 : resolvedEpisodeLabel.length) > 0 && /*#__PURE__*/_react["default"].createElement(FolderNameBadgeStyles, {
|
|
271
|
+
theme: props.theme
|
|
272
|
+
}, resolvedEpisodeLabel)) : null), (resolvedEpisodeLabel || version_label || category_label || date_count_label || identifier_label || isSegment || extension || creation) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, (version_label || category_label) && /*#__PURE__*/_react["default"].createElement("div", {
|
|
247
273
|
className: "meta-row"
|
|
248
274
|
}, version_label && /*#__PURE__*/_react["default"].createElement("span", {
|
|
249
275
|
className: "meta-badge"
|
package/atoms/icon/icons.json
CHANGED
|
@@ -533,6 +533,27 @@
|
|
|
533
533
|
"width": 18,
|
|
534
534
|
"height": 16
|
|
535
535
|
},
|
|
536
|
+
"cart": {
|
|
537
|
+
"paths": [
|
|
538
|
+
"M2.98463 12.6181C2.72981 12.3635 2.6024 12.0575 2.6024 11.7C2.6024 11.3425 2.72981 11.0365 2.98463 10.7819C3.23945 10.5273 3.54578 10.4 3.90361 10.4C4.26144 10.4 4.56776 10.5273 4.82258 10.7819C5.0774 11.0365 5.20481 11.3425 5.20481 11.7C5.20481 12.0575 5.0774 12.3635 4.82258 12.6181C4.56776 12.8727 4.26144 13 3.90361 13C3.54578 13 3.23945 12.8727 2.98463 12.6181ZM9.49064 12.6181C9.23582 12.3635 9.10842 12.0575 9.10842 11.7C9.10842 11.3425 9.23582 11.0365 9.49064 10.7819C9.74546 10.5273 10.0518 10.4 10.4096 10.4C10.7674 10.4 11.0738 10.5273 11.3286 10.7819C11.5834 11.0365 11.7108 11.3425 11.7108 11.7C11.7108 12.0575 11.5834 12.3635 11.3286 12.6181C11.0738 12.8727 10.7674 13 10.4096 13C10.0518 13 9.74546 12.8727 9.49064 12.6181ZM3.3506 2.6L4.91204 5.85H9.46625L11.2554 2.6H3.3506ZM2.73252 1.3H12.3289C12.5783 1.3 12.768 1.41104 12.8982 1.63312C13.0283 1.85521 13.0337 2.08 12.9144 2.3075L10.6048 6.4675C10.4855 6.68417 10.3256 6.85208 10.125 6.97125C9.92438 7.09042 9.7048 7.15 9.46625 7.15H4.61927L3.90361 8.45H11.7108V9.75H3.90361C3.41566 9.75 3.04698 9.53604 2.79758 9.10812C2.54819 8.68021 2.53734 8.255 2.76505 7.8325L3.64337 6.24L1.3012 1.3H0V0H2.11445L2.73252 1.3Z"
|
|
539
|
+
],
|
|
540
|
+
"width": 13,
|
|
541
|
+
"height": 13
|
|
542
|
+
},
|
|
543
|
+
"remove-cart-item": {
|
|
544
|
+
"paths": [
|
|
545
|
+
"M6.33333 12L5.4 11.0667L7.76667 8.7L5.4 6.33333L6.33333 5.4L8.7 7.76667L11.0667 5.4L12 6.33333L9.63333 8.7L12 11.0667L11.0667 12L8.7 9.63333L6.33333 12ZM2.66667 12V10.6667H4V12H2.66667ZM1.33333 1.33333H0C0 0.966667 0.130556 0.652778 0.391667 0.391667C0.652778 0.130556 0.966667 0 1.33333 0V1.33333ZM2.66667 1.33333V0H4V1.33333H2.66667ZM5.33333 1.33333V0H6.66667V1.33333H5.33333ZM8 1.33333V0H9.33333V1.33333H8ZM10.6667 1.33333V0C11.0333 0 11.3472 0.130556 11.6083 0.391667C11.8694 0.652778 12 0.966667 12 1.33333H10.6667ZM1.33333 10.6667V12C0.966667 12 0.652778 11.8694 0.391667 11.6083C0.130556 11.3472 0 11.0333 0 10.6667H1.33333ZM0 9.33333V8H1.33333V9.33333H0ZM0 6.66667V5.33333H1.33333V6.66667H0ZM0 4V2.66667H1.33333V4H0ZM10.6667 4V2.66667H12V4H10.6667Z"
|
|
546
|
+
],
|
|
547
|
+
"width": 12,
|
|
548
|
+
"height": 12
|
|
549
|
+
},
|
|
550
|
+
"remove-cart-all": {
|
|
551
|
+
"paths": [
|
|
552
|
+
"M10.7586 11.1724V9.51724H14.069V11.1724H10.7586ZM10.7586 4.55172V2.89655H16.5517V4.55172H10.7586ZM10.7586 7.86207V6.2069H15.7241V7.86207H10.7586ZM0.827586 2.89655H0V1.24138H3.31035V0H6.62069V1.24138H9.93104V2.89655H9.10345V10.3448C9.10345 10.8 8.94138 11.1897 8.61724 11.5138C8.2931 11.8379 7.90345 12 7.44828 12H2.48276C2.02759 12 1.63793 11.8379 1.31379 11.5138C0.989655 11.1897 0.827586 10.8 0.827586 10.3448V2.89655ZM2.48276 2.89655V10.3448H7.44828V2.89655H2.48276Z"
|
|
553
|
+
],
|
|
554
|
+
"width": 16,
|
|
555
|
+
"height": 12
|
|
556
|
+
},
|
|
536
557
|
"archive": {
|
|
537
558
|
"paths": [
|
|
538
559
|
"M9.744 1.239L8.972.306A.806.806 0 0 0 8.333 0H1.667a.826.826 0 0 0-.645.306l-.766.933A1.088 1.088 0 0 0 0 1.944V8.89C0 9.5.5 10 1.111 10H8.89C9.5 10 10 9.5 10 8.889V1.944c0-.266-.094-.516-.256-.705zM5 8.056L1.944 5H3.89V3.889H6.11V5h1.945L5 8.056zM1.178 1.11l.45-.555h6.666l.523.555h-7.64z"
|
|
@@ -80,7 +80,7 @@ var _InputText = function InputText(_ref) {
|
|
|
80
80
|
value: props.value,
|
|
81
81
|
theme: theme,
|
|
82
82
|
error: props.error
|
|
83
|
-
}, errorMesssage
|
|
83
|
+
}, errorMesssage) : "", maxLength && showLengthCount && /*#__PURE__*/_react["default"].createElement(CountWrappper, null, props.value.length, "/", maxLength), type == "password" || passwordButton ? /*#__PURE__*/_react["default"].createElement(PasswordToggleButton, {
|
|
84
84
|
type: "button",
|
|
85
85
|
className: "password-toggle",
|
|
86
86
|
onClick: function onClick() {
|
package/molecules/table/table.js
CHANGED
|
@@ -377,7 +377,8 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
377
377
|
});
|
|
378
378
|
var allRegularColumns = (0, _toConsumableArray2["default"])(_this.columns);
|
|
379
379
|
_this.defaultShowColumns = (0, _toConsumableArray2["default"])(allRegularColumns);
|
|
380
|
-
|
|
380
|
+
// Only truncated columns belong in the expanded row; avoid duplicating visible fields.
|
|
381
|
+
_this.extraColumns = [];
|
|
381
382
|
var maxRegularColumns = _this.props.showActions ? _this.props.maxShowNoOfColumns - 1 : _this.props.maxShowNoOfColumns;
|
|
382
383
|
var needsTruncation = _this.columns.length > maxRegularColumns;
|
|
383
384
|
if (needsTruncation) {
|
|
@@ -387,7 +388,9 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
387
388
|
(_this$defaultShowColu2 = _this.defaultShowColumns).push.apply(_this$defaultShowColu2, (0, _toConsumableArray2["default"])(_this.actionIconCol));
|
|
388
389
|
}
|
|
389
390
|
_this.defaultShowColumns.push(extraColumnsSchema);
|
|
390
|
-
|
|
391
|
+
|
|
392
|
+
// Keep overflow fields in schema order, after the main row's column limit.
|
|
393
|
+
_this.extraColumns = allRegularColumns.slice(maxRegularColumns);
|
|
391
394
|
} else if (_this.props.showActions && _this.actionIconCol.length > 0) {
|
|
392
395
|
var _this$defaultShowColu3;
|
|
393
396
|
(_this$defaultShowColu3 = _this.defaultShowColumns).push.apply(_this$defaultShowColu3, (0, _toConsumableArray2["default"])(_this.actionIconCol));
|
|
@@ -548,21 +551,29 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
548
551
|
width: "100%"
|
|
549
552
|
});
|
|
550
553
|
}
|
|
551
|
-
|
|
554
|
+
// Plain overflow fields can expand even when the row has no nested table.
|
|
555
|
+
if (!_this.state.extraColumns.length && !_this.hasNestedRows(item)) {
|
|
552
556
|
return null;
|
|
553
557
|
}
|
|
554
558
|
return /*#__PURE__*/_react["default"].createElement(ExpandToggle, {
|
|
559
|
+
$preserveActionPosition: _this.props.preserveActionPosition,
|
|
555
560
|
className: "expand-toggle".concat(_this.state.showExtraRow === idx ? " is-expanded" : ""),
|
|
556
561
|
onClick: function onClick(e) {
|
|
557
562
|
_this.toggleExtraDetails(e, idx);
|
|
558
563
|
}
|
|
559
|
-
}, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
564
|
+
}, _this.props.preserveActionPosition ? /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
560
565
|
theme: _this.props.theme,
|
|
561
566
|
name: "right-arrow-chevron",
|
|
562
567
|
width: 12,
|
|
563
568
|
height: 12,
|
|
564
569
|
color: "none",
|
|
565
570
|
stroke: _tokens.colors[_this.props.theme].table.tdColor
|
|
571
|
+
}) : /*#__PURE__*/_react["default"].createElement(_icon["default"], {
|
|
572
|
+
theme: _this.props.theme,
|
|
573
|
+
name: "triangle-carat",
|
|
574
|
+
width: 10,
|
|
575
|
+
height: 6,
|
|
576
|
+
color: _tokens.colors[_this.props.theme].table.tdColor
|
|
566
577
|
}));
|
|
567
578
|
}
|
|
568
579
|
/**
|
|
@@ -956,7 +967,9 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
956
967
|
var lastLeftField = null;
|
|
957
968
|
for (var i = 0; i < visibleColumns.length; i += 1) {
|
|
958
969
|
var column = visibleColumns[i];
|
|
959
|
-
|
|
970
|
+
// Only the leading nested-table toggle is structural; the trailing toggle after Actions
|
|
971
|
+
// should use normal cell styling instead of the left-pinned background and shadow.
|
|
972
|
+
var structural = STRUCTURAL_LEFT_FIELDS.includes(column.field) && (column.field !== "extra_columns" || _this.props.preserveActionPosition);
|
|
960
973
|
if (structural || isPinned(column.pinned_left)) {
|
|
961
974
|
var width = toPxNumber(_this.getColumnWidth(column));
|
|
962
975
|
if (width === undefined) {
|
|
@@ -1900,7 +1913,7 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1900
1913
|
}, cellRenderer(item, column, index)));
|
|
1901
1914
|
}
|
|
1902
1915
|
return filler;
|
|
1903
|
-
}), fillerIndex >= _this5.defaultShowColumns.length && _this5.renderFillerCell("".concat(index, "-filler-end"))), (_this5.state.showExtraRow === index || _this5.state.closingExtraRow === index) && _this5.hasNestedRows(item) ? /*#__PURE__*/_react["default"].createElement(Table.Row, {
|
|
1916
|
+
}), fillerIndex >= _this5.defaultShowColumns.length && _this5.renderFillerCell("".concat(index, "-filler-end"))), (_this5.state.showExtraRow === index || _this5.state.closingExtraRow === index) && (_this5.state.extraColumns.length > 0 || _this5.hasNestedRows(item)) ? /*#__PURE__*/_react["default"].createElement(Table.Row, {
|
|
1904
1917
|
theme: _this5.props.theme,
|
|
1905
1918
|
key: "row-" + index + "extra"
|
|
1906
1919
|
}, /*#__PURE__*/_react["default"].createElement(Table.Cell, {
|
|
@@ -1912,7 +1925,26 @@ var Table = /*#__PURE__*/function (_Component) {
|
|
|
1912
1925
|
// className="tableHolder"
|
|
1913
1926
|
}, /*#__PURE__*/_react["default"].createElement(NestedRowReveal, {
|
|
1914
1927
|
open: _this5.state.showExtraRow === index
|
|
1915
|
-
}, _this5.
|
|
1928
|
+
}, _this5.state.extraColumns.length > 0 && /*#__PURE__*/_react["default"].createElement(NestedTableHolder, null, /*#__PURE__*/_react["default"].createElement(Table.Card, {
|
|
1929
|
+
theme: theme,
|
|
1930
|
+
width: "100%"
|
|
1931
|
+
}, /*#__PURE__*/_react["default"].createElement(TableInner.Element, {
|
|
1932
|
+
theme: theme
|
|
1933
|
+
}, /*#__PURE__*/_react["default"].createElement(Table.Header, {
|
|
1934
|
+
theme: theme,
|
|
1935
|
+
columns: _this5.state.extraColumns,
|
|
1936
|
+
selectedColumns: _this5.getFieldArr(_this5.state.extraColumns),
|
|
1937
|
+
onSort: _this5.props.onSort,
|
|
1938
|
+
displayAs: "extraDetails"
|
|
1939
|
+
}), /*#__PURE__*/_react["default"].createElement(Table.Body, null, /*#__PURE__*/_react["default"].createElement(Table.Row, {
|
|
1940
|
+
theme: theme
|
|
1941
|
+
}, _this5.state.extraColumns.map(function (column) {
|
|
1942
|
+
return /*#__PURE__*/_react["default"].createElement(TableInner.Cell, {
|
|
1943
|
+
theme: theme,
|
|
1944
|
+
key: column.field,
|
|
1945
|
+
column: column
|
|
1946
|
+
}, (column.children || _this5.defaultCellRenderer)(item, column, index));
|
|
1947
|
+
})))))), _this5.hasNestedRows(item) ? /*#__PURE__*/_react["default"].createElement(NestedTableHolder, {
|
|
1916
1948
|
className: "nested-table-holder",
|
|
1917
1949
|
style: _this5.state.viewportWidth ? {
|
|
1918
1950
|
width: "".concat(_this5.state.viewportWidth, "px")
|
|
@@ -2268,7 +2300,13 @@ TableInner.Cell = _styledComponents["default"].td(_templateObject10 || (_templat
|
|
|
2268
2300
|
}, function (props) {
|
|
2269
2301
|
return props.maxWidth || "175px";
|
|
2270
2302
|
});
|
|
2271
|
-
var ExpandToggle = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n svg {\n transform: rotate(0deg);\n transform-origin: 50% 50%;\n transition: transform 0.25s ease-in-out;\n }\n\n &.is-expanded svg {\n transform: rotate(
|
|
2303
|
+
var ExpandToggle = _styledComponents["default"].div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n\n svg {\n transform: rotate(0deg);\n transform-origin: 50% 50%;\n transition: transform 0.25s ease-in-out;\n }\n\n &.is-expanded svg {\n transform: rotate(", "deg);\n }\n\n\n @media (prefers-reduced-motion: reduce) {\n svg {\n transition: none;\n }\n }\n\n path {\n stroke-linecap: round;\n stroke-linejoin: round;\n transition: ", " 0.3s ease-out;\n }\n\n &:hover path {\n ", ": #60bef8;\n }\n"])), function (props) {
|
|
2304
|
+
return props.$preserveActionPosition ? 90 : 180;
|
|
2305
|
+
}, function (props) {
|
|
2306
|
+
return props.$preserveActionPosition ? "stroke" : "fill";
|
|
2307
|
+
}, function (props) {
|
|
2308
|
+
return props.$preserveActionPosition ? "stroke" : "fill";
|
|
2309
|
+
});
|
|
2272
2310
|
var NestedReveal = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["\n overflow: hidden;\n transition: height ", "ms ease,\n opacity ", "ms ease;\n\n @media (prefers-reduced-motion: reduce) {\n transition: none;\n }\n"])), NESTED_REVEAL_MS, NESTED_REVEAL_MS);
|
|
2273
2311
|
var NestedRowReveal = /*#__PURE__*/function (_Component2) {
|
|
2274
2312
|
function NestedRowReveal(props) {
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.3.
|
|
3
|
+
"version": "9.3.22",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "9.3.
|
|
10
|
+
"@desynova-digital/tokens": "9.3.22",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|