@dnb/eufemia 10.20.0 → 10.22.0

package/extensions/forms/Field/Selection/Selection.js

@@ -1,5 +1,3 @@
-"use client";
-
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
@@ -8,24 +6,21 @@ const _excluded = ["value", "error", "title", "children"],
   _excluded2 = ["value", "title", "status"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React, { useMemo, useContext, useCallback } from 'react';
+import React, { useMemo, useCallback } from 'react';
 import { ToggleButton, Dropdown, Radio, HelpButton } from '../../../../components';
 import classnames from 'classnames';
 import { makeUniqueId } from '../../../../shared/component-helper';
-import SharedContext from '../../../../shared/Context';
 import OptionField from '../Option';
 import { useDataValue } from '../../hooks';
 import { FormError } from '../../types';
 import { pickSpacingProps } from '../../../../components/flex/utils';
 import FieldBlock from '../../FieldBlock';
 function Selection(props) {
-  const sharedContext = useContext(SharedContext);
   const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, []);
   const {
     id,
     className,
     variant = 'dropdown',
-    clear,
     label,
     labelDescription,
     layout = 'vertical',
@@ -149,10 +144,6 @@ function Selection(props) {
             content: child
           };
         });
-        const data = [clear ? {
-          selectedKey: clearValue,
-          content: React.createElement("em", null, sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms.selectionClearSelected)
-        } : undefined, ...(optionsData !== null && optionsData !== void 0 ? optionsData : [])].filter(Boolean);
         return React.createElement(FieldBlock, _extends({}, fieldBlockProps, {
           width: width
         }), React.createElement(Dropdown, _extends({
@@ -164,7 +155,7 @@ function Selection(props) {
           status: (hasError || status) && 'error',
           disabled: disabled
         }, ariaAttributes, {
-          data: data,
+          data: optionsData,
           suffix: help ? React.createElement(HelpButton, {
             title: help.title
           }, help.content) : undefined,

package/extensions/forms/Field/Selection/Selection.js.map

@@ -1 +1 @@
-{"version":3,"file":"Selection.js","names":["React","useMemo","useContext","useCallback","ToggleButton","Dropdown","Radio","HelpButton","classnames","makeUniqueId","SharedContext","OptionField","useDataValue","FormError","pickSpacingProps","FieldBlock","Selection","props","sharedContext","clearValue","id","className","variant","clear","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","ariaAttributes","setHasFocus","handleChange","children","handleDropdownChange","_ref","data","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","v","title","rest","_objectWithoutProperties","_excluded","status","Component","createElement","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","optionsData","_child$props$value","_ref5","_child$props$children","_child$props$children2","content","_em","translation","Forms","selectionClearSelected","Boolean","list_class","portal_class","suffix","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useContext, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport SharedContext from '../../../../shared/Context'\nimport OptionField from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport FieldBlock from '../../FieldBlock'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    clear?: boolean\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    clear,\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    ariaAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useDataValues handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => {\n          const {\n            value: v,\n            error,\n            title,\n            children,\n            ...rest\n          } = option.props\n\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            value: v,\n            status,\n            ...rest,\n          }\n        }),\n    [children, getStatus]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={status}\n                  {...ariaAttributes}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === OptionField) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n      const data = [\n        clear\n          ? {\n              selectedKey: clearValue,\n              content: (\n                <em>\n                  {sharedContext?.translation.Forms.selectionClearSelected}\n                </em>\n              ),\n            }\n          : undefined,\n        ...(optionsData ?? []),\n      ].filter(Boolean)\n\n      return (\n        <FieldBlock {...fieldBlockProps} width={width}>\n          <Dropdown\n            id={id}\n            list_class=\"dnb-forms-field-selection__list\"\n            portal_class=\"dnb-forms-field-selection__portal\"\n            title={placeholder}\n            value={String(value ?? '')}\n            status={(hasError || status) && 'error'}\n            disabled={disabled}\n            {...ariaAttributes}\n            data={data}\n            suffix={\n              help ? (\n                <HelpButton title={help.title}>{help.content}</HelpButton>\n              ) : undefined\n            }\n            on_change={handleDropdownChange}\n            on_show={handleShow}\n            on_hide={handleHide}\n            stretch\n          />\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}
+{"version":3,"file":"Selection.js","names":["React","useMemo","useCallback","ToggleButton","Dropdown","Radio","HelpButton","classnames","makeUniqueId","OptionField","useDataValue","FormError","pickSpacingProps","FieldBlock","Selection","props","clearValue","id","className","variant","label","labelDescription","layout","optionsLayout","placeholder","value","info","warning","error","hasError","disabled","help","emptyValue","width","ariaAttributes","setHasFocus","handleChange","children","handleDropdownChange","_ref","data","selectedKey","onChangeHandler","_ref2","undefined","handleShow","_ref3","handleHide","_ref4","cn","fieldBlockProps","_objectSpread","forId","getStatus","_error$message","message","Error","toString","options","Children","toArray","filter","child","isValidElement","type","map","option","_option$props","v","title","rest","_objectWithoutProperties","_excluded","status","Component","createElement","Group","layout_direction","on_change","String","i","_excluded2","_extends","length","key","text","optionsData","_child$props$value","_ref5","_child$props$children","_child$props$children2","content","_em","list_class","portal_class","suffix","on_show","on_hide","stretch","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Selection/Selection.tsx"],"sourcesContent":["import React, { useMemo, useCallback } from 'react'\nimport {\n  ToggleButton,\n  Dropdown,\n  Radio,\n  HelpButton,\n} from '../../../../components'\nimport classnames from 'classnames'\nimport { makeUniqueId } from '../../../../shared/component-helper'\nimport OptionField from '../Option'\nimport { useDataValue } from '../../hooks'\nimport { FormError, FieldProps, FieldHelpProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport type { FormStatusText } from '../../../../components/FormStatus'\nimport FieldBlock from '../../FieldBlock'\n\ninterface IOption {\n  title: string | React.ReactNode\n  value: number | string\n  status: FormStatusText\n}\n\nexport type Props = FieldHelpProps &\n  FieldProps<IOption['value']> & {\n    children?: React.ReactNode\n    variant?: 'dropdown' | 'radio' | 'button'\n    optionsLayout?: 'horizontal' | 'vertical'\n    width?: 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction Selection(props: Props) {\n  const clearValue = useMemo(() => `clear-option-${makeUniqueId()}`, [])\n\n  const {\n    id,\n    className,\n    variant = 'dropdown',\n    label,\n    labelDescription,\n    layout = 'vertical',\n    optionsLayout = 'vertical',\n    placeholder,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    emptyValue,\n    width = 'large',\n    ariaAttributes,\n    setHasFocus,\n    handleChange,\n    children,\n  } = useDataValue(props)\n\n  const handleDropdownChange = useCallback(\n    ({ data: { selectedKey } }) => {\n      handleChange?.(\n        !selectedKey || selectedKey === clearValue\n          ? emptyValue\n          : selectedKey\n      )\n    },\n    [handleChange, emptyValue, clearValue]\n  )\n\n  const onChangeHandler = useCallback(\n    ({ value }) => {\n      handleChange?.(value === undefined ? emptyValue : value)\n    },\n    [handleChange, emptyValue]\n  )\n\n  // Specific handleShow and handleHide because Dropdown preserve the initially received callbacks, so changes\n  // due to `useCallback` usage will have no effect, leading to useDataValues handleFocus and handleBlur sending out old\n  // copies of value as arguments.\n  const handleShow = useCallback(\n    ({ data }) => {\n      setHasFocus(true, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const handleHide = useCallback(\n    ({ data }) => {\n      setHasFocus(false, data?.selectedKey)\n    },\n    [setHasFocus]\n  )\n\n  const cn = classnames(\n    'dnb-forms-field-selection',\n    `dnb-forms-field-selection__variant--${variant}`,\n    `dnb-forms-field-selection__options-layout--${optionsLayout}`,\n    className\n  )\n\n  const fieldBlockProps = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    layout,\n    label,\n    labelDescription,\n  }\n\n  const getStatus = useCallback(\n    (error: Error | FormError | undefined) => {\n      return (\n        error?.message ??\n        ((warning instanceof Error && warning.message) ||\n          (warning instanceof FormError && warning.message) ||\n          warning?.toString() ||\n          (info instanceof Error && info.message) ||\n          (info instanceof FormError && info.message) ||\n          info?.toString())\n      )\n    },\n    [info, warning]\n  )\n\n  const options: IOption[] = useMemo(\n    () =>\n      React.Children.toArray(children)\n        .filter(\n          (child) =>\n            React.isValidElement(child) && child.type === OptionField\n        )\n        .map((option: React.ReactElement) => {\n          const {\n            value: v,\n            error,\n            title,\n            children,\n            ...rest\n          } = option.props\n\n          const status = getStatus(error)\n\n          return {\n            title: title ?? children,\n            value: v,\n            status,\n            ...rest,\n          }\n        }),\n    [children, getStatus]\n  )\n\n  const status = getStatus(error)\n\n  switch (variant) {\n    case 'radio':\n    case 'button': {\n      const Component = (\n        variant === 'radio' ? Radio : ToggleButton\n      ) as typeof Radio & typeof ToggleButton\n\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <Component.Group\n            className={cn}\n            layout_direction={\n              optionsLayout === 'horizontal' ? 'row' : 'column'\n            }\n            disabled={disabled}\n            on_change={onChangeHandler}\n            value={String(value ?? '')}\n          >\n            {options.map((option, i) => {\n              const { value, title, status, ...rest } = option\n              return (\n                <Component\n                  id={options.length === 1 ? id : undefined}\n                  key={`option-${i}-${value}`}\n                  label={variant === 'radio' ? title : undefined}\n                  text={variant === 'button' ? title : undefined}\n                  value={String(value ?? '')}\n                  status={status}\n                  {...ariaAttributes}\n                  {...rest}\n                />\n              )\n            })}\n          </Component.Group>\n        </FieldBlock>\n      )\n    }\n\n    case 'dropdown': {\n      const optionsData = React.Children.map(children, (child) => {\n        if (React.isValidElement(child) && child.type === OptionField) {\n          // Option components\n          return child.props.text\n            ? {\n                selectedKey: String(child.props.value ?? ''),\n                content: [\n                  child.props.children ?? child.props.title ?? (\n                    <em>Untitled</em>\n                  ),\n                  child.props.text,\n                ],\n              }\n            : {\n                selectedKey: child.props.value,\n                content: child.props.children ?? child.props.title,\n              }\n        }\n\n        // For other children, just show them as content\n        return {\n          content: child,\n        }\n      })\n\n      return (\n        <FieldBlock {...fieldBlockProps} width={width}>\n          <Dropdown\n            id={id}\n            list_class=\"dnb-forms-field-selection__list\"\n            portal_class=\"dnb-forms-field-selection__portal\"\n            title={placeholder}\n            value={String(value ?? '')}\n            status={(hasError || status) && 'error'}\n            disabled={disabled}\n            {...ariaAttributes}\n            data={optionsData}\n            suffix={\n              help ? (\n                <HelpButton title={help.title}>{help.content}</HelpButton>\n              ) : undefined\n            }\n            on_change={handleDropdownChange}\n            on_show={handleShow}\n            on_hide={handleHide}\n            stretch\n          />\n        </FieldBlock>\n      )\n    }\n  }\n}\n\nSelection._supportsSpacingProps = true\nexport default Selection\n"],"mappings":"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"}

package/extensions/forms/Field/String/String.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { InputProps } from '../../../../components/input/Input';
 import { InputMaskedProps } from '../../../../components/InputMasked';
+import { TextareaProps } from '../../../../components/Textarea';
 import type { TextCounterProps } from '../../../../fragments/TextCounter';
 import type { FieldProps, FieldHelpProps, CustomErrorMessages } from '../../types';
 interface ErrorMessages extends CustomErrorMessages {
@@ -11,23 +12,33 @@ interface ErrorMessages extends CustomErrorMessages {
     pattern?: string;
 }
 export type Props = FieldHelpProps & FieldProps<string, undefined | string, ErrorMessages> & {
-    type?: InputProps['type'];
     multiline?: boolean;
+    mask?: InputMaskedProps['mask'];
     leftIcon?: string;
     rightIcon?: string;
     inputClassName?: string;
     innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
-    clear?: boolean;
-    autoresize?: boolean;
-    autoComplete?: HTMLInputElement['autocomplete'];
-    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
-    autoresizeMaxRows?: number;
-    characterCounter?: Omit<TextCounterProps, 'text'> | number;
-    mask?: InputMaskedProps['mask'];
+    submitElement?: InputProps['submit_element'];
+    width?: false | 'small' | 'medium' | 'large' | 'stretch';
     minLength?: number;
     maxLength?: number;
     pattern?: string;
-    width?: false | 'small' | 'medium' | 'large' | 'stretch';
+    type?: InputProps['type'];
+    size?: InputProps['size'];
+    align?: InputProps['align'];
+    selectall?: InputProps['selectall'];
+    clear?: boolean;
+    keepPlaceholder?: InputProps['keep_placeholder'];
+    rows?: TextareaProps['rows'];
+    autoresizeMaxRows?: TextareaProps['autoresize_max_rows'];
+    autoresize?: TextareaProps['autoresize'];
+    characterCounter?: Omit<TextCounterProps, 'text'> | number;
+    autoComplete?: HTMLInputElement['autocomplete'];
+    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode'];
+    autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect'];
+    spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck'];
+    autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus'];
+    autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize'];
 };
 declare function StringComponent(props: Props): import("react/jsx-runtime").JSX.Element;
 declare namespace StringComponent {

package/extensions/forms/Field/String/String.js

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { HelpButton, Input, Textarea } from '../../../../components';
 import InputMasked from '../../../../components/InputMasked';
 import SharedContext from '../../../../shared/Context';
+import FieldBlockContext from '../../FieldBlock/FieldBlockContext';
 import FieldBlock from '../../FieldBlock';
 import { useDataValue } from '../../hooks';
 import { pickSpacingProps } from '../../../../components/flex/utils';
@@ -16,6 +17,7 @@ import { toCapitalized } from '../../../../shared/component-helper';
 import useErrorMessage from '../../hooks/useErrorMessage';
 function StringComponent(props) {
   var _props$width, _value$toString;
+  const fieldBlockContext = useContext(FieldBlockContext);
   const sharedContext = useContext(SharedContext);
   const tr = sharedContext === null || sharedContext === void 0 ? void 0 : sharedContext.translation.Forms;
   const errorMessages = useErrorMessage(props.path, props.errorMessages, {
@@ -67,18 +69,15 @@ function StringComponent(props) {
     fromInput,
     toEvent,
     transformValue,
-    width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : 'large'
+    width: (_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.composition ? 'stretch' : 'large'
   });
   const {
     id,
     name,
     className,
-    autoComplete,
-    inputMode,
     innerRef,
     inputClassName,
     layout,
-    type,
     placeholder,
     label,
     labelDescription,
@@ -90,15 +89,28 @@ function StringComponent(props) {
     disabled,
     help,
     multiline,
+    mask,
     leftIcon,
     rightIcon,
+    width,
+    ariaAttributes,
+    submitElement,
+    type,
     clear,
-    autoresize = true,
+    align,
+    size,
+    selectall,
+    keepPlaceholder,
+    rows,
     autoresizeMaxRows = 6,
+    autoresize = true,
     characterCounter,
-    mask,
-    width,
-    ariaAttributes,
+    autoComplete,
+    inputMode,
+    autoCorrect,
+    spellCheck,
+    autoFocus,
+    autoCapitalize,
     handleFocus,
     handleBlur,
     handleChange
@@ -109,6 +121,10 @@ function StringComponent(props) {
     id,
     name,
     autoComplete,
+    autoCorrect,
+    spellCheck,
+    autoFocus,
+    autoCapitalize,
     inputMode,
     className: cn,
     placeholder: placeholder,
@@ -120,38 +136,43 @@ function StringComponent(props) {
     on_change: handleChange,
     disabled
   }, ariaAttributes), {}, {
-    stretch: width !== undefined,
+    stretch: Boolean(width !== undefined || (fieldBlockContext === null || fieldBlockContext === void 0 ? void 0 : fieldBlockContext.composition)),
     inner_ref: innerRef,
     status: hasError ? 'error' : undefined,
     value: transformInstantly((_value$toString = value === null || value === void 0 ? void 0 : value.toString()) !== null && _value$toString !== void 0 ? _value$toString : '')
   });
-  return React.createElement(FieldBlock, _extends({
+  const inputProps = {
+    type,
+    clear,
+    size,
+    align,
+    selectall,
+    icon: leftIcon !== null && leftIcon !== void 0 ? leftIcon : rightIcon,
+    icon_position: rightIcon && !leftIcon ? 'right' : undefined,
+    submit_element: submitElement,
+    keep_placeholder: keepPlaceholder
+  };
+  const fieldBlockProps = _objectSpread({
     className: classnames('dnb-forms-field-string', className),
     forId: id,
-    layout: layout,
-    label: label,
-    labelDescription: labelDescription,
-    info: info,
-    warning: warning,
-    disabled: disabled,
-    error: error,
-    width: width === 'stretch' ? width : undefined,
+    layout,
+    label,
+    labelDescription,
+    info,
+    warning,
+    error,
+    disabled,
+    width: width === 'stretch' || fieldBlockContext !== null && fieldBlockContext !== void 0 && fieldBlockContext.composition ? width : undefined,
     contentWidth: width !== false ? width : undefined
-  }, pickSpacingProps(props)), multiline ? React.createElement(Textarea, _extends({}, sharedProps, {
-    autoresize: autoresize,
+  }, pickSpacingProps(props));
+  return React.createElement(FieldBlock, fieldBlockProps, multiline ? React.createElement(Textarea, _extends({}, sharedProps, {
+    rows: rows,
     autoresize_max_rows: autoresizeMaxRows,
+    autoresize: autoresize,
     characterCounter: characterCounter
-  })) : mask ? React.createElement(InputMasked, _extends({}, sharedProps, {
-    mask: mask,
-    icon: leftIcon !== null && leftIcon !== void 0 ? leftIcon : rightIcon,
-    icon_position: rightIcon && !leftIcon ? 'right' : undefined,
-    clear: clear
-  })) : React.createElement(Input, _extends({}, sharedProps, {
-    type: type,
-    icon: leftIcon !== null && leftIcon !== void 0 ? leftIcon : rightIcon,
-    icon_position: rightIcon && !leftIcon ? 'right' : undefined,
-    clear: clear
-  })));
+  })) : mask ? React.createElement(InputMasked, _extends({}, sharedProps, inputProps, {
+    mask: mask
+  })) : React.createElement(Input, _extends({}, sharedProps, inputProps)));
 }
 StringComponent._supportsSpacingProps = true;
 export default StringComponent;

package/extensions/forms/Field/String/String.js.map

@@ -1 +1 @@
-{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlock","useDataValue","pickSpacingProps","toCapitalized","useErrorMessage","StringComponent","props","_props$width","_value$toString","sharedContext","tr","translation","Forms","errorMessages","path","required","inputErrorRequired","minLength","stringInputErrorMinLength","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","_props$schema","type","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transformValue","capitalize","String","preparedProps","_objectSpread","width","id","name","className","autoComplete","inputMode","innerRef","inputClassName","layout","placeholder","label","labelDescription","info","warning","error","hasError","disabled","help","multiline","leftIcon","rightIcon","clear","autoresize","autoresizeMaxRows","characterCounter","mask","ariaAttributes","handleFocus","handleBlur","transformInstantly","cn","sharedProps","suffix","createElement","title","content","undefined","on_focus","on_blur","on_change","stretch","inner_ref","status","toString","_extends","forId","contentWidth","autoresize_max_rows","icon","icon_position","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\nimport type { TextCounterProps } from '../../../../fragments/TextCounter'\nimport type {\n  FieldProps,\n  FieldHelpProps,\n  CustomErrorMessages,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    type?: InputProps['type']\n    multiline?: boolean\n    leftIcon?: string\n    rightIcon?: string\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    clear?: boolean\n    autoresize?: boolean\n    autoComplete?: HTMLInputElement['autocomplete']\n    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n    autoresizeMaxRows?: number\n    characterCounter?: Omit<TextCounterProps, 'text'> | number\n    mask?: InputMaskedProps['mask']\n    // Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n    // Styling\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n  }\n\nfunction StringComponent(props: Props) {\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.inputErrorRequired,\n    minLength: tr.stringInputErrorMinLength,\n    maxLength: tr.stringInputErrorMaxLength,\n    pattern: tr.inputErrorPattern,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n  const toEvent = useCallback(\n    (value: string, type: string) => {\n      if (props.trim && type === 'onBlur') {\n        const spaces = '[\\\\s ]'\n        if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n          value = value.replace(\n            new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n            ''\n          )\n          handleChange(value)\n        }\n      }\n      return value\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.trim]\n  )\n  const transformValue = useCallback(\n    (value: string) => {\n      if (props.capitalize) {\n        value = toCapitalized(String(value || ''))\n      }\n      return value\n    },\n    [props.capitalize]\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width: props.width ?? 'large',\n  }\n\n  const {\n    id,\n    name,\n    className,\n    autoComplete,\n    inputMode,\n    innerRef,\n    inputClassName,\n    layout,\n    type,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    multiline,\n    leftIcon,\n    rightIcon,\n    clear,\n    autoresize = true,\n    autoresizeMaxRows = 6,\n    characterCounter,\n    mask,\n    width,\n    ariaAttributes,\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps = {\n    id,\n    name,\n    autoComplete,\n    inputMode,\n    className: cn,\n    placeholder: placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    disabled,\n    ...ariaAttributes,\n    stretch: width !== undefined,\n    inner_ref: innerRef,\n    status: hasError ? 'error' : undefined,\n    value: transformInstantly(value?.toString() ?? ''),\n  }\n\n  return (\n    <FieldBlock\n      className={classnames('dnb-forms-field-string', className)}\n      forId={id}\n      layout={layout}\n      label={label}\n      labelDescription={labelDescription}\n      info={info}\n      warning={warning}\n      disabled={disabled}\n      error={error}\n      width={width === 'stretch' ? width : undefined}\n      contentWidth={width !== false ? width : undefined}\n      {...pickSpacingProps(props)}\n    >\n      {multiline ? (\n        <Textarea\n          {...sharedProps}\n          autoresize={autoresize}\n          autoresize_max_rows={autoresizeMaxRows}\n          characterCounter={characterCounter}\n        />\n      ) : mask ? (\n        <InputMasked\n          {...sharedProps}\n          mask={mask}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n        />\n      ) : (\n        <Input\n          {...sharedProps}\n          type={type}\n          icon={leftIcon ?? rightIcon}\n          icon_position={rightIcon && !leftIcon ? 'right' : undefined}\n          clear={clear}\n        />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}
+{"version":3,"file":"String.js","names":["React","useContext","useMemo","useCallback","classnames","HelpButton","Input","Textarea","InputMasked","SharedContext","FieldBlockContext","FieldBlock","useDataValue","pickSpacingProps","toCapitalized","useErrorMessage","StringComponent","props","_props$width","_value$toString","fieldBlockContext","sharedContext","tr","translation","Forms","errorMessages","path","required","inputErrorRequired","minLength","stringInputErrorMinLength","maxLength","stringInputErrorMaxLength","pattern","inputErrorPattern","schema","_props$schema","type","fromInput","event","_event","_event$cleanedValue","_event2","_event3","value","emptyValue","cleanedValue","toEvent","trim","spaces","RegExp","test","replace","handleChange","transformValue","capitalize","String","preparedProps","_objectSpread","width","composition","id","name","className","innerRef","inputClassName","layout","placeholder","label","labelDescription","info","warning","error","hasError","disabled","help","multiline","mask","leftIcon","rightIcon","ariaAttributes","submitElement","clear","align","size","selectall","keepPlaceholder","rows","autoresizeMaxRows","autoresize","characterCounter","autoComplete","inputMode","autoCorrect","spellCheck","autoFocus","autoCapitalize","handleFocus","handleBlur","transformInstantly","cn","sharedProps","suffix","createElement","title","content","undefined","on_focus","on_blur","on_change","stretch","Boolean","inner_ref","status","toString","inputProps","icon","icon_position","submit_element","keep_placeholder","fieldBlockProps","forId","contentWidth","_extends","autoresize_max_rows","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/String/String.tsx"],"sourcesContent":["import React, { useContext, useMemo, useCallback } from 'react'\nimport classnames from 'classnames'\nimport { HelpButton, Input, Textarea } from '../../../../components'\nimport { InputProps } from '../../../../components/input/Input'\nimport InputMasked, {\n  InputMaskedProps,\n} from '../../../../components/InputMasked'\nimport { TextareaProps } from '../../../../components/Textarea'\nimport SharedContext from '../../../../shared/Context'\nimport FieldBlockContext from '../../FieldBlock/FieldBlockContext'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport { toCapitalized } from '../../../../shared/component-helper'\nimport type { TextCounterProps } from '../../../../fragments/TextCounter'\nimport type {\n  FieldProps,\n  FieldHelpProps,\n  CustomErrorMessages,\n  AllJSONSchemaVersions,\n} from '../../types'\nimport useErrorMessage from '../../hooks/useErrorMessage'\n\ninterface ErrorMessages extends CustomErrorMessages {\n  required?: string\n  schema?: string\n  minLength?: string\n  maxLength?: string\n  pattern?: string\n}\nexport type Props = FieldHelpProps &\n  FieldProps<string, undefined | string, ErrorMessages> & {\n    // - String props\n    multiline?: boolean\n    mask?: InputMaskedProps['mask']\n    leftIcon?: string\n    rightIcon?: string\n    inputClassName?: string\n    innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>\n    submitElement?: InputProps['submit_element']\n    width?: false | 'small' | 'medium' | 'large' | 'stretch'\n\n    // - Validation\n    minLength?: number\n    maxLength?: number\n    pattern?: string\n\n    // - Input props\n    type?: InputProps['type']\n    size?: InputProps['size']\n    align?: InputProps['align']\n    selectall?: InputProps['selectall']\n    clear?: boolean\n    keepPlaceholder?: InputProps['keep_placeholder']\n\n    // - Textarea props\n    rows?: TextareaProps['rows']\n    autoresizeMaxRows?: TextareaProps['autoresize_max_rows']\n    autoresize?: TextareaProps['autoresize']\n    characterCounter?: Omit<TextCounterProps, 'text'> | number\n\n    // - Html props\n    autoComplete?: HTMLInputElement['autocomplete']\n    inputMode?: React.HTMLAttributes<HTMLInputElement>['inputMode']\n    autoCorrect?: React.HTMLAttributes<HTMLInputElement>['autoCorrect']\n    spellCheck?: React.HTMLAttributes<HTMLInputElement>['spellCheck']\n    autoFocus?: React.HTMLAttributes<HTMLInputElement>['autoFocus']\n    autoCapitalize?: React.HTMLAttributes<HTMLInputElement>['autoCapitalize']\n  }\n\nfunction StringComponent(props: Props) {\n  const fieldBlockContext = useContext(FieldBlockContext)\n  const sharedContext = useContext(SharedContext)\n  const tr = sharedContext?.translation.Forms\n\n  const errorMessages = useErrorMessage(props.path, props.errorMessages, {\n    required: tr.inputErrorRequired,\n    minLength: tr.stringInputErrorMinLength,\n    maxLength: tr.stringInputErrorMaxLength,\n    pattern: tr.inputErrorPattern,\n  })\n\n  const schema = useMemo<AllJSONSchemaVersions>(\n    () =>\n      props.schema ?? {\n        type: 'string',\n        minLength: props.minLength,\n        maxLength: props.maxLength,\n        pattern: props.pattern,\n      },\n    [props.schema, props.minLength, props.maxLength, props.pattern]\n  )\n  const fromInput = useCallback(\n    (event: { value: string; cleanedValue?: string }) => {\n      if (typeof event === 'string') {\n        event = { value: event }\n      }\n      if (event?.value === '') {\n        return props.emptyValue\n      }\n      // Cleaned value for masked\n      return event?.cleanedValue ?? event?.value\n    },\n    [props.emptyValue]\n  )\n  const toEvent = useCallback(\n    (value: string, type: string) => {\n      if (props.trim && type === 'onBlur') {\n        const spaces = '[\\\\s ]'\n        if (new RegExp(`^${spaces}|${spaces}$`).test(value)) {\n          value = value.replace(\n            new RegExp(`^${spaces}+|${spaces}+$`, 'g'),\n            ''\n          )\n          handleChange(value)\n        }\n      }\n      return value\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [props.trim]\n  )\n  const transformValue = useCallback(\n    (value: string) => {\n      if (props.capitalize) {\n        value = toCapitalized(String(value || ''))\n      }\n      return value\n    },\n    [props.capitalize]\n  )\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages,\n    schema,\n    fromInput,\n    toEvent,\n    transformValue,\n    width:\n      props.width ??\n      (fieldBlockContext?.composition ? 'stretch' : 'large'),\n  }\n\n  const {\n    id,\n    name,\n    className,\n\n    innerRef,\n    inputClassName,\n    layout,\n    placeholder,\n    label,\n    labelDescription,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    disabled,\n    help,\n    multiline,\n    mask,\n    leftIcon,\n    rightIcon,\n    width,\n    ariaAttributes,\n    submitElement,\n\n    // - Input props\n    type,\n    clear,\n    align,\n    size,\n    selectall,\n    keepPlaceholder,\n\n    // - Textarea props\n    rows,\n    // formId,\n    autoresizeMaxRows = 6,\n    autoresize = true,\n    characterCounter,\n\n    // - Html props\n\n    autoComplete,\n    inputMode,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n\n    // - Events\n    handleFocus,\n    handleBlur,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const transformInstantly = useCallback(\n    (value: string) => (props.capitalize ? toCapitalized(value) : value),\n    [props.capitalize]\n  )\n\n  const cn = classnames('dnb-forms-field-string__input', inputClassName)\n\n  const sharedProps: InputProps & TextareaProps = {\n    id,\n    name,\n    autoComplete,\n    autoCorrect,\n    spellCheck,\n    autoFocus,\n    autoCapitalize,\n    inputMode,\n    className: cn,\n    placeholder: placeholder,\n    suffix: help ? (\n      <HelpButton title={help.title}>{help.content}</HelpButton>\n    ) : undefined,\n    on_focus: handleFocus,\n    on_blur: handleBlur,\n    on_change: handleChange,\n    disabled,\n    ...ariaAttributes,\n    stretch: Boolean(\n      width !== undefined || fieldBlockContext?.composition\n    ),\n    inner_ref: innerRef,\n    status: hasError ? 'error' : undefined,\n    value: transformInstantly(value?.toString() ?? ''),\n  }\n\n  const inputProps: InputProps = {\n    type,\n    clear,\n    size,\n    align,\n    selectall,\n    icon: leftIcon ?? rightIcon,\n    icon_position: rightIcon && !leftIcon ? 'right' : undefined,\n    submit_element: submitElement,\n    keep_placeholder: keepPlaceholder,\n  }\n\n  const fieldBlockProps = {\n    className: classnames('dnb-forms-field-string', className),\n    forId: id,\n    layout,\n    label,\n    labelDescription,\n    info,\n    warning,\n    error,\n    disabled,\n    width:\n      width === 'stretch' || fieldBlockContext?.composition\n        ? width\n        : undefined,\n    contentWidth: width !== false ? width : undefined,\n    ...pickSpacingProps(props),\n  }\n\n  return (\n    <FieldBlock {...fieldBlockProps}>\n      {multiline ? (\n        <Textarea\n          {...sharedProps}\n          rows={rows}\n          autoresize_max_rows={autoresizeMaxRows}\n          autoresize={autoresize}\n          characterCounter={characterCounter}\n        />\n      ) : mask ? (\n        <InputMasked {...sharedProps} {...inputProps} mask={mask} />\n      ) : (\n        <Input {...sharedProps} {...inputProps} />\n      )}\n    </FieldBlock>\n  )\n}\n\nStringComponent._supportsSpacingProps = true\nexport default StringComponent\n"],"mappings":"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"}

package/extensions/forms/Field/String/StringDocs.d.ts

@@ -0,0 +1,2 @@
+import { PropertiesTableProps } from '../../../../shared/types';
+export declare const stringProperties: PropertiesTableProps;

package/extensions/forms/Field/String/StringDocs.js

@@ -0,0 +1,99 @@
+import { inputProperties } from '../../../../components/input/InputDocs';
+export const stringProperties = {
+  multiline: {
+    doc: 'True to be able to write in multiple lines (switching from input-element to textarea-element).',
+    type: 'boolean',
+    status: 'optional'
+  },
+  leftIcon: {
+    doc: 'For icon at the left side of the text input.',
+    type: 'string',
+    status: 'optional'
+  },
+  rightIcon: {
+    doc: 'For icon at the right side of the text input.',
+    type: 'string',
+    status: 'optional'
+  },
+  capitalize: {
+    doc: 'When set to true, it will capitalize the first letter of every word, transforming the rest to lowercase.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  trim: {
+    doc: 'When true, it will trim leading and trailing whitespaces on blur, triggering onChange if the value changes.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  inputMode: {
+    doc: 'Define an [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).',
+    type: 'string',
+    status: 'optional'
+  },
+  autoComplete: {
+    doc: 'For HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attributes.',
+    type: ['on', 'string'],
+    status: 'optional'
+  },
+  minLength: {
+    doc: 'Validation for minimum length of the text (number of characters).',
+    type: 'number',
+    status: 'optional'
+  },
+  maxLength: {
+    doc: 'Validation for maximum length of the text (number of characters).',
+    type: 'number',
+    status: 'optional'
+  },
+  pattern: {
+    doc: 'Validation based on regex pattern.',
+    type: 'string',
+    status: 'optional'
+  },
+  width: {
+    doc: '`false` for no width (use browser default), small, medium or large for predefined standard widths, stretch for fill available width.',
+    type: ['string', 'false'],
+    status: 'optional'
+  },
+  help: {
+    doc: 'Provide a help button. Object consisting of title and content.',
+    type: 'object',
+    status: 'optional'
+  },
+  size: inputProperties.size,
+  align: inputProperties.align,
+  selectall: inputProperties.selectall,
+  clear: inputProperties.clear,
+  keepPlaceholder: inputProperties.keep_placeholder,
+  autoresize: {
+    doc: 'For multiline, set true to expand when writing longer texts.',
+    type: 'boolean',
+    status: 'optional'
+  },
+  autoresizeMaxRows: {
+    doc: 'For multiline, set how many rows of text can be shown at max.',
+    type: 'number',
+    status: 'optional'
+  },
+  characterCounter: {
+    doc: "For multiline, use a number to define the displayed max length e.g. `40` or `{ max: 40, variant: 'down' }`.",
+    type: ['number', 'object'],
+    status: 'optional'
+  },
+  inputClassName: {
+    doc: 'Class name set on the <input> DOM element.',
+    type: 'string',
+    status: 'optional'
+  },
+  innerRef: {
+    doc: 'By providing a React.Ref we can get the internally used input element (DOM).',
+    type: 'React.Ref',
+    status: 'optional'
+  },
+  submitElement: {
+    doc: 'Accepts a React element which will show up like the "submit button" would do on type="search".',
+    type: 'React.Element',
+    status: 'optional'
+  }
+};
+//# sourceMappingURL=StringDocs.js.map

package/extensions/forms/Field/String/StringDocs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StringDocs.js","names":["inputProperties","stringProperties","multiline","doc","type","status","leftIcon","rightIcon","capitalize","trim","inputMode","autoComplete","minLength","maxLength","pattern","width","help","size","align","selectall","clear","keepPlaceholder","keep_placeholder","autoresize","autoresizeMaxRows","characterCounter","inputClassName","innerRef","submitElement"],"sources":["../../../../../../src/extensions/forms/Field/String/StringDocs.ts"],"sourcesContent":["import { inputProperties } from '../../../../components/input/InputDocs'\nimport { PropertiesTableProps } from '../../../../shared/types'\n\nexport const stringProperties: PropertiesTableProps = {\n  multiline: {\n    doc: 'True to be able to write in multiple lines (switching from input-element to textarea-element).',\n    type: 'boolean',\n    status: 'optional',\n  },\n  leftIcon: {\n    doc: 'For icon at the left side of the text input.',\n    type: 'string',\n    status: 'optional',\n  },\n  rightIcon: {\n    doc: 'For icon at the right side of the text input.',\n    type: 'string',\n    status: 'optional',\n  },\n  capitalize: {\n    doc: 'When set to true, it will capitalize the first letter of every word, transforming the rest to lowercase.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  trim: {\n    doc: 'When true, it will trim leading and trailing whitespaces on blur, triggering onChange if the value changes.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  inputMode: {\n    doc: 'Define an [inputmode](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).',\n    type: 'string',\n    status: 'optional',\n  },\n  autoComplete: {\n    doc: 'For HTML [autocomplete](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) attributes.',\n    type: ['on', 'string'],\n    status: 'optional',\n  },\n  minLength: {\n    doc: 'Validation for minimum length of the text (number of characters).',\n    type: 'number',\n    status: 'optional',\n  },\n  maxLength: {\n    doc: 'Validation for maximum length of the text (number of characters).',\n    type: 'number',\n    status: 'optional',\n  },\n  pattern: {\n    doc: 'Validation based on regex pattern.',\n    type: 'string',\n    status: 'optional',\n  },\n  width: {\n    doc: '`false` for no width (use browser default), small, medium or large for predefined standard widths, stretch for fill available width.',\n    type: ['string', 'false'],\n    status: 'optional',\n  },\n  help: {\n    doc: 'Provide a help button. Object consisting of title and content.',\n    type: 'object',\n    status: 'optional',\n  },\n\n  // - Input props\n  size: inputProperties.size,\n  align: inputProperties.align,\n  selectall: inputProperties.selectall,\n  clear: inputProperties.clear,\n  keepPlaceholder: inputProperties.keep_placeholder,\n\n  // - Textarea props\n  autoresize: {\n    doc: 'For multiline, set true to expand when writing longer texts.',\n    type: 'boolean',\n    status: 'optional',\n  },\n  autoresizeMaxRows: {\n    doc: 'For multiline, set how many rows of text can be shown at max.',\n    type: 'number',\n    status: 'optional',\n  },\n  characterCounter: {\n    doc: \"For multiline, use a number to define the displayed max length e.g. `40` or `{ max: 40, variant: 'down' }`.\",\n    type: ['number', 'object'],\n    status: 'optional',\n  },\n\n  // - Additional props\n  inputClassName: {\n    doc: 'Class name set on the <input> DOM element.',\n    type: 'string',\n    status: 'optional',\n  },\n  innerRef: {\n    doc: 'By providing a React.Ref we can get the internally used input element (DOM).',\n    type: 'React.Ref',\n    status: 'optional',\n  },\n  submitElement: {\n    doc: 'Accepts a React element which will show up like the \"submit button\" would do on type=\"search\".',\n    type: 'React.Element',\n    status: 'optional',\n  },\n}\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,wCAAwC;AAGxE,OAAO,MAAMC,gBAAsC,GAAG;EACpDC,SAAS,EAAE;IACTC,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDC,QAAQ,EAAE;IACRH,GAAG,EAAE,8CAA8C;IACnDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDE,SAAS,EAAE;IACTJ,GAAG,EAAE,+CAA+C;IACpDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDG,UAAU,EAAE;IACVL,GAAG,EAAE,0GAA0G;IAC/GC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDI,IAAI,EAAE;IACJN,GAAG,EAAE,6GAA6G;IAClHC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDK,SAAS,EAAE;IACTP,GAAG,EAAE,uGAAuG;IAC5GC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDM,YAAY,EAAE;IACZR,GAAG,EAAE,gHAAgH;IACrHC,IAAI,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC;IACtBC,MAAM,EAAE;EACV,CAAC;EACDO,SAAS,EAAE;IACTT,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDQ,SAAS,EAAE;IACTV,GAAG,EAAE,mEAAmE;IACxEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDS,OAAO,EAAE;IACPX,GAAG,EAAE,oCAAoC;IACzCC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDU,KAAK,EAAE;IACLZ,GAAG,EAAE,sIAAsI;IAC3IC,IAAI,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC;IACzBC,MAAM,EAAE;EACV,CAAC;EACDW,IAAI,EAAE;IACJb,GAAG,EAAE,gEAAgE;IACrEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EAGDY,IAAI,EAAEjB,eAAe,CAACiB,IAAI;EAC1BC,KAAK,EAAElB,eAAe,CAACkB,KAAK;EAC5BC,SAAS,EAAEnB,eAAe,CAACmB,SAAS;EACpCC,KAAK,EAAEpB,eAAe,CAACoB,KAAK;EAC5BC,eAAe,EAAErB,eAAe,CAACsB,gBAAgB;EAGjDC,UAAU,EAAE;IACVpB,GAAG,EAAE,8DAA8D;IACnEC,IAAI,EAAE,SAAS;IACfC,MAAM,EAAE;EACV,CAAC;EACDmB,iBAAiB,EAAE;IACjBrB,GAAG,EAAE,+DAA+D;IACpEC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDoB,gBAAgB,EAAE;IAChBtB,GAAG,EAAE,6GAA6G;IAClHC,IAAI,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC;IAC1BC,MAAM,EAAE;EACV,CAAC;EAGDqB,cAAc,EAAE;IACdvB,GAAG,EAAE,4CAA4C;IACjDC,IAAI,EAAE,QAAQ;IACdC,MAAM,EAAE;EACV,CAAC;EACDsB,QAAQ,EAAE;IACRxB,GAAG,EAAE,8EAA8E;IACnFC,IAAI,EAAE,WAAW;IACjBC,MAAM,EAAE;EACV,CAAC;EACDuB,aAAa,EAAE;IACbzB,GAAG,EAAE,gGAAgG;IACrGC,IAAI,EAAE,eAAe;IACrBC,MAAM,EAAE;EACV;AACF,CAAC"}

package/extensions/forms/Field/Toggle/Toggle.js

@@ -97,7 +97,7 @@ function Toggle(props) {
         bottom: "x-small"
       }, React.createElement(ToggleButtonGroupContext.Provider, {
         value: {
-          value: isOn ? 'on' : isOff ? 'off' : undefined,
+          value: isOn ? 'on' : isOff ? 'off' : null,
           onChange: handleToggleChange,
           status: hasError ? 'error' : undefined,
           disabled

package/extensions/forms/Field/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","classnames","ButtonRow","FieldBlock","useDataValue","pickSpacingProps","SharedContext","ToggleButtonGroupContext","Toggle","props","sharedContext","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","info","warning","error","hasError","ariaAttributes","handleChange","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockPropsWithoutLabel","forId","fieldBlockProps","isOn","isOff","createElement","_extends","status","undefined","on_change","text","translation","Forms","booleanYes","booleanNo","asFieldset","bottom","Provider","onChange","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\nexport type Props = FieldProps<unknown> & {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nfunction Toggle(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    ariaAttributes,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    disabled,\n  }\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={label}\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            on_change={handleCheckboxChange}\n            {...ariaAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...ariaAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps} asFieldset>\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : undefined,\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={\n                  textOn ?? sharedContext?.translation.Forms.booleanYes\n                }\n                value=\"on\"\n                {...ariaAttributes}\n              />\n              <ToggleButton\n                text={\n                  textOff ?? sharedContext?.translation.Forms.booleanNo\n                }\n                value=\"off\"\n                {...ariaAttributes}\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...ariaAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}
+{"version":3,"file":"Toggle.js","names":["React","useContext","useCallback","Checkbox","ToggleButton","classnames","ButtonRow","FieldBlock","useDataValue","pickSpacingProps","SharedContext","ToggleButtonGroupContext","Toggle","props","sharedContext","preparedProps","_objectSpread","errorMessages","id","className","valueOn","valueOff","layout","variant","disabled","label","labelDescription","textOn","textOff","value","info","warning","error","hasError","ariaAttributes","handleChange","handleCheckboxChange","_ref","checked","handleToggleChange","_ref2","cn","fieldBlockPropsWithoutLabel","forId","fieldBlockProps","isOn","isOff","createElement","_extends","status","undefined","on_change","text","translation","Forms","booleanYes","booleanNo","asFieldset","bottom","Provider","onChange","_supportsSpacingProps"],"sources":["../../../../../../src/extensions/forms/Field/Toggle/Toggle.tsx"],"sourcesContent":["import React, { useContext, useCallback } from 'react'\nimport { Checkbox, ToggleButton } from '../../../../components'\nimport classnames from 'classnames'\nimport ButtonRow from '../../Form/ButtonRow'\nimport FieldBlock from '../../FieldBlock'\nimport { useDataValue } from '../../hooks'\nimport { FieldProps } from '../../types'\nimport { pickSpacingProps } from '../../../../components/flex/utils'\nimport SharedContext from '../../../../shared/Context'\nimport ToggleButtonGroupContext from '../../../../components/toggle-button/ToggleButtonGroupContext'\n\nexport type Props = FieldProps<unknown> & {\n  valueOn: unknown\n  valueOff: unknown\n  variant?: 'checkbox' | 'checkbox-button' | 'button' | 'buttons'\n  textOn?: string\n  textOff?: string\n}\n\nfunction Toggle(props: Props) {\n  const sharedContext = useContext(SharedContext)\n\n  const preparedProps: Props = {\n    ...props,\n    errorMessages: props.errorMessages,\n  }\n\n  const {\n    id,\n    className,\n    valueOn,\n    valueOff,\n    layout,\n    variant,\n    disabled,\n    label,\n    labelDescription,\n    textOn,\n    textOff,\n    value,\n    info,\n    warning,\n    error,\n    hasError,\n    ariaAttributes,\n    handleChange,\n  } = useDataValue(preparedProps)\n\n  const handleCheckboxChange = useCallback(\n    ({ checked }) => {\n      handleChange?.(checked ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n  const handleToggleChange = useCallback(\n    ({ value }) => {\n      handleChange?.(value === 'on' ? valueOn : valueOff)\n    },\n    [handleChange, valueOn, valueOff]\n  )\n\n  const cn = classnames('dnb-forms-field-toggle', className)\n\n  const fieldBlockPropsWithoutLabel = {\n    forId: id,\n    className: cn,\n    ...pickSpacingProps(props),\n    info,\n    warning,\n    error,\n    disabled,\n  }\n\n  const fieldBlockProps = {\n    ...fieldBlockPropsWithoutLabel,\n    layout,\n    label,\n    labelDescription,\n    disabled,\n  }\n\n  const isOn = value === valueOn\n  const isOff = value === valueOff\n\n  switch (variant) {\n    default:\n    case 'checkbox':\n      return (\n        <FieldBlock {...fieldBlockPropsWithoutLabel}>\n          <Checkbox\n            id={id}\n            className={cn}\n            label={label}\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            on_change={handleCheckboxChange}\n            {...ariaAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...ariaAttributes}\n          />\n        </FieldBlock>\n      )\n    case 'buttons':\n      return (\n        <FieldBlock {...fieldBlockProps} asFieldset>\n          <ButtonRow bottom=\"x-small\">\n            <ToggleButtonGroupContext.Provider\n              value={{\n                value: isOn ? 'on' : isOff ? 'off' : null, // use \"null\" to reset the value\n                onChange: handleToggleChange,\n                status: hasError ? 'error' : undefined,\n                disabled,\n              }}\n            >\n              <ToggleButton\n                text={\n                  textOn ?? sharedContext?.translation.Forms.booleanYes\n                }\n                value=\"on\"\n                {...ariaAttributes}\n              />\n              <ToggleButton\n                text={\n                  textOff ?? sharedContext?.translation.Forms.booleanNo\n                }\n                value=\"off\"\n                {...ariaAttributes}\n              />\n            </ToggleButtonGroupContext.Provider>\n          </ButtonRow>\n        </FieldBlock>\n      )\n    case 'checkbox-button':\n      return (\n        <FieldBlock {...fieldBlockProps}>\n          <ToggleButton\n            id={id}\n            variant=\"checkbox\"\n            text={\n              isOn\n                ? textOn ?? sharedContext?.translation.Forms.booleanYes\n                : textOff ?? sharedContext?.translation.Forms.booleanNo\n            }\n            checked={isOn}\n            disabled={disabled}\n            status={hasError ? 'error' : undefined}\n            value={value ? 'true' : 'false'}\n            on_change={handleCheckboxChange}\n            {...ariaAttributes}\n          />\n        </FieldBlock>\n      )\n  }\n}\n\nToggle._supportsSpacingProps = true\nexport default Toggle\n"],"mappings":"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"}

package/extensions/forms/Field/index.d.ts

@@ -15,3 +15,4 @@ export { default as Option } from './Option';
 export { default as SelectCountry } from './SelectCountry';
 export { default as BankAccountNumber } from './BankAccountNumber';
 export { default as Expiry } from './Expiry';
+export { default as Password } from './Password';

package/extensions/forms/Field/index.js

@@ -15,4 +15,5 @@ export { default as Option } from './Option';
 export { default as SelectCountry } from './SelectCountry';
 export { default as BankAccountNumber } from './BankAccountNumber';
 export { default as Expiry } from './Expiry';
+export { default as Password } from './Password';
 //# sourceMappingURL=index.js.map

package/extensions/forms/Field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","String","Number","Toggle","Boolean","Currency","Date","Email","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Expiry"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["export { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Toggle } from './Toggle'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as Selection } from './Selection'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Option } from './Option'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as Expiry } from './Expiry'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,UAAU;AAC5C,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,MAAM,QAAQ,UAAU;AAC5C,SAASH,OAAO,IAAII,OAAO,QAAQ,WAAW;AAC9C,SAASJ,OAAO,IAAIK,QAAQ,QAAQ,YAAY;AAChD,SAASL,OAAO,IAAIM,IAAI,QAAQ,QAAQ;AACxC,SAASN,OAAO,IAAIO,KAAK,QAAQ,SAAS;AAC1C,SAASP,OAAO,IAAIQ,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASR,OAAO,IAAIS,WAAW,QAAQ,eAAe;AACtD,SAAST,OAAO,IAAIU,kBAAkB,QAAQ,sBAAsB;AACpE,SAASV,OAAO,IAAIW,iBAAiB,QAAQ,qBAAqB;AAClE,SAASX,OAAO,IAAIY,SAAS,QAAQ,aAAa;AAClD,SAASZ,OAAO,IAAIa,cAAc,QAAQ,kBAAkB;AAC5D,SAASb,OAAO,IAAIc,MAAM,QAAQ,UAAU;AAC5C,SAASd,OAAO,IAAIe,aAAa,QAAQ,iBAAiB;AAC1D,SAASf,OAAO,IAAIgB,iBAAiB,QAAQ,qBAAqB;AAClE,SAAShB,OAAO,IAAIiB,MAAM,QAAQ,UAAU"}
+{"version":3,"file":"index.js","names":["default","String","Number","Toggle","Boolean","Currency","Date","Email","NationalIdentityNumber","PhoneNumber","OrganizationNumber","PostalCodeAndCity","Selection","ArraySelection","Option","SelectCountry","BankAccountNumber","Expiry","Password"],"sources":["../../../../../src/extensions/forms/Field/index.ts"],"sourcesContent":["export { default as String } from './String'\nexport { default as Number } from './Number'\nexport { default as Toggle } from './Toggle'\nexport { default as Boolean } from './Boolean'\nexport { default as Currency } from './Currency'\nexport { default as Date } from './Date'\nexport { default as Email } from './Email'\nexport { default as NationalIdentityNumber } from './NationalIdentityNumber'\nexport { default as PhoneNumber } from './PhoneNumber'\nexport { default as OrganizationNumber } from './OrganizationNumber'\nexport { default as PostalCodeAndCity } from './PostalCodeAndCity'\nexport { default as Selection } from './Selection'\nexport { default as ArraySelection } from './ArraySelection'\nexport { default as Option } from './Option'\nexport { default as SelectCountry } from './SelectCountry'\nexport { default as BankAccountNumber } from './BankAccountNumber'\nexport { default as Expiry } from './Expiry'\nexport { default as Password } from './Password'\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,MAAM,QAAQ,UAAU;AAC5C,SAASD,OAAO,IAAIE,MAAM,QAAQ,UAAU;AAC5C,SAASF,OAAO,IAAIG,MAAM,QAAQ,UAAU;AAC5C,SAASH,OAAO,IAAII,OAAO,QAAQ,WAAW;AAC9C,SAASJ,OAAO,IAAIK,QAAQ,QAAQ,YAAY;AAChD,SAASL,OAAO,IAAIM,IAAI,QAAQ,QAAQ;AACxC,SAASN,OAAO,IAAIO,KAAK,QAAQ,SAAS;AAC1C,SAASP,OAAO,IAAIQ,sBAAsB,QAAQ,0BAA0B;AAC5E,SAASR,OAAO,IAAIS,WAAW,QAAQ,eAAe;AACtD,SAAST,OAAO,IAAIU,kBAAkB,QAAQ,sBAAsB;AACpE,SAASV,OAAO,IAAIW,iBAAiB,QAAQ,qBAAqB;AAClE,SAASX,OAAO,IAAIY,SAAS,QAAQ,aAAa;AAClD,SAASZ,OAAO,IAAIa,cAAc,QAAQ,kBAAkB;AAC5D,SAASb,OAAO,IAAIc,MAAM,QAAQ,UAAU;AAC5C,SAASd,OAAO,IAAIe,aAAa,QAAQ,iBAAiB;AAC1D,SAASf,OAAO,IAAIgB,iBAAiB,QAAQ,qBAAqB;AAClE,SAAShB,OAAO,IAAIiB,MAAM,QAAQ,UAAU;AAC5C,SAASjB,OAAO,IAAIkB,QAAQ,QAAQ,YAAY"}