@fremtind/jokul 0.68.0 → 0.68.1

package/build/cjs/components/file-input/stories/File.stories.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");/* empty css                             */const i=require("../File.cjs"),r=require("./fileBytes.cjs"),t={title:"Komponenter/FileInput/File",component:i.File,parameters:{layout:"centered"},tags:["autodocs"]},l=new window.File(r,"symbol_round_black.png",{type:"image/png"}),o={name:"File",args:{fileName:l.name,fileType:l.type,fileSize:l.size,file:l},render:r=>e.jsx(i.File,{...r})};exports.FileStory=o,exports.default=t;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");/* empty css                             */const t=require("../../icon-button/IconButton.cjs"),i=require("../File.cjs"),n=require("../internal/Thumbnail.cjs"),r=require("./fileBytes.cjs"),o=new window.File(r,"symbol_round_black.png",{type:"image/png"}),l={title:"Komponenter/FileInput/File",component:i.File,subcomponents:{Thumbnail:n.Thumbnail,IconButton:t.IconButton},parameters:{layout:"centered"},tags:["autodocs"]},u={name:"File",args:{fileName:o.name,fileType:o.type,fileSize:o.size,file:o},render:t=>e.jsx(i.File,{...t})};exports.FileStory=u,exports.default=l;
 //# sourceMappingURL=File.stories.cjs.map

package/build/cjs/components/file-input/stories/File.stories.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"File.stories.cjs","sources":["../../../../../src/components/file-input/stories/File.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { File } from \"../File.js\";\nimport fileBytes from \"./fileBytes.js\";\n\nconst meta = {\n    title: \"Komponenter/FileInput/File\",\n    component: File,\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof File>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst file = new window.File(fileBytes, \"symbol_round_black.png\", {\n    type: \"image/png\",\n});\n\nexport const FileStory: Story = {\n    name: \"File\",\n    args: {\n        fileName: file.name,\n        fileType: file.type,\n        fileSize: file.size,\n        file,\n    },\n    render: (args) => <File {...args} />,\n};\n"],"names":["meta","title","component","File","parameters","layout","tags","file","window","fileBytes","type","FileStory","name","args","fileName","fileType","fileSize","size","render","jsx"],"mappings":"yQAMMA,EAAO,CACTC,MAAO,6BACPC,UAAWC,EAAAA,KACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOLC,EAAO,IAAIC,OAAOL,KAAKM,EAAW,yBAA0B,CAC9DC,KAAM,cAGGC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,SAAUP,EAAKK,KACfG,SAAUR,EAAKG,KACfM,SAAUT,EAAKU,KACfV,KAAAA,GAEJW,OAASL,GAAUM,EAAAA,IAAAhB,EAAAA,KAAA,IAASU"}
+{"version":3,"file":"File.stories.cjs","sources":["../../../../../src/components/file-input/stories/File.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport {IconButton} from \"../../icon-button/index.js\";\nimport {File} from \"../File.js\";\nimport {Thumbnail} from \"../internal/Thumbnail.js\";\nimport fileBytes from \"./fileBytes.js\";\n\nconst file = new window.File(fileBytes, \"symbol_round_black.png\", {\n    type: \"image/png\",\n});\n\nconst meta = {\n    title: \"Komponenter/FileInput/File\",\n    component: File,\n    subcomponents: {Thumbnail, IconButton},\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof File>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileStory: Story = {\n    name: \"File\",\n    args: {\n        fileName: file.name,\n        fileType: file.type,\n        fileSize: file.size,\n        file,\n    },\n    render: (args) => <File {...args} />,\n};\n"],"names":["file","window","File","fileBytes","type","meta","title","component","subcomponents","Thumbnail","IconButton","parameters","layout","tags","FileStory","name","args","fileName","fileType","fileSize","size","render","jsx"],"mappings":"8VAQMA,EAAO,IAAIC,OAAOC,KAAKC,EAAW,yBAA0B,CAC9DC,KAAM,cAGJC,EAAO,CACTC,MAAO,6BACPC,UAAWL,EAAAA,KACXM,cAAe,CAAAC,UAACA,EAAAA,UAAAC,WAAWA,cAC3BC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,SAAUjB,EAAKe,KACfG,SAAUlB,EAAKI,KACfe,SAAUnB,EAAKoB,KACfpB,KAAAA,GAEJqB,OAASL,GAAUM,EAAAA,IAAApB,EAAAA,KAAA,IAASc"}

package/build/cjs/components/file-input/stories/File.stories.d.cts

