@fluid-topics/ft-infinite-scroll 0.3.11 → 0.3.13

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

@@ -0,0 +1,5 @@
+export declare const FtInfiniteScrollCssVariables: {
+    padding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
+};
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=ft-infinite-scroll.css.d.ts.map

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

@@ -0,0 +1,41 @@
+import { css } from "lit";
+import { FtCssVariableFactory } from "@fluid-topics/ft-wc-utils";
+export const FtInfiniteScrollCssVariables = {
+    padding: FtCssVariableFactory.create("--ft-infinite-scroll-padding", "SIZE", "0"),
+};
+// language=CSS
+export const styles = css `
+    .items-container {
+        position: relative;
+        padding: ${FtInfiniteScrollCssVariables.padding};
+        outline: none;
+    }
+
+    .scrollable {
+        height: 100%;
+        overflow-y: auto;
+    }
+
+    .item-container {
+        height: 100vh;
+    }
+
+    .item-container + .item-container {
+        /*  
+            We add a gap between items to be sure to hide the content above the targeted item
+            When a div is visible (even by a fraction of a pixel) if its height changes
+            the browser will try to keep the scroll stable in relation to the first visible element
+            By adding this gap we ensure that the previous item will be fully hidden and event if its size changes, it will not impact the scroll offset
+        */
+        margin-top: 4px;
+    }
+
+    .scrollable .item-container {
+        height: 100%;
+    }
+
+    .resizable:not(.rendered) {
+        width: 0;
+    }
+`;
+//# sourceMappingURL=ft-infinite-scroll.css.js.map

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

@@ -1,14 +1,6 @@
 import { PropertyValues, TemplateResult } from "lit";
 import { FtLitElement } from "@fluid-topics/ft-wc-utils";
