@dropins/storefront-pdp 1.0.2-alpha1 → 1.0.3

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.
Files changed (3) hide show
  1. package/chunks/Zoom.js +1 -1
  2. package/containers/ProductDetails.js +1 -1
  3. package/package.json +1 -1
package/chunks/Zoom.js CHANGED
@@ -1,3 +1,3 @@
1
1
  /*! Copyright 2025 Adobe
2
2
  All Rights Reserved. */
3
- import{jsxs as z,jsx as L,Fragment as _e}from"@dropins/tools/preact-jsx-runtime.js";import*as I from"@dropins/tools/preact-compat.js";import{useState as k,Children as R,useRef as le,useMemo as be,useEffect as B,useCallback as V}from"@dropins/tools/preact-compat.js";import{debounce as ve,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=>I.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...i},I.createElement("path",{d:"M7.74512 9.87701L12.0001 14.132L16.2551 9.87701",stroke:"currentColor",strokeWidth:1.5,strokeLinecap:"square",strokeLinejoin:"round"})),Le=i=>I.createElement("svg",{width:24,height:24,viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",...i},I.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 5.64001L5.62988 18.37",stroke:"currentColor"}),I.createElement("path",{vectorEffect:"non-scaling-stroke",d:"M18.3599 18.37L5.62988 5.64001",stroke:"currentColor"})),ke=24,ye=16,H=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:y=!1,peak:v=!1,arrows:p=!1,controls:l="dots",arrowsOnMainImage:W=!1,loop:n=!1,gap:C=null,direction:P="horizontal",width:N="100%",height:X="100%",defaultIndex:D=0,className:ae,children:E,thumbnails:Y=null,isZoomed:J,...Q})=>{const G=S("PDP.Carousel.label").label,ee=S("PDP.Carousel.Slide.label").label,te=S("PDP.Carousel.Previous.label").label,re=S("PDP.Carousel.Next.label").label,ce=S("PDP.Carousel.Controls.label").label,oe=S("PDP.Carousel.Controls.Button.label").label,[d,ie]=k(()=>we(i)),r=Math.ceil(R.count(E)/d),h=v?ke:0,m=C?Ce[C]:0,x=R.count(E)%d,[a,O]=k(n?w()?D-1:D+1:D),$=le([]),[Z,ue]=k(0),[j,Me]=k(0),fe=be(()=>R.toArray(Y),[Y]),g=be(()=>{const e=R.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&&R.count(E)%d===0?[e[r-1]].concat(e).concat([e[0],e[1]]):[R.toArray(E).slice(-d)].concat(e).concat([e[0],e[1]])},[E,d,r,n]),F=le(null),pe=le(null),_=l==="thumbnailsRow"||l==="thumbnailsColumn";B(()=>{const e=F.current;if(!e)return;const t=ve(()=>{ue(e.offsetWidth??0),Me(e.offsetHeight??0);const o=window.innerWidth,u=we(i,o);u!==d&&ie(u)},50),s=new ResizeObserver(t);return s.observe(e),()=>{s.unobserve(e)}},[d,i]);const K=V(e=>{const t=n?e-1:e,s=$==null?void 0:$.current[0],o=(s==null?void 0:s.offsetWidth)+ye,u=(s==null?void 0:s.offsetHeight)+ye,c=pe.current,T=l==="thumbnailsRow",ne=l==="thumbnailsColumn",A=T?c==null?void 0:c.offsetWidth:c==null?void 0:c.offsetHeight,f=T?o:u;(T||ne)&&A&&(f*(t+1)>A&&(c.style.scrollBehavior="smooth",T?c.scrollLeft=w()?c.scrollWidth-c.clientWidth-(t+H)*f:(t+H)*f:c.scrollTop=(t+H)*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-H)*f:(t-H)*f:c.scrollTop=(t-H)*f))},[l,n]);B(()=>{K(a)},[a,K]);const b=V((e,t,s)=>{_&&K(e);const o=F.current,u=h?o.offsetWidth-h:o.offsetWidth-h+m;if(!Array.from(o.querySelectorAll("[data-index]")).filter(A=>{const f=Number(A.getAttribute("data-index"));return!isNaN(f)&&f>-1})[e])return;if(s){const A=e===0?r:0,f=u*(r+(x||d)/d);if(w()){if(o.scrollLeft<=0&&o.scrollLeft>-(u-5)){b(1,!0);return}if(o.scrollLeft<u-f&&o.scrollLeft>=-f){b(r,!0);return}o.style.scrollBehavior="auto",o.scrollLeft=A===0?0:-f,b(A===0?1:r,!0)}else{if(o.scrollLeft>=0&&o.scrollLeft<u-5){b(1,!0);return}if(o.scrollLeft>f-u&&o.scrollLeft<=f){b(r,!0);return}o.style.scrollBehavior="auto",o.scrollLeft=A===0?0:f,b(A===0?1:r,!0);return}}const ne=(o.offsetWidth-m)/d*g[e].length-h;o.style.scrollBehavior=t?"smooth":"auto",o.scrollLeft=w()?-(g[e].length===d?u*e:u*(e-1)-ne):g[e].length===d?u*e:u*(e-1)+ne},[m,r,h,d,x,g,K,l]),q=V(()=>{if(n){const t=a-1;b(t,!0,w()?a===r-1:a===1);return}const e=a<=0?0:a-1;b(e,!0)},[a,b,n]),U=V(()=>{const e=g.length-1;if(n){const s=a+1;b(s,!0,w()?a===0:a===r);return}const t=a>=e?e:a+1;b(t,!0)},[g.length,n,a,b,r]);B(()=>{const e=t=>{t.key==="ArrowLeft"&&(t.preventDefault(),w()?U():q()),t.key==="ArrowRight"&&(t.preventDefault(),w()?q():U())};return window.addEventListener("keydown",e),()=>{window.removeEventListener("keydown",e)}},[U,q]),B(()=>{b(n?D+1:D,!1)},[D,b,n]);const de=ve(()=>{const e=F.current,t=h?e.offsetWidth-h:e.offsetWidth-h+m,s=Math.abs(e.scrollLeft)/t,o=Math.abs(Math.round(s)-s<1?Math.round(s):Math.ceil(s));if(_&&K(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&&O(o)},100);B(()=>{const e=F.current;return e==null||e.addEventListener("scroll",de),()=>{e==null||e.removeEventListener("scroll",de)}},[de]);const se=(e,t,s)=>L(he,{className:M([["pdp-carousel__button",!e],[`pdp-carousel__button--${t}`,!e],[`pdp-carousel__button--${l}`,e]]),style:{"--height":`${j}px`},variant:"tertiary","aria-label":t==="next"?re:te,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=p&&g.length!=1&&se(_,"prev",q),ge=p&&g.length!=1&&se(_,"next",U),Pe=p&&g.length!=1&&se(!1,"prev",q),xe=p&&g.length!=1&&se(!1,"next",U);return z("div",{role:"region","aria-roledescription":G,className:M(["pdp-carousel",["pdp-carousel--main-image-controls",W],["pdp-carousel--arrows",p&&!_],[`pdp-carousel--${l}`,_],ae]),style:{"--flex-carousel":l==="thumbnailsColumn"?"row-reverse":"column","--gap":_?"0":"var(--spacing-small)","--width":N},...Q,children:[L("div",{ref:F,className:M(["pdp-carousel__wrapper",`pdp-carousel__wrapper--${P}`,["pdp-carousel__wrapper--scrollbar",y],["pdp-carousel__wrapper--peak",v]]),style:{"--total-width":l==="thumbnailsColumn"?"81.6%":"100%","--height":l==="thumbnailsColumn"?"auto":X,"--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":ee,"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)})}),!_&&z(_e,{children:[me,ge]}),_&&W&&z(_e,{children:[Pe,xe]}),l&&g.length!=1&&z("div",{className:M([[`pdp-carousel__controls__container--${l}`,_],["pdp-carousel__controls__container--no-arrows",!p||W]]),style:{"--width":l==="thumbnailsRow"?`${Z}px`:N,"--height":`${j}px`,"--nr-thumbnails":fe.length},children:[(_||J)&&!W&&me,L("div",{ref:pe,className:M([[`pdp-carousel__controls__wrapper--${l}`,_],["pdp-carousel__controls__wrapper",_]]),children:L("div",{role:"group","aria-label":ce,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 _?z("label",{className:M(["pdp-carousel__thumbnail__container"]),ref:u=>{u&&($.current[t]=u)},children:[L("input",{type:"radio",name:"carousel-thumbnails","aria-label":oe.replace("{key}",String(t+1)).replace("{total}",String(s)),checked:o&&Z!==0,onChange:()=>{b(n?t+1:t,!0)},...Q,className:M(["pdp-carousel__thumbnail",["pdp-carousel__thumbnail--selected",o&&Z!==0]])}),L("span",{className:M(["pdp-carousel__thumbnail__span"]),children:fe[t]})]},t):L("button",{"aria-label":oe.replace("{key}",String(t+1)).replace("{total}",String(s)),onClick:()=>{b(n?t+1:t,!0)},className:M(["pdp-carousel__controls__button",["pdp-carousel__controls__button--active",o]])},t)})})}),(_||J)&&!W&&ge]})]})};function we(i,y=0){if(typeof i=="number")return i;const{small:v,medium:p,large:l}=i,n=[{breakpoint:1024,value:l},{breakpoint:786,value:p},{breakpoint:0,value:v}].find(({breakpoint:C})=>y>C);return n?n.value:v}function w(){return document.documentElement.dir==="rtl"}const Xe=({centered:i,onClose:y,className:v,children:p,...l})=>{const W=S("PDP.Overlay.Close.label").label,n=le(null),C=V(()=>{y==null||y()},[y]);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,X=N.style.overflow;return N.style.overflow="hidden",()=>{N.style.overflow=X}},[]),z("div",{...l,className:M(["pdp-overlay",["pdp-overlay--centered",i],v]),ref:n,role:"dialog","aria-describedby":"overlay-content",tabindex:0,children:[L("div",{className:"pdp-overlay__content",id:"overlay-content",children:p}),L(he,{"aria-label":W,variant:"tertiary",className:"pdp-overlay__close-button",onClick:C,icon:L(Le,{})})]})},Ye=({children:i,scale:y=2,closeButton:v=!0})=>{const[p,l]=k(!1),[W,n]=k("pdp-zoom"),[C,P]=k(!1),[N,X]=k({x:0,y:0}),[D,ae]=k({x:0,y:0}),[E,Y]=k({x:0,y:0}),J=r=>{!p||r.type!=="touchstart"||(X({x:r.touches[0].clientX,y:r.touches[0].clientY}),ae({x:E.x,y:E.y}),P(!0))},Q=r=>{var j;if(!C||r.type!=="touchmove")return;const h=(j=r.currentTarget)==null?void 0:j.getBoundingClientRect(),m=(100-100/y)/2,x=r.touches[0].clientX-N.x,a=r.touches[0].clientY-N.y,O=x*100/(h.width*y),$=a*100/(h.height*y),Z=D.x+O,ue=D.y+$;Y({x:Math.max(-m,Math.min(Z,m))||0,y:Math.max(-m,Math.min(ue,m))||0}),r.preventDefault()},G=r=>{var $;const h=($=r.currentTarget)==null?void 0:$.getBoundingClientRect(),m=(100-100/y)/2;let x;if("touches"in r)x=r.touches[0];else if(r instanceof MouseEvent)x=r;else return;const a=m-(x.clientX-h.left)/h.width*100,O=m-(x.clientY-h.top)/h.height*100;Y({x:Math.max(-m,Math.min(a,m))||0,y:Math.max(-m,Math.min(O,m))||0})},ee=r=>{if(!C){if(p){if(v&&"touches"in r){J(r);return}v||l(!1)}else l(!0),G(r);r.preventDefault()}},te=r=>{if(v&&"touches"in r){Q(r);return}p&&G(r)},re=()=>{if(v){P(!1);return}l(!1)},ce=r=>{l(!1),r.stopPropagation()},oe=p?`scale(${y}) translateX(${E.x}%) translateY(${E.y}%)`:"none",d=S("PDP.Zoom.Close.label").label,ie=Ee(R.only(i),{draggable:!1,style:{"--transform":oe}});return B(()=>{n(p?`pdp-zoom ${v?"pdp-zoom--no-effects":"pdp-zoom--zoomed"}`:"pdp-zoom")},[p,v]),z("figure",{className:W,onClick:ee,onMouseMove:te,onMouseLeave:re,onTouchStart:ee,onTouchMove:te,onTouchEnd:re,children:[ie,v&&p&&L(he,{"aria-label":d,variant:"tertiary",className:"pdp-zoom__close-button",icon:L(Le,{}),onClick:ce})]})};export{He as C,Xe as O,Ye as Z};
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};
package/containers/ProductDetails.js CHANGED
@@ -1,3 +1,3 @@
1
1
  /*! Copyright 2025 Adobe
2
2
  All Rights Reserved. */
3
- import{jsx as e,jsxs as V,Fragment as Nt}from"@dropins/tools/preact-jsx-runtime.js";import{useState as j,Children as ot,useEffect as f,useCallback as g,useMemo as vt}from"@dropins/tools/preact-compat.js";import{VComponent as o,classes as w,Slot as A,toLanguageTag as ut}from"@dropins/tools/lib.js";import{Incrementer as Ot,Breadcrumbs as ct,Button as bt,Icon as dt,Image as At}from"@dropins/tools/components.js";/* empty css */import{Z as It,C,O as Dt}from"../chunks/Zoom.js";import{useText as L}from"@dropins/tools/i18n.js";import{P as Pt}from"../chunks/PriceRange.js";import{S as wt}from"../chunks/Swatches.js";import"@dropins/tools/preact.js";import{c as yt,h as ht,p as Vt,l as kt,t as Bt}from"../chunks/isProductConfigurationValid.js";import{events as lt}from"@dropins/tools/event-bus.js";import{i as xt,t as Lt}from"../chunks/date.js";import"@dropins/tools/fetch-graphql.js";import"../chunks/getProductConfigurationValues.js";const Ut=({title:a,breadcrumbs:N,galleryContent:S,infoContent:v,productContent:O,sku:I,outOfStock:U,shortDescription:s,description:r,attributes:tt,images:c,options:h,price:u,specialPrice:Z,className:z,children:at,quantity:K,actions:M,carouselConfig:n,zoomType:J="overlay",closeButton:et=!0,...nt})=>{var H,F,E,m,$,q,W,X,Y;const rt=L("PDP.Product.RegularPrice.label").label,k=L("PDP.Product.SpecialPrice.label").label,pt=L("PDP.Product.OutOfStock.label").label,B=L("PDP.Product.Image.label").label,[G,t]=j(null),x=c!=null&&c.length?c.map((D,y)=>{var Q;const R=((Q=a==null?void 0:a.props)==null?void 0:Q.children)&&(B==null?void 0:B.replace("{product}",a.props.children.toString()).replace("{key}",String(y+1)).replace("{total}",String(c.length)));return J==="zoom"?e(It,{closeButton:et,children:e(o,{node:D,loading:y===0?"eager":"lazy",alt:R},y)}):e(o,{node:D,loading:y===0?"eager":"lazy",alt:R,onClick:()=>t(y)},y)}):e("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),P=(H=n==null?void 0:n.thumbnails)!=null&&H.length?n.thumbnails.map((D,y)=>{var R;return e(o,{node:D,loading:(n==null?void 0:n.thumbnailsLoadingMode)||"lazy",alt:((R=a==null?void 0:a.props)==null?void 0:R.children)&&(B==null?void 0:B.replace("{product}",a.props.children.toString()).replace("{key}",String(y+1)).replace("{total}",String(c.length)))},y)}):e("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return V("div",{...nt,className:w(["pdp-product",z]),children:[N&&e(o,{node:N,className:"pdp-product__breadcrumbs"}),V("div",{className:"pdp-product__column-container pdp-product__gallery-column",children:[e("div",{className:"pdp-product__column-body",children:(F=n==null?void 0:n.controls)!=null&&F.desktop?e(C,{className:"pdp-product__overlay__carousel",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?n.controls.desktop:"dots",arrowsOnMainImage:n==null?void 0:n.arrowsOnMainImage,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,peak:((E=n==null?void 0:n.thumbnails)==null?void 0:E.length)>1&&((m=n==null?void 0:n.peak)==null?void 0:m.desktop)||!1,gap:(n==null?void 0:n.gap)||null,width:"100%",height:"100%",defaultIndex:G||0,thumbnails:P,children:x}):e(st,{className:"pdp-product__images",gap:"small",children:x})}),S&&e(o,{node:S,className:"pdp-product__gallery-content"})]}),V("div",{className:"pdp-product__column-container pdp-product__content-column",children:[V("div",{className:"pdp-product__column-body",children:[V("div",{className:"pdp-product__header",children:[a&&e(o,{node:a,className:"pdp-product__title"}),I&&e(o,{node:I,className:"pdp-product__sku"})]}),V("div",{className:"pdp-product__prices",children:[Z&&e(o,{node:Z,className:w(["pdp-product__price-special","pdp-product__price"]),"aria-label":k,role:"text"}),u&&e(o,{node:u,className:w(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":rt,role:"text"})]}),($=n==null?void 0:n.controls)!=null&&$.mobile&&((q=n==null?void 0:n.controls)==null?void 0:q.mobile)==="thumbnailsRow"?e(C,{className:"pdp-product__images pdp-product__images--carousel pdp-product__images--carousel--thumbnails",width:"100%",height:"auto",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"thumbnailsRow":null,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,peak:((W=n==null?void 0:n.thumbnails)==null?void 0:W.length)>1&&((X=n==null?void 0:n.peak)==null?void 0:X.mobile)||!1,gap:(n==null?void 0:n.gap)||null,thumbnails:P,children:x}):e(C,{className:"pdp-product__images pdp-product__images--carousel",peak:((Y=n==null?void 0:n.peak)==null?void 0:Y.mobile)&&(c==null?void 0:c.length)>1,gap:(n==null?void 0:n.gap)||null,width:"100%",height:"auto",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"dots":null,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,children:x}),V("div",{className:w(["pdp-product__actions",["pdp-product__actions--out-of-stock",U]]),children:[U&&e("div",{className:"pdp-product__out-of-stock__text",children:pt}),h&&e(o,{node:h,className:w(["pdp-product__options"])}),K&&e("div",{className:"pdp-product__quantity",children:e(o,{node:K})}),M&&e(o,{node:M,className:w(["pdp-product__buttons"])})]}),s&&e(o,{node:s,className:w(["pdp-product__short_description"])}),r&&e(o,{node:r,className:w(["pdp-product__description"])}),tt?e("div",{className:"pdp-product__attributes",children:tt}):null]}),v&&e(o,{node:v,className:"pdp-product__info-content"})]}),O&&e(o,{node:O,className:"pdp-product__content"}),G===null?null:e(Dt,{className:"pdp-product__overlay",onClose:()=>t(null),centered:!0,children:e(C,{className:"pdp-product__overlay__carousel",arrows:(c==null?void 0:c.length)>1,width:"100%",height:"100%",defaultIndex:G||0,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"dots":null,isZoomed:!0,children:x})})]})},st=({children:a,gap:N=null,className:S,style:v,...O})=>{const I=ot.count(a);return e("div",{...O,className:w(["pdp-gallery-grid",S]),style:{"--gap":N?`var(--spacing-${N})`:"0px",...v},children:ot.map(a,(U,s)=>e("div",{className:"pdp-gallery-grid__item",children:e(o,{node:U,loading:s===0?"eager":"lazy"},U.props.src)},I+s))})},Mt=({sku:a,hideSku:N,hideQuantity:S,hideShortDescription:v,hideDescription:O,hideAttributes:I,hideURLParams:U,hideSelectedOptionValue:s,slots:r,children:tt,initialData:c,carousel:h,optionsConfig:u,useACDL:Z,onAddToCart:z,zoomType:at,closeButton:K=!0,disableDropdownPreselection:M,...n})=>{var Q,it,_t,mt;const J=L("PDP.Product.AddToCart.label").label,et=L("PDP.Product.Incrementer.label").label,nt=L("PDP.Product.Details.label").label,rt=L("PDP.Swatches.ChooseOption.label").label,[k,pt]=j(yt.getConfig().defaultLocale||"en-US"),[B,G]=j(),[t=null,x]=j(c),[P,H]=j(()=>{const p={sku:a,quantity:1};return t!=null&&t.optionUIDs&&(p.optionsUIDs=t.optionUIDs),p}),[F,E]=j(()=>{var p,d;return!(t!=null&&t.options&&((p=t==null?void 0:t.options)==null?void 0:p.length)>0&&((d=t==null?void 0:t.optionUIDs)==null?void 0:d.length)!==(t==null?void 0:t.options.length))}),m={data:t,values:P,valid:F};function $(p){return p==null?void 0:p.some(d=>(d==null?void 0:d.typename)==="ProductViewOptionValueProduct")}f(()=>{const p=lt.on("pdp/setValues",d=>{H(l=>({...l,...d}))});return()=>{p==null||p.off()}},[]),f(()=>{const p=lt.on("locale",d=>{d!==k&&(pt(d),ht(a,{preselectFirstOption:!M,anchors:u==null?void 0:u.anchorOptions}).then(x))});return()=>{p==null||p.off()}},[M,k,u==null?void 0:u.anchorOptions,a]),f(()=>{Z&&c&&Object.keys(c).length>0&&Vt(c)},[c]);const q=g(p=>{H(d=>({...d,...p}))},[]);f(()=>{lt.emit("pdp/values",P)},[JSON.stringify(P)]);const W=g(async p=>{var i,_;let d=Object.entries(p).filter(([b,T])=>T.label!==rt).map(([b,T])=>p[b].value).filter(b=>b!==void 0);!U&&(t!=null&&t.options)&&!$(t.options)&&kt({optionsUIDs:d.join(",")}),q({optionsUIDs:d}),E((d==null?void 0:d.length)===((i=t==null?void 0:t.options)==null?void 0:i.length));const l=await ht(a,{anchors:u==null?void 0:u.anchorOptions,isBundle:t==null?void 0:t.isBundle,optionsUIDs:d,preselectFirstOption:!M});x(l),(_=u==null?void 0:u.anchorOptions)!=null&&_.length&&X(l,d)},[a]),X=g((p,d)=>{var _;const l=(p==null?void 0:p.optionUIDs)??[];d.every(b=>l.includes(b))||(G(p==null?void 0:p.options),q({optionsUIDs:l}),E((l==null?void 0:l.length)===((_=p==null?void 0:p.options)==null?void 0:_.length)))},[a]),Y=g(p=>{Object.keys(p).length!==0&&E(!1)},[]),D=vt(()=>{var p;return(p=t==null?void 0:t.attributes)==null?void 0:p.map(({label:d,value:l},i)=>{const _=xt(l)?Lt(l,k):l.toString();return V("li",{children:[d,": ",e("span",{dangerouslySetInnerHTML:{__html:_}})]},i)})},[t==null?void 0:t.attributes,k]),y=!S&&(t!=null&&t.inStock)?e(A,{name:"Quantity",slot:r==null?void 0:r.Quantity,context:{...m},children:e(Ot,{name:"quantity",defaultValue:P.quantity.toString(),value:P.quantity.toString(),min:1,"aria-label":et,className:"pdp-product__quantity",onValue:p=>{q({quantity:Number(p)})}},"quantity")}):void 0,R=()=>{if(t!=null&&t.options)return e(A,{name:"Options",slot:r==null?void 0:r.Options,context:{...m},children:e(wt,{selectedUIDs:P.optionsUIDs,options:t.options,defaultOptions:P.optionsUIDs,selectionsToUpdate:B,hideSelectedValue:s,disablePreselections:M,onValues:W,onErrors:Y})})};return e("div",{...n,children:e(Ut,{title:e(A,{name:"Title",slot:r==null?void 0:r.Title,context:{...m},children:t==null?void 0:t.name}),sku:N?void 0:e(A,{name:"SKU",slot:r==null?void 0:r.SKU,context:{...m},children:t==null?void 0:t.sku}),options:R(),breadcrumbs:(r==null?void 0:r.Breadcrumbs)&&e(A,{name:"Breadcrumbs",slot:r==null?void 0:r.Breadcrumbs,context:{...m,setSeparator(p){this._registerMethod((...d)=>{const l=p(...d),i=l&&e(dt,{source:l});this._setProps(_=>({..._,separator:i,children:[e(ct,{separator:i,categories:_.categories})]}))})},appendLink(p){this._registerMethod((...d)=>{const{text:l,...i}=p(...d),_=e("a",{...i,children:l});this._setProps(b=>{const T=[...b.categories||[],_];return{...b,categories:T,children:[e(ct,{separator:b.separator,categories:T})]}})})},appendHTMLElement(p){this._registerMethod((...d)=>{const l=p(...d),i=this._htmlElementToVNode(l);this._setProps(_=>{const b=[..._.categories||[],i];return{..._,categories:b,children:[e(ct,{separator:_.separator,categories:b})]}})})}}}),quantity:y,actions:e(A,{name:"Actions",slot:r==null?void 0:r.Actions,context:{...m,appendButton(p){this._registerMethod((...d)=>{const l=p(...d);if(!l)return;const{text:i,icon:_,...b}=l,T=e(bt,{type:"button",...b,icon:_&&e(dt,{source:_}),children:i});this._setProps(St=>({children:[...St.children||[],T]}))})}},children:!(r!=null&&r.Actions)&&e(bt,{size:"medium",type:"submit",icon:e(dt,{source:"Cart"}),disabled:!(t!=null&&t.inStock)||!F,"aria-label":J,onClick:()=>z==null?void 0:z(P),children:J})}),shortDescription:v?void 0:e(A,{name:"ShortDescription",slot:r==null?void 0:r.ShortDescription,context:{...m},children:e("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.shortDescription)??""}})}),description:O?void 0:e(A,{name:"Description",slot:r==null?void 0:r.Description,context:{...m},children:e("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.description)??""}})}),images:((Q=t==null?void 0:t.images)==null?void 0:Q.map(({label:p,url:d})=>{var l,i;return e(At,{title:p,alt:p,src:d,width:((l=h==null?void 0:h.imageParams)==null?void 0:l.width)??960,height:((i=h==null?void 0:h.imageParams)==null?void 0:i.height)??1191,params:(h==null?void 0:h.imageParams)??{width:960}},d)}))??[],specialPrice:(it=t==null?void 0:t.prices)!=null&&it.visible?e(A,{name:"SpecialPrice",slot:r==null?void 0:r.SpecialPrice,context:{...m},children:e(Pt,{...t.prices.final,locale:ut(k)})}):void 0,price:(_t=t==null?void 0:t.prices)!=null&&_t.visible&&t.prices.regular&&t.prices.final.amount!==(t==null?void 0:t.prices.regular.amount)?e(A,{name:"RegularPrice",slot:r==null?void 0:r.RegularPrice,context:{...m},children:e(Pt,{...t.prices.regular,locale:ut(k)})}):void 0,zoomType:at,closeButton:K,carouselConfig:{...h,thumbnails:h&&Object.keys(h).length?((mt=t==null?void 0:t.images)==null?void 0:mt.map(({label:p,url:d})=>{var l,i;return e(At,{title:p,alt:p,src:d,width:((l=h==null?void 0:h.thumbnailParams)==null?void 0:l.width)??200,height:((i=h==null?void 0:h.thumbnailParams)==null?void 0:i.height)??248,params:(h==null?void 0:h.thumbnailParams)??{width:200}},d)}))??[]:[]},outOfStock:!(t!=null&&t.inStock),attributes:I?void 0:e(A,{name:"Attributes",slot:r==null?void 0:r.Attributes,context:{...m},children:D!=null&&D.length?V(Nt,{children:[nt,e("ul",{children:D})]}):null}),galleryContent:(r==null?void 0:r.GalleryContent)&&e(A,{name:"GalleryContent",slot:r.GalleryContent,context:{...m}}),infoContent:(r==null?void 0:r.InfoContent)&&e(A,{name:"InfoContent",slot:r.InfoContent,context:{...m}}),productContent:(r==null?void 0:r.Content)&&e(A,{name:"Content",slot:r.Content,context:{...m}})})})};Mt.getInitialData=async function({sku:a,disableDropdownPreselection:N=!1,optionsConfig:S}){var O,I;const v=(I=(O=yt.getConfig().models)==null?void 0:O.ProductDetails)==null?void 0:I.initialData;return v?Bt(v):ht(a,{preselectFirstOption:!N,anchors:S==null?void 0:S.anchorOptions})};export{Mt as ProductDetails,Mt as default};
3
+ import{jsx as e,jsxs as V,Fragment as Nt}from"@dropins/tools/preact-jsx-runtime.js";import{useState as z,Children as ot,useEffect as f,useCallback as g,useMemo as vt}from"@dropins/tools/preact-compat.js";import{VComponent as o,classes as s,Slot as A,toLanguageTag as ut}from"@dropins/tools/lib.js";import{Incrementer as Ot,Breadcrumbs as dt,Button as bt,Icon as lt,Image as At}from"@dropins/tools/components.js";/* empty css */import{Z as It,C,O as Dt}from"../chunks/Zoom.js";import{useText as B}from"@dropins/tools/i18n.js";import{P as Pt}from"../chunks/PriceRange.js";import{S as wt}from"../chunks/Swatches.js";import"@dropins/tools/preact.js";import{c as St,h as ht,p as st,l as Vt,t as kt}from"../chunks/isProductConfigurationValid.js";import{events as tt}from"@dropins/tools/event-bus.js";import{i as Ut,t as Bt}from"../chunks/date.js";import"@dropins/tools/fetch-graphql.js";import"../chunks/getProductConfigurationValues.js";const xt=({title:a,breadcrumbs:N,galleryContent:y,infoContent:v,productContent:O,sku:I,outOfStock:x,shortDescription:L,description:r,attributes:et,images:c,options:h,price:u,specialPrice:Z,className:G,children:it,quantity:K,actions:M,carouselConfig:n,zoomType:J="overlay",closeButton:nt=!0,...rt})=>{var q,F,E,m,$,j,W,X,Y;const pt=B("PDP.Product.RegularPrice.label").label,k=B("PDP.Product.SpecialPrice.label").label,ct=B("PDP.Product.OutOfStock.label").label,U=B("PDP.Product.Image.label").label,[H,t]=z(null),D=c!=null&&c.length?c.map((w,S)=>{var Q;const R=((Q=a==null?void 0:a.props)==null?void 0:Q.children)&&(U==null?void 0:U.replace("{product}",a.props.children.toString()).replace("{key}",String(S+1)).replace("{total}",String(c.length)));return J==="zoom"?e(It,{closeButton:nt,children:e(o,{node:w,loading:S===0?"eager":"lazy",alt:R},S)}):e(o,{node:w,loading:S===0?"eager":"lazy",alt:R,onClick:()=>t(S)},S)}):e("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0}),P=(q=n==null?void 0:n.thumbnails)!=null&&q.length?n.thumbnails.map((w,S)=>{var R;return e(o,{node:w,loading:(n==null?void 0:n.thumbnailsLoadingMode)||"lazy",alt:((R=a==null?void 0:a.props)==null?void 0:R.children)&&(U==null?void 0:U.replace("{product}",a.props.children.toString()).replace("{key}",String(S+1)).replace("{total}",String(c.length)))},S)}):e("img",{src:"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",className:"pdp-product__images__placeholder","aria-hidden":!0});return V("div",{...rt,className:s(["pdp-product",G]),children:[N&&e(o,{node:N,className:"pdp-product__breadcrumbs"}),V("div",{className:"pdp-product__column-container pdp-product__gallery-column",children:[e("div",{className:"pdp-product__column-body",children:(F=n==null?void 0:n.controls)!=null&&F.desktop?e(C,{className:"pdp-product__overlay__carousel",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?n.controls.desktop:"dots",arrowsOnMainImage:n==null?void 0:n.arrowsOnMainImage,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,peak:((E=n==null?void 0:n.thumbnails)==null?void 0:E.length)>1&&((m=n==null?void 0:n.peak)==null?void 0:m.desktop)||!1,gap:(n==null?void 0:n.gap)||null,width:"100%",height:"100%",defaultIndex:H||0,thumbnails:P,children:D}):e(Lt,{className:"pdp-product__images",gap:"small",children:D})}),y&&e(o,{node:y,className:"pdp-product__gallery-content"})]}),V("div",{className:"pdp-product__column-container pdp-product__content-column",children:[V("div",{className:"pdp-product__column-body",children:[V("div",{className:"pdp-product__header",children:[a&&e(o,{node:a,className:"pdp-product__title"}),I&&e(o,{node:I,className:"pdp-product__sku"})]}),V("div",{className:"pdp-product__prices",children:[Z&&e(o,{node:Z,className:s(["pdp-product__price-special","pdp-product__price"]),"aria-label":k,role:"text"}),u&&e(o,{node:u,className:s(["pdp-product__price-regular","pdp-product__price--grey"]),"aria-label":pt,role:"text"})]}),($=n==null?void 0:n.controls)!=null&&$.mobile&&((j=n==null?void 0:n.controls)==null?void 0:j.mobile)==="thumbnailsRow"?e(C,{className:"pdp-product__images pdp-product__images--carousel pdp-product__images--carousel--thumbnails",width:"100%",height:"auto",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"thumbnailsRow":null,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,peak:((W=n==null?void 0:n.thumbnails)==null?void 0:W.length)>1&&((X=n==null?void 0:n.peak)==null?void 0:X.mobile)||!1,gap:(n==null?void 0:n.gap)||null,thumbnails:P,children:D}):e(C,{className:"pdp-product__images pdp-product__images--carousel",peak:((Y=n==null?void 0:n.peak)==null?void 0:Y.mobile)&&(c==null?void 0:c.length)>1,gap:(n==null?void 0:n.gap)||null,width:"100%",height:"auto",arrows:(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"dots":null,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,children:D}),V("div",{className:s(["pdp-product__actions",["pdp-product__actions--out-of-stock",x]]),children:[x&&e("div",{className:"pdp-product__out-of-stock__text",children:ct}),h&&e(o,{node:h,className:s(["pdp-product__options"])}),K&&e("div",{className:"pdp-product__quantity",children:e(o,{node:K})}),M&&e(o,{node:M,className:s(["pdp-product__buttons"])})]}),L&&e(o,{node:L,className:s(["pdp-product__short_description"])}),r&&e(o,{node:r,className:s(["pdp-product__description"])}),et?e("div",{className:"pdp-product__attributes",children:et}):null]}),v&&e(o,{node:v,className:"pdp-product__info-content"})]}),O&&e(o,{node:O,className:"pdp-product__content"}),H===null?null:e(Dt,{className:"pdp-product__overlay",onClose:()=>t(null),centered:!0,children:e(C,{className:"pdp-product__overlay__carousel",arrows:(c==null?void 0:c.length)>1,width:"100%",height:"100%",defaultIndex:H||0,loop:(n==null?void 0:n.loopable)&&(c==null?void 0:c.length)>1,controls:(c==null?void 0:c.length)>1?"dots":null,isZoomed:!0,children:D})})]})},Lt=({children:a,gap:N=null,className:y,style:v,...O})=>{const I=ot.count(a);return e("div",{...O,className:s(["pdp-gallery-grid",y]),style:{"--gap":N?`var(--spacing-${N})`:"0px",...v},children:ot.map(a,(x,L)=>e("div",{className:"pdp-gallery-grid__item",children:e(o,{node:x,loading:L===0?"eager":"lazy"},x.props.src)},I+L))})},Mt=({sku:a,hideSku:N,hideQuantity:y,hideShortDescription:v,hideDescription:O,hideAttributes:I,hideURLParams:x,hideSelectedOptionValue:L,slots:r,children:et,initialData:c,carousel:h,optionsConfig:u,useACDL:Z,onAddToCart:G,zoomType:it,closeButton:K=!0,disableDropdownPreselection:M,...n})=>{var Q,at,_t,mt;const J=B("PDP.Product.AddToCart.label").label,nt=B("PDP.Product.Incrementer.label").label,rt=B("PDP.Product.Details.label").label,pt=B("PDP.Swatches.ChooseOption.label").label,[k,ct]=z(St.getConfig().defaultLocale||"en-US"),[U,H]=z(),[t=null,D]=z(c),[P,q]=z(()=>{const p={sku:a,quantity:1};return t!=null&&t.optionUIDs&&(p.optionsUIDs=t.optionUIDs),p}),[F,E]=z(()=>{var p,d;return!(t!=null&&t.options&&((p=t==null?void 0:t.options)==null?void 0:p.length)>0&&((d=t==null?void 0:t.optionUIDs)==null?void 0:d.length)!==(t==null?void 0:t.options.length))}),m={data:t,values:P,valid:F};function $(p){return p==null?void 0:p.some(d=>(d==null?void 0:d.typename)==="ProductViewOptionValueProduct")}f(()=>{const p=tt.on("pdp/data",l=>{D(l),q(i=>({...i,sku:l.sku,optionsUIDs:l.optionUIDs}))}),d=tt.on("pdp/setValues",l=>{q(i=>({...i,...l}))});return()=>{d==null||d.off(),p==null||p.off()}},[]),f(()=>{const p=tt.on("locale",d=>{d!==k&&(ct(d),ht(a,{preselectFirstOption:!M,anchors:u==null?void 0:u.anchorOptions}).then(D))});return()=>{p==null||p.off()}},[M,k,u==null?void 0:u.anchorOptions,a]),f(()=>{Z&&c&&Object.keys(c).length>0&&st(c)},[c]);const j=g(p=>{q(d=>({...d,...p}))},[]);f(()=>{tt.emit("pdp/values",P)},[JSON.stringify(P)]);const W=g(async p=>{var i,_;let d=Object.entries(p).filter(([b,T])=>T.label!==pt).map(([b,T])=>p[b].value).filter(b=>b!==void 0);!x&&(t!=null&&t.options)&&!$(t.options)&&Vt({optionsUIDs:d.join(",")}),j({optionsUIDs:d}),E((d==null?void 0:d.length)===((i=t==null?void 0:t.options)==null?void 0:i.length));const l=await ht(a,{anchors:u==null?void 0:u.anchorOptions,isBundle:t==null?void 0:t.isBundle,optionsUIDs:d,preselectFirstOption:!M});D(l),(_=u==null?void 0:u.anchorOptions)!=null&&_.length&&X(l,d)},[a]),X=g((p,d)=>{var _;const l=(p==null?void 0:p.optionUIDs)??[];d.every(b=>l.includes(b))||(H(p==null?void 0:p.options),j({optionsUIDs:l}),E((l==null?void 0:l.length)===((_=p==null?void 0:p.options)==null?void 0:_.length)))},[a]),Y=g(p=>{Object.keys(p).length!==0&&E(!1)},[]),w=vt(()=>{var p;return(p=t==null?void 0:t.attributes)==null?void 0:p.map(({label:d,value:l},i)=>{const _=Ut(l)?Bt(l,k):l.toString();return V("li",{children:[d,": ",e("span",{dangerouslySetInnerHTML:{__html:_}})]},i)})},[t==null?void 0:t.attributes,k]),S=!y&&(t!=null&&t.inStock)?e(A,{name:"Quantity",slot:r==null?void 0:r.Quantity,context:{...m},children:e(Ot,{name:"quantity",defaultValue:P.quantity.toString(),value:P.quantity.toString(),min:1,"aria-label":nt,className:"pdp-product__quantity",onValue:p=>{j({quantity:Number(p)})}},"quantity")}):void 0,R=()=>{if(t!=null&&t.options)return e(A,{name:"Options",slot:r==null?void 0:r.Options,context:{...m},children:e(wt,{selectedUIDs:P.optionsUIDs,options:t.options,defaultOptions:P.optionsUIDs,selectionsToUpdate:U,hideSelectedValue:L,disablePreselections:M,onValues:W,onErrors:Y})})};return e("div",{...n,children:e(xt,{title:e(A,{name:"Title",slot:r==null?void 0:r.Title,context:{...m},children:t==null?void 0:t.name}),sku:N?void 0:e(A,{name:"SKU",slot:r==null?void 0:r.SKU,context:{...m},children:t==null?void 0:t.sku}),options:R(),breadcrumbs:(r==null?void 0:r.Breadcrumbs)&&e(A,{name:"Breadcrumbs",slot:r==null?void 0:r.Breadcrumbs,context:{...m,setSeparator(p){this._registerMethod((...d)=>{const l=p(...d),i=l&&e(lt,{source:l});this._setProps(_=>({..._,separator:i,children:[e(dt,{separator:i,categories:_.categories})]}))})},appendLink(p){this._registerMethod((...d)=>{const{text:l,...i}=p(...d),_=e("a",{...i,children:l});this._setProps(b=>{const T=[...b.categories||[],_];return{...b,categories:T,children:[e(dt,{separator:b.separator,categories:T})]}})})},appendHTMLElement(p){this._registerMethod((...d)=>{const l=p(...d),i=this._htmlElementToVNode(l);this._setProps(_=>{const b=[..._.categories||[],i];return{..._,categories:b,children:[e(dt,{separator:_.separator,categories:b})]}})})}}}),quantity:S,actions:e(A,{name:"Actions",slot:r==null?void 0:r.Actions,context:{...m,appendButton(p){this._registerMethod((...d)=>{const l=p(...d);if(!l)return;const{text:i,icon:_,...b}=l,T=e(bt,{type:"button",...b,icon:_&&e(lt,{source:_}),children:i});this._setProps(yt=>({children:[...yt.children||[],T]}))})}},children:!(r!=null&&r.Actions)&&e(bt,{size:"medium",type:"submit",icon:e(lt,{source:"Cart"}),disabled:!(t!=null&&t.inStock)||!F,"aria-label":J,onClick:()=>G==null?void 0:G(P),children:J})}),shortDescription:v?void 0:e(A,{name:"ShortDescription",slot:r==null?void 0:r.ShortDescription,context:{...m},children:e("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.shortDescription)??""}})}),description:O?void 0:e(A,{name:"Description",slot:r==null?void 0:r.Description,context:{...m},children:e("div",{dangerouslySetInnerHTML:{__html:(t==null?void 0:t.description)??""}})}),images:((Q=t==null?void 0:t.images)==null?void 0:Q.map(({label:p,url:d})=>{var l,i;return e(At,{title:p,alt:p,src:d,width:((l=h==null?void 0:h.imageParams)==null?void 0:l.width)??960,height:((i=h==null?void 0:h.imageParams)==null?void 0:i.height)??1191,params:(h==null?void 0:h.imageParams)??{width:960}},d)}))??[],specialPrice:(at=t==null?void 0:t.prices)!=null&&at.visible?e(A,{name:"SpecialPrice",slot:r==null?void 0:r.SpecialPrice,context:{...m},children:e(Pt,{...t.prices.final,locale:ut(k)})}):void 0,price:(_t=t==null?void 0:t.prices)!=null&&_t.visible&&t.prices.regular&&t.prices.final.amount!==(t==null?void 0:t.prices.regular.amount)?e(A,{name:"RegularPrice",slot:r==null?void 0:r.RegularPrice,context:{...m},children:e(Pt,{...t.prices.regular,locale:ut(k)})}):void 0,zoomType:it,closeButton:K,carouselConfig:{...h,thumbnails:h&&Object.keys(h).length?((mt=t==null?void 0:t.images)==null?void 0:mt.map(({label:p,url:d})=>{var l,i;return e(At,{title:p,alt:p,src:d,width:((l=h==null?void 0:h.thumbnailParams)==null?void 0:l.width)??200,height:((i=h==null?void 0:h.thumbnailParams)==null?void 0:i.height)??248,params:(h==null?void 0:h.thumbnailParams)??{width:200}},d)}))??[]:[]},outOfStock:!(t!=null&&t.inStock),attributes:I?void 0:e(A,{name:"Attributes",slot:r==null?void 0:r.Attributes,context:{...m},children:w!=null&&w.length?V(Nt,{children:[rt,e("ul",{children:w})]}):null}),galleryContent:(r==null?void 0:r.GalleryContent)&&e(A,{name:"GalleryContent",slot:r.GalleryContent,context:{...m}}),infoContent:(r==null?void 0:r.InfoContent)&&e(A,{name:"InfoContent",slot:r.InfoContent,context:{...m}}),productContent:(r==null?void 0:r.Content)&&e(A,{name:"Content",slot:r.Content,context:{...m}})})})};Mt.getInitialData=async function({sku:a,disableDropdownPreselection:N=!1,optionsConfig:y}){var O,I;const v=(I=(O=St.getConfig().models)==null?void 0:O.ProductDetails)==null?void 0:I.initialData;return v?kt(v):ht(a,{preselectFirstOption:!N,anchors:y==null?void 0:y.anchorOptions})};export{Mt as ProductDetails,Mt as default};
package/package.json CHANGED
@@ -1 +1 @@
1
- {"name": "@dropins/storefront-pdp", "version": "1.0.2-alpha1", "@dropins/tools": "~0.36.0", "license": "SEE LICENSE IN LICENSE.md"}
1
+ {"name": "@dropins/storefront-pdp", "version": "1.0.3", "@dropins/tools": "~0.36.0", "license": "SEE LICENSE IN LICENSE.md"}