@fremtind/jokul 4.5.0 → 4.5.1

package/build/cjs/components/datepicker/DatePicker.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("../../../utils-DxmZDrR9.cjs"),a=require("react"),n=require("react-dom"),l=require("../../utilities/formatters/date/formatDate.cjs"),o=require("../icon-button/IconButton.cjs"),u=require("../icon/icons/CalendarIcon.cjs"),s=require("../input-group/InputGroup.cjs"),i=require("../popover/Popover.cjs"),c=require("../text-input/BaseTextInput.cjs"),d=require("./internal/Calendar.cjs"),p=require("./utils.cjs"),v=require("./validation.cjs"),f=a.forwardRef((f,D)=>{const{"data-testautoid":b,id:m,className:g="",label:j="Velg dato",labelProps:k,defaultValue:h,defaultShow:y=!1,value:x,disableBeforeDate:C,disableAfterDate:S,yearsToShow:L,name:P,helpLabel:q,errorLabel:w,invalid:I,days:O,months:T,monthLabel:B,yearLabel:E,placeholder:_="dd.mm.åååå",width:N="11.25rem",onChange:R,onBlur:U,onFocus:V,onKeyDown:F,action:K,showCalendarLabel:M="Åpne kalender",hideCalendarLabel:W="Lukk kalender",supportLabelProps:A,tooltip:G,textInputProps:H,description:$,...z}=f;"production"!==process.env.NODE_ENV&&x&&h&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const J=p.parseDateString(C),Q=J?r.dayjs(J).startOf("day").toDate():void 0,X=p.parseDateString(S),Y=X?r.dayjs(X).startOf("day").toDate():void 0,[Z,ee]=a.useState(r.getInitialDate(x,h,Q,Y)),[te,re]=a.useState(null),[ae,ne]=a.useState(y),le=a.useRef(null),oe=a.useRef(null),ue=a.useRef(null),se=a.useRef(null),ie=a.useCallback(e=>{se.current=e,D&&("function"==typeof D?D(e):D.current=e)},[D]),ce=a.useCallback(e=>{V&&oe.current&&(oe.current.contains(e.relatedTarget)||V(e,Z,{error:te,value:e.target.value}))},[V,Z,te]),de=a.useCallback(e=>{U&&U(e,Z,{error:te,value:e.target.value})},[U,Z,te]),pe=a.useCallback(e=>{"Escape"===e.key&&(ne(!1),e.preventDefault(),e.stopPropagation()),K?.onKeyDown&&K.onKeyDown(e)},[K]),ve=a.useCallback(e=>{const t=e.currentTarget.value,r=(e=>{const t=e.replace(/\D/g,""),r=l.formatDateString(t,{partial:!0}),a=e.replace(/\D+$/,""),n=8===t.length?l.formatDateString(t):e,o=p.parseDateString(n)?n:null,u=e!==t&&a===r&&void 0===p.parseDateString(e)&&null===o;return o??(u?t:e)})(t);r!==t&&((e,t)=>{const r=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value")?.set;r?r.call(e,t):e.value=t})(e.currentTarget,r);const{date:a,error:n}=(({value:e,minDate:t,maxDate:r})=>{if(!e)return{date:null,error:null};const a=p.parseDateString(e);return a?t&&!v.isWithinLowerBound(a,t)?{date:a,error:"OUTSIDE_LOWER_BOUND"}:r&&!v.isWithinUpperBound(a,r)?{date:a,error:"OUTSIDE_UPPER_BOUND"}:{date:a,error:null}:{date:null,error:"WRONG_FORMAT"}})({value:r,minDate:Q,maxDate:Y});a&&!n&&ne(!1),re(n),ee(a),R&&R(e,a,{error:n,value:r})},[R,Q,Y]),fe=a.useCallback(e=>{n.flushSync(()=>{ne(!ae)});const t=le.current,r=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame(()=>r?.focus()),K?.onClick&&K.onClick(e)},[ae,K]),De=a.useCallback(({date:e})=>{if(ne(!1),ee(e),se.current){const t=se.current;t.value=p.formatInput(e);const r=document.createEvent("HTMLEvents");r.initEvent("input",!0,!1),t.dispatchEvent(r),t.focus(),R&&R(r,e,{error:null,value:t.value})}},[R]),be=a.useCallback(e=>{e.preventDefault(),ne(!1),ue.current?.focus()},[]);return e.jsx(s.InputGroup,{id:m,className:t.clsx("jkl-datepicker",g),...z,ref:oe,label:j,labelProps:k,helpLabel:q,errorLabel:w,supportLabelProps:A,tooltip:G,description:$,render:t=>e.jsx(c.BaseTextInput,{"data-focused":ae?"true":void 0,ref:ie,"data-testid":"jkl-datepicker__input","data-testautoid":b,className:"jkl-datepicker__input",name:P,defaultValue:h,value:x,type:"text",placeholder:_,width:N,onFocus:ce,onBlur:de,onChange:ve,actionButton:e.jsxs(i.Popover,{positionReference:se,open:ae,onOpenChange:()=>ne(!ae),offset:8,children:[e.jsx(i.Popover.Trigger,{...K,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ae?W:M,tabIndex:0,onClick:fe,onKeyDown:pe,asChild:!0,children:e.jsx(o.IconButton,{children:e.jsx(u.CalendarIcon,{})})}),e.jsx(i.Popover.Content,{initialFocus:-1,padding:24,children:e.jsx(d.Calendar,{ref:le,date:Z,minDate:Q,maxDate:Y,days:O,months:T,monthLabel:B,yearLabel:E,yearsToShow:L,onDateSelected:De,onTabOutside:be})})]}),...H,...t,"aria-invalid":I||!!w})})});f.displayName="DatePicker",exports.DatePicker=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),r=require("../../../utils-DxmZDrR9.cjs"),a=require("react"),n=require("react-dom"),o=require("../../utilities/formatters/date/formatDate.cjs"),l=require("../icon-button/IconButton.cjs"),u=require("../icon/icons/CalendarIcon.cjs"),s=require("../input-group/InputGroup.cjs"),i=require("../popover/Popover.cjs"),c=require("../text-input/BaseTextInput.cjs"),d=require("./internal/Calendar.cjs"),p=require("./utils.cjs"),f=require("./validation.cjs"),v=a.forwardRef((v,D)=>{const{"data-testautoid":m,id:b,className:g="",label:j="Velg dato",labelProps:k,defaultValue:h,defaultShow:y=!1,value:x,disableBeforeDate:C,disableAfterDate:S,yearsToShow:L,name:P,helpLabel:q,errorLabel:w,invalid:I,days:O,months:T,monthLabel:B,yearLabel:E,placeholder:_="dd.mm.åååå",width:R="11.25rem",onChange:N,onBlur:U,onFocus:V,onKeyDown:F,action:K,showCalendarLabel:M="Åpne kalender",hideCalendarLabel:W="Lukk kalender",supportLabelProps:A,tooltip:G,textInputProps:H,description:$,...z}=v;"production"!==process.env.NODE_ENV&&x&&h&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const J=p.parseDateString(C),Q=J?r.dayjs(J).startOf("day").toDate():void 0,X=p.parseDateString(S),Y=X?r.dayjs(X).startOf("day").toDate():void 0,[Z,ee]=a.useState(r.getInitialDate(x,h,Q,Y)),[te,re]=a.useState(null),[ae,ne]=a.useState(y),oe=a.useRef(null),le=a.useRef(null),ue=a.useRef(null),se=a.useRef(null),ie=a.useRef(!1),ce=a.useCallback(e=>{se.current=e,D&&("function"==typeof D?D(e):D.current=e)},[D]),de=a.useCallback(e=>{V&&le.current&&(le.current.contains(e.relatedTarget)||V(e,Z,{error:te,value:e.target.value}))},[V,Z,te]),pe=a.useCallback(e=>{U&&U(e,Z,{error:te,value:e.target.value})},[U,Z,te]),fe=a.useCallback(e=>{"Escape"===e.key&&(ne(!1),e.preventDefault(),e.stopPropagation()),K?.onKeyDown&&K.onKeyDown(e)},[K]),ve=a.useCallback(e=>{const t=e.currentTarget.value,r=((e,t)=>{const r=e.replace(/\D/g,""),a=o.formatDateString(r,{partial:!0}),n=e.replace(/\D+$/,""),l=8===r.length?o.formatDateString(r):e,u=p.parseDateString(l)?l:null,s=t&&e!==r&&n===a&&void 0===p.parseDateString(e)&&null===u;return u??(s?r:e)})(t,ie.current);r!==t&&((e,t)=>{const r=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value")?.set;r?r.call(e,t):e.value=t})(e.currentTarget,r);const a=t.replace(/\D/g,"");ie.current=t===a&&r===o.formatDateString(a)&&r!==t&&void 0!==p.parseDateString(r);const{date:n,error:l}=(({value:e,minDate:t,maxDate:r})=>{if(!e)return{date:null,error:null};const a=p.parseDateString(e);return a?t&&!f.isWithinLowerBound(a,t)?{date:a,error:"OUTSIDE_LOWER_BOUND"}:r&&!f.isWithinUpperBound(a,r)?{date:a,error:"OUTSIDE_UPPER_BOUND"}:{date:a,error:null}:{date:null,error:"WRONG_FORMAT"}})({value:r,minDate:Q,maxDate:Y});n&&!l&&ne(!1),re(l),ee(n),N&&N(e,n,{error:l,value:r})},[N,Q,Y]),De=a.useCallback(e=>{n.flushSync(()=>{ne(!ae)});const t=oe.current,r=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame(()=>r?.focus()),K?.onClick&&K.onClick(e)},[ae,K]),me=a.useCallback(({date:e})=>{if(ne(!1),ee(e),se.current){const t=se.current;ie.current=!1,t.value=p.formatInput(e);const r=document.createEvent("HTMLEvents");r.initEvent("input",!0,!1),t.dispatchEvent(r),t.focus(),N&&N(r,e,{error:null,value:t.value})}},[N]),be=a.useCallback(e=>{e.preventDefault(),ne(!1),ue.current?.focus()},[]);return e.jsx(s.InputGroup,{id:b,className:t.clsx("jkl-datepicker",g),...z,ref:le,label:j,labelProps:k,helpLabel:q,errorLabel:w,supportLabelProps:A,tooltip:G,description:$,render:t=>e.jsx(c.BaseTextInput,{"data-focused":ae?"true":void 0,ref:ce,"data-testid":"jkl-datepicker__input","data-testautoid":m,className:"jkl-datepicker__input",name:P,defaultValue:h,value:x,type:"text",placeholder:_,width:R,onFocus:de,onBlur:pe,onChange:ve,actionButton:e.jsxs(i.Popover,{positionReference:se,open:ae,onOpenChange:()=>ne(!ae),offset:8,children:[e.jsx(i.Popover.Trigger,{...K,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ae?W:M,tabIndex:0,onClick:De,onKeyDown:fe,asChild:!0,children:e.jsx(l.IconButton,{children:e.jsx(u.CalendarIcon,{})})}),e.jsx(i.Popover.Content,{initialFocus:-1,padding:24,children:e.jsx(d.Calendar,{ref:oe,date:Z,minDate:Q,maxDate:Y,days:O,months:T,monthLabel:B,yearLabel:E,yearsToShow:L,onDateSelected:me,onTabOutside:be})})]}),...H,...t,"aria-invalid":I||!!w})})});v.displayName="DatePicker",exports.DatePicker=v;
 //# sourceMappingURL=DatePicker.cjs.map

