<!– @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=“../iron-dropdown.html”> <link rel=“import” href=“../../neon-animation/neon-animations.html”> <link rel=“import” href=“grow-height-animation.html”>

<dom-module id=“x-select”>

<template>
  <style>
    :host {
      display: inline-block;
      margin: 1em;
    }
  </style>
  <div on-tap="open">
    <content select=".dropdown-trigger"></content>
  </div>
  <iron-dropdown id="dropdown"
    vertical-align="[[verticalAlign]]"
    horizontal-align="[[horizontalAlign]]"
    disabled="[[disabled]]"
    open-animation-config="[[openAnimationConfig]]"
    close-animation-config="[[closeAnimationConfig]]">
    <content select=".dropdown-content"></content>
  </iron-dropdown>
</template>
<script>
  Polymer({
    is: 'x-select',

    properties: {
      verticalAlign: String,
      horizontalAlign: String,
      disabled: Boolean,
      openAnimationConfig: {
        type: Array,
        value: function() {
          return [{
            name: 'fade-in-animation',
            timing: {
              delay: 150,
              duration: 50
            }
          }, {
            name: 'expand-animation',
            timing: {
              delay: 150,
              duration: 200
            }
          }];
        }
      },

      closeAnimationConfig: {
        type: Array,
        value: function() {
          return [{
            name: 'fade-out-animation',
            timing: {
              duration: 200
            }
          }];
        }
      }
    },

    open: function() {
      this.$.dropdown.open();
    }
  });
</script>

</dom-module>