Convert hui-picture-elements-card to TypeScript/LitElement (#1853)

* Convert hui-picture-elements-card to TypeScript/LitElement

Elements are not showing currently

* Address review comments

* Update demo

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

@@ -1,8 +1,32 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag.js";
 import { PolymerElement } from "@polymer/polymer/polymer-element.js";
 
+import getEntity from "../data/entity.js";
+import provideHass from "../data/provide_hass.js";
 import "../components/demo-cards.js";
 
+const ENTITIES = [
+  getEntity("light", "bed_light", "on", {
+    friendly_name: "Bed Light",
+  }),
+  getEntity("group", "all_lights", "on", {
+    entity_id: ["light.bed_light"],
+    order: 8,
+    friendly_name: "All Lights",
+  }),
+  getEntity("camera", "demo_camera", "idle", {
+    access_token:
+      "2f5bb163fb91cd8770a9494fa5e7eab172d8d34f4aba806eb6b59411b8c720b8",
+    friendly_name: "Demo camera",
+    entity_picture:
+      "/api/camera_proxy/camera.demo_camera?token=2f5bb163fb91cd8770a9494fa5e7eab172d8d34f4aba806eb6b59411b8c720b8",
+  }),
+  getEntity("binary_sensor", "movement_backyard", "on", {
+    friendly_name: "Movement Backyard",
+    device_class: "motion",
+  }),
+];
+
 const CONFIGS = [
   {
     heading: "Card with few elements",
@@ -56,7 +80,10 @@ const CONFIGS = [
 class DemoPicElements extends PolymerElement {
   static get template() {
     return html`
-      <demo-cards configs="[[_configs]]"></demo-cards>
+      <demo-cards
+        id='demos'
+        configs="[[_configs]]"
+      ></demo-cards>
     `;
   }
 
@@ -68,6 +95,12 @@ class DemoPicElements extends PolymerElement {
       },
     };
   }
+
+  ready() {
+    super.ready();
+    const hass = provideHass(this.$.demos);
+    hass.addEntities(ENTITIES);
+  }
 }
 
 customElements.define("demo-hui-picture-elements-card", DemoPicElements);