@fremtind/jokul 5.2.3 → 5.3.1
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/file/File.cjs +1 -1
- package/build/cjs/components/file/File.cjs.map +1 -1
- package/build/cjs/components/file/types.d.cts +10 -1
- package/build/cjs/components/message/Message.cjs +1 -1
- package/build/cjs/components/message/Message.cjs.map +1 -1
- package/build/es/components/file/File.js +1 -1
- package/build/es/components/file/File.js.map +1 -1
- package/build/es/components/file/types.d.ts +10 -1
- package/build/es/components/message/Message.js +1 -1
- package/build/es/components/message/Message.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/file.css +50 -61
- package/styles/components/file/file.min.css +1 -1
- package/styles/components/file/file.scss +66 -79
- package/styles/components/file-input/file-input.css +59 -70
- 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 +2 -2
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- 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 +74 -85
- package/styles/components.min.css +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../clsx-E3yX_9sL.cjs"),c=require("react"),n=require("../../utilities/formatters/bytes/formatBytes.cjs");require("../../utilities/polymorphism/SlotComponent.cjs");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),i=require("../../../clsx-E3yX_9sL.cjs"),c=require("react"),n=require("../../utilities/formatters/bytes/formatBytes.cjs");require("../../utilities/polymorphism/SlotComponent.cjs");const r=require("../button/Button.cjs"),s=require("../file-input/internal/fileInputContext.cjs"),o=require("../flex/Flex.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"),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");const t=require("../icon/icons/TrashCanIcon.cjs");require("../icon/icons/WarningIcon.cjs"),require("../../hooks/useId/useId.cjs");const l=require("../input-group/SupportLabel.cjs");require("../input-group/InputGroup.cjs");const a=require("../link/Link.cjs"),u=require("../typography/Text.cjs");require("../typography/Title.cjs");exports.File=j=>{const{children:q,hideThumbnail:I,className:p,fileName:m,fileType:h,fileSize:d,path:f,file:x,state:k,errorLabel:b="Feil",onRemove:g,variant:_="list",...C}=j,y=`jkl-file-preview-${c.useId()}`,w=`${y}-support`,N=s.useFileInputContext(),v=h.startsWith("image/")&&(x?URL.createObjectURL(x):f),T=e.jsxs("div",{id:y,className:i.clsx(p,"jkl-file",`jkl-file--${_}`),"data-state":k,...C,children:[e.jsxs(o.Flex,{gap:"8",direction:"card"===_?"column":"row",alignItems:"card"===_?"start":"center",className:"jkl-file__content",children:[!I&&e.jsx("div",{className:"jkl-file__thumbnail","data-filetype":h,children:v&&e.jsx("img",{src:v,alt:""})}),e.jsxs(o.Flex,{gap:"8",alignItems:"center",justifyContent:"space-between",className:"jkl-file__info",children:[f?e.jsx(u.Text,{size:"s",className:"jkl-file__name",children:e.jsxs(a.Link,{href:f,children:[m," ",e.jsxs("span",{className:"jkl-file__size",children:["(",n.formatBytes(d),")"]})]})}):e.jsxs(u.Text,{size:"s",className:"jkl-file__name",children:[m," ",e.jsxs("span",{className:"jkl-file__size",children:["(",n.formatBytes(d),")"]})]}),g&&e.jsx(r.Button,{variant:"ghost",className:"jkl-file__button",onClick:g,title:`Fjern ${m}`,icon:e.jsx(t.TrashCanIcon,{})})]})]}),"error"===k&&b&&e.jsx(l.SupportLabel,{className:"jkl-file__support-label",id:w,label:b,labelType:"error"})]});return N?e.jsx("li",{children:T}):T};
|
|
2
2
|
//# sourceMappingURL=File.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.cjs","sources":["../../../../src/components/file/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport
|
|
1
|
+
{"version":3,"file":"File.cjs","sources":["../../../../src/components/file/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentProps, type FC, useId } from \"react\";\nimport { formatBytes } from \"../../utilities/index.js\";\nimport { Button } from \"../button/index.js\";\nimport { useFileInputContext } from \"../file-input/internal/fileInputContext.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { TrashCanIcon } from \"../icon/index.js\";\nimport { SupportLabel } from \"../input-group/index.js\";\nimport { Link } from \"../link/index.js\";\nimport { Text } from \"../typography/index.js\";\nimport type { FileProps } from \"./types.js\";\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n const {\n children: _,\n hideThumbnail,\n className,\n fileName,\n fileType,\n fileSize,\n path,\n file,\n state,\n errorLabel = \"Feil\",\n onRemove,\n variant = \"list\",\n ...rest\n } = props;\n\n const id = `jkl-file-preview-${useId()}`;\n const supportId = `${id}-support`;\n\n const context = useFileInputContext();\n\n const imageSrc =\n fileType.startsWith(\"image/\") &&\n (file ? URL.createObjectURL(file) : path);\n\n const fileComponent = (\n <div\n id={id}\n className={clsx(className, \"jkl-file\", `jkl-file--${variant}`)}\n data-state={state}\n {...rest}\n >\n <Flex\n gap=\"8\"\n direction={variant === \"card\" ? \"column\" : \"row\"}\n alignItems={variant === \"card\" ? \"start\" : \"center\"}\n className={\"jkl-file__content\"}\n >\n {!hideThumbnail && (\n <div\n className=\"jkl-file__thumbnail\"\n data-filetype={fileType}\n >\n {imageSrc && <img src={imageSrc} alt=\"\" />}\n </div>\n )}\n <Flex\n gap=\"8\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n className=\"jkl-file__info\"\n >\n {path ? (\n <Text size=\"s\" className=\"jkl-file__name\">\n <Link href={path}>\n {fileName}{\" \"}\n <span className=\"jkl-file__size\">\n ({formatBytes(fileSize)})\n </span>\n </Link>\n </Text>\n ) : (\n <Text size=\"s\" className=\"jkl-file__name\">\n {fileName}{\" \"}\n <span className=\"jkl-file__size\">\n ({formatBytes(fileSize)})\n </span>\n </Text>\n )}\n {onRemove && (\n <Button\n variant={\"ghost\"}\n className=\"jkl-file__button\"\n onClick={onRemove}\n title={`Fjern ${fileName}`}\n icon={<TrashCanIcon />}\n />\n )}\n </Flex>\n </Flex>\n\n {state === \"error\" && errorLabel && (\n <SupportLabel\n className=\"jkl-file__support-label\"\n id={supportId}\n label={errorLabel}\n labelType={\"error\"}\n />\n )}\n </div>\n );\n\n return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["props","children","_","hideThumbnail","className","fileName","fileType","fileSize","path","file","state","errorLabel","onRemove","variant","rest","id","useId","supportId","context","useFileInputContext","imageSrc","startsWith","URL","createObjectURL","fileComponent","jsxs","clsx","Flex","gap","direction","alignItems","jsx","src","alt","justifyContent","Text","size","Link","href","formatBytes","Button","onClick","title","icon","TrashCanIcon","SupportLabel","label","labelType"],"mappings":"oqEAY4DA,IACxD,MACIC,SAAUC,EACVC,cAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,WAAAA,EAAa,OACbC,SAAAA,EACAC,QAAAA,EAAU,UACPC,GACHd,EAEEe,EAAK,oBAAoBC,EAAAA,UACzBC,EAAY,GAAGF,YAEfG,EAAUC,EAAAA,sBAEVC,EACFd,EAASe,WAAW,YACnBZ,EAAOa,IAAIC,gBAAgBd,GAAQD,GAElCgB,EACFC,EAAAA,KAAC,MAAA,CACGV,GAAAA,EACAX,UAAWsB,EAAAA,KAAKtB,EAAW,WAAY,aAAaS,KACpD,aAAYH,KACRI,EAEJb,SAAA,CAAAwB,EAAAA,KAACE,EAAAA,KAAA,CACGC,IAAI,IACJC,UAAuB,SAAZhB,EAAqB,SAAW,MAC3CiB,WAAwB,SAAZjB,EAAqB,QAAU,SAC3CT,UAAW,oBAEVH,SAAA,EAACE,GACE4B,EAAAA,IAAC,MAAA,CACG3B,UAAU,sBACV,gBAAeE,EAEdL,YAAY8B,EAAAA,IAAC,MAAA,CAAIC,IAAKZ,EAAUa,IAAI,OAG7CR,EAAAA,KAACE,EAAAA,KAAA,CACGC,IAAI,IACJE,WAAW,SACXI,eAAe,gBACf9B,UAAU,iBAETH,SAAA,CAAAO,EACGuB,EAAAA,IAACI,EAAAA,MAAKC,KAAK,IAAIhC,UAAU,iBACrBH,SAAAwB,EAAAA,KAACY,EAAAA,KAAA,CAAKC,KAAM9B,EACPP,SAAA,CAAAI,EAAU,IACXoB,EAAAA,KAAC,OAAA,CAAKrB,UAAU,iBAAiBH,SAAA,CAAA,IAC3BsC,EAAAA,YAAYhC,GAAU,YAKpCkB,EAAAA,KAACU,EAAAA,MAAKC,KAAK,IAAIhC,UAAU,iBACpBH,SAAA,CAAAI,EAAU,IACXoB,EAAAA,KAAC,OAAA,CAAKrB,UAAU,iBAAiBH,SAAA,CAAA,IAC3BsC,EAAAA,YAAYhC,GAAU,UAInCK,GACGmB,EAAAA,IAACS,EAAAA,OAAA,CACG3B,QAAS,QACTT,UAAU,mBACVqC,QAAS7B,EACT8B,MAAO,SAASrC,IAChBsC,WAAOC,EAAAA,aAAA,CAAA,WAMZ,UAAVlC,GAAqBC,GAClBoB,EAAAA,IAACc,EAAAA,aAAA,CACGzC,UAAU,0BACVW,GAAIE,EACJ6B,MAAOnC,EACPoC,UAAW,aAM3B,OAAO7B,EAAUa,EAAAA,IAAC,KAAA,CAAI9B,SAAAuB,IAAsBA"}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
import { MouseEvent } from 'react';
|
|
1
|
+
import { MouseEvent, ReactNode } from 'react';
|
|
2
2
|
export type FileProps = {
|
|
3
3
|
fileName: string;
|
|
4
4
|
fileType: string;
|
|
5
5
|
fileSize: number;
|
|
6
6
|
path?: string;
|
|
7
7
|
errorLabel?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Du kan skjule forhåndsvisning av bilde/filendelse for å spare plass
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
12
|
+
hideThumbnail?: boolean;
|
|
8
13
|
state?: "error" | "loading";
|
|
9
14
|
/**
|
|
10
15
|
* Velg hvordan filene skal vises for brukeren
|
|
@@ -17,4 +22,8 @@ export type FileProps = {
|
|
|
17
22
|
* Gjør det mulig å vise en knapp for fjerning av filene ved filopplasting
|
|
18
23
|
*/
|
|
19
24
|
onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
25
|
+
/**
|
|
26
|
+
* @deprecated Blir ikke brukt, vil fjernes i neste major-release
|
|
27
|
+
*/
|
|
28
|
+
children?: ReactNode;
|
|
20
29
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),a=require("../../hooks/useId/useId.cjs"),r=require("../icon/icons/ErrorIcon.cjs"),n=require("../icon/icons/InfoIcon.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),a=require("../../hooks/useId/useId.cjs"),r=require("../icon/icons/ErrorIcon.cjs"),n=require("../icon/icons/InfoIcon.cjs"),c=require("../icon/icons/SuccessIcon.cjs"),l=require("../icon/icons/WarningIcon.cjs"),o=require("./DismissButton.cjs"),t=e=>{switch(e){case"error":return s.jsx(r.ErrorIcon,{className:"jkl-message__icon"});case"info":return s.jsx(n.InfoIcon,{className:"jkl-message__icon"});case"success":return s.jsx(c.SuccessIcon,{className:"jkl-message__icon"});case"warning":return s.jsx(l.WarningIcon,{className:"jkl-message__icon"});default:return null}};function m(r){const n=i.forwardRef((n,c)=>{const{id:l,title:m,fullWidth:d,className:u="",dismissed:j,dismissAction:g,children:k,role:x,...f}=n,_=a.useId(l||"jkl-message",{generateSuffix:!l}),h=i.Children.map(k,s=>"string"==typeof s)?.[0]?s.jsx("p",{children:k}):k;return s.jsxs("div",{...f,id:l,ref:c,className:e.clsx("jkl-message",`jkl-message--${r}`,u,{"jkl-message--full":d,"jkl-message--dismissed":j}),role:x,children:[t(r),s.jsxs("div",{className:"jkl-message__content",children:[m&&s.jsx("p",{className:"jkl-message__title",children:m}),s.jsx("div",{className:"jkl-message__message",children:h})]}),g?.handleDismiss&&s.jsx(o.DismissButton,{"aria-controls":_,className:"jkl-message__dismiss-button",label:g.buttonTitle||"Lukk",onClick:g.handleDismiss})]})});return n.displayName="Message",n}const d=i.forwardRef((r,n)=>{const{id:c,title:l,fullWidth:m,className:d="",dismissed:u,dismissAction:j,children:g,variant:k="info",role:x,...f}=r,_=a.useId(c||"jkl-message",{generateSuffix:!c}),h=i.Children.map(g,s=>"string"==typeof s)?.[0]?s.jsx("p",{children:g}):g;return s.jsxs("div",{...f,id:c,ref:n,className:e.clsx("jkl-message",`jkl-message--${k}`,d,{"jkl-message--full":m,"jkl-message--dismissed":u}),role:x,children:[t(k),s.jsxs("div",{className:"jkl-message__content",children:[l&&s.jsx("p",{className:"jkl-message__title",children:l}),s.jsx("div",{className:"jkl-message__message",children:h})]}),j?.handleDismiss&&s.jsx(o.DismissButton,{"aria-controls":_,className:"jkl-message__dismiss-button",label:j.buttonTitle||"Lukk",onClick:j.handleDismiss})]})}),u=m("info");u.displayName="InfoMessage";const j=m("error");j.displayName="ErrorMessage";const g=m("warning");g.displayName="WarningMessage";const k=m("success");k.displayName="SuccessMessage",exports.ErrorMessage=j,exports.InfoMessage=u,exports.Message=d,exports.SuccessMessage=k,exports.WarningMessage=g;
|
|
2
2
|
//# sourceMappingURL=Message.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.cjs","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-message__icon\" />;\n default:\n return null;\n }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n const {\n id,\n title,\n fullWidth,\n className = \"\",\n dismissed,\n dismissAction,\n children,\n role,\n ...rest\n } = props;\n\n const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n const hasStringChild = React.Children.map(\n children,\n (child) => typeof child === \"string\",\n );\n const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n return (\n <div\n {...rest}\n id={id}\n ref={ref}\n className={clsx(\n \"jkl-message\",\n `jkl-message--${messageType}`,\n className,\n {\n \"jkl-message--full\": fullWidth,\n \"jkl-message--dismissed\": dismissed,\n },\n )}\n role={role}\n >\n {getIcon(messageType)}\n <div className=\"jkl-message__content\"
|
|
1
|
+
{"version":3,"file":"Message.cjs","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-message__icon\" />;\n default:\n return null;\n }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n const {\n id,\n title,\n fullWidth,\n className = \"\",\n dismissed,\n dismissAction,\n children,\n role,\n ...rest\n } = props;\n\n const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n const hasStringChild = React.Children.map(\n children,\n (child) => typeof child === \"string\",\n );\n const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n return (\n <div\n {...rest}\n id={id}\n ref={ref}\n className={clsx(\n \"jkl-message\",\n `jkl-message--${messageType}`,\n className,\n {\n \"jkl-message--full\": fullWidth,\n \"jkl-message--dismissed\": dismissed,\n },\n )}\n role={role}\n >\n {getIcon(messageType)}\n <div className=\"jkl-message__content\">\n {title && <p className=\"jkl-message__title\">{title}</p>}\n <div className=\"jkl-message__message\">{newChildren}</div>\n </div>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={boxId}\n className=\"jkl-message__dismiss-button\"\n label={dismissAction.buttonTitle || \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n );\n });\n\n Message.displayName = \"Message\";\n\n return Message;\n}\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n (props, ref) => {\n const {\n id,\n title,\n fullWidth,\n className = \"\",\n dismissed,\n dismissAction,\n children,\n variant = \"info\",\n role,\n ...rest\n } = props;\n\n const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n const hasStringChild = React.Children.map(\n children,\n (child) => typeof child === \"string\",\n );\n const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n return (\n <div\n {...rest}\n id={id}\n ref={ref}\n className={clsx(\n \"jkl-message\",\n `jkl-message--${variant}`,\n className,\n {\n \"jkl-message--full\": fullWidth,\n \"jkl-message--dismissed\": dismissed,\n },\n )}\n role={role}\n >\n {getIcon(variant)}\n <div className=\"jkl-message__content\">\n {title && <p className=\"jkl-message__title\">{title}</p>}\n <div className=\"jkl-message__message\">{newChildren}</div>\n </div>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={boxId}\n className=\"jkl-message__dismiss-button\"\n label={dismissAction.buttonTitle || \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n );\n },\n);\n\n/**\n * @deprecated bruk Message med variant=\"info\"\n */\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\n/**\n * @deprecated bruk Message med variant=\"error\"\n */\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\n/**\n * @deprecated bruk Message med variant=\"warning\"\n */\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\n/**\n * @deprecated bruk Message med variant=\"success\"\n */\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","variant","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"iaAUMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAAAA,IAACC,EAAAA,UAAA,CAAUC,UAAU,sBAChC,IAAK,OACD,OAAOF,EAAAA,IAACG,EAAAA,SAAA,CAASD,UAAU,sBAC/B,IAAK,UACD,OAAOF,EAAAA,IAACI,EAAAA,YAAA,CAAYF,UAAU,sBAClC,IAAK,UACD,OAAOF,EAAAA,IAACK,EAAAA,YAAA,CAAYH,UAAU,sBAClC,QACI,OAAO,OAInB,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,EAAAA,WAAyC,CAACC,EAAOC,KAC7D,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAAA,MAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAAA,IAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAAA,KAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EAAAA,KACP,cACA,gBAAgB7B,IAChBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQC,GACT4B,EAAAA,KAAC,MAAA,CAAIzB,UAAU,uBACVc,SAAA,CAAAJ,GAASZ,EAAAA,IAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAAA,IAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAAA,IAAC8B,EAAAA,cAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAO3CtB,OAAAA,EAAQ2B,YAAc,UAEf3B,CACX,CAEO,MAAMA,EAAUC,EAAAA,WACnB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAmB,QAAAA,EAAU,OACVlB,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAAA,MAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAAA,IAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAAA,KAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EAAAA,KACP,cACA,gBAAgBO,IAChBjC,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQqC,GACTR,EAAAA,KAAC,MAAA,CAAIzB,UAAU,uBACVc,SAAA,CAAAJ,GAASZ,EAAAA,IAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAAA,IAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAAA,IAAC8B,EAAAA,cAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAWlCO,EAAc9B,EAAe,QAC1C8B,EAAYF,YAAc,cAInB,MAAMG,EAAe/B,EAAe,SAC3C+B,EAAaH,YAAc,eAIpB,MAAMI,EAAiBhC,EAAe,WAC7CgC,EAAeJ,YAAc,iBAItB,MAAMK,EAAiBjC,EAAe,WAC7CiC,EAAeL,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as o,jsx as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{useId as s}from"react";import{formatBytes as c}from"../../utilities/formatters/bytes/formatBytes.js";import"../../utilities/polymorphism/SlotComponent.js";import{Button as
|
|
1
|
+
import{jsxs as o,jsx as i}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{useId as s}from"react";import{formatBytes as c}from"../../utilities/formatters/bytes/formatBytes.js";import"../../utilities/polymorphism/SlotComponent.js";import{Button as r}from"../button/Button.js";import{useFileInputContext as t}from"../file-input/internal/fileInputContext.js";import{Flex as e}from"../flex/Flex.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"../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{TrashCanIcon as a}from"../icon/icons/TrashCanIcon.js";import"../icon/icons/WarningIcon.js";import"../../hooks/useId/useId.js";import{SupportLabel as m}from"../input-group/SupportLabel.js";import"../input-group/InputGroup.js";import{Link as l}from"../link/Link.js";import{Text as p}from"../typography/Text.js";import"../typography/Title.js";const j=j=>{const{children:I,hideThumbnail:f,className:u,fileName:h,fileType:d,fileSize:k,path:_,file:C,state:b,errorLabel:g="Feil",onRemove:w,variant:N="list",...y}=j,x=`jkl-file-preview-${s()}`,v=`${x}-support`,A=t(),L=d.startsWith("image/")&&(C?URL.createObjectURL(C):_),T=o("div",{id:x,className:n(u,"jkl-file",`jkl-file--${N}`),"data-state":b,...y,children:[o(e,{gap:"8",direction:"card"===N?"column":"row",alignItems:"card"===N?"start":"center",className:"jkl-file__content",children:[!f&&i("div",{className:"jkl-file__thumbnail","data-filetype":d,children:L&&i("img",{src:L,alt:""})}),o(e,{gap:"8",alignItems:"center",justifyContent:"space-between",className:"jkl-file__info",children:[_?i(p,{size:"s",className:"jkl-file__name",children:o(l,{href:_,children:[h," ",o("span",{className:"jkl-file__size",children:["(",c(k),")"]})]})}):o(p,{size:"s",className:"jkl-file__name",children:[h," ",o("span",{className:"jkl-file__size",children:["(",c(k),")"]})]}),w&&i(r,{variant:"ghost",className:"jkl-file__button",onClick:w,title:`Fjern ${h}`,icon:i(a,{})})]})]}),"error"===b&&g&&i(m,{className:"jkl-file__support-label",id:v,label:g,labelType:"error"})]});return A?i("li",{children:T}):T};export{j as File};
|
|
2
2
|
//# sourceMappingURL=File.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.js","sources":["../../../../src/components/file/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport
|
|
1
|
+
{"version":3,"file":"File.js","sources":["../../../../src/components/file/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { type ComponentProps, type FC, useId } from \"react\";\nimport { formatBytes } from \"../../utilities/index.js\";\nimport { Button } from \"../button/index.js\";\nimport { useFileInputContext } from \"../file-input/internal/fileInputContext.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { TrashCanIcon } from \"../icon/index.js\";\nimport { SupportLabel } from \"../input-group/index.js\";\nimport { Link } from \"../link/index.js\";\nimport { Text } from \"../typography/index.js\";\nimport type { FileProps } from \"./types.js\";\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n const {\n children: _,\n hideThumbnail,\n className,\n fileName,\n fileType,\n fileSize,\n path,\n file,\n state,\n errorLabel = \"Feil\",\n onRemove,\n variant = \"list\",\n ...rest\n } = props;\n\n const id = `jkl-file-preview-${useId()}`;\n const supportId = `${id}-support`;\n\n const context = useFileInputContext();\n\n const imageSrc =\n fileType.startsWith(\"image/\") &&\n (file ? URL.createObjectURL(file) : path);\n\n const fileComponent = (\n <div\n id={id}\n className={clsx(className, \"jkl-file\", `jkl-file--${variant}`)}\n data-state={state}\n {...rest}\n >\n <Flex\n gap=\"8\"\n direction={variant === \"card\" ? \"column\" : \"row\"}\n alignItems={variant === \"card\" ? \"start\" : \"center\"}\n className={\"jkl-file__content\"}\n >\n {!hideThumbnail && (\n <div\n className=\"jkl-file__thumbnail\"\n data-filetype={fileType}\n >\n {imageSrc && <img src={imageSrc} alt=\"\" />}\n </div>\n )}\n <Flex\n gap=\"8\"\n alignItems=\"center\"\n justifyContent=\"space-between\"\n className=\"jkl-file__info\"\n >\n {path ? (\n <Text size=\"s\" className=\"jkl-file__name\">\n <Link href={path}>\n {fileName}{\" \"}\n <span className=\"jkl-file__size\">\n ({formatBytes(fileSize)})\n </span>\n </Link>\n </Text>\n ) : (\n <Text size=\"s\" className=\"jkl-file__name\">\n {fileName}{\" \"}\n <span className=\"jkl-file__size\">\n ({formatBytes(fileSize)})\n </span>\n </Text>\n )}\n {onRemove && (\n <Button\n variant={\"ghost\"}\n className=\"jkl-file__button\"\n onClick={onRemove}\n title={`Fjern ${fileName}`}\n icon={<TrashCanIcon />}\n />\n )}\n </Flex>\n </Flex>\n\n {state === \"error\" && errorLabel && (\n <SupportLabel\n className=\"jkl-file__support-label\"\n id={supportId}\n label={errorLabel}\n labelType={\"error\"}\n />\n )}\n </div>\n );\n\n return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["File","props","children","_","hideThumbnail","className","fileName","fileType","fileSize","path","file","state","errorLabel","onRemove","variant","rest","id","useId","supportId","context","useFileInputContext","imageSrc","startsWith","URL","createObjectURL","fileComponent","jsxs","clsx","Flex","gap","direction","alignItems","jsx","src","alt","justifyContent","Text","size","Link","href","formatBytes","Button","onClick","title","icon","TrashCanIcon","SupportLabel","label","labelType"],"mappings":"iiEAYO,MAAMA,EAA+CC,IACxD,MACIC,SAAUC,EACVC,cAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,WAAAA,EAAa,OACbC,SAAAA,EACAC,QAAAA,EAAU,UACPC,GACHd,EAEEe,EAAK,oBAAoBC,MACzBC,EAAY,GAAGF,YAEfG,EAAUC,IAEVC,EACFd,EAASe,WAAW,YACnBZ,EAAOa,IAAIC,gBAAgBd,GAAQD,GAElCgB,EACFC,EAAC,MAAA,CACGV,GAAAA,EACAX,UAAWsB,EAAKtB,EAAW,WAAY,aAAaS,KACpD,aAAYH,KACRI,EAEJb,SAAA,CAAAwB,EAACE,EAAA,CACGC,IAAI,IACJC,UAAuB,SAAZhB,EAAqB,SAAW,MAC3CiB,WAAwB,SAAZjB,EAAqB,QAAU,SAC3CT,UAAW,oBAEVH,SAAA,EAACE,GACE4B,EAAC,MAAA,CACG3B,UAAU,sBACV,gBAAeE,EAEdL,YAAY8B,EAAC,MAAA,CAAIC,IAAKZ,EAAUa,IAAI,OAG7CR,EAACE,EAAA,CACGC,IAAI,IACJE,WAAW,SACXI,eAAe,gBACf9B,UAAU,iBAETH,SAAA,CAAAO,EACGuB,EAACI,GAAKC,KAAK,IAAIhC,UAAU,iBACrBH,SAAAwB,EAACY,EAAA,CAAKC,KAAM9B,EACPP,SAAA,CAAAI,EAAU,IACXoB,EAAC,OAAA,CAAKrB,UAAU,iBAAiBH,SAAA,CAAA,IAC3BsC,EAAYhC,GAAU,YAKpCkB,EAACU,GAAKC,KAAK,IAAIhC,UAAU,iBACpBH,SAAA,CAAAI,EAAU,IACXoB,EAAC,OAAA,CAAKrB,UAAU,iBAAiBH,SAAA,CAAA,IAC3BsC,EAAYhC,GAAU,UAInCK,GACGmB,EAACS,EAAA,CACG3B,QAAS,QACTT,UAAU,mBACVqC,QAAS7B,EACT8B,MAAO,SAASrC,IAChBsC,OAAOC,EAAA,CAAA,WAMZ,UAAVlC,GAAqBC,GAClBoB,EAACc,EAAA,CACGzC,UAAU,0BACVW,GAAIE,EACJ6B,MAAOnC,EACPoC,UAAW,aAM3B,OAAO7B,EAAUa,EAAC,KAAA,CAAI9B,SAAAuB,IAAsBA"}
|
|
@@ -1,10 +1,15 @@
|
|
|
1
|
-
import { MouseEvent } from 'react';
|
|
1
|
+
import { MouseEvent, ReactNode } from 'react';
|
|
2
2
|
export type FileProps = {
|
|
3
3
|
fileName: string;
|
|
4
4
|
fileType: string;
|
|
5
5
|
fileSize: number;
|
|
6
6
|
path?: string;
|
|
7
7
|
errorLabel?: string;
|
|
8
|
+
/**
|
|
9
|
+
* Du kan skjule forhåndsvisning av bilde/filendelse for å spare plass
|
|
10
|
+
* @default false
|
|
11
|
+
*/
|
|
12
|
+
hideThumbnail?: boolean;
|
|
8
13
|
state?: "error" | "loading";
|
|
9
14
|
/**
|
|
10
15
|
* Velg hvordan filene skal vises for brukeren
|
|
@@ -17,4 +22,8 @@ export type FileProps = {
|
|
|
17
22
|
* Gjør det mulig å vise en knapp for fjerning av filene ved filopplasting
|
|
18
23
|
*/
|
|
19
24
|
onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;
|
|
25
|
+
/**
|
|
26
|
+
* @deprecated Blir ikke brukt, vil fjernes i neste major-release
|
|
27
|
+
*/
|
|
28
|
+
children?: ReactNode;
|
|
20
29
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as n}from"react";import{useId as
|
|
1
|
+
import{jsx as s,jsxs as e}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import i,{forwardRef as n}from"react";import{useId as r}from"../../hooks/useId/useId.js";import{ErrorIcon as l}from"../icon/icons/ErrorIcon.js";import{InfoIcon as c}from"../icon/icons/InfoIcon.js";import{SuccessIcon as o}from"../icon/icons/SuccessIcon.js";import{WarningIcon as m}from"../icon/icons/WarningIcon.js";import{DismissButton as t}from"./DismissButton.js";const d=e=>{switch(e){case"error":return s(l,{className:"jkl-message__icon"});case"info":return s(c,{className:"jkl-message__icon"});case"success":return s(o,{className:"jkl-message__icon"});case"warning":return s(m,{className:"jkl-message__icon"});default:return null}};function g(l){const c=n((n,c)=>{const{id:o,title:m,fullWidth:g,className:u="",dismissed:f,dismissAction:j,children:k,role:_,...p}=n,h=r(o||"jkl-message",{generateSuffix:!o}),N=i.Children.map(k,s=>"string"==typeof s)?.[0]?s("p",{children:k}):k;return e("div",{...p,id:o,ref:c,className:a("jkl-message",`jkl-message--${l}`,u,{"jkl-message--full":g,"jkl-message--dismissed":f}),role:_,children:[d(l),e("div",{className:"jkl-message__content",children:[m&&s("p",{className:"jkl-message__title",children:m}),s("div",{className:"jkl-message__message",children:N})]}),j?.handleDismiss&&s(t,{"aria-controls":h,className:"jkl-message__dismiss-button",label:j.buttonTitle||"Lukk",onClick:j.handleDismiss})]})});return c.displayName="Message",c}const u=n((n,l)=>{const{id:c,title:o,fullWidth:m,className:g="",dismissed:u,dismissAction:f,children:j,variant:k="info",role:_,...p}=n,h=r(c||"jkl-message",{generateSuffix:!c}),N=i.Children.map(j,s=>"string"==typeof s)?.[0]?s("p",{children:j}):j;return e("div",{...p,id:c,ref:l,className:a("jkl-message",`jkl-message--${k}`,g,{"jkl-message--full":m,"jkl-message--dismissed":u}),role:_,children:[d(k),e("div",{className:"jkl-message__content",children:[o&&s("p",{className:"jkl-message__title",children:o}),s("div",{className:"jkl-message__message",children:N})]}),f?.handleDismiss&&s(t,{"aria-controls":h,className:"jkl-message__dismiss-button",label:f.buttonTitle||"Lukk",onClick:f.handleDismiss})]})}),f=g("info");f.displayName="InfoMessage";const j=g("error");j.displayName="ErrorMessage";const k=g("warning");k.displayName="WarningMessage";const _=g("success");_.displayName="SuccessMessage";export{j as ErrorMessage,f as InfoMessage,u as Message,_ as SuccessMessage,k as WarningMessage};
|
|
2
2
|
//# sourceMappingURL=Message.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-message__icon\" />;\n default:\n return null;\n }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n const {\n id,\n title,\n fullWidth,\n className = \"\",\n dismissed,\n dismissAction,\n children,\n role,\n ...rest\n } = props;\n\n const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n const hasStringChild = React.Children.map(\n children,\n (child) => typeof child === \"string\",\n );\n const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n return (\n <div\n {...rest}\n id={id}\n ref={ref}\n className={clsx(\n \"jkl-message\",\n `jkl-message--${messageType}`,\n className,\n {\n \"jkl-message--full\": fullWidth,\n \"jkl-message--dismissed\": dismissed,\n },\n )}\n role={role}\n >\n {getIcon(messageType)}\n <div className=\"jkl-message__content\"
|
|
1
|
+
{"version":3,"file":"Message.js","sources":["../../../../src/components/message/Message.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport { DismissButton } from \"./DismissButton.js\";\nimport type { MessageProps } from \"./types.js\";\n\nconst getIcon = (messageType: MessageProps[\"variant\"]) => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-message__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-message__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-message__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-message__icon\" />;\n default:\n return null;\n }\n};\n\nfunction messageFactory(messageType: MessageProps[\"variant\"]) {\n const Message = forwardRef<HTMLDivElement, MessageProps>((props, ref) => {\n const {\n id,\n title,\n fullWidth,\n className = \"\",\n dismissed,\n dismissAction,\n children,\n role,\n ...rest\n } = props;\n\n const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n const hasStringChild = React.Children.map(\n children,\n (child) => typeof child === \"string\",\n );\n const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n return (\n <div\n {...rest}\n id={id}\n ref={ref}\n className={clsx(\n \"jkl-message\",\n `jkl-message--${messageType}`,\n className,\n {\n \"jkl-message--full\": fullWidth,\n \"jkl-message--dismissed\": dismissed,\n },\n )}\n role={role}\n >\n {getIcon(messageType)}\n <div className=\"jkl-message__content\">\n {title && <p className=\"jkl-message__title\">{title}</p>}\n <div className=\"jkl-message__message\">{newChildren}</div>\n </div>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={boxId}\n className=\"jkl-message__dismiss-button\"\n label={dismissAction.buttonTitle || \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n );\n });\n\n Message.displayName = \"Message\";\n\n return Message;\n}\n\nexport const Message = forwardRef<HTMLDivElement, MessageProps>(\n (props, ref) => {\n const {\n id,\n title,\n fullWidth,\n className = \"\",\n dismissed,\n dismissAction,\n children,\n variant = \"info\",\n role,\n ...rest\n } = props;\n\n const boxId = useId(id || \"jkl-message\", { generateSuffix: !id });\n\n const hasStringChild = React.Children.map(\n children,\n (child) => typeof child === \"string\",\n );\n const newChildren = hasStringChild?.[0] ? <p>{children}</p> : children;\n\n return (\n <div\n {...rest}\n id={id}\n ref={ref}\n className={clsx(\n \"jkl-message\",\n `jkl-message--${variant}`,\n className,\n {\n \"jkl-message--full\": fullWidth,\n \"jkl-message--dismissed\": dismissed,\n },\n )}\n role={role}\n >\n {getIcon(variant)}\n <div className=\"jkl-message__content\">\n {title && <p className=\"jkl-message__title\">{title}</p>}\n <div className=\"jkl-message__message\">{newChildren}</div>\n </div>\n {dismissAction?.handleDismiss && (\n <DismissButton\n aria-controls={boxId}\n className=\"jkl-message__dismiss-button\"\n label={dismissAction.buttonTitle || \"Lukk\"}\n onClick={dismissAction.handleDismiss}\n />\n )}\n </div>\n );\n },\n);\n\n/**\n * @deprecated bruk Message med variant=\"info\"\n */\nexport const InfoMessage = messageFactory(\"info\");\nInfoMessage.displayName = \"InfoMessage\";\n/**\n * @deprecated bruk Message med variant=\"error\"\n */\nexport const ErrorMessage = messageFactory(\"error\");\nErrorMessage.displayName = \"ErrorMessage\";\n/**\n * @deprecated bruk Message med variant=\"warning\"\n */\nexport const WarningMessage = messageFactory(\"warning\");\nWarningMessage.displayName = \"WarningMessage\";\n/**\n * @deprecated bruk Message med variant=\"success\"\n */\nexport const SuccessMessage = messageFactory(\"success\");\nSuccessMessage.displayName = \"SuccessMessage\";\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","messageFactory","Message","forwardRef","props","ref","id","title","fullWidth","dismissed","dismissAction","children","role","rest","boxId","useId","generateSuffix","newChildren","React","Children","map","child","jsxs","clsx","handleDismiss","DismissButton","label","buttonTitle","onClick","displayName","variant","InfoMessage","ErrorMessage","WarningMessage","SuccessMessage"],"mappings":"8cAUA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACD,OAAOC,EAACC,EAAA,CAAUC,UAAU,sBAChC,IAAK,OACD,OAAOF,EAACG,EAAA,CAASD,UAAU,sBAC/B,IAAK,UACD,OAAOF,EAACI,EAAA,CAAYF,UAAU,sBAClC,IAAK,UACD,OAAOF,EAACK,EAAA,CAAYH,UAAU,sBAClC,QACI,OAAO,OAInB,SAASI,EAAeP,GACpB,MAAMQ,EAAUC,EAAyC,CAACC,EAAOC,KAC7D,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAC,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EACP,cACA,gBAAgB7B,IAChBG,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQC,GACT4B,EAAC,MAAA,CAAIzB,UAAU,uBACVc,SAAA,CAAAJ,GAASZ,EAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAC8B,EAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAO3CtB,OAAAA,EAAQ2B,YAAc,UAEf3B,CACX,CAEO,MAAMA,EAAUC,EACnB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,MAAAA,EACAC,UAAAA,EACAX,UAAAA,EAAY,GACZY,UAAAA,EACAC,cAAAA,EACAC,SAAAA,EACAmB,QAAAA,EAAU,OACVlB,KAAAA,KACGC,GACHT,EAEEU,EAAQC,EAAMT,GAAM,cAAe,CAAEU,gBAAiBV,IAMtDW,EAJiBC,EAAMC,SAASC,IAClCT,EACCU,GAA2B,iBAAVA,KAEe,GAAK1B,EAAC,IAAA,CAAGgB,SAAAA,IAAgBA,EAE9D,OACIW,EAAC,MAAA,IACOT,EACJP,GAAAA,EACAD,IAAAA,EACAR,UAAW0B,EACP,cACA,gBAAgBO,IAChBjC,EACA,CACI,oBAAqBW,EACrB,yBAA0BC,IAGlCG,KAAAA,EAECD,SAAA,CAAAlB,EAAQqC,GACTR,EAAC,MAAA,CAAIzB,UAAU,uBACVc,SAAA,CAAAJ,GAASZ,EAAC,IAAA,CAAEE,UAAU,qBAAsBc,SAAAJ,IAC7CZ,EAAC,MAAA,CAAIE,UAAU,uBAAwBc,SAAAM,OAE1CP,GAAec,eACZ7B,EAAC8B,EAAA,CACG,gBAAeX,EACfjB,UAAU,8BACV6B,MAAOhB,EAAciB,aAAe,OACpCC,QAASlB,EAAcc,qBAWlCO,EAAc9B,EAAe,QAC1C8B,EAAYF,YAAc,cAInB,MAAMG,EAAe/B,EAAe,SAC3C+B,EAAaH,YAAc,eAIpB,MAAMI,EAAiBhC,EAAe,WAC7CgC,EAAeJ,YAAc,iBAItB,MAAMK,EAAiBjC,EAAe,WAC7CiC,EAAeL,YAAc"}
|
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-umuysk3 var(--duration) linear forwards;
|
|
30
30
|
animation-play-state: var(--play-state, running);
|
|
31
31
|
}
|
|
32
|
-
@keyframes jkl-downcount-
|
|
32
|
+
@keyframes jkl-downcount-umuysk3 {
|
|
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);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-
|
|
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);overflow:hidden;width:100%}.jkl-countdown__tracker{background-color:var(--bar-color);display:block;height:var(--bar-height)}@media screen and (forced-colors:active){.jkl-countdown{background-color:Canvas}.jkl-countdown__tracker{background-color:CanvasText}}.jkl-countdown__tracker{animation:jkl-downcount-umuysk3 var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-umuysk3{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-uqucmbi 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-uqucmbi {
|
|
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{transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-paragraph-small);margin-bottom:var(--jkl-unit-20)}.jkl-feedback__fade-in{animation:jkl-show-
|
|
1
|
+
@layer jokul.components{.jkl-feedback{max-width:34.375rem}.jkl-feedback__submit-wrapper{transition-duration:var(--jkl-motion-timing-expressive);transition-property:height;transition-timing-function:var(--jkl-motion-easing-standard);width:100%}.jkl-feedback__submit-wrapper--hidden{display:none}.jkl-feedback__step-counter{color:var(--jkl-color-text-subdued);font:var(--jkl-text-style-paragraph-small);margin-bottom:var(--jkl-unit-20)}.jkl-feedback__fade-in{animation:jkl-show-uqucmbi .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-uqucmbi{0%{opacity:0;transform:translate3d(0,.5rem,0)}}.jkl-feedback-smileys{display:flex;flex-wrap:nowrap;gap:var(--jkl-spacing-12);justify-content:space-between;margin-top:var(--jkl-unit-10);max-width:22.5rem;width:100%}.jkl-feedback-smiley-option{color:var(--jkl-color-text-subdued);cursor:pointer;display:inline-block;height:2.5rem;position:relative;transform:translateZ(0);transition-duration:var(--jkl-motion-timing-productive);transition-property:transform,color;transition-timing-function:var(--jkl-motion-easing-standard);width:2.5rem}@media screen and (forced-colors:active){.jkl-feedback-smiley-option,.jkl-feedback-smiley-option path,.jkl-feedback-smiley-option svg{fill:ButtonText;stroke:ButtonFace}}.jkl-feedback-smiley-option:after,.jkl-feedback-smiley-option:before{border-radius:50%;content:"";opacity:0;position:absolute;transition-duration:var(--jkl-motion-timing-productive);transition-property:opacity;transition-timing-function:var(--jkl-motion-easing-standard)}.jkl-feedback-smiley-option:before{box-shadow:0 .125rem 1.875rem #0000001a;inset:0}.jkl-feedback-smiley-option:hover{color:var(--jkl-color-text-default)}input:checked+.jkl-feedback-smiley-option{color:var(--jkl-color-text-default);transform:translate3d(0,-20%,0)}input:checked+.jkl-feedback-smiley-option:before{opacity:1}input:focus-visible+.jkl-feedback-smiley-option{border-radius:var(--jkl-border-radius-full);outline:3px solid var(--jkl-color-border-strong);outline-offset:3px}}
|
|
@@ -4,69 +4,37 @@
|
|
|
4
4
|
@layer jokul.components {
|
|
5
5
|
.jkl-file {
|
|
6
6
|
--jkl-file-padding: var(--jkl-unit-10);
|
|
7
|
-
--jkl-file-thumbnail-
|
|
8
|
-
--jkl-file-thumbnail-
|
|
7
|
+
--jkl-file-thumbnail-max-height: var(--jkl-unit-210);
|
|
8
|
+
--jkl-file-thumbnail-width: var(--jkl-unit-60);
|
|
9
9
|
--jkl-file-thumbnail-aspect-ratio: 1;
|
|
10
|
-
--jkl-file-gap: var(--jkl-unit-10)
|
|
10
|
+
--jkl-file-gap: var(--jkl-unit-10);
|
|
11
11
|
--jkl-file-button-width: var(--jkl-unit-50);
|
|
12
12
|
--text-color: var(--jkl-color-text-default);
|
|
13
13
|
--border: 1px solid var(--jkl-color-border-subdued);
|
|
14
|
-
--border-radius:
|
|
14
|
+
--border-radius: var(--jkl-border-radius-s);
|
|
15
15
|
--bg: transparent;
|
|
16
16
|
--transition-time: var(--jkl-motion-timing-expressive);
|
|
17
17
|
}
|
|
18
|
-
.jkl-
|
|
19
|
-
|
|
20
|
-
transition-duration: var(--jkl-motion-timing-snappy);
|
|
21
|
-
transition-property: background-color, border-color, color;
|
|
22
|
-
color: var(--text-color);
|
|
23
|
-
padding: var(--jkl-file-padding);
|
|
24
|
-
border: var(--border);
|
|
25
|
-
border-radius: var(--border-radius);
|
|
26
|
-
background: var(--bg);
|
|
27
|
-
display: grid;
|
|
28
|
-
grid-template-columns: var(--jkl-file-thumbnail-width) 1fr var(--jkl-file-button-width);
|
|
29
|
-
grid-template-areas: "image text button";
|
|
30
|
-
gap: var(--jkl-file-gap);
|
|
31
|
-
align-items: center;
|
|
32
|
-
height: fit-content;
|
|
33
|
-
}
|
|
34
|
-
.jkl-file__content__name {
|
|
35
|
-
font: var(--jkl-text-style-paragraph-small);
|
|
36
|
-
grid-area: text;
|
|
37
|
-
/* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
|
|
38
|
-
word-break: break-word;
|
|
39
|
-
}
|
|
40
|
-
.jkl-file__content__name__size {
|
|
41
|
-
word-break: keep-all;
|
|
42
|
-
}
|
|
43
|
-
.jkl-file__content__delete {
|
|
44
|
-
aspect-ratio: 1;
|
|
45
|
-
grid-area: button;
|
|
46
|
-
}
|
|
47
|
-
.jkl-file__content__thumbnail {
|
|
48
|
-
width: 100%;
|
|
18
|
+
.jkl-file__thumbnail {
|
|
19
|
+
flex-shrink: 0;
|
|
49
20
|
aspect-ratio: var(--jkl-file-thumbnail-aspect-ratio);
|
|
50
|
-
|
|
21
|
+
width: var(--jkl-file-thumbnail-width);
|
|
22
|
+
height: auto;
|
|
51
23
|
max-height: var(--jkl-file-thumbnail-max-height);
|
|
52
|
-
grid-area: image;
|
|
53
24
|
position: relative;
|
|
54
25
|
display: flex;
|
|
55
26
|
align-items: center;
|
|
56
27
|
justify-content: center;
|
|
57
28
|
background: var(--jkl-color-background-page);
|
|
58
|
-
border-radius:
|
|
29
|
+
border-radius: var(--jkl-border-radius-xs);
|
|
59
30
|
overflow: hidden;
|
|
60
|
-
container-type: inline-size;
|
|
61
31
|
anchor-name: --thumb;
|
|
62
32
|
anchor-scope: all;
|
|
63
33
|
outline: 1px solid color-mix(in srgb, currentColor 3%, transparent);
|
|
64
34
|
}
|
|
65
|
-
.jkl-
|
|
35
|
+
.jkl-file__thumbnail::after {
|
|
66
36
|
position: absolute;
|
|
67
37
|
z-index: 1;
|
|
68
|
-
}
|
|
69
|
-
.jkl-file__content__thumbnail::after {
|
|
70
38
|
content: ""/"Laster opp";
|
|
71
39
|
position-anchor: --thumb;
|
|
72
40
|
position-area: center;
|
|
@@ -79,50 +47,71 @@
|
|
|
79
47
|
transition: display var(--transition-time) allow-discrete ease-in, scale var(--transition-time) ease-in;
|
|
80
48
|
}
|
|
81
49
|
@starting-style {
|
|
82
|
-
.jkl-
|
|
50
|
+
.jkl-file__thumbnail::after {
|
|
83
51
|
scale: 0;
|
|
84
52
|
}
|
|
85
53
|
}
|
|
86
|
-
.jkl-
|
|
54
|
+
.jkl-file__thumbnail img {
|
|
87
55
|
opacity: 1;
|
|
88
56
|
transition: opacity var(--transition-time) ease-in-out;
|
|
89
57
|
}
|
|
90
|
-
.jkl-
|
|
91
|
-
width: 100%;
|
|
92
|
-
height: 100%;
|
|
58
|
+
.jkl-file__thumbnail img[src] {
|
|
59
|
+
min-width: 100%;
|
|
60
|
+
min-height: 100%;
|
|
93
61
|
object-fit: cover;
|
|
62
|
+
object-position: center;
|
|
63
|
+
}
|
|
64
|
+
.jkl-file__content {
|
|
65
|
+
transition-timing-function: var(--jkl-motion-easing-standard);
|
|
66
|
+
transition-duration: var(--jkl-motion-timing-snappy);
|
|
67
|
+
transition-property: background-color, border-color, color;
|
|
68
|
+
color: var(--text-color);
|
|
69
|
+
padding: var(--jkl-file-padding);
|
|
70
|
+
border: var(--border);
|
|
71
|
+
border-radius: var(--border-radius);
|
|
72
|
+
background: var(--bg);
|
|
73
|
+
height: fit-content;
|
|
74
|
+
}
|
|
75
|
+
.jkl-file__content:not(:has(.jkl-file__thumbnail)):has(.jkl-file__button) {
|
|
76
|
+
--jkl-file-padding: 0 var(--jkl-unit-10);
|
|
77
|
+
}
|
|
78
|
+
.jkl-file__info {
|
|
79
|
+
flex-grow: 999;
|
|
80
|
+
}
|
|
81
|
+
.jkl-file__name {
|
|
82
|
+
/* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
|
|
83
|
+
word-break: break-word;
|
|
84
|
+
}
|
|
85
|
+
.jkl-file__size {
|
|
86
|
+
word-break: keep-all;
|
|
87
|
+
}
|
|
88
|
+
.jkl-file__button {
|
|
89
|
+
aspect-ratio: 1;
|
|
90
|
+
flex-shrink: 0;
|
|
94
91
|
}
|
|
95
92
|
.jkl-file[class*=card] {
|
|
96
93
|
--jkl-file-thumbnail-width: 100%;
|
|
97
|
-
--jkl-file-thumbnail-aspect-ratio: 16/
|
|
98
|
-
}
|
|
99
|
-
.jkl-file[class*=card] .jkl-file__content {
|
|
100
|
-
grid-template-columns: 1fr var(--jkl-file-button-width);
|
|
101
|
-
grid-template-rows: var(--jkl-file-thumbnail-max-height) auto;
|
|
102
|
-
grid-template-areas: "image image" "text button";
|
|
94
|
+
--jkl-file-thumbnail-aspect-ratio: 16/10;
|
|
103
95
|
}
|
|
104
|
-
.jkl-file:not([data-state*=loading]) .jkl-
|
|
96
|
+
.jkl-file:not([data-state*=loading]) .jkl-file__thumbnail:not(:has(img[src]))::before {
|
|
105
97
|
font: var(--jkl-text-style-paragraph-small);
|
|
98
|
+
position: absolute;
|
|
99
|
+
z-index: 1;
|
|
106
100
|
content: attr(data-filetype);
|
|
107
101
|
}
|
|
108
|
-
.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-
|
|
102
|
+
.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail img {
|
|
109
103
|
opacity: 0;
|
|
110
104
|
}
|
|
111
|
-
.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-
|
|
105
|
+
.jkl-file[data-state=loading]:not(:has(.jkl-file__support-label)) .jkl-file__thumbnail::after {
|
|
112
106
|
display: block;
|
|
113
107
|
scale: 1;
|
|
114
108
|
}
|
|
115
|
-
.jkl-file[data-state=error] {
|
|
116
|
-
--bg: var(--jkl-color-error-background-container);
|
|
117
|
-
}
|
|
118
109
|
.jkl-file[data-state=error],
|
|
119
110
|
.jkl-file[data-state=error] a,
|
|
120
111
|
.jkl-file[data-state=error] a:hover,
|
|
121
112
|
.jkl-file[data-state=error] button,
|
|
122
113
|
.jkl-file[data-state=error] span {
|
|
123
114
|
--text-color: var(--jkl-color-error-text-default);
|
|
124
|
-
--link-color: var(--text-color);
|
|
125
|
-
--jkl-color-border-strong: currentColor;
|
|
126
115
|
}
|
|
127
116
|
.jkl-file[data-state=error] .jkl-file__content {
|
|
128
117
|
border-color: var(--jkl-color-error-border-default);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{.jkl-file{--jkl-file-padding:var(--jkl-unit-10);--jkl-file-thumbnail-
|
|
1
|
+
@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{align-items:center;anchor-name:--thumb;anchor-scope:all;aspect-ratio:var(--jkl-file-thumbnail-aspect-ratio);background:var(--jkl-color-background-page);border-radius:var(--jkl-border-radius-xs);display:flex;flex-shrink:0;height:auto;justify-content:center;max-height:var(--jkl-file-thumbnail-max-height);outline:1px solid color-mix(in srgb,currentColor 3%,#0000);overflow:hidden;position:relative;width:var(--jkl-file-thumbnail-width)}.jkl-file__thumbnail:after{animation:spin 5s linear infinite forwards;aspect-ratio:1;background:var(--text-color);border-radius:1px;content:""/"Laster opp";height:25%;position:absolute;position-anchor:--thumb;position-area:center;scale:0;transition:display var(--transition-time) allow-discrete ease-in,scale var(--transition-time) ease-in;z-index:1}@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-height:100%;min-width:100%;object-fit:cover;object-position:center}.jkl-file__content{background:var(--bg);border:var(--border);border-radius:var(--border-radius);color:var(--text-color);height:-webkit-fit-content;height:fit-content;padding:var(--jkl-file-padding);transition-duration:var(--jkl-motion-timing-snappy);transition-property:background-color,border-color,color;transition-timing-function:var(--jkl-motion-easing-standard)}.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{content:attr(data-filetype);font:var(--jkl-text-style-paragraph-small);position:absolute;z-index:1}.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)}}}
|