From c23aafe22f25063d366d490bf73eafa15a2ad805 Mon Sep 17 00:00:00 2001
From: homerjonathan <homer.jonathan@gmail.com>
Date: Sat, 17 Feb 2018 20:43:29 +0000
Subject: [PATCH 1/3] Removed Deprecated Neon-Animation

---
 README.md         |  41 ++++++--
 bower.json        |   1 -
 demo/index.html   |   2 -
 paper-dialog.html | 244 +++++++++++++++++++++++++++++++++++++---------
 4 files changed, 232 insertions(+), 56 deletions(-)

diff --git a/README.md b/README.md
index d1e6b2b..a266153 100644
--- a/README.md
+++ b/README.md
@@ -39,18 +39,41 @@ this element.
 
 ### Animations
 
-Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
-is opened or closed. See the documentation in
-[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
+Animations used to use the neon-animation, however the library has since been @deprecated.
 
-For example:
+You can still use the set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog is opened or closed. You can also create your own animation class.
 
+For example the below the CSS is first declared (this one slides from off screen).  You then point to the animation by selecting the class updating the `entry-animation`.  Note that the
+`exit-animation` is fade-out-animation which fades when the dialog is closed.
 ```html
-<link rel="import" href="../neon-animation/web-animations.html">
-<link rel="import" href="../neon-animation/animations/scale-up-animation.html">
-<link rel="import" href="../neon-animation/animations/fade-out-animation.html">
-
-<paper-dialog entry-animation="scale-up-animation"
+<style>
+  @keyframes keyFrameSlideDownIn {
+    0% {
+      transform: translateY(-2000px);
+      opacity: 0;
+    }
+    10% {
+      opacity: 0.2;
+    }
+    100% {
+      transform: translateY(0);
+      opacity: 1;
+    }
+  }
+
+  .my-animation {
+    transform: translateY(-2000px);
+    opacity: 0;
+    animation-delay: 0;
+    animation-name: keyFrameSlideDownIn;
+    animation-iteration-count: 1;
+    animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
+    animation-duration: 500ms;
+    animation-fill-mode: forwards;
+  }
+</style>
+
+<paper-dialog entry-animation="my-animation"
               exit-animation="fade-out-animation">
   <h2>Header</h2>
   <div>Dialog body</div>
diff --git a/bower.json b/bower.json
index 3f8c02f..94cec10 100644
--- a/bower.json
+++ b/bower.json
@@ -19,7 +19,6 @@
   "homepage": "https://github.com/PolymerElements/paper-dialog",
   "ignore": [],
   "dependencies": {
-    "neon-animation": "PolymerElements/neon-animation#1 - 2",
     "paper-dialog-behavior": "PolymerElements/paper-dialog-behavior#1 - 2",
     "iron-overlay-behavior": "PolymerElements/iron-overlay-behavior#1 - 2",
     "polymer": "Polymer/polymer#1.9 - 2"
diff --git a/demo/index.html b/demo/index.html
index d332d91..5abe4f1 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -23,8 +23,6 @@
   <link rel="import" href="../paper-dialog.html">
   <link rel="import" href="../../paper-button/paper-button.html">
   <link rel="import" href="../../paper-dialog-scrollable/paper-dialog-scrollable.html">
-  <link rel="import" href="../../neon-animation/web-animations.html">
-  <link rel="import" href="../../neon-animation/neon-animations.html">
   <link rel="import" href="../../paper-dropdown-menu/paper-dropdown-menu-light.html">
   <link rel="import" href="../../paper-listbox/paper-listbox.html">
   <link rel="import" href="../../paper-item/paper-item.html">
diff --git a/paper-dialog.html b/paper-dialog.html
index 8287467..9c9986f 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -9,7 +9,6 @@
 -->
 
 <link rel="import" href="../polymer/polymer.html">
-<link rel="import" href="../neon-animation/neon-animation-runner-behavior.html">
 <link rel="import" href="../paper-dialog-behavior/paper-dialog-behavior.html">
 <link rel="import" href="../paper-dialog-behavior/paper-dialog-shared-styles.html">
 <!--
@@ -43,19 +42,11 @@ <h2>Header</h2>
 ### Animations
 
 Set the `entry-animation` and/or `exit-animation` attributes to add an animation when the dialog
-is opened or closed. See the documentation in
-[PolymerElements/neon-animation](https://github.com/PolymerElements/neon-animation) for more info.
+is opened or closed. Included in the component are fade-in-animation (and out), scale-up-animation.
 
-For example:
-
-    <link rel="import" href="components/neon-animation/animations/scale-up-animation.html">
-    <link rel="import" href="components/neon-animation/animations/fade-out-animation.html">
-
-    <paper-dialog entry-animation="scale-up-animation"
-                  exit-animation="fade-out-animation">
-      <h2>Header</h2>
-      <div>Dialog body</div>
-    </paper-dialog>
+@deprecated This animation was based on the deprecated Neon-Animation component.  It now
+uses CSS Web Animations.  This change reduces code size, and uses the platform.  Any CSS3 animation
+class can be used.  
 
 ### Accessibility
 
@@ -70,40 +61,205 @@ <h2>Header</h2>
 
 <dom-module id="paper-dialog">
   <template>
-    <style include="paper-dialog-shared-styles"></style>
+    <style include="paper-dialog-shared-styles">
+      @keyframes keyFrameScaleUp {
+        0% {
+          transform: scale(0.0);
+        }
+        100% {
+          transform: scale(1.0);
+        }
+      }
+
+      @keyframes keyFrameFadeInOpacity {
+        0% {
+          opacity: 0;
+        }
+        100% {
+          opacity: 1;
+        }
+      }
+
+      @keyframes keyFrameFadeOutOpacity {
+        0% {
+          opacity: 1;
+        }
+        100% {
+          opacity: 0;
+        }
+      }
+
+      @keyframes keyFrameScaleDown {
+        0% {
+          transform: scale(1.0);
+        }
+        100% {
+          transform: scale(0.0);
+        }
+      }
+
+      :host(.fade-in-animation) {
+        opacity: 0;
+        animation-delay: 0;
+        animation-name: keyFrameFadeInOpacity;
+        animation-iteration-count: 1;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        animation-duration: var(--paper-dialog-duration-in, 500ms);
+        animation-fill-mode: forwards;
+        @apply --paper-dialog-animation;
+      }
+
+      :host(.fade-out-animation) {
+        opacity: 1;
+        animation-delay: 0;
+        animation-name: keyFrameFadeOutOpacity;
+        animation-iteration-count: 1;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        animation-duration: var(--paper-dialog-duration-out, 1500ms);
+        animation-fill-mode: forwards;
+        @apply --paper-dialog-animation;
+      }
+
+      :host(.scale-up-animation) {
+        transform: scale(0);
+        opacity: 1;
+        animation-delay: 0;
+        animation-name: keyFrameScaleUp;
+        animation-iteration-count: 1;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        animation-duration: var(--paper-dialog-duration-in, 500ms);
+        animation-fill-mode: forwards;
+        @apply --paper-dialog-animation;
+      }
+
+      .scale-down-animation {
+        transform: scale(1);
+        opacity: var(--paper-dialog-opacity, 0.9);
+        animation-delay: 0;
+        animation-name: keyFrameScaleDown;
+        animation-iteration-count: 1;
+        animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+        animation-duration: var(--paper-dialog-duration-out, 500ms);
+        animation-fill-mode: forwards;
+        @apply --paper-dialog-animation;
+      }      
+
+    </style>
     <slot></slot>
   </template>
 </dom-module>
 
 <script>
-Polymer({
-  is: 'paper-dialog',
-
-  behaviors: [
-    Polymer.PaperDialogBehavior,
-    Polymer.NeonAnimationRunnerBehavior
-  ],
-
-  listeners: {
-    'neon-animation-finish': '_onNeonAnimationFinish'
-  },
-
-  _renderOpened: function() {
-    this.cancelAnimation();
-    this.playAnimation('entry');
-  },
-
-  _renderClosed: function() {
-    this.cancelAnimation();
-    this.playAnimation('exit');
-  },
-
-  _onNeonAnimationFinish: function() {
-    if (this.opened) {
-      this._finishRenderOpened();
-    } else {
-      this._finishRenderClosed();
+  Polymer({
+    is: 'paper-dialog',
+
+    behaviors: [
+      Polymer.PaperDialogBehavior
+    ],
+
+    listeners: {
+      'webkitAnimationEnd': '_onAnimationEnd',
+    },
+
+    properties: {
+      /**
+       * Set Entry Animation 
+       */
+      entryAnimation: {
+        value: "fade-in-animation",
+        type: String
+      },
+      /**
+       * Set Exit Animation
+       */
+      exitAnimation: {
+        type: String
+      },
+      _showing: {
+        type: Boolean,
+        value: false
+      }
+    },
+
+    /**
+     * @return {void}
+     */
+    attached: function () {
+      this._addListeners();
+    },
+
+    /**
+     * @return {void}
+     */
+    detached: function () {
+      this._removeListeners();
+    },
+
+    _renderOpened: function () {
+      this._showing = true;
+      this.cancelAnimation();
+      this._entryAnimation();
+    },
+
+    _renderClosed: function () {
+      this._showing = false;
+      this.cancelAnimation();
+      this._exitAnimation();
+    },
+
+    _addListeners: function () {
+      this.listen(this, 'animationend', '_onAnimationEnd');
+    },
+    _removeListeners: function () {
+      this.unlisten(this, 'animationend', '_onAnimationEnd');
+    },
+
+    cancelAnimation: function () {
+      // Short-cut and cancel all animations and hide
+      this.classList.remove(this.entryAnimation);
+      this.classList.remove(this.exitAnimation);
+    },
+
+    _entryAnimation: function () {
+      if (!this.entryAnimation) {
+        this._onAnimationEnd();
+      } else {
+        this.classList.add(this.entryAnimation);
+        // If not animation _onAnimationEnd will not be called and will fail to change state
+        if (this._isSetAnimationValid()) {
+          this._onAnimationEnd();
+        }
+
+      }
+    },
+
+    _exitAnimation: function () {
+      if (!this.exitAnimation) {
+        this._onAnimationEnd();
+      } else {
+        this.classList.add(this.exitAnimation);
+        // If not animation _onAnimationEnd will not be called and will fail to change state
+        if (this._isSetAnimationValid()) {
+          this._onAnimationEnd();
+        }
+      }
+    },
+
+    _onAnimationEnd: function () {
+      // If no longer showing add class hidden to completely hide dialog
+      if (!this._showing) {
+        this.classList.remove(this.exitAnimation);
+        this._finishRenderClosed();
+      } else {
+        this._finishRenderOpened();
+      }
+    },
+
+    _isSetAnimationValid: function () {
+      // If CSS Class does not have animation-name considered not be an animation
+      var style = window.getComputedStyle(this);
+      return (style.getPropertyValue("animation-name") === "none")
     }
-  }
-});
-</script>
+
+  });
+</script>
\ No newline at end of file

From dfb16e779747d1db0ca9acec3eb8ded216ab7912 Mon Sep 17 00:00:00 2001
From: homerjonathan <jhomer@jasoftware.com>
Date: Sat, 17 Feb 2018 20:47:58 +0000
Subject: [PATCH 2/3] Few Formating Corrections

---
 paper-dialog.html | 1 +
 1 file changed, 1 insertion(+)

diff --git a/paper-dialog.html b/paper-dialog.html
index 9c9986f..22409ae 100644
--- a/paper-dialog.html
+++ b/paper-dialog.html
@@ -210,6 +210,7 @@ <h2>Header</h2>
     _addListeners: function () {
       this.listen(this, 'animationend', '_onAnimationEnd');
     },
+    
     _removeListeners: function () {
       this.unlisten(this, 'animationend', '_onAnimationEnd');
     },

From b528a84cc4868808f3d0d14ebd5b007e71412449 Mon Sep 17 00:00:00 2001
From: homerjonathan <jhomer@jasoftware.com>
Date: Sat, 17 Feb 2018 21:07:51 +0000
Subject: [PATCH 3/3] Update to README.md

---
 README.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/README.md b/README.md
index a266153..08fb73f 100644
--- a/README.md
+++ b/README.md
@@ -46,6 +46,7 @@ You can still use the set the `entry-animation` and/or `exit-animation` attribut
 For example the below the CSS is first declared (this one slides from off screen).  You then point to the animation by selecting the class updating the `entry-animation`.  Note that the
 `exit-animation` is fade-out-animation which fades when the dialog is closed.
 ```html
+
 <style>
   @keyframes keyFrameSlideDownIn {
     0% {