@unicef-polymer/etools-dialog NPM

\<etools-dialog>

Simple dialog element. Main features:

simple dialog with configurable properties and 2 style themes (check demo for details)
loading message functionality for cases when dialog data is saved
dynamic dialog creation utility (ex: warning/confirmation messages displayed in dialogs)

Usage

In order for this component to work properly please first run

$ npm install --save web-animations-js

and then include web-animations-next-lite.min.js in your index.html file.

<link rel="import" href="../scripts/web-animations.html" />

Simple dialog:

<etools-dialog size="md" opened="[[opened]]" on-close="onCloseActionHandler" dialog-title="Some title">
  Dialog content goes here... as text or html
</etools-dialog>

onCloseActionHandler(e);
{
  if (e.detail.confirmed === true) {
    // ok action
  } else {
    // cancel action
  }
}

Install & serve element locally to view demo and detailed documentation.

Install

$ npm i --save @unicef-polymer/etools-dialog

Linting the code

Install local npm packages (run npm install) Then just run the linting task

$ npm run lint

Preview element locally

Install needed dependencies by running: $ npm install. Make sure you have the Polymer CLI installed. Then run $ polymer serve to serve your element application locally.

Running Tests

TODO: improve and add more tests

$ polymer test

Styling

Custom property	Description	Default
`--etools-dialog-confirm-btn-text-color`	dialog confirmation button default text color	`#fff`
`etools-dialog::part(ed-title)` -> :part(title)	etools-dialog title shadow part	`{}`
`etools-dialog::part(ed-button-styles)` -> shouldn't be needed, but there is :part(footer)	etools-dialog button shadow part	`{}`
`etools-dialog::part(ed-scrollable)` -> :part(body)	etools-dialog scrollable shadow part	`{}`

Circle CI

Package will be automatically published after tag push (git tag 1.2.3 , git push --tags). Tag name must correspond to SemVer (Semantic Versioning) rules.
Examples: