@polymer/neon-animation - npm Package Compare versions

Comparing version 3.0.0-pre.12 to 3.0.0-pre.13

animations/cascaded-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -29,2 +25,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -34,5 +39,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -86,3 +89,4 @@ /**
   complete: function() {
-    for (var animation, index = 0; animation = this._animations[index]; index++) {
+    for (var animation, index = 0; animation = this._animations[index];
+         index++) {
       animation.complete(animation.config);
@@ -89,0 +93,0 @@ }

animations/fade-in-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -26,2 +22,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -31,12 +36,10 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
   configure: function(config) {
     var node = config.node;
-    this._effect = new KeyframeEffect(node, [
-      {'opacity': '0'},
-      {'opacity': '1'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'opacity': '0'}, {'opacity': '1'}],
+        this.timingFromConfig(config));
     return this._effect;
@@ -43,0 +46,0 @@ }

animations/fade-out-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -26,2 +22,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -31,12 +36,10 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
   configure: function(config) {
     var node = config.node;
-    this._effect = new KeyframeEffect(node, [
-      {'opacity': '1'},
-      {'opacity': '0'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'opacity': '1'}, {'opacity': '0'}],
+        this.timingFromConfig(config));
     return this._effect;
@@ -43,0 +46,0 @@ }

animations/hero-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonSharedElementAnimationBehavior } from '../neon-shared-element-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -34,2 +30,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonSharedElementAnimationBehavior } from '../neon-shared-element-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -39,5 +44,3 @@
 
-  behaviors: [
-    NeonSharedElementAnimationBehavior
-  ],
+  behaviors: [NeonSharedElementAnimationBehavior],
 
@@ -58,6 +61,12 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(shared.to, [
-      {'transform': 'translate(' + deltaLeft + 'px,' + deltaTop + 'px) scale(' + deltaWidth + ',' + deltaHeight + ')'},
-      {'transform': 'none'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        shared.to,
+        [
+          {
+            'transform': 'translate(' + deltaLeft + 'px,' + deltaTop +
+                'px) scale(' + deltaWidth + ',' + deltaHeight + ')'
+          },
+          {'transform': 'none'}
+        ],
+        this.timingFromConfig(config));
 
@@ -64,0 +73,0 @@ this.setPrefixedProperty(shared.to, 'transformOrigin', '0 0');

animations/opaque-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -18,2 +14,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -23,12 +28,10 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
   configure: function(config) {
     var node = config.node;
-    this._effect = new KeyframeEffect(node, [
-      {'opacity': '1'},
-      {'opacity': '1'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'opacity': '1'}, {'opacity': '1'}],
+        this.timingFromConfig(config));
     node.style.opacity = '0';
@@ -35,0 +38,0 @@ return this._effect;

animations/reverse-ripple-animation.js

@@ -1,4 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonSharedElementAnimationBehavior } from '../neon-shared-element-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
 /**
@@ -34,8 +31,15 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonSharedElementAnimationBehavior } from '../neon-shared-element-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
   is: 'reverse-ripple-animation',
 
-  behaviors: [
-    NeonSharedElementAnimationBehavior
-  ],
+  behaviors: [NeonSharedElementAnimationBehavior],
 
@@ -55,8 +59,12 @@ configure: function(config) {
       var toRect = shared.to.getBoundingClientRect();
-      translateX = (toRect.left + (toRect.width / 2)) - (fromRect.left + (fromRect.width / 2));
-      translateY = (toRect.top + (toRect.height / 2)) - (fromRect.top + (fromRect.height / 2));
+      translateX = (toRect.left + (toRect.width / 2)) -
+          (fromRect.left + (fromRect.width / 2));
+      translateY = (toRect.top + (toRect.height / 2)) -
+          (fromRect.top + (fromRect.height / 2));
     }
     var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
 
-    var size = Math.max(fromRect.width + Math.abs(translateX) * 2, fromRect.height + Math.abs(translateY) * 2);
+    var size = Math.max(
+        fromRect.width + Math.abs(translateX) * 2,
+        fromRect.height + Math.abs(translateY) * 2);
     var diameter = Math.sqrt(2 * size * size);
@@ -67,6 +75,9 @@ var scaleX = diameter / fromRect.width;
 
-    this._effect = new KeyframeEffect(shared.from, [
-      {'transform': translate + ' ' + scale},
-      {'transform': translate + ' scale(0)'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        shared.from,
+        [
+          {'transform': translate + ' ' + scale},
+          {'transform': translate + ' scale(0)'}
+        ],
+        this.timingFromConfig(config));
 
@@ -73,0 +84,0 @@ this.setPrefixedProperty(shared.from, 'transformOrigin', '50% 50%');

animations/ripple-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonSharedElementAnimationBehavior } from '../neon-shared-element-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -37,2 +33,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonSharedElementAnimationBehavior } from '../neon-shared-element-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -42,5 +47,3 @@
 
-  behaviors: [
-    NeonSharedElementAnimationBehavior
-  ],
+  behaviors: [NeonSharedElementAnimationBehavior],
 
@@ -60,8 +63,12 @@ configure: function(config) {
       var fromRect = shared.from.getBoundingClientRect();
-      translateX = (fromRect.left + (fromRect.width / 2)) - (toRect.left + (toRect.width / 2));
-      translateY = (fromRect.top + (fromRect.height / 2)) - (toRect.top + (toRect.height / 2));
+      translateX = (fromRect.left + (fromRect.width / 2)) -
+          (toRect.left + (toRect.width / 2));
+      translateY = (fromRect.top + (fromRect.height / 2)) -
+          (toRect.top + (toRect.height / 2));
     }
     var translate = 'translate(' + translateX + 'px,' + translateY + 'px)';
 
-    var size = Math.max(toRect.width + Math.abs(translateX) * 2, toRect.height + Math.abs(translateY) * 2);
+    var size = Math.max(
+        toRect.width + Math.abs(translateX) * 2,
+        toRect.height + Math.abs(translateY) * 2);
     var diameter = Math.sqrt(2 * size * size);
@@ -72,6 +79,9 @@ var scaleX = diameter / toRect.width;
 
-    this._effect = new KeyframeEffect(shared.to, [
-      {'transform': translate + ' scale(0)'},
-      {'transform': translate + ' ' + scale}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        shared.to,
+        [
+          {'transform': translate + ' scale(0)'},
+          {'transform': translate + ' ' + scale}
+        ],
+        this.timingFromConfig(config));
 
@@ -78,0 +88,0 @@ this.setPrefixedProperty(shared.to, 'transformOrigin', '50% 50%');

animations/scale-down-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -29,2 +25,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -34,5 +39,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -49,6 +52,6 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': 'scale(1,1)'},
-      {'transform': scaleProperty}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': 'scale(1,1)'}, {'transform': scaleProperty}],
+        this.timingFromConfig(config));
 
@@ -55,0 +58,0 @@ if (config.transformOrigin) {

animations/scale-up-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -29,2 +25,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -34,5 +39,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -49,6 +52,6 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': scaleProperty},
-      {'transform': 'scale(1, 1)'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': scaleProperty}, {'transform': 'scale(1, 1)'}],
+        this.timingFromConfig(config));
 
@@ -55,0 +58,0 @@ if (config.transformOrigin) {

animations/slide-down-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -28,2 +24,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -33,5 +38,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -41,6 +44,6 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': 'translateY(0%)'},
-      {'transform': 'translateY(100%)'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': 'translateY(0%)'}, {'transform': 'translateY(100%)'}],
+        this.timingFromConfig(config));
 
@@ -47,0 +50,0 @@ if (config.transformOrigin) {

animations/slide-from-bottom-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -28,2 +24,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -33,5 +38,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -41,6 +44,6 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': 'translateY(100%)'},
-      {'transform': 'translateY(0)'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': 'translateY(100%)'}, {'transform': 'translateY(0)'}],
+        this.timingFromConfig(config));
 
@@ -47,0 +50,0 @@ if (config.transformOrigin) {

animations/slide-from-left-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -29,2 +25,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -34,5 +39,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -42,6 +45,6 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': 'translateX(-100%)'},
-      {'transform': 'none'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': 'translateX(-100%)'}, {'transform': 'none'}],
+        this.timingFromConfig(config));
 
@@ -48,0 +51,0 @@ if (config.transformOrigin) {

animations/slide-from-right-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -29,2 +25,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -34,5 +39,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -42,6 +45,6 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': 'translateX(100%)'},
-      {'transform': 'none'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': 'translateX(100%)'}, {'transform': 'none'}],
+        this.timingFromConfig(config));
 
@@ -48,0 +51,0 @@ if (config.transformOrigin) {

animations/slide-from-top-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -28,2 +24,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -33,5 +38,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -41,6 +44,6 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': 'translateY(-100%)'},
-      {'transform': 'translateY(0%)'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': 'translateY(-100%)'}, {'transform': 'translateY(0%)'}],
+        this.timingFromConfig(config));
 
@@ -47,0 +50,0 @@ if (config.transformOrigin) {

animations/slide-left-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -28,2 +24,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -33,5 +38,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -41,6 +44,6 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': 'none'},
-      {'transform': 'translateX(-100%)'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': 'none'}, {'transform': 'translateX(-100%)'}],
+        this.timingFromConfig(config));
 
@@ -47,0 +50,0 @@ if (config.transformOrigin) {

animations/slide-right-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -28,2 +24,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -33,5 +38,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -41,6 +44,6 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': 'none'},
-      {'transform': 'translateX(100%)'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': 'none'}, {'transform': 'translateX(100%)'}],
+        this.timingFromConfig(config));
 
@@ -47,0 +50,0 @@ if (config.transformOrigin) {

animations/slide-up-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -28,2 +24,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -33,5 +38,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -41,6 +44,6 @@ configure: function(config) {
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': 'translate(0)'},
-      {'transform': 'translateY(-100%)'}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': 'translate(0)'}, {'transform': 'translateY(-100%)'}],
+        this.timingFromConfig(config));
 
@@ -47,0 +50,0 @@ if (config.transformOrigin) {

animations/transform-animation.js

@@ -1,5 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-
 /**
@@ -30,2 +26,11 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../../polymer/polymer-legacy.js';
+
+import { NeonAnimationBehavior } from '../neon-animation-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
 Polymer({
@@ -35,5 +40,3 @@
 
-  behaviors: [
-    NeonAnimationBehavior
-  ],
+  behaviors: [NeonAnimationBehavior],
 
@@ -54,6 +57,6 @@ /**
 
-    this._effect = new KeyframeEffect(node, [
-      {'transform': transformFrom},
-      {'transform': transformTo}
-    ], this.timingFromConfig(config));
+    this._effect = new KeyframeEffect(
+        node,
+        [{'transform': transformFrom}, {'transform': transformTo}],
+        this.timingFromConfig(config));
 
@@ -60,0 +63,0 @@ if (config.transformOrigin) {

demo/card/x-card.js

@@ -1,6 +0,16 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
+/**
+@license
+Copyright (c) 2015 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
+*/
+import '../../../polymer/polymer-legacy.js';
+
+import '../../../iron-flex-layout/iron-flex-layout.js';
 import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -27,15 +37,8 @@ _template: html`
   is: 'x-card',
+  behaviors: [NeonSharedElementAnimatableBehavior],
 
-  behaviors: [
-    NeonSharedElementAnimatableBehavior
-  ],
-
   properties: {
-    animationConfig: {
-      type: Object
-    },
+    animationConfig: {type: Object},
 
-    sharedElements: {
-      type: Object
-    }
+    sharedElements: {type: Object}
   },
@@ -49,31 +52,28 @@
     this.animationConfig = {
-      'entry': [{
-        name: 'ripple-animation',
-        id: 'ripple',
-        toPage: this
-      }, {
-        name: 'fade-out-animation',
-        node: this.$.placeholder,
-        timing: {
-          delay: 250
+      'entry': [
+        {name: 'ripple-animation', id: 'ripple', toPage: this},
+        {
+          name: 'fade-out-animation',
+          node: this.$.placeholder,
+          timing: {delay: 250}
+        },
+        {
+          name: 'fade-in-animation',
+          node: this.$.container,
+          timing: {delay: 50}
         }
-      }, {
-        name: 'fade-in-animation',
-        node: this.$.container,
-        timing: {
-          delay: 50
-        }
-      }],
+      ],
 
-      'exit': [{
-        name: 'fade-out-animation',
-        node: this.$.container,
-        timing: {
-          duration: 0
+      'exit': [
+        {
+          name: 'fade-out-animation',
+          node: this.$.container,
+          timing: {duration: 0}
+        },
+        {
+          name: 'reverse-ripple-animation',
+          id: 'reverse-ripple',
+          fromPage: this
         }
-      }, {
-        name: 'reverse-ripple-animation',
-        id: 'reverse-ripple',
-        fromPage: this
-      }]
+      ]
     };
@@ -80,0 +80,0 @@

demo/card/x-cards-list.js

@@ -1,6 +0,16 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
+/**
+@license
+Copyright (c) 2015 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
+*/
+import '../../../polymer/polymer-legacy.js';
+
+import '../../../iron-flex-layout/iron-flex-layout.js';
 import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -28,13 +38,5 @@ _template: html`
   is: 'x-cards-list',
