1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
13<link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
14<link rel="import" href="../paper-dialog-behavior/paper-dialog-shared-styles.html">
15<!--
16Material design: [Dialogs](https://www.google.com/design/spec/components/dialogs.html)
17
18`<paper-dialog>` is a dialog with Material Design styling and optional animations when it is
19opened or closed. It provides styles for a header, content area, and an action area for buttons.
20You can use the `<paper-dialog-scrollable>` element (in its own repository) if you need a scrolling
21content area. To autofocus a specific child element after opening the dialog, give it the `autofocus`
22attribute. See `Polymer.PaperDialogBehavior` and `Polymer.IronOverlayBehavior` for specifics.
23
24For example, the following code implements a dialog with a header, scrolling content area and
25buttons. Focus will be given to the `dialog-confirm` button when the dialog is opened.
26
27    <paper-dialog>
28      <h2>Header</h2>
29      <paper-dialog-scrollable>
30        Lorem ipsum...
31      </paper-dialog-scrollable>
32      <div class="buttons">
33        <paper-button dialog-dismiss>Cancel</paper-button>
34        <paper-button dialog-confirm autofocus>Accept</paper-button>
35      </div>
36    </paper-dialog>
37
38### Styling
39
40See the docs for `Polymer.PaperDialogBehavior` for the custom properties available for styling
41this element.
42
43### Animations
44
45Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
46is opened or closed. See the documentation in
47[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
48
49For example:
50
51    <link rel="import" href="components/neon-animation/animations/scale-up-animation.html">
52    <link rel="import" href="components/neon-animation/animations/fade-out-animation.html">
53
54    <paper-dialog entry-animation="scale-up-animation"
55                  exit-animation="fade-out-animation">
56      <h2>Header</h2>
57      <div>Dialog body</div>
58    </paper-dialog>
59
60### Accessibility
61
62See the docs for `Polymer.PaperDialogBehavior` for accessibility features implemented by this
63element.
64
65@group Paper Elements
66@element paper-dialog
67@hero hero.svg
68@demo demo/index.html
69-->
70
71<dom-module id="paper-dialog">
72  <template>
73    <style include="paper-dialog-shared-styles"></style>
74    <content></content>
75  </template>
76</dom-module>
77
78<script>
79
80(function() {
81
82  Polymer({
83
84    is: 'paper-dialog',
85
86    behaviors: [
87      Polymer.PaperDialogBehavior,
88      Polymer.NeonAnimationRunnerBehavior
89    ],
90
91    listeners: {
92      'neon-animation-finish': '_onNeonAnimationFinish'
93    },
94
95    _renderOpened: function() {
96      this.cancelAnimation();
97      this.playAnimation('entry');
98    },
99
100    _renderClosed: function() {
101      this.cancelAnimation();
102      this.playAnimation('exit');
103    },
104
105    _onNeonAnimationFinish: function() {
106      if (this.opened) {
107        this._finishRenderOpened();
108      } else {
109        this._finishRenderClosed();
110      }
111    }
112
113  });
114
115})();
116
117</script>
118