@laerdal/life-react-components 1.5.1-dev.15 → 1.5.1-dev.18

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.
@@ -33,7 +33,7 @@ var SegmentControlItemBackground = _styledComponents.default.div(_templateObject
33
33
 
34
34
  exports.SegmentControlItemBackground = SegmentControlItemBackground;
35
35
 
36
- var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n pointer-events: none;\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), _styles.Z_INDEXES.focus, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.active, SegmentControlItemContent, _styles.COLORS.primary_200, _styles.COLORS.primary_800, SegmentControlItemContent, _styles.COLORS.neutral_300, SegmentControlItemContent, _styles.COLORS.primary_500, _styles.COLORS.white, SegmentControlItemContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
36
+ var SegmentControlItemWrapper = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), _styles.Z_INDEXES.focus, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.hover, SegmentControlItemContent, _styles.COLORS.primary_100, _styles.COLORS.primary_700, _styles.Z_INDEXES.active, SegmentControlItemContent, _styles.COLORS.primary_200, _styles.COLORS.primary_800, SegmentControlItemContent, _styles.COLORS.neutral_300, SegmentControlItemContent, _styles.COLORS.primary_500, _styles.COLORS.white, SegmentControlItemContent, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300);
37
37
 
38
38
  exports.SegmentControlItemWrapper = SegmentControlItemWrapper;
