@chayns-components/core 5.0.24 → 5.0.25

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

@@ -4,155 +4,236 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+var _reactCompilerRuntime = require("react-compiler-runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _numberInput = require("../../constants/numberInput");
 var _numberInput2 = require("../../utils/numberInput");
 var _Input = _interopRequireDefault(require("../input/Input"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
-const NumberInput = ({
-  isDecimalInput,
-  isMoneyInput,
-  isTimeInput,
-  isInvalid,
-  maxNumber = Infinity,
-  value,
-  shouldTriggerChangeOnFormat = true,
-  placeholder,
-  onBlur,
-  isDisabled,
-  onChange,
-  shouldShowOnlyBottomBorder,
-  minNumber = -Infinity
-}) => {
-  // the plainText will be shown in the input, when it is in focus
-  const [plainText, setPlainText] = (0, _react.useState)('');
-  // the formattedValue will be shown in the input, when it is not in focus
-  const [formattedValue, setFormattedValue] = (0, _react.useState)('');
+const NumberInput = t0 => {
+  "use memo";
+
+  const $ = (0, _reactCompilerRuntime.c)(41);
+  const {
+    isDecimalInput,
+    isMoneyInput,
+    isTimeInput,
+    isInvalid,
+    maxNumber: t1,
+    value,
+    shouldTriggerChangeOnFormat: t2,
+    placeholder,
+    onBlur,
+    isDisabled,
+    onChange,
+    shouldShowOnlyBottomBorder,
+    minNumber: t3
+  } = t0;
+  const maxNumber = t1 === undefined ? Infinity : t1;
+  const shouldTriggerChangeOnFormat = t2 === undefined ? true : t2;
+  const minNumber = t3 === undefined ? -Infinity : t3;
+  const [plainText, setPlainText] = (0, _react.useState)("");
+  const [formattedValue, setFormattedValue] = (0, _react.useState)("");
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
   const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = (0, _react.useState)(false);
   const [isValueInvalid, setIsValueInvalid] = (0, _react.useState)(false);
-  const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);
+  const localPlaceholder = placeholder ?? (isMoneyInput ? "\u20AC" : undefined);
   const initialInputRef = (0, _react.useRef)(true);
-  const onLocalChange = event => {
-    const newValue = event.target.value;
-    initialInputRef.current = false;
-    const sanitizedValueString = newValue
-    // Removes everything except numbers, commas and points
-    .replace(_numberInput.NUMBER_CLEAR_REGEX, '');
-    if (isTimeInput && (sanitizedValueString.includes(':') && sanitizedValueString.length > 5 || !sanitizedValueString.includes(':') && sanitizedValueString.length > 4)) {
-      return;
-    }
-    const valueToCheck = sanitizedValueString.replaceAll(',', '.');
-    if (!(0, _numberInput2.isValidString)({
-      string: valueToCheck,
-      isMoneyInput,
-      isDecimalInput,
-      isTimeInput
-    })) {
-      return;
-    }
-    if (maxNumber && Number(valueToCheck) > maxNumber || minNumber && Number(valueToCheck) < minNumber) {
-      return;
-    }
-    if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {
-      setShouldRemainPlaceholder(true);
-    } else {
-      setShouldRemainPlaceholder(false);
-    }
-    setPlainText(sanitizedValueString.replaceAll('.', ','));
-    if (typeof onChange === 'function') {
-      onChange(sanitizedValueString.replaceAll('.', ','));
-    }
-  };
-  const onLocalBlur = () => {
-    const sanitizedValue = plainText;
-    let newIsInvalid = false;
-    let parsedNumber = null;
-    if (!isTimeInput) {
-      parsedNumber = (0, _numberInput2.parseFloatWithDecimals)({
-        stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),
-        decimals: isMoneyInput ? 2 : undefined
-      });
-      if (parsedNumber && parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
-        newIsInvalid = true;
+  let t4;
+  if ($[0] !== isDecimalInput || $[1] !== isMoneyInput || $[2] !== isTimeInput || $[3] !== maxNumber || $[4] !== minNumber || $[5] !== onChange) {
+    t4 = event => {
+      const newValue = event.target.value;
+      initialInputRef.current = false;
+      const sanitizedValueString = newValue.replace(_numberInput.NUMBER_CLEAR_REGEX, "");
+      if (isTimeInput && (sanitizedValueString.includes(":") && sanitizedValueString.length > 5 || !sanitizedValueString.includes(":") && sanitizedValueString.length > 4)) {
+        return;
       }
-      setIsValueInvalid(newIsInvalid);
-    }
-    const newStringValue = plainText.length === 0 ? '' : (0, _numberInput2.formateNumber)({
-      number: isTimeInput ? sanitizedValue : parsedNumber,
-      isMoneyInput,
-      isTimeInput
-    });
-    setFormattedValue(`${newStringValue} ${isMoneyInput ? '€' : ''}`);
-    setPlainText(newStringValue.replaceAll('.', ''));
-    setHasFocus(false);
-    if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {
-      onChange(newStringValue.replaceAll('.', ''));
-    }
-    if (typeof onBlur === 'function') {
-      if (isTimeInput) {
-        onBlur(newStringValue, newIsInvalid);
+      const valueToCheck = sanitizedValueString.replaceAll(",", ".");
+      if (!(0, _numberInput2.isValidString)({
+        string: valueToCheck,
+        isMoneyInput,
+        isDecimalInput,
+        isTimeInput
+      })) {
+        return;
+      }
+      if (maxNumber && Number(valueToCheck) > maxNumber || minNumber && Number(valueToCheck) < minNumber) {
+        return;
+      }
+      if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {
+        setShouldRemainPlaceholder(true);
       } else {
-        onBlur(parsedNumber, newIsInvalid);
+        setShouldRemainPlaceholder(false);
       }
-    }
-  };
-  const onLocalFocus = () => {
-    // formattedValue will be a number string with german number format (e.g. 1.000,00)
-    // It will remove all dots, so that the user can type in the number
-    setPlainText(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));
-
-    // This will update the external state
-    if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {
-      onChange(formattedValue.replaceAll('.', '').replace('€', '').replaceAll(' ', ''));
-    }
-    setIsValueInvalid(false);
-    setHasFocus(true);
-  };
-
-  // updates the formattedValue, when the value changes
-  (0, _react.useEffect)(() => {
-    let parsedNumber = null;
-    if (!isTimeInput) {
-      parsedNumber = (0, _numberInput2.parseFloatWithDecimals)({
-        stringValue: plainText.replace(',', '.').replaceAll(':', '').replace('€', '').replaceAll(' ', ''),
-        decimals: isMoneyInput ? 2 : undefined
+      setPlainText(sanitizedValueString.replaceAll(".", ","));
+      if (typeof onChange === "function") {
+        onChange(sanitizedValueString.replaceAll(".", ","));
+      }
+    };
+    $[0] = isDecimalInput;
+    $[1] = isMoneyInput;
+    $[2] = isTimeInput;
+    $[3] = maxNumber;
+    $[4] = minNumber;
+    $[5] = onChange;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  const onLocalChange = t4;
+  let t5;
+  if ($[7] !== isMoneyInput || $[8] !== isTimeInput || $[9] !== maxNumber || $[10] !== minNumber || $[11] !== onBlur || $[12] !== onChange || $[13] !== plainText || $[14] !== shouldTriggerChangeOnFormat) {
+    t5 = () => {
+      const sanitizedValue = plainText;
+      let newIsInvalid = false;
+      let parsedNumber = null;
+      if (!isTimeInput) {
+        parsedNumber = (0, _numberInput2.parseFloatWithDecimals)({
+          stringValue: sanitizedValue.replace(",", ".").replaceAll(":", "").replace("\u20AC", ""),
+          decimals: isMoneyInput ? 2 : undefined
+        });
+        if (parsedNumber && parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
+          newIsInvalid = true;
+        }
+        setIsValueInvalid(newIsInvalid);
+      }
+      const newStringValue = plainText.length === 0 ? "" : (0, _numberInput2.formateNumber)({
+        number: isTimeInput ? sanitizedValue : parsedNumber,
+        isMoneyInput,
+        isTimeInput
       });
-
-      // checks, if a given number is invalid, if the input is not in focus
-      if (!hasFocus) {
-        if (parsedNumber === null && initialInputRef.current) {
-          setIsValueInvalid(false);
+      setFormattedValue(`${newStringValue} ${isMoneyInput ? "\u20AC" : ""}`);
+      setPlainText(newStringValue.replaceAll(".", ""));
+      setHasFocus(false);
+      if (typeof onChange === "function" && shouldTriggerChangeOnFormat) {
+        onChange(newStringValue.replaceAll(".", ""));
+      }
+      if (typeof onBlur === "function") {
+        if (isTimeInput) {
+          onBlur(newStringValue, newIsInvalid);
         } else {
-          setIsValueInvalid(parsedNumber === null || parsedNumber > maxNumber || parsedNumber < minNumber);
+          onBlur(parsedNumber, newIsInvalid);
+        }
+      }
+    };
+    $[7] = isMoneyInput;
+    $[8] = isTimeInput;
+    $[9] = maxNumber;
+    $[10] = minNumber;
+    $[11] = onBlur;
+    $[12] = onChange;
+    $[13] = plainText;
+    $[14] = shouldTriggerChangeOnFormat;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  const onLocalBlur = t5;
+  let t6;
+  if ($[16] !== formattedValue || $[17] !== onChange || $[18] !== shouldTriggerChangeOnFormat) {
+    t6 = () => {
+      setPlainText(formattedValue.replaceAll(".", "").replace("\u20AC", "").replaceAll(" ", ""));
+      if (typeof onChange === "function" && shouldTriggerChangeOnFormat) {
+        onChange(formattedValue.replaceAll(".", "").replace("\u20AC", "").replaceAll(" ", ""));
+      }
+      setIsValueInvalid(false);
+      setHasFocus(true);
+    };
+    $[16] = formattedValue;
+    $[17] = onChange;
+    $[18] = shouldTriggerChangeOnFormat;
+    $[19] = t6;
+  } else {
+    t6 = $[19];
+  }
+  const onLocalFocus = t6;
+  let t7;
+  let t8;
+  if ($[20] !== hasFocus || $[21] !== isMoneyInput || $[22] !== isTimeInput || $[23] !== maxNumber || $[24] !== minNumber || $[25] !== plainText) {
+    t7 = () => {
+      let parsedNumber_0 = null;
+      if (!isTimeInput) {
+        parsedNumber_0 = (0, _numberInput2.parseFloatWithDecimals)({
+          stringValue: plainText.replace(",", ".").replaceAll(":", "").replace("\u20AC", "").replaceAll(" ", ""),
+          decimals: isMoneyInput ? 2 : undefined
+        });
+        if (!hasFocus) {
+          if (parsedNumber_0 === null && initialInputRef.current) {
+            setIsValueInvalid(false);
+          } else {
+            setIsValueInvalid(parsedNumber_0 === null || parsedNumber_0 > maxNumber || parsedNumber_0 < minNumber);
+          }
         }
       }
-    }
-    setFormattedValue(plainText.length === 0 ? '' : `${(0, _numberInput2.formateNumber)({
-      number: isTimeInput ? plainText : parsedNumber,
-      isMoneyInput,
-      isTimeInput
-    })}${isMoneyInput ? ' €' : ''}`);
-  }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);
-  (0, _react.useEffect)(() => {
-    if (typeof value === 'string') {
-      setPlainText(value.replace('€', '').replaceAll(' ', ''));
-    }
-  }, [value]);
-  return /*#__PURE__*/_react.default.createElement(_Input.default, {
-    shouldRemainPlaceholder: shouldRemainPlaceholder,
-    shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
-    inputMode: "decimal",
-    onChange: onLocalChange,
-    value: hasFocus ? plainText : formattedValue,
-    placeholder: localPlaceholder,
-    onBlur: onLocalBlur,
-    onFocus: onLocalFocus,
-    isDisabled: isDisabled,
-    isInvalid: typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid,
-    shouldShowCenteredContent: shouldShowOnlyBottomBorder
-  });
+      setFormattedValue(plainText.length === 0 ? "" : `${(0, _numberInput2.formateNumber)({
+        number: isTimeInput ? plainText : parsedNumber_0,
+        isMoneyInput,
+        isTimeInput
+      })}${isMoneyInput ? " \u20AC" : ""}`);
+    };
+    t8 = [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText];
+    $[20] = hasFocus;
+    $[21] = isMoneyInput;
+    $[22] = isTimeInput;
+    $[23] = maxNumber;
+    $[24] = minNumber;
+    $[25] = plainText;
+    $[26] = t7;
+    $[27] = t8;
+  } else {
+    t7 = $[26];
+    t8 = $[27];
+  }
+  (0, _react.useEffect)(t7, t8);
+  let t10;
+  let t9;
+  if ($[28] !== value) {
+    t9 = () => {
+      if (typeof value === "string") {
+        setPlainText(value.replace("\u20AC", "").replaceAll(" ", ""));
+      }
+    };
+    t10 = [value];
+    $[28] = value;
+    $[29] = t10;
+    $[30] = t9;
+  } else {
+    t10 = $[29];
+    t9 = $[30];
+  }
+  (0, _react.useEffect)(t9, t10);
+  const t11 = hasFocus ? plainText : formattedValue;
+  const t12 = typeof isInvalid === "boolean" ? isInvalid : isValueInvalid;
+  let t13;
+  if ($[31] !== isDisabled || $[32] !== localPlaceholder || $[33] !== onLocalBlur || $[34] !== onLocalChange || $[35] !== onLocalFocus || $[36] !== shouldRemainPlaceholder || $[37] !== shouldShowOnlyBottomBorder || $[38] !== t11 || $[39] !== t12) {
+    t13 = /*#__PURE__*/_react.default.createElement(_Input.default, {
+      shouldRemainPlaceholder: shouldRemainPlaceholder,
+      shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+      inputMode: "decimal",
+      onChange: onLocalChange,
+      value: t11,
+      placeholder: localPlaceholder,
+      onBlur: onLocalBlur,
+      onFocus: onLocalFocus,
+      isDisabled: isDisabled,
+      isInvalid: t12,
+      shouldShowCenteredContent: shouldShowOnlyBottomBorder
+    });
+    $[31] = isDisabled;
+    $[32] = localPlaceholder;
+    $[33] = onLocalBlur;
+    $[34] = onLocalChange;
+    $[35] = onLocalFocus;
+    $[36] = shouldRemainPlaceholder;
+    $[37] = shouldShowOnlyBottomBorder;
+    $[38] = t11;
+    $[39] = t12;
+    $[40] = t13;
+  } else {
+    t13 = $[40];
+  }
+  return t13;
 };
 NumberInput.displayName = 'NumberInput';
 var _default = exports.default = NumberInput;

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

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","shouldTriggerChangeOnFormat","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","initialInputRef","useRef","onLocalChange","event","newValue","target","current","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","includes","length","valueToCheck","replaceAll","isValidString","string","Number","match","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName","_default","exports"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useRef, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\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     * Whether the value is invalid.\n     */\n    isInvalid?: 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     * Whether the onChange function should be triggert when the value is formatted on the focus or blur\n     */\n    shouldTriggerChangeOnFormat?: 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    isInvalid,\n    maxNumber = Infinity,\n    value,\n    shouldTriggerChangeOnFormat = true,\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    const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n    const [isValueInvalid, setIsValueInvalid] = useState(false);\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const initialInputRef = useRef(true);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        initialInputRef.current = false;\n\n        const sanitizedValueString = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '');\n\n        if (\n            isTimeInput &&\n            ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) ||\n                (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n        ) {\n            return;\n        }\n\n        const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n        if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n            return;\n        }\n\n        if (\n            (maxNumber && Number(valueToCheck) > maxNumber) ||\n            (minNumber && Number(valueToCheck) < minNumber)\n        ) {\n            return;\n        }\n\n        if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n            setShouldRemainPlaceholder(true);\n        } else {\n            setShouldRemainPlaceholder(false);\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;\n        let newIsInvalid = false;\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            if (\n                parsedNumber &&\n                parsedNumber !== 0 &&\n                (parsedNumber > maxNumber || parsedNumber < minNumber)\n            ) {\n                newIsInvalid = true;\n            }\n\n            setIsValueInvalid(newIsInvalid);\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} ${isMoneyInput ? '€' : ''}`);\n        setPlainText(newStringValue.replaceAll('.', ''));\n        setHasFocus(false);\n\n        if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            if (isTimeInput) {\n                onBlur(newStringValue, newIsInvalid);\n            } else {\n                onBlur(parsedNumber, newIsInvalid);\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('.', '').replace('€', '').replaceAll(' ', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {\n            onChange(formattedValue.replaceAll('.', '').replace('€', '').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\n                    .replace(',', '.')\n                    .replaceAll(':', '')\n                    .replace('€', '')\n                    .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                if (parsedNumber === null && initialInputRef.current) {\n                    setIsValueInvalid(false);\n                } else {\n                    setIsValueInvalid(\n                        parsedNumber === null ||\n                            parsedNumber > maxNumber ||\n                            parsedNumber < minNumber,\n                    );\n                }\n            }\n        }\n\n        setFormattedValue(\n            plainText.length === 0\n                ? ''\n                : `${formateNumber({\n                      number: isTimeInput ? plainText : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  })}${isMoneyInput ? ' €' : ''}`,\n        );\n    }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value.replace('€', '').replaceAll(' ', ''));\n        }\n    }, [value]);\n\n    return (\n        <Input\n            shouldRemainPlaceholder={shouldRemainPlaceholder}\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={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n            shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","NumberInput","t0","$","_reactCompilerRuntime","c","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","t1","value","shouldTriggerChangeOnFormat","t2","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","t3","undefined","Infinity","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","initialInputRef","useRef","t4","event","newValue","target","current","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","includes","length","valueToCheck","replaceAll","isValidString","string","Number","match","onLocalChange","t5","sanitizedValue","newIsInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalBlur","t6","onLocalFocus","t7","t8","parsedNumber_0","useEffect","t10","t9","t11","t12","t13","createElement","inputMode","displayName","_default","exports"],"sources":["../../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useRef, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\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     * Whether the value is invalid.\n     */\n    isInvalid?: 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     * Whether the onChange function should be triggert when the value is formatted on the focus or blur\n     */\n    shouldTriggerChangeOnFormat?: 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    isInvalid,\n    maxNumber = Infinity,\n    value,\n    shouldTriggerChangeOnFormat = true,\n    placeholder,\n    onBlur,\n    isDisabled,\n    onChange,\n    shouldShowOnlyBottomBorder,\n    minNumber = -Infinity,\n}) => {\n    'use memo';\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    const [shouldRemainPlaceholder, setShouldRemainPlaceholder] = useState<boolean>(false);\n\n    const [isValueInvalid, setIsValueInvalid] = useState(false);\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const initialInputRef = useRef(true);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        initialInputRef.current = false;\n\n        const sanitizedValueString = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '');\n\n        if (\n            isTimeInput &&\n            ((sanitizedValueString.includes(':') && sanitizedValueString.length > 5) ||\n                (!sanitizedValueString.includes(':') && sanitizedValueString.length > 4))\n        ) {\n            return;\n        }\n\n        const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n        if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n            return;\n        }\n\n        if (\n            (maxNumber && Number(valueToCheck) > maxNumber) ||\n            (minNumber && Number(valueToCheck) < minNumber)\n        ) {\n            return;\n        }\n\n        if (newValue.length === 1 && newValue.match(/^[0-9]+$/) === null) {\n            setShouldRemainPlaceholder(true);\n        } else {\n            setShouldRemainPlaceholder(false);\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;\n        let newIsInvalid = false;\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            if (\n                parsedNumber &&\n                parsedNumber !== 0 &&\n                (parsedNumber > maxNumber || parsedNumber < minNumber)\n            ) {\n                newIsInvalid = true;\n            }\n\n            setIsValueInvalid(newIsInvalid);\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} ${isMoneyInput ? '€' : ''}`);\n        setPlainText(newStringValue.replaceAll('.', ''));\n        setHasFocus(false);\n\n        if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            if (isTimeInput) {\n                onBlur(newStringValue, newIsInvalid);\n            } else {\n                onBlur(parsedNumber, newIsInvalid);\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('.', '').replace('€', '').replaceAll(' ', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function' && shouldTriggerChangeOnFormat) {\n            onChange(formattedValue.replaceAll('.', '').replace('€', '').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\n                    .replace(',', '.')\n                    .replaceAll(':', '')\n                    .replace('€', '')\n                    .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                if (parsedNumber === null && initialInputRef.current) {\n                    setIsValueInvalid(false);\n                } else {\n                    setIsValueInvalid(\n                        parsedNumber === null ||\n                            parsedNumber > maxNumber ||\n                            parsedNumber < minNumber,\n                    );\n                }\n            }\n        }\n\n        setFormattedValue(\n            plainText.length === 0\n                ? ''\n                : `${formateNumber({\n                      number: isTimeInput ? plainText : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  })}${isMoneyInput ? ' €' : ''}`,\n        );\n    }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value.replace('€', '').replaceAll(' ', ''));\n        }\n    }, [value]);\n\n    return (\n        <Input\n            shouldRemainPlaceholder={shouldRemainPlaceholder}\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={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n            shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":";;;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,aAAA,GAAAF,OAAA;AACA,IAAAG,MAAA,GAAAC,sBAAA,CAAAJ,OAAA;AAAmC,SAAAI,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAN,wBAAAM,CAAA,EAAAG,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAV,uBAAA,YAAAA,CAAAM,CAAA,EAAAG,CAAA,SAAAA,CAAA,IAAAH,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,MAAAO,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAR,OAAA,EAAAF,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAS,CAAA,MAAAF,CAAA,GAAAJ,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAE,CAAA,CAAAI,GAAA,CAAAX,CAAA,UAAAO,CAAA,CAAAK,GAAA,CAAAZ,CAAA,GAAAO,CAAA,CAAAM,GAAA,CAAAb,CAAA,EAAAS,CAAA,gBAAAN,CAAA,IAAAH,CAAA,gBAAAG,CAAA,OAAAW,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAG,CAAA,OAAAK,CAAA,IAAAD,CAAA,GAAAS,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAG,CAAA,OAAAK,CAAA,CAAAI,GAAA,IAAAJ,CAAA,CAAAK,GAAA,IAAAN,CAAA,CAAAE,CAAA,EAAAN,CAAA,EAAAK,CAAA,IAAAC,CAAA,CAAAN,CAAA,IAAAH,CAAA,CAAAG,CAAA,WAAAM,CAAA,KAAAT,CAAA,EAAAG,CAAA;AA8DnC,MAAMgB,WAAiC,GAAGC,EAAA;EAAA;;EAAA,MAAAC,CAAA,OAAAC,qBAAA,CAAAC,CAAA;EAAC;IAAAC,cAAA;IAAAC,YAAA;IAAAC,WAAA;IAAAC,SAAA;IAAAC,SAAA,EAAAC,EAAA;IAAAC,KAAA;IAAAC,2BAAA,EAAAC,EAAA;IAAAC,WAAA;IAAAC,MAAA;IAAAC,UAAA;IAAAC,QAAA;IAAAC,0BAAA;IAAAC,SAAA,EAAAC;EAAA,IAAAnB,EAc1C;EATG,MAAAQ,SAAA,GAAAC,EAAoB,KAApBW,SAAoB,GAApBC,QAAoB,GAApBZ,EAAoB;EAEpB,MAAAE,2BAAA,GAAAC,EAAkC,KAAlCQ,SAAkC,GAAlC,IAAkC,GAAlCR,EAAkC;EAMlC,MAAAM,SAAA,GAAAC,EAAqB,KAArBC,SAAqB,GAArB,CAAaC,QAAQ,GAArBF,EAAqB;EAKrB,OAAAG,SAAA,EAAAC,YAAA,IAAkC,IAAAC,eAAQ,EAAS,EAAE,CAAC;EAEtD,OAAAC,cAAA,EAAAC,iBAAA,IAA4C,IAAAF,eAAQ,EAAS,EAAE,CAAC;EAChE,OAAAG,QAAA,EAAAC,WAAA,IAAgC,IAAAJ,eAAQ,EAAU,KAAK,CAAC;EACxD,OAAAK,uBAAA,EAAAC,0BAAA,IAA8D,IAAAN,eAAQ,EAAU,KAAK,CAAC;EAEtF,OAAAO,cAAA,EAAAC,iBAAA,IAA4C,IAAAR,eAAQ,EAAC,KAAK,CAAC;EAC3D,MAAAS,gBAAA,GAAyBpB,WAA+C,KAA/BR,YAAY,GAAZ,QAA8B,GAA9Be,SAA+B;EAExE,MAAAc,eAAA,GAAwB,IAAAC,aAAM,EAAC,IAAI,CAAC;EAAC,IAAAC,EAAA;EAAA,IAAAnC,CAAA,QAAAG,cAAA,IAAAH,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAK,WAAA,IAAAL,CAAA,QAAAO,SAAA,IAAAP,CAAA,QAAAiB,SAAA,IAAAjB,CAAA,QAAAe,QAAA;IAEuBoB,EAAA,GAAAC,KAAA;MACxD,MAAAC,QAAA,GAAiBD,KAAK,CAAAE,MAAO,CAAA7B,KAAM;MAEnCwB,eAAe,CAAAM,OAAA,GAAW,KAAH;MAEvB,MAAAC,oBAAA,GAA6BH,QAAQ,CAAAI,OAEzB,CAACC,+BAAkB,EAAE,EAAE,CAAC;MAEpC,IACIrC,WAE6E,KAD3EmC,oBAAoB,CAAAG,QAAS,CAAC,GAAsC,CAAC,IAA/BH,oBAAoB,CAAAI,MAAO,GAAG,CACM,IAAvE,CAACJ,oBAAoB,CAAAG,QAAS,CAAC,GAAG,CAAoC,IAA/BH,oBAAoB,CAAAI,MAAO,GAAG,CAAG;QAAA;MAAA;MAKjF,MAAAC,YAAA,GAAqBL,oBAAoB,CAAAM,UAAW,CAAC,GAAG,EAAE,GAAG,CAAC;MAE9D,IAAI,CAAC,IAAAC,2BAAa,EAAC;QAAAC,MAAA,EAAUH,YAAY;QAAAzC,YAAA;QAAAD,cAAA;QAAAE;MAA4C,CAAC,CAAC;QAAA;MAAA;MAIvF,IACKE,SAA6C,IAAhC0C,MAAM,CAACJ,YAAY,CAAC,GAAGtC,SACU,IAA9CU,SAA6C,IAAhCgC,MAAM,CAACJ,YAAY,CAAC,GAAG5B,SAAU;QAAA;MAAA;MAKnD,IAAIoB,QAAQ,CAAAO,MAAO,KAAK,CAAwC,IAAnCP,QAAQ,CAAAa,KAAM,CAAC,UAAU,CAAC,KAAK,IAAI;QAC5DrB,0BAA0B,CAAC,IAAI,CAAC;MAAA;QAEhCA,0BAA0B,CAAC,KAAK,CAAC;MAAA;MAGrCP,YAAY,CAACkB,oBAAoB,CAAAM,UAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;MAEvD,IAAI,OAAO/B,QAAQ,KAAK,UAAU;QAC9BA,QAAQ,CAACyB,oBAAoB,CAAAM,UAAW,CAAC,GAAG,EAAE,GAAG,CAAC,CAAC;MAAA;IACtD,CACJ;IAAA9C,CAAA,MAAAG,cAAA;IAAAH,CAAA,MAAAI,YAAA;IAAAJ,CAAA,MAAAK,WAAA;IAAAL,CAAA,MAAAO,SAAA;IAAAP,CAAA,MAAAiB,SAAA;IAAAjB,CAAA,MAAAe,QAAA;IAAAf,CAAA,MAAAmC,EAAA;EAAA;IAAAA,EAAA,GAAAnC,CAAA;EAAA;EAzCD,MAAAmD,aAAA,GAA4DhB,EAyC3D;EAAC,IAAAiB,EAAA;EAAA,IAAApD,CAAA,QAAAI,YAAA,IAAAJ,CAAA,QAAAK,WAAA,IAAAL,CAAA,QAAAO,SAAA,IAAAP,CAAA,SAAAiB,SAAA,IAAAjB,CAAA,SAAAa,MAAA,IAAAb,CAAA,SAAAe,QAAA,IAAAf,CAAA,SAAAqB,SAAA,IAAArB,CAAA,SAAAU,2BAAA;IAEkB0C,EAAA,GAAAA,CAAA;MAChB,MAAAC,cAAA,GAAuBhC,SAAS;MAChC,IAAAiC,YAAA,GAAmB,KAAK;MACxB,IAAAC,YAAA,GAAmB,IAAI;MAEvB,IAAI,CAAClD,WAAW;QACZkD,YAAA,CAAAA,CAAA,CAAeA,GAAA,CAAAC,oCAAsB,EAAC;UAAAC,WAAA,EACrBJ,cAAc,CAAAZ,OAAQ,CAAC,GAAG,EAAE,GAAG,CAAC,CAAAK,UAAW,CAAC,GAAG,EAAE,EAAE,CAAC,CAAAL,OAAQ,CAAC,QAAG,EAAE,EAAE,CAAC;UAAAiB,QAAA,EACxEtD,YAAY,GAAZ,CAA4B,GAA5Be;QACd,CAAC,CAAC;QAEF,IACIoC,YACkB,IAAlBA,YAAY,KAAK,CACqC,KAArDA,YAAY,GAAGhD,SAAqC,IAAxBgD,YAAY,GAAGtC,SAAU;UAEtDqC,YAAA,CAAAA,CAAA,CAAeA,IAAI;QAAP;QAGhBvB,iBAAiB,CAACuB,YAAY,CAAC;MAAA;MAGnC,MAAAK,cAAA,GACItC,SAAS,CAAAuB,MAAO,KAAK,CAMb,GANR,EAMQ,GANR,IAEMgB,2BAAa,EAAC;QAAAC,MAAA,EACFxD,WAAW,GAAXgD,cAA2C,GAA3CE,YAA2C;QAAAnD,YAAA;QAAAC;MAGvD,CAAC,CAAC;MAEZoB,iBAAiB,CAAC,GAAGkC,cAAc,IAAIvD,YAAY,GAAZ,QAAuB,GAAvB,EAAuB,EAAE,CAAC;MACjEkB,YAAY,CAACqC,cAAc,CAAAb,UAAW,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;MAChDnB,WAAW,CAAC,KAAK,CAAC;MAElB,IAAI,OAAOZ,QAAQ,KAAK,UAAyC,IAA7DL,2BAA6D;QAC7DK,QAAQ,CAAC4C,cAAc,CAAAb,UAAW,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;MAAA;MAGhD,IAAI,OAAOjC,MAAM,KAAK,UAAU;QAC5B,IAAIR,WAAW;UACXQ,MAAM,CAAC8C,cAAc,EAAEL,YAAY,CAAC;QAAA;UAEpCzC,MAAM,CAAC0C,YAAY,EAAED,YAAY,CAAC;QAAA;MACrC;IACJ,CACJ;IAAAtD,CAAA,MAAAI,YAAA;IAAAJ,CAAA,MAAAK,WAAA;IAAAL,CAAA,MAAAO,SAAA;IAAAP,CAAA,OAAAiB,SAAA;IAAAjB,CAAA,OAAAa,MAAA;IAAAb,CAAA,OAAAe,QAAA;IAAAf,CAAA,OAAAqB,SAAA;IAAArB,CAAA,OAAAU,2BAAA;IAAAV,CAAA,OAAAoD,EAAA;EAAA;IAAAA,EAAA,GAAApD,CAAA;EAAA;EA9CD,MAAA8D,WAAA,GAAoBV,EA8CnB;EAAC,IAAAW,EAAA;EAAA,IAAA/D,CAAA,SAAAwB,cAAA,IAAAxB,CAAA,SAAAe,QAAA,IAAAf,CAAA,SAAAU,2BAAA;IAEmBqD,EAAA,GAAAA,CAAA;MAGjBzC,YAAY,CAACE,cAAc,CAAAsB,UAAW,CAAC,GAAG,EAAE,EAAE,CAAC,CAAAL,OAAQ,CAAC,QAAG,EAAE,EAAE,CAAC,CAAAK,UAAW,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;MAGrF,IAAI,OAAO/B,QAAQ,KAAK,UAAyC,IAA7DL,2BAA6D;QAC7DK,QAAQ,CAACS,cAAc,CAAAsB,UAAW,CAAC,GAAG,EAAE,EAAE,CAAC,CAAAL,OAAQ,CAAC,QAAG,EAAE,EAAE,CAAC,CAAAK,UAAW,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;MAAA;MAGrFf,iBAAiB,CAAC,KAAK,CAAC;MACxBJ,WAAW,CAAC,IAAI,CAAC;IAAA,CACpB;IAAA3B,CAAA,OAAAwB,cAAA;IAAAxB,CAAA,OAAAe,QAAA;IAAAf,CAAA,OAAAU,2BAAA;IAAAV,CAAA,OAAA+D,EAAA;EAAA;IAAAA,EAAA,GAAA/D,CAAA;EAAA;EAZD,MAAAgE,YAAA,GAAqBD,EAYpB;EAAC,IAAAE,EAAA;EAAA,IAAAC,EAAA;EAAA,IAAAlE,CAAA,SAAA0B,QAAA,IAAA1B,CAAA,SAAAI,YAAA,IAAAJ,CAAA,SAAAK,WAAA,IAAAL,CAAA,SAAAO,SAAA,IAAAP,CAAA,SAAAiB,SAAA,IAAAjB,CAAA,SAAAqB,SAAA;IAGQ4C,EAAA,GAAAA,CAAA;MACN,IAAAE,cAAA,GAAmB,IAAI;MAEvB,IAAI,CAAC9D,WAAW;QACZkD,cAAA,CAAAA,CAAA,CAAeA,GAAA,CAAAC,oCAAsB,EAAC;UAAAC,WAAA,EACrBpC,SAAS,CAAAoB,OACV,CAAC,GAAG,EAAE,GAAG,CAAC,CAAAK,UACP,CAAC,GAAG,EAAE,EAAE,CAAC,CAAAL,OACZ,CAAC,QAAG,EAAE,EAAE,CAAC,CAAAK,UACN,CAAC,GAAG,EAAE,EAAE,CAAC;UAAAY,QAAA,EACdtD,YAAY,GAAZ,CAA4B,GAA5Be;QACd,CAAC,CAAC;QAGF,IAAI,CAACO,QAAQ;UACT,IAAI6B,cAAY,KAAK,IAA+B,IAAvBtB,eAAe,CAAAM,OAAQ;YAChDR,iBAAiB,CAAC,KAAK,CAAC;UAAA;YAExBA,iBAAiB,CACbwB,cAAY,KAAK,IACW,IAAxBA,cAAY,GAAGhD,SACS,IAAxBgD,cAAY,GAAGtC,SACvB,CAAC;UAAA;QACJ;MACJ;MAGLQ,iBAAiB,CACbJ,SAAS,CAAAuB,MAAO,KAAK,CAMgB,GANrC,EAMqC,GANrC,GAES,IAAAgB,2BAAa,EAAC;QAAAC,MAAA,EACLxD,WAAW,GAAXgB,SAAsC,GAAtC8C,cAAsC;QAAA/D,YAAA;QAAAC;MAGlD,CAAC,CAAC,GAAGD,YAAY,GAAZ,SAAwB,GAAxB,EAAwB,EACvC,CAAC;IAAA,CACJ;IAAE8D,EAAA,IAACxC,QAAQ,EAAEtB,YAAY,EAAEC,WAAW,EAAEE,SAAS,EAAEU,SAAS,EAAEI,SAAS,CAAC;IAAArB,CAAA,OAAA0B,QAAA;IAAA1B,CAAA,OAAAI,YAAA;IAAAJ,CAAA,OAAAK,WAAA;IAAAL,CAAA,OAAAO,SAAA;IAAAP,CAAA,OAAAiB,SAAA;IAAAjB,CAAA,OAAAqB,SAAA;IAAArB,CAAA,OAAAiE,EAAA;IAAAjE,CAAA,OAAAkE,EAAA;EAAA;IAAAD,EAAA,GAAAjE,CAAA;IAAAkE,EAAA,GAAAlE,CAAA;EAAA;EApCzE,IAAAoE,gBAAS,EAACH,EAoCT,EAAEC,EAAsE,CAAC;EAAA,IAAAG,GAAA;EAAA,IAAAC,EAAA;EAAA,IAAAtE,CAAA,SAAAS,KAAA;IAEhE6D,EAAA,GAAAA,CAAA;MACN,IAAI,OAAO7D,KAAK,KAAK,QAAQ;QACzBa,YAAY,CAACb,KAAK,CAAAgC,OAAQ,CAAC,QAAG,EAAE,EAAE,CAAC,CAAAK,UAAW,CAAC,GAAG,EAAE,EAAE,CAAC,CAAC;MAAA;IAC3D,CACJ;IAAEuB,GAAA,IAAC5D,KAAK,CAAC;IAAAT,CAAA,OAAAS,KAAA;IAAAT,CAAA,OAAAqE,GAAA;IAAArE,CAAA,OAAAsE,EAAA;EAAA;IAAAD,GAAA,GAAArE,CAAA;IAAAsE,EAAA,GAAAtE,CAAA;EAAA;EAJV,IAAAoE,gBAAS,EAACE,EAIT,EAAED,GAAO,CAAC;EAQI,MAAAE,GAAA,GAAA7C,QAAQ,GAARL,SAAqC,GAArCG,cAAqC;EAKjC,MAAAgD,GAAA,UAAOlE,SAAS,KAAK,SAAsC,GAA3DA,SAA2D,GAA3DwB,cAA2D;EAAA,IAAA2C,GAAA;EAAA,IAAAzE,CAAA,SAAAc,UAAA,IAAAd,CAAA,SAAAgC,gBAAA,IAAAhC,CAAA,SAAA8D,WAAA,IAAA9D,CAAA,SAAAmD,aAAA,IAAAnD,CAAA,SAAAgE,YAAA,IAAAhE,CAAA,SAAA4B,uBAAA,IAAA5B,CAAA,SAAAgB,0BAAA,IAAAhB,CAAA,SAAAuE,GAAA,IAAAvE,CAAA,SAAAwE,GAAA;IAV1EC,GAAA,gBAAArG,MAAA,CAAAS,OAAA,CAAA6F,aAAA,CAACjG,MAAA,CAAAI,OAAK;MACuB+C,uBAAuB,EAAvBA,uBAAuB;MACpBZ,0BAA0B,EAA1BA,0BAA0B;MAC5C2D,SAAS,EAAT,SAAS;MACTxB,QAAa,EAAbA,aAAa;MAChB1C,KAAqC,EAArC8D,GAAqC;MAC/BvC,WAAgB,EAAhBA,gBAAgB;MACrB8B,MAAW,EAAXA,WAAW;MACVE,OAAY,EAAZA,YAAY;MACTlD,UAAU,EAAVA,UAAU;MACXR,SAA2D,EAA3DkE,GAA2D;MAC3CxD,yBAA0B,EAA1BA;IAA0B,CACxD,CAAC;IAAAhB,CAAA,OAAAc,UAAA;IAAAd,CAAA,OAAAgC,gBAAA;IAAAhC,CAAA,OAAA8D,WAAA;IAAA9D,CAAA,OAAAmD,aAAA;IAAAnD,CAAA,OAAAgE,YAAA;IAAAhE,CAAA,OAAA4B,uBAAA;IAAA5B,CAAA,OAAAgB,0BAAA;IAAAhB,CAAA,OAAAuE,GAAA;IAAAvE,CAAA,OAAAwE,GAAA;IAAAxE,CAAA,OAAAyE,GAAA;EAAA;IAAAA,GAAA,GAAAzE,CAAA;EAAA;EAAA,OAZFyE,GAYE;AAAA,CAET;AAED3E,WAAW,CAAC8E,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjG,OAAA,GAEzBiB,WAAW","ignoreList":[]}

package/lib/cjs/utils/numberInput.js

@@ -24,6 +24,7 @@ const formateNumber = ({
   isMoneyInput,
   isTimeInput
 }) => {
+  if (Number.isNaN(number)) return '';
   if (isTimeInput && typeof number === 'string') {
     let hours = 0;
     let minutes = 0;

package/lib/cjs/utils/numberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"numberInput.js","names":["_numberInput","require","parseFloatWithDecimals","stringValue","decimals","parsed","parseFloat","toFixed","exports","formateNumber","number","isMoneyInput","isTimeInput","hours","minutes","firstTwoDigits","substring","includes","replace","firstTwoNumbers","Number","lastTwoNumbers","lastTwoNumbersLength","length","hoursStr","minutesStr","toLocaleString","useGrouping","minimumFractionDigits","undefined","maximumFractionDigits","maximumSignificantDigits","isValidString","isDecimalInput","string","isValid","DECIMAL_TEST","test","MONEY_TEST","TIME_TEST","INTEGER_TEST","startsWith"],"sources":["../../../src/utils/numberInput.ts"],"sourcesContent":["import { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, TIME_TEST } from '../constants/numberInput';\n\ninterface ParseFloatWithDecimals {\n    ({ stringValue, decimals }: { stringValue: string; decimals?: number }): number | null;\n}\n\nexport const parseFloatWithDecimals: ParseFloatWithDecimals = ({ stringValue, decimals }) => {\n    if (stringValue === '') {\n        return null;\n    }\n\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        let firstTwoDigits = number.substring(0, 2);\n\n        if (firstTwoDigits.includes(':')) {\n            firstTwoDigits = firstTwoDigits.replace(':', '');\n\n            firstTwoDigits = `0${firstTwoDigits}`;\n        }\n\n        const firstTwoNumbers = Number(firstTwoDigits);\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    if (string.startsWith('0')) {\n        isValid = true;\n    }\n\n    return isValid;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"numberInput.js","names":["_numberInput","require","parseFloatWithDecimals","stringValue","decimals","parsed","parseFloat","toFixed","exports","formateNumber","number","isMoneyInput","isTimeInput","Number","isNaN","hours","minutes","firstTwoDigits","substring","includes","replace","firstTwoNumbers","lastTwoNumbers","lastTwoNumbersLength","length","hoursStr","minutesStr","toLocaleString","useGrouping","minimumFractionDigits","undefined","maximumFractionDigits","maximumSignificantDigits","isValidString","isDecimalInput","string","isValid","DECIMAL_TEST","test","MONEY_TEST","TIME_TEST","INTEGER_TEST","startsWith"],"sources":["../../../src/utils/numberInput.ts"],"sourcesContent":["import { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST, TIME_TEST } from '../constants/numberInput';\n\ninterface ParseFloatWithDecimals {\n    ({ stringValue, decimals }: { stringValue: string; decimals?: number }): number | null;\n}\n\nexport const parseFloatWithDecimals: ParseFloatWithDecimals = ({ stringValue, decimals }) => {\n    if (stringValue === '') {\n        return null;\n    }\n\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 (Number.isNaN(number)) return '';\n    if (isTimeInput && typeof number === 'string') {\n        let hours = 0;\n        let minutes = 0;\n\n        let firstTwoDigits = number.substring(0, 2);\n\n        if (firstTwoDigits.includes(':')) {\n            firstTwoDigits = firstTwoDigits.replace(':', '');\n\n            firstTwoDigits = `0${firstTwoDigits}`;\n        }\n\n        const firstTwoNumbers = Number(firstTwoDigits);\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    if (string.startsWith('0')) {\n        isValid = true;\n    }\n\n    return isValid;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js

@@ -1,4 +1,4 @@
-import { useSite } from 'chayns-api';
+import { useDevice, useSite } from 'chayns-api';
 import React, { createContext, useContext, useMemo } from 'react';
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';
@@ -38,6 +38,9 @@ const ColorSchemeProvider = ({
     color: internalColor,
     colorMode: internalColorMode
   } = useSite();
+  const {
+    browser
+  } = useDevice();
   const color = colorProp ?? context?.designSettings?.color ?? internalColor;
   const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;
   const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
@@ -58,7 +61,8 @@ const ColorSchemeProvider = ({
     value: contextValue
   }, /*#__PURE__*/React.createElement(StyledColorSchemeProvider, {
     className: "color-scheme-provider",
-    style: style
+    style: style,
+    $browser: browser?.name
   }, children), /*#__PURE__*/React.createElement(GlobalStyle, null)));
 };
 ColorSchemeProvider.displayName = 'ColorSchemeProvider';

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","context","internalColor","internalColorMode","designSettings","overrideParagraphFormat","paragraphFormat","contextValue","createElement","theme","Provider","value","className","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n}) => {\n    const context = useContext(ColorSchemeContext);\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n    const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAAiEA,OAAO,QAAQ,YAAY;AAC5F,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA6CvD,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMK,kBAAkB,gBAAGR,aAAa,CAAsCS,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMT,UAAU,CAACO,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGrB,UAAU,CAACO,kBAAkB,CAAC;EAE9C,MAAM;IAAEK,KAAK,EAAEU,aAAa;IAAER,SAAS,EAAES;EAAkB,CAAC,GAAG1B,OAAO,CAAC,CAAC;EAExE,MAAMe,KAAK,GAAGC,SAAS,IAAIQ,OAAO,EAAEG,cAAc,EAAEZ,KAAK,IAAIU,aAAa;EAC1E,MAAMR,SAAS,GAAGC,aAAa,IAAIM,OAAO,EAAEG,cAAc,EAAEV,SAAS,IAAIS,iBAAiB;EAE1F,MAAME,uBAAuB,GACxBb,KAAK,IAAIA,KAAK,KAAKU,aAAa,IAAKR,SAAS,KAAKS,iBAAiB;EAEzE,MAAMG,eAAe,GAAGzB,OAAO,CAC3B,MAAOwB,uBAAuB,GAAG,EAAE,GAAGjB,SAAU,EAChD,CAACiB,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGtB,cAAc,CAAC;IAChCO,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAM;EACJ,CAAC,CAAC;EAEF,oBACI5B,KAAA,CAAA8B,aAAA,CAACzB,aAAa;IAAC0B,KAAK,EAAEF,YAAY,CAACE;EAAM,gBACrC/B,KAAA,CAAA8B,aAAA,CAACrB,kBAAkB,CAACuB,QAAQ;IAACC,KAAK,EAAEJ;EAAa,gBAC7C7B,KAAA,CAAA8B,aAAA,CAACxB,yBAAyB;IAAC4B,SAAS,EAAC,uBAAuB;IAACd,KAAK,EAAEA;EAAM,GACrEP,QACsB,CAAC,eAC5Bb,KAAA,CAAA8B,aAAA,CAACtB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAACuB,WAAW,GAAG,qBAAqB;AAEvD,eAAevB,mBAAmB","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.js","names":["useDevice","useSite","React","createContext","useContext","useMemo","createGlobalStyle","ThemeProvider","StyledColorSchemeProvider","useChaynsTheme","GlobalStyle","ColorSchemeContext","undefined","useColorScheme","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","context","internalColor","internalColorMode","browser","designSettings","overrideParagraphFormat","paragraphFormat","contextValue","createElement","theme","Provider","value","className","$browser","name","displayName"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import {\n    ChaynsDesignSettings,\n    ChaynsParagraphFormat,\n    ColorMode,\n    useDevice,\n    useSite,\n} from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\nimport { BrowserName } from '../../types/chayns';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n}) => {\n    const context = useContext(ColorSchemeContext);\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const { browser } = useDevice();\n\n    const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n    const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={style}\n                    $browser={browser?.name as BrowserName}\n                >\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"AAAA,SAIIA,SAAS,EACTC,OAAO,QACJ,YAAY;AACnB,OAAOC,KAAK,IAAIC,aAAa,EAAiBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAChF,SAASC,iBAAiB,EAAEC,aAAa,QAAQ,mBAAmB;AACpE,SAASC,yBAAyB,QAAQ,8BAA8B;AACxE,SAASC,cAAc,QAAQ,wBAAwB;AA8CvD,MAAMC,WAAW,GAAGJ,iBAAiB;AACrC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMK,kBAAkB,gBAAGR,aAAa,CAAsCS,SAAS,CAAC;AAE/F,OAAO,MAAMC,cAAc,GAAGA,CAAA,KAAMT,UAAU,CAACO,kBAAkB,CAAC;AAElE,MAAMG,mBAAiD,GAAGA,CAAC;EACvDC,QAAQ;EACRC,KAAK,EAAEC,SAAS;EAChBC,SAAS,EAAEC,aAAa;EACxBC,cAAc;EACdC,MAAM;EACNC,KAAK,GAAG,CAAC,CAAC;EACVC,SAAS;EACTC;AACJ,CAAC,KAAK;EACF,MAAMC,OAAO,GAAGrB,UAAU,CAACO,kBAAkB,CAAC;EAE9C,MAAM;IAAEK,KAAK,EAAEU,aAAa;IAAER,SAAS,EAAES;EAAkB,CAAC,GAAG1B,OAAO,CAAC,CAAC;EAExE,MAAM;IAAE2B;EAAQ,CAAC,GAAG5B,SAAS,CAAC,CAAC;EAE/B,MAAMgB,KAAK,GAAGC,SAAS,IAAIQ,OAAO,EAAEI,cAAc,EAAEb,KAAK,IAAIU,aAAa;EAC1E,MAAMR,SAAS,GAAGC,aAAa,IAAIM,OAAO,EAAEI,cAAc,EAAEX,SAAS,IAAIS,iBAAiB;EAE1F,MAAMG,uBAAuB,GACxBd,KAAK,IAAIA,KAAK,KAAKU,aAAa,IAAKR,SAAS,KAAKS,iBAAiB;EAEzE,MAAMI,eAAe,GAAG1B,OAAO,CAC3B,MAAOyB,uBAAuB,GAAG,EAAE,GAAGlB,SAAU,EAChD,CAACkB,uBAAuB,CAC5B,CAAC;EAED,MAAME,YAAY,GAAGvB,cAAc,CAAC;IAChCO,KAAK;IACLO,SAAS;IACTL,SAAS;IACTE,cAAc;IACdC,MAAM;IACNG,eAAe;IACf;IACAO;EACJ,CAAC,CAAC;EAEF,oBACI7B,KAAA,CAAA+B,aAAA,CAAC1B,aAAa;IAAC2B,KAAK,EAAEF,YAAY,CAACE;EAAM,gBACrChC,KAAA,CAAA+B,aAAA,CAACtB,kBAAkB,CAACwB,QAAQ;IAACC,KAAK,EAAEJ;EAAa,gBAC7C9B,KAAA,CAAA+B,aAAA,CAACzB,yBAAyB;IACtB6B,SAAS,EAAC,uBAAuB;IACjCf,KAAK,EAAEA,KAAM;IACbgB,QAAQ,EAAEV,OAAO,EAAEW;EAAoB,GAEtCxB,QACsB,CAAC,eAC5Bb,KAAA,CAAA+B,aAAA,CAACvB,WAAW,MAAE,CACW,CAClB,CAAC;AAExB,CAAC;AAEDI,mBAAmB,CAAC0B,WAAW,GAAG,qBAAqB;AAEvD,eAAe1B,mBAAmB","ignoreList":[]}

package/lib/esm/components/color-scheme-provider/ColorSchemeProvider.styles.js

@@ -1,5 +1,5 @@
 import { getAvailableColorList } from '@chayns/colors';
-import { styled } from 'styled-components';
+import { css, styled } from 'styled-components';
 // noinspection CssUnresolvedCustomProperty
 export const StyledColorSchemeProvider = styled.div`
     color: var(--chayns-color--text);
@@ -21,5 +21,42 @@ export const StyledColorSchemeProvider = styled.div`
     .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {
         margin-top: 0;
     }
+
+    // Styles for custom scrollbar
+    .chayns-scrollbar {
+        ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? css`
+                      scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                      scrollbar-width: thin;
+                  ` : css`
+                      &::-webkit-scrollbar {
+                          width: 10px;
+                          height: 10px;
+                      }
+
+                      &::-webkit-scrollbar-track {
+                          background-color: transparent;
+                      }
+
+                      &::-webkit-scrollbar-button {
+                          background-color: transparent;
+                          height: 5px;
+                          width: 5px;
+                      }
+
+                      &::-webkit-scrollbar-thumb {
+                          background-color: rgba(${theme['text-rgb']}, 0.15);
+                          border-radius: 20px;
+                          background-clip: padding-box;
+                          border: solid 3px transparent;
+                      }
+
+                      &::-webkit-scrollbar-corner {
+                          background-color: transparent;
+                      }
+                  `}
+    }
 `;
 //# sourceMappingURL=ColorSchemeProvider.styles.js.map