@dnb/eufemia 10.16.0 → 10.18.0

package/cjs/extensions/forms/Field/Number/Number.js

@@ -12,6 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _FieldBlock = _interopRequireDefault(require("../../FieldBlock"));
 var _hooks = require("../../hooks");
 var _utils = require("../../../../components/flex/utils");
+var _SliderHelpers = require("../../../../components/slider/SliderHelpers");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -22,19 +23,20 @@ function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key i
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function NumberComponent(props) {
-  var _props$width;
+  var _props$width, _sharedContext$transl, _sharedContext$transl2;
   const sharedContext = (0, _react.useContext)(_Context.default);
   const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const {
     currency,
     percent,
     mask,
+    step = 1,
     thousandSeparator,
     decimalSymbol,
     decimalLimit = 12,
     prefix,
     suffix,
-    rightAligned
+    showStepControls
   } = props;
   const errorMessages = (0, _react.useMemo)(() => _objectSpread({
     required: tr.inputErrorRequired,
@@ -67,9 +69,15 @@ function NumberComponent(props) {
       numberValue
     } = _ref;
     if (value === '') {
-      return emptyValue;
+      return props.emptyValue;
     }
     return numberValue;
+  }, [props.emptyValue]);
+  const transformValue = (0, _react.useCallback)((value, currentValue) => {
+    if (value > Number.MAX_SAFE_INTEGER || value < Number.MIN_SAFE_INTEGER) {
+      return currentValue;
+    }
+    return value;
   }, []);
   const maskProps = (0, _react.useMemo)(() => {
     if (currency) {
@@ -100,6 +108,7 @@ function NumberComponent(props) {
     schema,
     toInput,
     fromInput,
+    transformValue,
     width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'medium'
   });
   const {
@@ -111,53 +120,123 @@ function NumberComponent(props) {
     layout,
     placeholder,
     label,
-    labelDescription,
-    labelSecondary,
     value,
+    minimum = Number.MIN_SAFE_INTEGER,
+    maximum = Number.MAX_SAFE_INTEGER,
     disabled,
     info,
     warning,
     error,
     help,
-    emptyValue,
+    size,
     width,
+    align,
     handleFocus,
     handleBlur,
     handleChange
   } = (0, _hooks.useDataValue)(preparedProps);
-  return _react.default.createElement(_FieldBlock.default, _extends({
+  const onKeyDownHandler = (0, _react.useCallback)(_ref2 => {
+    let {
+      key,
+      event
+    } = _ref2;
+    if (!showStepControls) {
+      return;
+    }
+    let numberValue = null;
+    switch (key) {
+      case 'ArrowUp':
+        numberValue = (0, _SliderHelpers.clamp)(value + step, minimum, maximum);
+        break;
+      case 'ArrowDown':
+        numberValue = (0, _SliderHelpers.clamp)(value - step, minimum, maximum);
+        break;
+    }
+    if (numberValue !== null) {
+      event.persist();
+      event.preventDefault();
+      handleChange({
+        numberValue
+      });
+    }
+  }, [handleChange, maximum, minimum, showStepControls, step, value]);
+  const fieldBlockProps = _objectSpread({
     className: (0, _classnames.default)('dnb-forms-field-number', className),
+    contentClassName: (0, _classnames.default)('dnb-forms-field-number__contents', showStepControls && 'dnb-forms-field-number__contents--has-controls', disabled && 'dnb-forms-field-number__contents--is-disabled', error && 'dnb-forms-field-number__contents--has-error'),
     forId: id,
-    layout: layout,
-    label: label,
-    labelDescription: labelDescription,
-    labelSecondary: labelSecondary,
-    info: info,
-    warning: warning,
-    error: error,
-    disabled: disabled,
+    layout,
+    label,
+    info,
+    warning,
+    error,
+    disabled,
     width: width === 'stretch' ? width : undefined,
     contentsWidth: width !== false ? width : undefined
-  }, (0, _utils.pickSpacingProps)(props)), _react.default.createElement(_components.InputMasked, _extends({
-    id: id,
-    name: name,
-    autoComplete: autoComplete,
-    className: (0, _classnames.default)('dnb-forms-field-number__input', inputClassName),
-    placeholder: placeholder,
-    value: value
-  }, maskProps, {
-    align: rightAligned && 'right',
-    on_focus: handleFocus,
-    on_blur: handleBlur,
-    on_change: handleChange,
-    disabled: disabled,
+  }, (0, _utils.pickSpacingProps)(props));
+  const increaseProps = showStepControls && {
+    'aria-hidden': true,
+    className: 'dnb-button--control-after',
+    variant: 'secondary',
+    icon: 'add',
+    size: convertInputSizeToButtonSize(size),
+    tabIndex: -1,
+    disabled: disabled || value >= maximum,
+    onClick: () => {
+      handleChange({
+        numberValue: (0, _SliderHelpers.clamp)(value + step, minimum, maximum)
+      });
+    },
+    title: sharedContext === null || sharedContext === void 0 ? void 0 : (_sharedContext$transl = sharedContext.translation.Slider.addTitle) === null || _sharedContext$transl === void 0 ? void 0 : _sharedContext$transl.replace('%s', String(value + step))
+  };
+  const decreaseProps = showStepControls && _objectSpread(_objectSpread({}, increaseProps), {}, {
+    className: 'dnb-button--control-before',
+    icon: 'subtract',
+    disabled: disabled || value <= minimum,
+    onClick: () => {
+      handleChange({
+        numberValue: (0, _SliderHelpers.clamp)(value - step, minimum, maximum)
+      });
+    },
+    title: sharedContext === null || sharedContext === void 0 ? void 0 : (_sharedContext$transl2 = sharedContext.translation.Slider.subtractTitle) === null || _sharedContext$transl2 === void 0 ? void 0 : _sharedContext$transl2.replace('%s', String(value - step))
+  });
+  const ariaParams = showStepControls && {
+    role: 'spinbutton',
+    'aria-valuemin': String(minimum),
+    'aria-valuemax': String(maximum),
+    'aria-valuenow': String(value),
+    'aria-valuetext': String(value)
+  };
+  const inputProps = _objectSpread(_objectSpread({
+    id,
+    name,
+    autoComplete,
+    className: (0, _classnames.default)(`dnb-forms-field-number__input dnb-input--${size}`, inputClassName),
+    step,
+    placeholder,
+    value,
+    align: showStepControls ? 'center' : align
+  }, maskProps), {}, {
+    onKeyDown: onKeyDownHandler,
+    onFocus: handleFocus,
+    onBlur: handleBlur,
+    onChange: handleChange,
+    disabled,
     status: error ? 'error' : undefined,
     stretch: width !== undefined,
-    suffix: help ? _react.default.createElement(_components.HelpButton, {
+    suffix: help && !showStepControls ? _react.default.createElement(_components.HelpButton, {
       title: help.title
     }, help.contents) : undefined
-  })));
+  }, ariaParams);
+  return _react.default.createElement(_FieldBlock.default, _extends({}, fieldBlockProps, {
+    asFieldset: false
+  }), showStepControls && _react.default.createElement(_components.Button, decreaseProps), _react.default.createElement(_components.InputMasked, inputProps), showStepControls && _react.default.createElement(_components.Button, increaseProps), help && showStepControls && _react.default.createElement(_components.HelpButton, {
+    title: help.title
+  }, help.contents));
 }
+const convertInputSizeToButtonSize = inputSize => {
+  const buttonSize = ['small', 'medium', 'large'].indexOf(inputSize) > -1 ? inputSize : 'medium';
+  return buttonSize;
+};
 NumberComponent._supportsSpacingProps = true;
 var _default = NumberComponent;
 exports.default = _default;

package/cjs/extensions/forms/Field/Number/Number.js.map

@@ -1 +1 @@
-{"version":3,"file":"Number.js","names":["_react","_interopRequireWildcard","require","_components","_Context","_interopRequireDefault","_classnames","_FieldBlock","_hooks","_utils","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","NumberComponent","props","_props$width","sharedContext","useContext","SharedContext","tr","translation","Forms","currency","percent","mask","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","rightAligned","errorMessages","useMemo","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","useCallback","external","fromInput","_ref","numberValue","emptyValue","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","preparedProps","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","labelDescription","labelSecondary","disabled","info","warning","error","help","handleFocus","handleBlur","handleChange","useDataValue","createElement","classnames","forId","contentsWidth","pickSpacingProps","InputMasked","align","on_focus","on_blur","on_change","status","stretch","HelpButton","title","contents","_supportsSpacingProps","_default","exports"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { JSONSchema7 } from 'json-schema'\nimport { InputMasked, HelpButton } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    rightAligned?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    percent,\n    mask,\n    thousandSeparator,\n    decimalSymbol,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    rightAligned,\n  } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minimum: tr.numberFieldErrorMinimum,\n      maximum: tr.numberFieldErrorMaximum,\n      exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n      exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n      multipleOf: tr.numberFieldErrorMultipleOf,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema7>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return emptyValue\n      }\n      return numberValue\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    if (currency) {\n      return {\n        as_currency: currency,\n      }\n    }\n    if (percent) {\n      return {\n        as_percent: percent,\n      }\n    }\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        decimalLimit,\n        decimalSymbol,\n        includeThousandsSeparator: thousandSeparator !== undefined,\n        thousandsSeparatorSymbol:\n          thousandSeparator === true ? ' ' : thousandSeparator,\n        prefix,\n        suffix,\n      },\n    }\n  }, [\n    currency,\n    percent,\n    mask,\n    decimalLimit,\n    decimalSymbol,\n    thousandSeparator,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    labelSecondary,\n    value,\n    disabled,\n    info,\n    warning,\n    error,\n    help,\n    emptyValue,\n    width,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-number', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      labelSecondary={labelSecondary}\n      info={info}\n      warning={warning}\n      error={error}\n      disabled={disabled}\n      width={width === 'stretch' ? width : undefined}\n      contentsWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      <InputMasked\n        id={id}\n        name={name}\n        autoComplete={autoComplete}\n        className={classnames(\n          'dnb-forms-field-number__input',\n          inputClassName\n        )}\n        placeholder={placeholder}\n        value={value}\n        {...maskProps}\n        align={rightAligned && 'right'}\n        on_focus={handleFocus}\n        on_blur={handleBlur}\n        on_change={handleChange}\n        disabled={disabled}\n        status={error ? 'error' : undefined}\n        stretch={width !== undefined}\n        suffix={\n          help ? (\n            <HelpButton title={help.title}>{help.contents}</HelpButton>\n          ) : undefined\n        }\n      />\n    </FieldBlock>\n  )\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}
+{"version":3,"file":"Number.js","names":["_react","_interopRequireWildcard","require","_components","_Context","_interopRequireDefault","_classnames","_FieldBlock","_hooks","_utils","_SliderHelpers","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","_extends","assign","bind","target","i","arguments","length","source","apply","ownKeys","object","enumerableOnly","keys","getOwnPropertySymbols","symbols","filter","sym","enumerable","push","_objectSpread","forEach","_defineProperty","getOwnPropertyDescriptors","defineProperties","value","_toPropertyKey","configurable","writable","arg","_toPrimitive","String","input","hint","prim","Symbol","toPrimitive","undefined","res","TypeError","Number","NumberComponent","props","_props$width","_sharedContext$transl","_sharedContext$transl2","sharedContext","useContext","SharedContext","tr","translation","Forms","currency","percent","mask","step","thousandSeparator","decimalSymbol","decimalLimit","prefix","suffix","showStepControls","errorMessages","useMemo","required","inputErrorRequired","minimum","numberFieldErrorMinimum","maximum","numberFieldErrorMaximum","exclusiveMinimum","numberFieldErrorExclusiveMinimum","exclusiveMaximum","numberFieldErrorExclusiveMaximum","multipleOf","numberFieldErrorMultipleOf","schema","_props$schema","type","toInput","useCallback","external","fromInput","_ref","numberValue","emptyValue","transformValue","currentValue","MAX_SAFE_INTEGER","MIN_SAFE_INTEGER","maskProps","as_currency","as_percent","as_number","number_mask","includeThousandsSeparator","thousandsSeparatorSymbol","preparedProps","width","id","name","className","autoComplete","inputClassName","layout","placeholder","label","disabled","info","warning","error","help","size","align","handleFocus","handleBlur","handleChange","useDataValue","onKeyDownHandler","_ref2","event","clamp","persist","preventDefault","fieldBlockProps","classnames","contentClassName","forId","contentsWidth","pickSpacingProps","increaseProps","variant","icon","convertInputSizeToButtonSize","tabIndex","onClick","title","Slider","addTitle","replace","decreaseProps","subtractTitle","ariaParams","role","inputProps","onKeyDown","onFocus","onBlur","onChange","status","stretch","createElement","HelpButton","contents","asFieldset","Button","InputMasked","inputSize","buttonSize","indexOf","_supportsSpacingProps","_default","exports"],"sources":["../../../../../../src/extensions/forms/Field/Number/Number.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport { InputMasked, HelpButton, Button } from '../../../../components'\nimport { InputMaskedProps } from '../../../../components/InputMasked'\nimport type { InputAlign, InputSize } from '../../../../components/Input'\nimport SharedContext from '../../../../shared/Context'\nimport classnames from 'classnames'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps, FieldHelpProps, JSONSchema } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { ButtonProps, ButtonSize } from '../../../../components/Button'\nimport { clamp } from '../../../../components/slider/SliderHelpers'\n\ninterface ErrorMessages {\n  required?: string\n  schema?: string\n  minimum?: string\n  maximum?: string\n  exclusiveMinimum?: string\n  exclusiveMaximum?: string\n  multipleOf?: string\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<number, undefined, ErrorMessages> & {\n    inputClassName?: string\n    currency?: InputMaskedProps['as_currency']\n    percent?: InputMaskedProps['as_percent']\n    mask?: InputMaskedProps['mask']\n    step?: number\n    // Formatting\n    thousandSeparator?: string | true\n    decimalSymbol?: string\n    decimalLimit?: number\n    prefix?: string\n    suffix?: string\n    // Validation\n    minimum?: number // aka greater than or equal to\n    maximum?: number // aka less than or equal to\n    exclusiveMinimum?: number // aka greater than\n    exclusiveMaximum?: number // aka less than\n    multipleOf?: number\n    // Styling\n    size?: InputSize\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n    align?: InputAlign\n    showStepControls?: boolean\n  }\n\nfunction NumberComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const {\n    currency,\n    percent,\n    mask,\n    step = 1,\n    thousandSeparator,\n    decimalSymbol,\n    decimalLimit = 12,\n    prefix,\n    suffix,\n    showStepControls,\n  } = props\n\n  const errorMessages = useMemo(\n    () => ({\n      required: tr.inputErrorRequired,\n      minimum: tr.numberFieldErrorMinimum,\n      maximum: tr.numberFieldErrorMaximum,\n      exclusiveMinimum: tr.numberFieldErrorExclusiveMinimum,\n      exclusiveMaximum: tr.numberFieldErrorExclusiveMaximum,\n      multipleOf: tr.numberFieldErrorMultipleOf,\n      ...props.errorMessages,\n    }),\n    [tr, props.errorMessages]\n  )\n  const schema = useMemo<JSONSchema>(\n    () =>\n      props.schema ?? {\n        type: 'number',\n        minimum: props.minimum,\n        maximum: props.maximum,\n        exclusiveMinimum: props.exclusiveMinimum,\n        exclusiveMaximum: props.exclusiveMaximum,\n        multipleOf: props.multipleOf,\n      },\n    [\n      props.schema,\n      props.minimum,\n      props.maximum,\n      props.exclusiveMinimum,\n      props.exclusiveMaximum,\n      props.multipleOf,\n    ]\n  )\n\n  const toInput = useCallback((external: number | undefined) => {\n    if (external === undefined) {\n      return ''\n    }\n    return external\n  }, [])\n  const fromInput = useCallback(\n    ({ value, numberValue }: { value: string; numberValue: number }) => {\n      if (value === '') {\n        return props.emptyValue\n      }\n      return numberValue\n    },\n    [props.emptyValue]\n  )\n  const transformValue = useCallback(\n    (value: number, currentValue: number) => {\n      if (\n        value > Number.MAX_SAFE_INTEGER ||\n        value < Number.MIN_SAFE_INTEGER\n      ) {\n        return currentValue\n      }\n\n      return value\n    },\n    []\n  )\n\n  const maskProps: Partial<InputMaskedProps> = useMemo(() => {\n    if (currency) {\n      return {\n        as_currency: currency,\n      }\n    }\n    if (percent) {\n      return {\n        as_percent: percent,\n      }\n    }\n    // Custom mask based on props\n    return {\n      as_number: true,\n      mask,\n      number_mask: {\n        decimalLimit,\n        decimalSymbol,\n        includeThousandsSeparator: thousandSeparator !== undefined,\n        thousandsSeparatorSymbol:\n          thousandSeparator === true ? ' ' : thousandSeparator,\n        prefix,\n        suffix,\n      },\n    }\n  }, [\n    currency,\n    percent,\n    mask,\n    decimalLimit,\n    decimalSymbol,\n    thousandSeparator,\n    prefix,\n    suffix,\n  ])\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    toInput,\n    fromInput,\n    transformValue,\n    width: props.width ?? 'medium',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    value,\n    minimum = Number.MIN_SAFE_INTEGER,\n    maximum = Number.MAX_SAFE_INTEGER,\n    disabled,\n    info,\n    warning,\n    error,\n    help,\n    size,\n    width,\n    align,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const onKeyDownHandler = useCallback(\n    ({ key, event }) => {\n      if (!showStepControls) {\n        return\n      }\n\n      let numberValue = null\n\n      switch (key) {\n        case 'ArrowUp':\n          numberValue = clamp((value as number) + step, minimum, maximum)\n          break\n        case 'ArrowDown':\n          numberValue = clamp((value as number) - step, minimum, maximum)\n          break\n      }\n\n      if (numberValue !== null) {\n        event.persist()\n        event.preventDefault()\n        handleChange({ numberValue })\n      }\n    },\n    [handleChange, maximum, minimum, showStepControls, step, value]\n  )\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-number', className),\n    contentClassName: classnames(\n      'dnb-forms-field-number__contents',\n      showStepControls && 'dnb-forms-field-number__contents--has-controls',\n      disabled && 'dnb-forms-field-number__contents--is-disabled',\n      error && 'dnb-forms-field-number__contents--has-error'\n    ),\n    forId: id,\n    layout,\n    label,\n    info,\n    warning,\n    error,\n    disabled,\n    width: width === 'stretch' ? width : undefined,\n    contentsWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  const increaseProps: ButtonProps = showStepControls && {\n    'aria-hidden': true,\n    className: 'dnb-button--control-after',\n    variant: 'secondary',\n    icon: 'add',\n    size: convertInputSizeToButtonSize(size),\n    tabIndex: -1,\n    disabled: disabled || value >= maximum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) + step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.addTitle?.replace(\n      '%s',\n      String(value + step)\n    ),\n  }\n\n  const decreaseProps: ButtonProps = showStepControls && {\n    ...increaseProps,\n    className: 'dnb-button--control-before',\n    icon: 'subtract',\n    disabled: disabled || value <= minimum,\n    onClick: () => {\n      handleChange({\n        numberValue: clamp((value as number) - step, minimum, maximum),\n      })\n    },\n    title: sharedContext?.translation.Slider.subtractTitle?.replace(\n      '%s',\n      String(value - step)\n    ),\n  }\n\n  const ariaParams = showStepControls && {\n    role: 'spinbutton',\n    'aria-valuemin': String(minimum),\n    'aria-valuemax': String(maximum),\n    'aria-valuenow': String(value), // without it, VO will read an invlaid value\n    'aria-valuetext': String(value), // without it, VO will read %\n  }\n\n  const inputProps = {\n    id,\n    name,\n    autoComplete,\n    className: classnames(\n      'dnb-forms-field-number__input',\n      `dnb-input--${size}`,\n      inputClassName\n    ),\n    step,\n    placeholder,\n    value,\n    align: showStepControls ? 'center' : align,\n    ...maskProps,\n    onKeyDown: onKeyDownHandler,\n    onFocus: handleFocus,\n    onBlur: handleBlur,\n    onChange: handleChange,\n    disabled,\n    status: error ? 'error' : undefined,\n    stretch: width !== undefined,\n    suffix:\n      help && !showStepControls ? (\n        <HelpButton title={help.title}>{help.contents}</HelpButton>\n      ) : undefined,\n    ...ariaParams,\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps} asFieldset={false}>\n      {showStepControls && <Button {...decreaseProps} />}\n      <InputMasked {...inputProps} />\n      {showStepControls && <Button {...increaseProps} />}\n      {help && showStepControls && (\n        <HelpButton title={help.title}>{help.contents}</HelpButton>\n      )}\n    </FieldBlock>\n  )\n}\n\nconst convertInputSizeToButtonSize = (\n  inputSize: InputSize\n): ButtonSize => {\n  const buttonSize =\n    ['small', 'medium', 'large'].indexOf(inputSize as string) > -1\n      ? inputSize\n      : 'medium'\n  return buttonSize as ButtonSize\n}\n\nNumberComponent._supportsSpacingProps = true\nexport default NumberComponent\n"],"mappings":"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"}

package/cjs/extensions/forms/Field/Number/style/dnb-number.css

@@ -0,0 +1,192 @@
+/*
+ * Utilities
+ */
+:root {
+  --forms-field-width--small: 5rem;
+  --forms-field-width--medium: 11rem;
+  --forms-field-width--large: 21rem;
+}
+
+.dnb-forms-field-number {
+  --number-control-button-border-color: black;
+  --number-control-button-border-color--hover: darkgrey;
+  --number-control-button-border-color--focus: darkgrey;
+  --number-control-button-border-width--focus: 0.125rem;
+  --number-control-button-background-color--hover: grey;
+  --number-control-button-color--hover: black;
+  --number-control-button-background-color--active: black;
+  --number-control-button-color--active: lightgrey;
+  --number-control-button--error: red;
+  --number-control-button--error-contrast: white;
+  --number-control-button-width--small: 2rem;
+  --number-control-button-width--medium: 2.5rem;
+  --number-control-button-width--large: 3rem;
+  --forms-field-block--number-control-buttons-width--small: calc(
+    var(--number-control-button-width--small) * 2
+  );
+  --forms-field-block--number-control-buttons-width--medium: calc(
+    var(--number-control-button-width--medium) * 2
+  );
+  --forms-field-block--number-control-buttons-width--large: calc(
+    var(--number-control-button-width--large) * 2
+  );
+}
+.dnb-forms-field-number__contents {
+  display: flex;
+  align-items: center;
+}
+.dnb-forms-field-number__contents--has-controls {
+  border-radius: 0.25rem;
+  --border-color: var(--number-control-button-border-color);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]) {
+  --border-color: var(--number-control-button-border-color);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within {
+  --border-color: var(--number-control-button-border-color--focus);
+  --border-width: var(--number-control-button-border-width--focus);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-input__shell {
+  border-radius: 0;
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]) {
+  box-shadow: none;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell {
+  outline: initial;
+  box-shadow: none;
+}
+html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell {
+  box-shadow: none;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]) {
+  background-color: var(--number-control-button-background-color--hover);
+  color: var(--number-control-button-color--hover);
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),
+.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]) {
+  background-color: var(--number-control-button-background-color--active);
+  color: var(--number-control-button-color--active);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error {
+  --border-color: var(--number-control-button--error);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]) {
+  --border-color: var(--number-control-button--error);
+  --border-width: 0.125rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell {
+  box-shadow: none;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after {
+  color: var(--number-control-button--error);
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]) {
+  background-color: var(--number-control-button--error-contrast);
+  color: var(--number-control-button--error);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled], html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled] {
+  cursor: not-allowed;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]) {
+  background-color: var(--number-control-button--error);
+  color: var(--number-control-button--error-contrast);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled],
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled] {
+  color: var(--number-control-button--error-contrast);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled {
+  --border-color: var(--color-black-55);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled] {
+  cursor: not-allowed;
+}
+html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]) {
+  --border-color: var(--color-black-55);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell {
+  box-shadow: none;
+}
+.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled {
+  --border-color: var(--color-black-55);
+  --border-width: 0.0625rem;
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled],
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled] {
+  background-color: var(--color-black-3);
+  color: var(--color-black-20);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small {
+  width: calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small));
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after {
+  width: var(--number-control-button-width--small);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium {
+  width: calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium));
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after {
+  width: var(--number-control-button-width--medium);
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large {
+  width: calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large));
+}
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before,
+.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after {
+  width: var(--number-control-button-width--large);
+}

