Fix toggle-able for group row elements (#1507)

src/panels/lovelace/common/create-row-element.js

@@ -1,6 +1,7 @@
 import fireEvent from '../../../common/dom/fire_event.js';
 
 import '../entity-rows/hui-cover-entity-row.js';
+import '../entity-rows/hui-group-entity-row.js';
 import '../entity-rows/hui-input-number-entity-row.js';
 import '../entity-rows/hui-input-select-entity-row.js';
 import '../entity-rows/hui-input-text-entity-row.js';
@@ -25,7 +26,7 @@ const DOMAIN_TO_ELEMENT_TYPE = {
   automation: 'toggle',
   cover: 'cover',
   fan: 'toggle',
-  group: 'toggle',
+  group: 'group',
   input_boolean: 'toggle',
   input_number: 'input-number',
   input_select: 'input-select',

src/panels/lovelace/entity-rows/hui-group-entity-row.js

@@ -0,0 +1,76 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+import '../components/hui-generic-entity-row.js';
+import '../../../components/entity/ha-entity-toggle.js';
+
+import computeStateDisplay from '../../../common/entity/compute_state_display.js';
+import LocalizeMixin from '../../../mixins/localize-mixin.js';
+
+const DOMAINS_TOGGLE = new Set([
+  'fan',
+  'input_boolean',
+  'light',
+  'switch'
+]);
+
+/*
+ * @appliesMixin LocalizeMixin
+ */
+class HuiGroupEntityRow extends LocalizeMixin(PolymerElement) {
+  static get template() {
+    return html`
+      <hui-generic-entity-row
+        hass="[[hass]]"
+        config="[[_config]]"
+      >
+        <template is="dom-if" if="[[_canToggle]]">
+          <ha-entity-toggle
+            hass="[[hass]]"
+            state-obj="[[_stateObj]]"
+          ></ha-entity-toggle>
+        </template>
+        <template is="dom-if" if="[[!_canToggle]]">
+          <div>
+            [[_computeState(_stateObj)]]
+          </div>
+        </template>
+      </hui-generic-entity-row>
+    `;
+  }
+
+  static get properties() {
+    return {
+      hass: Object,
+      _config: Object,
+      _stateObj: {
+        type: Object,
+        computed: '_computeStateObj(hass.states, _config.entity)'
+      },
+      _canToggle: {
+        type: Boolean,
+        computed: '_computeCanToggle(_stateObj.attributes.entity_id)'
+      }
+    };
+  }
+
+  setConfig(config) {
+    if (!config || !config.entity) {
+      throw new Error('Entity not configured.');
+    }
+    this._config = config;
+  }
+
+  _computeStateObj(states, entityId) {
+    return states && entityId in states ? states[entityId] : null;
+  }
+
+  _computeCanToggle(entityIds) {
+    return entityIds.some(entityId => DOMAINS_TOGGLE.has(entityId.split('.', 1)[0]));
+  }
+
+  _computeState(stateObj) {
+    return computeStateDisplay(this.localize, stateObj);
+  }
+}
+customElements.define('hui-group-entity-row', HuiGroupEntityRow);