npm - @fremtind/jokul - Versions diffs - 0.68.4 → 0.68.6 - Mend

@fremtind/jokul 0.68.4 → 0.68.6

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.

Files changed (406) hide show

package/build/es/components/expander/deprecated/Expander.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Expander.js","sources":["../../../../../src/components/expander/deprecated/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef } from \"react\";\nimport type { Density, WithChildren } from \"../../../core/types.js\";\nimport { ScreenReaderOnly } from \"../../ScreenReaderOnly.js\";\nimport { ArrowVerticalAnimated } from \"../../icon/icons/animated/ArrowVerticalAnimated.js\";\n\nexport interface ExpanderProps extends WithChildren {\n as?: \"summary\" \| \"button\";\n /** Må settes dersom du ikke bruker CoreToggle. Verdien skal være IDen til innholdet du ekspanderer. /\n \"aria-controls\"?: string;\n /* Må settes dersom du ikke bruker CoreToggle. IDen her skal brukes som verdien til aria-labelledby på innholdet du ekspanderer. /\n id?: string;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n /\n Styrer retningen til pila, som animeres ved endring. Styrer også aria-expanded.\n * @default false\n /\n isExpanded?: boolean;\n /* @default \"down\" /\n expandDirection?: \"up\" \| \"down\";\n density?: Density;\n /\n Skjul knappeteksten visuelt.\n \n @default false\n */\n hideLabel?: boolean;\n}\n\nexport const Expander = React.forwardRef(\n (\n {\n as = \"button\",\n className,\n children,\n density,\n expandDirection = \"down\",\n isExpanded = false,\n hideLabel = false,\n ...rest\n }: ExpanderProps,\n ref: ForwardedRef<HTMLButtonElement>,\n ): JSX.Element => {\n const ContentWrapper = hideLabel ? ScreenReaderOnly : React.Fragment;\n const pointingDown =\n expandDirection === \"down\" ? !isExpanded : isExpanded;\n\n const El = as;\n const type = El === \"button\" ? \"button\" : undefined;\n\n return (\n <El\n aria-expanded={isExpanded}\n data-testid=\"jkl-old-expander\"\n type={type}\n className={clsx(\"jkl-old-expander\", className, {\n \"jkl-old-expander--expanded\": isExpanded,\n \"jkl-old-expander--icon-only\": !children,\n })}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children && (\n <ContentWrapper>\n <span className=\"jkl-old-expander__text\">\n {children}\n </span>\n </ContentWrapper>\n )}\n <ArrowVerticalAnimated\n className=\"jkl-old-expander__arrow\"\n pointingDown={pointingDown}\n bold={isExpanded}\n />\n </El>\n );\n },\n);\n\nExpander.displayName = \"Expander\";\n"],"names":["Expander","React","forwardRef","as","className","children","density","expandDirection","isExpanded","hideLabel","rest","ref","ContentWrapper","ScreenReaderOnly","Fragment","pointingDown","jsxs","type","clsx","jsx","ArrowVerticalAnimated","bold","displayName"],"mappings":"gRA+BO,MAAMA,EAAWC,EAAMC,YAC1B,EAEQC,GAAAA,EAAK,SACLC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EAAkB,OAClBC,WAAAA,GAAa,EACbC,UAAAA,GAAY,KACTC,GAEPC,KAEMC,MAAAA,EAAiBH,EAAYI,EAAmBZ,EAAMa,SACtDC,EACkB,SAApBR,GAA8BC,EAAaA,EAM3C,OAAAQ,EAJOb,EAIN,CACG,gBAAeK,EACf,cAAY,mBACZS,KANY,WADTd,EACoB,cAAW,EAOlCC,UAAWc,EAAK,mBAAoBd,EAAW,CAC3C,6BAA8BI,EAC9B,+BAAgCH,OAEhCK,EACJ,eAAcJ,EACdK,IAAAA,EAECN,SAAA,CAAAA,KACIO,EACG,CAAAP,SAAAc,EAAC,QAAKf,UAAU,yBACXC,SAAAA,MAIbc,EAACC,EAAA,CACGhB,UAAU,0BACVW,aAAAA,EACAM,KAAMb,~~MACV~~,~~IAMhBR~~,EAASsB,YAAc"}
1	+ {"version":3,"file":"Expander.js","sources":["../../../../../src/components/expander/deprecated/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type ForwardedRef } from \"react\";\nimport type { Density, WithChildren } from \"../../../core/types.js\";\nimport { ScreenReaderOnly } from \"../../ScreenReaderOnly.js\";\nimport { ArrowVerticalAnimated } from \"../../icon/icons/animated/ArrowVerticalAnimated.js\";\n\nexport interface ExpanderProps extends WithChildren {\n as?: \"summary\" \| \"button\";\n /** Må settes dersom du ikke bruker CoreToggle. Verdien skal være IDen til innholdet du ekspanderer. /\n \"aria-controls\"?: string;\n /* Må settes dersom du ikke bruker CoreToggle. IDen her skal brukes som verdien til aria-labelledby på innholdet du ekspanderer. /\n id?: string;\n className?: string;\n onClick?: React.MouseEventHandler<HTMLButtonElement>;\n onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;\n /\n Styrer retningen til pila, som animeres ved endring. Styrer også aria-expanded.\n * @default false\n /\n isExpanded?: boolean;\n /* @default \"down\" /\n expandDirection?: \"up\" \| \"down\";\n density?: Density;\n /\n Skjul knappeteksten visuelt.\n \n @default false\n */\n hideLabel?: boolean;\n}\n\nexport const Expander = React.forwardRef(\n (\n {\n as = \"button\",\n className,\n children,\n density,\n expandDirection = \"down\",\n isExpanded = false,\n hideLabel = false,\n ...rest\n }: ExpanderProps,\n ref: ForwardedRef<HTMLButtonElement>,\n ): JSX.Element => {\n const ContentWrapper = hideLabel ? ScreenReaderOnly : React.Fragment;\n const pointingDown =\n expandDirection === \"down\" ? !isExpanded : isExpanded;\n\n const El = as;\n const type = El === \"button\" ? \"button\" : undefined;\n\n return (\n <El\n aria-expanded={isExpanded}\n data-testid=\"jkl-old-expander\"\n type={type}\n className={clsx(\"jkl-old-expander\", className, {\n \"jkl-old-expander--expanded\": isExpanded,\n \"jkl-old-expander--icon-only\": !children,\n })}\n {...rest}\n data-density={density}\n ref={ref}\n >\n {children && (\n <ContentWrapper>\n <span className=\"jkl-old-expander__text\">\n {children}\n </span>\n </ContentWrapper>\n )}\n <ArrowVerticalAnimated\n className=\"jkl-old-expander__arrow\"\n pointingDown={pointingDown}\n bold={isExpanded}\n />\n </El>\n );\n },\n);\n\nExpander.displayName = \"Expander\";\n"],"names":["Expander","React","forwardRef","as","className","children","density","expandDirection","isExpanded","hideLabel","rest","ref","ContentWrapper","ScreenReaderOnly","Fragment","pointingDown","jsxs","type","clsx","jsx","ArrowVerticalAnimated","bold","displayName"],"mappings":"gRA+BO,MAAMA,EAAWC,EAAMC,YAC1B,EAEQC,GAAAA,EAAK,SACLC,UAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EAAkB,OAClBC,WAAAA,GAAa,EACbC,UAAAA,GAAY,KACTC,GAEPC,KAEMC,MAAAA,EAAiBH,EAAYI,EAAmBZ,EAAMa,SACtDC,EACkB,SAApBR,GAA8BC,EAAaA,EAM3C,OAAAQ,EAJOb,EAIN,CACG,gBAAeK,EACf,cAAY,mBACZS,KANY,WADTd,EACoB,cAAW,EAOlCC,UAAWc,EAAK,mBAAoBd,EAAW,CAC3C,6BAA8BI,EAC9B,+BAAgCH,OAEhCK,EACJ,eAAcJ,EACdK,IAAAA,EAECN,SAAA,CAAAA,KACIO,EACG,CAAAP,SAAAc,EAAC,QAAKf,UAAU,yBACXC,SAAAA,MAIbc,EAACC,EAAA,CACGhB,UAAU,0BACVW,aAAAA,EACAM,KAAMb,MAEd,IAKZR,EAASsB,YAAc"}

package/build/es/components/expander/stories/Expander.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Expander.stories.js","sources":["../../../../../src/components/expander/stories/Expander.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { GreenCheckIcon } from \"../../icon/index.js\";\nimport { ExpandablePanel } from \"../ExpandablePanel.js\";\nimport { Expander } from \"../Expander.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/Expander\",\n component: ExpandablePanel,\n parameters: {\n layout: \"padded\",\n },\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype StoryExpander = StoryObj<typeof Expander>;\n\n/*\n Expander brukes i ExpandablePanel, men kan også brukes alene dersom du ønsker et annet uttrykk.\n */\nexport const ExpanderStory: StoryExpander = {\n name: \"Expander\",\n args: {\n icon: true,\n flipDirection: false,\n },\n render: ({ icon, ...props }) => (\n <Expander icon={icon ? <GreenCheckIcon /> : undefined} {...props}>\n Når er det vi faktisk er åpne?\n </Expander>\n ),\n};\n"],"names":["meta","title","component","ExpandablePanel","parameters","layout","tags","ExpanderStory","name","args","icon","flipDirection","render","props","jsx","Expander","GreenCheckIcon","children"],"mappings":"8qDAOA,MAAMA,EAAa,CACfC,MAAO,uBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,UAEZC,KAAM,CAAC,aAUEC,EAA+B,CACxCC,KAAM,WACNC,KAAM,CACFC,MAAM,EACNC,eAAe,GAEnBC,OAAQ,EAAGF,KAAAA,KAASG,KAChBC,EAACC,EAAS,CAAAL,KAAMA,EAAQI,EAAAE,EAAA,~~CAAe~~,~~QAAK,~~KAAeH,EAAOI,SAElE"}
1	+ {"version":3,"file":"Expander.stories.js","sources":["../../../../../src/components/expander/stories/Expander.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { GreenCheckIcon } from \"../../icon/index.js\";\nimport { ExpandablePanel } from \"../ExpandablePanel.js\";\nimport { Expander } from \"../Expander.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/Expander\",\n component: ExpandablePanel,\n parameters: {\n layout: \"padded\",\n },\n tags: [\"autodocs\"],\n};\n\nexport default meta;\n\ntype StoryExpander = StoryObj<typeof Expander>;\n\n/*\n Expander brukes i ExpandablePanel, men kan også brukes alene dersom du ønsker et annet uttrykk.\n */\nexport const ExpanderStory: StoryExpander = {\n name: \"Expander\",\n args: {\n icon: true,\n flipDirection: false,\n },\n render: ({ icon, ...props }) => (\n <Expander icon={icon ? <GreenCheckIcon /> : undefined} {...props}>\n Når er det vi faktisk er åpne?\n </Expander>\n ),\n};\n"],"names":["meta","title","component","ExpandablePanel","parameters","layout","tags","ExpanderStory","name","args","icon","flipDirection","render","props","jsx","Expander","GreenCheckIcon","children"],"mappings":"8qDAOA,MAAMA,EAAa,CACfC,MAAO,uBACPC,UAAWC,EACXC,WAAY,CACRC,OAAQ,UAEZC,KAAM,CAAC,aAUEC,EAA+B,CACxCC,KAAM,WACNC,KAAM,CACFC,MAAM,EACNC,eAAe,GAEnBC,OAAQ,EAAGF,KAAAA,KAASG,KAChBC,EAACC,EAAS,CAAAL,KAAMA,EAAQI,EAAAE,EAAA,SAAoB,KAAeH,EAAOI,SAElE"}

package/build/es/components/expander/stories/ExpanderPanel.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ExpanderPanel.stories.js","sources":["../../../../../src/components/expander/stories/ExpanderPanel.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Flex } from \"../../flex/Flex.js\";\nimport { GreenCheckIcon } from \"../../icon/index.js\";\nimport { ExpandablePanel } from \"../ExpandablePanel.js\";\nimport { ExpandablePanelContent } from \"../ExpandablePanelContent.js\";\nimport { Expander } from \"../Expander.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/ExpandablePanel\",\n component: ExpandablePanel,\n subcomponents: { Expander, ExpandablePanelContent },\n parameters: {\n layout: \"padded\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n variant: { control: \"select\", options: [\"stroke\", \"fill\"] },\n },\n};\n\nexport default meta;\n\ntype StoryExpanderPanel = StoryObj<{\n icon?: boolean;\n flipDirection?: boolean;\n variant: \"stroke\" \| \"fill\";\n}>;\n\nexport const ExpandablePanelStory: StoryExpanderPanel = {\n name: \"ExpandablePanel\",\n args: {\n variant: \"fill\",\n icon: true,\n flipDirection: false,\n },\n render: ({ icon, flipDirection, ...props }) => (\n <Flex style={{ width: \"100%\" }} direction=\"column\" gap={4}>\n {[...Array(3)].map((_, index) => (\n <ExpandablePanel key={index} {...props}>\n <Expander\n icon={icon ? <GreenCheckIcon /> : undefined}\n expandDirection={flipDirection ? \"up\" : undefined}\n >\n Når er det vi faktisk er åpne?\n </Expander>\n <ExpandablePanel.Content>\n Velkommen innom når vi faktisk har kaffe! Vi er åpne\n mandag til fredag fra kl. 09:00 til 18:00. Lørdag kan du\n besøke oss fra 10:00 til 16:00 (vi liker en rolig start\n på lørdagen). Søndager hviler vi – og det burde du også!\n </ExpandablePanel.Content>\n </ExpandablePanel>\n ))}\n </Flex>\n ),\n};\n"],"names":["meta","title","component","ExpandablePanel","subcomponents","Expander","ExpandablePanelContent","parameters","layout","tags","argTypes","variant","control","options","ExpandablePanelStory","name","args","icon","flipDirection","render","props","jsx","Flex","style","width","direction","gap","children","Array","map","_","index","jsxs","GreenCheckIcon","expandDirection","Content"],"mappings":"wyDASA,MAAMA,EAAa,CACfC,MAAO,8BACPC,UAAWC,EACXC,cAAe,CAAEC,SAAAA,EAAUC,uBAAAA,GAC3BC,WAAY,CACRC,OAAQ,UAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,QAAS,CAAEC,QAAS,SAAUC,QAAS,CAAC,SAAU,WAY7CC,EAA2C,CACpDC,KAAM,kBACNC,KAAM,CACFL,QAAS,OACTM,MAAM,EACNC,eAAe,GAEnBC,OAAQ,EAAGF,KAAAA,EAAMC,cAAAA,KAAkBE,KAC/BC,EAACC,EAAK,CAAAC,MAAO,CAAEC,MAAO,QAAUC,UAAU,SAASC,IAAK,EACnDC,SAAA,IAAIC,MAAM,IAAIC,KAAI,CAACC,EAAGC,IAClBC,EAAA7B,EAAA,IAAgCiB,EAC7BO,SAAA,CAAAN,EAAChB,EAAA,CACGY,KAAMA,EAAQI,EAAAY,EAAA,~~CAAe~~,~~QAAK~~,EAClCC,gBAAiBhB,EAAgB,UAAO,EAC3CS,SAAA,mCAGAN,EAAAlB,EAAgBgC,QAAhB,CAAwBR,SAKzB,qOAZkBI"}
1	+ {"version":3,"file":"ExpanderPanel.stories.js","sources":["../../../../../src/components/expander/stories/ExpanderPanel.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Flex } from \"../../flex/Flex.js\";\nimport { GreenCheckIcon } from \"../../icon/index.js\";\nimport { ExpandablePanel } from \"../ExpandablePanel.js\";\nimport { ExpandablePanelContent } from \"../ExpandablePanelContent.js\";\nimport { Expander } from \"../Expander.js\";\nimport \"../styles/_index.scss\";\n\nconst meta: Meta = {\n title: \"Komponenter/ExpandablePanel\",\n component: ExpandablePanel,\n subcomponents: { Expander, ExpandablePanelContent },\n parameters: {\n layout: \"padded\",\n },\n tags: [\"autodocs\"],\n argTypes: {\n variant: { control: \"select\", options: [\"stroke\", \"fill\"] },\n },\n};\n\nexport default meta;\n\ntype StoryExpanderPanel = StoryObj<{\n icon?: boolean;\n flipDirection?: boolean;\n variant: \"stroke\" \| \"fill\";\n}>;\n\nexport const ExpandablePanelStory: StoryExpanderPanel = {\n name: \"ExpandablePanel\",\n args: {\n variant: \"fill\",\n icon: true,\n flipDirection: false,\n },\n render: ({ icon, flipDirection, ...props }) => (\n <Flex style={{ width: \"100%\" }} direction=\"column\" gap={4}>\n {[...Array(3)].map((_, index) => (\n <ExpandablePanel key={index} {...props}>\n <Expander\n icon={icon ? <GreenCheckIcon /> : undefined}\n expandDirection={flipDirection ? \"up\" : undefined}\n >\n Når er det vi faktisk er åpne?\n </Expander>\n <ExpandablePanel.Content>\n Velkommen innom når vi faktisk har kaffe! Vi er åpne\n mandag til fredag fra kl. 09:00 til 18:00. Lørdag kan du\n besøke oss fra 10:00 til 16:00 (vi liker en rolig start\n på lørdagen). Søndager hviler vi – og det burde du også!\n </ExpandablePanel.Content>\n </ExpandablePanel>\n ))}\n </Flex>\n ),\n};\n"],"names":["meta","title","component","ExpandablePanel","subcomponents","Expander","ExpandablePanelContent","parameters","layout","tags","argTypes","variant","control","options","ExpandablePanelStory","name","args","icon","flipDirection","render","props","jsx","Flex","style","width","direction","gap","children","Array","map","_","index","jsxs","GreenCheckIcon","expandDirection","Content"],"mappings":"wyDASA,MAAMA,EAAa,CACfC,MAAO,8BACPC,UAAWC,EACXC,cAAe,CAAEC,SAAAA,EAAUC,uBAAAA,GAC3BC,WAAY,CACRC,OAAQ,UAEZC,KAAM,CAAC,YACPC,SAAU,CACNC,QAAS,CAAEC,QAAS,SAAUC,QAAS,CAAC,SAAU,WAY7CC,EAA2C,CACpDC,KAAM,kBACNC,KAAM,CACFL,QAAS,OACTM,MAAM,EACNC,eAAe,GAEnBC,OAAQ,EAAGF,KAAAA,EAAMC,cAAAA,KAAkBE,KAC/BC,EAACC,EAAK,CAAAC,MAAO,CAAEC,MAAO,QAAUC,UAAU,SAASC,IAAK,EACnDC,SAAA,IAAIC,MAAM,IAAIC,KAAI,CAACC,EAAGC,IAClBC,EAAA7B,EAAA,IAAgCiB,EAC7BO,SAAA,CAAAN,EAAChB,EAAA,CACGY,KAAMA,EAAQI,EAAAY,EAAA,CAAA,QAAoB,EAClCC,gBAAiBhB,EAAgB,UAAO,EAC3CS,SAAA,mCAGAN,EAAAlB,EAAgBgC,QAAhB,CAAwBR,SAKzB,qOAZkBI"}