-export interface FtInfiniteScrollProperties<T> {
-    items: Array<T>;
-    renderItem: (item: T, index: number) => TemplateResult | string;
-    scrollToItem?: T;
-    scrollToIndex?: number;
-}
-export declare const FtInfiniteScrollCssVariables: {
-    padding: import("@fluid-topics/ft-wc-utils").FtCssVariable;
-};
+import { FtInfiniteScrollProperties } from "./ft-infinite-scroll.properties";
 export declare type VisibleItems<T> = {
     visibleIndexes: Array<number>;
     visibleItems: Array<T>;

package/build/ft-infinite-scroll.js

@@ -4,14 +4,12 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { css, html } from "lit";
+import { html } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { Debouncer, FtCssVariableFactory, FtLitElement, isSafari } from "@fluid-topics/ft-wc-utils";
+import { Debouncer, FtLitElement, isSafari } from "@fluid-topics/ft-wc-utils";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
-export const FtInfiniteScrollCssVariables = {
-    padding: FtCssVariableFactory.create("--ft-infinite-scroll-padding", "SIZE", "0"),
-};
+import { styles } from "./ft-infinite-scroll.css";
 export class VisibleItemsChangeEvent extends CustomEvent {
     constructor(indexes, items) {
         super("visible-items-change", {
@@ -215,40 +213,7 @@ export class FtInfiniteScroll extends FtLitElement {
     }
 }
 // language=CSS
-FtInfiniteScroll.styles = css `
-        .items-container {
-            position: relative;
-            padding: ${FtInfiniteScrollCssVariables.padding};
-            outline: none;
-        }
-
-        .scrollable {
-            height: 100%;
-            overflow-y: auto;
-        }
-
-        .item-container {
-            height: 100vh;
-        }
-
-        .item-container + .item-container {
-            /*  
-                We add a gap between items to be sure to hide the content above the targeted item
-                When a div is visible (even by a fraction of a pixel) if its height changes
-                the browser will try to keep the scroll stable in relation to the first visible element
-                By adding this gap we ensure that the previous item will be fully hidden and event if its size changes, it will not impact the scroll offset
-            */
-            margin-top: 4px;
-        }
-
-        .scrollable .item-container {
-            height: 100%;
-        }
-
-        .resizable:not(.rendered) {
-            width: 0;
-        }
-    `;
+FtInfiniteScroll.styles = styles;
 __decorate([
     property({ type: Array })
 ], FtInfiniteScroll.prototype, "items", void 0);

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

@@ -1,4 +1,37 @@
-!function(t,e,i,s,l,n){var r=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};const o={padding:e.FtCssVariableFactory.create("--ft-infinite-scroll-padding","SIZE","0")};class h extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class a extends Event{constructor(){super("scrolled-to-target")}}class d 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.onVisibilityChange=t=>{const e=t.filter((t=>t.intersectionRect.height>1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),i=t.filter((t=>t.intersectionRect.height<=1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!i.includes(t)));this.visibleItems=[...e,...s].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let i=0;t=t.sort(((t,e)=>t.contentRect.top-e.contentRect.top));for(const e of t){const t=+e.target.parentElement.getAttribute("data-item-index"),s=e.target.parentElement.clientHeight,l=e.contentRect.height;this.alreadyRenderedIndexes.has(t)&&(e.target.parentElement.style.height=l+"px",i+=this.scrollable&&this.getOffset(e.target.parentElement)<this.scrollable.scrollTop+i?l-s:0)}this.scrollable&&e.isSafari&&(this.scrollable.scrollTop+=i)},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`
+!function(t,e,i,s,l,n){const r={padding:e.FtCssVariableFactory.create("--ft-infinite-scroll-padding","SIZE","0")},o=i.css`
+    .items-container {
+        position: relative;
+        padding: ${r.padding};
+        outline: none;
+    }
+
+    .scrollable {
+        height: 100%;
+        overflow-y: auto;
+    }
+
+    .item-container {
+        height: 100vh;
+    }
+
+    .item-container + .item-container {
+        /*  
+            We add a gap between items to be sure to hide the content above the targeted item
+            When a div is visible (even by a fraction of a pixel) if its height changes
+            the browser will try to keep the scroll stable in relation to the first visible element
+            By adding this gap we ensure that the previous item will be fully hidden and event if its size changes, it will not impact the scroll offset
+        */
+        margin-top: 4px;
+    }
+
+    .scrollable .item-container {
+        height: 100%;
+    }
+
+    .resizable:not(.rendered) {
+        width: 0;
+    }
+`;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.onVisibilityChange=t=>{const e=t.filter((t=>t.intersectionRect.height>1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),i=t.filter((t=>t.intersectionRect.height<=1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!i.includes(t)));this.visibleItems=[...e,...s].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let i=0;t=t.sort(((t,e)=>t.contentRect.top-e.contentRect.top));for(const e of t){const t=+e.target.parentElement.getAttribute("data-item-index"),s=e.target.parentElement.clientHeight,l=e.contentRect.height;this.alreadyRenderedIndexes.has(t)&&(e.target.parentElement.style.height=l+"px",i+=this.scrollable&&this.getOffset(e.target.parentElement)<this.scrollable.scrollTop+i?l-s:0)}this.scrollable&&e.isSafari&&(this.scrollable.scrollTop+=i)},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`
             <div class="items-container ${this.internalScroll?"scrollable":""}"
                  tabindex="-1"
                  @find-scrollable-parent=${this.findScrollableParent}>
@@ -12,37 +45,4 @@
                     ${l?(()=>{const s=this.renderItem(t,e);return"string"==typeof s?i.html`${n.unsafeHTML(s)}`:s})():null}
                 </div>
             </div>
-        `}resetScroll(){this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t,e;let i=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;i>=this.items.length&&(i=-1);let s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${i}`);this.scrollToTarget(s),this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),10)}))}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable?this.scrollable.scrollTop=i>0?this.getOffset(t)+1: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.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{rootMargin:"-2px",threshold:[0,.01,.1]}),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}triggerFindScrollableParent(){this.itemsContainer.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){t.stopPropagation();for(let e of t.composedPath()){const t=e;if(t.clientHeight&&t.clientHeight<t.scrollHeight&&["auto","scroll"].includes(getComputedStyle(t).overflowY)){this.firstScrollableParent=t;break}}}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"))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new h(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&this.dispatchEvent(new a)}}d.styles=i.css`
-        .items-container {
-            position: relative;
-            padding: ${o.padding};
-            outline: none;
-        }
-
-        .scrollable {
-            height: 100%;
-            overflow-y: auto;
-        }
-
-        .item-container {
-            height: 100vh;
-        }
-
-        .item-container + .item-container {
-            /*  
-                We add a gap between items to be sure to hide the content above the targeted item
-                When a div is visible (even by a fraction of a pixel) if its height changes
-                the browser will try to keep the scroll stable in relation to the first visible element
-                By adding this gap we ensure that the previous item will be fully hidden and event if its size changes, it will not impact the scroll offset
-            */
-            margin-top: 4px;
-        }
-
-        .scrollable .item-container {
-            height: 100%;
-        }
-
-        .resizable:not(.rendered) {
-            width: 0;
-        }
-    `,r([s.property({type:Array})],d.prototype,"items",void 0),r([s.property({attribute:!1})],d.prototype,"renderItem",void 0),r([s.property({type:Object})],d.prototype,"scrollToItem",void 0),r([s.property({type:Number})],d.prototype,"scrollToIndex",void 0),r([s.property({type:Boolean})],d.prototype,"internalScroll",void 0),r([s.property({type:Number})],d.prototype,"renderBeforeFirst",void 0),r([s.property({type:Number})],d.prototype,"renderAfterLast",void 0),r([s.state({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],d.prototype,"visibleItems",void 0),r([s.query(".scrollable")],d.prototype,"internalScrollable",void 0),r([s.query(".items-container")],d.prototype,"itemsContainer",void 0),r([s.state()],d.prototype,"scrolledToTarget",void 0),e.customElement("ft-infinite-scroll")(d),t.FtInfiniteScroll=d,t.FtInfiniteScrollCssVariables=o,t.ScrolledToTargetEvent=a,t.VisibleItemsChangeEvent=h,Object.defineProperty(t,"t",{value:!0})}({},ftGlobals.wcUtils,ftGlobals.lit,ftGlobals.litDecorators,ftGlobals.litRepeat,ftGlobals.litUnsafeHTML);
+        `}resetScroll(){this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t,e;let i=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;i>=this.items.length&&(i=-1);let s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${i}`);this.scrollToTarget(s),this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),10)}))}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable?this.scrollable.scrollTop=i>0?this.getOffset(t)+1: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.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{rootMargin:"-2px",threshold:[0,.01,.1]}),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}triggerFindScrollableParent(){this.itemsContainer.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){t.stopPropagation();for(let e of t.composedPath()){const t=e;if(t.clientHeight&&t.clientHeight<t.scrollHeight&&["auto","scroll"].includes(getComputedStyle(t).overflowY)){this.firstScrollableParent=t;break}}}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"))&&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&&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);

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

@@ -104,7 +104,40 @@ function(t){return class extends t{createRenderRoot(){const t=this.constructor,{
      * Copyright 2017 Google LLC
      * SPDX-License-Identifier: BSD-3-Clause
      */
-class Rt extends xt{constructor(t){if(super(t),this.it=H,t.type!==bt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===H||null==t)return this._t=void 0,this.it=t;if(t===D)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:[]}}}Rt.directiveName="unsafeHTML",Rt.resultType=1;const St=mt(Rt);var Mt=function(t,e,i,s){for(var n,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(e,i,r):n(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};const Ut={padding:ht.create("--ft-infinite-scroll-padding","SIZE","0")};class kt extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class Tt extends Event{constructor(){super("scrolled-to-target")}}class At extends ft{constructor(){super(...arguments),this.items=[],this.renderItem=()=>K``,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e(5),this.onVisibilityChange=t=>{const e=t.filter((t=>t.intersectionRect.height>1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),i=t.filter((t=>t.intersectionRect.height<=1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!i.includes(t)));this.visibleItems=[...e,...s].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let e=0;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;this.alreadyRenderedIndexes.has(t)&&(i.target.parentElement.style.height=n+"px",e+=this.scrollable&&this.getOffset(i.target.parentElement)<this.scrollable.scrollTop+e?n-s:0)}this.scrollable&&vt&&(this.scrollable.scrollTop+=e)},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 K`
+class Rt extends xt{constructor(t){if(super(t),this.it=H,t.type!==bt)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===H||null==t)return this._t=void 0,this.it=t;if(t===D)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:[]}}}Rt.directiveName="unsafeHTML",Rt.resultType=1;const St=mt(Rt),Mt={padding:ht.create("--ft-infinite-scroll-padding","SIZE","0")},Ut=u`
+    .items-container {
+        position: relative;
+        padding: ${Mt.padding};
+        outline: none;
+    }
+
+    .scrollable {
+        height: 100%;
+        overflow-y: auto;
+    }
+
+    .item-container {
+        height: 100vh;
+    }
+
+    .item-container + .item-container {
+        /*  
+            We add a gap between items to be sure to hide the content above the targeted item
+            When a div is visible (even by a fraction of a pixel) if its height changes
+            the browser will try to keep the scroll stable in relation to the first visible element
+            By adding this gap we ensure that the previous item will be fully hidden and event if its size changes, it will not impact the scroll offset
+        */
+        margin-top: 4px;
+    }
+
+    .scrollable .item-container {
+        height: 100%;
+    }
+
+    .resizable:not(.rendered) {
+        width: 0;
+    }
+`;var kt=function(t,e,i,s){for(var n,o=arguments.length,r=o<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s,l=t.length-1;l>=0;l--)(n=t[l])&&(r=(o<3?n(r):o>3?n(e,i,r):n(e,i))||r);return o>3&&r&&Object.defineProperty(e,i,r),r};class Tt extends CustomEvent{constructor(t,e){super("visible-items-change",{detail:{visibleIndexes:t,visibleItems:e}})}}class At extends Event{constructor(){super("scrolled-to-target")}}class Ft extends ft{constructor(){super(...arguments),this.items=[],this.renderItem=()=>K``,this.internalScroll=!1,this.renderBeforeFirst=1,this.renderAfterLast=1,this.visibleItems=[],this.scrolledToTarget=!1,this.alreadyRenderedIndexes=new Set,this.scrollDebouncer=new e(5),this.onVisibilityChange=t=>{const e=t.filter((t=>t.intersectionRect.height>1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>!this.visibleItems.includes(t))),i=t.filter((t=>t.intersectionRect.height<=1)).map((t=>+t.target.attributes.getNamedItem("data-item-index").value)).filter((t=>this.visibleItems.includes(t))),s=[...this.visibleItems].filter((t=>!i.includes(t)));this.visibleItems=[...e,...s].sort(((t,e)=>t-e))},this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange),this.onResize=t=>{this.triggerFindScrollableParent();let e=0;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;this.alreadyRenderedIndexes.has(t)&&(i.target.parentElement.style.height=n+"px",e+=this.scrollable&&this.getOffset(i.target.parentElement)<this.scrollable.scrollTop+e?n-s:0)}this.scrollable&&vt&&(this.scrollable.scrollTop+=e)},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 K`
             <div class="items-container ${this.internalScroll?"scrollable":""}"
                  tabindex="-1"
                  @find-scrollable-parent=${this.findScrollableParent}>
@@ -118,37 +151,4 @@ class Rt extends xt{constructor(t){if(super(t),this.it=H,t.type!==bt)throw Error
                     ${s?(()=>{const i=this.renderItem(t,e);return"string"==typeof i?K`${St(i)}`:i})():null}
                 </div>
             </div>
-        `}resetScroll(){this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t,e;let i=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;i>=this.items.length&&(i=-1);let s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${i}`);this.scrollToTarget(s),this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),10)}))}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable?this.scrollable.scrollTop=i>0?this.getOffset(t)+1: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.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{rootMargin:"-2px",threshold:[0,.01,.1]}),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}triggerFindScrollableParent(){this.itemsContainer.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){t.stopPropagation();for(let e of t.composedPath()){const t=e;if(t.clientHeight&&t.clientHeight<t.scrollHeight&&["auto","scroll"].includes(getComputedStyle(t).overflowY)){this.firstScrollableParent=t;break}}}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"))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new kt(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&this.dispatchEvent(new Tt)}}var Ft;At.styles=u`
-        .items-container {
-            position: relative;
-            padding: ${Ut.padding};
-            outline: none;
-        }
-
-        .scrollable {
-            height: 100%;
-            overflow-y: auto;
-        }
-
-        .item-container {
-            height: 100vh;
-        }
-
-        .item-container + .item-container {
-            /*  
-                We add a gap between items to be sure to hide the content above the targeted item
-                When a div is visible (even by a fraction of a pixel) if its height changes
-                the browser will try to keep the scroll stable in relation to the first visible element
-                By adding this gap we ensure that the previous item will be fully hidden and event if its size changes, it will not impact the scroll offset
-            */
-            margin-top: 4px;
-        }
-
-        .scrollable .item-container {
-            height: 100%;
-        }
-
-        .resizable:not(.rendered) {
-            width: 0;
-        }
-    `,Mt([s({type:Array})],At.prototype,"items",void 0),Mt([s({attribute:!1})],At.prototype,"renderItem",void 0),Mt([s({type:Object})],At.prototype,"scrollToItem",void 0),Mt([s({type:Number})],At.prototype,"scrollToIndex",void 0),Mt([s({type:Boolean})],At.prototype,"internalScroll",void 0),Mt([s({type:Number})],At.prototype,"renderBeforeFirst",void 0),Mt([s({type:Number})],At.prototype,"renderAfterLast",void 0),Mt([n({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],At.prototype,"visibleItems",void 0),Mt([o(".scrollable")],At.prototype,"internalScrollable",void 0),Mt([o(".items-container")],At.prototype,"itemsContainer",void 0),Mt([n()],At.prototype,"scrolledToTarget",void 0),(Ft="ft-infinite-scroll",t=>{window.customElements.get(Ft)||window.customElements.define(Ft,t)})(At),t.FtInfiniteScroll=At,t.FtInfiniteScrollCssVariables=Ut,t.ScrolledToTargetEvent=Tt,t.VisibleItemsChangeEvent=kt,Object.defineProperty(t,"i",{value:!0})}({});
+        `}resetScroll(){this.intersectionObserver.disconnect(),this.resizeObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.scrollDebouncer.run((()=>{var t,e;let i=null!==(t=this.scrollToIndex)&&void 0!==t?t:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;i>=this.items.length&&(i=-1);let s=null===(e=this.shadowRoot)||void 0===e?void 0:e.querySelector(`#item-${i}`);this.scrollToTarget(s),this.onMutation(),setTimeout((()=>{this.scrolledToTarget=!0}),10)}))}scrollToTarget(t){var e;if(t){let i=+(null!==(e=t.getAttribute("data-item-index"))&&void 0!==e?e:"0");this.scrollable?this.scrollable.scrollTop=i>0?this.getOffset(t)+1: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.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{rootMargin:"-2px",threshold:[0,.01,.1]}),this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0})}),0)}triggerFindScrollableParent(){this.itemsContainer.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}))}findScrollableParent(t){t.stopPropagation();for(let e of t.composedPath()){const t=e;if(t.clientHeight&&t.clientHeight<t.scrollHeight&&["auto","scroll"].includes(getComputedStyle(t).overflowY)){this.firstScrollableParent=t;break}}}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"))&&this.resetScroll()}updated(t){super.updated(t),(t.has("visibleItems")||t.has("items"))&&this.dispatchEvent(new Tt(this.visibleItems,this.visibleItems.map((t=>this.items[t])))),t.has("scrolledToTarget")&&this.scrolledToTarget&&this.dispatchEvent(new At)}}var Lt;Ft.styles=Ut,kt([s({type:Array})],Ft.prototype,"items",void 0),kt([s({attribute:!1})],Ft.prototype,"renderItem",void 0),kt([s({type:Object})],Ft.prototype,"scrollToItem",void 0),kt([s({type:Number})],Ft.prototype,"scrollToIndex",void 0),kt([s({type:Boolean})],Ft.prototype,"internalScroll",void 0),kt([s({type:Number})],Ft.prototype,"renderBeforeFirst",void 0),kt([s({type:Number})],Ft.prototype,"renderAfterLast",void 0),kt([n({hasChanged:(t,e)=>null!=t&&null==e||t.length!==e.length||t[0]!==e[0]})],Ft.prototype,"visibleItems",void 0),kt([o(".scrollable")],Ft.prototype,"internalScrollable",void 0),kt([o(".items-container")],Ft.prototype,"itemsContainer",void 0),kt([n()],Ft.prototype,"scrolledToTarget",void 0),(Lt="ft-infinite-scroll",t=>{window.customElements.get(Lt)||window.customElements.define(Lt,t)})(Ft),t.FtInfiniteScroll=Ft,t.FtInfiniteScrollCssVariables=Mt,t.ScrolledToTargetEvent=At,t.VisibleItemsChangeEvent=Tt,t.styles=Ut,Object.defineProperty(t,"i",{value:!0})}({});

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

