@fluid-topics/ft-infinite-scroll 1.1.99 → 1.1.101

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -40,7 +40,7 @@ export declare class FtInfiniteScroll<T> extends FtLitElement implements FtInfin
40
40
  private inRenderRange;
41
41
  private scrollDebouncer;
42
42
  private scrollDoneDebouncer;
43
- resetScroll(dispatchFindScrollableEvent?: boolean): void;
43
+ resetScroll(findScrollableParent?: boolean): void;
44
44
  private resolveScrollToIndex;
45
45
  private getItem;
46
46
  private scrollToTarget;
@@ -49,8 +49,6 @@ export declare class FtInfiniteScroll<T> extends FtLitElement implements FtInfin
49
49
  prependItems(...items: Array<T>): void;
50
50
  connectedCallback(): void;
51
51
  disconnectedCallback(): void;
52
- private findScrollableParent;
53
- private elementCanScroll;
54
52
  private onVisibilityChange;
55
53
  private intersectionObserver;
56
54
  private resetIntersectionObserver;
@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
7
7
  import { html, nothing } from "lit";
8
8
  import { property, query, state } from "lit/decorators.js";
9
9
  import { repeat } from "lit/directives/repeat.js";
10
- import { cancelable, Debouncer, deepEqual, FtLitElement, hasChanged, minmax, waitUntil } from "@fluid-topics/ft-wc-utils";
10
+ import { cancelable, Debouncer, deepEqual, FtLitElement, hasChanged, minmax, scrollHelper, waitUntil } from "@fluid-topics/ft-wc-utils";
11
11
  import { unsafeHTML } from "lit/directives/unsafe-html.js";
12
12
  import { styles } from "./ft-infinite-scroll.styles";
