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

<!--
@group Paper Elements

`paper-item` is a list-item object for use in menus. It may contain and icon and/or
a text label.

Example:

    <core-menu>
        <paper-item icon="refresh" label="Refresh"></paper-item>
        <paper-item label="Help"></paper-item>
        <paper-item label="Sign Out"></paper-item>
    </core-menu>

To use as a link, put an `&lt;a&gt;` element in the item.

Example:

    <paper-item icon="home" label="Home">
        <a href="http://www.polymer-project.org"></a>
    </paper-item>

@class paper-item
-->

<link href="../polymer/polymer.html" rel="import">
<link href="../core-icon/core-icon.html" rel="import">
<link href="../paper-ripple/paper-ripple.html" rel="import">

<link href="paper-item.css" rel="stylesheet" shim-shadowdom>

<polymer-element name="paper-item" attributes="label iconSrc icon" center horizontal layout>

  <template>

    <paper-ripple id="ripple"></paper-ripple>

    <core-icon id="icon" hidden?="{{!iconSrc && !icon}}" src="{{iconSrc}}" icon="{{icon}}"></core-icon>
    <div id="label">{{label}}</div>
    <content></content>
  </template>

  <script>
    Polymer('paper-item', {

      publish: {

        /**
         * The label for the item.
         *
         * @attribute label
         * @type string
         * @default ''
         */
        label: '',

        /**
         * (optional) The URL of an image for an icon to use in the button.
         * Should not use `icon` property if you are using this property.
         *
         * @attribute iconSrc
         * @type string
         * @default ''
         */
        iconSrc: '',

        /**
         * (optional) Specifies the icon name or index in the set of icons
         * available in the icon set. If using this property, load the icon
         * set separately where the icon is used. Should not use `src`
         * if you are using this property.
         *
         * @attribute icon
         * @type string
         * @default ''
         */
        icon: ''

      },

      eventDelegates: {
        'down': 'downAction',
        'up': 'upAction'
      },

      downAction: function(e) {
        this.$.ripple.downAction(e);
      },

      upAction: function(e) {
        this.$.ripple.upAction(e);
      }
    });
  </script>
</polymer-element>