@chayns-components/core 5.0.0-beta.89 → 5.0.0-beta.891

package/lib/cjs/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMentionFinderItemImage = exports.StyledMentionFinderItemContentName = exports.StyledMentionFinderItemContentInfo = exports.StyledMentionFinderItemContent = exports.StyledMentionFinderItem = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const StyledMentionFinderItem = exports.StyledMentionFinderItem = _styledComponents.default.div`
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    padding: 10px 8px;
+
+    &:not(:last-child) {
+        border-bottom: 1px solid
+            rgba(${({
+  theme
+}) => theme['text-rgb']}, 0.15);
+    }
+
+    &:nth-child(even) {
+        background-color: ${({
+  theme
+}) => theme['101']};
+    }
+
+    ${({
+  $isActive,
+  theme
+}) => $isActive && (0, _styledComponents.css)`
+            background-color: ${theme['102']} !important;
+        `}
+`;
+const StyledMentionFinderItemImage = exports.StyledMentionFinderItemImage = _styledComponents.default.img`
+    background-color: rgba(
+        ${({
+  theme
+}) => theme['text-rgb']},
+        0.1
+    );
+    border-radius: ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage ? '50%' : 'initial'};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    flex: 0 0 auto;
+    height: 40px;
+    overflow: hidden;
+    transition: border-radius 0.3s ease;
+    width: 40px;
+`;
+const StyledMentionFinderItemContent = exports.StyledMentionFinderItemContent = _styledComponents.default.div`
+    color: ${({
+  theme
+}) => theme.text};
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    line-height: normal;
+    margin-left: 10px;
+    min-width: 0;
+`;
+const StyledMentionFinderItemContentName = exports.StyledMentionFinderItemContentName = _styledComponents.default.div``;
+const StyledMentionFinderItemContentInfo = exports.StyledMentionFinderItemContentInfo = _styledComponents.default.div`
+    font-size: 85%;
+    margin-top: 2px;
+    opacity: 0.75;
+`;
+//# sourceMappingURL=MentionFinderItem.styles.js.map

