@laerdal/life-react-components 2.1.0-dev.3 → 2.1.0-dev.7

package/dist/GlobalNavigationBar/desktop/UserMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UserMenu.cjs","names":["UserMenuScrollContainer","styled","div","UserMenuPinnedContainer","UserMenuWrapper","COLORS","white","Z_INDEXES","off_canvas","Breakpoints","MEDIUM","flowDown","BOXSHADOWS","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","ComponentSStyling","ComponentTextStyle","Bold","neutral_500","MenuSectionList","UserMenuSectionListStyling","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","ComponentLStyling","neutral_600","UserSectionInfoEmail","ComponentXSStyling","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","useNavigationHelper","navigate","isActiveRoute","React","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Size","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n  BOXSHADOWS,\n  COLORS,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n  flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  flex-flow: column;\n\n\n  ${Breakpoints.MEDIUM} {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ${flowDown} 0.2s ease-in-out;\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n    border-radius: 8px;\n    border: 1px solid ${COLORS.neutral_200};\n    z-index: ${Z_INDEXES.fixed_menu};\n    padding: 24px 0;\n  }\n`;\n\n\nconst MenuSection = styled.div`\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n  align-items: center;\n  justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n  pointer-events: none;\n\n  button {\n    padding: 0 !important;\n  }\n\n  button > div {\n    width: 48px !important;\n    height: 48px !important;\n    border-radius: 50% !important;\n  }\n`;\n\nconst UserSectionInfo = styled.div`\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n  word-break: break-all;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst UserSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n  show?: boolean;\n  onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  React.useEffect(() => {\n    if (!onHideUserMenu) return;\n\n    function handleKeyPress(e: any) {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        onHideUserMenu();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [onHideUserMenu]);\n\n  const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n    <MenuItem key={index}\n              id={`profile_${index}`}\n              active={!item.external && isActiveRoute(item.to, !!item.exact)}\n              item={{\n                value: item.to,\n                disabled: item.disabled,\n                icon: item.icon,\n                displayLabel: item.label,\n              }}\n              onClickHandler={(e) => {\n                item.action && item.action(e);\n                navigate(item.to, !!item.external);\n              }}/>\n\n  return (\n    <UserMenuWrapper onClick={onHideUserMenu}\n                     className={show ? 'show' : ''}\n                     role=\"menu\"\n                     aria-labelledby=\"UserMenuButton\">\n      <UserMenuScrollContainer>\n        <UserSection>\n          <UserSectionAvatar>\n            <ProfileButton onClick={() => {\n            }}\n                           tabIndex={-1}\n                           initials={user.firstName[0] + user.lastName[0]}/>\n          </UserSectionAvatar>\n          <UserSectionInfo>\n            <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n            <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n            {\n              user.link &&\n              <HyperLink variant={'default'}\n                         href={user.link.href}\n                         target={user.link.target}\n                         id={user.link.id}\n                         onClick={user.link.onClick}>\n                <UserSectionInfoLink>\n                  <span>\n                    {user.link.label}\n                  </span>\n                  {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n                </UserSectionInfoLink>\n              </HyperLink>\n            }\n          </UserSectionInfo>\n        </UserSection>\n        {\n          sections.filter(a => !a.pinned).map((section, index) =>\n            <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n              <MenuSectionList key={index}>\n                {section.items.map((item, index) => renderItem(item, section, index))}\n              </MenuSectionList>\n            </MenuSection>\n          )\n        }\n      </UserMenuScrollContainer>\n      <UserMenuPinnedContainer>\n        {\n          sections.filter(a => !!a.pinned).map((section, index) =>\n            <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n              <MenuSectionList key={index}>\n                {section.items.map((item, index) => renderItem(item, section, index))}\n              </MenuSectionList>\n            </MenuSection>\n          )\n        }\n        {\n          signOut &&\n          <SignOutActionWrapper>\n            <Button width={'272px'}\n                    variant=\"secondary\"\n                    icon={<SystemIcons.Logout/>}\n                    size={Size.Large}\n                    onClick={e => {\n                      e.preventDefault();\n                      signOut?.action();\n                    }}>\n              {signOut?.label}\n            </Button>\n          </SignOutActionWrapper>\n        }\n      </UserMenuPinnedContainer>\n    </UserMenuWrapper>\n  );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}
+{"version":3,"file":"UserMenu.cjs","names":["UserMenuScrollContainer","styled","div","UserMenuPinnedContainer","UserMenuWrapper","COLORS","white","Z_INDEXES","off_canvas","Breakpoints","MEDIUM","flowDown","BOXSHADOWS","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","ComponentSStyling","ComponentTextStyle","Bold","neutral_500","MenuSectionList","UserMenuSectionListStyling","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","ComponentLStyling","neutral_600","UserSectionInfoEmail","ComponentXSStyling","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","useNavigationHelper","navigate","isActiveRoute","React","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Size","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n  BOXSHADOWS,\n  COLORS,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n  flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  flex-flow: column;\n\n\n  ${Breakpoints.MEDIUM} {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ${flowDown} 0.2s ease-in-out;\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n    border-radius: 8px;\n    border: 1px solid ${COLORS.neutral_200};\n    z-index: ${Z_INDEXES.fixed_menu};\n    padding: 24px 0;\n  }\n`;\n\n\nconst MenuSection = styled.div`\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n  align-items: center;\n  justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n  pointer-events: none;\n\n  button {\n    padding: 0 !important;\n  }\n\n  button > div {\n    width: 48px !important;\n    height: 48px !important;\n    border-radius: 50% !important;\n  }\n`;\n\nconst UserSectionInfo = styled.div`\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n  word-break: break-all;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst UserSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n  show?: boolean;\n  onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  React.useEffect(() => {\n    if (!onHideUserMenu) return;\n\n    function handleKeyPress(e: any) {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        onHideUserMenu();\n      }\n    }\n\n    document?.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document?.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [onHideUserMenu]);\n\n  const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n    <MenuItem key={index}\n              id={`profile_${index}`}\n              active={!item.external && isActiveRoute(item.to, !!item.exact)}\n              item={{\n                value: item.to,\n                disabled: item.disabled,\n                icon: item.icon,\n                displayLabel: item.label,\n              }}\n              onClickHandler={(e) => {\n                item.action && item.action(e);\n                navigate(item.to, !!item.external);\n              }}/>\n\n  return (\n    <UserMenuWrapper onClick={onHideUserMenu}\n                     className={show ? 'show' : ''}\n                     role=\"menu\"\n                     aria-labelledby=\"UserMenuButton\">\n      <UserMenuScrollContainer>\n        <UserSection>\n          <UserSectionAvatar>\n            <ProfileButton onClick={() => {\n            }}\n                           tabIndex={-1}\n                           initials={user.firstName[0] + user.lastName[0]}/>\n          </UserSectionAvatar>\n          <UserSectionInfo>\n            <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n            <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n            {\n              user.link &&\n              <HyperLink variant={'default'}\n                         href={user.link.href}\n                         target={user.link.target}\n                         id={user.link.id}\n                         onClick={user.link.onClick}>\n                <UserSectionInfoLink>\n                  <span>\n                    {user.link.label}\n                  </span>\n                  {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n                </UserSectionInfoLink>\n              </HyperLink>\n            }\n          </UserSectionInfo>\n        </UserSection>\n        {\n          sections.filter(a => !a.pinned).map((section, index) =>\n            <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n              <MenuSectionList key={index}>\n                {section.items.map((item, index) => renderItem(item, section, index))}\n              </MenuSectionList>\n            </MenuSection>\n          )\n        }\n      </UserMenuScrollContainer>\n      <UserMenuPinnedContainer>\n        {\n          sections.filter(a => !!a.pinned).map((section, index) =>\n            <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n              <MenuSectionList key={index}>\n                {section.items.map((item, index) => renderItem(item, section, index))}\n              </MenuSectionList>\n            </MenuSection>\n          )\n        }\n        {\n          signOut &&\n          <SignOutActionWrapper>\n            <Button width={'272px'}\n                    variant=\"secondary\"\n                    icon={<SystemIcons.Logout/>}\n                    size={Size.Large}\n                    onClick={e => {\n                      e.preventDefault();\n                      signOut?.action();\n                    }}>\n              {signOut?.label}\n            </Button>\n          </SignOutActionWrapper>\n        }\n      </UserMenuPinnedContainer>\n    </UserMenuWrapper>\n  );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/desktop/UserMenu.js

@@ -39,15 +39,17 @@ var UserMenu = function UserMenu(_ref) {
     navigate = _useNavigationHelper.navigate,
     isActiveRoute = _useNavigationHelper.isActiveRoute;
   React.useEffect(function () {
+    var _document;
     if (!onHideUserMenu) return;
     function handleKeyPress(e) {
       if (e.key === 'Escape' || e.key === 'Esc') {
         onHideUserMenu();
       }
     }
-    document.addEventListener('keydown', handleKeyPress, false);
+    (_document = document) === null || _document === void 0 ? void 0 : _document.addEventListener('keydown', handleKeyPress, false);
     return function () {
-      document.removeEventListener('keydown', handleKeyPress, false);
+      var _document2;
+      (_document2 = document) === null || _document2 === void 0 ? void 0 : _document2.removeEventListener('keydown', handleKeyPress, false);
     };
   }, [onHideUserMenu]);
   var renderItem = function renderItem(item, section, index) {

package/dist/GlobalNavigationBar/desktop/UserMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"UserMenu.js","names":["React","styled","Button","BOXSHADOWS","COLORS","ComponentLStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","Size","flowDown","UserMenuSectionListStyling","SystemIcons","HyperLink","Breakpoints","MenuItem","useNavigationHelper","ProfileButton","UserMenuScrollContainer","div","UserMenuPinnedContainer","UserMenuWrapper","white","off_canvas","MEDIUM","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","neutral_600","UserSectionInfoEmail","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","navigate","isActiveRoute","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n  BOXSHADOWS,\n  COLORS,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n  flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  flex-flow: column;\n\n\n  ${Breakpoints.MEDIUM} {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ${flowDown} 0.2s ease-in-out;\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n    border-radius: 8px;\n    border: 1px solid ${COLORS.neutral_200};\n    z-index: ${Z_INDEXES.fixed_menu};\n    padding: 24px 0;\n  }\n`;\n\n\nconst MenuSection = styled.div`\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n  align-items: center;\n  justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n  pointer-events: none;\n\n  button {\n    padding: 0 !important;\n  }\n\n  button > div {\n    width: 48px !important;\n    height: 48px !important;\n    border-radius: 50% !important;\n  }\n`;\n\nconst UserSectionInfo = styled.div`\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n  word-break: break-all;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst UserSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n  show?: boolean;\n  onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  React.useEffect(() => {\n    if (!onHideUserMenu) return;\n\n    function handleKeyPress(e: any) {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        onHideUserMenu();\n      }\n    }\n\n    document.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [onHideUserMenu]);\n\n  const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n    <MenuItem key={index}\n              id={`profile_${index}`}\n              active={!item.external && isActiveRoute(item.to, !!item.exact)}\n              item={{\n                value: item.to,\n                disabled: item.disabled,\n                icon: item.icon,\n                displayLabel: item.label,\n              }}\n              onClickHandler={(e) => {\n                item.action && item.action(e);\n                navigate(item.to, !!item.external);\n              }}/>\n\n  return (\n    <UserMenuWrapper onClick={onHideUserMenu}\n                     className={show ? 'show' : ''}\n                     role=\"menu\"\n                     aria-labelledby=\"UserMenuButton\">\n      <UserMenuScrollContainer>\n        <UserSection>\n          <UserSectionAvatar>\n            <ProfileButton onClick={() => {\n            }}\n                           tabIndex={-1}\n                           initials={user.firstName[0] + user.lastName[0]}/>\n          </UserSectionAvatar>\n          <UserSectionInfo>\n            <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n            <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n            {\n              user.link &&\n              <HyperLink variant={'default'}\n                         href={user.link.href}\n                         target={user.link.target}\n                         id={user.link.id}\n                         onClick={user.link.onClick}>\n                <UserSectionInfoLink>\n                  <span>\n                    {user.link.label}\n                  </span>\n                  {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n                </UserSectionInfoLink>\n              </HyperLink>\n            }\n          </UserSectionInfo>\n        </UserSection>\n        {\n          sections.filter(a => !a.pinned).map((section, index) =>\n            <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n              <MenuSectionList key={index}>\n                {section.items.map((item, index) => renderItem(item, section, index))}\n              </MenuSectionList>\n            </MenuSection>\n          )\n        }\n      </UserMenuScrollContainer>\n      <UserMenuPinnedContainer>\n        {\n          sections.filter(a => !!a.pinned).map((section, index) =>\n            <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n              <MenuSectionList key={index}>\n                {section.items.map((item, index) => renderItem(item, section, index))}\n              </MenuSectionList>\n            </MenuSection>\n          )\n        }\n        {\n          signOut &&\n          <SignOutActionWrapper>\n            <Button width={'272px'}\n                    variant=\"secondary\"\n                    icon={<SystemIcons.Logout/>}\n                    size={Size.Large}\n                    onClick={e => {\n                      e.preventDefault();\n                      signOut?.action();\n                    }}>\n              {signOut?.label}\n            </Button>\n          </SignOutActionWrapper>\n        }\n      </UserMenuPinnedContainer>\n    </UserMenuWrapper>\n  );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}
+{"version":3,"file":"UserMenu.js","names":["React","styled","Button","BOXSHADOWS","COLORS","ComponentLStyling","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","Size","flowDown","UserMenuSectionListStyling","SystemIcons","HyperLink","Breakpoints","MenuItem","useNavigationHelper","ProfileButton","UserMenuScrollContainer","div","UserMenuPinnedContainer","UserMenuWrapper","white","off_canvas","MEDIUM","BOXSHADOW_CENTERED","neutral_200","fixed_menu","MenuSection","SignOutActionWrapper","MenuSectionHeader","neutral_20","Bold","neutral_500","MenuSectionList","UserSectionAvatar","UserSectionInfo","UserSectionInfoName","neutral_600","UserSectionInfoEmail","Regular","UserSectionInfoLink","UserSection","UserMenu","show","user","onHideUserMenu","sections","signOut","label","navigate","isActiveRoute","useEffect","handleKeyPress","e","key","document","addEventListener","removeEventListener","renderItem","item","section","index","external","to","exact","value","disabled","icon","displayLabel","action","firstName","lastName","email","link","href","target","id","onClick","cloneElement","size","filter","a","pinned","map","divider","items","Large","preventDefault"],"sources":["../../../src/GlobalNavigationBar/desktop/UserMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {\n  BOXSHADOWS,\n  COLORS,\n  ComponentLStyling,\n  ComponentSStyling,\n  ComponentTextStyle,\n  ComponentXSStyling,\n  Z_INDEXES\n} from '../../styles';\nimport {Size} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {SystemIcons} from '../../icons';\nimport {HyperLink} from '../../HyperLink';\nimport {MenuNavigationItem, MenuNavigationItemTypeItem, MenuNavigationSection, ProfileMenu} from '../types';\nimport MobileMenuHeader from '../mobile/MobileMenuHeader';\nimport Breakpoints from '../../styles/breakpoints';\nimport {MenuItem} from '../../MenuItem';\nimport {useNavigationHelper} from '../../common/NavigationHelper';\nimport {ProfileButton} from '../../ProfileButton';\n\nconst UserMenuScrollContainer = styled.div`\n  flex: 1;\n`;\n\nconst UserMenuPinnedContainer = styled.div``;\n\n\nconst UserMenuWrapper = styled.div`\n  margin: 0;\n  background-color: ${COLORS.white};\n  box-sizing: border-box;\n  display: none;\n  width: 320px;\n\n  position: absolute;\n\n  &.show {\n    display: block;\n  }\n\n  top: 0;\n  right: 0;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  flex-flow: column;\n\n\n  ${Breakpoints.MEDIUM} {\n    flex-flow: initial;\n    top: initial;\n    right: initial;\n    height: initial;\n    animation: ${flowDown} 0.2s ease-in-out;\n    box-shadow: ${BOXSHADOWS.BOXSHADOW_CENTERED};\n    border-radius: 8px;\n    border: 1px solid ${COLORS.neutral_200};\n    z-index: ${Z_INDEXES.fixed_menu};\n    padding: 24px 0;\n  }\n`;\n\n\nconst MenuSection = styled.div`\n  padding: 4px 0;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n\n  &.divider {\n    border-top: 1px solid ${COLORS.neutral_200};\n  }\n`;\n\nconst SignOutActionWrapper = styled(MenuSection)`\n  align-items: center;\n  justify-content: center;\n`;\n\nconst MenuSectionHeader = styled.div`\n  display: flex;\n  align-items: center;\n  padding: 8px 24px 4px 24px;\n  box-sizing: border-box;\n  min-height: 32px;\n  background-color: ${COLORS.neutral_20};\n\n  ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_500)}\n`;\n\nconst MenuSectionList = styled.div`\n  margin: 0;\n  padding: 0;\n\n  ${UserMenuSectionListStyling};\n`;\n\n\nconst UserSectionAvatar = styled.div`\n  pointer-events: none;\n\n  button {\n    padding: 0 !important;\n  }\n\n  button > div {\n    width: 48px !important;\n    height: 48px !important;\n    border-radius: 50% !important;\n  }\n`;\n\nconst UserSectionInfo = styled.div`\n  padding: 2px 0;\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n`;\n\nconst UserSectionInfoName = styled.div`\n  ${ComponentLStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\nconst UserSectionInfoEmail = styled.div`\n  word-break: break-all;\n  ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_500)}\n`;\n\nconst UserSectionInfoLink = styled.div`\n  padding: 2px 0;\n  display: flex;\n  align-items: center;\n  gap: 4px;\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, null)}\n  svg {\n    width: 16px;\n    height: 16px;\n  }\n`;\n\nconst UserSection = styled.div`\n  display: flex;\n  flex-direction: row;\n  padding: 0 24px 8px 24px;\n  gap: 16px;\n`;\n\ninterface UserMenuProps extends ProfileMenu {\n  show?: boolean;\n  onHideUserMenu: () => void;\n}\n\nconst UserMenu = ({show, user, onHideUserMenu, sections, signOut, label}: UserMenuProps) => {\n\n  const {navigate, isActiveRoute} = useNavigationHelper();\n\n  React.useEffect(() => {\n    if (!onHideUserMenu) return;\n\n    function handleKeyPress(e: any) {\n      if (e.key === 'Escape' || e.key === 'Esc') {\n        onHideUserMenu();\n      }\n    }\n\n    document?.addEventListener('keydown', handleKeyPress, false);\n    return () => {\n      document?.removeEventListener('keydown', handleKeyPress, false);\n    };\n  }, [onHideUserMenu]);\n\n  const renderItem = (item: MenuNavigationItem, section: MenuNavigationSection, index: number) =>\n    <MenuItem key={index}\n              id={`profile_${index}`}\n              active={!item.external && isActiveRoute(item.to, !!item.exact)}\n              item={{\n                value: item.to,\n                disabled: item.disabled,\n                icon: item.icon,\n                displayLabel: item.label,\n              }}\n              onClickHandler={(e) => {\n                item.action && item.action(e);\n                navigate(item.to, !!item.external);\n              }}/>\n\n  return (\n    <UserMenuWrapper onClick={onHideUserMenu}\n                     className={show ? 'show' : ''}\n                     role=\"menu\"\n                     aria-labelledby=\"UserMenuButton\">\n      <UserMenuScrollContainer>\n        <UserSection>\n          <UserSectionAvatar>\n            <ProfileButton onClick={() => {\n            }}\n                           tabIndex={-1}\n                           initials={user.firstName[0] + user.lastName[0]}/>\n          </UserSectionAvatar>\n          <UserSectionInfo>\n            <UserSectionInfoName data-hj-suppress>{`${user.firstName} ${user.lastName}`}</UserSectionInfoName>\n            <UserSectionInfoEmail data-hj-suppress>{user.email}</UserSectionInfoEmail>\n            {\n              user.link &&\n              <HyperLink variant={'default'}\n                         href={user.link.href}\n                         target={user.link.target}\n                         id={user.link.id}\n                         onClick={user.link.onClick}>\n                <UserSectionInfoLink>\n                  <span>\n                    {user.link.label}\n                  </span>\n                  {user.link.icon && React.cloneElement(user.link.icon, {size: '16px'})}\n                </UserSectionInfoLink>\n              </HyperLink>\n            }\n          </UserSectionInfo>\n        </UserSection>\n        {\n          sections.filter(a => !a.pinned).map((section, index) =>\n            <MenuSection key={index} className={section.divider ? 'divider' : ''}>\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n              <MenuSectionList key={index}>\n                {section.items.map((item, index) => renderItem(item, section, index))}\n              </MenuSectionList>\n            </MenuSection>\n          )\n        }\n      </UserMenuScrollContainer>\n      <UserMenuPinnedContainer>\n        {\n          sections.filter(a => !!a.pinned).map((section, index) =>\n            <MenuSection key={index} className={section.divider || index === 0 ? 'divider' : ''}>\n              {section.label && <MenuSectionHeader>{section.label}</MenuSectionHeader>}\n              <MenuSectionList key={index}>\n                {section.items.map((item, index) => renderItem(item, section, index))}\n              </MenuSectionList>\n            </MenuSection>\n          )\n        }\n        {\n          signOut &&\n          <SignOutActionWrapper>\n            <Button width={'272px'}\n                    variant=\"secondary\"\n                    icon={<SystemIcons.Logout/>}\n                    size={Size.Large}\n                    onClick={e => {\n                      e.preventDefault();\n                      signOut?.action();\n                    }}>\n              {signOut?.label}\n            </Button>\n          </SignOutActionWrapper>\n        }\n      </UserMenuPinnedContainer>\n    </UserMenuWrapper>\n  );\n};\n\nexport default UserMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs

@@ -127,6 +127,9 @@ var MobileMenu = function MobileMenu(_ref) {
       }), switcher && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SwitcherLabel, {
           className: 'globalNav-toggler',
+          onClick: function onClick() {
+            return switcher.action && switcher.action() && onClose();
+          },
           children: "Switch site"
         }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
           variant: 'secondary',

package/dist/GlobalNavigationBar/mobile/MobileMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"MobileMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentXSStyling","ComponentTextStyle","Bold","neutral_600","ComponentSStyling","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","useStackState","reset","length","push","pop","peek","isMediumScreen","useMediaMatch","LARGE","replace","location","useLocation","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MobileMenu.cjs","names":["Wrapper","styled","div","Z_INDEXES","off_canvas","BREAKPOINTS","SMALL","SwitcherLabel","MobileFooter","COLORS","neutral_200","ComponentXSStyling","ComponentTextStyle","Bold","neutral_600","ComponentSStyling","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","useStackState","reset","length","push","pop","peek","isMediumScreen","useMediaMatch","LARGE","replace","location","useLocation","onSubMenuOpen","menu","type","content","customContent","custom","React","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'} onClick={() => switcher.action && switcher.action() && onClose()}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AAgBA;AACA;AACA;AACA;AAAoC;AAAA;AAAA;AAAA;AAEpC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,qQAEbC,iBAAS,CAACC,UAAU,EAQ7BC,mBAAW,CAACC,KAAK,CAGpB;AAED,IAAMC,aAAa,GAAGN,yBAAM,CAACC,GAAG,6GAE/B;AAED,IAAMM,YAAY,GAAGP,yBAAM,CAACC,GAAG,+TAOLO,cAAM,CAACC,WAAW,EAExC,IAAAC,0BAAkB,EAACC,0BAAkB,CAACC,IAAI,EAAEJ,cAAM,CAACK,WAAW,CAAC,EAC/DT,mBAAW,CAACC,KAAK,EAGf,IAAAS,yBAAiB,EAACH,0BAAkB,CAACC,IAAI,EAAEJ,cAAM,CAACK,WAAW,CAAC,CAEnE;AAED,IAAME,aAAa,GAAGf,yBAAM,CAACC,GAAG,2MAO/B;AAuBD,IAAMe,UAAU,GAAG,SAAbA,UAAU,OAUiB;EAAA;EAAA,IATXC,IAAI,QAAJA,IAAI;IACJC,OAAO,QAAPA,OAAO;IACPC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,KAAK,QAALA,KAAK;IACLC,MAAM,QAANA,MAAM;IACNC,MAAM,QAANA,MAAM;IACNC,OAAO,QAAPA,OAAO;EAG3B,qBAAyC,IAAAC,yBAAa,GAAa;IAA5DC,KAAK,kBAALA,KAAK;IAAEC,MAAM,kBAANA,MAAM;IAAEC,IAAI,kBAAJA,IAAI;IAAEC,GAAG,kBAAHA,GAAG;IAAEC,IAAI,kBAAJA,IAAI;EAErC,IAAMC,cAAc,GAAG,IAAAC,oBAAa,EAAC7B,mBAAW,CAAC8B,KAAK,CAACC,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC;EAE9E,IAAMC,QAAQ,GAAG,IAAAC,2BAAW,GAAE;EAE9B,IAAMC,aAAa,GAAG,SAAhBA,aAAa,CAAIC,IAAgE,EAAK;IAE1F,QAAQA,IAAI,aAAJA,IAAI,uBAAJA,IAAI,CAAEC,IAAI;MAChB,KAAK,OAAO;QACVX,IAAI,CAAC;UACHR,MAAM,EAAE;YACND,KAAK,EAAEmB,IAAI,CAACnB,KAAK;YACjBD,OAAO,EAAEoB,IAAI,CAACpB;UAChB,CAAC;UACDsB,OAAO,EAAE;YACPpB,MAAM,EAAEkB,IAAI,CAAClB,MAAM;YACnBC,KAAK,EAAEiB,IAAI,CAACjB,KAAK;YACjBC,MAAM,EAAEgB,IAAI,CAAChB,MAAM;YACnBC,MAAM,EAAEe,IAAI,CAACf;UACf,CAAC;UACDD,MAAM,EAAE;QACV,CAAC,CAAC;QACF;MACF,KAAK,QAAQ;QACXM,IAAI,CAAC;UACHR,MAAM,EAAE;YACND,KAAK,EAAEmB,IAAI,CAACnB,KAAK;YACjBD,OAAO,EAAEoB,IAAI,CAACpB;UAChB,CAAC;UACDuB,aAAa,EAAEH,IAAI,CAACI,MAAM;UAC1BpB,MAAM,EAAE;QACV,CAAC,CAAC;QACF;MACF;QACE;IAAM;EAGZ,CAAC;EAEDqB,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBpB,OAAO,EAAE;EACX,CAAC,EAAE,CAACW,QAAQ,CAAC,CAAC;EAEdQ,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBb,cAAc,IAAIP,OAAO,EAAE;EAC7B,CAAC,EAAE,CAACO,cAAc,CAAC,CAAC;EAEpBY,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBC,UAAU,CAAC,YAAM;MACfnB,KAAK,CAAC;QACJJ,MAAM,EAAE,IAAI;QACZF,MAAM,EAAE;UACND,KAAK,EAAEA,KAAK;UACZD,OAAO,EAAEA;QACX,CAAC;QACDsB,OAAO,EAAE;UACPpB,MAAM,EAAEA,MAAM;UACdC,KAAK,EAAEA,KAAK;UACZC,MAAM,EAAEA,MAAM;UACdC,MAAM,EAAEA;QACV;MACF,CAAC,CAAC;IACJ,CAAC,EAAE,GAAG,CAAC;EACT,CAAC,EAAE,CAACP,IAAI,CAAC,CAAC;EAGV,IAAM8B,OAAO,GAAGhB,IAAI,EAAE;EAEtB,IAAMiB,QAAQ,GAAGD,OAAO,aAAPA,OAAO,0CAAPA,OAAO,CAAE1B,MAAM,6EAAf,gBAAiBF,OAAO,0DAAxB,sBAA0B8B,IAAI,CAAC,UAAAC,CAAC;IAAA,OAAIA,CAAC,CAACV,IAAI,KAAK,UAAU;EAAA,EAAuB;EAEjG,oBACE,sBAAC,OAAO;IAAA,wBACN,qBAAC,yBAAgB;MAAC,OAAO,EAAEO,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE1B,MAAM,CAACF,OAAQ;MACjC,QAAQ,EAAES,MAAM,GAAG,CAAC,GAAGE,GAAG,GAAGqB,SAAU;MACvC,aAAa,EAAEb,aAAc;MAC7B,OAAO,EAAEpB,OAAQ;MACjB,KAAK,EAAE6B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAE1B,MAAM,CAACD,KAAM;MAC7B,OAAO,EAAEK;IAAQ,EAAE,EACpC,CAAAsB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEL,aAAa,kBAAI,qBAAC,aAAa;MAAA,UAAEK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEL,aAAa;IAAE,EAAiB,EACnF,CAAAK,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEN,OAAO,kBAAI,qBAAC,0BAAiB;MAAC,MAAM,EAAEM,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEN,OAAO,CAACpB,MAAO;MAChC,KAAK,EAAE0B,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEN,OAAO,CAACnB,KAAM;MAC9B,MAAM,EAAEyB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEN,OAAO,CAAClB,MAAO;MAChC,MAAM,EAAEwB,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEN,OAAO,CAACjB,MAAO;MAChC,aAAa,EAAEc;IAAc,EAAE,EAGrE,CAAAS,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAExB,MAAM,kBACf,sBAAC,YAAY;MAAA,wBACX,qBAAC,mBAAW;QAAC,MAAM,EAAE,MAAO;QAAC,KAAK,EAAE;MAAO,EAAE,EAC5CyB,QAAQ,iBACP;QAAA,wBACE,qBAAC,aAAa;UAAC,SAAS,EAAE,mBAAoB;UAAC,OAAO,EAAE;YAAA,OAAMA,QAAQ,CAACxB,MAAM,IAAIwB,QAAQ,CAACxB,MAAM,EAAE,IAAIC,OAAO,EAAE;UAAA,CAAC;UAAA;QAAA,EAA4B,eAC5I,qBAAC,kBAAU;UACT,OAAO,EAAE,WAAY;UACrB,KAAK,EAAE,UAAW;UAClB,EAAE,EAAC,qBAAqB;UACxB,MAAM,EAAE;YAAA,OAAMuB,QAAQ,CAACxB,MAAM,IAAIwB,QAAQ,CAACxB,MAAM,EAAE,IAAIC,OAAO,EAAE;UAAA,CAAC;UAAA,uBAChE,qBAAC,sBAAS;YAAC,IAAI,EAAC;UAAM;QAAE,EACb;MAAA,EACZ;IAAA,EAGQ;EAAA,EAET;AAEd,CAAC;AAAC;EA1IAR,IAAI;EACJQ,OAAO;AAAA;AAAA,eA2IMT,UAAU;AAAA"}

package/dist/GlobalNavigationBar/mobile/MobileMenu.d.ts

@@ -1,5 +1,5 @@
 import { MobileNavigationMenuProps, ProfileMenu } from '../types';
-declare type Props = MobileNavigationMenuProps & {
+type Props = MobileNavigationMenuProps & {
     profile?: ProfileMenu;
     show?: boolean;
     onClose: () => void;

package/dist/GlobalNavigationBar/mobile/MobileMenu.js

@@ -119,6 +119,9 @@ var MobileMenu = function MobileMenu(_ref) {
       }), switcher && /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(SwitcherLabel, {
           className: 'globalNav-toggler',
+          onClick: function onClick() {
+            return switcher.action && switcher.action() && onClose();
+          },
           children: "Switch site"
         }), /*#__PURE__*/_jsx(IconButton, {
           variant: 'secondary',

package/dist/GlobalNavigationBar/mobile/MobileMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"MobileMenu.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useStackState","useMediaMatch","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}
+{"version":3,"file":"MobileMenu.js","names":["React","styled","BREAKPOINTS","COLORS","ComponentSStyling","ComponentTextStyle","ComponentXSStyling","Z_INDEXES","SwitchApp","useLocation","IconButton","LaerdalLogo","MobileMenuHeader","MobileMenuContent","useStackState","useMediaMatch","Wrapper","div","off_canvas","SMALL","SwitcherLabel","MobileFooter","neutral_200","Bold","neutral_600","CustomContent","MobileMenu","show","profile","buttons","label","header","items","footer","action","onClose","reset","length","push","pop","peek","isMediumScreen","LARGE","replace","location","onSubMenuOpen","menu","type","content","customContent","custom","useEffect","setTimeout","current","switcher","find","a","undefined"],"sources":["../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {BREAKPOINTS, COLORS, ComponentSStyling, ComponentTextStyle, ComponentXSStyling, Z_INDEXES} from '../../styles';\nimport {SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport {useLocation} from 'react-router-dom';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {\n  MenuAccountInfo,\n  MenuButton,\n  MenuNavigationItemTypeGroup,\n  MenuGroupFooter,\n  MenuGroupHeader,\n  MenuIconButton,\n  MenuNavigationItemTypeItem,\n  MobileNavigationMenuProps,\n  ProfileMenu,\n  MenuNavigationItemTypeSection,\n  MobileMenuButtonTypes,\n  MenuSwitcherButton,\n  MenuNavigationCustomSubMenu\n} from '../types';\nimport MobileMenuHeader from './MobileMenuHeader';\nimport MobileMenuContent from './MobileMenuContent';\nimport {useStackState} from '../../common/StackState';\nimport {useMediaMatch} from \"rooks\";\n\nconst Wrapper = styled.div`\n  width: 320px;\n  z-index: ${Z_INDEXES.off_canvas};\n  height: 100%;\n  box-sizing: border-box;\n\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n\n  ${BREAKPOINTS.SMALL} {\n    width: 400px;\n  }\n`;\n\nconst SwitcherLabel = styled.div`\n  margin-left: auto;\n`;\n\nconst MobileFooter = styled.div`\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: 48px;\n\n  padding: 0 4px 0 16px;\n  border-top: 1px solid ${COLORS.neutral_200};\n\n  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  ${BREAKPOINTS.SMALL} {\n    height: 56px;\n    padding: 4px 8px 4px 16px;\n    ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n  }\n`;\n\nconst CustomContent = styled.div`\n  width: 100%;\n  box-sizing: border-box;\n  flex-flow: column;\n  display: flex;\n  flex: 1;\n  overflow: hidden;\n`;\n\ntype Props = MobileNavigationMenuProps & {\n  profile?: ProfileMenu;\n  show?: boolean;\n  onClose: () => void;\n};\n\ninterface MenuState {\n  header: {\n    label?: string;\n    buttons?: MobileMenuButtonTypes[];\n  }\n  content?: {\n    header?: MenuGroupHeader;\n    items?: (MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection)[];\n    footer?: MenuGroupFooter;\n    action?: MenuButton;\n  },\n  customContent?: () => React.ReactNode;\n  footer?: boolean;\n}\n\nconst MobileMenu = ({\n                      show,\n                      profile,\n                      buttons,\n                      label,\n                      header,\n                      items,\n                      footer,\n                      action,\n                      onClose,\n                    }: Props) => {\n\n  const {reset, length, push, pop, peek} = useStackState<MenuState>();\n\n  const isMediumScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n  const location = useLocation();\n\n  const onSubMenuOpen = (menu?: MenuNavigationItemTypeGroup | MenuNavigationCustomSubMenu) => {\n\n    switch (menu?.type) {\n      case 'group':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          content: {\n            header: menu.header,\n            items: menu.items,\n            footer: menu.footer,\n            action: menu.action\n          },\n          footer: false\n        });\n        break;\n      case 'custom':\n        push({\n          header: {\n            label: menu.label,\n            buttons: menu.buttons,\n          },\n          customContent: menu.custom,\n          footer: false\n        });\n        break;\n      default:\n        break;\n    }\n\n  };\n\n  React.useEffect(() => {\n    onClose();\n  }, [location]);\n\n  React.useEffect(() => {\n    isMediumScreen && onClose()\n  }, [isMediumScreen]);\n\n  React.useEffect(() => {\n    setTimeout(() => {\n      reset({\n        footer: true,\n        header: {\n          label: label,\n          buttons: buttons,\n        },\n        content: {\n          header: header,\n          items: items,\n          footer: footer,\n          action: action\n        }\n      })\n    }, 300)\n  }, [show])\n\n\n  const current = peek();\n\n  const switcher = current?.header?.buttons?.find(a => a.type === 'switcher') as MenuSwitcherButton;\n\n  return (\n    <Wrapper>\n      <MobileMenuHeader buttons={current?.header.buttons}\n                        onGoBack={length > 1 ? pop : undefined}\n                        onSubMenuOpen={onSubMenuOpen}\n                        profile={profile}\n                        label={current?.header.label}\n                        onClose={onClose}/>\n      {current?.customContent && <CustomContent>{current?.customContent()}</CustomContent>}\n      {current?.content && <MobileMenuContent header={current?.content.header}\n                                              items={current?.content.items}\n                                              footer={current?.content.footer}\n                                              action={current?.content.action}\n                                              onSubMenuOpen={onSubMenuOpen}/>}\n\n      {\n        current?.footer &&\n        <MobileFooter>\n          <LaerdalLogo height={'36px'} width={'66px'}/>\n          {switcher &&\n            <>\n              <SwitcherLabel className={'globalNav-toggler'} onClick={() => switcher.action && switcher.action() && onClose()}>Switch site</SwitcherLabel>\n              <IconButton\n                variant={'secondary'}\n                shape={'circular'}\n                id=\"globalNavAppsButton\"\n                action={() => switcher.action && switcher.action() && onClose()}>\n                <SwitchApp size=\"24px\"/>\n              </IconButton>\n            </>\n          }\n\n        </MobileFooter>\n      }\n    </Wrapper>\n  );\n};\n\nexport default MobileMenu;\n"],"mappings":"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"}

package/dist/GlobalNavigationBar/types.d.ts

@@ -59,8 +59,8 @@ export interface MenuSwitcherButton extends Omit<IconButtonProps, 'id' | 'type'
     placement?: 'left' | 'right';
     action?: (button?: EventTarget) => boolean | void;
 }
-export declare type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
-export declare type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;
+export type DesktopMenuButtonTypes = MenuIconButton | MenuProfileButton | MenuSwitcherButton;
+export type MobileMenuButtonTypes = MenuIconSubMenuButton | MenuIconButton | MenuProfileButton | MenuSwitcherButton;
 export interface MobileNavigationMenuProps {
     label?: string;
     buttons?: MobileMenuButtonTypes[];
@@ -84,7 +84,7 @@ export interface MenuNavigationGroup<T = MenuNavigationItem | MenuNavigationSect
     footer?: MenuGroupFooter;
     action?: MenuButton;
 }
-export declare type MenuNavigationItem = {
+export type MenuNavigationItem = {
     icon?: React.ReactNode;
     to: string;
     exact?: boolean;
@@ -101,19 +101,19 @@ export interface MenuNavigationSection<T = MenuNavigationItem> {
     label?: string;
     items: T[];
 }
-export declare type MenuNavigationItemTypeItem = MenuNavigationItem & {
+export type MenuNavigationItemTypeItem = MenuNavigationItem & {
     type?: 'item';
 };
-export declare type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {
+export type MenuNavigationItemTypeGroup = MenuNavigationGroup<MenuNavigationItemTypeItem | MenuNavigationItemTypeGroup | MenuNavigationItemTypeSection> & {
     type: 'group';
     icon?: React.ReactNode;
     pinned?: boolean;
     disabled?: boolean;
 };
-export declare type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {
+export type MenuNavigationItemTypeSection = MenuNavigationSection<MenuNavigationItemTypeItem> & {
     type: 'section';
 };
-export declare type MenuNavigationCustomSubMenu = {
+export type MenuNavigationCustomSubMenu = {
     type: 'custom';
     label?: string;
     buttons?: MobileMenuButtonTypes[];

package/dist/HyperLink/index.cjs

@@ -1,6 +1,6 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -22,6 +22,14 @@ Object.defineProperty(exports, "HyperLinkInvertedStyling", {
     return _styling.invertedStyle;
   }
 });
-var _HyperLink = _interopRequireDefault(require("./HyperLink"));
+Object.defineProperty(exports, "StyledLink", {
+  enumerable: true,
+  get: function get() {
+    return _HyperLink.StyledLink;
+  }
+});
+var _HyperLink = _interopRequireWildcard(require("./HyperLink"));
 var _styling = require("./styling");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 //# sourceMappingURL=index.cjs.map

package/dist/HyperLink/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","names":[],"sources":["../../src/HyperLink/index.ts"],"sourcesContent":["import HyperLink from './HyperLink';\nimport {defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling} from './styling';\n\nexport { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA"}
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/HyperLink/index.ts"],"sourcesContent":["import HyperLink, { StyledLink } from './HyperLink';\nimport {defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling} from './styling';\n\nexport { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling, StyledLink };\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AACA;AAA6G;AAAA"}

package/dist/HyperLink/index.d.ts

@@ -1,3 +1,3 @@
-import HyperLink from './HyperLink';
+import HyperLink, { StyledLink } from './HyperLink';
 import { defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling } from './styling';
-export { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };
+export { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling, StyledLink };

package/dist/HyperLink/index.js

@@ -1,4 +1,4 @@
-import HyperLink from './HyperLink';
+import HyperLink, { StyledLink } from './HyperLink';
 import { defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling } from './styling';
-export { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };
+export { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling, StyledLink };
 //# sourceMappingURL=index.js.map

package/dist/HyperLink/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["HyperLink","defaultStyle","HyperLinkDefaultStyling","invertedStyle","HyperLinkInvertedStyling"],"sources":["../../src/HyperLink/index.ts"],"sourcesContent":["import HyperLink from './HyperLink';\nimport {defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling} from './styling';\n\nexport { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling };\n"],"mappings":"AAAA,OAAOA,SAAS,MAAM,aAAa;AACnC,SAAQC,YAAY,IAAIC,uBAAuB,EAAEC,aAAa,IAAIC,wBAAwB,QAAO,WAAW;AAE5G,SAASJ,SAAS,EAAEI,wBAAwB,EAAEF,uBAAuB"}
+{"version":3,"file":"index.js","names":["HyperLink","StyledLink","defaultStyle","HyperLinkDefaultStyling","invertedStyle","HyperLinkInvertedStyling"],"sources":["../../src/HyperLink/index.ts"],"sourcesContent":["import HyperLink, { StyledLink } from './HyperLink';\nimport {defaultStyle as HyperLinkDefaultStyling, invertedStyle as HyperLinkInvertedStyling} from './styling';\n\nexport { HyperLink, HyperLinkInvertedStyling, HyperLinkDefaultStyling, StyledLink };\n"],"mappings":"AAAA,OAAOA,SAAS,IAAIC,UAAU,QAAQ,aAAa;AACnD,SAAQC,YAAY,IAAIC,uBAAuB,EAAEC,aAAa,IAAIC,wBAAwB,QAAO,WAAW;AAE5G,SAASL,SAAS,EAAEK,wBAAwB,EAAEF,uBAAuB,EAAEF,UAAU"}

package/dist/Image/ImageWithFallbacks.d.ts

@@ -5,7 +5,7 @@ export interface ImageWithFallbacksProps extends Omit<React.ImgHTMLAttributes<HT
     alt: string;
     loader: boolean;
 }
-declare type ImageWithFallbacksState = {
+type ImageWithFallbacksState = {
     src: string;
     fallbackIndex: number;
     fallbacks: string[];

package/dist/InputFields/Label.cjs

@@ -16,31 +16,42 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _typography = require("../styles/typography");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
 // Add component-specific styles.
-var Label = _styledComponents.default.label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
+var Label = _styledComponents.default.label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n  flex: 1;\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
 var LabelRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ", "\n"])), function (props) {
   return props.margin ? "margin: ".concat(props.margin, ";") : '';
 });
-var LabelRowInner = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ", ";\n  align-items: center;\n"])), function (props) {
+var CopyContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), _typography.TypographyBase, _styles.COLORS.primary_800, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_600, _typography.TypographyBase, _styles.COLORS.neutral_300);
+var LabelRowInner = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  gap: ", ";\n  align-items: center;\n"])), function (props) {
   return props.size === _types.Size.Small ? '2px' : '4px';
 });
 
 // Add component-specific types
-
+var CopyState;
+(function (CopyState) {
+  CopyState[CopyState["Disabled"] = 0] = "Disabled";
+  CopyState[CopyState["Available"] = 1] = "Available";
+  CopyState[CopyState["Copied"] = 2] = "Copied";
+})(CopyState || (CopyState = {}));
 var InputLabel = function InputLabel(_ref) {
   var inputId = _ref.inputId,
     text = _ref.text,
     size = _ref.size,
     margin = _ref.margin,
-    requiredProp = _ref.required;
+    requiredProp = _ref.required,
+    showCopyButton = _ref.showCopyButton;
   // Globally used variables within the component
   var _React$useState = React.useState(false),
     _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
     required = _React$useState2[0],
     setRequired = _React$useState2[1];
+  var _React$useState3 = React.useState(CopyState.Available),
+    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    copyState = _React$useState4[0],
+    setCopyState = _React$useState4[1];
 
   /**
    * Checks if field is set as required and we have to mark it accordingly.
@@ -63,6 +74,19 @@ var InputLabel = function InputLabel(_ref) {
     var _document$getElementB2;
     (_document$getElementB2 = document.getElementById(id)) === null || _document$getElementB2 === void 0 ? void 0 : _document$getElementB2.click();
   };
+  var copyInputClick = function copyInputClick(e) {
+    var _document$getElementB3;
+    e.preventDefault();
+    if (copyState == CopyState.Copied) return;
+    var val = (_document$getElementB3 = document.getElementById(inputId)) === null || _document$getElementB3 === void 0 ? void 0 : _document$getElementB3.value;
+    if (val) {
+      window.navigator.clipboard.writeText(val);
+      setCopyState(CopyState.Copied);
+      setTimeout(function () {
+        setCopyState(CopyState.Available);
+      }, 1000);
+    }
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(LabelRow, {
     margin: margin,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelRowInner, {
@@ -77,6 +101,14 @@ var InputLabel = function InputLabel(_ref) {
         },
         className: size || '',
         children: text
+      }), showCopyButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyContainer, {
+        className: copyState != CopyState.Available ? "disabled" : "",
+        onClick: copyInputClick,
+        children: size == _types.Size.Medium ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.ComponentXS, {
+          children: copyState == CopyState.Copied ? 'Copied' : 'Copy'
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_typography.ComponentXXS, {
+          children: copyState == CopyState.Copied ? 'Copied' : 'Copy'
+        })
       })]
     })
   });
@@ -85,7 +117,8 @@ InputLabel.propTypes = {
   inputId: _propTypes.default.string.isRequired,
   text: _propTypes.default.string.isRequired,
   margin: _propTypes.default.string,
-  required: _propTypes.default.bool
+  required: _propTypes.default.bool,
+  showCopyButton: _propTypes.default.bool
 };
 var _default = InputLabel;
 exports.default = _default;

package/dist/InputFields/Label.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.cjs","names":["Label","styled","label","ComponentXXSStyling","COLORS","neutral_500","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","LabelRowInner","size","Size","Small","InputLabel","inputId","text","requiredProp","required","React","useState","setRequired","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","critical_500"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\nimport { SystemIcons } from '../icons';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  required?: boolean;\n};\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if(requiredProp === undefined)\n    {\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\n        setRequired(true);\n      } else {\n        setRequired(false);\n      }\n    }\n    else\n      setRequired(Boolean(requiredProp));\n  }, []);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":";;;;;;;;;;;AAGA;AAKA;AACA;AAKA;AACA;AACA;AAAuC;AAAA;AAAA;AAAA;AAEvC;AACA,IAAMA,KAAK,GAAGC,yBAAM,CAACC,KAAK,+MACtB,IAAAC,+BAAmB,EAAC,CAAC,EAAEC,cAAM,CAACC,WAAW,CAAC,EAE1CC,mBAAW,CAACC,MAAM,EAChB,IAAAC,8BAAkB,EAAC,CAAC,EAAEJ,cAAM,CAACC,WAAW,CAAC,EAIzC,IAAAF,+BAAmB,EAAC,CAAC,EAAEC,cAAM,CAACC,WAAW,CAAC,EAG1C,IAAAG,8BAAkB,EAAC,CAAC,EAAEJ,cAAM,CAACC,WAAW,CAAC,CAI9C;AAED,IAAMI,QAAQ,GAAGR,yBAAM,CAACS,GAAG,+JAIvB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,MAAM,qBAAcD,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,CAC9D;AAED,IAAMC,aAAa,GAAGZ,yBAAM,CAACS,GAAG,yLAIvB,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACG,IAAI,KAAKC,WAAI,CAACC,KAAK,GAAG,KAAK,GAAG,KAAK;AAAA,CAAC,CAE9D;;AAED;;AASA,IAAMC,UAA+C,GAAG,SAAlDA,UAA+C,OAA4E;EAAA,IAAtEC,OAAO,QAAPA,OAAO;IAAEC,IAAI,QAAJA,IAAI;IAAEL,IAAI,QAAJA,IAAI;IAAEF,MAAM,QAANA,MAAM;IAAYQ,YAAY,QAAtBC,QAAQ;EAC9F;EACA,sBAAgCC,KAAK,CAACC,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAvDF,QAAQ;IAAEG,WAAW;;EAE5B;AACF;AACA;EACEF,KAAK,CAACG,SAAS,CAAC,YAAM;IACpB,IAAGL,YAAY,KAAKM,SAAS,EAC7B;MAAA;MACE,IAAI,0BAAAC,QAAQ,CAACC,cAAc,CAACV,OAAO,CAAC,0DAAhC,sBAAkCW,YAAY,CAAC,UAAU,CAAC,MAAK,EAAE,EAAE;QACrEL,WAAW,CAAC,IAAI,CAAC;MACnB,CAAC,MAAM;QACLA,WAAW,CAAC,KAAK,CAAC;MACpB;IACF,CAAC,MAECA,WAAW,CAACM,OAAO,CAACV,YAAY,CAAC,CAAC;EACtC,CAAC,EAAE,EAAE,CAAC;EACN;AACF;AACA;AACA;EACE,IAAMW,cAAc,GAAG,SAAjBA,cAAc,CAAIC,EAAU,EAAW;IAAA;IAC3C,0BAAAL,QAAQ,CAACC,cAAc,CAACI,EAAE,CAAC,2DAA3B,uBAA6BC,KAAK,EAAE;EACtC,CAAC;EAED,oBACE,qBAAC,QAAQ;IAAC,MAAM,EAAErB,MAAO;IAAA,uBACvB,sBAAC,aAAa;MAAC,IAAI,EAAEE,IAAK;MAAA,WACvBO,QAAQ,iBAAI,qBAAC,kBAAW,CAAC,QAAQ;QAAC,IAAI,EAAC,MAAM;QAAC,KAAK,EAAEjB,cAAM,CAAC8B;MAAa,EAAG,eAC7E,qBAAC,KAAK;QAAC,OAAO,EAAEhB,OAAQ;QAAC,OAAO,EAAE;UAAA,OAAMa,cAAc,CAACb,OAAO,CAAC;QAAA,CAAC;QAAC,SAAS,EAAEJ,IAAI,IAAI,EAAG;QAAA,UACpFK;MAAI,EACC;IAAA;EACM,EACP;AAEf,CAAC;AAAC;EA5CAD,OAAO;EACPC,IAAI;EAEJP,MAAM;EACNS,QAAQ;AAAA;AAAA,eA0CKJ,UAAU;AAAA"}
+{"version":3,"file":"Label.cjs","names":["Label","styled","label","ComponentXXSStyling","COLORS","neutral_500","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","props","margin","CopyContainer","TypographyBase","primary_800","primary_700","primary_600","neutral_300","LabelRowInner","size","Size","Small","CopyState","InputLabel","inputId","text","requiredProp","required","showCopyButton","React","useState","setRequired","Available","copyState","setCopyState","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","copyInputClick","e","preventDefault","Copied","val","value","window","navigator","clipboard","writeText","setTimeout","critical_500","Medium"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\n * Import React libraries.\n */\nimport * as React from 'react';\n\n/**\n * Import custom styles.\n */\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Size } from '../types';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';\nimport { SystemIcons } from '../icons';\nimport {HyperLink, StyledLink} from '../HyperLink';\n\n// Add component-specific styles.\nconst Label = styled.label`\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\n\n  ${BREAKPOINTS.MEDIUM} {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  &.small {\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\n  }\n  &.medium {\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\n  }\n\n  pointer-events: none;\n  flex: 1;\n`;\n\nconst LabelRow = styled.div<{ margin?: string }>`\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n`;\n\nconst CopyContainer = styled.div`\n\n  &:visited:not(.disabled) {\n    ${TypographyBase}\n    {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ${TypographyBase}\n    {\n      color: ${COLORS.primary_700};\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ${TypographyBase}\n    {\n      color: ${COLORS.primary_700};\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ${TypographyBase}\n    {\n      color: ${COLORS.primary_700};\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ${TypographyBase}\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ${COLORS.primary_600};\n    }\n  }\n\n  &.disabled\n  {\n    ${TypographyBase}\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ${COLORS.neutral_300};\n    }\n  }\n  cursor: pointer;\n`;\n\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  gap: ${(props) => (props.size === Size.Small ? '2px' : '4px')};\n  align-items: center;\n`;\n\n// Add component-specific types\ntype LabelProps = {\n  inputId: string;\n  text: string;\n  size?: Size.Small | Size.Medium;\n  margin?: string;\n  required?: boolean;\n  showCopyButton?: boolean;\n};\n\nenum CopyState {\n  Disabled = 0,\n  Available = 1,\n  Copied = 2\n}\n\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp, showCopyButton }: LabelProps) => {\n  // Globally used variables within the component\n  const [required, setRequired] = React.useState<boolean>(false);\n  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.Available);\n\n  /**\n   * Checks if field is set as required and we have to mark it accordingly.\n   */\n  React.useEffect(() => {\n    if(requiredProp === undefined)\n    {\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\n        setRequired(true);\n      } else {\n        setRequired(false);\n      }\n    }\n    else\n      setRequired(Boolean(requiredProp));\n  }, []);\n  /**\n   * Triggers a click element on a specific element.\n   * @param id - ID of the element which needs to be clicked.\n   */\n  const onTriggerClick = (id: string): void => {\n    document.getElementById(id)?.click();\n  };\n\n  const copyInputClick = (e: any) => {\n    e.preventDefault();\n    if(copyState == CopyState.Copied)\n      return;\n    \n    const val = (document.getElementById(inputId) as HTMLInputElement)?.value;\n    if(val)\n    {\n      window.navigator.clipboard.writeText(val);\n      setCopyState(CopyState.Copied);\n      setTimeout(() => {\n        setCopyState(CopyState.Available);\n      }, 1000);\n    }\n  };\n\n  return (\n    <LabelRow margin={margin}>\n      <LabelRowInner size={size}>\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\n          {text}\n        </Label>\n        {showCopyButton && \n        <CopyContainer className={copyState != CopyState.Available ? \"disabled\" : \"\"} onClick={copyInputClick}>\n          { size == Size.Medium ? <ComponentXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXS> :\n          <ComponentXXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXXS> }\n        </CopyContainer> }\n      </LabelRowInner>\n    </LabelRow>\n  );\n};\n\nexport default InputLabel;\n"],"mappings":"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"}

package/dist/InputFields/Label.d.ts

@@ -3,12 +3,13 @@
  */
 import * as React from 'react';
 import { Size } from '../types';
-declare type LabelProps = {
+type LabelProps = {
     inputId: string;
     text: string;
     size?: Size.Small | Size.Medium;
     margin?: string;
     required?: boolean;
+    showCopyButton?: boolean;
 };
 declare const InputLabel: React.FunctionComponent<LabelProps>;
 export default InputLabel;