@chayns-components/core 5.0.0-beta.271 → 5.0.0-beta.273

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

@@ -56,6 +56,10 @@ export type InputProps = {
      * If true, the input field is focused when the component is mounted
      */
     shouldUseAutoFocus?: boolean;
+    /**
+     * If true, the input field is marked as invalid
+     */
+    isInvalid?: boolean;
 };
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export default Input;

package/lib/components/input/Input.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _Input = require("./Input.styles");
+var _styledComponents = require("styled-components");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -24,9 +25,11 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     shouldShowClearIcon = false,
     type = 'text',
     value,
-    shouldUseAutoFocus = false
+    shouldUseAutoFocus = false,
+    isInvalid = false
   } = _ref;
   const [hasValue, setHasValue] = (0, _react.useState)(typeof value === 'string' && value !== '');
+  const theme = (0, _styledComponents.useTheme)();
   const inputRef = (0, _react.useRef)(null);
   const handleClearIconClick = (0, _react.useCallback)(() => {
     if (inputRef.current) {
@@ -69,7 +72,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, [hasValue]);
   return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
     className: "beta-chayns-input",
-    isDisabled: isDisabled
+    isDisabled: isDisabled,
+    isInvalid: isInvalid
   }, 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,
@@ -80,7 +84,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     type: type,
     value: value,
     autoFocus: shouldUseAutoFocus,
-    inputMode: inputMode
+    inputMode: inputMode,
+    isInvalid: isInvalid
   }), /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputLabel, {
     animate: {
       scale: hasValue ? 0.6 : 1
@@ -92,7 +97,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     },
     transition: {
       type: 'tween'
-    }
+    },
+    isInvalid: isInvalid
   }, placeholderElement, placeholder)), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
     animate: {
       opacity: hasValue ? 1 : 0
@@ -101,9 +107,11 @@ 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']
+    icons: ['fa fa-times'],
+    color: isInvalid ? theme.wrong : undefined
   })));
 });
 Input.displayName = 'Input';

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Input","forwardRef","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","shouldShowClearIcon","type","value","shouldUseAutoFocus","hasValue","setHasValue","useState","inputRef","useRef","handleClearIconClick","useCallback","current","target","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputIconWrapper","StyledInputContent","StyledInputField","disabled","autoFocus","StyledMotionInputLabel","animate","scale","initial","layout","style","transition","StyledMotionInputClearIcon","opacity","onClick","icons","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 Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputField,\n    StyledInputIconWrapper,\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     * 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\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            shouldShowClearIcon = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n        },\n        ref\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n\n        const inputRef = useRef<HTMLInputElement>(null);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\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 className=\"beta-chayns-input\" isDisabled={isDisabled}>\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                    />\n                    <StyledMotionInputLabel\n                        animate={{ scale: hasValue ? 0.6 : 1 }}\n                        initial={false}\n                        layout\n                        style={{ ...labelPosition }}\n                        transition={{ type: 'tween' }}\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                    >\n                        <Icon icons={['fa fa-times']} />\n                    </StyledMotionInputClearIcon>\n                )}\n            </StyledInput>\n        );\n    }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAeA,IAAAC,KAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,MAAA,GAAAH,OAAA;AAOwB,SAAAE,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAT,wBAAAK,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAwExB,MAAMW,KAAK,gBAAG,IAAAC,iBAAU,EACpB,CAAAC,IAAA,EAgBIC,GAAG,KACF;EAAA,IAhBD;IACIC,WAAW;IACXC,SAAS;IACTC,UAAU;IACVC,MAAM;IACNC,QAAQ;IACRC,OAAO;IACPC,SAAS;IACTC,WAAW;IACXC,kBAAkB;IAClBC,mBAAmB,GAAG,KAAK;IAC3BC,IAAI,GAAG,MAAM;IACbC,KAAK;IACLC,kBAAkB,GAAG;EACzB,CAAC,GAAAd,IAAA;EAGD,MAAM,CAACe,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAC,eAAQ,EAAC,OAAOJ,KAAK,KAAK,QAAQ,IAAIA,KAAK,KAAK,EAAE,CAAC;EAEnF,MAAMK,QAAQ,GAAG,IAAAC,aAAM,EAAmB,IAAI,CAAC;EAE/C,MAAMC,oBAAoB,GAAG,IAAAC,kBAAW,EAAC,MAAM;IAC3C,IAAIH,QAAQ,CAACI,OAAO,EAAE;MAClBJ,QAAQ,CAACI,OAAO,CAACT,KAAK,GAAG,EAAE;MAE3B,IAAI,OAAOP,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC;UAAEiB,MAAM,EAAEL,QAAQ,CAACI;QAAQ,CAAkC,CAAC;MAC3E;IACJ;EACJ,CAAC,EAAE,CAAChB,QAAQ,CAAC,CAAC;EAEd,MAAMkB,sBAAsB,GAAG,IAAAH,kBAAW,EACrCI,KAAoC,IAAK;IACtCT,WAAW,CAACS,KAAK,CAACF,MAAM,CAACV,KAAK,KAAK,EAAE,CAAC;IAEtC,IAAI,OAAOP,QAAQ,KAAK,UAAU,EAAE;MAChCA,QAAQ,CAACmB,KAAK,CAAC;IACnB;EACJ,CAAC,EACD,CAACnB,QAAQ,CACb,CAAC;EAED,IAAAoB,0BAAmB,EACfzB,GAAG,EACH,OAAO;IACH0B,KAAK,EAAEA,CAAA;MAAA,IAAAC,iBAAA;MAAA,QAAAA,iBAAA,GAAMV,QAAQ,CAACI,OAAO,cAAAM,iBAAA,uBAAhBA,iBAAA,CAAkBD,KAAK,CAAC,CAAC;IAAA;EAC1C,CAAC,CAAC,EACF,EACJ,CAAC;EAED,IAAAE,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAOhB,KAAK,KAAK,QAAQ,EAAE;MAC3BG,WAAW,CAACH,KAAK,KAAK,EAAE,CAAC;IAC7B;EACJ,CAAC,EAAE,CAACA,KAAK,CAAC,CAAC;EAEX,MAAMiB,aAAa,GAAG,IAAAC,cAAO,EAAC,MAAM;IAChC,IAAIhB,QAAQ,EAAE;MACV,OAAO;QAAEiB,MAAM,EAAE,CAAC,CAAC;QAAEC,KAAK,EAAE,CAAC;MAAE,CAAC;IACpC;IAEA,OAAO;MAAEC,IAAI,EAAE,CAAC;MAAEC,GAAG,EAAE;IAAE,CAAC;EAC9B,CAAC,EAAE,CAACpB,QAAQ,CAAC,CAAC;EAEd,oBACI7C,MAAA,CAAAQ,OAAA,CAAA0D,aAAA,CAAC7D,MAAA,CAAA8D,WAAW;IAACC,SAAS,EAAC,mBAAmB;IAAClC,UAAU,EAAEA;EAAW,GAC7DF,WAAW,iBAAIhC,MAAA,CAAAQ,OAAA,CAAA0D,aAAA,CAAC7D,MAAA,CAAAgE,sBAAsB,QAAErC,WAAoC,CAAC,eAC9EhC,MAAA,CAAAQ,OAAA,CAAA0D,aAAA,CAAC7D,MAAA,CAAAiE,kBAAkB,qBACftE,MAAA,CAAAQ,OAAA,CAAA0D,aAAA,CAAC7D,MAAA,CAAAkE,gBAAgB;IACbC,QAAQ,EAAEtC,UAAW;IACrBC,MAAM,EAAEA,MAAO;IACfC,QAAQ,EAAEkB,sBAAuB;IACjCjB,OAAO,EAAEA,OAAQ;IACjBC,SAAS,EAAEA,SAAU;IACrBP,GAAG,EAAEiB,QAAS;IACdN,IAAI,EAAEA,IAAK;IACXC,KAAK,EAAEA,KAAM;IACb8B,SAAS,EAAE7B,kBAAmB;IAC9BX,SAAS,EAAEA;EAAU,CACxB,CAAC,eACFjC,MAAA,CAAAQ,OAAA,CAAA0D,aAAA,CAAC7D,MAAA,CAAAqE,sBAAsB;IACnBC,OAAO,EAAE;MAAEC,KAAK,EAAE/B,QAAQ,GAAG,GAAG,GAAG;IAAE,CAAE;IACvCgC,OAAO,EAAE,KAAM;IACfC,MAAM;IACNC,KAAK,EAAE;MAAE,GAAGnB;IAAc,CAAE;IAC5BoB,UAAU,EAAE;MAAEtC,IAAI,EAAE;IAAQ;EAAE,GAE7BF,kBAAkB,EAClBD,WACmB,CACR,CAAC,EACpBE,mBAAmB,iBAChBzC,MAAA,CAAAQ,OAAA,CAAA0D,aAAA,CAAC7D,MAAA,CAAA4E,0BAA0B;IACvBN,OAAO,EAAE;MAAEO,OAAO,EAAErC,QAAQ,GAAG,CAAC,GAAG;IAAE,CAAE;IACvCgC,OAAO,EAAE,KAAM;IACfM,OAAO,EAAEjC,oBAAqB;IAC9B8B,UAAU,EAAE;MAAEtC,IAAI,EAAE;IAAQ;EAAE,gBAE9B1C,MAAA,CAAAQ,OAAA,CAAA0D,aAAA,CAAC/D,KAAA,CAAAK,OAAI;IAAC4E,KAAK,EAAE,CAAC,aAAa;EAAE,CAAE,CACP,CAEvB,CAAC;AAEtB,CACJ,CAAC;AAEDxD,KAAK,CAACyD,WAAW,GAAG,OAAO;AAAC,IAAAC,QAAA,GAEb1D,KAAK;AAAA2D,OAAA,CAAA/E,OAAA,GAAA8E,QAAA"}
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_Icon","_interopRequireDefault","_Input","_styledComponents","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","Input","forwardRef","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","shouldShowClearIcon","type","value","shouldUseAutoFocus","isInvalid","hasValue","setHasValue","useState","theme","useTheme","inputRef","useRef","handleClearIconClick","useCallback","current","target","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputIconWrapper","StyledInputContent","StyledInputField","disabled","autoFocus","StyledMotionInputLabel","animate","scale","initial","layout","style","transition","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","undefined","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 Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabel,\n} from './Input.styles';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { useTheme } from 'styled-components';\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     * 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            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                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 className=\"beta-chayns-input\" isDisabled={isDisabled} isInvalid={isInvalid}>\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={{ scale: hasValue ? 0.6 : 1 }}\n                        initial={false}\n                        layout\n                        style={{ ...labelPosition }}\n                        transition={{ type: 'tween' }}\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 icons={['fa fa-times']} color={isInvalid ? theme.wrong : undefined}/>\n                    </StyledMotionInputClearIcon>\n                )}\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

