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

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

@@ -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';

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

@@ -1 +1 @@
-{"version":3,"file":"OpeningTimes.js","names":["_react","_interopRequireWildcard","require","_OpeningTimes","_Checkbox","_interopRequireDefault","_OpeningInputs","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","OpeningTimes","_ref","openingTimes","weekdays","onChange","newOpeningTimes","setNewOpeningTimes","useState","useEffect","handleCheckBoxChange","id","prevOpeningTimes","map","openingTime","isDisabled","content","useMemo","items","forEach","_ref2","times","weekdayId","weekday","find","weekDay","name","push","createElement","StyledOpeningTimesWrapper","key","isChecked","StyledOpeningTimes","displayName","_default","exports"],"sources":["../../../src/components/opening-times/OpeningTimes.tsx"],"sourcesContent":["import React, { FC, type ReactElement, useEffect, useMemo, useState } from 'react';\nimport { StyledOpeningTimes, StyledOpeningTimesWrapper } from './OpeningTimes.styles';\nimport type { OpeningTime, Weekday } from '../../types/openingTimes';\nimport Checkbox from '../checkbox/Checkbox';\nimport OpeningInputs from './opening-inputs/OpeningInputs';\n\nexport type OpeningTimesProps = {\n    /**\n     * Function to be executed when a time is changed.\n     * @param openingTimes\n     */\n    onChange?: (openingTimes: OpeningTime[]) => void;\n    /**\n     * The opening times corresponding to its weekday.\n     */\n    openingTimes: OpeningTime[];\n    /**\n     * The weekdays that should be displayed.\n     */\n    weekdays: Weekday[];\n};\n\nconst OpeningTimes: FC<OpeningTimesProps> = ({ openingTimes, weekdays, onChange }) => {\n    const [newOpeningTimes, setNewOpeningTimes] = useState<OpeningTime[]>();\n\n    useEffect(() => {\n        setNewOpeningTimes(openingTimes);\n    }, [openingTimes]);\n\n    useEffect(() => {\n        if (newOpeningTimes && typeof onChange === 'function') {\n            onChange(newOpeningTimes);\n        }\n    }, [newOpeningTimes, onChange]);\n\n    const handleCheckBoxChange = (id: string) => {\n        setNewOpeningTimes((prevOpeningTimes) =>\n            (prevOpeningTimes ?? []).map((openingTime) => {\n                if (openingTime.id === id) {\n                    return { ...openingTime, isDisabled: !openingTime.isDisabled };\n                }\n                return openingTime;\n            }),\n        );\n    };\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (!newOpeningTimes) {\n            return items;\n        }\n\n        newOpeningTimes.forEach(({ times, id, weekdayId, isDisabled }) => {\n            const weekday = weekdays.find((weekDay) => weekDay.id === weekdayId)?.name;\n\n            if (!weekday) {\n                return;\n            }\n\n            items.push(\n                <StyledOpeningTimesWrapper key={`openingTimes__${id}`}>\n                    <Checkbox isChecked={!isDisabled} onChange={() => handleCheckBoxChange(id)}>\n                        {weekday}\n                    </Checkbox>\n                    <OpeningInputs times={times} isDisabled={isDisabled} onChange={() => {}} />\n                </StyledOpeningTimesWrapper>,\n            );\n        });\n\n        return items;\n    }, [newOpeningTimes, weekdays]);\n\n    return useMemo(() => <StyledOpeningTimes>{content}</StyledOpeningTimes>, [content]);\n};\n\nOpeningTimes.displayName = 'OpeningTimes';\n\nexport default OpeningTimes;\n"],"mappings":"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"}
+{"version":3,"file":"OpeningTimes.js","names":["_react","_interopRequireWildcard","require","_OpeningTimes","_Checkbox","_interopRequireDefault","_OpeningInputs","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","OpeningTimes","_ref","openingTimes","weekdays","onChange","newOpeningTimes","setNewOpeningTimes","useState","useEffect","handleCheckBoxChange","useCallback","id","prevOpeningTimes","updatedOpeningTimes","map","openingTime","isDisabled","handleChange","newTimes","times","content","useMemo","items","forEach","_ref2","weekdayId","weekday","find","weekDay","name","push","createElement","StyledOpeningTimesWrapper","key","isChecked","StyledOpeningTimes","displayName","_default","exports"],"sources":["../../../src/components/opening-times/OpeningTimes.tsx"],"sourcesContent":["import React, { FC, type ReactElement, useCallback, useEffect, useMemo, useState } from 'react';\nimport { StyledOpeningTimes, StyledOpeningTimesWrapper } from './OpeningTimes.styles';\nimport type { OpeningTime, Time, Weekday } from '../../types/openingTimes';\nimport Checkbox from '../checkbox/Checkbox';\nimport OpeningInputs from './opening-inputs/OpeningInputs';\n\nexport type OpeningTimesProps = {\n    /**\n     * Function to be executed when a time is changed.\n     * @param openingTimes\n     */\n    onChange?: (openingTimes: OpeningTime[]) => void;\n    /**\n     * The opening times corresponding to its weekday.\n     */\n    openingTimes: OpeningTime[];\n    /**\n     * The weekdays that should be displayed.\n     */\n    weekdays: Weekday[];\n};\n\nconst OpeningTimes: FC<OpeningTimesProps> = ({ openingTimes, weekdays, onChange }) => {\n    const [newOpeningTimes, setNewOpeningTimes] = useState<OpeningTime[]>();\n\n    useEffect(() => {\n        setNewOpeningTimes(openingTimes);\n    }, [openingTimes]);\n\n    const handleCheckBoxChange = useCallback(\n        (id: string) => {\n            setNewOpeningTimes((prevOpeningTimes) => {\n                const updatedOpeningTimes = (prevOpeningTimes ?? []).map((openingTime) => {\n                    if (openingTime.id === id) {\n                        return { ...openingTime, isDisabled: !openingTime.isDisabled };\n                    }\n                    return openingTime;\n                });\n\n                if (typeof onChange === 'function') {\n                    onChange(updatedOpeningTimes);\n                }\n\n                return updatedOpeningTimes;\n            });\n        },\n        [onChange],\n    );\n\n    const handleChange = useCallback(\n        (newTimes: Time[], id: string) => {\n            setNewOpeningTimes((prevOpeningTimes) => {\n                const updatedOpeningTimes = (prevOpeningTimes ?? []).map((openingTime) => {\n                    if (openingTime.id === id) {\n                        return { ...openingTime, times: newTimes };\n                    }\n                    return openingTime;\n                });\n\n                if (typeof onChange === 'function') {\n                    onChange(updatedOpeningTimes);\n                }\n\n                return updatedOpeningTimes;\n            });\n        },\n        [onChange],\n    );\n\n    const content = useMemo(() => {\n        const items: ReactElement[] = [];\n\n        if (!newOpeningTimes) {\n            return items;\n        }\n\n        newOpeningTimes.forEach(({ times, id, weekdayId, isDisabled }) => {\n            const weekday = weekdays.find((weekDay) => weekDay.id === weekdayId)?.name;\n\n            if (!weekday) {\n                return;\n            }\n\n            items.push(\n                <StyledOpeningTimesWrapper key={`openingTimes__${id}`}>\n                    <Checkbox isChecked={!isDisabled} onChange={() => handleCheckBoxChange(id)}>\n                        {weekday}\n                    </Checkbox>\n                    <OpeningInputs\n                        id={id}\n                        times={times}\n                        isDisabled={isDisabled}\n                        onChange={(newTimes) => handleChange(newTimes, id)}\n                    />\n                </StyledOpeningTimesWrapper>,\n            );\n        });\n\n        return items;\n    }, [handleChange, handleCheckBoxChange, newOpeningTimes, weekdays]);\n\n    return useMemo(() => <StyledOpeningTimes>{content}</StyledOpeningTimes>, [content]);\n};\n\nOpeningTimes.displayName = 'OpeningTimes';\n\nexport default OpeningTimes;\n"],"mappings":"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"}