@chayns-components/core 5.0.0-beta.104 → 5.0.0-beta.117

package/lib/components/mention-finder/MentionFinder.d.ts

@@ -0,0 +1,31 @@
+import { FC } from 'react';
+import { MentionFinderPopupAlignment } from './constants/alignment';
+export type MentionMember = {
+    id: string;
+    info: string;
+    imageUrl: string;
+    name: string;
+};
+export type MentionFinderProps = {
+    /**
+     * The text from the input field
+     */
+    inputValue: string;
+    /**
+     * Members that can be selected
+     */
+    members: MentionMember[];
+    /**
+     * Function to be executed when a member is selected
+     */
+    onSelect: ({ fullMatch, member }: {
+        fullMatch: string;
+        member: MentionMember;
+    }) => void;
+    /**
+     * Alignment of the popup
+     */
+    popupAlignment: MentionFinderPopupAlignment;
+};
+declare const MentionFinder: FC<MentionFinderProps>;
+export default MentionFinder;

package/lib/components/mention-finder/MentionFinder.js

@@ -0,0 +1,135 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _framerMotion = require("framer-motion");
+var _react = _interopRequireWildcard(require("react"));
+var _alignment = require("./constants/alignment");
+var _MentionFinderItem = _interopRequireDefault(require("./mention-finder-item/MentionFinderItem"));
+var _MentionFinder = require("./MentionFinder.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const MentionFinder = _ref => {
+  let {
+    inputValue,
+    members,
+    onSelect,
+    popupAlignment
+  } = _ref;
+  const [activeMember, setActiveMember] = (0, _react.useState)(members[0]);
+  const [fullMatch, searchString] = (0, _react.useMemo)(() => {
+    var _regExpMatchArray$1$t, _regExpMatchArray$;
+    const regExpMatchArray = inputValue.match(/@(\w*)/);
+    return [regExpMatchArray === null || regExpMatchArray === void 0 ? void 0 : regExpMatchArray[0], (_regExpMatchArray$1$t = regExpMatchArray === null || regExpMatchArray === void 0 ? void 0 : (_regExpMatchArray$ = regExpMatchArray[1]) === null || _regExpMatchArray$ === void 0 ? void 0 : _regExpMatchArray$.toLowerCase()) !== null && _regExpMatchArray$1$t !== void 0 ? _regExpMatchArray$1$t : ''];
+  }, [inputValue]);
+  const filteredMembers = (0, _react.useMemo)(() => searchString !== '' ? members.filter(_ref2 => {
+    let {
+      id,
+      info,
+      name
+    } = _ref2;
+    return id.toLowerCase().includes(searchString) || info.toLowerCase().includes(searchString) || name.toLowerCase().includes(searchString);
+  }) : members, [members, searchString]);
+  const handleKeyDown = (0, _react.useCallback)(event => {
+    let shouldPreventDefault = false;
+    if (event.key === 'ArrowUp') {
+      const currentIndex = filteredMembers.findIndex(_ref3 => {
+        let {
+          id
+        } = _ref3;
+        return id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id);
+      });
+      const prevIndex = Math.max(currentIndex - 1, 0);
+      const member = filteredMembers[prevIndex];
+      setActiveMember(member);
+      shouldPreventDefault = true;
+    } else if (event.key === 'ArrowDown') {
+      const currentIndex = filteredMembers.findIndex(_ref4 => {
+        let {
+          id
+        } = _ref4;
+        return id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id);
+      });
+      const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);
+      const member = filteredMembers[nextIndex];
+      setActiveMember(member);
+      shouldPreventDefault = true;
+    } else if (event.key === 'Enter') {
+      if (fullMatch && activeMember) {
+        onSelect({
+          fullMatch,
+          member: activeMember
+        });
+        shouldPreventDefault = true;
+      }
+    }
+    if (shouldPreventDefault) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }, [activeMember, filteredMembers, fullMatch, onSelect]);
+  const handleMemberClick = (0, _react.useCallback)(member => {
+    if (fullMatch) {
+      onSelect({
+        fullMatch,
+        member
+      });
+    }
+  }, [fullMatch, onSelect]);
+  const handleMemberHover = (0, _react.useCallback)(member => {
+    setActiveMember(member);
+  }, []);
+  (0, _react.useEffect)(() => {
+    window.addEventListener('keydown', handleKeyDown);
+    return () => {
+      window.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleKeyDown]);
+  (0, _react.useEffect)(() => {
+    if (filteredMembers.length > 0) {
+      const isActiveMemberShown = filteredMembers.some(_ref5 => {
+        let {
+          id
+        } = _ref5;
+        return id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id);
+      });
+      if (!isActiveMemberShown) {
+        setActiveMember(filteredMembers[0]);
+      }
+    }
+  }, [activeMember === null || activeMember === void 0 ? void 0 : activeMember.id, filteredMembers]);
+  const items = (0, _react.useMemo)(() => filteredMembers.map(member => /*#__PURE__*/_react.default.createElement(_MentionFinderItem.default, {
+    isActive: member.id === (activeMember === null || activeMember === void 0 ? void 0 : activeMember.id),
+    key: member.id,
+    member: member,
+    onClick: handleMemberClick,
+    onHover: handleMemberHover
+  })), [activeMember, filteredMembers, handleMemberClick, handleMemberHover]);
+  const exitAndInitialY = popupAlignment === _alignment.MentionFinderPopupAlignment.Bottom ? 16 : -16;
+  return /*#__PURE__*/_react.default.createElement(_MentionFinder.StyledMentionFinder, {
+    className: "beta-chayns-mention-finder"
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, fullMatch && items.length > 0 && /*#__PURE__*/_react.default.createElement(_MentionFinder.StyledMotionMentionFinderPopup, {
+    animate: {
+      opacity: 1,
+      y: 0
+    },
+    exit: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    initial: {
+      opacity: 0,
+      y: exitAndInitialY
+    },
+    popupAlignment: popupAlignment
+  }, items)));
+};
+MentionFinder.displayName = 'MentionFinder';
+var _default = MentionFinder;
+exports.default = _default;
+//# sourceMappingURL=MentionFinder.js.map

