five-bells-visualization/public/bower_components/core-dropdown-menu/core-dropdown-menu.html

Tool to visualize Five Bells payments

<!--
Copyright (c) 2014 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
-->

<!--

`core-dropdown-menu` works together with `core-dropdown` and `core-selector` to
implement a drop-down menu. The currently selected item is displayed in the
control. If no item is selected, the `label` is displayed instead.

The child element with the class `dropdown` will be used as the drop-down
menu. It should be a `core-dropdown` or other overlay element. You should
also provide a `core-selector` or other selector element, such as `core-menu`,
in the drop-down.

Example:

    <core-dropdown-menu label="Choose a pastry">
        <core-dropdown class="dropdown">
            <core-selector>
              <core-item label="Croissant"></core-item>
              <core-item label="Donut"></core-item>
              <core-item label="Financier"></core-item>
              <core-item label="Madeleine"></core-item>
            </core-selector>
        </core-dropdown>
    </core-dropdown-menu>

@group Polymer Core Elements
@element core-dropdown-menu
@extends core-dropdown-base
@status unstable
@homepage github.io
-->

<link href="../polymer/polymer.html" rel="import">
<link href="../core-a11y-keys/core-a11y-keys.html" rel="import">
<link href="../core-dropdown/core-dropdown-base.html" rel="import">
<link href="../core-focusable/core-focusable.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../core-icons/core-icons.html" rel="import">

<polymer-element name="core-dropdown-menu" extends="core-dropdown-base" relative layout inline horizontal center tabindex="0">
<template>

  <style>
    :host {
      background-color: #fff;
    }

    :host([disabled]) {
      color: #a8a8a8;
    }

    #label {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  </style>

  <core-a11y-keys target="{{}}" keys="enter space" on-keys-pressed="{{toggleOverlay}}"></core-a11y-keys>

  <div flex auto id="label">{{selectedItemLabel || label}}</div>
  <core-icon id="arrow" icon="{{opened ? openedIcon : closedIcon}}"></core-icon>

  <content></content>

</template>
<script>

(function() {

  var p = {

    publish: {

      /**
       * A label for the control. The label is displayed if no item is selected.
       *
       * @attribute label
       * @type string
       * @default 'Select an item'
       */
      label: 'Select an item',

      /**
       * The icon to display when the drop-down is opened.
       *
       * @attribute openedIcon
       * @type string
       * @default 'arrow-drop-up'
       */
      openedIcon: 'arrow-drop-up',

      /**
       * The icon to display when the drop-down is closed.
       *
       * @attribute closedIcon
       * @type string
       * @default 'arrow-drop-down'
       */
      closedIcon: 'arrow-drop-down'

    },

    selectedItemLabel: '',

    overlayListeners: {
      'core-overlay-open': 'openAction',
      'core-activate': 'activateAction',
      'core-select': 'selectAction'
    },

    activateAction: function(e) {
      this.opened = false;
    },

    selectAction: function(e) {
      var detail = e.detail;
      if (detail.isSelected) {
        this.selectedItemLabel = detail.item.label || detail.item.textContent;
      } else {
        this.selectedItemLabel = '';
      }
    }

  };

  Polymer.mixin2(p, Polymer.CoreFocusable);
  Polymer(p);

})();

</script>
</polymer-element>