raven-dialog

Raven Dialog for Angular

An Angular dialog box component that makes use of the HTML <dialog> element for improved accessibility.

Features

• Keyboard/touch accessible
• Easily styled with CSS variables
• Use CSS transforms to customize open/close transitions

Installation

Install into your Angular project using NPM.

npm install raven-dialog --save

Import the DialogModule into your module.

import { DialogModule } from 'raven-dialog';

@NgModule({
  imports: [
    DialogModule,
    // ...
  ],
  // ...
})
export class AppModule { }

Usage

Add a <raven-dialog> element to your template, and open or close it by binding a variable to the open attribute.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <raven-dialog heading="Sample Title"
      [(open)]="isOpen"
      [modal]="true">
      <p>Dialog box content here.</p>
    </raven-dialog>
  `,
  styles: []
})
export class AppComponent {
  isOpen = false;
}

Options

Option	Type	Description	Default Value
heading	string	An optional heading to place at the top of the dialog.	""
open	boolean	Whether the dialog is open or not.	false
modal	boolean	Whether the dialog should be modal or not.	false

Styling

CSS variables are used for styling. Example:

raven-dialog {
  --dialog-border: 2px solid #ccc;
  --dialog-border-radius: 5px;
}

Available CSS Variables

Variable	Description	Default Value
--dialog-margin	Minimum left/right margin of the dialog box.	2rem
--dialog-padding	Padding around the dialog box content.	2rem;
--dialog-min-width	Minimum width of the dialog box.	20rem
--dialog-max-width	Maximum width of the dialog box.	40rem
--dialog-border	Border around the dialog box.	0
--dialog-border-radius	Border radius of dialog box.	.25rem
--dialog-transition-in	Transition when opening dialog box.	transform .2s ease-out, opacity .1s ease-out, box-shadow .2s
--dialog-transition-out	Transition when closing dialog box.	transform .2s ease-in, opacity .2s ease-in, box-shadow .2s ease-in
--dialog-transform	Transform property of dialog box.	scale(1)
--dialog-transform-in	Transform property when transitioning in.	scale(.9)
--dialog-transform-out	Transform property when transitioning out.	scale(.9)
--dialog-opacity	Opacity of dialog box.	1
--dialog-opacity-in	Dialog opacity when transitioning in.	0
--dialog-opacity-out	Dialog opacity when transitioning out.	0
--dialog-box-shadow	Box shadow around dialog box.	0 0 7rem rgba(0, 0, 0, .4)
--dialog-box-shadow-in	Box shadow when transitioning in.	0 0 0 rgba(0, 0, 0, 0.6)
--dialog-box-shadow-out	Box shadow when transitioning out.	0 0 0 rgba(0, 0, 0, 0.6)
--dialog-header-padding	Amount of padding in the header.	1rem 2rem
--dialog-header-color	Text color of the header.	#000
--dialog-header-background	Background of the header.	#f7f7f7
--dialog-header-border-bottom	Border under the header.	1px solid #eee
--dialog-backdrop-background	Background of the modal backdrop.	rgba(0, 0, 0, .2)

Browser Compatibility

Many browsers do not have native support for the <dialog> element and will require a polyfill. Check the Can I Use database for current compatibility.

The dialog-polyfill polyfill is recommended and is supported by raven-dialog. Follow these steps to install it.

1. cd to your project's root directory.
2. Run: npm install dialog-polyfill --save
3. Update your angular.json file to include the style sheet and JavaScript file from the polyfill.

   "styles": [
     "node_modules/dialog-polyfill/dialog-polyfill.css"
   ],
   "scripts": [
     "node_modules/dialog-polyfill/dialog-polyfill.js"
   ],

Development

To contribute to the development of this component, clone this repository and run npm install. Then run ng serve -o to start a development server and to open a sample page in your browser.

License

MIT license.