@@ -3,6 +3,10 @@ import { default as React } from 'react';
 declare const meta: {
     title: string;
     component: React.FC<import('../File.js').FileProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+    subcomponents: {
+        Thumbnail: React.FC<import('../internal/Thumbnail.js').ThumbnailProps>;
+        IconButton: React.ForwardRefExoticComponent<import('../../icon-button/types.js').IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    };
     parameters: {
         layout: string;
     };

package/build/cjs/components/file-input/stories/FileInput.stories.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime");require("react");/* empty css                             */const t=require("../FileInput.cjs"),r={title:"Komponenter/FileInput",component:t.FileInput,parameters:{layout:"centered"},tags:["autodocs"]},n={name:"FileInput",args:{variant:"flexible",value:[],onChange:console.info,legend:"Legg til fil"},render:r=>e.jsx(t.FileInput,{...r})};exports.FileInputStory=n,exports.default=r;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),t=require("react");;/* empty css                            */const i=require("../../../utilities/formatters/bytes/formatBytes.cjs");require("../../../utilities/polymorphism/SlotComponent.cjs");const s=require("../../button/Button.cjs"),n=require("../File.cjs"),a=require("../FileInput.cjs"),l=require("../internal/Dropzone.cjs"),o=require("../internal/MaxSize.cjs"),r={title:"Komponenter/FileInput",component:a.FileInput,subcomponents:{File:n.File,Dropzone:l.Dropzone,MaxSize:o.MaxSize,Button:s.Button},parameters:{layout:"centered"},tags:["autodocs"]},p={name:"FileInput",args:{variant:"flexible",value:[],onChange:console.info,legend:"Legg til fil",labelProps:{variant:"medium"},accept:"image/*,.pdf",maxSizeBytes:8e6},render:l=>{const[o,r]=t.useState([]);return e.jsxs("div",{children:[e.jsx(a.FileInput,{...l,id:"file-input-example",className:"jkl-spacing-16-24--bottom",value:o,onChange:(e,t)=>{r((e=>[...e,...t]))},children:o.map((({state:t,file:s,validation:a},p)=>{var u;let c,m,d=t;const S="UPLOADING"===t;return"WRONG_TYPE"===(null==a?void 0:a.type)?(m="warning",c=`Filtypen ${(null==(u=s.name)?void 0:u.split(".")[1])||""} støttes ikke`):"UPLOAD_SUCCESS"===t?(m="success",c="Lastet opp",d="UPLOAD_SUCCESS"):"UPLOAD_ERROR"===t?(m="error",c="Filen lot seg ikke laste opp",d="UPLOAD_ERROR"):"TOO_LARGE"===(null==a?void 0:a.type)&&l.maxSizeBytes?(m="error",c=`Filen er større enn ${i.formatBytes(l.maxSizeBytes)} og kan ikke lastes opp`):S&&(c="Laster opp…",d="UPLOADING"),e.jsx(n.File,{fileName:s.name,fileType:s.type,fileSize:s.size,path:`/path/fil-${p}`,file:s,state:d,supportLabel:c,supportLabelType:m,onRemove:["UPLOAD_ERROR","SELECTED"].includes(t)?()=>{r([...o.slice(0,p),...o.slice(p+1)])}:void 0},`${s.name}-${p}`)}))}),e.jsx(s.PrimaryButton,{className:"jkl-spacing-16--top",type:"button",onClick:async()=>{const e=o.filter((e=>"SELECTED"===e.state&&typeof e.validation>"u")),t=e.map((e=>new Promise((t=>{setTimeout((()=>{r((t=>t.map((t=>t.file.name===e.file.name?{...t,state:"UPLOAD_SUCCESS"}:t)))),t()}),5e3)})))),i=o.map((t=>e.includes(t)?{...t,state:"UPLOADING"}:t));r(i),await Promise.all(t)},children:"Last opp"})]})}};exports.FileInputStory=p,exports.default=r;
 //# sourceMappingURL=FileInput.stories.cjs.map

package/build/cjs/components/file-input/stories/FileInput.stories.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.stories.cjs","sources":["../../../../../src/components/file-input/stories/FileInput.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { FileInput } from \"../FileInput.js\";\n\nconst meta = {\n    title: \"Komponenter/FileInput\",\n    component: FileInput,\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof FileInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileInputStory: Story = {\n    name: \"FileInput\",\n    args: {\n        variant: \"flexible\",\n        value: [],\n        onChange: console.info,\n        legend: \"Legg til fil\",\n    },\n    render: (args) => <FileInput {...args} />,\n};\n"],"names":["meta","title","component","FileInput","parameters","layout","tags","FileInputStory","name","args","variant","value","onChange","console","info","legend","render","jsx"],"mappings":"iPAKMA,EAAO,CACTC,MAAO,wBACPC,UAAWC,EAAAA,UACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAwB,CACjCC,KAAM,YACNC,KAAM,CACFC,QAAS,WACTC,MAAO,GACPC,SAAUC,QAAQC,KAClBC,OAAQ,gBAEZC,OAASP,GAAUQ,EAAAA,IAAAd,EAAAA,UAAA,IAAcM"}
+{"version":3,"file":"FileInput.stories.cjs","sources":["../../../../../src/components/file-input/stories/FileInput.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React, {useState} from \"react\";\nimport \"../styles/_index.scss\";\nimport {formatBytes} from \"../../../utilities/index.js\";\nimport {Button, PrimaryButton} from \"../../button/index.js\";\nimport type {SupportLabelType} from \"../../input-group/index.js\";\nimport {File} from \"../File.js\";\nimport {FileInput} from \"../FileInput.js\";\nimport {Dropzone} from \"../internal/Dropzone.js\";\nimport {MaxSize} from \"../internal/MaxSize.js\";\nimport type {FileInputFile, FileInputFileState} from \"../types.js\";\n\nconst meta = {\n    title: \"Komponenter/FileInput\",\n    component: FileInput,\n    subcomponents: {File, Dropzone, MaxSize, Button},\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof FileInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileInputStory: Story = {\n    name: \"FileInput\",\n    args: {\n        variant: \"flexible\",\n        value: [],\n        onChange: console.info,\n        legend: \"Legg til fil\",\n        labelProps: {\n            variant: \"medium\",\n        },\n        accept: \"image/*,.pdf\",\n        maxSizeBytes: 8_000_000,\n    },\n    render: (args) => {\n        const [files, setFiles] = useState<FileInputFile[]>([]);\n\n        return (\n            <div>\n                <FileInput\n                    {...args}\n                    id=\"file-input-example\"\n                    className=\"jkl-spacing-16-24--bottom\"\n                    value={files}\n                    onChange={(_e, newFiles) => {\n                        setFiles((currentFiles) => [\n                            ...currentFiles,\n                            ...newFiles,\n                        ]);\n                    }}\n                >\n                    {files.map(({state, file, validation}, index) => {\n                        let label: string | undefined = undefined;\n                        let labelType: SupportLabelType | undefined = undefined;\n                        let demoState: FileInputFileState = state;\n\n                        const isUploading = state === \"UPLOADING\";\n\n                        if (validation?.type === \"WRONG_TYPE\") {\n                            labelType = \"warning\";\n                            label = `Filtypen ${\n                                file.name?.split(\".\")[1] || \"\"\n                            } støttes ikke`;\n                        } else if (state === \"UPLOAD_SUCCESS\") {\n                            labelType = \"success\";\n                            label = \"Lastet opp\";\n                            demoState = \"UPLOAD_SUCCESS\";\n                        } else if (state === \"UPLOAD_ERROR\") {\n                            labelType = \"error\";\n                            label = \"Filen lot seg ikke laste opp\";\n                            demoState = \"UPLOAD_ERROR\";\n                        } else if (\n                            validation?.type === \"TOO_LARGE\" &&\n                            args.maxSizeBytes\n                        ) {\n                            labelType = \"error\";\n                            label = `Filen er større enn ${formatBytes(\n                                args.maxSizeBytes,\n                            )} og kan ikke lastes opp`;\n                        } else if (isUploading) {\n                            label = \"Laster opp…\";\n                            demoState = \"UPLOADING\";\n                        }\n\n                        return (\n                            <File\n                                key={`${file.name}-${index}`}\n                                fileName={file.name}\n                                fileType={file.type}\n                                fileSize={file.size}\n                                path={`/path/fil-${index}`}\n                                file={file}\n                                state={demoState}\n                                supportLabel={label}\n                                supportLabelType={labelType}\n                                onRemove={\n                                    [\"UPLOAD_ERROR\", \"SELECTED\"].includes(state)\n                                        ? () => {\n                                            setFiles([\n                                                ...files.slice(0, index),\n                                                ...files.slice(index + 1),\n                                            ]);\n                                        }\n                                        : undefined\n                                }\n                            />\n                        );\n                    })}\n                </FileInput>\n                <PrimaryButton\n                    className=\"jkl-spacing-16--top\"\n                    type=\"button\"\n                    onClick={async () => {\n                        const toUpload = files.filter(\n                            (fileState) =>\n                                fileState.state === \"SELECTED\" &&\n                                typeof fileState.validation === \"undefined\",\n                        );\n\n                        const promises = toUpload.map(\n                            (fileToUpload) =>\n                                new Promise<void>((resolve) => {\n                                    const timeout = 5000;\n                                    setTimeout(() => {\n                                        setFiles((currentFiles) =>\n                                            currentFiles.map((file) =>\n                                                file.file.name ===\n                                                fileToUpload.file.name\n                                                    ? {\n                                                        ...file,\n                                                        state: \"UPLOAD_SUCCESS\",\n                                                    }\n                                                    : file,\n                                            ),\n                                        );\n                                        resolve();\n                                    }, timeout);\n                                }),\n                        );\n\n                        const newFiles = files.map((file) =>\n                            toUpload.includes(file)\n                                ? {\n                                    ...file,\n                                    state: \"UPLOADING\" as FileInputFileState,\n                                }\n                                : file,\n                        );\n\n                        setFiles(newFiles);\n\n                        await Promise.all(promises);\n                    }}\n                >\n                    Last opp\n                </PrimaryButton>\n            </div>\n        );\n    },\n};\n"],"names":["meta","title","component","FileInput","subcomponents","File","Dropzone","MaxSize","Button","parameters","layout","tags","FileInputStory","name","args","variant","value","onChange","console","info","legend","labelProps","accept","maxSizeBytes","render","files","setFiles","useState","children","jsx","id","className","_e","newFiles","currentFiles","map","state","file","validation","index","label","labelType","demoState","isUploading","type","_a","split","formatBytes","fileName","fileType","fileSize","size","path","supportLabel","supportLabelType","onRemove","includes","slice","PrimaryButton","onClick","async","toUpload","filter","fileState","promises","fileToUpload","Promise","resolve","setTimeout","all"],"mappings":"ggBAYMA,EAAO,CACTC,MAAO,wBACPC,UAAWC,EAAAA,UACXC,cAAe,CAAAC,KAACA,EAAMA,KAAAC,SAAAA,WAAUC,QAAAA,EAAAA,QAASC,OAAAA,EAAAA,QACzCC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAwB,CACjCC,KAAM,YACNC,KAAM,CACFC,QAAS,WACTC,MAAO,GACPC,SAAUC,QAAQC,KAClBC,OAAQ,eACRC,WAAY,CACRN,QAAS,UAEbO,OAAQ,eACRC,aAAc,KAElBC,OAASV,IACL,MAAOW,EAAOC,GAAYC,EAAAA,SAA0B,IAEpD,cACK,MACG,CAAAC,SAAA,CAAAC,EAAAA,IAAC1B,EAAAA,UAAA,IACOW,EACJgB,GAAG,qBACHC,UAAU,4BACVf,MAAOS,EACPR,SAAU,CAACe,EAAIC,KACXP,GAAUQ,GAAiB,IACpBA,KACAD,IACN,EAGJL,SAAAH,EAAMU,KAAI,EAAEC,MAAAA,EAAOC,KAAAA,EAAMC,WAAAA,GAAaC,WACnC,IAAIC,EACAC,EACAC,EAAgCN,EAEpC,MAAMO,EAAwB,cAAVP,EAEhB,MAAqB,gBAArB,MAAAE,OAAAA,EAAAA,EAAYM,OACAH,EAAA,UACJD,EAAA,aACJ,OAAAK,EAAAR,EAAKxB,WAAL,EAAAgC,EAAWC,MAAM,KAAK,KAAM,mBAEf,mBAAVV,GACKK,EAAA,UACJD,EAAA,aACIE,EAAA,kBACK,iBAAVN,GACKK,EAAA,QACJD,EAAA,+BACIE,EAAA,gBAES,eAArB,MAAAJ,SAAAA,EAAYM,OACZ9B,EAAKS,cAEOkB,EAAA,QACZD,EAAQ,uBAAuBO,EAAAA,YAC3BjC,EAAKS,wCAEFoB,IACCH,EAAA,cACIE,EAAA,aAIZb,EAAAA,IAACxB,EAAAA,KAAA,CAEG2C,SAAUX,EAAKxB,KACfoC,SAAUZ,EAAKO,KACfM,SAAUb,EAAKc,KACfC,KAAM,aAAab,IACnBF,KAAAA,EACAD,MAAOM,EACPW,aAAcb,EACdc,iBAAkBb,EAClBc,SACI,CAAC,eAAgB,YAAYC,SAASpB,GAChC,KACWV,EAAA,IACFD,EAAMgC,MAAM,EAAGlB,MACfd,EAAMgC,MAAMlB,EAAQ,IAC1B,OAEH,GAjBL,GAAGF,EAAKxB,QAAQ0B,IAAK,MAuB1CV,EAAAA,IAAC6B,EAAAA,cAAA,CACG3B,UAAU,sBACVa,KAAK,SACLe,QAASC,UACL,MAAMC,EAAWpC,EAAMqC,QAClBC,GACuB,aAApBA,EAAU3B,cACH2B,EAAUzB,WAAe,MAGlC0B,EAAWH,EAAS1B,KACrB8B,GACG,IAAIC,SAAeC,IAEfC,YAAW,KACP1C,GAAUQ,GACNA,EAAaC,KAAKE,GACdA,EAAKA,KAAKxB,OACVoD,EAAa5B,KAAKxB,KACZ,IACKwB,EACHD,MAAO,kBAETC,MAGN8B,MACT,IAAO,MAIhBlC,EAAWR,EAAMU,KAAKE,GACxBwB,EAASL,SAASnB,GACZ,IACKA,EACHD,MAAO,aAETC,IAGVX,EAASO,SAEHiC,QAAQG,IAAIL,EAAQ,EAEjCpC,SAAA,eAGL"}

package/build/es/components/file-input/stories/File.stories.d.ts

@@ -3,6 +3,10 @@ import { default as React } from 'react';
 declare const meta: {
     title: string;
     component: React.FC<import('../File.js').FileProps & React.ClassAttributes<HTMLDivElement> & React.HTMLAttributes<HTMLDivElement>>;
+    subcomponents: {
+        Thumbnail: React.FC<import('../internal/Thumbnail.js').ThumbnailProps>;
+        IconButton: React.ForwardRefExoticComponent<import('../../icon-button/types.js').IconButtonProps & React.RefAttributes<HTMLButtonElement>>;
+    };
     parameters: {
         layout: string;
     };

package/build/es/components/file-input/stories/File.stories.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import"react";/* empty css                         */import{File as i}from"../File.js";import t from"./fileBytes.js";const o={title:"Komponenter/FileInput/File",component:i,parameters:{layout:"centered"},tags:["autodocs"]},r=new window.File(t,"symbol_round_black.png",{type:"image/png"}),a={name:"File",args:{fileName:r.name,fileType:r.type,fileSize:r.size,file:r},render:t=>e(i,{...t})};export{a as FileStory,o as default};
+import{jsx as e}from"react/jsx-runtime";import"react";/* empty css                         */import{IconButton as t}from"../../icon-button/IconButton.js";import{File as o}from"../File.js";import{Thumbnail as i}from"../internal/Thumbnail.js";import n from"./fileBytes.js";const r=new window.File(n,"symbol_round_black.png",{type:"image/png"}),m={title:"Komponenter/FileInput/File",component:o,subcomponents:{Thumbnail:i,IconButton:t},parameters:{layout:"centered"},tags:["autodocs"]},a={name:"File",args:{fileName:r.name,fileType:r.type,fileSize:r.size,file:r},render:t=>e(o,{...t})};export{a as FileStory,m as default};
 //# sourceMappingURL=File.stories.js.map

package/build/es/components/file-input/stories/File.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"File.stories.js","sources":["../../../../../src/components/file-input/stories/File.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { File } from \"../File.js\";\nimport fileBytes from \"./fileBytes.js\";\n\nconst meta = {\n    title: \"Komponenter/FileInput/File\",\n    component: File,\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof File>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nconst file = new window.File(fileBytes, \"symbol_round_black.png\", {\n    type: \"image/png\",\n});\n\nexport const FileStory: Story = {\n    name: \"File\",\n    args: {\n        fileName: file.name,\n        fileType: file.type,\n        fileSize: file.size,\n        file,\n    },\n    render: (args) => <File {...args} />,\n};\n"],"names":["meta","title","component","File","parameters","layout","tags","file","window","fileBytes","type","FileStory","name","args","fileName","fileType","fileSize","size","render","jsx"],"mappings":"6JAMA,MAAMA,EAAO,CACTC,MAAO,6BACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOLC,EAAO,IAAIC,OAAOL,KAAKM,EAAW,yBAA0B,CAC9DC,KAAM,cAGGC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,SAAUP,EAAKK,KACfG,SAAUR,EAAKG,KACfM,SAAUT,EAAKU,KACfV,KAAAA,GAEJW,OAASL,GAAUM,EAAAhB,EAAA,IAASU"}
+{"version":3,"file":"File.stories.js","sources":["../../../../../src/components/file-input/stories/File.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport {IconButton} from \"../../icon-button/index.js\";\nimport {File} from \"../File.js\";\nimport {Thumbnail} from \"../internal/Thumbnail.js\";\nimport fileBytes from \"./fileBytes.js\";\n\nconst file = new window.File(fileBytes, \"symbol_round_black.png\", {\n    type: \"image/png\",\n});\n\nconst meta = {\n    title: \"Komponenter/FileInput/File\",\n    component: File,\n    subcomponents: {Thumbnail, IconButton},\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof File>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileStory: Story = {\n    name: \"File\",\n    args: {\n        fileName: file.name,\n        fileType: file.type,\n        fileSize: file.size,\n        file,\n    },\n    render: (args) => <File {...args} />,\n};\n"],"names":["file","window","File","fileBytes","type","meta","title","component","subcomponents","Thumbnail","IconButton","parameters","layout","tags","FileStory","name","args","fileName","fileType","fileSize","size","render","jsx"],"mappings":"+QAQA,MAAMA,EAAO,IAAIC,OAAOC,KAAKC,EAAW,yBAA0B,CAC9DC,KAAM,cAGJC,EAAO,CACTC,MAAO,6BACPC,UAAWL,EACXM,cAAe,CAACC,UAAAA,EAAWC,WAAAA,GAC3BC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAMEC,EAAmB,CAC5BC,KAAM,OACNC,KAAM,CACFC,SAAUjB,EAAKe,KACfG,SAAUlB,EAAKI,KACfe,SAAUnB,EAAKoB,KACfpB,KAAAA,GAEJqB,OAASL,GAAUM,EAAApB,EAAA,IAASc"}

