@chayns-components/core 5.0.0-beta.412 → 5.0.0-beta.414

package/lib/components/input/Input.d.ts

@@ -8,6 +8,10 @@ export type InputProps = {
      * Icon element to be displayed on the left side of the input field
      */
     iconElement?: ReactNode;
+    /**
+     * The id of the input
+     */
+    id?: string;
     /**
      * Defines the input mode of the input
      */
@@ -56,6 +60,10 @@ export type InputProps = {
      * Value if the input field should be controlled
      */
     value?: string;
+    /**
+     * Whether only the bottom border should be displayed
+     */
+    shouldShowOnlyBottomBorder?: boolean;
     /**
      * If true, the input field is focused when the component is mounted
      */

package/lib/components/input/Input.js

@@ -23,11 +23,13 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     placeholder,
     placeholderElement,
     rightElement,
+    shouldShowOnlyBottomBorder,
     shouldShowClearIcon = false,
     type = 'text',
     value,
     shouldUseAutoFocus = false,
-    isInvalid = false
+    isInvalid = false,
+    id
   } = _ref;
   const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
   const theme = (0, _styledComponents.useTheme)();
@@ -74,8 +76,10 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     isDisabled: isDisabled,
     isInvalid: isInvalid
   }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContentWrapper, {
-    shouldRoundRightCorners: !rightElement
+    shouldRoundRightCorners: !rightElement,
+    shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
   }, iconElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputIconWrapper, null, iconElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, null, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
+    id: id,
     disabled: isDisabled,
     onBlur: onBlur,
     onChange: handleInputFieldChange,
@@ -102,6 +106,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     },
     isInvalid: isInvalid
   }, placeholderElement, placeholder)), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
+    shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
     animate: {
       opacity: hasValue ? 1 : 0
     },
@@ -109,8 +114,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onClick: handleClearIconClick,
     transition: {
       type: 'tween'
-    },
-    isInvalid: isInvalid
+    }
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-times'],
     color: isInvalid ? theme.wrong : undefined

