@fremtind/jokul 4.2.0 → 4.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (81) hide show
  1. package/build/build-stats.html +1 -1
  2. package/build/cjs/components/checkbox/Checkbox.cjs +1 -1
  3. package/build/cjs/components/checkbox/Checkbox.cjs.map +1 -1
  4. package/build/cjs/components/cookie-consent/CookieConsent.cjs +1 -1
  5. package/build/cjs/components/cookie-consent/CookieConsent.cjs.map +1 -1
  6. package/build/cjs/components/cookie-consent/CookieConsent.d.cts +1 -1
  7. package/build/cjs/components/cookie-consent/types.d.cts +4 -0
  8. package/build/cjs/components/modal/Modal.cjs +1 -1
  9. package/build/cjs/components/modal/Modal.cjs.map +1 -1
  10. package/build/cjs/components/modal/Modal.d.cts +2 -9
  11. package/build/cjs/components/modal/index.d.cts +1 -1
  12. package/build/cjs/components/modal/types.d.cts +18 -0
  13. package/build/cjs/components/radio-button/BaseRadioButton.cjs +1 -1
  14. package/build/cjs/components/radio-button/BaseRadioButton.cjs.map +1 -1
  15. package/build/es/components/checkbox/Checkbox.js +1 -1
  16. package/build/es/components/checkbox/Checkbox.js.map +1 -1
  17. package/build/es/components/cookie-consent/CookieConsent.d.ts +1 -1
  18. package/build/es/components/cookie-consent/CookieConsent.js +1 -1
  19. package/build/es/components/cookie-consent/CookieConsent.js.map +1 -1
  20. package/build/es/components/cookie-consent/types.d.ts +4 -0
  21. package/build/es/components/modal/Modal.d.ts +2 -9
  22. package/build/es/components/modal/Modal.js +1 -1
  23. package/build/es/components/modal/Modal.js.map +1 -1
  24. package/build/es/components/modal/index.d.ts +1 -1
  25. package/build/es/components/modal/types.d.ts +18 -0
  26. package/build/es/components/radio-button/BaseRadioButton.js +1 -1
  27. package/build/es/components/radio-button/BaseRadioButton.js.map +1 -1
  28. package/package.json +1 -1
  29. package/styles/components/checkbox/checkbox.css +13 -9
  30. package/styles/components/checkbox/checkbox.min.css +1 -1
  31. package/styles/components/checkbox/checkbox.scss +25 -22
  32. package/styles/components/checkbox-panel/checkbox-panel.css +28 -22
  33. package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
  34. package/styles/components/countdown/countdown.css +2 -2
  35. package/styles/components/countdown/countdown.min.css +1 -1
  36. package/styles/components/datepicker/_calendar-date-button.scss +5 -5
  37. package/styles/components/datepicker/_calendar.scss +5 -6
  38. package/styles/components/datepicker/datepicker.css +13 -5
  39. package/styles/components/datepicker/datepicker.min.css +1 -1
  40. package/styles/components/feedback/feedback.css +2 -2
  41. package/styles/components/feedback/feedback.min.css +1 -1
  42. package/styles/components/file-input/file-input.css +9 -9
  43. package/styles/components/file-input/file-input.min.css +1 -1
  44. package/styles/components/input-group/input-group.css +2 -2
  45. package/styles/components/input-group/input-group.min.css +1 -1
  46. package/styles/components/input-panel/input-panel.css +15 -13
  47. package/styles/components/input-panel/input-panel.min.css +1 -1
  48. package/styles/components/input-panel/input-panel.scss +17 -15
  49. package/styles/components/loader/loader.css +6 -6
  50. package/styles/components/loader/loader.min.css +1 -1
  51. package/styles/components/loader/skeleton-loader.css +3 -3
  52. package/styles/components/loader/skeleton-loader.min.css +1 -1
  53. package/styles/components/message/message.css +2 -2
  54. package/styles/components/message/message.min.css +1 -1
  55. package/styles/components/modal/_layout.scss +22 -0
  56. package/styles/components/modal/_modal-base.scss +32 -0
  57. package/styles/components/modal/_motion.scss +45 -0
  58. package/styles/components/modal/_overlay.scss +20 -0
  59. package/styles/components/modal/_parts.scss +33 -0
  60. package/styles/components/modal/_placement.scss +59 -0
  61. package/styles/components/modal/modal.css +117 -33
  62. package/styles/components/modal/modal.min.css +1 -1
  63. package/styles/components/modal/modal.scss +6 -95
  64. package/styles/components/progress-bar/progress-bar.css +1 -1
  65. package/styles/components/progress-bar/progress-bar.min.css +1 -1
  66. package/styles/components/radio-button/radio-button.css +12 -8
  67. package/styles/components/radio-button/radio-button.min.css +1 -1
  68. package/styles/components/radio-button/radio-button.scss +20 -17
  69. package/styles/components/radio-panel/radio-panel.css +15 -13
  70. package/styles/components/radio-panel/radio-panel.min.css +1 -1
  71. package/styles/components/segmented-control/segmented-control.css +14 -10
  72. package/styles/components/segmented-control/segmented-control.min.css +1 -1
  73. package/styles/components/system-message/system-message.css +2 -2
  74. package/styles/components/system-message/system-message.min.css +1 -1
  75. package/styles/components/toast/toast.css +4 -4
  76. package/styles/components/toast/toast.min.css +1 -1
  77. package/styles/components-beta/select/select.css +1 -1
  78. package/styles/components-beta/select/select.min.css +1 -1
  79. package/styles/components-beta/select/select.scss +1 -1
  80. package/styles/styles.css +194 -92
  81. package/styles/styles.min.css +1 -1
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),r=require("../../hooks/useId/useId.cjs"),a=t.forwardRef((a,i)=>{const{id:n,children:s,invalid:l,className:o,inline:d=!1,"data-testautoid":u,checked:k,indeterminate:h,...x}=a,b=t.useRef(null);t.useImperativeHandle(i,()=>b.current,[]);const j=r.useId(n||"jkl-checkbox",{generateSuffix:!n});return t.useEffect(()=>{!0===k&&!0===h&&"production"!==process.env.NODE_ENV&&console.warn("A Checkbox can not be both checked and indeterminate, and will be treated as checked"),b.current&&(b.current.indeterminate=!k&&!!h)},[k,h]),e.jsxs("div",{className:c.clsx("jkl-checkbox",o,{"jkl-checkbox--inline":d,"jkl-checkbox--error":l}),children:[e.jsx("label",{htmlFor:j,className:"jkl-checkbox__label",children:s}),e.jsx("input",{id:j,ref:b,className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input","aria-invalid":l,type:"checkbox","data-testautoid":u,checked:k,...x})]})});a.displayName="Checkbox",exports.Checkbox=a;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),c=require("../../../clsx-E3yX_9sL.cjs"),t=require("react"),r=require("../../hooks/useId/useId.cjs"),a=t.forwardRef((a,i)=>{const{id:n,children:s,invalid:l,className:o,inline:d=!1,"data-testautoid":u,checked:k,indeterminate:h,...x}=a,b=t.useRef(null);t.useImperativeHandle(i,()=>b.current,[]);const j=r.useId(n||"jkl-checkbox",{generateSuffix:!n});return t.useEffect(()=>{!0===k&&!0===h&&"production"!==process.env.NODE_ENV&&console.warn("A Checkbox can not be both checked and indeterminate, and will be treated as checked"),b.current&&(b.current.indeterminate=!k&&!!h)},[k,h]),e.jsxs("div",{className:c.clsx("jkl-checkbox",o,{"jkl-checkbox--inline":d,"jkl-checkbox--error":l}),children:[e.jsx("input",{id:j,ref:b,className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input","aria-invalid":l,type:"checkbox","data-testautoid":u,checked:k,...x}),e.jsx("label",{htmlFor:j,className:"jkl-checkbox__label",children:s})]})});a.displayName="Checkbox",exports.Checkbox=a;
2
2
  //# sourceMappingURL=Checkbox.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { CheckboxProps } from \"./types.js\";\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (props, ref) => {\n const {\n id,\n children,\n invalid,\n className,\n inline = false,\n \"data-testautoid\": testAutoId,\n checked,\n indeterminate,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n [],\n );\n\n const inputId = useId(id || \"jkl-checkbox\", { generateSuffix: !id });\n\n useEffect(() => {\n if (\n checked === true &&\n indeterminate === true &&\n process.env.NODE_ENV !== \"production\"\n ) {\n console.warn(\n \"A Checkbox can not be both checked and indeterminate, and will be treated as checked\",\n );\n }\n if (inputRef.current) {\n inputRef.current.indeterminate = !checked && !!indeterminate;\n }\n }, [checked, indeterminate]);\n\n return (\n <div\n className={clsx(\"jkl-checkbox\", className, {\n \"jkl-checkbox--inline\": inline,\n \"jkl-checkbox--error\": invalid,\n })}\n >\n <label htmlFor={inputId} className=\"jkl-checkbox__label\">\n {children}\n </label>\n <input\n id={inputId}\n ref={inputRef}\n className=\"jkl-checkbox__input\"\n data-testid=\"jkl-checkbox-input\"\n aria-invalid={invalid}\n type=\"checkbox\"\n data-testautoid={testAutoId}\n checked={checked}\n {...rest}\n />\n </div>\n );\n },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["Checkbox","forwardRef","props","ref","id","children","invalid","className","inline","testAutoId","checked","indeterminate","rest","inputRef","useRef","useImperativeHandle","current","inputId","useId","generateSuffix","useEffect","process","env","NODE_ENV","console","warn","jsxs","clsx","jsx","htmlFor","type","displayName"],"mappings":"yNAKaA,EAAWC,EAAAA,WACpB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,GAAS,EACT,kBAAmBC,EACnBC,QAAAA,EACAC,cAAAA,KACGC,GACHV,EAEEW,EAAWC,EAAAA,OAAyB,MAC1CC,EAAAA,oBACIZ,EACA,IAAMU,EAASG,QACf,IAGJ,MAAMC,EAAUC,EAAAA,MAAMd,GAAM,eAAgB,CAAEe,gBAAiBf,IAE/DgB,OAAAA,EAAAA,UAAU,MAEU,IAAZV,IACkB,IAAlBC,GACyB,eAAzBU,QAAQC,IAAIC,UAEZC,QAAQC,KACJ,wFAGJZ,EAASG,UACTH,EAASG,QAAQL,eAAiBD,KAAaC,IAEpD,CAACD,EAASC,IAGTe,EAAAA,KAAC,MAAA,CACGnB,UAAWoB,EAAAA,KAAK,eAAgBpB,EAAW,CACvC,uBAAwBC,EACxB,sBAAuBF,IAG3BD,SAAA,CAAAuB,EAAAA,IAAC,QAAA,CAAMC,QAASZ,EAASV,UAAU,sBAC9BF,SAAAA,IAELuB,EAAAA,IAAC,QAAA,CACGxB,GAAIa,EACJd,IAAKU,EACLN,UAAU,sBACV,cAAY,qBACZ,eAAcD,EACdwB,KAAK,WACL,kBAAiBrB,EACjBC,QAAAA,KACIE,SAOxBZ,EAAS+B,YAAc"}
