Change - documentation update

boris-jenicek · May 4, 2021 · c162f88 · c162f88
1 parent bafaf68
commit c162f88
Show file tree

Hide file tree

Showing 3 changed files with 180 additions and 63 deletions.
diff --git a/README.md b/README.md
@@ -3,11 +3,11 @@
 </p>
 <h1 align="center">@costlydeveloper/ngx-awesome-popup</h1>
 <p align="center">
-		<a href="https://npmcharts.com/compare/@costlydeveloper/ngx-awesome-popup?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
-<a href="https://www.npmjs.com/package/@costlydeveloper/ngx-awesome-popup"><img alt="NPM Version" src="https://img.shields.io/npm/v/@costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
-<a href="https://david-dm.org/costlydeveloper/ngx-awesome-popup"><img alt="Dependencies" src="https://img.shields.io/david/costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
-<a href="https://github.com/costlydeveloper/ngx-awesome-popup/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
-<a href="https://github.com/costlydeveloper/ngx-awesome-popup/graphs/commit-activity"><img alt="Maintained" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" height="20"/></a>
+		<a href="https://npmcharts.com/compare/@costlydeveloper/ngx-awesome-popup?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
+<a href="https://www.npmjs.com/package/@costlydeveloper/ngx-awesome-popup"><img alt="NPM Version" src="https://img.shields.io/npm/v/@costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
+<a href="https://david-dm.org/costlydeveloper/ngx-awesome-popup"><img alt="Dependencies" src="https://img.shields.io/david/costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
+<a href="https://github.com/costlydeveloper/ngx-awesome-popup/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
+<a href="https://github.com/costlydeveloper/ngx-awesome-popup/graphs/commit-activity"><img alt="Maintained" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" height="20"/></a>
 <a href="https://costlydeveloper.github.io/ngx-awesome-popup/"><img alt="undefined" src="https://awesome.re/badge.svg" height="20"/></a>
 	</p>
 
@@ -19,38 +19,46 @@
 <br />
 
 
