https://bluefox.email/assets/chunks/TemplateShowcase.CW9i7f_p.js

1import{o as Y,z as H,q,e as k,r as j,s as J,l as X,u as Z,_ as Q,U as ee,A as te,$ as T,H as D,E as $,k as h,F,Z as L,a5 as V,n as B,j as x,L as _,J as z,I as U,ad as G,ae as K,b as N}from"./framework.sy_eTBd4.js";function ae(e){return H()?(q(e),!0):!1}const ne=typeof window<"u"&&typeof document<"u";typeof WorkerGlobalScope<"u"&&globalThis instanceof WorkerGlobalScope;const se=Object.prototype.toString,oe=e=>se.call(e)==="[object Object]";function P(e){return Array.isArray(e)?e:[e]}function le(e,d,n){return Y(e,d,{...n,immediate:!0})}const re=ne?window:void 0;function ie(e){var d;const n=X(e);return(d=n==null?void 0:n.$el)!=null?d:n}function O(...e){const d=[],n=()=>{d.forEach(a=>a()),d.length=0},b=(a,s,l,u)=>(a.addEventListener(s,l,u),()=>a.removeEventListener(s,l,u)),i=k(()=>{const a=P(X(e[0])).filter(s=>s!=null);return a.every(s=>typeof s!="string")?a:void 0}),y=le(()=>{var a,s;return[(s=(a=i.value)==null?void 0:a.map(l=>ie(l)))!=null?s:[re].filter(l=>l!=null),P(X(i.value?e[1]:e[0])),P(Z(i.value?e[2]:e[1])),X(i.value?e[3]:e[2])]},([a,s,l,u])=>{if(n(),!(a!=null&&a.length)||!(s!=null&&s.length)||!(l!=null&&l.length))return;const E=oe(u)?{...u}:u;d.push(...a.flatMap(v=>s.flatMap(S=>l.map(p=>b(v,S,p,E)))))},{flush:"post"}),g=()=>{y(),n()};return ae(n),g}function ce(e,d={}){const{threshold:n=50,onSwipe:b,onSwipeEnd:i,onSwipeStart:y,passive:g=!0}=d,a=j({x:0,y:0}),s=j({x:0,y:0}),l=k(()=>a.x-s.x),u=k(()=>a.y-s.y),{max:E,abs:v}=Math,S=k(()=>E(v(l.value),v(u.value))>=n),p=J(!1),I=k(()=>S.value?v(l.value)>v(u.value)?l.value>0?"left":"right":u.value>0?"up":"down":"none"),A=o=>[o.touches[0].clientX,o.touches[0].clientY],M=(o,f)=>{a.x=o,a.y=f},C=(o,f)=>{s.x=o,s.y=f},r={passive:g,capture:!g},t=o=>{p.value&&(i==null||i(o,I.value)),p.value=!1},w=[O(e,"touchstart",o=>{if(o.touches.length!==1)return;const[f,c]=A(o);M(f,c),C(f,c),y==null||y(o)},r),O(e,"touchmove",o=>{if(o.touches.length!==1)return;const[f,c]=A(o);C(f,c),r.capture&&!r.passive&&Math.abs(l.value)>Math.abs(u.value)&&o.preventDefault(),!p.value&&S.value&&(p.value=!0),p.value&&(b==null||b(o))},r),O(e,["touchend","touchcancel"],t,r)];return{isSwiping:p,direction:I,coordsStart:a,coordsEnd:s,lengthX:l,lengthY:u,stop:()=>w.forEach(o=>o()),isPassiveEventSupported:!0}}const ue=["onKeydown"],pe=["aria-hidden","onClick"],de={class:"ts-img-wrapper"},me=["src","srcset","alt","loading","fetchpriority"],fe={class:"ts-card-footer"},ve={class:"ts-chip-text"},he={class:"ts-card-title"},ye={class:"ts-dots",role:"tablist","aria-label":"Template navigation"},ge=["aria-label","aria-selected","onClick"],we={class:"visually-hidden","aria-live":"polite","aria-atomic":"true"},be={__name:"TemplateShowcase",props:{isDark:{type:Boolean,default:!1},lgAndUp:{type:Boolean,default:!0},md:{type:Boolean,default:!1},sm:{type:Boolean,default:!1},xs:{type:Boolean,default:!1}},setup(e){const d=e,n=[{src:"/assets/templates/marketing-agency-modern-responsive-newsletter.webp",alt:"Marketing agency modern responsive newsletter template",title:"Marketing Agency Newsletter",category:"Agency"},{src:"/assets/templates/shoes-ecommerce-email-template-marketo.webp",alt:"Ecommerce shoes product promotional email template",title:"Ecommerce Product Promo",category:"Ecommerce"},{src:"/assets/templates/saas-cart-abandoned.webp",alt:"SaaS cart abandonment recovery email template",title:"SaaS Cart Abandonment",category:"SaaS"},{src:"/assets/templates/clean-b2b-newsletter-responsive-email.webp",alt:"Clean B2B responsive newsletter email template",title:"Clean B2B Newsletter",category:"B2B"},{src:"/assets/templates/summer-newsletter-fully-responsive-html-email.webp",alt:"Summer fashion fully responsive newsletter email template",title:"Summer Fashion Newsletter",category:"Seasonal"},{src:"/assets/templates/black-friday-webshop-sale-promo.webp",alt:"Black Friday webshop sale promotional email template",title:"Black Friday Sale Promo",category:"Ecommerce"},{src:"/assets/templates/happy-easter-travel-template.webp",alt:"Travel promotional email template with holiday deals",title:"Easter Travel Deals",category:"Travel"},{src:"/assets/templates/modern-business-portfolio-welcome-email.webp",alt:"Modern business portfolio welcome email template",title:"Business Portfolio Welcome",category:"B2B"},{src:"/assets/templates/easter-egg-hunt-party-template.webp",alt:"Easter egg hunt party invitation email template",title:"Easter Event Invitation",category:"Events"},{src:"/assets/templates/spring-newsletter-ecommerce-seasonal-promotional-newsletter-template.webp",alt:"Spring seasonal promotional newsletter email template",title:"Spring Seasonal Newsletter",category:"Seasonal"}],b={Agency:"#392C91",Ecommerce:"#13B0EE",SaaS:"#7C3AED",B2B:"#0369A

11",Seasonal:"#16A34A",Travel:"#D97706",Events:"#DB2777"},i=N(0),y=N(!1),g=N(null);let a=null;const s=k(()=>d.lgAndUp||d.md);function l(){i.value=(i.value+1)%n.length}function u(){i.value=(i.value-1+n.length)%n.length}function E(r){i.value=r}function v(r){return((r-i.value)%n.length+n.length)%n.length}function S(r){const t=v(r),w=n.length;return s.value?t===0?{transform:"translateX(-50%) scale(1)",opacity:"1",zIndex:3,pointerEvents:"auto"}:t===1?{transform:"translateX(20%) scale(0.85)",opacity:"1",zIndex:1,pointerEvents:"auto",cursor:"pointer"}:t===w-1?{transform:"translateX(-120%) scale(0.85)",opacity:"1",zIndex:1,pointerEvents:"auto",cursor:"pointer"}:t===2?{transform:"translateX(80%) scale(0.7)",opacity:"0",zIndex:0,pointerEvents:"none"}:t===w-2?{transform:"translateX(-180%) scale(0.7)",opacity:"0",zIndex:0,pointerEvents:"none"}:{transform:"translateX(-50%) scale(0.7)",opacity:"0",zIndex:0,pointerEvents:"none"}:t===0?{transform:"translateX(-50%) scale(1)",opacity:"1",zIndex:3,pointerEvents:"auto"}:t===1?{transform:"translateX(60%) scale(0.85)",opacity:"0",zIndex:0,pointerEvents:"none"}:t===w-1?{transform:"translateX(-160%) scale(0.85)",opacity:"0",zIndex:0,pointerEvents:"none"}:{transform:"translateX(-50%) scale(0.7)",opacity:"0",zIndex:0,pointerEvents:"none"}}function p(r){return v(r)===0}function I(r){const t=v(r);return s.value?t===0||t===1||t===n.length-1:t===0}function A(r){p(r)||E(r)}function M(){C(),a=setInterval(()=>{y.value||l()},2e3)}function C(){a&&(clearInterval(a),a=null)}return ee(()=>{M(),g.value&&ce(g,{onSwipeEnd(r,t){t==="left"&&l(),t==="right"&&u()}})}),te(()=>{C()}),(r,t)=>{const w=T("v-chip"),W=T("v-card"),o=T("v-icon"),f=T("v-btn");return D(),$("div",{class:B(["ts-root",{"ts-root--dark":e.isDark}]),onMouseenter:t[0]||(t[0]=c=>y.value=!0),onMouseleave:t[1]||(t[1]=c=>y.value=!1),role:"region","aria-roledescription":"carousel","aria-label":"Email template showcase",tabindex:"0",onKeydown:[G(K(u,["prevent"]),["left"]),G(K(l,["prevent"]),["right"])]},[h("div",{class:"ts-viewport",ref_key:"viewport",ref:g},[(D(),$(F,null,L(n,(c,m)=>h("div",{key:c.src,class:B(["ts-card",{"ts-card--center":p(m)}]),style:V(S(m)),"aria-hidden":!p(m),onClick:R=>A(m)},[x(W,{class:"ts-inner-card",elevation:p(m)?12:2,rounded:"lg"},{default:_(()=>[h("div",de,[h("img",{src:c.src.replace(".webp","-400.webp"),srcset:`${c.src.replace(".webp","-400.webp")} 400w, ${c.src.replace(".webp","-600.webp")} 600w`,sizes:"(max-width: 599px) 260px, (max-width: 960px) 280px, 300px",alt:c.alt,class:"ts-img",width:"400",height:"534",loading:I(m)?"eager":"lazy",fetchpriority:p(m)?"high":"auto",decoding:"async"},null,8,me)]),h("div",fe,[x(w,{size:"small",label:"",style:V({background:b[c.category],color:"#fff"})},{default:_(()=>[h("span",ve,z(c.category),1)]),_:2},1032,["style"]),h("div",he,z(c.title),1)])]),_:2},1032,["elevation"])],14,pe)),64))],512),x(f,{icon:"",variant:"flat",size:"small",class:B(["ts-arrow ts-arrow--left",{"ts-arrow--mobile":!s.value}]),onClick:u,"aria-label":"Previous template"},{default:_(()=>[x(o,null,{default:_(()=>[...t[2]||(t[2]=[U("mdi-arrow-left",-1)])]),_:1})]),_:1},8,["class"]),x(f,{icon:"",variant:"flat",size:"small",class:B(["ts-arrow ts-arrow--right",{"ts-arrow--mobile":!s.value}]),onClick:l,"aria-label":"Next template"},{default:_(()=>[x(o,null,{default:_(()=>[...t[3]||(t[3]=[U("mdi-arrow-right",-1)])]),_:1})]),_:1},8,["class"]),h("div",ye,[(D(),$(F,null,L(n,(c,m)=>h("button",{key:m,class:B(["ts-dot",{"ts-dot--active":i.value===m,"ts-dot--dark":e.isDark}]),"aria-label":`Go to template ${m+1}: ${c.title}`,"aria-selected":i.value===m,role:"tab",onClick:R=>E(m)},null,10,ge)),64))]),h("div",we," Template "+z(i.value+1)+" of "+z(n.length)+": "+z(n[i.value].title),1)],42,ue)}}},Se=Q(be,[["__scopeId","data-v-5bc1cfd6"]]);export{Se as T};