package/lib/cjs/components/mention-finder/mention-finder-item/MentionFinderItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinderItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMentionFinderItem","exports","styled","div","theme","$isActive","css","StyledMentionFinderItemImage","img","$shouldShowRoundImage","StyledMentionFinderItemContent","text","StyledMentionFinderItemContentName","StyledMentionFinderItemContentInfo"],"sources":["../../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMentionFinderItemProps = WithTheme<{ $isActive: boolean }>;\n\nexport const StyledMentionFinderItem = styled.div<StyledMentionFinderItemProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    padding: 10px 8px;\n\n    &:not(:last-child) {\n        border-bottom: 1px solid\n            rgba(${({ theme }: StyledMentionFinderItemProps) => theme['text-rgb']}, 0.15);\n    }\n\n    &:nth-child(even) {\n        background-color: ${({ theme }: StyledMentionFinderItemProps) => theme['101']};\n    }\n\n    ${({ $isActive, theme }) =>\n        $isActive &&\n        css`\n            background-color: ${theme['102']} !important;\n        `}\n`;\n\ntype StyledMentionFinderItemImageProps = WithTheme<{\n    $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledMentionFinderItemImage = styled.img<StyledMentionFinderItemImageProps>`\n    background-color: rgba(\n        ${({ theme }: StyledMentionFinderItemImageProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: ${({ $shouldShowRoundImage }) => ($shouldShowRoundImage ? '50%' : 'initial')};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledMentionFinderItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    flex: 0 0 auto;\n    height: 40px;\n    overflow: hidden;\n    transition: border-radius 0.3s ease;\n    width: 40px;\n`;\n\ntype StyledMentionFinderItemContentProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemContent = styled.div`\n    color: ${({ theme }: StyledMentionFinderItemContentProps) => theme.text};\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    justify-content: center;\n    line-height: normal;\n    margin-left: 10px;\n    min-width: 0;\n`;\n\nexport const StyledMentionFinderItemContentName = styled.div``;\n\nexport const StyledMentionFinderItemContentInfo = styled.div`\n    font-size: 85%;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAC,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAH,wBAAAG,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAKzC,MAAMW,uBAAuB,GAAAC,OAAA,CAAAD,uBAAA,GAAGE,yBAAM,CAACC,GAAiC;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEC;AAAoC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AACjF;AACA;AACA;AACA,4BAA4B,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AACrF;AACA;AACA,MAAM,CAAC;EAAEC,SAAS;EAAED;AAAM,CAAC,KACnBC,SAAS,IACT,IAAAC,qBAAG;AACX,gCAAgCF,KAAK,CAAC,KAAK,CAAC;AAC5C,SAAS;AACT,CAAC;AAMM,MAAMG,4BAA4B,GAAAN,OAAA,CAAAM,4BAAA,GAAGL,yBAAM,CAACM,GAAsC;AACzF;AACA,UAAU,CAAC;EAAEJ;AAAyC,CAAC,KAAKA,KAAK,CAAC,UAAU,CAAC;AAC7E;AACA;AACA,qBAAqB,CAAC;EAAEK;AAAsB,CAAC,KAAMA,qBAAqB,GAAG,KAAK,GAAG,SAAU;AAC/F;AACA,eAAe,CAAC;EAAEL;AAAyC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AACjF;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMM,8BAA8B,GAAAT,OAAA,CAAAS,8BAAA,GAAGR,yBAAM,CAACC,GAAG;AACxD,aAAa,CAAC;EAAEC;AAA2C,CAAC,KAAKA,KAAK,CAACO,IAAI;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,kCAAkC,GAAAX,OAAA,CAAAW,kCAAA,GAAGV,yBAAM,CAACC,GAAG,EAAE;AAEvD,MAAMU,kCAAkC,GAAAZ,OAAA,CAAAY,kCAAA,GAAGX,yBAAM,CAACC,GAAG;AAC5D;AACA;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -0,0 +1,153 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const NumberInput = ({
+  isDecimalInput,
+  isMoneyInput,
+  isTimeInput,
+  isInvalid,
+  maxNumber = Infinity,
+  value,
+  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 [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 onLocalChange = event => {
+    const newValue = event.target.value;
+    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.length === 0 ? '0' : plainText;
+    let newIsInvalid = false;
+    let parsedNumber = null;
+    if (!isTimeInput) {
+      parsedNumber = (0, _numberInput2.parseFloatWithDecimals)({
+        stringValue: sanitizedValue.replace(',', '.').replaceAll(':', '').replace('€', ''),
+        decimals: isMoneyInput ? 2 : undefined
+      });
+      if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
+        newIsInvalid = true;
+      }
+      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') {
+      onChange(newStringValue.replaceAll('.', ''));
+    }
+    if (typeof onBlur === 'function') {
+      if (isTimeInput) {
+        onBlur(newStringValue, newIsInvalid);
+      } else {
+        onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);
+      }
+    }
+  };
+  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('.', ''));
+
+    // This will update the external state
+    if (typeof onChange === 'function') {
+      onChange(formattedValue.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(':', ''),
+        decimals: isMoneyInput ? 2 : undefined
+      });
+
+      // checks, if a given number is invalid, if the input is not in focus
+      if (!hasFocus) {
+        setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);
+      }
+    }
+    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);
+    }
+  }, [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
+  });
+};
+NumberInput.displayName = 'NumberInput';
+var _default = exports.default = NumberInput;
+//# sourceMappingURL=NumberInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_numberInput","_numberInput2","_Input","_interopRequireDefault","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","NumberInput","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","shouldRemainPlaceholder","setShouldRemainPlaceholder","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","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, 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     * 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    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 onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        const sanitizedValueString = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '');\n\n        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.length === 0 ? '0' : 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 (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\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') {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            if (isTimeInput) {\n                onBlur(newStringValue, newIsInvalid);\n            } else {\n                onBlur(parsedNumber === 0 ? null : 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('.', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function') {\n            onChange(formattedValue.replaceAll('.', ''));\n        }\n\n        setIsValueInvalid(false);\n        setHasFocus(true);\n    };\n\n    // updates the formattedValue, when the value changes\n    useEffect(() => {\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            // checks, if a given number is invalid, if the input is not in focus\n            if (!hasFocus) {\n                setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n            }\n        }\n\n        setFormattedValue(\n            plainText.length === 0\n                ? ''\n                : `${formateNumber({\n                      number: isTimeInput ? plainText : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  })}${isMoneyInput ? ' €' : ''}`,\n        );\n    }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value);\n        }\n    }, [value]);\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":[]}

