@fluid-topics/ft-infinite-scroll 1.2.54 → 1.2.55

package/build/ft-infinite-scroll.d.ts

@@ -79,7 +79,7 @@ export declare class FtInfiniteScroll<T> extends FtLitElement implements FtInfin
     protected scrollAdjustment: () => void;
     protected onMutation: () => void;
     protected mutationObserver: MutationObserver;
-    protected update(props: PropertyValues<FtInfiniteScroll<T>>): void;
+    protected willUpdate(props: PropertyValues<FtInfiniteScroll<T>>): void;
     protected updated(props: PropertyValues<FtInfiniteScroll<T>>): void;
     protected lastRenderedItemsLength: number;
     protected contentAvailableCallback(props: PropertyValues): void;

package/build/ft-infinite-scroll.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { cancelable, Debouncer, deepEqual, FtLitElement, minmax, scrollHelper, waitUntil } from "@fluid-topics/ft-wc-utils";
+import { cancelable, Debouncer, deepEqual, FtLitElement, hasChanged, minmax, scrollHelper, waitFor, waitUntil } from "@fluid-topics/ft-wc-utils";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { styles } from "./ft-infinite-scroll.styles";
 export class VisibleItemsChangeEvent extends CustomEvent {
@@ -319,8 +319,8 @@ class FtInfiniteScroll extends FtLitElement {
             requestAnimationFrame(this.scrollAdjustment);
         }
     }
