@laerdal/life-react-components 1.4.1-dev.2 → 1.4.1-dev.3

package/dist/umd/GlobalNavigationBar/UserMenu/MenuLink.js

@@ -0,0 +1,167 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "react-router-dom", "../../styles", "../../icons/systemicons/SystemIcons", "../../styles/typography"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("react-router-dom"), require("../../styles"), require("../../icons/systemicons/SystemIcons"), require("../../styles/typography"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.reactRouterDom, global.styles, global.SystemIcons, global.typography);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _reactRouterDom, _styles, _SystemIcons, _typography) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const LinkStyles = _styledComponents.css`
+  border: none;
+  background: transparent;
+  padding: 16px 25px;
+
+  text-decoration: none;
+  text-align: left;
+  align-items: center;
+  display: flex;
+
+  ${(0, _typography.ComponentMStyling)(_styles.ComponentTextStyle.Regular, _styles.COLORS.neutral_600)}
+  svg {
+    margin-right: 15px;
+    color: ${_styles.COLORS.neutral_600};
+  }
+`;
+  const InternalLink = (0, _styledComponents2.default)(_reactRouterDom.NavLink)`
+  ${LinkStyles};
+`;
+  const ExternalLink = _styledComponents2.default.a`
+  ${LinkStyles};
+`;
+  const IconsRightSide = _styledComponents2.default.div`
+  margin: 0 0 0 auto;
+  align-items: center;
+  svg {
+    margin-right: 0;
+  }
+`;
+
+  const MenuLink = ({
+    to,
+    isExternal,
+    menuText,
+    Icon,
+    notification,
+    extendedMenu,
+    onClick
+  }) => {
+    const getRightSide = () => /*#__PURE__*/React.createElement(IconsRightSide, null, notification ? /*#__PURE__*/React.createElement(_SystemIcons.Bullet, {
+      size: "24px",
+      color: _styles.COLORS.critical_500
+    }) : null, extendedMenu ? /*#__PURE__*/React.createElement(_SystemIcons.ChevronRight, {
+      size: "24px",
+      color: _styles.COLORS.neutral_600
+    }) : null);
+
+    return /*#__PURE__*/React.createElement("li", null, isExternal ? /*#__PURE__*/React.createElement(ExternalLink, {
+      key: `ExternalLink_${to}`,
+      href: to,
+      role: "menuitem",
+      className: "UserMenuLink",
+      onClick: () => {
+        if (onClick) {
+          onClick();
+        }
+      }
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
+      size: "24px"
+    }), /*#__PURE__*/React.createElement("span", null, menuText), getRightSide()) : /*#__PURE__*/React.createElement(InternalLink, {
+      key: `InternalLink_${to}`,
+      to: to,
+      role: "menuitem",
+      className: "UserMenuLink",
+      onClick: () => {
+        if (onClick) {
+          onClick();
+        }
+      }
+    }, Icon && /*#__PURE__*/React.createElement(Icon, {
+      size: "24px"
+    }), /*#__PURE__*/React.createElement("span", null, menuText), getRightSide()));
+  };
+
+  MenuLink.propTypes = {
+    to: _propTypes2.default.string.isRequired,
+    menuText: _propTypes2.default.string.isRequired,
+    isExternal: _propTypes2.default.bool,
+    Icon: _propTypes2.default.any,
+    notification: _propTypes2.default.bool,
+    extendedMenu: _propTypes2.default.bool,
+    onClick: _propTypes2.default.func
+  };
+  exports.default = MenuLink;
+});
+//# sourceMappingURL=MenuLink.js.map