package/lib/cjs/components/page-provider/PageProvider.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _styledComponents = require("styled-components");
+var _pageProvider = require("../../utils/pageProvider");
+var _ColorSchemeProvider = _interopRequireDefault(require("../color-scheme-provider/ColorSchemeProvider"));
+var _PageProvider = require("./PageProvider.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+`;
+const PageProvider = ({
+  children,
+  color,
+  colorMode,
+  cssVariables = {},
+  secondaryColor,
+  siteId,
+  style = {},
+  designSettings,
+  shouldRemovePadding,
+  shouldUseUsableHeight
+}) => {
+  const [usableHeight, setUsableHeight] = (0, _react.useState)(0);
+  const [padding, setPadding] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    const fetchUsableHeight = async () => {
+      const height = await (0, _pageProvider.getUsableHeight)();
+      setUsableHeight(height);
+    };
+    void fetchUsableHeight();
+  }, []);
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      setPadding((0, _pageProvider.getPagePadding)());
+    };
+    setPadding((0, _pageProvider.getPagePadding)());
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, [padding]);
+  return /*#__PURE__*/_react.default.createElement(_PageProvider.StyledPageProvider, {
+    className: "page-provider",
+    $padding: shouldRemovePadding ? 0 : padding,
+    $usableHeight: shouldUseUsableHeight ? usableHeight : undefined
+  }, /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.default, {
+    color: color,
+    secondaryColor: secondaryColor,
+    colorMode: colorMode,
+    style: style,
+    siteId: siteId,
+    designSettings: designSettings,
+    cssVariables: cssVariables
+  }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null));
+};
+PageProvider.displayName = 'PageProvider';
+var _default = exports.default = PageProvider;
+//# sourceMappingURL=PageProvider.js.map

