catapult/third_party/polymer/components/iron-dropdown/demo/x-select.html

<!--
@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
-->

<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">
  <style>
    :host {
      display: inline-block;
      margin: 1em;
    }
  </style>
  <template>
    <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>