@laerdal/life-react-components 1.8.0-dev.32 → 1.8.0-dev.33

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 (9) hide show
  1. package/dist/InputFields/NumberField.cjs +5 -3
  2. package/dist/InputFields/NumberField.cjs.map +1 -1
  3. package/dist/InputFields/NumberField.js +5 -3
  4. package/dist/InputFields/NumberField.js.map +1 -1
  5. package/dist/ProfileButton/ProfileButton.cjs +2 -2
  6. package/dist/ProfileButton/ProfileButton.cjs.map +1 -1
  7. package/dist/ProfileButton/ProfileButton.js +3 -3
  8. package/dist/ProfileButton/ProfileButton.js.map +1 -1
  9. package/package.json +1 -1
package/dist/InputFields/NumberField.cjs CHANGED
@@ -65,9 +65,11 @@ var OperatorWrapper = _styledComponents.default.div(_templateObject7 || (_templa
65
65
  return props.size === _types.Size.Medium ? '4px 0' : '';
66
66
  }, _styles.COLORS.neutral_200);
67
67
 
68
- var NumberInput = _styledComponents.default.input(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%; \n height: ", "; \n border: none;\n color: ", ";\n padding: 0; \n ", "\n\n &:hover, &:focus, &:active {\n outline: none;\n }\n"])), function (props) {
68
+ var NumberInput = _styledComponents.default.input(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n width: 100%; \n height: ", "; \n border: none;\n color: ", ";\n padding: 0; \n ", "\n\n &:hover, &:focus, &:active {\n outline: none;\n }\n\n &::placeholder {\n ", "\n }\n"])), function (props) {
69
69
  return props.fieldSize === _types.Size.Small ? '20px' : '24px';
70
70
  }, _styles.COLORS.neutral_500, function (props) {
71
+ return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black);
72
+ }, function (props) {
71
73
  return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, null);
72
74
  });
73
75
 
