## class: `WyOverlay`, `wy-overlay`

Modal overlay based on `<dialog>` element.
See [MDN: Dialog](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog).

Uses the native Popover API.
See [MDN: Popover API](https://developer.mozilla.org/en-US/docs/Web/API/Popover_API).

**Used sub components**

*   [`<wy-titlebar>`](./wy-titlebar)
*   [`<wy-button>`](./wy-button)
*   [`<wy-icon>`](./wy-icon)

### Fields

| Name        | Type                    | Default   | Description                                                                                                                                                                                                                                                                       | Inherited From |
| ----------- | ----------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `show`      | `boolean`               | `true`    | Whether the overlay should be shown.                                                                                                                                                                                                                                              |                |
| `type`      | `OverlayAppearanceType` | `"modal"` | Appearance of the overlay.&#xA;&#xA;- "modal" - Centered overlay with blocked background.&#xA;- "sheet" - Bottom overlay without background blocking.&#xA;- "drawer" - Side overlay without background blocking.&#xA;- "full" - Full window overlay.&#xA;- "none" - No rendering. |                |
| `maximized` | `boolean`               | `false`   | Maximized layout for the modal.                                                                                                                                                                                                                                                   |                |
| `noHeader`  | `boolean`               | `false`   | Remove the header.                                                                                                                                                                                                                                                                |                |

### Methods

| Name      | Description                                        | Parameters                    | Return | Inherited From |
| --------- | -------------------------------------------------- | ----------------------------- | ------ | -------------- |
| `close`   | Close the modal.                                   |                               |        |                |
| `isModal` | Checks whether the overlay is using the modal api. | `type: OverlayAppearanceType` |        |                |

### Events

| Name    | Type             | Description             | Inherited From |
| ------- | ---------------- | ----------------------- | -------------- |
| `close` | `CloseEventType` | When overlay is closed. |                |

### Attributes

| Name        | Field     | Inherited From |
| ----------- | --------- | -------------- |
| `show`      | show      |                |
| `type`      | type      |                |
| `maximized` | maximized |                |
| `noHeader`  | noHeader  |                |

### CSS Parts

| Name                  | Description                                                    |
| --------------------- | -------------------------------------------------------------- |
| `wy-dialog`           | Base for all dialogs.                                          |
| `wy-dialog-modal`     | Dialog with modal backdrop.                                    |
| `wy-overlay`          | Dialog content.                                                |
| `wy-overlay-titlebar` | Dialog titlebar.                                               |
| `wy-modal`            | Modal overlay content with full viewport size.                 |
| `wy-modal-centered`   | Modal overlay with limited size in the center of the viewport. |
| `wy-sheet`            | Overlay in the bottom.                                         |
| `wy-drawer`           | Overlay in the right side.                                     |
| `wy-open`             | When dialog content is shown.                                  |
| `wy-maximized`        | When modal is maximized size.                                  |

### Slots

| Name      | Description                                |
| --------- | ------------------------------------------ |
|           | Default overlay content.                   |
| `header`  | The full header when \`header' is enabled. |
| `title`   | Text in the \`header\`.                    |
| `actions` | Buttons in the \`header\`.                 |

<details><summary>Private API</summary>

### Fields

| Name          | Privacy   | Type | Default                           | Description | Inherited From |
| ------------- | --------- | ---- | --------------------------------- | ----------- | -------------- |
| `exportParts` | protected |      | `new ShadowPartsController(this)` |             |                |
| `viewportRef` | private   |      |                                   |             |                |

</details>

<hr/>

## Exports

| Kind                        | Name         | Declaration | Module                          | Package |
| --------------------------- | ------------ | ----------- | ------------------------------- | ------- |
| `js`                        | `WyOverlay`  | WyOverlay   | lib/components/ui/wy-overlay.ts |         |
| `custom-element-definition` | `wy-overlay` | WyOverlay   | lib/components/ui/wy-overlay.ts |         |
