@fremtind/jokul 6.1.3 → 6.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/date-input/DateInput.cjs +1 -1
- package/build/cjs/components/date-input/DateInput.cjs.map +1 -1
- package/build/cjs/hooks/index.cjs +1 -1
- package/build/cjs/hooks/index.d.cts +1 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs +2 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.cjs.map +1 -0
- package/build/cjs/hooks/useMergeRefs/useMergeRefs.d.cts +8 -0
- package/build/cjs/utilities/index.cjs +1 -1
- package/build/cjs/utilities/index.d.cts +1 -0
- package/build/cjs/utilities/mergeRefs.cjs +1 -1
- package/build/cjs/utilities/mergeRefs.cjs.map +1 -1
- package/build/cjs/utilities/mergeRefs.d.cts +0 -8
- package/build/es/components/date-input/DateInput.js +1 -1
- package/build/es/components/date-input/DateInput.js.map +1 -1
- package/build/es/hooks/index.d.ts +1 -0
- package/build/es/hooks/index.js +1 -1
- package/build/es/hooks/useMergeRefs/useMergeRefs.d.ts +8 -0
- package/build/es/hooks/useMergeRefs/useMergeRefs.js +2 -0
- package/build/es/hooks/useMergeRefs/useMergeRefs.js.map +1 -0
- package/build/es/utilities/index.d.ts +1 -0
- package/build/es/utilities/index.js +1 -1
- package/build/es/utilities/mergeRefs.d.ts +0 -8
- package/build/es/utilities/mergeRefs.js +1 -1
- package/build/es/utilities/mergeRefs.js.map +1 -1
- package/package.json +1 -1
- package/styles/components/countdown/countdown.css +2 -2
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/feedback/feedback.css +2 -2
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file-input/file-input.css +9 -9
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/input-group/input-group.css +2 -2
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/loader/loader.css +6 -6
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +3 -3
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/message/message.css +2 -2
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/progress-bar/progress-bar.css +1 -1
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.css +13 -13
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.scss +2 -2
- package/styles/components/system-message/system-message.css +2 -2
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/toast/toast.css +4 -4
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components.css +35 -35
- package/styles/components.min.css +2 -2
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("../../../clsx-E3yX_9sL.cjs"),r=require("react"),o=require("../../hooks/useMergeRefs/useMergeRefs.cjs"),i=require("../button/Button.cjs");require("../icon/Icon.cjs"),require("../icon/icons/animated/ArrowVerticalAnimated.cjs"),require("../icon/icons/animated/ArrowHorizontalAnimated.cjs"),require("../icon/icons/animated/PlusRemoveAnimated.cjs"),require("../icon/icons/ArrowDownIcon.cjs"),require("../icon/icons/ArrowLeftIcon.cjs"),require("../icon/icons/ArrowNorthEastIcon.cjs"),require("../icon/icons/ArrowRightIcon.cjs"),require("../icon/icons/ArrowUpIcon.cjs");const c=require("../icon/icons/CalendarIcon.cjs");require("../icon/icons/CheckIcon.cjs"),require("../icon/icons/ChevronDownIcon.cjs"),require("../icon/icons/ChevronLeftIcon.cjs"),require("../icon/icons/ChevronRightIcon.cjs"),require("../icon/icons/ChevronUpIcon.cjs"),require("../icon/icons/CloseIcon.cjs"),require("../icon/icons/CopyIcon.cjs"),require("../icon/icons/DotsIcon.cjs"),require("../icon/icons/DragIcon.cjs"),require("../icon/icons/ErrorIcon.cjs"),require("../icon/icons/GreenCheckIcon.cjs"),require("../icon/icons/HamburgerIcon.cjs"),require("../icon/icons/InfoIcon.cjs"),require("../icon/icons/LinkIcon.cjs"),require("../icon/icons/MinusIcon.cjs"),require("../icon/icons/OpenInNewIcon.cjs"),require("../icon/icons/PenIcon.cjs"),require("../icon/icons/PlusIcon.cjs"),require("../icon/icons/QuestionIcon.cjs"),require("../icon/icons/RedCrossIcon.cjs"),require("../icon/icons/SearchIcon.cjs"),require("../icon/icons/SuccessIcon.cjs"),require("../icon/icons/ThumbDownIcon.cjs"),require("../icon/icons/ThumbUpIcon.cjs"),require("../icon/icons/TrashCanIcon.cjs"),require("../icon/icons/WarningIcon.cjs"),require("../../hooks/useId/useId.cjs");const s=require("../input-group/InputGroup.cjs"),t=require("./calendar/Calendar.cjs"),a=require("./utils.cjs"),u=r.forwardRef((u,l)=>{const{max:d,min:p,defaultValue:j,value:q,name:I,onChange:m,onBlur:b,onClick:v,onFocus:g,id:h,"data-testautoid":C,className:k="",label:w,labelProps:f,helpLabel:y,errorLabel:x,supportLabelProps:A,tooltip:L,description:_,required:D,disabled:P,readOnly:R,autoComplete:M,inputMode:N,...B}=u,{inline:O,style:E,"data-size":S,...T}=B,V=r.useId(),z=h?`${h}-calendar`:`jkl-calendar-${V}`,G=void 0!==q,[H,U]=r.useState(j??""),F=G?q:H,$=a.toValidBoundary(p),Q=a.toValidBoundary(d),W=r.useRef(null),J=o.useMergeRefs(W,l),K=e=>{G||U(e.target.value),m?.(e)},X=()=>{!G&&W.current&&U(W.current.value)};return e.jsx(s.InputGroup,{id:h,className:n.clsx("jkl-date-input",k),inline:O,style:E,"data-size":S,label:w,labelProps:f,helpLabel:y,errorLabel:x,supportLabelProps:A,tooltip:L,description:_,render:n=>e.jsxs("div",{className:"jkl-date-input__wrapper","data-invalid":n["aria-invalid"],children:[e.jsx("input",{ref:J,"data-testid":"jkl-date-input__input","data-testautoid":C,"data-empty":F?void 0:"true",className:"jkl-date-input__input",name:I,type:"date",...G?{value:q}:{defaultValue:j},max:Q,min:$,required:D,disabled:P,readOnly:R,autoComplete:M,inputMode:N,onChange:K,onFocus:g,onBlur:b,onClick:e=>{e.preventDefault(),v?.(e)},...T,...n}),e.jsx(i.Button,{type:"button",variant:"ghost",icon:e.jsx(c.CalendarIcon,{}),"aria-label":"Åpne kalender","data-testid":"jkl-date-input__trigger",className:"jkl-date-input__calendar-trigger",disabled:P||R,onClick:X,popovertarget:z}),e.jsx(t.Calendar,{"data-testid":"jkl-calendar",id:z,value:F,min:$,max:Q,onChange:e=>(e=>{const n=W.current;if(!n)return;const r=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set;r?r.call(n,e):n.value=e,n.dispatchEvent(new Event("input",{bubbles:!0}))})(e.target.value),label:w,description:_,popover:"auto"})]})})});u.displayName="DateInput",exports.DateInput=u;
|
|
2
2
|
//# sourceMappingURL=DateInput.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.cjs","sources":["../../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../../utilities/index.js\";\nimport { Button } from \"../button/index.js\";\nimport { CalendarIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { Calendar } from \"./calendar/Calendar.js\";\nimport type { DateInputProps } from \"./types.js\";\nimport { toValidBoundary } from \"./utils.js\";\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(\n (props, forwardedInputRef) => {\n const {\n max,\n min,\n defaultValue,\n value,\n name,\n onChange,\n onBlur,\n onClick,\n onFocus,\n id,\n \"data-testautoid\": testAutoId,\n className = \"\",\n label,\n labelProps,\n helpLabel,\n errorLabel,\n supportLabelProps,\n tooltip,\n description,\n required,\n disabled,\n readOnly,\n autoComplete,\n inputMode,\n ...rest\n } = props;\n\n // Skiller InputGroup-spesifikke props fra native input-attributter, slik\n // at vi ikke lekker f.eks. inline, data-size og style ned på <input>.\n const {\n inline,\n style,\n \"data-size\": dataSize,\n ...inputAttributes\n } = rest;\n\n const generatedCalendarId = useId();\n const calendarId = id\n ? `${id}-calendar`\n : `jkl-calendar-${generatedCalendarId}`;\n\n const isControlled = value !== undefined;\n\n // Intern state holder kalenderen i synk. I ukontrollert modus er selve\n // <input> ukontrollert (defaultValue), slik at react-hook-form (register)\n // kan skrive verdien via ref-en – f.eks. ved reset() og setValue().\n const [internalValue, setInternalValue] = useState<string>(\n defaultValue ?? \"\",\n );\n const currentValue = isControlled ? value : internalValue;\n\n // min/max kan komme inn som number eller dd.mm.yyyy (bl.a. via\n // react-hook-forms register). Både det native feltet og kalenderen\n // forholder seg til ISO-strenger.\n const minValue = toValidBoundary(min);\n const maxValue = toValidBoundary(max);\n\n // Samle-ref: forward til forbruker / react-hook-form, og behold internt\n // slik at vi kan lese og skrive verdien fra kalenderen.\n const inputRef = useRef<HTMLInputElement | null>(null);\n const setInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n const handleInputChange = (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (!isControlled) {\n setInternalValue(event.target.value);\n }\n onChange?.(event);\n };\n\n // Skriver en ny verdi inn i det native feltet og fyrer et ekte input-event.\n // Da flyter kalendervalg gjennom samme onChange som tastaturinntasting,\n // slik at også react-hook-form fanger endringen.\n const commitFromCalendar = (next: string) => {\n const input = inputRef.current;\n if (!input) {\n return;\n }\n const setNativeValue = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n if (setNativeValue) {\n setNativeValue.call(input, next);\n } else {\n input.value = next;\n }\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n };\n\n // Leser gjeldende verdi fra feltet når kalenderen åpnes, slik at den\n // reflekterer eventuelle programmatiske skriv (reset/setValue) i\n // ukontrollert modus.\n const syncCalendarFromInput = () => {\n if (!isControlled && inputRef.current) {\n setInternalValue(inputRef.current.value);\n }\n };\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-date-input\", className)}\n inline={inline}\n style={style}\n data-size={dataSize}\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 <div\n className=\"jkl-date-input__wrapper\"\n data-invalid={inputProps[\"aria-invalid\"]}\n >\n <input\n ref={setInputRef}\n data-testid=\"jkl-date-input__input\"\n data-testautoid={testAutoId}\n data-empty={currentValue ? undefined : \"true\"}\n className=\"jkl-date-input__input\"\n name={name}\n type=\"date\"\n {...(isControlled ? { value } : { defaultValue })}\n max={maxValue}\n min={minValue}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n inputMode={inputMode}\n onChange={handleInputChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onClick={(e) => {\n e.preventDefault();\n onClick?.(e);\n }}\n {...inputAttributes}\n {...inputProps}\n />\n <Button\n type=\"button\"\n variant=\"ghost\"\n icon={<CalendarIcon />}\n aria-label=\"Åpne kalender\"\n data-testid=\"jkl-date-input__trigger\"\n className=\"jkl-date-input__calendar-trigger\"\n disabled={disabled || readOnly}\n onClick={syncCalendarFromInput}\n // @ts-expect-error vet ikke hvorfor vi får typefeil her? kanskje på grunn av hvordan vi behandler polymorfisme?\n popovertarget={calendarId}\n />\n <Calendar\n data-testid=\"jkl-calendar\"\n id={calendarId}\n value={currentValue}\n min={minValue}\n max={maxValue}\n onChange={(e) => commitFromCalendar(e.target.value)}\n label={label}\n description={description}\n popover=\"auto\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nDateInput.displayName = \"DateInput\";\n"],"names":["DateInput","forwardRef","props","forwardedInputRef","max","min","defaultValue","value","name","onChange","onBlur","onClick","onFocus","id","testAutoId","className","label","labelProps","helpLabel","errorLabel","supportLabelProps","tooltip","description","required","disabled","readOnly","autoComplete","inputMode","rest","inline","style","dataSize","inputAttributes","generatedCalendarId","useId","calendarId","isControlled","internalValue","setInternalValue","useState","currentValue","minValue","toValidBoundary","maxValue","inputRef","useRef","setInputRef","useMergeRefs","handleInputChange","event","target","syncCalendarFromInput","current","jsx","InputGroup","clsx","render","inputProps","jsxs","children","ref","type","e","preventDefault","Button","variant","icon","CalendarIcon","popovertarget","Calendar","next","input","setNativeValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","Event","bubbles","commitFromCalendar","popover","displayName"],"mappings":"q9DAUaA,EAAYC,EAAAA,WACrB,CAACC,EAAOC,KACJ,MACIC,IAAAA,EACAC,IAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,GAAAA,EACA,kBAAmBC,EACnBC,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACH1B,GAKA2B,OAAAA,EACAC,MAAAA,EACA,YAAaC,KACVC,GACHJ,EAEEK,EAAsBC,EAAAA,QACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EAAAA,SACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAAA,gBAAgBrC,GAC3BsC,EAAWD,EAAAA,gBAAgBtC,GAI3BwC,EAAWC,EAAAA,OAAgC,MAC3CC,EAAcC,EAAAA,aAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,EAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAAAA,IAACC,EAAAA,WAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAAA,KAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAAA,KAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAAA,IAAC,QAAA,CACGO,IAAKd,EACL,cAAY,wBACZ,kBAAiBhC,EACjB,aAAY0B,OAAe,EAAY,OACvCzB,UAAU,wBACVP,KAAAA,EACAqD,KAAK,UACAzB,EAAe,CAAE7B,MAAAA,GAAU,CAAED,aAAAA,GAClCF,IAAKuC,EACLtC,IAAKoC,EACLlB,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAlB,SAAUuC,EACVpC,QAAAA,EACAF,OAAAA,EACAC,QAAUmD,IACNA,EAAEC,iBACFpD,IAAUmD,OAEV9B,KACAyB,IAERJ,EAAAA,IAACW,EAAAA,OAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,WAAOC,EAAAA,aAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,EAETiB,cAAejC,IAEnBkB,EAAAA,IAACgB,EAAAA,SAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFHQ,KACxB,MAAMC,EAAQ3B,EAASQ,QACvB,IAAKmB,EACD,OAEJ,MAAMC,EAAiBC,OAAOC,yBAC1BC,OAAOC,iBAAiBC,UACxB,UACDC,IACCN,EACAA,EAAeO,KAAKR,EAAOD,GAE3BC,EAAMhE,MAAQ+D,EAElBC,EAAMS,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,MA2EjBC,CAAmBrB,EAAEZ,OAAO3C,OAC7CS,MAAAA,EACAM,YAAAA,EACA8D,QAAQ,gBASpCpF,EAAUqF,YAAc"}
|
|
1
|
+
{"version":3,"file":"DateInput.cjs","sources":["../../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../../hooks/useMergeRefs/useMergeRefs.js\";\nimport { Button } from \"../button/index.js\";\nimport { CalendarIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { Calendar } from \"./calendar/Calendar.js\";\nimport type { DateInputProps } from \"./types.js\";\nimport { toValidBoundary } from \"./utils.js\";\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(\n (props, forwardedInputRef) => {\n const {\n max,\n min,\n defaultValue,\n value,\n name,\n onChange,\n onBlur,\n onClick,\n onFocus,\n id,\n \"data-testautoid\": testAutoId,\n className = \"\",\n label,\n labelProps,\n helpLabel,\n errorLabel,\n supportLabelProps,\n tooltip,\n description,\n required,\n disabled,\n readOnly,\n autoComplete,\n inputMode,\n ...rest\n } = props;\n\n // Skiller InputGroup-spesifikke props fra native input-attributter, slik\n // at vi ikke lekker f.eks. inline, data-size og style ned på <input>.\n const {\n inline,\n style,\n \"data-size\": dataSize,\n ...inputAttributes\n } = rest;\n\n const generatedCalendarId = useId();\n const calendarId = id\n ? `${id}-calendar`\n : `jkl-calendar-${generatedCalendarId}`;\n\n const isControlled = value !== undefined;\n\n // Intern state holder kalenderen i synk. I ukontrollert modus er selve\n // <input> ukontrollert (defaultValue), slik at react-hook-form (register)\n // kan skrive verdien via ref-en – f.eks. ved reset() og setValue().\n const [internalValue, setInternalValue] = useState<string>(\n defaultValue ?? \"\",\n );\n const currentValue = isControlled ? value : internalValue;\n\n // min/max kan komme inn som number eller dd.mm.yyyy (bl.a. via\n // react-hook-forms register). Både det native feltet og kalenderen\n // forholder seg til ISO-strenger.\n const minValue = toValidBoundary(min);\n const maxValue = toValidBoundary(max);\n\n // Samle-ref: forward til forbruker / react-hook-form, og behold internt\n // slik at vi kan lese og skrive verdien fra kalenderen.\n const inputRef = useRef<HTMLInputElement | null>(null);\n const setInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n const handleInputChange = (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (!isControlled) {\n setInternalValue(event.target.value);\n }\n onChange?.(event);\n };\n\n // Skriver en ny verdi inn i det native feltet og fyrer et ekte input-event.\n // Da flyter kalendervalg gjennom samme onChange som tastaturinntasting,\n // slik at også react-hook-form fanger endringen.\n const commitFromCalendar = (next: string) => {\n const input = inputRef.current;\n if (!input) {\n return;\n }\n const setNativeValue = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n if (setNativeValue) {\n setNativeValue.call(input, next);\n } else {\n input.value = next;\n }\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n };\n\n // Leser gjeldende verdi fra feltet når kalenderen åpnes, slik at den\n // reflekterer eventuelle programmatiske skriv (reset/setValue) i\n // ukontrollert modus.\n const syncCalendarFromInput = () => {\n if (!isControlled && inputRef.current) {\n setInternalValue(inputRef.current.value);\n }\n };\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-date-input\", className)}\n inline={inline}\n style={style}\n data-size={dataSize}\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 <div\n className=\"jkl-date-input__wrapper\"\n data-invalid={inputProps[\"aria-invalid\"]}\n >\n <input\n ref={setInputRef}\n data-testid=\"jkl-date-input__input\"\n data-testautoid={testAutoId}\n data-empty={currentValue ? undefined : \"true\"}\n className=\"jkl-date-input__input\"\n name={name}\n type=\"date\"\n {...(isControlled ? { value } : { defaultValue })}\n max={maxValue}\n min={minValue}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n inputMode={inputMode}\n onChange={handleInputChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onClick={(e) => {\n e.preventDefault();\n onClick?.(e);\n }}\n {...inputAttributes}\n {...inputProps}\n />\n <Button\n type=\"button\"\n variant=\"ghost\"\n icon={<CalendarIcon />}\n aria-label=\"Åpne kalender\"\n data-testid=\"jkl-date-input__trigger\"\n className=\"jkl-date-input__calendar-trigger\"\n disabled={disabled || readOnly}\n onClick={syncCalendarFromInput}\n // @ts-expect-error vet ikke hvorfor vi får typefeil her? kanskje på grunn av hvordan vi behandler polymorfisme?\n popovertarget={calendarId}\n />\n <Calendar\n data-testid=\"jkl-calendar\"\n id={calendarId}\n value={currentValue}\n min={minValue}\n max={maxValue}\n onChange={(e) => commitFromCalendar(e.target.value)}\n label={label}\n description={description}\n popover=\"auto\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nDateInput.displayName = \"DateInput\";\n"],"names":["DateInput","forwardRef","props","forwardedInputRef","max","min","defaultValue","value","name","onChange","onBlur","onClick","onFocus","id","testAutoId","className","label","labelProps","helpLabel","errorLabel","supportLabelProps","tooltip","description","required","disabled","readOnly","autoComplete","inputMode","rest","inline","style","dataSize","inputAttributes","generatedCalendarId","useId","calendarId","isControlled","internalValue","setInternalValue","useState","currentValue","minValue","toValidBoundary","maxValue","inputRef","useRef","setInputRef","useMergeRefs","handleInputChange","event","target","syncCalendarFromInput","current","jsx","InputGroup","clsx","render","inputProps","jsxs","children","ref","type","e","preventDefault","Button","variant","icon","CalendarIcon","popovertarget","Calendar","next","input","setNativeValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","Event","bubbles","commitFromCalendar","popover","displayName"],"mappings":"i6DAUaA,EAAYC,EAAAA,WACrB,CAACC,EAAOC,KACJ,MACIC,IAAAA,EACAC,IAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,GAAAA,EACA,kBAAmBC,EACnBC,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACH1B,GAKA2B,OAAAA,EACAC,MAAAA,EACA,YAAaC,KACVC,GACHJ,EAEEK,EAAsBC,EAAAA,QACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EAAAA,SACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAAA,gBAAgBrC,GAC3BsC,EAAWD,EAAAA,gBAAgBtC,GAI3BwC,EAAWC,EAAAA,OAAgC,MAC3CC,EAAcC,EAAAA,aAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,EAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAAAA,IAACC,EAAAA,WAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAAA,KAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAAA,KAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAAA,IAAC,QAAA,CACGO,IAAKd,EACL,cAAY,wBACZ,kBAAiBhC,EACjB,aAAY0B,OAAe,EAAY,OACvCzB,UAAU,wBACVP,KAAAA,EACAqD,KAAK,UACAzB,EAAe,CAAE7B,MAAAA,GAAU,CAAED,aAAAA,GAClCF,IAAKuC,EACLtC,IAAKoC,EACLlB,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAlB,SAAUuC,EACVpC,QAAAA,EACAF,OAAAA,EACAC,QAAUmD,IACNA,EAAEC,iBACFpD,IAAUmD,OAEV9B,KACAyB,IAERJ,EAAAA,IAACW,EAAAA,OAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,WAAOC,EAAAA,aAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,EAETiB,cAAejC,IAEnBkB,EAAAA,IAACgB,EAAAA,SAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFHQ,KACxB,MAAMC,EAAQ3B,EAASQ,QACvB,IAAKmB,EACD,OAEJ,MAAMC,EAAiBC,OAAOC,yBAC1BC,OAAOC,iBAAiBC,UACxB,UACDC,IACCN,EACAA,EAAeO,KAAKR,EAAOD,GAE3BC,EAAMhE,MAAQ+D,EAElBC,EAAMS,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,MA2EjBC,CAAmBrB,EAAEZ,OAAO3C,OAC7CS,MAAAA,EACAM,YAAAA,EACA8D,QAAQ,gBASpCpF,EAAUqF,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useAnimatedHeight/useAnimatedHeight.cjs"),s=require("./useAnimatedHeight/useAnimatedHeightBetween.cjs"),r=require("./useAnimatedHeight/useAutoAnimateHeight.cjs"),u=require("./useBrowserPreferences/useBrowserPreferences.cjs"),i=require("./useIntersectionObserver/useIntersectionObserver.cjs"),t=require("./useLocalStorage/useLocalStorage.cjs"),o=require("./useMutationObserver/useMutationObserver.cjs"),n=require("./usePreviousValue/usePreviousValue.cjs"),c=require("./useProgressiveImg/useProgressiveImg.cjs"),a=require("./useScreen/useScreen.cjs"),g=require("./useScrollIntoView/useScrollIntoView.cjs"),l=require("./useAriaLiveRegion/useAriaLiveRegion.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./useAnimatedHeight/useAnimatedHeight.cjs"),s=require("./useAnimatedHeight/useAnimatedHeightBetween.cjs"),r=require("./useAnimatedHeight/useAutoAnimateHeight.cjs"),u=require("./useBrowserPreferences/useBrowserPreferences.cjs"),i=require("./useIntersectionObserver/useIntersectionObserver.cjs"),t=require("./useLocalStorage/useLocalStorage.cjs"),o=require("./useMutationObserver/useMutationObserver.cjs"),n=require("./usePreviousValue/usePreviousValue.cjs"),c=require("./useProgressiveImg/useProgressiveImg.cjs"),a=require("./useScreen/useScreen.cjs"),g=require("./useScrollIntoView/useScrollIntoView.cjs"),l=require("./useAriaLiveRegion/useAriaLiveRegion.cjs"),p=require("./useClickOutside/useClickOutside.cjs"),d=require("./useFocusOutside/useFocusOutside.cjs"),m=require("./useElementDimensions/useElementDimensions.cjs"),v=require("./useId/useId.cjs"),j=require("./useKeyListener/useKeyListener.cjs"),x=require("./useListNavigation/useListNavigation.cjs"),q=require("./useMergeRefs/useMergeRefs.cjs"),A=require("./useSwipeGesture/useSwipeGesture.cjs");exports.useAnimatedHeight=e.useAnimatedHeight,exports.useAnimatedHeightBetween=s.useAnimatedHeightBetween,exports.useAutoAnimatedHeight=r.useAutoAnimatedHeight,exports.useBrowserPreferences=u.useBrowserPreferences,exports.useIntersectionObserver=i.useIntersectionObserver,exports.useLocalStorage=t.useLocalStorage,exports.useMutationObserver=o.useMutationObserver,exports.usePreviousValue=n.usePreviousValue,exports.useProgressiveImg=c.useProgressiveImg,exports.useScreen=a.useScreen,exports.useScrollIntoView=g.useScrollIntoView,exports.useAriaLiveRegion=l.useAriaLiveRegion,exports.useClickOutside=p.useClickOutside,exports.useFocusOutside=d.useFocusOutside,exports.useElementDimensions=m.useElementDimensions,exports.useId=v.useId,exports.useKeyListener=j.useKeyListener,exports.useListNavigation=x.useListNavigation,exports.useMergeRefs=q.useMergeRefs,exports.useSwipeGesture=A.useSwipeGesture;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -14,4 +14,5 @@ export { useElementDimensions, type Dimensions, } from './useElementDimensions/u
|
|
|
14
14
|
export { useId } from './useId/useId.cjs';
|
|
15
15
|
export { useKeyListener } from './useKeyListener/useKeyListener.cjs';
|
|
16
16
|
export { useListNavigation } from './useListNavigation/useListNavigation.cjs';
|
|
17
|
+
export { useMergeRefs } from './useMergeRefs/useMergeRefs.cjs';
|
|
17
18
|
export { useSwipeGesture, type SwipeChangeHandler, } from './useSwipeGesture/useSwipeGesture.cjs';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMergeRefs.cjs","sources":["../../../../src/hooks/useMergeRefs/useMergeRefs.ts"],"sourcesContent":["import {\n type ForwardedRef,\n type MutableRefObject,\n type RefCallback,\n useMemo,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\n\n/**\n * Slår sammen flere refs til én callback som bare endres når en av refsene endres.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);\n */\nexport function useMergeRefs<T>(\n ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n // biome-ignore lint/correctness/useExhaustiveDependencies: Sammenlign hver ref for seg; [refs] blir ny ved hver rendring.\n return useMemo(() => mergeRefs(...refs), refs);\n}\n"],"names":["refs","useMemo","mergeRefs"],"mappings":"yKAcO,YACAA,GAGH,OAAOC,EAAAA,QAAQ,IAAMC,EAAAA,aAAaF,GAAOA,EAC7C"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Slår sammen flere refs til én callback som bare endres når en av refsene endres.
|
|
4
|
+
* @param refs Liste over refs du vil slå sammen
|
|
5
|
+
* @returns En `RefCallback` du kan sende videre til en komponent/element
|
|
6
|
+
* @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
|
|
7
|
+
*/
|
|
8
|
+
export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../index-CaISwoxr.cjs"),r=require("./formatters/util/formatNumber.cjs"),s=require("./formatters/util/parseNumber.cjs"),t=require("./formatters/util/registerWithMask.cjs"),a=require("./formatters/avstand/formatAvstand.cjs"),i=require("./formatters/bytes/formatBytes.cjs"),o=require("./formatters/date/formatDate.cjs"),m=require("./formatters/fodselsnummer/formatFodselsnummer.cjs"),n=require("./formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs"),u=require("./formatters/kontonummer/formatKontonummer.cjs"),l=require("./formatters/kortnummer/formatKortnummer.cjs"),d=require("./formatters/telefonnummer/formatTelefonnummer.cjs"),f=require("./formatters/valuta/formatValuta.cjs"),p=require("./getThemeAndSize.cjs"),g=require("./mergeRefs.cjs"),c=require("./polymorphism/mergeProps.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("../../index-CaISwoxr.cjs"),r=require("./formatters/util/formatNumber.cjs"),s=require("./formatters/util/parseNumber.cjs"),t=require("./formatters/util/registerWithMask.cjs"),a=require("./formatters/avstand/formatAvstand.cjs"),i=require("./formatters/bytes/formatBytes.cjs"),o=require("./formatters/date/formatDate.cjs"),m=require("./formatters/fodselsnummer/formatFodselsnummer.cjs"),n=require("./formatters/organisasjonsnummer/formatOrganisasjonsnummer.cjs"),u=require("./formatters/kontonummer/formatKontonummer.cjs"),l=require("./formatters/kortnummer/formatKortnummer.cjs"),d=require("./formatters/telefonnummer/formatTelefonnummer.cjs"),f=require("./formatters/valuta/formatValuta.cjs"),p=require("./getThemeAndSize.cjs"),g=require("./mergeRefs.cjs"),c=require("../hooks/useMergeRefs/useMergeRefs.cjs"),E=require("./polymorphism/mergeProps.cjs"),x=require("./polymorphism/SlotComponent.cjs"),j=require("./tabListener.cjs"),R=require("./validators/isValidEpost/isValidEpost.cjs"),N=require("./validators/isValidTelefonnummer/isValidTelefonnummer.cjs"),V=require("./validators/isValidRegistreringsnummer/isValidRegistreringsnummer.cjs"),q=require("./validators/isValidChassisnummer/isValidChassisnummer.cjs"),M=require("./validators/isExactLength/isExactLength.cjs"),h=require("./validators/isInteger/isInteger.cjs"),O=require("./validators/isValidFodselsnummer/isValidFodselsnummer.cjs"),S=require("./validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.cjs"),T=require("./validators/isValidName/isValidName.cjs"),v=require("./validators/hasMinimumWords/hasMinimumWords.cjs"),b=require("./validators/hasNoIllegalCharacters/hasNoIllegalCharacters.cjs"),A=require("./valuePair.cjs"),G=require("./types.cjs");exports.unicode=e.unicode,exports.formatNumber=r.formatNumber,exports.parseNumber=s.parseNumber,exports.registerWithMasks=t.registerWithMasks,exports.formatAvstand=a.formatAvstand,exports.formatBytes=i.formatBytes,exports.formatDate=o.formatDate,exports.FODSELSNUMMER_REGEX=m.FODSELSNUMMER_REGEX,exports.formatFodselsnummer=m.formatFodselsnummer,exports.ORGANISASJONSNUMMER_REGEX=n.ORGANISASJONSNUMMER_REGEX,exports.formatOrganisasjonsnummer=n.formatOrganisasjonsnummer,exports.KONTONUMMER_REGEX=u.KONTONUMMER_REGEX,exports.formatKontonummer=u.formatKontonummer,exports.KORTNUMMER_REGEX=l.KORTNUMMER_REGEX,exports.formatKortnummer=l.formatKortnummer,exports.TELEFONNUMMER_REGEX=d.TELEFONNUMMER_REGEX,exports.formatTelefonnummer=d.formatTelefonnummer,exports.formatValuta=f.formatValuta,exports.getThemeAndSize=p.getThemeAndSize,exports.mergeRefs=g.mergeRefs,exports.useMergeRefs=c.useMergeRefs,exports.mergeProps=E.mergeProps,exports.SlotComponent=x.SlotComponent,exports.initTabListener=j.initTabListener,exports.isValidEpost=R.isValidEpost,exports.isValidTelefonnummer=N.isValidTelefonnummer,exports.isValidRegistreringsnummer=V.isValidRegistreringsnummer,exports.isValidChassisnummer=q.isValidChassisnummer,exports.isExactLength=M.isExactLength,exports.isInteger=h.isInteger,exports.isValidFodselsnummer=O.isValidFodselsnummer,exports.isValidOrganisasjonsnummer=S.isValidOrganisasjonsnummer,exports.isValidName=T.isValidName,exports.hasMinimumWords=v.hasMinimumWords,exports.hasNoIllegalCharacters=b.hasNoIllegalCharacters,exports.getValuePair=A.getValuePair,exports.BRANDS=G.BRANDS;
|
|
2
2
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -2,6 +2,7 @@ export * from './constants/index.cjs';
|
|
|
2
2
|
export * from './formatters/index.cjs';
|
|
3
3
|
export * from './getThemeAndSize.cjs';
|
|
4
4
|
export * from './mergeRefs.cjs';
|
|
5
|
+
export { useMergeRefs } from '../hooks/useMergeRefs/useMergeRefs.cjs';
|
|
5
6
|
export * from './polymorphism/index.cjs';
|
|
6
7
|
export * from './tabListener.cjs';
|
|
7
8
|
export * from './validators/index.cjs';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"})
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"}),exports.mergeRefs=function(...e){return function(t){for(const o of e)o&&("function"==typeof o?o(t):o&&(o.current=t))}};
|
|
2
2
|
//# sourceMappingURL=mergeRefs.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeRefs.cjs","sources":["../../../src/utilities/mergeRefs.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"mergeRefs.cjs","sources":["../../../src/utilities/mergeRefs.ts"],"sourcesContent":["import type { ForwardedRef, MutableRefObject, RefCallback } from \"react\";\n\n/**\n * Slår sammen flere refs til én, for eksempel hvis du har både en\n * egen ref i en komponent og også vil kunne ta inn en forwardRef\n * fra brukeren av komponenten.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example\n * const ref = useRef<HTMLElement>(null);\n * const combinedRef = mergeRefs(ref, forwardedRef, anotherRef);\n *\n * return <div ref={combinedRef} {...props} />;\n */\nexport function mergeRefs<T>(\n ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n return function combinedRef(instance: T | null) {\n for (const ref of refs) {\n if (!ref) continue;\n\n if (typeof ref === \"function\") {\n ref(instance);\n } else if (ref) {\n ref.current = instance;\n }\n }\n };\n}\n"],"names":["refs","instance","ref","current"],"mappings":"kGAcO,YACAA,GAEH,OAAO,SAAqBC,GACxB,IAAA,MAAWC,KAAOF,EACTE,IAEc,mBAARA,EACPA,EAAID,GACGC,IACPA,EAAIC,QAAUF,GAG1B,CACJ"}
|
|
@@ -12,11 +12,3 @@ import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
|
|
|
12
12
|
* return <div ref={combinedRef} {...props} />;
|
|
13
13
|
*/
|
|
14
14
|
export declare function mergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
15
|
-
/**
|
|
16
|
-
* Gjør det samme som {@link mergeRefs}, men wrappet i en `useMemo`, hvis du
|
|
17
|
-
* vil unngå å lage en ny funksjon ved hver render. Som regel ikke nødvendig.
|
|
18
|
-
* @param refs Liste over refs du vil slå sammen
|
|
19
|
-
* @returns En `RefCallback` du kan sende videre til en komponent/element
|
|
20
|
-
* @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
|
|
21
|
-
*/
|
|
22
|
-
export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as o,jsxs as n}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useId as e,useState as r,useRef as s}from"react";import{useMergeRefs as a}from"../../
|
|
1
|
+
import{jsx as o,jsxs as n}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useId as e,useState as r,useRef as s}from"react";import{useMergeRefs as a}from"../../hooks/useMergeRefs/useMergeRefs.js";import{Button as c}from"../button/Button.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import{CalendarIcon as p}from"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/OpenInNewIcon.js";import"../icon/icons/PenIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/WarningIcon.js";import"../../hooks/useId/useId.js";import{InputGroup as l}from"../input-group/InputGroup.js";import{Calendar as m}from"./calendar/Calendar.js";import{toValidBoundary as u}from"./utils.js";const d=t((t,d)=>{const{max:j,min:I,defaultValue:b,value:v,name:f,onChange:h,onBlur:C,onClick:g,onFocus:k,id:w,"data-testautoid":y,className:A="",label:L,labelProps:_,helpLabel:D,errorLabel:R,supportLabelProps:x,tooltip:N,description:P,required:M,disabled:B,readOnly:E,autoComplete:O,inputMode:T,...V}=t,{inline:z,style:G,"data-size":H,...S}=V,U=e(),q=w?`${w}-calendar`:`jkl-calendar-${U}`,F=void 0!==v,[$,Q]=r(b??""),W=F?v:$,J=u(I),K=u(j),X=s(null),Y=a(X,d),Z=o=>{F||Q(o.target.value),h?.(o)},oo=()=>{!F&&X.current&&Q(X.current.value)};return o(l,{id:w,className:i("jkl-date-input",A),inline:z,style:G,"data-size":H,label:L,labelProps:_,helpLabel:D,errorLabel:R,supportLabelProps:x,tooltip:N,description:P,render:i=>n("div",{className:"jkl-date-input__wrapper","data-invalid":i["aria-invalid"],children:[o("input",{ref:Y,"data-testid":"jkl-date-input__input","data-testautoid":y,"data-empty":W?void 0:"true",className:"jkl-date-input__input",name:f,type:"date",...F?{value:v}:{defaultValue:b},max:K,min:J,required:M,disabled:B,readOnly:E,autoComplete:O,inputMode:T,onChange:Z,onFocus:k,onBlur:C,onClick:o=>{o.preventDefault(),g?.(o)},...S,...i}),o(c,{type:"button",variant:"ghost",icon:o(p,{}),"aria-label":"Åpne kalender","data-testid":"jkl-date-input__trigger",className:"jkl-date-input__calendar-trigger",disabled:B||E,onClick:oo,popovertarget:q}),o(m,{"data-testid":"jkl-calendar",id:q,value:W,min:J,max:K,onChange:o=>(o=>{const n=X.current;if(!n)return;const i=Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype,"value")?.set;i?i.call(n,o):n.value=o,n.dispatchEvent(new Event("input",{bubbles:!0}))})(o.target.value),label:L,description:P,popover:"auto"})]})})});d.displayName="DateInput";export{d as DateInput};
|
|
2
2
|
//# sourceMappingURL=DateInput.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DateInput.js","sources":["../../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../../utilities/index.js\";\nimport { Button } from \"../button/index.js\";\nimport { CalendarIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { Calendar } from \"./calendar/Calendar.js\";\nimport type { DateInputProps } from \"./types.js\";\nimport { toValidBoundary } from \"./utils.js\";\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(\n (props, forwardedInputRef) => {\n const {\n max,\n min,\n defaultValue,\n value,\n name,\n onChange,\n onBlur,\n onClick,\n onFocus,\n id,\n \"data-testautoid\": testAutoId,\n className = \"\",\n label,\n labelProps,\n helpLabel,\n errorLabel,\n supportLabelProps,\n tooltip,\n description,\n required,\n disabled,\n readOnly,\n autoComplete,\n inputMode,\n ...rest\n } = props;\n\n // Skiller InputGroup-spesifikke props fra native input-attributter, slik\n // at vi ikke lekker f.eks. inline, data-size og style ned på <input>.\n const {\n inline,\n style,\n \"data-size\": dataSize,\n ...inputAttributes\n } = rest;\n\n const generatedCalendarId = useId();\n const calendarId = id\n ? `${id}-calendar`\n : `jkl-calendar-${generatedCalendarId}`;\n\n const isControlled = value !== undefined;\n\n // Intern state holder kalenderen i synk. I ukontrollert modus er selve\n // <input> ukontrollert (defaultValue), slik at react-hook-form (register)\n // kan skrive verdien via ref-en – f.eks. ved reset() og setValue().\n const [internalValue, setInternalValue] = useState<string>(\n defaultValue ?? \"\",\n );\n const currentValue = isControlled ? value : internalValue;\n\n // min/max kan komme inn som number eller dd.mm.yyyy (bl.a. via\n // react-hook-forms register). Både det native feltet og kalenderen\n // forholder seg til ISO-strenger.\n const minValue = toValidBoundary(min);\n const maxValue = toValidBoundary(max);\n\n // Samle-ref: forward til forbruker / react-hook-form, og behold internt\n // slik at vi kan lese og skrive verdien fra kalenderen.\n const inputRef = useRef<HTMLInputElement | null>(null);\n const setInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n const handleInputChange = (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (!isControlled) {\n setInternalValue(event.target.value);\n }\n onChange?.(event);\n };\n\n // Skriver en ny verdi inn i det native feltet og fyrer et ekte input-event.\n // Da flyter kalendervalg gjennom samme onChange som tastaturinntasting,\n // slik at også react-hook-form fanger endringen.\n const commitFromCalendar = (next: string) => {\n const input = inputRef.current;\n if (!input) {\n return;\n }\n const setNativeValue = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n if (setNativeValue) {\n setNativeValue.call(input, next);\n } else {\n input.value = next;\n }\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n };\n\n // Leser gjeldende verdi fra feltet når kalenderen åpnes, slik at den\n // reflekterer eventuelle programmatiske skriv (reset/setValue) i\n // ukontrollert modus.\n const syncCalendarFromInput = () => {\n if (!isControlled && inputRef.current) {\n setInternalValue(inputRef.current.value);\n }\n };\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-date-input\", className)}\n inline={inline}\n style={style}\n data-size={dataSize}\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 <div\n className=\"jkl-date-input__wrapper\"\n data-invalid={inputProps[\"aria-invalid\"]}\n >\n <input\n ref={setInputRef}\n data-testid=\"jkl-date-input__input\"\n data-testautoid={testAutoId}\n data-empty={currentValue ? undefined : \"true\"}\n className=\"jkl-date-input__input\"\n name={name}\n type=\"date\"\n {...(isControlled ? { value } : { defaultValue })}\n max={maxValue}\n min={minValue}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n inputMode={inputMode}\n onChange={handleInputChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onClick={(e) => {\n e.preventDefault();\n onClick?.(e);\n }}\n {...inputAttributes}\n {...inputProps}\n />\n <Button\n type=\"button\"\n variant=\"ghost\"\n icon={<CalendarIcon />}\n aria-label=\"Åpne kalender\"\n data-testid=\"jkl-date-input__trigger\"\n className=\"jkl-date-input__calendar-trigger\"\n disabled={disabled || readOnly}\n onClick={syncCalendarFromInput}\n // @ts-expect-error vet ikke hvorfor vi får typefeil her? kanskje på grunn av hvordan vi behandler polymorfisme?\n popovertarget={calendarId}\n />\n <Calendar\n data-testid=\"jkl-calendar\"\n id={calendarId}\n value={currentValue}\n min={minValue}\n max={maxValue}\n onChange={(e) => commitFromCalendar(e.target.value)}\n label={label}\n description={description}\n popover=\"auto\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nDateInput.displayName = \"DateInput\";\n"],"names":["DateInput","forwardRef","props","forwardedInputRef","max","min","defaultValue","value","name","onChange","onBlur","onClick","onFocus","id","testAutoId","className","label","labelProps","helpLabel","errorLabel","supportLabelProps","tooltip","description","required","disabled","readOnly","autoComplete","inputMode","rest","inline","style","dataSize","inputAttributes","generatedCalendarId","useId","calendarId","isControlled","internalValue","setInternalValue","useState","currentValue","minValue","toValidBoundary","maxValue","inputRef","useRef","setInputRef","useMergeRefs","handleInputChange","event","target","syncCalendarFromInput","current","jsx","InputGroup","clsx","render","inputProps","jsxs","children","ref","type","e","preventDefault","Button","variant","icon","CalendarIcon","popovertarget","Calendar","next","input","setNativeValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","Event","bubbles","commitFromCalendar","popover","displayName"],"mappings":"o4DAUO,MAAMA,EAAYC,EACrB,CAACC,EAAOC,KACJ,MACIC,IAAAA,EACAC,IAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,GAAAA,EACA,kBAAmBC,EACnBC,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACH1B,GAKA2B,OAAAA,EACAC,MAAAA,EACA,YAAaC,KACVC,GACHJ,EAEEK,EAAsBC,IACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAgBrC,GAC3BsC,EAAWD,EAAgBtC,GAI3BwC,EAAWC,EAAgC,MAC3CC,EAAcC,EAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,GAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAACC,EAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAC,QAAA,CACGO,IAAKd,EACL,cAAY,wBACZ,kBAAiBhC,EACjB,aAAY0B,OAAe,EAAY,OACvCzB,UAAU,wBACVP,KAAAA,EACAqD,KAAK,UACAzB,EAAe,CAAE7B,MAAAA,GAAU,CAAED,aAAAA,GAClCF,IAAKuC,EACLtC,IAAKoC,EACLlB,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAlB,SAAUuC,EACVpC,QAAAA,EACAF,OAAAA,EACAC,QAAUmD,IACNA,EAAEC,iBACFpD,IAAUmD,OAEV9B,KACAyB,IAERJ,EAACW,EAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,OAAOC,EAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,GAETiB,cAAejC,IAEnBkB,EAACgB,EAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFJ,CAACQ,IACxB,MAAMC,EAAQ3B,EAASQ,QACvB,IAAKmB,EACD,OAEJ,MAAMC,EAAiBC,OAAOC,yBAC1BC,OAAOC,iBAAiBC,UACxB,UACDC,IACCN,EACAA,EAAeO,KAAKR,EAAOD,GAE3BC,EAAMhE,MAAQ+D,EAElBC,EAAMS,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,MA2EjBC,CAAmBrB,EAAEZ,OAAO3C,OAC7CS,MAAAA,EACAM,YAAAA,EACA8D,QAAQ,gBASpCpF,EAAUqF,YAAc"}
|
|
1
|
+
{"version":3,"file":"DateInput.js","sources":["../../../../src/components/date-input/DateInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId, useRef, useState } from \"react\";\nimport { useMergeRefs } from \"../../hooks/useMergeRefs/useMergeRefs.js\";\nimport { Button } from \"../button/index.js\";\nimport { CalendarIcon } from \"../icon/index.js\";\nimport { InputGroup } from \"../input-group/index.js\";\nimport { Calendar } from \"./calendar/Calendar.js\";\nimport type { DateInputProps } from \"./types.js\";\nimport { toValidBoundary } from \"./utils.js\";\n\nexport const DateInput = forwardRef<HTMLInputElement, DateInputProps>(\n (props, forwardedInputRef) => {\n const {\n max,\n min,\n defaultValue,\n value,\n name,\n onChange,\n onBlur,\n onClick,\n onFocus,\n id,\n \"data-testautoid\": testAutoId,\n className = \"\",\n label,\n labelProps,\n helpLabel,\n errorLabel,\n supportLabelProps,\n tooltip,\n description,\n required,\n disabled,\n readOnly,\n autoComplete,\n inputMode,\n ...rest\n } = props;\n\n // Skiller InputGroup-spesifikke props fra native input-attributter, slik\n // at vi ikke lekker f.eks. inline, data-size og style ned på <input>.\n const {\n inline,\n style,\n \"data-size\": dataSize,\n ...inputAttributes\n } = rest;\n\n const generatedCalendarId = useId();\n const calendarId = id\n ? `${id}-calendar`\n : `jkl-calendar-${generatedCalendarId}`;\n\n const isControlled = value !== undefined;\n\n // Intern state holder kalenderen i synk. I ukontrollert modus er selve\n // <input> ukontrollert (defaultValue), slik at react-hook-form (register)\n // kan skrive verdien via ref-en – f.eks. ved reset() og setValue().\n const [internalValue, setInternalValue] = useState<string>(\n defaultValue ?? \"\",\n );\n const currentValue = isControlled ? value : internalValue;\n\n // min/max kan komme inn som number eller dd.mm.yyyy (bl.a. via\n // react-hook-forms register). Både det native feltet og kalenderen\n // forholder seg til ISO-strenger.\n const minValue = toValidBoundary(min);\n const maxValue = toValidBoundary(max);\n\n // Samle-ref: forward til forbruker / react-hook-form, og behold internt\n // slik at vi kan lese og skrive verdien fra kalenderen.\n const inputRef = useRef<HTMLInputElement | null>(null);\n const setInputRef = useMergeRefs(inputRef, forwardedInputRef);\n\n const handleInputChange = (\n event: React.ChangeEvent<HTMLInputElement>,\n ) => {\n if (!isControlled) {\n setInternalValue(event.target.value);\n }\n onChange?.(event);\n };\n\n // Skriver en ny verdi inn i det native feltet og fyrer et ekte input-event.\n // Da flyter kalendervalg gjennom samme onChange som tastaturinntasting,\n // slik at også react-hook-form fanger endringen.\n const commitFromCalendar = (next: string) => {\n const input = inputRef.current;\n if (!input) {\n return;\n }\n const setNativeValue = Object.getOwnPropertyDescriptor(\n window.HTMLInputElement.prototype,\n \"value\",\n )?.set;\n if (setNativeValue) {\n setNativeValue.call(input, next);\n } else {\n input.value = next;\n }\n input.dispatchEvent(new Event(\"input\", { bubbles: true }));\n };\n\n // Leser gjeldende verdi fra feltet når kalenderen åpnes, slik at den\n // reflekterer eventuelle programmatiske skriv (reset/setValue) i\n // ukontrollert modus.\n const syncCalendarFromInput = () => {\n if (!isControlled && inputRef.current) {\n setInternalValue(inputRef.current.value);\n }\n };\n\n return (\n <InputGroup\n id={id}\n className={clsx(\"jkl-date-input\", className)}\n inline={inline}\n style={style}\n data-size={dataSize}\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 <div\n className=\"jkl-date-input__wrapper\"\n data-invalid={inputProps[\"aria-invalid\"]}\n >\n <input\n ref={setInputRef}\n data-testid=\"jkl-date-input__input\"\n data-testautoid={testAutoId}\n data-empty={currentValue ? undefined : \"true\"}\n className=\"jkl-date-input__input\"\n name={name}\n type=\"date\"\n {...(isControlled ? { value } : { defaultValue })}\n max={maxValue}\n min={minValue}\n required={required}\n disabled={disabled}\n readOnly={readOnly}\n autoComplete={autoComplete}\n inputMode={inputMode}\n onChange={handleInputChange}\n onFocus={onFocus}\n onBlur={onBlur}\n onClick={(e) => {\n e.preventDefault();\n onClick?.(e);\n }}\n {...inputAttributes}\n {...inputProps}\n />\n <Button\n type=\"button\"\n variant=\"ghost\"\n icon={<CalendarIcon />}\n aria-label=\"Åpne kalender\"\n data-testid=\"jkl-date-input__trigger\"\n className=\"jkl-date-input__calendar-trigger\"\n disabled={disabled || readOnly}\n onClick={syncCalendarFromInput}\n // @ts-expect-error vet ikke hvorfor vi får typefeil her? kanskje på grunn av hvordan vi behandler polymorfisme?\n popovertarget={calendarId}\n />\n <Calendar\n data-testid=\"jkl-calendar\"\n id={calendarId}\n value={currentValue}\n min={minValue}\n max={maxValue}\n onChange={(e) => commitFromCalendar(e.target.value)}\n label={label}\n description={description}\n popover=\"auto\"\n />\n </div>\n )}\n />\n );\n },\n);\n\nDateInput.displayName = \"DateInput\";\n"],"names":["DateInput","forwardRef","props","forwardedInputRef","max","min","defaultValue","value","name","onChange","onBlur","onClick","onFocus","id","testAutoId","className","label","labelProps","helpLabel","errorLabel","supportLabelProps","tooltip","description","required","disabled","readOnly","autoComplete","inputMode","rest","inline","style","dataSize","inputAttributes","generatedCalendarId","useId","calendarId","isControlled","internalValue","setInternalValue","useState","currentValue","minValue","toValidBoundary","maxValue","inputRef","useRef","setInputRef","useMergeRefs","handleInputChange","event","target","syncCalendarFromInput","current","jsx","InputGroup","clsx","render","inputProps","jsxs","children","ref","type","e","preventDefault","Button","variant","icon","CalendarIcon","popovertarget","Calendar","next","input","setNativeValue","Object","getOwnPropertyDescriptor","window","HTMLInputElement","prototype","set","call","dispatchEvent","Event","bubbles","commitFromCalendar","popover","displayName"],"mappings":"01DAUO,MAAMA,EAAYC,EACrB,CAACC,EAAOC,KACJ,MACIC,IAAAA,EACAC,IAAAA,EACAC,aAAAA,EACAC,MAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,QAAAA,EACAC,GAAAA,EACA,kBAAmBC,EACnBC,UAAAA,EAAY,GACZC,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACH1B,GAKA2B,OAAAA,EACAC,MAAAA,EACA,YAAaC,KACVC,GACHJ,EAEEK,EAAsBC,IACtBC,EAAatB,EACb,GAAGA,aACH,gBAAgBoB,IAEhBG,OAAyB,IAAV7B,GAKd8B,EAAeC,GAAoBC,EACtCjC,GAAgB,IAEdkC,EAAeJ,EAAe7B,EAAQ8B,EAKtCI,EAAWC,EAAgBrC,GAC3BsC,EAAWD,EAAgBtC,GAI3BwC,EAAWC,EAAgC,MAC3CC,EAAcC,EAAaH,EAAUzC,GAErC6C,EACFC,IAEKb,GACDE,EAAiBW,EAAMC,OAAO3C,OAElCE,IAAWwC,IA0BTE,GAAwB,MACrBf,GAAgBQ,EAASQ,SAC1Bd,EAAiBM,EAASQ,QAAQ7C,QAI1C,OACI8C,EAACC,EAAA,CACGzC,GAAAA,EACAE,UAAWwC,EAAK,iBAAkBxC,GAClCc,OAAAA,EACAC,MAAAA,EACA,YAAWC,EACXf,MAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAC,WAAAA,EACAC,kBAAAA,EACAC,QAAAA,EACAC,YAAAA,EACAkC,OAASC,GACLC,EAAC,MAAA,CACG3C,UAAU,0BACV,eAAc0C,EAAW,gBAEzBE,SAAA,CAAAN,EAAC,QAAA,CACGO,IAAKd,EACL,cAAY,wBACZ,kBAAiBhC,EACjB,aAAY0B,OAAe,EAAY,OACvCzB,UAAU,wBACVP,KAAAA,EACAqD,KAAK,UACAzB,EAAe,CAAE7B,MAAAA,GAAU,CAAED,aAAAA,GAClCF,IAAKuC,EACLtC,IAAKoC,EACLlB,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,aAAAA,EACAC,UAAAA,EACAlB,SAAUuC,EACVpC,QAAAA,EACAF,OAAAA,EACAC,QAAUmD,IACNA,EAAEC,iBACFpD,IAAUmD,OAEV9B,KACAyB,IAERJ,EAACW,EAAA,CACGH,KAAK,SACLI,QAAQ,QACRC,OAAOC,EAAA,IACP,aAAW,gBACX,cAAY,0BACZpD,UAAU,mCACVS,SAAUA,GAAYC,EACtBd,QAASwC,GAETiB,cAAejC,IAEnBkB,EAACgB,EAAA,CACG,cAAY,eACZxD,GAAIsB,EACJ5B,MAAOiC,EACPnC,IAAKoC,EACLrC,IAAKuC,EACLlC,SAAWqD,GAzFJ,CAACQ,IACxB,MAAMC,EAAQ3B,EAASQ,QACvB,IAAKmB,EACD,OAEJ,MAAMC,EAAiBC,OAAOC,yBAC1BC,OAAOC,iBAAiBC,UACxB,UACDC,IACCN,EACAA,EAAeO,KAAKR,EAAOD,GAE3BC,EAAMhE,MAAQ+D,EAElBC,EAAMS,cAAc,IAAIC,MAAM,QAAS,CAAEC,SAAS,MA2EjBC,CAAmBrB,EAAEZ,OAAO3C,OAC7CS,MAAAA,EACAM,YAAAA,EACA8D,QAAQ,gBASpCpF,EAAUqF,YAAc"}
|
|
@@ -14,4 +14,5 @@ export { useElementDimensions, type Dimensions, } from './useElementDimensions/u
|
|
|
14
14
|
export { useId } from './useId/useId.js';
|
|
15
15
|
export { useKeyListener } from './useKeyListener/useKeyListener.js';
|
|
16
16
|
export { useListNavigation } from './useListNavigation/useListNavigation.js';
|
|
17
|
+
export { useMergeRefs } from './useMergeRefs/useMergeRefs.js';
|
|
17
18
|
export { useSwipeGesture, type SwipeChangeHandler, } from './useSwipeGesture/useSwipeGesture.js';
|
package/build/es/hooks/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{useAnimatedHeight as e}from"./useAnimatedHeight/useAnimatedHeight.js";import{useAnimatedHeightBetween as s}from"./useAnimatedHeight/useAnimatedHeightBetween.js";import{useAutoAnimatedHeight as
|
|
1
|
+
import{useAnimatedHeight as e}from"./useAnimatedHeight/useAnimatedHeight.js";import{useAnimatedHeightBetween as s}from"./useAnimatedHeight/useAnimatedHeightBetween.js";import{useAutoAnimatedHeight as r}from"./useAnimatedHeight/useAutoAnimateHeight.js";import{useBrowserPreferences as i}from"./useBrowserPreferences/useBrowserPreferences.js";import{useIntersectionObserver as u}from"./useIntersectionObserver/useIntersectionObserver.js";import{useLocalStorage as t}from"./useLocalStorage/useLocalStorage.js";import{useMutationObserver as o}from"./useMutationObserver/useMutationObserver.js";import{usePreviousValue as a}from"./usePreviousValue/usePreviousValue.js";import{useProgressiveImg as m}from"./useProgressiveImg/useProgressiveImg.js";import{useScreen as n}from"./useScreen/useScreen.js";import{useScrollIntoView as g}from"./useScrollIntoView/useScrollIntoView.js";import{useAriaLiveRegion as c}from"./useAriaLiveRegion/useAriaLiveRegion.js";import{useClickOutside as f}from"./useClickOutside/useClickOutside.js";import{useFocusOutside as p}from"./useFocusOutside/useFocusOutside.js";import{useElementDimensions as l}from"./useElementDimensions/useElementDimensions.js";import{useId as v}from"./useId/useId.js";import{useKeyListener as d}from"./useKeyListener/useKeyListener.js";import{useListNavigation as j}from"./useListNavigation/useListNavigation.js";import{useMergeRefs as A}from"./useMergeRefs/useMergeRefs.js";import{useSwipeGesture as I}from"./useSwipeGesture/useSwipeGesture.js";export{e as useAnimatedHeight,s as useAnimatedHeightBetween,c as useAriaLiveRegion,r as useAutoAnimatedHeight,i as useBrowserPreferences,f as useClickOutside,l as useElementDimensions,p as useFocusOutside,v as useId,u as useIntersectionObserver,d as useKeyListener,j as useListNavigation,t as useLocalStorage,A as useMergeRefs,o as useMutationObserver,a as usePreviousValue,m as useProgressiveImg,n as useScreen,g as useScrollIntoView,I as useSwipeGesture};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
|
|
2
|
+
/**
|
|
3
|
+
* Slår sammen flere refs til én callback som bare endres når en av refsene endres.
|
|
4
|
+
* @param refs Liste over refs du vil slå sammen
|
|
5
|
+
* @returns En `RefCallback` du kan sende videre til en komponent/element
|
|
6
|
+
* @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
|
|
7
|
+
*/
|
|
8
|
+
export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMergeRefs.js","sources":["../../../../src/hooks/useMergeRefs/useMergeRefs.ts"],"sourcesContent":["import {\n type ForwardedRef,\n type MutableRefObject,\n type RefCallback,\n useMemo,\n} from \"react\";\nimport { mergeRefs } from \"../../utilities/mergeRefs.js\";\n\n/**\n * Slår sammen flere refs til én callback som bare endres når en av refsene endres.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);\n */\nexport function useMergeRefs<T>(\n ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n // biome-ignore lint/correctness/useExhaustiveDependencies: Sammenlign hver ref for seg; [refs] blir ny ved hver rendring.\n return useMemo(() => mergeRefs(...refs), refs);\n}\n"],"names":["useMergeRefs","refs","useMemo","mergeRefs"],"mappings":"yFAcO,SAASA,KACTC,GAGH,OAAOC,EAAQ,IAAMC,KAAaF,GAAOA,EAC7C"}
|
|
@@ -2,6 +2,7 @@ export * from './constants/index.js';
|
|
|
2
2
|
export * from './formatters/index.js';
|
|
3
3
|
export * from './getThemeAndSize.js';
|
|
4
4
|
export * from './mergeRefs.js';
|
|
5
|
+
export { useMergeRefs } from '../hooks/useMergeRefs/useMergeRefs.js';
|
|
5
6
|
export * from './polymorphism/index.js';
|
|
6
7
|
export * from './tabListener.js';
|
|
7
8
|
export * from './validators/index.js';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{u as s}from"../../index-C1iqmqvT.js";import{formatNumber as a}from"./formatters/util/formatNumber.js";import{parseNumber as r}from"./formatters/util/parseNumber.js";import{registerWithMasks as m}from"./formatters/util/registerWithMask.js";import{formatAvstand as e}from"./formatters/avstand/formatAvstand.js";import{formatBytes as o}from"./formatters/bytes/formatBytes.js";import{formatDate as t}from"./formatters/date/formatDate.js";import{FODSELSNUMMER_REGEX as i,formatFodselsnummer as n}from"./formatters/fodselsnummer/formatFodselsnummer.js";import{ORGANISASJONSNUMMER_REGEX as f,formatOrganisasjonsnummer as l}from"./formatters/organisasjonsnummer/formatOrganisasjonsnummer.js";import{KONTONUMMER_REGEX as u,formatKontonummer as d}from"./formatters/kontonummer/formatKontonummer.js";import{KORTNUMMER_REGEX as p,formatKortnummer as g}from"./formatters/kortnummer/formatKortnummer.js";import{TELEFONNUMMER_REGEX as E,formatTelefonnummer as j}from"./formatters/telefonnummer/formatTelefonnummer.js";import{formatValuta as R}from"./formatters/valuta/formatValuta.js";import{getThemeAndSize as N}from"./getThemeAndSize.js";import{mergeRefs as V
|
|
1
|
+
import{u as s}from"../../index-C1iqmqvT.js";import{formatNumber as a}from"./formatters/util/formatNumber.js";import{parseNumber as r}from"./formatters/util/parseNumber.js";import{registerWithMasks as m}from"./formatters/util/registerWithMask.js";import{formatAvstand as e}from"./formatters/avstand/formatAvstand.js";import{formatBytes as o}from"./formatters/bytes/formatBytes.js";import{formatDate as t}from"./formatters/date/formatDate.js";import{FODSELSNUMMER_REGEX as i,formatFodselsnummer as n}from"./formatters/fodselsnummer/formatFodselsnummer.js";import{ORGANISASJONSNUMMER_REGEX as f,formatOrganisasjonsnummer as l}from"./formatters/organisasjonsnummer/formatOrganisasjonsnummer.js";import{KONTONUMMER_REGEX as u,formatKontonummer as d}from"./formatters/kontonummer/formatKontonummer.js";import{KORTNUMMER_REGEX as p,formatKortnummer as g}from"./formatters/kortnummer/formatKortnummer.js";import{TELEFONNUMMER_REGEX as E,formatTelefonnummer as j}from"./formatters/telefonnummer/formatTelefonnummer.js";import{formatValuta as R}from"./formatters/valuta/formatValuta.js";import{getThemeAndSize as N}from"./getThemeAndSize.js";import{mergeRefs as V}from"./mergeRefs.js";import{useMergeRefs as M}from"../hooks/useMergeRefs/useMergeRefs.js";import{mergeProps as h}from"./polymorphism/mergeProps.js";import{SlotComponent as O}from"./polymorphism/SlotComponent.js";import{initTabListener as S}from"./tabListener.js";import{isValidEpost as T}from"./validators/isValidEpost/isValidEpost.js";import{isValidTelefonnummer as v}from"./validators/isValidTelefonnummer/isValidTelefonnummer.js";import{isValidRegistreringsnummer as A}from"./validators/isValidRegistreringsnummer/isValidRegistreringsnummer.js";import{isValidChassisnummer as G}from"./validators/isValidChassisnummer/isValidChassisnummer.js";import{isExactLength as C}from"./validators/isExactLength/isExactLength.js";import{isInteger as F}from"./validators/isInteger/isInteger.js";import{isValidFodselsnummer as L}from"./validators/isValidFodselsnummer/isValidFodselsnummer.js";import{isValidOrganisasjonsnummer as b}from"./validators/isValidOrganisasjonsnummer/isValidOrganisasjonsnummer.js";import{isValidName as I}from"./validators/isValidName/isValidName.js";import{hasMinimumWords as K}from"./validators/hasMinimumWords/hasMinimumWords.js";import{hasNoIllegalCharacters as U}from"./validators/hasNoIllegalCharacters/hasNoIllegalCharacters.js";import{getValuePair as X}from"./valuePair.js";import{BRANDS as _}from"./types.js";export{_ as BRANDS,i as FODSELSNUMMER_REGEX,u as KONTONUMMER_REGEX,p as KORTNUMMER_REGEX,f as ORGANISASJONSNUMMER_REGEX,O as SlotComponent,E as TELEFONNUMMER_REGEX,e as formatAvstand,o as formatBytes,t as formatDate,n as formatFodselsnummer,d as formatKontonummer,g as formatKortnummer,a as formatNumber,l as formatOrganisasjonsnummer,j as formatTelefonnummer,R as formatValuta,N as getThemeAndSize,X as getValuePair,K as hasMinimumWords,U as hasNoIllegalCharacters,S as initTabListener,C as isExactLength,F as isInteger,G as isValidChassisnummer,T as isValidEpost,L as isValidFodselsnummer,I as isValidName,b as isValidOrganisasjonsnummer,A as isValidRegistreringsnummer,v as isValidTelefonnummer,h as mergeProps,V as mergeRefs,r as parseNumber,m as registerWithMasks,s as unicode,M as useMergeRefs};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -12,11 +12,3 @@ import { ForwardedRef, MutableRefObject, RefCallback } from 'react';
|
|
|
12
12
|
* return <div ref={combinedRef} {...props} />;
|
|
13
13
|
*/
|
|
14
14
|
export declare function mergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
15
|
-
/**
|
|
16
|
-
* Gjør det samme som {@link mergeRefs}, men wrappet i en `useMemo`, hvis du
|
|
17
|
-
* vil unngå å lage en ny funksjon ved hver render. Som regel ikke nødvendig.
|
|
18
|
-
* @param refs Liste over refs du vil slå sammen
|
|
19
|
-
* @returns En `RefCallback` du kan sende videre til en komponent/element
|
|
20
|
-
* @example const combinedRef = useMergeRefs(ref, forwardedRef, anotherRef);
|
|
21
|
-
*/
|
|
22
|
-
export declare function useMergeRefs<T>(...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]): RefCallback<T>;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
function n(...n){return function(o){for(const t of n)t&&("function"==typeof t?t(o):t&&(t.current=o))}}export{n as mergeRefs};
|
|
2
2
|
//# sourceMappingURL=mergeRefs.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mergeRefs.js","sources":["../../../src/utilities/mergeRefs.ts"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"mergeRefs.js","sources":["../../../src/utilities/mergeRefs.ts"],"sourcesContent":["import type { ForwardedRef, MutableRefObject, RefCallback } from \"react\";\n\n/**\n * Slår sammen flere refs til én, for eksempel hvis du har både en\n * egen ref i en komponent og også vil kunne ta inn en forwardRef\n * fra brukeren av komponenten.\n * @param refs Liste over refs du vil slå sammen\n * @returns En `RefCallback` du kan sende videre til en komponent/element\n * @example\n * const ref = useRef<HTMLElement>(null);\n * const combinedRef = mergeRefs(ref, forwardedRef, anotherRef);\n *\n * return <div ref={combinedRef} {...props} />;\n */\nexport function mergeRefs<T>(\n ...refs: (ForwardedRef<T> | MutableRefObject<T> | undefined)[]\n): RefCallback<T> {\n return function combinedRef(instance: T | null) {\n for (const ref of refs) {\n if (!ref) continue;\n\n if (typeof ref === \"function\") {\n ref(instance);\n } else if (ref) {\n ref.current = instance;\n }\n }\n };\n}\n"],"names":["mergeRefs","refs","instance","ref","current"],"mappings":"AAcO,SAASA,KACTC,GAEH,OAAO,SAAqBC,GACxB,IAAA,MAAWC,KAAOF,EACTE,IAEc,mBAARA,EACPA,EAAID,GACGC,IACPA,EAAIC,QAAUF,GAG1B,CACJ"}
|
package/package.json
CHANGED
|
@@ -26,10 +26,10 @@
|
|
|
26
26
|
}
|
|
27
27
|
}
|
|
28
28
|
.jkl-countdown__tracker {
|
|
29
|
-
animation: jkl-downcount-
|
|
29
|
+
animation: jkl-downcount-utpffm7 var(--duration) linear forwards;
|
|
30
30
|
animation-play-state: var(--play-state, running);
|
|
31
31
|
}
|
|
32
|
-
@keyframes jkl-downcount-
|
|
32
|
+
@keyframes jkl-downcount-utpffm7 {
|
|
33
33
|
from {
|
|
34
34
|
width: 100%;
|
|
35
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);width:100%;overflow:hidden}.jkl-countdown__tracker{display:block;height:var(--bar-height);background-color:var(--bar-color)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-
|
|
1
|
+
@layer jokul.components{.jkl-countdown{--track-color:var(--jkl-color-border-subdued);--bar-color:var(--jkl-color-border-strong);--bar-height:0.25rem;background-color:var(--track-color);border-radius:6.25rem;height:var(--bar-height);width:100%;overflow:hidden}.jkl-countdown__tracker{display:block;height:var(--bar-height);background-color:var(--bar-color)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-utpffm7 var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-utpffm7{0%{width:100%}to{width:0}}}
|
|
@@ -20,12 +20,12 @@
|
|
|
20
20
|
font: var(--jkl-text-style-paragraph-small);
|
|
21
21
|
}
|
|
22
22
|
.jkl-feedback__fade-in {
|
|
23
|
-
animation: jkl-show-
|
|
23
|
+
animation: jkl-show-uxr31ln 0.25s ease-out;
|
|
24
24
|
}
|
|
25
25
|
.jkl-feedback__buttons {
|
|
26
26
|
display: flex;
|
|
27
27
|
}
|
|
28
|
-
@keyframes jkl-show-
|
|
28
|
+
@keyframes jkl-show-uxr31ln {
|
|
29
29
|
from {
|
|
30
30
|
transform: translate3d(0, 0.5rem, 0);
|
|
31
31
|
opacity: 0;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{width:100%;transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive)}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);margin-bottom:var(--jkl-unit-20);font:var(--jkl-text-style-paragraph-small)}.jkl-feedback__fade-in{animation:jkl-show-
|
|
1
|
+
@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{width:100%;transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive)}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);margin-bottom:var(--jkl-unit-20);font:var(--jkl-text-style-paragraph-small)}.jkl-feedback__fade-in{animation:jkl-show-uxr31ln .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-uxr31ln{0%{transform:translate3d(0,.5rem,0);opacity:0}}.jkl-feedback-smileys{margin-top:var(--jkl-unit-10);display:flex;justify-content:space-between;width:100%;max-width:22.5rem;flex-wrap:nowrap;gap:var(--jkl-spacing-12)}.jkl-feedback-smiley-option{display:inline-block;position:relative;cursor:pointer;height:2.5rem;width:2.5rem;color:var(--jkl-color-text-subdued);transform:translateZ(0);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{stroke:ButtonFace;fill:ButtonText}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{content:"";position:absolute;border-radius:50%;opacity:0;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity}.jkl-feedback-smiley-option:before{inset:0;box-shadow:0 .125rem 1.875rem #0000001a}.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-strong);outline-offset:3px}}
|
|
@@ -340,22 +340,22 @@
|
|
|
340
340
|
animation: 2500ms linear infinite;
|
|
341
341
|
}
|
|
342
342
|
.jkl-loader__dot--left {
|
|
343
|
-
animation-name: jkl-loader-left-spin-
|
|
343
|
+
animation-name: jkl-loader-left-spin-u2mhq99;
|
|
344
344
|
margin-right: calc(var(--jkl-loader-spacing) * 0.9);
|
|
345
345
|
}
|
|
346
346
|
.jkl-loader__dot--middle {
|
|
347
|
-
animation-name: jkl-loader-middle-spin-
|
|
347
|
+
animation-name: jkl-loader-middle-spin-u2mhq9u;
|
|
348
348
|
margin-right: var(--jkl-loader-spacing);
|
|
349
349
|
}
|
|
350
350
|
.jkl-loader__dot--right {
|
|
351
|
-
animation-name: jkl-loader-right-spin-
|
|
351
|
+
animation-name: jkl-loader-right-spin-u2mhq9z;
|
|
352
352
|
}
|
|
353
353
|
@media screen and (forced-colors: active) {
|
|
354
354
|
.jkl-loader__dot {
|
|
355
355
|
background-color: CanvasText;
|
|
356
356
|
}
|
|
357
357
|
}
|
|
358
|
-
@keyframes jkl-loader-left-spin-
|
|
358
|
+
@keyframes jkl-loader-left-spin-u2mhq99 {
|
|
359
359
|
0% {
|
|
360
360
|
transform: rotate(0) scale(0);
|
|
361
361
|
}
|
|
@@ -369,7 +369,7 @@
|
|
|
369
369
|
transform: rotate(180deg) scale(0);
|
|
370
370
|
}
|
|
371
371
|
}
|
|
372
|
-
@keyframes jkl-loader-middle-spin-
|
|
372
|
+
@keyframes jkl-loader-middle-spin-u2mhq9u {
|
|
373
373
|
0% {
|
|
374
374
|
transform: rotate(20deg) scale(0);
|
|
375
375
|
}
|
|
@@ -386,7 +386,7 @@
|
|
|
386
386
|
transform: rotate(200deg) scale(0);
|
|
387
387
|
}
|
|
388
388
|
}
|
|
389
|
-
@keyframes jkl-loader-right-spin-
|
|
389
|
+
@keyframes jkl-loader-right-spin-u2mhq9z {
|
|
390
390
|
0% {
|
|
391
391
|
transform: rotate(40deg) scale(0);
|
|
392
392
|
}
|
|
@@ -426,7 +426,7 @@
|
|
|
426
426
|
@media screen and (forced-colors: active) {
|
|
427
427
|
.jkl-skeleton-element {
|
|
428
428
|
border: 1px solid CanvasText;
|
|
429
|
-
animation: 2s ease infinite jkl-blink-
|
|
429
|
+
animation: 2s ease infinite jkl-blink-u2mhqah;
|
|
430
430
|
}
|
|
431
431
|
}
|
|
432
432
|
.jkl-skeleton-input {
|
|
@@ -474,10 +474,10 @@
|
|
|
474
474
|
}
|
|
475
475
|
@media screen and (forced-colors: active) {
|
|
476
476
|
.jkl-skeleton-table {
|
|
477
|
-
animation: 2s ease-in-out infinite jkl-blink-
|
|
477
|
+
animation: 2s ease-in-out infinite jkl-blink-u2mhqah;
|
|
478
478
|
}
|
|
479
479
|
}
|
|
480
|
-
@keyframes jkl-blink-
|
|
480
|
+
@keyframes jkl-blink-u2mhqah {
|
|
481
481
|
0% {
|
|
482
482
|
opacity: 1;
|
|
483
483
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-max-height:var(--jkl-unit-210);--jkl-file-thumbnail-width:var(--jkl-unit-60);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:var(--jkl-border-radius-s);--bg:#0000;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__thumbnail{flex-shrink:0;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);width:var(--jkl-file-thumbnail-width);height:auto;max-height:var(--jkl-file-thumbnail-max-height);position:relative;display:flex;align-items:center;justify-content:center;background:var(--jkl-color-background-page);border-radius:var(--jkl-border-radius-xs);overflow:hidden;anchor-name:--thumb;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,#0000)}.jkl-file__thumbnail:after{position:absolute;z-index:1;content:""/"Laster opp";position-anchor:--thumb;position-area:center;height:25%;border-radius:1px;aspect-ratio:1;scale:0;background:var(--text-color);animation:spin 5s linear infinite forwards;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__thumbnail:after{scale:0}}.jkl-file__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__thumbnail img[src]{min-width:100%;min-height:100%;object-fit:cover;object-position:center}.jkl-file__content{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;color:var(--text-color);padding:var(--jkl-file-padding);border:var(--border);border-radius:var(--border-radius);background:var(--bg);height:-webkit-fit-content;height:fit-content}.jkl-file__content:not(:has(.jkl-file__thumbnail)):has(.jkl-file__button){--jkl-file-padding:0 var(--jkl-unit-10)}.jkl-file__info{flex-grow:999}.jkl-file__name{word-break:break-word}.jkl-file__size{word-break:keep-all}.jkl-file__button{aspect-ratio:1;flex-shrink:0}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/10}.jkl-file:not([data-state*=loading]) .jkl-file__thumbnail:not(:has(img[src])):before{font:var(--jkl-text-style-paragraph-small);position:absolute;z-index:1;content:attr(data-filetype)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail:after{display:block;scale:1}.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-error-text-default)}.jkl-file[data-state=error] .jkl-file__content{border-color:var(--jkl-color-error-border-default)}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}@layer jokul.components{.jkl-link{--link-color:var(--jkl-color-text-accent);color:var(--link-color);outline:none;text-decoration:none;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:color}.jkl-link__content{text-decoration:underline;text-underline-offset:.08lh;text-decoration-thickness:.05em;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%)}.jkl-link:after{--jkl-icon-fill:0;--jkl-icon-size:1em;-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;padding-inline-start:.2em;vertical-align:middle;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;display:inline}.jkl-link--external:after,.jkl-link[target=_blank]:after{content:"\e89e"/"(Åpnes i ny fane)"}.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-strong);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}button.jkl-link{-webkit-appearance:none;appearance:none;border:0;padding:0;margin:0;background:none;font:inherit;text-align:inherit}.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;--button-min-width:9ch;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-radius:0;--border-width:0.0625rem;display:inline-block;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);-webkit-user-select:none;user-select:none;background:var(--background-color);color:var(--text-color);border:unset;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);padding-inline:var(--jkl-button-padding-text);padding-block:var(--jkl-button-padding-block);position:relative;overflow:hidden;max-width:100%;animation:a .3s linear;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color}}@layer jokul.components{.jkl-button:has(.jkl-button__text){min-width:var(--button-min-width)}.jkl-button:has(.jkl-button__text):has(.jkl-icon){min-width:auto}.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{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive);transition-property:translate;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--jkl-unit-02);pointer-events:none}.jkl-button__loader{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive);transition-property:opacity,translate;position:absolute;top:50%;left:50%;translate:-50% 350%;opacity:0;pointer-events:none}.jkl-button__text{display:block;min-width:0;max-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;white-space:nowrap;text-overflow:ellipsis}.jkl-button[data-loading=true] .jkl-button__label{--button-loading-offset:calc(-100% - var(--jkl-button-padding-block)*2 - var(--jkl-button-text-ink-offset));translate:0 var(--button-loading-offset)}.jkl-button[data-loading=true] .jkl-button__loader{translate:-50% -50%;opacity:1}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);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-strong);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-contrast);--text-color:var(--jkl-color-text-on-contrast)}@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{display:block;transform-origin:center;background-color:currentColor;height:var(--jkl-loader-dot-size);width:var(--jkl-loader-dot-size);animation:2.5s linear infinite}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-uic246i;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-uic2472;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-uic2476}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-uic246i{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-uic2472{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-uic2476{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-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 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)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb;-webkit-mask-position:center;mask-position:center;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep}.jkl-skeleton-element{border-radius:.125rem;background-color:var(--jkl-skeleton-element-color)}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{border:1px solid CanvasText;animation:jkl-blink-uic2483 2s ease infinite}}.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{display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid var(--jkl-skeleton-element-color)}.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-uic2483 2s ease-in-out infinite}}@keyframes jkl-blink-uic2483{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-default);--background-color:#0000;border:1px dashed var(--border-color);border-radius:.25rem;padding:var(--jkl-file-input-dropzone-padding);display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:nowrap;gap:var(--jkl-file-input-dropzone-gap);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;background-color:var(--background-color)}.jkl-file-input__dropzone--enter{--border-color:var(--jkl-color-border-strong);--background-color:var(--jkl-color-background-container);border-style:solid}.jkl-file-input__dropzone__drag-text{font:var(--jkl-text-style-paragraph-small)}@media (width >= 0) and (max-width:679px){.jkl-file-input__dropzone__drag-text{display:none}}.jkl-file-input__call-to-action{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:nowrap}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button{transform:scale(1.05);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.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:var(--jkl-text-style-text-small);color:var(--jkl-color-text-subdued);margin-top:var(--jkl-unit-30)}.jkl-file-input__files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--jkl-file-list-gap)}.jkl-file-input--small .jkl-file-input__dropzone-hint{margin:0;display:block}.jkl-file-input--small .jkl-file-input__dropzone{padding:var(--jkl-unit-20);gap:var(--jkl-unit-20);margin-bottom:var(--jkl-unit-20);justify-content:flex-start;flex-direction:row;max-width:-webkit-fit-content;max-width:fit-content}.jkl-file-input--small .jkl-file-input__call-to-action{font:var(--jkl-text-style-text-small);gap:var(--jkl-unit-15);flex-direction:row;justify-content:flex-start}.jkl-file-input--small .jkl-file-input__max-size-text{margin-top:calc(var(--jkl-unit-15)*-1);margin-bottom:var(--jkl-unit-20)}}
|
|
1
|
+
@charset "UTF-8";@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-max-height:var(--jkl-unit-210);--jkl-file-thumbnail-width:var(--jkl-unit-60);--jkl-file-thumbnail-aspect-ratio:1;--jkl-file-gap:var(--jkl-unit-10);--jkl-file-button-width:var(--jkl-unit-50);--text-color:var(--jkl-color-text-default);--border:1px solid var(--jkl-color-border-subdued);--border-radius:var(--jkl-border-radius-s);--bg:#0000;--transition-time:var(--jkl-motion-timing-expressive)}.jkl-file__thumbnail{flex-shrink:0;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);width:var(--jkl-file-thumbnail-width);height:auto;max-height:var(--jkl-file-thumbnail-max-height);position:relative;display:flex;align-items:center;justify-content:center;background:var(--jkl-color-background-page);border-radius:var(--jkl-border-radius-xs);overflow:hidden;anchor-name:--thumb;anchor-scope:all;outline:1px solid color-mix(in srgb,currentColor 3%,#0000)}.jkl-file__thumbnail:after{position:absolute;z-index:1;content:""/"Laster opp";position-anchor:--thumb;position-area:center;height:25%;border-radius:1px;aspect-ratio:1;scale:0;background:var(--text-color);animation:spin 5s linear infinite forwards;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in}@starting-style{.jkl-file__thumbnail:after{scale:0}}.jkl-file__thumbnail img{opacity:1;transition:opacity var(--transition-time) ease-in-out}.jkl-file__thumbnail img[src]{min-width:100%;min-height:100%;object-fit:cover;object-position:center}.jkl-file__content{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;color:var(--text-color);padding:var(--jkl-file-padding);border:var(--border);border-radius:var(--border-radius);background:var(--bg);height:-webkit-fit-content;height:fit-content}.jkl-file__content:not(:has(.jkl-file__thumbnail)):has(.jkl-file__button){--jkl-file-padding:0 var(--jkl-unit-10)}.jkl-file__info{flex-grow:999}.jkl-file__name{word-break:break-word}.jkl-file__size{word-break:keep-all}.jkl-file__button{aspect-ratio:1;flex-shrink:0}.jkl-file[class*=card]{--jkl-file-thumbnail-width:100%;--jkl-file-thumbnail-aspect-ratio:16/10}.jkl-file:not([data-state*=loading]) .jkl-file__thumbnail:not(:has(img[src])):before{font:var(--jkl-text-style-paragraph-small);position:absolute;z-index:1;content:attr(data-filetype)}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail img{opacity:0}.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail:after{display:block;scale:1}.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-error-text-default)}.jkl-file[data-state=error] .jkl-file__content{border-color:var(--jkl-color-error-border-default)}@keyframes spin{0%{transform:rotate(0turn)}to{transform:rotate(1turn)}}}@layer jokul.components{.jkl-link{--link-color:var(--jkl-color-text-accent);color:var(--link-color);outline:none;text-decoration:none;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:color}.jkl-link__content{text-decoration:underline;text-underline-offset:.08lh;text-decoration-thickness:.05em;-webkit-text-decoration-color:rgb(from currentColor r g b/70%);text-decoration-color:rgb(from currentColor r g b/70%)}.jkl-link:after{--jkl-icon-fill:0;--jkl-icon-size:1em;-webkit-margin-before:-.1em;margin-block-start:-.1em;-webkit-padding-start:.2em;padding-inline-start:.2em;vertical-align:middle;font-family:var(--jkl-font-family-icons);font-variation-settings:"FILL" var(--jkl-icon-fill,0);font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-weight:400;line-height:1;display:inline-block;flex-shrink:0;-webkit-font-smoothing:antialiased;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-energetic);transition-property:font-variation-settings,transform;display:inline}.jkl-link--external:after,.jkl-link[target=_blank]:after{content:"\e89e"/"(Åpnes i ny fane)"}.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-strong);outline-offset:0}@media screen and (forced-colors:active){.jkl-link:hover:not(:focus){--link-color:HighLight}}button.jkl-link{-webkit-appearance:none;appearance:none;border:0;padding:0;margin:0;background:none;font:inherit;text-align:inherit}.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;--button-min-width:9ch;--jkl-icon-weight:var(--jkl-icon-weight-bold);--text-color:var(--jkl-color-text-default);--background-color:#0000;--border-radius:0;--border-width:0.0625rem;display:inline-block;font:var(--jkl-text-style-text-medium);font-weight:var(--jkl-font-weight-bold);-webkit-user-select:none;user-select:none;background:var(--background-color);color:var(--text-color);border:unset;text-decoration:none;-webkit-tap-highlight-color:transparent;border-radius:var(--border-radius);padding-inline:var(--jkl-button-padding-text);padding-block:var(--jkl-button-padding-block);position:relative;overflow:hidden;max-width:100%;animation:a .3s linear;transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color}}@layer jokul.components{.jkl-button:has(.jkl-button__text){min-width:var(--button-min-width)}.jkl-button:has(.jkl-button__text):has(.jkl-icon){min-width:auto}.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{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive);transition-property:translate;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:var(--jkl-unit-02);pointer-events:none}.jkl-button__loader{transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-expressive);transition-property:opacity,translate;position:absolute;top:50%;left:50%;translate:-50% 350%;opacity:0;pointer-events:none}.jkl-button__text{display:block;min-width:0;max-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;white-space:nowrap;text-overflow:ellipsis}.jkl-button[data-loading=true] .jkl-button__label{--button-loading-offset:calc(-100% - var(--jkl-button-padding-block)*2 - var(--jkl-button-text-ink-offset));translate:0 var(--button-loading-offset)}.jkl-button[data-loading=true] .jkl-button__loader{translate:-50% -50%;opacity:1}.jkl-button:focus-visible{outline:3px solid var(--jkl-color-border-strong);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-strong);outline-offset:3px}}.jkl-button--ghost,.jkl-button--primary,.jkl-button--secondary{--border-radius:999px}.jkl-button--primary{--background-color:var(--jkl-color-background-contrast);--text-color:var(--jkl-color-text-on-contrast)}@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{display:block;transform-origin:center;background-color:currentColor;height:var(--jkl-loader-dot-size);width:var(--jkl-loader-dot-size);animation:2.5s linear infinite}.jkl-loader__dot--left{animation-name:jkl-loader-left-spin-u2mhq99;margin-right:calc(var(--jkl-loader-spacing)*.9)}.jkl-loader__dot--middle{animation-name:jkl-loader-middle-spin-u2mhq9u;margin-right:var(--jkl-loader-spacing)}.jkl-loader__dot--right{animation-name:jkl-loader-right-spin-u2mhq9z}@media screen and (forced-colors:active){.jkl-loader__dot{background-color:CanvasText}}@keyframes jkl-loader-left-spin-u2mhq99{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-u2mhq9u{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-u2mhq9z{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-page);--jkl-skeleton-sweep-duration:4500ms;--jkl-skeleton-sweeper-width:40%;-webkit-mask-image:linear-gradient(to right,#000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)),#0000 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)),#0000 calc(var(--jkl-skeleton-sweeper-position) - var(--jkl-skeleton-sweeper-width)/2),#000 var(--jkl-skeleton-sweeper-position));-webkit-mask-size:100dvi 100dvb;mask-size:100dvi 100dvb;-webkit-mask-position:center;mask-position:center;animation:var(--jkl-skeleton-sweep-duration) ease-in-out infinite --jkl-skeleton-sweep}.jkl-skeleton-element{border-radius:.125rem;background-color:var(--jkl-skeleton-element-color)}.jkl-skeleton-element--circle{border-radius:50%}@media screen and (forced-colors:active){.jkl-skeleton-element{border:1px solid CanvasText;animation:jkl-blink-u2mhqah 2s ease infinite}}.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{display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid var(--jkl-skeleton-element-color)}.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-u2mhqah 2s ease-in-out infinite}}@keyframes jkl-blink-u2mhqah{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-default);--background-color:#0000;border:1px dashed var(--border-color);border-radius:.25rem;padding:var(--jkl-file-input-dropzone-padding);display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:nowrap;gap:var(--jkl-file-input-dropzone-gap);transition-timing-function:var(--jkl-motion-easing-standard);transition-duration:var(--jkl-motion-timing-productive);transition-property:background-color;background-color:var(--background-color)}.jkl-file-input__dropzone--enter{--border-color:var(--jkl-color-border-strong);--background-color:var(--jkl-color-background-container);border-style:solid}.jkl-file-input__dropzone__drag-text{font:var(--jkl-text-style-paragraph-small)}@media (width >= 0) and (max-width:679px){.jkl-file-input__dropzone__drag-text{display:none}}.jkl-file-input__call-to-action{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:nowrap}.jkl-file-input__call-to-action:has(:focus-visible) .jkl-button{transform:scale(1.05);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}.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:var(--jkl-text-style-text-small);color:var(--jkl-color-text-subdued);margin-top:var(--jkl-unit-30)}.jkl-file-input__files{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--jkl-file-list-gap)}.jkl-file-input--small .jkl-file-input__dropzone-hint{margin:0;display:block}.jkl-file-input--small .jkl-file-input__dropzone{padding:var(--jkl-unit-20);gap:var(--jkl-unit-20);margin-bottom:var(--jkl-unit-20);justify-content:flex-start;flex-direction:row;max-width:-webkit-fit-content;max-width:fit-content}.jkl-file-input--small .jkl-file-input__call-to-action{font:var(--jkl-text-style-text-small);gap:var(--jkl-unit-15);flex-direction:row;justify-content:flex-start}.jkl-file-input--small .jkl-file-input__max-size-text{margin-top:calc(var(--jkl-unit-15)*-1);margin-bottom:var(--jkl-unit-20)}}
|