@laerdal/life-react-components 3.5.0 → 3.5.1-dev.11

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","DatePickerContainer","div","dropdown","props","margin","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","quarterComponentsClassPrefix","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","inputRef","datepickerRef","useRef","focusedQuarterRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","document","getElementsByClassName","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","newDate","setMonth","undefined","params","createElement","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport React from 'react';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\r\nimport en from 'date-fns/locale/en-GB';\r\nimport dayjs from 'dayjs';\r\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\r\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\r\n\r\ndayjs.extend(advancedFormat);\r\ndayjs.extend(quarterOfYear);\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport COLORS from '../styles/colors';\r\nimport {SystemIcons} from '../icons';\r\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\r\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\r\nimport 'react-datepicker/dist/react-datepicker.css';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {Size, Testable} from '../types';\r\n\r\n/**\r\n * Add custom types.\r\n */\r\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\r\n  value?: Date;\r\n  onChange?: (date: Date) => void;\r\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\r\n\r\n  showQuarterYearPicker?: boolean;\r\n  invalid?: boolean;\r\n  dateFormat?: string;\r\n  validationMessage?: string;\r\n  autoComplete?: string;\r\n  placeholder?: string;\r\n  yearPicker?: boolean;\r\n  yearsBeforeCurrentDate?: number;\r\n  yearsAfterCurrentDate?: number;\r\n  margin?: string;\r\n\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n};\r\n\r\n/**\r\n * Add custom styles.\r\n */\r\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string; quarterPicker?: boolean }>`\r\n  .react-datepicker-popper {\r\n    z-index: ${Z_INDEXES.dropdown};\r\n  }\r\n\r\n  .react-datepicker-popper[data-placement^=bottom] {\r\n    padding-top: 0px;\r\n  }\r\n\r\n  \r\n  .react-datepicker-popper[data-placement^=top] {\r\n    padding-bottom: 0px;\r\n  }\r\n\r\n  > div {\r\n    display: block;\r\n\r\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n    .react-datepicker {\r\n      box-sizing: border-box;\r\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\r\n      border: 1px solid #e5e5e5;\r\n    }\r\n    .react-datepicker__input-container{\r\n      z-index: 0;\r\n    }\r\n\r\n    .react-datepicker__navigation {\r\n      line-height: normal;\r\n      text-indent: inherit;\r\n      border: none;\r\n      border-radius: 4px;\r\n      height: 48px;\r\n      width: 48px;\r\n      outline: none;\r\n      margin: 0px;\r\n      color: transparent;\r\n\r\n      &:hover {\r\n        background: ${COLORS.primary_20};\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\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\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--next::before {\r\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\");\r\n        }\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n        &.react-datepicker__navigation--next::before {\r\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\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\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\");\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        text-align: center;\r\n        display: inline-block;\r\n        content: '';\r\n        height: 32px;\r\n        width: 32px;\r\n        vertical-align: middle;\r\n      }\r\n\r\n      &.react-datepicker__navigation--next::before {\r\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\");\r\n      }\r\n\r\n      &.react-datepicker__navigation--previous::before {\r\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\");\r\n      }\r\n    }\r\n\r\n    .react-datepicker__month-container,\r\n    .react-datepicker__year--container {\r\n      width: 336px;\r\n    }\r\n\r\n    .react-datepicker__month {\r\n      margin: 0px;\r\n    }\r\n\r\n    .react-datepicker__triangle {\r\n      left: 50% !important;\r\n      display: none;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] {\r\n      margin-top: 0;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\r\n      border-bottom-color: ${COLORS.neutral_20};\r\n    }\r\n\r\n    .react-datepicker__header {\r\n      border-bottom: 1px solid ${COLORS.neutral_200};\r\n      background: ${COLORS.neutral_20};\r\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\r\n      padding-top: 0px;\r\n    }\r\n\r\n    .react-datepicker-year-header {\r\n      height: 48px;\r\n      line-height: 48px !important;\r\n      align-items: center;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n    }\r\n\r\n    .react-datepicker__current-month {\r\n      height: 48px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      margin-right: 5px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n    }\r\n\r\n    .react-datepicker__year {\r\n      max-height: 300px;\r\n      overflow-y: scroll;\r\n\r\n      ${scrollBarStyling(Size.Small)}\r\n    }\r\n\r\n    .react-datepicker__quarter-wrapper{\r\n      width: 100%;\r\n      display: flex;\r\n      align-content: space-evenly;\r\n      flex-wrap: wrap;\r\n      align-items: center;\r\n      gap: 20px;\r\n    }\r\n\r\n    .react-datepicker__year-wrapper {\r\n      max-width: 100%;\r\n      justify-content: space-around;\r\n    }\r\n\r\n    .react-datepicker__navigation-icon {\r\n      display: none;\r\n    }\r\n\r\n    .react-datepicker__day-name {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      height: 48px;\r\n      margin: 0px;\r\n      width: 48px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    }\r\n\r\n    \r\n\r\n    .react-datepicker__year-text {\r\n      background: ${COLORS.white};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      margin-top: 20px;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n      &.react-datepicker__year-text--disabled {\r\n        display: none;\r\n      }\r\n\r\n      &.react-datepicker__day--keyboard-selected {\r\n        color: ${COLORS.neutral_600};\r\n        background: ${COLORS.white};\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &:hover {\r\n        color: ${COLORS.primary_700};\r\n        background: ${COLORS.primary_20};\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n      }\r\n\r\n      &.react-datepicker__year-text--selected {\r\n        color: ${COLORS.white} !important;\r\n        background: ${COLORS.primary_500} !important;\r\n      }\r\n    }\r\n\r\n    .react-datepicker__day, .react-datepicker__quarter-text {\r\n      background: ${COLORS.white};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      flex-grow: 1;\r\n      height: 40px;\r\n      width: 40px;\r\n      margin: 4px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\r\n        color: ${COLORS.neutral_600};\r\n        background: ${COLORS.white};\r\n        flex-grow: 1;\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &.react-datepicker__quarter--selected {\r\n        color: ${COLORS.white} !important;\r\n        flex-grow: 1;\r\n        background: ${COLORS.primary_500} !important;\r\n      }\r\n\r\n      &:hover {\r\n        color: ${COLORS.primary_700};\r\n        background: ${COLORS.primary_20};\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n      }\r\n\r\n      &.react-datepicker__day--selected {\r\n        color: ${COLORS.white} !important;\r\n        background: ${COLORS.primary_500} !important;\r\n      }\r\n\r\n      &.react-datepicker__day--today {\r\n        border-radius: 0.3rem;\r\n        color: ${COLORS.neutral_700};\r\n        background: ${COLORS.neutral_100};\r\n\r\n        &:hover {\r\n          color: ${COLORS.primary_700};\r\n          background: ${COLORS.primary_20};\r\n        }\r\n\r\n        &:focus {\r\n          ${focusStyles}\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst IconWrapper = styled.div`\r\n  pointer-events: none;\r\n  position: absolute;\r\n  left: 16px;\r\n  width: 24px;\r\n  height: 24px;\r\n  z-index: ${+Z_INDEXES.focus + 1};\r\n`;\r\n\r\nconst DatepickerRow = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\r\n  padding-left: 48px !important;\r\n  \r\n  &::placeholder {\r\n    color: ${COLORS.neutral_500};\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\r\n\r\n    ::placeholder {\r\n      color: ${COLORS.primary_700};\r\n    }\r\n\r\n    cursor: pointer;\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active,\r\n  &.open {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n\r\n    ::placeholder {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n  \r\n  &:disabled {\r\n    background-color: ${COLORS.white};\r\n  }\r\n\r\n  & ~ ${IconWrapper}{\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n\r\n  &:hover ~ ${IconWrapper} {\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n  &[tabindex='-1'] ~ ${IconWrapper} {\r\n    color: ${COLORS.neutral_300};\r\n  }\r\n`;\r\n\r\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\r\n\r\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\r\n                                            disabled,\r\n                                            readOnly,\r\n                                            onChange,\r\n                                            invalid,\r\n                                            value,\r\n                                            validationMessage,\r\n                                            dateFormat,\r\n                                            autoComplete,\r\n                                            placeholder,\r\n                                            required,\r\n                                            yearPicker,\r\n                                            yearsBeforeCurrentDate,\r\n                                            yearsAfterCurrentDate,\r\n                                            margin,\r\n                                            overflowTooltipPosition,\r\n                                            onBlur,\r\n                                            showQuarterYearPicker,\r\n                                            id,\r\n                                            dataTestId,\r\n                                            ...rest\r\n                                          }: DatepickerFieldProps, ref) => {\r\n  // Globally used variables within the component\r\n  const inputRef = useFocusVisibleRef();\r\n  const datepickerRef = React.useRef<any>(null);\r\n  const focusedQuarterRef = React.useRef<number>(1);\r\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\r\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\r\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\r\n  // 'open' flag is used only for tracking current state of the dropdown,\r\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\r\n  const [open, setOpen] = React.useState<boolean>(false);\r\n\r\n  const getFormattedValue = () => {\r\n    if(showQuarterYearPicker)\r\n    {\r\n      const val = dayjs(value);\r\n      return val.year() + ', Q' + val.quarter();\r\n    }\r\n    else \r\n      return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\r\n  }\r\n  /**\r\n   * Format the date in a specific way.\r\n   */\r\n  React.useEffect(() => {\r\n    if (value) inputRef.current.value = getFormattedValue();\r\n  }, [value]);\r\n\r\n  function getQuarterItem(classname: string) : HTMLElement {\r\n    return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\r\n  }\r\n\r\n  React.useEffect(() => {\r\n    if (yearPickerMode) {\r\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\r\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\r\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\r\n    }\r\n  }, [yearPickerMode]);\r\n\r\n  React.useEffect(() => {\r\n    if(showQuarterYearPicker && open)\r\n    {\r\n      const wrapper = getQuarterItem('wrapper');\r\n      const handler = (event: KeyboardEvent) => {\r\n        switch(event.key)\r\n        {\r\n          case ' ':\r\n          case 'Enter':\r\n            const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n            currentQ.click();\r\n            break;\r\n\r\n          case 'ArrowLeft':\r\n            if(focusedQuarterRef.current > 1)\r\n            {\r\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n              const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\r\n              if(previousQ)\r\n              {\r\n                currentQ.tabIndex = -1;\r\n                previousQ.tabIndex = 0;\r\n                previousQ.focus();\r\n                focusedQuarterRef.current = focusedQuarterRef.current - 1;\r\n              }\r\n            }\r\n            break;\r\n\r\n          case 'ArrowRight':\r\n            if(focusedQuarterRef.current < 4)\r\n            {\r\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n              const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\r\n              if(nextQ)\r\n              {\r\n                currentQ.tabIndex = -1;\r\n                nextQ.tabIndex = 0;\r\n                nextQ.focus();\r\n                focusedQuarterRef.current = focusedQuarterRef.current + 1;\r\n              }\r\n            }\r\n            break;\r\n        }\r\n      };\r\n\r\n      wrapper.addEventListener('keydown', handler);\r\n      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      \r\n      const selectedQuarter = getQuarterItem('-selected');\r\n      if(selectedQuarter) {\r\n        for (let i = 1; i < 5; i++) {\r\n          if(selectedQuarter.innerText.includes('Q' + i)) {\r\n            focusedQuarterRef.current = i;\r\n            break;\r\n          }\r\n        }\r\n        selectedQuarter.setAttribute(\"tabIndex\", \"0\");\r\n      }\r\n      else\r\n      {\r\n        const firstQuarter = getQuarterItem('1');\r\n        if(firstQuarter) {\r\n          focusedQuarterRef.current = 1;\r\n          firstQuarter.setAttribute(\"tabIndex\", \"0\");\r\n        }\r\n      }\r\n\r\n      return () => {\r\n        wrapper.removeEventListener('keydown', handler);\r\n      };\r\n    }\r\n  }, [showQuarterYearPicker, open]);\r\n\r\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\r\n  //otherwise after year selection datepicker will show January month of the selected year\r\n  React.useEffect(() => {\r\n    if (openAt) {\r\n      datepickerRef.current.setOpen(true);\r\n      //setOpenAt(null);\r\n    }\r\n  }, [openAt]);\r\n\r\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\r\n\r\n  const handleCalendarClose = () => {\r\n    inputRef.current?.blur();\r\n    setOpen(false);\r\n  };\r\n\r\n  const handleCalendarOpen = () => {\r\n    if (openAt) setOpenAt(null);\r\n    setOpen(true);\r\n  };\r\n\r\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\r\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\r\n\r\n  //itemsNumber - controls number of year select options generated in the dropdown\r\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\r\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\r\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key === 'Escape' || e.key === 'Esc')\r\n      datepickerRef.current.setOpen(false);\r\n  };\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\r\n    // @ts-ignore\r\n    if (!e.currentTarget.contains(e.relatedTarget)) {\r\n      onBlur && onBlur(e);\r\n    }\r\n  };\r\n  const iconSize = 24;\r\n\r\n  return (\r\n    <>\r\n      {/* Let's render the input itself */}\r\n      <DatePickerContainer quarterPicker={showQuarterYearPicker} data-testid={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\r\n        <DatePicker\r\n          ref={datepickerRef}\r\n          onCalendarOpen={handleCalendarOpen}\r\n          onCalendarClose={handleCalendarClose}\r\n          onKeyDown={handleKeyDown}\r\n          id={id}\r\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\r\n\r\n          onChange={(e: any) => {\r\n            if (onChange) {\r\n              if (yearPickerMode) {\r\n                const newDate = new Date();\r\n                newDate.setFullYear(e.getFullYear());\r\n                newDate.setMonth(activeMonthPage);\r\n                setOpenAt(newDate);\r\n              } else onChange(e);\r\n            }\r\n            if (yearPickerMode) setYearPickerMode(false);\r\n          }}\r\n          disabled={disabled || readOnly}\r\n          locale={en}\r\n          showQuarterYearPicker={showQuarterYearPicker}\r\n          dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\r\n          showYearPicker={yearPickerMode}\r\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\r\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\r\n          maxDate={yearPickerMode ? maxDate : undefined}\r\n          selected={value}\r\n          openToDate={openAt ?? undefined}\r\n          preventOpenOnFocus={true}\r\n          shouldCloseOnSelect={true}\r\n          renderCustomHeader={\r\n            yearPicker\r\n              ? (params: ReactDatePickerCustomHeaderProps) =>\r\n                React.createElement(\r\n                  DatepickerFieldHeader,\r\n                  {\r\n                    ...params,\r\n                    setActiveMonthPage,\r\n                    customHeaderCount: 0,\r\n                    yearPickerMode: yearPickerMode,\r\n                    setYearPickerMode: setYearPickerMode,\r\n                  },\r\n                  null,\r\n                )\r\n              : undefined\r\n          }\r\n          customInput={\r\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\r\n              <DatepickerRow>\r\n                  <StyledInputFieldStyling\r\n                    ref={inputRef}\r\n                    type=\"text\"\r\n                    name=\"datepicker\"\r\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\r\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\r\n                    tabIndex={disabled || readOnly ? -1 : 0}\r\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\r\n                    autoComplete={autoComplete}\r\n                    placeholder={placeholder}\r\n                    extraRightPadding={iconSize}\r\n                    disabled={disabled}\r\n                    readOnly={true}\r\n                    suppressReadOnlyStyles={!readOnly}\r\n                    required={required}\r\n                    {...rest}\r\n                  />\r\n                  <IconWrapper>\r\n                    <SystemIcons.Calendar size=\"24\"/>\r\n                  </IconWrapper>\r\n                </DatepickerRow>\r\n              {!open && <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end'>\r\n                {getFormattedValue()}\r\n              </TooltipOverflow>}\r\n            </InputWrapper>\r\n          }\r\n        />\r\n      </DatePickerContainer>\r\n\r\n      {/* If there is an error, let's render the error */}\r\n      {validationMessage && (\r\n        <ErrorMessage>\r\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nexport default DatepickerField;\r\n"],"mappings":"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"}
+{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","quarterOfYear","extend","COLORS","SystemIcons","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","TooltipOverflow","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","useFocusVisibleRef","Size","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","DatePickerContainer","div","_templateObject","_taggedTemplateLiteral","dropdown","props","margin","concat","primary_20","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Small","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","_templateObject2","focus","DatepickerRow","_templateObject3","StyledInputFieldStyling","_templateObject4","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","quarterComponentsClassPrefix","DatepickerField","forwardRef","_ref","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","overflowTooltipPosition","onBlur","showQuarterYearPicker","id","dataTestId","rest","_objectWithoutProperties","_excluded","inputRef","datepickerRef","useRef","focusedQuarterRef","_React$useState","useState","_React$useState2","_slicedToArray","activeMonthPage","setActiveMonthPage","_React$useState3","_React$useState4","yearPickerMode","setYearPickerMode","_React$useState5","_React$useState6","openAt","setOpenAt","_React$useState7","_React$useState8","open","setOpen","getFormattedValue","val","year","quarter","format","useEffect","current","getQuarterItem","classname","document","getElementsByClassName","_selectedDate$parentE","selectedDate","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","wrapper","handler","event","key","currentQ","click","previousQ","tabIndex","nextQ","addEventListener","selectedQuarter","i","innerText","includes","setAttribute","firstQuarter","removeEventListener","useImperativeHandle","handleCalendarClose","_inputRef$current","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","handleBlur","currentTarget","contains","relatedTarget","iconSize","children","quarterPicker","onCalendarOpen","onCalendarClose","onKeyDown","onClickOutside","newDate","setMonth","locale","undefined","showYearPicker","yearItemNumber","selected","openToDate","preventOpenOnFocus","shouldCloseOnSelect","renderCustomHeader","params","createElement","_objectSpread","customHeaderCount","customInput","type","name","className","onFocus","_inputRef$current2","setSelectionRange","extraRightPadding","suppressReadOnlyStyles","Calendar","size","position","input","withArrow","maxWidth","align","TechnicalWarning","color","critical_400","propTypes","_pt","instanceOf","func","bool","string","number","oneOf"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport React from 'react';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\r\nimport en from 'date-fns/locale/en-GB';\r\nimport dayjs from 'dayjs';\r\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\r\nimport quarterOfYear from \"dayjs/plugin/quarterOfYear\";\r\n\r\ndayjs.extend(advancedFormat);\r\ndayjs.extend(quarterOfYear);\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport COLORS from '../styles/colors';\r\nimport {SystemIcons} from '../icons';\r\nimport {DatepickerFieldHeader} from './DatepickerFieldHeader';\r\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\r\nimport TooltipOverflow from '../Tooltips/TooltipOverflow';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\r\nimport 'react-datepicker/dist/react-datepicker.css';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport {useFocusVisibleRef} from '../common';\r\nimport {Size, Testable} from '../types';\r\n\r\n/**\r\n * Add custom types.\r\n */\r\nexport type DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\r\n  /** Optional. Selected date. Defaults to current date */\r\n  value?: Date;\r\n  /** Optional. Handler to be called when selected date was changed. */\r\n  onChange?: (date: Date) => void;\r\n  /** Optional. Handler to be called when control is losing focus. */\r\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\r\n  /** Optional. Quarter picker mode. If set, then user can not select a particular date, but quarter of the year.\r\n   * 1st day of the quarter will be set as value.\r\n   */\r\n  showQuarterYearPicker?: boolean;\r\n  /** Optional. If set, then input field will be shown in 'invalid' state */\r\n  invalid?: boolean;\r\n  /** Optional. Format in which date will be shown in the input field. Defaults to 'MMMM Do, yyyy'. \r\n   * For quarter picker will be shown in 'YYYY, qqq' format.\r\n   */\r\n  dateFormat?: string;\r\n  /** Optional. Validation message to be shown under the input field */\r\n  validationMessage?: string;\r\n  /** Optional. Value for 'autocomplete' attribute of input field tag. */\r\n  autoComplete?: string;\r\n  /** Optional. Placeholder text to be shown when no value is selected. */\r\n  placeholder?: string;\r\n  /** Optional. If set, then user will be able to open year selector by clicking on the month in the dropdown. */\r\n  yearPicker?: boolean;\r\n  /** Optional. How many years before current year will be available in the year selector mode. */\r\n  yearsBeforeCurrentDate?: number;\r\n  /** Optional. How many years after current year will be available in the year selector mode. */\r\n  yearsAfterCurrentDate?: number;\r\n  /** Optional. Margin value to be set to the dropdown container. */\r\n  margin?: string;\r\n  /** Optional. Position where to show tooltip in case of closed datepicker and value overflowing the input field. */\r\n  overflowTooltipPosition?: 'top' | 'bottom';\r\n};\r\n\r\n/**\r\n * Add custom styles.\r\n */\r\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string; quarterPicker?: boolean }>`\r\n  .react-datepicker-popper {\r\n    z-index: ${Z_INDEXES.dropdown};\r\n  }\r\n\r\n  .react-datepicker-popper[data-placement^=bottom] {\r\n    padding-top: 0px;\r\n  }\r\n\r\n  \r\n  .react-datepicker-popper[data-placement^=top] {\r\n    padding-bottom: 0px;\r\n  }\r\n\r\n  > div {\r\n    display: block;\r\n\r\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n    .react-datepicker {\r\n      box-sizing: border-box;\r\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\r\n      border: 1px solid #e5e5e5;\r\n    }\r\n    .react-datepicker__input-container{\r\n      z-index: 0;\r\n    }\r\n\r\n    .react-datepicker__navigation {\r\n      line-height: normal;\r\n      text-indent: inherit;\r\n      border: none;\r\n      border-radius: 4px;\r\n      height: 48px;\r\n      width: 48px;\r\n      outline: none;\r\n      margin: 0px;\r\n      color: transparent;\r\n\r\n      &:hover {\r\n        background: ${COLORS.primary_20};\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\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\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--next::before {\r\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\");\r\n        }\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n        &.react-datepicker__navigation--next::before {\r\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\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\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\");\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        text-align: center;\r\n        display: inline-block;\r\n        content: '';\r\n        height: 32px;\r\n        width: 32px;\r\n        vertical-align: middle;\r\n      }\r\n\r\n      &.react-datepicker__navigation--next::before {\r\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\");\r\n      }\r\n\r\n      &.react-datepicker__navigation--previous::before {\r\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\");\r\n      }\r\n    }\r\n\r\n    .react-datepicker__month-container,\r\n    .react-datepicker__year--container {\r\n      width: 336px;\r\n    }\r\n\r\n    .react-datepicker__month {\r\n      margin: 0px;\r\n    }\r\n\r\n    .react-datepicker__triangle {\r\n      left: 50% !important;\r\n      display: none;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] {\r\n      margin-top: 0;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\r\n      border-bottom-color: ${COLORS.neutral_20};\r\n    }\r\n\r\n    .react-datepicker__header {\r\n      border-bottom: 1px solid ${COLORS.neutral_200};\r\n      background: ${COLORS.neutral_20};\r\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\r\n      padding-top: 0px;\r\n    }\r\n\r\n    .react-datepicker-year-header {\r\n      height: 48px;\r\n      line-height: 48px !important;\r\n      align-items: center;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n    }\r\n\r\n    .react-datepicker__current-month {\r\n      height: 48px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      margin-right: 5px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n    }\r\n\r\n    .react-datepicker__year {\r\n      max-height: 300px;\r\n      overflow-y: scroll;\r\n\r\n      ${scrollBarStyling(Size.Small)}\r\n    }\r\n\r\n    .react-datepicker__quarter-wrapper{\r\n      width: 100%;\r\n      display: flex;\r\n      align-content: space-evenly;\r\n      flex-wrap: wrap;\r\n      align-items: center;\r\n      gap: 20px;\r\n    }\r\n\r\n    .react-datepicker__year-wrapper {\r\n      max-width: 100%;\r\n      justify-content: space-around;\r\n    }\r\n\r\n    .react-datepicker__navigation-icon {\r\n      display: none;\r\n    }\r\n\r\n    .react-datepicker__day-name {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      height: 48px;\r\n      margin: 0px;\r\n      width: 48px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    }\r\n\r\n    \r\n\r\n    .react-datepicker__year-text {\r\n      background: ${COLORS.white};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      margin-top: 20px;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n      &.react-datepicker__year-text--disabled {\r\n        display: none;\r\n      }\r\n\r\n      &.react-datepicker__day--keyboard-selected {\r\n        color: ${COLORS.neutral_600};\r\n        background: ${COLORS.white};\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &:hover {\r\n        color: ${COLORS.primary_700};\r\n        background: ${COLORS.primary_20};\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n      }\r\n\r\n      &.react-datepicker__year-text--selected {\r\n        color: ${COLORS.white} !important;\r\n        background: ${COLORS.primary_500} !important;\r\n      }\r\n    }\r\n\r\n    .react-datepicker__day, .react-datepicker__quarter-text {\r\n      background: ${COLORS.white};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      flex-grow: 1;\r\n      height: 40px;\r\n      width: 40px;\r\n      margin: 4px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n      &.react-datepicker__day--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected {\r\n        color: ${COLORS.neutral_600};\r\n        background: ${COLORS.white};\r\n        flex-grow: 1;\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &.react-datepicker__quarter--selected {\r\n        color: ${COLORS.white} !important;\r\n        flex-grow: 1;\r\n        background: ${COLORS.primary_500} !important;\r\n      }\r\n\r\n      &:hover {\r\n        color: ${COLORS.primary_700};\r\n        background: ${COLORS.primary_20};\r\n      }\r\n\r\n      &:focus {\r\n        ${focusStyles}\r\n      }\r\n\r\n      &.react-datepicker__day--selected {\r\n        color: ${COLORS.white} !important;\r\n        background: ${COLORS.primary_500} !important;\r\n      }\r\n\r\n      &.react-datepicker__day--today {\r\n        border-radius: 0.3rem;\r\n        color: ${COLORS.neutral_700};\r\n        background: ${COLORS.neutral_100};\r\n\r\n        &:hover {\r\n          color: ${COLORS.primary_700};\r\n          background: ${COLORS.primary_20};\r\n        }\r\n\r\n        &:focus {\r\n          ${focusStyles}\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst IconWrapper = styled.div`\r\n  pointer-events: none;\r\n  position: absolute;\r\n  left: 16px;\r\n  width: 24px;\r\n  height: 24px;\r\n  z-index: ${+Z_INDEXES.focus + 1};\r\n`;\r\n\r\nconst DatepickerRow = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n  align-items: center;\r\n`;\r\n\r\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\r\n  padding-left: 48px !important;\r\n  \r\n  &::placeholder {\r\n    color: ${COLORS.neutral_500};\r\n  }\r\n\r\n  &:focus:not(.focus-visible) {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\r\n  }\r\n\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\r\n\r\n    ::placeholder {\r\n      color: ${COLORS.primary_700};\r\n    }\r\n\r\n    cursor: pointer;\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active,\r\n  &.open {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n\r\n    ::placeholder {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n  \r\n  &:disabled {\r\n    background-color: ${COLORS.white};\r\n  }\r\n\r\n  & ~ ${IconWrapper}{\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n\r\n  &:hover ~ ${IconWrapper} {\r\n    color: ${COLORS.primary_700};\r\n  }\r\n\r\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\r\n    color: ${COLORS.primary_800};\r\n  }\r\n\r\n  &[tabindex='-1'] ~ ${IconWrapper} {\r\n    color: ${COLORS.neutral_300};\r\n  }\r\n`;\r\n\r\nconst quarterComponentsClassPrefix = 'react-datepicker__quarter-';\r\n\r\nconst DatepickerField = React.forwardRef<HTMLInputElement, DatepickerFieldProps>(({\r\n                                            disabled,\r\n                                            readOnly,\r\n                                            onChange,\r\n                                            invalid,\r\n                                            value,\r\n                                            validationMessage,\r\n                                            dateFormat,\r\n                                            autoComplete,\r\n                                            placeholder,\r\n                                            required,\r\n                                            yearPicker,\r\n                                            yearsBeforeCurrentDate,\r\n                                            yearsAfterCurrentDate,\r\n                                            margin,\r\n                                            overflowTooltipPosition,\r\n                                            onBlur,\r\n                                            showQuarterYearPicker,\r\n                                            id,\r\n                                            dataTestId,\r\n                                            ...rest\r\n                                          }: DatepickerFieldProps, ref) => {\r\n  // Globally used variables within the component\r\n  const inputRef = useFocusVisibleRef();\r\n  const datepickerRef = React.useRef<any>(null);\r\n  const focusedQuarterRef = React.useRef<number>(1);\r\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\r\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\r\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\r\n  // 'open' flag is used only for tracking current state of the dropdown,\r\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\r\n  const [open, setOpen] = React.useState<boolean>(false);\r\n\r\n  const getFormattedValue = () => {\r\n    if(showQuarterYearPicker)\r\n    {\r\n      const val = dayjs(value);\r\n      return val.year() + ', Q' + val.quarter();\r\n    }\r\n    else \r\n      return dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\r\n  }\r\n  /**\r\n   * Format the date in a specific way.\r\n   */\r\n  React.useEffect(() => {\r\n    if (value) inputRef.current.value = getFormattedValue();\r\n  }, [value]);\r\n\r\n  function getQuarterItem(classname: string) : HTMLElement {\r\n    return document.getElementsByClassName(quarterComponentsClassPrefix + classname)[0] as HTMLElement;\r\n  }\r\n\r\n  React.useEffect(() => {\r\n    if (yearPickerMode) {\r\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\r\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\r\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\r\n    }\r\n  }, [yearPickerMode]);\r\n\r\n  React.useEffect(() => {\r\n    if(showQuarterYearPicker && open)\r\n    {\r\n      const wrapper = getQuarterItem('wrapper');\r\n      const handler = (event: KeyboardEvent) => {\r\n        switch(event.key)\r\n        {\r\n          case ' ':\r\n          case 'Enter':\r\n            const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n            currentQ.click();\r\n            break;\r\n\r\n          case 'ArrowLeft':\r\n            if(focusedQuarterRef.current > 1)\r\n            {\r\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n              const previousQ = getQuarterItem((focusedQuarterRef.current - 1) + '');\r\n              if(previousQ)\r\n              {\r\n                currentQ.tabIndex = -1;\r\n                previousQ.tabIndex = 0;\r\n                previousQ.focus();\r\n                focusedQuarterRef.current = focusedQuarterRef.current - 1;\r\n              }\r\n            }\r\n            break;\r\n\r\n          case 'ArrowRight':\r\n            if(focusedQuarterRef.current < 4)\r\n            {\r\n              const currentQ = getQuarterItem(focusedQuarterRef.current + '');\r\n              const nextQ = getQuarterItem((focusedQuarterRef.current + 1) + '');\r\n              if(nextQ)\r\n              {\r\n                currentQ.tabIndex = -1;\r\n                nextQ.tabIndex = 0;\r\n                nextQ.focus();\r\n                focusedQuarterRef.current = focusedQuarterRef.current + 1;\r\n              }\r\n            }\r\n            break;\r\n        }\r\n      };\r\n\r\n      wrapper.addEventListener('keydown', handler);\r\n      //unfortunately since there are no efs, and quarter picker is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      \r\n      const selectedQuarter = getQuarterItem('-selected');\r\n      if(selectedQuarter) {\r\n        for (let i = 1; i < 5; i++) {\r\n          if(selectedQuarter.innerText.includes('Q' + i)) {\r\n            focusedQuarterRef.current = i;\r\n            break;\r\n          }\r\n        }\r\n        selectedQuarter.setAttribute(\"tabIndex\", \"0\");\r\n      }\r\n      else\r\n      {\r\n        const firstQuarter = getQuarterItem('1');\r\n        if(firstQuarter) {\r\n          focusedQuarterRef.current = 1;\r\n          firstQuarter.setAttribute(\"tabIndex\", \"0\");\r\n        }\r\n      }\r\n\r\n      return () => {\r\n        wrapper.removeEventListener('keydown', handler);\r\n      };\r\n    }\r\n  }, [showQuarterYearPicker, open]);\r\n\r\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\r\n  //otherwise after year selection datepicker will show January month of the selected year\r\n  React.useEffect(() => {\r\n    if (openAt) {\r\n      datepickerRef.current.setOpen(true);\r\n      //setOpenAt(null);\r\n    }\r\n  }, [openAt]);\r\n\r\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\r\n\r\n  const handleCalendarClose = () => {\r\n    inputRef.current?.blur();\r\n    setOpen(false);\r\n  };\r\n\r\n  const handleCalendarOpen = () => {\r\n    if (openAt) setOpenAt(null);\r\n    setOpen(true);\r\n  };\r\n\r\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\r\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\r\n\r\n  //itemsNumber - controls number of year select options generated in the dropdown\r\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\r\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\r\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\r\n\r\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\r\n    if (e.key === 'Escape' || e.key === 'Esc')\r\n      datepickerRef.current.setOpen(false);\r\n  };\r\n\r\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\r\n    // @ts-ignore\r\n    if (!e.currentTarget.contains(e.relatedTarget)) {\r\n      onBlur && onBlur(e);\r\n    }\r\n  };\r\n  const iconSize = 24;\r\n\r\n  return (\r\n    <>\r\n      {/* Let's render the input itself */}\r\n      <DatePickerContainer quarterPicker={showQuarterYearPicker} data-testid={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\r\n        <DatePicker\r\n          ref={datepickerRef}\r\n          onCalendarOpen={handleCalendarOpen}\r\n          onCalendarClose={handleCalendarClose}\r\n          onKeyDown={handleKeyDown}\r\n          id={id}\r\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\r\n\r\n          onChange={(e: any) => {\r\n            if (onChange) {\r\n              if (yearPickerMode) {\r\n                const newDate = new Date();\r\n                newDate.setFullYear(e.getFullYear());\r\n                newDate.setMonth(activeMonthPage);\r\n                setOpenAt(newDate);\r\n              } else onChange(e);\r\n            }\r\n            if (yearPickerMode) setYearPickerMode(false);\r\n          }}\r\n          disabled={disabled || readOnly}\r\n          locale={en}\r\n          showQuarterYearPicker={showQuarterYearPicker}\r\n          dateFormat={showQuarterYearPicker ? \"yyyy, QQQ\" : undefined}\r\n          showYearPicker={yearPickerMode}\r\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\r\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\r\n          maxDate={yearPickerMode ? maxDate : undefined}\r\n          selected={value}\r\n          openToDate={openAt ?? undefined}\r\n          preventOpenOnFocus={true}\r\n          shouldCloseOnSelect={true}\r\n          renderCustomHeader={\r\n            yearPicker\r\n              ? (params: ReactDatePickerCustomHeaderProps) =>\r\n                React.createElement(\r\n                  DatepickerFieldHeader,\r\n                  {\r\n                    ...params,\r\n                    setActiveMonthPage,\r\n                    customHeaderCount: 0,\r\n                    yearPickerMode: yearPickerMode,\r\n                    setYearPickerMode: setYearPickerMode,\r\n                  },\r\n                  null,\r\n                )\r\n              : undefined\r\n          }\r\n          customInput={\r\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\r\n              <DatepickerRow>\r\n                  <StyledInputFieldStyling\r\n                    ref={inputRef}\r\n                    type=\"text\"\r\n                    name=\"datepicker\"\r\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\r\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\r\n                    tabIndex={disabled || readOnly ? -1 : 0}\r\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\r\n                    autoComplete={autoComplete}\r\n                    placeholder={placeholder}\r\n                    extraRightPadding={iconSize}\r\n                    disabled={disabled}\r\n                    readOnly={true}\r\n                    suppressReadOnlyStyles={!readOnly}\r\n                    required={required}\r\n                    {...rest}\r\n                  />\r\n                  <IconWrapper>\r\n                    <SystemIcons.Calendar size=\"24\"/>\r\n                  </IconWrapper>\r\n                </DatepickerRow>\r\n              {!open && <TooltipOverflow position={overflowTooltipPosition} input={inputRef} withArrow={true} maxWidth=\"100%\" size={Size.Small} align='end'>\r\n                {getFormattedValue()}\r\n              </TooltipOverflow>}\r\n            </InputWrapper>\r\n          }\r\n        />\r\n      </DatePickerContainer>\r\n\r\n      {/* If there is an error, let's render the error */}\r\n      {validationMessage && (\r\n        <ErrorMessage>\r\n          <SystemIcons.TechnicalWarning color={COLORS.critical_400}/>\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n});\r\n\r\nexport default DatepickerField;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/DatepickerFieldHeader.cjs

@@ -15,9 +15,12 @@ var _common = require("../common");
 var _styles = require("../styles");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-var HeaderLabelContainer = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ", ";\n  }\n\n  ", "\n\n  &:hover {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  &:active {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, _common.CommonInteractionStyling, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_600);
+/**
+ * Import react libraries.
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var HeaderLabelContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding-left: 10px;\n  cursor: pointer;\n\n  button {\n    background: transparent;\n    padding: 0px;\n    width: auto;\n  }\n\n  svg {\n    color: ", ";\n  }\n\n  ", "\n\n  &:hover {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n\n  &:active {\n    div {\n      color: ", " !important;\n    }\n    svg {\n      color: ", ";\n    }\n  }\n"])), _styles.COLORS.neutral_600, _common.CommonInteractionStyling, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_600, _styles.COLORS.primary_600);
 var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
   var date = _ref.date,
     decreaseMonth = _ref.decreaseMonth,
@@ -77,12 +80,12 @@ var DatepickerFieldHeader = function DatepickerFieldHeader(_ref) {
 };
 exports.DatepickerFieldHeader = DatepickerFieldHeader;
 DatepickerFieldHeader.propTypes = {
-  date: _propTypes.default.instanceOf(Date).isRequired,
-  customHeaderCount: _propTypes.default.number.isRequired,
-  prevMonthButtonDisabled: _propTypes.default.bool.isRequired,
-  nextMonthButtonDisabled: _propTypes.default.bool.isRequired,
-  prevYearButtonDisabled: _propTypes.default.bool.isRequired,
-  nextYearButtonDisabled: _propTypes.default.bool.isRequired,
-  yearPickerMode: _propTypes.default.bool.isRequired
+  date: _propTypes["default"].instanceOf(Date).isRequired,
+  customHeaderCount: _propTypes["default"].number.isRequired,
+  prevMonthButtonDisabled: _propTypes["default"].bool.isRequired,
+  nextMonthButtonDisabled: _propTypes["default"].bool.isRequired,
+  prevYearButtonDisabled: _propTypes["default"].bool.isRequired,
+  nextYearButtonDisabled: _propTypes["default"].bool.isRequired,
+  yearPickerMode: _propTypes["default"].bool.isRequired
 };
 //# sourceMappingURL=DatepickerFieldHeader.cjs.map

package/dist/InputFields/DatepickerFieldHeader.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerFieldHeader.cjs","names":["HeaderLabelContainer","styled","div","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","React","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${COLORS.primary_600} !important;\r\n    }\r\n    svg {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${COLORS.primary_600} !important;\r\n    }\r\n    svg {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":";;;;;;;;;;AAGA;AACA;AACA;AACA;AACA;AAAmC;AAAA;AAAA;AAAA;AAoBnC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG,giBAc1BC,cAAM,CAACC,WAAW,EAG3BC,gCAAwB,EAIbF,cAAM,CAACG,WAAW,EAGlBH,cAAM,CAACG,WAAW,EAMlBH,cAAM,CAACG,WAAW,EAGlBH,cAAM,CAACG,WAAW,CAGhC;AAEM,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAqB,OASC;EAAA,IARjCC,IAAI,QAAJA,IAAI;IACJC,aAAa,QAAbA,aAAa;IACbC,aAAa,QAAbA,aAAa;IACbC,uBAAuB,QAAvBA,uBAAuB;IACvBC,uBAAuB,QAAvBA,uBAAuB;IACvBC,iBAAiB,QAAjBA,iBAAiB;IACjBC,cAAc,QAAdA,cAAc;IACdC,kBAAkB,QAAlBA,kBAAkB;EAElB,IAAMC,MAAM,GAAG,CAAC,SAAS,EAAE,UAAU,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,UAAU,CAAC;EACzI,IAAMC,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,aAAa,GAAGV,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACvC,IAAID,aAAa,GAAG,CAAC,EAAEA,aAAa,GAAGF,MAAM,CAACI,MAAM,GAAG,CAAC;IACxDL,kBAAkB,CAACG,aAAa,CAAC;IACjCT,aAAa,EAAE;EACjB,CAAC;EAED,IAAMY,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAChC,IAAIC,SAAS,GAAGd,IAAI,CAACW,QAAQ,EAAE,GAAG,CAAC;IACnC,IAAIG,SAAS,IAAIN,MAAM,CAACI,MAAM,GAAG,CAAC,EAAEE,SAAS,GAAG,CAAC;IACjDP,kBAAkB,CAACO,SAAS,CAAC;IAC7BZ,aAAa,EAAE;EACjB,CAAC;EAEDa,KAAK,CAACC,SAAS,CAAC,YAAM;IACpBT,kBAAkB,CAACP,IAAI,CAACW,QAAQ,EAAE,CAAC;EACrC,CAAC,EAAE,CAACX,IAAI,CAAC,CAAC;EAEV,oBACE;IAAA,uBACE;MACE,KAAK,EAAE;QACLiB,OAAO,EAAE,MAAM;QACfC,cAAc,EAAE;MAClB,CAAE;MAAA,WACD,CAACZ,cAAc,iBACd;QAAQ,IAAI,EAAC,QAAQ;QAAC,SAAS,EAAC,qEAAqE;QAAC,OAAO,EAAEG,mBAAoB;QAAC,QAAQ,EAAEN;MAAwB,EAEvK,eACD,sBAAC,oBAAoB;QAAC,OAAO,EAAE;UAAA,OAAME,iBAAiB,CAAC,CAACC,cAAc,CAAC;QAAA,CAAC;QAAA,wBACtE;UAAK,SAAS,EAAC,iCAAiC;UAAA,oBAAKE,MAAM,CAACR,IAAI,CAACW,QAAQ,EAAE,CAAC,cAAIX,IAAI,CAACmB,WAAW,EAAE;QAAA,EAAS,EAC1Gb,cAAc,gBAAG,qBAAC,kBAAW,CAAC,WAAW;UAAC,IAAI,EAAC;QAAM,EAAG,gBAAG,qBAAC,kBAAW,CAAC,aAAa;UAAC,IAAI,EAAC;QAAM,EAAG;MAAA,EAChF,EACtB,CAACA,cAAc,iBACd;QAAQ,IAAI,EAAC,QAAQ;QAAC,SAAS,EAAC,iEAAiE;QAAC,OAAO,EAAEO,mBAAoB;QAAC,QAAQ,EAAET;MAAwB,EAEnK;IAAA;EACG,EACL;AAEP,CAAC;AAAC;AAAA;EA1GAJ,IAAI;EAGJoB,iBAAiB;EAGjBjB,uBAAuB;EACvBC,uBAAuB;EAGvBiB,sBAAsB;EACtBC,sBAAsB;EACtBhB,cAAc;AAAA"}
+{"version":3,"file":"DatepickerFieldHeader.cjs","names":["React","_interopRequireWildcard","require","_icons","_styledComponents","_interopRequireDefault","_common","_styles","_jsxRuntime","_templateObject","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","HeaderLabelContainer","styled","div","_taggedTemplateLiteral2","COLORS","neutral_600","CommonInteractionStyling","primary_600","DatepickerFieldHeader","_ref","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","jsx","Fragment","children","jsxs","style","display","justifyContent","type","className","onClick","disabled","concat","getFullYear","SystemIcons","ArrowDropUp","size","ArrowDropDown","exports","propTypes","_propTypes","instanceOf","Date","isRequired","customHeaderCount","number","bool","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${COLORS.primary_600} !important;\r\n    }\r\n    svg {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${COLORS.primary_600} !important;\r\n    }\r\n    svg {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/DatepickerFieldHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerFieldHeader.js","names":["React","SystemIcons","styled","CommonInteractionStyling","COLORS","HeaderLabelContainer","div","neutral_600","primary_600","DatepickerFieldHeader","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","display","justifyContent","getFullYear","customHeaderCount","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${COLORS.primary_600} !important;\r\n    }\r\n    svg {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${COLORS.primary_600} !important;\r\n    }\r\n    svg {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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"}
+{"version":3,"file":"DatepickerFieldHeader.js","names":["React","SystemIcons","styled","CommonInteractionStyling","COLORS","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","HeaderLabelContainer","div","_templateObject","_taggedTemplateLiteral","neutral_600","primary_600","DatepickerFieldHeader","_ref","date","decreaseMonth","increaseMonth","prevMonthButtonDisabled","nextMonthButtonDisabled","setYearPickerMode","yearPickerMode","setActiveMonthPage","months","handleDecreaseMonth","previousMonth","getMonth","length","handleIncreaseMonth","nextMonth","useEffect","children","style","display","justifyContent","type","className","onClick","disabled","concat","getFullYear","ArrowDropUp","size","ArrowDropDown","propTypes","_pt","instanceOf","Date","isRequired","customHeaderCount","number","bool","prevYearButtonDisabled","nextYearButtonDisabled"],"sources":["../../src/InputFields/DatepickerFieldHeader.tsx"],"sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\nimport { SystemIcons } from '../icons';\r\nimport styled from 'styled-components';\r\nimport { CommonInteractionStyling } from '../common';\r\nimport { COLORS } from '../styles';\r\n\r\nexport interface DatepickerFieldHeaderParams {\r\n  date: Date;\r\n  changeYear(year: number): void;\r\n  changeMonth(month: number): void;\r\n  customHeaderCount: number;\r\n  decreaseMonth(): void;\r\n  increaseMonth(): void;\r\n  prevMonthButtonDisabled: boolean;\r\n  nextMonthButtonDisabled: boolean;\r\n  decreaseYear(): void;\r\n  increaseYear(): void;\r\n  prevYearButtonDisabled: boolean;\r\n  nextYearButtonDisabled: boolean;\r\n  yearPickerMode: boolean;\r\n  setYearPickerMode(val: boolean): void;\r\n  setActiveMonthPage(val: number): void;\r\n}\r\n\r\nconst HeaderLabelContainer = styled.div`\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding-left: 10px;\r\n  cursor: pointer;\r\n\r\n  button {\r\n    background: transparent;\r\n    padding: 0px;\r\n    width: auto;\r\n  }\r\n\r\n  svg {\r\n    color: ${COLORS.neutral_600};\r\n  }\r\n\r\n  ${CommonInteractionStyling}\r\n\r\n  &:hover {\r\n    div {\r\n      color: ${COLORS.primary_600} !important;\r\n    }\r\n    svg {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &:active {\r\n    div {\r\n      color: ${COLORS.primary_600} !important;\r\n    }\r\n    svg {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n`;\r\n\r\nexport const DatepickerFieldHeader = ({\r\n  date,\r\n  decreaseMonth,\r\n  increaseMonth,\r\n  prevMonthButtonDisabled,\r\n  nextMonthButtonDisabled,\r\n  setYearPickerMode,\r\n  yearPickerMode,\r\n  setActiveMonthPage,\r\n}: DatepickerFieldHeaderParams) => {\r\n  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];\r\n  const handleDecreaseMonth = () => {\r\n    let previousMonth = date.getMonth() - 1;\r\n    if (previousMonth < 0) previousMonth = months.length - 1;\r\n    setActiveMonthPage(previousMonth);\r\n    decreaseMonth();\r\n  };\r\n\r\n  const handleIncreaseMonth = () => {\r\n    let nextMonth = date.getMonth() + 1;\r\n    if (nextMonth >= months.length - 1) nextMonth = 0;\r\n    setActiveMonthPage(nextMonth);\r\n    increaseMonth();\r\n  };\r\n\r\n  React.useEffect(() => {\r\n    setActiveMonthPage(date.getMonth());\r\n  }, [date]);\r\n\r\n  return (\r\n    <>\r\n      <div\r\n        style={{\r\n          display: 'flex',\r\n          justifyContent: 'center',\r\n        }}>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--previous\" onClick={handleDecreaseMonth} disabled={prevMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n        <HeaderLabelContainer onClick={() => setYearPickerMode(!yearPickerMode)}>\r\n          <div className=\"react-datepicker__current-month\">{`${months[date.getMonth()]} ${date.getFullYear()}`}</div>\r\n          {yearPickerMode ? <SystemIcons.ArrowDropUp size=\"24px\" /> : <SystemIcons.ArrowDropDown size=\"24px\" />}\r\n        </HeaderLabelContainer>\r\n        {!yearPickerMode && (\r\n          <button type=\"button\" className=\"react-datepicker__navigation react-datepicker__navigation--next\" onClick={handleIncreaseMonth} disabled={nextMonthButtonDisabled}>\r\n          </button>\r\n        )}\r\n      </div>\r\n    </>\r\n  );\r\n};\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Label.cjs

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports["default"] = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,13 +17,22 @@ var _typography = require("../styles/typography");
 var _icons = require("../icons");
 var _jsxRuntime = require("react/jsx-runtime");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+/**
+ * Import React libraries.
+ */
+/**
+ * Import custom styles.
+ */
+/**
+ * Import third-party libraries.
+ */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 // Add component-specific styles.
-var Label = _styledComponents.default.label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
-var LabelRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"])));
-var CopyContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), _typography.TypographyBase, _styles.COLORS.primary_800, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_600, _typography.TypographyBase, _styles.COLORS.neutral_300);
-var LabelRowInner = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"])));
+var Label = _styledComponents["default"].label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
+var LabelRow = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"])));
+var CopyContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  margin-left: auto;\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), _typography.TypographyBase, _styles.COLORS.primary_800, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_600, _typography.TypographyBase, _styles.COLORS.neutral_300);
+var LabelRowInner = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"])));
 
 // Add component-specific types
 var CopyState;
