@chayns-components/core 5.0.0-beta.4 → 5.0.0-beta.400

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

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _Input = _interopRequireDefault(require("../input/Input"));
+var _number = require("./constants/number");
+var _number2 = require("./utils/number");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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 = _ref => {
+  let {
+    isDecimalInput,
+    isMoneyInput,
+    maxNumber = Infinity,
+    value,
+    placeholder,
+    onBlur,
+    isDisabled,
+    onChange,
+    minNumber = -Infinity
+  } = _ref;
+  // 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 [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(_number.NUMBER_CLEAR_REGEX, '');
+    const valueToCheck = sanitizedValueString.replaceAll(',', '.');
+    if (!(0, _number2.isValidString)({
+      string: valueToCheck,
+      isMoneyInput,
+      isDecimalInput
+    })) {
+      return;
+    }
+    setPlainText(sanitizedValueString.replaceAll('.', ','));
+    if (typeof onChange === 'function') {
+      onChange(sanitizedValueString.replaceAll('.', ','));
+    }
+  };
+  const onLocalBlur = () => {
+    const sanitizedValue = plainText.length === 0 ? '0' : plainText;
+    let isInvalid = false;
+    const parsedNumber = (0, _number2.parseFloatWithDecimals)({
+      stringValue: sanitizedValue.replace(',', '.'),
+      decimals: isMoneyInput ? 2 : undefined
+    });
+    if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {
+      isInvalid = true;
+    }
+    setIsValueInvalid(isInvalid);
+    const newStringValue = plainText.length === 0 ? '' : (0, _number2.formateNumber)({
+      number: parsedNumber,
+      isMoneyInput
+    });
+    setFormattedValue(newStringValue);
+    setPlainText(newStringValue.replaceAll('.', ''));
+    setHasFocus(false);
+    if (typeof onChange === 'function') {
+      onChange(newStringValue.replaceAll('.', ''));
+    }
+    if (typeof onBlur === 'function') {
+      onBlur(parsedNumber === 0 ? null : parsedNumber, isInvalid);
+    }
+  };
+  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)(() => {
+    const parsedNumber = (0, _number2.parseFloatWithDecimals)({
+      stringValue: plainText.replace(',', '.'),
+      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, _number2.formateNumber)({
+      number: parsedNumber,
+      isMoneyInput
+    }));
+  }, [hasFocus, isMoneyInput, maxNumber, minNumber, plainText]);
+  (0, _react.useEffect)(() => {
+    if (typeof value === 'string') {
+      setPlainText(value);
+    }
+  }, [value]);
+  return /*#__PURE__*/_react.default.createElement(_Input.default, {
+    inputMode: "decimal",
+    onChange: onLocalChange,
+    value: hasFocus ? plainText : formattedValue,
+    placeholder: localPlaceholder,
+    onBlur: onLocalBlur,
+    onFocus: onLocalFocus,
+    isDisabled: isDisabled,
+    isInvalid: isValueInvalid
+  });
+};
+NumberInput.displayName = 'NumberInput';
+var _default = exports.default = NumberInput;
+//# sourceMappingURL=NumberInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.js","names":["_react","_interopRequireWildcard","require","_Input","_interopRequireDefault","_number","_number2","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","NumberInput","_ref","isDecimalInput","isMoneyInput","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","minNumber","plainText","setPlainText","useState","formattedValue","setFormattedValue","hasFocus","setHasFocus","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","NUMBER_CLEAR_REGEX","valueToCheck","replaceAll","isValidString","string","onLocalBlur","sanitizedValue","length","isInvalid","parsedNumber","parseFloatWithDecimals","stringValue","decimals","newStringValue","formateNumber","number","onLocalFocus","useEffect","createElement","inputMode","onFocus","displayName","_default","exports"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport Input from '../input/Input';\nimport { NUMBER_CLEAR_REGEX } from './constants/number';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from './utils/number';\n\nexport type NumberInputProps = {\n    /**\n     * Applies rules for decimal input.\n     * Enables the user to input one zero as number before the comma\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one zero before the comma\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * Limits the number to this value\n     */\n    minNumber?: number;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | null, isInvalid: boolean) => void;\n    /**\n     * Callback function that is called when the input changes\n     * It will pass the text from the input\n     */\n    onChange?: (newValue: string) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * The value, that should be displayed in the input, when it is in focus.\n     * You can also pass a stringified number as default value.\n     * NOTE: If you pass a stringified number, it will be formatted to the selected format\n     */\n    value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = (\n    {\n        isDecimalInput,\n        isMoneyInput,\n        maxNumber = Infinity,\n        value,\n        placeholder,\n        onBlur,\n        isDisabled,\n        onChange,\n        minNumber = -Infinity\n    }) => {\n    // the plainText will be shown in the input, when it is in focus\n    const [plainText, setPlainText] = useState<string>('');\n    // the formattedValue will be shown in the input, when it is not in focus\n    const [formattedValue, setFormattedValue] = useState<string>('');\n    const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n    const [isValueInvalid, setIsValueInvalid] = useState(false);\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> =\n        (event) => {\n            const newValue = event.target.value;\n\n            const sanitizedValueString = newValue\n                // Removes everything except numbers, commas and points\n                .replace(NUMBER_CLEAR_REGEX, '');\n\n            const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n            if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput })) {\n                return;\n            }\n\n            setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n            if (typeof onChange === 'function') {\n                onChange(sanitizedValueString.replaceAll('.', ','));\n            }\n        };\n\n    const onLocalBlur = () => {\n        const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n        let isInvalid = false;\n\n        const parsedNumber = parseFloatWithDecimals({\n            stringValue: sanitizedValue.replace(',', '.'),\n            decimals: isMoneyInput ? 2 : undefined\n        });\n\n        if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n            isInvalid = true;\n        }\n\n        setIsValueInvalid(isInvalid);\n\n        const newStringValue = plainText.length === 0\n            ? ''\n            : formateNumber({\n                number: parsedNumber,\n                isMoneyInput,\n            });\n\n        setFormattedValue(newStringValue);\n        setPlainText(newStringValue.replaceAll('.', ''));\n        setHasFocus(false);\n\n        if (typeof onChange === 'function') {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            onBlur(parsedNumber === 0 ? null : parsedNumber, isInvalid);\n        }\n    };\n\n    const onLocalFocus = () => {\n        // formattedValue will be a number string with german number format (e.g. 1.000,00)\n        // It will remove all dots, so that the user can type in the number\n        setPlainText(formattedValue.replaceAll('.', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function') {\n            onChange(formattedValue.replaceAll('.', ''));\n        }\n\n        setIsValueInvalid(false);\n        setHasFocus(true);\n    };\n\n    // updates the formattedValue, when the value changes\n    useEffect(() => {\n        const parsedNumber = parseFloatWithDecimals({\n            stringValue: plainText.replace(',', '.'),\n            decimals: isMoneyInput ? 2 : undefined\n        });\n\n        // checks, if a given number is invalid, if the input is not in focus\n        if (!hasFocus) {\n            setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n        }\n\n        setFormattedValue(plainText.length === 0\n            ? ''\n            : formateNumber({\n                number: parsedNumber,\n                isMoneyInput,\n            }));\n    }, [hasFocus, isMoneyInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value);\n        }\n    }, [value]);\n\n    return (\n        <Input\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={hasFocus ? plainText : formattedValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onLocalFocus}\n            isDisabled={isDisabled}\n            isInvalid={isValueInvalid}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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"}

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