package/lib/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Input","forwardRef","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowClearIcon","type","value","shouldUseAutoFocus","isInvalid","hasValue","setHasValue","useState","theme","useTheme","inputRef","useRef","handleClearIconClick","useCallback","current","target","handleInputFieldChange","event","useImperativeHandle","focus","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputContentWrapper","shouldRoundRightCorners","StyledInputIconWrapper","StyledInputContent","StyledInputField","disabled","autoFocus","StyledMotionInputLabel","animate","fontSize","initial","layout","style","transition","duration","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","undefined","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabel,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactNode;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowClearIcon = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n        },\n        ref\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const theme = useTheme() as Theme;\n        const inputRef = useRef<HTMLInputElement>(null);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange]\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            []\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue) {\n                return { bottom: -8, right: -6 };\n            }\n\n            return { left: 0, top: 0 };\n        }, [hasValue]);\n\n        return (\n            <StyledInput\n                className=\"beta-chayns-input\"\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n            >\n                <StyledInputContentWrapper shouldRoundRightCorners={!rightElement}>\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent>\n                        <StyledInputField\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            isInvalid={isInvalid}\n                        />\n                        <StyledMotionInputLabel\n                            animate={{\n                                fontSize: hasValue ? '10px' : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.3 }}\n                            isInvalid={isInvalid}\n                        >\n                            {placeholderElement}\n                            {placeholder}\n                        </StyledMotionInputLabel>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                            isInvalid={isInvalid}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                </StyledInputContentWrapper>\n                {rightElement && <StyledInputRightElement>{rightElement}</StyledInputRightElement>}\n            </StyledInput>\n        );\n    }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Input","forwardRef","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldShowClearIcon","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","useState","theme","useTheme","inputRef","useRef","handleClearIconClick","useCallback","current","target","handleInputFieldChange","event","useImperativeHandle","focus","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputContentWrapper","shouldRoundRightCorners","StyledInputIconWrapper","StyledInputContent","StyledInputField","disabled","autoFocus","StyledMotionInputLabel","animate","fontSize","initial","layout","style","transition","duration","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","undefined","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabel,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactNode;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldShowClearIcon = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const theme = useTheme() as Theme;\n        const inputRef = useRef<HTMLInputElement>(null);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue) {\n                return { bottom: -8, right: -6 };\n            }\n\n            return { left: 0, top: 0 };\n        }, [hasValue]);\n\n        return (\n            <StyledInput\n                className=\"beta-chayns-input\"\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n            >\n                <StyledInputContentWrapper\n                    shouldRoundRightCorners={!rightElement}\n                    shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                >\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent>\n                        <StyledInputField\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            isInvalid={isInvalid}\n                        />\n                        <StyledMotionInputLabel\n                            animate={{\n                                fontSize: hasValue ? '10px' : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.3 }}\n                            isInvalid={isInvalid}\n                        >\n                            {placeholderElement}\n                            {placeholder}\n                        </StyledMotionInputLabel>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                </StyledInputContentWrapper>\n                {rightElement && <StyledInputRightElement>{rightElement}</StyledInputRightElement>}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/lib/components/input/Input.styles.d.ts

@@ -6,6 +6,7 @@ type StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled' | 'isInvalid'>>;
 export declare const StyledInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputProps>>;
 type StyledInputContentWrapperProps = WithTheme<{
     shouldRoundRightCorners: boolean;
+    shouldShowOnlyBottomBorder?: boolean;
 }>;
 export declare const StyledInputContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputContentWrapperProps>>;
 export declare const StyledInputContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
@@ -277,7 +278,9 @@ export declare const StyledMotionInputLabel: import("styled-components").IStyled
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLLabelElement> | undefined;
     htmlFor?: string | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLLabelElement>, StyledMotionInputLabelProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, keyof import("react").Component<any, {}, any>>;
-type StyledMotionInputClearIconProps = WithTheme<Pick<InputProps, 'isInvalid'>>;
+type StyledMotionInputClearIconProps = WithTheme<{
+    shouldShowOnlyBottomBorder?: boolean;
+}>;
 export declare const StyledMotionInputClearIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
     slot?: string | undefined;
     title?: string | undefined;

package/lib/components/input/Input.styles.js

@@ -44,18 +44,32 @@ const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledCom
     min-height: 42px;
     width: 100%;
     transition: opacity 0.3s ease;
-    border-bottom-left-radius: 3px;
-    border-top-left-radius: 3px;
-        
-        ${_ref5 => {
+
+    ${_ref5 => {
   let {
-    shouldRoundRightCorners
+    shouldRoundRightCorners,
+    shouldShowOnlyBottomBorder,
+    theme
   } = _ref5;
-  return shouldRoundRightCorners && (0, _styledComponents.css)`
-                border-bottom-right-radius: 3px;
-                border-top-right-radius: 3px;
+  if (shouldShowOnlyBottomBorder) {
+    return (0, _styledComponents.css)`
+                border-top: none;
+                border-right: none;
+                border-left: none;
+                background-color: transparent;
+                border-color: ${theme['408']};
+            `;
+  }
+  if (shouldRoundRightCorners) {
+    return (0, _styledComponents.css)`
+                border-radius: 3px;
             `;
-}}}
+  }
+  return (0, _styledComponents.css)`
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+        `;
+}}
 `;
 const StyledInputContent = exports.StyledInputContent = _styledComponents.default.div`
     display: flex;
@@ -96,7 +110,12 @@ const StyledMotionInputLabel = exports.StyledMotionInputLabel = (0, _styledCompo
 `;
 const StyledMotionInputClearIcon = exports.StyledMotionInputClearIcon = (0, _styledComponents.default)(_framerMotion.motion.div)`
     align-items: center;
-    border-left: 1px solid rgba(160, 160, 160, 0.3);
+    border-left: ${_ref8 => {
+  let {
+    shouldShowOnlyBottomBorder
+  } = _ref8;
+  return shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)';
+}};
     cursor: pointer;
     display: flex;
     flex: 0 0 auto;

package/lib/components/input/Input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInput","exports","styled","div","_ref","isDisabled","StyledInputContentWrapper","_ref2","theme","_ref3","isInvalid","wrong","_ref4","_ref5","shouldRoundRightCorners","css","StyledInputContent","StyledInputField","input","_ref6","text","StyledMotionInputLabel","motion","label","_ref7","undefined","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from './Input';\n\ntype StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled' | 'isInvalid'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    display: flex;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{ shouldRoundRightCorners: boolean }>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputProps) => theme['100']};\n    border: 1px solid\n        ${({ theme, isInvalid }: StyledInputProps) =>\n            isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    color: ${({ theme }: StyledInputProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    min-height: 42px;\n    width: 100%;\n    transition: opacity 0.3s ease;\n    border-bottom-left-radius: 3px;\n    border-top-left-radius: 3px;\n        \n        ${({ shouldRoundRightCorners }) =>\n            shouldRoundRightCorners &&\n            css`\n                border-bottom-right-radius: 3px;\n                border-top-right-radius: 3px;\n            `}}\n`;\n\nexport const StyledInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: 8px 10px;\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, isInvalid }: StyledInputFieldProps) =>\n        isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: 100%;\n`;\n\ntype StyledMotionInputLabelProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledMotionInputLabel = styled(motion.label)<StyledMotionInputLabelProps>`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    color: ${({ theme, isInvalid }: StyledMotionInputLabelProps) =>\n        isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInput","exports","styled","div","_ref","isDisabled","StyledInputContentWrapper","_ref2","theme","_ref3","isInvalid","wrong","_ref4","_ref5","shouldRoundRightCorners","shouldShowOnlyBottomBorder","css","StyledInputContent","StyledInputField","input","_ref6","text","StyledMotionInputLabel","motion","label","_ref7","undefined","StyledMotionInputClearIcon","_ref8","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from './Input';\n\ntype StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled' | 'isInvalid'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    display: flex;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    shouldRoundRightCorners: boolean;\n    shouldShowOnlyBottomBorder?: boolean;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputProps) => theme['100']};\n    border: 1px solid\n        ${({ theme, isInvalid }: StyledInputProps) =>\n            isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    color: ${({ theme }: StyledInputProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    min-height: 42px;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ shouldRoundRightCorners, shouldShowOnlyBottomBorder, theme }) => {\n        if (shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if (shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `;\n    }}\n`;\n\nexport const StyledInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: 8px 10px;\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, isInvalid }: StyledInputFieldProps) =>\n        isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: 100%;\n`;\n\ntype StyledMotionInputLabelProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledMotionInputLabel = styled(motion.label)<StyledMotionInputLabelProps>`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    color: ${({ theme, isInvalid }: StyledMotionInputLabelProps) =>\n        isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ shouldShowOnlyBottomBorder }) =>\n        shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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"}

package/lib/components/number-input/NumberInput.d.ts

@@ -29,7 +29,7 @@ export type NumberInputProps = {
     /**
      * Callback function that is called when the input gets out of focus
      */
-    onBlur?: (newNumber: number | null, isInvalid: boolean) => void;
+    onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;
     /**
      * Callback function that is called when the input changes
      * It will pass the text from the input
@@ -39,6 +39,10 @@ export type NumberInputProps = {
      * Placeholder for the input field
      */
     placeholder?: string;
+    /**
+     * Whether only the bottom border should be displayed
+     */
+    shouldShowOnlyBottomBorder?: boolean;
     /**
      * The value, that should be displayed in the input, when it is in focus.
      * You can also pass a stringified number as default value.

package/lib/components/number-input/NumberInput.js

@@ -22,6 +22,7 @@ const NumberInput = _ref => {
     onBlur,
     isDisabled,
     onChange,
+    shouldShowOnlyBottomBorder,
     minNumber = -Infinity
   } = _ref;
   // the plainText will be shown in the input, when it is in focus
@@ -56,16 +57,19 @@ const NumberInput = _ref => {
   const onLocalBlur = () => {
     const sanitizedValue = plainText.length === 0 ? '0' : plainText;
     let isInvalid = false;
-    const parsedNumber = (0, _number2.parseFloatWithDecimals)({
-      stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),
-      decimals: isMoneyInput ? 2 : undefined
-    });
-    if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
-      isInvalid = true;
+    let parsedNumber = null;
+    if (!isTimeInput) {
+      parsedNumber = (0, _number2.parseFloatWithDecimals)({
+        stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),
+        decimals: isMoneyInput ? 2 : undefined
+      });
+      if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
+        isInvalid = true;
+      }
+      setIsValueInvalid(isInvalid);
     }
-    setIsValueInvalid(isInvalid);
     const newStringValue = plainText.length === 0 ? '' : (0, _number2.formateNumber)({
-      number: parsedNumber,
+      number: isTimeInput ? sanitizedValue : parsedNumber,
       isMoneyInput,
       isTimeInput
     });
@@ -76,7 +80,11 @@ const NumberInput = _ref => {
       onChange(newStringValue.replaceAll('.', ''));
     }
     if (typeof onBlur === 'function') {
-      onBlur(parsedNumber === 0 ? null : parsedNumber, isInvalid);
+      if (isTimeInput) {
+        onBlur(newStringValue, isInvalid);
+      } else {
+        onBlur(parsedNumber === 0 ? null : parsedNumber, isInvalid);
+      }
     }
   };
   const onLocalFocus = () => {
@@ -94,17 +102,20 @@ const NumberInput = _ref => {
 
   // updates the formattedValue, when the value changes
   (0, _react.useEffect)(() => {
-    const parsedNumber = (0, _number2.parseFloatWithDecimals)({
-      stringValue: plainText.replace(',', '.').replaceAll(':', ''),
-      decimals: isMoneyInput ? 2 : undefined
-    });
+    let parsedNumber = null;
+    if (!isTimeInput) {
+      parsedNumber = (0, _number2.parseFloatWithDecimals)({
+        stringValue: plainText.replace(',', '.').replaceAll(':', ''),
+        decimals: isMoneyInput ? 2 : undefined
+      });
 
-    // checks, if a given number is invalid, if the input is not in focus
-    if (!hasFocus) {
-      setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);
+      // checks, if a given number is invalid, if the input is not in focus
+      if (!hasFocus) {
+        setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);
+      }
     }
     setFormattedValue(plainText.length === 0 ? '' : (0, _number2.formateNumber)({
-      number: parsedNumber,
+      number: isTimeInput ? plainText : parsedNumber,
       isMoneyInput,
       isTimeInput
     }));
@@ -115,6 +126,7 @@ const NumberInput = _ref => {
     }
   }, [value]);
   return /*#__PURE__*/_react.default.createElement(_Input.default, {
+    shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
     inputMode: "decimal",
     onChange: onLocalChange,
     value: hasFocus ? plainText : formattedValue,

package/lib/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_number","_number2","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","replaceAll","length","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","valueToCheck","isValidString","string","onLocalBlur","sanitizedValue","isInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from './utils/number';\n\nexport type NumberInputProps = {\n    /**\n     * Applies rules for decimal input.\n     * Enables the user to input one zero as number before the comma\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one zero before the comma\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Whether the value should be formatted as a time.\n     */\n    isTimeInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * Limits the number to this value\n     */\n    minNumber?: number;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | null, isInvalid: boolean) => void;\n    /**\n     * Callback function that is called when the input changes\n     * It will pass the text from the input\n     */\n    onChange?: (newValue: string) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * The value, that should be displayed in the input, when it is in focus.\n     * You can also pass a stringified number as default value.\n     * NOTE: If you pass a stringified number, it will be formatted to the selected format\n     */\n    value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    maxNumber = Infinity,\n    value,\n    placeholder,\n    onBlur,\n    isDisabled,\n    onChange,\n    minNumber = -Infinity,\n}) => {\n    // the plainText will be shown in the input, when it is in focus\n    const [plainText, setPlainText] = useState<string>('');\n    // the formattedValue will be shown in the input, when it is not in focus\n    const [formattedValue, setFormattedValue] = useState<string>('');\n    const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n    const [isValueInvalid, setIsValueInvalid] = useState(false);\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        if (newValue.replaceAll(':', '').length > 4) {\n            return;\n        }\n\n        const sanitizedValueString = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '');\n\n        const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n        if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n            return;\n        }\n\n        setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n        if (typeof onChange === 'function') {\n            onChange(sanitizedValueString.replaceAll('.', ','));\n        }\n    };\n\n    const onLocalBlur = () => {\n        const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n        let isInvalid = false;\n\n        const parsedNumber = parseFloatWithDecimals({\n            stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n            decimals: isMoneyInput ? 2 : undefined,\n        });\n\n        if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n            isInvalid = true;\n        }\n\n        setIsValueInvalid(isInvalid);\n\n        const newStringValue =\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  });\n\n        setFormattedValue(newStringValue);\n        setPlainText(newStringValue.replaceAll('.', ''));\n        setHasFocus(false);\n\n        if (typeof onChange === 'function') {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            onBlur(parsedNumber === 0 ? null : parsedNumber, isInvalid);\n        }\n    };\n\n    const onLocalFocus = () => {\n        // formattedValue will be a number string with german number format (e.g. 1.000,00)\n        // It will remove all dots, so that the user can type in the number\n        setPlainText(formattedValue.replaceAll('.', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function') {\n            onChange(formattedValue.replaceAll('.', ''));\n        }\n\n        setIsValueInvalid(false);\n        setHasFocus(true);\n    };\n\n    // updates the formattedValue, when the value changes\n    useEffect(() => {\n        const parsedNumber = parseFloatWithDecimals({\n            stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n            decimals: isMoneyInput ? 2 : undefined,\n        });\n\n        // checks, if a given number is invalid, if the input is not in focus\n        if (!hasFocus) {\n            setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n        }\n\n        setFormattedValue(\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  }),\n        );\n    }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value);\n        }\n    }, [value]);\n\n    return (\n        <Input\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={hasFocus ? plainText : formattedValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onLocalFocus}\n            isDisabled={isDisabled}\n            isInvalid={isValueInvalid}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_number","_number2","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","replaceAll","length","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","valueToCheck","isValidString","string","onLocalBlur","sanitizedValue","isInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from './utils/number';\n\nexport type NumberInputProps = {\n    /**\n     * Applies rules for decimal input.\n     * Enables the user to input one zero as number before the comma\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one zero before the comma\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Whether the value should be formatted as a time.\n     */\n    isTimeInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * Limits the number to this value\n     */\n    minNumber?: number;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n    /**\n     * Callback function that is called when the input changes\n     * It will pass the text from the input\n     */\n    onChange?: (newValue: string) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * The value, that should be displayed in the input, when it is in focus.\n     * You can also pass a stringified number as default value.\n     * NOTE: If you pass a stringified number, it will be formatted to the selected format\n     */\n    value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    maxNumber = Infinity,\n    value,\n    placeholder,\n    onBlur,\n    isDisabled,\n    onChange,\n    shouldShowOnlyBottomBorder,\n    minNumber = -Infinity,\n}) => {\n    // the plainText will be shown in the input, when it is in focus\n    const [plainText, setPlainText] = useState<string>('');\n    // the formattedValue will be shown in the input, when it is not in focus\n    const [formattedValue, setFormattedValue] = useState<string>('');\n    const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n    const [isValueInvalid, setIsValueInvalid] = useState(false);\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        if (newValue.replaceAll(':', '').length > 4) {\n            return;\n        }\n\n        const sanitizedValueString = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '');\n\n        const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n        if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n            return;\n        }\n\n        setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n        if (typeof onChange === 'function') {\n            onChange(sanitizedValueString.replaceAll('.', ','));\n        }\n    };\n\n    const onLocalBlur = () => {\n        const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n        let isInvalid = false;\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n                isInvalid = true;\n            }\n\n            setIsValueInvalid(isInvalid);\n        }\n\n        const newStringValue =\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: isTimeInput ? sanitizedValue : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  });\n\n        setFormattedValue(newStringValue);\n        setPlainText(newStringValue.replaceAll('.', ''));\n        setHasFocus(false);\n\n        if (typeof onChange === 'function') {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            if (isTimeInput) {\n                onBlur(newStringValue, isInvalid);\n            } else {\n                onBlur(parsedNumber === 0 ? null : parsedNumber, isInvalid);\n            }\n        }\n    };\n\n    const onLocalFocus = () => {\n        // formattedValue will be a number string with german number format (e.g. 1.000,00)\n        // It will remove all dots, so that the user can type in the number\n        setPlainText(formattedValue.replaceAll('.', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function') {\n            onChange(formattedValue.replaceAll('.', ''));\n        }\n\n        setIsValueInvalid(false);\n        setHasFocus(true);\n    };\n\n    // updates the formattedValue, when the value changes\n    useEffect(() => {\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            // checks, if a given number is invalid, if the input is not in focus\n            if (!hasFocus) {\n                setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n            }\n        }\n\n        setFormattedValue(\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: isTimeInput ? plainText : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  }),\n        );\n    }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value);\n        }\n    }, [value]);\n\n    return (\n        <Input\n            shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={hasFocus ? plainText : formattedValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onLocalFocus}\n            isDisabled={isDisabled}\n            isInvalid={isValueInvalid}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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"}

package/lib/components/number-input/utils/number.d.ts

@@ -6,7 +6,7 @@ interface ParseFloatWithDecimals {
 }
 export declare const parseFloatWithDecimals: ParseFloatWithDecimals;
 interface FormateNumberOptions {
-    number: number | null;
+    number: number | string | null;
     isMoneyInput?: boolean;
     isTimeInput?: boolean;
 }

package/lib/components/number-input/utils/number.js

@@ -23,16 +23,21 @@ const formateNumber = _ref2 => {
     isMoneyInput,
     isTimeInput
   } = _ref2;
-  if (typeof number !== 'number') {
-    return '';
-  }
-  if (isTimeInput) {
+  if (isTimeInput && typeof number === 'string') {
     let hours = 0;
     let minutes = 0;
-    const firstTwoNumbers = Number(String(number).substring(0, 2));
-    const lastTwoNumbers = Number(String(number).substring(2, 4));
+    const firstTwoNumbers = Number(number.substring(0, 2));
+    let lastTwoNumbers = 0;
+    let lastTwoNumbersLength = 0;
+    if (number.includes(':')) {
+      lastTwoNumbers = Number(number.substring(3, 5));
+      lastTwoNumbersLength = number.substring(3, 5).length;
+    } else {
+      lastTwoNumbers = Number(number.substring(2, 4));
+      lastTwoNumbersLength = number.substring(2, 4).length;
+    }
     hours = firstTwoNumbers > 23 ? 23 : firstTwoNumbers;
-    if (lastTwoNumbers < 7) {
+    if (lastTwoNumbers < 7 && lastTwoNumbersLength === 1) {
       minutes = lastTwoNumbers * 10;
     } else {
       minutes = lastTwoNumbers > 59 ? 59 : lastTwoNumbers;
@@ -41,6 +46,9 @@ const formateNumber = _ref2 => {
     const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;
     return `${hoursStr}:${minutesStr}`;
   }
+  if (typeof number !== 'number') {
+    return '';
+  }
   return number.toLocaleString('de-DE', {
     useGrouping: true,
     minimumFractionDigits: isMoneyInput ? 2 : undefined,

package/lib/components/number-input/utils/number.js.map

@@ -1 +1 @@
-{"version":3,"file":"number.js","names":["_number","require","parseFloatWithDecimals","_ref","stringValue","decimals","parsed","parseFloat","toFixed","exports","formateNumber","_ref2","number","isMoneyInput","isTimeInput","hours","minutes","firstTwoNumbers","Number","String","substring","lastTwoNumbers","hoursStr","minutesStr","toLocaleString","useGrouping","minimumFractionDigits","undefined","maximumFractionDigits","maximumSignificantDigits","isValidString","_ref3","isDecimalInput","string","isValid","DECIMAL_TEST","test","MONEY_TEST","TIME_TEST","INTEGER_TEST","length"],"sources":["../../../../src/components/number-input/utils/number.ts"],"sourcesContent":["import { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, TIME_TEST } from '../constants/number';\n\ninterface ParseFloatWithDecimals {\n    ({ stringValue, decimals }: { stringValue: string; decimals?: number }): number;\n}\n\nexport const parseFloatWithDecimals: ParseFloatWithDecimals = ({ stringValue, decimals }) => {\n    const parsed = parseFloat(stringValue);\n\n    if (decimals) {\n        return parseFloat(parsed.toFixed(decimals));\n    }\n\n    return parsed;\n};\n\ninterface FormateNumberOptions {\n    number: number | null;\n    isMoneyInput?: boolean;\n    isTimeInput?: boolean;\n}\n\nexport const formateNumber = ({ number, isMoneyInput, isTimeInput }: FormateNumberOptions) => {\n    if (typeof number !== 'number') {\n        return '';\n    }\n\n    if (isTimeInput) {\n        let hours = 0;\n        let minutes = 0;\n\n        const firstTwoNumbers = Number(String(number).substring(0, 2));\n        const lastTwoNumbers = Number(String(number).substring(2, 4));\n\n        hours = firstTwoNumbers > 23 ? 23 : firstTwoNumbers;\n        if (lastTwoNumbers < 7) {\n            minutes = lastTwoNumbers * 10;\n        } else {\n            minutes = lastTwoNumbers > 59 ? 59 : lastTwoNumbers;\n        }\n\n        const hoursStr = hours < 10 ? `0${hours}` : `${hours}`;\n        const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;\n\n        return `${hoursStr}:${minutesStr}`;\n    }\n\n    return number.toLocaleString('de-DE', {\n        useGrouping: true,\n        minimumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumSignificantDigits: !isMoneyInput ? 20 : undefined,\n    });\n};\n\ninterface IsValidString {\n    (config: {\n        string: string;\n        isDecimalInput?: boolean;\n        isMoneyInput?: boolean;\n        isTimeInput?: boolean;\n    }): boolean;\n}\n\nexport const isValidString: IsValidString = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    string,\n}) => {\n    let isValid = false;\n\n    // Allows numbers, one (comma/point) and any number of decimal places\n    if (isDecimalInput && DECIMAL_TEST.test(string)) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (isMoneyInput && MONEY_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (isTimeInput && TIME_TEST) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (!isDecimalInput && !isMoneyInput && !isTimeInput && INTEGER_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (string.length === 0) {\n        isValid = true;\n    }\n\n    return isValid;\n};\n"],"mappings":"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"}
+{"version":3,"file":"number.js","names":["_number","require","parseFloatWithDecimals","_ref","stringValue","decimals","parsed","parseFloat","toFixed","exports","formateNumber","_ref2","number","isMoneyInput","isTimeInput","hours","minutes","firstTwoNumbers","Number","substring","lastTwoNumbers","lastTwoNumbersLength","includes","length","hoursStr","minutesStr","toLocaleString","useGrouping","minimumFractionDigits","undefined","maximumFractionDigits","maximumSignificantDigits","isValidString","_ref3","isDecimalInput","string","isValid","DECIMAL_TEST","test","MONEY_TEST","TIME_TEST","INTEGER_TEST"],"sources":["../../../../src/components/number-input/utils/number.ts"],"sourcesContent":["import { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, TIME_TEST } from '../constants/number';\n\ninterface ParseFloatWithDecimals {\n    ({ stringValue, decimals }: { stringValue: string; decimals?: number }): number;\n}\n\nexport const parseFloatWithDecimals: ParseFloatWithDecimals = ({ stringValue, decimals }) => {\n    const parsed = parseFloat(stringValue);\n\n    if (decimals) {\n        return parseFloat(parsed.toFixed(decimals));\n    }\n\n    return parsed;\n};\n\ninterface FormateNumberOptions {\n    number: number | string | null;\n    isMoneyInput?: boolean;\n    isTimeInput?: boolean;\n}\n\nexport const formateNumber = ({ number, isMoneyInput, isTimeInput }: FormateNumberOptions) => {\n    if (isTimeInput && typeof number === 'string') {\n        let hours = 0;\n        let minutes = 0;\n\n        const firstTwoNumbers = Number(number.substring(0, 2));\n        let lastTwoNumbers = 0;\n        let lastTwoNumbersLength = 0;\n\n        if (number.includes(':')) {\n            lastTwoNumbers = Number(number.substring(3, 5));\n            lastTwoNumbersLength = number.substring(3, 5).length;\n        } else {\n            lastTwoNumbers = Number(number.substring(2, 4));\n            lastTwoNumbersLength = number.substring(2, 4).length;\n        }\n\n        hours = firstTwoNumbers > 23 ? 23 : firstTwoNumbers;\n\n        if (lastTwoNumbers < 7 && lastTwoNumbersLength === 1) {\n            minutes = lastTwoNumbers * 10;\n        } else {\n            minutes = lastTwoNumbers > 59 ? 59 : lastTwoNumbers;\n        }\n\n        const hoursStr = hours < 10 ? `0${hours}` : `${hours}`;\n        const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;\n\n        return `${hoursStr}:${minutesStr}`;\n    }\n\n    if (typeof number !== 'number') {\n        return '';\n    }\n\n    return number.toLocaleString('de-DE', {\n        useGrouping: true,\n        minimumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumFractionDigits: isMoneyInput ? 2 : undefined,\n        maximumSignificantDigits: !isMoneyInput ? 20 : undefined,\n    });\n};\n\ninterface IsValidString {\n    (config: {\n        string: string;\n        isDecimalInput?: boolean;\n        isMoneyInput?: boolean;\n        isTimeInput?: boolean;\n    }): boolean;\n}\n\nexport const isValidString: IsValidString = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    string,\n}) => {\n    let isValid = false;\n\n    // Allows numbers, one (comma/point) and any number of decimal places\n    if (isDecimalInput && DECIMAL_TEST.test(string)) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (isMoneyInput && MONEY_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (isTimeInput && TIME_TEST) {\n        isValid = true;\n    }\n\n    // Allows numbers but excludes numbers with leading 0\n    if (!isDecimalInput && !isMoneyInput && !isTimeInput && INTEGER_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (string.length === 0) {\n        isValid = true;\n    }\n\n    return isValid;\n};\n"],"mappings":"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"}

package/lib/components/opening-times/OpeningTimes.js

@@ -21,22 +21,40 @@ const OpeningTimes = _ref => {
   (0, _react.useEffect)(() => {
     setNewOpeningTimes(openingTimes);
   }, [openingTimes]);
-  (0, _react.useEffect)(() => {
-    if (newOpeningTimes && typeof onChange === 'function') {
-      onChange(newOpeningTimes);
-    }
-  }, [newOpeningTimes, onChange]);
-  const handleCheckBoxChange = id => {
-    setNewOpeningTimes(prevOpeningTimes => (prevOpeningTimes ?? []).map(openingTime => {
-      if (openingTime.id === id) {
-        return {
-          ...openingTime,
-          isDisabled: !openingTime.isDisabled
-        };
+  const handleCheckBoxChange = (0, _react.useCallback)(id => {
+    setNewOpeningTimes(prevOpeningTimes => {
+      const updatedOpeningTimes = (prevOpeningTimes ?? []).map(openingTime => {
+        if (openingTime.id === id) {
+          return {
+            ...openingTime,
+            isDisabled: !openingTime.isDisabled
+          };
+        }
+        return openingTime;
+      });
+      if (typeof onChange === 'function') {
+        onChange(updatedOpeningTimes);
       }
-      return openingTime;
-    }));
-  };
+      return updatedOpeningTimes;
+    });
+  }, [onChange]);
+  const handleChange = (0, _react.useCallback)((newTimes, id) => {
+    setNewOpeningTimes(prevOpeningTimes => {
+      const updatedOpeningTimes = (prevOpeningTimes ?? []).map(openingTime => {
+        if (openingTime.id === id) {
+          return {
+            ...openingTime,
+            times: newTimes
+          };
+        }
+        return openingTime;
+      });
+      if (typeof onChange === 'function') {
+        onChange(updatedOpeningTimes);
+      }
+      return updatedOpeningTimes;
+    });
+  }, [onChange]);
   const content = (0, _react.useMemo)(() => {
     const items = [];
     if (!newOpeningTimes) {
@@ -59,13 +77,14 @@ const OpeningTimes = _ref => {
         isChecked: !isDisabled,
         onChange: () => handleCheckBoxChange(id)
       }, weekday), /*#__PURE__*/_react.default.createElement(_OpeningInputs.default, {
+        id: id,
         times: times,
         isDisabled: isDisabled,
-        onChange: () => {}
+        onChange: newTimes => handleChange(newTimes, id)
       })));
     });
     return items;
-  }, [newOpeningTimes, weekdays]);
+  }, [handleChange, handleCheckBoxChange, newOpeningTimes, weekdays]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_OpeningTimes.StyledOpeningTimes, null, content), [content]);
 };
 OpeningTimes.displayName = 'OpeningTimes';