<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 polymer.github.io/PATENTS.txt –>

<link rel=“import” href=“../polymer/polymer.html”> <link rel=“import” href=“../iron-menu-behavior/iron-menu-behavior.html”> <link rel=“import” href=“../iron-behaviors/iron-control-state.html”> <link rel=“import” href=“../iron-collapse/iron-collapse.html”> <link rel=“import” href=“../iron-flex-layout/iron-flex-layout.html”> <link rel=“import” href=“../paper-styles/default-theme.html”> <link rel=“import” href=“../paper-styles/color.html”> <link rel=“import” href=“paper-menu-shared-styles.html”>

<!– `<paper-submenu>` is a nested menu inside of a parent `<paper-menu>`. It consists of a trigger that expands or collapses another `<paper-menu>`:

<paper-menu>
  <paper-submenu>
    <paper-item class="menu-trigger">Topics</paper-item>
    <paper-menu class="menu-content">
      <paper-item>Topic 1</paper-item>
      <paper-item>Topic 2</paper-item>
      <paper-item>Topic 3</paper-item>
    </paper-menu>
  </paper-submenu>
  <paper-submenu>
    <paper-item class="menu-trigger">Faves</paper-item>
    <paper-menu class="menu-content">
      <paper-item>Fave 1</paper-item>
      <paper-item>Fave 2</paper-item>
    </paper-menu>
  </paper-submenu>
  <paper-submenu disabled>
    <paper-item class="menu-trigger">Unavailable</paper-item>
    <paper-menu class="menu-content">
      <paper-item>Disabled 1</paper-item>
      <paper-item>Disabled 2</paper-item>
    </paper-menu>
  </paper-submenu>
</paper-menu>

Just like in `<paper-menu>`, the focused item is highlighted, and the selected item has bolded text. Please see the `<paper-menu>` docs for which attributes (such as `multi` and `selected`), and styling options are available for the `menu-content` menu.

@group Paper Elements @element paper-submenu @hero hero.svg @demo demo/index.html –>

<dom-module id=“paper-submenu”>

<template>
  <style include="paper-menu-shared-styles"></style>

  <div class="selectable-content" on-tap="_onTap">
    <content id="trigger" select=".menu-trigger"></content>
  </div>
  <iron-collapse id="collapse" opened="{{opened}}">
    <content id="content" select=".menu-content"></content>
  </iron-collapse>
</template>

<script>

(function() {

  Polymer({

    is: 'paper-submenu',

    properties: {
      /**
       * Fired when the submenu is opened.
       *
       * @event paper-submenu-open
       */

      /**
       * Fired when the submenu is closed.
       *
       * @event paper-submenu-close
       */

      /**
       * Set opened to true to show the collapse element and to false to hide it.
       *
       * @attribute opened
       */
      opened: {
        type: Boolean,
        value: false,
        notify: true,
        observer: '_openedChanged'
      }
    },

    behaviors: [
      Polymer.IronControlState
    ],

    listeners: {
      'focus': '_onFocus'
    },

    get __parent() {
      return Polymer.dom(this).parentNode;
    },

    get __trigger() {
      return Polymer.dom(this.$.trigger).getDistributedNodes()[0];
    },

    get __content() {
      return Polymer.dom(this.$.content).getDistributedNodes()[0];
    },

    attached: function() {
      this.listen(this.__parent, 'iron-activate', '_onParentIronActivate');
    },

    dettached: function() {
      this.unlisten(this.__parent, 'iron-activate', '_onParentIronActivate');
    },

    /**
     * Expand the submenu content.
     */
    open: function() {
      if (!this.disabled && !this._active) {
        this.$.collapse.show();
        this._active = true;
        this.__trigger && this.__trigger.classList.add('iron-selected');
        this.__content && this.__content.focus();
      }
    },

    /**
     * Collapse the submenu content.
     */
    close: function() {
      if (this._active) {
        this.$.collapse.hide();
        this._active = false;
        this.__trigger && this.__trigger.classList.remove('iron-selected');
      }
    },

    /**
     * Toggle the submenu.
     */
    toggle: function() {
      if (this._active) {
        this.close();
      } else {
        this.open();
      }
    },

    /**
     * A handler that is called when the trigger is tapped.
     */
    _onTap: function(e) {
      if (!this.disabled) {
        this.toggle();
      }
    },

    /**
     * Toggles the submenu content when the trigger is tapped.
     */
    _openedChanged: function(opened, oldOpened) {
      if (opened) {
        this.fire('paper-submenu-open');
      } else if (oldOpened != null) {
        this.fire('paper-submenu-close');
      }
    },

    /**
     * A handler that is called when `iron-activate` is fired.
     *
     * @param {CustomEvent} event An `iron-activate` event.
     */
    _onParentIronActivate: function(event) {
      var parent = this.__parent;
      if (Polymer.dom(event).localTarget === parent) {
        // The activated item can either be this submenu, in which case it
        // should be expanded, or any of the other sibling submenus, in which
        // case this submenu should be collapsed.
        if (event.detail.item !== this && !parent.multi) {
          this.close();
        }
      }
    },

    /**
     * If the dropdown is open when disabled becomes true, close the
     * dropdown.
     *
     * @param {boolean} disabled True if disabled, otherwise false.
     */
    _disabledChanged: function(disabled) {
      Polymer.IronControlState._disabledChanged.apply(this, arguments);
      if (disabled && this._active) {
        this.close();
      }
    },

    /**
     * Handler that is called when the menu receives focus.
     *
     * @param {FocusEvent} event A focus event.
     */
    _onFocus: function(event) {
      this.__trigger && this.__trigger.focus();
    }

  });

})();

</script> </dom-module>