hc-nested-list-item.html

<link rel="import" href="../polymer/polymer.html">

<!--
`hc-nested-list-item` used to wrap content within an instanced of `hc-nested-list` to properly handle
tap events for triggering open/close state changes as well as circumventing the broken bindings
limitation of iron-list.

### Styling
Custom property | Description | Default
----------------|-------------|----------
`--hc-nested-list-item` | A mixin for styling this element | {}

@demo demo/hc-nested-list.html
-->

<dom-module id="hc-nested-list-item">
  <template>
    <style>
      :host {
        display: inline-block;
        cursor: pointer;

        @apply --hc-nested-list-item;
      }
    </style>

    <slot></slot>
  </template>
  <script>
    Polymer({
      is: 'hc-nested-list-item',
      properties: {
        /* The item holding all data */
        item: Object
      },
      listeners: {
        tap: 'fireOpenEvent'
      },
      /**
       * Fires the toggle event required by hc-nested-list to open/close content sections.
       *
       * @fires hc-nested-list-behavior#item-open-changed
       * @param {TapEvent} event
       */
      fireOpenEvent(event) {
        // Prevent this from changing selected state in iron-list.
        event.stopPropagation();

        // Trigger an event to toggle open state instead.
        this.fire('item-open-changed', {
          item: this.item,
          open: !this.item.open
        });
      }
    });
  </script>
</dom-module>