# ef-overlay-menu

Overlay that supports single-level and multi-level menus

## Attributes

| Attribute                    | Type      | Description                                      |
|------------------------------|-----------|--------------------------------------------------|
| `horizontal-offset`          | `number`  | A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
| `lock-position-target`       | `boolean` | Set to true to lock position target              |
| `no-cancel-on-esc-key`       | `boolean` | Set to true to disable canceling the overlay with the ESC key |
| `no-cancel-on-outside-click` | `boolean` | Set to true to disable canceling the overlay by clicking outside it |
| `transition-style`           | `string`  | Set the transition style                         |
| `vertical-offset`            | `number`  | A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
| `with-backdrop`              | `boolean` | True to show backdrop                            |

## Properties

| Property                 | Attribute                    | Type                         | Default | Description                                      |
|--------------------------|------------------------------|------------------------------|---------|--------------------------------------------------|
| `compact`                | `compact`                    | `boolean`                    | false   | Switch to compact style menu                     |
| `data`                   |                              | `OverlayMenuData\|undefined` |         | Construct the menu from data object.<br />Cannot be used with internal content |
| `horizontalOffset`       | `horizontal-offset`          | `number`                     | 0       | A pixel value that will be added to the position calculated on the horizontal axis. The offset will be applied either to the `left` or `right` depending on the `positionTarget` |
| `lockPositionTarget`     | `lock-position-target`       | `boolean`                    | false   | Set to true to lock position target              |
| `noCancelOnEscKey`       | `no-cancel-on-esc-key`       | `boolean`                    | false   | Set to true to disable canceling the overlay with the ESC key |
| `noCancelOnOutsideClick` | `no-cancel-on-outside-click` | `boolean`                    | false   | Set to true to disable canceling the overlay by clicking outside it |
| `offset`                 | `offset`                     | `number`                     | 0       | A pixel value that will be added to the position calculated on the vertical or horizontal axis. The offset is applied dynamically depending on the `positionTarget` |
| `opened`                 | `opened`                     | `boolean`                    | false   | True if the menu is currently displayed          |
| `position`               | `position`                   | `Position[] \| undefined`    |         | Set position and align against the attach target. |
| `positionTarget`         |                              | `HTMLElement \| null`        | null    | Position next to the HTML element                |
| `transitionStyle`        | `transition-style`           | `string \| null`             | null    | Set the transition style                         |
| `value`                  | `value`                      | `string`                     | ""      | Returns the first selected item value.           |
| `values`                 |                              | `string[]`                   | []      | Array of item's values                           |
| `verticalOffset`         | `vertical-offset`            | `number`                     | 0       | A pixel value that will be added to the position calculated on the vertical axis. The offset will be applied either to the `top` or `bottom` depending on the `positionTarget` |
| `withBackdrop`           | `with-backdrop`              | `boolean`                    | false   | True to show backdrop                            |
| `x`                      | `x`                          | `number \| undefined`        |         | Set a specific x coordinate                      |
| `y`                      | `y`                          | `number \| undefined`        |         | Set a specific y coordinate                      |

## Events

| Event            | Description                                      |
|------------------|--------------------------------------------------|
| `item-trigger`   | Fired when the user taps on item.                |
| `opened-changed` | Fired when the user changes open state of the overlay e.g. when the user presses escape key or uses close button to close the overlay. The event is not triggered if `opened` property is changed programmatically. |