Merge branch 'feature/upgrade_to_v8' into next

Author: RaschidJFR

.browserslistrc

@@ -1,8 +1,12 @@
 # Contributing
 
+* You'll find the parallax directive's source in [`/projects/ionic-header-parallax/src`](projects/ionic-header-parallax/src).
 * The source code for the demo app [`/src`](src).
-* You'll find the library's source in [`/projects/ionic-header-parallax/src`](projects/ionic-header-parallax/src).
 
 ## Getting Started
-1. Do `npm start` to build and launch the app in watch mode.
-2. Do `npm run link` to link the demo app to the source library project.
+
+In the root folder:
+1. Run `npm run watch` to build the directive in watch mode.
+1. Run `npm run link` to point the demo app to use the local directive's source.
+2. Run `ng serve` to launch the demo app.
+

CONTRIBUTING.md

@@ -6,18 +6,19 @@ This directive enables parallax effect on `ion-header` elements to display a cov
 
 | Stack                                                                                                          | Tag                                                                             |
 | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- |
+| ![](https://img.shields.io/badge/-v8-white?logo=ionic) ![](https://img.shields.io/badge/-v16-red?logo=angular) | [6.x.x](https://www.npmjs.com/package/ionic-header-parallax?activeTab=versions) |
 | ![](https://img.shields.io/badge/-v7-white?logo=ionic) ![](https://img.shields.io/badge/-v14-red?logo=angular) | [5.x.x](https://www.npmjs.com/package/ionic-header-parallax?activeTab=versions) |
 | ![](https://img.shields.io/badge/-v6-white?logo=ionic) ![](https://img.shields.io/badge/-v13-red?logo=angular) | [4.x.x](https://www.npmjs.com/package/ionic-header-parallax?activeTab=versions) |
 | ![](https://img.shields.io/badge/-v5-white?logo=ionic) ![](https://img.shields.io/badge/-v12-red?logo=angular) | [3.x.x](https://www.npmjs.com/package/ionic-header-parallax?activeTab=versions) |
 | ![](https://img.shields.io/badge/-v4-white?logo=ionic) ![](https://img.shields.io/badge/-v8-red?logo=angular)  | [2.x.x](https://www.npmjs.com/package/ionic-header-parallax?activeTab=versions) |
 
 ## Live Demo
-Checkout the Live Demo [here](https://raschidjfr.github.io/ionic-header-parallax)
-
-![](https://raw.githubusercontent.com/raschidJFR/ionic-header-parallax/5.0.0/img/ios.gif)
-![](https://raw.githubusercontent.com/raschidJFR/ionic-header-parallax/5.0.0/img/android.gif)
 
+Checkout the Live Demo [here](https://raschidjfr.github.io/ionic-header-parallax)
 
+| iOS                                                                                       | Android                                                                                       |
+| ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| ![](https://raw.githubusercontent.com/raschidJFR/ionic-header-parallax/5.0.0/img/ios.gif) | ![](https://raw.githubusercontent.com/raschidJFR/ionic-header-parallax/5.0.0/img/android.gif) |
 
 ## Set Up
 
@@ -38,12 +39,7 @@ import { IonicHeaderParallaxModule } from 'ionic-header-parallax';
 Just add the attribute `parallax` to any `<ion-header>` element:
 
 ```html
-<ion-header
-  parallax
-  imageUrl="https://picsum.photos/350"
-  height="350"
-  bgPosition="top"
->
+<ion-header parallax imageUrl="https://picsum.photos/350" height="350" bgPosition="top">
   <ion-toolbar color="primary">
     <ion-title> Parallax Header </ion-title>
   </ion-toolbar>
@@ -56,10 +52,10 @@ Just add the attribute `parallax` to any `<ion-header>` element:
 | ---------- | ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | imageUrl   | `string`                        | The background image to show while expanded.                                                                                                                |
 | height     | ` number \| string`             | The height for the header when expanded. If the value is a number, it will be set in `px`. If the value is a string it will be passed as is (eg: `"20rem"`) |
-| color      | `string`                        | The color (web hex formatted) to show while the header is expanded when no `imageUrl` is set. When scrolled it will fade to the toolbar's color.            |
-| bgPosition | `'top' \| 'center' \| 'bottom'` | The position of the image in the header. This parameter slightly changes the feeling of the animation.                                                      |
+| color      | `string`                        | The color (web hex formatted) to show while the header is expanded when no `imageUrl` is set. When scrolled, it will fade to the toolbar's color.           |
+| bgPosition | `'top' \| 'center' \| 'bottom'` | The position of the image in the header. This parameter slightly changes the feeling of the animation. Default: `'top'`                                     |
 
 ## Contributing
 
 I don't plan to be maintaining this package full-time, but as I'm usually developing in Ionic I'll be glad to update it any time I make some upgrades for myself.
-Code contributions, issues and PRs are very welcome. Find the instructions in the [CONTRIBUTING.md](CONTRIBUTING.md) file.
+Code contributions, issues, and PRs are very welcome. Find the instructions in the [CONTRIBUTING.md](CONTRIBUTING.md) file.