package/build/es/components/feedback/Feedback.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Feedback.js","sources":["../../../../src/components/feedback/Feedback.tsx"],"sourcesContent":["import React, { type ReactElement, type ReactNode, useState } from \"react\";\nimport type { BaseTextAreaProps } from \"../text-area/types.js\";\nimport { FeedbackContextProvider } from \"./feedbackContext.js\";\nimport { Followup } from \"./followup/Followup.js\";\nimport { MainQuestion } from \"./main-question/MainQuestion.js\";\nimport { ContactQuestion } from \"./questions/ContactQuestion.js\";\nimport type {\n ContactQuestionProps,\n FeedbackOption,\n FeedbackType,\n FollowupProps,\n} from \"./types.js\";\n\nexport type FeedbackProps = {\n className?: string;\n /** Velg typen alternativer, Smiley eller RadioButtons. /\n type: \"radio\" \| \"smiley\";\n /* Spørsmålet som stilles til brukeren /\n label: string;\n /* Hjelpetekst til hovedspørsmålet /\n helpLabel?: string;\n /* Svaralternativer til spørsmålet /\n options: FeedbackOption[];\n /* Dersom du vil stille et åpent spørsmål i tillegg kan du sette denne til en truthy verdi /\n addOnQuestion?:\n \| {\n /* Spørsmålet du vil stille /\n label?: string;\n /* Eventuell hjelpetekst. Om du ikke spesifiserer en vil det vises en påminnelse om å ikke skrive inn personling informasjon. /\n helpLabel?: string;\n }\n \| boolean;\n /* Lar deg tilpasse meldingen som kommer når brukeren sender inn tilbakemeldingen. /\n successMessage?: {\n title: string;\n children: ReactNode;\n };\n /\n Funksjon for å håndtere innsending av tilbakemelding\n * @param value Verdien av tilbakemeldingen. Dette er et objekt med følgende egenskaper:\n * - `feedbackValue`: Selve verdien av tilbakemeldingen (format varierer etter spørsmålstype)\n * - `intentionalSubmit`: Er `true` hvis brukeren aktivt sendte inn skjemaet, `false` hvis skjemaet ble sendt inn automatisk\n * - `message`: Eventuell utfyllende melding fra bruker. Blir kun sendt inn ved aktiv innsending\n /\n onSubmit: (value: FeedbackType) => void;\n followup?: FollowupProps;\n contactQuestion?: ContactQuestionProps;\n /\n Hvis du ønsker at Feedback formen skal eksponeres som et landmark kan du sende inn\n * hva du ønsker at en skjermleser skal kalle den her. Bare eksponer Feedback som et\n * landmark på sider der den er en viktig del av innholdet, feks en kvitteringsside\n * eller et annet sted det å kunne gi tilbakemelding vil føles naturlig eller forventet\n * for brukeren.\n /\n landmarkLabel?: string;\n} & Pick<BaseTextAreaProps, \"counter\">;\n\nexport const Feedback = ({\n className,\n followup,\n contactQuestion,\n counter,\n landmarkLabel,\n ...mainQuestionProps\n}: FeedbackProps): ReactElement => {\n const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);\n const [followupStarted, setFollowupStarted] = useState(false);\n const [followupSubmitted, setFollowupSubmitted] = useState(false);\n const [contactSubmitted, setContactSubmitted] = useState(false);\n\n return (\n <div\n className={`jkl-feedback ${className \|\| \"\"}`}\n data-testid=\"feedback\"\n >\n <FeedbackContextProvider\n value={{\n feedbackSubmitted,\n followupStarted,\n followupSubmitted,\n contactSubmitted,\n counter,\n landmarkLabel,\n setFeedbackSubmitted,\n setFollowupStarted,\n setFollowupSubmitted,\n setContactSubmitted,\n }}\n >\n {!followupStarted && <MainQuestion {...mainQuestionProps} />}\n {feedbackSubmitted && !contactSubmitted && followup && (\n <Followup {...followup} />\n )}\n {contactQuestion && (\n <div aria-live=\"polite\">\n {/ Show contact question after followup, or after feedback if no followup */}\n {((!followup && feedbackSubmitted) \|\|\n followupSubmitted) && (\n <ContactQuestion {...contactQuestion} />\n )}\n </div>\n )}\n </FeedbackContextProvider>\n </div>\n );\n};\n"],"names":["Feedback","className","followup","contactQuestion","counter","landmarkLabel","mainQuestionProps","feedbackSubmitted","setFeedbackSubmitted","useState","followupStarted","setFollowupStarted","followupSubmitted","setFollowupSubmitted","contactSubmitted","setContactSubmitted","jsx","children","jsxs","FeedbackContextProvider","value","MainQuestion","Followup","ContactQuestion"],"mappings":"oUAyDO,MAAMA,EAAW,EACpBC,UAAAA,EACAC,SAAAA,EACAC,gBAAAA,EACAC,QAAAA,EACAC,cAAAA,KACGC,MAEG,MAACC,EAAmBC,GAAwBC,GAAS,IACpDC,EAAiBC,GAAsBF,GAAS,IAChDG,EAAmBC,GAAwBJ,GAAS,IACpDK,EAAkBC,GAAuBN,GAAS,GAGrD,OAAAO,EAAC,MAAA,CACGf,UAAW,gBAAgBA,GAAa,KACxC,cAAY,WAEZgB,SAAAC,EAACC,EAAA,CACGC,MAAO,CACHb,kBAAAA,EACAG,gBAAAA,EACAE,kBAAAA,EACAE,iBAAAA,EACAV,QAAAA,EACAC,cAAAA,EACAG,qBAAAA,EACAG,mBAAAA,EACAE,qBAAAA,EACAE,oBAAAA,GAGHE,SAAA,EAACP,GAAmBM,EAACK,EAAc,IAAGf,IACtCC,IAAsBO,GAAoBZ,GACtCc,EAAAM,EAAA,IAAapB,IAEjBC,GACGa,EAAC,MAAI,CAAA,YAAU,SAERC,WAACf,GAAYK,GACZK,IACAI,EAACO,EAAiB,IAAGpB,~~UAIrC~~"}
1	+ {"version":3,"file":"Feedback.js","sources":["../../../../src/components/feedback/Feedback.tsx"],"sourcesContent":["import React, { type ReactElement, type ReactNode, useState } from \"react\";\nimport type { BaseTextAreaProps } from \"../text-area/types.js\";\nimport { FeedbackContextProvider } from \"./feedbackContext.js\";\nimport { Followup } from \"./followup/Followup.js\";\nimport { MainQuestion } from \"./main-question/MainQuestion.js\";\nimport { ContactQuestion } from \"./questions/ContactQuestion.js\";\nimport type {\n ContactQuestionProps,\n FeedbackOption,\n FeedbackType,\n FollowupProps,\n} from \"./types.js\";\n\nexport type FeedbackProps = {\n className?: string;\n /** Velg typen alternativer, Smiley eller RadioButtons. /\n type: \"radio\" \| \"smiley\";\n /* Spørsmålet som stilles til brukeren /\n label: string;\n /* Hjelpetekst til hovedspørsmålet /\n helpLabel?: string;\n /* Svaralternativer til spørsmålet /\n options: FeedbackOption[];\n /* Dersom du vil stille et åpent spørsmål i tillegg kan du sette denne til en truthy verdi /\n addOnQuestion?:\n \| {\n /* Spørsmålet du vil stille /\n label?: string;\n /* Eventuell hjelpetekst. Om du ikke spesifiserer en vil det vises en påminnelse om å ikke skrive inn personling informasjon. /\n helpLabel?: string;\n }\n \| boolean;\n /* Lar deg tilpasse meldingen som kommer når brukeren sender inn tilbakemeldingen. /\n successMessage?: {\n title: string;\n children: ReactNode;\n };\n /\n Funksjon for å håndtere innsending av tilbakemelding\n * @param value Verdien av tilbakemeldingen. Dette er et objekt med følgende egenskaper:\n * - `feedbackValue`: Selve verdien av tilbakemeldingen (format varierer etter spørsmålstype)\n * - `intentionalSubmit`: Er `true` hvis brukeren aktivt sendte inn skjemaet, `false` hvis skjemaet ble sendt inn automatisk\n * - `message`: Eventuell utfyllende melding fra bruker. Blir kun sendt inn ved aktiv innsending\n /\n onSubmit: (value: FeedbackType) => void;\n followup?: FollowupProps;\n contactQuestion?: ContactQuestionProps;\n /\n Hvis du ønsker at Feedback formen skal eksponeres som et landmark kan du sende inn\n * hva du ønsker at en skjermleser skal kalle den her. Bare eksponer Feedback som et\n * landmark på sider der den er en viktig del av innholdet, feks en kvitteringsside\n * eller et annet sted det å kunne gi tilbakemelding vil føles naturlig eller forventet\n * for brukeren.\n /\n landmarkLabel?: string;\n} & Pick<BaseTextAreaProps, \"counter\">;\n\nexport const Feedback = ({\n className,\n followup,\n contactQuestion,\n counter,\n landmarkLabel,\n ...mainQuestionProps\n}: FeedbackProps): ReactElement => {\n const [feedbackSubmitted, setFeedbackSubmitted] = useState(false);\n const [followupStarted, setFollowupStarted] = useState(false);\n const [followupSubmitted, setFollowupSubmitted] = useState(false);\n const [contactSubmitted, setContactSubmitted] = useState(false);\n\n return (\n <div\n className={`jkl-feedback ${className \|\| \"\"}`}\n data-testid=\"feedback\"\n >\n <FeedbackContextProvider\n value={{\n feedbackSubmitted,\n followupStarted,\n followupSubmitted,\n contactSubmitted,\n counter,\n landmarkLabel,\n setFeedbackSubmitted,\n setFollowupStarted,\n setFollowupSubmitted,\n setContactSubmitted,\n }}\n >\n {!followupStarted && <MainQuestion {...mainQuestionProps} />}\n {feedbackSubmitted && !contactSubmitted && followup && (\n <Followup {...followup} />\n )}\n {contactQuestion && (\n <div aria-live=\"polite\">\n {/ Show contact question after followup, or after feedback if no followup */}\n {((!followup && feedbackSubmitted) \|\|\n followupSubmitted) && (\n <ContactQuestion {...contactQuestion} />\n )}\n </div>\n )}\n </FeedbackContextProvider>\n </div>\n );\n};\n"],"names":["Feedback","className","followup","contactQuestion","counter","landmarkLabel","mainQuestionProps","feedbackSubmitted","setFeedbackSubmitted","useState","followupStarted","setFollowupStarted","followupSubmitted","setFollowupSubmitted","contactSubmitted","setContactSubmitted","jsx","children","jsxs","FeedbackContextProvider","value","MainQuestion","Followup","ContactQuestion"],"mappings":"oUAyDO,MAAMA,EAAW,EACpBC,UAAAA,EACAC,SAAAA,EACAC,gBAAAA,EACAC,QAAAA,EACAC,cAAAA,KACGC,MAEG,MAACC,EAAmBC,GAAwBC,GAAS,IACpDC,EAAiBC,GAAsBF,GAAS,IAChDG,EAAmBC,GAAwBJ,GAAS,IACpDK,EAAkBC,GAAuBN,GAAS,GAGrD,OAAAO,EAAC,MAAA,CACGf,UAAW,gBAAgBA,GAAa,KACxC,cAAY,WAEZgB,SAAAC,EAACC,EAAA,CACGC,MAAO,CACHb,kBAAAA,EACAG,gBAAAA,EACAE,kBAAAA,EACAE,iBAAAA,EACAV,QAAAA,EACAC,cAAAA,EACAG,qBAAAA,EACAG,mBAAAA,EACAE,qBAAAA,EACAE,oBAAAA,GAGHE,SAAA,EAACP,GAAmBM,EAACK,EAAc,IAAGf,IACtCC,IAAsBO,GAAoBZ,GACtCc,EAAAM,EAAA,IAAapB,IAEjBC,GACGa,EAAC,MAAI,CAAA,YAAU,SAERC,WAACf,GAAYK,GACZK,IACAI,EAACO,EAAiB,IAAGpB,UAKzC"}

package/build/es/components/feedback/followup/useFollowup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useFollowup.js","sources":["../../../../../src/components/feedback/followup/useFollowup.ts"],"sourcesContent":["import {\n type Dispatch,\n type FormEvent,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type {\n FeedbackAnswer,\n FeedbackOption,\n FollowupQuestion,\n} from \"../types.js\";\n\ntype CurrentValue =\n \| FeedbackOption<string \| number>\n \| FeedbackOption<string \| number>[]\n \| undefined;\n\ntype Followup = {\n questions: FollowupQuestion[];\n values: FeedbackAnswer[] \| undefined;\n step: {\n number: number;\n question: FollowupQuestion;\n isLast: boolean;\n };\n currentValue: CurrentValue;\n setCurrentValue: Dispatch<SetStateAction<CurrentValue>>;\n submitted: boolean;\n handleNext: () => void;\n handleAbort: () => void;\n};\n\nexport const useFollowup = (\n questions: FollowupQuestion[],\n onSubmit: (a: FeedbackAnswer[]) => void,\n): Followup => {\n const [values, setValues] = useState<FeedbackAnswer[]>();\n const [step, setStep] = useState({\n number: 0,\n question: questions[0],\n isLast: questions.length === 1,\n });\n const [shouldSubmit, setShouldSubmit] = useState(false);\n const [submitted, setSubmitted] = useState(false);\n const [currentValue, setCurrentValue] = useState<\n FeedbackOption \| FeedbackOption[]\n >();\n\n // Store info in a ref to facilitate autosubmit on component unmount,\n // or when leaving page\n const followupRef = useRef({\n values,\n submitted,\n onSubmit,\n });\n\n // Keep values in ref updated\n useEffect(() => {\n followupRef.current = {\n ...followupRef.current,\n values,\n submitted,\n };\n }, [values, submitted]);\n\n // General method for submitting info\n const _handleSubmit = useCallback(() => {\n if (\n !followupRef.current.submitted &&\n followupRef.current.values !== undefined\n ) {\n followupRef.current.onSubmit(followupRef.current.values);\n }\n }, []);\n\n // Function for handling going to the next step in the form wizard\n function handleNext(e?: FormEvent<HTMLFormElement>) {\n e?.preventDefault();\n\n const value = Array.isArray(currentValue)\n ? currentValue.map((option) => option.value.toString())\n : currentValue?.value;\n\n const newValue = {\n ...step.question,\n name: step.question.name \|\| step.question.label,\n value,\n };\n\n setValues((oldValues) => {\n const filteredValues =\n oldValues?.filter(\n (oldValue) => oldValue.name !== newValue.name,\n ) \|\| [];\n return [...filteredValues, newValue as FeedbackAnswer];\n });\n setCurrentValue(undefined);\n\n if (step.isLast) {\n setShouldSubmit(true);\n } else {\n setStep((currentStep) => {\n const newStepNum = currentStep.number + 1;\n return {\n number: newStepNum,\n question: questions[newStepNum],\n isLast: newStepNum + 1 >= questions.length,\n };\n });\n }\n }\n\n // Let the user abort without submitting answers\n function handleAbort() {\n setValues(undefined);\n setCurrentValue(undefined);\n setStep({\n number: 0,\n question: questions[0],\n isLast: questions.length === 1,\n });\n setSubmitted(true);\n }\n\n // Submit info after user submits last question\n useEffect(() => {\n if (shouldSubmit) {\n _handleSubmit();\n setSubmitted(true);\n }\n }, [shouldSubmit, _handleSubmit]);\n\n // Submit info if component unmounts or page unloads\n useEffect(() => {\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"beforeunload\", _handleSubmit);\n }\n return () => {\n _handleSubmit();\n window.removeEventListener(\"beforeunload\", _handleSubmit);\n };\n }, [_handleSubmit]);\n\n return {\n questions,\n values,\n step,\n currentValue,\n setCurrentValue,\n submitted,\n handleNext,\n handleAbort,\n };\n};\n"],"names":["useFollowup","questions","onSubmit","values","setValues","useState","step","setStep","number","question","isLast","length","shouldSubmit","setShouldSubmit","submitted","setSubmitted","currentValue","setCurrentValue","followupRef","useRef","useEffect","current","_handleSubmit","useCallback","window","addEventListener","removeEventListener","handleNext","e","preventDefault","value","Array","isArray","map","option","toString","newValue","name","label","oldValues","filter","oldValue","currentStep","newStepNum","handleAbort"],"mappings":"6EAmCa,MAAAA,EAAc,CACvBC,EACAC,KAEM,MAACC,EAAQC,GAAaC,KACrBC,EAAMC,GAAWF,EAAS,CAC7BG,OAAQ,EACRC,SAAUR,EAAU,GACpBS,OAA6B,IAArBT,EAAUU,UAEfC,EAAcC,GAAmBR,GAAS,IAC1CS,EAAWC,GAAgBV,GAAS,IACpCW,EAAcC,GAAmBZ,IAMlCa,EAAcC,EAAO,CACvBhB,OAAAA,EACAW,UAAAA,EACAZ,SAAAA,IAIJkB,GAAU,KACNF,EAAYG,QAAU,IACfH,EAAYG,QACflB,OAAAA,EACAW,UAAAA,~~EAAA~~,~~GAEL~~,CAACX,EAAQW,IAGNQ,MAAAA,EAAgBC,GAAY,MAEzBL,EAAYG,QAAQP,gBACU,IAA/BI,EAAYG,QAAQlB,QAEpBe,EAAYG,QAAQnB,SAASgB,EAAYG,QAAQlB,OAAM,GAE5D,IAoDH,OAAAiB,GAAU,KACFR,IACcU,IACdP,GAAa,GAAI,GAEtB,CAACH,EAAcU,IAGlBF,GAAU,YACKI,OAAW,KACXA,OAAAC,iBAAiB,eAAgBH,GAErC,KACWA,IACPE,OAAAE,oBAAoB,eAAgBJ,EAAa,IAE7D,CAACA,IAEG,CACHrB,UAAAA,EACAE,OAAAA,EACAG,KAAAA,EACAU,aAAAA,EACAC,gBAAAA,EACAH,UAAAA,EACAa,WA1EJ,SAAoBC,GAChB,MAAAA,GAAAA,EAAGC,iBAEH,MAAMC,EAAQC,MAAMC,QAAQhB,GACtBA,EAAaiB,KAAKC,GAAWA,EAAOJ,MAAMK,aAC1C,MAAAnB,OAAAA,EAAAA,EAAcc,MAEdM,EAAW,IACV9B,EAAKG,SACR4B,KAAM/B,EAAKG,SAAS4B,MAAQ/B,EAAKG,SAAS6B,MAC1CR,MAAAA,GAGJ1B,GAAWmC,GAKA,KAHH,MAAAA,SAAAA,EAAWC,QACNC,GAAaA,EAASJ,OAASD,EAASC,SACxC,GACkBD,KAE/BnB,OAAgB,GAEZX,EAAKI,OACLG,GAAgB,GAEhBN,GAASmC,IACCC,MAAAA,EAAaD,EAAYlC,OAAS,EACjC,MAAA,CACHA,OAAQmC,EACRlC,SAAUR,EAAU0C,GACpBjC,OAAQiC,EAAa,GAAK1C,EAAUU,~~OAAA~~,~~GAIpD~~,~~EAyCIiC~~,YAtCJ,WACIxC,OAAU,GACVa,OAAgB,GACRV,EAAA,CACJC,OAAQ,EACRC,SAAUR,EAAU,GACpBS,OAA6B,IAArBT,EAAUU,SAEtBI,GAAa,~~EACjB~~,~~EA6BI~~"}
1	+ {"version":3,"file":"useFollowup.js","sources":["../../../../../src/components/feedback/followup/useFollowup.ts"],"sourcesContent":["import {\n type Dispatch,\n type FormEvent,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type {\n FeedbackAnswer,\n FeedbackOption,\n FollowupQuestion,\n} from \"../types.js\";\n\ntype CurrentValue =\n \| FeedbackOption<string \| number>\n \| FeedbackOption<string \| number>[]\n \| undefined;\n\ntype Followup = {\n questions: FollowupQuestion[];\n values: FeedbackAnswer[] \| undefined;\n step: {\n number: number;\n question: FollowupQuestion;\n isLast: boolean;\n };\n currentValue: CurrentValue;\n setCurrentValue: Dispatch<SetStateAction<CurrentValue>>;\n submitted: boolean;\n handleNext: () => void;\n handleAbort: () => void;\n};\n\nexport const useFollowup = (\n questions: FollowupQuestion[],\n onSubmit: (a: FeedbackAnswer[]) => void,\n): Followup => {\n const [values, setValues] = useState<FeedbackAnswer[]>();\n const [step, setStep] = useState({\n number: 0,\n question: questions[0],\n isLast: questions.length === 1,\n });\n const [shouldSubmit, setShouldSubmit] = useState(false);\n const [submitted, setSubmitted] = useState(false);\n const [currentValue, setCurrentValue] = useState<\n FeedbackOption \| FeedbackOption[]\n >();\n\n // Store info in a ref to facilitate autosubmit on component unmount,\n // or when leaving page\n const followupRef = useRef({\n values,\n submitted,\n onSubmit,\n });\n\n // Keep values in ref updated\n useEffect(() => {\n followupRef.current = {\n ...followupRef.current,\n values,\n submitted,\n };\n }, [values, submitted]);\n\n // General method for submitting info\n const _handleSubmit = useCallback(() => {\n if (\n !followupRef.current.submitted &&\n followupRef.current.values !== undefined\n ) {\n followupRef.current.onSubmit(followupRef.current.values);\n }\n }, []);\n\n // Function for handling going to the next step in the form wizard\n function handleNext(e?: FormEvent<HTMLFormElement>) {\n e?.preventDefault();\n\n const value = Array.isArray(currentValue)\n ? currentValue.map((option) => option.value.toString())\n : currentValue?.value;\n\n const newValue = {\n ...step.question,\n name: step.question.name \|\| step.question.label,\n value,\n };\n\n setValues((oldValues) => {\n const filteredValues =\n oldValues?.filter(\n (oldValue) => oldValue.name !== newValue.name,\n ) \|\| [];\n return [...filteredValues, newValue as FeedbackAnswer];\n });\n setCurrentValue(undefined);\n\n if (step.isLast) {\n setShouldSubmit(true);\n } else {\n setStep((currentStep) => {\n const newStepNum = currentStep.number + 1;\n return {\n number: newStepNum,\n question: questions[newStepNum],\n isLast: newStepNum + 1 >= questions.length,\n };\n });\n }\n }\n\n // Let the user abort without submitting answers\n function handleAbort() {\n setValues(undefined);\n setCurrentValue(undefined);\n setStep({\n number: 0,\n question: questions[0],\n isLast: questions.length === 1,\n });\n setSubmitted(true);\n }\n\n // Submit info after user submits last question\n useEffect(() => {\n if (shouldSubmit) {\n _handleSubmit();\n setSubmitted(true);\n }\n }, [shouldSubmit, _handleSubmit]);\n\n // Submit info if component unmounts or page unloads\n useEffect(() => {\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"beforeunload\", _handleSubmit);\n }\n return () => {\n _handleSubmit();\n window.removeEventListener(\"beforeunload\", _handleSubmit);\n };\n }, [_handleSubmit]);\n\n return {\n questions,\n values,\n step,\n currentValue,\n setCurrentValue,\n submitted,\n handleNext,\n handleAbort,\n };\n};\n"],"names":["useFollowup","questions","onSubmit","values","setValues","useState","step","setStep","number","question","isLast","length","shouldSubmit","setShouldSubmit","submitted","setSubmitted","currentValue","setCurrentValue","followupRef","useRef","useEffect","current","_handleSubmit","useCallback","window","addEventListener","removeEventListener","handleNext","e","preventDefault","value","Array","isArray","map","option","toString","newValue","name","label","oldValues","filter","oldValue","currentStep","newStepNum","handleAbort"],"mappings":"6EAmCa,MAAAA,EAAc,CACvBC,EACAC,KAEM,MAACC,EAAQC,GAAaC,KACrBC,EAAMC,GAAWF,EAAS,CAC7BG,OAAQ,EACRC,SAAUR,EAAU,GACpBS,OAA6B,IAArBT,EAAUU,UAEfC,EAAcC,GAAmBR,GAAS,IAC1CS,EAAWC,GAAgBV,GAAS,IACpCW,EAAcC,GAAmBZ,IAMlCa,EAAcC,EAAO,CACvBhB,OAAAA,EACAW,UAAAA,EACAZ,SAAAA,IAIJkB,GAAU,KACNF,EAAYG,QAAU,IACfH,EAAYG,QACflB,OAAAA,EACAW,UAAAA,EACJ,GACD,CAACX,EAAQW,IAGNQ,MAAAA,EAAgBC,GAAY,MAEzBL,EAAYG,QAAQP,gBACU,IAA/BI,EAAYG,QAAQlB,QAEpBe,EAAYG,QAAQnB,SAASgB,EAAYG,QAAQlB,OAAM,GAE5D,IAoDH,OAAAiB,GAAU,KACFR,IACcU,IACdP,GAAa,GAAI,GAEtB,CAACH,EAAcU,IAGlBF,GAAU,YACKI,OAAW,KACXA,OAAAC,iBAAiB,eAAgBH,GAErC,KACWA,IACPE,OAAAE,oBAAoB,eAAgBJ,EAAa,IAE7D,CAACA,IAEG,CACHrB,UAAAA,EACAE,OAAAA,EACAG,KAAAA,EACAU,aAAAA,EACAC,gBAAAA,EACAH,UAAAA,EACAa,WA1EJ,SAAoBC,GAChB,MAAAA,GAAAA,EAAGC,iBAEH,MAAMC,EAAQC,MAAMC,QAAQhB,GACtBA,EAAaiB,KAAKC,GAAWA,EAAOJ,MAAMK,aAC1C,MAAAnB,OAAAA,EAAAA,EAAcc,MAEdM,EAAW,IACV9B,EAAKG,SACR4B,KAAM/B,EAAKG,SAAS4B,MAAQ/B,EAAKG,SAAS6B,MAC1CR,MAAAA,GAGJ1B,GAAWmC,GAKA,KAHH,MAAAA,SAAAA,EAAWC,QACNC,GAAaA,EAASJ,OAASD,EAASC,SACxC,GACkBD,KAE/BnB,OAAgB,GAEZX,EAAKI,OACLG,GAAgB,GAEhBN,GAASmC,IACCC,MAAAA,EAAaD,EAAYlC,OAAS,EACjC,MAAA,CACHA,OAAQmC,EACRlC,SAAUR,EAAU0C,GACpBjC,OAAQiC,EAAa,GAAK1C,EAAUU,OACxC,GAER,EA0CAiC,YAtCJ,WACIxC,OAAU,GACVa,OAAgB,GACRV,EAAA,CACJC,OAAQ,EACRC,SAAUR,EAAU,GACpBS,OAA6B,IAArBT,EAAUU,SAEtBI,GAAa,EAAI,EA+BrB"}

