From 19187ce518190823a8ccc5e7fc3d262cd218fa74 Mon Sep 17 00:00:00 2001
From: BioSehnsucht <biosehnsucht@gmail.com>
Date: Sat, 9 Sep 2017 01:06:40 -0500
Subject: [PATCH] Add input_text component (#408)

* Add input_text component

* Update input_text to Polymer 2

* input_text : changes suggested in home-assistant/home-assistant-polymer#408

* input_text : removing disabled option per home-assistant/home-assistant-polymer#408

* Fix file permissions

* UI tweaks + cleanup
---
 src/cards/ha-entities-card.html              |  3 +-
 src/state-summary/state-card-content.html    |  1 +
 src/state-summary/state-card-display.html    |  0
 src/state-summary/state-card-input_text.html | 88 ++++++++++++++++++++
 src/state-summary/state-card-toggle.html     |  0
 src/util/hass-util.html                      |  6 +-
 6 files changed, 95 insertions(+), 3 deletions(-)
 mode change 100755 => 100644 src/state-summary/state-card-display.html
 create mode 100644 src/state-summary/state-card-input_text.html
 mode change 100755 => 100644 src/state-summary/state-card-toggle.html
 mode change 100644 => 100755 src/util/hass-util.html

diff --git a/src/cards/ha-entities-card.html b/src/cards/ha-entities-card.html
index 8d1355fb0d..446141e35a 100644
--- a/src/cards/ha-entities-card.html
+++ b/src/cards/ha-entities-card.html
@@ -99,8 +99,7 @@ Polymer({
 
   entityTapped: function (ev) {
     var entityId;
-    if (ev.target.classList.contains('paper-toggle-button') ||
-        ev.target.classList.contains('paper-icon-button') ||
+    if (ev.target.nodeName === 'STATE-CARD-INPUT_TEXT' ||
         (!ev.model && !this.groupEntity)) {
       return;
     }
diff --git a/src/state-summary/state-card-content.html b/src/state-summary/state-card-content.html
index 546e6e822b..5f6fce3a2b 100644
--- a/src/state-summary/state-card-content.html
+++ b/src/state-summary/state-card-content.html
@@ -6,6 +6,7 @@
 <link rel="import" href="state-card-display.html">
 <link rel="import" href="state-card-input_select.html">
 <link rel="import" href="state-card-input_slider.html">
+<link rel="import" href="state-card-input_text.html">
 <link rel="import" href="state-card-media_player.html">
 <link rel="import" href="state-card-scene.html">
 <link rel="import" href="state-card-script.html">
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
old mode 100755
new mode 100644
diff --git a/src/state-summary/state-card-input_text.html b/src/state-summary/state-card-input_text.html
new file mode 100644
index 0000000000..a932ae2f1b
--- /dev/null
+++ b/src/state-summary/state-card-input_text.html
@@ -0,0 +1,88 @@
+<link rel="import" href="../../bower_components/polymer/polymer-element.html">
+
+<link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
+
+<link rel="import" href="../../bower_components/paper-input/paper-input.html">
+
+<link rel="import" href="../components/entity/state-info.html">
+
+<link rel="import" href="../util/hass-util.html">
+
+<dom-module id="state-card-input_text">
+  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+    <style>
+      paper-input {
+        margin-left: 16px;
+      }
+    </style>
+
+    <div class='horizontal justified layout'>
+      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
+      <paper-input
+        no-label-float
+        minlength='[[stateObj.attributes.min]]'
+        maxlength='[[stateObj.attributes.max]]'
+        value='{{value}}'
+        auto-validate='[[stateObj.attributes.pattern]]'
+        pattern='[[stateObj.attributes.pattern]]'
+        on-change='selectedValueChanged'
+        on-tap='stopPropagation'
+        placeholder='(empty value)'
+      >
+      </paper-input>
+    </div>
+  </template>
+</dom-module>
+
+<script>
+class StateCardInputText extends Polymer.Element {
+
+  static get is() { return 'state-card-input_text'; }
+
+  static get properties() {
+    return {
+      hass: Object,
+
+      inDialog: {
+        type: Boolean,
+        value: false,
+      },
+
+      stateObj: {
+        type: Object,
+        observer: 'stateObjectChanged',
+      },
+
+      pattern: {
+        type: String,
+      },
+
+      value: {
+        type: String,
+      }
+
+    };
+  }
+
+  stateObjectChanged(newVal) {
+    this.value = newVal.state;
+  }
+
+  selectedValueChanged() {
+    if (this.value === this.stateObj.state) {
+      return;
+    }
+    this.hass.callService('input_text', 'set_value', {
+      value: this.value,
+      entity_id: this.stateObj.entity_id,
+    });
+  }
+
+  stopPropagation(ev) {
+    ev.stopPropagation();
+  }
+}
+
+customElements.define(StateCardInputText.is, StateCardInputText);
+</script>
diff --git a/src/state-summary/state-card-toggle.html b/src/state-summary/state-card-toggle.html
old mode 100755
new mode 100644
diff --git a/src/util/hass-util.html b/src/util/hass-util.html
old mode 100644
new mode 100755
index 93a1a1570b..5022b9cf0c
--- a/src/util/hass-util.html
+++ b/src/util/hass-util.html
@@ -16,6 +16,7 @@ window.hassUtil.DOMAINS_WITH_CARD = [
   'configurator',
   'input_select',
   'input_slider',
+  'input_text',
   'media_player',
   'scene',
   'script',
@@ -31,7 +32,7 @@ window.hassUtil.DOMAINS_WITH_MORE_INFO = [
 window.hassUtil.DOMAINS_WITH_NO_HISTORY = ['camera', 'configurator', 'scene'];
 
 window.hassUtil.HIDE_MORE_INFO = [
-  'input_select', 'scene', 'script', 'input_slider',
+  'input_select', 'scene', 'script', 'input_slider', 'input_text'
 ];
 
 window.hassUtil.LANGUAGE = navigator.languages ?
@@ -289,6 +290,9 @@ window.hassUtil.domainIcon = function (domain, state) {
     case 'input_slider':
       return 'mdi:ray-vertex';
 
+    case 'input_text':
+      return 'mdi:textbox';
+
     case 'light':
       return 'mdi:lightbulb';