@fremtind/jokul 5.2.3 → 5.3.0
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/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/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
|
-
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
|
};
|
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-uexm04m var(--duration) linear forwards;
|
|
30
30
|
animation-play-state: var(--play-state, running);
|
|
31
31
|
}
|
|
32
|
-
@keyframes jkl-downcount-
|
|
32
|
+
@keyframes jkl-downcount-uexm04m {
|
|
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-uexm04m var(--duration) linear forwards;animation-play-state:var(--play-state,running)}@keyframes jkl-downcount-uexm04m{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-uuy19mg 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-uuy19mg {
|
|
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-uuy19mg .25s ease-out}.jkl-feedback__buttons{display:flex}@keyframes jkl-show-uuy19mg{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)}}}
|
|
@@ -3,80 +3,37 @@
|
|
|
3
3
|
@layer jokul.components {
|
|
4
4
|
.jkl-file {
|
|
5
5
|
--jkl-file-padding: var(--jkl-unit-10);
|
|
6
|
-
--jkl-file-thumbnail-
|
|
7
|
-
--jkl-file-thumbnail-
|
|
6
|
+
--jkl-file-thumbnail-max-height: var(--jkl-unit-210);
|
|
7
|
+
--jkl-file-thumbnail-width: var(--jkl-unit-60);
|
|
8
8
|
--jkl-file-thumbnail-aspect-ratio: 1;
|
|
9
|
-
--jkl-file-gap: var(--jkl-unit-10)
|
|
9
|
+
--jkl-file-gap: var(--jkl-unit-10);
|
|
10
10
|
--jkl-file-button-width: var(--jkl-unit-50);
|
|
11
11
|
--text-color: var(--jkl-color-text-default);
|
|
12
12
|
--border: 1px solid var(--jkl-color-border-subdued);
|
|
13
|
-
--border-radius:
|
|
13
|
+
--border-radius: var(--jkl-border-radius-s);
|
|
14
14
|
--bg: transparent;
|
|
15
15
|
--transition-time: #{jkl.$motion-timing-expressive};
|
|
16
16
|
|
|
17
|
-
&__content {
|
|
18
|
-
@include jkl.motion(
|
|
19
|
-
"standard",
|
|
20
|
-
"snappy",
|
|
21
|
-
background-color,
|
|
22
|
-
border-color,
|
|
23
|
-
color
|
|
24
|
-
);
|
|
25
|
-
|
|
26
|
-
color: var(--text-color);
|
|
27
|
-
padding: var(--jkl-file-padding);
|
|
28
|
-
border: var(--border);
|
|
29
|
-
border-radius: var(--border-radius);
|
|
30
|
-
background: var(--bg);
|
|
31
|
-
display: grid;
|
|
32
|
-
grid-template-columns: var(--jkl-file-thumbnail-width) 1fr var(
|
|
33
|
-
--jkl-file-button-width
|
|
34
|
-
);
|
|
35
|
-
grid-template-areas: "image text button";
|
|
36
|
-
gap: var(--jkl-file-gap);
|
|
37
|
-
align-items: center;
|
|
38
|
-
height: fit-content;
|
|
39
|
-
|
|
40
|
-
&__name {
|
|
41
|
-
@include jkl.text-style("paragraph-small");
|
|
42
|
-
grid-area: text;
|
|
43
|
-
/* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
|
|
44
|
-
word-break: break-word;
|
|
45
|
-
|
|
46
|
-
&__size {
|
|
47
|
-
word-break: keep-all;
|
|
48
|
-
}
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
&__delete {
|
|
52
|
-
aspect-ratio: 1;
|
|
53
|
-
grid-area: button;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
17
|
&__thumbnail {
|
|
57
|
-
|
|
18
|
+
flex-shrink: 0;
|
|
58
19
|
aspect-ratio: var(--jkl-file-thumbnail-aspect-ratio);
|
|
59
|
-
|
|
20
|
+
width: var(--jkl-file-thumbnail-width);
|
|
21
|
+
height: auto;
|
|
60
22
|
max-height: var(--jkl-file-thumbnail-max-height);
|
|
61
|
-
grid-area: image;
|
|
62
23
|
position: relative;
|
|
63
24
|
display: flex;
|
|
64
25
|
align-items: center;
|
|
65
26
|
justify-content: center;
|
|
66
27
|
background: var(--jkl-color-background-page);
|
|
67
|
-
border-radius:
|
|
28
|
+
border-radius: var(--jkl-border-radius-xs);
|
|
68
29
|
overflow: hidden;
|
|
69
|
-
container-type: inline-size;
|
|
70
30
|
anchor-name: --thumb;
|
|
71
31
|
anchor-scope: all;
|
|
72
32
|
outline: 1px solid color-mix(in srgb, currentColor 3%, transparent);
|
|
73
33
|
|
|
74
|
-
&::
|
|
34
|
+
&::after {
|
|
75
35
|
position: absolute;
|
|
76
36
|
z-index: 1;
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
&::after {
|
|
80
37
|
content: "" / "Laster opp";
|
|
81
38
|
position-anchor: --thumb;
|
|
82
39
|
position-area: center;
|
|
@@ -98,63 +55,93 @@
|
|
|
98
55
|
transition: opacity var(--transition-time) ease-in-out;
|
|
99
56
|
|
|
100
57
|
&[src] {
|
|
101
|
-
width: 100%;
|
|
102
|
-
height: 100%;
|
|
58
|
+
min-width: 100%;
|
|
59
|
+
min-height: 100%;
|
|
103
60
|
object-fit: cover;
|
|
61
|
+
object-position: center;
|
|
104
62
|
}
|
|
105
63
|
}
|
|
106
64
|
}
|
|
107
|
-
|
|
65
|
+
|
|
66
|
+
&__content {
|
|
67
|
+
@include jkl.motion(
|
|
68
|
+
"standard",
|
|
69
|
+
"snappy",
|
|
70
|
+
background-color,
|
|
71
|
+
border-color,
|
|
72
|
+
color
|
|
73
|
+
);
|
|
74
|
+
|
|
75
|
+
color: var(--text-color);
|
|
76
|
+
padding: var(--jkl-file-padding);
|
|
77
|
+
border: var(--border);
|
|
78
|
+
border-radius: var(--border-radius);
|
|
79
|
+
background: var(--bg);
|
|
80
|
+
height: fit-content;
|
|
81
|
+
|
|
82
|
+
&:not(:has(.jkl-file__thumbnail)):has(.jkl-file__button) {
|
|
83
|
+
--jkl-file-padding: 0 var(--jkl-unit-10);
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
&__info {
|
|
88
|
+
flex-grow: 999;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
&__name {
|
|
92
|
+
/* stylelint-disable-next-line declaration-property-value-keyword-no-deprecated */
|
|
93
|
+
word-break: break-word;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
&__size {
|
|
97
|
+
word-break: keep-all;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
&__button {
|
|
101
|
+
aspect-ratio: 1;
|
|
102
|
+
flex-shrink: 0;
|
|
103
|
+
}
|
|
104
|
+
|
|
108
105
|
|
|
109
106
|
// Card view
|
|
110
107
|
&[class*="card"] {
|
|
111
108
|
--jkl-file-thumbnail-width: 100%;
|
|
112
|
-
--jkl-file-thumbnail-aspect-ratio: 16/
|
|
113
|
-
|
|
114
|
-
.jkl-file__content {
|
|
115
|
-
grid-template-columns: 1fr var(--jkl-file-button-width);
|
|
116
|
-
grid-template-rows: var(--jkl-file-thumbnail-max-height) auto;
|
|
117
|
-
grid-template-areas:
|
|
118
|
-
"image image"
|
|
119
|
-
"text button";
|
|
120
|
-
}
|
|
109
|
+
--jkl-file-thumbnail-aspect-ratio: 16/10;
|
|
121
110
|
}
|
|
122
111
|
|
|
123
112
|
// If the file is not an image
|
|
124
113
|
&:not([data-state*="loading"]) {
|
|
125
|
-
.jkl-
|
|
114
|
+
.jkl-file__thumbnail:not(:has(img[src]))::before {
|
|
126
115
|
@include jkl.text-style("paragraph-small");
|
|
116
|
+
position: absolute;
|
|
117
|
+
z-index: 1;
|
|
127
118
|
|
|
128
119
|
content: attr(data-filetype);
|
|
129
120
|
}
|
|
130
121
|
}
|
|
131
122
|
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
123
|
+
// Loading state
|
|
124
|
+
&[data-state="loading"]:not(:has(.jkl-file__support-label)) {
|
|
125
|
+
.jkl-file__thumbnail {
|
|
126
|
+
img {
|
|
127
|
+
opacity: 0;
|
|
128
|
+
}
|
|
138
129
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
130
|
+
&::after {
|
|
131
|
+
display: block;
|
|
132
|
+
scale: 1;
|
|
133
|
+
}
|
|
142
134
|
}
|
|
143
135
|
}
|
|
144
|
-
}
|
|
145
136
|
|
|
146
137
|
// Error state
|
|
147
138
|
&[data-state="error"] {
|
|
148
|
-
--bg: var(--jkl-color-error-background-container);
|
|
149
|
-
|
|
150
139
|
&,
|
|
151
140
|
a,
|
|
152
141
|
a:hover,
|
|
153
142
|
button,
|
|
154
143
|
span {
|
|
155
144
|
--text-color: var(--jkl-color-error-text-default);
|
|
156
|
-
--link-color: var(--text-color);
|
|
157
|
-
--jkl-color-border-strong: currentColor;
|
|
158
145
|
}
|
|
159
146
|
|
|
160
147
|
.jkl-file__content {
|