package/build/es/components/feedback/main-question/useMainQuestion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"useMainQuestion.js","sources":["../../../../../src/components/feedback/main-question/useMainQuestion.ts"],"sourcesContent":["import {\n type Dispatch,\n type FormEventHandler,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { FeedbackOption, FeedbackType } from \"../types.js\";\n\ntype Value =\n \| FeedbackOption<string \| number>\n \| FeedbackOption<string \| number>[]\n \| undefined;\n\ntype MainQuestion = {\n currentValue: Value;\n setCurrentValue: Dispatch<SetStateAction<Value>>;\n message: string \| undefined;\n setMessage: Dispatch<SetStateAction<string \| undefined>>;\n submitted: boolean;\n handleSubmit: FormEventHandler<HTMLFormElement>;\n};\n\nexport const useMainQuestion = (\n onSubmit: (f: FeedbackType) => void,\n): MainQuestion => {\n const [currentValue, setCurrentValue] = useState<\n FeedbackOption \| FeedbackOption[]\n >();\n const [message, setMessage] = useState<string>();\n const [submitted, setSubmitted] = useState(false);\n\n const feedbackRef = useRef({\n onSubmit,\n currentValue,\n message,\n submitted,\n });\n\n useEffect(() => {\n feedbackRef.current = {\n ...feedbackRef.current,\n onSubmit,\n currentValue,\n message,\n submitted,\n };\n }, [onSubmit, currentValue, message, submitted]);\n\n const submitHandler = useCallback((intentionalSubmit = true) => {\n const { message, currentValue, submitted, onSubmit } =\n feedbackRef.current;\n\n if (!submitted && currentValue !== undefined) {\n const feedbackValue = Array.isArray(currentValue)\n ? currentValue.map((option) => option.value)\n : currentValue?.value;\n onSubmit({\n feedbackValue,\n intentionalSubmit,\n ...(intentionalSubmit && message ? { message } : {}),\n });\n }\n }, []);\n\n const autoSubmit = useCallback(() => submitHandler(false), [submitHandler]);\n\n useEffect(() => {\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"beforeunload\", autoSubmit);\n }\n return () => {\n autoSubmit();\n window.removeEventListener(\"beforeunload\", autoSubmit);\n };\n }, [autoSubmit]);\n\n const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {\n e.preventDefault();\n submitHandler();\n setSubmitted(true);\n };\n\n return {\n currentValue,\n setCurrentValue,\n message,\n setMessage,\n submitted,\n handleSubmit,\n };\n};\n"],"names":["useMainQuestion","onSubmit","currentValue","setCurrentValue","useState","message","setMessage","submitted","setSubmitted","feedbackRef","useRef","useEffect","current","submitHandler","useCallback","intentionalSubmit","feedbackValue","Array","isArray","map","option","value","autoSubmit","window","addEventListener","removeEventListener","handleSubmit","e","preventDefault"],"mappings":"6EAyBa,MAAAA,EACTC,IAEM,MAACC,EAAcC,GAAmBC,KAGjCC,EAASC,GAAcF,KACvBG,EAAWC,GAAgBJ,GAAS,GAErCK,EAAcC,EAAO,CACvBT,SAAAA,EACAC,aAAAA,EACAG,QAAAA,EACAE,UAAAA,IAGJI,GAAU,KACNF,EAAYG,QAAU,IACfH,EAAYG,QACfX,SAAAA,EACAC,aAAAA,EACAG,QAAAA,EACAE,UAAAA,~~EAAA~~,~~GAEL~~,CAACN,EAAUC,EAAcG,EAASE,IAErC,MAAMM,EAAgBC,GAAY,CAACC,GAAoB,KAC7C,MAAEV,QAAAA,EAASH,aAAAA,EAAcK,UAAAA,EAAWN,SAAAA,GACtCQ,EAAYG,QAEZ,IAACL,QAA8B,IAAjBL,EAA4B,CAI1CD,EAAS,CACLe,cAJkBC,MAAMC,QAAQhB,GAC9BA,EAAaiB,KAAKC,GAAWA,EAAOC,QACpCnB,MAAAA,SAAAA,EAAcmB,MAGhBN,kBAAAA,KACIA,GAAqBV,EAAU,CAAEA,QAAAA,GAAY,~~CAAC~~,~~GAE1D~~,~~IACD~~,IAEGiB,EAAaR,GAAY,IAAMD,GAAc,IAAQ,CAACA,IAE5DF,OAAAA,GAAU,YACKY,OAAW,KACXA,OAAAC,iBAAiB,eAAgBF,GAErC,KACQA,IACJC,OAAAE,oBAAoB,eAAgBH,EAAU,IAE1D,CAACA,IAQG,CACHpB,aAAAA,EACAC,gBAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAmB,aAZqDC,IACrDA,EAAEC,iBACYf,IACdL,GAAa,EAAI,~~EASjB~~"}
1	+ {"version":3,"file":"useMainQuestion.js","sources":["../../../../../src/components/feedback/main-question/useMainQuestion.ts"],"sourcesContent":["import {\n type Dispatch,\n type FormEventHandler,\n type SetStateAction,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport type { FeedbackOption, FeedbackType } from \"../types.js\";\n\ntype Value =\n \| FeedbackOption<string \| number>\n \| FeedbackOption<string \| number>[]\n \| undefined;\n\ntype MainQuestion = {\n currentValue: Value;\n setCurrentValue: Dispatch<SetStateAction<Value>>;\n message: string \| undefined;\n setMessage: Dispatch<SetStateAction<string \| undefined>>;\n submitted: boolean;\n handleSubmit: FormEventHandler<HTMLFormElement>;\n};\n\nexport const useMainQuestion = (\n onSubmit: (f: FeedbackType) => void,\n): MainQuestion => {\n const [currentValue, setCurrentValue] = useState<\n FeedbackOption \| FeedbackOption[]\n >();\n const [message, setMessage] = useState<string>();\n const [submitted, setSubmitted] = useState(false);\n\n const feedbackRef = useRef({\n onSubmit,\n currentValue,\n message,\n submitted,\n });\n\n useEffect(() => {\n feedbackRef.current = {\n ...feedbackRef.current,\n onSubmit,\n currentValue,\n message,\n submitted,\n };\n }, [onSubmit, currentValue, message, submitted]);\n\n const submitHandler = useCallback((intentionalSubmit = true) => {\n const { message, currentValue, submitted, onSubmit } =\n feedbackRef.current;\n\n if (!submitted && currentValue !== undefined) {\n const feedbackValue = Array.isArray(currentValue)\n ? currentValue.map((option) => option.value)\n : currentValue?.value;\n onSubmit({\n feedbackValue,\n intentionalSubmit,\n ...(intentionalSubmit && message ? { message } : {}),\n });\n }\n }, []);\n\n const autoSubmit = useCallback(() => submitHandler(false), [submitHandler]);\n\n useEffect(() => {\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"beforeunload\", autoSubmit);\n }\n return () => {\n autoSubmit();\n window.removeEventListener(\"beforeunload\", autoSubmit);\n };\n }, [autoSubmit]);\n\n const handleSubmit: FormEventHandler<HTMLFormElement> = (e) => {\n e.preventDefault();\n submitHandler();\n setSubmitted(true);\n };\n\n return {\n currentValue,\n setCurrentValue,\n message,\n setMessage,\n submitted,\n handleSubmit,\n };\n};\n"],"names":["useMainQuestion","onSubmit","currentValue","setCurrentValue","useState","message","setMessage","submitted","setSubmitted","feedbackRef","useRef","useEffect","current","submitHandler","useCallback","intentionalSubmit","feedbackValue","Array","isArray","map","option","value","autoSubmit","window","addEventListener","removeEventListener","handleSubmit","e","preventDefault"],"mappings":"6EAyBa,MAAAA,EACTC,IAEM,MAACC,EAAcC,GAAmBC,KAGjCC,EAASC,GAAcF,KACvBG,EAAWC,GAAgBJ,GAAS,GAErCK,EAAcC,EAAO,CACvBT,SAAAA,EACAC,aAAAA,EACAG,QAAAA,EACAE,UAAAA,IAGJI,GAAU,KACNF,EAAYG,QAAU,IACfH,EAAYG,QACfX,SAAAA,EACAC,aAAAA,EACAG,QAAAA,EACAE,UAAAA,EACJ,GACD,CAACN,EAAUC,EAAcG,EAASE,IAErC,MAAMM,EAAgBC,GAAY,CAACC,GAAoB,KAC7C,MAAEV,QAAAA,EAASH,aAAAA,EAAcK,UAAAA,EAAWN,SAAAA,GACtCQ,EAAYG,QAEZ,IAACL,QAA8B,IAAjBL,EAA4B,CAI1CD,EAAS,CACLe,cAJkBC,MAAMC,QAAQhB,GAC9BA,EAAaiB,KAAKC,GAAWA,EAAOC,QACpCnB,MAAAA,SAAAA,EAAcmB,MAGhBN,kBAAAA,KACIA,GAAqBV,EAAU,CAAEA,QAAAA,GAAY,CAAA,GACpD,IAEN,IAEGiB,EAAaR,GAAY,IAAMD,GAAc,IAAQ,CAACA,IAE5DF,OAAAA,GAAU,YACKY,OAAW,KACXA,OAAAC,iBAAiB,eAAgBF,GAErC,KACQA,IACJC,OAAAE,oBAAoB,eAAgBH,EAAU,IAE1D,CAACA,IAQG,CACHpB,aAAAA,EACAC,gBAAAA,EACAE,QAAAA,EACAC,WAAAA,EACAC,UAAAA,EACAmB,aAZqDC,IACrDA,EAAEC,iBACYf,IACdL,GAAa,EAAI,EAUrB"}

package/build/es/components/feedback/questions/CheckboxQuestion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"CheckboxQuestion.js","sources":["../../../../../src/components/feedback/questions/CheckboxQuestion.tsx"],"sourcesContent":["import React, { type ChangeEventHandler, useEffect, useRef } from \"react\";\nimport { Checkbox } from \"../../checkbox/Checkbox.js\";\nimport { FieldGroup } from \"../../input-group/FieldGroup.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { FeedbackOption, QuestionProps } from \"../types.js\";\n\nexport const CheckboxQuestion: React.FC<QuestionProps> = ({\n label,\n name,\n options,\n helpLabel,\n autoFocus = false,\n}) => {\n const followupContext = useFollowUpContext();\n const feedbackContext = useMainQuestionContext();\n const context = followupContext \|\| feedbackContext;\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoFocus && ref.current) {\n ref.current.focus();\n }\n }, [autoFocus]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const { value } = event.target;\n const matchingOption = options?.find(\n (option) => option.value.toString() === value,\n );\n if (!matchingOption) return;\n\n if (!context?.currentValue) {\n context?.setCurrentValue([matchingOption]);\n return;\n }\n\n if (Array.isArray(context?.currentValue)) {\n const found = context.currentValue.find(\n (option) => option === matchingOption,\n );\n if (found) {\n context.setCurrentValue((oldValues) =>\n (oldValues as FeedbackOption[]).filter(\n (option) => option !== found,\n ),\n );\n } else {\n context.setCurrentValue((oldValues) => [\n ...(oldValues as FeedbackOption[]),\n matchingOption,\n ]);\n }\n }\n };\n\n if (!context) {\n console.error(\n \"Questions must be used inside a Followup or Feedback context provider\",\n );\n return null;\n }\n\n return (\n <FieldGroup\n labelProps={{ variant: \"large\" }}\n legend={label}\n helpLabel={helpLabel}\n >\n {options?.map((option, i) => (\n <Checkbox\n key={`${label}-${option.value}`}\n name={name \|\| label}\n value={option.value.toString()}\n onChange={handleChange}\n ref={i === 0 ? ref : undefined}\n >\n {option.label}\n </Checkbox>\n ))}\n </FieldGroup>\n );\n};\n"],"names":["CheckboxQuestion","label","name","options","helpLabel","autoFocus","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","ref","useRef","useEffect","current","focus","handleChange","event","value","target","matchingOption","find","option","toString","currentValue","setCurrentValue","Array","isArray","found","oldValues","filter","jsx","FieldGroup","labelProps","variant","legend","children","map","i","Checkbox","onChange","console","error"],"mappings":"8VAOO,MAAMA,EAA4C,EACrDC,MAAAA,EACAC,KAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,UAAAA,GAAY,MAENC,MAAAA,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAMC,EAAyB,MAErCC,GAAU,KACFR,GAAaM,EAAIG,SACjBH,EAAIG,QAAQC,~~UAEjB~~,CAACV,IAEEW,MAAAA,EAAsDC,IAClD,MAAEC,MAAAA,GAAUD,EAAME,OAClBC,EAAiB,MAAAjB,OAAA,EAAAA,EAASkB,MAC3BC,GAAWA,EAAOJ,MAAMK,aAAeL,IAE5C,GAAKE,EAED,CAAA,GAAC,MAAAV,IAAAA,EAASc,aAEV,YADS,MAAAd,GAAAA,EAAAe,gBAAgB,CAACL,KAI9B,GAAIM,MAAMC,QAAQ,MAAAjB,OAAAA,EAAAA,EAASc,cAAe,CAChCI,MAAAA,EAAQlB,EAAQc,aAAaH,MAC9BC,GAAWA,IAAWF,IAEvBQ,EACQlB,EAAAe,iBAAiBI,GACpBA,EAA+BC,QAC3BR,GAAWA,IAAWM,MAIvBlB,EAAAe,iBAAiBI,GAAc,IAC/BA,EACJT,~~IAGZ~~,CAAA,~~GAGJ~~,OAAKV,EAQDqB,EAACC,EAAA,CACGC,WAAY,CAAEC,QAAS,SACvBC,OAAQlC,EACRG,UAAAA,EAECgC,SAAS,MAAAjC,OAAAA,EAAAA,EAAAkC,KAAI,CAACf,EAAQgB,IACnBP,EAACQ,EAAA,CAEGrC,KAAMA,GAAQD,EACdiB,MAAOI,EAAOJ,MAAMK,WACpBiB,SAAUxB,EACVL,IAAW,IAAN2B,EAAU3B,OAAM,EAEpByB,SAAOd,EAAArB,OANH,GAAGA,KAASqB,EAAOJ,cAd5BuB,QAAAC,MACJ,yEAEG,KAAA"}
1	+ {"version":3,"file":"CheckboxQuestion.js","sources":["../../../../../src/components/feedback/questions/CheckboxQuestion.tsx"],"sourcesContent":["import React, { type ChangeEventHandler, useEffect, useRef } from \"react\";\nimport { Checkbox } from \"../../checkbox/Checkbox.js\";\nimport { FieldGroup } from \"../../input-group/FieldGroup.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { FeedbackOption, QuestionProps } from \"../types.js\";\n\nexport const CheckboxQuestion: React.FC<QuestionProps> = ({\n label,\n name,\n options,\n helpLabel,\n autoFocus = false,\n}) => {\n const followupContext = useFollowUpContext();\n const feedbackContext = useMainQuestionContext();\n const context = followupContext \|\| feedbackContext;\n const ref = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (autoFocus && ref.current) {\n ref.current.focus();\n }\n }, [autoFocus]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n const { value } = event.target;\n const matchingOption = options?.find(\n (option) => option.value.toString() === value,\n );\n if (!matchingOption) return;\n\n if (!context?.currentValue) {\n context?.setCurrentValue([matchingOption]);\n return;\n }\n\n if (Array.isArray(context?.currentValue)) {\n const found = context.currentValue.find(\n (option) => option === matchingOption,\n );\n if (found) {\n context.setCurrentValue((oldValues) =>\n (oldValues as FeedbackOption[]).filter(\n (option) => option !== found,\n ),\n );\n } else {\n context.setCurrentValue((oldValues) => [\n ...(oldValues as FeedbackOption[]),\n matchingOption,\n ]);\n }\n }\n };\n\n if (!context) {\n console.error(\n \"Questions must be used inside a Followup or Feedback context provider\",\n );\n return null;\n }\n\n return (\n <FieldGroup\n labelProps={{ variant: \"large\" }}\n legend={label}\n helpLabel={helpLabel}\n >\n {options?.map((option, i) => (\n <Checkbox\n key={`${label}-${option.value}`}\n name={name \|\| label}\n value={option.value.toString()}\n onChange={handleChange}\n ref={i === 0 ? ref : undefined}\n >\n {option.label}\n </Checkbox>\n ))}\n </FieldGroup>\n );\n};\n"],"names":["CheckboxQuestion","label","name","options","helpLabel","autoFocus","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","ref","useRef","useEffect","current","focus","handleChange","event","value","target","matchingOption","find","option","toString","currentValue","setCurrentValue","Array","isArray","found","oldValues","filter","jsx","FieldGroup","labelProps","variant","legend","children","map","i","Checkbox","onChange","console","error"],"mappings":"8VAOO,MAAMA,EAA4C,EACrDC,MAAAA,EACAC,KAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,UAAAA,GAAY,MAENC,MAAAA,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAMC,EAAyB,MAErCC,GAAU,KACFR,GAAaM,EAAIG,SACjBH,EAAIG,QAAQC,OAAM,GAEvB,CAACV,IAEEW,MAAAA,EAAsDC,IAClD,MAAEC,MAAAA,GAAUD,EAAME,OAClBC,EAAiB,MAAAjB,OAAA,EAAAA,EAASkB,MAC3BC,GAAWA,EAAOJ,MAAMK,aAAeL,IAE5C,GAAKE,EAED,CAAA,GAAC,MAAAV,IAAAA,EAASc,aAEV,YADS,MAAAd,GAAAA,EAAAe,gBAAgB,CAACL,KAI9B,GAAIM,MAAMC,QAAQ,MAAAjB,OAAAA,EAAAA,EAASc,cAAe,CAChCI,MAAAA,EAAQlB,EAAQc,aAAaH,MAC9BC,GAAWA,IAAWF,IAEvBQ,EACQlB,EAAAe,iBAAiBI,GACpBA,EAA+BC,QAC3BR,GAAWA,IAAWM,MAIvBlB,EAAAe,iBAAiBI,GAAc,IAC/BA,EACJT,IAER,CAAA,GAIR,OAAKV,EAQDqB,EAACC,EAAA,CACGC,WAAY,CAAEC,QAAS,SACvBC,OAAQlC,EACRG,UAAAA,EAECgC,SAAS,MAAAjC,OAAAA,EAAAA,EAAAkC,KAAI,CAACf,EAAQgB,IACnBP,EAACQ,EAAA,CAEGrC,KAAMA,GAAQD,EACdiB,MAAOI,EAAOJ,MAAMK,WACpBiB,SAAUxB,EACVL,IAAW,IAAN2B,EAAU3B,OAAM,EAEpByB,SAAOd,EAAArB,OANH,GAAGA,KAASqB,EAAOJ,cAd5BuB,QAAAC,MACJ,yEAEG,KAAA"}

