static styles (#2533)

src/panels/config/zha/ha-config-zha.ts

@@ -1,18 +1,18 @@
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
 } from "lit-element";
 import "@polymer/paper-icon-button/paper-icon-button";
 import { HassEntity } from "home-assistant-js-websocket";
 import { HASSDomEvent } from "../../../common/dom/fire_event";
 import { Cluster } from "../../../data/zha";
 import "../../../layouts/ha-app-layout";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import {
   ZHAClusterSelectedParams,
@@ -27,8 +27,6 @@ import "./zha-node";
 export class HaConfigZha extends LitElement {
   public hass?: HomeAssistant;
   public isWide?: boolean;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
   private _selectedNode?: HassEntity;
   private _selectedCluster?: Cluster;
   private _selectedEntity?: HassEntity;
@@ -45,7 +43,6 @@ export class HaConfigZha extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <ha-app-layout>
         <app-header slot="header">
           <app-toolbar>
@@ -114,24 +111,8 @@ export class HaConfigZha extends LitElement {
     this._selectedEntity = selectedEntityEvent.detail.entity;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult[] {
-    if (!this._haStyle) {
+    return [haStyle];
-      this._haStyle = document.importNode(
-        (document.getElementById("ha-style")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-    `;
   }
 
   private _onBackTapped(): void {

src/panels/config/zha/zha-cluster-attributes.ts

@@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-card/paper-card";
@@ -20,7 +21,7 @@ import {
   readAttributeValue,
   ZHADeviceEntity,
 } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import {
@@ -36,8 +37,6 @@ export class ZHAClusterAttributes extends LitElement {
   public selectedNode?: HassEntity;
   public selectedEntity?: ZHADeviceEntity;
   public selectedCluster?: Cluster;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
   private _attributes: Attribute[];
   private _selectedAttributeIndex: number;
   private _attributeValue?: any;
@@ -80,7 +79,6 @@ export class ZHAClusterAttributes extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <ha-config-section .isWide="${this.isWide}">
         <div style="position: relative" slot="header">
           <span>Cluster Attributes</span>
@@ -254,24 +252,18 @@ export class ZHAClusterAttributes extends LitElement {
     this._attributeValue = "";
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult[] {
-    if (!this._haStyle) {
+    return [
-      this._haStyle = document.importNode(
+      haStyle,
-        (document.getElementById("ha-style")!
+      css`
-          .children[0] as HTMLTemplateElement).content,
+        .flex {
-        true
+          -ms-flex: 1 1 0.000000001px;
-      );
+          -webkit-flex: 1;
-    }
+          flex: 1;
-    if (!this._ironFlex) {
+          -webkit-flex-basis: 0.000000001px;
-      this._ironFlex = document.importNode(
+          flex-basis: 0.000000001px;
-        (document.getElementById("iron-flex")!
+        }
-          .children[0] as HTMLTemplateElement).content,
+
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
         .content {
           margin-top: 24px;
         }
@@ -287,8 +279,15 @@ export class ZHAClusterAttributes extends LitElement {
         }
 
         .attribute-picker {
-          @apply --layout-horizontal;
+          display: -ms-flexbox;
-          @apply --layout-center-center;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
           padding-left: 28px;
           padding-right: 28px;
           padding-bottom: 10px;
@@ -316,7 +315,8 @@ export class ZHAClusterAttributes extends LitElement {
           display: none;
         }
       </style>
-    `;
+    `,
+    ];
   }
 }
 

src/panels/config/zha/zha-cluster-commands.ts

@@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-card/paper-card";
 import { HassEntity } from "home-assistant-js-websocket";
@@ -16,7 +17,7 @@ import {
   fetchCommandsForCluster,
   ZHADeviceEntity,
 } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import {
@@ -32,8 +33,6 @@ export class ZHAClusterCommands extends LitElement {
   public selectedEntity?: ZHADeviceEntity;
   public selectedCluster?: Cluster;
   private _showHelp: boolean;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
   private _commands: Command[];
   private _selectedCommandIndex: number;
   private _manufacturerCodeOverride?: number;
@@ -72,7 +71,6 @@ export class ZHAClusterCommands extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <ha-config-section .isWide="${this.isWide}">
         <div class="sectionHeader" slot="header">
           <span>Cluster Commands</span>
@@ -198,24 +196,18 @@ export class ZHAClusterCommands extends LitElement {
     this._issueClusterCommandServiceData = this._computeIssueClusterCommandServiceData();
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult[] {
-    if (!this._haStyle) {
+    return [
-      this._haStyle = document.importNode(
+      haStyle,
-        (document.getElementById("ha-style")!
+      css`
-          .children[0] as HTMLTemplateElement).content,
+        .flex {
-        true
+          -ms-flex: 1 1 0.000000001px;
-      );
+          -webkit-flex: 1;
-    }
+          flex: 1;
-    if (!this._ironFlex) {
+          -webkit-flex-basis: 0.000000001px;
-      this._ironFlex = document.importNode(
+          flex-basis: 0.000000001px;
-        (document.getElementById("iron-flex")!
+        }
-          .children[0] as HTMLTemplateElement).content,
+
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
         .content {
           margin-top: 24px;
         }
@@ -231,8 +223,15 @@ export class ZHAClusterCommands extends LitElement {
         }
 
         .command-picker {
-          @apply --layout-horizontal;
+          display: -ms-flexbox;
-          @apply --layout-center-center;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
           padding-left: 28px;
           padding-right: 28px;
           padding-bottom: 10px;
@@ -269,7 +268,8 @@ export class ZHAClusterCommands extends LitElement {
           display: none;
         }
       </style>
-    `;
+    `,
+    ];
   }
 }
 

src/panels/config/zha/zha-clusters.ts

@@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-card/paper-card";
 import { fireEvent } from "../../../common/dom/fire_event";
@@ -15,7 +16,7 @@ import {
   fetchClustersForZhaNode,
   ZHADeviceEntity,
 } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import { ItemSelectedEvent } from "./types";
@@ -40,8 +41,6 @@ export class ZHAClusters extends LitElement {
   public selectedEntity?: ZHADeviceEntity;
   private _selectedClusterIndex: number;
   private _clusters: Cluster[];
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
 
   constructor() {
     super();
@@ -75,7 +74,6 @@ export class ZHAClusters extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this._renderStyle()}
       <div class="node-picker">
         <paper-dropdown-menu label="Clusters" class="flex">
           <paper-listbox
@@ -122,27 +120,28 @@ export class ZHAClusters extends LitElement {
     });
   }
 
-  private _renderStyle(): TemplateResult {
+  static get styles(): CSSResult[] {
-    if (!this._haStyle) {
+    return [
-      this._haStyle = document.importNode(
+      haStyle,
-        (document.getElementById("ha-style")!
+      css`
-          .children[0] as HTMLTemplateElement).content,
+        .flex {
-        true
+          -ms-flex: 1 1 0.000000001px;
-      );
+          -webkit-flex: 1;
-    }
+          flex: 1;
-    if (!this._ironFlex) {
+          -webkit-flex-basis: 0.000000001px;
-      this._ironFlex = document.importNode(
+          flex-basis: 0.000000001px;
-        (document.getElementById("iron-flex")!
+        }
-          .children[0] as HTMLTemplateElement).content,
+
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
         .node-picker {
-          @apply --layout-horizontal;
+          display: -ms-flexbox;
-          @apply --layout-center-center;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
           padding-left: 28px;
           padding-right: 28px;
           padding-bottom: 10px;
@@ -151,8 +150,8 @@ export class ZHAClusters extends LitElement {
           color: grey;
           padding: 16px;
         }
-      </style>
+      `,
-    `;
+    ];
   }
 }
 

src/panels/config/zha/zha-entities.ts

@@ -1,10 +1,11 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-item/paper-item";
@@ -12,7 +13,7 @@ import "@polymer/paper-listbox/paper-listbox";
 import { HassEntity } from "home-assistant-js-websocket";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { fetchEntitiesForZhaNode } from "../../../data/zha";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import { ItemSelectedEvent } from "./types";
 
@@ -31,8 +32,6 @@ export class ZHAEntities extends LitElement {
   public selectedNode?: HassEntity;
   private _selectedEntityIndex: number;
   private _entities: HassEntity[];
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
 
   constructor() {
     super();
@@ -64,7 +63,6 @@ export class ZHAEntities extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this._renderStyle()}
       <div class="node-picker">
         <paper-dropdown-menu label="Entities" class="flex">
           <paper-listbox
@@ -125,27 +123,28 @@ export class ZHAEntities extends LitElement {
     });
   }
 
-  private _renderStyle(): TemplateResult {
+  static get styles(): CSSResult[] {
-    if (!this._haStyle) {
+    return [
-      this._haStyle = document.importNode(
+      haStyle,
-        (document.getElementById("ha-style")!
+      css`
-          .children[0] as HTMLTemplateElement).content,
+        .flex {
-        true
+          -ms-flex: 1 1 0.000000001px;
-      );
+          -webkit-flex: 1;
-    }
+          flex: 1;
-    if (!this._ironFlex) {
+          -webkit-flex-basis: 0.000000001px;
-      this._ironFlex = document.importNode(
+          flex-basis: 0.000000001px;
-        (document.getElementById("iron-flex")!
+        }
-          .children[0] as HTMLTemplateElement).content,
+
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
         .node-picker {
-          @apply --layout-horizontal;
+          display: -ms-flexbox;
-          @apply --layout-center-center;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
           padding-left: 28px;
           padding-right: 28px;
           padding-bottom: 10px;
@@ -163,8 +162,8 @@ export class ZHAEntities extends LitElement {
           color: grey;
           padding: 16px;
         }
-      </style>
+      `,
-    `;
+    ];
   }
 }
 

src/panels/config/zha/zha-network.ts

@@ -1,16 +1,17 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-card/paper-card";
 import "@polymer/paper-icon-button/paper-icon-button";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 
@@ -18,8 +19,6 @@ export class ZHANetwork extends LitElement {
   public hass?: HomeAssistant;
   public isWide?: boolean;
   private _showHelp: boolean;
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
 
   constructor() {
     super();
@@ -36,7 +35,6 @@ export class ZHANetwork extends LitElement {
 
   protected render(): TemplateResult | void {
     return html`
-      ${this.renderStyle()}
       <ha-config-section .isWide="${this.isWide}">
         <div style="position: relative" slot="header">
             <span>Network Management</span>
@@ -71,24 +69,10 @@ export class ZHANetwork extends LitElement {
     this._showHelp = !this._showHelp;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult[] {
-    if (!this._haStyle) {
+    return [
-      this._haStyle = document.importNode(
+      haStyle,
-        (document.getElementById("ha-style")!
+      css`
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    if (!this._ironFlex) {
-      this._ironFlex = document.importNode(
-        (document.getElementById("iron-flex")!
-          .children[0] as HTMLTemplateElement).content,
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
         .content {
           margin-top: 24px;
         }
@@ -119,7 +103,8 @@ export class ZHANetwork extends LitElement {
           display: none;
         }
       </style>
-    `;
+    `,
+    ];
   }
 }
 

src/panels/config/zha/zha-node.ts

@@ -1,9 +1,10 @@
-import "@polymer/iron-flex-layout/iron-flex-layout-classes";
 import {
   html,
   LitElement,
   PropertyDeclarations,
   TemplateResult,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-button/paper-button";
 import "@polymer/paper-card/paper-card";
@@ -16,7 +17,7 @@ import computeStateName from "../../../common/entity/compute_state_name";
 import sortByName from "../../../common/entity/states_sort_by_name";
 import "../../../components/buttons/ha-call-service-button";
 import "../../../components/ha-service-description";
-import "../../../resources/ha-style";
+import { haStyle } from "../../../resources/ha-style";
 import { HomeAssistant } from "../../../types";
 import "../ha-config-section";
 import {
@@ -45,8 +46,6 @@ export class ZHANode extends LitElement {
   private _selectedNode?: HassEntity;
   private _selectedEntity?: HassEntity;
   private _serviceData?: {};
-  private _haStyle?: DocumentFragment;
-  private _ironFlex?: DocumentFragment;
   private _nodes: HassEntity[];
 
   constructor() {
@@ -71,7 +70,6 @@ export class ZHANode extends LitElement {
   protected render(): TemplateResult | void {
     this._nodes = this._computeNodes(this.hass);
     return html`
-      ${this.renderStyle()}
       <ha-config-section .isWide="${this.isWide}">
         <div class="sectionHeader" slot="header">
           <span>Node Management</span>
@@ -242,24 +240,18 @@ export class ZHANode extends LitElement {
     this._selectedEntity = entitySelectedEvent.detail.entity;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult[] {
-    if (!this._haStyle) {
+    return [
-      this._haStyle = document.importNode(
+      haStyle,
-        (document.getElementById("ha-style")!
+      css`
-          .children[0] as HTMLTemplateElement).content,
+        .flex {
-        true
+          -ms-flex: 1 1 0.000000001px;
-      );
+          -webkit-flex: 1;
-    }
+          flex: 1;
-    if (!this._ironFlex) {
+          -webkit-flex-basis: 0.000000001px;
-      this._ironFlex = document.importNode(
+          flex-basis: 0.000000001px;
-        (document.getElementById("iron-flex")!
+        }
-          .children[0] as HTMLTemplateElement).content,
+
-        true
-      );
-    }
-    return html`
-      ${this._ironFlex} ${this._haStyle}
-      <style>
         .content {
           margin-top: 24px;
         }
@@ -289,8 +281,15 @@ export class ZHANode extends LitElement {
         }
 
         .node-picker {
-          @apply --layout-horizontal;
+          display: -ms-flexbox;
-          @apply --layout-center-center;
+          display: -webkit-flex;
+          display: flex;
+          -ms-flex-direction: row;
+          -webkit-flex-direction: row;
+          flex-direction: row;
+          -ms-flex-align: center;
+          -webkit-align-items: center;
+          align-items: center;
           padding-left: 28px;
           padding-right: 28px;
           padding-bottom: 10px;
@@ -311,8 +310,8 @@ export class ZHANode extends LitElement {
           right: 0;
           color: var(--primary-color);
         }
-      </style>
+      `,
-    `;
+    ];
   }
 }