# @doubletrade/lit-dialog

> lit-dialog provides a basic dialog written in LitElement.

Latest version **3.0.0** (published 2021-07-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install @doubletrade/lit-dialog
pnpm add @doubletrade/lit-dialog
yarn add @doubletrade/lit-dialog
bun add @doubletrade/lit-dialog
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2021-07-12 |
| First published | 2019-09-27 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 107.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Laurent Zvara |
| Maintainers | roxus, rocat, phrikadel |
| Keywords | web-component, web-components, modal, dialog, litelement |

## Links

- npm: https://www.npmjs.com/package/@doubletrade/lit-dialog
- Repository: https://github.com/DoubleTrade/lit-dialog
- Homepage: https://github.com/DoubleTrade/lit-dialog#readme
- Issues: https://github.com/DoubleTrade/lit-dialog/issues
- npm.io page: https://npm.io/package/@doubletrade/lit-dialog

## Dependencies (7)

- [lit](https://npm.io/package/lit.md) 2.0.0-rc.2
- [@polymer/polymer](https://npm.io/package/@polymer/polymer.md) 3.4.1
- [@polymer/iron-icons](https://npm.io/package/@polymer/iron-icons.md) 3.0.1
- [@polymer/paper-button](https://npm.io/package/@polymer/paper-button.md) 3.0.1
- [@polymer/iron-flex-layout](https://npm.io/package/@polymer/iron-flex-layout.md) 3.0.1
- [@polymer/iron-demo-helpers](https://npm.io/package/@polymer/iron-demo-helpers.md) 3.1.0
- [@polymer/paper-icon-button](https://npm.io/package/@polymer/paper-icon-button.md) 3.0.2

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 3.0.0 (latest) — 2021-07-12
- 2.12.0 — 2021-06-29
- 2.11.0 — 2021-05-10
- 2.9.0 — 2021-04-09
- 2.8.0 — 2021-03-08
- 2.7.0 — 2021-03-08
- 2.6.0 — 2021-03-08
- 2.5.0 — 2021-03-04
- 2.4.0 — 2021-03-03
- 2.3.1 — 2021-01-15
- 2.3.0 — 2021-01-14
- 2.2.1 — 2020-11-20
- 2.1.0 — 2020-05-14
- 2.0.0 — 2020-01-22
- 1.0.9 — 2019-12-13
- … 6 more at https://npm.io/package/@doubletrade/lit-dialog/versions

## README

# lit-dialog

`lit-dialog` is a simple dialog web component.


## Install
For dev purpose:

```
git clone git@github.com:DoubleTrade/lit-dialog.git
```

For user purpose:

```
npm install @doubleTrade/lit-dialog
```

## Launch demo
```
npm run serve
```

## Lint
```
npm run lint
```

## Simple example
```html
<lit-dialog title="Title" opened .html="This is a message">
</lit-dialog>
```


```html
<lit-dialog opened .html="">
</lit-dialog>
```

## API

### Properties/Attributes

| Name         | Type      | Description                                      |
| ------------ | --------- | ------------------------------------------------ |
| `opened`     | `Boolean` | Open/close the dialog depending on boolean value |
| `title`      | `String`  | Title of the dialog                              |
| `html`       | `Object`  | Content to display, you can put a String, or a full HTML template |
| `closeOnEsc` | `Boolean` | Close on Pressing ESCAPE key  (default to false)                   |
| `closeOnClickOutside` | `Boolean` | Close on Clicking Outside the dialog  (default to false)                   |
| `closeIcon` | `Boolean` | add a close Icon (default to false)                   |
| `primaryAction` | `Boolean` | Display a button  (default to false)              |
| `primaryActionLabel` | `String` | Label of primary action (default to 'Ok')                   |
| `secondaryAction` | `Boolean` | Display a second button  (default to false)              |
| `secondaryActionLabel` | `String` | Label of primary action (default to 'Cancel')                   |

### Methods

| Name              | Description      |
| ----------------- | ---------------- |
| `open() => void`  | Open the dialog  |
| `close() => void` | Close the dialog |

### Events

| Name             | Target       | Detail             | Description                               |
| ---------------- | ------------ | ------------------ | ----------------------------------------- |
| `opened-changed` | `lit-dialog` | `{value: Boolean}` | Fired when the dialog is opened or closed |
| `primary-action-clicked` | `lit-dialog` |  | Fired when the primary action is clicked |
| `secondary-action-clicked` | `lit-dialog` |  | Fired when the secondary action is clicked |

---
_Source: https://npm.io/package/@doubletrade/lit-dialog · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._