@@ -79,9 +81,9 @@ var NoteIcon = _styledComponents.default.div(_templateObject10 || (_templateObje
79
81
 
80
82
  var NoteContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n margin-top: 5px;\n\n &.valid {\n ", " {\n color: ", ";\n }\n\n ", " {\n svg path {\n fill: ", ";\n }\n }\n }\n\n &.invalid {\n ", " {\n color: ", ";\n }\n\n ", " {\n svg path {\n fill: ", ";\n }\n }\n }\n"])), NoteLabel, _styles.COLORS.correct_500, NoteIcon, _styles.COLORS.correct_500, NoteLabel, _styles.COLORS.critical_500, NoteIcon, _styles.COLORS.critical_500);
81
83
 
82
- var InputContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n min-width: 160px;\n height: ", ";\n display: flex;\n border: 0;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ", ";\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.disabled {\n border: 1px solid ", ";\n cursor: not-allowed;\n \n ", "{\n color: ", ";\n }\n\n ", "{\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.readOnly {\n background: ", ";\n border: 1px solid ", ";\n cursor: not-allowed;\n\n ", "{\n background: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.valid {\n border: 2px solid ", ";\n box-shadow: none;\n }\n\n &.invalid {\n border: 2px solid ", ";\n box-shadow: none;\n }\n"])), function (props) {
84
+ var InputContainer = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n min-width: 160px;\n height: ", ";\n display: flex;\n border: 0;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ", ";\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.disabled {\n border: 1px solid ", ";\n cursor: not-allowed;\n \n ", "{\n color: ", ";\n }\n\n ", "{\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n\n &::placeholder {\n color: ", ";\n }\n }\n }\n\n &.readOnly {\n background: ", ";\n border: 1px solid ", ";\n cursor: not-allowed;\n\n ", "{\n background: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.valid {\n border: 2px solid ", ";\n box-shadow: none;\n }\n\n &.invalid {\n border: 2px solid ", ";\n box-shadow: none;\n }\n"])), function (props) {
83
85
  return props.size === _types.Size.Small ? '48px' : '56px';
84
- }, _styles.COLORS.neutral_400, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, PrefixContainer, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_100, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
86
+ }, _styles.COLORS.neutral_400, _styles.COLORS.primary_700, _styles.COLORS.primary_800, _styles.COLORS.primary_800, _styles.COLORS.neutral_100, PrefixContainer, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, NumberInput, _styles.COLORS.neutral_100, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
85
87
 
86
88
  var NumberField = function NumberField(_ref) {
87
89
  var _ref$size = _ref.size,
package/dist/InputFields/NumberField.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["Container","styled","div","LabelContainer","COLORS","neutral_500","props","size","Size","Small","ComponentTextStyle","Regular","LabelText","LabelIcon","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","React","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{size: Size}>`\n margin-bottom: 4px;\n color: ${COLORS.neutral_500};\n display: flex;\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n svg {\n height: 9px;\n width: 9px;\n }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n display: flex;\n flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n margin-right: 4px;\n width: ${props => props.size === Size.Small?'10px':'11px'};\n height: ${props => props.size === Size.Small?'20px':'24px'};\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n display: flex;\n margin:${props => props.size === Size.Medium?'4px 0':''};\n svg {\n height: 14px;\n width: 14px;\n }\n .divider {\n margin: 16px 0;\n background: ${COLORS.neutral_200};\n width: 1px;\n }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n width: 100%; \n height: ${props => props.fieldSize === Size.Small?'20px':'24px'}; \n border: none;\n color: ${COLORS.neutral_500};\n padding: 0; \n ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n\n &:hover, &:focus, &:active {\n outline: none;\n }\n`;\n\nconst NoteLabel = styled.div<{size: Size}>`\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)} \n`;\n\nconst NoteIcon = styled.div`\n svg {\n height: 16px;\n }\n`;\n\nconst NoteContainer = styled.div`\n display: flex;\n margin-top: 5px;\n\n &.valid {\n ${NoteLabel} {\n color: ${COLORS.correct_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.correct_500};\n }\n }\n }\n\n &.invalid {\n ${NoteLabel} {\n color: ${COLORS.critical_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.critical_500};\n }\n }\n }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n min-width: 160px;\n height: ${props => props.size === Size.Small?'48px':'56px'};\n display: flex;\n border: 0;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &.disabled {\n border: 1px solid ${COLORS.neutral_100};\n cursor: not-allowed;\n \n ${PrefixContainer}{\n color: ${COLORS.neutral_300};\n }\n\n ${NumberInput}{\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.readOnly {\n background: ${COLORS.neutral_100};\n border: 1px solid ${COLORS.neutral_300};\n cursor: not-allowed;\n\n ${NumberInput}{\n background: ${COLORS.neutral_100};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.valid {\n border: 2px solid ${COLORS.correct_400};\n box-shadow: none;\n }\n\n &.invalid {\n border: 2px solid ${COLORS.critical_400};\n box-shadow: none;\n }\n`;\n\ntype NumberFieldProps = {\n size: Size.Small | Size.Medium;\n prefix?: string;\n interval?: number;\n label: string;\n note?: string;\n noteIcon?: React.ReactNode;\n required?: boolean;\n minValue?: number;\n maxValue?: number;\n allowNegative?: boolean;\n decimalPrecision?: number;\n disabled?: boolean;\n readOnly?: boolean;\n valid?: boolean;\n defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n {size=Size.Small, \n label,\n note, \n noteIcon, \n required, \n prefix,\n interval=1, \n minValue, \n maxValue, \n allowNegative, \n decimalPrecision, \n disabled=false, \n readOnly=false, \n valid,\n defaultVal}) => {\n const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n switch(e.key){\n case 'ArrowUp': addInterval();\n break;\n case 'ArrowDown': subtractInterval();\n break;\n default: break;\n }\n }\n\n const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.preventDefault();\n let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n \n let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/); \n let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n \n let val = e.target.value; \n if(val!==''){\n if(allowNegative && decimalPrecision){\n if(val.length===1 && val.charAt(0)==='-')\n setUserInput(val);\n else{\n if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n setUserInput(val);\n\n else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n setUserInput(val);\n \n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n setUserInput(val);\n }\n }\n\n else if(allowNegative){\n if(val.length===1 && val.charAt(0)==='-')\n setUserInput(val);\n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n setUserInput(val);\n }\n\n else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n if(decimalPrecisionRegex!.test(val))\n setUserInput(val);\n else if(decimalFormationRegEx.test(val))\n setUserInput(val);\n else if(!val.includes('.') && simpleRegex.test(val))\n setUserInput(val);\n }\n\n else if(simpleRegex.test(val) && isInRange(val, false)){\n setUserInput(val);\n }\n }\n\n if(val==='')\n setUserInput('');\n }\n\n const isInRange = (value: string, isDecimal: boolean): boolean => {\n let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n if(minValue && minValue>x)\n return false;\n else if(maxValue && maxValue<x)\n return false;\n else\n return true;\n }\n\n const addInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (minValue ?? 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val +=1;\n\n if(maxValue && maxValue>=val)\n setUserInput(val.toString());\n else if(!maxValue)\n setUserInput(val.toString());\n }\n }\n\n const subtractInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (maxValue ?? 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val -=1;\n \n if(minValue && minValue<=val)\n allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n else if(!minValue)\n allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n }\n }\n\n const isLocked = (input: string, operator: string): boolean => {\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n val = isNaN(val) && userInput === '' ? 0 : val;\n let operatorState = false;\n if(operator === 'add' && maxValue)\n operatorState = val < maxValue ? false : true;\n \n if(operator === 'subtract' && minValue)\n operatorState = val > minValue ? false : true;\n\n if(operator === 'subtract' && !minValue && !allowNegative)\n operatorState = val > 0 ? false : true;\n\n return operatorState;\n }\n\n return (\n <Container>\n <LabelContainer size={size}>\n {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n <SystemIcons.Asterisk color={COLORS.critical_500}/>\n </LabelIcon>\n }\n <LabelText>\n {label}\n </LabelText>\n </LabelContainer>\n\n <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n .concat(readOnly?' readOnly':'')\n .concat(fieldState?` ${fieldState}`:'')}>\n <InputWrapper size={size}>\n {prefix && <PrefixContainer size={size}>\n {prefix}\n </PrefixContainer>}\n <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n </InputWrapper>\n\n <OperatorWrapper data-testid={'operators'} size={size}>\n <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n <SystemIcons.Minus size='14px'/>\n </IconButton> \n <div className='divider'></div>\n <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n <SystemIcons.Plus size='14px'/>\n </IconButton>\n </OperatorWrapper>\n </InputContainer>\n\n {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n <NoteIcon>\n {noteIcon}\n </NoteIcon>\n <NoteLabel size={size}>\n {note}\n </NoteLabel> \n </NoteContainer>\n }\n </Container>\n ); \n}\n\nexport default NumberField;\n"],"file":"NumberField.cjs"}
1
+ {"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["Container","styled","div","LabelContainer","COLORS","neutral_500","props","size","Size","Small","ComponentTextStyle","Regular","LabelText","LabelIcon","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","black","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","React","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{size: Size}>`\n margin-bottom: 4px;\n color: ${COLORS.neutral_500};\n display: flex;\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n svg {\n height: 9px;\n width: 9px;\n }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n display: flex;\n flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n margin-right: 4px;\n width: ${props => props.size === Size.Small?'10px':'11px'};\n height: ${props => props.size === Size.Small?'20px':'24px'};\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n display: flex;\n margin:${props => props.size === Size.Medium?'4px 0':''};\n svg {\n height: 14px;\n width: 14px;\n }\n .divider {\n margin: 16px 0;\n background: ${COLORS.neutral_200};\n width: 1px;\n }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n width: 100%; \n height: ${props => props.fieldSize === Size.Small?'20px':'24px'}; \n border: none;\n color: ${COLORS.neutral_500};\n padding: 0; \n ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Regular, COLORS.black):ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n &:hover, &:focus, &:active {\n outline: none;\n }\n\n &::placeholder {\n ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n }\n`;\n\nconst NoteLabel = styled.div<{size: Size}>`\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)} \n`;\n\nconst NoteIcon = styled.div`\n svg {\n height: 16px;\n }\n`;\n\nconst NoteContainer = styled.div`\n display: flex;\n margin-top: 5px;\n\n &.valid {\n ${NoteLabel} {\n color: ${COLORS.correct_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.correct_500};\n }\n }\n }\n\n &.invalid {\n ${NoteLabel} {\n color: ${COLORS.critical_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.critical_500};\n }\n }\n }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n min-width: 160px;\n height: ${props => props.size === Size.Small?'48px':'56px'};\n display: flex;\n border: 0;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &.disabled {\n border: 1px solid ${COLORS.neutral_100};\n cursor: not-allowed;\n \n ${PrefixContainer}{\n color: ${COLORS.neutral_300};\n }\n\n ${NumberInput}{\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n\n &::placeholder {\n color: ${COLORS.neutral_300};\n }\n }\n }\n\n &.readOnly {\n background: ${COLORS.neutral_100};\n border: 1px solid ${COLORS.neutral_300};\n cursor: not-allowed;\n\n ${NumberInput}{\n background: ${COLORS.neutral_100};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.valid {\n border: 2px solid ${COLORS.correct_400};\n box-shadow: none;\n }\n\n &.invalid {\n border: 2px solid ${COLORS.critical_400};\n box-shadow: none;\n }\n`;\n\ntype NumberFieldProps = {\n size: Size.Small | Size.Medium;\n prefix?: string;\n interval?: number;\n label: string;\n note?: string;\n noteIcon?: React.ReactNode;\n required?: boolean;\n minValue?: number;\n maxValue?: number;\n allowNegative?: boolean;\n decimalPrecision?: number;\n disabled?: boolean;\n readOnly?: boolean;\n valid?: boolean;\n defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n {size=Size.Small, \n label,\n note, \n noteIcon, \n required, \n prefix,\n interval=1, \n minValue, \n maxValue, \n allowNegative, \n decimalPrecision, \n disabled=false, \n readOnly=false, \n valid,\n defaultVal}) => {\n const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n switch(e.key){\n case 'ArrowUp': addInterval();\n break;\n case 'ArrowDown': subtractInterval();\n break;\n default: break;\n }\n }\n\n const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.preventDefault();\n let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n \n let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/); \n let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n \n let val = e.target.value; \n if(val!==''){\n if(allowNegative && decimalPrecision){\n if(val.length===1 && val.charAt(0)==='-')\n setUserInput(val);\n else{\n if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n setUserInput(val);\n\n else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n setUserInput(val);\n \n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n setUserInput(val);\n }\n }\n\n else if(allowNegative){\n if(val.length===1 && val.charAt(0)==='-')\n setUserInput(val);\n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n setUserInput(val);\n }\n\n else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n if(decimalPrecisionRegex!.test(val))\n setUserInput(val);\n else if(decimalFormationRegEx.test(val))\n setUserInput(val);\n else if(!val.includes('.') && simpleRegex.test(val))\n setUserInput(val);\n }\n\n else if(simpleRegex.test(val) && isInRange(val, false)){\n setUserInput(val);\n }\n }\n\n if(val==='')\n setUserInput('');\n }\n\n const isInRange = (value: string, isDecimal: boolean): boolean => {\n let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n if(minValue && minValue>x)\n return false;\n else if(maxValue && maxValue<x)\n return false;\n else\n return true;\n }\n\n const addInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (minValue ?? 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val +=1;\n\n if(maxValue && maxValue>=val)\n setUserInput(val.toString());\n else if(!maxValue)\n setUserInput(val.toString());\n }\n }\n\n const subtractInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (maxValue ?? 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val -=1;\n \n if(minValue && minValue<=val)\n allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n else if(!minValue)\n allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n }\n }\n\n const isLocked = (input: string, operator: string): boolean => {\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n val = isNaN(val) && userInput === '' ? 0 : val;\n let operatorState = false;\n if(operator === 'add' && maxValue)\n operatorState = val < maxValue ? false : true;\n \n if(operator === 'subtract' && minValue)\n operatorState = val > minValue ? false : true;\n\n if(operator === 'subtract' && !minValue && !allowNegative)\n operatorState = val > 0 ? false : true;\n\n return operatorState;\n }\n\n return (\n <Container>\n <LabelContainer size={size}>\n {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n <SystemIcons.Asterisk color={COLORS.critical_500}/>\n </LabelIcon>\n }\n <LabelText>\n {label}\n </LabelText>\n </LabelContainer>\n\n <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n .concat(readOnly?' readOnly':'')\n .concat(fieldState?` ${fieldState}`:'')}>\n <InputWrapper size={size}>\n {prefix && <PrefixContainer size={size}>\n {prefix}\n </PrefixContainer>}\n <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n </InputWrapper>\n\n <OperatorWrapper data-testid={'operators'} size={size}>\n <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n <SystemIcons.Minus size='14px'/>\n </IconButton> \n <div className='divider'></div>\n <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n <SystemIcons.Plus size='14px'/>\n </IconButton>\n </OperatorWrapper>\n </InputContainer>\n\n {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n <NoteIcon>\n {noteIcon}\n </NoteIcon>\n <NoteLabel size={size}>\n {note}\n </NoteLabel> \n </NoteContainer>\n }\n </Container>\n ); \n}\n\nexport default NumberField;\n"],"file":"NumberField.cjs"}
package/dist/InputFields/NumberField.js CHANGED
@@ -34,9 +34,11 @@ var PrefixContainer = styled.div(_templateObject6 || (_templateObject6 = _tagged
34
34
  var OperatorWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n display: flex;\n margin:", ";\n svg {\n height: 14px;\n width: 14px;\n }\n .divider {\n margin: 16px 0;\n background: ", ";\n width: 1px;\n }\n"])), function (props) {
35
35
  return props.size === Size.Medium ? '4px 0' : '';
36
36
  }, COLORS.neutral_200);
