npm - @laerdal/life-react-components - Versions diffs - 1.0.1-dev.19.full → 1.0.1-dev.22.full - Mend

@laerdal/life-react-components 1.0.1-dev.19.full → 1.0.1-dev.22.full

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (198) hide show

package/dist/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js.map CHANGED Viewed

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

package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js CHANGED Viewed

@@ -2,10 +2,11 @@ import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
 import { Button } from '../../Button';
-import { COLORS } from '../../styles';
+import { COLORS, ComponentTextStyle } from '../../styles';
 import Avatar, { AvatarContainer } from '../Avatar';
 import MenuLink from './MenuLink';
 import { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';
+import { ComponentXSStyling, HeadlineXXSStyling } from '../../styles/typography';
 const Menu = styled.ul`
   list-style: none;
   margin: 0;
@@ -62,18 +63,11 @@ const AvatarAndName = styled.div`
   h5 {
     margin: 27px 0 0 20px;
-    font-style: normal;
-    font-weight: bold;
-    font-size: 20px;
-    line-height: 140%;
-    color: ${COLORS.neutral_600};
+    ${HeadlineXXSStyling(COLORS.neutral_600)}
   }
   span {
     margin: -5px 0 0 20px;
-    font-weight: normal;
-    font-size: 14px;
-    line-height: 140%;
-    color: ${COLORS.neutral_600};
+    ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
     top: -2px;
   }
 `;
@@ -82,10 +76,8 @@ const NameAndEmail = styled.div`
   flex-direction: column;
 `;
 const OrganizationName = styled.span`
-  font-weight: bold;
-  font-size: 14px;
-  color: ${COLORS.neutral_600};
   margin-left: 25px;
+  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}
 `;
 const UserMenu = ({

package/dist/esm/GlobalNavigationBar/UserMenu/UserMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["React","styled","Button","COLORS","Avatar","AvatarContainer","MenuLink","flowDown","UserMenuSectionListStyling","Menu","ul","white","neutral_200","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","NameAndEmail","OrganizationName","span","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","preventDefault","fontSize","lineHeight","boxSizing","borderRadius","height","display","justifyContent","alignItems","margin","width"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { Button } from '../../Button';\nimport { COLORS } from '../../styles';\nimport Avatar, { AvatarContainer } from '../Avatar';\nimport MenuLink from './MenuLink';\nimport { UserMenuItem } from '../../types';\nimport { flowDown, UserMenuSectionListStyling } from '../mobile/CommonStyles';\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n min-width: 312px;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: 100;\n\n .open & {\n display: block;\n }\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ${COLORS.neutral_100};\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nconst MenuSectionList = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n margin: 25px 0 0 25px;\n`;\n\nconst AvatarAndName = styled.div`\n display: flex;\n flex-direction: row;\n\n h5 {\n margin: 27px 0 0 20px;\n font-style: normal;\n font-weight: bold;\n font-size: 20px;\n line-height: 140%;\n color: ${COLORS.neutral_600};\n }\n span {\n margin: -5px 0 0 20px;\n font-weight: normal;\n font-size: 14px;\n line-height: 140%;\n color: ${COLORS.neutral_600};\n top: -2px;\n }\n`;\n\nconst NameAndEmail = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n font-weight: bold;\n font-size: 14px;\n color: ${COLORS.neutral_600};\n margin-left: 25px;\n`;\n\ninterface Props {\n firstName: string;\n lastName: string;\n email: string;\n organizationName: string;\n clickMenuAction: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n signOut?: (e: any) => void;\n signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n React.useEffect(() => {\n function handleKeyPress(e: any) {\n if (e.keyCode === 27) {\n clickMenuAction();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [clickMenuAction]);\n\n return (\n <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <AvatarAndName key=\"AvatarAndNameSection\">\n <StyledAvatarContainer hidePadding={true}>\n <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </StyledAvatarContainer>\n <NameAndEmail>\n <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n <span data-hj-suppress>{email}</span>\n </NameAndEmail>\n </AvatarAndName>\n {accountSection && accountSection?.length > 0 && (\n <MenuSection key=\"MobileAccountSection\">\n <MenuSectionList>\n {accountSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n {organizationSection && organizationSection?.length > 0 && (\n <MenuSection key=\"MobileOrganizationSection\">\n <OrganizationName>{organizationName \|\| ''}</OrganizationName>\n <MenuSectionList>\n {organizationSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n <MenuSection key=\"MobileSupportSection\">\n <MenuSectionList>\n {supportSection?.map(element => (\n <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n {signOut && (\n <Button\n width=\"90%\"\n className=\"UserMenuLink\"\n variant=\"secondary\"\n size=\"big\"\n onClick={e => {\n e.preventDefault();\n signOut(e);\n }}\n style={{\n fontSize: '19px',\n lineHeight: '23px',\n boxSizing: 'border-box',\n borderRadius: '8px',\n height: '56px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: '8px auto 12px auto',\n width: '90%',\n }}>\n {signOutLabel}\n </Button>\n )}\n </MenuSectionList>\n </MenuSection>\n </Menu>\n );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/UserMenu.tsx"],"names":["React","styled","Button","COLORS","ComponentTextStyle","Avatar","AvatarContainer","MenuLink","flowDown","UserMenuSectionListStyling","ComponentXSStyling","HeadlineXXSStyling","Menu","ul","white","neutral_200","MenuSection","li","neutral_100","MenuSectionList","StyledAvatarContainer","AvatarAndName","div","neutral_600","Regular","NameAndEmail","OrganizationName","span","Bold","UserMenu","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","useEffect","handleKeyPress","e","keyCode","document","addEventListener","removeEventListener","primary_500","length","map","element","to","label","icon","onClick","isExternal","preventDefault","fontSize","lineHeight","boxSizing","borderRadius","height","display","justifyContent","alignItems","margin","width"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport {Button} from '../../Button';\nimport {COLORS, ComponentTextStyle} from '../../styles';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MenuLink from './MenuLink';\nimport {UserMenuItem} from '../../types';\nimport {flowDown, UserMenuSectionListStyling} from '../mobile/CommonStyles';\nimport {ComponentXSStyling, HeadlineXXSStyling} from '../../styles/typography';\n\nconst Menu = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n min-width: 312px;\n -webkit-animation: ${flowDown} 0.2s ease-in-out;\n animation: ${flowDown} 0.2s ease-in-out;\n position: absolute;\n box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);\n border-radius: 4px;\n border: 1px solid ${COLORS.neutral_200};\n z-index: 100;\n\n .open & {\n display: block;\n }\n`;\n\nconst MenuSection = styled.li`\n padding: 8px 0;\n position: relative;\n\n &:not(:first-of-type)::before {\n content: '';\n position: absolute;\n background: ${COLORS.neutral_100};\n height: 1px;\n top: 0;\n left: 16px;\n right: 16px;\n }\n\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nconst MenuSectionList = styled.ul`\n list-style: none;\n margin: 0;\n padding: 0;\n\n ${UserMenuSectionListStyling};\n`;\n\nconst StyledAvatarContainer = styled(AvatarContainer)`\n margin: 25px 0 0 25px;\n`;\n\nconst AvatarAndName = styled.div`\n display: flex;\n flex-direction: row;\n\n h5 {\n margin: 27px 0 0 20px;\n ${HeadlineXXSStyling(COLORS.neutral_600)}\n }\n span {\n margin: -5px 0 0 20px;\n ${ComponentXSStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n top: -2px;\n }\n`;\n\nconst NameAndEmail = styled.div`\n display: flex;\n flex-direction: column;\n`;\n\nconst OrganizationName = styled.span`\n margin-left: 25px;\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n`;\n\ninterface Props {\n firstName: string;\n lastName: string;\n email: string;\n organizationName: string;\n clickMenuAction: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n signOut?: (e: any) => void;\n signOutLabel?: string;\n}\n\nconst UserMenu = ({ firstName, lastName, email, organizationName, clickMenuAction, accountSection, organizationSection, supportSection, signOut, signOutLabel }: Props) => {\n React.useEffect(() => {\n function handleKeyPress(e: any) {\n if (e.keyCode === 27) {\n clickMenuAction();\n }\n }\n\n document.addEventListener('keydown', handleKeyPress, false);\n return () => {\n document.removeEventListener('keydown', handleKeyPress, false);\n };\n }, [clickMenuAction]);\n\n return (\n <Menu onClick={clickMenuAction} role=\"menu\" aria-labelledby=\"UserMenuButton\">\n <AvatarAndName key=\"AvatarAndNameSection\">\n <StyledAvatarContainer hidePadding={true}>\n <Avatar size={48} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </StyledAvatarContainer>\n <NameAndEmail>\n <h5 data-hj-suppress>{`${firstName} ${lastName}`}</h5>\n <span data-hj-suppress>{email}</span>\n </NameAndEmail>\n </AvatarAndName>\n {accountSection && accountSection?.length > 0 && (\n <MenuSection key=\"MobileAccountSection\">\n <MenuSectionList>\n {accountSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n {organizationSection && organizationSection?.length > 0 && (\n <MenuSection key=\"MobileOrganizationSection\">\n <OrganizationName>{organizationName \|\| ''}</OrganizationName>\n <MenuSectionList>\n {organizationSection?.map(element => (\n <MenuLink key={element?.to} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n </MenuSectionList>\n </MenuSection>\n )}\n\n <MenuSection key=\"MobileSupportSection\">\n <MenuSectionList>\n {supportSection?.map(element => (\n <MenuLink key={element?.to} isExternal={element.isExternal} to={element?.to} menuText={element?.label} Icon={element?.icon} onClick={element?.onClick} />\n ))}\n {signOut && (\n <Button\n width=\"90%\"\n className=\"UserMenuLink\"\n variant=\"secondary\"\n size=\"big\"\n onClick={e => {\n e.preventDefault();\n signOut(e);\n }}\n style={{\n fontSize: '19px',\n lineHeight: '23px',\n boxSizing: 'border-box',\n borderRadius: '8px',\n height: '56px',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n margin: '8px auto 12px auto',\n width: '90%',\n }}>\n {signOutLabel}\n </Button>\n )}\n </MenuSectionList>\n </MenuSection>\n </Menu>\n );\n};\n\nexport default UserMenu;\n"],"file":"UserMenu.js"}

package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js CHANGED Viewed

@@ -89,7 +89,10 @@ export const MenuSectionList = styled.ul`
     width: 80%;
     height: 48px;
     margin: 0 auto 0 12px;
-    line-height: 48px;
+    a {
+      height: 100%;
+    }
   }
 `;
 export const UserMenuSectionListStyling = css`

