@laerdal/life-react-components 1.10.3-dev.8 → 1.10.3-dev.9.full
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/mobile/MobileMenuContent.cjs +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.cjs.map +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js +1 -1
- package/dist/GlobalNavigationBar/mobile/MobileMenuContent.js.map +1 -1
- package/dist/Table/Table.cjs +21 -28
- package/dist/Table/Table.cjs.map +1 -1
- package/dist/Table/Table.js +22 -29
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableBody.cjs +122 -42
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.d.ts +4 -1
- package/dist/Table/TableBody.js +120 -43
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableFooter.cjs +54 -59
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.js +54 -59
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableHeaders.cjs +13 -67
- package/dist/Table/TableHeaders.cjs.map +1 -1
- package/dist/Table/TableHeaders.d.ts +1 -4
- package/dist/Table/TableHeaders.js +15 -64
- package/dist/Table/TableHeaders.js.map +1 -1
- package/dist/Table/TableStyles.cjs +30 -20
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.d.ts +5 -3
- package/dist/Table/TableStyles.js +23 -20
- package/dist/Table/TableStyles.js.map +1 -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.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.StyledTableBodyRow = exports.StyledTableBody = exports.StyledTable = void 0;
|
|
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;
|
|
9
9
|
|
|
10
10
|
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
|
|
11
11
|
|
|
@@ -19,7 +19,9 @@ var _zIndexes = require("../styles/z-indexes");
|
|
|
19
19
|
|
|
20
20
|
var _Checkbox = require("../InputFields/Checkbox");
|
|
21
21
|
|
|
22
|
-
var
|
|
22
|
+
var _types = require("../types");
|
|
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;
|
|
23
25
|
|
|
24
26
|
/**
|
|
25
27
|
* Table styles
|
|
@@ -32,11 +34,11 @@ var StyledTable = _styledComponents.default.table(_templateObject2 || (_template
|
|
|
32
34
|
|
|
33
35
|
exports.StyledTable = StyledTable;
|
|
34
36
|
|
|
35
|
-
var StyledTableHeader = _styledComponents.default.
|
|
37
|
+
var StyledTableHeader = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
36
38
|
|
|
37
39
|
exports.StyledTableHeader = StyledTableHeader;
|
|
38
40
|
|
|
39
|
-
var StyledTableHeaderTitle = _styledComponents.default.
|
|
41
|
+
var StyledTableHeaderTitle = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
40
42
|
|
|
41
43
|
exports.StyledTableHeaderTitle = StyledTableHeaderTitle;
|
|
42
44
|
|
|
@@ -44,67 +46,75 @@ var StyledTableHeaderTitleContent = _styledComponents.default.div(_templateObjec
|
|
|
44
46
|
|
|
45
47
|
exports.StyledTableHeaderTitleContent = StyledTableHeaderTitleContent;
|
|
46
48
|
|
|
47
|
-
var
|
|
49
|
+
var StyledTableHeaderRow = _styledComponents.default.thead(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
50
|
+
|
|
51
|
+
exports.StyledTableHeaderRow = StyledTableHeaderRow;
|
|
52
|
+
|
|
53
|
+
var StyledTableHeaderColumns = _styledComponents.default.tr(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
48
54
|
|
|
49
55
|
exports.StyledTableHeaderColumns = StyledTableHeaderColumns;
|
|
50
56
|
|
|
51
|
-
var StyledTableHeaderColumnContent = _styledComponents.default.div(
|
|
57
|
+
var StyledTableHeaderColumnContent = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\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"])), _styles.COLORS.neutral_200, _styles.COLORS.neutral_200);
|
|
52
58
|
|
|
53
59
|
exports.StyledTableHeaderColumnContent = StyledTableHeaderColumnContent;
|
|
54
60
|
|
|
55
|
-
var StyledTableHeaderColumn = _styledComponents.default.th(
|
|
61
|
+
var StyledTableHeaderColumn = _styledComponents.default.th(_templateObject9 || (_templateObject9 = (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);
|
|
56
62
|
|
|
57
63
|
exports.StyledTableHeaderColumn = StyledTableHeaderColumn;
|
|
58
64
|
|
|
59
|
-
var StyledTableBodyRow = _styledComponents.default.tr(
|
|
65
|
+
var StyledTableBodyRow = _styledComponents.default.tr(_templateObject10 || (_templateObject10 = (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);
|
|
60
66
|
|
|
61
67
|
exports.StyledTableBodyRow = StyledTableBodyRow;
|
|
62
68
|
|
|
63
|
-
var StyledTableNoRowsLabelRow = _styledComponents.default.tr(
|
|
69
|
+
var StyledTableNoRowsLabelRow = _styledComponents.default.tr(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n position: relative;\n outline: none;\n background-color: ", ";\n"])), _styles.COLORS.neutral_50);
|
|
64
70
|
|
|
65
71
|
exports.StyledTableNoRowsLabelRow = StyledTableNoRowsLabelRow;
|
|
66
72
|
|
|
67
|
-
var StyledTableBody = _styledComponents.default.tbody(
|
|
73
|
+
var StyledTableBody = _styledComponents.default.tbody(_templateObject12 || (_templateObject12 = (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);
|
|
68
74
|
|
|
69
75
|
exports.StyledTableBody = StyledTableBody;
|
|
70
76
|
|
|
71
|
-
var StyledTableCell = _styledComponents.default.td(
|
|
77
|
+
var StyledTableCell = _styledComponents.default.td(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)([""])));
|
|
72
78
|
|
|
73
79
|
exports.StyledTableCell = StyledTableCell;
|
|
74
80
|
|
|
75
|
-
var StyledTableCellContent = _styledComponents.default.div(
|
|
81
|
+
var StyledTableCellContent = _styledComponents.default.div(_templateObject14 || (_templateObject14 = (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);
|
|
76
82
|
|
|
77
83
|
exports.StyledTableCellContent = StyledTableCellContent;
|
|
78
84
|
|
|
79
|
-
var StyledTableCellIcon = _styledComponents.default.div(
|
|
85
|
+
var StyledTableCellIcon = _styledComponents.default.div(_templateObject15 || (_templateObject15 = (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);
|
|
80
86
|
|
|
81
87
|
exports.StyledTableCellIcon = StyledTableCellIcon;
|
|
82
88
|
|
|
83
|
-
var StyledTableCellText = _styledComponents.default.span(
|
|
89
|
+
var StyledTableCellText = _styledComponents.default.span(_templateObject16 || (_templateObject16 = (0, _taggedTemplateLiteral2.default)(["\n padding: 12px 0;\n"])));
|
|
84
90
|
|
|
85
91
|
exports.StyledTableCellText = StyledTableCellText;
|
|
86
92
|
|
|
87
|
-
var StyledTableFooter = _styledComponents.default.
|
|
93
|
+
var StyledTableFooter = _styledComponents.default.div(_templateObject17 || (_templateObject17 = (0, _taggedTemplateLiteral2.default)(["\n"])));
|
|
88
94
|
|
|
89
95
|
exports.StyledTableFooter = StyledTableFooter;
|
|
90
96
|
|
|
91
|
-
var StyledTableFooterContent = _styledComponents.default.div(
|
|
97
|
+
var StyledTableFooterContent = _styledComponents.default.div(_templateObject18 || (_templateObject18 = (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);
|
|
92
98
|
|
|
93
99
|
exports.StyledTableFooterContent = StyledTableFooterContent;
|
|
94
100
|
|
|
95
|
-
var StyledTableFooterCurrentInfo = _styledComponents.default.span(
|
|
101
|
+
var StyledTableFooterCurrentInfo = _styledComponents.default.span(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0 16px;\n ", "\n"])), (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
|
|
96
102
|
|
|
97
103
|
exports.StyledTableFooterCurrentInfo = StyledTableFooterCurrentInfo;
|
|
98
104
|
|
|
99
|
-
var StyledTableFooterControls = _styledComponents.default.div(
|
|
105
|
+
var StyledTableFooterControls = _styledComponents.default.div(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n"])));
|
|
100
106
|
|
|
101
107
|
exports.StyledTableFooterControls = StyledTableFooterControls;
|
|
102
108
|
|
|
103
|
-
var StyledTableSpinner = _styledComponents.default.div(
|
|
109
|
+
var StyledTableSpinner = _styledComponents.default.div(_templateObject21 || (_templateObject21 = (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);
|
|
104
110
|
|
|
105
111
|
exports.StyledTableSpinner = StyledTableSpinner;
|
|
106
112
|
|
|
107
|
-
var StyledTableFooterCollapseButton = _styledComponents.default.button(
|
|
113
|
+
var StyledTableFooterCollapseButton = _styledComponents.default.button(_templateObject22 || (_templateObject22 = (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);
|
|
108
114
|
|
|
109
115
|
exports.StyledTableFooterCollapseButton = StyledTableFooterCollapseButton;
|
|
116
|
+
|
|
117
|
+
var StyledTableBodyWrapper = _styledComponents.default.div(_templateObject23 || (_templateObject23 = (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
|
+
|
|
119
|
+
exports.StyledTableBodyWrapper = StyledTableBodyWrapper;
|
|
110
120
|
//# sourceMappingURL=TableStyles.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","
|
|
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","span","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 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.cjs"}
|
|
@@ -3,9 +3,10 @@
|
|
|
3
3
|
*/
|
|
4
4
|
export declare const TableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
5
5
|
export declare const StyledTable: import("styled-components").StyledComponent<"table", any, {}, never>;
|
|
6
|
-
export declare const StyledTableHeader: import("styled-components").StyledComponent<"
|
|
7
|
-
export declare const StyledTableHeaderTitle: import("styled-components").StyledComponent<"
|
|
6
|
+
export declare const StyledTableHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
7
|
+
export declare const StyledTableHeaderTitle: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
8
8
|
export declare const StyledTableHeaderTitleContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
9
|
+
export declare const StyledTableHeaderRow: import("styled-components").StyledComponent<"thead", any, {}, never>;
|
|
9
10
|
export declare const StyledTableHeaderColumns: import("styled-components").StyledComponent<"tr", any, {}, never>;
|
|
10
11
|
export declare const StyledTableHeaderColumnContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
11
12
|
export declare const StyledTableHeaderColumn: import("styled-components").StyledComponent<"th", any, {}, never>;
|
|
@@ -16,9 +17,10 @@ export declare const StyledTableCell: import("styled-components").StyledComponen
|
|
|
16
17
|
export declare const StyledTableCellContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
17
18
|
export declare const StyledTableCellIcon: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
18
19
|
export declare const StyledTableCellText: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
19
|
-
export declare const StyledTableFooter: import("styled-components").StyledComponent<"
|
|
20
|
+
export declare const StyledTableFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
20
21
|
export declare const StyledTableFooterContent: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
21
22
|
export declare const StyledTableFooterCurrentInfo: import("styled-components").StyledComponent<"span", any, {}, never>;
|
|
22
23
|
export declare const StyledTableFooterControls: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
23
24
|
export declare const StyledTableSpinner: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
24
25
|
export declare const StyledTableFooterCollapseButton: import("styled-components").StyledComponent<"button", any, {}, never>;
|
|
26
|
+
export declare const StyledTableBodyWrapper: import("styled-components").StyledComponent<"div", 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;
|
|
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;
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Import third-party libraries.
|
|
@@ -10,33 +10,36 @@ import styled from 'styled-components';
|
|
|
10
10
|
* Import custom style properties.
|
|
11
11
|
*/
|
|
12
12
|
|
|
13
|
-
import { COLORS, focusStyles } from '../styles';
|
|
13
|
+
import { COLORS, focusStyles, scrollBarStyling } from '../styles';
|
|
14
14
|
import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../styles/typography';
|
|
15
15
|
import { Z_INDEXES } from '../styles/z-indexes';
|
|
16
16
|
import { StyledCheckBox } from '../InputFields/Checkbox';
|
|
17
|
+
import { Size } from "../types";
|
|
17
18
|
/**
|
|
18
19
|
* Table styles
|
|
19
20
|
*/
|
|
20
21
|
|
|
21
22
|
export var TableWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
22
23
|
export var StyledTable = styled.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: transparent;\n width: 100%;\n\n &.fixed {\n table-layout: fixed;\n }\n\n &.auto {\n table-layout: auto;\n }\n"])));
|
|
23
|
-
export var StyledTableHeader = styled.
|
|
24
|
-
export var StyledTableHeaderTitle = styled.
|
|
24
|
+
export var StyledTableHeader = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
|
|
25
|
+
export var StyledTableHeaderTitle = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n"])));
|
|
25
26
|
export var StyledTableHeaderTitleContent = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\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 ", ";\n border-top: 2px solid ", ";\n padding: 0 16px;\n\n ", "\n .title-menu {\n margin-right: -16px;\n }\n"])), COLORS.neutral_200, COLORS.neutral_200, ComponentLStyling(ComponentTextStyle.Bold, COLORS.black));
|
|
26
|
-
export var
|
|
27
|
-
export var
|
|
28
|
-
export var
|
|
29
|
-
export var
|
|
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
|
|
27
|
+
export var StyledTableHeaderRow = styled.thead(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
|
|
28
|
+
export var StyledTableHeaderColumns = styled.tr(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n"])));
|
|
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 StyledTableHeaderColumn = styled.th(_templateObject9 || (_templateObject9 = _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);
|
|
31
|
+
export var StyledTableBodyRow = styled.tr(_templateObject10 || (_templateObject10 = _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);
|
|
32
|
+
export var StyledTableNoRowsLabelRow = styled.tr(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n position: relative;\n outline: none;\n background-color: ", ";\n"])), COLORS.neutral_50);
|
|
33
|
+
export var StyledTableBody = styled.tbody(_templateObject12 || (_templateObject12 = _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);
|
|
34
|
+
export var StyledTableCell = styled.td(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral([""])));
|
|
35
|
+
export var StyledTableCellContent = styled.div(_templateObject14 || (_templateObject14 = _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);
|
|
36
|
+
export var StyledTableCellIcon = styled.div(_templateObject15 || (_templateObject15 = _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);
|
|
37
|
+
export var StyledTableCellText = styled.span(_templateObject16 || (_templateObject16 = _taggedTemplateLiteral(["\n padding: 12px 0;\n"])));
|
|
38
|
+
export var StyledTableFooter = styled.div(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n"])));
|
|
39
|
+
export var StyledTableFooterContent = styled.div(_templateObject18 || (_templateObject18 = _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);
|
|
40
|
+
export var StyledTableFooterCurrentInfo = styled.span(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n padding: 0 16px;\n ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
|
|
41
|
+
export var StyledTableFooterControls = styled.div(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
42
|
+
export var StyledTableSpinner = styled.div(_templateObject21 || (_templateObject21 = _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);
|
|
43
|
+
export var StyledTableFooterCollapseButton = styled.button(_templateObject22 || (_templateObject22 = _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);
|
|
44
|
+
export var StyledTableBodyWrapper = styled.div(_templateObject23 || (_templateObject23 = _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));
|
|
42
45
|
//# sourceMappingURL=TableStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","focusStyles","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","StyledCheckBox","TableWrapper","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","neutral_200","Bold","black","StyledTableHeaderColumns","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","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","backdrop","StyledTableFooterCollapseButton","button"],"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} 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';\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.thead`\n`;\n\nexport const StyledTableHeaderTitle = styled.tr`\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 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.tfoot`\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"],"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","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"}
|