@chayns-components/core 5.0.0-beta.49 → 5.0.0-beta.492

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

@@ -1,72 +1,109 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _colors = require("@chayns/colors");
-var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = 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; }
-var ColorMode;
-(function (ColorMode) {
+import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';
+import { useSite } from 'chayns-api';
+import React, { useEffect, useState } from 'react';
+import { createGlobalStyle, ThemeProvider } from 'styled-components';
+import { getDesignSettings } from '../../api/theme/get';
+import { convertIconStyle, generateFontFaces } from '../../utils/font';
+var ColorMode = /*#__PURE__*/function (ColorMode) {
   ColorMode[ColorMode["Classic"] = 0] = "Classic";
   ColorMode[ColorMode["Dark"] = 1] = "Dark";
   ColorMode[ColorMode["Light"] = 2] = "Light";
-})(ColorMode || (ColorMode = {}));
-const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
+  return ColorMode;
+}(ColorMode || {}); // ToDo remove type after the framer-motion bug is Fixed
+const GlobalStyle = createGlobalStyle`
+    ${generateFontFaces}
     .ellipsis {
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
     }
 `;
 const ColorSchemeProvider = _ref => {
   let {
     children,
-    color = '#005EB8',
-    colorMode = ColorMode.Classic,
+    color,
+    colorMode,
     cssVariables = {},
     secondaryColor,
-    style = {}
+    style = {},
+    designSettings
   } = _ref;
-  const [colors, setColors] = (0, _react.useState)({});
-  const [themeColors, setThemeColors] = (0, _react.useState)({});
-  (0, _react.useEffect)(() => {
-    const availableColors = (0, _colors.getAvailableColorList)();
+  const [colors, setColors] = useState({});
+  const [theme, setTheme] = useState({});
+  const [internalDesignSettings, setInternalDesignSettings] = useState();
+
+  // Empty object is used to prevent error if ColorSchemeProvider is rendered on server
+  const {
+    color: internalColor,
+    colorMode: internalColorMode
+  } = useSite() ?? {};
+  useEffect(() => {
+    if (designSettings) {
+      setInternalDesignSettings(designSettings);
+      return;
+    }
+    void getDesignSettings().then(result => {
+      setInternalDesignSettings(result);
+    });
+  }, [designSettings]);
+  useEffect(() => {
+    const availableColors = getAvailableColorList();
     const newColors = {};
-    const newThemeColors = {};
+    const newTheme = {};
     availableColors.forEach(colorName => {
-      const hexColor = (0, _colors.getColorFromPalette)(colorName, {
-        color,
-        colorMode,
+      const hexColor = getColorFromPalette(colorName, {
+        color: color ?? internalColor,
+        colorMode: colorMode ?? internalColorMode,
         secondaryColor
       });
       if (hexColor) {
-        const rgbColor = (0, _colors.hexToRgb255)(hexColor);
+        const rgbColor = hexToRgb255(hexColor);
         newColors[`--chayns-color--${colorName}`] = hexColor;
-        newThemeColors[colorName] = hexColor;
+        newTheme[colorName] = hexColor;
         if (rgbColor) {
           newColors[`--chayns-color-rgb--${colorName}`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
-          newThemeColors[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+          newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
         }
       }
     });
+    switch (colorMode ?? internalColorMode) {
+      case ColorMode.Light:
+        newTheme.colorMode = 'light';
+        break;
+      case ColorMode.Dark:
+        newTheme.colorMode = 'dark';
+        break;
+      default:
+        newTheme.colorMode = 'classic';
+        break;
+    }
+    if (internalDesignSettings) {
+      Object.keys(internalDesignSettings).forEach(key => {
+        if (key === 'iconStyle') {
+          newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);
+          return;
+        }
+
+        // ToDo: Find better solution
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        newTheme[key] = internalDesignSettings[key];
+      });
+    }
+    setTheme(newTheme);
     setColors(newColors);
-    setThemeColors(newThemeColors);
-  }, [color, colorMode, secondaryColor]);
-  return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: themeColors
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, [color, colorMode, internalColor, internalColorMode, internalDesignSettings, secondaryColor]);
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement("div", {
     style: {
       ...colors,
       ...cssVariables,
       ...style
     }
-  }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null));
+  }, children), /*#__PURE__*/React.createElement(GlobalStyle, null));
 };
 ColorSchemeProvider.displayName = 'ColorSchemeProvider';
-var _default = ColorSchemeProvider;
-exports.default = _default;
+export default ColorSchemeProvider;
 //# sourceMappingURL=ColorSchemeProvider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["ColorMode","GlobalStyle","createGlobalStyle","ColorSchemeProvider","children","color","colorMode","Classic","cssVariables","secondaryColor","style","colors","setColors","useState","themeColors","setThemeColors","useEffect","availableColors","getAvailableColorList","newColors","newThemeColors","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","r","g","b","displayName"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\ntype ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color = '#005EB8',\n    colorMode = ColorMode.Classic,\n    cssVariables = {},\n    secondaryColor,\n    style = {},\n}) => {\n    const [colors, setColors] = useState<Theme>({});\n    const [themeColors, setThemeColors] = useState<Theme>({});\n\n    useEffect(() => {\n        const availableColors = getAvailableColorList();\n\n        const newColors: Theme = {};\n        const newThemeColors: Theme = {};\n\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color,\n                colorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                newColors[`--chayns-color--${colorName}`] = hexColor;\n                newThemeColors[colorName] = hexColor;\n\n                if (rgbColor) {\n                    newColors[\n                        `--chayns-color-rgb--${colorName}`\n                    ] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                    newThemeColors[\n                        `${colorName}-rgb`\n                    ] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n\n        setColors(newColors);\n        setThemeColors(newThemeColors);\n    }, [color, colorMode, secondaryColor]);\n\n    return (\n        <ThemeProvider theme={themeColors}>\n            <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n            <GlobalStyle />\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAqE;AAAA;AAAA,IAEhEA,SAAS;AAAA,WAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;AAAA,GAATA,SAAS,KAATA,SAAS;AAyCd,MAAMC,WAAW,GAAG,IAAAC,mCAAiB,CAAC;AACtC;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,mBAAiD,GAAG,QAOpD;EAAA,IAPqD;IACvDC,QAAQ;IACRC,KAAK,GAAG,SAAS;IACjBC,SAAS,GAAGN,SAAS,CAACO,OAAO;IAC7BC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,KAAK,GAAG,CAAC;EACb,CAAC;EACG,MAAM,CAACC,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAQ,CAAC,CAAC,CAAC;EAC/C,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAF,eAAQ,EAAQ,CAAC,CAAC,CAAC;EAEzD,IAAAG,gBAAS,EAAC,MAAM;IACZ,MAAMC,eAAe,GAAG,IAAAC,6BAAqB,GAAE;IAE/C,MAAMC,SAAgB,GAAG,CAAC,CAAC;IAC3B,MAAMC,cAAqB,GAAG,CAAC,CAAC;IAEhCH,eAAe,CAACI,OAAO,CAAEC,SAAiB,IAAK;MAC3C,MAAMC,QAAQ,GAAG,IAAAC,2BAAmB,EAACF,SAAS,EAAE;QAC5CjB,KAAK;QACLC,SAAS;QACTG;MACJ,CAAC,CAAC;MAEF,IAAIc,QAAQ,EAAE;QACV,MAAME,QAAQ,GAAG,IAAAC,mBAAW,EAACH,QAAQ,CAAC;QAEtCJ,SAAS,CAAE,mBAAkBG,SAAU,EAAC,CAAC,GAAGC,QAAQ;QACpDH,cAAc,CAACE,SAAS,CAAC,GAAGC,QAAQ;QAEpC,IAAIE,QAAQ,EAAE;UACVN,SAAS,CACJ,uBAAsBG,SAAU,EAAC,CACrC,GAAI,GAAEG,QAAQ,CAACE,CAAE,KAAIF,QAAQ,CAACG,CAAE,KAAIH,QAAQ,CAACI,CAAE,EAAC;UACjDT,cAAc,CACT,GAAEE,SAAU,MAAK,CACrB,GAAI,GAAEG,QAAQ,CAACE,CAAE,KAAIF,QAAQ,CAACG,CAAE,KAAIH,QAAQ,CAACI,CAAE,EAAC;QACrD;MACJ;IACJ,CAAC,CAAC;IAEFjB,SAAS,CAACO,SAAS,CAAC;IACpBJ,cAAc,CAACK,cAAc,CAAC;EAClC,CAAC,EAAE,CAACf,KAAK,EAAEC,SAAS,EAAEG,cAAc,CAAC,CAAC;EAEtC,oBACI,6BAAC,+BAAa;IAAC,KAAK,EAAEK;EAAY,gBAC9B;IAAK,KAAK,EAAE;MAAE,GAAGH,MAAM;MAAE,GAAGH,YAAY;MAAE,GAAGE;IAAM;EAAE,GAAEN,QAAQ,CAAO,eACtE,6BAAC,WAAW,OAAG,CACH;AAExB,CAAC;AAEDD,mBAAmB,CAAC2B,WAAW,GAAG,qBAAqB;AAAC,eAEzC3B,mBAAmB;AAAA"}
+{"version":3,"file":"ColorSchemeProvider.js","names":["getAvailableColorList","getColorFromPalette","hexToRgb255","useSite","React","useEffect","useState","createGlobalStyle","ThemeProvider","getDesignSettings","convertIconStyle","generateFontFaces","ColorMode","GlobalStyle","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","theme","setTheme","internalDesignSettings","setInternalDesignSettings","internalColor","internalColorMode","then","result","availableColors","newColors","newTheme","forEach","colorName","hexColor","rgbColor","r","g","b","Light","Dark","Object","keys","key","iconStyle","createElement","displayName"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport { useSite } from 'chayns-api';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { getDesignSettings } from '../../api/theme/get';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\nimport { convertIconStyle, generateFontFaces } from '../../utils/font';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\ntype ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The design settings of a page.\n     */\n    designSettings?: DesignSettings;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n    ${generateFontFaces}\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    style = {},\n    designSettings,\n}) => {\n    const [colors, setColors] = useState<Theme>({});\n    const [theme, setTheme] = useState<Theme>({});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n\n    // Empty object is used to prevent error if ColorSchemeProvider is rendered on server\n    const { color: internalColor, colorMode: internalColorMode } = useSite() ?? {};\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n\n            return;\n        }\n\n        void getDesignSettings().then((result) => {\n            setInternalDesignSettings(result);\n        });\n    }, [designSettings]);\n\n    useEffect(() => {\n        const availableColors = getAvailableColorList();\n\n        const newColors: Theme = {};\n        const newTheme: Theme = {};\n\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color: color ?? internalColor,\n                colorMode: colorMode ?? internalColorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                newColors[`--chayns-color--${colorName}`] = hexColor;\n                newTheme[colorName] = hexColor;\n\n                if (rgbColor) {\n                    newColors[`--chayns-color-rgb--${colorName}`] =\n                        `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                    newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n\n        switch (colorMode ?? internalColorMode) {\n            case ColorMode.Light:\n                newTheme.colorMode = 'light';\n                break;\n            case ColorMode.Dark:\n                newTheme.colorMode = 'dark';\n                break;\n            default:\n                newTheme.colorMode = 'classic';\n                break;\n        }\n\n        if (internalDesignSettings) {\n            Object.keys(internalDesignSettings).forEach((key) => {\n                if (key === 'iconStyle') {\n                    newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n                    return;\n                }\n\n                // ToDo: Find better solution\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                newTheme[key] = internalDesignSettings[key];\n            });\n        }\n\n        setTheme(newTheme);\n        setColors(newColors);\n    }, [\n        color,\n        colorMode,\n        internalColor,\n        internalColorMode,\n        internalDesignSettings,\n        secondaryColor,\n    ]);\n\n    return (\n        <ThemeProvider theme={theme}>\n            <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n            <GlobalStyle />\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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"}

package/lib/components/combobox/ComboBox.d.ts

@@ -0,0 +1,44 @@
+import { FC, type CSSProperties, type ReactNode } from 'react';
+import { ComboBoxDirection } from '../../types/comboBox';
+export interface IComboBoxItem {
+    imageUrl?: string;
+    suffixElement?: ReactNode;
+    text: string;
+    value: string | number;
+}
+export type ComboBoxProps = {
+    /**
+     * The direction in which the combobox should open.
+     */
+    direction?: ComboBoxDirection;
+    /**
+     * Whether the combobox should be disabled.
+     */
+    isDisabled?: boolean;
+    /**
+     * The list of the items that should be displayed.
+     */
+    list: IComboBoxItem[];
+    /**
+     * The maximum height of the combobox content.
+     */
+    maxHeight?: CSSProperties['maxHeight'];
+    /**
+     * Function that should be executed when an item is selected.
+     */
+    onSelect?: (comboboxItem: IComboBoxItem) => void;
+    /**
+     * A text that should be displayed when no item is selected.
+     */
+    placeholder: string;
+    /**
+     * An item that should be preselected.
+     */
+    selectedItem?: IComboBoxItem;
+    /**
+     * If true, the images of the items are displayed in a round shape.
+     */
+    shouldShowRoundImage?: boolean;
+};
+declare const ComboBox: FC<ComboBoxProps>;
+export default ComboBox;

package/lib/components/combobox/ComboBox.js

@@ -0,0 +1,183 @@
+import { getDevice } from 'chayns-api';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ComboBoxDirection } from '../../types/comboBox';
+import { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';
+import Icon from '../icon/Icon';
+import ComboBoxItem from './combobox-item/ComboBoxItem';
+import { StyledComboBox, StyledComboBoxHeader, StyledComboBoxIconWrapper, StyledComboBoxPlaceholder, StyledComboBoxPlaceholderImage, StyledMotionComboBoxBody } from './ComboBox.styles';
+const ComboBox = _ref => {
+  let {
+    direction = ComboBoxDirection.BOTTOM,
+    isDisabled = false,
+    list,
+    maxHeight = '300px',
+    onSelect,
+    placeholder,
+    selectedItem,
+    shouldShowRoundImage
+  } = _ref;
+  const [item, setItem] = useState();
+  const [isAnimating, setIsAnimating] = useState(false);
+  const [minWidth, setMinWidth] = useState(0);
+  const [height, setHeight] = useState(0);
+  const ref = useRef(null);
+  const {
+    browser
+  } = getDevice();
+  const {
+    isMobile
+  } = chayns.env;
+  const handleClick = useCallback(event => {
+    if (ref.current && !ref.current.contains(event.target)) {
+      setIsAnimating(false);
+    }
+  }, [ref]);
+
+  /**
+   * This function adds an event listener to the document to close the combobox when the user clicks outside of it
+   */
+  useEffect(() => {
+    document.addEventListener('click', handleClick);
+    return () => {
+      document.removeEventListener('click', handleClick);
+    };
+  }, [handleClick, ref]);
+
+  /**
+   * This function sets the selected item
+   */
+  const handleSetSelectedItem = useCallback(itemToSelect => {
+    setItem(itemToSelect);
+    setIsAnimating(false);
+    if (onSelect) {
+      onSelect(itemToSelect);
+    }
+  }, [onSelect]);
+
+  /**
+   * This function calculates the greatest width
+   */
+  useEffect(() => {
+    const isAtLeastOneItemWithImageGiven = list.some(_ref2 => {
+      let {
+        imageUrl
+      } = _ref2;
+      return imageUrl;
+    });
+    const textArray = list.map(_ref3 => {
+      let {
+        text
+      } = _ref3;
+      return text;
+    });
+    setHeight(calculateContentHeight(textArray));
+    textArray.push(placeholder);
+
+    // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left
+    // 32px = image width + flex gap
+    setMinWidth(calculateContentWidth(list) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0));
+  }, [list, placeholder]);
+
+  /**
+   * This function sets the external selected item
+   */
+  useEffect(() => {
+    setIsAnimating(false);
+    setItem(selectedItem);
+  }, [selectedItem]);
+  const placeholderImageUrl = useMemo(() => {
+    if (selectedItem) {
+      return selectedItem.imageUrl;
+    }
+    if (item) {
+      return item.imageUrl;
+    }
+    return undefined;
+  }, [item, selectedItem]);
+
+  /**
+   * This function resets the placeholder
+   */
+  const placeholderText = useMemo(() => {
+    let text = placeholder;
+    if (selectedItem) {
+      text = selectedItem.text;
+    } else if (item) {
+      text = item.text;
+    }
+    return text;
+  }, [item, placeholder, selectedItem]);
+
+  /**
+   * This function opens the content of the combobox
+   */
+  const handleHeaderClick = useCallback(() => {
+    if (!isDisabled) {
+      setIsAnimating(prevState => !prevState);
+    }
+  }, [isDisabled]);
+  const comboBoxBody = useMemo(() => {
+    const items = list.map(_ref4 => {
+      let {
+        imageUrl,
+        suffixElement,
+        text,
+        value
+      } = _ref4;
+      return /*#__PURE__*/React.createElement(ComboBoxItem, {
+        imageUrl: imageUrl,
+        isSelected: selectedItem ? value === selectedItem.value : false,
+        key: value,
+        onSelect: handleSetSelectedItem,
+        shouldShowRoundImage: shouldShowRoundImage,
+        suffixElement: suffixElement,
+        text: text,
+        value: value
+      });
+    });
+    const animate = isAnimating ? {
+      height: 'fit-content',
+      opacity: 1
+    } : {
+      height: 0,
+      opacity: 0
+    };
+    const style = direction === ComboBoxDirection.TOP ? {
+      transform: 'translateY(-100%)'
+    } : undefined;
+    return /*#__PURE__*/React.createElement(StyledMotionComboBoxBody, {
+      $browser: browser?.name,
+      animate: animate,
+      $height: height,
+      initial: {
+        height: 0,
+        opacity: 0
+      },
+      $maxHeight: maxHeight,
+      $minWidth: minWidth,
+      style: style,
+      $direction: direction,
+      transition: {
+        duration: 0.2
+      }
+    }, items);
+  }, [browser?.name, direction, handleSetSelectedItem, height, isAnimating, list, maxHeight, minWidth, selectedItem, shouldShowRoundImage]);
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBox, {
+    ref: ref
+  }, direction === ComboBoxDirection.TOP && comboBoxBody, /*#__PURE__*/React.createElement(StyledComboBoxHeader, {
+    $direction: direction,
+    $minWidth: minWidth,
+    onClick: handleHeaderClick,
+    $isOpen: isAnimating,
+    $isMobile: isMobile,
+    $isDisabled: isDisabled
+  }, /*#__PURE__*/React.createElement(StyledComboBoxPlaceholder, null, placeholderImageUrl && /*#__PURE__*/React.createElement(StyledComboBoxPlaceholderImage, {
+    src: placeholderImageUrl,
+    shouldShowRoundImage: shouldShowRoundImage
+  }), placeholderText), /*#__PURE__*/React.createElement(StyledComboBoxIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
+    icons: ['fa fa-chevron-down']
+  }))), direction === ComboBoxDirection.BOTTOM && comboBoxBody), [comboBoxBody, direction, handleHeaderClick, isAnimating, isDisabled, isMobile, minWidth, placeholderImageUrl, placeholderText, shouldShowRoundImage]);
+};
+ComboBox.displayName = 'ComboBox';
+export default ComboBox;
+//# sourceMappingURL=ComboBox.js.map

package/lib/components/combobox/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","names":["getDevice","React","useCallback","useEffect","useMemo","useRef","useState","ComboBoxDirection","calculateContentHeight","calculateContentWidth","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","selectedItem","shouldShowRoundImage","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","height","setHeight","ref","browser","isMobile","chayns","env","handleClick","event","current","contains","target","document","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","isAtLeastOneItemWithImageGiven","some","_ref2","imageUrl","textArray","map","_ref3","text","push","placeholderImageUrl","undefined","placeholderText","handleHeaderClick","prevState","comboBoxBody","items","_ref4","suffixElement","value","createElement","isSelected","key","animate","opacity","style","TOP","transform","$browser","name","$height","initial","$maxHeight","$minWidth","$direction","transition","duration","onClick","$isOpen","$isMobile","$isDisabled","src","icons","displayName"],"sources":["../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    FC,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport { calculateContentHeight, calculateContentWidth } from '../../utils/calculate';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n    imageUrl?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    list: IComboBoxItem[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    list,\n    maxHeight = '300px',\n    onSelect,\n    placeholder,\n    selectedItem,\n    shouldShowRoundImage,\n}) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [height, setHeight] = useState(0);\n\n    const ref = useRef<HTMLDivElement>(null);\n\n    const { browser } = getDevice();\n\n    const { isMobile } = chayns.env;\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (ref.current && !ref.current.contains(event.target as Node)) {\n                setIsAnimating(false);\n            }\n        },\n        [ref],\n    );\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, ref]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n\n        const textArray = list.map(({ text }) => text);\n\n        setHeight(calculateContentHeight(textArray));\n\n        textArray.push(placeholder);\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        setMinWidth(calculateContentWidth(list) + 45 + (isAtLeastOneItemWithImageGiven ? 32 : 0));\n    }, [list, placeholder]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (item) {\n            return item.imageUrl;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (item) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            setIsAnimating((prevState) => !prevState);\n        }\n    }, [isDisabled]);\n\n    const comboBoxBody = useMemo(() => {\n        const items = list.map(({ imageUrl, suffixElement, text, value }) => (\n            <ComboBoxItem\n                imageUrl={imageUrl}\n                isSelected={selectedItem ? value === selectedItem.value : false}\n                key={value}\n                onSelect={handleSetSelectedItem}\n                shouldShowRoundImage={shouldShowRoundImage}\n                suffixElement={suffixElement}\n                text={text}\n                value={value}\n            />\n        ));\n\n        const animate = isAnimating\n            ? { height: 'fit-content', opacity: 1 }\n            : { height: 0, opacity: 0 };\n\n        const style =\n            direction === ComboBoxDirection.TOP ? { transform: 'translateY(-100%)' } : undefined;\n\n        return (\n            <StyledMotionComboBoxBody\n                $browser={browser?.name}\n                animate={animate}\n                $height={height}\n                initial={{ height: 0, opacity: 0 }}\n                $maxHeight={maxHeight}\n                $minWidth={minWidth}\n                style={style}\n                $direction={direction}\n                transition={{ duration: 0.2 }}\n            >\n                {items}\n            </StyledMotionComboBoxBody>\n        );\n    }, [\n        browser?.name,\n        direction,\n        handleSetSelectedItem,\n        height,\n        isAnimating,\n        list,\n        maxHeight,\n        minWidth,\n        selectedItem,\n        shouldShowRoundImage,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox ref={ref}>\n                {direction === ComboBoxDirection.TOP && comboBoxBody}\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    $minWidth={minWidth}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isMobile={isMobile}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderText}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {direction === ComboBoxDirection.BOTTOM && comboBoxBody}\n            </StyledComboBox>\n        ),\n        [\n            comboBoxBody,\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isMobile,\n            minWidth,\n            placeholderImageUrl,\n            placeholderText,\n            shouldShowRoundImage,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAERC,WAAW,EACXC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QAGL,OAAO;AACd,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,sBAAsB,EAAEC,qBAAqB,QAAQ,uBAAuB;AACrF,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,YAAY,MAAM,8BAA8B;AACvD,SACIC,cAAc,EACdC,oBAAoB,EACpBC,yBAAyB,EACzBC,yBAAyB,EACzBC,8BAA8B,EAC9BC,wBAAwB,QACrB,mBAAmB;AA4C1B,MAAMC,QAA2B,GAAGC,IAAA,IAS9B;EAAA,IAT+B;IACjCC,SAAS,GAAGb,iBAAiB,CAACc,MAAM;IACpCC,UAAU,GAAG,KAAK;IAClBC,IAAI;IACJC,SAAS,GAAG,OAAO;IACnBC,QAAQ;IACRC,WAAW;IACXC,YAAY;IACZC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAM,CAACU,IAAI,EAAEC,OAAO,CAAC,GAAGxB,QAAQ,CAAgB,CAAC;EACjD,MAAM,CAACyB,WAAW,EAAEC,cAAc,CAAC,GAAG1B,QAAQ,CAAC,KAAK,CAAC;EACrD,MAAM,CAAC2B,QAAQ,EAAEC,WAAW,CAAC,GAAG5B,QAAQ,CAAC,CAAC,CAAC;EAC3C,MAAM,CAAC6B,MAAM,EAAEC,SAAS,CAAC,GAAG9B,QAAQ,CAAC,CAAC,CAAC;EAEvC,MAAM+B,GAAG,GAAGhC,MAAM,CAAiB,IAAI,CAAC;EAExC,MAAM;IAAEiC;EAAQ,CAAC,GAAGtC,SAAS,CAAC,CAAC;EAE/B,MAAM;IAAEuC;EAAS,CAAC,GAAGC,MAAM,CAACC,GAAG;EAE/B,MAAMC,WAAW,GAAGxC,WAAW,CAC1ByC,KAAiB,IAAK;IACnB,IAAIN,GAAG,CAACO,OAAO,IAAI,CAACP,GAAG,CAACO,OAAO,CAACC,QAAQ,CAACF,KAAK,CAACG,MAAc,CAAC,EAAE;MAC5Dd,cAAc,CAAC,KAAK,CAAC;IACzB;EACJ,CAAC,EACD,CAACK,GAAG,CACR,CAAC;;EAED;AACJ;AACA;EACIlC,SAAS,CAAC,MAAM;IACZ4C,QAAQ,CAACC,gBAAgB,CAAC,OAAO,EAAEN,WAAW,CAAC;IAE/C,OAAO,MAAM;MACTK,QAAQ,CAACE,mBAAmB,CAAC,OAAO,EAAEP,WAAW,CAAC;IACtD,CAAC;EACL,CAAC,EAAE,CAACA,WAAW,EAAEL,GAAG,CAAC,CAAC;;EAEtB;AACJ;AACA;EACI,MAAMa,qBAAqB,GAAGhD,WAAW,CACpCiD,YAA2B,IAAK;IAC7BrB,OAAO,CAACqB,YAAY,CAAC;IACrBnB,cAAc,CAAC,KAAK,CAAC;IAErB,IAAIP,QAAQ,EAAE;MACVA,QAAQ,CAAC0B,YAAY,CAAC;IAC1B;EACJ,CAAC,EACD,CAAC1B,QAAQ,CACb,CAAC;;EAED;AACJ;AACA;EACItB,SAAS,CAAC,MAAM;IACZ,MAAMiD,8BAA8B,GAAG7B,IAAI,CAAC8B,IAAI,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAS,CAAC,GAAAD,KAAA;MAAA,OAAKC,QAAQ;IAAA,EAAC;IAE5E,MAAMC,SAAS,GAAGjC,IAAI,CAACkC,GAAG,CAACC,KAAA;MAAA,IAAC;QAAEC;MAAK,CAAC,GAAAD,KAAA;MAAA,OAAKC,IAAI;IAAA,EAAC;IAE9CvB,SAAS,CAAC5B,sBAAsB,CAACgD,SAAS,CAAC,CAAC;IAE5CA,SAAS,CAACI,IAAI,CAAClC,WAAW,CAAC;;IAE3B;IACA;IACAQ,WAAW,CAACzB,qBAAqB,CAACc,IAAI,CAAC,GAAG,EAAE,IAAI6B,8BAA8B,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC;EAC7F,CAAC,EAAE,CAAC7B,IAAI,EAAEG,WAAW,CAAC,CAAC;;EAEvB;AACJ;AACA;EACIvB,SAAS,CAAC,MAAM;IACZ6B,cAAc,CAAC,KAAK,CAAC;IACrBF,OAAO,CAACH,YAAY,CAAC;EACzB,CAAC,EAAE,CAACA,YAAY,CAAC,CAAC;EAElB,MAAMkC,mBAAmB,GAAGzD,OAAO,CAAC,MAAM;IACtC,IAAIuB,YAAY,EAAE;MACd,OAAOA,YAAY,CAAC4B,QAAQ;IAChC;IAEA,IAAI1B,IAAI,EAAE;MACN,OAAOA,IAAI,CAAC0B,QAAQ;IACxB;IAEA,OAAOO,SAAS;EACpB,CAAC,EAAE,CAACjC,IAAI,EAAEF,YAAY,CAAC,CAAC;;EAExB;AACJ;AACA;EACI,MAAMoC,eAAe,GAAG3D,OAAO,CAAC,MAAM;IAClC,IAAIuD,IAAI,GAAGjC,WAAW;IAEtB,IAAIC,YAAY,EAAE;MACdgC,IAAI,GAAGhC,YAAY,CAACgC,IAAI;IAC5B,CAAC,MAAM,IAAI9B,IAAI,EAAE;MACb8B,IAAI,GAAG9B,IAAI,CAAC8B,IAAI;IACpB;IAEA,OAAOA,IAAI;EACf,CAAC,EAAE,CAAC9B,IAAI,EAAEH,WAAW,EAAEC,YAAY,CAAC,CAAC;;EAErC;AACJ;AACA;EACI,MAAMqC,iBAAiB,GAAG9D,WAAW,CAAC,MAAM;IACxC,IAAI,CAACoB,UAAU,EAAE;MACbU,cAAc,CAAEiC,SAAS,IAAK,CAACA,SAAS,CAAC;IAC7C;EACJ,CAAC,EAAE,CAAC3C,UAAU,CAAC,CAAC;EAEhB,MAAM4C,YAAY,GAAG9D,OAAO,CAAC,MAAM;IAC/B,MAAM+D,KAAK,GAAG5C,IAAI,CAACkC,GAAG,CAACW,KAAA;MAAA,IAAC;QAAEb,QAAQ;QAAEc,aAAa;QAAEV,IAAI;QAAEW;MAAM,CAAC,GAAAF,KAAA;MAAA,oBAC5DnE,KAAA,CAAAsE,aAAA,CAAC5D,YAAY;QACT4C,QAAQ,EAAEA,QAAS;QACnBiB,UAAU,EAAE7C,YAAY,GAAG2C,KAAK,KAAK3C,YAAY,CAAC2C,KAAK,GAAG,KAAM;QAChEG,GAAG,EAAEH,KAAM;QACX7C,QAAQ,EAAEyB,qBAAsB;QAChCtB,oBAAoB,EAAEA,oBAAqB;QAC3CyC,aAAa,EAAEA,aAAc;QAC7BV,IAAI,EAAEA,IAAK;QACXW,KAAK,EAAEA;MAAM,CAChB,CAAC;IAAA,CACL,CAAC;IAEF,MAAMI,OAAO,GAAG3C,WAAW,GACrB;MAAEI,MAAM,EAAE,aAAa;MAAEwC,OAAO,EAAE;IAAE,CAAC,GACrC;MAAExC,MAAM,EAAE,CAAC;MAAEwC,OAAO,EAAE;IAAE,CAAC;IAE/B,MAAMC,KAAK,GACPxD,SAAS,KAAKb,iBAAiB,CAACsE,GAAG,GAAG;MAAEC,SAAS,EAAE;IAAoB,CAAC,GAAGhB,SAAS;IAExF,oBACI7D,KAAA,CAAAsE,aAAA,CAACtD,wBAAwB;MACrB8D,QAAQ,EAAEzC,OAAO,EAAE0C,IAAK;MACxBN,OAAO,EAAEA,OAAQ;MACjBO,OAAO,EAAE9C,MAAO;MAChB+C,OAAO,EAAE;QAAE/C,MAAM,EAAE,CAAC;QAAEwC,OAAO,EAAE;MAAE,CAAE;MACnCQ,UAAU,EAAE3D,SAAU;MACtB4D,SAAS,EAAEnD,QAAS;MACpB2C,KAAK,EAAEA,KAAM;MACbS,UAAU,EAAEjE,SAAU;MACtBkE,UAAU,EAAE;QAAEC,QAAQ,EAAE;MAAI;IAAE,GAE7BpB,KACqB,CAAC;EAEnC,CAAC,EAAE,CACC7B,OAAO,EAAE0C,IAAI,EACb5D,SAAS,EACT8B,qBAAqB,EACrBf,MAAM,EACNJ,WAAW,EACXR,IAAI,EACJC,SAAS,EACTS,QAAQ,EACRN,YAAY,EACZC,oBAAoB,CACvB,CAAC;EAEF,OAAOxB,OAAO,CACV,mBACIH,KAAA,CAAAsE,aAAA,CAAC3D,cAAc;IAACyB,GAAG,EAAEA;EAAI,GACpBjB,SAAS,KAAKb,iBAAiB,CAACsE,GAAG,IAAIX,YAAY,eACpDjE,KAAA,CAAAsE,aAAA,CAAC1D,oBAAoB;IACjBwE,UAAU,EAAEjE,SAAU;IACtBgE,SAAS,EAAEnD,QAAS;IACpBuD,OAAO,EAAExB,iBAAkB;IAC3ByB,OAAO,EAAE1D,WAAY;IACrB2D,SAAS,EAAEnD,QAAS;IACpBoD,WAAW,EAAErE;EAAW,gBAExBrB,KAAA,CAAAsE,aAAA,CAACxD,yBAAyB,QACrB8C,mBAAmB,iBAChB5D,KAAA,CAAAsE,aAAA,CAACvD,8BAA8B;IAC3B4E,GAAG,EAAE/B,mBAAoB;IACzBjC,oBAAoB,EAAEA;EAAqB,CAC9C,CACJ,EACAmC,eACsB,CAAC,eAC5B9D,KAAA,CAAAsE,aAAA,CAACzD,yBAAyB,qBACtBb,KAAA,CAAAsE,aAAA,CAAC7D,IAAI;IAACmF,KAAK,EAAE,CAAC,oBAAoB;EAAE,CAAE,CACf,CACT,CAAC,EACtBzE,SAAS,KAAKb,iBAAiB,CAACc,MAAM,IAAI6C,YAC/B,CACnB,EACD,CACIA,YAAY,EACZ9C,SAAS,EACT4C,iBAAiB,EACjBjC,WAAW,EACXT,UAAU,EACViB,QAAQ,EACRN,QAAQ,EACR4B,mBAAmB,EACnBE,eAAe,EACfnC,oBAAoB,CAE5B,CAAC;AACL,CAAC;AAEDV,QAAQ,CAAC4E,WAAW,GAAG,UAAU;AAEjC,eAAe5E,QAAQ"}