package/build/es/components/file-input/stories/FileInput.stories.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import"react";/* empty css                         */import{FileInput as t}from"../FileInput.js";const n={title:"Komponenter/FileInput",component:t,parameters:{layout:"centered"},tags:["autodocs"]},o={name:"FileInput",args:{variant:"flexible",value:[],onChange:console.info,legend:"Legg til fil"},render:n=>e(t,{...n})};export{o as FileInputStory,n as default};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{useState as i}from"react";/* empty css                         */import{formatBytes as a}from"../../../utilities/formatters/bytes/formatBytes.js";import"../../../utilities/polymorphism/SlotComponent.js";import{Button as o,PrimaryButton as s}from"../../button/Button.js";import{File as n}from"../File.js";import{FileInput as l}from"../FileInput.js";import{Dropzone as r}from"../internal/Dropzone.js";import{MaxSize as p}from"../internal/MaxSize.js";const m={title:"Komponenter/FileInput",component:l,subcomponents:{File:n,Dropzone:r,MaxSize:p,Button:o},parameters:{layout:"centered"},tags:["autodocs"]},u={name:"FileInput",args:{variant:"flexible",value:[],onChange:console.info,legend:"Legg til fil",labelProps:{variant:"medium"},accept:"image/*,.pdf",maxSizeBytes:8e6},render:o=>{const[r,p]=i([]);return e("div",{children:[t(l,{...o,id:"file-input-example",className:"jkl-spacing-16-24--bottom",value:r,onChange:(e,t)=>{p((e=>[...e,...t]))},children:r.map((({state:e,file:i,validation:s},l)=>{var m;let u,c,f=e;const d="UPLOADING"===e;return"WRONG_TYPE"===(null==s?void 0:s.type)?(c="warning",u=`Filtypen ${(null==(m=i.name)?void 0:m.split(".")[1])||""} støttes ikke`):"UPLOAD_SUCCESS"===e?(c="success",u="Lastet opp",f="UPLOAD_SUCCESS"):"UPLOAD_ERROR"===e?(c="error",u="Filen lot seg ikke laste opp",f="UPLOAD_ERROR"):"TOO_LARGE"===(null==s?void 0:s.type)&&o.maxSizeBytes?(c="error",u=`Filen er større enn ${a(o.maxSizeBytes)} og kan ikke lastes opp`):d&&(u="Laster opp…",f="UPLOADING"),t(n,{fileName:i.name,fileType:i.type,fileSize:i.size,path:`/path/fil-${l}`,file:i,state:f,supportLabel:u,supportLabelType:c,onRemove:["UPLOAD_ERROR","SELECTED"].includes(e)?()=>{p([...r.slice(0,l),...r.slice(l+1)])}:void 0},`${i.name}-${l}`)}))}),t(s,{className:"jkl-spacing-16--top",type:"button",onClick:async()=>{const e=r.filter((e=>"SELECTED"===e.state&&typeof e.validation>"u")),t=e.map((e=>new Promise((t=>{setTimeout((()=>{p((t=>t.map((t=>t.file.name===e.file.name?{...t,state:"UPLOAD_SUCCESS"}:t)))),t()}),5e3)})))),i=r.map((t=>e.includes(t)?{...t,state:"UPLOADING"}:t));p(i),await Promise.all(t)},children:"Last opp"})]})}};export{u as FileInputStory,m as default};
 //# sourceMappingURL=FileInput.stories.js.map

