@norges-domstoler/dds-components 13.0.3 → 13.1.1

package/dist/cjs/components/InlineEdit/InlineEdit.styles.d.ts

@@ -6,9 +6,15 @@ type StyledInlineInputProps = {
 };
 export declare const StyledInlineInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInlineInputProps, never>;
 export declare const StyledInlineTextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInlineInputProps, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
 export {};

package/dist/cjs/components/TextArea/TextArea.d.ts

@@ -2,6 +2,9 @@ import { TextareaHTMLAttributes } from 'react';
 import { CommonInputProps } from '../../helpers/Input';
 export declare const StyledTextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers/Input").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers/Input").InputProps, "componentSize">, never>;
 export type TextAreaProps = CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement>;
 export declare const TextArea: import("react").ForwardRefExoticComponent<CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/cjs/components/TextInput/TextInput.d.ts

@@ -5,4 +5,6 @@ export declare const TextInput: React.ForwardRefExoticComponent<import("../../he
 } & React.InputHTMLAttributes<HTMLInputElement> & {
     withCharacterCounter?: boolean | undefined;
     icon?: import("../../icons/utils").SvgIcon | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/cjs/components/TextInput/TextInput.stories.d.ts

@@ -6,6 +6,8 @@ declare const _default: {
     } & import("react").InputHTMLAttributes<HTMLInputElement> & {
         withCharacterCounter?: boolean | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
+        prefix?: string | undefined;
+        suffix?: string | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {
@@ -43,6 +45,16 @@ declare const _default: {
                 type: string;
             };
         };
+        prefix: {
+            control: {
+                type: string;
+            };
+        };
+        suffix: {
+            control: {
+                type: string;
+            };
+        };
     };
     parameters: {
         controls: {
@@ -56,3 +68,4 @@ export declare const TextInputOverviewSizes: () => JSX.Element;
 export declare const Default: (args: TextInputProps) => JSX.Element;
 export declare const WithLabel: (args: TextInputProps) => JSX.Element;
 export declare const WithCharacterCount: (args: TextInputProps) => JSX.Element;
+export declare const TextInputAffixes: (args: TextInputProps) => JSX.Element;

package/dist/cjs/components/TextInput/TextInput.styles.d.ts

@@ -10,5 +10,8 @@ type StyledInputProps = {
 };
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInputProps, never>;
 export {};

package/dist/cjs/components/TextInput/TextInput.tokens.d.ts

@@ -29,4 +29,9 @@ export declare const textInputTokens: {
             };
         };
     };
+    affix: {
+        border: {
+            color: string;
+        };
+    };
 };

package/dist/cjs/components/TextInput/TextInput.types.d.ts

@@ -5,4 +5,17 @@ export type TextInputProps = InputProps & {
     withCharacterCounter?: boolean;
     /** Ikonet som vises i komponenten. */
     icon?: SvgIcon;
+    /**
+     * Prefiks som vises før inputfeltet.
+     * OBS! Prefiks leses ikke av skjermleser og skal derfor ikke brukes som en erstatter
+     * for en beskrivende label. */
+    prefix?: string;
+    /**
+     * Suffiks som vises etter inputfeltet.
+     * OBS! Suffiks leses ikke av skjermleser og skal derfor ikke brukes som en erstatter
+     * for en beskrivende label. */
+    suffix?: string;
+};
+export type TextAffixProps = {
+    readOnly?: boolean;
 };

package/dist/cjs/helpers/Input/Input.styles.d.ts

