@laerdal/life-react-components 0.0.280-dev.1 → 0.0.280-dev.12.full

package/dist/js/Dropdown/DropdownFilter.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["InputField","styled","input","COLORS","black","neutral_600","BREAKPOINTS","MEDIUM","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","React","useState","isOpen","setIsOpen","isUp","setIsUp","isLoading","setIsLoading","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","currentSearchResult","setCurrentSearchResult","dropdownContentRef","useRef","styledFieldRef","inputRef","useEffect","options","filter","option","toUpperCase","indexOf","sort","handleClickOutside","e","current","contains","target","includes","setNewFocusedElement","index","newFocusedElement","document","getElementById","focus","handleKeyDown","keyCode","preventDefault","focusedNow","undefined","handleKeyPress","matches","c","toLowerCase","length","addEventListener","removeEventListener","determineDropUp","node","windowHeight","window","innerHeight","menuHeight","Math","min","instOffsetWithMenu","getBoundingClientRect","top","getElements","number","map","item","renderStandardDropdown","concat","stopPropagation","floor","random","value","renderButtonDropdown","join","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Attention, Information, ScrollArrowDown, ScrollArrowUp } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, DropdownContent, Dropdown, ButtonDropdownWrapper } from './CommonStyling';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\n\nconst InputField = styled.input`\n  font-weight: normal;\n  font-size: 18px;\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ${COLORS.neutral_600};\n    ${BREAKPOINTS.MEDIUM} {\n      font-size: 18px;\n    }\n    &.small {\n      font-size: 16px;\n    }\n    &.medium {\n      font-size: 18px;\n    }\n  }\n`;\n\ninterface DropdownFilterProps {\n  id: string;\n  list: string[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: 'small' | 'medium';\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst DropdownFilter = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  onInputChange,\n  initalValue,\n  required,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\n  margin,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<Boolean>(false);\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [currentSearchResult, setCurrentSearchResult] = React.useState<string[]>(list);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    var options = [...list];\n    if (!restartFilter && input !== '') {\n      options = options.filter((option) => option.toUpperCase().indexOf(input.toUpperCase()) !== -1);\n    }\n    if (!disableSorting) {\n      options = options.sort();\n    }\n    setCurrentSearchResult(options);\n  }, [input, list]);\n\n  const handleClickOutside = (e: any) => {\n    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target)) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n      }\n    }\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = document.getElementById(`${id}_${index}`);\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement.focus();\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setNewFocusedElement(0);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setNewFocusedElement(0);\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus();\n      }\n    }\n  };\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = currentSearchResult?.filter((c) => c.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0]);\n          setInput(matches[0]);\n        }\n        setIsOpen(!isOpen);\n        setNewFocusedElement(0);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n        setNewFocusedElement(0);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('keypress', handleKeyPress);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('keypress', handleKeyPress);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n  const determineDropUp = () => {\n    const options = list;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const getElements = () => {\n    if (locked || disabled) {\n      return <></>;\n    }\n    var number = 0;\n    if (currentSearchResult.length === 0) {\n      return (\n        <DropdownButton disabled>\n          <span>{messageOnNoResults}</span>\n        </DropdownButton>\n      );\n    }\n    return currentSearchResult.map((item) => {\n      return (\n        <DropdownButton\n          type=\"button\"\n          onClick={(e: any) => {\n            e.preventDefault();\n            setRestartFilter(true);\n            setInput(item);\n            onSelect && onSelect(item);\n            setIsOpen(false);\n            setFocused(null);\n          }}\n          className={item?.toLowerCase() === input?.toLowerCase() ? 'active' : ''}\n          key={item}\n          id={`${id}_${number++}`}>\n          <span>{item}</span>\n        </DropdownButton>\n      );\n    });\n  };\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n          inputRef.current?.focus();\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          id={`${id}_input`}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n\n        <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n          {isOpen && !locked && !disabled ? <ScrollArrowUp size=\"24px\" className={size ? size : ''} /> : <ScrollArrowDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        setIsOpen(!isOpen);\n        inputRef.current?.focus();\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n          {isOpen && !locked && !disabled ? <ScrollArrowUp size=\"24px\" className={size ? size : ''} /> : <ScrollArrowDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n            isButton={isButton || false}\n            ref={dropdownContentRef}\n            id={`${id}_dropdowncontent`}\n            className={[isOpen && 'show', isUp && 'up'].filter((e) => !!e).join(' ')}>\n            {getElements()}\n          </DropdownContent>\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <Attention size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}
+{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["InputField","styled","input","COLORS","black","neutral_600","BREAKPOINTS","MEDIUM","MAX_MENU_HEIGHT","AVG_OPTION_HEIGHT","DropdownFilter","id","list","placeholder","onSelect","onInputChange","initalValue","required","disableSorting","messageOnNoResults","disabled","locked","isButton","activeValidationMessage","autofilledMessage","size","buttonFontSize","keepInitialValue","icon","margin","React","useState","isOpen","setIsOpen","isUp","setIsUp","isLoading","setIsLoading","setInput","placeholderSearch","setPlaceholderSearch","restartFilter","setRestartFilter","focused","setFocused","currentSearchResult","setCurrentSearchResult","dropdownContentRef","useRef","styledFieldRef","inputRef","useEffect","options","filter","option","toUpperCase","indexOf","sort","handleClickOutside","e","current","contains","target","includes","setNewFocusedElement","index","newFocusedElement","document","getElementById","focus","handleKeyDown","keyCode","preventDefault","focusedNow","undefined","handleKeyPress","matches","c","toLowerCase","length","addEventListener","removeEventListener","determineDropUp","node","windowHeight","window","innerHeight","menuHeight","Math","min","instOffsetWithMenu","getBoundingClientRect","top","getElements","number","map","item","renderStandardDropdown","concat","stopPropagation","floor","random","value","renderButtonDropdown","join","warning_400"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\nimport { BREAKPOINTS, COLORS } from '../styles';\nimport { Attention, Information, ScrollArrowDown, ScrollArrowUp } from '../icons/systemicons/SystemIcons';\nimport { LoadingIndicator } from '../LoadingIndicator';\nimport { DropdownButton, StyledField, DropdownContent, Dropdown, ButtonDropdownWrapper } from './CommonStyling';\nimport { AutofilledMessage, WarningMessage } from '../InputFields/styling';\n\nconst InputField = styled.input`\n  font-weight: normal;\n  font-size: 18px;\n  border: none;\n  outline: none;\n  background-color: inherit;\n  cursor: pointer;\n  color: ${COLORS.black} !important;\n  padding: 0;\n  ::-webkit-search-decoration,\n  ::-webkit-search-cancel-button,\n  ::-webkit-search-results-button,\n  ::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n  ::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ${COLORS.neutral_600};\n    ${BREAKPOINTS.MEDIUM} {\n      font-size: 18px;\n    }\n    &.small {\n      font-size: 16px;\n    }\n    &.medium {\n      font-size: 18px;\n    }\n  }\n`;\n\ninterface DropdownFilterProps {\n  id: string;\n  list: string[];\n  placeholder?: string;\n  onSelect?: (value: string) => void;\n  onInputChange?: (input: string) => void;\n  initalValue?: string;\n  required?: boolean;\n  disableSorting?: boolean;\n  messageOnNoResults?: string;\n  disabled?: boolean;\n  locked?: boolean;\n  isButton?: boolean;\n  activeValidationMessage?: string;\n  autofilledMessage?: string;\n  size?: 'small' | 'medium';\n  buttonFontSize?: string;\n  keepInitialValue?: boolean;\n  icon?: React.ReactNode;\n  margin?: string;\n}\n\nconst MAX_MENU_HEIGHT = 240;\nconst AVG_OPTION_HEIGHT = 48;\n\nconst DropdownFilter = ({\n  id,\n  list,\n  placeholder,\n  onSelect,\n  onInputChange,\n  initalValue,\n  required,\n  disableSorting,\n  messageOnNoResults,\n  disabled,\n  locked,\n  isButton,\n  activeValidationMessage,\n  autofilledMessage,\n  size,\n  buttonFontSize,\n  keepInitialValue,\n  icon,\n  margin,\n}: DropdownFilterProps) => {\n  const [isOpen, setIsOpen] = React.useState<Boolean>(false);\n  const [isUp, setIsUp] = React.useState<boolean>(false);\n  const [isLoading, setIsLoading] = React.useState<Boolean>(false);\n  const [input, setInput] = React.useState<string>('');\n  const [placeholderSearch, setPlaceholderSearch] = React.useState<string>(placeholder || '');\n  const [restartFilter, setRestartFilter] = React.useState<boolean>(false);\n  const [focused, setFocused] = React.useState<number | null>(null);\n  const [currentSearchResult, setCurrentSearchResult] = React.useState<string[]>(list);\n\n  const dropdownContentRef = React.useRef<HTMLDivElement>(null);\n  const styledFieldRef = React.useRef<HTMLDivElement>(null);\n  const inputRef = React.useRef<HTMLInputElement>(null);\n\n  React.useEffect(() => {\n    var options = [...list];\n    if (!restartFilter && input !== '') {\n      options = options.filter((option) => option.toUpperCase().indexOf(input.toUpperCase()) !== -1);\n    }\n    if (!disableSorting) {\n      options = options.sort();\n    }\n    setCurrentSearchResult(options);\n  }, [input, list]);\n\n  const handleClickOutside = (e: any) => {\n    if (dropdownContentRef?.current && !dropdownContentRef.current.contains(e.target)) {\n      if (isOpen) {\n        setIsOpen(false);\n        setFocused(null);\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n      }\n    }\n  };\n\n  const setNewFocusedElement = (index: number) => {\n    const newFocusedElement = document.getElementById(`${id}_${index}`);\n    if (newFocusedElement) {\n      setFocused(index);\n      newFocusedElement.focus();\n    }\n  };\n\n  const handleKeyDown = (e: any) => {\n    if (isOpen) {\n      if (e.keyCode === 38) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null && focusedNow > 0) {\n          focusedNow -= 1;\n          setNewFocusedElement(focusedNow);\n        }\n      } else if (e.keyCode === 40) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n        } else {\n          focusedNow = 0;\n        }\n        setNewFocusedElement(focusedNow);\n      } else if (e.keyCode === 9) {\n        e.preventDefault();\n        var focusedNow = focused;\n        if (focusedNow !== undefined && focusedNow !== null) {\n          focusedNow++;\n          const newFocusedElement = document.getElementById(`${id}_${focusedNow}`);\n          if (!newFocusedElement) {\n            setNewFocusedElement(0);\n          } else {\n            setNewFocusedElement(focusedNow);\n          }\n        } else {\n          setNewFocusedElement(0);\n        }\n      } else if (e.keyCode === 27) {\n        setIsOpen(false);\n        setNewFocusedElement(0);\n        if (!list.includes(input)) {\n          setInput('');\n          setPlaceholderSearch(placeholder || '');\n        }\n        styledFieldRef.current?.focus();\n      }\n    }\n  };\n\n  const handleKeyPress = (e: any) => {\n    if (styledFieldRef?.current && styledFieldRef.current.contains(e.target)) {\n      if (e.keyCode === 13 && !locked) {\n        const matches = currentSearchResult?.filter((c) => c.toLowerCase() === input.toLowerCase());\n        if (matches.length === 1 && onSelect) {\n          onSelect(matches[0]);\n          setInput(matches[0]);\n        }\n        setIsOpen(!isOpen);\n        setNewFocusedElement(0);\n        if (matches.length === 0) {\n          setInput('');\n        }\n      } else if (e.keyCode === 40) {\n        setIsOpen(!isOpen);\n        setNewFocusedElement(0);\n      }\n    }\n  };\n\n  React.useEffect(() => {\n    if (initalValue || initalValue === '') {\n      setInput(initalValue);\n      setRestartFilter(true);\n    }\n  }, [initalValue]);\n\n  React.useEffect(() => {\n    document.addEventListener('keydown', handleKeyDown);\n    document.addEventListener('keypress', handleKeyPress);\n    document.addEventListener('click', handleClickOutside);\n    return () => {\n      document.removeEventListener('keydown', handleKeyDown);\n      document.removeEventListener('keypress', handleKeyPress);\n      document.removeEventListener('click', handleClickOutside);\n    };\n  });\n\n  React.useEffect(() => {\n    setIsLoading(false);\n  }, [input]);\n\n  React.useEffect(() => {\n    determineDropUp();\n  }, [isOpen]);\n\n  const determineDropUp = () => {\n    const options = list;\n    const node = dropdownContentRef.current;\n\n    if (!node) return;\n\n    const windowHeight = window.innerHeight;\n    const menuHeight = Math.min(MAX_MENU_HEIGHT, options.length * AVG_OPTION_HEIGHT);\n    const instOffsetWithMenu = node.getBoundingClientRect().top + menuHeight;\n    setIsUp(instOffsetWithMenu >= windowHeight);\n  };\n\n  const getElements = () => {\n    if (locked || disabled) {\n      return <></>;\n    }\n    var number = 0;\n    if (currentSearchResult.length === 0) {\n      return (\n        <DropdownButton disabled>\n          <span>{messageOnNoResults}</span>\n        </DropdownButton>\n      );\n    }\n    return currentSearchResult.map((item) => {\n      return (\n        <DropdownButton\n          type=\"button\"\n          onClick={(e: any) => {\n            e.preventDefault();\n            setRestartFilter(true);\n            setInput(item);\n            onSelect && onSelect(item);\n            setIsOpen(false);\n            setFocused(null);\n          }}\n          className={item?.toLowerCase() === input?.toLowerCase() ? 'active' : ''}\n          key={item}\n          id={`${id}_${number++}`}>\n          <span>{item}</span>\n        </DropdownButton>\n      );\n    });\n  };\n\n  const renderStandardDropdown = () => {\n    return (\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '')}\n        onClick={(e: any) => {\n          e.stopPropagation();\n          setIsOpen(!isOpen);\n          inputRef.current?.focus();\n        }}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        <InputField\n          ref={inputRef}\n          autoComplete={'off-' + Math.floor(Math.random() * 999999999999)}\n          type=\"search\"\n          placeholder={placeholderSearch}\n          value={input}\n          className={size ? `${size} value` : 'value'}\n          onChange={(e: any) => {\n            if (!locked && !disabled) {\n              setRestartFilter(false);\n              setIsLoading(true);\n              setIsOpen(true);\n              setInput(e.target.value);\n              if (onInputChange) {\n                onInputChange(e.target.value || '');\n              }\n            }\n          }}\n          onClick={(e: any) => {\n            if (!locked && !disabled) {\n              e.stopPropagation();\n              setIsOpen(!isOpen);\n            }\n          }}\n          onFocus={() => setPlaceholderSearch('')}\n          onBlur={() => setPlaceholderSearch(placeholder || '')}\n          required={required}\n          tabIndex={disabled || locked ? -1 : 0}\n          disabled={disabled || false}\n        />\n\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n\n        <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n          {isOpen && !locked && !disabled ? <ScrollArrowUp size=\"24px\" className={size ? size : ''} /> : <ScrollArrowDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    );\n  };\n\n  const renderButtonDropdown = () => (\n    <ButtonDropdownWrapper\n      onClick={(e: any) => {\n        e.stopPropagation();\n        setIsOpen(!isOpen);\n        inputRef.current?.focus();\n      }}\n      disabled={disabled}\n      locked={locked}>\n      <StyledField\n        ref={styledFieldRef}\n        className={(isOpen ? 'expanded ' : '').concat(size ? size : '').concat(isButton ? 'button' : '')}\n        tabIndex={disabled || locked ? -1 : 0}\n        disabled={disabled || false}\n        locked={locked || false}\n        showValidationMessage={!!activeValidationMessage}\n        fontSize={buttonFontSize}>\n        {icon}\n        <div className={'value'}>{initalValue && keepInitialValue ? initalValue : input || placeholderSearch}</div>\n        {isLoading ? <LoadingIndicator size=\"small\" color={COLORS.neutral_600} /> : null}\n        <div onClick={() => setIsOpen(!isOpen)} className={'icon'}>\n          {isOpen && !locked && !disabled ? <ScrollArrowUp size=\"24px\" className={size ? size : ''} /> : <ScrollArrowDown size=\"24px\" className={size ? size : ''} />}\n        </div>\n      </StyledField>\n    </ButtonDropdownWrapper>\n  );\n\n  return (\n    <>\n      <Dropdown isButton={isButton || false} disabled={disabled} locked={locked} className={size ? size : ''} margin={margin}>\n        {!isButton && renderStandardDropdown()}\n        {!!isButton && renderButtonDropdown()}\n        {!locked && !disabled && (\n          <DropdownContent\n            isButton={isButton || false}\n            ref={dropdownContentRef}\n            id={`${id}_dropdowncontent`}\n            className={[isOpen && 'show', isUp && 'up'].filter((e) => !!e).join(' ')}>\n            {getElements()}\n          </DropdownContent>\n        )}\n      </Dropdown>\n      {activeValidationMessage && (\n        <WarningMessage className={size || ''}>\n          <Attention size=\"20px\" color={COLORS.warning_400} />\n          <span>{activeValidationMessage}</span>\n        </WarningMessage>\n      )}\n      {autofilledMessage && (\n        <AutofilledMessage className={size || ''}>\n          <Information size=\"20px\" color={COLORS.neutral_600} />\n          <span>{autofilledMessage}</span>\n        </AutofilledMessage>\n      )}\n    </>\n  );\n};\n\nexport default DropdownFilter;\n"],"file":"DropdownFilter.js"}

package/dist/js/Footer/Components/FooterNewsletterAndSocialSection.js

@@ -19,6 +19,8 @@ var _InputFields = require("../../InputFields");
 
 var _SystemIcons = require("../../icons/systemicons/SystemIcons");
 
+var _Button = require("../../Button");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -51,7 +53,7 @@ var NewsletterButton = _styledComponents.default.button(_templateObject4 || (_te
 
 var SocialMedia = _styledComponents.default.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  color: ", ";\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    font-weight: normal;\n    font-size: 16px;\n  }\n\n  ", " {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n"])), _styles.COLORS.white, _styles.BREAKPOINTS.MEDIUM);
 
-var SocialMediaButtons = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n\n  a {\n    display: flex;\n    width: 32px;\n    height: 32px;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n    border-radius: 4px;\n\n    &:first-child {\n      margin: 0;\n    }\n    svg {\n      margin: auto;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n    &:focus {\n      background-color: ", ";\n      color: ", ";\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline: none;\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.MEDIUM);
+var SocialMediaButtons = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ", ";\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ", ";\n      path {\n        fill: ", ";\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ", ";\n      color: ", ";\n    }\n    &:active {\n      background-color: ", ";\n      color: ", ";\n    }\n  }\n  a {\n    &:focus {\n      outline: none;\n      div {\n        background-color: ", ";\n        color: ", ";\n        outline: none;\n        box-shadow: 0px 0px 8px ", ", 0px 4px 12px rgba(46, 127, 161, 0.25);\n      }\n      div svg path,\n      div svg {\n        fill: ", ";\n      }\n    }\n  }\n\n  ", " {\n    justify-content: flex-end;\n  }\n"])), _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_800, _styles.COLORS.primary_100, _styles.COLORS.white, _styles.COLORS.neutral_600, _styles.COLORS.primary_500, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.MEDIUM);
 
 var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection(_ref) {
   var actionOnNewsletterSignup = _ref.actionOnNewsletterSignup,
@@ -80,17 +82,29 @@ var FooterNewsletterAndSocialSection = function FooterNewsletterAndSocialSection
     href: "https://www.facebook.com/LaerdalMedical/",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(_SystemIcons.Facebook, null)), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    action: function action() {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Facebook, null))), /*#__PURE__*/React.createElement("a", {
     key: "socialmedia_".concat(Math.floor(Math.random() * 999999999999)),
     href: "https://twitter.com/laerdalmedical",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(_SystemIcons.Twitter, null)), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    action: function action() {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Twitter, null))), /*#__PURE__*/React.createElement("a", {
     key: "socialmedia_".concat(Math.floor(Math.random() * 999999999999)),
     href: "https://www.youtube.com/user/LaerdalMedical",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(_SystemIcons.Youtube, null)))));
