https://www.andtspaschemat.se/_next/static/chunks/7956-0ed5ff7748cfd3f0.js

1"use strict";(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[7956],{1091:(e,t,l)=>{l.d(t,{f:()=>i});var s=l(5155),a=l(1567);function i(e){let{children:t,className:l}=e;return(0,s.jsx)("h2",{className:(0,a.cn)("text-[26px] font-bold leading-none md:text-[28px] md:leading-[35px] lg:text-[40px] lg:leading-[50px]",l),children:t})}},7956:(e,t,l)=>{l.d(t,{MaterialList:()=>M});var s=l(5155),a=l(1046),i=l(7385),n=l(1567),r=l(4113),c=l(5054),o=l(2115),d=l(6911),u=l(839),x=l(5683),m=l(9124),h=l(8750);function g(e){let{title:t,options:l,selectedValues:a,onSelectionChange:i,setIsExpanded:r,hideActions:c=!1}=e,o=(e,t)=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),u(t))},u=e=>{i(a.includes(e)?a.filter(t=>t!==e):[...a,e])};return(0,s.jsxs)("div",{className:"p-6 overflow-hidden text-white bg-black rounded-2xl",children:[t&&(0,s.jsx)("h3",{className:"mb-2 text-sm font-medium text-gray-200",children:t}),(0,s.jsx)(x.N,{mode:"wait",children:(0,s.jsx)(m.P.ul,{className:"space-y-4",role:"listbox","aria-label":t||"Filter options",initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.1,delay:.1},children:l.map(e=>{let t=a.includes(e.value),l=0===e.count;return(0,s.jsxs)("li",{role:"option","aria-selected":t,tabIndex:l?-1:0,className:(0,n.cn)("group flex cursor-pointer items-center justify-between rounded-lg p-4 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow",l&&["cursor-not-allowed"],t&&["hover:bg-yellow","hover:text-black"],!t&&!l&&["hover:bg-gray-700","hover:text-white"]),"aria-disabled":l,onClick:()=>l?null:u(e.value),onKeyDown:t=>l?null:o(t,e.value),children:[(0,s.jsx)("span",{className:(0,n.cn)("text-sm",l&&"opacity-50"),children:e.label}),(0,s.jsxs)("div",{className:"flex items-center gap-3",children:[(0,s.jsx)("span",{className:(0,n.cn)("text-xs",l&&"opacity-50"),"aria-label":"".concat(e.count," items"),children:e.count}),(0,s.jsx)("div",{className:(0,n.cn)("grid size-8 place-items-center rounded border-2 border-yellow",t&&"group-hover:border-black group-hover:bg-yellow group-hover:text-black",l&&"border-gray-300 bg-gray-300"),"aria-hidden":"true",children:t&&(0,s.jsx)(h.S,{className:"size-5"})})]})]},e.value)})})}),!c&&(0,s.jsx)(x.N,{mode:"wait",children:(0,s.jsxs)(m.P.div,{className:"flex items-center justify-between gap-6 px-0 mt-4",initial:{opacity:0,y:60},animate:{opacity:1,y:0},exit:{opacity:0,y:60},transition:{duration:.2,delay:.2,ease:[.645,.045,.01,1.265]},children:[(0,s.jsx)("button",{className:"py-1 text-xs text-gray-400 underline rounded-md focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-yellow",onClick:()=>i([]),children:"Rensa val"}),(0,s.jsx)(d.$,{onClick:()=>r(!1),color:"yellow",size:"small",className:"flex-grow",children:"Visa uppgifter"})]})})]})}function p(e){let{title:t,options:l,selectedValues:a,onChange:i,showSelectedCount:x=!1,hideActions:m=!1}=e,[h,p]=o.useState(!1),f=o.useRef(null),j=o.useRef(null);o.useEffect(()=>{let e=e=>{f.current&&!f.current.contains(e.target)&&j.current&&!j.current.contains(e.target)&&p(!1)};return h&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}},[h]);let b=()=>{p(!h),h||setTimeout(()=>{var e;let t=null===(e=f.current)||void 0===e?void 0:e.querySelector('li[role="option"]');null==t||t.focus()},0)};return(0,s.jsxs)("div",{className:"relative",children:[(0,s.jsx)("h2",{children:(0,s.jsxs)(d.$,{ref:j,type:"button",color:"black",size:"large",className:"flex items-center justify-between w-full group hover:bg-black","aria-expanded":h,"aria-controls":"filter-".concat(t.toLowerCase().replace(/\s+/g,"-")),onClick:e=>{e.preventDefault(),b()},onKeyDown:e=>{("Enter"===e.key||" "===e.key)&&(e.preventDefault(),b())},children:[(0,s.jsxs)("div",{className:"flex items-center gap-2",children:[(0,s.jsx)("span",{className:"truncate",children:t}),x&&a.length>0&&(0,s.jsx)("span",{className:"flex items-center justify-center w-6 h-6 text-sm font-medium text-black rounded-full bg-yellow",children:a.length})]}),(0,s.jsx)("span",{className:(0,n.cn)("flex size-8 items-center justify-center rounded-full transition-colors duration-300 group-hover:bg-yellow group-hover:text-black",h&&"bg-yellow-800",h&&"text-black"),children:(0,s.jsx)(u.y,{className:(0,n.cn)(h&&"rotate-180")})})]})}),(0,s.jsx)(r.N,{mode:"wait",children:h&&(0,s.jsx)(c.P.div,{ref:f,id:"filter-".concat(t.toLowerCase().replace(/\s+/g,"-")),className:(0,n.cn)("mt-2 w-full","lg:absolute lg:left-0 lg:top-full lg:z-10"),initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},children:(0,s.jsx)(g,{options:l,selectedValues:a,onSelectionChange:i,setIsExpanded:p,hideActions:m})})})]})}function f(e){let{className:t}=e;return(0,s.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"20",height:"20",className:t,children:(0,s.jsx)("path",{d:"M14 8.5C14 7.77773 13.8577 7.06253 13.5813 6.39524C13.3049 5.72795 12.8998 5.12163 12.3891 4.61091C11.8784 4.10019 11.272 3.69506 10.6048 3.41866C9.93747 3.14226 9.22227 3 8.5 3C7.77773 3 7.06253 3.14226 6.39524 3.41866C5.72795 3.69506 5.12163 4.10019 4.61091 4.61091C4.10019 5.12163 3.69506 5.72795 3.41866 6.39524C3.14226 7.06253 3 7.77773 3 8.5C3 9.22227 3.14226 9.93747 3.41866 10.6048C3.69506 11.272 4.10019 11.8784 4.61091 12.3891C5.12163 12.8998 5.72795 13.3049 6.39524 13.5813C7.06253 13.8577 7.77773 14 8.5 14C9.22227 14 9.93747 13.8577 10.6048 13.5813C11.272 13.3049 11.8784 12.8998 12.3891 12.3891C12.8998 11.8784 13.3049 11.272 13.5813 10.6048C13.8577 9.93747 14 9.22227 14 8.5ZM12.7281 13.4375C11.5938 14.4125 10.1156 15 8.5 15C4.90937 15 2 12.0906 2 8.5C2 4.90937 4.90937 2 8.5 2C12.0906 2 15 4.90937 15 8.5C15 10.1156 14.4125 11.5938 13.4375 12.7281L17.8531 17.1469C18.0469 17.3406 18.0469 17.6594 17.8531 17.8531C17.6594 18.0469 17.3406 18.0469 17.1469 17.8531L12.7281 13.4375Z",fill:"currentColor"})})}var j=l(4917);function b(e){let{value:t,onChange:l,className:a,onClick:i}=e;return(0,s.jsxs)("div",{className:"group relative ".concat(a),children:[(0,s.jsx)("input",{type:"text",value:t,onChange:l,className:"flex items-center justify-between w-full h-20 gap-2 px-10 py-6 text-lg font-normal text-white transition-colors bg-black rounded-full outline-none group whitespace-nowrap placeholder:text-white hover:bg-black focus:ring-0 focus-visible:ring-2 focus-visible:ring-yellow-800 focus-visible:ring-offset-2",placeholder:"S\xf6k"}),(0,s.jsx)("span",{onClick:i,className:"absolute flex items-center justify-center text-white transition-colors duration-300 -translate-y-1/2 rounded-full right-8 top-1/2 size-8 group-focus-within:bg-yellow-800 group-focus-within:text-black group-hover:bg-yellow group-hover:text-black",children:t.length>0?(0,s.jsx)(j.A,{className:"cursor-pointer size-5"}):(0,s.jsx)(f,{className:"size-5"})})]})}var v=l(8670),y=l(8293),N=l(4065),w=l(8426),k=l(1091);function C(e){let{children:t,className:l}=e;return(0,s.jsx)("h3",{className:(0,n.cn)("text-[22px] font-bold leading-[28px] lg:text-[24px] lg:leading-[30px] xl:text-[30px] xl:leading-[38px]",l),children:t})}var z=l(3501),S=l(1971),E=l(18);function A(e){let{isOpen:t,onClose:l,subjects:a,drugs:i,ages:n,selectedSubjects:r,selectedDrugs:c,selectedAges:o,onSubjectsChange:u,onDrugsChange:h,onAgesChange:g,hideActions:f}=e;return(0,s.jsx)(x.N,{children:t&&(0,s.jsxs)("div",{className:"fixed inset-0 z-50 flex justify-end",children:[(0,s.jsx)(m.P.div,{initial:{opacity:0}

1,animate:{opacity:1},exit:{opacity:0},transition:{duration:.15},className:"fixed inset-0 backdrop-blur-[20px]"}),(0,s.jsx)(m.P.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.2},className:"fixed inset-0 bg-black/50",onClick:l}),(0,s.jsxs)(m.P.div,{initial:{x:"100%"},animate:{x:0},exit:{x:"100%"},transition:{type:"spring",damping:25,stiffness:200},className:"relative flex h-full w-full flex-col bg-black md:max-w-[375px]",children:[(0,s.jsxs)(m.P.div,{initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},transition:{duration:.1,delay:.3},children:[(0,s.jsxs)("div",{className:"flex items-center justify-between border-b border-white/10 px-10 py-8",children:[(0,s.jsx)("h2",{className:"text-xl text-white",children:"Filtrera uppgifter"}),(0,s.jsx)("button",{onClick:l,className:"rounded-full p-2 text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-yellow",children:(0,s.jsx)(j.A,{className:"size-6"})})]}),(0,s.jsxs)("div",{className:"h-[calc(100vh-178px)] flex-1 overflow-y-auto",children:[(0,s.jsx)("div",{className:"border-b border-white/10",children:(0,s.jsx)("div",{className:"py-2",children:(0,s.jsx)(p,{title:"\xc5ldrar",options:n,selectedValues:o,onChange:g,showSelectedCount:!0,hideActions:f})})}),(0,s.jsx)("div",{className:"border-b border-white/10",children:(0,s.jsx)("div",{className:"py-2",children:(0,s.jsx)(p,{title:"Skol\xe4mnen",options:a,selectedValues:r,onChange:u,showSelectedCount:!0,hideActions:f})})}),(0,s.jsx)("div",{className:"border-b border-white/10",children:(0,s.jsx)("div",{className:"py-2",children:(0,s.jsx)(p,{title:"Droger",options:i,selectedValues:c,onChange:h,showSelectedCount:!0,hideActions:f})})})]})]}),(0,s.jsx)(m.P.div,{initial:{opacity:0,y:10},animate:{opacity:1,y:0},exit:{opacity:0,y:10},transition:{duration:.1,delay:.4},className:"mt-auto border-t border-white/10 bg-black px-6 py-4",children:(0,s.jsxs)("div",{className:"flex items-center justify-between gap-6",children:[(0,s.jsx)("button",{onClick:()=>{u([]),h([]),g([])},className:"text-xs text-white underline",children:"Rensa val"}),(0,s.jsx)(d.$,{onClick:l,color:"yellow",size:"small",className:"flex-grow",children:"Visa uppgifter"})]})})]})]})})}function V(e,t,l){return t.filter(t=>{let s=t.data.subjects.some(t=>t.subject.uid===e.uid);if(0===l.length)return s;let a=t.data.drugs.some(e=>l.includes(e.drug.uid));return s&&a}).length}function D(e){let{visible:t,total:l,className:a}=e;return(0,s.jsxs)("span",{className:(0,n.cn)("block lg:text-lg",a),children:["Visar ",t," av ",l," resultat"]})}function P(e){let{visible:t,total:l,className:a}=e;return(0,s.jsxs)("div",{className:(0,n.cn)("relative",a),children:[(0,s.jsx)("div",{className:"h-0.5 w-40 bg-black/20"}),(0,s.jsx)("div",{className:"absolute left-0 top-0 h-0.5 bg-black",style:{width:"".concat(t/l*100,"%")}})]})}function $(e){let{materials:t,drugs:l,subjects:a,ages:n,title:r}=e,c=(0,y.IN)(y.tU).withDefault([]),[u,h]=(0,y.ZA)("subjects",c),[g,f]=(0,y.ZA)("drugs",c),[v,N]=(0,y.ZA)("ages",c),[C,S]=(0,o.useState)(6),[E,$]=(0,o.useState)(6),[M,Z]=(0,o.useState)(!1),{searchQuery:R,debouncedQuery:T,setSearchQuery:_,clearSearchQuery:F}=function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:300,[l,s]=(0,y.ZA)("q",y.tU.withDefault("")),[a,i]=(0,o.useState)(l||e),n=function(e,t){let[l,s]=(0,o.useState)(e);return(0,o.useEffect)(()=>{let l=setTimeout(()=>{s(e)},t);return()=>{clearTimeout(l)}},[e,t]),l}(a,t);return(0,o.useEffect)(()=>{n!==l&&s(n||null)},[n,l,s]),{searchQuery:a,debouncedQuery:n,setSearchQuery:e=>{i(e)},clearSearchQuery:()=>{i(""),s(null)}}}("",300);(0,o.useEffect)(()=>{let e=[...u];u.forEach(l=>{0===V(a.find(e=>e.uid===l),t,g)&&e.splice(e.indexOf(l),1)}),e.length!==u.length&&h(e)},[g]),(0,o.useEffect)(()=>{if(C>E){let e=document.getElementById("material-".concat(C-6));if(e){let t=e.getBoundingClientRect().top+window.scrollY-80;window.scrollTo({top:t,behavior:"smooth"})}$(C)}},[C,E]);let I=e=>{_(e.target.value)},U=new w.A(t,{keys:["data.title","data.preamble"],threshold:.2,ignoreLocation:!0}

1),q=T?U.search(T).map(e=>e.item):t;(0,o.useEffect)(()=>(M?document.documentElement.style.overflow="hidden":document.documentElement.style.overflow="",()=>{document.documentElement.style.overflow=""}),[M]);let B=q.filter(e=>{if(0===u.length&&0===g.length&&0===v.length)return!0;let t=0===u.length||e.data.subjects.some(e=>{let t=e.subject;return u.includes(t.uid)}),l=0===g.length||e.data.drugs.some(e=>{let t=e.drug;return g.includes(t.uid)}),s=0===v.length||e.data.ages.some(e=>{let t=e.age;return v.includes(t.uid)});return t&&l&&s}),K=B.slice(0,C),O=C<B.length,Q=a.map(e=>({label:e.data.name,count:V(e,t,g),value:e.uid})),G=l.map(e=>({label:e.data.name,count:t.filter(t=>{let l=t.data.drugs.some(t=>t.drug.uid===e.uid);if(0===u.length)return l;let s=t.data.subjects.some(e=>u.includes(e.subject.uid));return l&&s}).length,value:e.uid})),X=n.map(e=>({label:e.data.name,count:t.filter(t=>{let l=t.data.ages.some(t=>t.age.uid===e.uid),s=0===u.length||t.data.subjects.some(e=>{let t=e.subject;return u.includes(t.uid)}),a=0===g.length||t.data.drugs.some(e=>{let t=e.drug;return g.includes(t.uid)});return l&&s&&a}).length,value:e.uid}));return(0,s.jsxs)(i.X,{children:[r&&(0,s.jsx)(k.f,{className:"mb-6 text-center md:text-left",children:r}),(0,s.jsxs)("div",{className:"hidden grid-cols-4 gap-4 lg:grid xl:gap-10",children:[(0,s.jsx)("div",{className:"col-span-1",children:(0,s.jsx)(p,{title:"Skol\xe4mne",options:Q,selectedValues:u,onChange:e=>h(e)})}),(0,s.jsx)("div",{className:"col-span-1",children:(0,s.jsx)(p,{title:"\xc5lder",options:X,selectedValues:v,onChange:e=>N(e)})}),(0,s.jsx)("div",{className:"col-span-1",children:(0,s.jsx)(p,{title:"Drog",options:G,selectedValues:g,onChange:e=>f(e)})}),(0,s.jsx)("div",{className:"col-span-1",children:(0,s.jsx)(b,{value:R,onChange:I,onClick:F,className:"mb-4"})})]}),(0,s.jsxs)("div",{className:"mb-6 lg:hidden",children:[(0,s.jsxs)(d.$,{onClick:()=>Z(!0),color:"black",size:"large",className:"flex w-full items-center justify-between font-normal",children:[(0,s.jsx)("span",{children:"Filter"}),(0,s.jsx)(z.u,{className:"size-8"})]}),(0,s.jsx)(b,{value:R,onChange:I,onClick:F,className:"mt-6"})]}),(0,s.jsx)(A,{isOpen:M,onClose:()=>Z(!1),subjects:Q,drugs:G,ages:X,selectedSubjects:u,selectedDrugs:g,selectedAges:v,onSubjectsChange:h,onDrugsChange:f,onAgesChange:N,hideActions:!0}),(u.length>0||g.length>0||v.length>0)&&(0,s.jsx)("div",{className:"mt-6 flex flex-col gap-4",children:(0,s.jsxs)("div",{className:"flex flex-col items-center gap-4 lg:flex-row",children:[(0,s.jsx)("span",{className:"shrink-0 text-xs font-bold",children:"Dina filterval: "}),(0,s.jsx)("div",{className:"flex flex-wrap justify-center gap-2 lg:justify-normal",children:(0,s.jsxs)(x.N,{children:[u.map(e=>{let t=a.find(t=>t.uid===e);return(0,s.jsx)(m.P.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:20},children:(0,s.jsxs)(d.$,{size:"small",color:"white",onClick:()=>h(u.filter(t=>t!==e)),children:[(0,s.jsx)("span",{className:"text-xs font-bold leading-[15px] text-black",children:null==t?void 0:t.data.name}),(0,s.jsx)("span",{className:"ml-1 text-black",children:(0,s.jsx)(j.A,{className:"size-5"})})]})},e)}),g.map(e=>{let t=l.find(t=>t.uid===e);return(0,s.jsx)(m.P.div,{initial:{opacity:0,y:20},animate:{opacity:1,y:0},exit:{opacity:0,y:20},children:(0,s.jsxs)(d.$,{size:"small",color:"white",onClick:()=>f(g.filter(t=>t!==e)),children:[(0,s.jsx)("span",{className:"text-xs font-bold leading-[15px] text-black",children:null==t?void 0:t.data.name}),(0,s.jsx)("span",{className:"ml-1 text-black",children:(0,s.jsx)(j.A,{className:"size-5"})})]})},e)}),v.map(e=>{let t=n.find(t=>t.uid===e);return(0,s.jsx)(m.P.div,{initial:{opacity:0,y:20,scale:.9},animate:{opacity:1,y:0,scale:1},exit:{opacity:0,y:20,scale:.9},children:(0,s.jsxs)(d.$,{size:"small",color:"white",onClick:()=>N(v.filter(t=>t!==e)),children:[(0,s.jsx)("span",{className:"text-xs font-bold leading-[15px] text-black",children:null==t?void 0:t.data.name}),(0,s.jsx)("span",{className:"ml-1 text-black",children:(0,s.jsx)(j.A,{className:"size-5"})})]})},e)})]})}),(0,s.jsx)("button",{onClick:()=>{h([]),f([]),N([])},className:"shrink-0 text-xs text-black underline hover:text-gray-700",children:"Rensa val"})]})}),(0,s.jsx)(D,{visible:K.length,total:B.length,className:"mt-6 text-center md:text-left"}),(0,s.jsx)("div",{className:"mt-6 grid grid-cols-1 gap-4 lg:grid-cols-2 lg:gap-10 xl:grid-cols-3",children:K.map((e,t)=>(0,s.jsx)(L,{material:e,id:"material-".concat(t)},e.id))}),(0,s.jsxs)("div",{className:"mt-8 flex flex-col items-center md:mt-6",children:[(0,s.jsx)(D,{visible:K.length,total:B.length}),(0,s.jsx)(P,{visible:K.length,total:B.length,className:"mt-2"}),O&&(0,s.jsx)(d.$,{onClick:()=>S(e=>e+6),color:"black",size:"regular",type:"button",className:"mt-8",children:"Visa fler uppgifter"})]})]})}let L=e=>{let{material:t,id:l}=e,{storedValue:i,addItem:n,removeItem:r,isLoading:c}=(0,v.M)("savedMaterials",[]),o=i.includes(t.id);return(0,s.jsxs)("div",{id:l,className:"flex flex-col gap-4 roun

1ded-[32px] bg-white p-8 md:p-10 lg:gap-6",children:[(0,s.jsx)(E.k,{drugs:t.data.drugs}),(0,s.jsx)(N.s,{href:t.url||"",children:(0,s.jsx)(C,{className:"text-balance break-words",children:t.data.title})}),t.data.preamble&&(0,s.jsx)("p",{className:"text-sm xl:text-base",children:t.data.preamble}),(0,s.jsx)(S.N,{title:"\xc5lder",pills:t.data.ages.map(e=>{var t,l;return null===(l=e.age)||void 0===l?void 0:null===(t=l.data)||void 0===t?void 0:t.short_name})}),(0,s.jsx)(S.N,{title:"Skol\xe4mne",pills:t.data.subjects.map(e=>{var t,l;return null===(l=e.subject)||void 0===l?void 0:null===(t=l.data)||void 0===t?void 0:t.name})}),(0,s.jsx)(S.N,{title:"Utf\xf6rande",pills:t.data.implementations.map(e=>{var t,l;return null===(l=e.implementation)||void 0===l?void 0:null===(t=l.data)||void 0===t?void 0:t.name})}),(0,s.jsx)("div",{className:"mt-auto",children:(0,s.jsxs)("div",{className:"mt-4 flex flex-wrap gap-2 lg:mt-2",children:[t.url&&(0,s.jsx)(d.$,{size:"small",href:t.url,color:"yellow",children:"Visa uppgiften"}),(0,s.jsx)(d.$,{size:"small",type:"button",color:"yellow",onClick:()=>{o?r(t.id):(n(t.id),(0,a.sendGTMEvent)({event:"add_task",value:t.data.title}))},disabled:c,children:c?"":o?"Ta bort":"L\xe4gg till"})]})})]})};function M(e){return(0,s.jsx)(o.Suspense,{fallback:(0,s.jsx)(s.Fragment,{}),children:(0,s.jsx)($,{...e})})}},839:(e,t,l)=>{l.d(t,{y:()=>a});var s=l(5155);function a(e){let{className:t}=e;return(0,s.jsx)("svg",{xmlns:"http://www.w3.org/2000/svg",width:"21",height:"21",className:t,children:(0,s.jsx)("path",{fill:"currentColor",d:"M10.686 14.803a.502.502 0 0 1-.706 0l-6-6a.502.502 0 0 1 0-.706.502.502 0 0 1 .706 0l5.647 5.647 5.647-5.647a.502.502 0 0 1 .706 0 .502.502 0 0 1 0 .706l-6 6Z"})})}}}]);