@@ -0,0 +1,4 @@
+export declare const NUMBER_CLEAR_REGEX: RegExp;
+export declare const INTEGER_TEST: RegExp;
+export declare const DECIMAL_TEST: RegExp;
+export declare const MONEY_TEST: RegExp;

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

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

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

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

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

@@ -0,0 +1,21 @@
+interface ParseFloatWithDecimals {
+    ({ stringValue, decimals }: {
+        stringValue: string;
+        decimals?: number;
+    }): number;
+}
+export declare const parseFloatWithDecimals: ParseFloatWithDecimals;
+interface FormateNumberOptions {
+    number: number | null;
+    isMoneyInput?: boolean;
+}
+export declare const formateNumber: ({ number, isMoneyInput }: FormateNumberOptions) => string;
+interface IsValidString {
+    (config: {
+        string: string;
+        isDecimalInput?: boolean;
+        isMoneyInput?: boolean;
+    }): boolean;
+}
+export declare const isValidString: IsValidString;
+export {};

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

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.parseFloatWithDecimals = exports.isValidString = exports.formateNumber = void 0;
+var _number = require("../constants/number");
+const parseFloatWithDecimals = _ref => {
+  let {
+    stringValue,
+    decimals
+  } = _ref;
+  const parsed = parseFloat(stringValue);
+  if (decimals) {
+    return parseFloat(parsed.toFixed(decimals));
+  }
+  return parsed;
+};
+exports.parseFloatWithDecimals = parseFloatWithDecimals;
+const formateNumber = _ref2 => {
+  let {
+    number,
+    isMoneyInput
+  } = _ref2;
+  if (typeof number !== 'number') {
+    return '';
+  }
+  return number.toLocaleString('de-DE', {
+    useGrouping: true,
+    minimumFractionDigits: isMoneyInput ? 2 : undefined,
+    maximumFractionDigits: isMoneyInput ? 2 : undefined,
+    maximumSignificantDigits: !isMoneyInput ? 20 : undefined
+  });
+};
+exports.formateNumber = formateNumber;
+const isValidString = _ref3 => {
+  let {
+    isDecimalInput,
+    isMoneyInput,
+    string
+  } = _ref3;
+  let isValid = false;
+
+  // Allows numbers, one (comma/point) and any number of decimal places
+  if (isDecimalInput && _number.DECIMAL_TEST.test(string)) {
+    isValid = true;
+  }
+
+  // Allows numbers but excludes numbers with leading 0
+  if (isMoneyInput && _number.MONEY_TEST.test(string)) {
+    isValid = true;
+  }
+
+  // Allows numbers but excludes numbers with leading 0
+  if (!isDecimalInput && !isMoneyInput && _number.INTEGER_TEST.test(string)) {
+    isValid = true;
+  }
+  if (string.length === 0) {
+    isValid = true;
+  }
+  return isValid;
+};
+exports.isValidString = isValidString;
+//# sourceMappingURL=number.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"number.js","names":["_number","require","parseFloatWithDecimals","_ref","stringValue","decimals","parsed","parseFloat","toFixed","exports","formateNumber","_ref2","number","isMoneyInput","toLocaleString","useGrouping","minimumFractionDigits","undefined","maximumFractionDigits","maximumSignificantDigits","isValidString","_ref3","isDecimalInput","string","isValid","DECIMAL_TEST","test","MONEY_TEST","INTEGER_TEST","length"],"sources":["../../../../src/components/number-input/utils/number.ts"],"sourcesContent":["import { DECIMAL_TEST, INTEGER_TEST, MONEY_TEST } from '../constants/number';\n\ninterface ParseFloatWithDecimals {\n    ({ stringValue, decimals }: { stringValue: string; decimals?: number }): number;\n}\n\nexport const parseFloatWithDecimals: ParseFloatWithDecimals = ({ stringValue, decimals }) => {\n    const parsed = parseFloat(stringValue);\n\n    if (decimals) {\n        return parseFloat(parsed.toFixed(decimals));\n    }\n\n    return parsed;\n};\n\ninterface FormateNumberOptions {\n    number: number | null;\n    isMoneyInput?: boolean;\n}\n\nexport const formateNumber = ({ number, isMoneyInput }: FormateNumberOptions) => {\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    }): boolean;\n}\n\nexport const isValidString: IsValidString = (\n    {\n        isDecimalInput, isMoneyInput, 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    // Allows numbers but excludes numbers with leading 0\n    if (!isDecimalInput && !isMoneyInput && INTEGER_TEST.test(string)) {\n        isValid = true;\n    }\n\n    if (string.length === 0) {\n        isValid = true;\n\n    }\n\n    return isValid;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AAMO,MAAMC,sBAA8C,GAAGC,IAAA,IAA+B;EAAA,IAA9B;IAAEC,WAAW;IAAEC;EAAS,CAAC,GAAAF,IAAA;EACpF,MAAMG,MAAM,GAAGC,UAAU,CAACH,WAAW,CAAC;EAEtC,IAAIC,QAAQ,EAAE;IACV,OAAOE,UAAU,CAACD,MAAM,CAACE,OAAO,CAACH,QAAQ,CAAC,CAAC;EAC/C;EAEA,OAAOC,MAAM;AACjB,CAAC;AAACG,OAAA,CAAAP,sBAAA,GAAAA,sBAAA;AAOK,MAAMQ,aAAa,GAAGC,KAAA,IAAoD;EAAA,IAAnD;IAAEC,MAAM;IAAEC;EAAmC,CAAC,GAAAF,KAAA;EACxE,IAAI,OAAOC,MAAM,KAAK,QAAQ,EAAE;IAC5B,OAAO,EAAE;EACb;EAEA,OAAOA,MAAM,CAACE,cAAc,CAAC,OAAO,EAAE;IAClCC,WAAW,EAAE,IAAI;IACjBC,qBAAqB,EAAEH,YAAY,GAAG,CAAC,GAAGI,SAAS;IACnDC,qBAAqB,EAAEL,YAAY,GAAG,CAAC,GAAGI,SAAS;IACnDE,wBAAwB,EAAE,CAACN,YAAY,GAAG,EAAE,GAAGI;EACnD,CAAC,CAAC;AACN,CAAC;AAACR,OAAA,CAAAC,aAAA,GAAAA,aAAA;AAUK,MAAMU,aAA4B,GAAGC,KAAA,IAGlC;EAAA,IAFN;IACIC,cAAc;IAAET,YAAY;IAAEU;EAClC,CAAC,GAAAF,KAAA;EACD,IAAIG,OAAO,GAAG,KAAK;;EAEnB;EACA,IAAIF,cAAc,IAAIG,oBAAY,CAACC,IAAI,CAACH,MAAM,CAAC,EAAE;IAC7CC,OAAO,GAAG,IAAI;EAClB;;EAEA;EACA,IAAIX,YAAY,IAAIc,kBAAU,CAACD,IAAI,CAACH,MAAM,CAAC,EAAE;IACzCC,OAAO,GAAG,IAAI;EAClB;;EAEA;EACA,IAAI,CAACF,cAAc,IAAI,CAACT,YAAY,IAAIe,oBAAY,CAACF,IAAI,CAACH,MAAM,CAAC,EAAE;IAC/DC,OAAO,GAAG,IAAI;EAClB;EAEA,IAAID,MAAM,CAACM,MAAM,KAAK,CAAC,EAAE;IACrBL,OAAO,GAAG,IAAI;EAElB;EAEA,OAAOA,OAAO;AAClB,CAAC;AAACf,OAAA,CAAAW,aAAA,GAAAA,aAAA"}

package/lib/components/popup/Popup.d.ts

@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import { PopupRef } from './types';
+export type PopupProps = {
+    /**
+     * The element over which the content of the `ContextMenu` should be displayed.
+     */
+    children?: ReactNode;
+    /**
+     * The content that should be displayed inside the popup.
+     */
+    content: ReactNode;
+    /**
+     * Function to be executed when the content of the Context menu has been hidden.
+     */
+    onHide?: VoidFunction;
+    /**
+     * Function to be executed when the content of the Context menu has been shown.
+     */
+    onShow?: VoidFunction;
+    /**
+     * Whether the popup should be opened on hover. If not, the popup will be opened on click.
+     */
+    shouldShowOnHover?: boolean;
+    /**
+     * The Y offset of the popup to the children.
+     */
+    yOffset?: number;
+};
+declare const Popup: React.ForwardRefExoticComponent<PopupProps & React.RefAttributes<PopupRef>>;
+export default Popup;

package/lib/components/popup/Popup.js

@@ -0,0 +1,154 @@
+"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 _PopupContent = _interopRequireDefault(require("./popup-content/PopupContent"));
+var _Popup = require("./Popup.styles");
+var _types = require("./types");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 && Object.prototype.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)((_ref, ref) => {
+  let {
+    content,
+    onShow,
+    onHide,
+    children,
+    shouldShowOnHover = false,
+    yOffset = 0
+  } = _ref;
+  const [coordinates, setCoordinates] = (0, _react.useState)({
+    x: 0,
+    y: 0
+  });
+  const container = document.querySelector('.tapp') || document.body;
+  const [alignment, setAlignment] = (0, _react.useState)(_types.PopupAlignment.TopLeft);
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [portal, setPortal] = (0, _react.useState)();
+  const [menuHeight, setMenuHeight] = (0, _react.useState)(0);
+  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 handleShow = (0, _react.useCallback)(() => {
+    if (popupRef.current && popupPseudoContentRef.current) {
+      const {
+        height: pseudoHeight,
+        width: pseudoWidth
+      } = popupPseudoContentRef.current.getBoundingClientRect();
+      const {
+        height: childrenHeight,
+        left: childrenLeft,
+        top: childrenTop,
+        width: childrenWidth
+      } = popupRef.current.getBoundingClientRect();
+      if (pseudoHeight > childrenTop - 25) {
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(_types.PopupAlignment.BottomRight);
+        } else {
+          setAlignment(_types.PopupAlignment.BottomLeft);
+        }
+        setCoordinates({
+          x: childrenLeft + childrenWidth / 2,
+          y: childrenTop + childrenHeight + yOffset
+        });
+      } else {
+        if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {
+          setAlignment(_types.PopupAlignment.TopRight);
+        } else {
+          setAlignment(_types.PopupAlignment.TopLeft);
+        }
+        setCoordinates({
+          x: childrenLeft + childrenWidth / 2,
+          y: childrenTop - yOffset
+        });
+      }
+      setIsOpen(true);
+    }
+  }, [yOffset]);
+  const handleChildrenClick = () => {
+    if (!shouldShowOnHover) {
+      handleShow();
+    }
+  };
+  const handleHide = (0, _react.useCallback)(() => {
+    setIsOpen(false);
+  }, []);
+  const handleMouseEnter = () => {
+    if (shouldShowOnHover) {
+      handleShow();
+    }
+  };
+  const handleMouseLeave = () => {
+    if (shouldShowOnHover) {
+      handleHide();
+    }
+  };
+  const handleDocumentClick = (0, _react.useCallback)(event => {
+    if (!popupContentRef.current?.contains(event.target)) {
+      event.preventDefault();
+      event.stopPropagation();
+      if (!shouldShowOnHover) {
+        handleHide();
+      }
+    }
+  }, [handleHide, shouldShowOnHover]);
+  (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(_PopupContent.default, {
+      coordinates: coordinates,
+      content: content,
+      key: `tooltip_${uuid}`,
+      alignment: alignment,
+      ref: popupContentRef
+    })), container));
+  }, [alignment, container, content, coordinates, isOpen, uuid]);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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
+  }, children), portal);
+});
+Popup.displayName = 'Popup';
+var _default = exports.default = Popup;
+//# sourceMappingURL=Popup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","names":["_chaynsApi","require","_framerMotion","_react","_interopRequireWildcard","_reactDom","_uuid","_PopupContent","_interopRequireDefault","_Popup","_types","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Popup","forwardRef","_ref","ref","content","onShow","onHide","children","shouldShowOnHover","yOffset","coordinates","setCoordinates","useState","x","y","container","document","querySelector","body","alignment","setAlignment","PopupAlignment","TopLeft","isOpen","setIsOpen","portal","setPortal","menuHeight","setMenuHeight","uuid","useUuid","popupContentRef","useRef","popupPseudoContentRef","popupRef","handleShow","useCallback","current","height","pseudoHeight","width","pseudoWidth","getBoundingClientRect","childrenHeight","left","childrenLeft","top","childrenTop","childrenWidth","BottomRight","BottomLeft","TopRight","handleChildrenClick","handleHide","handleMouseEnter","handleMouseLeave","handleDocumentClick","event","contains","target","preventDefault","stopPropagation","useImperativeHandle","hide","show","useEffect","getWindowMetrics","then","result","topBarHeight","addEventListener","window","removeEventListener","createPortal","createElement","AnimatePresence","initial","key","Fragment","StyledPopupPseudo","StyledPopup","onClick","onMouseLeave","onMouseEnter","displayName","_default","exports"],"sources":["../../../src/components/popup/Popup.tsx"],"sourcesContent":["import { getWindowMetrics } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    forwardRef,\n    ReactNode,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { useUuid } from '../../hooks/uuid';\nimport PopupContent from './popup-content/PopupContent';\nimport { StyledPopup, StyledPopupPseudo } from './Popup.styles';\nimport { PopupAlignment, PopupCoordinates, PopupRef } from './types';\n\nexport type PopupProps = {\n    /**\n     * The element over which the content of the `ContextMenu` should be displayed.\n     */\n    children?: ReactNode;\n    /**\n     * The content that should be displayed inside the popup.\n     */\n    content: ReactNode;\n    /**\n     * Function to be executed when the content of the Context menu has been hidden.\n     */\n    onHide?: VoidFunction;\n    /**\n     * Function to be executed when the content of the Context menu has been shown.\n     */\n    onShow?: VoidFunction;\n    /**\n     * Whether the popup should be opened on hover. If not, the popup will be opened on click.\n     */\n    shouldShowOnHover?: boolean;\n    /**\n     * The Y offset of the popup to the children.\n     */\n    yOffset?: number;\n};\n\nconst Popup = forwardRef<PopupRef, PopupProps>(\n    ({ content, onShow, onHide, children, shouldShowOnHover = false, yOffset = 0 }, ref) => {\n        const [coordinates, setCoordinates] = useState<PopupCoordinates>({\n            x: 0,\n            y: 0,\n        });\n        const container = document.querySelector('.tapp') || document.body;\n\n        const [alignment, setAlignment] = useState<PopupAlignment>(PopupAlignment.TopLeft);\n        const [isOpen, setIsOpen] = useState(false);\n        const [portal, setPortal] = useState<ReactPortal>();\n        const [menuHeight, setMenuHeight] = useState(0);\n\n        const uuid = useUuid();\n\n        // ToDo: Replace with hook if new chayns api is ready\n        const popupContentRef = useRef<HTMLDivElement>(null);\n        const popupPseudoContentRef = useRef<HTMLDivElement>(null);\n        const popupRef = useRef<HTMLDivElement>(null);\n\n        const handleShow = useCallback(() => {\n            if (popupRef.current && popupPseudoContentRef.current) {\n                const { height: pseudoHeight, width: pseudoWidth } =\n                    popupPseudoContentRef.current.getBoundingClientRect();\n\n                const {\n                    height: childrenHeight,\n                    left: childrenLeft,\n                    top: childrenTop,\n                    width: childrenWidth,\n                } = popupRef.current.getBoundingClientRect();\n\n                if (pseudoHeight > childrenTop - 25) {\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.BottomRight);\n                    } else {\n                        setAlignment(PopupAlignment.BottomLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop + childrenHeight + yOffset,\n                    });\n                } else {\n                    if (pseudoWidth > childrenLeft + childrenWidth / 2 - 25) {\n                        setAlignment(PopupAlignment.TopRight);\n                    } else {\n                        setAlignment(PopupAlignment.TopLeft);\n                    }\n\n                    setCoordinates({\n                        x: childrenLeft + childrenWidth / 2,\n                        y: childrenTop - yOffset,\n                    });\n                }\n\n                setIsOpen(true);\n            }\n        }, [yOffset]);\n\n        const handleChildrenClick = () => {\n            if (!shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleHide = useCallback(() => {\n            setIsOpen(false);\n        }, []);\n\n        const handleMouseEnter = () => {\n            if (shouldShowOnHover) {\n                handleShow();\n            }\n        };\n\n        const handleMouseLeave = () => {\n            if (shouldShowOnHover) {\n                handleHide();\n            }\n        };\n\n        const handleDocumentClick = useCallback<EventListener>(\n            (event) => {\n                if (!popupContentRef.current?.contains(event.target as Node)) {\n                    event.preventDefault();\n                    event.stopPropagation();\n\n                    if (!shouldShowOnHover) {\n                        handleHide();\n                    }\n                }\n            },\n            [handleHide, shouldShowOnHover],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                hide: handleHide,\n                show: handleShow,\n            }),\n            [handleHide, handleShow],\n        );\n\n        useEffect(() => {\n            void getWindowMetrics().then((result) => {\n                if (result.topBarHeight) {\n                    setMenuHeight(result.topBarHeight);\n                }\n            });\n        }, []);\n\n        useEffect(() => {\n            if (isOpen) {\n                document.addEventListener('click', handleDocumentClick, true);\n                window.addEventListener('blur', handleHide);\n\n                if (typeof onShow === 'function') {\n                    onShow();\n                }\n            } else if (typeof onHide === 'function') {\n                onHide();\n            }\n\n            return () => {\n                document.removeEventListener('click', handleDocumentClick, true);\n                window.removeEventListener('blur', handleHide);\n            };\n        }, [handleDocumentClick, handleHide, isOpen, onHide, onShow]);\n\n        useEffect(() => {\n            setPortal(() =>\n                createPortal(\n                    <AnimatePresence initial={false}>\n                        {isOpen && (\n                            <PopupContent\n                                coordinates={coordinates}\n                                content={content}\n                                key={`tooltip_${uuid}`}\n                                alignment={alignment}\n                                ref={popupContentRef}\n                            />\n                        )}\n                    </AnimatePresence>,\n                    container,\n                ),\n            );\n        }, [alignment, container, content, coordinates, isOpen, uuid]);\n\n        return (\n            <>\n                <StyledPopupPseudo ref={popupPseudoContentRef} menuHeight={menuHeight}>\n                    {content}\n                </StyledPopupPseudo>\n                <StyledPopup\n                    ref={popupRef}\n                    onClick={handleChildrenClick}\n                    onMouseLeave={handleMouseLeave}\n                    onMouseEnter={handleMouseEnter}\n                >\n                    {children}\n                </StyledPopup>\n                {portal}\n            </>\n        );\n    },\n);\n\nPopup.displayName = 'Popup';\n\nexport default Popup;\n"],"mappings":"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"}

