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

package/dist/InputFields/NumberField.cjs

@@ -21,6 +21,8 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _Button = require("../Button");
 
+var _common = require("../common");
+
 var _icons = require("../icons");
 
 var _styles = require("../styles");
@@ -31,7 +33,7 @@ var _types = require("../types");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -49,41 +51,53 @@ var LabelIcon = _styledComponents.default.div(_templateObject4 || (_templateObje
   return props.size === _types.Size.Small ? '6px' : '8px';
 });
 
-var InputWrapper = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    margin: ", ";\n    display: flex;\n    flex-grow: 1;\n"])), function (props) {
-  return props.size === _types.Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
-});
-
-var PrefixContainer = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    margin-right: 4px;\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    ", "\n"])), function (props) {
+var PrefixContainer = _styledComponents.default.div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    ", "\n    position: absolute;\n    padding: ", ";\n"])), function (props) {
   return props.size === _types.Size.Small ? '10px' : '11px';
 }, function (props) {
   return props.size === _types.Size.Small ? '20px' : '24px';
-}, _styles.COLORS.neutral_500, function (props) {
+}, function (props) {
+  return props.disabled ? _styles.COLORS.neutral_300 : _styles.COLORS.neutral_500;
+}, function (props) {
   return props.size === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, null);
+}, function (props) {
+  return props.size === _types.Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
 });
 
-var OperatorWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    display: flex;\n    margin:", ";\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ", ";\n        width: 1px;\n    }\n"])), function (props) {
+var OperatorWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n    top: 0;\n    right:0;\n    display: flex;\n    margin:", ";\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ", ";\n        width: 1px;\n    }\n\n    z-index: ", ";\n"])), function (props) {
   return props.size === _types.Size.Medium ? '4px 0' : '';
-}, _styles.COLORS.neutral_200);
+}, _styles.COLORS.neutral_200, _styles.Z_INDEXES.focus);
 
-var NumberInput = _styledComponents.default.input(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%; \n    height: ", ";   \n    border: none;\n    color: ", ";\n    padding: 0;    \n    ", "\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n\n    &::placeholder {\n        ", "\n    }\n"])), function (props) {
-  return props.fieldSize === _types.Size.Small ? '20px' : '24px';
-}, _styles.COLORS.neutral_500, function (props) {
+var NumberInput = _styledComponents.default.input(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n    width: 100%;    \n    border: none;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    outline: none;\n    color: ", ";\n    ", "\n\n    ", "\n\n    ", "\n\n    &::placeholder {\n        ", "\n    }\n\n    &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n    \n    &.focus-visible {\n        ", "\n    }\n\n    &:hover: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        color: ", ";\n        cursor: not-allowed;\n        pointer-events: none;\n\n        &::placeholder {\n            color: ", ";\n        }\n    }\n\n    &.readOnly {\n        background: ", ";\n        box-shadow: inset 0px 0px 0px 1px ", ";\n        cursor: not-allowed;\n        background: ", ";\n        cursor: not-allowed;\n        pointer-events: none;\n        color: ", ";\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"])), _styles.COLORS.neutral_400, _styles.COLORS.neutral_500, function (props) {
   return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Regular, _styles.COLORS.black);
+}, function (props) {
+  return props.type === 'NumberField' ? "\n        padding: ".concat(props.fieldSize === _types.Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px', ";\n        padding-left: ").concat(props.hasPrefix ? '30px' : '', ";\n    ") : '';
+}, function (props) {
+  return props.type === 'NumberInput' ? "\n        padding: ".concat(props.fieldSize === _types.Size.Small ? '14px 48px' : '16px 48px', ";\n    ") : '';
 }, function (props) {
   return props.fieldSize === _types.Size.Small ? (0, _typography.ComponentSStyling)(_typography.ComponentTextStyle.Italic, null) : (0, _typography.ComponentMStyling)(_typography.ComponentTextStyle.Italic, null);
-});
+}, _styles.COLORS.primary_800, _styles.focusStyles, _styles.COLORS.primary_700, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_300, _styles.COLORS.neutral_100, _styles.COLORS.neutral_500, _styles.COLORS.correct_400, _styles.COLORS.critical_400);
 
