const template=`
`,updaters=new WeakMap;export class ScrollShadowElement extends HTMLElement{static get observedAttributes(){return["el"]}get el(){return this.getAttribute("el")}set el(value){this.setAttribute("el",value)}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML=template,updaters.set(this,new Updater(this.shadowRoot.lastElementChild))}connectedCallback(){this.shadowRoot.querySelector("slot").addEventListener("slotchange",()=>this.start()),this.start()}disconnectedCallback(){updaters.get(this).stop()}attributeChangedCallback(_name,oldValue,newValue){oldValue!==newValue&&(this.scrollEl=newValue?this.querySelector(newValue):null,this.start())}start(){const el=this.scrollEl||this.firstElementChild;updaters.get(this).start(el,this.scrollEl?this.firstElementChild:null)}}class Updater{constructor(targetElement){const update=this.update.bind(this,targetElement,getComputedStyle(targetElement));this.handleScroll=throttle(update),this.resizeObserver=new ResizeObserver(update)}start(element,rootElement){this.el&&this.stop(),element&&(element.addEventListener("scroll",this.handleScroll),this.resizeObserver.observe(element),this.el=element),rootElement&&(this.resizeObserver.observe(rootElement),this.rootEl=rootElement)}stop(){this.el&&(this.el.removeEventListener("scroll",this.handleScroll),this.resizeObserver.disconnect(),this.el=null,this.rootEl=null)}update(targetElement,computedStyle){const{el,rootEl}=this;if(!el)return;const maxSize=Number(computedStyle.getPropertyValue("--scroll-shadow-size")||14),style={"--top":clamp(el.scrollTop,0,maxSize),"--bottom":clamp(el.scrollHeight-el.offsetHeight-el.scrollTop,0,maxSize),"--left":clamp(el.scrollLeft,0,maxSize),"--right":clamp(el.scrollWidth-el.offsetWidth-el.scrollLeft,0,maxSize)};if(rootEl){const clientRect=el.getBoundingClientRect(),rootClientRect=rootEl.getBoundingClientRect();Object.assign(style,{top:clamp(clientRect.top-rootClientRect.top),bottom:clamp(rootClientRect.bottom-clientRect.bottom),left:clamp(clientRect.left-rootClientRect.left),right:clamp(rootClientRect.right-clientRect.right)})}for(const key in style)targetElement.style.setProperty(key,`${style[key]}px`)}}function clamp(num,min=0,max){return nummax?max:num}function throttle(callback){let id=null;return()=>{id||(id=requestAnimationFrame(()=>{callback(),id=null}))}}"customElements"in window&&"ResizeObserver"in window&&customElements.define("scroll-shadow",ScrollShadowElement);
//# sourceMappingURL=/cdn/shop/t/41/assets/scroll-shadow.js.map?v=20320457967675250001739221809