13
13
  export class VisibleItemsChangeEvent extends CustomEvent {
@@ -117,16 +117,22 @@ class FtInfiniteScroll extends FtLitElement {
117
117
  return (_a = this._scrollable) !== null && _a !== void 0 ? _a : document.body;
118
118
  }
119
119
  set scrollable(newScrollable) {
120
- var _a, _b, _c, _d;
120
+ var _a, _b, _c;
121
121
  if (this._scrollable !== newScrollable) {
122
- (_a = this._scrollable) === null || _a === void 0 ? void 0 : _a.removeEventListener("scroll", this.scrollListener);
123
- if (this._scrollable && this.initialOverflowAnchorValue) {
124
- this.scrollable.style.overflowAnchor = this.initialOverflowAnchorValue;
122
+ if (this._scrollable) {
123
+ this._scrollable.removeEventListener("scroll", this.scrollListener);
124
+ if (this.initialOverflowAnchorValue) {
125
+ this._scrollable.style.overflowAnchor = this.initialOverflowAnchorValue;
126
+ }
127
+ scrollHelper.release(this, this._scrollable);
128
+ }
129
+ this._scrollable = scrollHelper.lock(this, newScrollable);
130
+ if (newScrollable && !this._scrollable) {
131
+ console.error("Scrollable parent is already locked", this, newScrollable);
125
132
  }
126
- this._scrollable = newScrollable;
127
- (_b = this._scrollable) === null || _b === void 0 ? void 0 : _b.addEventListener("scroll", this.scrollListener);
128
- this.lastScrollTop = (_c = this._scrollable) === null || _c === void 0 ? void 0 : _c.scrollTop;
129
- this.lastScrollHeight = (_d = this._scrollable) === null || _d === void 0 ? void 0 : _d.scrollHeight;
133
+ (_a = this._scrollable) === null || _a === void 0 ? void 0 : _a.addEventListener("scroll", this.scrollListener);
134
+ this.lastScrollTop = (_b = this._scrollable) === null || _b === void 0 ? void 0 : _b.scrollTop;
135
+ this.lastScrollHeight = (_c = this._scrollable) === null || _c === void 0 ? void 0 : _c.scrollHeight;
130
136
  if (this._scrollable) {
131
137
  this.initialOverflowAnchorValue = getComputedStyle(this._scrollable).overflowAnchor;
132
138
  this._scrollable.style.overflowAnchor = "none";
@@ -135,9 +141,7 @@ class FtInfiniteScroll extends FtLitElement {
135
141
  }
136
142
  render() {
137
143
  return html `
138
- <div class="items-container ${this.internalScroll ? "scrollable" : ""}"
139
- tabindex="-1"
140
- @find-scrollable-parent=${this.findScrollableParent}>
144
+ <div class="items-container ${this.internalScroll ? "scrollable" : ""}" tabindex="-1">
141
145
  ${repeat(this.items, (item, index) => this.getItemKey(item, index), (item, index) => this.renderItemContainer(item, index))}
142
146
  </div>
143
147
  `;
@@ -175,8 +179,7 @@ class FtInfiniteScroll extends FtLitElement {
175
179
  inRenderRange(index) {
176
180
  return index >= this.visibleItems[0] - this.renderBeforeFirst && index <= last(this.visibleItems) + this.renderAfterLast;
177
181
  }
178
- resetScroll(dispatchFindScrollableEvent = true) {
179
- var _a;
182
+ resetScroll(findScrollableParent = true) {
180
183
  this.shouldRestoreScroll = false;
181
184
  this.intersectionObserver.disconnect();
182
185
  this.visibleItems = [];
@@ -184,9 +187,8 @@ class FtInfiniteScroll extends FtLitElement {
184
187
  if (this.internalScroll && this.scrollable !== this.internalScrollable) {
185
188
  this.scrollable = this.internalScrollable;
186
189
  }
187
- else if (!this.internalScroll && dispatchFindScrollableEvent) {
188
- (_a = this.itemsContainer) === null || _a === void 0 ? void 0 : _a.dispatchEvent(new Event("find-scrollable-parent", { composed: true }));
189
- return;
190
+ else if (!this.internalScroll && findScrollableParent) {
191
+ this.scrollable = scrollHelper.findFirstScrollableParent(this.itemsContainer);
190
192
  }
191
193
  const targetIndex = this.resolveScrollToIndex();
192
194
  this.renderedIndexes.add(targetIndex);
@@ -226,14 +228,8 @@ class FtInfiniteScroll extends FtLitElement {
226
228
  this.scrollRestorationItem = index >= 0 ? index : undefined;
227
229
  }
228
230
  getOffset(target) {
229
- var _a;
230
- let offset = 0;
231
231
  let el = typeof target === "number" ? this.getItem(target) : target;
232
- while (el && el.offsetParent !== this.scrollable.offsetParent) {
233
- offset += el.offsetTop;
234
- el = el.offsetParent;
235
- }
236
- return offset + ((_a = el === null || el === void 0 ? void 0 : el.offsetTop) !== null && _a !== void 0 ? _a : 0) - this.scrollable.offsetTop;
232
+ return el ? scrollHelper.getAbsoluteScrollOffset(this.scrollable, el) : 0;
237
233
  }
238
234
  appendItems(...items) {
239
235
  this.items = [...this.items, ...items];
@@ -256,33 +252,6 @@ class FtInfiniteScroll extends FtLitElement {
256
252
  this.mutationObserver.disconnect();
257
253
  this.shouldRestoreScroll = false;
258
254
  }
259
- findScrollableParent(e) {
260
- var _a;
261
- e.stopPropagation();
262
- let scrollable, maybeScrollable;
263
- for (let target of e.composedPath()) {
264
- const element = target;
265
- const mayScroll = this.elementCanScroll(element);
266
- const definitelyScrolls = mayScroll && element.clientHeight && element.clientHeight < element.scrollHeight;
267
- if (definitelyScrolls) {
268
- scrollable = element;
269
- break;
270
- }
271
- else if (mayScroll && maybeScrollable == null) {
272
- maybeScrollable = element;
273
- }
274
- }
275
- this.scrollable = (_a = scrollable !== null && scrollable !== void 0 ? scrollable : maybeScrollable) !== null && _a !== void 0 ? _a : document.body;
276
- this.resetScroll(false);
277
- }
278
- elementCanScroll(element) {
279
- try {
280
- return ["auto", "scroll"].includes(getComputedStyle(element).overflowY);
281
- }
282
- catch (e) {
283
- return false;
284
- }
285
- }
286
255
  resetIntersectionObserver() {
287
256
  this.intersectionObserver.disconnect();
288
257
  this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange, {
@@ -1,4 +1,4 @@
1
- "use strict";(()=>{var F=Object.create;var y=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var P=Object.getPrototypeOf,j=Object.prototype.hasOwnProperty;var u=(r,e)=>()=>(e||r((e={exports:{}}).exports,e),e.exports);var q=(r,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of L(e))!j.call(r,i)&&i!==t&&y(r,i,{get:()=>e[i],enumerable:!(s=M(e,i))||s.enumerable});return r};var f=(r,e,t)=>(t=r!=null?F(P(r)):{},q(e||!r||!r.__esModule?y(t,"default",{value:r,enumerable:!0}):t,r));var p=u((B,O)=>{O.exports=ftGlobals.wcUtils});var g=u((U,R)=>{R.exports=ftGlobals.lit});var x=u((K,w)=>{w.exports=ftGlobals.litDecorators});var C=u((Z,_)=>{_.exports=ftGlobals.litRepeat});var E=u((W,A)=>{A.exports=ftGlobals.litUnsafeHTML});var $=f(p());var m=f(g()),a=f(x()),H=f(C()),c=f(p()),N=f(E());var V=f(g()),v=f(p()),I={padding:v.FtCssVariableFactory.create("--ft-infinite-scroll-padding","","SIZE","0"),itemsGap:v.FtCssVariableFactory.create("--ft-infinite-scroll-items-gap","","SIZE","4px"),itemContainerMinHeight:v.FtCssVariableFactory.create("--ft-infinite-scroll-item-container-min-height","","SIZE",".1px")},D=V.css`
1
+ "use strict";(()=>{var M=Object.create;var S=Object.defineProperty;var $=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames;var j=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty;var b=(l,e)=>()=>(e||l((e={exports:{}}).exports,e),e.exports);var q=(l,e,t,s)=>{if(e&&typeof e=="object"||typeof e=="function")for(let i of L(e))!k.call(l,i)&&i!==t&&S(l,i,{get:()=>e[i],enumerable:!(s=$(e,i))||s.enumerable});return l};var m=(l,e,t)=>(t=l!=null?M(j(l)):{},q(e||!l||!l.__esModule?S(t,"default",{value:l,enumerable:!0}):t,l));var u=b((U,O)=>{O.exports=ftGlobals.wcUtils});var g=b((K,R)=>{R.exports=ftGlobals.lit});var w=b((P,x)=>{x.exports=ftGlobals.litDecorators});var A=b((Z,_)=>{_.exports=ftGlobals.litRepeat});var E=b((W,C)=>{C.exports=ftGlobals.litUnsafeHTML});var H=m(u());var f=m(g()),h=m(w()),N=m(A()),o=m(u()),F=m(E());var V=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")},D=V.css`
2
2
  .items-container {
3
3
  padding: ${I.padding};
4
4
  outline: none;
@@ -28,16 +28,14 @@
28
28
  display: flow-root;
29
29
  min-height: ${I.itemContainerMinHeight};
30
30
  }
31
- `;var h=function(r,e,t,s){var i=arguments.length,l=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,o;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--)(o=r[d])&&(l=(i<3?o(l):i>3?o(e,t,l):o(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:{visibleIndexes:e,visibleItems:t}})}},S=class extends Event{constructor(){super("scrolled-to-target")}},G=r=>(r??[])[(r??[]).length-1],n=class extends c.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>m.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 c.Debouncer(5),this.scrollDoneDebouncer=new c.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 c.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.scrollRestorationItem!=null&&this.scrollRestorationOffset!=null&&this.scrolledToTarget){let l=this.getItem(this.scrollRestorationItem),o=this.getOffset(l),d=(0,c.minmax)(this.scrollRestorationItem===0?-o:1,this.scrollRestorationOffset,l.clientHeight-1),b=o+d+e-this.scrollable.scrollTop;(Math.abs(i-b)<4||Math.abs(b)>5)&&(this.ignoreNextScrollEvent=!0,this.scrollable.scrollTop+=b)}},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.resetVisibleItemsDebouncer=new c.Debouncer(10)}get scrollable(){var e;return(e=this._scrollable)!==null&&e!==void 0?e:document.body}set scrollable(e){var t,s,i,l;this._scrollable!==e&&((t=this._scrollable)===null||t===void 0||t.removeEventListener("scroll",this.scrollListener),this._scrollable&&this.initialOverflowAnchorValue&&(this.scrollable.style.overflowAnchor=this.initialOverflowAnchorValue),this._scrollable=e,(s=this._scrollable)===null||s===void 0||s.addEventListener("scroll",this.scrollListener),this.lastScrollTop=(i=this._scrollable)===null||i===void 0?void 0:i.scrollTop,this.lastScrollHeight=(l=this._scrollable)===null||l===void 0?void 0:l.scrollHeight,this._scrollable&&(this.initialOverflowAnchorValue=getComputedStyle(this._scrollable).overflowAnchor,this._scrollable.style.overflowAnchor="none"))}render(){return m.html`
32
- <div class="items-container ${this.internalScroll?"scrollable":""}"
33
- tabindex="-1"
34
- @find-scrollable-parent=${this.findScrollableParent}>
35
- ${(0,H.repeat)(this.items,(e,t)=>this.getItemKey(e,t),(e,t)=>this.renderItemContainer(e,t))}
31
+ `;var a=function(l,e,t,s){var i=arguments.length,r=i<3?e:s===null?s=Object.getOwnPropertyDescriptor(e,t):s,c;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")r=Reflect.decorate(l,e,t,s);else for(var d=l.length-1;d>=0;d--)(c=l[d])&&(r=(i<3?c(r):i>3?c(e,t,r):c(e,t))||r);return i>3&&r&&Object.defineProperty(e,t,r),r},T=class extends CustomEvent{constructor(e,t){super("visible-items-change",{detail:{visibleIndexes:e,visibleItems:t}})}},y=class extends Event{constructor(){super("scrolled-to-target")}},G=l=>(l??[])[(l??[]).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 r=+i.target.getAttribute("data-item-index");i.intersectionRect.height>0?(t.add(r),s.add(r)):s.has(r)||t.delete(r)}this.visibleItems=[...t].sort((i,r)=>i-r)},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 r=this.searchFirstVisibleItem(s,this.itemsContainer.children);this.scrollRestorationItem=r?+r.getAttribute("data-item-index"):void 0,this.scrollRestorationOffset=s-this.getOffset(r)}},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.scrollRestorationItem!=null&&this.scrollRestorationOffset!=null&&this.scrolledToTarget){let r=this.getItem(this.scrollRestorationItem),c=this.getOffset(r),d=(0,o.minmax)(this.scrollRestorationItem===0?-c:1,this.scrollRestorationOffset,r.clientHeight-1),v=c+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.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`
32
+ <div class="items-container ${this.internalScroll?"scrollable":""}" tabindex="-1">
33
+ ${(0,N.repeat)(this.items,(e,t)=>this.getItemKey(e,t),(e,t)=>this.renderItemContainer(e,t))}
36
34
  </div>
37
- `}renderItemContainer(e,t){this.prepareRenderIfNeeded(t);let s=this.scrolledToTarget&&this.visibleItems.includes(t),i=this.renderedIndexes.has(t);return m.html`
35
+ `}renderItemContainer(e,t){this.prepareRenderIfNeeded(t);let s=this.scrolledToTarget&&this.visibleItems.includes(t),i=this.renderedIndexes.has(t);return f.html`
38
36
  <div id="item-${t}"
39
37
  class="item-container ${i?"rendered":""} ${s?"visible":""}"
40
38
  data-item-index="${t}">
41
- ${i?(()=>{let o=this.renderItem(e,t);return typeof o=="string"?(0,N.unsafeHTML)(o):o})():m.nothing}
39
+ ${i?(()=>{let c=this.renderItem(e,t);return typeof c=="string"?(0,F.unsafeHTML)(c):c})():f.nothing}
42
40
  </div>
43
- `}prepareRenderIfNeeded(e){let t=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!t&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.renderedIndexes.add(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=G(this.visibleItems)+this.renderAfterLast}resetScroll(e=!0){var t;if(this.shouldRestoreScroll=!1,this.intersectionObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.internalScroll&&this.scrollable!==this.internalScrollable)this.scrollable=this.internalScrollable;else if(!this.internalScroll&&e){(t=this.itemsContainer)===null||t===void 0||t.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}));return}let s=this.resolveScrollToIndex();this.renderedIndexes.add(s),this.scrollToTarget(s),this.scrollDoneDebouncer.run(()=>{this.ensureScrollToTarget&&s>=0&&this.scrollDebouncer.run(()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(s))>5&&this.scrollToTarget(s)},500),this.scrollToTarget(s),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}getOffset(e){var t;let s=0,i=typeof e=="number"?this.getItem(e):e;for(;i&&i.offsetParent!==this.scrollable.offsetParent;)s+=i.offsetTop,i=i.offsetParent;return s+((t=i?.offsetTop)!==null&&t!==void 0?t:0)-this.scrollable.offsetTop}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}findScrollableParent(e){var t;e.stopPropagation();let s,i;for(let l of e.composedPath()){let o=l,d=this.elementCanScroll(o);if(d&&o.clientHeight&&o.clientHeight<o.scrollHeight){s=o;break}else d&&i==null&&(i=o)}this.scrollable=(t=s??i)!==null&&t!==void 0?t:document.body,this.resetScroll(!1)}elementCanScroll(e){try{return["auto","scroll"].includes(getComputedStyle(e).overflowY)}catch{return!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,o=t[l],d=this.getOffset(o);return d>e?this.searchFirstVisibleItem(e,t,s,l-1):d+o.clientHeight<e?this.searchFirstVisibleItem(e,t,l+1,i):o}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.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)}onVisibleItemsChange(){this.visibleItems.every((t,s)=>this.visibleItems[s+1]==null||t+1===this.visibleItems[s+1])||(0,c.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,c.cancelable)((0,c.waitUntil)(()=>!this.scrolling)),this.cancelableDispatchEvent.then(()=>this.dispatchEvent(new T(this.visibleItems,this.visibleItems.map(t=>this.items[t])))).catch(()=>null)}};n.styles=D;h([(0,a.property)({type:Array})],n.prototype,"items",void 0);h([(0,a.property)({attribute:!1})],n.prototype,"renderItem",void 0);h([(0,a.property)({attribute:!1})],n.prototype,"getItemKey",void 0);h([(0,a.property)({type:Object})],n.prototype,"scrollToItem",void 0);h([(0,a.property)({type:Number})],n.prototype,"scrollToIndex",void 0);h([(0,a.property)({type:Boolean})],n.prototype,"internalScroll",void 0);h([(0,a.property)({type:Number})],n.prototype,"renderBeforeFirst",void 0);h([(0,a.property)({type:Number})],n.prototype,"renderAfterLast",void 0);h([(0,a.property)({type:Boolean})],n.prototype,"ensureScrollToTarget",void 0);h([(0,a.state)({hasChanged(r,e){return r!=null&&e==null||r.length!==e.length||r[0]!==e[0]}})],n.prototype,"visibleItems",void 0);h([(0,a.query)(".scrollable")],n.prototype,"internalScrollable",void 0);h([(0,a.query)(".items-container")],n.prototype,"itemsContainer",void 0);h([(0,a.state)()],n.prototype,"scrolledToTarget",void 0);h([(0,a.state)()],n.prototype,"scrolling",void 0);h([(0,a.state)({hasChanged:c.hasChanged})],n.prototype,"renderedIndexes",void 0);(0,$.customElement)("ft-infinite-scroll")(n);})();
41
+ `}prepareRenderIfNeeded(e){let t=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!t&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.renderedIndexes.add(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=G(this.visibleItems)+this.renderAfterLast}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.renderedIndexes.add(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}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 r=Math.floor((i-s)/2)+s,c=t[r],d=this.getOffset(c);return d>e?this.searchFirstVisibleItem(e,t,s,r-1):d+c.clientHeight<e?this.searchFirstVisibleItem(e,t,r+1,i):c}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.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 y)}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.scrolling)),this.cancelableDispatchEvent.then(()=>this.dispatchEvent(new T(this.visibleItems,this.visibleItems.map(t=>this.items[t])))).catch(()=>null)}};n.styles=D;a([(0,h.property)({type:Array})],n.prototype,"items",void 0);a([(0,h.property)({attribute:!1})],n.prototype,"renderItem",void 0);a([(0,h.property)({attribute:!1})],n.prototype,"getItemKey",void 0);a([(0,h.property)({type:Object})],n.prototype,"scrollToItem",void 0);a([(0,h.property)({type:Number})],n.prototype,"scrollToIndex",void 0);a([(0,h.property)({type:Boolean})],n.prototype,"internalScroll",void 0);a([(0,h.property)({type:Number})],n.prototype,"renderBeforeFirst",void 0);a([(0,h.property)({type:Number})],n.prototype,"renderAfterLast",void 0);a([(0,h.property)({type:Boolean})],n.prototype,"ensureScrollToTarget",void 0);a([(0,h.state)({hasChanged(l,e){return l!=null&&e==null||l.length!==e.length||l[0]!==e[0]}})],n.prototype,"visibleItems",void 0);a([(0,h.query)(".scrollable")],n.prototype,"internalScrollable",void 0);a([(0,h.query)(".items-container")],n.prototype,"itemsContainer",void 0);a([(0,h.state)()],n.prototype,"scrolledToTarget",void 0);a([(0,h.state)()],n.prototype,"scrolling",void 0);a([(0,h.state)({hasChanged:o.hasChanged})],n.prototype,"renderedIndexes",void 0);(0,H.customElement)("ft-infinite-scroll")(n);})();