package/lib/components/mention-finder/MentionFinder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinder.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_alignment","_MentionFinderItem","_interopRequireDefault","_MentionFinder","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","MentionFinder","_ref","inputValue","members","onSelect","popupAlignment","activeMember","setActiveMember","useState","fullMatch","searchString","useMemo","_regExpMatchArray$1$t","_regExpMatchArray$","regExpMatchArray","match","toLowerCase","filteredMembers","filter","_ref2","id","info","name","includes","handleKeyDown","useCallback","event","shouldPreventDefault","currentIndex","findIndex","_ref3","prevIndex","Math","max","member","_ref4","nextIndex","min","length","preventDefault","stopPropagation","handleMemberClick","handleMemberHover","useEffect","window","addEventListener","removeEventListener","isActiveMemberShown","some","_ref5","items","map","createElement","isActive","onClick","onHover","exitAndInitialY","MentionFinderPopupAlignment","Bottom","StyledMentionFinder","className","AnimatePresence","initial","StyledMotionMentionFinderPopup","animate","opacity","y","exit","displayName","_default","exports"],"sources":["../../../src/components/mention-finder/MentionFinder.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, useCallback, useEffect, useMemo, useState } from 'react';\nimport { MentionFinderPopupAlignment } from './constants/alignment';\nimport MentionFinderItem from './mention-finder-item/MentionFinderItem';\nimport { StyledMentionFinder, StyledMotionMentionFinderPopup } from './MentionFinder.styles';\n\nexport type MentionMember = {\n    id: string;\n    info: string;\n    imageUrl: string;\n    name: string;\n};\n\nexport type MentionFinderProps = {\n    /**\n     * The text from the input field\n     */\n    inputValue: string;\n    /**\n     * Members that can be selected\n     */\n    members: MentionMember[];\n    /**\n     * Function to be executed when a member is selected\n     */\n    onSelect: ({ fullMatch, member }: { fullMatch: string; member: MentionMember }) => void;\n    /**\n     * Alignment of the popup\n     */\n    popupAlignment: MentionFinderPopupAlignment;\n};\n\nconst MentionFinder: FC<MentionFinderProps> = ({\n    inputValue,\n    members,\n    onSelect,\n    popupAlignment,\n}) => {\n    const [activeMember, setActiveMember] = useState(members[0]);\n\n    const [fullMatch, searchString] = useMemo(() => {\n        const regExpMatchArray = inputValue.match(/@(\\w*)/);\n\n        return [regExpMatchArray?.[0], regExpMatchArray?.[1]?.toLowerCase() ?? ''];\n    }, [inputValue]);\n\n    const filteredMembers = useMemo(\n        () =>\n            searchString !== ''\n                ? members.filter(\n                      ({ id, info, name }) =>\n                          id.toLowerCase().includes(searchString) ||\n                          info.toLowerCase().includes(searchString) ||\n                          name.toLowerCase().includes(searchString)\n                  )\n                : members,\n        [members, searchString]\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent) => {\n            let shouldPreventDefault = false;\n\n            if (event.key === 'ArrowUp') {\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const prevIndex = Math.max(currentIndex - 1, 0);\n\n                const member = filteredMembers[prevIndex];\n\n                setActiveMember(member);\n\n                shouldPreventDefault = true;\n            } else if (event.key === 'ArrowDown') {\n                const currentIndex = filteredMembers.findIndex(({ id }) => id === activeMember?.id);\n\n                const nextIndex = Math.min(currentIndex + 1, filteredMembers.length - 1);\n\n                const member = filteredMembers[nextIndex];\n\n                setActiveMember(member);\n\n                shouldPreventDefault = true;\n            } else if (event.key === 'Enter') {\n                if (fullMatch && activeMember) {\n                    onSelect({ fullMatch, member: activeMember });\n\n                    shouldPreventDefault = true;\n                }\n            }\n\n            if (shouldPreventDefault) {\n                event.preventDefault();\n                event.stopPropagation();\n            }\n        },\n        [activeMember, filteredMembers, fullMatch, onSelect]\n    );\n\n    const handleMemberClick = useCallback(\n        (member: MentionMember) => {\n            if (fullMatch) {\n                onSelect({ fullMatch, member });\n            }\n        },\n        [fullMatch, onSelect]\n    );\n\n    const handleMemberHover = useCallback((member: MentionMember) => {\n        setActiveMember(member);\n    }, []);\n\n    useEffect(() => {\n        window.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            window.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [handleKeyDown]);\n\n    useEffect(() => {\n        if (filteredMembers.length > 0) {\n            const isActiveMemberShown = filteredMembers.some(({ id }) => id === activeMember?.id);\n\n            if (!isActiveMemberShown) {\n                setActiveMember(filteredMembers[0]);\n            }\n        }\n    }, [activeMember?.id, filteredMembers]);\n\n    const items = useMemo(\n        () =>\n            filteredMembers.map((member) => (\n                <MentionFinderItem\n                    isActive={member.id === activeMember?.id}\n                    key={member.id}\n                    member={member}\n                    onClick={handleMemberClick}\n                    onHover={handleMemberHover}\n                />\n            )),\n        [activeMember, filteredMembers, handleMemberClick, handleMemberHover]\n    );\n\n    const exitAndInitialY = popupAlignment === MentionFinderPopupAlignment.Bottom ? 16 : -16;\n\n    return (\n        <StyledMentionFinder className=\"beta-chayns-mention-finder\">\n            <AnimatePresence initial={false}>\n                {fullMatch && items.length > 0 && (\n                    <StyledMotionMentionFinderPopup\n                        animate={{ opacity: 1, y: 0 }}\n                        exit={{ opacity: 0, y: exitAndInitialY }}\n                        initial={{ opacity: 0, y: exitAndInitialY }}\n                        popupAlignment={popupAlignment}\n                    >\n                        {items}\n                    </StyledMotionMentionFinderPopup>\n                )}\n            </AnimatePresence>\n        </StyledMentionFinder>\n    );\n};\n\nMentionFinder.displayName = 'MentionFinder';\n\nexport default MentionFinder;\n"],"mappings":"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"}

