chore: add license info (#402 )

closes #401
remove: v10
2022-05-06 09:39:23 -04:00 · 2022-03-29 13:59:15 -04:00 · 2022-03-28 12:00:51 -04:00 · 2022-03-28 11:59:57 -04:00 · 2020-12-09 15:36:29 -05:00 · 2020-12-09 09:58:21 -05:00
91 changed files with 2590 additions and 1573 deletions
--- a/.DS_Store
+++ b/.DS_Store
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -1,32 +0,0 @@
-<!-- Love ngx-infinite-scroll? Please consider supporting our collective:
-👉  https://opencollective.com/ngx-infinite-scroll/donate -->
-Your issue may already be reported!
-Please search on the [issue track](../) before creating one.
-
-## Expected Behavior
-<!--- If you're describing a bug, tell us what should happen -->
-<!--- If you're suggesting a change/improvement, tell us how it should work -->
-
-
-## Actual Behavior
-<!--- If describing a bug, tell us what happens instead of the expected behavior -->
-<!--- If suggesting a change/improvement, explain the difference from current behavior -->
-
-## Possible Solution
-<!--- Not obligatory, but suggest a fix/reason for the bug, -->
-<!--- or ideas how to implement the addition or change -->
-
-### Steps To Reproduce / Demo (if applicable)
-[ ] Please share a [stackblitz](https://stackblitz.com/) or [plunkr](https://plnkr.co/) demo reproducing this issue  
-
-
-### Context
-<!--- How has this issue affected you? What are you trying to accomplish? -->
-<!--- Providing context helps us come up with a solution that is most useful in the real world -->
-
-### Your Environment
-<!--- Include as many relevant details about the environment you experienced the bug in -->
-[ ] Version used: 
-[ ] Browser Name and version:
-[ ] (Optional) Operating System and version (desktop or mobile):
-[ ] (Optional) Link to your project: 
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -1,30 +0,0 @@
-A similar PR may already be submitted!
-Please search among the [Pull request](../) before creating one.
-
-Thanks for submitting a pull request! Please provide enough information so that others can review your pull request. 
-
-**Summary**
-
-<!-- Summary of the PR -->
-
-This PR fixes/implements the following **bugs/features**
-
-* [ ] #issue1
-* [ ] #issue2
-* [ ] #Feature1
-* [ ] #Feature2
-* [ ] Breaking changes
-
-<!-- You can skip this if you're fixing a typo or adding an app to the Showcase. -->
-
-Explain the **motivation** for making this change. What existing problem does the pull request solve?
-
-<!-- Example: When "Adding a function to do X", explain why it is necessary to have a way to do X. -->
-
-### Requirements
-Make sure these boxes are checked:  
- [ ] link to an issue
- [ ] tests are updated (added/changed/removed)  
- [ ] tests run successfully (local) 
- [ ] tests run successfully (TravisCI) 
- [ ] please follow this [styleguide](https://gist.github.com/stephenparish/9941e89d80e2bc58a153#subject-line) for this pr title 
--- a/.gitignore
+++ b/.gitignore
@ -1,64 +1,43 @@
-#################
-## Misc
-#################
-**/.DS_Store
-nbproject
-manifest.mf
-build.xml
-node_modules/*
-npm-debug.log
-coverage
-./*.js
-src/*.js
-angular2-infinite-scroll.js
-!karma.conf.js
-!karma-test-shim.js
-*.map
-*.d.ts
-!make.js
-!bundles/*.js
+# See http://help.github.com/ignore-files/ for more about ignoring files.

-#################
-## JetBrains
-#################
-.idea
-.project
-.settings
-.idea/*
-*.iml
-
-############
-## Windows
-############
-
-# Windows image file caches
-Thumbs.db
-
-# Folder config file
-Desktop.ini
-
-############
-## Mac
-############
-
-# Mac crap
-.DS_Store
-
-.tmp
-typings
-.tags*
-
-src/ngFactory
-*.metadata.json
-
-$ cat .gitignore
-/node_modules
+# Compiled output
 /dist
-/documentation
+/tmp
+/out-tsc
+/bazel-out

-*.log
-*.tgz
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+*node_modules*

-npm-debug.*
-examples/ 
-package-lock.json
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db
--- a/.npmignore
+++ b/.npmignore
@ -1,14 +0,0 @@
-# Node generated files
-node_modules
-npm-debug.log
-
-# OS generated files
-Thumbs.db
-.DS_Store
-
-# Ignored files
-*.ts
-!*.d.ts
-
-# ngc generated files
-src/ngFactory
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1 @@
+package-lock=false
--- a/.travis.yml
+++ b/.travis.yml
@ -1,23 +0,0 @@
-sudo: required
-dist: trusty
-addons:
-  apt:
-    sources:
-      - google-chrome
-    packages:
-      - google-chrome-stable
-language: node_js
-node_js:
-  - stable
-before_install:
-  - npm i npm@^4 -g
-install:
-  - npm install
-script:
-  - npm test
-before_script:
-  - export DISPLAY=:99.0
-  - sh -e /etc/init.d/xvfb start
-  - sleep 3
-notifications:
-  email: false
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,4 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=827846
+  "recommendations": ["angular.ng-template"]
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,20 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "ng serve",
+      "type": "pwa-chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: start",
+      "url": "http://localhost:4200/"
+    },
+    {
+      "name": "ng test",
+      "type": "chrome",
+      "request": "launch",
+      "preLaunchTask": "npm: test",
+      "url": "http://localhost:9876/debug.html"
+    }
+  ]
+}
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@ -0,0 +1,42 @@
+{
+  // For more information, visit: https://go.microsoft.com/fwlink/?LinkId=733558
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "type": "npm",
+      "script": "start",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    },
+    {
+      "type": "npm",
+      "script": "test",
+      "isBackground": true,
+      "problemMatcher": {
+        "owner": "typescript",
+        "pattern": "$tsc",
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": {
+            "regexp": "(.*?)"
+          },
+          "endsPattern": {
+            "regexp": "bundle generation complete"
+          }
+        }
+      }
+    }
+  ]
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,82 +0,0 @@
-## v 0.8.3 (2018/02/21)
-* [FIX] - fix for #198 - takes a long time for onscroll to fire 
-* [UPDATE] - default value for throttle changed to 150  
-
-## v 0.8.2 (2018/01/07)
-* [FIX] - fix for #221 - action not fired on Windows scrolling
-* [FIX] - fix for #228 - scrolling back up to the top of the list and then scroll down doesn't trigger event 
-* [REFACTOR] - shorten var names 
-
-## v 0.8.1 (2018/01/07)
-* [REFACTOR] - performance optimization for scroll events 
-
-## v 0.8.0 (2018/01/02)
-* [FIX] - now triggers only once when in or after target (#200) 
-* [REFACTOR] - "distance" number has been refined to be the percentage point of the scroll nob. 
-* [REFACTOR] - added more unit tests. 
-
-## v 0.7.2 (2017/12/07)
-* [FIX] - fix for ie11 - fix #157
-
-## v 0.7.1 (2017/11/27)
-* [FIX] - use html container if passed in #217 - fix #216
-
-## v 0.7.0 (2017/11/27)
-* [ADD] - watch changes for: infiniteScrollDisabled - fix #196
-* [ADD] - watch changes for: infiniteScrollDistance - fix #202
-* [FIX] - fix for IE11 - fix #203 
-* [REFACTOR] - "disable" now removes the scroll listener instead of rxjs/filter
-
-## v 0.6.1 (2017/10/20)
-* [REFACTOR] - updated code to be functional based
-* [FIX] - fix #67, fix #191, fix #190
-
-## v 0.5.2 (2017/09/27)
-* [FIX] -  fix #157, fix #162, fix #171, fix #188
-* [DOCS] - added example for development
-
-## v 0.5.1 (2017/04/25)
-* [FIX] - fixes #156 - running scroll logics outside of angular's zone
-
-## v 0.5.0 (2017/04/24)
-* [MAINTAINANCE] - code refactor - removing factories to rely more pure functional methods in PositionResolver, AxisResolver
-
-## v 0.4.2 (2017/04/19)
-* [NEW] - added **'[infiniteScroll]'** by [Angular's styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html#!#02-06). **[infinite-scroll]** will be deprecated in future version.
-* reduced bundle size with imports for RxJS Observable and Subscription objects #126. 
-* removed old code directory from repo
-
-## v 0.4.1 (2017/04/13)
-* Fixes #147 - (__InfiniteScrollModule is not an NgModule__)
-
-## v 0.4.0 (2017/04/12)
-* Added Angular 4 support
-* New starter code base ([based on angular-library-starter](https://github.com/robisim74/angular-library-starter))
-
-## v 0.3.3 (2017/03/01) 
-
-### Updates
-* reverted the fix of #126
-
-## v 0.3.2 (2017/03/01) 
-
-### Updates
-* fixes [#126](https://github.com/orizens/angular2-infinite-scroll/issues/126)
-
-## v 0.3.1 (2017/02/15) 
-
-### Updates
-* added custom scrollable container from [#108](https://github.com/orizens/angular2-infinite-scroll/pull/108/files)
-
-## v 0.3.0 (2017/01/31) 
-
-### Updates
-* refactored infinite scroller to smaller modules with composition
-* added "models" - includes interfaces for development
-
-## v 0.2.9 (2017/01/13)
-
-### Updates
-* added changelog.md
-* ([refactor(scroll): replaces throttle with debounce](https://github.com/orizens/angular2-infinite-scroll/pull/82))
-
--- a/Instructions.md
+++ b/Instructions.md
@ -1,161 +1,27 @@
-# angular-library-starter
-[![Build Status](https://travis-ci.org/robisim74/angular-library-starter.svg?branch=master)](https://travis-ci.org/robisim74/angular-library-starter)
->Build an Angular library compatible with AoT compilation &amp; Tree shaking.
+# Development

-This starter allows you to create a library for **Angular 2+** apps written in _TypeScript_, _ES6_ or _ES5_. 
-The project is based on the official _Angular_ packages.
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.3.

-Get the [Changelog](https://github.com/robisim74/angular-library-starter/blob/master/CHANGELOG.md).
+## Development server

-## Contents
-* [1 Project structure](#1)
-* [2 Customizing](#2)
-* [3 Unit testing](#3)
-* [4 Building](#4)
-* [5 Publishing](#5)
-* [6 Documentation](#6)
-* [7 Using the library](#7)
-* [8 What it is important to know](#8)
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files.

-## <a name="1"></a>1 Project structure
- Library:
-    - **src** folder for the classes
-    - **public_api.ts** entry point for all public APIs of the package
-    - **package.json** _npm_ options
-    - **rollup.config.js** _Rollup_ configuration for building the bundles
-    - **tsconfig-build.json** _ngc_ compiler options for _AoT compilation_
-    - **build.js** building process using _ShellJS_
- Unit testing:
-    - **tests** folder for unit tests
-    - **karma.conf.js** _Karma_ configuration that uses _webpack_ to build the tests
-    - **spec.bundle.js** defines the files used by _webpack_
-    - **tsconfig.json** _TypeScript_ compiler options
- Extra:
-    - **tslint.json** _TypeScript_ linter rules with _Codelyzer_
-    - **travis.yml** _Travis CI_ configuration
+## Code scaffolding

-## <a name="2"></a>2 Customizing
-1. Update [Node & npm](https://docs.npmjs.com/getting-started/installing-node).
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.

-2. Rename `angular-library-starter` and `angularLibraryStarter` everywhere to `my-library` and `myLibrary`.
+## Build

-3. Update in `package.json` file:
-    - version: [Semantic Versioning](http://semver.org/)
-    - description
-    - urls
-    - packages
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.

-    and run `npm install`.
+## Running unit tests

-4. Create your classes in `src` folder, and export public classes in `my-library.ts`.
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).

-5. You can create only one _module_ for the whole library: 
-I suggest you create different _modules_ for different functions, 
-so that the user can import only those he needs and optimize _Tree shaking_ of his app.
+## Running end-to-end tests

-6. Update in `rollup.config.js` file `external` & `globals` libraries with those that actually you use.
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.

-7. Create unit tests in `tests` folder. 
-_Karma_ is configured to use _webpack_ only for `*.ts` files: if you need to test different formats, you have to update it.
+## Further help

-## <a name="3"></a>3 Unit testing
-```Shell
-npm test 
-```
-
-## <a name="4"></a>4 Building
-The following command:
-```Shell
-npm run build
-```
- starts _TSLint_ with _Codelyzer_
- starts _AoT compilation_ using _ngc_ compiler
- creates `dist` folder with all the files of distribution
-
-To test locally the npm package:
-```Shell
-npm run pack-lib
-```
-Then you can install it in an app to test it:
-```Shell
-npm install [path]my-library-[version].tgz
-```
-
-## <a name="5"></a>5 Publishing
-Before publishing the first time:
- you can register your library on [Travis CI](https://travis-ci.org/): you have already configured `.travis.yml` file
- you must have a user on the _npm_ registry: [Publishing npm packages](https://docs.npmjs.com/getting-started/publishing-npm-packages)
-
-```Shell
-npm run publish-lib
-```
-
-## <a name="6"></a>6 Documentation
-To generate the documentation, this starter uses [compodoc](https://github.com/compodoc/compodoc):
-```Shell
-npm run compodoc
-npm run compodoc-serve 
-```
-
-## <a name="7"></a>7 Using the library
-### Installing
-```Shell
-npm install my-library --save 
-```
-### Loading
-#### Using SystemJS configuration
-```JavaScript
-System.config({
-    map: {
-        'my-library': 'node_modules/my-library/bundles/my-library.umd.js'
-    }
-});
-```
-#### Angular-CLI
-No need to set up anything, just import it in your code.
-#### Rollup or webpack
-No need to set up anything, just import it in your code.
-#### Plain JavaScript
-Include the `umd` bundle in your `index.html`:
-```Html
-<script src="node_modules/my-library/bundles/my-library.umd.js"></script>
-```
-and use global `ng.myLibrary` namespace.
-
-### AoT compilation
-The library is compatible with _AoT compilation_.
-
-## <a name="8"></a>8 What it is important to know
-1. `package.json`
-
-    * `"main": "./bundles/angular-library-starter.umd.js"` legacy module format 
-    * `"module": "./bundles/angular-library-starter.es5.js"` flat _ES_ module, for using module bundlers such as _Rollup_ or _webpack_: 
-    [package module](https://github.com/rollup/rollup/wiki/pkg.module)
-    * `"es2015": "./bundles/angular-library-starter.js"` _ES2015_ flat _ESM_ format, experimental _ES2015_ build
-    * `"peerDependencies"` the packages and their versions required by the library when it will be installed
-
-2. `tsconfig-build.json` file used by _ngc_ compiler
-
-    * Compiler options:
-        * `"declaration": true` to emit _TypeScript_ declaration files
-        * `"module": "es2015"` & `"target": "es2015"` are used by _Rollup_ to create the _ES2015_ bundle
-
-    * Angular Compiler Options:
-        * `"skipTemplateCodegen": true,` skips generating _AoT_ files
-        * `"annotateForClosureCompiler": true` for compatibility with _Google Closure compiler_
-        * `"strictMetadataEmit": true` without emitting metadata files, the library will not compatible with _AoT compilation_
-
-3. `rollup.config.js` file used by _Rollup_
-
-    * `format: 'umd'` the _Universal Module Definition_ pattern is used by _Angular_ for its bundles
-    * `moduleName: 'ng.angularLibraryStarter'` defines the global namespace used by _JavaScript_ apps
-    * `external` & `globals` declare the external packages
-
-4. Server-side prerendering
-
-    If you want the library will be compatible with server-side prerendering:
-    * `window`, `document`, `navigator` and other browser types do not exist on the server
-    * don't manipulate the _nativeElement_ directly
-
-## License
-MIT
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
--- a/2
+++ b/2
@ -1,6 +1,6 @@
 MIT License

-Copyright (c) 2017 Roberto Simonetti
+Copyright (c) 2022 Oren Farhi

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
--- a/README.md
+++ b/README.md
@ -1,52 +1,103 @@
-[![Build Status](https://travis-ci.org/orizens/ngx-infinite-scroll.svg?branch=master)](https://travis-ci.org/orizens/ngx-infinite-scroll) [![Backers on Open Collective](https://opencollective.com/ngx-infinite-scroll/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/ngx-infinite-scroll/sponsors/badge.svg)](#sponsors) 
+[![Build Status](https://travis-ci.org/orizens/ngx-infinite-scroll.svg?branch=master)](https://travis-ci.org/orizens/ngx-infinite-scroll) [![Backers on Open Collective](https://opencollective.com/ngx-infinite-scroll/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/ngx-infinite-scroll/sponsors/badge.svg)](#sponsors)
+[![npm version](https://badge.fury.io/js/ngx-infinite-scroll.svg)](https://badge.fury.io/js/ngx-infinite-scroll)
+[![npm version](https://badge.fury.io/js/ngx-infinite-scroll.svg)](https://badge.fury.io/js/ngx-infinite-scroll)
+[![npm downloads a month](https://img.shields.io/npm/dm/ngx-infinite-scroll.svg)](https://img.shields.io/npm/dm/ngx-infinite-scroll.svg)
+[![npm downloads a week](https://img.shields.io/npm/dt/ngx-infinite-scroll.svg)](https://img.shields.io/npm/dt/ngx-infinite-scroll.svg)
+
+## [Consider Becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor)

 # Angular Infinite Scroll
-Inspired by [ng-infinite-scroll](https://github.com/sroze/ngInfiniteScroll) directive for angular.

-## Angular Support
-**Supports Angular > 4**  
-For Angular version **<= 2.3.1**, you can use ```npm i angular2-infinite-scroll``` (latest version is 0.3.42) - please notice **the angular2-infinite-scroll** package is deprecated
+versions now follow Angular's version to easily reflect compatibility.  
+Meaning, for **Angular 10**, use `ngx-infinite-scroll @ ^10.0.0`

-## Angular Consulting Services
-I'm a Senior Javascript Engineer & A Front End Consultant at [Orizens](http://orizens.com).
-My services include:  
- consulting to companies and startups on how to approach code in their projects and keep it maintainable.  
- I provide project bootstrapping and development - while afterwards, I integrate it on site and guide the team on it.  
+## Angular - Older Versions Support

-[Contact Me Here](http://orizens.com/contact)
+Starting **Angular 6 and Above** - `ngx-infinite-scroll@THE_VERSION.0.0`  
+For **Angular 4** and **Angular = ^5.5.6** - use version `ngx-infinite-scroll@0.8.4`  
+For **Angular 5.x** with **rxjs =<5.5.2** - use version `ngx-infinite-scroll@0.8.3`  
+For Angular version **<= 2.3.1**, you can use `npm i angular2-infinite-scroll` (latest version is 0.3.42) - please notice **the angular2-infinite-scroll** package is deprecated
+
+## Used By
+
+- [Google](https://google.com)
+- [Apple](https://apple.com)
+- [Amazon](https://amazon.com)
+- [Microsoft](https://microsoft.com)
+- [Disney](https://disney.com)
+- [Sap](https://sap.com/)
+- [Cisco](https://cisco.com/)
+- [Yandex](https://yandex.com)
+- [Ancestry](https://www.ancestry.com/)
+
+and much more.
+
+> _These analytics are made available via the awesome [Scarf](https://www.npmjs.com/package/@scarf/scarf) package analytics library_
+
+### Opt-Out Of Scarf
+
+Scarf can be disabled by following [these directions](https://github.com/orizens/ngx-infinite-scroll/issues/352#issuecomment-742009046)
+
+## Front End Consulting Services
+
+I'm a Senior Front End Engineer & Consultant at [Orizens](https://orizens.com).
+My services include:
+
+- Angular/React/Javascript Consulting
+- Front End Architecture Consulting
+- Project Code Review
+- Project Development
+
+[Contact Here](http://orizens.com/contact)
+
+<a href="https://orizens.com" target="_blank">
+  <img src="https://cloud.githubusercontent.com/assets/878660/23353771/d0adbd12-fcd6-11e6-96be-7a236f8819d9.png" alt="Webpack and Angular" width="20%"/>
+</a>

 ## Installation
+
 ```
 npm install ngx-infinite-scroll --save
 ```

 ## Supported API
-Currently supported attributes:
-* **infiniteScrollDistance**<_number_> - (optional, default: **2**) - the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 * 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled).  
-if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. 
-* **infiniteScrollUpDistance**<_number_> - (optional, default: **1.5**) - should get a number
-* **infiniteScrollThrottle**<_number_> - (optional, default: **150**) - should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user *stops* scrolling.
-* **infiniteScrollContainer**<_string|HTMLElement_> - (optional, default: null) - should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty.
-* **scrolled**<_function_> - this will callback if the distance threshold has been reached on a scroll down.
-* **scrolledUp**<_function_> - (event: InfiniteScrollEvent) - this will callback if the distance threshold has been reached on a scroll up.
-* **scrollWindow**<_boolean_> - (optional, default: **true**) - listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll.
-* **immediateCheck**<_boolean_> - (optional, default: **false**) - invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled).
-* **infiniteScrollDisabled**<_boolean_> - (optional, default: **false**) - doesn't invoke the handler if set to true
-* **horizontal**<_boolean_> - (optional, default: false) - sets the scroll to listen for horizontal events  
-* **alwaysCallback**<_boolean_> - (optional, default: false) - instructs the scroller to always trigger events 
-* **fromRoot**<_boolean_> - (optional, default: false) - if **infiniteScrollContainer** is set, this instructs the scroller to query the container selector from the root of the **document** object. 
+
+### Properties
+
+| @Input()                 | Type                 | Required | Default | Description                                                                                                                                                                                                                                                                                           |
+| ------------------------ | -------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| infiniteScrollDistance   | number               | optional | 2       | the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 \* 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. |
+| infiniteScrollUpDistance | number               | optional | 1.5     | should get a number                                                                                                                                                                                                                                                                                   |
+| infiniteScrollThrottle   | number               | optional | 150     | should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user _stops_ scrolling.                                                                                                                                                            |
+| scrollWindow             | boolean              | optional | true    | listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll.                                                                                                                       |
+| immediateCheck           | boolean              | optional | false   | invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled)                                                                                                                            |
+| infiniteScrollDisabled   | boolean              | optional | false   | doesn't invoke the handler if set to true                                                                                                                                                                                                                                                             |
+| horizontal               | boolean              | optional | false   | sets the scroll to listen for horizontal events                                                                                                                                                                                                                                                       |
+| alwaysCallback           | boolean              | optional | false   | instructs the scroller to always trigger events                                                                                                                                                                                                                                                       |
+| infiniteScrollContainer  | string / HTMLElement | optional | null    | should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty.                                                                                                                                                                |
+| fromRoot                 | boolean              | optional | false   | if **infiniteScrollContainer** is set, this instructs the scroller to query the container selector from the root of the **document** object.                                                                                                                                                          |
+
+### Events
+
+| @Output()  | Type         | Event Type           | Required | Description                                                                     |
+| ---------- | ------------ | -------------------- | -------- | ------------------------------------------------------------------------------- |
+| scrolled   | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll down. |
+| scrolledUp | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll up.   |

 ## Behavior
+
 By default, the directive listens to the **window scroll** event and invoked the callback.  
 **To trigger the callback when the actual element is scrolled**, these settings should be configured:
-* [scrollWindow]="false"
-* set an explict css "height" value to the element
+
+- [scrollWindow]="false"
+- set an explict css "height" value to the element

 ## DEMO
- [**Default Scroll** By Window - plunkr](https://plnkr.co/edit/DrEDetYnZkFxR7OWWrxS?p=preview) 
- [Scroll On a **"Modal"** - plunkr](https://plnkr.co/edit/QnQOwE9SEapwJCCFII3L?p=preview)
+
+[Try the Demo in StackBlitz](https://stackblitz.com/edit/ngx-infinite-scroll)

 ## Usage
+
 First, import the InfiniteScrollModule to your module:

 ```typescript
@ -57,11 +108,11 @@ import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { AppComponent } from './app';

@NgModule({
-  imports:[ BrowserModule, InfiniteScrollModule ],
-  declarations: [ AppComponent, ],
-  bootstrap: [ AppComponent ]
+  imports: [BrowserModule, InfiniteScrollModule],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
 })
-export class AppModule { }
+export class AppModule {}

 platformBrowserDynamic().bootstrapModule(AppModule);
 ```
@ -72,49 +123,54 @@ In this example, the **onScroll** callback will be invoked when the window is sc
 import { Component } from '@angular/core';

@Component({
-	selector: 'app',
-	template: `
-		<div class="search-results"
-		    infiniteScroll
-		    [infiniteScrollDistance]="2"
-		    [infiniteScrollThrottle]="50"
-		    (scrolled)="onScroll()">
-		</div>
-	`
+  selector: 'app',
+  template: `
+    <div
+      class="search-results"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+    ></div>
+  `,
 })
 export class AppComponent {
-	onScroll () {
-	    console.log('scrolled!!')
-	}
+  onScroll() {
+    console.log('scrolled!!');
+  }
 }
 ```
+
 in this example, whenever the "search-results" is scrolled, the callback will be invoked:

 ```typescript
 import { Component } from '@angular/core';

@Component({
-	selector: 'app',
-	styles: [
-		`.search-results {
-			height: 20rem;
-			overflow: scroll;
-		}`
-	],
-	template: `
-		<div class="search-results"
-		    infiniteScroll
-		    [infiniteScrollDistance]="2"
-		    [infiniteScrollThrottle]="50"
-		    (scrolled)="onScroll()"
-		    [scrollWindow]="false">
-		</div>
-	`
+  selector: 'app',
+  styles: [
+    `
+      .search-results {
+        height: 20rem;
+        overflow: scroll;
+      }
+    `,
+  ],
+  template: `
+    <div
+      class="search-results"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+      [scrollWindow]="false"
+    ></div>
+  `,
 })
 export class AppComponent {
-	onScroll () {
-	    console.log('scrolled!!')
-	}
+  onScroll() {
+    console.log('scrolled!!');
+  }
 }
 ```

@ -125,27 +181,28 @@ import { Component } from '@angular/core';
 import { InfiniteScroll } from 'ngx-infinite-scroll';

@Component({
-	selector: 'app',
-	directives: [ InfiniteScroll ],
-	template: `
-		<div class="search-results"
-		    infiniteScroll
-		    [infiniteScrollDistance]="2"
-		    [infiniteScrollUpDistance]="1.5"
-		    [infiniteScrollThrottle]="50"
-		    (scrolled)="onScrollDown()"
-		    (scrolledUp)="onScrollUp()">
-		</div>
-	`
+  selector: 'app',
+  directives: [InfiniteScroll],
+  template: `
+    <div
+      class="search-results"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollUpDistance]="1.5"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScrollDown()"
+      (scrolledUp)="onScrollUp()"
+    ></div>
+  `,
 })
 export class AppComponent {
-	onScrollDown () {
-	    console.log('scrolled down!!')
-	}
+  onScrollDown() {
+    console.log('scrolled down!!');
+  }

-	onScrollUp () {
-    	console.log('scrolled up!!')
-    }
+  onScrollUp() {
+    console.log('scrolled up!!');
+  }
 }
 ```

@ -155,31 +212,34 @@ In this example, the **infiniteScrollContainer** attribute is used to point dire
 import { Component } from '@angular/core';

@Component({
-	selector: 'app',
-	styles: [
-		`.main-panel {
-			height: 100px;
-			overflow-y: scroll;
-		}`
-	],
-	template: `
-		<div class="main-panel">
-			<div infiniteScroll
-			    [infiniteScrollDistance]="2"
-			    [infiniteScrollThrottle]="50"
-			    [infiniteScrollContainer]="selector"
-			    [fromRoot]="true"
-			    (scrolled)="onScroll()">
-			</div>
-		</div>
-	`
+  selector: 'app',
+  styles: [
+    `
+      .main-panel {
+        height: 100px;
+        overflow-y: scroll;
+      }
+    `,
+  ],
+  template: `
+    <div class="main-panel">
+      <div
+        infiniteScroll
+        [infiniteScrollDistance]="2"
+        [infiniteScrollThrottle]="50"
+        [infiniteScrollContainer]="selector"
+        [fromRoot]="true"
+        (scrolled)="onScroll()"
+      ></div>
+    </div>
+  `,
 })
 export class AppComponent {
-	selector: string = '.main-panel';
-	
-	onScroll () {
-	    console.log('scrolled!!')
-	}
+  selector: string = '.main-panel';
+
+  onScroll() {
+    console.log('scrolled!!');
+  }
 }
 ```

@ -189,29 +249,23 @@ It is also possible to use **infiniteScrollContainer** without additional variab
 [infiniteScrollContainer]="'.main-panel'"
 ```

-
-
-
 # Showcase Examples
-* [Echoes Player - Developed with Angular, angular-cli and ngrx](http://orizens.github.io/echoes-player) ([github repo for echoes player](http://github.com/orizens/echoes-player))
+
+- [Echoes Player - Developed with Angular, angular-cli and ngrx](http://orizens.github.io/echoes-player) ([github repo for echoes player](http://github.com/orizens/echoes-player))

 ## Contributors

 This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
 <a href="graphs/contributors"><img src="https://opencollective.com/ngx-infinite-scroll/contributors.svg?width=890" /></a>

-
 ## Backers

 Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]

 <a href="https://opencollective.com/ngx-infinite-scroll#backers" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/backers.svg?width=890"></a>

-
 ## Sponsors

-Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [[Become a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor)]
-
 <a href="https://opencollective.com/ngx-infinite-scroll/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/0/avatar.svg"></a>
 <a href="https://opencollective.com/ngx-infinite-scroll/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/1/avatar.svg"></a>
 <a href="https://opencollective.com/ngx-infinite-scroll/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/2/avatar.svg"></a>
@ -222,5 +276,3 @@ Support this project by becoming a sponsor. Your logo will show up here with a l
 <a href="https://opencollective.com/ngx-infinite-scroll/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/7/avatar.svg"></a>
 <a href="https://opencollective.com/ngx-infinite-scroll/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/8/avatar.svg"></a>
 <a href="https://opencollective.com/ngx-infinite-scroll/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/9/avatar.svg"></a>
-
-
--- a/angular.json
+++ b/angular.json
@ -0,0 +1,137 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "ngx-infinite-scroll": {
+      "projectType": "library",
+      "root": "projects/ngx-infinite-scroll",
+      "sourceRoot": "projects/ngx-infinite-scroll/src",
+      "prefix": "lib",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "options": {
+            "project": "projects/ngx-infinite-scroll/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "projects/ngx-infinite-scroll/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "projects/ngx-infinite-scroll/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/ngx-infinite-scroll/src/test.ts",
+            "tsConfig": "projects/ngx-infinite-scroll/tsconfig.spec.json",
+            "karmaConfig": "projects/ngx-infinite-scroll/karma.conf.js"
+          }
+        }
+      }
+    },
+    "demo": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "projects/demo",
+      "sourceRoot": "projects/demo/src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/demo",
+            "index": "projects/demo/src/index.html",
+            "main": "projects/demo/src/main.ts",
+            "polyfills": "projects/demo/src/polyfills.ts",
+            "tsConfig": "projects/demo/tsconfig.app.json",
+            "assets": [
+              "projects/demo/src/favicon.ico",
+              "projects/demo/src/assets"
+            ],
+            "styles": [
+              "projects/demo/src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "projects/demo/src/environments/environment.ts",
+                  "with": "projects/demo/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "demo:build:production"
+            },
+            "development": {
+              "browserTarget": "demo:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "demo:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "projects/demo/src/test.ts",
+            "polyfills": "projects/demo/src/polyfills.ts",
+            "tsConfig": "projects/demo/tsconfig.spec.json",
+            "karmaConfig": "projects/demo/karma.conf.js",
+            "assets": [
+              "projects/demo/src/favicon.ico",
+              "projects/demo/src/assets"
+            ],
+            "styles": [
+              "projects/demo/src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "ngx-infinite-scroll"
+}
--- a/build.js
+++ b/build.js
@ -1,61 +0,0 @@
-"use strict";
-
-require('shelljs/global');
-const chalk = require('chalk');
-
-const PACKAGE = `ngx-infinite-scroll`;
-const NPM_DIR = `dist`;
-const MODULES_DIR = `${NPM_DIR}/modules`;
-const BUNDLES_DIR = `${NPM_DIR}/bundles`;
-
-echo('Start building...');
-
-rm(`-Rf`, `${NPM_DIR}/*`);
-mkdir(`-p`, `./${MODULES_DIR}`);
-mkdir(`-p`, `./${BUNDLES_DIR}`);
-
-/* TSLint with Codelyzer */
-// https://github.com/palantir/tslint/blob/master/src/configs/recommended.ts
-// https://github.com/mgechev/codelyzer
-echo(`Start TSLint`);
-exec(`tslint --project ./tsconfig.json --type-check ./src/**/*.ts`);
-echo(chalk.green(`TSLint completed`));
-
-/* Aot compilation: ES2015 sources */
-echo(`Start AoT compilation`);
-exec(`ngc -p tsconfig-build.json`);
-echo(chalk.green(`AoT compilation completed`));
-
-/* Creates bundles: ESM/ES5 and UMD bundles */
-echo(`Start bundling`);
-echo(`Rollup package`);
-exec(`rollup -i ${NPM_DIR}/${PACKAGE}.js -o ${MODULES_DIR}/${PACKAGE}.js --sourcemap`, {silent: true});
-exec(`node scripts/map-sources -f ${MODULES_DIR}/${PACKAGE}.js`);
-
-echo(`Downleveling ES2015 to ESM/ES5`);
-cp(`${MODULES_DIR}/${PACKAGE}.js`, `${MODULES_DIR}/${PACKAGE}.es5.ts`);
-exec(`tsc ${MODULES_DIR}/${PACKAGE}.es5.ts --target es5 --module es2015 --noLib --sourceMap`, {silent: true});
-exec(`node scripts/map-sources -f ${MODULES_DIR}/${PACKAGE}.es5.js`);
-rm(`-f`, `${MODULES_DIR}/${PACKAGE}.es5.ts`);
-
-echo(`Run Rollup conversion on package`);
-exec(`rollup -c rollup.config.js --sourcemap`, {silent: true});
-exec(`node scripts/map-sources -f ${BUNDLES_DIR}/${PACKAGE}.umd.js`);
-
-echo(`Minifying`);
-cd(`${BUNDLES_DIR}`);
-exec(`uglifyjs -c --screw-ie8 --comments -o ${PACKAGE}.umd.min.js --source-map ${PACKAGE}.umd.min.js.map --source-map-include-sources ${PACKAGE}.umd.js`, {silent: true});
-exec(`node ../../scripts/map-sources -f ${PACKAGE}.umd.min.js`);
-cd(`..`);
-cd(`..`);
-
-echo(chalk.green(`Bundling completed`));
-
-rm(`-Rf`, `${NPM_DIR}/*.js`);
-rm(`-Rf`, `${NPM_DIR}/*.js.map`);
-rm(`-Rf`, `${NPM_DIR}/src/**/*.js`);
-rm(`-Rf`, `${NPM_DIR}/src/**/*.js.map`);
-
-cp(`-Rf`, [`package.json`, `LICENSE`, `README.md`], `${NPM_DIR}`);
-
-echo(chalk.green(`End building`));
--- a/example/bs-config.json
+++ b/example/bs-config.json
@ -1,12 +0,0 @@
-{
-  "port": 8000,
-  "files": [
-    "./example**/*.{html,htm,css,js,ts,map}",
-    "./example/src/**/*.{html,htm,css,js,ts,map}",
-    "./dist/bundles**/*.{html,htm,css,js,ts,map}"
-  ],
-  "server": [
-    "./example",
-    "./dist/bundles"
-  ]
-}
--- a/example/config.js
+++ b/example/config.js
@ -1,56 +0,0 @@
-let systemConfig = {
-  //use typescript for compilation
-  transpiler: 'typescript',
-  //typescript compiler options
-  typescriptOptions: {
-    emitDecoratorMetadata: true
-  },
-  //map tells the System loader where to look for things
-  map: {
-    app: './src',
-    '@angular': 'https://unpkg.com/@angular',
-    '@angular/common': 'https://unpkg.com/@angular/common@4.2.4',
-    '@angular/core': 'https://unpkg.com/@angular/core@4.2.4',
-    '@angular/compiler': 'https://unpkg.com/@angular/compiler@4.2.4',
-    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic@4.2.4',
-    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser@4.2.4',
-    'rxjs': 'https://unpkg.com/rxjs@5.4.2'
-    // 'ngx-infinite-scroll': 'https://unpkg.com/ngx-infinite-scroll'
-  },
-  //packages defines our app package
-  packages: {
-    app: {
-      main: './main.ts',
-      defaultExtension: 'ts'
-    },
-    '@angular/core': {
-      main: 'bundles/core.umd.js',
-      defaultExtension: 'js'
-    },
-    '@angular/compiler': {
-      main: 'bundles/compiler.umd.js',
-      defaultExtension: 'js'
-    },
-    '@angular/common': {
-      main: 'bundles/common.umd.js',
-      defaultExtension: 'js'
-    },
-    '@angular/platform-browser-dynamic': {
-      main: 'bundles/platform-browser-dynamic.umd.js',
-      defaultExtension: 'js'
-    },
-    '@angular/platform-browser': {
-      main: 'bundles/platform-browser.umd.js',
-      defaultExtension: 'js'
-    },
-    rxjs: {
-      defaultExtension: 'js'
-    },
-    'ngx-infinite-scroll': {
-      main: '../ngx-infinite-scroll.umd.js',
-      defaultExtension: 'js'
-    }
-  }
-};
-System.config(systemConfig);
-module.exports = systemConfig;
--- a/example/index.html
+++ b/example/index.html
@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html>
-
-  <head>
-    <title>Angular Playground</title>
-    <link rel="stylesheet" href="style.css" />
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" />
-    <script src="https://unpkg.com/core-js/client/shim.min.js"></script>
-
-    <script src="https://unpkg.com/zone.js@0.6.25?main=browser"></script>
-    <script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
-    <script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
-    <script src="https://code.angularjs.org/tools/typescript.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/chance/1.0.4/chance.min.js"></script>
-    <script src="config.js"></script>
-    <script>
-    System.import('app')
-      .catch(console.error.bind(console));
-  </script>
-  </head>
-
-  <body>
-    <my-app>
-    loading...
-  </my-app>
-  </body>
-
-</html>
--- a/example/src/app.ts
+++ b/example/src/app.ts
@ -1,27 +0,0 @@
-import { Component } from '@angular/core';
-
-import { ListMaker } from './list.service';
-
-// our root app component
-@Component({
-  selector: 'my-app',
-  providers: [ListMaker],
-  styleUrls: ['./style.css'],
-  template: `
-  <div class="fixed dummy">
-  <div>DUMMY</div>
-  <div *ngFor="let item of items">{{ item }}</div>
-  </div>
-  <test className="fixed third" info="'listen to window'" [throttle]="300"></test>
-  <test-inner className="fixed inner" [scrollWindow]="false" [selector]="'.content'" [fromRoot]="false"
-    [info]="'selector inside: .content'"></test-inner>
-  <test className="fixed with-error" [scrollWindow]="false" [selector]="'.not-found'"></test>
-  <test className="fixed second" [scrollWindow]="false" [selector]="'.dummy'" [fromRoot]="true"></test>
-  <test className="fixed first" [scrollWindow]="false"></test>
-  <test className="search-results"></test>
-  `
-})
-export class AppComponent {
-  public items = this.listMaker.array;
-  constructor(public listMaker: ListMaker) { }
-}
--- a/example/src/list.service.ts
+++ b/example/src/list.service.ts
@ -1,44 +0,0 @@
-import { Injectable } from '@angular/core';
-
-@Injectable()
-export class ListMaker {
-  public array = [];
-  sum = 100;
-  direction = '';
-
-  constructor() {
-    this.appendItems(0, this.sum);
-  }
-
-  addItems(startIndex, endIndex, arrMethod) {
-    for (let i = 0; i < this.sum; ++i) {
-      this.array[arrMethod]([i, ' ', this.generateWord()].join(''));
-    }
-  }
-
-  appendItems(startIndex, endIndex) {
-    this.addItems(startIndex, endIndex, 'push');
-  }
-
-  prependItems(startIndex, endIndex) {
-    this.addItems(startIndex, endIndex, 'unshift');
-  }
-
-  setDirectionDown() {
-    const start = this.sum;
-    this.sum += 20;
-    this.appendItems(start, this.sum);
-    this.direction = 'down';
-  }
-
-  setDirectionUp() {
-    const start = this.sum;
-    this.sum += 20;
-    this.prependItems(start, this.sum);
-    this.direction = 'up';
-  }
-
-  generateWord() {
-    return chance.word();
-  }
-}
--- a/example/src/main.ts
+++ b/example/src/main.ts
@ -1,19 +0,0 @@
-// main entry point
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { FormsModule } from '@angular/forms';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { InfiniteScrollModule } from 'ngx-infinite-scroll';
-
-import { AppComponent } from './app';
-import { TestComponent } from './test';
-import { TestInnerComponent } from './test.inner';
-
-@NgModule({
-  declarations: [AppComponent, TestComponent, TestInnerComponent],
-  imports: [BrowserModule, InfiniteScrollModule, FormsModule],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }
-
-platformBrowserDynamic().bootstrapModule(AppModule);
--- a/example/src/test.inner.ts
+++ b/example/src/test.inner.ts
@ -1,57 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-import { ListMaker } from './list.service';
-
-// our root app component
-@Component({
-  selector: 'test-inner',
-  providers: [ListMaker],
-  template: `
-    <div class="results {{className}}"
-        [scrollWindow]="scrollWindow"
-         data-infinite-scroll
-         [infiniteScrollContainer]="selector"
-         [fromRoot]="fromRoot"
-         [infiniteScrollDistance]="scrollDistance"
-         [infiniteScrollUpDistance]="scrollUpDistance"
-         [infiniteScrollThrottle]="throttle"
-         (scrolled)="onScrollDown()"
-         (scrolledUp)="onUp()">
-      <h3 class="info">{{ className }}, {{ info }}</h3>
-      <p>{{ info }}</p>
-      <section class="content">
-        <p *ngFor="let i of array">
-          {{ i }}
-        </p>
-      </section>
-    </div>
-  `
-})
-export class TestInnerComponent {
-  @Input() scrollWindow = true;
-  @Input() className = '';
-  @Input() selector = null;
-  @Input() fromRoot = false;
-  @Input() info = '';
-
-  array = this.listMaker.array;
-  throttle = 20;
-  scrollDistance = 1;
-  scrollUpDistance = 2;
-
-  constructor(public listMaker: ListMaker) { }
-
-  onScrollDown(ev) {
-    console.log(`scrolled down, from ${this.className} ${this.info}`);
-    this.listMaker.setDirectionDown();
-  }
-
-  onUp(ev) {
-    console.log(`scrolled up, from  ${this.className} ${this.info}`);
-    this.listMaker.setDirectionUp();
-  }
-
-  generateWord() {
-    return chance.word();
-  }
-}
--- a/example/src/test.ts
+++ b/example/src/test.ts
@ -1,59 +0,0 @@
-import { Component, Input } from '@angular/core';
-
-import { ListMaker } from './list.service';
-
-// our root app component
-@Component({
-  selector: 'test',
-  providers: [ListMaker],
-  template: `
-  <div class="results {{className}}"
-    [scrollWindow]="scrollWindow"
-    data-infinite-scroll
-    [infiniteScrollContainer]="selector"
-    [fromRoot]="fromRoot"
-    [infiniteScrollDisabled]="disableScroll"
-    [infiniteScrollDistance]="scrollDistance"
-    [infiniteScrollUpDistance]="scrollUpDistance"
-    [infiniteScrollThrottle]="throttle"
-    (scrolled)="onScrollDown()"
-    (scrolledUp)="onUp()">
-      <h4 class="info">
-        {{ className }}, {{info}}<br>
-        disable scroll <input type="checkbox" name="_disable" [(ngModel)]="disableScroll" title="disables scroll">
-      </h4>
-      <p *ngFor="let i of array">
-        {{ i }}
-      </p>
-    </div>
-  `
-})
-export class TestComponent {
-  @Input() scrollWindow = true;
-  @Input() className = '';
-  @Input() selector = null;
-  @Input() fromRoot = false;
-  @Input() info = '';
-  @Input() throttle = 20;
-
-  disableScroll = false;
-
-  array = this.listMaker.array;
-  scrollDistance = 3;
-  scrollUpDistance = 2;
-
-  constructor(public listMaker: ListMaker) { }
-
-  onScrollDown(ev) {
-    console.log(`scrolled down, from ${this.className} ${this.info}`);
-    this.listMaker.setDirectionDown();
-  }
-
-  onUp(ev) {
-    console.log(`scrolled up, from  ${this.className} ${this.info}`);
-    this.listMaker.setDirectionUp();
-  }
-  generateWord() {
-    return chance.word();
-  }
-}
--- a/example/style.css
+++ b/example/style.css
@ -1,59 +0,0 @@
-.search-results {
-  height: 100%;
-}
-.title {
-  position: fixed;
-  top: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
-  width: 100%;
-}
-.title small {
-  color: #eaeaea;
-}
-.fixed {
-  height: 300px;
-  width: 200px;
-  overflow: scroll;
-  display: block;
-  position: fixed;
-  transition: width .3s ease-out;
-}
-.fixed:hover {
-  width: 350px;
-}
-.fixed .info {
-  position: fixed;
-}
-.first {
-  top: 0;
-  right: 20px;
-  background-color: tomato;
-}
-.second {
-  bottom: 0;
-  right: 0px;
-  background-color: lime;
-}
-.dummy {
-  bottom: 0;
-  right: 200px;
-  background-color: crimson;
-}
-.third {
-  bottom: 0;
-  right: 400px;
-  background-color: darkslategrey;
-}
-
-.with-error {
-  top: 0;
-  right: 220px;
-  background-color: gray;
-}
-.inner {
-  bottom: 0;
-  right: 600px;
-  background-color: goldenrod;
-}
--- a/karma.conf.js
+++ b/karma.conf.js
@ -1,96 +0,0 @@
-// Karma configuration for Unit testing
-
-module.exports = function (config) {
-
-    var configuration = {
-
-        // base path that will be used to resolve all patterns (eg. files, exclude)
-        basePath: '',
-
-        // frameworks to use
-        // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
-        frameworks: ['jasmine'],
-
-        plugins: [
-            require('karma-jasmine'),
-            require('karma-chrome-launcher'),
-            require('karma-webpack'),
-            require('karma-sourcemap-loader'),
-            require('karma-spec-reporter')
-        ],
-
-        // list of files / patterns to load in the browser
-        files: [
-            { pattern: 'spec.bundle.js', watched: false }
-        ],
-
-        // list of files to exclude
-        exclude: [
-        ],
-
-        // preprocess matching files before serving them to the browser
-        // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
-        preprocessors: {
-            'spec.bundle.js': ['webpack']
-        },
-
-        // webpack
-        webpack: {
-            resolve: {
-                extensions: ['.ts', '.js']
-            },
-            module: {
-                rules: [
-                    {
-                        test: /\.ts/,
-                        loaders: ['ts-loader'],
-                        exclude: /node_modules/
-                    }
-                ],
-                exprContextCritical: false
-            },
-            performance: { hints: false }
-        },
-
-        webpackServer: {
-            noInfo: true
-        },
-
-
-        // test results reporter to use
-        // possible values: 'dots', 'progress'
-        // available reporters: https://npmjs.org/browse/keyword/karma-reporter
-        reporters: ['spec'],
-
-
-        // web server port
-        port: 9876,
-
-
-        // enable / disable colors in the output (reporters and logs)
-        colors: true,
-
-
-        // level of logging
-        // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
-        logLevel: config.LOG_INFO,
-
-
-        // enable / disable watching file and executing tests whenever any file changes
-        autoWatch: true,
-
-
-        // start these browsers
-        // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
-        browsers: ['Chrome'],
-
-
-        // Continuous Integration mode
-        // if true, Karma captures browsers, runs the tests and exits
-        singleRun: true
-
-    };
-
-    config.set(configuration);
-
-}
--- a/ngx-infinite-scroll.ts
+++ b/ngx-infinite-scroll.ts
@ -1 +0,0 @@
-export * from './public_api';
--- a/package.json
+++ b/package.json
@ -1,85 +1,44 @@
 {
-  "name": "ngx-infinite-scroll",
-  "version": "0.8.3",
-  "description": "An infinite scroll directive for Angular compatible with AoT compilation and Tree shaking",
-  "main": "./bundles/ngx-infinite-scroll.umd.js",
-  "module": "./modules/ngx-infinite-scroll.es5.js",
-  "es2015": "./modules/ngx-infinite-scroll.js",
-  "scripts": {
-    "build": "node build.js",
-    "test": "karma start",
-    "test:watch": "karma start --single-run=false",
-    "pack-lib": "npm pack ./dist",
-    "publish-lib": "npm publish ./dist",
-    "publish:beta": "npm publish --tag next ./dist",
-    "compodoc": "compodoc -p tsconfig.json",
-    "compodoc-serve": "compodoc -s",
-    "transpile": "ngc -p ./tsconfig.json",
-    "serve:prod": "npm run build && lite-server -c ./example/bs-config.json",
-    "postinstall": "opencollective postinstall"
-  },
-  "typings": "./ngx-infinite-scroll.d.ts",
-  "author": "Oren Farhi (orizens.com)",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/orizens/ngx-infinite-scroll.git"
-  },
-  "bugs": {
-    "url": "https://github.com/orizens/ngx-infinite-scroll/issues"
-  },
-  "homepage": "https://github.com/orizens/ngx-infinite-scroll",
-  "keywords": [
-    "angular",
-    "javascript",
-    "typescript"
-  ],
+  "name": "orizens-ng",
+  "version": "0.0.0",
  "license": "MIT",
-  "peerDependencies": {
-    "@angular/common": ">= 4.0.0",
-    "@angular/core": ">= 4.0.0"
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve",
+    "build": "ng build",
+    "watch": "ng build --watch --configuration development",
+    "test": "ng test",
+    "publish-lib": "npm publish --tag latest ./dist/ngx-infinite-scroll",
+    "publish:beta": "npm publish --tag next ./dist/ngx-infinite-scroll"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~13.1.0",
+    "@angular/common": "~13.1.0",
+    "@angular/compiler": "~13.1.0",
+    "@angular/core": "~13.1.0",
+    "@angular/forms": "~13.1.0",
+    "@angular/platform-browser": "~13.1.0",
+    "@angular/platform-browser-dynamic": "~13.1.0",
+    "@angular/router": "~13.1.0",
+    "@scarf/scarf": "^1.1.1",
+    "rxjs": "~7.4.0",
+    "tslib": "^2.3.0",
+    "zone.js": "~0.11.4"
  },
  "devDependencies": {
-    "@angular/common": "^4.0.0",
-    "@angular/compiler": "^4.0.0",
-    "@angular/compiler-cli": "^4.0.0",
-    "@angular/core": "^4.0.0",
-    "@angular/platform-browser": "^4.0.0",
-    "@angular/platform-browser-dynamic": "^4.0.0",
-    "@angular/platform-server": "^4.0.0",
-    "@angular/animations": "^4.0.0",
-    "@types/jasmine": "2.5.46",
-    "@types/node": "7.0.10",
-    "codelyzer": "3.0.0-beta.4",
-    "compodoc": "0.0.41",
-    "core-js": "2.4.1",
-    "jasmine-core": "2.5.2",
-    "karma": "1.5.0",
-    "karma-chrome-launcher": "2.0.0",
-    "karma-jasmine": "1.1.0",
-    "karma-sourcemap-loader": "0.3.7",
-    "karma-spec-reporter": "0.0.30",
-    "karma-webpack": "2.0.3",
-    "reflect-metadata": "0.1.10",
-    "rollup": "0.41.6",
-    "rxjs": "5.5.2",
-    "ts-helpers": "1.1.2",
-    "ts-loader": "2.0.3",
-    "tslint": "4.5.1",
-    "typescript": "^2.1.5",
-    "webpack": "2.3.1",
-    "zone.js": "0.8.5",
-    "shelljs": "0.7.7",
-    "chalk": "1.1.3",
-    "uglify-js": "2.8.15",
-    "sorcery": "0.10.0",
-    "yargs": "7.0.2"
-  },
-  "dependencies": {
-    "opencollective": "^1.0.3"
-  },
-  "collective": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/ngx-infinite-scroll",
-    "logo": "https://opencollective.com/ngx-infinite-scroll/logo.txt"
+    "@angular-devkit/build-angular": "~13.1.3",
+    "@angular/cli": "~13.1.3",
+    "@angular/compiler-cli": "~13.1.0",
+    "@types/jasmine": "~3.10.0",
+    "@types/node": "^12.11.1",
+    "jasmine-core": "~3.10.0",
+    "karma": "~6.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.1.0",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "~1.7.0",
+    "ng-packagr": "^13.0.0",
+    "typescript": "~4.5.2"
  }
-}
+}
--- a/projects/demo/.browserslistrc
+++ b/projects/demo/.browserslistrc
@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
--- a/projects/demo/karma.conf.js
+++ b/projects/demo/karma.conf.js
@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/demo'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/projects/demo/src/app/app.component.css
+++ b/projects/demo/src/app/app.component.css
--- a/projects/demo/src/app/app.component.html
+++ b/projects/demo/src/app/app.component.html
@ -0,0 +1,347 @@
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * The content below * * * * * * * * * * * -->
+<!-- * * * * * * * * * * is only a placeholder * * * * * * * * * * -->
+<!-- * * * * * * * * * * and can be replaced. * * * * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+<!-- * * * * * * * * * Delete the template below * * * * * * * * * * -->
+<!-- * * * * * * * to get started with your project! * * * * * * * * -->
+<!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * -->
+
+<style>
+  :host {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    font-size: 14px;
+    color: #333;
+    box-sizing: border-box;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin: 8px 0;
+  }
+
+  p {
+    margin: 0;
+  }
+
+  .spacer {
+    flex: 1;
+  }
+
+  .toolbar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 60px;
+    display: flex;
+    align-items: center;
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+  }
+
+  .toolbar img {
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo {
+    height: 40px;
+    margin: 0 8px;
+  }
+
+  .toolbar #youtube-logo {
+    height: 40px;
+    margin: 0 16px;
+  }
+
+  .toolbar #twitter-logo:hover,
+  .toolbar #youtube-logo:hover {
+    opacity: 0.8;
+  }
+
+  .content {
+    display: flex;
+    margin: 82px auto 32px;
+    padding: 0 16px;
+    max-width: 960px;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  svg.material-icons {
+    height: 24px;
+    width: auto;
+  }
+
+  svg.material-icons:not(:last-child) {
+    margin-right: 8px;
+  }
+
+  .card svg.material-icons path {
+    fill: #888;
+  }
+
+  .card-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 16px;
+  }
+
+  .card {
+    all: unset;
+    border-radius: 4px;
+    border: 1px solid #eee;
+    background-color: #fafafa;
+    height: 40px;
+    width: 200px;
+    margin: 0 8px 16px;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    transition: all 0.2s ease-in-out;
+    line-height: 24px;
+  }
+
+  .card-container .card:not(:last-child) {
+    margin-right: 0;
+  }
+
+  .card.card-small {
+    height: 16px;
+    width: 168px;
+  }
+
+  .card-container .card:not(.highlight-card) {
+    cursor: pointer;
+  }
+
+  .card-container .card:not(.highlight-card):hover {
+    transform: translateY(-3px);
+    box-shadow: 0 4px 17px rgba(0, 0, 0, 0.35);
+  }
+
+  .card-container .card:not(.highlight-card):hover .material-icons path {
+    fill: rgb(105, 103, 103);
+  }
+
+  .card.highlight-card {
+    background-color: #1976d2;
+    color: white;
+    font-weight: 600;
+    border: none;
+    width: auto;
+    min-width: 30%;
+    position: relative;
+  }
+
+  .card.card.highlight-card span {
+    margin-left: 60px;
+  }
+
+  svg#rocket {
+    width: 80px;
+    position: absolute;
+    left: -10px;
+    top: -24px;
+  }
+
+  svg#rocket-smoke {
+    height: calc(100vh - 95px);
+    position: absolute;
+    top: 10px;
+    right: 180px;
+    z-index: -10;
+  }
+
+  a,
+  a:visited,
+  a:hover {
+    color: #1976d2;
+    text-decoration: none;
+  }
+
+  a:hover {
+    color: #125699;
+  }
+
+  .terminal {
+    position: relative;
+    width: 80%;
+    max-width: 600px;
+    border-radius: 6px;
+    padding-top: 45px;
+    margin-top: 8px;
+    overflow: hidden;
+    background-color: rgb(15, 15, 16);
+  }
+
+  .terminal::before {
+    content: "\2022 \2022 \2022";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 4px;
+    background: rgb(58, 58, 58);
+    color: #c2c3c4;
+    width: 100%;
+    font-size: 2rem;
+    line-height: 0;
+    padding: 14px 0;
+    text-indent: 4px;
+  }
+
+  .terminal pre {
+    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;
+    color: white;
+    padding: 0 1rem 1rem;
+    margin: 0;
+  }
+
+  .circle-link {
+    height: 40px;
+    width: 40px;
+    border-radius: 40px;
+    margin: 8px;
+    background-color: white;
+    border: 1px solid #eeeeee;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+    transition: 1s ease-out;
+  }
+
+  .circle-link:hover {
+    transform: translateY(-0.25rem);
+    box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
+  }
+
+  footer {
+    margin-top: 8px;
+    display: flex;
+    align-items: center;
+    line-height: 20px;
+  }
+
+  footer a {
+    display: flex;
+    align-items: center;
+  }
+
+  .github-star-badge {
+    color: #24292e;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    padding: 3px 10px;
+    border: 1px solid rgba(27,31,35,.2);
+    border-radius: 3px;
+    background-image: linear-gradient(-180deg,#fafbfc,#eff3f6 90%);
+    margin-left: 4px;
+    font-weight: 600;
+  }
+
+  .github-star-badge:hover {
+    background-image: linear-gradient(-180deg,#f0f3f6,#e6ebf1 90%);
+    border-color: rgba(27,31,35,.35);
+    background-position: -.5em;
+  }
+
+  .github-star-badge .material-icons {
+    height: 16px;
+    width: 16px;
+    margin-right: 4px;
+  }
+
+  svg#clouds {
+    position: fixed;
+    bottom: -160px;
+    left: -230px;
+    z-index: -10;
+    width: 1920px;
+  }
+
+  /* Responsive Styles */
+  @media screen and (max-width: 767px) {
+    .card-container > *:not(.circle-link) ,
+    .terminal {
+      width: 100%;
+    }
+
+    .card:not(.highlight-card) {
+      height: 16px;
+      margin: 8px 0;
+    }
+
+    .card.highlight-card span {
+      margin-left: 72px;
+    }
+
+    svg#rocket-smoke {
+      right: 120px;
+      transform: rotate(-5deg);
+    }
+  }
+
+  @media screen and (max-width: 575px) {
+    svg#rocket-smoke {
+      display: none;
+      visibility: hidden;
+    }
+  }
+</style>
+
+<!-- Toolbar -->
+<div class="toolbar" role="banner">
+  <img
+    width="40"
+    alt="Angular Logo"
+    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg=="
+  />
+  <span>Welcome To ngx-infinite-scroll</span>
+
+</div>
+
+<div class="content" role="main">
+
+  <!-- Highlight Card -->
+  <div class="card highlight-card card-small">
+
+  </div>
+
+  <h1 class="title well">
+    ngx-infinite-scroll
+    <section>
+    <small>items: {{sum}}, now triggering scroll: {{direction}}</small>
+    </section>
+    <section>
+      <button class="btn btn-info" (click)="toggleModal()">Open Infinite Scroll in Modal</button>
+    </section>
+  </h1>
+  <modal *ngIf="modalOpen" (onClose)="toggleModal()"></modal>
+  <div class="search-results"
+        infinite-scroll
+        [infiniteScrollDistance]="scrollDistance"
+        [infiniteScrollUpDistance]="scrollUpDistance"
+        [infiniteScrollThrottle]="throttle"
+        (scrolled)="onScrollDown()"
+        (scrolledUp)="onUp()">
+    <p *ngFor="let i of array">
+      {{ i }}
+    </p>
+  </div>
+
+
+</div>
+
--- a/projects/demo/src/app/app.component.spec.ts
+++ b/projects/demo/src/app/app.component.spec.ts
@ -0,0 +1,31 @@
+import { TestBed } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'demo'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('demo');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement as HTMLElement;
+    expect(compiled.querySelector('.content span')?.textContent).toContain('demo app is running!');
+  });
+});
--- a/projects/demo/src/app/app.component.ts
+++ b/projects/demo/src/app/app.component.ts
@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+})
+export class AppComponent {
+  title = 'demo';
+  array: string[] = [];
+  sum = 100;
+  throttle = 300;
+  scrollDistance = 1;
+  scrollUpDistance = 2;
+  direction = '';
+  modalOpen = false;
+
+  // nisVersion = nisPackage.dependencies["ngx-infinite-scroll"];
+
+  constructor() {
+    this.appendItems(0, this.sum);
+  }
+
+  addItems(startIndex: number, endIndex: number, _method: 'push' | 'unshift') {
+    for (let i = 0; i < this.sum; ++i) {
+      const value = [i, ' ', this.generateWord()].join('');
+      if (_method === 'push') {
+        this.array.push(value);
+      } else {
+        this.array.unshift(value);
+      }
+    }
+  }
+
+  appendItems(startIndex: number, endIndex: number) {
+    this.addItems(startIndex, endIndex, 'push');
+  }
+
+  prependItems(startIndex: number, endIndex: number) {
+    this.addItems(startIndex, endIndex, 'unshift');
+  }
+
+  onScrollDown() {
+    // console.log('scrolled down!!', ev);
+
+    // add another 20 items
+    const start = this.sum;
+    this.sum += 20;
+    this.appendItems(start, this.sum);
+
+    this.direction = 'down';
+  }
+
+  onUp() {
+    // console.log('scrolled up!', ev);
+    const start = this.sum;
+    this.sum += 20;
+    this.prependItems(start, this.sum);
+
+    this.direction = 'up';
+  }
+  generateWord() {
+    return Math.random() * 3342411313;
+    // return chance.word();
+  }
+
+  toggleModal() {
+    this.modalOpen = !this.modalOpen;
+  }
+}
--- a/projects/demo/src/app/app.module.ts
+++ b/projects/demo/src/app/app.module.ts
@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { AppComponent } from './app.component';
+import { InfiniteScrollModule } from 'ngx-infinite-scroll';
+import { ModalComponent } from './modal/modal.component';
+
+@NgModule({
+  declarations: [AppComponent, ModalComponent],
+  imports: [BrowserModule, InfiniteScrollModule],
+  providers: [],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
--- a/projects/demo/src/app/modal/modal.component.ts
+++ b/projects/demo/src/app/modal/modal.component.ts
@ -0,0 +1,69 @@
+import { Component, Output, EventEmitter } from '@angular/core';
+
+@Component({
+  selector: 'modal',
+  templateUrl: './modal.html',
+})
+export class ModalComponent {
+  @Output() onClose = new EventEmitter();
+
+  array: number[] = [];
+  sum = 100;
+
+  modalIsOpen = '';
+  modalTitle = 'scroll to update';
+  modalBody = modalText;
+
+  modalScrollDistance = 2;
+  modalScrollThrottle = 50;
+
+  constructor() {
+    for (let i = 0; i < this.sum; ++i) {
+      this.array.push(i);
+    }
+    this.open();
+  }
+
+  onScrollDown() {
+    console.log('scrolled!!');
+
+    // add another 20 items
+    const start = this.sum;
+    this.sum += 20;
+    for (let i = start; i < this.sum; ++i) {
+      this.array.push(i);
+    }
+  }
+
+  onModalScrollDown() {
+    this.modalTitle = 'updated on ' + new Date().toString();
+    this.modalBody += modalText;
+  }
+  open() {
+    this.modalIsOpen = 'in modal-open';
+  }
+
+  close() {
+    this.modalIsOpen = '';
+    this.modalBody = modalText;
+    this.onClose.emit();
+  }
+}
+
+var modalText = `Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+
+Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.
+
+Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
+
+Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
+
+Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.`;
--- a/projects/demo/src/app/modal/modal.html
+++ b/projects/demo/src/app/modal/modal.html
@ -0,0 +1,24 @@
+<div class="modal fade {{ modalIsOpen }}" tabindex="-1" role="dialog">
+  <div class="modal-dialog" role="document">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="close()"><span aria-hidden="true">&times;</span></button>
+        <h4 class="modal-title">{{ modalTitle }}</h4>
+      </div>
+      <div class="modal-body"
+        infinite-scroll
+        [infiniteScrollDistance]="modalScrollDistance"
+        [infiniteScrollThrottle]="modalScrollThrottle"
+        [scrollWindow]="false"
+        (scrolled)="onModalScrollDown()"
+        >
+        <p>
+          {{ modalBody }}
+        </p>
+      </div>
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal" (click)="close()">Close</button>
+      </div>
+    </div>
+  </div>
+</div>
--- a/projects/demo/src/assets/.gitkeep
+++ b/projects/demo/src/assets/.gitkeep
--- a/projects/demo/src/environments/environment.prod.ts
+++ b/projects/demo/src/environments/environment.prod.ts
@ -0,0 +1,3 @@
+export const environment = {
+  production: true
+};
--- a/projects/demo/src/environments/environment.ts
+++ b/projects/demo/src/environments/environment.ts
@ -0,0 +1,16 @@
+// This file can be replaced during build by using the `fileReplacements` array.
+// `ng build` replaces `environment.ts` with `environment.prod.ts`.
+// The list of file replacements can be found in `angular.json`.
+
+export const environment = {
+  production: false
+};
+
+/*
+ * For easier debugging in development mode, you can import the following file
+ * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
+ *
+ * This import should be commented out in production mode because it will have a negative impact
+ * on performance if an error is thrown.
+ */
+// import 'zone.js/plugins/zone-error';  // Included with Angular CLI.
--- a/projects/demo/src/favicon.ico
+++ b/projects/demo/src/favicon.ico
--- a/projects/demo/src/index.html
+++ b/projects/demo/src/index.html
@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Demo</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+</head>
+<body>
+  <app-root></app-root>
+</body>
+</html>
--- a/projects/demo/src/main.ts
+++ b/projects/demo/src/main.ts
@ -0,0 +1,12 @@
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
+
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));
--- a/projects/demo/src/polyfills.ts
+++ b/projects/demo/src/polyfills.ts
@ -0,0 +1,53 @@
+/**
+ * This file includes polyfills needed by Angular and is loaded before the app.
+ * You can add your own extra polyfills to this file.
+ *
+ * This file is divided into 2 sections:
+ *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
+ *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
+ *      file.
+ *
+ * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
+ * automatically update themselves. This includes recent versions of Safari, Chrome (including
+ * Opera), Edge on the desktop, and iOS and Chrome on mobile.
+ *
+ * Learn more in https://angular.io/guide/browser-support
+ */
+
+/***************************************************************************************************
+ * BROWSER POLYFILLS
+ */
+
+/**
+ * By default, zone.js will patch all possible macroTask and DomEvents
+ * user can disable parts of macroTask/DomEvents patch by setting following flags
+ * because those flags need to be set before `zone.js` being loaded, and webpack
+ * will put import in the top of bundle, so user need to create a separate file
+ * in this directory (for example: zone-flags.ts), and put the following flags
+ * into that file, and then add the following code before importing zone.js.
+ * import './zone-flags';
+ *
+ * The flags allowed in zone-flags.ts are listed here.
+ *
+ * The following flags will work for all browsers.
+ *
+ * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
+ * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
+ * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
+ *
+ *  in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
+ *  with the following flag, it will bypass `zone.js` patch for IE/Edge
+ *
+ *  (window as any).__Zone_enable_cross_context_check = true;
+ *
+ */
+
+/***************************************************************************************************
+ * Zone JS is required by default for Angular itself.
+ */
+import 'zone.js';  // Included with Angular CLI.
+
+
+/***************************************************************************************************
+ * APPLICATION IMPORTS
+ */
--- a/projects/demo/src/styles.css
+++ b/projects/demo/src/styles.css
@ -0,0 +1 @@
+/* You can add global styles to this file, and also import other style files */
--- a/projects/demo/src/test.ts
+++ b/projects/demo/src/test.ts
@ -0,0 +1,26 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
--- a/projects/demo/tsconfig.app.json
+++ b/projects/demo/tsconfig.app.json
@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/app",
+    "types": [],
+    "noImplicitAny": false,
+    "strict": false,
+  },
+  "files": [
+    "src/main.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.d.ts"
+  ]
+}
--- a/projects/demo/tsconfig.spec.json
+++ b/projects/demo/tsconfig.spec.json
@ -0,0 +1,18 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts",
+    "src/polyfills.ts"
+  ],
+  "include": [
+    "src/**/*.spec.ts",
+    "src/**/*.d.ts"
+  ]
+}
--- a/projects/ngx-infinite-scroll/.browserslistrc
+++ b/projects/ngx-infinite-scroll/.browserslistrc
@ -0,0 +1,16 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
--- a/projects/ngx-infinite-scroll/CHANGELOG.md
+++ b/projects/ngx-infinite-scroll/CHANGELOG.md
@ -0,0 +1,173 @@
+## v 13.0.0 (2022/26/03)
+- [UPGRADE] - now using Angular 13
+- [DEV] - includes now a demo app for development
+
+## v 10.1.0 (2020/12/09)
+
+- [FIX] - fixes fast scroll issues #385
+
+## v 10.0.1 (2020/12/09)
+
+- [FIX] - throttle behavior refined - fixed issue #198
+
+## v 10.0.0 (2020/11/07)
+
+- [UPGRADE] - now using Angular 10
+
+## v 9.1.0 (2020/09/09)
+
+- [UPGRADE] - upgrading scarf
+
+## v 9.0.0 (2020/05/12)
+
+- [UPGRADE] - now using Angular 9
+
+## v 8.0.2 (2020/05/10)
+
+- [CHORE] - add @scarf
+
+## v 8.0.1 (2019/10/15)
+
+- [FIX] - solves issue with open collective postinstall #321
+
+## v 8.0.0 (2019/07/26)
+
+- [UPGRADE] - now using Angular 8
+- [BREAKING_CHANGE] - `InfiniteScrollEvent` is renamed to `IInfiniteScrollEvent`
+
+## v 7.2.0 (2019/06/10)
+
+- [FIX] - fixes #322 - fixing scrollDistance calculations to include it reach to definite bottom
+
+## v 7.1.0 (2019/03/10)
+
+- [FIX] - 'alwaysCallback' to trigger only when past distance point
+- [UPGRADE] - unit tests with puppeteer
+- [UPGRADE] - scorll state is now handled within a class
+- [FIX] - using now opencollective-postinstall #296
+
+## v 7.0.1 (2019/01/04)
+
+- [FIX] - build fix adding correct version of Typescript 3
+
+## v 7.0.0 (2018/12/30)
+
+- [UPGRADE] - now using Angular 7
+
+## v 6.0.1 (2018/06/15)
+
+- [FIX] - scroll up calculations issues #282
+- [CHORE] - more tests for "shouldFireScrollEvent()"
+- [CHORE] - added an "exmaples" instead "example" for development
+
+## v 6.0.0 (2018/05/22)
+
+- [UPGRADE] - upgrade to Angular 6 & rxjs 6
+- [CHORE] - demo now with https://stackblitz.com
+
+## v 0.8.4 (2018/04/11)
+
+- [FIX] - bug fixes
+- [UPGRADE] - rxjs 5.5.6 upgrade
+- [CHORE] - Add npm badges
+
+## v 0.8.3 (2018/02/21)
+
+- [FIX] - fix for #198 - takes a long time for onscroll to fire
+- [UPDATE] - default value for throttle changed to 150
+
+## v 0.8.2 (2018/01/07)
+
+- [FIX] - fix for #221 - action not fired on Windows scrolling
+- [FIX] - fix for #228 - scrolling back up to the top of the list and then scroll down doesn't trigger event
+- [REFACTOR] - shorten var names
+
+## v 0.8.1 (2018/01/07)
+
+- [REFACTOR] - performance optimization for scroll events
+
+## v 0.8.0 (2018/01/02)
+
+- [FIX] - now triggers only once when in or after target (#200)
+- [REFACTOR] - "distance" number has been refined to be the percentage point of the scroll nob.
+- [REFACTOR] - added more unit tests.
+
+## v 0.7.2 (2017/12/07)
+
+- [FIX] - fix for ie11 - fix #157
+
+## v 0.7.1 (2017/11/27)
+
+- [FIX] - use html container if passed in #217 - fix #216
+
+## v 0.7.0 (2017/11/27)
+
+- [ADD] - watch changes for: infiniteScrollDisabled - fix #196
+- [ADD] - watch changes for: infiniteScrollDistance - fix #202
+- [FIX] - fix for IE11 - fix #203
+- [REFACTOR] - "disable" now removes the scroll listener instead of rxjs/filter
+
+## v 0.6.1 (2017/10/20)
+
+- [REFACTOR] - updated code to be functional based
+- [FIX] - fix #67, fix #191, fix #190
+
+## v 0.5.2 (2017/09/27)
+
+- [FIX] - fix #157, fix #162, fix #171, fix #188
+- [DOCS] - added example for development
+
+## v 0.5.1 (2017/04/25)
+
+- [FIX] - fixes #156 - running scroll logics outside of angular's zone
+
+## v 0.5.0 (2017/04/24)
+
+- [MAINTAINANCE] - code refactor - removing factories to rely more pure functional methods in PositionResolver, AxisResolver
+
+## v 0.4.2 (2017/04/19)
+
+- [NEW] - added **'[infiniteScroll]'** by [Angular's styleguide](https://angular.io/docs/ts/latest/guide/style-guide.html#!#02-06). **[infinite-scroll]** will be deprecated in future version.
+- reduced bundle size with imports for RxJS Observable and Subscription objects #126.
+- removed old code directory from repo
+
+## v 0.4.1 (2017/04/13)
+
+- Fixes #147 - (**InfiniteScrollModule is not an NgModule**)
+
+## v 0.4.0 (2017/04/12)
+
+- Added Angular 4 support
+- New starter code base ([based on angular-library-starter](https://github.com/robisim74/angular-library-starter))
+
+## v 0.3.3 (2017/03/01)
+
+### Updates
+
+- reverted the fix of #126
+
+## v 0.3.2 (2017/03/01)
+
+### Updates
+
+- fixes [#126](https://github.com/orizens/angular2-infinite-scroll/issues/126)
+
+## v 0.3.1 (2017/02/15)
+
+### Updates
+
+- added custom scrollable container from [#108](https://github.com/orizens/angular2-infinite-scroll/pull/108/files)
+
+## v 0.3.0 (2017/01/31)
+
+### Updates
+
+- refactored infinite scroller to smaller modules with composition
+- added "models" - includes interfaces for development
+
+## v 0.2.9 (2017/01/13)
+
+### Updates
+
+- added changelog.md
+- ([refactor(scroll): replaces throttle with debounce](https://github.com/orizens/angular2-infinite-scroll/pull/82))
--- a/projects/ngx-infinite-scroll/CONTRIBUTING.md
+++ b/projects/ngx-infinite-scroll/CONTRIBUTING.md
@ -0,0 +1,67 @@
+# Contribute
+
+## Introduction
+
+First, thank you for considering contributing to ngx-infinite-scroll! It's people like you that make the open source community such a great community! 😊
+
+We welcome any type of contribution, not only code. You can help with 
+- **QA**: file bug reports, the more details you can give the better (e.g. screenshots with the console open)
+- **Marketing**: writing blog posts, howto's, printing stickers, ...
+- **Community**: presenting the project at meetups, organizing a dedicated meetup for the local community, ...
+- **Code**: take a look at the [open issues](issues). Even if you can't write code, commenting on them, showing that you care about a given issue matters. It helps us triage them.
+- **Money**: we welcome financial contributions in full transparency on our [open collective](https://opencollective.com/ngx-infinite-scroll).
+
+## Your First Contribution
+
+Working on your first Pull Request? You can learn how from this *free* series, [How to Contribute to an Open Source Project on GitHub](https://egghead.io/series/how-to-contribute-to-an-open-source-project-on-github).
+
+## Submitting code
+
+Any code change should be submitted as a pull request. The description should explain what the code does and give steps to execute it. The pull request should also contain tests.
+
+## Code review process
+
+The bigger the pull request, the longer it will take to review and merge. Try to break down large pull requests in smaller chunks that are easier to review and merge.
+It is also always helpful to have some context for your pull request. What was the purpose? Why does it matter to you?
+
+## Financial contributions
+
+We also welcome financial contributions in full transparency on our [open collective](https://opencollective.com/ngx-infinite-scroll).
+Anyone can file an expense. If the expense makes sense for the development of the community, it will be "merged" in the ledger of our open collective by the core contributors and the person who filed the expense will be reimbursed.
+
+## Questions
+
+If you have any questions, create an [issue](issue) (protip: do a quick search first to see if someone else didn't ask the same question before!).
+You can also reach us at hello@ngx-infinite-scroll.opencollective.com.
+
+## Credits
+
+### Contributors
+
+Thank you to all the people who have already contributed to ngx-infinite-scroll!
+<a href="graphs/contributors"><img src="https://opencollective.com/ngx-infinite-scroll/contributors.svg?width=890" /></a>
+
+
+### Backers
+
+Thank you to all our backers! [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]
+
+<a href="https://opencollective.com/ngx-infinite-scroll#backers" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/backers.svg?width=890"></a>
+
+
+### Sponsors
+
+Thank you to all our sponsors! (please ask your company to also support this open source project by [becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor))
+
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/9/avatar.svg"></a>
+
+<!-- This `CONTRIBUTING.md` is based on @nayafia's template https://github.com/nayafia/contributing-template -->
--- a/projects/ngx-infinite-scroll/Development
+++ b/projects/ngx-infinite-scroll/Development
@ -0,0 +1,25 @@
+# NgxInfiniteScroll
+
+This library was generated with [Angular CLI](https://github.com/angular/angular-cli) version 13.1.0.
+
+## Code scaffolding
+
+Run `ng generate component component-name --project ngx-infinite-scroll` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project ngx-infinite-scroll`.
+
+> Note: Don't forget to add `--project ngx-infinite-scroll` or else it will be added to the default project in your `angular.json` file.
+
+## Build
+
+Run `ng build ngx-infinite-scroll` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Publishing
+
+After building your library with `ng build ngx-infinite-scroll`, go to the dist folder `cd dist/ngx-infinite-scroll` and run `npm publish`.
+
+## Running unit tests
+
+Run `ng test ngx-infinite-scroll` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
--- a/projects/ngx-infinite-scroll/README.md
+++ b/projects/ngx-infinite-scroll/README.md
@ -0,0 +1,278 @@
+[![Build Status](https://travis-ci.org/orizens/ngx-infinite-scroll.svg?branch=master)](https://travis-ci.org/orizens/ngx-infinite-scroll) [![Backers on Open Collective](https://opencollective.com/ngx-infinite-scroll/backers/badge.svg)](#backers) [![Sponsors on Open Collective](https://opencollective.com/ngx-infinite-scroll/sponsors/badge.svg)](#sponsors)
+[![npm version](https://badge.fury.io/js/ngx-infinite-scroll.svg)](https://badge.fury.io/js/ngx-infinite-scroll)
+[![npm version](https://badge.fury.io/js/ngx-infinite-scroll.svg)](https://badge.fury.io/js/ngx-infinite-scroll)
+[![npm downloads a month](https://img.shields.io/npm/dm/ngx-infinite-scroll.svg)](https://img.shields.io/npm/dm/ngx-infinite-scroll.svg)
+[![npm downloads a week](https://img.shields.io/npm/dt/ngx-infinite-scroll.svg)](https://img.shields.io/npm/dt/ngx-infinite-scroll.svg)
+
+## [Consider Becoming a sponsor](https://opencollective.com/ngx-infinite-scroll#sponsor)
+
+# Angular Infinite Scroll
+
+versions now follow Angular's version to easily reflect compatibility.  
+Meaning, for **Angular 10**, use `ngx-infinite-scroll @ ^10.0.0`
+
+## Angular - Older Versions Support
+
+Starting **Angular 6 and Above** - `ngx-infinite-scroll@THE_VERSION.0.0`  
+For **Angular 4** and **Angular = ^5.5.6** - use version `ngx-infinite-scroll@0.8.4`  
+For **Angular 5.x** with **rxjs =<5.5.2** - use version `ngx-infinite-scroll@0.8.3`  
+For Angular version **<= 2.3.1**, you can use `npm i angular2-infinite-scroll` (latest version is 0.3.42) - please notice **the angular2-infinite-scroll** package is deprecated
+
+## Used By
+
+- [Google](https://google.com)
+- [Apple](https://apple.com)
+- [Amazon](https://amazon.com)
+- [Microsoft](https://microsoft.com)
+- [Disney](https://disney.com)
+- [Sap](https://sap.com/)
+- [Cisco](https://cisco.com/)
+- [Yandex](https://yandex.com)
+- [Ancestry](https://www.ancestry.com/)
+
+and much more.
+
+> _These analytics are made available via the awesome [Scarf](https://www.npmjs.com/package/@scarf/scarf) package analytics library_
+
+### Opt-Out Of Scarf
+
+Scarf can be disabled by following [these directions](https://github.com/orizens/ngx-infinite-scroll/issues/352#issuecomment-742009046)
+
+## Front End Consulting Services
+
+I'm a Senior Front End Engineer & Consultant at [Orizens](https://orizens.com).
+My services include:
+
+- Angular/React/Javascript Consulting
+- Front End Architecture Consulting
+- Project Code Review
+- Project Development
+
+[Contact Here](http://orizens.com/contact)
+
+<a href="https://orizens.com" target="_blank">
+  <img src="https://cloud.githubusercontent.com/assets/878660/23353771/d0adbd12-fcd6-11e6-96be-7a236f8819d9.png" alt="Webpack and Angular" width="20%"/>
+</a>
+
+## Installation
+
+```
+npm install ngx-infinite-scroll --save
+```
+
+## Supported API
+
+### Properties
+
+| @Input()                 | Type                 | Required | Default | Description                                                                                                                                                                                                                                                                                           |
+| ------------------------ | -------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| infiniteScrollDistance   | number               | optional | 2       | the bottom percentage point of the scroll nob relatively to the infinite-scroll container (i.e, 2 (2 \* 10 = 20%) is event is triggered when 80% (100% - 20%) has been scrolled). if container.height is 900px, when the container is scrolled to or past the 720px, it will fire the scrolled event. |
+| infiniteScrollUpDistance | number               | optional | 1.5     | should get a number                                                                                                                                                                                                                                                                                   |
+| infiniteScrollThrottle   | number               | optional | 150     | should get a number of **milliseconds** for throttle. The event will be triggered this many milliseconds after the user _stops_ scrolling.                                                                                                                                                            |
+| scrollWindow             | boolean              | optional | true    | listens to the window scroll instead of the actual element scroll. this allows to invoke a callback function in the scope of the element while listenning to the window scroll.                                                                                                                       |
+| immediateCheck           | boolean              | optional | false   | invokes the handler immediately to check if a scroll event has been already triggred when the page has been loaded (i.e. - when you refresh a page that has been scrolled)                                                                                                                            |
+| infiniteScrollDisabled   | boolean              | optional | false   | doesn't invoke the handler if set to true                                                                                                                                                                                                                                                             |
+| horizontal               | boolean              | optional | false   | sets the scroll to listen for horizontal events                                                                                                                                                                                                                                                       |
+| alwaysCallback           | boolean              | optional | false   | instructs the scroller to always trigger events                                                                                                                                                                                                                                                       |
+| infiniteScrollContainer  | string / HTMLElement | optional | null    | should get a html element or css selector for a scrollable element; window or current element will be used if this attribute is empty.                                                                                                                                                                |
+| fromRoot                 | boolean              | optional | false   | if **infiniteScrollContainer** is set, this instructs the scroller to query the container selector from the root of the **document** object.                                                                                                                                                          |
+
+### Events
+
+| @Output()  | Type         | Event Type           | Required | Description                                                                     |
+| ---------- | ------------ | -------------------- | -------- | ------------------------------------------------------------------------------- |
+| scrolled   | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll down. |
+| scrolledUp | EventEmitter | IInfiniteScrollEvent | optional | this will callback if the distance threshold has been reached on a scroll up.   |
+
+## Behavior
+
+By default, the directive listens to the **window scroll** event and invoked the callback.  
+**To trigger the callback when the actual element is scrolled**, these settings should be configured:
+
+- [scrollWindow]="false"
+- set an explict css "height" value to the element
+
+## DEMO
+
+[Try the Demo in StackBlitz](https://stackblitz.com/edit/ngx-infinite-scroll)
+
+## Usage
+
+First, import the InfiniteScrollModule to your module:
+
+```typescript
+import { NgModule } from "@angular/core";
+import { BrowserModule } from "@angular/platform-browser";
+import { InfiniteScrollModule } from "ngx-infinite-scroll";
+import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
+import { AppComponent } from "./app";
+
+@NgModule({
+  imports: [BrowserModule, InfiniteScrollModule],
+  declarations: [AppComponent],
+  bootstrap: [AppComponent],
+})
+export class AppModule {}
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+```
+
+In this example, the **onScroll** callback will be invoked when the window is scrolled down:
+
+```typescript
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app",
+  template: `
+    <div
+      class="search-results"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+    ></div>
+  `,
+})
+export class AppComponent {
+  onScroll() {
+    console.log("scrolled!!");
+  }
+}
+```
+
+in this example, whenever the "search-results" is scrolled, the callback will be invoked:
+
+```typescript
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app",
+  styles: [
+    `
+      .search-results {
+        height: 20rem;
+        overflow: scroll;
+      }
+    `,
+  ],
+  template: `
+    <div
+      class="search-results"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScroll()"
+      [scrollWindow]="false"
+    ></div>
+  `,
+})
+export class AppComponent {
+  onScroll() {
+    console.log("scrolled!!");
+  }
+}
+```
+
+In this example, the **onScrollDown** callback will be invoked when the window is scrolled down and the **onScrollUp** callback will be invoked when the window is scrolled up:
+
+```typescript
+import { Component } from "@angular/core";
+import { InfiniteScroll } from "ngx-infinite-scroll";
+
+@Component({
+  selector: "app",
+  directives: [InfiniteScroll],
+  template: `
+    <div
+      class="search-results"
+      infiniteScroll
+      [infiniteScrollDistance]="2"
+      [infiniteScrollUpDistance]="1.5"
+      [infiniteScrollThrottle]="50"
+      (scrolled)="onScrollDown()"
+      (scrolledUp)="onScrollUp()"
+    ></div>
+  `,
+})
+export class AppComponent {
+  onScrollDown() {
+    console.log("scrolled down!!");
+  }
+
+  onScrollUp() {
+    console.log("scrolled up!!");
+  }
+}
+```
+
+In this example, the **infiniteScrollContainer** attribute is used to point directive to the scrollable container using a css selector. **fromRoot** is used to determine whether the scroll container has to be searched within the whole document (`[fromRoot]="true"`) or just inside the **infiniteScroll** directive (`[fromRoot]="false"`, default option).
+
+```typescript
+import { Component } from "@angular/core";
+
+@Component({
+  selector: "app",
+  styles: [
+    `
+      .main-panel {
+        height: 100px;
+        overflow-y: scroll;
+      }
+    `,
+  ],
+  template: `
+    <div class="main-panel">
+      <div
+        infiniteScroll
+        [infiniteScrollDistance]="2"
+        [infiniteScrollThrottle]="50"
+        [infiniteScrollContainer]="selector"
+        [fromRoot]="true"
+        (scrolled)="onScroll()"
+      ></div>
+    </div>
+  `,
+})
+export class AppComponent {
+  selector: string = ".main-panel";
+
+  onScroll() {
+    console.log("scrolled!!");
+  }
+}
+```
+
+It is also possible to use **infiniteScrollContainer** without additional variable by using single quotes inside double quotes:
+
+```
+[infiniteScrollContainer]="'.main-panel'"
+```
+
+# Showcase Examples
+
+- [Echoes Player - Developed with Angular, angular-cli and ngrx](http://orizens.github.io/echoes-player) ([github repo for echoes player](http://github.com/orizens/echoes-player))
+
+## Contributors
+
+This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
+<a href="graphs/contributors"><img src="https://opencollective.com/ngx-infinite-scroll/contributors.svg?width=890" /></a>
+
+## Backers
+
+Thank you to all our backers! 🙏 [[Become a backer](https://opencollective.com/ngx-infinite-scroll#backer)]
+
+<a href="https://opencollective.com/ngx-infinite-scroll#backers" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/backers.svg?width=890"></a>
+
+## Sponsors
+
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/0/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/0/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/1/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/1/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/2/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/2/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/3/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/3/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/4/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/4/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/5/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/5/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/6/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/6/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/7/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/7/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/8/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/8/avatar.svg"></a>
+<a href="https://opencollective.com/ngx-infinite-scroll/sponsor/9/website" target="_blank"><img src="https://opencollective.com/ngx-infinite-scroll/sponsor/9/avatar.svg"></a>
--- a/projects/ngx-infinite-scroll/karma.conf.js
+++ b/projects/ngx-infinite-scroll/karma.conf.js
@ -0,0 +1,44 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      jasmine: {
+        // you can add configuration options for Jasmine here
+        // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
+        // for example, you can disable the random execution with `random: false`
+        // or set a specific seed with `seed: 4321`
+      },
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    jasmineHtmlReporter: {
+      suppressAll: true // removes the duplicated traces
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, '../../coverage/ngx-infinite-scroll'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};
--- a/projects/ngx-infinite-scroll/ng-package.json
+++ b/projects/ngx-infinite-scroll/ng-package.json
@ -0,0 +1,8 @@
+{
+  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
+  "dest": "../../dist/ngx-infinite-scroll",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  },
+  "allowedNonPeerDependencies": ["@scarf/@scarf"]
+}
--- a/projects/ngx-infinite-scroll/package.json
+++ b/projects/ngx-infinite-scroll/package.json
@ -0,0 +1,19 @@
+{
+  "name": "ngx-infinite-scroll",
+  "version": "13.0.1",
+  "scripts": {
+    "postinstall": "opencollective-postinstall || exit 0"
+  },
+  "peerDependencies": {
+    "@angular/common": "^13.1.0",
+    "@angular/core": "^13.1.0"
+  },
+  "dependencies": {
+    "tslib": "^2.3.0"
+  },
+  "collective": {
+    "type": "opencollective",
+    "url": "https://opencollective.com/ngx-infinite-scroll",
+    "logo": "https://opencollective.com/ngx-infinite-scroll/logo.txt"
+  }
+}
--- a/projects/ngx-infinite-scroll/src/lib/ngx-infinite-scroll.directive.ts
+++ b/projects/ngx-infinite-scroll/src/lib/ngx-infinite-scroll.directive.ts
@ -8,21 +8,25 @@ import {
  OnChanges,
  OnDestroy,
  Output,
-  SimpleChanges
+  SimpleChanges,
 } from '@angular/core';
-import { Subscription } from 'rxjs/Subscription';
+import { Subscription } from 'rxjs';

-import { InfiniteScrollEvent, IInfiniteScrollAction } from '../models';
-import { hasWindowDefined, inputPropChanged } from '../services/ngx-ins-utils';
-import { createScroller, InfiniteScrollActions } from '../services/scroll-register';
+import { IInfiniteScrollEvent, IInfiniteScrollAction } from '../models';
+import { hasWindowDefined, inputPropChanged } from './services/ngx-ins-utils';
+import {
+  createScroller,
+  InfiniteScrollActions,
+} from './services/scroll-register';

@Directive({
-  selector: '[infiniteScroll], [infinite-scroll], [data-infinite-scroll]'
+  selector: '[infiniteScroll], [infinite-scroll], [data-infinite-scroll]',
 })
 export class InfiniteScrollDirective
-  implements OnDestroy, OnChanges, AfterViewInit {
-  @Output() scrolled = new EventEmitter<InfiniteScrollEvent>();
-  @Output() scrolledUp = new EventEmitter<InfiniteScrollEvent>();
+  implements OnDestroy, OnChanges, AfterViewInit
+{
+  @Output() scrolled = new EventEmitter<IInfiniteScrollEvent>();
+  @Output() scrolledUp = new EventEmitter<IInfiniteScrollEvent>();

  @Input() infiniteScrollDistance: number = 2;
  @Input() infiniteScrollUpDistance: number = 1.5;
@ -35,9 +39,9 @@ export class InfiniteScrollDirective
  @Input() alwaysCallback: boolean = false;
  @Input() fromRoot: boolean = false;

-  private disposeScroller: Subscription;
+  private disposeScroller: Subscription | any;

-  constructor(private element: ElementRef, private zone: NgZone) { }
+  constructor(private element: ElementRef, private zone: NgZone) {}

  ngAfterViewInit() {
    if (!this.infiniteScrollDisabled) {
@ -45,12 +49,18 @@ export class InfiniteScrollDirective
    }
  }

-  ngOnChanges({ infiniteScrollContainer, infiniteScrollDisabled, infiniteScrollDistance }: SimpleChanges) {
+  ngOnChanges({
+    infiniteScrollContainer,
+    infiniteScrollDisabled,
+    infiniteScrollDistance,
+  }: SimpleChanges) {
    const containerChanged = inputPropChanged(infiniteScrollContainer);
    const disabledChanged = inputPropChanged(infiniteScrollDisabled);
    const distanceChanged = inputPropChanged(infiniteScrollDistance);
-    const shouldSetup = (!disabledChanged && !this.infiniteScrollDisabled) ||
-      (disabledChanged && !infiniteScrollDisabled.currentValue) || distanceChanged;
+    const shouldSetup =
+      (!disabledChanged && !this.infiniteScrollDisabled) ||
+      (disabledChanged && !infiniteScrollDisabled.currentValue) ||
+      distanceChanged;

    if (containerChanged || disabledChanged || distanceChanged) {
      this.destroyScroller();
@ -73,8 +83,10 @@ export class InfiniteScrollDirective
          scrollContainer: this.infiniteScrollContainer,
          scrollWindow: this.scrollWindow,
          throttle: this.infiniteScrollThrottle,
-          upDistance: this.infiniteScrollUpDistance
-        }).subscribe((payload: any) => this.zone.run(() => this.handleOnScroll(payload)));
+          upDistance: this.infiniteScrollUpDistance,
+        }).subscribe((payload: any) =>
+          this.zone.run(() => this.handleOnScroll(payload))
+        );
      });
    }
  }
--- a/projects/ngx-infinite-scroll/src/lib/ngx-infinite-scroll.module.ts
+++ b/projects/ngx-infinite-scroll/src/lib/ngx-infinite-scroll.module.ts
@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';

-import { InfiniteScrollDirective } from './infinite-scroll.directive';
+import { InfiniteScrollDirective } from './ngx-infinite-scroll.directive';

@NgModule({
  declarations: [InfiniteScrollDirective],
  exports: [InfiniteScrollDirective],
  imports: [],
-  providers: []
+  providers: [],
 })
-export class InfiniteScrollModule { }
+export class InfiniteScrollModule {}
--- a/projects/ngx-infinite-scroll/src/lib/ngx-infinite-scroll.service.spec.ts
+++ b/projects/ngx-infinite-scroll/src/lib/ngx-infinite-scroll.service.spec.ts
@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NgxInfiniteScrollService } from './ngx-infinite-scroll.service';
+
+describe('NgxInfiniteScrollService', () => {
+  let service: NgxInfiniteScrollService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(NgxInfiniteScrollService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});
--- a/projects/ngx-infinite-scroll/src/lib/ngx-infinite-scroll.service.ts
+++ b/projects/ngx-infinite-scroll/src/lib/ngx-infinite-scroll.service.ts
@ -0,0 +1,9 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class NgxInfiniteScrollService {
+
+  constructor() { }
+}
--- a/projects/ngx-infinite-scroll/src/lib/services/axis-resolver.ts
+++ b/projects/ngx-infinite-scroll/src/lib/services/axis-resolver.ts
@ -0,0 +1,48 @@
+const VerticalProps = {
+  clientHeight: "clientHeight",
+  offsetHeight: "offsetHeight",
+  scrollHeight: "scrollHeight",
+  pageYOffset: "pageYOffset",
+  offsetTop: "offsetTop",
+  scrollTop: "scrollTop",
+  top: "top"
+};
+
+const HorizontalProps = {
+  clientHeight: "clientWidth",
+  offsetHeight: "offsetWidth",
+  scrollHeight: "scrollWidth",
+  pageYOffset: "pageXOffset",
+  offsetTop: "offsetLeft",
+  scrollTop: "scrollLeft",
+  top: "left"
+};
+
+export class AxisResolver {
+  private propsMap: any;
+
+  constructor(private vertical: boolean = true) {
+    this.propsMap = vertical ? VerticalProps : HorizontalProps;
+  }
+  clientHeightKey() {
+    return this.propsMap.clientHeight;
+  }
+  offsetHeightKey() {
+    return this.propsMap.offsetHeight;
+  }
+  scrollHeightKey() {
+    return this.propsMap.scrollHeight;
+  }
+  pageYOffsetKey() {
+    return this.propsMap.pageYOffset;
+  }
+  offsetTopKey() {
+    return this.propsMap.offsetTop;
+  }
+  scrollTopKey() {
+    return this.propsMap.scrollTop;
+  }
+  topKey() {
+    return this.propsMap.top;
+  }
+}
--- a/projects/ngx-infinite-scroll/src/lib/services/event-trigger.ts
+++ b/projects/ngx-infinite-scroll/src/lib/services/event-trigger.ts
@ -1,9 +1,7 @@
-import { InfiniteScrollEvent, IPositionStats } from '../models';
+import { IInfiniteScrollEvent, IPositionStats } from '../../models';

-export interface IScrollerProps {
+export interface IScrollerProps extends IDistanceRange {
  container: IPositionStats;
-  down: number;
-  up: number;
  alwaysCallback: boolean;
  disabled: boolean;
 }
@ -26,6 +24,13 @@ export interface IScrollConfig {
 export function shouldTriggerEvents(
  alwaysCallback: boolean,
  shouldFireScrollEvent: boolean,
-  isTriggeredCurrentTotal: boolean) {
-  return (alwaysCallback || shouldFireScrollEvent) && !isTriggeredCurrentTotal;
+  isTriggeredCurrentTotal: boolean
+) {
+  if (alwaysCallback && shouldFireScrollEvent) {
+    return true;
+  }
+  if (!isTriggeredCurrentTotal && shouldFireScrollEvent) {
+    return true;
+  }
+  return false;
 }
--- a/projects/ngx-infinite-scroll/src/lib/services/ngx-ins-utils.ts
+++ b/projects/ngx-infinite-scroll/src/lib/services/ngx-ins-utils.ts
@ -1,4 +1,3 @@
-import * as console from 'console';
 import { ElementRef, SimpleChange } from '@angular/core';

 export function resolveContainerElement(
--- a/projects/ngx-infinite-scroll/src/lib/services/position-resolver.ts
+++ b/projects/ngx-infinite-scroll/src/lib/services/position-resolver.ts
@ -1,11 +1,16 @@
 import { ElementRef } from '@angular/core';

-import { ContainerRef, IPositionElements, IPositionStats, IResolver } from '../models';
+import {
+  ContainerRef,
+  IPositionElements,
+  IPositionStats,
+  IResolver,
+} from '../../models';
 import { AxisResolver } from './axis-resolver';

 export function createResolver({
  windowElement,
-  axis
+  axis,
 }: IPositionElements): IResolver {
  return createResolverWithContainer(
    { axis, isWindow: isElementWindow(windowElement) },
@ -14,7 +19,7 @@ export function createResolver({
 }

 export function createResolverWithContainer(
-  resolver,
+  resolver: any,
  windowElement: ContainerRef
 ) {
  const container =
@ -31,7 +36,10 @@ export function isElementWindow(windowElement: ContainerRef): boolean {
  return isWindow;
 }

-export function getDocumentElement(isContainerWindow: boolean, windowElement) {
+export function getDocumentElement(
+  isContainerWindow: boolean,
+  windowElement: any
+) {
  return isContainerWindow ? windowElement.document.documentElement : null;
 }

@ -67,7 +75,7 @@ export function calculatePointsForWindow(
  const totalToScroll =
    getElementOffsetTop(element.nativeElement, axis, isWindow) +
    nativeElementHeight;
-  return { height, scrolled, totalToScroll };
+  return { height, scrolled, totalToScroll, isWindow };
 }

 export function calculatePointsForElement(
@ -79,20 +87,20 @@ export function calculatePointsForElement(
  // perhaps use container.offsetTop instead of 'scrollTop'
  const scrolled = container[axis.scrollTopKey()];
  const totalToScroll = container[axis.scrollHeightKey()];
-  return { height, scrolled, totalToScroll };
+  return { height, scrolled, totalToScroll, isWindow: false };
 }

 export function extractHeightPropKeys(axis: AxisResolver) {
  return {
    offsetHeightKey: axis.offsetHeightKey(),
-    clientHeightKey: axis.clientHeightKey()
+    clientHeightKey: axis.clientHeightKey(),
  };
 }

 export function extractHeightForElement({
  container,
  isWindow,
-  axis
+  axis,
 }: IResolver) {
  const { offsetHeightKey, clientHeightKey } = extractHeightPropKeys(axis);
  return getElementHeight(
@ -109,7 +117,8 @@ export function getElementHeight(
  clientHeightKey: string
 ) {
  if (isNaN(elem[offsetHeightKey])) {
-    return getDocumentElement(isWindow, elem)[clientHeightKey];
+    const docElem = getDocumentElement(isWindow, elem);
+    return docElem ? docElem[clientHeightKey] : 0;
  } else {
    return elem[offsetHeightKey];
  }
@ -141,7 +150,7 @@ export function getElementPageYOffset(
  const scrollTop = axis.scrollTopKey();
  const offsetTop = axis.offsetTopKey();

-  if (isNaN(window[pageYOffset])) {
+  if (isNaN(window.pageYOffset)) {
    return getDocumentElement(isWindow, elem)[scrollTop];
  } else if (elem.ownerDocument) {
    return elem.ownerDocument.defaultView[pageYOffset];
--- a/projects/ngx-infinite-scroll/src/lib/services/scroll-register.ts
+++ b/projects/ngx-infinite-scroll/src/lib/services/scroll-register.ts
@ -0,0 +1,115 @@
+import { Observable, of, fromEvent } from 'rxjs';
+import { map, mergeMap, tap, throttleTime, filter } from 'rxjs/operators';
+
+import * as Models from '../../models';
+import { AxisResolver } from './axis-resolver';
+import { shouldTriggerEvents } from './event-trigger';
+import { resolveContainerElement } from './ngx-ins-utils';
+import { calculatePoints, createResolver } from './position-resolver';
+import * as ScrollResolver from './scroll-resolver';
+import { ScrollState } from './scroll-state';
+
+export function createScroller(config: Models.IScroller) {
+  const { scrollContainer, scrollWindow, element, fromRoot } = config;
+  const resolver = createResolver({
+    axis: new AxisResolver(!config.horizontal),
+    windowElement: resolveContainerElement(
+      scrollContainer,
+      scrollWindow,
+      element,
+      fromRoot
+    ),
+  });
+  const scrollState = new ScrollState({
+    totalToScroll: calculatePoints(element, resolver),
+  });
+  const options: Models.IScrollRegisterConfig = {
+    container: resolver.container,
+    throttle: config.throttle,
+  };
+  const distance = {
+    up: config.upDistance,
+    down: config.downDistance,
+  };
+  return attachScrollEvent(options).pipe(
+    mergeMap(() => of(calculatePoints(element, resolver))),
+    map((positionStats: Models.IPositionStats) =>
+      toInfiniteScrollParams(
+        scrollState.lastScrollPosition,
+        positionStats,
+        distance
+      )
+    ),
+    tap(({ stats }: Models.IScrollParams) =>
+      scrollState.updateScroll(stats.scrolled, stats.totalToScroll)
+    ),
+    filter(
+      ({ fire, scrollDown, stats: { totalToScroll } }: Models.IScrollParams) =>
+        shouldTriggerEvents(
+          config.alwaysCallback,
+          fire,
+          scrollState.isTriggeredScroll(totalToScroll, scrollDown)
+        )
+    ),
+    tap(({ scrollDown, stats: { totalToScroll } }: Models.IScrollParams) => {
+      scrollState.updateTriggeredFlag(totalToScroll, scrollDown);
+    }),
+    map(toInfiniteScrollAction)
+  );
+}
+
+export function attachScrollEvent(
+  options: Models.IScrollRegisterConfig
+): Observable<{}> {
+  let obs = fromEvent(options.container, 'scroll');
+  // For an unknown reason calling `sampleTime()` causes trouble for many users, even with `options.throttle = 0`.
+  // Let's avoid calling the function unless needed.
+  // Replacing with throttleTime seems to solve the problem
+  // See https://github.com/orizens/ngx-infinite-scroll/issues/198
+  if (options.throttle) {
+    obs = obs.pipe(
+      throttleTime(options.throttle, undefined, {
+        leading: true,
+        trailing: true,
+      })
+    );
+  }
+  return obs as any;
+}
+
+export function toInfiniteScrollParams(
+  lastScrollPosition: number,
+  stats: Models.IPositionStats,
+  distance: Models.IScrollerDistance
+): Models.IScrollParams {
+  const { scrollDown, fire } = ScrollResolver.getScrollStats(
+    lastScrollPosition,
+    stats,
+    distance
+  );
+  return {
+    scrollDown,
+    fire,
+    stats,
+  };
+}
+
+export const InfiniteScrollActions = {
+  DOWN: '[NGX_ISE] DOWN',
+  UP: '[NGX_ISE] UP',
+};
+
+export function toInfiniteScrollAction(
+  response: Models.IScrollParams
+): Models.IInfiniteScrollAction {
+  const {
+    scrollDown,
+    stats: { scrolled: currentScrollPosition },
+  } = response;
+  return {
+    type: scrollDown ? InfiniteScrollActions.DOWN : InfiniteScrollActions.UP,
+    payload: {
+      currentScrollPosition,
+    },
+  };
+}
--- a/projects/ngx-infinite-scroll/src/lib/services/scroll-resolver.ts
+++ b/projects/ngx-infinite-scroll/src/lib/services/scroll-resolver.ts
@ -1,19 +1,30 @@
-import { IPositionStats, IScrollState, IScrollerDistance } from '../models';
+import { IPositionStats, IScrollState, IScrollerDistance } from '../../models';

 export function shouldFireScrollEvent(
  container: IPositionStats,
-  distance: IScrollerDistance,
+  distance: IScrollerDistance = { down: 0, up: 0 },
  scrollingDown: boolean
 ) {
  let remaining: number;
  let containerBreakpoint: number;
-  const scrolledUntilNow = container.height + container.scrolled;
+  if (container.totalToScroll <= 0) {
+    return false;
+  }
+
+  const scrolledUntilNow = container.isWindow
+    ? container.scrolled
+    : container.height + container.scrolled;
  if (scrollingDown) {
-    remaining = (container.totalToScroll - scrolledUntilNow) / container.totalToScroll;
-    containerBreakpoint = distance.down / 10;
+    remaining =
+      (container.totalToScroll - scrolledUntilNow) / container.totalToScroll;
+    const distanceDown = distance?.down ? distance.down : 0;
+    containerBreakpoint = distanceDown / 10;
  } else {
-    remaining = scrolledUntilNow / container.totalToScroll;
-    containerBreakpoint = distance.up / 10;
+    const totalHiddenContentHeight =
+      container.scrolled + (container.totalToScroll - scrolledUntilNow);
+    remaining = container.scrolled / totalHiddenContentHeight;
+    const distanceUp = distance?.up ? distance.up : 0;
+    containerBreakpoint = distanceUp / 10;
  }

  const shouldFireEvent: boolean = remaining <= containerBreakpoint;
@ -35,15 +46,21 @@ export function getScrollStats(
  const scrollDown = isScrollingDownwards(lastScrollPosition, container);
  return {
    fire: shouldFireScrollEvent(container, distance, scrollDown),
-    scrollDown
+    scrollDown,
  };
 }

-export function updateScrollPosition(position: number, scrollState: IScrollState) {
+export function updateScrollPosition(
+  position: number,
+  scrollState: IScrollState
+) {
  return (scrollState.lastScrollPosition = position);
 }

-export function updateTotalToScroll(totalToScroll: number, scrollState: IScrollState) {
+export function updateTotalToScroll(
+  totalToScroll: number,
+  scrollState: IScrollState
+) {
  if (scrollState.lastTotalToScroll !== totalToScroll) {
    scrollState.lastTotalToScroll = scrollState.totalToScroll;
    scrollState.totalToScroll = totalToScroll;
@ -54,7 +71,12 @@ export function isSameTotalToScroll(scrollState: IScrollState) {
  return scrollState.totalToScroll === scrollState.lastTotalToScroll;
 }

-export function updateTriggeredFlag(scroll, scrollState: IScrollState, triggered: boolean, isScrollingDown: boolean) {
+export function updateTriggeredFlag(
+  scroll: number,
+  scrollState: IScrollState,
+  triggered: boolean,
+  isScrollingDown: boolean
+) {
  if (isScrollingDown) {
    scrollState.triggered.down = scroll;
  } else {
@ -62,14 +84,21 @@ export function updateTriggeredFlag(scroll, scrollState: IScrollState, triggered
  }
 }

-export function isTriggeredScroll(totalToScroll, scrollState: IScrollState, isScrollingDown: boolean) {
+export function isTriggeredScroll(
+  totalToScroll: number,
+  scrollState: IScrollState,
+  isScrollingDown: boolean
+) {
  return isScrollingDown
    ? scrollState.triggered.down === totalToScroll
    : scrollState.triggered.up === totalToScroll;
 }

 export function updateScrollState(
-  scrollState: IScrollState, scrolledUntilNow: number, totalToScroll: number) {
+  scrollState: IScrollState,
+  scrolledUntilNow: number,
+  totalToScroll: number
+) {
  updateScrollPosition(scrolledUntilNow, scrollState);
  updateTotalToScroll(totalToScroll, scrollState);
  // const isSameTotal = isSameTotalToScroll(scrollState);
--- a/projects/ngx-infinite-scroll/src/lib/services/scroll-state.ts
+++ b/projects/ngx-infinite-scroll/src/lib/services/scroll-state.ts
@ -0,0 +1,45 @@
+import { IScrollState, IScrollerDistance } from '../../models';
+
+export class ScrollState implements IScrollState {
+  lastScrollPosition = 0;
+  lastTotalToScroll = 0;
+  totalToScroll = 0;
+  triggered: IScrollerDistance = {
+    down: 0,
+    up: 0,
+  };
+
+  constructor({ totalToScroll }) {
+    this.totalToScroll = totalToScroll;
+  }
+
+  updateScrollPosition(position: number) {
+    return (this.lastScrollPosition = position);
+  }
+
+  updateTotalToScroll(totalToScroll: number) {
+    if (this.lastTotalToScroll !== totalToScroll) {
+      this.lastTotalToScroll = this.totalToScroll;
+      this.totalToScroll = totalToScroll;
+    }
+  }
+
+  updateScroll(scrolledUntilNow: number, totalToScroll: number) {
+    this.updateScrollPosition(scrolledUntilNow);
+    this.updateTotalToScroll(totalToScroll);
+  }
+
+  updateTriggeredFlag(scroll, isScrollingDown: boolean) {
+    if (isScrollingDown) {
+      this.triggered.down = scroll;
+    } else {
+      this.triggered.up = scroll;
+    }
+  }
+
+  isTriggeredScroll(totalToScroll, isScrollingDown: boolean) {
+    return isScrollingDown
+      ? this.triggered.down === totalToScroll
+      : this.triggered.up === totalToScroll;
+  }
+}
--- a/projects/ngx-infinite-scroll/src/models.ts
+++ b/projects/ngx-infinite-scroll/src/models.ts
@ -2,7 +2,7 @@ import { ElementRef } from '@angular/core';

 export type ContainerRef = Window | ElementRef | any;

-export interface InfiniteScrollEvent {
+export interface IInfiniteScrollEvent {
  currentScrollPosition: number;
 }

@ -15,6 +15,7 @@ export interface IPositionStats {
  height: number;
  scrolled: number;
  totalToScroll: number;
+  isWindow?: boolean;
 }
 export interface IScrollerDistance {
  down?: number;
@ -24,10 +25,7 @@ export interface IScrollerDistance {
 export interface IScrollState {
  lastTotalToScroll: number;
  totalToScroll: number;
-  triggered: {
-    down: number;
-    up: number;
-  };
+  triggered: IScrollerDistance;
  lastScrollPosition: number;
 }

@ -63,5 +61,5 @@ export interface IScrollParams {

 export interface IInfiniteScrollAction {
  type: string;
-  payload: InfiniteScrollEvent;
+  payload: IInfiniteScrollEvent;
 }
--- a/projects/ngx-infinite-scroll/src/public-api.ts
+++ b/projects/ngx-infinite-scroll/src/public-api.ts
@ -0,0 +1,14 @@
+/*
+ * Public API Surface of ngx-infinite-scroll
+ */
+
+export * from './lib/ngx-infinite-scroll.service';
+export { InfiniteScrollDirective } from './lib/ngx-infinite-scroll.directive';
+export { InfiniteScrollModule } from './lib/ngx-infinite-scroll.module';
+export {
+  ContainerRef,
+  IInfiniteScrollEvent,
+  IPositionElements,
+  IPositionStats,
+  IResolver,
+} from './models';
--- a/projects/ngx-infinite-scroll/src/test.ts
+++ b/projects/ngx-infinite-scroll/src/test.ts
@ -0,0 +1,27 @@
+// This file is required by karma.conf.js and loads recursively all the .spec and framework files
+
+import 'zone.js';
+import 'zone.js/testing';
+import { getTestBed } from '@angular/core/testing';
+import {
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting
+} from '@angular/platform-browser-dynamic/testing';
+
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    <T>(id: string): T;
+    keys(): string[];
+  };
+};
+
+// First, initialize the Angular testing environment.
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting(),
+);
+
+// Then we find all the tests.
+const context = require.context('./', true, /\.spec\.ts$/);
+// And load the modules.
+context.keys().map(context);
--- a/projects/ngx-infinite-scroll/src/tests/WORK_IN_PROGRESS.md
+++ b/projects/ngx-infinite-scroll/src/tests/WORK_IN_PROGRESS.md
--- a/projects/ngx-infinite-scroll/src/tests/modules/infinite-scroll.directive.spec.ts
+++ b/projects/ngx-infinite-scroll/src/tests/modules/infinite-scroll.directive.spec.ts
--- a/projects/ngx-infinite-scroll/src/tests/services/event-trigger.spec.ts
+++ b/projects/ngx-infinite-scroll/src/tests/services/event-trigger.spec.ts
@ -1,4 +1,7 @@
-import { IScrollerProps, shouldTriggerEvents } from '../../src/services/event-trigger';
+import {
+  IScrollerProps,
+  shouldTriggerEvents
+} from '../../src/services/event-trigger';

 const props = {
  alwaysCallback: true,
@ -10,24 +13,6 @@ const props = {

 describe('EventTrigger', () => {
  [
-    {
-      it: 'should return TRUE when alwaysCallback',
-      params: {
-        alwaysCallback: true,
-        shouldFireScrollEvent: false,
-        isTriggeredTotal: false
-      },
-      expected: true
-    },
-    {
-      it: 'should return FALSE when alwaysCallback, isTriggeredTotal',
-      params: {
-        alwaysCallback: true,
-        shouldFireScrollEvent: false,
-        isTriggeredTotal: true
-      },
-      expected: false
-    },
    {
      it: 'should return TRUE when alwaysCallback, shouldFireScrollEvent',
      params: {
@ -38,13 +23,32 @@ describe('EventTrigger', () => {
      expected: true
    },
    {
-      it: 'should return FALSE when alwaysCallback, shouldFireScrollEvent, isTriggeredTotal',
+      it: 'should return FALSE when alwaysCallback, NOT shouldFireScrollEvent',
+      params: {
+        alwaysCallback: true,
+        shouldFireScrollEvent: false,
+        isTriggeredTotal: true
+      },
+      expected: false
+    },
+    {
+      it: 'should return FALSE when alwaysCallback',
+      params: {
+        alwaysCallback: true,
+        shouldFireScrollEvent: false,
+        isTriggeredTotal: false
+      },
+      expected: false
+    },
+    {
+      it:
+        'should return TRUE when alwaysCallback, shouldFireScrollEvent, isTriggeredTotal',
      params: {
        alwaysCallback: true,
        shouldFireScrollEvent: true,
        isTriggeredTotal: true
      },
-      expected: false
+      expected: true
    },
    {
      it: 'should return TRUE when shouldFireScrollEvent ONLY',
@ -65,7 +69,8 @@ describe('EventTrigger', () => {
      expected: false
    },
    {
-      it: 'should return FALSE when not alwaysCallback, shouldFireScrollEvent is false',
+      it:
+        'should return FALSE when not alwaysCallback, shouldFireScrollEvent is false',
      params: {
        alwaysCallback: false,
        shouldFireScrollEvent: false,
@ -82,10 +87,18 @@ describe('EventTrigger', () => {
      },
      expected: false
    }
-  ].forEach((spec) => {
+  ].forEach(spec => {
    it(spec.it, () => {
-      const { isTriggeredTotal, alwaysCallback, shouldFireScrollEvent } = spec.params;
-      const actual = shouldTriggerEvents(alwaysCallback, shouldFireScrollEvent, isTriggeredTotal);
+      const {
+        isTriggeredTotal,
+        alwaysCallback,
+        shouldFireScrollEvent
+      } = spec.params;
+      const actual = shouldTriggerEvents(
+        alwaysCallback,
+        shouldFireScrollEvent,
+        isTriggeredTotal
+      );
      expect(actual).toBe(spec.expected);
    });
  });
--- a/projects/ngx-infinite-scroll/src/tests/services/position-resolver.spec.ts
+++ b/projects/ngx-infinite-scroll/src/tests/services/position-resolver.spec.ts
@ -1,20 +1,23 @@
-import { ElementRef } from '@angular/core';
+import { ElementRef } from "@angular/core";

-import { ContainerRef } from '../../src/models';
-import { AxisResolver } from '../../src/services/axis-resolver';
-import { createResolver, createResolverWithContainer } from '../../src/services/position-resolver';
+import { ContainerRef } from "../../src/models";
+import { AxisResolver } from "../../src/services/axis-resolver";
+import {
+  createResolver,
+  createResolverWithContainer
+} from "../../src/services/position-resolver";

-describe('Position Resolver', () => {
+describe("Position Resolver", () => {
  let mockedElement: ElementRef;
  let mockedContainer: ElementRef;
  let axis: AxisResolver;
  let mockDom: ContainerRef;

  const createMockDom = () => {
-    const container = document.createElement('section');
-    container.setAttribute('style', 'height: 500px; overflow-y: scroll');
-    const el = document.createElement('div');
-    el.setAttribute('style', 'height: 1000px;');
+    const container = document.createElement("section");
+    container.setAttribute("style", "height: 500px; overflow-y: scroll");
+    const el = document.createElement("div");
+    el.setAttribute("style", "height: 1000px;");
    container.appendChild(el);
    mockedElement = new ElementRef(el);
    mockedContainer = new ElementRef(container);
@ -26,16 +29,16 @@ describe('Position Resolver', () => {
    mockDom = createMockDom();
  });

-  describe('Resolver Maker', () => {
-    it('should create an instance of position resolver', () => {
+  describe("Resolver Maker", () => {
+    it("should create an instance of position resolver", () => {
      const actual = createResolver({
        axis,
-        windowElement: mockDom.element,
+        windowElement: mockDom.element
      });
      expect(actual).toBeDefined();
    });

-    it('should return the native element if container is not window', () => {
+    it("should return the native element if container is not window", () => {
      mockDom.element.nativeElement = { mocked: true };
      const resolver = createResolverWithContainer(
        {
--- a/projects/ngx-infinite-scroll/src/tests/services/scroll-register.spec.ts
+++ b/projects/ngx-infinite-scroll/src/tests/services/scroll-register.spec.ts
@ -1,12 +1,7 @@
 import * as Models from '../../src/models';
-import { Observable } from 'rxjs/Observable';
-import {
-  async,
-  inject
-} from '@angular/core/testing';
+import { Observable } from 'rxjs';
 import * as ScrollRegister from '../../src/services/scroll-register';
 import * as ScrollResolver from '../../src/services/scroll-resolver';
-import * as EventTrigger from '../../src/services/event-trigger';
 import { ElementRef } from '@angular/core';

 describe('Scroll Regsiter', () => {
--- a/projects/ngx-infinite-scroll/src/tests/services/scroll-resolver.spec.ts
+++ b/projects/ngx-infinite-scroll/src/tests/services/scroll-resolver.spec.ts
@ -0,0 +1,192 @@
+import * as Models from '../../src/models';
+import * as ScrollResolver from '../../src/services/scroll-resolver';
+
+describe('Manage Scroll State', () => {
+  it('should backup old Total and update the new one', () => {
+    const state = {
+      totalToScroll: 10,
+      lastTotalToScroll: 0
+    } as any;
+    const newTotal = 20;
+    ScrollResolver.updateTotalToScroll(newTotal, state);
+    const actual = state.totalToScroll;
+    const expected = newTotal;
+    expect(actual).toEqual(expected);
+  });
+
+  it('should return false when total != lastTotal', () => {
+    const state = {
+      totalToScroll: 10,
+      lastTotalToScroll: 0
+    } as any;
+    const actual = ScrollResolver.isSameTotalToScroll(state);
+    expect(actual).toBeFalsy();
+  });
+
+  it('should return true total = lastTotal', () => {
+    const state = {
+      totalToScroll: 10,
+      lastTotalToScroll: 10
+    } as any;
+    const actual = ScrollResolver.isSameTotalToScroll(state);
+    expect(actual).toBeTruthy();
+  });
+
+  [
+    {
+      it: 'should set the triggered to down',
+      down: true,
+      state: {
+        triggered: { down: 0 }
+      } as Models.IScrollState,
+      prop: 'down'
+    },
+    {
+      it: 'should set the triggered to up',
+      down: false,
+      state: {
+        triggered: { up: 0 }
+      } as Models.IScrollState,
+      prop: 'up'
+    }
+  ].forEach(spec => {
+    it(spec.it, () => {
+      const total = 1000;
+      ScrollResolver.updateTriggeredFlag(total, spec.state, true, spec.down);
+      const actual = spec.state.triggered[spec.prop];
+      expect(actual).toBe(total);
+    });
+  });
+
+  describe('shouldFireScrollEvent() - DOWN', () => {
+    const distance: Models.IScrollerDistance = {
+      down: 2
+    };
+    const scrollingDown = true;
+    it('should scroll when scrolled to the up', () => {
+      const container: Models.IPositionStats = {
+        height: 500,
+        scrolled: 400,
+        totalToScroll: 900
+      };
+      const actual = ScrollResolver.shouldFireScrollEvent(
+        container,
+        distance,
+        scrollingDown
+      );
+      const expected = true;
+      expect(actual).toBe(expected);
+    });
+
+    it('should NOT scroll when NOT scroll pass distance point', () => {
+      const container: Models.IPositionStats = {
+        height: 500,
+        scrolled: 100,
+        totalToScroll: 800
+      };
+      const actual = ScrollResolver.shouldFireScrollEvent(
+        container,
+        distance,
+        scrollingDown
+      );
+      const expected = false;
+      expect(actual).toBe(expected);
+    });
+
+    it('should NOT scroll when NOT scroll pass distance point', () => {
+      const container: Models.IPositionStats = {
+        height: 500,
+        scrolled: 0,
+        totalToScroll: 800
+      };
+      const actual = ScrollResolver.shouldFireScrollEvent(
+        container,
+        distance,
+        scrollingDown
+      );
+      const expected = false;
+      expect(actual).toBe(expected);
+    });
+
+    it('should NOT scroll when there is no scrollbar', () => {
+      const container: Models.IPositionStats = {
+        height: 500,
+        scrolled: 0,
+        totalToScroll: 0
+      };
+      const actual = ScrollResolver.shouldFireScrollEvent(
+        container,
+        distance,
+        scrollingDown
+      );
+      const expected = false;
+      expect(actual).toBe(expected);
+    });
+  });
+
+  describe('shouldFireScrollEvent() - UP', () => {
+    const distance: Models.IScrollerDistance = {
+      up: 2
+    };
+    const scrollingDown = false;
+    it('should scroll when scrolled upwards', () => {
+      const container: Models.IPositionStats = {
+        height: 500,
+        scrolled: 50,
+        totalToScroll: 900
+      };
+      const actual = ScrollResolver.shouldFireScrollEvent(
+        container,
+        distance,
+        scrollingDown
+      );
+      const expected = true;
+      expect(actual).toBe(expected);
+    });
+
+    it('should NOT scroll when scroll NOT pass up distance point', () => {
+      const container: Models.IPositionStats = {
+        height: 500,
+        scrolled: 200,
+        totalToScroll: 800
+      };
+      const actual = ScrollResolver.shouldFireScrollEvent(
+        container,
+        distance,
+        scrollingDown
+      );
+      const expected = false;
+      expect(actual).toBe(expected);
+    });
+
+    it('should scroll when at top zero point', () => {
+      const container: Models.IPositionStats = {
+        height: 500,
+        scrolled: 0,
+        totalToScroll: 800
+      };
+      const actual = ScrollResolver.shouldFireScrollEvent(
+        container,
+        distance,
+        scrollingDown
+      );
+      const expected = true;
+      expect(actual).toBe(expected);
+    });
+
+    it('should NOT scroll when there is no scrollbar', () => {
+      const container: Models.IPositionStats = {
+        height: 500,
+        scrolled: 0,
+        totalToScroll: 0
+      };
+      const actual = ScrollResolver.shouldFireScrollEvent(
+        container,
+        distance,
+        scrollingDown
+      );
+      const expected = false;
+      expect(actual).toBe(expected);
+    });
+  });
+});
--- a/projects/ngx-infinite-scroll/tsconfig.lib.json
+++ b/projects/ngx-infinite-scroll/tsconfig.lib.json
@ -0,0 +1,16 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/lib",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": [],
+    "noImplicitAny": false,
+  },
+  "exclude": [
+    "src/test.ts",
+    "**/*.spec.ts"
+  ]
+}
--- a/projects/ngx-infinite-scroll/tsconfig.lib.prod.json
+++ b/projects/ngx-infinite-scroll/tsconfig.lib.prod.json
@ -0,0 +1,10 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {
+    "compilationMode": "partial"
+  }
+}
--- a/projects/ngx-infinite-scroll/tsconfig.spec.json
+++ b/projects/ngx-infinite-scroll/tsconfig.spec.json
@ -0,0 +1,17 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../out-tsc/spec",
+    "types": [
+      "jasmine"
+    ]
+  },
+  "files": [
+    "src/test.ts"
+  ],
+  "include": [
+    "**/*.spec.ts",
+    "**/*.d.ts"
+  ]
+}
--- a/public_api.ts
+++ b/public_api.ts
@ -1,13 +0,0 @@
-/**
- * Angular library starter.
- * Build an Angular library compatible with AoT compilation & Tree shaking.
- * Written by Roberto Simonetti.
- * MIT license.
- * https://github.com/robisim74/angular-library-starter
- */
-
-/**
- * Entry point for all public APIs of the package.
- */
-export * from './src/ngx-infinite-scroll';
-
--- a/rollup.config.js
+++ b/rollup.config.js
@ -1,20 +0,0 @@
-export default {
-    entry: './dist/modules/ngx-infinite-scroll.es5.js',
-    dest: './dist/bundles/ngx-infinite-scroll.umd.js',
-    format: 'umd',
-    exports: 'named',
-    moduleName: 'ng.ngxInfiniteScroll',
-    external: [
-        '@angular/core',
-        '@angular/common',
-        'rxjs/Observable',
-        'rxjs/Observer'
-    ],
-    globals: {
-        '@angular/core': 'ng.core',
-        '@angular/common': 'ng.common',
-        'rxjs/Observable': 'Rx',
-        'rxjs/Observer': 'Rx'
-    },
-    onwarn: () => { return }
-}
--- a/scripts/map-sources.js
+++ b/scripts/map-sources.js
@ -1,9 +0,0 @@
-const sorcery = require('sorcery');
-
-var argv = require('yargs')
-  .alias('f', 'file')
-  .argv;
-
-sorcery.load(argv.file).then(function(chain) {
-  chain.write();
-});
--- a/spec.bundle.js
+++ b/spec.bundle.js
@ -1,28 +0,0 @@
-Error.stackTraceLimit = Infinity;
-
-require('core-js');
-require('ts-helpers');
-require('zone.js/dist/zone');
-require('zone.js/dist/long-stack-trace-zone');
-require('zone.js/dist/proxy');
-require('zone.js/dist/sync-test');
-require('zone.js/dist/jasmine-patch');
-require('zone.js/dist/async-test');
-require('zone.js/dist/fake-async-test');
-require('rxjs/Rx');
-
-var testing = require('@angular/core/testing');
-var browser = require('@angular/platform-browser-dynamic/testing');
-
-testing.TestBed.initTestEnvironment(
-    browser.BrowserDynamicTestingModule,
-    browser.platformBrowserDynamicTesting()
-);
-
-var testContext = require.context('./tests', true, /\.spec\.ts/);
-
-function requireAll(requireContext) {
-    return requireContext.keys().map(requireContext);
-}
-
-var modules = requireAll(testContext);
--- a/src/ngx-infinite-scroll.ts
+++ b/src/ngx-infinite-scroll.ts
@ -1,11 +0,0 @@
-// Public classes.
-export {
-  ContainerRef,
-  InfiniteScrollEvent,
-  IPositionElements,
-  IPositionStats,
-  IResolver
-} from './models';
-
-export { InfiniteScrollDirective } from './modules/infinite-scroll.directive';
-export { InfiniteScrollModule } from './modules/ngx-infinite-scroll.module';
--- a/src/services/axis-resolver.ts
+++ b/src/services/axis-resolver.ts
@ -1,11 +0,0 @@
-export class AxisResolver {
-  constructor(private vertical: boolean = true) {
-  }
-  clientHeightKey() { return this.vertical ? 'clientHeight' : 'clientWidth'; }
-  offsetHeightKey() { return this.vertical ? 'offsetHeight' : 'offsetWidth'; }
-  scrollHeightKey() { return this.vertical ? 'scrollHeight' : 'scrollWidth'; }
-  pageYOffsetKey() { return this.vertical ? 'pageYOffset' : 'pageXOffset'; }
-  offsetTopKey() { return this.vertical ? 'offsetTop' : 'offsetLeft'; }
-  scrollTopKey() { return this.vertical ? 'scrollTop' : 'scrollLeft'; }
-  topKey() { return this.vertical ? 'top' : 'left'; }
-}
--- a/src/services/scroll-register.ts
+++ b/src/services/scroll-register.ts
@ -1,106 +0,0 @@
-import 'rxjs/add/observable/fromEvent';
-import 'rxjs/add/observable/of';
-import 'rxjs/add/operator/filter';
-import 'rxjs/add/operator/mergeMap';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/do';
-import 'rxjs/add/operator/sampleTime';
-
-import { ElementRef } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import { map } from 'rxjs/operator/map';
-import { of } from 'rxjs/observable/of';
-
-import * as Models from '../models';
-import { AxisResolver } from './axis-resolver';
-import { shouldTriggerEvents, IScrollConfig } from './event-trigger';
-import { resolveContainerElement } from './ngx-ins-utils';
-import { calculatePoints, createResolver } from './position-resolver';
-import * as ScrollResolver from './scroll-resolver';
-
-export function createScroller(config: Models.IScroller) {
-  const { scrollContainer, scrollWindow, element, fromRoot } = config;
-  const resolver = createResolver({
-    axis: new AxisResolver(!config.horizontal),
-    windowElement: resolveContainerElement(scrollContainer, scrollWindow, element, fromRoot)
-  });
-  const { totalToScroll: startWithTotal } = calculatePoints(element, resolver);
-  const scrollState: Models.IScrollState = {
-    lastScrollPosition: 0,
-    lastTotalToScroll: 0,
-    totalToScroll: startWithTotal,
-    triggered: {
-      down: 0,
-      up: 0
-    }
-  };
-  const options: Models.IScrollRegisterConfig = {
-    container: resolver.container,
-    throttle: config.throttle
-  };
-  const distance = {
-    up: config.upDistance,
-    down: config.downDistance
-  };
-  return attachScrollEvent(options)
-    .mergeMap((ev: any) => of(calculatePoints(element, resolver)))
-    .map((positionStats: Models.IPositionStats) =>
-      toInfiniteScrollParams(scrollState.lastScrollPosition, positionStats, distance))
-    .do(({ stats, scrollDown }: Models.IScrollParams) =>
-      ScrollResolver.updateScrollState(
-        scrollState,
-        stats.scrolled,
-        stats.totalToScroll,
-      ))
-    .filter(({ fire, scrollDown, stats: { totalToScroll } }: Models.IScrollParams) =>
-      shouldTriggerEvents(
-        fire, config.alwaysCallback, ScrollResolver.isTriggeredScroll(totalToScroll, scrollState, scrollDown))
-    )
-    .do(({ scrollDown, stats: { totalToScroll } }: Models.IScrollParams) => {
-      ScrollResolver.updateTriggeredFlag(totalToScroll, scrollState, true, scrollDown);
-    })
-    .map(toInfiniteScrollAction);
-}
-
-export function attachScrollEvent(options: Models.IScrollRegisterConfig): Observable<{}> {
-  let obs = Observable.fromEvent(options.container, 'scroll');
-  // For an unknown reason calling `sampleTime()` causes trouble for many users, even with `options.throttle = 0`.
-  // Let's avoid calling the function unless needed.
-  // See https://github.com/orizens/ngx-infinite-scroll/issues/198
-  if (options.throttle) {
-    obs = obs.sampleTime(options.throttle);
-  }
-  return obs;
-}
-
-export function toInfiniteScrollParams(
-  lastScrollPosition: number,
-  stats: Models.IPositionStats,
-  distance: Models.IScrollerDistance
-): Models.IScrollParams {
-  const { scrollDown, fire } = ScrollResolver.getScrollStats(
-    lastScrollPosition,
-    stats,
-    distance
-  );
-  return {
-    scrollDown,
-    fire,
-    stats
-  };
-}
-
-export const InfiniteScrollActions = {
-  DOWN: '[NGX_ISE] DOWN',
-  UP: '[NGX_ISE] UP'
-};
-
-export function toInfiniteScrollAction(response: Models.IScrollParams): Models.IInfiniteScrollAction {
-  const { scrollDown, stats: { scrolled: currentScrollPosition } } = response;
-  return {
-    type: scrollDown ? InfiniteScrollActions.DOWN : InfiniteScrollActions.UP,
-    payload: {
-      currentScrollPosition
-    }
-  };
-}
--- a/tests/services/scroll-resolver.spec.ts
+++ b/tests/services/scroll-resolver.spec.ts
@ -1,60 +0,0 @@
-import * as Models from '../../src/models';
-import * as ScrollResolver from '../../src/services/scroll-resolver';
-
-describe('Manage Scroll State', () => {
-  it('should backup old Total and update the new one', () => {
-    const state = {
-      totalToScroll: 10,
-      lastTotalToScroll: 0
-    } as any;
-    const newTotal = 20;
-    ScrollResolver.updateTotalToScroll(newTotal, state);
-    const actual = state.totalToScroll;
-    const expected = newTotal;
-    expect(actual).toEqual(expected);
-  });
-
-  it('should return false when total != lastTotal', () => {
-    const state = {
-      totalToScroll: 10,
-      lastTotalToScroll: 0
-    } as any;
-    const actual = ScrollResolver.isSameTotalToScroll(state);
-    expect(actual).toBeFalsy();
-  });
-
-  it('should return true total = lastTotal', () => {
-    const state = {
-      totalToScroll: 10,
-      lastTotalToScroll: 10
-    } as any;
-    const actual = ScrollResolver.isSameTotalToScroll(state);
-    expect(actual).toBeTruthy();
-  });
-
-  [
-    {
-      it: 'should set the triggered to down',
-      down: true,
-      state: {
-        triggered: { down: 0 }
-      } as Models.IScrollState,
-      prop: 'down'
-    },
-    {
-      it: 'should set the triggered to up',
-      down: false,
-      state: {
-        triggered: { up: 0 }
-      } as Models.IScrollState,
-      prop: 'up'
-    }
-  ].forEach((spec) => {
-    it(spec.it, () => {
-      const total = 1000;
-      ScrollResolver.updateTriggeredFlag(total, spec.state, true, spec.down);
-      const actual = spec.state.triggered[spec.prop];
-      expect(actual).toBe(total);
-    });
-  });
-});
--- a/tsconfig-build.json
+++ b/tsconfig-build.json
@ -1,35 +0,0 @@
-{
-  "compilerOptions": {
-    "baseUrl": ".",
-    "declaration": true,
-    "experimentalDecorators": true,
-    "module": "es2015",
-    "moduleResolution": "node",
-    "outDir": "dist",
-    "rootDir": ".",
-    "sourceMap": true,
-    "inlineSources": false,
-    "target": "es2015",
-    "skipLibCheck": true,
-    "lib": [
-      "es2015",
-      "dom"
-    ]
-  },
-  "exclude": [
-    "node_modules",
-    "example",
-    "examples",
-    "dist"
-],
-  "files": [
-    "public_api.ts"
-  ],
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "annotateForClosureCompiler": true,
-    "strictMetadataEmit": true,
-    "flatModuleOutFile": "ngx-infinite-scroll.js",
-    "flatModuleId": "ngx-infinite-scroll"
-  }
-}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,30 +1,38 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-    "compilerOptions": {
-        "baseUrl": ".",
-        "emitDecoratorMetadata": true,
-        "experimentalDecorators": true,
-        "module": "commonjs",
-        "moduleResolution": "node",
-        "noImplicitAny": false,
-        "noFallthroughCasesInSwitch": true,
-        "sourceMap": true,
-        "rootDir": ".",
-        "inlineSources": true,
-        "lib": [
-            "es6",
-            "dom"
-        ],
-        "target": "es5",
-        "skipLibCheck": true,
-        "types": [
-            "jasmine",
-            "node"
-        ]
+  "compileOnSave": false,
+  "compilerOptions": {
+    "baseUrl": "./",
+    "outDir": "./dist/out-tsc",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "sourceMap": true,
+    "paths": {
+      "ngx-infinite-scroll": [
+        "dist/ngx-infinite-scroll/ngx-infinite-scroll",
+        "dist/ngx-infinite-scroll"
+      ]
    },
-    "exclude": [
-        "node_modules",
-        "example",
-        "examples",
-        "dist"
+    "declaration": false,
+    "downlevelIteration": true,
+    "experimentalDecorators": true,
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "target": "es2017",
+    "module": "es2020",
+    "lib": [
+      "es2020",
+      "dom"
    ]
-}
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  }
+}
--- a/tslint.json
+++ b/tslint.json
@ -1,50 +0,0 @@
-{
-    "extends": "tslint:recommended",
-    "rulesDirectory": [
-        "node_modules/codelyzer"
-    ],
-    "rules": {
-        "directive-selector": [
-            true,
-            "attribute",
-            "camelCase"
-        ],
-        "component-selector": [
-            true,
-            "element",
-            "kebab-case"
-        ],
-        "use-input-property-decorator": true,
-        "use-output-property-decorator": true,
-        "use-host-property-decorator": true,
-        "no-attribute-parameter-decorator": true,
-        "no-input-rename": true,
-        "no-output-rename": true,
-        "no-forward-ref": true,
-        "use-life-cycle-interface": true,
-        "use-pipe-transform-interface": true,
-        "no-unused-expression": true,        
-        "component-class-suffix": [
-            true,
-            "Component"
-        ],
-        "directive-class-suffix": [
-            true,
-            "Directive"
-        ],
-        "templates-use-public": true,
-        "no-access-missing-member": true,
-        "object-literal-sort-keys": false,
-        "invoke-injectable": true,
-        "ordered-imports": [
-            false
-        ],
-        "quotemark": [
-            false
-        ],
-        "trailing-comma": [
-            false
-        ],
-        "member-access": [false, "check-accessor"]
-    }
-}
Author	SHA1	Message	Date
Mathieu Paquette	dbe5298351	chore: add license info (#402 ) closes #401	2022-05-06 09:39:23 -04:00
Oren Farhi	692c46e59d	remove: v10	2022-03-29 13:59:15 -04:00
Oren Farhi	f959ccf448	feature(ng13): add v13	2022-03-28 12:00:51 -04:00
Oren Farhi	8000cfea8a	chore: backup v10	2022-03-28 11:59:57 -04:00
Oren Farhi	dc16ccdf52	update: add message to opt-out of scarf	2020-12-09 15:36:29 -05:00
Oren Farhi	ede3f5443b	RELEASE: v10.0.1	2020-12-09 09:58:21 -05:00
Fábio Carneiro	abc8312cdd	Fix sampleTime not firing any event (#369 )	2020-12-09 09:43:26 -05:00
Oren Farhi	1cdd7df032	[RELEASE]: v10.0.0	2020-11-07 15:30:23 -05:00
Abhishek Datta	e5eef1405f	feat: upgrade to angular10 (#368 ) * feat: update angular to 10.x * chore: update angular to 10.x in examples dir	2020-11-07 15:08:38 -05:00
Oren Farhi	3eec84a9d9	release: v9.1.0	2020-09-09 19:50:43 +03:00
Oren Farhi	edebdf1327	update: add compodoc as ghpages	2020-09-09 19:46:59 +03:00
Avi Press	b0e3c0c59b	chore(dependencies) Bump scarf-js version to 1.1.0 (#363 )	2020-09-09 12:46:29 -04:00
Oren Farhi	f3eaf76279	chore(cleanup): remove ivy dir	2020-06-02 11:23:02 -04:00
Oren Farhi	7fc4390ebe	docs(readme): typoe	2020-05-12 20:57:05 -04:00
Oren Farhi	5435ca9224	release: v9.0.0	2020-05-12 20:55:14 -04:00
Santosh Yadav	ead8568e34	[Release]: update to angular 9 * feat: update to angular 9 (#351) * feat: make example app work	2020-05-12 20:25:14 -04:00
Oren Farhi	9cdbddd547	fix(ci): travis build failure	2020-05-04 10:14:17 -04:00
Oren Farhi	76218ee86d	release(chore): add scraf	2020-04-10 18:23:30 -04:00
Oren Farhi	01fc81baad	update changelog	2019-10-15 10:44:28 -04:00
Oren Farhi	834cdc6dab	8.0.1	2019-10-15 10:43:18 -04:00
Matt Ezell	c5613d7386	Update postinstall so that it doesn't cause failures (#321 ) There are a few known scenarios where the opencollective postinstall npm script can cause things to break further down the pipeline - a few being 'certain build/CI environments', 'script permission issues' and 'offline installs'.... Arguably, displaying a banner soliciting funding shouldn't disrupt the development or build processes of projects leveraging libraries that are optionally, and non-functionally, using opencollective. Ultimately, at the heart of the failure, is a non 0 exit code being returned in the cases that opencollective fails to properly execute. To prevent this non-zero exit code failure so that subsequent npm processes aren't disrupted as a result of non-functional dependency issues, a "\|\| exit 0" should be added to the postinstall npm script. There are many discussions about this issue and workaround - here are a few: opencollective/opencollective-cli#5 nuxt/nuxt.js#1357 opencollective/opencollective-cli#3 opencollective/opencollective-postinstall#2 `99ea09f6ac`	2019-10-15 10:41:48 -04:00
Michał Dybich	7dc71e98ab	[RELEASE] 8.0.0 (#333 ) * Update to Angular 8 * Update example, readme and changelog * Adjust typescript version, delete unnecessary dependency from example	2019-07-31 23:13:44 +03:00
Oren Farhi	1465fa754c	[RELEASE]: 7.2.0	2019-06-10 08:17:18 -04:00
Yuri Katkov	9775f58c6b	Window scroll (fixes #322 ) fixes the scrolling in the window container	2019-06-10 08:07:40 -04:00
Oren Farhi	ceba7fb46b	updated version and code (#317 ) [7.1.0]: Release	2019-03-19 09:44:20 -04:00
Oren Farhi	f1ac40e11a	Merge pull request #263 from topaxi/opencollective-to-dev Use opencollective-postinstall instead of opencollective	2019-03-10 13:36:05 +02:00
Damian Senn	5fbc8af8fd	Use opencollective-postinstall package	2019-02-11 11:01:52 +01:00
Oren Farhi	f3fafca417	fix(package): updating typescript version	2019-01-04 10:25:22 -05:00
Oren Farhi	faeb2d58b0	Merge pull request #312 from kuroky360/master fix build script error	2019-01-04 08:29:13 -05:00
yodawang	25180af382	fix build script error	2019-01-04 19:09:37 +08:00
Oren Farhi	06fb6edaf8	[RELEASE]: 7.0.0 [RELEASE]: 7.0.0	2018-12-30 15:08:19 -05:00
Oren Farhi	1c63aa8df4	prevent package lock	2018-12-30 14:50:53 -05:00
Oren Farhi	e0e841802e	cleanups	2018-12-30 12:12:43 -05:00
Oren Farhi	ddf952ee2b	update	2018-12-03 21:48:23 -05:00
Oren Farhi	f0e031862b	tests..	2018-11-29 21:38:02 -05:00
Oren Farhi	17a788f827	tests..	2018-11-29 21:37:37 -05:00
Oren Farhi	fa01a048a7	[RELEASE]: 6.0.1	2018-06-15 18:21:52 +03:00
Oren Farhi	3fa66b21e8	Merge pull request #282 from pvm1987/master Fix the wrong calculations when scroll up event should be fired.	2018-06-15 04:29:45 -04:00
Oren Farhi	53cdffaafc	update(readme): angular versions support	2018-06-13 09:51:03 +03:00
Petar Milenov	bc35264a2b	Fix the wrong calculations when scroll up event should be fired. We should check against the hidden content height instead of the total scroll + content height. Before this fix the scroll up event was not fired when the shown content was bigger than the remaining (hidden) part. It was working only when the scroll bar was small enough.	2018-06-05 11:02:57 +03:00
Oren Farhi	2437190181	udpated demo with stackblitz	2018-05-23 09:02:38 +03:00
Oren Farhi	b470ea62b0	version 6 release in npm	2018-05-23 08:41:56 +03:00
Oren Farhi	589d7a5c6c	align version with Angular	2018-05-22 19:43:24 +03:00
Oren Farhi	db67521675	RELEASE 0.9.0: Angular 6 and RxJs 6	2018-05-22 19:23:52 +03:00
Oren Farhi	50078a55bc	Merge pull request #275 from deeg/rxjs6 chore(rxjs): update library to be compatable with rxjs and angular 6	2018-05-22 04:12:41 -04:00
Bastien	e2f6982071	chore(rxjs): update library to be compatable with rxjs and angular 6 Closes #272 Fixes #271	2018-05-21 12:08:43 -07:00
Oren Farhi	ff54f8aa0f	added badges	2018-04-11 15:23:22 +03:00
Oren Farhi	d1950bd7c5	Merge pull request #262 from orizens/feature/0.8.4 feat(0.8.4): bug fixes and rxjs upgrade	2018-04-11 13:58:28 +02:00
Oren Farhi	a0c7cfb966	added rxjs version upgrade	2018-04-11 13:49:44 +03:00
Oren Farhi	893da4f702	closes #259	2018-04-11 13:48:11 +03:00
Oren Farhi	4a1b2d895a	fixes #261	2018-04-11 13:46:40 +03:00
Oren Farhi	3102582e04	Merge pull request #256 from liberty914/master bugfix getElementHeight on SSR	2018-04-11 09:26:45 +02:00
Oren Farhi	f05d7f0716	Merge pull request #252 from renehamburger/patch-1 Corrects order of shouldTriggerEvents() parameters	2018-04-11 09:26:24 +02:00
Oren Farhi	22c19090d0	Merge pull request #249 from jcroll/fixes248 [RFC] Fixes #248	2018-04-11 09:25:50 +02:00
Rex	ad11f27b45	Merge pull request #1 from liberty914/rex bugfix getElementHeight on SSR	2018-03-31 02:35:37 +09:00
Rex	f6d8b5eef9	bugfix getElementHeight on SSR Request a bug fix. This bug occurs when using SSR (Angular-Universal). TypeError: Cannot read property 'clientHeight' of null position-resolver.ts:112:46	2018-03-31 02:34:33 +09:00
Rene Hamburger	30aa63d62e	Corrects order of shouldTriggerEvents() parameters See https://github.com/orizens/ngx-infinite-scroll/blob/master/src/services/event-trigger.ts#L28 for the correct order. The wrong order didn't have any impact yet, as both booleans are used symmetrically in shouldTriggerEvents().	2018-03-15 14:55:55 +01:00
Jarrett Croll	e23078f569	Fixes #248	2018-03-12 12:08:50 -04:00
Oren Farhi	6087b00a7b	Merge pull request #245 from orizens/chore/github-templates chore(github-templates): updated checkboxes	2018-02-28 09:47:43 +01:00
Oren Farhi	9effa32e2d	chore(github-templates): updated checkboxes	2018-02-28 10:35:09 +02:00
Oren Farhi	275f7395fe	Merge pull request #244 from orizens/feature/github-templates add(github): templates for issue and pr	2018-02-28 09:32:56 +01:00
				`@ -0,0 +1 @@`
				`/* You can add global styles to this file, and also import other style files */`