1const template=` 2 <style> 3 :host { 4 display: inline-block; 5 position: relative; 6 } 7 :host([hidden]) { 8 display: none; 9 } 10 s { 11 position: absolute; 12 top: 0; 13 bottom: 0; 14 left: 0; 15 right: 0; 16 pointer-events: none; 17 z-index: 5; 18 background: 19 var(--scroll-shadow-top, radial-gradient(farthest-side at 50% 0%, rgba(0,0,0,.2), rgba(0,0,0,0))) top/100% var(--top), 20 var(--scroll-shadow-bottom, radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.2), rgba(0,0,0,0))) bottom/100% var(--bottom), 21 var(--scroll-shadow-left, radial-gradient(farthest-side at 0%, rgba(0,0,0,.2), rgba(0,0,0,0))) left/var(--left) 100%, 22 var(--scroll-shadow-right, radial-gradient(farthest-side at 100%, rgba(0,0,0,.2), rgba(0,0,0,0))) right/var(--right) 100%; 23 background-repeat: no-repeat; 24 } 25 </style> 26 <slot></slot> 27 <s></s> 28`,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 num<min?min:num>max?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); 29//# sourceMappingURL=/cdn/shop/t/9/assets/scroll-shadow.js.map?v=20320457967675250001720802543
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.