@laerdal/life-react-components 1.9.4-dev.6 → 1.9.4-dev.8

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/Button/Button.cjs +3 -3
  2. package/dist/Button/Button.cjs.map +1 -1
  3. package/dist/Button/Button.js +3 -3
  4. package/dist/Button/Button.js.map +1 -1
  5. package/dist/InputFields/NumberField.cjs +4 -4
  6. package/dist/InputFields/NumberField.cjs.map +1 -1
  7. package/dist/InputFields/NumberField.js +4 -4
  8. package/dist/InputFields/NumberField.js.map +1 -1
  9. package/package.json +1 -1
package/dist/Button/Button.cjs CHANGED
@@ -60,7 +60,7 @@ var getBorderRadius = function getBorderRadius(flatEdge, radius) {
60
60
  }
61
61
  };
62
62
 
63
- var Primary = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ", ";\n\n background-color: ", ";\n border-radius: ", ";\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n\n width: ", ";\n position: relative;\n\n min-height: ", ";\n min-width: ", ";\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ", ";\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ", ";\n width: ", ";\n height: ", ";\n svg {\n width: ", " !important;\n height: ", " !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ", ";\n width: ", ";\n path {\n fill: ", ";\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n ", "\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), function (props) {
63
+ var Primary = _styledComponents.default.button(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ", ";\n\n background-color: ", ";\n border-radius: ", ";\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n\n width: ", ";\n position: relative;\n\n min-height: ", ";\n min-width: ", ";\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: ", ";\n\n span.loading {\n opacity: 0;\n }\n\n .icon {\n margin: ", ";\n width: ", ";\n height: ", ";\n svg {\n width: ", " !important;\n height: ", " !important;\n }\n }\n\n .label {\n margin: 0 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ", ";\n width: ", ";\n path {\n fill: ", ";\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n ", "\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), function (props) {
64
64
  return props.size === _types.Size.Large ? '56px' : '48px';
65
65
  }, function (props) {
66
66
  return props.size === _types.Size.Large ? (0, _typography.ComponentLStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? _styles.COLORS.primary_800 : _styles.COLORS.white);
@@ -77,9 +77,9 @@ var Primary = _styledComponents.default.button(_templateObject || (_templateObje
77
77
  }, function (props) {
78
78
  return props.minWidth;
79
79
  }, function (props) {
80
- return props.size === _types.Size.Large ? '14px 18px' : props.size === _types.Size.Small ? '4px 10px' : '6px 14px';
80
+ return props.size === _types.Size.Large ? '14px 16px' : props.size === _types.Size.Small ? '6px 8px' : '8px 12px';
81
81
  }, function (props) {
82
- return props.size === _types.Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : props.size === _types.Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px';
82
+ return props.size === _types.Size.Medium ? props.iconOnly ? '-2px -8px' : '' : props.size === _types.Size.Small ? props.iconOnly ? '-2px -6px' : '' : '-2px -8px';
83
83
  }, function (props) {
84
84
  return props.size === _types.Size.Large ? '28px' : props.size === _types.Size.Small ? '20px' : '24px';
85
85
  }, function (props) {
package/dist/Button/Button.cjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","colorTheme","COLORS","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","invertedFocusStyles","focusStyles","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","React","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","defaultOnMouseDownHandler","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n min-width: ${props => props.minWidth};\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n\n &:focus,\n &.focus-state {\n ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n invertFocus?: boolean;\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}, ref) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n\n const renderContent = () => (\n <>\n {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n {loading && <LoadingIndicator/>}\n </>\n );\n\n let ButtonStyled = Primary;\n switch(variant)\n {\n case 'secondary':\n ButtonStyled = Secondary;\n break;\n case 'tertiary':\n ButtonStyled = Tertiary;\n break;\n case 'positive':\n ButtonStyled = Positive;\n break;\n case 'critical':\n ButtonStyled = Critical;\n break;\n }\n\n return (\n <ButtonStyled\n {...renderProps}\n ref={ref}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={defaultOnMouseDownHandler}>\n <div className=\"button-content\">{renderContent()}</div>\n </ButtonStyled>\n );\n});\n\nexport default Button;\n"],"file":"Button.cjs"}
1
+ {"version":3,"sources":["../../src/Button/Button.tsx"],"names":["getBorderRadius","flatEdge","radius","Primary","styled","button","props","size","Size","Large","ComponentTextStyle","Bold","colorTheme","COLORS","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","invertedFocusStyles","focusStyles","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","React","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","defaultOnMouseDownHandler","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n min-width: ${props => props.minWidth};\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: ${(props) => (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px')};\n\n span.loading {\n opacity: 0;\n }\n\n .icon {\n margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '-2px -8px' ))};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .label {\n margin: 0 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n\n &:focus,\n &.focus-state {\n ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n invertFocus?: boolean;\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}, ref) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n\n const renderContent = () => (\n <>\n {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n {loading && <LoadingIndicator/>}\n </>\n );\n\n let ButtonStyled = Primary;\n switch(variant)\n {\n case 'secondary':\n ButtonStyled = Secondary;\n break;\n case 'tertiary':\n ButtonStyled = Tertiary;\n break;\n case 'positive':\n ButtonStyled = Positive;\n break;\n case 'critical':\n ButtonStyled = Critical;\n break;\n }\n\n return (\n <ButtonStyled\n {...renderProps}\n ref={ref}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={defaultOnMouseDownHandler}>\n <div className=\"button-content\">{renderContent()}</div>\n </ButtonStyled>\n );\n});\n\nexport default Button;\n"],"file":"Button.cjs"}
package/dist/Button/Button.js CHANGED
@@ -36,7 +36,7 @@ var getBorderRadius = function getBorderRadius(flatEdge, radius) {
36
36
  }
37
37
  };
38
38
 
39
- var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ", ";\n\n background-color: ", ";\n border-radius: ", ";\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n\n width: ", ";\n position: relative;\n\n min-height: ", ";\n min-width: ", ";\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ", ";\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ", ";\n width: ", ";\n height: ", ";\n svg {\n width: ", " !important;\n height: ", " !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ", ";\n width: ", ";\n path {\n fill: ", ";\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n ", "\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), function (props) {
39
+ var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ", ";\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ", ";\n\n background-color: ", ";\n border-radius: ", ";\n border-width: 2px;\n border-style: solid;\n border-color: ", ";\n\n width: ", ";\n position: relative;\n\n min-height: ", ";\n min-width: ", ";\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: ", ";\n\n span.loading {\n opacity: 0;\n }\n\n .icon {\n margin: ", ";\n width: ", ";\n height: ", ";\n svg {\n width: ", " !important;\n height: ", " !important;\n }\n }\n\n .label {\n margin: 0 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ", ";\n width: ", ";\n path {\n fill: ", ";\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ", ";\n border-color: ", ";\n color: ", ";\n }\n\n &:focus,\n &.focus-state {\n ", "\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ", ";\n color: ", ";\n border-color: ", ";\n }\n"])), function (props) {
40
40
  return props.size === Size.Large ? '56px' : '48px';
41
41
  }, function (props) {
42
42
  return props.size === Size.Large ? ComponentLStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white) : ComponentMStyling(ComponentTextStyle.Bold, (props === null || props === void 0 ? void 0 : props.colorTheme) === 'dark' ? COLORS.primary_800 : COLORS.white);
@@ -53,9 +53,9 @@ var Primary = styled.button(_templateObject || (_templateObject = _taggedTemplat
53
53
  }, function (props) {
54
54
  return props.minWidth;
55
55
  }, function (props) {
56
- return props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px';
56
+ return props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px';
57
57
  }, function (props) {
58
- return props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px';
58
+ return props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '-2px -8px';
59
59
  }, function (props) {
60
60
  return props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px';
61
61
  }, function (props) {
package/dist/Button/Button.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../src/Button/Button.tsx"],"names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","getBorderRadius","flatEdge","radius","Primary","button","props","size","Large","Bold","colorTheme","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n min-width: ${props => props.minWidth};\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n // paddings have -2px for border\n padding: ${(props) => (props.size === Size.Large ? '14px 18px' : props.size === Size.Small ? '4px 10px' : '6px 14px')};\n\n span.loading {\n opacity: 0;\n }\n .icon {\n margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '-2px -4px' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '-2px -4px' : '-2px -8px' ))};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .extramargin {\n margin-right: 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n\n &:focus,\n &.focus-state {\n ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n invertFocus?: boolean;\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}, ref) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n\n const renderContent = () => (\n <>\n {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n {loading && <LoadingIndicator/>}\n </>\n );\n\n let ButtonStyled = Primary;\n switch(variant)\n {\n case 'secondary':\n ButtonStyled = Secondary;\n break;\n case 'tertiary':\n ButtonStyled = Tertiary;\n break;\n case 'positive':\n ButtonStyled = Positive;\n break;\n case 'critical':\n ButtonStyled = Critical;\n break;\n }\n\n return (\n <ButtonStyled\n {...renderProps}\n ref={ref}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={defaultOnMouseDownHandler}>\n <div className=\"button-content\">{renderContent()}</div>\n </ButtonStyled>\n );\n});\n\nexport default Button;\n"],"file":"Button.js"}
1
+ {"version":3,"sources":["../../src/Button/Button.tsx"],"names":["React","styled","LoadingIndicator","ComponentLStyling","ComponentMStyling","ComponentSStyling","ComponentTextStyle","COLORS","focusStyles","invertedFocusStyles","Size","defaultOnMouseDownHandler","getBorderRadius","flatEdge","radius","Primary","button","props","size","Large","Bold","colorTheme","primary_800","white","Small","accent1","primary","width","minWidth","Medium","iconOnly","accent1_700","primary_100","primary_700","primary_600","accent1_800","primary_200","invertFocus","undefined","neutral_100","neutral_300","Secondary","primary_300","Tertiary","primary_500","accent1_20","primary_20","accent1_100","Positive","correct_500","correct_700","correct_800","Critical","critical_500","critical_700","critical_800","Button","forwardRef","ref","children","variant","type","testId","disabled","icon","loading","renderProps","renderContent","ButtonStyled","className","role","title"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled, { css } from 'styled-components';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { ComponentLStyling, ComponentMStyling, ComponentSStyling, ComponentTextStyle } from '../styles/typography';\nimport {COLORS, focusStyles, invertedFocusStyles} from '../styles';\nimport { Size } from '../types';\nimport {defaultOnMouseDownHandler} from '../common';\n\nconst getBorderRadius = (flatEdge : string | undefined, radius: number) => {\n switch(flatEdge)\n {\n case 'left':\n return `0px ${radius}px ${radius}px 0px`;\n \n case 'right':\n return `${radius}px 0px 0px ${radius}px`;\n\n case 'none':\n default:\n return `${radius}px`;\n }\n}\n\nconst Primary = styled.button<ButtonProps>`\n border: none;\n background-color: transparent;\n cursor: pointer;\n padding: 0;\n margin: 0;\n position: relative;\n box-sizing: border-box;\n min-height: ${(props) => (props.size === Size.Large ? '56px' : '48px')};\n &.loading-state {\n cursor: wait;\n }\n div.button-content {\n ${(props) =>\n props.size === Size.Large\n ? ComponentLStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : props.size === Size.Small\n ? ComponentSStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)\n : ComponentMStyling(ComponentTextStyle.Bold, props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-radius: ${props => getBorderRadius(props.flatEdge, 8)};\n border-width: 2px;\n border-style: solid;\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n\n width: ${(props) => props.width};\n position: relative;\n\n min-height: ${(props) => (props.size === Size.Large ? '56px' : props.size === Size.Small ? '32px' : '40px')};\n min-width: ${props => props.minWidth};\n\n box-sizing: border-box;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 4px;\n padding: ${(props) => (props.size === Size.Large ? '14px 16px' : props.size === Size.Small ? '6px 8px' : '8px 12px')};\n\n span.loading {\n opacity: 0;\n }\n\n .icon {\n margin: ${(props) => (props.size === Size.Medium ? props.iconOnly ? '-2px -8px' : '' : (props.size === Size.Small ? props.iconOnly ? '-2px -6px' : '' : '-2px -8px' ))};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n svg {\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')} !important;\n }\n }\n\n .label {\n margin: 0 4px;\n }\n\n div {\n position: absolute;\n width: 100%;\n svg {\n height: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n width: ${(props) => (props.size === Size.Large ? '28px' : props.size === Size.Small ? '20px' : '24px')};\n path {\n fill: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary : COLORS.white)};\n }\n }\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_100 : COLORS.primary_700)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_600 : COLORS.white)};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_800)};\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.white)};\n }\n\n &:focus,\n &.focus-state {\n ${props => props.invertFocus || (props.invertFocus === undefined && props.colorTheme === 'dark') ? invertedFocusStyles : focusStyles}\n }\n &:disabled,\n &.disabled-state {\n cursor: not-allowed;\n }\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n pointer-events: none;\n background-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_800 : COLORS.neutral_300)};\n border-color: ${(props) => (props.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Secondary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary)};\n background-color: transparent;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : props?.colorTheme === 'dark' ? COLORS.primary_200 : COLORS.primary_700)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.primary_300 : COLORS.primary_800)};\n background-color: transparent;\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : props?.colorTheme === 'dark' ? COLORS.white : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: transparent;\n color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_300)};\n border-color: ${(props) => (props?.colorTheme === 'dark' ? COLORS.primary_700 : COLORS.neutral_100)};\n }\n`;\n\nconst Tertiary = styled(Primary)<ButtonProps>`\n div.button-content {\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary_500)};\n border-color: transparent;\n background-color: transparent;\n border-width: 1px;\n div svg path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1 : COLORS.primary)};\n }\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_20 : COLORS.primary_20)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_700 : COLORS.primary_700)};\n }\n }\n }\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n background-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n border-color: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_100 : COLORS.primary_100)};\n div {\n svg {\n path {\n fill: ${(props) => (props.colorTheme === 'teal' ? COLORS.accent1_800 : COLORS.primary_800)};\n }\n }\n }\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: white !important;\n color: ${COLORS.neutral_300};\n border-color: transparent !important;\n }\n`;\n\nconst Positive = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.correct_500};\n background-color: ${COLORS.correct_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.correct_700};\n background-color: ${COLORS.correct_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.correct_800};\n background-color: ${COLORS.correct_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nconst Critical = styled(Primary)<ButtonProps>`\n div.button-content {\n color: white;\n border-color: ${COLORS.critical_500};\n background-color: ${COLORS.critical_500};\n }\n &:hover > div.button-content,\n &.hover-state > div.button-content {\n border-color: ${COLORS.critical_700};\n background-color: ${COLORS.critical_700};\n }\n &:active > div.button-content,\n &.active-state > div.button-content {\n border-color: ${COLORS.critical_800};\n background-color: ${COLORS.critical_800};\n }\n\n &:disabled > div.button-content,\n &.disabled-state > div.button-content {\n background-color: ${COLORS.neutral_100};\n color: ${COLORS.neutral_300};\n border-color: ${COLORS.neutral_100};\n }\n`;\n\nexport interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: 'primary' | 'secondary' | 'tertiary' | 'positive' | 'critical';\n flatEdge?: 'right' | 'left' | 'none' | undefined;\n role?: 'button' | string;\n title?: string;\n size?: Size;\n colorTheme?: 'teal' | 'dark';\n invertFocus?: boolean;\n width?: 'auto' | string;\n loading?: boolean;\n testId?: string;\n icon?: React.ReactNode;\n minWidth?: string;\n iconOnly?: boolean;\n}\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>( ({\n children = '',\n variant = 'primary',\n type = 'button',\n size = Size.Medium,\n width = 'auto',\n minWidth = '64px',\n testId,\n disabled,\n flatEdge,\n icon,\n ...props\n}, ref) => {\n // Let's filter out properties that we don't need to render.\n const { loading, ...renderProps } = props;\n\n const renderContent = () => (\n <>\n {icon && <span className={(children ? 'extramargin ' : '') + (loading ? 'icon loading' : 'icon')}>{icon}</span>}\n {children && <span className={loading ? 'label loading' : 'label'}>{children}</span>}\n {loading && <LoadingIndicator/>}\n </>\n );\n\n let ButtonStyled = Primary;\n switch(variant)\n {\n case 'secondary':\n ButtonStyled = Secondary;\n break;\n case 'tertiary':\n ButtonStyled = Tertiary;\n break;\n case 'positive':\n ButtonStyled = Positive;\n break;\n case 'critical':\n ButtonStyled = Critical;\n break;\n }\n\n return (\n <ButtonStyled\n {...renderProps}\n ref={ref}\n disabled={disabled}\n iconOnly={!children}\n type={type}\n size={size}\n flatEdge={flatEdge}\n width={width}\n minWidth={minWidth}\n data-testid={testId}\n className={props.loading ? 'loading-state ' + props.className : ' ' + props.className}\n onMouseDown={defaultOnMouseDownHandler}>\n <div className=\"button-content\">{renderContent()}</div>\n </ButtonStyled>\n );\n});\n\nexport default Button;\n"],"file":"Button.js"}
package/dist/InputFields/NumberField.cjs CHANGED
@@ -81,9 +81,9 @@ var NoteIcon = _styledComponents.default.div(_templateObject10 || (_templateObje
81
81
 
82
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);
83
83
 
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 box-shadow: inset 0px 0px 0px 1px ", ";\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 box-shadow: inset 0px 0px 0px 1px ", ";\n cursor: not-allowed;\n\n ", "{\n background: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.valid {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ", ";\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 box-shadow: inset 0px 0px 0px 1px ", ";\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 box-shadow: inset 0px 0px 0px 1px ", ";\n cursor: not-allowed;\n\n ", "{\n background: ", ";\n cursor: not-allowed;\n pointer-events: none;\n color: ", ";\n }\n }\n\n &.valid {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n"])), function (props) {
85
85
  return props.size === _types.Size.Small ? '48px' : '56px';
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);
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.neutral_500, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
87
87
 
88
88
  var NumberField = function NumberField(_ref) {
89
89
  var _ref$size = _ref.size,
@@ -162,7 +162,7 @@ var NumberField = function NumberField(_ref) {
162
162
 
163
163
  var addInterval = function addInterval() {
164
164
  var val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);
165
- val = isNaN(val) && userInput === '' ? minValue !== null && minValue !== void 0 ? minValue : 0 : val;
165
+ val = isNaN(val) && userInput === '' ? minValue ? minValue - 1 : 0 : val;
166
166
 
167
167
  if (!isNaN(val)) {
168
168
  if (decimalPrecision) val = Math.round((val + interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val += 1;
@@ -172,7 +172,7 @@ var NumberField = function NumberField(_ref) {
172
172
 
173
173
  var subtractInterval = function subtractInterval() {
174
174
  var val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);
175
- val = isNaN(val) && userInput === '' ? maxValue !== null && maxValue !== void 0 ? maxValue : 0 : val;
175
+ val = isNaN(val) && userInput === '' ? maxValue ? maxValue + 1 : 0 : val;
176
176
 
177
177
  if (!isNaN(val)) {
178
178
  if (decimalPrecision) val = Math.round((val - interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val -= 1;
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","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 box-shadow: inset 0px 0px 0px 1px ${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 box-shadow: inset 0px 0px 0px 1px ${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 box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_400};\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\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 box-shadow: inset 0px 0px 0px 1px ${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 box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n cursor: not-allowed;\n\n ${NumberInput}{\n background: ${COLORS.neutral_100};\n cursor: not-allowed;\n pointer-events: none;\n color: ${COLORS.neutral_500};\n }\n }\n\n &.valid {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_400};\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\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 ? minValue-1 : 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 ? maxValue+1 : 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
@@ -46,9 +46,9 @@ var NoteLabel = styled.div(_templateObject9 || (_templateObject9 = _taggedTempla
46
46
  });
47
47
  var NoteIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n svg {\n height: 16px;\n }\n"])));
48
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);
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 box-shadow: inset 0px 0px 0px 1px ", ";\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 box-shadow: inset 0px 0px 0px 1px ", ";\n cursor: not-allowed;\n\n ", "{\n background: ", ";\n cursor: not-allowed;\n pointer-events: none;\n }\n }\n\n &.valid {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ", ";\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 box-shadow: inset 0px 0px 0px 1px ", ";\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 box-shadow: inset 0px 0px 0px 1px ", ";\n cursor: not-allowed;\n\n ", "{\n background: ", ";\n cursor: not-allowed;\n pointer-events: none;\n color: ", ";\n }\n }\n\n &.valid {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ", ";\n }\n"])), function (props) {
50
50
  return props.size === Size.Small ? '48px' : '56px';
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);
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.neutral_500, COLORS.correct_400, COLORS.critical_400);
52
52
 
53
53
  var NumberField = function NumberField(_ref) {
54
54
  var _ref$size = _ref.size,
@@ -127,7 +127,7 @@ var NumberField = function NumberField(_ref) {
127
127
 
128
128
  var addInterval = function addInterval() {
129
129
  var val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);
130
- val = isNaN(val) && userInput === '' ? minValue !== null && minValue !== void 0 ? minValue : 0 : val;
130
+ val = isNaN(val) && userInput === '' ? minValue ? minValue - 1 : 0 : val;
131
131
 
132
132
  if (!isNaN(val)) {
133
133
  if (decimalPrecision) val = Math.round((val + interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val += 1;
@@ -137,7 +137,7 @@ var NumberField = function NumberField(_ref) {
137
137
 
138
138
  var subtractInterval = function subtractInterval() {
139
139
  var val = decimalPrecision ? parseFloat(userInput) : parseInt(userInput);
140
- val = isNaN(val) && userInput === '' ? maxValue !== null && maxValue !== void 0 ? maxValue : 0 : val;
140
+ val = isNaN(val) && userInput === '' ? maxValue ? maxValue + 1 : 0 : val;
141
141
 
142
142
  if (!isNaN(val)) {
143
143
  if (decimalPrecision) val = Math.round((val - interval) * Math.pow(10, decimalPrecision)) / Math.pow(10, decimalPrecision);else val -= 1;
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","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 box-shadow: inset 0px 0px 0px 1px ${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 box-shadow: inset 0px 0px 0px 1px ${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 box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_400};\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\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 box-shadow: inset 0px 0px 0px 1px ${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 box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n cursor: not-allowed;\n\n ${NumberInput}{\n background: ${COLORS.neutral_100};\n cursor: not-allowed;\n pointer-events: none;\n color: ${COLORS.neutral_500};\n }\n }\n\n &.valid {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.correct_400};\n }\n\n &.invalid {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.critical_400};\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 ? minValue-1 : 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 ? maxValue+1 : 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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@laerdal/life-react-components",
3
- "version": "1.9.4-dev.6",
3
+ "version": "1.9.4-dev.8",
4
4
  "private": false,
5
5
  "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
6
6
  "contributors": [