https://store.afikra.com/cdn/shop/t/3/assets/overflow-list.js?v=46858356770684902511782122108

1import{ResizeNotifier}from"@theme/utilities";import{DeclarativeShadowElement}from"@theme/component";export class OverflowMinimumEvent extends Event{constructor(minimumReached){super("overflowMinimum",{bubbles:!0}),this.detail={minimumReached}}}export class OverflowList extends DeclarativeShadowElement{static get observedAttributes(){return["disabled","minimum-items"]}attributeChangedCallback(name,oldValue,newValue){name==="disabled"&&(newValue==="true"?this.#reset():this.#reflowItems())}async connectedCallback(){super.connectedCallback(),await this.#waitForStyles(),this.#initialize()}#waitForStyles(){const styles=this.shadowRoot?.querySelector('link[rel="stylesheet"]');return!styles||styles.sheet?Promise.resolve():new Promise(resolve=>{styles.addEventListener("load",resolve)})}#initialize(){const{shadowRoot}=this;if(!shadowRoot)throw new Error("Missing shadow root");const defaultSlot=shadowRoot.querySelector("slot:not([name])"),overflowSlot=shadowRoot.querySelector('slot[name="overflow"]'),moreSlot=shadowRoot.querySelector('slot[name="more"]'),overflow=shadowRoot.querySelector('[part="overflow"]'),list=shadowRoot.querySelector('[part="list"]'),placeholder=shadowRoot.querySelector('[part="placeholder"]');if(!(defaultSlot instanceof HTMLSlotElement)||!(overflowSlot instanceof HTMLSlotElement)||!(moreSlot instanceof HTMLSlotElement)||!(overflow instanceof HTMLElement)||!(list instanceof HTMLUListElement)||!(placeholder instanceof HTMLLIElement))throw new Error("Invalid element types in <OverflowList />");this.#refs={defaultSlot,overflowSlot,moreSlot,overflow,list,placeholder},this.addEventListener("reflow",event=>{this.#reflowItems(0,event.detail.lastVisibleElement)});const elements=defaultSlot.assignedElements().filter(element=>!(element instanceof HTMLTemplateElement)),firstElement=elements[0],lastElement=elements[elements.length-1];firstElement&&this.#intersectionObserver.observe(firstElement),lastElement&&lastElement!==firstElement&&this.#intersectionObserver.observe(lastElement)}disconnectedCallback(){this.#resizeObserver.disconnect(),this.#mutationObserver.disconnect(),this.#intersectionObserver.disconnect()}get schedule(){return typeof Theme?.utilities?.scheduler?.schedule=="function"?Theme.utilities.scheduler.schedule:callback=>requestAnimationFrame(()=>setTimeout(callback,0))}#scheduled=!1;get minimumItems(){const value=this.getAttribute("minimum-items");return value?parseInt(value,10):null}get overflowSlot(){const{overflowSlot}=this.#refs;return overflowSlot}get defaultSlot(){const{defaultSlot}=this.#refs;return defaultSlot}#handleIntersection=entries=>{const entry=entries[0];entry?.isIntersecting&&(this.#intersectionObserver.disconnect(),setTimeout(()=>{this.querySelector(':scope > template[shadowrootmode="open"]')?.remove(),this.#reflowItems(entry.boundingClientRect.height)},0))};#handleChange=()=>{this.#scheduled||(this.#scheduled=!0,requestAnimationFrame(()=>setTimeout(()=>{this.#reflowItems(),this.#scheduled=!1},0)))};#moveItemsToDefaultSlot(){const{defaultSlot,overflowSlot}=this.#refs;for(const element of overflowSlot.assignedElements())element.slot!==defaultSlot.name&&(element.slot=defaultSlot.name)}#reset(){const{list}=this.#refs;this.#unobserveChanges(),this.#moveItemsToDefaultSlot(),list.style.removeProperty("height"),this.style.setProperty("--overflow-count","0")}#updateMinimumReached(visibleElements){if(this.minimumItems!==null){const minimumReached=visibleElements.length<this.minimumItems;minimumReached?this.setAttribute("minimum-reached",""):this.removeAttribute("minimum-reached"),this.dispatchEvent(new OverflowMinimumEvent(minimumReached))}}showAll(){const{placeholder}=this.#refs;placeholder.style.setProperty("width","0"),placeholder.style.setProperty("display","none"),this.setAttribute("disabled","true")}#reflowItems=(listHeight=0,lastVisibleElement=null)=>{const{defaultSlot,overflowSlot,moreSlot,list,placeholder}=this.#refs;this.#unobserveChanges(),this.#moveItemsToDefaultSlot();const elements=defaultSlot.assignedElements();if(!elements[elements.length-1]){this.#observeChanges();return}let visibleElements=[],overflowingElements=[],placeholderWidth=0,hasOverflow=!1;listHeight>0&&list.style.setProperty("height",`${listHeight}px`),list.style.setProperty("flex-wrap","wrap"),placeholder.hidden=!0,moreSlot.style.setProperty("order","-1"),moreSlot.hidden=!1,lastVisibleElement?.style.setProperty("order","-1");const moreSlotRect=moreSlot.getBoundingClientRect();

1elements.forEach(element=>{const elementRect=element.getBoundingClientRect();elementRect.top>moreSlotRect.top?(overflowingElements.length||(placeholderWidth=elementRect.width),hasOverflow=!0,overflowingElements.push(element)):visibleElements.push(element)}),hasOverflow&&moreSlot.style.removeProperty("order"),lastVisibleElement?.style.removeProperty("order");for(const element of elements){const targetSlot=overflowingElements.includes(element)?overflowSlot.name:defaultSlot.name;element.slot!==targetSlot&&(element.slot=targetSlot)}list.style.setProperty("counter-reset",`overflow-count ${overflowingElements.length}`),this.style.setProperty("--overflow-count",`${overflowingElements.length}`),moreSlot.hidden=!hasOverflow,hasOverflow&&(placeholder.style.width=`${placeholderWidth}px`,placeholder.hidden=!1),list.style.setProperty("overflow","unset"),hasOverflow&&this.#updateMinimumReached(visibleElements),this.#observeChanges()};#observeChanges(){this.#resizeObserver.observe(this),this.#mutationObserver.observe(this,{childList:!0})}#unobserveChanges(){this.#resizeObserver.disconnect(),this.#mutationObserver.disconnect()}#refs;#resizeObserver=new ResizeNotifier(this.#handleChange);#mutationObserver=new MutationObserver(this.#handleChange);#intersectionObserver=new IntersectionObserver(this.#handleIntersection,{rootMargin:"640px 360px 640px 360px"})}customElements.get("overflow-list")||customElements.define("overflow-list",OverflowList);
2//# sourceMappingURL=/cdn/shop/t/3/assets/overflow-list.js.map?v=46858356770684902511782122108