Merge 20181121.0 to master

.gitignore

@@ -22,7 +22,8 @@ bin
 dist
 
 # vscode
-.vscode
+.vscode/*
+!.vscode/extensions.json
 
 # Secrets
 .lokalise_token

.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+    "recommendations": [
+        "dbaeumer.vscode-eslint",
+        "eg2.tslint",
+        "esbenp.prettier-vscode"
+    ]
+}

gallery/src/components/demo-card.js

@@ -38,9 +38,9 @@ class DemoCard extends PolymerElement {
         }
       </style>
       <h2>[[config.heading]]</h2>
-      <div class='root'>
+      <div class="root">
         <div id="card"></div>
-        <template is='dom-if' if='[[showConfig]]'>
+        <template is="dom-if" if="[[showConfig]]">
           <pre>[[_trim(config.config)]]</pre>
         </template>
       </div>

gallery/src/components/demo-cards.js

@@ -25,18 +25,18 @@ class DemoCards extends PolymerElement {
         }
       </style>
       <app-toolbar>
-        <div class='filters'>
-          <paper-toggle-button
-            checked='{{_showConfig}}'
-          >Show config</paper-toggle-button>
+        <div class="filters">
+          <paper-toggle-button checked="{{_showConfig}}"
+            >Show config</paper-toggle-button
+          >
         </div>
       </app-toolbar>
-      <div class='cards'>
-        <template is='dom-repeat' items='[[configs]]'>
+      <div class="cards">
+        <template is="dom-repeat" items="[[configs]]">
           <demo-card
-            config='[[item]]'
-            show-config='[[_showConfig]]'
-            hass='[[hass]]'
+            config="[[item]]"
+            show-config="[[_showConfig]]"
+            hass="[[hass]]"
           ></demo-card>
         </template>
       </div>

gallery/src/components/demo-more-info.js

@@ -8,56 +8,56 @@ import "../../../src/components/ha-card";
 class DemoMoreInfo extends PolymerElement {
   static get template() {
     return html`
-        <style>
-          :host {
-            display: flex;
-            align-items: start;
-          }
+      <style>
+        :host {
+          display: flex;
+          align-items: start;
+        }
 
-          ha-card {
-            width: 333px;
-          }
+        ha-card {
+          width: 333px;
+        }
 
-          state-card-content {
-            display: block;
-            padding: 16px;
-          }
+        state-card-content {
+          display: block;
+          padding: 16px;
+        }
 
-          more-info-content {
-            padding: 0 16px;
-          }
+        more-info-content {
+          padding: 0 16px;
+        }
 
-          pre {
-            width: 400px;
-            margin: 16px;
-            overflow: auto;
-          }
+        pre {
+          width: 400px;
+          margin: 16px;
+          overflow: auto;
+        }
 
-          @media only screen and (max-width: 800px) {
-            :host {
-              flex-direction: column;
-            }
-            pre {
-              margin-left: 0;
-            }
+        @media only screen and (max-width: 800px) {
+          :host {
+            flex-direction: column;
+          }
+          pre {
+            margin-left: 0;
           }
-        </style>
-        <ha-card>
-          <state-card-content
-            state-obj="[[_stateObj]]"
-            hass="[[hass]]"
-            in-dialog
-          ></state-card-content>
+        }
+      </style>
+      <ha-card>
+        <state-card-content
+          state-obj="[[_stateObj]]"
+          hass="[[hass]]"
+          in-dialog
+        ></state-card-content>
 
-          <more-info-content
-            hass='[[hass]]'
-            state-obj='[[_stateObj]]'
-          ></more-info-content>
-        </ha-card>
-        <template is='dom-if' if='[[showConfig]]'>
-          <pre>[[_jsonEntity(_stateObj)]]</pre>
-        </template>
-      `;
+        <more-info-content
+          hass="[[hass]]"
+          state-obj="[[_stateObj]]"
+        ></more-info-content>
+      </ha-card>
+      <template is="dom-if" if="[[showConfig]]">
+        <pre>[[_jsonEntity(_stateObj)]]</pre>
+      </template>
+    `;
   }
 
   static get properties() {

gallery/src/components/demo-more-infos.js

@@ -25,18 +25,18 @@ class DemoMoreInfos extends PolymerElement {
         }
       </style>
       <app-toolbar>
-        <div class='filters'>
-          <paper-toggle-button
-            checked='{{_showConfig}}'
-          >Show entity</paper-toggle-button>
+        <div class="filters">
+          <paper-toggle-button checked="{{_showConfig}}"
+            >Show entity</paper-toggle-button
+          >
         </div>
       </app-toolbar>
-      <div class='cards'>
-        <template is='dom-repeat' items='[[entities]]'>
+      <div class="cards">
+        <template is="dom-repeat" items="[[entities]]">
           <demo-more-info
-            entity-id='[[item]]'
-            show-config='[[_showConfig]]'
-            hass='[[hass]]'
+            entity-id="[[item]]"
+            show-config="[[_showConfig]]"
+            hass="[[hass]]"
           ></demo-more-info>
         </template>
       </div>

gallery/src/data/provide_hass.js

@@ -29,6 +29,12 @@ export default (elements, { initialStates = {} } = {}) => {
     resources: demoResources,
     states: initialStates,
     themes: {},
+    connection: {
+      subscribeEvents: async (callback, event) => {
+        console.log("subscribeEvents", event);
+        return () => console.log("unsubscribeEvents", event);
+      },
+    },
 
     // Mock properties
     mockEntities: entities,

gallery/src/demos/demo-hui-alarm-panel-card.js

@@ -51,7 +51,11 @@ const CONFIGS = [
 class DemoAlarmPanelEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards id='demos' hass='[[hass]]' configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
     `;
   }
 

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

@@ -57,8 +57,8 @@ class DemoConditional extends PolymerElement {
   static get template() {
     return html`
       <demo-cards
-        id='demos'
-        hass='[[hass]]'
+        id="demos"
+        hass="[[hass]]"
         configs="[[_configs]]"
       ></demo-cards>
     `;

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

@@ -175,10 +175,7 @@ const CONFIGS = [
 class DemoEntities extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-entity-button-card.js

@@ -71,7 +71,11 @@ const CONFIGS = [
 class DemoEntityButtonEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards id='demos' hass='[[hass]]' configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id="demos"
+        hass="[[hass]]"
+        configs="[[_configs]]"
+      ></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-entity-filter-card.js

@@ -92,10 +92,7 @@ const CONFIGS = [
 class DemoFilter extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 

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

@@ -217,10 +217,7 @@ const CONFIGS = [
 class DemoPicEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 

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

@@ -25,7 +25,7 @@ const CONFIGS = [
 class DemoLightEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards id='demos' configs="[[_configs]]"></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-media-player-rows.js

@@ -78,8 +78,8 @@ class DemoHuiMediaPlayerRows extends PolymerElement {
   static get template() {
     return html`
       <demo-cards
-        id='demos'
-        hass='[[hass]]'
+        id="demos"
+        hass="[[hass]]"
         configs="[[_configs]]"
       ></demo-cards>
     `;

gallery/src/demos/demo-hui-picture-elements-card.js

@@ -80,10 +80,7 @@ const CONFIGS = [
 class DemoPicElements extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 

gallery/src/demos/demo-hui-shopping-list-card.js

@@ -0,0 +1,52 @@
+import { html } from "@polymer/polymer/lib/utils/html-tag";
+import { PolymerElement } from "@polymer/polymer/polymer-element";
+
+import provideHass from "../data/provide_hass";
+import "../components/demo-cards";
+
+const CONFIGS = [
+  {
+    heading: "List example",
+    config: `
+- type: shopping-list
+    `,
+  },
+  {
+    heading: "List with title example",
+    config: `
+- type: shopping-list
+  title: Shopping List
+    `,
+  },
+];
+
+class DemoShoppingListEntity extends PolymerElement {
+  static get template() {
+    return html`
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
+    `;
+  }
+
+  static get properties() {
+    return {
+      _configs: {
+        type: Object,
+        value: CONFIGS,
+      },
+    };
+  }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+
+    hass.mockAPI("shopping_list", () => [
+      { name: "list", id: 1, complete: false },
+      { name: "all", id: 2, complete: false },
+      { name: "the", id: 3, complete: false },
+      { name: "things", id: 4, complete: true },
+    ]);
+  }
+}
+
+customElements.define("demo-hui-shopping-list-card", DemoShoppingListEntity);

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

@@ -91,10 +91,7 @@ const CONFIGS = [
 class DemoStack extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 

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

@@ -62,10 +62,7 @@ const CONFIGS = [
 class DemoThermostatEntity extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards
-        id='demos'
-        configs="[[_configs]]"
-      ></demo-cards>
+      <demo-cards id="demos" configs="[[_configs]]"></demo-cards>
     `;
   }
 

gallery/src/demos/demo-more-info-light.js

@@ -34,8 +34,8 @@ class DemoMoreInfoLight extends PolymerElement {
   static get template() {
     return html`
       <demo-more-infos
-        hass='[[hass]]'
-        entities='[[_entities]]'
+        hass="[[hass]]"
+        entities="[[_entities]]"
       ></demo-more-infos>
     `;
   }

gulp/tasks/gen-icons.js

@@ -111,4 +111,5 @@ gulp.task("gen-icons", ["gen-icons-hass", "gen-icons-mdi"], () => {});
 module.exports = {
   findIcons,
   generateIconset,
+  genMDIIcons,
 };