@laerdal/life-react-components 3.4.3 → 3.5.0

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/DatepickerField.tsx"],"names":["React","styled","css","DatePicker","en","moment","COLORS","Calendar","TechnicalWarning","IconButton","DatepickerFieldHeader","ComponentTextStyle","scrollBarStyling","ErrorMessage","InputFieldStyling","InputWrapper","ComponentMStyling","ComponentSStyling","Z_INDEXES","DatePickerContainer","div","dropdown","props","margin","primary_20","primary_100","focus_25","focus","neutral_20","neutral_200","yearPicker","Bold","neutral_600","Regular","white","primary_700","primary_800","primary_500","neutral_700","neutral_100","DatepickerRow","disabled","locked","primary_600","StyledInputFieldStyling","primary_200","primary_300","neutral_300","DatepickerField","id","onChange","hasError","value","validationMessage","dateFormat","autoComplete","placeholder","required","yearsBeforeCurrentDate","yearsAfterCurrentDate","inputRef","useRef","datepickerRef","tabbedHere","setTabbedHere","useState","activeMonthPage","setActiveMonthPage","yearPickerMode","setYearPickerMode","openAt","setOpenAt","supressFocusRef","useEffect","current","format","selectedDate","document","getElementsByClassName","dropdownParent","parentElement","scrollTop","offsetTop","offsetHeight","setOpen","handleCalendarOpen","maxDate","Date","setFullYear","getFullYear","minDate","itemsNumber","Math","round","e","newDate","setMonth","undefined","params","createElement","customHeaderCount","display","critical_400"],"mappings":";;;;;;;;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,IAAgBC,GAAhB,QAA0B,mBAA1B;AACA,OAAOC,UAAP,MAAuB,kBAAvB;AACA,OAAOC,EAAP,MAAe,uBAAf;AACA,OAAOC,MAAP,MAAmB,QAAnB;AAEA;AACA;AACA;;AACA,OAAOC,MAAP,MAAmB,kBAAnB;AACA,SAAQC,QAAR,EAAkBC,gBAAlB,QAAyC,kCAAzC;AACA,SAAQC,UAAR,QAAyB,iBAAzB;AACA,SAAQC,qBAAR,QAAiE,yBAAjE;AACA,SAAQC,kBAAR,EAA4BC,gBAA5B,QAAmD,WAAnD;AAEA;AACA;AACA;;AACA,SAAQC,YAAR,EAAsBC,iBAAtB,EAAyCC,YAAzC,QAA4D,WAA5D;AACA,OAAO,4CAAP;AACA,SAAQC,iBAAR,EAA2BC,iBAA3B,QAAmD,sBAAnD;AACA,SAAQC,SAAR,QAAwB,qBAAxB;AAEA;AACA;AACA;;AAmBA;AACA;AACA;AACA,MAAMC,mBAAmB,GAAGlB,MAAM,CAACmB,GAA6C;AAChF;AACA;AACA,eAAeF,SAAS,CAACG,QAAS;AAClC;AACA;AACA;AACA;AACA,MAAOC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBjB,MAAM,CAACkB,UAAW;AACxC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAsBlB,MAAM,CAACmB,WAAY;AACzC,mCAAmCnB,MAAM,CAACoB,QAAS,iBAAgBpB,MAAM,CAACqB,KAAM;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6BrB,MAAM,CAACsB,UAAW;AAC/C;AACA;AACA;AACA,iCAAiCtB,MAAM,CAACuB,WAAY;AACpD,oBAAoBvB,MAAM,CAACsB,UAAW;AACtC,gBAAiBN,KAAD,IAAY,CAACA,KAAK,CAACQ,UAAP,GAAoB,MAApB,GAA6B,MAAQ;AACjE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQb,iBAAiB,CAACN,kBAAkB,CAACoB,IAApB,EAA0BzB,MAAM,CAAC0B,WAAjC,CAA8C;AACvE;AACA;AACA;AACA;AACA;AACA;AACA,QAAQpB,gBAAiB;AACzB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQI,iBAAiB,CAACL,kBAAkB,CAACsB,OAApB,EAA6B3B,MAAM,CAAC0B,WAApC,CAAiD;AAC1E;AACA;AACA;AACA,oBAAoB1B,MAAM,CAAC4B,KAAM;AACjC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,QAAQlB,iBAAiB,CAACL,kBAAkB,CAACsB,OAApB,EAA6B3B,MAAM,CAAC0B,WAApC,CAAiD;AAC1E;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB1B,MAAM,CAAC0B,WAAY;AACpC,sBAAsB1B,MAAM,CAAC4B,KAAM;AACnC;AACA;AACA;AACA;AACA;AACA,iBAAiB5B,MAAM,CAAC6B,WAAY;AACpC,sBAAsB7B,MAAM,CAACkB,UAAW;AACxC;AACA;AACA;AACA,iBAAiBlB,MAAM,CAAC8B,WAAY;AACpC,sBAAsB9B,MAAM,CAACmB,WAAY;AACzC,mCAAmCnB,MAAM,CAACoB,QAAS,iBAAgBpB,MAAM,CAACqB,KAAM;AAChF;AACA;AACA;AACA;AACA,iBAAiBrB,MAAM,CAAC4B,KAAM;AAC9B,sBAAsB5B,MAAM,CAAC+B,WAAY;AACzC;AACA;AACA;AACA;AACA,oBAAoB/B,MAAM,CAAC4B,KAAM;AACjC;AA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","sourcesContent":["/**\r\n * Import react libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled, {css} from 'styled-components';\r\nimport DatePicker from 'react-datepicker';\r\nimport en from 'date-fns/locale/en-GB';\r\nimport moment from 'moment';\r\n\r\n/**\r\n * Import custom components.\r\n */\r\nimport COLORS from '../styles/colors';\r\nimport {Calendar, TechnicalWarning} from '../icons/systemicons/SystemIcons';\r\nimport {IconButton} from '../Button/index';\r\nimport {DatepickerFieldHeader, DatepickerFieldHeaderParams} from './DatepickerFieldHeader';\r\nimport {ComponentTextStyle, scrollBarStyling} from '../styles';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport {ErrorMessage, InputFieldStyling, InputWrapper} from './styling';\r\nimport 'react-datepicker/dist/react-datepicker.css';\r\nimport {ComponentMStyling, ComponentSStyling} from '../styles/typography';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\n/**\r\n * Add custom types.\r\n */\r\ntype DatepickerFieldProps = {\r\n  id: string;\r\n  disabled?: boolean;\r\n  locked?: boolean;\r\n  onChange?: (date: Date) => void;\r\n  hasError?: boolean;\r\n  value?: Date;\r\n  dateFormat?: string;\r\n  validationMessage?: string;\r\n  autoComplete?: string;\r\n  placeholder?: string;\r\n  required?: boolean;\r\n  yearPicker?: boolean;\r\n  yearsBeforeCurrentDate?: number;\r\n  yearsAfterCurrentDate?: number;\r\n  margin?: string;\r\n};\r\n\r\n/**\r\n * Add custom styles.\r\n */\r\nconst DatePickerContainer = styled.div<{ yearPicker: boolean; margin: string }>`\r\n  \r\n  .react-datepicker-popper{\r\n    z-index: ${Z_INDEXES.dropdown};  \r\n  }\r\n\r\n  > div {\r\n    display: block;\r\n    ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n\r\n    .react-datepicker {\r\n      box-sizing: border-box;\r\n      box-shadow: 0px 2px 4px rgb(0 0 0 / 15%);\r\n      border: 1px solid #e5e5e5;\r\n    }\r\n\r\n    .react-datepicker__navigation {\r\n      line-height: normal;\r\n      text-indent: inherit;\r\n      border: none;\r\n      border-radius: 4px;\r\n      height: 32px;\r\n      width: 32px;\r\n      outline: none;\r\n      margin: 0px;\r\n      color: transparent;\r\n\r\n      &:hover {\r\n        background: ${COLORS.primary_20};\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--next::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23215369' /%3E%3C/svg%3E\");\r\n        }\r\n      }\r\n\r\n      &:focus {\r\n        background: ${COLORS.primary_100};\r\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n\r\n        &.react-datepicker__navigation--next::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n        }\r\n\r\n        &.react-datepicker__navigation--previous::before {\r\n          background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23163746' /%3E%3C/svg%3E\");\r\n        }\r\n      }\r\n\r\n      &::before {\r\n        text-align: center;\r\n        display: inline-block;\r\n        content: '';\r\n        height: 32px;\r\n        width: 32px;\r\n        vertical-align: middle;\r\n      }\r\n\r\n      &.react-datepicker__navigation--next::before {\r\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M9.24214 19.8807C8.85113 19.4907 8.85034 18.8575 9.24038 18.4665L15.5184 12.1727L9.24037 5.87895C8.85034 5.48794 8.85113 4.85478 9.24214 4.46474C9.63315 4.0747 10.2663 4.07549 10.6564 4.46651L17.6389 11.4665C18.0282 11.8568 18.0282 12.4886 17.6389 12.879L10.6564 19.879C10.2663 20.27 9.63316 20.2708 9.24214 19.8807Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n      }\r\n\r\n      &.react-datepicker__navigation--previous::before {\r\n        background-image: url(\"data:image/svg+xml,%3Csvg style='width: 32px; height: 32px;' viewBox='0 0 25 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M15.1975 4.46474C15.5885 4.85478 15.5893 5.48794 15.1993 5.87895L8.92124 12.1727L15.1993 18.4665C15.5893 18.8575 15.5885 19.4907 15.1975 19.8807C14.8065 20.2708 14.1734 20.27 13.7833 19.879L6.8008 12.879C6.41145 12.4886 6.41145 11.8568 6.8008 11.4665L13.7833 4.46651C14.1734 4.0755 14.8065 4.0747 15.1975 4.46474Z' fill='%23666666' /%3E%3C/svg%3E\");\r\n      }\r\n    }\r\n\r\n    .react-datepicker__month-container,\r\n    .react-datepicker__year--container {\r\n      width: 336px;\r\n    }\r\n\r\n    .react-datepicker__month {\r\n      margin: 0px;\r\n    }\r\n\r\n    .react-datepicker__triangle {\r\n      left: 50% !important;\r\n      display: none;\r\n    }\r\n    .react-datepicker-popper[data-placement^='bottom'] {\r\n      margin-top: 0;\r\n    }\r\n\r\n    .react-datepicker-popper[data-placement^='bottom'] .react-datepicker__triangle {\r\n      border-bottom-color: ${COLORS.neutral_20};\r\n    }\r\n\r\n    .react-datepicker__header {\r\n      border-bottom: 1px solid ${COLORS.neutral_200};\r\n      background: ${COLORS.neutral_20};\r\n      height: ${(props) => (!props.yearPicker ? '96px' : '54px')};\r\n      padding-top: 0px;\r\n    }\r\n\r\n    .react-datepicker__current-month {\r\n      height: 48px;\r\n      display: inline-flex;\r\n      align-items: center;\r\n      margin-right: 5px;\r\n\r\n      ${ComponentSStyling(ComponentTextStyle.Bold, COLORS.neutral_600)}\r\n    }\r\n\r\n    .react-datepicker__year {\r\n      max-height: 300px;\r\n      overflow-y: scroll;\r\n\r\n      ${scrollBarStyling}\r\n    }\r\n\r\n    .react-datepicker__year-wrapper {\r\n      max-width: 100%;\r\n      justify-content: space-around;\r\n    }\r\n\r\n    .react-datepicker__day-name {\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      height: 48px;\r\n      margin: 0px;\r\n      width: 48px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n    }\r\n\r\n    .react-datepicker__year-text {\r\n      background: ${COLORS.white};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      margin-top: 20px;\r\n      padding-top: 10px;\r\n      padding-bottom: 10px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n\r\n      &.react-datepicker__year-text--disabled {\r\n        display: none;\r\n      }\r\n\r\n      &.react-datepicker__day--keyboard-selected {\r\n        color: ${COLORS.neutral_600};\r\n        background: ${COLORS.white};\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &:hover {\r\n        color: ${COLORS.primary_700};\r\n        background: ${COLORS.primary_20};\r\n      }\r\n\r\n      &:focus {\r\n        color: ${COLORS.primary_800};\r\n        background: ${COLORS.primary_100};\r\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n        outline: none;\r\n      }\r\n\r\n      &.react-datepicker__year-text--selected {\r\n        color: ${COLORS.white} !important;\r\n        background: ${COLORS.primary_500} !important;\r\n      }\r\n    }\r\n\r\n    .react-datepicker__day {\r\n      background: ${COLORS.white};\r\n      border: none;\r\n      display: inline-flex;\r\n      justify-content: center;\r\n      align-items: center;\r\n      height: 40px;\r\n      width: 40px;\r\n      margin: 4px;\r\n\r\n      ${ComponentMStyling(ComponentTextStyle.Regular, COLORS.neutral_600)}\r\n      &.react-datepicker__day--keyboard-selected {\r\n        color: ${COLORS.neutral_600};\r\n        background: ${COLORS.white};\r\n        font-weight: 400;\r\n        border: none;\r\n      }\r\n\r\n      &:hover {\r\n        color: ${COLORS.primary_700};\r\n        background: ${COLORS.primary_20};\r\n      }\r\n\r\n      &:focus {\r\n        color: ${COLORS.primary_800};\r\n        background: ${COLORS.primary_100};\r\n        box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n        outline: none;\r\n      }\r\n\r\n      &.react-datepicker__day--selected {\r\n        color: ${COLORS.white} !important;\r\n        background: ${COLORS.primary_500} !important;\r\n      }\r\n\r\n      &.react-datepicker__day--today {\r\n        border-radius: 0.3rem;\r\n        color: ${COLORS.neutral_700};\r\n        background: ${COLORS.neutral_100};\r\n\r\n        &:hover {\r\n          color: ${COLORS.primary_700};\r\n          background: ${COLORS.primary_20};\r\n        }\r\n\r\n        &:focus {\r\n          color: ${COLORS.primary_800};\r\n          background: ${COLORS.primary_100};\r\n          box-shadow: 0px 4px 12px ${COLORS.focus_25}, 0px 0px 8px ${COLORS.focus} !important;\r\n          outline: none;\r\n        }\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst DatepickerRow = styled.div<{ disabled?: boolean; locked?: boolean }>`\r\n  display: flex;\r\n  flex-direction: row;\r\n  position: relative;\r\n\r\n  > button {\r\n    position: absolute;\r\n    right: 4px;\r\n    top: 4px;\r\n\r\n    svg {\r\n    }\r\n  }\r\n\r\n  ${(props) =>\r\n    props?.disabled || props?.locked\r\n      ? ''\r\n      : css`\r\n          &:hover {\r\n            svg,\r\n            svg path {\r\n              fill: ${COLORS.primary_600} !important;\r\n            }\r\n          }\r\n        `}\r\n  &:focus-within {\r\n    -webkit-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n    -moz-box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_800};\r\n  }\r\n`;\r\n\r\nconst StyledInputFieldStyling = styled(InputFieldStyling)`\r\n  &:hover {\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_200};\r\n    ::placeholder {\r\n      color: ${COLORS.primary_600};\r\n    }\r\n    cursor: pointer;\r\n    background-color: ${COLORS.primary_20};\r\n    color: ${COLORS.primary_600};\r\n  }\r\n  &:active {\r\n    background-color: ${COLORS.primary_100};\r\n    color: ${COLORS.primary_800};\r\n    box-shadow: inset 0px 0px 0px 2px ${COLORS.primary_300};\r\n    ::placeholder {\r\n      color: ${COLORS.primary_800};\r\n    }\r\n  }\r\n  &:disabled {\r\n    box-shadow: none;\r\n    background-color: ${COLORS.white};\r\n    span {\r\n      color: ${COLORS.neutral_300};\r\n    }\r\n    &::after {\r\n      background-color: ${COLORS.white};\r\n    }\r\n  }\r\n`;\r\n\r\nconst DatepickerField = ({\r\n  id,\r\n  disabled,\r\n  locked,\r\n  onChange,\r\n  hasError,\r\n  value,\r\n  validationMessage,\r\n  dateFormat,\r\n  autoComplete,\r\n  placeholder,\r\n  required,\r\n  yearPicker,\r\n  yearsBeforeCurrentDate,\r\n  yearsAfterCurrentDate,\r\n  margin,\r\n}: DatepickerFieldProps) => {\r\n  // Globally used variables within the component\r\n  const inputRef = React.useRef<any>(null);\r\n  const datepickerRef = React.useRef<any>(null);\r\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\r\n  const [activeMonthPage, setActiveMonthPage] = React.useState<number>(-1);\r\n  const [yearPickerMode, setYearPickerMode] = React.useState<boolean>(false);\r\n  const [openAt, setOpenAt] = React.useState<Date | null>(null);\r\n  const supressFocusRef = React.useRef<any>(null);\r\n\r\n  /**\r\n   * Format the date in a specific way.\r\n   */\r\n  React.useEffect(() => {\r\n    if (value) inputRef.current.value = moment(value).format(dateFormat ? dateFormat : 'MMMM Do, YYYY');\r\n  }, [value]);\r\n\r\n  React.useEffect(() => {\r\n    if (yearPickerMode) {\r\n      //unfortunately, since there are no refs, and year pickers is rendered not by our code, but by 'react-datepicker'\r\n      //we have to touch DOM directly\r\n      const selectedDate = document.getElementsByClassName('react-datepicker__year-text--selected')[0] as HTMLElement;\r\n      const dropdownParent = selectedDate?.parentElement?.parentElement;\r\n      if (selectedDate && dropdownParent) dropdownParent.scrollTop = selectedDate.offsetTop - 2 * selectedDate.offsetHeight;\r\n    }\r\n  }, [yearPickerMode]);\r\n\r\n  //we have to manually reopen the calendar when needed, to guarantee that datepicker will show selected date after year selection\r\n  //otherwise after year selection datepicker will show January month of the selected year\r\n  React.useEffect(() => {\r\n    if (openAt) {\r\n      datepickerRef.current.setOpen(true);\r\n      //setOpenAt(null);\r\n    }\r\n  }, [openAt]);\r\n\r\n  const handleCalendarOpen = () => {\r\n    if (openAt) setOpenAt(null);\r\n  };\r\n\r\n  let maxDate = new Date(value && new Date(value) > new Date() ? new Date(value) : new Date());\r\n  maxDate.setFullYear(maxDate.getFullYear() + (yearsAfterCurrentDate ?? 50));\r\n\r\n  //itemsNumber - controls number of year select options generated in the dropdown\r\n  //items related to dates higher than 'maxDate' will be hidden, thus to avoid creating hundreds of invisible divs, we divide by 5\r\n  let minDate = new Date(value && new Date(value) < new Date() ? new Date(value) : new Date());\r\n  const itemsNumber = Math.round((minDate.getFullYear() - (yearsBeforeCurrentDate ?? 15)) / 5);\r\n\r\n  return (\r\n    <>\r\n      {/* Let's render the input itself */}\r\n      <DatePickerContainer yearPicker={yearPickerMode} margin={margin || ''}>\r\n        <DatePicker\r\n          ref={datepickerRef}\r\n          onCalendarOpen={handleCalendarOpen}\r\n          onChange={(e: any) => {\r\n            if (onChange) {\r\n              if (yearPickerMode) {\r\n                const newDate = new Date();\r\n                newDate.setFullYear(e.getFullYear());\r\n                newDate.setMonth(activeMonthPage);\r\n                setOpenAt(newDate);\r\n              } else onChange(e);\r\n            }\r\n            if (yearPickerMode) setYearPickerMode(false);\r\n          }}\r\n          disabled={disabled || locked}\r\n          locale={en}\r\n          showYearPicker={yearPickerMode}\r\n          //we manipulate 'yearItemNumber' and 'maxDate' to guarantee number of year select options shown before and after selected year\r\n          yearItemNumber={yearPickerMode ? itemsNumber : undefined}\r\n          maxDate={yearPickerMode ? maxDate : undefined}\r\n          selected={value}\r\n          openToDate={openAt ?? undefined}\r\n          shouldCloseOnSelect={true}\r\n          renderCustomHeader={\r\n            yearPicker\r\n              ? (params: DatepickerFieldHeaderParams) =>\r\n                  React.createElement(\r\n                    DatepickerFieldHeader,\r\n                    { ...params, setActiveMonthPage, customHeaderCount: 0, yearPickerMode: yearPickerMode, setYearPickerMode: setYearPickerMode },\r\n                    null,\r\n                  )\r\n              : undefined\r\n          }\r\n          customInput={\r\n            <InputWrapper disabled={disabled} locked={locked} tabIndex={disabled ? -1 : 0}>\r\n              <div style={{ display: 'block' }}>\r\n                <DatepickerRow locked={locked} disabled={disabled}>\r\n                  <StyledInputFieldStyling\r\n                    id={id}\r\n                    ref={inputRef}\r\n                    type=\"text\"\r\n                    name=\"datepicker\"\r\n                    readOnly={true}\r\n                    className={hasError ? 'error' : ''}\r\n                    tabIndex={0}\r\n                    autoComplete={autoComplete}\r\n                    placeholder={placeholder}\r\n                    disabled={disabled}\r\n                    locked={locked}\r\n                    required={required}\r\n                    tabbedHere={tabbedHere}\r\n                    onBlur={() => setTabbedHere(false)}\r\n                    onMouseDown={(e: any) => {\r\n                      if (!(locked || disabled) && !tabbedHere) supressFocusRef.current = true;\r\n                    }}\r\n                    onFocus={(e: any) => {\r\n                      if (!(locked || disabled)) {\r\n                        if (!supressFocusRef.current) setTabbedHere(true);\r\n                        else supressFocusRef.current = false;\r\n                      }\r\n                    }}\r\n                  />\r\n                  <IconButton variant=\"secondary\" shape=\"square\" tabIndex={-1} action={() => {}} disabled={disabled || locked}>\r\n                    <Calendar size=\"24\" />\r\n                  </IconButton>\r\n                </DatepickerRow>\r\n              </div>\r\n            </InputWrapper>\r\n          }\r\n        />\r\n      </DatePickerContainer>\r\n\r\n      {/* If there is an error, let's render the error */}\r\n      {validationMessage && (\r\n        <ErrorMessage>\r\n          <TechnicalWarning size=\"20px\" color={COLORS.critical_400} />\r\n          <span>{validationMessage}</span>\r\n        </ErrorMessage>\r\n      )}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default DatepickerField;\r\n"],"file":"DatepickerField.js"}

package/dist/esm/InputFields/DatepickerFieldHeader.js

@@ -0,0 +1,109 @@
+import _pt from "prop-types";
+
+/**
+ * Import react libraries.
+ */
+import * as React from 'react';
+import { ArrowDropUp, ArrowDropDown } from '../icons/systemicons/SystemIcons';
+import styled from 'styled-components';
+import { CommonInteractionStyling } from '../common';
+import { COLORS } from '../styles';
+const HeaderLabelContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding-left: 10px;
+  cursor: pointer;
+
+  button {
+    background: transparent;
+    padding: 0px;
+    width: auto;
+  }
+
+  svg {
+    color: ${COLORS.neutral_600};
+  }
+
+  ${CommonInteractionStyling}
+
+  &:hover {
+    div {
+      color: ${COLORS.primary_600} !important;
+    }
+    svg {
+      color: ${COLORS.primary_600};
+    }
+  }
+
+  &:active {
+    div {
+      color: ${COLORS.primary_600} !important;
+    }
+    svg {
+      color: ${COLORS.primary_600};
+    }
+  }
+`;
+export const DatepickerFieldHeader = ({
+  date,
+  decreaseMonth,
+  increaseMonth,
+  prevMonthButtonDisabled,
+  nextMonthButtonDisabled,
+  setYearPickerMode,
+  yearPickerMode,
+  setActiveMonthPage
+}) => {
+  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+  const handleDecreaseMonth = () => {
+    let previousMonth = date.getMonth() - 1;
+    if (previousMonth < 0) previousMonth = months.length - 1;
+    setActiveMonthPage(previousMonth);
+    decreaseMonth();
+  };
+
+  const handleIncreaseMonth = () => {
+    let nextMonth = date.getMonth() + 1;
+    if (nextMonth >= months.length - 1) nextMonth = 0;
+    setActiveMonthPage(nextMonth);
+    increaseMonth();
+  };
+
+  React.useEffect(() => {
+    setActiveMonthPage(date.getMonth());
+  }, [date]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      justifyContent: 'center'
+    }
+  }, !yearPickerMode && /*#__PURE__*/React.createElement("button", {
+    className: "react-datepicker__navigation react-datepicker__navigation--previous",
+    onClick: handleDecreaseMonth,
+    disabled: prevMonthButtonDisabled
+  }, "Prevoius month"), /*#__PURE__*/React.createElement(HeaderLabelContainer, {
+    onClick: () => setYearPickerMode(!yearPickerMode)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "react-datepicker__current-month"
+  }, `${months[date.getMonth()]} ${date.getFullYear()}`), yearPickerMode ? /*#__PURE__*/React.createElement(ArrowDropUp, {
+    size: "24px"
+  }) : /*#__PURE__*/React.createElement(ArrowDropDown, {
+    size: "24px"
+  })), !yearPickerMode && /*#__PURE__*/React.createElement("button", {
+    className: "react-datepicker__navigation react-datepicker__navigation--next",
+    onClick: handleIncreaseMonth,
+    disabled: nextMonthButtonDisabled
+  }, "Next month")));
+};
+DatepickerFieldHeader.propTypes = {
+  date: _pt.instanceOf(Date).isRequired,
+  customHeaderCount: _pt.number.isRequired,
+  prevMonthButtonDisabled: _pt.bool.isRequired,
+  nextMonthButtonDisabled: _pt.bool.isRequired,
+  prevYearButtonDisabled: _pt.bool.isRequired,
+  nextYearButtonDisabled: _pt.bool.isRequired,
+  yearPickerMode: _pt.bool.isRequired
+};
+//# sourceMappingURL=DatepickerFieldHeader.js.map

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

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