-var NoteLabel = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    ", "    \n"])), _styles.COLORS.neutral_500, function (props) {
+var NoteLabel = _styledComponents.default.div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n    color: ", ";\n    ", "    \n"])), _styles.COLORS.neutral_500, function (props) {
   return props.size === _types.Size.Small ? (0, _typography.ComponentXXSStyling)(_typography.ComponentTextStyle.Regular, null) : (0, _typography.ComponentXSStyling)(_typography.ComponentTextStyle.Regular, null);
 });
 
-var NoteIcon = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n    svg {\n        height: 16px;\n    }\n"])));
+var NoteIcon = _styledComponents.default.div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n    svg {\n        height: 16px;\n    }\n"])));
 
-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);
+var NoteContainer = _styledComponents.default.div(_templateObject10 || (_templateObject10 = (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);
 
-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) {
+var InputContainer = _styledComponents.default.div(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n    min-width: ", ";\n    height: ", ";\n    display: flex;\n    position: relative;\n"])), function (props) {
+  return props.type === 'NumberField' ? '160px' : '144px';
+}, function (props) {
   return props.size === _types.Size.Small ? '48px' : '56px';
-}, _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);
+});
+
+var LeftOperator = _styledComponents.default.div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n    top: ", ";\n    left: 0;\n    z-index: ", ";\n"])), function (props) {
+  return props.size === _types.Size.Small ? '0' : '4px';
+}, _styles.Z_INDEXES.focus);
+
+var RightOperator = _styledComponents.default.div(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2.default)(["\n    position: absolute;\n    top: ", ";\n    right: 0;\n    z-index: ", ";\n"])), function (props) {
+  return props.size === _types.Size.Small ? '0' : '4px';
+}, _styles.Z_INDEXES.focus);
 
 var NumberField = function NumberField(_ref) {
   var _ref$size = _ref.size,
@@ -104,7 +118,9 @@ var NumberField = function NumberField(_ref) {
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       valid = _ref.valid,
-      defaultVal = _ref.defaultVal;
+      defaultVal = _ref.defaultVal,
+      placeholder = _ref.placeholder,
+      type = _ref.type;
 
   var _React$useState = React.useState(defaultVal ? defaultVal.toString() : ''),
       _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
@@ -112,6 +128,7 @@ var NumberField = function NumberField(_ref) {
       setUserInput = _React$useState2[1];
 
   var fieldState = valid !== undefined ? valid ? 'valid' : 'invalid' : undefined;
+  var elementRef = (0, _common.useFocusVisibleRef)();
 
   var handleKeyPress = function handleKeyPress(e) {
     switch (e.key) {
@@ -190,40 +207,12 @@ var NumberField = function NumberField(_ref) {
     return operatorState;
   };
 
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelContainer, {
-      size: size,
-      children: [required && /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelIcon, {
+  var renderNumberFieldElements = function renderNumberFieldElements() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(PrefixContainer, {
         size: size,
-        "data-testid": 'labelIcon',
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Asterisk, {
-          color: _styles.COLORS.critical_500
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelText, {
-        children: label
-      })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputContainer, {
-      size: size,
-      "data-testid": 'inputContainer',
-      tabIndex: -1,
-      className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(fieldState ? " ".concat(fieldState) : ''),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(InputWrapper, {
-        size: size,
-        children: [prefix && /*#__PURE__*/(0, _jsxRuntime.jsx)(PrefixContainer, {
-          size: size,
-          children: prefix
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(NumberInput, {
-          fieldSize: size,
-          placeholder: "Enter number",
-          value: userInput,
-          tabIndex: disabled || readOnly ? -1 : 0,
-          onChange: function onChange(e) {
-            return handleInput(e);
-          },
-          onKeyDown: function onKeyDown(e) {
-            return handleKeyPress(e);
-          }
-        })]
+        disabled: disabled,
+        children: prefix
       }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(OperatorWrapper, {
         "data-testid": 'operators',
         size: size,
@@ -255,6 +244,80 @@ var NumberField = function NumberField(_ref) {
           })
         })]
       })]
+    });
+  };
+
+  var renderNumberInputElements = function renderNumberInputElements() {
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(LeftOperator, {
+        "data-testid": 'leftOperator',
+        size: size,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          tabIndex: -1,
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return subtractInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'subtract'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Minus, {
+            size: "14px"
+          })
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RightOperator, {
+        "data-testid": 'rightOperator',
+        size: size,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
+          tabIndex: -1,
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return addInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'add'),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Plus, {
+            size: "14px"
+          })
+        })
+      })]
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelContainer, {
+      size: size,
+      children: [required && /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelIcon, {
+        size: size,
+        "data-testid": 'labelIcon',
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Asterisk, {
+          color: _styles.COLORS.critical_500
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelText, {
+        children: label
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(InputContainer, {
+      type: type,
+      size: size,
+      tabIndex: -1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NumberInput, {
+        type: type,
+        "data-testid": 'numberInput',
+        fieldSize: size,
+        hasPrefix: !!prefix,
+        placeholder: placeholder ? placeholder : 'Enter number',
+        value: userInput,
+        ref: elementRef,
+        tabIndex: disabled || readOnly ? -1 : 0,
+        onChange: function onChange(e) {
+          return handleInput(e);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return handleKeyPress(e);
+        },
+        className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(fieldState ? " ".concat(fieldState) : '')
+      }), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements()]
     }), note && /*#__PURE__*/(0, _jsxRuntime.jsxs)(NoteContainer, {
       className: 'noteField'.concat(fieldState ? " ".concat(fieldState) : ''),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(NoteIcon, {
@@ -281,7 +344,9 @@ NumberField.propTypes = {
   disabled: _propTypes.default.bool,
   readOnly: _propTypes.default.bool,
   valid: _propTypes.default.bool,
-  defaultVal: _propTypes.default.number
+  defaultVal: _propTypes.default.number,
+  placeholder: _propTypes.default.string,
+  type: _propTypes.default.oneOf(['NumberField', 'NumberInput']).isRequired
 };
 var _default = NumberField;
 exports.default = _default;

package/dist/InputFields/NumberField.cjs.map

@@ -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            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"}
+{"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["Container","styled","div","LabelContainer","COLORS","neutral_500","props","size","Size","Small","ComponentTextStyle","Regular","LabelText","LabelIcon","PrefixContainer","disabled","neutral_300","OperatorWrapper","Medium","neutral_200","Z_INDEXES","focus","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","focusStyles","primary_700","neutral_100","correct_400","critical_400","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","LeftOperator","RightOperator","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","valid","defaultVal","placeholder","React","useState","toString","userInput","setUserInput","fieldState","undefined","elementRef","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","renderNumberFieldElements","renderNumberInputElements","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { useFocusVisibleRef } from '../common';\nimport { SystemIcons } from '../icons';\nimport { COLORS, focusStyles, Z_INDEXES } 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 PrefixContainer = styled.div<{size: Size, disabled: boolean}>`\n    width: ${props => props.size === Size.Small?'10px':'11px'};\n    height: ${props => props.size === Size.Small?'20px':'24px'};\n    color: ${props => props.disabled ? COLORS.neutral_300 : COLORS.neutral_500};\n    ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n    position: absolute;\n    padding: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n    position: absolute;\n    top: 0;\n    right:0;\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    z-index: ${Z_INDEXES.focus};\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size, hasPrefix: boolean, type: string}>`\n    width: 100%;    \n    border: none;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n    outline: none;\n    color: ${COLORS.neutral_500};\n    ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Regular, COLORS.black):ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    ${props => props.type === 'NumberField' ? `\n        padding: ${props.fieldSize === Size.Small?'14px 97px 14px 16px':'16px 97px 16px 16px'};\n        padding-left: ${props.hasPrefix ? '30px':''};\n    ` : ''}\n\n    ${props => props.type === 'NumberInput' ? `\n        padding: ${props.fieldSize === Size.Small?'14px 48px':'16px 48px'};\n    ` : ''}\n\n    &::placeholder {\n        ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n    }\n\n    &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    }\n    \n    &.focus-visible {\n        ${focusStyles}\n    }\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    &.disabled {\n        box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n        cursor: not-allowed;\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    &.readOnly {\n        background: ${COLORS.neutral_100};\n        box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n        cursor: not-allowed;\n        background: ${COLORS.neutral_100};\n        cursor: not-allowed;\n        pointer-events: none;\n        color: ${COLORS.neutral_500};\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\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, type:string}>`\n    min-width: ${props => props.type === 'NumberField' ? '160px' : '144px'};\n    height: ${props => props.size === Size.Small?'48px':'56px'};\n    display: flex;\n    position: relative;\n`;\n\nconst LeftOperator = styled.div<{size: Size}>`\n    position: absolute;\n    top: ${props => props.size === Size.Small ? '0' : '4px'};\n    left: 0;\n    z-index: ${Z_INDEXES.focus};\n`;\n\nconst RightOperator = styled.div<{size: Size}>`\n    position: absolute;\n    top: ${props => props.size === Size.Small ? '0' : '4px'};\n    right: 0;\n    z-index: ${Z_INDEXES.focus};\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    placeholder?: string;\n    type: 'NumberField' | 'NumberInput';\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     placeholder,\n     type}) => {\n    const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n    let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n    const elementRef = useFocusVisibleRef();\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    const renderNumberFieldElements = () => {\n        return(\n            <>\n            {prefix && <PrefixContainer size={size} disabled={disabled}>\n                            {prefix}\n                        </PrefixContainer>}\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            </>)\n    }\n\n    const renderNumberInputElements = () => {\n        return(\n        <>\n        <LeftOperator data-testid={'leftOperator'} 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        </LeftOperator>\n        <RightOperator data-testid={'rightOperator'} size={size}>\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        </RightOperator>\n        </>)\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 type={type} size={size} tabIndex={-1}>\n                <NumberInput type={type} data-testid={'numberInput'} fieldSize={size} hasPrefix={!!prefix} placeholder={placeholder ? placeholder : 'Enter number'}\n                             value={userInput} ref={elementRef}\n                             tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}\n                             className={'numberField'.concat(disabled?' disabled':'')\n                                                     .concat(readOnly?' readOnly':'')\n                                                     .concat(fieldState?` ${fieldState}`:'')}/>\n                \n                {type === 'NumberField' && renderNumberFieldElements()}\n                {type === 'NumberInput' && renderNumberInputElements()}\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.d.ts

@@ -16,6 +16,8 @@ declare type NumberFieldProps = {
     readOnly?: boolean;
     valid?: boolean;
     defaultVal?: number;
+    placeholder?: string;
+    type: 'NumberField' | 'NumberInput';
 };
 declare const NumberField: React.FunctionComponent<NumberFieldProps>;
 export default NumberField;

package/dist/InputFields/NumberField.js

@@ -2,17 +2,19 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
 import _pt from "prop-types";
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13;
 
 import * as React from 'react';
 import styled from 'styled-components';
 import { IconButton } from '../Button';
+import { useFocusVisibleRef } from '../common';
 import { SystemIcons } from '../icons';
-import { COLORS } from '../styles';
+import { COLORS, focusStyles, Z_INDEXES } from '../styles';
 import { ComponentMStyling, ComponentSStyling, ComponentTextStyle, ComponentXXSStyling, ComponentXSStyling } from '../styles/typography';
 import { Size } from '../types';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral([""])));
 var LabelContainer = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-bottom: 4px;\n    color: ", ";\n    display: flex;\n    ", "\n"])), COLORS.neutral_500, function (props) {
   return props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(ComponentTextStyle.Regular, null);
@@ -21,34 +23,45 @@ var LabelText = styled.div(_templateObject3 || (_templateObject3 = _taggedTempla
 var LabelIcon = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    margin-right: ", ";\n    svg {\n        height: 9px;\n        width: 9px;\n    }\n"])), function (props) {
   return props.size === Size.Small ? '6px' : '8px';
 });
-var InputWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    margin: ", ";\n    display: flex;\n    flex-grow: 1;\n"])), function (props) {
-  return props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
-});
-var PrefixContainer = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    margin-right: 4px;\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    ", "\n"])), function (props) {
+var PrefixContainer = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    width: ", ";\n    height: ", ";\n    color: ", ";\n    ", "\n    position: absolute;\n    padding: ", ";\n"])), function (props) {
   return props.size === Size.Small ? '10px' : '11px';
 }, function (props) {
   return props.size === Size.Small ? '20px' : '24px';
-}, COLORS.neutral_500, function (props) {
+}, function (props) {
+  return props.disabled ? COLORS.neutral_300 : COLORS.neutral_500;
+}, function (props) {
   return props.size === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, null) : ComponentMStyling(ComponentTextStyle.Regular, null);
+}, function (props) {
+  return props.size === Size.Small ? '14px 0 14px 16px' : '16px 0 16px 16px';
 });
-var OperatorWrapper = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    margin:", ";\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ", ";\n        width: 1px;\n    }\n"])), function (props) {
+var OperatorWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: 0;\n    right:0;\n    display: flex;\n    margin:", ";\n    svg {\n        height: 14px;\n        width: 14px;\n    }\n    .divider {\n        margin: 16px 0;\n        background: ", ";\n        width: 1px;\n    }\n\n    z-index: ", ";\n"])), function (props) {
   return props.size === Size.Medium ? '4px 0' : '';
-}, COLORS.neutral_200);
-var NumberInput = styled.input(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    width: 100%; \n    height: ", ";   \n    border: none;\n    color: ", ";\n    padding: 0;    \n    ", "\n\n    &:hover, &:focus, &:active {\n        outline: none;\n    }\n\n    &::placeholder {\n        ", "\n    }\n"])), function (props) {
-  return props.fieldSize === Size.Small ? '20px' : '24px';
-}, COLORS.neutral_500, function (props) {
+}, COLORS.neutral_200, Z_INDEXES.focus);
+var NumberInput = styled.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    width: 100%;    \n    border: none;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ", ";\n    outline: none;\n    color: ", ";\n    ", "\n\n    ", "\n\n    ", "\n\n    &::placeholder {\n        ", "\n    }\n\n    &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ", ";\n    }\n    \n    &.focus-visible {\n        ", "\n    }\n\n    &:hover: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        color: ", ";\n        cursor: not-allowed;\n        pointer-events: none;\n\n        &::placeholder {\n            color: ", ";\n        }\n    }\n\n    &.readOnly {\n        background: ", ";\n        box-shadow: inset 0px 0px 0px 1px ", ";\n        cursor: not-allowed;\n        background: ", ";\n        cursor: not-allowed;\n        pointer-events: none;\n        color: ", ";\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"])), COLORS.neutral_400, COLORS.neutral_500, function (props) {
   return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Regular, COLORS.black) : ComponentMStyling(ComponentTextStyle.Regular, COLORS.black);
+}, function (props) {
+  return props.type === 'NumberField' ? "\n        padding: ".concat(props.fieldSize === Size.Small ? '14px 97px 14px 16px' : '16px 97px 16px 16px', ";\n        padding-left: ").concat(props.hasPrefix ? '30px' : '', ";\n    ") : '';
+}, function (props) {
+  return props.type === 'NumberInput' ? "\n        padding: ".concat(props.fieldSize === Size.Small ? '14px 48px' : '16px 48px', ";\n    ") : '';
 }, function (props) {
   return props.fieldSize === Size.Small ? ComponentSStyling(ComponentTextStyle.Italic, null) : ComponentMStyling(ComponentTextStyle.Italic, null);
-});
-var NoteLabel = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    color: ", ";\n    ", "    \n"])), COLORS.neutral_500, function (props) {
+}, COLORS.primary_800, focusStyles, COLORS.primary_700, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_300, COLORS.neutral_100, COLORS.neutral_500, COLORS.correct_400, COLORS.critical_400);
+var NoteLabel = styled.div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    color: ", ";\n    ", "    \n"])), COLORS.neutral_500, function (props) {
   return props.size === Size.Small ? ComponentXXSStyling(ComponentTextStyle.Regular, null) : ComponentXSStyling(ComponentTextStyle.Regular, null);
 });
-var NoteIcon = styled.div(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    svg {\n        height: 16px;\n    }\n"])));
-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);
-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) {
+var NoteIcon = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    svg {\n        height: 16px;\n    }\n"])));
+var NoteContainer = styled.div(_templateObject10 || (_templateObject10 = _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);
+var InputContainer = styled.div(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    min-width: ", ";\n    height: ", ";\n    display: flex;\n    position: relative;\n"])), function (props) {
+  return props.type === 'NumberField' ? '160px' : '144px';
+}, function (props) {
   return props.size === Size.Small ? '48px' : '56px';
-}, 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);
+});
+var LeftOperator = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: ", ";\n    left: 0;\n    z-index: ", ";\n"])), function (props) {
+  return props.size === Size.Small ? '0' : '4px';
+}, Z_INDEXES.focus);
+var RightOperator = styled.div(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n    position: absolute;\n    top: ", ";\n    right: 0;\n    z-index: ", ";\n"])), function (props) {
+  return props.size === Size.Small ? '0' : '4px';
+}, Z_INDEXES.focus);
 
 var NumberField = function NumberField(_ref) {
   var _ref$size = _ref.size,
@@ -69,7 +82,9 @@ var NumberField = function NumberField(_ref) {
       _ref$readOnly = _ref.readOnly,
       readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
       valid = _ref.valid,
-      defaultVal = _ref.defaultVal;
+      defaultVal = _ref.defaultVal,
+      placeholder = _ref.placeholder,
+      type = _ref.type;
 
   var _React$useState = React.useState(defaultVal ? defaultVal.toString() : ''),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -77,6 +92,7 @@ var NumberField = function NumberField(_ref) {
       setUserInput = _React$useState2[1];
 
   var fieldState = valid !== undefined ? valid ? 'valid' : 'invalid' : undefined;
+  var elementRef = useFocusVisibleRef();
 
   var handleKeyPress = function handleKeyPress(e) {
     switch (e.key) {
@@ -155,40 +171,12 @@ var NumberField = function NumberField(_ref) {
     return operatorState;
   };
 
-  return /*#__PURE__*/_jsxs(Container, {
-    children: [/*#__PURE__*/_jsxs(LabelContainer, {
-      size: size,
-      children: [required && /*#__PURE__*/_jsx(LabelIcon, {
+  var renderNumberFieldElements = function renderNumberFieldElements() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [prefix && /*#__PURE__*/_jsx(PrefixContainer, {
         size: size,
-        "data-testid": 'labelIcon',
-        children: /*#__PURE__*/_jsx(SystemIcons.Asterisk, {
-          color: COLORS.critical_500
-        })
-      }), /*#__PURE__*/_jsx(LabelText, {
-        children: label
-      })]
-    }), /*#__PURE__*/_jsxs(InputContainer, {
-      size: size,
-      "data-testid": 'inputContainer',
-      tabIndex: -1,
-      className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(fieldState ? " ".concat(fieldState) : ''),
-      children: [/*#__PURE__*/_jsxs(InputWrapper, {
-        size: size,
-        children: [prefix && /*#__PURE__*/_jsx(PrefixContainer, {
-          size: size,
-          children: prefix
-        }), /*#__PURE__*/_jsx(NumberInput, {
-          fieldSize: size,
-          placeholder: "Enter number",
-          value: userInput,
-          tabIndex: disabled || readOnly ? -1 : 0,
-          onChange: function onChange(e) {
-            return handleInput(e);
-          },
-          onKeyDown: function onKeyDown(e) {
-            return handleKeyPress(e);
-          }
-        })]
+        disabled: disabled,
+        children: prefix
       }), /*#__PURE__*/_jsxs(OperatorWrapper, {
         "data-testid": 'operators',
         size: size,
@@ -220,6 +208,80 @@ var NumberField = function NumberField(_ref) {
           })
         })]
       })]
+    });
+  };
+
+  var renderNumberInputElements = function renderNumberInputElements() {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(LeftOperator, {
+        "data-testid": 'leftOperator',
+        size: size,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          tabIndex: -1,
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return subtractInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'subtract'),
+          children: /*#__PURE__*/_jsx(SystemIcons.Minus, {
+            size: "14px"
+          })
+        })
+      }), /*#__PURE__*/_jsx(RightOperator, {
+        "data-testid": 'rightOperator',
+        size: size,
+        children: /*#__PURE__*/_jsx(IconButton, {
+          tabIndex: -1,
+          variant: "secondary",
+          shape: "square",
+          action: function action() {
+            return addInterval();
+          },
+          useTransparentBackground: true,
+          disabled: disabled || readOnly || isLocked(userInput, 'add'),
+          children: /*#__PURE__*/_jsx(SystemIcons.Plus, {
+            size: "14px"
+          })
+        })
+      })]
+    });
+  };
+
+  return /*#__PURE__*/_jsxs(Container, {
+    children: [/*#__PURE__*/_jsxs(LabelContainer, {
+      size: size,
+      children: [required && /*#__PURE__*/_jsx(LabelIcon, {
+        size: size,
+        "data-testid": 'labelIcon',
+        children: /*#__PURE__*/_jsx(SystemIcons.Asterisk, {
+          color: COLORS.critical_500
+        })
+      }), /*#__PURE__*/_jsx(LabelText, {
+        children: label
+      })]
+    }), /*#__PURE__*/_jsxs(InputContainer, {
+      type: type,
+      size: size,
+      tabIndex: -1,
+      children: [/*#__PURE__*/_jsx(NumberInput, {
+        type: type,
+        "data-testid": 'numberInput',
+        fieldSize: size,
+        hasPrefix: !!prefix,
+        placeholder: placeholder ? placeholder : 'Enter number',
+        value: userInput,
+        ref: elementRef,
+        tabIndex: disabled || readOnly ? -1 : 0,
+        onChange: function onChange(e) {
+          return handleInput(e);
+        },
+        onKeyDown: function onKeyDown(e) {
+          return handleKeyPress(e);
+        },
+        className: 'numberField'.concat(disabled ? ' disabled' : '').concat(readOnly ? ' readOnly' : '').concat(fieldState ? " ".concat(fieldState) : '')
+      }), type === 'NumberField' && renderNumberFieldElements(), type === 'NumberInput' && renderNumberInputElements()]
     }), note && /*#__PURE__*/_jsxs(NoteContainer, {
       className: 'noteField'.concat(fieldState ? " ".concat(fieldState) : ''),
       children: [/*#__PURE__*/_jsx(NoteIcon, {
@@ -246,7 +308,9 @@ NumberField.propTypes = {
   disabled: _pt.bool,
   readOnly: _pt.bool,
   valid: _pt.bool,
-  defaultVal: _pt.number
+  defaultVal: _pt.number,
+  placeholder: _pt.string,
+  type: _pt.oneOf(['NumberField', 'NumberInput']).isRequired
 };
 export default NumberField;
 //# sourceMappingURL=NumberField.js.map

package/dist/InputFields/NumberField.js.map

@@ -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            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"}
+{"version":3,"sources":["../../src/InputFields/NumberField.tsx"],"names":["React","styled","IconButton","useFocusVisibleRef","SystemIcons","COLORS","focusStyles","Z_INDEXES","ComponentMStyling","ComponentSStyling","ComponentTextStyle","ComponentXXSStyling","ComponentXSStyling","Size","Container","div","LabelContainer","neutral_500","props","size","Small","Regular","LabelText","LabelIcon","PrefixContainer","disabled","neutral_300","OperatorWrapper","Medium","neutral_200","focus","NumberInput","input","neutral_400","fieldSize","black","type","hasPrefix","Italic","primary_800","primary_700","neutral_100","correct_400","critical_400","NoteLabel","NoteIcon","NoteContainer","correct_500","critical_500","InputContainer","LeftOperator","RightOperator","NumberField","label","note","noteIcon","required","prefix","interval","minValue","maxValue","allowNegative","decimalPrecision","readOnly","valid","defaultVal","placeholder","useState","toString","userInput","setUserInput","fieldState","undefined","elementRef","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","renderNumberFieldElements","renderNumberInputElements","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { IconButton } from '../Button';\nimport { useFocusVisibleRef } from '../common';\nimport { SystemIcons } from '../icons';\nimport { COLORS, focusStyles, Z_INDEXES } 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 PrefixContainer = styled.div<{size: Size, disabled: boolean}>`\n    width: ${props => props.size === Size.Small?'10px':'11px'};\n    height: ${props => props.size === Size.Small?'20px':'24px'};\n    color: ${props => props.disabled ? COLORS.neutral_300 : COLORS.neutral_500};\n    ${props=>props.size===Size.Small?ComponentSStyling(ComponentTextStyle.Regular,null):ComponentMStyling(ComponentTextStyle.Regular,null)}\n    position: absolute;\n    padding: ${props => props.size === Size.Small?'14px 0 14px 16px':'16px 0 16px 16px'};\n`;\n\nconst OperatorWrapper = styled.div<{size: Size}>`\n    position: absolute;\n    top: 0;\n    right:0;\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    z-index: ${Z_INDEXES.focus};\n`;\n\nconst NumberInput = styled.input<{fieldSize: Size, hasPrefix: boolean, type: string}>`\n    width: 100%;    \n    border: none;\n    border-radius: 4px;\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_400};\n    outline: none;\n    color: ${COLORS.neutral_500};\n    ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Regular, COLORS.black):ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n    ${props => props.type === 'NumberField' ? `\n        padding: ${props.fieldSize === Size.Small?'14px 97px 14px 16px':'16px 97px 16px 16px'};\n        padding-left: ${props.hasPrefix ? '30px':''};\n    ` : ''}\n\n    ${props => props.type === 'NumberInput' ? `\n        padding: ${props.fieldSize === Size.Small?'14px 48px':'16px 48px'};\n    ` : ''}\n\n    &::placeholder {\n        ${props => props.fieldSize === Size.Small?ComponentSStyling(ComponentTextStyle.Italic, null):ComponentMStyling(ComponentTextStyle.Italic, null)}\n    }\n\n    &:focus:not(.focus-visible):not(.disabled):not(.readOnly):not(.valid):not(.invalid) {\n        box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n    }\n    \n    &.focus-visible {\n        ${focusStyles}\n    }\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    &.disabled {\n        box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_100};\n        cursor: not-allowed;\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    &.readOnly {\n        background: ${COLORS.neutral_100};\n        box-shadow: inset 0px 0px 0px 1px ${COLORS.neutral_300};\n        cursor: not-allowed;\n        background: ${COLORS.neutral_100};\n        cursor: not-allowed;\n        pointer-events: none;\n        color: ${COLORS.neutral_500};\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\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, type:string}>`\n    min-width: ${props => props.type === 'NumberField' ? '160px' : '144px'};\n    height: ${props => props.size === Size.Small?'48px':'56px'};\n    display: flex;\n    position: relative;\n`;\n\nconst LeftOperator = styled.div<{size: Size}>`\n    position: absolute;\n    top: ${props => props.size === Size.Small ? '0' : '4px'};\n    left: 0;\n    z-index: ${Z_INDEXES.focus};\n`;\n\nconst RightOperator = styled.div<{size: Size}>`\n    position: absolute;\n    top: ${props => props.size === Size.Small ? '0' : '4px'};\n    right: 0;\n    z-index: ${Z_INDEXES.focus};\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    placeholder?: string;\n    type: 'NumberField' | 'NumberInput';\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     placeholder,\n     type}) => {\n    const [userInput, setUserInput] = React.useState(defaultVal?defaultVal.toString():'');\n    let fieldState = (valid!==undefined) ? (valid?'valid':'invalid') : undefined;\n\n    const elementRef = useFocusVisibleRef();\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    const renderNumberFieldElements = () => {\n        return(\n            <>\n            {prefix && <PrefixContainer size={size} disabled={disabled}>\n                            {prefix}\n                        </PrefixContainer>}\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            </>)\n    }\n\n    const renderNumberInputElements = () => {\n        return(\n        <>\n        <LeftOperator data-testid={'leftOperator'} 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        </LeftOperator>\n        <RightOperator data-testid={'rightOperator'} size={size}>\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        </RightOperator>\n        </>)\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 type={type} size={size} tabIndex={-1}>\n                <NumberInput type={type} data-testid={'numberInput'} fieldSize={size} hasPrefix={!!prefix} placeholder={placeholder ? placeholder : 'Enter number'}\n                             value={userInput} ref={elementRef}\n                             tabIndex={(disabled || readOnly) ? -1 : 0} onChange={e=>handleInput(e)} onKeyDown={e=>handleKeyPress(e)}\n                             className={'numberField'.concat(disabled?' disabled':'')\n                                                     .concat(readOnly?' readOnly':'')\n                                                     .concat(fieldState?` ${fieldState}`:'')}/>\n                \n                {type === 'NumberField' && renderNumberFieldElements()}\n                {type === 'NumberInput' && renderNumberInputElements()}\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

@@ -1,6 +1,6 @@
 {
   "name": "@laerdal/life-react-components",
-  "version": "1.9.4-dev.8.full",
+  "version": "1.9.4-dev.9",
   "private": false,
   "author": "Thomas Kalve <thomas.kalve@laerdal.com>",
   "contributors": [