Add row divider for entities card (#1503)

* Add row divider for entities card

* Add gallery demo

* Change hr to div, less attributes needed

gallery/src/demos/demo-hui-entities-card.js

@@ -121,6 +121,11 @@ const CONFIGS = [
       url: http://google.com/
       icon: mdi:google
       name: Google
+    - type: divider
+    - type: divider
+      style:
+        height: 16px
+        background: center / contain url("https://d33wubrfki0l68.cloudfront.net/075995fe17a5351e2699b2dd878652ec4f1d8654/8bfdd/demo/favicon-192x192.png")
     `
   },
 ];

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

@@ -11,12 +11,14 @@ import '../entity-rows/hui-text-entity-row.js';
 import '../entity-rows/hui-timer-entity-row.js';
 import '../entity-rows/hui-toggle-entity-row.js';
 
+import '../special-rows/hui-divider-row.js';
 import '../special-rows/hui-weblink-row.js';
 
 import createErrorCardConfig from './create-error-card-config.js';
 
 const CUSTOM_TYPE_PREFIX = 'custom:';
 const SPECIAL_TYPES = new Set([
+  'divider',
   'weblink'
 ]);
 const DOMAIN_TO_ELEMENT_TYPE = {

src/panels/lovelace/special-rows/hui-divider-row.js

@@ -0,0 +1,43 @@
+import { html } from '@polymer/polymer/lib/utils/html-tag.js';
+import { PolymerElement } from '@polymer/polymer/polymer-element.js';
+
+class HuiDividerRow extends PolymerElement {
+  static get template() {
+    return html``;
+  }
+
+  setConfig(config) {
+    if (!config) {
+      throw new Error('Error in card configuration.');
+    }
+    this._config = config;
+    this._createDivider();
+  }
+
+  ready() {
+    super.ready();
+    this._createDivider();
+  }
+
+  _createDivider() {
+    const root = this.shadowRoot;
+    if (root === null) return;
+
+    while (root.lastChild) {
+      root.removeChild(root.lastChild);
+    }
+
+    const style = this._config.style || {
+      height: '1px',
+      'background-color': 'var(--secondary-text-color)'
+    };
+
+    const el = document.createElement('div');
+    Object.keys(style).forEach((prop) => {
+      el.style.setProperty(prop, style[prop]);
+    });
+
+    root.appendChild(el);
+  }
+}
+customElements.define('hui-divider-row', HuiDividerRow);