@fremtind/jokul 0.71.1 → 1.0.0

package/build/es/components/expander/ExpandablePanel.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import t,{useState as s,useRef as r,useImperativeHandle as o,useEffect as l}from"react";import{ExpandablePanelContent as i}from"./ExpandablePanelContent.js";import{ExpanderContext as d}from"./context.js";const c=Object.assign(t.forwardRef((function(t,i){const{children:c,as:p="details",variant:u="fill",open:m,defaultOpen:x,onOpenChange:f,className:j,...v}=t,[g,b]=s(x||!1),[E,h]=s(!1),[k,C]=s(0),N=r();o(i,(()=>N.current),[]);const P=p,_=typeof m<"u",w=_?m:g;return l((()=>{const e=e=>{b("open"===e.newState)},n=N.current;return null==n||n.addEventListener("toggle",e),()=>null==n?void 0:n.removeEventListener("toggle",e)}),[]),e("div",{className:"jkl-expandable__wrapper",children:[n("div",{inert:"true",className:"jkl-expandable__focus-container",style:{height:k}}),n(P,{ref:N,"data-testid":"jkl-expand-section",className:a("jkl-expandable",`jkl-expandable--${u}`,j),open:"details"===p?w||E:void 0,"data-visible-content":w||E,...v,children:n(d.Provider,{value:{open:w,onToggle:()=>{_||b((e=>(null==f||f(!e),!e)))},onTransitionEnd:h,onTransitionStart:e=>{e&&h(!0)},setExpanderHeight:C},children:c})})]})})),{Content:i});export{c as ExpandablePanel};
+import{jsxs as e,jsx as t}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import a,{useState as s,useRef as r,useImperativeHandle as o,useEffect as i}from"react";import{ExpandablePanelContent as l}from"./ExpandablePanelContent.js";import{ExpanderContext as d}from"./context.js";const c=Object.assign(a.forwardRef((function(a,l){const{children:c,as:p="details",variant:f="fill",open:m,defaultOpen:x,onOpenChange:u,className:j,...v}=a,[b,g]=s(x||!1),[E,h]=s(!1),[k,C]=s(0),N=r();o(l,(()=>N.current),[]);const P=p,_=typeof m<"u",w=_?m:b;return i((()=>{const e=e=>{g("open"===e.newState)},t=N.current;return t?.addEventListener("toggle",e),()=>t?.removeEventListener("toggle",e)}),[]),e("div",{className:"jkl-expandable__wrapper",children:[t("div",{ref:e=>e?.setAttribute("inert","true"),className:"jkl-expandable__focus-container",style:{height:k}}),t(P,{ref:N,"data-testid":"jkl-expand-section",className:n("jkl-expandable",`jkl-expandable--${f}`,j),open:"details"===p?w||E:void 0,"data-visible-content":w||E,...v,children:t(d.Provider,{value:{open:w,onToggle:()=>{_||g((e=>(u?.(!e),!e)))},onTransitionEnd:h,onTransitionStart:e=>{e&&h(!0)},setExpanderHeight:C},children:c})})]})})),{Content:l});export{c as ExpandablePanel};
 //# sourceMappingURL=ExpandablePanel.js.map

package/build/es/components/expander/ExpandablePanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandablePanel.js","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandablePanelComponent,\n    ExpandablePanelProps,\n} from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n    React.forwardRef(function ExpandablePanel<\n        ElementType extends React.ElementType = \"details\",\n    >(\n        props: ExpandablePanelProps<ElementType>,\n        ref?: PolymorphicRef<ElementType>,\n    ) {\n        const {\n            children,\n            as = \"details\",\n            variant = \"fill\",\n            open: controlledOpen,\n            defaultOpen,\n            onOpenChange,\n            className,\n            ...rest\n        } = props;\n\n        const [uncontrolledOpen, setUncontrolledOpen] = useState(\n            defaultOpen || false,\n        );\n        const [contentIsVisible, setContentIsVisible] = useState(false);\n        const [expanderHeight, setExpanderHeight] = useState(0);\n\n        const internalRef = useRef<HTMLDetailsElement>();\n        useImperativeHandle(ref, () => internalRef.current, []);\n\n        const El = as;\n        const isControlled = typeof controlledOpen !== \"undefined\";\n        const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n        const setVisibleIfOpening = (isOpening: boolean) => {\n            if (isOpening) {\n                setContentIsVisible(true);\n            }\n        };\n\n        const syncUncontrolledState = () => {\n            if (isControlled) {\n                return;\n            }\n            setUncontrolledOpen((previousValue) => {\n                onOpenChange?.(!previousValue);\n                return !previousValue;\n            });\n        };\n\n        useEffect(() => {\n            const callback = (e: ToggleEvent & { newState: string }) => {\n                setUncontrolledOpen(e.newState === \"open\");\n            };\n\n            const element = internalRef.current;\n\n            element?.addEventListener(\"toggle\", callback as EventListener);\n\n            return () =>\n                element?.removeEventListener(\n                    \"toggle\",\n                    callback as EventListener,\n                );\n        }, []);\n\n        return (\n            <div className=\"jkl-expandable__wrapper\">\n                <div\n                    // React typings don't include inert for some reason,\n                    // but destructuring lets us calm down the TS compiler\n                    {...{ inert: \"true\" }}\n                    className=\"jkl-expandable__focus-container\"\n                    style={{ height: expanderHeight }}\n                />\n                <El\n                    ref={internalRef}\n                    data-testid={\"jkl-expand-section\"}\n                    className={clsx(\n                        \"jkl-expandable\",\n                        `jkl-expandable--${variant}`,\n                        className,\n                    )}\n                    open={\n                        /* for the animation to work in Safari we must ensure that\n                         * the element is open *before* the transition starts */\n                        as === \"details\"\n                            ? isOpen || contentIsVisible\n                            : undefined\n                    }\n                    /* this attribute is used for styling purposes */\n                    data-visible-content={isOpen || contentIsVisible}\n                    {...rest}\n                >\n                    <ExpanderContext.Provider\n                        value={{\n                            open: isOpen,\n                            onToggle: syncUncontrolledState,\n                            onTransitionEnd: setContentIsVisible,\n                            onTransitionStart: setVisibleIfOpening,\n                            setExpanderHeight,\n                        }}\n                    >\n                        {children}\n                    </ExpanderContext.Provider>\n                </El>\n            </div>\n        );\n    }),\n    { Content: ExpandablePanelContent },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","variant","open","controlledOpen","defaultOpen","onOpenChange","className","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","jsx","inert","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent"],"mappings":"4SAUO,MAAMA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,GAAS,IAClDG,EAAgBC,GAAqBJ,EAAS,GAE/CK,EAAcC,IACpBC,EAAoBnB,GAAK,IAAMiB,EAAYG,SAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAkB/C,OAAAc,GAAU,KACAC,MAAAA,EAAYC,IACMf,EAAe,SAAfe,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnBQ,OAAA,MAAAA,GAAAA,EAAAC,iBAAiB,SAAUJ,GAE7B,IACH,MAAAG,OAAA,EAAAA,EAASE,oBACL,SACAL,EAAA,GAET,IAGCM,EAAC,MAAI,CAAAvB,UAAU,0BACXP,SAAA,CAAA+B,EAAC,MAAA,CAGSC,MAAO,OACbzB,UAAU,kCACV0B,MAAO,CAAEC,OAAQpB,KAErBiB,EAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW4B,EACP,iBACA,mBAAmBjC,IACnBK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAACK,EAAgBC,SAAhB,CACGC,MAAO,CACHnC,KAAMmB,EACNiB,SAzDU,KACtBlB,GAGJX,GAAqB8B,IACjB,MAAAlC,GAAAA,GAAgBkC,IACRA,IACX,EAmDeC,gBAAiB5B,EACjB6B,kBAjESC,IACrBA,GACA9B,GAAoB,EAAI,EAgEZE,kBAAAA,GAGHf,SAAAA,QAGb,IAGR,CAAE4C,QAASC"}
+{"version":3,"file":"ExpandablePanel.js","sources":["../../../../src/components/expander/ExpandablePanel.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ExpandablePanelContent } from \"./ExpandablePanelContent.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandablePanelComponent,\n    ExpandablePanelProps,\n} from \"./types.js\";\n\nexport const ExpandablePanel = Object.assign(\n    React.forwardRef(function ExpandablePanel<\n        ElementType extends React.ElementType = \"details\",\n    >(\n        props: ExpandablePanelProps<ElementType>,\n        ref?: PolymorphicRef<ElementType>,\n    ) {\n        const {\n            children,\n            as = \"details\",\n            variant = \"fill\",\n            open: controlledOpen,\n            defaultOpen,\n            onOpenChange,\n            className,\n            ...rest\n        } = props;\n\n        const [uncontrolledOpen, setUncontrolledOpen] = useState(\n            defaultOpen || false,\n        );\n        const [contentIsVisible, setContentIsVisible] = useState(false);\n        const [expanderHeight, setExpanderHeight] = useState(0);\n\n        const internalRef = useRef<HTMLDetailsElement>();\n        useImperativeHandle(ref, () => internalRef.current, []);\n\n        const El = as;\n        const isControlled = typeof controlledOpen !== \"undefined\";\n        const isOpen = isControlled ? controlledOpen : uncontrolledOpen;\n\n        const setVisibleIfOpening = (isOpening: boolean) => {\n            if (isOpening) {\n                setContentIsVisible(true);\n            }\n        };\n\n        const syncUncontrolledState = () => {\n            if (isControlled) {\n                return;\n            }\n            setUncontrolledOpen((previousValue) => {\n                onOpenChange?.(!previousValue);\n                return !previousValue;\n            });\n        };\n\n        useEffect(() => {\n            const callback = (e: ToggleEvent & { newState: string }) => {\n                setUncontrolledOpen(e.newState === \"open\");\n            };\n\n            const element = internalRef.current;\n\n            element?.addEventListener(\"toggle\", callback as EventListener);\n\n            return () =>\n                element?.removeEventListener(\n                    \"toggle\",\n                    callback as EventListener,\n                );\n        }, []);\n\n        return (\n            <div className=\"jkl-expandable__wrapper\">\n                <div\n                    /*\n                        Setter `inert` manuelt for å støtte både React 18 og 19.\n\n                        Dette unngår typefeil i React 18 og advarsler i React 19.\n                        Se: https://github.com/WICG/inert/issues/58\n                    */\n                    ref={(node) => node?.setAttribute(\"inert\", \"true\")}\n                    className=\"jkl-expandable__focus-container\"\n                    style={{ height: expanderHeight }}\n                />\n                <El\n                    ref={internalRef}\n                    data-testid={\"jkl-expand-section\"}\n                    className={clsx(\n                        \"jkl-expandable\",\n                        `jkl-expandable--${variant}`,\n                        className,\n                    )}\n                    open={\n                        /* for the animation to work in Safari we must ensure that\n                         * the element is open *before* the transition starts */\n                        as === \"details\"\n                            ? isOpen || contentIsVisible\n                            : undefined\n                    }\n                    /* this attribute is used for styling purposes */\n                    data-visible-content={isOpen || contentIsVisible}\n                    {...rest}\n                >\n                    <ExpanderContext.Provider\n                        value={{\n                            open: isOpen,\n                            onToggle: syncUncontrolledState,\n                            onTransitionEnd: setContentIsVisible,\n                            onTransitionStart: setVisibleIfOpening,\n                            setExpanderHeight,\n                        }}\n                    >\n                        {children}\n                    </ExpanderContext.Provider>\n                </El>\n            </div>\n        );\n    }),\n    { Content: ExpandablePanelContent },\n) as ExpandablePanelComponent;\n"],"names":["ExpandablePanel","Object","assign","React","forwardRef","props","ref","children","as","variant","open","controlledOpen","defaultOpen","onOpenChange","className","rest","uncontrolledOpen","setUncontrolledOpen","useState","contentIsVisible","setContentIsVisible","expanderHeight","setExpanderHeight","internalRef","useRef","useImperativeHandle","current","El","isControlled","isOpen","useEffect","callback","e","newState","element","addEventListener","removeEventListener","jsxs","jsx","node","setAttribute","style","height","clsx","ExpanderContext","Provider","value","onToggle","previousValue","onTransitionEnd","onTransitionStart","isOpening","Content","ExpandablePanelContent"],"mappings":"4SAUO,MAAMA,EAAkBC,OAAOC,OAClCC,EAAMC,YAAW,SAGbC,EACAC,GAEM,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,QAAAA,EAAU,OACVC,KAAMC,EACNC,YAAAA,EACAC,aAAAA,EACAC,UAAAA,KACGC,GACHV,GAEGW,EAAkBC,GAAuBC,EAC5CN,IAAe,IAEZO,EAAkBC,GAAuBF,GAAS,IAClDG,EAAgBC,GAAqBJ,EAAS,GAE/CK,EAAcC,IACpBC,EAAoBnB,GAAK,IAAMiB,EAAYG,SAAS,IAEpD,MAAMC,EAAKnB,EACLoB,SAAsBjB,EAAmB,IACzCkB,EAASD,EAAejB,EAAiBK,EAkB/C,OAAAc,GAAU,KACAC,MAAAA,EAAYC,IACMf,EAAe,SAAfe,EAAEC,SAAmB,EAGvCC,EAAUX,EAAYG,QAEnB,OAAAQ,GAAAC,iBAAiB,SAAUJ,GAE7B,IACHG,GAASE,oBACL,SACAL,EACJ,GACL,IAGCM,EAAC,MAAI,CAAAvB,UAAU,0BACXP,SAAA,CAAA+B,EAAC,MAAA,CAOGhC,IAAMiC,GAASA,GAAMC,aAAa,QAAS,QAC3C1B,UAAU,kCACV2B,MAAO,CAAEC,OAAQrB,KAErBiB,EAACX,EAAA,CACGrB,IAAKiB,EACL,cAAa,qBACbT,UAAW6B,EACP,iBACA,mBAAmBlC,IACnBK,GAEJJ,KAGW,YAAPF,EACMqB,GAAUV,OACV,EAGV,uBAAsBU,GAAUV,KAC5BJ,EAEJR,SAAA+B,EAACM,EAAgBC,SAAhB,CACGC,MAAO,CACHpC,KAAMmB,EACNkB,SA7DU,KACtBnB,GAGJX,GAAqB+B,IACjBnC,KAAgBmC,IACRA,IACX,EAuDeC,gBAAiB7B,EACjB8B,kBArESC,IACrBA,GACA/B,GAAoB,EAAI,EAoEZE,kBAAAA,GAGHf,SAAAA,QAGb,IAGR,CAAE6C,QAASC"}