package/build/cjs/components/datepicker/DatePicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport React, {\n    type ChangeEvent,\n    type FocusEvent,\n    type KeyboardEvent,\n    type MouseEvent,\n    forwardRef,\n    useCallback,\n    useRef,\n    useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { formatDateString } from \"../../utilities/formatters/date/formatDate.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { type DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport type { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nconst setInputValue = (input: HTMLInputElement, value: string) => {\n    const nativeSetter = Object.getOwnPropertyDescriptor(\n        HTMLInputElement.prototype,\n        \"value\",\n    )?.set;\n\n    if (nativeSetter) {\n        nativeSetter.call(input, value);\n    } else {\n        input.value = value;\n    }\n};\n\nconst normalizeInputValue = (rawValue: string) => {\n    const digits = rawValue.replace(/\\D/g, \"\");\n    const partialCompactDate = formatDateString(digits, {\n        partial: true,\n    });\n    const rawValueWithoutTrailingPunctuation = rawValue.replace(/\\D+$/, \"\");\n    const compactDateCandidate =\n        digits.length === 8 ? formatDateString(digits) : rawValue;\n    const validCompactDate = parseDateString(compactDateCandidate)\n        ? compactDateCandidate\n        : null;\n    const shouldRemoveFormatting =\n        rawValue !== digits &&\n        rawValueWithoutTrailingPunctuation === partialCompactDate &&\n        parseDateString(rawValue) === undefined &&\n        validCompactDate === null;\n\n    return validCompactDate ?? (shouldRemoveFormatting ? digits : rawValue);\n};\n\nconst getInputValidationState = ({\n    value,\n    minDate,\n    maxDate,\n}: {\n    value: string;\n    minDate?: Date;\n    maxDate?: Date;\n}): { date: Date | null; error: DateValidationError | null } => {\n    if (!value) {\n        return { date: null, error: null };\n    }\n\n    const parsedDate = parseDateString(value);\n\n    if (!parsedDate) {\n        return { date: null, error: \"WRONG_FORMAT\" };\n    }\n\n    if (minDate && !isWithinLowerBound(parsedDate, minDate)) {\n        return { date: parsedDate, error: \"OUTSIDE_LOWER_BOUND\" };\n    }\n\n    if (maxDate && !isWithinUpperBound(parsedDate, maxDate)) {\n        return { date: parsedDate, error: \"OUTSIDE_UPPER_BOUND\" };\n    }\n\n    return { date: parsedDate, error: null };\n};\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n    (props, forwardedInputRef) => {\n        const {\n            \"data-testautoid\": testAutoId,\n            id,\n            className = \"\",\n            label = \"Velg dato\",\n            labelProps,\n            defaultValue,\n            defaultShow = false,\n            value,\n            disableBeforeDate: disableBefore,\n            disableAfterDate: disableAfter,\n            yearsToShow,\n            name,\n            helpLabel,\n            errorLabel,\n            invalid,\n            days,\n            months,\n            monthLabel,\n            yearLabel,\n            placeholder = \"dd.mm.åååå\",\n            width = \"11.25rem\",\n            onChange,\n            onBlur,\n            onFocus,\n            onKeyDown,\n            action,\n            showCalendarLabel = \"Åpne kalender\",\n            hideCalendarLabel = \"Lukk kalender\",\n            supportLabelProps,\n            tooltip,\n            textInputProps,\n            description,\n            ...rest\n        } = props;\n\n        if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n            console.warn(\n                \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n            );\n        }\n        /// Input state\n\n        const disableBeforeDate = parseDateString(disableBefore);\n        const minDate = disableBeforeDate\n            ? dayjs(disableBeforeDate).startOf(\"day\").toDate()\n            : undefined;\n        const disableAfterDate = parseDateString(disableAfter);\n        const maxDate = disableAfterDate\n            ? dayjs(disableAfterDate).startOf(\"day\").toDate()\n            : undefined;\n\n        const [date, setDate] = useState(\n            getInitialDate(value, defaultValue, minDate, maxDate),\n        );\n        const [error, setError] = useState<DateValidationError | null>(null);\n\n        /// Calendar state\n\n        const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n        const calendarRef = useRef<HTMLDivElement>(null);\n        const datepickerRef = useRef<HTMLDivElement>(null);\n\n        /// Input events\n\n        const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n        const unifiedInputRef = useCallback(\n            (instance: HTMLInputElement | null) => {\n                inputRef.current = instance;\n                if (forwardedInputRef) {\n                    if (typeof forwardedInputRef === \"function\") {\n                        forwardedInputRef(instance);\n                    } else {\n                        forwardedInputRef.current = instance;\n                    }\n                }\n            },\n            [forwardedInputRef],\n        );\n\n        const handleFocus = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (!onFocus || !datepickerRef.current) {\n                    return;\n                }\n\n                const nextFocusIsInside = datepickerRef.current.contains(\n                    e.relatedTarget as Node,\n                );\n                if (!nextFocusIsInside) {\n                    onFocus(e, date, { error, value: e.target.value });\n                }\n            },\n            [onFocus, date, error],\n        );\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (onBlur) {\n                    onBlur(e, date, { error, value: e.target.value });\n                }\n            },\n            [onBlur, date, error],\n        );\n\n        const handleKeyDownAction = useCallback(\n            (e: React.KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Escape\") {\n                    setShowCalendar(false);\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n\n                if (action?.onKeyDown) {\n                    action.onKeyDown(e);\n                }\n            },\n            [action],\n        );\n\n        const handleChange = useCallback(\n            (e: ChangeEvent<HTMLInputElement>) => {\n                const rawValue = e.currentTarget.value;\n                const formattedValue = normalizeInputValue(rawValue);\n\n                if (formattedValue !== rawValue) {\n                    setInputValue(e.currentTarget, formattedValue);\n                }\n\n                const { date: nextDate, error: nextError } =\n                    getInputValidationState({\n                        value: formattedValue,\n                        minDate,\n                        maxDate,\n                    });\n\n                if (nextDate && !nextError) {\n                    setShowCalendar(false);\n                }\n\n                setError(nextError);\n                setDate(nextDate);\n\n                if (onChange) {\n                    onChange(e, nextDate, {\n                        error: nextError,\n                        value: formattedValue,\n                    });\n                }\n            },\n            [onChange, minDate, maxDate],\n        );\n\n        /// Calendar events\n\n        const clickCalendar = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                flushSync(() => {\n                    setShowCalendar(!showCalendar);\n                });\n\n                const calendarEl = calendarRef.current;\n                const button =\n                    calendarEl &&\n                    (calendarEl.querySelector(\n                        '[aria-pressed=\"true\"]',\n                    ) as HTMLButtonElement);\n                // Make sure the popover-modal is correctly positioned before focusing a button\n                // so we avoid accidentally scrolling to the top of the page\n                window.requestAnimationFrame(() => button?.focus());\n\n                if (action?.onClick) {\n                    action.onClick(e);\n                }\n            },\n            [showCalendar, action],\n        );\n\n        const handleClickCalendarDay = useCallback(\n            ({ date }: DateInfo) => {\n                setShowCalendar(false);\n                setDate(date);\n\n                if (inputRef.current) {\n                    const node = inputRef.current;\n\n                    node.value = formatInput(date);\n\n                    // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n                    const event = document.createEvent(\"HTMLEvents\");\n                    event.initEvent(\"input\", true, false);\n                    node.dispatchEvent(event);\n\n                    node.focus();\n\n                    if (onChange) {\n                        // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n                        // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n                        // så kan det hende du må utvide denne for å dekke behovet ditt.\n                        onChange(\n                            event as unknown as ChangeEvent<HTMLInputElement>,\n                            date,\n                            {\n                                error: null,\n                                value: node.value,\n                            },\n                        );\n                    }\n                }\n            },\n            [onChange],\n        );\n\n        const handleTabOutsideCalendar = useCallback((e: KeyboardEvent) => {\n            e.preventDefault();\n            setShowCalendar(false);\n            iconButtonRef.current?.focus();\n        }, []);\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-datepicker\", className)}\n                {...rest}\n                ref={datepickerRef}\n                label={label}\n                labelProps={labelProps}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                render={(inputProps) => (\n                    <BaseTextInput\n                        data-focused={showCalendar ? \"true\" : undefined}\n                        ref={unifiedInputRef}\n                        data-testid=\"jkl-datepicker__input\"\n                        data-testautoid={testAutoId}\n                        className=\"jkl-datepicker__input\"\n                        name={name}\n                        defaultValue={defaultValue}\n                        value={value}\n                        type=\"text\"\n                        placeholder={placeholder}\n                        width={width}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        onChange={handleChange}\n                        actionButton={\n                            <Popover\n                                positionReference={inputRef}\n                                open={showCalendar}\n                                onOpenChange={() =>\n                                    setShowCalendar(!showCalendar)\n                                }\n                                offset={8}\n                            >\n                                <Popover.Trigger\n                                    {...action}\n                                    data-testid=\"jkl-datepicker__trigger\"\n                                    className=\"jkl-text-input-action-button\"\n                                    title={\n                                        showCalendar\n                                            ? hideCalendarLabel\n                                            : showCalendarLabel\n                                    }\n                                    tabIndex={0}\n                                    onClick={clickCalendar}\n                                    onKeyDown={handleKeyDownAction}\n                                    asChild\n                                >\n                                    <IconButton>\n                                        <CalendarIcon />\n                                    </IconButton>\n                                </Popover.Trigger>\n                                <Popover.Content initialFocus={-1} padding={24}>\n                                    <Calendar\n                                        ref={calendarRef}\n                                        date={date}\n                                        minDate={minDate}\n                                        maxDate={maxDate}\n                                        days={days}\n                                        months={months}\n                                        monthLabel={monthLabel}\n                                        yearLabel={yearLabel}\n                                        yearsToShow={yearsToShow}\n                                        onDateSelected={handleClickCalendarDay}\n                                        onTabOutside={handleTabOutsideCalendar}\n                                    />\n                                </Popover.Content>\n                            </Popover>\n                        }\n                        {...textInputProps}\n                        {...inputProps}\n                        aria-invalid={invalid || !!errorLabel}\n                    />\n                )}\n            />\n        );\n    },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","textInputProps","description","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","dayjs","startOf","toDate","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","rawValue","currentTarget","formattedValue","digits","replace","partialCompactDate","formatDateString","partial","rawValueWithoutTrailingPunctuation","compactDateCandidate","length","validCompactDate","shouldRemoveFormatting","normalizeInputValue","input","nativeSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","setInputValue","nextDate","nextError","parsedDate","isWithinLowerBound","isWithinUpperBound","getInputValidationState","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"2lBAwFaA,EAAaC,EAAAA,WACtB,CAACC,EAAOC,KACJ,MACI,kBAAmBC,EACnBC,GAAAA,EACAC,UAAAA,EAAY,GACZC,MAAAA,EAAQ,YACRC,WAAAA,EACAC,aAAAA,EACAC,YAAAA,GAAc,EACdC,MAAAA,EACAC,kBAAmBC,EACnBC,iBAAkBC,EAClBC,YAAAA,EACAC,KAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,YAAAA,EAAc,aACdC,MAAAA,EAAQ,WACRC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,EACAC,kBAAAA,EAAoB,gBACpBC,kBAAAA,EAAoB,gBACpBC,kBAAAA,EACAC,QAAAA,EACAC,eAAAA,EACAC,YAAAA,KACGC,GACHpC,EAEyB,eAAzBqC,QAAQC,IAAIC,UAA6B9B,GAASF,GAClDiC,QAAQC,KACJ,sIAKR,MAAM/B,EAAoBgC,EAAAA,gBAAgB/B,GACpCgC,EAAUjC,EACVkC,EAAAA,MAAMlC,GAAmBmC,QAAQ,OAAOC,cACxC,EACAlC,EAAmB8B,EAAAA,gBAAgB7B,GACnCkC,EAAUnC,EACVgC,EAAAA,MAAMhC,GAAkBiC,QAAQ,OAAOC,cACvC,GAECE,EAAMC,IAAWC,EAAAA,SACpBC,EAAAA,eAAe1C,EAAOF,EAAcoC,EAASI,KAE1CK,GAAOC,IAAYH,EAAAA,SAAqC,OAIxDI,GAAcC,IAAmBL,EAAAA,SAAS1C,GAE3CgD,GAAcC,EAAAA,OAAuB,MACrCC,GAAgBD,EAAAA,OAAuB,MAIvCE,GAAgBF,EAAAA,OAAiC,MACjDG,GAAWH,EAAAA,OAAgC,MAG3CI,GAAkBC,EAAAA,YACnBC,IACGH,GAASI,QAAUD,EACf9D,IACiC,mBAAtBA,EACPA,EAAkB8D,GAElB9D,EAAkB+D,QAAUD,IAIxC,CAAC9D,IAGCgE,GAAcH,EAAAA,YACfI,IACQvC,GAAY+B,GAAcM,UAILN,GAAcM,QAAQG,SAC5CD,EAAEE,gBAGFzC,EAAQuC,EAAGlB,EAAM,CAAEI,MAAAA,GAAO3C,MAAOyD,EAAEG,OAAO5D,UAGlD,CAACkB,EAASqB,EAAMI,KAGdkB,GAAaR,EAAAA,YACdI,IACOxC,GACAA,EAAOwC,EAAGlB,EAAM,CAAEI,MAAAA,GAAO3C,MAAOyD,EAAEG,OAAO5D,SAGjD,CAACiB,EAAQsB,EAAMI,KAGbmB,GAAsBT,EAAAA,YACvBI,IACiB,WAAVA,EAAEM,MACFjB,IAAgB,GAChBW,EAAEO,iBACFP,EAAEQ,mBAGF7C,GAAQD,WACRC,EAAOD,UAAUsC,IAGzB,CAACrC,IAGC8C,GAAeb,EAAAA,YAChBI,IACG,MAAMU,EAAWV,EAAEW,cAAcpE,MAC3BqE,EAnLOF,KACzB,MAAMG,EAASH,EAASI,QAAQ,MAAO,IACjCC,EAAqBC,EAAAA,iBAAiBH,EAAQ,CAChDI,SAAS,IAEPC,EAAqCR,EAASI,QAAQ,OAAQ,IAC9DK,EACgB,IAAlBN,EAAOO,OAAeJ,EAAAA,iBAAiBH,GAAUH,EAC/CW,EAAmB7C,EAAAA,gBAAgB2C,GACnCA,EACA,KACAG,EACFZ,IAAaG,GACbK,IAAuCH,QACT,IAA9BvC,EAAAA,gBAAgBkC,IACK,OAArBW,EAEJ,OAAOA,IAAqBC,EAAyBT,EAASH,IAkK3Ba,CAAoBb,GAEvCE,IAAmBF,GAlMjB,EAACc,EAAyBjF,KAC5C,MAAMkF,EAAeC,OAAOC,yBACxBC,iBAAiBC,UACjB,UACDC,IAECL,EACAA,EAAaM,KAAKP,EAAOjF,GAEzBiF,EAAMjF,MAAQA,GA0LFyF,CAAchC,EAAEW,cAAeC,GAGnC,MAAQ9B,KAAMmD,EAAU/C,MAAOgD,GArKf,GAC5B3F,MAAAA,EACAkC,QAAAA,EACAI,QAAAA,MAMA,IAAKtC,EACD,MAAO,CAAEuC,KAAM,KAAMI,MAAO,MAGhC,MAAMiD,EAAa3D,EAAAA,gBAAgBjC,GAEnC,OAAK4F,EAID1D,IAAY2D,EAAAA,mBAAmBD,EAAY1D,GACpC,CAAEK,KAAMqD,EAAYjD,MAAO,uBAGlCL,IAAYwD,EAAAA,mBAAmBF,EAAYtD,GACpC,CAAEC,KAAMqD,EAAYjD,MAAO,uBAG/B,CAAEJ,KAAMqD,EAAYjD,MAAO,MAXvB,CAAEJ,KAAM,KAAMI,MAAO,iBAsJhBoD,CAAwB,CACpB/F,MAAOqE,EACPnC,QAAAA,EACAI,QAAAA,IAGJoD,IAAaC,GACb7C,IAAgB,GAGpBF,GAAS+C,GACTnD,GAAQkD,GAEJ1E,GACAA,EAASyC,EAAGiC,EAAU,CAClB/C,MAAOgD,EACP3F,MAAOqE,KAInB,CAACrD,EAAUkB,EAASI,IAKlB0D,GAAgB3C,EAAAA,YACjBI,IACGwC,EAAAA,UAAU,KACNnD,IAAiBD,MAGrB,MAAMqD,EAAanD,GAAYQ,QACzB4C,EACFD,GACCA,EAAWE,cACR,yBAIRC,OAAOC,sBAAsB,IAAMH,GAAQI,SAEvCnF,GAAQoF,SACRpF,EAAOoF,QAAQ/C,IAGvB,CAACZ,GAAczB,IAGbqF,GAAyBpD,EAAAA,YAC3B,EAAGd,KAAAA,MAIC,GAHAO,IAAgB,GAChBN,GAAQD,GAEJY,GAASI,QAAS,CAClB,MAAMmD,EAAOvD,GAASI,QAEtBmD,EAAK1G,MAAQ2G,EAAAA,YAAYpE,GAGzB,MAAMqE,EAAQC,SAASC,YAAY,cACnCF,EAAMG,UAAU,SAAS,GAAM,GAC/BL,EAAKM,cAAcJ,GAEnBF,EAAKH,QAEDvF,GAIAA,EACI4F,EACArE,EACA,CACII,MAAO,KACP3C,MAAO0G,EAAK1G,OAI5B,GAEJ,CAACgB,IAGCiG,GAA2B5D,cAAaI,IAC1CA,EAAEO,iBACFlB,IAAgB,GAChBI,GAAcK,SAASgD,SACxB,IAEH,OACIW,EAAAA,IAACC,EAAAA,WAAA,CACGzH,GAAAA,EACAC,UAAWyH,EAAAA,KAAK,iBAAkBzH,MAC9BgC,EACJ0F,IAAKpE,GACLrD,MAAAA,EACAC,WAAAA,EACAU,UAAAA,EACAC,WAAAA,EACAe,kBAAAA,EACAC,QAAAA,EACAE,YAAAA,EACA4F,OAASC,GACLL,EAAAA,IAACM,EAAAA,cAAA,CACG,eAAc3E,GAAe,YAAS,EACtCwE,IAAKjE,GACL,cAAY,wBACZ,kBAAiB3D,EACjBE,UAAU,wBACVW,KAAAA,EACAR,aAAAA,EACAE,MAAAA,EACAyH,KAAK,OACL3G,YAAAA,EACAC,MAAAA,EACAG,QAASsC,GACTvC,OAAQ4C,GACR7C,SAAUkD,GACVwD,aACIC,EAAAA,KAACC,EAAAA,QAAA,CACGC,kBAAmB1E,GACnB2E,KAAMjF,GACNkF,aAAc,IACVjF,IAAiBD,IAErBmF,OAAQ,EAERC,SAAA,CAAAf,EAAAA,IAACU,EAAAA,QAAQM,QAAR,IACO9G,EACJ,cAAY,0BACZzB,UAAU,+BACVwI,MACItF,GACMvB,EACAD,EAEV+G,SAAU,EACV5B,QAASR,GACT7E,UAAW2C,GACXuE,SAAO,EAEPJ,SAAAf,EAAAA,IAACoB,aAAA,CACGL,SAAAf,MAACqB,EAAAA,aAAA,CAAA,aAGRX,EAAAA,QAAQY,QAAR,CAAgBC,cAAc,EAAIC,QAAS,GACxCT,SAAAf,EAAAA,IAACyB,EAAAA,SAAA,CACGtB,IAAKtE,GACLR,KAAAA,EACAL,QAAAA,EACAI,QAAAA,EACA5B,KAAAA,EACAC,OAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAR,YAAAA,EACAuI,eAAgBnC,GAChBoC,aAAc5B,aAK1BxF,KACA8F,EACJ,eAAc9G,KAAaD,QAQnDnB,EAAWyJ,YAAc"}
+{"version":3,"file":"DatePicker.cjs","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport React, {\n    type ChangeEvent,\n    type FocusEvent,\n    type KeyboardEvent,\n    type MouseEvent,\n    forwardRef,\n    useCallback,\n    useRef,\n    useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { formatDateString } from \"../../utilities/formatters/date/formatDate.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { type DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport type { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nconst setInputValue = (input: HTMLInputElement, value: string) => {\n    const nativeSetter = Object.getOwnPropertyDescriptor(\n        HTMLInputElement.prototype,\n        \"value\",\n    )?.set;\n\n    if (nativeSetter) {\n        nativeSetter.call(input, value);\n    } else {\n        input.value = value;\n    }\n};\n\nconst normalizeInputValue = (\n    rawValue: string,\n    shouldStripAutoFormatting: boolean,\n) => {\n    const digits = rawValue.replace(/\\D/g, \"\");\n    const partialCompactDate = formatDateString(digits, {\n        partial: true,\n    });\n    const rawValueWithoutTrailingPunctuation = rawValue.replace(/\\D+$/, \"\");\n    const compactDateCandidate =\n        digits.length === 8 ? formatDateString(digits) : rawValue;\n    const validCompactDate = parseDateString(compactDateCandidate)\n        ? compactDateCandidate\n        : null;\n    const shouldRemoveFormatting =\n        shouldStripAutoFormatting &&\n        rawValue !== digits &&\n        rawValueWithoutTrailingPunctuation === partialCompactDate &&\n        parseDateString(rawValue) === undefined &&\n        validCompactDate === null;\n\n    return validCompactDate ?? (shouldRemoveFormatting ? digits : rawValue);\n};\n\nconst getInputValidationState = ({\n    value,\n    minDate,\n    maxDate,\n}: {\n    value: string;\n    minDate?: Date;\n    maxDate?: Date;\n}): { date: Date | null; error: DateValidationError | null } => {\n    if (!value) {\n        return { date: null, error: null };\n    }\n\n    const parsedDate = parseDateString(value);\n\n    if (!parsedDate) {\n        return { date: null, error: \"WRONG_FORMAT\" };\n    }\n\n    if (minDate && !isWithinLowerBound(parsedDate, minDate)) {\n        return { date: parsedDate, error: \"OUTSIDE_LOWER_BOUND\" };\n    }\n\n    if (maxDate && !isWithinUpperBound(parsedDate, maxDate)) {\n        return { date: parsedDate, error: \"OUTSIDE_UPPER_BOUND\" };\n    }\n\n    return { date: parsedDate, error: null };\n};\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n    (props, forwardedInputRef) => {\n        const {\n            \"data-testautoid\": testAutoId,\n            id,\n            className = \"\",\n            label = \"Velg dato\",\n            labelProps,\n            defaultValue,\n            defaultShow = false,\n            value,\n            disableBeforeDate: disableBefore,\n            disableAfterDate: disableAfter,\n            yearsToShow,\n            name,\n            helpLabel,\n            errorLabel,\n            invalid,\n            days,\n            months,\n            monthLabel,\n            yearLabel,\n            placeholder = \"dd.mm.åååå\",\n            width = \"11.25rem\",\n            onChange,\n            onBlur,\n            onFocus,\n            onKeyDown,\n            action,\n            showCalendarLabel = \"Åpne kalender\",\n            hideCalendarLabel = \"Lukk kalender\",\n            supportLabelProps,\n            tooltip,\n            textInputProps,\n            description,\n            ...rest\n        } = props;\n\n        if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n            console.warn(\n                \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n            );\n        }\n        /// Input state\n\n        const disableBeforeDate = parseDateString(disableBefore);\n        const minDate = disableBeforeDate\n            ? dayjs(disableBeforeDate).startOf(\"day\").toDate()\n            : undefined;\n        const disableAfterDate = parseDateString(disableAfter);\n        const maxDate = disableAfterDate\n            ? dayjs(disableAfterDate).startOf(\"day\").toDate()\n            : undefined;\n\n        const [date, setDate] = useState(\n            getInitialDate(value, defaultValue, minDate, maxDate),\n        );\n        const [error, setError] = useState<DateValidationError | null>(null);\n\n        /// Calendar state\n\n        const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n        const calendarRef = useRef<HTMLDivElement>(null);\n        const datepickerRef = useRef<HTMLDivElement>(null);\n\n        /// Input events\n\n        const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const didAutoFormatCompactInputRef = useRef(false);\n\n        // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n        const unifiedInputRef = useCallback(\n            (instance: HTMLInputElement | null) => {\n                inputRef.current = instance;\n                if (forwardedInputRef) {\n                    if (typeof forwardedInputRef === \"function\") {\n                        forwardedInputRef(instance);\n                    } else {\n                        forwardedInputRef.current = instance;\n                    }\n                }\n            },\n            [forwardedInputRef],\n        );\n\n        const handleFocus = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (!onFocus || !datepickerRef.current) {\n                    return;\n                }\n\n                const nextFocusIsInside = datepickerRef.current.contains(\n                    e.relatedTarget as Node,\n                );\n                if (!nextFocusIsInside) {\n                    onFocus(e, date, { error, value: e.target.value });\n                }\n            },\n            [onFocus, date, error],\n        );\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (onBlur) {\n                    onBlur(e, date, { error, value: e.target.value });\n                }\n            },\n            [onBlur, date, error],\n        );\n\n        const handleKeyDownAction = useCallback(\n            (e: React.KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Escape\") {\n                    setShowCalendar(false);\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n\n                if (action?.onKeyDown) {\n                    action.onKeyDown(e);\n                }\n            },\n            [action],\n        );\n\n        const handleChange = useCallback(\n            (e: ChangeEvent<HTMLInputElement>) => {\n                const rawValue = e.currentTarget.value;\n                const formattedValue = normalizeInputValue(\n                    rawValue,\n                    didAutoFormatCompactInputRef.current,\n                );\n\n                if (formattedValue !== rawValue) {\n                    setInputValue(e.currentTarget, formattedValue);\n                }\n\n                const digits = rawValue.replace(/\\D/g, \"\");\n                didAutoFormatCompactInputRef.current =\n                    rawValue === digits &&\n                    formattedValue === formatDateString(digits) &&\n                    formattedValue !== rawValue &&\n                    parseDateString(formattedValue) !== undefined;\n\n                const { date: nextDate, error: nextError } =\n                    getInputValidationState({\n                        value: formattedValue,\n                        minDate,\n                        maxDate,\n                    });\n\n                if (nextDate && !nextError) {\n                    setShowCalendar(false);\n                }\n\n                setError(nextError);\n                setDate(nextDate);\n\n                if (onChange) {\n                    onChange(e, nextDate, {\n                        error: nextError,\n                        value: formattedValue,\n                    });\n                }\n            },\n            [onChange, minDate, maxDate],\n        );\n\n        /// Calendar events\n\n        const clickCalendar = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                flushSync(() => {\n                    setShowCalendar(!showCalendar);\n                });\n\n                const calendarEl = calendarRef.current;\n                const button =\n                    calendarEl &&\n                    (calendarEl.querySelector(\n                        '[aria-pressed=\"true\"]',\n                    ) as HTMLButtonElement);\n                // Make sure the popover-modal is correctly positioned before focusing a button\n                // so we avoid accidentally scrolling to the top of the page\n                window.requestAnimationFrame(() => button?.focus());\n\n                if (action?.onClick) {\n                    action.onClick(e);\n                }\n            },\n            [showCalendar, action],\n        );\n\n        const handleClickCalendarDay = useCallback(\n            ({ date }: DateInfo) => {\n                setShowCalendar(false);\n                setDate(date);\n\n                if (inputRef.current) {\n                    const node = inputRef.current;\n\n                    didAutoFormatCompactInputRef.current = false;\n                    node.value = formatInput(date);\n\n                    // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n                    const event = document.createEvent(\"HTMLEvents\");\n                    event.initEvent(\"input\", true, false);\n                    node.dispatchEvent(event);\n\n                    node.focus();\n\n                    if (onChange) {\n                        // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n                        // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n                        // så kan det hende du må utvide denne for å dekke behovet ditt.\n                        onChange(\n                            event as unknown as ChangeEvent<HTMLInputElement>,\n                            date,\n                            {\n                                error: null,\n                                value: node.value,\n                            },\n                        );\n                    }\n                }\n            },\n            [onChange],\n        );\n\n        const handleTabOutsideCalendar = useCallback((e: KeyboardEvent) => {\n            e.preventDefault();\n            setShowCalendar(false);\n            iconButtonRef.current?.focus();\n        }, []);\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-datepicker\", className)}\n                {...rest}\n                ref={datepickerRef}\n                label={label}\n                labelProps={labelProps}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                render={(inputProps) => (\n                    <BaseTextInput\n                        data-focused={showCalendar ? \"true\" : undefined}\n                        ref={unifiedInputRef}\n                        data-testid=\"jkl-datepicker__input\"\n                        data-testautoid={testAutoId}\n                        className=\"jkl-datepicker__input\"\n                        name={name}\n                        defaultValue={defaultValue}\n                        value={value}\n                        type=\"text\"\n                        placeholder={placeholder}\n                        width={width}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        onChange={handleChange}\n                        actionButton={\n                            <Popover\n                                positionReference={inputRef}\n                                open={showCalendar}\n                                onOpenChange={() =>\n                                    setShowCalendar(!showCalendar)\n                                }\n                                offset={8}\n                            >\n                                <Popover.Trigger\n                                    {...action}\n                                    data-testid=\"jkl-datepicker__trigger\"\n                                    className=\"jkl-text-input-action-button\"\n                                    title={\n                                        showCalendar\n                                            ? hideCalendarLabel\n                                            : showCalendarLabel\n                                    }\n                                    tabIndex={0}\n                                    onClick={clickCalendar}\n                                    onKeyDown={handleKeyDownAction}\n                                    asChild\n                                >\n                                    <IconButton>\n                                        <CalendarIcon />\n                                    </IconButton>\n                                </Popover.Trigger>\n                                <Popover.Content initialFocus={-1} padding={24}>\n                                    <Calendar\n                                        ref={calendarRef}\n                                        date={date}\n                                        minDate={minDate}\n                                        maxDate={maxDate}\n                                        days={days}\n                                        months={months}\n                                        monthLabel={monthLabel}\n                                        yearLabel={yearLabel}\n                                        yearsToShow={yearsToShow}\n                                        onDateSelected={handleClickCalendarDay}\n                                        onTabOutside={handleTabOutsideCalendar}\n                                    />\n                                </Popover.Content>\n                            </Popover>\n                        }\n                        {...textInputProps}\n                        {...inputProps}\n                        aria-invalid={invalid || !!errorLabel}\n                    />\n                )}\n            />\n        );\n    },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","textInputProps","description","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","dayjs","startOf","toDate","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","didAutoFormatCompactInputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","rawValue","currentTarget","formattedValue","shouldStripAutoFormatting","digits","replace","partialCompactDate","formatDateString","partial","rawValueWithoutTrailingPunctuation","compactDateCandidate","length","validCompactDate","shouldRemoveFormatting","normalizeInputValue","input","nativeSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","setInputValue","nextDate","nextError","parsedDate","isWithinLowerBound","isWithinUpperBound","getInputValidationState","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}

package/build/es/components/datepicker/DatePicker.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{d as r,g as o}from"../../../utils-CcE6HjQp.js";import{forwardRef as n,useState as l,useRef as s,useCallback as i}from"react";import{flushSync as u}from"react-dom";import{formatDateString as d}from"../../utilities/formatters/date/formatDate.js";import{IconButton as c}from"../icon-button/IconButton.js";import{CalendarIcon as p}from"../icon/icons/CalendarIcon.js";import{InputGroup as m}from"../input-group/InputGroup.js";import{Popover as f}from"../popover/Popover.js";import{BaseTextInput as v}from"../text-input/BaseTextInput.js";import{Calendar as D}from"./internal/Calendar.js";import{parseDateString as h,formatInput as b}from"./utils.js";import{isWithinLowerBound as g,isWithinUpperBound as k}from"./validation.js";const j=n((n,j)=>{const{"data-testautoid":y,id:L,className:w="",label:x="Velg dato",labelProps:C,defaultValue:I,defaultShow:O=!1,value:P,disableBeforeDate:T,disableAfterDate:B,yearsToShow:E,name:_,helpLabel:S,errorLabel:N,invalid:R,days:U,months:V,monthLabel:F,yearLabel:K,placeholder:W="dd.mm.åååå",width:A="11.25rem",onChange:G,onBlur:H,onFocus:M,onKeyDown:q,action:$,showCalendarLabel:z="Åpne kalender",hideCalendarLabel:J="Lukk kalender",supportLabelProps:Q,tooltip:X,textInputProps:Y,description:Z,...ee}=n;"production"!==process.env.NODE_ENV&&P&&I&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const te=h(T),ae=te?r(te).startOf("day").toDate():void 0,re=h(B),oe=re?r(re).startOf("day").toDate():void 0,[ne,le]=l(o(P,I,ae,oe)),[se,ie]=l(null),[ue,de]=l(O),ce=s(null),pe=s(null),me=s(null),fe=s(null),ve=i(e=>{fe.current=e,j&&("function"==typeof j?j(e):j.current=e)},[j]),De=i(e=>{M&&pe.current&&(pe.current.contains(e.relatedTarget)||M(e,ne,{error:se,value:e.target.value}))},[M,ne,se]),he=i(e=>{H&&H(e,ne,{error:se,value:e.target.value})},[H,ne,se]),be=i(e=>{"Escape"===e.key&&(de(!1),e.preventDefault(),e.stopPropagation()),$?.onKeyDown&&$.onKeyDown(e)},[$]),ge=i(e=>{const t=e.currentTarget.value,a=(e=>{const t=e.replace(/\D/g,""),a=d(t,{partial:!0}),r=e.replace(/\D+$/,""),o=8===t.length?d(t):e,n=h(o)?o:null,l=e!==t&&r===a&&void 0===h(e)&&null===n;return n??(l?t:e)})(t);a!==t&&((e,t)=>{const a=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value")?.set;a?a.call(e,t):e.value=t})(e.currentTarget,a);const{date:r,error:o}=(({value:e,minDate:t,maxDate:a})=>{if(!e)return{date:null,error:null};const r=h(e);return r?t&&!g(r,t)?{date:r,error:"OUTSIDE_LOWER_BOUND"}:a&&!k(r,a)?{date:r,error:"OUTSIDE_UPPER_BOUND"}:{date:r,error:null}:{date:null,error:"WRONG_FORMAT"}})({value:a,minDate:ae,maxDate:oe});r&&!o&&de(!1),ie(o),le(r),G&&G(e,r,{error:o,value:a})},[G,ae,oe]),ke=i(e=>{u(()=>{de(!ue)});const t=ce.current,a=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame(()=>a?.focus()),$?.onClick&&$.onClick(e)},[ue,$]),je=i(({date:e})=>{if(de(!1),le(e),fe.current){const t=fe.current;t.value=b(e);const a=document.createEvent("HTMLEvents");a.initEvent("input",!0,!1),t.dispatchEvent(a),t.focus(),G&&G(a,e,{error:null,value:t.value})}},[G]),ye=i(e=>{e.preventDefault(),de(!1),me.current?.focus()},[]);return e(m,{id:L,className:a("jkl-datepicker",w),...ee,ref:pe,label:x,labelProps:C,helpLabel:S,errorLabel:N,supportLabelProps:Q,tooltip:X,description:Z,render:a=>e(v,{"data-focused":ue?"true":void 0,ref:ve,"data-testid":"jkl-datepicker__input","data-testautoid":y,className:"jkl-datepicker__input",name:_,defaultValue:I,value:P,type:"text",placeholder:W,width:A,onFocus:De,onBlur:he,onChange:ge,actionButton:t(f,{positionReference:fe,open:ue,onOpenChange:()=>de(!ue),offset:8,children:[e(f.Trigger,{...$,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ue?J:z,tabIndex:0,onClick:ke,onKeyDown:be,asChild:!0,children:e(c,{children:e(p,{})})}),e(f.Content,{initialFocus:-1,padding:24,children:e(D,{ref:ce,date:ne,minDate:ae,maxDate:oe,days:U,months:V,monthLabel:F,yearLabel:K,yearsToShow:E,onDateSelected:je,onTabOutside:ye})})]}),...Y,...a,"aria-invalid":R||!!N})})});j.displayName="DatePicker";export{j as DatePicker};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{d as a,g as o}from"../../../utils-CcE6HjQp.js";import{forwardRef as n,useState as l,useRef as s,useCallback as i}from"react";import{flushSync as u}from"react-dom";import{formatDateString as c}from"../../utilities/formatters/date/formatDate.js";import{IconButton as d}from"../icon-button/IconButton.js";import{CalendarIcon as p}from"../icon/icons/CalendarIcon.js";import{InputGroup as m}from"../input-group/InputGroup.js";import{Popover as f}from"../popover/Popover.js";import{BaseTextInput as v}from"../text-input/BaseTextInput.js";import{Calendar as D}from"./internal/Calendar.js";import{parseDateString as h,formatInput as b}from"./utils.js";import{isWithinLowerBound as g,isWithinUpperBound as k}from"./validation.js";const j=n((n,j)=>{const{"data-testautoid":y,id:L,className:w="",label:x="Velg dato",labelProps:C,defaultValue:I,defaultShow:O=!1,value:P,disableBeforeDate:T,disableAfterDate:B,yearsToShow:E,name:_,helpLabel:S,errorLabel:N,invalid:R,days:U,months:V,monthLabel:F,yearLabel:K,placeholder:W="dd.mm.åååå",width:A="11.25rem",onChange:G,onBlur:H,onFocus:M,onKeyDown:q,action:$,showCalendarLabel:z="Åpne kalender",hideCalendarLabel:J="Lukk kalender",supportLabelProps:Q,tooltip:X,textInputProps:Y,description:Z,...ee}=n;"production"!==process.env.NODE_ENV&&P&&I&&console.warn("DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.");const te=h(T),re=te?a(te).startOf("day").toDate():void 0,ae=h(B),oe=ae?a(ae).startOf("day").toDate():void 0,[ne,le]=l(o(P,I,re,oe)),[se,ie]=l(null),[ue,ce]=l(O),de=s(null),pe=s(null),me=s(null),fe=s(null),ve=s(!1),De=i(e=>{fe.current=e,j&&("function"==typeof j?j(e):j.current=e)},[j]),he=i(e=>{M&&pe.current&&(pe.current.contains(e.relatedTarget)||M(e,ne,{error:se,value:e.target.value}))},[M,ne,se]),be=i(e=>{H&&H(e,ne,{error:se,value:e.target.value})},[H,ne,se]),ge=i(e=>{"Escape"===e.key&&(ce(!1),e.preventDefault(),e.stopPropagation()),$?.onKeyDown&&$.onKeyDown(e)},[$]),ke=i(e=>{const t=e.currentTarget.value,r=((e,t)=>{const r=e.replace(/\D/g,""),a=c(r,{partial:!0}),o=e.replace(/\D+$/,""),n=8===r.length?c(r):e,l=h(n)?n:null,s=t&&e!==r&&o===a&&void 0===h(e)&&null===l;return l??(s?r:e)})(t,ve.current);r!==t&&((e,t)=>{const r=Object.getOwnPropertyDescriptor(HTMLInputElement.prototype,"value")?.set;r?r.call(e,t):e.value=t})(e.currentTarget,r);const a=t.replace(/\D/g,"");ve.current=t===a&&r===c(a)&&r!==t&&void 0!==h(r);const{date:o,error:n}=(({value:e,minDate:t,maxDate:r})=>{if(!e)return{date:null,error:null};const a=h(e);return a?t&&!g(a,t)?{date:a,error:"OUTSIDE_LOWER_BOUND"}:r&&!k(a,r)?{date:a,error:"OUTSIDE_UPPER_BOUND"}:{date:a,error:null}:{date:null,error:"WRONG_FORMAT"}})({value:r,minDate:re,maxDate:oe});o&&!n&&ce(!1),ie(n),le(o),G&&G(e,o,{error:n,value:r})},[G,re,oe]),je=i(e=>{u(()=>{ce(!ue)});const t=de.current,r=t&&t.querySelector('[aria-pressed="true"]');window.requestAnimationFrame(()=>r?.focus()),$?.onClick&&$.onClick(e)},[ue,$]),ye=i(({date:e})=>{if(ce(!1),le(e),fe.current){const t=fe.current;ve.current=!1,t.value=b(e);const r=document.createEvent("HTMLEvents");r.initEvent("input",!0,!1),t.dispatchEvent(r),t.focus(),G&&G(r,e,{error:null,value:t.value})}},[G]),Le=i(e=>{e.preventDefault(),ce(!1),me.current?.focus()},[]);return e(m,{id:L,className:r("jkl-datepicker",w),...ee,ref:pe,label:x,labelProps:C,helpLabel:S,errorLabel:N,supportLabelProps:Q,tooltip:X,description:Z,render:r=>e(v,{"data-focused":ue?"true":void 0,ref:De,"data-testid":"jkl-datepicker__input","data-testautoid":y,className:"jkl-datepicker__input",name:_,defaultValue:I,value:P,type:"text",placeholder:W,width:A,onFocus:he,onBlur:be,onChange:ke,actionButton:t(f,{positionReference:fe,open:ue,onOpenChange:()=>ce(!ue),offset:8,children:[e(f.Trigger,{...$,"data-testid":"jkl-datepicker__trigger",className:"jkl-text-input-action-button",title:ue?J:z,tabIndex:0,onClick:je,onKeyDown:ge,asChild:!0,children:e(d,{children:e(p,{})})}),e(f.Content,{initialFocus:-1,padding:24,children:e(D,{ref:de,date:ne,minDate:re,maxDate:oe,days:U,months:V,monthLabel:F,yearLabel:K,yearsToShow:E,onDateSelected:ye,onTabOutside:Le})})]}),...Y,...r,"aria-invalid":R||!!N})})});j.displayName="DatePicker";export{j as DatePicker};
 //# sourceMappingURL=DatePicker.js.map

package/build/es/components/datepicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport React, {\n    type ChangeEvent,\n    type FocusEvent,\n    type KeyboardEvent,\n    type MouseEvent,\n    forwardRef,\n    useCallback,\n    useRef,\n    useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { formatDateString } from \"../../utilities/formatters/date/formatDate.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { type DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport type { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nconst setInputValue = (input: HTMLInputElement, value: string) => {\n    const nativeSetter = Object.getOwnPropertyDescriptor(\n        HTMLInputElement.prototype,\n        \"value\",\n    )?.set;\n\n    if (nativeSetter) {\n        nativeSetter.call(input, value);\n    } else {\n        input.value = value;\n    }\n};\n\nconst normalizeInputValue = (rawValue: string) => {\n    const digits = rawValue.replace(/\\D/g, \"\");\n    const partialCompactDate = formatDateString(digits, {\n        partial: true,\n    });\n    const rawValueWithoutTrailingPunctuation = rawValue.replace(/\\D+$/, \"\");\n    const compactDateCandidate =\n        digits.length === 8 ? formatDateString(digits) : rawValue;\n    const validCompactDate = parseDateString(compactDateCandidate)\n        ? compactDateCandidate\n        : null;\n    const shouldRemoveFormatting =\n        rawValue !== digits &&\n        rawValueWithoutTrailingPunctuation === partialCompactDate &&\n        parseDateString(rawValue) === undefined &&\n        validCompactDate === null;\n\n    return validCompactDate ?? (shouldRemoveFormatting ? digits : rawValue);\n};\n\nconst getInputValidationState = ({\n    value,\n    minDate,\n    maxDate,\n}: {\n    value: string;\n    minDate?: Date;\n    maxDate?: Date;\n}): { date: Date | null; error: DateValidationError | null } => {\n    if (!value) {\n        return { date: null, error: null };\n    }\n\n    const parsedDate = parseDateString(value);\n\n    if (!parsedDate) {\n        return { date: null, error: \"WRONG_FORMAT\" };\n    }\n\n    if (minDate && !isWithinLowerBound(parsedDate, minDate)) {\n        return { date: parsedDate, error: \"OUTSIDE_LOWER_BOUND\" };\n    }\n\n    if (maxDate && !isWithinUpperBound(parsedDate, maxDate)) {\n        return { date: parsedDate, error: \"OUTSIDE_UPPER_BOUND\" };\n    }\n\n    return { date: parsedDate, error: null };\n};\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n    (props, forwardedInputRef) => {\n        const {\n            \"data-testautoid\": testAutoId,\n            id,\n            className = \"\",\n            label = \"Velg dato\",\n            labelProps,\n            defaultValue,\n            defaultShow = false,\n            value,\n            disableBeforeDate: disableBefore,\n            disableAfterDate: disableAfter,\n            yearsToShow,\n            name,\n            helpLabel,\n            errorLabel,\n            invalid,\n            days,\n            months,\n            monthLabel,\n            yearLabel,\n            placeholder = \"dd.mm.åååå\",\n            width = \"11.25rem\",\n            onChange,\n            onBlur,\n            onFocus,\n            onKeyDown,\n            action,\n            showCalendarLabel = \"Åpne kalender\",\n            hideCalendarLabel = \"Lukk kalender\",\n            supportLabelProps,\n            tooltip,\n            textInputProps,\n            description,\n            ...rest\n        } = props;\n\n        if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n            console.warn(\n                \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n            );\n        }\n        /// Input state\n\n        const disableBeforeDate = parseDateString(disableBefore);\n        const minDate = disableBeforeDate\n            ? dayjs(disableBeforeDate).startOf(\"day\").toDate()\n            : undefined;\n        const disableAfterDate = parseDateString(disableAfter);\n        const maxDate = disableAfterDate\n            ? dayjs(disableAfterDate).startOf(\"day\").toDate()\n            : undefined;\n\n        const [date, setDate] = useState(\n            getInitialDate(value, defaultValue, minDate, maxDate),\n        );\n        const [error, setError] = useState<DateValidationError | null>(null);\n\n        /// Calendar state\n\n        const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n        const calendarRef = useRef<HTMLDivElement>(null);\n        const datepickerRef = useRef<HTMLDivElement>(null);\n\n        /// Input events\n\n        const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n\n        // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n        const unifiedInputRef = useCallback(\n            (instance: HTMLInputElement | null) => {\n                inputRef.current = instance;\n                if (forwardedInputRef) {\n                    if (typeof forwardedInputRef === \"function\") {\n                        forwardedInputRef(instance);\n                    } else {\n                        forwardedInputRef.current = instance;\n                    }\n                }\n            },\n            [forwardedInputRef],\n        );\n\n        const handleFocus = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (!onFocus || !datepickerRef.current) {\n                    return;\n                }\n\n                const nextFocusIsInside = datepickerRef.current.contains(\n                    e.relatedTarget as Node,\n                );\n                if (!nextFocusIsInside) {\n                    onFocus(e, date, { error, value: e.target.value });\n                }\n            },\n            [onFocus, date, error],\n        );\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (onBlur) {\n                    onBlur(e, date, { error, value: e.target.value });\n                }\n            },\n            [onBlur, date, error],\n        );\n\n        const handleKeyDownAction = useCallback(\n            (e: React.KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Escape\") {\n                    setShowCalendar(false);\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n\n                if (action?.onKeyDown) {\n                    action.onKeyDown(e);\n                }\n            },\n            [action],\n        );\n\n        const handleChange = useCallback(\n            (e: ChangeEvent<HTMLInputElement>) => {\n                const rawValue = e.currentTarget.value;\n                const formattedValue = normalizeInputValue(rawValue);\n\n                if (formattedValue !== rawValue) {\n                    setInputValue(e.currentTarget, formattedValue);\n                }\n\n                const { date: nextDate, error: nextError } =\n                    getInputValidationState({\n                        value: formattedValue,\n                        minDate,\n                        maxDate,\n                    });\n\n                if (nextDate && !nextError) {\n                    setShowCalendar(false);\n                }\n\n                setError(nextError);\n                setDate(nextDate);\n\n                if (onChange) {\n                    onChange(e, nextDate, {\n                        error: nextError,\n                        value: formattedValue,\n                    });\n                }\n            },\n            [onChange, minDate, maxDate],\n        );\n\n        /// Calendar events\n\n        const clickCalendar = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                flushSync(() => {\n                    setShowCalendar(!showCalendar);\n                });\n\n                const calendarEl = calendarRef.current;\n                const button =\n                    calendarEl &&\n                    (calendarEl.querySelector(\n                        '[aria-pressed=\"true\"]',\n                    ) as HTMLButtonElement);\n                // Make sure the popover-modal is correctly positioned before focusing a button\n                // so we avoid accidentally scrolling to the top of the page\n                window.requestAnimationFrame(() => button?.focus());\n\n                if (action?.onClick) {\n                    action.onClick(e);\n                }\n            },\n            [showCalendar, action],\n        );\n\n        const handleClickCalendarDay = useCallback(\n            ({ date }: DateInfo) => {\n                setShowCalendar(false);\n                setDate(date);\n\n                if (inputRef.current) {\n                    const node = inputRef.current;\n\n                    node.value = formatInput(date);\n\n                    // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n                    const event = document.createEvent(\"HTMLEvents\");\n                    event.initEvent(\"input\", true, false);\n                    node.dispatchEvent(event);\n\n                    node.focus();\n\n                    if (onChange) {\n                        // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n                        // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n                        // så kan det hende du må utvide denne for å dekke behovet ditt.\n                        onChange(\n                            event as unknown as ChangeEvent<HTMLInputElement>,\n                            date,\n                            {\n                                error: null,\n                                value: node.value,\n                            },\n                        );\n                    }\n                }\n            },\n            [onChange],\n        );\n\n        const handleTabOutsideCalendar = useCallback((e: KeyboardEvent) => {\n            e.preventDefault();\n            setShowCalendar(false);\n            iconButtonRef.current?.focus();\n        }, []);\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-datepicker\", className)}\n                {...rest}\n                ref={datepickerRef}\n                label={label}\n                labelProps={labelProps}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                render={(inputProps) => (\n                    <BaseTextInput\n                        data-focused={showCalendar ? \"true\" : undefined}\n                        ref={unifiedInputRef}\n                        data-testid=\"jkl-datepicker__input\"\n                        data-testautoid={testAutoId}\n                        className=\"jkl-datepicker__input\"\n                        name={name}\n                        defaultValue={defaultValue}\n                        value={value}\n                        type=\"text\"\n                        placeholder={placeholder}\n                        width={width}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        onChange={handleChange}\n                        actionButton={\n                            <Popover\n                                positionReference={inputRef}\n                                open={showCalendar}\n                                onOpenChange={() =>\n                                    setShowCalendar(!showCalendar)\n                                }\n                                offset={8}\n                            >\n                                <Popover.Trigger\n                                    {...action}\n                                    data-testid=\"jkl-datepicker__trigger\"\n                                    className=\"jkl-text-input-action-button\"\n                                    title={\n                                        showCalendar\n                                            ? hideCalendarLabel\n                                            : showCalendarLabel\n                                    }\n                                    tabIndex={0}\n                                    onClick={clickCalendar}\n                                    onKeyDown={handleKeyDownAction}\n                                    asChild\n                                >\n                                    <IconButton>\n                                        <CalendarIcon />\n                                    </IconButton>\n                                </Popover.Trigger>\n                                <Popover.Content initialFocus={-1} padding={24}>\n                                    <Calendar\n                                        ref={calendarRef}\n                                        date={date}\n                                        minDate={minDate}\n                                        maxDate={maxDate}\n                                        days={days}\n                                        months={months}\n                                        monthLabel={monthLabel}\n                                        yearLabel={yearLabel}\n                                        yearsToShow={yearsToShow}\n                                        onDateSelected={handleClickCalendarDay}\n                                        onTabOutside={handleTabOutsideCalendar}\n                                    />\n                                </Popover.Content>\n                            </Popover>\n                        }\n                        {...textInputProps}\n                        {...inputProps}\n                        aria-invalid={invalid || !!errorLabel}\n                    />\n                )}\n            />\n        );\n    },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","textInputProps","description","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","dayjs","startOf","toDate","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","rawValue","currentTarget","formattedValue","digits","replace","partialCompactDate","formatDateString","partial","rawValueWithoutTrailingPunctuation","compactDateCandidate","length","validCompactDate","shouldRemoveFormatting","normalizeInputValue","input","nativeSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","setInputValue","nextDate","nextError","parsedDate","isWithinLowerBound","isWithinUpperBound","getInputValidationState","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datepicker/DatePicker.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport React, {\n    type ChangeEvent,\n    type FocusEvent,\n    type KeyboardEvent,\n    type MouseEvent,\n    forwardRef,\n    useCallback,\n    useRef,\n    useState,\n} from \"react\";\nimport { flushSync } from \"react-dom\";\nimport { formatDateString } from \"../../utilities/formatters/date/formatDate.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CalendarIcon } from \"../icon/icons/CalendarIcon.js\";\nimport { InputGroup } from \"../input-group/InputGroup.js\";\nimport Popover from \"../popover/Popover.js\";\nimport { BaseTextInput } from \"../text-input/BaseTextInput.js\";\nimport { Calendar } from \"./internal/Calendar.js\";\nimport { type DateInfo, getInitialDate } from \"./internal/utils.js\";\nimport type { DatePickerProps, DateValidationError } from \"./types.js\";\nimport { formatInput, parseDateString } from \"./utils.js\";\nimport { isWithinLowerBound, isWithinUpperBound } from \"./validation.js\";\n\nconst setInputValue = (input: HTMLInputElement, value: string) => {\n    const nativeSetter = Object.getOwnPropertyDescriptor(\n        HTMLInputElement.prototype,\n        \"value\",\n    )?.set;\n\n    if (nativeSetter) {\n        nativeSetter.call(input, value);\n    } else {\n        input.value = value;\n    }\n};\n\nconst normalizeInputValue = (\n    rawValue: string,\n    shouldStripAutoFormatting: boolean,\n) => {\n    const digits = rawValue.replace(/\\D/g, \"\");\n    const partialCompactDate = formatDateString(digits, {\n        partial: true,\n    });\n    const rawValueWithoutTrailingPunctuation = rawValue.replace(/\\D+$/, \"\");\n    const compactDateCandidate =\n        digits.length === 8 ? formatDateString(digits) : rawValue;\n    const validCompactDate = parseDateString(compactDateCandidate)\n        ? compactDateCandidate\n        : null;\n    const shouldRemoveFormatting =\n        shouldStripAutoFormatting &&\n        rawValue !== digits &&\n        rawValueWithoutTrailingPunctuation === partialCompactDate &&\n        parseDateString(rawValue) === undefined &&\n        validCompactDate === null;\n\n    return validCompactDate ?? (shouldRemoveFormatting ? digits : rawValue);\n};\n\nconst getInputValidationState = ({\n    value,\n    minDate,\n    maxDate,\n}: {\n    value: string;\n    minDate?: Date;\n    maxDate?: Date;\n}): { date: Date | null; error: DateValidationError | null } => {\n    if (!value) {\n        return { date: null, error: null };\n    }\n\n    const parsedDate = parseDateString(value);\n\n    if (!parsedDate) {\n        return { date: null, error: \"WRONG_FORMAT\" };\n    }\n\n    if (minDate && !isWithinLowerBound(parsedDate, minDate)) {\n        return { date: parsedDate, error: \"OUTSIDE_LOWER_BOUND\" };\n    }\n\n    if (maxDate && !isWithinUpperBound(parsedDate, maxDate)) {\n        return { date: parsedDate, error: \"OUTSIDE_UPPER_BOUND\" };\n    }\n\n    return { date: parsedDate, error: null };\n};\n\nexport const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(\n    (props, forwardedInputRef) => {\n        const {\n            \"data-testautoid\": testAutoId,\n            id,\n            className = \"\",\n            label = \"Velg dato\",\n            labelProps,\n            defaultValue,\n            defaultShow = false,\n            value,\n            disableBeforeDate: disableBefore,\n            disableAfterDate: disableAfter,\n            yearsToShow,\n            name,\n            helpLabel,\n            errorLabel,\n            invalid,\n            days,\n            months,\n            monthLabel,\n            yearLabel,\n            placeholder = \"dd.mm.åååå\",\n            width = \"11.25rem\",\n            onChange,\n            onBlur,\n            onFocus,\n            onKeyDown,\n            action,\n            showCalendarLabel = \"Åpne kalender\",\n            hideCalendarLabel = \"Lukk kalender\",\n            supportLabelProps,\n            tooltip,\n            textInputProps,\n            description,\n            ...rest\n        } = props;\n\n        if (process.env.NODE_ENV !== \"production\" && value && defaultValue) {\n            console.warn(\n                \"DatePicker må enten være controlled eller uncontrolled. Hvis du bruker defaultValue og value sammen vil defaultValue bli ignorert.\",\n            );\n        }\n        /// Input state\n\n        const disableBeforeDate = parseDateString(disableBefore);\n        const minDate = disableBeforeDate\n            ? dayjs(disableBeforeDate).startOf(\"day\").toDate()\n            : undefined;\n        const disableAfterDate = parseDateString(disableAfter);\n        const maxDate = disableAfterDate\n            ? dayjs(disableAfterDate).startOf(\"day\").toDate()\n            : undefined;\n\n        const [date, setDate] = useState(\n            getInitialDate(value, defaultValue, minDate, maxDate),\n        );\n        const [error, setError] = useState<DateValidationError | null>(null);\n\n        /// Calendar state\n\n        const [showCalendar, setShowCalendar] = useState(defaultShow);\n\n        const calendarRef = useRef<HTMLDivElement>(null);\n        const datepickerRef = useRef<HTMLDivElement>(null);\n\n        /// Input events\n\n        const iconButtonRef = useRef<HTMLButtonElement | null>(null);\n        const inputRef = useRef<HTMLInputElement | null>(null);\n        const didAutoFormatCompactInputRef = useRef(false);\n\n        // Hjelper for å gjøre det enklere å både forwarde refen men også bruke den selv internt\n        const unifiedInputRef = useCallback(\n            (instance: HTMLInputElement | null) => {\n                inputRef.current = instance;\n                if (forwardedInputRef) {\n                    if (typeof forwardedInputRef === \"function\") {\n                        forwardedInputRef(instance);\n                    } else {\n                        forwardedInputRef.current = instance;\n                    }\n                }\n            },\n            [forwardedInputRef],\n        );\n\n        const handleFocus = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (!onFocus || !datepickerRef.current) {\n                    return;\n                }\n\n                const nextFocusIsInside = datepickerRef.current.contains(\n                    e.relatedTarget as Node,\n                );\n                if (!nextFocusIsInside) {\n                    onFocus(e, date, { error, value: e.target.value });\n                }\n            },\n            [onFocus, date, error],\n        );\n\n        const handleBlur = useCallback(\n            (e: FocusEvent<HTMLInputElement>) => {\n                if (onBlur) {\n                    onBlur(e, date, { error, value: e.target.value });\n                }\n            },\n            [onBlur, date, error],\n        );\n\n        const handleKeyDownAction = useCallback(\n            (e: React.KeyboardEvent<HTMLButtonElement>) => {\n                if (e.key === \"Escape\") {\n                    setShowCalendar(false);\n                    e.preventDefault();\n                    e.stopPropagation();\n                }\n\n                if (action?.onKeyDown) {\n                    action.onKeyDown(e);\n                }\n            },\n            [action],\n        );\n\n        const handleChange = useCallback(\n            (e: ChangeEvent<HTMLInputElement>) => {\n                const rawValue = e.currentTarget.value;\n                const formattedValue = normalizeInputValue(\n                    rawValue,\n                    didAutoFormatCompactInputRef.current,\n                );\n\n                if (formattedValue !== rawValue) {\n                    setInputValue(e.currentTarget, formattedValue);\n                }\n\n                const digits = rawValue.replace(/\\D/g, \"\");\n                didAutoFormatCompactInputRef.current =\n                    rawValue === digits &&\n                    formattedValue === formatDateString(digits) &&\n                    formattedValue !== rawValue &&\n                    parseDateString(formattedValue) !== undefined;\n\n                const { date: nextDate, error: nextError } =\n                    getInputValidationState({\n                        value: formattedValue,\n                        minDate,\n                        maxDate,\n                    });\n\n                if (nextDate && !nextError) {\n                    setShowCalendar(false);\n                }\n\n                setError(nextError);\n                setDate(nextDate);\n\n                if (onChange) {\n                    onChange(e, nextDate, {\n                        error: nextError,\n                        value: formattedValue,\n                    });\n                }\n            },\n            [onChange, minDate, maxDate],\n        );\n\n        /// Calendar events\n\n        const clickCalendar = useCallback(\n            (e: MouseEvent<HTMLButtonElement>) => {\n                flushSync(() => {\n                    setShowCalendar(!showCalendar);\n                });\n\n                const calendarEl = calendarRef.current;\n                const button =\n                    calendarEl &&\n                    (calendarEl.querySelector(\n                        '[aria-pressed=\"true\"]',\n                    ) as HTMLButtonElement);\n                // Make sure the popover-modal is correctly positioned before focusing a button\n                // so we avoid accidentally scrolling to the top of the page\n                window.requestAnimationFrame(() => button?.focus());\n\n                if (action?.onClick) {\n                    action.onClick(e);\n                }\n            },\n            [showCalendar, action],\n        );\n\n        const handleClickCalendarDay = useCallback(\n            ({ date }: DateInfo) => {\n                setShowCalendar(false);\n                setDate(date);\n\n                if (inputRef.current) {\n                    const node = inputRef.current;\n\n                    didAutoFormatCompactInputRef.current = false;\n                    node.value = formatInput(date);\n\n                    // Simulér et change-event så APIet blir så likt som mulig en endring av inputfeltet\n                    const event = document.createEvent(\"HTMLEvents\");\n                    event.initEvent(\"input\", true, false);\n                    node.dispatchEvent(event);\n\n                    node.focus();\n\n                    if (onChange) {\n                        // Det er ikke helt sant at dette er et React.SyntheticEvent, men it's fine – probably?\n                        // Den har tingene man kan forvente, men hvis du gjør serdeles fancy ting med events\n                        // så kan det hende du må utvide denne for å dekke behovet ditt.\n                        onChange(\n                            event as unknown as ChangeEvent<HTMLInputElement>,\n                            date,\n                            {\n                                error: null,\n                                value: node.value,\n                            },\n                        );\n                    }\n                }\n            },\n            [onChange],\n        );\n\n        const handleTabOutsideCalendar = useCallback((e: KeyboardEvent) => {\n            e.preventDefault();\n            setShowCalendar(false);\n            iconButtonRef.current?.focus();\n        }, []);\n\n        return (\n            <InputGroup\n                id={id}\n                className={clsx(\"jkl-datepicker\", className)}\n                {...rest}\n                ref={datepickerRef}\n                label={label}\n                labelProps={labelProps}\n                helpLabel={helpLabel}\n                errorLabel={errorLabel}\n                supportLabelProps={supportLabelProps}\n                tooltip={tooltip}\n                description={description}\n                render={(inputProps) => (\n                    <BaseTextInput\n                        data-focused={showCalendar ? \"true\" : undefined}\n                        ref={unifiedInputRef}\n                        data-testid=\"jkl-datepicker__input\"\n                        data-testautoid={testAutoId}\n                        className=\"jkl-datepicker__input\"\n                        name={name}\n                        defaultValue={defaultValue}\n                        value={value}\n                        type=\"text\"\n                        placeholder={placeholder}\n                        width={width}\n                        onFocus={handleFocus}\n                        onBlur={handleBlur}\n                        onChange={handleChange}\n                        actionButton={\n                            <Popover\n                                positionReference={inputRef}\n                                open={showCalendar}\n                                onOpenChange={() =>\n                                    setShowCalendar(!showCalendar)\n                                }\n                                offset={8}\n                            >\n                                <Popover.Trigger\n                                    {...action}\n                                    data-testid=\"jkl-datepicker__trigger\"\n                                    className=\"jkl-text-input-action-button\"\n                                    title={\n                                        showCalendar\n                                            ? hideCalendarLabel\n                                            : showCalendarLabel\n                                    }\n                                    tabIndex={0}\n                                    onClick={clickCalendar}\n                                    onKeyDown={handleKeyDownAction}\n                                    asChild\n                                >\n                                    <IconButton>\n                                        <CalendarIcon />\n                                    </IconButton>\n                                </Popover.Trigger>\n                                <Popover.Content initialFocus={-1} padding={24}>\n                                    <Calendar\n                                        ref={calendarRef}\n                                        date={date}\n                                        minDate={minDate}\n                                        maxDate={maxDate}\n                                        days={days}\n                                        months={months}\n                                        monthLabel={monthLabel}\n                                        yearLabel={yearLabel}\n                                        yearsToShow={yearsToShow}\n                                        onDateSelected={handleClickCalendarDay}\n                                        onTabOutside={handleTabOutsideCalendar}\n                                    />\n                                </Popover.Content>\n                            </Popover>\n                        }\n                        {...textInputProps}\n                        {...inputProps}\n                        aria-invalid={invalid || !!errorLabel}\n                    />\n                )}\n            />\n        );\n    },\n);\n\nDatePicker.displayName = \"DatePicker\";\n"],"names":["DatePicker","forwardRef","props","forwardedInputRef","testAutoId","id","className","label","labelProps","defaultValue","defaultShow","value","disableBeforeDate","disableBefore","disableAfterDate","disableAfter","yearsToShow","name","helpLabel","errorLabel","invalid","days","months","monthLabel","yearLabel","placeholder","width","onChange","onBlur","onFocus","onKeyDown","action","showCalendarLabel","hideCalendarLabel","supportLabelProps","tooltip","textInputProps","description","rest","process","env","NODE_ENV","console","warn","parseDateString","minDate","dayjs","startOf","toDate","maxDate","date","setDate","useState","getInitialDate","error","setError","showCalendar","setShowCalendar","calendarRef","useRef","datepickerRef","iconButtonRef","inputRef","didAutoFormatCompactInputRef","unifiedInputRef","useCallback","instance","current","handleFocus","e","contains","relatedTarget","target","handleBlur","handleKeyDownAction","key","preventDefault","stopPropagation","handleChange","rawValue","currentTarget","formattedValue","shouldStripAutoFormatting","digits","replace","partialCompactDate","formatDateString","partial","rawValueWithoutTrailingPunctuation","compactDateCandidate","length","validCompactDate","shouldRemoveFormatting","normalizeInputValue","input","nativeSetter","Object","getOwnPropertyDescriptor","HTMLInputElement","prototype","set","call","setInputValue","nextDate","nextError","parsedDate","isWithinLowerBound","isWithinUpperBound","getInputValidationState","clickCalendar","flushSync","calendarEl","button","querySelector","window","requestAnimationFrame","focus","onClick","handleClickCalendarDay","node","formatInput","event","document","createEvent","initEvent","dispatchEvent","handleTabOutsideCalendar","jsx","InputGroup","clsx","ref","render","inputProps","BaseTextInput","type","actionButton","jsxs","Popover","positionReference","open","onOpenChange","offset","children","Trigger","title","tabIndex","asChild","IconButton","CalendarIcon","Content","initialFocus","padding","Calendar","onDateSelected","onTabOutside","displayName"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fremtind/jokul",
-  "version": "4.5.0",
+  "version": "4.5.1",
   "type": "module",
   "publishConfig": {
     "access": "public"

package/styles/components/countdown/countdown.css

@@ -26,10 +26,10 @@
     }
   }
   .jkl-countdown__tracker {
-    animation: jkl-downcount-u3htdho var(--duration) linear forwards;
+    animation: jkl-downcount-ue9eid9 var(--duration) linear forwards;
     animation-play-state: var(--play-state, running);
   }
-  @keyframes jkl-downcount-u3htdho {
+  @keyframes jkl-downcount-ue9eid9 {
     from {
       width: 100%;
     }

package/styles/components/countdown/countdown.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-u3htdho var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-u3htdho{0%{width:100%}to{width:0}}}
+@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-separator);--bar-color:var(--jkl-color-border-input-focus);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-ue9eid9 var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-ue9eid9{0%{width:100%}to{width:0}}}

package/styles/components/feedback/feedback.css

@@ -24,12 +24,12 @@
     --jkl-icon-size: 1.2em;
   }
   .jkl-feedback__fade-in {
-    animation: jkl-show-uivdlls 0.25s ease-out;
+    animation: jkl-show-uob8ue9 0.25s ease-out;
   }
   .jkl-feedback__buttons {
     display: flex;
   }
-  @keyframes jkl-show-uivdlls {
+  @keyframes jkl-show-uob8ue9 {
     from {
       transform: translate3d(0, 0.5rem, 0);
       opacity: 0;

package/styles/components/feedback/feedback.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);margin-bottom:var(--jkl-unit-20);--jkl-icon-weight:300;--jkl-icon-size:1.2em}.jkl-feedback__fade-in{animation:jkl-show-uivdlls .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-uivdlls{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}}
+@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:.25s;transition-property:height;transition-timing-function:ease;width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);margin-bottom:var(--jkl-unit-20);--jkl-icon-weight:300;--jkl-icon-size:1.2em}.jkl-feedback__fade-in{animation:jkl-show-uob8ue9 .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-uob8ue9{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:.75rem;justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:.15s;transition-property:transform,color;transition-timing-function:ease;width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity;transition-timing-function:ease}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem rgba(0,0,0,.1);inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-action);outline-offset:3px}}

package/styles/components/file-input/file-input.css

@@ -348,22 +348,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uycbche;
+    animation-name: jkl-loader-left-spin-uqr00z2;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uycbcho;
+    animation-name: jkl-loader-middle-spin-uqr0101;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uycbci4;
+    animation-name: jkl-loader-right-spin-uqr010o;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uycbche {
+  @keyframes jkl-loader-left-spin-uqr00z2 {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -377,7 +377,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uycbcho {
+  @keyframes jkl-loader-middle-spin-uqr0101 {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -394,7 +394,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uycbci4 {
+  @keyframes jkl-loader-right-spin-uqr010o {
     0% {
       transform: rotate(40deg) scale(0);
     }
@@ -434,7 +434,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-uycbcim;
+      animation: 2s ease infinite jkl-blink-uqr0118;
     }
   }
   .jkl-skeleton-input {
@@ -482,10 +482,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-uycbcim;
+      animation: 2s ease-in-out infinite jkl-blink-uqr0118;
     }
   }
-  @keyframes jkl-blink-uycbcim {
+  @keyframes jkl-blink-uqr0118 {
     0% {
       opacity: 1;
     }

package/styles/components/file-input/file-input.min.css

@@ -1 +1 @@
-@charset "UTF-8";@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-width:var(--jkl-unit-70);--jkl-file-thumbnail-max-height:var(--jkl-unit-90);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-separator);--border-radius:2px;--bg:transparent;--transition-time:250ms}.jkl-file__content{align-items:center;background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--jkl-color-text-default);display:grid;gap:var(--jkl-file-gap);grid-template-areas:"image text button";grid-template-columns:var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:.1s;transition-property:background-color,border-color,color;transition-timing-function:ease}.jkl-file__content__name{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em;grid-area:text;word-break:break-word}.jkl-file__content__name__size{word-break:keep-all}.jkl-file__content__delete{aspect-ratio:1;grid-area:button}.jkl-file__content__thumbnail{align-items:center;anchor-name:--thumb;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-container-low);border-radius:2px;container-type:inline-size;display:flex;grid-area:image;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);object-fit:cover;overflow:hidden;position:relative;width:100%;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,transparent)}.jkl-file__content__thumbnail:after,.jkl-file__content__thumbnail:before{position:absolute;z-index:1}.jkl-file__content__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__content__thumbnail:after{scale:0}}.jkl-file__content__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__content__thumbnail img[src]{height:100%;object-fit:cover;width:100%}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/9}.jkl-file[class*=card] .jkl-file__content{grid-template-areas:"image image" "text button";grid-template-columns:1fr var(--jkl-file-button-width);grid-template-rows:var(--jkl-file-thumbnail-max-height) auto}.jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src])):before{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em;content:attr(data-filetype)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error]{--bg:var(--jkl-color-functional-error)}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-text-on-alert);--link-color:var(--text-color);--jkl-color-border-action:currentColor}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}@layer jokul.components{.jkl-link{--link-color:var(--jkl-color-text-default);color:inherit;outline:none;text-decoration:none;transition-duration:75ms;transition-property:color;transition-timing-function:ease}.jkl-link__content{text-decoration:underline;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-thickness:.05em;text-underline-offset:.08lh}.jkl-link__icon{-webkit-margin-start:.2em;margin-inline-start:.2em;-webkit-margin-before:-.1em;margin-block-start:-.1em;vertical-align:middle}.jkl-link--external:after,.jkl-link[download]:after,.jkl-link[target=_blank]:after{--jkl-icon-fill:0;--jkl-icon-size:1em;--jkl-icon-opsz:20;content:"\e89e"/"(Åpnes i ny fane)";-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;padding-inline-start:.2em;vertical-align:middle;-webkit-font-smoothing:antialiased;display:inline;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-link[download]:after{content:"\f090"/"(Last ned fil)"}.jkl-link:hover:not(:focus){--link-color:var(--jkl-color-text-subdued)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}}@layer jokul.components{.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-button-text-ink-offset:0.1em;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;display:inline-block;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;background:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;font-weight:700;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:a .3s linear;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button:has(.jkl-button__text){min-width:9.5ch}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:calc(var(--jkl-unit-base)*.25);pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{display:block;max-width:100%;width:100%;-webkit-padding-before:var(--jkl-button-text-ink-offset);padding-block-start:var(--jkl-button-text-ink-offset);-webkit-margin-before:calc(var(--jkl-button-text-ink-offset)*-1);margin-block-start:calc(var(--jkl-button-text-ink-offset)*-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uycbche;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uycbcho;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uycbci4}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-uycbche{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uycbcho{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uycbci4{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-container-low);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-uycbcim 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-uycbcim 2s ease-in-out infinite}}@keyframes jkl-blink-uycbcim{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}@layer jokul.components{.jkl-file-input{--jkl-file-input-dropzone-padding:var(--jkl-unit-30);--jkl-file-input-dropzone-gap:var(--jkl-unit-30);--jkl-file-cta-gap:var(--jkl-unit-30);--jkl-file-cta-with-files-gap:var(--jkl-unit-15);--jkl-file-list-gap:var(--jkl-unit-10)}.jkl-file-input__dropzone{--border-color:var(--jkl-color-border-input);--background-color:transparent;align-items:center;background-color:var(--background-color);border:1px dashed var(--border-color);border-radius:.25rem;display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--jkl-file-input-dropzone-gap);justify-content:center;padding:var(--jkl-file-input-dropzone-padding);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-file-input__dropzone--enter{--border-color:var(--jkl-color-border-input-focus);--background-color:var(--jkl-color-background-container-high);border-style:solid}.jkl-file-input__dropzone__drag-text{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em}@media (width >= 0) and (max-width:679px){.jkl-file-input__dropzone__drag-text{display:none}}.jkl-file-input__call-to-action{align-items:center;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button{outline:3px solid var(--jkl-color-border-action);outline-offset:3px;transform:scale(1.05)}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button:active{transform:scale(1)}.jkl-file-input__dropzone-hint{margin-top:var(--jkl-unit-30)}.jkl-file-input--has-files .jkl-file-input__dropzone-hint{display:none}.jkl-file-input__max-size-text{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);margin-top:var(--jkl-unit-30)}.jkl-file-input__files{display:flex;flex-direction:column;gap:var(--jkl-file-list-gap);list-style:none;margin:0;padding:0}.jkl-file-input--small .jkl-file-input__dropzone-hint{display:block;margin:0}.jkl-file-input--small .jkl-file-input__dropzone{flex-direction:row;gap:var(--jkl-unit-20);justify-content:flex-start;margin-bottom:var(--jkl-unit-20);max-width:-webkit-fit-content;max-width:fit-content;padding:var(--jkl-unit-20)}.jkl-file-input--small .jkl-file-input__call-to-action{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;flex-direction:row;gap:calc(var(--jkl-unit-base)*1.5);justify-content:flex-start}.jkl-file-input--small .jkl-file-input__max-size-text{margin-bottom:var(--jkl-unit-20);margin-top:calc(var(--jkl-unit-15)*-1)}}
+@charset "UTF-8";@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-width:var(--jkl-unit-70);--jkl-file-thumbnail-max-height:var(--jkl-unit-90);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10) var(--jkl-unit-20);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-separator);--border-radius:2px;--bg:transparent;--transition-time:250ms}.jkl-file__content{align-items:center;background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--jkl-color-text-default);display:grid;gap:var(--jkl-file-gap);grid-template-areas:"image text button";grid-template-columns:var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:.1s;transition-property:background-color,border-color,color;transition-timing-function:ease}.jkl-file__content__name{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em;grid-area:text;word-break:break-word}.jkl-file__content__name__size{word-break:keep-all}.jkl-file__content__delete{aspect-ratio:1;grid-area:button}.jkl-file__content__thumbnail{align-items:center;anchor-name:--thumb;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-container-low);border-radius:2px;container-type:inline-size;display:flex;grid-area:image;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);object-fit:cover;overflow:hidden;position:relative;width:100%;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,transparent)}.jkl-file__content__thumbnail:after,.jkl-file__content__thumbnail:before{position:absolute;z-index:1}.jkl-file__content__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__content__thumbnail:after{scale:0}}.jkl-file__content__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__content__thumbnail img[src]{height:100%;object-fit:cover;width:100%}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/9}.jkl-file[class*=card] .jkl-file__content{grid-template-areas:"image image" "text button";grid-template-columns:1fr var(--jkl-file-button-width);grid-template-rows:var(--jkl-file-thumbnail-max-height) auto}.jkl-file:not([data-state*=loading]) .jkl-file__content__thumbnail:not(:has(img[src])):before{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em;content:attr(data-filetype)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__content__thumbnail:after{display:block;scale:1}.jkl-file[data-state=error]{--bg:var(--jkl-color-functional-error)}.jkl-file[data-state=error],.jkl-file[data-state=error] a,.jkl-file[data-state=error] a:hover,.jkl-file[data-state=error] button,.jkl-file[data-state=error] span{--text-color:var(--jkl-color-text-on-alert);--link-color:var(--text-color);--jkl-color-border-action:currentColor}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}@layer jokul.components{.jkl-link{--link-color:var(--jkl-color-text-default);color:inherit;outline:none;text-decoration:none;transition-duration:75ms;transition-property:color;transition-timing-function:ease}.jkl-link__content{text-decoration:underline;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-thickness:.05em;text-underline-offset:.08lh}.jkl-link__icon{-webkit-margin-start:.2em;margin-inline-start:.2em;-webkit-margin-before:-.1em;margin-block-start:-.1em;vertical-align:middle}.jkl-link--external:after,.jkl-link[download]:after,.jkl-link[target=_blank]:after{--jkl-icon-fill:0;--jkl-icon-size:1em;--jkl-icon-opsz:20;content:"\e89e"/"(Åpnes i ny fane)";-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;padding-inline-start:.2em;vertical-align:middle;-webkit-font-smoothing:antialiased;display:inline;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-link[download]:after{content:"\f090"/"(Last ned fil)"}.jkl-link:hover:not(:focus){--link-color:var(--jkl-color-text-subdued)}.jkl-link:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}}@layer jokul.components{.jkl-button{--jkl-button-font-size:var(--jkl-typography-body-base-font-size);--jkl-button-line-height:var(--jkl-typography-body-base-line-height);--jkl-button-padding-block:var(--jkl-unit-10);--jkl-button-padding-text:var(--jkl-unit-30);--jkl-button-padding-icon:var(--jkl-unit-20);--jkl-button-padding-icon-button:var(--jkl-unit-10);--jkl-button-tertiary-padding-icon:var(--jkl-unit-05);--jkl-button-text-ink-offset:0.1em;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:transparent;--border-radius:0;--border-width:0.0625rem;display:inline-block;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;background:var(--background-color);border:unset;color:var(--text-color);cursor:pointer;font-weight:700;text-decoration:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;animation:a .3s linear;border-radius:var(--border-radius);max-width:100%;overflow:hidden;padding-block:var(--jkl-button-padding-block);padding-inline:var(--jkl-button-padding-text);position:relative;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-button:has(.jkl-button__text){min-width:9.5ch}.jkl-button:has(.jkl-icon:first-child){-webkit-padding-start:var(--jkl-button-padding-icon);padding-inline-start:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:last-child){-webkit-padding-end:var(--jkl-button-padding-icon);padding-inline-end:var(--jkl-button-padding-icon)}.jkl-button:has(.jkl-icon:first-child):has(.jkl-icon:last-child){padding-inline:var(--jkl-button-padding-icon-button)}.jkl-button__label{align-items:center;display:flex;flex-direction:row;gap:calc(var(--jkl-unit-base)*.25);pointer-events:none;transition-duration:.25s;transition-property:translate;transition-timing-function:ease;width:100%}.jkl-button__loader{left:50%;opacity:0;pointer-events:none;position:absolute;top:50%;transition-duration:.25s;transition-property:opacity,translate;transition-timing-function:ease;translate:-50% 350%}.jkl-button__text{display:block;max-width:100%;width:100%;-webkit-padding-before:var(--jkl-button-text-ink-offset);padding-block-start:var(--jkl-button-text-ink-offset);-webkit-margin-before:calc(var(--jkl-button-text-ink-offset)*-1);margin-block-start:calc(var(--jkl-button-text-ink-offset)*-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.jkl-button[data-loading=true] .jkl-button__label{translate:0 -120%}.jkl-button[data-loading=true] .jkl-button__loader{opacity:1;translate:-50% -50%}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-button:hover{background-color:color-mix(in srgb,var(--background-color),var(--text-color) 15%)}@media (forced-colors:active){.jkl-button:hover{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-action);--text-color:var(--jkl-color-text-on-action)}@media (forced-colors:active){.jkl-button--primary{border:calc(var(--border-width)*2) solid Highlight}}.jkl-button--secondary{border:var(--border-width) solid var(--text-color)}.jkl-button--tertiary{border-bottom:var(--border-width) solid var(--text-color);padding-inline:var(--jkl-button-tertiary-padding-icon)}.jkl-button--tertiary:has(.jkl-icon:first-child){padding-inline:var(--jkl-button-tertiary-padding-icon) calc(var(--jkl-button-tertiary-padding-icon)*2)}.jkl-button--tertiary:has(.jkl-icon:last-child){padding-inline:calc(var(--jkl-button-tertiary-padding-icon)*2) var(--jkl-button-tertiary-padding-icon)}}@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uqr00z2;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uqr0101;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uqr010o}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-uqr00z2{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uqr0101{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uqr010o{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}@layer jokul.components{@property --jkl-skeleton-sweeper-position{syntax:"<percentage>";initial-value:0%;inherits:true}.jkl-skeleton-animation{--jkl-skeleton-element-color:var(--jkl-color-background-container-low);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),transparent calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-position:center;mask-position:center;-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb}.jkl-skeleton-element{background-color:var(--jkl-skeleton-element-color);border-radius:.125rem}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{animation:jkl-blink-uqr0118 2s ease infinite;border:1px solid CanvasText}}.jkl-skeleton-input{display:flex;flex-direction:column;gap:var(--jkl-spacing-12)}.jkl-skeleton-input__checkbox{display:flex;flex-direction:row;flex-wrap:nowrap;gap:var(--jkl-spacing-8)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-input{gap:var(--jkl-spacing-8)}}.jkl-skeleton-input--compact:after{gap:var(--jkl-spacing-8)}.jkl-skeleton-table{display:flex;flex-direction:column}.jkl-skeleton-table__header,.jkl-skeleton-table__row{border-bottom:1px solid var(--jkl-skeleton-element-color);display:flex;flex-direction:row;justify-content:space-between}.jkl-skeleton-table__header,.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-10)}@media (width >= 0) and (max-width:679px){.jkl-skeleton-table__header{padding:var(--jkl-unit-10) var(--jkl-unit-05)}.jkl-skeleton-table__row{padding:var(--jkl-unit-20) var(--jkl-unit-05)}}@media screen and (forced-colors:active){.jkl-skeleton-table{animation:jkl-blink-uqr0118 2s ease-in-out infinite}}@keyframes jkl-blink-uqr0118{0%{opacity:1}40%,50%{opacity:.3}70%,to{opacity:1}}@keyframes --jkl-skeleton-sweep{0%,67%{--jkl-skeleton-sweeper-position:0%}to{--jkl-skeleton-sweeper-position:calc(100% + var(--jkl-skeleton-sweeper-width))}}}@layer jokul.components{.jkl-file-input{--jkl-file-input-dropzone-padding:var(--jkl-unit-30);--jkl-file-input-dropzone-gap:var(--jkl-unit-30);--jkl-file-cta-gap:var(--jkl-unit-30);--jkl-file-cta-with-files-gap:var(--jkl-unit-15);--jkl-file-list-gap:var(--jkl-unit-10)}.jkl-file-input__dropzone{--border-color:var(--jkl-color-border-input);--background-color:transparent;align-items:center;background-color:var(--background-color);border:1px dashed var(--border-color);border-radius:.25rem;display:flex;flex-direction:column;flex-wrap:nowrap;gap:var(--jkl-file-input-dropzone-gap);justify-content:center;padding:var(--jkl-file-input-dropzone-padding);transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}.jkl-file-input__dropzone--enter{--border-color:var(--jkl-color-border-input-focus);--background-color:var(--jkl-color-background-container-high);border-style:solid}.jkl-file-input__dropzone__drag-text{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-relaxed);--jkl-icon-weight:300;--jkl-icon-size:1.2em}@media (width >= 0) and (max-width:679px){.jkl-file-input__dropzone__drag-text{display:none}}.jkl-file-input__call-to-action{align-items:center;display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:center}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button{outline:3px solid var(--jkl-color-border-action);outline-offset:3px;transform:scale(1.05)}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button:active{transform:scale(1)}.jkl-file-input__dropzone-hint{margin-top:var(--jkl-unit-30)}.jkl-file-input--has-files .jkl-file-input__dropzone-hint{display:none}.jkl-file-input__max-size-text{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);margin-top:var(--jkl-unit-30)}.jkl-file-input__files{display:flex;flex-direction:column;gap:var(--jkl-file-list-gap);list-style:none;margin:0;padding:0}.jkl-file-input--small .jkl-file-input__dropzone-hint{display:block;margin:0}.jkl-file-input--small .jkl-file-input__dropzone{flex-direction:row;gap:var(--jkl-unit-20);justify-content:flex-start;margin-bottom:var(--jkl-unit-20);max-width:-webkit-fit-content;max-width:fit-content;padding:var(--jkl-unit-20)}.jkl-file-input--small .jkl-file-input__call-to-action{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;flex-direction:row;gap:calc(var(--jkl-unit-base)*1.5);justify-content:flex-start}.jkl-file-input--small .jkl-file-input__max-size-text{margin-bottom:var(--jkl-unit-20);margin-top:calc(var(--jkl-unit-15)*-1)}}

