https://www.prettylitter.com/_nuxt/ColorChangeCarousel.89c23693.js

1import{_ as M}from"./CdnImage.d913dd3c.js";import{k as _,A as F,o as c,c as d,a as e,s as u,y as g,S as j,F as x,O as w,l as i,b as f,W as C,t as k,j as N}from"./entry.68c30b5d.js";import{H as L}from"./healthLegend.68478e5f.js";const E={class:"grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-12 lg:gap-16 items-start"},O=["innerHTML"],P=["innerHTML"],V=["innerHTML"],X=["onClick","onKeydown","aria-label","aria-pressed"],I={key:3,class:"hidden md:flex bg-grey-200 border border-grey-400 rounded-lg p-5 flex-col gap-3"},R={class:"flex items-center gap-2 text-[#0FBCC9] font-sanssemibold tracking-[4.8px] text-base uppercase"},K=e("span",null,"Veterinarian Note",-1),W=e("p",{class:"text-sm text-grey-500"}," PrettyLitter helps monitor your cat's health by detecting abnormalities in urine acidity, alkalinity, and the visible presence of blood. It cannot detect every feline health issue or prevent or diagnose diseases. A diagnosis can only come from a licensed veterinarian. ",-1),G={class:"hidden md:block overflow-x-clip pl-6"},U={class:"relative h-[34rem] lg:h-[38rem]"},Y=["aria-hidden","onClick"],q={class:"relative h-64 lg:h-80 z-10"},J={class:"absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[40%] w-4/5 pointer-events-none z-[5]"},Q={class:"bg-white px-5 pt-24 pb-6"},Z=["innerHTML"],ee=["aria-hidden"],te={class:"rounded-lg overflow-hidden shadow-md h-full flex flex-col"},le={class:"relative h-56 z-10"},se={class:"absolute bottom-0 left-1/2 -translate-x-1/2 translate-y-[40%] w-4/5 pointer-events-none z-[5]"},oe={class:"bg-white px-5 pt-24 lg:pt-36 pb-6 flex-1"},ae=["innerHTML"],ne={key:0,class:"md:hidden flex items-center justify-between gap-8 mt-6 px-3"},ie=["aria-valuenow","aria-valuemax"],re=e("div",{class:"absolute top-1/2 -translate-y-1/2 left-0 right-0 h-px bg-[#051c2c]/25"},null,-1),ce={class:"flex gap-3"},de=["disabled"],ue=e("svg",{viewBox:"0 0 50 50",class:"w-full h-full",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[e("path",{d:"M29 16L20 24.5L29 33",stroke:"#000A20","stroke-width":"2","stroke-linecap":"round"})],-1),he=[ue],fe=["disabled"],ge=e("svg",{viewBox:"0 0 50 50",class:"w-full h-full rotate-180",fill:"none",xmlns:"http://www.w3.org/2000/svg","aria-hidden":"true"},[e("path",{d:"M29 16L20 24.5L29 33",stroke:"#000A20","stroke-width":"2","stroke-linecap":"round"})],-1),pe=[ge],ye={key:1,class:"md:hidden mt-8 bg-grey-200 border border-grey-400 rounded-xl p-5 flex-col gap-3"},be={class:"flex items-center gap-2 text-[#0FBCC9] font-sansbold tracking-widest text-[11px] uppercase"},me=e("span",null,"Veterinarian Note",-1),ve=e("p",{class:"text-xs leading-relaxed text-grey-500"}," PrettyLitter helps monitor your cat's health by detecting abnormalities in urine acidity, alkalinity, and the visible presence of blood. It cannot detect every feline health issue or prevent or diagnose diseases. A diagnosis can only come from a licensed veterinarian. ",-1),A=50,_e={__name:"ColorChangeCarousel",props:{showCarouselControls:{type:Boolean,default:!1},preTitle:{type:String,default:null},preTitleClass:{type:String,default:"text-xs tracking-widest text-[#B38D4F] font-sansbold uppercase mb-4 block"},title:{type:String,default:null},titleClass:{type:String,default:"font-sanssemibold text-2xl md:text-3xl xl:text-[44px] !leading-tight text-midnight mb-6"},body:{type:String,default:null},bodyClass:{type:String,default:"text-base text-grey-800 space-y-4 mb-8"},colorsOrder:{type:Array,default:()=>["green","blue","orange","red"]},showVeterinarianNote:{type:Boolean,default:!1},cardTitleClass:{type:String,default:"font-sanssemibold text-xl text-midnight mb-2"},cardDescriptionClass:{type:String,default:"text-sm text-grey-700 leading-relaxed"},cardAccentClass:{type:String,default:"text-accent"}},setup(o){const p=o,T=N().public,a=_(0),h=F(()=>{const l=T.store||"us",s=L[l]||L.us,n={green:{color:"green",imgAlt:"Olive green PrettyLitter crystals",title:`${s.typical.color} <span class="${p.cardAccentClass}">=</span> Typical`,ariaLabel:`${s.typical.color}: Typical`,description:s.typical.body,badgeClass:"bg-[#7AAD78]"},blue:{color:"blue",imgAlt:"Blue PrettyLitter crystals",title:`${s.alkalinity.color} <span class="${p.cardAccentClass}">=</span> Alkalinity`,ariaLabel:`${s.alkalinity.color}: Alkalinity`,description:s.alkalinity.body,badgeClass:"bg-[#4B80BD]"},orange:{color:"orange",imgAlt:"Orange PrettyLitter crystals",title:`${s.acidity.color} <span class="${p.cardAccentClass}">=</span> Acidity`,ariaLabel:`${s.acidity.color}: Acidity`,description:s.acidity.body,badgeClass:"bg-[#CE8C33]"},red:{color:"red",imgAlt:"Red PrettyLitter crystals",title:`${s.blood.color} <span class="${p.cardAccentClass}">=</span> Blood`,ariaLabel:`${s.blood.color}: Blood`,description:s.blood.body,badgeClass:"bg-[#D85067]"}};return p.colorsOrder.map(t=>

1n[t]).filter(Boolean)}),$=[{left:0,rotate:0,scale:1,z:40},{left:160,rotate:6,scale:.86,z:30},{left:240,rotate:10,scale:.78,z:20},{left:300,rotate:14,scale:.71,z:10}],S=l=>{const s=(l-a.value+h.value.length)%h.value.length,{left:n,rotate:t,scale:r,z:b}=$[s];return{left:`${n}px`,transform:t===0?"none":`rotate(${t}deg) scale(${r})`,transformOrigin:"top left",zIndex:b}},m=_(0),v=_(0),B=l=>{m.value=l.touches[0].clientX,v.value=m.value},H=l=>{v.value=l.touches[0].clientX},D=()=>{const l=m.value-v.value;l>A&&a.value<h.value.length-1?a.value++:l<-A&&a.value>0&&a.value--},y=l=>{a.value=l},z=(l,s)=>{const n=h.value.length;let t=s;l.key==="ArrowRight"||l.key==="ArrowDown"?(l.preventDefault(),t=(s+1)%n):l.key==="ArrowLeft"||l.key==="ArrowUp"?(l.preventDefault(),t=(s-1+n)%n):l.key==="Home"?(l.preventDefault(),t=0):l.key==="End"&&(l.preventDefault(),t=n-1),t!==s&&y(t)};return(l,s)=>{const n=M;return c(),d("div",E,[e("div",null,[o.preTitle?(c(),d("span",{key:0,class:u(o.preTitleClass),innerHTML:o.preTitle},null,10,O)):g("",!0),o.title?(c(),d("h2",{key:1,class:u(o.titleClass),innerHTML:o.title},null,10,P)):g("",!0),l.$slots.default||o.body?(c(),d("div",{key:2,class:u(o.bodyClass)},[j(l.$slots,"default",{},()=>[o.body?(c(),d("p",{key:0,innerHTML:o.body},null,8,V)):g("",!0)])],2)):g("",!0),e("div",{class:u(["flex items-center justify-center md:justify-start gap-4",o.showVeterinarianNote?"mb-8":""])},[(c(!0),d(x,null,w(i(h),(t,r)=>(c(),d("button",{key:r,onClick:b=>y(r),onKeydown:b=>z(b,r),class:u(["rounded-full overflow-hidden flex-shrink-0 transition-all duration-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-800 focus-visible:ring-offset-2",i(a)===r?"w-14 h-14 ring-4 ring-midnight ring-offset-1 shadow-md":"w-12 h-12 opacity-70 hover:opacity-90"]),"aria-label":t.ariaLabel+(i(a)===r?" (selected)":""),"aria-pressed":i(a)===r},[f(n,{src:`components/color_change_close_up_${t.color}`,alt:"",width:"100",height:"100",cropMode:"c_fill,g_center",class:"w-full h-full object-cover"},null,8,["src"])],42,X))),128))],2),o.showVeterinarianNote?(c(),d("div",I,[e("div",R,[f(n,{src:"icons/icon_stethoscope_primary",fetchFormat:"f_svg",class:"w-6 h-6"}),K]),W])):g("",!0)]),e("div",null,[e("div",G,[e("div",U,[(c(!0),d(x,null,w(i(h),(t,r)=>(c(),d("div",{key:r,class:"absolute top-0 left-0 w-80 lg:w-96 rounded-xl overflow-hidden shadow-xl cursor-pointer select-none transition-all duration-500 ease-out",style:C(S(r)),"aria-hidden":i(a)!==r?"true":void 0,onClick:b=>y(r)},[e("div",q,[f(n,{src:`components/color_change_close_up_${t.color}`,alt:t.imgAlt,class:"w-full h-full object-cover"},null,8,["src","alt"]),e("div",J,[f(n,{src:`components/color_change_bowl_${t.color}`,alt:"",fetchFormat:"f_png",class:"w-full h-auto"},null,8,["src"])]),e("div",{class:u(["absolute bottom-0 left-6 w-20 h-20 rounded-full flex items-center justify-center shadow-md z-20 translate-y-[60%]",t.badgeClass])},[f(n,{src:"logos/prettylitter_acid_cat_w",alt:"",fetchFormat:"f_svg",class:"w-10 h-10"})],2)]),e("div",Q,[e("h3",{class:u(o.cardTitleClass),innerHTML:t.title},null,10,Z),e("p",{class:u(o.cardDescriptionClass)},k(t.description),3)])],12,Y))),128))])]),e("div",{class:"md:hidden overflow-x-clip w-full",onTouchstart:B,onTouchmove:H,onTouchend:D},[e("div",{class:"flex transition-transform duration-300 ease-in-out",style:C({transform:`translateX(-${i(a)*100}%)`})},[(c(!0),d(x,null,w(i(h),(t,r)=>(c(),d("div",{key:r,class:"w-full flex-shrink-0 px-3 py-3","aria-hidden":i(a)!==r?"true":void 0},[e("div",te,[e("div",le,[f(n,{src:`components/color_change_close_up_${t.color}`,alt:t.imgAlt,class:"w-full h-full object-cover"},null,8,["src","alt"]),e("div",se,[f(n,{src:`components/color_change_bowl_${t.color}`,alt:"",fetchFormat:"f_png",class:"w-full h-auto"},null,8,["src"])]),e("div",{class:u(["absolute bottom-0 left-6 w-16 h-16 rounded-full flex items-center justify-center shadow-md z-20 translate-y-[75%]",t.badgeClass])},[f(n,{src:"logos/prettylitter_acid_cat_w",alt:"",fetchFormat:"f_svg",class:"w-8 h-8"})],2)]),e("div",oe,[e("h3",{class:u(o.cardTitleClass),innerHTML:t.title},null,10,ae),e("p",{class:u(o.cardDescriptionClass)}

1,k(t.description),3)])])],8,ee))),128))],4)],32),o.showCarouselControls?(c(),d("div",ne,[e("div",{class:"relative flex-1 h-1",role:"progressbar","aria-valuenow":i(a)+1,"aria-valuemin":"1","aria-valuemax":i(h).length,"aria-label":"Litter colour meanings"},[re,e("div",{class:"absolute top-0 left-0 h-1 rounded-full bg-gradient-to-r from-[#deb060] to-[#f393f9] transition-all duration-500",style:C({width:`${(i(a)+1)/i(h).length*100}%`})},null,4)],8,ie),e("div",ce,[e("button",{onClick:s[0]||(s[0]=t=>y(i(a)-1)),disabled:i(a)===0,class:"w-[50px] h-[50px] rounded-full bg-cobalt-500 flex items-center justify-center disabled:opacity-50 transition-opacity","aria-label":"Previous colour"},he,8,de),e("button",{onClick:s[1]||(s[1]=t=>y(i(a)+1)),disabled:i(a)>=i(h).length-1,class:"w-[50px] h-[50px] rounded-full bg-cobalt-500 flex items-center justify-center disabled:opacity-50 transition-opacity","aria-label":"Next colour"},pe,8,fe)])])):g("",!0),o.showVeterinarianNote?(c(),d("div",ye,[e("div",be,[f(n,{src:"icons/icon_stethoscope_primary",fetchFormat:"f_svg",class:"w-6 h-6"}),me]),ve])):g("",!0)])])}}},Le=_e;export{Le as _};