@dropins/storefront-pdp 1.1.0 → 1.1.1-beta1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/chunks/Zoom.js CHANGED
@@ -1,3 +1,3 @@
1
1
  /*! Copyright 2025 Adobe
2
2
  All Rights Reserved. */
3
- import{jsxs as H,jsx as L,Fragment as _e}from"@dropins/tools/preact-jsx-runtime.js";import*as J from"@dropins/tools/preact-compat.js";import{useState as k,Children as z,useRef as ae,useMemo as ve,useEffect as B,useCallback as I}from"@dropins/tools/preact-compat.js";import{debounce as be,classes as M}from"@dropins/tools/lib.js";import{Button as he,Icon as Ne}from"@dropins/tools/components.js";/* empty css */import{useText as S}from"@dropins/tools/i18n.js";import{cloneElement as Ee}from"@dropins/tools/preact.js";const We=i=>J.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...i},J.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),Le=i=>J.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...i},J.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),J.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),ke=24,ye=16,Y=2,De="32";var Ce=(i=>(i[i.small=16]="small",i[i.medium=24]="medium",i[i.large=64]="large",i))(Ce||{});const He=({show:i=1,scrollbar:p=!1,peak:b=!1,arrows:m=!1,controls:l="dots",arrowsOnMainImage:W=!1,loop:n=!1,gap:C=null,direction:P="horizontal",width:N="100%",height:O="100%",defaultIndex:D=0,className:ce,children:E,thumbnails:Z=null,isZoomed:Q,...G})=>{const ee=S("PDP.Carousel.label").label,te=S("PDP.Carousel.Slide.label").label,re=S("PDP.Carousel.Previous.label").label,oe=S("PDP.Carousel.Next.label").label,ie=S("PDP.Carousel.Controls.label").label,se=S("PDP.Carousel.Controls.Button.label").label,[d,ue]=k(()=>we(i)),r=Math.ceil(z.count(E)/d),h=b?ke:0,y=C?Ce[C]:0,x=z.count(E)%d,[a,j]=k(n?w()?D-1:D+1:D),A=ae([]),[R,X]=k(0),[F,Me]=k(0),fe=ve(()=>z.toArray(Z),[Z]),g=ve(()=>{const e=z.toArray(E).reduce((t,s,o)=>o%d===0?[...t,[s]]:[...t.slice(0,-1),[...t[t.length-1],s]],[]);return!n||e.length===1?e:n&&z.count(E)%d===0?[e[r-1]].concat(e).concat([e[0],e[1]]):[z.toArray(E).slice(-d)].concat(e).concat([e[0],e[1]])},[E,d,r,n]),K=ae(null),pe=ae(null),_=l==="thumbnailsRow"||l==="thumbnailsColumn";B(()=>{const e=K.current;if(!e)return;const t=be(()=>{X(e.offsetWidth??0),Me(e.offsetHeight??0);const o=window.innerWidth,u=we(i,o);u!==d&&ue(u)},50),s=new ResizeObserver(t);return s.observe(e),()=>{s.unobserve(e)}},[d,i]);const q=I(e=>{const t=n?e-1:e,s=A==null?void 0:A.current[0],o=(s==null?void 0:s.offsetWidth)+ye,u=(s==null?void 0:s.offsetHeight)+ye,c=pe.current,T=l==="thumbnailsRow",le=l==="thumbnailsColumn",$=T?c==null?void 0:c.offsetWidth:c==null?void 0:c.offsetHeight,f=T?o:u;(T||le)&&$&&(f*(t+1)>$&&(c.style.scrollBehavior="smooth",T?c.scrollLeft=w()?c.scrollWidth-c.clientWidth-(t+Y)*f:(t+Y)*f:c.scrollTop=(t+Y)*f),(w()&&(T?c.scrollLeft:c.scrollTop)<=-f*t||!w()&&(T?c.scrollLeft:c.scrollTop)>f*t)&&(c.style.scrollBehavior="smooth",T?c.scrollLeft=w()?-(t-Y)*f:(t-Y)*f:c.scrollTop=(t-Y)*f))},[l,n]);B(()=>{q(a)},[a,q]);const v=I((e,t,s)=>{_&&q(e);const o=K.current,u=h?o.offsetWidth-h:o.offsetWidth-h+y;if(!Array.from(o.querySelectorAll("[data-index]")).filter($=>{const f=Number($.getAttribute("data-index"));return!isNaN(f)&&f>-1})[e])return;if(s){const $=e===0?r:0,f=u*(r+(x||d)/d);if(w()){if(o.scrollLeft<=0&&o.scrollLeft>-(u-5)){v(1,!0);return}if(o.scrollLeft<u-f&&o.scrollLeft>=-f){v(r,!0);return}o.style.scrollBehavior="auto",o.scrollLeft=$===0?0:-f,v($===0?1:r,!0)}else{if(o.scrollLeft>=0&&o.scrollLeft<u-5){v(1,!0);return}if(o.scrollLeft>f-u&&o.scrollLeft<=f){v(r,!0);return}o.style.scrollBehavior="auto",o.scrollLeft=$===0?0:f,v($===0?1:r,!0);return}}const le=(o.offsetWidth-y)/d*g[e].length-h;o.style.scrollBehavior=t?"smooth":"auto",o.scrollLeft=w()?-(g[e].length===d?u*e:u*(e-1)-le):g[e].length===d?u*e:u*(e-1)+le},[y,r,h,d,x,g,q,l]),U=I(()=>{if(n){const t=a-1;v(t,!0,w()?a===r-1:a===1);return}const e=a<=0?0:a-1;v(e,!0)},[a,v,n]),V=I(()=>{const e=g.length-1;if(n){const s=a+1;v(s,!0,w()?a===0:a===r);return}const t=a>=e?e:a+1;v(t,!0)},[g.length,n,a,v,r]);B(()=>{const e=t=>{t.key==="ArrowLeft"&&(t.preventDefault(),w()?V():U()),t.key==="ArrowRight"&&(t.preventDefault(),w()?U():V())};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[V,U]),B(()=>{v(n?D+1:D,!1)},[D,v,n]);const de=be(()=>{const e=K.current,t=h?e.offsetWidth-h:e.offsetWidth-h+y,s=Math.abs(e.scrollLeft)/t,o=Math.abs(Math.round(s)-s<1?Math.round(s):Math.ceil(s));if(_&&q(o),n){const u=t*(r+(x||d)/d),c=w()?-e.scrollLeft:e.scrollLeft;if(Math.ceil(Math.abs(c))>=Math.ceil(u)-5){e.style.scrollBehavior="auto",e.scrollLeft=w()?-e.offsetWidth+(Math.ceil(c)-Math.ceil(u)-h):e.offsetWidth+(Math.ceil(c)-Math.ceil(u)-h);return}if(Math.abs(c)===0){e.style.scrollBehavior="auto",e.scrollLeft=w()?-(u-e.offsetWidth+h):u-e.offsetWidth+h;return}}a!==o&&j(o)},100);B(()=>{const e=K.current;return e==null||e.addEventListener("scroll",de),()=>{e==null||e.removeEventListener("scroll",de)}},[de]);const ne=(e,t,s)=>L(he,{className:M([["pdp-carousel__button",!e],[`pdp-carousel__button--${t}`,!e],[`pdp-carousel__button--${l}`,e]]),style:{"--height":`${F}px`},variant:"tertiary","aria-label":t==="next"?oe:re,onClick:s,disabled:n?!1:t==="next"?a>=g.length-1:a<1,children:L(Ne,{className:M([["pdp-carousel__button__icon",!e],[`pdp-carousel__button__icon--${t}`,!e],[`pdp-carousel__button__icon--${l}--${t}`,e]]),size:De,source:We})}),me=m&&g.length!=1&&ne(_,"prev",U),ge=m&&g.length!=1&&ne(_,"next",V),Pe=m&&g.length!=1&&ne(!1,"prev",U),xe=m&&g.length!=1&&ne(!1,"next",V);return H("div",{role:"region","aria-roledescription":ee,className:M(["pdp-carousel",["pdp-carousel--main-image-controls",W],["pdp-carousel--arrows",m&&!_],[`pdp-carousel--${l}`,_],ce]),style:{"--flex-carousel":l==="thumbnailsColumn"?"row-reverse":"column","--gap":_?"0":"var(--spacing-small)","--width":N},...G,children:[L("div",{ref:K,className:M(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${P}`,["pdp-carousel__wrapper--scrollbar",p],["pdp-carousel__wrapper--peak",b]]),style:{"--total-width":l==="thumbnailsColumn"?"81.6%":"100%","--height":l==="thumbnailsColumn"?"auto":O,"--gap":C?`var(--spacing-${C})`:"0px","--per-page":d},tabIndex:0,children:g.map((e,t)=>{const s=e.length<d;return L("div",{role:"group","aria-roledescription":te,"data-index":t,className:M(["pdp-carousel__slide",`pdp-carousel__slide--${P}`,["pdp-carousel__slide--active",a===t],["pdp-carousel__slide--orphan",s]]),style:{"--length":e.length},children:e},t)})}),!_&&H(_e,{children:[me,ge]}),_&&W&&H(_e,{children:[Pe,xe]}),l&&g.length!=1&&H("div",{className:M([[`pdp-carousel__controls__container--${l}`,_],["pdp-carousel__controls__container--no-arrows",!m||W]]),style:{"--width":l==="thumbnailsRow"?`${R}px`:N,"--height":`${F}px`,"--nr-thumbnails":fe.length},children:[(_||Q)&&!W&&me,L("div",{ref:pe,className:M([[`pdp-carousel__controls__wrapper--${l}`,_],["pdp-carousel__controls__wrapper",_]]),children:L("div",{role:"group","aria-label":ie,className:M(["pdp-carousel__controls",[`pdp-carousel__controls--${l}`,_]]),children:(n?g.slice(0,r):g).map((e,t)=>{const s=n?r:g.length,o=n?a-1===t:a===t;return _?H("label",{className:M(["pdp-carousel__thumbnail__container"]),ref:u=>{u&&(A.current[t]=u)},children:[L("input",{type:"radio",name:"carousel-thumbnails","aria-label":se.replace("{key}",String(t+1)).replace("{total}",String(s)),checked:o&&R!==0,onChange:()=>{v(n?t+1:t,!0)},...G,className:M(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",o&&R!==0]])}),L("span",{className:M(["pdp-carousel__thumbnail__span"]),children:fe[t]})]},t):L("button",{"aria-label":se.replace("{key}",String(t+1)).replace("{total}",String(s)),onClick:()=>{v(n?t+1:t,!0)},className:M(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",o]])},t)})})}),(_||Q)&&!W&&ge]})]})};function we(i,p=0){if(typeof i=="number")return i;const{small:b,medium:m,large:l}=i,n=[{breakpoint:1024,value:l},{breakpoint:786,value:m},{breakpoint:0,value:b}].find(({breakpoint:C})=>p>C);return n?n.value:b}function w(){return document.documentElement.dir==="rtl"}const Xe=({centered:i,onClose:p,className:b,children:m,...l})=>{const W=S("PDP.Overlay.Close.label").label,n=ae(null),C=I(()=>{p==null||p()},[p]);return B(()=>{const P=N=>{N.key==="Escape"&&C()};return document.addEventListener("keydown",P),()=>{document.removeEventListener("keydown",P)}},[C]),B(()=>{const P=n.current;P==null||P.focus();const N=document.scrollingElement,O=N.style.overflow;return N.style.overflow="hidden",()=>{N.style.overflow=O}},[]),H("div",{...l,className:M(["pdp-overlay",["pdp-overlay--centered",i],b]),ref:n,role:"dialog","aria-describedby":"overlay-content",tabindex:0,children:[L("div",{className:"pdp-overlay__content",id:"overlay-content",children:m}),L(he,{"aria-label":W,variant:"tertiary",className:"pdp-overlay__close-button",onClick:C,icon:L(Le,{})})]})},Ye=({children:i,scale:p=2,closeButton:b=!0})=>{const[m,l]=k(!1),[W,n]=k("pdp-zoom"),[C,P]=k(!1),[N,O]=k({x:0,y:0}),[D,ce]=k({x:0,y:0}),[E,Z]=k({x:0,y:0}),Q=r=>{!m||r.type!=="touchstart"||(O({x:r.touches[0].clientX,y:r.touches[0].clientY}),ce({x:E.x,y:E.y}),P(!0))},G=r=>{var F;if(!C||r.type!=="touchmove")return;const h=(F=r.currentTarget)==null?void 0:F.getBoundingClientRect(),y=(100-100/p)/2,x=r.touches[0].clientX-N.x,a=r.touches[0].clientY-N.y,j=x*100/(h.width*p),A=a*100/(h.height*p),R=D.x+j,X=D.y+A;Z({x:Math.max(-y,Math.min(R,y))||0,y:Math.max(-y,Math.min(X,y))||0}),r.preventDefault()},ee=r=>{var X;const h=(X=r.currentTarget)==null?void 0:X.getBoundingClientRect(),y=(100-100/p)/2;let x;if("touches"in r)x=r.touches[0];else if(r instanceof MouseEvent)x=r;else return;const a=(x.clientX-h.left)/h.width*100,j=(x.clientY-h.top)/h.height*100,A=(50-a)*(p-1)/p,R=(50-j)*(p-1)/p;Z({x:Math.max(-y,Math.min(A,y))||0,y:Math.max(-y,Math.min(R,y))||0})},te=r=>{if(!C){if(m){if(b&&"touches"in r){Q(r);return}b||l(!1)}else l(!0),ee(r);r.preventDefault()}},re=r=>{if(b&&"touches"in r){G(r);return}m&&ee(r)},oe=()=>{if(b){P(!1);return}l(!1)},ie=r=>{l(!1),r.stopPropagation()},se=m?`scale(${p}) translateX(${E.x}%) translateY(${E.y}%)`:"none",d=S("PDP.Zoom.Close.label").label,ue=Ee(z.only(i),{draggable:!1,style:{"--transform":se}});return B(()=>{n(m?`pdp-zoom ${b?"pdp-zoom--no-effects":"pdp-zoom--zoomed"}`:"pdp-zoom")},[m,b]),H("figure",{className:W,onClick:te,onMouseMove:re,onMouseLeave:oe,onTouchStart:te,onTouchMove:re,onTouchEnd:oe,children:[ue,b&&m&&L(he,{"aria-label":d,variant:"tertiary",className:"pdp-zoom__close-button",icon:L(Le,{}),onClick:ie})]})};export{He as C,Xe as O,Ye as Z};
3
+ import{jsxs as K,jsx as P,Fragment as be}from"@dropins/tools/preact-jsx-runtime.js";import*as ne from"@dropins/tools/preact-compat.js";import{useState as $,Children as F,useRef as V,useMemo as ve,useEffect as B,useCallback as oe}from"@dropins/tools/preact-compat.js";import{debounce as ye,classes as D}from"@dropins/tools/lib.js";import{Button as me,Icon as Ne}from"@dropins/tools/components.js";/* empty css */import{useText as R}from"@dropins/tools/i18n.js";import{cloneElement as Ee}from"@dropins/tools/preact.js";const De=a=>ne.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...a},ne.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),Ce=a=>ne.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...a},ne.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),ne.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),We=24,we=16,J=2,ke="32";var Me=(a=>(a[a.small=16]="small",a[a.medium=24]="medium",a[a.large=64]="large",a))(Me||{});const Be=({show:a=1,scrollbar:g=!1,peak:b=!1,arrows:u=!1,controls:n="dots",arrowsOnMainImage:T=!1,loop:s=!1,gap:v=null,direction:x="horizontal",width:W="100%",height:Q="100%",defaultIndex:X=0,className:ae,children:k,thumbnails:G=null,isZoomed:N,...q})=>{const z=R("PDP.Carousel.label").label,ie=R("PDP.Carousel.Slide.label").label,ue=R("PDP.Carousel.Previous.label").label,H=R("PDP.Carousel.Next.label").label,he=R("PDP.Carousel.Controls.label").label,le=R("PDP.Carousel.Controls.Button.label").label,[f,fe]=$(()=>Le(a)),_=Math.ceil(F.count(k)/f),C=b?We:0,U=v?Me[v]:0,O=F.count(k)%f,[h,de]=$(s?M()?X-1:X+1:X),t=V([]),[w,E]=$(0),[L,Z]=$(0),I=ve(()=>F.toArray(G),[G]),d=ve(()=>{const e=F.toArray(k).reduce((r,l,o)=>o%f===0?[...r,[l]]:[...r.slice(0,-1),[...r[r.length-1],l]],[]);return!s||e.length===1?e:s&&F.count(k)%f===0?[e[_-1]].concat(e).concat([e[0],e[1]]):[F.toArray(k).slice(-f)].concat(e).concat([e[0],e[1]])},[k,f,_,s]),Y=V(null),j=V(null),p=n==="thumbnailsRow"||n==="thumbnailsColumn";B(()=>{const e=Y.current;if(!e)return;const r=ye(()=>{E(e.offsetWidth??0),Z(e.offsetHeight??0);const o=window.innerWidth,i=Le(a,o);i!==f&&fe(i)},50),l=new ResizeObserver(r);return l.observe(e),()=>{l.unobserve(e)}},[f,a]);const ee=oe(e=>{const r=s?e-1:e,l=t==null?void 0:t.current[0],o=(l==null?void 0:l.offsetWidth)+we,i=(l==null?void 0:l.offsetHeight)+we,c=j.current,A=n==="thumbnailsRow",ce=n==="thumbnailsColumn",S=A?c==null?void 0:c.offsetWidth:c==null?void 0:c.offsetHeight,m=A?o:i;(A||ce)&&S&&(m*(r+1)>S&&(c.style.scrollBehavior="smooth",A?c.scrollLeft=M()?c.scrollWidth-c.clientWidth-(r+J)*m:(r+J)*m:c.scrollTop=(r+J)*m),(M()&&(A?c.scrollLeft:c.scrollTop)<=-m*r||!M()&&(A?c.scrollLeft:c.scrollTop)>m*r)&&(c.style.scrollBehavior="smooth",A?c.scrollLeft=M()?-(r-J)*m:(r-J)*m:c.scrollTop=(r-J)*m))},[n,s]);B(()=>{ee(h)},[h,ee]);const y=oe((e,r,l)=>{p&&ee(e);const o=Y.current,i=C?o.offsetWidth-C:o.offsetWidth-C+U;if(!Array.from(o.querySelectorAll("[data-index]")).filter(S=>{const m=Number(S.getAttribute("data-index"));return!isNaN(m)&&m>-1})[e])return;if(l){const S=e===0?_:0,m=i*(_+(O||f)/f);if(M()){if(o.scrollLeft<=0&&o.scrollLeft>-(i-5)){y(1,!0);return}if(o.scrollLeft<i-m&&o.scrollLeft>=-m){y(_,!0);return}o.style.scrollBehavior="auto",o.scrollLeft=S===0?0:-m,y(S===0?1:_,!0)}else{if(o.scrollLeft>=0&&o.scrollLeft<i-5){y(1,!0);return}if(o.scrollLeft>m-i&&o.scrollLeft<=m){y(_,!0);return}o.style.scrollBehavior="auto",o.scrollLeft=S===0?0:m,y(S===0?1:_,!0);return}}const ce=(o.offsetWidth-U)/f*d[e].length-C;o.style.scrollBehavior=r?"smooth":"auto",o.scrollLeft=M()?-(d[e].length===f?i*e:i*(e-1)-ce):d[e].length===f?i*e:i*(e-1)+ce},[U,_,C,f,O,d,ee,n]),te=oe(()=>{if(s){const r=h-1;y(r,!0,M()?h===_-1:h===1);return}const e=h<=0?0:h-1;y(e,!0)},[h,y,s]),re=oe(()=>{const e=d.length-1;if(s){const l=h+1;y(l,!0,M()?h===0:h===_);return}const r=h>=e?e:h+1;y(r,!0)},[d.length,s,h,y,_]);B(()=>{const e=r=>{r.key==="ArrowLeft"&&(r.preventDefault(),M()?re():te()),r.key==="ArrowRight"&&(r.preventDefault(),M()?te():re())};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[re,te]),B(()=>{y(s?X+1:X,!1)},[X,y,s]);const pe=ye(()=>{const e=Y.current,r=C?e.offsetWidth-C:e.offsetWidth-C+U,l=Math.abs(e.scrollLeft)/r,o=Math.abs(Math.round(l)-l<1?Math.round(l):Math.ceil(l));if(p&&ee(o),s){const i=r*(_+(O||f)/f),c=M()?-e.scrollLeft:e.scrollLeft;if(Math.ceil(Math.abs(c))>=Math.ceil(i)-5){e.style.scrollBehavior="auto",e.scrollLeft=M()?-e.offsetWidth+(Math.ceil(c)-Math.ceil(i)-C):e.offsetWidth+(Math.ceil(c)-Math.ceil(i)-C);return}if(Math.abs(c)===0){e.style.scrollBehavior="auto",e.scrollLeft=M()?-(i-e.offsetWidth+C):i-e.offsetWidth+C;return}}h!==o&&de(o)},100);B(()=>{const e=Y.current;return e==null||e.addEventListener("scroll",pe),()=>{e==null||e.removeEventListener("scroll",pe)}},[pe]);const se=(e,r,l)=>P(me,{className:D([["pdp-carousel__button",!e],[`pdp-carousel__button--${r}`,!e],[`pdp-carousel__button--${n}`,e]]),style:{"--height":`${L}px`},variant:"tertiary","aria-label":r==="next"?H:ue,onClick:l,disabled:s?!1:r==="next"?h>=d.length-1:h<1,children:P(Ne,{className:D([["pdp-carousel__button__icon",!e],[`pdp-carousel__button__icon--${r}`,!e],[`pdp-carousel__button__icon--${n}--${r}`,e]]),size:ke,source:De})}),ge=u&&d.length!=1&&se(p,"prev",te),_e=u&&d.length!=1&&se(p,"next",re),Pe=u&&d.length!=1&&se(!1,"prev",te),xe=u&&d.length!=1&&se(!1,"next",re);return K("div",{role:"region","aria-roledescription":z,className:D(["pdp-carousel",["pdp-carousel--main-image-controls",T],["pdp-carousel--arrows",u&&!p],[`pdp-carousel--${n}`,p],ae]),style:{"--flex-carousel":n==="thumbnailsColumn"?"row-reverse":"column","--gap":p?"0":"var(--spacing-small)","--width":W},...q,children:[P("div",{ref:Y,className:D(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${x}`,["pdp-carousel__wrapper--scrollbar",g],["pdp-carousel__wrapper--peak",b]]),style:{"--total-width":n==="thumbnailsColumn"?"81.6%":"100%","--height":n==="thumbnailsColumn"?"auto":Q,"--gap":v?`var(--spacing-${v})`:"0px","--per-page":f},tabIndex:0,children:d.map((e,r)=>{const l=e.length<f;return P("div",{role:"group","aria-roledescription":ie,"data-index":r,className:D(["pdp-carousel__slide",`pdp-carousel__slide--${x}`,["pdp-carousel__slide--active",h===r],["pdp-carousel__slide--orphan",l]]),style:{"--length":e.length},children:e},r)})}),!p&&K(be,{children:[ge,_e]}),p&&T&&K(be,{children:[Pe,xe]}),n&&d.length!=1&&K("div",{className:D([[`pdp-carousel__controls__container--${n}`,p],["pdp-carousel__controls__container--no-arrows",!u||T]]),style:{"--width":n==="thumbnailsRow"?`${w}px`:W,"--height":`${L}px`,"--nr-thumbnails":I.length},children:[(p||N)&&!T&&ge,P("div",{ref:j,className:D([[`pdp-carousel__controls__wrapper--${n}`,p],["pdp-carousel__controls__wrapper",p]]),children:P("div",{role:"group","aria-label":he,className:D(["pdp-carousel__controls",[`pdp-carousel__controls--${n}`,p]]),children:(s?d.slice(0,_):d).map((e,r)=>{const l=s?_:d.length,o=s?h-1===r:h===r;return p?K("label",{className:D(["pdp-carousel__thumbnail__container"]),ref:i=>{i&&(t.current[r]=i)},children:[P("input",{type:"radio",name:"carousel-thumbnails","aria-label":le.replace("{key}",String(r+1)).replace("{total}",String(l)),checked:o&&w!==0,onChange:()=>{y(s?r+1:r,!0)},...q,className:D(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",o&&w!==0]])}),P("span",{className:D(["pdp-carousel__thumbnail__span"]),children:I[r]})]},r):P("button",{"aria-label":le.replace("{key}",String(r+1)).replace("{total}",String(l)),onClick:()=>{y(s?r+1:r,!0)},className:D(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",o]])},r)})})}),(p||N)&&!T&&_e]})]})};function Le(a,g=0){if(typeof a=="number")return a;const{small:b,medium:u,large:n}=a,s=[{breakpoint:1024,value:n},{breakpoint:786,value:u},{breakpoint:0,value:b}].find(({breakpoint:v})=>g>v);return s?s.value:b}function M(){return document.documentElement.dir==="rtl"}const ze=({centered:a,onClose:g,className:b,children:u,...n})=>{const T=R("PDP.Overlay.Close.label").label,s=V(null),v=oe(()=>{g==null||g()},[g]);return B(()=>{const x=W=>{W.key==="Escape"&&v()};return document.addEventListener("keydown",x),()=>{document.removeEventListener("keydown",x)}},[v]),B(()=>{const x=s.current;x==null||x.focus();const W=document.scrollingElement,Q=W.style.overflow;return W.style.overflow="hidden",()=>{W.style.overflow=Q}},[]),K("div",{...n,className:D(["pdp-overlay",["pdp-overlay--centered",a],b]),ref:s,role:"dialog","aria-describedby":"overlay-content",tabindex:0,children:[P("div",{className:"pdp-overlay__content",id:"overlay-content",children:u}),P(me,{"aria-label":T,variant:"tertiary",className:"pdp-overlay__close-button",onClick:v,icon:P(Ce,{})})]})},He=({children:a,scale:g=2,closeButton:b=!0})=>{const[u,n]=$(!1),[T,s]=$("pdp-zoom"),[v,x]=$(!1),[W,Q]=$({x:0,y:0}),[X,ae]=$({x:0,y:0}),[k,G]=$({x:0,y:0}),N=V(null),q=V(!1),z=V(null),ie=t=>{!u||t.type!=="touchstart"||(Q({x:t.touches[0].clientX,y:t.touches[0].clientY}),ae({x:k.x,y:k.y}),x(!0))},ue=t=>{var p;if(!v||t.type!=="touchmove")return;const w=(p=t.currentTarget)==null?void 0:p.getBoundingClientRect(),E=(100-100/g)/2,L=t.touches[0].clientX-W.x,Z=t.touches[0].clientY-W.y,I=L*100/(w.width*g),d=Z*100/(w.height*g),Y=X.x+I,j=X.y+d;G({x:Math.max(-E,Math.min(Y,E))||0,y:Math.max(-E,Math.min(j,E))||0}),t.preventDefault()},H=t=>{var j;const w=(j=t.currentTarget)==null?void 0:j.getBoundingClientRect(),E=(100-100/g)/2;let L=null;if("touches"in t)if(t.touches.length>0)L=t.touches[0],z.current={clientX:L.clientX,clientY:L.clientY};else if(t.type==="touchend"&&N.current)L={clientX:N.current.x,clientY:N.current.y};else if(z.current)L=z.current;else return;else if(t instanceof MouseEvent)L=t;else return;const Z=(L.clientX-w.left)/w.width*100,I=(L.clientY-w.top)/w.height*100,d=(50-Z)*(g-1)/g,Y=(50-I)*(g-1)/g;G({x:Math.max(-E,Math.min(d,E))||0,y:Math.max(-E,Math.min(Y,E))||0})},he=t=>{if(b)N.current={x:t.touches[0].clientX,y:t.touches[0].clientY,time:Date.now()},z.current={clientX:t.touches[0].clientX,clientY:t.touches[0].clientY},q.current=!1,u&&ie(t);else{if(v)return;!u&&H(t),n(!u),t.preventDefault()}},le=t=>{if(t.touches.length!==0){if(z.current={clientX:t.touches[0].clientX,clientY:t.touches[0].clientY},b){if(!N.current)return;if(v){ue(t);return}const w=t.touches[0].clientX,E=t.touches[0].clientY,L=Math.abs(w-N.current.x),Z=Math.abs(E-N.current.y);(L>10||Z>10)&&(q.current=!0)}u&&H(t)}},f=t=>{if(b){if(!N.current)return;const w=Date.now()-N.current.time;!q.current&&w<300&&!v&&(n(!0),H(t),t.preventDefault()),x(!1),N.current=null}else n(!1)},fe=t=>{"touches"in t||v||(u?!b&&n(!1):(n(!0),H(t)),t.preventDefault())},_=t=>{"touches"in t||u&&H(t)},C=t=>{if(!("touches"in t)){if(b){x(!1);return}n(!1)}},U=t=>{n(!1),t.stopPropagation()},O=u?`scale(${g}) translateX(${k.x}%) translateY(${k.y}%)`:"none",h=R("PDP.Zoom.Close.label").label,de=Ee(F.only(a),{draggable:!1,style:{"--transform":O}});return B(()=>{s(u?`pdp-zoom ${b?"pdp-zoom--no-effects":"pdp-zoom--zoomed"}`:"pdp-zoom")},[u,b]),K("figure",{className:T,onClick:fe,onMouseMove:_,onMouseLeave:C,onTouchStart:he,onTouchMove:le,onTouchEnd:f,children:[de,b&&u&&P(me,{"aria-label":h,variant:"tertiary",className:"pdp-zoom__close-button",icon:P(Ce,{}),onClick:U})]})};export{Be as C,ze as O,He as Z};
@@ -1,3 +1,3 @@
1
1
  /*! Copyright 2025 Adobe
2
2
  All Rights Reserved. */
3
- import{events as o}from"@dropins/tools/event-bus.js";import"@dropins/tools/lib.js";const a=t=>{const s=e(),n=t(s);JSON.stringify(s)!==JSON.stringify(n)&&o.emit("pdp/values",{...n})},e=()=>{var t;return((t=o._lastEvent["pdp/values"])==null?void 0:t.payload)??null};export{e as g,a as s};
3
+ import{events as o}from"@dropins/tools/event-bus.js";import"@dropins/tools/lib.js";const u=t=>{const e=n(),s=t(e);o.emit("pdp/values",{...s})},n=()=>{var t;return((t=o._lastEvent["pdp/values"])==null?void 0:t.payload)??null};export{n as g,u as s};
@@ -43,4 +43,4 @@ ${ne}
43
43
  }
