jb-infinite-scroll 1.1.1 → 1.2.0

package/README.md

@@ -23,15 +23,13 @@ Infinite scroll web-component with  additional features including:
 
 ```
 
-## instruction
+## show content
 
-### show content
-
-you can show your content by placing any element with slot attribute `slot="infinite-scroll-content"` like the example below:
+you can show your content by placing any element with slot attribute `slot="content"` like the example below:
 
 ```html
     <jb-infinite-scroll>
-        <div slot="infinite-scroll-content">
+        <div slot="content">
             <div>item 1</div>
             <div>item 2</div>
             <div>item 3</div>
@@ -39,7 +37,8 @@ you can show your content by placing any element with slot attribute `slot="infi
     </jb-infinite-scroll>
 
 ```
-### add scroll callback
+
+## add scroll callback
 
 you can add your onscroll callback function to `scrollEnd` event listener.
 
@@ -53,7 +52,7 @@ if `is-loading` ,`is-list-empty` ,`is-list-ended` or `disable-capture-scroll` is
     })
 ```
 
-### set loading
+## set loading
 
 you can show loading by setting `is-loading ="true"` attribute or `isLoading` property.
 
@@ -61,18 +60,18 @@ you can show loading by setting `is-loading ="true"` attribute or `isLoading` pr
     const jbInfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
     jbInfiniteScroll.isLoading = true;
 ```
- you can also set your own loading ui by adding a slot with `slot="loading-content"` like the example below:
+ you can also set your own loading ui by adding a slot with `slot="loading"` like the example below:
 
 ```html
     <jb-infinite-scroll is-loading="true">
-        <div slot="loading-content">
+        <div slot="loading">
             <p>your loading</p>
         </div>
     </jb-infinite-scroll>
 
 ```
 
-### set list empty
+## set list empty
 
 if there is no data to show you can set `is-list-empty = "true"`.
 
@@ -80,16 +79,16 @@ if there is no data to show you can set `is-list-empty = "true"`.
     const jbInfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
     jbInfiniteScroll.isListEmpty = true;
 ``` 
- you can set your own empty list ui by adding a slot with `slot="empty-list-content"` like the example below:
+ you can set your own empty list ui by adding a slot with `slot="empty"` like the example below:
 ```html
     <jb-infinite-scroll is-list-empty="true">
-        <div slot="empty-list-content">
+        <div slot="empty">
             <p>list is empty</p>
         </div>
     </jb-infinite-scroll>
 
 ```
-### set list ended
+## set list ended
 if there is no more data to show you can set `is-list-ended = "true"`.this disables scroll capturing and `scrollEnd` event won't be called after.
 
 ```js
@@ -102,7 +101,7 @@ if there is no more data to show you can set `is-list-ended = "true"`.this disab
 
 ```
 
-### disable scroll capture
+## disable scroll capture
 in some cases if you want to disable capture scroll you can set `disable-capture-scroll = "true"`'
 
 ```js
@@ -113,29 +112,43 @@ in some cases if you want to disable capture scroll you can set `disable-capture
 
 
 
-### state-change-waiting-behavior
+## state-change-waiting-behavior
 
-by default `state-change-waiting-behavior` is `FORCE_WAIT` thats means when an scroll event fires,scroll is not captured until on of the `is-loading` ,`is-list-empty` ,`is-list-ended` states updates.
-if you want to change this behavior you can set `state-change-waiting-behavior` to `NO_WAIT`. thats means the scroll callback in not dependent on `is-loading`,`is-list-empty`,`is-list-ended` state update.
+by default `state-change-waiting-behavior` is `FORCE_WAIT` thats means when an scroll event fires,scroll is not captured until one of the `is-loading` ,`is-list-empty` ,`is-list-ended` states updates.
+if you want to change this behavior you can set `state-change-waiting-behavior` to `NO_WAIT`. that means the scroll callback in not dependent on `is-loading`,`is-list-empty`,`is-list-ended` state update.
 
+we do this to prevent multiple call for one scroll to the end, because in most cases you would set some loading or list ended state or list is empty state  after the scroll end called. but if you want to handle states by yourself and not use our state manager mechanism you can just set this to `NO_WAIT` to handle everything by yourself
 
 ### usage overview
 ```html
     <jb-infinite-scroll is-list-empty="true" is-loading="true">
-        <div slot="infinite-scroll-content">
+        <div slot="content">
             <div>item 1</div>
             <div>item 2</div>
             <div>item 3</div>
         </div>
-        <div slot="empty-list-content">
+        <div slot="empty">
             <p>list is empty</p>
         </div>
