@laerdal/life-react-components 2.2.0 → 2.2.1-dev.10

package/dist/InputFields/DatepickerField.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.cjs","names":["dayjs","extend","advancedFormat","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentSStyling","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Size","Small","ComponentMStyling","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","React","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","id","dataTestId","rest","inputRef","useFocusVisibleRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","display","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\n\ndayjs.extend(advancedFormat);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer data-testId={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n          id={id}\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <div style={{display: 'block', margin: '4px 0px'}}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":";;;;;;;;;;;;AAGA;AAKA;AACA;AACA;AACA;AACA;AAOA;AACA;AACA;AACA;AAKA;AACA;AAGA;AACA;AAAwC;AAAA;AAAA;AAAA;AAAA;AAlBxCA,cAAK,CAACC,MAAM,CAACC,uBAAc,CAAC;;AAE5B;AACA;AACA;;AAmCA;AACA;AACA;AACA,IAAMC,mBAAmB,GAAGC,yBAAM,CAACC,GAAG,igPAEvBC,iBAAS,CAACC,QAAQ,EAM3B,UAACC,KAAK;EAAA,OAAMA,KAAK,CAACC,MAAM,qBAAcD,KAAK,CAACC,MAAM,SAAM,EAAE;AAAA,CAAC,EAsB3CC,eAAM,CAACC,UAAU,EAY7BC,mBAAW,EA+CQF,eAAM,CAACG,UAAU,EAIbH,eAAM,CAACI,WAAW,EAC/BJ,eAAM,CAACG,UAAU,EACrB,UAACL,KAAK;EAAA,OAAM,CAACA,KAAK,CAACO,UAAU,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC,EAUxD,IAAAC,yBAAiB,EAACC,0BAAkB,CAACC,IAAI,EAAER,eAAM,CAACS,WAAW,CAAC,EAO9D,IAAAC,wBAAgB,EAACC,WAAI,CAACC,KAAK,CAAC,EAgB5B,IAAAC,yBAAiB,EAACN,0BAAkB,CAACO,OAAO,EAAEd,eAAM,CAACS,WAAW,CAAC,EAIrDT,eAAM,CAACe,KAAK,EASxB,IAAAF,yBAAiB,EAACN,0BAAkB,CAACO,OAAO,EAAEd,eAAM,CAACS,WAAW,CAAC,EAMxDT,eAAM,CAACS,WAAW,EACbT,eAAM,CAACe,KAAK,EAMjBf,eAAM,CAACgB,WAAW,EACbhB,eAAM,CAACC,UAAU,EAI7BC,mBAAW,EAIJF,eAAM,CAACe,KAAK,EACPf,eAAM,CAACiB,WAAW,EAKpBjB,eAAM,CAACe,KAAK,EASxB,IAAAF,yBAAiB,EAACN,0BAAkB,CAACO,OAAO,EAAEd,eAAM,CAACS,WAAW,CAAC,EAExDT,eAAM,CAACS,WAAW,EACbT,eAAM,CAACe,KAAK,EAMjBf,eAAM,CAACgB,WAAW,EACbhB,eAAM,CAACC,UAAU,EAI7BC,mBAAW,EAIJF,eAAM,CAACe,KAAK,EACPf,eAAM,CAACiB,WAAW,EAKvBjB,eAAM,CAACkB,WAAW,EACblB,eAAM,CAACmB,WAAW,EAGrBnB,eAAM,CAACgB,WAAW,EACbhB,eAAM,CAACC,UAAU,EAI7BC,mBAAW,CAKtB;AAED,IAAMkB,WAAW,GAAG1B,yBAAM,CAACC,GAAG,2NAMjB,CAACC,iBAAS,CAACyB,KAAK,GAAG,CAAC,EACtBrB,eAAM,CAACS,WAAW,CAC5B;AAED,IAAMa,aAAa,GAAG5B,yBAAM,CAACC,GAAG,yJAI/B;AAED,IAAM4B,uBAAuB,GAAG,IAAA7B,yBAAM,EAAC8B,0BAAiB,CAAC,kyBAE5CxB,eAAM,CAACyB,WAAW,EAISzB,eAAM,CAAC0B,WAAW,EAIlB1B,eAAM,CAAC2B,WAAW,EAG3C3B,eAAM,CAACgB,WAAW,EAIThB,eAAM,CAACC,UAAU,EAC5BD,eAAM,CAACgB,WAAW,EAKShB,eAAM,CAAC0B,WAAW,EAClC1B,eAAM,CAAC4B,WAAW,EAC7B5B,eAAM,CAAC6B,WAAW,EAGhB7B,eAAM,CAAC6B,WAAW,EAKT7B,eAAM,CAACe,KAAK,EAGtBK,WAAW,EACZpB,eAAM,CAACgB,WAAW,EAGhBI,WAAW,EAAcA,WAAW,EACtCpB,eAAM,CAAC6B,WAAW,EAGdT,WAAW,EAAmBA,WAAW,EAC7CpB,eAAM,CAAC8B,WAAW,CAE9B;AAED,IAAMC,eAAe,gBAAGC,cAAK,CAACC,UAAU,CAAC,gBAmB0BC,GAAG,EAAK;EAAA,IAlB/BC,QAAQ,QAARA,QAAQ;IACRC,QAAQ,QAARA,QAAQ;IACRC,SAAQ,QAARA,QAAQ;IACRC,OAAO,QAAPA,OAAO;IACPC,KAAK,QAALA,KAAK;IACLC,iBAAiB,QAAjBA,iBAAiB;IACjBC,UAAU,QAAVA,UAAU;IACVC,YAAY,QAAZA,YAAY;IACZC,WAAW,QAAXA,WAAW;IACXC,QAAQ,QAARA,QAAQ;IACRvC,UAAU,QAAVA,UAAU;IACVwC,sBAAsB,QAAtBA,sBAAsB;IACtBC,qBAAqB,QAArBA,qBAAqB;IACrB/C,MAAM,QAANA,MAAM;IACNgD,MAAM,QAANA,MAAM;IACNC,EAAE,QAAFA,EAAE;IACFC,UAAU,QAAVA,UAAU;IACPC,IAAI;EAEjD;EACA,IAAMC,QAAQ,GAAG,IAAAC,0BAAkB,GAAE;EACrC,IAAMC,aAAa,GAAGrB,cAAK,CAACsB,MAAM,CAAM,IAAI,CAAC;EAC7C,sBAA8CtB,cAAK,CAACuB,QAAQ,CAAS,CAAC,CAAC,CAAC;IAAA;IAAjEC,eAAe;IAAEC,kBAAkB;EAC1C,uBAA4CzB,cAAK,CAACuB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAAnEG,cAAc;IAAEC,iBAAiB;EACxC,uBAA4B3B,cAAK,CAACuB,QAAQ,CAAc,IAAI,CAAC;IAAA;IAAtDK,MAAM;IAAEC,SAAS;EACxB;EACA;EACA,uBAAwB7B,cAAK,CAACuB,QAAQ,CAAU,KAAK,CAAC;IAAA;IAA/CO,IAAI;IAAEC,OAAO;;EAEpB;AACF;AACA;EACE/B,cAAK,CAACgC,SAAS,CAAC,YAAM;IACpB,IAAIzB,KAAK,EAAEY,QAAQ,CAACc,OAAO,CAAC1B,KAAK,GAAG,IAAAjD,cAAK,EAACiD,KAAK,CAAC,CAAC2B,MAAM,CAACzB,UAAU,GAAGA,UAAU,GAAG,eAAe,CAAC;EACpG,CAAC,EAAE,CAACF,KAAK,CAAC,CAAC;EAEXP,cAAK,CAACgC,SAAS,CAAC,YAAM;IACpB,IAAIN,cAAc,EAAE;MAAA;MAClB;MACA;MACA,IAAMS,YAAY,GAAGC,QAAQ,CAACC,sBAAsB,CAAC,uCAAuC,CAAC,CAAC,CAAC,CAAgB;MAC/G,IAAMC,cAAc,GAAGH,YAAY,aAAZA,YAAY,gDAAZA,YAAY,CAAEI,aAAa,0DAA3B,sBAA6BA,aAAa;MACjE,IAAIJ,YAAY,IAAIG,cAAc,EAAEA,cAAc,CAACE,SAAS,GAAGL,YAAY,CAACM,SAAS,GAAG,CAAC,GAAGN,YAAY,CAACO,YAAY;IACvH;EACF,CAAC,EAAE,CAAChB,cAAc,CAAC,CAAC;;EAEpB;EACA;EACA1B,cAAK,CAACgC,SAAS,CAAC,YAAM;IACpB,IAAIJ,MAAM,EAAE;MACVP,aAAa,CAACY,OAAO,CAACF,OAAO,CAAC,IAAI,CAAC;MACnC;IACF;EACF,CAAC,EAAE,CAACH,MAAM,CAAC,CAAC;EAEZ5B,cAAK,CAAC2C,mBAAmB,CAACzC,GAAG,EAAE;IAAA,OAAMiB,QAAQ,CAACc,OAAO;EAAA,GAAE,CAACd,QAAQ,CAAC,CAAC;EAElE,IAAMyB,mBAAmB,GAAG,SAAtBA,mBAAmB,GAAS;IAAA;IAChC,qBAAAzB,QAAQ,CAACc,OAAO,sDAAhB,kBAAkBY,IAAI,EAAE;IACxBd,OAAO,CAAC,KAAK,CAAC;EAChB,CAAC;EAED,IAAMe,kBAAkB,GAAG,SAArBA,kBAAkB,GAAS;IAC/B,IAAIlB,MAAM,EAAEC,SAAS,CAAC,IAAI,CAAC;IAC3BE,OAAO,CAAC,IAAI,CAAC;EACf,CAAC;EAED,IAAIgB,OAAO,GAAG,IAAIC,IAAI,CAACzC,KAAK,IAAI,IAAIyC,IAAI,CAACzC,KAAK,CAAC,GAAG,IAAIyC,IAAI,EAAE,GAAG,IAAIA,IAAI,CAACzC,KAAK,CAAC,GAAG,IAAIyC,IAAI,EAAE,CAAC;EAC5FD,OAAO,CAACE,WAAW,CAACF,OAAO,CAACG,WAAW,EAAE,IAAIpC,qBAAqB,aAArBA,qBAAqB,cAArBA,qBAAqB,GAAI,EAAE,CAAC,CAAC;;EAE1E;EACA;EACA,IAAIqC,OAAO,GAAG,IAAIH,IAAI,CAACzC,KAAK,IAAI,IAAIyC,IAAI,CAACzC,KAAK,CAAC,GAAG,IAAIyC,IAAI,EAAE,GAAG,IAAIA,IAAI,CAACzC,KAAK,CAAC,GAAG,IAAIyC,IAAI,EAAE,CAAC;EAC5F,IAAMI,WAAW,GAAGC,IAAI,CAACC,KAAK,CAAC,CAACH,OAAO,CAACD,WAAW,EAAE,IAAIrC,sBAAsB,aAAtBA,sBAAsB,cAAtBA,sBAAsB,GAAI,EAAE,CAAC,IAAI,CAAC,CAAC;EAE5F,IAAM0C,aAAa,GAAG,SAAhBA,aAAa,CAAIC,CAAsC,EAAK;IAChE,IAAIA,CAAC,CAACC,GAAG,KAAK,QAAQ,IAAID,CAAC,CAACC,GAAG,KAAK,KAAK,EACvCpC,aAAa,CAACY,OAAO,CAACF,OAAO,CAAC,KAAK,CAAC;EACxC,CAAC;EAED,IAAM2B,UAAU,GAAG,SAAbA,UAAU,CAAIF,CAAmC,EAAK;IAC1D;IACA,IAAI,CAACA,CAAC,CAACG,aAAa,CAACC,QAAQ,CAACJ,CAAC,CAACK,aAAa,CAAC,EAAE;MAC9C9C,MAAM,IAAIA,MAAM,CAACyC,CAAC,CAAC;IACrB;EACF,CAAC;EAED,oBACE;IAAA,wBAEE,qBAAC,mBAAmB;MAAC,eAAavC,UAAW;MAAC,UAAU,EAAES,cAAe;MAAC,MAAM,EAAE3D,MAAM,IAAI,EAAG;MAAC,MAAM,EAAE2F,UAAW;MAAA,uBACjH,qBAAC,wBAAU;QACT,GAAG,EAAErC,aAAc;QACnB,cAAc,EAAEyB,kBAAmB;QACnC,eAAe,EAAEF,mBAAoB;QACrC,SAAS,EAAEW,aAAc;QACzB,EAAE,EAAEvC,EAAG;QACP,cAAc,EAAE;UAAA,OAAMK,aAAa,CAACY,OAAO,CAACF,OAAO,CAAC,KAAK,CAAC;QAAA,CAAC;QAE3D,QAAQ,EAAE,kBAACyB,CAAM,EAAK;UACpB,IAAInD,SAAQ,EAAE;YACZ,IAAIqB,cAAc,EAAE;cAClB,IAAMoC,OAAO,GAAG,IAAId,IAAI,EAAE;cAC1Bc,OAAO,CAACb,WAAW,CAACO,CAAC,CAACN,WAAW,EAAE,CAAC;cACpCY,OAAO,CAACC,QAAQ,CAACvC,eAAe,CAAC;cACjCK,SAAS,CAACiC,OAAO,CAAC;YACpB,CAAC,MAAMzD,SAAQ,CAACmD,CAAC,CAAC;UACpB;UACA,IAAI9B,cAAc,EAAEC,iBAAiB,CAAC,KAAK,CAAC;QAC9C,CAAE;QACF,QAAQ,EAAExB,QAAQ,IAAIC,QAAS;QAC/B,MAAM,EAAE4D,aAAG;QACX,cAAc,EAAEtC;QAChB;QAAA;QACA,cAAc,EAAEA,cAAc,GAAG0B,WAAW,GAAGa,SAAU;QACzD,OAAO,EAAEvC,cAAc,GAAGqB,OAAO,GAAGkB,SAAU;QAC9C,QAAQ,EAAE1D,KAAM;QAChB,UAAU,EAAEqB,MAAM,aAANA,MAAM,cAANA,MAAM,GAAIqC,SAAU;QAChC,kBAAkB,EAAE,IAAK;QACzB,mBAAmB,EAAE,IAAK;QAC1B,kBAAkB,EAChB5F,UAAU,GACN,UAAC6F,MAAwC;UAAA,oBACzClE,cAAK,CAACmE,aAAa,CACjBC,4CAAqB,kCAEhBF,MAAM;YACTzC,kBAAkB,EAAlBA,kBAAkB;YAClB4C,iBAAiB,EAAE,CAAC;YACpB3C,cAAc,EAAEA,cAAc;YAC9BC,iBAAiB,EAAEA;UAAiB,IAEtC,IAAI,CACL;QAAA,IACDsC,SACL;QACD,WAAW,eACT,qBAAC,qBAAY;UAAC,QAAQ,EAAE9D,QAAS;UAAC,QAAQ,EAAEC,QAAS;UAAA,uBACnD;YAAK,KAAK,EAAE;cAACkE,OAAO,EAAE,OAAO;cAAEvG,MAAM,EAAE;YAAS,CAAE;YAAA,uBAChD,sBAAC,aAAa;cAAA,wBACZ,qBAAC,uBAAuB;gBACtB,GAAG,EAAEoD,QAAS;gBACd,IAAI,EAAC,MAAM;gBACX,IAAI,EAAC,YAAY;gBACjB,SAAS,EAAE,mBAACqC,CAAC;kBAAA,OAAKA,CAAC,CAACC,GAAG,KAAK,OAAO,IAAIpC,aAAa,CAACY,OAAO,CAACF,OAAO,CAAC,IAAI,CAAC;gBAAA,CAAC;gBAC3E,SAAS,EAAGzB,OAAO,GAAG,SAAS,GAAG,EAAE,IAAIwB,IAAI,GAAG,OAAO,GAAG,EAAE,CAAG;gBAC9D,QAAQ,EAAE3B,QAAQ,IAAIC,QAAQ,GAAG,CAAC,CAAC,GAAG,CAAE;gBACxC,OAAO,EAAE,iBAACoD,CAAC;kBAAA;kBAAA,6BAAKrC,QAAQ,CAACc,OAAO,uDAAhB,mBAAkBsC,iBAAiB,CAAC,CAAC,EAAE,CAAC,CAAC;gBAAA,CAAC;gBAC1D,YAAY,EAAE7D,YAAa;gBAC3B,WAAW,EAAEC,WAAY;gBACzB,QAAQ,EAAER,QAAS;gBACnB,QAAQ,EAAE,IAAK;gBACf,sBAAsB,EAAE,CAACC,QAAS;gBAClC,QAAQ,EAAEQ;cAAS,GACfM,IAAI,EACR,eACF,qBAAC,WAAW;gBAAA,uBACV,qBAAC,qBAAQ;kBAAC,IAAI,EAAC;gBAAI;cAAE,EACT;YAAA;UACA;QACZ;MAET;IACD,EACkB,EAGrBV,iBAAiB,iBAChB,sBAAC,qBAAY;MAAA,wBACX,qBAAC,6BAAgB;QAAC,KAAK,EAAExC,eAAM,CAACwG;MAAa,EAAE,eAC/C;QAAA,UAAOhE;MAAiB,EAAQ;IAAA,EAEnC;EAAA,EACA;AAEP,CAAC,CAAC;AAAC;EA7dDD,KAAK;EACLF,QAAQ;EACRU,MAAM;EAENT,OAAO;EACPG,UAAU;EACVD,iBAAiB;EACjBE,YAAY;EACZC,WAAW;EACXtC,UAAU;EACVwC,sBAAsB;EACtBC,qBAAqB;EACrB/C,MAAM;AAAA;AAAA,eAmdOgC,eAAe;AAAA"}
+{"version":3,"file":"DatepickerField.cjs","names":["dayjs","extend","advancedFormat","DatePickerContainer","styled","div","Z_INDEXES","dropdown","props","margin","COLORS","primary_20","focusStyles","neutral_20","neutral_200","yearPicker","ComponentSStyling","ComponentTextStyle","Bold","neutral_600","scrollBarStyling","Size","Small","ComponentMStyling","Regular","white","primary_700","primary_500","neutral_700","neutral_100","IconWrapper","focus","DatepickerRow","StyledInputFieldStyling","InputFieldStyling","neutral_500","primary_300","primary_200","primary_100","primary_800","neutral_300","DatepickerField","React","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","id","dataTestId","rest","inputRef","useFocusVisibleRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","en","undefined","params","createElement","DatepickerFieldHeader","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\n\ndayjs.extend(advancedFormat);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n  \n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  & ~ ${IconWrapper}{\n    color: ${COLORS.neutral_600};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &[tabindex='-1'] ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer data-testId={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n          id={id}\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}

package/dist/InputFields/DatepickerField.js

@@ -54,9 +54,9 @@ var DatePickerContainer = styled.div(_templateObject || (_templateObject = _tagg
 }, COLORS.primary_20, focusStyles, COLORS.neutral_20, COLORS.neutral_200, COLORS.neutral_20, function (props) {
   return !props.yearPicker ? '96px' : '54px';
 }, ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600), scrollBarStyling(Size.Small), ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, focusStyles, COLORS.white, COLORS.primary_500, COLORS.white, ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600), COLORS.neutral_600, COLORS.white, COLORS.primary_700, COLORS.primary_20, focusStyles, COLORS.white, COLORS.primary_500, COLORS.neutral_700, COLORS.neutral_100, COLORS.primary_700, COLORS.primary_20, focusStyles);
-var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n  color: ", ";\n"])), +Z_INDEXES.focus + 1, COLORS.neutral_600);
+var IconWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ", ";\n"])), +Z_INDEXES.focus + 1);
 var DatepickerRow = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n"])));
-var StyledInputFieldStyling = styled(InputFieldStyling)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n\n  &:disabled {\n    background-color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &:disabled ~ ", ", &:read-only ~ ", " {\n    color: ", ";\n  }\n"])), COLORS.neutral_500, COLORS.primary_300, COLORS.primary_200, COLORS.primary_700, COLORS.primary_20, COLORS.primary_700, COLORS.primary_300, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.white, IconWrapper, COLORS.primary_700, IconWrapper, IconWrapper, COLORS.primary_800, IconWrapper, IconWrapper, COLORS.neutral_300);
+var StyledInputFieldStyling = styled(InputFieldStyling)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ", ";\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n\n    cursor: pointer;\n    background-color: ", ";\n    color: ", ";\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    background-color: ", ";\n    color: ", ";\n\n    ::placeholder {\n      color: ", ";\n    }\n  }\n  \n  &:disabled {\n    background-color: ", ";\n  }\n\n  & ~ ", "{\n    color: ", ";\n  }\n\n  &:hover ~ ", " {\n    color: ", ";\n  }\n\n  &:active ~ ", ", &.open ~ ", " {\n    color: ", ";\n  }\n\n  &[tabindex='-1'] ~ ", " {\n    color: ", ";\n  }\n"])), COLORS.neutral_500, COLORS.primary_300, COLORS.primary_200, COLORS.primary_700, COLORS.primary_20, COLORS.primary_700, COLORS.primary_300, COLORS.primary_100, COLORS.primary_800, COLORS.primary_800, COLORS.white, IconWrapper, COLORS.neutral_600, IconWrapper, COLORS.primary_700, IconWrapper, IconWrapper, COLORS.primary_800, IconWrapper, COLORS.neutral_300);
 var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var disabled = _ref.disabled,
     readOnly = _ref.readOnly,
@@ -199,37 +199,31 @@ var DatepickerField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         customInput: /*#__PURE__*/_jsx(InputWrapper, {
           disabled: disabled,
           readOnly: readOnly,
-          children: /*#__PURE__*/_jsx("div", {
-            style: {
-              display: 'block',
-              margin: '4px 0px'
-            },
-            children: /*#__PURE__*/_jsxs(DatepickerRow, {
-              children: [/*#__PURE__*/_jsx(StyledInputFieldStyling, _objectSpread({
-                ref: inputRef,
-                type: "text",
-                name: "datepicker",
-                onKeyDown: function onKeyDown(e) {
-                  return e.key === 'Enter' && datepickerRef.current.setOpen(true);
-                },
-                className: invalid ? 'invalid' : '' + (open ? ' open' : ''),
-                tabIndex: disabled || readOnly ? -1 : 0,
-                onFocus: function onFocus(e) {
-                  var _inputRef$current2;
-                  return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.setSelectionRange(0, 0);
-                },
-                autoComplete: autoComplete,
-                placeholder: placeholder,
-                disabled: disabled,
-                readOnly: true,
-                suppressReadOnlyStyles: !readOnly,
-                required: required
-              }, rest)), /*#__PURE__*/_jsx(IconWrapper, {
-                children: /*#__PURE__*/_jsx(Calendar, {
-                  size: "24"
-                })
-              })]
-            })
+          children: /*#__PURE__*/_jsxs(DatepickerRow, {
+            children: [/*#__PURE__*/_jsx(StyledInputFieldStyling, _objectSpread({
+              ref: inputRef,
+              type: "text",
+              name: "datepicker",
+              onKeyDown: function onKeyDown(e) {
+                return e.key === 'Enter' && datepickerRef.current.setOpen(true);
+              },
+              className: invalid ? 'invalid' : '' + (open ? ' open' : ''),
+              tabIndex: disabled || readOnly ? -1 : 0,
+              onFocus: function onFocus(e) {
+                var _inputRef$current2;
+                return (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.setSelectionRange(0, 0);
+              },
+              autoComplete: autoComplete,
+              placeholder: placeholder,
+              disabled: disabled,
+              readOnly: true,
+              suppressReadOnlyStyles: !readOnly,
+              required: required
+            }, rest)), /*#__PURE__*/_jsx(IconWrapper, {
+              children: /*#__PURE__*/_jsx(Calendar, {
+                size: "24"
+              })
+            })]
           })
         })
       })

package/dist/InputFields/DatepickerField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","extend","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","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","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","id","dataTestId","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\n\ndayjs.extend(advancedFormat);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  right: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n  color: ${COLORS.neutral_600};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n\n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &:disabled ~ ${IconWrapper}, &:read-only ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer data-testId={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n          id={id}\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <div style={{display: 'block', margin: '4px 0px'}}>\n                <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n              </div>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}
+{"version":3,"file":"DatepickerField.js","names":["React","styled","DatePicker","en","dayjs","advancedFormat","extend","COLORS","Calendar","TechnicalWarning","DatepickerFieldHeader","ComponentTextStyle","focusStyles","scrollBarStyling","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","DatepickerField","forwardRef","ref","disabled","readOnly","onChange","invalid","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","onBlur","id","dataTestId","rest","inputRef","datepickerRef","useRef","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","open","setOpen","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","useImperativeHandle","handleCalendarClose","blur","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","handleKeyDown","e","key","handleBlur","currentTarget","contains","relatedTarget","newDate","setMonth","undefined","params","createElement","customHeaderCount","setSelectionRange","critical_400"],"sources":["../../src/InputFields/DatepickerField.tsx"],"sourcesContent":["/**\n * Import react libraries.\n */\nimport React from 'react';\n\n/**\n * Import third-party libraries.\n */\nimport styled from 'styled-components';\nimport DatePicker, { ReactDatePickerCustomHeaderProps } from 'react-datepicker';\nimport en from 'date-fns/locale/en-GB';\nimport dayjs from 'dayjs';\nimport advancedFormat  from 'dayjs/plugin/advancedFormat';\n\ndayjs.extend(advancedFormat);\n\n/**\n * Import custom components.\n */\nimport COLORS from '../styles/colors';\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\nimport {ComponentTextStyle, focusStyles, scrollBarStyling} from '../styles';\n\n/**\n * Import custom styles.\n */\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\nimport 'react-datepicker/dist/react-datepicker.css';\nimport {ComponentMStyling, ComponentSStyling} from '../styles';\nimport {Z_INDEXES} from '../styles';\nimport {useFocusVisibleRef} from '../common';\nimport {Size, Testable} from '../types';\n\n/**\n * Add custom types.\n */\ntype DatepickerFieldProps = Testable & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'size' | 'onBlur'> & {\n  value?: Date;\n  onChange?: (date: Date) => void;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n\n  invalid?: boolean;\n  dateFormat?: string;\n  validationMessage?: string;\n  autoComplete?: string;\n  placeholder?: string;\n  yearPicker?: boolean;\n  yearsBeforeCurrentDate?: number;\n  yearsAfterCurrentDate?: number;\n  margin?: string;\n};\n\n/**\n * Add custom styles.\n */\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\n  .react-datepicker-popper {\n    z-index: ${Z_INDEXES.dropdown};\n  }\n\n  > div {\n    display: block;\n\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\n    .react-datepicker {\n      box-sizing: border-box;\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\n      border: 1px solid #e5e5e5;\n    }\n    .react-datepicker__input-container{\n      z-index: 0;\n    }\n\n    .react-datepicker__navigation {\n      line-height: normal;\n      text-indent: inherit;\n      border: none;\n      border-radius: 4px;\n      height: 32px;\n      width: 32px;\n      outline: none;\n      margin: 0px;\n      color: transparent;\n\n      &:hover {\n        background: ${COLORS.primary_20};\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &:focus {\n        ${focusStyles}\n        &.react-datepicker__navigation--next::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n\n        &.react-datepicker__navigation--previous::before {\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\n        }\n      }\n\n      &::before {\n        text-align: center;\n        display: inline-block;\n        content: '';\n        height: 32px;\n        width: 32px;\n        vertical-align: middle;\n      }\n\n      &.react-datepicker__navigation--next::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n\n      &.react-datepicker__navigation--previous::before {\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\n      }\n    }\n\n    .react-datepicker__month-container,\n    .react-datepicker__year--container {\n      width: 336px;\n    }\n\n    .react-datepicker__month {\n      margin: 0px;\n    }\n\n    .react-datepicker__triangle {\n      left: 50% !important;\n      display: none;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] {\n      margin-top: 0;\n    }\n\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\n      border-bottom-color: ${COLORS.neutral_20};\n    }\n\n    .react-datepicker__header {\n      border-bottom: 1px solid ${COLORS.neutral_200};\n      background: ${COLORS.neutral_20};\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\n      padding-top: 0px;\n    }\n\n    .react-datepicker__current-month {\n      height: 48px;\n      display: inline-flex;\n      align-items: center;\n      margin-right: 5px;\n\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year {\n      max-height: 300px;\n      overflow-y: scroll;\n\n      ${scrollBarStyling(Size.Small)}\n    }\n\n    .react-datepicker__year-wrapper {\n      max-width: 100%;\n      justify-content: space-around;\n    }\n\n    .react-datepicker__day-name {\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 48px;\n      margin: 0px;\n      width: 48px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n    }\n\n    .react-datepicker__year-text {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      margin-top: 20px;\n      padding-top: 10px;\n      padding-bottom: 10px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__year-text--disabled {\n        display: none;\n      }\n\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__year-text--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n    }\n\n    .react-datepicker__day {\n      background: ${COLORS.white};\n      border: none;\n      display: inline-flex;\n      justify-content: center;\n      align-items: center;\n      height: 40px;\n      width: 40px;\n      margin: 4px;\n\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\n      &.react-datepicker__day--keyboard-selected {\n        color: ${COLORS.neutral_600};\n        background: ${COLORS.white};\n        font-weight: 400;\n        border: none;\n      }\n\n      &:hover {\n        color: ${COLORS.primary_700};\n        background: ${COLORS.primary_20};\n      }\n\n      &:focus {\n        ${focusStyles}\n      }\n\n      &.react-datepicker__day--selected {\n        color: ${COLORS.white} !important;\n        background: ${COLORS.primary_500} !important;\n      }\n\n      &.react-datepicker__day--today {\n        border-radius: 0.3rem;\n        color: ${COLORS.neutral_700};\n        background: ${COLORS.neutral_100};\n\n        &:hover {\n          color: ${COLORS.primary_700};\n          background: ${COLORS.primary_20};\n        }\n\n        &:focus {\n          ${focusStyles}\n        }\n      }\n    }\n  }\n`;\n\nconst IconWrapper = styled.div`\n  pointer-events: none;\n  position: absolute;\n  left: 16px;\n  width: 24px;\n  height: 24px;\n  z-index: ${+Z_INDEXES.focus + 1};\n`;\n\nconst DatepickerRow = styled.div`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\n  padding-left: 48px !important;\n  \n  &::placeholder {\n    color: ${COLORS.neutral_500};\n  }\n\n  &:focus:not(.focus-visible) {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n  }\n\n  &:hover {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\n\n    ::placeholder {\n      color: ${COLORS.primary_700};\n    }\n\n    cursor: pointer;\n    background-color: ${COLORS.primary_20};\n    color: ${COLORS.primary_700};\n  }\n\n  &:active,\n  &.open {\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\n    background-color: ${COLORS.primary_100};\n    color: ${COLORS.primary_800};\n\n    ::placeholder {\n      color: ${COLORS.primary_800};\n    }\n  }\n  \n  &:disabled {\n    background-color: ${COLORS.white};\n  }\n\n  & ~ ${IconWrapper}{\n    color: ${COLORS.neutral_600};\n  }\n\n  &:hover ~ ${IconWrapper} {\n    color: ${COLORS.primary_700};\n  }\n\n  &:active ~ ${IconWrapper}, &.open ~ ${IconWrapper} {\n    color: ${COLORS.primary_800};\n  }\n\n  &[tabindex='-1'] ~ ${IconWrapper} {\n    color: ${COLORS.neutral_300};\n  }\n`;\n\nconst DatepickerField = React.forwardRef(({\n                                            disabled,\n                                            readOnly,\n                                            onChange,\n                                            invalid,\n                                            value,\n                                            validationMessage,\n                                            dateFormat,\n                                            autoComplete,\n                                            placeholder,\n                                            required,\n                                            yearPicker,\n                                            yearsBeforeCurrentDate,\n                                            yearsAfterCurrentDate,\n                                            margin,\n                                            onBlur,\n                                            id,\n                                            dataTestId,\n                                            ...rest\n                                          }: DatepickerFieldProps, ref) => {\n  // Globally used variables within the component\n  const inputRef = useFocusVisibleRef();\n  const datepickerRef = React.useRef<any>(null);\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\n  // 'open' flag is used only for tracking current state of the dropdown,\n  // for explicitly opening/closing the picker we are using 'datepickerRef.current.setOpen'\n  const [open, setOpen] = React.useState<boolean>(false);\n\n  /**\n   * Format the date in a specific way.\n   */\n  React.useEffect(() => {\n    if (value) inputRef.current.value = dayjs(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\n  }, [value]);\n\n  React.useEffect(() => {\n    if (yearPickerMode) {\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\n      //we have to touch DOM directly\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\n    }\n  }, [yearPickerMode]);\n\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\n  //otherwise after year selection datepicker will show January month of the selected year\n  React.useEffect(() => {\n    if (openAt) {\n      datepickerRef.current.setOpen(true);\n      //setOpenAt(null);\n    }\n  }, [openAt]);\n\n  React.useImperativeHandle(ref, () => inputRef.current, [inputRef]);\n\n  const handleCalendarClose = () => {\n    inputRef.current?.blur();\n    setOpen(false);\n  };\n\n  const handleCalendarOpen = () => {\n    if (openAt) setOpenAt(null);\n    setOpen(true);\n  };\n\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\n\n  //itemsNumber - controls number of year select options generated in the dropdown\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n    if (e.key === 'Escape' || e.key === 'Esc')\n      datepickerRef.current.setOpen(false);\n  };\n\n  const handleBlur = (e: React.FocusEvent<HTMLDivElement>) => {\n    // @ts-ignore\n    if (!e.currentTarget.contains(e.relatedTarget)) {\n      onBlur && onBlur(e);\n    }\n  };\n\n  return (\n    <>\n      {/* Let's render the input itself */}\n      <DatePickerContainer data-testId={dataTestId} yearPicker={yearPickerMode} margin={margin || ''} onBlur={handleBlur}>\n        <DatePicker\n          ref={datepickerRef}\n          onCalendarOpen={handleCalendarOpen}\n          onCalendarClose={handleCalendarClose}\n          onKeyDown={handleKeyDown}\n          id={id}\n          onClickOutside={() => datepickerRef.current.setOpen(false)}\n\n          onChange={(e: any) => {\n            if (onChange) {\n              if (yearPickerMode) {\n                const newDate = new Date();\n                newDate.setFullYear(e.getFullYear());\n                newDate.setMonth(activeMonthPage);\n                setOpenAt(newDate);\n              } else onChange(e);\n            }\n            if (yearPickerMode) setYearPickerMode(false);\n          }}\n          disabled={disabled || readOnly}\n          locale={en}\n          showYearPicker={yearPickerMode}\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\n          maxDate={yearPickerMode ? maxDate : undefined}\n          selected={value}\n          openToDate={openAt ?? undefined}\n          preventOpenOnFocus={true}\n          shouldCloseOnSelect={true}\n          renderCustomHeader={\n            yearPicker\n              ? (params: ReactDatePickerCustomHeaderProps) =>\n                React.createElement(\n                  DatepickerFieldHeader,\n                  {\n                    ...params,\n                    setActiveMonthPage,\n                    customHeaderCount: 0,\n                    yearPickerMode: yearPickerMode,\n                    setYearPickerMode: setYearPickerMode,\n                  },\n                  null,\n                )\n              : undefined\n          }\n          customInput={\n            <InputWrapper disabled={disabled} readOnly={readOnly}>\n              <DatepickerRow>\n                  <StyledInputFieldStyling\n                    ref={inputRef}\n                    type=\"text\"\n                    name=\"datepicker\"\n                    onKeyDown={(e) => e.key === 'Enter' && datepickerRef.current.setOpen(true)}\n                    className={(invalid ? 'invalid' : '' + (open ? ' open' : ''))}\n                    tabIndex={disabled || readOnly ? -1 : 0}\n                    onFocus={(e) => inputRef.current?.setSelectionRange(0, 0)}\n                    autoComplete={autoComplete}\n                    placeholder={placeholder}\n                    disabled={disabled}\n                    readOnly={true}\n                    suppressReadOnlyStyles={!readOnly}\n                    required={required}\n                    {...rest}\n                  />\n                  <IconWrapper>\n                    <Calendar size=\"24\"/>\n                  </IconWrapper>\n                </DatepickerRow>\n            </InputWrapper>\n          }\n        />\n      </DatePickerContainer>\n\n      {/* If there is an error, let's render the error */}\n      {validationMessage && (\n        <ErrorMessage>\n          <TechnicalWarning color={COLORS.critical_400}/>\n          <span>{validationMessage}</span>\n        </ErrorMessage>\n      )}\n    </>\n  );\n});\n\nexport default DatepickerField;\n"],"mappings":"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"}

package/dist/InputFields/Label.cjs

@@ -20,14 +20,10 @@ var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // Add component-specific styles.
-var Label = _styledComponents.default.label(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n  flex: 1;\n"])), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), _styles.BREAKPOINTS.MEDIUM, (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXXSStyling)(1, _styles.COLORS.neutral_500), (0, _typography.ComponentXSStyling)(1, _styles.COLORS.neutral_500));
-var LabelRow = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ", "\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-});
-var CopyContainer = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n\n  &:visited:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n    }\n  }\n\n  &:hover:not(.disabled),\n  &.hover-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      text-decoration-line: underline;\n    }\n  }\n\n  &:focus:not(.disabled),\n  &.focus-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:active:not(.disabled),\n  &.active-state:not(.disabled) {\n    ", "\n    {\n      color: ", ";\n      background-color: white;\n      text-decoration-line: underline;\n    }\n  }\n\n  &:not(.disabled)\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n\n  &.disabled\n  {\n    ", "\n    {\n      outline: none;\n      padding: 2px 0;\n      text-decoration-style: solid;\n      text-decoration-line: none;\n      font-weight: 700;\n      color: ", ";\n    }\n  }\n  cursor: pointer;\n"])), _typography.TypographyBase, _styles.COLORS.primary_800, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_700, _typography.TypographyBase, _styles.COLORS.primary_600, _typography.TypographyBase, _styles.COLORS.neutral_300);
-var LabelRowInner = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  gap: ", ";\n  align-items: center;\n"])), function (props) {
-  return props.size === _types.Size.Small ? '2px' : '4px';
-});
+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;
@@ -91,16 +87,16 @@ var InputLabel = function InputLabel(_ref) {
     margin: margin,
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(LabelRowInner, {
       size: size,
-      children: [required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Asterisk, {
-        size: "16px",
-        color: _styles.COLORS.critical_500
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Label, {
         htmlFor: inputId,
         onClick: function onClick() {
           return onTriggerClick(inputId);
         },
         className: size || '',
         children: text
+      }), required && /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.Asterisk, {
+        size: "16px",
+        color: _styles.COLORS.critical_500
       }), showCopyButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(CopyContainer, {
         className: copyState != CopyState.Available ? "disabled" : "",
         onClick: copyInputClick,

package/dist/InputFields/Label.cjs.map

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

package/dist/InputFields/Label.js

@@ -22,14 +22,10 @@ import { SystemIcons } from '../icons';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 // Add component-specific styles.
-var Label = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n  flex: 1;\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
-var LabelRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  ", "\n"])), function (props) {
-  return props.margin ? "margin: ".concat(props.margin, ";") : '';
-});
-var CopyContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), TypographyBase, COLORS.primary_800, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_600, TypographyBase, COLORS.neutral_300);
-var LabelRowInner = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  gap: ", ";\n  align-items: center;\n"])), function (props) {
-  return props.size === Size.Small ? '2px' : '4px';
-});
+var Label = styled.label(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n\n  ", " {\n    ", "\n  }\n\n  &.small {\n    ", "\n  }\n  &.medium {\n    ", "\n  }\n\n  pointer-events: none;\n"])), ComponentXXSStyling(1, COLORS.neutral_500), BREAKPOINTS.MEDIUM, ComponentXSStyling(1, COLORS.neutral_500), ComponentXXSStyling(1, COLORS.neutral_500), ComponentXSStyling(1, COLORS.neutral_500));
+var LabelRow = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: flex-start;\n  height: 16px;\n  margin-bottom: 4px;\n"])));
+var CopyContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\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"])), TypographyBase, COLORS.primary_800, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_700, TypographyBase, COLORS.primary_600, TypographyBase, COLORS.neutral_300);
+var LabelRowInner = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: row;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n"])));
 
 // Add component-specific types
 var CopyState;
@@ -93,16 +89,16 @@ var InputLabel = function InputLabel(_ref) {
     margin: margin,
     children: /*#__PURE__*/_jsxs(LabelRowInner, {
       size: size,
-      children: [required && /*#__PURE__*/_jsx(SystemIcons.Asterisk, {
-        size: "16px",
-        color: COLORS.critical_500
-      }), /*#__PURE__*/_jsx(Label, {
+      children: [/*#__PURE__*/_jsx(Label, {
         htmlFor: inputId,
         onClick: function onClick() {
           return onTriggerClick(inputId);
         },
         className: size || '',
         children: text
+      }), required && /*#__PURE__*/_jsx(SystemIcons.Asterisk, {
+        size: "16px",
+        color: COLORS.critical_500
       }), showCopyButton && /*#__PURE__*/_jsx(CopyContainer, {
         className: copyState != CopyState.Available ? "disabled" : "",
         onClick: copyInputClick,

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