package/lib/components/popup/Popup.styles.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const StyledPopup: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+export declare const StyledPopupPseudo: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    menuHeight: number;
+}>>;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledPopupPseudo = exports.StyledPopup = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledPopup = exports.StyledPopup = _styledComponents.default.span`
+    cursor: pointer;
+    position: relative;
+    display: flex;
+`;
+const StyledPopupPseudo = exports.StyledPopupPseudo = _styledComponents.default.div`
+    top: ${_ref => {
+  let {
+    menuHeight
+  } = _ref;
+  return `${menuHeight - 0}px`;
+}};
+    left: 0;
+    pointer-events: none;
+    visibility: hidden;
+    position: absolute;
+`;
+//# sourceMappingURL=Popup.styles.js.map

package/lib/components/popup/Popup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledPopup","exports","styled","span","StyledPopupPseudo","div","_ref","menuHeight"],"sources":["../../../src/components/popup/Popup.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledPopup = styled.span`\n    cursor: pointer;\n    position: relative;\n    display: flex;\n`;\n\nexport const StyledPopupPseudo = styled.div<{\n    menuHeight: number;\n}>`\n    top: ${({ menuHeight }) => `${menuHeight - 0}px`};\n    left: 0;\n    pointer-events: none;\n    visibility: hidden;\n    position: absolute;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,IAAK;AACvC;AACA;AACA;AACA,CAAC;AAEM,MAAMC,iBAAiB,GAAAH,OAAA,CAAAG,iBAAA,GAAGF,yBAAM,CAACG,GAErC;AACH,WAAWC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OAAM,GAAEC,UAAU,GAAG,CAAE,IAAG;AAAA,CAAC;AACrD;AACA;AACA;AACA;AACA,CAAC"}

package/lib/components/popup/popup-content/PopupContent.d.ts

@@ -0,0 +1,9 @@
+import React, { ReactNode } from 'react';
+import { PopupAlignment, PopupCoordinates } from '../types';
+type PopupContentProps = {
+    alignment: PopupAlignment;
+    coordinates: PopupCoordinates;
+    content: ReactNode;
+};
+declare const PopupContent: React.ForwardRefExoticComponent<PopupContentProps & React.RefAttributes<HTMLDivElement>>;
+export default PopupContent;

package/lib/components/popup/popup-content/PopupContent.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _colorMode = require("../../../hooks/colorMode");
+var _types = require("../types");
+var _PopupContent = require("./PopupContent.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const PopupContent = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    alignment,
+    coordinates,
+    content
+  } = _ref;
+  const colorMode = (0, _colorMode.useColorMode)();
+  const isBottomLeftAlignment = alignment === _types.PopupAlignment.BottomLeft;
+  const isTopLeftAlignment = alignment === _types.PopupAlignment.TopLeft;
+  const isTopRightAlignment = alignment === _types.PopupAlignment.TopRight;
+  const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;
+  const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;
+  const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;
+  const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;
+  const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;
+  return /*#__PURE__*/_react.default.createElement(_PopupContent.StyledMotionPopupContent, {
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    colorMode: colorMode,
+    exit: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    initial: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    position: alignment,
+    ref: ref,
+    style: {
+      left: coordinates.x,
+      top: coordinates.y
+    },
+    transition: {
+      type: 'tween'
+    },
+    transformTemplate: _ref2 => {
+      let {
+        y = '0px'
+      } = _ref2;
+      return `
+                    translateX(${percentageOffsetX}%)
+                    translateY(${percentageOffsetY}%)
+                    translateX(${anchorOffsetX}px)
+                    translateY(${anchorOffsetY}px)
+                    translateY(${y})
+                `;
+    }
+  }, /*#__PURE__*/_react.default.createElement(_PopupContent.StyledPopupContentInner, null, content));
+});
+PopupContent.displayName = 'PopupContent';
+var _default = exports.default = PopupContent;
+//# sourceMappingURL=PopupContent.js.map

package/lib/components/popup/popup-content/PopupContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PopupContent.js","names":["_react","_interopRequireDefault","require","_colorMode","_types","_PopupContent","obj","__esModule","default","PopupContent","React","forwardRef","_ref","ref","alignment","coordinates","content","colorMode","useColorMode","isBottomLeftAlignment","PopupAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionPopupContent","animate","opacity","y","exit","initial","position","style","left","x","top","transition","type","transformTemplate","_ref2","StyledPopupContentInner","displayName","_default","exports"],"sources":["../../../../src/components/popup/popup-content/PopupContent.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useColorMode } from '../../../hooks/colorMode';\nimport { PopupAlignment, PopupCoordinates } from '../types';\nimport { StyledMotionPopupContent, StyledPopupContentInner } from './PopupContent.styles';\n\ntype PopupContentProps = {\n    alignment: PopupAlignment;\n    coordinates: PopupCoordinates;\n    content: ReactNode;\n};\n\nconst PopupContent = React.forwardRef<HTMLDivElement, PopupContentProps>(\n    ({ alignment, coordinates, content }, ref) => {\n        const colorMode = useColorMode();\n\n        const isBottomLeftAlignment = alignment === PopupAlignment.BottomLeft;\n        const isTopLeftAlignment = alignment === PopupAlignment.TopLeft;\n        const isTopRightAlignment = alignment === PopupAlignment.TopRight;\n\n        const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n        const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n        const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n        const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n        const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n        return (\n            <StyledMotionPopupContent\n                animate={{ opacity: 1, y: 0 }}\n                colorMode={colorMode}\n                exit={{ opacity: 0, y: exitAndInitialY }}\n                initial={{ opacity: 0, y: exitAndInitialY }}\n                position={alignment}\n                ref={ref}\n                style={{ left: coordinates.x, top: coordinates.y }}\n                transition={{ type: 'tween' }}\n                transformTemplate={({ y = '0px' }) => `\n                    translateX(${percentageOffsetX}%)\n                    translateY(${percentageOffsetY}%)\n                    translateX(${anchorOffsetX}px)\n                    translateY(${anchorOffsetY}px)\n                    translateY(${y})\n                `}\n            >\n                <StyledPopupContentInner>{content}</StyledPopupContentInner>\n            </StyledMotionPopupContent>\n        );\n    },\n);\n\nPopupContent.displayName = 'PopupContent';\n\nexport default PopupContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,UAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAF,OAAA;AACA,IAAAG,aAAA,GAAAH,OAAA;AAA0F,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQ1F,MAAMG,YAAY,gBAAGC,cAAK,CAACC,UAAU,CACjC,CAAAC,IAAA,EAAsCC,GAAG,KAAK;EAAA,IAA7C;IAAEC,SAAS;IAAEC,WAAW;IAAEC;EAAQ,CAAC,GAAAJ,IAAA;EAChC,MAAMK,SAAS,GAAG,IAAAC,uBAAY,EAAC,CAAC;EAEhC,MAAMC,qBAAqB,GAAGL,SAAS,KAAKM,qBAAc,CAACC,UAAU;EACrE,MAAMC,kBAAkB,GAAGR,SAAS,KAAKM,qBAAc,CAACG,OAAO;EAC/D,MAAMC,mBAAmB,GAAGV,SAAS,KAAKM,qBAAc,CAACK,QAAQ;EAEjE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIxB,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC1B,aAAA,CAAA2B,wBAAwB;IACrBC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BlB,SAAS,EAAEA,SAAU;IACrBmB,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CQ,QAAQ,EAAExB,SAAU;IACpBD,GAAG,EAAEA,GAAI;IACT0B,KAAK,EAAE;MAAEC,IAAI,EAAEzB,WAAW,CAAC0B,CAAC;MAAEC,GAAG,EAAE3B,WAAW,CAACoB;IAAE,CAAE;IACnDQ,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEX,CAAC,GAAG;MAAM,CAAC,GAAAW,KAAA;MAAA,OAAM;AACvD,iCAAiCpB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC,iBAAiB;IAAA;EAAC,gBAEFnC,MAAA,CAAAQ,OAAA,CAAAuB,aAAA,CAAC1B,aAAA,CAAA0C,uBAAuB,QAAE/B,OAAiC,CACrC,CAAC;AAEnC,CACJ,CAAC;AAEDP,YAAY,CAACuC,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA1C,OAAA,GAE3BC,YAAY"}