ha-frontend-cdce8p/src/components/entity/ha-entity-picker.html

<link rel="import" href="../../../bower_components/polymer/polymer-element.html">
<link rel="import" href="../../../bower_components/vaadin-combo-box/vaadin-combo-box-light.html">
<link rel="import" href="../../../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="../../../bower_components/paper-item/paper-item-body.html">

<link rel="import" href="./state-badge.html">

<dom-module id="ha-entity-picker">
  <template>
    <style>
      paper-input > paper-icon-button {
        width: 24px;
        height: 24px;
        padding: 2px;
        color: var(--secondary-text-color);
      }
      [hidden] {
        display: none;
      }
    </style>
    <vaadin-combo-box-light
      items='[[_states]]'
      item-value-path='entity_id'
      item-label-path='entity_id'
      value='{{value}}'
      opened='{{opened}}'
      allow-custom-value='[[allowCustomEntity]]'
    >
      <paper-input
        autofocus="[[autofocus]]"
        label="[[label]]"
        class="input"
        value='[[value]]'
        disabled='[[disabled]]'
      >
        <paper-icon-button
          slot="suffix"
          class="clear-button"
          icon="mdi:close"
          no-ripple
          hidden$='[[!value]]'
        >Clear</paper-icon-button>
        <paper-icon-button
          slot="suffix"
          class="toggle-button"
          icon='[[_computeToggleIcon(opened)]]'
          hidden='[[!_states.length]]'
        >Toggle</paper-icon-button>
      </paper-input>
      <template>
        <style>
          paper-icon-item {
            margin: -10px;
          }
        </style>
        <paper-icon-item>
          <state-badge state-obj="[[item]]" slot='item-icon'></state-badge>
          <paper-item-body two-line>
            <div>[[computeStateName(item)]]</div>
            <div secondary>[[item.entity_id]]</div>
          </paper-item-body>
        </paper-icon-item>
      </template>
    </vaadin-combo-box-light>
  </template>
</dom-module>

<script>
class HaEntityPicker extends Polymer.Element {
  static get is() { return 'ha-entity-picker'; }

  static get properties() {
    return {
      allowCustomEntity: {
        type: Boolean,
        value: false,
      },
      hass: {
        type: Object,
        observer: '_hassChanged',
      },
      _hass: Object,
      _states: {
        type: Array,
        computed: '_computeStates(_hass, domainFilter, entityFilter)',
      },
      autofocus: Boolean,
      label: {
        type: String,
        value: 'Entity',
      },
      value: {
        type: String,
        notify: true,
      },
      opened: {
        type: Boolean,
        value: false,
        observer: '_openedChanged',
      },
      domainFilter: {
        type: String,
        value: null,
      },
      entityFilter: {
        type: Function,
        value: null,
      },
      disabled: Boolean,
    };
  }

  _computeStates(hass, domainFilter, entityFilter) {
    if (!hass) return [];

    let entityIds = Object.keys(hass.states);

    if (domainFilter) {
      entityIds = entityIds.filter(eid => eid.substr(0, eid.indexOf('.')) === domainFilter);
    }

    let entities = entityIds.sort().map(key => hass.states[key]);

    if (entityFilter) {
      entities = entities.filter(entityFilter);
    }

    return entities;
  }

  computeStateName(state) {
    return window.hassUtil.computeStateName(state);
  }

  _openedChanged(newVal) {
    if (!newVal) {
      this._hass = this.hass;
    }
  }

  _hassChanged(newVal) {
    if (!this.opened) {
      this._hass = newVal;
    }
  }

  _computeToggleIcon(opened) {
    return opened ? 'mdi:menu-up' : 'mdi:menu-down';
  }
}

customElements.define(HaEntityPicker.is, HaEntityPicker);
</script>