1
+ {"version":3,"file":"Checkbox.cjs","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { CheckboxProps } from \"./types.js\";\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (props, ref) => {\n const {\n id,\n children,\n invalid,\n className,\n inline = false,\n \"data-testautoid\": testAutoId,\n checked,\n indeterminate,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n [],\n );\n\n const inputId = useId(id || \"jkl-checkbox\", { generateSuffix: !id });\n\n useEffect(() => {\n if (\n checked === true &&\n indeterminate === true &&\n process.env.NODE_ENV !== \"production\"\n ) {\n console.warn(\n \"A Checkbox can not be both checked and indeterminate, and will be treated as checked\",\n );\n }\n if (inputRef.current) {\n inputRef.current.indeterminate = !checked && !!indeterminate;\n }\n }, [checked, indeterminate]);\n\n return (\n <div\n className={clsx(\"jkl-checkbox\", className, {\n \"jkl-checkbox--inline\": inline,\n \"jkl-checkbox--error\": invalid,\n })}\n >\n <input\n id={inputId}\n ref={inputRef}\n className=\"jkl-checkbox__input\"\n data-testid=\"jkl-checkbox-input\"\n aria-invalid={invalid}\n type=\"checkbox\"\n data-testautoid={testAutoId}\n checked={checked}\n {...rest}\n />\n <label htmlFor={inputId} className=\"jkl-checkbox__label\">\n {children}\n </label>\n </div>\n );\n },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["Checkbox","forwardRef","props","ref","id","children","invalid","className","inline","testAutoId","checked","indeterminate","rest","inputRef","useRef","useImperativeHandle","current","inputId","useId","generateSuffix","useEffect","process","env","NODE_ENV","console","warn","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"yNAKaA,EAAWC,EAAAA,WACpB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,GAAS,EACT,kBAAmBC,EACnBC,QAAAA,EACAC,cAAAA,KACGC,GACHV,EAEEW,EAAWC,EAAAA,OAAyB,MAC1CC,EAAAA,oBACIZ,EACA,IAAMU,EAASG,QACf,IAGJ,MAAMC,EAAUC,EAAAA,MAAMd,GAAM,eAAgB,CAAEe,gBAAiBf,IAE/DgB,OAAAA,EAAAA,UAAU,MAEU,IAAZV,IACkB,IAAlBC,GACyB,eAAzBU,QAAQC,IAAIC,UAEZC,QAAQC,KACJ,wFAGJZ,EAASG,UACTH,EAASG,QAAQL,eAAiBD,KAAaC,IAEpD,CAACD,EAASC,IAGTe,EAAAA,KAAC,MAAA,CACGnB,UAAWoB,EAAAA,KAAK,eAAgBpB,EAAW,CACvC,uBAAwBC,EACxB,sBAAuBF,IAG3BD,SAAA,CAAAuB,EAAAA,IAAC,QAAA,CACGxB,GAAIa,EACJd,IAAKU,EACLN,UAAU,sBACV,cAAY,qBACZ,eAAcD,EACduB,KAAK,WACL,kBAAiBpB,EACjBC,QAAAA,KACIE,UAEP,QAAA,CAAMkB,QAASb,EAASV,UAAU,sBAC9BF,SAAAA,SAOrBL,EAAS+B,YAAc"}
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),o=require("react-dom"),t=require("../button/Button.cjs"),r=require("../flex/Flex.cjs"),i=require("../link/Link.cjs"),s=require("../modal/Modal.cjs"),a=require("../modal/useModal.cjs"),l=require("./CookieConsentContext.cjs"),d=require("./cookieConsentUtils.cjs");exports.CookieConsent=({blocking:c,onAccept:u,aboutPage:k="https://www.fremtind.no/informasjonskapsler",...j})=>{const{currentConsent:m,cookieName:h,cookieDomain:f,cookiePath:p,isOpen:g,setIsOpen:x,updateCurrentConsents:b}=l.useInternalState(),[v,C]=a.useModal({id:`jkl-cookie-modal-${n.useId()}`,role:c?"alertdialog":"dialog",title:"Informasjonskapsler"});if(n.useEffect(()=>{g?v?.show():v?.hide()},[v,g]),n.useEffect(()=>{const e=()=>x(!1);return v?.on("hide",e),()=>{v?.off("hide",e)}},[v,x]),typeof document>"u")return null;if(typeof navigator<"u"&&!navigator.cookieEnabled)return u?.({functional:"denied",statistics:"denied",marketing:"denied"}),null;const y=e=>{const n={...m,functional:e,statistics:e,marketing:"denied"};d.setConsentCookie({consent:n,name:h,domain:f,path:p}),u?.(n),b(),v?.hide()};return o.createPortal(e.jsxs(s.ModalContainer,{...C.container,...j,"data-cookie-consent-open":g,children:[e.jsx(s.ModalOverlay,{...C.overlay}),e.jsxs(s.Modal,{...C.modal,children:[e.jsx(s.ModalHeader,{children:e.jsx(s.ModalTitle,{...C.title,children:"Får vi bruke valgfrie informasjonskapsler?"})}),e.jsx(s.ModalBody,{children:e.jsxs(r.Flex,{direction:"column",gap:"m",children:[e.jsx("p",{children:"Vi ønsker å samle anonym statistikk for å forstå hvordan nettsidene våre brukes. Det hjelper oss til å gjøre innhold og løsninger bedre og mer brukervennlige."}),e.jsxs("p",{children:[e.jsx(i.Link,{href:k,target:"_blank",children:"Les mer om hvilke informasjonskapsler vi lagrer her"}),"."]})]})}),e.jsxs(s.ModalActions,{children:[e.jsx(t.Button,{variant:"secondary","data-testid":"jkl-cookie-consent-godta",type:"button",onClick:()=>y("accepted"),children:"Ja, det er greit"}),e.jsx(t.Button,{variant:"secondary","data-testid":"jkl-cookie-consent-nekt",type:"button",onClick:()=>y("denied"),children:"Nei takk"})]})]})]}),document.body)};
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("react"),t=require("react-dom"),o=require("../button/Button.cjs"),r=require("../flex/Flex.cjs"),i=require("../link/Link.cjs"),s=require("../modal/Modal.cjs"),a=require("../modal/useModal.cjs"),l=require("./CookieConsentContext.cjs"),d=require("./cookieConsentUtils.cjs");exports.CookieConsent=({blocking:c,onAccept:u,aboutPage:k="https://www.fremtind.no/informasjonskapsler",aboutPageLinkText:j="Les mer om hvilke informasjons­kapsler vi lagrer her",...m})=>{const{currentConsent:h,cookieName:f,cookieDomain:p,cookiePath:g,isOpen:x,setIsOpen:b,updateCurrentConsents:v}=l.useInternalState(),[C,y]=a.useModal({id:`jkl-cookie-modal-${n.useId()}`,role:c?"alertdialog":"dialog",title:"Informasjonskapsler"});if(n.useEffect(()=>{x?C?.show():C?.hide()},[C,x]),n.useEffect(()=>{const e=()=>b(!1);return C?.on("hide",e),()=>{C?.off("hide",e)}},[C,b]),typeof document>"u")return null;if(typeof navigator<"u"&&!navigator.cookieEnabled)return u?.({functional:"denied",statistics:"denied",marketing:"denied"}),null;const M=e=>{const n={...h,functional:e,statistics:e,marketing:"denied"};d.setConsentCookie({consent:n,name:f,domain:p,path:g}),u?.(n),v(),C?.hide()};return t.createPortal(e.jsxs(s.ModalContainer,{...y.container,...m,"data-cookie-consent-open":x,children:[e.jsx(s.ModalOverlay,{...y.overlay}),e.jsxs(s.Modal,{...y.modal,children:[e.jsx(s.ModalHeader,{children:e.jsx(s.ModalTitle,{...y.title,children:"Får vi bruke valgfrie informasjons­kapsler?"})}),e.jsx(s.ModalBody,{children:e.jsxs(r.Flex,{direction:"column",gap:"m",children:[e.jsx("p",{children:"Fremtind ønsker å samle anonym statistikk for å forstå hvordan nettsidene våre brukes. Det hjelper oss til å gjøre innhold og løsninger bedre og mer brukervennlige."}),e.jsxs("p",{children:[e.jsx(i.Link,{href:k,target:"_blank",children:j}),"."]})]})}),e.jsxs(s.ModalActions,{children:[e.jsx(o.Button,{variant:"secondary","data-testid":"jkl-cookie-consent-godta",type:"button",onClick:()=>M("accepted"),children:"Ja, det er greit"}),e.jsx(o.Button,{variant:"secondary","data-testid":"jkl-cookie-consent-nekt",type:"button",onClick:()=>M("denied"),children:"Nei takk"})]})]})]}),document.body)};
2
2
  //# sourceMappingURL=CookieConsent.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"CookieConsent.cjs","sources":["../../../../src/components/cookie-consent/CookieConsent.tsx"],"sourcesContent":["import React, { useEffect, useId } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { Link } from \"../link/index.js\";\nimport {\n Modal,\n ModalActions,\n ModalBody,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from \"../modal/Modal.js\";\nimport { useModal } from \"../modal/useModal.js\";\nimport { useInternalState } from \"./CookieConsentContext.js\";\nimport { setConsentCookie } from \"./cookieConsentUtils.js\";\nimport type { Consent, ConsentState, CookieConsentProps } from \"./types.js\";\n\nexport const CookieConsent = ({\n blocking,\n onAccept,\n aboutPage = \"https://www.fremtind.no/informasjonskapsler\",\n ...rest\n}: CookieConsentProps): JSX.Element | null => {\n const {\n currentConsent,\n cookieName,\n cookieDomain,\n cookiePath,\n isOpen,\n setIsOpen,\n updateCurrentConsents,\n } = useInternalState();\n\n const [instance, modalConfig] = useModal({\n id: `jkl-cookie-modal-${useId()}`,\n // The optional `role` attribute of the dialog element, either `dialog`\n // (default) or `alertdialog` to make it a modal (preventing closing on\n // click outside of ESC key).\n role: blocking ? \"alertdialog\" : \"dialog\",\n // The required dialog title, mandatory in the document\n // to provide context to assistive technology.\n title: \"Informasjonskapsler\",\n });\n useEffect(() => {\n if (isOpen) {\n instance?.show();\n } else {\n instance?.hide();\n }\n }, [instance, isOpen]);\n\n useEffect(() => {\n const onHide = () => setIsOpen(false);\n instance?.on(\"hide\", onHide);\n return () => {\n instance?.off(\"hide\", onHide);\n };\n }, [instance, setIsOpen]);\n\n if (typeof document === \"undefined\") {\n return null;\n }\n\n // Cookies are disabled in the browser\n if (typeof navigator !== \"undefined\" && !navigator.cookieEnabled) {\n onAccept?.({\n functional: \"denied\",\n statistics: \"denied\",\n marketing: \"denied\",\n });\n\n return null;\n }\n\n const updateCookies = (state: ConsentState) => {\n const updatedConsent: Consent = {\n ...currentConsent,\n functional: state,\n statistics: state,\n marketing: \"denied\",\n };\n\n setConsentCookie({\n consent: updatedConsent,\n name: cookieName,\n domain: cookieDomain,\n path: cookiePath,\n });\n\n onAccept?.(updatedConsent);\n\n updateCurrentConsents();\n\n instance?.hide();\n };\n\n return ReactDOM.createPortal(\n <ModalContainer\n {...modalConfig.container}\n {...rest}\n data-cookie-consent-open={isOpen}\n >\n <ModalOverlay {...modalConfig.overlay} />\n <Modal {...modalConfig.modal}>\n <ModalHeader>\n <ModalTitle {...modalConfig.title}>\n Får vi bruke valgfrie informasjonskapsler?\n </ModalTitle>\n </ModalHeader>\n <ModalBody>\n <Flex direction=\"column\" gap=\"m\">\n <p>\n Vi ønsker å samle anonym statistikk for å forstå\n hvordan nettsidene våre brukes. Det hjelper oss til\n å gjøre innhold og løsninger bedre og mer\n brukervennlige.\n </p>\n <p>\n <Link href={aboutPage} target=\"_blank\">\n Les mer om hvilke informasjonskapsler vi lagrer\n her\n </Link>\n .\n </p>\n </Flex>\n </ModalBody>\n <ModalActions>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-godta\"\n type=\"button\"\n onClick={() => updateCookies(\"accepted\")}\n >\n Ja, det er greit\n </Button>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-nekt\"\n type=\"button\"\n onClick={() => updateCookies(\"denied\")}\n >\n Nei takk\n </Button>\n </ModalActions>\n </Modal>\n </ModalContainer>,\n document.body,\n );\n};\n"],"names":["blocking","onAccept","aboutPage","rest","currentConsent","cookieName","cookieDomain","cookiePath","isOpen","setIsOpen","updateCurrentConsents","useInternalState","instance","modalConfig","useModal","id","useId","role","title","useEffect","show","hide","onHide","on","off","document","navigator","cookieEnabled","functional","statistics","marketing","updateCookies","state","updatedConsent","setConsentCookie","consent","name","domain","path","ReactDOM","createPortal","jsxs","ModalContainer","container","children","jsx","ModalOverlay","overlay","Modal","modal","ModalHeader","ModalTitle","ModalBody","Flex","direction","gap","Link","href","target","ModalActions","Button","variant","type","onClick","body"],"mappings":"oaAmB6B,EACzBA,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EAAY,iDACTC,MAEH,MACIC,eAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,sBAAAA,GACAC,sBAEGC,EAAUC,GAAeC,WAAS,CACrCC,GAAI,oBAAoBC,EAAAA,UAIxBC,KAAMjB,EAAW,cAAgB,SAGjCkB,MAAO,wBAkBX,GAhBAC,EAAAA,UAAU,KACFX,EACAI,GAAUQ,OAEVR,GAAUS,QAEf,CAACT,EAAUJ,IAEdW,EAAAA,UAAU,KACN,MAAMG,EAAS,IAAMb,GAAU,GAC/B,OAAAG,GAAUW,GAAG,OAAQD,GACd,KACHV,GAAUY,IAAI,OAAQF,KAE3B,CAACV,EAAUH,WAEHgB,SAAa,IACpB,OAAO,KAIX,UAAWC,UAAc,MAAgBA,UAAUC,cAC/C,OAAA1B,IAAW,CACP2B,WAAY,SACZC,WAAY,SACZC,UAAW,WAGR,KAGX,MAAMC,EAAiBC,IACnB,MAAMC,EAA0B,IACzB7B,EACHwB,WAAYI,EACZH,WAAYG,EACZF,UAAW,UAGfI,mBAAiB,CACbC,QAASF,EACTG,KAAM/B,EACNgC,OAAQ/B,EACRgC,KAAM/B,IAGVN,IAAWgC,GAEXvB,IAEAE,GAAUS,QAGd,OAAOkB,EAASC,aACZC,EAAAA,KAACC,EAAAA,eAAA,IACO7B,EAAY8B,aACZxC,EACJ,2BAA0BK,EAE1BoC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,aAAA,IAAiBjC,EAAYkC,UAC9BN,EAAAA,KAACO,EAAAA,MAAA,IAAUnC,EAAYoC,MACnBL,SAAA,CAAAC,EAAAA,IAACK,EAAAA,aACGN,SAAAC,EAAAA,IAACM,EAAAA,WAAA,IAAetC,EAAYK,MAAO0B,gEAItCQ,EAAAA,UAAA,CACGR,SAAAH,OAACY,EAAAA,MAAKC,UAAU,SAASC,IAAI,IACzBX,SAAA,CAAAC,EAAAA,IAAC,KAAED,SAAA,0KAMF,IAAA,CACGA,SAAA,CAAAC,MAACW,EAAAA,KAAA,CAAKC,KAAMvD,EAAWwD,OAAO,SAASd,SAAA,wDAGhC,mBAKlBe,EAAAA,aAAA,CACGf,SAAA,CAAAC,EAAAA,IAACe,EAAAA,OAAA,CACGC,QAAQ,YACR,cAAY,2BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,YAChCa,SAAA,qBAGDC,EAAAA,IAACe,EAAAA,OAAA,CACGC,QAAQ,YACR,cAAY,0BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,UAChCa,SAAA,sBAMbnB,SAASuC"}
