jb-infinite-scroll 1.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 javad
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,135 @@
+# jb-infinite-scroll
+
+[![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/jb-infinite-scroll)
+[![GitHub license](https://img.shields.io/badge/license-MIT-brightgreen.svg)](https://raw.githubusercontent.com/javadbat/jb-infinite-scroll/main/LICENSE)
+[![NPM Downloads](https://img.shields.io/npm/dw/jb-infinite-scroll)](https://www.npmjs.com/package/jb-infinite-scroll)
+
+Infinite scroll web-component with  additional features including:
+
+- custom list ui
+- empty list state and custom empty list ui
+- end of the list state
+- enable/disable scroll capture
+- support loading state with customizable ui
+
+## installation
+```js
+ import "jb-infinite-scroll" from jb-infinite-scroll;
+```
+## usage
+```html
+
+  <jb-infinite-scroll></jb-infinite-scroll>
+
+```
+
+## instruction
+
+### show content
+
+you can show your content by placing any element with slot attribute `slot="infinite-scroll-content"` like the example below:
+
+```html
+    <jb-infinite-scroll>
+        <div slot="infinite-scroll-content">
+            <div>item 1</div>
+            <div>item 2</div>
+            <div>item 3</div>
+        </div>
+    </jb-infinite-scroll>
+
+```
+
+### set loading
+
+you can show loading by setting `is-loading ="true"` attribute or `isLoading` property.
+
+```js
+    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:
+
+```html
+    <jb-infinite-scroll is-loading="true">
+        <div slot="loading-content">
+            <p>your loading</p>
+        </div>
+    </jb-infinite-scroll>
+
+```
+
+### set list empty
+
+if there is no data to show you can set `is-list-empty = "true"`.
+
+```js
+    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:
+```html
+    <jb-infinite-scroll is-list-empty="true">
+        <div slot="empty-list-content">
+            <p>list is empty</p>
+        </div>
+    </jb-infinite-scroll>
+
+```
+### 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
+    const jbInfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
+    jbInfiniteScroll.isListEnded = true;
+``` 
+```html
+    <jb-infinite-scroll is-list-ended="true">
+    </jb-infinite-scroll>
+
+```
+
+### disable scroll capture
+in some cases if you want to disable capture scroll you can set `disable-capture-scroll = "true"`'
+
+```js
+    const InfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
+    InfiniteScroll.disableCaptureScroll = true;
+``` 
+
+
+### add scroll callback
+you can add your onscroll callback function to `scrollEnd` event listener.
+
+if `is-loading` ,`is-list-empty` ,`is-list-ended` or `disable-capture-scroll` is true  the callback function won't be executed.
+
+```js
+    const InfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
+    jbInfiniteScroll.addEventListener('scrollEnd',() => {
+        //load your content here
+        console.log('scroll');
+    })
+```
+
+### 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.
+
+
+### usage overview
+```html
+    <jb-infinite-scroll is-list-empty="true" is-loading="true">
+        <div slot="infinite-scroll-content">
+            <div>item 1</div>
+            <div>item 2</div>
+            <div>item 3</div>
+        </div>
+        <div slot="empty-list-content">
+            <p>list is empty</p>
+        </div>
+        <div slot="loading-content">
+            <p>loading</p>
+        </div>
+    </jb-infinite-scroll>
+```

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

@@ -0,0 +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;
+//# sourceMappingURL=jb-infinite-scroll.cjs.js.map

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

@@ -0,0 +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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"}

package/dist/jb-infinite-scroll.js

@@ -0,0 +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};
+//# sourceMappingURL=jb-infinite-scroll.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +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}));
+//# sourceMappingURL=jb-infinite-scroll.umd.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,11 @@
+export type Elements = {
+    loading: HTMLDivElement;
+    contentWrapper: HTMLDivElement;
+    componentWrapper: HTMLDivElement;
+    emptyListWrapper: HTMLDivElement;
+    loadingWrapper: HTMLDivElement;
+};
+export declare enum StateChangeWaitingBehavior {
+    forceWait = "FORCE_WAIT",
+    noWait = "NO_WAIT"
+}

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

@@ -0,0 +1,36 @@
+import { Elements, StateChangeWaitingBehavior } 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;
+    set disableCaptureScroll(value: boolean);
+    get isListEnded(): boolean;
+    set isListEnded(value: boolean);
+    get isLoading(): boolean;
+    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/index.js

@@ -0,0 +1 @@
+export * from './dist/jb-infinite-scroll.js';

package/lib/jb-infinite-scroll.html

@@ -0,0 +1,19 @@
+<div class="infinite-scroll-component">
+    <div class="content-wrapper" part="content-wrapper">
+        <slot name="infinite-scroll-content"></slot>
+    </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>
+    </div>
+</div>

package/lib/jb-infinite-scroll.scss

@@ -0,0 +1,44 @@
+.infinite-scroll-component {
+    height: 100%;
+    display: grid;
+    grid-template-rows: auto 1fr;
+
+    .content-wrapper {
+        width: 100%;
+        height: auto;
+        display: none;
+        overflow: auto;
+
+        &.--show {
+            display: inline-block;
+        }
+
+    }
+
+    .empty-list-wrapper {
+        width: 100%;
+        height: 100%;
+        display: none;
+
+        &.--show {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        }
+    }
+
+    .loading-wrapper {
+        display: none;
+        --jb-loading-color: var(--captcha-component-loading-color, #1565D8);
+
+        .default-loading {
+            width: 40px;
+            height: 40px;
+            margin: 0 auto;
+        }
+
+        &.--show {
+            display: inline-block;
+        }
+    }
+}