package/dist/esm/GlobalNavigationBar/mobile/CommonStyles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","NavLink","ComponentMStyling","ComponentTextStyle","RowLayout","div","Button","button","white","flowLeft","flowRight","Menu","ul","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","primary_20","primary_600","primary_500","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,EAAsBC,SAAtB,QAAuC,mBAAvC;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,cAApC;AACA,SAASC,OAAT,QAAwB,kBAAxB;AACA,SAASC,iBAAT,EAA4BC,kBAA5B,QAAsD,yBAAtD;AAEA,OAAO,MAAMC,SAAS,GAAGR,MAAM,CAACS,GAAI;AACpC;AACA;AACA,CAHO;AAKP,OAAO,MAAMC,MAAM,GAAGV,MAAM,CAACW,MAAO;AACpC,sBAAsBP,MAAM,CAACQ,KAAM;AACnC;AACA;AACA,CAJO;AAMP,MAAMC,QAAQ,GAAGX,SAAU;AAC3B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CATA;AAWA,MAAMY,SAAS,GAAGZ,SAAU;AAC5B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CATA;AAWA,OAAO,MAAMa,IAAI,GAAGf,MAAM,CAACgB,EAAG;AAC9B;AACA;AACA;AACA,sBAAsBZ,MAAM,CAACQ,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIT,WAAW,CAACc,KAAM;AACtB;AACA;AACA;AACA;AACA;AACA,yBAAyBJ,QAAS;AAClC,iBAAiBA,QAAS;AAC1B;AACA;AACA;AACA;AACA,yBAAyBC,SAAU;AACnC,iBAAiBA,SAAU;AAC3B;AACA,CA/BO;AAiCP,OAAO,MAAMI,KAAK,GAAGlB,MAAM,CAACS,GAAI;AAChC;AACA;AACA,CAHO;AAKP,OAAO,MAAMU,QAAQ,GAAGnB,MAAM,CAACoB,IAAK;AACpC,WAAWhB,MAAM,CAACiB,WAAY;AAC9B;AACA;AACA;AACA,CALO;AAOP,OAAO,MAAMC,WAAW,GAAGtB,MAAM,CAACuB,EAAG;AACrC;AACA;AACA;AACA;AACA;AACA;AACA,CAPO;AASP,OAAO,MAAMC,eAAe,GAAGxB,MAAM,CAACgB,EAAG;AACzC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,~~CAVO~~;~~AAYP~~,OAAO,MAAMS,0BAA0B,GAAGxB,GAAI;AAC9C;AACA,wBAAwBG,MAAM,CAACsB,UAAW;AAC1C;AACA,eAAetB,MAAM,CAACuB,WAAY;AAClC;AACA;AACA,eAAevB,MAAM,CAACuB,WAAY;AAClC;AACA;AACA;AACA;AACA,8BAA8BvB,MAAM,CAACwB,WAAY;AACjD;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBxB,MAAM,CAACyB,WAAY;AACrC;AACA;AACA,eAAezB,MAAM,CAAC0B,WAAY;AAClC;AACA;AACA,eAAe1B,MAAM,CAAC0B,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,eAAe1B,MAAM,CAAC2B,WAAY;AAClC;AACA;AACA,eAAe3B,MAAM,CAAC2B,WAAY;AAClC;AACA,wBAAwB3B,MAAM,CAAC4B,WAAY;AAC3C;AACA,CAtCO;AAwCP,OAAO,MAAMC,QAAQ,GAAGjC,MAAM,CAACK,OAAD,CAAU;AACxC;AACA;AACA;AACA;AACA;AACA;AACA,IAAIC,iBAAiB,CAACC,kBAAkB,CAAC2B,OAApB,EAA6B9B,MAAM,CAAC+B,KAApC,CAA2C;AAChE;AACA;AACA;AACA;AACA;AACA,CAbO;AAeP,OAAO,MAAMC,WAAW,GAAGpC,MAAM,CAACS,GAAsB;AACxD,sBAAsBL,MAAM,CAACQ,KAAM;AACnC,aAAcyB,KAAD,IAAYA,KAAK,CAACC,SAAN,GAAkB,MAAlB,GAA2B,MAAQ;AAC5D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBlC,MAAM,CAACQ,KAAM;AAC/B;AACA,CAdO;AAoBP,OAAO,MAAM2B,QAAQ,GAAGrC,SAAU;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CATO","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n }\n`;\n\nexport const Menu = styled.ul`\n height: 100%;\n list-style: none;\n margin: 0 auto 0 auto;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n right: 0;\n top: 0;\n min-width: 300px;\n position: absolute;\n z-index: 100;\n align-items: center;\n width: 320px;\n padding-inline-start: 0;\n\n ${BREAKPOINTS.SMALL} {\n min-width: 360px;\n }\n\n .open & {\n display: block;\n -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n display: block;\n -webkit-animation: ${flowRight} 0.3s ease-in-out;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n ~~line-~~height: ~~48px;\~~n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li:hover:not(.disabled) {\n background-color: ${COLORS.primary_20};\n a {\n color: ${COLORS.primary_600};\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n background: ${COLORS.primary_100};\n box-shadow: none;\n a {\n color: ${COLORS.primary_800};\n }\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n svg {\n color: ${COLORS.neutral_300};\n }\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n background-color: ${COLORS.white};\n display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ${COLORS.white};\n }\n`;\n\ninterface MenuWrapperProps {\n isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n"],"file":"CommonStyles.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/CommonStyles.ts"],"names":["styled","css","keyframes","BREAKPOINTS","COLORS","NavLink","ComponentMStyling","ComponentTextStyle","RowLayout","div","Button","button","white","flowLeft","flowRight","Menu","ul","SMALL","Right","SiteName","span","neutral_600","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","primary_20","primary_600","primary_500","primary_100","primary_800","neutral_300","neutral_100","MenuLink","Regular","black","MenuWrapper","props","isVisible","flowDown"],"mappings":"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","sourcesContent":["import styled, { css, keyframes } from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavLink } from 'react-router-dom';\nimport { ComponentMStyling, ComponentTextStyle } from '../../styles/typography';\n\nexport const RowLayout = styled.div`\n display: flex;\n align-items: center;\n`;\n\nexport const Button = styled.button`\n background-color: ${COLORS.white};\n font-weight: bold;\n border: 0;\n`;\n\nconst flowLeft = keyframes`\n 0% {\n opacity: 0;\n transform: translateX(100%);\n }\n to {\n opacity: 1;\n transform: translateX(0);\n }\n`;\n\nconst flowRight = keyframes`\n 0% {\n opacity: 1;\n transform: translateX(0);\n }\n to {\n opacity: 0;\n transform: translateX(100%);\n }\n`;\n\nexport const Menu = styled.ul`\n height: 100%;\n list-style: none;\n margin: 0 auto 0 auto;\n background-color: ${COLORS.white};\n box-sizing: border-box;\n display: none;\n right: 0;\n top: 0;\n min-width: 300px;\n position: absolute;\n z-index: 100;\n align-items: center;\n width: 320px;\n padding-inline-start: 0;\n\n ${BREAKPOINTS.SMALL} {\n min-width: 360px;\n }\n\n .open & {\n display: block;\n -webkit-animation: ${flowLeft} 0.3s ease-in-out;\n animation: ${flowLeft} 0.3s ease-in-out;\n }\n\n .closed & {\n display: block;\n -webkit-animation: ${flowRight} 0.3s ease-in-out;\n animation: ${flowRight} 0.3s ease-in-out;\n }\n`;\n\nexport const Right = styled.div`\n display: flex;\n margin-left: auto;\n`;\n\nexport const SiteName = styled.span`\n color: ${COLORS.neutral_600};\n font-weight: bold;\n font-size: 14px;\n margin-left: 4px;\n`;\n\nexport const MenuSection = styled.li`\n margin-top: 16px;\n .disabled-link {\n color: #21212150;\n pointer-events: none;\n key-events: none;\n }\n`;\n\nexport const MenuSectionList = styled.ul`\n list-style: none;\n padding: 0;\n\n li {\n width: 80%;\n height: 48px;\n margin: 0 auto 0 12px;\n \n a {\n height: 100%;\n }\n }\n`;\n\nexport const UserMenuSectionListStyling = css`\n li:hover:not(.disabled) {\n background-color: ${COLORS.primary_20};\n a {\n color: ${COLORS.primary_600};\n }\n svg {\n color: ${COLORS.primary_600};\n }\n }\n\n li:focus-within:not(.disabled) {\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n a {\n outline: none;\n }\n }\n\n li:active:not(.disabled) {\n background: ${COLORS.primary_100};\n box-shadow: none;\n a {\n color: ${COLORS.primary_800};\n }\n svg {\n color: ${COLORS.primary_800};\n }\n }\n\n .disabled {\n a {\n color: ${COLORS.neutral_300};\n }\n svg {\n color: ${COLORS.neutral_300};\n }\n background-color: ${COLORS.neutral_100};\n }\n`;\n\nexport const MenuLink = styled(NavLink)`\n border: none;\n background: transparent;\n margin: auto;\n\n box-sizing: border-box;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n\n text-decoration: none;\n text-align: center;\n align-items: center;\n display: flex;\n`;\n\nexport const MenuWrapper = styled.div<MenuWrapperProps>`\n background-color: ${COLORS.white};\n display: ${(props) => (props.isVisible ? 'flex' : 'none')};\n position: absolute;\n left: 0;\n top: 0;\n height: 100%;\n width: 100%;\n\n &:focus-within,\n &:hover,\n &.open {\n background: ${COLORS.white};\n }\n`;\n\ninterface MenuWrapperProps {\n isVisible: boolean;\n}\n\nexport const flowDown = keyframes`\n 0% {\n opacity: 0;\n transform: translateY(-10px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n`;\n"],"file":"CommonStyles.js"}

package/dist/esm/GlobalNavigationBar/mobile/MobileMenu.js CHANGED Viewed

@@ -1,21 +1,21 @@
 import _pt from "prop-types";
 import * as React from 'react';
 import styled from 'styled-components';
-import { BREAKPOINTS, COLORS } from '../../styles';
+import { BREAKPOINTS, COLORS, ComponentTextStyle } from '../../styles';
 import Actions from '../Actions';
 import { Close, Notification, SwitchApp } from '../../icons/systemicons/SystemIcons';
 import MobileActionMenu from './MobileActionMenu';
-import { Right, RowLayout, MenuWrapper, MenuSection, MenuSectionList } from './CommonStyles';
+import { MenuSection, MenuSectionList, MenuWrapper, Right, RowLayout } from './CommonStyles';
 import { NavLink, useLocation } from 'react-router-dom';
 import { SwitcherMenuItem } from '../../Switcher';
 import Avatar, { AvatarContainer } from '../Avatar';
 import MobileUserMenu from '../UserMenu/MobileUserMenu';
 import { IconButton } from '../../Button';
 import { LaerdalLogo } from '../../assets';
+import { ComponentMStyling, ComponentXSStyling } from '../../styles/typography';
 const SwitchButton = styled.span`
-  color: ${COLORS.neutral_600};
-  font-size: 14px;
-  font-weight: bold;
+  ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}
   padding: 0;
   border: 0;
   margin: 0 auto 0 12px;
@@ -41,9 +41,6 @@ const BottomRowLayout = styled(RowLayout)`
   }
 `;
 const StyledNavItem = styled(SwitcherMenuItem)`
-  font-style: normal;
-  font-weight: normal;
-  font-size: 19px;
   padding: 0 0 0 20px;
   margin: 0 2px;
@@ -52,7 +49,7 @@ const StyledNavItem = styled(SwitcherMenuItem)`
   text-align: center;
   position: relative;
-  color: ${COLORS.black};
+  ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}
   text-decoration: none;
   svg {

package/dist/esm/GlobalNavigationBar/mobile/MobileMenu.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","Actions","Close","Notification","SwitchApp","MobileActionMenu","Right","RowLayout","MenuWrapper","MenuSection","MenuSectionList","NavLink","useLocation","SwitcherMenuItem","Avatar","AvatarContainer","MobileUserMenu","IconButton","LaerdalLogo","SwitchButton","span","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","BottomRowLayout","SMALL","StyledNavItem","black","primary_500","primary_800","neutral_300","neutral_100","primary_600","primary_20","primary_100","SwitcherButton","MobileMenu","clickMenuAction","navigationOptions","actions","firstName","lastName","email","signout","notifications","accountSection","organizationSection","supportSection","switcherAction","accountMenuHeader","signOutLabel","organizationName","useUserMenu","showUserMenu","setShowUserMenu","showNotificationMenu","setShowNotificationMenu","useState","notificationMenuRef","useRef","userMenuRef","userRef","location","user","notification","fireAction","action","ref","undefined","current","blur","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","label","exact","to","onClick","padding","margin","name","secondaryNavigationOptions","isAuthenticated"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavButton, NavOption, ActionOptions, UserMenuItem } from '../../types';\nimport Actions from '../Actions';\nimport { Close, Notification, SwitchApp } from '../../icons/systemicons/SystemIcons';\nimport MobileActionMenu from './MobileActionMenu';\nimport { Right, RowLayout, MenuWrapper, MenuSection, MenuSectionList } from './CommonStyles';\nimport { NavLink, useLocation } from 'react-router-dom';\nimport { SwitcherMenuItem } from '../../Switcher';\nimport Avatar, { AvatarContainer } from '../Avatar';\nimport MobileUserMenu from '../UserMenu/MobileUserMenu';\nimport { IconButton } from '../../Button';\nimport { LaerdalLogo } from '../../assets';\n\nconst SwitchButton = styled.span`\n color: ${COLORS.neutral_600};\n font-size: 14px;\n font-weight: bold;\n padding: 0;\n border: 0;\n margin: 0 auto 0 12px;\n line-height: 48px;\n`;\n\nconst BottomPinnedSection = styled.div`\n position: absolute;\n left: 0;\n width: 100%;\n bottom: 0;\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FirstRowLayout = styled(RowLayout)`\n margin-top: 10px;\n padding: 12px;\n`;\n\nconst BottomRowLayout = styled(RowLayout)`\n margin: 8px auto 0 0;\n width: 95%;\n height: 48px;\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n`;\n\nconst StyledNavItem = styled(SwitcherMenuItem)`\n font-style: normal;\n font-weight: normal;\n font-size: 19px;\n padding: 0 0 0 20px;\n margin: 0 2px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n color: ${COLORS.black};\n text-decoration: none;\n\n svg {\n margin-right: 16px;\n }\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 4px;\n background-color: transparent;\n }\n\n &.active:not(.disabled) {\n font-weight: bold;\n &:after {\n background-color: ${COLORS.primary_500};\n }\n\n color: ${COLORS.primary_800};\n svg path {\n fill: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n background-color: ${COLORS.neutral_100};\n }\n\n &:hover:not(.disabled) {\n color: ${COLORS.primary_600};\n background-color: ${COLORS.primary_20};\n\n svg path {\n fill: ${COLORS.primary_600};\n }\n }\n\n &:active:not(.disabled) {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n &:after {\n background-color: ${COLORS.primary_500};\n }\n svg path {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:focus:not(.disabled) {\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\nconst SwitcherButton = styled.div`\n display: flex;\n margin-left: auto;\n\n line-height: 48px;\n button:last-child {\n margin: 0 !important;\n }\n`;\n\ntype Props = {\n name: string;\n navigationOptions?: NavOption[];\n secondaryNavigationOptions?: NavOption[];\n secondaryButton?: NavButton;\n actions?: ActionOptions;\n clickMenuAction: () => void;\n firstName: string;\n lastName: string;\n email: string;\n signout?: (e: any) => void;\n isAuthenticated?: boolean;\n notifications?: NavOption[];\n switcherAction?: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n accountMenuHeader: string;\n signOutLabel: string;\n organizationName: string;\n useUserMenu: boolean \| undefined;\n showUserMenu: boolean;\n setShowUserMenu: (show: boolean) => void;\n};\n\nconst MobileMenu = ({\n clickMenuAction,\n navigationOptions,\n actions,\n firstName,\n lastName,\n email,\n signout,\n notifications,\n accountSection,\n organizationSection,\n supportSection,\n switcherAction,\n accountMenuHeader,\n signOutLabel,\n organizationName,\n useUserMenu,\n showUserMenu,\n setShowUserMenu,\n}: Props) => {\n const [showNotificationMenu, setShowNotificationMenu] = React.useState<boolean>(false);\n const notificationMenuRef = React.useRef(null);\n const userMenuRef = React.useRef(null);\n const userRef = React.useRef(null);\n\n const location = useLocation();\n\n if (actions?.user) {\n actions.user = () => setShowUserMenu(true);\n }\n if (actions?.notification) {\n actions.notification = () => setShowNotificationMenu(true);\n }\n\n const fireAction = (action: (() => void) \| undefined, ref: React.MutableRefObject<HTMLButtonElement \| null> \| undefined = undefined) => {\n ref?.current?.blur();\n !!action && action();\n };\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n React.useEffect(() => {\n clickMenuAction();\n }, [location]);\n\n return (\n <>\n {actions?.notification && (\n <MenuWrapper ref={notificationMenuRef} className={showNotificationMenu ? 'open' : ''} isVisible={showNotificationMenu}>\n <MobileActionMenu\n name=\"Notifications\"\n clickMenuAction={() => setShowNotificationMenu(false)}\n navigationOptions={notifications}\n actionList={{\n notification: () => {},\n }}\n />\n </MenuWrapper>\n )}\n {actions?.user && (\n <MenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : ''} isVisible={showUserMenu}>\n <MobileUserMenu\n accountMenuHeader={accountMenuHeader}\n firstName={firstName}\n lastName={lastName}\n email={email}\n organizationName={organizationName}\n clickMenuAction={clickMenuAction}\n accountSection={accountSection}\n organizationSection={organizationSection}\n supportSection={supportSection}\n signOut={signout}\n signOutLabel={signOutLabel}\n />\n </MenuWrapper>\n )}\n <FirstRowLayout>\n {firstName && lastName && (\n <AvatarContainer\n id=\"avatarContainer\"\n ref={userRef}\n onClick={actions?.user}\n onKeyDown={(e: any) => (isPressingEnter(e) ? fireAction(actions?.user, userRef) : null)}\n inMobileMenu={true}\n hideOnLowWidth={false}>\n <Avatar size={36} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </AvatarContainer>\n )}\n {actions?.notification && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={false}\n isInMobileMenu={true}\n action={() => fireAction(actions?.notification)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification) : null)}>\n <Notification size=\"24px\" />\n </IconButton>\n )}\n <Right>\n <Actions\n actions={actions}\n firstName={firstName}\n lastName={lastName}\n isInMobileMenu={true}\n hideOnLowWidth={false}\n useUserMenu={useUserMenu}\n setShowUserMenu={setShowUserMenu}\n />\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => clickMenuAction()} isInMobileMenu={true}>\n <Close size=\"24px\" />\n </IconButton>\n </Right>\n </FirstRowLayout>\n <MenuSection>\n <MenuSectionList>\n {navigationOptions?.map((no) => (\n <li key={no.label}>\n <StyledNavItem\n as={NavLink}\n exact={no?.exact}\n to={no.to}\n onClick={() => {\n if (no?.onClick) {\n no?.onClick();\n }\n }}>\n {no.label}\n </StyledNavItem>\n </li>\n ))}\n </MenuSectionList>\n </MenuSection>\n\n <BottomPinnedSection>\n <MenuSection style={{ padding: '0 12px 12px 12px', margin: '0' }}>\n <MenuSectionList>\n <BottomRowLayout>\n <LaerdalLogo />\n {switcherAction && (\n <SwitcherButton>\n <SwitchButton onClick={() => switcherAction()}>Switch site</SwitchButton>{' '}\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={false}\n isInMobileMenu={true}\n id=\"globalNavAppsButton\"\n action={() => switcherAction()}\n onKeyPress={(e: any) => (isPressingEnter(e) ? switcherAction() : null)}>\n <SwitchApp size=\"24px\" />\n </IconButton>\n </SwitcherButton>\n )}\n </BottomRowLayout>\n </MenuSectionList>\n </MenuSection>\n </BottomPinnedSection>\n </>\n );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}
1	+ {"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","ComponentTextStyle","Actions","Close","Notification","SwitchApp","MobileActionMenu","MenuSection","MenuSectionList","MenuWrapper","Right","RowLayout","NavLink","useLocation","SwitcherMenuItem","Avatar","AvatarContainer","MobileUserMenu","IconButton","LaerdalLogo","ComponentMStyling","ComponentXSStyling","SwitchButton","span","Bold","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","BottomRowLayout","SMALL","StyledNavItem","Regular","black","primary_500","primary_800","neutral_300","neutral_100","primary_600","primary_20","primary_100","SwitcherButton","MobileMenu","clickMenuAction","navigationOptions","actions","firstName","lastName","email","signout","notifications","accountSection","organizationSection","supportSection","switcherAction","accountMenuHeader","signOutLabel","organizationName","useUserMenu","showUserMenu","setShowUserMenu","showNotificationMenu","setShowNotificationMenu","useState","notificationMenuRef","useRef","userMenuRef","userRef","location","user","notification","fireAction","action","ref","undefined","current","blur","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","label","exact","to","onClick","padding","margin","name","secondaryNavigationOptions","isAuthenticated"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport {BREAKPOINTS, COLORS, ComponentTextStyle} from '../../styles';\nimport {ActionOptions, NavButton, NavOption, UserMenuItem} from '../../types';\nimport Actions from '../Actions';\nimport {Close, Notification, SwitchApp} from '../../icons/systemicons/SystemIcons';\nimport MobileActionMenu from './MobileActionMenu';\nimport {MenuSection, MenuSectionList, MenuWrapper, Right, RowLayout} from './CommonStyles';\nimport {NavLink, useLocation} from 'react-router-dom';\nimport {SwitcherMenuItem} from '../../Switcher';\nimport Avatar, {AvatarContainer} from '../Avatar';\nimport MobileUserMenu from '../UserMenu/MobileUserMenu';\nimport {IconButton} from '../../Button';\nimport {LaerdalLogo} from '../../assets';\nimport {ComponentMStyling, ComponentXSStyling} from '../../styles/typography';\n\nconst SwitchButton = styled.span`\n ${ComponentXSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n \n padding: 0;\n border: 0;\n margin: 0 auto 0 12px;\n line-height: 48px;\n`;\n\nconst BottomPinnedSection = styled.div`\n position: absolute;\n left: 0;\n width: 100%;\n bottom: 0;\n border-top: 1px solid ${COLORS.neutral_200};\n`;\n\nconst FirstRowLayout = styled(RowLayout)`\n margin-top: 10px;\n padding: 12px;\n`;\n\nconst BottomRowLayout = styled(RowLayout)`\n margin: 8px auto 0 0;\n width: 95%;\n height: 48px;\n ${BREAKPOINTS.SMALL} {\n height: 56px;\n }\n`;\n\nconst StyledNavItem = styled(SwitcherMenuItem)`\n padding: 0 0 0 20px;\n margin: 0 2px;\n\n display: flex;\n align-items: center;\n text-align: center;\n position: relative;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.black)}\n text-decoration: none;\n\n svg {\n margin-right: 16px;\n }\n\n &:after {\n content: '';\n display: block;\n position: absolute;\n left: 0;\n top: 0;\n bottom: 0;\n width: 4px;\n background-color: transparent;\n }\n\n &.active:not(.disabled) {\n font-weight: bold;\n &:after {\n background-color: ${COLORS.primary_500};\n }\n\n color: ${COLORS.primary_800};\n svg path {\n fill: ${COLORS.primary_800};\n }\n }\n\n &.disabled {\n color: ${COLORS.neutral_300};\n background-color: ${COLORS.neutral_100};\n }\n\n &:hover:not(.disabled) {\n color: ${COLORS.primary_600};\n background-color: ${COLORS.primary_20};\n\n svg path {\n fill: ${COLORS.primary_600};\n }\n }\n\n &:active:not(.disabled) {\n color: ${COLORS.primary_800};\n background-color: ${COLORS.primary_100};\n box-shadow: none;\n &:after {\n background-color: ${COLORS.primary_500};\n }\n svg path {\n fill: ${COLORS.primary_800};\n }\n }\n\n &:focus:not(.disabled) {\n box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n outline: none;\n }\n`;\nconst SwitcherButton = styled.div`\n display: flex;\n margin-left: auto;\n\n line-height: 48px;\n button:last-child {\n margin: 0 !important;\n }\n`;\n\ntype Props = {\n name: string;\n navigationOptions?: NavOption[];\n secondaryNavigationOptions?: NavOption[];\n secondaryButton?: NavButton;\n actions?: ActionOptions;\n clickMenuAction: () => void;\n firstName: string;\n lastName: string;\n email: string;\n signout?: (e: any) => void;\n isAuthenticated?: boolean;\n notifications?: NavOption[];\n switcherAction?: () => void;\n accountSection?: UserMenuItem[];\n organizationSection?: UserMenuItem[];\n supportSection?: UserMenuItem[];\n accountMenuHeader: string;\n signOutLabel: string;\n organizationName: string;\n useUserMenu: boolean \| undefined;\n showUserMenu: boolean;\n setShowUserMenu: (show: boolean) => void;\n};\n\nconst MobileMenu = ({\n clickMenuAction,\n navigationOptions,\n actions,\n firstName,\n lastName,\n email,\n signout,\n notifications,\n accountSection,\n organizationSection,\n supportSection,\n switcherAction,\n accountMenuHeader,\n signOutLabel,\n organizationName,\n useUserMenu,\n showUserMenu,\n setShowUserMenu,\n}: Props) => {\n const [showNotificationMenu, setShowNotificationMenu] = React.useState<boolean>(false);\n const notificationMenuRef = React.useRef(null);\n const userMenuRef = React.useRef(null);\n const userRef = React.useRef(null);\n\n const location = useLocation();\n\n if (actions?.user) {\n actions.user = () => setShowUserMenu(true);\n }\n if (actions?.notification) {\n actions.notification = () => setShowNotificationMenu(true);\n }\n\n const fireAction = (action: (() => void) \| undefined, ref: React.MutableRefObject<HTMLButtonElement \| null> \| undefined = undefined) => {\n ref?.current?.blur();\n !!action && action();\n };\n\n const isPressingEnter = (e: any) => {\n if (e.key === 'Enter') {\n e.preventDefault();\n e.stopPropagation();\n return true;\n }\n return false;\n };\n\n React.useEffect(() => {\n clickMenuAction();\n }, [location]);\n\n return (\n <>\n {actions?.notification && (\n <MenuWrapper ref={notificationMenuRef} className={showNotificationMenu ? 'open' : ''} isVisible={showNotificationMenu}>\n <MobileActionMenu\n name=\"Notifications\"\n clickMenuAction={() => setShowNotificationMenu(false)}\n navigationOptions={notifications}\n actionList={{\n notification: () => {},\n }}\n />\n </MenuWrapper>\n )}\n {actions?.user && (\n <MenuWrapper ref={userMenuRef} className={showUserMenu ? 'open' : ''} isVisible={showUserMenu}>\n <MobileUserMenu\n accountMenuHeader={accountMenuHeader}\n firstName={firstName}\n lastName={lastName}\n email={email}\n organizationName={organizationName}\n clickMenuAction={clickMenuAction}\n accountSection={accountSection}\n organizationSection={organizationSection}\n supportSection={supportSection}\n signOut={signout}\n signOutLabel={signOutLabel}\n />\n </MenuWrapper>\n )}\n <FirstRowLayout>\n {firstName && lastName && (\n <AvatarContainer\n id=\"avatarContainer\"\n ref={userRef}\n onClick={actions?.user}\n onKeyDown={(e: any) => (isPressingEnter(e) ? fireAction(actions?.user, userRef) : null)}\n inMobileMenu={true}\n hideOnLowWidth={false}>\n <Avatar size={36} firstName={firstName} lastName={lastName} color={COLORS.primary_500} profileMenuLink=\"#TODO\" />\n </AvatarContainer>\n )}\n {actions?.notification && (\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={false}\n isInMobileMenu={true}\n action={() => fireAction(actions?.notification)}\n onKeyPress={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification) : null)}>\n <Notification size=\"24px\" />\n </IconButton>\n )}\n <Right>\n <Actions\n actions={actions}\n firstName={firstName}\n lastName={lastName}\n isInMobileMenu={true}\n hideOnLowWidth={false}\n useUserMenu={useUserMenu}\n setShowUserMenu={setShowUserMenu}\n />\n <IconButton variant=\"secondary\" shape=\"circular\" action={() => clickMenuAction()} isInMobileMenu={true}>\n <Close size=\"24px\" />\n </IconButton>\n </Right>\n </FirstRowLayout>\n <MenuSection>\n <MenuSectionList>\n {navigationOptions?.map((no) => (\n <li key={no.label}>\n <StyledNavItem\n as={NavLink}\n exact={no?.exact}\n to={no.to}\n onClick={() => {\n if (no?.onClick) {\n no?.onClick();\n }\n }}>\n {no.label}\n </StyledNavItem>\n </li>\n ))}\n </MenuSectionList>\n </MenuSection>\n\n <BottomPinnedSection>\n <MenuSection style={{ padding: '0 12px 12px 12px', margin: '0' }}>\n <MenuSectionList>\n <BottomRowLayout>\n <LaerdalLogo />\n {switcherAction && (\n <SwitcherButton>\n <SwitchButton onClick={() => switcherAction()}>Switch site</SwitchButton>{' '}\n <IconButton\n variant={'secondary'}\n shape={'circular'}\n hideOnLowWidth={false}\n isInMobileMenu={true}\n id=\"globalNavAppsButton\"\n action={() => switcherAction()}\n onKeyPress={(e: any) => (isPressingEnter(e) ? switcherAction() : null)}>\n <SwitchApp size=\"24px\" />\n </IconButton>\n </SwitcherButton>\n )}\n </BottomRowLayout>\n </MenuSectionList>\n </MenuSection>\n </BottomPinnedSection>\n </>\n );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}

package/dist/esm/InputFields/DatepickerField.js CHANGED Viewed

@@ -26,13 +26,17 @@ import COLORS from '../styles/colors';
 import { Calendar, TechnicalWarning } from '../icons/systemicons/SystemIcons';
 import { IconButton } from '../Button/index';
 import { DatepickerFieldHeader } from './DatepickerFieldHeader';
-import { scrollBarStyling } from '../styles';
+import { ComponentTextStyle, scrollBarStyling } from '../styles';
 /**
  * Import custom styles.
  */
-import { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';
+import { ErrorMessage, InputFieldStyling, InputWrapper } from './styling';
 import 'react-datepicker/dist/react-datepicker.css';
+import { ComponentMStyling, ComponentSStyling } from '../styles/typography';
+/**
+ * Add custom types.
+ */
 /**
  * Add custom styles.
@@ -131,13 +135,12 @@ const DatePickerContainer = styled.div`
     }
     .react-datepicker__current-month {
-      color: ${COLORS.neutral_600};
-      font-weight: 700;
       height: 48px;
       display: inline-flex;
       align-items: center;
-      font-size: 19px;
       margin-right: 5px;
+      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}
     }
     .react-datepicker__year {
@@ -153,30 +156,28 @@ const DatePickerContainer = styled.div`
     }
     .react-datepicker__day-name {
-      color: ${COLORS.neutral_600};
-      font-weight: 400;
       display: inline-flex;
       justify-content: center;
       align-items: center;
       height: 48px;
-      font-size: 19px;
       margin: 0px;
       width: 48px;
+      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
     }
     .react-datepicker__year-text {
-      color: ${COLORS.neutral_600};
       background: ${COLORS.white};
-      font-weight: 400;
       border: none;
       display: inline-flex;
       justify-content: center;
       align-items: center;
-      font-size: 19px;
       margin-top: 20px;
       padding-top: 10px;
       padding-bottom: 10px;
+      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
       &.react-datepicker__year-text--disabled {
         display: none;
       }
@@ -207,9 +208,7 @@ const DatePickerContainer = styled.div`
     }
     .react-datepicker__day {
-      color: ${COLORS.neutral_600};
       background: ${COLORS.white};
-      font-weight: 400;
       border: none;
       display: inline-flex;
       justify-content: center;
@@ -217,8 +216,8 @@ const DatePickerContainer = styled.div`
       height: 40px;
       width: 40px;
       margin: 4px;
-      font-size: 19px;
+      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}
       &.react-datepicker__day--keyboard-selected {
         color: ${COLORS.neutral_600};
         background: ${COLORS.white};

package/dist/esm/InputFields/DatepickerField.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","css","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","IconButton","DatepickerFieldHeader","scrollBarStyling","InputFieldStyling","InputWrapper","ErrorMessage","DatePickerContainer","div","props","margin","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","neutral_600","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","disabled","locked","primary_600","StyledInputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","id","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","useRef","datepickerRef","tabbedHere","setTabbedHere","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","supressFocusRef","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","setOpen","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","e","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","critical_400"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,OAAOC,EAAP,MAAe,uBAAf;AACA,OAAOC,MAAP,MAAmB,QAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAASC,QAAT,EAAmBC,gBAAnB,QAA2C,kCAA3C;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,qBAAT,QAAmE,yBAAnE;AACA,SAASC,gBAAT,QAAiC,WAAjC;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,EAA4BC,YAA5B,EAA0CC,YAA1C,QAA8D,WAA9D;AACA,OAAO,4CAAP;;AAwBA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAGd,MAAM,CAACe,GAA6C;AAChF;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBZ,MAAM,CAACa,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBb,MAAM,CAACc,WAAY;AACzC,mCAAmCd,MAAM,CAACe,QAAS,iBAAgBf,MAAM,CAACgB,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BhB,MAAM,CAACiB,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCjB,MAAM,CAACkB,WAAY;AACpD,oBAAoBlB,MAAM,CAACiB,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAACQ,UAAP,GAAoB,MAApB,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA,eAAenB,MAAM,CAACoB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQf,gBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeL,MAAM,CAACoB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAepB,MAAM,CAACoB,WAAY;AAClC,oBAAoBpB,MAAM,CAACqB,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACoB,WAAY;AACpC,sBAAsBpB,MAAM,CAACqB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACsB,WAAY;AACpC,sBAAsBtB,MAAM,CAACa,UAAW;AACxC;AACA;AACA;AACA,iBAAiBb,MAAM,CAACuB,WAAY;AACpC,sBAAsBvB,MAAM,CAACc,WAAY;AACzC,mCAAmCd,MAAM,CAACe,QAAS,iBAAgBf,MAAM,CAACgB,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBhB,MAAM,CAACqB,KAAM;AAC9B,sBAAsBrB,MAAM,CAACwB,WAAY;AACzC;AACA;AACA;AACA;AACA,eAAexB,MAAM,CAACoB,WAAY;AAClC,oBAAoBpB,MAAM,CAACqB,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACoB,WAAY;AACpC,sBAAsBpB,MAAM,CAACqB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACsB,WAAY;AACpC,sBAAsBtB,MAAM,CAACa,UAAW;AACxC;AACA;AACA;AACA,iBAAiBb,MAAM,CAACuB,WAAY;AACpC,sBAAsBvB,MAAM,CAACc,WAAY;AACzC,mCAAmCd,MAAM,CAACe,QAAS,iBAAgBf,MAAM,CAACgB,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBhB,MAAM,CAACqB,KAAM;AAC9B,sBAAsBrB,MAAM,CAACwB,WAAY;AACzC;AACA;AACA;AACA;AACA,iBAAiBxB,MAAM,CAACyB,WAAY;AACpC,sBAAsBzB,MAAM,CAAC0B,WAAY;AACzC;AACA;AACA,mBAAmB1B,MAAM,CAACsB,WAAY;AACtC,wBAAwBtB,MAAM,CAACa,UAAW;AAC1C;AACA;AACA;AACA,mBAAmBb,MAAM,CAACuB,WAAY;AACtC,wBAAwBvB,MAAM,CAACc,WAAY;AAC3C,qCAAqCd,MAAM,CAACe,QAAS,iBAAgBf,MAAM,CAACgB,KAAM;AAClF;AACA;AACA;AACA;AACA;AACA,CAjOA;AAmOA,MAAMW,aAAa,GAAGhC,MAAM,CAACe,GAA8C;AAC3E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAKC,KAAD,IACAA,KAAK,EAAEiB,QAAP,IAAmBjB,KAAK,EAAEkB,MAA1B,GACI,EADJ,GAEIjC,GAAI;AACZ;AACA;AACA;AACA,sBAAsBI,MAAM,CAAC8B,WAAY;AACzC;AACA;AACA,SAAU;AACV;AACA,gDAAgD9B,MAAM,CAACuB,WAAY;AACnE,6CAA6CvB,MAAM,CAACuB,WAAY;AAChE,wCAAwCvB,MAAM,CAACuB,WAAY;AAC3D;AACA,CA9BA;AAgCA,MAAMQ,uBAAuB,GAAGpC,MAAM,CAACW,iBAAD,CAAoB;AAC1D;AACA,wCAAwCN,MAAM,CAACgC,WAAY;AAC3D;AACA,eAAehC,MAAM,CAAC8B,WAAY;AAClC;AACA;AACA,wBAAwB9B,MAAM,CAACa,UAAW;AAC1C,aAAab,MAAM,CAAC8B,WAAY;AAChC;AACA;AACA,wBAAwB9B,MAAM,CAACc,WAAY;AAC3C,aAAad,MAAM,CAACuB,WAAY;AAChC,wCAAwCvB,MAAM,CAACiC,WAAY;AAC3D;AACA,eAAejC,MAAM,CAACuB,WAAY;AAClC;AACA;AACA;AACA;AACA,wBAAwBvB,MAAM,CAACqB,KAAM;AACrC;AACA,eAAerB,MAAM,CAACkC,WAAY;AAClC;AACA;AACA,0BAA0BlC,MAAM,CAACqB,KAAM;AACvC;AACA;AACA,CA5BA;;AA8BA,MAAMc,eAAe,GAAG,CAAC;AACvBC,EAAAA,EADuB;AAEvBR,EAAAA,QAFuB;AAGvBC,EAAAA,MAHuB;AAIvBQ,EAAAA,QAJuB;AAKvBC,EAAAA,QALuB;AAMvBC,EAAAA,KANuB;AAOvBC,EAAAA,iBAPuB;AAQvBC,EAAAA,UARuB;AASvBC,EAAAA,YATuB;AAUvBC,EAAAA,WAVuB;AAWvBC,EAAAA,QAXuB;AAYvBzB,EAAAA,UAZuB;AAavB0B,EAAAA,sBAbuB;AAcvBC,EAAAA,qBAduB;AAevBlC,EAAAA;AAfuB,CAAD,KAgBI;AAC1B;AACA,QAAMmC,QAAQ,GAAGrD,KAAK,CAACsD,MAAN,CAAkB,IAAlB,CAAjB;AACA,QAAMC,aAAa,GAAGvD,KAAK,CAACsD,MAAN,CAAkB,IAAlB,CAAtB;AACA,QAAM,CAACE,UAAD,EAAaC,aAAb,IAA8BzD,KAAK,CAAC0D,QAAN,CAAwB,KAAxB,CAApC;AACA,QAAM,CAACC,eAAD,EAAkBC,kBAAlB,IAAwC5D,KAAK,CAAC0D,QAAN,CAAuB,CAAC,CAAxB,CAA9C;AACA,QAAM,CAACG,cAAD,EAAiBC,iBAAjB,IAAsC9D,KAAK,CAAC0D,QAAN,CAAwB,KAAxB,CAA5C;AACA,QAAM,CAACK,MAAD,EAASC,SAAT,IAAsBhE,KAAK,CAAC0D,QAAN,CAA4B,IAA5B,CAA5B;AACA,QAAMO,eAAe,GAAGjE,KAAK,CAACsD,MAAN,CAAkB,IAAlB,CAAxB;AAEA;AACF;AACA;;AACEtD,EAAAA,KAAK,CAACkE,SAAN,CAAgB,MAAM;AACpB,QAAIrB,KAAJ,EAAWQ,QAAQ,CAACc,OAAT,CAAiBtB,KAAjB,GAAyBxC,MAAM,CAACwC,KAAD,CAAN,CAAcuB,MAAd,CAAqBrB,UAAU,GAAGA,UAAH,GAAgB,eAA/C,CAAzB;AACZ,GAFD,EAEG,CAACF,KAAD,CAFH;AAIA7C,EAAAA,KAAK,CAACkE,SAAN,CAAgB,MAAM;AACpB,QAAIL,cAAJ,EAAoB;AAClB;AACA;AACA,YAAMQ,YAAY,GAAGC,QAAQ,CAACC,sBAAT,CAAgC,uCAAhC,EAAyE,CAAzE,CAArB;AACA,YAAMC,cAAc,GAAGH,YAAY,EAAEI,aAAd,EAA6BA,aAApD;AACA,UAAIJ,YAAY,IAAIG,cAApB,EAAoCA,cAAc,CAACE,SAAf,GAA2BL,YAAY,CAACM,SAAb,GAAyB,IAAIN,YAAY,CAACO,YAArE;AACrC;AACF,GARD,EAQG,CAACf,cAAD,CARH,EAjB0B,CA2B1B;AACA;;AACA7D,EAAAA,KAAK,CAACkE,SAAN,CAAgB,MAAM;AACpB,QAAIH,MAAJ,EAAY;AACVR,MAAAA,aAAa,CAACY,OAAd,CAAsBU,OAAtB,CAA8B,IAA9B,EADU,CAEV;AACD;AACF,GALD,EAKG,CAACd,MAAD,CALH;;AAOA,QAAMe,kBAAkB,GAAG,MAAM;AAC/B,QAAIf,MAAJ,EAAYC,SAAS,CAAC,IAAD,CAAT;AACb,GAFD;;AAIA,MAAIe,OAAO,GAAG,IAAIC,IAAJ,CAASnC,KAAK,IAAI,IAAImC,IAAJ,CAASnC,KAAT,IAAkB,IAAImC,IAAJ,EAA3B,GAAwC,IAAIA,IAAJ,CAASnC,KAAT,CAAxC,GAA0D,IAAImC,IAAJ,EAAnE,CAAd;AACAD,EAAAA,OAAO,CAACE,WAAR,CAAoBF,OAAO,CAACG,WAAR,MAAyB9B,qBAAqB,IAAI,EAAlD,CAApB,EAzC0B,CA2C1B;AACA;;AACA,MAAI+B,OAAO,GAAG,IAAIH,IAAJ,CAASnC,KAAK,IAAI,IAAImC,IAAJ,CAASnC,KAAT,IAAkB,IAAImC,IAAJ,EAA3B,GAAwC,IAAIA,IAAJ,CAASnC,KAAT,CAAxC,GAA0D,IAAImC,IAAJ,EAAnE,CAAd;AACA,QAAMI,WAAW,GAAGC,IAAI,CAACC,KAAL,CAAW,CAACH,OAAO,CAACD,WAAR,MAAyB/B,sBAAsB,IAAI,EAAnD,CAAD,IAA2D,CAAtE,CAApB;AAEA,sBACE,uDAEE,oBAAC,mBAAD;AAAqB,IAAA,UAAU,EAAEU,cAAjC;AAAiD,IAAA,MAAM,EAAE3C,MAAM,IAAI;AAAnE,kBACE,oBAAC,UAAD;AACE,IAAA,GAAG,EAAEqC,aADP;AAEE,IAAA,cAAc,EAAEuB,kBAFlB;AAGE,IAAA,QAAQ,EAAGS,CAAD,IAAY;AACpB,UAAI5C,QAAJ,EAAc;AACZ,YAAIkB,cAAJ,EAAoB;AAClB,gBAAM2B,OAAO,GAAG,IAAIR,IAAJ,EAAhB;AACAQ,UAAAA,OAAO,CAACP,WAAR,CAAoBM,CAAC,CAACL,WAAF,EAApB;AACAM,UAAAA,OAAO,CAACC,QAAR,CAAiB9B,eAAjB;AACAK,UAAAA,SAAS,CAACwB,OAAD,CAAT;AACD,SALD,MAKO7C,QAAQ,CAAC4C,CAAD,CAAR;AACR;;AACD,UAAI1B,cAAJ,EAAoBC,iBAAiB,CAAC,KAAD,CAAjB;AACrB,KAbH;AAcE,IAAA,QAAQ,EAAE5B,QAAQ,IAAIC,MAdxB;AAeE,IAAA,MAAM,EAAE/B,EAfV;AAgBE,IAAA,cAAc,EAAEyD,cAhBlB,CAiBE;AAjBF;AAkBE,IAAA,cAAc,EAAEA,cAAc,GAAGuB,WAAH,GAAiBM,SAlBjD;AAmBE,IAAA,OAAO,EAAE7B,cAAc,GAAGkB,OAAH,GAAaW,SAnBtC;AAoBE,IAAA,QAAQ,EAAE7C,KApBZ;AAqBE,IAAA,UAAU,EAAEkB,MAAM,IAAI2B,SArBxB;AAsBE,IAAA,mBAAmB,EAAE,IAtBvB;AAuBE,IAAA,kBAAkB,EAChBjE,UAAU,GACLkE,MAAD,iBACE3F,KAAK,CAAC4F,aAAN,CACElF,qBADF,kCAEOiF,MAFP;AAEe/B,MAAAA,kBAFf;AAEmCiC,MAAAA,iBAAiB,EAAE,CAFtD;AAEyDhC,MAAAA,cAAc,EAAEA,cAFzE;AAEyFC,MAAAA,iBAAiB,EAAEA;AAF5G,QAGE,IAHF,CAFI,GAON4B,SA/BR;AAiCE,IAAA,WAAW,eACT,oBAAC,YAAD;AAAc,MAAA,QAAQ,EAAExD,QAAxB;AAAkC,MAAA,MAAM,EAAEC,MAA1C;AAAkD,MAAA,QAAQ,EAAED,QAAQ,GAAG,CAAC,CAAJ,GAAQ;AAA5E,oBACE;AAAK,MAAA,KAAK,EAAE;AAAE4D,QAAAA,OAAO,EAAE;AAAX;AAAZ,oBACE,oBAAC,aAAD;AAAe,MAAA,MAAM,EAAE3D,MAAvB;AAA+B,MAAA,QAAQ,EAAED;AAAzC,oBACE,oBAAC,uBAAD;AACE,MAAA,EAAE,EAAEQ,EADN;AAEE,MAAA,GAAG,EAAEW,QAFP;AAGE,MAAA,IAAI,EAAC,MAHP;AAIE,MAAA,IAAI,EAAC,YAJP;AAKE,MAAA,QAAQ,EAAE,IALZ;AAME,MAAA,SAAS,EAAET,QAAQ,GAAG,OAAH,GAAa,EANlC;AAOE,MAAA,QAAQ,EAAE,CAPZ;AAQE,MAAA,YAAY,EAAEI,YARhB;AASE,MAAA,WAAW,EAAEC,WATf;AAUE,MAAA,QAAQ,EAAEf,QAVZ;AAWE,MAAA,MAAM,EAAEC,MAXV;AAYE,MAAA,QAAQ,EAAEe,QAZZ;AAaE,MAAA,UAAU,EAAEM,UAbd;AAcE,MAAA,MAAM,EAAE,MAAMC,aAAa,CAAC,KAAD,CAd7B;AAeE,MAAA,WAAW,EAAG8B,CAAD,IAAY;AACvB,YAAI,EAAEpD,MAAM,IAAID,QAAZ,KAAyB,CAACsB,UAA9B,EAA0CS,eAAe,CAACE,OAAhB,GAA0B,IAA1B;AAC3C,OAjBH;AAkBE,MAAA,OAAO,EAAGoB,CAAD,IAAY;AACnB,YAAI,EAAEpD,MAAM,IAAID,QAAZ,CAAJ,EAA2B;AACzB,cAAI,CAAC+B,eAAe,CAACE,OAArB,EAA8BV,aAAa,CAAC,IAAD,CAAb,CAA9B,KACKQ,eAAe,CAACE,OAAhB,GAA0B,KAA1B;AACN;AACF;AAvBH,MADF,eA0BE,oBAAC,UAAD;AAAY,MAAA,OAAO,EAAC,WAApB;AAAgC,MAAA,KAAK,EAAC,QAAtC;AAA+C,MAAA,QAAQ,EAAE,CAAC,CAA1D;AAA6D,MAAA,MAAM,EAAE,MAAM,CAAE,CAA7E;AAA+E,MAAA,QAAQ,EAAEjC,QAAQ,IAAIC;AAArG,oBACE,oBAAC,QAAD;AAAU,MAAA,IAAI,EAAC;AAAf,MADF,CA1BF,CADF,CADF;AAlCJ,IADF,CAFF,EA4EGW,iBAAiB,iBAChB,oBAAC,YAAD,qBACE,oBAAC,gBAAD;AAAkB,IAAA,IAAI,EAAC,MAAvB;AAA8B,IAAA,KAAK,EAAExC,MAAM,CAACyF;AAA5C,IADF,eAEE,kCAAOjD,iBAAP,CAFF,CA7EJ,CADF;AAqFD,CArJD;;;AArTEJ,EAAAA,E;AACAR,EAAAA,Q;AACAC,EAAAA,M;AACAQ,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,K;AACAE,EAAAA,U;AACAD,EAAAA,iB;AACAE,EAAAA,Y;AACAC,EAAAA,W;AACAC,EAAAA,Q;AACAzB,EAAAA,U;AACA0B,EAAAA,sB;AACAC,EAAAA,qB;AACAlC,EAAAA,M;;AA8bF,eAAeuB,eAAf","sourcesContent":["/*\n Import react libraries.\n /\nimport as React from 'react';\n\n/*\n Import third-party libraries.\n /\nimport styled, { css } from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/\n Import custom components.\n /\nimport COLORS from '../styles/colors';\nimport { Calendar, TechnicalWarning } from '../icons/systemicons/SystemIcons';\nimport { IconButton } from '../Button/index';\nimport { DatepickerFieldHeader, DatepickerFieldHeaderParams } from './DatepickerFieldHeader';\nimport { scrollBarStyling } from '../styles';\n\n/\n Import custom styles.\n /\nimport { InputFieldStyling, InputWrapper, ErrorMessage } from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport { CommonInteractionStyling } from '../common';\n\n/\n Add custom types.\n /\ntype DatepickerFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (date: Date) => void;\n hasError?: boolean;\n value?: Date;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/\n Add custom styles.\n /\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n > div {\n display: block;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n color: ${COLORS.neutral_600};\n font-weight: 700;\n height: 48px;\n display: inline-flex;\n align-items: center;\n font-size: 19px;\n margin-right: 5px;\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__day-name {\n color: ${COLORS.neutral_600};\n font-weight: 400;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n font-size: 19px;\n margin: 0px;\n width: 48px;\n }\n\n .react-datepicker__year-text {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n font-size: 19px;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n font-size: 19px;\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n }\n }\n }\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n display: flex;\n flex-direction: row;\n position: relative;\n\n > button {\n position: absolute;\n right: 4px;\n top: 4px;\n\n svg {\n }\n }\n\n ${(props) =>\n props?.disabled \|\| props?.locked\n ? ''\n : css`\n &:hover {\n svg,\n svg path {\n fill: ${COLORS.primary_600} !important;\n }\n }\n `}\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n span {\n color: ${COLORS.neutral_300};\n }\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst DatepickerField = ({\n id,\n disabled,\n locked,\n onChange,\n hasError,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n}: DatepickerFieldProps) => {\n // Globally used variables within the component\n const inputRef = React.useRef<any>(null);\n const datepickerRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date \| null>(null);\n const supressFocusRef = React.useRef<any>(null);\n\n /\n Format the date in a specific way.\n /\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n return (\n <>\n {/* Let's render the input itself /}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin \|\| ''}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled \|\| locked}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: DatepickerFieldHeaderParams) =>\n React.createElement(\n DatepickerFieldHeader,\n { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} locked={locked} tabIndex={disabled ? -1 : 0}>\n <div style={{ display: 'block' }}>\n <DatepickerRow locked={locked} disabled={disabled}>\n <StyledInputFieldStyling\n id={id}\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n readOnly={true}\n className={hasError ? 'error' : ''}\n tabIndex={0}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n onMouseDown={(e: any) => {\n if (!(locked \|\| disabled) && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!(locked \|\| disabled)) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n />\n <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled \|\| locked}>\n <Calendar size=\"24\" />\n </IconButton>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/ If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
1	+ {"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","css","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","IconButton","DatepickerFieldHeader","ComponentTextStyle","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","DatePickerContainer","div","props","margin","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Regular","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","disabled","locked","primary_600","StyledInputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","id","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","useRef","datepickerRef","tabbedHere","setTabbedHere","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","supressFocusRef","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","setOpen","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","e","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","critical_400"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,OAAOC,EAAP,MAAe,uBAAf;AACA,OAAOC,MAAP,MAAmB,QAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAAQC,QAAR,EAAkBC,gBAAlB,QAAyC,kCAAzC;AACA,SAAQC,UAAR,QAAyB,iBAAzB;AACA,SAAQC,qBAAR,QAAiE,yBAAjE;AACA,SAAQC,kBAAR,EAA4BC,gBAA5B,QAAmD,WAAnD;AAEA;AACA;AACA;;AACA,SAAQC,YAAR,EAAsBC,iBAAtB,EAAyCC,YAAzC,QAA4D,WAA5D;AACA,OAAO,4CAAP;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,sBAAnD;AAEA;AACA;AACA;;AAmBA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAGjB,MAAM,CAACkB,GAA6C;AAChF;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBf,MAAM,CAACgB,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBhB,MAAM,CAACiB,WAAY;AACzC,mCAAmCjB,MAAM,CAACkB,QAAS,iBAAgBlB,MAAM,CAACmB,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BnB,MAAM,CAACoB,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCpB,MAAM,CAACqB,WAAY;AACpD,oBAAoBrB,MAAM,CAACoB,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAACQ,UAAP,GAAoB,MAApB,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQX,iBAAiB,CAACN,kBAAkB,CAACkB,IAApB,EAA0BvB,MAAM,CAACwB,WAAjC,CAA8C;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,QAAQlB,gBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQI,iBAAiB,CAACL,kBAAkB,CAACoB,OAApB,EAA6BzB,MAAM,CAACwB,WAApC,CAAiD;AAC1E;AACA;AACA;AACA,oBAAoBxB,MAAM,CAAC0B,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,iBAAiB,CAACL,kBAAkB,CAACoB,OAApB,EAA6BzB,MAAM,CAACwB,WAApC,CAAiD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBxB,MAAM,CAACwB,WAAY;AACpC,sBAAsBxB,MAAM,CAAC0B,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiB1B,MAAM,CAAC2B,WAAY;AACpC,sBAAsB3B,MAAM,CAACgB,UAAW;AACxC;AACA;AACA;AACA,iBAAiBhB,MAAM,CAAC4B,WAAY;AACpC,sBAAsB5B,MAAM,CAACiB,WAAY;AACzC,mCAAmCjB,MAAM,CAACkB,QAAS,iBAAgBlB,MAAM,CAACmB,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBnB,MAAM,CAAC0B,KAAM;AAC9B,sBAAsB1B,MAAM,CAAC6B,WAAY;AACzC;AACA;AACA;AACA;AACA,oBAAoB7B,MAAM,CAAC0B,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQhB,iBAAiB,CAACL,kBAAkB,CAACoB,OAApB,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","sourcesContent":["/*\n Import react libraries.\n /\nimport as React from 'react';\n\n/*\n Import third-party libraries.\n /\nimport styled, {css} from 'styled-components';\nimport DatePicker from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport moment from 'moment';\n\n/\n Import custom components.\n /\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {IconButton} from '../Button/index';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\n\n/\n Import custom styles.\n /\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\n\n/\n Add custom types.\n /\ntype DatepickerFieldProps = {\n id: string;\n disabled?: boolean;\n locked?: boolean;\n onChange?: (date: Date) => void;\n hasError?: boolean;\n value?: Date;\n dateFormat?: string;\n validationMessage?: string;\n autoComplete?: string;\n placeholder?: string;\n required?: boolean;\n yearPicker?: boolean;\n yearsBeforeCurrentDate?: number;\n yearsAfterCurrentDate?: number;\n margin?: string;\n};\n\n/\n Add custom styles.\n /\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n > div {\n display: block;\n ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n\n .react-datepicker {\n box-sizing: border-box;\n box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n border: 1px solid #e5e5e5;\n }\n\n .react-datepicker__navigation {\n line-height: normal;\n text-indent: inherit;\n border: none;\n border-radius: 4px;\n height: 32px;\n width: 32px;\n outline: none;\n margin: 0px;\n color: transparent;\n\n &:hover {\n background: ${COLORS.primary_20};\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n }\n }\n\n &:focus {\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n }\n }\n\n &::before {\n text-align: center;\n display: inline-block;\n content: '';\n height: 32px;\n width: 32px;\n vertical-align: middle;\n }\n\n &.react-datepicker__navigation--next::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n\n &.react-datepicker__navigation--previous::before {\n background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n }\n }\n\n .react-datepicker__month-container,\n .react-datepicker__year--container {\n width: 336px;\n }\n\n .react-datepicker__month {\n margin: 0px;\n }\n\n .react-datepicker__triangle {\n left: 50% !important;\n display: none;\n }\n .react-datepicker-popper[data-placement^='bottom'] {\n margin-top: 0;\n }\n\n .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n border-bottom-color: ${COLORS.neutral_20};\n }\n\n .react-datepicker__header {\n border-bottom: 1px solid ${COLORS.neutral_200};\n background: ${COLORS.neutral_20};\n height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n padding-top: 0px;\n }\n\n .react-datepicker__current-month {\n height: 48px;\n display: inline-flex;\n align-items: center;\n margin-right: 5px;\n\n ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n }\n\n .react-datepicker__year {\n max-height: 300px;\n overflow-y: scroll;\n\n ${scrollBarStyling}\n }\n\n .react-datepicker__year-wrapper {\n max-width: 100%;\n justify-content: space-around;\n }\n\n .react-datepicker__day-name {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 48px;\n margin: 0px;\n width: 48px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n }\n\n .react-datepicker__year-text {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin-top: 20px;\n padding-top: 10px;\n padding-bottom: 10px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n\n &.react-datepicker__year-text--disabled {\n display: none;\n }\n\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__year-text--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n }\n\n .react-datepicker__day {\n background: ${COLORS.white};\n border: none;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n width: 40px;\n margin: 4px;\n\n ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n &.react-datepicker__day--keyboard-selected {\n color: ${COLORS.neutral_600};\n background: ${COLORS.white};\n font-weight: 400;\n border: none;\n }\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n\n &.react-datepicker__day--selected {\n color: ${COLORS.white} !important;\n background: ${COLORS.primary_500} !important;\n }\n\n &.react-datepicker__day--today {\n border-radius: 0.3rem;\n color: ${COLORS.neutral_700};\n background: ${COLORS.neutral_100};\n\n &:hover {\n color: ${COLORS.primary_700};\n background: ${COLORS.primary_20};\n }\n\n &:focus {\n color: ${COLORS.primary_800};\n background: ${COLORS.primary_100};\n box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\n outline: none;\n }\n }\n }\n }\n`;\n\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\n display: flex;\n flex-direction: row;\n position: relative;\n\n > button {\n position: absolute;\n right: 4px;\n top: 4px;\n\n svg {\n }\n }\n\n ${(props) =>\n props?.disabled \|\| props?.locked\n ? ''\n : css`\n &:hover {\n svg,\n svg path {\n fill: ${COLORS.primary_600} !important;\n }\n }\n `}\n &:focus-within {\n -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\n }\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n &:hover {\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n ::placeholder {\n color: ${COLORS.primary_600};\n }\n cursor: pointer;\n background-color: ${COLORS.primary_20};\n color: ${COLORS.primary_600};\n }\n &:active {\n background-color: ${COLORS.primary_100};\n color: ${COLORS.primary_800};\n box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n ::placeholder {\n color: ${COLORS.primary_800};\n }\n }\n &:disabled {\n box-shadow: none;\n background-color: ${COLORS.white};\n span {\n color: ${COLORS.neutral_300};\n }\n &::after {\n background-color: ${COLORS.white};\n }\n }\n`;\n\nconst DatepickerField = ({\n id,\n disabled,\n locked,\n onChange,\n hasError,\n value,\n validationMessage,\n dateFormat,\n autoComplete,\n placeholder,\n required,\n yearPicker,\n yearsBeforeCurrentDate,\n yearsAfterCurrentDate,\n margin,\n}: DatepickerFieldProps) => {\n // Globally used variables within the component\n const inputRef = React.useRef<any>(null);\n const datepickerRef = React.useRef<any>(null);\n const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\n const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n const [openAt, setOpenAt] = React.useState<Date \| null>(null);\n const supressFocusRef = React.useRef<any>(null);\n\n /\n Format the date in a specific way.\n /\n React.useEffect(() => {\n if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n }, [value]);\n\n React.useEffect(() => {\n if (yearPickerMode) {\n //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n //we have to touch DOM directly\n const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n const dropdownParent = selectedDate?.parentElement?.parentElement;\n if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 selectedDate.offsetHeight;\n }\n }, [yearPickerMode]);\n\n //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n //otherwise after year selection datepicker will show January month of the selected year\n React.useEffect(() => {\n if (openAt) {\n datepickerRef.current.setOpen(true);\n //setOpenAt(null);\n }\n }, [openAt]);\n\n const handleCalendarOpen = () => {\n if (openAt) setOpenAt(null);\n };\n\n let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n //itemsNumber - controls number of year select options generated in the dropdown\n //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n return (\n <>\n {/* Let's render the input itself /}\n <DatePickerContainer yearPicker={yearPickerMode} margin={margin \|\| ''}>\n <DatePicker\n ref={datepickerRef}\n onCalendarOpen={handleCalendarOpen}\n onChange={(e: any) => {\n if (onChange) {\n if (yearPickerMode) {\n const newDate = new Date();\n newDate.setFullYear(e.getFullYear());\n newDate.setMonth(activeMonthPage);\n setOpenAt(newDate);\n } else onChange(e);\n }\n if (yearPickerMode) setYearPickerMode(false);\n }}\n disabled={disabled \|\| locked}\n locale={en}\n showYearPicker={yearPickerMode}\n //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n maxDate={yearPickerMode ? maxDate : undefined}\n selected={value}\n openToDate={openAt ?? undefined}\n shouldCloseOnSelect={true}\n renderCustomHeader={\n yearPicker\n ? (params: DatepickerFieldHeaderParams) =>\n React.createElement(\n DatepickerFieldHeader,\n { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\n null,\n )\n : undefined\n }\n customInput={\n <InputWrapper disabled={disabled} locked={locked} tabIndex={disabled ? -1 : 0}>\n <div style={{ display: 'block' }}>\n <DatepickerRow locked={locked} disabled={disabled}>\n <StyledInputFieldStyling\n id={id}\n ref={inputRef}\n type=\"text\"\n name=\"datepicker\"\n readOnly={true}\n className={hasError ? 'error' : ''}\n tabIndex={0}\n autoComplete={autoComplete}\n placeholder={placeholder}\n disabled={disabled}\n locked={locked}\n required={required}\n tabbedHere={tabbedHere}\n onBlur={() => setTabbedHere(false)}\n onMouseDown={(e: any) => {\n if (!(locked \|\| disabled) && !tabbedHere) supressFocusRef.current = true;\n }}\n onFocus={(e: any) => {\n if (!(locked \|\| disabled)) {\n if (!supressFocusRef.current) setTabbedHere(true);\n else supressFocusRef.current = false;\n }\n }}\n />\n <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled \|\| locked}>\n <Calendar size=\"24\" />\n </IconButton>\n </DatepickerRow>\n </div>\n </InputWrapper>\n }\n />\n </DatePickerContainer>\n\n {/ If there is an error, let's render the error */}\n {validationMessage && (\n <ErrorMessage>\n <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\n <span>{validationMessage}</span>\n </ErrorMessage>\n )}\n </>\n );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}