+  }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    action: function action() {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(_SystemIcons.Youtube, null))))));
 };
 
 FooterNewsletterAndSocialSection.propTypes = {

package/dist/js/Footer/Components/FooterNewsletterAndSocialSection.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","COLORS","white","NewsletterEmail","NewsletterButton","button","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target","Math","floor","random"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { TextField } from '../../InputFields';\nimport { Facebook, Twitter, Youtube } from '../../icons/systemicons/SystemIcons';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    color: ${COLORS.white};\n    font-family: Lato;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 16px;\n    line-height: 120%;\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-top: 2px;\n  margin: 2px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  color: ${COLORS.white};\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n  font-family: Lato;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 19px;\n  line-height: 23px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    font-weight: normal;\n    font-size: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  a {\n    display: flex;\n    width: 32px;\n    height: 32px;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n    border-radius: 4px;\n\n    &:first-child {\n      margin: 0;\n    }\n    svg {\n      margin: auto;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n      cursor: pointer;\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n      cursor: pointer;\n    }\n    &:focus {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\n      outline: none;\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <Facebook />\n          </a>\n          <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <Twitter />\n          </a>\n          <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <Youtube />\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.js"}
+{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["NewsletterAndSocial","styled","section","BREAKPOINTS","MEDIUM","NewsletterEmailSection","div","COLORS","white","NewsletterEmail","NewsletterButton","button","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","React","useState","emailInput","setEmailInput","value","e","target","Math","floor","random"],"mappings":";;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;AAEA,IAAMA,mBAAmB,GAAGC,0BAAOC,OAAV,wLAKrBC,oBAAYC,MALS,CAAzB;;AAUA,IAAMC,sBAAsB,GAAGJ,0BAAOK,GAAV,wfAIxBH,oBAAYC,MAJY,EAUfG,eAAOC,KAVQ,EAoBtBL,oBAAYC,MApBU,CAA5B;;AA8BA,IAAMK,eAAe,GAAGR,0BAAOK,GAAV,0OAMjBH,oBAAYC,MANK,CAArB;;AAYA,IAAMM,gBAAgB,GAAGT,0BAAOU,MAAV,mdAEXJ,eAAOC,KAFI,EAKAD,eAAOC,KALP,EAelBL,oBAAYC,MAfM,CAAtB;;AAyBA,IAAMQ,WAAW,GAAGX,0BAAOK,GAAV,mYACNC,eAAOC,KADD,EAgBbL,oBAAYC,MAhBC,CAAjB;;AAwBA,IAAMS,kBAAkB,GAAGZ,0BAAOK,GAAV,w2BAOXC,eAAOC,KAPI,EAWVD,eAAOC,KAXG,EAaRD,eAAOC,KAbC,EAqBED,eAAOC,KArBT,EAsBTD,eAAOO,WAtBE,EAyBEP,eAAOQ,WAzBT,EA0BTR,eAAOS,WA1BE,EAiCIT,eAAOC,KAjCX,EAkCPD,eAAOO,WAlCA,EAoCUP,eAAOU,WApCjB,EAwCRV,eAAOO,WAxCC,EA6CpBX,oBAAYC,MA7CQ,CAAxB;;AAwDA,IAAMc,gCAAgC,GAAG,SAAnCA,gCAAmC,OAAuG;AAAA,MAApGC,wBAAoG,QAApGA,wBAAoG;AAAA,MAA1EC,eAA0E,QAA1EA,eAA0E;AAAA,MAAzDC,gBAAyD,QAAzDA,gBAAyD;;AAC9I,wBAAoCC,KAAK,CAACC,QAAN,CAAuB,EAAvB,CAApC;AAAA;AAAA,MAAOC,UAAP;AAAA,MAAmBC,aAAnB;;AACA,sBACE,oBAAC,mBAAD,qBACE,oBAAC,sBAAD,qBACE,mCAAQL,eAAR,CADF,eAEE,oBAAC,eAAD,qBACE,oBAAC,sBAAD;AAAW,IAAA,EAAE,EAAC,iBAAd;AAAgC,IAAA,aAAa,EAAE,IAA/C;AAAqD,IAAA,WAAW,EAAEC,gBAAlE;AAAoF,IAAA,KAAK,EAAEG,UAA3F;AAAuG,IAAA,QAAQ,EAAE,kBAACE,KAAD;AAAA,aAAmBD,aAAa,CAACC,KAAD,CAAhC;AAAA;AAAjH,IADF,eAEE,oBAAC,gBAAD;AAAkB,IAAA,OAAO,EAAE,iBAACC,CAAD;AAAA,aAAYR,wBAAwB,IAAIA,wBAAwB,CAACQ,CAAC,CAACC,MAAF,CAASF,KAAV,CAAhE;AAAA;AAA3B,eAFF,CAFF,CADF,eAQE,oBAAC,WAAD,qBACE,4DADF,eAEE,oBAAC,kBAAD,qBACE;AAAG,IAAA,GAAG,wBAAiBG,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAjB,CAAN;AAAmE,IAAA,IAAI,EAAC,0CAAxE;AAAmH,IAAA,MAAM,EAAC,QAA1H;AAAmI,IAAA,GAAG,EAAC;AAAvI,kBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,kBAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,qBAAD,OADF,CADF,CADF,eAME;AAAG,IAAA,GAAG,wBAAiBF,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAjB,CAAN;AAAmE,IAAA,IAAI,EAAC,oCAAxE;AAA6G,IAAA,MAAM,EAAC,QAApH;AAA6H,IAAA,GAAG,EAAC;AAAjI,kBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,kBAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,oBAAD,OADF,CADF,CANF,eAWE;AAAG,IAAA,GAAG,wBAAiBF,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAjB,CAAN;AAAmE,IAAA,IAAI,EAAC,6CAAxE;AAAsH,IAAA,MAAM,EAAC,QAA7H;AAAsI,IAAA,GAAG,EAAC;AAA1I,kBACE,oBAAC,kBAAD;AAAY,IAAA,OAAO,EAAC,WAApB;AAAgC,IAAA,MAAM,EAAE,kBAAM,CAAE,CAAhD;AAAkD,IAAA,QAAQ,EAAE,CAAC;AAA7D,kBACE,oBAAC,oBAAD,OADF,CADF,CAXF,CAFF,CARF,CADF;AA+BD,CAjCD;;;AALEZ,EAAAA,wB;AACAC,EAAAA,e;AACAC,EAAAA,gB;;eAsCaH,gC","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { TextField } from '../../InputFields';\nimport { Facebook, Twitter, Youtube } from '../../icons/systemicons/SystemIcons';\nimport { IconButton } from '../../Button';\n\nconst NewsletterAndSocial = styled.section`\n  display: flex;\n  flex-direction: column;\n  margin-bottom: 16px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterEmailSection = styled.div`\n  width: 100%;\n  margin: 16px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 60%;\n    margin: 16px 0 0 0;\n  }\n\n  label {\n    color: ${COLORS.white};\n    font-family: Lato;\n    font-style: normal;\n    font-weight: normal;\n    font-size: 16px;\n    line-height: 120%;\n    margin-bottom: 2px;\n  }\n  div div {\n    width: 100%;\n    ${BREAKPOINTS.MEDIUM} {\n      width: calc(100% - 82px);\n      width: 288px;\n    }\n  }\n  input {\n    height: 48px;\n  }\n`;\n\nconst NewsletterEmail = styled.div`\n  display: flex;\n  flex-direction: column;\n  margin-top: 2px;\n  margin: 2px auto 0 auto;\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 2px 0 0 0;\n    flex-direction: row;\n  }\n`;\n\nconst NewsletterButton = styled.button`\n  background: transparent;\n  color: ${COLORS.white};\n  width: 100%;\n  height: 40px;\n  border: 2px solid ${COLORS.white};\n  box-sizing: border-box;\n  border-radius: 8px;\n  margin: 8px 0 4px 0;\n  font-family: Lato;\n  font-style: normal;\n  font-weight: bold;\n  font-size: 19px;\n  line-height: 23px;\n\n  ${BREAKPOINTS.MEDIUM} {\n    width: 94px;\n    margin: auto 0 4px 8px;\n  }\n\n  &:hover {\n    cursor: pointer;\n  }\n`;\n\nconst SocialMedia = styled.div`\n  color: ${COLORS.white};\n  margin: 0 auto;\n\n  button div {\n    box-sizing: border-box;\n    border-radius: 4px;\n  }\n\n  h4 {\n    margin-top: 16px;\n    margin-bottom: 8px;\n    font-weight: normal;\n    font-size: 16px;\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    margin: 0 0 0 auto;\n    button {\n      margin: 0 0 0 12px;\n    }\n  }\n`;\n\nconst SocialMediaButtons = styled.div`\n  display: flex;\n  justify-content: center;\n\n  button div {\n    display: flex;\n    background-color: transparent;\n    color: ${COLORS.white};\n    margin: 0 0 0 20px;\n\n    svg {\n      fill: ${COLORS.white};\n      path {\n        fill: ${COLORS.white};\n      }\n    }\n\n    &:first-child {\n      margin: 0;\n    }\n    &:hover {\n      background-color: ${COLORS.white};\n      color: ${COLORS.neutral_600};\n    }\n    &:active {\n      background-color: ${COLORS.primary_800};\n      color: ${COLORS.primary_100};\n    }\n  }\n  a {\n    &:focus {\n      outline: none;\n      div {\n        background-color: ${COLORS.white};\n        color: ${COLORS.neutral_600};\n        outline: none;\n        box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);\n      }\n      div svg path,\n      div svg {\n        fill: ${COLORS.neutral_600};\n      }\n    }\n  }\n\n  ${BREAKPOINTS.MEDIUM} {\n    justify-content: flex-end;\n  }\n`;\n\ninterface FooterNewsletterAndSocialSection {\n  actionOnNewsletterSignup?: (email: string) => void;\n  newsletterLabel: string;\n  placeholderEmail?: string;\n}\n\nconst FooterNewsletterAndSocialSection = ({ actionOnNewsletterSignup, newsletterLabel, placeholderEmail }: FooterNewsletterAndSocialSection) => {\n  const [emailInput, setEmailInput] = React.useState<string>('');\n  return (\n    <NewsletterAndSocial>\n      <NewsletterEmailSection>\n        <label>{newsletterLabel}</label>\n        <NewsletterEmail>\n          <TextField id=\"NewsletterEmail\" withoutBorder={true} placeholder={placeholderEmail} value={emailInput} onChange={(value: string) => setEmailInput(value)} />\n          <NewsletterButton onClick={(e: any) => actionOnNewsletterSignup && actionOnNewsletterSignup(e.target.value)}>Sign up</NewsletterButton>\n        </NewsletterEmail>\n      </NewsletterEmailSection>\n      <SocialMedia>\n        <h4>Follow us on social media</h4>\n        <SocialMediaButtons>\n          <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.facebook.com/LaerdalMedical/\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Facebook />\n            </IconButton>\n          </a>\n          <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://twitter.com/laerdalmedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Twitter />\n            </IconButton>\n          </a>\n          <a key={`socialmedia_${Math.floor(Math.random() * 999999999999)}`} href=\"https://www.youtube.com/user/LaerdalMedical\" target=\"_blank\" rel=\"noreferrer noopener\">\n            <IconButton variant=\"secondary\" action={() => {}} tabIndex={-1}>\n              <Youtube />\n            </IconButton>\n          </a>\n        </SocialMediaButtons>\n      </SocialMedia>\n    </NewsletterAndSocial>\n  );\n};\n\nexport default FooterNewsletterAndSocialSection;\n"],"file":"FooterNewsletterAndSocialSection.js"}

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

@@ -76,12 +76,16 @@ var MobileUserMenu = function MobileUserMenu(_ref) {
   }, /*#__PURE__*/React.createElement(Top, {
     key: "MobileUserMenuTopSection"
   }, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    shape: "circular",
     action: clickMenuAction,
     isInMobileMenu: true
   }, /*#__PURE__*/React.createElement(_SystemIcons.ArrowLineLeft, {
     size: "24px",
     color: _styles.COLORS.neutral_600
   })), /*#__PURE__*/React.createElement("h3", null, accountMenuHeader), /*#__PURE__*/React.createElement(_CommonStyles.Right, null, /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    shape: "circular",
     action: clickMenuAction,
     isInMobileMenu: true
   }, /*#__PURE__*/React.createElement(_SystemIcons.Close, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","LabelLine","span","neutral_20","StyledMenulink","MenuLink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","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 action={clickMenuAction} isInMobileMenu={true}>\n          <ArrowLineLeft size=\"24px\" color={COLORS.neutral_600} />\n        </IconButton>\n        <h3>{accountMenuHeader}</h3>\n        <Right>\n          <IconButton 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"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/UserMenu/MobileUserMenu.tsx"],"names":["Menu","styled","ul","COLORS","white","flowDown","BREAKPOINTS","SMALL","scrollBarStyling","MenuSection","li","MenuSectionList","UserMenuSectionListStyling","Top","div","neutral_600","LabelLine","span","neutral_20","StyledMenulink","MenuLink","MobileUserMenu","accountMenuHeader","firstName","lastName","email","organizationName","clickMenuAction","accountSection","organizationSection","supportSection","signOut","signOutLabel","React","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"}

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

@@ -196,6 +196,8 @@ var MobileMenu = function MobileMenu(_ref) {
     useUserMenu: useUserMenu,
     setShowUserMenu: setShowUserMenu
   }), /*#__PURE__*/React.createElement(_Button.IconButton, {
+    variant: "secondary",
+    shape: "circular",
     action: function action() {
       return clickMenuAction();
     },

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["SwitchButton","styled","span","COLORS","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","RowLayout","BottomRowLayout","BREAKPOINTS","SMALL","StyledNavItem","SwitcherMenuItem","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","React","useState","showNotificationMenu","setShowNotificationMenu","notificationMenuRef","useRef","userMenuRef","userRef","notificationRef","switcherRef","location","user","notification","fireAction","action","ref","current","blur","undefined","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","label","NavLink","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, { ActionButton } from '../Actions';\nimport { Close, GridView, Notification } 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  const notificationRef = React.useRef(null);\n  const switcherRef = 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>) => {\n    ref?.current?.blur();\n    action !== undefined && 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          <ActionButton\n            hideOnLowWidth={false}\n            inMobileMenu={true}\n            ref={notificationRef}\n            onClick={() => fireAction(actions?.notification, notificationRef)}\n            onKeyDown={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification, notificationRef) : null)}>\n            <div>\n              <Notification size=\"24px\" />\n            </div>\n          </ActionButton>\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 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                  <ActionButton\n                    hideOnLowWidth={false}\n                    inMobileMenu={true}\n                    id=\"globalNavAppsButton\"\n                    ref={switcherRef}\n                    onClick={() => switcherAction()}\n                    onKeyDown={(e: any) => (isPressingEnter(e) ? switcherAction() : null)}>\n                    <div>\n                      <GridView size=\"24px\" />\n                    </div>\n                  </ActionButton>\n                </SwitcherButton>\n              )}\n            </BottomRowLayout>\n          </MenuSectionList>\n        </MenuSection>\n      </BottomPinnedSection>\n    </>\n  );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}
+{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["SwitchButton","styled","span","COLORS","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","RowLayout","BottomRowLayout","BREAKPOINTS","SMALL","StyledNavItem","SwitcherMenuItem","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","React","useState","showNotificationMenu","setShowNotificationMenu","notificationMenuRef","useRef","userMenuRef","userRef","notificationRef","switcherRef","location","user","notification","fireAction","action","ref","current","blur","undefined","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","label","NavLink","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, { ActionButton } from '../Actions';\nimport { Close, GridView, Notification } 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  const notificationRef = React.useRef(null);\n  const switcherRef = 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>) => {\n    ref?.current?.blur();\n    action !== undefined && 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          <ActionButton\n            hideOnLowWidth={false}\n            inMobileMenu={true}\n            ref={notificationRef}\n            onClick={() => fireAction(actions?.notification, notificationRef)}\n            onKeyDown={(e: any) => (isPressingEnter(e) ? fireAction(actions?.notification, notificationRef) : null)}>\n            <div>\n              <Notification size=\"24px\" />\n            </div>\n          </ActionButton>\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                  <ActionButton\n                    hideOnLowWidth={false}\n                    inMobileMenu={true}\n                    id=\"globalNavAppsButton\"\n                    ref={switcherRef}\n                    onClick={() => switcherAction()}\n                    onKeyDown={(e: any) => (isPressingEnter(e) ? switcherAction() : null)}>\n                    <div>\n                      <GridView size=\"24px\" />\n                    </div>\n                  </ActionButton>\n                </SwitcherButton>\n              )}\n            </BottomRowLayout>\n          </MenuSectionList>\n        </MenuSection>\n      </BottomPinnedSection>\n    </>\n  );\n};\n\nexport default MobileMenu;\n"],"file":"MobileMenu.js"}

package/dist/js/InputFields/DatepickerField.js

@@ -219,6 +219,8 @@ var DatepickerField = function DatepickerField(_ref) {
         return setTabbedHere(false);
       }
     }), /*#__PURE__*/React.createElement(_index.IconButton, {
+      variant: "secondary",
+      shape: "square",
       tabIndex: -1,
       action: function action() {},
       disabled: disabled || locked

package/dist/js/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","props","margin","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","neutral_600","scrollBarStyling","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","primary_600","StyledInputFieldStyling","InputFieldStyling","primary_200","primary_300","DatepickerField","id","disabled","locked","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","React","useRef","datepickerRef","useState","tabbedHere","setTabbedHere","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","setOpen","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","e","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","target","includes","display","critical_400"],"mappings":"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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 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, Attention } 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';\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`\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  &:hover {\n    svg,\n    svg path {\n      fill: ${COLORS.primary_600} !important;\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 1px ${COLORS.primary_200};\n    ::placeholder {\n      color: ${COLORS.primary_600};\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    ::placeholder {\n      color: ${COLORS.primary_800};\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\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\n              disabled={disabled}\n              locked={locked}\n              tabIndex={disabled ? -1 : 0}\n              onFocus={(e: any) => {\n                if (!e?.target?.id.includes(id) && !disabled) {\n                  setTabbedHere(true);\n                  inputRef.current.focus();\n                }\n              }}>\n              <div style={{ display: 'block' }}>\n                <DatepickerRow>\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                  />\n                  <IconButton 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          <Attention size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}
+{"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["DatePickerContainer","styled","div","props","margin","COLORS","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","neutral_600","scrollBarStyling","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","primary_600","StyledInputFieldStyling","InputFieldStyling","primary_200","primary_300","DatepickerField","id","disabled","locked","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","React","useRef","datepickerRef","useState","tabbedHere","setTabbedHere","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","setOpen","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","e","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","target","includes","display","critical_400"],"mappings":"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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 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, Attention } 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';\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`\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  &:hover {\n    svg,\n    svg path {\n      fill: ${COLORS.primary_600} !important;\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 1px ${COLORS.primary_200};\n    ::placeholder {\n      color: ${COLORS.primary_600};\n    }\n    cursor: pointer;\n  }\n  &:active {\n    box-shadow: inset 0px 0px 0px 1px ${COLORS.primary_300};\n    ::placeholder {\n      color: ${COLORS.primary_800};\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\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\n              disabled={disabled}\n              locked={locked}\n              tabIndex={disabled ? -1 : 0}\n              onFocus={(e: any) => {\n                if (!e?.target?.id.includes(id) && !disabled) {\n                  setTabbedHere(true);\n                  inputRef.current.focus();\n                }\n              }}>\n              <div style={{ display: 'block' }}>\n                <DatepickerRow>\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                  />\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          <Attention size=\"20px\" color={COLORS.critical_400} />\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n};\n\nexport default DatepickerField;\n"],"file":"DatepickerField.js"}

package/dist/js/InputFields/styling.js

@@ -34,8 +34,8 @@ var activeCorrectInput = (0, _styledComponents.css)(_templateObject5 || (_templa
 var tabbedHereStyle = (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  outline: none;\n  box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1 !important;\n"])));
 exports.tabbedHereStyle = tabbedHereStyle;
 
-var InputFieldStyling = _styledComponents.default.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  box-shadow: ", ";\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4.5px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ", ";\n  }\n\n  ", "{ \n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px; \n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px; \n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n\n  color: ", " !important;\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
-  return props.withoutBorder ? 'none' : "inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_300);
+var InputFieldStyling = _styledComponents.default.input(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  height: 48px;\n  width: 100%;\n  border-radius: 4px;\n  border: 2px solid transparent;\n  -webkit-appearance: none;\n  ", "\n  background-color: #fff;\n  box-sizing: border-box;\n  padding: 0 16px !important;\n\n  box-sizing: border-box;\n  width: 100%;\n  outline: none;\n  border-radius: 4.5px;\n\n  font-size: 16px;\n\n  &::placeholder {\n    font-family: 'Lato', sans-serif;\n    font-style: italic;\n    font-weight: normal;\n    font-size: 16px;\n    color: ", ";\n  }\n\n  ", "{ \n    font-size: 18px;\n    line-height: 18px;\n    height: 56px;\n    padding: 0 16px !important;\n\n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n  &.small {\n    font-size: 16px;\n    height: 48px; \n    &::placeholder {\n      font-size: 16px;\n    }\n  }\n  &.medium {\n    font-size: 18px;\n    height: 56px; \n    &::placeholder {\n      font-size: 18px;\n    }\n  }\n\n\n  color: ", " !important;\n\n  ", "\n  ", "\n  ", "\n  ", "\n  ", "\n\n  &:disabled {\n    border: 1px solid ", ";\n    pointer-events: none;\n    box-shadow: none !important;\n    outline: none;\n    cursor: not-allowed;\n    color: ", " !important;\n  }\n  &:focus {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.error {\n    border-radius: 4px;\n    border-style: solid;\n    border-width: 2px;\n    border-color: #e97116;\n    padding: 0 15px !important;\n  }\n\n  &:not(.placeholder) {\n    line-height: 40px;\n  }\n\n  &.error {\n    margin-bottom: 0 !important;\n  }\n\n  &:hover {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.active {\n    -webkit-box-shadow: inset 0px 0px 0px 2px ", ";\n    -moz-box-shadow: inset 0px 0px 0px 2px ", ";\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &.show-checkmark.valid {\n    background-image: none;\n  }\n\n  &.show-checkmark.pending {\n    background-image: none;\n  }\n"])), function (props) {
+  return props.withoutBorder ? "-webkit-box-shadow: none;\n      -moz-box-shadow: none;\n      box-shadow: none;\n      " : "-webkit-box-shadow: inset 0px 0px 0px 1px ".concat(_styles.COLORS.neutral_300, ";\n      -moz-box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_300, ";\n      box-shadow: inset 0px 0px 0px 1px ").concat(_styles.COLORS.neutral_300, ";");
 }, _styles.COLORS.neutral_600, _styles.BREAKPOINTS.MEDIUM, _styles.COLORS.black, function (props) {
   return props.locked ? lockedState : '';
 }, function (props) {