@chayns-components/core 5.0.0-beta.410 → 5.0.0-beta.413

package/lib/components/checkbox/Checkbox.d.ts

@@ -3,7 +3,7 @@ export type CheckboxProps = {
     /**
      * Text for checkbox or switch
      */
-    children?: ReactElement;
+    children?: ReactElement | string;
     /**
      * Indicates whether the checkbox or switch is selected
      */

package/lib/components/checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","className","htmlFor","displayName","_default","exports"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                htmlFor={uuid}\n                isChecked={isChecked ?? isActive}\n                isDisabled={isDisabled}\n                shouldShowAsSwitch={shouldShowAsSwitch}\n                lineHeight={lineHeight}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"Checkbox.js","names":["_react","_interopRequireWildcard","require","_uuid","_calculate","_Checkbox","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Checkbox","_ref","children","isChecked","isDisabled","labelClassName","onChange","shouldShowAsSwitch","shouldShowCentered","isActive","setIsActive","useState","handleChange","useCallback","event","target","checked","uuid","useUuid","lineHeight","useMemo","undefined","getHeightOfSingleTextLine","createElement","StyledCheckbox","StyledCheckboxInput","disabled","id","type","StyledCheckboxLabel","className","htmlFor","displayName","_default","exports"],"sources":["../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FC,\n    ReactElement,\n    useCallback,\n    useMemo,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { getHeightOfSingleTextLine } from '../../utils/calculate';\nimport { StyledCheckbox, StyledCheckboxInput, StyledCheckboxLabel } from './Checkbox.styles';\n\nexport type CheckboxProps = {\n    /**\n     * Text for checkbox or switch\n     */\n    children?: ReactElement | string;\n    /**\n     * Indicates whether the checkbox or switch is selected\n     */\n    isChecked?: boolean;\n    /**\n     * Disables the checkbox or switch so it cannot be toggled\n     */\n    isDisabled?: boolean;\n    /**\n     * Classname for the label\n     */\n    labelClassName?: string;\n    /**\n     * Function to be executed if the checked value changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Changes the design to use switch instead of checkbox\n     */\n    shouldShowAsSwitch?: boolean;\n    /**\n     * Whether the Checkbox should be displayed centered to the label or at the top\n     */\n    shouldShowCentered?: boolean;\n};\n\nconst Checkbox: FC<CheckboxProps> = ({\n    children,\n    isChecked,\n    isDisabled,\n    labelClassName,\n    onChange,\n    shouldShowAsSwitch,\n    shouldShowCentered = false,\n}) => {\n    const [isActive, setIsActive] = useState(isChecked ?? false);\n\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            setIsActive(event.target.checked);\n\n            if (typeof onChange === 'function') {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    const uuid = useUuid();\n\n    const lineHeight = useMemo(\n        () => (shouldShowCentered ? undefined : getHeightOfSingleTextLine()),\n        [shouldShowCentered],\n    );\n\n    return (\n        <StyledCheckbox>\n            <StyledCheckboxInput\n                checked={isChecked}\n                disabled={isDisabled}\n                id={uuid}\n                onChange={handleChange}\n                type=\"checkbox\"\n            />\n            <StyledCheckboxLabel\n                className={labelClassName}\n                htmlFor={uuid}\n                isChecked={isChecked ?? isActive}\n                isDisabled={isDisabled}\n                shouldShowAsSwitch={shouldShowAsSwitch}\n                lineHeight={lineHeight}\n            >\n                {children}\n            </StyledCheckboxLabel>\n        </StyledCheckbox>\n    );\n};\n\nCheckbox.displayName = 'Checkbox';\n\nexport default Checkbox;\n"],"mappings":"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"}

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

@@ -56,6 +56,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,6 +23,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     placeholder,
     placeholderElement,
     rightElement,
+    shouldShowOnlyBottomBorder,
     shouldShowClearIcon = false,
     type = 'text',
     value,
@@ -74,7 +75,8 @@ 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, {
     disabled: isDisabled,
     onBlur: onBlur,
@@ -102,6 +104,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 +112,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","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     * 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        },\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                            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

@@ -14,6 +14,10 @@ export type NumberInputProps = {
      * Rules: only two decimal places, one zero before the comma
      */
     isMoneyInput?: boolean;
+    /**
+     * Whether the value should be formatted as a time.
+     */
+    isTimeInput?: boolean;
     /**
      * Limits the number to this value
      */
@@ -25,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
@@ -35,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

@@ -15,12 +15,14 @@ const NumberInput = _ref => {
   let {
     isDecimalInput,
     isMoneyInput,
+    isTimeInput,
     maxNumber = Infinity,
     value,
     placeholder,
     onBlur,
     isDisabled,
     onChange,
+    shouldShowOnlyBottomBorder,
     minNumber = -Infinity
   } = _ref;
   // the plainText will be shown in the input, when it is in focus
@@ -32,6 +34,9 @@ const NumberInput = _ref => {
   const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);
   const onLocalChange = event => {
     const newValue = event.target.value;
+    if (newValue.replaceAll(':', '').length > 4) {
+      return;
+    }
     const sanitizedValueString = newValue
     // Removes everything except numbers, commas and points
     .replace(_number.NUMBER_CLEAR_REGEX, '');
@@ -39,7 +44,8 @@ const NumberInput = _ref => {
     if (!(0, _number2.isValidString)({
       string: valueToCheck,
       isMoneyInput,
-      isDecimalInput
+      isDecimalInput,
+      isTimeInput
     })) {
       return;
     }
@@ -51,17 +57,21 @@ const NumberInput = _ref => {
   const onLocalBlur = () => {
     const sanitizedValue = plainText.length === 0 ? '0' : plainText;
     let isInvalid = false;
-    const parsedNumber = (0, _number2.parseFloatWithDecimals)({
-      stringValue: sanitizedValue.replace(',', '.'),
-      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,
-      isMoneyInput
+      number: isTimeInput ? sanitizedValue : parsedNumber,
+      isMoneyInput,
+      isTimeInput
     });
     setFormattedValue(newStringValue);
     setPlainText(newStringValue.replaceAll('.', ''));
@@ -70,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 = () => {
@@ -88,26 +102,31 @@ const NumberInput = _ref => {
 
   // updates the formattedValue, when the value changes
   (0, _react.useEffect)(() => {
-    const parsedNumber = (0, _number2.parseFloatWithDecimals)({
-      stringValue: plainText.replace(',', '.'),
-      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,
-      isMoneyInput
+      number: isTimeInput ? plainText : parsedNumber,
+      isMoneyInput,
+      isTimeInput
     }));
-  }, [hasFocus, isMoneyInput, maxNumber, minNumber, plainText]);
+  }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);
   (0, _react.useEffect)(() => {
     if (typeof value === 'string') {
       setPlainText(value);
     }
   }, [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","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","valueToCheck","replaceAll","isValidString","string","onLocalBlur","sanitizedValue","length","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     * 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    {\n        isDecimalInput,\n        isMoneyInput,\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\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> =\n        (event) => {\n            const newValue = event.target.value;\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 })) {\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(',', '.'),\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 = plainText.length === 0\n            ? ''\n            : formateNumber({\n                number: parsedNumber,\n                isMoneyInput,\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(',', '.'),\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(plainText.length === 0\n            ? ''\n            : formateNumber({\n                number: parsedNumber,\n                isMoneyInput,\n            }));\n    }, [hasFocus, isMoneyInput, 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/constants/number.d.ts

@@ -2,3 +2,4 @@ export declare const NUMBER_CLEAR_REGEX: RegExp;
 export declare const INTEGER_TEST: RegExp;
 export declare const DECIMAL_TEST: RegExp;
 export declare const MONEY_TEST: RegExp;
+export declare const TIME_TEST: RegExp;

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

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.NUMBER_CLEAR_REGEX = exports.MONEY_TEST = exports.INTEGER_TEST = exports.DECIMAL_TEST = void 0;
-const NUMBER_CLEAR_REGEX = exports.NUMBER_CLEAR_REGEX = /[^\d,.]/gi;
+exports.TIME_TEST = exports.NUMBER_CLEAR_REGEX = exports.MONEY_TEST = exports.INTEGER_TEST = exports.DECIMAL_TEST = void 0;
+const NUMBER_CLEAR_REGEX = exports.NUMBER_CLEAR_REGEX = /[^\d,.:]/gi;
 const INTEGER_TEST = exports.INTEGER_TEST = /^[1-9][0-9]*$/;
 const DECIMAL_TEST = exports.DECIMAL_TEST = /^(0|[1-9][0-9]*)?(\.[0-9]*)?$/;
 const MONEY_TEST = exports.MONEY_TEST = /^(0|[1-9][0-9]*)?(\.[0-9]{0,2})?$/;
+const TIME_TEST = exports.TIME_TEST = /^\d{1,2}(:\d{1,2})?$/;
 //# sourceMappingURL=number.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"number.js","names":["NUMBER_CLEAR_REGEX","exports","INTEGER_TEST","DECIMAL_TEST","MONEY_TEST"],"sources":["../../../../src/components/number-input/constants/number.ts"],"sourcesContent":["export const NUMBER_CLEAR_REGEX = /[^\\d,.]/gi;\nexport const INTEGER_TEST = /^[1-9][0-9]*$/;\nexport const DECIMAL_TEST = /^(0|[1-9][0-9]*)?(\\.[0-9]*)?$/;\nexport const MONEY_TEST = /^(0|[1-9][0-9]*)?(\\.[0-9]{0,2})?$/;\n"],"mappings":";;;;;;AAAO,MAAMA,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,WAAW;AACtC,MAAME,YAAY,GAAAD,OAAA,CAAAC,YAAA,GAAG,eAAe;AACpC,MAAMC,YAAY,GAAAF,OAAA,CAAAE,YAAA,GAAG,+BAA+B;AACpD,MAAMC,UAAU,GAAAH,OAAA,CAAAG,UAAA,GAAG,mCAAmC"}
+{"version":3,"file":"number.js","names":["NUMBER_CLEAR_REGEX","exports","INTEGER_TEST","DECIMAL_TEST","MONEY_TEST","TIME_TEST"],"sources":["../../../../src/components/number-input/constants/number.ts"],"sourcesContent":["export const NUMBER_CLEAR_REGEX = /[^\\d,.:]/gi;\nexport const INTEGER_TEST = /^[1-9][0-9]*$/;\nexport const DECIMAL_TEST = /^(0|[1-9][0-9]*)?(\\.[0-9]*)?$/;\nexport const MONEY_TEST = /^(0|[1-9][0-9]*)?(\\.[0-9]{0,2})?$/;\nexport const TIME_TEST = /^\\d{1,2}(:\\d{1,2})?$/;\n"],"mappings":";;;;;;AAAO,MAAMA,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAG,YAAY;AACvC,MAAME,YAAY,GAAAD,OAAA,CAAAC,YAAA,GAAG,eAAe;AACpC,MAAMC,YAAY,GAAAF,OAAA,CAAAE,YAAA,GAAG,+BAA+B;AACpD,MAAMC,UAAU,GAAAH,OAAA,CAAAG,UAAA,GAAG,mCAAmC;AACtD,MAAMC,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAG,sBAAsB"}

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

@@ -6,15 +6,17 @@ interface ParseFloatWithDecimals {
 }
 export declare const parseFloatWithDecimals: ParseFloatWithDecimals;
 interface FormateNumberOptions {
-    number: number | null;
+    number: number | string | null;
     isMoneyInput?: boolean;
+    isTimeInput?: boolean;
 }
-export declare const formateNumber: ({ number, isMoneyInput }: FormateNumberOptions) => string;
+export declare const formateNumber: ({ number, isMoneyInput, isTimeInput }: FormateNumberOptions) => string;
 interface IsValidString {
     (config: {
         string: string;
         isDecimalInput?: boolean;
         isMoneyInput?: boolean;
+        isTimeInput?: boolean;
     }): boolean;
 }
 export declare const isValidString: IsValidString;

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

@@ -20,8 +20,32 @@ exports.parseFloatWithDecimals = parseFloatWithDecimals;
 const formateNumber = _ref2 => {
   let {
     number,
-    isMoneyInput
+    isMoneyInput,
+    isTimeInput
   } = _ref2;
+  if (isTimeInput && typeof number === 'string') {
+    let hours = 0;
+    let minutes = 0;
+    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 && lastTwoNumbersLength === 1) {
+      minutes = lastTwoNumbers * 10;
+    } else {
+      minutes = lastTwoNumbers > 59 ? 59 : lastTwoNumbers;
+    }
+    const hoursStr = hours < 10 ? `0${hours}` : `${hours}`;
+    const minutesStr = minutes < 10 ? `0${minutes}` : `${minutes}`;
+    return `${hoursStr}:${minutesStr}`;
+  }
   if (typeof number !== 'number') {
     return '';
   }
@@ -37,6 +61,7 @@ const isValidString = _ref3 => {
   let {
     isDecimalInput,
     isMoneyInput,
+    isTimeInput,
     string
   } = _ref3;
   let isValid = false;
@@ -50,9 +75,12 @@ const isValidString = _ref3 => {
   if (isMoneyInput && _number.MONEY_TEST.test(string)) {
     isValid = true;
   }
+  if (isTimeInput && _number.TIME_TEST) {
+    isValid = true;
+  }
 
   // Allows numbers but excludes numbers with leading 0
-  if (!isDecimalInput && !isMoneyInput && _number.INTEGER_TEST.test(string)) {
+  if (!isDecimalInput && !isMoneyInput && !isTimeInput && _number.INTEGER_TEST.test(string)) {
     isValid = true;
   }
   if (string.length === 0) {