package/cjs/extensions/forms/Field/Number/style/dnb-number.min.css

@@ -0,0 +1 @@
+:root{--forms-field-width--small:5rem;--forms-field-width--medium:11rem;--forms-field-width--large:21rem}.dnb-forms-field-number{--number-control-button-border-color:#000;--number-control-button-border-color--hover:#a9a9a9;--number-control-button-border-color--focus:#a9a9a9;--number-control-button-border-width--focus:0.125rem;--number-control-button-background-color--hover:grey;--number-control-button-color--hover:#000;--number-control-button-background-color--active:#000;--number-control-button-color--active:#d3d3d3;--number-control-button--error:red;--number-control-button--error-contrast:#fff;--number-control-button-width--small:2rem;--number-control-button-width--medium:2.5rem;--number-control-button-width--large:3rem;--forms-field-block--number-control-buttons-width--small:calc(var(--number-control-button-width--small)*2);--forms-field-block--number-control-buttons-width--medium:calc(var(--number-control-button-width--medium)*2);--forms-field-block--number-control-buttons-width--large:calc(var(--number-control-button-width--large)*2)}.dnb-forms-field-number__contents{align-items:center;display:flex}.dnb-forms-field-number__contents--has-controls{--border-color:var(--number-control-button-border-color);--border-width:0.0625rem;border-color:transparent;border-radius:.25rem;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls:hover:not([disabled]){--border-color:var(--number-control-button-border-color);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html[data-whatinput=keyboard] .dnb-forms-field-number__contents--has-controls:focus-within{--border-color:var(--number-control-button-border-color--focus);--border-width:var(--number-control-button-border-width--focus);border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls .dnb-input__shell{border-radius:0;box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-input__shell:hover:not([disabled]){box-shadow:none}.dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none;outline:initial}html[data-whatinput=""] .dnb-forms-field-number__contents--has-controls .dnb-input:not([data-input-state=disabled]):not(:active)[data-input-state=focus] .dnb-input__shell{box-shadow:none}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button-background-color--hover);color:var(--number-control-button-color--hover)}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button-background-color--active);color:var(--number-control-button-color--active)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error{--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error:hover:not([disabled]){--border-color:var(--number-control-button--error);--border-width:0.125rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-input__status--error:not([data-input-state=disabled]):not(:hover):not(:active) .dnb-input__shell{box-shadow:none}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before{color:var(--number-control-button--error)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:hover:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:hover:not([disabled]){background-color:var(--number-control-button--error-contrast);color:var(--number-control-button--error)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active[disabled],html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active[disabled]{cursor:not-allowed}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after:active:not([disabled]),html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before:active:not([disabled]){background-color:var(--number-control-button--error);color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--has-error .dnb-button--control-before[disabled]{color:var(--number-control-button--error-contrast)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover[disabled]{cursor:not-allowed}html:not([data-whatintent=touch]) .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled:hover:not([disabled]){--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-input[data-input-state=disabled] .dnb-input__shell{box-shadow:none}.dnb-input[data-input-state=disabled] .dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled{--border-color:var(--color-black-55);--border-width:0.0625rem;border-color:transparent;box-shadow:0 0 0 var(--border-width) var(--border-color)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-after[disabled],.dnb-forms-field-number__contents--has-controls.dnb-forms-field-number__contents--is-disabled .dnb-button--control-before[disabled]{background-color:var(--color-black-3);color:var(--color-black-20)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small{width:calc(var(--forms-field-width--small) + var(--forms-field-block--number-control-buttons-width--small))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-small .dnb-button--control-before{width:var(--number-control-button-width--small)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium{width:calc(var(--forms-field-width--medium) + var(--forms-field-block--number-control-buttons-width--medium))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-medium .dnb-button--control-before{width:var(--number-control-button-width--medium)}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large{width:calc(var(--forms-field-width--large) + var(--forms-field-block--number-control-buttons-width--large))}.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-after,.dnb-forms-field-number__contents--has-controls.dnb-forms-field-block__contents--width-large .dnb-button--control-before{width:var(--number-control-button-width--large)}