paper-dropdown-menu-items.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="../polymer/polymer.html">
<link rel="import" href="paper-input-items-behaviors.html">
<link rel="import" href="../paper-dropdown-menu/paper-dropdown-menu.html">
<link rel="import" href="../paper-listbox/paper-listbox.html">
<link rel="import" href="../paper-item/paper-item.html">
<link rel="import" href="lookup-accessor.html">
<!--
A paper-menu-dropdown using firebase-collection items as menu options

Example:

@demo demo/index.html

-->
<dom-module id="paper-dropdown-menu-items">
  <template>
    <style>
    :host {
      display: block;
    }

    paper-dropdown-menu {
      width: 100%;
    }

    </style>
    <paper-dropdown-menu 
      async-value
      id="selector" 
      selected-item-label="{{selectedItemLabel}}"
      selected-item="[[value]]" 
      label="[[label]]" 
      readonly="[[readonly]]" 
      placeholder="[[placeholder]]" 
      error-message="[[errorMessage]]" 
      opened="[[opened]]" 
      no-label-float="[[noLabelFloat]]"
      always-float-label="[[alwaysFloatLabel]]" 
      no-animations="[[noAnimations]]" 
      horizontal-align="[[horizontalAlign]]" 
      vertical-align="[[verticalAlign]]">
      <paper-listbox slot="dropdown-content" class="dropdown-content" selected="{{value}}" attr-for-selected="name">
        <template is="dom-repeat" id="repeat" items="[[items]]" filter="[[filter]]" observe="[[observe]]">
          <paper-item name="[[valueAccessor(item, valuePath)]]">[[labelAccessor(item.*, labelPath)]]</paper-item>
        </template>
      </paper-listbox>
    </paper-dropdown-menu>
    <content></content>
  </template>
  <script>
  Polymer({
    is: 'paper-dropdown-menu-items',

    behaviors: [
      Polymer.behaviors.paperInputItems
    ],

    properties: {
      /**
       * True if the dropdown is open. Otherwise, false.
       */
      opened: {
        type: Boolean,
        notify: true,
        value: false
      },

      selectedItemLabel: {
        type: String,
        notify: true
      }
    }

  });
  </script>
</dom-module>