package/lib/cjs/components/page-provider/PageProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageProvider.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_pageProvider","_ColorSchemeProvider","_interopRequireDefault","_PageProvider","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","GlobalStyle","createGlobalStyle","PageProvider","children","color","colorMode","cssVariables","secondaryColor","siteId","style","designSettings","shouldRemovePadding","shouldUseUsableHeight","usableHeight","setUsableHeight","useState","padding","setPadding","useEffect","fetchUsableHeight","height","getUsableHeight","handleResize","getPagePadding","window","addEventListener","removeEventListener","createElement","StyledPageProvider","className","$padding","$usableHeight","undefined","displayName","_default","exports"],"sources":["../../../../src/components/page-provider/PageProvider.tsx"],"sourcesContent":["import React, { FC, useEffect, useState, type CSSProperties } from 'react';\nimport { createGlobalStyle } from 'styled-components';\nimport { getPagePadding, getUsableHeight } from '../../utils/pageProvider';\nimport ColorSchemeProvider, {\n    type ColorSchemeProviderProps,\n} from '../color-scheme-provider/ColorSchemeProvider';\nimport { StyledPageProvider } from './PageProvider.styles';\n\ninterface PageProviderProps extends ColorSchemeProviderProps {\n    /**\n     * Whether the padding should be removed.\n     */\n    shouldRemovePadding?: boolean;\n    /**\n     * Whether the usable height should be used.\n     */\n    shouldUseUsableHeight?: boolean;\n}\n\nconst GlobalStyle = createGlobalStyle`\n  *, *::before, *::after {\n    box-sizing: border-box;\n  }\n`;\n\nconst PageProvider: FC<PageProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    siteId,\n    style = {},\n    designSettings,\n    shouldRemovePadding,\n    shouldUseUsableHeight,\n}) => {\n    const [usableHeight, setUsableHeight] = useState(0);\n    const [padding, setPadding] = useState<CSSProperties['padding']>();\n\n    useEffect(() => {\n        const fetchUsableHeight = async () => {\n            const height = await getUsableHeight();\n            setUsableHeight(height);\n        };\n\n        void fetchUsableHeight();\n    }, []);\n\n    useEffect(() => {\n        const handleResize = () => {\n            setPadding(getPagePadding());\n        };\n\n        setPadding(getPagePadding());\n\n        window.addEventListener('resize', handleResize);\n\n        return () => {\n            window.removeEventListener('resize', handleResize);\n        };\n    }, [padding]);\n\n    return (\n        <StyledPageProvider\n            className=\"page-provider\"\n            $padding={shouldRemovePadding ? 0 : padding}\n            $usableHeight={shouldUseUsableHeight ? usableHeight : undefined}\n        >\n            <ColorSchemeProvider\n                color={color}\n                secondaryColor={secondaryColor}\n                colorMode={colorMode}\n                style={style}\n                siteId={siteId}\n                designSettings={designSettings}\n                cssVariables={cssVariables}\n            >\n                {children}\n            </ColorSchemeProvider>\n            <GlobalStyle />\n        </StyledPageProvider>\n    );\n};\nPageProvider.displayName = 'PageProvider';\n\nexport default PageProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/page-provider/PageProvider.styles.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPageProvider = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledPageProvider = exports.StyledPageProvider = _styledComponents.default.div`
+    padding: ${({
+  $padding
+}) => $padding};
+    height: ${({
+  $usableHeight
+}) => $usableHeight ? `${$usableHeight}px` : undefined};
+    position: relative;
+
+    .color-scheme-provider:first-child:not(td) {
+        & > h1,
+        & > .h1,
+        & > h2,
+        & > .h2,
+        & > h3,
+        & > .h3,
+        & > h4,
+        & > .h4,
+        & > h5,
+        & > .h5 {
+            &:first-of-type:first-child {
+                margin-top: 0;
+            }
+        }
+    }
+`;
+//# sourceMappingURL=PageProvider.styles.js.map

package/lib/cjs/components/page-provider/PageProvider.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageProvider.styles.js","names":["_styledComponents","_interopRequireDefault","require","e","__esModule","default","StyledPageProvider","exports","styled","div","$padding","$usableHeight","undefined"],"sources":["../../../../src/components/page-provider/PageProvider.styles.ts"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport styled from 'styled-components';\n\ntype StyledPageProviderProps = {\n    $padding?: CSSProperties['padding'];\n    $usableHeight?: CSSProperties['height'];\n};\n\nexport const StyledPageProvider = styled.div<StyledPageProviderProps>`\n    padding: ${({ $padding }) => $padding};\n    height: ${({ $usableHeight }) => ($usableHeight ? `${$usableHeight}px` : undefined)};\n    position: relative;\n\n    .color-scheme-provider:first-child:not(td) {\n        & > h1,\n        & > .h1,\n        & > h2,\n        & > .h2,\n        & > h3,\n        & > .h3,\n        & > h4,\n        & > .h4,\n        & > h5,\n        & > .h5 {\n            &:first-of-type:first-child {\n                margin-top: 0;\n            }\n        }\n    }\n`;\n"],"mappings":";;;;;;AACA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAOhC,MAAMG,kBAAkB,GAAAC,OAAA,CAAAD,kBAAA,GAAGE,yBAAM,CAACC,GAA4B;AACrE,eAAe,CAAC;EAAEC;AAAS,CAAC,KAAKA,QAAQ;AACzC,cAAc,CAAC;EAAEC;AAAc,CAAC,KAAMA,aAAa,GAAG,GAAGA,aAAa,IAAI,GAAGC,SAAU;AACvF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/popup/Popup.js

@@ -0,0 +1,220 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _chaynsApi = require("chayns-api");
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _reactDom = require("react-dom");
+var _uuid = require("../../hooks/uuid");
+var _popup = require("../../types/popup");
+var _AreaContextProvider = _interopRequireDefault(require("../area-provider/AreaContextProvider"));
+var _PopupContentWrapper = _interopRequireDefault(require("./popup-content-wrapper/PopupContentWrapper"));
+var _Popup = require("./Popup.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Popup = /*#__PURE__*/(0, _react.forwardRef)(({
+  content,
+  onShow,
+  container = document.querySelector('.page-provider') || document.querySelector('.tapp') || document.body,
+  onHide,
+  children,
+  shouldShowOnHover = false,
+  shouldUseChildrenWidth = true,
+  yOffset = 0
+}, ref) => {
+  const [coordinates, setCoordinates] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const [alignment, setAlignment] = (0, _react.useState)(_popup.PopupAlignment.TopLeft);
+  const [offset, setOffset] = (0, _react.useState)(0);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [portal, setPortal] = (0, _react.useState)();
+  const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
+  const [isMeasuring, setIsMeasuring] = (0, _react.useState)(true);
+  const [pseudoSize, setPseudoSize] = (0, _react.useState)();
+  const timeout = (0, _react.useRef)();
+  const uuid = (0, _uuid.useUuid)();
+
+  // ToDo: Replace with hook if new chayns api is ready
+
+  const popupContentRef = (0, _react.useRef)(null);
+  const popupPseudoContentRef = (0, _react.useRef)(null);
+  const popupRef = (0, _react.useRef)(null);
+  const measureHeight = () => {
+    if (popupPseudoContentRef.current) {
+      const height = popupPseudoContentRef.current.offsetHeight;
+      const width = popupPseudoContentRef.current.offsetWidth + 1;
+      setPseudoSize({
+        height,
+        width
+      });
+    }
+  };
+  (0, _react.useEffect)(() => {
+    measureHeight();
+    setIsMeasuring(false);
+  }, []);
+  (0, _react.useEffect)(() => {
+    const handleResize = () => {
+      setIsMeasuring(true);
+      setTimeout(() => {
+        measureHeight();
+        setIsMeasuring(false);
+      }, 0);
+    };
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+  const handleShow = (0, _react.useCallback)(() => {
+    if (popupRef.current && pseudoSize) {
+      const {
+        height: pseudoHeight,
+        width: pseudoWidth
+      } = pseudoSize;
+      const {
+        height: childrenHeight,
+        left: childrenLeft,
+        top: childrenTop,
+        width: childrenWidth
+      } = popupRef.current.getBoundingClientRect();
+      if (pseudoHeight > childrenTop - 25) {
+        let isRight = false;
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(_popup.PopupAlignment.BottomRight);
+          isRight = true;
+        } else {
+          setAlignment(_popup.PopupAlignment.BottomLeft);
+        }
+        const x = childrenLeft + childrenWidth / 2;
+        const y = childrenTop + childrenHeight + yOffset;
+        let newOffset;
+        if (isRight) {
+          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
+        } else {
+          newOffset = 0;
+          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
+        }
+        setOffset(newOffset);
+        const newX = x - newOffset;
+        setCoordinates({
+          x: newX < 23 ? 23 : newX,
+          y: y - yOffset
+        });
+      } else {
+        let isRight = false;
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(_popup.PopupAlignment.TopRight);
+          isRight = true;
+        } else {
+          setAlignment(_popup.PopupAlignment.TopLeft);
+        }
+        const x = childrenLeft + childrenWidth / 2;
+        const y = childrenTop - yOffset;
+        let newOffset;
+        if (isRight) {
+          newOffset = x + pseudoWidth >= window.innerWidth ? x + pseudoWidth - window.innerWidth : 0;
+        } else {
+          newOffset = 0;
+          const right = window.innerWidth - (childrenLeft + childrenWidth / 2);
+          newOffset = right + pseudoWidth >= window.innerWidth ? right + pseudoWidth - window.innerWidth : 0;
+        }
+        setOffset(newOffset);
+        const newX = x - newOffset;
+        setCoordinates({
+          x: newX < 23 ? 23 : newX,
+          y: y - yOffset
+        });
+      }
+      setIsOpen(true);
+    }
+  }, [pseudoSize, yOffset]);
+  const handleChildrenClick = () => {
+    handleShow();
+  };
+  const handleHide = (0, _react.useCallback)(() => {
+    setIsOpen(false);
+  }, []);
+  const handleMouseEnter = (0, _react.useCallback)(() => {
+    if (shouldShowOnHover) {
+      window.clearTimeout(timeout.current);
+      handleShow();
+    }
+  }, [handleShow, shouldShowOnHover]);
+  const handleMouseLeave = (0, _react.useCallback)(() => {
+    if (!shouldShowOnHover) {
+      return;
+    }
+    timeout.current = window.setTimeout(() => {
+      handleHide();
+    }, 500);
+  }, [handleHide, shouldShowOnHover]);
+  const handleDocumentClick = (0, _react.useCallback)(event => {
+    var _popupContentRef$curr;
+    if (!((_popupContentRef$curr = popupContentRef.current) !== null && _popupContentRef$curr !== void 0 && _popupContentRef$curr.contains(event.target))) {
+      handleHide();
+    }
+  }, [handleHide]);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    hide: handleHide,
+    show: handleShow
+  }), [handleHide, handleShow]);
+  (0, _react.useEffect)(() => {
+    void (0, _chaynsApi.getWindowMetrics)().then(result => {
+      if (result.topBarHeight) {
+        setMenuHeight(result.topBarHeight);
+      }
+    });
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (isOpen) {
+      document.addEventListener('click', handleDocumentClick, true);
+      window.addEventListener('blur', handleHide);
+      if (typeof onShow === 'function') {
+        onShow();
+      }
+    } else if (typeof onHide === 'function') {
+      onHide();
+    }
+    return () => {
+      document.removeEventListener('click', handleDocumentClick, true);
+      window.removeEventListener('blur', handleHide);
+    };
+  }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);
+  (0, _react.useEffect)(() => {
+    setPortal(() => /*#__PURE__*/(0, _reactDom.createPortal)(/*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+      initial: false
+    }, isOpen && /*#__PURE__*/_react.default.createElement(_PopupContentWrapper.default, {
+      width: (pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width) ?? 0,
+      offset: offset,
+      coordinates: coordinates,
+      key: `tooltip_${uuid}`,
+      alignment: alignment,
+      ref: popupContentRef,
+      onMouseLeave: handleMouseLeave,
+      onMouseEnter: handleMouseEnter
+    }, /*#__PURE__*/_react.default.createElement(_AreaContextProvider.default, {
+      shouldChangeColor: false
+    }, content))), container));
+  }, [alignment, container, content, coordinates, handleMouseEnter, handleMouseLeave, isOpen, offset, pseudoSize === null || pseudoSize === void 0 ? void 0 : pseudoSize.width, uuid]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isMeasuring && /*#__PURE__*/_react.default.createElement(_Popup.StyledPopupPseudo, {
+    ref: popupPseudoContentRef,
+    $menuHeight: menuHeight
+  }, content), /*#__PURE__*/_react.default.createElement(_Popup.StyledPopup, {
+    ref: popupRef,
+    onClick: handleChildrenClick,
+    onMouseLeave: handleMouseLeave,
+    onMouseEnter: handleMouseEnter,
+    $shouldUseChildrenWidth: shouldUseChildrenWidth
+  }, children), portal);
+});
+Popup.displayName = 'Popup';
+var _default = exports.default = Popup;
+//# sourceMappingURL=Popup.js.map