frontend/panels/dev-state/entity-list.html

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

<dom-module id="entity-list">
  <style>
    ul {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
      line-height: 2em;
    }

    a {
      color: var(--dark-primary-color);
    }
  </style>

  <template>
    <ul>
      <template is='dom-repeat' items='[[entities]]' as='entity'>
        <li><a href='#' on-click='entitySelected'>[[entity.entityId]]</a></li>
      </template>
    </ul>
  </template>
</dom-module>

<script>
Polymer({
  is: 'entity-list',

  behaviors: [window.hassBehavior],

  properties: {
    hass: {
      type: Object,
    },

    entities: {
      type: Array,
      bindNuclear: function (hass) {
        return [
          hass.entityGetters.entityMap,
          function (map) {
            return map.valueSeq().sortBy(function (entity) { return entity.entityId; }).toArray();
          },
        ];
      },
    },
  },

  entitySelected: function (ev) {
    ev.preventDefault();
    this.fire('entity-selected', { entityId: ev.model.entity.entityId });
  },
});
</script>