20191002.0

cast/src/receiver/layout/hc-lovelace.ts

@@ -8,7 +8,8 @@ import {
   property,
 } from "lit-element";
 import { LovelaceConfig } from "../../../../src/data/lovelace";
-import "../../../../src/panels/lovelace/hui-view";
+import "../../../../src/panels/lovelace/views/hui-view";
+import "../../../../src/panels/lovelace/views/hui-panel-view";
 import { HomeAssistant } from "../../../../src/types";
 import { Lovelace } from "../../../../src/panels/lovelace/types";
 import "./hc-launch-screen";
@@ -40,14 +41,21 @@ class HcLovelace extends LitElement {
       saveConfig: async () => undefined,
       setEditMode: () => undefined,
     };
-    return html`
-      <hui-view
-        .hass=${this.hass}
-        .lovelace=${lovelace}
-        .index=${index}
-        columns="2"
-      ></hui-view>
-    `;
+    return this.lovelaceConfig.views[index].panel
+      ? html`
+          <hui-panel-view
+            .hass=${this.hass}
+            .config=${this.lovelaceConfig.views[index]}
+          ></hui-panel-view>
+        `
+      : html`
+          <hui-view
+            .hass=${this.hass}
+            .lovelace=${lovelace}
+            .index=${index}
+            columns="2"
+          ></hui-view>
+        `;
   }
 
   protected updated(changedProps) {
@@ -62,7 +70,9 @@ class HcLovelace extends LitElement {
           this.lovelaceConfig.background;
 
         if (configBackground) {
-          this.shadowRoot!.querySelector("hui-view")!.style.setProperty(
+          (this.shadowRoot!.querySelector(
+            "hui-view, hui-panel-view"
+          ) as HTMLElement)!.style.setProperty(
             "--lovelace-background",
             configBackground
           );
@@ -94,7 +104,7 @@ class HcLovelace extends LitElement {
         box-sizing: border-box;
         background: var(--primary-background-color);
       }
-      hui-view {
+      :host > * {
         flex: 1;
       }
     `;

demo/src/stubs/translations.ts

@@ -97,7 +97,7 @@ export const mockTranslations = (hass: MockHomeAssistant) => {
       "component.nest.config.abort.authorize_url_timeout":
         "Timeout generating authorize url.",
       "component.nest.config.abort.no_flows":
-        "You need to configure Nest before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/components/nest/).",
+        "You need to configure Nest before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/integrations/nest/).",
       "component.nest.config.error.internal_error":
         "Internal error validating code",
       "component.nest.config.error.invalid_code": "Invalid code",
@@ -199,7 +199,7 @@ export const mockTranslations = (hass: MockHomeAssistant) => {
       "component.point.config.abort.external_setup":
         "Point successfully configured from another flow.",
       "component.point.config.abort.no_flows":
-        "You need to configure Point before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/components/point/).",
+        "You need to configure Point before being able to authenticate with it. [Please read the instructions](https://www.home-assistant.io/integrations/point/).",
       "component.point.config.create_entry.default":
         "Successfully authenticated with Minut for your Point device(s)",
       "component.point.config.error.follow_link":

gallery/src/components/demo-cards.js

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "./demo-card";
+import "../../../src/components/ha-switch";
 
 class DemoCards extends PolymerElement {
   static get template() {
@@ -26,9 +26,7 @@ class DemoCards extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <paper-toggle-button checked="{{_showConfig}}"
-            >Show config</paper-toggle-button
-          >
+          <ha-switch checked="{{_showConfig}}">Show config</ha-switch>
         </div>
       </app-toolbar>
       <div class="cards">

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

@@ -1,9 +1,9 @@
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 
 import "./demo-more-info";
+import "../../../src/components/ha-switch";
 
 class DemoMoreInfos extends PolymerElement {
   static get template() {
@@ -26,9 +26,7 @@ class DemoMoreInfos extends PolymerElement {
       </style>
       <app-toolbar>
         <div class="filters">
-          <paper-toggle-button checked="{{_showConfig}}"
-            >Show entity</paper-toggle-button
-          >
+          <ha-switch checked="{{_showConfig}}">Show entity</ha-switch>
         </div>
       </app-toolbar>
       <div class="cards">

gallery/src/data/demo_states.js

@@ -36,7 +36,7 @@ export default {
     attributes: {
       title: "Welcome Home!",
       message:
-        "Here are some resources to get started:\n\n - [Configuring Home Assistant](https://home-assistant.io/getting-started/configuration/)\n - [Available components](https://home-assistant.io/components/)\n - [Troubleshooting your configuration](https://home-assistant.io/docs/configuration/troubleshooting/)\n - [Getting help](https://home-assistant.io/help/)\n\nTo not see this card popup in the future, edit your config in\n`configuration.yaml` and disable the `introduction` component.",
+        "Here are some resources to get started:\n\n - [Configuring Home Assistant](https://home-assistant.io/getting-started/configuration/)\n - [Available integrations](https://home-assistant.io/integrations/)\n - [Troubleshooting your configuration](https://home-assistant.io/docs/configuration/troubleshooting/)\n - [Getting help](https://home-assistant.io/help/)\n\nTo not see this card popup in the future, edit your config in\n`configuration.yaml` and disable the `introduction` integration.",
     },
     last_changed: "2018-07-19T10:44:45.922241+00:00",
     last_updated: "2018-07-19T10:44:45.922241+00:00",

hassio/src/addon-view/hassio-addon-info.js

@@ -2,19 +2,19 @@ import "@polymer/iron-icon/iron-icon";
 import "@material/mwc-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-tooltip/paper-tooltip";
-import "@polymer/paper-toggle-button/paper-toggle-button";
 import { html } from "@polymer/polymer/lib/utils/html-tag";
 import { PolymerElement } from "@polymer/polymer/polymer-element";
 
 import "../../../src/components/ha-label-badge";
 import "../../../src/components/ha-markdown";
 import "../../../src/components/buttons/ha-call-api-button";
+import "../../../src/components/ha-switch";
 import "../../../src/resources/ha-style";
+import "../components/hassio-card-content";
+
 import { EventsMixin } from "../../../src/mixins/events-mixin";
 import { navigate } from "../../../src/common/navigate";
-
 import { showHassioMarkdownDialog } from "../dialogs/markdown/show-dialog-hassio-markdown";
-import "../components/hassio-card-content";
 
 const PERMIS_DESC = {
   rating: {
@@ -122,7 +122,7 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           width: 16px;
           color: var(--secondary-text-color);
         }
-        paper-toggle-button {
+        ha-switch {
           display: inline;
         }
         iron-icon.running {
@@ -348,26 +348,26 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
           <template is="dom-if" if="[[addon.version]]">
             <div class="state">
               <div>Start on boot</div>
-              <paper-toggle-button
+              <ha-switch
                 on-change="startOnBootToggled"
                 checked="[[computeStartOnBoot(addon.boot)]]"
-              ></paper-toggle-button>
+              ></ha-switch>
             </div>
             <div class="state">
               <div>Auto update</div>
-              <paper-toggle-button
+              <ha-switch
                 on-change="autoUpdateToggled"
                 checked="[[addon.auto_update]]"
-              ></paper-toggle-button>
+              ></ha-switch>
             </div>
             <template is="dom-if" if="[[addon.ingress]]">
               <div class="state">
                 <div>Show in sidebar</div>
-                <paper-toggle-button
+                <ha-switch
                   on-change="panelToggled"
                   checked="[[addon.ingress_panel]]"
                   disabled="[[_computeCannotIngressSidebar(hass, addon)]]"
-                ></paper-toggle-button>
+                ></ha-switch>
                 <template is="dom-if" if="[[_computeCannotIngressSidebar(hass, addon)]]">
                   <span>This option requires Home Assistant 0.92 or later.</span>
                 </template>
@@ -381,10 +381,10 @@ class HassioAddonInfo extends EventsMixin(PolymerElement) {
                   <paper-tooltip>Grant the add-on elevated system access.</paper-tooltip>
                 </span>
               </div>
-              <paper-toggle-button
+              <ha-switch
                 on-change="protectionToggled"
                 checked="[[addon.protected]]"
-              ></paper-toggle-button>
+              ></ha-switch>
             </div>
           </template>
         </div>

hassio/src/dashboard/hassio-dashboard.ts

@@ -8,26 +8,31 @@ import {
   customElement,
 } from "lit-element";
 import "./hassio-addons";
-import "./hassio-hass-update";
+import "./hassio-update";
 import { HomeAssistant } from "../../../src/types";
 import {
   HassioSupervisorInfo,
   HassioHomeAssistantInfo,
+  HassioHassOSInfo,
 } from "../../../src/data/hassio";
 
 @customElement("hassio-dashboard")
 class HassioDashboard extends LitElement {
   @property() public hass!: HomeAssistant;
+
   @property() public supervisorInfo!: HassioSupervisorInfo;
   @property() public hassInfo!: HassioHomeAssistantInfo;
+  @property() public hassOsInfo!: HassioHassOSInfo;
 
   protected render(): TemplateResult | void {
     return html`
       <div class="content">
-        <hassio-hass-update
+        <hassio-update
           .hass=${this.hass}
           .hassInfo=${this.hassInfo}
-        ></hassio-hass-update>
+          .supervisorInfo=${this.supervisorInfo}
+          .hassOsInfo=${this.hassOsInfo}
+        ></hassio-update>
         <hassio-addons
           .hass=${this.hass}
           .addons=${this.supervisorInfo.addons}