@@ -2,6 +2,9 @@ import { Property } from 'csstype';
 export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
 export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("./Input.types").InputProps, "componentSize">, never>;
 type OuterInputContainerProps = {
     width?: Property.Width;
@@ -9,4 +12,5 @@ type OuterInputContainerProps = {
 export declare const OuterInputContainer: import("styled-components").StyledComponent<"div", any, OuterInputContainerProps, never>;
 /**Brukes som container til input og ikon for posisjonering. */
 export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputAffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/cjs/helpers/Input/Input.tokens.d.ts

@@ -28,6 +28,9 @@ export declare const inputTokens: {
                 padding: string;
             };
         };
+        affix: {
+            gap: number;
+        };
     };
     container: {
         gap: string;

package/dist/cjs/helpers/Input/Input.types.d.ts

@@ -19,7 +19,10 @@ export type InputProps = CommonInputProps & {
 export type StyledCommonInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
     hasErrorMessage: boolean;
 };
-export type StyledInputProps = StyledCommonInputProps & Pick<InputProps, 'componentSize'>;
+export type StyledInputProps = StyledCommonInputProps & {
+    prefixLength?: number;
+    suffixLength?: number;
+} & Pick<InputProps, 'componentSize'>;
 export type InputTypographyTypes = {
     [k in InputSize]: StaticTypographyType;
 };

package/dist/cjs/index.js

@@ -813,6 +813,9 @@ var input$5 = {
     tiny: {
       padding: "".concat(spacing$B.SizesDdsSpacingLocalX025, " ").concat(spacing$B.SizesDdsSpacingLocalX05, " ").concat(spacing$B.SizesDdsSpacingLocalX025, " ").concat(spacing$B.SizesDdsSpacingLocalX05)
     }
+  },
+  affix: {
+    gap: spacing$B.SizesDdsSpacingLocalX1NumberPx
   }
 };
 var container$g = {
@@ -832,18 +835,26 @@ var Input$2 = styled__default.default.input.withConfig({
 var StatefulInput = styled__default.default(Input$2).withConfig({
   displayName: "Inputstyles__StatefulInput",
   componentId: "sc-1oz9x8w-1"
-})(["-webkit-appearance:textfield;", " ", " &:enabled:read-only{border:none;outline:none;cursor:default;background-color:", ";padding-left:0;}&:disabled{cursor:not-allowed;color:", ";background-color:", ";}"], function (_ref) {
-  var componentSize = _ref.componentSize;
-  return componentSize && styled.css(["padding:", ";", ""], input$4.sizes[componentSize].padding, getFontStyling(inputTypographyTypes[componentSize]));
+})(["-webkit-appearance:textfield;padding-left:", ";padding-right:", ";", " ", " &:enabled:read-only{border:none;outline:none;cursor:default;background-color:", ";padding-left:0;}&:disabled{cursor:not-allowed;color:", ";background-color:", ";}"], function (_ref) {
+  var prefixLength = _ref.prefixLength,
+    readOnly = _ref.readOnly;
+  return prefixLength && (readOnly ? "".concat(prefixLength, "px !important") : "calc(".concat(input$4.affix.gap, "px + ").concat(prefixLength, "px) !important"));
 }, function (_ref2) {
-  var hasErrorMessage = _ref2.hasErrorMessage;
+  var suffixLength = _ref2.suffixLength,
+    readOnly = _ref2.readOnly;
+  return suffixLength && (readOnly ? "".concat(suffixLength, "px !important") : "calc(".concat(input$4.affix.gap, "px + ").concat(suffixLength, "px) !important"));
+}, function (_ref3) {
+  var componentSize = _ref3.componentSize;
+  return componentSize && styled.css(["padding:", ";", ""], input$4.sizes[componentSize].padding, getFontStyling(inputTypographyTypes[componentSize]));
+}, function (_ref4) {
+  var hasErrorMessage = _ref4.hasErrorMessage;
   return hasErrorMessage && styled.css(["", " &:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], dangerInputfield, hoverDangerInputfield, focusDangerInputfield);
 }, input$4.readOnly.backgroundColor, input$4.disabled.color, input$4.disabled.backgroundColor);
 var OuterInputContainer = styled__default.default.div.withConfig({
   displayName: "Inputstyles__OuterInputContainer",
   componentId: "sc-1oz9x8w-2"
-})(["position:relative;gap:", ";width:", ";"], container$f.gap, function (_ref3) {
-  var width = _ref3.width;
+})(["position:relative;gap:", ";width:", ";"], container$f.gap, function (_ref5) {
+  var width = _ref5.width;
   return width;
 });
 /**Brukes som container til input og ikon for posisjonering. */
@@ -851,6 +862,10 @@ var InputContainer$1 = styled__default.default.div.withConfig({
   displayName: "Inputstyles__InputContainer",
   componentId: "sc-1oz9x8w-3"
 })(["position:relative;"]);
+var InputAffixContainer = styled__default.default.div.withConfig({
+  displayName: "Inputstyles__InputAffixContainer",
+  componentId: "sc-1oz9x8w-4"
+})(["position:relative;display:flex;align-items:center;"]);
 
 var getSize = function getSize(iconSize) {
   switch (iconSize) {
@@ -4254,6 +4269,11 @@ var input$3 = {
     }
   }
 };
+var affix = {
+  border: {
+    color: colors$o.DdsColorNeutralsGray5
+  }
+};
 var icon$9 = {
   color: colors$o.DdsColorNeutralsGray9,
   sizes: {
@@ -4273,7 +4293,8 @@ var icon$9 = {
 };
 var textInputTokens = {
   input: input$3,
-  icon: icon$9
+  icon: icon$9,
+  affix: affix
 };
 
 var iconSizes$4 = ddsDesignTokens.ddsBaseTokens.iconSizes;
@@ -4309,6 +4330,24 @@ var getWidth$1 = function getWidth(size, width) {
   }
   return defaultWidth$5;
 };
+var Affix = styled__default.default.span.withConfig({
+  displayName: "TextInput__Affix",
+  componentId: "sc-k8umq3-0"
+})(["position:absolute;height:100%;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;z-index:1;"]);
+var Prefix = styled__default.default(Affix).withConfig({
+  displayName: "TextInput__Prefix",
+  componentId: "sc-k8umq3-1"
+})(["left:0;margin-left:8px;padding-right:8px;border-right:1px solid ", ";", ";"], textInputTokens.affix.border.color, function (_ref) {
+  var readOnly = _ref.readOnly;
+  return readOnly && styled.css(["margin-left:0;padding-right:0.5ch;border-right:none;"]);
+});
+var Suffix = styled__default.default(Affix).withConfig({
+  displayName: "TextInput__Suffix",
+  componentId: "sc-k8umq3-2"
+})(["right:0;margin-right:8px;padding-left:8px;border-left:1px solid ", ";", ";"], textInputTokens.affix.border.color, function (_ref2) {
+  var readOnly = _ref2.readOnly;
+  return readOnly && styled.css(["margin-right:0;padding-left:0.5ch;border-left:none;"]);
+});
 var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var label = _a.label,
     disabled = _a.disabled,
@@ -4333,11 +4372,31 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     ariaRequired = _a['aria-required'],
     ariaDescribedby = _a['aria-describedby'],
     icon = _a.icon,
-    rest = tslib.__rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon"]);
+    prefix = _a.prefix,
+    suffix = _a.suffix,
+    rest = tslib.__rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon", "prefix", "suffix"]);
   var _useState = React.useState(getDefaultText(value, defaultValue)),
     _useState2 = _slicedToArray(_useState, 2),
     text = _useState2[0],
     setText = _useState2[1];
+  var prefixRef = React.useRef(null);
+  var suffixRef = React.useRef(null);
+  var _useState3 = React.useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prefixLength = _useState4[0],
+    setPrefixLength = _useState4[1];
+  var _useState5 = React.useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    suffixLength = _useState6[0],
+    setSuffixLength = _useState6[1];
+  React.useLayoutEffect(function () {
+    if (prefixRef.current) {
+      setPrefixLength(prefixRef.current.offsetWidth);
+    }
+    if (suffixRef.current) {
+      setSuffixLength(suffixRef.current.offsetWidth);
+    }
+  }, [prefix, suffix, readOnly]);
   var onChangeHandler = function onChangeHandler(event) {
     setText(event.target.value);
     if (onChange) {
@@ -4351,6 +4410,7 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var hasLabel = !!label;
   var hasMessage = hasErrorMessage || hasTip || !!maxLength;
   var hasIcon = !!icon;
+  var hasAffix = !!(prefix || suffix);
   var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter');
   var tipId = derivativeIdGenerator(uniqueId, 'tip');
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
@@ -4375,13 +4435,9 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
     width: getWidth$1(componentSize, width)
   };
   var showRequiredStyling = !!(required || ariaRequired);
-  return jsxRuntime.jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
-    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
-      htmlFor: uniqueId,
-      showRequiredStyling: showRequiredStyling
-    }, {
-      children: label
-    })), hasIcon ? jsxRuntime.jsxs(InputContainer$1, {
+  var extendedInput = null;
+  if (hasIcon) {
+    extendedInput = jsxRuntime.jsxs(InputContainer$1, {
       children: [jsxRuntime.jsx(StyledIcon$3, {
         icon: icon,
         iconSize: getFormInputIconSize(componentSize),
@@ -4393,7 +4449,38 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (_a, ref) {
         componentSize: componentSize,
         hasIcon: hasIcon
       }, generalInputProps))]
-    }) : jsxRuntime.jsx(StatefulInput, Object.assign({
+    });
+  } else if (hasAffix) {
+    extendedInput = jsxRuntime.jsxs(InputAffixContainer, {
+      children: [prefix && jsxRuntime.jsx(Prefix, Object.assign({
+        readOnly: readOnly,
+        ref: prefixRef,
+        "aria-hidden": true
+      }, {
+        children: prefix
+      })), jsxRuntime.jsx(StatefulInput, Object.assign({
+        ref: ref,
+        onChange: onChangeHandler,
+        type: type,
+        componentSize: componentSize,
+        prefixLength: prefixLength,
+        suffixLength: suffixLength
+      }, generalInputProps)), suffix && jsxRuntime.jsx(Suffix, Object.assign({
+        readOnly: readOnly,
+        ref: suffixRef,
+        "aria-hidden": true
+      }, {
+        children: suffix
+      }))]
+    });
+  }
+  return jsxRuntime.jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
+    children: [hasLabel && jsxRuntime.jsx(Label$2, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
+    }, {
+      children: label
+    })), extendedInput ? extendedInput : jsxRuntime.jsx(StatefulInput, Object.assign({
       ref: ref,
       onChange: onChangeHandler,
       type: type,

package/dist/components/InlineEdit/InlineEdit.styles.d.ts

@@ -6,9 +6,15 @@ type StyledInlineInputProps = {
 };
 export declare const StyledInlineInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInlineInputProps, never>;
 export declare const StyledInlineTextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInlineInputProps, never>;
 export declare const IconWrapper: import("styled-components").StyledComponent<"span", any, {}, never>;
 export {};

package/dist/components/TextArea/TextArea.d.ts

@@ -2,6 +2,9 @@ import { TextareaHTMLAttributes } from 'react';
 import { CommonInputProps } from '../../helpers/Input';
 export declare const StyledTextArea: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers/Input").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers/Input").InputProps, "componentSize">, never>;
 export type TextAreaProps = CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement>;
 export declare const TextArea: import("react").ForwardRefExoticComponent<CommonInputProps & TextareaHTMLAttributes<HTMLTextAreaElement> & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/TextInput/TextInput.d.ts

@@ -5,4 +5,6 @@ export declare const TextInput: React.ForwardRefExoticComponent<import("../../he
 } & React.InputHTMLAttributes<HTMLInputElement> & {
     withCharacterCounter?: boolean | undefined;
     icon?: import("../../icons/utils").SvgIcon | undefined;
+    prefix?: string | undefined;
+    suffix?: string | undefined;
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/TextInput/TextInput.js

@@ -1,12 +1,12 @@
 import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { __rest } from 'tslib';
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { forwardRef, useState, useId } from 'react';
+import { forwardRef, useState, useRef, useLayoutEffect, useId } from 'react';
 import CharCounter from './CharCounter.js';
 import '../../helpers/Backdrop/Backdrop.js';
 import '../../helpers/Chevron/AnimatedChevronUpDown.styles.js';
 import '../../helpers/HiddenInput/HiddenInput.js';
-import { OuterInputContainer, InputContainer, StatefulInput } from '../../helpers/Input/Input.styles.js';
+import { InputContainer, InputAffixContainer, StatefulInput, OuterInputContainer } from '../../helpers/Input/Input.styles.js';
 import '../../helpers/Input/Input.tokens.js';
 import { getDefaultText, getFormInputIconSize, renderInputMessage } from '../../helpers/Input/Input.utils.js';
 import '../../helpers/Paper/Paper.js';
@@ -19,6 +19,8 @@ import { StyledIcon, StyledInput, MessageContainer } from './TextInput.styles.js
 import '../Typography/Typography/Typography.js';
 import { Label } from '../Typography/Label/Label.js';
 import '../Typography/Link/Link.js';
+import styled, { css } from 'styled-components';
+import { textInputTokens } from './TextInput.tokens.js';
 
 var defaultWidth = '320px';
 var defaultTinyWidth = '210px';
@@ -29,6 +31,24 @@ var getWidth = function getWidth(size, width) {
   }
   return defaultWidth;
 };
+var Affix = styled.span.withConfig({
+  displayName: "TextInput__Affix",
+  componentId: "sc-k8umq3-0"
+})(["position:absolute;height:100%;top:50%;transform:translateY(-50%);display:flex;align-items:center;pointer-events:none;z-index:1;"]);
+var Prefix = styled(Affix).withConfig({
+  displayName: "TextInput__Prefix",
+  componentId: "sc-k8umq3-1"
+})(["left:0;margin-left:8px;padding-right:8px;border-right:1px solid ", ";", ";"], textInputTokens.affix.border.color, function (_ref) {
+  var readOnly = _ref.readOnly;
+  return readOnly && css(["margin-left:0;padding-right:0.5ch;border-right:none;"]);
+});
+var Suffix = styled(Affix).withConfig({
+  displayName: "TextInput__Suffix",
+  componentId: "sc-k8umq3-2"
+})(["right:0;margin-right:8px;padding-left:8px;border-left:1px solid ", ";", ";"], textInputTokens.affix.border.color, function (_ref2) {
+  var readOnly = _ref2.readOnly;
+  return readOnly && css(["margin-right:0;padding-left:0.5ch;border-left:none;"]);
+});
 var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var label = _a.label,
     disabled = _a.disabled,
@@ -53,11 +73,31 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     ariaRequired = _a['aria-required'],
     ariaDescribedby = _a['aria-describedby'],
     icon = _a.icon,
-    rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon"]);
+    prefix = _a.prefix,
+    suffix = _a.suffix,
+    rest = __rest(_a, ["label", "disabled", "readOnly", "errorMessage", "tip", "required", "maxLength", "onChange", "id", "width", "componentSize", "type", "withCharacterCounter", "className", "style", "value", "defaultValue", 'aria-required', 'aria-describedby', "icon", "prefix", "suffix"]);
   var _useState = useState(getDefaultText(value, defaultValue)),
     _useState2 = _slicedToArray(_useState, 2),
     text = _useState2[0],
     setText = _useState2[1];
+  var prefixRef = useRef(null);
+  var suffixRef = useRef(null);
+  var _useState3 = useState(0),
+    _useState4 = _slicedToArray(_useState3, 2),
+    prefixLength = _useState4[0],
+    setPrefixLength = _useState4[1];
+  var _useState5 = useState(0),
+    _useState6 = _slicedToArray(_useState5, 2),
+    suffixLength = _useState6[0],
+    setSuffixLength = _useState6[1];
+  useLayoutEffect(function () {
+    if (prefixRef.current) {
+      setPrefixLength(prefixRef.current.offsetWidth);
+    }
+    if (suffixRef.current) {
+      setSuffixLength(suffixRef.current.offsetWidth);
+    }
+  }, [prefix, suffix, readOnly]);
   var onChangeHandler = function onChangeHandler(event) {
     setText(event.target.value);
     if (onChange) {
@@ -71,6 +111,7 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
   var hasLabel = !!label;
   var hasMessage = hasErrorMessage || hasTip || !!maxLength;
   var hasIcon = !!icon;
+  var hasAffix = !!(prefix || suffix);
   var characterCounterId = derivativeIdGenerator(uniqueId, 'characterCounter');
   var tipId = derivativeIdGenerator(uniqueId, 'tip');
   var errorMessageId = derivativeIdGenerator(uniqueId, 'errorMessage');
@@ -95,13 +136,9 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
     width: getWidth(componentSize, width)
   };
   var showRequiredStyling = !!(required || ariaRequired);
-  return jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
-    children: [hasLabel && jsx(Label, Object.assign({
-      htmlFor: uniqueId,
-      showRequiredStyling: showRequiredStyling
-    }, {
-      children: label
-    })), hasIcon ? jsxs(InputContainer, {
+  var extendedInput = null;
+  if (hasIcon) {
+    extendedInput = jsxs(InputContainer, {
       children: [jsx(StyledIcon, {
         icon: icon,
         iconSize: getFormInputIconSize(componentSize),
@@ -113,7 +150,38 @@ var TextInput = /*#__PURE__*/forwardRef(function (_a, ref) {
         componentSize: componentSize,
         hasIcon: hasIcon
       }, generalInputProps))]
-    }) : jsx(StatefulInput, Object.assign({
+    });
+  } else if (hasAffix) {
+    extendedInput = jsxs(InputAffixContainer, {
+      children: [prefix && jsx(Prefix, Object.assign({
+        readOnly: readOnly,
+        ref: prefixRef,
+        "aria-hidden": true
+      }, {
+        children: prefix
+      })), jsx(StatefulInput, Object.assign({
+        ref: ref,
+        onChange: onChangeHandler,
+        type: type,
+        componentSize: componentSize,
+        prefixLength: prefixLength,
+        suffixLength: suffixLength
+      }, generalInputProps)), suffix && jsx(Suffix, Object.assign({
+        readOnly: readOnly,
+        ref: suffixRef,
+        "aria-hidden": true
+      }, {
+        children: suffix
+      }))]
+    });
+  }
+  return jsxs(OuterInputContainer, Object.assign({}, outerInputContainerProps, {
+    children: [hasLabel && jsx(Label, Object.assign({
+      htmlFor: uniqueId,
+      showRequiredStyling: showRequiredStyling
+    }, {
+      children: label
+    })), extendedInput ? extendedInput : jsx(StatefulInput, Object.assign({
       ref: ref,
       onChange: onChangeHandler,
       type: type,

package/dist/components/TextInput/TextInput.stories.d.ts

@@ -6,6 +6,8 @@ declare const _default: {
     } & import("react").InputHTMLAttributes<HTMLInputElement> & {
         withCharacterCounter?: boolean | undefined;
         icon?: import("../../icons/utils").SvgIcon | undefined;
+        prefix?: string | undefined;
+        suffix?: string | undefined;
     } & import("react").RefAttributes<HTMLInputElement>>;
     argTypes: {
         label: {
@@ -43,6 +45,16 @@ declare const _default: {
                 type: string;
             };
         };
+        prefix: {
+            control: {
+                type: string;
+            };
+        };
+        suffix: {
+            control: {
+                type: string;
+            };
+        };
     };
     parameters: {
         controls: {
@@ -56,3 +68,4 @@ export declare const TextInputOverviewSizes: () => JSX.Element;
 export declare const Default: (args: TextInputProps) => JSX.Element;
 export declare const WithLabel: (args: TextInputProps) => JSX.Element;
 export declare const WithCharacterCount: (args: TextInputProps) => JSX.Element;
+export declare const TextInputAffixes: (args: TextInputProps) => JSX.Element;

package/dist/components/TextInput/TextInput.styles.d.ts

@@ -10,5 +10,8 @@ type StyledInputProps = {
 };
 export declare const StyledInput: import("styled-components").StyledComponent<"input", any, Pick<import("../../helpers").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("../../helpers").InputProps, "componentSize"> & StyledInputProps, never>;
 export {};

package/dist/components/TextInput/TextInput.tokens.d.ts

@@ -29,4 +29,9 @@ export declare const textInputTokens: {
             };
         };
     };
+    affix: {
+        border: {
+            color: string;
+        };
+    };
 };

package/dist/components/TextInput/TextInput.tokens.js

@@ -16,6 +16,11 @@ var input = {
     }
   }
 };
+var affix = {
+  border: {
+    color: colors.DdsColorNeutralsGray5
+  }
+};
 var icon = {
   color: colors.DdsColorNeutralsGray9,
   sizes: {
@@ -35,7 +40,8 @@ var icon = {
 };
 var textInputTokens = {
   input: input,
-  icon: icon
+  icon: icon,
+  affix: affix
 };
 
 export { textInputTokens };

package/dist/components/TextInput/TextInput.types.d.ts

@@ -5,4 +5,17 @@ export type TextInputProps = InputProps & {
     withCharacterCounter?: boolean;
     /** Ikonet som vises i komponenten. */
     icon?: SvgIcon;
+    /**
+     * Prefiks som vises før inputfeltet.
+     * OBS! Prefiks leses ikke av skjermleser og skal derfor ikke brukes som en erstatter
+     * for en beskrivende label. */
+    prefix?: string;
+    /**
+     * Suffiks som vises etter inputfeltet.
+     * OBS! Suffiks leses ikke av skjermleser og skal derfor ikke brukes som en erstatter
+     * for en beskrivende label. */
+    suffix?: string;
+};
+export type TextAffixProps = {
+    readOnly?: boolean;
 };

package/dist/helpers/Input/Input.styles.d.ts

@@ -2,6 +2,9 @@ import { Property } from 'csstype';
 export declare const Input: import("styled-components").StyledComponent<"input", any, {}, never>;
 export declare const StatefulInput: import("styled-components").StyledComponent<"input", any, Pick<import("./Input.types").InputProps, "disabled" | "readOnly"> & {
     hasErrorMessage: boolean;
+} & {
+    prefixLength?: number | undefined;
+    suffixLength?: number | undefined;
 } & Pick<import("./Input.types").InputProps, "componentSize">, never>;
 type OuterInputContainerProps = {
     width?: Property.Width;
@@ -9,4 +12,5 @@ type OuterInputContainerProps = {
 export declare const OuterInputContainer: import("styled-components").StyledComponent<"div", any, OuterInputContainerProps, never>;
 /**Brukes som container til input og ikon for posisjonering. */
 export declare const InputContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const InputAffixContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/helpers/Input/Input.styles.js

@@ -16,18 +16,26 @@ var Input = styled.input.withConfig({
 var StatefulInput = styled(Input).withConfig({
   displayName: "Inputstyles__StatefulInput",
   componentId: "sc-1oz9x8w-1"
-})(["-webkit-appearance:textfield;", " ", " &:enabled:read-only{border:none;outline:none;cursor:default;background-color:", ";padding-left:0;}&:disabled{cursor:not-allowed;color:", ";background-color:", ";}"], function (_ref) {
-  var componentSize = _ref.componentSize;
-  return componentSize && css(["padding:", ";", ""], input.sizes[componentSize].padding, getFontStyling(inputTypographyTypes[componentSize]));
+})(["-webkit-appearance:textfield;padding-left:", ";padding-right:", ";", " ", " &:enabled:read-only{border:none;outline:none;cursor:default;background-color:", ";padding-left:0;}&:disabled{cursor:not-allowed;color:", ";background-color:", ";}"], function (_ref) {
+  var prefixLength = _ref.prefixLength,
+    readOnly = _ref.readOnly;
+  return prefixLength && (readOnly ? "".concat(prefixLength, "px !important") : "calc(".concat(input.affix.gap, "px + ").concat(prefixLength, "px) !important"));
 }, function (_ref2) {
-  var hasErrorMessage = _ref2.hasErrorMessage;
+  var suffixLength = _ref2.suffixLength,
+    readOnly = _ref2.readOnly;
+  return suffixLength && (readOnly ? "".concat(suffixLength, "px !important") : "calc(".concat(input.affix.gap, "px + ").concat(suffixLength, "px) !important"));
+}, function (_ref3) {
+  var componentSize = _ref3.componentSize;
+  return componentSize && css(["padding:", ";", ""], input.sizes[componentSize].padding, getFontStyling(inputTypographyTypes[componentSize]));
+}, function (_ref4) {
+  var hasErrorMessage = _ref4.hasErrorMessage;
   return hasErrorMessage && css(["", " &:hover:enabled:read-write{", "}&:focus:enabled:read-write,&:active:enabled:read-write{", "}"], dangerInputfield, hoverDangerInputfield, focusDangerInputfield);
 }, input.readOnly.backgroundColor, input.disabled.color, input.disabled.backgroundColor);
 var OuterInputContainer = styled.div.withConfig({
   displayName: "Inputstyles__OuterInputContainer",
   componentId: "sc-1oz9x8w-2"
-})(["position:relative;gap:", ";width:", ";"], container.gap, function (_ref3) {
-  var width = _ref3.width;
+})(["position:relative;gap:", ";width:", ";"], container.gap, function (_ref5) {
+  var width = _ref5.width;
   return width;
 });
 /**Brukes som container til input og ikon for posisjonering. */
@@ -35,5 +43,9 @@ var InputContainer = styled.div.withConfig({
   displayName: "Inputstyles__InputContainer",
   componentId: "sc-1oz9x8w-3"
 })(["position:relative;"]);
+var InputAffixContainer = styled.div.withConfig({
+  displayName: "Inputstyles__InputAffixContainer",
+  componentId: "sc-1oz9x8w-4"
+})(["position:relative;display:flex;align-items:center;"]);
 
-export { Input, InputContainer, OuterInputContainer, StatefulInput };
+export { Input, InputAffixContainer, InputContainer, OuterInputContainer, StatefulInput };

package/dist/helpers/Input/Input.tokens.d.ts

@@ -28,6 +28,9 @@ export declare const inputTokens: {
                 padding: string;
             };
         };
+        affix: {
+            gap: number;
+        };
     };
     container: {
         gap: string;

package/dist/helpers/Input/Input.tokens.js

@@ -35,6 +35,9 @@ var input = {
     tiny: {
       padding: "".concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05, " ").concat(spacing.SizesDdsSpacingLocalX025, " ").concat(spacing.SizesDdsSpacingLocalX05)
     }
+  },
+  affix: {
+    gap: spacing.SizesDdsSpacingLocalX1NumberPx
   }
 };
 var container = {

package/dist/helpers/Input/Input.types.d.ts

@@ -19,7 +19,10 @@ export type InputProps = CommonInputProps & {
 export type StyledCommonInputProps = Pick<InputProps, 'readOnly' | 'disabled'> & {
     hasErrorMessage: boolean;
 };
-export type StyledInputProps = StyledCommonInputProps & Pick<InputProps, 'componentSize'>;
+export type StyledInputProps = StyledCommonInputProps & {
+    prefixLength?: number;
+    suffixLength?: number;
+} & Pick<InputProps, 'componentSize'>;
 export type InputTypographyTypes = {
     [k in InputSize]: StaticTypographyType;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@norges-domstoler/dds-components",
-  "version": "13.0.3",
+  "version": "13.1.1",
   "description": "React components used in Elsa - domstolenes designsystem",
   "author": "Elsa team",
   "license": "MIT",