package/build/es/components/feedback/questions/ContactQuestion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ContactQuestion.js","sources":["../../../../../src/components/feedback/questions/ContactQuestion.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n type FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { isValidEpost } from \"../../../utilities/validators/isValidEpost/isValidEpost.js\";\nimport { isValidTelefonnummer } from \"../../../utilities/validators/isValidTelefonnummer/isValidTelefonnummer.js\";\nimport { PrimaryButton, TertiaryButton } from \"../../button/Button.js\";\nimport { TextInput } from \"../../text-input/TextInput.js\";\nimport { FeedbackSuccess } from \"../FeedbackSuccess.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport type { ContactQuestionProps } from \"../types.js\";\n\nconst validateEmail = (email?: string) => {\n if (!email \|\| email === \"\") {\n return \"Du må oppgi e-postadresse for at vi kan kontakte deg\";\n }\n if (!isValidEpost(email)) {\n return \"Skriv inn en gyldig e-postadresse\";\n }\n return;\n};\n\nconst validatePhone = (phone?: string) => {\n if (!phone \|\| phone === \"\") {\n return \"Du må oppgi telefonnummer for at vi kan kontakte deg\";\n }\n if (!isValidTelefonnummer(phone)) {\n return \"Skriv inn et gyldig telefonnummer\";\n }\n return;\n};\n\nconst defaultSuccessMessage = {\n title: \"Takk for tiden din!\",\n children:\n \"Neste gang vi gjennomfører intervjuer og tester kan det hende vi tar kontakt med deg. Dine innspill hjelper oss med å gjøre nettsidene bedre for deg og alle andre som bruker dem.\",\n};\n\nexport const ContactQuestion: FC<ContactQuestionProps> = ({\n label = \"Kan vi kontakte deg for flere innspill?\",\n sendButtonLabel = \"Sett meg på lista!\",\n withPhone = false,\n onSubmit,\n successMessage = defaultSuccessMessage,\n children,\n}) => {\n const [email, setEmail] = useState(\"\");\n const [phone, setPhone] = useState(\"\");\n const [errors, setErrors] = useState<{ email?: string; phone?: string }>(\n {},\n );\n const emailRef = useRef<HTMLInputElement>(null);\n const phoneRef = useRef<HTMLInputElement>(null);\n const [shouldValidate, setShouldValidate] = useState(false);\n\n const [noThanks, setNoThanks] = useState(false);\n const { contactSubmitted, setContactSubmitted, landmarkLabel } =\n useFeedbackContext();\n\n const ChildrenWrapper = typeof children === \"string\" ? \"p\" : \"div\";\n\n const validate = useCallback((email: string, phone: string) => {\n const emailError = validateEmail(email);\n const phoneError = validatePhone(phone);\n setErrors({ email: emailError, phone: phoneError });\n return { emailError, phoneError };\n }, []);\n\n useEffect(() => {\n if (shouldValidate) {\n const { emailError, phoneError } = validate(email, phone);\n\n if (!emailError && (!withPhone \|\| !phoneError)) {\n setShouldValidate(false);\n }\n }\n }, [email, phone, shouldValidate, withPhone, validate]);\n\n const handleChange =\n (consumer: (value: string) => void) =>\n (e: ChangeEvent<HTMLInputElement>) =>\n consumer(e.target.value);\n\n const handleSubmit: React.FormEventHandler = (e) => {\n e.preventDefault();\n\n const { emailError, phoneError } = validate(email, phone);\n if (emailError) {\n setShouldValidate(true);\n emailRef.current?.focus();\n return;\n }\n if (withPhone && phoneError) {\n setShouldValidate(true);\n phoneRef.current?.focus();\n return;\n }\n\n onSubmit({ email, phone: withPhone ? phone : undefined });\n setContactSubmitted(true);\n };\n\n if (noThanks) {\n return null;\n }\n\n if (contactSubmitted) {\n return <FeedbackSuccess {...successMessage} />;\n }\n\n return (\n <form\n className=\"jkl-spacing-xl--top\"\n onSubmit={handleSubmit}\n aria-label={landmarkLabel}\n >\n <p className=\"jkl-heading-4 jkl-spacing-xs--bottom\">{label}</p>\n {children && (\n <ChildrenWrapper className=\"jkl-body\">\n {children}\n </ChildrenWrapper>\n )}\n\n <TextInput\n ref={emailRef}\n className=\"jkl-spacing-l--top\"\n label=\"E-post\"\n labelProps={{ variant: \"small\" }}\n autoComplete=\"email\"\n name=\"email\"\n value={email}\n onChange={handleChange(setEmail)}\n errorLabel={errors.email}\n />\n {withPhone && (\n <TextInput\n ref={phoneRef}\n className=\"jkl-spacing-l--top\"\n label=\"Telefonnummer\"\n labelProps={{ variant: \"small\" }}\n autoComplete=\"tel\"\n name=\"phone\"\n value={phone}\n onChange={handleChange(setPhone)}\n errorLabel={errors.phone}\n />\n )}\n\n <div className=\"jkl-spacing-xl--top\">\n <PrimaryButton type=\"submit\" className=\"jkl-spacing-xl--right\">\n {sendButtonLabel}\n </PrimaryButton>\n <TertiaryButton onClick={() => setNoThanks(true)}>\n Nei takk\n </TertiaryButton>\n </div>\n </form>\n );\n};\n"],"names":["defaultSuccessMessage","title","children","ContactQuestion","label","sendButtonLabel","withPhone","onSubmit","successMessage","email","setEmail","useState","phone","setPhone","errors","setErrors","emailRef","useRef","phoneRef","shouldValidate","setShouldValidate","noThanks","setNoThanks","contactSubmitted","setContactSubmitted","landmarkLabel","useFeedbackContext","ChildrenWrapper","validate","useCallback","emailError","isValidEpost","validateEmail","phoneError","isValidTelefonnummer","validatePhone","useEffect","handleChange","consumer","e","target","value","jsx","FeedbackSuccess","jsxs","className","preventDefault","_a","current","focus","_b","TextInput","ref","labelProps","variant","autoComplete","name","onChange","errorLabel","PrimaryButton","type","TertiaryButton","onClick"],"mappings":"mkBAgBA,MAoBMA,EAAwB,CAC1BC,MAAO,sBACPC,SACI,sLAGKC,EAA4C,EACrDC,MAAAA,EAAQ,0CACRC,gBAAAA,EAAkB,qBAClBC,UAAAA,GAAY,EACZC,SAAAA,EACAC,eAAAA,EAAiBR,EACjBE,SAAAA,MAEA,MAAOO,EAAOC,GAAYC,EAAS,KAC5BC,EAAOC,GAAYF,EAAS,KAC5BG,EAAQC,GAAaJ,EACxB,~~CAAC~~,~~GAECK~~,EAAWC,EAAyB,MACpCC,EAAWD,EAAyB,OACnCE,EAAgBC,GAAqBT,GAAS,IAE9CU,EAAUC,GAAeX,GAAS,IACjCY,iBAAAA,EAAkBC,oBAAAA,EAAqBC,cAAAA,GAC3CC,IAEEC,EAAsC,iBAAbzB,EAAwB,IAAM,MAEvD0B,EAAWC,GAAY,CAACpB,EAAeG,KACnC,MAAAkB,EAlDQ,CAACrB,GACdA,GAAmB,KAAVA,EAGTsB,EAAatB,QAAd,EACO,oCAHA,uDAgDYuB,CAAcvB,GAC3BwB,EAzCQ,CAACrB,GACdA,GAAmB,KAAVA,EAGTsB,EAAqBtB,QAAtB,EACO,oCAHA,uDAuCYuB,CAAcvB,GACjC,OAAAG,EAAU,CAAEN,MAAOqB,EAAYlB,MAAOqB,IAC/B,CAAEH,WAAAA,EAAYG,WAAAA,~~KACtB~~,IAEHG,GAAU,KACN,GAAIjB,EAAgB,CACV,MAAEW,WAAAA,EAAYG,WAAAA,GAAeL,EAASnB,EAAOG,IAE9CkB,KAAgBxB,IAAc2B,IAC/Bb,GAAkB,~~EAE1B~~,~~IACD~~,CAACX,EAAOG,EAAOO,EAAgBb,EAAWsB,IAEvC,MAAAS,EACDC,GACAC,GACGD,EAASC,EAAEC,OAAOC,OAqBtBpB,OAAAA,EACO,KAGPE,EACOmB,EAACC,EAAiB,IAAGnC,IAI5BoC,EAAC,OAAA,CACGC,UAAU,sBACVtC,SA9BsCgC,YAC1CA,EAAEO,iBAEI,MAAEhB,WAAAA,EAAYG,WAAAA,GAAeL,EAASnB,EAAOG,GACnD,OAAIkB,GACAV,GAAkB,QAClB,OAAA2B,EAAA/B,EAASgC,UAATD,EAAkBE,UAGlB3C,GAAa2B,GACbb,GAAkB,QAClB,OAAA8B,EAAAhC,EAAS8B,UAATE,EAAkBD,WAItB1C,EAAS,CAAEE,MAAAA,EAAOG,MAAON,EAAYM,OAAQ,SAC7CY,GAAoB,GAAI,EAepB,aAAYC,EAEZvB,SAAA,CAACwC,EAAA,IAAA,CAAEG,UAAU,uCAAwC3C,SAAME,IAC1DF,GACGwC,EAACf,EAAgB,CAAAkB,UAAU,WACtB3C,SAAAA,IAITwC,EAACS,EAAA,CACGC,IAAKpC,EACL6B,UAAU,qBACVzC,MAAM,SACNiD,WAAY,CAAEC,QAAS,SACvBC,aAAa,QACbC,KAAK,QACLf,MAAOhC,EACPgD,SAAUpB,EAAa3B,GACvBgD,WAAY5C,EAAOL,QAEtBH,GACGoC,EAACS,EAAA,CACGC,IAAKlC,EACL2B,UAAU,qBACVzC,MAAM,gBACNiD,WAAY,CAAEC,QAAS,SACvBC,aAAa,MACbC,KAAK,QACLf,MAAO7B,EACP6C,SAAUpB,EAAaxB,GACvB6C,WAAY5C,EAAOF,QAI3BgC,EAAC,MAAI,CAAAC,UAAU,sBACX3C,SAAA,CAAAwC,EAACiB,EAAc,CAAAC,KAAK,SAASf,UAAU,wBAClC3C,SACLG,MACCwD,EAAe,CAAAC,QAAS,IAAMxC,GAAY,GAAOpB,SAElD,~~kBACJ~~"}
1	+ {"version":3,"file":"ContactQuestion.js","sources":["../../../../../src/components/feedback/questions/ContactQuestion.tsx"],"sourcesContent":["import React, {\n type ChangeEvent,\n type FC,\n useCallback,\n useEffect,\n useRef,\n useState,\n} from \"react\";\nimport { isValidEpost } from \"../../../utilities/validators/isValidEpost/isValidEpost.js\";\nimport { isValidTelefonnummer } from \"../../../utilities/validators/isValidTelefonnummer/isValidTelefonnummer.js\";\nimport { PrimaryButton, TertiaryButton } from \"../../button/Button.js\";\nimport { TextInput } from \"../../text-input/TextInput.js\";\nimport { FeedbackSuccess } from \"../FeedbackSuccess.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport type { ContactQuestionProps } from \"../types.js\";\n\nconst validateEmail = (email?: string) => {\n if (!email \|\| email === \"\") {\n return \"Du må oppgi e-postadresse for at vi kan kontakte deg\";\n }\n if (!isValidEpost(email)) {\n return \"Skriv inn en gyldig e-postadresse\";\n }\n return;\n};\n\nconst validatePhone = (phone?: string) => {\n if (!phone \|\| phone === \"\") {\n return \"Du må oppgi telefonnummer for at vi kan kontakte deg\";\n }\n if (!isValidTelefonnummer(phone)) {\n return \"Skriv inn et gyldig telefonnummer\";\n }\n return;\n};\n\nconst defaultSuccessMessage = {\n title: \"Takk for tiden din!\",\n children:\n \"Neste gang vi gjennomfører intervjuer og tester kan det hende vi tar kontakt med deg. Dine innspill hjelper oss med å gjøre nettsidene bedre for deg og alle andre som bruker dem.\",\n};\n\nexport const ContactQuestion: FC<ContactQuestionProps> = ({\n label = \"Kan vi kontakte deg for flere innspill?\",\n sendButtonLabel = \"Sett meg på lista!\",\n withPhone = false,\n onSubmit,\n successMessage = defaultSuccessMessage,\n children,\n}) => {\n const [email, setEmail] = useState(\"\");\n const [phone, setPhone] = useState(\"\");\n const [errors, setErrors] = useState<{ email?: string; phone?: string }>(\n {},\n );\n const emailRef = useRef<HTMLInputElement>(null);\n const phoneRef = useRef<HTMLInputElement>(null);\n const [shouldValidate, setShouldValidate] = useState(false);\n\n const [noThanks, setNoThanks] = useState(false);\n const { contactSubmitted, setContactSubmitted, landmarkLabel } =\n useFeedbackContext();\n\n const ChildrenWrapper = typeof children === \"string\" ? \"p\" : \"div\";\n\n const validate = useCallback((email: string, phone: string) => {\n const emailError = validateEmail(email);\n const phoneError = validatePhone(phone);\n setErrors({ email: emailError, phone: phoneError });\n return { emailError, phoneError };\n }, []);\n\n useEffect(() => {\n if (shouldValidate) {\n const { emailError, phoneError } = validate(email, phone);\n\n if (!emailError && (!withPhone \|\| !phoneError)) {\n setShouldValidate(false);\n }\n }\n }, [email, phone, shouldValidate, withPhone, validate]);\n\n const handleChange =\n (consumer: (value: string) => void) =>\n (e: ChangeEvent<HTMLInputElement>) =>\n consumer(e.target.value);\n\n const handleSubmit: React.FormEventHandler = (e) => {\n e.preventDefault();\n\n const { emailError, phoneError } = validate(email, phone);\n if (emailError) {\n setShouldValidate(true);\n emailRef.current?.focus();\n return;\n }\n if (withPhone && phoneError) {\n setShouldValidate(true);\n phoneRef.current?.focus();\n return;\n }\n\n onSubmit({ email, phone: withPhone ? phone : undefined });\n setContactSubmitted(true);\n };\n\n if (noThanks) {\n return null;\n }\n\n if (contactSubmitted) {\n return <FeedbackSuccess {...successMessage} />;\n }\n\n return (\n <form\n className=\"jkl-spacing-xl--top\"\n onSubmit={handleSubmit}\n aria-label={landmarkLabel}\n >\n <p className=\"jkl-heading-4 jkl-spacing-xs--bottom\">{label}</p>\n {children && (\n <ChildrenWrapper className=\"jkl-body\">\n {children}\n </ChildrenWrapper>\n )}\n\n <TextInput\n ref={emailRef}\n className=\"jkl-spacing-l--top\"\n label=\"E-post\"\n labelProps={{ variant: \"small\" }}\n autoComplete=\"email\"\n name=\"email\"\n value={email}\n onChange={handleChange(setEmail)}\n errorLabel={errors.email}\n />\n {withPhone && (\n <TextInput\n ref={phoneRef}\n className=\"jkl-spacing-l--top\"\n label=\"Telefonnummer\"\n labelProps={{ variant: \"small\" }}\n autoComplete=\"tel\"\n name=\"phone\"\n value={phone}\n onChange={handleChange(setPhone)}\n errorLabel={errors.phone}\n />\n )}\n\n <div className=\"jkl-spacing-xl--top\">\n <PrimaryButton type=\"submit\" className=\"jkl-spacing-xl--right\">\n {sendButtonLabel}\n </PrimaryButton>\n <TertiaryButton onClick={() => setNoThanks(true)}>\n Nei takk\n </TertiaryButton>\n </div>\n </form>\n );\n};\n"],"names":["defaultSuccessMessage","title","children","ContactQuestion","label","sendButtonLabel","withPhone","onSubmit","successMessage","email","setEmail","useState","phone","setPhone","errors","setErrors","emailRef","useRef","phoneRef","shouldValidate","setShouldValidate","noThanks","setNoThanks","contactSubmitted","setContactSubmitted","landmarkLabel","useFeedbackContext","ChildrenWrapper","validate","useCallback","emailError","isValidEpost","validateEmail","phoneError","isValidTelefonnummer","validatePhone","useEffect","handleChange","consumer","e","target","value","jsx","FeedbackSuccess","jsxs","className","preventDefault","_a","current","focus","_b","TextInput","ref","labelProps","variant","autoComplete","name","onChange","errorLabel","PrimaryButton","type","TertiaryButton","onClick"],"mappings":"mkBAgBA,MAoBMA,EAAwB,CAC1BC,MAAO,sBACPC,SACI,sLAGKC,EAA4C,EACrDC,MAAAA,EAAQ,0CACRC,gBAAAA,EAAkB,qBAClBC,UAAAA,GAAY,EACZC,SAAAA,EACAC,eAAAA,EAAiBR,EACjBE,SAAAA,MAEA,MAAOO,EAAOC,GAAYC,EAAS,KAC5BC,EAAOC,GAAYF,EAAS,KAC5BG,EAAQC,GAAaJ,EACxB,CAAA,GAEEK,EAAWC,EAAyB,MACpCC,EAAWD,EAAyB,OACnCE,EAAgBC,GAAqBT,GAAS,IAE9CU,EAAUC,GAAeX,GAAS,IACjCY,iBAAAA,EAAkBC,oBAAAA,EAAqBC,cAAAA,GAC3CC,IAEEC,EAAsC,iBAAbzB,EAAwB,IAAM,MAEvD0B,EAAWC,GAAY,CAACpB,EAAeG,KACnC,MAAAkB,EAlDQ,CAACrB,GACdA,GAAmB,KAAVA,EAGTsB,EAAatB,QAAd,EACO,oCAHA,uDAgDYuB,CAAcvB,GAC3BwB,EAzCQ,CAACrB,GACdA,GAAmB,KAAVA,EAGTsB,EAAqBtB,QAAtB,EACO,oCAHA,uDAuCYuB,CAAcvB,GACjC,OAAAG,EAAU,CAAEN,MAAOqB,EAAYlB,MAAOqB,IAC/B,CAAEH,WAAAA,EAAYG,WAAAA,EAAW,GACjC,IAEHG,GAAU,KACN,GAAIjB,EAAgB,CACV,MAAEW,WAAAA,EAAYG,WAAAA,GAAeL,EAASnB,EAAOG,IAE9CkB,KAAgBxB,IAAc2B,IAC/Bb,GAAkB,EACtB,IAEL,CAACX,EAAOG,EAAOO,EAAgBb,EAAWsB,IAEvC,MAAAS,EACDC,GACAC,GACGD,EAASC,EAAEC,OAAOC,OAqBtBpB,OAAAA,EACO,KAGPE,EACOmB,EAACC,EAAiB,IAAGnC,IAI5BoC,EAAC,OAAA,CACGC,UAAU,sBACVtC,SA9BsCgC,YAC1CA,EAAEO,iBAEI,MAAEhB,WAAAA,EAAYG,WAAAA,GAAeL,EAASnB,EAAOG,GACnD,OAAIkB,GACAV,GAAkB,QAClB,OAAA2B,EAAA/B,EAASgC,UAATD,EAAkBE,UAGlB3C,GAAa2B,GACbb,GAAkB,QAClB,OAAA8B,EAAAhC,EAAS8B,UAATE,EAAkBD,WAItB1C,EAAS,CAAEE,MAAAA,EAAOG,MAAON,EAAYM,OAAQ,SAC7CY,GAAoB,GAAI,EAepB,aAAYC,EAEZvB,SAAA,CAACwC,EAAA,IAAA,CAAEG,UAAU,uCAAwC3C,SAAME,IAC1DF,GACGwC,EAACf,EAAgB,CAAAkB,UAAU,WACtB3C,SAAAA,IAITwC,EAACS,EAAA,CACGC,IAAKpC,EACL6B,UAAU,qBACVzC,MAAM,SACNiD,WAAY,CAAEC,QAAS,SACvBC,aAAa,QACbC,KAAK,QACLf,MAAOhC,EACPgD,SAAUpB,EAAa3B,GACvBgD,WAAY5C,EAAOL,QAEtBH,GACGoC,EAACS,EAAA,CACGC,IAAKlC,EACL2B,UAAU,qBACVzC,MAAM,gBACNiD,WAAY,CAAEC,QAAS,SACvBC,aAAa,MACbC,KAAK,QACLf,MAAO7B,EACP6C,SAAUpB,EAAaxB,GACvB6C,WAAY5C,EAAOF,QAI3BgC,EAAC,MAAI,CAAAC,UAAU,sBACX3C,SAAA,CAAAwC,EAACiB,EAAc,CAAAC,KAAK,SAASf,UAAU,wBAClC3C,SACLG,MACCwD,EAAe,CAAAC,QAAS,IAAMxC,GAAY,GAAOpB,SAElD,kBAER"}

