https://mobler.dk/Files/Templates/Designs/Mobler/dist/assets/VariantModal-403f7487.js

1import{d as ce,h as k,c as ue,i as pe,j as J,o as c,a as Q,w as b,q as D,t as v,b as t,B as h,s as u,x as Z,y as g,k as m,aa as I,l as C,C as K,F as me,D as fe,p as X,z as Y,f as V,g as T}from"./main-bddc5382.js";const ve={class:"flex flex-col lg:flex-row lg:flex-wrap w-full divide-x divide-grey max-md:h-dvh max-md:-mt-[86px] max-md:pt-[86px]"},he={class:"p-4 lg:px-8 lg:min-h-[7rem] border-grey border-b"},ge=["innerHTML"],ye=["src","alt"],_e={key:0,class:"md:hidden flex flex-col items-center w-full"},xe={class:"flex flex-col items-center bg-beige-light text-center rounded-sm p-4"},be={class:"mb-2"},Ce={class:"flex flex-col w-full md:w-1/2 max-md:mt-auto"},De={key:0,class:"flex flex-col md:flex-row p-4 lg:px-8 gap-4 border-grey border-b"},ke={key:0,class:"block md:flex"},we={key:1,class:"block md:flex"},Ge={key:1,class:"min-h-full max-h-[calc(90vh-250px)] bg-white overflow-y-scroll"},Fe={class:"mobler-custom-select-container mobler-custom-select-variant p-4 lg:px-8"},Ie=["title","value","checked","onChange"],Ve={key:0},Te={key:2,class:"flex items-center justify-center text-[10px] p-1 absolute top-0 right-0 product-card-splash bg-yellow text-black md:text-xs md:w-16 md:p-2k",style:{}},Pe={class:"m-0 uppercase font-bold leading-4 text-center text-black",style:{}},Ae={class:"sticky bottom-0 bg-primary-light"},Me={class:"w-full"},Ee={key:0,class:"p-4"},Le={key:1,class:"flex justify-between items-center gap-2 p-4 lg:px-8"},$e=ce({__name:"VariantModal",props:{productData:{},variantGroupData:{},colorGroupIds:{},show:{type:Boolean}},emits:["variantChange","close"],setup(O,{emit:ee}){var H,R,U,W,q;const te=V(()=>T(()=>import("./Modal-39cd34dd.js"),["assets/Modal-39cd34dd.js","assets/main-bddc5382.js","assets/main-ec8e9e03.css"])),F=V(()=>T(()=>import("./RenderAction-8e9ca0ef.js"),["assets/RenderAction-8e9ca0ef.js","assets/main-bddc5382.js","assets/main-ec8e9e03.css"])),E=V(()=>T(()=>import("./main-bddc5382.js").then(s=>s.ad),["assets/main-bddc5382.js","assets/main-ec8e9e03.css"])),ae=V(()=>T(()=>import("./PriceElement-8c1a9222.js"),["assets/PriceElement-8c1a9222.js","assets/main-bddc5382.js","assets/main-ec8e9e03.css"])),o=O,f={productName:(H=o.productData)==null?void 0:H.name,productPrice:(R=o.productData)==null?void 0:R.productPrice,media:(U=o.productData)==null?void 0:U.media,cylindo:(W=o.productData)==null?void 0:W.cylindo,selectedVariantId:(q=o.productData)==null?void 0:q.variantId},P=ee;let p=k(!1),y=k({});const w=k(null),L=k(null);let i=k({color:[],material:[]});const le=JSON.stringify({options:{priceAndCampaign:!0,productDetailsAdvanced:!1,media:!0,dimensions:!1,delivery:!1,cylindo:!1,specifications:!1,variantOptionsAdvanced:!1,moreOptions:!1}}),j=s=>{const e=s.split("_");return e.length>1?e[1]:""},oe=()=>o.variantGroupData.variantGroupDetails.colorFilterValues.length>0,se=()=>Object.values(o.variantGroupData.variantGroupDetails.colorFilterValues.reduce((e,r)=>{const a=r.value?r.value:"";return e[a]||(e[a]=r),e},{})).map(e=>({id:e.value,name:e.label,value:e.value,thumbColor:e.attribute})),re=()=>o.variantGroupData.variantGroupDetails.materialFilterValues.length>0,ie=()=>Object.values(o.variantGroupData.variantGroupDetails.materialFilterValues.reduce((e,r)=>{const a=r.value&&r.value.split("_").length>1?r.value.split("_")[1]:"";return e[a]||(e[a]=r),e},{})).map(e=>({id:e.value,name:e.label,value:e.value,thumbColor:e.attribute})),S=k({}),$=async s=>{var n,d,G,l,_;y.value=s;const e=(n=s==null?void 0:s.designProperties)==null?void 0:n.cylindoFeatures;if(I.shouldLoad()&&e){const x=e.split(" ");Object.assign(S.value,I.selectedCylindoFeatures,{[x[0].toUpperCase()]:x[1]}),I.setFeatures("modal",S.value)}const r=await fetch(`/mobler-api/v2/products/productsFeed?productIds=${o.productData.id}_${(G=(d=y==null?void 0:y.value)==null?void 0:d.designProperties)==null?void 0:G.variantId}`,{method:"POST",headers:{"Content-Type":"application/json"},body:le});w.value=null;const a=await r.json();w.value=(l=a==null?void 0:a.products[0])==null?void 0:l.priceAndCampaign,L.value.scrollIntoView(),f.media=(_=a==null?void 0:a.products[0])==null?void 0:_.media},z=s=>

1{s.forEach(e=>i.value[e]=[])},N=(s,e)=>{e.length?(z([s]),e.forEach(r=>{if(s==="material"){const a=o.variantGroupData.variantGroupDetails.variantOptionDetails.find(d=>d.materialType===r.value),n=j(a.materialType);i.value.material.includes(n)?i.value.material=i.value.material.filter(d=>d!==n):i.value.material.push(n)}else if(s==="color"){const n=o.variantGroupData.variantGroupDetails.variantOptionDetails.find(d=>d.color===r.value).color;i.value.color.includes(n)?i.value.color=i.value.color.filter(d=>d!==n):i.value.color.push(n)}})):z([s])};let A=ue(()=>{if(!o.variantGroupData)return;const s=i.value.color.length+i.value.material.length>0;let e=o.variantGroupData.variantGroupDetails.variantOptionDetails;return s&&(e=o.variantGroupData.variantGroupDetails.variantOptionDetails.filter(r=>{const a=j(r.materialType),n=r.color;let d=[];return i.value.material.length&&i.value.color.length?d=i.value.material.includes(a)&&i.value.color.includes(n):i.value.material.length?d=i.value.material.includes(a):i.value.color.length&&(d=i.value.color.includes(n)),d})),e});const B=()=>{var r,a;w.value=o.productData.priceAndCampaign;const s=(r=o.productData.variantOptionsAdvanced.variantGroups)==null?void 0:r.findIndex(n=>o.colorGroupIds.includes(n.id)===!0),e=o.productData.variantId.split(".")[s];$(((a=o.variantGroupData.variantGroupDetails.variantOptionDetails)==null?void 0:a.find(n=>n.id===e))??o.variantGroupData.variantGroupDetails.variantOptionDetails[0])},ne=()=>window.innerWidth<768?"full":"modal",de=()=>{p.value=!p.value},M=()=>window.innerWidth<768;return pe(async()=>{o.variantGroupData&&B()}),J([()=>o.show,()=>i],([s,e],[r,a])=>{s&&B(),e!==a&&A.value},{deep:!0}),J(()=>i,()=>{A.value},{deep:!0}),(s,e)=>(c(),Q(t(te),{class:"variant-modal",show:o.show,theme:"variant",type:ne(),onClose:e[4]||(e[4]=r=>P("close"))},{"modal-title":b(()=>[D(v(t(h)("Cylindo - Modal - Intro - Text")),1)]),content:b(()=>{var r,a,n,d,G;return[u("div",ve,[u("div",{class:Z(["flex flex-col h-auto md:h-full w-full md:w-1/2 product-image-wrapper",[{"is-ai-image":(r=f==null?void 0:f.media)==null?void 0:r.productImageIsAI},t(p)?"hidden":""]]),ref_key:"imageContainer",ref:L},[u("div",he,[u("h4",null,v(f.productName),1),w.value?(c(),Q(t(ae),{key:0,direction:"horizontal",theme:"page",size:"sm","price-data":w.value},null,8,["price-data"])):g("",!0)]),(a=f==null?void 0:f.cylindo)!=null&&a.isUsingCylindoAssets?(c(),m("div",{key:0,class:"flex justify-center max-md:max-h-[30dvh] lg:h-auto",innerHTML:t(I).renderCylindoElement(f.cylindo,"cylindo-360",{id:"cylindo-modal-container",controls:"zoom"})},null,8,ge)):(c(),m("img",{key:1,width:"800",height:"500",class:"product-image main-image modal-main-image",src:"/Admin/Public/GetImage.ashx?Image="+((G=(d=(n=f==null?void 0:f.media)==null?void 0:n.images)==null?void 0:d[0])==null?void 0:G.url)+"&Width=800&height=500&Format=webP&Quality=90&Crop=5&resolution=50",alt:f.productName,loading:"lazy"},null,8,ye))],2),t(p)?g("",!0):(c(),m("div",_e,[u("div",xe,[u("strong",be,v(t(h)("Cylindo - Modal - Change Style Teaser")),1),C(t(F),{action:"button",theme:"dark",onClick:e[0]||(e[0]=l=>de())},{default:b(()=>[C(t(K),{icon:["fal","pen"]}),D(" "+v(t(h)("Cylindo - Modal - Change Style")),1)]),_:1})])])),u("div",Ce,[t(p)||!M()?(c(),m("div",De,[oe()?(c(),m("div",ke,[C(t(E),{filterType:"color",multiple:!0,type:"dropdown",options:se(),label:t(h)("Cylindo - Modal - Colors - Header"),onUpdateFilter:N},{default:b(()=>[D(v(t(h)("Cylindo - Modal - All - Text")),1)]),_:1},8,["options","label"])])):g("",!0),re()?(c(),m("div",we,[C(t(E),{filterType:"material",multiple:!0,type:"dropdown",options:ie(),label:t(h)("Cylindo - Modal - Material - Header"),onUpdateFilter:N},{default:b(()=>[D(v(t(h)("Cylindo - Modal - All - Text")),1)]),_:1},8,["options","label"])])):g("",!0)])):g("",!0),t(p)||!M()?(c(),m("div",Ge,[u("div",Fe,[(c(!0),m(me,null,fe(t(A),l=>{var _,x;return c(),m("label",null,[u("input",{class:"variant-color",name:"ModelVariantOption",title:`Cylindo - Modal - Option - ${l.name} - Label`,type:"radio",value:l.id,checked:t(y).id===l.id,onChange:je=>{$(l),X(p)?p.value=!1:p=!1}},null,40,Ie),l!=null&&l.isOffer?(c(),m("span",Ve)):g("",!0),(_=l==null?void 0:l.designProperties)!=null&&_.hasVisualContent?(c(),m("span",{key:1,class:"border select-option js-mobler-modal-variant-option-background",style:Y(l.designProperties.backgroundFabric)},[u("span",{class:"image-magnifier-large js-mobler-modal-variant-option-zoom",style:Y(l.designProperties.backgroundZoom)},null,4)],4)):g("",!0),u("span",{class:Z(["custom-control-description text-center block small text-muted",(x=l==null?void 0:l.designProperties)!=null&&x.hasVisualContent?"":"text-only-modal-variant-option"])},v(l.name),3),l!=null&&l.isOffer?(c(),m("span",Te,[u("span",Pe,[u("span",null,v(t(h)("ProductOffer")),1)])])):g("",!0)])}),256))])])):g("",!0),u("div",Ae,[u("div",Me,[t(p)?(c(),m("div",Ee,[C(t(F),{action:"button",theme:"outline",onClick:e[1]||(e[1]=l=>X(p)?p.value=!1:p=!1)},{default:b(()=>[C(t(K),{icon:["fal","arrow-left"]}),D(" "+v(t(h)("Back")),1)]),_:1})])):!t(p)||!M()?(c(),m("div",Le,[C(t(F),{action:"button",theme:"link",onClick:e[2]||(e[2]=l=>P("close"))},{default:b(()=>[D(v(t(h)("Cylindo - Modal - Cancel - Text")),1)]),_:1}),C(t(F),{action:"button",theme:"primary",onClick:e[3]||(e[3]=l=>{var _,x;return P("variantChange",((_=t(y))==null?void 0:_.designProperties.variantId)||((x=t(y))==null?void 0:x.variantProduct.variantId),t(y))})},{default:b(()=>[D(v(t(h)("Cylindo - Modal - Save - Text")),1)]),_:1})])):g("",!0)])])])])]}),_:1},8,["show","type"]))}});

1export{$e as default};
2//# sourceMappingURL=VariantModal-403f7487.js.map