-    update(props) {
-        super.update(props);
+    willUpdate(props) {
+        super.willUpdate(props);
         if (props.has("items")) {
             this.renderedIndexes = new Set();
             this.lastRenderedItemsLength = 0;
@@ -328,7 +328,7 @@ class FtInfiniteScroll extends FtLitElement {
         }
         let scrollTargetUpdated = (props.has("scrollToItem") || props.has("scrollToIndex")) && (this.scrollToItem != null || this.scrollToIndex != null);
         if (scrollTargetUpdated || props.has("internalScroll")) {
-            this.resetScroll();
+            waitFor(() => this.itemsContainer).then(() => this.resetScroll());
         }
     }
     updated(props) {
@@ -380,7 +380,7 @@ class FtInfiniteScroll extends FtLitElement {
 // language=CSS
 FtInfiniteScroll.styles = styles;
 __decorate([
-    property({ type: Array })
+    property({ attribute: false, hasChanged })
 ], FtInfiniteScroll.prototype, "items", void 0);
 __decorate([
     property({ attribute: false })

package/build/ft-infinite-scroll.light.js

@@ -1,4 +1,4 @@
-"use strict";(()=>{var H=Object.create;var y=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var G=(r,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of k(e))!j.call(r,i)&&i!==t&&y(r,i,{get:()=>e[i],enumerable:!(s=M(e,i))||s.enumerable});return r};var m=(r,e,t)=>(t=r!=null?H(q(r)):{},G(e||!r||!r.__esModule?y(t,"default",{value:r,enumerable:!0}):t,r));var b=u((P,O)=>{O.exports=ftGlobals.wcUtils});var g=u((K,x)=>{x.exports=ftGlobals.lit});var _=u((Z,w)=>{w.exports=ftGlobals.litDecorators});var C=u((W,A)=>{A.exports=ftGlobals.litRepeat});var V=u((z,E)=>{E.exports=ftGlobals.litUnsafeHTML});var $=m(b());var f=m(g()),a=m(_()),N=m(C()),o=m(b()),F=m(V());var D=m(g()),p=m(b()),I={padding:p.FtCssVariableFactory.create("--ft-infinite-scroll-padding","","SIZE","0"),itemsGap:p.FtCssVariableFactory.create("--ft-infinite-scroll-items-gap","","SIZE","4px"),itemContainerMinHeight:p.FtCssVariableFactory.create("--ft-infinite-scroll-item-container-min-height","","SIZE",".1px")},L=D.css`
+"use strict";(()=>{var H=Object.create;var y=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var q=Object.getPrototypeOf,U=Object.prototype.hasOwnProperty;var b=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var j=(r,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of k(e))!U.call(r,i)&&i!==t&&y(r,i,{get:()=>e[i],enumerable:!(s=M(e,i))||s.enumerable});return r};var m=(r,e,t)=>(t=r!=null?H(q(r)):{},j(e||!r||!r.__esModule?y(t,"default",{value:r,enumerable:!0}):t,r));var u=b((P,O)=>{O.exports=ftGlobals.wcUtils});var g=b((K,x)=>{x.exports=ftGlobals.lit});var _=b((Z,w)=>{w.exports=ftGlobals.litDecorators});var C=b((W,A)=>{A.exports=ftGlobals.litRepeat});var V=b((z,E)=>{E.exports=ftGlobals.litUnsafeHTML});var $=m(u());var f=m(g()),a=m(_()),N=m(C()),o=m(u()),F=m(V());var D=m(g()),p=m(u()),I={padding:p.FtCssVariableFactory.create("--ft-infinite-scroll-padding","","SIZE","0"),itemsGap:p.FtCssVariableFactory.create("--ft-infinite-scroll-items-gap","","SIZE","4px"),itemContainerMinHeight:p.FtCssVariableFactory.create("--ft-infinite-scroll-item-container-min-height","","SIZE",".1px")},L=D.css`
     .items-container {
         padding: ${I.padding};
         outline: none;
@@ -28,7 +28,7 @@
         display: flow-root;
         min-height: ${I.itemContainerMinHeight};
     }
-`;var c=function(r,e,t,s){var i=arguments.length,l=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,h;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")l=Reflect.decorate(r,e,t,s);else for(var d=r.length-1;d>=0;d--)(h=r[d])&&(l=(i<3?h(l):i>3?h(e,t,l):h(e,t))||l);return i>3&&l&&Object.defineProperty(e,t,l),l},T=class extends CustomEvent{constructor(e,t){super("visible-items-change",{detail:{indexes:e,items:t,visibleIndexes:e,visibleItems:t}})}},R=class extends CustomEvent{constructor(e,t){super("rendered-items-change",{detail:{indexes:e,items:t}})}},S=class extends Event{constructor(){super("scrolled-to-target")}},B=r=>(r??[])[(r??[]).length-1],n=class extends o.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>f.html``,this.getItemKey=(e,t)=>`${t} - ${JSON.stringify(e)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.ensureScrollToTarget=!1,this.visibleItems=[],this.scrolledToTarget=!1,this.scrolling=!1,this.renderApprovalTimeouts=[],this.renderedIndexes=new Set,this.scrollDebouncer=new o.Debouncer(5),this.scrollDoneDebouncer=new o.Debouncer(10),this.onVisibilityChange=e=>{let t=new Set(this.visibleItems),s=new Set;for(let i of e){let l=+i.target.getAttribute("data-item-index");i.intersectionRect.height>0?(t.add(l),s.add(l)):s.has(l)||t.delete(l)}this.visibleItems=[...t].sort((i,l)=>i-l)},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.scrollingDebouncer=new o.Debouncer(50),this.ignoreNextScrollEvent=!1,this.scrollListener=()=>{var e;let t=this.ignoreNextScrollEvent;this.ignoreNextScrollEvent=!1,t||(this.scrolling=!0,this.scrollingDebouncer.run(()=>this.scrolling=!1));let s=this.scrollable.scrollTop,i=s-((e=this.lastScrollTop)!==null&&e!==void 0?e:0);if(this.lastScrollTop=s,this.scrolledToTarget&&(this.restoreScrollIfNeeded(t?0:i),!t||this.scrollRestorationItem==null)){let l=this.searchFirstVisibleItem(s,this.itemsContainer.children);this.scrollRestorationItem=l?+l.getAttribute("data-item-index"):void 0,this.scrollRestorationOffset=s-this.getOffset(l)}},this.restoreScrollIfNeeded=(e=0)=>{var t;let s=this.scrollable.scrollHeight,i=s-((t=this.lastScrollHeight)!==null&&t!==void 0?t:s);if(this.lastScrollHeight=s,i!==0&&this.scrolledToTarget&&this.scrollRestorationItem!=null&&this.scrollRestorationOffset!=null&&!(this.scrollRestorationItem===0&&this.scrollRestorationOffset<0)){let l=this.getItem(this.scrollRestorationItem),h=this.getOffset(l),d=(0,o.minmax)(this.scrollRestorationItem===0?-h:1,this.scrollRestorationOffset,l.clientHeight-1),v=h+d+e-this.scrollable.scrollTop;(Math.abs(i-v)<4||Math.abs(v)>5)&&(this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop+=v)}},this._shouldRestoreScroll=!1,this.scrollAdjustment=()=>{this.restoreScrollIfNeeded(),this.shouldRestoreScroll&&requestAnimationFrame(this.scrollAdjustment)},this.onMutation=()=>{for(let e of this.itemsContainer.children)this.intersectionObserver.observe(e)},this.mutationObserver=new MutationObserver(this.onMutation),this.lastRenderedItemsLength=0,this.resetVisibleItemsDebouncer=new o.Debouncer(10)}get scrollable(){var e;return(e=this._scrollable)!==null&&e!==void 0?e:document.body}set scrollable(e){var t,s,i;this._scrollable!==e&&(this._scrollable&&(this._scrollable.removeEventListener("scroll",this.scrollListener),this.initialOverflowAnchorValue&&(this._scrollable.style.overflowAnchor=this.initialOverflowAnchorValue),o.scrollHelper.release(this,this._scrollable)),this._scrollable=o.scrollHelper.lock(this,e),e&&!this._scrollable&&console.error("Scrollable parent is already locked",this,e),(t=this._scrollable)===null||t===void 0||t.addEventListener("scroll",this.scrollListener),this.lastScrollTop=(s=this._scrollable)===null||s===void 0?void 0:s.scrollTop,this.lastScrollHeight=(i=this._scrollable)===null||i===void 0?void 0:i.scrollHeight,this._scrollable&&(this.initialOverflowAnchorValue=getComputedStyle(this._scrollable).overflowAnchor,this._scrollable.style.overflowAnchor="none"))}render(){return f.html`
+`;var c=function(r,e,t,s){var i=arguments.length,l=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,h;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")l=Reflect.decorate(r,e,t,s);else for(var d=r.length-1;d>=0;d--)(h=r[d])&&(l=(i<3?h(l):i>3?h(e,t,l):h(e,t))||l);return i>3&&l&&Object.defineProperty(e,t,l),l},T=class extends CustomEvent{constructor(e,t){super("visible-items-change",{detail:{indexes:e,items:t,visibleIndexes:e,visibleItems:t}})}},R=class extends CustomEvent{constructor(e,t){super("rendered-items-change",{detail:{indexes:e,items:t}})}},S=class extends Event{constructor(){super("scrolled-to-target")}},G=r=>(r??[])[(r??[]).length-1],n=class extends o.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>f.html``,this.getItemKey=(e,t)=>`${t} - ${JSON.stringify(e)}`,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.ensureScrollToTarget=!1,this.visibleItems=[],this.scrolledToTarget=!1,this.scrolling=!1,this.renderApprovalTimeouts=[],this.renderedIndexes=new Set,this.scrollDebouncer=new o.Debouncer(5),this.scrollDoneDebouncer=new o.Debouncer(10),this.onVisibilityChange=e=>{let t=new Set(this.visibleItems),s=new Set;for(let i of e){let l=+i.target.getAttribute("data-item-index");i.intersectionRect.height>0?(t.add(l),s.add(l)):s.has(l)||t.delete(l)}this.visibleItems=[...t].sort((i,l)=>i-l)},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.scrollingDebouncer=new o.Debouncer(50),this.ignoreNextScrollEvent=!1,this.scrollListener=()=>{var e;let t=this.ignoreNextScrollEvent;this.ignoreNextScrollEvent=!1,t||(this.scrolling=!0,this.scrollingDebouncer.run(()=>this.scrolling=!1));let s=this.scrollable.scrollTop,i=s-((e=this.lastScrollTop)!==null&&e!==void 0?e:0);if(this.lastScrollTop=s,this.scrolledToTarget&&(this.restoreScrollIfNeeded(t?0:i),!t||this.scrollRestorationItem==null)){let l=this.searchFirstVisibleItem(s,this.itemsContainer.children);this.scrollRestorationItem=l?+l.getAttribute("data-item-index"):void 0,this.scrollRestorationOffset=s-this.getOffset(l)}},this.restoreScrollIfNeeded=(e=0)=>{var t;let s=this.scrollable.scrollHeight,i=s-((t=this.lastScrollHeight)!==null&&t!==void 0?t:s);if(this.lastScrollHeight=s,i!==0&&this.scrolledToTarget&&this.scrollRestorationItem!=null&&this.scrollRestorationOffset!=null&&!(this.scrollRestorationItem===0&&this.scrollRestorationOffset<0)){let l=this.getItem(this.scrollRestorationItem),h=this.getOffset(l),d=(0,o.minmax)(this.scrollRestorationItem===0?-h:1,this.scrollRestorationOffset,l.clientHeight-1),v=h+d+e-this.scrollable.scrollTop;(Math.abs(i-v)<4||Math.abs(v)>5)&&(this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop+=v)}},this._shouldRestoreScroll=!1,this.scrollAdjustment=()=>{this.restoreScrollIfNeeded(),this.shouldRestoreScroll&&requestAnimationFrame(this.scrollAdjustment)},this.onMutation=()=>{for(let e of this.itemsContainer.children)this.intersectionObserver.observe(e)},this.mutationObserver=new MutationObserver(this.onMutation),this.lastRenderedItemsLength=0,this.resetVisibleItemsDebouncer=new o.Debouncer(10)}get scrollable(){var e;return(e=this._scrollable)!==null&&e!==void 0?e:document.body}set scrollable(e){var t,s,i;this._scrollable!==e&&(this._scrollable&&(this._scrollable.removeEventListener("scroll",this.scrollListener),this.initialOverflowAnchorValue&&(this._scrollable.style.overflowAnchor=this.initialOverflowAnchorValue),o.scrollHelper.release(this,this._scrollable)),this._scrollable=o.scrollHelper.lock(this,e),e&&!this._scrollable&&console.error("Scrollable parent is already locked",this,e),(t=this._scrollable)===null||t===void 0||t.addEventListener("scroll",this.scrollListener),this.lastScrollTop=(s=this._scrollable)===null||s===void 0?void 0:s.scrollTop,this.lastScrollHeight=(i=this._scrollable)===null||i===void 0?void 0:i.scrollHeight,this._scrollable&&(this.initialOverflowAnchorValue=getComputedStyle(this._scrollable).overflowAnchor,this._scrollable.style.overflowAnchor="none"))}render(){return f.html`
             <div @scroll-into-view="${this.onScrollIntoView}" class="items-container ${this.internalScroll?"scrollable":""}" tabindex="-1">
                 ${(0,N.repeat)(this.items,(e,t)=>this.getItemKey(e,t),(e,t)=>this.renderItemContainer(e,t))}
             </div>
@@ -38,4 +38,4 @@
                  data-item-index="${t}">
                 ${i?(()=>{let h=this.renderItem(e,t);return typeof h=="string"?(0,F.unsafeHTML)(h):h})():f.nothing}
             </div>
-        `}prepareRenderIfNeeded(e){let t=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!t&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.addRenderedIndex(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}addRenderedIndex(e){e>=0&&!this.renderedIndexes.has(e)&&this.renderedIndexes.add(e)}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=B(this.visibleItems)+this.renderAfterLast}isRendered(e){return this.renderedIndexes.has(this.items.indexOf(e))}resetScroll(e=!0){this.shouldRestoreScroll=!1,this.intersectionObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.internalScroll&&this.scrollable!==this.internalScrollable?this.scrollable=this.internalScrollable:!this.internalScroll&&e&&(this.scrollable=o.scrollHelper.findFirstScrollableParent(this.itemsContainer));let t=this.resolveScrollToIndex();this.addRenderedIndex(t),this.scrollToTarget(t),this.scrollDoneDebouncer.run(()=>{this.ensureScrollToTarget&&t>=0&&this.scrollDebouncer.run(()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(t))>5&&this.scrollToTarget(t)},500),this.scrollToTarget(t),this.scrolledToTarget=!0,this.shouldRestoreScroll=!0,this.resetIntersectionObserver()})}resolveScrollToIndex(){var e;let t=(e=this.scrollToIndex)!==null&&e!==void 0?e:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;return t>=this.items.length?-1:t}getItem(e){var t,s,i;return(s=(t=this.shadowRoot)===null||t===void 0?void 0:t.querySelector(`#item-${e}`))!==null&&s!==void 0?s:(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector("#item-0")}scrollToTarget(e){e<=0?(this.scrollable.scrollTop=0,this.scrollRestorationOffset=-this.getOffset(e)):(this.scrollable.scrollTop=this.getOffset(e),this.scrollRestorationOffset=0),this.scrollRestorationItem=e>=0?e:void 0}onScrollIntoView(e){var t;this.scrollDebouncer.cancel();let s=e.composedPath()[0],i=this.getOffset(s),l=(t=e.composedPath().find(h=>typeof h.matches=="function"&&h.matches(".item-container")))===null||t===void 0?void 0:t.getAttribute("data-item-index");this.scrollRestorationItem=l==null?this.scrollRestorationItem:+l,this.scrollRestorationOffset=i-this.getOffset(this.scrollRestorationItem),this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop=i}getOffset(e){let t=typeof e=="number"?this.getItem(e):e;return t?o.scrollHelper.getAbsoluteScrollOffset(this.scrollable,t):0}appendItems(...e){this.items=[...this.items,...e]}prependItems(...e){this.items=[...e,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0}),this.resetScroll()},0)}disconnectedCallback(){super.disconnectedCallback(),this.scrollable=void 0,this.intersectionObserver.disconnect(),this.mutationObserver.disconnect(),this.shouldRestoreScroll=!1}resetIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1,1]}),this.onMutation()}searchFirstVisibleItem(e,t,s,i){if(s=s??0,i=i??t.length-1,i<=s)return t[s];let l=Math.floor((i-s)/2)+s,h=t[l],d=this.getOffset(h);return d>e?this.searchFirstVisibleItem(e,t,s,l-1):d+h.clientHeight<e?this.searchFirstVisibleItem(e,t,l+1,i):h}get shouldRestoreScroll(){return this._shouldRestoreScroll}set shouldRestoreScroll(e){let t=e&&!this._shouldRestoreScroll;this._shouldRestoreScroll=e,t&&requestAnimationFrame(this.scrollAdjustment)}update(e){super.update(e),e.has("items")&&(this.renderedIndexes=new Set,this.lastRenderedItemsLength=0,this.renderApprovalTimeouts=[]),((e.has("scrollToItem")||e.has("scrollToIndex"))&&(this.scrollToItem!=null||this.scrollToIndex!=null)||e.has("internalScroll"))&&this.resetScroll()}updated(e){super.updated(e),(e.has("visibleItems")||e.has("items"))&&this.onVisibleItemsChange(),e.has("scrolledToTarget")&&this.scrolledToTarget&&(this.scrollToItem!=null||this.scrollToIndex!=null)&&this.dispatchEvent(new S)}contentAvailableCallback(e){var t,s;super.contentAvailableCallback(e);let i=[...(s=(t=this.shadowRoot)===null||t===void 0?void 0:t.querySelectorAll(".item-container.rendered"))!==null&&s!==void 0?s:[]].map(l=>+l.getAttribute("data-item-index"));this.lastRenderedItemsLength!==i.length&&(this.dispatchRenderedItemsChangeEvent(i),this.lastRenderedItemsLength=i.length)}dispatchRenderedItemsChangeEvent(e){let t=e??[...this.renderedIndexes].sort((s,i)=>s-i);this.dispatchEvent(new R(t,t.map(s=>this.items[s])))}onVisibleItemsChange(){this.visibleItems.every((t,s)=>this.visibleItems[s+1]==null||t+1===this.visibleItems[s+1])||(0,o.deepEqual)(this.visibleItems,this.lastNotOkVisibleItems)?(this.resetVisibleItemsDebouncer.cancel(),this.dispatchVisibleItemsEvent()):this.resetVisibleItemsDebouncer.run(()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.resetIntersectionObserver()})}dispatchVisibleItemsEvent(){var e;(e=this.cancelableDispatchEvent)===null||e===void 0||e.cancel(),this.cancelableDispatchEvent=(0,o.cancelable)((0,o.waitUntil)(()=>this.scrolledToTarget&&!this.scrolling)),this.cancelableDispatchEvent.then(()=>this.dispatchEvent(new T(this.visibleItems,this.visibleItems.map(t=>this.items[t])))).catch(()=>null)}};n.styles=L;c([(0,a.property)({type:Array})],n.prototype,"items",void 0);c([(0,a.property)({attribute:!1})],n.prototype,"renderItem",void 0);c([(0,a.property)({attribute:!1})],n.prototype,"getItemKey",void 0);c([(0,a.property)({type:Object})],n.prototype,"scrollToItem",void 0);c([(0,a.property)({type:Number})],n.prototype,"scrollToIndex",void 0);c([(0,a.property)({type:Boolean})],n.prototype,"internalScroll",void 0);c([(0,a.property)({type:Number})],n.prototype,"renderBeforeFirst",void 0);c([(0,a.property)({type:Number})],n.prototype,"renderAfterLast",void 0);c([(0,a.property)({type:Boolean})],n.prototype,"ensureScrollToTarget",void 0);c([(0,a.state)({hasChanged(r,e){return r!=null&&e==null||r.length!==e.length||r[0]!==e[0]}})],n.prototype,"visibleItems",void 0);c([(0,a.query)(".scrollable")],n.prototype,"internalScrollable",void 0);c([(0,a.query)(".items-container")],n.prototype,"itemsContainer",void 0);c([(0,a.state)()],n.prototype,"scrolledToTarget",void 0);c([(0,a.state)()],n.prototype,"scrolling",void 0);(0,$.customElement)("ft-infinite-scroll")(n);})();
+        `}prepareRenderIfNeeded(e){let t=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!t&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.addRenderedIndex(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}addRenderedIndex(e){e>=0&&!this.renderedIndexes.has(e)&&this.renderedIndexes.add(e)}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=G(this.visibleItems)+this.renderAfterLast}isRendered(e){return this.renderedIndexes.has(this.items.indexOf(e))}resetScroll(e=!0){this.shouldRestoreScroll=!1,this.intersectionObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.internalScroll&&this.scrollable!==this.internalScrollable?this.scrollable=this.internalScrollable:!this.internalScroll&&e&&(this.scrollable=o.scrollHelper.findFirstScrollableParent(this.itemsContainer));let t=this.resolveScrollToIndex();this.addRenderedIndex(t),this.scrollToTarget(t),this.scrollDoneDebouncer.run(()=>{this.ensureScrollToTarget&&t>=0&&this.scrollDebouncer.run(()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(t))>5&&this.scrollToTarget(t)},500),this.scrollToTarget(t),this.scrolledToTarget=!0,this.shouldRestoreScroll=!0,this.resetIntersectionObserver()})}resolveScrollToIndex(){var e;let t=(e=this.scrollToIndex)!==null&&e!==void 0?e:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;return t>=this.items.length?-1:t}getItem(e){var t,s,i;return(s=(t=this.shadowRoot)===null||t===void 0?void 0:t.querySelector(`#item-${e}`))!==null&&s!==void 0?s:(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector("#item-0")}scrollToTarget(e){e<=0?(this.scrollable.scrollTop=0,this.scrollRestorationOffset=-this.getOffset(e)):(this.scrollable.scrollTop=this.getOffset(e),this.scrollRestorationOffset=0),this.scrollRestorationItem=e>=0?e:void 0}onScrollIntoView(e){var t;this.scrollDebouncer.cancel();let s=e.composedPath()[0],i=this.getOffset(s),l=(t=e.composedPath().find(h=>typeof h.matches=="function"&&h.matches(".item-container")))===null||t===void 0?void 0:t.getAttribute("data-item-index");this.scrollRestorationItem=l==null?this.scrollRestorationItem:+l,this.scrollRestorationOffset=i-this.getOffset(this.scrollRestorationItem),this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop=i}getOffset(e){let t=typeof e=="number"?this.getItem(e):e;return t?o.scrollHelper.getAbsoluteScrollOffset(this.scrollable,t):0}appendItems(...e){this.items=[...this.items,...e]}prependItems(...e){this.items=[...e,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0}),this.resetScroll()},0)}disconnectedCallback(){super.disconnectedCallback(),this.scrollable=void 0,this.intersectionObserver.disconnect(),this.mutationObserver.disconnect(),this.shouldRestoreScroll=!1}resetIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1,1]}),this.onMutation()}searchFirstVisibleItem(e,t,s,i){if(s=s??0,i=i??t.length-1,i<=s)return t[s];let l=Math.floor((i-s)/2)+s,h=t[l],d=this.getOffset(h);return d>e?this.searchFirstVisibleItem(e,t,s,l-1):d+h.clientHeight<e?this.searchFirstVisibleItem(e,t,l+1,i):h}get shouldRestoreScroll(){return this._shouldRestoreScroll}set shouldRestoreScroll(e){let t=e&&!this._shouldRestoreScroll;this._shouldRestoreScroll=e,t&&requestAnimationFrame(this.scrollAdjustment)}willUpdate(e){super.willUpdate(e),e.has("items")&&(this.renderedIndexes=new Set,this.lastRenderedItemsLength=0,this.renderApprovalTimeouts=[]),((e.has("scrollToItem")||e.has("scrollToIndex"))&&(this.scrollToItem!=null||this.scrollToIndex!=null)||e.has("internalScroll"))&&(0,o.waitFor)(()=>this.itemsContainer).then(()=>this.resetScroll())}updated(e){super.updated(e),(e.has("visibleItems")||e.has("items"))&&this.onVisibleItemsChange(),e.has("scrolledToTarget")&&this.scrolledToTarget&&(this.scrollToItem!=null||this.scrollToIndex!=null)&&this.dispatchEvent(new S)}contentAvailableCallback(e){var t,s;super.contentAvailableCallback(e);let i=[...(s=(t=this.shadowRoot)===null||t===void 0?void 0:t.querySelectorAll(".item-container.rendered"))!==null&&s!==void 0?s:[]].map(l=>+l.getAttribute("data-item-index"));this.lastRenderedItemsLength!==i.length&&(this.dispatchRenderedItemsChangeEvent(i),this.lastRenderedItemsLength=i.length)}dispatchRenderedItemsChangeEvent(e){let t=e??[...this.renderedIndexes].sort((s,i)=>s-i);this.dispatchEvent(new R(t,t.map(s=>this.items[s])))}onVisibleItemsChange(){this.visibleItems.every((t,s)=>this.visibleItems[s+1]==null||t+1===this.visibleItems[s+1])||(0,o.deepEqual)(this.visibleItems,this.lastNotOkVisibleItems)?(this.resetVisibleItemsDebouncer.cancel(),this.dispatchVisibleItemsEvent()):this.resetVisibleItemsDebouncer.run(()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.resetIntersectionObserver()})}dispatchVisibleItemsEvent(){var e;(e=this.cancelableDispatchEvent)===null||e===void 0||e.cancel(),this.cancelableDispatchEvent=(0,o.cancelable)((0,o.waitUntil)(()=>this.scrolledToTarget&&!this.scrolling)),this.cancelableDispatchEvent.then(()=>this.dispatchEvent(new T(this.visibleItems,this.visibleItems.map(t=>this.items[t])))).catch(()=>null)}};n.styles=L;c([(0,a.property)({attribute:!1,hasChanged:o.hasChanged})],n.prototype,"items",void 0);c([(0,a.property)({attribute:!1})],n.prototype,"renderItem",void 0);c([(0,a.property)({attribute:!1})],n.prototype,"getItemKey",void 0);c([(0,a.property)({type:Object})],n.prototype,"scrollToItem",void 0);c([(0,a.property)({type:Number})],n.prototype,"scrollToIndex",void 0);c([(0,a.property)({type:Boolean})],n.prototype,"internalScroll",void 0);c([(0,a.property)({type:Number})],n.prototype,"renderBeforeFirst",void 0);c([(0,a.property)({type:Number})],n.prototype,"renderAfterLast",void 0);c([(0,a.property)({type:Boolean})],n.prototype,"ensureScrollToTarget",void 0);c([(0,a.state)({hasChanged(r,e){return r!=null&&e==null||r.length!==e.length||r[0]!==e[0]}})],n.prototype,"visibleItems",void 0);c([(0,a.query)(".scrollable")],n.prototype,"internalScrollable",void 0);c([(0,a.query)(".items-container")],n.prototype,"itemsContainer",void 0);c([(0,a.state)()],n.prototype,"scrolledToTarget",void 0);c([(0,a.state)()],n.prototype,"scrolling",void 0);(0,$.customElement)("ft-infinite-scroll")(n);})();