<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)	etools-dialog title shadow part	{}
etools-dialog::part(ed-button-styles)	etools-dialog button shadow part	{}
etools-dialog::part(ed-scrollable)	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:

Version match	Result
1.2.3	match
1.2.3-pre	match
1.2.3+build	match
1.2.3-pre+build	match
v1.2.3-pre+build	match
1.2	no match

You can see more details here