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

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/Dropdown/DropdownFilter.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","Attention","Information","ScrollArrowDown","ScrollArrowUp","LoadingIndicator","DropdownButton","StyledField","DropdownContent","Dropdown","ButtonDropdownWrapper","AutofilledMessage","WarningMessage","InputField","input","black","neutral_600","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","isOpen","setIsOpen","useState","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":["React","styled","BREAKPOINTS","COLORS","Attention","Information","ScrollArrowDown","ScrollArrowUp","LoadingIndicator","DropdownButton","StyledField","DropdownContent","Dropdown","ButtonDropdownWrapper","AutofilledMessage","WarningMessage","InputField","input","black","neutral_600","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","isOpen","setIsOpen","useState","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/esm/Footer/Components/FooterNewsletterAndSocialSection.js

@@ -4,6 +4,7 @@ import styled from 'styled-components';
 import { BREAKPOINTS, COLORS } from '../../styles';
 import { TextField } from '../../InputFields';
 import { Facebook, Twitter, Youtube } from '../../icons/systemicons/SystemIcons';
+import { IconButton } from '../../Button';
 const NewsletterAndSocial = styled.section`
   display: flex;
   flex-direction: column;
@@ -104,36 +105,44 @@ const SocialMediaButtons = styled.div`
   display: flex;
   justify-content: center;
 
-  a {
+  button div {
     display: flex;
-    width: 32px;
-    height: 32px;
     background-color: transparent;
     color: ${COLORS.white};
     margin: 0 0 0 20px;
-    border-radius: 4px;
+
+    svg {
+      fill: ${COLORS.white};
+      path {
+        fill: ${COLORS.white};
+      }
+    }
 
     &:first-child {
       margin: 0;
     }
-    svg {
-      margin: auto;
-    }
     &:hover {
       background-color: ${COLORS.white};
       color: ${COLORS.neutral_600};
-      cursor: pointer;
     }
     &:active {
       background-color: ${COLORS.primary_800};
       color: ${COLORS.primary_100};
-      cursor: pointer;
     }
+  }
+  a {
     &:focus {
-      background-color: ${COLORS.white};
-      color: ${COLORS.neutral_600};
-      box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
       outline: none;
+      div {
+        background-color: ${COLORS.white};
+        color: ${COLORS.neutral_600};
+        outline: none;
+        box-shadow: 0px 0px 8px ${COLORS.primary_500}, 0px 4px 12px rgba(46, 127, 161, 0.25);
+      }
+      div svg path,
+      div svg {
+        fill: ${COLORS.neutral_600};
+      }
     }
   }
 
@@ -161,17 +170,29 @@ const FooterNewsletterAndSocialSection = ({
     href: "https://www.facebook.com/LaerdalMedical/",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(Facebook, null)), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    action: () => {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Facebook, null))), /*#__PURE__*/React.createElement("a", {
     key: `socialmedia_${Math.floor(Math.random() * 999999999999)}`,
     href: "https://twitter.com/laerdalmedical",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(Twitter, null)), /*#__PURE__*/React.createElement("a", {
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    action: () => {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Twitter, null))), /*#__PURE__*/React.createElement("a", {
     key: `socialmedia_${Math.floor(Math.random() * 999999999999)}`,
     href: "https://www.youtube.com/user/LaerdalMedical",
     target: "_blank",
     rel: "noreferrer noopener"
-  }, /*#__PURE__*/React.createElement(Youtube, null)))));
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    action: () => {},
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(Youtube, null))))));
 };
 
 FooterNewsletterAndSocialSection.propTypes = {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/Footer/Components/FooterNewsletterAndSocialSection.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","TextField","Facebook","Twitter","Youtube","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","white","NewsletterEmail","NewsletterButton","button","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","value","e","target","Math","floor","random"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,cAApC;AACA,SAASC,SAAT,QAA0B,mBAA1B;AACA,SAASC,QAAT,EAAmBC,OAAnB,EAA4BC,OAA5B,QAA2C,qCAA3C;AAEA,MAAMC,mBAAmB,GAAGP,MAAM,CAACQ,OAAQ;AAC3C;AACA;AACA;AACA;AACA,IAAIP,WAAW,CAACQ,MAAO;AACvB;AACA;AACA,CARA;AAUA,MAAMC,sBAAsB,GAAGV,MAAM,CAACW,GAAI;AAC1C;AACA;AACA;AACA,IAAIV,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,aAAaP,MAAM,CAACU,KAAM;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMX,WAAW,CAACQ,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA5BA;AA8BA,MAAMI,eAAe,GAAGb,MAAM,CAACW,GAAI;AACnC;AACA;AACA;AACA;AACA;AACA,IAAIV,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA,CAVA;AAYA,MAAMK,gBAAgB,GAAGd,MAAM,CAACe,MAAO;AACvC;AACA,WAAWb,MAAM,CAACU,KAAM;AACxB;AACA;AACA,sBAAsBV,MAAM,CAACU,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIX,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAvBA;AAyBA,MAAMO,WAAW,GAAGhB,MAAM,CAACW,GAAI;AAC/B,WAAWT,MAAM,CAACU,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIX,WAAW,CAACQ,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,CAtBA;AAwBA,MAAMQ,kBAAkB,GAAGjB,MAAM,CAACW,GAAI;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaT,MAAM,CAACU,KAAM;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0BV,MAAM,CAACU,KAAM;AACvC,eAAeV,MAAM,CAACgB,WAAY;AAClC;AACA;AACA;AACA,0BAA0BhB,MAAM,CAACiB,WAAY;AAC7C,eAAejB,MAAM,CAACkB,WAAY;AAClC;AACA;AACA;AACA,0BAA0BlB,MAAM,CAACU,KAAM;AACvC,eAAeV,MAAM,CAACgB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA,IAAIjB,WAAW,CAACQ,MAAO;AACvB;AACA;AACA,CAxCA;;AAgDA,MAAMY,gCAAgC,GAAG,CAAC;AAAEC,EAAAA,wBAAF;AAA4BC,EAAAA,eAA5B;AAA6CC,EAAAA;AAA7C,CAAD,KAAuG;AAC9I,QAAM,CAACC,UAAD,EAAaC,aAAb,IAA8B3B,KAAK,CAAC4B,QAAN,CAAuB,EAAvB,CAApC;AACA,sBACE,oBAAC,mBAAD,qBACE,oBAAC,sBAAD,qBACE,mCAAQJ,eAAR,CADF,eAEE,oBAAC,eAAD,qBACE,oBAAC,SAAD;AAAW,IAAA,EAAE,EAAC,iBAAd;AAAgC,IAAA,aAAa,EAAE,IAA/C;AAAqD,IAAA,WAAW,EAAEC,gBAAlE;AAAoF,IAAA,KAAK,EAAEC,UAA3F;AAAuG,IAAA,QAAQ,EAAGG,KAAD,IAAmBF,aAAa,CAACE,KAAD;AAAjJ,IADF,eAEE,oBAAC,gBAAD;AAAkB,IAAA,OAAO,EAAGC,CAAD,IAAYP,wBAAwB,IAAIA,wBAAwB,CAACO,CAAC,CAACC,MAAF,CAASF,KAAV;AAA3F,eAFF,CAFF,CADF,eAQE,oBAAC,WAAD,qBACE,4DADF,eAEE,oBAAC,kBAAD,qBACE;AAAG,IAAA,GAAG,EAAG,eAAcG,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EAAhE;AAAmE,IAAA,IAAI,EAAC,0CAAxE;AAAmH,IAAA,MAAM,EAAC,QAA1H;AAAmI,IAAA,GAAG,EAAC;AAAvI,kBACE,oBAAC,QAAD,OADF,CADF,eAIE;AAAG,IAAA,GAAG,EAAG,eAAcF,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EAAhE;AAAmE,IAAA,IAAI,EAAC,oCAAxE;AAA6G,IAAA,MAAM,EAAC,QAApH;AAA6H,IAAA,GAAG,EAAC;AAAjI,kBACE,oBAAC,OAAD,OADF,CAJF,eAOE;AAAG,IAAA,GAAG,EAAG,eAAcF,IAAI,CAACC,KAAL,CAAWD,IAAI,CAACE,MAAL,KAAgB,YAA3B,CAAyC,EAAhE;AAAmE,IAAA,IAAI,EAAC,6CAAxE;AAAsH,IAAA,MAAM,EAAC,QAA7H;AAAsI,IAAA,GAAG,EAAC;AAA1I,kBACE,oBAAC,OAAD,OADF,CAPF,CAFF,CARF,CADF;AAyBD,CA3BD;;;AALEX,EAAAA,wB;AACAC,EAAAA,e;AACAC,EAAAA,gB;;AAgCF,eAAeH,gCAAf","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":["React","styled","BREAKPOINTS","COLORS","TextField","Facebook","Twitter","Youtube","IconButton","NewsletterAndSocial","section","MEDIUM","NewsletterEmailSection","div","white","NewsletterEmail","NewsletterButton","button","SocialMedia","SocialMediaButtons","neutral_600","primary_800","primary_100","primary_500","FooterNewsletterAndSocialSection","actionOnNewsletterSignup","newsletterLabel","placeholderEmail","emailInput","setEmailInput","useState","value","e","target","Math","floor","random"],"mappings":";AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AAEA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,cAApC;AACA,SAASC,SAAT,QAA0B,mBAA1B;AACA,SAASC,QAAT,EAAmBC,OAAnB,EAA4BC,OAA5B,QAA2C,qCAA3C;AACA,SAASC,UAAT,QAA2B,cAA3B;AAEA,MAAMC,mBAAmB,GAAGR,MAAM,CAACS,OAAQ;AAC3C;AACA;AACA;AACA;AACA,IAAIR,WAAW,CAACS,MAAO;AACvB;AACA;AACA,CARA;AAUA,MAAMC,sBAAsB,GAAGX,MAAM,CAACY,GAAI;AAC1C;AACA;AACA;AACA,IAAIX,WAAW,CAACS,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,aAAaR,MAAM,CAACW,KAAM;AAC1B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMZ,WAAW,CAACS,MAAO;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CA5BA;AA8BA,MAAMI,eAAe,GAAGd,MAAM,CAACY,GAAI;AACnC;AACA;AACA;AACA;AACA;AACA,IAAIX,WAAW,CAACS,MAAO;AACvB;AACA;AACA;AACA,CAVA;AAYA,MAAMK,gBAAgB,GAAGf,MAAM,CAACgB,MAAO;AACvC;AACA,WAAWd,MAAM,CAACW,KAAM;AACxB;AACA;AACA,sBAAsBX,MAAM,CAACW,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIZ,WAAW,CAACS,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAvBA;AAyBA,MAAMO,WAAW,GAAGjB,MAAM,CAACY,GAAI;AAC/B,WAAWV,MAAM,CAACW,KAAM;AACxB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAIZ,WAAW,CAACS,MAAO;AACvB;AACA;AACA;AACA;AACA;AACA,CAtBA;AAwBA,MAAMQ,kBAAkB,GAAGlB,MAAM,CAACY,GAAI;AACtC;AACA;AACA;AACA;A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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';\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/esm/GlobalNavigationBar/UserMenu/MobileUserMenu.js

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

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

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

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

@@ -234,6 +234,8 @@ const MobileMenu = ({
     useUserMenu: useUserMenu,
     setShowUserMenu: setShowUserMenu
   }), /*#__PURE__*/React.createElement(IconButton, {
+    variant: "secondary",
+    shape: "circular",
     action: () => clickMenuAction(),
     isInMobileMenu: true
   }, /*#__PURE__*/React.createElement(Close, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/GlobalNavigationBar/mobile/MobileMenu.tsx"],"names":["React","styled","BREAKPOINTS","COLORS","Actions","ActionButton","Close","GridView","Notification","MobileActionMenu","Right","RowLayout","MenuWrapper","MenuSection","MenuSectionList","NavLink","useLocation","SwitcherMenuItem","Avatar","AvatarContainer","MobileUserMenu","IconButton","LaerdalLogo","SwitchButton","span","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","BottomRowLayout","SMALL","StyledNavItem","black","primary_500","primary_800","neutral_300","neutral_100","primary_600","primary_20","primary_100","SwitcherButton","MobileMenu","clickMenuAction","navigationOptions","actions","firstName","lastName","email","signout","notifications","accountSection","organizationSection","supportSection","switcherAction","accountMenuHeader","signOutLabel","organizationName","useUserMenu","showUserMenu","setShowUserMenu","showNotificationMenu","setShowNotificationMenu","useState","notificationMenuRef","useRef","userMenuRef","userRef","notificationRef","switcherRef","location","user","notification","fireAction","action","ref","current","blur","undefined","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","label","exact","to","onClick","padding","margin","name","secondaryNavigationOptions","isAuthenticated"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavButton, NavOption, ActionOptions, UserMenuItem } from '../../types';\nimport Actions, { 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":["React","styled","BREAKPOINTS","COLORS","Actions","ActionButton","Close","GridView","Notification","MobileActionMenu","Right","RowLayout","MenuWrapper","MenuSection","MenuSectionList","NavLink","useLocation","SwitcherMenuItem","Avatar","AvatarContainer","MobileUserMenu","IconButton","LaerdalLogo","SwitchButton","span","neutral_600","BottomPinnedSection","div","neutral_200","FirstRowLayout","BottomRowLayout","SMALL","StyledNavItem","black","primary_500","primary_800","neutral_300","neutral_100","primary_600","primary_20","primary_100","SwitcherButton","MobileMenu","clickMenuAction","navigationOptions","actions","firstName","lastName","email","signout","notifications","accountSection","organizationSection","supportSection","switcherAction","accountMenuHeader","signOutLabel","organizationName","useUserMenu","showUserMenu","setShowUserMenu","showNotificationMenu","setShowNotificationMenu","useState","notificationMenuRef","useRef","userMenuRef","userRef","notificationRef","switcherRef","location","user","notification","fireAction","action","ref","current","blur","undefined","isPressingEnter","e","key","preventDefault","stopPropagation","useEffect","map","no","label","exact","to","onClick","padding","margin","name","secondaryNavigationOptions","isAuthenticated"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport styled from 'styled-components';\n\nimport { BREAKPOINTS, COLORS } from '../../styles';\nimport { NavButton, NavOption, ActionOptions, UserMenuItem } from '../../types';\nimport Actions, { 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/esm/InputFields/DatepickerField.js

@@ -429,6 +429,8 @@ const DatepickerField = ({
       tabbedHere: tabbedHere,
       onBlur: () => setTabbedHere(false)
     }), /*#__PURE__*/React.createElement(IconButton, {
+      variant: "secondary",
+      shape: "square",
       tabIndex: -1,
       action: () => {},
       disabled: disabled || locked

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","DatePicker","en","moment","COLORS","Calendar","Attention","IconButton","DatepickerFieldHeader","scrollBarStyling","InputFieldStyling","InputWrapper","ErrorMessage","DatePickerContainer","div","props","margin","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","neutral_600","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","primary_600","StyledInputFieldStyling","primary_200","primary_300","DatepickerField","id","disabled","locked","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","useRef","datepickerRef","tabbedHere","setTabbedHere","useState","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","undefined","params","createElement","customHeaderCount","target","includes","display","critical_400"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,OAAOC,EAAP,MAAe,uBAAf;AACA,OAAOC,MAAP,MAAmB,QAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAASC,QAAT,EAAmBC,SAAnB,QAAoC,kCAApC;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,qBAAT,QAAmE,yBAAnE;AACA,SAASC,gBAAT,QAAiC,WAAjC;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,EAA4BC,YAA5B,EAA0CC,YAA1C,QAA8D,WAA9D;AACA,OAAO,4CAAP;AAEA;AACA;AACA;;AAmBA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAGb,MAAM,CAACc,GAA6C;AAChF;AACA;AACA,MAAMC,KAAK,IAAKA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAChE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBZ,MAAM,CAACa,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBb,MAAM,CAACc,WAAY;AACzC,mCAAmCd,MAAM,CAACe,QAAS,iBAAgBf,MAAM,CAACgB,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BhB,MAAM,CAACiB,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCjB,MAAM,CAACkB,WAAY;AACpD,oBAAoBlB,MAAM,CAACiB,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAACQ,UAAP,GAAoB,MAApB,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA,eAAenB,MAAM,CAACoB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQf,gBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeL,MAAM,CAACoB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAepB,MAAM,CAACoB,WAAY;AAClC,oBAAoBpB,MAAM,CAACqB,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACoB,WAAY;AACpC,sBAAsBpB,MAAM,CAACqB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACsB,WAAY;AACpC,sBAAsBtB,MAAM,CAACa,UAAW;AACxC;AACA;AACA;AACA,iBAAiBb,MAAM,CAACuB,WAAY;AACpC,sBAAsBvB,MAAM,CAACc,WAAY;AACzC,mCAAmCd,MAAM,CAACe,QAAS,iBAAgBf,MAAM,CAACgB,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBhB,MAAM,CAACqB,KAAM;AAC9B,sBAAsBrB,MAAM,CAACwB,WAAY;AACzC;AACA;AACA;AACA;AACA,eAAexB,MAAM,CAACoB,WAAY;AAClC,oBAAoBpB,MAAM,CAACqB,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACoB,WAAY;AACpC,sBAAsBpB,MAAM,CAACqB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACsB,WAAY;AACpC,sBAAsBtB,MAAM,CAACa,UAAW;AACxC;AACA;AACA;AACA,iBAAiBb,MAAM,CAACuB,WAAY;AACpC,sBAAsBvB,MAA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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":["React","styled","DatePicker","en","moment","COLORS","Calendar","Attention","IconButton","DatepickerFieldHeader","scrollBarStyling","InputFieldStyling","InputWrapper","ErrorMessage","DatePickerContainer","div","props","margin","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","neutral_600","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","primary_600","StyledInputFieldStyling","primary_200","primary_300","DatepickerField","id","disabled","locked","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","useRef","datepickerRef","tabbedHere","setTabbedHere","useState","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","undefined","params","createElement","customHeaderCount","target","includes","display","critical_400"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,OAAOC,EAAP,MAAe,uBAAf;AACA,OAAOC,MAAP,MAAmB,QAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAASC,QAAT,EAAmBC,SAAnB,QAAoC,kCAApC;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,qBAAT,QAAmE,yBAAnE;AACA,SAASC,gBAAT,QAAiC,WAAjC;AAEA;AACA;AACA;;AACA,SAASC,iBAAT,EAA4BC,YAA5B,EAA0CC,YAA1C,QAA8D,WAA9D;AACA,OAAO,4CAAP;AAEA;AACA;AACA;;AAmBA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAGb,MAAM,CAACc,GAA6C;AAChF;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBZ,MAAM,CAACa,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBb,MAAM,CAACc,WAAY;AACzC,mCAAmCd,MAAM,CAACe,QAAS,iBAAgBf,MAAM,CAACgB,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BhB,MAAM,CAACiB,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCjB,MAAM,CAACkB,WAAY;AACpD,oBAAoBlB,MAAM,CAACiB,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAACQ,UAAP,GAAoB,MAApB,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA,eAAenB,MAAM,CAACoB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQf,gBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAeL,MAAM,CAACoB,WAAY;AAClC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAepB,MAAM,CAACoB,WAAY;AAClC,oBAAoBpB,MAAM,CAACqB,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACoB,WAAY;AACpC,sBAAsBpB,MAAM,CAACqB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACsB,WAAY;AACpC,sBAAsBtB,MAAM,CAACa,UAAW;AACxC;AACA;AACA;AACA,iBAAiBb,MAAM,CAACuB,WAAY;AACpC,sBAAsBvB,MAAM,CAACc,WAAY;AACzC,mCAAmCd,MAAM,CAACe,QAAS,iBAAgBf,MAAM,CAACgB,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBhB,MAAM,CAACqB,KAAM;AAC9B,sBAAsBrB,MAAM,CAACwB,WAAY;AACzC;AACA;AACA;AACA;AACA,eAAexB,MAAM,CAACoB,WAAY;AAClC,oBAAoBpB,MAAM,CAACqB,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACoB,WAAY;AACpC,sBAAsBpB,MAAM,CAACqB,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAACsB,WAAY;AACpC,sBAAsBtB,MAAM,CAACa,UAAW;AACxC;AACA;AACA;AACA,iBAAiBb,MAAM,CAACuB,WAAY;AACpC,sBAAsBvB,MAA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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"}