@fluid-topics/ft-infinite-scroll 1.1.82 → 1.1.83

package/build/ft-infinite-scroll.js

@@ -7,7 +7,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, nothing } from "lit";
 import { property, query, state } from "lit/decorators.js";
 import { repeat } from "lit/directives/repeat.js";
-import { cancelable, Debouncer, deepEqual, FtLitElement, minmax, waitUntil } from "@fluid-topics/ft-wc-utils";
+import { cancelable, Debouncer, deepEqual, FtLitElement, hasChanged, minmax, waitUntil } from "@fluid-topics/ft-wc-utils";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { styles } from "./ft-infinite-scroll.styles";
 export class VisibleItemsChangeEvent extends CustomEvent {
@@ -413,6 +413,6 @@ __decorate([
     state()
 ], FtInfiniteScroll.prototype, "scrolling", void 0);
 __decorate([
-    state({ hasChanged: (a, b) => !deepEqual(a, b) })
+    state({ hasChanged })
 ], FtInfiniteScroll.prototype, "renderedIndexes", void 0);
 export { FtInfiniteScroll };

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

@@ -40,4 +40,4 @@
                  data-item-index="${t}">
                 ${i?(()=>{let o=this.renderItem(e,t);return typeof o=="string"?(0,N.unsafeHTML)(o):o})():m.nothing}
             </div>
-        `}prepareRenderIfNeeded(e){let t=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!t&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.renderedIndexes.add(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=G(this.visibleItems)+this.renderAfterLast}resetScroll(e=!0){var t;if(this.shouldRestoreScroll=!1,this.intersectionObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.internalScroll&&this.scrollable!==this.internalScrollable)this.scrollable=this.internalScrollable;else if(!this.internalScroll&&e){(t=this.itemsContainer)===null||t===void 0||t.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}));return}let s=this.resolveScrollToIndex();this.renderedIndexes.add(s),this.scrollToTarget(s),this.scrollDoneDebouncer.run(()=>{this.ensureScrollToTarget&&s>=0&&this.scrollDebouncer.run(()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(s))>5&&this.scrollToTarget(s)},500),this.scrollToTarget(s),this.scrolledToTarget=!0,this.shouldRestoreScroll=!0,this.resetIntersectionObserver()})}resolveScrollToIndex(){var e;let t=(e=this.scrollToIndex)!==null&&e!==void 0?e:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;return t>=this.items.length?-1:t}getItem(e){var t,s,i;return(s=(t=this.shadowRoot)===null||t===void 0?void 0:t.querySelector(`#item-${e}`))!==null&&s!==void 0?s:(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector("#item-0")}scrollToTarget(e){e<=0?(this.scrollable.scrollTop=0,this.scrollRestorationOffset=-this.getOffset(e)):(this.scrollable.scrollTop=this.getOffset(e),this.scrollRestorationOffset=0),this.scrollRestorationItem=e>=0?e:void 0}getOffset(e){var t;let s=0,i=typeof e=="number"?this.getItem(e):e;for(;i&&i.offsetParent!==this.scrollable.offsetParent;)s+=i.offsetTop,i=i.offsetParent;return s+((t=i?.offsetTop)!==null&&t!==void 0?t:0)-this.scrollable.offsetTop}appendItems(...e){this.items=[...this.items,...e]}prependItems(...e){this.items=[...e,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0}),this.resetScroll()},0)}disconnectedCallback(){super.disconnectedCallback(),this.scrollable=void 0,this.intersectionObserver.disconnect(),this.mutationObserver.disconnect(),this.shouldRestoreScroll=!1}findScrollableParent(e){var t;e.stopPropagation();let s,i;for(let l of e.composedPath()){let o=l,d=this.elementCanScroll(o);if(d&&o.clientHeight&&o.clientHeight<o.scrollHeight){s=o;break}else d&&i==null&&(i=o)}this.scrollable=(t=s??i)!==null&&t!==void 0?t:document.body,this.resetScroll(!1)}elementCanScroll(e){try{return["auto","scroll"].includes(getComputedStyle(e).overflowY)}catch{return!1}}resetIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1,1]}),this.onMutation()}searchFirstVisibleItem(e,t,s,i){if(s=s??0,i=i??t.length-1,i<=s)return t[s];let l=Math.floor((i-s)/2)+s,o=t[l],d=this.getOffset(o);return d>e?this.searchFirstVisibleItem(e,t,s,l-1):d+o.clientHeight<e?this.searchFirstVisibleItem(e,t,l+1,i):o}get shouldRestoreScroll(){return this._shouldRestoreScroll}set shouldRestoreScroll(e){let t=e&&!this._shouldRestoreScroll;this._shouldRestoreScroll=e,t&&requestAnimationFrame(this.scrollAdjustment)}update(e){super.update(e),e.has("items")&&(this.renderedIndexes=new Set,this.renderApprovalTimeouts=[]),((e.has("scrollToItem")||e.has("scrollToIndex"))&&(this.scrollToItem!=null||this.scrollToIndex!=null)||e.has("internalScroll"))&&this.resetScroll()}updated(e){super.updated(e),(e.has("visibleItems")||e.has("items"))&&this.onVisibleItemsChange(),e.has("scrolledToTarget")&&this.scrolledToTarget&&(this.scrollToItem!=null||this.scrollToIndex!=null)&&this.dispatchEvent(new S)}onVisibleItemsChange(){this.visibleItems.every((t,s)=>this.visibleItems[s+1]==null||t+1===this.visibleItems[s+1])||(0,c.deepEqual)(this.visibleItems,this.lastNotOkVisibleItems)?(this.resetVisibleItemsDebouncer.cancel(),this.dispatchVisibleItemsEvent()):this.resetVisibleItemsDebouncer.run(()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.resetIntersectionObserver()})}dispatchVisibleItemsEvent(){var e;(e=this.cancelableDispatchEvent)===null||e===void 0||e.cancel(),this.cancelableDispatchEvent=(0,c.cancelable)((0,c.waitUntil)(()=>!this.scrolling)),this.cancelableDispatchEvent.then(()=>this.dispatchEvent(new T(this.visibleItems,this.visibleItems.map(t=>this.items[t])))).catch(()=>null)}};n.styles=D;h([(0,a.property)({type:Array})],n.prototype,"items",void 0);h([(0,a.property)({attribute:!1})],n.prototype,"renderItem",void 0);h([(0,a.property)({attribute:!1})],n.prototype,"getItemKey",void 0);h([(0,a.property)({type:Object})],n.prototype,"scrollToItem",void 0);h([(0,a.property)({type:Number})],n.prototype,"scrollToIndex",void 0);h([(0,a.property)({type:Boolean})],n.prototype,"internalScroll",void 0);h([(0,a.property)({type:Number})],n.prototype,"renderBeforeFirst",void 0);h([(0,a.property)({type:Number})],n.prototype,"renderAfterLast",void 0);h([(0,a.property)({type:Boolean})],n.prototype,"ensureScrollToTarget",void 0);h([(0,a.state)({hasChanged(r,e){return r!=null&&e==null||r.length!==e.length||r[0]!==e[0]}})],n.prototype,"visibleItems",void 0);h([(0,a.query)(".scrollable")],n.prototype,"internalScrollable",void 0);h([(0,a.query)(".items-container")],n.prototype,"itemsContainer",void 0);h([(0,a.state)()],n.prototype,"scrolledToTarget",void 0);h([(0,a.state)()],n.prototype,"scrolling",void 0);h([(0,a.state)({hasChanged:(r,e)=>!(0,c.deepEqual)(r,e)})],n.prototype,"renderedIndexes",void 0);(0,$.customElement)("ft-infinite-scroll")(n);})();
+        `}prepareRenderIfNeeded(e){let t=this.renderApprovalTimeouts[e]!=null;this.inRenderRange(e)&&!t&&(this.renderApprovalTimeouts[e]=setTimeout(()=>{this.inRenderRange(e)?this.renderedIndexes.add(e):this.renderApprovalTimeouts[e]=void 0,this.requestUpdate()},300))}inRenderRange(e){return e>=this.visibleItems[0]-this.renderBeforeFirst&&e<=G(this.visibleItems)+this.renderAfterLast}resetScroll(e=!0){var t;if(this.shouldRestoreScroll=!1,this.intersectionObserver.disconnect(),this.visibleItems=[],this.scrolledToTarget=!1,this.internalScroll&&this.scrollable!==this.internalScrollable)this.scrollable=this.internalScrollable;else if(!this.internalScroll&&e){(t=this.itemsContainer)===null||t===void 0||t.dispatchEvent(new Event("find-scrollable-parent",{composed:!0}));return}let s=this.resolveScrollToIndex();this.renderedIndexes.add(s),this.scrollToTarget(s),this.scrollDoneDebouncer.run(()=>{this.ensureScrollToTarget&&s>=0&&this.scrollDebouncer.run(()=>{Math.abs(this.scrollable.scrollTop-this.getOffset(s))>5&&this.scrollToTarget(s)},500),this.scrollToTarget(s),this.scrolledToTarget=!0,this.shouldRestoreScroll=!0,this.resetIntersectionObserver()})}resolveScrollToIndex(){var e;let t=(e=this.scrollToIndex)!==null&&e!==void 0?e:this.scrollToItem?this.items.indexOf(this.scrollToItem):-1;return t>=this.items.length?-1:t}getItem(e){var t,s,i;return(s=(t=this.shadowRoot)===null||t===void 0?void 0:t.querySelector(`#item-${e}`))!==null&&s!==void 0?s:(i=this.shadowRoot)===null||i===void 0?void 0:i.querySelector("#item-0")}scrollToTarget(e){e<=0?(this.scrollable.scrollTop=0,this.scrollRestorationOffset=-this.getOffset(e)):(this.scrollable.scrollTop=this.getOffset(e),this.scrollRestorationOffset=0),this.scrollRestorationItem=e>=0?e:void 0}getOffset(e){var t;let s=0,i=typeof e=="number"?this.getItem(e):e;for(;i&&i.offsetParent!==this.scrollable.offsetParent;)s+=i.offsetTop,i=i.offsetParent;return s+((t=i?.offsetTop)!==null&&t!==void 0?t:0)-this.scrollable.offsetTop}appendItems(...e){this.items=[...this.items,...e]}prependItems(...e){this.items=[...e,...this.items]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{this.mutationObserver.disconnect(),this.mutationObserver.observe(this.itemsContainer,{childList:!0}),this.resetScroll()},0)}disconnectedCallback(){super.disconnectedCallback(),this.scrollable=void 0,this.intersectionObserver.disconnect(),this.mutationObserver.disconnect(),this.shouldRestoreScroll=!1}findScrollableParent(e){var t;e.stopPropagation();let s,i;for(let l of e.composedPath()){let o=l,d=this.elementCanScroll(o);if(d&&o.clientHeight&&o.clientHeight<o.scrollHeight){s=o;break}else d&&i==null&&(i=o)}this.scrollable=(t=s??i)!==null&&t!==void 0?t:document.body,this.resetScroll(!1)}elementCanScroll(e){try{return["auto","scroll"].includes(getComputedStyle(e).overflowY)}catch{return!1}}resetIntersectionObserver(){this.intersectionObserver.disconnect(),this.intersectionObserver=new IntersectionObserver(this.onVisibilityChange,{root:this.scrollable,rootMargin:"-8px",threshold:[0,.01,.1,1]}),this.onMutation()}searchFirstVisibleItem(e,t,s,i){if(s=s??0,i=i??t.length-1,i<=s)return t[s];let l=Math.floor((i-s)/2)+s,o=t[l],d=this.getOffset(o);return d>e?this.searchFirstVisibleItem(e,t,s,l-1):d+o.clientHeight<e?this.searchFirstVisibleItem(e,t,l+1,i):o}get shouldRestoreScroll(){return this._shouldRestoreScroll}set shouldRestoreScroll(e){let t=e&&!this._shouldRestoreScroll;this._shouldRestoreScroll=e,t&&requestAnimationFrame(this.scrollAdjustment)}update(e){super.update(e),e.has("items")&&(this.renderedIndexes=new Set,this.renderApprovalTimeouts=[]),((e.has("scrollToItem")||e.has("scrollToIndex"))&&(this.scrollToItem!=null||this.scrollToIndex!=null)||e.has("internalScroll"))&&this.resetScroll()}updated(e){super.updated(e),(e.has("visibleItems")||e.has("items"))&&this.onVisibleItemsChange(),e.has("scrolledToTarget")&&this.scrolledToTarget&&(this.scrollToItem!=null||this.scrollToIndex!=null)&&this.dispatchEvent(new S)}onVisibleItemsChange(){this.visibleItems.every((t,s)=>this.visibleItems[s+1]==null||t+1===this.visibleItems[s+1])||(0,c.deepEqual)(this.visibleItems,this.lastNotOkVisibleItems)?(this.resetVisibleItemsDebouncer.cancel(),this.dispatchVisibleItemsEvent()):this.resetVisibleItemsDebouncer.run(()=>{this.lastNotOkVisibleItems=[...this.visibleItems],this.visibleItems=[],this.resetIntersectionObserver()})}dispatchVisibleItemsEvent(){var e;(e=this.cancelableDispatchEvent)===null||e===void 0||e.cancel(),this.cancelableDispatchEvent=(0,c.cancelable)((0,c.waitUntil)(()=>!this.scrolling)),this.cancelableDispatchEvent.then(()=>this.dispatchEvent(new T(this.visibleItems,this.visibleItems.map(t=>this.items[t])))).catch(()=>null)}};n.styles=D;h([(0,a.property)({type:Array})],n.prototype,"items",void 0);h([(0,a.property)({attribute:!1})],n.prototype,"renderItem",void 0);h([(0,a.property)({attribute:!1})],n.prototype,"getItemKey",void 0);h([(0,a.property)({type:Object})],n.prototype,"scrollToItem",void 0);h([(0,a.property)({type:Number})],n.prototype,"scrollToIndex",void 0);h([(0,a.property)({type:Boolean})],n.prototype,"internalScroll",void 0);h([(0,a.property)({type:Number})],n.prototype,"renderBeforeFirst",void 0);h([(0,a.property)({type:Number})],n.prototype,"renderAfterLast",void 0);h([(0,a.property)({type:Boolean})],n.prototype,"ensureScrollToTarget",void 0);h([(0,a.state)({hasChanged(r,e){return r!=null&&e==null||r.length!==e.length||r[0]!==e[0]}})],n.prototype,"visibleItems",void 0);h([(0,a.query)(".scrollable")],n.prototype,"internalScrollable",void 0);h([(0,a.query)(".items-container")],n.prototype,"itemsContainer",void 0);h([(0,a.state)()],n.prototype,"scrolledToTarget",void 0);h([(0,a.state)()],n.prototype,"scrolling",void 0);h([(0,a.state)({hasChanged:c.hasChanged})],n.prototype,"renderedIndexes",void 0);(0,$.customElement)("ft-infinite-scroll")(n);})();