package/dist/esm/InputFields/Label.js

@@ -0,0 +1,83 @@
+import _pt from "prop-types";
+
+/**
+ * Import React libraries.
+ */
+import * as React from 'react';
+/**
+ * Import custom styles.
+ */
+
+import { BREAKPOINTS, COLORS } from '../styles';
+import { RequiredStar } from './styling';
+
+/**
+ * Import third-party libraries.
+ */
+import styled from 'styled-components';
+import { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography'; // Add component-specific styles.
+
+const Label = styled.label`
+  ${ComponentXXSStyling(1, COLORS.neutral_500)}
+
+  ${BREAKPOINTS.MEDIUM} {
+    ${ComponentXSStyling(1, COLORS.neutral_500)}
+  }
+
+  &.small {
+    ${ComponentXXSStyling(1, COLORS.neutral_500)}
+  }
+  &.medium {
+    ${ComponentXSStyling(1, COLORS.neutral_500)}
+  }
+`;
+const LabelRow = styled.div`
+  display: flex;
+  justify-content: space-between;
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+`; // Add component-specific types
+
+const InputLabel = ({
+  inputId,
+  text,
+  size,
+  margin
+}) => {
+  // Globally used variables within the component
+  const [required, setRequired] = React.useState(false);
+  /**
+   * Checks if field is set as required and we have to mark it accordingly.
+   */
+
+  React.useEffect(() => {
+    if (document.getElementById(inputId)?.getAttribute('required') === '') {
+      setRequired(true);
+    } else {
+      setRequired(false);
+    }
+  }, [document.getElementById(inputId)?.getAttribute('required')]);
+  /**
+   * Triggers a click element on a specific element.
+   * @param id - ID of the element which needs to be clicked.
+   */
+
+  const onTriggerClick = id => {
+    document.getElementById(id)?.click();
+  };
+
+  return /*#__PURE__*/React.createElement(LabelRow, {
+    margin: margin
+  }, /*#__PURE__*/React.createElement(Label, {
+    htmlFor: inputId,
+    onClick: () => onTriggerClick(inputId),
+    className: size || ''
+  }, text), required && /*#__PURE__*/React.createElement(RequiredStar, null, "*"));
+};
+
+InputLabel.propTypes = {
+  inputId: _pt.string.isRequired,
+  text: _pt.string.isRequired,
+  margin: _pt.string
+};
+export default InputLabel;
+//# sourceMappingURL=Label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/Label.tsx"],"names":["React","BREAKPOINTS","COLORS","RequiredStar","styled","ComponentXSStyling","ComponentXXSStyling","Label","label","neutral_500","MEDIUM","LabelRow","div","props","margin","InputLabel","inputId","text","size","required","setRequired","useState","useEffect","document","getElementById","getAttribute","onTriggerClick","id","click"],"mappings":";;AAAA;AACA;AACA;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AAEA;AACA;AACA;;AACA,SAASC,WAAT,EAAsBC,MAAtB,QAAoC,WAApC;AACA,SAASC,YAAT,QAA6B,WAA7B;;AAGA;AACA;AACA;AACA,OAAOC,MAAP,MAAmB,mBAAnB;AACA,SAASC,kBAAT,EAA6BC,mBAA7B,QAAwD,sBAAxD,C,CAEA;;AACA,MAAMC,KAAK,GAAGH,MAAM,CAACI,KAAM;AAC3B,IAAIF,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AAC/C;AACA,IAAIR,WAAW,CAACS,MAAO;AACvB,MAAML,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA;AACA;AACA,MAAMH,mBAAmB,CAAC,CAAD,EAAIJ,MAAM,CAACO,WAAX,CAAwB;AACjD;AACA;AACA,MAAMJ,kBAAkB,CAAC,CAAD,EAAIH,MAAM,CAACO,WAAX,CAAwB;AAChD;AACA,CAbA;AAeA,MAAME,QAAQ,GAAGP,MAAM,CAACQ,GAAyB;AACjD;AACA;AACA,IAAKC,KAAD,IAAYA,KAAK,CAACC,MAAN,GAAgB,WAAUD,KAAK,CAACC,MAAO,GAAvC,GAA4C,EAAI;AAChE,CAJA,C,CAMA;;AAQA,MAAMC,UAA+C,GAAG,CAAC;AAAEC,EAAAA,OAAF;AAAWC,EAAAA,IAAX;AAAiBC,EAAAA,IAAjB;AAAuBJ,EAAAA;AAAvB,CAAD,KAAiD;AACvG;AACA,QAAM,CAACK,QAAD,EAAWC,WAAX,IAA0BpB,KAAK,CAACqB,QAAN,CAAwB,KAAxB,CAAhC;AAEA;AACF;AACA;;AACErB,EAAAA,KAAK,CAACsB,SAAN,CAAgB,MAAM;AACpB,QAAIC,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,GAAkCS,YAAlC,CAA+C,UAA/C,MAA+D,EAAnE,EAAuE;AACrEL,MAAAA,WAAW,CAAC,IAAD,CAAX;AACD,KAFD,MAEO;AACLA,MAAAA,WAAW,CAAC,KAAD,CAAX;AACD;AACF,GAND,EAMG,CAACG,QAAQ,CAACC,cAAT,CAAwBR,OAAxB,GAAkCS,YAAlC,CAA+C,UAA/C,CAAD,CANH;AAOA;AACF;AACA;AACA;;AACE,QAAMC,cAAc,GAAIC,EAAD,IAAsB;AAC3CJ,IAAAA,QAAQ,CAACC,cAAT,CAAwBG,EAAxB,GAA6BC,KAA7B;AACD,GAFD;;AAIA,sBACE,oBAAC,QAAD;AAAU,IAAA,MAAM,EAAEd;AAAlB,kBACE,oBAAC,KAAD;AAAO,IAAA,OAAO,EAAEE,OAAhB;AAAyB,IAAA,OAAO,EAAE,MAAMU,cAAc,CAACV,OAAD,CAAtD;AAAiE,IAAA,SAAS,EAAEE,IAAI,IAAI;AAApF,KACGD,IADH,CADF,EAIGE,QAAQ,iBAAI,oBAAC,YAAD,YAJf,CADF;AAQD,CA9BD;;;AANEH,EAAAA,O;AACAC,EAAAA,I;AAEAH,EAAAA,M;;AAmCF,eAAeC,UAAf","sourcesContent":["/**\r\n * Import React libraries.\r\n */\r\nimport * as React from 'react';\r\n\r\n/**\r\n * Import custom styles.\r\n */\r\nimport { BREAKPOINTS, COLORS } from '../styles';\r\nimport { RequiredStar } from './styling';\r\nimport { Size } from '../types';\r\n\r\n/**\r\n * Import third-party libraries.\r\n */\r\nimport styled from 'styled-components';\r\nimport { ComponentXSStyling, ComponentXXSStyling } from '../styles/typography';\r\n\r\n// Add component-specific styles.\r\nconst Label = styled.label`\r\n  ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n\r\n  &.small {\r\n    ${ComponentXXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n  &.medium {\r\n    ${ComponentXSStyling(1, COLORS.neutral_500)}\r\n  }\r\n`;\r\n\r\nconst LabelRow = styled.div<{ margin?: string }>`\r\n  display: flex;\r\n  justify-content: space-between;\r\n  ${(props) => (props.margin ? `margin: ${props.margin};` : '')}\r\n`;\r\n\r\n// Add component-specific types\r\ntype LabelProps = {\r\n  inputId: string;\r\n  text: string;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n};\r\n\r\nconst InputLabel: React.FunctionComponent<LabelProps> = ({ inputId, text, size, margin }: LabelProps) => {\r\n  // Globally used variables within the component\r\n  const [required, setRequired] = React.useState<boolean>(false);\r\n\r\n  /**\r\n   * Checks if field is set as required and we have to mark it accordingly.\r\n   */\r\n  React.useEffect(() => {\r\n    if (document.getElementById(inputId)?.getAttribute('required') === '') {\r\n      setRequired(true);\r\n    } else {\r\n      setRequired(false);\r\n    }\r\n  }, [document.getElementById(inputId)?.getAttribute('required')]);\r\n  /**\r\n   * Triggers a click element on a specific element.\r\n   * @param id - ID of the element which needs to be clicked.\r\n   */\r\n  const onTriggerClick = (id: string): void => {\r\n    document.getElementById(id)?.click();\r\n  };\r\n\r\n  return (\r\n    <LabelRow margin={margin}>\r\n      <Label htmlFor={inputId} onClick={() => onTriggerClick(inputId)} className={size || ''}>\r\n        {text}\r\n      </Label>\r\n      {required && <RequiredStar>*</RequiredStar>}\r\n    </LabelRow>\r\n  );\r\n};\r\n\r\nexport default InputLabel;\r\n"],"file":"Label.js"}

package/dist/esm/InputFields/PasswordField.js

@@ -0,0 +1,151 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import { BREAKPOINTS } from '../styles';
+import { InputFieldStyling, InputWrapper } from './styling';
+const StyledPassSwitch = styled.div`
+  float: right;
+  margin-left: -40px;
+  margin-top: 8px;
+  position: relative;
+  z-index: 1;
+  height: 30px;
+  width: 30px;
+
+  ${BREAKPOINTS.MEDIUM} {
+    margin-top: 12px;
+  }
+
+  &.small {
+    margin-top: 8px;
+  }
+
+  &.medium {
+    margin-top: 12px;
+  }
+
+  svg {
+    cursor: pointer;
+  }
+  div {
+    &:focus {
+      outline: none;
+      svg {
+        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;
+        border-radius: 4px;
+      }
+    }
+  }
+`;
+const PasswordRow = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+
+const PasswordField = ({
+  id,
+  disabled,
+  locked,
+  onChange,
+  hasError,
+  value,
+  validationMessage,
+  autoComplete,
+  placeholder,
+  required,
+  readOnly,
+  size,
+  margin
+}) => {
+  const [passwordHidden, setPasswordHidden] = React.useState(true);
+  const inputRef = React.useRef(null);
+  const [tabbedHere, setTabbedHere] = React.useState(false);
+
+  const handleKeyDown = e => {
+    if (e.keyCode === 13) {
+      setPasswordHidden(!passwordHidden);
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputWrapper, {
+    disabled: disabled,
+    locked: locked,
+    margin: margin,
+    tabIndex: disabled ? -1 : 0,
+    onFocus: e => {
+      if (!e?.target?.id.includes(id) && !disabled && !locked) {
+        setTabbedHere(true);
+        inputRef.current.focus();
+      }
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'block'
+    }
+  }, /*#__PURE__*/React.createElement(PasswordRow, null, /*#__PURE__*/React.createElement(InputFieldStyling, {
+    id: id,
+    ref: inputRef,
+    type: passwordHidden ? 'password' : 'text',
+    name: "password",
+    value: value,
+    className: (hasError ? 'error' : '').concat(size ? size : ''),
+    tabIndex: -1,
+    autoComplete: autoComplete,
+    placeholder: placeholder,
+    disabled: disabled,
+    locked: locked,
+    required: required,
+    readOnly: readOnly,
+    onChange: e => onChange && onChange(e?.target?.value || ''),
+    tabbedHere: tabbedHere,
+    onBlur: () => setTabbedHere(false)
+  }), /*#__PURE__*/React.createElement(StyledPassSwitch, {
+    className: size ? size : ''
+  }, !disabled && !locked ? passwordHidden ? /*#__PURE__*/React.createElement("div", {
+    id: `${id}_Visible`,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    onClick: () => setPasswordHidden(!passwordHidden)
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 25 25",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z",
+    fill: "#666666"
+  }))) : /*#__PURE__*/React.createElement("div", {
+    id: `${id}_NotVisible`,
+    tabIndex: 0,
+    onKeyDown: handleKeyDown,
+    onClick: () => setPasswordHidden(!passwordHidden)
+  }, /*#__PURE__*/React.createElement("svg", {
+    viewBox: "0 0 25 25",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z",
+    fill: "#666666"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z",
+    fill: "#666666"
+  }))) : null)))), validationMessage && /*#__PURE__*/React.createElement("span", {
+    className: "error-msg"
+  }, validationMessage));
+};
+
+PasswordField.propTypes = {
+  id: _pt.string.isRequired,
+  disabled: _pt.bool,
+  locked: _pt.bool,
+  onChange: _pt.func,
+  hasError: _pt.bool,
+  value: _pt.string,
+  validationMessage: _pt.string,
+  autoComplete: _pt.string,
+  placeholder: _pt.string,
+  required: _pt.bool,
+  readOnly: _pt.bool,
+  margin: _pt.string
+};
+export default PasswordField;
+//# sourceMappingURL=PasswordField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/InputFields/PasswordField.tsx"],"names":["React","styled","BREAKPOINTS","InputFieldStyling","InputWrapper","StyledPassSwitch","div","MEDIUM","PasswordRow","PasswordField","id","disabled","locked","onChange","hasError","value","validationMessage","autoComplete","placeholder","required","readOnly","size","margin","passwordHidden","setPasswordHidden","useState","inputRef","useRef","tabbedHere","setTabbedHere","handleKeyDown","e","keyCode","target","includes","current","focus","display","concat"],"mappings":"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","sourcesContent":["import * as React from 'react';\r\nimport styled from 'styled-components';\r\nimport { BREAKPOINTS } from '../styles';\r\nimport { Size} from '../types';\r\nimport { InputFieldStyling, InputWrapper } from './styling';\r\nimport {Z_INDEXES} from '../styles/z-indexes';\r\n\r\ntype PasswordFieldProps = {\r\n  id: string;\r\n  disabled?: boolean;\r\n  locked?: boolean;\r\n  onChange?: (text: string) => void;\r\n  hasError?: boolean;\r\n  value?: string;\r\n  validationMessage?: string;\r\n  autoComplete?: string;\r\n  placeholder?: string;\r\n  required?: boolean;\r\n  readOnly?: boolean;\r\n  size?: Size.Small | Size.Medium;\r\n  margin?: string;\r\n};\r\n\r\nconst StyledPassSwitch = styled.div`\r\n  float: right;\r\n  margin-left: -40px;\r\n  margin-top: 8px;\r\n  position: relative;\r\n  z-index: 1;\r\n  height: 30px;\r\n  width: 30px;\r\n\r\n  ${BREAKPOINTS.MEDIUM} {\r\n    margin-top: 12px;\r\n  }\r\n\r\n  &.small {\r\n    margin-top: 8px;\r\n  }\r\n\r\n  &.medium {\r\n    margin-top: 12px;\r\n  }\r\n\r\n  svg {\r\n    cursor: pointer;\r\n  }\r\n  div {\r\n    &:focus {\r\n      outline: none;\r\n      svg {\r\n        box-shadow: 0px 4px 12px rgba(46, 127, 161, 0.25), 0px 0px 8px #2e7fa1;\r\n        border-radius: 4px;\r\n      }\r\n    }\r\n  }\r\n`;\r\n\r\nconst PasswordRow = styled.div`\r\n  display: flex;\r\n  flex-direction: row;\r\n`;\r\n\r\nconst PasswordField = ({ id, disabled, locked, onChange, hasError, value, validationMessage, autoComplete, placeholder, required, readOnly, size, margin }: PasswordFieldProps) => {\r\n  const [passwordHidden, setPasswordHidden] = React.useState<Boolean>(true);\r\n  const inputRef = React.useRef<any>(null);\r\n  const [tabbedHere, setTabbedHere] = React.useState<boolean>(false);\r\n\r\n  const handleKeyDown = (e: any) => {\r\n    if (e.keyCode === 13) {\r\n      setPasswordHidden(!passwordHidden);\r\n    }\r\n  };\r\n  return (\r\n    <>\r\n      <InputWrapper\r\n        disabled={disabled}\r\n        locked={locked}\r\n        margin={margin}\r\n        tabIndex={disabled ? -1 : 0}\r\n        onFocus={(e: any) => {\r\n          if (!e?.target?.id.includes(id) && !disabled && !locked) {\r\n            setTabbedHere(true);\r\n            inputRef.current.focus();\r\n          }\r\n        }}>\r\n        <div style={{ display: 'block' }}>\r\n          <PasswordRow>\r\n            <InputFieldStyling\r\n              id={id}\r\n              ref={inputRef}\r\n              type={passwordHidden ? 'password' : 'text'}\r\n              name=\"password\"\r\n              value={value}\r\n              className={(hasError ? 'error' : '').concat(size ? size : '')}\r\n              tabIndex={-1}\r\n              autoComplete={autoComplete}\r\n              placeholder={placeholder}\r\n              disabled={disabled}\r\n              locked={locked}\r\n              required={required}\r\n              readOnly={readOnly}\r\n              onChange={(e: any) => onChange && onChange(e?.target?.value || '')}\r\n              tabbedHere={tabbedHere}\r\n              onBlur={() => setTabbedHere(false)}\r\n            />\r\n            <StyledPassSwitch className={size ? size : ''}>\r\n              {!disabled && !locked ? (\r\n                passwordHidden ? (\r\n                  <div id={`${id}_Visible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\r\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <path\r\n                        d=\"M4.05966 12.5853L3.25603 11.7821C2.86542 11.3917 2.23234 11.3918 1.84186 11.7823C1.45115 12.173 1.45115 12.8065 1.84186 13.1972L2.6448 14.0001C2.8984 14.2537 3.1593 14.4956 3.42683 14.7256L1.84172 16.3107C1.4512 16.7013 1.4512 17.3344 1.84172 17.725C2.23225 18.1155 2.86541 18.1155 3.25593 17.725L5.0508 15.9301C5.73486 16.3644 6.44837 16.7336 7.18249 17.0377L6.28268 19.5236C6.09471 20.0429 6.36331 20.6163 6.88262 20.8043C7.40193 20.9922 7.9753 20.7236 8.16327 20.2043L9.08108 17.6687C9.89493 17.8758 10.7238 18.0088 11.5569 18.0675C11.5516 18.1092 11.5488 18.1517 11.5488 18.1948V20.4897C11.5488 21.042 11.9965 21.4897 12.5488 21.4897C13.1011 21.4897 13.5488 21.042 13.5488 20.4897V18.1948C13.5488 18.1517 13.5461 18.1092 13.5408 18.0675C14.3739 18.0088 15.2027 17.8758 16.0166 17.6687L16.9344 20.2043C17.1224 20.7236 17.6957 20.9922 18.215 20.8043C18.7343 20.6163 19.003 20.0429 18.815 19.5236L17.9152 17.0377C18.6462 16.7349 19.3568 16.3675 20.0382 15.9356L21.8276 17.725C22.2181 18.1155 22.8513 18.1155 23.2418 17.725C23.6323 17.3344 23.6323 16.7013 23.2418 16.3107L21.6632 14.7322C21.9334 14.5001 22.1969 14.2561 22.4529 14.0001L23.2558 13.1972C23.6465 12.8065 23.6465 12.173 23.2558 11.7823C22.8653 11.3918 22.2322 11.3917 21.8416 11.7821L21.038 12.5853C16.3496 17.2737 8.7481 17.2737 4.05966 12.5853Z\"\r\n                        fill=\"#666666\"></path>\r\n                    </svg>\r\n                  </div>\r\n                ) : (\r\n                  <div id={`${id}_NotVisible`} tabIndex={0} onKeyDown={handleKeyDown} onClick={() => setPasswordHidden(!passwordHidden)}>\r\n                    <svg viewBox=\"0 0 25 25\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                      <path\r\n                        d=\"M12.9618 15.4897C14.6186 15.4897 15.9618 14.1466 15.9618 12.4897C15.9618 10.8329 14.6186 9.48975 12.9618 9.48975C11.3049 9.48975 9.96179 10.8329 9.96179 12.4897C9.96179 14.1466 11.3049 15.4897 12.9618 15.4897Z\"\r\n                        fill=\"#666666\"\r\n                      />\r\n                      <path\r\n                        d=\"M2.87753 10.83L2.14123 11.9081C1.90198 12.2585 1.90198 12.721 2.14123 13.0714L2.87753 14.1495C7.74011 21.2698 18.1835 21.2698 23.0461 14.1495L23.7824 13.0714C24.0216 12.721 24.0216 12.2585 23.7824 11.9081L23.0461 10.83C18.1835 3.70968 7.74011 3.70967 2.87753 10.83ZM21.3944 11.9579L21.7577 12.4897L21.3944 13.0216C17.326 18.9791 8.59763 18.9791 4.52914 13.0216L4.16592 12.4897L4.52914 11.9579C8.59763 6.00037 17.326 6.00037 21.3944 11.9579Z\"\r\n                        fill=\"#666666\"\r\n                      />\r\n                    </svg>\r\n                  </div>\r\n                )\r\n              ) : null}\r\n            </StyledPassSwitch>\r\n          </PasswordRow>\r\n        </div>\r\n      </InputWrapper>\r\n      {validationMessage && <span className=\"error-msg\">{validationMessage}</span>}\r\n    </>\r\n  );\r\n};\r\n\r\nexport default PasswordField;\r\n"],"file":"PasswordField.js"}