1
+ {"version":3,"file":"CookieConsent.cjs","sources":["../../../../src/components/cookie-consent/CookieConsent.tsx"],"sourcesContent":["import React, { useEffect, useId } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { Link } from \"../link/index.js\";\nimport {\n Modal,\n ModalActions,\n ModalBody,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from \"../modal/Modal.js\";\nimport { useModal } from \"../modal/useModal.js\";\nimport { useInternalState } from \"./CookieConsentContext.js\";\nimport { setConsentCookie } from \"./cookieConsentUtils.js\";\nimport type { Consent, ConsentState, CookieConsentProps } from \"./types.js\";\n\nexport const CookieConsent = ({\n blocking,\n onAccept,\n aboutPage = \"https://www.fremtind.no/informasjonskapsler\",\n aboutPageLinkText = \"Les mer om hvilke informasjons­kapsler vi lagrer her\",\n ...rest\n}: CookieConsentProps): JSX.Element | null => {\n const {\n currentConsent,\n cookieName,\n cookieDomain,\n cookiePath,\n isOpen,\n setIsOpen,\n updateCurrentConsents,\n } = useInternalState();\n\n const [instance, modalConfig] = useModal({\n id: `jkl-cookie-modal-${useId()}`,\n // The optional `role` attribute of the dialog element, either `dialog`\n // (default) or `alertdialog` to make it a modal (preventing closing on\n // click outside of ESC key).\n role: blocking ? \"alertdialog\" : \"dialog\",\n // The required dialog title, mandatory in the document\n // to provide context to assistive technology.\n title: \"Informasjonskapsler\",\n });\n useEffect(() => {\n if (isOpen) {\n instance?.show();\n } else {\n instance?.hide();\n }\n }, [instance, isOpen]);\n\n useEffect(() => {\n const onHide = () => setIsOpen(false);\n instance?.on(\"hide\", onHide);\n return () => {\n instance?.off(\"hide\", onHide);\n };\n }, [instance, setIsOpen]);\n\n if (typeof document === \"undefined\") {\n return null;\n }\n\n // Cookies are disabled in the browser\n if (typeof navigator !== \"undefined\" && !navigator.cookieEnabled) {\n onAccept?.({\n functional: \"denied\",\n statistics: \"denied\",\n marketing: \"denied\",\n });\n\n return null;\n }\n\n const updateCookies = (state: ConsentState) => {\n const updatedConsent: Consent = {\n ...currentConsent,\n functional: state,\n statistics: state,\n marketing: \"denied\",\n };\n\n setConsentCookie({\n consent: updatedConsent,\n name: cookieName,\n domain: cookieDomain,\n path: cookiePath,\n });\n\n onAccept?.(updatedConsent);\n\n updateCurrentConsents();\n\n instance?.hide();\n };\n\n return ReactDOM.createPortal(\n <ModalContainer\n {...modalConfig.container}\n {...rest}\n data-cookie-consent-open={isOpen}\n >\n <ModalOverlay {...modalConfig.overlay} />\n <Modal {...modalConfig.modal}>\n <ModalHeader>\n <ModalTitle {...modalConfig.title}>\n Får vi bruke valgfrie informasjons&shy;kapsler?\n </ModalTitle>\n </ModalHeader>\n <ModalBody>\n <Flex direction=\"column\" gap=\"m\">\n <p>\n Fremtind ønsker å samle anonym statistikk for å\n forstå hvordan nettsidene våre brukes. Det hjelper\n oss til å gjøre innhold og løsninger bedre og mer\n brukervennlige.\n </p>\n <p>\n <Link href={aboutPage} target=\"_blank\">\n {aboutPageLinkText}\n </Link>\n .\n </p>\n </Flex>\n </ModalBody>\n <ModalActions>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-godta\"\n type=\"button\"\n onClick={() => updateCookies(\"accepted\")}\n >\n Ja, det er greit\n </Button>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-nekt\"\n type=\"button\"\n onClick={() => updateCookies(\"denied\")}\n >\n Nei takk\n </Button>\n </ModalActions>\n </Modal>\n </ModalContainer>,\n document.body,\n );\n};\n"],"names":["blocking","onAccept","aboutPage","aboutPageLinkText","rest","currentConsent","cookieName","cookieDomain","cookiePath","isOpen","setIsOpen","updateCurrentConsents","useInternalState","instance","modalConfig","useModal","id","useId","role","title","useEffect","show","hide","onHide","on","off","document","navigator","cookieEnabled","functional","statistics","marketing","updateCookies","state","updatedConsent","setConsentCookie","consent","name","domain","path","ReactDOM","createPortal","jsxs","ModalContainer","container","children","jsx","ModalOverlay","overlay","Modal","modal","ModalHeader","ModalTitle","ModalBody","Flex","direction","gap","Link","href","target","ModalActions","Button","variant","type","onClick","body"],"mappings":"oaAmB6B,EACzBA,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EAAY,8CACZC,kBAAAA,EAAoB,0DACjBC,MAEH,MACIC,eAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,sBAAAA,GACAC,sBAEGC,EAAUC,GAAeC,WAAS,CACrCC,GAAI,oBAAoBC,EAAAA,UAIxBC,KAAMlB,EAAW,cAAgB,SAGjCmB,MAAO,wBAkBX,GAhBAC,EAAAA,UAAU,KACFX,EACAI,GAAUQ,OAEVR,GAAUS,QAEf,CAACT,EAAUJ,IAEdW,EAAAA,UAAU,KACN,MAAMG,EAAS,IAAMb,GAAU,GAC/B,OAAAG,GAAUW,GAAG,OAAQD,GACd,KACHV,GAAUY,IAAI,OAAQF,KAE3B,CAACV,EAAUH,WAEHgB,SAAa,IACpB,OAAO,KAIX,UAAWC,UAAc,MAAgBA,UAAUC,cAC/C,OAAA3B,IAAW,CACP4B,WAAY,SACZC,WAAY,SACZC,UAAW,WAGR,KAGX,MAAMC,EAAiBC,IACnB,MAAMC,EAA0B,IACzB7B,EACHwB,WAAYI,EACZH,WAAYG,EACZF,UAAW,UAGfI,mBAAiB,CACbC,QAASF,EACTG,KAAM/B,EACNgC,OAAQ/B,EACRgC,KAAM/B,IAGVP,IAAWiC,GAEXvB,IAEAE,GAAUS,QAGd,OAAOkB,EAASC,aACZC,EAAAA,KAACC,EAAAA,eAAA,IACO7B,EAAY8B,aACZxC,EACJ,2BAA0BK,EAE1BoC,SAAA,CAAAC,EAAAA,IAACC,EAAAA,aAAA,IAAiBjC,EAAYkC,UAC9BN,EAAAA,KAACO,EAAAA,MAAA,IAAUnC,EAAYoC,MACnBL,SAAA,CAAAC,EAAAA,IAACK,EAAAA,aACGN,SAAAC,EAAAA,IAACM,EAAAA,WAAA,IAAetC,EAAYK,MAAO0B,iEAItCQ,EAAAA,UAAA,CACGR,SAAAH,OAACY,EAAAA,MAAKC,UAAU,SAASC,IAAI,IACzBX,SAAA,CAAAC,EAAAA,IAAC,KAAED,SAAA,gLAMF,IAAA,CACGA,SAAA,CAAAC,MAACW,EAAAA,KAAA,CAAKC,KAAMxD,EAAWyD,OAAO,SACzBd,SAAA1C,IACE,mBAKlByD,EAAAA,aAAA,CACGf,SAAA,CAAAC,EAAAA,IAACe,EAAAA,OAAA,CACGC,QAAQ,YACR,cAAY,2BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,YAChCa,SAAA,qBAGDC,EAAAA,IAACe,EAAAA,OAAA,CACGC,QAAQ,YACR,cAAY,0BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,UAChCa,SAAA,sBAMbnB,SAASuC"}
@@ -1,2 +1,2 @@
1
1
  import { CookieConsentProps } from './types.cjs';
2
- export declare const CookieConsent: ({ blocking, onAccept, aboutPage, ...rest }: CookieConsentProps) => JSX.Element | null;
2
+ export declare const CookieConsent: ({ blocking, onAccept, aboutPage, aboutPageLinkText, ...rest }: CookieConsentProps) => JSX.Element | null;
@@ -13,6 +13,10 @@ export interface CookieConsentProps {
13
13
  * Lenke til informasjonssiden til cookiene i løsningen din.
14
14
  */
15
15
  aboutPage: string;
16
+ /**
17
+ * Tekst for lenken til informasjonssiden.
18
+ */
19
+ aboutPageLinkText?: string;
16
20
  }
17
21
  export type AcceptConsentCallback = (consent: Consent) => void;
18
22
  export type ConsentComponentBaseProps = {
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),s=require("react"),l=require("../icon-button/IconButton.cjs"),o=require("../icon/icons/CloseIcon.cjs"),r=s.forwardRef(({className:s,...l},o)=>a.jsx("div",{className:e.clsx("jkl-modal-container",s),...l,ref:o,"data-portal":!0}));r.displayName="ModalContainer";const d=s.forwardRef(({className:s,transparent:l,...o},r)=>a.jsx("div",{className:e.clsx("jkl-modal-overlay",s,{"jkl-modal-overlay--transparent":l}),...o,ref:r}));d.displayName="ModalOverlay";const t=s.forwardRef(({className:s,component:l,padding:o,style:r,...d},t)=>{const c=l||"div";return a.jsx(c,{className:e.clsx("jkl jkl-modal",s),style:{"--jkl-modal-padding":o?`var(--jkl-spacing-${o})`:void 0,...r},...d,ref:t})});t.displayName="Modal";const c=s.forwardRef(({className:s,...l},o)=>a.jsx("div",{className:e.clsx("jkl-modal-header",s),...l,ref:o}));c.displayName="ModalHeader";const n=s.forwardRef(({className:s,...l},o)=>a.jsx("p",{className:e.clsx("jkl-modal-title",s),...l,ref:o}));n.displayName="ModalTitle";const i=s.forwardRef(({className:s,...r},d)=>a.jsx(l.IconButton,{className:e.clsx("jkl-modal-close",s),"data-testautoid":"jkl-modal-close",...r,ref:d,children:a.jsx(o.CloseIcon,{variant:"medium"})}));i.displayName="ModalCloseButton";const m=s.forwardRef(({className:s,...l},o)=>a.jsx("div",{className:e.clsx("jkl-modal-body",s),...l,ref:o}));m.displayName="ModalBody";const x=s.forwardRef(({className:s,...l},o)=>a.jsx("div",{className:e.clsx("jkl-modal-actions",s),...l,ref:o}));x.displayName="ModalActions",exports.Modal=t,exports.ModalActions=x,exports.ModalBody=m,exports.ModalCloseButton=i,exports.ModalContainer=r,exports.ModalHeader=c,exports.ModalOverlay=d,exports.ModalTitle=n;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),l=require("react"),s=require("../icon-button/IconButton.cjs"),o=require("../icon/icons/CloseIcon.cjs"),r=l.forwardRef(({className:l,placement:s="center",slideIn:o,...r},d)=>a.jsx("div",{className:e.clsx("jkl-modal-container",`jkl-modal-container--placement-${s}`,{"jkl-modal-container--slide-in":o},l),...r,ref:d,"data-portal":!0}));r.displayName="ModalContainer";const d=l.forwardRef(({className:l,transparent:s,...o},r)=>a.jsx("div",{className:e.clsx("jkl-modal-overlay",l,{"jkl-modal-overlay--transparent":s}),...o,ref:r}));d.displayName="ModalOverlay";const t=l.forwardRef(({className:l,component:s,padding:o,style:r,...d},t)=>{const c=s||"div";return a.jsx(c,{className:e.clsx("jkl jkl-modal",l),style:{"--modal-padding":o?`var(--jkl-spacing-${o})`:void 0,...r},...d,ref:t})});t.displayName="Modal";const c=l.forwardRef(({className:l,...s},o)=>a.jsx("div",{className:e.clsx("jkl-modal-header",l),...s,ref:o}));c.displayName="ModalHeader";const n=l.forwardRef(({className:l,...s},o)=>a.jsx("p",{className:e.clsx("jkl-modal-title",l),...s,ref:o}));n.displayName="ModalTitle";const i=l.forwardRef(({className:l,...r},d)=>a.jsx(s.IconButton,{className:e.clsx("jkl-modal-close",l),"data-testautoid":"jkl-modal-close",...r,ref:d,children:a.jsx(o.CloseIcon,{variant:"medium"})}));i.displayName="ModalCloseButton";const m=l.forwardRef(({className:l,...s},o)=>a.jsx("div",{className:e.clsx("jkl-modal-body",l),...s,ref:o}));m.displayName="ModalBody";const j=l.forwardRef(({className:l,...s},o)=>a.jsx("div",{className:e.clsx("jkl-modal-actions",l),...s,ref:o}));j.displayName="ModalActions",exports.Modal=t,exports.ModalActions=j,exports.ModalBody=m,exports.ModalCloseButton=i,exports.ModalContainer=r,exports.ModalHeader=c,exports.ModalOverlay=d,exports.ModalTitle=n;
2
2
  //# sourceMappingURL=Modal.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.cjs","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { IconButtonProps } from \"../icon-button/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport type {\n BaseModalProps,\n ModalConfig,\n ModalOverlayProps,\n ModalProps,\n} from \"./types.js\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n HTMLDivElement,\n ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n return (\n <div\n className={clsx(\"jkl-modal-container\", className)}\n {...rest}\n ref={ref}\n data-portal\n />\n );\n});\nModalContainer.displayName = \"ModalContainer\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n ({ className, transparent, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-overlay\", className, {\n \"jkl-modal-overlay--transparent\": transparent,\n })}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n ({ className, component, padding, style, ...rest }, ref) => {\n const C = component || \"div\";\n return (\n <C\n className={clsx(\"jkl jkl-modal\", className)}\n style={\n {\n \"--jkl-modal-padding\": padding\n ? `var(--jkl-spacing-${padding})`\n : undefined,\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n ref={ref}\n />\n );\n },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-header\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n HTMLParagraphElement,\n ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n BaseModalProps &\n IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton\n className={clsx(\"jkl-modal-close\", className)}\n data-testautoid=\"jkl-modal-close\"\n {...rest}\n ref={ref}\n >\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-body\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-actions\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","C","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"oQAeaA,EAAiBC,EAAAA,WAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,KAIvBJ,EAAeO,YAAc,iBAKtB,MAAMC,EAAeP,EAAAA,WACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,KAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,EAAAA,WACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,KAChD,MAAMU,EAAIH,GAAa,MACvB,OACIN,EAAAA,IAACS,EAAA,CACGZ,UAAWI,EAAAA,KAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMQ,EAAcd,EAAAA,WACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,KAIZW,EAAYR,YAAc,cAKnB,MAAMS,EAAaf,EAAAA,WAGxB,EAAGC,UAAAA,KAAcC,GAAQC,UACtB,IAAA,CAAEF,UAAWI,EAAAA,KAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,KAEhEY,EAAWT,YAAc,aAKlB,MAAMU,EAAmBhB,EAAAA,WAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAAAA,IAACa,EAAAA,WAAA,CACGhB,UAAWI,EAAAA,KAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAe,SAAAd,EAAAA,IAACe,EAAAA,UAAA,CAAUC,QAAQ,cAG3BJ,EAAiBV,YAAc,mBAKxB,MAAMe,EAAYrB,EAAAA,WACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,KAIZkB,EAAUf,YAAc,YAKjB,MAAMgB,EAAetB,EAAAA,WACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGH,UAAWI,EAAAA,KAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,KAIZmB,EAAahB,YAAc"}