package/styles/components/input-group/input-group.css

@@ -65,7 +65,7 @@
     --color: var(--jkl-color-text-default);
   }
   .jkl-form-support-label--error .jkl-form-support-label__icon, .jkl-form-support-label--warning .jkl-form-support-label__icon, .jkl-form-support-label--success .jkl-form-support-label__icon {
-    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-ulhxquc forwards;
+    animation: 400ms cubic-bezier(0, 0, 0.3, 1) 250ms jkl-support-icon-entrance-utmu6t5 forwards;
   }
   .jkl-form-support-label--sr-only {
     border: 0 !important;
@@ -131,7 +131,7 @@
   .jkl-label:has(+ .jkl-input-group-description) {
     margin-block-end: var(--jkl-spacing-4);
   }
-  @keyframes jkl-support-icon-entrance-ulhxquc {
+  @keyframes jkl-support-icon-entrance-utmu6t5 {
     0% {
       margin-right: 0;
       opacity: 0;

package/styles/components/input-group/input-group.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-field-group{border-style:none;outline:0;outline-style:none}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--color);display:flex;margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{fill:Canvas;stroke:CanvasText}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-ulhxquc .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-label{color:var(--jkl-color-text-default);display:block;margin:0 0 var(--jkl-spacing-8) 0}.jkl-label--medium,.jkl-label--small{font-size:var(--jkl-font-size-3)}.jkl-label--large,.jkl-label--medium,.jkl-label--small{font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300}.jkl-label--large{font-size:var(--jkl-font-size-5)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-ulhxquc{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{fill:ButtonFace;stroke:ButtonText}}}
+@layer jokul.components{.jkl-field-group{border-style:none;outline:0;outline-style:none}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:0;outline-style:none}@media screen and (forced-colors:active){.jkl-field-group{border-style:revert;outline:revert;outline-style:revert}.jkl-field-group:active,.jkl-field-group:focus,.jkl-field-group:hover{outline:revert;outline-style:revert}}}@layer jokul.components{.jkl-dormant-form-support-label{display:none;opacity:0;pointer-events:none}.jkl-form-support-label{--jkl-form-support-label-margin:var(--jkl-unit-10) 0 0;--jkl-form-support-label-icon-size:1.25rem;--jkl-form-support-label-icon-margin:0 -1.25rem -0.375rem 0;--color:var(--jkl-color-text-subdued);font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--color);display:flex;margin:var(--jkl-form-support-label-margin);transition-delay:.15s;transition-duration:.4s;transition-property:color;transition-timing-function:ease}.jkl-form-support-label__icon,.jkl-form-support-label__icon.jkl-icon{height:var(--jkl-form-support-label-icon-size);margin:var(--jkl-form-support-label-icon-margin);opacity:0}@media screen and (forced-colors:active){.jkl-form-support-label__icon,.jkl-form-support-label__icon path,.jkl-form-support-label__icon svg,.jkl-form-support-label__icon.jkl-icon,.jkl-form-support-label__icon.jkl-icon path,.jkl-form-support-label__icon.jkl-icon svg{fill:Canvas;stroke:CanvasText}}.jkl-form-support-label--error,.jkl-form-support-label--success,.jkl-form-support-label--warning{--color:var(--jkl-color-text-default)}.jkl-form-support-label--error .jkl-form-support-label__icon,.jkl-form-support-label--success .jkl-form-support-label__icon,.jkl-form-support-label--warning .jkl-form-support-label__icon{animation:jkl-support-icon-entrance-utmu6t5 .4s cubic-bezier(0,0,.3,1) .25s forwards}.jkl-form-support-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-label{color:var(--jkl-color-text-default);display:block;margin:0 0 var(--jkl-spacing-8) 0}.jkl-label--medium,.jkl-label--small{font-size:var(--jkl-font-size-3)}.jkl-label--large,.jkl-label--medium,.jkl-label--small{font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300}.jkl-label--large{font-size:var(--jkl-font-size-5)}.jkl-label--sr-only{border:0!important;clip:rect(1px,1px,1px,1px)!important;-webkit-clip-path:inset(50%)!important;clip-path:inset(50%)!important;height:1px!important;margin:-1px!important;overflow:hidden!important;padding:0!important;position:absolute!important;white-space:nowrap!important;width:1px!important}.jkl-label .jkl-help{position:relative;top:-.1ex}.jkl-input-group-description{font-size:var(--jkl-font-size-2);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--jkl-color-text-subdued);-webkit-margin-after:var(--jkl-spacing-8);margin-block-end:var(--jkl-spacing-8);max-inline-size:50ch;text-wrap:pretty}.jkl-label:has(+.jkl-input-group-description){-webkit-margin-after:var(--jkl-spacing-4);margin-block-end:var(--jkl-spacing-4)}@keyframes jkl-support-icon-entrance-utmu6t5{0%{margin-right:0;opacity:0;transform:scale(1)}30%{margin-right:.5rem}50%{opacity:1}70%{transform:scale(1.1)}85%{transform:scale(.9)}to{margin-right:.5rem;opacity:1;transform:scale(1)}}}@layer jokul.components{@media screen and (forced-colors:active){.jkl-text-input-action-button,.jkl-text-input-action-button path,.jkl-text-input-action-button svg{fill:ButtonFace;stroke:ButtonText}}}