37
- var NumberInput = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 100%; \n height: ", "; \n border: none;\n color: ", ";\n padding: 0; \n ", "\n\n &:hover, &:focus, &:active {\n outline: none;\n }\n"])), function (props) {
37
+ var NumberInput = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n width: 100%; \n height: ", "; \n border: none;\n color: ", ";\n padding: 0; \n ", "\n\n &:hover, &:focus, &:active {\n outline: none;\n }\n\n &::placeholder {\n ", "\n }\n"])), function (props) {
38
38
  return props.fieldSize === Size.Small ? '20px' : '24px';
39
39
  }, COLORS.neutral_500, function (props) {
40
+ return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black);
41
+ }, function (props) {
40
42
  return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null);
41
43
  });
42
44
  var NoteLabel = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n color: ", ";\n ", " \n"])), COLORS.neutral_500, function (props) {
@@ -44,9 +46,9 @@ var NoteLabel = styled.div(_templateObject9 || (_templateObject9 = _taggedTempla
44
46
  });
45
47
  var NoteIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n svg {\n height: 16px;\n }\n"])));
46
48
  var NoteContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n display: flex;\n margin-top: 5px;\n\n &.valid {\n ", " {\n color: ", ";\n }\n\n ", " {\n svg path {\n fill: ", ";\n }\n }\n }\n\n &.invalid {\n ", " {\n color: ", ";\n }\n\n ", " {\n svg path {\n fill: ", ";\n }\n }\n }\n"])), NoteLabel, COLORS.correct_500, NoteIcon, COLORS.correct_500, NoteLabel, COLORS.critical_500, NoteIcon, COLORS.critical_500);