39
39
 
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","Z_INDEXES","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentTextStyle","Bold","SegmentControl","items","size","Size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","defaultOnMouseDownHandler","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n pointer-events: none;\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.cjs"}
1
+ {"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["SegmentControlItemContent","styled","div","COLORS","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","Z_INDEXES","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","ComponentTextStyle","Bold","SegmentControl","items","size","Size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","defaultOnMouseDownHandler","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.cjs"}
@@ -11,7 +11,7 @@ import { defaultOnMouseDownHandler } from '../common';
11
11
  import { jsx as _jsx } from "react/jsx-runtime";
12
12
  export var SegmentControlItemContent = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ", ";\n"])), COLORS.neutral_600);
13
13
  export var SegmentControlItemBackground = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ", ";\n padding: 4px 0px;\n"])), COLORS.neutral_20);
14
- export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n pointer-events: none;\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), Z_INDEXES.focus, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.hover, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
14
+ export var SegmentControlItemWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ", ";\n outline: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &:active {\n z-index: ", ";\n\n ", " {\n background-color: ", ";\n color: ", ";\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ", " {\n background-color: transparent;\n color: ", ";\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ", " {\n background-color: ", ";\n color: ", ";\n }\n }\n"])), Z_INDEXES.focus, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.hover, SegmentControlItemContent, COLORS.primary_100, COLORS.primary_700, Z_INDEXES.active, SegmentControlItemContent, COLORS.primary_200, COLORS.primary_800, SegmentControlItemContent, COLORS.neutral_300, SegmentControlItemContent, COLORS.primary_500, COLORS.white, SegmentControlItemContent, COLORS.neutral_100, COLORS.neutral_300);
15
15
  export var SegmentControlWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ", ":first-of-type {\n ", " {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ", ":last-of-type {\n ", " {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ", " {\n ", "\n min-height: 32px;\n }\n }\n\n &.medium {\n ", " {\n ", "\n min-height: 40px;\n }\n }\n"])), SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemWrapper, SegmentControlItemBackground, SegmentControlItemContent, ComponentSStyling(ComponentTextStyle.Bold, null), SegmentControlItemContent, ComponentMStyling(ComponentTextStyle.Bold, null));
16
16
 
17
17
  var SegmentControl = function SegmentControl(_ref) {
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n pointer-events: none;\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.js"}
1
+ {"version":3,"sources":["../../src/SegmentControl/SegmentControl.tsx"],"names":["React","Size","styled","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","Z_INDEXES","defaultOnMouseDownHandler","SegmentControlItemContent","div","neutral_600","SegmentControlItemBackground","neutral_20","SegmentControlItemWrapper","focus","primary_100","primary_700","hover","active","primary_200","primary_800","neutral_300","primary_500","white","neutral_100","SegmentControlWrapper","Bold","SegmentControl","items","size","Medium","onChange","selected","onKeyPress","e","item","key","document","activeElement","blur","disabled","onClick","map","a","i","undefined","content"],"mappings":"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","sourcesContent":["import React from 'react';\nimport {Size} from '../types';\nimport styled from 'styled-components';\nimport {COLORS, ComponentMStyling, ComponentSStyling, ComponentTextStyle, Z_INDEXES} from '../styles';\nimport {defaultOnMouseDownHandler} from '../common';\n\n\nexport const SegmentControlItemContent = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n border-radius: 8px;\n padding: 0 16px;\n\n background-color: transparent;\n color: ${COLORS.neutral_600};\n`\n\nexport const SegmentControlItemBackground = styled.div`\n flex: 1;\n display: flex;\n flex-direction: row;\n align-items: center;\n background-color: ${COLORS.neutral_20};\n padding: 4px 0px;\n`;\n\nexport const SegmentControlItemWrapper = styled.div`\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n flex: 1;\n cursor: pointer;\n min-height: 48px;\n\n &:focus {\n z-index: ${Z_INDEXES.focus};\n outline: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }\n }\n\n &:hover {\n z-index: ${Z_INDEXES.hover};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_700};\n }\n }\n\n &:active {\n z-index: ${Z_INDEXES.active};\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_200};\n color: ${COLORS.primary_800};\n box-shadow: none;\n }\n }\n\n &.disabled {\n cursor: not-allowed;\n\n ${SegmentControlItemContent} {\n background-color: transparent;\n color: ${COLORS.neutral_300};\n }\n }\n\n &.selected {\n cursor: default;\n pointer-events: none;\n\n ${SegmentControlItemContent} {\n background-color: ${COLORS.primary_500};\n color: ${COLORS.white};\n }\n }\n\n &.selected.disabled {\n cursor: not-allowed;\n pointer-events: unset;\n \n ${SegmentControlItemContent} {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n }\n }\n`;\n\nexport const SegmentControlWrapper = styled.div`\n width: 100%;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n ${SegmentControlItemWrapper}:first-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-left-radius: 12px;\n border-top-left-radius: 12px;\n padding-left: 4px;\n }\n }\n\n ${SegmentControlItemWrapper}:last-of-type {\n ${SegmentControlItemBackground} {\n border-bottom-right-radius: 12px;\n border-top-right-radius: 12px;\n padding-right: 4px;\n }\n }\n\n\n &.small {\n ${SegmentControlItemContent} {\n ${ComponentSStyling(ComponentTextStyle.Bold, null)}\n min-height: 32px;\n }\n }\n\n &.medium {\n ${SegmentControlItemContent} {\n ${ComponentMStyling(ComponentTextStyle.Bold, null)}\n min-height: 40px;\n }\n }\n`;\n\n\nexport interface SegmentControlItem {\n key: string\n disabled?: boolean;\n content: React.ReactNode | string;\n}\n\ninterface SegmentControlProps {\n items: SegmentControlItem[];\n selected: string;\n onChange: (value: string) => void;\n size?: Size.Small | Size.Medium;\n}\n\nconst SegmentControl: React.FunctionComponent<SegmentControlProps> = ({\n items,\n size = Size.Medium,\n onChange,\n selected\n }) => {\n const onKeyPress = (e: React.KeyboardEvent<HTMLDivElement>, item: SegmentControlItem) => {\n if (e.key === 'Enter' || e.key === ' ') {\n //@ts-ignore\n document?.activeElement?.blur();\n !item.disabled && onChange(item.key);\n }\n };\n\n const onClick = (e: React.MouseEvent, item: SegmentControlItem) => {\n !item.disabled && onChange(item.key);\n }\n\n return (\n <SegmentControlWrapper className={size}>\n {items.map((a, i) =>\n <SegmentControlItemWrapper key={a.key || i}\n className={(a.disabled ? 'disabled' : '') + (a.key === selected ? ' selected' : '')}\n tabIndex={a.disabled || a.key === selected ? -1 : 0}\n onClick={a.disabled ? undefined : (e) => onClick(e, a)}\n onMouseDown={defaultOnMouseDownHandler}\n onKeyPress={a.disabled ? undefined : (e) => onKeyPress(e, a)}>\n <SegmentControlItemBackground>\n <SegmentControlItemContent>\n {a.content}\n </SegmentControlItemContent>\n </SegmentControlItemBackground>\n </SegmentControlItemWrapper>)\n }\n </SegmentControlWrapper>\n );\n};\n\nexport default SegmentControl;\n"],"file":"SegmentControl.js"}
package/dist/index.cjs CHANGED
@@ -445,17 +445,4 @@ Object.keys(_SegmentControl).forEach(function (key) {
445
445
  }
446
446
  });
447
447
  });
448
-
449
- var _Card = require("./Card");
450
-
451
- Object.keys(_Card).forEach(function (key) {
452
- if (key === "default" || key === "__esModule") return;
453
- if (key in exports && exports[key] === _Card[key]) return;
454
- Object.defineProperty(exports, key, {
455
- enumerable: true,
456
- get: function get() {
457
- return _Card[key];
458
- }
459
- });
460
- });
461
448
  //# sourceMappingURL=index.cjs.map
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './Card';\n"],"file":"index.cjs"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;AACA;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\n"],"file":"index.cjs"}
package/dist/index.d.ts CHANGED
@@ -32,4 +32,3 @@ export * from './common';
32
32
  export * from './QuizButton';
33
33
  export * from './LinearProgression';
34
34
  export * from './SegmentControl';
35
- export * from './Card';
package/dist/index.js CHANGED
@@ -32,5 +32,4 @@ export * from './common';
32
32
  export * from './QuizButton';
33
33
  export * from './LinearProgression';
34
34
  export * from './SegmentControl';
35
- export * from './Card';
36
35
  //# sourceMappingURL=index.js.map
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd;AACA,cAAc,kBAAd;AACA,cAAc,QAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\nexport * from './Card';\n"],"file":"index.js"}
1
+ {"version":3,"sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAd;AACA,cAAc,SAAd;AACA,cAAc,SAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,SAAd;AACA,cAAc,iBAAd;AACA,cAAc,UAAd;AACA,cAAc,oBAAd;AACA,cAAc,mBAAd;AACA,cAAc,WAAd;AACA,cAAc,WAAd;AACA,cAAc,uBAAd;AACA,cAAc,QAAd;AACA,cAAc,WAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,YAAd;AACA,cAAc,YAAd;AACA,cAAc,eAAd;AACA,cAAc,QAAd;AACA,cAAc,UAAd;AACA,cAAc,aAAd;AACA,cAAc,SAAd;AACA,cAAc,WAAd;AACA,cAAc,aAAd;AACA,cAAc,mBAAd;AACA,cAAc,aAAd;AACA,cAAc,YAAd;AACA,cAAc,UAAd;AACA,cAAc,cAAd;AACA,cAAc,qBAAd;AACA,cAAc,kBAAd","sourcesContent":["export * from './styles';\nexport * from './icons';\nexport * from './types';\nexport * from './AuthPage';\nexport * from './Button';\nexport * from './Breadcrumb';\nexport * from './Chips';\nexport * from './SkipToContent';\nexport * from './Footer';\nexport * from './LoadingIndicator';\nexport * from './MiniProductCard';\nexport * from './NavItem';\nexport * from './Layouts';\nexport * from './GlobalNavigationBar';\nexport * from './Tabs';\nexport * from './Banners';\nexport * from './Toasters';\nexport * from './InputFields';\nexport * from './Dropdown';\nexport * from './Switcher';\nexport * from './LoadingPage';\nexport * from './List';\nexport * from './Modals';\nexport * from './Paginator';\nexport * from './Table';\nexport * from './Toggles';\nexport * from './HyperLink';\nexport * from './NotificationDot';\nexport * from './Accordion';\nexport * from './Tooltips';\nexport * from './common';\nexport * from './QuizButton';\nexport * from './LinearProgression';\nexport * from './SegmentControl';\n"],"file":"index.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.5.1-dev.15",
3
+ "version": "1.5.1-dev.18",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [
@@ -1,101 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.default = exports.InteractionType = exports.CardTopLevelContainer = void 0;
11
-
12
- var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
13
-
14
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
15
-
16
- var _propTypes = _interopRequireDefault(require("prop-types"));
17
-
18
- var React = _interopRequireWildcard(require("react"));
19
-
20
- var _styledComponents = _interopRequireDefault(require("styled-components"));
21
-
22
- var _CardTopSection = _interopRequireDefault(require("./CardTopSection"));
23
-
24
- var _CardMiddleSection = _interopRequireDefault(require("./CardMiddleSection"));
25
-
26
- var _CardBottomSection = _interopRequireDefault(require("./CardBottomSection"));
27
-
28
- var _ = require("..");
29
-
30
- var _jsxRuntime = require("react/jsx-runtime");
31
-
32
- var _templateObject;
33
-
34
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
35
-
36
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
37
-
38
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
39
-
40
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
41
-
42
- var CardTopLevelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n background-color: ", ";\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ", "\n"])), _.COLORS.white, _.COLORS.neutral_200, function (props) {
43
- return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border: 1px solid rgba(0, 0, 0, 0);\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border: 1px solid #2E7FA1;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }" : "";
44
- });
45
-
46
- exports.CardTopLevelContainer = CardTopLevelContainer;
47
- var InteractionType;
48
- exports.InteractionType = InteractionType;
49
-
50
- (function (InteractionType) {
51
- InteractionType[InteractionType["None"] = 0] = "None";
52
- InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
53
- InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
54
- })(InteractionType || (exports.InteractionType = InteractionType = {}));
55
-
56
- var Card = function Card(_ref) {
57
- var _ref$interactionType = _ref.interactionType,
58
- interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
59
- onCardClicked = _ref.onCardClicked,
60
- topSectionProps = _ref.topSectionProps,
61
- middleSectionProps = _ref.middleSectionProps,
62
- bottomSectionProps = _ref.bottomSectionProps,
63
- disabled = _ref.disabled;
64
- var rootRef = React.useRef(null);
65
-
66
- var onCardClick = function onCardClick() {
67
- if (interactionType == InteractionType.Clickable) {
68
- var _rootRef$current;
69
-
70
- if (onCardClicked) onCardClicked();
71
- (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
72
- }
73
- };
74
-
75
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(CardTopLevelContainer, {
76
- disabled: disabled,
77
- ref: rootRef,
78
- tabIndex: interactionType == InteractionType.Clickable ? 0 : -1,
79
- interactionType: interactionType,
80
- onClick: onCardClick,
81
- children: [topSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardTopSection.default, _objectSpread(_objectSpread({}, topSectionProps), {}, {
82
- disabled: disabled,
83
- interactionType: interactionType
84
- })), middleSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardMiddleSection.default, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
85
- disabled: disabled,
86
- interactionType: interactionType
87
- })), bottomSectionProps && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBottomSection.default, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
88
- disabled: disabled,
89
- interactionType: interactionType
90
- }))]
91
- });
92
- };
93
-
94
- Card.propTypes = {
95
- interactionType: _propTypes.default.oneOf([0, 1, 2]).isRequired,
96
- onCardClicked: _propTypes.default.func.isRequired,
97
- disabled: _propTypes.default.bool.isRequired
98
- };
99
- var _default = Card;
100
- exports.default = _default;
101
- //# sourceMappingURL=Card.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Card/Card.tsx"],"names":["CardTopLevelContainer","styled","div","COLORS","white","neutral_200","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","React","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAEO,IAAMA,qBAAqB,GAAGC,0BAAOC,GAAV,ySACZC,SAAOC,KADK,EAMZD,SAAOE,WANK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,0eADK;AAAA,CAXyB,CAA3B;;;IAmCKF,e;;;WAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,+BAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGC,KAAK,CAACC,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIb,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACI,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,sBAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEZ,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,GAA+C,CAA/C,GAAmD,CAAC,CAAvH;AAA0H,IAAA,eAAe,EAAEF,eAA3I;AAA4J,IAAA,OAAO,EAAEa,WAArK;AAAA,eACGN,eAAe,iBAAI,qBAAC,uBAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,qBAAC,0BAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;eAgCaC,I","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n background-color: ${COLORS.white};\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ${props =>\n props.interactionType == InteractionType.Clickable && !props.disabled\n ? `\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border: 1px solid rgba(0, 0, 0, 0);\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border: 1px solid #2E7FA1;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }`\n : ``}\n`;\n\nexport enum InteractionType {\n None,\n Clickable,\n Selectable,\n}\n\nexport interface CardProps {\n interactionType: InteractionType;\n onCardClicked: () => {};\n disabled: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n interactionType = InteractionType.None,\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled\n}: CardProps) => {\n const rootRef = React.useRef<HTMLDivElement>(null);\n\n const onCardClick = () => {\n if (interactionType == InteractionType.Clickable) {\n if(onCardClicked) onCardClicked();\n rootRef.current?.blur();\n }\n };\n\n return (\n <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n </CardTopLevelContainer>\n );\n};\n\nexport default Card;\n"],"file":"Card.cjs"}
@@ -1,23 +0,0 @@
1
- import * as React from 'react';
2
- import { CardTopSectionProps } from './CardTopSection';
3
- import { CardMiddleSectionProps } from './CardMiddleSection';
4
- import { CardBottomSectionProps } from './CardBottomSection';
5
- export declare const CardTopLevelContainer: import("styled-components").StyledComponent<"div", any, {
6
- interactionType: InteractionType;
7
- disabled: boolean;
8
- }, never>;
9
- export declare enum InteractionType {
10
- None = 0,
11
- Clickable = 1,
12
- Selectable = 2
13
- }
14
- export interface CardProps {
15
- interactionType: InteractionType;
16
- onCardClicked: () => {};
17
- disabled: boolean;
18
- topSectionProps?: CardTopSectionProps;
19
- middleSectionProps?: CardMiddleSectionProps;
20
- bottomSectionProps?: CardBottomSectionProps;
21
- }
22
- declare const Card: React.FunctionComponent<CardProps>;
23
- export default Card;
package/dist/Card/Card.js DELETED
@@ -1,74 +0,0 @@
1
- import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
2
- import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
3
- import _pt from "prop-types";
4
-
5
- var _templateObject;
6
-
7
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
8
-
9
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
10
-
11
- import * as React from 'react';
12
- import styled from 'styled-components';
13
- import CardTopSection from './CardTopSection';
14
- import CardMiddleSection from './CardMiddleSection';
15
- import CardBottomSection from './CardBottomSection';
16
- import { COLORS } from '..';
17
- import { jsx as _jsx } from "react/jsx-runtime";
18
- import { jsxs as _jsxs } from "react/jsx-runtime";
19
- export var CardTopLevelContainer = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n background-color: ", ";\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border: 1px solid ", ";\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ", "\n"])), COLORS.white, COLORS.neutral_200, function (props) {
20
- return props.interactionType == InteractionType.Clickable && !props.disabled ? "\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border: 1px solid rgba(0, 0, 0, 0);\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border: 1px solid #2E7FA1;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }" : "";
21
- });
22
- export var InteractionType;
23
-
24
- (function (InteractionType) {
25
- InteractionType[InteractionType["None"] = 0] = "None";
26
- InteractionType[InteractionType["Clickable"] = 1] = "Clickable";
27
- InteractionType[InteractionType["Selectable"] = 2] = "Selectable";
28
- })(InteractionType || (InteractionType = {}));
29
-
30
- var Card = function Card(_ref) {
31
- var _ref$interactionType = _ref.interactionType,
32
- interactionType = _ref$interactionType === void 0 ? InteractionType.None : _ref$interactionType,
33
- onCardClicked = _ref.onCardClicked,
34
- topSectionProps = _ref.topSectionProps,
35
- middleSectionProps = _ref.middleSectionProps,
36
- bottomSectionProps = _ref.bottomSectionProps,
37
- disabled = _ref.disabled;
38
- var rootRef = React.useRef(null);
39
-
40
- var onCardClick = function onCardClick() {
41
- if (interactionType == InteractionType.Clickable) {
42
- var _rootRef$current;
43
-
44
- if (onCardClicked) onCardClicked();
45
- (_rootRef$current = rootRef.current) === null || _rootRef$current === void 0 ? void 0 : _rootRef$current.blur();
46
- }
47
- };
48
-
49
- return /*#__PURE__*/_jsxs(CardTopLevelContainer, {
50
- disabled: disabled,
51
- ref: rootRef,
52
- tabIndex: interactionType == InteractionType.Clickable ? 0 : -1,
53
- interactionType: interactionType,
54
- onClick: onCardClick,
55
- children: [topSectionProps && /*#__PURE__*/_jsx(CardTopSection, _objectSpread(_objectSpread({}, topSectionProps), {}, {
56
- disabled: disabled,
57
- interactionType: interactionType
58
- })), middleSectionProps && /*#__PURE__*/_jsx(CardMiddleSection, _objectSpread(_objectSpread({}, middleSectionProps), {}, {
59
- disabled: disabled,
60
- interactionType: interactionType
61
- })), bottomSectionProps && /*#__PURE__*/_jsx(CardBottomSection, _objectSpread(_objectSpread({}, bottomSectionProps), {}, {
62
- disabled: disabled,
63
- interactionType: interactionType
64
- }))]
65
- });
66
- };
67
-
68
- Card.propTypes = {
69
- interactionType: _pt.oneOf([0, 1, 2]).isRequired,
70
- onCardClicked: _pt.func.isRequired,
71
- disabled: _pt.bool.isRequired
72
- };
73
- export default Card;
74
- //# sourceMappingURL=Card.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Card/Card.tsx"],"names":["React","styled","CardTopSection","CardMiddleSection","CardBottomSection","COLORS","CardTopLevelContainer","div","white","neutral_200","props","interactionType","InteractionType","Clickable","disabled","Card","None","onCardClicked","topSectionProps","middleSectionProps","bottomSectionProps","rootRef","useRef","onCardClick","current","blur"],"mappings":";;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,cAAP,MAAoD,kBAApD;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,OAAOC,iBAAP,MAA0D,qBAA1D;AACA,SAASC,MAAT,QAAiD,IAAjD;;;AAEA,OAAO,IAAMC,qBAAqB,GAAGL,MAAM,CAACM,GAAV,2RACZF,MAAM,CAACG,KADK,EAMZH,MAAM,CAACI,WANK,EAW9B,UAAAC,KAAK;AAAA,SACLA,KAAK,CAACC,eAAN,IAAyBC,eAAe,CAACC,SAAzC,IAAsD,CAACH,KAAK,CAACI,QAA7D,0eADK;AAAA,CAXyB,CAA3B;AAmCP,WAAYF,eAAZ;;WAAYA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;AAAAA,EAAAA,e,CAAAA,e;GAAAA,e,KAAAA,e;;AAeZ,IAAMG,IAAwC,GAAG,SAA3CA,IAA2C,OAOhC;AAAA,kCANfJ,eAMe;AAAA,MANfA,eAMe,qCANGC,eAAe,CAACI,IAMnB;AAAA,MALfC,aAKe,QALfA,aAKe;AAAA,MAJfC,eAIe,QAJfA,eAIe;AAAA,MAHfC,kBAGe,QAHfA,kBAGe;AAAA,MAFfC,kBAEe,QAFfA,kBAEe;AAAA,MADfN,QACe,QADfA,QACe;AACf,MAAMO,OAAO,GAAGrB,KAAK,CAACsB,MAAN,CAA6B,IAA7B,CAAhB;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxB,QAAIZ,eAAe,IAAIC,eAAe,CAACC,SAAvC,EAAkD;AAAA;;AAChD,UAAGI,aAAH,EAAkBA,aAAa;AAC/B,0BAAAI,OAAO,CAACG,OAAR,sEAAiBC,IAAjB;AACD;AACF,GALD;;AAOA,sBACE,MAAC,qBAAD;AAAuB,IAAA,QAAQ,EAAEX,QAAjC;AAA2C,IAAA,GAAG,EAAEO,OAAhD;AAAyD,IAAA,QAAQ,EAAEV,eAAe,IAAIC,eAAe,CAACC,SAAnC,GAA+C,CAA/C,GAAmD,CAAC,CAAvH;AAA0H,IAAA,eAAe,EAAEF,eAA3I;AAA4J,IAAA,OAAO,EAAEY,WAArK;AAAA,eACGL,eAAe,iBAAI,KAAC,cAAD,kCAAoBA,eAApB;AAAqC,MAAA,QAAQ,EAAEJ,QAA/C;AAAyD,MAAA,eAAe,EAAEH;AAA1E,OADtB,EAEGQ,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEL,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAFzB,EAGGS,kBAAkB,iBAAI,KAAC,iBAAD,kCAAuBA,kBAAvB;AAA2C,MAAA,QAAQ,EAAEN,QAArD;AAA+D,MAAA,eAAe,EAAEH;AAAhF,OAHzB;AAAA,IADF;AAOD,CAxBD;;;AAREA,EAAAA,e;AACAM,EAAAA,a;AACAH,EAAAA,Q;;AAgCF,eAAeC,IAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport CardTopSection, { CardTopSectionProps } from './CardTopSection';\nimport CardMiddleSection, { CardMiddleSectionProps } from './CardMiddleSection';\nimport CardBottomSection, { CardBottomSectionProps } from './CardBottomSection';\nimport { COLORS, CommonInteractionStyling } from '..';\n\nexport const CardTopLevelContainer = styled.div<{ interactionType: InteractionType; disabled: boolean; }>`\n background-color: ${COLORS.white};\n\n box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);\n border-radius: 8px;\n\n border: 1px solid ${COLORS.neutral_200};\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n ${props =>\n props.interactionType == InteractionType.Clickable && !props.disabled\n ? `\n\n &:active, &.active-state {\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n\n &:hover:focus, &:hover {\n outline: none;\n overflow: visible;\n border: 1px solid rgba(0, 0, 0, 0);\n box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.15);\n }\n \n &:focus, &.focus-state {\n border: 1px solid #2E7FA1;\n outline: none;\n overflow: hidden;\n box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2E7FA1;\n }`\n : ``}\n`;\n\nexport enum InteractionType {\n None,\n Clickable,\n Selectable,\n}\n\nexport interface CardProps {\n interactionType: InteractionType;\n onCardClicked: () => {};\n disabled: boolean;\n topSectionProps?: CardTopSectionProps;\n middleSectionProps?: CardMiddleSectionProps;\n bottomSectionProps?: CardBottomSectionProps;\n}\n\nconst Card: React.FunctionComponent<CardProps> = ({\n interactionType = InteractionType.None,\n onCardClicked,\n topSectionProps,\n middleSectionProps,\n bottomSectionProps,\n disabled\n}: CardProps) => {\n const rootRef = React.useRef<HTMLDivElement>(null);\n\n const onCardClick = () => {\n if (interactionType == InteractionType.Clickable) {\n if(onCardClicked) onCardClicked();\n rootRef.current?.blur();\n }\n };\n\n return (\n <CardTopLevelContainer disabled={disabled} ref={rootRef} tabIndex={interactionType == InteractionType.Clickable ? 0 : -1} interactionType={interactionType} onClick={onCardClick}>\n {topSectionProps && <CardTopSection {...topSectionProps} disabled={disabled} interactionType={interactionType} />}\n {middleSectionProps && <CardMiddleSection {...middleSectionProps} disabled={disabled} interactionType={interactionType} />}\n {bottomSectionProps && <CardBottomSection {...bottomSectionProps} disabled={disabled} interactionType={interactionType} />}\n </CardTopLevelContainer>\n );\n};\n\nexport default Card;\n"],"file":"Card.js"}
@@ -1,135 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
- var _typeof = require("@babel/runtime/helpers/typeof");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports.default = void 0;
11
-
12
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
13
-
14
- var _propTypes = _interopRequireDefault(require("prop-types"));
15
-
16
- var React = _interopRequireWildcard(require("react"));
17
-
18
- var _styledComponents = _interopRequireDefault(require("styled-components"));
19
-
20
- var _ = require("..");
21
-
22
- var _assets = require("../assets");
23
-
24
- var _Button = require("../Button");
25
-
26
- var _jsxRuntime = require("react/jsx-runtime");
27
-
28
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
29
-
30
- function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
31
-
32
- function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
33
-
34
- var ProgressContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)([""])));
35
-
36
- var NotesContainer = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n height: 24px;\n margin-top: 24px;\n position: relative;\n"])));
37
-
38
- var AuthorContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n margin-top: 22px;\n display: flex;\n flex-direction: row;\n margin-bottom: 4px;\n align-items: center;\n ", "\n"])), function (props) {
39
- return props.disabled ? "\n color: ".concat(_.COLORS.neutral_300, ";\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ") : '';
40
- });
41
-
42
- var Divider = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n width: 100%;\n height: 1px;\n margin-bottom: 9px;\n"])), _.COLORS.neutral_100);
43
-
44
- var NoteLeft = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 0px;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ", ";\n\n svg {\n margin-right: 4px;\n }\n"])), _.COLORS.neutral_500);
45
-
46
- var NoteRight = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n position: absolute;\n top: 0px;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ", ";\n\n svg {\n margin-right: 4px;\n }\n"])), _.COLORS.neutral_500);
47
-
48
- var AuthorName = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n flex-grow: 2;\n"])));
49
-
50
- var ButtonRowContainer = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ", ";\n border-top-style: solid;\n\n button:last-child{\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ", ";\n }\n"])), _.COLORS.neutral_100, _.COLORS.neutral_600);
51
-
52
- var Container = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n cursor: ", ";\n\n ", " {\n ", "\n }\n"])), function (props) {
53
- return props.disabled ? 'not-allowed' : 'pointer';
54
- }, ButtonRowContainer, function (props) {
55
- return props.interactionType == _.InteractionType.Clickable ? "cursor: ".concat(props.disabled ? 'not-allowed' : 'auto', ";") : '';
56
- });
57
-
58
- var CardBottomSection = function CardBottomSection(_ref) {
59
- var interactionType = _ref.interactionType,
60
- progressLevel = _ref.progressLevel,
61
- progressMax = _ref.progressMax,
62
- _ref$progressType = _ref.progressType,
63
- progressType = _ref$progressType === void 0 ? _.LinearProgressionType.Line : _ref$progressType,
64
- noteLeft = _ref.noteLeft,
65
- noteLeftIcon = _ref.noteLeftIcon,
66
- noteRight = _ref.noteRight,
67
- noteRightIcon = _ref.noteRightIcon,
68
- authorName = _ref.authorName,
69
- actions = _ref.actions,
70
- disabled = _ref.disabled;
71
- var haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;
72
- return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
73
- disabled: disabled,
74
- interactionType: interactionType,
75
- children: [haveAtLeastSomething && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {}), progressLevel != undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressContainer, {
76
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.LinearProgression, {
77
- size: _.Size.Small,
78
- type: progressType,
79
- variant: _.LinearProgressionVariant.Normal,
80
- value: progressLevel,
81
- max: progressMax !== null && progressMax !== void 0 ? progressMax : progressLevel
82
- })
83
- }), (noteLeft || noteLeftIcon || noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NotesContainer, {
84
- children: [(noteLeft || noteLeftIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteLeft, {
85
- children: [noteLeftIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
86
- children: noteLeft
87
- })]
88
- }), (noteRight || noteRightIcon) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteRight, {
89
- children: [noteRightIcon, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
90
- children: noteRight
91
- })]
92
- })]
93
- }), authorName && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthorContainer, {
94
- disabled: disabled,
95
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(AuthorName, {
96
- children: authorName
97
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_assets.LaerdalLogo, {
98
- width: "80px",
99
- height: "43px"
100
- })]
101
- }), actions && /*#__PURE__*/(0, _jsxRuntime.jsx)(ButtonRowContainer, {
102
- children: actions.map(function (x) {
103
- return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
104
- disabled: disabled,
105
- variant: "secondary",
106
- shape: "square",
107
- action: function action(e) {
108
- e === null || e === void 0 ? void 0 : e.stopPropagation();
109
- x.onClick();
110
- },
111
- children: x.icon
112
- });
113
- })
114
- })]
115
- });
116
- };
117
-
118
- CardBottomSection.propTypes = {
119
- progressLevel: _propTypes.default.number,
120
- progressMax: _propTypes.default.number,
121
- noteLeft: _propTypes.default.string,
122
- noteLeftIcon: _propTypes.default.node,
123
- noteRight: _propTypes.default.string,
124
- noteRightIcon: _propTypes.default.node,
125
- authorName: _propTypes.default.string,
126
- actions: _propTypes.default.arrayOf(_propTypes.default.shape({
127
- icon: _propTypes.default.node.isRequired,
128
- onClick: _propTypes.default.func.isRequired
129
- })),
130
- logoSrc: _propTypes.default.string.isRequired,
131
- disabled: _propTypes.default.bool.isRequired
132
- };
133
- var _default = CardBottomSection;
134
- exports.default = _default;
135
- //# sourceMappingURL=CardBottomSection.cjs.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/Card/CardBottomSection.tsx"],"names":["ProgressContainer","styled","div","NotesContainer","AuthorContainer","props","disabled","COLORS","neutral_300","Divider","neutral_100","NoteLeft","neutral_500","NoteRight","AuthorName","ButtonRowContainer","neutral_600","Container","interactionType","InteractionType","Clickable","CardBottomSection","progressLevel","progressMax","progressType","LinearProgressionType","Line","noteLeft","noteLeftIcon","noteRight","noteRightIcon","authorName","actions","haveAtLeastSomething","undefined","Size","Small","LinearProgressionVariant","Normal","map","x","e","stopPropagation","onClick","icon","logoSrc"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { COLORS, InteractionType, LinearProgression, LinearProgressionType, LinearProgressionVariant, Size } from '..';\nimport { LaerdalLogo } from '../assets';\nimport { IconButton } from '../Button';\n\nexport interface ActionItem {\n icon: React.ReactNode;\n onClick: () => void;\n}\n\nexport interface CardBottomSectionProps {\n interactionType: InteractionType;\n progressLevel?: number;\n progressMax?: number;\n progressType?: LinearProgressionType;\n\n noteLeft?: string;\n noteLeftIcon?: React.ReactNode;\n noteRight?: string;\n noteRightIcon?: React.ReactNode;\n \n authorName?: string;\n actions?: ActionItem[];\n logoSrc: string;\n disabled: boolean;\n}\n\n\nconst ProgressContainer = styled.div``;\n\nconst NotesContainer = styled.div`\n height: 24px;\n margin-top: 24px;\n position: relative;\n`;\n\nconst AuthorContainer = styled.div<{disabled: boolean}>`\n margin-top: 22px;\n display: flex;\n flex-direction: row;\n margin-bottom: 4px;\n align-items: center;\n ${props => props.disabled ? `\n color: ${COLORS.neutral_300};\n\n svg, img {\n filter: grayscale(100%);\n }\n \n ` : ''}\n`;\n\nconst Divider = styled.div`\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n width: 100%;\n height: 1px;\n margin-bottom: 9px;\n`;\n\nconst NoteLeft = styled.div`\n position: absolute;\n top: 0px;\n left: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_500};\n\n svg {\n margin-right: 4px;\n }\n`;\nconst NoteRight = styled.div`\n position: absolute;\n top: 0px;\n right: 0px;\n display: flex;\n flex-direction: row;\n align-items: center;\n color: ${COLORS.neutral_500};\n\n svg {\n margin-right: 4px;\n }\n`;\n\nconst AuthorName = styled.div`\n flex-grow: 2;\n`;\n\nconst ButtonRowContainer = styled.div`\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n align-items: center;\n border-top: 1px;\n border-top-color: ${COLORS.neutral_100};\n border-top-style: solid;\n\n button:last-child{\n margin: 8px 0px 0px 0px;\n }\n\n button:not(:last-child) {\n margin: 8px 0px 0px 0px;\n }\n\n svg {\n color: ${COLORS.neutral_600};\n }\n`;\n\nconst Container = styled.div<{interactionType: InteractionType; disabled: boolean}>`\n padding: 0px 16px 8px 16px;\n width: calc(100% - 32px);\n cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};\n\n ${ButtonRowContainer} {\n ${props => props.interactionType == InteractionType.Clickable ? \n `cursor: ${props.disabled ? 'not-allowed' : 'auto'};` : ''}\n }\n`;\n\nconst CardBottomSection: React.FunctionComponent<CardBottomSectionProps> = ({\n interactionType,\n progressLevel,\n progressMax,\n progressType = LinearProgressionType.Line,\n noteLeft,\n noteLeftIcon,\n noteRight,\n noteRightIcon,\n authorName,\n actions,\n disabled\n}: CardBottomSectionProps) => {\n\n const haveAtLeastSomething = progressLevel != undefined || noteLeft || noteLeftIcon || noteRight || noteRightIcon || authorName;\n return (\n <Container disabled={disabled} interactionType={interactionType}>\n {haveAtLeastSomething && <Divider />}\n {progressLevel != undefined && <ProgressContainer>\n <LinearProgression size={Size.Small}\n type={progressType}\n variant={LinearProgressionVariant.Normal}\n value={progressLevel} \n max={progressMax ?? progressLevel} />\n </ProgressContainer>}\n\n {(noteLeft || noteLeftIcon || noteRight || noteRightIcon) && <NotesContainer>\n {(noteLeft || noteLeftIcon) && (\n <NoteLeft>\n {noteLeftIcon}\n <div>{noteLeft}</div>\n </NoteLeft>\n )}\n {(noteRight || noteRightIcon) && (\n <NoteRight>\n {noteRightIcon}\n <div>{noteRight}</div>\n </NoteRight>\n )}\n </NotesContainer>}\n\n {authorName && <AuthorContainer disabled={disabled}>\n <AuthorName>{authorName}</AuthorName>\n <LaerdalLogo width='80px' height='43px' />\n </AuthorContainer>}\n\n {actions && <ButtonRowContainer>\n {actions.map(x => (\n <IconButton disabled={disabled} variant=\"secondary\" shape=\"square\" action={(e) => {e?.stopPropagation(); x.onClick();}}>\n {x.icon}\n </IconButton>\n ))}\n </ButtonRowContainer>}\n </Container>\n );\n};\n\nexport default CardBottomSection;\n"],"file":"CardBottomSection.cjs"}
@@ -1,22 +0,0 @@
1
- import * as React from 'react';
2
- import { InteractionType, LinearProgressionType } from '..';
3
- export interface ActionItem {
4
- icon: React.ReactNode;
5
- onClick: () => void;
6
- }
7
- export interface CardBottomSectionProps {
8
- interactionType: InteractionType;
9
- progressLevel?: number;
10
- progressMax?: number;
11
- progressType?: LinearProgressionType;
12
- noteLeft?: string;
13
- noteLeftIcon?: React.ReactNode;
14
- noteRight?: string;
15
- noteRightIcon?: React.ReactNode;
16
- authorName?: string;
17
- actions?: ActionItem[];
18
- logoSrc: string;
19
- disabled: boolean;
20
- }
21
- declare const CardBottomSection: React.FunctionComponent<CardBottomSectionProps>;
22
- export default CardBottomSection;