npm package: @neoprospecta/angular-dialog
Description: Angular Dialog
Latest version: 4.0.3

# Angular Dialog for Angular 2+

### A service to easily create custom dialogs.

## How to install:
#### Have two ways to install angular-dialog:
- **First way**: 

    1. Install dependence directly from NPM, running this command on terminal in the project's root folder.

        ```npm install @neoprospecta/angular-dialog --save```

- **Second way**: 

    1. Declare **angular-dialog** as dependence into **package.json** file.

        ```"@neoprospecta/angular-dialog":"^4.0.0" ```

    2. Install dependence, running this command on terminal in the project's root folder.

        ```npm install```

## How to use:
- Import **DialogModule** in the project's root module.

```ts
import { DialogModule } from '@neoprospecta/angular-dialog';

@NgModule({
    ...
  imports: [
    DialogModule
  ],
    ...
})
export class AppModule { }
```

- Import **DialogService** in project's component that needs to use.
```ts
import { DialogService } from '@neoprospecta/angular-dialog';

@Component(...)
export class AppComponent {
    ...
  constructor(
    private dialogService: DialogService
  ){ }
  ...
}
```
- Into same component create a function to open the dialog from DOM, for example *openDialog()*.
- Create new array of *DialogAction* and push the *actions* with their *onClick() functions* that want to have in dialog respectively.
- Create new *Dialog* with the previous actions.
- Call function *open()* from *DialogService* passing by parameter the *Dialog* previously created.

```ts
import { DialogAction } from '@neoprospecta/angular-dialog';
import { Dialog } from '@neoprospecta/angular-dialog';
    ...
    myFunction() {
        console.log('Button cliked!');
    }
    
    openDialog() {
        let dialogActions: DialogAction[] = new Array<DialogAction>();
        
        dialogActions.push(
          {
            name: 'Action Name', 
            onClick: () => this.myFunction(), 
            color: 'primary', 
            position: 'right', 
            closeDialogAfterClick: true
          });
    
        let dialog: Dialog = new Dialog(
          {
            title: 'Dialog Test', 
            content: '<p>Which option do you choose?</p>',
            actions: dialogActions, 
            disableClose: false, 
            width: '400px',
            height: '170px'
          });
          
        this.dialogService.open(dialog);
    }
```

- To aplication work right, need to import material/theming and customize the theme of your application. [Click here](https://github.com/angular/material2/blob/master/guides/theming.md) for more information.
    - For example, create file *my-theme.scss* with this code (change as you want the colors of *$primary, $accent, $warn*, etc).
```scss
// Import Angular Material Design components themes
@import '~@angular/material/theming';
@include mat-core();

// Default App Custom theme
$primary: mat-palette($mat-teal, 500);
$accent: mat-palette($mat-amber);
$warn: mat-palette($mat-orange);
$theme: mat-light-theme($primary, $accent, $warn);
@include angular-material-theme($theme);
```

- Done. If you want to make dinamic style based on theme continue the tutorial. 
    - Crate a file named _all-theme.scss and include this code:
```scss
// Import all App custom components theme.
@import '~@neoprospecta/angular-dialog/theming/_dialog-theme.component';

// Apply the theme.
@mixin app-components-theme($theme) {
	@include dialog-theme($theme);
}
```
- Edit again the file *my-theme.scss*.
    - Include this code:
```scss
...
@import './all-theme';
// Apply Angular Material Design global styles
@include app-components-theme($theme);
```

## Features
#### **Open** dialog
- Open the dialog passed by parameter.
```ts
this.dialogService.open(new Dialog({...}));
```

#### Call function onClick dialog buttons
- When create an DialogAction need to add new Function in onClick attr.
```ts
new DialogAction({..., onClick: () => this.myFunction(), ...});
```

#### Disable dialog closure when dialog buttons is clicked
- When create an DialogAction set the attr *closeDialogAfterClick* to *true*;
```ts
new DialogAction({..., closeDialogAfterClick: true, ...});
```

## Attributes of DialogAction
| Atribute | Type | Description | Example | Default | 
| ------ | ------ | ------ | ------ | ------ |
| name | string | Name of button that appears in writed in him. | 'Save', 'Cancel', .. | - |
| onClick | Function | Function of your component called from dialog when the button is clicked. | save() {...}, cancel() {...}, ... | - |
| color | string | Color of button's background. Only theme colors. | 'default', 'primary', 'warn', 'accent', 'background' or 'foreground' | - |
| position | string | Position of button in dialog. This is optional. | 'left', 'right' | 'right' |
| closeDialogAfterClick | boolean | Configure to close dialog after button was cliked. This is optional.  | true, false | true |

## Attributes of Dialog
| Atribute | Type | Description | Example | Default | 
| ------ | ------ | ------ | ------ | ------ |
| title | string | Title of dialog that appears on top of it. | 'Deletion warning!' | - |
| content | any | Content of dialog that appers on middle of it. | 'You are deleting an important data <br/> are you sure?' | - |
| actions | DialogAction[] | Array of actions. | {name: 'Skip', onClick: () => this.skip(), color: 'primary',} | - |
| disableClose | boolean | This configure if the dialog will close when user click out of dialog or press ESC. | true, false | false |
| width | string | Customize width of dialog. | '500px' | auto |
| height | string | Customize height of dialog. | '300px' | auto |

## License

© Neoprospecta | MIT LICENSE

[![N|Solid](https://s3-sa-east-1.amazonaws.com/neoprospecta/images/marca-horizontal-120h.png)](https://neoprospecta.com.br/)