package/build/es/components/expander/ExpandablePanelContent.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{c as n}from"../../../clsx-BeLtu-UY.js";import{useContext as t}from"react";import{useAnimatedHeightBetween as a}from"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{ExpanderContext as r}from"./context.js";const o=({className:o,children:s,...i})=>{const{open:m,onTransitionStart:d,onTransitionEnd:p}=t(r),[c]=a(m,{timing:"snappy",onTransitionStart:d,onTransitionEnd:p});return e("div",{ref:c,className:n("jkl-expandable__content",o),...i,"data-expanded":m,...m?{}:{inert:"true"},children:e("div",{className:"jkl-expandable__content-wrapper",children:s})})};export{o as ExpandablePanelContent};
+import{jsx as e}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{useContext as n,useEffect as a}from"react";import{useAnimatedHeightBetween as r}from"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js";import{ExpanderContext as s}from"./context.js";const o=({className:o,children:i,...m})=>{const{open:c,onTransitionStart:d,onTransitionEnd:p}=n(s),[l]=r(c,{timing:"snappy",onTransitionStart:d,onTransitionEnd:p});return a((()=>{const e=l.current;c?e?.removeAttribute("inert"):e?.setAttribute("inert","true")}),[c,l]),e("div",{ref:l,className:t("jkl-expandable__content",o),...m,"data-expanded":c,children:e("div",{className:"jkl-expandable__content-wrapper",children:i})})};export{o as ExpandablePanelContent};
 //# sourceMappingURL=ExpandablePanelContent.js.map

package/build/es/components/expander/ExpandablePanelContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandablePanelContent.js","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandableContext,\n    ExpandablePanelContentComponent,\n} from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n    className,\n    children,\n    ...rest\n}) => {\n    const { open, onTransitionStart, onTransitionEnd } =\n        useContext<ExpandableContext>(ExpanderContext);\n\n    const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n        timing: \"snappy\",\n        onTransitionStart,\n        onTransitionEnd,\n    });\n\n    return (\n        <div\n            ref={animationRef}\n            className={clsx(\"jkl-expandable__content\", className)}\n            {...rest}\n            data-expanded={open}\n            {...(!open ? { inert: \"true\" } : {})}\n        >\n            <div className=\"jkl-expandable__content-wrapper\">{children}</div>\n        </div>\n    );\n};\n"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","jsx","ref","clsx","inert"],"mappings":"6QASO,MAAMA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAA8BC,IAE3BC,GAAgBC,EAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IAIA,OAAAM,EAAC,MAAA,CACGC,IAAKJ,EACLR,UAAWa,EAAK,0BAA2Bb,MACvCE,EACJ,gBAAeC,KACTA,EAA2B,CAAC,EAArB,CAAEW,MAAO,QAEtBb,SAACU,EAAA,MAAA,CAAIX,UAAU,kCAAmCC,SAAAA,KACtD"}
+{"version":3,"file":"ExpandablePanelContent.js","sources":["../../../../src/components/expander/ExpandablePanelContent.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useContext, useEffect } from \"react\";\nimport { useAnimatedHeightBetween } from \"../../hooks/useAnimatedHeight/useAnimatedHeightBetween.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandableContext,\n    ExpandablePanelContentComponent,\n} from \"./types.js\";\n\nexport const ExpandablePanelContent: ExpandablePanelContentComponent = ({\n    className,\n    children,\n    ...rest\n}) => {\n    const { open, onTransitionStart, onTransitionEnd } =\n        useContext<ExpandableContext>(ExpanderContext);\n\n    const [animationRef] = useAnimatedHeightBetween<HTMLDivElement>(open, {\n        timing: \"snappy\",\n        onTransitionStart,\n        onTransitionEnd,\n    });\n\n    /*\n        Setter `inert` manuelt for å støtte både React 18 og 19.\n\n        Dette unngår typefeil i React 18 og advarsler i React 19.\n        Se: https://github.com/WICG/inert/issues/58\n    */\n    useEffect(() => {\n        const node = animationRef.current;\n\n        if (!open) {\n            node?.setAttribute(\"inert\", \"true\");\n        } else {\n            node?.removeAttribute(\"inert\");\n        }\n    }, [open, animationRef]);\n\n    return (\n        <div\n            ref={animationRef}\n            className={clsx(\"jkl-expandable__content\", className)}\n            {...rest}\n            data-expanded={open}\n        >\n            <div className=\"jkl-expandable__content-wrapper\">{children}</div>\n        </div>\n    );\n};\n"],"names":["ExpandablePanelContent","className","children","rest","open","onTransitionStart","onTransitionEnd","useContext","ExpanderContext","animationRef","useAnimatedHeightBetween","timing","useEffect","node","current","removeAttribute","setAttribute","jsx","ref","clsx"],"mappings":"4RASO,MAAMA,EAA0D,EACnEC,UAAAA,EACAC,SAAAA,KACGC,MAEH,MAAQC,KAAAA,EAAMC,kBAAAA,EAAmBC,gBAAAA,GAC7BC,EAA8BC,IAE3BC,GAAgBC,EAAyCN,EAAM,CAClEO,OAAQ,SACRN,kBAAAA,EACAC,gBAAAA,IASJ,OAAAM,GAAU,KACN,MAAMC,EAAOJ,EAAaK,QAErBV,EAGDS,GAAME,gBAAgB,SAFhBF,GAAAG,aAAa,QAAS,OAAM,GAIvC,CAACZ,EAAMK,IAGNQ,EAAC,MAAA,CACGC,IAAKT,EACLR,UAAWkB,EAAK,0BAA2BlB,MACvCE,EACJ,gBAAeC,EAEfF,SAACe,EAAA,MAAA,CAAIhB,UAAU,kCAAmCC,SAAAA,KACtD"}

package/build/es/components/expander/Expander.js

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as n}from"react/jsx-runtime";import{c}from"../../../clsx-BeLtu-UY.js";import i,{useContext as s,useRef as r,useImperativeHandle as e,useEffect as t}from"react";import{ChevronDownIcon as m}from"../icon/icons/ChevronDownIcon.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import{ChevronUpIcon as p}from"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/OpenInNewIcon.js";import"../icon/icons/PenIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/WarningIcon.js";import{ExpanderContext as a}from"./context.js";const j=i.forwardRef((function(i,j){const{children:I,as:l="summary",open:u,icon:d,className:h,onClick:f,expandDirection:C,...x}=i,v=l,{open:w,onToggle:A,setExpanderHeight:g}=s(a),k=r();e(j,(()=>k.current),[]);const b=u||w,D="up"===C?p:m;return t((()=>{const o=new ResizeObserver((()=>{var o;g((null==(o=k.current)?void 0:o.offsetHeight)||64)}));return k.current?(o.observe(k.current),()=>o.disconnect()):()=>{}}),[g]),o(v,{ref:k,className:c("jkl-expander",{"jkl-expander--open":b},h),..."button"===l?{type:x.type||"button"}:{},onClick:o=>{o.preventDefault(),A(),null==f||f(o)},...x,children:[d||null,n("span",{className:"jkl-expander__label",children:I}),n(D,{className:"jkl-expander__chevron"})]})}));export{j as Expander};
+import{jsxs as o,jsx as n}from"react/jsx-runtime";import{c}from"../../../clsx-BeLtu-UY.js";import i,{useContext as s,useRef as r,useImperativeHandle as e,useEffect as t}from"react";import{ChevronDownIcon as m}from"../icon/icons/ChevronDownIcon.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import{ChevronUpIcon as p}from"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/OpenInNewIcon.js";import"../icon/icons/PenIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/WarningIcon.js";import{ExpanderContext as a}from"./context.js";const j=i.forwardRef((function(i,j){const{children:I,as:l="summary",open:u,icon:d,className:h,onClick:f,expandDirection:C,...x}=i,w=l,{open:v,onToggle:A,setExpanderHeight:g}=s(a),k=r();e(j,(()=>k.current),[]);const b=u||v,D="up"===C?p:m;return t((()=>{const o=new ResizeObserver((()=>{g(k.current?.offsetHeight||64)}));return k.current?(o.observe(k.current),()=>o.disconnect()):()=>{}}),[g]),o(w,{ref:k,className:c("jkl-expander",{"jkl-expander--open":b},h),..."button"===l?{type:x.type||"button"}:{},onClick:o=>{o.preventDefault(),A(),f?.(o)},...x,children:[d||null,n("span",{className:"jkl-expander__label",children:I}),n(D,{className:"jkl-expander__chevron"})]})}));export{j as Expander};
 //# sourceMappingURL=Expander.js.map

package/build/es/components/expander/Expander.js.map

@@ -1 +1 @@
-{"version":3,"file":"Expander.js","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronDownIcon } from \"../icon/icons/ChevronDownIcon.js\";\nimport { ChevronUpIcon } from \"../icon/index.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandableContext,\n    ExpanderComponent,\n    ExpanderProps,\n} from \"./types.js\";\n\nexport const Expander = React.forwardRef(function Expander<\n    ElementType extends React.ElementType = \"summary\",\n>(props: ExpanderProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        children,\n        as = \"summary\",\n        open: controlledOpen,\n        icon,\n        className,\n        onClick,\n        expandDirection,\n        ...rest\n    } = props;\n    const El = as;\n\n    const {\n        open: contextOpen,\n        onToggle,\n        setExpanderHeight,\n    } = useContext<ExpandableContext>(ExpanderContext);\n\n    const internalRef = useRef<HTMLElement>();\n    useImperativeHandle(ref, () => internalRef.current, []);\n\n    const isOpen = controlledOpen || contextOpen;\n\n    const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n    useEffect(() => {\n        const observer = new ResizeObserver(() => {\n            // Default to 64 if the height can not be read because that is\n            // the height of the default summary element. In a custom component\n            // this means that the focus ring might be slightly misaligned but\n            // in most cases we will be able to read the ref correctly.\n            setExpanderHeight(internalRef.current?.offsetHeight || 64);\n        });\n        if (internalRef.current) {\n            observer.observe(internalRef.current);\n            return () => observer.disconnect();\n        }\n        return () => {};\n    }, [setExpanderHeight]);\n\n    return (\n        <El\n            ref={internalRef}\n            className={clsx(\n                \"jkl-expander\",\n                {\n                    \"jkl-expander--open\": isOpen,\n                },\n                className,\n            )}\n            // If the consumer uses the Expander as a button but does not\n            // supply a type, then we set type to \"button\"\n            {...(as === \"button\" ? { type: rest.type || \"button\" } : {})}\n            onClick={(e) => {\n                e.preventDefault();\n                onToggle();\n                onClick?.(e);\n            }}\n            {...rest}\n        >\n            {icon || null}\n            <span className=\"jkl-expander__label\">{children}</span>\n            <Chevron className=\"jkl-expander__chevron\" />\n        </El>\n    );\n}) as ExpanderComponent;\n"],"names":["Expander","React","forwardRef","props","ref","children","as","open","controlledOpen","icon","className","onClick","expandDirection","rest","El","contextOpen","onToggle","setExpanderHeight","useContext","ExpanderContext","internalRef","useRef","useImperativeHandle","current","isOpen","Chevron","ChevronUpIcon","ChevronDownIcon","useEffect","observer","ResizeObserver","_a","offsetHeight","observe","disconnect","jsxs","clsx","type","e","preventDefault","jsx"],"mappings":"goDAiBO,MAAMA,EAAWC,EAAMC,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,KAAMC,EACNC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,KACGC,GACHV,EACEW,EAAKR,GAGPC,KAAMQ,EACNC,SAAAA,EACAC,kBAAAA,GACAC,EAA8BC,GAE5BC,EAAcC,IACpBC,EAAoBlB,GAAK,IAAMgB,EAAYG,SAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBC,EAE3D,OAAAC,GAAU,KACAC,MAAAA,EAAW,IAAIC,gBAAe,WAKdb,GAAA,OAAAc,EAAAX,EAAYG,cAAZQ,EAAAA,EAAqBC,eAAgB,GAAE,IAEzDZ,OAAAA,EAAYG,SACHM,EAAAI,QAAQb,EAAYG,SACtB,IAAMM,EAASK,cAEnB,MAAO,GACf,CAACjB,IAGAkB,EAACrB,EAAA,CACGV,IAAKgB,EACLV,UAAW0B,EACP,eACA,CACI,qBAAsBZ,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE+B,KAAMxB,EAAKwB,MAAQ,UAAa,CAAC,EAC1D1B,QAAU2B,IACNA,EAAEC,iBACOvB,IACT,MAAAL,GAAAA,EAAU2B,EAAAA,KAEVzB,EAEHR,SAAA,CAAQI,GAAA,KACR+B,EAAA,OAAA,CAAK9B,UAAU,sBAAuBL,SAAAA,IACvCmC,EAACf,EAAQ,CAAAf,UAAU,4BAG/B"}
+{"version":3,"file":"Expander.js","sources":["../../../../src/components/expander/Expander.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport { ChevronDownIcon } from \"../icon/icons/ChevronDownIcon.js\";\nimport { ChevronUpIcon } from \"../icon/index.js\";\nimport { ExpanderContext } from \"./context.js\";\nimport type {\n    ExpandableContext,\n    ExpanderComponent,\n    ExpanderProps,\n} from \"./types.js\";\n\nexport const Expander = React.forwardRef(function Expander<\n    ElementType extends React.ElementType = \"summary\",\n>(props: ExpanderProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n    const {\n        children,\n        as = \"summary\",\n        open: controlledOpen,\n        icon,\n        className,\n        onClick,\n        expandDirection,\n        ...rest\n    } = props;\n    const El = as;\n\n    const {\n        open: contextOpen,\n        onToggle,\n        setExpanderHeight,\n    } = useContext<ExpandableContext>(ExpanderContext);\n\n    const internalRef = useRef<HTMLElement>();\n    useImperativeHandle(ref, () => internalRef.current, []);\n\n    const isOpen = controlledOpen || contextOpen;\n\n    const Chevron = expandDirection === \"up\" ? ChevronUpIcon : ChevronDownIcon;\n\n    useEffect(() => {\n        const observer = new ResizeObserver(() => {\n            // Default to 64 if the height can not be read because that is\n            // the height of the default summary element. In a custom component\n            // this means that the focus ring might be slightly misaligned but\n            // in most cases we will be able to read the ref correctly.\n            setExpanderHeight(internalRef.current?.offsetHeight || 64);\n        });\n        if (internalRef.current) {\n            observer.observe(internalRef.current);\n            return () => observer.disconnect();\n        }\n        return () => {};\n    }, [setExpanderHeight]);\n\n    return (\n        <El\n            ref={internalRef}\n            className={clsx(\n                \"jkl-expander\",\n                {\n                    \"jkl-expander--open\": isOpen,\n                },\n                className,\n            )}\n            // If the consumer uses the Expander as a button but does not\n            // supply a type, then we set type to \"button\"\n            {...(as === \"button\" ? { type: rest.type || \"button\" } : {})}\n            onClick={(e) => {\n                e.preventDefault();\n                onToggle();\n                onClick?.(e);\n            }}\n            {...rest}\n        >\n            {icon || null}\n            <span className=\"jkl-expander__label\">{children}</span>\n            <Chevron className=\"jkl-expander__chevron\" />\n        </El>\n    );\n}) as ExpanderComponent;\n"],"names":["Expander","React","forwardRef","props","ref","children","as","open","controlledOpen","icon","className","onClick","expandDirection","rest","El","contextOpen","onToggle","setExpanderHeight","useContext","ExpanderContext","internalRef","useRef","useImperativeHandle","current","isOpen","Chevron","ChevronUpIcon","ChevronDownIcon","useEffect","observer","ResizeObserver","offsetHeight","observe","disconnect","jsxs","clsx","type","e","preventDefault","jsx"],"mappings":"goDAiBO,MAAMA,EAAWC,EAAMC,YAAW,SAEvCC,EAAmCC,GAC3B,MACFC,SAAAA,EACAC,GAAAA,EAAK,UACLC,KAAMC,EACNC,KAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,gBAAAA,KACGC,GACHV,EACEW,EAAKR,GAGPC,KAAMQ,EACNC,SAAAA,EACAC,kBAAAA,GACAC,EAA8BC,GAE5BC,EAAcC,IACpBC,EAAoBlB,GAAK,IAAMgB,EAAYG,SAAS,IAEpD,MAAMC,EAAShB,GAAkBO,EAE3BU,EAA8B,OAApBb,EAA2Bc,EAAgBC,EAE3D,OAAAC,GAAU,KACAC,MAAAA,EAAW,IAAIC,gBAAe,KAKdb,EAAAG,EAAYG,SAASQ,cAAgB,GAAE,IAEzDX,OAAAA,EAAYG,SACHM,EAAAG,QAAQZ,EAAYG,SACtB,IAAMM,EAASI,cAEnB,MAAO,GACf,CAAChB,IAGAiB,EAACpB,EAAA,CACGV,IAAKgB,EACLV,UAAWyB,EACP,eACA,CACI,qBAAsBX,GAE1Bd,MAIQ,WAAPJ,EAAkB,CAAE8B,KAAMvB,EAAKuB,MAAQ,UAAa,CAAC,EAC1DzB,QAAU0B,IACNA,EAAEC,iBACOtB,IACTL,IAAU0B,EAAC,KAEXxB,EAEHR,SAAA,CAAQI,GAAA,KACR8B,EAAA,OAAA,CAAK7B,UAAU,sBAAuBL,SAAAA,IACvCkC,EAACd,EAAQ,CAAAf,UAAU,4BAG/B"}

