https://www.jumbo.com/_nuxt/DD7TJZFb.js

1import{S as Y,X as We,g as l,h as c,aQ as de,q as k,s as T,v as B,G as g,F as K,C as J,y as z,E as j,V as Ze,ah as O,al as G,bf as Ge,I as X,d as ee,bj as Xe,z as F,m as h,c as w,i as _,j as u,Q as D,cY as Ye,dM as et,p as Le,t as tt,bD as at,O as st,a7 as it,bp as nt,bC as lt,f as Pe,aS as ot,bn as rt,b4 as ut}from"./DQM39uDX.js";import{n as ct}from"./DSxm6jZD.js";import{u as Ce}from"./DZiXZHzj.js";const P={INPUT_POSITION:"input-position",SUBMIT_POSITION:"submit-position"},$e=/[\\^$.*+?()[\]{}|]/g,dt=RegExp($e.source);function pt(a){return a&&dt.test(a)?a.replace($e,"\\$&"):a||""}const vt=ee({name:"JumSearchBarItem",components:{JumIcon:F,JumRouterLink:Xe},props:{item:{type:Object,required:!0},asLink:{type:Boolean,default:!0},isMobileApp:{type:Boolean,default:!1},replace:{type:Boolean,default:!1},searchTerm:{type:String,required:!0},isActive:{type:Boolean,default:!1}},emits:["focus-item","navigate-next","navigate-previous"],setup(a,{emit:y,expose:S}){const n=h(null),o=w(()=>a.asLink?{replace:a.replace,wrapInLink:!0,to:a.item.url,tabindex:-1}:{type:"button",tabindex:-1}),M=w(()=>{var p;const b=pt(a.searchTerm),r=new RegExp(`(${b})`,"i");return((p=a.item.text)==null?void 0:p.split(r))??[]}),N=w(()=>a.item.icon??"search"),v=()=>y("focus-item"),d=()=>y("navigate-next"),f=()=>y("navigate-previous"),m=()=>{var p,b;if(n.value instanceof HTMLButtonElement){n.value.focus();return}(b=(p=n.value)==null?void 0:p.$el)==null||b.focus()};return S({focus:m}),{searchTermParts:M,showHighlight:p=>a.searchTerm&&a.searchTerm.toLowerCase().includes(p.toLowerCase()),icon:N,attributes:o,handleFocus:v,handleNavigateNext:d,handleNavigatePrevious:f,focus:m,focusableElement:n}}}),mt={class:"icon-wrapper"},ht={class:"text"},kt={key:1},ft={key:1};function bt(a,y,S,n,o,M){const N=We("jum-icon");return l(),c("li",{class:X(["search-bar-suggestions-item",a.isMobileApp?"app":"web",{active:a.isActive}]),"data-testid":"search-suggestion-option","data-dd-privacy":"mask"},[de(a.$slots,"search-bar-item",{item:a.item},()=>[(l(),k(Ge(a.asLink?"JumRouterLink":"button"),Ze({ref:"focusableElement",class:"result"},a.attributes,{onFocus:a.handleFocus,onKeydown:[O(G(a.handleNavigateNext,["prevent"]),["arrow-down"]),O(G(a.handleNavigatePrevious,["prevent"]),["arrow-up"])]}),{default:T(()=>[B("div",mt,[a.icon?(l(),k(N,{key:0,class:"search-bar-suggestions-item-icon",size:"20",icon:a.icon},null,8,["icon"])):g("",!0)]),B("div",ht,[a.item.highlight?(l(!0),c(K,{key:0},J(a.searchTermParts,(v,d)=>(l(),c("span",{key:d},[a.showHighlight(v)?(l(),c(K,{key:0},[z(j(v),1)],64)):(l(),c("strong",kt,j(v),1))]))),128)):(l(),c("span",ft,j(a.item.text),1))])]),_:1},16,["onFocus","onKeydown"]))],!0)],2)}const gt=Y(vt,[["render",bt],["__scopeId","data-v-2e26c821"]]),yt={class:"shimmering-suggestions"},It=ee({__name:"ShimmeringSuggestions",setup(a){const y=S=>S%2?"87px":"110px";return(S,n)=>(l(),c("ul",yt,[(l(),c(K,null,J(5,o=>B("li",{key:o,class:"shimmering-item"},[_(Ce,{height:"32px",width:"32px",class:"shimmering-icon"}),_(Ce,{height:"22px",width:y(o)},null,8,["width"])])),64))]))}}),xt=Y(It,[["__scopeId","data-v-785770d7"]]),wt=ee({__name:"SearchBarSkipLinks",props:{links:{},position:{}},emits:["skip"],setup(a,{expose:y,emit:S}){const n=S,o=h(null),M=v=>{const d=document.querySelector(v);return d instanceof HTMLElement?d:null},N=(v,d)=>{v.preventDefault();for(const f of d){const m=M(f);if(m){m.focus();break}}n("skip")};return y({element:o}),(v,d)=>(l(),c("div",{ref_key:"skipLinksRef",ref:o,class:X(["skip-links",a.position])},[(l(!0),c(K,null,J(a.links,(f,m)=>(l(),k(u(D),{key:"skip-link"+m,"data-testid":"skip-button-"+m,label:f.text,accessibility:"",small:"",class:"skip-link",onClick:p=>N(p,f.selectors)},{default:T(()=>[z(j(f.text),1)]),_:2},1032,["data-testid","label","onClick"]))),128))],2))}}),Oe=Y(wt,[["__scopeId","data-v-9e9dd55b"]]),St={key:0,class:"search-bar-overlay"},Tt={class:"search-bar-field"},_t=["aria-label","aria-controls","placeholder","onKeydown"],Bt=["aria-busy"],Nt={key:0},Lt={class:"search-bar-tool-tip"},Pt={class:"search-bar-section","data-testid":"search-suggestion-section"},Ct=1e3,Me="​",Ot="Laden",Mt=ee({name:"JumSearchBar",__name:"SearchBar",props:{sections:{default:()=>[]},debounceTimeout:{default:300},active:{type:Boolean,default:!1},placeholder:{default:""},inputAriaLabel:{default:"Zoekopdracht"},searchTerm:{default:""},isMobileApp:{type:Boolean,default:!1},redirectFallback:{default:"/"},replace:{type:Boolean,default:!1},shimmering:{type:Boolean,default:!1},showBarcode:{type:Boolean,default:!1},searchBarItemAsLink:{type:Boolean,default:!0},skipLinks:{default:()=>[]}},emits:["reset","search","input","focusin","focusout","item-click","go-back","barcode","skip"],setup(a,{expose:y,emit:S}){const n=a,o=S,M=Ye(),N=`search-bar-listbox-${et()}`,v=h(null),d=h(null),f=h([]),m=h(-1),p=h(-1),b=h(n.active),r=h(n.searchTerm),te=h(null),V=h(null),q=h(),H=h("");let Q=0,ae,$=null,pe=0;const A=h(!1);Le(()=>n.searchTerm,e=>{r.value=e});const se=e=>p.value!==e?-1:m.value,E=w(()=>se(p.value)>-1?n.sections[p.value].items[m.value]:null),I=w(()=>b.value&&(n.sections.length>0||n.shimmering)),ve=w(()=>"tooltip"in M),Ae=tt().greaterOrEqual("l"),ie=w(()=>{var e;return Ae.value&&r.value.trim()&&((e=n.skipLinks)==null?void 0:e.length)>0}),ne=w(()=>n.sections.reduce((e,t)=>

1e+t.items.length,0)),me=w(()=>JSON.stringify(n.sections)),Ee=e=>`Er zijn ${e} suggesties beschikbaar`,he=w(()=>!I.value||!A.value?null:n.shimmering?{key:"loading",message:Ot}:ne.value===0?null:{key:`suggestions:${me.value}`,message:Ee(ne.value)}),Re=e=>Q===1?`${Me}${e}`:Q===2?`${e}${Me}`:e,Ue=()=>{if($===null)return;const e=$;$=null,Q=(Q+1)%3,H.value=Re(e)},ke=()=>{if(clearTimeout(ae),$===null)return;const e=Math.max(0,pe+Ct-Date.now());ae=setTimeout(Ue,e)},fe=()=>{$=null,clearTimeout(ae)},Fe=e=>{$=e,ke()},De=()=>{pe=Date.now(),ke()},R=()=>{p.value=-1,m.value=-1},be=(e,t)=>{p.value=e,m.value=t},ze=(e,t,s)=>{var i;(i=f.value)[t]??(i[t]=[]),f.value[t][s]=e},W=(e,t)=>{var s,i;(i=(s=f.value[e])==null?void 0:s[t])==null||i.focus()},Ke=()=>{for(const[e,t]of n.sections.entries())if(t.items.length>0)return{sectionIndex:e,itemIndex:0};return null},je=()=>{for(let e=n.sections.length-1;e>=0;e-=1){const t=n.sections.at(e),s=(t?.items.length??0)-1;if(s>=0)return{sectionIndex:e,itemIndex:s}}return null},Je=(e,t)=>{const s=n.sections.at(e);if(!s)return null;if(t<s.items.length-1)return{sectionIndex:e,itemIndex:t+1};for(let i=e+1;i<n.sections.length;i+=1){const x=n.sections.at(i);if((x?.items.length??0)>0)return{sectionIndex:i,itemIndex:0}}return null},Ve=(e,t)=>{if(t>0)return{sectionIndex:e,itemIndex:t-1};for(let s=e-1;s>=0;s-=1){const i=n.sections.at(s),x=(i?.items.length??0)-1;if(x>=0)return{sectionIndex:s,itemIndex:x}}return null},qe=()=>{const e=Ke();e&&W(e.sectionIndex,e.itemIndex)},He=()=>{const e=je();e&&W(e.sectionIndex,e.itemIndex)},ge=(e,t)=>{const s=Je(e,t);s&&W(s.sectionIndex,s.itemIndex)},ye=(e,t)=>{var s;const i=Ve(e,t);if(!i){R(),(s=d.value)==null||s.focus();return}W(i.sectionIndex,i.itemIndex)};at(fe);const Ie=()=>{var e;b.value=!0,A.value=!0,R(),(e=d.value)==null||e.select(),o("focusin",{searchTerm:r.value})},U=()=>{b.value=!1,A.value=!1,R(),o("focusout",{searchTerm:r.value})},xe=()=>{var e,t;b.value=!1,A.value=!1,R(),n.isMobileApp?o("go-back"):(t=(e=window.history)==null?void 0:e.state)!=null&&t.back?window.history.back():window.location.assign(n.redirectFallback)},le=(e,t,s)=>{r.value=e.text,o("search",{searchMethod:s.type==="click"?"click":"enter",searchTerm:r.value,suggestion:{itemIndex:t,item:e}}),ut(()=>{var i;Z(P.SUBMIT_POSITION),(i=te.value)==null||i.onFocus()})},Z=e=>{q.value=e},oe=e=>{var t;Z(void 0),R(),r.value="",(t=d.value)==null||t.focus(),e&&o("reset",{$event:e})},we=e=>{I.value&&(e.preventDefault(),qe())},Se=e=>{I.value&&(e.preventDefault(),He())},Te=()=>{o("barcode")},_e=()=>o("search",{searchMethod:"submit",searchTerm:r.value,suggestion:void 0}),Be=()=>{Z(P.SUBMIT_POSITION),_e()},Ne=e=>{E.value?(le(E.value,m.value,e),o("item-click",{url:E.value.url||"",text:E.value.text,highlight:E.value.highlight||!1})):(Z(P.INPUT_POSITION),_e()),R()},re=e=>{I.value&&(oe(e),U())},ue=st(()=>{var e;A.value=!0,o("input",{searchTerm:((e=d.value)==null?void 0:e.value)??""})},n.debounceTimeout);it(v,U);const Qe=e=>{var t,s;const{activeElement:i}=document;e.keyCode===9&&i&&!["result","search-bar"].some(x=>i.className.includes(x))&&!((s=(t=V.value)==null?void 0:t.element)!=null&&s.contains(i))&&U()},ce=()=>{U(),o("skip")};return nt(window,"keyup",Qe),Le(()=>{var e;return((e=he.value)==null?void 0:e.key)??null},()=>{var e;const t=(e=he.value)==null?void 0:e.message;if(!t){fe(),H.value="";return}Fe(t)},{flush:"post"}),y({activate:Ie,deactivate:U,goBack:xe,selectItem:le,reset:oe,handleArrowDown:we,handleArrowUp:Se,handleBarcode:Te,handleEnter:Ne,handleEscape:re,handleSubmit:Be,onSkipLinksClick:ce,handleInput:ue,setActiveSuggestion:be,focusNextSuggestion:ge,focusPreviousSuggestion:ye,getItemIndexOfActiveSection:se,wrapper:v,searchInput:d,isActive:b,internalSearchTerm:r,selectedItem:E,showResults:I,showTooltip:ve,searchButtonRef:te,skipLinksRef:V,showSkipLinks:ie,skipLinksPosition:q,liveRegionMessage:H,visibleSuggestionCount:ne,visibleSuggestionContentKey:me,hasUserInteractedWithSearchBar:A,SkipLinksPositionEnum:P}),(e,t)=>(l(),c("form",{ref:"form",method:"get",class:X(["search-bar",a.isMobileApp?"app":"web"]),"data-testid":"jum-search-bar",action:"",onSubmit:G(Be,["prevent"])},[_(u(lt),{role:"status","aria-live":"polite","aria-atomic":"true"},{default:T(()=>[z(j(H.value),1)]),_:1}),I.value?(l(),c("div",St)):g("",!0),B("div",{ref_key:"wrapper",ref:v,class:X(["search-bar-wrapper",{mobile:a.isMobileApp}])},[_(u(D),{tertiary:"",circle:"",compact:"",class:"search-bar-mobile-close","aria-label":"Sluiten","data-testid":"back-button",onClick:xe},{default:T(()=>[_(u(F),{icon:"chevronLeft",size:"24"})]),_:1}),B("div",Tt,[Pe(B("input",{id:"siteSearch",ref_key:"searchInput",ref:d,"onUpdate:modelValue":t[0]||(t[0]=s=>r.value=s),name:"searchTerms",class:"search-bar-input",type:"search",autocomplete:"off","aria-label":a.inputAriaLabel,"aria-controls":I.value?N:void 0,placeholder:a.placeholder,"data-testid":"search-input-field",onKeydown:[De,O(we,["arrow-down"]),O(Se,["arrow-up"]),O(G(Ne,["prevent"]),["enter"]),O(re,["esc"])],onFocus:Ie,onInput:t[1]||(t[1]=(...s)=>u(ue)&&u(ue)(...s))},null,40,_t),[[ot,r.value]]),ie.value&&q.value===u(P).INPUT_POSITION?(l(),k(Oe,{key:0,ref_key:"skipLinksRef",ref:V,links:a.skipLinks,position:u(P).INPUT_POSITION,onSkip:ce},null,8,["links","position"])):g("",!0)]),!I.value&&!r.value?(l(),k(u(F),{key:0,class:"search-bar-search-icon",icon:"search",size:"24"})):g("",!0),_(u(F),{class:"search-bar-xs-icon",size:"24",icon:"search"}),a.showBarcode&&!r.value?(l(),k(u(D),{key:1,tertiary:"",circle:"",compact:"",class:"search-bar-barco

1de-icon-mobile","aria-label":"Scan de barcode van een product","data-testid":"barcode-button",onClick:Te},{default:T(()=>[_(u(F),{icon:"barcode",size:"24"})]),_:1})):g("",!0),r.value?(l(),k(u(D),{key:2,tertiary:"",circle:"",compact:"",class:"search-bar-clear-icon","aria-label":"zoekveld leegmaken",onClick:oe},{default:T(()=>[_(u(F),{class:"jum-icon-s",size:"24",icon:"clear","data-testid":"clear-button"})]),_:1})):g("",!0),b.value||r.value?(l(),k(u(D),{key:3,ref_key:"searchButtonRef",ref:te,class:"search-bar-button",type:"submit",compact:"",disabled:!r.value,"data-testid":"search-button"},{default:T(()=>[...t[2]||(t[2]=[z(" Zoeken ",-1)])]),_:1},8,["disabled"])):g("",!0),ie.value&&q.value===u(P).SUBMIT_POSITION?(l(),k(Oe,{key:4,ref_key:"skipLinksRef",ref:V,links:a.skipLinks,position:u(P).SUBMIT_POSITION,onSkip:ce},null,8,["links","position"])):g("",!0),I.value?(l(),c("div",{key:5,id:N,class:"search-bar-suggestions",role:"presentation","aria-busy":a.shimmering?"true":void 0,onKeydown:O(re,["esc"])},[ve.value?(l(),c("div",Nt,[B("div",Lt,[de(e.$slots,"tooltip",{},()=>[t[3]||(t[3]=B("span",{class:"tip"},"Tip! ",-1)),t[4]||(t[4]=z("Leuke tips om leuke en lekkere recepten te maken ",-1))],!0)])])):g("",!0),a.shimmering?(l(),k(xt,{key:1})):(l(!0),c(K,{key:2},J(a.sections,(s,i)=>(l(),c("div",{key:i},[i>0?(l(),k(u(ct),{key:0,"aria-hidden":"true"})):g("",!0),B("ul",Pt,[(l(!0),c(K,null,J(s.items,(x,C)=>(l(),k(gt,{key:C,ref_for:!0,ref:L=>ze(L,i,C),item:x,"search-term":r.value,"is-mobile-app":a.isMobileApp,replace:a.replace,"as-link":a.searchBarItemAsLink,"is-active":se(i)===C,onFocusItem:L=>be(i,C),onNavigateNext:L=>ge(i,C),onNavigatePrevious:L=>ye(i,C),onClick:L=>le(x,C,L)},{"search-bar-item":T(L=>[de(e.$slots,"search-bar-item",{item:L.item},void 0,!0)]),_:2},1032,["item","search-term","is-mobile-app","replace","as-link","is-active","onFocusItem","onNavigateNext","onNavigatePrevious","onClick"]))),128))])]))),128))],40,Bt)):g("",!0)],2),Pe(_(u(D),{tertiary:"",compact:"",class:"search-bar-xs-close-button",onClick:U},{default:T(()=>[...t[5]||(t[5]=[z(" Sluiten ",-1)])]),_:1},512),[[rt,I.value]])],34))}}),Rt=Y(Mt,[["__scopeId","data-v-9d67d0ca"]]);export{Rt as P};