@fluid-topics/ft-infinite-scroll 1.2.21 → 1.2.23
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.
|
@@ -1,14 +1,23 @@
|
|
|
1
1
|
import { PropertyValues, TemplateResult } from "lit";
|
|
2
2
|
import { KeyFn } from "lit/directives/repeat.js";
|
|
3
|
-
import { FtLitElement } from "@fluid-topics/ft-wc-utils";
|
|
3
|
+
import { CancelablePromise, Debouncer, FtLitElement, Optional } from "@fluid-topics/ft-wc-utils";
|
|
4
4
|
import { FtInfiniteScrollProperties } from "./ft-infinite-scroll.properties";
|
|
5
|
-
export
|
|
5
|
+
export interface ItemsEventDetail<T> {
|
|
6
|
+
indexes: Array<number>;
|
|
7
|
+
items: Array<T>;
|
|
8
|
+
}
|
|
9
|
+
export interface VisibleItems<T> extends ItemsEventDetail<T> {
|
|
10
|
+
/** @deprecated */
|
|
6
11
|
visibleIndexes: Array<number>;
|
|
12
|
+
/** @deprecated */
|
|
7
13
|
visibleItems: Array<T>;
|
|
8
|
-
}
|
|
14
|
+
}
|
|
9
15
|
export declare class VisibleItemsChangeEvent<T> extends CustomEvent<VisibleItems<T>> {
|
|
10
16
|
constructor(indexes: Array<number>, items: Array<T>);
|
|
11
17
|
}
|
|
18
|
+
export declare class RenderedItemsChangeEvent<T> extends CustomEvent<ItemsEventDetail<T>> {
|
|
19
|
+
constructor(indexes: Array<number>, items: Array<T>);
|
|
20
|
+
}
|
|
12
21
|
export declare class ScrolledToTargetEvent extends Event {
|
|
13
22
|
constructor();
|
|
14
23
|
}
|
|
@@ -27,53 +36,57 @@ export declare class FtInfiniteScroll<T> extends FtLitElement implements FtInfin
|
|
|
27
36
|
internalScrollable?: HTMLDivElement;
|
|
28
37
|
itemsContainer: HTMLDivElement;
|
|
29
38
|
scrolledToTarget: boolean;
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
39
|
+
scrolling: boolean;
|
|
40
|
+
protected renderApprovalTimeouts: Array<any>;
|
|
41
|
+
renderedIndexes: Set<number>;
|
|
42
|
+
protected _scrollable?: HTMLElement;
|
|
43
|
+
protected initialOverflowAnchorValue?: string;
|
|
35
44
|
get scrollable(): HTMLElement;
|
|
36
|
-
|
|
45
|
+
protected set scrollable(newScrollable: HTMLElement | undefined);
|
|
37
46
|
protected render(): TemplateResult<1>;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
private
|
|
47
|
+
protected renderItemContainer(item: T, index: number): TemplateResult<1>;
|
|
48
|
+
protected prepareRenderIfNeeded(index: number): void;
|
|
49
|
+
private addRenderedIndex;
|
|
50
|
+
protected inRenderRange(index: number): boolean;
|
|
41
51
|
isRendered(item: T): boolean;
|
|
42
|
-
|
|
43
|
-
|
|
52
|
+
protected scrollDebouncer: Debouncer;
|
|
53
|
+
protected scrollDoneDebouncer: Debouncer;
|
|
44
54
|
resetScroll(findScrollableParent?: boolean): void;
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
55
|
+
protected resolveScrollToIndex(): number;
|
|
56
|
+
protected getItem(index: number): HTMLElement;
|
|
57
|
+
protected scrollToTarget(index: number): void;
|
|
58
|
+
protected onScrollIntoView(e: Event): void;
|
|
59
|
+
protected getOffset(target: Optional<HTMLElement> | number): number;
|
|
50
60
|
appendItems(...items: Array<T>): void;
|
|
51
61
|
prependItems(...items: Array<T>): void;
|
|
52
62
|
connectedCallback(): void;
|
|
53
63
|
disconnectedCallback(): void;
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
64
|
+
protected onVisibilityChange: (items: IntersectionObserverEntry[]) => void;
|
|
65
|
+
protected intersectionObserver: IntersectionObserver;
|
|
66
|
+
protected resetIntersectionObserver(): void;
|
|
67
|
+
protected scrollingDebouncer: Debouncer;
|
|
68
|
+
protected scrollRestorationItem?: number;
|
|
69
|
+
protected scrollRestorationOffset?: number;
|
|
70
|
+
protected ignoreNextScrollEvent: boolean;
|
|
71
|
+
protected lastScrollTop?: number;
|
|
72
|
+
protected scrollListener: () => void;
|
|
73
|
+
protected searchFirstVisibleItem(currentScrollTop: number, items: HTMLCollection, from?: number, to?: number): Optional<HTMLElement>;
|
|
74
|
+
protected lastScrollHeight?: number;
|
|
75
|
+
protected restoreScrollIfNeeded: (scrollCorrection?: number) => void;
|
|
76
|
+
protected _shouldRestoreScroll: boolean;
|
|
67
77
|
get shouldRestoreScroll(): boolean;
|
|
68
78
|
set shouldRestoreScroll(value: boolean);
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
79
|
+
protected scrollAdjustment: () => void;
|
|
80
|
+
protected onMutation: () => void;
|
|
81
|
+
protected mutationObserver: MutationObserver;
|
|
72
82
|
protected update(props: PropertyValues<FtInfiniteScroll<T>>): void;
|
|
73
83
|
protected updated(props: PropertyValues<FtInfiniteScroll<T>>): void;
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
84
|
+
protected lastRenderedItemsLength: number;
|
|
85
|
+
protected contentAvailableCallback(props: PropertyValues): void;
|
|
86
|
+
dispatchRenderedItemsChangeEvent(renderedItemIndexes?: number[]): void;
|
|
87
|
+
protected lastNotOkVisibleItems?: number[];
|
|
88
|
+
protected resetVisibleItemsDebouncer: Debouncer;
|
|
89
|
+
protected onVisibleItemsChange(): void;
|
|
90
|
+
protected cancelableDispatchEvent?: CancelablePromise<any>;
|
|
91
|
+
dispatchVisibleItemsEvent(): void;
|
|
79
92
|
}
|
|
@@ -7,19 +7,26 @@ 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,
|
|
10
|
+
import { cancelable, Debouncer, deepEqual, FtLitElement, 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 {
|
|
14
14
|
constructor(indexes, items) {
|
|
15
15
|
super("visible-items-change", {
|
|
16
16
|
detail: {
|
|
17
|
+
indexes,
|
|
18
|
+
items,
|
|
17
19
|
visibleIndexes: indexes,
|
|
18
20
|
visibleItems: items
|
|
19
21
|
}
|
|
20
22
|
});
|
|
21
23
|
}
|
|
22
24
|
}
|
|
25
|
+
export class RenderedItemsChangeEvent extends CustomEvent {
|
|
26
|
+
constructor(indexes, items) {
|
|
27
|
+
super("rendered-items-change", { detail: { indexes, items } });
|
|
28
|
+
}
|
|
29
|
+
}
|
|
23
30
|
export class ScrolledToTargetEvent extends Event {
|
|
24
31
|
constructor() {
|
|
25
32
|
super("scrolled-to-target");
|
|
@@ -113,6 +120,7 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
113
120
|
}
|
|
114
121
|
};
|
|
115
122
|
this.mutationObserver = new MutationObserver(this.onMutation);
|
|
123
|
+
this.lastRenderedItemsLength = 0;
|
|
116
124
|
this.resetVisibleItemsDebouncer = new Debouncer(10);
|
|
117
125
|
}
|
|
118
126
|
get scrollable() {
|
|
@@ -170,7 +178,7 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
170
178
|
if (this.inRenderRange(index) && !isAwaitingRenderApproval) {
|
|
171
179
|
this.renderApprovalTimeouts[index] = setTimeout(() => {
|
|
172
180
|
if (this.inRenderRange(index)) { // Still in render range after timeout
|
|
173
|
-
this.
|
|
181
|
+
this.addRenderedIndex(index);
|
|
174
182
|
}
|
|
175
183
|
else {
|
|
176
184
|
this.renderApprovalTimeouts[index] = undefined;
|
|
@@ -179,6 +187,11 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
179
187
|
}, 300);
|
|
180
188
|
}
|
|
181
189
|
}
|
|
190
|
+
addRenderedIndex(index) {
|
|
191
|
+
if (index >= 0 && !this.renderedIndexes.has(index)) {
|
|
192
|
+
this.renderedIndexes.add(index);
|
|
193
|
+
}
|
|
194
|
+
}
|
|
182
195
|
inRenderRange(index) {
|
|
183
196
|
return index >= this.visibleItems[0] - this.renderBeforeFirst && index <= last(this.visibleItems) + this.renderAfterLast;
|
|
184
197
|
}
|
|
@@ -197,7 +210,7 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
197
210
|
this.scrollable = scrollHelper.findFirstScrollableParent(this.itemsContainer);
|
|
198
211
|
}
|
|
199
212
|
const targetIndex = this.resolveScrollToIndex();
|
|
200
|
-
this.
|
|
213
|
+
this.addRenderedIndex(targetIndex);
|
|
201
214
|
this.scrollToTarget(targetIndex);
|
|
202
215
|
this.scrollDoneDebouncer.run(() => {
|
|
203
216
|
if (this.ensureScrollToTarget && targetIndex >= 0) {
|
|
@@ -310,6 +323,7 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
310
323
|
super.update(props);
|
|
311
324
|
if (props.has("items")) {
|
|
312
325
|
this.renderedIndexes = new Set();
|
|
326
|
+
this.lastRenderedItemsLength = 0;
|
|
313
327
|
this.renderApprovalTimeouts = [];
|
|
314
328
|
}
|
|
315
329
|
let scrollTargetUpdated = (props.has("scrollToItem") || props.has("scrollToIndex")) && (this.scrollToItem != null || this.scrollToIndex != null);
|
|
@@ -326,6 +340,20 @@ class FtInfiniteScroll extends FtLitElement {
|
|
|
326
340
|
this.dispatchEvent(new ScrolledToTargetEvent());
|
|
327
341
|
}
|
|
328
342
|
}
|
|
343
|
+
contentAvailableCallback(props) {
|
|
344
|
+
var _a, _b;
|
|
345
|
+
super.contentAvailableCallback(props);
|
|
346
|
+
const renderedItemIndexes = [...(_b = (_a = this.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll(".item-container.rendered")) !== null && _b !== void 0 ? _b : []]
|
|
347
|
+
.map(e => +e.getAttribute("data-item-index"));
|
|
348
|
+
if (this.lastRenderedItemsLength !== renderedItemIndexes.length) {
|
|
349
|
+
this.dispatchRenderedItemsChangeEvent(renderedItemIndexes);
|
|
350
|
+
this.lastRenderedItemsLength = renderedItemIndexes.length;
|
|
351
|
+
}
|
|
352
|
+
}
|
|
353
|
+
dispatchRenderedItemsChangeEvent(renderedItemIndexes) {
|
|
354
|
+
const indexes = renderedItemIndexes !== null && renderedItemIndexes !== void 0 ? renderedItemIndexes : [...this.renderedIndexes].sort((a, b) => a - b);
|
|
355
|
+
this.dispatchEvent(new RenderedItemsChangeEvent(indexes, indexes.map(i => this.items[i])));
|
|
356
|
+
}
|
|
329
357
|
onVisibleItemsChange() {
|
|
330
358
|
const isVisibleItemsOk = this.visibleItems.every((v, i) => this.visibleItems[i + 1] == null || v + 1 === this.visibleItems[i + 1]);
|
|
331
359
|
if (isVisibleItemsOk || deepEqual(this.visibleItems, this.lastNotOkVisibleItems)) {
|
|
@@ -399,7 +427,4 @@ __decorate([
|
|
|
399
427
|
__decorate([
|
|
400
428
|
state()
|
|
401
429
|
], FtInfiniteScroll.prototype, "scrolling", void 0);
|
|
402
|
-
__decorate([
|
|
403
|
-
state({ hasChanged })
|
|
404
|
-
], FtInfiniteScroll.prototype, "renderedIndexes", void 0);
|
|
405
430
|
export { FtInfiniteScroll };
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";(()=>{var H=Object.create;var y=Object.defineProperty;var M=Object.getOwnPropertyDescriptor;var
|
|
1
|
+
"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`
|
|
2
2
|
.items-container {
|
|
3
3
|
padding: ${I.padding};
|
|
4
4
|
outline: none;
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
display: flow-root;
|
|
29
29
|
min-height: ${I.itemContainerMinHeight};
|
|
30
30
|
}
|
|
31
|
-
`;var
|
|
31
|
+
`;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`
|
|
32
32
|
<div @scroll-into-view="${this.onScrollIntoView}" class="items-container ${this.internalScroll?"scrollable":""}" tabindex="-1">
|
|
33
33
|
${(0,N.repeat)(this.items,(e,t)=>this.getItemKey(e,t),(e,t)=>this.renderItemContainer(e,t))}
|
|
34
34
|
</div>
|
|
@@ -36,6 +36,6 @@
|
|
|
36
36
|
<div id="item-${t}"
|
|
37
37
|
class="item-container ${i?"rendered":""} ${s?"visible":""}"
|
|
38
38
|
data-item-index="${t}">
|
|
39
|
-
${i?(()=>{let
|
|
39
|
+
${i?(()=>{let h=this.renderItem(e,t);return typeof h=="string"?(0,F.unsafeHTML)(h):h})():f.nothing}
|
|
40
40
|
</div>
|
|
41
|
-
`}prepareRenderIfNeeded(e){let t=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!t&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.
|
|
41
|
+
`}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.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);})();
|