package/lib/components/mention-finder/MentionFinder.styles.d.ts

@@ -0,0 +1,5 @@
+import type { MentionFinderProps } from './MentionFinder';
+export declare const StyledMentionFinder: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMotionMentionFinderPopup: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, Pick<MentionFinderProps, "popupAlignment"> & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

package/lib/components/mention-finder/MentionFinder.styles.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionMentionFinderPopup = exports.StyledMentionFinder = void 0;
+var _framerMotion = require("framer-motion");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _alignment = require("./constants/alignment");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledMentionFinder = _styledComponents.default.div`
+    position: relative;
+`;
+exports.StyledMentionFinder = StyledMentionFinder;
+const StyledMotionMentionFinderPopup = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    background-color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['001'];
+}};
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 3px;
+    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);
+    left: 0;
+    max-height: 300px;
+    overflow-y: scroll;
+    position: absolute;
+    width: 100%;
+
+    ${_ref2 => {
+  let {
+    popupAlignment
+  } = _ref2;
+  switch (popupAlignment) {
+    case _alignment.MentionFinderPopupAlignment.Bottom:
+      return (0, _styledComponents.css)`
+                    top: 0;
+                `;
+    case _alignment.MentionFinderPopupAlignment.Top:
+      return (0, _styledComponents.css)`
+                    bottom: 0;
+                `;
+    default:
+      return undefined;
+  }
+}}
+
+    // Styles for custom scrollbar
+    ::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    ::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+
+    ::-webkit-scrollbar-button {
+        background-color: transparent;
+        height: 5px;
+    }
+
+    ::-webkit-scrollbar-thumb {
+        background-color: rgba(
+            ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['text-rgb'];
+}},
+            0.15
+        );
+        border-radius: 20px;
+    }
+
+    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are
+    // only supported in Firefox:
+    * {
+        scrollbar-color: rgba(
+                ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['text-rgb'];
+}},
+                0.15
+            )
+            transparent;
+        scrollbar-width: thin;
+    }
+`;
+exports.StyledMotionMentionFinderPopup = StyledMotionMentionFinderPopup;
+//# sourceMappingURL=MentionFinder.styles.js.map

package/lib/components/mention-finder/MentionFinder.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinder.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_alignment","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMentionFinder","styled","div","exports","StyledMotionMentionFinderPopup","motion","_ref","theme","_ref2","popupAlignment","MentionFinderPopupAlignment","Bottom","css","Top","undefined","_ref3","_ref4"],"sources":["../../../src/components/mention-finder/MentionFinder.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport { MentionFinderPopupAlignment } from './constants/alignment';\nimport type { MentionFinderProps } from './MentionFinder';\n\nexport const StyledMentionFinder = styled.div`\n    position: relative;\n`;\n\ntype StyledMentionFinderPopupProps = WithTheme<Pick<MentionFinderProps, 'popupAlignment'>>;\n\nexport const StyledMotionMentionFinderPopup = styled(motion.div)<StyledMentionFinderPopupProps>`\n    background-color: ${({ theme }: StyledMentionFinderPopupProps) => theme['001']};\n    border: 1px solid rgba(0, 0, 0, 0.1);\n    border-radius: 3px;\n    box-shadow: 1px 3px 8px rgba(0, 0, 0, 0.1);\n    left: 0;\n    max-height: 300px;\n    overflow-y: scroll;\n    position: absolute;\n    width: 100%;\n\n    ${({ popupAlignment }) => {\n        switch (popupAlignment) {\n            case MentionFinderPopupAlignment.Bottom:\n                return css`\n                    top: 0;\n                `;\n            case MentionFinderPopupAlignment.Top:\n                return css`\n                    bottom: 0;\n                `;\n            default:\n                return undefined;\n        }\n    }}\n\n    // Styles for custom scrollbar\n    ::-webkit-scrollbar {\n        width: 5px;\n    }\n\n    ::-webkit-scrollbar-track {\n        background-color: transparent;\n    }\n\n    ::-webkit-scrollbar-button {\n        background-color: transparent;\n        height: 5px;\n    }\n\n    ::-webkit-scrollbar-thumb {\n        background-color: rgba(\n            ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n            0.15\n        );\n        border-radius: 20px;\n    }\n\n    // Scrollbar styles for Firefox. The above styles are not supported in Firefox, these styles are\n    // only supported in Firefox:\n    * {\n        scrollbar-color: rgba(\n                ${({ theme }: StyledMentionFinderPopupProps) => theme['text-rgb']},\n                0.15\n            )\n            transparent;\n        scrollbar-width: thin;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAEA,IAAAG,UAAA,GAAAH,OAAA;AAAoE,SAAAI,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAH,wBAAAO,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AAG7D,MAAMW,mBAAmB,GAAGC,yBAAM,CAACC,GAAI;AAC9C;AACA,CAAC;AAACC,OAAA,CAAAH,mBAAA,GAAAA,mBAAA;AAIK,MAAMI,8BAA8B,GAAG,IAAAH,yBAAM,EAACI,oBAAM,CAACH,GAAG,CAAiC;AAChG,wBAAwBI,IAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAwB;EAAA,IAAvB;IAAEC;EAAe,CAAC,GAAAD,KAAA;EACjB,QAAQC,cAAc;IAClB,KAAKC,sCAA2B,CAACC,MAAM;MACnC,OAAO,IAAAC,qBAAG,CAAC;AAC3B;AACA,iBAAiB;IACL,KAAKF,sCAA2B,CAACG,GAAG;MAChC,OAAO,IAAAD,qBAAG,CAAC;AAC3B;AACA,iBAAiB;IACL;MACI,OAAOE,SAAS;EAAC;AAE7B,CAAE;AACN;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,cAAcC,KAAA;EAAA,IAAC;IAAER;EAAqC,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBS,KAAA;EAAA,IAAC;IAAET;EAAqC,CAAC,GAAAS,KAAA;EAAA,OAAKT,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAClF;AACA;AACA;AACA;AACA;AACA,CAAC;AAACJ,OAAA,CAAAC,8BAAA,GAAAA,8BAAA"}