44
44
  }
45
45
  }
46
- `).join("")}function Ue(e,n=[],r){const i=Object.values(e).filter(s=>!!s).reduce((s,u)=>u.options?[...s,...u.options]:[...s],[]),t=new Map(n.map(s=>[s.id,s]));return i.forEach(s=>{r!=null&&r.includes(s.id)||t.set(s.id,s)}),[...t.values()]}function ve(e,n,r){const i=[];let t;return e.forEach(s=>{var u,a,o,m;r.includes(s.id)?t=((a=(u=s.values)==null?void 0:u.find(l=>n.includes(l==null?void 0:l.id)))==null?void 0:a.id)||((o=s.values[0])==null?void 0:o.id):t=(m=s.values[0])==null?void 0:m.id,i.push(t)}),i}const te=async(e,n)=>{const{anchors:r,optionsUIDs:i}=p.getConfig(),{optionsUIDs:t=i,anchors:s=r,preselectFirstOption:u,isBundle:a,skipTransform:o}=n??{};return!a&&t?await ke(e,t,s,o):await Se(e,{preselectFirstOption:u,optionsUIDs:t},o)},Ae=e=>{const n=Ie(),r=e(n);n!==r&&L.emit("pdp/valid",r)},Ie=()=>{var e;return((e=L._lastEvent["pdp/valid"])==null?void 0:e.payload)??null};export{Qe as a,He as b,p as c,Se as d,ke as e,se as f,Ke as g,te as h,K as i,Ae as j,Ie as k,$e as l,we as p,je as r,Le as s,X as t};
46
+ `).join("")}function Ue(e,n=[],r){const i=Object.values(e).filter(s=>!!s).reduce((s,u)=>u.options?[...s,...u.options]:[...s],[]),t=new Map(n.map(s=>[s.id,s]));return i.forEach(s=>{r!=null&&r.includes(s.id)||t.set(s.id,s)}),[...t.values()]}function ve(e,n,r){const i=[];let t;return e.forEach(s=>{var u,a,o,m;r.includes(s.id)?t=((a=(u=s.values)==null?void 0:u.find(l=>n.includes(l==null?void 0:l.id)))==null?void 0:a.id)||((o=s.values[0])==null?void 0:o.id):t=(m=s.values[0])==null?void 0:m.id,i.push(t)}),i}const te=async(e,n)=>{const{anchors:r,optionsUIDs:i}=p.getConfig(),{optionsUIDs:t=i,anchors:s=r,preselectFirstOption:u,isBundle:a,skipTransform:o}=n??{};return!a&&t?await ke(e,t,s,o):await Se(e,{preselectFirstOption:u,optionsUIDs:t},o)},Ae=e=>{const n=Ie(),r=e(n);L.emit("pdp/valid",r)},Ie=()=>{var e;return((e=L._lastEvent["pdp/valid"])==null?void 0:e.payload)??null};export{Qe as a,He as b,p as c,Se as d,ke as e,se as f,Ke as g,te as h,K as i,Ae as j,Ie as k,$e as l,we as p,je as r,Le as s,X as t};
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name": "@dropins/storefront-pdp", "version": "1.1.0", "@dropins/tools": "^0.42.0", "license": "SEE LICENSE IN LICENSE.md"}
1
+ {"name": "@dropins/storefront-pdp", "version": "1.1.1-beta1", "@dropins/tools": "^0.42.0", "license": "SEE LICENSE IN LICENSE.md"}