package/build/es/components/feedback/questions/RadioQuestion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioQuestion.js","sources":["../../../../../src/components/feedback/questions/RadioQuestion.tsx"],"sourcesContent":["import React, {\n type ChangeEventHandler,\n useEffect,\n useId,\n useMemo,\n useRef,\n} from \"react\";\nimport { RadioButton } from \"../../radio-button/RadioButton.js\";\nimport { RadioButtonGroup } from \"../../radio-button/RadioButtonGroup.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { QuestionProps } from \"../types.js\";\n\nexport const RadioQuestion: React.FC<QuestionProps> = ({\n label,\n name,\n options,\n helpLabel,\n autoFocus = false,\n}) => {\n const followupContext = useFollowUpContext();\n const feedbackContext = useMainQuestionContext();\n const context = followupContext \|\| feedbackContext;\n const id = useId();\n\n const numOptions = options?.length \|\| 0;\n\n const ref = useRef<HTMLInputElement>(null);\n useEffect(() => {\n if (autoFocus && ref.current) {\n ref.current.focus();\n }\n }, [autoFocus]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n const option = options?.find(\n (option) => option.value.toString() === e.target.value,\n );\n context?.setCurrentValue(option);\n };\n\n const selectedValue = useMemo(\n () =>\n Array.isArray(context?.currentValue)\n ? context?.currentValue[0].value.toString()\n : context?.currentValue?.value.toString(),\n [context?.currentValue],\n );\n\n if (!context) {\n console.error(\n \"Questions must be used inside a Followup or Feedback context provider\",\n );\n return null;\n }\n\n return (\n <RadioButtonGroup\n legend={label}\n labelProps={{ variant: \"large\" }}\n name={`${id}-${name \|\| label}`}\n inline={numOptions < 3}\n value={selectedValue \|\| \"\"}\n onChange={handleChange}\n helpLabel={helpLabel}\n >\n {options?.map((option, i) => (\n <RadioButton\n ref={i === 0 ? ref : undefined}\n key={`${id}-${name \|\| label}-${option.value}`}\n label={option.label}\n value={String(option.value)}\n />\n ))}\n </RadioButtonGroup>\n );\n};\n"],"names":["RadioQuestion","label","name","options","helpLabel","autoFocus","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","id","useId","numOptions","length","ref","useRef","useEffect","current","focus","handleChange","selectedValue","useMemo","Array","isArray","currentValue","value","toString","_a","jsx","RadioButtonGroup","legend","labelProps","variant","inline","onChange","e","option","find","target","setCurrentValue","children","map","i","RadioButton","String","console","error"],"mappings":"6YAaO,MAAMA,EAAyC,EAClDC,MAAAA,EACAC,KAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,UAAAA,GAAY,MAENC,MAAAA,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAKC,IAELC,GAAa,MAAAV,OAAAA,EAAAA,EAASW,SAAU,EAEhCC,EAAMC,EAAyB,MACrCC,GAAU,KACFZ,GAAaU,EAAIG,SACjBH,EAAIG,QAAQC,~~UAEjB~~,CAACd,IAEEe,MAOAC,EAAgBC,GAClB,WACU,OAAAC,MAAAC,QAAQ,MAAAd,OAAAA,EAAAA,EAASe,cACjB,MAAAf,SAAAA,EAASe,aAAa,GAAGC,MAAMC,WAC/B,OAAAC,EAAA,MAAAlB,OAAA,EAAAA,EAASe,mBAAT,EAAAG,EAAuBF,MAAMC,UAAA,GACvC,CAAC,MAAAjB,OAAAA,EAAAA,EAASe,eAGd,OAAKf,EAQDmB,EAACC,EAAA,CACGC,OAAQ9B,EACR+B,WAAY,CAAEC,QAAS,SACvB/B,KAAM,GAAGS,KAAMT,GAAQD,IACvBiC,OAAQrB,EAAa,EACrBa,MAAOL,GAAiB,GACxBc,SA7BoDC,IAClDC,MAAAA,EAAS,MAAAlC,OAAA,EAAAA,EAASmC,MACnBD,GAAWA,EAAOX,MAAMC,aAAeS,EAAEG,OAAOb,QAErD,MAAAhB,GAAAA,EAAS8B,gBAAgBH,EAAAA,EA0BrBjC,UAAAA,EAECqC,SAAS,MAAAtC,OAAAA,EAAAA,EAAAuC,KAAI,CAACL,EAAQM,IACnBd,EAACe,EAAA,CACG7B,IAAW,IAAN4B,EAAU5B,OAAM,EAErBd,MAAOoC,EAAOpC,MACdyB,MAAOmB,OAAOR,EAAOX,QAFhB,GAAGf,KAAMT,GAAQD,KAASoC,EAAOX,cAnB1CoB,QAAAC,MACJ,yEAEG,KAAA"}
1	+ {"version":3,"file":"RadioQuestion.js","sources":["../../../../../src/components/feedback/questions/RadioQuestion.tsx"],"sourcesContent":["import React, {\n type ChangeEventHandler,\n useEffect,\n useId,\n useMemo,\n useRef,\n} from \"react\";\nimport { RadioButton } from \"../../radio-button/RadioButton.js\";\nimport { RadioButtonGroup } from \"../../radio-button/RadioButtonGroup.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { QuestionProps } from \"../types.js\";\n\nexport const RadioQuestion: React.FC<QuestionProps> = ({\n label,\n name,\n options,\n helpLabel,\n autoFocus = false,\n}) => {\n const followupContext = useFollowUpContext();\n const feedbackContext = useMainQuestionContext();\n const context = followupContext \|\| feedbackContext;\n const id = useId();\n\n const numOptions = options?.length \|\| 0;\n\n const ref = useRef<HTMLInputElement>(null);\n useEffect(() => {\n if (autoFocus && ref.current) {\n ref.current.focus();\n }\n }, [autoFocus]);\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n const option = options?.find(\n (option) => option.value.toString() === e.target.value,\n );\n context?.setCurrentValue(option);\n };\n\n const selectedValue = useMemo(\n () =>\n Array.isArray(context?.currentValue)\n ? context?.currentValue[0].value.toString()\n : context?.currentValue?.value.toString(),\n [context?.currentValue],\n );\n\n if (!context) {\n console.error(\n \"Questions must be used inside a Followup or Feedback context provider\",\n );\n return null;\n }\n\n return (\n <RadioButtonGroup\n legend={label}\n labelProps={{ variant: \"large\" }}\n name={`${id}-${name \|\| label}`}\n inline={numOptions < 3}\n value={selectedValue \|\| \"\"}\n onChange={handleChange}\n helpLabel={helpLabel}\n >\n {options?.map((option, i) => (\n <RadioButton\n ref={i === 0 ? ref : undefined}\n key={`${id}-${name \|\| label}-${option.value}`}\n label={option.label}\n value={String(option.value)}\n />\n ))}\n </RadioButtonGroup>\n );\n};\n"],"names":["RadioQuestion","label","name","options","helpLabel","autoFocus","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","id","useId","numOptions","length","ref","useRef","useEffect","current","focus","handleChange","selectedValue","useMemo","Array","isArray","currentValue","value","toString","_a","jsx","RadioButtonGroup","legend","labelProps","variant","inline","onChange","e","option","find","target","setCurrentValue","children","map","i","RadioButton","String","console","error"],"mappings":"6YAaO,MAAMA,EAAyC,EAClDC,MAAAA,EACAC,KAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,UAAAA,GAAY,MAENC,MAAAA,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAKC,IAELC,GAAa,MAAAV,OAAAA,EAAAA,EAASW,SAAU,EAEhCC,EAAMC,EAAyB,MACrCC,GAAU,KACFZ,GAAaU,EAAIG,SACjBH,EAAIG,QAAQC,OAAM,GAEvB,CAACd,IAEEe,MAOAC,EAAgBC,GAClB,WACU,OAAAC,MAAAC,QAAQ,MAAAd,OAAAA,EAAAA,EAASe,cACjB,MAAAf,SAAAA,EAASe,aAAa,GAAGC,MAAMC,WAC/B,OAAAC,EAAA,MAAAlB,OAAA,EAAAA,EAASe,mBAAT,EAAAG,EAAuBF,MAAMC,UAAA,GACvC,CAAC,MAAAjB,OAAAA,EAAAA,EAASe,eAGd,OAAKf,EAQDmB,EAACC,EAAA,CACGC,OAAQ9B,EACR+B,WAAY,CAAEC,QAAS,SACvB/B,KAAM,GAAGS,KAAMT,GAAQD,IACvBiC,OAAQrB,EAAa,EACrBa,MAAOL,GAAiB,GACxBc,SA7BoDC,IAClDC,MAAAA,EAAS,MAAAlC,OAAA,EAAAA,EAASmC,MACnBD,GAAWA,EAAOX,MAAMC,aAAeS,EAAEG,OAAOb,QAErD,MAAAhB,GAAAA,EAAS8B,gBAAgBH,EAAAA,EA0BrBjC,UAAAA,EAECqC,SAAS,MAAAtC,OAAAA,EAAAA,EAAAuC,KAAI,CAACL,EAAQM,IACnBd,EAACe,EAAA,CACG7B,IAAW,IAAN4B,EAAU5B,OAAM,EAErBd,MAAOoC,EAAOpC,MACdyB,MAAOmB,OAAOR,EAAOX,QAFhB,GAAGf,KAAMT,GAAQD,KAASoC,EAAOX,cAnB1CoB,QAAAC,MACJ,yEAEG,KAAA"}

package/build/es/components/feedback/questions/SmileyQuestion.js CHANGED Viewed

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useId as a,useMemo as o,Fragment as r}from"react";import{FieldGroup as n}from"../../input-group/FieldGroup.js";import{useFollowUpContext as s}from"../followup/followupContext.js";import{useMainQuestionContext as t}from"../main-question/mainQuestionContext.js";import{getSmiley as u,defaultOptions as i}from"./smileyUtils.js";const m=e=>"number"!=typeof e.value||![1,2,3,4,5].includes(e.value),d=({label:d,name:c="smiley",helpLabel:p,options:v=i})=>{const f=s(),y=t(),b=f||y,h=a(),j=e=>{console.log(e.target.value);const l=null==v?void 0:v.find((l=>l.value.toString()===e.target.value));null==b||b.setCurrentValue(l)},g=o((()=>{var e;return Array.isArray(null==b?void 0:b.currentValue)?null==b?void 0:b.currentValue[0].value:null==(e=null==b?void 0:b.currentValue)?void 0:e.value}),[null==b?void 0:b.currentValue]);return v.some(m)?(console.error("SmileyQuestion må ha tallene 1 til 5 som verdier for alternativene sine"),null):b&&v?e(n,{labelProps:{variant:"large"},legend:d,helpLabel:p,children:e("div",{className:"jkl-feedback-smileys",children:v.map((a=>l(r,{children:[e("input",{className:"jkl-sr-only",id:`${h}-${c}-${a.value}`,name:`${h}-${c}`,type:"radio",value:a.value,onChange:j,checked:g===a.value}),l("label",{className:"jkl-feedback-smiley-option",htmlFor:`${h}-${c}-${a.value}`,children:[e("span",{className:"jkl-sr-only",children:a.label}),u(Number(a.value))]})]},a.value)))})}):(console.error("Questions must be used inside a Followup or Feedback context provider"),null)};export{d as SmileyQuestion};
+import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useId as a,useMemo as o,Fragment as r}from"react";import{FieldGroup as n}from"../../input-group/FieldGroup.js";import{useFollowUpContext as s}from"../followup/followupContext.js";import{useMainQuestionContext as t}from"../main-question/mainQuestionContext.js";import{defaultOptions as u,getSmiley as i}from"./smileyUtils.js";const m=e=>"number"!=typeof e.value||![1,2,3,4,5].includes(e.value),d=({label:d,name:c="smiley",helpLabel:p,options:v=u})=>{const f=s(),y=t(),b=f||y,h=a(),j=e=>{console.log(e.target.value);const l=null==v?void 0:v.find((l=>l.value.toString()===e.target.value));null==b||b.setCurrentValue(l)},g=o((()=>{var e;return Array.isArray(null==b?void 0:b.currentValue)?null==b?void 0:b.currentValue[0].value:null==(e=null==b?void 0:b.currentValue)?void 0:e.value}),[null==b?void 0:b.currentValue]);return v.some(m)?(console.error("SmileyQuestion må ha tallene 1 til 5 som verdier for alternativene sine"),null):b&&v?e(n,{labelProps:{variant:"large"},legend:d,helpLabel:p,children:e("div",{className:"jkl-feedback-smileys",children:v.map((a=>l(r,{children:[e("input",{className:"jkl-sr-only",id:`${h}-${c}-${a.value}`,name:`${h}-${c}`,type:"radio",value:a.value,onChange:j,checked:g===a.value}),l("label",{className:"jkl-feedback-smiley-option",htmlFor:`${h}-${c}-${a.value}`,children:[e("span",{className:"jkl-sr-only",children:a.label}),i(Number(a.value))]})]},a.value)))})}):(console.error("Questions must be used inside a Followup or Feedback context provider"),null)};export{d as SmileyQuestion};
 //# sourceMappingURL=SmileyQuestion.js.map

package/build/es/components/feedback/questions/SmileyQuestion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"SmileyQuestion.js","sources":["../../../../../src/components/feedback/questions/SmileyQuestion.tsx"],"sourcesContent":["import React, {\n type ChangeEventHandler,\n Fragment,\n useId,\n useMemo,\n} from \"react\";\nimport { FieldGroup } from \"../../input-group/FieldGroup.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { FeedbackOption, QuestionProps } from \"../types.js\";\nimport { defaultOptions, getSmiley } from \"./smileyUtils.js\";\n\nconst isNotInScale = (option: FeedbackOption) =>\n typeof option.value !== \"number\" \|\| ![1, 2, 3, 4, 5].includes(option.value);\n\nexport const SmileyQuestion: React.FC<QuestionProps> = ({\n label,\n name = \"smiley\",\n helpLabel,\n options = defaultOptions,\n}) => {\n const followupContext = useFollowUpContext();\n const feedbackContext = useMainQuestionContext();\n const context = followupContext \|\| feedbackContext;\n const id = useId();\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n console.log(e.target.value);\n const option = options?.find(\n (option) => option.value.toString() === e.target.value,\n );\n context?.setCurrentValue(option);\n };\n\n const selectedValue = useMemo(\n () =>\n Array.isArray(context?.currentValue)\n ? context?.currentValue[0].value\n : context?.currentValue?.value,\n [context?.currentValue],\n );\n\n if (options.some(isNotInScale)) {\n console.error(\n \"SmileyQuestion må ha tallene 1 til 5 som verdier for alternativene sine\",\n );\n return null;\n }\n\n if (!context \|\| !options) {\n console.error(\n \"Questions must be used inside a Followup or Feedback context provider\",\n );\n return null;\n }\n\n return (\n <FieldGroup\n labelProps={{ variant: \"large\" }}\n legend={label}\n helpLabel={helpLabel}\n >\n <div className=\"jkl-feedback-smileys\">\n {options.map((option) => (\n <Fragment key={option.value}>\n <input\n className=\"jkl-sr-only\"\n id={`${id}-${name}-${option.value}`}\n name={`${id}-${name}`}\n type=\"radio\"\n value={option.value}\n onChange={handleChange}\n checked={selectedValue === option.value}\n />\n <label\n className=\"jkl-feedback-smiley-option\"\n htmlFor={`${id}-${name}-${option.value}`}\n >\n <span className=\"jkl-sr-only\">{option.label}</span>\n {getSmiley(Number(option.value))}\n </label>\n </Fragment>\n ))}\n </div>\n </FieldGroup>\n );\n};\n"],"names":["isNotInScale","option","value","includes","SmileyQuestion","label","name","helpLabel","options","defaultOptions","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","id","useId","handleChange","e","console","log","target","find","toString","setCurrentValue","selectedValue","useMemo","Array","isArray","currentValue","_a","some","error","jsx","FieldGroup","labelProps","variant","legend","children","className","map","jsxs","Fragment","type","onChange","checked","htmlFor","getSmiley","Number"],"mappings":"8XAYA,MAAMA,EAAgBC,GACM,iBAAjBA,EAAOC,QAAuB,CAAC,EAAG,EAAG,EAAG,EAAG,GAAGC,SAASF,EAAOC,OAE5DE,EAA0C,EACnDC,MAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,QAAAA,EAAUC,MAEV,MAAMC,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAKC,IAELC,EAAsDC,IAChDC,QAAAC,IAAIF,EAAEG,OAAOnB,OACfD,MAAAA,EAAS,MAAAO,OAAA,EAAAA,EAASc,MACnBrB,GAAWA,EAAOC,MAAMqB,aAAeL,EAAEG,OAAOnB,QAErD,MAAAY,GAAAA,EAASU,gBAAgBvB,EAAAA,EAGvBwB,EAAgBC,GAClB,WACI,OAAAC,MAAMC,QAAQ,MAAAd,OAAA,EAAAA,EAASe,cACjB,MAAAf,OAAAA,EAAAA,EAASe,aAAa,GAAG3B,MACzB,OAAA4B,EAAA,MAAAhB,SAAAA,EAASe,qBAATC,EAAuB5B,KAAA,GACjC,CAAC,MAAAY,OAAAA,EAAAA,EAASe,eAGV,OAAArB,EAAQuB,KAAK/B,IACLmB,QAAAa,MACJ,2EAEG,MAGNlB,GAAYN,EAQbyB,EAACC,EAAA,CACGC,WAAY,CAAEC,QAAS,SACvBC,OAAQhC,EACRE,UAAAA,EAEA+B,SAAAL,EAAC,OAAIM,UAAU,uBACVD,WAAQE,KAAKvC,GACVwC,EAACC,EACG,CAAAJ,SAAA,CAAAL,EAAC,QAAA,CACGM,UAAU,cACVxB,GAAI,GAAGA,KAAMT,KAAQL,EAAOC,QAC5BI,KAAM,GAAGS,KAAMT,IACfqC,KAAK,QACLzC,MAAOD,EAAOC,MACd0C,SAAU3B,EACV4B,QAASpB,IAAkBxB,EAAOC,QAEtCuC,EAAC,QAAA,CACGF,UAAU,6BACVO,QAAS,GAAG/B,KAAMT,KAAQL,EAAOC,QAEjCoC,SAAA,CAAAL,EAAC,OAAK,CAAAM,UAAU,cAAeD,SAAArC,EAAOI,QACrC0C,EAAUC,OAAO/C,EAAOC,aAflBD,EAAOC,cAd1BiB,QAAAa,MACJ,yEAEG,~~KA8BH~~"}
1	+ {"version":3,"file":"SmileyQuestion.js","sources":["../../../../../src/components/feedback/questions/SmileyQuestion.tsx"],"sourcesContent":["import React, {\n type ChangeEventHandler,\n Fragment,\n useId,\n useMemo,\n} from \"react\";\nimport { FieldGroup } from \"../../input-group/FieldGroup.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { FeedbackOption, QuestionProps } from \"../types.js\";\nimport { defaultOptions, getSmiley } from \"./smileyUtils.js\";\n\nconst isNotInScale = (option: FeedbackOption) =>\n typeof option.value !== \"number\" \|\| ![1, 2, 3, 4, 5].includes(option.value);\n\nexport const SmileyQuestion: React.FC<QuestionProps> = ({\n label,\n name = \"smiley\",\n helpLabel,\n options = defaultOptions,\n}) => {\n const followupContext = useFollowUpContext();\n const feedbackContext = useMainQuestionContext();\n const context = followupContext \|\| feedbackContext;\n const id = useId();\n\n const handleChange: ChangeEventHandler<HTMLInputElement> = (e) => {\n console.log(e.target.value);\n const option = options?.find(\n (option) => option.value.toString() === e.target.value,\n );\n context?.setCurrentValue(option);\n };\n\n const selectedValue = useMemo(\n () =>\n Array.isArray(context?.currentValue)\n ? context?.currentValue[0].value\n : context?.currentValue?.value,\n [context?.currentValue],\n );\n\n if (options.some(isNotInScale)) {\n console.error(\n \"SmileyQuestion må ha tallene 1 til 5 som verdier for alternativene sine\",\n );\n return null;\n }\n\n if (!context \|\| !options) {\n console.error(\n \"Questions must be used inside a Followup or Feedback context provider\",\n );\n return null;\n }\n\n return (\n <FieldGroup\n labelProps={{ variant: \"large\" }}\n legend={label}\n helpLabel={helpLabel}\n >\n <div className=\"jkl-feedback-smileys\">\n {options.map((option) => (\n <Fragment key={option.value}>\n <input\n className=\"jkl-sr-only\"\n id={`${id}-${name}-${option.value}`}\n name={`${id}-${name}`}\n type=\"radio\"\n value={option.value}\n onChange={handleChange}\n checked={selectedValue === option.value}\n />\n <label\n className=\"jkl-feedback-smiley-option\"\n htmlFor={`${id}-${name}-${option.value}`}\n >\n <span className=\"jkl-sr-only\">{option.label}</span>\n {getSmiley(Number(option.value))}\n </label>\n </Fragment>\n ))}\n </div>\n </FieldGroup>\n );\n};\n"],"names":["isNotInScale","option","value","includes","SmileyQuestion","label","name","helpLabel","options","defaultOptions","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","id","useId","handleChange","e","console","log","target","find","toString","setCurrentValue","selectedValue","useMemo","Array","isArray","currentValue","_a","some","error","jsx","FieldGroup","labelProps","variant","legend","children","className","map","jsxs","Fragment","type","onChange","checked","htmlFor","getSmiley","Number"],"mappings":"8XAYA,MAAMA,EAAgBC,GACM,iBAAjBA,EAAOC,QAAuB,CAAC,EAAG,EAAG,EAAG,EAAG,GAAGC,SAASF,EAAOC,OAE5DE,EAA0C,EACnDC,MAAAA,EACAC,KAAAA,EAAO,SACPC,UAAAA,EACAC,QAAAA,EAAUC,MAEV,MAAMC,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAKC,IAELC,EAAsDC,IAChDC,QAAAC,IAAIF,EAAEG,OAAOnB,OACfD,MAAAA,EAAS,MAAAO,OAAA,EAAAA,EAASc,MACnBrB,GAAWA,EAAOC,MAAMqB,aAAeL,EAAEG,OAAOnB,QAErD,MAAAY,GAAAA,EAASU,gBAAgBvB,EAAAA,EAGvBwB,EAAgBC,GAClB,WACI,OAAAC,MAAMC,QAAQ,MAAAd,OAAA,EAAAA,EAASe,cACjB,MAAAf,OAAAA,EAAAA,EAASe,aAAa,GAAG3B,MACzB,OAAA4B,EAAA,MAAAhB,SAAAA,EAASe,qBAATC,EAAuB5B,KAAA,GACjC,CAAC,MAAAY,OAAAA,EAAAA,EAASe,eAGV,OAAArB,EAAQuB,KAAK/B,IACLmB,QAAAa,MACJ,2EAEG,MAGNlB,GAAYN,EAQbyB,EAACC,EAAA,CACGC,WAAY,CAAEC,QAAS,SACvBC,OAAQhC,EACRE,UAAAA,EAEA+B,SAAAL,EAAC,OAAIM,UAAU,uBACVD,WAAQE,KAAKvC,GACVwC,EAACC,EACG,CAAAJ,SAAA,CAAAL,EAAC,QAAA,CACGM,UAAU,cACVxB,GAAI,GAAGA,KAAMT,KAAQL,EAAOC,QAC5BI,KAAM,GAAGS,KAAMT,IACfqC,KAAK,QACLzC,MAAOD,EAAOC,MACd0C,SAAU3B,EACV4B,QAASpB,IAAkBxB,EAAOC,QAEtCuC,EAAC,QAAA,CACGF,UAAU,6BACVO,QAAS,GAAG/B,KAAMT,KAAQL,EAAOC,QAEjCoC,SAAA,CAAAL,EAAC,OAAK,CAAAM,UAAU,cAAeD,SAAArC,EAAOI,QACrC0C,EAAUC,OAAO/C,EAAOC,aAflBD,EAAOC,cAd1BiB,QAAAa,MACJ,yEAEG,KA+BP"}