package/build/es/components/expander/index.d.ts

@@ -1,4 +1,3 @@
 export { ExpandablePanel } from './ExpandablePanel.js';
 export { Expander } from './Expander.js';
-export { ExpandSection, type ExpandSectionProps, } from './deprecated/ExpandSection.js';
 export type { ExpandablePanelProps, ExpanderProps } from './types.js';

package/build/es/components/expander/index.js

@@ -1,2 +1,2 @@
-import{ExpandablePanel as a}from"./ExpandablePanel.js";import{Expander as e}from"./Expander.js";import{ExpandSection as n}from"./deprecated/ExpandSection.js";export{n as ExpandSection,a as ExpandablePanel,e as Expander};
+import{ExpandablePanel as a}from"./ExpandablePanel.js";import{Expander as e}from"./Expander.js";export{a as ExpandablePanel,e as Expander};
 //# sourceMappingURL=index.js.map

package/build/es/components/expander/stories/{ExpanderPanel.stories.js → ExpandablePanel.stories.js}

@@ -1,2 +1,2 @@
 import{jsx as o,jsxs as n}from"react/jsx-runtime";import"react";import{Flex as i}from"../../flex/Flex.js";import"../../icon/Icon.js";import"../../icon/icons/animated/ArrowVerticalAnimated.js";import"../../icon/icons/animated/ArrowHorizontalAnimated.js";import"../../icon/icons/animated/PlusRemoveAnimated.js";import"../../icon/icons/ArrowDownIcon.js";import"../../icon/icons/ArrowLeftIcon.js";import"../../icon/icons/ArrowNorthEastIcon.js";import"../../icon/icons/ArrowRightIcon.js";import"../../icon/icons/ArrowUpIcon.js";import"../../icon/icons/CalendarIcon.js";import"../../icon/icons/CheckIcon.js";import"../../icon/icons/ChevronDownIcon.js";import"../../icon/icons/ChevronLeftIcon.js";import"../../icon/icons/ChevronRightIcon.js";import"../../icon/icons/ChevronUpIcon.js";import"../../icon/icons/CloseIcon.js";import"../../icon/icons/CopyIcon.js";import"../../icon/icons/DotsIcon.js";import"../../icon/icons/DragIcon.js";import"../../icon/icons/ErrorIcon.js";import{GreenCheckIcon as c}from"../../icon/icons/GreenCheckIcon.js";import"../../icon/icons/HamburgerIcon.js";import"../../icon/icons/InfoIcon.js";import"../../icon/icons/LinkIcon.js";import"../../icon/icons/MinusIcon.js";import"../../icon/icons/OpenInNewIcon.js";import"../../icon/icons/PenIcon.js";import"../../icon/icons/PlusIcon.js";import"../../icon/icons/QuestionIcon.js";import"../../icon/icons/RedCrossIcon.js";import"../../icon/icons/SearchIcon.js";import"../../icon/icons/SuccessIcon.js";import"../../icon/icons/ThumbDownIcon.js";import"../../icon/icons/ThumbUpIcon.js";import"../../icon/icons/TrashCanIcon.js";import"../../icon/icons/WarningIcon.js";import{ExpandablePanel as r}from"../ExpandablePanel.js";import{ExpandablePanelContent as s}from"../ExpandablePanelContent.js";import{Expander as e}from"../Expander.js";/* empty css                         */const t={title:"Komponenter/ExpandablePanel",component:r,subcomponents:{Expander:e,ExpandablePanelContent:s},parameters:{layout:"padded"},tags:["autodocs"],argTypes:{variant:{control:"select",options:["stroke","fill"]}}},a={name:"ExpandablePanel",args:{variant:"fill",icon:!0,flipDirection:!1},render:({icon:s,flipDirection:t,...a})=>o(i,{style:{width:"100%"},direction:"column",gap:4,children:[...Array(3)].map(((i,p)=>n(r,{...a,children:[o(e,{icon:s?o(c,{}):void 0,expandDirection:t?"up":void 0,children:"Når er det vi faktisk er åpne?"}),o(r.Content,{children:"Velkommen innom når vi faktisk har kaffe! Vi er åpne mandag til fredag fra kl. 09:00 til 18:00. Lørdag kan du besøke oss fra 10:00 til 16:00 (vi liker en rolig start på lørdagen). Søndager hviler vi – og det burde du også!"})]},p)))})};export{a as ExpandablePanelStory,t as default};
-//# sourceMappingURL=ExpanderPanel.stories.js.map
+//# sourceMappingURL=ExpandablePanel.stories.js.map

package/build/es/components/expander/stories/ExpandablePanel.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandablePanel.stories.js","sources":["../../../../../src/components/expander/stories/ExpandablePanel.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react\";\nimport React from \"react\";\nimport { Flex } from \"../../flex/Flex.jsx\";\nimport { GreenCheckIcon } from \"../../icon/index.js\";\nimport { ExpandablePanel } from \"../ExpandablePanel.jsx\";\nimport { ExpandablePanelContent } from \"../ExpandablePanelContent.jsx\";\nimport { Expander } from \"../Expander.jsx\";\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/followup/Followup.js

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as s,useRef as l,useEffect as a,createElement as r}from"react";import{PrimaryButton as o,SecondaryButton as i,TertiaryButton as n}from"../../button/Button.js";import{FeedbackSuccess as c}from"../FeedbackSuccess.js";import{useFeedbackContext as d}from"../feedbackContext.js";import{getQuestionFromType as u}from"../utils.js";import{FollowUpProvider as m}from"./followupContext.js";import{useFollowup as p}from"./useFollowup.js";const k={title:"Takk, igjen!",children:"Vi setter pris på at du tok deg tid til å svare på flere spørsmål. Det hjelper oss med å gjøre nettsidene bedre for deg og alle andre som bruker dem."},b=({questions:b,successMessage:f=k,onSubmit:j})=>{const[g,h]=s(!1),x=l(null),S=p(b,j),{handleAbort:v,handleNext:F,step:N,submitted:y}=S,{followupStarted:w,setFollowupStarted:C,setFollowupSubmitted:_,contactSubmitted:B,landmarkLabel:L}=d();a((()=>{var e;0!==N.number&&(null==(e=x.current)||e.focus())}),[N]),a((()=>{_(y)}),[y,_]);const T=u(b[N.number].type),A=N.isLast?o:i;return g?null:e("div",{"aria-live":"polite",children:t(m,{state:S,children:[!w&&t("div",{className:"jkl-feedback__fade-in",children:[e("p",{className:"jkl-heading-4 jkl-spacing-xl--top jkl-spacing-xs--bottom",children:"Har du tid til å svare på noen flere spørsmål?"}),e("p",{className:"jkl-body jkl-spacing-xl--bottom",children:"Det tar kun et minutt, og hjelper oss å lage bedre løsninger for deg."}),e(o,{onClick:()=>C(!0),className:"jkl-spacing-xl--right",children:"Jeg har tid!"}),e(n,{onClick:()=>h(!0),children:"Nei takk"})]}),!y&&w&&t("form",{onSubmit:F,className:"jkl-feedback__fade-in","aria-label":L,children:[t("p",{className:"jkl-feedback__step-counter",ref:x,children:["Steg ",N.number+1," av ",b.length]}),r(T,{...b[N.number],autoFocus:!0,key:N.number}),t("div",{className:"jkl-spacing-xl--top","aria-live":"off",children:[e(A,{type:"submit",children:N.isLast?"Send inn":"Neste"}),e(n,{onClick:v,className:"jkl-spacing-xl--left",children:"Avbryt"})]})]}),y&&!B&&e(c,{...f})]})})};export{b as Followup};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as s,useRef as a,useEffect as r,createElement as l}from"react";import{PrimaryButton as o,SecondaryButton as i,TertiaryButton as n}from"../../button/Button.js";import{FeedbackSuccess as c}from"../FeedbackSuccess.js";import{useFeedbackContext as d}from"../feedbackContext.js";import{getQuestionFromType as m}from"../utils.js";import{FollowUpProvider as u}from"./followupContext.js";import{useFollowup as p}from"./useFollowup.js";const k={title:"Takk, igjen!",children:"Vi setter pris på at du tok deg tid til å svare på flere spørsmål. Det hjelper oss med å gjøre nettsidene bedre for deg og alle andre som bruker dem."},b=({questions:b,successMessage:f=k,onSubmit:j})=>{const[g,h]=s(!1),S=a(null),F=p(b,j),{handleAbort:N,handleNext:v,step:y,submitted:w}=F,{followupStarted:x,setFollowupStarted:C,setFollowupSubmitted:_,contactSubmitted:B,landmarkLabel:L}=d();r((()=>{0!==y.number&&S.current?.focus()}),[y]),r((()=>{_(w)}),[w,_]);const T=m(b[y.number].type),A=y.isLast?o:i;return g?null:e("div",{"aria-live":"polite",children:t(u,{state:F,children:[!x&&t("div",{className:"jkl-feedback__fade-in",children:[e("p",{className:"jkl-heading-4 jkl-spacing-40--top jkl-spacing-8--bottom",children:"Har du tid til å svare på noen flere spørsmål?"}),e("p",{className:"jkl-body jkl-spacing-40--bottom",children:"Det tar kun et minutt, og hjelper oss å lage bedre løsninger for deg."}),e(o,{onClick:()=>C(!0),className:"jkl-spacing-40--right",children:"Jeg har tid!"}),e(n,{onClick:()=>h(!0),children:"Nei takk"})]}),!w&&x&&t("form",{onSubmit:v,className:"jkl-feedback__fade-in","aria-label":L,children:[t("p",{className:"jkl-feedback__step-counter",ref:S,children:["Steg ",y.number+1," av ",b.length]}),l(T,{...b[y.number],autoFocus:!0,key:y.number}),t("div",{className:"jkl-spacing-40--top","aria-live":"off",children:[e(A,{type:"submit",children:y.isLast?"Send inn":"Neste"}),e(n,{onClick:N,className:"jkl-spacing-40--left",children:"Avbryt"})]})]}),w&&!B&&e(c,{...f})]})})};export{b as Followup};
 //# sourceMappingURL=Followup.js.map