1
+ {"version":3,"file":"Modal.cjs","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { IconButtonProps } from \"../icon-button/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport type {\n BaseModalProps,\n ModalConfig,\n ModalContainerProps,\n ModalOverlayProps,\n ModalProps,\n} from \"./types.js\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<HTMLDivElement, ModalContainerProps>(\n ({ className, placement = \"center\", slideIn, ...rest }, ref) => {\n // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n return (\n <div\n className={clsx(\n \"jkl-modal-container\",\n `jkl-modal-container--placement-${placement}`,\n { \"jkl-modal-container--slide-in\": slideIn },\n className,\n )}\n {...rest}\n ref={ref}\n data-portal\n />\n );\n },\n);\nModalContainer.displayName = \"ModalContainer\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n ({ className, transparent, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-overlay\", className, {\n \"jkl-modal-overlay--transparent\": transparent,\n })}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n ({ className, component, padding, style, ...rest }, ref) => {\n const C = component || \"div\";\n return (\n <C\n className={clsx(\"jkl jkl-modal\", className)}\n style={\n {\n \"--modal-padding\": padding\n ? `var(--jkl-spacing-${padding})`\n : undefined,\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n ref={ref}\n />\n );\n },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-header\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n HTMLParagraphElement,\n ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n BaseModalProps &\n IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton\n className={clsx(\"jkl-modal-close\", className)}\n data-testautoid=\"jkl-modal-close\"\n {...rest}\n ref={ref}\n >\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-body\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-actions\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","placement","slideIn","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","C","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"oQAgBaA,EAAiBC,EAAAA,WAC1B,EAAGC,UAAAA,EAAWC,UAAAA,EAAY,SAAUC,QAAAA,KAAYC,GAAQC,IAGhDC,EAAAA,IAAC,MAAA,CACGL,UAAWM,EAAAA,KACP,sBACA,kCAAkCL,IAClC,CAAE,gCAAiCC,GACnCF,MAEAG,EACJC,IAAAA,EACA,eAAW,KAK3BN,EAAeS,YAAc,iBAKtB,MAAMC,EAAeT,EAAAA,WACxB,EAAGC,UAAAA,EAAWS,YAAAA,KAAgBN,GAAQC,IAClCC,EAAAA,IAAC,MAAA,CACGL,UAAWM,EAAAA,KAAK,oBAAqBN,EAAW,CAC5C,iCAAkCS,OAElCN,EACJC,IAAAA,KAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQX,EAAAA,WACjB,EAAGC,UAAAA,EAAWW,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,KAChD,MAAMU,EAAIH,GAAa,MACvB,OACIN,EAAAA,IAACS,EAAA,CACGd,UAAWM,EAAAA,KAAK,gBAAiBN,GACjCa,MACI,CACI,kBAAmBD,EACb,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,MAKhBM,EAAMH,YAAc,QAKb,MAAMQ,EAAchB,EAAAA,WACvB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGL,UAAWM,EAAAA,KAAK,mBAAoBN,MAChCG,EACJC,IAAAA,KAIZW,EAAYR,YAAc,cAKnB,MAAMS,EAAajB,EAAAA,WAGxB,EAAGC,UAAAA,KAAcG,GAAQC,UACtB,IAAA,CAAEJ,UAAWM,EAAAA,KAAK,kBAAmBN,MAAgBG,EAAMC,IAAAA,KAEhEY,EAAWT,YAAc,aAKlB,MAAMU,EAAmBlB,EAAAA,WAK9B,EAAGC,UAAAA,KAAcG,GAAQC,IACvBC,EAAAA,IAACa,EAAAA,WAAA,CACGlB,UAAWM,EAAAA,KAAK,kBAAmBN,GACnC,kBAAgB,qBACZG,EACJC,IAAAA,EAEAe,SAAAd,EAAAA,IAACe,EAAAA,UAAA,CAAUC,QAAQ,cAG3BJ,EAAiBV,YAAc,mBAKxB,MAAMe,EAAYvB,EAAAA,WACrB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGL,UAAWM,EAAAA,KAAK,iBAAkBN,MAC9BG,EACJC,IAAAA,KAIZkB,EAAUf,YAAc,YAKjB,MAAMgB,EAAexB,EAAAA,WACxB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAAA,IAAC,MAAA,CACGL,UAAWM,EAAAA,KAAK,oBAAqBN,MACjCG,EACJC,IAAAA,KAIZmB,EAAahB,YAAc"}
@@ -1,17 +1,10 @@
1
1
  import { default as React } from 'react';
2
2
  import { IconButtonProps } from '../icon-button/types.cjs';
3
- import { BaseModalProps, ModalProps } from './types.cjs';
3
+ import { BaseModalProps, ModalContainerProps, ModalProps } from './types.cjs';
4
4
  /**
5
5
  * Ment å brukes med `useModal`.
6
6
  */
7
- export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<{
8
- id: string;
9
- ref: (node: React.ReactNode | HTMLElement) => void;
10
- role: string;
11
- 'aria-modal': boolean;
12
- 'aria-hidden': boolean;
13
- 'aria-labelledby': string;
14
- } & BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
7
+ export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<ModalContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
15
8
  /**
16
9
  * Ment å brukes med `useModal`.
17
10
  */
@@ -1,3 +1,3 @@
1
1
  export { ModalContainer, ModalOverlay, Modal, ModalHeader, ModalTitle, ModalCloseButton, ModalBody, ModalActions, } from './Modal.cjs';
2
2
  export { useModal, type ModalInstance } from './useModal.cjs';
3
- export type { ModalProps, BaseModalProps, ModalOverlayProps, UseModalOptions, ModalConfig, } from './types.cjs';
3
+ export type { ModalProps, BaseModalProps, ModalContainerProps, ModalOverlayProps, UseModalOptions, ModalConfig, ModalPlacement, } from './types.cjs';
@@ -1,5 +1,6 @@
1
1
  import { A11yDialogConfig, A11yDialogProps } from 'react-a11y-dialog';
2
2
  import { WithOptionalChildren } from '../../core/types.cjs';
3
+ export type ModalPlacement = "center" | "left" | "bottom" | "right";
3
4
  export interface UseModalOptions extends Omit<A11yDialogProps, "id" | "closeButtonPosition"> {
4
5
  id?: string;
5
6
  /**
@@ -34,9 +35,26 @@ export interface ModalProps extends WithOptionalChildren {
34
35
  padding?: 16 | 24 | 40;
35
36
  }
36
37
  export type BaseModalProps = Omit<ModalProps, "padding" | "component">;
38
+ export type ModalContainerProps = ModalConfig["container"] & BaseModalProps & {
39
+ /**
40
+ * Plassering og animasjon styres av containeren, siden det er den som
41
+ * håndterer viewport-layout og `aria-hidden`-tilstand.
42
+ *
43
+ * @default "center"
44
+ */
45
+ placement?: ModalPlacement;
46
+ /**
47
+ * Slå på enkel slide-in-animasjon når modalen vises.
48
+ *
49
+ * @default false
50
+ */
51
+ slideIn?: boolean;
52
+ };
37
53
  export type ModalOverlayProps = ModalConfig["overlay"] & BaseModalProps & {
38
54
  /**
39
55
  * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
56
+ *
57
+ * @default false
40
58
  */
41
59
  transparent?: boolean;
42
60
  };
@@ -1,2 +1,2 @@
1
- "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),t=require("../../hooks/useId/useId.cjs"),r=i.forwardRef((i,r)=>{const{id:l,className:n,checked:o,children:s,label:d,inline:u,invalid:c,name:j,value:b,onChange:k,...m}=i,h=t.useId(l||"jkl-radio-button",{generateSuffix:!l});return e.jsxs("div",{className:a.clsx("jkl-radio-button",n,{"jkl-radio-button--inline":u,"jkl-radio-button--error":c}),children:[e.jsx("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:h,className:"jkl-radio-button__label",children:d||s}),e.jsx("input",{name:j,ref:r,...m,id:h,className:"jkl-radio-button__input",type:"radio",onChange:k,value:b,checked:o,"aria-invalid":c||m["aria-invalid"]})]})});r.displayName="BaseRadioButton",exports.BaseRadioButton=r;
1
+ "use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),a=require("../../../clsx-E3yX_9sL.cjs"),i=require("react"),t=require("../../hooks/useId/useId.cjs"),r=i.forwardRef((i,r)=>{const{id:l,className:n,checked:o,children:s,label:d,inline:u,invalid:c,name:j,value:b,onChange:k,...m}=i,h=t.useId(l||"jkl-radio-button",{generateSuffix:!l});return e.jsxs("div",{className:a.clsx("jkl-radio-button",n,{"jkl-radio-button--inline":u,"jkl-radio-button--error":c}),children:[e.jsx("input",{name:j,ref:r,...m,id:h,className:"jkl-radio-button__input",type:"radio",onChange:k,value:b,checked:o,"aria-invalid":c||m["aria-invalid"]}),e.jsx("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:h,className:"jkl-radio-button__label",children:d||s})]})});r.displayName="BaseRadioButton",exports.BaseRadioButton=r;
2
2
  //# sourceMappingURL=BaseRadioButton.cjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"BaseRadioButton.cjs","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { BaseRadioButtonProps } from \"./types.js\";\n\nexport const BaseRadioButton = forwardRef<\n HTMLInputElement,\n BaseRadioButtonProps\n>((props, ref) => {\n const {\n id,\n className,\n checked,\n children,\n label,\n inline,\n invalid,\n name,\n value,\n onChange,\n ...rest\n } = props;\n\n const inputId = useId(id || \"jkl-radio-button\", { generateSuffix: !id });\n\n return (\n <div\n className={clsx(\"jkl-radio-button\", className, {\n \"jkl-radio-button--inline\": inline,\n \"jkl-radio-button--error\": invalid,\n })}\n >\n <label\n data-testid=\"jkl-radio-button__label-tag\"\n htmlFor={inputId}\n className=\"jkl-radio-button__label\"\n >\n {label || children}\n </label>\n <input\n name={name}\n ref={ref}\n {...rest}\n id={inputId}\n className=\"jkl-radio-button__input\"\n type=\"radio\"\n onChange={onChange}\n value={value}\n checked={checked}\n aria-invalid={invalid || rest[\"aria-invalid\"]}\n />\n </div>\n );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","htmlFor","type","displayName"],"mappings":"yNAKaA,EAAkBC,EAAAA,WAG7B,CAACC,EAAOC,KACN,MACIC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAUC,EAAAA,MAAMZ,GAAM,mBAAoB,CAAEa,gBAAiBb,IAEnE,OACIc,EAAAA,KAAC,MAAA,CACGb,UAAWc,EAAAA,KAAK,mBAAoBd,EAAW,CAC3C,2BAA4BI,EAC5B,0BAA2BC,IAG/BH,SAAA,CAAAa,EAAAA,IAAC,QAAA,CACG,cAAY,8BACZC,QAASN,EACTV,UAAU,0BAETE,SAAAC,GAASD,IAEda,EAAAA,IAAC,QAAA,CACGT,KAAAA,EACAR,IAAAA,KACIW,EACJV,GAAIW,EACJV,UAAU,0BACViB,KAAK,QACLT,SAAAA,EACAD,MAAAA,EACAN,QAAAA,EACA,eAAcI,GAAWI,EAAK,uBAM9Cd,EAAgBuB,YAAc"}