package/styles/components/loader/loader.css

@@ -19,22 +19,22 @@
     animation: 2500ms linear infinite;
   }
   .jkl-loader__dot--left {
-    animation-name: jkl-loader-left-spin-uqmmsui;
+    animation-name: jkl-loader-left-spin-umo38ow;
     margin-right: calc(var(--jkl-loader-spacing) * 0.9);
   }
   .jkl-loader__dot--middle {
-    animation-name: jkl-loader-middle-spin-uqmmsux;
+    animation-name: jkl-loader-middle-spin-umo38pu;
     margin-right: var(--jkl-loader-spacing);
   }
   .jkl-loader__dot--right {
-    animation-name: jkl-loader-right-spin-uqmmsv1;
+    animation-name: jkl-loader-right-spin-umo38qa;
   }
   @media screen and (forced-colors: active) {
     .jkl-loader__dot {
       background-color: CanvasText;
     }
   }
-  @keyframes jkl-loader-left-spin-uqmmsui {
+  @keyframes jkl-loader-left-spin-umo38ow {
     0% {
       transform: rotate(0) scale(0);
     }
@@ -48,7 +48,7 @@
       transform: rotate(180deg) scale(0);
     }
   }
-  @keyframes jkl-loader-middle-spin-uqmmsux {
+  @keyframes jkl-loader-middle-spin-umo38pu {
     0% {
       transform: rotate(20deg) scale(0);
     }
@@ -65,7 +65,7 @@
       transform: rotate(200deg) scale(0);
     }
   }
