andoncloud-sdk 1.3.12 → 1.4.0

package/dist/andoncloud-sdk.css

@@ -0,0 +1,171 @@
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter (web)/Inter-Thin.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-Thin.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter (web)/Inter-ThinItalic.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-ThinItalic.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter (web)/Inter-ExtraLight.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-ExtraLight.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter (web)/Inter-ExtraLightItalic.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-ExtraLightItalic.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter (web)/Inter-Light.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-Light.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter (web)/Inter-LightItalic.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-LightItalic.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter (web)/Inter-Regular.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-Regular.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter (web)/Inter-Italic.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-Italic.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter (web)/Inter-Medium.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-Medium.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter (web)/Inter-MediumItalic.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-MediumItalic.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter (web)/Inter-SemiBold.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-SemiBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter (web)/Inter-SemiBoldItalic.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-SemiBoldItalic.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter (web)/Inter-Bold.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-Bold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter (web)/Inter-BoldItalic.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-BoldItalic.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter (web)/Inter-ExtraBold.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-ExtraBold.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter (web)/Inter-ExtraBoldItalic.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-ExtraBoldItalic.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter (web)/Inter-Black.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-Black.woff?v=3.19") format("woff");
+}
+@font-face {
+  font-family: "Inter";
+  font-style: italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter (web)/Inter-BlackItalic.woff2?v=3.19") format("woff2"), url("Inter (web)/Inter-BlackItalic.woff?v=3.19") format("woff");
+}
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-style: normal;
+  font-named-instance: "Regular";
+  font-display: swap;
+  src: url("Inter (web)/Inter-roman.var.woff2?v=3.19") format("woff2 supports variations(gvar)"), url("Inter (web)/Inter-roman.var.woff2?v=3.19") format("woff2-variations"), url("Inter (web)/Inter-roman.var.woff2?v=3.19") format("woff2");
+}
+@font-face {
+  font-family: "Inter var";
+  font-weight: 100 900;
+  font-style: italic;
+  font-named-instance: "Italic";
+  font-display: swap;
+  src: url("Inter (web)/Inter-italic.var.woff2?v=3.19") format("woff2 supports variations(gvar)"), url("Inter (web)/Inter-italic.var.woff2?v=3.19") format("woff2-variations"), url("Inter (web)/Inter-italic.var.woff2?v=3.19") format("woff2");
+}
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+  font-family: "Inter var experimental";
+  font-weight: 100 900;
+  font-style: oblique 0deg 10deg;
+  font-display: swap;
+  src: url("Inter (web)/Inter.var.woff2?v=3.19") format("woff2-variations"), url("Inter (web)/Inter.var.woff2?v=3.19") format("woff2");
+}

package/dist/andoncloud-sdk.js

@@ -16,8 +16,8 @@ var lab = require('@mui/lab');
 var Box = _interopDefault(require('@mui/material/Box'));
 var Card = _interopDefault(require('@mui/material/Card'));
 var CardContent = _interopDefault(require('@mui/material/CardContent'));
+var BaseContainer = _interopDefault(require('@mui/material/Container'));
 var Button = _interopDefault(require('@mui/material/Button'));
-var ExitToAppIcon = _interopDefault(require('@mui/icons-material/ExitToApp'));
 var MenuIcon = _interopDefault(require('@mui/icons-material/Menu'));
 var AppBar = _interopDefault(require('@mui/material/AppBar'));
 var Typography = _interopDefault(require('@mui/material/Typography'));
@@ -26,6 +26,7 @@ var IconButton = _interopDefault(require('@mui/material/IconButton'));
 var MenuItem = _interopDefault(require('@mui/material/MenuItem'));
 var Menu = _interopDefault(require('@mui/material/Menu'));
 var AccessTimeIcon = _interopDefault(require('@mui/icons-material/AccessTime'));