47
- var InputContainer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n min-width: 160px;\n height: ", ";\n display: flex;\n border: 0;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ", ";\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.disabled {\n border: 1px solid ", ";\n cursor: not-allowed;\n \n ", "{\n color: ", ";\n }\n\n ", "{\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.readOnly {\n background: ", ";\n border: 1px solid ", ";\n cursor: not-allowed;\n\n ", "{\n background: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.valid {\n border: 2px solid ", ";\n box-shadow: none;\n }\n\n &.invalid {\n border: 2px solid ", ";\n box-shadow: none;\n }\n"])), function (props) {
49
+ var InputContainer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n min-width: 160px;\n height: ", ";\n display: flex;\n border: 0;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ", ";\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.disabled {\n border: 1px solid ", ";\n cursor: not-allowed;\n \n ", "{\n color: ", ";\n }\n\n ", "{\n color: ", ";\n cursor: not-allowed;\n pointer-events: none;\n\n &::placeholder {\n color: ", ";\n }\n }\n }\n\n &.readOnly {\n background: ", ";\n border: 1px solid ", ";\n cursor: not-allowed;\n\n ", "{\n background: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.valid {\n border: 2px solid ", ";\n box-shadow: none;\n }\n\n &.invalid {\n border: 2px solid ", ";\n box-shadow: none;\n }\n"])), function (props) {
48
50
  return props.size === Size.Small ? '48px' : '56px';
49
- }, COLORS.neutral_400, COLORS.primary_700, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_100, PrefixContainer, COLORS.neutral_300, NumberInput, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_300, NumberInput, COLORS.neutral_100, COLORS.correct_400, COLORS.critical_400);
51
+ }, COLORS.neutral_400, COLORS.primary_700, COLORS.primary_800, COLORS.primary_800, COLORS.neutral_100, PrefixContainer, COLORS.neutral_300, NumberInput, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_300, NumberInput, COLORS.neutral_100, COLORS.correct_400, COLORS.critical_400);
50
52
 
51
53
  var NumberField = function NumberField(_ref) {
52
54
  var _ref$size = _ref.size,
package/dist/InputFields/NumberField.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["React","styled","IconButton","SystemIcons","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","ComponentXSStyling","Size","Container","div","LabelContainer","neutral_500","props","size","Small","Regular","LabelText","LabelIcon","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{size: Size}>`\n margin-bottom: 4px;\n color: ${COLORS.neutral_500};\n display: flex;\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n svg {\n height: 9px;\n width: 9px;\n }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n display: flex;\n flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n margin-right: 4px;\n width: ${props => props.size === Size.Small?'10px':'11px'};\n height: ${props => props.size === Size.Small?'20px':'24px'};\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n display: flex;\n margin:${props => props.size === Size.Medium?'4px 0':''};\n svg {\n height: 14px;\n width: 14px;\n }\n .divider {\n margin: 16px 0;\n background: ${COLORS.neutral_200};\n width: 1px;\n }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n width: 100%; \n height: ${props => props.fieldSize === Size.Small?'20px':'24px'}; \n border: none;\n color: ${COLORS.neutral_500};\n padding: 0; \n ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n\n &:hover, &:focus, &:active {\n outline: none;\n }\n`;\n\nconst NoteLabel = styled.div<{size: Size}>`\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)} \n`;\n\nconst NoteIcon = styled.div`\n svg {\n height: 16px;\n }\n`;\n\nconst NoteContainer = styled.div`\n display: flex;\n margin-top: 5px;\n\n &.valid {\n ${NoteLabel} {\n color: ${COLORS.correct_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.correct_500};\n }\n }\n }\n\n &.invalid {\n ${NoteLabel} {\n color: ${COLORS.critical_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.critical_500};\n }\n }\n }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n min-width: 160px;\n height: ${props => props.size === Size.Small?'48px':'56px'};\n display: flex;\n border: 0;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &.disabled {\n border: 1px solid ${COLORS.neutral_100};\n cursor: not-allowed;\n \n ${PrefixContainer}{\n color: ${COLORS.neutral_300};\n }\n\n ${NumberInput}{\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.readOnly {\n background: ${COLORS.neutral_100};\n border: 1px solid ${COLORS.neutral_300};\n cursor: not-allowed;\n\n ${NumberInput}{\n background: ${COLORS.neutral_100};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.valid {\n border: 2px solid ${COLORS.correct_400};\n box-shadow: none;\n }\n\n &.invalid {\n border: 2px solid ${COLORS.critical_400};\n box-shadow: none;\n }\n`;\n\ntype NumberFieldProps = {\n size: Size.Small | Size.Medium;\n prefix?: string;\n interval?: number;\n label: string;\n note?: string;\n noteIcon?: React.ReactNode;\n required?: boolean;\n minValue?: number;\n maxValue?: number;\n allowNegative?: boolean;\n decimalPrecision?: number;\n disabled?: boolean;\n readOnly?: boolean;\n valid?: boolean;\n defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n {size=Size.Small, \n label,\n note, \n noteIcon, \n required, \n prefix,\n interval=1, \n minValue, \n maxValue, \n allowNegative, \n decimalPrecision, \n disabled=false, \n readOnly=false, \n valid,\n defaultVal}) => {\n const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n switch(e.key){\n case 'ArrowUp': addInterval();\n break;\n case 'ArrowDown': subtractInterval();\n break;\n default: break;\n }\n }\n\n const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.preventDefault();\n let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n \n let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/); \n let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n \n let val = e.target.value; \n if(val!==''){\n if(allowNegative && decimalPrecision){\n if(val.length===1 && val.charAt(0)==='-')\n setUserInput(val);\n else{\n if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n setUserInput(val);\n\n else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n setUserInput(val);\n \n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n setUserInput(val);\n }\n }\n\n else if(allowNegative){\n if(val.length===1 && val.charAt(0)==='-')\n setUserInput(val);\n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n setUserInput(val);\n }\n\n else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n if(decimalPrecisionRegex!.test(val))\n setUserInput(val);\n else if(decimalFormationRegEx.test(val))\n setUserInput(val);\n else if(!val.includes('.') && simpleRegex.test(val))\n setUserInput(val);\n }\n\n else if(simpleRegex.test(val) && isInRange(val, false)){\n setUserInput(val);\n }\n }\n\n if(val==='')\n setUserInput('');\n }\n\n const isInRange = (value: string, isDecimal: boolean): boolean => {\n let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n if(minValue && minValue>x)\n return false;\n else if(maxValue && maxValue<x)\n return false;\n else\n return true;\n }\n\n const addInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (minValue ?? 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val +=1;\n\n if(maxValue && maxValue>=val)\n setUserInput(val.toString());\n else if(!maxValue)\n setUserInput(val.toString());\n }\n }\n\n const subtractInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (maxValue ?? 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val -=1;\n \n if(minValue && minValue<=val)\n allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n else if(!minValue)\n allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n }\n }\n\n const isLocked = (input: string, operator: string): boolean => {\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n val = isNaN(val) && userInput === '' ? 0 : val;\n let operatorState = false;\n if(operator === 'add' && maxValue)\n operatorState = val < maxValue ? false : true;\n \n if(operator === 'subtract' && minValue)\n operatorState = val > minValue ? false : true;\n\n if(operator === 'subtract' && !minValue && !allowNegative)\n operatorState = val > 0 ? false : true;\n\n return operatorState;\n }\n\n return (\n <Container>\n <LabelContainer size={size}>\n {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n <SystemIcons.Asterisk color={COLORS.critical_500}/>\n </LabelIcon>\n }\n <LabelText>\n {label}\n </LabelText>\n </LabelContainer>\n\n <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n .concat(readOnly?' readOnly':'')\n .concat(fieldState?` ${fieldState}`:'')}>\n <InputWrapper size={size}>\n {prefix && <PrefixContainer size={size}>\n {prefix}\n </PrefixContainer>}\n <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n </InputWrapper>\n\n <OperatorWrapper data-testid={'operators'} size={size}>\n <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n <SystemIcons.Minus size='14px'/>\n </IconButton> \n <div className='divider'></div>\n <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n <SystemIcons.Plus size='14px'/>\n </IconButton>\n </OperatorWrapper>\n </InputContainer>\n\n {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n <NoteIcon>\n {noteIcon}\n </NoteIcon>\n <NoteLabel size={size}>\n {note}\n </NoteLabel> \n </NoteContainer>\n }\n </Container>\n ); \n}\n\nexport default NumberField;\n"],"file":"NumberField.js"}
1
+ {"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["React","styled","IconButton","SystemIcons","COLORS","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","ComponentXSStyling","Size","Container","div","LabelContainer","neutral_500","props","size","Small","Regular","LabelText","LabelIcon","InputWrapper","PrefixContainer","OperatorWrapper","Medium","neutral_200","NumberInput","input","fieldSize","black","Italic","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","neutral_400","primary_700","primary_800","neutral_100","neutral_300","correct_400","critical_400","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","disabled","readOnly","valid","defaultVal","useState","toString","userInput","setUserInput","fieldState","undefined","handleKeyPress","e","key","addInterval","subtractInterval","handleInput","preventDefault","simpleRegex","RegExp","decimalFormationRegEx","negativeDecimalFormationRegEx","allowNegativeRegex","decimalPrecisionRegex","negativeAndDecimalRegex","val","target","value","length","charAt","test","isInRange","replace","indexOf","lastIndexOf","includes","isDecimal","x","parseFloat","toFixed","parseInt","isNaN","Math","round","pow","isLocked","operator","operatorState","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { SystemIcons } from '../icons';\nimport { COLORS } from '../styles';\nimport { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';\nimport { Size } from '../types';\n\nconst Container = styled.div``;\n\nconst LabelContainer = styled.div<{size: Size}>`\n margin-bottom: 4px;\n color: ${COLORS.neutral_500};\n display: flex;\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst LabelText = styled.div``;\n\nconst LabelIcon = styled.div<{size: Size}>`\n margin-right: ${props => props.size === Size.Small?'6px':'8px'};\n svg {\n height: 9px;\n width: 9px;\n }\n`;\n\nconst InputWrapper = styled.div<{size: Size}>`\n margin: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n display: flex;\n flex-grow: 1;\n`;\n\nconst PrefixContainer = styled.div<{size: Size}>`\n margin-right: 4px;\n width: ${props => props.size === Size.Small?'10px':'11px'};\n height: ${props => props.size === Size.Small?'20px':'24px'};\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n display: flex;\n margin:${props => props.size === Size.Medium?'4px 0':''};\n svg {\n height: 14px;\n width: 14px;\n }\n .divider {\n margin: 16px 0;\n background: ${COLORS.neutral_200};\n width: 1px;\n }\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size}>`\n width: 100%; \n height: ${props => props.fieldSize === Size.Small?'20px':'24px'}; \n border: none;\n color: ${COLORS.neutral_500};\n padding: 0; \n ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Regular, COLORS.black):ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n &:hover, &:focus, &:active {\n outline: none;\n }\n\n &::placeholder {\n ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n }\n`;\n\nconst NoteLabel = styled.div<{size: Size}>`\n color: ${COLORS.neutral_500};\n ${props=>props.size===Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular,null) : ComponentXSStyling(ComponentTextStyle.Regular,null)} \n`;\n\nconst NoteIcon = styled.div`\n svg {\n height: 16px;\n }\n`;\n\nconst NoteContainer = styled.div`\n display: flex;\n margin-top: 5px;\n\n &.valid {\n ${NoteLabel} {\n color: ${COLORS.correct_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.correct_500};\n }\n }\n }\n\n &.invalid {\n ${NoteLabel} {\n color: ${COLORS.critical_500};\n }\n\n ${NoteIcon} {\n svg path {\n fill: ${COLORS.critical_500};\n }\n }\n }\n`;\n\nconst InputContainer = styled.div<{size: Size}>`\n min-width: 160px;\n height: ${props => props.size === Size.Small?'48px':'56px'};\n display: flex;\n border: 0;\n border-radius: 4px;\n box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n\n &:hover:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_700};\n }\n\n &:focus-within:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &:active:not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n\n &.disabled {\n border: 1px solid ${COLORS.neutral_100};\n cursor: not-allowed;\n \n ${PrefixContainer}{\n color: ${COLORS.neutral_300};\n }\n\n ${NumberInput}{\n color: ${COLORS.neutral_300};\n cursor: not-allowed;\n pointer-events: none;\n\n &::placeholder {\n color: ${COLORS.neutral_300};\n }\n }\n }\n\n &.readOnly {\n background: ${COLORS.neutral_100};\n border: 1px solid ${COLORS.neutral_300};\n cursor: not-allowed;\n\n ${NumberInput}{\n background: ${COLORS.neutral_100};\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.valid {\n border: 2px solid ${COLORS.correct_400};\n box-shadow: none;\n }\n\n &.invalid {\n border: 2px solid ${COLORS.critical_400};\n box-shadow: none;\n }\n`;\n\ntype NumberFieldProps = {\n size: Size.Small | Size.Medium;\n prefix?: string;\n interval?: number;\n label: string;\n note?: string;\n noteIcon?: React.ReactNode;\n required?: boolean;\n minValue?: number;\n maxValue?: number;\n allowNegative?: boolean;\n decimalPrecision?: number;\n disabled?: boolean;\n readOnly?: boolean;\n valid?: boolean;\n defaultVal?: number;\n}\n\nconst NumberField: React.FunctionComponent<NumberFieldProps> = (\n {size=Size.Small, \n label,\n note, \n noteIcon, \n required, \n prefix,\n interval=1, \n minValue, \n maxValue, \n allowNegative, \n decimalPrecision, \n disabled=false, \n readOnly=false, \n valid,\n defaultVal}) => {\n const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {\n switch(e.key){\n case 'ArrowUp': addInterval();\n break;\n case 'ArrowDown': subtractInterval();\n break;\n default: break;\n }\n }\n\n const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {\n e.preventDefault();\n let simpleRegex = new RegExp(/^[0-9]\\d*$/);\n let decimalFormationRegEx = new RegExp(/^[0-9]\\d*\\.$/); \n let negativeDecimalFormationRegEx = new RegExp(/^[-][0-9]\\d*\\.$/);\n \n let allowNegativeRegex = new RegExp(/^[-][0-9]\\d*$/); \n let decimalPrecisionRegex = decimalPrecision ? new RegExp(`^[0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`) : undefined;\n let negativeAndDecimalRegex = (decimalPrecision && allowNegative) ? new RegExp(`^[-][0-9]\\\\d*\\\\.[0-9]\\\\d{0,${decimalPrecision-1}}$`): undefined;\n \n let val = e.target.value; \n if(val!==''){\n if(allowNegative && decimalPrecision){\n if(val.length===1 && val.charAt(0)==='-')\n setUserInput(val);\n else{\n if((negativeAndDecimalRegex!.test(val) || decimalPrecisionRegex!.test(val)) && isInRange(val,true))\n setUserInput(val);\n\n else if((negativeDecimalFormationRegEx.test(val) || decimalFormationRegEx.test(val)) && isInRange(val.replace('.',''),true))\n setUserInput(val);\n \n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,true))\n setUserInput(val);\n }\n }\n\n else if(allowNegative){\n if(val.length===1 && val.charAt(0)==='-')\n setUserInput(val);\n else if((allowNegativeRegex.test(val) || simpleRegex.test(val)) && isInRange(val,false))\n setUserInput(val);\n }\n\n else if(decimalPrecision && (val.indexOf('.')===val.lastIndexOf('.')) && isInRange(val,true)){\n if(decimalPrecisionRegex!.test(val))\n setUserInput(val);\n else if(decimalFormationRegEx.test(val))\n setUserInput(val);\n else if(!val.includes('.') && simpleRegex.test(val))\n setUserInput(val);\n }\n\n else if(simpleRegex.test(val) && isInRange(val, false)){\n setUserInput(val);\n }\n }\n\n if(val==='')\n setUserInput('');\n }\n\n const isInRange = (value: string, isDecimal: boolean): boolean => {\n let x = isDecimal ? parseFloat(value).toFixed(decimalPrecision) : parseInt(value);\n if(minValue && minValue>x)\n return false;\n else if(maxValue && maxValue<x)\n return false;\n else\n return true;\n }\n\n const addInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (minValue ?? 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val+interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val +=1;\n\n if(maxValue && maxValue>=val)\n setUserInput(val.toString());\n else if(!maxValue)\n setUserInput(val.toString());\n }\n }\n\n const subtractInterval = () => {\n let val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);\n val = isNaN(val) && userInput === '' ? (maxValue ?? 0) : val;\n if(!isNaN(val)){\n if(decimalPrecision)\n val = Math.round((val-interval)*Math.pow(10,decimalPrecision!))/Math.pow(10,decimalPrecision!);\n else\n val -=1;\n \n if(minValue && minValue<=val)\n allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n else if(!minValue)\n allowNegative ? setUserInput(val.toString()) : (val>=0 ? setUserInput(val.toString()) : undefined);\n }\n }\n\n const isLocked = (input: string, operator: string): boolean => {\n let val = decimalPrecision ? parseFloat(input) : parseInt(input);\n val = isNaN(val) && userInput === '' ? 0 : val;\n let operatorState = false;\n if(operator === 'add' && maxValue)\n operatorState = val < maxValue ? false : true;\n \n if(operator === 'subtract' && minValue)\n operatorState = val > minValue ? false : true;\n\n if(operator === 'subtract' && !minValue && !allowNegative)\n operatorState = val > 0 ? false : true;\n\n return operatorState;\n }\n\n return (\n <Container>\n <LabelContainer size={size}>\n {required && <LabelIcon size={size} data-testid={'labelIcon'}>\n <SystemIcons.Asterisk color={COLORS.critical_500}/>\n </LabelIcon>\n }\n <LabelText>\n {label}\n </LabelText>\n </LabelContainer>\n\n <InputContainer size={size} data-testid={'inputContainer'} tabIndex={-1} className={'numberField'.concat(disabled?' disabled':'')\n .concat(readOnly?' readOnly':'')\n .concat(fieldState?` ${fieldState}`:'')}>\n <InputWrapper size={size}>\n {prefix && <PrefixContainer size={size}>\n {prefix}\n </PrefixContainer>}\n <NumberInput fieldSize={size} placeholder='Enter number' value={userInput} tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}/>\n </InputWrapper>\n\n <OperatorWrapper data-testid={'operators'} size={size}>\n <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>subtractInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'subtract')}>\n <SystemIcons.Minus size='14px'/>\n </IconButton> \n <div className='divider'></div>\n <IconButton tabIndex={-1} variant='secondary' shape='square' action={()=>addInterval()} useTransparentBackground disabled={disabled || readOnly || isLocked(userInput,'add')}>\n <SystemIcons.Plus size='14px'/>\n </IconButton>\n </OperatorWrapper>\n </InputContainer>\n\n {note && <NoteContainer className={'noteField'.concat(fieldState?` ${fieldState}`:'')}>\n <NoteIcon>\n {noteIcon}\n </NoteIcon>\n <NoteLabel size={size}>\n {note}\n </NoteLabel> \n </NoteContainer>\n }\n </Container>\n ); \n}\n\nexport default NumberField;\n"],"file":"NumberField.js"}
package/dist/ProfileButton/ProfileButton.cjs CHANGED
@@ -59,7 +59,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
59
59
  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
60
60
  src: portraitSrc
61
61
  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(PortraitOverlay, {})]
62
- }) || initials && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentS, {
62
+ }) || initials && /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ComponentM, {
63
63
  className: "initials",
64
64
  textStyle: _styles.ComponentTextStyle.Bold,
65
65
  color: disabled ? _.COLORS.neutral_300 : _.COLORS.white,
@@ -82,7 +82,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
82
82
  hideOnLowWidth: hideOnLowWidth,
83
83
  children: [renderIcon(), notificationVariant && /*#__PURE__*/(0, _jsxRuntime.jsx)(NotificationContainer, {
84
84
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_NotificationDot.NotificationDot, {
85
- size: _.Size.Medium,
85
+ size: _.Size.Small,
86
86
  variant: notificationVariant
87
87
  })
88
88
  })]
