@laerdal/life-react-components 1.3.2-dev.18.full → 1.3.2-dev.19

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.
Files changed (7) hide show
  1. package/dist/esm/Table/TableStyles.js +5 -3
  2. package/dist/esm/Table/TableStyles.js.map +1 -1
  3. package/dist/js/Table/TableStyles.js +2 -2
  4. package/dist/js/Table/TableStyles.js.map +1 -1
  5. package/dist/umd/Table/TableStyles.js +5 -3
  6. package/dist/umd/Table/TableStyles.js.map +1 -1
  7. package/package.json +1 -1
package/dist/esm/Table/TableStyles.js CHANGED
@@ -161,6 +161,11 @@ export const StyledTableCellContent = styled.div`
161
161
  &.center {
162
162
  justify-content: center;
163
163
  }
164
+
165
+ a:first-letter,
166
+ span:first-letter {
167
+ text-transform: uppercase;
168
+ }
164
169
  `;
165
170
  export const StyledTableCellIcon = styled.div`
166
171
  color: ${COLORS.neutral_700};
@@ -175,9 +180,6 @@ export const StyledTableCellIcon = styled.div`
175
180
  `;
176
181
  export const StyledTableCellText = styled.span`
177
182
  padding: 12px 0;
178
- &:first-letter{
179
- text-transform: uppercase;
180
- }
181
183
  `;
182
184
  export const StyledTableFooter = styled.tfoot`