package/build/es/components/feedback/followup/Followup.js.map

@@ -1 +1 @@
-{"version":3,"file":"Followup.js","sources":["../../../../../src/components/feedback/followup/Followup.tsx"],"sourcesContent":["import React, { type FC, useEffect, useRef, useState } from \"react\";\nimport {\n    PrimaryButton,\n    SecondaryButton,\n    TertiaryButton,\n} from \"../../button/Button.js\";\nimport { FeedbackSuccess } from \"../FeedbackSuccess.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport type { FollowupProps } from \"../types.js\";\nimport { getQuestionFromType } from \"../utils.js\";\nimport { FollowUpProvider } from \"./followupContext.js\";\nimport { useFollowup } from \"./useFollowup.js\";\n\nconst defaultSuccessMessage = {\n    title: \"Takk, igjen!\",\n    children:\n        \"Vi setter pris på at du tok deg tid til å svare på flere spørsmål. Det hjelper oss med å gjøre nettsidene bedre for deg og alle andre som bruker dem.\",\n};\n\nexport const Followup: FC<FollowupProps> = ({\n    questions,\n    successMessage = defaultSuccessMessage,\n    onSubmit,\n}) => {\n    const [noThanks, setNoThanks] = useState(false);\n    const focusRef = useRef<HTMLParagraphElement>(null);\n    const followupState = useFollowup(questions, onSubmit);\n    const { handleAbort, handleNext, step, submitted } = followupState;\n    const {\n        followupStarted,\n        setFollowupStarted,\n        setFollowupSubmitted,\n        contactSubmitted,\n        landmarkLabel,\n    } = useFeedbackContext();\n\n    useEffect(() => {\n        if (step.number === 0) {\n            return;\n        }\n        focusRef.current?.focus();\n    }, [step]);\n\n    useEffect(() => {\n        setFollowupSubmitted(submitted);\n    }, [submitted, setFollowupSubmitted]);\n\n    const QuestionComponent = getQuestionFromType(questions[step.number].type);\n    const Button = step.isLast ? PrimaryButton : SecondaryButton;\n\n    if (noThanks) {\n        return null;\n    }\n\n    return (\n        <div aria-live=\"polite\">\n            <FollowUpProvider state={followupState}>\n                {!followupStarted && (\n                    <div className=\"jkl-feedback__fade-in\">\n                        <p className=\"jkl-heading-4 jkl-spacing-xl--top jkl-spacing-xs--bottom\">\n                            Har du tid til å svare på noen flere spørsmål?\n                        </p>\n                        <p className=\"jkl-body jkl-spacing-xl--bottom\">\n                            Det tar kun et minutt, og hjelper oss å lage bedre\n                            løsninger for deg.\n                        </p>\n                        <PrimaryButton\n                            onClick={() => setFollowupStarted(true)}\n                            className=\"jkl-spacing-xl--right\"\n                        >\n                            Jeg har tid!\n                        </PrimaryButton>\n                        <TertiaryButton onClick={() => setNoThanks(true)}>\n                            Nei takk\n                        </TertiaryButton>\n                    </div>\n                )}\n                {!submitted && followupStarted && (\n                    <form\n                        onSubmit={handleNext}\n                        className=\"jkl-feedback__fade-in\"\n                        aria-label={landmarkLabel}\n                    >\n                        <p\n                            className=\"jkl-feedback__step-counter\"\n                            ref={focusRef}\n                        >\n                            Steg {step.number + 1} av {questions.length}\n                        </p>\n                        <QuestionComponent\n                            {...questions[step.number]}\n                            // eslint-disable-next-line jsx-a11y/no-autofocus\n                            autoFocus\n                            key={step.number}\n                        />\n                        <div className=\"jkl-spacing-xl--top\" aria-live=\"off\">\n                            <Button type=\"submit\">\n                                {step.isLast ? \"Send inn\" : \"Neste\"}\n                            </Button>\n                            <TertiaryButton\n                                onClick={handleAbort}\n                                className=\"jkl-spacing-xl--left\"\n                            >\n                                Avbryt\n                            </TertiaryButton>\n                        </div>\n                    </form>\n                )}\n                {submitted && !contactSubmitted && (\n                    <FeedbackSuccess {...successMessage} />\n                )}\n            </FollowUpProvider>\n        </div>\n    );\n};\n"],"names":["defaultSuccessMessage","title","children","Followup","questions","successMessage","onSubmit","noThanks","setNoThanks","useState","focusRef","useRef","followupState","useFollowup","handleAbort","handleNext","step","submitted","followupStarted","setFollowupStarted","setFollowupSubmitted","contactSubmitted","landmarkLabel","useFeedbackContext","useEffect","number","_a","current","focus","QuestionComponent","getQuestionFromType","type","Button","isLast","PrimaryButton","SecondaryButton","jsxs","FollowUpProvider","state","className","jsx","onClick","TertiaryButton","ref","length","createElement","autoFocus","key","FeedbackSuccess"],"mappings":"6eAaA,MAAMA,EAAwB,CAC1BC,MAAO,eACPC,SACI,yJAGKC,EAA8B,EACvCC,UAAAA,EACAC,eAAAA,EAAiBL,EACjBM,SAAAA,MAEM,MAACC,EAAUC,GAAeC,GAAS,GACnCC,EAAWC,EAA6B,MACxCC,EAAgBC,EAAYT,EAAWE,IACrCQ,YAAAA,EAAaC,WAAAA,EAAYC,KAAAA,EAAMC,UAAAA,GAAcL,GAEjDM,gBAAAA,EACAC,mBAAAA,EACAC,qBAAAA,EACAC,iBAAAA,EACAC,cAAAA,GACAC,IAEJC,GAAU,WACc,IAAhBR,EAAKS,SAGT,OAAAC,EAAAhB,EAASiB,UAATD,EAAkBE,QAAA,GACnB,CAACZ,IAEJQ,GAAU,KACNJ,EAAqBH,EAAS,GAC/B,CAACA,EAAWG,IAETS,MAAAA,EAAoBC,EAAoB1B,EAAUY,EAAKS,QAAQM,MAC/DC,EAAShB,EAAKiB,OAASC,EAAgBC,EAE7C,OAAI5B,EACO,OAIN,MAAI,CAAA,YAAU,SACXL,SAACkC,EAAAC,EAAA,CAAiBC,MAAO1B,EACpBV,SAAA,EAACgB,GACEkB,EAAC,MAAI,CAAAG,UAAU,wBACXrC,SAAA,CAACsC,EAAA,IAAA,CAAED,UAAU,2DAA2DrC,SAExE,mDACCsC,EAAA,IAAA,CAAED,UAAU,kCAAkCrC,SAG/C,0EACAsC,EAACN,EAAA,CACGO,QAAS,IAAMtB,GAAmB,GAClCoB,UAAU,wBACbrC,SAAA,mBAGAwC,EAAe,CAAAD,QAAS,IAAMjC,GAAY,GAAON,SAElD,iBAGNe,GAAaC,GACXkB,EAAC,OAAA,CACG9B,SAAUS,EACVwB,UAAU,wBACV,aAAYjB,EAEZpB,SAAA,CAAAkC,EAAC,IAAA,CACGG,UAAU,6BACVI,IAAKjC,EACRR,SAAA,CAAA,QACSc,EAAKS,OAAS,EAAE,OAAKrB,EAAUwC,UAEzCC,EAAChB,EAAA,IACOzB,EAAUY,EAAKS,QAEnBqB,WAAS,EACTC,IAAK/B,EAAKS,SAEbW,EAAA,MAAA,CAAIG,UAAU,sBAAsB,YAAU,MAC3CrC,SAAA,CAAAsC,EAACR,GAAOD,KAAK,SACR7B,SAAKc,EAAAiB,OAAS,WAAa,UAEhCO,EAACE,EAAA,CACGD,QAAS3B,EACTyB,UAAU,uBACbrC,SAAA,iBAMZe,IAAcI,GACVmB,EAAAQ,EAAA,IAAoB3C,QAGjC"}
+{"version":3,"file":"Followup.js","sources":["../../../../../src/components/feedback/followup/Followup.tsx"],"sourcesContent":["import React, { type FC, useEffect, useRef, useState } from \"react\";\nimport {\n    PrimaryButton,\n    SecondaryButton,\n    TertiaryButton,\n} from \"../../button/Button.js\";\nimport { FeedbackSuccess } from \"../FeedbackSuccess.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport type { FollowupProps } from \"../types.js\";\nimport { getQuestionFromType } from \"../utils.js\";\nimport { FollowUpProvider } from \"./followupContext.js\";\nimport { useFollowup } from \"./useFollowup.js\";\n\nconst defaultSuccessMessage = {\n    title: \"Takk, igjen!\",\n    children:\n        \"Vi setter pris på at du tok deg tid til å svare på flere spørsmål. Det hjelper oss med å gjøre nettsidene bedre for deg og alle andre som bruker dem.\",\n};\n\nexport const Followup: FC<FollowupProps> = ({\n    questions,\n    successMessage = defaultSuccessMessage,\n    onSubmit,\n}) => {\n    const [noThanks, setNoThanks] = useState(false);\n    const focusRef = useRef<HTMLParagraphElement>(null);\n    const followupState = useFollowup(questions, onSubmit);\n    const { handleAbort, handleNext, step, submitted } = followupState;\n    const {\n        followupStarted,\n        setFollowupStarted,\n        setFollowupSubmitted,\n        contactSubmitted,\n        landmarkLabel,\n    } = useFeedbackContext();\n\n    useEffect(() => {\n        if (step.number === 0) {\n            return;\n        }\n        focusRef.current?.focus();\n    }, [step]);\n\n    useEffect(() => {\n        setFollowupSubmitted(submitted);\n    }, [submitted, setFollowupSubmitted]);\n\n    const QuestionComponent = getQuestionFromType(questions[step.number].type);\n    const Button = step.isLast ? PrimaryButton : SecondaryButton;\n\n    if (noThanks) {\n        return null;\n    }\n\n    return (\n        <div aria-live=\"polite\">\n            <FollowUpProvider state={followupState}>\n                {!followupStarted && (\n                    <div className=\"jkl-feedback__fade-in\">\n                        <p className=\"jkl-heading-4 jkl-spacing-40--top jkl-spacing-8--bottom\">\n                            Har du tid til å svare på noen flere spørsmål?\n                        </p>\n                        <p className=\"jkl-body jkl-spacing-40--bottom\">\n                            Det tar kun et minutt, og hjelper oss å lage bedre\n                            løsninger for deg.\n                        </p>\n                        <PrimaryButton\n                            onClick={() => setFollowupStarted(true)}\n                            className=\"jkl-spacing-40--right\"\n                        >\n                            Jeg har tid!\n                        </PrimaryButton>\n                        <TertiaryButton onClick={() => setNoThanks(true)}>\n                            Nei takk\n                        </TertiaryButton>\n                    </div>\n                )}\n                {!submitted && followupStarted && (\n                    <form\n                        onSubmit={handleNext}\n                        className=\"jkl-feedback__fade-in\"\n                        aria-label={landmarkLabel}\n                    >\n                        <p\n                            className=\"jkl-feedback__step-counter\"\n                            ref={focusRef}\n                        >\n                            Steg {step.number + 1} av {questions.length}\n                        </p>\n                        <QuestionComponent\n                            {...questions[step.number]}\n                            // eslint-disable-next-line jsx-a11y/no-autofocus\n                            autoFocus\n                            key={step.number}\n                        />\n                        <div className=\"jkl-spacing-40--top\" aria-live=\"off\">\n                            <Button type=\"submit\">\n                                {step.isLast ? \"Send inn\" : \"Neste\"}\n                            </Button>\n                            <TertiaryButton\n                                onClick={handleAbort}\n                                className=\"jkl-spacing-40--left\"\n                            >\n                                Avbryt\n                            </TertiaryButton>\n                        </div>\n                    </form>\n                )}\n                {submitted && !contactSubmitted && (\n                    <FeedbackSuccess {...successMessage} />\n                )}\n            </FollowUpProvider>\n        </div>\n    );\n};\n"],"names":["defaultSuccessMessage","title","children","Followup","questions","successMessage","onSubmit","noThanks","setNoThanks","useState","focusRef","useRef","followupState","useFollowup","handleAbort","handleNext","step","submitted","followupStarted","setFollowupStarted","setFollowupSubmitted","contactSubmitted","landmarkLabel","useFeedbackContext","useEffect","number","current","focus","QuestionComponent","getQuestionFromType","type","Button","isLast","PrimaryButton","SecondaryButton","jsxs","FollowUpProvider","state","className","jsx","onClick","TertiaryButton","ref","length","createElement","autoFocus","key","FeedbackSuccess"],"mappings":"6eAaA,MAAMA,EAAwB,CAC1BC,MAAO,eACPC,SACI,yJAGKC,EAA8B,EACvCC,UAAAA,EACAC,eAAAA,EAAiBL,EACjBM,SAAAA,MAEM,MAACC,EAAUC,GAAeC,GAAS,GACnCC,EAAWC,EAA6B,MACxCC,EAAgBC,EAAYT,EAAWE,IACrCQ,YAAAA,EAAaC,WAAAA,EAAYC,KAAAA,EAAMC,UAAAA,GAAcL,GAEjDM,gBAAAA,EACAC,mBAAAA,EACAC,qBAAAA,EACAC,iBAAAA,EACAC,cAAAA,GACAC,IAEJC,GAAU,KACc,IAAhBR,EAAKS,QAGTf,EAASgB,SAASC,OAAM,GACzB,CAACX,IAEJQ,GAAU,KACNJ,EAAqBH,EAAS,GAC/B,CAACA,EAAWG,IAETQ,MAAAA,EAAoBC,EAAoBzB,EAAUY,EAAKS,QAAQK,MAC/DC,EAASf,EAAKgB,OAASC,EAAgBC,EAE7C,OAAI3B,EACO,OAIN,MAAI,CAAA,YAAU,SACXL,SAACiC,EAAAC,EAAA,CAAiBC,MAAOzB,EACpBV,SAAA,EAACgB,GACEiB,EAAC,MAAI,CAAAG,UAAU,wBACXpC,SAAA,CAACqC,EAAA,IAAA,CAAED,UAAU,0DAA0DpC,SAEvE,mDACCqC,EAAA,IAAA,CAAED,UAAU,kCAAkCpC,SAG/C,0EACAqC,EAACN,EAAA,CACGO,QAAS,IAAMrB,GAAmB,GAClCmB,UAAU,wBACbpC,SAAA,mBAGAuC,EAAe,CAAAD,QAAS,IAAMhC,GAAY,GAAON,SAElD,iBAGNe,GAAaC,GACXiB,EAAC,OAAA,CACG7B,SAAUS,EACVuB,UAAU,wBACV,aAAYhB,EAEZpB,SAAA,CAAAiC,EAAC,IAAA,CACGG,UAAU,6BACVI,IAAKhC,EACRR,SAAA,CAAA,QACSc,EAAKS,OAAS,EAAE,OAAKrB,EAAUuC,UAEzCC,EAAChB,EAAA,IACOxB,EAAUY,EAAKS,QAEnBoB,WAAS,EACTC,IAAK9B,EAAKS,SAEbU,EAAA,MAAA,CAAIG,UAAU,sBAAsB,YAAU,MAC3CpC,SAAA,CAAAqC,EAACR,GAAOD,KAAK,SACR5B,SAAKc,EAAAgB,OAAS,WAAa,UAEhCO,EAACE,EAAA,CACGD,QAAS1B,EACTwB,UAAU,uBACbpC,SAAA,iBAMZe,IAAcI,GACVkB,EAAAQ,EAAA,IAAoB1C,QAGjC"}

