<!– @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=“../../../iron-flex-layout/iron-flex-layout.html”> <link rel=“import” href=“../../neon-animatable-behavior.html”> <link rel=“import” href=“../../neon-animation-runner-behavior.html”> <link rel=“import” href=“../../../paper-styles/shadow.html”> <link rel=“import” href=“animated-grid.html”>

<dom-module id=“full-page”>

<template>
  <style>
    :host {
      background: black;
      visibility: hidden;
      @apply(--layout-vertical);
    }

    .toolbar {
      background: #9c27b0;
      height: 72px;
      z-index: 1;
      @apply(--shadow-elevation-2dp);
    }

    animated-grid {
      height: calc(100% - 72px);
      @apply(--layout-flex);
    }
  </style>

  <div id="toolbar" class="toolbar"></div>
  <animated-grid id="grid"></animated-grid>

</template>

</dom-module>

<script>

Polymer({

is: 'full-page',

behaviors: [
  Polymer.NeonAnimatableBehavior,
  Polymer.NeonAnimationRunnerBehavior
],

properties: {

  animationConfig: {
    type: Object,
    value: function() {
      return {
        'entry': [{
          name: 'slide-from-top-animation',
          node: this.$.toolbar
        }, {
          animatable: this.$.grid,
          type: 'entry'
        }]
      };
    }
  }

},

show: function() {
  this.style.visibility = 'visible';
  this.playAnimation('entry');
}

});

</script>