-        <div slot="loading-content">
+        <div slot="loading">
             <p>loading</p>
         </div>
     </jb-infinite-scroll>
 ```
 
+## styling
+you can use `::part` to apply style on our web-component part
+```css
+jb-infinite-scroll::part(content-wrapper){
+  display:'flex'
+}
+jb-infinite-scroll:states(loading)::part(loading-wrapper){
+  background:red;
+}
+```
+we have `content-wrapper`, `loading-wrapper`, `empty-list-wrapper`, `default-loading` as a supported part in our component. you can also combine them with `loading`, `empty` states for different style in different states.
+if you want to style default loading see [jb-loading](https://github.com/javadbat/jb-loading) styling section.
+
 ## Other Related Docs:
 
 - see [jb-infinite-scroll/react](https://github.com/javadbat/jb-infinite-scroll/tree/main/react) if you want to use this component in react.

package/dist/jb-infinite-scroll.cjs.js

@@ -1,2 +1,2 @@
-"use strict";function t(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function e(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}require("jb-loading"),"function"==typeof SuppressedError&&SuppressedError;var n,i,s,a,r,o,l,c,h;exports.StateChangeWaitingBehavior=void 0,(n=exports.StateChangeWaitingBehavior||(exports.StateChangeWaitingBehavior={})).forceWait="FORCE_WAIT",n.noWait="NO_WAIT";class p extends HTMLElement{constructor(){super(),i.set(this,!1),s.set(this,0),a.set(this,!1),r.set(this,!1),o.set(this,!1),l.set(this,!1),c.set(this,!1),h.set(this,exports.StateChangeWaitingBehavior.forceWait),this.initWebComponent()}mapStateChangeWaitingBehavior(t){switch(t){case"FORCE_WAIT":default:return exports.StateChangeWaitingBehavior.forceWait;case"NO_WAIT":return exports.StateChangeWaitingBehavior.noWait}}set stateChangeWaitingBehavior(t){e(this,h,this.mapStateChangeWaitingBehavior(t),"f")}get stateChangeWaitingBehavior(){return t(this,h,"f")}get disableCaptureScroll(){return t(this,l,"f")}set disableCaptureScroll(t){e(this,l,t,"f"),this.setIsWaitingForStatChange(!1)}get isListEnded(){return t(this,r,"f")}set isListEnded(t){e(this,r,t,"f"),this.setIsWaitingForStatChange(!1)}get isLoading(){return t(this,i,"f")}set isLoading(t){e(this,i,t,"f"),this.setIsWaitingForStatChange(!1),t?this.elements?.loading.classList.add("--show"):(this.elements?.loading.classList.remove("--show"),this.checkEmptyListState(),this.checkScrollHeight())}get isListEmpty(){return t(this,c,"f")}set isListEmpty(t){e(this,c,t,"f"),this.setIsWaitingForStatChange(!1)}get isLastPage(){return t(this,a,"f")}set isLastPage(t){e(this,a,t,"f")}checkEmptyListState(){t(this,c,"f")?(this.elements?.emptyListWrapper.classList.add("--show"),this.elements?.contentWrapper.classList.remove("--show")):(this.elements?.contentWrapper.classList.add("--show"),this.elements?.emptyListWrapper.classList.remove("--show"))}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}callOnLoadEvent(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)}callOnInitEvent(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)}initWebComponent(){const t=this.attachShadow({mode:"open"}),e=document.createElement("template");e.innerHTML='<style>.infinite-scroll-component {\n  height: 100%;\n  display: grid;\n  grid-template-rows: auto 1fr;\n}\n.infinite-scroll-component .content-wrapper {\n  width: 100%;\n  height: auto;\n  display: none;\n  overflow: auto;\n}\n.infinite-scroll-component .content-wrapper.--show {\n  display: inline-block;\n}\n.infinite-scroll-component .empty-list-wrapper {\n  width: 100%;\n  height: 100%;\n  display: none;\n}\n.infinite-scroll-component .empty-list-wrapper.--show {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.infinite-scroll-component .loading-wrapper {\n  display: none;\n  --jb-loading-color: var(--captcha-component-loading-color, #1565D8);\n}\n.infinite-scroll-component .loading-wrapper .default-loading {\n  width: 40px;\n  height: 40px;\n  margin: 0 auto;\n}\n.infinite-scroll-component .loading-wrapper.--show {\n  display: inline-block;\n}</style>\n<div class="infinite-scroll-component">\r\n    <div class="content-wrapper" part="content-wrapper">\r\n        <slot name="infinite-scroll-content"></slot>\r\n    </div>\r\n    <div class="empty-list-wrapper" part="empty-list-wrapper">\r\n        <slot name="empty-list-content">\r\n            <div class="default-empty-list">\r\n                <p>empty list</p>\r\n            </div>\r\n        </slot>\r\n    </div>\r\n    <div class="loading-wrapper" part="loading-wrapper">\r\n        <slot name="loading-content">\r\n            <div class="default-loading">\r\n                <jb-loading></jb-loading>\r\n            </div>\r\n        </slot>\r\n    </div>\r\n</div>',t.appendChild(e.content.cloneNode(!0)),this.elements={loading:t.querySelector(".loading-wrapper"),componentWrapper:t.querySelector(".Infinite-scroll-component"),contentWrapper:t.querySelector(".content-wrapper"),loadingWrapper:t.querySelector(".loading-wrapper"),emptyListWrapper:t.querySelector(".empty-list-wrapper")}}registerEventListener(){this.elements.contentWrapper.addEventListener("scroll",this.onScroll.bind(this),{passive:!0})}initProp(){this.registerEventListener(),this.checkScrollHeight()}checkScrollHeight(){const{scrollHeight:t,clientHeight:e}=this.elements.contentWrapper;t<=e&&this.canCaptureScroll&&this.onScrollEnd()}onScrollEnd(){this.setIsWaitingForStatChange(!0);const t=new CustomEvent("scrollEnd");this.dispatchEvent(t)}onScroll(){const{scrollTop:e,scrollHeight:n,clientHeight:i}=this.elements.contentWrapper;e+i+t(this,s,"f")>=n&&this.canCaptureScroll&&this.onScrollEnd()}setIsWaitingForStatChange(n){if(n)if(t(this,h,"f")===exports.StateChangeWaitingBehavior.forceWait)e(this,o,!0,"f");else if(t(this,h,"f")===exports.StateChangeWaitingBehavior.noWait)return;e(this,o,!1,"f")}get canCaptureScroll(){return!(t(this,i,"f")||t(this,c,"f")||t(this,r,"f")||t(this,o,"f")||t(this,l,"f"))}static get observedAttributes(){return["is-loading","is-list-empty","is-list-ended","disable-capture-scroll","state-change-waiting-behavior"]}attributeChangedCallback(t,e,n){this.onAttributeChange(t,n)}onAttributeChange(t,n){switch(t){case"is-loading":this.isLoading="true"===n;break;case"is-list-empty":this.isListEmpty="true"===n;break;case"is-list-ended":e(this,r,"true"===n,"f");break;case"disable-capture-scroll":e(this,l,"true"===n,"f");break;case"state-change-waiting-behavior":e(this,h,this.mapStateChangeWaitingBehavior(n),"f")}}}i=new WeakMap,s=new WeakMap,a=new WeakMap,r=new WeakMap,o=new WeakMap,l=new WeakMap,c=new WeakMap,h=new WeakMap;!customElements.get("jb-infinite-scroll")&&window.customElements.define("jb-infinite-scroll",p),exports.JBInfiniteScrollWebComponent=p;
+"use strict";function t(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function e(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}require("jb-loading"),"function"==typeof SuppressedError&&SuppressedError;var n,i,s,a,r,o,l,c,h,p,d,m,f,g,u,w,v,y,W,b,E;exports.StateChangeWaitingBehavior=void 0,(n=exports.StateChangeWaitingBehavior||(exports.StateChangeWaitingBehavior={})).forceWait="FORCE_WAIT",n.noWait="NO_WAIT";class C extends HTMLElement{constructor(){super(),i.add(this),s.set(this,!1),a.set(this,0),r.set(this,!1),o.set(this,!1),l.set(this,!1),c.set(this,null),h.set(this,void 0),d.set(this,exports.StateChangeWaitingBehavior.forceWait),"function"==typeof this.attachInternals&&e(this,h,this.attachInternals(),"f"),t(this,i,"m",g).call(this)}set stateChangeWaitingBehavior(n){e(this,d,t(this,i,"m",m).call(this,n),"f")}get stateChangeWaitingBehavior(){return t(this,d,"f")}get disableCaptureScroll(){return t(this,l,"f")}set disableCaptureScroll(n){e(this,l,n,"f"),t(this,i,"m",b).call(this,!1)}get isListEnded(){return t(this,r,"f")}set isListEnded(n){e(this,r,n,"f"),t(this,i,"m",b).call(this,!1)}get isLoading(){return t(this,s,"f")}set isLoading(n){e(this,s,n,"f"),t(this,i,"m",b).call(this,!1),n?(this.elements?.loading.classList.add("--show"),t(this,h,"f").states?.add("loading")):(this.elements?.loading.classList.remove("--show"),t(this,h,"f").states?.delete("loading"),t(this,i,"m",f).call(this),t(this,i,"m",v).call(this))}get isListEmpty(){return t(this,c,"f")}set isListEmpty(n){e(this,c,n,"f"),n?t(this,h,"f").states?.add("empty"):t(this,h,"f").states?.delete("empty"),t(this,i,"m",b).call(this,!1),t(this,i,"m",f).call(this)}connectedCallback(){this.callOnLoadEvent(),t(this,i,"m",w).call(this),this.callOnInitEvent()}callOnLoadEvent(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)}callOnInitEvent(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)}get canCaptureScroll(){return!(t(this,s,"f")||t(this,i,"a",p)||t(this,r,"f")||t(this,o,"f")||t(this,l,"f"))}static get observedAttributes(){return["is-loading","is-list-empty","is-list-ended","disable-capture-scroll","state-change-waiting-behavior"]}attributeChangedCallback(e,n,s){t(this,i,"m",E).call(this,e,s)}}s=new WeakMap,a=new WeakMap,r=new WeakMap,o=new WeakMap,l=new WeakMap,c=new WeakMap,h=new WeakMap,d=new WeakMap,i=new WeakSet,p=function(){if(null!==t(this,c,"f"))return t(this,c,"f")},m=function(t){switch(t){case"FORCE_WAIT":default:return exports.StateChangeWaitingBehavior.forceWait;case"NO_WAIT":return exports.StateChangeWaitingBehavior.noWait}},f=function(){t(this,i,"a",p)?(this.elements?.emptyListWrapper.classList.add("--show"),this.elements?.contentWrapper.classList.remove("--show")):(this.elements?.contentWrapper.classList.add("--show"),this.elements?.emptyListWrapper.classList.remove("--show"))},g=function(){const t=this.attachShadow({mode:"open"}),e=document.createElement("template");e.innerHTML='<style>:host {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.infinite-scroll-component {\n  height: 100%;\n}\n.infinite-scroll-component .content-wrapper {\n  width: 100%;\n  height: 100%;\n  display: none;\n  overflow: auto;\n}\n.infinite-scroll-component .content-wrapper.--show {\n  display: block;\n}\n.infinite-scroll-component .content-wrapper ::slotted([slot=content]) {\n  height: auto;\n}\n.infinite-scroll-component .loading-wrapper {\n  display: none;\n}\n.infinite-scroll-component .loading-wrapper .default-loading {\n  width: 40px;\n  height: 40px;\n  margin: 0 auto;\n}\n.infinite-scroll-component .loading-wrapper.--show {\n  display: block;\n}\n.infinite-scroll-component .empty-list-wrapper {\n  width: 100%;\n  height: 100%;\n  display: none;\n}\n.infinite-scroll-component .empty-list-wrapper.--show {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.infinite-scroll-component .empty-list-wrapper ::slotted([slot=empty]) {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 1rem;\n  box-sizing: border-box;\n}</style>\n<div class="infinite-scroll-component">\r\n    <div class="content-wrapper" part="content-wrapper">\r\n        <slot name="content"></slot>\r\n        <div class="loading-wrapper" part="loading-wrapper">\r\n            <slot name="loading">\r\n                <div class="default-loading">\r\n                    <jb-loading part="default-loading"></jb-loading>\r\n                </div>\r\n            </slot>\r\n        </div>\r\n    </div>\r\n    <div class="empty-list-wrapper" part="empty-list-wrapper">\r\n        <slot name="empty">\r\n        </slot>\r\n    </div>\r\n    \r\n</div>',t.appendChild(e.content.cloneNode(!0)),this.elements={loading:t.querySelector(".loading-wrapper"),componentWrapper:t.querySelector(".Infinite-scroll-component"),contentWrapper:t.querySelector(".content-wrapper"),loadingWrapper:t.querySelector(".loading-wrapper"),emptyListWrapper:t.querySelector(".empty-list-wrapper")}},u=function(){this.elements.contentWrapper.addEventListener("scroll",t(this,i,"m",W).bind(this),{passive:!0})},w=function(){t(this,i,"m",u).call(this),t(this,i,"m",v).call(this)},v=function(){const{scrollHeight:e,clientHeight:n}=this.elements.contentWrapper;e<=n&&this.canCaptureScroll&&t(this,i,"m",y).call(this)},y=function(){t(this,i,"m",b).call(this,!0);const e=new CustomEvent("scrollEnd");this.dispatchEvent(e)},W=function(){const{scrollTop:e,scrollHeight:n,clientHeight:s}=this.elements.contentWrapper;e+s+t(this,a,"f")>=n&&this.canCaptureScroll&&t(this,i,"m",y).call(this)},b=function(n){if(n)if(t(this,d,"f")===exports.StateChangeWaitingBehavior.forceWait)e(this,o,!0,"f");else if(t(this,d,"f")===exports.StateChangeWaitingBehavior.noWait)return;e(this,o,!1,"f")},E=function(n,s){switch(n){case"is-loading":this.isLoading="true"===s;break;case"is-list-empty":this.isListEmpty="true"===s;break;case"is-list-ended":e(this,r,"true"===s,"f");break;case"disable-capture-scroll":e(this,l,"true"===s,"f");break;case"state-change-waiting-behavior":e(this,d,t(this,i,"m",m).call(this,s),"f")}};!customElements.get("jb-infinite-scroll")&&window.customElements.define("jb-infinite-scroll",C),exports.JBInfiniteScrollWebComponent=C;
 //# sourceMappingURL=jb-infinite-scroll.cjs.js.map

package/dist/jb-infinite-scroll.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"jb-infinite-scroll.cjs.js","sources":["../lib/types.ts","../lib/jb-infinite-scroll.ts"],"sourcesContent":["export type Elements = {\r\n    loading: HTMLDivElement,\r\n    contentWrapper: HTMLDivElement,\r\n    componentWrapper: HTMLDivElement,\r\n    emptyListWrapper: HTMLDivElement,\r\n    loadingWrapper: HTMLDivElement,\r\n}\r\n\r\nexport enum StateChangeWaitingBehavior {\r\n    // when user scroll we lock event call and wait for user to change isLoading (good for React or any other ui framework solution)\r\n    forceWait = \"FORCE_WAIT\",\r\n    // when user scroll we dont lock its event listener and developer should handle extra scroll by it self (good for pure js solution)\r\n    noWait = \"NO_WAIT\",\r\n}","import HTML from './jb-infinite-scroll.html';\r\nimport CSS from './jb-infinite-scroll.scss';\r\nimport { Elements, StateChangeWaitingBehavior } from './types.js';\r\nimport \"jb-loading\";\r\n\r\nexport * from \"./types.js\";\r\n\r\nexport class JBInfiniteScrollWebComponent extends HTMLElement {\r\n    elements!: Elements;\r\n    #isLoading = false;\r\n    //the amount of space that we listen to for trigger refresh \r\n    #endPageGap = 0;\r\n    #isLastPage = false;\r\n\r\n    #isListEnded = false;\r\n    //used when user scroll and we dont want to capture multiple scroll at one and wait for prev scroll event to finish\r\n    #isWaitingForStateChange = false;\r\n    #disableCaptureScroll = false;\r\n    #isListEmpty = false;\r\n    #stateChangeWaitingBehavior: StateChangeWaitingBehavior = StateChangeWaitingBehavior.forceWait;\r\n\r\n\r\n    constructor() {\r\n      super();\r\n      this.initWebComponent();\r\n    }\r\n    mapStateChangeWaitingBehavior(state: string) {\r\n      switch (state) {\r\n        case \"FORCE_WAIT\":\r\n          return StateChangeWaitingBehavior.forceWait;\r\n        case \"NO_WAIT\":\r\n          return StateChangeWaitingBehavior.noWait;\r\n\r\n        default:\r\n          return StateChangeWaitingBehavior.forceWait;\r\n\r\n      }\r\n\r\n    }\r\n    set stateChangeWaitingBehavior(value: string) {\r\n      this.#stateChangeWaitingBehavior = this.mapStateChangeWaitingBehavior(value);\r\n    }\r\n    get stateChangeWaitingBehavior() {\r\n      return this.#stateChangeWaitingBehavior;\r\n    }\r\n    get disableCaptureScroll() {\r\n      return this.#disableCaptureScroll;\r\n    }\r\n\r\n    set disableCaptureScroll(value: boolean) {\r\n      this.#disableCaptureScroll = value;\r\n      this.setIsWaitingForStatChange(false);\r\n    }\r\n    get isListEnded() {\r\n      return this.#isListEnded;\r\n    }\r\n    set isListEnded(value: boolean) {\r\n      this.#isListEnded = value;\r\n      this.setIsWaitingForStatChange(false);\r\n\r\n    }\r\n    get isLoading() {\r\n      return this.#isLoading;\r\n    }\r\n    set isLoading(value: boolean) {\r\n      this.#isLoading = value;\r\n      this.setIsWaitingForStatChange(false);\r\n      if (value) {\r\n        this.elements?.loading.classList.add('--show');\r\n      } else {\r\n        this.elements?.loading.classList.remove('--show');\r\n        this.checkEmptyListState();\r\n        this.checkScrollHeight();\r\n      }\r\n    }\r\n    get isListEmpty() {\r\n      return this.#isListEmpty;\r\n    }\r\n    set isListEmpty(value: boolean) {\r\n      this.#isListEmpty = value;\r\n      this.setIsWaitingForStatChange(false);\r\n\r\n\r\n    }\r\n    get isLastPage() {\r\n      return this.#isLastPage;\r\n    }\r\n    set isLastPage(value: boolean) {\r\n      this.#isLastPage = value;\r\n    }\r\n    checkEmptyListState() {\r\n      if (this.#isListEmpty) {\r\n        this.elements?.emptyListWrapper.classList.add('--show');\r\n        this.elements?.contentWrapper.classList.remove('--show');\r\n\r\n      } else {\r\n        this.elements?.contentWrapper.classList.add('--show');\r\n        this.elements?.emptyListWrapper.classList.remove('--show');\r\n\r\n      }\r\n    }\r\n    connectedCallback() {\r\n      // standard web component event that called when all of dom is bounded\r\n      this.callOnLoadEvent();\r\n      this.initProp();\r\n      this.callOnInitEvent();\r\n\r\n    }\r\n    callOnLoadEvent() {\r\n      const event = new CustomEvent('load', { bubbles: true, composed: true });\r\n      this.dispatchEvent(event);\r\n    }\r\n    callOnInitEvent() {\r\n      const event = new CustomEvent('init', { bubbles: true, composed: true });\r\n      this.dispatchEvent(event);\r\n    }\r\n    initWebComponent() {\r\n      const shadowRoot = this.attachShadow({\r\n        mode: 'open'\r\n      });\r\n      const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n      const element = document.createElement('template');\r\n      element.innerHTML = html;\r\n      shadowRoot.appendChild(element.content.cloneNode(true));\r\n      this.elements = {\r\n        loading: shadowRoot.querySelector('.loading-wrapper')!,\r\n        componentWrapper: shadowRoot.querySelector('.Infinite-scroll-component')!,\r\n        contentWrapper: shadowRoot.querySelector('.content-wrapper')!,\r\n        loadingWrapper: shadowRoot.querySelector('.loading-wrapper')!,\r\n        emptyListWrapper: shadowRoot.querySelector('.empty-list-wrapper')!,\r\n      };\r\n\r\n    }\r\n    registerEventListener() {\r\n      this.elements.contentWrapper.addEventListener('scroll', this.onScroll.bind(this), { passive: true });\r\n    }\r\n    initProp() {\r\n      this.registerEventListener();\r\n      this.checkScrollHeight();\r\n    }\r\n    checkScrollHeight() {\r\n      //check if our container is bigger than our content we call scroll end event\r\n      const { scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n      if (scrollHeight <= clientHeight && this.canCaptureScroll) {\r\n        this.onScrollEnd();\r\n      }\r\n    }\r\n    onScrollEnd() {        \r\n      this.setIsWaitingForStatChange(true);\r\n      const event = new CustomEvent('scrollEnd');\r\n      this.dispatchEvent(event);\r\n    }\r\n    onScroll() {\r\n      const { scrollTop, scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n      if (scrollTop + clientHeight + this.#endPageGap >= scrollHeight) {\r\n        if (this.canCaptureScroll) {\r\n          this.onScrollEnd();\r\n        }\r\n      }\r\n    }\r\n    setIsWaitingForStatChange(isWaitingStatus: boolean) {\r\n\r\n      if (isWaitingStatus) {\r\n        if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.forceWait) {\r\n          this.#isWaitingForStateChange = true;\r\n        } else if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.noWait) {\r\n          return;\r\n        }\r\n      }\r\n      this.#isWaitingForStateChange = false;\r\n\r\n\r\n\r\n    }\r\n    get canCaptureScroll() {\r\n      if (!(this.#isLoading || this.#isListEmpty || this.#isListEnded || this.#isWaitingForStateChange || this.#disableCaptureScroll)) {\r\n        return true;\r\n\r\n      }\r\n      return false;\r\n    }\r\n\r\n    static get observedAttributes() {\r\n      return ['is-loading', 'is-list-empty', 'is-list-ended', 'disable-capture-scroll', 'state-change-waiting-behavior'];\r\n    }\r\n    attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n      // do something when an attribute has changed\r\n      this.onAttributeChange(name, newValue);\r\n    }\r\n    onAttributeChange(name: string, value: string) {\r\n      switch (name) {\r\n        case 'is-loading':\r\n          if (value === 'true') {\r\n            this.isLoading = true;\r\n          } else {\r\n            this.isLoading = false;\r\n          }\r\n          break;\r\n        case 'is-list-empty':\r\n          if (value === 'true') {\r\n            this.isListEmpty = true;\r\n          } else {\r\n            this.isListEmpty = false;\r\n\r\n          }\r\n          break;\r\n        case 'is-list-ended':\r\n          if (value === 'true') {\r\n            this.#isListEnded = true;\r\n          } else {\r\n            this.#isListEnded = false;\r\n\r\n          }\r\n          break;\r\n\r\n        case 'disable-capture-scroll':\r\n          if (value === 'true') {\r\n            this.#disableCaptureScroll = true;\r\n          } else {\r\n            this.#disableCaptureScroll = false;\r\n\r\n          }\r\n          break;\r\n        case 'state-change-waiting-behavior':\r\n          this.#stateChangeWaitingBehavior = this.mapStateChangeWaitingBehavior(value);\r\n          break;\r\n\r\n\r\n      }\r\n\r\n    }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-infinite-scroll');\r\nif (myElementNotExists) {\r\n  window.customElements.define('jb-infinite-scroll', JBInfiniteScrollWebComponent);\r\n}\r\n"],"names":["StateChangeWaitingBehavior","JBInfiniteScrollWebComponent","HTMLElement","constructor","super","_JBInfiniteScrollWebComponent_isLoading","set","this","_JBInfiniteScrollWebComponent_endPageGap","_JBInfiniteScrollWebComponent_isLastPage","_JBInfiniteScrollWebComponent_isListEnded","_JBInfiniteScrollWebComponent_isWaitingForStateChange","_JBInfiniteScrollWebComponent_disableCaptureScroll","_JBInfiniteScrollWebComponent_isListEmpty","_JBInfiniteScrollWebComponent_stateChangeWaitingBehavior","forceWait","initWebComponent","mapStateChangeWaitingBehavior","state","noWait","stateChangeWaitingBehavior","value","__classPrivateFieldSet","__classPrivateFieldGet","disableCaptureScroll","setIsWaitingForStatChange","isListEnded","isLoading","elements","loading","classList","add","remove","checkEmptyListState","checkScrollHeight","isListEmpty","isLastPage","emptyListWrapper","contentWrapper","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","querySelector","componentWrapper","loadingWrapper","registerEventListener","addEventListener","onScroll","bind","passive","scrollHeight","clientHeight","canCaptureScroll","onScrollEnd","scrollTop","isWaitingStatus","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","customElements","get","window","define"],"mappings":"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"}
+{"version":3,"file":"jb-infinite-scroll.cjs.js","sources":["../lib/types.ts","../lib/jb-infinite-scroll.ts"],"sourcesContent":["export type Elements = {\r\n    loading: HTMLDivElement,\r\n    contentWrapper: HTMLDivElement,\r\n    componentWrapper: HTMLDivElement,\r\n    emptyListWrapper: HTMLDivElement,\r\n    loadingWrapper: HTMLDivElement,\r\n}\r\n\r\nexport enum StateChangeWaitingBehavior {\r\n    // when user scroll we lock event call and wait for user to change isLoading (good for React or any other ui framework solution)\r\n    forceWait = \"FORCE_WAIT\",\r\n    // when user scroll we dont lock its event listener and developer should handle extra scroll by it self (good for pure js solution)\r\n    noWait = \"NO_WAIT\",\r\n}","import HTML from './jb-infinite-scroll.html';\r\nimport CSS from './jb-infinite-scroll.scss';\r\nimport { Elements, StateChangeWaitingBehavior } from './types.js';\r\nimport \"jb-loading\";\r\n\r\nexport * from \"./types.js\";\r\n\r\nexport class JBInfiniteScrollWebComponent extends HTMLElement {\r\n  elements!: Elements;\r\n  #isLoading = false;\r\n  //the amount of space that we listen to for trigger refresh \r\n  #endPageGap = 0;\r\n\r\n  #isListEnded = false;\r\n  //used when user scroll and we dont want to capture multiple scroll at one and wait for prev scroll event to finish\r\n  #isWaitingForStateChange = false;\r\n  #disableCaptureScroll = false;\r\n  // if user set empty state from outside (change to manual mode)\r\n  #externalIsListEmpty: boolean | null = null;\r\n  #internals: ElementInternals;\r\n  get #isListEmpty() {\r\n    if (this.#externalIsListEmpty !== null) {\r\n      return this.#externalIsListEmpty;\r\n    }\r\n  }\r\n  #stateChangeWaitingBehavior: StateChangeWaitingBehavior = StateChangeWaitingBehavior.forceWait;\r\n\r\n  constructor() {\r\n    super();\r\n    if (typeof this.attachInternals == \"function\") {\r\n      //some browser dont support attachInternals\r\n      this.#internals = this.attachInternals();\r\n    }\r\n    this.#initWebComponent();\r\n  }\r\n  #mapStateChangeWaitingBehavior(state: string) {\r\n    switch (state) {\r\n      case \"FORCE_WAIT\":\r\n        return StateChangeWaitingBehavior.forceWait;\r\n      case \"NO_WAIT\":\r\n        return StateChangeWaitingBehavior.noWait;\r\n\r\n      default:\r\n        return StateChangeWaitingBehavior.forceWait;\r\n\r\n    }\r\n\r\n  }\r\n  set stateChangeWaitingBehavior(value: string) {\r\n    this.#stateChangeWaitingBehavior = this.#mapStateChangeWaitingBehavior(value);\r\n  }\r\n  get stateChangeWaitingBehavior() {\r\n    return this.#stateChangeWaitingBehavior;\r\n  }\r\n  get disableCaptureScroll() {\r\n    return this.#disableCaptureScroll;\r\n  }\r\n\r\n  set disableCaptureScroll(value: boolean) {\r\n    this.#disableCaptureScroll = value;\r\n    this.#setIsWaitingForStatChange(false);\r\n  }\r\n  get isListEnded() {\r\n    return this.#isListEnded;\r\n  }\r\n  set isListEnded(value: boolean) {\r\n    this.#isListEnded = value;\r\n    this.#setIsWaitingForStatChange(false);\r\n\r\n  }\r\n  get isLoading() {\r\n    return this.#isLoading;\r\n  }\r\n  set isLoading(value: boolean) {\r\n    this.#isLoading = value;\r\n    this.#setIsWaitingForStatChange(false);\r\n    if (value) {\r\n      this.elements?.loading.classList.add('--show');\r\n      (this.#internals as any).states?.add(\"loading\");\r\n    } else {\r\n      this.elements?.loading.classList.remove('--show');\r\n      (this.#internals as any).states?.delete(\"loading\");\r\n      this.#checkEmptyListState();\r\n      this.#checkScrollHeight();\r\n    }\r\n  }\r\n  get isListEmpty() {\r\n    return this.#externalIsListEmpty;\r\n  }\r\n  set isListEmpty(value: boolean) {\r\n    this.#externalIsListEmpty = value;\r\n    if(value){\r\n      (this.#internals as any).states?.add(\"empty\");\r\n    }else{\r\n      (this.#internals as any).states?.delete(\"empty\");\r\n    }\r\n    this.#setIsWaitingForStatChange(false);\r\n    this.#checkEmptyListState();\r\n\r\n  }\r\n  #checkEmptyListState() {\r\n    if (this.#isListEmpty) {\r\n      this.elements?.emptyListWrapper.classList.add('--show');\r\n      this.elements?.contentWrapper.classList.remove('--show');\r\n\r\n    } else {\r\n      this.elements?.contentWrapper.classList.add('--show');\r\n      this.elements?.emptyListWrapper.classList.remove('--show');\r\n\r\n    }\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is bounded\r\n    this.callOnLoadEvent();\r\n    this.#initProp();\r\n    this.callOnInitEvent();\r\n\r\n  }\r\n  callOnLoadEvent() {\r\n    const event = new CustomEvent('load', { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  callOnInitEvent() {\r\n    const event = new CustomEvent('init', { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: 'open'\r\n    });\r\n    const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n    const element = document.createElement('template');\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      loading: shadowRoot.querySelector('.loading-wrapper')!,\r\n      componentWrapper: shadowRoot.querySelector('.Infinite-scroll-component')!,\r\n      contentWrapper: shadowRoot.querySelector('.content-wrapper')!,\r\n      loadingWrapper: shadowRoot.querySelector('.loading-wrapper')!,\r\n      emptyListWrapper: shadowRoot.querySelector('.empty-list-wrapper')!,\r\n    } as const;\r\n\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.contentWrapper.addEventListener('scroll', this.#onScroll.bind(this), { passive: true });\r\n  }\r\n  #initProp() {\r\n    this.#registerEventListener();\r\n    this.#checkScrollHeight();\r\n  }\r\n  #checkScrollHeight() {\r\n    //check if our container is bigger than our content we call scroll end event\r\n    const { scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n    if (scrollHeight <= clientHeight && this.canCaptureScroll) {\r\n      this.#onScrollEnd();\r\n    }\r\n  }\r\n  #onScrollEnd() {\r\n    this.#setIsWaitingForStatChange(true);\r\n    const event = new CustomEvent('scrollEnd');\r\n    this.dispatchEvent(event);\r\n  }\r\n  #onScroll() {\r\n    const { scrollTop, scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n    if (scrollTop + clientHeight + this.#endPageGap >= scrollHeight) {\r\n      if (this.canCaptureScroll) {\r\n        this.#onScrollEnd();\r\n      }\r\n    }\r\n  }\r\n  #setIsWaitingForStatChange(isWaitingStatus: boolean) {\r\n\r\n    if (isWaitingStatus) {\r\n      if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.forceWait) {\r\n        this.#isWaitingForStateChange = true;\r\n      } else if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.noWait) {\r\n        return;\r\n      }\r\n    }\r\n    this.#isWaitingForStateChange = false;\r\n\r\n\r\n\r\n  }\r\n  get canCaptureScroll() {\r\n    if (!(this.#isLoading || this.#isListEmpty || this.#isListEnded || this.#isWaitingForStateChange || this.#disableCaptureScroll)) {\r\n      return true;\r\n\r\n    }\r\n    return false;\r\n  }\r\n\r\n  static get observedAttributes() {\r\n    return ['is-loading', 'is-list-empty', 'is-list-ended', 'disable-capture-scroll', 'state-change-waiting-behavior'];\r\n  }\r\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n    // do something when an attribute has changed\r\n    this.#onAttributeChange(name, newValue);\r\n  }\r\n  #onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case 'is-loading':\r\n        if (value === 'true') {\r\n          this.isLoading = true;\r\n        } else {\r\n          this.isLoading = false;\r\n        }\r\n        break;\r\n      case 'is-list-empty':\r\n        if (value === 'true') {\r\n          this.isListEmpty = true;\r\n        } else {\r\n          this.isListEmpty = false;\r\n\r\n        }\r\n        break;\r\n      case 'is-list-ended':\r\n        if (value === 'true') {\r\n          this.#isListEnded = true;\r\n        } else {\r\n          this.#isListEnded = false;\r\n\r\n        }\r\n        break;\r\n\r\n      case 'disable-capture-scroll':\r\n        if (value === 'true') {\r\n          this.#disableCaptureScroll = true;\r\n        } else {\r\n          this.#disableCaptureScroll = false;\r\n\r\n        }\r\n        break;\r\n      case 'state-change-waiting-behavior':\r\n        this.#stateChangeWaitingBehavior = this.#mapStateChangeWaitingBehavior(value);\r\n        break;\r\n\r\n\r\n    }\r\n\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-infinite-scroll');\r\nif (myElementNotExists) {\r\n  window.customElements.define('jb-infinite-scroll', JBInfiniteScrollWebComponent);\r\n}\r\n"],"names":["StateChangeWaitingBehavior","JBInfiniteScrollWebComponent","HTMLElement","constructor","super","_JBInfiniteScrollWebComponent_isLoading","set","this","_JBInfiniteScrollWebComponent_endPageGap","_JBInfiniteScrollWebComponent_isListEnded","_JBInfiniteScrollWebComponent_isWaitingForStateChange","_JBInfiniteScrollWebComponent_disableCaptureScroll","_JBInfiniteScrollWebComponent_externalIsListEmpty","_JBInfiniteScrollWebComponent_internals","_JBInfiniteScrollWebComponent_stateChangeWaitingBehavior","forceWait","attachInternals","__classPrivateFieldSet","__classPrivateFieldGet","_JBInfiniteScrollWebComponent_instances","_JBInfiniteScrollWebComponent_initWebComponent","call","stateChangeWaitingBehavior","value","_JBInfiniteScrollWebComponent_mapStateChangeWaitingBehavior","disableCaptureScroll","_JBInfiniteScrollWebComponent_setIsWaitingForStatChange","isListEnded","isLoading","elements","loading","classList","add","states","remove","delete","_JBInfiniteScrollWebComponent_checkEmptyListState","_JBInfiniteScrollWebComponent_checkScrollHeight","isListEmpty","connectedCallback","callOnLoadEvent","_JBInfiniteScrollWebComponent_initProp","callOnInitEvent","event","CustomEvent","bubbles","composed","dispatchEvent","canCaptureScroll","_JBInfiniteScrollWebComponent_isListEmpty_get","observedAttributes","attributeChangedCallback","name","oldValue","newValue","state","noWait","emptyListWrapper","contentWrapper","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","querySelector","componentWrapper","loadingWrapper","_JBInfiniteScrollWebComponent_registerEventListener","addEventListener","_JBInfiniteScrollWebComponent_onScroll","bind","passive","scrollHeight","clientHeight","_JBInfiniteScrollWebComponent_onScrollEnd","scrollTop","isWaitingStatus","_JBInfiniteScrollWebComponent_onAttributeChange","customElements","get","window","define"],"mappings":"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"}

package/dist/jb-infinite-scroll.js

@@ -1,2 +1,2 @@
-import"jb-loading";function t(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function e(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}"function"==typeof SuppressedError&&SuppressedError;var n,i,s,r,a,o,l,c,p;!function(t){t.forceWait="FORCE_WAIT",t.noWait="NO_WAIT"}(n||(n={}));class h extends HTMLElement{constructor(){super(),i.set(this,!1),s.set(this,0),r.set(this,!1),a.set(this,!1),o.set(this,!1),l.set(this,!1),c.set(this,!1),p.set(this,n.forceWait),this.initWebComponent()}mapStateChangeWaitingBehavior(t){switch(t){case"FORCE_WAIT":default:return n.forceWait;case"NO_WAIT":return n.noWait}}set stateChangeWaitingBehavior(t){e(this,p,this.mapStateChangeWaitingBehavior(t),"f")}get stateChangeWaitingBehavior(){return t(this,p,"f")}get disableCaptureScroll(){return t(this,l,"f")}set disableCaptureScroll(t){e(this,l,t,"f"),this.setIsWaitingForStatChange(!1)}get isListEnded(){return t(this,a,"f")}set isListEnded(t){e(this,a,t,"f"),this.setIsWaitingForStatChange(!1)}get isLoading(){return t(this,i,"f")}set isLoading(t){e(this,i,t,"f"),this.setIsWaitingForStatChange(!1),t?this.elements?.loading.classList.add("--show"):(this.elements?.loading.classList.remove("--show"),this.checkEmptyListState(),this.checkScrollHeight())}get isListEmpty(){return t(this,c,"f")}set isListEmpty(t){e(this,c,t,"f"),this.setIsWaitingForStatChange(!1)}get isLastPage(){return t(this,r,"f")}set isLastPage(t){e(this,r,t,"f")}checkEmptyListState(){t(this,c,"f")?(this.elements?.emptyListWrapper.classList.add("--show"),this.elements?.contentWrapper.classList.remove("--show")):(this.elements?.contentWrapper.classList.add("--show"),this.elements?.emptyListWrapper.classList.remove("--show"))}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}callOnLoadEvent(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)}callOnInitEvent(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)}initWebComponent(){const t=this.attachShadow({mode:"open"}),e=document.createElement("template");e.innerHTML='<style>.infinite-scroll-component {\n  height: 100%;\n  display: grid;\n  grid-template-rows: auto 1fr;\n}\n.infinite-scroll-component .content-wrapper {\n  width: 100%;\n  height: auto;\n  display: none;\n  overflow: auto;\n}\n.infinite-scroll-component .content-wrapper.--show {\n  display: inline-block;\n}\n.infinite-scroll-component .empty-list-wrapper {\n  width: 100%;\n  height: 100%;\n  display: none;\n}\n.infinite-scroll-component .empty-list-wrapper.--show {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.infinite-scroll-component .loading-wrapper {\n  display: none;\n  --jb-loading-color: var(--captcha-component-loading-color, #1565D8);\n}\n.infinite-scroll-component .loading-wrapper .default-loading {\n  width: 40px;\n  height: 40px;\n  margin: 0 auto;\n}\n.infinite-scroll-component .loading-wrapper.--show {\n  display: inline-block;\n}</style>\n<div class="infinite-scroll-component">\r\n    <div class="content-wrapper" part="content-wrapper">\r\n        <slot name="infinite-scroll-content"></slot>\r\n    </div>\r\n    <div class="empty-list-wrapper" part="empty-list-wrapper">\r\n        <slot name="empty-list-content">\r\n            <div class="default-empty-list">\r\n                <p>empty list</p>\r\n            </div>\r\n        </slot>\r\n    </div>\r\n    <div class="loading-wrapper" part="loading-wrapper">\r\n        <slot name="loading-content">\r\n            <div class="default-loading">\r\n                <jb-loading></jb-loading>\r\n            </div>\r\n        </slot>\r\n    </div>\r\n</div>',t.appendChild(e.content.cloneNode(!0)),this.elements={loading:t.querySelector(".loading-wrapper"),componentWrapper:t.querySelector(".Infinite-scroll-component"),contentWrapper:t.querySelector(".content-wrapper"),loadingWrapper:t.querySelector(".loading-wrapper"),emptyListWrapper:t.querySelector(".empty-list-wrapper")}}registerEventListener(){this.elements.contentWrapper.addEventListener("scroll",this.onScroll.bind(this),{passive:!0})}initProp(){this.registerEventListener(),this.checkScrollHeight()}checkScrollHeight(){const{scrollHeight:t,clientHeight:e}=this.elements.contentWrapper;t<=e&&this.canCaptureScroll&&this.onScrollEnd()}onScrollEnd(){this.setIsWaitingForStatChange(!0);const t=new CustomEvent("scrollEnd");this.dispatchEvent(t)}onScroll(){const{scrollTop:e,scrollHeight:n,clientHeight:i}=this.elements.contentWrapper;e+i+t(this,s,"f")>=n&&this.canCaptureScroll&&this.onScrollEnd()}setIsWaitingForStatChange(i){if(i)if(t(this,p,"f")===n.forceWait)e(this,o,!0,"f");else if(t(this,p,"f")===n.noWait)return;e(this,o,!1,"f")}get canCaptureScroll(){return!(t(this,i,"f")||t(this,c,"f")||t(this,a,"f")||t(this,o,"f")||t(this,l,"f"))}static get observedAttributes(){return["is-loading","is-list-empty","is-list-ended","disable-capture-scroll","state-change-waiting-behavior"]}attributeChangedCallback(t,e,n){this.onAttributeChange(t,n)}onAttributeChange(t,n){switch(t){case"is-loading":this.isLoading="true"===n;break;case"is-list-empty":this.isListEmpty="true"===n;break;case"is-list-ended":e(this,a,"true"===n,"f");break;case"disable-capture-scroll":e(this,l,"true"===n,"f");break;case"state-change-waiting-behavior":e(this,p,this.mapStateChangeWaitingBehavior(n),"f")}}}i=new WeakMap,s=new WeakMap,r=new WeakMap,a=new WeakMap,o=new WeakMap,l=new WeakMap,c=new WeakMap,p=new WeakMap;!customElements.get("jb-infinite-scroll")&&window.customElements.define("jb-infinite-scroll",h);export{h as JBInfiniteScrollWebComponent,n as StateChangeWaitingBehavior};
+import"jb-loading";function t(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function e(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}"function"==typeof SuppressedError&&SuppressedError;var n,i,s,a,r,o,l,c,h,p,d,m,f,u,w,g,y,v,b,W,E;!function(t){t.forceWait="FORCE_WAIT",t.noWait="NO_WAIT"}(n||(n={}));class L extends HTMLElement{constructor(){super(),i.add(this),s.set(this,!1),a.set(this,0),r.set(this,!1),o.set(this,!1),l.set(this,!1),c.set(this,null),h.set(this,void 0),d.set(this,n.forceWait),"function"==typeof this.attachInternals&&e(this,h,this.attachInternals(),"f"),t(this,i,"m",u).call(this)}set stateChangeWaitingBehavior(n){e(this,d,t(this,i,"m",m).call(this,n),"f")}get stateChangeWaitingBehavior(){return t(this,d,"f")}get disableCaptureScroll(){return t(this,l,"f")}set disableCaptureScroll(n){e(this,l,n,"f"),t(this,i,"m",W).call(this,!1)}get isListEnded(){return t(this,r,"f")}set isListEnded(n){e(this,r,n,"f"),t(this,i,"m",W).call(this,!1)}get isLoading(){return t(this,s,"f")}set isLoading(n){e(this,s,n,"f"),t(this,i,"m",W).call(this,!1),n?(this.elements?.loading.classList.add("--show"),t(this,h,"f").states?.add("loading")):(this.elements?.loading.classList.remove("--show"),t(this,h,"f").states?.delete("loading"),t(this,i,"m",f).call(this),t(this,i,"m",y).call(this))}get isListEmpty(){return t(this,c,"f")}set isListEmpty(n){e(this,c,n,"f"),n?t(this,h,"f").states?.add("empty"):t(this,h,"f").states?.delete("empty"),t(this,i,"m",W).call(this,!1),t(this,i,"m",f).call(this)}connectedCallback(){this.callOnLoadEvent(),t(this,i,"m",g).call(this),this.callOnInitEvent()}callOnLoadEvent(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)}callOnInitEvent(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)}get canCaptureScroll(){return!(t(this,s,"f")||t(this,i,"a",p)||t(this,r,"f")||t(this,o,"f")||t(this,l,"f"))}static get observedAttributes(){return["is-loading","is-list-empty","is-list-ended","disable-capture-scroll","state-change-waiting-behavior"]}attributeChangedCallback(e,n,s){t(this,i,"m",E).call(this,e,s)}}s=new WeakMap,a=new WeakMap,r=new WeakMap,o=new WeakMap,l=new WeakMap,c=new WeakMap,h=new WeakMap,d=new WeakMap,i=new WeakSet,p=function(){if(null!==t(this,c,"f"))return t(this,c,"f")},m=function(t){switch(t){case"FORCE_WAIT":default:return n.forceWait;case"NO_WAIT":return n.noWait}},f=function(){t(this,i,"a",p)?(this.elements?.emptyListWrapper.classList.add("--show"),this.elements?.contentWrapper.classList.remove("--show")):(this.elements?.contentWrapper.classList.add("--show"),this.elements?.emptyListWrapper.classList.remove("--show"))},u=function(){const t=this.attachShadow({mode:"open"}),e=document.createElement("template");e.innerHTML='<style>:host {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.infinite-scroll-component {\n  height: 100%;\n}\n.infinite-scroll-component .content-wrapper {\n  width: 100%;\n  height: 100%;\n  display: none;\n  overflow: auto;\n}\n.infinite-scroll-component .content-wrapper.--show {\n  display: block;\n}\n.infinite-scroll-component .content-wrapper ::slotted([slot=content]) {\n  height: auto;\n}\n.infinite-scroll-component .loading-wrapper {\n  display: none;\n}\n.infinite-scroll-component .loading-wrapper .default-loading {\n  width: 40px;\n  height: 40px;\n  margin: 0 auto;\n}\n.infinite-scroll-component .loading-wrapper.--show {\n  display: block;\n}\n.infinite-scroll-component .empty-list-wrapper {\n  width: 100%;\n  height: 100%;\n  display: none;\n}\n.infinite-scroll-component .empty-list-wrapper.--show {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.infinite-scroll-component .empty-list-wrapper ::slotted([slot=empty]) {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 1rem;\n  box-sizing: border-box;\n}</style>\n<div class="infinite-scroll-component">\r\n    <div class="content-wrapper" part="content-wrapper">\r\n        <slot name="content"></slot>\r\n        <div class="loading-wrapper" part="loading-wrapper">\r\n            <slot name="loading">\r\n                <div class="default-loading">\r\n                    <jb-loading part="default-loading"></jb-loading>\r\n                </div>\r\n            </slot>\r\n        </div>\r\n    </div>\r\n    <div class="empty-list-wrapper" part="empty-list-wrapper">\r\n        <slot name="empty">\r\n        </slot>\r\n    </div>\r\n    \r\n</div>',t.appendChild(e.content.cloneNode(!0)),this.elements={loading:t.querySelector(".loading-wrapper"),componentWrapper:t.querySelector(".Infinite-scroll-component"),contentWrapper:t.querySelector(".content-wrapper"),loadingWrapper:t.querySelector(".loading-wrapper"),emptyListWrapper:t.querySelector(".empty-list-wrapper")}},w=function(){this.elements.contentWrapper.addEventListener("scroll",t(this,i,"m",b).bind(this),{passive:!0})},g=function(){t(this,i,"m",w).call(this),t(this,i,"m",y).call(this)},y=function(){const{scrollHeight:e,clientHeight:n}=this.elements.contentWrapper;e<=n&&this.canCaptureScroll&&t(this,i,"m",v).call(this)},v=function(){t(this,i,"m",W).call(this,!0);const e=new CustomEvent("scrollEnd");this.dispatchEvent(e)},b=function(){const{scrollTop:e,scrollHeight:n,clientHeight:s}=this.elements.contentWrapper;e+s+t(this,a,"f")>=n&&this.canCaptureScroll&&t(this,i,"m",v).call(this)},W=function(i){if(i)if(t(this,d,"f")===n.forceWait)e(this,o,!0,"f");else if(t(this,d,"f")===n.noWait)return;e(this,o,!1,"f")},E=function(n,s){switch(n){case"is-loading":this.isLoading="true"===s;break;case"is-list-empty":this.isListEmpty="true"===s;break;case"is-list-ended":e(this,r,"true"===s,"f");break;case"disable-capture-scroll":e(this,l,"true"===s,"f");break;case"state-change-waiting-behavior":e(this,d,t(this,i,"m",m).call(this,s),"f")}};!customElements.get("jb-infinite-scroll")&&window.customElements.define("jb-infinite-scroll",L);export{L as JBInfiniteScrollWebComponent,n as StateChangeWaitingBehavior};
 //# sourceMappingURL=jb-infinite-scroll.js.map

package/dist/jb-infinite-scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":"jb-infinite-scroll.js","sources":["../lib/types.ts","../lib/jb-infinite-scroll.ts"],"sourcesContent":["export type Elements = {\r\n    loading: HTMLDivElement,\r\n    contentWrapper: HTMLDivElement,\r\n    componentWrapper: HTMLDivElement,\r\n    emptyListWrapper: HTMLDivElement,\r\n    loadingWrapper: HTMLDivElement,\r\n}\r\n\r\nexport enum StateChangeWaitingBehavior {\r\n    // when user scroll we lock event call and wait for user to change isLoading (good for React or any other ui framework solution)\r\n    forceWait = \"FORCE_WAIT\",\r\n    // when user scroll we dont lock its event listener and developer should handle extra scroll by it self (good for pure js solution)\r\n    noWait = \"NO_WAIT\",\r\n}","import HTML from './jb-infinite-scroll.html';\r\nimport CSS from './jb-infinite-scroll.scss';\r\nimport { Elements, StateChangeWaitingBehavior } from './types.js';\r\nimport \"jb-loading\";\r\n\r\nexport * from \"./types.js\";\r\n\r\nexport class JBInfiniteScrollWebComponent extends HTMLElement {\r\n    elements!: Elements;\r\n    #isLoading = false;\r\n    //the amount of space that we listen to for trigger refresh \r\n    #endPageGap = 0;\r\n    #isLastPage = false;\r\n\r\n    #isListEnded = false;\r\n    //used when user scroll and we dont want to capture multiple scroll at one and wait for prev scroll event to finish\r\n    #isWaitingForStateChange = false;\r\n    #disableCaptureScroll = false;\r\n    #isListEmpty = false;\r\n    #stateChangeWaitingBehavior: StateChangeWaitingBehavior = StateChangeWaitingBehavior.forceWait;\r\n\r\n\r\n    constructor() {\r\n      super();\r\n      this.initWebComponent();\r\n    }\r\n    mapStateChangeWaitingBehavior(state: string) {\r\n      switch (state) {\r\n        case \"FORCE_WAIT\":\r\n          return StateChangeWaitingBehavior.forceWait;\r\n        case \"NO_WAIT\":\r\n          return StateChangeWaitingBehavior.noWait;\r\n\r\n        default:\r\n          return StateChangeWaitingBehavior.forceWait;\r\n\r\n      }\r\n\r\n    }\r\n    set stateChangeWaitingBehavior(value: string) {\r\n      this.#stateChangeWaitingBehavior = this.mapStateChangeWaitingBehavior(value);\r\n    }\r\n    get stateChangeWaitingBehavior() {\r\n      return this.#stateChangeWaitingBehavior;\r\n    }\r\n    get disableCaptureScroll() {\r\n      return this.#disableCaptureScroll;\r\n    }\r\n\r\n    set disableCaptureScroll(value: boolean) {\r\n      this.#disableCaptureScroll = value;\r\n      this.setIsWaitingForStatChange(false);\r\n    }\r\n    get isListEnded() {\r\n      return this.#isListEnded;\r\n    }\r\n    set isListEnded(value: boolean) {\r\n      this.#isListEnded = value;\r\n      this.setIsWaitingForStatChange(false);\r\n\r\n    }\r\n    get isLoading() {\r\n      return this.#isLoading;\r\n    }\r\n    set isLoading(value: boolean) {\r\n      this.#isLoading = value;\r\n      this.setIsWaitingForStatChange(false);\r\n      if (value) {\r\n        this.elements?.loading.classList.add('--show');\r\n      } else {\r\n        this.elements?.loading.classList.remove('--show');\r\n        this.checkEmptyListState();\r\n        this.checkScrollHeight();\r\n      }\r\n    }\r\n    get isListEmpty() {\r\n      return this.#isListEmpty;\r\n    }\r\n    set isListEmpty(value: boolean) {\r\n      this.#isListEmpty = value;\r\n      this.setIsWaitingForStatChange(false);\r\n\r\n\r\n    }\r\n    get isLastPage() {\r\n      return this.#isLastPage;\r\n    }\r\n    set isLastPage(value: boolean) {\r\n      this.#isLastPage = value;\r\n    }\r\n    checkEmptyListState() {\r\n      if (this.#isListEmpty) {\r\n        this.elements?.emptyListWrapper.classList.add('--show');\r\n        this.elements?.contentWrapper.classList.remove('--show');\r\n\r\n      } else {\r\n        this.elements?.contentWrapper.classList.add('--show');\r\n        this.elements?.emptyListWrapper.classList.remove('--show');\r\n\r\n      }\r\n    }\r\n    connectedCallback() {\r\n      // standard web component event that called when all of dom is bounded\r\n      this.callOnLoadEvent();\r\n      this.initProp();\r\n      this.callOnInitEvent();\r\n\r\n    }\r\n    callOnLoadEvent() {\r\n      const event = new CustomEvent('load', { bubbles: true, composed: true });\r\n      this.dispatchEvent(event);\r\n    }\r\n    callOnInitEvent() {\r\n      const event = new CustomEvent('init', { bubbles: true, composed: true });\r\n      this.dispatchEvent(event);\r\n    }\r\n    initWebComponent() {\r\n      const shadowRoot = this.attachShadow({\r\n        mode: 'open'\r\n      });\r\n      const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n      const element = document.createElement('template');\r\n      element.innerHTML = html;\r\n      shadowRoot.appendChild(element.content.cloneNode(true));\r\n      this.elements = {\r\n        loading: shadowRoot.querySelector('.loading-wrapper')!,\r\n        componentWrapper: shadowRoot.querySelector('.Infinite-scroll-component')!,\r\n        contentWrapper: shadowRoot.querySelector('.content-wrapper')!,\r\n        loadingWrapper: shadowRoot.querySelector('.loading-wrapper')!,\r\n        emptyListWrapper: shadowRoot.querySelector('.empty-list-wrapper')!,\r\n      };\r\n\r\n    }\r\n    registerEventListener() {\r\n      this.elements.contentWrapper.addEventListener('scroll', this.onScroll.bind(this), { passive: true });\r\n    }\r\n    initProp() {\r\n      this.registerEventListener();\r\n      this.checkScrollHeight();\r\n    }\r\n    checkScrollHeight() {\r\n      //check if our container is bigger than our content we call scroll end event\r\n      const { scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n      if (scrollHeight <= clientHeight && this.canCaptureScroll) {\r\n        this.onScrollEnd();\r\n      }\r\n    }\r\n    onScrollEnd() {        \r\n      this.setIsWaitingForStatChange(true);\r\n      const event = new CustomEvent('scrollEnd');\r\n      this.dispatchEvent(event);\r\n    }\r\n    onScroll() {\r\n      const { scrollTop, scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n      if (scrollTop + clientHeight + this.#endPageGap >= scrollHeight) {\r\n        if (this.canCaptureScroll) {\r\n          this.onScrollEnd();\r\n        }\r\n      }\r\n    }\r\n    setIsWaitingForStatChange(isWaitingStatus: boolean) {\r\n\r\n      if (isWaitingStatus) {\r\n        if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.forceWait) {\r\n          this.#isWaitingForStateChange = true;\r\n        } else if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.noWait) {\r\n          return;\r\n        }\r\n      }\r\n      this.#isWaitingForStateChange = false;\r\n\r\n\r\n\r\n    }\r\n    get canCaptureScroll() {\r\n      if (!(this.#isLoading || this.#isListEmpty || this.#isListEnded || this.#isWaitingForStateChange || this.#disableCaptureScroll)) {\r\n        return true;\r\n\r\n      }\r\n      return false;\r\n    }\r\n\r\n    static get observedAttributes() {\r\n      return ['is-loading', 'is-list-empty', 'is-list-ended', 'disable-capture-scroll', 'state-change-waiting-behavior'];\r\n    }\r\n    attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n      // do something when an attribute has changed\r\n      this.onAttributeChange(name, newValue);\r\n    }\r\n    onAttributeChange(name: string, value: string) {\r\n      switch (name) {\r\n        case 'is-loading':\r\n          if (value === 'true') {\r\n            this.isLoading = true;\r\n          } else {\r\n            this.isLoading = false;\r\n          }\r\n          break;\r\n        case 'is-list-empty':\r\n          if (value === 'true') {\r\n            this.isListEmpty = true;\r\n          } else {\r\n            this.isListEmpty = false;\r\n\r\n          }\r\n          break;\r\n        case 'is-list-ended':\r\n          if (value === 'true') {\r\n            this.#isListEnded = true;\r\n          } else {\r\n            this.#isListEnded = false;\r\n\r\n          }\r\n          break;\r\n\r\n        case 'disable-capture-scroll':\r\n          if (value === 'true') {\r\n            this.#disableCaptureScroll = true;\r\n          } else {\r\n            this.#disableCaptureScroll = false;\r\n\r\n          }\r\n          break;\r\n        case 'state-change-waiting-behavior':\r\n          this.#stateChangeWaitingBehavior = this.mapStateChangeWaitingBehavior(value);\r\n          break;\r\n\r\n\r\n      }\r\n\r\n    }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-infinite-scroll');\r\nif (myElementNotExists) {\r\n  window.customElements.define('jb-infinite-scroll', JBInfiniteScrollWebComponent);\r\n}\r\n"],"names":["StateChangeWaitingBehavior","JBInfiniteScrollWebComponent","HTMLElement","constructor","super","_JBInfiniteScrollWebComponent_isLoading","set","this","_JBInfiniteScrollWebComponent_endPageGap","_JBInfiniteScrollWebComponent_isLastPage","_JBInfiniteScrollWebComponent_isListEnded","_JBInfiniteScrollWebComponent_isWaitingForStateChange","_JBInfiniteScrollWebComponent_disableCaptureScroll","_JBInfiniteScrollWebComponent_isListEmpty","_JBInfiniteScrollWebComponent_stateChangeWaitingBehavior","forceWait","initWebComponent","mapStateChangeWaitingBehavior","state","noWait","stateChangeWaitingBehavior","value","__classPrivateFieldSet","__classPrivateFieldGet","disableCaptureScroll","setIsWaitingForStatChange","isListEnded","isLoading","elements","loading","classList","add","remove","checkEmptyListState","checkScrollHeight","isListEmpty","isLastPage","emptyListWrapper","contentWrapper","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","querySelector","componentWrapper","loadingWrapper","registerEventListener","addEventListener","onScroll","bind","passive","scrollHeight","clientHeight","canCaptureScroll","onScrollEnd","scrollTop","isWaitingStatus","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","customElements","get","window","define"],"mappings":"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"}
+{"version":3,"file":"jb-infinite-scroll.js","sources":["../lib/types.ts","../lib/jb-infinite-scroll.ts"],"sourcesContent":["export type Elements = {\r\n    loading: HTMLDivElement,\r\n    contentWrapper: HTMLDivElement,\r\n    componentWrapper: HTMLDivElement,\r\n    emptyListWrapper: HTMLDivElement,\r\n    loadingWrapper: HTMLDivElement,\r\n}\r\n\r\nexport enum StateChangeWaitingBehavior {\r\n    // when user scroll we lock event call and wait for user to change isLoading (good for React or any other ui framework solution)\r\n    forceWait = \"FORCE_WAIT\",\r\n    // when user scroll we dont lock its event listener and developer should handle extra scroll by it self (good for pure js solution)\r\n    noWait = \"NO_WAIT\",\r\n}","import HTML from './jb-infinite-scroll.html';\r\nimport CSS from './jb-infinite-scroll.scss';\r\nimport { Elements, StateChangeWaitingBehavior } from './types.js';\r\nimport \"jb-loading\";\r\n\r\nexport * from \"./types.js\";\r\n\r\nexport class JBInfiniteScrollWebComponent extends HTMLElement {\r\n  elements!: Elements;\r\n  #isLoading = false;\r\n  //the amount of space that we listen to for trigger refresh \r\n  #endPageGap = 0;\r\n\r\n  #isListEnded = false;\r\n  //used when user scroll and we dont want to capture multiple scroll at one and wait for prev scroll event to finish\r\n  #isWaitingForStateChange = false;\r\n  #disableCaptureScroll = false;\r\n  // if user set empty state from outside (change to manual mode)\r\n  #externalIsListEmpty: boolean | null = null;\r\n  #internals: ElementInternals;\r\n  get #isListEmpty() {\r\n    if (this.#externalIsListEmpty !== null) {\r\n      return this.#externalIsListEmpty;\r\n    }\r\n  }\r\n  #stateChangeWaitingBehavior: StateChangeWaitingBehavior = StateChangeWaitingBehavior.forceWait;\r\n\r\n  constructor() {\r\n    super();\r\n    if (typeof this.attachInternals == \"function\") {\r\n      //some browser dont support attachInternals\r\n      this.#internals = this.attachInternals();\r\n    }\r\n    this.#initWebComponent();\r\n  }\r\n  #mapStateChangeWaitingBehavior(state: string) {\r\n    switch (state) {\r\n      case \"FORCE_WAIT\":\r\n        return StateChangeWaitingBehavior.forceWait;\r\n      case \"NO_WAIT\":\r\n        return StateChangeWaitingBehavior.noWait;\r\n\r\n      default:\r\n        return StateChangeWaitingBehavior.forceWait;\r\n\r\n    }\r\n\r\n  }\r\n  set stateChangeWaitingBehavior(value: string) {\r\n    this.#stateChangeWaitingBehavior = this.#mapStateChangeWaitingBehavior(value);\r\n  }\r\n  get stateChangeWaitingBehavior() {\r\n    return this.#stateChangeWaitingBehavior;\r\n  }\r\n  get disableCaptureScroll() {\r\n    return this.#disableCaptureScroll;\r\n  }\r\n\r\n  set disableCaptureScroll(value: boolean) {\r\n    this.#disableCaptureScroll = value;\r\n    this.#setIsWaitingForStatChange(false);\r\n  }\r\n  get isListEnded() {\r\n    return this.#isListEnded;\r\n  }\r\n  set isListEnded(value: boolean) {\r\n    this.#isListEnded = value;\r\n    this.#setIsWaitingForStatChange(false);\r\n\r\n  }\r\n  get isLoading() {\r\n    return this.#isLoading;\r\n  }\r\n  set isLoading(value: boolean) {\r\n    this.#isLoading = value;\r\n    this.#setIsWaitingForStatChange(false);\r\n    if (value) {\r\n      this.elements?.loading.classList.add('--show');\r\n      (this.#internals as any).states?.add(\"loading\");\r\n    } else {\r\n      this.elements?.loading.classList.remove('--show');\r\n      (this.#internals as any).states?.delete(\"loading\");\r\n      this.#checkEmptyListState();\r\n      this.#checkScrollHeight();\r\n    }\r\n  }\r\n  get isListEmpty() {\r\n    return this.#externalIsListEmpty;\r\n  }\r\n  set isListEmpty(value: boolean) {\r\n    this.#externalIsListEmpty = value;\r\n    if(value){\r\n      (this.#internals as any).states?.add(\"empty\");\r\n    }else{\r\n      (this.#internals as any).states?.delete(\"empty\");\r\n    }\r\n    this.#setIsWaitingForStatChange(false);\r\n    this.#checkEmptyListState();\r\n\r\n  }\r\n  #checkEmptyListState() {\r\n    if (this.#isListEmpty) {\r\n      this.elements?.emptyListWrapper.classList.add('--show');\r\n      this.elements?.contentWrapper.classList.remove('--show');\r\n\r\n    } else {\r\n      this.elements?.contentWrapper.classList.add('--show');\r\n      this.elements?.emptyListWrapper.classList.remove('--show');\r\n\r\n    }\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is bounded\r\n    this.callOnLoadEvent();\r\n    this.#initProp();\r\n    this.callOnInitEvent();\r\n\r\n  }\r\n  callOnLoadEvent() {\r\n    const event = new CustomEvent('load', { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  callOnInitEvent() {\r\n    const event = new CustomEvent('init', { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: 'open'\r\n    });\r\n    const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n    const element = document.createElement('template');\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      loading: shadowRoot.querySelector('.loading-wrapper')!,\r\n      componentWrapper: shadowRoot.querySelector('.Infinite-scroll-component')!,\r\n      contentWrapper: shadowRoot.querySelector('.content-wrapper')!,\r\n      loadingWrapper: shadowRoot.querySelector('.loading-wrapper')!,\r\n      emptyListWrapper: shadowRoot.querySelector('.empty-list-wrapper')!,\r\n    } as const;\r\n\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.contentWrapper.addEventListener('scroll', this.#onScroll.bind(this), { passive: true });\r\n  }\r\n  #initProp() {\r\n    this.#registerEventListener();\r\n    this.#checkScrollHeight();\r\n  }\r\n  #checkScrollHeight() {\r\n    //check if our container is bigger than our content we call scroll end event\r\n    const { scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n    if (scrollHeight <= clientHeight && this.canCaptureScroll) {\r\n      this.#onScrollEnd();\r\n    }\r\n  }\r\n  #onScrollEnd() {\r\n    this.#setIsWaitingForStatChange(true);\r\n    const event = new CustomEvent('scrollEnd');\r\n    this.dispatchEvent(event);\r\n  }\r\n  #onScroll() {\r\n    const { scrollTop, scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n    if (scrollTop + clientHeight + this.#endPageGap >= scrollHeight) {\r\n      if (this.canCaptureScroll) {\r\n        this.#onScrollEnd();\r\n      }\r\n    }\r\n  }\r\n  #setIsWaitingForStatChange(isWaitingStatus: boolean) {\r\n\r\n    if (isWaitingStatus) {\r\n      if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.forceWait) {\r\n        this.#isWaitingForStateChange = true;\r\n      } else if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.noWait) {\r\n        return;\r\n      }\r\n    }\r\n    this.#isWaitingForStateChange = false;\r\n\r\n\r\n\r\n  }\r\n  get canCaptureScroll() {\r\n    if (!(this.#isLoading || this.#isListEmpty || this.#isListEnded || this.#isWaitingForStateChange || this.#disableCaptureScroll)) {\r\n      return true;\r\n\r\n    }\r\n    return false;\r\n  }\r\n\r\n  static get observedAttributes() {\r\n    return ['is-loading', 'is-list-empty', 'is-list-ended', 'disable-capture-scroll', 'state-change-waiting-behavior'];\r\n  }\r\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n    // do something when an attribute has changed\r\n    this.#onAttributeChange(name, newValue);\r\n  }\r\n  #onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case 'is-loading':\r\n        if (value === 'true') {\r\n          this.isLoading = true;\r\n        } else {\r\n          this.isLoading = false;\r\n        }\r\n        break;\r\n      case 'is-list-empty':\r\n        if (value === 'true') {\r\n          this.isListEmpty = true;\r\n        } else {\r\n          this.isListEmpty = false;\r\n\r\n        }\r\n        break;\r\n      case 'is-list-ended':\r\n        if (value === 'true') {\r\n          this.#isListEnded = true;\r\n        } else {\r\n          this.#isListEnded = false;\r\n\r\n        }\r\n        break;\r\n\r\n      case 'disable-capture-scroll':\r\n        if (value === 'true') {\r\n          this.#disableCaptureScroll = true;\r\n        } else {\r\n          this.#disableCaptureScroll = false;\r\n\r\n        }\r\n        break;\r\n      case 'state-change-waiting-behavior':\r\n        this.#stateChangeWaitingBehavior = this.#mapStateChangeWaitingBehavior(value);\r\n        break;\r\n\r\n\r\n    }\r\n\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-infinite-scroll');\r\nif (myElementNotExists) {\r\n  window.customElements.define('jb-infinite-scroll', JBInfiniteScrollWebComponent);\r\n}\r\n"],"names":["StateChangeWaitingBehavior","JBInfiniteScrollWebComponent","HTMLElement","constructor","super","_JBInfiniteScrollWebComponent_isLoading","set","this","_JBInfiniteScrollWebComponent_endPageGap","_JBInfiniteScrollWebComponent_isListEnded","_JBInfiniteScrollWebComponent_isWaitingForStateChange","_JBInfiniteScrollWebComponent_disableCaptureScroll","_JBInfiniteScrollWebComponent_externalIsListEmpty","_JBInfiniteScrollWebComponent_internals","_JBInfiniteScrollWebComponent_stateChangeWaitingBehavior","forceWait","attachInternals","__classPrivateFieldSet","__classPrivateFieldGet","_JBInfiniteScrollWebComponent_instances","_JBInfiniteScrollWebComponent_initWebComponent","call","stateChangeWaitingBehavior","value","_JBInfiniteScrollWebComponent_mapStateChangeWaitingBehavior","disableCaptureScroll","_JBInfiniteScrollWebComponent_setIsWaitingForStatChange","isListEnded","isLoading","elements","loading","classList","add","states","remove","delete","_JBInfiniteScrollWebComponent_checkEmptyListState","_JBInfiniteScrollWebComponent_checkScrollHeight","isListEmpty","connectedCallback","callOnLoadEvent","_JBInfiniteScrollWebComponent_initProp","callOnInitEvent","event","CustomEvent","bubbles","composed","dispatchEvent","canCaptureScroll","_JBInfiniteScrollWebComponent_isListEmpty_get","observedAttributes","attributeChangedCallback","name","oldValue","newValue","state","noWait","emptyListWrapper","contentWrapper","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","querySelector","componentWrapper","loadingWrapper","_JBInfiniteScrollWebComponent_registerEventListener","addEventListener","_JBInfiniteScrollWebComponent_onScroll","bind","passive","scrollHeight","clientHeight","_JBInfiniteScrollWebComponent_onScrollEnd","scrollTop","isWaitingStatus","_JBInfiniteScrollWebComponent_onAttributeChange","customElements","get","window","define"],"mappings":"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"}

package/dist/jb-infinite-scroll.umd.js

@@ -1,2 +1,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("jb-loading")):"function"==typeof define&&define.amd?define(["exports","jb-loading"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).JBInfiniteScroll={})}(this,(function(t){"use strict";function e(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function n(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}"function"==typeof SuppressedError&&SuppressedError;var i,s,a,r,o,l,c,h,p;t.StateChangeWaitingBehavior=void 0,(i=t.StateChangeWaitingBehavior||(t.StateChangeWaitingBehavior={})).forceWait="FORCE_WAIT",i.noWait="NO_WAIT";class d extends HTMLElement{constructor(){super(),s.set(this,!1),a.set(this,0),r.set(this,!1),o.set(this,!1),l.set(this,!1),c.set(this,!1),h.set(this,!1),p.set(this,t.StateChangeWaitingBehavior.forceWait),this.initWebComponent()}mapStateChangeWaitingBehavior(e){switch(e){case"FORCE_WAIT":default:return t.StateChangeWaitingBehavior.forceWait;case"NO_WAIT":return t.StateChangeWaitingBehavior.noWait}}set stateChangeWaitingBehavior(t){n(this,p,this.mapStateChangeWaitingBehavior(t),"f")}get stateChangeWaitingBehavior(){return e(this,p,"f")}get disableCaptureScroll(){return e(this,c,"f")}set disableCaptureScroll(t){n(this,c,t,"f"),this.setIsWaitingForStatChange(!1)}get isListEnded(){return e(this,o,"f")}set isListEnded(t){n(this,o,t,"f"),this.setIsWaitingForStatChange(!1)}get isLoading(){return e(this,s,"f")}set isLoading(t){n(this,s,t,"f"),this.setIsWaitingForStatChange(!1),t?this.elements?.loading.classList.add("--show"):(this.elements?.loading.classList.remove("--show"),this.checkEmptyListState(),this.checkScrollHeight())}get isListEmpty(){return e(this,h,"f")}set isListEmpty(t){n(this,h,t,"f"),this.setIsWaitingForStatChange(!1)}get isLastPage(){return e(this,r,"f")}set isLastPage(t){n(this,r,t,"f")}checkEmptyListState(){e(this,h,"f")?(this.elements?.emptyListWrapper.classList.add("--show"),this.elements?.contentWrapper.classList.remove("--show")):(this.elements?.contentWrapper.classList.add("--show"),this.elements?.emptyListWrapper.classList.remove("--show"))}connectedCallback(){this.callOnLoadEvent(),this.initProp(),this.callOnInitEvent()}callOnLoadEvent(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)}callOnInitEvent(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)}initWebComponent(){const t=this.attachShadow({mode:"open"}),e=document.createElement("template");e.innerHTML='<style>.infinite-scroll-component {\n  height: 100%;\n  display: grid;\n  grid-template-rows: auto 1fr;\n}\n.infinite-scroll-component .content-wrapper {\n  width: 100%;\n  height: auto;\n  display: none;\n  overflow: auto;\n}\n.infinite-scroll-component .content-wrapper.--show {\n  display: inline-block;\n}\n.infinite-scroll-component .empty-list-wrapper {\n  width: 100%;\n  height: 100%;\n  display: none;\n}\n.infinite-scroll-component .empty-list-wrapper.--show {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.infinite-scroll-component .loading-wrapper {\n  display: none;\n  --jb-loading-color: var(--captcha-component-loading-color, #1565D8);\n}\n.infinite-scroll-component .loading-wrapper .default-loading {\n  width: 40px;\n  height: 40px;\n  margin: 0 auto;\n}\n.infinite-scroll-component .loading-wrapper.--show {\n  display: inline-block;\n}</style>\n<div class="infinite-scroll-component">\r\n    <div class="content-wrapper" part="content-wrapper">\r\n        <slot name="infinite-scroll-content"></slot>\r\n    </div>\r\n    <div class="empty-list-wrapper" part="empty-list-wrapper">\r\n        <slot name="empty-list-content">\r\n            <div class="default-empty-list">\r\n                <p>empty list</p>\r\n            </div>\r\n        </slot>\r\n    </div>\r\n    <div class="loading-wrapper" part="loading-wrapper">\r\n        <slot name="loading-content">\r\n            <div class="default-loading">\r\n                <jb-loading></jb-loading>\r\n            </div>\r\n        </slot>\r\n    </div>\r\n</div>',t.appendChild(e.content.cloneNode(!0)),this.elements={loading:t.querySelector(".loading-wrapper"),componentWrapper:t.querySelector(".Infinite-scroll-component"),contentWrapper:t.querySelector(".content-wrapper"),loadingWrapper:t.querySelector(".loading-wrapper"),emptyListWrapper:t.querySelector(".empty-list-wrapper")}}registerEventListener(){this.elements.contentWrapper.addEventListener("scroll",this.onScroll.bind(this),{passive:!0})}initProp(){this.registerEventListener(),this.checkScrollHeight()}checkScrollHeight(){const{scrollHeight:t,clientHeight:e}=this.elements.contentWrapper;t<=e&&this.canCaptureScroll&&this.onScrollEnd()}onScrollEnd(){this.setIsWaitingForStatChange(!0);const t=new CustomEvent("scrollEnd");this.dispatchEvent(t)}onScroll(){const{scrollTop:t,scrollHeight:n,clientHeight:i}=this.elements.contentWrapper;t+i+e(this,a,"f")>=n&&this.canCaptureScroll&&this.onScrollEnd()}setIsWaitingForStatChange(i){if(i)if(e(this,p,"f")===t.StateChangeWaitingBehavior.forceWait)n(this,l,!0,"f");else if(e(this,p,"f")===t.StateChangeWaitingBehavior.noWait)return;n(this,l,!1,"f")}get canCaptureScroll(){return!(e(this,s,"f")||e(this,h,"f")||e(this,o,"f")||e(this,l,"f")||e(this,c,"f"))}static get observedAttributes(){return["is-loading","is-list-empty","is-list-ended","disable-capture-scroll","state-change-waiting-behavior"]}attributeChangedCallback(t,e,n){this.onAttributeChange(t,n)}onAttributeChange(t,e){switch(t){case"is-loading":this.isLoading="true"===e;break;case"is-list-empty":this.isListEmpty="true"===e;break;case"is-list-ended":n(this,o,"true"===e,"f");break;case"disable-capture-scroll":n(this,c,"true"===e,"f");break;case"state-change-waiting-behavior":n(this,p,this.mapStateChangeWaitingBehavior(e),"f")}}}s=new WeakMap,a=new WeakMap,r=new WeakMap,o=new WeakMap,l=new WeakMap,c=new WeakMap,h=new WeakMap,p=new WeakMap;!customElements.get("jb-infinite-scroll")&&window.customElements.define("jb-infinite-scroll",d),t.JBInfiniteScrollWebComponent=d}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("jb-loading")):"function"==typeof define&&define.amd?define(["exports","jb-loading"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).JBInfiniteScroll={})}(this,(function(t){"use strict";function e(t,e,n,i){if("a"===n&&!i)throw new TypeError("Private accessor was defined without a getter");if("function"==typeof e?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return"m"===n?i:"a"===n?i.call(t):i?i.value:e.get(t)}function n(t,e,n,i,s){if("m"===i)throw new TypeError("Private method is not writable");if("a"===i&&!s)throw new TypeError("Private accessor was defined without a setter");if("function"==typeof e?t!==e||!s:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return"a"===i?s.call(t,n):s?s.value=n:e.set(t,n),n}"function"==typeof SuppressedError&&SuppressedError;var i,s,a,o,r,l,c,h,p,d,f,m,u,g,w,v,y,b,W,E,C;t.StateChangeWaitingBehavior=void 0,(i=t.StateChangeWaitingBehavior||(t.StateChangeWaitingBehavior={})).forceWait="FORCE_WAIT",i.noWait="NO_WAIT";class S extends HTMLElement{constructor(){super(),s.add(this),a.set(this,!1),o.set(this,0),r.set(this,!1),l.set(this,!1),c.set(this,!1),h.set(this,null),p.set(this,void 0),f.set(this,t.StateChangeWaitingBehavior.forceWait),"function"==typeof this.attachInternals&&n(this,p,this.attachInternals(),"f"),e(this,s,"m",g).call(this)}set stateChangeWaitingBehavior(t){n(this,f,e(this,s,"m",m).call(this,t),"f")}get stateChangeWaitingBehavior(){return e(this,f,"f")}get disableCaptureScroll(){return e(this,c,"f")}set disableCaptureScroll(t){n(this,c,t,"f"),e(this,s,"m",E).call(this,!1)}get isListEnded(){return e(this,r,"f")}set isListEnded(t){n(this,r,t,"f"),e(this,s,"m",E).call(this,!1)}get isLoading(){return e(this,a,"f")}set isLoading(t){n(this,a,t,"f"),e(this,s,"m",E).call(this,!1),t?(this.elements?.loading.classList.add("--show"),e(this,p,"f").states?.add("loading")):(this.elements?.loading.classList.remove("--show"),e(this,p,"f").states?.delete("loading"),e(this,s,"m",u).call(this),e(this,s,"m",y).call(this))}get isListEmpty(){return e(this,h,"f")}set isListEmpty(t){n(this,h,t,"f"),t?e(this,p,"f").states?.add("empty"):e(this,p,"f").states?.delete("empty"),e(this,s,"m",E).call(this,!1),e(this,s,"m",u).call(this)}connectedCallback(){this.callOnLoadEvent(),e(this,s,"m",v).call(this),this.callOnInitEvent()}callOnLoadEvent(){const t=new CustomEvent("load",{bubbles:!0,composed:!0});this.dispatchEvent(t)}callOnInitEvent(){const t=new CustomEvent("init",{bubbles:!0,composed:!0});this.dispatchEvent(t)}get canCaptureScroll(){return!(e(this,a,"f")||e(this,s,"a",d)||e(this,r,"f")||e(this,l,"f")||e(this,c,"f"))}static get observedAttributes(){return["is-loading","is-list-empty","is-list-ended","disable-capture-scroll","state-change-waiting-behavior"]}attributeChangedCallback(t,n,i){e(this,s,"m",C).call(this,t,i)}}a=new WeakMap,o=new WeakMap,r=new WeakMap,l=new WeakMap,c=new WeakMap,h=new WeakMap,p=new WeakMap,f=new WeakMap,s=new WeakSet,d=function(){if(null!==e(this,h,"f"))return e(this,h,"f")},m=function(e){switch(e){case"FORCE_WAIT":default:return t.StateChangeWaitingBehavior.forceWait;case"NO_WAIT":return t.StateChangeWaitingBehavior.noWait}},u=function(){e(this,s,"a",d)?(this.elements?.emptyListWrapper.classList.add("--show"),this.elements?.contentWrapper.classList.remove("--show")):(this.elements?.contentWrapper.classList.add("--show"),this.elements?.emptyListWrapper.classList.remove("--show"))},g=function(){const t=this.attachShadow({mode:"open"}),e=document.createElement("template");e.innerHTML='<style>:host {\n  width: 100%;\n  height: 100%;\n  display: block;\n}\n\n.infinite-scroll-component {\n  height: 100%;\n}\n.infinite-scroll-component .content-wrapper {\n  width: 100%;\n  height: 100%;\n  display: none;\n  overflow: auto;\n}\n.infinite-scroll-component .content-wrapper.--show {\n  display: block;\n}\n.infinite-scroll-component .content-wrapper ::slotted([slot=content]) {\n  height: auto;\n}\n.infinite-scroll-component .loading-wrapper {\n  display: none;\n}\n.infinite-scroll-component .loading-wrapper .default-loading {\n  width: 40px;\n  height: 40px;\n  margin: 0 auto;\n}\n.infinite-scroll-component .loading-wrapper.--show {\n  display: block;\n}\n.infinite-scroll-component .empty-list-wrapper {\n  width: 100%;\n  height: 100%;\n  display: none;\n}\n.infinite-scroll-component .empty-list-wrapper.--show {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.infinite-scroll-component .empty-list-wrapper ::slotted([slot=empty]) {\n  height: 100%;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  max-height: 100%;\n  overflow-y: hidden;\n  background-color: transparent;\n  padding: 1rem;\n  box-sizing: border-box;\n}</style>\n<div class="infinite-scroll-component">\r\n    <div class="content-wrapper" part="content-wrapper">\r\n        <slot name="content"></slot>\r\n        <div class="loading-wrapper" part="loading-wrapper">\r\n            <slot name="loading">\r\n                <div class="default-loading">\r\n                    <jb-loading part="default-loading"></jb-loading>\r\n                </div>\r\n            </slot>\r\n        </div>\r\n    </div>\r\n    <div class="empty-list-wrapper" part="empty-list-wrapper">\r\n        <slot name="empty">\r\n        </slot>\r\n    </div>\r\n    \r\n</div>',t.appendChild(e.content.cloneNode(!0)),this.elements={loading:t.querySelector(".loading-wrapper"),componentWrapper:t.querySelector(".Infinite-scroll-component"),contentWrapper:t.querySelector(".content-wrapper"),loadingWrapper:t.querySelector(".loading-wrapper"),emptyListWrapper:t.querySelector(".empty-list-wrapper")}},w=function(){this.elements.contentWrapper.addEventListener("scroll",e(this,s,"m",W).bind(this),{passive:!0})},v=function(){e(this,s,"m",w).call(this),e(this,s,"m",y).call(this)},y=function(){const{scrollHeight:t,clientHeight:n}=this.elements.contentWrapper;t<=n&&this.canCaptureScroll&&e(this,s,"m",b).call(this)},b=function(){e(this,s,"m",E).call(this,!0);const t=new CustomEvent("scrollEnd");this.dispatchEvent(t)},W=function(){const{scrollTop:t,scrollHeight:n,clientHeight:i}=this.elements.contentWrapper;t+i+e(this,o,"f")>=n&&this.canCaptureScroll&&e(this,s,"m",b).call(this)},E=function(i){if(i)if(e(this,f,"f")===t.StateChangeWaitingBehavior.forceWait)n(this,l,!0,"f");else if(e(this,f,"f")===t.StateChangeWaitingBehavior.noWait)return;n(this,l,!1,"f")},C=function(t,i){switch(t){case"is-loading":this.isLoading="true"===i;break;case"is-list-empty":this.isListEmpty="true"===i;break;case"is-list-ended":n(this,r,"true"===i,"f");break;case"disable-capture-scroll":n(this,c,"true"===i,"f");break;case"state-change-waiting-behavior":n(this,f,e(this,s,"m",m).call(this,i),"f")}};!customElements.get("jb-infinite-scroll")&&window.customElements.define("jb-infinite-scroll",S),t.JBInfiniteScrollWebComponent=S}));
 //# sourceMappingURL=jb-infinite-scroll.umd.js.map

package/dist/jb-infinite-scroll.umd.js.map

@@ -1 +1 @@
-{"version":3,"file":"jb-infinite-scroll.umd.js","sources":["../lib/types.ts","../lib/jb-infinite-scroll.ts"],"sourcesContent":["export type Elements = {\r\n    loading: HTMLDivElement,\r\n    contentWrapper: HTMLDivElement,\r\n    componentWrapper: HTMLDivElement,\r\n    emptyListWrapper: HTMLDivElement,\r\n    loadingWrapper: HTMLDivElement,\r\n}\r\n\r\nexport enum StateChangeWaitingBehavior {\r\n    // when user scroll we lock event call and wait for user to change isLoading (good for React or any other ui framework solution)\r\n    forceWait = \"FORCE_WAIT\",\r\n    // when user scroll we dont lock its event listener and developer should handle extra scroll by it self (good for pure js solution)\r\n    noWait = \"NO_WAIT\",\r\n}","import HTML from './jb-infinite-scroll.html';\r\nimport CSS from './jb-infinite-scroll.scss';\r\nimport { Elements, StateChangeWaitingBehavior } from './types.js';\r\nimport \"jb-loading\";\r\n\r\nexport * from \"./types.js\";\r\n\r\nexport class JBInfiniteScrollWebComponent extends HTMLElement {\r\n    elements!: Elements;\r\n    #isLoading = false;\r\n    //the amount of space that we listen to for trigger refresh \r\n    #endPageGap = 0;\r\n    #isLastPage = false;\r\n\r\n    #isListEnded = false;\r\n    //used when user scroll and we dont want to capture multiple scroll at one and wait for prev scroll event to finish\r\n    #isWaitingForStateChange = false;\r\n    #disableCaptureScroll = false;\r\n    #isListEmpty = false;\r\n    #stateChangeWaitingBehavior: StateChangeWaitingBehavior = StateChangeWaitingBehavior.forceWait;\r\n\r\n\r\n    constructor() {\r\n      super();\r\n      this.initWebComponent();\r\n    }\r\n    mapStateChangeWaitingBehavior(state: string) {\r\n      switch (state) {\r\n        case \"FORCE_WAIT\":\r\n          return StateChangeWaitingBehavior.forceWait;\r\n        case \"NO_WAIT\":\r\n          return StateChangeWaitingBehavior.noWait;\r\n\r\n        default:\r\n          return StateChangeWaitingBehavior.forceWait;\r\n\r\n      }\r\n\r\n    }\r\n    set stateChangeWaitingBehavior(value: string) {\r\n      this.#stateChangeWaitingBehavior = this.mapStateChangeWaitingBehavior(value);\r\n    }\r\n    get stateChangeWaitingBehavior() {\r\n      return this.#stateChangeWaitingBehavior;\r\n    }\r\n    get disableCaptureScroll() {\r\n      return this.#disableCaptureScroll;\r\n    }\r\n\r\n    set disableCaptureScroll(value: boolean) {\r\n      this.#disableCaptureScroll = value;\r\n      this.setIsWaitingForStatChange(false);\r\n    }\r\n    get isListEnded() {\r\n      return this.#isListEnded;\r\n    }\r\n    set isListEnded(value: boolean) {\r\n      this.#isListEnded = value;\r\n      this.setIsWaitingForStatChange(false);\r\n\r\n    }\r\n    get isLoading() {\r\n      return this.#isLoading;\r\n    }\r\n    set isLoading(value: boolean) {\r\n      this.#isLoading = value;\r\n      this.setIsWaitingForStatChange(false);\r\n      if (value) {\r\n        this.elements?.loading.classList.add('--show');\r\n      } else {\r\n        this.elements?.loading.classList.remove('--show');\r\n        this.checkEmptyListState();\r\n        this.checkScrollHeight();\r\n      }\r\n    }\r\n    get isListEmpty() {\r\n      return this.#isListEmpty;\r\n    }\r\n    set isListEmpty(value: boolean) {\r\n      this.#isListEmpty = value;\r\n      this.setIsWaitingForStatChange(false);\r\n\r\n\r\n    }\r\n    get isLastPage() {\r\n      return this.#isLastPage;\r\n    }\r\n    set isLastPage(value: boolean) {\r\n      this.#isLastPage = value;\r\n    }\r\n    checkEmptyListState() {\r\n      if (this.#isListEmpty) {\r\n        this.elements?.emptyListWrapper.classList.add('--show');\r\n        this.elements?.contentWrapper.classList.remove('--show');\r\n\r\n      } else {\r\n        this.elements?.contentWrapper.classList.add('--show');\r\n        this.elements?.emptyListWrapper.classList.remove('--show');\r\n\r\n      }\r\n    }\r\n    connectedCallback() {\r\n      // standard web component event that called when all of dom is bounded\r\n      this.callOnLoadEvent();\r\n      this.initProp();\r\n      this.callOnInitEvent();\r\n\r\n    }\r\n    callOnLoadEvent() {\r\n      const event = new CustomEvent('load', { bubbles: true, composed: true });\r\n      this.dispatchEvent(event);\r\n    }\r\n    callOnInitEvent() {\r\n      const event = new CustomEvent('init', { bubbles: true, composed: true });\r\n      this.dispatchEvent(event);\r\n    }\r\n    initWebComponent() {\r\n      const shadowRoot = this.attachShadow({\r\n        mode: 'open'\r\n      });\r\n      const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n      const element = document.createElement('template');\r\n      element.innerHTML = html;\r\n      shadowRoot.appendChild(element.content.cloneNode(true));\r\n      this.elements = {\r\n        loading: shadowRoot.querySelector('.loading-wrapper')!,\r\n        componentWrapper: shadowRoot.querySelector('.Infinite-scroll-component')!,\r\n        contentWrapper: shadowRoot.querySelector('.content-wrapper')!,\r\n        loadingWrapper: shadowRoot.querySelector('.loading-wrapper')!,\r\n        emptyListWrapper: shadowRoot.querySelector('.empty-list-wrapper')!,\r\n      };\r\n\r\n    }\r\n    registerEventListener() {\r\n      this.elements.contentWrapper.addEventListener('scroll', this.onScroll.bind(this), { passive: true });\r\n    }\r\n    initProp() {\r\n      this.registerEventListener();\r\n      this.checkScrollHeight();\r\n    }\r\n    checkScrollHeight() {\r\n      //check if our container is bigger than our content we call scroll end event\r\n      const { scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n      if (scrollHeight <= clientHeight && this.canCaptureScroll) {\r\n        this.onScrollEnd();\r\n      }\r\n    }\r\n    onScrollEnd() {        \r\n      this.setIsWaitingForStatChange(true);\r\n      const event = new CustomEvent('scrollEnd');\r\n      this.dispatchEvent(event);\r\n    }\r\n    onScroll() {\r\n      const { scrollTop, scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n      if (scrollTop + clientHeight + this.#endPageGap >= scrollHeight) {\r\n        if (this.canCaptureScroll) {\r\n          this.onScrollEnd();\r\n        }\r\n      }\r\n    }\r\n    setIsWaitingForStatChange(isWaitingStatus: boolean) {\r\n\r\n      if (isWaitingStatus) {\r\n        if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.forceWait) {\r\n          this.#isWaitingForStateChange = true;\r\n        } else if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.noWait) {\r\n          return;\r\n        }\r\n      }\r\n      this.#isWaitingForStateChange = false;\r\n\r\n\r\n\r\n    }\r\n    get canCaptureScroll() {\r\n      if (!(this.#isLoading || this.#isListEmpty || this.#isListEnded || this.#isWaitingForStateChange || this.#disableCaptureScroll)) {\r\n        return true;\r\n\r\n      }\r\n      return false;\r\n    }\r\n\r\n    static get observedAttributes() {\r\n      return ['is-loading', 'is-list-empty', 'is-list-ended', 'disable-capture-scroll', 'state-change-waiting-behavior'];\r\n    }\r\n    attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n      // do something when an attribute has changed\r\n      this.onAttributeChange(name, newValue);\r\n    }\r\n    onAttributeChange(name: string, value: string) {\r\n      switch (name) {\r\n        case 'is-loading':\r\n          if (value === 'true') {\r\n            this.isLoading = true;\r\n          } else {\r\n            this.isLoading = false;\r\n          }\r\n          break;\r\n        case 'is-list-empty':\r\n          if (value === 'true') {\r\n            this.isListEmpty = true;\r\n          } else {\r\n            this.isListEmpty = false;\r\n\r\n          }\r\n          break;\r\n        case 'is-list-ended':\r\n          if (value === 'true') {\r\n            this.#isListEnded = true;\r\n          } else {\r\n            this.#isListEnded = false;\r\n\r\n          }\r\n          break;\r\n\r\n        case 'disable-capture-scroll':\r\n          if (value === 'true') {\r\n            this.#disableCaptureScroll = true;\r\n          } else {\r\n            this.#disableCaptureScroll = false;\r\n\r\n          }\r\n          break;\r\n        case 'state-change-waiting-behavior':\r\n          this.#stateChangeWaitingBehavior = this.mapStateChangeWaitingBehavior(value);\r\n          break;\r\n\r\n\r\n      }\r\n\r\n    }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-infinite-scroll');\r\nif (myElementNotExists) {\r\n  window.customElements.define('jb-infinite-scroll', JBInfiniteScrollWebComponent);\r\n}\r\n"],"names":["StateChangeWaitingBehavior","exports","JBInfiniteScrollWebComponent","HTMLElement","constructor","super","_JBInfiniteScrollWebComponent_isLoading","set","this","_JBInfiniteScrollWebComponent_endPageGap","_JBInfiniteScrollWebComponent_isLastPage","_JBInfiniteScrollWebComponent_isListEnded","_JBInfiniteScrollWebComponent_isWaitingForStateChange","_JBInfiniteScrollWebComponent_disableCaptureScroll","_JBInfiniteScrollWebComponent_isListEmpty","_JBInfiniteScrollWebComponent_stateChangeWaitingBehavior","forceWait","initWebComponent","mapStateChangeWaitingBehavior","state","noWait","stateChangeWaitingBehavior","value","__classPrivateFieldSet","__classPrivateFieldGet","disableCaptureScroll","setIsWaitingForStatChange","isListEnded","isLoading","elements","loading","classList","add","remove","checkEmptyListState","checkScrollHeight","isListEmpty","isLastPage","emptyListWrapper","contentWrapper","connectedCallback","callOnLoadEvent","initProp","callOnInitEvent","event","CustomEvent","bubbles","composed","dispatchEvent","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","querySelector","componentWrapper","loadingWrapper","registerEventListener","addEventListener","onScroll","bind","passive","scrollHeight","clientHeight","canCaptureScroll","onScrollEnd","scrollTop","isWaitingStatus","observedAttributes","attributeChangedCallback","name","oldValue","newValue","onAttributeChange","customElements","get","window","define"],"mappings":"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"}
+{"version":3,"file":"jb-infinite-scroll.umd.js","sources":["../lib/types.ts","../lib/jb-infinite-scroll.ts"],"sourcesContent":["export type Elements = {\r\n    loading: HTMLDivElement,\r\n    contentWrapper: HTMLDivElement,\r\n    componentWrapper: HTMLDivElement,\r\n    emptyListWrapper: HTMLDivElement,\r\n    loadingWrapper: HTMLDivElement,\r\n}\r\n\r\nexport enum StateChangeWaitingBehavior {\r\n    // when user scroll we lock event call and wait for user to change isLoading (good for React or any other ui framework solution)\r\n    forceWait = \"FORCE_WAIT\",\r\n    // when user scroll we dont lock its event listener and developer should handle extra scroll by it self (good for pure js solution)\r\n    noWait = \"NO_WAIT\",\r\n}","import HTML from './jb-infinite-scroll.html';\r\nimport CSS from './jb-infinite-scroll.scss';\r\nimport { Elements, StateChangeWaitingBehavior } from './types.js';\r\nimport \"jb-loading\";\r\n\r\nexport * from \"./types.js\";\r\n\r\nexport class JBInfiniteScrollWebComponent extends HTMLElement {\r\n  elements!: Elements;\r\n  #isLoading = false;\r\n  //the amount of space that we listen to for trigger refresh \r\n  #endPageGap = 0;\r\n\r\n  #isListEnded = false;\r\n  //used when user scroll and we dont want to capture multiple scroll at one and wait for prev scroll event to finish\r\n  #isWaitingForStateChange = false;\r\n  #disableCaptureScroll = false;\r\n  // if user set empty state from outside (change to manual mode)\r\n  #externalIsListEmpty: boolean | null = null;\r\n  #internals: ElementInternals;\r\n  get #isListEmpty() {\r\n    if (this.#externalIsListEmpty !== null) {\r\n      return this.#externalIsListEmpty;\r\n    }\r\n  }\r\n  #stateChangeWaitingBehavior: StateChangeWaitingBehavior = StateChangeWaitingBehavior.forceWait;\r\n\r\n  constructor() {\r\n    super();\r\n    if (typeof this.attachInternals == \"function\") {\r\n      //some browser dont support attachInternals\r\n      this.#internals = this.attachInternals();\r\n    }\r\n    this.#initWebComponent();\r\n  }\r\n  #mapStateChangeWaitingBehavior(state: string) {\r\n    switch (state) {\r\n      case \"FORCE_WAIT\":\r\n        return StateChangeWaitingBehavior.forceWait;\r\n      case \"NO_WAIT\":\r\n        return StateChangeWaitingBehavior.noWait;\r\n\r\n      default:\r\n        return StateChangeWaitingBehavior.forceWait;\r\n\r\n    }\r\n\r\n  }\r\n  set stateChangeWaitingBehavior(value: string) {\r\n    this.#stateChangeWaitingBehavior = this.#mapStateChangeWaitingBehavior(value);\r\n  }\r\n  get stateChangeWaitingBehavior() {\r\n    return this.#stateChangeWaitingBehavior;\r\n  }\r\n  get disableCaptureScroll() {\r\n    return this.#disableCaptureScroll;\r\n  }\r\n\r\n  set disableCaptureScroll(value: boolean) {\r\n    this.#disableCaptureScroll = value;\r\n    this.#setIsWaitingForStatChange(false);\r\n  }\r\n  get isListEnded() {\r\n    return this.#isListEnded;\r\n  }\r\n  set isListEnded(value: boolean) {\r\n    this.#isListEnded = value;\r\n    this.#setIsWaitingForStatChange(false);\r\n\r\n  }\r\n  get isLoading() {\r\n    return this.#isLoading;\r\n  }\r\n  set isLoading(value: boolean) {\r\n    this.#isLoading = value;\r\n    this.#setIsWaitingForStatChange(false);\r\n    if (value) {\r\n      this.elements?.loading.classList.add('--show');\r\n      (this.#internals as any).states?.add(\"loading\");\r\n    } else {\r\n      this.elements?.loading.classList.remove('--show');\r\n      (this.#internals as any).states?.delete(\"loading\");\r\n      this.#checkEmptyListState();\r\n      this.#checkScrollHeight();\r\n    }\r\n  }\r\n  get isListEmpty() {\r\n    return this.#externalIsListEmpty;\r\n  }\r\n  set isListEmpty(value: boolean) {\r\n    this.#externalIsListEmpty = value;\r\n    if(value){\r\n      (this.#internals as any).states?.add(\"empty\");\r\n    }else{\r\n      (this.#internals as any).states?.delete(\"empty\");\r\n    }\r\n    this.#setIsWaitingForStatChange(false);\r\n    this.#checkEmptyListState();\r\n\r\n  }\r\n  #checkEmptyListState() {\r\n    if (this.#isListEmpty) {\r\n      this.elements?.emptyListWrapper.classList.add('--show');\r\n      this.elements?.contentWrapper.classList.remove('--show');\r\n\r\n    } else {\r\n      this.elements?.contentWrapper.classList.add('--show');\r\n      this.elements?.emptyListWrapper.classList.remove('--show');\r\n\r\n    }\r\n  }\r\n  connectedCallback() {\r\n    // standard web component event that called when all of dom is bounded\r\n    this.callOnLoadEvent();\r\n    this.#initProp();\r\n    this.callOnInitEvent();\r\n\r\n  }\r\n  callOnLoadEvent() {\r\n    const event = new CustomEvent('load', { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  callOnInitEvent() {\r\n    const event = new CustomEvent('init', { bubbles: true, composed: true });\r\n    this.dispatchEvent(event);\r\n  }\r\n  #initWebComponent() {\r\n    const shadowRoot = this.attachShadow({\r\n      mode: 'open'\r\n    });\r\n    const html = `<style>${CSS}</style>` + '\\n' + HTML;\r\n    const element = document.createElement('template');\r\n    element.innerHTML = html;\r\n    shadowRoot.appendChild(element.content.cloneNode(true));\r\n    this.elements = {\r\n      loading: shadowRoot.querySelector('.loading-wrapper')!,\r\n      componentWrapper: shadowRoot.querySelector('.Infinite-scroll-component')!,\r\n      contentWrapper: shadowRoot.querySelector('.content-wrapper')!,\r\n      loadingWrapper: shadowRoot.querySelector('.loading-wrapper')!,\r\n      emptyListWrapper: shadowRoot.querySelector('.empty-list-wrapper')!,\r\n    } as const;\r\n\r\n  }\r\n  #registerEventListener() {\r\n    this.elements.contentWrapper.addEventListener('scroll', this.#onScroll.bind(this), { passive: true });\r\n  }\r\n  #initProp() {\r\n    this.#registerEventListener();\r\n    this.#checkScrollHeight();\r\n  }\r\n  #checkScrollHeight() {\r\n    //check if our container is bigger than our content we call scroll end event\r\n    const { scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n    if (scrollHeight <= clientHeight && this.canCaptureScroll) {\r\n      this.#onScrollEnd();\r\n    }\r\n  }\r\n  #onScrollEnd() {\r\n    this.#setIsWaitingForStatChange(true);\r\n    const event = new CustomEvent('scrollEnd');\r\n    this.dispatchEvent(event);\r\n  }\r\n  #onScroll() {\r\n    const { scrollTop, scrollHeight, clientHeight } = this.elements.contentWrapper;\r\n    if (scrollTop + clientHeight + this.#endPageGap >= scrollHeight) {\r\n      if (this.canCaptureScroll) {\r\n        this.#onScrollEnd();\r\n      }\r\n    }\r\n  }\r\n  #setIsWaitingForStatChange(isWaitingStatus: boolean) {\r\n\r\n    if (isWaitingStatus) {\r\n      if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.forceWait) {\r\n        this.#isWaitingForStateChange = true;\r\n      } else if (this.#stateChangeWaitingBehavior === StateChangeWaitingBehavior.noWait) {\r\n        return;\r\n      }\r\n    }\r\n    this.#isWaitingForStateChange = false;\r\n\r\n\r\n\r\n  }\r\n  get canCaptureScroll() {\r\n    if (!(this.#isLoading || this.#isListEmpty || this.#isListEnded || this.#isWaitingForStateChange || this.#disableCaptureScroll)) {\r\n      return true;\r\n\r\n    }\r\n    return false;\r\n  }\r\n\r\n  static get observedAttributes() {\r\n    return ['is-loading', 'is-list-empty', 'is-list-ended', 'disable-capture-scroll', 'state-change-waiting-behavior'];\r\n  }\r\n  attributeChangedCallback(name: string, oldValue: string, newValue: string) {\r\n    // do something when an attribute has changed\r\n    this.#onAttributeChange(name, newValue);\r\n  }\r\n  #onAttributeChange(name: string, value: string) {\r\n    switch (name) {\r\n      case 'is-loading':\r\n        if (value === 'true') {\r\n          this.isLoading = true;\r\n        } else {\r\n          this.isLoading = false;\r\n        }\r\n        break;\r\n      case 'is-list-empty':\r\n        if (value === 'true') {\r\n          this.isListEmpty = true;\r\n        } else {\r\n          this.isListEmpty = false;\r\n\r\n        }\r\n        break;\r\n      case 'is-list-ended':\r\n        if (value === 'true') {\r\n          this.#isListEnded = true;\r\n        } else {\r\n          this.#isListEnded = false;\r\n\r\n        }\r\n        break;\r\n\r\n      case 'disable-capture-scroll':\r\n        if (value === 'true') {\r\n          this.#disableCaptureScroll = true;\r\n        } else {\r\n          this.#disableCaptureScroll = false;\r\n\r\n        }\r\n        break;\r\n      case 'state-change-waiting-behavior':\r\n        this.#stateChangeWaitingBehavior = this.#mapStateChangeWaitingBehavior(value);\r\n        break;\r\n\r\n\r\n    }\r\n\r\n  }\r\n}\r\nconst myElementNotExists = !customElements.get('jb-infinite-scroll');\r\nif (myElementNotExists) {\r\n  window.customElements.define('jb-infinite-scroll', JBInfiniteScrollWebComponent);\r\n}\r\n"],"names":["StateChangeWaitingBehavior","exports","JBInfiniteScrollWebComponent","HTMLElement","constructor","super","_JBInfiniteScrollWebComponent_isLoading","set","this","_JBInfiniteScrollWebComponent_endPageGap","_JBInfiniteScrollWebComponent_isListEnded","_JBInfiniteScrollWebComponent_isWaitingForStateChange","_JBInfiniteScrollWebComponent_disableCaptureScroll","_JBInfiniteScrollWebComponent_externalIsListEmpty","_JBInfiniteScrollWebComponent_internals","_JBInfiniteScrollWebComponent_stateChangeWaitingBehavior","forceWait","attachInternals","__classPrivateFieldSet","__classPrivateFieldGet","_JBInfiniteScrollWebComponent_instances","_JBInfiniteScrollWebComponent_initWebComponent","call","stateChangeWaitingBehavior","value","_JBInfiniteScrollWebComponent_mapStateChangeWaitingBehavior","disableCaptureScroll","_JBInfiniteScrollWebComponent_setIsWaitingForStatChange","isListEnded","isLoading","elements","loading","classList","add","states","remove","delete","_JBInfiniteScrollWebComponent_checkEmptyListState","_JBInfiniteScrollWebComponent_checkScrollHeight","isListEmpty","connectedCallback","callOnLoadEvent","_JBInfiniteScrollWebComponent_initProp","callOnInitEvent","event","CustomEvent","bubbles","composed","dispatchEvent","canCaptureScroll","_JBInfiniteScrollWebComponent_isListEmpty_get","observedAttributes","attributeChangedCallback","name","oldValue","newValue","state","noWait","emptyListWrapper","contentWrapper","shadowRoot","attachShadow","mode","element","document","createElement","innerHTML","appendChild","content","cloneNode","querySelector","componentWrapper","loadingWrapper","_JBInfiniteScrollWebComponent_registerEventListener","addEventListener","_JBInfiniteScrollWebComponent_onScroll","bind","passive","scrollHeight","clientHeight","_JBInfiniteScrollWebComponent_onScrollEnd","scrollTop","isWaitingStatus","_JBInfiniteScrollWebComponent_onAttributeChange","customElements","get","window","define"],"mappings":"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"}

package/dist/web-component/jb-infinite-scroll/lib/jb-infinite-scroll.d.ts

@@ -1,11 +1,10 @@
-import { Elements, StateChangeWaitingBehavior } from './types.js';
+import { Elements } from './types.js';
 import "jb-loading";
 export * from "./types.js";
 export declare class JBInfiniteScrollWebComponent extends HTMLElement {
     #private;
     elements: Elements;
     constructor();
-    mapStateChangeWaitingBehavior(state: string): StateChangeWaitingBehavior;
     set stateChangeWaitingBehavior(value: string);
     get stateChangeWaitingBehavior(): string;
     get disableCaptureScroll(): boolean;
@@ -16,21 +15,10 @@ export declare class JBInfiniteScrollWebComponent extends HTMLElement {
     set isLoading(value: boolean);
     get isListEmpty(): boolean;
     set isListEmpty(value: boolean);
-    get isLastPage(): boolean;
-    set isLastPage(value: boolean);
-    checkEmptyListState(): void;
     connectedCallback(): void;
     callOnLoadEvent(): void;
     callOnInitEvent(): void;
-    initWebComponent(): void;
-    registerEventListener(): void;
-    initProp(): void;
-    checkScrollHeight(): void;
-    onScrollEnd(): void;
-    onScroll(): void;
-    setIsWaitingForStatChange(isWaitingStatus: boolean): void;
     get canCaptureScroll(): boolean;
     static get observedAttributes(): string[];
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
-    onAttributeChange(name: string, value: string): void;
 }

package/lib/jb-infinite-scroll.html

@@ -1,19 +1,17 @@
 <div class="infinite-scroll-component">
     <div class="content-wrapper" part="content-wrapper">
-        <slot name="infinite-scroll-content"></slot>
+        <slot name="content"></slot>
+        <div class="loading-wrapper" part="loading-wrapper">
+            <slot name="loading">
+                <div class="default-loading">
+                    <jb-loading part="default-loading"></jb-loading>
+                </div>
+            </slot>
+        </div>
     </div>
     <div class="empty-list-wrapper" part="empty-list-wrapper">
-        <slot name="empty-list-content">
-            <div class="default-empty-list">
-                <p>empty list</p>
-            </div>
-        </slot>
-    </div>
-    <div class="loading-wrapper" part="loading-wrapper">
-        <slot name="loading-content">
-            <div class="default-loading">
-                <jb-loading></jb-loading>
-            </div>
+        <slot name="empty">
         </slot>
     </div>
+    
 </div>