Lorem ipsum dolor sit amet, consectetur adipiscing...
\n![\"Downloads](\"https://img.shields.io/npm/dm/web-dialog.svg\")
\r\n![\"NPM](\"https://img.shields.io/npm/v/web-dialog.svg\")
\r\n![\"Dependencies\"](\"https://img.shields.io/david/andreasbm/web-dialog.svg\")
\r\n![\"Contributors\"](\"https://img.shields.io/github/contributors/andreasbm/web-dialog.svg\")
\n\t\n\t\t\r\n\r\n\r\n\n\t
\n A highly accessible, customizable and lightweight dialog.\n Try the dialog yourself at Codepen. Go here to see a demo https://appnest-demo.firebaseapp.com/web-dialog/.\n
\n\n\n\t![](\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example1.png\")
\n
\n\n\r\n[](#center-the-dialog)\r\n\r\n## ➤ Center the dialog\n\nYou probably noticed the dialog is not centered as default. This is because, as default, the dialog uses the container around the element to scroll in instead of using the inside of the dialog. To center the dialog you can add the `center` attribute or set the `.center` property to true.\n\n```html\n![](\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example2.png\")
\n\n\r\n[](#sticky-header-and-footer)\r\n\r\n## ➤ Sticky header and footer\n\nWhat about a sticky header and footer? No problem at all. Just make sure to use `header`, `article` and `footer` HTML tags for your content and center the dialog. This will style the content in such as way that the footer and header is sticky.\n\n```html\nLorem ipsum dolor sit amet, consectetur adipiscing...
\n![](\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example4.png\")
\n\n\r\n[](#customize)\r\n\r\n## ➤ Customize\n\nThe dialog can be customized by setting some CSS variables or modifying the shadow parts. You can read about all of the CSS variables you can set and shadow parts you can change [here](#-documentation). Let's say you want to create a fullscreen dialog. Then you could change the following CSS variable to achieve it.\n\n```css\nweb-dialog {\n --dialog-container-padding: 0;\n --dialog-border-radius: 0;\n --dialog-max-width: 100vw;\n --dialog-height: 100%;\n --dialog-animation-duration: 0;\n}\n```\n\n```html\nLorem ipsum dolor sit amet, consectetur adipiscing...
\n![](\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example5.png\")
\n\n\r\n[](#events)\r\n\r\n## ➤ Events\n\nThe dialog can dispatch 3 different events.\n\n* **open** - The first event is the `open` event which is dispatched when the dialog opens.\n* **closing** - The second event is the `closing` event which is dispatched when the dialog is about to close due to the user clicking on the backdrop or pressing escape. If `.preventDefault()` is called on this event the dialog won't close.\n* **close** - The third event is the close event which is dispatched when the dialog closes. If `.result` is set on the dialog, the `.detail` property of the `close` event will have the value of the result.\n\nHere's an example on how you'd use the events.\n\n```js\nconst $dialog = document.querySelector(\"web-dialog\");\n\n$dialog.addEventListener(\"open\", () => {\n console.log(\"The dialog opened!\");\n});\n\n$dialog.addEventListener(\"closing\", () => {\n console.log(\"The dialog is about to close because the backdrop was clicked or because escape was pressed!\");\n\n // Don't allow the dialog to close\n e.preventDefault();\n});\n\n$dialog.addEventListener(\"close\", e => {\n console.log(\"The dialog closed!\", e.detail);\n});\n```\n\n\r\n[](#opendialog)\r\n\r\n## ➤ `openDialog(...)`\n\nIf you want to use the dialog programmatically you can use the `openDialog(...)` function. This function makes sure to append content inside the dialog, adds it to the DOM and removes it when it closes. You can give an object with the following fields to the function.\n\n* **$content** - A DOM element that will be placed inside the dialog as content. This can also be a function that takes the dialog and appends the content for the dialog.\n* **$container** - A DOM element where the dialog will be placed inside. As default this is the `body` element.\n* **center** - Whether the dialog is centered. As default this is false.\n* **initialize** - A function that returns an instance of `WebDialog`. This is smart to overwrite if you for example have extended the WebDialog class and want to open that custom dialog instead.\n\nIn it's most simple form you can open a dialog like this:\n\n```js\nimport {openDialog} from \"web-dialog\";\n\nconst $template = document.createElement(\"template\");\n$template.innerHTML = `\n This is some content for the dialog!\n`;\n\nopenDialog({\n $content: $template.content.cloneNode(true)\n});\n```\n\nWhen the `openDialog(...)` function above is called it will look like this.\n\n![](\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example8.png\")
\n\nThe `openDialog(...)` function returns an object with the following two properties.\n\n* **$dialog** - The dialog HTML element.\n* **resolver** - A promise that will resolve with the result of the dialog when closed.\n\nBased on the information above, here's a little more advanced example.\n\n```js\nimport {openDialog} from \"web-dialog\";\n\n// Create a template\nconst $template = document.createElement(\"template\");\n$template.innerHTML = `\n \n \n`;\n\n// Open the dialog\nconst {$dialog, resolver} = openDialog({\n $content: $template.content.cloneNode(true)\n});\n\n// Attach an event listener that sets the closes the dialog with the result when a button is clicked\n$dialog.querySelectorAll(\"button\").forEach($button => $button.addEventListener(\"click\", e => {\n const result = e.target.dataset.value;\n $dialog.close(result);\n}));\n\n// Wait for the result\nconst result = await resolver;\n\n// Print the result\nconsole.log(`The result was ${result}`);\n```\n\n\r\n[](#lit-html--lit-element)\r\n\r\n## ➤ lit-html & lit-element\n\nHere's a little trick for you if you use [lit-element](https://github.com/polymer/lit-element) or [lit-html](https://github.com/polymer/lit-html). If you want to quickly open a dialog with some content you can use the render function of `lit-html` like this.\n\n```js\nimport {openDialog} from \"web-dialog\";\nimport {render} from \"lit-html\";\n\nopenDialog({\n $content: $dialog => render(html`\n ![](\"https://raw.githubusercontent.com/andreasbm/web-dialog/master/examples/example9.png\")
\n\n\r\n[](#documentation)\r\n\r\n## ➤ Documentation\n\nThis section documents the `attributes`, `css variables` and `slots` of the web components this library exposes.\n\n### web-dialog\n\nA dialog web component that can be used to display highly interruptive messages.\n\n#### Properties\n\n| Property | Attribute | Type | Description |\n|-------------------|-----------|------------------|---------------------------------------------|\n| `center` | `center` | | Whether the dialog is centered on the page. |\n| `onBackdropClick` | | | |\n| `onKeyDown` | | | |\n| `open` | `open` | | Whether the dialog is opened. |\n| `result` | | `R \\| undefined` | |\n\n#### Methods\n\n| Method | Type | Description |\n|-------------------|-----------------------------------|--------------------------------------------------|\n| `assertClosing` | `(): any` | Dispatches an event that, if asserts whether the dialog can be closed.![\"Andreas](\"https://avatars1.githubusercontent.com/u/6267397?s=460&v=4\")
](https://twitter.com/andreasmehlsen) | [