<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->

<!--
Provides a dialog overlay.

Child elements that include a `dismissive` attribute are positioned in the lower left corner of the dialog. Elements that use the `affirmative` attribute are positioned in the lower right corner.

Child elements that include the `dismissive` or `affirmative` attribute will automatically toggle the dialog when clicked.

One child element should have the `autofocus` attribute so that the Enter key will automatically take action. This is
especially important for screen reader environments.

Example:

    <paper-dialog heading="Title for dialog">
      <p>Lorem ipsum ....</p>
      <p>Id qui scripta ...</p>
      <paper-button label="More Info..." dismissive></paper-button>
      <paper-button label="Decline" affirmative></paper-button>
      <paper-button label="Accept" affirmative autofocus></paper-button>
    </paper-dialog>

#### Transitions

`<paper-dialog>` can be used with `<paper-transition>` to transition the overlay open and close.

To use a transition, import `paper-dialog-transition.html` alongside paper-dialog:

    <link rel="import" href="paper-dialog/paper-dialog-transition.html">

Then set the `transition` attribute:

    <paper-dialog heading="Title for dialog" transition="paper-dialog-transition-center">

    <paper-dialog heading="Title for dialog" transition="paper-dialog-transition-bottom">

@group Paper Elements
@element paper-dialog
@homepage github.io
-->
<!--
Fired when the dialog's `opened` property changes.

@event core-overlay-open
@param {Object} detail
@param {Object} detail.opened the opened state
-->
<link href="../polymer/polymer.html" rel="import">
<link href="../core-overlay/core-overlay.html" rel="import">
<link href="../paper-shadow/paper-shadow.html" rel="import">

<polymer-element name="paper-dialog" attributes="opened heading transition autoCloseDisabled backdrop layered closeSelector" role="dialog">

  <template>

    <link href="paper-dialog.css" rel="stylesheet">

    <div id="shadow">
      <paper-shadow z="3" hasPosition></paper-shadow>
    </div>

    <core-overlay id="overlay" opened="{{opened}}" autoCloseDisabled?="{{autoCloseDisabled}}" backdrop?="{{backdrop}}" layered?="{{layered}}" target="{{}}" sizingTarget="{{$.container}}" closeSelector="{{closeSelector}}" transition="{{transition}}" margin="20"></core-overlay>

    <div id="container" layout vertical>

      <div id="actions" layout horizontal>
        <content select="[dismissive]"></content>
        <div flex auto></div>
        <content select="[affirmative]"></content>
      </div>

      <div id="main" flex auto>
        <h1>{{heading}}</h1>
        <content></content>
      </div>

    </div>

  </template>

  <script>

    Polymer('paper-dialog', {

      /**
       * Set opened to true to show the dialog and to false to hide it.
       * A dialog may be made intially opened by setting its opened attribute.

       * @attribute opened
       * @type boolean
       * @default false
       */
      opened: false,

      /**
       * If true, the dialog has a backdrop darkening the rest of the screen.
       * The backdrop element is attached to the document body and may be styled
       * with the class `core-overlay-backdrop`. When opened the `core-opened`
       * class is applied.
       *
       * @attribute backdrop
       * @type boolean
       * @default false
       */
      backdrop: false,

      /**
       * If true, the dialog is guaranteed to display above page content.
       *
       * @attribute layered
       * @type boolean
       * @default false
      */
      layered: false,

      /**
       * By default a dialog will close automatically if the user
       * taps outside it or presses the escape key. Disable this
       * behavior by setting the `autoCloseDisabled` property to true.
       * @attribute autoCloseDisabled
       * @type boolean
       * @default false
       */
      autoCloseDisabled: false,

      /**
       * This property specifies a selector matching elements that should
       * close the dialog on tap.
       *
       * @attribute closeSelector
       * @type string
       * @default ""
       */
      closeSelector: '[dismissive],[affirmative]',

      /**
       * @attribute heading
       * @type string
       * @default ''
       */
      heading: '',

      /**
       * Set this property to the id of a `core-transition` element to specify
       * the transition to use when opening/closing this dialog.
       *
       * @attribute transition
       * @type string
       * @default ''
       */
      transition: '',

      /**
       * Toggle the dialog's opened state.
       * @method toggle
       */
      toggle: function() {
        this.$.overlay.toggle();
      },

      headingChanged: function() {
        this.setAttribute('aria-label', this.heading);
      }

    });

  </script>

</polymer-element>
