@blossom-carousel/web/dist/blossom-carousel-web.umd.js

A native-scroll-first carousel component for the web.

(function(u,c){typeof exports=="object"&&typeof module<"u"?c(exports):typeof define=="function"&&define.amd?define(["exports"],c):(u=typeof globalThis<"u"?globalThis:u||self,c(u.BlossomCarousel={}))})(this,function(u){"use strict";var xe=Object.defineProperty;var ye=(u,c,b)=>c in u?xe(u,c,{enumerable:!0,configurable:!0,writable:!0,value:b}):u[c]=b;var re=(u,c,b)=>(ye(u,typeof c!="symbol"?c+"":c,b),b);const c=(n,p)=>{let P=!0;const m={x:0,y:0},i={x:0,y:0},f={x:0,y:0},T=new Proxy({x:0,y:0},{set(e,t,o){return e[t]===o||(e[t]=o,(e.x>=10||e.y>=10)&&Y(!0)),!0}}),s=new Proxy({x:!1,y:!1},{set(e,t,o){return e[t]===o||(e[t]=o,e.x||e.y?(n.setAttribute("has-overflow","true"),n.addEventListener("pointerdown",K),n.addEventListener("wheel",Z,{passive:!1})):(n.removeAttribute("has-overflow"),n.removeEventListener("pointerdown",K),n.removeEventListener("wheel",Z))),!0}});let E=300,g=null,x=!1,y=300,d=300,V=300,z=300;const R={left:0,right:0},B={left:0,right:0};let W=[],k=null,F=null,U=!1;function le(){k=(n==null?void 0:n.querySelectorAll("a[href]"))||null,k==null||k.forEach(o=>{o.addEventListener("click",G)}),window.addEventListener("keydown",_),n.addEventListener("scroll",J),F=new ResizeObserver(ie),F.observe(n);const e=window.matchMedia("(hover: hover) and (pointer: fine)").matches,{scrollSnapType:t}=window.getComputedStyle(n);U=t!=="none",n.style.setProperty("--snap-type",t),e&&(n.style["scroll-snap-type"]="none"),n.setAttribute("has-repeat",p!=null&&p.repeat?"true":"false")}function se(){F==null||F.disconnect(),g&&cancelAnimationFrame(g),window.removeEventListener("keydown",_),n.removeEventListener("scroll",J),k==null||k.forEach(e=>{e.removeEventListener("click",G)})}function G(e){T.x>10&&e.preventDefault()}function ie(){if(!n)return;const e="ontouchmove"in window;y=n.scrollWidth,d=n.clientWidth,V=n.scrollHeight,z=n.clientHeight;const t=window.getComputedStyle(n);s.x=!e&&y>d&&["auto","scroll"].includes(t.getPropertyValue("overflow-x")),s.y=!e&&V>z&&["auto","scroll"].includes(t.getPropertyValue("overflow-y")),R.right=parseInt(t.paddingRight)||0,R.left=parseInt(t.paddingLeft)||0,B.left=parseInt(t.scrollPaddingLeft)||0,B.right=parseInt(t.scrollPaddingRight)||0,E=y-d-4,W=U?ce(n):[],p!=null&&p.repeat&&X(null,null)}function ce(e){let t=[],o=0;const v=l=>{if(o++,o>100)return;const w=window.getComputedStyle(l).scrollSnapAlign;if(w!=="none"){t.push({align:w,el:l});return}const M=l.children;if(M.length!==0)for(let a of M)v(a)};v(e);const O=e.getBoundingClientRect();let h=t.map(({el:l,align:w},M)=>{const a=l.getBoundingClientRect(),S=l.clientWidth,$=a.left-O.left+e.scrollLeft;switch(w){case"start":return $-B.left;case"end":return $+S-d+B.right;case"center":return $+S*.5-d/2;default:return null}});return h=h.filter(l=>l!==null).reduce((l,w)=>(l[l.length-1]!==w&&l.push(w),l),[]),h}function J(){if(p!=null&&p.repeat){X(null,null);return}if(!(x||!n)){if(n.scrollLeft<0){const e=n.scrollLeft*-1;H(e)}else if(n.scrollLeft>y-d){const e=n.scrollLeft*-1+y-d;H(e)}}}const r={x:0,y:0};function K(e){n&&(s.x&&(r.x=n.scrollLeft,m.x=e.clientX,f.x=0),s.y&&(r.y=n.scrollTop,m.y=e.clientY,f.y=0),T.x=0,x=!0,window.addEventListener("pointermove",N),window.addEventListener("pointerup",Q))}function N(e){if(e.preventDefault(),s.x){const t=m.x-e.clientX;i.x+=t,f.x+=t,m.x=e.clientX,T.x+=Math.abs(t)}if(s.y){const t=m.y-e.clientY;i.y+=t,f.y+=t,m.y=e.clientY,T.y+=Math.abs(t)}}function Q(){window.removeEventListener("pointermove",N),window.removeEventListener("pointerup",Q),x=!1,!(T.x<=10)&&(s.x&&(f.x*=2),s.y&&(f.y*=2),ae(),pe())}function Z(e){if(e.deltaX>e.deltaY){if(Y(!1),x||!n)return;s.x&&(r.x=n.scrollLeft),s.y&&(r.y=n.scrollTop)}}function _(e){["ArrowLeft","ArrowRight","ArrowUp","ArrowDown"].includes(e.key)&&Y(!1)}function ae(){const e=(ne(de({axis:"x"}),0,y-d)-i.x)*(1-L)*(1/L);f.x=e}function X(e,t){if(!n)return;const o=t??n.scrollLeft,v=R.left-o,O=o-(y-d-R.right),h=Array.from(n.children);let l=0;for(let a=h.length-1;a>=h.length/2;a--){const S=l>v?0:-(y-d);l+=h[a].clientWidth,h[a].style.translate=`${S}px 0`}let w=0;for(let a=0;a<h.length/2;a++){const S=w>O?0:y-d;w+=h[a].clientWidth,h[a].style.translate=`${S}px 0`}if(x)return;const M=o>E?4:o<4?E:null;M&&n.scrollTo({left:M,behavior:"instant"})}const L=.72,D=.12;let ee=!1;function Y(e){n&&(e&&!ee?(q=performance.now(),s.x&&(i.x=n.scrollLeft),s.y&&(i.y=n.scrollTop),g||(g=requestAnimationFrame(te))):e||(g&&cancelAnimationFrame(g),g=null),ee=e,P=!e,n.setAttribute("has-snap",P?"true":"false"))}let A=0,q=0;function te(e){g=requestAnimationFrame(te),A=e-q,n&&(s.x&&(f.x*=L,x?r.x=I(r.x,i.x,L,A):(i.x+=f.x,r.x=I(r.x,i.x,D,A))),s.y&&(f.y*=L,x?r.y=I(r.y,i.y,L,A):(i.y+=f.y,r.y=I(r.y,i.y,D,A))),p!=null&&p.repeat&&(r.x>E&&(r.x=i.x=4),r.x<4&&(r.x=i.x=E)),n.scrollTo({left:r.x,top:r.y,behavior:"instant"}),p!=null&&p.repeat?X(null,r.x):ue(oe(r.x,2)),q=e)}let C=0;function ue(e){if(!n)return;const t=y-d;let o=0;if(e<0?o=x?e*-.2:0:e>t&&(o=x?(e-t)*-.2:0),C=I(C,o,x?.8:D,A),Math.abs(C)>.01){if(H(C).defaultPrevented)return;n.style.transform=`translateX(${oe(C,3)}px)`;return}n.style.transform="",C=0}function H(e){const t=new CustomEvent("overscroll",{bubbles:!0,cancelable:!0,detail:{left:e}});return n==null||n.dispatchEvent(t),t}function fe({axis:e="x"}){return i[e]+f[e]/(1-L)}function de({axis:e="x"}){const t=fe({axis:e});return W.length?W.reduce((o,v)=>Math.abs(v-t)<Math.abs(o-t)?v:o):ne(t,0,E)}function pe(){const e=t=>{t.preventDefault(),t.stopPropagation(),window.removeEventListener("click",e,!0)};window.addEventListener("click",e,!0)}function he(e,t,o){return(1-o)*e+o*t}function I(e,t,o,v){return he(e,t,1-Math.exp(Math.log(1-o)*(v/16.666666666666668)))}function ne(e,t,o){return e<t?t:e>o?o:e}function oe(e,t=0){const o=Math.pow(10,t);return Math.round(e*o)/o}return{snap:P,hasOverflow:s,init:le,destroy:se}},b="";class j extends HTMLElement{constructor(){super();re(this,"carouselInstance");const P=this.attachShadow({mode:"open"});this.setAttribute("blossom-carousel","true");const m=document.createElement("slot");P.appendChild(m)}connectedCallback(){this.carouselInstance=c(this,{repeat:!1}),this.carouselInstance.init()}disconnectedCallback(){this.carouselInstance.destroy()}}customElements.define("blossom-carousel",j),u.BlossomCarousel=j,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})});