package/build/es/components/feedback/questions/TextQuestion.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"TextQuestion.js","sources":["../../../../../src/components/feedback/questions/TextQuestion.tsx"],"sourcesContent":["import React, {\n type ChangeEventHandler,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { TextArea } from \"../../text-area/TextArea.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { FeedbackAnswer, QuestionProps } from \"../types.js\";\n\nexport const TextQuestion: React.FC<QuestionProps> = ({\n label,\n name,\n helpLabel = \"Ikke skriv personlige opplysninger. Tilbakemeldinger som kommer inn her blir ikke besvart, men brukt i videre arbeid med å forbedre tjenestene våre.\",\n autoFocus = false,\n}) => {\n const { counter } = useFeedbackContext();\n const followupContext = useFollowUpContext();\n const feedbackContext = useMainQuestionContext();\n const context = followupContext \|\| feedbackContext;\n const ref = useRef<HTMLTextAreaElement>(null);\n\n useEffect(() => {\n if (autoFocus && ref.current) {\n ref.current.focus();\n }\n }, [autoFocus]);\n\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n const value: FeedbackAnswer = {\n label,\n name: name \|\| label,\n type: \"text\",\n value: e.target.value,\n };\n context?.setCurrentValue(value);\n };\n\n const currentValue = useMemo(\n () =>\n Array.isArray(context?.currentValue)\n ? context?.currentValue[0].value.toString()\n : context?.currentValue?.value.toString(),\n [context?.currentValue],\n );\n\n if (!context) {\n console.error(\n \"Questions must be used inside a Followup or Feedback context provider\",\n );\n return null;\n }\n\n return (\n <TextArea\n ref={ref}\n label={label}\n labelProps={{ variant: \"large\" }}\n name={name \|\| label}\n startOpen\n rows={5}\n value={currentValue}\n onChange={handleChange}\n helpLabel={helpLabel}\n counter={counter}\n />\n );\n};\n"],"names":["TextQuestion","label","name","helpLabel","autoFocus","counter","useFeedbackContext","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","ref","useRef","useEffect","current","focus","handleChange","currentValue","useMemo","Array","isArray","value","toString","_a","jsx","TextArea","labelProps","variant","startOpen","rows","onChange","e","type","target","setCurrentValue","console","error"],"mappings":"0WAYO,MAAMA,EAAwC,EACjDC,MAAAA,EACAC,KAAAA,EACAC,UAAAA,EAAY,uJACZC,UAAAA,GAAY,MAEN,MAAEC,QAAAA,GAAYC,IACdC,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAMC,EAA4B,MAExCC,GAAU,KACFV,GAAaQ,EAAIG,SACjBH,EAAIG,QAAQC,~~UAEjB~~,CAACZ,IAEEa,MAUAC,EAAeC,GACjB,WACU,OAAAC,MAAAC,QAAQ,MAAAV,OAAAA,EAAAA,EAASO,cACjB,MAAAP,SAAAA,EAASO,aAAa,GAAGI,MAAMC,WAC/B,OAAAC,EAAA,MAAAb,OAAA,EAAAA,EAASO,mBAAT,EAAAM,EAAuBF,MAAMC,UAAA,GACvC,CAAC,MAAAZ,OAAAA,EAAAA,EAASO,eAGd,OAAKP,EAQDc,EAACC,EAAA,CACGd,IAAAA,EACAX,MAAAA,EACA0B,WAAY,CAAEC,QAAS,SACvB1B,KAAMA,GAAQD,EACd4B,WAAS,EACTC,KAAM,EACNR,MAAOJ,EACPa,SAlCuDC,IAC3D,MAAMV,EAAwB,CAC1BrB,MAAAA,EACAC,KAAMA,GAAQD,EACdgC,KAAM,OACNX,MAAOU,EAAEE,OAAOZ,OAEpB,MAAAX,GAAAA,EAASwB,gBAAgBb,EAAAA,EA4BrBnB,UAAAA,EACAE,QAAAA,KAjBI+B,QAAAC,MACJ,yEAEG,KAAA"}
1	+ {"version":3,"file":"TextQuestion.js","sources":["../../../../../src/components/feedback/questions/TextQuestion.tsx"],"sourcesContent":["import React, {\n type ChangeEventHandler,\n useEffect,\n useMemo,\n useRef,\n} from \"react\";\nimport { TextArea } from \"../../text-area/TextArea.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport { useFollowUpContext } from \"../followup/followupContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\nimport type { FeedbackAnswer, QuestionProps } from \"../types.js\";\n\nexport const TextQuestion: React.FC<QuestionProps> = ({\n label,\n name,\n helpLabel = \"Ikke skriv personlige opplysninger. Tilbakemeldinger som kommer inn her blir ikke besvart, men brukt i videre arbeid med å forbedre tjenestene våre.\",\n autoFocus = false,\n}) => {\n const { counter } = useFeedbackContext();\n const followupContext = useFollowUpContext();\n const feedbackContext = useMainQuestionContext();\n const context = followupContext \|\| feedbackContext;\n const ref = useRef<HTMLTextAreaElement>(null);\n\n useEffect(() => {\n if (autoFocus && ref.current) {\n ref.current.focus();\n }\n }, [autoFocus]);\n\n const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) => {\n const value: FeedbackAnswer = {\n label,\n name: name \|\| label,\n type: \"text\",\n value: e.target.value,\n };\n context?.setCurrentValue(value);\n };\n\n const currentValue = useMemo(\n () =>\n Array.isArray(context?.currentValue)\n ? context?.currentValue[0].value.toString()\n : context?.currentValue?.value.toString(),\n [context?.currentValue],\n );\n\n if (!context) {\n console.error(\n \"Questions must be used inside a Followup or Feedback context provider\",\n );\n return null;\n }\n\n return (\n <TextArea\n ref={ref}\n label={label}\n labelProps={{ variant: \"large\" }}\n name={name \|\| label}\n startOpen\n rows={5}\n value={currentValue}\n onChange={handleChange}\n helpLabel={helpLabel}\n counter={counter}\n />\n );\n};\n"],"names":["TextQuestion","label","name","helpLabel","autoFocus","counter","useFeedbackContext","followupContext","useFollowUpContext","feedbackContext","useMainQuestionContext","context","ref","useRef","useEffect","current","focus","handleChange","currentValue","useMemo","Array","isArray","value","toString","_a","jsx","TextArea","labelProps","variant","startOpen","rows","onChange","e","type","target","setCurrentValue","console","error"],"mappings":"0WAYO,MAAMA,EAAwC,EACjDC,MAAAA,EACAC,KAAAA,EACAC,UAAAA,EAAY,uJACZC,UAAAA,GAAY,MAEN,MAAEC,QAAAA,GAAYC,IACdC,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAMC,EAA4B,MAExCC,GAAU,KACFV,GAAaQ,EAAIG,SACjBH,EAAIG,QAAQC,OAAM,GAEvB,CAACZ,IAEEa,MAUAC,EAAeC,GACjB,WACU,OAAAC,MAAAC,QAAQ,MAAAV,OAAAA,EAAAA,EAASO,cACjB,MAAAP,SAAAA,EAASO,aAAa,GAAGI,MAAMC,WAC/B,OAAAC,EAAA,MAAAb,OAAA,EAAAA,EAASO,mBAAT,EAAAM,EAAuBF,MAAMC,UAAA,GACvC,CAAC,MAAAZ,OAAAA,EAAAA,EAASO,eAGd,OAAKP,EAQDc,EAACC,EAAA,CACGd,IAAAA,EACAX,MAAAA,EACA0B,WAAY,CAAEC,QAAS,SACvB1B,KAAMA,GAAQD,EACd4B,WAAS,EACTC,KAAM,EACNR,MAAOJ,EACPa,SAlCuDC,IAC3D,MAAMV,EAAwB,CAC1BrB,MAAAA,EACAC,KAAMA,GAAQD,EACdgC,KAAM,OACNX,MAAOU,EAAEE,OAAOZ,OAEpB,MAAAX,GAAAA,EAASwB,gBAAgBb,EAAAA,EA4BrBnB,UAAAA,EACAE,QAAAA,KAjBI+B,QAAAC,MACJ,yEAEG,KAAA"}

package/build/es/components/feedback/questions/smileyUtils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"smileyUtils.js","sources":["../../../../../src/components/feedback/questions/smileyUtils.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { FeedbackOption } from \"../types.js\";\n\nexport const defaultOptions: FeedbackOption<number>[] = [\n {\n label: \"Veldig misfornøyd\",\n value: 1,\n textAreaLabel:\n \"Det var leit! Fortell oss gjerne hva du savner, så kan vi gjøre sidene våre bedre.\",\n },\n {\n label: \"Litt misfornøyd\",\n value: 2,\n textAreaLabel:\n \"Det var leit! Fortell oss gjerne hva du savner, så kan vi gjøre sidene våre bedre.\",\n },\n {\n label: \"Midt på treet\",\n value: 3,\n textAreaLabel:\n \"Fortell oss gjerne hva du savner, så kan vi gjøre sidene våre bedre.\",\n },\n {\n label: \"Ganske fornøyd\",\n value: 4,\n textAreaLabel:\n \"Så bra! Har du noen tilbakemeldinger kan du skrive dem her.\",\n },\n {\n label: \"Veldig fornøyd\",\n value: 5,\n textAreaLabel:\n \"Så bra! Har du noen tilbakemeldinger kan du skrive dem her.\",\n },\n];\n\nconst Smiley: FC<WithChildren> = ({ children }) => (\n <svg\n className=\"jkl-feedback-smiley-option__icon\"\n aria-hidden\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"currentColor\" strokeWidth=\"2\" />\n {children}\n </svg>\n);\n\nconst VeldigSurSmiley = () => (\n <Smiley>\n <path\n d=\"M10 30C10 24.4772 14.4772 20 20 20C25.5228 20 30 24.4772 30 30\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <path d=\"M10 13.9865H16.6667\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <path\n d=\"M23.3333 13.9865H29.9999\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n </Smiley>\n);\n\nconst LittSurSmiley = () => (\n <Smiley>\n <path\n d=\"M10 28.75C10 28.75 13.75 23.3334 20 23.3334C26.25 23.3334 30 28.75 30 28.75\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <circle cx=\"12.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n <circle cx=\"27.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n </Smiley>\n);\n\nconst NoytralSmiley = () => (\n <Smiley>\n <path\n d=\"M9.15283 25.6986H30.8477\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <circle cx=\"12.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n <circle cx=\"27.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n </Smiley>\n);\n\nconst LittGladSmiley = () => (\n <Smiley>\n <path\n d=\"M10 23.3334C10 23.3334 12.9167 30 20 30C27.0833 30 30 23.3334 30 23.3334\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <circle cx=\"12.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n <circle cx=\"27.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n </Smiley>\n);\n\nconst VeldigGladSmiley = () => (\n <Smiley>\n <path\n d=\"M30 21C30 26.5228 25.5228 31 20 31C14.4772 31 10 26.5228 10 21\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <path d=\"M24 14.5H29\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <circle cx=\"12.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n </Smiley>\n);\n\nexport const getSmiley = (value: number) => {\n switch (value) {\n case 1:\n return <VeldigSurSmiley />;\n case 2:\n return <LittSurSmiley />;\n case 3:\n return <NoytralSmiley />;\n case 4:\n return <LittGladSmiley />;\n case 5:\n return <VeldigGladSmiley />;\n\n default:\n return <NoytralSmiley />;\n }\n};\n"],"names":["defaultOptions","label","value","textAreaLabel","Smiley","children","jsxs","className","viewBox","fill","xmlns","jsx","cx","cy","r","stroke","strokeWidth","VeldigSurSmiley","d","LittSurSmiley","NoytralSmiley","LittGladSmiley","VeldigGladSmiley","getSmiley"],"mappings":"gEAIO,MAAMA,EAA2C,CACpD,CACIC,MAAO,oBACPC,MAAO,EACPC,cACI,sFAER,CACIF,MAAO,kBACPC,MAAO,EACPC,cACI,sFAER,CACIF,MAAO,gBACPC,MAAO,EACPC,cACI,wEAER,CACIF,MAAO,iBACPC,MAAO,EACPC,cACI,+DAER,CACIF,MAAO,iBACPC,MAAO,EACPC,cACI,gEAINC,EAA2B,EAAGC,SAAAA,KAChCC,EAAC,MAAA,CACGC,UAAU,mCACV,eAAW,EACXC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BAENL,SAAA,CAACM,EAAA,SAAA,CAAOC,GAAG,KAAKC,GAAG,KAAKC,EAAE,KAAKC,OAAO,eAAeC,YAAY,MAChEX,KAIHY,EAAkB,IACpBX,EAACF,EACG,CAAAC,SAAA,CAAAM,EAAC,OAAA,CACGO,EAAE,iEACFH,OAAO,eACPC,YAAY,QAEf,OAAK,CAAAE,EAAE,sBAAsBH,OAAO,eAAeC,YAAY,MAChEL,EAAC,OAAA,CACGO,EAAE,2BACFH,OAAO,eACPC,YAAY,SAKlBG,EAAgB,IAClBb,EAACF,EACG,CAAAC,SAAA,CAAAM,EAAC,OAAA,CACGO,EAAE,8EACFH,OAAO,eACPC,YAAY,MAEhBL,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,iBACzCE,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,oBAI3CW,EAAgB,IAClBd,EAACF,EACG,CAAAC,SAAA,CAAAM,EAAC,OAAA,CACGO,EAAE,2BACFH,OAAO,eACPC,YAAY,MAEhBL,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,iBACzCE,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,oBAI3CY,EAAiB,IACnBf,EAACF,EACG,CAAAC,SAAA,CAAAM,EAAC,OAAA,CACGO,EAAE,2EACFH,OAAO,eACPC,YAAY,MAEhBL,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,iBACzCE,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,oBAI3Ca,EAAmB,IACrBhB,EAACF,EACG,CAAAC,SAAA,CAAAM,EAAC,OAAA,CACGO,EAAE,iEACFH,OAAO,eACPC,YAAY,QAEf,OAAK,CAAAE,EAAE,cAAcH,OAAO,eAAeC,YAAY,MACxDL,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,oBAIpCc,EAAarB,IACtB,OAAQA,GACJ,KAAK,EACD,SAAQe,EAAgB,~~CAAA~~,~~GAC5B,~~KAAK,EACD,SAAQE,EAAc,~~CAAA~~,~~GAC1B,~~KAAK,EAOL,QACI,SAAQC,EAAc,~~CAAA~~,~~GAN1B,~~KAAK,EACD,SAAQC,EAAe,~~CAAA~~,~~GAC3B,~~KAAK,EACD,SAAQC,EAAiB,~~CAAA,GAIjC~~"}
1	+ {"version":3,"file":"smileyUtils.js","sources":["../../../../../src/components/feedback/questions/smileyUtils.tsx"],"sourcesContent":["import React, { type FC } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { FeedbackOption } from \"../types.js\";\n\nexport const defaultOptions: FeedbackOption<number>[] = [\n {\n label: \"Veldig misfornøyd\",\n value: 1,\n textAreaLabel:\n \"Det var leit! Fortell oss gjerne hva du savner, så kan vi gjøre sidene våre bedre.\",\n },\n {\n label: \"Litt misfornøyd\",\n value: 2,\n textAreaLabel:\n \"Det var leit! Fortell oss gjerne hva du savner, så kan vi gjøre sidene våre bedre.\",\n },\n {\n label: \"Midt på treet\",\n value: 3,\n textAreaLabel:\n \"Fortell oss gjerne hva du savner, så kan vi gjøre sidene våre bedre.\",\n },\n {\n label: \"Ganske fornøyd\",\n value: 4,\n textAreaLabel:\n \"Så bra! Har du noen tilbakemeldinger kan du skrive dem her.\",\n },\n {\n label: \"Veldig fornøyd\",\n value: 5,\n textAreaLabel:\n \"Så bra! Har du noen tilbakemeldinger kan du skrive dem her.\",\n },\n];\n\nconst Smiley: FC<WithChildren> = ({ children }) => (\n <svg\n className=\"jkl-feedback-smiley-option__icon\"\n aria-hidden\n viewBox=\"0 0 40 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <circle cx=\"20\" cy=\"20\" r=\"19\" stroke=\"currentColor\" strokeWidth=\"2\" />\n {children}\n </svg>\n);\n\nconst VeldigSurSmiley = () => (\n <Smiley>\n <path\n d=\"M10 30C10 24.4772 14.4772 20 20 20C25.5228 20 30 24.4772 30 30\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <path d=\"M10 13.9865H16.6667\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <path\n d=\"M23.3333 13.9865H29.9999\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n </Smiley>\n);\n\nconst LittSurSmiley = () => (\n <Smiley>\n <path\n d=\"M10 28.75C10 28.75 13.75 23.3334 20 23.3334C26.25 23.3334 30 28.75 30 28.75\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <circle cx=\"12.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n <circle cx=\"27.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n </Smiley>\n);\n\nconst NoytralSmiley = () => (\n <Smiley>\n <path\n d=\"M9.15283 25.6986H30.8477\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <circle cx=\"12.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n <circle cx=\"27.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n </Smiley>\n);\n\nconst LittGladSmiley = () => (\n <Smiley>\n <path\n d=\"M10 23.3334C10 23.3334 12.9167 30 20 30C27.0833 30 30 23.3334 30 23.3334\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <circle cx=\"12.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n <circle cx=\"27.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n </Smiley>\n);\n\nconst VeldigGladSmiley = () => (\n <Smiley>\n <path\n d=\"M30 21C30 26.5228 25.5228 31 20 31C14.4772 31 10 26.5228 10 21\"\n stroke=\"currentColor\"\n strokeWidth=\"2\"\n />\n <path d=\"M24 14.5H29\" stroke=\"currentColor\" strokeWidth=\"2\" />\n <circle cx=\"12.5\" cy=\"14.5\" r=\"1.5\" fill=\"currentColor\" />\n </Smiley>\n);\n\nexport const getSmiley = (value: number) => {\n switch (value) {\n case 1:\n return <VeldigSurSmiley />;\n case 2:\n return <LittSurSmiley />;\n case 3:\n return <NoytralSmiley />;\n case 4:\n return <LittGladSmiley />;\n case 5:\n return <VeldigGladSmiley />;\n\n default:\n return <NoytralSmiley />;\n }\n};\n"],"names":["defaultOptions","label","value","textAreaLabel","Smiley","children","jsxs","className","viewBox","fill","xmlns","jsx","cx","cy","r","stroke","strokeWidth","VeldigSurSmiley","d","LittSurSmiley","NoytralSmiley","LittGladSmiley","VeldigGladSmiley","getSmiley"],"mappings":"gEAIO,MAAMA,EAA2C,CACpD,CACIC,MAAO,oBACPC,MAAO,EACPC,cACI,sFAER,CACIF,MAAO,kBACPC,MAAO,EACPC,cACI,sFAER,CACIF,MAAO,gBACPC,MAAO,EACPC,cACI,wEAER,CACIF,MAAO,iBACPC,MAAO,EACPC,cACI,+DAER,CACIF,MAAO,iBACPC,MAAO,EACPC,cACI,gEAINC,EAA2B,EAAGC,SAAAA,KAChCC,EAAC,MAAA,CACGC,UAAU,mCACV,eAAW,EACXC,QAAQ,YACRC,KAAK,OACLC,MAAM,6BAENL,SAAA,CAACM,EAAA,SAAA,CAAOC,GAAG,KAAKC,GAAG,KAAKC,EAAE,KAAKC,OAAO,eAAeC,YAAY,MAChEX,KAIHY,EAAkB,IACpBX,EAACF,EACG,CAAAC,SAAA,CAAAM,EAAC,OAAA,CACGO,EAAE,iEACFH,OAAO,eACPC,YAAY,QAEf,OAAK,CAAAE,EAAE,sBAAsBH,OAAO,eAAeC,YAAY,MAChEL,EAAC,OAAA,CACGO,EAAE,2BACFH,OAAO,eACPC,YAAY,SAKlBG,EAAgB,IAClBb,EAACF,EACG,CAAAC,SAAA,CAAAM,EAAC,OAAA,CACGO,EAAE,8EACFH,OAAO,eACPC,YAAY,MAEhBL,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,iBACzCE,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,oBAI3CW,EAAgB,IAClBd,EAACF,EACG,CAAAC,SAAA,CAAAM,EAAC,OAAA,CACGO,EAAE,2BACFH,OAAO,eACPC,YAAY,MAEhBL,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,iBACzCE,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,oBAI3CY,EAAiB,IACnBf,EAACF,EACG,CAAAC,SAAA,CAAAM,EAAC,OAAA,CACGO,EAAE,2EACFH,OAAO,eACPC,YAAY,MAEhBL,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,iBACzCE,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,oBAI3Ca,EAAmB,IACrBhB,EAACF,EACG,CAAAC,SAAA,CAAAM,EAAC,OAAA,CACGO,EAAE,iEACFH,OAAO,eACPC,YAAY,QAEf,OAAK,CAAAE,EAAE,cAAcH,OAAO,eAAeC,YAAY,MACxDL,EAAC,UAAOC,GAAG,OAAOC,GAAG,OAAOC,EAAE,MAAML,KAAK,oBAIpCc,EAAarB,IACtB,OAAQA,GACJ,KAAK,EACD,SAAQe,EAAgB,IAC5B,KAAK,EACD,SAAQE,EAAc,IAC1B,KAAK,EAOL,QACI,SAAQC,EAAc,IAN1B,KAAK,EACD,SAAQC,EAAe,IAC3B,KAAK,EACD,SAAQC,EAAiB,IAGH"}