-* **Well documented**: Extremely simple to use - just follow the tutorials and API documentation!
-* **Powerful**: It uses Angular factory features - generates any component anywhere in popup without HTML selector!
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/#/toast-advanced" target="_blank">
+<img alt="Dynamic dialog" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/7da59249fdc0f453e8f1d7b067dba9ea6a8f2da6/src/assets/toasts.gif?raw=true" >
+<p>Simple toast</p>
+</a>
+</div>
+
+
+* **Well documented**: Extremely simple to use - just follow the tutorials and API documentation!
+* **Powerful**: It uses Angular factory features - generates any component anywhere in popup without HTML selector!
 * **Awesome**: The tool you don't know you needed before!
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#external-links)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#external-links)
+
 ## ➤ External links
 
 * [➤ DEMO showcase](https://costlydeveloper.github.io/demo-ngx-awesome-popup/)
 * [➤ DEMO StackBlitz](https://stackblitz.com/github/costlydeveloper/demo-ngx-awesome-popup?file=src%2Fapp%2Fapp.component.ts)
 * [➤ GitHub repository of the DEMO](https://github.com/costlydeveloper/demo-ngx-awesome-popup)
 * [➤ API documentation](https://github.com/costlydeveloper/ngx-awesome-popup/wiki)
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)
+
 ## ➤ Table of Contents
 
-* [➤ External links](#-external-links)
-* [➤ Installation](#-installation)
-* [➤ Usage](#-usage)
-	* [Toast Notification](#toast-notification)
-	* [Confirm Box / Alert Box](#confirm-box--alert-box)
-	* [Open any component in Dialog](#open-any-component-in-dialog)
-		* [Setup of evoke of the dialog:](#setup-of-evoke-of-the-dialog)
-		* [Setup of child-dynamic component that is rendered in dialog:](#setup-of-child-dynamic-component-that-is-rendered-in-dialog)
+* [➤ External links](#-external-links)
+* [➤ Installation](#-installation)
+* [➤ Usage](#-usage)
+	* [Toast Notification](#toast-notification)
+	* [Confirm Box / Alert Box](#confirm-box--alert-box)
+	* [Open any component in Dialog](#open-any-component-in-dialog)
+		* [Setup of evoke of the dialog:](#setup-of-evoke-of-the-dialog)
+		* [Setup of child-dynamic component that is rendered in dialog:](#setup-of-child-dynamic-component-that-is-rendered-in-dialog)
 * [➤ License](#-license)
 
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#installation)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#installation)
+
 ## ➤ Installation
 Install the library with:
 ```javascript
@@ -96,13 +104,34 @@ API documentation:
 - [ToastNotificationConfigModule](https://github.com/costlydeveloper/ngx-awesome-popup/wiki/Class:%20ToastNotificationConfigModule)
 
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#usage)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#usage)
+
 ## ➤ Usage
 **Check [The API Documentation](https://github.com/costlydeveloper/ngx-awesome-popup/wiki) for more advance setup.**
 
 ### Toast Notification
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/#/toast-advanced" target="_blank">
+<img alt="Standard toast" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/7da59249fdc0f453e8f1d7b067dba9ea6a8f2da6/src/assets/toast-standard.gif?raw=true" >
+<p>Standard toast</p>
+</a>
+</div>
+
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/#/toast-advanced" target="_blank">
+<img alt="Toast cookie banner, bottom corner" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/cookies-banner.png?raw=true" >
+<p>Toast cookie banner, bottom corner.</p>
+</a>
+</div>
+
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/#/toast-advanced" target="_blank">
+<img alt="Wide bottom toast, cookie terms" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/cookies-wide-white.png?raw=true" >
+<p>Wide bottom toast, cookie terms.</p>
+</a>
+</div>
+
 Simply open toast notification from any component or any custom typescript class:
 ```typescript
 import {Component, OnInit} from '@angular/core';
@@ -148,7 +177,29 @@ API documentation:
 - [IToastNotificationPublicResponse](https://github.com/costlydeveloper/ngx-awesome-popup/wiki/Interface:%20IToastNotificationPublicResponse)
 
 
+
 ### Confirm Box / Alert Box
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/" target="_blank">
+<img alt="Confirmation box - danger" alt="Dynamic dialog" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/confirm-box-red.png?raw=true" >
+<p>Confirmation box.</p>
+</a>
+</div>
+
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/" target="_blank">
+<img alt="Confirmation box" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/confirm-box.png?raw=true" >
+<p>Confirmation box.</p>
+</a>
+</div>
+
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/" target="_blank">
+<img alt="Alert popup" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/alert-box.png?raw=true" >
+<p>Alert popup</p>
+</a>
+</div>
+
 It is very easy to open Confirm Box or Alert Box from any component or any custom typescript class:
 ```typescript
 import {Component, OnInit} from '@angular/core';
@@ -198,7 +249,15 @@ API documentation:
 - [IConfirmBoxPublicResponse](https://github.com/costlydeveloper/ngx-awesome-popup/wiki/Interface:%20IConfirmBoxPublicResponse)
 
 
+
 ### Open any component in Dialog
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/" target="_blank">
+<img alt="Dynamic dialog" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/dynamic-dialog.png?raw=true" >
+<p>Dynamic dialog.</p>
+</a>
+</div>
+
 Simply open any Angular component from any typescript file without HTML selector.
 * Send and receive any data with dialog dynamic component and back.
 * Set custom buttons and listen the click event inside dynamic component (AnyAngularComponent)
@@ -335,10 +394,9 @@ API documentation:
 
 
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)
+
 ## ➤ License
 
 Licensed under [MIT](https://opensource.org/licenses/MIT).
-
diff --git a/dist/README.md b/dist/README.md
@@ -3,11 +3,11 @@
 </p>
 <h1 align="center">@costlydeveloper/ngx-awesome-popup</h1>
 <p align="center">
-		<a href="https://npmcharts.com/compare/@costlydeveloper/ngx-awesome-popup?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
-<a href="https://www.npmjs.com/package/@costlydeveloper/ngx-awesome-popup"><img alt="NPM Version" src="https://img.shields.io/npm/v/@costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
-<a href="https://david-dm.org/costlydeveloper/ngx-awesome-popup"><img alt="Dependencies" src="https://img.shields.io/david/costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
-<a href="https://github.com/costlydeveloper/ngx-awesome-popup/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
-<a href="https://github.com/costlydeveloper/ngx-awesome-popup/graphs/commit-activity"><img alt="Maintained" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" height="20"/></a>
+		<a href="https://npmcharts.com/compare/@costlydeveloper/ngx-awesome-popup?minimal=true"><img alt="Downloads per month" src="https://img.shields.io/npm/dm/@costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
+<a href="https://www.npmjs.com/package/@costlydeveloper/ngx-awesome-popup"><img alt="NPM Version" src="https://img.shields.io/npm/v/@costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
+<a href="https://david-dm.org/costlydeveloper/ngx-awesome-popup"><img alt="Dependencies" src="https://img.shields.io/david/costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
+<a href="https://github.com/costlydeveloper/ngx-awesome-popup/graphs/contributors"><img alt="Contributors" src="https://img.shields.io/github/contributors/costlydeveloper/ngx-awesome-popup.svg" height="20"/></a>
+<a href="https://github.com/costlydeveloper/ngx-awesome-popup/graphs/commit-activity"><img alt="Maintained" src="https://img.shields.io/badge/Maintained%3F-yes-green.svg" height="20"/></a>
 <a href="https://costlydeveloper.github.io/ngx-awesome-popup/"><img alt="undefined" src="https://awesome.re/badge.svg" height="20"/></a>
 	</p>
 
@@ -19,38 +19,46 @@
 <br />
 
 
-* **Well documented**: Extremely simple to use - just follow the tutorials and API documentation!
-* **Powerful**: It uses Angular factory features - generates any component anywhere in popup without HTML selector!
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/#/toast-advanced" target="_blank">
+<img alt="Dynamic dialog" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/7da59249fdc0f453e8f1d7b067dba9ea6a8f2da6/src/assets/toasts.gif?raw=true" >
+<p>Simple toast</p>
+</a>
+</div>
+
+
+* **Well documented**: Extremely simple to use - just follow the tutorials and API documentation!
+* **Powerful**: It uses Angular factory features - generates any component anywhere in popup without HTML selector!
 * **Awesome**: The tool you don't know you needed before!
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#external-links)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#external-links)
+
 ## ➤ External links
 
 * [➤ DEMO showcase](https://costlydeveloper.github.io/demo-ngx-awesome-popup/)
 * [➤ DEMO StackBlitz](https://stackblitz.com/github/costlydeveloper/demo-ngx-awesome-popup?file=src%2Fapp%2Fapp.component.ts)
 * [➤ GitHub repository of the DEMO](https://github.com/costlydeveloper/demo-ngx-awesome-popup)
 * [➤ API documentation](https://github.com/costlydeveloper/ngx-awesome-popup/wiki)
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#table-of-contents)
+
 ## ➤ Table of Contents
 
-* [➤ External links](#-external-links)
-* [➤ Installation](#-installation)
-* [➤ Usage](#-usage)
-	* [Toast Notification](#toast-notification)
-	* [Confirm Box / Alert Box](#confirm-box--alert-box)
-	* [Open any component in Dialog](#open-any-component-in-dialog)
-		* [Setup of evoke of the dialog:](#setup-of-evoke-of-the-dialog)
-		* [Setup of child-dynamic component that is rendered in dialog:](#setup-of-child-dynamic-component-that-is-rendered-in-dialog)
+* [➤ External links](#-external-links)
+* [➤ Installation](#-installation)
+* [➤ Usage](#-usage)
+	* [Toast Notification](#toast-notification)
+	* [Confirm Box / Alert Box](#confirm-box--alert-box)
+	* [Open any component in Dialog](#open-any-component-in-dialog)
+		* [Setup of evoke of the dialog:](#setup-of-evoke-of-the-dialog)
+		* [Setup of child-dynamic component that is rendered in dialog:](#setup-of-child-dynamic-component-that-is-rendered-in-dialog)
 * [➤ License](#-license)
 
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#installation)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#installation)
+
 ## ➤ Installation
 Install the library with:
 ```javascript
@@ -96,13 +104,34 @@ API documentation:
 - [ToastNotificationConfigModule](https://github.com/costlydeveloper/ngx-awesome-popup/wiki/Class:%20ToastNotificationConfigModule)
 
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#usage)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#usage)
+
 ## ➤ Usage
 **Check [The API Documentation](https://github.com/costlydeveloper/ngx-awesome-popup/wiki) for more advance setup.**
 
 ### Toast Notification
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/#/toast-advanced" target="_blank">
+<img alt="Standard toast" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/7da59249fdc0f453e8f1d7b067dba9ea6a8f2da6/src/assets/toast-standard.gif?raw=true" >
+<p>Standard toast</p>
+</a>
+</div>
+
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/#/toast-advanced" target="_blank">
+<img alt="Toast cookie banner, bottom corner" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/cookies-banner.png?raw=true" >
+<p>Toast cookie banner, bottom corner.</p>
+</a>
+</div>
+
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/#/toast-advanced" target="_blank">
+<img alt="Wide bottom toast, cookie terms" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/cookies-wide-white.png?raw=true" >
+<p>Wide bottom toast, cookie terms.</p>
+</a>
+</div>
+
 Simply open toast notification from any component or any custom typescript class:
 ```typescript
 import {Component, OnInit} from '@angular/core';
@@ -148,7 +177,29 @@ API documentation:
 - [IToastNotificationPublicResponse](https://github.com/costlydeveloper/ngx-awesome-popup/wiki/Interface:%20IToastNotificationPublicResponse)
 
 
+
 ### Confirm Box / Alert Box
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/" target="_blank">
+<img alt="Confirmation box - danger" alt="Dynamic dialog" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/confirm-box-red.png?raw=true" >
+<p>Confirmation box.</p>
+</a>
+</div>
+
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/" target="_blank">
+<img alt="Confirmation box" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/confirm-box.png?raw=true" >
+<p>Confirmation box.</p>
+</a>
+</div>
+
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/" target="_blank">
+<img alt="Alert popup" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/alert-box.png?raw=true" >
+<p>Alert popup</p>
+</a>
+</div>
+
 It is very easy to open Confirm Box or Alert Box from any component or any custom typescript class:
 ```typescript
 import {Component, OnInit} from '@angular/core';
@@ -198,7 +249,15 @@ API documentation:
 - [IConfirmBoxPublicResponse](https://github.com/costlydeveloper/ngx-awesome-popup/wiki/Interface:%20IConfirmBoxPublicResponse)
 
 
+
 ### Open any component in Dialog
+<div align="center"> 
+<a href="https://costlydeveloper.github.io/demo-ngx-awesome-popup/" target="_blank">
+<img alt="Dynamic dialog" src=https://github.com/costlydeveloper/demo-ngx-awesome-popup/blob/master/src/assets/dynamic-dialog.png?raw=true" >
+<p>Dynamic dialog.</p>
+</a>
+</div>
+
 Simply open any Angular component from any typescript file without HTML selector.
 * Send and receive any data with dialog dynamic component and back.
 * Set custom buttons and listen the click event inside dynamic component (AnyAngularComponent)
@@ -335,10 +394,9 @@ API documentation:
 
 
 
-
-[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)
-
+
+[![-----------------------------------------------------](https://raw.githubusercontent.com/andreasbm/readme/master/assets/lines/colored.png)](#license)
+
 ## ➤ License
 
 Licensed under [MIT](https://opensource.org/licenses/MIT).
-
diff --git a/dist/package.json b/dist/package.json
@@ -1,10 +1,11 @@
 {
   "name": "@costlydeveloper/ngx-awesome-popup",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Gives new functionality to Angular 9+, generates beautiful popups, dialogs, ConfirmBoxes, AlertBoxes, ToastNotifications. Also gives the ability of opening dynamic components directly from typescript!",
   "keywords": [
     "front-end",
     "web",
+    "cookie banner",
     "angular",
     "angular modal",
     "alert",