@helsenorge/datepicker 13.5.0 → 13.7.0

package/lib/components/DatePicker/DatePicker.d.ts

@@ -1,10 +1,10 @@
 import { default as React } from 'react';
 import { Locale } from 'date-fns';
+import { HNDesignsystemDatePicker } from '../../resources/Resources';
 import { DayPickerProps } from 'react-day-picker';
 import { ErrorWrapperClassNameProps } from '@helsenorge/designsystem-react/components/ErrorWrapper';
 import { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';
 import { DatePickerAriaLabels } from './DatePickerPopup';
-import { HNDesignsystemDatePicker } from '../../resources/Resources';
 export type DateFormat = 'dd.MM.yyyy';
 export interface DatePickerProps extends ErrorWrapperClassNameProps, Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'aria-describedby' | 'onBlur' | 'autoComplete'>, Pick<DayPickerProps, 'dir' | 'initialFocus'> {
     /** Setter labels for popup på desktop visning */

package/lib/components/DatePicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["DatePickerPopup: React.FC<DatePickerPopupProps>","mergedResources: HNDesignsystemDatePicker","popupAriaLabels: DatePickerAriaLabels","weekendMatcher: DayOfWeek","handleSingleDatePickerSelect: PropsSingle['onSelect']"],"sources":["../../../src/components/DatePicker/position-utils.ts","../../../src/components/DatePicker/DatePickerPopup.tsx","../../../src/resources/HN.Designsystem.DatePicker.en-GB.json","../../../src/resources/HN.Designsystem.DatePicker.nb-NO.json","../../../src/components/DatePicker/resourceHelper.ts","../../../src/components/DatePicker/DatePicker.tsx","../../../src/components/DatePicker/DateTime.tsx","../../../src/components/DatePicker/DateTimePickerWrapper.tsx","../../../src/components/DatePicker/validate-utils.ts","../../../src/components/DatePicker/index.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 329;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 26;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 9;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n// @todo these functions are similar to the ones in utils in PopOver, should be moved to a shared location\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant?: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic && variant !== undefined) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftEdgePx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 4;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightEdgePx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 4;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  return controllerSize.left + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeft = getBubbleLeftPx(controllerSize, bubbleSize);\n  return bubbleLeft > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX + 5;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftEdgePx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightEdgePx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom + ARROW_VERTICAL_OFFSET_PX,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom + ARROW_VERTICAL_OFFSET_PX,\n  };\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { Locale, format } from 'date-fns';\nimport { nb } from 'date-fns/locale';\nimport { DayPicker, DayPickerProps, PropsSingle, Labels } from 'react-day-picker';\nimport reactdaypickerstyles from 'react-day-picker/dist/style.module.css';\n\nimport { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';\nimport { useInterval } from '@helsenorge/designsystem-react/hooks/useInterval';\nimport { useIsVisible } from '@helsenorge/designsystem-react/hooks/useIsVisible';\nimport { useLayoutEvent } from '@helsenorge/designsystem-react/hooks/useLayoutEvent';\nimport { useSize } from '@helsenorge/designsystem-react/hooks/useSize';\nimport { getSpacer } from '@helsenorge/designsystem-react/theme/currys/spacing';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './position-utils';\n\nimport styles from './styles.module.scss';\n\nexport interface DatePickerAriaLabels {\n  /** Tekst brukt for vanlige dager i kalenderen.\n   *  {date} - placeholder for den faktiske datoen.\n   */\n  dayButtonBase?: string;\n\n  /** Tekst brukt når en dag er \"i dag\".\n   *  {date} - placeholder for den faktiske datoen.\n   */\n  dayButtonToday?: string;\n\n  /** Tekst brukt når en dag er valgt.\n   *  {date} - placeholder for den faktiske datoen.\n   */\n  dayButtonSelected?: string;\n\n  /** Tekst brukt for knappen som viser neste måned. */\n  nextMonth?: string;\n\n  /** Tekst brukt for knappen som viser forrige måned. */\n  previousMonth?: string;\n\n  /** Tekst brukt for nedtrekkslisten over måneder. */\n  monthDropdown?: string;\n\n  /** Tekst brukt for nedtrekkslisten over år. */\n  yearDropdown?: string;\n}\n\ninterface DatePickerPopupProps\n  extends Pick<\n      DayPickerProps,\n      'dir' | 'disabled' | 'footer' | 'startMonth' | 'initialFocus' | 'locale' | 'month' | 'onMonthChange' | 'endMonth'\n    >,\n    Pick<PropsSingle, 'selected' | 'onSelect'> {\n  ariaLabels?: DatePickerAriaLabels;\n  datepickerWrapperRef: React.RefObject<HTMLDivElement>;\n  inputRef: React.RefObject<HTMLInputElement>;\n  testId?: string;\n  variant: keyof typeof PopOverVariant;\n  zIndex?: number;\n}\n\nconst DatePickerPopup: React.FC<DatePickerPopupProps> = props => {\n  const { ariaLabels, datepickerWrapperRef, endMonth, footer, inputRef, locale, startMonth, testId, variant, zIndex, ...rest } = props;\n\n  const today = new Date();\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const bubbleSize = useSize(datepickerWrapperRef);\n  const controllerisVisible = useIsVisible(datepickerWrapperRef, 0);\n\n  function getDateFnsLocale(dayPickerLocale?: Partial<Locale>): Locale {\n    return (dayPickerLocale as Locale) ?? nb;\n  }\n\n  const buildAriaLabels = (custom: DatePickerAriaLabels = {}): Partial<Labels> => {\n    return {\n      labelDayButton: (date, modifiers): string => {\n        const dateString = format(date, 'PPPP', {\n          locale: getDateFnsLocale(locale),\n        });\n\n        let label = custom.dayButtonBase ? custom.dayButtonBase.replace('{date}', dateString) : dateString;\n\n        if (modifiers.today && custom.dayButtonToday) {\n          label = custom.dayButtonToday.replace('{date}', dateString);\n        }\n\n        if (modifiers.selected && custom.dayButtonSelected) {\n          label = custom.dayButtonSelected.replace('{date}', dateString);\n        }\n\n        return label;\n      },\n\n      labelNext: (): string => {\n        return custom.nextMonth ?? 'Neste måned';\n      },\n      labelPrevious: (): string => {\n        return custom.previousMonth ?? 'Forrige måned';\n      },\n      labelMonthDropdown: (): string => {\n        return custom.monthDropdown ?? 'Velg måned';\n      },\n      labelYearDropdown: (): string => {\n        return custom.yearDropdown ?? 'Velg år';\n      },\n    };\n  };\n\n  const updateControllerSize = (): void => {\n    setControllerSize(inputRef.current?.getBoundingClientRect());\n  };\n\n  React.useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  const datepickerPopupContainerClasses = classNames(styles['datepicker-popup-container'], {\n    [styles['datepicker-popup-container--visible']]: controllerisVisible,\n  });\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const popupArrowClasses = classNames(styles['datepicker-popup-arrow'], {\n    [styles['datepicker-popup-arrow--visible']]: controllerisVisible,\n    [styles['datepicker-popup-arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['datepicker-popup-arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  const datePickerClassNames = {\n    ...reactdaypickerstyles,\n    ...styles,\n  };\n\n  return (\n    <>\n      <div className={datepickerPopupContainerClasses} data-testid={testId} ref={datepickerWrapperRef} style={{ ...bubbleStyle, zIndex }}>\n        <DayPicker\n          captionLayout=\"dropdown\"\n          classNames={datePickerClassNames}\n          mode={'single'}\n          style={{ '--rdp-cell-size': getSpacer('l') } as React.CSSProperties}\n          modifiersClassNames={{\n            today: styles['day--today'],\n            selected: styles['day--selected'],\n            disabled: styles['day--disabled'],\n          }}\n          footer={<span className={styles['footer-wrapper']}>{footer}</span>}\n          fixedWeeks\n          labels={buildAriaLabels(ariaLabels)}\n          startMonth={startMonth ?? new Date(today.getFullYear() - 100, today.getMonth(), 1)}\n          endMonth={endMonth ?? new Date(today.getFullYear() + 100, today.getMonth(), 1)}\n          locale={locale}\n          {...rest}\n        />\n      </div>\n      <div ref={arrowRef} className={popupArrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n};\n\nexport default DatePickerPopup;\n","{\n  \"dateButtonAriaLabel\": \"Open datepicker\",\n  \"dayButtonBase\": \"{date}\",\n  \"dayButtonToday\": \"Today, {date}\",\n  \"dayButtonSelected\": \"{date}, selected\",\n  \"nextMonth\": \"Next month\",\n  \"previousMonth\": \"Previous month\",\n  \"monthDropdown\": \"Select month\",\n  \"yearDropdown\": \"Select year\"\n}\n","{\n  \"dateButtonAriaLabel\": \"Åpne datovelger\",\n  \"dayButtonBase\": \"{date}\",\n  \"dayButtonToday\": \"I dag, {date}\",\n  \"dayButtonSelected\": \"{date} valgt\",\n  \"nextMonth\": \"Neste måned\",\n  \"previousMonth\": \"Forrige måned\",\n  \"monthDropdown\": \"Velg måned\",\n  \"yearDropdown\": \"Velg år\"\n}\n","import { LanguageLocales } from '@helsenorge/designsystem-react';\n\nimport enGB from '../../resources/HN.Designsystem.DatePicker.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.DatePicker.nb-NO.json';\nimport { HNDesignsystemDatePicker } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDatePicker => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef, useEffect } from 'react';\n\nimport { Locale, format, isValid, parse } from 'date-fns';\nimport { nb } from 'date-fns/locale';\nimport { Modifiers, DayOfWeek, DayPickerProps, PropsSingle } from 'react-day-picker';\n\nimport Button from '@helsenorge/designsystem-react/components/Button';\nimport { ErrorWrapperClassNameProps } from '@helsenorge/designsystem-react/components/ErrorWrapper';\nimport Icon from '@helsenorge/designsystem-react/components/Icon';\nimport Calendar from '@helsenorge/designsystem-react/components/Icons/Calendar';\nimport Input from '@helsenorge/designsystem-react/components/Input';\nimport { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';\nimport { KeyboardEventKey, LanguageLocales, ZIndex } from '@helsenorge/designsystem-react/constants';\nimport { useKeyboardEvent } from '@helsenorge/designsystem-react/hooks/useKeyboardEvent';\nimport { useOutsideEvent } from '@helsenorge/designsystem-react/hooks/useOutsideEvent';\nimport { usePseudoClasses } from '@helsenorge/designsystem-react/hooks/usePseudoClasses';\nimport { useLanguage } from '@helsenorge/designsystem-react/utils/language';\nimport { isMobileUA } from '@helsenorge/designsystem-react/utils/mobile';\nimport { isMutableRefObject, mergeRefs } from '@helsenorge/designsystem-react/utils/refs';\n\nimport DatePickerPopup, { DatePickerAriaLabels } from './DatePickerPopup';\nimport { getResources } from './resourceHelper';\nimport { HNDesignsystemDatePicker } from '../../resources/Resources';\n\nimport styles from './styles.module.scss';\n\nexport type DateFormat = 'dd.MM.yyyy';\n\nexport interface DatePickerProps\n  extends ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'aria-describedby' | 'onBlur' | 'autoComplete'>,\n    Pick<DayPickerProps, 'dir' | 'initialFocus'> {\n  /** Setter labels for popup på desktop visning */\n  ariaLabels?: DatePickerAriaLabels;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Sets aria-label on the button that opens the datepicker dialogue */\n  dateButtonAriaLabel?: string;\n  /** Sets the format of the date - only applies for desktop use. Native mobile date fields base their formats on the device */\n  dateFormat?: DateFormat;\n  /** Sets the date of the component */\n  dateValue?: Date;\n  /** Sets the current month */\n  defaultMonth?: Date;\n  /** Disables the datepicker */\n  disabled?: boolean;\n  /** Disables the days in the datepicker */\n  disableDays?: Date[];\n  /** Disables weekends in the datepicker */\n  disableWeekends?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Content to be rendered in the footer of the datepicker popup */\n  footerContent?: React.ReactNode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Input element id */\n  inputId?: string;\n  /** Sets the locale of the datepicker */\n  locale?: Locale;\n  /** Maximum date allowed to be selected */\n  maxDate?: Date;\n  /** Minimum date allowed to be selected */\n  minDate?: Date;\n  /** onChange callback triggered by change in chosen date */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,\n    date?: Date | string\n  ) => void;\n  /** Only use this to trigger validation. Callback triggered by change in chosen date via the datepicker popup */\n  onDatePopupClosed?: (date: Date | string | undefined) => void;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDatePicker>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Determines the placement of the DatePicker popup. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Overrides the default z-index of DatePicker */\n  zIndex?: number;\n}\n\nexport const DatePicker = React.forwardRef((props: DatePickerProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    dateButtonAriaLabel,\n    dateFormat = 'dd.MM.yyyy',\n    dateValue,\n    defaultMonth,\n    dir,\n    disabled,\n    disableDays = [],\n    disableWeekends,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    footerContent,\n    label,\n    ariaLabels,\n    inputId,\n    locale = nb,\n    maxDate,\n    minDate,\n    onBlur,\n    onChange,\n    onDatePopupClosed,\n    testId,\n    resources,\n    autoComplete = 'off',\n    variant = PopOverVariant.positionautomatic,\n    zIndex = ZIndex.PopOver,\n    ...rest\n  } = props;\n\n  const [dateState, setDateState] = useState<Date | undefined>(dateValue);\n  const [inputValue, setInputValue] = useState<string>(dateState ? format(dateState, dateFormat) : '');\n  const [month, setMonth] = useState<Date | undefined>(defaultMonth);\n  const [datePickerOpen, setDatePickerOpen] = useState<boolean>(false);\n  const [returnInputFocus, setReturnInputFocus] = useState<boolean>(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDatePicker = {\n    ...defaultResources,\n    ...resources,\n    dateButtonAriaLabel: dateButtonAriaLabel || resources?.dateButtonAriaLabel || defaultResources.dateButtonAriaLabel,\n  };\n  const popupAriaLabels: DatePickerAriaLabels = {\n    dayButtonBase: ariaLabels?.dayButtonBase || mergedResources.dayButtonBase,\n    dayButtonToday: ariaLabels?.dayButtonToday || mergedResources.dayButtonToday,\n    dayButtonSelected: ariaLabels?.dayButtonSelected || mergedResources.dayButtonSelected,\n    nextMonth: ariaLabels?.nextMonth || mergedResources.nextMonth,\n    previousMonth: ariaLabels?.previousMonth || mergedResources.previousMonth,\n    monthDropdown: ariaLabels?.monthDropdown || mergedResources.monthDropdown,\n    yearDropdown: ariaLabels?.yearDropdown || mergedResources.yearDropdown,\n  };\n\n  const weekendMatcher: DayOfWeek = {\n    dayOfWeek: [0, 6],\n  };\n  const disabledDays = disableWeekends\n    ? [...disableDays, weekendMatcher, ...(minDate ? [{ before: minDate }] : []), ...(maxDate ? [{ after: maxDate }] : [])]\n    : [...disableDays, ...(minDate ? [{ before: minDate }] : []), ...(maxDate ? [{ after: maxDate }] : [])];\n\n  const inputWrapperRef = useRef<HTMLDivElement>(null);\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const datepickerWrapperRef = useRef<HTMLDivElement>(null);\n  const { refObject } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const isTyping = useRef<boolean>(false);\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  useOutsideEvent(\n    [inputContainerRef, datepickerWrapperRef],\n    (e: any) => {\n      if (\n        inputContainerRef.current &&\n        datepickerWrapperRef.current &&\n        !e?.composedPath().includes(inputContainerRef.current) &&\n        !e?.composedPath().includes(datepickerWrapperRef.current)\n      ) {\n        setDatePickerOpen(false);\n      }\n    },\n    ['mousedown', 'focusin', 'blur']\n  );\n  /* eslint-enable @typescript-eslint/no-explicit-any */\n\n  useEffect(() => {\n    if (isValid(dateValue)) {\n      setInputValue(dateValue ? format(dateValue, dateFormat) : '');\n      setDateState(dateValue);\n      setMonth(dateValue);\n    } else {\n      setInputValue('');\n      setDateState(undefined);\n      setMonth(undefined);\n    }\n  }, [dateValue, dateFormat]);\n\n  useEffect(() => {\n    if (returnInputFocus && refObject.current) {\n      refObject.current.focus();\n    }\n  }, [returnInputFocus]);\n\n  const handleEscapeKeyDown = (): void => {\n    if (refObject?.current) refObject.current.focus();\n    setDatePickerOpen(false);\n  };\n\n  useKeyboardEvent(datepickerWrapperRef, handleEscapeKeyDown, [KeyboardEventKey.Escape]);\n  useKeyboardEvent(inputWrapperRef, handleEscapeKeyDown, [KeyboardEventKey.Escape]);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>, inputFormat: string): void => {\n    setInputValue(event.currentTarget.value);\n    const newDate = parse(event.currentTarget.value, inputFormat, new Date());\n\n    if (isValid(newDate)) {\n      setDateState(newDate);\n      setMonth(newDate);\n    } else {\n      setDateState(undefined);\n    }\n\n    if (onChange) onChange(event, event.currentTarget.value);\n  };\n\n  const handleInputFocus = (): void => {\n    if (!returnInputFocus) {\n      setDatePickerOpen(true);\n    } else {\n      setReturnInputFocus(false);\n    }\n  };\n\n  /* eslint-disable @typescript-eslint/no-unused-vars */\n  const handleSingleDatePickerSelect: PropsSingle['onSelect'] = (\n    date: Date | undefined,\n    _selectedDay: Date,\n    _activeModifiers: Modifiers,\n    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>\n  ): void => {\n    setReturnInputFocus(true);\n\n    if (!date) {\n      setDatePickerOpen(false);\n      return;\n    }\n\n    setDateState(date);\n\n    if (refObject.current) {\n      setInputValue(format(date, dateFormat));\n      setDatePickerOpen(false);\n    }\n\n    if (onChange) onChange(e, date);\n\n    triggerSyntheticInputEvents(refObject, format(date, dateFormat), date);\n\n    if (onDatePopupClosed) onDatePopupClosed(date);\n  };\n\n  // We do this to make sure selecting from the DatePickerPopup triggers the onChange events properly, and works with react-hook-form\n  const triggerSyntheticInputEvents = (\n    inputRef: React.RefObject<HTMLInputElement>,\n    value: string,\n    date: Date,\n    _onChange?: (event: React.ChangeEvent<HTMLInputElement>, date: Date) => void\n  ): void => {\n    if (inputRef.current) {\n      inputRef.current.value = value;\n\n      const inputEvent = new Event('change', { bubbles: true });\n\n      // Since the event is synthetic we have to add the target for webcomponents to not throw an error\n      Object.defineProperty(inputEvent, 'target', {\n        value: inputRef.current,\n        writable: false,\n        enumerable: true,\n        configurable: true,\n      });\n\n      Object.defineProperty(inputEvent, 'currentTarget', {\n        value: inputRef.current,\n        writable: false,\n        enumerable: true,\n        configurable: true,\n      });\n\n      inputRef.current.dispatchEvent(inputEvent);\n\n      if (onChange) {\n        onChange(inputEvent as unknown as React.ChangeEvent<HTMLInputElement>, date);\n      }\n    }\n  };\n\n  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement, Element>): void => {\n    // We don't trigger the native onBlur event if the user select via the datepicker and the onDatePopupClosed callback is used (usually to trigger validation manually)\n    if (!datePickerOpen && (typeof onDatePopupClosed === 'undefined' || isTyping.current)) {\n      if (onBlur) onBlur(e);\n    }\n\n    isTyping.current = false;\n  };\n\n  const handleButtonClick = (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null | undefined\n  ): void => {\n    e?.stopPropagation();\n    setDatePickerOpen(!datePickerOpen);\n  };\n\n  // This differentiates between typing in the input field and selecting a date from the datepicker, especially on native mobile date fields\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent): void => {\n      if (!['Escape', 'Enter', 'Tab'].includes(e.key)) {\n        isTyping.current = true;\n        setDatePickerOpen(false);\n      }\n    };\n\n    const inputElement = refObject.current;\n    if (inputElement) {\n      inputElement.addEventListener('keydown', handleKeyDown);\n    }\n\n    return (): void => {\n      if (inputElement) {\n        inputElement.removeEventListener('keydown', handleKeyDown);\n      }\n    };\n  }, [refObject]);\n\n  const handleMobileInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    handleInputChange(e, 'yyyy-MM-dd');\n\n    if (!isTyping.current) {\n      if (onDatePopupClosed) onDatePopupClosed(dateState);\n    }\n  };\n\n  const renderMobile = (\n    <Input\n      disabled={disabled}\n      error={error}\n      errorText={errorText}\n      errorTextId={errorTextId}\n      inputId={inputId}\n      label={label}\n      max={maxDate ? format(maxDate, 'yyyy-MM-dd') : ''}\n      min={minDate ? format(minDate, 'yyyy-MM-dd') : ''}\n      type=\"date\"\n      ref={mergedRefs}\n      value={dateState ? format(dateState, 'yyyy-MM-dd') : ''}\n      width={14}\n      {...rest}\n      onBlur={handleInputBlur}\n      onChange={handleMobileInputChange}\n      autoComplete={autoComplete ? autoComplete : undefined}\n    />\n  );\n\n  const renderDesktop = (\n    <>\n      <div>\n        <Input\n          errorWrapperClassName={errorWrapperClassName}\n          disabled={disabled}\n          error={error}\n          errorText={errorText}\n          errorTextId={errorTextId}\n          inputId={inputId}\n          inputContainerRef={inputContainerRef}\n          inputWrapperRef={inputWrapperRef}\n          label={label}\n          onFocus={handleInputFocus}\n          type=\"text\"\n          ref={mergedRefs}\n          value={inputValue}\n          width={12}\n          {...rest}\n          onBlur={handleInputBlur}\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange(e, 'yyyy-MM-dd')}\n          rightOfInput={\n            <Button\n              disabled={disabled}\n              ariaLabel={dateButtonAriaLabel ?? 'Velg dato'}\n              onClick={handleButtonClick}\n              tabIndex={datePickerOpen ? -1 : 0}\n              variant={'borderless'}\n              wrapperClassName={styles['date-button']}\n              className={styles['date-button__inner']}\n            >\n              <Icon color={'black'} svgIcon={Calendar} />\n            </Button>\n          }\n          autoComplete={autoComplete ? autoComplete : undefined}\n        />\n      </div>\n      {datePickerOpen && !disabled && (\n        <DatePickerPopup\n          dir={dir}\n          disabled={disabledDays}\n          datepickerWrapperRef={datepickerWrapperRef}\n          footer={footerContent}\n          startMonth={minDate}\n          endMonth={maxDate}\n          inputRef={refObject}\n          locale={locale}\n          month={month}\n          selected={dateState}\n          onSelect={handleSingleDatePickerSelect}\n          onMonthChange={setMonth}\n          variant={variant}\n          zIndex={zIndex}\n          ariaLabels={popupAriaLabels}\n        />\n      )}\n    </>\n  );\n\n  return (\n    <div className={className} data-testid={testId}>\n      {isMobileUA() ? renderMobile : renderDesktop}\n    </div>\n  );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n","import React, { useEffect, useState } from 'react';\n\nimport { ErrorWrapperClassNameProps } from '@helsenorge/designsystem-react/components/ErrorWrapper';\nimport Input from '@helsenorge/designsystem-react/components/Input';\nimport { usePseudoClasses } from '@helsenorge/designsystem-react/hooks/usePseudoClasses';\nimport { isMutableRefObject, mergeRefs } from '@helsenorge/designsystem-react/utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type TimeUnit = 'hours' | 'minutes';\n\nexport interface DateTimeProps\n  extends ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'name' | 'aria-describedby' | 'aria-labelledby' | 'onBlur' | 'onChange' | 'disabled' | 'autoComplete'\n    > {\n  /** Default value that is set on the input field */\n  defaultValue?: number;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Sets the unit of time for the input field */\n  timeUnit: TimeUnit;\n  /** Value that is set on the input field */\n  value?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst formatAsTwoDigits = (value: string | number): string => {\n  const stringValue = String(value);\n  return stringValue.length === 1 ? '0' + stringValue : stringValue;\n};\n\nconst isNumericString = (str: string): boolean => {\n  return !str || (/^\\d+$/.test(str) && str.length <= 2);\n};\n\nexport const DateTime = React.forwardRef((props: DateTimeProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    label,\n    onBlur,\n    onChange,\n    timeUnit,\n    testId,\n    inputId,\n    value,\n    autoComplete = 'off',\n    ...rest\n  } = props;\n\n  const [inputValue, setInputValue] = useState<number | string | undefined>(\n    typeof value !== 'undefined' ? formatAsTwoDigits(value) : undefined\n  );\n  const { refObject } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  useEffect(() => {\n    setInputValue(value ? formatAsTwoDigits(value) : undefined);\n  }, [value]);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    const value = event.target.value;\n\n    if (isNumericString(value)) {\n      setInputValue(value);\n      if (onChange) onChange(event);\n    }\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n    const formattedValue = formatAsTwoDigits(event.target.value);\n    setInputValue(formattedValue);\n    if (onChange) onChange(event);\n    if (onBlur) onBlur(event);\n  };\n\n  /** Firefox stopper ikke vanlige characters fra å skrives til input type number - derfor håndterer vi det selv her */\n  const handleInputOnKeyDown = (event: React.KeyboardEvent): void => {\n    const validChars = /[0-9]/;\n    const allowedKeys = ['Backspace', ' ', 'Enter', 'Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n    if (!validChars.test(event.key) && !allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  const renderTimeSeparator = (): React.ReactNode => {\n    return timeUnit === 'hours' && <span className={styles['time-separator']}>{':'}</span>;\n  };\n\n  return (\n    <div data-testid={testId}>\n      <Input\n        inputId={inputId}\n        error={error}\n        errorText={errorText}\n        errorTextId={errorTextId}\n        errorWrapperClassName={errorWrapperClassName}\n        label={label}\n        max={timeUnit === 'hours' ? 23 : 59}\n        min={0}\n        type=\"number\"\n        ref={mergedRefs}\n        value={inputValue}\n        width={5}\n        defaultValue={typeof props.defaultValue !== 'undefined' ? formatAsTwoDigits(props.defaultValue) : undefined}\n        {...rest}\n        onChange={handleInputChange}\n        onBlur={handleInputBlur}\n        rightOfInput={renderTimeSeparator()}\n        onKeyDown={handleInputOnKeyDown}\n        autoComplete={autoComplete ? autoComplete : undefined}\n      />\n    </div>\n  );\n});\n\nDateTime.displayName = 'DateTime';\n\nexport default DateTime;\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '@helsenorge/designsystem-react/components/ErrorWrapper';\nimport { isComponent } from '@helsenorge/designsystem-react/utils/component';\n\nimport DatePicker, { DatePickerProps } from './DatePicker';\nimport DateTime, { DateTimeProps } from './DateTime';\n\nimport styles from './styles.module.scss';\n\nexport type TimeUnits = 'hours' | 'minutes';\n\ninterface DateTimePickerWrapperProps extends ErrorWrapperClassNameProps {\n  /** Sets the children of the datetimepicker - the DatePicker and DateTime components go here */\n  children?: React.ReactNode;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DateTimePickerWrapper = React.forwardRef((props: DateTimePickerWrapperProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { children, errorWrapperClassName, errorText, legend, testId } = props;\n  const errorTextId = useId();\n\n  const mapDateComponents = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<DatePickerProps>(child, DatePicker)) {\n      return React.cloneElement(child, {\n        className: classNames(styles['date-time-picker-wrapper__date-picker']),\n        error: !!errorText,\n        errorTextId,\n      });\n    } else if (isComponent<DateTimeProps>(child, DateTime)) {\n      return React.cloneElement(child, {\n        error: !!errorText,\n        errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <div ref={ref} tabIndex={-1}>\n      <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n        {props.legend ? (\n          <fieldset className={styles['date-time-picker-wrapper']} data-testid={testId}>\n            {props.legend && <legend className={styles['date-time-picker-wrapper__legend']}>{legend}</legend>}\n            {React.Children.map(children, mapDateComponents)}\n          </fieldset>\n        ) : (\n          <div className={styles['date-time-picker-wrapper']}>{React.Children.map(children, mapDateComponents)}</div>\n        )}\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nDateTimePickerWrapper.displayName = 'DateTimePickerWrapper';\n\nexport default DateTimePickerWrapper;\n","import { isWithinInterval, isAfter, isBefore, isSameDay, parse, isValid } from 'date-fns';\n\nexport const parseInputDate = (dateString: string): Date | null => {\n  const possibleFormats = ['yyyy-MM-dd', 'dd.MM.yyyy'];\n\n  for (const format of possibleFormats) {\n    const parsedDate = parse(dateString, format, new Date());\n    if (isValid(parsedDate)) {\n      return parsedDate;\n    }\n  }\n\n  return null;\n};\n\nexport const isValidDate = (dateString: string): boolean => {\n  const date = new Date(dateString);\n  return date instanceof Date && !isNaN(date.getTime());\n};\n\n/** react-hook-form fromDate and toDate validation */\nexport const validateMinMaxDate = (\n  date: string,\n  outsideRangeErrorMessage: string,\n  invalidFormatErrorMessage?: string,\n  minDate?: Date,\n  maxDate?: Date\n): string | true => {\n  const formattedDate = parseInputDate(date);\n  const hasMinDate = typeof minDate !== 'undefined';\n  const hasMaxDate = typeof maxDate !== 'undefined';\n  if (!formattedDate || (hasMinDate && !isValid(minDate)) || (hasMaxDate && !isValid(maxDate))) {\n    return invalidFormatErrorMessage || 'Invalid date format';\n  }\n\n  if (hasMinDate && !hasMaxDate && (isSameDay(formattedDate, minDate) || isAfter(formattedDate, minDate))) return true;\n  else if (hasMaxDate && !hasMinDate && (isSameDay(formattedDate, maxDate) || isBefore(formattedDate, maxDate))) return true;\n  else if (\n    hasMinDate &&\n    hasMaxDate &&\n    (isSameDay(formattedDate, minDate) ||\n      isSameDay(formattedDate, maxDate) ||\n      isWithinInterval(formattedDate, { start: minDate, end: maxDate }))\n  ) {\n    return true;\n  }\n\n  return outsideRangeErrorMessage;\n};\n\n/** react-hook-form fromDate and toDate validation */\nexport const validateDisabledDates = (\n  date: string,\n  disabledDates: Date[],\n  isDisabledErrorMessage: string,\n  invalidFormatErrorMessage?: string\n): string | true => {\n  const formattedDate = parseInputDate(date);\n  if (!formattedDate) {\n    return invalidFormatErrorMessage || 'Invalid date format';\n  }\n  if (!disabledDates.some(d => isSameDay(d, formattedDate))) {\n    return true;\n  }\n\n  return isDisabledErrorMessage;\n};\n\n/** react-hook-form fromTime and toTime validation */\nexport const validateMinTimeMaxTime = (\n  time: { hour: number; minute: number },\n  errorMessage: string,\n  minTime?: { hour: number; minute: number },\n  maxTime?: { hour: number; minute: number }\n): string | true => {\n  const timeParsed = parse((time.hour + ':' + time.minute).toString(), 'HH:mm', new Date());\n  const minTimeParsed = parse((minTime?.hour + ':' + minTime?.minute).toString(), 'HH:mm', new Date());\n  const maxTimeParsed = parse((maxTime?.hour + ':' + maxTime?.minute).toString(), 'HH:mm', new Date());\n\n  if ((typeof minTime === 'undefined' || timeParsed >= minTimeParsed) && (typeof maxTime === 'undefined' || timeParsed <= maxTimeParsed)) {\n    return true;\n  }\n\n  return errorMessage;\n};\n","import { DatePicker } from './DatePicker';\nexport { DateTime } from './DateTime';\nexport { DateTimePickerWrapper } from './DateTimePickerWrapper';\nexport * from './validate-utils';\nexport * from './DatePicker';\nexport default DatePicker;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["DatePickerPopup: React.FC<DatePickerPopupProps>","mergedResources: HNDesignsystemDatePicker","popupAriaLabels: DatePickerAriaLabels","weekendMatcher: DayOfWeek","handleSingleDatePickerSelect: PropsSingle['onSelect']"],"sources":["../../../src/components/DatePicker/position-utils.ts","../../../src/components/DatePicker/DatePickerPopup.tsx","../../../src/resources/HN.Designsystem.DatePicker.en-GB.json","../../../src/resources/HN.Designsystem.DatePicker.nb-NO.json","../../../src/components/DatePicker/resourceHelper.ts","../../../src/components/DatePicker/DatePicker.tsx","../../../src/components/DatePicker/DateTime.tsx","../../../src/components/DatePicker/DateTimePickerWrapper.tsx","../../../src/components/DatePicker/validate-utils.ts","../../../src/components/DatePicker/index.ts"],"sourcesContent":["import { CSSProperties } from 'react';\n\nimport { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';\n\ntype HorizontalPosition = 'left' | 'right' | 'floating';\ntype BubblePosition = 'leftabove' | 'leftbelow' | 'rightabove' | 'rightbelow' | 'floatingabove' | 'floatingbelow';\n\n/** Bredde på hjelpeboble */\nconst BUBBLE_WIDTH_PX = 329;\n/** Hjelpeboblen skal holde avstand til venstre/høyre kant på vinduet */\nconst WINDOW_MARGIN_PX = 12;\n/** Vertikal avstand fra hjelpeboble til kontroller */\nconst BUBBLE_VERTICAL_OFFSET_PX = 26;\n/** Høyde/bredde på pil */\nconst ARROW_WIDTH_PX = 20;\n/** Avstand fra pil til hjelpeboble */\nconst ARROW_VERTICAL_OFFSET_PX = 9;\n/** Pilen skal holde avstand til venstre/høyre kant av hjelpeboblen */\nconst ARROW_HORIZONTAL_MARGIN_PX = 12;\n\n// @todo these functions are similar to the ones in utils in PopOver, should be moved to a shared location\n/**\n * Beregn om hjelpeboblen skal vises over eller under kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)\n * @returns Om hjelpeboblen skal vises over eller under\n */\nexport const getVerticalPosition = (\n  controllerSize: DOMRect,\n  bubbleSize: DOMRect,\n  variant?: keyof typeof PopOverVariant\n): keyof typeof PopOverVariant => {\n  if (variant !== PopOverVariant.positionautomatic && variant !== undefined) {\n    return variant;\n  }\n  if (controllerSize.top > bubbleSize.height + BUBBLE_VERTICAL_OFFSET_PX) {\n    return PopOverVariant.positionabove;\n  } else {\n    return PopOverVariant.positionbelow;\n  }\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftEdgePx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 4;\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til høyre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerRightEdgePx = (controllerSize: DOMRect): number =>\n  document.documentElement.clientWidth - controllerSize.right + controllerSize.width / 4;\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\n\n/**\n * Finn høyre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Høyre kant av hjelpeboblen i px\n */\nconst getBubbleRightPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  return controllerSize.left + bubbleSize.width;\n};\n\n/**\n * Sjekk om venstre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom venstre kant er innenfor vinduet\n */\nconst getBubbleLeftVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleLeft = getBubbleLeftPx(controllerSize, bubbleSize);\n  return bubbleLeft > WINDOW_MARGIN_PX;\n};\n\n/**\n * Sjekk om høyre kant av hjelpeboblen er innenfor vinduet\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns true dersom høyre kant er innenfor vinduet\n */\nconst getBubbleRightIsVisible = (controllerSize: DOMRect, bubbleSize: DOMRect): boolean => {\n  const bubbleRightPx = getBubbleRightPx(controllerSize, bubbleSize);\n\n  return bubbleRightPx < document.documentElement.clientWidth - WINDOW_MARGIN_PX;\n};\n\n/**\n * Finn riktig horisontal plassering til hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns left, right eller floating\n */\nconst getHorizontalPosition = (controllerSize: DOMRect, bubbleSize: DOMRect): HorizontalPosition => {\n  if (!getBubbleRightIsVisible(controllerSize, bubbleSize)) {\n    return 'right';\n  }\n  if (!getBubbleLeftVisible(controllerSize, bubbleSize)) {\n    return 'left';\n  }\n\n  return 'floating';\n};\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleAbovePx = (controllerSize: DOMRect, bubbleSize: DOMRect): number =>\n  controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - bubbleSize.height;\n\n/**\n * Finn vertikal plassering av hjelpeboblen når den skal vises under\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns \"Top\" for hjelpeboblen i px\n */\nconst getBubbleBelowPx = (controllerSize: DOMRect): number => controllerSize.bottom + BUBBLE_VERTICAL_OFFSET_PX;\n\n/**\n * Finn maks bredde på hjelpeboblen i forhold til vinduet\n * @returns Bredde på hjelpeboblen i px\n */\nconst getBubbleWidth = (): number => document.documentElement.clientWidth - WINDOW_MARGIN_PX * 2;\n\n/**\n * Sjekk om hjelpeboblen har plass i vinduet\n * @returns true dersom det er plass til hjelpeboblen i vinduet\n */\nconst getBubbleFitsInWindow = (): boolean => {\n  return document.documentElement.clientWidth > BUBBLE_WIDTH_PX + WINDOW_MARGIN_PX * 2;\n};\n\n/**\n * Finn vertikal plassering av pilen når den skal vises over\n * @param controllerSize DOMRect for controlleren\n * @returns \"Top\" for pilen i px\n */\nconst getArrowTopxPx = (controllerSize: DOMRect): number => controllerSize.top - BUBBLE_VERTICAL_OFFSET_PX - ARROW_VERTICAL_OFFSET_PX + 5;\n\n/**\n * Finn horisontal plassering av pilen i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowLeftPx = (controllerSize: DOMRect): number => getControllerLeftEdgePx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn horisontal plassering av pilen\n * @param controllerSize DOMRect for controlleren\n * @returns Venstre kant av pilen i px\n */\nconst getArrowRightPx = (controllerSize: DOMRect): number => getControllerRightEdgePx(controllerSize) - ARROW_WIDTH_PX / 2;\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns Beste mulige plassering av hjelpeboblen\n */\nconst getBubblePosition = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize, variant);\n\n  if (horizontalPosition === 'left') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'leftabove';\n    }\n    return 'leftbelow';\n  }\n\n  if (horizontalPosition === 'right') {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return 'rightabove';\n    }\n    return 'rightbelow';\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return 'floatingabove';\n  }\n\n  return 'floatingbelow';\n};\n\n/**\n * Finn riktig plassering av hjelpeboblen\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @param variant Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer hjelpeboblen riktig\n */\nexport const getBubbleStyle = (controllerSize: DOMRect, bubbleSize: DOMRect, variant: keyof typeof PopOverVariant): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize, variant);\n  const bubbleWidth = !getBubbleFitsInWindow() ? getBubbleWidth() : undefined;\n\n  if (bubblePosition === 'leftabove') {\n    return {\n      left: WINDOW_MARGIN_PX,\n      top: getBubbleAbovePx(controllerSize, bubbleSize),\n      width: bubbleWidth,\n    };\n  }\n  if (bubblePosition === 'leftbelow') {\n    return { left: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightabove') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n  }\n  if (bubblePosition === 'rightbelow') {\n    return { right: WINDOW_MARGIN_PX, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  if (bubblePosition === 'floatingbelow') {\n    return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: getBubbleLeftPx(controllerSize, bubbleSize), top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\n\n/**\n * Finn venstre kant av hjelpeboblen i forhold til kontrolleren\n * @param controllerSize DOMRect for controlleren\n * @param bubbleSize DOMRect for hjelpeboblen\n * @returns Venstre kant av hjelpeboblen i px\n */\nconst getBubbleLeftPx = (controllerSize: DOMRect, bubbleSize: DOMRect): number => {\n  const controllerHorizontalCenterPx = getControllerLeftCenterPx(controllerSize);\n\n  return controllerHorizontalCenterPx - bubbleSize.width / 2;\n};\n\n/**\n * Finn horisontalt midtpunkt på kontrolleren i forhold til venstre kant av vinduet\n * @param controllerSize DOMRect for controlleren\n * @returns Horisontalt senter av controlleren i px\n */\nconst getControllerLeftCenterPx = (controllerSize: DOMRect): number => controllerSize.left + controllerSize.width / 2;\n\n/**\n * Finn riktig plassering av pilen\n * @param bubbleStyle CSSProperties for hjelpeboblen\n * @param controllerSize DOMRect for kontrolleren\n * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)\n * @returns CSSProperties som plasserer pilen riktig\n */\nexport const getArrowStyle = (\n  bubbleStyle: CSSProperties,\n  controllerSize: DOMRect,\n  verticalPosition: keyof typeof PopOverVariant\n): CSSProperties => {\n  const leftPx = getArrowLeftPx(controllerSize);\n  const rightPx = getArrowRightPx(controllerSize);\n  const minLeftPx = (bubbleStyle.left as number) + ARROW_HORIZONTAL_MARGIN_PX;\n  const minRightPx = (bubbleStyle.right as number) + ARROW_HORIZONTAL_MARGIN_PX;\n\n  if (bubbleStyle.right) {\n    if (verticalPosition === PopOverVariant.positionabove) {\n      return {\n        right: rightPx > minRightPx ? rightPx : minRightPx,\n        top: getArrowTopxPx(controllerSize),\n      };\n    }\n\n    return {\n      right: rightPx > minRightPx ? rightPx : minRightPx,\n      top: controllerSize.bottom + ARROW_VERTICAL_OFFSET_PX,\n    };\n  }\n\n  if (verticalPosition === PopOverVariant.positionabove) {\n    return {\n      left: leftPx > minLeftPx ? leftPx : minLeftPx,\n      top: getArrowTopxPx(controllerSize),\n    };\n  }\n\n  return {\n    left: leftPx > minLeftPx ? leftPx : minLeftPx,\n    top: controllerSize.bottom + ARROW_VERTICAL_OFFSET_PX,\n  };\n};\n","import React, { useState, useRef } from 'react';\n\nimport classNames from 'classnames';\nimport { type Locale, format } from 'date-fns';\nimport { nb } from 'date-fns/locale';\nimport { DayPicker, type DayPickerProps, type PropsSingle, type Labels } from 'react-day-picker';\nimport reactdaypickerstyles from 'react-day-picker/dist/style.module.css';\n\nimport { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';\nimport { useInterval } from '@helsenorge/designsystem-react/hooks/useInterval';\nimport { useIsVisible } from '@helsenorge/designsystem-react/hooks/useIsVisible';\nimport { useLayoutEvent } from '@helsenorge/designsystem-react/hooks/useLayoutEvent';\nimport { useSize } from '@helsenorge/designsystem-react/hooks/useSize';\nimport { getSpacer } from '@helsenorge/designsystem-react/theme/currys/spacing';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './position-utils';\n\nimport styles from './styles.module.scss';\n\nexport interface DatePickerAriaLabels {\n  /** Tekst brukt for vanlige dager i kalenderen.\n   *  {date} - placeholder for den faktiske datoen.\n   */\n  dayButtonBase?: string;\n\n  /** Tekst brukt når en dag er \"i dag\".\n   *  {date} - placeholder for den faktiske datoen.\n   */\n  dayButtonToday?: string;\n\n  /** Tekst brukt når en dag er valgt.\n   *  {date} - placeholder for den faktiske datoen.\n   */\n  dayButtonSelected?: string;\n\n  /** Tekst brukt for knappen som viser neste måned. */\n  nextMonth?: string;\n\n  /** Tekst brukt for knappen som viser forrige måned. */\n  previousMonth?: string;\n\n  /** Tekst brukt for nedtrekkslisten over måneder. */\n  monthDropdown?: string;\n\n  /** Tekst brukt for nedtrekkslisten over år. */\n  yearDropdown?: string;\n}\n\ninterface DatePickerPopupProps\n  extends\n    Pick<DayPickerProps, 'dir' | 'disabled' | 'footer' | 'startMonth' | 'initialFocus' | 'locale' | 'month' | 'onMonthChange' | 'endMonth'>,\n    Pick<PropsSingle, 'selected' | 'onSelect'> {\n  ariaLabels?: DatePickerAriaLabels;\n  datepickerWrapperRef: React.RefObject<HTMLDivElement>;\n  inputRef: React.RefObject<HTMLInputElement>;\n  testId?: string;\n  variant: keyof typeof PopOverVariant;\n  zIndex?: number;\n}\n\nconst DatePickerPopup: React.FC<DatePickerPopupProps> = props => {\n  const { ariaLabels, datepickerWrapperRef, endMonth, footer, inputRef, locale, startMonth, testId, variant, zIndex, ...rest } = props;\n\n  const today = new Date();\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const bubbleSize = useSize(datepickerWrapperRef);\n  const controllerisVisible = useIsVisible(datepickerWrapperRef, 0);\n\n  function getDateFnsLocale(dayPickerLocale?: Partial<Locale>): Locale {\n    return (dayPickerLocale as Locale) ?? nb;\n  }\n\n  const buildAriaLabels = (custom: DatePickerAriaLabels = {}): Partial<Labels> => {\n    return {\n      labelDayButton: (date, modifiers): string => {\n        const dateString = format(date, 'PPPP', {\n          locale: getDateFnsLocale(locale),\n        });\n\n        let label = custom.dayButtonBase ? custom.dayButtonBase.replace('{date}', dateString) : dateString;\n\n        if (modifiers.today && custom.dayButtonToday) {\n          label = custom.dayButtonToday.replace('{date}', dateString);\n        }\n\n        if (modifiers.selected && custom.dayButtonSelected) {\n          label = custom.dayButtonSelected.replace('{date}', dateString);\n        }\n\n        return label;\n      },\n\n      labelNext: (): string => {\n        return custom.nextMonth ?? 'Neste måned';\n      },\n      labelPrevious: (): string => {\n        return custom.previousMonth ?? 'Forrige måned';\n      },\n      labelMonthDropdown: (): string => {\n        return custom.monthDropdown ?? 'Velg måned';\n      },\n      labelYearDropdown: (): string => {\n        return custom.yearDropdown ?? 'Velg år';\n      },\n    };\n  };\n\n  const updateControllerSize = (): void => {\n    setControllerSize(inputRef.current?.getBoundingClientRect());\n  };\n\n  React.useEffect(() => {\n    updateControllerSize();\n  }, []);\n\n  useInterval(updateControllerSize, 500);\n  useLayoutEvent(updateControllerSize, ['scroll', 'resize'], 10);\n\n  const datepickerPopupContainerClasses = classNames(styles['datepicker-popup-container'], {\n    [styles['datepicker-popup-container--visible']]: controllerisVisible,\n  });\n  const verticalPosition = controllerSize && bubbleSize && getVerticalPosition(controllerSize, bubbleSize, variant);\n  const popupArrowClasses = classNames(styles['datepicker-popup-arrow'], {\n    [styles['datepicker-popup-arrow--visible']]: controllerisVisible,\n    [styles['datepicker-popup-arrow--over']]: verticalPosition === PopOverVariant.positionbelow,\n    [styles['datepicker-popup-arrow--under']]: verticalPosition === PopOverVariant.positionabove,\n  });\n\n  const bubbleStyle = controllerSize && bubbleSize && getBubbleStyle(controllerSize, bubbleSize, variant);\n  const arrowStyle = bubbleStyle && controllerSize && verticalPosition && getArrowStyle(bubbleStyle, controllerSize, verticalPosition);\n\n  const datePickerClassNames = {\n    ...reactdaypickerstyles,\n    ...styles,\n  };\n\n  return (\n    <>\n      <div className={datepickerPopupContainerClasses} data-testid={testId} ref={datepickerWrapperRef} style={{ ...bubbleStyle, zIndex }}>\n        <DayPicker\n          captionLayout=\"dropdown\"\n          classNames={datePickerClassNames}\n          mode={'single'}\n          style={{ '--rdp-cell-size': getSpacer('l') } as React.CSSProperties}\n          modifiersClassNames={{\n            today: styles['day--today'],\n            selected: styles['day--selected'],\n            disabled: styles['day--disabled'],\n          }}\n          footer={<span className={styles['footer-wrapper']}>{footer}</span>}\n          fixedWeeks\n          labels={buildAriaLabels(ariaLabels)}\n          startMonth={startMonth ?? new Date(today.getFullYear() - 100, today.getMonth(), 1)}\n          endMonth={endMonth ?? new Date(today.getFullYear() + 100, today.getMonth(), 1)}\n          locale={locale}\n          {...rest}\n        />\n      </div>\n      <div ref={arrowRef} className={popupArrowClasses} style={{ ...arrowStyle, zIndex }} />\n    </>\n  );\n};\n\nexport default DatePickerPopup;\n","{\n  \"dateButtonAriaLabel\": \"Open datepicker\",\n  \"dayButtonBase\": \"{date}\",\n  \"dayButtonToday\": \"Today, {date}\",\n  \"dayButtonSelected\": \"{date}, selected\",\n  \"nextMonth\": \"Next month\",\n  \"previousMonth\": \"Previous month\",\n  \"monthDropdown\": \"Select month\",\n  \"yearDropdown\": \"Select year\"\n}\n","{\n  \"dateButtonAriaLabel\": \"Åpne datovelger\",\n  \"dayButtonBase\": \"{date}\",\n  \"dayButtonToday\": \"I dag, {date}\",\n  \"dayButtonSelected\": \"{date} valgt\",\n  \"nextMonth\": \"Neste måned\",\n  \"previousMonth\": \"Forrige måned\",\n  \"monthDropdown\": \"Velg måned\",\n  \"yearDropdown\": \"Velg år\"\n}\n","import { LanguageLocales } from '@helsenorge/designsystem-react';\n\nimport enGB from '../../resources/HN.Designsystem.DatePicker.en-GB.json';\nimport nbNO from '../../resources/HN.Designsystem.DatePicker.nb-NO.json';\nimport { HNDesignsystemDatePicker } from '../../resources/Resources';\n\nexport const getResources = (language: LanguageLocales): HNDesignsystemDatePicker => {\n  switch (language) {\n    case LanguageLocales.ENGLISH:\n      return enGB;\n    case LanguageLocales.NORWEGIAN:\n    default:\n      return nbNO;\n  }\n};\n","import React, { useState, useRef, useEffect } from 'react';\n\nimport { type Locale, format, isValid, parse } from 'date-fns';\nimport { nb } from 'date-fns/locale';\n\nimport type { HNDesignsystemDatePicker } from '../../resources/Resources';\nimport type { Modifiers, DayOfWeek, DayPickerProps, PropsSingle } from 'react-day-picker';\n\nimport Button from '@helsenorge/designsystem-react/components/Button';\nimport type { ErrorWrapperClassNameProps } from '@helsenorge/designsystem-react/components/ErrorWrapper';\nimport Icon from '@helsenorge/designsystem-react/components/Icon';\nimport Calendar from '@helsenorge/designsystem-react/components/Icons/Calendar';\nimport Input from '@helsenorge/designsystem-react/components/Input';\nimport { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';\nimport { KeyboardEventKey, LanguageLocales, ZIndex } from '@helsenorge/designsystem-react/constants';\nimport { useKeyboardEvent } from '@helsenorge/designsystem-react/hooks/useKeyboardEvent';\nimport { useOutsideEvent } from '@helsenorge/designsystem-react/hooks/useOutsideEvent';\nimport { usePseudoClasses } from '@helsenorge/designsystem-react/hooks/usePseudoClasses';\nimport { useLanguage } from '@helsenorge/designsystem-react/utils/language';\nimport { isMobileUA } from '@helsenorge/designsystem-react/utils/mobile';\nimport { isMutableRefObject, mergeRefs } from '@helsenorge/designsystem-react/utils/refs';\n\nimport DatePickerPopup, { type DatePickerAriaLabels } from './DatePickerPopup';\nimport { getResources } from './resourceHelper';\n\nimport styles from './styles.module.scss';\n\nexport type DateFormat = 'dd.MM.yyyy';\n\nexport interface DatePickerProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'aria-describedby' | 'onBlur' | 'autoComplete'>,\n    Pick<DayPickerProps, 'dir' | 'initialFocus'> {\n  /** Setter labels for popup på desktop visning */\n  ariaLabels?: DatePickerAriaLabels;\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** @deprecated Sets aria-label on the button that opens the datepicker dialogue */\n  dateButtonAriaLabel?: string;\n  /** Sets the format of the date - only applies for desktop use. Native mobile date fields base their formats on the device */\n  dateFormat?: DateFormat;\n  /** Sets the date of the component */\n  dateValue?: Date;\n  /** Sets the current month */\n  defaultMonth?: Date;\n  /** Disables the datepicker */\n  disabled?: boolean;\n  /** Disables the days in the datepicker */\n  disableDays?: Date[];\n  /** Disables weekends in the datepicker */\n  disableWeekends?: boolean;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** Content to be rendered in the footer of the datepicker popup */\n  footerContent?: React.ReactNode;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Input element id */\n  inputId?: string;\n  /** Sets the locale of the datepicker */\n  locale?: Locale;\n  /** Maximum date allowed to be selected */\n  maxDate?: Date;\n  /** Minimum date allowed to be selected */\n  minDate?: Date;\n  /** onChange callback triggered by change in chosen date */\n  onChange?: (\n    event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>,\n    date?: Date | string\n  ) => void;\n  /** Only use this to trigger validation. Callback triggered by change in chosen date via the datepicker popup */\n  onDatePopupClosed?: (date: Date | string | undefined) => void;\n  /** Resources for component */\n  resources?: Partial<HNDesignsystemDatePicker>;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n  /** Determines the placement of the DatePicker popup. Default: automatic positioning. */\n  variant?: keyof typeof PopOverVariant;\n  /** Overrides the default z-index of DatePicker */\n  zIndex?: number;\n}\n\nexport const DatePicker = React.forwardRef((props: DatePickerProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    className,\n    dateButtonAriaLabel,\n    dateFormat = 'dd.MM.yyyy',\n    dateValue,\n    defaultMonth,\n    dir,\n    disabled,\n    disableDays = [],\n    disableWeekends,\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    footerContent,\n    label,\n    ariaLabels,\n    inputId,\n    locale = nb,\n    maxDate,\n    minDate,\n    onBlur,\n    onChange,\n    onDatePopupClosed,\n    testId,\n    resources,\n    autoComplete = 'off',\n    variant = PopOverVariant.positionautomatic,\n    zIndex = ZIndex.PopOver,\n    ...rest\n  } = props;\n\n  const [dateState, setDateState] = useState<Date | undefined>(dateValue);\n  const [inputValue, setInputValue] = useState<string>(dateState ? format(dateState, dateFormat) : '');\n  const [month, setMonth] = useState<Date | undefined>(defaultMonth);\n  const [datePickerOpen, setDatePickerOpen] = useState<boolean>(false);\n  const [returnInputFocus, setReturnInputFocus] = useState<boolean>(false);\n  const { language } = useLanguage<LanguageLocales>(LanguageLocales.NORWEGIAN);\n  const defaultResources = getResources(language);\n\n  const mergedResources: HNDesignsystemDatePicker = {\n    ...defaultResources,\n    ...resources,\n    dateButtonAriaLabel: dateButtonAriaLabel || resources?.dateButtonAriaLabel || defaultResources.dateButtonAriaLabel,\n  };\n  const popupAriaLabels: DatePickerAriaLabels = {\n    dayButtonBase: ariaLabels?.dayButtonBase || mergedResources.dayButtonBase,\n    dayButtonToday: ariaLabels?.dayButtonToday || mergedResources.dayButtonToday,\n    dayButtonSelected: ariaLabels?.dayButtonSelected || mergedResources.dayButtonSelected,\n    nextMonth: ariaLabels?.nextMonth || mergedResources.nextMonth,\n    previousMonth: ariaLabels?.previousMonth || mergedResources.previousMonth,\n    monthDropdown: ariaLabels?.monthDropdown || mergedResources.monthDropdown,\n    yearDropdown: ariaLabels?.yearDropdown || mergedResources.yearDropdown,\n  };\n\n  const weekendMatcher: DayOfWeek = {\n    dayOfWeek: [0, 6],\n  };\n  const disabledDays = disableWeekends\n    ? [...disableDays, weekendMatcher, ...(minDate ? [{ before: minDate }] : []), ...(maxDate ? [{ after: maxDate }] : [])]\n    : [...disableDays, ...(minDate ? [{ before: minDate }] : []), ...(maxDate ? [{ after: maxDate }] : [])];\n\n  const inputWrapperRef = useRef<HTMLDivElement>(null);\n  const inputContainerRef = useRef<HTMLDivElement>(null);\n  const datepickerWrapperRef = useRef<HTMLDivElement>(null);\n  const { refObject } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n  const isTyping = useRef<boolean>(false);\n\n  /* eslint-disable @typescript-eslint/no-explicit-any */\n  useOutsideEvent(\n    [inputContainerRef, datepickerWrapperRef],\n    (e: any) => {\n      if (\n        inputContainerRef.current &&\n        datepickerWrapperRef.current &&\n        !e?.composedPath().includes(inputContainerRef.current) &&\n        !e?.composedPath().includes(datepickerWrapperRef.current)\n      ) {\n        setDatePickerOpen(false);\n      }\n    },\n    ['mousedown', 'focusin', 'blur']\n  );\n  /* eslint-enable @typescript-eslint/no-explicit-any */\n\n  useEffect(() => {\n    if (isValid(dateValue)) {\n      setInputValue(dateValue ? format(dateValue, dateFormat) : '');\n      setDateState(dateValue);\n      setMonth(dateValue);\n    } else {\n      setInputValue('');\n      setDateState(undefined);\n      setMonth(undefined);\n    }\n  }, [dateValue, dateFormat]);\n\n  useEffect(() => {\n    if (returnInputFocus && refObject.current) {\n      refObject.current.focus();\n    }\n  }, [returnInputFocus]);\n\n  const handleEscapeKeyDown = (): void => {\n    if (refObject?.current) refObject.current.focus();\n    setDatePickerOpen(false);\n  };\n\n  useKeyboardEvent(datepickerWrapperRef, handleEscapeKeyDown, [KeyboardEventKey.Escape]);\n  useKeyboardEvent(inputWrapperRef, handleEscapeKeyDown, [KeyboardEventKey.Escape]);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>, inputFormat: string): void => {\n    setInputValue(event.currentTarget.value);\n    const newDate = parse(event.currentTarget.value, inputFormat, new Date());\n\n    if (isValid(newDate)) {\n      setDateState(newDate);\n      setMonth(newDate);\n    } else {\n      setDateState(undefined);\n    }\n\n    if (onChange) onChange(event, event.currentTarget.value);\n  };\n\n  const handleInputFocus = (): void => {\n    if (!returnInputFocus) {\n      setDatePickerOpen(true);\n    } else {\n      setReturnInputFocus(false);\n    }\n  };\n\n  /* eslint-disable @typescript-eslint/no-unused-vars */\n  const handleSingleDatePickerSelect: PropsSingle['onSelect'] = (\n    date: Date | undefined,\n    _selectedDay: Date,\n    _activeModifiers: Modifiers,\n    e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>\n  ): void => {\n    setReturnInputFocus(true);\n\n    if (!date) {\n      setDatePickerOpen(false);\n      return;\n    }\n\n    setDateState(date);\n\n    if (refObject.current) {\n      setInputValue(format(date, dateFormat));\n      setDatePickerOpen(false);\n    }\n\n    if (onChange) onChange(e, date);\n\n    triggerSyntheticInputEvents(refObject, format(date, dateFormat), date);\n\n    if (onDatePopupClosed) onDatePopupClosed(date);\n  };\n\n  // We do this to make sure selecting from the DatePickerPopup triggers the onChange events properly, and works with react-hook-form\n  const triggerSyntheticInputEvents = (\n    inputRef: React.RefObject<HTMLInputElement>,\n    value: string,\n    date: Date,\n    _onChange?: (event: React.ChangeEvent<HTMLInputElement>, date: Date) => void\n  ): void => {\n    if (inputRef.current) {\n      inputRef.current.value = value;\n\n      const inputEvent = new Event('change', { bubbles: true });\n\n      // Since the event is synthetic we have to add the target for webcomponents to not throw an error\n      Object.defineProperty(inputEvent, 'target', {\n        value: inputRef.current,\n        writable: false,\n        enumerable: true,\n        configurable: true,\n      });\n\n      Object.defineProperty(inputEvent, 'currentTarget', {\n        value: inputRef.current,\n        writable: false,\n        enumerable: true,\n        configurable: true,\n      });\n\n      inputRef.current.dispatchEvent(inputEvent);\n\n      if (onChange) {\n        onChange(inputEvent as unknown as React.ChangeEvent<HTMLInputElement>, date);\n      }\n    }\n  };\n\n  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement, Element>): void => {\n    // We don't trigger the native onBlur event if the user select via the datepicker and the onDatePopupClosed callback is used (usually to trigger validation manually)\n    if (!datePickerOpen && (typeof onDatePopupClosed === 'undefined' || isTyping.current)) {\n      if (onBlur) onBlur(e);\n    }\n\n    isTyping.current = false;\n  };\n\n  const handleButtonClick = (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<unknown> | React.KeyboardEvent<HTMLUListElement> | null | undefined\n  ): void => {\n    e?.stopPropagation();\n    setDatePickerOpen(!datePickerOpen);\n  };\n\n  // This differentiates between typing in the input field and selecting a date from the datepicker, especially on native mobile date fields\n  useEffect(() => {\n    const handleKeyDown = (e: KeyboardEvent): void => {\n      if (!['Escape', 'Enter', 'Tab'].includes(e.key)) {\n        isTyping.current = true;\n        setDatePickerOpen(false);\n      }\n    };\n\n    const inputElement = refObject.current;\n    if (inputElement) {\n      inputElement.addEventListener('keydown', handleKeyDown);\n    }\n\n    return (): void => {\n      if (inputElement) {\n        inputElement.removeEventListener('keydown', handleKeyDown);\n      }\n    };\n  }, [refObject]);\n\n  const handleMobileInputChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    handleInputChange(e, 'yyyy-MM-dd');\n\n    if (!isTyping.current) {\n      if (onDatePopupClosed) onDatePopupClosed(dateState);\n    }\n  };\n\n  const renderMobile = (\n    <Input\n      disabled={disabled}\n      error={error}\n      errorText={errorText}\n      errorTextId={errorTextId}\n      inputId={inputId}\n      label={label}\n      max={maxDate ? format(maxDate, 'yyyy-MM-dd') : ''}\n      min={minDate ? format(minDate, 'yyyy-MM-dd') : ''}\n      type=\"date\"\n      ref={mergedRefs}\n      value={dateState ? format(dateState, 'yyyy-MM-dd') : ''}\n      width={14}\n      {...rest}\n      onBlur={handleInputBlur}\n      onChange={handleMobileInputChange}\n      autoComplete={autoComplete ? autoComplete : undefined}\n    />\n  );\n\n  const renderDesktop = (\n    <>\n      <div>\n        <Input\n          errorWrapperClassName={errorWrapperClassName}\n          disabled={disabled}\n          error={error}\n          errorText={errorText}\n          errorTextId={errorTextId}\n          inputId={inputId}\n          inputContainerRef={inputContainerRef}\n          inputWrapperRef={inputWrapperRef}\n          label={label}\n          onFocus={handleInputFocus}\n          type=\"text\"\n          ref={mergedRefs}\n          value={inputValue}\n          width={12}\n          {...rest}\n          onBlur={handleInputBlur}\n          onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleInputChange(e, 'yyyy-MM-dd')}\n          rightOfInput={\n            <Button\n              disabled={disabled}\n              ariaLabel={dateButtonAriaLabel ?? 'Velg dato'}\n              onClick={handleButtonClick}\n              tabIndex={datePickerOpen ? -1 : 0}\n              variant={'borderless'}\n              wrapperClassName={styles['date-button']}\n              className={styles['date-button__inner']}\n            >\n              <Icon color={'black'} svgIcon={Calendar} />\n            </Button>\n          }\n          autoComplete={autoComplete ? autoComplete : undefined}\n        />\n      </div>\n      {datePickerOpen && !disabled && (\n        <DatePickerPopup\n          dir={dir}\n          disabled={disabledDays}\n          datepickerWrapperRef={datepickerWrapperRef}\n          footer={footerContent}\n          startMonth={minDate}\n          endMonth={maxDate}\n          inputRef={refObject}\n          locale={locale}\n          month={month}\n          selected={dateState}\n          onSelect={handleSingleDatePickerSelect}\n          onMonthChange={setMonth}\n          variant={variant}\n          zIndex={zIndex}\n          ariaLabels={popupAriaLabels}\n        />\n      )}\n    </>\n  );\n\n  return (\n    <div className={className} data-testid={testId}>\n      {isMobileUA() ? renderMobile : renderDesktop}\n    </div>\n  );\n});\n\nDatePicker.displayName = 'DatePicker';\n\nexport default DatePicker;\n","import React, { useEffect, useState } from 'react';\n\nimport type { ErrorWrapperClassNameProps } from '@helsenorge/designsystem-react/components/ErrorWrapper';\nimport Input from '@helsenorge/designsystem-react/components/Input';\nimport { usePseudoClasses } from '@helsenorge/designsystem-react/hooks/usePseudoClasses';\nimport { isMutableRefObject, mergeRefs } from '@helsenorge/designsystem-react/utils/refs';\n\nimport styles from './styles.module.scss';\n\nexport type TimeUnit = 'hours' | 'minutes';\n\nexport interface DateTimeProps\n  extends\n    ErrorWrapperClassNameProps,\n    Pick<\n      React.InputHTMLAttributes<HTMLInputElement>,\n      'name' | 'aria-describedby' | 'aria-labelledby' | 'onBlur' | 'onChange' | 'disabled' | 'autoComplete'\n    > {\n  /** Default value that is set on the input field */\n  defaultValue?: number;\n  /** Activates Error style for the input */\n  error?: boolean;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** Error text id */\n  errorTextId?: string;\n  /** input id of the checkbox */\n  inputId?: string;\n  /** Label of the input */\n  label?: React.ReactNode;\n  /** Sets the unit of time for the input field */\n  timeUnit: TimeUnit;\n  /** Value that is set on the input field */\n  value?: number;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nconst formatAsTwoDigits = (value: string | number): string => {\n  const stringValue = String(value);\n  return stringValue.length === 1 ? '0' + stringValue : stringValue;\n};\n\nconst isNumericString = (str: string): boolean => {\n  return !str || (/^\\d+$/.test(str) && str.length <= 2);\n};\n\nexport const DateTime = React.forwardRef((props: DateTimeProps, ref: React.Ref<HTMLInputElement>) => {\n  const {\n    error,\n    errorText,\n    errorTextId,\n    errorWrapperClassName,\n    label,\n    onBlur,\n    onChange,\n    timeUnit,\n    testId,\n    inputId,\n    value,\n    autoComplete = 'off',\n    ...rest\n  } = props;\n\n  const [inputValue, setInputValue] = useState<number | string | undefined>(\n    typeof value !== 'undefined' ? formatAsTwoDigits(value) : undefined\n  );\n  const { refObject } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  useEffect(() => {\n    setInputValue(value ? formatAsTwoDigits(value) : undefined);\n  }, [value]);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    const value = event.target.value;\n\n    if (isNumericString(value)) {\n      setInputValue(value);\n      if (onChange) onChange(event);\n    }\n  };\n\n  const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\n    const formattedValue = formatAsTwoDigits(event.target.value);\n    setInputValue(formattedValue);\n    if (onChange) onChange(event);\n    if (onBlur) onBlur(event);\n  };\n\n  /** Firefox stopper ikke vanlige characters fra å skrives til input type number - derfor håndterer vi det selv her */\n  const handleInputOnKeyDown = (event: React.KeyboardEvent): void => {\n    const validChars = /[0-9]/;\n    const allowedKeys = ['Backspace', ' ', 'Enter', 'Tab', 'ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];\n    if (!validChars.test(event.key) && !allowedKeys.includes(event.key)) {\n      event.preventDefault();\n    }\n  };\n\n  const renderTimeSeparator = (): React.ReactNode => {\n    return timeUnit === 'hours' && <span className={styles['time-separator']}>{':'}</span>;\n  };\n\n  return (\n    <div data-testid={testId}>\n      <Input\n        inputId={inputId}\n        error={error}\n        errorText={errorText}\n        errorTextId={errorTextId}\n        errorWrapperClassName={errorWrapperClassName}\n        label={label}\n        max={timeUnit === 'hours' ? 23 : 59}\n        min={0}\n        type=\"number\"\n        ref={mergedRefs}\n        value={inputValue}\n        width={5}\n        defaultValue={typeof props.defaultValue !== 'undefined' ? formatAsTwoDigits(props.defaultValue) : undefined}\n        {...rest}\n        onChange={handleInputChange}\n        onBlur={handleInputBlur}\n        rightOfInput={renderTimeSeparator()}\n        onKeyDown={handleInputOnKeyDown}\n        autoComplete={autoComplete ? autoComplete : undefined}\n      />\n    </div>\n  );\n});\n\nDateTime.displayName = 'DateTime';\n\nexport default DateTime;\n","import React, { useId } from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorWrapper, { ErrorWrapperClassNameProps } from '@helsenorge/designsystem-react/components/ErrorWrapper';\nimport { isComponent } from '@helsenorge/designsystem-react/utils/component';\n\nimport DatePicker, { DatePickerProps } from './DatePicker';\nimport DateTime, { DateTimeProps } from './DateTime';\n\nimport styles from './styles.module.scss';\n\nexport type TimeUnits = 'hours' | 'minutes';\n\ninterface DateTimePickerWrapperProps extends ErrorWrapperClassNameProps {\n  /** Sets the children of the datetimepicker - the DatePicker and DateTime components go here */\n  children?: React.ReactNode;\n  /** Error text to show above the component */\n  errorText?: string;\n  /** text placed in the legend tag of the fieldset */\n  legend?: string;\n  /** Sets the data-testid attribute. */\n  testId?: string;\n}\n\nexport const DateTimePickerWrapper = React.forwardRef((props: DateTimePickerWrapperProps, ref: React.ForwardedRef<HTMLDivElement>) => {\n  const { children, errorWrapperClassName, errorText, legend, testId } = props;\n  const errorTextId = useId();\n\n  const mapDateComponents = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<DatePickerProps>(child, DatePicker)) {\n      return React.cloneElement(child, {\n        className: classNames(styles['date-time-picker-wrapper__date-picker']),\n        error: !!errorText,\n        errorTextId,\n      });\n    } else if (isComponent<DateTimeProps>(child, DateTime)) {\n      return React.cloneElement(child, {\n        error: !!errorText,\n        errorTextId,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <div ref={ref} tabIndex={-1}>\n      <ErrorWrapper className={errorWrapperClassName} errorText={errorText} errorTextId={errorTextId}>\n        {props.legend ? (\n          <fieldset className={styles['date-time-picker-wrapper']} data-testid={testId}>\n            {props.legend && <legend className={styles['date-time-picker-wrapper__legend']}>{legend}</legend>}\n            {React.Children.map(children, mapDateComponents)}\n          </fieldset>\n        ) : (\n          <div className={styles['date-time-picker-wrapper']}>{React.Children.map(children, mapDateComponents)}</div>\n        )}\n      </ErrorWrapper>\n    </div>\n  );\n});\n\nDateTimePickerWrapper.displayName = 'DateTimePickerWrapper';\n\nexport default DateTimePickerWrapper;\n","import { isWithinInterval, isAfter, isBefore, isSameDay, parse, isValid } from 'date-fns';\n\nexport const parseInputDate = (dateString: string): Date | null => {\n  const possibleFormats = ['yyyy-MM-dd', 'dd.MM.yyyy'];\n\n  for (const format of possibleFormats) {\n    const parsedDate = parse(dateString, format, new Date());\n    if (isValid(parsedDate)) {\n      return parsedDate;\n    }\n  }\n\n  return null;\n};\n\nexport const isValidDate = (dateString: string): boolean => {\n  const date = new Date(dateString);\n  return date instanceof Date && !isNaN(date.getTime());\n};\n\n/** react-hook-form fromDate and toDate validation */\nexport const validateMinMaxDate = (\n  date: string,\n  outsideRangeErrorMessage: string,\n  invalidFormatErrorMessage?: string,\n  minDate?: Date,\n  maxDate?: Date\n): string | true => {\n  const formattedDate = parseInputDate(date);\n  const hasMinDate = typeof minDate !== 'undefined';\n  const hasMaxDate = typeof maxDate !== 'undefined';\n  if (!formattedDate || (hasMinDate && !isValid(minDate)) || (hasMaxDate && !isValid(maxDate))) {\n    return invalidFormatErrorMessage || 'Invalid date format';\n  }\n\n  if (hasMinDate && !hasMaxDate && (isSameDay(formattedDate, minDate) || isAfter(formattedDate, minDate))) return true;\n  else if (hasMaxDate && !hasMinDate && (isSameDay(formattedDate, maxDate) || isBefore(formattedDate, maxDate))) return true;\n  else if (\n    hasMinDate &&\n    hasMaxDate &&\n    (isSameDay(formattedDate, minDate) ||\n      isSameDay(formattedDate, maxDate) ||\n      isWithinInterval(formattedDate, { start: minDate, end: maxDate }))\n  ) {\n    return true;\n  }\n\n  return outsideRangeErrorMessage;\n};\n\n/** react-hook-form fromDate and toDate validation */\nexport const validateDisabledDates = (\n  date: string,\n  disabledDates: Date[],\n  isDisabledErrorMessage: string,\n  invalidFormatErrorMessage?: string\n): string | true => {\n  const formattedDate = parseInputDate(date);\n  if (!formattedDate) {\n    return invalidFormatErrorMessage || 'Invalid date format';\n  }\n  if (!disabledDates.some(d => isSameDay(d, formattedDate))) {\n    return true;\n  }\n\n  return isDisabledErrorMessage;\n};\n\n/** react-hook-form fromTime and toTime validation */\nexport const validateMinTimeMaxTime = (\n  time: { hour: number; minute: number },\n  errorMessage: string,\n  minTime?: { hour: number; minute: number },\n  maxTime?: { hour: number; minute: number }\n): string | true => {\n  const timeParsed = parse((time.hour + ':' + time.minute).toString(), 'HH:mm', new Date());\n  const minTimeParsed = parse((minTime?.hour + ':' + minTime?.minute).toString(), 'HH:mm', new Date());\n  const maxTimeParsed = parse((maxTime?.hour + ':' + maxTime?.minute).toString(), 'HH:mm', new Date());\n\n  if ((typeof minTime === 'undefined' || timeParsed >= minTimeParsed) && (typeof maxTime === 'undefined' || timeParsed <= maxTimeParsed)) {\n    return true;\n  }\n\n  return errorMessage;\n};\n","import { DatePicker } from './DatePicker';\nexport { DateTime } from './DateTime';\nexport { DateTimePickerWrapper } from './DateTimePickerWrapper';\nexport * from './validate-utils';\nexport * from './DatePicker';\nexport default DatePicker;\n"],"mappings":"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"}

package/lib/components/Unsafe_DatePicker/DatePicker.module.scss

@@ -27,6 +27,22 @@
     }
   }
 
+  &--time {
+    width: 4.5rem;
+
+    @supports not (field-sizing: content) {
+      width: 5.5rem;
+    }
+
+    &--with-clear-button {
+      width: 6rem;
+
+      @supports not (field-sizing: content) {
+        width: 7rem;
+      }
+    }
+  }
+
   &__inputs {
     display: inline-flex;
     justify-content: flex-start;

package/lib/components/Unsafe_DatePicker/DatePicker.module.scss.d.ts

@@ -7,6 +7,8 @@ export type Styles = {
   'date-picker': string;
   'date-picker__inputs': string;
   'date-picker--clear-button-focused': string;
+  'date-picker--time': string;
+  'date-picker--time--with-clear-button': string;
   'date-picker--with-clear-button': string;
   'date-segment': string;
   'date-segment--error': string;

package/lib/components/Unsafe_DatePicker/TimeInput/TimeInputInternal.d.ts

@@ -0,0 +1,23 @@
+import { HNDesignsystemUnsafe_DatePicker } from '../../../resources/Resources';
+export interface TimeInputInternalProps {
+    /** Currently given date, in format hh:mm */
+    value?: string;
+    /** Callback for change in date */
+    onChange?: (value: string) => void;
+    /** Callback for blur on input field */
+    onBlur?: (value: string) => void;
+    /** Callback for setting error text when validating */
+    setErrorText?: (text: string) => void;
+    /** Wether or not to shw a clear button when there is content in the input */
+    withClearButton?: boolean;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemUnsafe_DatePicker>;
+    /** Sets aria-describedby on the input, for connecting labels */
+    ['aria-describedby']?: string;
+    /** Sets aria-labelledby on the input, for connecting labels */
+    ['aria-labelledby']?: string;
+    /** Id of the input field, for connecting labels */
+    id?: string;
+}
+declare const TimeInputInternal: ({ value, onChange, onBlur, id, setErrorText, resources, withClearButton, ["aria-describedby"]: ariaDescribedBy, ["aria-labelledby"]: ariaLabelledBy, }: TimeInputInternalProps) => React.ReactNode;
+export default TimeInputInternal;

package/lib/components/Unsafe_DatePicker/TimeInput/Unsafe_TimeInput.d.ts

@@ -0,0 +1,25 @@
+import { HNDesignsystemDatePicker } from '../../../resources/Resources';
+export interface Unsafe_TimeInputProps {
+    /** Currently given time, in format hh:mm */
+    value?: string;
+    /** Label of the input */
+    label?: React.ReactNode;
+    /** Id of the input field, for connecting labels */
+    id?: string;
+    /** Callback for change in date */
+    onChange?: (value: string) => void;
+    /** Callback for blur on input field */
+    onBlur?: (value: string) => void;
+    /** Callback for setting error text when validating */
+    errorText?: string;
+    /** Wether or not to shw a clear button when there is content in the input */
+    withClearButton?: boolean;
+    /** Resources for component */
+    resources?: Partial<HNDesignsystemDatePicker>;
+    /** Sets aria-describedby on the input, for connecting labels */
+    ['aria-describedby']?: string;
+    /** Sets aria-labelledby on the input, for connecting labels */
+    ['aria-labelledby']?: string;
+}
+declare const Unsafe_TimeInput: ({ value, onChange, onBlur, errorText, id, label, resources, withClearButton, ["aria-describedby"]: ariaDescribedBy, ["aria-labelledby"]: ariaLabelledBy, }: Unsafe_TimeInputProps) => React.ReactNode;
+export default Unsafe_TimeInput;

package/lib/components/Unsafe_DatePicker/Unsafe_DateAndTime.d.ts

@@ -0,0 +1,16 @@
+import { Unsafe_TimeInputProps } from './TimeInput/Unsafe_TimeInput';
+import { Unsafe_DatePickerProps } from './Unsafe_DatePicker';
+export interface Unsafe_DateAndTimeProps {
+    /** Currently given date */
+    value?: Date;
+    /** Callback for change on the given date */
+    onChange?: (value: Date | undefined) => void;
+    /** Legend for labelling both fields */
+    legend?: React.ReactNode;
+    /** Errortext for validation errors */
+    errorText?: string;
+    datepickerProps?: Unsafe_DatePickerProps;
+    timeInputProps?: Unsafe_TimeInputProps;
+}
+declare const Unsafe_DateAndTime: ({ value, onChange, legend, errorText, datepickerProps, timeInputProps, }: Unsafe_DateAndTimeProps) => React.ReactNode;
+export default Unsafe_DateAndTime;

package/lib/components/Unsafe_DatePicker/Unsafe_DateAndTime.module.scss

@@ -0,0 +1,18 @@
+.date-and-time {
+  &--fieldset {
+    //   overstyr fieldset styling fra browser
+    all: unset;
+
+    // styling med legend
+    // @todo: trengs dette?
+    display: flex;
+    flex-flow: column;
+    gap: 1.5rem;
+  }
+
+  &__fields {
+    display: flex;
+    flex-direction: row;
+    gap: 0.75rem;
+  }
+}

package/lib/components/Unsafe_DatePicker/Unsafe_DateAndTime.module.scss.d.ts

@@ -0,0 +1,10 @@
+export type Styles = {
+  'date-and-time__fields': string;
+  'date-and-time--fieldset': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/lib/components/Unsafe_DatePicker/index.d.ts

@@ -1,9 +1,11 @@
 import { Modifiers, Matcher } from 'react-day-picker';
 import { default as BaseDayPicker, BaseDayPickerProps } from './BaseDayPicker/BaseDayPicker';
+import { default as Unsafe_TimeInput } from './TimeInput/Unsafe_TimeInput';
+import { default as Unsafe_DateAndTime } from './Unsafe_DateAndTime';
 import { default as Unsafe_DatePicker } from './Unsafe_DatePicker';
 import { default as Unsafe_ISODatePicker } from './Unsafe_ISODatePicker';
 export { BaseDayPicker as Unsafe_DatePickerStandalone };
 export type { Modifiers, Matcher };
 export type { BaseDayPickerProps as Unsafe_DatePickerStandaloneProps };
-export { Unsafe_DatePicker, Unsafe_ISODatePicker };
+export { Unsafe_DatePicker, Unsafe_ISODatePicker, Unsafe_TimeInput, Unsafe_DateAndTime };
 export default Unsafe_DatePicker;