package/build/es/components/feedback/utils.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"utils.js","sources":["../../../../src/components/feedback/utils.ts"],"sourcesContent":["import React, { type JSXElementConstructor, type FC } from \"react\";\nimport {\n CheckboxQuestion,\n RadioQuestion,\n SmileyQuestion,\n TextQuestion,\n} from \"./questions/index.js\";\nimport type { QuestionProps, QuestionType } from \"./types.js\";\n\nexport function getChildrenOfType<P>(\n ...allowedTypes: Array<string \| JSXElementConstructor<P>>\n) {\n return (\n children: React.ReactNode,\n ):\n \| React.ReactElement<P, string \| React.JSXElementConstructor<unknown>>[]\n \| null\n \| undefined =>\n React.Children.map(children, (child) => {\n if (\n React.isValidElement<P>(child) &&\n allowedTypes.includes(child.type)\n ) {\n return child;\n }\n return undefined;\n });\n}\n\nexport const getQuestionFromType = (type: QuestionType): FC<QuestionProps> => {\n switch (type) {\n case \"radio\":\n return RadioQuestion;\n case \"checkbox\":\n return CheckboxQuestion;\n case \"text\":\n return TextQuestion;\n case \"smiley\":\n return SmileyQuestion;\n\n default:\n return RadioQuestion;\n }\n};\n"],"names":["getChildrenOfType","allowedTypes","children","React","Children","map","child","isValidElement","includes","type","getQuestionFromType","RadioQuestion","CheckboxQuestion","TextQuestion","SmileyQuestion"],"mappings":"mfASO,SAASA,KACTC,GAEH,OACIC,GAKAC,EAAMC,SAASC,IAAIH,GAAWI,IAEtB,GAAAH,EAAMI,eAAkBD,IACxBL,EAAaO,SAASF,EAAMG,MAErBH,OAAAA,CAAAA,GAIvB,CAEa,MAAAI,EAAuBD,IAChC,OAAQA,GACJ,IAAK,QASL,QACWE,OAAAA,EARX,IAAK,WACMC,OAAAA,EACX,IAAK,OACMC,OAAAA,EACX,IAAK,SACMC,OAAAA,~~EAIf~~"}
1	+ {"version":3,"file":"utils.js","sources":["../../../../src/components/feedback/utils.ts"],"sourcesContent":["import React, { type JSXElementConstructor, type FC } from \"react\";\nimport {\n CheckboxQuestion,\n RadioQuestion,\n SmileyQuestion,\n TextQuestion,\n} from \"./questions/index.js\";\nimport type { QuestionProps, QuestionType } from \"./types.js\";\n\nexport function getChildrenOfType<P>(\n ...allowedTypes: Array<string \| JSXElementConstructor<P>>\n) {\n return (\n children: React.ReactNode,\n ):\n \| React.ReactElement<P, string \| React.JSXElementConstructor<unknown>>[]\n \| null\n \| undefined =>\n React.Children.map(children, (child) => {\n if (\n React.isValidElement<P>(child) &&\n allowedTypes.includes(child.type)\n ) {\n return child;\n }\n return undefined;\n });\n}\n\nexport const getQuestionFromType = (type: QuestionType): FC<QuestionProps> => {\n switch (type) {\n case \"radio\":\n return RadioQuestion;\n case \"checkbox\":\n return CheckboxQuestion;\n case \"text\":\n return TextQuestion;\n case \"smiley\":\n return SmileyQuestion;\n\n default:\n return RadioQuestion;\n }\n};\n"],"names":["getChildrenOfType","allowedTypes","children","React","Children","map","child","isValidElement","includes","type","getQuestionFromType","RadioQuestion","CheckboxQuestion","TextQuestion","SmileyQuestion"],"mappings":"mfASO,SAASA,KACTC,GAEH,OACIC,GAKAC,EAAMC,SAASC,IAAIH,GAAWI,IAEtB,GAAAH,EAAMI,eAAkBD,IACxBL,EAAaO,SAASF,EAAMG,MAErBH,OAAAA,CAAAA,GAIvB,CAEa,MAAAI,EAAuBD,IAChC,OAAQA,GACJ,IAAK,QASL,QACWE,OAAAA,EARX,IAAK,WACMC,OAAAA,EACX,IAAK,OACMC,OAAAA,EACX,IAAK,SACMC,OAAAA,EAGA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"File.js","sources":["../../../../src/components/file-input/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ComponentProps,\n type FC,\n type MouseEvent,\n useId,\n} from \"react\";\nimport { IconButton } from \"../../components/icon-button/IconButton.js\";\nimport { SuccessIcon, TrashCanIcon } from \"../../components/icon/index.js\";\nimport { SupportLabel } from \"../../components/input-group/SupportLabel.js\";\nimport { formatBytes } from \"../../utilities/formatters/bytes/formatBytes.js\";\nimport { Thumbnail } from \"./internal/Thumbnail.js\";\nimport { useFileInputContext } from \"./internal/fileInputContext.js\";\nimport type { FileInputFileState } from \"./types.js\";\n\nexport type FileProps = {\n fileName: string;\n fileType: string;\n fileSize: number;\n path?: string;\n file?: File;\n supportLabel?: string;\n supportLabelType?: \"help\" \| \"error\" \| \"warning\" \| \"success\";\n state?: FileInputFileState;\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n const {\n children,\n className,\n fileName,\n fileType,\n fileSize,\n path,\n file,\n supportLabel,\n supportLabelType,\n state,\n onRemove,\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 Component = path ? \"a\" : \"div\";\n\n const hasErrorOrWarning =\n supportLabelType === \"error\" \|\| supportLabelType === \"warning\";\n const hasSuccess = supportLabelType === \"success\";\n\n const renderFeedbackElement = () => {\n if (!hasErrorOrWarning && !hasSuccess) {\n return (\n <SupportLabel\n className=\"jkl-file__support-label jkl-body\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n );\n }\n\n if (hasSuccess)\n return (\n <SuccessIcon\n variant=\"small\"\n aria-label=\"Filen ble lastet opp uten feil\"\n aria-hidden={false}\n />\n );\n\n return null;\n };\n\n const fileComponent = (\n <div id={id} className={clsx(className, \"jkl-file\")} {...rest}>\n <Component\n className={clsx(\"jkl-file__content\", {\n \"jkl-file__content--error\": supportLabelType === \"error\",\n \"jkl-file__content--warning\":\n supportLabelType === \"warning\",\n })}\n href={path}\n target={path ? \"_blank\" : undefined}\n >\n <Thumbnail\n fileName={fileName}\n fileType={fileType}\n file={file}\n path={path}\n state={state}\n >\n {children}\n </Thumbnail>\n <div>\n <p className=\"jkl-file__name\">{fileName}</p>\n <p className=\"jkl-file__description\">\n <span>{formatBytes(fileSize)}</span>\n {renderFeedbackElement()}\n </p>\n {supportLabel && hasErrorOrWarning && (\n <SupportLabel\n className=\"jkl-file__support-label\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n )}\n </div>\n </Component>\n {onRemove && (\n <IconButton\n className=\"jkl-file__delete\"\n onClick={onRemove}\n title={`Fjern ${fileName}`}\n >\n <TrashCanIcon />\n </IconButton>\n )}\n </div>\n );\n\n return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["File","props","children","className","fileName","fileType","fileSize","path","file","supportLabel","supportLabelType","state","onRemove","rest","id","useId","supportId","context","useFileInputContext","Component","hasErrorOrWarning","hasSuccess","fileComponent","jsxs","clsx","href","target","jsx","Thumbnail","formatBytes","SuccessIcon","variant","SupportLabel","label","labelType","IconButton","onClick","title","TrashCanIcon"],"mappings":"o1DA2Ba,MAAAA,EAA+CC,IAClD,MACFC,SAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAK,oBAAoBC,MACzBC,EAAY,GAAGF,YAEfG,EAAUC,IAEVC,EAAYZ,EAAO,IAAM,MAEzBa,EACmB,UAArBV,GAAqD,YAArBA,EAC9BW,EAAkC,YAArBX,EA0BbY,EACDC,EAAA,MAAA,CAAIT,GAAAA,EAAQX,UAAWqB,EAAKrB,EAAW,eAAiBU,EACrDX,SAAA,CAAAqB,EAACJ,EAAA,CACGhB,UAAWqB,EAAK,oBAAqB,CACjC,2BAAiD,UAArBd,EAC5B,6BACyB,YAArBA,IAERe,KAAMlB,EACNmB,OAAQnB,EAAO,cAAW,EAE1BL,SAAA,CAAAyB,EAACC,EAAA,CACGxB,SAAAA,EACAC,SAAAA,EACAG,KAAAA,EACAD,KAAAA,EACAI,MAAAA,EAECT,SAAAA,MAEJ,MACG,CAAAA,SAAA,CAACyB,EAAA,IAAA,CAAExB,UAAU,iBAAkBD,SAASE,IACxCmB,EAAC,IAAE,CAAApB,UAAU,wBACTD,SAAA,CAACyB,EAAA,OAAA,CAAMzB,SAAY2B,EAAAvB,KA9C9Bc,GAAsBC,EAWvBA,EAEIM,EAACG,EAAA,CACGC,QAAQ,QACR,aAAW,iCACX,eAAa,IAIlB,KAlBCJ,EAACK,EAAA,CACG7B,UAAU,mCACVW,GAAIE,EACJiB,MAAOxB,EACPyB,UAAWxB,OA2CVD,GAAgBW,GACbO,EAACK,EAAA,CACG7B,UAAU,0BACVW,GAAIE,EACJiB,MAAOxB,EACPyB,UAAWxB,UAK1BE,GACGe,EAACQ,EAAA,CACGhC,UAAU,mBACViC,QAASxB,EACTyB,MAAO,SAASjC,IAEhBF,WAACoC,EAAa,~~SAMvBrB~~,OAAAA,EAAUU,EAAC,KAAI,CAAAzB,SAAAoB,IAAsBA,CAAAA"}
1	+ {"version":3,"file":"File.js","sources":["../../../../src/components/file-input/File.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type ComponentProps,\n type FC,\n type MouseEvent,\n useId,\n} from \"react\";\nimport { IconButton } from \"../../components/icon-button/IconButton.js\";\nimport { SuccessIcon, TrashCanIcon } from \"../../components/icon/index.js\";\nimport { SupportLabel } from \"../../components/input-group/SupportLabel.js\";\nimport { formatBytes } from \"../../utilities/formatters/bytes/formatBytes.js\";\nimport { Thumbnail } from \"./internal/Thumbnail.js\";\nimport { useFileInputContext } from \"./internal/fileInputContext.js\";\nimport type { FileInputFileState } from \"./types.js\";\n\nexport type FileProps = {\n fileName: string;\n fileType: string;\n fileSize: number;\n path?: string;\n file?: File;\n supportLabel?: string;\n supportLabelType?: \"help\" \| \"error\" \| \"warning\" \| \"success\";\n state?: FileInputFileState;\n onRemove?: (e: MouseEvent<HTMLButtonElement>) => void;\n};\n\nexport const File: FC<FileProps & ComponentProps<\"div\">> = (props) => {\n const {\n children,\n className,\n fileName,\n fileType,\n fileSize,\n path,\n file,\n supportLabel,\n supportLabelType,\n state,\n onRemove,\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 Component = path ? \"a\" : \"div\";\n\n const hasErrorOrWarning =\n supportLabelType === \"error\" \|\| supportLabelType === \"warning\";\n const hasSuccess = supportLabelType === \"success\";\n\n const renderFeedbackElement = () => {\n if (!hasErrorOrWarning && !hasSuccess) {\n return (\n <SupportLabel\n className=\"jkl-file__support-label jkl-body\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n );\n }\n\n if (hasSuccess)\n return (\n <SuccessIcon\n variant=\"small\"\n aria-label=\"Filen ble lastet opp uten feil\"\n aria-hidden={false}\n />\n );\n\n return null;\n };\n\n const fileComponent = (\n <div id={id} className={clsx(className, \"jkl-file\")} {...rest}>\n <Component\n className={clsx(\"jkl-file__content\", {\n \"jkl-file__content--error\": supportLabelType === \"error\",\n \"jkl-file__content--warning\":\n supportLabelType === \"warning\",\n })}\n href={path}\n target={path ? \"_blank\" : undefined}\n >\n <Thumbnail\n fileName={fileName}\n fileType={fileType}\n file={file}\n path={path}\n state={state}\n >\n {children}\n </Thumbnail>\n <div>\n <p className=\"jkl-file__name\">{fileName}</p>\n <p className=\"jkl-file__description\">\n <span>{formatBytes(fileSize)}</span>\n {renderFeedbackElement()}\n </p>\n {supportLabel && hasErrorOrWarning && (\n <SupportLabel\n className=\"jkl-file__support-label\"\n id={supportId}\n label={supportLabel}\n labelType={supportLabelType}\n />\n )}\n </div>\n </Component>\n {onRemove && (\n <IconButton\n className=\"jkl-file__delete\"\n onClick={onRemove}\n title={`Fjern ${fileName}`}\n >\n <TrashCanIcon />\n </IconButton>\n )}\n </div>\n );\n\n return context ? <li>{fileComponent}</li> : fileComponent;\n};\n"],"names":["File","props","children","className","fileName","fileType","fileSize","path","file","supportLabel","supportLabelType","state","onRemove","rest","id","useId","supportId","context","useFileInputContext","Component","hasErrorOrWarning","hasSuccess","fileComponent","jsxs","clsx","href","target","jsx","Thumbnail","formatBytes","SuccessIcon","variant","SupportLabel","label","labelType","IconButton","onClick","title","TrashCanIcon"],"mappings":"o1DA2Ba,MAAAA,EAA+CC,IAClD,MACFC,SAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,KAAAA,EACAC,aAAAA,EACAC,iBAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAK,oBAAoBC,MACzBC,EAAY,GAAGF,YAEfG,EAAUC,IAEVC,EAAYZ,EAAO,IAAM,MAEzBa,EACmB,UAArBV,GAAqD,YAArBA,EAC9BW,EAAkC,YAArBX,EA0BbY,EACDC,EAAA,MAAA,CAAIT,GAAAA,EAAQX,UAAWqB,EAAKrB,EAAW,eAAiBU,EACrDX,SAAA,CAAAqB,EAACJ,EAAA,CACGhB,UAAWqB,EAAK,oBAAqB,CACjC,2BAAiD,UAArBd,EAC5B,6BACyB,YAArBA,IAERe,KAAMlB,EACNmB,OAAQnB,EAAO,cAAW,EAE1BL,SAAA,CAAAyB,EAACC,EAAA,CACGxB,SAAAA,EACAC,SAAAA,EACAG,KAAAA,EACAD,KAAAA,EACAI,MAAAA,EAECT,SAAAA,MAEJ,MACG,CAAAA,SAAA,CAACyB,EAAA,IAAA,CAAExB,UAAU,iBAAkBD,SAASE,IACxCmB,EAAC,IAAE,CAAApB,UAAU,wBACTD,SAAA,CAACyB,EAAA,OAAA,CAAMzB,SAAY2B,EAAAvB,KA9C9Bc,GAAsBC,EAWvBA,EAEIM,EAACG,EAAA,CACGC,QAAQ,QACR,aAAW,iCACX,eAAa,IAIlB,KAlBCJ,EAACK,EAAA,CACG7B,UAAU,mCACVW,GAAIE,EACJiB,MAAOxB,EACPyB,UAAWxB,OA2CVD,GAAgBW,GACbO,EAACK,EAAA,CACG7B,UAAU,0BACVW,GAAIE,EACJiB,MAAOxB,EACPyB,UAAWxB,UAK1BE,GACGe,EAACQ,EAAA,CACGhC,UAAU,mBACViC,QAASxB,EACTyB,MAAO,SAASjC,IAEhBF,WAACoC,EAAa,CAAA,QAMvBrB,OAAAA,EAAUU,EAAC,KAAI,CAAAzB,SAAAoB,IAAsBA,CAAAA"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"FileInput.js","sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId } from \"react\";\nimport { FieldGroup } from \"../../components/input-group/FieldGroup.js\";\nimport type { Density } from \"../../core/types.js\";\nimport type { FieldGroupProps } from \"../input-group/types.js\";\nimport { Dropzone } from \"./internal/Dropzone.js\";\nimport { Input } from \"./internal/Input.js\";\nimport { MaxSize } from \"./internal/MaxSize.js\";\nimport { FileInputContextProvider } from \"./internal/fileInputContext.js\";\nimport type { FileInputFile } from \"./types.js\";\n\nexport interface FileInputProps extends Omit<FieldGroupProps, \"onChange\"> {\n className?: string;\n id?: string;\n density?: Density;\n /*\n En string som begrenser hvilke filtyper som kan velges.\n \n Flere filtyper kan defineres som en kommaseparert liste.\n \n @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept\n /\n accept?: \"image/\" \| \".pdf\" \| \"image/,.pdf\" \| HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n /\n @default true\n */\n multiple?: boolean;\n value: FileInputFile[];\n variant?: \"flexible\" \| \"small\";\n onChange: (\n e:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.DragEvent<HTMLDivElement>,\n files: FileInputFile[],\n ) => void;\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const {\n accept,\n className,\n children,\n id,\n value,\n density,\n multiple = true,\n maxSizeBytes,\n onChange,\n variant,\n ...rest\n } = props;\n\n const hasFiles = value.length > 0;\n\n const maxSizeDescriptionId = useId();\n\n if (variant === \"small\") {\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\n \"jkl-file-input\",\n \"jkl-file-input--small\",\n className,\n {\n \"jkl-file-input--has-files\": hasFiles,\n },\n )}\n data-layout-density={density ? density : \"compact\"}\n {...rest}\n >\n <Dropzone>\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label=\"Legg til fil\"\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n </div>\n </Dropzone>\n <MaxSize id={maxSizeDescriptionId} />\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n </FieldGroup>\n </FileInputContextProvider>\n );\n }\n\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\"jkl-file-input\", className, {\n \"jkl-file-input--has-files\": hasFiles,\n })}\n data-layout-density={density}\n {...rest}\n >\n <Dropzone>\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label={\n multiple && hasFiles\n ? \"Legg til flere filer\"\n : \"Legg til fil\"\n }\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n <MaxSize id={maxSizeDescriptionId} />\n </div>\n </Dropzone>\n </FieldGroup>\n </FileInputContextProvider>\n );\n },\n);\n\nFileInput.displayName = \"FileInput\";\n"],"names":["FileInput","forwardRef","props","ref","accept","className","children","id","value","density","multiple","maxSizeBytes","onChange","variant","rest","hasFiles","length","maxSizeDescriptionId","useId","jsx","FileInputContextProvider","context","files","jsxs","FieldGroup","clsx","Dropzone","Input","label","MaxSize","displayName"],"mappings":"gaAsCO,MAAMA,EAAYC,GACrB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,SAAAA,GAAW,EACXC,aAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,GACHZ,EAEEa,EAAWP,EAAMQ,OAAS,EAE1BC,EAAuBC,IAEzBL,OAEIM,EAACC,EAFO,UAAZP,EAEK,CACGQ,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAiB,EAACC,EAAA,CACGnB,UAAWoB,EACP,iBACA,wBACApB,EACA,CACI,4BAA6BU,IAGrC,sBAAqBN,GAAoB,aACrCK,EAEJR,SAAA,CAAAa,EAACO,EACG,CAAApB,SAAAa,EAAC,MAAI,CAAAd,UAAU,iCACXC,SAAAa,EAACQ,EAAA,CACGpB,GAAAA,EACAqB,MAAM,eACNlB,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,QAI9BE,EAACU,EAAQ,CAAAtB,GAAIU,IACZT,EAAMQ,OAAS,KACX,KAAG,CAAAX,UAAU,wBACTC,SAAAA,QASpB,CACGe,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAa,EAACK,EAAA,CACGnB,UAAWoB,EAAK,iBAAkBpB,EAAW,CACzC,4BAA6BU,IAEjC,sBAAqBN,KACjBK,EAEJR,WAACoB,EACI,CAAApB,SAAA,CAAAE,EAAMQ,OAAS,GACZG,EAAC,KAAG,CAAAd,UAAU,wBACTC,SAAAA,IAGTiB,EAAC,MAAI,CAAAlB,UAAU,iCACXC,SAAA,CAAAa,EAACQ,EAAA,CACGpB,GAAAA,EACAqB,MACIlB,GAAYK,EACN,uBACA,eAEVL,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,IAEtBE,EAACU,EAAQ,CAAAtB,GAAIU,~~aAGzB~~,~~IAMhBjB~~,EAAU8B,YAAc"}
1	+ {"version":3,"file":"FileInput.js","sources":["../../../../src/components/file-input/FileInput.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useId } from \"react\";\nimport { FieldGroup } from \"../../components/input-group/FieldGroup.js\";\nimport type { Density } from \"../../core/types.js\";\nimport type { FieldGroupProps } from \"../input-group/types.js\";\nimport { Dropzone } from \"./internal/Dropzone.js\";\nimport { Input } from \"./internal/Input.js\";\nimport { MaxSize } from \"./internal/MaxSize.js\";\nimport { FileInputContextProvider } from \"./internal/fileInputContext.js\";\nimport type { FileInputFile } from \"./types.js\";\n\nexport interface FileInputProps extends Omit<FieldGroupProps, \"onChange\"> {\n className?: string;\n id?: string;\n density?: Density;\n /*\n En string som begrenser hvilke filtyper som kan velges.\n \n Flere filtyper kan defineres som en kommaseparert liste.\n \n @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept\n /\n accept?: \"image/\" \| \".pdf\" \| \"image/,.pdf\" \| HTMLInputElement[\"accept\"];\n maxSizeBytes?: number;\n /\n @default true\n */\n multiple?: boolean;\n value: FileInputFile[];\n variant?: \"flexible\" \| \"small\";\n onChange: (\n e:\n \| React.ChangeEvent<HTMLInputElement>\n \| React.DragEvent<HTMLDivElement>,\n files: FileInputFile[],\n ) => void;\n}\n\nexport const FileInput = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const {\n accept,\n className,\n children,\n id,\n value,\n density,\n multiple = true,\n maxSizeBytes,\n onChange,\n variant,\n ...rest\n } = props;\n\n const hasFiles = value.length > 0;\n\n const maxSizeDescriptionId = useId();\n\n if (variant === \"small\") {\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\n \"jkl-file-input\",\n \"jkl-file-input--small\",\n className,\n {\n \"jkl-file-input--has-files\": hasFiles,\n },\n )}\n data-layout-density={density ? density : \"compact\"}\n {...rest}\n >\n <Dropzone>\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label=\"Legg til fil\"\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n </div>\n </Dropzone>\n <MaxSize id={maxSizeDescriptionId} />\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n </FieldGroup>\n </FileInputContextProvider>\n );\n }\n\n return (\n <FileInputContextProvider\n context={{ accept, onChange, maxSizeBytes, files: value }}\n >\n <FieldGroup\n className={clsx(\"jkl-file-input\", className, {\n \"jkl-file-input--has-files\": hasFiles,\n })}\n data-layout-density={density}\n {...rest}\n >\n <Dropzone>\n {value.length > 0 && (\n <ul className=\"jkl-file-input__files\">\n {children}\n </ul>\n )}\n <div className=\"jkl-file-input__call-to-action\">\n <Input\n id={id}\n label={\n multiple && hasFiles\n ? \"Legg til flere filer\"\n : \"Legg til fil\"\n }\n multiple={multiple}\n ref={ref}\n aria-describedby={maxSizeDescriptionId}\n />\n <MaxSize id={maxSizeDescriptionId} />\n </div>\n </Dropzone>\n </FieldGroup>\n </FileInputContextProvider>\n );\n },\n);\n\nFileInput.displayName = \"FileInput\";\n"],"names":["FileInput","forwardRef","props","ref","accept","className","children","id","value","density","multiple","maxSizeBytes","onChange","variant","rest","hasFiles","length","maxSizeDescriptionId","useId","jsx","FileInputContextProvider","context","files","jsxs","FieldGroup","clsx","Dropzone","Input","label","MaxSize","displayName"],"mappings":"gaAsCO,MAAMA,EAAYC,GACrB,CAACC,EAAOC,KACE,MACFC,OAAAA,EACAC,UAAAA,EACAC,SAAAA,EACAC,GAAAA,EACAC,MAAAA,EACAC,QAAAA,EACAC,SAAAA,GAAW,EACXC,aAAAA,EACAC,SAAAA,EACAC,QAAAA,KACGC,GACHZ,EAEEa,EAAWP,EAAMQ,OAAS,EAE1BC,EAAuBC,IAEzBL,OAEIM,EAACC,EAFO,UAAZP,EAEK,CACGQ,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAiB,EAACC,EAAA,CACGnB,UAAWoB,EACP,iBACA,wBACApB,EACA,CACI,4BAA6BU,IAGrC,sBAAqBN,GAAoB,aACrCK,EAEJR,SAAA,CAAAa,EAACO,EACG,CAAApB,SAAAa,EAAC,MAAI,CAAAd,UAAU,iCACXC,SAAAa,EAACQ,EAAA,CACGpB,GAAAA,EACAqB,MAAM,eACNlB,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,QAI9BE,EAACU,EAAQ,CAAAtB,GAAIU,IACZT,EAAMQ,OAAS,KACX,KAAG,CAAAX,UAAU,wBACTC,SAAAA,QASpB,CACGe,QAAS,CAAEjB,OAAAA,EAAQQ,SAAAA,EAAUD,aAAAA,EAAcW,MAAOd,GAElDF,SAAAa,EAACK,EAAA,CACGnB,UAAWoB,EAAK,iBAAkBpB,EAAW,CACzC,4BAA6BU,IAEjC,sBAAqBN,KACjBK,EAEJR,WAACoB,EACI,CAAApB,SAAA,CAAAE,EAAMQ,OAAS,GACZG,EAAC,KAAG,CAAAd,UAAU,wBACTC,SAAAA,IAGTiB,EAAC,MAAI,CAAAlB,UAAU,iCACXC,SAAA,CAAAa,EAACQ,EAAA,CACGpB,GAAAA,EACAqB,MACIlB,GAAYK,EACN,uBACA,eAEVL,SAAAA,EACAP,IAAAA,EACA,mBAAkBc,IAEtBE,EAACU,EAAQ,CAAAtB,GAAIU,aAI7B,IAKZjB,EAAU8B,YAAc"}