package/dist/ProfileButton/ProfileButton.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","Container","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","ComponentTextStyle","Bold","white","Size","Medium"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAcA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,8vBAMXI,mCANW,EAOA,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTC,oBAAYC,MATH,EAkBPC,6BAlBO,EAmBaR,SAAOS,WAnBpB,EAsBGT,SAAOU,WAtBV,EA6BPb,eA7BO,EAqCPA,eArCO,CAAf;;AA6CA,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTf,cAKS,QALTA,cAKS;AAAA,MAJTgB,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEO,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEN,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO4B,KAD1D;AAAA,gBAEGT;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,SAAD;AAAW,IAAA,cAAc,EAAEb,cAA3B;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB,cAP5B;AAAA,iBAQGoB,UAAU,EARb,EASGH,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEO,OAAKC,MAA5B;AAAoC,UAAA,OAAO,EAAER;AAA7C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAlB,EAAAA,c;AACAmB,EAAAA,Q;;eA+HaX,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n portraitSrc?: string;\n icon?: React.ReactNode;\n initials?: string;\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n disabled?: boolean;\n notificationVariant?: 'positive' | 'critical';\n className?: string;\n hideOnLowWidth?: boolean;\n tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ${COLORS.black};\n opacity: 0;\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ${StyledPrimaryIconButton} {\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_100};\n\n svg, svg path {\n fill: ${COLORS.neutral_300};\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ${PortraitOverlay} {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ${PortraitOverlay} {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n`;\n\nconst NotificationContainer = styled.div`\n position: absolute;\n left: 30px;\n bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n width: 36px;\n height: 36px;\n position: relative;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n portraitSrc,\n icon,\n initials,\n onClick,\n hideOnLowWidth,\n disabled,\n notificationVariant,\n className,\n tabIndex\n }, ref) => {\n const renderIcon = () => {\n return (\n (portraitSrc && (\n <ImageWrapper>\n <img src={portraitSrc}/>\n <PortraitOverlay/>\n </ImageWrapper>\n )) ||\n (initials && (\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n color={disabled ? COLORS.neutral_300 : COLORS.white}>\n {initials}\n </ComponentS>\n )) || <>{icon}</>\n );\n };\n\n return (\n <Container hideOnLowWidth={hideOnLowWidth}>\n <IconButton ref={ref}\n className={className}\n disabled={disabled}\n action={onClick}\n variant=\"primary\"\n tabIndex={tabIndex}\n shape=\"circular\"\n hideOnLowWidth={hideOnLowWidth}>\n {renderIcon()}\n {notificationVariant && (\n <NotificationContainer>\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n </NotificationContainer>\n )}\n </IconButton>\n </Container>\n );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}
1
+ {"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["PortraitOverlay","styled","div","COLORS","black","Container","StyledPrimaryIconButton","props","hideOnLowWidth","BREAKPOINTS","MEDIUM","IconButtonContent","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","React","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","ComponentTextStyle","Bold","white","Size","Small"],"mappings":";;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;AAcA,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,0OAICC,SAAOC,KAJR,CAArB;;AAWA,IAAMC,SAAS,GAAGJ,0BAAOC,GAAV,8vBAMXI,mCANW,EAOA,UAAAC,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTC,oBAAYC,MATH,EAkBPC,6BAlBO,EAmBaR,SAAOS,WAnBpB,EAsBGT,SAAOU,WAtBV,EA6BPb,eA7BO,EAqCPA,eArCO,CAAf;;AA6CA,IAAMc,qBAAqB,GAAGb,0BAAOC,GAAV,8IAA3B;;AAMA,IAAMa,YAAY,GAAGd,0BAAOC,GAAV,qPAAlB;;AAaA,IAAMc,aAAa,gBAAGC,KAAK,CAACC,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTf,cAKS,QALTA,cAKS;AAAA,MAJTgB,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,sBAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,qBAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,qBAAC,kBAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEO,2BAAmBC,IAA/D;AACY,MAAA,KAAK,EAAEN,QAAQ,GAAGrB,SAAOU,WAAV,GAAwBV,SAAO4B,KAD1D;AAAA,gBAEGT;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,qBAAC,SAAD;AAAW,IAAA,cAAc,EAAEb,cAA3B;AAAA,2BACE,sBAAC,YAAD;AAAY,MAAA,GAAG,EAAEW,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEnB,cAP5B;AAAA,iBAQGoB,UAAU,EARb,EASGH,mBAAmB,iBAClB,qBAAC,qBAAD;AAAA,+BACE,qBAAC,gCAAD;AAAiB,UAAA,IAAI,EAAEO,OAAKC,KAA5B;AAAmC,UAAA,OAAO,EAAER;AAA5C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,4BAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAlB,EAAAA,c;AACAmB,EAAAA,Q;;eA+HaX,a","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentM, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n portraitSrc?: string;\n icon?: React.ReactNode;\n initials?: string;\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n disabled?: boolean;\n notificationVariant?: 'positive' | 'critical';\n className?: string;\n hideOnLowWidth?: boolean;\n tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ${COLORS.black};\n opacity: 0;\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ${StyledPrimaryIconButton} {\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_100};\n\n svg, svg path {\n fill: ${COLORS.neutral_300};\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ${PortraitOverlay} {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ${PortraitOverlay} {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n`;\n\nconst NotificationContainer = styled.div`\n position: absolute;\n left: 30px;\n bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n width: 36px;\n height: 36px;\n position: relative;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n portraitSrc,\n icon,\n initials,\n onClick,\n hideOnLowWidth,\n disabled,\n notificationVariant,\n className,\n tabIndex\n }, ref) => {\n const renderIcon = () => {\n return (\n (portraitSrc && (\n <ImageWrapper>\n <img src={portraitSrc}/>\n <PortraitOverlay/>\n </ImageWrapper>\n )) ||\n (initials && (\n <ComponentM className=\"initials\" textStyle={ComponentTextStyle.Bold}\n color={disabled ? COLORS.neutral_300 : COLORS.white}>\n {initials}\n </ComponentM>\n )) || <>{icon}</>\n );\n };\n\n return (\n <Container hideOnLowWidth={hideOnLowWidth}>\n <IconButton ref={ref}\n className={className}\n disabled={disabled}\n action={onClick}\n variant=\"primary\"\n tabIndex={tabIndex}\n shape=\"circular\"\n hideOnLowWidth={hideOnLowWidth}>\n {renderIcon()}\n {notificationVariant && (\n <NotificationContainer>\n <NotificationDot size={Size.Small} variant={notificationVariant}/>\n </NotificationContainer>\n )}\n </IconButton>\n </Container>\n );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.cjs"}
package/dist/ProfileButton/ProfileButton.js CHANGED
@@ -8,7 +8,7 @@ import styled from 'styled-components';
8
8
  import { COLORS, IconButton, Size } from '..';
9
9
  import { IconButtonContent, StyledPrimaryIconButton } from '../Button/Iconbutton';
10
10
  import { NotificationDot } from '../NotificationDot';
11
- import { BREAKPOINTS, ComponentS, ComponentTextStyle } from '../styles';
11
+ import { BREAKPOINTS, ComponentM, ComponentTextStyle } from '../styles';
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
14
14
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -34,7 +34,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
34
34
  children: [/*#__PURE__*/_jsx("img", {
35
35
  src: portraitSrc
36
36
  }), /*#__PURE__*/_jsx(PortraitOverlay, {})]
37
- }) || initials && /*#__PURE__*/_jsx(ComponentS, {
37
+ }) || initials && /*#__PURE__*/_jsx(ComponentM, {
38
38
  className: "initials",
39
39
  textStyle: ComponentTextStyle.Bold,
40
40
  color: disabled ? COLORS.neutral_300 : COLORS.white,
@@ -57,7 +57,7 @@ var ProfileButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
57
57
  hideOnLowWidth: hideOnLowWidth,
58
58
  children: [renderIcon(), notificationVariant && /*#__PURE__*/_jsx(NotificationContainer, {
59
59
  children: /*#__PURE__*/_jsx(NotificationDot, {
60
- size: Size.Medium,
60
+ size: Size.Small,
61
61
  variant: notificationVariant
62
62
  })
63
63
  })]
package/dist/ProfileButton/ProfileButton.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentS","ComponentTextStyle","PortraitOverlay","div","black","Container","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","Bold","white","Medium"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,UAAhB,EAA4BC,IAA5B,QAAuC,IAAvC;AACA,SAAQC,iBAAR,EAA2BC,uBAA3B,QAAyD,sBAAzD;AACA,SAAQC,eAAR,QAA8B,oBAA9B;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,kBAAjC,QAA0D,WAA1D;;;;AAcA,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAV,4NAICV,MAAM,CAACW,KAJR,CAArB;AAWA,IAAMC,SAAS,GAAGb,MAAM,CAACW,GAAV,gvBAMXN,uBANW,EAOA,UAAAS,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTR,WAAW,CAACS,MATH,EAkBPZ,iBAlBO,EAmBaH,MAAM,CAACgB,WAnBpB,EAsBGhB,MAAM,CAACiB,WAtBV,EA6BPR,eA7BO,EAqCPA,eArCO,CAAf;AA6CA,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAV,gIAA3B;AAMA,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAV,uOAAlB;AAaA,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTZ,cAKS,QALTA,cAKS;AAAA,MAJTa,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,MAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,KAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEjB,kBAAkB,CAACwB,IAA/D;AACY,MAAA,KAAK,EAAEL,QAAQ,GAAG3B,MAAM,CAACiB,WAAV,GAAwBjB,MAAM,CAACiC,KAD1D;AAAA,gBAEGR;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,KAAC,SAAD;AAAW,IAAA,cAAc,EAAEV,cAA3B;AAAA,2BACE,MAAC,UAAD;AAAY,MAAA,GAAG,EAAEQ,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEhB,cAP5B;AAAA,iBAQGiB,UAAU,EARb,EASGH,mBAAmB,iBAClB,KAAC,qBAAD;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAE1B,IAAI,CAACgC,MAA5B;AAAoC,UAAA,OAAO,EAAEN;AAA7C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,aAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAf,EAAAA,c;AACAgB,EAAAA,Q;;AA+HF,eAAeV,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentS, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n portraitSrc?: string;\n icon?: React.ReactNode;\n initials?: string;\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n disabled?: boolean;\n notificationVariant?: 'positive' | 'critical';\n className?: string;\n hideOnLowWidth?: boolean;\n tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ${COLORS.black};\n opacity: 0;\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ${StyledPrimaryIconButton} {\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_100};\n\n svg, svg path {\n fill: ${COLORS.neutral_300};\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ${PortraitOverlay} {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ${PortraitOverlay} {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n`;\n\nconst NotificationContainer = styled.div`\n position: absolute;\n left: 30px;\n bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n width: 36px;\n height: 36px;\n position: relative;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n portraitSrc,\n icon,\n initials,\n onClick,\n hideOnLowWidth,\n disabled,\n notificationVariant,\n className,\n tabIndex\n }, ref) => {\n const renderIcon = () => {\n return (\n (portraitSrc && (\n <ImageWrapper>\n <img src={portraitSrc}/>\n <PortraitOverlay/>\n </ImageWrapper>\n )) ||\n (initials && (\n <ComponentS className=\"initials\" textStyle={ComponentTextStyle.Bold}\n color={disabled ? COLORS.neutral_300 : COLORS.white}>\n {initials}\n </ComponentS>\n )) || <>{icon}</>\n );\n };\n\n return (\n <Container hideOnLowWidth={hideOnLowWidth}>\n <IconButton ref={ref}\n className={className}\n disabled={disabled}\n action={onClick}\n variant=\"primary\"\n tabIndex={tabIndex}\n shape=\"circular\"\n hideOnLowWidth={hideOnLowWidth}>\n {renderIcon()}\n {notificationVariant && (\n <NotificationContainer>\n <NotificationDot size={Size.Medium} variant={notificationVariant}/>\n </NotificationContainer>\n )}\n </IconButton>\n </Container>\n );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.js"}
1
+ {"version":3,"sources":["../../src/ProfileButton/ProfileButton.tsx"],"names":["React","styled","COLORS","IconButton","Size","IconButtonContent","StyledPrimaryIconButton","NotificationDot","BREAKPOINTS","ComponentM","ComponentTextStyle","PortraitOverlay","div","black","Container","props","hideOnLowWidth","MEDIUM","neutral_100","neutral_300","NotificationContainer","ImageWrapper","ProfileButton","forwardRef","ref","portraitSrc","icon","initials","onClick","disabled","notificationVariant","className","tabIndex","renderIcon","Bold","white","Small"],"mappings":";;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAAQC,MAAR,EAAgBC,UAAhB,EAA4BC,IAA5B,QAAuC,IAAvC;AACA,SAAQC,iBAAR,EAA2BC,uBAA3B,QAAyD,sBAAzD;AACA,SAAQC,eAAR,QAA8B,oBAA9B;AACA,SAAQC,WAAR,EAAqBC,UAArB,EAAiCC,kBAAjC,QAA0D,WAA1D;;;;AAcA,IAAMC,eAAe,GAAGV,MAAM,CAACW,GAAV,4NAICV,MAAM,CAACW,KAJR,CAArB;AAWA,IAAMC,SAAS,GAAGb,MAAM,CAACW,GAAV,gvBAMXN,uBANW,EAOA,UAAAS,KAAK;AAAA,SAAKA,KAAK,CAACC,cAAN,GAAuB,MAAvB,GAAgC,QAArC;AAAA,CAPL,EASTR,WAAW,CAACS,MATH,EAkBPZ,iBAlBO,EAmBaH,MAAM,CAACgB,WAnBpB,EAsBGhB,MAAM,CAACiB,WAtBV,EA6BPR,eA7BO,EAqCPA,eArCO,CAAf;AA6CA,IAAMS,qBAAqB,GAAGnB,MAAM,CAACW,GAAV,gIAA3B;AAMA,IAAMS,YAAY,GAAGpB,MAAM,CAACW,GAAV,uOAAlB;AAaA,IAAMU,aAAa,gBAAGtB,KAAK,CAACuB,UAAN,CAAwD,gBAUIC,GAVJ,EAUY;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,IAQS,QARTA,IAQS;AAAA,MAPTC,QAOS,QAPTA,QAOS;AAAA,MANTC,OAMS,QANTA,OAMS;AAAA,MALTZ,cAKS,QALTA,cAKS;AAAA,MAJTa,QAIS,QAJTA,QAIS;AAAA,MAHTC,mBAGS,QAHTA,mBAGS;AAAA,MAFTC,SAES,QAFTA,SAES;AAAA,MADTC,QACS,QADTA,QACS;;AACxF,MAAMC,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,WACGR,WAAW,iBACV,MAAC,YAAD;AAAA,8BACE;AAAK,QAAA,GAAG,EAAEA;AAAV,QADF,eAEE,KAAC,eAAD,KAFF;AAAA,MADF,IAMCE,QAAQ,iBACP,KAAC,UAAD;AAAY,MAAA,SAAS,EAAC,UAAtB;AAAiC,MAAA,SAAS,EAAEjB,kBAAkB,CAACwB,IAA/D;AACY,MAAA,KAAK,EAAEL,QAAQ,GAAG3B,MAAM,CAACiB,WAAV,GAAwBjB,MAAM,CAACiC,KAD1D;AAAA,gBAEGR;AAFH,MAPF,iBAWM;AAAA,gBAAGD;AAAH,MAZR;AAcD,GAfD;;AAiBA,sBACE,KAAC,SAAD;AAAW,IAAA,cAAc,EAAEV,cAA3B;AAAA,2BACE,MAAC,UAAD;AAAY,MAAA,GAAG,EAAEQ,GAAjB;AACY,MAAA,SAAS,EAAEO,SADvB;AAEY,MAAA,QAAQ,EAAEF,QAFtB;AAGY,MAAA,MAAM,EAAED,OAHpB;AAIY,MAAA,OAAO,EAAC,SAJpB;AAKY,MAAA,QAAQ,EAAEI,QALtB;AAMY,MAAA,KAAK,EAAC,UANlB;AAOY,MAAA,cAAc,EAAEhB,cAP5B;AAAA,iBAQGiB,UAAU,EARb,EASGH,mBAAmB,iBAClB,KAAC,qBAAD;AAAA,+BACE,KAAC,eAAD;AAAiB,UAAA,IAAI,EAAE1B,IAAI,CAACgC,KAA5B;AAAmC,UAAA,OAAO,EAAEN;AAA5C;AADF,QAVJ;AAAA;AADF,IADF;AAmBD,CA/CqB,CAAtB;;AAtFEL,EAAAA,W;AACAC,EAAAA,I;AACAC,EAAAA,Q;AACAC,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,mB,aAAsB,U,EAAa,U;AACnCC,EAAAA,S;AACAf,EAAAA,c;AACAgB,EAAAA,Q;;AA+HF,eAAeV,aAAf","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {COLORS, IconButton, Size} from '..';\nimport {IconButtonContent, StyledPrimaryIconButton} from '../Button/Iconbutton';\nimport {NotificationDot} from '../NotificationDot';\nimport {BREAKPOINTS, ComponentM, ComponentTextStyle} from '../styles';\n\ntype ProfileButtonProps = {\n portraitSrc?: string;\n icon?: React.ReactNode;\n initials?: string;\n onClick: (event?: React.MouseEvent<HTMLButtonElement>) => void;\n disabled?: boolean;\n notificationVariant?: 'positive' | 'critical';\n className?: string;\n hideOnLowWidth?: boolean;\n tabIndex?: number;\n};\n\nconst PortraitOverlay = styled.div`\n width: 100%;\n height: 100%;\n border-radius: 50%;\n background-color: ${COLORS.black};\n opacity: 0;\n position: absolute;\n top: 0px;\n left: 0px;\n`;\n\nconst Container = styled.div<{ hideOnLowWidth?: boolean }>`\n width: 48px;\n height: 48px;\n display: inline;\n user-select: none;\n \n ${StyledPrimaryIconButton} {\n display: ${props => (props.hideOnLowWidth ? 'none' : 'inline')};\n\n ${BREAKPOINTS.MEDIUM} {\n display: inline;\n }\n\n :disabled {\n img {\n filter: grayscale(100%);\n }\n\n ${IconButtonContent} {\n background-color: ${COLORS.neutral_100};\n\n svg, svg path {\n fill: ${COLORS.neutral_300};\n }\n }\n }\n\n :hover:not(:disabled):not(:active),\n &.hover-state {\n ${PortraitOverlay} {\n opacity: 0.25;\n transition: opacity 100ms ease-in-out;\n }\n }\n\n :active:not(:disabled),\n &.active-state {\n ${PortraitOverlay} {\n opacity: 0.5;\n transition: opacity 0ms ease-in-out;\n }\n }\n }\n`;\n\nconst NotificationContainer = styled.div`\n position: absolute;\n left: 30px;\n bottom: 30px;\n`;\n\nconst ImageWrapper = styled.div`\n width: 36px;\n height: 36px;\n position: relative;\n\n img {\n width: 100%;\n height: 100%;\n border-radius: 50%;\n object-fit: cover;\n }\n`;\n\nconst ProfileButton = React.forwardRef<HTMLButtonElement, ProfileButtonProps>(({\n portraitSrc,\n icon,\n initials,\n onClick,\n hideOnLowWidth,\n disabled,\n notificationVariant,\n className,\n tabIndex\n }, ref) => {\n const renderIcon = () => {\n return (\n (portraitSrc && (\n <ImageWrapper>\n <img src={portraitSrc}/>\n <PortraitOverlay/>\n </ImageWrapper>\n )) ||\n (initials && (\n <ComponentM className=\"initials\" textStyle={ComponentTextStyle.Bold}\n color={disabled ? COLORS.neutral_300 : COLORS.white}>\n {initials}\n </ComponentM>\n )) || <>{icon}</>\n );\n };\n\n return (\n <Container hideOnLowWidth={hideOnLowWidth}>\n <IconButton ref={ref}\n className={className}\n disabled={disabled}\n action={onClick}\n variant=\"primary\"\n tabIndex={tabIndex}\n shape=\"circular\"\n hideOnLowWidth={hideOnLowWidth}>\n {renderIcon()}\n {notificationVariant && (\n <NotificationContainer>\n <NotificationDot size={Size.Small} variant={notificationVariant}/>\n </NotificationContainer>\n )}\n </IconButton>\n </Container>\n );\n});\n\nexport default ProfileButton;\n"],"file":"ProfileButton.js"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.8.0-dev.32",
3
+ "version": "1.8.0-dev.33",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [