@laerdal/life-react-components 1.11.0-dev.2 → 1.11.0-dev.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs +2 -4
- package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map +1 -1
- package/dist/GlobalNavigationBar/desktop/UserMenu.js +2 -4
- package/dist/GlobalNavigationBar/desktop/UserMenu.js.map +1 -1
- package/dist/Table/Table.cjs +41 -82
- package/dist/Table/Table.cjs.map +1 -1
- package/dist/Table/Table.js +41 -82
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableBody.cjs +13 -10
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.d.ts +3 -1
- package/dist/Table/TableBody.js +14 -11
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableStyles.cjs +21 -17
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.d.ts +1 -0
- package/dist/Table/TableStyles.js +17 -16
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Table/TableTypes.d.ts +0 -1
- package/package.json +1 -1
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.TableWrapper = exports.StyledTableSpinner = exports.StyledTableNoRowsLabelRow = exports.StyledTableHeaderTitleContent = exports.StyledTableHeaderTitle = exports.StyledTableHeaderRow = exports.StyledTableHeaderColumns = exports.StyledTableHeaderColumnContent = exports.StyledTableHeaderColumn = exports.StyledTableHeader = exports.StyledTableFooterCurrentInfo = exports.StyledTableFooterControls = exports.StyledTableFooterContent = exports.StyledTableFooterCollapseButton = exports.StyledTableFooter = exports.StyledTableCellText = exports.StyledTableCellIcon = exports.StyledTableCellContent = exports.StyledTableCell = exports.StyledTableBodyWrapper = exports.StyledTableBodyRow = exports.StyledTableBody = exports.StyledTable = void 0;
|
|
8
|
+
exports.TableWrapper = exports.StyledTableSpinner = exports.StyledTableNoRowsLabelRow = exports.StyledTableHeaderTitleContent = exports.StyledTableHeaderTitle = exports.StyledTableHeaderRow = exports.StyledTableHeaderColumns = exports.StyledTableHeaderColumnSortDirection = exports.StyledTableHeaderColumnContent = exports.StyledTableHeaderColumn = exports.StyledTableHeader = exports.StyledTableFooterCurrentInfo = exports.StyledTableFooterControls = exports.StyledTableFooterContent = exports.StyledTableFooterCollapseButton = exports.StyledTableFooter = exports.StyledTableCellText = exports.StyledTableCellIcon = exports.StyledTableCellContent = exports.StyledTableCell = exports.StyledTableBodyWrapper = exports.StyledTableBodyRow = exports.StyledTableBody = exports.StyledTable = void 0;
|
|
9
9
|
|
|
10
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
11
|
|
|
@@ -21,7 +21,7 @@ var _Checkbox = require("../InputFields/Checkbox");
|
|
|
21
21
|
|
|
22
22
|
var _types = require("../types");
|
|
23
23
|
|
|
24
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
|
|
24
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
|
|
25
25
|
|
|
26
26
|
/**
|
|
27
27
|
* Table styles
|
|
@@ -58,63 +58,67 @@ var StyledTableHeaderColumnContent = _styledComponents.default.div(_templateObje
|
|
|
58
58
|
|
|
59
59
|
exports.StyledTableHeaderColumnContent = StyledTableHeaderColumnContent;
|
|
60
60
|
|
|
61
|
-
var
|
|
61
|
+
var StyledTableHeaderColumnSortDirection = _styledComponents.default.span(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n width: 24px;\n height: 24px;\n"])));
|
|
62
|
+
|
|
63
|
+
exports.StyledTableHeaderColumnSortDirection = StyledTableHeaderColumnSortDirection;
|
|
64
|
+
|
|
65
|
+
var StyledTableHeaderColumn = _styledComponents.default.th(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n ", "\n position: relative;\n text-align: unset;\n background-color: ", ";\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n }\n\n &.sortable ", " > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ", " > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ", ";\n }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.COLORS.white, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_100, _styles.COLORS.primary_800, _zIndexes.Z_INDEXES.active, _styles.focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, _styles.COLORS.neutral_20);
|
|
62
66
|
|
|
63
67
|
exports.StyledTableHeaderColumn = StyledTableHeaderColumn;
|
|
64
68
|
|
|
65
|
-
var StyledTableBodyRow = _styledComponents.default.tr(
|
|
69
|
+
var StyledTableBodyRow = _styledComponents.default.tr(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n cursor: pointer;\n position: relative;\n outline: none;\n\n &.selected{\n background-color: ", ";\n }\n \n &:hover {\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n\n &:active {\n z-index: ", ";\n }\n\n"])), _styles.COLORS.primary_100, _styles.COLORS.primary_200, _zIndexes.Z_INDEXES.hover, _styles.focusStyles, _zIndexes.Z_INDEXES.active);
|
|
66
70
|
|
|
67
71
|
exports.StyledTableBodyRow = StyledTableBodyRow;
|
|
68
72
|
|
|
69
|
-
var StyledTableNoRowsLabelRow = _styledComponents.default.tr(
|
|
73
|
+
var StyledTableNoRowsLabelRow = _styledComponents.default.tr(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n outline: none;\n background-color: ", ";\n"])), _styles.COLORS.neutral_50);
|
|
70
74
|
|
|
71
75
|
exports.StyledTableNoRowsLabelRow = StyledTableNoRowsLabelRow;
|
|
72
76
|
|
|
73
|
-
var StyledTableBody = _styledComponents.default.tbody(
|
|
77
|
+
var StyledTableBody = _styledComponents.default.tbody(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ", ";\n }\n\n ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ", ";\n }\n"])), StyledTableBodyRow, _styles.COLORS.neutral_50, StyledTableBodyRow, _styles.COLORS.neutral_20);
|
|
74
78
|
|
|
75
79
|
exports.StyledTableBody = StyledTableBody;
|
|
76
80
|
|
|
77
|
-
var StyledTableCell = _styledComponents.default.td(
|
|
81
|
+
var StyledTableCell = _styledComponents.default.td(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
78
82
|
|
|
79
83
|
exports.StyledTableCell = StyledTableCell;
|
|
80
84
|
|
|
81
|
-
var StyledTableCellContent = _styledComponents.default.div(
|
|
85
|
+
var StyledTableCellContent = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2.default)(["\n min-height: 48px;\n\n padding: 0 16px;\n ", "\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ", "{\n width: fit-content;\n }\n"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black), _Checkbox.StyledCheckBox);
|
|
82
86
|
|
|
83
87
|
exports.StyledTableCellContent = StyledTableCellContent;
|
|
84
88
|
|
|
85
|
-
var StyledTableCellIcon = _styledComponents.default.div(
|
|
89
|
+
var StyledTableCellIcon = _styledComponents.default.div(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n color: ", ";\n width: 24px;\n height: 24px;\n\n svg {\n color: ", ";\n width: 24px;\n height: 24px;\n }\n"])), _styles.COLORS.neutral_700, _styles.COLORS.neutral_700);
|
|
86
90
|
|
|
87
91
|
exports.StyledTableCellIcon = StyledTableCellIcon;
|
|
88
92
|
|
|
89
|
-
var StyledTableCellText = _styledComponents.default.span(
|
|
93
|
+
var StyledTableCellText = _styledComponents.default.span(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n padding: 12px 0;\n"])));
|
|
90
94
|
|
|
91
95
|
exports.StyledTableCellText = StyledTableCellText;
|
|
92
96
|
|
|
93
|
-
var StyledTableFooter = _styledComponents.default.div(
|
|
97
|
+
var StyledTableFooter = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
94
98
|
|
|
95
99
|
exports.StyledTableFooter = StyledTableFooter;
|
|
96
100
|
|
|
97
|
-
var StyledTableFooterContent = _styledComponents.default.div(
|
|
101
|
+
var StyledTableFooterContent = _styledComponents.default.div(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 2px solid ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
|
|
98
102
|
|
|
99
103
|
exports.StyledTableFooterContent = StyledTableFooterContent;
|
|
100
104
|
|
|
101
|
-
var StyledTableFooterCurrentInfo = _styledComponents.default.span(
|
|
105
|
+
var StyledTableFooterCurrentInfo = _styledComponents.default.span(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 16px;\n ", "\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
|
|
102
106
|
|
|
103
107
|
exports.StyledTableFooterCurrentInfo = StyledTableFooterCurrentInfo;
|
|
104
108
|
|
|
105
|
-
var StyledTableFooterControls = _styledComponents.default.div(
|
|
109
|
+
var StyledTableFooterControls = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
|
|
106
110
|
|
|
107
111
|
exports.StyledTableFooterControls = StyledTableFooterControls;
|
|
108
112
|
|
|
109
|
-
var StyledTableSpinner = _styledComponents.default.div(
|
|
113
|
+
var StyledTableSpinner = _styledComponents.default.div(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2.default)(["\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.75);\n top: 0;\n z-index: ", ";\n"])), _zIndexes.Z_INDEXES.backdrop);
|
|
110
114
|
|
|
111
115
|
exports.StyledTableSpinner = StyledTableSpinner;
|
|
112
116
|
|
|
113
|
-
var StyledTableFooterCollapseButton = _styledComponents.default.button(
|
|
117
|
+
var StyledTableFooterCollapseButton = _styledComponents.default.button(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n border-bottom: 1px solid ", ";\n border-top: 1px solid ", ";\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ", ";\n\n cursor: pointer;\n\n ", "\n \n &:focus {\n ", "\n }\n\n &:hover {\n z-index: ", ";\n background: ", ";\n color: ", ";\n }\n\n &:active {\n z-index: ", ";\n background: ", ";\n color: ", ";\n }\n\n &:disabled {\n display: none;\n }\n\n"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200, _styles.COLORS.white, (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, _styles.COLORS.neutral_600), _styles.focusStyles, _zIndexes.Z_INDEXES.hover, _styles.COLORS.primary_20, _styles.COLORS.primary_700, _zIndexes.Z_INDEXES.active, _styles.COLORS.primary_100, _styles.COLORS.primary_800);
|
|
114
118
|
|
|
115
119
|
exports.StyledTableFooterCollapseButton = StyledTableFooterCollapseButton;
|
|
116
120
|
|
|
117
|
-
var StyledTableBodyWrapper = _styledComponents.default.div(
|
|
121
|
+
var StyledTableBodyWrapper = _styledComponents.default.div(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2.default)(["\n overflow-x: auto;\n ", "\n\n ::-webkit-scrollbar-track {\n margin: 6px;\n }\n\n &.scrollable{\n margin-bottom: 6px;\n padding-bottom: 10px;\n }\n"])), (0, _styles.scrollBarStyling)(_types.Size.Small));
|
|
118
122
|
|
|
119
123
|
exports.StyledTableBodyWrapper = StyledTableBodyWrapper;
|
|
120
124
|
//# sourceMappingURL=TableStyles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","
|
|
1
|
+
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focusStyles","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Size","Small"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n width: 24px;\n height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n text-align: unset;\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_200};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n position: relative;\n outline: none;\n background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_50};\n }\n\n ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n min-height: 48px;\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.75);\n top: 0;\n z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n ${focusStyles}\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n overflow-x: auto;\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 6px;\n }\n\n &.scrollable{\n margin-bottom: 6px;\n padding-bottom: 10px;\n }\n`;\n"],"file":"TableStyles.cjs"}
|
|
@@ -9,6 +9,7 @@ export declare const StyledTableHeaderTitleContent: import("styled-components").
|
|
|
9
9
|
export declare const StyledTableHeaderRow: import("styled-components").StyledComponent<"thead", any, {}, never>;
|
|
10
10
|
export declare const StyledTableHeaderColumns: import("styled-components").StyledComponent<"tr", any, {}, never>;
|
|
11
11
|
export declare const StyledTableHeaderColumnContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
12
|
+
export declare const StyledTableHeaderColumnSortDirection: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
12
13
|
export declare const StyledTableHeaderColumn: import("styled-components").StyledComponent<"th", any, {}, never>;
|
|
13
14
|
export declare const StyledTableBodyRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
|
|
14
15
|
export declare const StyledTableNoRowsLabelRow: import("styled-components").StyledComponent<"tr", any, {}, never>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23, _templateObject24;
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Import third-party libraries.
|
|
@@ -27,19 +27,20 @@ export var StyledTableHeaderTitleContent = styled.div(_templateObject5 || (_temp
|
|
|
27
27
|
export var StyledTableHeaderRow = styled.thead(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
|
|
28
28
|
export var StyledTableHeaderColumns = styled.tr(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n"])));
|
|
29
29
|
export var StyledTableHeaderColumnContent = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ", ";\n border-bottom: 1px solid ", ";\n"])), COLORS.neutral_200, COLORS.neutral_200);
|
|
30
|
-
export var
|
|
31
|
-
export var
|
|
32
|
-
export var
|
|
33
|
-
export var
|
|
34
|
-
export var
|
|
35
|
-
export var
|
|
36
|
-
export var
|
|
37
|
-
export var
|
|
38
|
-
export var
|
|
39
|
-
export var
|
|
40
|
-
export var
|
|
41
|
-
export var
|
|
42
|
-
export var
|
|
43
|
-
export var
|
|
44
|
-
export var
|
|
30
|
+
export var StyledTableHeaderColumnSortDirection = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n width: 24px;\n height: 24px;\n"])));
|
|
31
|
+
export var StyledTableHeaderColumn = styled.th(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", "\n position: relative;\n text-align: unset;\n background-color: ", ";\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &:active {\n background-color: ", ";\n color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n }\n\n &.sortable ", " > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ", " > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ", ";\n }\n"])), ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), COLORS.white, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.hover, COLORS.primary_100, COLORS.primary_800, Z_INDEXES.active, focusStyles, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
|
|
32
|
+
export var StyledTableBodyRow = styled.tr(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n cursor: pointer;\n position: relative;\n outline: none;\n\n &.selected{\n background-color: ", ";\n }\n \n &:hover {\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n ", "\n }\n\n &:active {\n z-index: ", ";\n }\n\n"])), COLORS.primary_100, COLORS.primary_200, Z_INDEXES.hover, focusStyles, Z_INDEXES.active);
|
|
33
|
+
export var StyledTableNoRowsLabelRow = styled.tr(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n position: relative;\n outline: none;\n background-color: ", ";\n"])), COLORS.neutral_50);
|
|
34
|
+
export var StyledTableBody = styled.tbody(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n ", ":nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ", ";\n }\n\n ", ":nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ", ";\n }\n"])), StyledTableBodyRow, COLORS.neutral_50, StyledTableBodyRow, COLORS.neutral_20);
|
|
35
|
+
export var StyledTableCell = styled.td(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral([""])));
|
|
36
|
+
export var StyledTableCellContent = styled.div(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n min-height: 48px;\n\n padding: 0 16px;\n ", "\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ", "{\n width: fit-content;\n }\n"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black), StyledCheckBox);
|
|
37
|
+
export var StyledTableCellIcon = styled.div(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n color: ", ";\n width: 24px;\n height: 24px;\n\n svg {\n color: ", ";\n width: 24px;\n height: 24px;\n }\n"])), COLORS.neutral_700, COLORS.neutral_700);
|
|
38
|
+
export var StyledTableCellText = styled.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n padding: 12px 0;\n"])));
|
|
39
|
+
export var StyledTableFooter = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n"])));
|
|
40
|
+
export var StyledTableFooterContent = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n border-top: 2px solid ", ";\n border-bottom: 1px solid ", ";\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n"])), COLORS.neutral_200, COLORS.neutral_200);
|
|
41
|
+
export var StyledTableFooterCurrentInfo = styled.span(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n padding: 0 16px;\n ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
|
|
42
|
+
export var StyledTableFooterControls = styled.div(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
43
|
+
export var StyledTableSpinner = styled.div(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.75);\n top: 0;\n z-index: ", ";\n"])), Z_INDEXES.backdrop);
|
|
44
|
+
export var StyledTableFooterCollapseButton = styled.button(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["\n position: relative;\n border-bottom: 1px solid ", ";\n border-top: 1px solid ", ";\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ", ";\n\n cursor: pointer;\n\n ", "\n \n &:focus {\n ", "\n }\n\n &:hover {\n z-index: ", ";\n background: ", ";\n color: ", ";\n }\n\n &:active {\n z-index: ", ";\n background: ", ";\n color: ", ";\n }\n\n &:disabled {\n display: none;\n }\n\n"])), COLORS.neutral_200, COLORS.neutral_200, COLORS.white, ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600), focusStyles, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800);
|
|
45
|
+
export var StyledTableBodyWrapper = styled.div(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["\n overflow-x: auto;\n ", "\n\n ::-webkit-scrollbar-track {\n margin: 6px;\n }\n\n &.scrollable{\n margin-bottom: 6px;\n padding-bottom: 10px;\n }\n"])), scrollBarStyling(Size.Small));
|
|
45
46
|
//# sourceMappingURL=TableStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Small"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n text-align: unset;\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_200};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n position: relative;\n outline: none;\n background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_50};\n }\n\n ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n min-height: 48px;\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.75);\n top: 0;\n z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n ${focusStyles}\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n overflow-x: auto;\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 6px;\n }\n\n &.scrollable{\n margin-bottom: 6px;\n padding-bottom: 10px;\n }\n`;"],"file":"TableStyles.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","focusStyles","scrollBarStyling","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","Size","TableWrapper","div","StyledTable","table","StyledTableHeader","StyledTableHeaderTitle","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderRow","thead","StyledTableHeaderColumns","tr","StyledTableHeaderColumnContent","StyledTableHeaderColumnSortDirection","span","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","hover","primary_100","primary_800","active","neutral_20","StyledTableBodyRow","primary_200","StyledTableNoRowsLabelRow","neutral_50","StyledTableBody","tbody","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","StyledTableFooter","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button","StyledTableBodyWrapper","Small"],"mappings":"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","sourcesContent":["/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\n\n/**\n * Import custom style properties.\n */\nimport {COLORS, focusStyles, scrollBarStyling} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\nimport {StyledCheckBox} from '../InputFields/Checkbox';\nimport {Size} from \"../types\";\n\n/**\n * Table styles\n */\n\nexport const TableWrapper = styled.div`\n position: relative;\n`;\n\n\nexport const StyledTable = styled.table`\n background: transparent;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n`;\n\nexport const StyledTableHeader = styled.div`\n`;\n\nexport const StyledTableHeaderTitle = styled.div`\n`;\n\nexport const StyledTableHeaderTitleContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n box-sizing: border-box;\n min-height: 56px;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 2px solid ${COLORS.neutral_200};\n padding: 0 16px;\n\n ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.black)}\n .title-menu {\n margin-right: -16px;\n }\n`;\n\nexport const StyledTableHeaderRow = styled.thead`\n`;\n\nexport const StyledTableHeaderColumns = styled.tr`\n`;\n\nexport const StyledTableHeaderColumnContent = styled.div`\n box-sizing: border-box;\n min-height: 56px;\n padding: 0 16px;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n border-top: 1px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n`;\n\nexport const StyledTableHeaderColumnSortDirection = styled.span`\n width: 24px;\n height: 24px;\n`;\n\nexport const StyledTableHeaderColumn = styled.th`\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n position: relative;\n text-align: unset;\n background-color: ${COLORS.white};\n\n //fixes header heights no idea why\n height: 1px;\n\n &.sortable {\n cursor: pointer;\n\n &:hover {\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n ${focusStyles}\n }\n }\n\n &.sortable ${StyledTableHeaderColumnContent} > svg {\n opacity: 0;\n }\n\n &.sortable.sorted ${StyledTableHeaderColumnContent} > svg {\n opacity: 1;\n }\n\n &.sorted {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n\n &.selected{\n background-color: ${COLORS.primary_100};\n }\n \n &:hover {\n background-color: ${COLORS.primary_200};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n ${focusStyles}\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableNoRowsLabelRow = styled.tr`\n position: relative;\n outline: none;\n background-color: ${COLORS.neutral_50};\n`;\n\nexport const StyledTableBody = styled.tbody`\n ${StyledTableBodyRow}:nth-child(odd):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_50};\n }\n\n ${StyledTableBodyRow}:nth-child(even):not(.selected):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_20};\n }\n`;\n\n\nexport const StyledTableCell = styled.td``;\n\nexport const StyledTableCellContent = styled.div`\n min-height: 48px;\n\n padding: 0 16px;\n ${ComponentSStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n display: flex;\n align-items: center;\n justify-content: left;\n gap: 8px;\n\n &.truncate-text,\n &.truncate-text span {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n &.left {\n justify-content: left;\n }\n\n &.right {\n justify-content: right;\n }\n\n &.center {\n justify-content: center;\n }\n\n a:first-letter,\n span:first-letter {\n text-transform: uppercase;\n }\n \n ${StyledCheckBox}{\n width: fit-content;\n }\n`;\n\nexport const StyledTableCellIcon = styled.div`\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n\n svg {\n color: ${COLORS.neutral_700};\n width: 24px;\n height: 24px;\n }\n`;\n\nexport const StyledTableCellText = styled.span`\n padding: 12px 0;\n`;\n\n\nexport const StyledTableFooter = styled.div`\n`;\n\nexport const StyledTableFooterContent = styled.div`\n border-top: 2px solid ${COLORS.neutral_200};\n border-bottom: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n min-height: 56px;\n\n display: flex;\n align-items: center;\n justify-content: right;\n\n`;\n\nexport const StyledTableFooterCurrentInfo = styled.span`\n padding: 0 16px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black)}\n`;\n\nexport const StyledTableFooterControls = styled.div`\n display: flex;\n`;\n\nexport const StyledTableSpinner = styled.div`\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(255, 255, 255, 0.75);\n top: 0;\n z-index: ${Z_INDEXES.backdrop};\n`;\n\nexport const StyledTableFooterCollapseButton = styled.button`\n position: relative;\n border-bottom: 1px solid ${COLORS.neutral_200};\n border-top: 1px solid ${COLORS.neutral_200};\n border-left: none;\n border-right: none;\n box-sizing: border-box;\n min-height: 48px;\n display: flex;\n width: 100%;\n align-items: center;\n justify-content: center;\n gap: 4px;\n background: ${COLORS.white};\n\n cursor: pointer;\n\n ${ComponentMStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n &:focus {\n ${focusStyles}\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n background: ${COLORS.primary_20};\n color: ${COLORS.primary_700};\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n background: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n }\n\n &:disabled {\n display: none;\n }\n\n`;\n\n\nexport const StyledTableBodyWrapper = styled.div`\n overflow-x: auto;\n ${scrollBarStyling(Size.Small)}\n\n ::-webkit-scrollbar-track {\n margin: 6px;\n }\n\n &.scrollable{\n margin-bottom: 6px;\n padding-bottom: 10px;\n }\n`;\n"],"file":"TableStyles.js"}
|
|
@@ -45,7 +45,6 @@ export interface TableColumn {
|
|
|
45
45
|
additionalProps?: Pick<ButtonProps, 'variant' | 'size' | 'width' | 'icon'> | Pick<IconButtonProps, 'variant' | 'shape' | 'disabled'> | Pick<HyperlinkProps, 'variant'>;
|
|
46
46
|
customContent?: (row: any, key: string) => any;
|
|
47
47
|
sortable?: boolean;
|
|
48
|
-
sortingDirection?: TableSortingDirection;
|
|
49
48
|
}
|
|
50
49
|
export declare type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
|
|
51
50
|
export declare type TableJustification = 'right' | 'left' | 'center';
|