pax_global_header 0000666 0000000 0000000 00000000064 13237105115 0014510 g ustar 00root root 0000000 0000000 52 comment=d5a9890ec4b811dfd367a36f4feb6a47cd1b580e
ngx-toastr-8.2.1/ 0000775 0000000 0000000 00000000000 13237105115 0013626 5 ustar 00root root 0000000 0000000 ngx-toastr-8.2.1/.angular-cli.json 0000664 0000000 0000000 00000003507 13237105115 0017002 0 ustar 00root root 0000000 0000000 {
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "ngx-toastr"
},
"apps": [
{
"root": "src",
"outDir": "dist/browser",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}, {
"platform": "server",
"root": "src",
"outDir": "dist/server",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.server.ts",
"test": "test.ts",
"tsconfig": "tsconfig.server.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"styles": [
"styles.scss"
],
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "scss",
"component": {}
}
}
ngx-toastr-8.2.1/.codecov.yml 0000664 0000000 0000000 00000000237 13237105115 0016053 0 ustar 00root root 0000000 0000000 coverage:
status:
project:
default:
target: auto
threshold: 10
base: auto
comment:
require_changes: yes
behavior: once
ngx-toastr-8.2.1/.editorconfig 0000664 0000000 0000000 00000000365 13237105115 0016307 0 ustar 00root root 0000000 0000000 # Editor configuration, see http://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.md]
max_line_length = off
trim_trailing_whitespace = false
ngx-toastr-8.2.1/.gitignore 0000664 0000000 0000000 00000001032 13237105115 0015612 0 ustar 00root root 0000000 0000000 # See http://help.github.com/ignore-files/ for more about ignoring files.
# compiled output
/dist
/tmp
/out-tsc
# dependencies
/node_modules
# IDEs and editors
/.idea
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-workspace
# IDE - VSCode
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
# misc
/.sass-cache
/connect.lock
/coverage
/libpeerconnection.log
npm-debug.log
testem.log
/typings
/deploy
/waste
/build
# e2e
/e2e/*.js
/e2e/*.map
# System Files
.DS_Store
Thumbs.db
ngx-toastr-8.2.1/.travis.yml 0000664 0000000 0000000 00000001167 13237105115 0015744 0 ustar 00root root 0000000 0000000 sudo: false
dist: xenial
language: node_js
node_js: 8
cache:
directories:
- $HOME/.npm
addons:
chrome: stable
before_install: npm install -g greenkeeper-lockfile@1
before_script: greenkeeper-lockfile-update
after_script: greenkeeper-lockfile-upload
script:
- npm run build
- npm run lint
- npm run bundlesize
- npm run test:ci
after_success:
- bash <(curl -s https://codecov.io/bash)
- npm run build:prerender-ghpages
deploy:
provider: pages
skip_cleanup: true
local_dir: dist/browser
github_token: $GH_TOKEN
on:
branch: master
notifications:
email:
on_success: never
on_failure: change
ngx-toastr-8.2.1/LICENSE 0000664 0000000 0000000 00000002067 13237105115 0014640 0 ustar 00root root 0000000 0000000 The MIT License (MIT)
Copyright (c) 2016 Scott Cooper
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
ngx-toastr-8.2.1/README.md 0000664 0000000 0000000 00000031731 13237105115 0015112 0 ustar 00root root 0000000 0000000
ngx-toastr
DEMO: https://scttcper.github.io/ngx-toastr/
## Features
* Toast Component Injection without being passed `ViewContainerRef`
* No use of `*ngFor`. Fewer dirty checks and higher performance.
* AoT compilation and lazy loading compatible
* Component inheritance for custom toasts
* SystemJS/UMD rollup bundle
* Animations using Angular's
[Web Animations API](https://angular.io/docs/ts/latest/guide/animations.html)
(polyfill needed for older devices)
* Output toasts to an optional target directive
## Install
```bash
npm install ngx-toastr --save
```
`@angular/animations` package is a required dependency for the default toast
```bash
npm install @angular/animations --save
```
Don't want to use `@angular/animations`? See
[Setup Without Animations](#setup-without-animations).
## Setup
**step 1:** add css
* copy
[toast css](/src/lib/toastr.css)
to your project.
* If you are using sass you can import the css.
```scss
@import "~ngx-toastr/toastr";
// or import a bootstrap 4 alert styled design (SASS ONLY)
// should be after your bootstrap imports, it uses bs4 variables
@import "~ngx-toastr/toastr-bs4-alert"
```
* If you are using angular-cli you can add it to your angular-cli.json
```json
"styles": [
"styles.scss",
"../node_modules/ngx-toastr/toastr.css"
]
```
**step 2:** add ToastrModule to app NgModule
```typescript
import { CommonModule } from '@angular/common';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule } from 'ngx-toastr';
@NgModule({
imports: [
CommonModule,
BrowserAnimationsModule, // required animations module
ToastrModule.forRoot(), // ToastrModule added
],
bootstrap: [App],
declarations: [App],
})
class MainModule {}
```
## Use
Success:
```typescript
import { ToastrService } from 'ngx-toastr';
@Component({
...
})
export class YourComponent {
constructor(private toastr: ToastrService) {}
showSuccess() {
this.toastr.success('Hello world!', 'Toastr fun!');
}
}
```
## Options
There are **individual options** and **global options**.
### Individual Options
Passed to `ToastrService.success/error/warning/info/show()`
| Option | Type | Default | Description |
| ----------------- | ------------------------------ | ----------------- | ----------------------------------------------------------------------------------------------------------------------------------------- |
| toastComponent | Component | Toast | Angular component that will be used |
| closeButton | boolean | false | Show close button |
| timeOut | number | 5000 | Time to live in milliseconds |
| extendedTimeOut | number | 1000 | Time to close after a user hovers over toast |
| disableTimeOut | boolean | false | Disable both timeOut and extendedTimeOut |
| easing | string | 'ease-in' | Toast component easing |
| easeTime | string \| number | 300 | Time spent easing |
| enableHtml | boolean | false | Allow html in message |
| progressBar | boolean | false | Show progress bar |
| progressAnimation | `'decreasing' \| 'increasing'` | 'decreasing' | Changes the animation of the progress bar. |
| toastClass | string | 'toast' | Class on toast |
| positionClass | string | 'toast-top-right' | Class on toast container |
| titleClass | string | 'toast-title' | Class inside toast on title |
| messageClass | string | 'toast-message' | Class inside toast on message |
| tapToDismiss | boolean | true | Close on click |
| onActivateTick | boolean | false | Fires `changeDetectorRef.detectChanges()` when activated. Helps show toast from asynchronous events outside of Angular's change detection |
#### Setting Individual Options
success, error, info, warning take `(message, title, ToastConfig)` pass an
options object to replace any default option.
```typescript
this.toastrService.error('everything is broken', 'Major Error', {
timeOut: 3000,
});
```
### Global Options
All [individual options](#individual-options) can be overridden in the global
options to affect all toasts. In addition, global options include the following
options:
| Option | Type | Default | Description |
| ----------------- | ------- | ---------------------------------- | -------------------------------------------------------- |
| maxOpened | number | 0 | Max toasts opened. Toasts will be queued. 0 is unlimited |
| autoDismiss | boolean | false | Dismiss current toast when max is reached |
| iconClasses | object | [see below](#iconclasses-defaults) | Classes used on toastr service methods |
| newestOnTop | boolean | true | New toast placement |
| preventDuplicates | boolean | false | Block duplicate messages |
##### iconClasses defaults
```typescript
iconClasses = {
error: 'toast-error',
info: 'toast-info',
success: 'toast-success',
warning: 'toast-warning',
};
```
#### Setting Global Options
Pass values to `ToastrModule.forRoot()`
```typescript
// root app NgModule
imports: [
ToastrModule.forRoot({
timeOut: 10000,
positionClass: 'toast-bottom-right',
preventDuplicates: true,
}),
],
```
### Toastr Service methods return:
Toastr Service will return undefined if prevent duplicates is enabled
```typescript
export interface ActiveToast {
/** Your Toast ID. Use this to close it individually */
toastId: number;
/** the message of your toast. Stored to prevent duplicates */
message: string;
/** a reference to the component see portal.ts */
portal: ComponentRef;
/** a reference to your toast */
toastRef: ToastRef;
/** triggered when toast is active */
onShown: Observable;
/** triggered when toast is destroyed */
onHidden: Observable;
/** triggered on toast click */
onTap: Observable;
/** available for your use in custom toast */
onAction: Observable;
}
```
### Put toasts in your own container
Put toasts in a specific div inside your application. This should probably be
somewhere that doesn't get deleted. Add `ToastContainerModule` to the ngModule
where you need the directive available.
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ToastrModule, ToastContainerModule } from 'ngx-toastr';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
ToastrModule.forRoot({ positionClass: 'inline' }),
ToastContainerModule,
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
```
Add a div with `toastContainer` directive on it.
```typescript
import { Component, OnInit, ViewChild } from '@angular/core';
import { ToastContainerDirective, ToastrService } from 'ngx-toastr';
@Component({
selector: 'app-root',
template: `