package/build/es/components/file-input/internal/Dropzone.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Dropzone.js","sources":["../../../../../src/components/file-input/internal/Dropzone.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface DropzoneProps extends WithChildren {}\n\nexport const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(\n (props, ref) => {\n const { children, ...rest } = props;\n const [onDragClassName, setOnDragClassName] = useState<string>(\"\");\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>\n Dropzone must be placed inside a FileInputContextProvider.\n </p>\n );\n }\n const { maxSizeBytes, accept, onChange } = context;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={clsx(\"jkl-file-input__dropzone\", onDragClassName)}\n onDragEnter={(e) => {\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDragOver={(e) => {\n /* Prevent browser from opening file in a new tab */\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDrop={(e) => {\n e.preventDefault();\n setOnDragClassName(\"\");\n\n if (e.dataTransfer.files) {\n onChange(\n e,\n [...e.dataTransfer.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n onDragLeave={(e) => {\n setOnDragClassName(\"\");\n e.preventDefault();\n }}\n >\n {children}\n </div>\n );\n },\n);\n\nDropzone.displayName = \"Dropzone\";\n"],"names":["Dropzone","forwardRef","props","ref","children","rest","onDragClassName","setOnDragClassName","useState","context","useFileInputContext","jsx","maxSizeBytes","accept","onChange","className","clsx","onDragEnter","e","preventDefault","onDragOver","onDrop","dataTransfer","files","map","file","state","validation","validateFile","uploadProgress","onDragLeave","displayName"],"mappings":"uPASO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,KAAaC,GAASH,GACvBI,EAAiBC,GAAsBC,EAAiB,IAEzDC,EAAUC,IAChB,IAAKD,EAEG,OAAAE,EAAC,KAAEP,SAEH,+DAGR,MAAQQ,aAAAA,EAAcC,OAAAA,EAAQC,SAAAA,GAAaL,EAGvC,OAAAE,EAAC,MAAA,IACON,EACJF,IAAAA,EACAY,UAAWC,EAAK,2BAA4BV,GAC5CW,YAAcC,IACVX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBC,WAAaF,IAETX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBE,OAASH,IACLA,EAAEC,iBACFZ,EAAmB,IAEfW,EAAEI,aAAaC,OACfT,EACII,EACA,IAAIA,EAAEI,aAAaC,OAAOC,KACrBC,IAAU,CACPA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EACRH,EACAZ,EACAD,GAEJiB,eAAgB,~~MAExB~~,~~EAIZC~~,YAAcZ,IACVX,EAAmB,IACnBW,EAAEC,gBAAe,EAGpBf,SAAAA,~~GAAA~~,~~IAMjBJ~~,EAAS+B,YAAc"}
1	+ {"version":3,"file":"Dropzone.js","sources":["../../../../../src/components/file-input/internal/Dropzone.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef, useState } from \"react\";\nimport type { WithChildren } from \"../../../core/types.js\";\nimport type { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface DropzoneProps extends WithChildren {}\n\nexport const Dropzone = forwardRef<HTMLDivElement, DropzoneProps>(\n (props, ref) => {\n const { children, ...rest } = props;\n const [onDragClassName, setOnDragClassName] = useState<string>(\"\");\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>\n Dropzone must be placed inside a FileInputContextProvider.\n </p>\n );\n }\n const { maxSizeBytes, accept, onChange } = context;\n\n return (\n <div\n {...rest}\n ref={ref}\n className={clsx(\"jkl-file-input__dropzone\", onDragClassName)}\n onDragEnter={(e) => {\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDragOver={(e) => {\n /* Prevent browser from opening file in a new tab */\n setOnDragClassName(\"jkl-file-input__dropzone--enter\");\n e.preventDefault();\n }}\n onDrop={(e) => {\n e.preventDefault();\n setOnDragClassName(\"\");\n\n if (e.dataTransfer.files) {\n onChange(\n e,\n [...e.dataTransfer.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n onDragLeave={(e) => {\n setOnDragClassName(\"\");\n e.preventDefault();\n }}\n >\n {children}\n </div>\n );\n },\n);\n\nDropzone.displayName = \"Dropzone\";\n"],"names":["Dropzone","forwardRef","props","ref","children","rest","onDragClassName","setOnDragClassName","useState","context","useFileInputContext","jsx","maxSizeBytes","accept","onChange","className","clsx","onDragEnter","e","preventDefault","onDragOver","onDrop","dataTransfer","files","map","file","state","validation","validateFile","uploadProgress","onDragLeave","displayName"],"mappings":"uPASO,MAAMA,EAAWC,GACpB,CAACC,EAAOC,KACJ,MAAQC,SAAAA,KAAaC,GAASH,GACvBI,EAAiBC,GAAsBC,EAAiB,IAEzDC,EAAUC,IAChB,IAAKD,EAEG,OAAAE,EAAC,KAAEP,SAEH,+DAGR,MAAQQ,aAAAA,EAAcC,OAAAA,EAAQC,SAAAA,GAAaL,EAGvC,OAAAE,EAAC,MAAA,IACON,EACJF,IAAAA,EACAY,UAAWC,EAAK,2BAA4BV,GAC5CW,YAAcC,IACVX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBC,WAAaF,IAETX,EAAmB,mCACnBW,EAAEC,gBAAe,EAErBE,OAASH,IACLA,EAAEC,iBACFZ,EAAmB,IAEfW,EAAEI,aAAaC,OACfT,EACII,EACA,IAAIA,EAAEI,aAAaC,OAAOC,KACrBC,IAAU,CACPA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EACRH,EACAZ,EACAD,GAEJiB,eAAgB,MAG5B,EAGRC,YAAcZ,IACVX,EAAmB,IACnBW,EAAEC,gBAAe,EAGpBf,SAAAA,GACL,IAKZJ,EAAS+B,YAAc"}

package/build/es/components/file-input/internal/Input.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Input.js","sources":["../../../../../src/components/file-input/internal/Input.tsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\nimport type { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface FileInputProps {\n id?: string;\n label: string;\n multiple: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const { multiple, id, label, ...rest } = props;\n\n const defaultId = useId();\n\n const maxSizeDescriptionId = `${id}-description`;\n const descriptor = multiple ? \"filer\" : \"fil\";\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>Input must be placed inside a FileInputContextProvider.</p>\n );\n }\n const { accept, maxSizeBytes, onChange } = context;\n\n const elementId = id \|\| defaultId;\n\n return (\n <>\n <label\n className=\"jkl-button jkl-button--secondary\"\n htmlFor={elementId}\n id={`${elementId}__add-btn`}\n >\n {label}\n </label>\n <input\n {...rest}\n ref={ref}\n id={elementId}\n accept={accept}\n aria-describedby={\n maxSizeBytes ? maxSizeDescriptionId : undefined\n }\n className=\"jkl-sr-only\"\n type=\"file\"\n multiple={multiple}\n value=\"\"\n onChange={(e) => {\n if (e.target.files) {\n onChange(\n e,\n [...e.target.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n />\n <p className=\"jkl-file-input__dropzone-hint\">\n eller slipp {descriptor} her\n </p>{\" \"}\n </>\n );\n },\n);\n\nInput.displayName = \"Input\";\n"],"names":["Input","forwardRef","props","ref","multiple","id","label","rest","defaultId","useId","maxSizeDescriptionId","descriptor","context","useFileInputContext","jsx","children","accept","maxSizeBytes","onChange","elementId","jsxs","Fragment","className","htmlFor","type","value","e","target","files","map","file","state","validation","validateFile","uploadProgress","displayName"],"mappings":"2NAWO,MAAMA,EAAQC,GACjB,CAACC,EAAOC,KACE,MAAEC,SAAAA,EAAUC,GAAAA,EAAIC,MAAAA,KAAUC,GAASL,EAEnCM,EAAYC,IAEZC,EAAuB,GAAGL,gBAC1BM,EAAaP,EAAW,QAAU,MAElCQ,EAAUC,IAChB,IAAKD,EAEG,OAAAE,EAAC,KAAEC,SAAuD,4DAG5D,MAAEC,OAAAA,EAAQC,aAAAA,EAAcC,SAAAA,GAAaN,EAErCO,EAAYd,GAAMG,EAExB,OAEQY,EAAAC,EAAA,CAAAN,SAAA,CAAAD,EAAC,QAAA,CACGQ,UAAU,mCACVC,QAASJ,EACTd,GAAI,GAAGc,aAENJ,SAAAT,IAELQ,EAAC,QAAA,IACOP,EACJJ,IAAAA,EACAE,GAAIc,EACJH,OAAAA,EACA,mBACIC,EAAeP,OAAuB,EAE1CY,UAAU,cACVE,KAAK,OACLpB,SAAAA,EACAqB,MAAM,GACNP,SAAWQ,IACHA,EAAEC,OAAOC,OACTV,EACIQ,EACA,IAAIA,EAAEC,OAAOC,OAAOC,KACfC,IAAU,CACPA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EACRH,EACAd,EACAC,GAEJiB,eAAgB,~~MAExB~~,~~IAKhBd~~,EAAC,IAAE,CAAAE,UAAU,gCAAgCP,SAAA,CAAA,eAC5BJ,EAAW,UACvB,MACT,IAKZX,EAAMmC,YAAc"}
1	+ {"version":3,"file":"Input.js","sources":["../../../../../src/components/file-input/internal/Input.tsx"],"sourcesContent":["import React, { forwardRef, useId } from \"react\";\nimport type { FileInputFile } from \"../types.js\";\nimport { useFileInputContext } from \"./fileInputContext.js\";\nimport { validateFile } from \"./validateFile.js\";\n\ninterface FileInputProps {\n id?: string;\n label: string;\n multiple: boolean;\n}\n\nexport const Input = forwardRef<HTMLInputElement, FileInputProps>(\n (props, ref) => {\n const { multiple, id, label, ...rest } = props;\n\n const defaultId = useId();\n\n const maxSizeDescriptionId = `${id}-description`;\n const descriptor = multiple ? \"filer\" : \"fil\";\n\n const context = useFileInputContext();\n if (!context) {\n return (\n <p>Input must be placed inside a FileInputContextProvider.</p>\n );\n }\n const { accept, maxSizeBytes, onChange } = context;\n\n const elementId = id \|\| defaultId;\n\n return (\n <>\n <label\n className=\"jkl-button jkl-button--secondary\"\n htmlFor={elementId}\n id={`${elementId}__add-btn`}\n >\n {label}\n </label>\n <input\n {...rest}\n ref={ref}\n id={elementId}\n accept={accept}\n aria-describedby={\n maxSizeBytes ? maxSizeDescriptionId : undefined\n }\n className=\"jkl-sr-only\"\n type=\"file\"\n multiple={multiple}\n value=\"\"\n onChange={(e) => {\n if (e.target.files) {\n onChange(\n e,\n [...e.target.files].map<FileInputFile>(\n (file) => ({\n file,\n state: \"SELECTED\",\n validation: validateFile(\n file,\n accept,\n maxSizeBytes,\n ),\n uploadProgress: 0,\n }),\n ),\n );\n }\n }}\n />\n <p className=\"jkl-file-input__dropzone-hint\">\n eller slipp {descriptor} her\n </p>{\" \"}\n </>\n );\n },\n);\n\nInput.displayName = \"Input\";\n"],"names":["Input","forwardRef","props","ref","multiple","id","label","rest","defaultId","useId","maxSizeDescriptionId","descriptor","context","useFileInputContext","jsx","children","accept","maxSizeBytes","onChange","elementId","jsxs","Fragment","className","htmlFor","type","value","e","target","files","map","file","state","validation","validateFile","uploadProgress","displayName"],"mappings":"2NAWO,MAAMA,EAAQC,GACjB,CAACC,EAAOC,KACE,MAAEC,SAAAA,EAAUC,GAAAA,EAAIC,MAAAA,KAAUC,GAASL,EAEnCM,EAAYC,IAEZC,EAAuB,GAAGL,gBAC1BM,EAAaP,EAAW,QAAU,MAElCQ,EAAUC,IAChB,IAAKD,EAEG,OAAAE,EAAC,KAAEC,SAAuD,4DAG5D,MAAEC,OAAAA,EAAQC,aAAAA,EAAcC,SAAAA,GAAaN,EAErCO,EAAYd,GAAMG,EAExB,OAEQY,EAAAC,EAAA,CAAAN,SAAA,CAAAD,EAAC,QAAA,CACGQ,UAAU,mCACVC,QAASJ,EACTd,GAAI,GAAGc,aAENJ,SAAAT,IAELQ,EAAC,QAAA,IACOP,EACJJ,IAAAA,EACAE,GAAIc,EACJH,OAAAA,EACA,mBACIC,EAAeP,OAAuB,EAE1CY,UAAU,cACVE,KAAK,OACLpB,SAAAA,EACAqB,MAAM,GACNP,SAAWQ,IACHA,EAAEC,OAAOC,OACTV,EACIQ,EACA,IAAIA,EAAEC,OAAOC,OAAOC,KACfC,IAAU,CACPA,KAAAA,EACAC,MAAO,WACPC,WAAYC,EACRH,EACAd,EACAC,GAEJiB,eAAgB,MAG5B,IAIZd,EAAC,IAAE,CAAAE,UAAU,gCAAgCP,SAAA,CAAA,eAC5BJ,EAAW,UACvB,MACT,IAKZX,EAAMmC,YAAc"}

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

	@@ -1 +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, {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"}
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, {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,IAmBzB,MAIZV,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,GAAA,GACT,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/flex/Flex.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Flex.js","sources":["../../../../src/components/flex/Flex.tsx"],"sourcesContent":["import React, { type CSSProperties } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { SlotComponent } from \"../../utilities/polymorphism/SlotComponent.js\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { FlexComponent, FlexProps } from \"./types.js\";\n\nexport const Flex = React.forwardRef(function Flex<\n ElementType extends React.ElementType = \"div\",\n>(props: FlexProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n asChild,\n as = \"div\",\n alignContent,\n alignItems,\n children,\n colGap,\n direction,\n gap,\n justifyContent,\n justifyItems,\n rowGap,\n wrap = false,\n ...rest\n } = props;\n const Component = asChild ? SlotComponent : as;\n\n const flexStyle: CSSProperties = {\n display: \"flex\",\n flexDirection: direction,\n alignContent,\n alignItems,\n justifyContent,\n justifyItems,\n ...(wrap ? { flexWrap: \"wrap\" } : {}),\n ...(gap ? { gap: tokens.spacing[gap] } : {}),\n ...(colGap ? { columnGap: tokens.spacing[colGap] } : {}),\n ...(rowGap ? { rowGap: tokens.spacing[rowGap] } : {}),\n };\n\n return (\n <Component ref={ref} {...rest} style={{ ...flexStyle, ...rest.style }}>\n {children}\n </Component>\n );\n}) as FlexComponent;\n"],"names":["Flex","React","forwardRef","props","ref","asChild","as","alignContent","alignItems","children","colGap","direction","gap","justifyContent","justifyItems","rowGap","wrap","rest","Component","SlotComponent","flexStyle","display","flexDirection","flexWrap","tokens","spacing","columnGap","jsx","style"],"mappings":"+KAMO,MAAMA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,QAAAA,EACAC,GAAAA,EAAK,MACLC,aAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,IAAAA,EACAC,eAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,GAAO,KACJC,GACHd,EACEe,EAAYb,EAAUc,EAAgBb,EAEtCc,EAA2B,CAC7BC,QAAS,OACTC,cAAeX,EACfJ,aAAAA,EACAC,WAAAA,EACAK,eAAAA,EACAC,aAAAA,KACIE,EAAO,CAAEO,SAAU,QAAW,CAAC,KAC/BX,EAAM,CAAEA,IAAKY,EAAOC,QAAQb,IAAS,CAAC,KACtCF,EAAS,CAAEgB,UAAWF,EAAOC,QAAQf,IAAY,CAAC,KAClDK,EAAS,CAAEA,OAAQS,EAAOC,QAAQV,IAAY,~~CAAC~~,~~GAGvD~~,OACKY,EAAAT,EAAA,CAAUd,IAAAA,KAAca,EAAMW,MAAO,IAAKR,KAAcH,EAAKW,OACzDnB,SAAAA,GAGb"}
1	+ {"version":3,"file":"Flex.js","sources":["../../../../src/components/flex/Flex.tsx"],"sourcesContent":["import React, { type CSSProperties } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { SlotComponent } from \"../../utilities/polymorphism/SlotComponent.js\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport type { FlexComponent, FlexProps } from \"./types.js\";\n\nexport const Flex = React.forwardRef(function Flex<\n ElementType extends React.ElementType = \"div\",\n>(props: FlexProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n asChild,\n as = \"div\",\n alignContent,\n alignItems,\n children,\n colGap,\n direction,\n gap,\n justifyContent,\n justifyItems,\n rowGap,\n wrap = false,\n ...rest\n } = props;\n const Component = asChild ? SlotComponent : as;\n\n const flexStyle: CSSProperties = {\n display: \"flex\",\n flexDirection: direction,\n alignContent,\n alignItems,\n justifyContent,\n justifyItems,\n ...(wrap ? { flexWrap: \"wrap\" } : {}),\n ...(gap ? { gap: tokens.spacing[gap] } : {}),\n ...(colGap ? { columnGap: tokens.spacing[colGap] } : {}),\n ...(rowGap ? { rowGap: tokens.spacing[rowGap] } : {}),\n };\n\n return (\n <Component ref={ref} {...rest} style={{ ...flexStyle, ...rest.style }}>\n {children}\n </Component>\n );\n}) as FlexComponent;\n"],"names":["Flex","React","forwardRef","props","ref","asChild","as","alignContent","alignItems","children","colGap","direction","gap","justifyContent","justifyItems","rowGap","wrap","rest","Component","SlotComponent","flexStyle","display","flexDirection","flexWrap","tokens","spacing","columnGap","jsx","style"],"mappings":"+KAMO,MAAMA,EAAOC,EAAMC,YAAW,SAEnCC,EAA+BC,GACvB,MACFC,QAAAA,EACAC,GAAAA,EAAK,MACLC,aAAAA,EACAC,WAAAA,EACAC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,IAAAA,EACAC,eAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,GAAO,KACJC,GACHd,EACEe,EAAYb,EAAUc,EAAgBb,EAEtCc,EAA2B,CAC7BC,QAAS,OACTC,cAAeX,EACfJ,aAAAA,EACAC,WAAAA,EACAK,eAAAA,EACAC,aAAAA,KACIE,EAAO,CAAEO,SAAU,QAAW,CAAC,KAC/BX,EAAM,CAAEA,IAAKY,EAAOC,QAAQb,IAAS,CAAC,KACtCF,EAAS,CAAEgB,UAAWF,EAAOC,QAAQf,IAAY,CAAC,KAClDK,EAAS,CAAEA,OAAQS,EAAOC,QAAQV,IAAY,CAAA,GAGtD,OACKY,EAAAT,EAAA,CAAUd,IAAAA,KAAca,EAAMW,MAAO,IAAKR,KAAcH,EAAKW,OACzDnB,SAAAA,GAGb"}