183
185
  `;
package/dist/esm/Table/TableStyles.js.map CHANGED
@@ -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":"AAAA;AACA;AACA;AACA,OAAOA,MAAP,MAAmB,mBAAnB;AAEA;AACA;AACA;;AACA,SAAQC,MAAR,QAAqB,WAArB;AACA,SACEC,iBADF,EAEEC,iBAFF,EAGEC,iBAHF,EAIEC,kBAJF,EAKEC,kBALF,QAMO,sBANP;AAOA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA;AACA;AACA;;AAEA,OAAO,MAAMC,YAAY,GAAGR,MAAM,CAACS,GAAI;AACvC;AACA,CAFO;AAKP,OAAO,MAAMC,WAAW,GAAGV,MAAM,CAACW,KAAM;AACxC;AACA;AACA;AACA,CAJO;AAMP,OAAO,MAAMC,iBAAiB,GAAGZ,MAAM,CAACa,KAAM;AAC9C,CADO;AAGP,OAAO,MAAMC,sBAAsB,GAAGd,MAAM,CAACe,EAAG;AAChD,CADO;AAGP,OAAO,MAAMC,6BAA6B,GAAGhB,MAAM,CAACS,GAAI;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BR,MAAM,CAACgB,WAAY;AAChD,0BAA0BhB,MAAM,CAACgB,WAAY;AAC7C;AACA;AACA,IAAIf,iBAAiB,CAACG,kBAAkB,CAACa,IAApB,EAA0BjB,MAAM,CAACkB,KAAjC,CAAwC;AAC7D;AACA;AACA;AACA,CAfO;AAiBP,OAAO,MAAMC,wBAAwB,GAAGpB,MAAM,CAACe,EAAG;AAClD,CADO;AAGP,OAAO,MAAMM,8BAA8B,GAAGrB,MAAM,CAACS,GAAI;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BR,MAAM,CAACgB,WAAY;AAC7C,6BAA6BhB,MAAM,CAACgB,WAAY;AAChD,CAVO;AAYP,OAAO,MAAMK,uBAAuB,GAAGtB,MAAM,CAACuB,EAAG;AACjD,IAAInB,iBAAiB,CAACC,kBAAkB,CAACa,IAApB,EAA0BjB,MAAM,CAACuB,WAAjC,CAA8C;AACnE;AACA;AACA,sBAAsBvB,MAAM,CAACwB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BxB,MAAM,CAACyB,UAAW;AAC5C,eAAezB,MAAM,CAAC0B,WAAY;AAClC,iBAAiBpB,SAAS,CAACqB,KAAM;AACjC;AACA;AACA;AACA,0BAA0B3B,MAAM,CAAC4B,WAAY;AAC7C,eAAe5B,MAAM,CAAC6B,WAAY;AAClC;AACA,iBAAiBvB,SAAS,CAACwB,MAAO;AAClC;AACA;AACA;AACA;AACA,+BAA+B9B,MAAM,CAAC+B,QAAS,aAAY/B,MAAM,CAACgC,KAAM;AACxE,iBAAiB1B,SAAS,CAAC0B,KAAM;AACjC;AACA;AACA;AACA,eAAeZ,8BAA+B;AAC9C;AACA;AACA;AACA,sBAAsBA,8BAA+B;AACrD;AACA;AACA;AACA;AACA,wBAAwBpB,MAAM,CAACiC,UAAW;AAC1C;AACA;AACA,CA5CO;AA8CP,OAAO,MAAMC,kBAAkB,GAAGnC,MAAM,CAACe,EAAG;AAC5C;AACA;AACA;AACA;AACA;AACA,wBAAwBd,MAAM,CAACmC,WAAY;AAC3C,eAAe7B,SAAS,CAACqB,KAAM;AAC/B;AACA;AACA;AACA,wBAAwB3B,MAAM,CAACmC,WAAY;AAC3C;AACA,eAAe7B,SAAS,CAAC0B,KAAM;AAC/B;AACA;AACA;AACA;AACA;AACA,eAAe1B,SAAS,CAACwB,MAAO;AAChC;AACA;AACA,CAtBO;AAwBP,OAAO,MAAMM,eAAe,GAAGrC,MAAM,CAACsC,KAAM;AAC5C,IAAIH,kBAAmB;AACvB,wBAAwBlC,MAAM,CAACsC,WAAY;AAC3C;AACA;AACA,IAAIJ,kBAAmB;AACvB,wBAAwBlC,MAAM,CAACiC,UAAW;AAC1C;AACA,CARO;AAWP,OAAO,MAAMM,eAAe,GAAGxC,MAAM,CAACyC,EAAG,EAAlC;AAEP,OAAO,MAAMC,sBAAsB,GAAG1C,MAAM,CAACS,GAAI;AACjD;AACA;AACA;AACA,IAAIL,iBAAiB,CAACC,kBAAkB,CAACsC,OAApB,EAA6B1C,MAAM,CAACkB,KAApC,CAA2C;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA7BO;AA+BP,OAAO,MAAMyB,mBAAmB,GAAG5C,MAAM,CAACS,GAAI;AAC9C,WAAWR,MAAM,CAAC4C,WAAY;AAC9B;AACA;AACA;AACA;AACA,aAAa5C,MAAM,CAAC4C,WAAY;AAChC;AACA;AACA;AACA,CAVO;AAYP,OAAO,MAAMC,mBAAmB,GAAG9C,MAAM,CAAC+C,IAAK;AAC/C;AACA;AACA;AACA;AACA,CALO;AAQP,OAAO,MAAMC,iBAAiB,GAAGhD,MAAM,CAACiD,KAAM;AAC9C,CADO;AAGP,OAAO,MAAMC,wBAAwB,GAAGlD,MAAM,CAACS,GAAI;AACnD,0BAA0BR,MAAM,CAACgB,WAAY;AAC7C,6BAA6BhB,MAAM,CAACgB,WAAY;AAChD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAVO;AAYP,OAAO,MAAMkC,4BAA4B,GAAGnD,MAAM,CAAC+C,IAAK;AACxD;AACA,IAAIzC,kBAAkB,CAACD,kBAAkB,CAACsC,OAApB,EAA6B1C,MAAM,CAACkB,KAApC,CAA2C;AACjE,CAHO;AAKP,OAAO,MAAMiC,yBAAyB,GAAGpD,MAAM,CAACS,GAAI;AACpD;AACA,CAFO;AAIP,OAAO,MAAM4C,kBAAkB,GAAGrD,MAAM,CAACS,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CANO;AAQP,OAAO,MAAM6C,+BAA+B,GAAGtD,MAAM,CAACuD,MAAO;AAC7D;AACA,6BAA6BtD,MAAM,CAACgB,WAAY;AAChD,0BAA0BhB,MAAM,CAACgB,WAAY;AAC7C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBhB,MAAM,CAACwB,KAAM;AAC7B;AACA;AACA;AACA,IAAItB,iBAAiB,CAACE,kBAAkB,CAACa,IAApB,EAA0BjB,MAAM,CAACuD,WAAjC,CAA8C;AACnE;AACA;AACA,eAAejD,SAAS,CAAC0B,KAAM;AAC/B,aAAahC,MAAM,CAACuB,WAAY;AAChC;AACA;AACA;AACA;AACA,eAAejB,SAAS,CAACqB,KAAM;AAC/B,kBAAkB3B,MAAM,CAACyB,UAAW;AACpC,aAAazB,MAAM,CAAC0B,WAAY;AAChC;AACA;AACA;AACA;AACA,eAAepB,SAAS,CAACwB,MAAO;AAChC,kBAAkB9B,MAAM,CAAC4B,WAAY;AACrC,aAAa5B,MAAM,CAAC6B,WAAY;AAChC;AACA;AACA;AACA;AACA;AACA;AACA,CA1CO","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\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 &:first-letter{\n text-transform: uppercase;\n }\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","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"}
package/dist/js/Table/TableStyles.js CHANGED
@@ -66,7 +66,7 @@ var StyledTableCell = _styledComponents.default.td(_templateObject11 || (_templa
66
66
 
67
67
  exports.StyledTableCell = StyledTableCell;
68
68
 
69
- var StyledTableCellContent = _styledComponents.default.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"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
69
+ var StyledTableCellContent = _styledComponents.default.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"])), (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black));
70
70
 
71
71
  exports.StyledTableCellContent = StyledTableCellContent;
72
72
 
@@ -74,7 +74,7 @@ var StyledTableCellIcon = _styledComponents.default.div(_templateObject13 || (_t
74
74
 
75
75
  exports.StyledTableCellIcon = StyledTableCellIcon;
76
76
 
77
- var StyledTableCellText = _styledComponents.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n padding: 12px 0;\n &:first-letter{\n text-transform: uppercase;\n }\n"])));
77
+ var StyledTableCellText = _styledComponents.default.span(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n padding: 12px 0;\n"])));
78
78
 
79
79
  exports.StyledTableCellText = StyledTableCellText;
80
80
 
package/dist/js/Table/TableStyles.js.map CHANGED
@@ -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","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\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 &:first-letter{\n text-transform: uppercase;\n }\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":["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","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"}
package/dist/umd/Table/TableStyles.js CHANGED
@@ -185,6 +185,11 @@
185
185
  &.center {
186
186
  justify-content: center;
187
187
  }
188
+
189
+ a:first-letter,
190
+ span:first-letter {
191
+ text-transform: uppercase;
192
+ }
188
193
  `;
