https://www.toolstation.nl/_nuxt/asset/6.0.10/TsSelectBox-DHwzpGmF.js

1import{l as pe,Z as J,b as v,$ as fe,c as j,w as ce,m as ge,G as me,o as be,k as ye,O as g,P as p,a0 as B,R as S,U as d,J as A,S as D,K as we,a1 as q,u as h,W as I,_ as he,V,ac as ke,a4 as Ce,I as Q,a6 as _,X as z,Q as Se,ab as Ie,n as Ve}from"./carousel-BVOjnoof.js";import{_ as $e}from"./TsNoSavelistFound-Cf6WStgN.js";import{_ as Oe,i as N}from"./TsForm-BFZFcGID.js";import{a as Te,av as Re}from"./carouselThumbnail-BVGIAQ2F.js";import{a as Be}from"./TsAccordionTabV3-DpQlyILT.js";import"./TsVatToggle-BGCRqKR-.js";import"./entry-COcyHNV4.js";import"./TsCarouselTopBrands-CNwKM0SZ.js";import"./TsCardOutOfStock-CBZZzBco.js";import"./TsCardRoundedV1-9qCSFB4w.js";import"./TsButtonGroup-DHxkNh7i.js";import"./TsModalSubscriptionConfirmation-B9B3Kq-s.js";import"./TsTableColumn-_BitrsCO.js";import"./TsProCardFormBottomBar-B-_D3t20.js";const Ae=["id"],De=["tabindex","data-testid"],Le={class:"shrink-0"},ze=["id","data-testid"],Ne={key:0},Ee=["id","data-testid","aria-label","aria-selected","onClick","onMousemove"],xe={key:0,class:"me-1 shrink-0"},Fe={role:"listitem"},Ke={key:1,class:"ms-auto shrink-0"},E="flex px-3 py-2 w-full transition duration-150",ea=pe({inheritAttrs:!1,__name:"TsSelectBox",props:J({options:{},optionLabel:{type:Function,default:void 0},optionValue:{default:void 0},editable:{type:Boolean,default:!1},variant:{default:void 0},size:{default:"md"},labelType:{default:"fixed"},dataTestid:{default:"atom-select-box"},label:{default:""},message:{default:""},optionGroupLabel:{type:Function,default:void 0},selectOnHover:{type:Boolean,default:!1},loading:{type:Boolean,default:!1},loadingIcon:{default:"mingcute:loading-line"},dropdownIcon:{default:"uiw:down"},disabled:{type:Boolean,default:!1},divide:{type:Boolean},checkmark:{type:Boolean,default:!1},height:{default:"216px"},emptyMessage:{default:"Nothing to show"},searchTimeOutDelay:{default:400},dropdownPosition:{default:"bottom"},triggerType:{default:"click"},offsetSkidding:{default:0},offsetDistance:{default:5},dropdownDelay:{default:0},rootClass:{type:[Array,String,null,Number,Boolean],default:""},appendClass:{type:[Array,String,null,Number,Boolean],default:""},rootInputClass:{type:[Array,String,null,Number,Boolean],default:""},inputClass:{type:[Array,String,null,Number,Boolean],default:""},labelClass:{default:""},labelAppendClass:{default:""},optionClass:{type:[Array,String,null,Number,Boolean],default:""},dropdownClass:{type:[Array,String,null,Number,Boolean],default:""},labelInputValue:{default:void 0}},{modelValue:{},modelModifiers:{}}),emits:J(["search","inputChange","focus","blur","select","hover","navigate","show"],["update:modelValue"]),setup(x,{emit:W}){const r=v(null),F=v(null),K=Be(),o=v(null),m=fe(x,"modelValue"),b=W,a=x,u=v(""),f=v(!1),n=v(),l=v(-1),i=v([...a.options]),y=v(a.loading),w=e=>N(e,m.value),$=v(!1),X=e=>JSON.stringify(e),k=e=>e?a.optionLabel&&typeof e=="object"?typeof a.optionLabel=="function"?a.optionLabel(e):e[a.optionLabel]:a.optionValue&&typeof e=="object"?String(e[a.optionValue]):String(e):"";j(()=>a.options,e=>{i.value=[...e]}),j(()=>m.value,e=>{e&&(u.value=String(k(e)))}),ce(()=>{$.value=i.value.length===0});let O=null;function L(e){i.value.length>0&&(n.value=i.value[e],u.value=String(k(n.value)))}function M(e){Ve(()=>{const t=K.value[e];t&&t.scrollIntoView&&t.scrollIntoView({behavior:"smooth",block:"nearest",inline:"start"})})}const Z=e=>{var t;if(!a.disabled){if($.value=!1,u.value.trim().length)(t=o.value)==null||t.show();else{i.value=a.options;return}a.options.length!==0&&(b("search",e,u.value,n.value,l.value,f.value,o.value),l.value=-1,O&&clearTimeout(O),O=setTimeout(()=>{i.value=a.options.filter(c=>k(c).toLowerCase().includes(u.value.trim().toLowerCase())),i.value.length&&(l.value=0)},a.searchTimeOutDelay))}},U=(e,t)=>{var R;const c=a.optionValue?e[a.optionValue]:e;m.value=c,u.value=String(k(e)),n.value=e,l.value=t,(R=o.value)==null||R.hide(),b("select",e,i.value,y.value,u.value,l.value,o.value)},Y=(e,t)=>{!a.editable&&a.selectOnHover&&(u.value=String(k(e)),n.value=e),l.value=t,b("hover",e,i.value,y.value,u.value,n.value,l.value,f.value,o.value)},ee=e=>{a.disabled||b("focus",e,u.value,n.value,l.value,f.value,o.value)},ae=e=>{a.disabled||b("inputChange",e,u.value,n.value,l.value,f.value,o.value)},le=e=>{a.disabled||b("blur",e,u.value,n.value,l.value,f.value,o.value)},P=e=>{l.value++,l.value>=i.value.length&&(l.value=0),M(l.value),L(l.value),b("navigate",e,i.value,y.value,u.value,n.value,l.value,o.value)},G=e=>{l.value--,l.value<0&&(l.value=i.value.length-1),M(l.value),L(l.value),b("navigate",e,i.value,y.value,u.value,n.value,l.value,o.value)},te=e=>{n.value=void 0,l.value=-1,u.value="",i.value=[...a.options],m.value&&(m.value=void 0)},oe=e=>{var t;(t=o.value)==null||t.hide()},se=e=>{if(l.value>-1){if(L(l.value),!n.value)return;U(n.value,l.value)}},ne=(e,t)=>{var c;t||(c=o.value)==null||c.toggle()};function H(e){if(!a.disabled)switch(a.editable||e.preventDefault(),e.code){case"ArrowDown":P(e);break;case"ArrowUp":G(e);break;case"Delete":te();break;case"PageUp":G(e);break;case"PageDown":P(e);break;case"Space":ne(e,a.editable);break;case"Enter":case"NumpadEnter":se();break;case"Escape":oe();break}}const ie={xs:"text-[12px]",sm:"text-[14px]",md:"text-[16px]",lg:"text-[18px]"},ue=ge(()=>ie[a.size]);function re(){m.value?(n.value=m.value,a.optionValue?l.value=a.options.findIndex(e=>N(e[a.optionValue],m.value)):l.value=a.options.findIndex(e=>N(e,m.value))):(u.value="",n.value=void 0,l.value=-1)}const T=v("");return me(()=>{T.value=Te();const e={placement:a.dropdownPosition,triggerType:a.triggerType,offsetSkidding:a.offsetSkidding,offsetDistance:a.offsetDistance,delay:a.dropdownDelay,onHide:()=>{f.value=!1},onShow:()=>{re(),f.value=!0,b("show",o.value)}},t={id:"listbox-"+T.value,override:!0};o.value=new Re(F.value,r.value,e,t)}),be(()=>{o.value&&o.value._initialized&&o.value.destroyAndRemoveInstance()}),ye(()=>{O&&(clearTimeout(O),O=null)}),(e,t)=>

1{const c=he,R=$e,de=Oe;return p(),g("div",{id:"select-box-"+T.value,role:"form",class:V(h(I)("relative",a.appendClass))},[B("div",{ref_key:"selectRef",ref:r,tabindex:e.disabled?-1:Number(e.$attrs.tabindex)||0,"data-testid":"root-"+e.dataTestid,class:V(h(I)("inline relative",a.disabled?"cursor-not-allowed border-natural-light-grey":a.editable?"":"cursor-pointer",e.rootClass)),onKeydown:t[7]||(t[7]=s=>H(s))},[d(e.$slots,"trigger",{dropdown:o.value,triggerRef:r.value},()=>[A(de,{label:a.label,"append-class":a.labelAppendClass,"input-value":a.labelInputValue||(a.editable?u.value:n.value?JSON.stringify(n.value):""),floating:a.labelType==="floating",variant:a.variant,message:a.message,"label-class":a.labelClass},{"message?":D(()=>[d(e.$slots,"message",{dropdown:o.value,triggerRef:r.value,loading:y.value})]),default:D(()=>[A(R,we({id:"select-input-"+T.value},e.$attrs,{modelValue:u.value,"onUpdate:modelValue":t[1]||(t[1]=s=>u.value=s),variant:a.variant==="info"||a.variant==="warning"||a.variant==="disabled"?"default":a.variant,size:a.size,readonly:!e.editable,disabled:a.disabled,"data-testid":"".concat(a.dataTestid,"-input"),autocomplete:"off","append-class":h(I)("w-full bg-transparent",a.disabled?"cursor-not-allowed":a.editable?"":"cursor-pointer",a.rootInputClass),"input-class":h(I)(a.inputClass,a.disabled?"cursor-not-allowed text-natural-light-grey":a.editable?"":"cursor-pointer"),onInput:t[2]||(t[2]=s=>Z(s)),onChange:t[3]||(t[3]=s=>ae(s)),onFocus:t[4]||(t[4]=s=>ee(s)),onBlur:t[5]||(t[5]=s=>le(s)),onKeydown:t[6]||(t[6]=q(s=>H(s),["stop"]))}),{"left?":D(()=>[d(e.$slots,"input-left",{dropdown:o.value,triggerRef:r.value,loading:y.value})]),right:D(()=>[B("div",Le,[y.value?d(e.$slots,"loading-icon",{key:0,dropdown:o.value,triggerRef:r.value},()=>[A(c,{name:a.loadingIcon,class:"animate-spin","aria-hidden":"true",size:"24"},null,8,["name"])]):d(e.$slots,"input-right",{key:1,dropdown:o.value,triggerRef:r.value,loading:y.value},()=>[A(c,{class:V(h(I)("transition-transform duration-200 cursor-pointer !size-4",f.value&&!a.disabled?"rotate-180":"",a.disabled&&"cursor-not-allowed text-natural-light-grey")),name:a.dropdownIcon,size:"18","aria-hidden":"true",onClick:t[0]||(t[0]=q(()=>{},["stop"]))},null,8,["class","name"])])])]),_:3},16,["id","modelValue","variant","size","readonly","disabled","data-testid","append-class","input-class"])]),_:3},8,["label","append-class","input-value","floating","variant","message","label-class"])])],42,De),!e.disabled&&!y.value?(p(),g("ul",{key:0,id:"listbox-"+T.value,ref_key:"dropdownRef",ref:F,"data-testid":a.dataTestid,role:"listbox",class:V(h(I)(h(Ce)("absolute w-full max-w-full z-20 hidden overflow-y-auto border border-natural-light-grey dark:border-natural-grey bg-[#FAFAFA] dark:bg-[#1F1F1F] text-idle-black dark:text-idle-white py-2 mt-2 rounded-md",a.divide&&"divide-y divide-gray-200 dark:divide-gray-700",ue.value),a.dropdownClass)),style:ke({"max-height":a.height})},[d(e.$slots,"header",{dropdown:o.value,triggerRef:r.value,options:i.value,isSelected:w,isEmpty:$.value,isDropdownVisible:f.value}),d(e.$slots,"options",{dropdown:o.value,triggerRef:r.value,options:i.value,isSelected:w,activeOption:n.value,activeOptionIndex:l.value},()=>[a.optionGroupLabel?(p(),g("div",Ne,[(p(!0),g(Q,null,_(e.options,(s,C)=>(p(),g("li",{key:C,class:V(E),role:"option","aria-disabled":!0},[d(e.$slots,"option-group",{dropdown:o.value,triggerRef:r.value,options:i.value,activeOption:n.value,activeOptionIndex:l.value},()=>[B("span",null,z(s[a.optionGroupLabel]),1)])]))),128))])):S("",!0),(p(!0),g(Q,null,_(i.value,(s,C)=>(p(),g("li",{id:"option-".concat(C,"-")+T.value,key:X(s),ref_for:!0,ref:h(K).set,role:"option","data-testid":"option-".concat(C,"-")+e.dataTestid,"aria-label":String(k(s)),"aria-selected":w(s),class:V(h(I)(E,"cursor-pointer",l.value===C&&"text-primary font-semibold bg-blue-200/35",e.optionClass)),onClick:ve=>U(s,C),onMousemove:ve=>Y(s,C)},[e.$slots["option-start"]?(p(),g("div",xe,[a.checkmark?d(e.$slots,"option-start",{key:0,dropdown:o.value,triggerRef:r.value,options:i.value,option:s,isSelected:w,activeOption:n.value,activeOptionIndex:l.value},()=>[w(s)?(p(),Se(c,{key:0,name:"mdi:check",size:"18",class:"max-w-fit"})):S("",!0)]):S("",!0)])):S("",!0),d(e.$slots,"option",{dropdown:o.value,triggerRef:r.value,options:i.value,option:s,isSelected:w,activeOption:n.value,activeOptionIndex:l.value},()=>[B("span",Fe,z(k(s)),1)]),e.$slots["option-end"]?(p(),g("div",Ke,[d(e.$slots,"option-end",{dropdown:o.value,triggerRef:r.value,options:i.value,option:s,isSelected:w,activeOption:n.value,activeOptionIndex:l.value})])):S("",!0)],42,Ee))),128)),!e.options||e.options&&e.options.length===0||$.value?(p(),g("li",{key:1,class:V(E),role:"option","aria-disabled":!0},[d(e.$slots,"empty",{dropdown:o.value,triggerRef:r.value,options:i.value,query:u.value,isSelected:w,isEmpty:$.value},()=>[Ie(z(a.emptyMessage),1)])])):S("",!0)]),d(e.$slots,"footer",{dropdown:o.value,triggerRef:r.value,options:i.value,isSelected:w,isEmpty:$.value,isDropdownVisible:f.value})],14,ze)):S("",!0)],10,Ae)}}});

1export{ea as default};
2//# sourceMappingURL=TsSelectBox-DHwzpGmF.js.map