@helsenorge/datepicker 5.15.0

package/__mocks__/styleMock.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=styleMock.d.ts.map

package/__mocks__/styleMock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleMock.d.ts","sourceRoot":"","sources":["../../src/__mocks__/styleMock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC"}

package/__mocks__/styleMock.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=styleMock.js.map

package/__mocks__/styleMock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styleMock.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { DayPickerSingleProps } from 'react-day-picker';
+export type DateFormat = 'dd.MM.yyyy';
+export interface DatePickerProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'aria-describedby' | 'onBlur'>, Pick<DayPickerSingleProps, 'dir' | 'initialFocus'> {
+    /** Adds custom classes to the element. */
+    className?: string;
+    /** Sets aria-label on the button that opens the datepicker dialogue */
+    dateButtonAriaLabel?: string;
+    /** Sets the format of the date - only applies for desktop use. Native mobile date fields base their formats on the device */
+    dateFormat?: DateFormat;
+    /** Sets the date of the component */
+    dateValue?: Date;
+    /** Sets the current month */
+    defaultMonth?: Date;
+    /** Disables the days in the datepicker */
+    disableDays?: Date[];
+    /** Disables weekends in the datepicker */
+    disableWeekends?: boolean;
+    /** Activates Error style for the input */
+    error?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** Content to be rendered in the footer of the datepicker popup */
+    footerContent?: React.ReactNode;
+    /** Label of the input */
+    label?: React.ReactNode;
+    /** Sets the locale of the datepicker */
+    locale?: Locale;
+    /** Maximum date allowed to be selected */
+    maxDate?: Date;
+    /** Minimum date allowed to be selected */
+    minDate?: Date;
+    /** onChange callback trigges ved endring i valgt dato */
+    onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>, date: Date | string | undefined) => void;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLInputElement>>;
+export default DatePicker;
+//# sourceMappingURL=DatePicker.d.ts.map

package/components/DatePicker/DatePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,OAAO,EAA8B,oBAAoB,EAA4B,MAAM,kBAAkB,CAAC;AAiB9G,MAAM,MAAM,UAAU,GAAG,YAAY,CAAC;AAEtC,MAAM,WAAW,eACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,kBAAkB,GAAG,QAAQ,CAAC,EAC/F,IAAI,CAAC,oBAAoB,EAAE,KAAK,GAAG,cAAc,CAAC;IACpD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,uEAAuE;IACvE,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,6HAA6H;IAC7H,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,qCAAqC;IACrC,SAAS,CAAC,EAAE,IAAI,CAAC;IACjB,6BAA6B;IAC7B,YAAY,CAAC,EAAE,IAAI,CAAC;IACpB,0CAA0C;IAC1C,WAAW,CAAC,EAAE,IAAI,EAAE,CAAC;IACrB,0CAA0C;IAC1C,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,0CAA0C;IAC1C,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,0CAA0C;IAC1C,OAAO,CAAC,EAAE,IAAI,CAAC;IACf,yDAAyD;IACzD,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG,KAAK,CAAC,UAAU,CAAC,OAAO,EAAE,UAAU,CAAC,EAAE,IAAI,EAAE,IAAI,GAAG,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACzI,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,UAAU,0FAqMrB,CAAC;AAIH,eAAe,UAAU,CAAC"}

package/components/DatePicker/DatePickerPopup.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { DayPickerSingleProps } from 'react-day-picker';
+interface DatePickerPopupProps extends Pick<DayPickerSingleProps, 'dir' | 'disabled' | 'footer' | 'fromDate' | 'initialFocus' | 'locale' | 'month' | 'selected' | 'onSelect' | 'onMonthChange' | 'toDate'> {
+    datepickerWrapperRef: React.RefObject<HTMLDivElement>;
+    inputRef: React.RefObject<HTMLInputElement>;
+    testId?: string;
+}
+declare const DatePickerPopup: React.FC<DatePickerPopupProps>;
+export default DatePickerPopup;
+//# sourceMappingURL=DatePickerPopup.d.ts.map