-  @keyframes jkl-loader-right-spin-uqmmsv1 {
+  @keyframes jkl-loader-right-spin-umo38qa {
     0% {
       transform: rotate(40deg) scale(0);
     }

package/styles/components/loader/loader.min.css

@@ -1 +1 @@
-@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uqmmsui;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uqmmsux;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uqmmsv1}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-uqmmsui{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-uqmmsux{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-uqmmsv1{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}
+@layer jokul.components{.jkl-loader{--jkl-loader-dot-size:var(--jkl-unit-10);--jkl-loader-spacing:var(--jkl-unit-20);display:flex}.jkl-loader--inline{display:inline-flex}.jkl-loader__dot{animation:2.5s linear infinite;background-color:currentColor;display:block;height:var(--jkl-loader-dot-size);transform-origin:center;width:var(--jkl-loader-dot-size)}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-umo38ow;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-umo38pu;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-umo38qa}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-umo38ow{0%{transform:rotate(0) scale(0)}30%{transform:rotate(90deg) scale(1)}70%{transform:rotate(180deg) scale(0)}to{transform:rotate(180deg) scale(0)}}@keyframes jkl-loader-middle-spin-umo38pu{0%{transform:rotate(20deg) scale(0)}10%{transform:rotate(20deg) scale(0)}40%{transform:rotate(110deg) scale(1.4)}85%{transform:rotate(200deg) scale(0)}to{transform:rotate(200deg) scale(0)}}@keyframes jkl-loader-right-spin-umo38qa{0%{transform:rotate(40deg) scale(0)}20%{transform:rotate(40deg) scale(0)}50%{transform:rotate(130deg) scale(1)}to{transform:rotate(220deg) scale(0)}}}

package/styles/components/loader/skeleton-loader.css

@@ -26,7 +26,7 @@
   @media screen and (forced-colors: active) {
     .jkl-skeleton-element {
       border: 1px solid CanvasText;
-      animation: 2s ease infinite jkl-blink-utngw5h;
+      animation: 2s ease infinite jkl-blink-uge74vi;
     }
   }
   .jkl-skeleton-input {
@@ -74,10 +74,10 @@
   }
   @media screen and (forced-colors: active) {
     .jkl-skeleton-table {
-      animation: 2s ease-in-out infinite jkl-blink-utngw5h;
+      animation: 2s ease-in-out infinite jkl-blink-uge74vi;
     }
   }
-  @keyframes jkl-blink-utngw5h {
+  @keyframes jkl-blink-uge74vi {
     0% {
       opacity: 1;
     }