<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 polymer.github.io/PATENTS.txt –> <link rel=“import” href=“../../../polymer/polymer.html”> <link rel=“import” href=“../../../paper-styles/shadow.html”> <link rel=“import” href=“../../neon-animation-runner-behavior.html”> <link rel=“import” href=“../../animations/scale-up-animation.html”> <link rel=“import” href=“../../animations/fade-out-animation.html”>

<dom-module id=“my-dialog”>

<template>
  <style>
    :host {
      display: none;
      padding: 16px;
      background: white;
      color: black;
      margin: 0 auto;
      z-index: 100;
      position: absolute;
      @apply(--shadow-elevation-2dp);
    }
  </style>
  <content></content>

</template>

</dom-module>

<script>

Polymer({

  is: 'my-dialog',

  behaviors: [
    Polymer.NeonAnimationRunnerBehavior
  ],

  properties: {

    opened: {
      type: Boolean
    },

    animationConfig: {
      type: Object,
      value: function() {
        return {
          'entry': [{
            name: 'scale-up-animation',
            node: this
          }],
          'exit': [{
            name: 'fade-out-animation',
            node: this
          }]
        }
      }
    }

  },

  listeners: {
    'neon-animation-finish': '_onAnimationFinish'
  },

  _onAnimationFinish: function() {
    if (!this.opened) {
      this.style.display = '';
    }
  },

  show: function() {
    this.opened = true;
    this.style.display = 'inline-block';
    this.playAnimation('entry');
  },

  hide: function() {
    this.opened = false;
    this.playAnimation('exit');
  }

});

</script>