package/lib/components/mention-finder/constants/alignment.d.ts

@@ -0,0 +1,4 @@
+export declare enum MentionFinderPopupAlignment {
+    Top = 0,
+    Bottom = 1
+}

package/lib/components/mention-finder/constants/alignment.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MentionFinderPopupAlignment = void 0;
+let MentionFinderPopupAlignment = /*#__PURE__*/function (MentionFinderPopupAlignment) {
+  MentionFinderPopupAlignment[MentionFinderPopupAlignment["Top"] = 0] = "Top";
+  MentionFinderPopupAlignment[MentionFinderPopupAlignment["Bottom"] = 1] = "Bottom";
+  return MentionFinderPopupAlignment;
+}({});
+exports.MentionFinderPopupAlignment = MentionFinderPopupAlignment;
+//# sourceMappingURL=alignment.js.map

package/lib/components/mention-finder/constants/alignment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alignment.js","names":["MentionFinderPopupAlignment","exports"],"sources":["../../../../src/components/mention-finder/constants/alignment.ts"],"sourcesContent":["export enum MentionFinderPopupAlignment {\n    Top,\n    Bottom,\n}\n"],"mappings":";;;;;;IAAYA,2BAA2B,0BAA3BA,2BAA2B;EAA3BA,2BAA2B,CAA3BA,2BAA2B;EAA3BA,2BAA2B,CAA3BA,2BAA2B;EAAA,OAA3BA,2BAA2B;AAAA;AAAAC,OAAA,CAAAD,2BAAA,GAAAA,2BAAA"}