+  behaviors: [NeonSharedElementAnimatableBehavior],
+  properties: {animationConfig: {type: Object}},
 
-  behaviors: [
-    NeonSharedElementAnimatableBehavior
-  ],
-
-  properties: {
-    animationConfig: {
-      type: Object
-    }
-  },
-
   attached: function() {
@@ -46,22 +48,16 @@ if (this.animationConfig) {
     this.animationConfig = {
-      'entry': [{
-        name: 'reverse-ripple-animation',
-        id: 'reverse-ripple',
-        toPage: this
-      }],
+      'entry': [
+        {name: 'reverse-ripple-animation', id: 'reverse-ripple', toPage: this}
+      ],
 
-      'exit': [{
-        name: 'fade-out-animation',
-        node: this.$.container,
-        timing: {
-          delay: 150,
-          duration: 0
-        }
-      }, {
-        name: 'ripple-animation',
-        id: 'ripple',
-        fromPage: this
-      }]
+      'exit': [
+        {
+          name: 'fade-out-animation',
+          node: this.$.container,
+          timing: {delay: 150, duration: 0}
+        },
+        {name: 'ripple-animation', id: 'ripple', fromPage: this}
+      ]
     };
   }
 });

demo/doc/my-animatable.js

@@ -1,7 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonAnimationRunnerBehavior } from '../../neon-animation-runner-behavior.js';
-import '../../animations/scale-down-animation.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
 /**
@@ -16,2 +10,8 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import { NeonAnimationRunnerBehavior } from '../../neon-animation-runner-behavior.js';
+import '../../animations/scale-down-animation.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -32,7 +32,4 @@ _template: html`
   is: 'my-animatable',
+  behaviors: [NeonAnimationRunnerBehavior],
 
-  behaviors: [
-    NeonAnimationRunnerBehavior
-  ],
-
   properties: {
@@ -44,4 +41,3 @@
         return {
-          name: 'scale-down-animation',
-          node: this
+          name: 'scale-down-animation', node: this
         }
@@ -53,5 +49,3 @@ }
 
-  listeners: {
-    'neon-animation-finish': '_onNeonAnimationFinish'
-  },
+  listeners: {'neon-animation-finish': '_onNeonAnimationFinish'},
 
@@ -58,0 +52,0 @@ animate: function() {

demo/doc/my-dialog.js

@@ -1,9 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '@polymer/paper-styles/shadow.js';
-import { NeonAnimationRunnerBehavior } from '../../neon-animation-runner-behavior.js';
-import '../../animations/scale-up-animation.js';
-import '../../animations/fade-out-animation.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
 /**
@@ -18,2 +10,10 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import '../../../paper-styles/shadow.js';
+import { NeonAnimationRunnerBehavior } from '../../neon-animation-runner-behavior.js';
+import '../../animations/scale-up-animation.js';
+import '../../animations/fade-out-animation.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -37,12 +37,7 @@ _template: html`
   is: 'my-dialog',
+  behaviors: [NeonAnimationRunnerBehavior],
 
-  behaviors: [
-    NeonAnimationRunnerBehavior
-  ],
-
   properties: {
 
-    opened: {
-      type: Boolean
-    },
+    opened: {type: Boolean},
 
@@ -53,10 +48,4 @@ animationConfig: {
         return {
-          'entry': [{
-            name: 'scale-up-animation',
-            node: this
-          }],
-          'exit': [{
-            name: 'fade-out-animation',
-            node: this
-          }]
+          'entry': [{name: 'scale-up-animation', node: this}],
+              'exit': [{name: 'fade-out-animation', node: this}]
         }
@@ -68,5 +57,3 @@ }
 
-  listeners: {
-    'neon-animation-finish': '_onAnimationFinish'
-  },
+  listeners: {'neon-animation-finish': '_onAnimationFinish'},
 
@@ -73,0 +60,0 @@ _onAnimationFinish: function() {

demo/dropdown/animated-dropdown.js

@@ -1,7 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '@polymer/paper-styles/shadow.js';
-import { NeonAnimationRunnerBehavior } from '../../neon-animation-runner-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
 /**
@@ -16,2 +10,8 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import '../../../paper-styles/shadow.js';
+import { NeonAnimationRunnerBehavior } from '../../neon-animation-runner-behavior.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -33,7 +33,4 @@ _template: html`
   is: 'animated-dropdown',
+  behaviors: [NeonAnimationRunnerBehavior],
 
-  behaviors: [
-    NeonAnimationRunnerBehavior
-  ],
-
   properties: {
@@ -50,6 +47,3 @@
           }],
-          'exit': [{
-            name: 'fade-out-animation',
-            node: this
-          }]
+              'exit': [{name: 'fade-out-animation', node: this}]
         }
@@ -59,12 +53,7 @@ }
 
-    _showing: {
-      type: Boolean,
-      value: false
-    }
+    _showing: {type: Boolean, value: false}
 
   },
 
-  listeners: {
-    'neon-animation-finish': '_onAnimationFinish'
-  },
+  listeners: {'neon-animation-finish': '_onAnimationFinish'},
 
@@ -71,0 +60,0 @@ _onAnimationFinish: function() {

demo/grid/animated-grid.js

@@ -1,10 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '@polymer/paper-styles/typography.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
-import '../shared-styles.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-
 /**
@@ -19,2 +10,11 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import '../../../paper-styles/typography.js';
+import '../../../iron-flex-layout/iron-flex-layout.js';
+import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
+import '../shared-styles.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
+import { dom } from '../../../polymer/lib/legacy/polymer.dom.js';
 Polymer({
@@ -85,7 +85,4 @@ _template: html`
   is: 'animated-grid',
+  behaviors: [NeonSharedElementAnimatableBehavior],
 
-  behaviors: [
-    NeonSharedElementAnimatableBehavior
-  ],
-
   properties: {
@@ -115,11 +112,6 @@
         return {
-          'exit': [{
-            name: 'ripple-animation',
-            id: 'ripple',
-            fromPage: this
-          }, {
-            name: 'hero-animation',
-            id: 'hero',
-            fromPage: this
-          }]
+          'exit': [
+            {name: 'ripple-animation', id: 'ripple', fromPage: this},
+            {name: 'hero-animation', id: 'hero', fromPage: this}
+          ]
         }
@@ -143,6 +135,3 @@ }
     // configure the page animation
-    this.sharedElements = {
-      'hero': target,
-      'ripple': target
-    };
+    this.sharedElements = {'hero': target, 'ripple': target};
     this.animationConfig['exit'][0].gesture = {
@@ -153,7 +142,4 @@ x: event.x || event.pageX,
 
-    this.fire('tile-click', {
-      tile: target,
-      data: target.item
-    });
+    this.fire('tile-click', {tile: target, data: target.item});
   }
 });

demo/grid/fullsize-page-with-card.js

@@ -1,8 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
-import '@polymer/paper-styles/color.js';
-import '../shared-styles.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
 /**
@@ -17,2 +10,9 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
+import '../../../paper-styles/color.js';
+import '../shared-styles.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -48,20 +48,11 @@ _template: html`
   is: 'fullsize-page-with-card',
+  behaviors: [NeonSharedElementAnimatableBehavior],
 
-  behaviors: [
-    NeonSharedElementAnimatableBehavior
-  ],
-
   properties: {
 
-    color: {
-      type: String
-    },
+    color: {type: String},
 
-    sharedElements: {
-      type: Object
-    },
+    sharedElements: {type: Object},
 
-    animationConfig: {
-      type: Object
-    }
+    animationConfig: {type: Object}
   },
@@ -74,29 +65,27 @@
 
-    this.sharedElements = {
-      'hero': this.$.card,
-      'ripple': this.$.fixed
-    };
+    this.sharedElements = {'hero': this.$.card, 'ripple': this.$.fixed};
 
     this.animationConfig = {
-      'entry': [{
-        name: 'ripple-animation',
-        id: 'ripple',
-        toPage: this,
-      }, {
-        name: 'hero-animation',
-        id: 'hero',
-        toPage: this,
-        timing: {
-          delay: 150
+      'entry': [
+        {
+          name: 'ripple-animation',
+          id: 'ripple',
+          toPage: this,
+        },
+        {
+          name: 'hero-animation',
+          id: 'hero',
+          toPage: this,
+          timing: {delay: 150}
         }
-      }],
-      'exit': [{
-        name: 'fade-out-animation',
-        node: this.$.fixed
-      }, {
-        name: 'transform-animation',
-        transformFrom: 'none',
-        transformTo: 'translate(0px,-200vh) scale(0.9,1)',
-        node: this.$.card
-      }]
+      ],
+      'exit': [
+        {name: 'fade-out-animation', node: this.$.fixed},
+        {
+          name: 'transform-animation',
+          transformFrom: 'none',
+          transformTo: 'translate(0px,-200vh) scale(0.9,1)',
+          node: this.$.card
+        }
+      ]
     };
@@ -103,0 +92,0 @@ },

demo/list/full-view.js

@@ -1,9 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import '@polymer/paper-styles/shadow.js';
-import '@polymer/app-layout/app-toolbar/app-toolbar.js';
-import { NeonAnimatableBehavior } from '../../neon-animatable-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
 /**
@@ -18,2 +10,10 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import '../../../iron-flex-layout/iron-flex-layout.js';
+import '../../../paper-styles/shadow.js';
+import '../../../app-layout/app-toolbar/app-toolbar.js';
+import { NeonAnimatableBehavior } from '../../neon-animatable-behavior.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -70,16 +70,9 @@ _template: html`
   is: 'full-view',
+  behaviors: [NeonAnimatableBehavior],
 
-  behaviors: [
-    NeonAnimatableBehavior
-  ],
-
   properties: {
 
-    sharedElements: {
-      type: Object
-    },
+    sharedElements: {type: Object},
 
-    animationConfig: {
-      type: Object
-    }
+    animationConfig: {type: Object}
   },
@@ -92,17 +85,12 @@
 
-    this.sharedElements = { 'hero': this.$.main };
+    this.sharedElements = {'hero': this.$.main};
     this.animationConfig = {
-        'entry': [{
-          name: 'fade-in-animation',
-          node: this.$.button
-        }, {
-          name: 'hero-animation',
-          id: 'hero',
-          toPage: this
-        }],
+      'entry': [
+        {name: 'fade-in-animation', node: this.$.button},
+        {name: 'hero-animation', id: 'hero', toPage: this}
+      ],
 
-        'exit': [{
-          name: 'fade-out-animation',
-          node: this.$.button
-        }, {
+      'exit': [
+        {name: 'fade-out-animation', node: this.$.button},
+        {
           name: 'scale-down-animation',
@@ -112,4 +100,5 @@ node: this.$.main,
           axis: 'y'
-        }]
-      }
+        }
+      ]
+    }
   },
@@ -116,0 +105,0 @@

demo/list/list-demo.js

@@ -1,9 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '../../neon-animated-pages.js';
-import '../../neon-animations.js';
-import './list-view.js';
-import './full-view.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
 /**
@@ -18,2 +10,10 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import '../../neon-animated-pages.js';
+import '../../neon-animations.js';
+import './list-view.js';
+import './full-view.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -20,0 +20,0 @@ _template: html`

demo/list/list-view.js

@@ -1,15 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '@polymer/iron-icons/iron-icons.js';
-import '@polymer/iron-icon/iron-icon.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import '@polymer/paper-icon-button/paper-icon-button.js';
-import '@polymer/paper-item/paper-item.js';
-import '@polymer/paper-item/paper-item-body.js';
-import '@polymer/app-layout/app-toolbar/app-toolbar.js';
-import '@polymer/paper-styles/color.js';
-import { NeonAnimatableBehavior } from '../../neon-animatable-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-
 /**
@@ -24,2 +10,16 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import '../../../iron-icons/iron-icons.js';
+import '../../../iron-icon/iron-icon.js';
+import '../../../iron-flex-layout/iron-flex-layout.js';
+import '../../../paper-icon-button/paper-icon-button.js';
+import '../../../paper-item/paper-item.js';
+import '../../../paper-item/paper-item-body.js';
+import '../../../app-layout/app-toolbar/app-toolbar.js';
+import '../../../paper-styles/color.js';
+import { NeonAnimatableBehavior } from '../../neon-animatable-behavior.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
+import { dom } from '../../../polymer/lib/legacy/polymer.dom.js';
 Polymer({
@@ -68,11 +68,5 @@ _template: html`
   is: 'list-view',
+  behaviors: [NeonAnimatableBehavior],
+  listeners: {'click': '_onClick'},
 
-  behaviors: [
-    NeonAnimatableBehavior
-  ],
-
-  listeners: {
-    'click': '_onClick'
-  },
-
   properties: {
@@ -87,5 +81,3 @@
 
-    animationConfig: {
-      type: Object
-    }
+    animationConfig: {type: Object}
   },
@@ -99,15 +91,8 @@
     this.animationConfig = {
-      'entry': [{
-        name: 'fade-in-animation',
-        node: this.$.button
-      }],
+      'entry': [{name: 'fade-in-animation', node: this.$.button}],
 
-      'exit': [{
-        name: 'fade-out-animation',
-        node: this.$.button
-      }, {
-        name: 'hero-animation',
-        id: 'hero',
-        fromPage: this
-      }]
+      'exit': [
+        {name: 'fade-out-animation', node: this.$.button},
+        {name: 'hero-animation', id: 'hero', fromPage: this}
+      ]
     };
@@ -114,0 +99,0 @@ },

demo/load/animated-grid.js

@@ -1,11 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
-import '@polymer/paper-styles/typography.js';
-import '@polymer/paper-styles/color.js';
-import '../shared-styles.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-
 /**
@@ -20,2 +10,12 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import '../../../iron-flex-layout/iron-flex-layout.js';
+import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
+import '../../../paper-styles/typography.js';
+import '../../../paper-styles/color.js';
+import '../shared-styles.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
+import { dom } from '../../../polymer/lib/legacy/polymer.dom.js';
 Polymer({
@@ -85,7 +85,4 @@ _template: html`
   is: 'animated-grid',
+  behaviors: [NeonSharedElementAnimatableBehavior],
 
-  behaviors: [
-    NeonSharedElementAnimatableBehavior
-  ],
-
   properties: {
@@ -120,5 +117,3 @@
             transformTo: 'none',
-            timing: {
-              delay: 50
-            }
+            timing: {delay: 50}
           }]
@@ -134,3 +129,4 @@ }
       var nodeList = dom(this.root).querySelectorAll('.tile');
-      this.animationConfig['entry'][0].nodes = Array.prototype.slice.call(nodeList);
+      this.animationConfig['entry'][0].nodes =
+          Array.prototype.slice.call(nodeList);
     });
@@ -137,0 +133,0 @@ },

demo/load/full-page.js

@@ -1,10 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import { NeonAnimatableBehavior } from '../../neon-animatable-behavior.js';
-import { NeonAnimationRunnerBehavior } from '../../neon-animation-runner-behavior.js';
-import '@polymer/paper-styles/shadow.js';
-import './animated-grid.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
 /**
@@ -19,2 +10,11 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import '../../../iron-flex-layout/iron-flex-layout.js';
+import { NeonAnimatableBehavior } from '../../neon-animatable-behavior.js';
+import { NeonAnimationRunnerBehavior } from '../../neon-animation-runner-behavior.js';
+import '../../../paper-styles/shadow.js';
+import './animated-grid.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -48,12 +48,8 @@ _template: html`
 
-  behaviors: [
-    NeonAnimatableBehavior,
-    NeonAnimationRunnerBehavior
-  ],
+  behaviors:
+      [NeonAnimatableBehavior, NeonAnimationRunnerBehavior],
 
   properties: {
 
-    animationConfig: {
-      type: Object
-    }
+    animationConfig: {type: Object}
   },
@@ -63,9 +59,6 @@
     this.animationConfig = this.animationConfig || {
-      'entry': [{
-        name: 'slide-from-top-animation',
-        node: this.$.toolbar
-      }, {
-        animatable: this.$.grid,
-        type: 'entry'
-      }]
+      'entry': [
+        {name: 'slide-from-top-animation', node: this.$.toolbar},
+        {animatable: this.$.grid, type: 'entry'}
+      ]
     };
@@ -72,0 +65,0 @@ },

demo/shared-styles.js

@@ -1,2 +0,2 @@
-const $_documentContainer = document.createElement('div');
+const $_documentContainer = document.createElement('template');
 $_documentContainer.setAttribute('style', 'display: none;');
@@ -42,3 +42,3 @@
 
-document.head.appendChild($_documentContainer);
+document.head.appendChild($_documentContainer.content);
 
@@ -54,2 +54,7 @@ /**
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
 ;

demo/tiles/circles-page.js

@@ -1,8 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import '@polymer/iron-flex-layout/iron-flex-layout.js';
-import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-
 /**
@@ -17,2 +10,9 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import '../../../iron-flex-layout/iron-flex-layout.js';
+import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
+import { dom } from '../../../polymer/lib/legacy/polymer.dom.js';
 Polymer({
@@ -46,17 +46,10 @@ _template: html`
   is: 'circles-page',
+  behaviors: [NeonSharedElementAnimatableBehavior],
 
-  behaviors: [
-    NeonSharedElementAnimatableBehavior
-  ],
-
   properties: {
 
-    animationConfig: {
-      type: Object
-    }
+    animationConfig: {type: Object}
   },
 
-  listeners: {
-    'click': '_onClick'
-  },
+  listeners: {'click': '_onClick'},
 
@@ -77,10 +70,6 @@ attached: function() {
 
-      'exit': [{
-        name: 'hero-animation',
-        id: 'hero',
-        fromPage: this
-      }, {
-        name: 'cascaded-animation',
-        animation: 'scale-down-animation'
-      }]
+      'exit': [
+        {name: 'hero-animation', id: 'hero', fromPage: this},
+        {name: 'cascaded-animation', animation: 'scale-down-animation'}
+      ]
     };
@@ -94,5 +83,3 @@ },
       // configure the page animation
-      this.sharedElements = {
-        'hero': target
-      };
+      this.sharedElements = {'hero': target};
 
@@ -99,0 +86,0 @@ var nodesToScale = [];

demo/tiles/squares-page.js

@@ -1,7 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
-
 /**
@@ -16,2 +10,8 @@ @license
 */