package/dist/umd/GlobalNavigationBar/UserMenu/MenuLink.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MenuLink.tsx"],"names":["LinkStyles","css","ComponentMStyling","ComponentTextStyle","COLORS","neutral_600","InternalLink","styled","ExternalLink","a","IconsRightSide","div","to","menuText","isExternal","Icon","notification","extendedMenu","onClick","MenuLink","getRightSide","critical_500"],"mappings":";;;;;;;;;;;;;;;;;;;;;MAAA,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAOA,QAAMA,UAAU,GAAGC,qBAAI;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,mCAAkBC,2BAAD,OAAjBD,EAA8CE,eAA7B,WAAjBF,CAAkE;AACtE;AACA;AACA,aAAaE,eAAOC,WAAY;AAChC;AAdA,CAAA;AAiBA,QAAMC,YAAY,GAAGC,gCAAM,uBAANA,CAAgB;AACrC,IAAIP,UAAW;AADf,CAAA;AAIA,QAAMQ,YAAY,GAAGD,2BAAOE,CAAE;AAC9B,IAAIT,UAAW;AADf,CAAA;AAIA,QAAMU,cAAc,GAAGH,2BAAOI,GAAI;AAClC;AACA;AACA;AACA;AACA;AALA,CAAA;;AAkBA,QAAMQ,QAAQ,GAAG,CAAC;AAAA,IAAA,EAAA;AAAA,IAAA,UAAA;AAAA,IAAA,QAAA;AAAA,IAAA,IAAA;AAAA,IAAA,YAAA;AAAA,IAAA,YAAA;AAA8DD,IAAAA;AAA9D,GAAD,KAA4F;AAC3G,UAAME,YAAY,GAAG,MAAA,aACnB,KAAA,CAAA,aAAA,CAAA,cAAA,EAAA,IAAA,EACGJ,YAAY,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAQ,MAAA,IAAI,EAAZ,MAAA;AAAoB,MAAA,KAAK,EAAEZ,eAAOiB;AAAlC,KAAA,CAAH,GADf,IAAA,EAEGJ,YAAY,GAAA,aAAG,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAc,MAAA,IAAI,EAAlB,MAAA;AAA0B,MAAA,KAAK,EAAEb,eAAOC;AAAxC,KAAA,CAAH,GAHjB,IACE,CADF;;AAMA,WAAA,aACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAA,EACGS,UAAU,GAAA,aACT,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AACE,MAAA,GAAG,EAAG,gBAAeF,EADvB,EAAA;AAEE,MAAA,IAAI,EAFN,EAAA;AAGE,MAAA,IAAI,EAHN,UAAA;AAIE,MAAA,SAAS,EAJX,cAAA;AAKE,MAAA,OAAO,EAAE,MAAM;AACb,YAAA,OAAA,EAAa;AACXM,UAAAA,OAAO;AACR;AACF;AATH,KAAA,EAUGH,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,IAAI,EAAC;AAAX,KAAA,CAVX,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAXF,QAWE,CAXF,EAYGK,YAbM,EACT,CADS,GAAA,aAgBT,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AACE,MAAA,GAAG,EAAG,gBAAeR,EADvB,EAAA;AAEE,MAAA,EAAE,EAFJ,EAAA;AAGE,MAAA,IAAI,EAHN,UAAA;AAIE,MAAA,SAAS,EAJX,cAAA;AAKE,MAAA,OAAO,EAAE,MAAM;AACb,YAAA,OAAA,EAAa;AACXM,UAAAA,OAAO;AACR;AACF;AATH,KAAA,EAUGH,IAAI,IAAA,aAAI,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAM,MAAA,IAAI,EAAC;AAAX,KAAA,CAVX,EAAA,aAWE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAXF,QAWE,CAXF,EAYGK,YA9BT,EAkBM,CAjBJ,CADF;AAPF,GAAA;;;AATER,IAAAA,E;AACAC,IAAAA,Q;AACAC,IAAAA,U;AACAC,IAAAA,I;AACAC,IAAAA,Y;AACAC,IAAAA,Y;AACAC,IAAAA,O;;oBA+CF,Q","sourcesContent":["import * as React from 'react';\nimport styled, {css} from 'styled-components';\nimport {NavLink} from 'react-router-dom';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport {Bullet, ChevronRight} from '../../icons/systemicons/SystemIcons';\nimport {ComponentMStyling} from '../../styles/typography';\n\nconst LinkStyles = css`\n  border: none;\n  background: transparent;\n  padding: 16px 25px;\n\n  text-decoration: none;\n  text-align: left;\n  align-items: center;\n  display: flex;\n\n  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n  svg {\n    margin-right: 15px;\n    color: ${COLORS.neutral_600};\n  }\n`;\n\nconst InternalLink = styled(NavLink)`\n  ${LinkStyles};\n`;\n\nconst ExternalLink = styled.a`\n  ${LinkStyles};\n`;\n\nconst IconsRightSide = styled.div`\n  margin: 0 0 0 auto;\n  align-items: center;\n  svg {\n    margin-right: 0;\n  }\n`;\n\ninterface MenuLinkProps {\n  to: string;\n  menuText: string;\n  isExternal?: boolean;\n  Icon?: any;\n  notification?: boolean;\n  extendedMenu?: boolean;\n  onClick?: () => void;\n}\n\nconst MenuLink = ({ to, isExternal, menuText, Icon, notification, extendedMenu, onClick }: MenuLinkProps) => {\n  const getRightSide = () => (\n    <IconsRightSide>\n      {notification ? <Bullet size=\"24px\" color={COLORS.critical_500} /> : null}\n      {extendedMenu ? <ChevronRight size=\"24px\" color={COLORS.neutral_600} /> : null}\n    </IconsRightSide>\n  );\n  return (\n    <li>\n      {isExternal ? (\n        <ExternalLink\n          key={`ExternalLink_${to}`}\n          href={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </ExternalLink>\n      ) : (\n        <InternalLink\n          key={`InternalLink_${to}`}\n          to={to}\n          role=\"menuitem\"\n          className=\"UserMenuLink\"\n          onClick={() => {\n            if (onClick) {\n              onClick();\n            }\n          }}>\n          {Icon && <Icon size=\"24px\" />}\n          <span>{menuText}</span>\n          {getRightSide()}\n        </InternalLink>\n      )}\n    </li>\n  );\n};\n\nexport default MenuLink;\n"],"file":"MenuLink.js"}

package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js

@@ -0,0 +1,271 @@
+(function (global, factory) {
+  if (typeof define === "function" && define.amd) {
+    define(["exports", "prop-types", "react", "styled-components", "../../styles", "./MenuLink", "../../Button", "../../icons/systemicons/SystemIcons", "../mobile/CommonStyles", "../../styles/typography", "../../styles/z-indexes"], factory);
+  } else if (typeof exports !== "undefined") {
+    factory(exports, require("prop-types"), require("react"), require("styled-components"), require("../../styles"), require("./MenuLink"), require("../../Button"), require("../../icons/systemicons/SystemIcons"), require("../mobile/CommonStyles"), require("../../styles/typography"), require("../../styles/z-indexes"));
+  } else {
+    var mod = {
+      exports: {}
+    };
+    factory(mod.exports, global.propTypes, global.react, global.styledComponents, global.styles, global.MenuLink, global.Button, global.SystemIcons, global.CommonStyles, global.typography, global.zIndexes);
+    global.undefined = mod.exports;
+  }
+})(this, function (exports, _propTypes, _react, _styledComponents, _styles, _MenuLink, _Button, _SystemIcons, _CommonStyles, _typography, _zIndexes) {
+  "use strict";
+
+  Object.defineProperty(exports, "__esModule", {
+    value: true
+  });
+
+  var _propTypes2 = _interopRequireDefault(_propTypes);
+
+  var React = _interopRequireWildcard(_react);
+
+  var _styledComponents2 = _interopRequireDefault(_styledComponents);
+
+  var _MenuLink2 = _interopRequireDefault(_MenuLink);
+
+  function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function (nodeInterop) {
+      return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+  }
+
+  function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+      return obj;
+    }
+
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+      return {
+        default: obj
+      };
+    }
+
+    var cache = _getRequireWildcardCache(nodeInterop);
+
+    if (cache && cache.has(obj)) {
+      return cache.get(obj);
+    }
+
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+
+    for (var key in obj) {
+      if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+        var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+
+        if (desc && (desc.get || desc.set)) {
+          Object.defineProperty(newObj, key, desc);
+        } else {
+          newObj[key] = obj[key];
+        }
+      }
+    }
+
+    newObj.default = obj;
+
+    if (cache) {
+      cache.set(obj, newObj);
+    }
+
+    return newObj;
+  }
+
+  function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+      default: obj
+    };
+  }
+
+  const Menu = _styledComponents2.default.ul`
+  list-style: none;
+  margin: 0;
+  background-color: ${_styles.COLORS.white};
+  box-sizing: border-box;
+  display: none;
+  -webkit-animation: ${_CommonStyles.flowDown} 0.2s ease-in-out;
+  animation: ${_CommonStyles.flowDown} 0.2s ease-in-out;
+  position: absolute;
+  border-radius: 4px;
+  z-index: ${_zIndexes.Z_INDEXES.fixed_menu};
+  height: 100%;
+  width: 320px;
+  padding-inline-start: 0;
+  overflow-y: scroll;
+  ${_styles.BREAKPOINTS.SMALL} {
+    min-width: 360px;
+  }
+
+  .open & {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .signOutButton {
+    height: 40px !important;
+    width: 288px !important;
+
+    ${_styles.BREAKPOINTS.SMALL} {
+      width: 328px !important;
+    }
+  }
+
+  ${_styles.scrollBarStyling};
+`;
+  const MenuSection = _styledComponents2.default.li`
+  padding: 8px 0;
+  position: relative;
+
+  .disabled-link {
+    color: #21212150;
+    pointer-events: none;
+    key-events: none;
+  }
+`;
+  const MenuSectionList = _styledComponents2.default.ul`
+  list-style: none;
+  margin: 0;
+  overflow-y: unset !important;
+  padding-inline-start: 0;
+  ${_CommonStyles.UserMenuSectionListStyling};
+`;
+  const Top = _styledComponents2.default.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 22px 12px 0 12px;
+  color: ${_styles.COLORS.neutral_600};
+
+  h3 {
+    margin-block-start: 0 !important;
+    margin-block-end: 0 !important;
+    margin-inline-start: 0;
+    margin-inline-end: 0;
+    margin-left: 24px;
+
+    ${(0, _typography.ComponentSStyling)(_styles.ComponentTextStyle.Regular, 'inherit')}
+  }
+`;
+  const LabelLine = _styledComponents2.default.span`
+  height: 32px;
+  background-color: ${_styles.COLORS.neutral_20};
+  padding-left: 24px;
+  display: flex;
+  line-height: 32px;
+`;
+  const StyledMenulink = (0, _styledComponents2.default)(_MenuLink2.default)`
+  width: 100%;
+  height: 48px;
+  margin: 0;
+  
+  & a {
+    height: 100%;
+  }
+`;
+
+  const MobileUserMenu = ({
+    accountMenuHeader,
+    firstName,
+    lastName,
+    email,
+    organizationName,
+    clickMenuAction,
+    accountSection,
+    organizationSection,
+    supportSection,
+    signOut,
+    signOutLabel
+  }) => {
+    React.useEffect(() => {
+      function handleKeyPress(e) {
+        if (e.keyCode === 27) {
+          clickMenuAction();
+        }
+      }
+
+      document.addEventListener('keydown', handleKeyPress, false);
+      return () => {
+        document.removeEventListener('keydown', handleKeyPress, false);
+      };
+    }, [clickMenuAction]);
+    return /*#__PURE__*/React.createElement(Menu, {
+      onClick: () => {},
+      role: "menu",
+      "aria-labelledby": "UserMenuButton"
+    }, /*#__PURE__*/React.createElement(Top, {
+      key: "MobileUserMenuTopSection"
+    }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: clickMenuAction,
+      isInMobileMenu: true
+    }, /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineLeft, {
+      size: "24px",
+      color: _styles.COLORS.neutral_600
+    })), /*#__PURE__*/React.createElement("h3", null, accountMenuHeader), /*#__PURE__*/React.createElement(_CommonStyles.Right, null, /*#__PURE__*/React.createElement(_Button.IconButton, {
+      variant: "secondary",
+      shape: "circular",
+      action: clickMenuAction,
+      isInMobileMenu: true
+    }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {
+      size: "24px"
+    })))), accountSection && accountSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
+      key: "MobileAccountSection"
+    }, /*#__PURE__*/React.createElement(LabelLine, {
+      "data-hj-suppress": true
+    }, `${firstName} ${lastName}`), /*#__PURE__*/React.createElement(MenuSectionList, null, accountSection?.map(element => /*#__PURE__*/React.createElement(StyledMenulink, {
+      key: element?.to,
+      to: element?.to,
+      menuText: element?.label
+    })))), organizationSection && organizationSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
+      key: "MObileOrganizationSection"
+    }, /*#__PURE__*/React.createElement(LabelLine, null, organizationName || ''), /*#__PURE__*/React.createElement(MenuSectionList, null, organizationSection?.map(element => /*#__PURE__*/React.createElement(StyledMenulink, {
+      key: element?.to,
+      to: element?.to,
+      menuText: element?.label
+    })))), supportSection && supportSection?.length > 0 && /*#__PURE__*/React.createElement(MenuSection, {
+      key: "MobileSupportSection"
+    }, /*#__PURE__*/React.createElement(LabelLine, null, ''), /*#__PURE__*/React.createElement(MenuSectionList, null, supportSection?.map(element => /*#__PURE__*/React.createElement(StyledMenulink, {
+      key: element?.to,
+      isExternal: element.isExternal,
+      to: element?.to,
+      menuText: element?.label
+    })))), signOut && /*#__PURE__*/React.createElement("div", {
+      key: "SignoutButton",
+      style: {
+        display: 'flex',
+        margin: 'auto 0 12px 0'
+      }
+    }, /*#__PURE__*/React.createElement(_Button.Button, {
+      style: {
+        width: '90%',
+        margin: '0 auto'
+      },
+      variant: "secondary",
+      onClick: e => {
+        e.preventDefault();
+        signOut(e);
+      }
+    }, signOutLabel)));
+  };
+
+  MobileUserMenu.propTypes = {
+    accountMenuHeader: _propTypes2.default.string.isRequired,
+    firstName: _propTypes2.default.string.isRequired,
+    lastName: _propTypes2.default.string.isRequired,
+    email: _propTypes2.default.string.isRequired,
+    organizationName: _propTypes2.default.string.isRequired,
+    clickMenuAction: _propTypes2.default.func.isRequired,
+    accountSection: _propTypes2.default.array,
+    organizationSection: _propTypes2.default.array,
+    supportSection: _propTypes2.default.array,
+    signOut: _propTypes2.default.func,
+    signOutLabel: _propTypes2.default.string
+  };
+  exports.default = MobileUserMenu;
+});
+//# sourceMappingURL=MobileUserMenu.js.map

package/dist/umd/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","Z_INDEXES","fixed_menu","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","ComponentSStyling","ComponentTextStyle","LabelLine","span","neutral_20","StyledMenulink","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","MobileUserMenu","React","e","document","element","label","display","margin","width"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentTextStyle, scrollBarStyling} from '../../styles';\n\nimport MenuLink from './MenuLink';\nimport {UserMenuItem} from '../../types';\nimport {Button, IconButton} from '../../Button';\nimport {ArrowLineLeft, Close} from '../../icons/systemicons/SystemIcons';\nimport {flowDown, Right, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentSStyling} from '../../styles/typography';\nimport {Z_INDEXES} from '../../styles/z-indexes';\n\nconst Menu = styled.ul`\n  list-style: none;\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  -webkit-animation: ${flowDown} 0.2s ease-in-out;\n  animation: ${flowDown} 0.2s ease-in-out;\n  position: absolute;\n  border-radius: 4px;\n  z-index: ${Z_INDEXES.fixed_menu};\n  height: 100%;\n  width: 320px;\n  padding-inline-start: 0;\n  overflow-y: scroll;\n  ${BREAKPOINTS.SMALL} {\n    min-width: 360px;\n  }\n\n  .open & {\n    display: flex;\n    flex-direction: column;\n  }\n\n  .signOutButton {\n    height: 40px !important;\n    width: 288px !important;\n\n    ${BREAKPOINTS.SMALL} {\n      width: 328px !important;\n    }\n  }\n\n  ${scrollBarStyling};\n`;\n\nconst MenuSection = styled.li`\n  padding: 8px 0;\n  position: relative;\n\n  .disabled-link {\n    color: #21212150;\n    pointer-events: none;\n    key-events: none;\n  }\n`;\n\nconst MenuSectionList = styled.ul`\n  list-style: none;\n  margin: 0;\n  overflow-y: unset !important;\n  padding-inline-start: 0;\n  ${UserMenuSectionListStyling};\n`;\n\nconst Top = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  padding: 22px 12px 0 12px;\n  color: ${COLORS.neutral_600};\n\n  h3 {\n    margin-block-start: 0 !important;\n    margin-block-end: 0 !important;\n    margin-inline-start: 0;\n    margin-inline-end: 0;\n    margin-left: 24px;\n\n    ${ComponentSStyling(ComponentTextStyle.Regular, 'inherit')}\n  }\n`;\n\nconst LabelLine = styled.span`\n  height: 32px;\n  background-color: ${COLORS.neutral_20};\n  padding-left: 24px;\n  display: flex;\n  line-height: 32px;\n`;\n\nconst StyledMenulink = styled(MenuLink)`\n  width: 100%;\n  height: 48px;\n  margin: 0;\n  \n  & a {\n    height: 100%;\n  }\n`;\n\ninterface Props {\n  accountMenuHeader: string;\n  firstName: string;\n  lastName: string;\n  email: string;\n  organizationName: string;\n  clickMenuAction: () => void;\n  accountSection?: UserMenuItem[];\n  organizationSection?: UserMenuItem[];\n  supportSection?: UserMenuItem[];\n  signOut?: (e: any) => void;\n  signOutLabel?: string;\n}\n\nconst MobileUserMenu = ({\n  accountMenuHeader,\n  firstName,\n  lastName,\n  email,\n  organizationName,\n  clickMenuAction,\n  accountSection,\n  organizationSection,\n  supportSection,\n  signOut,\n  signOutLabel,\n}: Props) => {\n  React.useEffect(() => {\n    function handleKeyPress(e: any) {\n      if (e.keyCode === 27) {\n        clickMenuAction();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [clickMenuAction]);\n\n  return (\n    <Menu onClick={() => {}} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n      <Top key=\"MobileUserMenuTopSection\">\n        <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{accountMenuHeader}</h3>\n        <Right>\n          <IconButton variant=\"secondary\" shape=\"circular\" action={clickMenuAction} isInMobileMenu={true}>\n            <Close size=\"24px\" />\n          </IconButton>\n        </Right>\n      </Top>\n      {accountSection && accountSection?.length > 0 && (\n        <MenuSection key=\"MobileAccountSection\">\n          <LabelLine data-hj-suppress>{`${firstName} ${lastName}`}</LabelLine>\n          <MenuSectionList>\n            {accountSection?.map((element) => (\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n      {organizationSection && organizationSection?.length > 0 && (\n        <MenuSection key=\"MObileOrganizationSection\">\n          <LabelLine>{organizationName || ''}</LabelLine>\n          <MenuSectionList>\n            {organizationSection?.map((element) => (\n              <StyledMenulink key={element?.to} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n\n      {supportSection && supportSection?.length > 0 && (\n        <MenuSection key=\"MobileSupportSection\">\n          <LabelLine>{''}</LabelLine>\n          <MenuSectionList>\n            {supportSection?.map((element) => (\n              <StyledMenulink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} />\n            ))}\n          </MenuSectionList>\n        </MenuSection>\n      )}\n      {signOut && (\n        <div key=\"SignoutButton\" style={{ display: 'flex', margin: 'auto 0 12px 0' }}>\n          <Button\n            style={{ width: '90%', margin: '0 auto' }}\n            variant=\"secondary\"\n            onClick={(e) => {\n              e.preventDefault();\n              signOut(e);\n            }}>\n            {signOutLabel}\n          </Button>\n        </div>\n      )}\n    </Menu>\n  );\n};\n\nexport default MobileUserMenu;\n"],"file":"MobileUserMenu.js"}