package/lib/components/mention-finder/mention-finder-item/MentionFinderItem.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import type { MentionMember } from '../MentionFinder';
+export type MentionFinderItemProps = {
+    isActive: boolean;
+    member: MentionMember;
+    onClick: (member: MentionMember) => void;
+    onHover: (member: MentionMember) => void;
+};
+declare const MentionFinderItem: FC<MentionFinderItemProps>;
+export default MentionFinderItem;

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _MentionFinderItem = require("./MentionFinderItem.styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const MentionFinderItem = _ref => {
+  let {
+    isActive,
+    member,
+    onClick,
+    onHover
+  } = _ref;
+  const handleItemClick = (0, _react.useCallback)(() => onClick(member), [member, onClick]);
+  const handleItemMouseEnter = (0, _react.useCallback)(() => onHover(member), [member, onHover]);
+  return /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItem, {
+    isActive: isActive,
+    onClick: handleItemClick,
+    onMouseEnter: handleItemMouseEnter
+  }, /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemImage, {
+    src: member.imageUrl
+  }), /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContent, null, /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContentName, null, member.name), /*#__PURE__*/_react.default.createElement(_MentionFinderItem.StyledMentionFinderItemContentInfo, null, member.info)));
+};
+MentionFinderItem.displayName = 'MentionFinder';
+var _default = MentionFinderItem;
+exports.default = _default;
+//# sourceMappingURL=MentionFinderItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinderItem.js","names":["_react","_interopRequireWildcard","require","_MentionFinderItem","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","MentionFinderItem","_ref","isActive","member","onClick","onHover","handleItemClick","useCallback","handleItemMouseEnter","createElement","StyledMentionFinderItem","onMouseEnter","StyledMentionFinderItemImage","src","imageUrl","StyledMentionFinderItemContent","StyledMentionFinderItemContentName","name","StyledMentionFinderItemContentInfo","info","displayName","_default","exports"],"sources":["../../../../src/components/mention-finder/mention-finder-item/MentionFinderItem.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport type { MentionMember } from '../MentionFinder';\nimport {\n    StyledMentionFinderItem,\n    StyledMentionFinderItemContent,\n    StyledMentionFinderItemContentInfo,\n    StyledMentionFinderItemContentName,\n    StyledMentionFinderItemImage,\n} from './MentionFinderItem.styles';\n\nexport type MentionFinderItemProps = {\n    isActive: boolean;\n    member: MentionMember;\n    onClick: (member: MentionMember) => void;\n    onHover: (member: MentionMember) => void;\n};\n\nconst MentionFinderItem: FC<MentionFinderItemProps> = ({ isActive, member, onClick, onHover }) => {\n    const handleItemClick = useCallback(() => onClick(member), [member, onClick]);\n\n    const handleItemMouseEnter = useCallback(() => onHover(member), [member, onHover]);\n\n    return (\n        <StyledMentionFinderItem\n            isActive={isActive}\n            onClick={handleItemClick}\n            onMouseEnter={handleItemMouseEnter}\n        >\n            <StyledMentionFinderItemImage src={member.imageUrl} />\n            <StyledMentionFinderItemContent>\n                <StyledMentionFinderItemContentName>\n                    {member.name}\n                </StyledMentionFinderItemContentName>\n                <StyledMentionFinderItemContentInfo>\n                    {member.info}\n                </StyledMentionFinderItemContentInfo>\n            </StyledMentionFinderItemContent>\n        </StyledMentionFinderItem>\n    );\n};\n\nMentionFinderItem.displayName = 'MentionFinder';\n\nexport default MentionFinderItem;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,kBAAA,GAAAD,OAAA;AAMoC,SAAAE,yBAAAC,WAAA,eAAAC,OAAA,kCAAAC,iBAAA,OAAAD,OAAA,QAAAE,gBAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,WAAA,WAAAA,WAAA,GAAAG,gBAAA,GAAAD,iBAAA,KAAAF,WAAA;AAAA,SAAAJ,wBAAAQ,GAAA,EAAAJ,WAAA,SAAAA,WAAA,IAAAI,GAAA,IAAAA,GAAA,CAAAC,UAAA,WAAAD,GAAA,QAAAA,GAAA,oBAAAA,GAAA,wBAAAA,GAAA,4BAAAE,OAAA,EAAAF,GAAA,UAAAG,KAAA,GAAAR,wBAAA,CAAAC,WAAA,OAAAO,KAAA,IAAAA,KAAA,CAAAC,GAAA,CAAAJ,GAAA,YAAAG,KAAA,CAAAE,GAAA,CAAAL,GAAA,SAAAM,MAAA,WAAAC,qBAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,GAAA,IAAAX,GAAA,QAAAW,GAAA,kBAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAd,GAAA,EAAAW,GAAA,SAAAI,IAAA,GAAAR,qBAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAV,GAAA,EAAAW,GAAA,cAAAI,IAAA,KAAAA,IAAA,CAAAV,GAAA,IAAAU,IAAA,CAAAC,GAAA,KAAAR,MAAA,CAAAC,cAAA,CAAAH,MAAA,EAAAK,GAAA,EAAAI,IAAA,YAAAT,MAAA,CAAAK,GAAA,IAAAX,GAAA,CAAAW,GAAA,SAAAL,MAAA,CAAAJ,OAAA,GAAAF,GAAA,MAAAG,KAAA,IAAAA,KAAA,CAAAa,GAAA,CAAAhB,GAAA,EAAAM,MAAA,YAAAA,MAAA;AASpC,MAAMW,iBAA6C,GAAGC,IAAA,IAA4C;EAAA,IAA3C;IAAEC,QAAQ;IAAEC,MAAM;IAAEC,OAAO;IAAEC;EAAQ,CAAC,GAAAJ,IAAA;EACzF,MAAMK,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAMH,OAAO,CAACD,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEC,OAAO,CAAC,CAAC;EAE7E,MAAMI,oBAAoB,GAAG,IAAAD,kBAAW,EAAC,MAAMF,OAAO,CAACF,MAAM,CAAC,EAAE,CAACA,MAAM,EAAEE,OAAO,CAAC,CAAC;EAElF,oBACI/B,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,kBAAA,CAAAiC,uBAAuB;IACpBR,QAAQ,EAAEA,QAAS;IACnBE,OAAO,EAAEE,eAAgB;IACzBK,YAAY,EAAEH;EAAqB,gBAEnClC,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,kBAAA,CAAAmC,4BAA4B;IAACC,GAAG,EAAEV,MAAM,CAACW;EAAS,EAAG,eACtDxC,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,kBAAA,CAAAsC,8BAA8B,qBAC3BzC,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,kBAAA,CAAAuC,kCAAkC,QAC9Bb,MAAM,CAACc,IAAI,CACqB,eACrC3C,MAAA,CAAAW,OAAA,CAAAwB,aAAA,CAAChC,kBAAA,CAAAyC,kCAAkC,QAC9Bf,MAAM,CAACgB,IAAI,CACqB,CACR,CACX;AAElC,CAAC;AAEDnB,iBAAiB,CAACoB,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAEjCrB,iBAAiB;AAAAsB,OAAA,CAAArC,OAAA,GAAAoC,QAAA"}