+import '../../../polymer/polymer-legacy.js';
+
+import { NeonSharedElementAnimatableBehavior } from '../../neon-shared-element-animatable-behavior.js';
+import { Polymer } from '../../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../../polymer/lib/utils/html-tag.js';
+import { dom } from '../../../polymer/lib/legacy/polymer.dom.js';
 Polymer({
@@ -50,16 +50,9 @@ _template: html`
   is: 'squares-page',
+  behaviors: [NeonSharedElementAnimatableBehavior],
 
-  behaviors: [
-    NeonSharedElementAnimatableBehavior
-  ],
-
   properties: {
 
-    sharedElements: {
-      type: Object
-    },
+    sharedElements: {type: Object},
 
-    animationConfig: {
-      type: Object
-    }
+    animationConfig: {type: Object}
   },
@@ -72,28 +65,27 @@
 
-    this.sharedElements = { 'hero': this.$.header };
+    this.sharedElements = {'hero': this.$.header};
     var squares = dom(this.root).querySelectorAll('.square');
     var squaresArray = Array.prototype.slice.call(squares);
     this.animationConfig = {
-      'entry': [{
-        name: 'hero-animation',
-        id: 'hero',
-        toPage: this
-      }, {
-        name: 'cascaded-animation',
-        animation: 'transform-animation',
-        transformFrom: 'translateY(100%)',
-        nodes: squaresArray
-      }],
+      'entry': [
+        {name: 'hero-animation', id: 'hero', toPage: this},
+        {
+          name: 'cascaded-animation',
+          animation: 'transform-animation',
+          transformFrom: 'translateY(100%)',
+          nodes: squaresArray
+        }
+      ],
 
-      'exit': [{
-        name: 'slide-up-animation',
-        node: this.$.header
-      }, {
-        name: 'cascaded-animation',
-        animation: 'transform-animation',
-        transformTo: 'translateY(60vh)',
-        nodes: squaresArray
-      }]
+      'exit': [
+        {name: 'slide-up-animation', node: this.$.header},
+        {
+          name: 'cascaded-animation',
+          animation: 'transform-animation',
+          transformTo: 'translateY(60vh)',
+          nodes: squaresArray
+        }
+      ]
     };
   }
 });

manifest.json

@@ -105,10 +105,2 @@ {
     },
-    "index.html": {
-      "convertedUrl": "index.html",
-      "exports": {}
-    },
-    "neon-animation.html": {
-      "convertedUrl": "neon-animation.html",
-      "exports": {}
-    },
     "neon-animated-pages.html": {
@@ -129,2 +121,10 @@ "convertedUrl": "neon-animated-pages.js",
     },
+    "index.html": {
+      "convertedUrl": "index.html",
+      "exports": {}
+    },
+    "neon-animation.html": {
+      "convertedUrl": "neon-animation.html",
+      "exports": {}
+    },
     "demo/index.html": {
@@ -131,0 +131,0 @@ "convertedUrl": "demo/index.html",

neon-animatable-behavior.js

@@ -1,3 +0,18 @@
-import '@polymer/polymer/polymer-legacy.js';
+/**
+@license
+Copyright (c) 2015 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
+*/
+import '../polymer/polymer-legacy.js';
 
+/**
+ * `Polymer.NeonAnimatableBehavior` is implemented by elements containing
+ * animations for use with elements implementing
+ * `Polymer.NeonAnimationRunnerBehavior`.
+ * @polymerBehavior
+ */
 export const NeonAnimatableBehavior = {
@@ -10,23 +25,17 @@
      */
-    animationConfig: {
-      type: Object
-    },
+    animationConfig: {type: Object},
 
     /**
-     * Convenience property for setting an 'entry' animation. Do not set `animationConfig.entry`
-     * manually if using this. The animated node is set to `this` if using this property.
+     * Convenience property for setting an 'entry' animation. Do not set
+     * `animationConfig.entry` manually if using this. The animated node is set
+     * to `this` if using this property.
      */
-    entryAnimation: {
-      observer: '_entryAnimationChanged',
-      type: String
-    },
+    entryAnimation: {observer: '_entryAnimationChanged', type: String},
 
     /**
-     * Convenience property for setting an 'exit' animation. Do not set `animationConfig.exit`
-     * manually if using this. The animated node is set to `this` if using this property.
+     * Convenience property for setting an 'exit' animation. Do not set
+     * `animationConfig.exit` manually if using this. The animated node is set
+     * to `this` if using this property.
      */
-    exitAnimation: {
-      observer: '_exitAnimationChanged',
-      type: String
-    }
+    exitAnimation: {observer: '_exitAnimationChanged', type: String}
 
@@ -37,6 +46,3 @@ },
     this.animationConfig = this.animationConfig || {};
-    this.animationConfig['entry'] = [{
-      name: this.entryAnimation,
-      node: this
-    }];
+    this.animationConfig['entry'] = [{name: this.entryAnimation, node: this}];
   },
@@ -46,6 +52,3 @@
     this.animationConfig = this.animationConfig || {};
-    this.animationConfig['exit'] = [{
-      name: this.exitAnimation,
-      node: this
-    }];
+    this.animationConfig['exit'] = [{name: this.exitAnimation, node: this}];
   },
@@ -61,5 +64,3 @@
   _cloneConfig: function(config) {
-    var clone = {
-      isClone: true
-    };
+    var clone = {isClone: true};
     this._copyProperties(clone, config);
@@ -74,4 +75,7 @@ return clone;
 
-    if(this.animationConfig.value && typeof this.animationConfig.value === 'function') {
-      this._warn(this._logf('playAnimation', "Please put 'animationConfig' inside of your components 'properties' object instead of outside of it."));
+    if (this.animationConfig.value &&
+        typeof this.animationConfig.value === 'function') {
+      this._warn(this._logf(
+          'playAnimation',
+          'Please put \'animationConfig\' inside of your components \'properties\' object instead of outside of it.'));
       return;
@@ -96,3 +100,4 @@ }
         if (config.animatable) {
-          config.animatable._getAnimationConfigRecursive(config.type || type, map, allConfigs);
+          config.animatable._getAnimationConfigRecursive(
+              config.type || type, map, allConfigs);
         } else {
@@ -121,6 +126,7 @@ if (config.id) {
   /**
-   * An element implementing `Polymer.NeonAnimationRunnerBehavior` calls this method to configure
-   * an animation with an optional type. Elements implementing `Polymer.NeonAnimatableBehavior`
-   * should define the property `animationConfig`, which is either a configuration object
-   * or a map of animation type to array of configuration objects.
+   * An element implementing `Polymer.NeonAnimationRunnerBehavior` calls this
+   * method to configure an animation with an optional type. Elements
+   * implementing `Polymer.NeonAnimatableBehavior` should define the property
+   * `animationConfig`, which is either a configuration object or a map of
+   * animation type to array of configuration objects.
    */
@@ -127,0 +133,0 @@ getAnimationConfig: function(type) {

neon-animatable.js

@@ -1,7 +0,1 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { NeonAnimatableBehavior } from './neon-animatable-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-
 /**
@@ -28,2 +22,13 @@ @license
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../polymer/polymer-legacy.js';
+
+import { IronResizableBehavior } from '../iron-resizable-behavior/iron-resizable-behavior.js';
+import { NeonAnimatableBehavior } from './neon-animatable-behavior.js';
+import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../polymer/lib/utils/html-tag.js';
 Polymer({
@@ -41,7 +46,3 @@ _template: html`
   is: 'neon-animatable',
-
-  behaviors: [
-    NeonAnimatableBehavior,
-    IronResizableBehavior
-  ]
+  behaviors: [NeonAnimatableBehavior, IronResizableBehavior]
 });

