@matrix-widget-toolkit/mui 1.0.1

package/build/cjs/index.js

@@ -0,0 +1,951 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@matrix-widget-toolkit/react');
+var material = require('@mui/material');
+var utils = require('@mui/utils');
+var reactI18next = require('react-i18next');
+var reactUse = require('react-use');
+var ErrorIcon = require('@mui/icons-material/Error');
+require('@fontsource/inter/400.css');
+require('@fontsource/inter/600.css');
+var locale = require('@mui/material/locale');
+var i18n = require('i18next');
+var react$2 = require('react');
+var createCache = require('@emotion/cache');
+var react$1 = require('@emotion/react');
+var CheckOutlinedIcon = require('@mui/icons-material/CheckOutlined');
+var ContentCopyOutlinedIcon = require('@mui/icons-material/ContentCopyOutlined');
+var api = require('@matrix-widget-toolkit/api');
+var LanguageDetector = require('i18next-browser-languagedetector');
+var resourcesToBackend = require('i18next-resources-to-backend');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var ErrorIcon__default = /*#__PURE__*/_interopDefaultCompat(ErrorIcon);
+var i18n__default = /*#__PURE__*/_interopDefaultCompat(i18n);
+var createCache__default = /*#__PURE__*/_interopDefaultCompat(createCache);
+var CheckOutlinedIcon__default = /*#__PURE__*/_interopDefaultCompat(CheckOutlinedIcon);
+var ContentCopyOutlinedIcon__default = /*#__PURE__*/_interopDefaultCompat(ContentCopyOutlinedIcon);
+var LanguageDetector__default = /*#__PURE__*/_interopDefaultCompat(LanguageDetector);
+var resourcesToBackend__default = /*#__PURE__*/_interopDefaultCompat(resourcesToBackend);
+
+var __assign$a = (undefined && undefined.__assign) || function () {
+    __assign$a = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$a.apply(this, arguments);
+};
+function LoadingView() {
+    var id = utils.unstable_useId();
+    var isLongLoad = reactUse.useTimeout(100)[0];
+    var t = reactI18next.useTranslation('widget-toolkit').t;
+    return isLongLoad() ? (jsxRuntime.jsxs(material.Box, __assign$a({ display: "flex", flexDirection: "column", alignItems: "center", p: 2 }, { children: [jsxRuntime.jsx(material.CircularProgress, { "aria-labelledby": id }), jsxRuntime.jsx(material.Typography, __assign$a({ py: 2, variant: "h6", id: id }, { children: t('loading.message', 'Loading…') }))] }))) : (jsxRuntime.jsx(jsxRuntime.Fragment, {}));
+}
+
+var __assign$9 = (undefined && undefined.__assign) || function () {
+    __assign$9 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$9.apply(this, arguments);
+};
+function MissingCapabilitiesError(_a) {
+    var onRetry = _a.onRetry;
+    var t = reactI18next.useTranslation('widget-toolkit').t;
+    return (jsxRuntime.jsx(material.Box, __assign$9({ my: 2 }, { children: jsxRuntime.jsxs(material.Alert, __assign$9({ severity: "error", icon: jsxRuntime.jsx(ErrorIcon__default.default, {}) }, { children: [jsxRuntime.jsx(material.AlertTitle, { children: t('missing-capabilities.title', 'Missing capabilities') }), jsxRuntime.jsx(material.Typography, __assign$9({ variant: "body2" }, { children: t('missing-capabilities.instructions', 'The minimum capabilities required for this widget are missing. Make sure to grant all requested capabilities.') })), jsxRuntime.jsx(material.Box, __assign$9({ mt: 1 }, { children: jsxRuntime.jsx(material.Button, __assign$9({ variant: "contained", onClick: onRetry }, { children: t('missing-capabilities.request-capabilities', 'Request capabilities') })) }))] })) })));
+}
+
+var __assign$8 = (undefined && undefined.__assign) || function () {
+    __assign$8 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$8.apply(this, arguments);
+};
+/**
+ * A guard that ask the user for capabilities and only shows the `children`
+ * if all capabilities were accepted.
+ * If capabilities are denined, a message and a button to retry is displayed
+ * instead.
+ * @param param0 - {@link MuiCapabilitiesGuardProps}
+ */
+function MuiCapabilitiesGuard(_a) {
+    var capabilities = _a.capabilities, children = _a.children;
+    return (jsxRuntime.jsx(react.CapabilitiesGuard, __assign$8({ capabilities: capabilities, loadingComponent: LoadingView, missingCapabilitiesComponent: MissingCapabilitiesError }, { children: children })));
+}
+
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var getWindowEnvironment = function () {
+    var environment = {};
+    if (typeof window.__ENVIRONMENT__ === 'string') {
+        var encoded = window.__ENVIRONMENT__;
+        // check if mustache placeholder hasn't been replaced for some reason.
+        if (!encoded.match(/^{{.*}}$/)) {
+            try {
+                environment = JSON.parse(atob(encoded));
+            }
+            catch (_a) {
+                console.warn('window.__ENVIRONMENT__ has an unexpected format', encoded);
+            }
+        }
+    }
+    return environment;
+};
+var environment = getWindowEnvironment();
+function getEnvironment(name, defaultValue) {
+    var value = environment[name] || process.env[name];
+    return value !== null && value !== void 0 ? value : defaultValue;
+}
+
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Retrieve the nonce passed by our Docker base image.
+ * @returns A nonce that can be used to perform operations that are disabled in
+ *          our CSP by default.
+ */
+function getNonce() {
+    return window['NONCE'];
+}
+
+var __assign$7 = (undefined && undefined.__assign) || function () {
+    __assign$7 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$7.apply(this, arguments);
+};
+function createEmotionCache() {
+    return createCache__default.default({
+        key: 'widget',
+        nonce: getNonce(),
+    });
+}
+var cache = createEmotionCache();
+function EmotionCacheProvider(_a) {
+    var children = _a.children;
+    return jsxRuntime.jsx(react$1.CacheProvider, __assign$7({ value: cache }, { children: children }));
+}
+
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var fontFamily = [
+    'Inter',
+    'Twemoji',
+    '"Apple Color Emoji"',
+    '"Segoe UI Emoji"',
+    'Arial',
+    'Helvetica',
+    'sans-serif',
+    '"Noto Color Emoji"',
+].join(',');
+var primaryColor = getEnvironment('REACT_APP_PRIMARY_COLOR', '#0dbd8b');
+var primaryColorHighContrast = '#075D53';
+var errorColor = '#ff5b55';
+var errorColorHighContrast = '#AA0904';
+function createSwitchStyleOverrides(_a) {
+    var trackColor = _a.trackColor, thumbColor = _a.thumbColor;
+    return {
+        root: function (_a) {
+            var theme = _a.theme;
+            return ({
+                width: 48,
+                height: 24,
+                padding: 0,
+                '& .MuiSwitch-switchBase': {
+                    padding: 0,
+                    margin: 2,
+                    transitionDuration: '300ms',
+                    '&.Mui-checked': {
+                        transform: 'translateX(16px)',
+                        color: '#fff',
+                        '& + .MuiSwitch-track': {
+                            backgroundColor: theme.palette.primary.main,
+                            opacity: 1,
+                            border: 0,
+                        },
+                        '&.Mui-disabled + .MuiSwitch-track': {
+                            opacity: 0.5,
+                        },
+                    },
+                    '&.Mui-focusVisible .MuiSwitch-thumb': {
+                        color: theme.palette.primary.main,
+                        border: '6px solid #fff',
+                    },
+                    '&.Mui-disabled .MuiSwitch-thumb': {
+                        color: thumbColor,
+                    },
+                    '&.Mui-disabled + .MuiSwitch-track': {
+                        opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
+                    },
+                },
+                '& .MuiSwitch-thumb': {
+                    boxSizing: 'border-box',
+                    width: 20,
+                    height: 20,
+                },
+                '& .MuiSwitch-track': {
+                    borderRadius: 26 / 2,
+                    backgroundColor: trackColor,
+                    opacity: 1,
+                    transition: theme.transitions.create(['background-color'], {
+                        duration: 500,
+                    }),
+                },
+                '& .MuiSwitch-switchBase.Mui-checked': {
+                    transform: 'translateX(24px)',
+                },
+            });
+        },
+    };
+}
+/**
+ * Create the default theme to use defaultTheme.typography.pxToRem to calculate
+ * font sizes.
+ *
+ * When using font sizes in our theme, we should always prefer relative units
+ * over absolute ones, so that a user can set a different base size in his
+ * browser settings.
+ */
+var defaultTheme = material.createTheme();
+var baseTheme = {
+    shape: {
+        borderRadius: 8,
+    },
+    palette: {
+        primary: {
+            main: primaryColor,
+            contrastText: '#ffffff',
+        },
+        error: {
+            main: errorColor,
+            contrastText: '#ffffff',
+        },
+        tonalOffset: 0.025,
+    },
+    typography: {
+        fontFamily: fontFamily,
+        fontWeightLight: 400,
+        fontWeightMedium: 600,
+        fontWeightBold: 600,
+        body1: {
+            fontSize: defaultTheme.typography.pxToRem(15),
+        },
+        body2: {
+            fontSize: defaultTheme.typography.pxToRem(12),
+        },
+        button: {
+            fontSize: defaultTheme.typography.pxToRem(14),
+            textTransform: 'none',
+        },
+        h1: {
+            fontSize: defaultTheme.typography.pxToRem(28),
+        },
+        h2: {
+            fontSize: defaultTheme.typography.pxToRem(24),
+        },
+        h3: {
+            fontSize: defaultTheme.typography.pxToRem(20),
+        },
+        h4: {
+            fontSize: defaultTheme.typography.pxToRem(16),
+        },
+        h5: {
+            fontSize: defaultTheme.typography.pxToRem(15),
+            fontWeight: 600,
+            textTransform: 'none',
+        },
+        h6: {
+            fontSize: defaultTheme.typography.pxToRem(14),
+        },
+    },
+    components: {
+        // Additional text in Element alerts is a bit smaller
+        MuiAlert: {
+            styleOverrides: {
+                message: {
+                    fontSize: defaultTheme.typography.pxToRem(12),
+                },
+            },
+        },
+        // We don't want to use sticky headers for list titles by default
+        MuiListSubheader: {
+            defaultProps: {
+                disableSticky: true,
+            },
+        },
+        // Use smaller text fields by default
+        MuiTextField: {
+            defaultProps: {
+                size: 'small',
+                // TODO: color: 'secondary',
+            },
+        },
+        MuiSelect: {
+            defaultProps: {
+                size: 'small',
+            },
+        },
+        // Dialogs have a different padding and font style
+        MuiDialog: {
+            styleOverrides: {
+                paper: function (_a) {
+                    var theme = _a.theme;
+                    return ({
+                        margin: theme.breakpoints.down('xs') ? '8px' : undefined,
+                    });
+                },
+            },
+        },
+        MuiDialogTitle: {
+            defaultProps: {
+                padding: [3],
+                fontSize: defaultTheme.typography.pxToRem(24),
+                fontWeight: 600,
+            },
+        },
+        MuiDialogActions: {
+            defaultProps: {
+                sx: { padding: 3 },
+            },
+        },
+        MuiBackdrop: {
+            styleOverrides: {
+                root: function (_a) {
+                    var theme = _a.theme;
+                    return ({
+                        backgroundColor: theme.palette.mode === 'dark' ? '#000' : 'rgba(46,48,51,.38)',
+                        opacity: 0.8,
+                    });
+                },
+                invisible: {
+                    backgroundColor: 'unset',
+                    opacity: 'unset',
+                },
+            },
+        },
+        // Tooltips have a darker background
+        MuiTooltip: {
+            styleOverrides: {
+                tooltip: function (_a) {
+                    var theme = _a.theme;
+                    return ({
+                        fontSize: defaultTheme.typography.pxToRem(12),
+                        backgroundColor: 'rgb(33, 38, 44)',
+                        padding: theme.spacing(1),
+                    });
+                },
+            },
+        },
+        // Buttons have to ripple but have the default keyboard focus ring instead
+        MuiButtonBase: {
+            defaultProps: {
+                disableRipple: true,
+            },
+            styleOverrides: {
+                root: {
+                    // Restore keyboard focus outline to the default browser value
+                    '&.Mui-focusVisible': {
+                        outline: 'revert',
+                    },
+                },
+            },
+        },
+        MuiButton: {
+            defaultProps: {
+                disableElevation: true,
+            },
+        },
+        MuiButtonGroup: {
+            defaultProps: {
+                disableRipple: true,
+            },
+        },
+        // Make toggle buttons small by default
+        MuiToggleButton: {
+            defaultProps: {
+                size: 'small',
+            },
+        },
+        // Switches look different in Element, similar to the iOS one.
+        MuiSwitch: {
+            defaultProps: {
+                disableRipple: true,
+            },
+        },
+        MuiDivider: {
+            styleOverrides: {
+                withChildren: {
+                    // Make sure it is possible to use an ellipsis inside the divider.
+                    // This gives the children more space and less space to the divider
+                    // itself.
+                    '&::before, &::after': {
+                        width: 'auto',
+                        flexGrow: 1,
+                        minWidth: '10%',
+                    },
+                },
+            },
+        },
+        // Make sure that radios have a focus visible effect as we removed the ripple
+        MuiRadio: {
+            styleOverrides: {
+                root: {
+                    '&.Mui-focusVisible svg:first-of-type': {
+                        outlineColor: 'Highlight',
+                        outlineStyle: 'auto',
+                        outlineWidth: '2px',
+                        // Things are doubled here because Highlight is only supported by
+                        // Firefox
+                        outline: 'auto 2px -webkit-focus-ring-color',
+                        outlineOffset: -2,
+                        borderRadius: '50%',
+                    },
+                    // Remove the ripple
+                    '&:hover': {
+                        bgcolor: 'transparent',
+                    },
+                },
+            },
+        },
+    },
+};
+var lightTheme = {
+    palette: {
+        mode: 'light',
+        background: {
+            default: '#ffffff',
+            paper: '#f2f5f8',
+        },
+        text: {
+            primary: '#17191c',
+            secondary: '#61708b',
+        },
+        divider: '#e3e8f0',
+    },
+    components: {
+        // Switches look different in Element, similar to the iOS one.
+        MuiSwitch: {
+            styleOverrides: createSwitchStyleOverrides({
+                trackColor: '#E9E9EA',
+                thumbColor: defaultTheme.palette.grey[600],
+            }),
+        },
+    },
+};
+var lightHighContrastTheme = {
+    palette: {
+        mode: 'light',
+        // Choosing different colors to have the correct contrast
+        primary: {
+            main: primaryColorHighContrast,
+        },
+        error: {
+            main: errorColorHighContrast,
+        },
+        success: {
+            main: '#37623B',
+        },
+        warning: {
+            main: '#795015',
+            contrastText: '#ffffff',
+        },
+        info: {
+            main: '#025E88',
+        },
+        background: {
+            default: '#ffffff',
+            // We explicitly don't have a paper color and choose to add borders
+            // instead. Otherwise our colors would all have to compare their contrast
+            // to the paper color (the worst case).
+            paper: '#ffffff',
+        },
+        text: {
+            primary: '#101214',
+            secondary: '#3F4345',
+        },
+        action: {
+            active: '#5e6266',
+        },
+        divider: '#5e6266',
+        // Stronger tonal offset as the colors are darker and won't change that much.
+        tonalOffset: 0.2,
+    },
+    components: {
+        MuiCard: {
+            defaultProps: {
+                // We disabled the background, but can use the border instead.
+                variant: 'outlined',
+            },
+        },
+        MuiAlert: {
+            defaultProps: {
+                // We disabled the background, but can use the border instead.
+                variant: 'outlined',
+            },
+        },
+        MuiChip: {
+            defaultProps: {
+                // We disabled the background, but can use the border instead.
+                variant: 'outlined',
+            },
+            styleOverrides: {
+                // Make the border color and delete icon have a higher contrast
+                root: function (_a) {
+                    var theme = _a.theme;
+                    return ({
+                        borderColor: theme.palette.divider,
+                        '& .MuiChip-deleteIconOutlinedColorDefault': {
+                            color: theme.palette.divider,
+                            '&:hover': {
+                                color: theme.palette.divider,
+                            },
+                        },
+                    });
+                },
+            },
+        },
+        MuiInputBase: {
+            styleOverrides: {
+                input: {
+                    // Contrast requirements of at least 4.5:1 are also required for
+                    // placeholder text!
+                    '&::placeholder': {
+                        color: '#52575A',
+                        opacity: 0.9,
+                    },
+                },
+            },
+        },
+        MuiOutlinedInput: {
+            styleOverrides: {
+                notchedOutline: function (_a) {
+                    var theme = _a.theme;
+                    return ({
+                        // Give inputs borders a higher contrast
+                        borderColor: theme.palette.text.primary,
+                    });
+                },
+            },
+        },
+        // Switches look different in Element, similar to the iOS one.
+        // The normal off color has no sufficient contrast
+        MuiSwitch: {
+            styleOverrides: createSwitchStyleOverrides({
+                trackColor: '#8293AB',
+                thumbColor: defaultTheme.palette.grey[100],
+            }),
+        },
+        // Make toggle buttons have more contrast for the selected state
+        MuiToggleButton: {
+            styleOverrides: {
+                root: function (_a) {
+                    var theme = _a.theme, ownerState = _a.ownerState;
+                    if (ownerState.disabled) {
+                        // Keep original style
+                        return {};
+                    }
+                    var selectedColor = ownerState.color === 'standard' || ownerState.color === undefined
+                        ? theme.palette.common.white
+                        : theme.palette[ownerState.color].contrastText;
+                    var selectedBackgroundColor = ownerState.color === 'standard' || ownerState.color === undefined
+                        ? theme.palette.grey['700']
+                        : theme.palette[ownerState.color].main;
+                    var selectedHoverBackgroundColor = ownerState.color === 'standard' || ownerState.color === undefined
+                        ? theme.palette.grey['800']
+                        : theme.palette[ownerState.color].dark;
+                    return {
+                        '&.Mui-selected': {
+                            backgroundColor: selectedBackgroundColor,
+                            color: selectedColor,
+                            '&:hover': {
+                                backgroundColor: selectedHoverBackgroundColor,
+                            },
+                        },
+                    };
+                },
+            },
+        },
+    },
+};
+var darkTheme = {
+    palette: {
+        mode: 'dark',
+        background: {
+            default: '#15191e',
+            paper: '#20252b',
+        },
+        text: {
+            primary: '#ffffff',
+            secondary: '#b9bec6',
+        },
+        divider: '#394049',
+    },
+    components: {
+        // Switches look different in Element, similar to the iOS one.
+        MuiSwitch: {
+            styleOverrides: createSwitchStyleOverrides({
+                trackColor: '#39393D',
+                thumbColor: defaultTheme.palette.grey[600],
+            }),
+        },
+    },
+};
+
+var __assign$6 = (undefined && undefined.__assign) || function () {
+    __assign$6 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$6.apply(this, arguments);
+};
+/**
+ * Provide a semantic UI based theme to the child components.
+ * @param param0 - {@link MuiThemeProviderProps}
+ */
+function MuiThemeProvider(_a) {
+    var children = _a.children;
+    return (jsxRuntime.jsx(EmotionCacheProvider, { children: jsxRuntime.jsx(react.ThemeSelectionProvider, { children: jsxRuntime.jsx(ElementMuiThemeProvider, { children: children }) }) }));
+}
+function chooseTheme(theme) {
+    var isDark = theme === 'dark';
+    var isForceHighContrast = !!getEnvironment('REACT_APP_FORCE_HIGH_CONTRAST_THEME');
+    var isHighContrast = isForceHighContrast || theme === 'light-high-contrast';
+    if (isDark) {
+        return darkTheme;
+    }
+    else if (isHighContrast) {
+        return lightHighContrastTheme;
+    }
+    else {
+        return lightTheme;
+    }
+}
+function ElementMuiThemeProvider(_a) {
+    var _b;
+    var children = _a.children;
+    var theme = react.useThemeSelection().theme;
+    var _c = react$2.useState((_b = i18n__default.default.languages) === null || _b === void 0 ? void 0 : _b[0]), locale$1 = _c[0], setLocale = _c[1];
+    react$2.useEffect(function () {
+        var callback = function () { return setLocale(i18n__default.default.languages[0]); };
+        i18n__default.default.on('languageChanged', callback);
+        return function () { return i18n__default.default.off('languageChanged', callback); };
+    }, []);
+    var muiTheme = react$2.useMemo(function () {
+        var themeOptions = chooseTheme(theme);
+        var localeOptions = locale$1 === 'de' ? locale.deDE : locale.enUS;
+        return material.createTheme(utils.deepmerge(baseTheme, themeOptions), localeOptions);
+    }, [locale$1, theme]);
+    return (jsxRuntime.jsxs(material.ThemeProvider, __assign$6({ theme: muiTheme }, { children: [jsxRuntime.jsx(material.CssBaseline, {}), children] })));
+}
+
+var __assign$5 = (undefined && undefined.__assign) || function () {
+    __assign$5 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$5.apply(this, arguments);
+};
+function CopyableCode(_a) {
+    var code = _a.code;
+    var t = reactI18next.useTranslation('widget-toolkit').t;
+    var _b = react$2.useState(false), hasCopied = _b[0], setHasCopied = _b[1];
+    var _c = reactUse.useCopyToClipboard(), copyToClipboard = _c[1];
+    return (jsxRuntime.jsx(material.Paper, __assign$5({ sx: { position: 'relative' } }, { children: jsxRuntime.jsxs(material.Box, __assign$5({ sx: { overflowY: 'auto' } }, { children: [jsxRuntime.jsx(material.Box, __assign$5({ component: "code", sx: { userSelect: 'all' }, m: 0 }, { children: jsxRuntime.jsx(material.Box, __assign$5({ component: "pre", m: 2 }, { children: code })) })), jsxRuntime.jsx(material.IconButton, __assign$5({ sx: function (theme) { return ({
+                        position: 'absolute',
+                        right: theme.spacing(1),
+                        bottom: theme.spacing(1),
+                    }); }, onClick: function () {
+                        copyToClipboard(code);
+                        setHasCopied(true);
+                    }, onBlur: function () { return setHasCopied(false); }, "aria-label": t('code.copy-to-clipboard', 'Copy to clipboard') }, { children: hasCopied ? jsxRuntime.jsx(CheckOutlinedIcon__default.default, {}) : jsxRuntime.jsx(ContentCopyOutlinedIcon__default.default, {}) }))] })) })));
+}
+
+var __assign$4 = (undefined && undefined.__assign) || function () {
+    __assign$4 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$4.apply(this, arguments);
+};
+function ChildError(_a) {
+    var _b;
+    var error = _a.error;
+    var t = reactI18next.useTranslation('widget-toolkit').t;
+    return (jsxRuntime.jsx(material.Box, __assign$4({ my: 2 }, { children: jsxRuntime.jsxs(material.Alert, __assign$4({ severity: "error", icon: jsxRuntime.jsx(ErrorIcon__default.default, {}) }, { children: [jsxRuntime.jsx(material.AlertTitle, { children: t('error.title', 'Ohh no!') }), jsxRuntime.jsx(material.Typography, __assign$4({ variant: "body2" }, { children: t('error.instructions', 'An error occured inside the widget. You can try to reopen the widget.') })), jsxRuntime.jsx(material.Box, __assign$4({ mt: 1 }, { children: jsxRuntime.jsx(CopyableCode, { code: "".concat((_b = error.stack) !== null && _b !== void 0 ? _b : error) }) }))] })) })));
+}
+
+var __assign$3 = (undefined && undefined.__assign) || function () {
+    __assign$3 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$3.apply(this, arguments);
+};
+var __awaiter = (undefined && undefined.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (undefined && undefined.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (_) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
+function MissingParametersError(_a) {
+    var _this = this;
+    var widgetRegistration = _a.widgetRegistration;
+    var t = reactI18next.useTranslation('widget-toolkit').t;
+    var widgetApi = react.useWidgetApi();
+    var _b = react$2.useState(false), isErrorDialogOpen = _b[0], setErrorDialogOpen = _b[1];
+    var _c = react$2.useState(false), isCompleted = _c[0], setCompleted = _c[1];
+    var handleRepairWidget = react$2.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    _b.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, api.repairWidgetRegistration(widgetApi, widgetRegistration)];
+                case 1:
+                    _b.sent();
+                    setCompleted(true);
+                    return [3 /*break*/, 3];
+                case 2:
+                    _b.sent();
+                    setErrorDialogOpen(true);
+                    return [3 /*break*/, 3];
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); }, [widgetApi, widgetRegistration]);
+    var errorDialogTitleId = utils.unstable_useId();
+    var errorDialogTextId = utils.unstable_useId();
+    var successDialogTitleId = utils.unstable_useId();
+    var successDialogTextId = utils.unstable_useId();
+    return (jsxRuntime.jsxs(material.Box, __assign$3({ my: 2 }, { children: [jsxRuntime.jsxs(material.Alert, __assign$3({ severity: "error", icon: jsxRuntime.jsx(ErrorIcon__default.default, {}) }, { children: [jsxRuntime.jsx(material.AlertTitle, { children: t('missing-parameters.title', 'Wrong widget registration') }), jsxRuntime.jsx(material.Typography, __assign$3({ variant: "body2" }, { children: t('missing-parameters.instructions', 'The widget is not registered correctly. Make sure to include the correct parameters in the widget URL:') })), jsxRuntime.jsx(material.Box, __assign$3({ my: 1 }, { children: jsxRuntime.jsx(CopyableCode, { code: api.generateWidgetRegistrationUrl() }) })), jsxRuntime.jsx(material.Typography, __assign$3({ variant: "body2" }, { children: t('missing-parameters.repair-instructions', 'You can either modify the widget registration manually or fix it automatically:') })), jsxRuntime.jsx(material.Box, __assign$3({ mt: 1 }, { children: jsxRuntime.jsx(material.Button, __assign$3({ variant: "contained", onClick: handleRepairWidget }, { children: t('missing-parameters.repair', 'Repair registration') })) }))] })), jsxRuntime.jsxs(material.Dialog, __assign$3({ open: isErrorDialogOpen, onClose: function () { return setErrorDialogOpen(false); }, "aria-labelledby": errorDialogTitleId, "aria-describedby": errorDialogTextId }, { children: [jsxRuntime.jsx(material.DialogTitle, __assign$3({ id: errorDialogTitleId }, { children: t('missing-parameters.permissions-error.title', 'Error') })), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, __assign$3({ id: errorDialogTextId }, { children: t('missing-parameters.permissions-error.instructions', 'Insufficient permissions, could not configure widget. Only room admins can configure the widget.') })) }), jsxRuntime.jsx(material.DialogActions, { children: jsxRuntime.jsx(material.Button, __assign$3({ onClick: function () { return setErrorDialogOpen(false); }, autoFocus: true }, { children: t('missing-parameters.permissions-error.close', 'Close') })) })] })), jsxRuntime.jsxs(material.Dialog, __assign$3({ open: isCompleted, "aria-labelledby": successDialogTitleId, "aria-describedby": successDialogTextId }, { children: [jsxRuntime.jsx(material.DialogTitle, __assign$3({ id: successDialogTitleId }, { children: t('missing-parameters.completed.title', 'Widget configuration complete') })), jsxRuntime.jsx(material.DialogContent, { children: jsxRuntime.jsx(material.DialogContentText, __assign$3({ id: successDialogTextId }, { children: t('missing-parameters.completed.instructions', 'Configuration completed, reopen the widget to start using it.') })) })] }))] })));
+}
+
+var __assign$2 = (undefined && undefined.__assign) || function () {
+    __assign$2 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$2.apply(this, arguments);
+};
+function MobileClientError() {
+    var t = reactI18next.useTranslation('widget-toolkit').t;
+    return (jsxRuntime.jsx(material.Box, __assign$2({ m: 2 }, { children: jsxRuntime.jsxs(material.Alert, __assign$2({ severity: "error", icon: jsxRuntime.jsx(ErrorIcon__default.default, {}) }, { children: [jsxRuntime.jsx(material.AlertTitle, { children: t('mobile-client.title', 'Mobile clients are not supported') }), t('mobile-client.instructions', "The widget doesn't work in mobile clients due to technical limitations. Open the widget on you Desktop or Web client.")] })) })));
+}
+
+var __assign$1 = (undefined && undefined.__assign) || function () {
+    __assign$1 = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign$1.apply(this, arguments);
+};
+function OutsideClientError() {
+    var t = reactI18next.useTranslation('widget-toolkit').t;
+    return (jsxRuntime.jsx(material.Box, __assign$1({ m: 2 }, { children: jsxRuntime.jsxs(material.Alert, __assign$1({ severity: "error", icon: jsxRuntime.jsx(ErrorIcon__default.default, {}) }, { children: [jsxRuntime.jsx(material.AlertTitle, { children: t('outside-client.title', 'Only runs as a widget') }), jsxRuntime.jsx(material.Typography, __assign$1({ variant: "body2" }, { children: t('outside-client.instructions', "You need to register this URL as a widget, it's not possible to use it standalone. Run this command in the matrix room you want to register the widget in:") })), jsxRuntime.jsx(material.Box, __assign$1({ mt: 1 }, { children: jsxRuntime.jsx(CopyableCode, { code: "/addwidget ".concat(api.generateWidgetRegistrationUrl({
+                            includeParameters: false,
+                        })) }) }))] })) })));
+}
+
+var __assign = (undefined && undefined.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+/**
+ * Provides the `WidgetApi` in the React context once it's fully
+ * initialized without errors.
+ * Use `useWidgetApi` to access it.
+ * @param param0 - {@link MuiWidgetApiProviderProps}
+ */
+function MuiWidgetApiProvider(_a) {
+    var widgetRegistration = _a.widgetRegistration, widgetApiPromise = _a.widgetApiPromise, children = _a.children;
+    return (jsxRuntime.jsx(react.WidgetApiProvider, __assign({ widgetApiPromise: widgetApiPromise, widgetRegistration: widgetRegistration, loadingViewComponent: LoadingView, mobileClientErrorComponent: MobileClientError, childErrorComponent: ChildError, outsideClientErrorComponent: OutsideClientError, missingCapabilitiesComponent: MissingCapabilitiesError, missingParametersErrorComponent: MissingParametersError }, { children: children })));
+}
+
+/*
+ * Copyright 2022 Nordeck IT + Consulting GmbH
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+var __extends = (undefined && undefined.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+/**
+ * Backend for usage with `i18n-next` that provides translations for internal
+ * messages.
+ */
+var WidgetToolkitI18nBackend = resourcesToBackend__default.default(function (lng, ns, clb) {
+    import("../locales/".concat(lng, "/").concat(ns, ".json"))
+        .then(function (resources) { return clb(null, resources); })
+        .catch(function (err) { return clb(err, undefined); });
+});
+/**
+ * A language detector that reads the language from the widget url.
+ */
+var WidgetApiLanguageDetector = /** @class */ (function (_super) {
+    __extends(WidgetApiLanguageDetector, _super);
+    function WidgetApiLanguageDetector() {
+        var _this = _super.call(this, undefined, {
+            // prefer the widget api and fallback to the browser settings.
+            order: ['widgetApi', 'navigator'],
+        }) || this;
+        var widgetApiLanguageDetector = {
+            name: 'widgetApi',
+            lookup: function () {
+                var clientLanguage = api.extractWidgetParameters().clientLanguage;
+                return clientLanguage;
+            },
+        };
+        _this.addDetector(widgetApiLanguageDetector);
+        return _this;
+    }
+    return WidgetApiLanguageDetector;
+}(LanguageDetector__default.default));
+
+exports.MuiCapabilitiesGuard = MuiCapabilitiesGuard;
+exports.MuiThemeProvider = MuiThemeProvider;
+exports.MuiWidgetApiProvider = MuiWidgetApiProvider;
+exports.WidgetApiLanguageDetector = WidgetApiLanguageDetector;
+exports.WidgetToolkitI18nBackend = WidgetToolkitI18nBackend;
+exports.getEnvironment = getEnvironment;
+exports.getNonce = getNonce;