@fluid-topics/ft-infinite-scroll 0.3.67 → 0.3.69
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,5 +1,6 @@
|
|
|
1
1
|
export declare const FtInfiniteScrollCssVariables: {
|
|
2
2
|
padding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
3
|
+
itemsGap: import("@fluid-topics/ft-wc-utils").FtCssVariable;
|
|
3
4
|
};
|
|
4
5
|
export declare const styles: import("lit").CSSResult;
|
|
5
6
|
//# sourceMappingURL=ft-infinite-scroll.css.d.ts.map
|
|
@@ -2,6 +2,7 @@ import { css } from "lit";
|
|
|
2
2
|
import { FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
|
|
3
3
|
export const FtInfiniteScrollCssVariables = {
|
|
4
4
|
padding: FtCssVariableFactory.create("--ft-infinite-scroll-padding", "SIZE", "0"),
|
|
5
|
+
itemsGap: FtCssVariableFactory.create("--ft-infinite-scroll-items-gap", "SIZE", "4px"),
|
|
5
6
|
};
|
|
6
7
|
// language=CSS
|
|
7
8
|
export const styles = css `
|
|
@@ -25,15 +26,20 @@ export const styles = css `
|
|
|
25
26
|
We add a gap between items to be sure to hide the content above the targeted item
|
|
26
27
|
When a div is visible (even by a fraction of a pixel) if its height changes
|
|
27
28
|
the browser will try to keep the scroll stable in relation to the first visible element
|
|
28
|
-
By adding this gap we ensure that the previous item will be fully hidden
|
|
29
|
+
By adding this gap we ensure that the previous item will be fully hidden
|
|
30
|
+
and even if its size changes, it will not impact the scroll offset
|
|
29
31
|
*/
|
|
30
|
-
margin-top:
|
|
32
|
+
margin-top: ${FtInfiniteScrollCssVariables.itemsGap};
|
|
31
33
|
}
|
|
32
34
|
|
|
33
35
|
.resizable:not(.rendered) {
|
|
34
36
|
width: 0;
|
|
35
37
|
}
|
|
36
38
|
|
|
39
|
+
.resizable > * {
|
|
40
|
+
min-height: .1px;
|
|
41
|
+
}
|
|
42
|
+
|
|
37
43
|
.rendered {
|
|
38
44
|
display: flow-root;
|
|
39
45
|
}
|
|
@@ -40,14 +40,19 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
40
40
|
this.scrollDebouncer = new Debouncer(5);
|
|
41
41
|
this.scrollDoneDebouncer = new Debouncer(10);
|
|
42
42
|
this.onVisibilityChange = (items) => {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
43
|
+
let visibleItems = new Set(this.visibleItems);
|
|
44
|
+
let newItems = new Set();
|
|
45
|
+
for (let item of items) {
|
|
46
|
+
let index = +item.target.attributes.getNamedItem("data-item-index").value;
|
|
47
|
+
if (item.intersectionRect.height > 0) {
|
|
48
|
+
visibleItems.add(index);
|
|
49
|
+
newItems.add(index);
|
|
50
|
+
}
|
|
51
|
+
else if (!newItems.has(index)) {
|
|
52
|
+
visibleItems.delete(index);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
this.visibleItems = [...visibleItems].sort((a, b) => a - b);
|
|
51
56
|
};
|
|
52
57
|
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange);
|
|
53
58
|
this.onResize = (resizables) => {
|
|
@@ -179,7 +184,7 @@ export class FtInfiniteScroll extends FtLitElement {
|
|
|
179
184
|
this.intersectionObserver = new IntersectionObserver(this.onVisibilityChange, {
|
|
180
185
|
root: this.scrollable,
|
|
181
186
|
rootMargin: "-8px",
|
|
182
|
-
threshold: [0, 0.01, 0.1]
|
|
187
|
+
threshold: [0, 0.01, 0.1, 1]
|
|
183
188
|
});
|
|
184
189
|
}
|
|
185
190
|
triggerFindScrollableParent() {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
!function(t,e,i,s,l,n){const r={padding:e.FtCssVariableFactory.create("--ft-infinite-scroll-padding","SIZE","0")},o=i.css`
|
|
1
|
+
!function(t,e,i,s,l,n){const r={padding:e.FtCssVariableFactory.create("--ft-infinite-scroll-padding","SIZE","0"),itemsGap:e.FtCssVariableFactory.create("--ft-infinite-scroll-items-gap","SIZE","4px")},o=i.css`
|
|
2
2
|
.items-container {
|
|
3
3
|
position: relative;
|
|
4
4
|
padding: ${r.padding};
|
|
@@ -19,19 +19,24 @@
|
|
|
19
19
|
We add a gap between items to be sure to hide the content above the targeted item
|
|
20
20
|
When a div is visible (even by a fraction of a pixel) if its height changes
|
|
21
21
|
the browser will try to keep the scroll stable in relation to the first visible element
|
|
22
|
-
By adding this gap we ensure that the previous item will be fully hidden
|
|
22
|
+
By adding this gap we ensure that the previous item will be fully hidden
|
|
23
|
+
and even if its size changes, it will not impact the scroll offset
|
|
23
24
|
*/
|
|
24
|
-
margin-top:
|
|
25
|
+
margin-top: ${r.itemsGap};
|
|
25
26
|
}
|
|
26
27
|
|
|
27
28
|
.resizable:not(.rendered) {
|
|
28
29
|
width: 0;
|
|
29
30
|
}
|
|
30
31
|
|
|
32
|
+
.resizable > * {
|
|
33
|
+
min-height: .1px;
|
|
34
|
+
}
|
|
35
|
+
|
|
31
36
|
.rendered {
|
|
32
37
|
display: flow-root;
|
|
33
38
|
}
|
|
34
|
-
`;var h=function(t,e,i,s){for(var l,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,o=t.length-1;o>=0;o--)(l=t[o])&&(r=(n<3?l(r):n>3?l(e,i,r):l(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class a extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class d extends Event{constructor(){super("scrolled-to-target")}}class c extends e.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>i.html``,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e.Debouncer(5),this.scrollDoneDebouncer=new e.Debouncer(10),this.onVisibilityChange=t=>{
|
|
39
|
+
`;var h=function(t,e,i,s){for(var l,n=arguments.length,r=n<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,o=t.length-1;o>=0;o--)(l=t[o])&&(r=(n<3?l(r):n>3?l(e,i,r):l(e,i))||r);return n>3&&r&&Object.defineProperty(e,i,r),r};class a extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class d extends Event{constructor(){super("scrolled-to-target")}}class c extends e.FtLitElement{constructor(){super(...arguments),this.items=[],this.renderItem=()=>i.html``,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e.Debouncer(5),this.scrollDoneDebouncer=new e.Debouncer(10),this.onVisibilityChange=t=>{let e=new Set(this.visibleItems),i=new Set;for(let s of t){let t=+s.target.attributes.getNamedItem("data-item-index").value;s.intersectionRect.height>0?(e.add(t),i.add(t)):i.has(t)||e.delete(t)}this.visibleItems=[...e].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{var e;this.triggerFindScrollableParent(),t=t.sort(((t,e)=>t.contentRect.top-e.contentRect.top));for(const i of t){const t=+i.target.parentElement.getAttribute("data-item-index"),s=i.target.parentElement.clientHeight,l=i.contentRect.height;if(this.alreadyRenderedIndexes.has(t)){if(this.scrollable){"none"===(null!==(e=getComputedStyle(this.scrollable).overflowAnchor)&&void 0!==e?e:"none")&&this.getOffset(i.target.parentElement)+s<this.scrollable.scrollTop&&(this.scrollable.scrollTop+=Math.ceil(l-s))}i.target.parentElement.style.height=l+"px"}}},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.intersectionObserver.observe(t),this.resizeObserver.observe(t.children.item(0))}))},this.mutationObserver=new MutationObserver(this.onMutation)}get scrollable(){return this.internalScroll?this.internalScrollable:this.firstScrollableParent}render(){return i.html`
|
|
35
40
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
36
41
|
tabindex="-1"
|
|
37
42
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
@@ -45,4 +50,4 @@
|
|
|
45
50
|
${l?(()=>{const s=this.renderItem(t,e);return"string"==typeof s?i.html`${n.unsafeHTML(s)}`:s})():null}
|
|
46
51
|
</div>
|
|
47
52
|
</div>
|
|
48
|
-
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t;let e=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;e>=this.items.length&&(e=-1);let i=this.getItem(e);this.scrollToTarget(i),this.onMutation(),this.scrollDoneDebouncer.run((()=>{this.scrolledToTarget=!0}))}))}getItem(t){var e;return null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${t}`)}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable&&0===i?this.scrollable.scrollTop=0:t.scrollIntoView({block:"start"})}}getOffset(t){var e;let i=0,s=t;for(;s&&s.offsetParent!==this.scrollable.offsetParent;)i+=s.offsetTop,s=s.offsetParent;return i+(null!==(e=null==s?void 0:s.offsetTop)&&void 0!==e?e:0)-this.scrollable.offsetTop}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.triggerFindScrollableParent(),this.initIntersectionObserver(),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}initIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1]})}triggerFindScrollableParent(){var t;null===(t=this.itemsContainer)||void 0===t||t.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){let e,i;t.stopPropagation();for(let s of t.composedPath()){const t=s,l=this.elementCanScroll(t);if(t.clientHeight&&t.clientHeight<t.scrollHeight&&l){e=t;break}l&&(i=t)}let s=e||i;s!==this.firstScrollableParent&&(this.firstScrollableParent=s,this.initIntersectionObserver(),this.resetScroll())}elementCanScroll(t){try{return["auto","scroll"].includes(getComputedStyle(t).overflowY)}catch(t){return!1}}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.resetScroll()}update(t){super.update(t),t.has("items")&&(this.alreadyRenderedIndexes=new Set),(t.has("scrollToItem")||t.has("scrollToIndex")&&(null!=this.scrollToItem||null!=this.scrollToIndex))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new a(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&(null!=this.scrollToItem||null!=this.scrollToIndex)&&this.dispatchEvent(new d)}}c.styles=o,h([s.property({type:Array})],c.prototype,"items",void 0),h([s.property({attribute:!1})],c.prototype,"renderItem",void 0),h([s.property({type:Object})],c.prototype,"scrollToItem",void 0),h([s.property({type:Number})],c.prototype,"scrollToIndex",void 0),h([s.property({type:Boolean})],c.prototype,"internalScroll",void 0),h([s.property({type:Number})],c.prototype,"renderBeforeFirst",void 0),h([s.property({type:Number})],c.prototype,"renderAfterLast",void 0),h([s.state({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],c.prototype,"visibleItems",void 0),h([s.query(".scrollable")],c.prototype,"internalScrollable",void 0),h([s.query(".items-container")],c.prototype,"itemsContainer",void 0),h([s.state()],c.prototype,"scrolledToTarget",void 0),e.customElement("ft-infinite-scroll")(c),t.FtInfiniteScroll=c,t.FtInfiniteScrollCssVariables=r,t.ScrolledToTargetEvent=d,t.VisibleItemsChangeEvent=a,t.styles=o,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML);
|
|
53
|
+
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t;let e=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;e>=this.items.length&&(e=-1);let i=this.getItem(e);this.scrollToTarget(i),this.onMutation(),this.scrollDoneDebouncer.run((()=>{this.scrolledToTarget=!0}))}))}getItem(t){var e;return null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${t}`)}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable&&0===i?this.scrollable.scrollTop=0:t.scrollIntoView({block:"start"})}}getOffset(t){var e;let i=0,s=t;for(;s&&s.offsetParent!==this.scrollable.offsetParent;)i+=s.offsetTop,s=s.offsetParent;return i+(null!==(e=null==s?void 0:s.offsetTop)&&void 0!==e?e:0)-this.scrollable.offsetTop}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.triggerFindScrollableParent(),this.initIntersectionObserver(),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}initIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1,1]})}triggerFindScrollableParent(){var t;null===(t=this.itemsContainer)||void 0===t||t.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){let e,i;t.stopPropagation();for(let s of t.composedPath()){const t=s,l=this.elementCanScroll(t);if(t.clientHeight&&t.clientHeight<t.scrollHeight&&l){e=t;break}l&&(i=t)}let s=e||i;s!==this.firstScrollableParent&&(this.firstScrollableParent=s,this.initIntersectionObserver(),this.resetScroll())}elementCanScroll(t){try{return["auto","scroll"].includes(getComputedStyle(t).overflowY)}catch(t){return!1}}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.resetScroll()}update(t){super.update(t),t.has("items")&&(this.alreadyRenderedIndexes=new Set),(t.has("scrollToItem")||t.has("scrollToIndex")&&(null!=this.scrollToItem||null!=this.scrollToIndex))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new a(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&(null!=this.scrollToItem||null!=this.scrollToIndex)&&this.dispatchEvent(new d)}}c.styles=o,h([s.property({type:Array})],c.prototype,"items",void 0),h([s.property({attribute:!1})],c.prototype,"renderItem",void 0),h([s.property({type:Object})],c.prototype,"scrollToItem",void 0),h([s.property({type:Number})],c.prototype,"scrollToIndex",void 0),h([s.property({type:Boolean})],c.prototype,"internalScroll",void 0),h([s.property({type:Number})],c.prototype,"renderBeforeFirst",void 0),h([s.property({type:Number})],c.prototype,"renderAfterLast",void 0),h([s.state({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],c.prototype,"visibleItems",void 0),h([s.query(".scrollable")],c.prototype,"internalScrollable",void 0),h([s.query(".items-container")],c.prototype,"itemsContainer",void 0),h([s.state()],c.prototype,"scrolledToTarget",void 0),e.customElement("ft-infinite-scroll")(c),t.FtInfiniteScroll=c,t.FtInfiniteScrollCssVariables=r,t.ScrolledToTargetEvent=d,t.VisibleItemsChangeEvent=a,t.styles=o,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML);
|
|
@@ -57,7 +57,7 @@ const a=window,h=a.ShadowRoot&&(void 0===a.ShadyCSS||a.ShadyCSS.nativeShadow)&&"
|
|
|
57
57
|
* Copyright 2017 Google LLC
|
|
58
58
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
59
59
|
*/
|
|
60
|
-
var
|
|
60
|
+
var S;E.finalized=!0,E.elementProperties=new Map,E.elementStyles=[],E.shadowRootOptions={mode:"open"},null==g||g({ReactiveElement:E}),(null!==(m=x.reactiveElementVersions)&&void 0!==m?m:x.reactiveElementVersions=[]).push("1.4.1");const $=window,R=$.trustedTypes,M=R?R.createPolicy("lit-html",{createHTML:t=>t}):void 0,k=`lit$${(Math.random()+"").slice(9)}$`,U="?"+k,A=`<${U}>`,F=document,j=(t="")=>F.createComment(t),L=t=>null===t||"object"!=typeof t&&"function"!=typeof t,T=Array.isArray,_=t=>T(t)||"function"==typeof(null==t?void 0:t[Symbol.iterator]),I=/<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g,B=/-->/g,W=/>/g,K=RegExp(">|[ \t\n\f\r](?:([^\\s\"'>=/]+)([ \t\n\f\r]*=[ \t\n\f\r]*(?:[^ \t\n\f\r\"'`<>=]|(\"|')|))|$)","g"),z=/'/g,D=/"/g,P=/^(?:script|style|textarea|title)$/i,H=(t=>(e,...i)=>({_$litType$:t,strings:e,values:i}))(1),Z=Symbol.for("lit-noChange"),J=Symbol.for("lit-nothing"),V=new WeakMap,q=F.createTreeWalker(F,129,null,!1),G=(t,e)=>{const i=t.length-1,s=[];let n,r=2===e?"<svg>":"",o=I;for(let e=0;e<i;e++){const i=t[e];let l,a,h=-1,c=0;for(;c<i.length&&(o.lastIndex=c,a=o.exec(i),null!==a);)c=o.lastIndex,o===I?"!--"===a[1]?o=B:void 0!==a[1]?o=W:void 0!==a[2]?(P.test(a[2])&&(n=RegExp("</"+a[2],"g")),o=K):void 0!==a[3]&&(o=K):o===K?">"===a[0]?(o=null!=n?n:I,h=-1):void 0===a[1]?h=-2:(h=o.lastIndex-a[2].length,l=a[1],o=void 0===a[3]?K:'"'===a[3]?D:z):o===D||o===z?o=K:o===B||o===W?o=I:(o=K,n=void 0);const u=o===K&&t[e+1].startsWith("/>")?" ":"";r+=o===I?i+A:h>=0?(s.push(l),i.slice(0,h)+"$lit$"+i.slice(h)+k+u):i+k+(-2===h?(s.push(void 0),e):u)}const l=r+(t[i]||"<?>")+(2===e?"</svg>":"");if(!Array.isArray(t)||!t.hasOwnProperty("raw"))throw Error("invalid template strings array");return[void 0!==M?M.createHTML(l):l,s]};class X{constructor({strings:t,_$litType$:e},i){let s;this.parts=[];let n=0,r=0;const o=t.length-1,l=this.parts,[a,h]=G(t,e);if(this.el=X.createElement(a,i),q.currentNode=this.el.content,2===e){const t=this.el.content,e=t.firstChild;e.remove(),t.append(...e.childNodes)}for(;null!==(s=q.nextNode())&&l.length<o;){if(1===s.nodeType){if(s.hasAttributes()){const t=[];for(const e of s.getAttributeNames())if(e.endsWith("$lit$")||e.startsWith(k)){const i=h[r++];if(t.push(e),void 0!==i){const t=s.getAttribute(i.toLowerCase()+"$lit$").split(k),e=/([.?@])?(.*)/.exec(i);l.push({type:1,index:n,name:e[2],strings:t,ctor:"."===e[1]?it:"?"===e[1]?nt:"@"===e[1]?rt:et})}else l.push({type:6,index:n})}for(const e of t)s.removeAttribute(e)}if(P.test(s.tagName)){const t=s.textContent.split(k),e=t.length-1;if(e>0){s.textContent=R?R.emptyScript:"";for(let i=0;i<e;i++)s.append(t[i],j()),q.nextNode(),l.push({type:2,index:++n});s.append(t[e],j())}}}else if(8===s.nodeType)if(s.data===U)l.push({type:2,index:n});else{let t=-1;for(;-1!==(t=s.data.indexOf(k,t+1));)l.push({type:7,index:n}),t+=k.length-1}n++}}static createElement(t,e){const i=F.createElement("template");return i.innerHTML=t,i}}function Q(t,e,i=t,s){var n,r,o,l;if(e===Z)return e;let a=void 0!==s?null===(n=i._$Co)||void 0===n?void 0:n[s]:i._$Cl;const h=L(e)?void 0:e._$litDirective$;return(null==a?void 0:a.constructor)!==h&&(null===(r=null==a?void 0:a._$AO)||void 0===r||r.call(a,!1),void 0===h?a=void 0:(a=new h(t),a._$AT(t,i,s)),void 0!==s?(null!==(o=(l=i)._$Co)&&void 0!==o?o:l._$Co=[])[s]=a:i._$Cl=a),void 0!==a&&(e=Q(t,a._$AS(t,e.values),a,s)),e}class Y{constructor(t,e){this.u=[],this._$AN=void 0,this._$AD=t,this._$AM=e}get parentNode(){return this._$AM.parentNode}get _$AU(){return this._$AM._$AU}v(t){var e;const{el:{content:i},parts:s}=this._$AD,n=(null!==(e=null==t?void 0:t.creationScope)&&void 0!==e?e:F).importNode(i,!0);q.currentNode=n;let r=q.nextNode(),o=0,l=0,a=s[0];for(;void 0!==a;){if(o===a.index){let e;2===a.type?e=new tt(r,r.nextSibling,this,t):1===a.type?e=new a.ctor(r,a.name,a.strings,this,t):6===a.type&&(e=new ot(r,this,t)),this.u.push(e),a=s[++l]}o!==(null==a?void 0:a.index)&&(r=q.nextNode(),o++)}return n}p(t){let e=0;for(const i of this.u)void 0!==i&&(void 0!==i.strings?(i._$AI(t,i,e),e+=i.strings.length-2):i._$AI(t[e])),e++}}class tt{constructor(t,e,i,s){var n;this.type=2,this._$AH=J,this._$AN=void 0,this._$AA=t,this._$AB=e,this._$AM=i,this.options=s,this._$Cm=null===(n=null==s?void 0:s.isConnected)||void 0===n||n}get _$AU(){var t,e;return null!==(e=null===(t=this._$AM)||void 0===t?void 0:t._$AU)&&void 0!==e?e:this._$Cm}get parentNode(){let t=this._$AA.parentNode;const e=this._$AM;return void 0!==e&&11===t.nodeType&&(t=e.parentNode),t}get startNode(){return this._$AA}get endNode(){return this._$AB}_$AI(t,e=this){t=Q(this,t,e),L(t)?t===J||null==t||""===t?(this._$AH!==J&&this._$AR(),this._$AH=J):t!==this._$AH&&t!==Z&&this.g(t):void 0!==t._$litType$?this.$(t):void 0!==t.nodeType?this.T(t):_(t)?this.k(t):this.g(t)}O(t,e=this._$AB){return this._$AA.parentNode.insertBefore(t,e)}T(t){this._$AH!==t&&(this._$AR(),this._$AH=this.O(t))}g(t){this._$AH!==J&&L(this._$AH)?this._$AA.nextSibling.data=t:this.T(F.createTextNode(t)),this._$AH=t}$(t){var e;const{values:i,_$litType$:s}=t,n="number"==typeof s?this._$AC(t):(void 0===s.el&&(s.el=X.createElement(s.h,this.options)),s);if((null===(e=this._$AH)||void 0===e?void 0:e._$AD)===n)this._$AH.p(i);else{const t=new Y(n,this),e=t.v(this.options);t.p(i),this.T(e),this._$AH=t}}_$AC(t){let e=V.get(t.strings);return void 0===e&&V.set(t.strings,e=new X(t)),e}k(t){T(this._$AH)||(this._$AH=[],this._$AR());const e=this._$AH;let i,s=0;for(const n of t)s===e.length?e.push(i=new tt(this.O(j()),this.O(j()),this,this.options)):i=e[s],i._$AI(n),s++;s<e.length&&(this._$AR(i&&i._$AB.nextSibling,s),e.length=s)}_$AR(t=this._$AA.nextSibling,e){var i;for(null===(i=this._$AP)||void 0===i||i.call(this,!1,!0,e);t&&t!==this._$AB;){const e=t.nextSibling;t.remove(),t=e}}setConnected(t){var e;void 0===this._$AM&&(this._$Cm=t,null===(e=this._$AP)||void 0===e||e.call(this,t))}}class et{constructor(t,e,i,s,n){this.type=1,this._$AH=J,this._$AN=void 0,this.element=t,this.name=e,this._$AM=s,this.options=n,i.length>2||""!==i[0]||""!==i[1]?(this._$AH=Array(i.length-1).fill(new String),this.strings=i):this._$AH=J}get tagName(){return this.element.tagName}get _$AU(){return this._$AM._$AU}_$AI(t,e=this,i,s){const n=this.strings;let r=!1;if(void 0===n)t=Q(this,t,e,0),r=!L(t)||t!==this._$AH&&t!==Z,r&&(this._$AH=t);else{const s=t;let o,l;for(t=n[0],o=0;o<n.length-1;o++)l=Q(this,s[i+o],e,o),l===Z&&(l=this._$AH[o]),r||(r=!L(l)||l!==this._$AH[o]),l===J?t=J:t!==J&&(t+=(null!=l?l:"")+n[o+1]),this._$AH[o]=l}r&&!s&&this.j(t)}j(t){t===J?this.element.removeAttribute(this.name):this.element.setAttribute(this.name,null!=t?t:"")}}class it extends et{constructor(){super(...arguments),this.type=3}j(t){this.element[this.name]=t===J?void 0:t}}const st=R?R.emptyScript:"";class nt extends et{constructor(){super(...arguments),this.type=4}j(t){t&&t!==J?this.element.setAttribute(this.name,st):this.element.removeAttribute(this.name)}}class rt extends et{constructor(t,e,i,s,n){super(t,e,i,s,n),this.type=5}_$AI(t,e=this){var i;if((t=null!==(i=Q(this,t,e,0))&&void 0!==i?i:J)===Z)return;const s=this._$AH,n=t===J&&s!==J||t.capture!==s.capture||t.once!==s.once||t.passive!==s.passive,r=t!==J&&(s===J||n);n&&this.element.removeEventListener(this.name,this,s),r&&this.element.addEventListener(this.name,this,t),this._$AH=t}handleEvent(t){var e,i;"function"==typeof this._$AH?this._$AH.call(null!==(i=null===(e=this.options)||void 0===e?void 0:e.host)&&void 0!==i?i:this.element,t):this._$AH.handleEvent(t)}}class ot{constructor(t,e,i){this.element=t,this.type=6,this._$AN=void 0,this._$AM=e,this.options=i}get _$AU(){return this._$AM._$AU}_$AI(t){Q(this,t)}}const lt={P:"$lit$",A:k,M:U,C:1,L:G,R:Y,D:_,V:Q,I:tt,H:et,N:nt,U:rt,B:it,F:ot},at=$.litHtmlPolyfillSupport;null==at||at(X,tt),(null!==(S=$.litHtmlVersions)&&void 0!==S?S:$.litHtmlVersions=[]).push("2.4.0");
|
|
61
61
|
/**
|
|
62
62
|
* @license
|
|
63
63
|
* Copyright 2017 Google LLC
|
|
@@ -117,7 +117,7 @@ const xt=2,yt=t=>(...e)=>({_$litDirective$:t,values:e});class wt{constructor(t){
|
|
|
117
117
|
* @license
|
|
118
118
|
* Copyright 2020 Google LLC
|
|
119
119
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
120
|
-
*/const{I:gt}=lt,Ot=()=>document.createComment(""),Nt=(t,e,i)=>{var s;const n=t._$AA.parentNode,r=void 0===e?t._$AB:e._$AA;if(void 0===i){const e=n.insertBefore(Ot(),r),s=n.insertBefore(Ot(),r);i=new gt(e,s,t,t.options)}else{const e=i._$AB.nextSibling,o=i._$AM,l=o!==t;if(l){let e;null===(s=i._$AQ)||void 0===s||s.call(i,t),i._$AM=t,void 0!==i._$AP&&(e=t._$AU)!==o._$AU&&i._$AP(e)}if(e!==r||l){let t=i._$AA;for(;t!==e;){const e=t.nextSibling;n.insertBefore(t,r),t=e}}}return i},Ct=(t,e,i=t)=>(t._$AI(e,i),t),Et={}
|
|
120
|
+
*/const{I:gt}=lt,Ot=()=>document.createComment(""),Nt=(t,e,i)=>{var s;const n=t._$AA.parentNode,r=void 0===e?t._$AB:e._$AA;if(void 0===i){const e=n.insertBefore(Ot(),r),s=n.insertBefore(Ot(),r);i=new gt(e,s,t,t.options)}else{const e=i._$AB.nextSibling,o=i._$AM,l=o!==t;if(l){let e;null===(s=i._$AQ)||void 0===s||s.call(i,t),i._$AM=t,void 0!==i._$AP&&(e=t._$AU)!==o._$AU&&i._$AP(e)}if(e!==r||l){let t=i._$AA;for(;t!==e;){const e=t.nextSibling;n.insertBefore(t,r),t=e}}}return i},Ct=(t,e,i=t)=>(t._$AI(e,i),t),Et={},St=t=>{var e;null===(e=t._$AP)||void 0===e||e.call(t,!1,!0);let i=t._$AA;const s=t._$AB.nextSibling;for(;i!==s;){const t=i.nextSibling;i.remove(),i=t}},$t=(t,e,i)=>{const s=new Map;for(let n=e;n<=i;n++)s.set(t[n],n);return s},Rt=yt(class extends wt{constructor(t){if(super(t),t.type!==xt)throw Error("repeat() can only be used in text expressions")}ht(t,e,i){let s;void 0===i?i=e:void 0!==e&&(s=e);const n=[],r=[];let o=0;for(const e of t)n[o]=s?s(e,o):o,r[o]=i(e,o),o++;return{values:r,keys:n}}render(t,e,i){return this.ht(t,e,i).values}update(t,[e,i,s]){var n;const r=(t=>t._$AH)(t),{values:o,keys:l}=this.ht(e,i,s);if(!Array.isArray(r))return this.ut=l,o;const a=null!==(n=this.ut)&&void 0!==n?n:this.ut=[],h=[];let c,u,d=0,p=r.length-1,f=0,v=o.length-1;for(;d<=p&&f<=v;)if(null===r[d])d++;else if(null===r[p])p--;else if(a[d]===l[f])h[f]=Ct(r[d],o[f]),d++,f++;else if(a[p]===l[v])h[v]=Ct(r[p],o[v]),p--,v--;else if(a[d]===l[v])h[v]=Ct(r[d],o[v]),Nt(t,h[v+1],r[d]),d++,v--;else if(a[p]===l[f])h[f]=Ct(r[p],o[f]),Nt(t,r[d],r[p]),p--,f++;else if(void 0===c&&(c=$t(l,f,v),u=$t(a,d,p)),c.has(a[d]))if(c.has(a[p])){const e=u.get(l[f]),i=void 0!==e?r[e]:null;if(null===i){const e=Nt(t,r[d]);Ct(e,o[f]),h[f]=e}else h[f]=Ct(i,o[f]),Nt(t,r[d],i),r[e]=null;f++}else St(r[p]),p--;else St(r[d]),d++;for(;f<=v;){const e=Nt(t,h[v+1]);Ct(e,o[f]),h[f++]=e}for(;d<=p;){const t=r[d++];null!==t&&St(t)}return this.ut=l,((t,e=Et)=>{t._$AH=e})(t,h),Z}});
|
|
121
121
|
/**
|
|
122
122
|
* @license
|
|
123
123
|
* Copyright 2017 Google LLC
|
|
@@ -128,7 +128,7 @@ const xt=2,yt=t=>(...e)=>({_$litDirective$:t,values:e});class wt{constructor(t){
|
|
|
128
128
|
* Copyright 2017 Google LLC
|
|
129
129
|
* SPDX-License-Identifier: BSD-3-Clause
|
|
130
130
|
*/
|
|
131
|
-
class Mt extends wt{constructor(t){if(super(t),this.it=J,t.type!==xt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===J||null==t)return this._t=void 0,this.it=t;if(t===Z)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}Mt.directiveName="unsafeHTML",Mt.resultType=1;const kt=yt(Mt),Ut={padding:pt.create("--ft-infinite-scroll-padding","SIZE","0")},At=f`
|
|
131
|
+
class Mt extends wt{constructor(t){if(super(t),this.it=J,t.type!==xt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===J||null==t)return this._t=void 0,this.it=t;if(t===Z)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}Mt.directiveName="unsafeHTML",Mt.resultType=1;const kt=yt(Mt),Ut={padding:pt.create("--ft-infinite-scroll-padding","SIZE","0"),itemsGap:pt.create("--ft-infinite-scroll-items-gap","SIZE","4px")},At=f`
|
|
132
132
|
.items-container {
|
|
133
133
|
position: relative;
|
|
134
134
|
padding: ${Ut.padding};
|
|
@@ -149,23 +149,28 @@ class Mt extends wt{constructor(t){if(super(t),this.it=J,t.type!==xt)throw Error
|
|
|
149
149
|
We add a gap between items to be sure to hide the content above the targeted item
|
|
150
150
|
When a div is visible (even by a fraction of a pixel) if its height changes
|
|
151
151
|
the browser will try to keep the scroll stable in relation to the first visible element
|
|
152
|
-
By adding this gap we ensure that the previous item will be fully hidden
|
|
152
|
+
By adding this gap we ensure that the previous item will be fully hidden
|
|
153
|
+
and even if its size changes, it will not impact the scroll offset
|
|
153
154
|
*/
|
|
154
|
-
margin-top:
|
|
155
|
+
margin-top: ${Ut.itemsGap};
|
|
155
156
|
}
|
|
156
157
|
|
|
157
158
|
.resizable:not(.rendered) {
|
|
158
159
|
width: 0;
|
|
159
160
|
}
|
|
160
161
|
|
|
162
|
+
.resizable > * {
|
|
163
|
+
min-height: .1px;
|
|
164
|
+
}
|
|
165
|
+
|
|
161
166
|
.rendered {
|
|
162
167
|
display: flow-root;
|
|
163
168
|
}
|
|
164
|
-
`;var Ft=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};class jt extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class Lt extends Event{constructor(){super("scrolled-to-target")}}class Tt extends mt{constructor(){super(...arguments),this.items=[],this.renderItem=()=>H``,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e(5),this.scrollDoneDebouncer=new e(10),this.onVisibilityChange=t=>{
|
|
169
|
+
`;var Ft=function(t,e,i,s){for(var n,r=arguments.length,o=r<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(o=(r<3?n(o):r>3?n(e,i,o):n(e,i))||o);return r>3&&o&&Object.defineProperty(e,i,o),o};class jt extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class Lt extends Event{constructor(){super("scrolled-to-target")}}class Tt extends mt{constructor(){super(...arguments),this.items=[],this.renderItem=()=>H``,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e(5),this.scrollDoneDebouncer=new e(10),this.onVisibilityChange=t=>{let e=new Set(this.visibleItems),i=new Set;for(let s of t){let t=+s.target.attributes.getNamedItem("data-item-index").value;s.intersectionRect.height>0?(e.add(t),i.add(t)):i.has(t)||e.delete(t)}this.visibleItems=[...e].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{var e;this.triggerFindScrollableParent(),t=t.sort(((t,e)=>t.contentRect.top-e.contentRect.top));for(const i of t){const t=+i.target.parentElement.getAttribute("data-item-index"),s=i.target.parentElement.clientHeight,n=i.contentRect.height;if(this.alreadyRenderedIndexes.has(t)){if(this.scrollable){"none"===(null!==(e=getComputedStyle(this.scrollable).overflowAnchor)&&void 0!==e?e:"none")&&this.getOffset(i.target.parentElement)+s<this.scrollable.scrollTop&&(this.scrollable.scrollTop+=Math.ceil(n-s))}i.target.parentElement.style.height=n+"px"}}},this.resizeObserver=new ResizeObserver(this.onResize),this.onMutation=()=>{[...this.itemsContainer.children].forEach((t=>{this.intersectionObserver.observe(t),this.resizeObserver.observe(t.children.item(0))}))},this.mutationObserver=new MutationObserver(this.onMutation)}get scrollable(){return this.internalScroll?this.internalScrollable:this.firstScrollableParent}render(){return H`
|
|
165
170
|
<div class="items-container ${this.internalScroll?"scrollable":""}"
|
|
166
171
|
tabindex="-1"
|
|
167
172
|
@find-scrollable-parent=${this.findScrollableParent}>
|
|
168
|
-
${
|
|
173
|
+
${Rt(this.items,((t,e)=>this.renderItemContainer(t,e)))}
|
|
169
174
|
</div>
|
|
170
175
|
`}renderItemContainer(t,e){const i=this.scrolledToTarget&&this.visibleItems.includes(e),s=this.alreadyRenderedIndexes.has(e)||this.scrolledToTarget&&e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=(null!=(n=this.visibleItems)?n:[])[(null!=n?n:[]).length-1]+this.renderAfterLast;var n;s&&this.alreadyRenderedIndexes.add(e);return H`
|
|
171
176
|
<div id="item-${e}"
|
|
@@ -175,4 +180,4 @@ class Mt extends wt{constructor(t){if(super(t),this.it=J,t.type!==xt)throw Error
|
|
|
175
180
|
${s?(()=>{const i=this.renderItem(t,e);return"string"==typeof i?H`${kt(i)}`:i})():null}
|
|
176
181
|
</div>
|
|
177
182
|
</div>
|
|
178
|
-
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t;let e=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;e>=this.items.length&&(e=-1);let i=this.getItem(e);this.scrollToTarget(i),this.onMutation(),this.scrollDoneDebouncer.run((()=>{this.scrolledToTarget=!0}))}))}getItem(t){var e;return null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${t}`)}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable&&0===i?this.scrollable.scrollTop=0:t.scrollIntoView({block:"start"})}}getOffset(t){var e;let i=0,s=t;for(;s&&s.offsetParent!==this.scrollable.offsetParent;)i+=s.offsetTop,s=s.offsetParent;return i+(null!==(e=null==s?void 0:s.offsetTop)&&void 0!==e?e:0)-this.scrollable.offsetTop}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.triggerFindScrollableParent(),this.initIntersectionObserver(),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}initIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1]})}triggerFindScrollableParent(){var t;null===(t=this.itemsContainer)||void 0===t||t.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){let e,i;t.stopPropagation();for(let s of t.composedPath()){const t=s,n=this.elementCanScroll(t);if(t.clientHeight&&t.clientHeight<t.scrollHeight&&n){e=t;break}n&&(i=t)}let s=e||i;s!==this.firstScrollableParent&&(this.firstScrollableParent=s,this.initIntersectionObserver(),this.resetScroll())}elementCanScroll(t){try{return["auto","scroll"].includes(getComputedStyle(t).overflowY)}catch(t){return!1}}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.resetScroll()}update(t){super.update(t),t.has("items")&&(this.alreadyRenderedIndexes=new Set),(t.has("scrollToItem")||t.has("scrollToIndex")&&(null!=this.scrollToItem||null!=this.scrollToIndex))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new jt(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&(null!=this.scrollToItem||null!=this.scrollToIndex)&&this.dispatchEvent(new Lt)}}var _t;Tt.styles=At,Ft([s({type:Array})],Tt.prototype,"items",void 0),Ft([s({attribute:!1})],Tt.prototype,"renderItem",void 0),Ft([s({type:Object})],Tt.prototype,"scrollToItem",void 0),Ft([s({type:Number})],Tt.prototype,"scrollToIndex",void 0),Ft([s({type:Boolean})],Tt.prototype,"internalScroll",void 0),Ft([s({type:Number})],Tt.prototype,"renderBeforeFirst",void 0),Ft([s({type:Number})],Tt.prototype,"renderAfterLast",void 0),Ft([n({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],Tt.prototype,"visibleItems",void 0),Ft([r(".scrollable")],Tt.prototype,"internalScrollable",void 0),Ft([r(".items-container")],Tt.prototype,"itemsContainer",void 0),Ft([n()],Tt.prototype,"scrolledToTarget",void 0),(_t="ft-infinite-scroll",t=>{window.customElements.get(_t)||window.customElements.define(_t,t)})(Tt),t.FtInfiniteScroll=Tt,t.FtInfiniteScrollCssVariables=Ut,t.ScrolledToTargetEvent=Lt,t.VisibleItemsChangeEvent=jt,t.styles=At,Object.defineProperty(t,"i",{value:!0})}({});
|
|
183
|
+
`}resetScroll(){this.triggerFindScrollableParent(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t;let e=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;e>=this.items.length&&(e=-1);let i=this.getItem(e);this.scrollToTarget(i),this.onMutation(),this.scrollDoneDebouncer.run((()=>{this.scrolledToTarget=!0}))}))}getItem(t){var e;return null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${t}`)}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable&&0===i?this.scrollable.scrollTop=0:t.scrollIntoView({block:"start"})}}getOffset(t){var e;let i=0,s=t;for(;s&&s.offsetParent!==this.scrollable.offsetParent;)i+=s.offsetTop,s=s.offsetParent;return i+(null!==(e=null==s?void 0:s.offsetTop)&&void 0!==e?e:0)-this.scrollable.offsetTop}appendItems(...t){this.items=[...this.items,...t]}prependItems(...t){this.items=[...t,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout((()=>{this.triggerFindScrollableParent(),this.initIntersectionObserver(),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}initIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1,1]})}triggerFindScrollableParent(){var t;null===(t=this.itemsContainer)||void 0===t||t.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){let e,i;t.stopPropagation();for(let s of t.composedPath()){const t=s,n=this.elementCanScroll(t);if(t.clientHeight&&t.clientHeight<t.scrollHeight&&n){e=t;break}n&&(i=t)}let s=e||i;s!==this.firstScrollableParent&&(this.firstScrollableParent=s,this.initIntersectionObserver(),this.resetScroll())}elementCanScroll(t){try{return["auto","scroll"].includes(getComputedStyle(t).overflowY)}catch(t){return!1}}disconnectedCallback(){super.disconnectedCallback(),this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.mutationObserver.disconnect()}firstUpdated(t){super.firstUpdated(t),this.resetScroll()}update(t){super.update(t),t.has("items")&&(this.alreadyRenderedIndexes=new Set),(t.has("scrollToItem")||t.has("scrollToIndex")&&(null!=this.scrollToItem||null!=this.scrollToIndex))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new jt(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&(null!=this.scrollToItem||null!=this.scrollToIndex)&&this.dispatchEvent(new Lt)}}var _t;Tt.styles=At,Ft([s({type:Array})],Tt.prototype,"items",void 0),Ft([s({attribute:!1})],Tt.prototype,"renderItem",void 0),Ft([s({type:Object})],Tt.prototype,"scrollToItem",void 0),Ft([s({type:Number})],Tt.prototype,"scrollToIndex",void 0),Ft([s({type:Boolean})],Tt.prototype,"internalScroll",void 0),Ft([s({type:Number})],Tt.prototype,"renderBeforeFirst",void 0),Ft([s({type:Number})],Tt.prototype,"renderAfterLast",void 0),Ft([n({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],Tt.prototype,"visibleItems",void 0),Ft([r(".scrollable")],Tt.prototype,"internalScrollable",void 0),Ft([r(".items-container")],Tt.prototype,"itemsContainer",void 0),Ft([n()],Tt.prototype,"scrolledToTarget",void 0),(_t="ft-infinite-scroll",t=>{window.customElements.get(_t)||window.customElements.define(_t,t)})(Tt),t.FtInfiniteScroll=Tt,t.FtInfiniteScrollCssVariables=Ut,t.ScrolledToTargetEvent=Lt,t.VisibleItemsChangeEvent=jt,t.styles=At,Object.defineProperty(t,"i",{value:!0})}({});
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluid-topics/ft-infinite-scroll",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.69",
|
|
4
4
|
"description": "An infinite scroller.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"Lit"
|
|
@@ -19,8 +19,8 @@
|
|
|
19
19
|
"url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@fluid-topics/ft-wc-utils": "0.3.
|
|
22
|
+
"@fluid-topics/ft-wc-utils": "0.3.69",
|
|
23
23
|
"lit": "2.2.8"
|
|
24
24
|
},
|
|
25
|
-
"gitHead": "
|
|
25
|
+
"gitHead": "f177be3c8737642e9938649a08fc705ed824c5cb"
|
|
26
26
|
}
|