neon-animated-pages.js

@@ -1,8 +0,33 @@
-import '@polymer/polymer/polymer-legacy.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { IronSelectableBehavior } from '@polymer/iron-selector/iron-selectable.js';
+/**
+@license
+Copyright (c) 2015 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
+*/
+/**
+Material design: [Meaningful transitions](https://www.google.com/design/spec/animation/meaningful-transitions.html)
+
+`neon-animated-pages` manages a set of pages and runs an animation when switching between them. Its
+children pages should implement `Polymer.NeonAnimatableBehavior` and define `entry` and `exit`
+animations to be run when switching to or switching out of the page.
+
+@group Neon Elements
+@element neon-animated-pages
+*/
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
+import '../polymer/polymer-legacy.js';
+
+import { IronResizableBehavior } from '../iron-resizable-behavior/iron-resizable-behavior.js';
+import { IronSelectableBehavior } from '../iron-selector/iron-selectable.js';
 import { NeonAnimationRunnerBehavior } from './neon-animation-runner-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js';
+import { Polymer } from '../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../polymer/lib/utils/html-tag.js';
+import { dom } from '../polymer/lib/legacy/polymer.dom.js';
 
@@ -48,12 +73,7 @@ Polymer({
 
-    activateEvent: {
-      type: String,
-      value: ''
-    },
+    activateEvent: {type: String, value: ''},
 
-    // if true, the initial page selection will also be animated according to its animation config.
-    animateInitialSelection: {
-      type: Boolean,
-      value: false
-    }
+    // if true, the initial page selection will also be animated according to
+    // its animation config.
+    animateInitialSelection: {type: Boolean, value: false}
 
@@ -78,3 +98,4 @@ },
 
-    // on initial load and if animateInitialSelection is negated, simply display selectedPage.
+    // on initial load and if animateInitialSelection is negated, simply display
+    // selectedPage.
     if (!oldPage && !this.animateInitialSelection) {
@@ -89,12 +110,7 @@ this._completeSelectedChanged();
     if (this.entryAnimation) {
-      this.animationConfig.push({
-        name: this.entryAnimation,
-        node: selectedPage
-      });
+      this.animationConfig.push(
+          {name: this.entryAnimation, node: selectedPage});
     } else {
       if (selectedPage.getAnimationConfig) {
-        this.animationConfig.push({
-          animatable: selectedPage,
-          type: 'entry'
-        });
+        this.animationConfig.push({animatable: selectedPage, type: 'entry'});
       }
@@ -105,3 +121,2 @@ }
     if (oldPage) {
-
       // cancel the currently running animation if one is ongoing.
@@ -117,12 +132,6 @@ if (oldPage.classList.contains('neon-animating')) {
       if (this.exitAnimation) {
-        this.animationConfig.push({
-          name: this.exitAnimation,
-          node: oldPage
-        });
+        this.animationConfig.push({name: this.exitAnimation, node: oldPage});
       } else {
         if (oldPage.getAnimationConfig) {
-          this.animationConfig.push({
-            animatable: oldPage,
-            type: 'exit'
-          });
+          this.animationConfig.push({animatable: oldPage, type: 'exit'});
         }
@@ -140,17 +149,11 @@ }
     if (this.animationConfig.length >= 1) {
-
       // on first load, ensure we run animations only after element is attached.
       if (!this.isAttached) {
-        this.async(function () {
-          this.playAnimation(undefined, {
-            fromPage: null,
-            toPage: selectedPage
-          });
+        this.async(function() {
+          this.playAnimation(undefined, {fromPage: null, toPage: selectedPage});
         });
 
       } else {
-        this.playAnimation(undefined, {
-          fromPage: oldPage,
-          toPage: selectedPage
-        });
+        this.playAnimation(
+            undefined, {fromPage: oldPage, toPage: selectedPage});
       }
@@ -157,0 +160,0 @@

neon-animation-behavior.js

@@ -1,3 +0,16 @@
-import '@polymer/polymer/polymer-legacy.js';
+/**
+@license
+Copyright (c) 2015 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
+*/
+import '../polymer/polymer-legacy.js';
 
+/**
+ * Use `Polymer.NeonAnimationBehavior` to implement an animation.
+ * @polymerBehavior
+ */
 export const NeonAnimationBehavior = {
@@ -14,5 +27,3 @@
         return {
-          duration: 500,
-          easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
-          fill: 'both'
+          duration: 500, easing: 'cubic-bezier(0.4, 0, 0.2, 1)', fill: 'both'
         }
@@ -37,3 +48,4 @@ }
     if (!document.body.animate) {
-      console.warn('No web animations detected. This element will not' +
+      console.warn(
+          'No web animations detected. This element will not' +
           ' function without a web animations polyfill.');
@@ -44,4 +56,4 @@ }
   /**
-   * Returns the animation timing by mixing in properties from `config` to the defaults defined
-   * by the animation.
+   * Returns the animation timing by mixing in properties from `config` to the
+   * defaults defined by the animation.
    */
@@ -58,3 +70,4 @@ timingFromConfig: function(config) {
   /**
-   * Sets `transform` and `transformOrigin` properties along with the prefixed versions.
+   * Sets `transform` and `transformOrigin` properties along with the prefixed
+   * versions.
    */
@@ -61,0 +74,0 @@ setPrefixedProperty: function(node, property, value) {

neon-animation-runner-behavior.js

@@ -1,4 +0,19 @@
-import '@polymer/polymer/polymer-legacy.js';
+/**
+@license
+Copyright (c) 2015 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
+*/
+import '../polymer/polymer-legacy.js';
+
 import { NeonAnimatableBehavior } from './neon-animatable-behavior.js';
 
+/**
+ * `Polymer.NeonAnimationRunnerBehavior` adds a method to run animations.
+ *
+ * @polymerBehavior Polymer.NeonAnimationRunnerBehavior
+ */
 export const NeonAnimationRunnerBehaviorImpl = {
@@ -16,4 +31,4 @@
           var result = null;
-          // Closure compiler does not work well with a try / catch here. .configure needs to be
-          // explicitly defined
+          // Closure compiler does not work well with a try / catch here.
+          // .configure needs to be explicitly defined
           if (!neonAnimation.configure) {
@@ -30,3 +45,3 @@ /**
           result = neonAnimation.configure(config);
-          resultsToPlay.push({ result: result, config: config });
+          resultsToPlay.push({result: result, config: config});
         } else {
@@ -127,3 +142,3 @@ console.warn(this.is + ':', config.name, 'not found!');
 
-      for (var j in entries) {
+                    for (var j in entries) {
         entries[j].animation.cancel();
@@ -137,5 +152,3 @@ }
 
-export const NeonAnimationRunnerBehavior = [
-  NeonAnimatableBehavior,
-  NeonAnimationRunnerBehaviorImpl
-];
+/** @polymerBehavior Polymer.NeonAnimationRunnerBehavior */
+export const NeonAnimationRunnerBehavior = [NeonAnimatableBehavior, NeonAnimationRunnerBehaviorImpl];

neon-animations.js

@@ -1,2 +0,2 @@
-import '@polymer/polymer/polymer-legacy.js';
+import '../polymer/polymer-legacy.js';
 import './animations/cascaded-animation.js';
@@ -30,2 +30,7 @@ import './animations/fade-in-animation.js';
 */
+/*
+  FIXME(polymer-modulizer): the above comments were extracted
+  from HTML and may be out of place here. Review them and
+  then delete this comment!
+*/
 ;

neon-shared-element-animatable-behavior.js

@@ -1,4 +0,19 @@
-import '@polymer/polymer/polymer-legacy.js';
+/**
+@license
+Copyright (c) 2015 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
+*/
+import '../polymer/polymer-legacy.js';
+
 import { NeonAnimatableBehavior } from './neon-animatable-behavior.js';
 
+/**
+ * Use `Polymer.NeonSharedElementAnimatableBehavior` to implement elements
+ * containing shared element animations.
+ * @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior
+ */
 export const NeonSharedElementAnimatableBehaviorImpl = {
@@ -11,6 +26,3 @@
      */
-    sharedElements: {
-      type: Object,
-      value: {}
-    }
+    sharedElements: {type: Object, value: {}}
 
@@ -21,2 +33,3 @@ }
 
+/** @polymerBehavior Polymer.NeonSharedElementAnimatableBehavior */
 export const NeonSharedElementAnimatableBehavior = [
@@ -23,0 +36,0 @@ NeonAnimatableBehavior,

neon-shared-element-animation-behavior.js

@@ -1,4 +0,19 @@
-import '@polymer/polymer/polymer-legacy.js';
+/**
+@license
+Copyright (c) 2015 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
+*/
+import '../polymer/polymer-legacy.js';
+
 import { NeonAnimationBehavior } from './neon-animation-behavior.js';
 
+/**
+ * Use `Polymer.NeonSharedElementAnimationBehavior` to implement shared element
+ * animations.
+ * @polymerBehavior Polymer.NeonSharedElementAnimationBehavior
+ */
 export const NeonSharedElementAnimationBehaviorImpl = {
@@ -11,5 +26,3 @@
      */
-    sharedElements: {
-      type: Object
-    }
+    sharedElements: {type: Object}
 
@@ -25,3 +38,4 @@ },
     if (!fromPage || !toPage) {
-      console.warn(this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
+      console.warn(
+          this.is + ':', !fromPage ? 'fromPage' : 'toPage', 'is undefined!');
       return null;
@@ -31,3 +45,6 @@ };
     if (!fromPage.sharedElements || !toPage.sharedElements) {
-      console.warn(this.is + ':', 'sharedElements are undefined for', !fromPage.sharedElements ? fromPage : toPage);
+      console.warn(
+          this.is + ':',
+          'sharedElements are undefined for',
+          !fromPage.sharedElements ? fromPage : toPage);
       return null;
@@ -40,10 +57,12 @@ };
     if (!from || !to) {
-      console.warn(this.is + ':', 'sharedElement with id', config.id, 'not found in', !from ? fromPage : toPage);
+      console.warn(
+          this.is + ':',
+          'sharedElement with id',
+          config.id,
+          'not found in',
+          !from ? fromPage : toPage);
       return null;
     }
 
-    this.sharedElements = {
-      from: from,
-      to: to
-    };
+    this.sharedElements = {from: from, to: to};
     return this.sharedElements;
@@ -54,2 +73,3 @@ }
 
+/** @polymerBehavior Polymer.NeonSharedElementAnimationBehavior */
 export const NeonSharedElementAnimationBehavior = [
@@ -56,0 +76,0 @@ NeonAnimationBehavior,

package.json

@@ -19,18 +19,20 @@ {
     "bower": "^1.8.0",
-    "@polymer/app-layout": "3.0.0-pre.12",
-    "@polymer/iron-component-page": "3.0.0-pre.12",
-    "@polymer/iron-flex-layout": "3.0.0-pre.12",
-    "@polymer/iron-icon": "3.0.0-pre.12",
-    "@polymer/iron-icons": "3.0.0-pre.12",
-    "@polymer/paper-icon-button": "3.0.0-pre.12",
-    "@polymer/paper-item": "3.0.0-pre.12",
-    "@polymer/paper-styles": "3.0.0-pre.12",
+    "webmat": "^0.2.0",
+    "@polymer/app-layout": "^3.0.0-pre.13",
+    "@polymer/iron-component-page": "^3.0.0-pre.13",
+    "@polymer/iron-flex-layout": "^3.0.0-pre.13",
+    "@polymer/iron-icon": "^3.0.0-pre.13",
+    "@polymer/iron-icons": "^3.0.0-pre.13",
+    "@polymer/paper-icon-button": "^3.0.0-pre.13",
+    "@polymer/paper-item": "^3.0.0-pre.13",
+    "@polymer/paper-styles": "^3.0.0-pre.13",
     "web-animations-js": "^2.3.1",
-    "wct-browser-legacy": "0.0.1-pre.11",
-    "@webcomponents/webcomponentsjs": "^1.0.0"
+    "wct-browser-legacy": "^0.0.1-pre.11",
+    "@webcomponents/webcomponentsjs": "^2.0.0-0"
   },
   "scripts": {
-    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir ."
+    "update-types": "bower install && gen-typescript-declarations --deleteExisting --outDir .",
+    "format": "webmat && npm run update-types"
   },
-  "version": "3.0.0-pre.12",
+  "version": "3.0.0-pre.13",
   "resolutions": {
@@ -44,6 +46,6 @@ "inherits": "2.0.3",
   "dependencies": {
-    "@polymer/iron-resizable-behavior": "3.0.0-pre.12",
-    "@polymer/iron-selector": "3.0.0-pre.12",
-    "@polymer/polymer": "3.0.0-pre.12"
+    "@polymer/iron-resizable-behavior": "^3.0.0-pre.13",
+    "@polymer/iron-selector": "^3.0.0-pre.13",
+    "@polymer/polymer": "^3.0.0-pre.13"
   }
 }

test/test-resizable-pages.js

@@ -1,6 +0,16 @@
-import '@polymer/polymer/polymer-legacy.js';
+/**
+@license
+Copyright (c) 2015 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
+*/
+import '../../polymer/polymer-legacy.js';
+
 import { NeonSharedElementAnimatableBehavior } from '../neon-shared-element-animatable-behavior.js';
-import { IronResizableBehavior } from '@polymer/iron-resizable-behavior/iron-resizable-behavior.js';
-import { Polymer } from '@polymer/polymer/lib/legacy/polymer-fn.js';
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { IronResizableBehavior } from '../../iron-resizable-behavior/iron-resizable-behavior.js';
+import { Polymer } from '../../polymer/lib/legacy/polymer-fn.js';
+import { html } from '../../polymer/lib/utils/html-tag.js';
 
@@ -7,0 +17,0 @@ Polymer({

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

175711

increased by5.27%

Lines of code

3083

increased by1.82%

Worsened metrics

Dev dependency count

14

increased by7.69%

Dependency changes

• + Added@polymer/iron-resizable-behavior@3.0.1(transitive)

• + Added@polymer/iron-selector@3.0.1(transitive)

• + Added@polymer/polymer@3.5.1(transitive)

• - Removed@polymer/iron-resizable-behavior@3.0.0-pre.12(transitive)

• - Removed@polymer/iron-selector@3.0.0-pre.12(transitive)

• - Removed@polymer/polymer@3.0.0-pre.12(transitive)

• - Removed@webcomponents/webcomponentsjs@1.3.3(transitive)

• Updated@polymer/iron-resizable-behavior@^3.0.0-pre.13

• Updated@polymer/iron-selector@^3.0.0-pre.13

• Updated@polymer/polymer@^3.0.0-pre.13