# @anypoint-web-components/anypoint-dialog

> A Material design dialog with compatibility with Anypoint platform

Latest version **0.1.10** (published 2021-09-27) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @anypoint-web-components/anypoint-dialog
pnpm add @anypoint-web-components/anypoint-dialog
yarn add @anypoint-web-components/anypoint-dialog
bun add @anypoint-web-components/anypoint-dialog
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.10 |
| Published | 2021-09-27 |
| First published | 2019-09-07 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 42.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | jarrodek, twoplustwoone, lbauret, carowright |
| Keywords | anypoint-web-components, dropdown-menu, icon-button |

## Links

- npm: https://www.npmjs.com/package/@anypoint-web-components/anypoint-dialog
- Repository: https://github.com/anypoint-web-components/anypoint-dialog
- Homepage: https://github.com/anypoint-web-components/anypoint-dialog#readme
- Issues: https://github.com/anypoint-web-components/anypoint-dialog/issues
- npm.io page: https://npm.io/package/@anypoint-web-components/anypoint-dialog

## Dependencies (4)

- [lit-html](https://npm.io/package/lit-html.md) ^1.4.1
- [lit-element](https://npm.io/package/lit-element.md) ^2.5.1
- [@open-wc/dedupe-mixin](https://npm.io/package/@open-wc/dedupe-mixin.md) ^1.3.0
- [@advanced-rest-client/arc-overlay-mixin](https://npm.io/package/@advanced-rest-client/arc-overlay-mixin.md) ^1.2.0

## Alternatives

- [@fortawesome/react-fontawesome](https://npm.io/package/@fortawesome/react-fontawesome.md) — 2.2M weekly downloads
- [roboto-fontface](https://npm.io/package/roboto-fontface.md) — 196.0K weekly downloads
- [@react-native-vector-icons/common](https://npm.io/package/@react-native-vector-icons/common.md) — 150.4K weekly downloads
- [@procore/core-icons](https://npm.io/package/@procore/core-icons.md) — 4.6K weekly downloads
- [@react-md/material-icons](https://npm.io/package/@react-md/material-icons.md) — 1.6K weekly downloads

## Recent versions

- 0.1.10 (latest) — 2021-09-27
- 0.1.9 — 2021-03-30
- 0.1.8 — 2021-03-22
- 0.1.7 — 2021-02-06
- 0.1.6 — 2020-10-12
- 0.1.5 — 2020-10-11
- 0.1.4 — 2020-08-03
- 0.1.3 — 2020-06-22
- 0.1.1 — 2019-09-11
- 0.1.0 — 2019-09-07

## README

# anypoint-dialog

A material design dialog, also styled for Anypoint platform.

Anypoint web components are set of components that allows to build Anypoint enabled UI in open source projects.

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

[![Published on NPM](https://img.shields.io/npm/v/@anypoint-web-components/anypoint-dialog.svg)](https://www.npmjs.com/package/@anypoint-web-components/anypoint-dialog)

[![tests](https://github.com/anypoint-web-components/anypoint-dialog/actions/workflows/tests.yml/badge.svg)](https://github.com/anypoint-web-components/anypoint-dialog/actions/workflows/tests.yml)

## Usage

### Installation

```sh
npm install @anypoint-web-components/anypoint-dialog --save
```

### In an html file

```html
<html>
  <head>
    <script type="module">
      import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
      import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
      import '@anypoint-web-components/anypoint-button/anypoint-button.js';
    </script>
  </head>
  <body>
    <anypoint-dialog>
      <h2>Dialog title</h2>
      <anypoint-dialog-scrollable>
        <p>Long content...</p>
      </anypoint-dialog-scrollable>
      <div class="buttons">
        <anypoint-button data-dialog-dismiss>Cancel</anypoint-button>
        <anypoint-button data-dialog-confirm autofocus>OK</anypoint-button>
      </div>
    </anypoint-dialog>
    <script>
    {
      document.querySelector('anypoint-dialog').addEventListener('overlay-closed', (e) => {
        console.log(e.detail.canceled); // only when outside click or ESC key press
        console.log(e.detail.confirmed); // true when "dialog-confirm" was pressed
      });
    }
    </script>
  </body>
</html>
```

### In a LitElement

```js
import { LitElement, html } from 'lit-element';
import '@anypoint-web-components/anypoint-dialog/anypoint-dialog.js';
import '@anypoint-web-components/anypoint-dialog/anypoint-dialog-scrollable.js';
import '@anypoint-web-components/anypoint-button/anypoint-button.js';

class SampleElement extends LitElement {
  render() {
    return html`
    <anypoint-dialog @overlay-closed="${this._dialogCloseHandler}">
      <h2>Dialog title</h2>
      <anypoint-dialog-scrollable>
        <p>Long content...</p>
      </anypoint-dialog-scrollable>
      <div class="buttons">
        <anypoint-button data-dialog-dismiss>Cancel</anypoint-button>
        <anypoint-button data-dialog-confirm autofocus>OK</anypoint-button>
      </div>
    </anypoint-dialog>
    `;
  }

  _dialogCloseHandler(e) {
    if (e.detail.confirmed) {
      // ...
    }
  }
}
customElements.define('sample-element', SampleElement);
```

### Action buttons

Button with "dialog-dismiss" attribute will dismiss the dialog with "confirmed" property on a detail object of "overlay-closed" event set to false.

Button with "dialog-confirm" attribute will close the dialog with "confirmed" property on a detail object of "overlay-closed" event set to true.

### Scrollable content

If the content of the dialog may exceed window size then use `anypoint-dialog-scrollable` as a content wrapper.
It has additional logic to keep the content in place. Otherwise use regular div or paragraph.

### Modal dialog

Set "modal" property to true to render the dialog over a scrim, with ESC button handler and mouse click disabled.
The user can dismiss the dialog only by using dialog actions.

## Development

```sh
git clone https://github.com/anypoint-web-components/anypoint-dialog
cd anypoint-dialog
npm install
```

### Running the demo locally

```sh
npm start
```

### Running the tests

```sh
npm test
```

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