package/build/es/components/file-input/stories/FileInput.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileInput.stories.js","sources":["../../../../../src/components/file-input/stories/FileInput.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport \"../styles/_index.scss\";\nimport { FileInput } from \"../FileInput.js\";\n\nconst meta = {\n    title: \"Komponenter/FileInput\",\n    component: FileInput,\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof FileInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileInputStory: Story = {\n    name: \"FileInput\",\n    args: {\n        variant: \"flexible\",\n        value: [],\n        onChange: console.info,\n        legend: \"Legg til fil\",\n    },\n    render: (args) => <FileInput {...args} />,\n};\n"],"names":["meta","title","component","FileInput","parameters","layout","tags","FileInputStory","name","args","variant","value","onChange","console","info","legend","render","jsx"],"mappings":"yIAKA,MAAMA,EAAO,CACTC,MAAO,wBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAwB,CACjCC,KAAM,YACNC,KAAM,CACFC,QAAS,WACTC,MAAO,GACPC,SAAUC,QAAQC,KAClBC,OAAQ,gBAEZC,OAASP,GAAUQ,EAAAd,EAAA,IAAcM"}
+{"version":3,"file":"FileInput.stories.js","sources":["../../../../../src/components/file-input/stories/FileInput.stories.tsx"],"sourcesContent":["import type {Meta, StoryObj} from \"@storybook/react\";\nimport React, {useState} from \"react\";\nimport \"../styles/_index.scss\";\nimport {formatBytes} from \"../../../utilities/index.js\";\nimport {Button, PrimaryButton} from \"../../button/index.js\";\nimport type {SupportLabelType} from \"../../input-group/index.js\";\nimport {File} from \"../File.js\";\nimport {FileInput} from \"../FileInput.js\";\nimport {Dropzone} from \"../internal/Dropzone.js\";\nimport {MaxSize} from \"../internal/MaxSize.js\";\nimport type {FileInputFile, FileInputFileState} from \"../types.js\";\n\nconst meta = {\n    title: \"Komponenter/FileInput\",\n    component: FileInput,\n    subcomponents: {File, Dropzone, MaxSize, Button},\n    parameters: {\n        layout: \"centered\",\n    },\n    tags: [\"autodocs\"],\n} satisfies Meta<typeof FileInput>;\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const FileInputStory: Story = {\n    name: \"FileInput\",\n    args: {\n        variant: \"flexible\",\n        value: [],\n        onChange: console.info,\n        legend: \"Legg til fil\",\n        labelProps: {\n            variant: \"medium\",\n        },\n        accept: \"image/*,.pdf\",\n        maxSizeBytes: 8_000_000,\n    },\n    render: (args) => {\n        const [files, setFiles] = useState<FileInputFile[]>([]);\n\n        return (\n            <div>\n                <FileInput\n                    {...args}\n                    id=\"file-input-example\"\n                    className=\"jkl-spacing-16-24--bottom\"\n                    value={files}\n                    onChange={(_e, newFiles) => {\n                        setFiles((currentFiles) => [\n                            ...currentFiles,\n                            ...newFiles,\n                        ]);\n                    }}\n                >\n                    {files.map(({state, file, validation}, index) => {\n                        let label: string | undefined = undefined;\n                        let labelType: SupportLabelType | undefined = undefined;\n                        let demoState: FileInputFileState = state;\n\n                        const isUploading = state === \"UPLOADING\";\n\n                        if (validation?.type === \"WRONG_TYPE\") {\n                            labelType = \"warning\";\n                            label = `Filtypen ${\n                                file.name?.split(\".\")[1] || \"\"\n                            } støttes ikke`;\n                        } else if (state === \"UPLOAD_SUCCESS\") {\n                            labelType = \"success\";\n                            label = \"Lastet opp\";\n                            demoState = \"UPLOAD_SUCCESS\";\n                        } else if (state === \"UPLOAD_ERROR\") {\n                            labelType = \"error\";\n                            label = \"Filen lot seg ikke laste opp\";\n                            demoState = \"UPLOAD_ERROR\";\n                        } else if (\n                            validation?.type === \"TOO_LARGE\" &&\n                            args.maxSizeBytes\n                        ) {\n                            labelType = \"error\";\n                            label = `Filen er større enn ${formatBytes(\n                                args.maxSizeBytes,\n                            )} og kan ikke lastes opp`;\n                        } else if (isUploading) {\n                            label = \"Laster opp…\";\n                            demoState = \"UPLOADING\";\n                        }\n\n                        return (\n                            <File\n                                key={`${file.name}-${index}`}\n                                fileName={file.name}\n                                fileType={file.type}\n                                fileSize={file.size}\n                                path={`/path/fil-${index}`}\n                                file={file}\n                                state={demoState}\n                                supportLabel={label}\n                                supportLabelType={labelType}\n                                onRemove={\n                                    [\"UPLOAD_ERROR\", \"SELECTED\"].includes(state)\n                                        ? () => {\n                                            setFiles([\n                                                ...files.slice(0, index),\n                                                ...files.slice(index + 1),\n                                            ]);\n                                        }\n                                        : undefined\n                                }\n                            />\n                        );\n                    })}\n                </FileInput>\n                <PrimaryButton\n                    className=\"jkl-spacing-16--top\"\n                    type=\"button\"\n                    onClick={async () => {\n                        const toUpload = files.filter(\n                            (fileState) =>\n                                fileState.state === \"SELECTED\" &&\n                                typeof fileState.validation === \"undefined\",\n                        );\n\n                        const promises = toUpload.map(\n                            (fileToUpload) =>\n                                new Promise<void>((resolve) => {\n                                    const timeout = 5000;\n                                    setTimeout(() => {\n                                        setFiles((currentFiles) =>\n                                            currentFiles.map((file) =>\n                                                file.file.name ===\n                                                fileToUpload.file.name\n                                                    ? {\n                                                        ...file,\n                                                        state: \"UPLOAD_SUCCESS\",\n                                                    }\n                                                    : file,\n                                            ),\n                                        );\n                                        resolve();\n                                    }, timeout);\n                                }),\n                        );\n\n                        const newFiles = files.map((file) =>\n                            toUpload.includes(file)\n                                ? {\n                                    ...file,\n                                    state: \"UPLOADING\" as FileInputFileState,\n                                }\n                                : file,\n                        );\n\n                        setFiles(newFiles);\n\n                        await Promise.all(promises);\n                    }}\n                >\n                    Last opp\n                </PrimaryButton>\n            </div>\n        );\n    },\n};\n"],"names":["meta","title","component","FileInput","subcomponents","File","Dropzone","MaxSize","Button","parameters","layout","tags","FileInputStory","name","args","variant","value","onChange","console","info","legend","labelProps","accept","maxSizeBytes","render","files","setFiles","useState","children","jsx","id","className","_e","newFiles","currentFiles","map","state","file","validation","index","label","labelType","demoState","isUploading","type","_a","split","formatBytes","fileName","fileType","fileSize","size","path","supportLabel","supportLabelType","onRemove","includes","slice","PrimaryButton","onClick","async","toUpload","filter","fileState","promises","fileToUpload","Promise","resolve","setTimeout","all"],"mappings":"yfAYA,MAAMA,EAAO,CACTC,MAAO,wBACPC,UAAWC,EACXC,cAAe,CAACC,KAAAA,EAAMC,SAAAA,EAAUC,QAAAA,EAASC,OAAAA,GACzCC,WAAY,CACRC,OAAQ,YAEZC,KAAM,CAAC,aAOEC,EAAwB,CACjCC,KAAM,YACNC,KAAM,CACFC,QAAS,WACTC,MAAO,GACPC,SAAUC,QAAQC,KAClBC,OAAQ,eACRC,WAAY,CACRN,QAAS,UAEbO,OAAQ,eACRC,aAAc,KAElBC,OAASV,IACL,MAAOW,EAAOC,GAAYC,EAA0B,IAEpD,SACK,MACG,CAAAC,SAAA,CAAAC,EAAC1B,EAAA,IACOW,EACJgB,GAAG,qBACHC,UAAU,4BACVf,MAAOS,EACPR,SAAU,CAACe,EAAIC,KACXP,GAAUQ,GAAiB,IACpBA,KACAD,IACN,EAGJL,SAAAH,EAAMU,KAAI,EAAEC,MAAAA,EAAOC,KAAAA,EAAMC,WAAAA,GAAaC,WAC/BC,IAAAA,EACAC,EACAC,EAAgCN,EAEpC,MAAMO,EAAwB,cAAVP,EAEhBE,MAAqB,gBAArB,MAAAA,SAAAA,EAAYM,OACAH,EAAA,UACJD,EAAA,aACJ,OAAAK,EAAAR,EAAKxB,WAAL,EAAAgC,EAAWC,MAAM,KAAK,KAAM,mBAEf,mBAAVV,GACKK,EAAA,UACJD,EAAA,aACIE,EAAA,kBACK,iBAAVN,GACKK,EAAA,QACJD,EAAA,+BACIE,EAAA,gBAES,eAArB,MAAAJ,OAAA,EAAAA,EAAYM,OACZ9B,EAAKS,cAEOkB,EAAA,QACZD,EAAQ,uBAAuBO,EAC3BjC,EAAKS,wCAEFoB,IACCH,EAAA,cACIE,EAAA,aAIZb,EAACxB,EAAA,CAEG2C,SAAUX,EAAKxB,KACfoC,SAAUZ,EAAKO,KACfM,SAAUb,EAAKc,KACfC,KAAM,aAAab,IACnBF,KAAAA,EACAD,MAAOM,EACPW,aAAcb,EACdc,iBAAkBb,EAClBc,SACI,CAAC,eAAgB,YAAYC,SAASpB,GAChC,KACWV,EAAA,IACFD,EAAMgC,MAAM,EAAGlB,MACfd,EAAMgC,MAAMlB,EAAQ,IAC1B,OAEH,GAjBL,GAAGF,EAAKxB,QAAQ0B,IAAK,MAuB1CV,EAAC6B,EAAA,CACG3B,UAAU,sBACVa,KAAK,SACLe,QAASC,UACL,MAAMC,EAAWpC,EAAMqC,QAClBC,GACuB,aAApBA,EAAU3B,cACH2B,EAAUzB,WAAe,MAGlC0B,EAAWH,EAAS1B,KACrB8B,GACG,IAAIC,SAAeC,IAEfC,YAAW,KACP1C,GAAUQ,GACNA,EAAaC,KAAKE,GACdA,EAAKA,KAAKxB,OACVoD,EAAa5B,KAAKxB,KACZ,IACKwB,EACHD,MAAO,kBAETC,MAGN8B,MACT,IAAO,MAIhBlC,EAAWR,EAAMU,KAAKE,GACxBwB,EAASL,SAASnB,GACZ,IACKA,EACHD,MAAO,aAETC,IAGVX,EAASO,SAEHiC,QAAQG,IAAIL,EAAQ,EAEjCpC,SAAA,eAGL"}