@flk/modal/README.md

Modal popup for Falak framework

# Modal
A simple lightweight modal implementation for `FalakJS`.

# Installation
`flk install flk-modal`

# Table of contents
- [Modal](#modal)
- [Installation](#installation)
- [Table of contents](#table-of-contents)
- [Usage](#usage)
  - [Using the close event](#using-the-close-event)
- [Available attributes](#available-attributes)
- [Configurations](#configurations)


# Usage
In any component you want to use the modal, just include it with an `if statement`.

`home-page.component.html`
```html
<h1>Home sweet home</h1>

<flk-modal *if="this.showProfile" header="My profile info">
  <!-- Modal body here -->
</flk-modal>
```

## Using the close event
As the `*if` statement is used to initialize the modal component, we need to tell the component when it closes to change our `if` criteria so the modal no longer be opened.

`close` event handles this case.

`home-page.component.html`
```html
<h1>Home sweet home</h1>

<flk-modal *if="this.showProfile" (close)="this.showProfile = null" header="My profile info">
  <!-- Modal body here -->
</flk-modal>
```

So when the modal is closed, it changes our opening condition to be `null` thus the modal no longer is opened until the condition `showProfile` is set to `true` again.

The `header` attribute is used to set the modal header text, it could be used as a `static` attribute `header="header text"` or a dynamic attribute `[header]="this.profileHeader"`.

# Available attributes
Here is the full list of attributes

| Attribute          | Type                                                                 | Default value   | Description                                                                            |
| ------------------ | -------------------------------------------------------------------- | --------------- | -------------------------------------------------------------------------------------- |
| **header**         | [option](https://github.com/falakjs/Falak/wiki/Component-UI#options) | `N/a`           | Modal header text.                                                                     |
| **id**             | [option](https://github.com/falakjs/Falak/wiki/Component-UI#options) | `Random string` | Modal id for more control.                                                             |
| **class**          | [option](https://github.com/falakjs/Falak/wiki/Component-UI#options) | `Random string` | The class is passed to the `modal content` wrapper.                                    |
| **close-keyboard** | [prop](https://github.com/falakjs/Falak/wiki/Component-UI#props)     | `true`          | If set to true, the modal will be closed when the user presses `esc` key.              |
| **close-btn**      | [prop](https://github.com/falakjs/Falak/wiki/Component-UI#props)     | `true`          | If set to true, the modal will be closed when the user clicks on the top `close` icon. |
| **close-backdrop** | [prop](https://github.com/falakjs/Falak/wiki/Component-UI#props)     | `true`          | If set to true, the modal will be closed when the user presses on the dimmed overlay.  |
| **theme**          | [prop](https://github.com/falakjs/Falak/wiki/Component-UI#props)     | `default`       | Default theme is white modal, available options `default`, `dark`, `dark-transparent`. |

# Configurations
The following list could be set as default value in the `config.js` file

**Main Configuration key**: `modal`

| key      | Type      | Default value | Description                                                        |
| -------- | --------- | ------------- | ------------------------------------------------------------------ |
| keyboard | `Boolean` | **true**      | Close the modal when user presses the `esc` key.                   |
| closeBtn | `boolean` | **true**      | Close the modal when user click on the `close` icon.               |
| backdrop | `boolean` | **true**      | Close the modal when the user presses on the dimmed overlay. icon. |
| theme    | `string`  | **default**      | Modal theme, available options `default`, `dark`, `dark-transparent`. |