@@ -41,11 +50,11 @@ var InputLabel = function InputLabel(_ref) {
     showCopyButton = _ref.showCopyButton;
   // Globally used variables within the component
   var _React$useState = React.useState(false),
-    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
     required = _React$useState2[0],
     setRequired = _React$useState2[1];
   var _React$useState3 = React.useState(CopyState.Available),
-    _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
+    _React$useState4 = (0, _slicedToArray2["default"])(_React$useState3, 2),
     copyState = _React$useState4[0],
     setCopyState = _React$useState4[1];
 
@@ -110,12 +119,12 @@ var InputLabel = function InputLabel(_ref) {
   });
 };
 InputLabel.propTypes = {
-  inputId: _propTypes.default.string.isRequired,
-  text: _propTypes.default.string.isRequired,
-  margin: _propTypes.default.string,
-  required: _propTypes.default.bool,
-  showCopyButton: _propTypes.default.bool
+  inputId: _propTypes["default"].string.isRequired,
+  text: _propTypes["default"].string.isRequired,
+  margin: _propTypes["default"].string,
+  required: _propTypes["default"].bool,
+  showCopyButton: _propTypes["default"].bool
 };
 var _default = InputLabel;
-exports.default = _default;
+exports["default"] = _default;
 //# sourceMappingURL=Label.cjs.map

