@longline/aqua-ui 1.0.131 → 1.0.133
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.
|
@@ -30,7 +30,7 @@ import styled, { css } from 'styled-components';
|
|
|
30
30
|
import { useViewState } from '../../map/Map';
|
|
31
31
|
var DockableBase = function (props) {
|
|
32
32
|
// Reference to Dockable div:
|
|
33
|
-
var
|
|
33
|
+
var _a = React.useState(null), containerRef = _a[0], setContainerRef = _a[1];
|
|
34
34
|
// Using the ViewState will cause this component to be rerendered when the
|
|
35
35
|
// map moves:
|
|
36
36
|
useViewState();
|
|
@@ -39,10 +39,10 @@ var DockableBase = function (props) {
|
|
|
39
39
|
var mapWidth = map.current.getContainer().clientWidth;
|
|
40
40
|
var mapHeight = map.current.getContainer().clientHeight;
|
|
41
41
|
// Convert Dockable's lat/lng to pixel coordinates:
|
|
42
|
-
var
|
|
42
|
+
var _b = map.current.project([props.longitude, props.latitude]), x = _b.x, y = _b.y;
|
|
43
43
|
// Get size of Dockable:
|
|
44
|
-
var myWidth = containerRef
|
|
45
|
-
var myHeight = containerRef
|
|
44
|
+
var myWidth = containerRef ? containerRef.clientWidth : 0;
|
|
45
|
+
var myHeight = containerRef ? containerRef.clientHeight : 0;
|
|
46
46
|
// Is Dockable currently offscreen (boolean)?
|
|
47
47
|
var offsetX = props.offsetX;
|
|
48
48
|
var offsetY = props.offsetY;
|
|
@@ -73,7 +73,7 @@ var DockableBase = function (props) {
|
|
|
73
73
|
style.left = "".concat(x + offsetX, "px");
|
|
74
74
|
style.top = "".concat(y + offsetY, "px");
|
|
75
75
|
}
|
|
76
|
-
return (React.createElement("div", { style: style, className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref:
|
|
76
|
+
return (React.createElement("div", { style: style, className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref: setContainerRef }, props.children));
|
|
77
77
|
};
|
|
78
78
|
var DockableStyled = styled(DockableBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: white;\n z-index: ", ";\n ", "\n"], ["\n color: white;\n z-index: ", ";\n ", "\n"
|
|
79
79
|
/**
|
|
@@ -2,25 +2,30 @@ import * as React from 'react';
|
|
|
2
2
|
import { Selector } from '../../inputs/Selector';
|
|
3
3
|
var Body = React.forwardRef(function (props, ref) {
|
|
4
4
|
return (React.createElement("tbody", null, Array.isArray(props.data) && props.data.map(function (row, index) {
|
|
5
|
-
return React.createElement(
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
React.createElement("
|
|
17
|
-
|
|
18
|
-
" ",
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
5
|
+
return React.createElement(React.Fragment, null,
|
|
6
|
+
React.createElement("tr", { key: index,
|
|
7
|
+
// Set classnames for tr; styles are in Table.
|
|
8
|
+
className: [
|
|
9
|
+
props.active == row ? 'active' : null,
|
|
10
|
+
props.expanded && props.active == row ? 'expanded' : null,
|
|
11
|
+
(props.onClick || props.onDoubleClick) ? 'clickable' : null
|
|
12
|
+
].join(' '), onClick: props.onClick ? function () { return props.onClick(row); } : null, onDoubleClick: props.onDoubleClick ? function () { return props.onDoubleClick(row); } : null },
|
|
13
|
+
props.onCheck && React.createElement("td", null,
|
|
14
|
+
React.createElement(Selector, { checked: !!row.checked, onChange: function () { return props.onCheck(index); } })),
|
|
15
|
+
props.columns.map(function (col, index) {
|
|
16
|
+
return React.createElement("td", { key: index, style: { height: "".concat(props.rowHeight, "px"), justifyContent: (col.align == 'right' && !props.narrow) ? 'end' : 'start' } },
|
|
17
|
+
index == 0 && props.decorator && props.decorator(row),
|
|
18
|
+
React.createElement("span", { className: "label" }, props.narrow && col.name),
|
|
19
|
+
React.createElement("span", { className: "content" },
|
|
20
|
+
" ",
|
|
21
|
+
col.children(row)),
|
|
22
|
+
index == props.columns.length - 1 &&
|
|
23
|
+
React.createElement("div", { style: { position: 'absolute', top: 0, right: 0 }, ref: (props.active == row ? ref : null) }));
|
|
24
|
+
}),
|
|
25
|
+
props.columnsEditable && React.createElement("td", null)),
|
|
26
|
+
props.expanded && props.active == row &&
|
|
27
|
+
React.createElement("tr", { key: "".concat(index, "_expand") },
|
|
28
|
+
React.createElement("td", { style: { gridColumnStart: 0, gridColumnEnd: "span ".concat(props.columns.length + (props.onCheck ? 1 : 0) + (props.columnsEditable ? 1 : 0)) } }, props.expansion)));
|
|
24
29
|
})));
|
|
25
30
|
});
|
|
26
31
|
export { Body };
|
|
@@ -94,6 +94,15 @@ interface IListViewProps {
|
|
|
94
94
|
* to place the decorator.
|
|
95
95
|
*/
|
|
96
96
|
decorator?: (item: any) => React.ReactNode;
|
|
97
|
+
/**
|
|
98
|
+
* If set, expansion content is shown below the active row.
|
|
99
|
+
* @default false
|
|
100
|
+
*/
|
|
101
|
+
expanded?: boolean;
|
|
102
|
+
/**
|
|
103
|
+
* Content to show when active row is expanded.
|
|
104
|
+
*/
|
|
105
|
+
expansion?: React.ReactNode;
|
|
97
106
|
/**
|
|
98
107
|
* Fired when a row is clicked.
|
|
99
108
|
* @param item Clicked item
|
|
@@ -11,7 +11,7 @@ interface IProps extends IListViewProps {
|
|
|
11
11
|
children?: React.ReactElement<IColumnProps> | React.ReactElement<IColumnProps>[];
|
|
12
12
|
}
|
|
13
13
|
declare const ListView: {
|
|
14
|
-
({ dark, noheader, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, rowHeight, columnsEditable, ...props }: IProps): React.JSX.Element;
|
|
14
|
+
({ dark, noheader, hover, striped, grid, total, singular, plural, narrow, shadow, ghost, rowHeight, columnsEditable, expanded, ...props }: IProps): React.JSX.Element;
|
|
15
15
|
Column: {
|
|
16
16
|
(_: IColumnProps): null;
|
|
17
17
|
displayName: string;
|
|
@@ -99,8 +99,8 @@ var ListViewBase = function (props) {
|
|
|
99
99
|
};
|
|
100
100
|
// Wrapper for default values:
|
|
101
101
|
var ListView = function (_a) {
|
|
102
|
-
var _b = _a.dark, dark = _b === void 0 ? false : _b, _c = _a.noheader, noheader = _c === void 0 ? false : _c, _d = _a.hover, hover = _d === void 0 ? false : _d, _e = _a.striped, striped = _e === void 0 ? false : _e, _f = _a.grid, grid = _f === void 0 ? false : _f, _g = _a.total, total = _g === void 0 ? false : _g, _h = _a.singular, singular = _h === void 0 ? "record" : _h, _j = _a.plural, plural = _j === void 0 ? "records" : _j, _k = _a.narrow, narrow = _k === void 0 ? false : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.rowHeight, rowHeight = _o === void 0 ? 48 : _o, _p = _a.columnsEditable, columnsEditable = _p === void 0 ? false : _p, props = __rest(_a, ["dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "narrow", "shadow", "ghost", "rowHeight", "columnsEditable"]);
|
|
103
|
-
return React.createElement(ListViewBase, __assign({ dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, rowHeight: rowHeight, columnsEditable: columnsEditable }, props));
|
|
102
|
+
var _b = _a.dark, dark = _b === void 0 ? false : _b, _c = _a.noheader, noheader = _c === void 0 ? false : _c, _d = _a.hover, hover = _d === void 0 ? false : _d, _e = _a.striped, striped = _e === void 0 ? false : _e, _f = _a.grid, grid = _f === void 0 ? false : _f, _g = _a.total, total = _g === void 0 ? false : _g, _h = _a.singular, singular = _h === void 0 ? "record" : _h, _j = _a.plural, plural = _j === void 0 ? "records" : _j, _k = _a.narrow, narrow = _k === void 0 ? false : _k, _l = _a.shadow, shadow = _l === void 0 ? false : _l, _m = _a.ghost, ghost = _m === void 0 ? false : _m, _o = _a.rowHeight, rowHeight = _o === void 0 ? 48 : _o, _p = _a.columnsEditable, columnsEditable = _p === void 0 ? false : _p, _q = _a.expanded, expanded = _q === void 0 ? false : _q, props = __rest(_a, ["dark", "noheader", "hover", "striped", "grid", "total", "singular", "plural", "narrow", "shadow", "ghost", "rowHeight", "columnsEditable", "expanded"]);
|
|
103
|
+
return React.createElement(ListViewBase, __assign({ dark: dark, noheader: noheader, hover: hover, striped: striped, grid: grid, total: total, singular: singular, plural: plural, narrow: narrow, shadow: shadow, ghost: ghost, rowHeight: rowHeight, columnsEditable: columnsEditable, expanded: expanded }, props));
|
|
104
104
|
};
|
|
105
105
|
ListView.Column = Column;
|
|
106
106
|
export { ListView };
|
|
@@ -96,7 +96,7 @@ var TableBase = function (_a) {
|
|
|
96
96
|
var AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n z-index: 1;\n pointer-events: none;\n // Children must turn pointer-events back on.\n"], ["\n z-index: 1;\n pointer-events: none;\n // Children must turn pointer-events back on.\n"])));
|
|
97
97
|
var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ", ";\n"], ["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ", ";\n"])), function (p) { return p.$dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; });
|
|
98
98
|
var Inner = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow-y: auto;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow-y: auto;\n"])));
|
|
99
|
-
var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n padding-bottom: 48px;\n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows:
|
|
99
|
+
var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n padding-bottom: 48px;\n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows: auto;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n\n // Expanded row makes its cells sticky:\n tr.expanded {\n td {\n position: sticky;\n top: ", "px;\n align-self: flex-start;\n z-index: 1;\n }\n }\n"], ["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n padding-bottom: 48px;\n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows: auto;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n\n // Expanded row makes its cells sticky:\n tr.expanded {\n td {\n position: sticky;\n top: ", "px;\n align-self: flex-start;\n z-index: 1;\n }\n }\n"])), HEADER_HEIGHT, function (p) {
|
|
100
100
|
// Prefix a check column?
|
|
101
101
|
return (p.onCheck ? ['48px'] : []).concat(
|
|
102
102
|
// Actual columns:
|
|
@@ -111,7 +111,7 @@ var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __
|
|
|
111
111
|
// Postfix an columns management column?
|
|
112
112
|
.concat(p.columnsEditable ? ['48px'] : [])
|
|
113
113
|
.join(" ");
|
|
114
|
-
}, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.hover && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n tr:hover td { background-color: ", "; }\n "], ["\n tr:hover td { background-color: ", "; }\n "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n tr:nth-child(2n+2) td {\n background-color: ", ";\n }\n "], ["\n tr:nth-child(2n+2) td {\n background-color: ", ";\n }\n "])), darken(0.02, p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100])); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[95]; }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.shadow && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:before {\n position: absolute;\n pointer-events: none;\n content: '';\n z-index: 1;\n top: calc(100%);\n left: 0;\n right: 0;\n height: 8px;\n background: linear-gradient(rgba(0,0,0,0.1), transparent);\n }\n "], ["\n &:before {\n position: absolute;\n pointer-events: none;\n content: '';\n z-index: 1;\n top: calc(100%);\n left: 0;\n right: 0;\n height: 8px;\n background: linear-gradient(rgba(0,0,0,0.1), transparent);\n }\n "]))); }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.grid && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n td:not(:last-child), th:not(:last-child) {\n border-right: dashed 1px ", ";\n }\n "], ["\n td:not(:last-child), th:not(:last-child) {\n border-right: dashed 1px ", ";\n }\n "])), p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]); }, function (p) { return p.columnsEditable && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n th:last-child {\n &:hover {\n &:after { \n background-color: ", ";\n }\n }\n }\n th:nth-last-child(2), td:nth-last-child(2) {\n border-right: none;\n }\n "], ["\n th:last-child {\n &:hover {\n &:after { \n background-color: ", ";\n }\n }\n }\n th:nth-last-child(2), td:nth-last-child(2) {\n border-right: none;\n }\n "])), function (p) { return p.theme.colors.primary[2]; }); }, function (p) { return p.narrow && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n grid-template-columns: 1fr;\n tr th {\n display: none;\n } \n th, td:not(:last-child) {\n &:after {\n visibility: hidden;\n }\n }\n td {\n flex-direction: column;\n align-items: start;\n justify-content: center;\n }\n td span.label {\n font: ", ";\n }\n td:last-child {\n padding-right: 16px;\n }\n "], ["\n grid-template-columns: 1fr;\n tr th {\n display: none;\n } \n th, td:not(:last-child) {\n &:after {\n visibility: hidden;\n }\n }\n td {\n flex-direction: column;\n align-items: start;\n justify-content: center;\n }\n td span.label {\n font: ", ";\n }\n td:last-child {\n padding-right: 16px;\n }\n "])), function (p) { return p.theme.font.labelSmall; }); });
|
|
114
|
+
}, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.hover && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n tr:hover td { background-color: ", "; }\n "], ["\n tr:hover td { background-color: ", "; }\n "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n tr:nth-child(2n+2) td {\n background-color: ", ";\n }\n "], ["\n tr:nth-child(2n+2) td {\n background-color: ", ";\n }\n "])), darken(0.02, p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100])); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[95]; }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.shadow && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:before {\n position: absolute;\n pointer-events: none;\n content: '';\n z-index: 1;\n top: calc(100%);\n left: 0;\n right: 0;\n height: 8px;\n background: linear-gradient(rgba(0,0,0,0.1), transparent);\n }\n "], ["\n &:before {\n position: absolute;\n pointer-events: none;\n content: '';\n z-index: 1;\n top: calc(100%);\n left: 0;\n right: 0;\n height: 8px;\n background: linear-gradient(rgba(0,0,0,0.1), transparent);\n }\n "]))); }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.grid && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n td:not(:last-child), th:not(:last-child) {\n border-right: dashed 1px ", ";\n }\n "], ["\n td:not(:last-child), th:not(:last-child) {\n border-right: dashed 1px ", ";\n }\n "])), p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]); }, function (p) { return p.columnsEditable && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n th:last-child {\n &:hover {\n &:after { \n background-color: ", ";\n }\n }\n }\n th:nth-last-child(2), td:nth-last-child(2) {\n border-right: none;\n }\n "], ["\n th:last-child {\n &:hover {\n &:after { \n background-color: ", ";\n }\n }\n }\n th:nth-last-child(2), td:nth-last-child(2) {\n border-right: none;\n }\n "])), function (p) { return p.theme.colors.primary[2]; }); }, function (p) { return p.narrow && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n grid-template-columns: 1fr;\n tr th {\n display: none;\n } \n th, td:not(:last-child) {\n &:after {\n visibility: hidden;\n }\n }\n td {\n flex-direction: column;\n align-items: start;\n justify-content: center;\n }\n td span.label {\n font: ", ";\n }\n td:last-child {\n padding-right: 16px;\n }\n "], ["\n grid-template-columns: 1fr;\n tr th {\n display: none;\n } \n th, td:not(:last-child) {\n &:after {\n visibility: hidden;\n }\n }\n td {\n flex-direction: column;\n align-items: start;\n justify-content: center;\n }\n td span.label {\n font: ", ";\n }\n td:last-child {\n padding-right: 16px;\n }\n "])), function (p) { return p.theme.font.labelSmall; }); }, HEADER_HEIGHT);
|
|
115
115
|
var Table = function (props) { return React.createElement(TableStyled, __assign({}, props)); };
|
|
116
116
|
export { Table };
|
|
117
117
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|