@learningpool/ui 1.6.0-beta.17 → 1.6.0-beta.19

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.
@@ -272,7 +272,7 @@ var AppSwitcher = function (props) {
272
272
  return (_jsxs(AppSwitcherPanel, __assign({ id: "app-switcher-menu", style: {
273
273
  display: isAppSwitcherOpen ? 'block' : 'none',
274
274
  left: isDrawerOpen ? DRAWER_WIDTH.Expanded : DRAWER_WIDTH.Collapsed - 3
275
- }, role: 'dialog', onKeyDown: handleKeyDown }, { children: [activeTab === Constants.Tabs.ListApplications
275
+ }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown }, { children: [activeTab === Constants.Tabs.ListApplications
276
276
  ? (_jsxs("div", { children: [_jsxs(AppListHeader, { children: [_jsx("svg", { children: _jsx("image", { xlinkHref: "".concat(Constants.AssetsUrl, "suite/logo/latest/icon.svg"), width: "24", height: "24" }) }), messages['your-apps']] }), _jsx(MenuContent, __assign({ style: {
277
277
  display: activeTab === 1 ? 'flex' : 'none'
278
278
  } }, { children: applications.map(function (_a) {
@@ -285,7 +285,7 @@ var AppSwitcher = function (props) {
285
285
  } }, { children: [_jsxs(BackButton, __assign({ onClick: function () {
286
286
  setActiveTab(Constants.Tabs.ListApplications);
287
287
  setSearchString('');
288
- } }, { children: [_jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronLeftIcon" }, { children: _jsx("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })), messages['back-to']] })), _jsxs(SelectedOrganisation, { children: [renderApplicationLogo(activeApplication === null || activeApplication === void 0 ? void 0 : activeApplication.internalName, LogoVariants.Solid), _jsx("h6", { children: activeApplication ? activeApplication.applicationName : '' })] }), _jsx(SearchBox, { id: "app-switcher-search-org", type: 'text', value: searchString, onChange: handleSearchChange, placeholder: messages.search }), _jsx(OrganisationList, { children: filteredOrgs === null || filteredOrgs === void 0 ? void 0 : filteredOrgs.filter(function (o) { return o.name.toLowerCase().includes(searchString.toLowerCase()); }).map(function (org, i) { return (_jsxs(OrganisationLink, __assign({ href: org.url, target: "_blank" }, { children: [org.name, _jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronRightIcon" }, { children: _jsx("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }))] }), i)); }) })] })))
288
+ } }, { children: [_jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronLeftIcon" }, { children: _jsx("path", { d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z" }) })), messages['back-to']] })), _jsxs(SelectedOrganisation, { children: [renderApplicationLogo(activeApplication === null || activeApplication === void 0 ? void 0 : activeApplication.internalName, LogoVariants.Solid), _jsx("span", { children: activeApplication ? activeApplication.applicationName : '' })] }), _jsx(SearchBox, { id: "app-switcher-search-org", type: 'text', value: searchString, onChange: handleSearchChange, placeholder: messages.search }), _jsx(OrganisationList, { children: filteredOrgs === null || filteredOrgs === void 0 ? void 0 : filteredOrgs.filter(function (o) { return o.name.toLowerCase().includes(searchString.toLowerCase()); }).map(function (org, i) { return (_jsxs(OrganisationLink, __assign({ href: org.url, target: "_blank" }, { children: [org.name, _jsx(StyledSVG, __assign({ className: "MuiSvgIcon-root MuiSvgIcon-fontSizeMedium MuiBox-root css-1om0hkc", focusable: "false", "aria-hidden": "true", viewBox: "0 0 24 24", "data-testid": "ChevronRightIcon" }, { children: _jsx("path", { d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z" }) }))] }), i)); }) })] })))
289
289
  : null] })));
290
290
  };
291
291
  AppSwitcher.propTypes = {
@@ -3,12 +3,12 @@ export declare const AppSwitcherPanel: import("@emotion/styled").StyledComponent
3
3
  export declare const List: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}>;
4
4
  export declare const MenuContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
5
5
  export declare const SearchContent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
6
- export declare const AppListHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
6
+ export declare const AppListHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
7
7
  export declare const AppListItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
8
8
  export declare const AppLink: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, {}>;
9
+ export declare const AppName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
9
10
  export declare const BackButton: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
10
11
  export declare const SearchBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, {}>;
11
- export declare const AppName: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
12
12
  export declare const AppOrganisationCount: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
13
13
  export declare const SelectedOrganisation: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
14
14
  export declare const StyledSVG: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").SVGProps<SVGSVGElement>, {}>;
@@ -3,41 +3,41 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
3
3
  return cooked;
4
4
  };
5
5
  import { styled } from '@mui/material/styles';
6
- export var AppSwitcherPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 0 4px 4px 0;\n bottom: 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n box-sizing: border-box;\n font-family: 'Roboto';\n height: 450px;\n left: 57px;\n padding: 1rem 1.5rem;\n position: fixed;\n width: 360px;\n z-index: 1;\n"], ["\n background-color: ", ";\n border-radius: 0 4px 4px 0;\n bottom: 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n box-sizing: border-box;\n font-family: 'Roboto';\n height: 450px;\n left: 57px;\n padding: 1rem 1.5rem;\n position: fixed;\n width: 360px;\n z-index: 1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
6
+ export var AppSwitcherPanel = styled('div')(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: ", ";\n border-radius: 0 4px 4px 0;\n bottom: 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n box-sizing: border-box;\n font-family: 'Roboto';\n height: 450px;\n left: 57px;\n overflow: auto;\n overflow-x: hidden;\n padding: 1rem 1.5rem;\n position: fixed;\n width: 360px;\n z-index: 1;\n\n & > div {\n padding-bottom: 3rem;\n }\n"], ["\n background-color: ", ";\n border-radius: 0 4px 4px 0;\n bottom: 0;\n box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);\n box-sizing: border-box;\n font-family: 'Roboto';\n height: 450px;\n left: 57px;\n overflow: auto;\n overflow-x: hidden;\n padding: 1rem 1.5rem;\n position: fixed;\n width: 360px;\n z-index: 1;\n\n & > div {\n padding-bottom: 3rem;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
7
7
  ? props.theme.palette.primary.dark
8
8
  : '#E6EAF0'; });
9
9
  export var List = styled('ul')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n"], ["\n"])));
10
10
  export var MenuContent = styled('div')(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n align-items: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n margin-top: 1rem;\n"], ["\n align-items: flex-start;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: flex-start;\n margin-top: 1rem;\n"])));
11
11
  export var SearchContent = styled('div')(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n align-items: flex-start;\n box-sizing: border-box;\n flex-direction: column;\n justify-content: flex-start;\n padding: 1rem 1rem 2rem;\n"], ["\n align-items: flex-start;\n box-sizing: border-box;\n flex-direction: column;\n justify-content: flex-start;\n padding: 1rem 1rem 2rem;\n"])));
12
- export var AppListHeader = styled('p')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: normal;\n justify-content: flex-start;\n padding: 0.5rem 1.25rem 0;\n text-transform: uppercase;\n\n & svg {\n height: 24px;\n margin-right: 0.5rem;\n width: 24px;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n font-weight: normal;\n justify-content: flex-start;\n padding: 0.5rem 1.25rem 0;\n text-transform: uppercase;\n\n & svg {\n height: 24px;\n margin-right: 0.5rem;\n width: 24px;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
12
+ export var AppListHeader = styled('div')(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n font-size: 1.2rem;\n font-weight: normal;\n justify-content: flex-start;\n padding: 1rem 1.25rem 0;\n\n & svg {\n height: 24px;\n margin-right: 0.5rem;\n width: 24px;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n font-size: 1.2rem;\n font-weight: normal;\n justify-content: flex-start;\n padding: 1rem 1.25rem 0;\n\n & svg {\n height: 24px;\n margin-right: 0.5rem;\n width: 24px;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
13
13
  ? props.theme.palette.primary.contrastText
14
- : '#757575'; });
15
- export var AppListItem = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n align-self: stretch;\n box-sizing: border-box;\n flex-direction: column;\n flex: 0 0 ", "%;\n overflow: visible;\n padding: 0.25rem;\n position: relative;\n\n &:hover {\n background-color: transparent;\n }\n"], ["\n align-items: center;\n align-self: stretch;\n box-sizing: border-box;\n flex-direction: column;\n flex: 0 0 ", "%;\n overflow: visible;\n padding: 0.25rem;\n position: relative;\n\n &:hover {\n background-color: transparent;\n }\n"])), 100 / 3);
16
- export var AppLink = styled('a')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n border-radius: 4px;\n box-shadow: none;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n font-size: 0.85rem;\n justify-content: center;\n overflow: hidden;\n padding: 1rem 0 0.5rem;\n position: relative;\n text-align: center;\n text-decoration: none;\n transition: all 200ms ease;\n width: 100%;\n\n & .MuiTouchRipple-rippleVisible {\n color: #004071;\n opacity: 0.25;\n }\n\n &:hover,\n &:focus {\n background-color: ", ";\n text-decoration: none;\n }\n\n &:active {\n background-color: #f1f1f1;\n }\n\n & svg {\n height: 60px;\n width: 60px;\n }\n\n &:hover + span,\n &:focus + span {\n opacity: 1;\n }\n\n &:hover svg,\n &:focus svg {\n background-color: ", ";\n border-color: ", ";\n }\n"], ["\n align-items: center;\n border-radius: 4px;\n box-shadow: none;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n font-size: 0.85rem;\n justify-content: center;\n overflow: hidden;\n padding: 1rem 0 0.5rem;\n position: relative;\n text-align: center;\n text-decoration: none;\n transition: all 200ms ease;\n width: 100%;\n\n & .MuiTouchRipple-rippleVisible {\n color: #004071;\n opacity: 0.25;\n }\n\n &:hover,\n &:focus {\n background-color: ", ";\n text-decoration: none;\n }\n\n &:active {\n background-color: #f1f1f1;\n }\n\n & svg {\n height: 60px;\n width: 60px;\n }\n\n &:hover + span,\n &:focus + span {\n opacity: 1;\n }\n\n &:hover svg,\n &:focus svg {\n background-color: ", ";\n border-color: ", ";\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
14
+ : '#555'; });
15
+ export var AppListItem = styled('div')(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n align-items: center;\n align-self: stretch;\n box-sizing: border-box;\n flex-direction: column;\n flex: 0 0 ", "%;\n height: 104px;\n overflow: visible;\n padding: 0.25rem;\n position: relative;\n\n &:hover {\n background-color: transparent;\n }\n"], ["\n align-items: center;\n align-self: stretch;\n box-sizing: border-box;\n flex-direction: column;\n flex: 0 0 ", "%;\n height: 104px;\n overflow: visible;\n padding: 0.25rem;\n position: relative;\n\n &:hover {\n background-color: transparent;\n }\n"])), 100 / 3);
16
+ export var AppLink = styled('a')(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n align-items: center;\n border-radius: 4px;\n box-shadow: none;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n font-size: 0.85rem;\n justify-content: center;\n overflow: hidden;\n padding: 1rem 0 0.5rem;\n position: absolute;\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n & .MuiTouchRipple-rippleVisible {\n color: #004071;\n opacity: 0.25;\n }\n\n &:hover,\n &:focus {\n background-color: ", ";\n text-decoration: none;\n z-index: 2;\n }\n\n &:active {\n background-color: #f1f1f1;\n z-index: 2;\n }\n\n & svg {\n height: 60px;\n width: 60px;\n }\n\n &:hover + span,\n &:focus + span {\n opacity: 1;\n }\n\n &:hover svg,\n &:focus svg {\n background-color: ", ";\n border-color: ", ";\n }\n\n // Show full app name on hover\n &:hover div,\n &:focus div {\n white-space: normal;\n word-wrap: break-word;\n }\n"], ["\n align-items: center;\n border-radius: 4px;\n box-shadow: none;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n font-size: 0.85rem;\n justify-content: center;\n overflow: hidden;\n padding: 1rem 0 0.5rem;\n position: absolute;\n text-align: center;\n text-decoration: none;\n width: 100%;\n\n & .MuiTouchRipple-rippleVisible {\n color: #004071;\n opacity: 0.25;\n }\n\n &:hover,\n &:focus {\n background-color: ", ";\n text-decoration: none;\n z-index: 2;\n }\n\n &:active {\n background-color: #f1f1f1;\n z-index: 2;\n }\n\n & svg {\n height: 60px;\n width: 60px;\n }\n\n &:hover + span,\n &:focus + span {\n opacity: 1;\n }\n\n &:hover svg,\n &:focus svg {\n background-color: ", ";\n border-color: ", ";\n }\n\n // Show full app name on hover\n &:hover div,\n &:focus div {\n white-space: normal;\n word-wrap: break-word;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
17
17
  ? 'rgba(22, 92, 141, 1)'
18
18
  : '#ebf2fc'; }, function (props) { return props.theme.palette.mode === 'dark'
19
19
  ? 'rgba(22, 92, 141, 1)'
20
20
  : '#ebf2fc'; }, function (props) { return props.theme.palette.mode === 'dark'
21
21
  ? 'rgba(22, 92, 141, 1)'
22
22
  : '#ebf2fc'; });
23
- export var BackButton = styled('button')(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n align-items: center;\n background: transparent;\n border: 0;\n color: ", ";\n cursor: pointer;\n display: flex;\n padding: 0.25rem 0;\n text-align: left;\n width: 100%;\n\n &:focus,\n &:hover {\n background-color: ", ";\n }\n"], ["\n align-items: center;\n background: transparent;\n border: 0;\n color: ", ";\n cursor: pointer;\n display: flex;\n padding: 0.25rem 0;\n text-align: left;\n width: 100%;\n\n &:focus,\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
23
+ export var AppName = styled('div')(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: ", ";\n font-weight: normal;\n margin: 0.5rem 0 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 90px;\n"], ["\n color: ", ";\n font-weight: normal;\n margin: 0.5rem 0 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n width: 90px;\n"])), function (props) { return props.theme.palette.mode === 'dark'
24
24
  ? props.theme.palette.primary.contrastText
25
- : '#757575'; }, function (props) { return props.theme.palette.mode === 'dark'
25
+ : '#555'; });
26
+ export var BackButton = styled('button')(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n align-items: center;\n background: transparent;\n border: 0;\n color: ", ";\n cursor: pointer;\n display: flex;\n padding: 0.25rem 0;\n text-align: left;\n width: 100%;\n\n &:focus,\n &:hover {\n background-color: ", ";\n }\n"], ["\n align-items: center;\n background: transparent;\n border: 0;\n color: ", ";\n cursor: pointer;\n display: flex;\n padding: 0.25rem 0;\n text-align: left;\n width: 100%;\n\n &:focus,\n &:hover {\n background-color: ", ";\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
27
+ ? props.theme.palette.primary.contrastText
28
+ : '#555'; }, function (props) { return props.theme.palette.mode === 'dark'
26
29
  ? 'rgba(255, 255, 255, 0.1)'
27
30
  : 'rgba(0, 0, 0, 0.1)'; });
28
- export var SearchBox = styled('input')(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n background: #f4f4f4;\n border: thin solid #888;\n box-sizing: border-box;\n color: #777;\n padding: 0.5rem;\n width: 100%;\n\n &:hover .MuiOutlinedInput-notchedOutline {\n border-color: #888;\n }\n\n & .MuiOutlinedInput-root {\n border-radius: 0;\n color: #777;\n padding: 0;\n }\n\n & .MuiOutlinedInput-input {\n padding: 0.5rem;\n }\n\n & ::placeholder {\n opacity: 0.75;\n }\n"], ["\n background: #f4f4f4;\n border: thin solid #888;\n box-sizing: border-box;\n color: #777;\n padding: 0.5rem;\n width: 100%;\n\n &:hover .MuiOutlinedInput-notchedOutline {\n border-color: #888;\n }\n\n & .MuiOutlinedInput-root {\n border-radius: 0;\n color: #777;\n padding: 0;\n }\n\n & .MuiOutlinedInput-input {\n padding: 0.5rem;\n }\n\n & ::placeholder {\n opacity: 0.75;\n }\n"])));
29
- export var AppName = styled('p')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n color: ", ";\n font-weight: normal;\n margin: 0.5rem 0 0;\n white-space: nowrap;\n"], ["\n color: ", ";\n font-weight: normal;\n margin: 0.5rem 0 0;\n white-space: nowrap;\n"])), function (props) { return props.theme.palette.mode === 'dark'
30
- ? props.theme.palette.primary.contrastText
31
- : '#757575'; });
32
- export var AppOrganisationCount = styled('span')(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background: #00497D;\n border-color: #616161;\n border-radius: 4px;\n border: none;\n color: white;\n font-size: 1rem;\n font-weight: bold;\n height: 50px;\n left: 50%;\n line-height: 50px;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n text-align: center;\n top: 43%;\n transform: translate(-50%, -50%);\n width: 50px;\n z-index: 1;\n"], ["\n background: #00497D;\n border-color: #616161;\n border-radius: 4px;\n border: none;\n color: white;\n font-size: 1rem;\n font-weight: bold;\n height: 50px;\n left: 50%;\n line-height: 50px;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n text-align: center;\n top: 43%;\n transform: translate(-50%, -50%);\n width: 50px;\n z-index: 1;\n"])));
33
- export var SelectedOrganisation = styled('div')(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n padding: 1.5rem 0;\n text-transform: uppercase;\n width: 100%;\n\n & svg,\n & svg image {\n height: 24px;\n width: 24px;\n }\n\n & h6 {\n font-size: 1.2rem;\n font-weight: 600;\n margin: 0 0 0 1rem;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n padding: 1.5rem 0;\n text-transform: uppercase;\n width: 100%;\n\n & svg,\n & svg image {\n height: 24px;\n width: 24px;\n }\n\n & h6 {\n font-size: 1.2rem;\n font-weight: 600;\n margin: 0 0 0 1rem;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
31
+ export var SearchBox = styled('input')(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n background: #f4f4f4;\n border: thin solid #888;\n box-sizing: border-box;\n color: #777;\n padding: 0.5rem;\n width: 100%;\n\n &:hover .MuiOutlinedInput-notchedOutline {\n border-color: #888;\n }\n\n & .MuiOutlinedInput-root {\n border-radius: 0;\n color: #777;\n padding: 0;\n }\n\n & .MuiOutlinedInput-input {\n padding: 0.5rem;\n }\n\n & ::placeholder {\n opacity: 0.75;\n }\n"], ["\n background: #f4f4f4;\n border: thin solid #888;\n box-sizing: border-box;\n color: #777;\n padding: 0.5rem;\n width: 100%;\n\n &:hover .MuiOutlinedInput-notchedOutline {\n border-color: #888;\n }\n\n & .MuiOutlinedInput-root {\n border-radius: 0;\n color: #777;\n padding: 0;\n }\n\n & .MuiOutlinedInput-input {\n padding: 0.5rem;\n }\n\n & ::placeholder {\n opacity: 0.75;\n }\n"])));
32
+ export var AppOrganisationCount = styled('span')(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n background: #00497D;\n border-color: #616161;\n border-radius: 4px;\n border: none;\n color: white;\n font-size: 1rem;\n font-weight: bold;\n height: 48%;\n left: 54%;\n line-height: 50px;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n text-align: center;\n top: 49%;\n transform: translate(-50%, -50%);\n width: 50%;\n z-index: 3;\n"], ["\n background: #00497D;\n border-color: #616161;\n border-radius: 4px;\n border: none;\n color: white;\n font-size: 1rem;\n font-weight: bold;\n height: 48%;\n left: 54%;\n line-height: 50px;\n margin-top: 0;\n opacity: 0;\n pointer-events: none;\n position: absolute;\n text-align: center;\n top: 49%;\n transform: translate(-50%, -50%);\n width: 50%;\n z-index: 3;\n"])));
33
+ export var SelectedOrganisation = styled('div')(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n padding: 1.5rem 0;\n width: 100%;\n\n & svg,\n & svg image {\n height: 24px;\n width: 24px;\n }\n\n & span {\n font-size: 1.2rem;\n font-weight: normal;\n margin: 0 0 0 .5rem;\n }\n"], ["\n align-items: center;\n color: ", ";\n display: flex;\n flex-direction: row;\n justify-content: flex-start;\n padding: 1.5rem 0;\n width: 100%;\n\n & svg,\n & svg image {\n height: 24px;\n width: 24px;\n }\n\n & span {\n font-size: 1.2rem;\n font-weight: normal;\n margin: 0 0 0 .5rem;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
34
34
  ? props.theme.palette.primary.contrastText
35
- : '#757575'; });
35
+ : '#555'; });
36
36
  export var StyledSVG = styled('svg')(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n box-sizing: content-box;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n font-size: 1.5rem;\n height: 1em;\n margin: 4px;\n padding: 0;\n user-select: none;\n width: 1em;\n"], ["\n box-sizing: content-box;\n display: inline-block;\n fill: currentcolor;\n flex-shrink: 0;\n font-size: 1.5rem;\n height: 1em;\n margin: 4px;\n padding: 0;\n user-select: none;\n width: 1em;\n"])));
37
37
  export var OrganisationList = styled('div')(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n height: 300px;\n overflow: auto;\n padding-top: 0.5rem;\n width: 100%;\n"], ["\n height: 300px;\n overflow: auto;\n padding-top: 0.5rem;\n width: 100%;\n"])));
38
- export var OrganisationLink = styled('a')(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n align-items: center;\n border-radius: 4px;\n box-shadow: none;\n color: ", ";\n display: flex;\n font-size: 1rem;\n justify-content: space-between;\n margin: 0 0.125rem;\n padding: 0.5rem;\n text-decoration: none;\n transition: all 200ms ease;\n\n & .MuiTouchRipple-rippleVisible {\n color: #004071;\n opacity: 0.25;\n }\n\n &:focus,\n &:hover {\n background-color: ", ";\n\n & svg {\n visibility: visible;\n }\n }\n\n &:active {\n background-color: #f1f1f1;\n }\n\n & .MuiLink-root {\n align-items: center;\n color: #777;\n display: flex;\n justify-content: space-between;\n text-decoration: none;\n width: 100%;\n }\n\n & svg {\n visibility: hidden;\n }\n"], ["\n align-items: center;\n border-radius: 4px;\n box-shadow: none;\n color: ", ";\n display: flex;\n font-size: 1rem;\n justify-content: space-between;\n margin: 0 0.125rem;\n padding: 0.5rem;\n text-decoration: none;\n transition: all 200ms ease;\n\n & .MuiTouchRipple-rippleVisible {\n color: #004071;\n opacity: 0.25;\n }\n\n &:focus,\n &:hover {\n background-color: ", ";\n\n & svg {\n visibility: visible;\n }\n }\n\n &:active {\n background-color: #f1f1f1;\n }\n\n & .MuiLink-root {\n align-items: center;\n color: #777;\n display: flex;\n justify-content: space-between;\n text-decoration: none;\n width: 100%;\n }\n\n & svg {\n visibility: hidden;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
38
+ export var OrganisationLink = styled('a')(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n align-items: center;\n border-radius: 4px;\n box-shadow: none;\n color: ", ";\n display: flex;\n font-size: 1rem;\n justify-content: space-between;\n margin: 0 0.125rem;\n padding: 0.5rem;\n text-decoration: none;\n transition: all 200ms ease;\n\n & .MuiTouchRipple-rippleVisible {\n color: #004071;\n opacity: 0.25;\n }\n\n &:focus,\n &:hover {\n background-color: ", ";\n\n & svg {\n visibility: visible;\n }\n }\n\n &:active {\n background-color: #f1f1f1;\n }\n\n & .MuiLink-root {\n align-items: center;\n color: #555;\n display: flex;\n justify-content: space-between;\n text-decoration: none;\n width: 100%;\n }\n\n & svg {\n visibility: hidden;\n }\n"], ["\n align-items: center;\n border-radius: 4px;\n box-shadow: none;\n color: ", ";\n display: flex;\n font-size: 1rem;\n justify-content: space-between;\n margin: 0 0.125rem;\n padding: 0.5rem;\n text-decoration: none;\n transition: all 200ms ease;\n\n & .MuiTouchRipple-rippleVisible {\n color: #004071;\n opacity: 0.25;\n }\n\n &:focus,\n &:hover {\n background-color: ", ";\n\n & svg {\n visibility: visible;\n }\n }\n\n &:active {\n background-color: #f1f1f1;\n }\n\n & .MuiLink-root {\n align-items: center;\n color: #555;\n display: flex;\n justify-content: space-between;\n text-decoration: none;\n width: 100%;\n }\n\n & svg {\n visibility: hidden;\n }\n"])), function (props) { return props.theme.palette.mode === 'dark'
39
39
  ? props.theme.palette.primary.contrastText
40
- : '#757575'; }, function (props) { return props.theme.palette.mode === 'dark'
40
+ : '#555'; }, function (props) { return props.theme.palette.mode === 'dark'
41
41
  ? 'rgba(255, 255, 255, 0.1)'
42
42
  : 'rgba(0, 0, 0, 0.1)'; });
43
43
  export var StyledLogoSVG = styled('svg')(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n background-color: ", ";\n border: thin solid ", ";\n position: relative;\n z-index: 1;\n"], ["\n background-color: ", ";\n border: thin solid ", ";\n position: relative;\n z-index: 1;\n"])), function (props) { return props.theme.palette.mode === 'dark'
@@ -19,8 +19,8 @@ export var Constants = Object.freeze({
19
19
  });
20
20
  export var applications = [
21
21
  { applicationId: 1, applicationName: 'Stream LXP', shortName: 'LXP', internalName: 'stream', url: 'https://learningpool.com' },
22
- { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Analytics', internalName: 'analytics', url: 'https://learningpool.com' },
23
- { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Automation', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com' },
22
+ { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', url: 'https://learningpool.com' },
23
+ { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Event Management', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com' },
24
24
  { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Automation', internalName: 'automation', customName: 'Waves 2', url: 'https://learningpool.com' },
25
25
  { applicationId: 7, applicationName: 'Stream LMS', shortName: 'LMS', internalName: 'lms', customName: '', url: 'https://learningpool.com' },
26
26
  { applicationId: 4, applicationName: 'Stream Authoring', shortName: 'Authoring', internalName: 'authoring', customName: '', url: 'https://learningpool.com' }
package/package.json CHANGED
@@ -9,7 +9,7 @@
9
9
  "components",
10
10
  "ui"
11
11
  ],
12
- "version": "1.6.0-beta.17",
12
+ "version": "1.6.0-beta.19",
13
13
  "private": false,
14
14
  "main": "index.js",
15
15
  "module": "index.js",
@@ -23,7 +23,7 @@
23
23
  "@types/jest": "^27.4.0",
24
24
  "@types/node": "^16.11.45",
25
25
  "@types/react": "^17.0.48",
26
- "@types/react-dom": "^17.0.11",
26
+ "@types/react-dom": "^17.0.18",
27
27
  "@typescript-eslint/parser": "^5.31.0",
28
28
  "anysort": "^2.0.0",
29
29
  "eslint-plugin-n": "^15.2.4",