package/lib/components/mention-finder/mention-finder-item/MentionFinderItem.styles.d.ts

@@ -0,0 +1,8 @@
+import type { MentionFinderItemProps } from './MentionFinderItem';
+export declare const StyledMentionFinderItem: import("styled-components").StyledComponent<"div", any, Pick<MentionFinderItemProps, "isActive"> & {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMentionFinderItemImage: import("styled-components").StyledComponent<"img", any, {}, never>;
+export declare const StyledMentionFinderItemContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMentionFinderItemContentName: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMentionFinderItemContentInfo: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,100 @@
+"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(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+const StyledMentionFinderItem = _styledComponents.default.div`
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    height: 64px;
+    padding: 12px 9px;
+
+    :not(:last-child) {
+        border-bottom: 1px solid
+            rgba(${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme['text-rgb'];
+}}, 0.15);
+    }
+
+    :nth-child(even) {
+        background-color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme['002'];
+}};
+    }
+
+    ${_ref3 => {
+  let {
+    isActive
+  } = _ref3;
+  return isActive && (0, _styledComponents.css)`
+            background-color: ${_ref4 => {
+    let {
+      theme
+    } = _ref4;
+    return theme['102'];
+  }} !important;
+        `;
+}}
+`;
+exports.StyledMentionFinderItem = StyledMentionFinderItem;
+const StyledMentionFinderItemImage = _styledComponents.default.img`
+    background-color: rgba(
+        ${_ref5 => {
+  let {
+    theme
+  } = _ref5;
+  return theme['text-rgb'];
+}},
+        0.1
+    );
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px
+        rgba(${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme['009-rgb'];
+}}, 0.08) inset;
+    flex: 0 0 auto;
+    height: 40px;
+    overflow: hidden;
+    transition: border-radius 0.3s ease;
+    width: 40px;
+`;
+exports.StyledMentionFinderItemImage = StyledMentionFinderItemImage;
+const StyledMentionFinderItemContent = _styledComponents.default.div`
+    color: ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.text;
+}};
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    justify-content: center;
+    line-height: normal;
+    margin-left: 10px;
+    min-width: 0;
+`;
+exports.StyledMentionFinderItemContent = StyledMentionFinderItemContent;
+const StyledMentionFinderItemContentName = _styledComponents.default.div``;
+exports.StyledMentionFinderItemContentName = StyledMentionFinderItemContentName;
+const StyledMentionFinderItemContentInfo = _styledComponents.default.div`
+    font-size: 85%;
+    margin-top: 2px;
+    opacity: 0.75;
+`;
+exports.StyledMentionFinderItemContentInfo = StyledMentionFinderItemContentInfo;
+//# sourceMappingURL=MentionFinderItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MentionFinderItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMentionFinderItem","styled","div","_ref","theme","_ref2","_ref3","isActive","css","_ref4","exports","StyledMentionFinderItemImage","img","_ref5","_ref6","StyledMentionFinderItemContent","_ref7","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';\nimport type { MentionFinderItemProps } from './MentionFinderItem';\n\ntype StyledMentionFinderItemProps = WithTheme<Pick<MentionFinderItemProps, 'isActive'>>;\n\nexport const StyledMentionFinderItem = styled.div<StyledMentionFinderItemProps>`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\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['002']};\n    }\n\n    ${({ isActive }) =>\n        isActive &&\n        css`\n            background-color: ${({ theme }: StyledMentionFinderItemProps) =>\n                theme['102']} !important;\n        `}\n`;\n\ntype StyledMentionFinderItemImageProps = WithTheme<unknown>;\n\nexport const StyledMentionFinderItemImage = styled.img`\n    background-color: rgba(\n        ${({ theme }: StyledMentionFinderItemImageProps) => theme['text-rgb']},\n        0.1\n    );\n    border-radius: 50%;\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":"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"}