@@ -0,0 +1,8 @@
+import { TemplateResult } from "lit";
+export interface FtInfiniteScrollProperties<T> {
+    items: Array<T>;
+    renderItem: (item: T, index: number) => TemplateResult | string;
+    scrollToItem?: T;
+    scrollToIndex?: number;
+}
+//# sourceMappingURL=ft-infinite-scroll.properties.d.ts.map

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ft-infinite-scroll.properties.js.map

package/build/index.d.ts

@@ -1,2 +1,4 @@
+export * from "./ft-infinite-scroll.css";
+export * from "./ft-infinite-scroll.properties";
 export * from "./ft-infinite-scroll";
 //# sourceMappingURL=index.d.ts.map

package/build/index.js

@@ -1,5 +1,7 @@
 import { customElement } from "@fluid-topics/ft-wc-utils";
 import { FtInfiniteScroll } from "./ft-infinite-scroll";
+export * from "./ft-infinite-scroll.css";
+export * from "./ft-infinite-scroll.properties";
 export * from "./ft-infinite-scroll";
 customElement("ft-infinite-scroll")(FtInfiniteScroll);
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluid-topics/ft-infinite-scroll",
-  "version": "0.3.11",
+  "version": "0.3.13",
   "description": "An infinite scroller.",
   "keywords": [
     "Lit"
@@ -19,8 +19,8 @@
     "url": "ssh://git@scm.mrs.antidot.net:2222/fluidtopics/ft-web-components.git"
   },
   "dependencies": {
-    "@fluid-topics/ft-wc-utils": "0.3.11",
+    "@fluid-topics/ft-wc-utils": "0.3.13",
     "lit": "2.2.8"
   },
-  "gitHead": "35c790329a8e7f9902aad2ea8d41386e5c0b36c9"
+  "gitHead": "84b5fc920bc5d2bdb646b5da8815ad51caaf228e"
 }