package/build/es/components/feedback/followup/useFollowup.js

@@ -1,2 +1,2 @@
-import{useState as e,useRef as t,useEffect as n,useCallback as u}from"react";const s=(s,r)=>{const[o,a]=e(),[i,l]=e({number:0,question:s[0],isLast:1===s.length}),[d,m]=e(!1),[v,c]=e(!1),[b,f]=e(),p=t({values:o,submitted:v,onSubmit:r});n((()=>{p.current={...p.current,values:o,submitted:v}}),[o,v]);const q=u((()=>{!p.current.submitted&&void 0!==p.current.values&&p.current.onSubmit(p.current.values)}),[]);return n((()=>{d&&(q(),c(!0))}),[d,q]),n((()=>(typeof window<"u"&&window.addEventListener("beforeunload",q),()=>{q(),window.removeEventListener("beforeunload",q)})),[q]),{questions:s,values:o,step:i,currentValue:b,setCurrentValue:f,submitted:v,handleNext:function(e){null==e||e.preventDefault();const t=Array.isArray(b)?b.map((e=>e.value.toString())):null==b?void 0:b.value,n={...i.question,name:i.question.name||i.question.label,value:t};a((e=>[...(null==e?void 0:e.filter((e=>e.name!==n.name)))||[],n])),f(void 0),i.isLast?m(!0):l((e=>{const t=e.number+1;return{number:t,question:s[t],isLast:t+1>=s.length}}))},handleAbort:function(){a(void 0),f(void 0),l({number:0,question:s[0],isLast:1===s.length}),c(!0)}}};export{s as useFollowup};
+import{useState as e,useRef as t,useEffect as n,useCallback as u}from"react";const s=(s,r)=>{const[a,o]=e(),[i,l]=e({number:0,question:s[0],isLast:1===s.length}),[m,c]=e(!1),[d,v]=e(!1),[b,f]=e(),p=t({values:a,submitted:d,onSubmit:r});n((()=>{p.current={...p.current,values:a,submitted:d}}),[a,d]);const q=u((()=>{!p.current.submitted&&void 0!==p.current.values&&p.current.onSubmit(p.current.values)}),[]);return n((()=>{m&&(q(),v(!0))}),[m,q]),n((()=>(typeof window<"u"&&window.addEventListener("beforeunload",q),()=>{q(),window.removeEventListener("beforeunload",q)})),[q]),{questions:s,values:a,step:i,currentValue:b,setCurrentValue:f,submitted:d,handleNext:function(e){e?.preventDefault();const t=Array.isArray(b)?b.map((e=>e.value.toString())):b?.value,n={...i.question,name:i.question.name||i.question.label,value:t};o((e=>[...e?.filter((e=>e.name!==n.name))||[],n])),f(void 0),i.isLast?c(!0):l((e=>{const t=e.number+1;return{number:t,question:s[t],isLast:t+1>=s.length}}))},handleAbort:function(){o(void 0),f(void 0),l({number:0,question:s[0],isLast:1===s.length}),v(!0)}}};export{s as useFollowup};
 //# sourceMappingURL=useFollowup.js.map

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

