Add input_select to the frontend

src/state-summary/state-card-content.html

@@ -2,6 +2,7 @@
 
 <link rel="import" href="state-card-configurator.html">
 <link rel="import" href="state-card-display.html">
+<link rel="import" href="state-card-input_select.html">
 <link rel="import" href="state-card-media_player.html">
 <link rel="import" href="state-card-rollershutter.html">
 <link rel="import" href="state-card-scene.html">

src/state-summary/state-card-content.js

@@ -4,6 +4,7 @@ import stateCardType from '../util/state-card-type';
 
 require('./state-card-configurator');
 require('./state-card-display');
+require('./state-card-input_select');
 require('./state-card-media_player');
 require('./state-card-scene');
 require('./state-card-rollershutter');

src/state-summary/state-card-input_select.html

@@ -0,0 +1,25 @@
+<link rel="import" href="../../bower_components/polymer/polymer.html">
+<link rel="import" href="../../bower_components/paper-dropdown-menu/paper-dropdown-menu.html">
+
+<link rel="import" href="../components/state-info.html">
+
+<dom-module id="state-card-input_select">
+  <style>
+  paper-dropdown-menu {
+    margin-left: 16px;
+  }
+  </style>
+
+  <template>
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]"></state-info>
+      <paper-dropdown-menu no-label-float selected-item-label='{{selectedOption}}' on-tap='stopPropagation'>
+        <paper-menu class="dropdown-content" selected="[[computeSelected(stateObj)]]">
+          <template is='dom-repeat' items='[[stateObj.attributes.options]]'>
+            <paper-item>[[item]]</paper-item>
+          </template>
+        </paper-menu>
+      </paper-dropdown-menu>
+    </div>
+  </template>
+</dom-module>

src/state-summary/state-card-input_select.js

@@ -0,0 +1,40 @@
+import hass from '../util/home-assistant-js-instance';
+import Polymer from '../polymer';
+
+require('../components/state-info');
+
+const { serviceActions } = hass;
+
+export default new Polymer({
+  is: 'state-card-input_select',
+
+  properties: {
+    stateObj: {
+      type: Object,
+    },
+
+    selectedOption: {
+      type: String,
+      observer: 'selectedOptionChanged',
+    },
+  },
+
+  computeSelected(stateObj) {
+    return stateObj.attributes.options.indexOf(stateObj.state);
+  },
+
+  selectedOptionChanged(option) {
+    // Selected Option will transition to '' before transitioning to new value
+    if (option === '' || option === this.stateObj.state) {
+      return;
+    }
+    serviceActions.callService('input_select', 'select_option', {
+      option,
+      entity_id: this.stateObj.entityId,
+    });
+  },
+
+  stopPropagation(ev) {
+    ev.stopPropagation();
+  },
+});

src/util/state-card-type.js

@@ -2,6 +2,7 @@ import canToggle from './can-toggle';
 
 const DOMAINS_WITH_CARD = [
   'configurator',
+  'input_select',
   'media_player',
   'rollershutter',
   'scene',