npm_modules: Fork bower_components into Polymer 0.4.0 and 0.5.0 versions

bower_components/core-menu-button/core-menu-button.html

-<!--
-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
--->
-<!--
-@module Polymer Core Elements
-
-`core-menu-button` is a `core-icon-button` that opens a drop-down menu
-that allows the user to select an option. You can position the drop-down
-menu with the `halign` and `valign` properties, or use CSS if more control
-over positioning is desired.
-
-Example:
-
-    <core-menu-button id="btn">
-         <core-item icon="settings" label="Settings"></core-item>
-         <core-item icon="dialog" label="Dialog"></core-item>
-         <core-item icon="search" label="Search"></core-item>
-    </core-menu-button>
-
-Style the drop-down by using the `core-menu-button::shadow #dropdown` selector:
-
-    /* position this drop-down below the button, and style it white on black. */
-    #btn::shadow #dropdown {
-        top: 38px;
-        color: #fff;
-        background: #000;
-    }
-
-@class core-menu-button
-@status beta
-@homepage github.io
--->
-
-<!--
-Fired when an item's selection state is changed. This event is fired both
-when an item is selected or deselected. The `isSelected` detail property
-contains the selection state.
-
-@event core-select
-@param {Object} detail
-  @param {boolean} detail.isSelected true for selection and false for deselection
-  @param {Object} detail.item the item element
--->
-<!--
-Fired when an item element is tapped.
-
-@event core-activate
-@param {Object} detail
-  @param {Object} detail.item the item element
--->
-<link href="../polymer/polymer.html" rel="import">
-<link href="../core-dropdown/core-dropdown.html" rel="import">
-<link href="../core-icon-button/core-icon-button.html" rel="import">
-<link href="../core-menu/core-menu.html" rel="import">
-
-<polymer-element name="core-menu-button" attributes="icon label src selected opened halign valign valueattr multi inlineMenu">
-  <template>
-    <link rel="stylesheet" href="core-menu-button.css">
-    <core-icon-button id="button" on-tap="{{toggle}}" src="{{src}}" icon="{{icon}}" active="{{opened}}"><span>{{label}}</span></core-icon-button>
-    <core-dropdown id="dropdown" relatedTarget="{{$.button}}" opened="{{opened}}" halign="{{halign}}" valign="{{valign}}">
-      <core-menu
-          selected="{{selected}}"
-          valueattr="{{valueattr}}"
-          selectedClass="{{selectedClass}}"
-          selectedProperty="{{selectedProperty}}"
-          selectedAttribute="{{selectedAttribute}}"
-          selectedItem="{{selectedItem}}"
-          selectedModel="{{selectedModel}}"
-          selectedIndex="{{selectedIndex}}"
-          excludedLocalNames="{{excludedLocalNames}}"
-          on-core-activate="{{closeAction}}">
-        <content select="*"></content>
-      </core-menu>
-    </core-dropdown>
-  </template>
-  <script>
-    Polymer('core-menu-button', {
-
-      publish: {
-
-        /**
-         * The icon to display.
-         * @attribute icon
-         * @type string
-         */
-        icon: 'dots',
-
-        src: '',
-
-        /**
-         * Set to true to open the menu.
-         * @attribute opened
-         * @type boolean
-         */
-        opened: false,
-
-        /**
-         * Set to true to cause the menu popup to be displayed inline rather
-         * than in its own layer.
-         * @attribute inlineMenu
-         * @type boolean
-         */
-        inlineMenu: false,
-
-        /**
-         * Horizontally align the overlay with the button.
-         * @attribute halign
-         * @type string
-         */
-        halign: 'left',
-
-        /**
-         * Display the overlay on top or below the button.
-         * @attribute valign
-         * @type string
-         */
-        valign: 'top',
-
-        /**
-         * If true, the selection will persist when the menu is opened
-         * and closed multiple times.
-         *
-         * @attribute stickySelection
-         * @type boolean
-         * @default false
-         */
-        stickySelection: false,
-
-        /**
-         * The index of the selected menu item.
-         * @attribute selected
-         * @type number
-         */
-        selected: '',
-
-        /**
-         * Specifies the attribute to be used for "selected" attribute.
-         *
-         * @attribute valueattr
-         * @type string
-         * @default 'name'
-         */
-        valueattr: 'name',
-
-        /**
-         * Specifies the CSS class to be used to add to the selected element.
-         *
-         * @attribute selectedClass
-         * @type string
-         * @default 'core-selected'
-         */
-        selectedClass: 'core-selected',
-
-        /**
-         * Specifies the property to be used to set on the selected element
-         * to indicate its active state.
-         *
-         * @attribute selectedProperty
-         * @type string
-         * @default ''
-         */
-        selectedProperty: '',
-
-        /**
-         * Specifies the attribute to set on the selected element to indicate
-         * its active state.
-         *
-         * @attribute selectedAttribute
-         * @type string
-         * @default 'active'
-         */
-        selectedAttribute: 'active',
-
-        /**
-         * Returns the currently selected element. In multi-selection this returns
-         * an array of selected elements.
-         * Note that you should not use this to set the selection. Instead use
-         * `selected`.
-         *
-         * @attribute selectedItem
-         * @type Object
-         * @default null
-         */
-        selectedItem: null,
-
-        /**
-         * In single selection, this returns the model associated with the
-         * selected element.
-         * Note that you should not use this to set the selection. Instead use
-         * `selected`.
-         *
-         * @attribute selectedModel
-         * @type Object
-         * @default null
-         */
-        selectedModel: null,
-
-        /**
-         * In single selection, this returns the selected index.
-         * Note that you should not use this to set the selection. Instead use
-         * `selected`.
-         *
-         * @attribute selectedIndex
-         * @type number
-         * @default -1
-         */
-        selectedIndex: -1,
-
-        /**
-         * Nodes with local name that are in the list will not be included
-         * in the selection items.
-         *
-         * @attribute excludedLocalNames
-         * @type string
-         * @default ''
-         */
-        excludedLocalNames: ''
-
-      },
-
-      closeAction: function() {
-        this.opened = false;
-      },
-
-      /**
-       * Toggle the opened state of the dropdown.
-       * @method toggle
-       */
-      toggle: function() {
-        this.opened = !this.opened;
-      },
-
-      /**
-       * The selected menu item.
-       * @property selection
-       * @type Node
-       */
-      get selection() {
-        return this.$.menu.selection;
-      },
-
-      openedChanged: function() {
-        if (this.opened && !this.stickySelection) {
-          this.selected = null;
-        }
-      }
-
-    });
-  </script>
-</polymer-element>