@@ -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,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"}
+{"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,GAChBA,GAAGC,iBAEH,MAAMC,EAAQC,MAAMC,QAAQhB,GACtBA,EAAaiB,KAAKC,GAAWA,EAAOJ,MAAMK,aAC1CnB,GAAcc,MAEdM,EAAW,IACV9B,EAAKG,SACR4B,KAAM/B,EAAKG,SAAS4B,MAAQ/B,EAAKG,SAAS6B,MAC1CR,MAAAA,GAGJ1B,GAAWmC,GAKA,IAHHA,GAAWC,QACNC,GAAaA,EAASJ,OAASD,EAASC,QACxC,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/MainQuestion.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as t,jsx as s}from"react/jsx-runtime";import{c as i}from"../../../../clsx-BeLtu-UY.js";import{useEffect as a}from"react";import{useAnimatedHeight as o}from"../../../hooks/useAnimatedHeight/useAnimatedHeight.js";import{PrimaryButton as r,TertiaryButton as n}from"../../button/Button.js";import{FeedbackSuccess as l}from"../FeedbackSuccess.js";import{useFeedbackContext as m}from"../feedbackContext.js";import{AddonQuestion as d}from"../questions/AddonQuestion.js";import{getQuestionFromType as u}from"../utils.js";import{MainQuestionContextProvider as c}from"./mainQuestionContext.js";import{useMainQuestion as b}from"./useMainQuestion.js";const p={title:"Takk for tilbakemeldingen!",children:"Husk at vi ikke kan besvare meldinger fra dette skjemaet. Kontakt gjerne din forsikringsrådgiver om du har flere spørsmål."},k=({label:k,options:f,type:j,addOnQuestion:h,successMessage:g=p,helpLabel:v,onSubmit:x})=>{const Q=b(x),{setFeedbackSubmitted:y,contactSubmitted:S,landmarkLabel:A}=m(),{handleSubmit:C,currentValue:F,setCurrentValue:_,submitted:L}=Q,[M]=o(void 0!==F);a((()=>{y(L)}),[L,y]);const H=u(j);return e(t,{children:[!L&&s(c,{state:Q,children:e("form",{onSubmit:C,"aria-label":A,children:[s(H,{label:k,options:f,helpLabel:v}),e("div",{ref:M,className:i({"jkl-feedback__submit-wrapper":!0,"jkl-feedback__submit-wrapper--hidden":void 0===F}),children:[h&&s(d,{helpLabel:"object"==typeof h?h.helpLabel:void 0,label:"object"==typeof h?h.label:void 0}),e("div",{className:"jkl-feedback__buttons jkl-spacing-xl--top",children:[s(r,{className:"jkl-spacing-xl--right",children:"Send"}),s(n,{type:"button",onClick:()=>_(void 0),children:"Avbryt"})]})]})]})}),L&&!S&&s(l,{...g})]})};export{k as MainQuestion};
+import{jsxs as e,Fragment as t,jsx as s}from"react/jsx-runtime";import{c as i}from"../../../../clsx-BeLtu-UY.js";import{useEffect as a}from"react";import{useAnimatedHeight as o}from"../../../hooks/useAnimatedHeight/useAnimatedHeight.js";import{PrimaryButton as r,TertiaryButton as n}from"../../button/Button.js";import{FeedbackSuccess as l}from"../FeedbackSuccess.js";import{useFeedbackContext as m}from"../feedbackContext.js";import{AddonQuestion as d}from"../questions/AddonQuestion.js";import{getQuestionFromType as u}from"../utils.js";import{MainQuestionContextProvider as c}from"./mainQuestionContext.js";import{useMainQuestion as b}from"./useMainQuestion.js";const p={title:"Takk for tilbakemeldingen!",children:"Husk at vi ikke kan besvare meldinger fra dette skjemaet. Kontakt gjerne din forsikringsrådgiver om du har flere spørsmål."},k=({label:k,options:f,type:j,addOnQuestion:h,successMessage:g=p,helpLabel:v,onSubmit:x})=>{const Q=b(x),{setFeedbackSubmitted:y,contactSubmitted:S,landmarkLabel:A}=m(),{handleSubmit:C,currentValue:F,setCurrentValue:_,submitted:L}=Q,[M]=o(void 0!==F);a((()=>{y(L)}),[L,y]);const H=u(j);return e(t,{children:[!L&&s(c,{state:Q,children:e("form",{onSubmit:C,"aria-label":A,children:[s(H,{label:k,options:f,helpLabel:v}),e("div",{ref:M,className:i({"jkl-feedback__submit-wrapper":!0,"jkl-feedback__submit-wrapper--hidden":void 0===F}),children:[h&&s(d,{helpLabel:"object"==typeof h?h.helpLabel:void 0,label:"object"==typeof h?h.label:void 0}),e("div",{className:"jkl-feedback__buttons jkl-spacing-40--top",children:[s(r,{className:"jkl-spacing-40--right",children:"Send"}),s(n,{type:"button",onClick:()=>_(void 0),children:"Avbryt"})]})]})]})}),L&&!S&&s(l,{...g})]})};export{k as MainQuestion};
 //# sourceMappingURL=MainQuestion.js.map

package/build/es/components/feedback/main-question/MainQuestion.js.map

@@ -1 +1 @@
-{"version":3,"file":"MainQuestion.js","sources":["../../../../../src/components/feedback/main-question/MainQuestion.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type ComponentProps,\n    type FC,\n    type ReactNode,\n    useEffect,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { PrimaryButton, TertiaryButton } from \"../../button/Button.js\";\nimport type { Feedback } from \"../Feedback.js\";\nimport { FeedbackSuccess } from \"../FeedbackSuccess.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport { AddonQuestion } from \"../questions/AddonQuestion.js\";\nimport type { FeedbackOption, FeedbackType } from \"../types.js\";\nimport { getQuestionFromType } from \"../utils.js\";\nimport { MainQuestionContextProvider } from \"./mainQuestionContext.js\";\nimport { useMainQuestion } from \"./useMainQuestion.js\";\n\nconst defaultSuccessMessage = {\n    title: \"Takk for tilbakemeldingen!\",\n    children:\n        \"Husk at vi ikke kan besvare meldinger fra dette skjemaet. Kontakt gjerne din forsikringsrådgiver om du har flere spørsmål.\",\n};\n\ntype Props = Pick<ComponentProps<typeof Feedback>, \"addOnQuestion\"> & {\n    type: \"radio\" | \"smiley\";\n    label: string;\n    helpLabel?: string;\n    options: FeedbackOption[];\n    successMessage?: {\n        title: string;\n        children: ReactNode;\n    };\n    onSubmit: (value: FeedbackType) => void;\n};\n\nexport const MainQuestion: FC<Props> = ({\n    label,\n    options,\n    type,\n    addOnQuestion,\n    successMessage = defaultSuccessMessage,\n    helpLabel,\n    onSubmit,\n}) => {\n    const mainQuestionState = useMainQuestion(onSubmit);\n\n    const { setFeedbackSubmitted, contactSubmitted, landmarkLabel } =\n        useFeedbackContext();\n    const { handleSubmit, currentValue, setCurrentValue, submitted } =\n        mainQuestionState;\n    const [submitWrapperRef] = useAnimatedHeight<HTMLDivElement>(\n        currentValue !== undefined,\n    );\n\n    useEffect(() => {\n        setFeedbackSubmitted(submitted);\n    }, [submitted, setFeedbackSubmitted]);\n\n    const MainQuestionComp = getQuestionFromType(type);\n\n    return (\n        <>\n            {!submitted && (\n                <MainQuestionContextProvider state={mainQuestionState}>\n                    <form onSubmit={handleSubmit} aria-label={landmarkLabel}>\n                        <MainQuestionComp\n                            label={label}\n                            options={options}\n                            helpLabel={helpLabel}\n                        />\n                        <div\n                            ref={submitWrapperRef}\n                            className={clsx({\n                                \"jkl-feedback__submit-wrapper\": true,\n                                \"jkl-feedback__submit-wrapper--hidden\":\n                                    currentValue === undefined,\n                            })}\n                        >\n                            {addOnQuestion && (\n                                <AddonQuestion\n                                    helpLabel={\n                                        typeof addOnQuestion === \"object\"\n                                            ? addOnQuestion.helpLabel\n                                            : undefined\n                                    }\n                                    label={\n                                        typeof addOnQuestion === \"object\"\n                                            ? addOnQuestion.label\n                                            : undefined\n                                    }\n                                />\n                            )}\n                            <div className=\"jkl-feedback__buttons jkl-spacing-xl--top\">\n                                <PrimaryButton className=\"jkl-spacing-xl--right\">\n                                    Send\n                                </PrimaryButton>\n                                <TertiaryButton\n                                    type=\"button\"\n                                    onClick={() => setCurrentValue(undefined)}\n                                >\n                                    Avbryt\n                                </TertiaryButton>\n                            </div>\n                        </div>\n                    </form>\n                </MainQuestionContextProvider>\n            )}\n            {submitted && !contactSubmitted && (\n                <FeedbackSuccess {...successMessage} />\n            )}\n        </>\n    );\n};\n"],"names":["defaultSuccessMessage","title","children","MainQuestion","label","options","type","addOnQuestion","successMessage","helpLabel","onSubmit","mainQuestionState","useMainQuestion","setFeedbackSubmitted","contactSubmitted","landmarkLabel","useFeedbackContext","handleSubmit","currentValue","setCurrentValue","submitted","submitWrapperRef","useAnimatedHeight","useEffect","MainQuestionComp","getQuestionFromType","jsxs","Fragment","jsx","MainQuestionContextProvider","state","ref","className","clsx","AddonQuestion","PrimaryButton","TertiaryButton","onClick","FeedbackSuccess"],"mappings":"ypBAkBA,MAAMA,EAAwB,CAC1BC,MAAO,6BACPC,SACI,8HAeKC,EAA0B,EACnCC,MAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,cAAAA,EACAC,eAAAA,EAAiBR,EACjBS,UAAAA,EACAC,SAAAA,MAEMC,MAAAA,EAAoBC,EAAgBF,IAElCG,qBAAAA,EAAsBC,iBAAAA,EAAkBC,cAAAA,GAC5CC,KACIC,aAAAA,EAAcC,aAAAA,EAAcC,gBAAAA,EAAiBC,UAAAA,GACjDT,GACGU,GAAoBC,OACN,IAAjBJ,GAGJK,GAAU,KACNV,EAAqBO,EAAS,GAC/B,CAACA,EAAWP,IAETW,MAAAA,EAAmBC,EAAoBnB,GAE7C,OAESoB,EAAAC,EAAA,CAAAzB,SAAA,EAACkB,GACGQ,EAAAC,EAAA,CAA4BC,MAAOnB,EAChCT,WAAC,OAAK,CAAAQ,SAAUO,EAAc,aAAYF,EACtCb,SAAA,CAAA0B,EAACJ,EAAA,CACGpB,MAAAA,EACAC,QAAAA,EACAI,UAAAA,IAEJiB,EAAC,MAAA,CACGK,IAAKV,EACLW,UAAWC,EAAK,CACZ,gCAAgC,EAChC,4CACqB,IAAjBf,IAGPhB,SAAA,CACGK,GAAAqB,EAACM,EAAA,CACGzB,UAC6B,iBAAlBF,EACDA,EAAcE,eACd,EAEVL,MAC6B,iBAAlBG,EACDA,EAAcH,WACd,IAIlBsB,EAAC,MAAI,CAAAM,UAAU,4CACX9B,SAAA,CAAC0B,EAAAO,EAAA,CAAcH,UAAU,wBAAwB9B,SAEjD,SACA0B,EAACQ,EAAA,CACG9B,KAAK,SACL+B,QAAS,IAAMlB,OAAgB,GAClCjB,SAAA,sBAQpBkB,IAAcN,GACVc,EAAAU,EAAA,IAAoB9B,MAE7B"}
+{"version":3,"file":"MainQuestion.js","sources":["../../../../../src/components/feedback/main-question/MainQuestion.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type ComponentProps,\n    type FC,\n    type ReactNode,\n    useEffect,\n} from \"react\";\nimport { useAnimatedHeight } from \"../../../hooks/useAnimatedHeight/useAnimatedHeight.js\";\nimport { PrimaryButton, TertiaryButton } from \"../../button/Button.js\";\nimport type { Feedback } from \"../Feedback.js\";\nimport { FeedbackSuccess } from \"../FeedbackSuccess.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport { AddonQuestion } from \"../questions/AddonQuestion.js\";\nimport type { FeedbackOption, FeedbackType } from \"../types.js\";\nimport { getQuestionFromType } from \"../utils.js\";\nimport { MainQuestionContextProvider } from \"./mainQuestionContext.js\";\nimport { useMainQuestion } from \"./useMainQuestion.js\";\n\nconst defaultSuccessMessage = {\n    title: \"Takk for tilbakemeldingen!\",\n    children:\n        \"Husk at vi ikke kan besvare meldinger fra dette skjemaet. Kontakt gjerne din forsikringsrådgiver om du har flere spørsmål.\",\n};\n\ntype Props = Pick<ComponentProps<typeof Feedback>, \"addOnQuestion\"> & {\n    type: \"radio\" | \"smiley\";\n    label: string;\n    helpLabel?: string;\n    options: FeedbackOption[];\n    successMessage?: {\n        title: string;\n        children: ReactNode;\n    };\n    onSubmit: (value: FeedbackType) => void;\n};\n\nexport const MainQuestion: FC<Props> = ({\n    label,\n    options,\n    type,\n    addOnQuestion,\n    successMessage = defaultSuccessMessage,\n    helpLabel,\n    onSubmit,\n}) => {\n    const mainQuestionState = useMainQuestion(onSubmit);\n\n    const { setFeedbackSubmitted, contactSubmitted, landmarkLabel } =\n        useFeedbackContext();\n    const { handleSubmit, currentValue, setCurrentValue, submitted } =\n        mainQuestionState;\n    const [submitWrapperRef] = useAnimatedHeight<HTMLDivElement>(\n        currentValue !== undefined,\n    );\n\n    useEffect(() => {\n        setFeedbackSubmitted(submitted);\n    }, [submitted, setFeedbackSubmitted]);\n\n    const MainQuestionComp = getQuestionFromType(type);\n\n    return (\n        <>\n            {!submitted && (\n                <MainQuestionContextProvider state={mainQuestionState}>\n                    <form onSubmit={handleSubmit} aria-label={landmarkLabel}>\n                        <MainQuestionComp\n                            label={label}\n                            options={options}\n                            helpLabel={helpLabel}\n                        />\n                        <div\n                            ref={submitWrapperRef}\n                            className={clsx({\n                                \"jkl-feedback__submit-wrapper\": true,\n                                \"jkl-feedback__submit-wrapper--hidden\":\n                                    currentValue === undefined,\n                            })}\n                        >\n                            {addOnQuestion && (\n                                <AddonQuestion\n                                    helpLabel={\n                                        typeof addOnQuestion === \"object\"\n                                            ? addOnQuestion.helpLabel\n                                            : undefined\n                                    }\n                                    label={\n                                        typeof addOnQuestion === \"object\"\n                                            ? addOnQuestion.label\n                                            : undefined\n                                    }\n                                />\n                            )}\n                            <div className=\"jkl-feedback__buttons jkl-spacing-40--top\">\n                                <PrimaryButton className=\"jkl-spacing-40--right\">\n                                    Send\n                                </PrimaryButton>\n                                <TertiaryButton\n                                    type=\"button\"\n                                    onClick={() => setCurrentValue(undefined)}\n                                >\n                                    Avbryt\n                                </TertiaryButton>\n                            </div>\n                        </div>\n                    </form>\n                </MainQuestionContextProvider>\n            )}\n            {submitted && !contactSubmitted && (\n                <FeedbackSuccess {...successMessage} />\n            )}\n        </>\n    );\n};\n"],"names":["defaultSuccessMessage","title","children","MainQuestion","label","options","type","addOnQuestion","successMessage","helpLabel","onSubmit","mainQuestionState","useMainQuestion","setFeedbackSubmitted","contactSubmitted","landmarkLabel","useFeedbackContext","handleSubmit","currentValue","setCurrentValue","submitted","submitWrapperRef","useAnimatedHeight","useEffect","MainQuestionComp","getQuestionFromType","jsxs","Fragment","jsx","MainQuestionContextProvider","state","ref","className","clsx","AddonQuestion","PrimaryButton","TertiaryButton","onClick","FeedbackSuccess"],"mappings":"ypBAkBA,MAAMA,EAAwB,CAC1BC,MAAO,6BACPC,SACI,8HAeKC,EAA0B,EACnCC,MAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,cAAAA,EACAC,eAAAA,EAAiBR,EACjBS,UAAAA,EACAC,SAAAA,MAEMC,MAAAA,EAAoBC,EAAgBF,IAElCG,qBAAAA,EAAsBC,iBAAAA,EAAkBC,cAAAA,GAC5CC,KACIC,aAAAA,EAAcC,aAAAA,EAAcC,gBAAAA,EAAiBC,UAAAA,GACjDT,GACGU,GAAoBC,OACN,IAAjBJ,GAGJK,GAAU,KACNV,EAAqBO,EAAS,GAC/B,CAACA,EAAWP,IAETW,MAAAA,EAAmBC,EAAoBnB,GAE7C,OAESoB,EAAAC,EAAA,CAAAzB,SAAA,EAACkB,GACGQ,EAAAC,EAAA,CAA4BC,MAAOnB,EAChCT,WAAC,OAAK,CAAAQ,SAAUO,EAAc,aAAYF,EACtCb,SAAA,CAAA0B,EAACJ,EAAA,CACGpB,MAAAA,EACAC,QAAAA,EACAI,UAAAA,IAEJiB,EAAC,MAAA,CACGK,IAAKV,EACLW,UAAWC,EAAK,CACZ,gCAAgC,EAChC,4CACqB,IAAjBf,IAGPhB,SAAA,CACGK,GAAAqB,EAACM,EAAA,CACGzB,UAC6B,iBAAlBF,EACDA,EAAcE,eACd,EAEVL,MAC6B,iBAAlBG,EACDA,EAAcH,WACd,IAIlBsB,EAAC,MAAI,CAAAM,UAAU,4CACX9B,SAAA,CAAC0B,EAAAO,EAAA,CAAcH,UAAU,wBAAwB9B,SAEjD,SACA0B,EAACQ,EAAA,CACG9B,KAAK,SACL+B,QAAS,IAAMlB,OAAgB,GAClCjB,SAAA,sBAQpBkB,IAAcN,GACVc,EAAAU,EAAA,IAAoB9B,MAE7B"}

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

@@ -1,2 +1,2 @@
-import{useState as e,useRef as t,useEffect as u,useCallback as s}from"react";const a=a=>{const[n,r]=e(),[i,o]=e(),[m,l]=e(!1),c=t({onSubmit:a,currentValue:n,message:i,submitted:m});u((()=>{c.current={...c.current,onSubmit:a,currentValue:n,message:i,submitted:m}}),[a,n,i,m]);const d=s(((e=!0)=>{const{message:t,currentValue:u,submitted:s,onSubmit:a}=c.current;if(!s&&void 0!==u){a({feedbackValue:Array.isArray(u)?u.map((e=>e.value)):null==u?void 0:u.value,intentionalSubmit:e,...e&&t?{message:t}:{}})}}),[]),b=s((()=>d(!1)),[d]);return u((()=>(typeof window<"u"&&window.addEventListener("beforeunload",b),()=>{b(),window.removeEventListener("beforeunload",b)})),[b]),{currentValue:n,setCurrentValue:r,message:i,setMessage:o,submitted:m,handleSubmit:e=>{e.preventDefault(),d(),l(!0)}}};export{a as useMainQuestion};
+import{useState as e,useRef as t,useEffect as s,useCallback as u}from"react";const a=a=>{const[n,r]=e(),[i,o]=e(),[m,c]=e(!1),l=t({onSubmit:a,currentValue:n,message:i,submitted:m});s((()=>{l.current={...l.current,onSubmit:a,currentValue:n,message:i,submitted:m}}),[a,n,i,m]);const d=u(((e=!0)=>{const{message:t,currentValue:s,submitted:u,onSubmit:a}=l.current;if(!u&&void 0!==s){a({feedbackValue:Array.isArray(s)?s.map((e=>e.value)):s?.value,intentionalSubmit:e,...e&&t?{message:t}:{}})}}),[]),b=u((()=>d(!1)),[d]);return s((()=>(typeof window<"u"&&window.addEventListener("beforeunload",b),()=>{b(),window.removeEventListener("beforeunload",b)})),[b]),{currentValue:n,setCurrentValue:r,message:i,setMessage:o,submitted:m,handleSubmit:e=>{e.preventDefault(),d(),c(!0)}}};export{a as useMainQuestion};
 //# sourceMappingURL=useMainQuestion.js.map

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

@@ -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,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"}
+{"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,GAAcmB,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/AddonQuestion.js

@@ -1,2 +1,2 @@
-import{jsxs as e,Fragment as r,jsx as t}from"react/jsx-runtime";import{useState as n,useEffect as a}from"react";import{TextArea as o}from"../../text-area/TextArea.js";import{useFeedbackContext as s}from"../feedbackContext.js";import{useMainQuestionContext as l}from"../main-question/mainQuestionContext.js";const i=({helpLabel:i="Ikke skriv personlige opplysninger. Tilbakemeldinger som kommer inn her blir ikke besvart, men brukt i videre arbeid med å forbedre tjenestene våre.",label:u})=>{const{counter:d}=s(),c=l(),[m,p]=n();if(a((()=>{var e,r,t;const n=Array.isArray(null==c?void 0:c.currentValue)?null==(e=null==c?void 0:c.currentValue[0].textAreaLabel)?void 0:e.toString():null==(t=null==(r=null==c?void 0:c.currentValue)?void 0:r.textAreaLabel)?void 0:t.toString();p(n||u)}),[null==c?void 0:c.currentValue,u]),!c)return console.error("Addon question must be used inside a MainQuestion context provider"),null;const{message:b,setMessage:v}=c;return e(r,{children:[void 0!==c.currentValue&&e("div",{className:"jkl-sr-only","aria-live":"polite",children:[m," ",i]}),t(o,{startOpen:!0,rows:4,"data-testid":"jkl-feedback__open-question",className:"jkl-spacing-xl--bottom jkl-spacing-xl--top",label:m,labelProps:{srOnly:!0},placeholder:m,helpLabel:i,value:b||"",onChange:e=>v(e.target.value),counter:d})]})};export{i as AddonQuestion};
+import{jsxs as e,Fragment as t,jsx as r}from"react/jsx-runtime";import{useState as a,useEffect as s}from"react";import{TextArea as n}from"../../text-area/TextArea.js";import{useFeedbackContext as o}from"../feedbackContext.js";import{useMainQuestionContext as i}from"../main-question/mainQuestionContext.js";const l=({helpLabel:l="Ikke skriv personlige opplysninger. Tilbakemeldinger som kommer inn her blir ikke besvart, men brukt i videre arbeid med å forbedre tjenestene våre.",label:u})=>{const{counter:c}=o(),m=i(),[d,p]=a();if(s((()=>{const e=Array.isArray(m?.currentValue)?m?.currentValue[0].textAreaLabel?.toString():m?.currentValue?.textAreaLabel?.toString();p(e||u)}),[m?.currentValue,u]),!m)return console.error("Addon question must be used inside a MainQuestion context provider"),null;const{message:b,setMessage:k}=m;return e(t,{children:[void 0!==m.currentValue&&e("div",{className:"jkl-sr-only","aria-live":"polite",children:[d," ",l]}),r(n,{startOpen:!0,rows:4,"data-testid":"jkl-feedback__open-question",className:"jkl-spacing-40--bottom jkl-spacing-40--top",label:d,labelProps:{srOnly:!0},placeholder:d,helpLabel:l,value:b||"",onChange:e=>k(e.target.value),counter:c})]})};export{l as AddonQuestion};
 //# sourceMappingURL=AddonQuestion.js.map

package/build/es/components/feedback/questions/AddonQuestion.js.map

@@ -1 +1 @@
-{"version":3,"file":"AddonQuestion.js","sources":["../../../../../src/components/feedback/questions/AddonQuestion.tsx"],"sourcesContent":["import React, { type ChangeEventHandler, useEffect, useState } from \"react\";\nimport { TextArea } from \"../../text-area/TextArea.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\n\ninterface Props {\n    label?: string;\n    helpLabel?: string;\n}\n\nexport const AddonQuestion: React.FC<Props> = ({\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    label,\n}) => {\n    const { counter } = useFeedbackContext();\n    const context = useMainQuestionContext();\n    const [dynamicLabel, setDynamicLabel] = useState<string>();\n\n    useEffect(() => {\n        const labelFromValue = Array.isArray(context?.currentValue)\n            ? context?.currentValue[0].textAreaLabel?.toString()\n            : context?.currentValue?.textAreaLabel?.toString();\n        setDynamicLabel(labelFromValue || label);\n    }, [context?.currentValue, label]);\n\n    if (!context) {\n        console.error(\n            \"Addon question must be used inside a MainQuestion context provider\",\n        );\n        return null;\n    }\n\n    const { message, setMessage } = context;\n    const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n        setMessage(e.target.value);\n\n    return (\n        <>\n            {context.currentValue !== undefined && (\n                <div className=\"jkl-sr-only\" aria-live=\"polite\">\n                    {dynamicLabel} {helpLabel}\n                </div>\n            )}\n            <TextArea\n                startOpen\n                rows={4}\n                data-testid=\"jkl-feedback__open-question\"\n                className=\"jkl-spacing-xl--bottom jkl-spacing-xl--top\"\n                label={dynamicLabel}\n                labelProps={{ srOnly: true }}\n                placeholder={dynamicLabel}\n                helpLabel={helpLabel}\n                value={message || \"\"}\n                onChange={handleChange}\n                counter={counter}\n            />\n        </>\n    );\n};\n"],"names":["AddonQuestion","helpLabel","label","counter","useFeedbackContext","context","useMainQuestionContext","dynamicLabel","setDynamicLabel","useState","useEffect","labelFromValue","Array","isArray","currentValue","_a","textAreaLabel","toString","_c","_b","console","error","message","setMessage","jsxs","Fragment","children","className","jsx","TextArea","startOpen","rows","labelProps","srOnly","placeholder","value","onChange","e","target"],"mappings":"mTAUO,MAAMA,EAAiC,EAC1CC,UAAAA,EAAY,uJACZC,MAAAA,MAEM,MAAEC,QAAAA,GAAYC,IACdC,EAAUC,KACTC,EAAcC,GAAmBC,IASxC,GAPAC,GAAU,eACN,MAAMC,EAAiBC,MAAMC,QAAQ,MAAAR,OAAAA,EAAAA,EAASS,cACxC,OAAAC,EAAA,MAAAV,OAAAA,EAAAA,EAASS,aAAa,GAAGE,oBAAzB,EAAAD,EAAwCE,WACxC,OAAAC,EAAA,OAAAC,EAAA,MAAAd,OAAA,EAAAA,EAASS,mBAATK,EAAAA,EAAuBH,oBAAvB,EAAAE,EAAsCD,WAC5CT,EAAgBG,GAAkBT,EAAK,GACxC,CAAC,MAAAG,OAAA,EAAAA,EAASS,aAAcZ,KAEtBG,EACO,OAAAe,QAAAC,MACJ,sEAEG,KAGL,MAAEC,QAAAA,EAASC,WAAAA,GAAelB,EAIhC,OAESmB,EAAAC,EAAA,CAAAC,SAAA,MAAyB,IAAzBrB,EAAQS,cACLU,EAAC,OAAIG,UAAU,cAAc,YAAU,SAClCD,SAAA,CAAAnB,EAAa,IAAEN,KAGxB2B,EAACC,EAAA,CACGC,WAAS,EACTC,KAAM,EACN,cAAY,8BACZJ,UAAU,6CACVzB,MAAOK,EACPyB,WAAY,CAAEC,QAAQ,GACtBC,YAAa3B,EACbN,UAAAA,EACAkC,MAAOb,GAAW,GAClBc,SApBmDC,GAC3Dd,EAAWc,EAAEC,OAAOH,OAoBZhC,QAAAA,MAER"}
+{"version":3,"file":"AddonQuestion.js","sources":["../../../../../src/components/feedback/questions/AddonQuestion.tsx"],"sourcesContent":["import React, { type ChangeEventHandler, useEffect, useState } from \"react\";\nimport { TextArea } from \"../../text-area/TextArea.js\";\nimport { useFeedbackContext } from \"../feedbackContext.js\";\nimport { useMainQuestionContext } from \"../main-question/mainQuestionContext.js\";\n\ninterface Props {\n    label?: string;\n    helpLabel?: string;\n}\n\nexport const AddonQuestion: React.FC<Props> = ({\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    label,\n}) => {\n    const { counter } = useFeedbackContext();\n    const context = useMainQuestionContext();\n    const [dynamicLabel, setDynamicLabel] = useState<string>();\n\n    useEffect(() => {\n        const labelFromValue = Array.isArray(context?.currentValue)\n            ? context?.currentValue[0].textAreaLabel?.toString()\n            : context?.currentValue?.textAreaLabel?.toString();\n        setDynamicLabel(labelFromValue || label);\n    }, [context?.currentValue, label]);\n\n    if (!context) {\n        console.error(\n            \"Addon question must be used inside a MainQuestion context provider\",\n        );\n        return null;\n    }\n\n    const { message, setMessage } = context;\n    const handleChange: ChangeEventHandler<HTMLTextAreaElement> = (e) =>\n        setMessage(e.target.value);\n\n    return (\n        <>\n            {context.currentValue !== undefined && (\n                <div className=\"jkl-sr-only\" aria-live=\"polite\">\n                    {dynamicLabel} {helpLabel}\n                </div>\n            )}\n            <TextArea\n                startOpen\n                rows={4}\n                data-testid=\"jkl-feedback__open-question\"\n                className=\"jkl-spacing-40--bottom jkl-spacing-40--top\"\n                label={dynamicLabel}\n                labelProps={{ srOnly: true }}\n                placeholder={dynamicLabel}\n                helpLabel={helpLabel}\n                value={message || \"\"}\n                onChange={handleChange}\n                counter={counter}\n            />\n        </>\n    );\n};\n"],"names":["AddonQuestion","helpLabel","label","counter","useFeedbackContext","context","useMainQuestionContext","dynamicLabel","setDynamicLabel","useState","useEffect","labelFromValue","Array","isArray","currentValue","textAreaLabel","toString","console","error","message","setMessage","jsxs","Fragment","children","className","jsx","TextArea","startOpen","rows","labelProps","srOnly","placeholder","value","onChange","e","target"],"mappings":"mTAUO,MAAMA,EAAiC,EAC1CC,UAAAA,EAAY,uJACZC,MAAAA,MAEM,MAAEC,QAAAA,GAAYC,IACdC,EAAUC,KACTC,EAAcC,GAAmBC,IASxC,GAPAC,GAAU,KACN,MAAMC,EAAiBC,MAAMC,QAAQR,GAASS,cACxCT,GAASS,aAAa,GAAGC,eAAeC,WACxCX,GAASS,cAAcC,eAAeC,WAC5CR,EAAgBG,GAAkBT,EAAK,GACxC,CAACG,GAASS,aAAcZ,KAEtBG,EACO,OAAAY,QAAAC,MACJ,sEAEG,KAGL,MAAEC,QAAAA,EAASC,WAAAA,GAAef,EAIhC,OAESgB,EAAAC,EAAA,CAAAC,SAAA,MAAyB,IAAzBlB,EAAQS,cACLO,EAAC,OAAIG,UAAU,cAAc,YAAU,SAClCD,SAAA,CAAAhB,EAAa,IAAEN,KAGxBwB,EAACC,EAAA,CACGC,WAAS,EACTC,KAAM,EACN,cAAY,8BACZJ,UAAU,6CACVtB,MAAOK,EACPsB,WAAY,CAAEC,QAAQ,GACtBC,YAAaxB,EACbN,UAAAA,EACA+B,MAAOb,GAAW,GAClBc,SApBmDC,GAC3Dd,EAAWc,EAAEC,OAAOH,OAoBZ7B,QAAAA,MAER"}

package/build/es/components/feedback/questions/CheckboxQuestion.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useRef as o,useEffect as r}from"react";import{Checkbox as t}from"../../checkbox/Checkbox.js";import{FieldGroup as n}from"../../input-group/FieldGroup.js";import{useFollowUpContext as l}from"../followup/followupContext.js";import{useMainQuestionContext as u}from"../main-question/mainQuestionContext.js";const a=({label:a,name:s,options:i,helpLabel:c,autoFocus:p=!1})=>{const f=l(),m=u(),d=f||m,v=o(null);r((()=>{p&&v.current&&v.current.focus()}),[p]);const x=e=>{const{value:o}=e.target,r=null==i?void 0:i.find((e=>e.value.toString()===o));if(r){if(null==d||!d.currentValue)return void(null==d||d.setCurrentValue([r]));if(Array.isArray(null==d?void 0:d.currentValue)){const e=d.currentValue.find((e=>e===r));e?d.setCurrentValue((o=>o.filter((o=>o!==e)))):d.setCurrentValue((e=>[...e,r]))}}};return d?e(n,{labelProps:{variant:"large"},legend:a,helpLabel:c,children:null==i?void 0:i.map(((o,r)=>e(t,{name:s||a,value:o.value.toString(),onChange:x,ref:0===r?v:void 0,children:o.label},`${a}-${o.value}`)))}):(console.error("Questions must be used inside a Followup or Feedback context provider"),null)};export{a as CheckboxQuestion};
+import{jsx as e}from"react/jsx-runtime";import{useRef as o,useEffect as r}from"react";import{Checkbox as t}from"../../checkbox/Checkbox.js";import{FieldGroup as n}from"../../input-group/FieldGroup.js";import{useFollowUpContext as u}from"../followup/followupContext.js";import{useMainQuestionContext as a}from"../main-question/mainQuestionContext.js";const l=({label:l,name:s,options:i,helpLabel:c,autoFocus:p=!1})=>{const f=u(),m=a(),d=f||m,x=o(null);r((()=>{p&&x.current&&x.current.focus()}),[p]);const b=e=>{const{value:o}=e.target,r=i?.find((e=>e.value.toString()===o));if(r){if(!d?.currentValue)return void d?.setCurrentValue([r]);if(Array.isArray(d?.currentValue)){const e=d.currentValue.find((e=>e===r));e?d.setCurrentValue((o=>o.filter((o=>o!==e)))):d.setCurrentValue((e=>[...e,r]))}}};return d?e(n,{labelProps:{variant:"large"},legend:l,helpLabel:c,children:i?.map(((o,r)=>e(t,{name:s||l,value:o.value.toString(),onChange:b,ref:0===r?x:void 0,children:o.label},`${l}-${o.value}`)))}):(console.error("Questions must be used inside a Followup or Feedback context provider"),null)};export{l as CheckboxQuestion};
 //# sourceMappingURL=CheckboxQuestion.js.map

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

@@ -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,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"}
+{"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,EAAiBjB,GAASkB,MAC3BC,GAAWA,EAAOJ,MAAMK,aAAeL,IAE5C,GAAKE,EAED,CAAA,IAACV,GAASc,aAEV,YADSd,GAAAe,gBAAgB,CAACL,IAI9B,GAAIM,MAAMC,QAAQjB,GAASc,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,SAASjC,GAAAkC,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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as a,useRef as r,useCallback as n,useEffect as o}from"react";import{isValidEpost as l}from"../../../utilities/validators/isValidEpost/isValidEpost.js";import{isValidTelefonnummer as s}from"../../../utilities/validators/isValidTelefonnummer/isValidTelefonnummer.js";import{PrimaryButton as i,TertiaryButton as m}from"../../button/Button.js";import{TextInput as d}from"../../text-input/TextInput.js";import{FeedbackSuccess as u}from"../FeedbackSuccess.js";import{useFeedbackContext as p}from"../feedbackContext.js";const c={title:"Takk for tiden din!",children:"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."},f=({label:f="Kan vi kontakte deg for flere innspill?",sendButtonLabel:k="Sett meg på lista!",withPhone:g=!1,onSubmit:b,successMessage:v=c,children:h})=>{const[j,x]=a(""),[E,C]=a(""),[S,N]=a({}),T=r(null),y=r(null),[V,B]=a(!1),[D,L]=a(!1),{contactSubmitted:P,setContactSubmitted:F,landmarkLabel:I}=p(),w="string"==typeof h?"p":"div",K=n(((e,t)=>{const a=(e=>e&&""!==e?l(e)?void 0:"Skriv inn en gyldig e-postadresse":"Du må oppgi e-postadresse for at vi kan kontakte deg")(e),r=(e=>e&&""!==e?s(e)?void 0:"Skriv inn et gyldig telefonnummer":"Du må oppgi telefonnummer for at vi kan kontakte deg")(t);return N({email:a,phone:r}),{emailError:a,phoneError:r}}),[]);o((()=>{if(V){const{emailError:e,phoneError:t}=K(j,E);!e&&(!g||!t)&&B(!1)}}),[j,E,V,g,K]);const M=e=>t=>e(t.target.value);return D?null:P?e(u,{...v}):t("form",{className:"jkl-spacing-xl--top",onSubmit:e=>{var t,a;e.preventDefault();const{emailError:r,phoneError:n}=K(j,E);return r?(B(!0),void(null==(t=T.current)||t.focus())):g&&n?(B(!0),void(null==(a=y.current)||a.focus())):(b({email:j,phone:g?E:void 0}),void F(!0))},"aria-label":I,children:[e("p",{className:"jkl-heading-4 jkl-spacing-xs--bottom",children:f}),h&&e(w,{className:"jkl-body",children:h}),e(d,{ref:T,className:"jkl-spacing-l--top",label:"E-post",labelProps:{variant:"small"},autoComplete:"email",name:"email",value:j,onChange:M(x),errorLabel:S.email}),g&&e(d,{ref:y,className:"jkl-spacing-l--top",label:"Telefonnummer",labelProps:{variant:"small"},autoComplete:"tel",name:"phone",value:E,onChange:M(C),errorLabel:S.phone}),t("div",{className:"jkl-spacing-xl--top",children:[e(i,{type:"submit",className:"jkl-spacing-xl--right",children:k}),e(m,{onClick:()=>L(!0),children:"Nei takk"})]})]})};export{f as ContactQuestion};
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{useState as a,useRef as r,useCallback as o,useEffect as n}from"react";import{isValidEpost as s}from"../../../utilities/validators/isValidEpost/isValidEpost.js";import{isValidTelefonnummer as i}from"../../../utilities/validators/isValidTelefonnummer/isValidTelefonnummer.js";import{PrimaryButton as l,TertiaryButton as m}from"../../button/Button.js";import{TextInput as d}from"../../text-input/TextInput.js";import{FeedbackSuccess as p}from"../FeedbackSuccess.js";import{useFeedbackContext as u}from"../feedbackContext.js";const c={title:"Takk for tiden din!",children:"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."},f=({label:f="Kan vi kontakte deg for flere innspill?",sendButtonLabel:k="Sett meg på lista!",withPhone:g=!1,onSubmit:b,successMessage:v=c,children:h})=>{const[j,E]=a(""),[C,S]=a(""),[x,N]=a({}),T=r(null),y=r(null),[V,B]=a(!1),[D,L]=a(!1),{contactSubmitted:P,setContactSubmitted:F,landmarkLabel:I}=u(),w="string"==typeof h?"p":"div",K=o(((e,t)=>{const a=(e=>e&&""!==e?s(e)?void 0:"Skriv inn en gyldig e-postadresse":"Du må oppgi e-postadresse for at vi kan kontakte deg")(e),r=(e=>e&&""!==e?i(e)?void 0:"Skriv inn et gyldig telefonnummer":"Du må oppgi telefonnummer for at vi kan kontakte deg")(t);return N({email:a,phone:r}),{emailError:a,phoneError:r}}),[]);n((()=>{if(V){const{emailError:e,phoneError:t}=K(j,C);!e&&(!g||!t)&&B(!1)}}),[j,C,V,g,K]);const M=e=>t=>e(t.target.value);return D?null:P?e(p,{...v}):t("form",{className:"jkl-spacing-40--top",onSubmit:e=>{e.preventDefault();const{emailError:t,phoneError:a}=K(j,C);return t?(B(!0),void T.current?.focus()):g&&a?(B(!0),void y.current?.focus()):(b({email:j,phone:g?C:void 0}),void F(!0))},"aria-label":I,children:[e("p",{className:"jkl-heading-4 jkl-spacing-8--bottom",children:f}),h&&e(w,{className:"jkl-body",children:h}),e(d,{ref:T,className:"jkl-spacing-24--top",label:"E-post",labelProps:{variant:"small"},autoComplete:"email",name:"email",value:j,onChange:M(E),errorLabel:x.email}),g&&e(d,{ref:y,className:"jkl-spacing-24--top",label:"Telefonnummer",labelProps:{variant:"small"},autoComplete:"tel",name:"phone",value:C,onChange:M(S),errorLabel:x.phone}),t("div",{className:"jkl-spacing-40--top",children:[e(l,{type:"submit",className:"jkl-spacing-40--right",children:k}),e(m,{onClick:()=>L(!0),children:"Nei takk"})]})]})};export{f as ContactQuestion};
 //# sourceMappingURL=ContactQuestion.js.map

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

@@ -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,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"}
+{"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-40--top\"\n            onSubmit={handleSubmit}\n            aria-label={landmarkLabel}\n        >\n            <p className=\"jkl-heading-4 jkl-spacing-8--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-24--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-24--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-40--top\">\n                <PrimaryButton type=\"submit\" className=\"jkl-spacing-40--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","current","focus","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,IAC1CA,EAAEO,iBAEI,MAAEhB,WAAAA,EAAYG,WAAAA,GAAeL,EAASnB,EAAOG,GACnD,OAAIkB,GACAV,GAAkB,QAClBJ,EAAS+B,SAASC,SAGlB1C,GAAa2B,GACbb,GAAkB,QAClBF,EAAS6B,SAASC,UAItBzC,EAAS,CAAEE,MAAAA,EAAOG,MAAON,EAAYM,OAAQ,SAC7CY,GAAoB,GAAI,EAepB,aAAYC,EAEZvB,SAAA,CAACwC,EAAA,IAAA,CAAEG,UAAU,sCAAuC3C,SAAME,IACzDF,GACGwC,EAACf,EAAgB,CAAAkB,UAAU,WACtB3C,SAAAA,IAITwC,EAACO,EAAA,CACGC,IAAKlC,EACL6B,UAAU,sBACVzC,MAAM,SACN+C,WAAY,CAAEC,QAAS,SACvBC,aAAa,QACbC,KAAK,QACLb,MAAOhC,EACP8C,SAAUlB,EAAa3B,GACvB8C,WAAY1C,EAAOL,QAEtBH,GACGoC,EAACO,EAAA,CACGC,IAAKhC,EACL2B,UAAU,sBACVzC,MAAM,gBACN+C,WAAY,CAAEC,QAAS,SACvBC,aAAa,MACbC,KAAK,QACLb,MAAO7B,EACP2C,SAAUlB,EAAaxB,GACvB2C,WAAY1C,EAAOF,QAI3BgC,EAAC,MAAI,CAAAC,UAAU,sBACX3C,SAAA,CAAAwC,EAACe,EAAc,CAAAC,KAAK,SAASb,UAAU,wBAClC3C,SACLG,MACCsD,EAAe,CAAAC,QAAS,IAAMtC,GAAY,GAAOpB,SAElD,kBAER"}

package/build/es/components/feedback/questions/RadioQuestion.js

@@ -1,2 +1,2 @@
-import{jsx as o}from"react/jsx-runtime";import{useId as e,useRef as t,useEffect as n,useMemo as l}from"react";import{RadioButton as u}from"../../radio-button/RadioButton.js";import{RadioButtonGroup as r}from"../../radio-button/RadioButtonGroup.js";import{useFollowUpContext as a}from"../followup/followupContext.js";import{useMainQuestionContext as i}from"../main-question/mainQuestionContext.js";const s=({label:s,name:d,options:m,helpLabel:v,autoFocus:c=!1})=>{const p=a(),f=i(),b=p||f,g=e(),x=(null==m?void 0:m.length)||0,j=t(null);n((()=>{c&&j.current&&j.current.focus()}),[c]);const C=l((()=>{var o;return Array.isArray(null==b?void 0:b.currentValue)?null==b?void 0:b.currentValue[0].value.toString():null==(o=null==b?void 0:b.currentValue)?void 0:o.value.toString()}),[null==b?void 0:b.currentValue]);return b?o(r,{legend:s,labelProps:{variant:"large"},name:`${g}-${d||s}`,inline:x<3,value:C||"",onChange:o=>{const e=null==m?void 0:m.find((e=>e.value.toString()===o.target.value));null==b||b.setCurrentValue(e)},helpLabel:v,children:null==m?void 0:m.map(((e,t)=>o(u,{ref:0===t?j:void 0,label:e.label,value:String(e.value)},`${g}-${d||s}-${e.value}`)))}):(console.error("Questions must be used inside a Followup or Feedback context provider"),null)};export{s as RadioQuestion};
+import{jsx as e}from"react/jsx-runtime";import{useId as o,useRef as t,useEffect as r,useMemo as a}from"react";import{RadioButton as n}from"../../radio-button/RadioButton.js";import{RadioButtonGroup as u}from"../../radio-button/RadioButtonGroup.js";import{useFollowUpContext as l}from"../followup/followupContext.js";import{useMainQuestionContext as s}from"../main-question/mainQuestionContext.js";const i=({label:i,name:m,options:c,helpLabel:p,autoFocus:d=!1})=>{const f=l(),v=s(),b=f||v,g=o(),x=c?.length||0,j=t(null);r((()=>{d&&j.current&&j.current.focus()}),[d]);const C=a((()=>Array.isArray(b?.currentValue)?b?.currentValue[0].value.toString():b?.currentValue?.value.toString()),[b?.currentValue]);return b?e(u,{legend:i,labelProps:{variant:"large"},name:`${g}-${m||i}`,inline:x<3,value:C||"",onChange:e=>{const o=c?.find((o=>o.value.toString()===e.target.value));b?.setCurrentValue(o)},helpLabel:p,children:c?.map(((o,t)=>e(n,{ref:0===t?j:void 0,label:o.label,value:String(o.value)},`${g}-${m||i}-${o.value}`)))}):(console.error("Questions must be used inside a Followup or Feedback context provider"),null)};export{i as RadioQuestion};
 //# sourceMappingURL=RadioQuestion.js.map

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

@@ -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,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"}
+{"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","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,MAEZ,MAAMC,EAAkBC,IAClBC,EAAkBC,IAClBC,EAAUJ,GAAmBE,EAC7BG,EAAKC,IAELC,EAAaV,GAASW,QAAU,EAEhCC,EAAMC,EAAyB,MACrCC,GAAU,KACFZ,GAAaU,EAAIG,SACjBH,EAAIG,QAAQC,OAAM,GAEvB,CAACd,IAEEe,MAOAC,EAAgBC,GAClB,IACIC,MAAMC,QAAQd,GAASe,cACjBf,GAASe,aAAa,GAAGC,MAAMC,WAC/BjB,GAASe,cAAcC,MAAMC,YACvC,CAACjB,GAASe,eAGd,OAAKf,EAQDkB,EAACC,EAAA,CACGC,OAAQ7B,EACR8B,WAAY,CAAEC,QAAS,SACvB9B,KAAM,GAAGS,KAAMT,GAAQD,IACvBgC,OAAQpB,EAAa,EACrBa,MAAOL,GAAiB,GACxBa,SA7BoDC,IACxD,MAAMC,EAASjC,GAASkC,MACnBD,GAAWA,EAAOV,MAAMC,aAAeQ,EAAEG,OAAOZ,QAErDhB,GAAS6B,gBAAgBH,EAAM,EA0B3BhC,UAAAA,EAECoC,SAASrC,GAAAsC,KAAI,CAACL,EAAQM,IACnBd,EAACe,EAAA,CACG5B,IAAW,IAAN2B,EAAU3B,OAAM,EAErBd,MAAOmC,EAAOnC,MACdyB,MAAOkB,OAAOR,EAAOV,QAFhB,GAAGf,KAAMT,GAAQD,KAASmC,EAAOV,cAnB1CmB,QAAAC,MACJ,yEAEG,KAAA"}

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

@@ -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{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};
+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 s}from"../../input-group/FieldGroup.js";import{useFollowUpContext as t}from"../followup/followupContext.js";import{useMainQuestionContext as n}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),c=({label:c,name:p="smiley",helpLabel:d,options:v=u})=>{const f=t(),y=n(),b=f||y,h=a(),j=e=>{console.log(e.target.value);const l=v?.find((l=>l.value.toString()===e.target.value));b?.setCurrentValue(l)},g=o((()=>Array.isArray(b?.currentValue)?b?.currentValue[0].value:b?.currentValue?.value),[b?.currentValue]);return v.some(m)?(console.error("SmileyQuestion må ha tallene 1 til 5 som verdier for alternativene sine"),null):b&&v?e(s,{labelProps:{variant:"large"},legend:c,helpLabel:d,children:e("div",{className:"jkl-feedback-smileys",children:v.map((a=>l(r,{children:[e("input",{className:"jkl-sr-only",id:`${h}-${p}-${a.value}`,name:`${h}-${p}`,type:"radio",value:a.value,onChange:j,checked:g===a.value}),l("label",{className:"jkl-feedback-smiley-option",htmlFor:`${h}-${p}-${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{c as SmileyQuestion};
 //# sourceMappingURL=SmileyQuestion.js.map