package/lib/types/chayns.d.ts

@@ -4,6 +4,8 @@ declare global {
 export interface Chayns {
     dialog: Dialog;
     env: Env;
+    openImage(urls: string | string[], start?: number): Promise<undefined>;
+    openVideo(url: string): Promise<void>;
 }
 export interface Dialog {
     select(config: {

package/lib/types/chayns.js.map

@@ -1 +1 @@
-{"version":3,"file":"chayns.js","names":["ButtonType","exports"],"sources":["../../src/types/chayns.ts"],"sourcesContent":["declare global {\n    let chayns: Chayns;\n}\n\nexport interface Chayns {\n    dialog: Dialog;\n    env: Env;\n}\n\nexport interface Dialog {\n    select(config: {\n        title?: string;\n        message?: string;\n        list: Array<SelectDialogItem>;\n        multiselect?: boolean;\n        type?: SelectType;\n        preventCloseOnClick?: boolean;\n        buttons?: DialogButton[];\n        selectAllButton?: string;\n    }): Promise<SelectDialogResult>;\n}\n\ndeclare enum ButtonText {\n    Cancel = 'Abbrechen',\n    No = 'Nein',\n    Ok = 'OK',\n    Yes = 'Ja',\n}\n\nexport enum ButtonType {\n    Cancel = -1,\n    Negative = 0,\n    Positive = 1,\n}\n\nexport interface DialogButton {\n    text: ButtonText | string;\n    buttonType: ButtonType | number;\n    collapseTime?: number;\n    textColor?: string;\n    backgroundColor?: string;\n}\n\nexport interface SelectDialogItem {\n    name: string;\n    value: string | number;\n    isSelected?: boolean;\n}\n\nexport interface SelectDialogResult {\n    buttonType: ButtonType | number;\n    selection: Array<SelectDialogItem>;\n}\n\ndeclare enum SelectType {\n    Default = 0,\n    Icon = 1,\n    IconAndText,\n}\n\nexport interface Env {\n    isApp: boolean;\n    isMobile: boolean;\n    isTablet: boolean;\n}\n"],"mappings":";;;;;;IA6BYA,UAAU,0BAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA;AAAAC,OAAA,CAAAD,UAAA,GAAAA,UAAA"}
+{"version":3,"file":"chayns.js","names":["ButtonType","exports"],"sources":["../../src/types/chayns.ts"],"sourcesContent":["declare global {\n    let chayns: Chayns;\n}\n\nexport interface Chayns {\n    dialog: Dialog;\n    env: Env;\n    openImage(urls: string | string[], start?: number): Promise<undefined>;\n    openVideo(url: string): Promise<void>;\n}\n\nexport interface Dialog {\n    select(config: {\n        title?: string;\n        message?: string;\n        list: Array<SelectDialogItem>;\n        multiselect?: boolean;\n        type?: SelectType;\n        preventCloseOnClick?: boolean;\n        buttons?: DialogButton[];\n        selectAllButton?: string;\n    }): Promise<SelectDialogResult>;\n}\n\ndeclare enum ButtonText {\n    Cancel = 'Abbrechen',\n    No = 'Nein',\n    Ok = 'OK',\n    Yes = 'Ja',\n}\n\nexport enum ButtonType {\n    Cancel = -1,\n    Negative = 0,\n    Positive = 1,\n}\n\nexport interface DialogButton {\n    text: ButtonText | string;\n    buttonType: ButtonType | number;\n    collapseTime?: number;\n    textColor?: string;\n    backgroundColor?: string;\n}\n\nexport interface SelectDialogItem {\n    name: string;\n    value: string | number;\n    isSelected?: boolean;\n}\n\nexport interface SelectDialogResult {\n    buttonType: ButtonType | number;\n    selection: Array<SelectDialogItem>;\n}\n\ndeclare enum SelectType {\n    Default = 0,\n    Icon = 1,\n    IconAndText,\n}\n\nexport interface Env {\n    isApp: boolean;\n    isMobile: boolean;\n    isTablet: boolean;\n}\n"],"mappings":";;;;;;IA+BYA,UAAU,0BAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAVA,UAAU,CAAVA,UAAU;EAAA,OAAVA,UAAU;AAAA;AAAAC,OAAA,CAAAD,UAAA,GAAAA,UAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.104",
+    "version": "5.0.0-beta.117",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -62,5 +62,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "14f15be7baf4fd754b013d36f1b88b2f9a8c4f77"
+    "gitHead": "11e687f9cc1139b4f17337ed6aa2a8507b4f997d"
 }