gf-components 0.1.174 → 0.1.176
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.
- package/dist/index.cjs.js +7 -7
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.es.js +290 -291
- package/dist/index.es.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs.js
CHANGED
|
@@ -634,11 +634,11 @@ In order to be iterable, non-array objects must have a [Symbol.iterator]() metho
|
|
|
634
634
|
font-weight: 400;
|
|
635
635
|
color: var(--gf-color-button-primary);
|
|
636
636
|
transition: color 150ms ease, font-weight 150ms ease;
|
|
637
|
-
`,J6e=({items:e,width:t=226,offset:n=0,rootMargin:r=80,containerStyle:i={}})=>{const[o,a]=$.useState(0),s=$.useRef(0);$.useEffect(()=>{s.current=o},[o]);const l=$.useRef(!1),c=$.useRef(null),u=f=>{l.current=!0,c.current&&clearTimeout(c.current),c.current=setTimeout(()=>{l.current=!1},f)},d=f=>{var g,v;a(f),u(800);const h=(v=(g=e==null?void 0:e[f])==null?void 0:g.href)==null?void 0:v.current;if(!h)return;const m=h.getBoundingClientRect().top+window.pageYOffset-n;window.scrollTo({top:m,behavior:"smooth"})};return $.useEffect(()=>{const f=(e||[]).map((g,v)=>{var b;return{key:v,el:(b=g.href)==null?void 0:b.current}}).filter(g=>g.el);if(!f.length)return;const h=new Map,m=new IntersectionObserver(g=>{if(l.current)return;for(const y of g)h.set(y.target,{is:y.isIntersecting,top:y.boundingClientRect.top,ratio:y.intersectionRatio});const v=[];for(const{key:y,el:x}of f){const S=h.get(x);S!=null&&S.is&&v.push({key:y,el:x,...S})}if(!v.length)return;const b=v.sort((y,x)=>Math.abs(y.top-n)-Math.abs(x.top-n)||x.ratio-y.ratio)[0];b&&b.key!==s.current&&a(b.key)},{root:null,threshold:[0,.01,.1,.2],rootMargin:`-${n}px 0px -${r}% 0px`});return f.forEach(({el:g})=>m.observe(g)),()=>{m.disconnect(),c.current&&clearTimeout(c.current)}},[e,n,r]),p.jsxs(p.Fragment,{children:[p.jsx(fn,{}),p.jsxs(yt,{align:"stretch",children:[p.jsxs(yt,{gap:8,vertical:!0,align:"flex-start",style:{width:t,height:"fit-content",paddingTop:48,top:n,position:"sticky",paddingRight:8,...i},children:[p.jsx("span",{style:{fontSize:12},children:"Inhoudsopgave".toUpperCase()}),e==null?void 0:e.map((f,h)=>{const m=h===o;return p.jsx("div",{onClick:()=>d(h),style:{width:"100%",boxSizing:"border-box",padding:8,cursor:"pointer",background:m?"#F0F6FF":"transparent",transition:"background 150ms ease"},children:p.jsx(Q6e,{children:f==null?void 0:f.name})},h)})]}),p.jsx("div",{style:{borderRight:"1px solid #DAE1ED"}})]})]})},e7e=({success:e})=>p.jsxs(yt,{gap:8,justify:"center",align:"center",style:{padding:"4px 16px 4px 12px",borderRadius:24,border:"1px solid",borderColor:e?"#B7EB8F":"#FFE58F",background:e?"#F6FFED":"#FFFBE6",color:e?"#389E0D":"#AD6800",textAlign:"center",fontSize:14,fontWeight:400,lineHeight:"22px"},children:[e&&p.jsx(vy,{}),e?"2035 doel behaald":"2035 doel nog niet behaald"]}),t7e=({color:e,name:t})=>p.jsx(p.Fragment,{children:t.toLowerCase()!=="reduction"?p.jsxs(yt,{gap:4,align:"center",children:[p.jsx("div",{style:{minWidth:7,minHeight:7,borderRadius:3.5,background:e}}),p.jsx("span",{style:{color:"#667085",fontSize:12,fontWeight:400,lineHeight:"14px"},children:t})]}):null}),n7e=({legend:e})=>p.jsx(yt,{gap:8,justify:"center",wrap:!0,children:e.map((t,n)=>p.jsx(t7e,{color:t==null?void 0:t.color,name:t==null?void 0:t.name},n))}),r7e=({title:e,subtitle:t,legend:n,success:r})=>p.jsxs(yt,{vertical:!0,gap:16,style:{flexGrow:1,padding:16,boxSizing:"border-box",width:"100%"},children:[p.jsxs(yt,{gap:8,vertical:!0,style:{flexGrow:1},children:[p.jsxs(yt,{gap:8,justify:"space-between",children:[p.jsx("span",{style:{color:"#1D2939",textAlign:"left",fontSize:16,fontWeight:500,lineHeight:"24px"},children:e}),p.jsx(e7e,{success:r})]}),p.jsx("span",{style:{color:"#475467",fontSize:14,fontWeight:400,lineHeight:"22px"},children:t})]}),p.jsx(n7e,{legend:n})]});function zp({color:e="white",transform:t="",style:n,className:r,showVerticalLine:i=!1}){return p.jsxs("span",{className:r,style:{display:"inline-flex",alignItems:"stretch",width:"100%",height:8,overflow:"visible",transform:t,...n},children:[i&&p.jsx("svg",{viewBox:"0 0 1 8",preserveAspectRatio:"none",style:{width:1,height:8,flex:"0 0 1px"},children:p.jsx("rect",{x:"0",y:"0",width:"1",height:"8",fill:e})}),p.jsx("svg",{viewBox:"0 0 1 8",preserveAspectRatio:"none",style:{flex:1,height:8},children:p.jsx("rect",{x:"0",y:"3.5",width:"1",height:"1",fill:e})}),p.jsx("svg",{viewBox:"0 0 4 8",preserveAspectRatio:"xMinYMid meet",style:{width:4,height:8,flex:"0 0 4px",marginLeft:-3},children:p.jsx("path",{d:"M0 1 L3 4 L0 7",fill:"none",stroke:e,strokeWidth:"1",strokeLinecap:"round",strokeLinejoin:"round"})})]})}const i7e=({title:e,data:t,legend:n,curr:r,bold:i})=>{const o=(t==null?void 0:t.unit)==="%";return p.jsxs(yt,{justify:"space-between",align:"center",children:[p.jsx("span",{style:{color:"#475467",textAlign:"center",fontSize:14,fontWeight:i?700:400,lineHeight:"22px"},children:e}),p.jsx(yt,{gap:8,children:n.map((a,s)=>{var d,f;const l=(d=t==null?void 0:t.value)==null?void 0:d[a==null?void 0:a.key],c=t==null?void 0:t.unit,u=Math.round(l/((f=t==null?void 0:t.value)==null?void 0:f.total)*100);return p.jsx(yt,{gap:4,align:"center",children:!(a!=null&&a.hide)&&!((a==null?void 0:a.key)==="reduction"&&(a!=null&&a.lower)&&!r)&&!((a==null?void 0:a.key)==="reduction"&&u===0)&&p.jsxs(p.Fragment,{children:[p.jsx("div",{style:{minWidth:7,minHeight:7,borderRadius:3.5,background:a==null?void 0:a.color}}),p.jsx("span",{style:{color:"#667085",fontSize:12,fontWeight:400,lineHeight:"14px"},children:(a==null?void 0:a.key)==="reduction"?u>0?`↓${u}%`:null:a!=null&&a.lower&&!r?"↓totaal omlaag":`${o&&!r?"Minstens ":""}${l}${c}`})]})},s)})})]})},o7e=({data:e,curr:t,legend:n})=>{
|
|
638
|
-
|
|
639
|
-
|
|
640
|
-
|
|
641
|
-
|
|
642
|
-
|
|
643
|
-
|
|
637
|
+
`,J6e=({items:e,width:t=226,offset:n=0,rootMargin:r=80,containerStyle:i={}})=>{const[o,a]=$.useState(0),s=$.useRef(0);$.useEffect(()=>{s.current=o},[o]);const l=$.useRef(!1),c=$.useRef(null),u=f=>{l.current=!0,c.current&&clearTimeout(c.current),c.current=setTimeout(()=>{l.current=!1},f)},d=f=>{var g,v;a(f),u(800);const h=(v=(g=e==null?void 0:e[f])==null?void 0:g.href)==null?void 0:v.current;if(!h)return;const m=h.getBoundingClientRect().top+window.pageYOffset-n;window.scrollTo({top:m,behavior:"smooth"})};return $.useEffect(()=>{const f=(e||[]).map((g,v)=>{var b;return{key:v,el:(b=g.href)==null?void 0:b.current}}).filter(g=>g.el);if(!f.length)return;const h=new Map,m=new IntersectionObserver(g=>{if(l.current)return;for(const y of g)h.set(y.target,{is:y.isIntersecting,top:y.boundingClientRect.top,ratio:y.intersectionRatio});const v=[];for(const{key:y,el:x}of f){const S=h.get(x);S!=null&&S.is&&v.push({key:y,el:x,...S})}if(!v.length)return;const b=v.sort((y,x)=>Math.abs(y.top-n)-Math.abs(x.top-n)||x.ratio-y.ratio)[0];b&&b.key!==s.current&&a(b.key)},{root:null,threshold:[0,.01,.1,.2],rootMargin:`-${n}px 0px -${r}% 0px`});return f.forEach(({el:g})=>m.observe(g)),()=>{m.disconnect(),c.current&&clearTimeout(c.current)}},[e,n,r]),p.jsxs(p.Fragment,{children:[p.jsx(fn,{}),p.jsxs(yt,{align:"stretch",children:[p.jsxs(yt,{gap:8,vertical:!0,align:"flex-start",style:{width:t,height:"fit-content",paddingTop:48,top:n,position:"sticky",paddingRight:8,...i},children:[p.jsx("span",{style:{fontSize:12},children:"Inhoudsopgave".toUpperCase()}),e==null?void 0:e.map((f,h)=>{const m=h===o;return p.jsx("div",{onClick:()=>d(h),style:{width:"100%",boxSizing:"border-box",padding:8,cursor:"pointer",background:m?"#F0F6FF":"transparent",transition:"background 150ms ease"},children:p.jsx(Q6e,{children:f==null?void 0:f.name})},h)})]}),p.jsx("div",{style:{borderRight:"1px solid #DAE1ED"}})]})]})},e7e=({success:e})=>p.jsxs(yt,{gap:8,justify:"center",align:"center",style:{padding:"4px 16px 4px 12px",borderRadius:24,border:"1px solid",borderColor:e?"#B7EB8F":"#FFE58F",background:e?"#F6FFED":"#FFFBE6",color:e?"#389E0D":"#AD6800",textAlign:"center",fontSize:14,fontWeight:400,lineHeight:"22px"},children:[e&&p.jsx(vy,{}),e?"2035 doel behaald":"2035 doel nog niet behaald"]}),t7e=({color:e,name:t})=>p.jsx(p.Fragment,{children:t.toLowerCase()!=="reduction"?p.jsxs(yt,{gap:4,align:"center",children:[p.jsx("div",{style:{minWidth:7,minHeight:7,borderRadius:3.5,background:e}}),p.jsx("span",{style:{color:"#667085",fontSize:12,fontWeight:400,lineHeight:"14px"},children:t})]}):null}),n7e=({legend:e})=>p.jsx(yt,{gap:8,justify:"center",wrap:!0,children:e.map((t,n)=>p.jsx(t7e,{color:t==null?void 0:t.color,name:t==null?void 0:t.name},n))}),r7e=({title:e,subtitle:t,legend:n,success:r})=>p.jsxs(yt,{vertical:!0,gap:16,style:{flexGrow:1,padding:16,boxSizing:"border-box",width:"100%"},children:[p.jsxs(yt,{gap:8,vertical:!0,style:{flexGrow:1},children:[p.jsxs(yt,{gap:8,justify:"space-between",children:[p.jsx("span",{style:{color:"#1D2939",textAlign:"left",fontSize:16,fontWeight:500,lineHeight:"24px"},children:e}),p.jsx(e7e,{success:r})]}),p.jsx("span",{style:{color:"#475467",fontSize:14,fontWeight:400,lineHeight:"22px"},children:t})]}),p.jsx(n7e,{legend:n})]});function zp({color:e="white",transform:t="",style:n,className:r,showVerticalLine:i=!1}){return p.jsxs("span",{className:r,style:{display:"inline-flex",alignItems:"stretch",width:"100%",height:8,overflow:"visible",transform:t,...n},children:[i&&p.jsx("svg",{viewBox:"0 0 1 8",preserveAspectRatio:"none",style:{width:1,height:8,flex:"0 0 1px"},children:p.jsx("rect",{x:"0",y:"0",width:"1",height:"8",fill:e})}),p.jsx("svg",{viewBox:"0 0 1 8",preserveAspectRatio:"none",style:{flex:1,height:8},children:p.jsx("rect",{x:"0",y:"3.5",width:"1",height:"1",fill:e})}),p.jsx("svg",{viewBox:"0 0 4 8",preserveAspectRatio:"xMinYMid meet",style:{width:4,height:8,flex:"0 0 4px",marginLeft:-3},children:p.jsx("path",{d:"M0 1 L3 4 L0 7",fill:"none",stroke:e,strokeWidth:"1",strokeLinecap:"round",strokeLinejoin:"round"})})]})}const i7e=({title:e,data:t,legend:n,curr:r,bold:i})=>{const o=(t==null?void 0:t.unit)==="%";return p.jsxs(yt,{justify:"space-between",align:"center",children:[p.jsx("span",{style:{color:"#475467",textAlign:"center",fontSize:14,fontWeight:i?700:400,lineHeight:"22px"},children:e}),p.jsx(yt,{gap:8,children:n.map((a,s)=>{var d,f;const l=(d=t==null?void 0:t.value)==null?void 0:d[a==null?void 0:a.key],c=t==null?void 0:t.unit,u=Math.round(l/((f=t==null?void 0:t.value)==null?void 0:f.total)*100);return p.jsx(yt,{gap:4,align:"center",children:!(a!=null&&a.hide)&&!((a==null?void 0:a.key)==="reduction"&&(a!=null&&a.lower)&&!r)&&!((a==null?void 0:a.key)==="reduction"&&u===0)&&p.jsxs(p.Fragment,{children:[p.jsx("div",{style:{minWidth:7,minHeight:7,borderRadius:3.5,background:a==null?void 0:a.color}}),p.jsx("span",{style:{color:"#667085",fontSize:12,fontWeight:400,lineHeight:"14px"},children:(a==null?void 0:a.key)==="reduction"?u>0?`↓${u}%`:u<0?`↑${Math.abs(u)}%`:null:a!=null&&a.lower&&!r?"↓totaal omlaag":`${o&&!r?"Minstens ":""}${l}${c}`})]})},s)})})]})},o7e=({data:e,curr:t,legend:n})=>{const i=(n==null?void 0:n.filter(l=>l.key!=="reduction"))??[],o=i.map(l=>{var c;return((c=e==null?void 0:e.value)==null?void 0:c[l==null?void 0:l.key])??0}),a=o.findIndex(l=>l>0),s=o.length-1-[...o].reverse().findIndex(l=>l>0);return p.jsx(yt,{style:{height:16},children:n==null?void 0:n.map((l,c)=>{var v;const u=((v=e==null?void 0:e.value)==null?void 0:v[l==null?void 0:l.key])??0;if((l==null?void 0:l.key)==="reduction")return u>0&&p.jsx(yt,{align:"center",style:{width:`${u}%`,height:"100%"},children:p.jsx(zp,{color:"#98A2B3",rotate:180,transform:"rotate(180deg)",showVerticalLine:!0})},c);const d=i.findIndex(b=>b.key===l.key),f=d===a,h=d===s,m=(l==null?void 0:l.arrow)&&!t&&u>8,g=u>0?8/u*100:0;return p.jsx("div",{style:{width:`${u}%`,position:"relative",borderRadius:f&&h?12:f?"12px 0 0 12px":h?"0 12px 12px 0":0,borderRight:h?"none":"1px solid #FFF",background:!t&&!(l!=null&&l.hide)?`repeating-linear-gradient(
|
|
638
|
+
-60deg,
|
|
639
|
+
rgba(255,255,255,0.35) 0px,
|
|
640
|
+
rgba(255,255,255,0.35) 1px,
|
|
641
|
+
transparent 1px,
|
|
642
|
+
transparent 3px
|
|
643
|
+
), ${l==null?void 0:l.color}`:l==null?void 0:l.color},children:m&&p.jsx(yt,{align:"center",style:{width:`${g}%`,height:"100%"},children:p.jsx(zp,{})})},c)})})},Bp=({title:e="",data:t,legend:n,curr:r=!1,bold:i=!1})=>p.jsxs(yt,{gap:4,vertical:!0,children:[p.jsx(i7e,{title:e,data:t,curr:r,bold:i,legend:n}),p.jsx(o7e,{data:t,legend:n,curr:r})]}),Wp=({data:e,legend:t,curr:n=!1,year:r=2023})=>p.jsxs(yt,{gap:16,vertical:!0,style:{width:"100%",boxSizing:"border-box",padding:16,background:n?"#FFFFFF":"#F2F4F7"},children:[p.jsx(Bp,{title:n?"Beginpunt (2016)":"Doel (2030)",data:{value:e==null?void 0:e.begin,unit:e==null?void 0:e.unit},legend:t,curr:n}),p.jsx(Bp,{title:n?`Huidig (${r})`:"Doel (2035)",data:{value:e==null?void 0:e.curr,unit:e==null?void 0:e.unit},bold:n,curr:n,legend:t})]}),Kr={vervangen:{title:"Vervangen",subtitle:"Aandeel hernieuwbare en secundaire grondstoffen verhogen naar minimaal 55% (gebaseerd op DMI).",check:[(e,t)=>{var n;return((n=e==null?void 0:e.curr)==null?void 0:n.renew)>=55}],goals:{begin:{renew:50,other:50},curr:{renew:55,other:45},unit:"%"},legend:[{key:"renew",name:"Hernieuwbare & secundaire grondstoffen",color:"#86AA49"},{key:"other",name:"Overige grondstoffen",color:"#D0D5DD",hide:!0,arrow:!0}]},besparen:{title:"Besparen",subtitle:"Grondstoffengebruik verlagen met 15% ten op zichte van 2016 (gebaseerd op DMI).",check:[(e,t)=>{var i,o;const n=(i=e==null?void 0:e.curr)==null?void 0:i.raw,r=(o=e==null?void 0:e.begin)==null?void 0:o.raw;return(r-n)/r*100>=15}],legend:[{key:"raw",name:"Grondstoffengebruik",color:"#7BC6CE"},{key:"reduction",name:"Reduction",color:"#D0D5DD"}]},behouden_hoeveelheid:{title:"Behouden (Hoeveelheid)",subtitle:"De totale hoeveelheid afval verlagen ten op zichte van 2016.",check:[(e,t)=>{var i,o;const n=(i=e==null?void 0:e.curr)==null?void 0:i.raw,r=(o=e==null?void 0:e.begin)==null?void 0:o.raw;return n<r}],lower:!0,legend:[{key:"raw",name:"Totale hoeveelheid afval",color:"#809399"},{key:"reduction",name:"Reduction",color:"#D0D5DD"}]},behouden_verwerking:{title:"Behouden (Verwerking)",subtitle:"Percentage gerecycled afval verhogen naar minimaal 82% waarvan minimaal 15% hoogwaardige recycling.",check:[(e,t)=>{var r,i;return((r=e==null?void 0:e.curr)==null?void 0:r.high)+((i=e==null?void 0:e.curr)==null?void 0:i.other)>=82},(e,t)=>{var n;return((n=e==null?void 0:e.curr)==null?void 0:n.high)>=15}],goals:{begin:{high:11,other:69,low:20},curr:{high:15,other:67,low:18},unit:"%"},legend:[{key:"high",name:"Hoogwaardige recycling",color:"#226123"},{key:"other",name:"Overige recycling",color:"#84B08D"},{key:"low",name:"Verbranden/Storten",color:"#D0D5DD"}]}},a7e=()=>p.jsx("div",{style:{height:1,width:"100%",background:"#DAE1ED"}}),s7e=({children:e})=>{const t=e==null?void 0:e.length;return p.jsx(yt,{vertical:!0,align:"center",style:{height:"100%",borderRadius:8,border:"1px solid #DAE1ED",overflow:"hidden"},children:e.map((n,r)=>p.jsxs($.Fragment,{children:[n,r<t-1?p.jsx(a7e,{}):p.jsx(p.Fragment,{})]},r))})};function l7e(e,t,n=[]){return n.every(r=>typeof r=="function"&&r(e,t))}const c7e=({data:e,year:t})=>(Object.keys(Kr).forEach(n=>{var a,s,l;Kr[n].goals=((a=e[n])==null?void 0:a.goals)||Kr[n].goals,Kr[n].legend=Kr[n].legend.map(c=>{var u;return{...c,lower:(u=Kr[n])==null?void 0:u.lower}});const r=(s=Kr[n])==null?void 0:s.check;(l=Kr[n])==null||l.reduce;const i=e[n],o=Kr[n].goals;Kr[n].success=l7e(i,o,r)}),p.jsxs(p.Fragment,{children:[p.jsx(fn,{}),p.jsx(ho,{gutter:[16,16],children:Object.entries(Kr).map(([n,r],i)=>p.jsx(br,{span:12,children:p.jsxs(s7e,{children:[p.jsx(r7e,{title:r==null?void 0:r.title,subtitle:r==null?void 0:r.subtitle,legend:r==null?void 0:r.legend,success:r==null?void 0:r.success}),p.jsx(Wp,{year:t,data:e==null?void 0:e[n],curr:!0,legend:r==null?void 0:r.legend}),p.jsx(Wp,{year:t,data:r==null?void 0:r.goals,legend:r==null?void 0:r.legend})]})},i))})]}));exports.AddressLink=fD;exports.Anchor=J6e;exports.BarChart=Ahe;exports.BenchmarkSankey=K2e;exports.ButtonControls=ZF;exports.CrmValueChart=W6e;exports.CustomToolTip=Un;exports.Description=mD;exports.DomRawChart=Lhe;exports.DownloadButton=vx;exports.EmailLink=dD;exports.ExpandButton=mx;exports.GFButton=a4;exports.GFCard=du;exports.GFMetricsGrid=pD;exports.GoalChart=N6e;exports.ImpactTrend=K6e;exports.Link=Yd;exports.LocationIcon=$x;exports.MailIcon=Sx;exports.MaterialHeatmap=L6e;exports.Metrics=xx;exports.NPCE=c7e;exports.NavCard=YF;exports.PhoneIcon=wx;exports.PhoneLink=hD;exports.PieChart=Tle;exports.QuickNavCard=nD;exports.RenewableTrend=X6e;exports.Sankey=Yse;exports.ScatterPlot=Ede;exports.TabCard=rD;exports.Title=Cx;exports.TreeMap=x2e;exports.Trends=U2e;exports.VisSelectors=G2e;exports.WasteOverview=The;
|
|
644
644
|
//# sourceMappingURL=index.cjs.js.map
|