@laerdal/life-react-components 1.5.1-dev.1.full → 1.5.1-dev.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Accordion/ContentAccordion.cjs +3 -3
- package/dist/Accordion/ContentAccordion.cjs.map +1 -1
- package/dist/Accordion/ContentAccordion.js +2 -3
- package/dist/Accordion/ContentAccordion.js.map +1 -1
- package/dist/InputFields/Checkbox.cjs +5 -4
- package/dist/InputFields/Checkbox.cjs.map +1 -1
- package/dist/InputFields/Checkbox.d.ts +6 -0
- package/dist/InputFields/Checkbox.js +3 -4
- package/dist/InputFields/Checkbox.js.map +1 -1
- package/dist/InputFields/RadioButton.cjs +3 -3
- package/dist/InputFields/RadioButton.cjs.map +1 -1
- package/dist/InputFields/RadioButton.js +2 -3
- package/dist/InputFields/RadioButton.js.map +1 -1
- package/dist/QuizButton/QuizButton.cjs +1 -3
- package/dist/QuizButton/QuizButton.cjs.map +1 -1
- package/dist/QuizButton/QuizButton.js +2 -4
- package/dist/QuizButton/QuizButton.js.map +1 -1
- package/dist/Table/Table.cjs +1 -1
- package/dist/Table/Table.cjs.map +1 -1
- package/dist/Table/Table.js +1 -1
- package/dist/Table/Table.js.map +1 -1
- package/dist/Table/TableBody.cjs +27 -21
- package/dist/Table/TableBody.cjs.map +1 -1
- package/dist/Table/TableBody.js +26 -21
- package/dist/Table/TableBody.js.map +1 -1
- package/dist/Table/TableFooter.cjs +7 -6
- package/dist/Table/TableFooter.cjs.map +1 -1
- package/dist/Table/TableFooter.js +6 -6
- package/dist/Table/TableFooter.js.map +1 -1
- package/dist/Table/TableHeaders.cjs +6 -4
- package/dist/Table/TableHeaders.cjs.map +1 -1
- package/dist/Table/TableHeaders.js +5 -4
- package/dist/Table/TableHeaders.js.map +1 -1
- package/dist/Table/TableStyles.cjs +9 -7
- package/dist/Table/TableStyles.cjs.map +1 -1
- package/dist/Table/TableStyles.js +8 -7
- package/dist/Table/TableStyles.js.map +1 -1
- package/dist/Table/TableTypes.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focus_25","focus","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","neutral_100","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","
|
|
1
|
+
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentTextStyle","Bold","black","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","neutral_600","white","primary_20","primary_700","Z_INDEXES","hover","primary_100","primary_800","active","focus_25","focus","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","neutral_100","StyledTableCell","td","StyledTableCellContent","Regular","StyledCheckBox","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} 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\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 box-shadow: none !important;\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ${COLORS.focus_25}, 0 0 8px ${COLORS.focus};\n z-index: ${Z_INDEXES.focus};\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 background-color: ${COLORS.primary_200};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n\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_100};\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(0, 0, 0, 0.5);\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 outline: none;\n z-index: ${Z_INDEXES.focus};\n color: ${COLORS.neutral_600};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\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 box-shadow: none;\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.cjs"}
|
|
@@ -13,28 +13,29 @@ import styled from 'styled-components';
|
|
|
13
13
|
import { COLORS } from '../styles';
|
|
14
14
|
import { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXSStyling } from '../styles/typography';
|
|
15
15
|
import { Z_INDEXES } from '../styles/z-indexes';
|
|
16
|
+
import { StyledCheckBox } from '../InputFields/Checkbox';
|
|
16
17
|
/**
|
|
17
18
|
* Table styles
|
|
18
19
|
*/
|
|
19
20
|
|
|
20
21
|
export var TableWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n position: relative;\n"])));
|
|
21
|
-
export var StyledTable = styled.table(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n background: transparent;\n width: 100%;\n table-layout: fixed;\n"])));
|
|
22
|
+
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"])));
|
|
22
23
|
export var StyledTableHeader = styled.thead(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n"])));
|
|
23
24
|
export var StyledTableHeaderTitle = styled.tr(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n"])));
|
|
24
25
|
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));
|
|
25
26
|
export var StyledTableHeaderColumns = styled.tr(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n"])));
|
|
26
27
|
export var StyledTableHeaderColumnContent = styled.div(_templateObject7 || (_templateObject7 = _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);
|
|
27
|
-
export var StyledTableHeaderColumn = styled.th(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n position: relative;\n\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 box-shadow: none !important;\n z-index: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ", ", 0 0 8px ", ";\n z-index: ", ";\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
|
|
28
|
-
export var StyledTableBodyRow = styled.tr(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n cursor: pointer;\n position: relative;\n outline: none;\n\n &:hover {\n background-color: ", ";\n z-index: ", ";\n }\n\n &:focus {\n background-color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n z-index: ", ";\n outline: none;\n }\n\n &:active {\n box-shadow: none;\n z-index: ", ";\n }\n\n"])), COLORS.primary_200, Z_INDEXES.hover, COLORS.primary_200, Z_INDEXES.focus, Z_INDEXES.active);
|
|
29
|
-
export var StyledTableBody = styled.tbody(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n ", ":nth-child(odd):not(:hover):not(:focus):not(:active) {\n background-color: ", ";\n }\n\n ", ":nth-child(even):not(:hover):not(:focus):not(:active) {\n background-color: ", ";\n }\n"])), StyledTableBodyRow, COLORS.neutral_100, StyledTableBodyRow, COLORS.neutral_20);
|
|
28
|
+
export var StyledTableHeaderColumn = styled.th(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n ", "\n position: relative;\n\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 box-shadow: none !important;\n z-index: ", ";\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ", ", 0 0 8px ", ";\n z-index: ", ";\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, COLORS.focus_25, COLORS.focus, Z_INDEXES.focus, StyledTableHeaderColumnContent, StyledTableHeaderColumnContent, COLORS.neutral_20);
|
|
29
|
+
export var StyledTableBodyRow = styled.tr(_templateObject9 || (_templateObject9 = _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 background-color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n z-index: ", ";\n outline: none;\n }\n\n &:active {\n box-shadow: none;\n z-index: ", ";\n }\n\n"])), COLORS.primary_100, COLORS.primary_200, Z_INDEXES.hover, COLORS.primary_200, Z_INDEXES.focus, Z_INDEXES.active);
|
|
30
|
+
export var StyledTableBody = styled.tbody(_templateObject10 || (_templateObject10 = _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_100, StyledTableBodyRow, COLORS.neutral_20);
|
|
30
31
|
export var StyledTableCell = styled.td(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral([""])));
|
|
31
|
-
export var StyledTableCellContent = styled.div(_templateObject12 || (_templateObject12 = _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"])), ComponentSStyling(ComponentTextStyle.Regular, COLORS.black));
|
|
32
|
+
export var StyledTableCellContent = styled.div(_templateObject12 || (_templateObject12 = _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);
|
|
32
33
|
export var StyledTableCellIcon = styled.div(_templateObject13 || (_templateObject13 = _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);
|
|
33
34
|
export var StyledTableCellText = styled.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n padding: 12px 0;\n"])));
|
|
34
35
|
export var StyledTableFooter = styled.tfoot(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n"])));
|
|
35
36
|
export var StyledTableFooterContent = styled.div(_templateObject16 || (_templateObject16 = _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);
|
|
36
37
|
export var StyledTableFooterCurrentInfo = styled.span(_templateObject17 || (_templateObject17 = _taggedTemplateLiteral(["\n padding: 0 16px;\n ", "\n"])), ComponentXSStyling(ComponentTextStyle.Regular, COLORS.black));
|
|
37
38
|
export var StyledTableFooterControls = styled.div(_templateObject18 || (_templateObject18 = _taggedTemplateLiteral(["\n display: flex;\n"])));
|
|
38
|
-
export var StyledTableSpinner = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n top: 0;\n"])));
|
|
39
|
-
export var StyledTableFooterCollapseButton = styled.button(_templateObject20 || (_templateObject20 = _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 &:focus {\n outline: none;\n z-index: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n\n &:hover {\n z-index: ", ";\n background: ", ";\n color: ", ";\n }\n\n &:active {\n box-shadow: none;\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.
|
|
39
|
+
export var StyledTableSpinner = styled.div(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["\n height: 100%;\n width: 100%;\n position: absolute;\n background-color: rgba(0, 0, 0, 0.5);\n top: 0;\n z-index: ", ";\n"])), Z_INDEXES.backdrop);
|
|
40
|
+
export var StyledTableFooterCollapseButton = styled.button(_templateObject20 || (_templateObject20 = _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 outline: none;\n z-index: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n\n &:hover {\n z-index: ", ";\n background: ", ";\n color: ", ";\n }\n\n &:active {\n box-shadow: none;\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), Z_INDEXES.focus, COLORS.neutral_600, Z_INDEXES.hover, COLORS.primary_20, COLORS.primary_700, Z_INDEXES.active, COLORS.primary_100, COLORS.primary_800);
|
|
40
41
|
//# sourceMappingURL=TableStyles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Table/TableStyles.ts"],"names":["styled","COLORS","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","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","focus_25","focus","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","neutral_100","StyledTableCell","td","StyledTableCellContent","Regular","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","StyledTableFooterControls","StyledTableSpinner","StyledTableFooterCollapseButton","button","neutral_800"],"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} from '../styles';\nimport {\n ComponentLStyling,\n ComponentMStyling,\n ComponentSStyling,\n ComponentTextStyle,\n ComponentXSStyling\n} from '../styles/typography';\nimport {Z_INDEXES} from '../styles/z-indexes';\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 table-layout: fixed;\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\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 box-shadow: none !important;\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ${COLORS.focus_25}, 0 0 8px ${COLORS.focus};\n z-index: ${Z_INDEXES.focus};\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`;\n\nexport const StyledTableBodyRow = styled.tr`\n cursor: pointer;\n position: relative;\n outline: none;\n\n &:hover {\n background-color: ${COLORS.primary_200};\n z-index: ${Z_INDEXES.hover};\n }\n\n &:focus {\n background-color: ${COLORS.primary_200};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n\n`;\n\nexport const StyledTableBody = styled.tbody`\n ${StyledTableBodyRow}:nth-child(odd):not(:hover):not(:focus):not(:active) {\n background-color: ${COLORS.neutral_100};\n }\n\n ${StyledTableBodyRow}:nth-child(even):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\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(0, 0, 0, 0.5);\n top: 0;\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_800)}\n &:focus {\n outline: none;\n z-index: ${Z_INDEXES.focus};\n color: ${COLORS.neutral_600};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\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 box-shadow: none;\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","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","focus_25","focus","neutral_20","StyledTableBodyRow","primary_200","StyledTableBody","tbody","neutral_100","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} 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\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 box-shadow: none !important;\n z-index: ${Z_INDEXES.active};\n }\n\n &:focus {\n outline: none;\n box-shadow: 0 4px 12px ${COLORS.focus_25}, 0 0 8px ${COLORS.focus};\n z-index: ${Z_INDEXES.focus};\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 background-color: ${COLORS.primary_200};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n z-index: ${Z_INDEXES.focus};\n outline: none;\n }\n\n &:active {\n box-shadow: none;\n z-index: ${Z_INDEXES.active};\n }\n\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_100};\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(0, 0, 0, 0.5);\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 outline: none;\n z-index: ${Z_INDEXES.focus};\n color: ${COLORS.neutral_600};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\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 box-shadow: none;\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"}
|
|
@@ -25,6 +25,7 @@ export interface TableProps {
|
|
|
25
25
|
multiSelect?: boolean;
|
|
26
26
|
keyExpr?: string;
|
|
27
27
|
selectedRows?: any[];
|
|
28
|
+
layout?: TableLayout;
|
|
28
29
|
}
|
|
29
30
|
export interface TableColumn {
|
|
30
31
|
key: string;
|
|
@@ -45,6 +46,7 @@ export interface TableColumn {
|
|
|
45
46
|
export declare type TableColumnTypes = 'text' | 'boolean' | 'number' | 'custom' | 'button' | 'icon' | 'link';
|
|
46
47
|
export declare type TableJustification = 'right' | 'left' | 'center';
|
|
47
48
|
export declare type TableSortingDirection = 'asc' | 'desc';
|
|
49
|
+
export declare type TableLayout = 'auto' | 'fixed';
|
|
48
50
|
export interface TablePagination {
|
|
49
51
|
from: number;
|
|
50
52
|
to: number;
|