Customize config improvements (#417)

* Switch customize panel to dom-if

* Customize config improvements

panels/config/customize/ha-customize-attribute.html

@@ -1,7 +1,9 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
 <link rel='import' href="../../../bower_components/paper-icon-button/paper-icon-button.html">
+
+<link rel="import" href="../../../src/util/hass-attributes-util.html">
+
 <link rel="import" href="../ha-form-style.html">
-<script src="../../../src/util/hass-attributes-util.js"></script>
 <link rel="import" href="./types/ha-customize-array.html">
 <link rel="import" href="./types/ha-customize-boolean.html">
 <link rel="import" href="./types/ha-customize-icon.html">

panels/config/customize/ha-form-customize-attributes.html

@@ -1,4 +1,5 @@
 <link rel="import" href="../../../bower_components/polymer/polymer-element.html">
+<link rel="import" href="../../../bower_components/polymer/lib/mixins/mutable-data.html">
 
 <link rel="import" href="./ha-customize-attribute.html">
 
@@ -9,7 +10,7 @@
         display: none;
       }
     </style>
-    <template is='dom-repeat' items='{{attributes}}'>
+    <template is='dom-repeat' items='{{attributes}}' mutable-data>
       <ha-customize-attribute
         item="{{item}}"
         hidden$="[[item.closed]]">
@@ -19,7 +20,7 @@
 </dom-module>
 
 <script>
-class HaFormCustomizeAttributes extends Polymer.Element {
+class HaFormCustomizeAttributes extends Polymer.MutableData(Polymer.Element) {
 
   static get is() { return 'ha-form-customize-attributes'; }
 

panels/config/customize/ha-form-customize.html

@@ -4,17 +4,13 @@
 <link rel='import' href='../../../bower_components/paper-item/paper-item.html'>
 
 <link rel="import" href="../../../src/util/hass-util.html">
-<script src="../../../src/util/hass-attributes-util.js"></script>
+<link rel="import" href="../../../src/util/hass-attributes-util.html">
 
 <link rel="import" href="./ha-form-customize-attributes.html">
 
 <dom-module id="ha-form-customize">
   <template>
     <style include="iron-flex ha-style ha-form-style">
-      [hidden] {
-        display: none;
-      }
-
       .warning {
         color: red;
       }
@@ -29,36 +25,32 @@
         Changes made here won't affect your configuration.
       </div>
     </template>
-    <!-- <dom-if> would be more appropriate here, but due to
-         https://github.com/Polymer/polymer/issues/4818 array observations don't
-         propagate properly via <dom-if>.
-    -->
-    <div hidden$='[[!hasLocalAttributes]]'>
+    <template is='dom-if' if='[[hasLocalAttributes]]'>
       <h4 class="attributes-text">
         The following attributes are already set in customize.yaml<br>
       </h4>
       <ha-form-customize-attributes attributes="{{localAttributes}}"></ha-form-customize-attributes>
-    </div>
-    <div hidden$='[[!hasGlobalAttributes]]'>
+    </template>
+    <template is='dom-if' if='[[hasGlobalAttributes]]'>
       <h4 class="attributes-text">
         The following attributes are customized from outside of customize.yaml<br>
         Possibly via a domain, a glob or a different include.
       </h4>
       <ha-form-customize-attributes attributes="{{globalAttributes}}"></ha-form-customize-attributes>
-    </div>
-    <div hidden$='[[!hasExistingAttributes]]'>
+    </template>
+    <template is='dom-if' if='[[hasExistingAttributes]]'>
       <h4 class="attributes-text">
         The following attributes of the entity are set programatically.<br>
         You can override them if you like.
       </h4>
       <ha-form-customize-attributes attributes="{{existingAttributes}}"></ha-form-customize-attributes>
-    </div>
-    <div hidden$='[[!hasNewAttributes]]'>
+    </template>
+    <template is='dom-if' if='[[hasNewAttributes]]'>
       <h4 class="attributes-text">
         The following attributes weren't set. Set them if you like.
       </h4>
       <ha-form-customize-attributes attributes="{{newAttributes}}"></ha-form-customize-attributes>
-    </div>
+    </template>
     <div class='form-group'>
       <paper-dropdown-menu
         label='Pick an attribute to override'

src/components/ha-attributes.html

@@ -1,7 +1,8 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <link rel="import" href="../../bower_components/iron-flex-layout/iron-flex-layout-classes.html">
-<script src="../util/hass-attributes-util.js"></script>
+
+<link rel="import" href="../util/hass-attributes-util.html">
 
 <dom-module id="ha-attributes">
   <template>

src/util/hass-attributes-util.html

@@ -1,3 +1,4 @@
+<script>
 window.hassAttributeUtil = window.hassAttributeUtil || {};
 
 window.hassAttributeUtil.DOMAIN_DEVICE_CLASS = {
@@ -29,8 +30,12 @@ window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES =
     entity_picture: undefined,
     friendly_name: { type: 'string', description: 'Name' },
     icon: { type: 'icon' },
-    emulated_hue: { type: 'boolean' },
-    emulated_hue_name: { type: 'string' },
+    emulated_hue: {
+      type: 'boolean',
+      domains: ['emulated_hue'] },
+    emulated_hue_name: {
+      type: 'string',
+      domains: ['emulated_hue'] },
     haaska_hidden: undefined,
     haaska_name: undefined,
     homebridge_hidden: { type: 'boolean' },
@@ -44,7 +49,12 @@ window.hassAttributeUtil.LOGIC_STATE_ATTRIBUTES =
       description: 'Device class',
       domains: ['binary_sensor', 'cover'] },
     hidden: { type: 'boolean', description: 'Hide from UI' },
-    assumed_state: { type: 'boolean' },
-    initial_state: { type: 'string' },
+    assumed_state: {
+      type: 'boolean',
+      domains: ['switch', 'light', 'cover', 'climate', 'fan', 'group'] },
+    initial_state: {
+      type: 'string',
+      domains: ['automation'] },
     unit_of_measurement: { type: 'string' },
   };
+  </script>