package/components/DatePicker/DatePickerPopup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerPopup.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DatePickerPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAa,oBAAoB,EAAE,MAAM,kBAAkB,CAAC;AAcnE,UAAU,oBACR,SAAQ,IAAI,CACV,oBAAoB,EACpB,KAAK,GAAG,UAAU,GAAG,QAAQ,GAAG,UAAU,GAAG,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,UAAU,GAAG,eAAe,GAAG,QAAQ,CACxI;IACD,oBAAoB,EAAE,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;IACtD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,QAAA,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CAqDnD,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/components/DatePicker/DateTime.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+export type TimeUnit = 'hours' | 'minutes';
+export interface DateTimeProps extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'aria-describedby' | 'aria-labelledby' | 'onChange' | 'disabled'> {
+    defaultValue?: number;
+    /** Activates Error style for the input */
+    error?: boolean;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** Label of the input */
+    label?: React.ReactNode;
+    /** Sets the unit of time for the input field */
+    timeUnit: TimeUnit;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const DateTime: React.ForwardRefExoticComponent<DateTimeProps & React.RefAttributes<HTMLInputElement>>;
+export default DateTime;
+//# sourceMappingURL=DateTime.d.ts.map

package/components/DatePicker/DateTime.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTime.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DateTime.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAE3C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,GAAG,kBAAkB,GAAG,iBAAiB,GAAG,UAAU,GAAG,UAAU,CAAC;IACpI,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,0CAA0C;IAC1C,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yBAAyB;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,gDAAgD;IAChD,QAAQ,EAAE,QAAQ,CAAC;IACnB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAWD,eAAO,MAAM,QAAQ,wFAyDnB,CAAC;AAIH,eAAe,QAAQ,CAAC"}

package/components/DatePicker/DateTimePickerWrapper.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+export type TimeUnits = 'hours' | 'minutes';
+interface DateTimePickerWrapperProps {
+    /** Sets the children of the datetimepicker - the DatePicker and DateTime components go here */
+    children?: React.ReactNode;
+    /** Error text to show above the component */
+    errorText?: string;
+    /** text placed in the legend tag of the fieldset */
+    legend?: string;
+    /** Sets the data-testid attribute. */
+    testId?: string;
+}
+export declare const DateTimePickerWrapper: React.ForwardRefExoticComponent<DateTimePickerWrapperProps & React.RefAttributes<HTMLDivElement>>;
+export default DateTimePickerWrapper;
+//# sourceMappingURL=DateTimePickerWrapper.d.ts.map

package/components/DatePicker/DateTimePickerWrapper.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimePickerWrapper.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/DateTimePickerWrapper.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,SAAS,CAAC;AAE5C,UAAU,0BAA0B;IAClC,+FAA+F;IAC/F,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,sCAAsC;IACtC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,qBAAqB,mGA+BhC,CAAC;AAIH,eAAe,qBAAqB,CAAC"}

package/components/DatePicker/index.d.ts

@@ -0,0 +1,7 @@
+import { DatePicker } from './DatePicker';
+export { DateTime } from './DateTime';
+export { DateTimePickerWrapper } from './DateTimePickerWrapper';
+export * from './validate-utils';
+export * from './DatePicker';
+export default DatePicker;
+//# sourceMappingURL=index.d.ts.map

package/components/DatePicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAChE,cAAc,kBAAkB,CAAC;AACjC,cAAc,cAAc,CAAC;AAC7B,eAAe,UAAU,CAAC"}

package/components/DatePicker/index.js

@@ -0,0 +1,2 @@
+import n,{useRef as $,useState as R}from"react";import{format as A,isValid as _,parse as W,isAfter as ke,isBefore as Ie,isWithinInterval as Re,isSameDay as Ce}from"date-fns";import{nb as Be}from"date-fns/locale";import Me from"@helsenorge/designsystem-react/components/Button";import Ne from"@helsenorge/designsystem-react/components/Icons";import Ae from"@helsenorge/designsystem-react/components/Icons/Calendar";import j from"@helsenorge/designsystem-react/components/Input";import{KeyboardEventKey as ee}from"@helsenorge/designsystem-react/constants";import{useKeyboardEvent as te}from"@helsenorge/designsystem-react/hooks/useKeyboardEvent";import{useOutsideEvent as We}from"@helsenorge/designsystem-react/hooks/useOutsideEvent";import{usePseudoClasses as se}from"@helsenorge/designsystem-react/hooks/usePseudoClasses";import{isMobileUA as _e}from"@helsenorge/designsystem-react/utils/mobile";import{isMutableRefObject as ie,mergeRefs as ce}from"@helsenorge/designsystem-react/utils/refs";import S from"classnames";import{DayPicker as Ve}from"react-day-picker";import xe from"react-day-picker/dist/style.module.css?used";import{PopOverVariant as h}from"@helsenorge/designsystem-react/components/PopOver";import{useFocusTrap as Oe}from"@helsenorge/designsystem-react/hooks/useFocusTrap";import{useInterval as Fe}from"@helsenorge/designsystem-react/hooks/useInterval";import{useIsVisible as Le}from"@helsenorge/designsystem-react/hooks/useIsVisible";import{useLayoutEvent as He}from"@helsenorge/designsystem-react/hooks/useLayoutEvent";import{useSize as Te}from"@helsenorge/designsystem-react/hooks/useSize";import l from"./styles.module.scss";import Ke from"@helsenorge/designsystem-react/components/ErrorWrapper";import{isComponent as re}from"@helsenorge/designsystem-react/utils/component";const Xe=329,E=12,F=26,le=20,Z=9,oe=12,ue=(e,t)=>e.top>t.height+F?h.positionabove:h.positionbelow,Ue=e=>e.left+e.width/4,Ge=e=>document.documentElement.clientWidth-e.right+e.width/4,$e=(e,t)=>e.left+t.width,je=e=>e.left>E,Se=(e,t)=>$e(e,t)<document.documentElement.clientWidth-E,Ze=(e,t)=>Se(e,t)?je(e)?"floating":"left":"right",U=(e,t)=>e.top-F-t.height,G=e=>e.bottom+F,qe=()=>document.documentElement.clientWidth-E*2,Je=()=>document.documentElement.clientWidth>Xe+E*2,ne=e=>e.top-F-Z+5,Qe=e=>Ue(e)-le/2,Ye=e=>Ge(e)-le/2,ze=(e,t)=>{const o=Ze(e,t),r=ue(e,t);return o==="left"?r===h.positionabove?"leftabove":"leftbelow":o==="right"?r===h.positionabove?"rightabove":"rightbelow":r===h.positionabove?"floatingabove":"floatingbelow"},et=(e,t)=>{const o=ze(e,t),r=Je()?void 0:qe();return o==="leftabove"?{left:E,top:U(e,t),width:r}:o==="leftbelow"?{left:E,top:G(e),width:r}:o==="rightabove"?{right:E,top:U(e,t),width:r}:o==="rightbelow"?{right:E,top:G(e),width:r}:o==="floatingbelow"?{left:e.left,top:G(e),width:r}:{left:e.left,top:U(e,t),width:r}},tt=(e,t,o)=>{const r=Qe(t),a=Ye(t),s=e.left+oe,c=e.right+oe;return e.right?o===h.positionabove?{right:a>c?a:c,top:ne(t)}:{right:a>c?a:c,top:t.bottom+Z}:o===h.positionabove?{left:r>s?r:s,top:ne(t)}:{left:r>s?r:s,top:t.bottom+Z}},rt=e=>{const{datepickerWrapperRef:t,footer:o,inputRef:r,testId:a,...s}=e,c=$(null),[u,C]=R(),b=Te(t),P=Le(r,0);Oe(t,!0);const p=()=>{var d;C((d=r.current)==null?void 0:d.getBoundingClientRect())};n.useEffect(()=>{p()},[]),Fe(p,500),He(p,["scroll","resize"],10);const B=S(l["datepicker-popup-container"],{[l["datepicker-popup-container--visible"]]:P}),f=u&&b&&ue(u,b),M=S(l["datepicker-popup-arrow"],{[l["datepicker-popup-arrow--visible"]]:P,[l["datepicker-popup-arrow--over"]]:f===h.positionbelow,[l["datepicker-popup-arrow--under"]]:f===h.positionabove}),m=u&&b&&et(u,b),v=m&&u&&f&&tt(m,u,f),y={...xe,...l};return n.createElement(n.Fragment,null,n.createElement("div",{className:B,"data-testid":a,ref:t,style:m},n.createElement(Ve,{captionLayout:"dropdown-buttons",classNames:y,mode:"single",modifiersClassNames:{today:l["day--today"],selected:l.day_selected,disabled:l["day--disabled"]},footer:n.createElement("span",{className:l["footer-wrapper"]},o),fixedWeeks:!0,...s})),n.createElement("div",{ref:c,className:M,style:v}))},ot=rt,de=n.forwardRef((e,t)=>{const{className:o,dateButtonAriaLabel:r,dateFormat:a="dd.MM.yyyy",dateValue:s,defaultMonth:c,dir:u,disableDays:C=[],disableWeekends:b,error:P,errorText:p,footerContent:B,label:f,locale:M=Be,maxDate:m,minDate:v,onBlur:y,onChange:d,testId:w,...V}=e,[L,x]=R(s),[q,H]=R(L?A(L,a):""),[me,T]=R(c),[K,D]=R(!1),[X,J]=R(!1),ge={dayOfWeek:[0,6]},he=b?[...C,ge]:C,N=$(null),O=$(null),{refObject:g}=se(ie(t)?t:null),Q=ce([t,g]);We(O,i=>{var I;const k=i.target;(I=N==null?void 0:N.current)!=null&&I.contains(k)||D(!1)}),n.useEffect(()=>{H(s?A(s,a):""),_(s)&&(x(s),T(s))},[s]),n.useEffect(()=>{X&&g.current&&g.current.focus()},[X]);const Y=()=>{g!=null&&g.current&&g.current.focus(),D(!1)};te(O,Y,[ee.Escape]),te(N,Y,[ee.Escape]);const z=(i,k)=>{H(i.currentTarget.value);const I=W(i.currentTarget.value,k,new Date);_(I)?(x(I),T(I)):x(void 0),d&&d(i,i.currentTarget.value)},be=()=>{X?J(!1):D(!0)},ye=(i,k,I,De)=>{if(J(!0),!i){D(!1);return}x(i),g.current&&(H(A(i,a)),D(!1)),d&&d(De,i)},we=i=>{var k;(k=O.current)!=null&&k.contains(i.relatedTarget)||D(!1),y&&y(i)},Ee=i=>{i==null||i.stopPropagation(),D(!K)},Pe=n.createElement(j,{error:P,errorText:p,label:f,max:m?A(m,"yyyy-MM-dd"):"",min:v?A(v,"yyyy-MM-dd"):"",type:"date",ref:Q,value:q,width:14,...V,onBlur:i=>{y&&y(i)},onChange:i=>z(i,"yyyy-MM-dd")}),ve=n.createElement(n.Fragment,null,n.createElement("div",{className:l["date-input-wrapper"]},n.createElement(j,{error:P,errorText:p,inputWrapperRef:N,label:f,onFocus:be,type:"text",ref:Q,value:q,width:12,...V,onBlur:we,onChange:i=>z(i,a),rightOfInput:n.createElement(Me,{ariaLabel:r??"Velg dato",onClick:Ee,tabIndex:K?-1:0,variant:"borderless",wrapperClassName:l["date-button"]},n.createElement(Ne,{color:"black",svgIcon:Ae}))})),K&&n.createElement(ot,{dir:u,disabled:he,datepickerWrapperRef:O,footer:B,fromDate:v,toDate:m,inputRef:g,locale:M,month:me,selected:L,onSelect:ye,onMonthChange:T}));return n.createElement("div",{className:o,"data-testid":w},_e()?Pe:ve)});de.displayName="DatePicker";const ae=e=>{const t=String(e);return t.length===1?"0"+t:t},nt=e=>!e||/^\d+$/.test(e)&&e.length<=2,pe=n.forwardRef((e,t)=>{const{defaultValue:o,error:r,errorText:a,label:s,onChange:c,timeUnit:u,testId:C,...b}=e,[P,p]=R(typeof o<"u"?ae(o):""),{refObject:B}=se(ie(t)?t:null),f=ce([t,B]),M=d=>{const w=d.target.value;nt(w)&&(p(w),c&&c(d))},m=d=>{const w=ae(d.target.value);p(w),c&&c(d)},v=d=>{const w=/[0-9]/,V=["Backspace"," ","Enter","Tab","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"];!w.test(d.key)&&!V.includes(d.key)&&d.preventDefault()},y=()=>u==="hours"&&n.createElement("span",{className:l["time-separator"]},":");return n.createElement("div",{"data-testid":C},n.createElement(j,{error:r,errorText:a,label:s,max:u==="hours"?23:59,min:0,type:"number",ref:f,value:P,width:5,...b,onChange:M,onBlur:m,rightOfInput:y(),onKeyDown:v}))});pe.displayName="DateTime";const at=n.forwardRef((e,t)=>{const{children:o,errorText:r,legend:a,testId:s}=e,c=u=>re(u,de)?n.cloneElement(u,{className:S(l["date-time-picker-wrapper__date-picker"]),error:!!r}):re(u,pe)?n.cloneElement(u,{error:!!r}):u;return n.createElement("div",{ref:t,tabIndex:-1},n.createElement(Ke,{errorText:r},e.legend?n.createElement("fieldset",{className:l["date-time-picker-wrapper"],"data-testid":s},e.legend&&n.createElement("legend",{className:l["date-time-picker-wrapper__legend"]},a),n.Children.map(o,c)):n.createElement("div",{className:l["date-time-picker-wrapper"]},n.Children.map(o,c))))});at.displayName="DateTimePickerWrapper";const fe=e=>{const t=["yyyy-MM-dd","dd.MM.yyyy"];for(const o of t){const r=W(e,o,new Date);if(_(r))return r}return null},At=e=>{const t=new Date(e);return t instanceof Date&&!isNaN(t.getTime())},Wt=(e,t,o,r)=>{const a=fe(e),s=typeof o<"u",c=typeof r<"u";return!a||s&&!_(o)||c&&!_(r)?"Invalid date format":s&&!c&&ke(a,o)||c&&!s&&Ie(a,r)||s&&c&&Re(a,{start:o,end:r})?!0:t},_t=(e,t,o)=>{const r=fe(e);return r?t.some(a=>Ce(a,r))?o:!0:"Invalid date format"},Vt=(e,t,o,r)=>{const a=W((e.hour+":"+e.minute).toString(),"HH:mm",new Date),s=W(((o==null?void 0:o.hour)+":"+(o==null?void 0:o.minute)).toString(),"HH:mm",new Date),c=W(((r==null?void 0:r.hour)+":"+(r==null?void 0:r.minute)).toString(),"HH:mm",new Date);return(typeof o>"u"||a>=s)&&(typeof r>"u"||a<=c)?!0:t};export{de as DatePicker,pe as DateTime,at as DateTimePickerWrapper,de as default,At as isValidDate,fe as parseInputDate,_t as validateDisabledDates,Wt as validateMinMaxDate,Vt as validateMinTimeMaxTime};
+//# sourceMappingURL=index.js.map

package/components/DatePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/DatePicker/position-utils.ts","../../../src/components/DatePicker/DatePickerPopup.tsx","../../../src/components/DatePicker/DatePicker.tsx","../../../src/components/DatePicker/DateTime.tsx","../../../src/components/DatePicker/DateTimePickerWrapper.tsx","../../../src/components/DatePicker/validate-utils.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/**\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 = (controllerSize: DOMRect, bubbleSize: DOMRect): keyof typeof PopOverVariant => {\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): boolean => {\n  return controllerSize.left > 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)) {\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): BubblePosition => {\n  const horizontalPosition = getHorizontalPosition(controllerSize, bubbleSize);\n  const verticalPosition = getVerticalPosition(controllerSize, bubbleSize);\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): CSSProperties => {\n  const bubblePosition = getBubblePosition(controllerSize, bubbleSize);\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: controllerSize.left, top: getBubbleBelowPx(controllerSize), width: bubbleWidth };\n  }\n\n  return { left: controllerSize.left, top: getBubbleAbovePx(controllerSize, bubbleSize), width: bubbleWidth };\n};\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 { DayPicker, DayPickerSingleProps } from 'react-day-picker';\nimport reactdaypickerstyles from 'react-day-picker/dist/style.module.css';\n\nimport { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';\nimport { useFocusTrap } from '@helsenorge/designsystem-react/hooks/useFocusTrap';\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';\n\nimport { getArrowStyle, getBubbleStyle, getVerticalPosition } from './position-utils';\n\nimport styles from './styles.module.scss';\n\ninterface DatePickerPopupProps\n  extends Pick<\n    DayPickerSingleProps,\n    'dir' | 'disabled' | 'footer' | 'fromDate' | 'initialFocus' | 'locale' | 'month' | 'selected' | 'onSelect' | 'onMonthChange' | 'toDate'\n  > {\n  datepickerWrapperRef: React.RefObject<HTMLDivElement>;\n  inputRef: React.RefObject<HTMLInputElement>;\n  testId?: string;\n}\n\nconst DatePickerPopup: React.FC<DatePickerPopupProps> = props => {\n  const { datepickerWrapperRef, footer, inputRef, testId, ...rest } = props;\n  const arrowRef = useRef<HTMLDivElement>(null);\n  const [controllerSize, setControllerSize] = useState<DOMRect>();\n  const bubbleSize = useSize(datepickerWrapperRef);\n  const controllerisVisible = useIsVisible(inputRef, 0);\n  useFocusTrap(datepickerWrapperRef, true);\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);\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);\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}>\n        <DayPicker\n          captionLayout=\"dropdown-buttons\"\n          classNames={datePickerClassNames}\n          mode={'single'}\n          modifiersClassNames={{ today: styles['day--today'], selected: styles['day_selected'], disabled: styles['day--disabled'] }}\n          footer={<span className={styles['footer-wrapper']}>{footer}</span>}\n          fixedWeeks\n          {...rest}\n        />\n      </div>\n      <div ref={arrowRef} className={popupArrowClasses} style={arrowStyle} />\n    </>\n  );\n};\n\nexport default DatePickerPopup;\n","import React, { useState, useRef } from 'react';\n\nimport { format, isValid, parse } from 'date-fns';\nimport { nb } from 'date-fns/locale';\nimport { ActiveModifiers, DayOfWeek, DayPickerSingleProps, SelectSingleEventHandler } from 'react-day-picker';\n\nimport Button from '@helsenorge/designsystem-react/components/Button';\nimport Icon from '@helsenorge/designsystem-react/components/Icons';\nimport Calendar from '@helsenorge/designsystem-react/components/Icons/Calendar';\nimport Input from '@helsenorge/designsystem-react/components/Input';\nimport { KeyboardEventKey } 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 { isMobileUA } from '@helsenorge/designsystem-react/utils/mobile';\nimport { isMutableRefObject, mergeRefs } from '@helsenorge/designsystem-react/utils/refs';\n\nimport DatePickerPopup from './DatePickerPopup';\n\nimport styles from './styles.module.scss';\n\nexport type DateFormat = 'dd.MM.yyyy';\n\nexport interface DatePickerProps\n  extends Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'aria-describedby' | 'onBlur'>,\n    Pick<DayPickerSingleProps, 'dir' | 'initialFocus'> {\n  /** Adds custom classes to the element. */\n  className?: string;\n  /** 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 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  /** 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  /** 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 trigges ved endring i valgt dato */\n  onChange?: (event: React.ChangeEvent<HTMLInputElement> | React.MouseEvent<Element, MouseEvent>, date: Date | string | undefined) => void;\n  /** Sets the data-testid attribute. */\n  testId?: string;\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    disableDays = [],\n    disableWeekends,\n    error,\n    errorText,\n    footerContent,\n    label,\n    locale = nb,\n    maxDate,\n    minDate,\n    onBlur,\n    onChange,\n    testId,\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 weekendMatcher: DayOfWeek = {\n    dayOfWeek: [0, 6],\n  };\n  const disabledDays: (Date | DayOfWeek)[] = disableWeekends ? [...disableDays, weekendMatcher] : disableDays;\n  const inputWrapperRef = 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  useOutsideEvent(datepickerWrapperRef, e => {\n    const targetAsNode = e.target as Node;\n    if (!inputWrapperRef?.current?.contains(targetAsNode)) {\n      setDatePickerOpen(false);\n    }\n  });\n\n  React.useEffect(() => {\n    setInputValue(dateValue ? format(dateValue, dateFormat) : '');\n\n    if (isValid(dateValue)) {\n      setDateState(dateValue);\n      setMonth(dateValue);\n    }\n  }, [dateValue]);\n\n  React.useEffect(() => {\n    if (returnInputFocus && refObject.current) {\n      refObject.current.focus();\n    }\n  }, [returnInputFocus]);\n\n  const handleEscapeKeyDown = (): void => {\n    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    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  const handleSingleDatePickerSelect: SelectSingleEventHandler = (\n    date: Date | undefined,\n    selectedDay: Date,\n    activeModifiers: ActiveModifiers,\n    e: React.MouseEvent<Element, MouseEvent>\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    onChange && onChange(e, date);\n  };\n\n  const handleInputBlur = (e: React.FocusEvent<HTMLInputElement, Element>) => {\n    if (!datepickerWrapperRef.current?.contains(e.relatedTarget as Node)) {\n      setDatePickerOpen(false);\n    }\n    onBlur && onBlur(e);\n  };\n\n  const handleButtonClick = (\n    e?: React.MouseEvent<HTMLElement, MouseEvent> | React.FormEvent<{}> | React.KeyboardEvent<HTMLUListElement> | null | undefined\n  ): void => {\n    e?.stopPropagation();\n    setDatePickerOpen(!datePickerOpen);\n  };\n\n  const renderMobile = (\n    <Input\n      error={error}\n      errorText={errorText}\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={inputValue}\n      width={14}\n      {...rest}\n      onBlur={e => {\n        onBlur && onBlur(e);\n      }}\n      onChange={e => handleInputChange(e, 'yyyy-MM-dd')}\n    />\n  );\n\n  const renderDesktop = (\n    <>\n      <div className={styles['date-input-wrapper']}>\n        <Input\n          error={error}\n          errorText={errorText}\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 => handleInputChange(e, dateFormat)}\n          rightOfInput={\n            <Button\n              ariaLabel={dateButtonAriaLabel ?? 'Velg dato'}\n              onClick={handleButtonClick}\n              tabIndex={datePickerOpen ? -1 : 0}\n              variant={'borderless'}\n              wrapperClassName={styles['date-button']}\n            >\n              {<Icon color={'black'} svgIcon={Calendar} />}\n            </Button>\n          }\n        />\n      </div>\n      {datePickerOpen && (\n        <DatePickerPopup\n          dir={dir}\n          disabled={disabledDays}\n          datepickerWrapperRef={datepickerWrapperRef}\n          footer={footerContent}\n          fromDate={minDate}\n          toDate={maxDate}\n          inputRef={refObject}\n          locale={locale}\n          month={month}\n          selected={dateState}\n          onSelect={handleSingleDatePickerSelect}\n          onMonthChange={setMonth}\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, { useState } from 'react';\n\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 Pick<React.InputHTMLAttributes<HTMLInputElement>, 'name' | 'aria-describedby' | 'aria-labelledby' | 'onChange' | 'disabled'> {\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  /** Label of the input */\n  label?: React.ReactNode;\n  /** Sets the unit of time for the input field */\n  timeUnit: TimeUnit;\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 { defaultValue, error, errorText, label, onChange, timeUnit, testId, ...rest } = props;\n\n  const [inputValue, setInputValue] = useState<number | string | undefined>(\n    typeof defaultValue !== 'undefined' ? formatAsTwoDigits(defaultValue) : ''\n  );\n  const { refObject } = usePseudoClasses<HTMLInputElement>(isMutableRefObject(ref) ? ref : null);\n  const mergedRefs = mergeRefs([ref, refObject]);\n\n  const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    const value = event.target.value;\n\n    if (isNumericString(value)) {\n      setInputValue(value);\n      onChange && onChange(event);\n    }\n  };\n\n  const handleInputBlur = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    const formattedValue = formatAsTwoDigits(event.target.value);\n    setInputValue(formattedValue);\n    onChange && onChange(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) => {\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        error={error}\n        errorText={errorText}\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        {...rest}\n        onChange={handleInputChange}\n        onBlur={handleInputBlur}\n        rightOfInput={renderTimeSeparator()}\n        onKeyDown={handleInputOnKeyDown}\n      />\n    </div>\n  );\n});\n\nDateTime.displayName = 'DateTime';\n\nexport default DateTime;\n","import React from 'react';\n\nimport classNames from 'classnames';\n\nimport ErrorWrapper 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 {\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, errorText, legend, testId } = props;\n\n  const mapDateComponents = (child: React.ReactNode): React.ReactNode => {\n    if (isComponent<DatePickerProps>(child, DatePicker)) {\n      return React.cloneElement(child as React.ReactElement<DatePickerProps>, {\n        className: classNames(styles['date-time-picker-wrapper__date-picker']),\n        error: !!errorText,\n      });\n    } else if (isComponent<DateTimeProps>(child, DateTime)) {\n      return React.cloneElement(child, {\n        error: !!errorText,\n      });\n    }\n    return child;\n  };\n\n  return (\n    <div ref={ref} tabIndex={-1}>\n      <ErrorWrapper errorText={errorText}>\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 = (date: string, errorMessage: string, minDate?: Date, maxDate?: Date): 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 'Invalid date format';\n  }\n\n  if (hasMinDate && !hasMaxDate && isAfter(formattedDate, minDate)) return true;\n  else if (hasMaxDate && !hasMinDate && isBefore(formattedDate, maxDate)) return true;\n  else if (hasMinDate && hasMaxDate && isWithinInterval(formattedDate, { start: minDate, end: maxDate })) {\n    return true;\n  }\n\n  return errorMessage;\n};\n\n/** react-hook-form fromDate and toDate validation */\nexport const validateDisabledDates = (date: string, disabledDates: Date[], errorMessage: string): string | true => {\n  const formattedDate = parseInputDate(date);\n  if (!formattedDate) {\n    return 'Invalid date format';\n  }\n  if (!disabledDates.some(d => isSameDay(d, formattedDate))) {\n    return true;\n  }\n\n  return errorMessage;\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"],"names":["BUBBLE_WIDTH_PX","WINDOW_MARGIN_PX","BUBBLE_VERTICAL_OFFSET_PX","ARROW_WIDTH_PX","ARROW_VERTICAL_OFFSET_PX","ARROW_HORIZONTAL_MARGIN_PX","getVerticalPosition","controllerSize","bubbleSize","PopOverVariant","getControllerLeftEdgePx","getControllerRightEdgePx","getBubbleRightPx","getBubbleLeftVisible","getBubbleRightIsVisible","getHorizontalPosition","getBubbleAbovePx","getBubbleBelowPx","getBubbleWidth","getBubbleFitsInWindow","getArrowTopxPx","getArrowLeftPx","getArrowRightPx","getBubblePosition","horizontalPosition","verticalPosition","getBubbleStyle","bubblePosition","bubbleWidth","getArrowStyle","bubbleStyle","leftPx","rightPx","minLeftPx","minRightPx","DatePickerPopup","props","datepickerWrapperRef","footer","inputRef","testId","rest","arrowRef","useRef","setControllerSize","useState","useSize","controllerisVisible","useIsVisible","useFocusTrap","updateControllerSize","_a","React","useInterval","useLayoutEvent","datepickerPopupContainerClasses","classNames","styles","popupArrowClasses","arrowStyle","datePickerClassNames","reactdaypickerstyles","DayPicker","DatePickerPopup$1","DatePicker","ref","className","dateButtonAriaLabel","dateFormat","dateValue","defaultMonth","dir","disableDays","disableWeekends","error","errorText","footerContent","label","locale","nb","maxDate","minDate","onBlur","onChange","dateState","setDateState","inputValue","setInputValue","format","month","setMonth","datePickerOpen","setDatePickerOpen","returnInputFocus","setReturnInputFocus","weekendMatcher","disabledDays","inputWrapperRef","refObject","usePseudoClasses","isMutableRefObject","mergedRefs","mergeRefs","useOutsideEvent","e","targetAsNode","isValid","handleEscapeKeyDown","useKeyboardEvent","KeyboardEventKey","handleInputChange","event","inputFormat","newDate","parse","handleInputFocus","handleSingleDatePickerSelect","date","selectedDay","activeModifiers","handleInputBlur","handleButtonClick","renderMobile","Input","renderDesktop","Button","Icon","Calendar","isMobileUA","formatAsTwoDigits","value","stringValue","isNumericString","str","DateTime","defaultValue","timeUnit","formattedValue","handleInputOnKeyDown","validChars","allowedKeys","renderTimeSeparator","DateTimePickerWrapper","children","legend","mapDateComponents","child","isComponent","ErrorWrapper","parseInputDate","dateString","possibleFormats","parsedDate","isValidDate","validateMinMaxDate","errorMessage","formattedDate","hasMinDate","hasMaxDate","isAfter","isBefore","isWithinInterval","validateDisabledDates","disabledDates","d","isSameDay","validateMinTimeMaxTime","time","minTime","maxTime","timeParsed","minTimeParsed","maxTimeParsed"],"mappings":"kwDAQA,MAAMA,GAAkB,IAElBC,EAAmB,GAEnBC,EAA4B,GAE5BC,GAAiB,GAEjBC,EAA2B,EAE3BC,GAA6B,GAStBC,GAAsB,CAACC,EAAyBC,IACvDD,EAAe,IAAMC,EAAW,OAASN,EACpCO,EAAe,cAEfA,EAAe,cASpBC,GAA2BH,GAAoCA,EAAe,KAAOA,EAAe,MAAQ,EAO5GI,GAA4BJ,GAChC,SAAS,gBAAgB,YAAcA,EAAe,MAAQA,EAAe,MAAQ,EAejFK,GAAmB,CAACL,EAAyBC,IAC1CD,EAAe,KAAOC,EAAW,MASpCK,GAAwBN,GACrBA,EAAe,KAAON,EASzBa,GAA0B,CAACP,EAAyBC,IAClCI,GAAiBL,EAAgBC,CAAU,EAE1C,SAAS,gBAAgB,YAAcP,EAS1Dc,GAAwB,CAACR,EAAyBC,IACjDM,GAAwBP,EAAgBC,CAAU,EAGlDK,GAAqBN,CAAc,EAIjC,WAHE,OAHA,QAeLS,EAAmB,CAACT,EAAyBC,IACjDD,EAAe,IAAML,EAA4BM,EAAW,OAQxDS,EAAoBV,GAAoCA,EAAe,OAASL,EAMhFgB,GAAiB,IAAc,SAAS,gBAAgB,YAAcjB,EAAmB,EAMzFkB,GAAwB,IACrB,SAAS,gBAAgB,YAAcnB,GAAkBC,EAAmB,EAQ/EmB,GAAkBb,GAAoCA,EAAe,IAAML,EAA4BE,EAA2B,EAOlIiB,GAAkBd,GAAoCG,GAAwBH,CAAc,EAAIJ,GAAiB,EAOjHmB,GAAmBf,GAAoCI,GAAyBJ,CAAc,EAAIJ,GAAiB,EASnHoB,GAAoB,CAAChB,EAAyBC,IAAwC,CACpF,MAAAgB,EAAqBT,GAAsBR,EAAgBC,CAAU,EACrEiB,EAAmBnB,GAAoBC,EAAgBC,CAAU,EAEvE,OAAIgB,IAAuB,OACrBC,IAAqBhB,EAAe,cAC/B,YAEF,YAGLe,IAAuB,QACrBC,IAAqBhB,EAAe,cAC/B,aAEF,aAGLgB,IAAqBhB,EAAe,cAC/B,gBAGF,eACT,EASaiB,GAAiB,CAACnB,EAAyBC,IAAuC,CACvF,MAAAmB,EAAiBJ,GAAkBhB,EAAgBC,CAAU,EAC7DoB,EAAeT,GAAsB,EAAuB,OAAnBD,GAAmB,EAElE,OAAIS,IAAmB,YACd,CACL,KAAM1B,EACN,IAAKe,EAAiBT,EAAgBC,CAAU,EAChD,MAAOoB,CAAA,EAGPD,IAAmB,YACd,CAAE,KAAM1B,EAAkB,IAAKgB,EAAiBV,CAAc,EAAG,MAAOqB,GAE7ED,IAAmB,aACd,CAAE,MAAO1B,EAAkB,IAAKe,EAAiBT,EAAgBC,CAAU,EAAG,MAAOoB,GAE1FD,IAAmB,aACd,CAAE,MAAO1B,EAAkB,IAAKgB,EAAiBV,CAAc,EAAG,MAAOqB,GAG9ED,IAAmB,gBACd,CAAE,KAAMpB,EAAe,KAAM,IAAKU,EAAiBV,CAAc,EAAG,MAAOqB,GAG7E,CAAE,KAAMrB,EAAe,KAAM,IAAKS,EAAiBT,EAAgBC,CAAU,EAAG,MAAOoB,CAAY,CAC5G,EASaC,GAAgB,CAC3BC,EACAvB,EACAkB,IACkB,CACZ,MAAAM,EAASV,GAAed,CAAc,EACtCyB,EAAUV,GAAgBf,CAAc,EACxC0B,EAAaH,EAAY,KAAkBzB,GAC3C6B,EAAcJ,EAAY,MAAmBzB,GAEnD,OAAIyB,EAAY,MACVL,IAAqBhB,EAAe,cAC/B,CACL,MAAOuB,EAAUE,EAAaF,EAAUE,EACxC,IAAKd,GAAeb,CAAc,CAAA,EAI/B,CACL,MAAOyB,EAAUE,EAAaF,EAAUE,EACxC,IAAK3B,EAAe,OAASH,CAAA,EAI7BqB,IAAqBhB,EAAe,cAC/B,CACL,KAAMsB,EAASE,EAAYF,EAASE,EACpC,IAAKb,GAAeb,CAAc,CAAA,EAI/B,CACL,KAAMwB,EAASE,EAAYF,EAASE,EACpC,IAAK1B,EAAe,OAASH,CAAA,CAEjC,EChPM+B,GAA2DC,GAAA,CAC/D,KAAM,CAAE,qBAAAC,EAAsB,OAAAC,EAAQ,SAAAC,EAAU,OAAAC,EAAQ,GAAGC,CAAS,EAAAL,EAC9DM,EAAWC,EAAuB,IAAI,EACtC,CAACpC,EAAgBqC,CAAiB,EAAIC,EAAkB,EACxDrC,EAAasC,GAAQT,CAAoB,EACzCU,EAAsBC,GAAaT,EAAU,CAAC,EACpDU,GAAaZ,EAAsB,EAAI,EAEvC,MAAMa,EAAuB,IAAY,OACrBN,GAAAO,EAAAZ,EAAS,UAAT,YAAAY,EAAkB,uBAAuB,CAAA,EAG7DC,EAAM,UAAU,IAAM,CACCF,GACvB,EAAG,CAAE,CAAA,EAELG,GAAYH,EAAsB,GAAG,EACrCI,GAAeJ,EAAsB,CAAC,SAAU,QAAQ,EAAG,EAAE,EAE7D,MAAMK,EAAkCC,EAAWC,EAAO,4BAA4B,EAAG,CACvF,CAACA,EAAO,qCAAqC,CAAC,EAAGV,CAAA,CAClD,EACKtB,EAAmBlB,GAAkBC,GAAcF,GAAoBC,EAAgBC,CAAU,EACjGkD,EAAoBF,EAAWC,EAAO,wBAAwB,EAAG,CACrE,CAACA,EAAO,iCAAiC,CAAC,EAAGV,EAC7C,CAACU,EAAO,8BAA8B,CAAC,EAAGhC,IAAqBhB,EAAe,cAC9E,CAACgD,EAAO,+BAA+B,CAAC,EAAGhC,IAAqBhB,EAAe,aAAA,CAChF,EAEKqB,EAAcvB,GAAkBC,GAAckB,GAAenB,EAAgBC,CAAU,EACvFmD,EAAa7B,GAAevB,GAAkBkB,GAAoBI,GAAcC,EAAavB,EAAgBkB,CAAgB,EAE7HmC,EAAuB,CAC3B,GAAGC,GACH,GAAGJ,CAAA,EAIH,OAAAL,EAAA,cAAAA,EAAA,SAAA,KACGA,EAAA,cAAA,MAAA,CAAI,UAAWG,EAAiC,cAAaf,EAAQ,IAAKH,EAAsB,MAAOP,GACtGsB,EAAA,cAACU,GAAA,CACC,cAAc,mBACd,WAAYF,EACZ,KAAM,SACN,oBAAqB,CAAE,MAAOH,EAAO,YAAY,EAAG,SAAUA,EAAO,aAAiB,SAAUA,EAAO,eAAe,CAAE,EACxH,OAASL,EAAA,cAAA,OAAA,CAAK,UAAWK,EAAO,gBAAgB,GAAInB,CAAO,EAC3D,WAAU,GACT,GAAGG,CAAA,CAER,CAAA,EACAW,EAAA,cAAC,MAAI,CAAA,IAAKV,EAAU,UAAWgB,EAAmB,MAAOC,CAAA,CAAY,CACvE,CAEJ,EAEAI,GAAe5B,GCtBF6B,GAAaZ,EAAM,WAAW,CAAChB,EAAwB6B,IAAqC,CACjG,KAAA,CACJ,UAAAC,EACA,oBAAAC,EACA,WAAAC,EAAa,aACb,UAAAC,EACA,aAAAC,EACA,IAAAC,EACA,YAAAC,EAAc,CAAC,EACf,gBAAAC,EACA,MAAAC,EACA,UAAAC,EACA,cAAAC,EACA,MAAAC,EACA,OAAAC,EAASC,GACT,QAAAC,EACA,QAAAC,EACA,OAAAC,EACA,SAAAC,EACA,OAAA3C,EACA,GAAGC,CACD,EAAAL,EAEE,CAACgD,EAAWC,CAAY,EAAIxC,EAA2BwB,CAAS,EAChE,CAACiB,EAAYC,CAAa,EAAI1C,EAAiBuC,EAAYI,EAAOJ,EAAWhB,CAAU,EAAI,EAAE,EAC7F,CAACqB,GAAOC,CAAQ,EAAI7C,EAA2ByB,CAAY,EAC3D,CAACqB,EAAgBC,CAAiB,EAAI/C,EAAkB,EAAK,EAC7D,CAACgD,EAAkBC,CAAmB,EAAIjD,EAAkB,EAAK,EACjEkD,GAA4B,CAChC,UAAW,CAAC,EAAG,CAAC,CAAA,EAEZC,GAAqCvB,EAAkB,CAAC,GAAGD,EAAauB,EAAc,EAAIvB,EAC1FyB,EAAkBtD,EAAuB,IAAI,EAC7CN,EAAuBM,EAAuB,IAAI,EAClD,CAAE,UAAAuD,CAAc,EAAAC,GAAmCC,GAAmBnC,CAAG,EAAIA,EAAM,IAAI,EACvFoC,EAAaC,GAAU,CAACrC,EAAKiC,CAAS,CAAC,EAC7CK,GAAgBlE,EAA2BmE,GAAA,OACzC,MAAMC,EAAeD,EAAE,QAClBrD,EAAA8C,GAAA,YAAAA,EAAiB,UAAjB,MAAA9C,EAA0B,SAASsD,IACtCb,EAAkB,EAAK,CACzB,CACD,EAEDxC,EAAM,UAAU,IAAM,CACpBmC,EAAclB,EAAYmB,EAAOnB,EAAWD,CAAU,EAAI,EAAE,EAExDsC,EAAQrC,CAAS,IACnBgB,EAAahB,CAAS,EACtBqB,EAASrB,CAAS,EACpB,EACC,CAACA,CAAS,CAAC,EAEdjB,EAAM,UAAU,IAAM,CAChByC,GAAoBK,EAAU,SAChCA,EAAU,QAAQ,OACpB,EACC,CAACL,CAAgB,CAAC,EAErB,MAAMc,EAAsB,IAAY,CAC3BT,GAAA,MAAAA,EAAA,SAAWA,EAAU,QAAQ,MAAM,EAC9CN,EAAkB,EAAK,CAAA,EAGzBgB,GAAiBvE,EAAsBsE,EAAqB,CAACE,GAAiB,MAAM,CAAC,EACrFD,GAAiBX,EAAiBU,EAAqB,CAACE,GAAiB,MAAM,CAAC,EAE1E,MAAAC,EAAoB,CAACC,EAA4CC,IAA8B,CACrFzB,EAAAwB,EAAM,cAAc,KAAK,EACjC,MAAAE,EAAUC,EAAMH,EAAM,cAAc,MAAOC,EAAa,IAAI,IAAM,EAEpEN,EAAQO,CAAO,GACjB5B,EAAa4B,CAAO,EACpBvB,EAASuB,CAAO,GAEhB5B,EAAa,MAAS,EAGxBF,GAAYA,EAAS4B,EAAOA,EAAM,cAAc,KAAK,CAAA,EAGjDI,GAAmB,IAAY,CAC9BtB,EAGHC,EAAoB,EAAK,EAFzBF,EAAkB,EAAI,CAGxB,EAGIwB,GAAyD,CAC7DC,EACAC,EACAC,EACAf,KACS,CAGT,GAFAV,EAAoB,EAAI,EAEpB,CAACuB,EAAM,CACTzB,EAAkB,EAAK,EACvB,MACF,CAEAP,EAAagC,CAAI,EAEbnB,EAAU,UACEX,EAAAC,EAAO6B,EAAMjD,CAAU,CAAC,EACtCwB,EAAkB,EAAK,GAGbT,GAAAA,EAASqB,GAAGa,CAAI,CAAA,EAGxBG,GAAmBhB,GAAmD,QACrErD,EAAAd,EAAqB,UAArB,MAAAc,EAA8B,SAASqD,EAAE,gBAC5CZ,EAAkB,EAAK,EAEzBV,GAAUA,EAAOsB,CAAC,CAAA,EAGdiB,GACJjB,GACS,CACTA,GAAA,MAAAA,EAAG,kBACHZ,EAAkB,CAACD,CAAc,CAAA,EAG7B+B,GACJtE,EAAA,cAACuE,EAAA,CACC,MAAAjD,EACA,UAAAC,EACA,MAAAE,EACA,IAAKG,EAAUQ,EAAOR,EAAS,YAAY,EAAI,GAC/C,IAAKC,EAAUO,EAAOP,EAAS,YAAY,EAAI,GAC/C,KAAK,OACL,IAAKoB,EACL,MAAOf,EACP,MAAO,GACN,GAAG7C,EACJ,OAAa+D,GAAA,CACXtB,GAAUA,EAAOsB,CAAC,CACpB,EACA,SAAUA,GAAKM,EAAkBN,EAAG,YAAY,CAAA,CAAA,EAI9CoB,GAEFxE,EAAA,cAAAA,EAAA,SAAA,KAAAA,EAAA,cAAC,OAAI,UAAWK,EAAO,oBAAoB,CACzC,EAAAL,EAAA,cAACuE,EAAA,CACC,MAAAjD,EACA,UAAAC,EACA,gBAAAsB,EACA,MAAApB,EACA,QAASsC,GACT,KAAK,OACL,IAAKd,EACL,MAAOf,EACP,MAAO,GACN,GAAG7C,EACJ,OAAQ+E,GACR,SAAUhB,GAAKM,EAAkBN,EAAGpC,CAAU,EAC9C,aACEhB,EAAA,cAACyE,GAAA,CACC,UAAW1D,GAAuB,YAClC,QAASsD,GACT,SAAU9B,EAAiB,GAAK,EAChC,QAAS,aACT,iBAAkBlC,EAAO,aAAa,CAAA,EAEpCL,EAAA,cAAA0E,GAAA,CAAK,MAAO,QAAS,QAASC,GAAU,CAC5C,CAAA,CAAA,CAGN,EACCpC,GACCvC,EAAA,cAACjB,GAAA,CACC,IAAAoC,EACA,SAAUyB,GACV,qBAAA3D,EACA,OAAQuC,EACR,SAAUK,EACV,OAAQD,EACR,SAAUkB,EACV,OAAApB,EACA,MAAAW,GACA,SAAUL,EACV,SAAUgC,GACV,cAAe1B,CAAA,CAAA,CAGrB,EAIA,OAAAtC,EAAA,cAAC,OAAI,UAAAc,EAAsB,cAAa1B,GACrCwF,GAAW,EAAIN,GAAeE,EACjC,CAEJ,CAAC,EAED5D,GAAW,YAAc,aC1OzB,MAAMiE,GAAqBC,GAAmC,CACtD,MAAAC,EAAc,OAAOD,CAAK,EAChC,OAAOC,EAAY,SAAW,EAAI,IAAMA,EAAcA,CACxD,EAEMC,GAAmBC,GAChB,CAACA,GAAQ,QAAQ,KAAKA,CAAG,GAAKA,EAAI,QAAU,EAGxCC,GAAWlF,EAAM,WAAW,CAAChB,EAAsB6B,IAAqC,CAC7F,KAAA,CAAE,aAAAsE,EAAc,MAAA7D,EAAO,UAAAC,EAAW,MAAAE,EAAO,SAAAM,EAAU,SAAAqD,EAAU,OAAAhG,EAAQ,GAAGC,CAAA,EAASL,EAEjF,CAACkD,EAAYC,CAAa,EAAI1C,EAClC,OAAO0F,EAAiB,IAAcN,GAAkBM,CAAY,EAAI,EAAA,EAEpE,CAAE,UAAArC,CAAc,EAAAC,GAAmCC,GAAmBnC,CAAG,EAAIA,EAAM,IAAI,EACvFoC,EAAaC,GAAU,CAACrC,EAAKiC,CAAS,CAAC,EAEvCY,EAAqBC,GAAqD,CACxE,MAAAmB,EAAQnB,EAAM,OAAO,MAEvBqB,GAAgBF,CAAK,IACvB3C,EAAc2C,CAAK,EACnB/C,GAAYA,EAAS4B,CAAK,EAC5B,EAGIS,EAAmBT,GAAqD,CAC5E,MAAM0B,EAAiBR,GAAkBlB,EAAM,OAAO,KAAK,EAC3DxB,EAAckD,CAAc,EAC5BtD,GAAYA,EAAS4B,CAAK,CAAA,EAItB2B,EAAwB3B,GAA+B,CAC3D,MAAM4B,EAAa,QACbC,EAAc,CAAC,YAAa,IAAK,QAAS,MAAO,UAAW,YAAa,YAAa,YAAY,EACpG,CAACD,EAAW,KAAK5B,EAAM,GAAG,GAAK,CAAC6B,EAAY,SAAS7B,EAAM,GAAG,GAChEA,EAAM,eAAe,CACvB,EAGI8B,EAAsB,IACnBL,IAAa,SAAYpF,EAAA,cAAA,OAAA,CAAK,UAAWK,EAAO,gBAAgB,GAAI,GAAI,EAI/E,OAAAL,EAAA,cAAC,MAAI,CAAA,cAAaZ,CAChB,EAAAY,EAAA,cAACuE,EAAA,CACC,MAAAjD,EACA,UAAAC,EACA,MAAAE,EACA,IAAK2D,IAAa,QAAU,GAAK,GACjC,IAAK,EACL,KAAK,SACL,IAAKnC,EACL,MAAOf,EACP,MAAO,EACN,GAAG7C,EACJ,SAAUqE,EACV,OAAQU,EACR,aAAcqB,EAAoB,EAClC,UAAWH,CAAA,CAAA,CAEf,CAEJ,CAAC,EAEDJ,GAAS,YAAc,WCpEhB,MAAMQ,GAAwB1F,EAAM,WAAW,CAAChB,EAAmC6B,IAA4C,CACpI,KAAM,CAAE,SAAA8E,EAAU,UAAApE,EAAW,OAAAqE,EAAQ,OAAAxG,GAAWJ,EAE1C6G,EAAqBC,GACrBC,GAA6BD,EAAOlF,EAAU,EACzCZ,EAAM,aAAa8F,EAA8C,CACtE,UAAW1F,EAAWC,EAAO,uCAAuC,CAAC,EACrE,MAAO,CAAC,CAACkB,CAAA,CACV,EACQwE,GAA2BD,EAAOZ,EAAQ,EAC5ClF,EAAM,aAAa8F,EAAO,CAC/B,MAAO,CAAC,CAACvE,CAAA,CACV,EAEIuE,EAIP,OAAA9F,EAAA,cAAC,OAAI,IAAAa,EAAU,SAAU,IACtBb,EAAA,cAAAgG,GAAA,CAAa,UAAAzE,CACX,EAAAvC,EAAM,OACLgB,EAAA,cAAC,YAAS,UAAWK,EAAO,0BAA0B,EAAG,cAAajB,GACnEJ,EAAM,QAAWgB,EAAA,cAAA,SAAA,CAAO,UAAWK,EAAO,kCAAkC,CAAI,EAAAuF,CAAO,EACvF5F,EAAM,SAAS,IAAI2F,EAAUE,CAAiB,CACjD,EAEC7F,EAAA,cAAA,MAAA,CAAI,UAAWK,EAAO,0BAA0B,GAAIL,EAAM,SAAS,IAAI2F,EAAUE,CAAiB,CAAE,CAEzG,CACF,CAEJ,CAAC,EAEDH,GAAsB,YAAc,wBCxDvB,MAAAO,GAAkBC,GAAoC,CAC3D,MAAAC,EAAkB,CAAC,aAAc,YAAY,EAEnD,UAAW/D,KAAU+D,EAAiB,CACpC,MAAMC,EAAatC,EAAMoC,EAAY9D,EAAQ,IAAI,IAAM,EACnD,GAAAkB,EAAQ8C,CAAU,EACb,OAAAA,CAEX,CAEO,OAAA,IACT,EAEaC,GAAeH,GAAgC,CACpD,MAAAjC,EAAO,IAAI,KAAKiC,CAAU,EAChC,OAAOjC,aAAgB,MAAQ,CAAC,MAAMA,EAAK,SAAS,CACtD,EAGaqC,GAAqB,CAACrC,EAAcsC,EAAsB1E,EAAgBD,IAAkC,CACjH,MAAA4E,EAAgBP,GAAehC,CAAI,EACnCwC,EAAa,OAAO5E,EAAY,IAChC6E,EAAa,OAAO9E,EAAY,IAClC,MAAA,CAAC4E,GAAkBC,GAAc,CAACnD,EAAQzB,CAAO,GAAO6E,GAAc,CAACpD,EAAQ1B,CAAO,EACjF,sBAGL6E,GAAc,CAACC,GAAcC,GAAQH,EAAe3E,CAAO,GACtD6E,GAAc,CAACD,GAAcG,GAASJ,EAAe5E,CAAO,GAC5D6E,GAAcC,GAAcG,GAAiBL,EAAe,CAAE,MAAO3E,EAAS,IAAKD,CAAQ,CAAC,EAF5B,GAMlE2E,CACT,EAGaO,GAAwB,CAAC7C,EAAc8C,EAAuBR,IAAwC,CAC3G,MAAAC,EAAgBP,GAAehC,CAAI,EACzC,OAAKuC,EAGAO,EAAc,KAAKC,GAAKC,GAAUD,EAAGR,CAAa,CAAC,EAIjDD,EAHE,GAHA,qBAOX,EAGaW,GAAyB,CACpCC,EACAZ,EACAa,EACAC,IACkB,CAClB,MAAMC,EAAaxD,GAAOqD,EAAK,KAAO,IAAMA,EAAK,QAAQ,SAAY,EAAA,QAAa,IAAA,IAAM,EAClFI,EAAgBzD,IAAOsD,GAAA,YAAAA,EAAS,MAAO,KAAMA,GAAA,YAAAA,EAAS,SAAQ,SAAY,EAAA,QAAa,IAAA,IAAM,EAC7FI,EAAgB1D,IAAOuD,GAAA,YAAAA,EAAS,MAAO,KAAMA,GAAA,YAAAA,EAAS,SAAQ,SAAY,EAAA,QAAa,IAAA,IAAM,EAE9F,OAAA,OAAOD,EAAY,KAAeE,GAAcC,KAAmB,OAAOF,EAAY,KAAeC,GAAcE,GAC/G,GAGFjB,CACT"}

package/components/DatePicker/position-utils.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties } from 'react';
+import { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';
+/**
+ * Beregn om hjelpeboblen skal vises over eller under kontrolleren
+ * @param controllerSize DOMRect for controlleren
+ * @param bubbleSize DOMRect for hjelpeboblen
+ * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)
+ * @returns Om hjelpeboblen skal vises over eller under
+ */
+export declare const getVerticalPosition: (controllerSize: DOMRect, bubbleSize: DOMRect) => keyof typeof PopOverVariant;
+/**
+ * Finn riktig plassering av hjelpeboblen
+ * @param controllerSize DOMRect for controlleren
+ * @param bubbleSize DOMRect for hjelpeboblen
+ * @param variant Ønsket plassering av hjelpeboblen (over/under)
+ * @returns CSSProperties som plasserer hjelpeboblen riktig
+ */
+export declare const getBubbleStyle: (controllerSize: DOMRect, bubbleSize: DOMRect) => CSSProperties;
+/**
+ * Finn riktig plassering av pilen
+ * @param bubbleStyle CSSProperties for hjelpeboblen
+ * @param controllerSize DOMRect for kontrolleren
+ * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)
+ * @returns CSSProperties som plasserer pilen riktig
+ */
+export declare const getArrowStyle: (bubbleStyle: CSSProperties, controllerSize: DOMRect, verticalPosition: keyof typeof PopOverVariant) => CSSProperties;
+//# sourceMappingURL=position-utils.d.ts.map

package/components/DatePicker/position-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position-utils.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/position-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAkBnF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,mBAAoB,OAAO,cAAc,OAAO,KAAG,MAAM,qBAMxF,CAAC;AA6JF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,mBAAoB,OAAO,cAAc,OAAO,KAAG,aA0B7E,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,gBACX,aAAa,kBACV,OAAO,oBACL,MAAM,qBAAqB,KAC5C,aA+BF,CAAC"}

package/components/DatePicker/styles.module.scss

@@ -0,0 +1,295 @@
+@use 'sass:map';
+@import '@helsenorge/designsystem-react/scss/spacers';
+@import '@helsenorge/designsystem-react/scss/breakpoints';
+@import '@helsenorge/designsystem-react/scss/palette';
+@import '@helsenorge/designsystem-react/scss/font-settings';
+@import '@helsenorge/designsystem-react/scss/title';
+
+.date-time-picker-wrapper {
+  display: flex;
+  align-items: flex-end;
+  flex-flow: row wrap;
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  @media (min-width: map.get($grid-breakpoints, sm)) {
+    flex-flow: row nowrap;
+  }
+
+  &__date-picker {
+    flex: 100%;
+    margin-right: getSpacer(l);
+
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      flex: unset;
+    }
+  }
+
+  &__legend {
+    @include legend;
+
+    margin-bottom: getSpacer(m);
+    margin-top: 0;
+  }
+}
+
+.time-separator {
+  display: flex;
+  align-items: center;
+  padding: 0 getSpacer(2xs);
+}
+
+.datepicker-popup-container {
+  position: fixed;
+  visibility: hidden;
+  z-index: 10;
+
+  &--visible {
+    visibility: visible;
+  }
+}
+
+.datepicker-popup-arrow {
+  --drop-shadow-color: #{$blueberry500};
+
+  width: 0;
+  height: 0;
+  position: fixed;
+  visibility: hidden;
+  border-style: solid;
+  border-color: transparent;
+  z-index: 10;
+
+  &--visible {
+    visibility: visible;
+  }
+
+  &--over {
+    border-width: 0.625rem;
+    border-bottom-color: $white;
+    filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
+    filter: drop-shadow(0 -0.185rem 0 var(--drop-shadow-color));
+  }
+
+  &--under {
+    border-width: 0.625rem;
+    border-top-color: $white;
+    filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
+    filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
+  }
+}
+
+.date-button {
+  position: absolute;
+  z-index: 10;
+  right: 0.1rem;
+  top: 0.1rem;
+}
+
+.footer-wrapper {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+// Overstyrer klasser til datedaypicker pakken https://github.com/gpbl/react-day-picker/blob/main/src/style.css
+/* stylelint-disable */
+.root {
+  --rdp-cell-size: getSpacer(l);
+  --rdp-background-color: #e7edff;
+
+  background-color: $white;
+  padding: getSpacer(s) getSpacer(s) getSpacer(xs);
+  border: 2px solid $blueberry500;
+}
+
+.month {
+  width: 100%;
+}
+
+.table {
+  width: 100%;
+  margin: 0 getSpacer(3xs) * -1 getSpacer(4xs) * -1;
+  border-spacing: getSpacer(3xs) getSpacer(4xs);
+  border-collapse: separate;
+
+  @media (min-width: map.get($grid-breakpoints, sm)) {
+    margin: 0 getSpacer(xs) * -1 getSpacer(3xs) * -1;
+    border-spacing: getSpacer(xs) getSpacer(3xs);
+  }
+}
+
+.head_cell {
+  color: $neutral700;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: $font-size-sm;
+  font-weight: 400;
+  text-transform: capitalize;
+}
+
+.day {
+  font-size: $font-size-sm;
+  font-weight: 600;
+  font-family: 'Source Sans Pro', sans-serif;
+  color: $blueberry600;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: getSpacer(l);
+  max-width: getSpacer(l);
+  height: getSpacer(l);
+  margin: 0;
+  border: 2px solid transparent;
+  border-radius: 0;
+
+  &:focus-visible:not([disabled]),
+  &:focus:not([disabled]) {
+    background-color: $neutral100;
+    color: $blueberry600;
+    text-decoration: underline 2px $blueberry600;
+    outline: none;
+  }
+
+  &:hover:not([disabled]):not(._day_selected) {
+    background-color: $neutral100;
+  }
+
+  &--today {
+    background-color: $blueberry100;
+    color: $blueberry600;
+
+    &:hover:not([disabled]):not(._day_selected) {
+      background-color: $blueberry200;
+    }
+
+    &:focus-visible:not([disabled]),
+    &:focus:not([disabled]) {
+      background-color: $blueberry200;
+      text-decoration: underline 2px $blueberry600;
+      outline: none;
+    }
+  }
+
+  &--disabled:not(.day_selected) {
+    opacity: 1 !important;
+    color: $neutral400;
+
+    &:hover {
+      background-color: $white;
+    }
+  }
+}
+
+.day_selected {
+  background-color: $blueberry500;
+  color: $white;
+
+  &:hover:not([disabled]):not(._day_selected) {
+    background-color: $blueberry700;
+  }
+
+  &:focus-visible:not([disabled]),
+  &:focus:not([disabled]) {
+    background-color: $blueberry700;
+    color: $white;
+    text-decoration: underline 2px $white;
+    outline: none;
+  }
+}
+
+.day:hover {
+  background-color: $neutral100;
+}
+
+.dropdown {
+  appearance: none;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+  border: none;
+  background-color: transparent;
+  font-size: $font-size-sm;
+  line-height: inherit;
+  text-transform: capitalize;
+
+  &:disabled {
+    opacity: unset;
+    color: unset;
+  }
+
+  &:focus-visible:not([disabled]) + .caption_label,
+  &:focus:not([disabled]) + .caption_label {
+    box-shadow: 0 0 0 4px $neutral900;
+    border-radius: 0;
+  }
+}
+
+.caption_label {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  white-space: nowrap;
+  color: currentColor;
+  border: 2px solid transparent;
+  font-size: $font-size-sm;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-weight: 600;
+}
+
+.dropdown_month,
+.dropdown_year {
+  color: $blueberry600;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  text-transform: capitalize;
+  font-size: $font-size-md;
+  font-weight: 600;
+}
+
+.dropdown_month {
+  margin-right: getSpacer(2xs);
+}
+
+.nav_button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.375rem;
+  height: 2.375rem;
+  padding: 0.25em;
+  border-radius: 0;
+
+  &[disabled] {
+    margin-left: getSpacer(xs);
+  }
+
+  &:focus-visible:not([disabled]),
+  &:focus:not([disabled]) {
+    box-shadow: 0 0 0 4px $neutral900;
+    background-color: $neutral100;
+  }
+
+  &:hover:not([disabled]):not(.day_selected) {
+    background-color: $neutral100;
+  }
+}
+
+.nav_button_next,
+.nav_button_next[disabled],
+.nav_button_next[disabled]:not(.day_selected) {
+  margin-left: getSpacer(2xs);
+}
+/* stylelint-enable */

package/components/DatePicker/styles.module.scss.d.ts

@@ -0,0 +1,35 @@
+export type Styles = {
+  _day_selected: string;
+  caption_label: string;
+  'date-button': string;
+  'date-time-picker-wrapper': string;
+  'date-time-picker-wrapper__date-picker': string;
+  'date-time-picker-wrapper__legend': string;
+  'datepicker-popup-arrow': string;
+  'datepicker-popup-arrow--over': string;
+  'datepicker-popup-arrow--under': string;
+  'datepicker-popup-arrow--visible': string;
+  'datepicker-popup-container': string;
+  'datepicker-popup-container--visible': string;
+  day: string;
+  day_selected: string;
+  'day--disabled': string;
+  'day--today': string;
+  dropdown: string;
+  dropdown_month: string;
+  dropdown_year: string;
+  'footer-wrapper': string;
+  head_cell: string;
+  month: string;
+  nav_button: string;
+  nav_button_next: string;
+  root: string;
+  table: string;
+  'time-separator': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/DatePicker/validate-utils.d.ts

@@ -0,0 +1,18 @@
+export declare const parseInputDate: (dateString: string) => Date | null;
+export declare const isValidDate: (dateString: string) => boolean;
+/** react-hook-form fromDate and toDate validation */
+export declare const validateMinMaxDate: (date: string, errorMessage: string, minDate?: Date, maxDate?: Date) => string | true;
+/** react-hook-form fromDate and toDate validation */
+export declare const validateDisabledDates: (date: string, disabledDates: Date[], errorMessage: string) => string | true;
+/** react-hook-form fromTime and toTime validation */
+export declare const validateMinTimeMaxTime: (time: {
+    hour: number;
+    minute: number;
+}, errorMessage: string, minTime?: {
+    hour: number;
+    minute: number;
+}, maxTime?: {
+    hour: number;
+    minute: number;
+}) => string | true;
+//# sourceMappingURL=validate-utils.d.ts.map