# Alerts

### ***Component is build based on*** [***Ngx-toastr***](https://github.com/scttcper/ngx-toastr)

Alerts works basing on Alerts component and Alerts service.

Alerts service can be used if it is needed to subscribe single alert actions. Alert actions are:

* confirm: first icon in right alert section;
* action: second icon in right alert section.

To use correctly alert actions it is required to provide unique ID for the alert.

## Usage

**app.html**

```markup
<div style="padding: 30px;">
    <cf-button md-raised-button [properties]="messageButton" (click)="sendMessage()"></cf-button>
    <cf-button md-raised-button [properties]="warningButton" (click)="sendWarning()"></cf-button>
    <cf-button md-raised-button [properties]="errorButton" (click)="sendError()"></cf-button>
</div>

<cf-alerts #alertsComp></cf-alerts>

<h4>List of alerts ID's and actions:</h4>
<ul>
    <li *ngFor="let alert of alerts">
        Alert id: <b>{{alert.id}}</b>, 
        action type: <b>{{alert.action}}</b>
    </li>
</ul>
```

**app.ts**

```typescript
@ViewChild('alertsComp') alertsComp;

alerts = [];

messageButton = new ButtonModel({label: "Show message"});
warningButton = new ButtonModel({label: "Show warning"});
errorButton = new ButtonModel({label: "Show error"});

myMessage: AlertModel = {
  message: "This is demo info message",
  options: {
    id: "alertID-1",
    timeOut: 7000,
    extendedTimeOut: 0,
    positionClass: "toast-top-left",
    confirmIcon: {
      name: "stars",
      type: "mi"
    },
    cancelIcon: {
      name: "star",
      type: "mi"
    }
  }
};

myWarning: AlertModel = {
  message: "This is demo warn message",
  options: {
    id: "alertID-2",
    timeOut: 1000,
    extendedTimeOut: 0,
    positionClass: "toast-top-right",
  }
};

myError: AlertModel = {
  message: "This is demo error message",
  options: {
  id: "alertID-3",
    timeOut: 3000,
    extendedTimeOut: 0,
    positionClass: "toast-bottom-right",
    actionButton: true,
  }
};  

sendMessage() { this.alertsComp.showMessage(this.myMessage); }

sendWarning() { this.alertsComp.showWarning(this.myWarning); }

sendError() { this.alertsComp.showError(this.myError); }    

constructor(public alertsService: CfAlertsService) {}

ngOnInit() {
  this.alertsService.onAlertOk.subscribe(id => {
    console.log('DEMO onAlertOk', id);
    this.alerts.push({id: id, action: 'confirm'});
  });

  this.alertsService.onAlertCancel.subscribe(id => {
    console.log('DEMO onAlertCancel', id);
    this.alerts.push({id: id, action: 'cancel'});
  });
}
```

## Alerts input properties

|   Attr  |      Sub attr     | Sub attr |   Type  | Details                                                                                                                |
| :-----: | :---------------: | :------: | :-----: | ---------------------------------------------------------------------------------------------------------------------- |
|  title  |                   |          |  string | Title of alert. Optional                                                                                               |
| message |                   |          |  string | Message of alert. Required                                                                                             |
| options |                   |          |  object | Alert options. Optional                                                                                                |
|         |         id        |          |  string | Alert id. Optional, but must be set for correct work with alerts actions events.                                       |
|         |       theme       |          |  object | Alert theme object. Optional                                                                                           |
|         |                   |   name   |  string | Alert theme name. Optional. Means real existing app theme                                                              |
|         |                   |   class  |  string | Alert theme class. Optional. Class to be attached on the same html element to redefine some given theme styles         |
|         |        icon       |          |  object | Alert icon object. Optional.                                                                                           |
|         |                   |   show   | boolean | If to show alert icon. Optional. By default not shown                                                                  |
|         |                   |   type   |  string | Alert icon type. Optional, but must be set when icon name is provided                                                  |
|         |                   |   name   |  string | Alert icon name. Optional.                                                                                             |
|         |    confirmIcon    |          |  object | Alert icon object for cancel button. Optional.                                                                         |
|         |                   |   name   |  string | Icon name                                                                                                              |
|         |                   |   type   |  string | Icon type                                                                                                              |
|         |     cancelIcon    |          |  object | Alert icon object for cancel button. Optional.                                                                         |
|         |                   |   name   |  string | Icon name                                                                                                              |
|         |                   |   type   |  string | Icon type                                                                                                              |
|         |      timeOut      |          |  number | Alert timeout                                                                                                          |
|         |    actionButton   |          | boolean | If to show action button                                                                                               |
|         |    closeButton    |          | boolean | If to show close button                                                                                                |
|         |    progressBar    |          | boolean | If to show progressBar                                                                                                 |
|         |   positionClass   |          |  string | Possition class to set alert possition. Can be: toast-top-left, toast-top-right, toast-bottom-left, toast-bottom-right |
|         |    messageClass   |          |  string | Class for alert message                                                                                                |
|         |     titleClass    |          |  string | Class for alert title                                                                                                  |
|         |    autoDismiss    |          | boolean | Dismiss current toast when max is reached                                                                              |
|         |  extendedTimeOut  |          |  number | Alert time to close after hover on alert                                                                               |
|         |     maxOpened     |          |  number | Maximum number of alerts opened                                                                                        |
|         |    newestOnTop    |          | boolean | If to open newest alert on top of other alerts                                                                         |
|         |   onActivateTick  |          | boolean | Fire ApplicationRef.tick() from the toast component when activated. Helps show toast from a websocket event            |
|         |    tapToDismiss   |          | boolean | Close on click                                                                                                         |
|         | preventDuplicates |          | boolean | To prevent duplicates                                                                                                  |

## Alerts functions

|      Function      | Details                                                  |
| :----------------: | -------------------------------------------------------- |
| showMessage(alert) | Function to show info alert. Parameter: alert object.    |
| showWarning(alert) | Function to show warning alert. Parameter: alert object. |
|  showError(alert)  | Function to show error alert. Parameter: alert object.   |
|     clearAll()     | Function to close all alerts                             |
|     clearLast()    | Function to close last alert                             |
