map-menu-submenu.html

<link rel="import" href="map-menu-item.html">
<link rel="import" href="map-menu-header.html">
<link rel="import" href="../paper-button/paper-button.html">

<dom-module id="map-menu-submenu">
  <template>
    <style>
      :host {
        display: block;
      }

      :host([collapsable])>map-menu-header {
        cursor: pointer;
        display: block;
      }

      #container {
        margin-left: 1em;
      }

      #container ::slotted(map-menu-item) {
        margin-top: .4em;
      }
    </style>
    <map-menu-header avatar-label="[[avatarLabel]]" id="[[id]]" title="[[title]]" label="[[label]]" opened="[[opened]]" url="[[url]]" icon="[[icon]]"></map-menu-header>
    <iron-collapse id="container">
      <slot id="slot"></slot>
    </iron-collapse>
  </template>
  <script>
    Polymer({
      is: 'map-menu-submenu',
      properties: {
        id: {
          type: String
        },
        title: {
          type: String
        },
        avatarLabel: {
          type: String
        },
        label: {
          type: String
        },
        icon: {
          type: String
        },
        opened: {
          type: Boolean,
          value: false
        },
        collapsable: {
          type: Boolean,
          value: true
        },
        expandChildren: {
          type: Boolean,
          value: false
        },
      },

      observers: [
        '_openChanged(opened)',
      ],

      listeners: {
        'child-deactivated': '__childDeactivated',
        'child-activated': '__childActivated',
        'active-item': '__activeChanged',
        'toggle-header': '__toggleHeader',
        'link-clicked': '_headerClickHandler'
      },

      _openChanged: function (opened) {
        var target = this.$.container;
        if (opened) target.show();
        if (!opened) target.hide();
      },

      _headerClickHandler: function (e) {
        if (!this.opened) {
          this.opened = !this.opened
        }
      },

      __toggleHeader: function (e) {
        // catch the event and end propagation
        e.stopPropagation()
        this.opened = !this.opened
        this.fire('toggle-updated')
      },

      __activeChanged: function (e) {
        this.opened = true
      },

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