# ef-color-dialog

Displays a colour picker dialog,
for selecting a predefined range of colours.

## Attributes

| Attribute                    | Type                  | Default | Description                                      |
|------------------------------|-----------------------|---------|--------------------------------------------------|
| `no-cancel-on-esc-key`       | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
| `no-cancel-on-outside-click` | `boolean`             |         | Prevents dialog to close when user clicks outside the dialog. |
| `position-target`            | `string \| undefined` |         | Set position of dialog i.e. `top`, `right`, `left`, `bottom`, `center` or combination of theme e.g. `top right`. |
| `with-backdrop`              | `boolean`             |         | False to hide backdrop.                          |
| `with-shadow`                | `boolean`             |         | False to remove shadow for dialog component.     |

## Properties

| Property                 | Attribute                    | Type                  | Default | Description                                      |
|--------------------------|------------------------------|-----------------------|---------|--------------------------------------------------|
| `allowNocolor`           | `allow-nocolor`              | `boolean`             | false   | Set the palettes to activate no-color option     |
| `blue`                   | `blue`                       | `string`              | ""      | Blue value from 0 to 255                         |
| `green`                  | `green`                      | `string`              | ""      | Green value from 0 to 255                        |
| `header`                 | `header`                     | `string \| null`      | null    | Set Header/Title of the color dialog             |
| `hex`                    | `hex`                        | `string`              | ""      | Value of hex without # sign, supports both 3-digits shorthand hex and regular 6-digits hex |
| `noCancelOnEscKey`       | `no-cancel-on-esc-key`       | `boolean`             | false   | Prevents dialog to close when user presses ESC key |
| `noCancelOnOutsideClick` | `no-cancel-on-outside-click` | `boolean`             | true    | Prevents dialog to close when user clicks 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`. |
| `red`                    | `red`                        | `string`              | ""      | Red value from 0 to 255                          |
| `value`                  | `value`                      | `string`              | ""      | Value of selected color from color dialog will be written here as hex value<br />e.g. "#00f" or "#0000ff" |
| `withBackdrop`           | `with-backdrop`              | `boolean`             | true    | False to hide backdrop.                          |
| `withShadow`             | `with-shadow`                | `boolean`             | true    | False to remove shadow for dialog component.     |
| `x`                      | `x`                          | `string \| undefined` |         | Set a specific x coordinate of dialog            |
| `y`                      | `y`                          | `string \| undefined` |         | Set a specific y coordinate of dialog            |

## Events

| Event            | Description                                      |
|------------------|--------------------------------------------------|
| `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. |
| `value-changed`  | Fired when the user commits a value change. The event is not triggered if the value is changed programmatically. |