From 8405f4446d78263aa287f2aab1fb5e3e399b8ed9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominique=20M=C3=BCller?= Date: Thu, 11 Mar 2021 23:38:18 +0100 Subject: [PATCH] Release 8.0.0 --- CHANGELOG.md | 12 ++++ README.md | 176 ++++++++++++++++++++++------------------------ package-lock.json | 2 +- package.json | 2 +- 4 files changed, 99 insertions(+), 93 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 94e15cb8..032187cd 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,18 @@ Also see **[GitHub releases](https://github.com/dominique-mueller/angular-notifi
+## [8.0.0](https://github.com/dominique-mueller/angular-notifier/releases/tag/8.0.0) (2021-03-11) + +### Features + +- Upgrade to Angular 10 ([#202](https://github.com/dominique-mueller/angular-notifier/pull/202)) + +### BREAKING CHANGES + +- The upgrade to Angular 10 breaks compatibility with Angular 9. + +
+ ## [7.0.0](https://github.com/dominique-mueller/angular-notifier/releases/tag/7.0.0) (2021-03-11) ### Features diff --git a/README.md b/README.md index 5c65bd84..3e748dbc 100644 --- a/README.md +++ b/README.md @@ -40,7 +40,7 @@ The following list describes the compatibility with Angular: | `5.x` | `7.x` | | `6.x` | `8.x` | | `7.x` | `9.x` | -| `8.x` | `10.x` | +| `8.x` | `10.x` |
@@ -49,11 +49,11 @@ The following list describes the compatibility with Angular: By default, meaning without any polyfills, **angular-notifier** is compatible with **the latest versions of Chrome, Firefox, and Opera**. Bringing in the following polyfills will improve browser support: -- To be able to use the latest and greatest JavaScript features in older browsers (e.g. older version of IE & Safari), you might want to - add **[core-js](https://github.com/zloirock/core-js)** to your polyfills. -- For animation support (in particular, for better - **[Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)** support), you might want to use the **[web-animations-js](https://github.com/web-animations/web-animations-js)** polyfill. For details, see the corresponding - **[CanIUse page](http://caniuse.com/#feat=web-animation)**. +- To be able to use the latest and greatest JavaScript features in older browsers (e.g. older version of IE & Safari), you might want to + add **[core-js](https://github.com/zloirock/core-js)** to your polyfills. +- For animation support (in particular, for better + **[Web Animations API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API)** support), you might want to use the **[web-animations-js](https://github.com/web-animations/web-animations-js)** polyfill. For details, see the corresponding + **[CanIUse page](http://caniuse.com/#feat=web-animation)**. > For detailed information about the Angular browser support read the > **[official Angular browser support documentation](https://angular.io/docs/ts/latest/guide/browser-support.html)**. If you generated your @@ -75,10 +75,10 @@ First of all, make **angular-notifier** globally available to your Angular appli `NotifierModule` the your root Angular module. For example: ```typescript -import { NotifierModule } from "angular-notifier"; +import { NotifierModule } from 'angular-notifier'; @NgModule({ - imports: [NotifierModule] + imports: [NotifierModule], }) export class AppModule {} ``` @@ -87,14 +87,14 @@ But wait -- your probably might want to customize your notifications' look and b call the `withConfig` method on the `NotifierModule`, and pass in the options. For example: ```typescript -import { NotifierModule } from "angular-notifier"; +import { NotifierModule } from 'angular-notifier'; @NgModule({ - imports: [ - NotifierModule.withConfig({ - // Custom options in here - }) - ] + imports: [ + NotifierModule.withConfig({ + // Custom options in here + }), + ], }) export class AppModule {} ``` @@ -108,11 +108,11 @@ root (app) component. For example: ```typescript @Component({ - selector: "my-app", - template: ` -

Hello World

- - ` + selector: 'my-app', + template: ` +

Hello World

+ + `, }) export class AppComponent {} ``` @@ -137,9 +137,9 @@ the themes and notification types. To keep the size if your styles as small as possible (improving performance for the perfect UX), your might instead decide to only import the styles actually needed by our application. The **angular-notifier** styles are modular: -- The `~/angular-notifier/styles/core.(scss|css)` file is always required, it defines the basic styles (such as the layout) -- Themes can be imported from the `~/angular-notifier/styles/theme` folder -- The different notification types, then, can be imported from the `~/angular-notifier/styles/types` folder +- The `~/angular-notifier/styles/core.(scss|css)` file is always required, it defines the basic styles (such as the layout) +- Themes can be imported from the `~/angular-notifier/styles/theme` folder +- The different notification types, then, can be imported from the `~/angular-notifier/styles/types` folder


@@ -149,17 +149,17 @@ Using **angular-notifier** is as simple as it can get -- simple import and injec service, ...) you want to use in. For example: ```typescript -import { NotifierService } from "angular-notifier"; +import { NotifierService } from 'angular-notifier'; @Component({ - // ... + // ... }) export class MyAwesomeComponent { - private readonly notifier: NotifierService; + private readonly notifier: NotifierService; - constructor(notifierService: NotifierService) { - this.notifier = notifierService; - } + constructor(notifierService: NotifierService) { + this.notifier = notifierService; + } } ``` @@ -170,18 +170,14 @@ export class MyAwesomeComponent { Showing a notification is simple - all your need is a type, and a message to be displayed. For example: ```typescript -this.notifier.notify("success", "You are awesome! I mean it!"); +this.notifier.notify('success', 'You are awesome! I mean it!'); ``` You can further pass in a _notification ID_ as the third (optional) argument. Essentially, such a _notification ID_ is nothing more but a unique string tha can be used later on to gain access (and thus control) to this specific notification. For example: ```typescript -this.notifier.notify( - "success", - "You are awesome! I mean it!", - "THAT_NOTIFICATION_ID" -); +this.notifier.notify('success', 'You are awesome! I mean it!', 'THAT_NOTIFICATION_ID'); ``` > For example, you might want to define a _notification ID_ if you know that, at some point in the future, you will need to remove _this @@ -191,9 +187,9 @@ this.notifier.notify( ```typescript this.notifier.show({ - type: "success", - message: "You are awesome! I mean it!", - id: "THAT_NOTIFICATION_ID" // Again, this is optional + type: 'success', + message: 'You are awesome! I mean it!', + id: 'THAT_NOTIFICATION_ID', // Again, this is optional }); ``` @@ -205,7 +201,7 @@ You can also hide notifications. To hide a specific notification - assuming you' call: ```typescript -this.notifier.hide("THAT_NOTIFICATION_ID"); +this.notifier.hide('THAT_NOTIFICATION_ID'); ``` Furthermore, your can hide the newest notification by calling: @@ -298,7 +294,7 @@ With the `theme` property you can change the overall look and feel of your notif * Defines the notification theme, responsible for the Visual Design of notifications * @type {string} */ -theme: "material"; +theme: 'material'; ``` #### Theming in detail @@ -362,9 +358,7 @@ You can define a custom `ng-template` as follows: ```html - - {{ notificationData.message }} - + {{ notificationData.message }} ``` @@ -373,23 +367,23 @@ In this case you could wrap your own HTML, even a `` component Inside your component, you can then reference the `` by its template variable `#customNotification` using Angular's `ViewChild`: ```typescript -import { ViewChild } from "@angular/core"; +import { ViewChild } from '@angular/core'; @Component({ - // ... + // ... }) export class SomeComponent { - @ViewChild("customNotification", { static: true }) customNotificationTmpl; + @ViewChild('customNotification', { static: true }) customNotificationTmpl; - constructor(private notifierService: NotifierService) {} + constructor(private notifierService: NotifierService) {} - showNotification() { - this.notifier.show({ - message: "Hi there!", - type: "info", - template: this.customNotificationTmpl - }); - } + showNotification() { + this.notifier.show({ + message: 'Hi there!', + type: 'info', + template: this.customNotificationTmpl, + }); + } } ``` @@ -491,43 +485,43 @@ To sum it up, the following is the default configuration _(copy-paste-friendly)_ ```typescript const notifierDefaultOptions: NotifierOptions = { - position: { - horizontal: { - position: "left", - distance: 12 - }, - vertical: { - position: "bottom", - distance: 12, - gap: 10 - } - }, - theme: "material", - behaviour: { - autoHide: 5000, - onClick: false, - onMouseover: "pauseAutoHide", - showDismissButton: true, - stacking: 4 - }, - animations: { - enabled: true, - show: { - preset: "slide", - speed: 300, - easing: "ease" - }, - hide: { - preset: "fade", - speed: 300, - easing: "ease", - offset: 50 - }, - shift: { - speed: 300, - easing: "ease" - }, - overlap: 150 - } + position: { + horizontal: { + position: 'left', + distance: 12, + }, + vertical: { + position: 'bottom', + distance: 12, + gap: 10, + }, + }, + theme: 'material', + behaviour: { + autoHide: 5000, + onClick: false, + onMouseover: 'pauseAutoHide', + showDismissButton: true, + stacking: 4, + }, + animations: { + enabled: true, + show: { + preset: 'slide', + speed: 300, + easing: 'ease', + }, + hide: { + preset: 'fade', + speed: 300, + easing: 'ease', + offset: 50, + }, + shift: { + speed: 300, + easing: 'ease', + }, + overlap: 150, + }, }; ``` diff --git a/package-lock.json b/package-lock.json index 1c6a96dc..ca32047c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "angular-notifier", - "version": "7.0.0", + "version": "8.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 5e6dd0b0..3cd57187 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "angular-notifier", "description": "A well designed, fully animated, highly customizable, and easy-to-use notification library for your Angular application.", - "version": "7.0.0", + "version": "8.0.0", "license": "MIT", "repository": { "type": "git",