package/dist/InputFields/Label.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.cjs","names":["Label","styled","label","ComponentXXSStyling","COLORS","neutral_500","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","CopyContainer","TypographyBase","primary_800","primary_700","primary_600","neutral_300","LabelRowInner","CopyState","InputLabel","inputId","text","size","margin","requiredProp","required","showCopyButton","React","useState","setRequired","Available","copyState","setCopyState","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","copyInputClick","e","preventDefault","Copied","val","value","window","navigator","clipboard","writeText","setTimeout","critical_500","Size","Medium"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';\r\nimport { SystemIcons } from '../icons';\r\nimport {HyperLink, StyledLink} from '../HyperLink';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  pointer-events: none;\r\n`;\r\n\r\nconst LabelRow = styled.div<{ margin?: string }>`\r\n  display: flex;\r\n  align-items: flex-start;\r\n  height: 16px;\r\n  margin-bottom: 4px;\r\n`;\r\n\r\nconst CopyContainer = styled.div`\r\n  margin-left: auto;\r\n\r\n  &:visited:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled),\r\n  &.hover-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled),\r\n  &.focus-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled),\r\n  &.active-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled)\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &.disabled\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n  cursor: pointer;\r\n`;\r\n\r\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: 100%;\r\n  height: 100%;\r\n  align-items: center;\r\n`;\r\n\r\n// Add component-specific types\r\nexport type LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  required?: boolean;\r\n  showCopyButton?: boolean;\r\n};\r\n\r\nenum CopyState {\r\n  Disabled = 0,\r\n  Available = 1,\r\n  Copied = 2\r\n}\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp, showCopyButton }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.Available);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if(requiredProp === undefined)\r\n    {\r\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n        setRequired(true);\r\n      } else {\r\n        setRequired(false);\r\n      }\r\n    }\r\n    else\r\n      setRequired(Boolean(requiredProp));\r\n  }, []);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  const copyInputClick = (e: any) => {\r\n    e.preventDefault();\r\n    if(copyState == CopyState.Copied)\r\n      return;\r\n    \r\n    const val = (document.getElementById(inputId) as HTMLInputElement)?.value;\r\n    if(val)\r\n    {\r\n      window.navigator.clipboard.writeText(val);\r\n      setCopyState(CopyState.Copied);\r\n      setTimeout(() => {\r\n        setCopyState(CopyState.Available);\r\n      }, 1000);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <LabelRow margin={margin}>\r\n      <LabelRowInner size={size}>\r\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n          {text}\r\n        </Label>\r\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\r\n\r\n        {showCopyButton && \r\n        <CopyContainer className={copyState != CopyState.Available ? \"disabled\" : \"\"} onClick={copyInputClick}>\r\n          { size == Size.Medium ? <ComponentXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXS> :\r\n          <ComponentXXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXXS> }\r\n        </CopyContainer> }\r\n      </LabelRowInner>\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"mappings":"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"}
+{"version":3,"file":"Label.cjs","names":["React","_interopRequireWildcard","require","_styles","_types","_styledComponents","_interopRequireDefault","_typography","_icons","_jsxRuntime","_templateObject","_templateObject2","_templateObject3","_templateObject4","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","_typeof","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Label","styled","label","_taggedTemplateLiteral2","ComponentXXSStyling","COLORS","neutral_500","BREAKPOINTS","MEDIUM","ComponentXSStyling","LabelRow","div","CopyContainer","TypographyBase","primary_800","primary_700","primary_600","neutral_300","LabelRowInner","CopyState","InputLabel","_ref","inputId","text","size","margin","requiredProp","required","showCopyButton","_React$useState","useState","_React$useState2","_slicedToArray2","setRequired","_React$useState3","Available","_React$useState4","copyState","setCopyState","useEffect","undefined","_document$getElementB","document","getElementById","getAttribute","Boolean","onTriggerClick","id","_document$getElementB2","click","copyInputClick","_document$getElementB3","preventDefault","Copied","val","value","window","navigator","clipboard","writeText","setTimeout","jsx","children","jsxs","htmlFor","onClick","className","SystemIcons","Asterisk","color","critical_500","Size","Medium","ComponentXS","ComponentXXS","propTypes","_propTypes","string","isRequired","bool","_default","exports"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';\r\nimport { SystemIcons } from '../icons';\r\nimport {HyperLink, StyledLink} from '../HyperLink';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  pointer-events: none;\r\n`;\r\n\r\nconst LabelRow = styled.div<{ margin?: string }>`\r\n  display: flex;\r\n  align-items: flex-start;\r\n  height: 16px;\r\n  margin-bottom: 4px;\r\n`;\r\n\r\nconst CopyContainer = styled.div`\r\n  margin-left: auto;\r\n\r\n  &:visited:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled),\r\n  &.hover-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled),\r\n  &.focus-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled),\r\n  &.active-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled)\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &.disabled\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n  cursor: pointer;\r\n`;\r\n\r\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: 100%;\r\n  height: 100%;\r\n  align-items: center;\r\n`;\r\n\r\n// Add component-specific types\r\nexport type LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  required?: boolean;\r\n  showCopyButton?: boolean;\r\n};\r\n\r\nenum CopyState {\r\n  Disabled = 0,\r\n  Available = 1,\r\n  Copied = 2\r\n}\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp, showCopyButton }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.Available);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if(requiredProp === undefined)\r\n    {\r\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n        setRequired(true);\r\n      } else {\r\n        setRequired(false);\r\n      }\r\n    }\r\n    else\r\n      setRequired(Boolean(requiredProp));\r\n  }, []);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  const copyInputClick = (e: any) => {\r\n    e.preventDefault();\r\n    if(copyState == CopyState.Copied)\r\n      return;\r\n    \r\n    const val = (document.getElementById(inputId) as HTMLInputElement)?.value;\r\n    if(val)\r\n    {\r\n      window.navigator.clipboard.writeText(val);\r\n      setCopyState(CopyState.Copied);\r\n      setTimeout(() => {\r\n        setCopyState(CopyState.Available);\r\n      }, 1000);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <LabelRow margin={margin}>\r\n      <LabelRowInner size={size}>\r\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n          {text}\r\n        </Label>\r\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\r\n\r\n        {showCopyButton && \r\n        <CopyContainer className={copyState != CopyState.Available ? \"disabled\" : \"\"} onClick={copyInputClick}>\r\n          { size == Size.Medium ? <ComponentXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXS> :\r\n          <ComponentXXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXXS> }\r\n        </CopyContainer> }\r\n      </LabelRowInner>\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"mappings":"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","ignoreList":[]}

package/dist/InputFields/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXS","ComponentXSStyling","ComponentXXS","ComponentXXSStyling","TypographyBase","SystemIcons","Label","label","neutral_500","MEDIUM","LabelRow","div","CopyContainer","primary_800","primary_700","primary_600","neutral_300","LabelRowInner","CopyState","InputLabel","inputId","text","size","margin","requiredProp","required","showCopyButton","useState","setRequired","Available","copyState","setCopyState","useEffect","undefined","document","getElementById","getAttribute","Boolean","onTriggerClick","id","click","copyInputClick","e","preventDefault","Copied","val","value","window","navigator","clipboard","writeText","setTimeout","critical_500","Medium"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';\r\nimport { SystemIcons } from '../icons';\r\nimport {HyperLink, StyledLink} from '../HyperLink';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  pointer-events: none;\r\n`;\r\n\r\nconst LabelRow = styled.div<{ margin?: string }>`\r\n  display: flex;\r\n  align-items: flex-start;\r\n  height: 16px;\r\n  margin-bottom: 4px;\r\n`;\r\n\r\nconst CopyContainer = styled.div`\r\n  margin-left: auto;\r\n\r\n  &:visited:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled),\r\n  &.hover-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled),\r\n  &.focus-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled),\r\n  &.active-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled)\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &.disabled\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n  cursor: pointer;\r\n`;\r\n\r\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: 100%;\r\n  height: 100%;\r\n  align-items: center;\r\n`;\r\n\r\n// Add component-specific types\r\nexport type LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  required?: boolean;\r\n  showCopyButton?: boolean;\r\n};\r\n\r\nenum CopyState {\r\n  Disabled = 0,\r\n  Available = 1,\r\n  Copied = 2\r\n}\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp, showCopyButton }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.Available);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if(requiredProp === undefined)\r\n    {\r\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n        setRequired(true);\r\n      } else {\r\n        setRequired(false);\r\n      }\r\n    }\r\n    else\r\n      setRequired(Boolean(requiredProp));\r\n  }, []);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  const copyInputClick = (e: any) => {\r\n    e.preventDefault();\r\n    if(copyState == CopyState.Copied)\r\n      return;\r\n    \r\n    const val = (document.getElementById(inputId) as HTMLInputElement)?.value;\r\n    if(val)\r\n    {\r\n      window.navigator.clipboard.writeText(val);\r\n      setCopyState(CopyState.Copied);\r\n      setTimeout(() => {\r\n        setCopyState(CopyState.Available);\r\n      }, 1000);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <LabelRow margin={margin}>\r\n      <LabelRowInner size={size}>\r\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n          {text}\r\n        </Label>\r\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\r\n\r\n        {showCopyButton && \r\n        <CopyContainer className={copyState != CopyState.Available ? \"disabled\" : \"\"} onClick={copyInputClick}>\r\n          { size == Size.Medium ? <ComponentXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXS> :\r\n          <ComponentXXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXXS> }\r\n        </CopyContainer> }\r\n      </LabelRowInner>\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"mappings":"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"}
+{"version":3,"file":"Label.js","names":["React","BREAKPOINTS","COLORS","Size","styled","ComponentXS","ComponentXSStyling","ComponentXXS","ComponentXXSStyling","TypographyBase","SystemIcons","jsx","_jsx","jsxs","_jsxs","Label","label","_templateObject","_taggedTemplateLiteral","neutral_500","MEDIUM","LabelRow","div","_templateObject2","CopyContainer","_templateObject3","primary_800","primary_700","primary_600","neutral_300","LabelRowInner","_templateObject4","CopyState","InputLabel","_ref","inputId","text","size","margin","requiredProp","required","showCopyButton","_React$useState","useState","_React$useState2","_slicedToArray","setRequired","_React$useState3","Available","_React$useState4","copyState","setCopyState","useEffect","undefined","_document$getElementB","document","getElementById","getAttribute","Boolean","onTriggerClick","id","_document$getElementB2","click","copyInputClick","e","_document$getElementB3","preventDefault","Copied","val","value","window","navigator","clipboard","writeText","setTimeout","children","htmlFor","onClick","className","Asterisk","color","critical_500","Medium","propTypes","_pt","string","isRequired","bool"],"sources":["../../src/InputFields/Label.tsx"],"sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport { ComponentXS, ComponentXSStyling, ComponentXXS, ComponentXXSStyling, TypographyBase } from '../styles/typography';\r\nimport { SystemIcons } from '../icons';\r\nimport {HyperLink, StyledLink} from '../HyperLink';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  pointer-events: none;\r\n`;\r\n\r\nconst LabelRow = styled.div<{ margin?: string }>`\r\n  display: flex;\r\n  align-items: flex-start;\r\n  height: 16px;\r\n  margin-bottom: 4px;\r\n`;\r\n\r\nconst CopyContainer = styled.div`\r\n  margin-left: auto;\r\n\r\n  &:visited:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n\r\n  &:hover:not(.disabled),\r\n  &.hover-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:focus:not(.disabled),\r\n  &.focus-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:active:not(.disabled),\r\n  &.active-state:not(.disabled) {\r\n    ${TypographyBase}\r\n    {\r\n      color: ${COLORS.primary_700};\r\n      background-color: white;\r\n      text-decoration-line: underline;\r\n    }\r\n  }\r\n\r\n  &:not(.disabled)\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${COLORS.primary_600};\r\n    }\r\n  }\r\n\r\n  &.disabled\r\n  {\r\n    ${TypographyBase}\r\n    {\r\n      outline: none;\r\n      padding: 2px 0;\r\n      text-decoration-style: solid;\r\n      text-decoration-line: none;\r\n      font-weight: 700;\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n  }\r\n  cursor: pointer;\r\n`;\r\n\r\nconst LabelRowInner = styled.div<{ size: Size.Small | Size.Medium | undefined }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  width: 100%;\r\n  height: 100%;\r\n  align-items: center;\r\n`;\r\n\r\n// Add component-specific types\r\nexport type LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n  required?: boolean;\r\n  showCopyButton?: boolean;\r\n};\r\n\r\nenum CopyState {\r\n  Disabled = 0,\r\n  Available = 1,\r\n  Copied = 2\r\n}\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin, required: requiredProp, showCopyButton }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n  const [copyState, setCopyState] = React.useState<CopyState>(CopyState.Available);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if(requiredProp === undefined)\r\n    {\r\n      if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n        setRequired(true);\r\n      } else {\r\n        setRequired(false);\r\n      }\r\n    }\r\n    else\r\n      setRequired(Boolean(requiredProp));\r\n  }, []);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  const copyInputClick = (e: any) => {\r\n    e.preventDefault();\r\n    if(copyState == CopyState.Copied)\r\n      return;\r\n    \r\n    const val = (document.getElementById(inputId) as HTMLInputElement)?.value;\r\n    if(val)\r\n    {\r\n      window.navigator.clipboard.writeText(val);\r\n      setCopyState(CopyState.Copied);\r\n      setTimeout(() => {\r\n        setCopyState(CopyState.Available);\r\n      }, 1000);\r\n    }\r\n  };\r\n\r\n  return (\r\n    <LabelRow margin={margin}>\r\n      <LabelRowInner size={size}>\r\n        <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n          {text}\r\n        </Label>\r\n        {required && <SystemIcons.Asterisk size=\"16px\" color={COLORS.critical_500} />}\r\n\r\n        {showCopyButton && \r\n        <CopyContainer className={copyState != CopyState.Available ? \"disabled\" : \"\"} onClick={copyInputClick}>\r\n          { size == Size.Medium ? <ComponentXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXS> :\r\n          <ComponentXXS>{copyState == CopyState.Copied ? 'Copied' : 'Copy'}</ComponentXXS> }\r\n        </CopyContainer> }\r\n      </LabelRowInner>\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"mappings":"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","ignoreList":[]}