+var acLogo = _interopDefault(require('./assets/logo.svg'));
 var backdropPattern = _interopDefault(require('./assets/backdropPattern.svg'));
 
 let e={data:""},t=t=>"object"==typeof window?((t?t.querySelector("#_goober"):window._goober)||Object.assign((t||document.head).appendChild(document.createElement("style")),{innerHTML:" ",id:"_goober"})).firstChild:t||e,l=/(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g,a=/\/\*[^]*?\*\/|  +/g,n=/\n+/g,o=(e,t)=>{let r="",l="",a="";for(let n in e){let c=e[n];"@"==n[0]?"i"==n[1]?r=n+" "+c+";":l+="f"==n[1]?o(c,n):n+"{"+o(c,"k"==n[1]?"":t)+"}":"object"==typeof c?l+=o(c,t?t.replace(/([^,])+/g,e=>n.replace(/(^:.*)|([^,])+/g,t=>/&/.test(t)?t.replace(/&/g,e):e?e+" "+t:t)):n):null!=c&&(n=/^--/.test(n)?n:n.replace(/[A-Z]/g,"-$&").toLowerCase(),a+=o.p?o.p(n,c):n+":"+c+";");}return r+(t&&a?t+"{"+a+"}":a)+l},c={},s=e=>{if("object"==typeof e){let t="";for(let r in e)t+=r+s(e[r]);return t}return e},i=(e,t,r,i,p)=>{let u=s(e),d=c[u]||(c[u]=(e=>{let t=0,r=11;for(;t<e.length;)r=101*r+e.charCodeAt(t++)>>>0;return "go"+r})(u));if(!c[d]){let t=u!==e?e:(e=>{let t,r,o=[{}];for(;t=l.exec(e.replace(a,""));)t[4]?o.shift():t[3]?(r=t[3].replace(n," ").trim(),o.unshift(o[0][r]=o[0][r]||{})):o[0][t[1]]=t[2].replace(n," ").trim();return o[0]})(e);c[d]=o(p?{["@keyframes "+d]:t}:t,r?"":"."+d);}return ((e,t,r)=>{-1==t.data.indexOf(e)&&(t.data=r?e+t.data:t.data+e);})(c[d],t,i),d},p=(e,t,r)=>e.reduce((e,l,a)=>{let n=t[a];if(n&&n.call){let e=n(r),t=e&&e.props&&e.props.className||/^go/.test(e)&&e;n=t?"."+t:e&&"object"==typeof e?e.props?"":o(e,""):!1===e?"":e;}return e+l+(null==n?"":n)},"");function u(e){let r=this||{},l=e.call?e(r.p):e;return i(l.unshift?l.raw?p(l,[].slice.call(arguments,1),r.p):l.reduce((e,t)=>Object.assign(e,t&&t.call?t(r.p):t),{}):l,t(r.target),r.g,r.o,r.k)}let d,f,g,b=u.bind({g:1}),h=u.bind({k:1});function m(e,t,r,l){o.p=t,d=e,f=r,g=l;}function j(e,t){let r=this||{};return function(){let l=arguments;function a(n,o){let c=Object.assign({},n),s=c.className||a.className;r.p=Object.assign({theme:f&&f()},c),r.o=/ *go\d+/.test(s),c.className=u.apply(r,l)+(s?" "+s:""),t&&(c.ref=o);let i=e;return e[0]&&(i=c.as||e,delete c.as),g&&i[0]&&g(c),d(i,c)}return t?t(a):a}}
@@ -1666,7 +1667,7 @@ var defaultTheme = styles.createTheme(styles.adaptV4Theme({
   overrides: {
     MuiBackdrop: {
       root: {
-        marginTop: 48
+        marginTop: 70
       }
     },
     MuiButton: {
@@ -1758,22 +1759,27 @@ var defaultTheme = styles.createTheme(styles.adaptV4Theme({
     }
   },
   typography: {
+    fontFamily: "'Inter', system-ui",
+    fontWeightLight: "400",
+    fontWeightRegular: "500",
+    fontWeightMedium: "600",
     button: {
       textTransform: "none"
     }
   },
   palette: {
+    background: "#1E1E1E",
     primary: {
       light: "#156bd1",
       main: "#155ed1",
       dark: "#1551d1",
-      contrastText: "#fff"
+      contrastText: "rgba(255,255,255,0.85)"
     },
     secondary: {
       light: "#656565",
       main: "#595959",
       dark: "#4d4d4d",
-      contrastText: "#fff"
+      contrastText: "rgba(255,255,255,0.85)"
     }
   }
 }));
@@ -2953,24 +2959,30 @@ var useStyles = (function (_ref) {
       menuStyles = _ref.menuStyles,
       menuDropdownStyles = _ref.menuDropdownStyles;
   return {
-    root: styles,
+    root: _extends$1({
+      paddingTop: "10px",
+      color: "rgba(255,255,255,0.85)",
+      background: "transparent"
+    }, styles),
     nav: {
       marginRight: "10px"
     },
-    user: {
-      marginRight: "20px",
-      backgroundColor: "rgba(0,0,0,0.05)",
-      borderRadius: "5px",
-      border: "1px solid rgba(0,0,0, 0.25)"
-    },
+    user: {},
     userInfo: {
-      paddingLeft: "1em"
+      marginLeft: "0.5em",
+      color: "rgba(255,255,255,0.5)"
     },
     button: {
-      color: "white",
-      backgroundColor: "transparent",
+      height: "50px",
+      marginRight: "10px",
+      fontSize: "16px",
+      fontWeight: 600,
+      backgroundColor: "rgba(79, 79, 79, 1)",
+      boxShadow: "0px 2px 5px rgba(0, 0, 0, 0.28)",
+      borderRadius: "4px",
       "&:hover": {
-        backgroundColor: "rgba(0,0,0,0.05)"
+        backgroundColor: "rgba(79, 79, 79, 1)",
+        filter: "brightness(1.1)"
       }
     },
     loginButton: {
@@ -2979,11 +2991,8 @@ var useStyles = (function (_ref) {
     logoutButton: {
       paddingRight: "18px"
     },
-    avatar: {
-      paddingRight: "0.5em"
-    },
     menu: _extends$1({
-      marginTop: "48px",
+      marginTop: "70px",
       backgroundColor: "rgba(0,0,0,0.5)"
     }, menuStyles, {
       "& .MuiPaper-root": _extends$1({
@@ -3021,15 +3030,16 @@ var Header = function Header(_ref) {
       showUserSection = _show$showCompanyLogo.show,
       showCompanyLogo = _show$showCompanyLogo.showCompanyLogo;
 
-  var _items$dropdownStyles = _extends$1({
+  var _items$buttonColor$dr = _extends$1({
     items: [],
+    buttonColor: "white",
     dropdownStyles: {},
     styles: {}
   }, menuProps),
-      menuItems = _items$dropdownStyles.items,
-      menuButtonColor = _items$dropdownStyles.buttonColor,
-      menuDropdownStyles = _items$dropdownStyles.dropdownStyles,
-      menuStyles = _items$dropdownStyles.styles;
+      menuItems = _items$buttonColor$dr.items,
+      menuButtonColor = _items$buttonColor$dr.buttonColor,
+      menuDropdownStyles = _items$buttonColor$dr.dropdownStyles,
+      menuStyles = _items$buttonColor$dr.styles;
 
   var _useState = React.useState(new Date()),
       currentTime = _useState[0],
@@ -3107,8 +3117,8 @@ var Header = function Header(_ref) {
     var currentUser = userStore.currentUser;
     return /*#__PURE__*/React__default.createElement(Box, {
       display: "inline-block",
-      sx: headerStyles.avatar
-    }, currentUser && currentUser.name);
+      sx: headerStyles.userInfo
+    }, currentUser && "(" + currentUser.name + ")");
   };
 
   var renderNav = function renderNav() {
@@ -3132,17 +3142,12 @@ var Header = function Header(_ref) {
     return /*#__PURE__*/React__default.createElement(Box, {
       display: "flex",
       sx: headerStyles.user
-    }, currentUser ? /*#__PURE__*/React__default.createElement(Box, {
-      display: "flex",
-      alignItems: "center",
-      sx: headerStyles.userInfo
-    }, showCompanyLogo && renderUserCompanyLogo(), renderUserAvatar(), /*#__PURE__*/React__default.createElement(Button, {
+    }, currentUser ? /*#__PURE__*/React__default.createElement(Button, {
       id: "logout-button",
       onClick: handleLogout,
-      endIcon: /*#__PURE__*/React__default.createElement(ExitToAppIcon, null),
       sx: _extends$1({}, headerStyles.button, headerStyles.logoutButton),
       "data-testid": "ac-sdk-header-logout-button"
-    }, languageStore.translations.headerLogoutButton)) : /*#__PURE__*/React__default.createElement(Button, {
+    }, languageStore.translations.headerLogoutButton, showCompanyLogo && renderUserCompanyLogo(), renderUserAvatar()) : /*#__PURE__*/React__default.createElement(Button, {
       id: "login-button",
       onClick: function onClick() {
         return navigate("/login");
@@ -3188,15 +3193,21 @@ var Header = function Header(_ref) {
   return /*#__PURE__*/React__default.createElement(AppBar, {
     position: position,
     elevation: 0,
-    sx: headerStyles.root,
+    sx: _extends$1({}, position === "static" ? {
+      marginTop: "-60px"
+    } : {}, headerStyles.root),
     "data-testid": dataTestID || "ac-sdk-header"
   }, /*#__PURE__*/React__default.createElement(Toolbar, {
     variant: "dense"
-  }, showAcLogo && /*#__PURE__*/React__default.createElement("a", {
-    href: "/"
+  }, showAcLogo && /*#__PURE__*/React__default.createElement(reactRouterDom.Link, {
+    to: "/"
   }, /*#__PURE__*/React__default.createElement("img", {
-    src: "//static.andoncloud.com/shared/logo-white.svg",
-    alt: "AndonCloud"
+    src: acLogo,
+    alt: "AndonCloud",
+    style: {
+      display: "block",
+      marginLeft: "-4px"
+    }
   })), /*#__PURE__*/React__default.createElement(Typography, {
     variant: "subtitle1"
   }, leadingText), /*#__PURE__*/React__default.createElement(Typography, {
@@ -3242,17 +3253,41 @@ Header.defaultProps = {
 };
 var Header$1 = mobxReactLite.observer(Header);
 
+var baseStyles = {
+  root: {
+    height: "100vh",
+    paddingTop: "60px",
+    mixBlendMode: "color",
+    background: "#1E1E1E"
+  },
+  overlay: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    zIndex: -1,
+    background: "repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1) 12px, transparent 12px, transparent 24px);"
+  }
+};
+
 var Container = function Container(_ref) {
   var children = _ref.children,
       headerProps = _ref.headerProps,
       styles = _ref.styles,
       dataTestID = _ref["data-testid"];
-  return /*#__PURE__*/React__default.createElement(Box, {
-    display: "flex",
-    flexDirection: "column",
-    sx: styles,
+  return /*#__PURE__*/React__default.createElement(BaseContainer, {
+    maxWidth: false,
+    disableGutters: true,
+    sx: _extends$1({}, baseStyles.root, {
+      styles: styles
+    }),
     "data-testid": dataTestID || "ac-sdk-container"
-  }, /*#__PURE__*/React__default.createElement(Header$1, headerProps), children);
+  }, /*#__PURE__*/React__default.createElement(Header$1, _extends$1({
+    showAcLogo: true
+  }, headerProps)), children, /*#__PURE__*/React__default.createElement(material.Box, {
+    sx: baseStyles.overlay
+  }));
 };
 
 Container.propTypes = {
@@ -3326,16 +3361,10 @@ var LoginPage = function LoginPage(_ref) {
     }
   }, /*#__PURE__*/React__default.createElement(Box, {
     display: "flex",
-    height: "calc(100vh - 48px)",
+    height: "100%",
     alignItems: "center",
-    justifyContent: "center",
-    position: "relative"
-  }, /*#__PURE__*/React__default.createElement(FullscreenBackdrop, null), /*#__PURE__*/React__default.createElement(Card, {
-    style: {
-      zIndex: 1,
-      backgroundColor: "inherit"
-    }
-  }, /*#__PURE__*/React__default.createElement(CardContent, null, /*#__PURE__*/React__default.createElement(LoginForm$1, {
+    justifyContent: "center"
+  }, /*#__PURE__*/React__default.createElement(Card, null, /*#__PURE__*/React__default.createElement(CardContent, null, /*#__PURE__*/React__default.createElement(LoginForm$1, {
     title: languageStore.translations.loginFormText,
     redirectPath: redirectPath
   })))));