# ef-dialog

Popup window, designed to contain and show any HTML content.
It provides modal and dragging functionality,
and also allows custom footers and control buttons to be used.

## Attributes

| Attribute              | Type                  | Default | Description                                      |
|------------------------|-----------------------|---------|--------------------------------------------------|
| `full-screen`          | `boolean`             |         | Set dialog to full screen                        |
| `no-cancel-on-esc-key` | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
| `position-target`      | `string \| undefined` |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |

## Properties

| Property                 | Attribute              | Type                  | Default | Description                                      |
|--------------------------|------------------------|-----------------------|---------|--------------------------------------------------|
| `draggable`              | `draggable`            | `boolean`             | false   | Should the dialog be draggable                   |
| `fullScreen`             | `full-screen`          | `boolean`             | false   | Set dialog to full screen                        |
| `header`                 | `header`               | `string \| null`      | null    | Set Header/Title of the dialog                   |
| `noCancelOnEscKey`       | `no-cancel-on-esc-key` | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
| `noCancelOnOutsideClick` |                        | `boolean`             | true    | Close dialog when user clicked outside the dialog |
| `opened`                 | `opened`               | `boolean`             | false   | Set dialog to open                               |
| `positionTarget`         | `position-target`      | `string \| undefined` |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
| `x`                      | `x`                    | `string \| undefined` |         | Set a specific x coordinate of dialog            |
| `y`                      | `y`                    | `string \| undefined` |         | Set a specific y coordinate of dialog            |

## Methods

| Method  | Type       | Description                                |
|---------|------------|--------------------------------------------|
| `refit` | `(): void` | Clear all cached values and fit the popup. |

## Events

| Event            | Description                                      |
|------------------|--------------------------------------------------|
| `cancel`         | Fired when dialog is closed by user clicked a default Cancel button, clicked outside to close dialog or press ESC to close the dialog. Prevent default to stop default action |
| `confirm`        | Fired when dialog is closed by user clicked a default OK button. Prevent default to stop default action |
| `opened-changed` | Fired when the user changes open state of the dialog e.g. when the user presses escape key or uses close button to close the dialog. The event is not triggered if `opened` property is changed programmatically. |

## Slots

| Name     | Description                                      |
|----------|--------------------------------------------------|
| `footer` | Hide default OK and Cancel button and replace dialog's footer with your custom content. |