package/dist/esm/InputFields/QuickSearch.js

@@ -0,0 +1,178 @@
+import _pt from "prop-types";
+import * as React from 'react';
+import styled from 'styled-components';
+import IconButton from '../Button/Iconbutton';
+import { SearchIconWrapper, StyledIcon } from './styling';
+import { Size } from '../types';
+import { COLORS, LoadingIndicator } from '..';
+import { Search as SearchIcon, Clear as ClearIcon } from '../icons/systemicons/SystemIcons';
+import SearchBarInput from './components/SearchBarInput';
+import { StyledSearchField } from './components/SearchField';
+const QuickSearchField = styled(StyledSearchField)`
+  ${props => props.margin ? `margin: ${props.margin};` : ''}
+  -webkit-transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;
+  transition: box-shadow 0.2s ease-in-out, width 0.2s ease-in-out;
+
+  background-color: transparent;
+  &.small {
+    width: 48px;
+  }
+
+  &.medium {
+    width: 56px;
+  }
+  
+  &.expanded{
+    width: 100%;
+    background-color: ${COLORS.white};
+  }
+
+  input {
+    ::placeholder {
+      font-style: italic;
+      color: ${COLORS.neutral_600};
+    }
+  }
+
+  box-shadow: ${props => props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_800}` : 'none !important'};
+
+  &:hover {
+    box-shadow: ${props => props.expanded ? `inset 0px 0px 0px 2px ${COLORS.primary_700}` : 'none !important'};
+  }
+`;
+
+const QuickSearch = ({
+  id,
+  searchTerm,
+  setSearchTerm,
+  enterSearch,
+  removeSearch,
+  placeholder,
+  performSearchLabel,
+  disabled,
+  onKeyDown,
+  size,
+  margin,
+  loading
+}) => {
+  const searchFieldRef = React.useRef(null);
+  const searchFieldInputRef = React.useRef(null);
+  const [searchFieldVisible, setSearchFieldVisible] = React.useState(false);
+  const [tabbedHere, setTabbedHere] = React.useState(false);
+
+  const handleClickOutside = e => {
+    if (searchFieldRef?.current && !searchFieldRef.current.contains(e.target)) {
+      if (searchFieldVisible && !searchTerm?.length) {
+        setSearchFieldVisible(false);
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    if (searchTerm?.length) {
+      setSearchFieldVisible(true);
+    }
+  }, [searchTerm]);
+  React.useEffect(() => {
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  });
+  React.useEffect(() => {
+    if (searchFieldVisible) {
+      searchFieldInputRef?.current?.focus();
+    }
+  }, [searchFieldVisible, searchFieldInputRef, id]);
+
+  const handleKeyDown = e => {
+    if (onKeyDown) {
+      onKeyDown(e);
+    }
+
+    if (e.key === 'Escape') {
+      if (searchFieldVisible && !searchTerm?.length) {
+        setSearchFieldVisible(false);
+      }
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(QuickSearchField, {
+    ref: searchFieldRef,
+    expanded: searchFieldVisible,
+    id: `${id}_main`,
+    onBlur: event => {
+      if (event.relatedTarget && searchFieldRef?.current && !searchFieldRef.current.contains(event.relatedTarget) && !searchTerm) {
+        setSearchFieldVisible(false);
+      }
+    },
+    "data-testid": `${id}_main`,
+    className: (searchTerm !== '' ? 'searchactive ' : '').concat(size ? size : '').concat(searchFieldVisible ? ' expanded' : ''),
+    tabbedHere: tabbedHere,
+    tabIndex: -1,
+    margin: margin
+  }, searchFieldVisible && /*#__PURE__*/React.createElement(SearchBarInput, {
+    placeholder: disabled ? '' : placeholder,
+    id: id,
+    ref: searchFieldInputRef,
+    disabled: disabled,
+    onKeyDown: handleKeyDown,
+    size: size,
+    setTabbedHere: setTabbedHere,
+    setSearchTerm: term => setSearchTerm(term),
+    searchTerm: searchTerm,
+    enterSearch: enterSearch
+  }), /*#__PURE__*/React.createElement(SearchIconWrapper, {
+    className: size ? size : '',
+    role: "button",
+    "aria-label": performSearchLabel,
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    id: `${id}_Searchbutton`,
+    variant: "secondary",
+    shape: "circular",
+    tabIndex: searchFieldVisible ? -1 : 0,
+    action: e => searchFieldVisible ? enterSearch(e) : setSearchFieldVisible(searchFieldVisible ? false : true)
+  }, /*#__PURE__*/React.createElement(SearchIcon, {
+    size: "24px",
+    color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+  }))), /*#__PURE__*/React.createElement(StyledIcon, {
+    className: size ? size : '',
+    role: "button",
+    tabIndex: -1,
+    hidden: searchTerm === '' || searchTerm === undefined || !searchFieldVisible
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    id: `${id}_Clearicon`,
+    variant: "secondary",
+    shape: "circular",
+    action: e => {
+      removeSearch(e);
+      searchFieldInputRef?.current?.focus();
+    }
+  }, /*#__PURE__*/React.createElement(ClearIcon, {
+    size: "24px",
+    color: disabled ? COLORS.neutral_300 : COLORS.neutral_600
+  }))), loading && searchFieldVisible && /*#__PURE__*/React.createElement(StyledIcon, {
+    className: size ? size : '',
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement(LoadingIndicator, {
+    size: Size.Small,
+    color: COLORS.neutral_600
+  })));
+};
+
+QuickSearch.propTypes = {
+  id: _pt.string.isRequired,
+  searchTerm: _pt.string,
+  setSearchTerm: _pt.func.isRequired,
+  enterSearch: _pt.func.isRequired,
+  removeSearch: _pt.func.isRequired,
+  placeholder: _pt.string,
+  performSearchLabel: _pt.string,
+  disabled: _pt.bool,
+  onKeyDown: _pt.func,
+  margin: _pt.string,
+  loading: _pt.bool
+};
+export default QuickSearch;
+//# sourceMappingURL=QuickSearch.js.map