1
+ {"version":3,"file":"BaseRadioButton.cjs","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { BaseRadioButtonProps } from \"./types.js\";\n\nexport const BaseRadioButton = forwardRef<\n HTMLInputElement,\n BaseRadioButtonProps\n>((props, ref) => {\n const {\n id,\n className,\n checked,\n children,\n label,\n inline,\n invalid,\n name,\n value,\n onChange,\n ...rest\n } = props;\n\n const inputId = useId(id || \"jkl-radio-button\", { generateSuffix: !id });\n\n return (\n <div\n className={clsx(\"jkl-radio-button\", className, {\n \"jkl-radio-button--inline\": inline,\n \"jkl-radio-button--error\": invalid,\n })}\n >\n <input\n name={name}\n ref={ref}\n {...rest}\n id={inputId}\n className=\"jkl-radio-button__input\"\n type=\"radio\"\n onChange={onChange}\n value={value}\n checked={checked}\n aria-invalid={invalid || rest[\"aria-invalid\"]}\n />\n <label\n data-testid=\"jkl-radio-button__label-tag\"\n htmlFor={inputId}\n className=\"jkl-radio-button__label\"\n >\n {label || children}\n </label>\n </div>\n );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"yNAKaA,EAAkBC,EAAAA,WAG7B,CAACC,EAAOC,KACN,MACIC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAUC,EAAAA,MAAMZ,GAAM,mBAAoB,CAAEa,gBAAiBb,IAEnE,OACIc,EAAAA,KAAC,MAAA,CACGb,UAAWc,EAAAA,KAAK,mBAAoBd,EAAW,CAC3C,2BAA4BI,EAC5B,0BAA2BC,IAG/BH,SAAA,CAAAa,EAAAA,IAAC,QAAA,CACGT,KAAAA,EACAR,IAAAA,KACIW,EACJV,GAAIW,EACJV,UAAU,0BACVgB,KAAK,QACLR,SAAAA,EACAD,MAAAA,EACAN,QAAAA,EACA,eAAcI,GAAWI,EAAK,kBAElCM,EAAAA,IAAC,QAAA,CACG,cAAY,8BACZE,QAASP,EACTV,UAAU,0BAETE,SAAAC,GAASD,SAM1BP,EAAgBuB,YAAc"}
@@ -1,2 +1,2 @@
1
- import{jsxs as e,jsx as c}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useRef as s,useImperativeHandle as r,useEffect as i}from"react";import{useId as n}from"../../hooks/useId/useId.js";const o=t((t,o)=>{const{id:d,children:l,invalid:k,className:h,inline:m=!1,"data-testautoid":u,checked:x,indeterminate:b,...p}=t,f=s(null);r(o,()=>f.current,[]);const j=n(d||"jkl-checkbox",{generateSuffix:!d});return i(()=>{!0===x&&!0===b&&"production"!==process.env.NODE_ENV&&console.warn("A Checkbox can not be both checked and indeterminate, and will be treated as checked"),f.current&&(f.current.indeterminate=!x&&!!b)},[x,b]),e("div",{className:a("jkl-checkbox",h,{"jkl-checkbox--inline":m,"jkl-checkbox--error":k}),children:[c("label",{htmlFor:j,className:"jkl-checkbox__label",children:l}),c("input",{id:j,ref:f,className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input","aria-invalid":k,type:"checkbox","data-testautoid":u,checked:x,...p})]})});o.displayName="Checkbox";export{o as Checkbox};
1
+ import{jsxs as e,jsx as c}from"react/jsx-runtime";import{c as a}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t,useRef as s,useImperativeHandle as r,useEffect as i}from"react";import{useId as n}from"../../hooks/useId/useId.js";const o=t((t,o)=>{const{id:d,children:l,invalid:k,className:h,inline:m=!1,"data-testautoid":u,checked:x,indeterminate:b,...p}=t,f=s(null);r(o,()=>f.current,[]);const j=n(d||"jkl-checkbox",{generateSuffix:!d});return i(()=>{!0===x&&!0===b&&"production"!==process.env.NODE_ENV&&console.warn("A Checkbox can not be both checked and indeterminate, and will be treated as checked"),f.current&&(f.current.indeterminate=!x&&!!b)},[x,b]),e("div",{className:a("jkl-checkbox",h,{"jkl-checkbox--inline":m,"jkl-checkbox--error":k}),children:[c("input",{id:j,ref:f,className:"jkl-checkbox__input","data-testid":"jkl-checkbox-input","aria-invalid":k,type:"checkbox","data-testautoid":u,checked:x,...p}),c("label",{htmlFor:j,className:"jkl-checkbox__label",children:l})]})});o.displayName="Checkbox";export{o as Checkbox};
2
2
  //# sourceMappingURL=Checkbox.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { CheckboxProps } from \"./types.js\";\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (props, ref) => {\n const {\n id,\n children,\n invalid,\n className,\n inline = false,\n \"data-testautoid\": testAutoId,\n checked,\n indeterminate,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n [],\n );\n\n const inputId = useId(id || \"jkl-checkbox\", { generateSuffix: !id });\n\n useEffect(() => {\n if (\n checked === true &&\n indeterminate === true &&\n process.env.NODE_ENV !== \"production\"\n ) {\n console.warn(\n \"A Checkbox can not be both checked and indeterminate, and will be treated as checked\",\n );\n }\n if (inputRef.current) {\n inputRef.current.indeterminate = !checked && !!indeterminate;\n }\n }, [checked, indeterminate]);\n\n return (\n <div\n className={clsx(\"jkl-checkbox\", className, {\n \"jkl-checkbox--inline\": inline,\n \"jkl-checkbox--error\": invalid,\n })}\n >\n <label htmlFor={inputId} className=\"jkl-checkbox__label\">\n {children}\n </label>\n <input\n id={inputId}\n ref={inputRef}\n className=\"jkl-checkbox__input\"\n data-testid=\"jkl-checkbox-input\"\n aria-invalid={invalid}\n type=\"checkbox\"\n data-testautoid={testAutoId}\n checked={checked}\n {...rest}\n />\n </div>\n );\n },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["Checkbox","forwardRef","props","ref","id","children","invalid","className","inline","testAutoId","checked","indeterminate","rest","inputRef","useRef","useImperativeHandle","current","inputId","useId","generateSuffix","useEffect","process","env","NODE_ENV","console","warn","jsxs","clsx","jsx","htmlFor","type","displayName"],"mappings":"0OAKO,MAAMA,EAAWC,EACpB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,GAAS,EACT,kBAAmBC,EACnBC,QAAAA,EACAC,cAAAA,KACGC,GACHV,EAEEW,EAAWC,EAAyB,MAC1CC,EACIZ,EACA,IAAMU,EAASG,QACf,IAGJ,MAAMC,EAAUC,EAAMd,GAAM,eAAgB,CAAEe,gBAAiBf,IAE/D,OAAAgB,EAAU,MAEU,IAAZV,IACkB,IAAlBC,GACyB,eAAzBU,QAAQC,IAAIC,UAEZC,QAAQC,KACJ,wFAGJZ,EAASG,UACTH,EAASG,QAAQL,eAAiBD,KAAaC,IAEpD,CAACD,EAASC,IAGTe,EAAC,MAAA,CACGnB,UAAWoB,EAAK,eAAgBpB,EAAW,CACvC,uBAAwBC,EACxB,sBAAuBF,IAG3BD,SAAA,CAAAuB,EAAC,QAAA,CAAMC,QAASZ,EAASV,UAAU,sBAC9BF,SAAAA,IAELuB,EAAC,QAAA,CACGxB,GAAIa,EACJd,IAAKU,EACLN,UAAU,sBACV,cAAY,qBACZ,eAAcD,EACdwB,KAAK,WACL,kBAAiBrB,EACjBC,QAAAA,KACIE,SAOxBZ,EAAS+B,YAAc"}
1
+ {"version":3,"file":"Checkbox.js","sources":["../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useEffect, useImperativeHandle, useRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { CheckboxProps } from \"./types.js\";\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n (props, ref) => {\n const {\n id,\n children,\n invalid,\n className,\n inline = false,\n \"data-testautoid\": testAutoId,\n checked,\n indeterminate,\n ...rest\n } = props;\n\n const inputRef = useRef<HTMLInputElement>(null);\n useImperativeHandle(\n ref,\n () => inputRef.current as HTMLInputElement,\n [],\n );\n\n const inputId = useId(id || \"jkl-checkbox\", { generateSuffix: !id });\n\n useEffect(() => {\n if (\n checked === true &&\n indeterminate === true &&\n process.env.NODE_ENV !== \"production\"\n ) {\n console.warn(\n \"A Checkbox can not be both checked and indeterminate, and will be treated as checked\",\n );\n }\n if (inputRef.current) {\n inputRef.current.indeterminate = !checked && !!indeterminate;\n }\n }, [checked, indeterminate]);\n\n return (\n <div\n className={clsx(\"jkl-checkbox\", className, {\n \"jkl-checkbox--inline\": inline,\n \"jkl-checkbox--error\": invalid,\n })}\n >\n <input\n id={inputId}\n ref={inputRef}\n className=\"jkl-checkbox__input\"\n data-testid=\"jkl-checkbox-input\"\n aria-invalid={invalid}\n type=\"checkbox\"\n data-testautoid={testAutoId}\n checked={checked}\n {...rest}\n />\n <label htmlFor={inputId} className=\"jkl-checkbox__label\">\n {children}\n </label>\n </div>\n );\n },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"],"names":["Checkbox","forwardRef","props","ref","id","children","invalid","className","inline","testAutoId","checked","indeterminate","rest","inputRef","useRef","useImperativeHandle","current","inputId","useId","generateSuffix","useEffect","process","env","NODE_ENV","console","warn","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"0OAKO,MAAMA,EAAWC,EACpB,CAACC,EAAOC,KACJ,MACIC,GAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,UAAAA,EACAC,OAAAA,GAAS,EACT,kBAAmBC,EACnBC,QAAAA,EACAC,cAAAA,KACGC,GACHV,EAEEW,EAAWC,EAAyB,MAC1CC,EACIZ,EACA,IAAMU,EAASG,QACf,IAGJ,MAAMC,EAAUC,EAAMd,GAAM,eAAgB,CAAEe,gBAAiBf,IAE/D,OAAAgB,EAAU,MAEU,IAAZV,IACkB,IAAlBC,GACyB,eAAzBU,QAAQC,IAAIC,UAEZC,QAAQC,KACJ,wFAGJZ,EAASG,UACTH,EAASG,QAAQL,eAAiBD,KAAaC,IAEpD,CAACD,EAASC,IAGTe,EAAC,MAAA,CACGnB,UAAWoB,EAAK,eAAgBpB,EAAW,CACvC,uBAAwBC,EACxB,sBAAuBF,IAG3BD,SAAA,CAAAuB,EAAC,QAAA,CACGxB,GAAIa,EACJd,IAAKU,EACLN,UAAU,sBACV,cAAY,qBACZ,eAAcD,EACduB,KAAK,WACL,kBAAiBpB,EACjBC,QAAAA,KACIE,MAEP,QAAA,CAAMkB,QAASb,EAASV,UAAU,sBAC9BF,SAAAA,SAOrBL,EAAS+B,YAAc"}
@@ -1,2 +1,2 @@
1
1
  import { CookieConsentProps } from './types.js';
2
- export declare const CookieConsent: ({ blocking, onAccept, aboutPage, ...rest }: CookieConsentProps) => JSX.Element | null;
2
+ export declare const CookieConsent: ({ blocking, onAccept, aboutPage, aboutPageLinkText, ...rest }: CookieConsentProps) => JSX.Element | null;
@@ -1,2 +1,2 @@
1
- import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useId as n,useEffect as t}from"react";import r from"react-dom";import{Button as a}from"../button/Button.js";import{Flex as i}from"../flex/Flex.js";import{Link as s}from"../link/Link.js";import{ModalContainer as l,ModalOverlay as d,Modal as c,ModalHeader as m,ModalTitle as k,ModalBody as p,ModalActions as u}from"../modal/Modal.js";import{useModal as f}from"../modal/useModal.js";import{useInternalState as h}from"./CookieConsentContext.js";import{setConsentCookie as g}from"./cookieConsentUtils.js";const j=({blocking:j,onAccept:C,aboutPage:v="https://www.fremtind.no/informasjonskapsler",...b})=>{const{currentConsent:y,cookieName:M,cookieDomain:x,cookiePath:w,isOpen:I,setIsOpen:B,updateCurrentConsents:F}=h(),[L,O]=f({id:`jkl-cookie-modal-${n()}`,role:j?"alertdialog":"dialog",title:"Informasjonskapsler"});if(t(()=>{I?L?.show():L?.hide()},[L,I]),t(()=>{const e=()=>B(!1);return L?.on("hide",e),()=>{L?.off("hide",e)}},[L,B]),typeof document>"u")return null;if(typeof navigator<"u"&&!navigator.cookieEnabled)return C?.({functional:"denied",statistics:"denied",marketing:"denied"}),null;const P=e=>{const o={...y,functional:e,statistics:e,marketing:"denied"};g({consent:o,name:M,domain:x,path:w}),C?.(o),F(),L?.hide()};return r.createPortal(e(l,{...O.container,...b,"data-cookie-consent-open":I,children:[o(d,{...O.overlay}),e(c,{...O.modal,children:[o(m,{children:o(k,{...O.title,children:"Får vi bruke valgfrie informasjonskapsler?"})}),o(p,{children:e(i,{direction:"column",gap:"m",children:[o("p",{children:"Vi ønsker å samle anonym statistikk for å forstå hvordan nettsidene våre brukes. Det hjelper oss til å gjøre innhold og løsninger bedre og mer brukervennlige."}),e("p",{children:[o(s,{href:v,target:"_blank",children:"Les mer om hvilke informasjonskapsler vi lagrer her"}),"."]})]})}),e(u,{children:[o(a,{variant:"secondary","data-testid":"jkl-cookie-consent-godta",type:"button",onClick:()=>P("accepted"),children:"Ja, det er greit"}),o(a,{variant:"secondary","data-testid":"jkl-cookie-consent-nekt",type:"button",onClick:()=>P("denied"),children:"Nei takk"})]})]})]}),document.body)};export{j as CookieConsent};
1
+ import{jsxs as e,jsx as o}from"react/jsx-runtime";import{useId as n,useEffect as t}from"react";import a from"react-dom";import{Button as r}from"../button/Button.js";import{Flex as i}from"../flex/Flex.js";import{Link as s}from"../link/Link.js";import{ModalContainer as d,ModalOverlay as l,Modal as c,ModalHeader as m,ModalTitle as k,ModalBody as u,ModalActions as p}from"../modal/Modal.js";import{useModal as f}from"../modal/useModal.js";import{useInternalState as h}from"./CookieConsentContext.js";import{setConsentCookie as g}from"./cookieConsentUtils.js";const j=({blocking:j,onAccept:C,aboutPage:b="https://www.fremtind.no/informasjonskapsler",aboutPageLinkText:v="Les mer om hvilke informasjons­kapsler vi lagrer her",...y})=>{const{currentConsent:M,cookieName:x,cookieDomain:w,cookiePath:F,isOpen:I,setIsOpen:L,updateCurrentConsents:P}=h(),[B,O]=f({id:`jkl-cookie-modal-${n()}`,role:j?"alertdialog":"dialog",title:"Informasjonskapsler"});if(t(()=>{I?B?.show():B?.hide()},[B,I]),t(()=>{const e=()=>L(!1);return B?.on("hide",e),()=>{B?.off("hide",e)}},[B,L]),typeof document>"u")return null;if(typeof navigator<"u"&&!navigator.cookieEnabled)return C?.({functional:"denied",statistics:"denied",marketing:"denied"}),null;const A=e=>{const o={...M,functional:e,statistics:e,marketing:"denied"};g({consent:o,name:x,domain:w,path:F}),C?.(o),P(),B?.hide()};return a.createPortal(e(d,{...O.container,...y,"data-cookie-consent-open":I,children:[o(l,{...O.overlay}),e(c,{...O.modal,children:[o(m,{children:o(k,{...O.title,children:"Får vi bruke valgfrie informasjons­kapsler?"})}),o(u,{children:e(i,{direction:"column",gap:"m",children:[o("p",{children:"Fremtind ønsker å samle anonym statistikk for å forstå hvordan nettsidene våre brukes. Det hjelper oss til å gjøre innhold og løsninger bedre og mer brukervennlige."}),e("p",{children:[o(s,{href:b,target:"_blank",children:v}),"."]})]})}),e(p,{children:[o(r,{variant:"secondary","data-testid":"jkl-cookie-consent-godta",type:"button",onClick:()=>A("accepted"),children:"Ja, det er greit"}),o(r,{variant:"secondary","data-testid":"jkl-cookie-consent-nekt",type:"button",onClick:()=>A("denied"),children:"Nei takk"})]})]})]}),document.body)};export{j as CookieConsent};
2
2
  //# sourceMappingURL=CookieConsent.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"CookieConsent.js","sources":["../../../../src/components/cookie-consent/CookieConsent.tsx"],"sourcesContent":["import React, { useEffect, useId } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { Link } from \"../link/index.js\";\nimport {\n Modal,\n ModalActions,\n ModalBody,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from \"../modal/Modal.js\";\nimport { useModal } from \"../modal/useModal.js\";\nimport { useInternalState } from \"./CookieConsentContext.js\";\nimport { setConsentCookie } from \"./cookieConsentUtils.js\";\nimport type { Consent, ConsentState, CookieConsentProps } from \"./types.js\";\n\nexport const CookieConsent = ({\n blocking,\n onAccept,\n aboutPage = \"https://www.fremtind.no/informasjonskapsler\",\n ...rest\n}: CookieConsentProps): JSX.Element | null => {\n const {\n currentConsent,\n cookieName,\n cookieDomain,\n cookiePath,\n isOpen,\n setIsOpen,\n updateCurrentConsents,\n } = useInternalState();\n\n const [instance, modalConfig] = useModal({\n id: `jkl-cookie-modal-${useId()}`,\n // The optional `role` attribute of the dialog element, either `dialog`\n // (default) or `alertdialog` to make it a modal (preventing closing on\n // click outside of ESC key).\n role: blocking ? \"alertdialog\" : \"dialog\",\n // The required dialog title, mandatory in the document\n // to provide context to assistive technology.\n title: \"Informasjonskapsler\",\n });\n useEffect(() => {\n if (isOpen) {\n instance?.show();\n } else {\n instance?.hide();\n }\n }, [instance, isOpen]);\n\n useEffect(() => {\n const onHide = () => setIsOpen(false);\n instance?.on(\"hide\", onHide);\n return () => {\n instance?.off(\"hide\", onHide);\n };\n }, [instance, setIsOpen]);\n\n if (typeof document === \"undefined\") {\n return null;\n }\n\n // Cookies are disabled in the browser\n if (typeof navigator !== \"undefined\" && !navigator.cookieEnabled) {\n onAccept?.({\n functional: \"denied\",\n statistics: \"denied\",\n marketing: \"denied\",\n });\n\n return null;\n }\n\n const updateCookies = (state: ConsentState) => {\n const updatedConsent: Consent = {\n ...currentConsent,\n functional: state,\n statistics: state,\n marketing: \"denied\",\n };\n\n setConsentCookie({\n consent: updatedConsent,\n name: cookieName,\n domain: cookieDomain,\n path: cookiePath,\n });\n\n onAccept?.(updatedConsent);\n\n updateCurrentConsents();\n\n instance?.hide();\n };\n\n return ReactDOM.createPortal(\n <ModalContainer\n {...modalConfig.container}\n {...rest}\n data-cookie-consent-open={isOpen}\n >\n <ModalOverlay {...modalConfig.overlay} />\n <Modal {...modalConfig.modal}>\n <ModalHeader>\n <ModalTitle {...modalConfig.title}>\n Får vi bruke valgfrie informasjonskapsler?\n </ModalTitle>\n </ModalHeader>\n <ModalBody>\n <Flex direction=\"column\" gap=\"m\">\n <p>\n Vi ønsker å samle anonym statistikk for å forstå\n hvordan nettsidene våre brukes. Det hjelper oss til\n å gjøre innhold og løsninger bedre og mer\n brukervennlige.\n </p>\n <p>\n <Link href={aboutPage} target=\"_blank\">\n Les mer om hvilke informasjonskapsler vi lagrer\n her\n </Link>\n .\n </p>\n </Flex>\n </ModalBody>\n <ModalActions>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-godta\"\n type=\"button\"\n onClick={() => updateCookies(\"accepted\")}\n >\n Ja, det er greit\n </Button>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-nekt\"\n type=\"button\"\n onClick={() => updateCookies(\"denied\")}\n >\n Nei takk\n </Button>\n </ModalActions>\n </Modal>\n </ModalContainer>,\n document.body,\n );\n};\n"],"names":["CookieConsent","blocking","onAccept","aboutPage","rest","currentConsent","cookieName","cookieDomain","cookiePath","isOpen","setIsOpen","updateCurrentConsents","useInternalState","instance","modalConfig","useModal","id","useId","role","title","useEffect","show","hide","onHide","on","off","document","navigator","cookieEnabled","functional","statistics","marketing","updateCookies","state","updatedConsent","setConsentCookie","consent","name","domain","path","ReactDOM","createPortal","jsxs","ModalContainer","container","children","jsx","ModalOverlay","overlay","Modal","modal","ModalHeader","ModalTitle","ModalBody","Flex","direction","gap","Link","href","target","ModalActions","Button","variant","type","onClick","body"],"mappings":"6iBAmBO,MAAMA,EAAgB,EACzBC,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EAAY,iDACTC,MAEH,MACIC,eAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,sBAAAA,GACAC,KAEGC,EAAUC,GAAeC,EAAS,CACrCC,GAAI,oBAAoBC,MAIxBC,KAAMjB,EAAW,cAAgB,SAGjCkB,MAAO,wBAkBX,GAhBAC,EAAU,KACFX,EACAI,GAAUQ,OAEVR,GAAUS,QAEf,CAACT,EAAUJ,IAEdW,EAAU,KACN,MAAMG,EAAS,IAAMb,GAAU,GAC/B,OAAAG,GAAUW,GAAG,OAAQD,GACd,KACHV,GAAUY,IAAI,OAAQF,KAE3B,CAACV,EAAUH,WAEHgB,SAAa,IACpB,OAAO,KAIX,UAAWC,UAAc,MAAgBA,UAAUC,cAC/C,OAAA1B,IAAW,CACP2B,WAAY,SACZC,WAAY,SACZC,UAAW,WAGR,KAGX,MAAMC,EAAiBC,IACnB,MAAMC,EAA0B,IACzB7B,EACHwB,WAAYI,EACZH,WAAYG,EACZF,UAAW,UAGfI,EAAiB,CACbC,QAASF,EACTG,KAAM/B,EACNgC,OAAQ/B,EACRgC,KAAM/B,IAGVN,IAAWgC,GAEXvB,IAEAE,GAAUS,QAGd,OAAOkB,EAASC,aACZC,EAACC,EAAA,IACO7B,EAAY8B,aACZxC,EACJ,2BAA0BK,EAE1BoC,SAAA,CAAAC,EAACC,EAAA,IAAiBjC,EAAYkC,UAC9BN,EAACO,EAAA,IAAUnC,EAAYoC,MACnBL,SAAA,CAAAC,EAACK,GACGN,SAAAC,EAACM,EAAA,IAAetC,EAAYK,MAAO0B,4DAItCQ,EAAA,CACGR,SAAAH,EAACY,GAAKC,UAAU,SAASC,IAAI,IACzBX,SAAA,CAAAC,EAAC,KAAED,SAAA,qKAMF,IAAA,CACGA,SAAA,CAAAC,EAACW,EAAA,CAAKC,KAAMvD,EAAWwD,OAAO,SAASd,SAAA,wDAGhC,cAKlBe,EAAA,CACGf,SAAA,CAAAC,EAACe,EAAA,CACGC,QAAQ,YACR,cAAY,2BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,YAChCa,SAAA,qBAGDC,EAACe,EAAA,CACGC,QAAQ,YACR,cAAY,0BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,UAChCa,SAAA,sBAMbnB,SAASuC"}
1
+ {"version":3,"file":"CookieConsent.js","sources":["../../../../src/components/cookie-consent/CookieConsent.tsx"],"sourcesContent":["import React, { useEffect, useId } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { Link } from \"../link/index.js\";\nimport {\n Modal,\n ModalActions,\n ModalBody,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from \"../modal/Modal.js\";\nimport { useModal } from \"../modal/useModal.js\";\nimport { useInternalState } from \"./CookieConsentContext.js\";\nimport { setConsentCookie } from \"./cookieConsentUtils.js\";\nimport type { Consent, ConsentState, CookieConsentProps } from \"./types.js\";\n\nexport const CookieConsent = ({\n blocking,\n onAccept,\n aboutPage = \"https://www.fremtind.no/informasjonskapsler\",\n aboutPageLinkText = \"Les mer om hvilke informasjons­kapsler vi lagrer her\",\n ...rest\n}: CookieConsentProps): JSX.Element | null => {\n const {\n currentConsent,\n cookieName,\n cookieDomain,\n cookiePath,\n isOpen,\n setIsOpen,\n updateCurrentConsents,\n } = useInternalState();\n\n const [instance, modalConfig] = useModal({\n id: `jkl-cookie-modal-${useId()}`,\n // The optional `role` attribute of the dialog element, either `dialog`\n // (default) or `alertdialog` to make it a modal (preventing closing on\n // click outside of ESC key).\n role: blocking ? \"alertdialog\" : \"dialog\",\n // The required dialog title, mandatory in the document\n // to provide context to assistive technology.\n title: \"Informasjonskapsler\",\n });\n useEffect(() => {\n if (isOpen) {\n instance?.show();\n } else {\n instance?.hide();\n }\n }, [instance, isOpen]);\n\n useEffect(() => {\n const onHide = () => setIsOpen(false);\n instance?.on(\"hide\", onHide);\n return () => {\n instance?.off(\"hide\", onHide);\n };\n }, [instance, setIsOpen]);\n\n if (typeof document === \"undefined\") {\n return null;\n }\n\n // Cookies are disabled in the browser\n if (typeof navigator !== \"undefined\" && !navigator.cookieEnabled) {\n onAccept?.({\n functional: \"denied\",\n statistics: \"denied\",\n marketing: \"denied\",\n });\n\n return null;\n }\n\n const updateCookies = (state: ConsentState) => {\n const updatedConsent: Consent = {\n ...currentConsent,\n functional: state,\n statistics: state,\n marketing: \"denied\",\n };\n\n setConsentCookie({\n consent: updatedConsent,\n name: cookieName,\n domain: cookieDomain,\n path: cookiePath,\n });\n\n onAccept?.(updatedConsent);\n\n updateCurrentConsents();\n\n instance?.hide();\n };\n\n return ReactDOM.createPortal(\n <ModalContainer\n {...modalConfig.container}\n {...rest}\n data-cookie-consent-open={isOpen}\n >\n <ModalOverlay {...modalConfig.overlay} />\n <Modal {...modalConfig.modal}>\n <ModalHeader>\n <ModalTitle {...modalConfig.title}>\n Får vi bruke valgfrie informasjons&shy;kapsler?\n </ModalTitle>\n </ModalHeader>\n <ModalBody>\n <Flex direction=\"column\" gap=\"m\">\n <p>\n Fremtind ønsker å samle anonym statistikk for å\n forstå hvordan nettsidene våre brukes. Det hjelper\n oss til å gjøre innhold og løsninger bedre og mer\n brukervennlige.\n </p>\n <p>\n <Link href={aboutPage} target=\"_blank\">\n {aboutPageLinkText}\n </Link>\n .\n </p>\n </Flex>\n </ModalBody>\n <ModalActions>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-godta\"\n type=\"button\"\n onClick={() => updateCookies(\"accepted\")}\n >\n Ja, det er greit\n </Button>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-nekt\"\n type=\"button\"\n onClick={() => updateCookies(\"denied\")}\n >\n Nei takk\n </Button>\n </ModalActions>\n </Modal>\n </ModalContainer>,\n document.body,\n );\n};\n"],"names":["CookieConsent","blocking","onAccept","aboutPage","aboutPageLinkText","rest","currentConsent","cookieName","cookieDomain","cookiePath","isOpen","setIsOpen","updateCurrentConsents","useInternalState","instance","modalConfig","useModal","id","useId","role","title","useEffect","show","hide","onHide","on","off","document","navigator","cookieEnabled","functional","statistics","marketing","updateCookies","state","updatedConsent","setConsentCookie","consent","name","domain","path","ReactDOM","createPortal","jsxs","ModalContainer","container","children","jsx","ModalOverlay","overlay","Modal","modal","ModalHeader","ModalTitle","ModalBody","Flex","direction","gap","Link","href","target","ModalActions","Button","variant","type","onClick","body"],"mappings":"6iBAmBO,MAAMA,EAAgB,EACzBC,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EAAY,8CACZC,kBAAAA,EAAoB,0DACjBC,MAEH,MACIC,eAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,sBAAAA,GACAC,KAEGC,EAAUC,GAAeC,EAAS,CACrCC,GAAI,oBAAoBC,MAIxBC,KAAMlB,EAAW,cAAgB,SAGjCmB,MAAO,wBAkBX,GAhBAC,EAAU,KACFX,EACAI,GAAUQ,OAEVR,GAAUS,QAEf,CAACT,EAAUJ,IAEdW,EAAU,KACN,MAAMG,EAAS,IAAMb,GAAU,GAC/B,OAAAG,GAAUW,GAAG,OAAQD,GACd,KACHV,GAAUY,IAAI,OAAQF,KAE3B,CAACV,EAAUH,WAEHgB,SAAa,IACpB,OAAO,KAIX,UAAWC,UAAc,MAAgBA,UAAUC,cAC/C,OAAA3B,IAAW,CACP4B,WAAY,SACZC,WAAY,SACZC,UAAW,WAGR,KAGX,MAAMC,EAAiBC,IACnB,MAAMC,EAA0B,IACzB7B,EACHwB,WAAYI,EACZH,WAAYG,EACZF,UAAW,UAGfI,EAAiB,CACbC,QAASF,EACTG,KAAM/B,EACNgC,OAAQ/B,EACRgC,KAAM/B,IAGVP,IAAWiC,GAEXvB,IAEAE,GAAUS,QAGd,OAAOkB,EAASC,aACZC,EAACC,EAAA,IACO7B,EAAY8B,aACZxC,EACJ,2BAA0BK,EAE1BoC,SAAA,CAAAC,EAACC,EAAA,IAAiBjC,EAAYkC,UAC9BN,EAACO,EAAA,IAAUnC,EAAYoC,MACnBL,SAAA,CAAAC,EAACK,GACGN,SAAAC,EAACM,EAAA,IAAetC,EAAYK,MAAO0B,6DAItCQ,EAAA,CACGR,SAAAH,EAACY,GAAKC,UAAU,SAASC,IAAI,IACzBX,SAAA,CAAAC,EAAC,KAAED,SAAA,2KAMF,IAAA,CACGA,SAAA,CAAAC,EAACW,EAAA,CAAKC,KAAMxD,EAAWyD,OAAO,SACzBd,SAAA1C,IACE,cAKlByD,EAAA,CACGf,SAAA,CAAAC,EAACe,EAAA,CACGC,QAAQ,YACR,cAAY,2BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,YAChCa,SAAA,qBAGDC,EAACe,EAAA,CACGC,QAAQ,YACR,cAAY,0BACZC,KAAK,SACLC,QAAS,IAAMhC,EAAc,UAChCa,SAAA,sBAMbnB,SAASuC"}
@@ -13,6 +13,10 @@ export interface CookieConsentProps {
13
13
  * Lenke til informasjonssiden til cookiene i løsningen din.
14
14
  */
15
15
  aboutPage: string;
16
+ /**
17
+ * Tekst for lenken til informasjonssiden.
18
+ */
19
+ aboutPageLinkText?: string;
16
20
  }
17
21
  export type AcceptConsentCallback = (consent: Consent) => void;
18
22
  export type ConsentComponentBaseProps = {
@@ -1,17 +1,10 @@
1
1
  import { default as React } from 'react';
2
2
  import { IconButtonProps } from '../icon-button/types.js';
3
- import { BaseModalProps, ModalProps } from './types.js';
3
+ import { BaseModalProps, ModalContainerProps, ModalProps } from './types.js';
4
4
  /**
5
5
  * Ment å brukes med `useModal`.
6
6
  */
7
- export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<{
8
- id: string;
9
- ref: (node: React.ReactNode | HTMLElement) => void;
10
- role: string;
11
- 'aria-modal': boolean;
12
- 'aria-hidden': boolean;
13
- 'aria-labelledby': string;
14
- } & BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
7
+ export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<ModalContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
15
8
  /**
16
9
  * Ment å brukes med `useModal`.
17
10
  */
@@ -1,2 +1,2 @@
1
- import{jsx as a}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{forwardRef as l}from"react";import{IconButton as o}from"../icon-button/IconButton.js";import{CloseIcon as e}from"../icon/icons/CloseIcon.js";const d=l(({className:l,...o},e)=>a("div",{className:s("jkl-modal-container",l),...o,ref:e,"data-portal":!0}));d.displayName="ModalContainer";const t=l(({className:l,transparent:o,...e},d)=>a("div",{className:s("jkl-modal-overlay",l,{"jkl-modal-overlay--transparent":o}),...e,ref:d}));t.displayName="ModalOverlay";const m=l(({className:l,component:o,padding:e,style:d,...t},m)=>a(o||"div",{className:s("jkl jkl-modal",l),style:{"--jkl-modal-padding":e?`var(--jkl-spacing-${e})`:void 0,...d},...t,ref:m}));m.displayName="Modal";const c=l(({className:l,...o},e)=>a("div",{className:s("jkl-modal-header",l),...o,ref:e}));c.displayName="ModalHeader";const r=l(({className:l,...o},e)=>a("p",{className:s("jkl-modal-title",l),...o,ref:e}));r.displayName="ModalTitle";const n=l(({className:l,...d},t)=>a(o,{className:s("jkl-modal-close",l),"data-testautoid":"jkl-modal-close",...d,ref:t,children:a(e,{variant:"medium"})}));n.displayName="ModalCloseButton";const i=l(({className:l,...o},e)=>a("div",{className:s("jkl-modal-body",l),...o,ref:e}));i.displayName="ModalBody";const N=l(({className:l,...o},e)=>a("div",{className:s("jkl-modal-actions",l),...o,ref:e}));N.displayName="ModalActions";export{m as Modal,N as ModalActions,i as ModalBody,n as ModalCloseButton,d as ModalContainer,c as ModalHeader,t as ModalOverlay,r as ModalTitle};
1
+ import{jsx as a}from"react/jsx-runtime";import{c as l}from"../../../clsx-BeLtu-UY.js";import{forwardRef as o}from"react";import{IconButton as s}from"../icon-button/IconButton.js";import{CloseIcon as e}from"../icon/icons/CloseIcon.js";const d=o(({className:o,placement:s="center",slideIn:e,...d},t)=>a("div",{className:l("jkl-modal-container",`jkl-modal-container--placement-${s}`,{"jkl-modal-container--slide-in":e},o),...d,ref:t,"data-portal":!0}));d.displayName="ModalContainer";const t=o(({className:o,transparent:s,...e},d)=>a("div",{className:l("jkl-modal-overlay",o,{"jkl-modal-overlay--transparent":s}),...e,ref:d}));t.displayName="ModalOverlay";const m=o(({className:o,component:s,padding:e,style:d,...t},m)=>a(s||"div",{className:l("jkl jkl-modal",o),style:{"--modal-padding":e?`var(--jkl-spacing-${e})`:void 0,...d},...t,ref:m}));m.displayName="Modal";const n=o(({className:o,...s},e)=>a("div",{className:l("jkl-modal-header",o),...s,ref:e}));n.displayName="ModalHeader";const c=o(({className:o,...s},e)=>a("p",{className:l("jkl-modal-title",o),...s,ref:e}));c.displayName="ModalTitle";const i=o(({className:o,...d},t)=>a(s,{className:l("jkl-modal-close",o),"data-testautoid":"jkl-modal-close",...d,ref:t,children:a(e,{variant:"medium"})}));i.displayName="ModalCloseButton";const r=o(({className:o,...s},e)=>a("div",{className:l("jkl-modal-body",o),...s,ref:e}));r.displayName="ModalBody";const p=o(({className:o,...s},e)=>a("div",{className:l("jkl-modal-actions",o),...s,ref:e}));p.displayName="ModalActions";export{m as Modal,p as ModalActions,r as ModalBody,i as ModalCloseButton,d as ModalContainer,n as ModalHeader,t as ModalOverlay,c as ModalTitle};
2
2
  //# sourceMappingURL=Modal.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { IconButtonProps } from \"../icon-button/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport type {\n BaseModalProps,\n ModalConfig,\n ModalOverlayProps,\n ModalProps,\n} from \"./types.js\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n HTMLDivElement,\n ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n return (\n <div\n className={clsx(\"jkl-modal-container\", className)}\n {...rest}\n ref={ref}\n data-portal\n />\n );\n});\nModalContainer.displayName = \"ModalContainer\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n ({ className, transparent, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-overlay\", className, {\n \"jkl-modal-overlay--transparent\": transparent,\n })}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n ({ className, component, padding, style, ...rest }, ref) => {\n const C = component || \"div\";\n return (\n <C\n className={clsx(\"jkl jkl-modal\", className)}\n style={\n {\n \"--jkl-modal-padding\": padding\n ? `var(--jkl-spacing-${padding})`\n : undefined,\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n ref={ref}\n />\n );\n },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-header\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n HTMLParagraphElement,\n ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n BaseModalProps &\n IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton\n className={clsx(\"jkl-modal-close\", className)}\n data-testautoid=\"jkl-modal-close\"\n {...rest}\n ref={ref}\n >\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-body\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-actions\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"0OAeO,MAAMA,EAAiBC,EAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAC,MAAA,CACGH,UAAWI,EAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,KAIvBJ,EAAeO,YAAc,iBAKtB,MAAMC,EAAeP,EACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,KAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,EACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,IAG5CC,EAFMM,GAAa,MAElB,CACGT,UAAWI,EAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,KAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcb,EACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,KAIZU,EAAYP,YAAc,cAKnB,MAAMQ,EAAad,EAGxB,EAAGC,UAAAA,KAAcC,GAAQC,MACtB,IAAA,CAAEF,UAAWI,EAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,KAEhEW,EAAWR,YAAc,aAKlB,MAAMS,EAAmBf,EAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAACY,EAAA,CACGf,UAAWI,EAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAc,SAAAb,EAACc,EAAA,CAAUC,QAAQ,cAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYpB,EACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,KAIZiB,EAAUd,YAAc,YAKjB,MAAMe,EAAerB,EACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,KAIZkB,EAAaf,YAAc"}
1
+ {"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { IconButtonProps } from \"../icon-button/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport type {\n BaseModalProps,\n ModalConfig,\n ModalContainerProps,\n ModalOverlayProps,\n ModalProps,\n} from \"./types.js\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<HTMLDivElement, ModalContainerProps>(\n ({ className, placement = \"center\", slideIn, ...rest }, ref) => {\n // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n return (\n <div\n className={clsx(\n \"jkl-modal-container\",\n `jkl-modal-container--placement-${placement}`,\n { \"jkl-modal-container--slide-in\": slideIn },\n className,\n )}\n {...rest}\n ref={ref}\n data-portal\n />\n );\n },\n);\nModalContainer.displayName = \"ModalContainer\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n ({ className, transparent, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-overlay\", className, {\n \"jkl-modal-overlay--transparent\": transparent,\n })}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n ({ className, component, padding, style, ...rest }, ref) => {\n const C = component || \"div\";\n return (\n <C\n className={clsx(\"jkl jkl-modal\", className)}\n style={\n {\n \"--modal-padding\": padding\n ? `var(--jkl-spacing-${padding})`\n : undefined,\n ...style,\n } as React.CSSProperties\n }\n {...rest}\n ref={ref}\n />\n );\n },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-header\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n HTMLParagraphElement,\n ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n HTMLButtonElement,\n Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n BaseModalProps &\n IconButtonProps\n>(({ className, ...rest }, ref) => (\n <IconButton\n className={clsx(\"jkl-modal-close\", className)}\n data-testautoid=\"jkl-modal-close\"\n {...rest}\n ref={ref}\n >\n <CloseIcon variant=\"medium\" />\n </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-body\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n ({ className, ...rest }, ref) => (\n <div\n className={clsx(\"jkl-modal-actions\", className)}\n {...rest}\n ref={ref}\n />\n ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","placement","slideIn","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"0OAgBO,MAAMA,EAAiBC,EAC1B,EAAGC,UAAAA,EAAWC,UAAAA,EAAY,SAAUC,QAAAA,KAAYC,GAAQC,IAGhDC,EAAC,MAAA,CACGL,UAAWM,EACP,sBACA,kCAAkCL,IAClC,CAAE,gCAAiCC,GACnCF,MAEAG,EACJC,IAAAA,EACA,eAAW,KAK3BN,EAAeS,YAAc,iBAKtB,MAAMC,EAAeT,EACxB,EAAGC,UAAAA,EAAWS,YAAAA,KAAgBN,GAAQC,IAClCC,EAAC,MAAA,CACGL,UAAWM,EAAK,oBAAqBN,EAAW,CAC5C,iCAAkCS,OAElCN,EACJC,IAAAA,KAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQX,EACjB,EAAGC,UAAAA,EAAWW,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,IAG5CC,EAFMM,GAAa,MAElB,CACGX,UAAWM,EAAK,gBAAiBN,GACjCa,MACI,CACI,kBAAmBD,EACb,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,KAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcf,EACvB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAC,MAAA,CACGL,UAAWM,EAAK,mBAAoBN,MAChCG,EACJC,IAAAA,KAIZU,EAAYP,YAAc,cAKnB,MAAMQ,EAAahB,EAGxB,EAAGC,UAAAA,KAAcG,GAAQC,MACtB,IAAA,CAAEJ,UAAWM,EAAK,kBAAmBN,MAAgBG,EAAMC,IAAAA,KAEhEW,EAAWR,YAAc,aAKlB,MAAMS,EAAmBjB,EAK9B,EAAGC,UAAAA,KAAcG,GAAQC,IACvBC,EAACY,EAAA,CACGjB,UAAWM,EAAK,kBAAmBN,GACnC,kBAAgB,qBACZG,EACJC,IAAAA,EAEAc,SAAAb,EAACc,EAAA,CAAUC,QAAQ,cAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYtB,EACrB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAC,MAAA,CACGL,UAAWM,EAAK,iBAAkBN,MAC9BG,EACJC,IAAAA,KAIZiB,EAAUd,YAAc,YAKjB,MAAMe,EAAevB,EACxB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAC,MAAA,CACGL,UAAWM,EAAK,oBAAqBN,MACjCG,EACJC,IAAAA,KAIZkB,EAAaf,YAAc"}
@@ -1,3 +1,3 @@
1
1
  export { ModalContainer, ModalOverlay, Modal, ModalHeader, ModalTitle, ModalCloseButton, ModalBody, ModalActions, } from './Modal.js';
2
2
  export { useModal, type ModalInstance } from './useModal.js';
3
- export type { ModalProps, BaseModalProps, ModalOverlayProps, UseModalOptions, ModalConfig, } from './types.js';
3
+ export type { ModalProps, BaseModalProps, ModalContainerProps, ModalOverlayProps, UseModalOptions, ModalConfig, ModalPlacement, } from './types.js';
@@ -1,5 +1,6 @@
1
1
  import { A11yDialogConfig, A11yDialogProps } from 'react-a11y-dialog';
2
2
  import { WithOptionalChildren } from '../../core/types.js';
3
+ export type ModalPlacement = "center" | "left" | "bottom" | "right";
3
4
  export interface UseModalOptions extends Omit<A11yDialogProps, "id" | "closeButtonPosition"> {
4
5
  id?: string;
5
6
  /**
@@ -34,9 +35,26 @@ export interface ModalProps extends WithOptionalChildren {
34
35
  padding?: 16 | 24 | 40;
35
36
  }
36
37
  export type BaseModalProps = Omit<ModalProps, "padding" | "component">;
38
+ export type ModalContainerProps = ModalConfig["container"] & BaseModalProps & {
39
+ /**
40
+ * Plassering og animasjon styres av containeren, siden det er den som
41
+ * håndterer viewport-layout og `aria-hidden`-tilstand.
42
+ *
43
+ * @default "center"
44
+ */
45
+ placement?: ModalPlacement;
46
+ /**
47
+ * Slå på enkel slide-in-animasjon når modalen vises.
48
+ *
49
+ * @default false
50
+ */
51
+ slideIn?: boolean;
52
+ };
37
53
  export type ModalOverlayProps = ModalConfig["overlay"] & BaseModalProps & {
38
54
  /**
39
55
  * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
56
+ *
57
+ * @default false
40
58
  */
41
59
  transparent?: boolean;
42
60
  };
@@ -1,2 +1,2 @@
1
- import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{useId as o}from"../../hooks/useId/useId.js";const r=t((t,r)=>{const{id:l,className:n,checked:s,children:d,label:u,inline:c,invalid:m,name:j,value:b,onChange:k,...f}=t,h=o(l||"jkl-radio-button",{generateSuffix:!l});return a("div",{className:i("jkl-radio-button",n,{"jkl-radio-button--inline":c,"jkl-radio-button--error":m}),children:[e("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:h,className:"jkl-radio-button__label",children:u||d}),e("input",{name:j,ref:r,...f,id:h,className:"jkl-radio-button__input",type:"radio",onChange:k,value:b,checked:s,"aria-invalid":m||f["aria-invalid"]})]})});r.displayName="BaseRadioButton";export{r as BaseRadioButton};
1
+ import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{useId as o}from"../../hooks/useId/useId.js";const r=t((t,r)=>{const{id:l,className:n,checked:s,children:d,label:u,inline:c,invalid:m,name:j,value:b,onChange:k,...f}=t,h=o(l||"jkl-radio-button",{generateSuffix:!l});return a("div",{className:i("jkl-radio-button",n,{"jkl-radio-button--inline":c,"jkl-radio-button--error":m}),children:[e("input",{name:j,ref:r,...f,id:h,className:"jkl-radio-button__input",type:"radio",onChange:k,value:b,checked:s,"aria-invalid":m||f["aria-invalid"]}),e("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:h,className:"jkl-radio-button__label",children:u||d})]})});r.displayName="BaseRadioButton";export{r as BaseRadioButton};
2
2
  //# sourceMappingURL=BaseRadioButton.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"BaseRadioButton.js","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { BaseRadioButtonProps } from \"./types.js\";\n\nexport const BaseRadioButton = forwardRef<\n HTMLInputElement,\n BaseRadioButtonProps\n>((props, ref) => {\n const {\n id,\n className,\n checked,\n children,\n label,\n inline,\n invalid,\n name,\n value,\n onChange,\n ...rest\n } = props;\n\n const inputId = useId(id || \"jkl-radio-button\", { generateSuffix: !id });\n\n return (\n <div\n className={clsx(\"jkl-radio-button\", className, {\n \"jkl-radio-button--inline\": inline,\n \"jkl-radio-button--error\": invalid,\n })}\n >\n <label\n data-testid=\"jkl-radio-button__label-tag\"\n htmlFor={inputId}\n className=\"jkl-radio-button__label\"\n >\n {label || children}\n </label>\n <input\n name={name}\n ref={ref}\n {...rest}\n id={inputId}\n className=\"jkl-radio-button__input\"\n type=\"radio\"\n onChange={onChange}\n value={value}\n checked={checked}\n aria-invalid={invalid || rest[\"aria-invalid\"]}\n />\n </div>\n );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","htmlFor","type","displayName"],"mappings":"sLAKO,MAAMA,EAAkBC,EAG7B,CAACC,EAAOC,KACN,MACIC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAUC,EAAMZ,GAAM,mBAAoB,CAAEa,gBAAiBb,IAEnE,OACIc,EAAC,MAAA,CACGb,UAAWc,EAAK,mBAAoBd,EAAW,CAC3C,2BAA4BI,EAC5B,0BAA2BC,IAG/BH,SAAA,CAAAa,EAAC,QAAA,CACG,cAAY,8BACZC,QAASN,EACTV,UAAU,0BAETE,SAAAC,GAASD,IAEda,EAAC,QAAA,CACGT,KAAAA,EACAR,IAAAA,KACIW,EACJV,GAAIW,EACJV,UAAU,0BACViB,KAAK,QACLT,SAAAA,EACAD,MAAAA,EACAN,QAAAA,EACA,eAAcI,GAAWI,EAAK,uBAM9Cd,EAAgBuB,YAAc"}
1
+ {"version":3,"file":"BaseRadioButton.js","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { BaseRadioButtonProps } from \"./types.js\";\n\nexport const BaseRadioButton = forwardRef<\n HTMLInputElement,\n BaseRadioButtonProps\n>((props, ref) => {\n const {\n id,\n className,\n checked,\n children,\n label,\n inline,\n invalid,\n name,\n value,\n onChange,\n ...rest\n } = props;\n\n const inputId = useId(id || \"jkl-radio-button\", { generateSuffix: !id });\n\n return (\n <div\n className={clsx(\"jkl-radio-button\", className, {\n \"jkl-radio-button--inline\": inline,\n \"jkl-radio-button--error\": invalid,\n })}\n >\n <input\n name={name}\n ref={ref}\n {...rest}\n id={inputId}\n className=\"jkl-radio-button__input\"\n type=\"radio\"\n onChange={onChange}\n value={value}\n checked={checked}\n aria-invalid={invalid || rest[\"aria-invalid\"]}\n />\n <label\n data-testid=\"jkl-radio-button__label-tag\"\n htmlFor={inputId}\n className=\"jkl-radio-button__label\"\n >\n {label || children}\n </label>\n </div>\n );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"sLAKO,MAAMA,EAAkBC,EAG7B,CAACC,EAAOC,KACN,MACIC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAUC,EAAMZ,GAAM,mBAAoB,CAAEa,gBAAiBb,IAEnE,OACIc,EAAC,MAAA,CACGb,UAAWc,EAAK,mBAAoBd,EAAW,CAC3C,2BAA4BI,EAC5B,0BAA2BC,IAG/BH,SAAA,CAAAa,EAAC,QAAA,CACGT,KAAAA,EACAR,IAAAA,KACIW,EACJV,GAAIW,EACJV,UAAU,0BACVgB,KAAK,QACLR,SAAAA,EACAD,MAAAA,EACAN,QAAAA,EACA,eAAcI,GAAWI,EAAK,kBAElCM,EAAC,QAAA,CACG,cAAY,8BACZE,QAASP,EACTV,UAAU,0BAETE,SAAAC,GAASD,SAM1BP,EAAgBuB,YAAc"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fremtind/jokul",
3
- "version": "4.2.0",
3
+ "version": "4.4.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -35,9 +35,13 @@
35
35
  .jkl-checkbox__input {
36
36
  position: absolute;
37
37
  opacity: 0;
38
- pointer-events: none;
39
- inset: 0 auto 0 0;
40
- width: 1lh;
38
+ inset-block-start: 0;
39
+ inset-inline-start: 0;
40
+ block-size: 1lh;
41
+ inline-size: 1lh;
42
+ margin: 0;
43
+ cursor: pointer;
44
+ z-index: 1;
41
45
  }
42
46
  .jkl-checkbox__label {
43
47
  cursor: pointer;
@@ -50,9 +54,6 @@
50
54
  font-weight: 400;
51
55
  --jkl-icon-weight: 300;
52
56
  }
53
- .jkl-checkbox__label:hover, .jkl-checkbox__label:active {
54
- --jkl-icon-weight: 400;
55
- }
56
57
  .jkl-checkbox__label::before {
57
58
  content: "check_box_outline_blank";
58
59
  margin-inline-end: 0.25em;
@@ -69,15 +70,18 @@
69
70
  transition-duration: 75ms;
70
71
  transition-property: font-variation-settings, transform;
71
72
  }
72
- .jkl-checkbox__label:has(+ :checked)::before {
73
+ .jkl-checkbox__input:is(:hover, :active) + .jkl-checkbox__label, .jkl-checkbox__label:hover, .jkl-checkbox__label:active {
74
+ --jkl-icon-weight: 400;
75
+ }
76
+ .jkl-checkbox__input:checked + .jkl-checkbox__label::before {
73
77
  content: "check_box";
74
78
  --jkl-icon-fill: 1;
75
79
  }
76
- .jkl-checkbox__label:has(+ :indeterminate:not(:checked))::before {
80
+ .jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label::before {
77
81
  content: "indeterminate_check_box";
78
82
  --jkl-icon-fill: 1;
79
83
  }
80
- .jkl-checkbox__label:has(+ [aria-invalid=true])::before {
84
+ .jkl-checkbox__input[aria-invalid=true] + .jkl-checkbox__label::before {
81
85
  color: var(--jkl-checkbox-error-color);
82
86
  }
83
87
  .jkl-checkbox + .jkl-checkbox {
@@ -1 +1 @@
1
- @layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-checkbox-error-color:#ab2e43}}[data-theme=light]{--jkl-checkbox-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-checkbox-error-color:#d79ba5}}[data-theme=dark]{--jkl-checkbox-error-color:#d79ba5}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--text-color);display:flex;flex-wrap:wrap;position:relative}.jkl-checkbox__input{inset:0 auto 0 0;opacity:0;pointer-events:none;position:absolute;width:1lh}.jkl-checkbox__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:400}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-checkbox__label:has(+:checked):before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__label:has(+:indeterminate:not(:checked)):before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__label:has(+[aria-invalid=true]):before{color:var(--jkl-checkbox-error-color)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}
1
+ @layer jokul.components{@media screen and (prefers-color-scheme:light){:root{--jkl-checkbox-error-color:#ab2e43}}[data-theme=light]{--jkl-checkbox-error-color:#ab2e43}@media screen and (prefers-color-scheme:dark){:root{--jkl-checkbox-error-color:#d79ba5}}[data-theme=dark]{--jkl-checkbox-error-color:#d79ba5}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:transparent;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);--jkl-icon-weight:300;color:var(--text-color);display:flex;flex-wrap:wrap;position:relative}.jkl-checkbox__input{block-size:1lh;cursor:pointer;inline-size:1lh;inset-block-start:0;inset-inline-start:0;margin:0;opacity:0;position:absolute;z-index:1}.jkl-checkbox__label{cursor:pointer;display:flex;font-size:var(--jkl-font-size-3);font-weight:400;line-height:var(--jkl-line-height-tight);transition-duration:.15s;transition-property:color;transition-timing-function:ease;--jkl-icon-weight:300}.jkl-checkbox__label:before{content:"check_box_outline_blank";-webkit-margin-end:.25em;display:inline-block;font-family:Fremtind Material Symbols,Fremtind Material Symbols Fallback,sans-serif;font-feature-settings:"liga";-webkit-font-feature-settings:"liga";font-size:1.3em;font-variation-settings:"FILL" var(--jkl-icon-fill,0),"GRAD" var(--jkl-icon-grade,0),"opsz" var(--jkl-icon-opsz,24);font-weight:var(--jkl-icon-weight,300);line-height:1;margin-inline-end:.25em;-webkit-font-smoothing:antialiased;transition-duration:75ms;transition-property:font-variation-settings,transform;transition-timing-function:ease}.jkl-checkbox__input:is(:hover,:active)+.jkl-checkbox__label,.jkl-checkbox__label:active,.jkl-checkbox__label:hover{--jkl-icon-weight:400}.jkl-checkbox__input:checked+.jkl-checkbox__label:before{content:"check_box";--jkl-icon-fill:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label:before{content:"indeterminate_check_box";--jkl-icon-fill:1}.jkl-checkbox__input[aria-invalid=true]+.jkl-checkbox__label:before{color:var(--jkl-checkbox-error-color)}.jkl-checkbox+.jkl-checkbox{margin-top:.75em}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:var(--jkl-unit-30)}}