@@ -1,9 +1,15 @@
 import type { InputProps } from './Input';
-export declare const StyledInput: import("styled-components").StyledComponent<"div", any, Pick<InputProps, "isDisabled"> & {
+export declare const StyledInput: import("styled-components").StyledComponent<"div", any, Pick<InputProps, "isDisabled" | "isInvalid"> & {
     theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
 }, never>;
 export declare const StyledInputContent: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const StyledInputField: import("styled-components").StyledComponent<"input", any, {}, never>;
-export declare const StyledMotionInputLabel: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, any, {}, never>;
-export declare const StyledMotionInputClearIcon: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledInputField: import("styled-components").StyledComponent<"input", any, Pick<InputProps, "isInvalid"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMotionInputLabel: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLLabelElement, import("framer-motion").HTMLMotionProps<"label">>, any, Pick<InputProps, "isInvalid"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMotionInputClearIcon: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, Pick<InputProps, "isInvalid"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
 export declare const StyledInputIconWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -15,21 +15,27 @@ const StyledInput = _styledComponents.default.div`
   } = _ref;
   return theme['100'];
 }};
-    border: 1px solid rgba(160, 160, 160, 0.3);
+    border: 1px solid ${_ref2 => {
+  let {
+    theme,
+    isInvalid
+  } = _ref2;
+  return isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
+}};
     border-radius: 3px;
-    color: ${_ref2 => {
+    color: ${_ref3 => {
   let {
     theme
-  } = _ref2;
+  } = _ref3;
   return theme['006'];
 }};
     display: flex;
     justify-content: space-between;
     min-height: 42px;
-    opacity: ${_ref3 => {
+    opacity: ${_ref4 => {
   let {
     isDisabled
-  } = _ref3;
+  } = _ref4;
   return isDisabled ? 0.5 : 1;
 }};
     transition: opacity 0.3s ease;
@@ -47,11 +53,12 @@ exports.StyledInputContent = StyledInputContent;
 const StyledInputField = _styledComponents.default.input`
     background: none;
     border: none;
-    color: ${_ref4 => {
+    color: ${_ref5 => {
   let {
-    theme
-  } = _ref4;
-  return theme.text;
+    theme,
+    isInvalid
+  } = _ref5;
+  return isInvalid ? theme.wrong : theme.text;
 }};
     padding: 0;
     width: 100%;
@@ -66,17 +73,18 @@ const StyledMotionInputLabel = (0, _styledComponents.default)(_framerMotion.moti
     pointer-events: none;
     position: absolute;
     user-select: none;
+    color: ${_ref6 => {
+  let {
+    theme,
+    isInvalid
+  } = _ref6;
+  return isInvalid ? theme.wrong : undefined;
+}}
 `;
 exports.StyledMotionInputLabel = StyledMotionInputLabel;
 const StyledMotionInputClearIcon = (0, _styledComponents.default)(_framerMotion.motion.div)`
     align-items: center;
     border-left: 1px solid rgba(160, 160, 160, 0.3);
-    color: ${_ref5 => {
-  let {
-    theme
-  } = _ref5;
-  return theme.headline;
-}};
     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","_interopRequireDefault","obj","__esModule","default","StyledInput","styled","div","_ref","theme","_ref2","_ref3","isDisabled","exports","StyledInputContent","StyledInputField","input","_ref4","text","StyledMotionInputLabel","motion","label","StyledMotionInputClearIcon","_ref5","headline","StyledInputIconWrapper"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from './Input';\n\ntype StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputProps) => theme['100']};\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    border-radius: 3px;\n    color: ${({ theme }: StyledInputProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    transition: opacity 0.3s ease;\n    width: 100%;\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\nexport const StyledInputField = styled.input`\n    background: none;\n    border: none;\n    color: ${({ theme }: StyledInputProps) => theme.text};\n    padding: 0;\n    width: 100%;\n`;\n\nexport const StyledMotionInputLabel = styled(motion.label)`\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`;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)`\n    align-items: center;\n    border-left: 1px solid rgba(160, 160, 160, 0.3);\n    color: ${({ theme }: StyledInputProps) => theme.headline};\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"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMhC,MAAMG,WAAW,GAAGC,yBAAM,CAACC,GAAsB;AACxD;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAED;EAAwB,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,eAAeE,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA,CAAC;AAACC,OAAA,CAAAR,WAAA,GAAAA,WAAA;AAEK,MAAMS,kBAAkB,GAAGR,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CAAC;AAACM,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAEK,MAAMC,gBAAgB,GAAGT,yBAAM,CAACU,KAAM;AAC7C;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAER;EAAwB,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAACS,IAAI;AAAA,CAAC;AACzD;AACA;AACA,CAAC;AAACL,OAAA,CAAAE,gBAAA,GAAAA,gBAAA;AAEK,MAAMI,sBAAsB,GAAG,IAAAb,yBAAM,EAACc,oBAAM,CAACC,KAAK,CAAE;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACR,OAAA,CAAAM,sBAAA,GAAAA,sBAAA;AAEK,MAAMG,0BAA0B,GAAG,IAAAhB,yBAAM,EAACc,oBAAM,CAACb,GAAG,CAAE;AAC7D;AACA;AACA,aAAagB,KAAA;EAAA,IAAC;IAAEd;EAAwB,CAAC,GAAAc,KAAA;EAAA,OAAKd,KAAK,CAACe,QAAQ;AAAA,CAAC;AAC7D;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACX,OAAA,CAAAS,0BAAA,GAAAA,0BAAA;AAEK,MAAMG,sBAAsB,GAAGnB,yBAAM,CAACC,GAAI;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACM,OAAA,CAAAY,sBAAA,GAAAA,sBAAA"}
+{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledInput","styled","div","_ref","theme","_ref2","isInvalid","wrong","_ref3","_ref4","isDisabled","exports","StyledInputContent","StyledInputField","input","_ref5","text","StyledMotionInputLabel","motion","label","_ref6","undefined","StyledMotionInputClearIcon","StyledInputIconWrapper"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled 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    align-items: center;\n    background-color: ${({ theme }: StyledInputProps) => theme['100']};\n    border: 1px solid ${({theme, isInvalid}:StyledInputProps ) => isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    border-radius: 3px;\n    color: ${({ theme }: StyledInputProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    transition: opacity 0.3s ease;\n    width: 100%;\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) => 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)=> 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"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMhC,MAAMG,WAAW,GAAGC,yBAAM,CAACC,GAAsB;AACxD;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtE,wBAAwBC,KAAA;EAAA,IAAC;IAACD,KAAK;IAAEE;EAA0B,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,0BAA0B;AAAA,CAAC;AACvH;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEJ;EAAwB,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,eAAeK,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA,CAAC;AAACC,OAAA,CAAAX,WAAA,GAAAA,WAAA;AAEK,MAAMY,kBAAkB,GAAGX,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CAAC;AAACS,OAAA,CAAAC,kBAAA,GAAAA,kBAAA;AAIK,MAAMC,gBAAgB,GAAGZ,yBAAM,CAACa,KAA6B;AACpE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEX,KAAK;IAAEE;EAAiC,CAAC,GAAAS,KAAA;EAAA,OAAKT,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAGH,KAAK,CAACY,IAAI;AAAA,CAAC;AACnG;AACA;AACA,CAAC;AAACL,OAAA,CAAAE,gBAAA,GAAAA,gBAAA;AAIK,MAAMI,sBAAsB,GAAG,IAAAhB,yBAAM,EAACiB,oBAAM,CAACC,KAAK,CAA+B;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAChB,KAAK;IAAEE;EAAsC,CAAC,GAAAc,KAAA;EAAA,OAAId,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAGc,SAAS;AAAA,CAAC;AACrG,CAAC;AAACV,OAAA,CAAAM,sBAAA,GAAAA,sBAAA;AAIK,MAAMK,0BAA0B,GAAG,IAAArB,yBAAM,EAACiB,oBAAM,CAAChB,GAAG,CAAmC;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAACS,OAAA,CAAAW,0BAAA,GAAAA,0BAAA;AAEK,MAAMC,sBAAsB,GAAGtB,yBAAM,CAACC,GAAI;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC;AAACS,OAAA,CAAAY,sBAAA,GAAAA,sBAAA"}

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

@@ -23,9 +23,13 @@ const NumberInput = _ref => {
     onChange
   } = _ref;
   const [stringValue, setStringValue] = (0, _react.useState)('');
+  const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   const localPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : isMoneyInput ? '€' : undefined;
   const handleChange = (0, _react.useCallback)(function () {
     let newValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    if (hasFocus) {
+      return;
+    }
     if (typeof newValue !== 'number') {
       setStringValue('');
       return;
@@ -37,7 +41,7 @@ const NumberInput = _ref => {
       number: parsedValue,
       isMoneyInput
     }));
-  }, [isMoneyInput]);
+  }, [hasFocus, isMoneyInput]);
   const onLocalChange = event => {
     const newValue = event.target.value;
     const sanitizedValue = newValue
@@ -97,6 +101,7 @@ const NumberInput = _ref => {
     }
   };
   const onLocalBlur = () => {
+    setHasFocus(false);
     const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;
     const parsedValue = (0, _number2.parseFloatAndRound)({
       stringValue: sanitizedValue
@@ -110,6 +115,7 @@ const NumberInput = _ref => {
     }
   };
   const onFocus = () => {
+    setHasFocus(true);
     setStringValue(stringValue.replaceAll('.', ''));
   };
   (0, _react.useEffect)(() => {

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","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","NumberInput","_ref","isDecimalInput","isMoneyInput","maxNumber","Infinity","number","placeholder","onBlur","isDisabled","onChange","stringValue","setStringValue","useState","localPlaceholder","undefined","handleChange","useCallback","newValue","arguments","length","parsedValue","parseFloatAndRound","toString","formateNumber","onLocalChange","event","target","value","sanitizedValue","replace","NUMBER_CLEAR_REGEX","DECIMAL_TEST","test","parsedNumber","MONEY_TEST","decimals","INTEGER_TEST","Number","onLocalBlur","onFocus","replaceAll","useEffect","createElement","inputMode","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, parseFloatAndRound } from './utils/number';\n\nexport type NumberInputProps = {\n    /**\n     * Whether the user can add decimal places. Enables the user to input a zero as first number\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one leading zero\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * The number that should be displayed formatted in the input field. NOTE: The number has to match the mode (integer, decimal or money)\n     */\n    number: number | null;\n    /**\n     * The placeholder that should be in the input\n     */\n    placeholder?: string;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | null) => void;\n    /**\n     * Callback function that is called when the input changes\n     */\n    onChange?: (newNumber: number | null) => void;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n};\n\nconst NumberInput: FC<NumberInputProps> = (\n    {\n        isDecimalInput,\n        isMoneyInput,\n        maxNumber = Infinity,\n        number,\n        placeholder,\n        onBlur,\n        isDisabled,\n        onChange\n    }) => {\n    const [stringValue, setStringValue] = useState<string>('');\n\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const handleChange = useCallback(\n        (newValue: number | null = null) => {\n            if (typeof newValue !== 'number') {\n                setStringValue('');\n\n                return;\n            }\n\n            const parsedValue = parseFloatAndRound({ stringValue: newValue?.toString() });\n\n            setStringValue(formateNumber({ number: parsedValue, isMoneyInput }));\n        },\n        [isMoneyInput]\n    );\n\n    const onLocalChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = event.target.value;\n\n        const sanitizedValue = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '')\n            // Calculations need points for decimal indication\n            .replace(',', '.');\n\n        if (sanitizedValue.length === 0) {\n            setStringValue('');\n\n            if (typeof onChange === 'function') {\n                onChange?.(null);\n            }\n\n            return;\n        }\n\n        // Allows numbers, one (comma/point) and any number of decimal places\n        if (isDecimalInput && DECIMAL_TEST.test(sanitizedValue)) {\n            const parsedNumber = parseFloatAndRound({ stringValue: sanitizedValue });\n\n            if (parsedNumber > maxNumber) {\n                return;\n            }\n\n            setStringValue(sanitizedValue.replace('.', ','));\n\n            if (typeof onChange === 'function') {\n                onChange(parsedNumber);\n            }\n\n            return;\n        }\n\n        // Allows numbers, one (comma/point) and 2 numbers of decimal places\n        if (isMoneyInput && MONEY_TEST.test(sanitizedValue)) {\n            const parsedNumber = parseFloatAndRound({\n                stringValue: sanitizedValue,\n                decimals: 2,\n            });\n\n            if (parsedNumber > maxNumber) {\n                return;\n            }\n\n            setStringValue(sanitizedValue.replace('.', ','));\n\n            if (typeof onChange === 'function') {\n                onChange(parsedNumber);\n            }\n\n            return;\n        }\n\n        // Allows numbers but excludes numbers with leading 0\n        if (INTEGER_TEST.test(sanitizedValue)) {\n            const parsedNumber = Number(sanitizedValue);\n\n            if (parsedNumber > maxNumber) {\n                return;\n            }\n\n            setStringValue(sanitizedValue);\n\n            if (typeof onChange === 'function') {\n                onChange(parsedNumber);\n            }\n        }\n    };\n\n    const onLocalBlur = () => {\n        const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;\n        const parsedValue = parseFloatAndRound({ stringValue: sanitizedValue });\n\n        setStringValue(\n            stringValue.length === 0\n                ? ''\n                : formateNumber({\n                    number: parsedValue,\n                    isMoneyInput,\n                })\n        );\n\n        if (typeof onBlur === 'function') {\n            onBlur(parsedValue === 0 ? null : parsedValue);\n        }\n    };\n\n    const onFocus = () => {\n        setStringValue(stringValue.replaceAll('.', ''));\n    };\n\n    useEffect(() => {\n        handleChange(number);\n    }, [handleChange, number]);\n\n    return (\n        <Input\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={stringValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onFocus}\n            isDisabled={isDisabled}\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","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","NumberInput","_ref","isDecimalInput","isMoneyInput","maxNumber","Infinity","number","placeholder","onBlur","isDisabled","onChange","stringValue","setStringValue","useState","hasFocus","setHasFocus","localPlaceholder","undefined","handleChange","useCallback","newValue","arguments","length","parsedValue","parseFloatAndRound","toString","formateNumber","onLocalChange","event","target","value","sanitizedValue","replace","NUMBER_CLEAR_REGEX","DECIMAL_TEST","test","parsedNumber","MONEY_TEST","decimals","INTEGER_TEST","Number","onLocalBlur","onFocus","replaceAll","useEffect","createElement","inputMode","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEvent, FC, useCallback, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, parseFloatAndRound } from './utils/number';\n\nexport type NumberInputProps = {\n    /**\n     * Whether the user can add decimal places. Enables the user to input a zero as first number\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one leading zero\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * The number that should be displayed formatted in the input field. NOTE: The number has to match the mode (integer, decimal or money)\n     */\n    number: number | null;\n    /**\n     * The placeholder that should be in the input\n     */\n    placeholder?: string;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | null) => void;\n    /**\n     * Callback function that is called when the input changes\n     */\n    onChange?: (newNumber: number | null) => void;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n};\n\nconst NumberInput: FC<NumberInputProps> = (\n    {\n        isDecimalInput,\n        isMoneyInput,\n        maxNumber = Infinity,\n        number,\n        placeholder,\n        onBlur,\n        isDisabled,\n        onChange\n    }) => {\n    const [stringValue, setStringValue] = useState<string>('');\n    const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const handleChange = useCallback(\n        (newValue: number | null = null) => {\n            if (hasFocus) {\n                return;\n            }\n\n            if (typeof newValue !== 'number') {\n                setStringValue('');\n\n                return;\n            }\n\n            const parsedValue = parseFloatAndRound({ stringValue: newValue?.toString() });\n\n            setStringValue(formateNumber({ number: parsedValue, isMoneyInput }));\n        },\n        [hasFocus, isMoneyInput]\n    );\n\n    const onLocalChange = (event: ChangeEvent<HTMLInputElement>) => {\n        const newValue = event.target.value;\n\n        const sanitizedValue = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '')\n            // Calculations need points for decimal indication\n            .replace(',', '.');\n\n        if (sanitizedValue.length === 0) {\n            setStringValue('');\n\n            if (typeof onChange === 'function') {\n                onChange?.(null);\n            }\n\n            return;\n        }\n\n        // Allows numbers, one (comma/point) and any number of decimal places\n        if (isDecimalInput && DECIMAL_TEST.test(sanitizedValue)) {\n            const parsedNumber = parseFloatAndRound({ stringValue: sanitizedValue });\n\n            if (parsedNumber > maxNumber) {\n                return;\n            }\n\n            setStringValue(sanitizedValue.replace('.', ','));\n\n            if (typeof onChange === 'function') {\n                onChange(parsedNumber);\n            }\n\n            return;\n        }\n\n        // Allows numbers, one (comma/point) and 2 numbers of decimal places\n        if (isMoneyInput && MONEY_TEST.test(sanitizedValue)) {\n            const parsedNumber = parseFloatAndRound({\n                stringValue: sanitizedValue,\n                decimals: 2,\n            });\n\n            if (parsedNumber > maxNumber) {\n                return;\n            }\n\n            setStringValue(sanitizedValue.replace('.', ','));\n\n            if (typeof onChange === 'function') {\n                onChange(parsedNumber);\n            }\n\n            return;\n        }\n\n        // Allows numbers but excludes numbers with leading 0\n        if (INTEGER_TEST.test(sanitizedValue)) {\n            const parsedNumber = Number(sanitizedValue);\n\n            if (parsedNumber > maxNumber) {\n                return;\n            }\n\n            setStringValue(sanitizedValue);\n\n            if (typeof onChange === 'function') {\n                onChange(parsedNumber);\n            }\n        }\n    };\n\n    const onLocalBlur = () => {\n        setHasFocus(false);\n\n        const sanitizedValue = stringValue.length === 0 ? '0' : stringValue;\n        const parsedValue = parseFloatAndRound({ stringValue: sanitizedValue });\n\n        setStringValue(\n            stringValue.length === 0\n                ? ''\n                : formateNumber({\n                    number: parsedValue,\n                    isMoneyInput,\n                })\n        );\n\n        if (typeof onBlur === 'function') {\n            onBlur(parsedValue === 0 ? null : parsedValue);\n        }\n    };\n\n    const onFocus = () => {\n        setHasFocus(true);\n\n        setStringValue(stringValue.replaceAll('.', ''));\n    };\n\n    useEffect(() => {\n        handleChange(number);\n    }, [handleChange, number]);\n\n    return (\n        <Input\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={stringValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onFocus}\n            isDisabled={isDisabled}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,OAAA,GAAAH,OAAA;AACA,IAAAI,QAAA,GAAAJ,OAAA;AAAmE,SAAAE,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAV,wBAAAM,GAAA,EAAAI,WAAA,SAAAA,WAAA,IAAAJ,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAQ,KAAA,GAAAL,wBAAA,CAAAC,WAAA,OAAAI,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAT,GAAA,YAAAQ,KAAA,CAAAE,GAAA,CAAAV,GAAA,SAAAW,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAhB,GAAA,QAAAgB,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAnB,GAAA,EAAAgB,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAf,GAAA,EAAAgB,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAhB,GAAA,CAAAgB,GAAA,SAAAL,MAAA,CAAAT,OAAA,GAAAF,GAAA,MAAAQ,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAArB,GAAA,EAAAW,MAAA,YAAAA,MAAA;AAsCnE,MAAMW,WAAiC,GAAGC,IAAA,IAUhC;EAAA,IATN;IACIC,cAAc;IACdC,YAAY;IACZC,SAAS,GAAGC,QAAQ;IACpBC,MAAM;IACNC,WAAW;IACXC,MAAM;IACNC,UAAU;IACVC;EACJ,CAAC,GAAAT,IAAA;EACD,MAAM,CAACU,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAC,eAAQ,EAAS,EAAE,CAAC;EAC1D,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAG,IAAAF,eAAQ,EAAU,KAAK,CAAC;EAExD,MAAMG,gBAAgB,GAAGT,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAKJ,YAAY,GAAG,GAAG,GAAGc,SAAU;EAExE,MAAMC,YAAY,GAAG,IAAAC,kBAAW,EAC5B,YAAoC;IAAA,IAAnCC,QAAuB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAJ,SAAA,GAAAI,SAAA,MAAG,IAAI;IAC3B,IAAIP,QAAQ,EAAE;MACV;IACJ;IAEA,IAAI,OAAOM,QAAQ,KAAK,QAAQ,EAAE;MAC9BR,cAAc,CAAC,EAAE,CAAC;MAElB;IACJ;IAEA,MAAMW,WAAW,GAAG,IAAAC,2BAAkB,EAAC;MAAEb,WAAW,EAAES,QAAQ,aAARA,QAAQ,uBAARA,QAAQ,CAAEK,QAAQ,CAAC;IAAE,CAAC,CAAC;IAE7Eb,cAAc,CAAC,IAAAc,sBAAa,EAAC;MAAEpB,MAAM,EAAEiB,WAAW;MAAEpB;IAAa,CAAC,CAAC,CAAC;EACxE,CAAC,EACD,CAACW,QAAQ,EAAEX,YAAY,CAC3B,CAAC;EAED,MAAMwB,aAAa,GAAIC,KAAoC,IAAK;IAC5D,MAAMR,QAAQ,GAAGQ,KAAK,CAACC,MAAM,CAACC,KAAK;IAEnC,MAAMC,cAAc,GAAGX;IACnB;IAAA,CACCY,OAAO,CAACC,0BAAkB,EAAE,EAAE;IAC/B;IAAA,CACCD,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC;IAEtB,IAAID,cAAc,CAACT,MAAM,KAAK,CAAC,EAAE;MAC7BV,cAAc,CAAC,EAAE,CAAC;MAElB,IAAI,OAAOF,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAG,IAAI,CAAC;MACpB;MAEA;IACJ;;IAEA;IACA,IAAIR,cAAc,IAAIgC,oBAAY,CAACC,IAAI,CAACJ,cAAc,CAAC,EAAE;MACrD,MAAMK,YAAY,GAAG,IAAAZ,2BAAkB,EAAC;QAAEb,WAAW,EAAEoB;MAAe,CAAC,CAAC;MAExE,IAAIK,YAAY,GAAGhC,SAAS,EAAE;QAC1B;MACJ;MAEAQ,cAAc,CAACmB,cAAc,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;MAEhD,IAAI,OAAOtB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC0B,YAAY,CAAC;MAC1B;MAEA;IACJ;;IAEA;IACA,IAAIjC,YAAY,IAAIkC,kBAAU,CAACF,IAAI,CAACJ,cAAc,CAAC,EAAE;MACjD,MAAMK,YAAY,GAAG,IAAAZ,2BAAkB,EAAC;QACpCb,WAAW,EAAEoB,cAAc;QAC3BO,QAAQ,EAAE;MACd,CAAC,CAAC;MAEF,IAAIF,YAAY,GAAGhC,SAAS,EAAE;QAC1B;MACJ;MAEAQ,cAAc,CAACmB,cAAc,CAACC,OAAO,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;MAEhD,IAAI,OAAOtB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC0B,YAAY,CAAC;MAC1B;MAEA;IACJ;;IAEA;IACA,IAAIG,oBAAY,CAACJ,IAAI,CAACJ,cAAc,CAAC,EAAE;MACnC,MAAMK,YAAY,GAAGI,MAAM,CAACT,cAAc,CAAC;MAE3C,IAAIK,YAAY,GAAGhC,SAAS,EAAE;QAC1B;MACJ;MAEAQ,cAAc,CAACmB,cAAc,CAAC;MAE9B,IAAI,OAAOrB,QAAQ,KAAK,UAAU,EAAE;QAChCA,QAAQ,CAAC0B,YAAY,CAAC;MAC1B;IACJ;EACJ,CAAC;EAED,MAAMK,WAAW,GAAGA,CAAA,KAAM;IACtB1B,WAAW,CAAC,KAAK,CAAC;IAElB,MAAMgB,cAAc,GAAGpB,WAAW,CAACW,MAAM,KAAK,CAAC,GAAG,GAAG,GAAGX,WAAW;IACnE,MAAMY,WAAW,GAAG,IAAAC,2BAAkB,EAAC;MAAEb,WAAW,EAAEoB;IAAe,CAAC,CAAC;IAEvEnB,cAAc,CACVD,WAAW,CAACW,MAAM,KAAK,CAAC,GAClB,EAAE,GACF,IAAAI,sBAAa,EAAC;MACZpB,MAAM,EAAEiB,WAAW;MACnBpB;IACJ,CAAC,CACT,CAAC;IAED,IAAI,OAAOK,MAAM,KAAK,UAAU,EAAE;MAC9BA,MAAM,CAACe,WAAW,KAAK,CAAC,GAAG,IAAI,GAAGA,WAAW,CAAC;IAClD;EACJ,CAAC;EAED,MAAMmB,OAAO,GAAGA,CAAA,KAAM;IAClB3B,WAAW,CAAC,IAAI,CAAC;IAEjBH,cAAc,CAACD,WAAW,CAACgC,UAAU,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;EACnD,CAAC;EAED,IAAAC,gBAAS,EAAC,MAAM;IACZ1B,YAAY,CAACZ,MAAM,CAAC;EACxB,CAAC,EAAE,CAACY,YAAY,EAAEZ,MAAM,CAAC,CAAC;EAE1B,oBACInC,MAAA,CAAAS,OAAA,CAAAiE,aAAA,CAACvE,MAAA,CAAAM,OAAK;IACFkE,SAAS,EAAC,SAAS;IACnBpC,QAAQ,EAAEiB,aAAc;IACxBG,KAAK,EAAEnB,WAAY;IACnBJ,WAAW,EAAES,gBAAiB;IAC9BR,MAAM,EAAEiC,WAAY;IACpBC,OAAO,EAAEA,OAAQ;IACjBjC,UAAU,EAAEA;EAAW,CAC1B,CAAC;AAEV,CAAC;AAEDT,WAAW,CAAC+C,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAEzBhD,WAAW;AAAAiD,OAAA,CAAArE,OAAA,GAAAoE,QAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.271",
+    "version": "5.0.0-beta.273",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -65,5 +65,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "8ae780d07dfb9296e5f32014e7aaef972c13b41f"
+    "gitHead": "928a3fd01336f971dcb8c6108f71904a64274f80"
 }