189
194
  const StyledTableCellIcon = exports.StyledTableCellIcon = _styledComponents2.default.div`
190
195
  color: ${_styles.COLORS.neutral_700};
@@ -199,9 +204,6 @@
199
204
  `;
200
205
  const StyledTableCellText = exports.StyledTableCellText = _styledComponents2.default.span`
201
206
  padding: 12px 0;
202
- &:first-letter{
203
- text-transform: uppercase;
204
- }
205
207
  `;
206
208
  const StyledTableFooter = exports.StyledTableFooter = _styledComponents2.default.tfoot`
207
209
  `;
package/dist/umd/Table/TableStyles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../../src/Table/TableStyles.ts"],"names":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentLStyling","ComponentTextStyle","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","ComponentSStyling","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","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","ComponentXSStyling","StyledTableFooterControls","StyledTableSpinner","StyledTableFooterCollapseButton","button","ComponentMStyling","neutral_600"],"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\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 &:first-letter{\n text-transform: uppercase;\n }\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":["TableWrapper","styled","div","StyledTable","table","StyledTableHeader","thead","StyledTableHeaderTitle","tr","StyledTableHeaderTitleContent","COLORS","neutral_200","ComponentLStyling","ComponentTextStyle","StyledTableHeaderColumns","StyledTableHeaderColumnContent","StyledTableHeaderColumn","th","ComponentSStyling","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","StyledTableCellIcon","neutral_700","StyledTableCellText","span","StyledTableFooter","tfoot","StyledTableFooterContent","StyledTableFooterCurrentInfo","ComponentXSStyling","StyledTableFooterControls","StyledTableSpinner","StyledTableFooterCollapseButton","button","ComponentMStyling","neutral_600"],"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.3.2-dev.18.full",
3
+ "version": "1.3.2-dev.19",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [