npm - @helpwave/hightide - Versions diffs - 0.1.7 → 0.1.8 - Mend

@helpwave/hightide 0.1.7 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (175) hide show

package/dist/components/modals/DiscardChangesModal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/modals/DiscardChangesModal.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/user-action/Button.tsx","../../../src/components/modals/ConfirmModal.tsx","../../../src/components/layout-and-navigation/Overlay.tsx","../../../src/hooks/useHoverState.ts","../../../src/components/user-action/Tooltip.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport type { ConfirmModalProps } from './ConfirmModal'\nimport { ConfirmModal } from './ConfirmModal'\n\ntype DiscardChangesModalTranslation = {\n save: string,\n cancel: string,\n dontSave: string,\n title: string,\n description: string,\n}\n\nconst defaultDiscardChangesModalTranslation = {\n en: {\n save: 'Save',\n cancel: 'Cancel',\n dontSave: 'Don\\'t save',\n title: 'Unsaved Changes',\n description: 'Do you want to save your changes?'\n },\n de: {\n save: 'Speichern',\n cancel: 'Abbrechen',\n dontSave: 'Nicht Speichern',\n title: 'Ungespeicherte Änderungen',\n description: 'Möchtest du die Änderungen speichern?'\n }\n}\n\ntype DiscardChangesModalProps = Omit<ConfirmModalProps, 'onDecline' \| 'onConfirm' \| 'buttonOverwrites'> & {\n isShowingDecline?: boolean,\n requireAnswer?: boolean,\n onCancel: () => void,\n onSave: () => void,\n onDontSave: () => void,\n}\n\nexport const DiscardChangesModal = ({\n overwriteTranslation,\n children,\n onCancel,\n onSave,\n onDontSave,\n headerProps,\n ...modalProps\n }: PropsForTranslation<DiscardChangesModalTranslation, PropsWithChildren<DiscardChangesModalProps>>) => {\n const translation = useTranslation(defaultDiscardChangesModalTranslation, overwriteTranslation)\n return (\n <ConfirmModal\n headerProps={{\n ...headerProps,\n titleText: headerProps?.titleText ?? translation.title,\n descriptionText: headerProps?.descriptionText ?? translation.description,\n }}\n onConfirm={onSave}\n onCancel={onCancel}\n onDecline={onDontSave}\n buttonOverwrites={[{ text: translation.cancel }, { text: translation.dontSave }, { text: translation.save }]}\n {...modalProps}\n >\n {children}\n </ConfirmModal>\n )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test \|\| language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value \|\| initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/*\n The supported languages\n /\nconst languages = ['en', 'de'] as const\n\n/\n The supported languages\n /\nexport type Language = typeof languages[number]\n\n/\n The supported languages' names in their respective language\n /\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/\n The default language\n /\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/\n A constant definition for holding data regarding languages\n /\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Language,\n translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/\n Adds the `language` prop to the component props.\n \n @param Translation the type of the translation object\n \n @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n /\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Language, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\n\n/\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n color?: SolidButtonColor,\n}\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: SolidButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n neutral: 'text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent text-button-text-primary-text',\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-text-primary-icon',\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n /\nconst IconButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n onClick,\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n","import type { PropsWithChildren } from 'react'\nimport type { SolidButtonColor } from '../user-action/Button'\nimport { SolidButton } from '../user-action/Button'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport clsx from 'clsx'\nimport type { ModalProps } from '../layout-and-navigation/Overlay'\nimport { Modal } from '../layout-and-navigation/Overlay'\n\ntype ConfirmModalTranslation = {\n confirm: string,\n cancel: string,\n decline: string,\n}\n\nexport type ConfirmModalType = 'positive' \| 'negative' \| 'neutral' \| 'primary'\n\nconst defaultConfirmDialogTranslation = {\n en: {\n confirm: 'Confirm',\n cancel: 'Cancel',\n decline: 'Decline'\n },\n de: {\n confirm: 'Bestätigen',\n cancel: 'Abbrechen',\n decline: 'Ablehnen'\n }\n}\n\ntype ButtonOverwriteType = {\n text?: string,\n color?: SolidButtonColor,\n disabled?: boolean,\n}\n\nexport type ConfirmModalProps = Omit<ModalProps, 'onClose'> & {\n isShowingDecline?: boolean,\n requireAnswer?: boolean,\n onCancel: () => void,\n onConfirm: () => void,\n onDecline?: () => void,\n confirmType?: ConfirmModalType,\n /\n Order: Cancel, Decline, Confirm\n /\n buttonOverwrites?: [ButtonOverwriteType, ButtonOverwriteType, ButtonOverwriteType],\n}\n\n/\n A Modal for asking the user for confirmation\n /\nexport const ConfirmModal = ({\n overwriteTranslation,\n children,\n onCancel,\n onConfirm,\n onDecline,\n confirmType = 'positive',\n buttonOverwrites,\n className,\n ...restProps\n }: PropsForTranslation<ConfirmModalTranslation, PropsWithChildren<ConfirmModalProps>>) => {\n const translation = useTranslation(defaultConfirmDialogTranslation, overwriteTranslation)\n\n const mapping: Record<ConfirmModalType, SolidButtonColor> = {\n neutral: 'neutral',\n negative: 'negative',\n positive: 'positive',\n primary: 'primary',\n }\n\n return (\n <Modal {...restProps} onClose={onCancel} className={clsx('justify-between', className)}>\n <div className=\"col grow\">\n {children}\n </div>\n <div className=\"row mt-3 gap-x-4 justify-end\">\n {onCancel && (\n <SolidButton\n color={buttonOverwrites?.[0].color ?? 'neutral'}\n onClick={onCancel}\n disabled={buttonOverwrites?.[0].disabled ?? false}\n >\n {buttonOverwrites?.[0].text ?? translation.cancel}\n </SolidButton>\n )}\n {onDecline && (\n <SolidButton\n color={buttonOverwrites?.[1].color ?? 'negative'}\n onClick={onDecline}\n\n disabled={buttonOverwrites?.[1].disabled ?? false}\n >\n {buttonOverwrites?.[1].text ?? translation.decline}\n </SolidButton>\n )}\n <SolidButton\n autoFocus\n color={buttonOverwrites?.[2].color ?? mapping[confirmType]}\n onClick={onConfirm}\n disabled={buttonOverwrites?.[2].disabled ?? false}\n >\n {buttonOverwrites?.[2].text ?? translation.confirm}\n </SolidButton>\n </div>\n </Modal>\n )\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport ReactDOM from 'react-dom'\nimport clsx from 'clsx'\nimport { Tooltip } from '../user-action/Tooltip'\nimport { X } from 'lucide-react'\nimport { IconButton } from '../user-action/Button'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport type { Language } from '../../localization/util'\n\nexport type OverlayProps = PropsWithChildren<{\n /\n Whether the overlay should be currently displayed\n /\n isOpen: boolean,\n /\n Callback when the background is clicked\n /\n onBackgroundClick?: () => void,\n /\n Styling for the background\n \n To remove the darkening, set bg-transparent\n /\n backgroundClassName?: string,\n}>\n\n/\n A generic overlay window which is managed by its parent\n /\nexport const Overlay = ({\n children,\n isOpen,\n onBackgroundClick,\n backgroundClassName,\n }: PropsWithChildren<OverlayProps>) => {\n // The element to which the overlay will be attached to\n const [root, setRoot] = useState<HTMLElement>()\n\n useEffect(() => {\n setRoot(document.body)\n }, [])\n\n if (!root \|\| !isOpen) return null\n\n\n return ReactDOM.createPortal(\n <div className={clsx('fixed inset-0 z-[9999]')}>\n <div\n className={clsx('fixed inset-0 h-screen w-screen bg-black/30', backgroundClassName)}\n onClick={onBackgroundClick}\n />\n {children}\n </div>,\n root\n )\n}\n\n\nlet overlayStack: HTMLDivElement[] = []\n\n\n// --- Modal ---\n\ntype ModalHeaderTranslation = {\n close: string,\n}\n\nconst defaultModalHeaderTranslation: Record<Language, ModalHeaderTranslation> = {\n en: {\n close: 'Close'\n },\n de: {\n close: 'Schließen'\n }\n}\n\nexport type OverlayHeaderProps = {\n /\n Callback when the close button is clicked. If omitted or undefined, the button is hidden\n /\n onClose?: () => void,\n /* The title of the Modal. If you want to only set the text use `titleText` instead /\n title?: ReactNode,\n /* The title text of the Modal. If you want to set a custom title use `title` instead /\n titleText?: string,\n /* The description of the Modal. If you want to only set the text use `descriptionText` instead /\n description?: ReactNode,\n /* The description text of the Modal. If you want to set a custom description use `description` instead /\n descriptionText?: string,\n}\n\n/\n A header that should be in an Overlay\n /\nexport const OverlayHeader = ({\n overwriteTranslation,\n onClose,\n title,\n titleText = '',\n description,\n descriptionText = ''\n }: PropsForTranslation<ModalHeaderTranslation, OverlayHeaderProps>) => {\n const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation)\n const hasTitleRow = !!title \|\| !!titleText \|\| !!onClose\n const titleRow = (\n <div className=\"row justify-between items-start gap-x-8\">\n {title ?? (\n <h2\n className={clsx('textstyle-title-lg', {\n 'mb-1': description \|\| descriptionText,\n })}\n >\n {titleText}\n </h2>\n )}\n {!!onClose && (\n <Tooltip tooltip={translation.close}>\n <IconButton color=\"neutral\" size=\"small\" onClick={onClose}>\n <X className=\"w-full h-full\"/>\n </IconButton>\n </Tooltip>\n )}\n </div>\n )\n\n return (\n <div className=\"col\">\n {hasTitleRow && (titleRow)}\n {description ?? (descriptionText && (<span className=\"textstyle-description\">{descriptionText}</span>))}\n </div>\n )\n}\n\nexport type ModalProps = {\n isOpen: boolean,\n onClose: () => void,\n className?: string,\n backgroundClassName?: string,\n headerProps?: Omit<OverlayHeaderProps, 'onClose'>,\n}\n\n/\n A Generic Modal Window\n /\nexport const Modal = ({\n children,\n isOpen,\n onClose,\n className,\n backgroundClassName,\n headerProps,\n }: PropsWithChildren<ModalProps>) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (!isOpen) return\n\n const modal = ref.current\n\n if (!modal) {\n console.error('modal open, but no ref found')\n return\n }\n\n overlayStack.push(modal)\n\n const focusable = modal?.querySelectorAll(\n 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n )\n const first = focusable[0]\n const last = focusable[focusable.length - 1]\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const isTopmost = overlayStack[overlayStack.length - 1] === modal\n if (!isTopmost) return\n\n if (e.key === 'Escape') {\n e.stopPropagation()\n onClose()\n } else if (e.key === 'Tab') {\n if (focusable.length === 0) return\n\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n (last as HTMLElement).focus()\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n (first as HTMLElement).focus()\n }\n }\n }\n\n modal.focus()\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n overlayStack = overlayStack.filter(m => m !== modal)\n }\n }, [isOpen, onClose])\n\n return (\n <Overlay\n isOpen={isOpen}\n onBackgroundClick={onClose}\n backgroundClassName={backgroundClassName}\n >\n <div\n ref={ref}\n tabIndex={-1}\n className={clsx(\n 'fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl',\n className\n )}\n role=\"dialog\"\n aria-modal={true}\n >\n <OverlayHeader {...headerProps} onClose={onClose}/>\n {children}\n </div>\n </Overlay>\n )\n}\n\n// --- Dialog ---\n\nexport type DialogProps = Omit<OverlayProps, 'onBackgroundClick'> & {\n headerProps?: Omit<OverlayHeaderProps, 'onClose'>,\n className?: string,\n}\n\n/\n A Generic Dialog Window\n /\nexport const Dialog = ({\n children,\n isOpen,\n className,\n backgroundClassName,\n headerProps,\n }: PropsWithChildren<DialogProps>) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (!isOpen) return\n\n const dialog = ref.current\n\n if (!dialog) {\n console.error('dialog open, but no ref found')\n return\n }\n\n overlayStack.push(dialog)\n\n const focusable = dialog?.querySelectorAll(\n 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n )\n const first = focusable[0]\n const last = focusable[focusable.length - 1]\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const isTopmost = overlayStack[overlayStack.length - 1] === dialog\n if (!isTopmost) return\n\n if (e.key === 'Escape') {\n e.stopPropagation()\n } else if (e.key === 'Tab') {\n if (focusable.length === 0) return\n\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n (last as HTMLElement).focus()\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n (first as HTMLElement).focus()\n }\n }\n }\n\n dialog.focus()\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n overlayStack = overlayStack.filter(m => m !== dialog)\n }\n }, [isOpen])\n\n return (\n <Overlay\n isOpen={isOpen}\n backgroundClassName={backgroundClassName}\n >\n <div\n ref={ref}\n tabIndex={-1}\n className={clsx(\n 'fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl',\n className\n )}\n role=\"dialog\"\n aria-modal={true}\n >\n {!!headerProps && (<OverlayHeader {...headerProps}/>)}\n {children}\n </div>\n </Overlay>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n /\n The delay after which the menu is closed in milliseconds\n \n default: 200ms\n /\n closingDelay: number,\n /\n Whether the hover state management should be disabled\n \n default: false\n /\n isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n /\n Whether the element is hovered\n /\n isHovered: boolean,\n /\n Function to change the current hover status\n /\n setIsHovered: Dispatch<SetStateAction<boolean>>,\n /\n Handlers to pass on to the component that should be hovered\n /\n handlers: {\n onMouseEnter: () => void,\n onMouseLeave: () => void,\n },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n closingDelay: 200,\n isDisabled: false,\n}\n\n/\n @param props See UseHoverStateProps\n \n A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n /\nexport const useHoverState = (props: Partial<UseHoverStateProps> \| undefined = undefined): UseHoverStateReturnType => {\n const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n const [isHovered, setIsHovered] = useState(false)\n const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n const onMouseEnter = () => {\n if (isDisabled) {\n return\n }\n clearTimeout(timer)\n setIsHovered(true)\n }\n\n const onMouseLeave = () => {\n if (isDisabled) {\n return\n }\n setTimer(setTimeout(() => {\n setIsHovered(false)\n }, closingDelay))\n }\n\n useEffect(() => {\n if (timer) {\n return () => {\n clearTimeout(timer)\n }\n }\n })\n\n useEffect(() => {\n if (timer) {\n clearTimeout(timer)\n }\n }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return {\n isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n }\n}\n","import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'\nimport { useHoverState } from '../../hooks/useHoverState'\nimport { clsx } from 'clsx'\n\ntype Position = 'top' \| 'bottom' \| 'left' \| 'right'\n\nexport type TooltipProps = PropsWithChildren<{\n tooltip: string \| ReactNode,\n /\n Number of milliseconds until the tooltip appears\n \n defaults to 1000ms\n /\n animationDelay?: number,\n /\n Class names of additional styling properties for the tooltip\n /\n tooltipClassName?: string,\n /\n Class names of additional styling properties for the container from which the tooltip will be created\n /\n containerClassName?: string,\n position?: Position,\n zIndex?: number,\n}>\n\n/\n A Component for showing a tooltip when hovering over Content\n * @param tooltip The tooltip to show can be a text or any ReactNode\n * @param children The Content for which the tooltip should be created\n * @param animationDelay The delay before the tooltip appears\n * @param tooltipClassName Additional ClassNames for the Container of the tooltip\n * @param containerClassName Additional ClassNames for the Container holding the content\n * @param position The direction of the tooltip relative to the Container\n * @param zIndex The z Index of the tooltip (you may require this when stacking modal)\n * @constructor\n */\nexport const Tooltip = ({\n tooltip,\n children,\n animationDelay = 650,\n tooltipClassName = '',\n containerClassName = '',\n position = 'bottom',\n zIndex = 10,\n }: TooltipProps) => {\n const { isHovered, handlers } = useHoverState()\n\n const positionClasses = {\n top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,\n bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,\n left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,\n right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`\n }\n\n const triangleSize = 6\n const triangleClasses = {\n top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,\n bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,\n left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,\n right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`\n }\n\n const triangleStyle: Record<Position, CSSProperties> = {\n top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },\n bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },\n left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },\n right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }\n }\n\n return (\n <div\n className={clsx('relative inline-block', containerClassName)}\n {...handlers}\n >\n {children}\n {isHovered && (\n <div\n className={clsx(\n `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap\n animate-tooltip-fade-in shadow-lg bg-tooltip-background`,\n positionClasses[position], tooltipClassName\n )}\n style={{ zIndex, animationDelay: animationDelay + 'ms' }}\n >\n {tooltip}\n <div\n className={clsx(`absolute w-0 h-0`, triangleClasses[position])}\n style={{ ...triangleStyle[position], zIndex }}\n />\n </div>\n )}\n </div>\n )\n}\n"],"mappings":"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","names":["import_react","import_jsx_runtime","clsx","clsx","import_clsx","import_react","import_clsx","import_react","import_clsx","import_jsx_runtime","import_jsx_runtime","ReactDOM","clsx","import_jsx_runtime","clsx","import_jsx_runtime"]}
1	+ {"version":3,"sources":["../../../src/components/modals/DiscardChangesModal.tsx","../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/user-action/Button.tsx","../../../src/components/modals/ConfirmModal.tsx","../../../src/components/layout-and-navigation/Overlay.tsx","../../../src/hooks/useHoverState.ts","../../../src/components/user-action/Tooltip.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport type { ConfirmModalProps } from './ConfirmModal'\nimport { ConfirmModal } from './ConfirmModal'\n\ntype DiscardChangesModalTranslation = {\n save: string,\n cancel: string,\n dontSave: string,\n title: string,\n description: string,\n}\n\nconst defaultDiscardChangesModalTranslation = {\n en: {\n save: 'Save',\n cancel: 'Cancel',\n dontSave: 'Don\\'t save',\n title: 'Unsaved Changes',\n description: 'Do you want to save your changes?'\n },\n de: {\n save: 'Speichern',\n cancel: 'Abbrechen',\n dontSave: 'Nicht Speichern',\n title: 'Ungespeicherte Änderungen',\n description: 'Möchtest du die Änderungen speichern?'\n }\n}\n\ntype DiscardChangesModalProps = Omit<ConfirmModalProps, 'onDecline' \| 'onConfirm' \| 'buttonOverwrites'> & {\n isShowingDecline?: boolean,\n requireAnswer?: boolean,\n onCancel: () => void,\n onSave: () => void,\n onDontSave: () => void,\n}\n\nexport const DiscardChangesModal = ({\n overwriteTranslation,\n children,\n onCancel,\n onSave,\n onDontSave,\n headerProps,\n ...modalProps\n }: PropsForTranslation<DiscardChangesModalTranslation, PropsWithChildren<DiscardChangesModalProps>>) => {\n const translation = useTranslation(defaultDiscardChangesModalTranslation, overwriteTranslation)\n return (\n <ConfirmModal\n headerProps={{\n ...headerProps,\n titleText: headerProps?.titleText ?? translation.title,\n descriptionText: headerProps?.descriptionText ?? translation.description,\n }}\n onConfirm={onSave}\n onCancel={onCancel}\n onDecline={onDontSave}\n buttonOverwrites={[{ text: translation.cancel }, { text: translation.dontSave }, { text: translation.save }]}\n {...modalProps}\n >\n {children}\n </ConfirmModal>\n )\n}\n","import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test \|\| language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value \|\| initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/*\n The supported languages\n /\nconst languages = ['en', 'de'] as const\n\n/\n The supported languages\n /\nexport type Language = typeof languages[number]\n\n/\n The supported languages' names in their respective language\n /\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/\n The default language\n /\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/\n A constant definition for holding data regarding languages\n /\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Language,\n translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/\n Adds the `language` prop to the component props.\n \n @param Translation the type of the translation object\n \n @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n /\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Language, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\n\n/\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n color?: SolidButtonColor,\n}\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: SolidButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n neutral: 'text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent text-button-text-primary-text',\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-text-primary-icon',\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n /\nconst IconButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n onClick,\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n","import type { PropsWithChildren } from 'react'\nimport type { SolidButtonColor } from '../user-action/Button'\nimport { SolidButton } from '../user-action/Button'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport clsx from 'clsx'\nimport type { ModalProps } from '../layout-and-navigation/Overlay'\nimport { Modal } from '../layout-and-navigation/Overlay'\n\ntype ConfirmModalTranslation = {\n confirm: string,\n cancel: string,\n decline: string,\n}\n\nexport type ConfirmModalType = 'positive' \| 'negative' \| 'neutral' \| 'primary'\n\nconst defaultConfirmDialogTranslation = {\n en: {\n confirm: 'Confirm',\n cancel: 'Cancel',\n decline: 'Decline'\n },\n de: {\n confirm: 'Bestätigen',\n cancel: 'Abbrechen',\n decline: 'Ablehnen'\n }\n}\n\ntype ButtonOverwriteType = {\n text?: string,\n color?: SolidButtonColor,\n disabled?: boolean,\n}\n\nexport type ConfirmModalProps = Omit<ModalProps, 'onClose'> & {\n isShowingDecline?: boolean,\n requireAnswer?: boolean,\n onCancel: () => void,\n onConfirm: () => void,\n onDecline?: () => void,\n confirmType?: ConfirmModalType,\n /\n Order: Cancel, Decline, Confirm\n /\n buttonOverwrites?: [ButtonOverwriteType, ButtonOverwriteType, ButtonOverwriteType],\n}\n\n/\n A Modal for asking the user for confirmation\n /\nexport const ConfirmModal = ({\n overwriteTranslation,\n children,\n onCancel,\n onConfirm,\n onDecline,\n confirmType = 'positive',\n buttonOverwrites,\n className,\n ...restProps\n }: PropsForTranslation<ConfirmModalTranslation, PropsWithChildren<ConfirmModalProps>>) => {\n const translation = useTranslation(defaultConfirmDialogTranslation, overwriteTranslation)\n\n const mapping: Record<ConfirmModalType, SolidButtonColor> = {\n neutral: 'neutral',\n negative: 'negative',\n positive: 'positive',\n primary: 'primary',\n }\n\n return (\n <Modal {...restProps} onClose={onCancel} className={clsx('justify-between', className)}>\n <div className=\"col grow\">\n {children}\n </div>\n <div className=\"row mt-3 gap-x-4 justify-end\">\n {onCancel && (\n <SolidButton\n color={buttonOverwrites?.[0].color ?? 'neutral'}\n onClick={onCancel}\n disabled={buttonOverwrites?.[0].disabled ?? false}\n >\n {buttonOverwrites?.[0].text ?? translation.cancel}\n </SolidButton>\n )}\n {onDecline && (\n <SolidButton\n color={buttonOverwrites?.[1].color ?? 'negative'}\n onClick={onDecline}\n\n disabled={buttonOverwrites?.[1].disabled ?? false}\n >\n {buttonOverwrites?.[1].text ?? translation.decline}\n </SolidButton>\n )}\n <SolidButton\n autoFocus\n color={buttonOverwrites?.[2].color ?? mapping[confirmType]}\n onClick={onConfirm}\n disabled={buttonOverwrites?.[2].disabled ?? false}\n >\n {buttonOverwrites?.[2].text ?? translation.confirm}\n </SolidButton>\n </div>\n </Modal>\n )\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport ReactDOM from 'react-dom'\nimport clsx from 'clsx'\nimport { Tooltip } from '../user-action/Tooltip'\nimport { X } from 'lucide-react'\nimport { IconButton } from '../user-action/Button'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport type { Language } from '../../localization/util'\n\nexport type OverlayProps = PropsWithChildren<{\n /\n Whether the overlay should be currently displayed\n /\n isOpen: boolean,\n /\n Callback when the background is clicked\n /\n onBackgroundClick?: () => void,\n /\n Styling for the background\n \n To remove the darkening, set bg-transparent\n /\n backgroundClassName?: string,\n}>\n\n/\n A generic overlay window which is managed by its parent\n /\nexport const Overlay = ({\n children,\n isOpen,\n onBackgroundClick,\n backgroundClassName,\n }: PropsWithChildren<OverlayProps>) => {\n // The element to which the overlay will be attached to\n const [root, setRoot] = useState<HTMLElement>()\n\n useEffect(() => {\n setRoot(document.body)\n }, [])\n\n if (!root \|\| !isOpen) return null\n\n\n return ReactDOM.createPortal(\n <div className={clsx('fixed inset-0 z-[9999]')}>\n <div\n className={clsx('fixed inset-0 h-screen w-screen bg-black/30', backgroundClassName)}\n onClick={onBackgroundClick}\n />\n {children}\n </div>,\n root\n )\n}\n\n\nlet overlayStack: HTMLDivElement[] = []\n\n\n// --- Modal ---\n\ntype ModalHeaderTranslation = {\n close: string,\n}\n\nconst defaultModalHeaderTranslation: Record<Language, ModalHeaderTranslation> = {\n en: {\n close: 'Close'\n },\n de: {\n close: 'Schließen'\n }\n}\n\nexport type OverlayHeaderProps = {\n /\n Callback when the close button is clicked. If omitted or undefined, the button is hidden\n /\n onClose?: () => void,\n /* The title of the Modal. If you want to only set the text use `titleText` instead /\n title?: ReactNode,\n /* The title text of the Modal. If you want to set a custom title use `title` instead /\n titleText?: string,\n /* The description of the Modal. If you want to only set the text use `descriptionText` instead /\n description?: ReactNode,\n /* The description text of the Modal. If you want to set a custom description use `description` instead /\n descriptionText?: string,\n}\n\n/\n A header that should be in an Overlay\n /\nexport const OverlayHeader = ({\n overwriteTranslation,\n onClose,\n title,\n titleText = '',\n description,\n descriptionText = ''\n }: PropsForTranslation<ModalHeaderTranslation, OverlayHeaderProps>) => {\n const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation)\n const hasTitleRow = !!title \|\| !!titleText \|\| !!onClose\n const titleRow = (\n <div className=\"row justify-between items-start gap-x-8\">\n {title ?? (\n <h2\n className={clsx('textstyle-title-lg', {\n 'mb-1': description \|\| descriptionText,\n })}\n >\n {titleText}\n </h2>\n )}\n {!!onClose && (\n <Tooltip tooltip={translation.close}>\n <IconButton color=\"neutral\" size=\"small\" onClick={onClose}>\n <X className=\"w-full h-full\"/>\n </IconButton>\n </Tooltip>\n )}\n </div>\n )\n\n return (\n <div className=\"col\">\n {hasTitleRow && (titleRow)}\n {description ?? (descriptionText && (<span className=\"textstyle-description\">{descriptionText}</span>))}\n </div>\n )\n}\n\nexport type ModalProps = {\n isOpen: boolean,\n onClose: () => void,\n className?: string,\n backgroundClassName?: string,\n headerProps?: Omit<OverlayHeaderProps, 'onClose'>,\n}\n\n/\n A Generic Modal Window\n /\nexport const Modal = ({\n children,\n isOpen,\n onClose,\n className,\n backgroundClassName,\n headerProps,\n }: PropsWithChildren<ModalProps>) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (!isOpen) return\n\n const modal = ref.current\n\n if (!modal) {\n console.error('modal open, but no ref found')\n return\n }\n\n overlayStack.push(modal)\n\n const focusable = modal?.querySelectorAll(\n 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n )\n const first = focusable[0]\n const last = focusable[focusable.length - 1]\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const isTopmost = overlayStack[overlayStack.length - 1] === modal\n if (!isTopmost) return\n\n if (e.key === 'Escape') {\n e.stopPropagation()\n onClose()\n } else if (e.key === 'Tab') {\n if (focusable.length === 0) return\n\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n (last as HTMLElement).focus()\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n (first as HTMLElement).focus()\n }\n }\n }\n\n modal.focus()\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n overlayStack = overlayStack.filter(m => m !== modal)\n }\n }, [isOpen, onClose])\n\n return (\n <Overlay\n isOpen={isOpen}\n onBackgroundClick={onClose}\n backgroundClassName={backgroundClassName}\n >\n <div\n ref={ref}\n tabIndex={-1}\n className={clsx(\n 'fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl',\n className\n )}\n role=\"dialog\"\n aria-modal={true}\n >\n <OverlayHeader {...headerProps} onClose={onClose}/>\n {children}\n </div>\n </Overlay>\n )\n}\n\n// --- Dialog ---\n\nexport type DialogProps = Omit<OverlayProps, 'onBackgroundClick'> & {\n headerProps?: Omit<OverlayHeaderProps, 'onClose'>,\n className?: string,\n}\n\n/\n A Generic Dialog Window\n /\nexport const Dialog = ({\n children,\n isOpen,\n className,\n backgroundClassName,\n headerProps,\n }: PropsWithChildren<DialogProps>) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (!isOpen) return\n\n const dialog = ref.current\n\n if (!dialog) {\n console.error('dialog open, but no ref found')\n return\n }\n\n overlayStack.push(dialog)\n\n const focusable = dialog?.querySelectorAll(\n 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n )\n const first = focusable[0]\n const last = focusable[focusable.length - 1]\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const isTopmost = overlayStack[overlayStack.length - 1] === dialog\n if (!isTopmost) return\n\n if (e.key === 'Escape') {\n e.stopPropagation()\n } else if (e.key === 'Tab') {\n if (focusable.length === 0) return\n\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n (last as HTMLElement).focus()\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n (first as HTMLElement).focus()\n }\n }\n }\n\n dialog.focus()\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n overlayStack = overlayStack.filter(m => m !== dialog)\n }\n }, [isOpen])\n\n return (\n <Overlay\n isOpen={isOpen}\n backgroundClassName={backgroundClassName}\n >\n <div\n ref={ref}\n tabIndex={-1}\n className={clsx(\n 'fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl',\n className\n )}\n role=\"dialog\"\n aria-modal={true}\n >\n {!!headerProps && (<OverlayHeader {...headerProps}/>)}\n {children}\n </div>\n </Overlay>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n /\n The delay after which the menu is closed in milliseconds\n \n default: 200ms\n /\n closingDelay: number,\n /\n Whether the hover state management should be disabled\n \n default: false\n /\n isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n /\n Whether the element is hovered\n /\n isHovered: boolean,\n /\n Function to change the current hover status\n /\n setIsHovered: Dispatch<SetStateAction<boolean>>,\n /\n Handlers to pass on to the component that should be hovered\n /\n handlers: {\n onMouseEnter: () => void,\n onMouseLeave: () => void,\n },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n closingDelay: 200,\n isDisabled: false,\n}\n\n/\n @param props See UseHoverStateProps\n \n A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n /\nexport const useHoverState = (props: Partial<UseHoverStateProps> \| undefined = undefined): UseHoverStateReturnType => {\n const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n const [isHovered, setIsHovered] = useState(false)\n const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n const onMouseEnter = () => {\n if (isDisabled) {\n return\n }\n clearTimeout(timer)\n setIsHovered(true)\n }\n\n const onMouseLeave = () => {\n if (isDisabled) {\n return\n }\n setTimer(setTimeout(() => {\n setIsHovered(false)\n }, closingDelay))\n }\n\n useEffect(() => {\n if (timer) {\n return () => {\n clearTimeout(timer)\n }\n }\n })\n\n useEffect(() => {\n if (timer) {\n clearTimeout(timer)\n }\n }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return {\n isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n }\n}\n","import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'\nimport { useHoverState } from '../../hooks/useHoverState'\nimport { clsx } from 'clsx'\n\ntype Position = 'top' \| 'bottom' \| 'left' \| 'right'\n\nexport type TooltipProps = PropsWithChildren<{\n tooltip: string \| ReactNode,\n /\n Number of milliseconds until the tooltip appears\n \n defaults to 1000ms\n /\n animationDelay?: number,\n /\n Class names of additional styling properties for the tooltip\n /\n tooltipClassName?: string,\n /\n Class names of additional styling properties for the container from which the tooltip will be created\n /\n containerClassName?: string,\n position?: Position,\n zIndex?: number,\n}>\n\n/\n A Component for showing a tooltip when hovering over Content\n * @param tooltip The tooltip to show can be a text or any ReactNode\n * @param children The Content for which the tooltip should be created\n * @param animationDelay The delay before the tooltip appears\n * @param tooltipClassName Additional ClassNames for the Container of the tooltip\n * @param containerClassName Additional ClassNames for the Container holding the content\n * @param position The direction of the tooltip relative to the Container\n * @param zIndex The z Index of the tooltip (you may require this when stacking modal)\n * @constructor\n */\nexport const Tooltip = ({\n tooltip,\n children,\n animationDelay = 650,\n tooltipClassName = '',\n containerClassName = '',\n position = 'bottom',\n zIndex = 10,\n }: TooltipProps) => {\n const { isHovered, handlers } = useHoverState()\n\n const positionClasses = {\n top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,\n bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,\n left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,\n right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`\n }\n\n const triangleSize = 6\n const triangleClasses = {\n top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,\n bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,\n left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,\n right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`\n }\n\n const triangleStyle: Record<Position, CSSProperties> = {\n top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },\n bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },\n left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },\n right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }\n }\n\n return (\n <div\n className={clsx('relative inline-block', containerClassName)}\n {...handlers}\n >\n {children}\n {isHovered && (\n <div\n className={clsx(\n `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap\n animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,\n positionClasses[position], tooltipClassName\n )}\n style={{ zIndex, animationDelay: animationDelay + 'ms' }}\n >\n {tooltip}\n <div\n className={clsx(`absolute w-0 h-0`, triangleClasses[position])}\n style={{ ...triangleStyle[position], zIndex: zIndex + 1 }}\n />\n </div>\n )}\n </div>\n )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACCA,IAAAA,gBAA+D;;;ACA/D,mBAAiD;;;ACEjD,IAAM,YAAY,CAAC,MAAM,IAAI;AAU7B,IAAM,sBAAgD;AAAA,EACpD,IAAI;AAAA,EACJ,IAAI;AACN;AAKA,IAAM,mBAA6B;AAK5B,IAAM,eAAe;AAAA,EAC1B;AAAA,EACA;AAAA,EACA;AACF;;;AFoCI;AAvDG,IAAM,sBAAkB,6BAAoC;AAAA,EACjE,UAAU,aAAa;AAAA,EACvB,aAAa,CAAC,MAAM;AACtB,CAAC;AAEM,IAAM,cAAc,UAAM,0BAAW,eAAe;;;AGcpD,IAAM,iBAAiB,CAC5B,UACA,uBAA8D,CAAC,MAC/C;AAChB,QAAM,EAAE,UAAU,cAAc,aAAa,UAAU,IAAI;AAC3D,QAAM,EAAE,UAAU,iBAAiB,IAAI,YAAY;AACnD,QAAM,eAAe,gBAAgB;AACrC,MAAI,gBAA6B,SAAS,YAAY;AACtD,MAAI,aAAa,UAAU,YAAY,GAAG;AACxC,oBAAgB,EAAE,GAAG,eAAe,GAAG,UAAU,YAAY,EAAE;AAAA,EACjE;AACA,SAAO;AACT;;;ACzCA,kBAAiB;AA+Gb,IAAAC,sBAAA;AAzEJ,IAAM,iBAA8C;AAAA,EAClD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEA,IAAM,qBAAkD;AAAA,EACtD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,OAAO;AACT;AAEO,IAAM,aAAa;AAAA,EACxB;AAAA,EACA;AACF;AA0BA,IAAM,cAAc,CAAC;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwB;AAC3C,QAAM,eAAe;AAAA,IACnB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,EACX,EAAE,KAAK;AAEP,QAAM,mBAAmB;AAAA,IACvB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,EACX,EAAE,KAAK;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,WAAW,SAAY;AAAA,MAChC,UAAU,YAAY,YAAY;AAAA,MAClC,eAAW,YAAAC;AAAA,QACT;AAAA,UACE,gEAAgE;AAAA,UAChE,KAAC,YAAAA,SAAK,cAAc,qBAAqB,CAAC,GAAG,CAAC;AAAA,QAChD;AAAA,QACA,WAAW,eAAe,IAAI;AAAA,QAC9B;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,qBACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,YAAAA,SAAK;AAAA,cACd,CAAC,gBAAgB,GAAG,CAAC;AAAA,cACrB,CAAC,oBAAoB,GAAG;AAAA,YAC1B,CAAC;AAAA,YAEF;AAAA;AAAA,QACH;AAAA,QAEC;AAAA,QACA,WACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW,YAAAA,SAAK;AAAA,cACd,CAAC,gBAAgB,GAAG,CAAC;AAAA,cACrB,CAAC,oBAAoB,GAAG;AAAA,YAC1B,CAAC;AAAA,YAEF;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEF;AAEJ;AAkIA,IAAM,aAAa,CAAC;AAAA,EACE;AAAA,EACA,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAuB;AACzC,QAAM,eAAe;AAAA,IACnB,SAAS;AAAA,IACT,WAAW;AAAA,IACX,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,IACT,UAAU;AAAA,IACV,SAAS;AAAA,EACX,EAAE,KAAK;AAEP,SACE;AAAA,IAAC;AAAA;AAAA,MACC,SAAS,WAAW,SAAY;AAAA,MAChC,UAAU,YAAY,YAAY;AAAA,MAClC,eAAW,YAAAC;AAAA,QACT;AAAA,UACE,gEAAgE;AAAA,UAChE,KAAC,YAAAA,SAAK,cAAc,qBAAqB,CAAC,GAAG,CAAC;AAAA,QAChD;AAAA,QACA,WAAW,mBAAmB,IAAI;AAAA,QAClC;AAAA,MACF;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;;;ACrTA,IAAAC,eAAiB;;;ACJjB,IAAAC,gBAA4C;AAC5C,uBAAqB;AACrB,IAAAC,eAAiB;;;ACFjB,IAAAC,gBAAoC;AAmCpC,IAAM,4BAAgD;AAAA,EACpD,cAAc;AAAA,EACd,YAAY;AACd;AAQO,IAAM,gBAAgB,CAAC,QAAiD,WAAuC;AACpH,QAAM,EAAE,cAAc,WAAW,IAAI,EAAE,GAAG,2BAA2B,GAAG,MAAM;AAE9E,QAAM,CAAC,WAAW,YAAY,QAAI,wBAAS,KAAK;AAChD,QAAM,CAAC,OAAO,QAAQ,QAAI,wBAAyB;AAEnD,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd;AAAA,IACF;AACA,iBAAa,KAAK;AAClB,iBAAa,IAAI;AAAA,EACnB;AAEA,QAAM,eAAe,MAAM;AACzB,QAAI,YAAY;AACd;AAAA,IACF;AACA,aAAS,WAAW,MAAM;AACxB,mBAAa,KAAK;AAAA,IACpB,GAAG,YAAY,CAAC;AAAA,EAClB;AAEA,+BAAU,MAAM;AACd,QAAI,OAAO;AACT,aAAO,MAAM;AACX,qBAAa,KAAK;AAAA,MACpB;AAAA,IACF;AAAA,EACF,CAAC;AAED,+BAAU,MAAM;AACd,QAAI,OAAO;AACT,mBAAa,KAAK;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,UAAU,CAAC;AAEf,SAAO;AAAA,IACL;AAAA,IAAW;AAAA,IAAc,UAAU,EAAE,cAAc,aAAa;AAAA,EAClE;AACF;;;ACrFA,IAAAC,eAAqB;AA2Eb,IAAAC,sBAAA;AAxCD,IAAM,UAAU,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,qBAAqB;AAAA,EACrB,WAAW;AAAA,EACX,SAAS;AACX,MAAoB;AAC1C,QAAM,EAAE,WAAW,SAAS,IAAI,cAAc;AAE9C,QAAM,kBAAkB;AAAA,IACtB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,QAAM,eAAe;AACrB,QAAM,kBAAkB;AAAA,IACtB,KAAK;AAAA,IACL,QAAQ;AAAA,IACR,MAAM;AAAA,IACN,OAAO;AAAA,EACT;AAEA,QAAM,gBAAiD;AAAA,IACrD,KAAK,EAAE,aAAa,GAAG,YAAY,MAAM,YAAY,QAAQ,YAAY,KAAK;AAAA,IAC9E,QAAQ,EAAE,aAAa,KAAK,YAAY,MAAM,YAAY,MAAM,YAAY,KAAK;AAAA,IACjF,MAAM,EAAE,aAAa,GAAG,YAAY,QAAQ,YAAY,MAAM,YAAY,KAAK;AAAA,IAC/E,OAAO,EAAE,aAAa,GAAG,YAAY,MAAM,YAAY,MAAM,YAAY,OAAO;AAAA,EAClF;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW,mBAAK,yBAAyB,kBAAkB;AAAA,MAC1D,GAAG;AAAA,MAEH;AAAA;AAAA,QACA,aACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,cACT;AAAA;AAAA,cAEA,gBAAgB,QAAQ;AAAA,cAAG;AAAA,YAC7B;AAAA,YACA,OAAO,EAAE,QAAQ,gBAAgB,iBAAiB,KAAK;AAAA,YAEtD;AAAA;AAAA,cACD;AAAA,gBAAC;AAAA;AAAA,kBACC,eAAW,mBAAK,oBAAoB,gBAAgB,QAAQ,CAAC;AAAA,kBAC7D,OAAO,EAAE,GAAG,cAAc,QAAQ,GAAG,QAAQ,SAAS,EAAE;AAAA;AAAA,cAC1D;AAAA;AAAA;AAAA,QACF;AAAA;AAAA;AAAA,EAEJ;AAEJ;;;AFzFA,0BAAkB;AA2Cd,IAAAC,sBAAA;AAjBG,IAAM,UAAU,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAuC;AAE7D,QAAM,CAAC,MAAM,OAAO,QAAI,wBAAsB;AAE9C,+BAAU,MAAM;AACd,YAAQ,SAAS,IAAI;AAAA,EACvB,GAAG,CAAC,CAAC;AAEL,MAAI,CAAC,QAAQ,CAAC,OAAQ,QAAO;AAG7B,SAAO,iBAAAC,QAAS;AAAA,IACd,8CAAC,SAAI,eAAW,aAAAC,SAAK,wBAAwB,GAC3C;AAAA;AAAA,QAAC;AAAA;AAAA,UACC,eAAW,aAAAA,SAAK,+CAA+C,mBAAmB;AAAA,UAClF,SAAS;AAAA;AAAA,MACX;AAAA,MACC;AAAA,OACH;AAAA,IACA;AAAA,EACF;AACF;AAGA,IAAI,eAAiC,CAAC;AAStC,IAAM,gCAA0E;AAAA,EAC9E,IAAI;AAAA,IACF,OAAO;AAAA,EACT;AAAA,EACA,IAAI;AAAA,IACF,OAAO;AAAA,EACT;AACF;AAoBO,IAAM,gBAAgB,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AAAA,EACA,kBAAkB;AACpB,MAAuE;AACnG,QAAM,cAAc,eAAe,+BAA+B,oBAAoB;AACtF,QAAM,cAAc,CAAC,CAAC,SAAS,CAAC,CAAC,aAAa,CAAC,CAAC;AAChD,QAAM,WACJ,8CAAC,SAAI,WAAU,2CACZ;AAAA,aACC;AAAA,MAAC;AAAA;AAAA,QACC,eAAW,aAAAA,SAAK,sBAAsB;AAAA,UACpC,QAAQ,eAAe;AAAA,QACzB,CAAC;AAAA,QAEA;AAAA;AAAA,IACH;AAAA,IAED,CAAC,CAAC,WACD,6CAAC,WAAQ,SAAS,YAAY,OAC5B,uDAAC,cAAW,OAAM,WAAU,MAAK,SAAQ,SAAS,SAChD,uDAAC,yBAAE,WAAU,iBAAe,GAC9B,GACF;AAAA,KAEJ;AAGF,SACE,8CAAC,SAAI,WAAU,OACZ;AAAA,mBAAgB;AAAA,IAChB,gBAAgB,mBAAoB,6CAAC,UAAK,WAAU,yBAAyB,2BAAgB;AAAA,KAChG;AAEJ;AAaO,IAAM,QAAQ,CAAC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAqC;AACzD,QAAM,UAAM,sBAAuB,IAAI;AAEvC,+BAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AAEb,UAAM,QAAQ,IAAI;AAElB,QAAI,CAAC,OAAO;AACV,cAAQ,MAAM,8BAA8B;AAC5C;AAAA,IACF;AAEA,iBAAa,KAAK,KAAK;AAEvB,UAAM,YAAY,OAAO;AAAA,MACvB;AAAA,IACF;AACA,UAAM,QAAQ,UAAU,CAAC;AACzB,UAAM,OAAO,UAAU,UAAU,SAAS,CAAC;AAE3C,UAAM,gBAAgB,CAAC,MAAqB;AAC1C,YAAM,YAAY,aAAa,aAAa,SAAS,CAAC,MAAM;AAC5D,UAAI,CAAC,UAAW;AAEhB,UAAI,EAAE,QAAQ,UAAU;AACtB,UAAE,gBAAgB;AAClB,gBAAQ;AAAA,MACV,WAAW,EAAE,QAAQ,OAAO;AAC1B,YAAI,UAAU,WAAW,EAAG;AAE5B,YAAI,EAAE,YAAY,SAAS,kBAAkB,OAAO;AAClD,YAAE,eAAe;AACjB,UAAC,KAAqB,MAAM;AAAA,QAC9B,WAAW,CAAC,EAAE,YAAY,SAAS,kBAAkB,MAAM;AACzD,YAAE,eAAe;AACjB,UAAC,MAAsB,MAAM;AAAA,QAC/B;AAAA,MACF;AAAA,IACF;AAEA,UAAM,MAAM;AACZ,aAAS,iBAAiB,WAAW,aAAa;AAElD,WAAO,MAAM;AACX,eAAS,oBAAoB,WAAW,aAAa;AACrD,qBAAe,aAAa,OAAO,OAAK,MAAM,KAAK;AAAA,IACrD;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,mBAAmB;AAAA,MACnB;AAAA,MAEA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,UAAU;AAAA,UACV,eAAW,aAAAA;AAAA,YACT;AAAA,YACA;AAAA,UACF;AAAA,UACA,MAAK;AAAA,UACL,cAAY;AAAA,UAEZ;AAAA,yDAAC,iBAAe,GAAG,aAAa,SAAiB;AAAA,YAChD;AAAA;AAAA;AAAA,MACH;AAAA;AAAA,EACF;AAEJ;;;ADtJM,IAAAC,sBAAA;AAzDN,IAAM,kCAAkC;AAAA,EACtC,IAAI;AAAA,IACF,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AAAA,EACA,IAAI;AAAA,IACF,SAAS;AAAA,IACT,QAAQ;AAAA,IACR,SAAS;AAAA,EACX;AACF;AAwBO,IAAM,eAAe,CAAC;AAAA,EACG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0F;AACtH,QAAM,cAAc,eAAe,iCAAiC,oBAAoB;AAExF,QAAM,UAAsD;AAAA,IAC1D,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,IACV,SAAS;AAAA,EACX;AAEA,SACE,8CAAC,SAAO,GAAG,WAAW,SAAS,UAAU,eAAW,aAAAC,SAAK,mBAAmB,SAAS,GACnF;AAAA,iDAAC,SAAI,WAAU,YACZ,UACH;AAAA,IACA,8CAAC,SAAI,WAAU,gCACZ;AAAA,kBACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,mBAAmB,CAAC,EAAE,SAAS;AAAA,UACtC,SAAS;AAAA,UACT,UAAU,mBAAmB,CAAC,EAAE,YAAY;AAAA,UAE3C,6BAAmB,CAAC,EAAE,QAAQ,YAAY;AAAA;AAAA,MAC7C;AAAA,MAED,aACC;AAAA,QAAC;AAAA;AAAA,UACC,OAAO,mBAAmB,CAAC,EAAE,SAAS;AAAA,UACtC,SAAS;AAAA,UAET,UAAU,mBAAmB,CAAC,EAAE,YAAY;AAAA,UAE3C,6BAAmB,CAAC,EAAE,QAAQ,YAAY;AAAA;AAAA,MAC7C;AAAA,MAEF;AAAA,QAAC;AAAA;AAAA,UACC,WAAS;AAAA,UACT,OAAO,mBAAmB,CAAC,EAAE,SAAS,QAAQ,WAAW;AAAA,UACzD,SAAS;AAAA,UACT,UAAU,mBAAmB,CAAC,EAAE,YAAY;AAAA,UAE3C,6BAAmB,CAAC,EAAE,QAAQ,YAAY;AAAA;AAAA,MAC7C;AAAA,OACF;AAAA,KACF;AAEJ;;;AN1DI,IAAAC,sBAAA;AApCJ,IAAM,wCAAwC;AAAA,EAC5C,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AAAA,EACA,IAAI;AAAA,IACF,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA,IACP,aAAa;AAAA,EACf;AACF;AAUO,IAAM,sBAAsB,CAAC;AAAA,EACG;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAwG;AAC3I,QAAM,cAAc,eAAe,uCAAuC,oBAAoB;AAC9F,SACE;AAAA,IAAC;AAAA;AAAA,MACC,aAAa;AAAA,QACX,GAAG;AAAA,QACH,WAAW,aAAa,aAAa,YAAY;AAAA,QACjD,iBAAiB,aAAa,mBAAmB,YAAY;AAAA,MAC/D;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA,WAAW;AAAA,MACX,kBAAkB,CAAC,EAAE,MAAM,YAAY,OAAO,GAAG,EAAE,MAAM,YAAY,SAAS,GAAG,EAAE,MAAM,YAAY,KAAK,CAAC;AAAA,MAC1G,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ;","names":["import_react","import_jsx_runtime","clsx","clsx","import_clsx","import_react","import_clsx","import_react","import_clsx","import_jsx_runtime","import_jsx_runtime","ReactDOM","clsx","import_jsx_runtime","clsx","import_jsx_runtime"]}

package/dist/components/modals/DiscardChangesModal.mjs CHANGED Viewed

@@ -256,7 +256,7 @@ var Tooltip = ({
           {
             className: clsx2(
               `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
-           animate-tooltip-fade-in shadow-lg bg-tooltip-background`,
+           animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
               positionClasses[position],
               tooltipClassName
             ),
@@ -267,7 +267,7 @@ var Tooltip = ({
                 "div",
                 {
                   className: clsx2(`absolute w-0 h-0`, triangleClasses[position]),
-                  style: { ...triangleStyle[position], zIndex }
+                  style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
             ]

package/dist/components/modals/DiscardChangesModal.mjs.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/user-action/Button.tsx","../../../src/components/modals/ConfirmModal.tsx","../../../src/components/layout-and-navigation/Overlay.tsx","../../../src/hooks/useHoverState.ts","../../../src/components/user-action/Tooltip.tsx","../../../src/components/modals/DiscardChangesModal.tsx"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test \|\| language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value \|\| initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/*\n The supported languages\n /\nconst languages = ['en', 'de'] as const\n\n/\n The supported languages\n /\nexport type Language = typeof languages[number]\n\n/\n The supported languages' names in their respective language\n /\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/\n The default language\n /\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/\n A constant definition for holding data regarding languages\n /\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Language,\n translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/\n Adds the `language` prop to the component props.\n \n @param Translation the type of the translation object\n \n @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n /\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Language, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\n\n/\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n color?: SolidButtonColor,\n}\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: SolidButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n neutral: 'text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent text-button-text-primary-text',\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-text-primary-icon',\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n /\nconst IconButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n onClick,\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n","import type { PropsWithChildren } from 'react'\nimport type { SolidButtonColor } from '../user-action/Button'\nimport { SolidButton } from '../user-action/Button'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport clsx from 'clsx'\nimport type { ModalProps } from '../layout-and-navigation/Overlay'\nimport { Modal } from '../layout-and-navigation/Overlay'\n\ntype ConfirmModalTranslation = {\n confirm: string,\n cancel: string,\n decline: string,\n}\n\nexport type ConfirmModalType = 'positive' \| 'negative' \| 'neutral' \| 'primary'\n\nconst defaultConfirmDialogTranslation = {\n en: {\n confirm: 'Confirm',\n cancel: 'Cancel',\n decline: 'Decline'\n },\n de: {\n confirm: 'Bestätigen',\n cancel: 'Abbrechen',\n decline: 'Ablehnen'\n }\n}\n\ntype ButtonOverwriteType = {\n text?: string,\n color?: SolidButtonColor,\n disabled?: boolean,\n}\n\nexport type ConfirmModalProps = Omit<ModalProps, 'onClose'> & {\n isShowingDecline?: boolean,\n requireAnswer?: boolean,\n onCancel: () => void,\n onConfirm: () => void,\n onDecline?: () => void,\n confirmType?: ConfirmModalType,\n /\n Order: Cancel, Decline, Confirm\n /\n buttonOverwrites?: [ButtonOverwriteType, ButtonOverwriteType, ButtonOverwriteType],\n}\n\n/\n A Modal for asking the user for confirmation\n /\nexport const ConfirmModal = ({\n overwriteTranslation,\n children,\n onCancel,\n onConfirm,\n onDecline,\n confirmType = 'positive',\n buttonOverwrites,\n className,\n ...restProps\n }: PropsForTranslation<ConfirmModalTranslation, PropsWithChildren<ConfirmModalProps>>) => {\n const translation = useTranslation(defaultConfirmDialogTranslation, overwriteTranslation)\n\n const mapping: Record<ConfirmModalType, SolidButtonColor> = {\n neutral: 'neutral',\n negative: 'negative',\n positive: 'positive',\n primary: 'primary',\n }\n\n return (\n <Modal {...restProps} onClose={onCancel} className={clsx('justify-between', className)}>\n <div className=\"col grow\">\n {children}\n </div>\n <div className=\"row mt-3 gap-x-4 justify-end\">\n {onCancel && (\n <SolidButton\n color={buttonOverwrites?.[0].color ?? 'neutral'}\n onClick={onCancel}\n disabled={buttonOverwrites?.[0].disabled ?? false}\n >\n {buttonOverwrites?.[0].text ?? translation.cancel}\n </SolidButton>\n )}\n {onDecline && (\n <SolidButton\n color={buttonOverwrites?.[1].color ?? 'negative'}\n onClick={onDecline}\n\n disabled={buttonOverwrites?.[1].disabled ?? false}\n >\n {buttonOverwrites?.[1].text ?? translation.decline}\n </SolidButton>\n )}\n <SolidButton\n autoFocus\n color={buttonOverwrites?.[2].color ?? mapping[confirmType]}\n onClick={onConfirm}\n disabled={buttonOverwrites?.[2].disabled ?? false}\n >\n {buttonOverwrites?.[2].text ?? translation.confirm}\n </SolidButton>\n </div>\n </Modal>\n )\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport ReactDOM from 'react-dom'\nimport clsx from 'clsx'\nimport { Tooltip } from '../user-action/Tooltip'\nimport { X } from 'lucide-react'\nimport { IconButton } from '../user-action/Button'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport type { Language } from '../../localization/util'\n\nexport type OverlayProps = PropsWithChildren<{\n /\n Whether the overlay should be currently displayed\n /\n isOpen: boolean,\n /\n Callback when the background is clicked\n /\n onBackgroundClick?: () => void,\n /\n Styling for the background\n \n To remove the darkening, set bg-transparent\n /\n backgroundClassName?: string,\n}>\n\n/\n A generic overlay window which is managed by its parent\n /\nexport const Overlay = ({\n children,\n isOpen,\n onBackgroundClick,\n backgroundClassName,\n }: PropsWithChildren<OverlayProps>) => {\n // The element to which the overlay will be attached to\n const [root, setRoot] = useState<HTMLElement>()\n\n useEffect(() => {\n setRoot(document.body)\n }, [])\n\n if (!root \|\| !isOpen) return null\n\n\n return ReactDOM.createPortal(\n <div className={clsx('fixed inset-0 z-[9999]')}>\n <div\n className={clsx('fixed inset-0 h-screen w-screen bg-black/30', backgroundClassName)}\n onClick={onBackgroundClick}\n />\n {children}\n </div>,\n root\n )\n}\n\n\nlet overlayStack: HTMLDivElement[] = []\n\n\n// --- Modal ---\n\ntype ModalHeaderTranslation = {\n close: string,\n}\n\nconst defaultModalHeaderTranslation: Record<Language, ModalHeaderTranslation> = {\n en: {\n close: 'Close'\n },\n de: {\n close: 'Schließen'\n }\n}\n\nexport type OverlayHeaderProps = {\n /\n Callback when the close button is clicked. If omitted or undefined, the button is hidden\n /\n onClose?: () => void,\n /* The title of the Modal. If you want to only set the text use `titleText` instead /\n title?: ReactNode,\n /* The title text of the Modal. If you want to set a custom title use `title` instead /\n titleText?: string,\n /* The description of the Modal. If you want to only set the text use `descriptionText` instead /\n description?: ReactNode,\n /* The description text of the Modal. If you want to set a custom description use `description` instead /\n descriptionText?: string,\n}\n\n/\n A header that should be in an Overlay\n /\nexport const OverlayHeader = ({\n overwriteTranslation,\n onClose,\n title,\n titleText = '',\n description,\n descriptionText = ''\n }: PropsForTranslation<ModalHeaderTranslation, OverlayHeaderProps>) => {\n const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation)\n const hasTitleRow = !!title \|\| !!titleText \|\| !!onClose\n const titleRow = (\n <div className=\"row justify-between items-start gap-x-8\">\n {title ?? (\n <h2\n className={clsx('textstyle-title-lg', {\n 'mb-1': description \|\| descriptionText,\n })}\n >\n {titleText}\n </h2>\n )}\n {!!onClose && (\n <Tooltip tooltip={translation.close}>\n <IconButton color=\"neutral\" size=\"small\" onClick={onClose}>\n <X className=\"w-full h-full\"/>\n </IconButton>\n </Tooltip>\n )}\n </div>\n )\n\n return (\n <div className=\"col\">\n {hasTitleRow && (titleRow)}\n {description ?? (descriptionText && (<span className=\"textstyle-description\">{descriptionText}</span>))}\n </div>\n )\n}\n\nexport type ModalProps = {\n isOpen: boolean,\n onClose: () => void,\n className?: string,\n backgroundClassName?: string,\n headerProps?: Omit<OverlayHeaderProps, 'onClose'>,\n}\n\n/\n A Generic Modal Window\n /\nexport const Modal = ({\n children,\n isOpen,\n onClose,\n className,\n backgroundClassName,\n headerProps,\n }: PropsWithChildren<ModalProps>) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (!isOpen) return\n\n const modal = ref.current\n\n if (!modal) {\n console.error('modal open, but no ref found')\n return\n }\n\n overlayStack.push(modal)\n\n const focusable = modal?.querySelectorAll(\n 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n )\n const first = focusable[0]\n const last = focusable[focusable.length - 1]\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const isTopmost = overlayStack[overlayStack.length - 1] === modal\n if (!isTopmost) return\n\n if (e.key === 'Escape') {\n e.stopPropagation()\n onClose()\n } else if (e.key === 'Tab') {\n if (focusable.length === 0) return\n\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n (last as HTMLElement).focus()\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n (first as HTMLElement).focus()\n }\n }\n }\n\n modal.focus()\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n overlayStack = overlayStack.filter(m => m !== modal)\n }\n }, [isOpen, onClose])\n\n return (\n <Overlay\n isOpen={isOpen}\n onBackgroundClick={onClose}\n backgroundClassName={backgroundClassName}\n >\n <div\n ref={ref}\n tabIndex={-1}\n className={clsx(\n 'fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl',\n className\n )}\n role=\"dialog\"\n aria-modal={true}\n >\n <OverlayHeader {...headerProps} onClose={onClose}/>\n {children}\n </div>\n </Overlay>\n )\n}\n\n// --- Dialog ---\n\nexport type DialogProps = Omit<OverlayProps, 'onBackgroundClick'> & {\n headerProps?: Omit<OverlayHeaderProps, 'onClose'>,\n className?: string,\n}\n\n/\n A Generic Dialog Window\n /\nexport const Dialog = ({\n children,\n isOpen,\n className,\n backgroundClassName,\n headerProps,\n }: PropsWithChildren<DialogProps>) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (!isOpen) return\n\n const dialog = ref.current\n\n if (!dialog) {\n console.error('dialog open, but no ref found')\n return\n }\n\n overlayStack.push(dialog)\n\n const focusable = dialog?.querySelectorAll(\n 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n )\n const first = focusable[0]\n const last = focusable[focusable.length - 1]\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const isTopmost = overlayStack[overlayStack.length - 1] === dialog\n if (!isTopmost) return\n\n if (e.key === 'Escape') {\n e.stopPropagation()\n } else if (e.key === 'Tab') {\n if (focusable.length === 0) return\n\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n (last as HTMLElement).focus()\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n (first as HTMLElement).focus()\n }\n }\n }\n\n dialog.focus()\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n overlayStack = overlayStack.filter(m => m !== dialog)\n }\n }, [isOpen])\n\n return (\n <Overlay\n isOpen={isOpen}\n backgroundClassName={backgroundClassName}\n >\n <div\n ref={ref}\n tabIndex={-1}\n className={clsx(\n 'fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl',\n className\n )}\n role=\"dialog\"\n aria-modal={true}\n >\n {!!headerProps && (<OverlayHeader {...headerProps}/>)}\n {children}\n </div>\n </Overlay>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n /\n The delay after which the menu is closed in milliseconds\n \n default: 200ms\n /\n closingDelay: number,\n /\n Whether the hover state management should be disabled\n \n default: false\n /\n isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n /\n Whether the element is hovered\n /\n isHovered: boolean,\n /\n Function to change the current hover status\n /\n setIsHovered: Dispatch<SetStateAction<boolean>>,\n /\n Handlers to pass on to the component that should be hovered\n /\n handlers: {\n onMouseEnter: () => void,\n onMouseLeave: () => void,\n },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n closingDelay: 200,\n isDisabled: false,\n}\n\n/\n @param props See UseHoverStateProps\n \n A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n /\nexport const useHoverState = (props: Partial<UseHoverStateProps> \| undefined = undefined): UseHoverStateReturnType => {\n const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n const [isHovered, setIsHovered] = useState(false)\n const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n const onMouseEnter = () => {\n if (isDisabled) {\n return\n }\n clearTimeout(timer)\n setIsHovered(true)\n }\n\n const onMouseLeave = () => {\n if (isDisabled) {\n return\n }\n setTimer(setTimeout(() => {\n setIsHovered(false)\n }, closingDelay))\n }\n\n useEffect(() => {\n if (timer) {\n return () => {\n clearTimeout(timer)\n }\n }\n })\n\n useEffect(() => {\n if (timer) {\n clearTimeout(timer)\n }\n }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return {\n isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n }\n}\n","import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'\nimport { useHoverState } from '../../hooks/useHoverState'\nimport { clsx } from 'clsx'\n\ntype Position = 'top' \| 'bottom' \| 'left' \| 'right'\n\nexport type TooltipProps = PropsWithChildren<{\n tooltip: string \| ReactNode,\n /\n Number of milliseconds until the tooltip appears\n \n defaults to 1000ms\n /\n animationDelay?: number,\n /\n Class names of additional styling properties for the tooltip\n /\n tooltipClassName?: string,\n /\n Class names of additional styling properties for the container from which the tooltip will be created\n /\n containerClassName?: string,\n position?: Position,\n zIndex?: number,\n}>\n\n/\n A Component for showing a tooltip when hovering over Content\n * @param tooltip The tooltip to show can be a text or any ReactNode\n * @param children The Content for which the tooltip should be created\n * @param animationDelay The delay before the tooltip appears\n * @param tooltipClassName Additional ClassNames for the Container of the tooltip\n * @param containerClassName Additional ClassNames for the Container holding the content\n * @param position The direction of the tooltip relative to the Container\n * @param zIndex The z Index of the tooltip (you may require this when stacking modal)\n * @constructor\n */\nexport const Tooltip = ({\n tooltip,\n children,\n animationDelay = 650,\n tooltipClassName = '',\n containerClassName = '',\n position = 'bottom',\n zIndex = 10,\n }: TooltipProps) => {\n const { isHovered, handlers } = useHoverState()\n\n const positionClasses = {\n top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,\n bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,\n left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,\n right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`\n }\n\n const triangleSize = 6\n const triangleClasses = {\n top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,\n bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,\n left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,\n right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`\n }\n\n const triangleStyle: Record<Position, CSSProperties> = {\n top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },\n bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },\n left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },\n right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }\n }\n\n return (\n <div\n className={clsx('relative inline-block', containerClassName)}\n {...handlers}\n >\n {children}\n {isHovered && (\n <div\n className={clsx(\n `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap\n animate-tooltip-fade-in shadow-lg bg-tooltip-background`,\n positionClasses[position], tooltipClassName\n )}\n style={{ zIndex, animationDelay: animationDelay + 'ms' }}\n >\n {tooltip}\n <div\n className={clsx(`absolute w-0 h-0`, triangleClasses[position])}\n style={{ ...triangleStyle[position], zIndex }}\n />\n </div>\n )}\n </div>\n )\n}\n","import type { PropsWithChildren } from 'react'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport type { ConfirmModalProps } from './ConfirmModal'\nimport { ConfirmModal } from './ConfirmModal'\n\ntype DiscardChangesModalTranslation = {\n save: string,\n cancel: string,\n dontSave: string,\n title: string,\n description: string,\n}\n\nconst defaultDiscardChangesModalTranslation = {\n en: {\n save: 'Save',\n cancel: 'Cancel',\n dontSave: 'Don\\'t save',\n title: 'Unsaved Changes',\n description: 'Do you want to save your changes?'\n },\n de: {\n save: 'Speichern',\n cancel: 'Abbrechen',\n dontSave: 'Nicht Speichern',\n title: 'Ungespeicherte Änderungen',\n description: 'Möchtest du die Änderungen speichern?'\n }\n}\n\ntype DiscardChangesModalProps = Omit<ConfirmModalProps, 'onDecline' \| 'onConfirm' \| 'buttonOverwrites'> & {\n isShowingDecline?: boolean,\n requireAnswer?: boolean,\n onCancel: () => void,\n onSave: () => void,\n onDontSave: () => void,\n}\n\nexport const DiscardChangesModal = ({\n overwriteTranslation,\n children,\n onCancel,\n onSave,\n onDontSave,\n headerProps,\n ...modalProps\n }: PropsForTranslation<DiscardChangesModalTranslation, PropsWithChildren<DiscardChangesModalProps>>) => {\n const translation = useTranslation(defaultDiscardChangesModalTranslation, overwriteTranslation)\n return (\n <ConfirmModal\n headerProps={{\n ...headerProps,\n titleText: headerProps?.titleText ?? translation.title,\n descriptionText: headerProps?.descriptionText ?? translation.description,\n }}\n onConfirm={onSave}\n onCancel={onCancel}\n onDecline={onDontSave}\n buttonOverwrites={[{ text: translation.cancel }, { text: translation.dontSave }, { text: translation.save }]}\n {...modalProps}\n >\n {children}\n </ConfirmModal>\n )\n}\n"],"mappings":"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","names":["useEffect","useState","jsx","jsx","jsx","clsx","useEffect","useState","clsx","useEffect","useState","clsx","jsx","jsxs","jsx","jsxs","useState","useEffect","clsx","jsx","jsxs","clsx","jsx"]}
1	+ {"version":3,"sources":["../../../src/localization/LanguageProvider.tsx","../../../src/hooks/useLocalStorage.ts","../../../src/localization/util.ts","../../../src/localization/useTranslation.ts","../../../src/components/user-action/Button.tsx","../../../src/components/modals/ConfirmModal.tsx","../../../src/components/layout-and-navigation/Overlay.tsx","../../../src/hooks/useHoverState.ts","../../../src/components/user-action/Tooltip.tsx","../../../src/components/modals/DiscardChangesModal.tsx"],"sourcesContent":["import type { Dispatch, PropsWithChildren, SetStateAction } from 'react'\nimport { createContext, useContext, useEffect, useState } from 'react'\nimport { useLocalStorage } from '../hooks/useLocalStorage'\nimport type { Language } from './util'\nimport { LanguageUtil } from './util'\n\nexport type LanguageContextValue = {\n language: Language,\n setLanguage: Dispatch<SetStateAction<Language>>,\n}\n\nexport const LanguageContext = createContext<LanguageContextValue>({\n language: LanguageUtil.DEFAULT_LANGUAGE,\n setLanguage: (v) => v\n})\n\nexport const useLanguage = () => useContext(LanguageContext)\n\nexport const useLocale = (overWriteLanguage?: Language) => {\n const { language } = useLanguage()\n const mapping: Record<Language, string> = {\n en: 'en-US',\n de: 'de-DE'\n }\n return mapping[overWriteLanguage ?? language]\n}\n\ntype LanguageProviderProps = {\n initialLanguage?: Language,\n}\n\nexport const LanguageProvider = ({ initialLanguage, children }: PropsWithChildren<LanguageProviderProps>) => {\n const [language, setLanguage] = useState<Language>(initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n const [storedLanguage, setStoredLanguage] = useLocalStorage<Language>('language', initialLanguage ?? LanguageUtil.DEFAULT_LANGUAGE)\n\n useEffect(() => {\n if (language !== initialLanguage && initialLanguage) {\n console.warn('LanguageProvider initial state changed: Prefer using languageProvider\\'s setLanguage instead')\n setLanguage(initialLanguage)\n }\n }, [initialLanguage]) // eslint-disable-line react-hooks/exhaustive-deps\n\n useEffect(() => {\n // TODO set locale of html tag here as well\n setStoredLanguage(language)\n }, [language, setStoredLanguage])\n\n useEffect(() => {\n if (storedLanguage !== null) {\n setLanguage(storedLanguage)\n return\n }\n\n const LanguageToTestAgainst = Object.values(LanguageUtil.languages)\n\n const matchingBrowserLanguage = window.navigator.languages\n .map(language => LanguageToTestAgainst.find((test) => language === test \|\| language.split('-')[0] === test))\n .filter(entry => entry !== undefined)\n\n if (matchingBrowserLanguage.length === 0) return\n\n const firstMatch = matchingBrowserLanguage[0] as Language\n setLanguage(firstMatch)\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return (\n <LanguageContext.Provider value={{\n language,\n setLanguage\n }}>\n {children}\n </LanguageContext.Provider>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useCallback, useEffect, useState } from 'react'\nimport { LocalStorageService } from '../util/storage'\n\ntype SetValue<T> = Dispatch<SetStateAction<T>>\nexport const useLocalStorage = <T>(key: string, initValue: T): [T, SetValue<T>] => {\n const get = useCallback((): T => {\n if (typeof window === 'undefined') {\n return initValue\n }\n const storageService = new LocalStorageService()\n const value = storageService.get<T>(key)\n return value \|\| initValue\n }, [initValue, key])\n\n const [storedValue, setStoredValue] = useState<T>(get)\n\n const setValue: SetValue<T> = useCallback(value => {\n const newValue = value instanceof Function ? value(storedValue) : value\n const storageService = new LocalStorageService()\n storageService.set(key, value)\n\n setStoredValue(newValue)\n }, [storedValue, setStoredValue, key])\n\n useEffect(() => {\n setStoredValue(get())\n }, []) // eslint-disable-line react-hooks/exhaustive-deps\n\n return [storedValue, setValue]\n}","/*\n The supported languages\n /\nconst languages = ['en', 'de'] as const\n\n/\n The supported languages\n /\nexport type Language = typeof languages[number]\n\n/\n The supported languages' names in their respective language\n /\nconst languagesLocalNames: Record<Language, string> = {\n en: 'English',\n de: 'Deutsch',\n}\n\n/\n The default language\n /\nconst DEFAULT_LANGUAGE: Language = 'en'\n\n/\n A constant definition for holding data regarding languages\n /\nexport const LanguageUtil = {\n languages,\n DEFAULT_LANGUAGE,\n languagesLocalNames,\n}","import { useLanguage } from './LanguageProvider'\nimport type { Language } from './util'\n\nexport type Translation<T> = Record<Language, T>\n\ntype OverwriteTranslationType<Translation extends Record<string, unknown>> = {\n language?: Language,\n translation?: Partial<Record<Language, Partial<Translation>>>,\n}\n\n/\n Adds the `language` prop to the component props.\n \n @param Translation the type of the translation object\n \n @param Props the type of the component props, defaults to `Record<string, never>`,\n * if you don't expect any other props other than `language` and get an\n * error when using your component (because it uses `forwardRef` etc.)\n * you can try out `Record<string, unknown>`, this might resolve your\n * problem as `SomeType & never` is still `never` but `SomeType & unknown`\n * is `SomeType` which means that adding back props (like `ref` etc.)\n * works properly\n /\nexport type PropsForTranslation<\n Translation extends Record<string, unknown>,\n Props = Record<string, never>\n> = Props & {\n overwriteTranslation?: OverwriteTranslationType<Translation>,\n};\n\nexport const useTranslation = <Translation extends Record<string, unknown>>(\n defaults: Record<Language, Translation>,\n translationOverwrite: OverwriteTranslationType<Translation> = {}\n): Translation => {\n const { language: languageProp, translation: overwrite } = translationOverwrite\n const { language: inferredLanguage } = useLanguage()\n const usedLanguage = languageProp ?? inferredLanguage\n let defaultValues: Translation = defaults[usedLanguage]\n if (overwrite && overwrite[usedLanguage]) {\n defaultValues = { ...defaultValues, ...overwrite[usedLanguage] }\n }\n return defaultValues\n}\n","import type { ButtonHTMLAttributes, PropsWithChildren, ReactNode } from 'react'\nimport clsx from 'clsx'\n\n\nexport const ButtonColorUtil = {\n solid: ['primary', 'secondary', 'tertiary', 'positive', 'warning', 'negative', 'neutral'] as const,\n text: ['primary', 'negative', 'neutral'] as const,\n outline: ['primary'] as const,\n}\n\n\n/\n The allowed colors for the SolidButton and IconButton\n /\nexport type SolidButtonColor = typeof ButtonColorUtil.solid[number]\n/\n The allowed colors for the OutlineButton\n /\nexport type OutlineButtonColor = typeof ButtonColorUtil.outline[number]\n/\n The allowed colors for the TextButton\n /\nexport type TextButtonColor = typeof ButtonColorUtil.text[number]\n\n/\n The different sizes for a button\n /\ntype ButtonSizes = 'small' \| 'medium' \| 'large'\n\n/\n The shard properties between all button types\n /\nexport type ButtonProps = PropsWithChildren<{\n /\n @default 'medium'\n /\n size?: ButtonSizes,\n}> & ButtonHTMLAttributes<Element>\n\nconst paddingMapping: Record<ButtonSizes, string> = {\n small: 'btn-sm',\n medium: 'btn-md',\n large: 'btn-lg'\n}\n\nconst iconPaddingMapping: Record<ButtonSizes, string> = {\n small: 'icon-btn-sm',\n medium: 'icon-btn-md',\n large: 'icon-btn-lg'\n}\n\nexport const ButtonUtil = {\n paddingMapping,\n iconPaddingMapping\n}\n\ntype ButtonWithIconsProps = ButtonProps & {\n startIcon?: ReactNode,\n endIcon?: ReactNode,\n}\n\nexport type SolidButtonProps = ButtonWithIconsProps & {\n color?: SolidButtonColor,\n}\n\nexport type OutlineButtonProps = ButtonWithIconsProps & {\n color?: OutlineButtonColor,\n}\n\nexport type TextButtonProps = ButtonWithIconsProps & {\n color?: TextButtonColor,\n}\n\nexport type IconButtonProps = ButtonProps & {\n color?: SolidButtonColor,\n}\n\n/\n A button with a solid background and different sizes\n /\nconst SolidButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: SolidButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-solid-primary-icon',\n secondary: 'text-button-solid-secondary-icon',\n tertiary: 'text-button-solid-tertiary-icon',\n positive: 'text-button-solid-positive-icon',\n warning: 'text-button-solid-warning-icon',\n negative: 'text-button-solid-negative-icon',\n neutral: 'text-button-solid-neutral-icon',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A button with an outline border and different sizes\n /\nconst OutlineButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: OutlineButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent border-2 border-button-outline-primary-text text-button-outline-primary-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-outline-primary-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text border-disabled-outline cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-80')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n/\n A text that is a button that can have different sizes\n /\nconst TextButton = ({\n children,\n disabled = false,\n color = 'neutral',\n size = 'medium',\n startIcon,\n endIcon,\n onClick,\n className,\n ...restProps\n }: TextButtonProps) => {\n const colorClasses = {\n primary: 'bg-transparent text-button-text-primary-text',\n negative: 'bg-transparent text-button-text-negative-text',\n neutral: 'bg-transparent text-button-text-neutral-text',\n }[color]\n\n const iconColorClasses = {\n primary: 'text-button-text-primary-icon',\n negative: 'text-button-text-negative-icon',\n neutral: 'text-button-text-neutral-icon',\n }[color]\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:bg-button-text-hover-background rounded-full')]: !disabled,\n },\n ButtonUtil.paddingMapping[size],\n className\n )}\n {...restProps}\n >\n {startIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {startIcon}\n </span>\n )}\n {children}\n {endIcon && (\n <span\n className={clsx({\n [iconColorClasses]: !disabled,\n [`text-disabled-icon`]: disabled\n })}\n >\n {endIcon}\n </span>\n )}\n </button>\n )\n}\n\n\n/\n A button for icons with a solid background and different sizes\n /\nconst IconButton = ({\n children,\n disabled = false,\n color = 'primary',\n size = 'medium',\n onClick,\n className,\n ...restProps\n }: IconButtonProps) => {\n const colorClasses = {\n primary: 'bg-button-solid-primary-background text-button-solid-primary-text',\n secondary: 'bg-button-solid-secondary-background text-button-solid-secondary-text',\n tertiary: 'bg-button-solid-tertiary-background text-button-solid-tertiary-text',\n positive: 'bg-button-solid-positive-background text-button-solid-positive-text',\n warning: 'bg-button-solid-warning-background text-button-solid-warning-text',\n negative: 'bg-button-solid-negative-background text-button-solid-negative-text',\n neutral: 'bg-button-solid-neutral-background text-button-solid-neutral-text',\n }[color]\n\n return (\n <button\n onClick={disabled ? undefined : onClick}\n disabled={disabled \|\| onClick === undefined}\n className={clsx(\n {\n 'text-disabled-text bg-disabled-background cursor-not-allowed': disabled,\n [clsx(colorClasses, 'hover:brightness-90')]: !disabled\n },\n ButtonUtil.iconPaddingMapping[size],\n className\n )}\n {...restProps}\n >\n {children}\n </button>\n )\n}\n\nexport { SolidButton, OutlineButton, TextButton, IconButton }\n","import type { PropsWithChildren } from 'react'\nimport type { SolidButtonColor } from '../user-action/Button'\nimport { SolidButton } from '../user-action/Button'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport clsx from 'clsx'\nimport type { ModalProps } from '../layout-and-navigation/Overlay'\nimport { Modal } from '../layout-and-navigation/Overlay'\n\ntype ConfirmModalTranslation = {\n confirm: string,\n cancel: string,\n decline: string,\n}\n\nexport type ConfirmModalType = 'positive' \| 'negative' \| 'neutral' \| 'primary'\n\nconst defaultConfirmDialogTranslation = {\n en: {\n confirm: 'Confirm',\n cancel: 'Cancel',\n decline: 'Decline'\n },\n de: {\n confirm: 'Bestätigen',\n cancel: 'Abbrechen',\n decline: 'Ablehnen'\n }\n}\n\ntype ButtonOverwriteType = {\n text?: string,\n color?: SolidButtonColor,\n disabled?: boolean,\n}\n\nexport type ConfirmModalProps = Omit<ModalProps, 'onClose'> & {\n isShowingDecline?: boolean,\n requireAnswer?: boolean,\n onCancel: () => void,\n onConfirm: () => void,\n onDecline?: () => void,\n confirmType?: ConfirmModalType,\n /\n Order: Cancel, Decline, Confirm\n /\n buttonOverwrites?: [ButtonOverwriteType, ButtonOverwriteType, ButtonOverwriteType],\n}\n\n/\n A Modal for asking the user for confirmation\n /\nexport const ConfirmModal = ({\n overwriteTranslation,\n children,\n onCancel,\n onConfirm,\n onDecline,\n confirmType = 'positive',\n buttonOverwrites,\n className,\n ...restProps\n }: PropsForTranslation<ConfirmModalTranslation, PropsWithChildren<ConfirmModalProps>>) => {\n const translation = useTranslation(defaultConfirmDialogTranslation, overwriteTranslation)\n\n const mapping: Record<ConfirmModalType, SolidButtonColor> = {\n neutral: 'neutral',\n negative: 'negative',\n positive: 'positive',\n primary: 'primary',\n }\n\n return (\n <Modal {...restProps} onClose={onCancel} className={clsx('justify-between', className)}>\n <div className=\"col grow\">\n {children}\n </div>\n <div className=\"row mt-3 gap-x-4 justify-end\">\n {onCancel && (\n <SolidButton\n color={buttonOverwrites?.[0].color ?? 'neutral'}\n onClick={onCancel}\n disabled={buttonOverwrites?.[0].disabled ?? false}\n >\n {buttonOverwrites?.[0].text ?? translation.cancel}\n </SolidButton>\n )}\n {onDecline && (\n <SolidButton\n color={buttonOverwrites?.[1].color ?? 'negative'}\n onClick={onDecline}\n\n disabled={buttonOverwrites?.[1].disabled ?? false}\n >\n {buttonOverwrites?.[1].text ?? translation.decline}\n </SolidButton>\n )}\n <SolidButton\n autoFocus\n color={buttonOverwrites?.[2].color ?? mapping[confirmType]}\n onClick={onConfirm}\n disabled={buttonOverwrites?.[2].disabled ?? false}\n >\n {buttonOverwrites?.[2].text ?? translation.confirm}\n </SolidButton>\n </div>\n </Modal>\n )\n}\n","import type { PropsWithChildren, ReactNode } from 'react'\nimport { useEffect, useRef, useState } from 'react'\nimport ReactDOM from 'react-dom'\nimport clsx from 'clsx'\nimport { Tooltip } from '../user-action/Tooltip'\nimport { X } from 'lucide-react'\nimport { IconButton } from '../user-action/Button'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport type { Language } from '../../localization/util'\n\nexport type OverlayProps = PropsWithChildren<{\n /\n Whether the overlay should be currently displayed\n /\n isOpen: boolean,\n /\n Callback when the background is clicked\n /\n onBackgroundClick?: () => void,\n /\n Styling for the background\n \n To remove the darkening, set bg-transparent\n /\n backgroundClassName?: string,\n}>\n\n/\n A generic overlay window which is managed by its parent\n /\nexport const Overlay = ({\n children,\n isOpen,\n onBackgroundClick,\n backgroundClassName,\n }: PropsWithChildren<OverlayProps>) => {\n // The element to which the overlay will be attached to\n const [root, setRoot] = useState<HTMLElement>()\n\n useEffect(() => {\n setRoot(document.body)\n }, [])\n\n if (!root \|\| !isOpen) return null\n\n\n return ReactDOM.createPortal(\n <div className={clsx('fixed inset-0 z-[9999]')}>\n <div\n className={clsx('fixed inset-0 h-screen w-screen bg-black/30', backgroundClassName)}\n onClick={onBackgroundClick}\n />\n {children}\n </div>,\n root\n )\n}\n\n\nlet overlayStack: HTMLDivElement[] = []\n\n\n// --- Modal ---\n\ntype ModalHeaderTranslation = {\n close: string,\n}\n\nconst defaultModalHeaderTranslation: Record<Language, ModalHeaderTranslation> = {\n en: {\n close: 'Close'\n },\n de: {\n close: 'Schließen'\n }\n}\n\nexport type OverlayHeaderProps = {\n /\n Callback when the close button is clicked. If omitted or undefined, the button is hidden\n /\n onClose?: () => void,\n /* The title of the Modal. If you want to only set the text use `titleText` instead /\n title?: ReactNode,\n /* The title text of the Modal. If you want to set a custom title use `title` instead /\n titleText?: string,\n /* The description of the Modal. If you want to only set the text use `descriptionText` instead /\n description?: ReactNode,\n /* The description text of the Modal. If you want to set a custom description use `description` instead /\n descriptionText?: string,\n}\n\n/\n A header that should be in an Overlay\n /\nexport const OverlayHeader = ({\n overwriteTranslation,\n onClose,\n title,\n titleText = '',\n description,\n descriptionText = ''\n }: PropsForTranslation<ModalHeaderTranslation, OverlayHeaderProps>) => {\n const translation = useTranslation(defaultModalHeaderTranslation, overwriteTranslation)\n const hasTitleRow = !!title \|\| !!titleText \|\| !!onClose\n const titleRow = (\n <div className=\"row justify-between items-start gap-x-8\">\n {title ?? (\n <h2\n className={clsx('textstyle-title-lg', {\n 'mb-1': description \|\| descriptionText,\n })}\n >\n {titleText}\n </h2>\n )}\n {!!onClose && (\n <Tooltip tooltip={translation.close}>\n <IconButton color=\"neutral\" size=\"small\" onClick={onClose}>\n <X className=\"w-full h-full\"/>\n </IconButton>\n </Tooltip>\n )}\n </div>\n )\n\n return (\n <div className=\"col\">\n {hasTitleRow && (titleRow)}\n {description ?? (descriptionText && (<span className=\"textstyle-description\">{descriptionText}</span>))}\n </div>\n )\n}\n\nexport type ModalProps = {\n isOpen: boolean,\n onClose: () => void,\n className?: string,\n backgroundClassName?: string,\n headerProps?: Omit<OverlayHeaderProps, 'onClose'>,\n}\n\n/\n A Generic Modal Window\n /\nexport const Modal = ({\n children,\n isOpen,\n onClose,\n className,\n backgroundClassName,\n headerProps,\n }: PropsWithChildren<ModalProps>) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (!isOpen) return\n\n const modal = ref.current\n\n if (!modal) {\n console.error('modal open, but no ref found')\n return\n }\n\n overlayStack.push(modal)\n\n const focusable = modal?.querySelectorAll(\n 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n )\n const first = focusable[0]\n const last = focusable[focusable.length - 1]\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const isTopmost = overlayStack[overlayStack.length - 1] === modal\n if (!isTopmost) return\n\n if (e.key === 'Escape') {\n e.stopPropagation()\n onClose()\n } else if (e.key === 'Tab') {\n if (focusable.length === 0) return\n\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n (last as HTMLElement).focus()\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n (first as HTMLElement).focus()\n }\n }\n }\n\n modal.focus()\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n overlayStack = overlayStack.filter(m => m !== modal)\n }\n }, [isOpen, onClose])\n\n return (\n <Overlay\n isOpen={isOpen}\n onBackgroundClick={onClose}\n backgroundClassName={backgroundClassName}\n >\n <div\n ref={ref}\n tabIndex={-1}\n className={clsx(\n 'fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl',\n className\n )}\n role=\"dialog\"\n aria-modal={true}\n >\n <OverlayHeader {...headerProps} onClose={onClose}/>\n {children}\n </div>\n </Overlay>\n )\n}\n\n// --- Dialog ---\n\nexport type DialogProps = Omit<OverlayProps, 'onBackgroundClick'> & {\n headerProps?: Omit<OverlayHeaderProps, 'onClose'>,\n className?: string,\n}\n\n/\n A Generic Dialog Window\n /\nexport const Dialog = ({\n children,\n isOpen,\n className,\n backgroundClassName,\n headerProps,\n }: PropsWithChildren<DialogProps>) => {\n const ref = useRef<HTMLDivElement>(null)\n\n useEffect(() => {\n if (!isOpen) return\n\n const dialog = ref.current\n\n if (!dialog) {\n console.error('dialog open, but no ref found')\n return\n }\n\n overlayStack.push(dialog)\n\n const focusable = dialog?.querySelectorAll(\n 'a[href], button:not([disabled]), textarea, input, select, [tabindex]:not([tabindex=\"-1\"])'\n )\n const first = focusable[0]\n const last = focusable[focusable.length - 1]\n\n const handleKeyDown = (e: KeyboardEvent) => {\n const isTopmost = overlayStack[overlayStack.length - 1] === dialog\n if (!isTopmost) return\n\n if (e.key === 'Escape') {\n e.stopPropagation()\n } else if (e.key === 'Tab') {\n if (focusable.length === 0) return\n\n if (e.shiftKey && document.activeElement === first) {\n e.preventDefault();\n (last as HTMLElement).focus()\n } else if (!e.shiftKey && document.activeElement === last) {\n e.preventDefault();\n (first as HTMLElement).focus()\n }\n }\n }\n\n dialog.focus()\n document.addEventListener('keydown', handleKeyDown)\n\n return () => {\n document.removeEventListener('keydown', handleKeyDown)\n overlayStack = overlayStack.filter(m => m !== dialog)\n }\n }, [isOpen])\n\n return (\n <Overlay\n isOpen={isOpen}\n backgroundClassName={backgroundClassName}\n >\n <div\n ref={ref}\n tabIndex={-1}\n className={clsx(\n 'fixed left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 col p-4 bg-overlay-background text-overlay-text rounded-xl shadow-xl',\n className\n )}\n role=\"dialog\"\n aria-modal={true}\n >\n {!!headerProps && (<OverlayHeader {...headerProps}/>)}\n {children}\n </div>\n </Overlay>\n )\n}","import type { Dispatch, SetStateAction } from 'react'\nimport { useEffect, useState } from 'react'\n\ntype UseHoverStateProps = {\n /\n The delay after which the menu is closed in milliseconds\n \n default: 200ms\n /\n closingDelay: number,\n /\n Whether the hover state management should be disabled\n \n default: false\n /\n isDisabled: boolean,\n}\n\ntype UseHoverStateReturnType = {\n /\n Whether the element is hovered\n /\n isHovered: boolean,\n /\n Function to change the current hover status\n /\n setIsHovered: Dispatch<SetStateAction<boolean>>,\n /\n Handlers to pass on to the component that should be hovered\n /\n handlers: {\n onMouseEnter: () => void,\n onMouseLeave: () => void,\n },\n}\n\nconst defaultUseHoverStateProps: UseHoverStateProps = {\n closingDelay: 200,\n isDisabled: false,\n}\n\n/\n @param props See UseHoverStateProps\n \n A react hook for managing the hover state of a component. The handlers provided should be\n * forwarded to the component which should be hovered over\n /\nexport const useHoverState = (props: Partial<UseHoverStateProps> \| undefined = undefined): UseHoverStateReturnType => {\n const { closingDelay, isDisabled } = { ...defaultUseHoverStateProps, ...props }\n\n const [isHovered, setIsHovered] = useState(false)\n const [timer, setTimer] = useState<NodeJS.Timeout>()\n\n const onMouseEnter = () => {\n if (isDisabled) {\n return\n }\n clearTimeout(timer)\n setIsHovered(true)\n }\n\n const onMouseLeave = () => {\n if (isDisabled) {\n return\n }\n setTimer(setTimeout(() => {\n setIsHovered(false)\n }, closingDelay))\n }\n\n useEffect(() => {\n if (timer) {\n return () => {\n clearTimeout(timer)\n }\n }\n })\n\n useEffect(() => {\n if (timer) {\n clearTimeout(timer)\n }\n }, [isDisabled]) // eslint-disable-line react-hooks/exhaustive-deps\n\n return {\n isHovered, setIsHovered, handlers: { onMouseEnter, onMouseLeave }\n }\n}\n","import type { CSSProperties, PropsWithChildren, ReactNode } from 'react'\nimport { useHoverState } from '../../hooks/useHoverState'\nimport { clsx } from 'clsx'\n\ntype Position = 'top' \| 'bottom' \| 'left' \| 'right'\n\nexport type TooltipProps = PropsWithChildren<{\n tooltip: string \| ReactNode,\n /\n Number of milliseconds until the tooltip appears\n \n defaults to 1000ms\n /\n animationDelay?: number,\n /\n Class names of additional styling properties for the tooltip\n /\n tooltipClassName?: string,\n /\n Class names of additional styling properties for the container from which the tooltip will be created\n /\n containerClassName?: string,\n position?: Position,\n zIndex?: number,\n}>\n\n/\n A Component for showing a tooltip when hovering over Content\n * @param tooltip The tooltip to show can be a text or any ReactNode\n * @param children The Content for which the tooltip should be created\n * @param animationDelay The delay before the tooltip appears\n * @param tooltipClassName Additional ClassNames for the Container of the tooltip\n * @param containerClassName Additional ClassNames for the Container holding the content\n * @param position The direction of the tooltip relative to the Container\n * @param zIndex The z Index of the tooltip (you may require this when stacking modal)\n * @constructor\n */\nexport const Tooltip = ({\n tooltip,\n children,\n animationDelay = 650,\n tooltipClassName = '',\n containerClassName = '',\n position = 'bottom',\n zIndex = 10,\n }: TooltipProps) => {\n const { isHovered, handlers } = useHoverState()\n\n const positionClasses = {\n top: `bottom-full left-1/2 -translate-x-1/2 mb-[6px]`,\n bottom: `top-full left-1/2 -translate-x-1/2 mt-[6px]`,\n left: `right-full top-1/2 -translate-y-1/2 mr-[6px]`,\n right: `left-full top-1/2 -translate-y-1/2 ml-[6px]`\n }\n\n const triangleSize = 6\n const triangleClasses = {\n top: `top-full left-1/2 -translate-x-1/2 border-t-tooltip-background border-l-transparent border-r-transparent`,\n bottom: `bottom-full left-1/2 -translate-x-1/2 border-b-tooltip-background border-l-transparent border-r-transparent`,\n left: `left-full top-1/2 -translate-y-1/2 border-l-tooltip-background border-t-transparent border-b-transparent`,\n right: `right-full top-1/2 -translate-y-1/2 border-r-tooltip-background border-t-transparent border-b-transparent`\n }\n\n const triangleStyle: Record<Position, CSSProperties> = {\n top: { borderWidth: `${triangleSize}px ${triangleSize}px 0 ${triangleSize}px` },\n bottom: { borderWidth: `0 ${triangleSize}px ${triangleSize}px ${triangleSize}px` },\n left: { borderWidth: `${triangleSize}px 0 ${triangleSize}px ${triangleSize}px` },\n right: { borderWidth: `${triangleSize}px ${triangleSize}px ${triangleSize}px 0` }\n }\n\n return (\n <div\n className={clsx('relative inline-block', containerClassName)}\n {...handlers}\n >\n {children}\n {isHovered && (\n <div\n className={clsx(\n `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap\n animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,\n positionClasses[position], tooltipClassName\n )}\n style={{ zIndex, animationDelay: animationDelay + 'ms' }}\n >\n {tooltip}\n <div\n className={clsx(`absolute w-0 h-0`, triangleClasses[position])}\n style={{ ...triangleStyle[position], zIndex: zIndex + 1 }}\n />\n </div>\n )}\n </div>\n )\n}\n","import type { PropsWithChildren } from 'react'\nimport type { PropsForTranslation } from '../../localization/useTranslation'\nimport { useTranslation } from '../../localization/useTranslation'\nimport type { ConfirmModalProps } from './ConfirmModal'\nimport { ConfirmModal } from './ConfirmModal'\n\ntype DiscardChangesModalTranslation = {\n save: string,\n cancel: string,\n dontSave: string,\n title: string,\n description: string,\n}\n\nconst defaultDiscardChangesModalTranslation = {\n en: {\n save: 'Save',\n cancel: 'Cancel',\n dontSave: 'Don\\'t save',\n title: 'Unsaved Changes',\n description: 'Do you want to save your changes?'\n },\n de: {\n save: 'Speichern',\n cancel: 'Abbrechen',\n dontSave: 'Nicht Speichern',\n title: 'Ungespeicherte Änderungen',\n description: 'Möchtest du die Änderungen speichern?'\n }\n}\n\ntype DiscardChangesModalProps = Omit<ConfirmModalProps, 'onDecline' \| 'onConfirm' \| 'buttonOverwrites'> & {\n isShowingDecline?: boolean,\n requireAnswer?: boolean,\n onCancel: () => void,\n onSave: () => void,\n onDontSave: () => void,\n}\n\nexport const DiscardChangesModal = ({\n overwriteTranslation,\n children,\n onCancel,\n onSave,\n onDontSave,\n headerProps,\n ...modalProps\n }: PropsForTranslation<DiscardChangesModalTranslation, PropsWithChildren<DiscardChangesModalProps>>) => {\n const translation = useTranslation(defaultDiscardChangesModalTranslation, overwriteTranslation)\n return (\n <ConfirmModal\n headerProps={{\n ...headerProps,\n titleText: headerProps?.titleText ?? translation.title,\n descriptionText: headerProps?.descriptionText ?? translation.description,\n }}\n onConfirm={onSave}\n onCancel={onCancel}\n onDecline={onDontSave}\n buttonOverwrites={[{ text: translation.cancel }, { text: translation.dontSave }, { text: translation.save }]}\n {...modalProps}\n >\n {children}\n </ConfirmModal>\n )\n}\n"],"mappings":"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","names":["useEffect","useState","jsx","jsx","jsx","clsx","useEffect","useState","clsx","useEffect","useState","clsx","jsx","jsxs","jsx","jsxs","useState","useEffect","clsx","jsx","jsxs","clsx","jsx"]}

package/dist/components/modals/InputModal.js CHANGED Viewed

@@ -454,7 +454,7 @@ var Tooltip = ({
           {
             className: (0, import_clsx4.clsx)(
               `opacity-0 absolute text-xs font-semibold text-tooltip-text px-2 py-1 rounded whitespace-nowrap
-           animate-tooltip-fade-in shadow-lg bg-tooltip-background`,
+           animate-tooltip-fade-in shadow-around-md bg-tooltip-background`,
               positionClasses[position],
               tooltipClassName
             ),
@@ -465,7 +465,7 @@ var Tooltip = ({
                 "div",
                 {
                   className: (0, import_clsx4.clsx)(`absolute w-0 h-0`, triangleClasses[position]),
-                  style: { ...triangleStyle[position], zIndex }
+                  style: { ...triangleStyle[position], zIndex: zIndex + 1 }
                 }
               )
             ]