Cleanup Editors and some common elements (#2882)

This is what I do while watching TV 😄

src/panels/lovelace/components/hui-action-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-textarea";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
@@ -31,15 +32,15 @@ declare global {
   }
 }
 
+@customElement("hui-action-editor")
 export class HuiActionEditor extends LitElement {
-  public config?: ActionConfig;
+  @property() public config?: ActionConfig;
-  public label?: string;
-  public actions?: string[];
-  protected hass?: HomeAssistant;
 
-  static get properties(): PropertyDeclarations {
+  @property() public label?: string;
-    return { hass: {}, config: {}, label: {}, actions: {} };
+
-  }
+  @property() public actions?: string[];
+
+  @property() protected hass?: HomeAssistant;
 
   get _action(): string {
     return this.config!.action || "";
@@ -126,5 +127,3 @@ declare global {
     "hui-action-editor": HuiActionEditor;
   }
 }
-
-customElements.define("hui-action-editor", HuiActionEditor);

src/panels/lovelace/components/hui-card-options.ts

@@ -1,4 +1,12 @@
-import { html, LitElement, PropertyDeclarations } from "lit-element";
+import {
+  html,
+  LitElement,
+  customElement,
+  property,
+  css,
+  CSSResult,
+  TemplateResult,
+} from "lit-element";
 import "@material/mwc-button";
 import "@polymer/paper-menu-button/paper-menu-button";
 import "@polymer/paper-icon-button/paper-icon-button";
@@ -12,63 +20,18 @@ import { Lovelace } from "../types";
 import { swapCard } from "../editor/config-util";
 import { showMoveCardViewDialog } from "../editor/card-editor/show-move-card-view-dialog";
 
+@customElement("hui-card-options")
 export class HuiCardOptions extends LitElement {
   public cardConfig?: LovelaceCardConfig;
-  public hass?: HomeAssistant;
-  public lovelace?: Lovelace;
-  public path?: [number, number];
 
-  static get properties(): PropertyDeclarations {
+  @property() public hass?: HomeAssistant;
-    return { hass: {}, lovelace: {}, path: {} };
-  }
 
-  protected render() {
+  @property() public lovelace?: Lovelace;
+
+  @property() public path?: [number, number];
+
+  protected render(): TemplateResult | void {
     return html`
-      <style>
-        div.options {
-          border-top: 1px solid #e8e8e8;
-          padding: 5px 8px;
-          background: var(--paper-card-background-color, white);
-          box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
-            rgba(0, 0, 0, 0.12) 0px 1px 5px -4px,
-            rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
-          display: flex;
-        }
-
-        div.options .primary-actions {
-          flex: 1;
-          margin: auto;
-        }
-
-        div.options .secondary-actions {
-          flex: 4;
-          text-align: right;
-        }
-
-        paper-icon-button {
-          color: var(--primary-text-color);
-        }
-
-        paper-icon-button.move-arrow[disabled] {
-          color: var(--disabled-text-color);
-        }
-
-        paper-menu-button {
-          color: var(--secondary-text-color);
-          padding: 0;
-        }
-
-        paper-item.header {
-          color: var(--primary-text-color);
-          text-transform: uppercase;
-          font-weight: 500;
-          font-size: 14px;
-        }
-
-        paper-item {
-          cursor: pointer;
-        }
-      </style>
       <slot></slot>
       <div class="options">
         <div class="primary-actions">
@@ -122,6 +85,54 @@ export class HuiCardOptions extends LitElement {
     `;
   }
 
+  static get styles(): CSSResult {
+    return css`
+      div.options {
+        border-top: 1px solid #e8e8e8;
+        padding: 5px 8px;
+        background: var(--paper-card-background-color, white);
+        box-shadow: rgba(0, 0, 0, 0.14) 0px 2px 2px 0px,
+          rgba(0, 0, 0, 0.12) 0px 1px 5px -4px,
+          rgba(0, 0, 0, 0.2) 0px 3px 1px -2px;
+        display: flex;
+      }
+
+      div.options .primary-actions {
+        flex: 1;
+        margin: auto;
+      }
+
+      div.options .secondary-actions {
+        flex: 4;
+        text-align: right;
+      }
+
+      paper-icon-button {
+        color: var(--primary-text-color);
+      }
+
+      paper-icon-button.move-arrow[disabled] {
+        color: var(--disabled-text-color);
+      }
+
+      paper-menu-button {
+        color: var(--secondary-text-color);
+        padding: 0;
+      }
+
+      paper-item.header {
+        color: var(--primary-text-color);
+        text-transform: uppercase;
+        font-weight: 500;
+        font-size: 14px;
+      }
+
+      paper-item {
+        cursor: pointer;
+      }
+    `;
+  }
+
   private _editCard(): void {
     showEditCardDialog(this, {
       lovelace: this.lovelace!,
@@ -162,5 +173,3 @@ declare global {
     "hui-card-options": HuiCardOptions;
   }
 }
-
-customElements.define("hui-card-options", HuiCardOptions);

src/panels/lovelace/components/hui-entities-toggle.ts

@@ -1,9 +1,12 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 import { PaperToggleButtonElement } from "@polymer/paper-toggle-button/paper-toggle-button";
 
@@ -11,20 +14,15 @@ import { DOMAINS_TOGGLE } from "../../../common/const";
 import { turnOnOffEntities } from "../common/entity/turn-on-off-entities";
 import { HomeAssistant } from "../../../types";
 
+@customElement("hui-entities-toggle")
 class HuiEntitiesToggle extends LitElement {
-  public entities?: string[];
+  @property() public entities?: string[];
-  protected hass?: HomeAssistant;
-  private _toggleEntities?: string[];
 
-  static get properties(): PropertyDeclarations {
+  @property() protected hass?: HomeAssistant;
-    return {
-      hass: {},
-      entities: {},
-      _toggleEntities: {},
-    };
-  }
 
-  public updated(changedProperties: PropertyValues) {
+  @property() private _toggleEntities?: string[];
+
+  public updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (changedProperties.has("entities")) {
       this._toggleEntities = this.entities!.filter(
@@ -41,7 +39,6 @@ class HuiEntitiesToggle extends LitElement {
     }
 
     return html`
-      ${this.renderStyle()}
       <paper-toggle-button
         ?checked="${this._toggleEntities!.some((entityId) => {
           const stateObj = this.hass!.states[entityId];
@@ -52,20 +49,18 @@ class HuiEntitiesToggle extends LitElement {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      :host {
-        :host {
+        width: 38px;
-          width: 38px;
+        display: block;
-          display: block;
+      }
-        }
+      paper-toggle-button {
-        paper-toggle-button {
+        cursor: pointer;
-          cursor: pointer;
+        --paper-toggle-button-label-spacing: 0;
-          --paper-toggle-button-label-spacing: 0;
+        padding: 13px 5px;
-          padding: 13px 5px;
+        margin: -4px -5px;
-          margin: -4px -5px;
+      }
-        }
-      </style>
     `;
   }
 
@@ -80,5 +75,3 @@ declare global {
     "hui-entities-toggle": HuiEntitiesToggle;
   }
 }
-
-customElements.define("hui-entities-toggle", HuiEntitiesToggle);

src/panels/lovelace/components/hui-entity-editor.ts

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 
 import { HomeAssistant } from "../../../types";
@@ -12,16 +15,11 @@ import { EntityConfig } from "../entity-rows/types";
 import "../../../components/entity/ha-entity-picker";
 import { EditorTarget } from "../editor/types";
 
+@customElement("hui-entity-editor")
 export class HuiEntityEditor extends LitElement {
-  protected hass?: HomeAssistant;
+  @property() protected hass?: HomeAssistant;
-  protected entities?: EntityConfig[];
 
-  static get properties(): PropertyDeclarations {
+  @property() protected entities?: EntityConfig[];
-    return {
-      hass: {},
-      entities: {},
-    };
-  }
 
   protected render(): TemplateResult | void {
     if (!this.entities) {
@@ -29,7 +27,6 @@ export class HuiEntityEditor extends LitElement {
     }
 
     return html`
-      ${this.renderStyle()}
       <h3>Entities</h3>
       <div class="entities">
         ${this.entities.map((entityConf, index) => {
@@ -79,13 +76,11 @@ export class HuiEntityEditor extends LitElement {
     fireEvent(this, "entities-changed", { entities: newConfigEntities });
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      .entities {
-        .entities {
+        padding-left: 20px;
-          padding-left: 20px;
+      }
-        }
-      </style>
     `;
   }
 }
@@ -95,5 +90,3 @@ declare global {
     "hui-entity-editor": HuiEntityEditor;
   }
 }
-
-customElements.define("hui-entity-editor", HuiEntityEditor);

src/panels/lovelace/components/hui-generic-entity-row.ts

@@ -6,6 +6,7 @@ import {
   CSSResult,
   PropertyValues,
   property,
+  TemplateResult,
 } from "lit-element";
 
 import { HomeAssistant } from "../../../types";
@@ -19,10 +20,12 @@ import "../components/hui-warning";
 
 class HuiGenericEntityRow extends LitElement {
   @property() public hass?: HomeAssistant;
+
   @property() public config?: EntitiesCardEntityConfig;
+
   @property() public showSecondary: boolean = true;
 
-  protected render() {
+  protected render(): TemplateResult | void {
     if (!this.hass || !this.config) {
       return html``;
     }
@@ -73,7 +76,7 @@ class HuiGenericEntityRow extends LitElement {
     `;
   }
 
-  protected updated(changedProps: PropertyValues) {
+  protected updated(changedProps: PropertyValues): void {
     super.updated(changedProps);
     if (changedProps.has("hass")) {
       this.toggleAttribute("rtl", computeRTL(this.hass!));

src/panels/lovelace/components/hui-image.ts

@@ -12,6 +12,7 @@ import {
   css,
   PropertyValues,
   query,
+  customElement,
 } from "lit-element";
 import { HomeAssistant } from "../../../types";
 import { styleMap } from "lit-html/directives/style-map";
@@ -26,33 +27,43 @@ export interface StateSpecificConfig {
   [state: string]: string;
 }
 
-/*
+@customElement("hui-image")
- * @appliesMixin LocalizeMixin
- */
 class HuiImage extends LitElement {
   @property() public hass?: HomeAssistant;
+
   @property() public entity?: string;
+
   @property() public image?: string;
+
   @property() public stateImage?: StateSpecificConfig;
+
   @property() public cameraImage?: string;
+
   @property() public aspectRatio?: string;
+
   @property() public filter?: string;
+
   @property() public stateFilter?: StateSpecificConfig;
 
   @property() private _loadError?: boolean;
+
   @property() private _cameraImageSrc?: string;
+
   @query("img") private _image!: HTMLImageElement;
+
   private _lastImageHeight?: number;
+
   private _cameraUpdater?: number;
+
   private _attached?: boolean;
 
-  public connectedCallback() {
+  public connectedCallback(): void {
     super.connectedCallback();
     this._attached = true;
     this._startUpdateCameraInterval();
   }
 
-  public disconnectedCallback() {
+  public disconnectedCallback(): void {
     super.disconnectedCallback();
     this._attached = false;
     this._stopUpdateCameraInterval();
@@ -137,7 +148,7 @@ class HuiImage extends LitElement {
     }
   }
 
-  private _startUpdateCameraInterval() {
+  private _startUpdateCameraInterval(): void {
     this._stopUpdateCameraInterval();
     if (this.cameraImage && this._attached) {
       this._cameraUpdater = window.setInterval(
@@ -147,23 +158,23 @@ class HuiImage extends LitElement {
     }
   }
 
-  private _stopUpdateCameraInterval() {
+  private _stopUpdateCameraInterval(): void {
     if (this._cameraUpdater) {
       clearInterval(this._cameraUpdater);
     }
   }
 
-  private _onImageError() {
+  private _onImageError(): void {
     this._loadError = true;
   }
 
-  private async _onImageLoad() {
+  private async _onImageLoad(): Promise<void> {
     this._loadError = false;
     await this.updateComplete;
     this._lastImageHeight = this._image.offsetHeight;
   }
 
-  private async _updateCameraImageSrc() {
+  private async _updateCameraImageSrc(): Promise<void> {
     if (!this.hass || !this.cameraImage) {
       return;
     }
@@ -221,5 +232,3 @@ declare global {
     "hui-image": HuiImage;
   }
 }
-
-customElements.define("hui-image", HuiImage);

src/panels/lovelace/components/hui-theme-select-editor.ts

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 import "@material/mwc-button";
 
@@ -20,16 +23,11 @@ declare global {
   }
 }
 
+@customElement("hui-theme-selection-editor")
 export class HuiThemeSelectionEditor extends LitElement {
-  public value?: string;
+  @property() public value?: string;
-  public hass?: HomeAssistant;
 
-  static get properties(): PropertyDeclarations {
+  @property() public hass?: HomeAssistant;
-    return {
-      hass: {},
-      value: {},
-    };
-  }
 
   protected render(): TemplateResult | void {
     const themes = ["Backend-selected", "default"].concat(
@@ -37,7 +35,6 @@ export class HuiThemeSelectionEditor extends LitElement {
     );
 
     return html`
-      ${this.renderStyle()}
       <paper-dropdown-menu
         label="Theme"
         dynamic-align
@@ -58,13 +55,11 @@ export class HuiThemeSelectionEditor extends LitElement {
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      paper-dropdown-menu {
-        paper-dropdown-menu {
+        width: 100%;
-          width: 100%;
+      }
-        }
-      </style>
     `;
   }
 
@@ -82,5 +77,3 @@ declare global {
     "hui-theme-select-editor": HuiThemeSelectionEditor;
   }
 }
-
-customElements.define("hui-theme-select-editor", HuiThemeSelectionEditor);

src/panels/lovelace/components/hui-timestamp-display.ts

@@ -1,9 +1,10 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 
 import { HomeAssistant } from "../../../types";
@@ -19,30 +20,32 @@ const FORMATS: { [key: string]: (ts: Date, lang: string) => string } = {
 };
 const INTERVAL_FORMAT = ["relative", "total"];
 
+@customElement("hui-timestamp-display")
 class HuiTimestampDisplay extends LitElement {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  public ts?: Date;
+
-  public format?: "relative" | "total" | "date" | "datetime" | "time";
+  @property() public ts?: Date;
-  private _relative?: string;
+
+  @property() public format?:
+    | "relative"
+    | "total"
+    | "date"
+    | "datetime"
+    | "time";
+
+  @property() private _relative?: string;
+
   private _connected?: boolean;
+
   private _interval?: number;
 
-  static get properties(): PropertyDeclarations {
+  public connectedCallback(): void {
-    return {
-      ts: {},
-      hass: {},
-      format: {},
-      _relative: {},
-    };
-  }
-
-  public connectedCallback() {
     super.connectedCallback();
     this._connected = true;
     this._startInterval();
   }
 
-  public disconnectedCallback() {
+  public disconnectedCallback(): void {
     super.disconnectedCallback();
     this._connected = false;
     this._clearInterval();
@@ -65,18 +68,18 @@ class HuiTimestampDisplay extends LitElement {
       return html`
         ${this._relative}
       `;
-    } else if (format in FORMATS) {
+    }
+    if (format in FORMATS) {
       return html`
         ${FORMATS[format](this.ts, this.hass.language)}
       `;
-    } else {
-      return html`
-        Invalid format
-      `;
     }
+    return html`
+      Invalid format
+    `;
   }
 
-  protected updated(changedProperties: PropertyValues) {
+  protected updated(changedProperties: PropertyValues): void {
     super.updated(changedProperties);
     if (!changedProperties.has("format") || !this._connected) {
       return;
@@ -89,11 +92,11 @@ class HuiTimestampDisplay extends LitElement {
     }
   }
 
-  private get _format() {
+  private get _format(): string {
     return this.format || "relative";
   }
 
-  private _startInterval() {
+  private _startInterval(): void {
     this._clearInterval();
     if (this._connected && INTERVAL_FORMAT.includes(this._format)) {
       this._updateRelative();
@@ -101,14 +104,14 @@ class HuiTimestampDisplay extends LitElement {
     }
   }
 
-  private _clearInterval() {
+  private _clearInterval(): void {
     if (this._interval) {
       clearInterval(this._interval);
       this._interval = undefined;
     }
   }
 
-  private _updateRelative() {
+  private _updateRelative(): void {
     if (this.ts && this.hass!.localize) {
       this._relative =
         this._format === "relative"
@@ -126,5 +129,3 @@ declare global {
     "hui-timestamp-display": HuiTimestampDisplay;
   }
 }
-
-customElements.define("hui-timestamp-display", HuiTimestampDisplay);

src/panels/lovelace/components/hui-yaml-editor.ts

@@ -6,6 +6,7 @@ import codeMirrorCSS from "codemirror/lib/codemirror.css";
 import { HomeAssistant } from "../../../types";
 import { fireEvent } from "../../../common/dom/fire_event";
 import { computeRTL } from "../../../common/util/compute_rtl";
+import { customElement } from "lit-element";
 
 declare global {
   interface HASSDomEvents {
@@ -16,9 +17,12 @@ declare global {
   }
 }
 
+@customElement("hui-yaml-editor")
 export class HuiYamlEditor extends HTMLElement {
   public _hass?: HomeAssistant;
+
   public codemirror: CodeMirror;
+
   private _value: string;
 
   public constructor() {
@@ -108,7 +112,7 @@ export class HuiYamlEditor extends HTMLElement {
     fireEvent(this, "yaml-changed", { value: this.codemirror.getValue() });
   }
 
-  private setScrollBarDirection() {
+  private setScrollBarDirection(): void {
     if (!this.codemirror) {
       return;
     }
@@ -124,5 +128,3 @@ declare global {
     "hui-yaml-editor": HuiYamlEditor;
   }
 }
-
-window.customElements.define("hui-yaml-editor", HuiYamlEditor);

src/panels/lovelace/editor/card-editor/hui-card-picker.ts

@@ -1,4 +1,11 @@
-import { html, css, LitElement, TemplateResult, CSSResult } from "lit-element";
+import {
+  html,
+  css,
+  LitElement,
+  TemplateResult,
+  CSSResult,
+  customElement,
+} from "lit-element";
 import "@material/mwc-button";
 
 import { HomeAssistant } from "../../../../types";
@@ -33,8 +40,10 @@ const cards = [
   { name: "Weather Forecast", type: "weather-forecast" },
 ];
 
+@customElement("hui-card-picker")
 export class HuiCardPicker extends LitElement {
   public hass?: HomeAssistant;
+
   public cardPicked?: (cardConf: LovelaceCardConfig) => void;
 
   protected render(): TemplateResult | void {
@@ -97,5 +106,3 @@ declare global {
     "hui-card-picker": HuiCardPicker;
   }
 }
-
-customElements.define("hui-card-picker", HuiCardPicker);

src/panels/lovelace/editor/card-editor/hui-dialog-edit-card.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 
 import { HomeAssistant } from "../../../../types";
@@ -23,18 +24,13 @@ declare global {
   }
 }
 
+@customElement("hui-dialog-edit-card")
 export class HuiDialogEditCard extends LitElement {
-  protected hass?: HomeAssistant;
+  @property() protected hass?: HomeAssistant;
-  private _params?: EditCardDialogParams;
-  private _cardConfig?: LovelaceCardConfig;
 
-  static get properties(): PropertyDeclarations {
+  @property() private _params?: EditCardDialogParams;
-    return {
+
-      hass: {},
+  @property() private _cardConfig?: LovelaceCardConfig;
-      _params: {},
-      _cardConfig: {},
-    };
-  }
 
   constructor() {
     super();
@@ -78,11 +74,11 @@ export class HuiDialogEditCard extends LitElement {
     `;
   }
 
-  private _cardPicked(cardConf: LovelaceCardConfig) {
+  private _cardPicked(cardConf: LovelaceCardConfig): void {
     this._cardConfig = cardConf;
   }
 
-  private _cancel() {
+  private _cancel(): void {
     this._params = undefined;
     this._cardConfig = undefined;
   }
@@ -93,5 +89,3 @@ declare global {
     "hui-dialog-edit-card": HuiDialogEditCard;
   }
 }
-
-customElements.define("hui-dialog-edit-card", HuiDialogEditCard);

src/panels/lovelace/editor/card-editor/hui-dialog-move-card-view.ts

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-item/paper-item";
@@ -13,14 +16,9 @@ import { moveCard } from "../config-util";
 import { MoveCardViewDialogParams } from "./show-move-card-view-dialog";
 import { PolymerChangedEvent } from "../../../../polymer-types";
 
+@customElement("hui-dialog-move-card-view")
 export class HuiDialogMoveCardView extends LitElement {
-  private _params?: MoveCardViewDialogParams;
+  @property() private _params?: MoveCardViewDialogParams;
-
-  static get properties(): PropertyDeclarations {
-    return {
-      _params: {},
-    };
-  }
 
   public async showDialog(params: MoveCardViewDialogParams): Promise<void> {
     this._params = params;
@@ -32,29 +30,6 @@ export class HuiDialogMoveCardView extends LitElement {
       return html``;
     }
     return html`
-      <style>
-        paper-item {
-          margin: 8px;
-          cursor: pointer;
-        }
-        paper-item[active] {
-          color: var(--primary-color);
-        }
-        paper-item[active]:before {
-          border-radius: 4px;
-          position: absolute;
-          top: 0;
-          right: 0;
-          bottom: 0;
-          left: 0;
-          pointer-events: none;
-          content: "";
-          background-color: var(--primary-color);
-          opacity: 0.12;
-          transition: opacity 15ms linear;
-          will-change: opacity;
-        }
-      </style>
       <paper-dialog
         with-backdrop
         opened
@@ -75,6 +50,32 @@ export class HuiDialogMoveCardView extends LitElement {
     `;
   }
 
+  static get styles(): CSSResult {
+    return css`
+      paper-item {
+        margin: 8px;
+        cursor: pointer;
+      }
+      paper-item[active] {
+        color: var(--primary-color);
+      }
+      paper-item[active]:before {
+        border-radius: 4px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        pointer-events: none;
+        content: "";
+        background-color: var(--primary-color);
+        opacity: 0.12;
+        transition: opacity 15ms linear;
+        will-change: opacity;
+      }
+    `;
+  }
+
   private get _dialog(): PaperDialogElement {
     return this.shadowRoot!.querySelector("paper-dialog")!;
   }
@@ -104,5 +105,3 @@ declare global {
     "hui-dialog-move-card-view": HuiDialogMoveCardView;
   }
 }
-
-customElements.define("hui-dialog-move-card-view", HuiDialogMoveCardView);

src/panels/lovelace/editor/card-editor/hui-dialog-pick-card.ts

@@ -2,9 +2,9 @@ import {
   html,
   css,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
   CSSResult,
+  customElement,
 } from "lit-element";
 import "@polymer/paper-dialog/paper-dialog";
 import "@polymer/paper-dialog-scrollable/paper-dialog-scrollable";
@@ -15,15 +15,12 @@ import "./hui-card-picker";
 import { HomeAssistant } from "../../../../types";
 import { LovelaceCardConfig } from "../../../../data/lovelace";
 
+@customElement("hui-dialog-pick-card")
 export class HuiDialogPickCard extends LitElement {
   public hass?: HomeAssistant;
   public cardPicked?: (cardConf: LovelaceCardConfig) => void;
   public closeDialog?: () => void;
 
-  static get properties(): PropertyDeclarations {
-    return {};
-  }
-
   protected render(): TemplateResult | void {
     return html`
       <paper-dialog
@@ -47,7 +44,7 @@ export class HuiDialogPickCard extends LitElement {
     `;
   }
 
-  private _openedChanged(ev) {
+  private _openedChanged(ev): void {
     if (!ev.detail.value) {
       this.closeDialog!();
     }
@@ -88,5 +85,3 @@ declare global {
     "hui-dialog-pick-card": HuiDialogPickCard;
   }
 }
-
-customElements.define("hui-dialog-pick-card", HuiDialogPickCard);

src/panels/lovelace/editor/card-editor/hui-edit-card.ts

@@ -2,10 +2,11 @@ import {
   html,
   css,
   LitElement,
-  PropertyDeclarations,
   PropertyValues,
   TemplateResult,
   CSSResult,
+  customElement,
+  property,
 } from "lit-element";
 import { classMap } from "lit-html/directives/class-map";
 import yaml from "js-yaml";
@@ -49,36 +50,33 @@ declare global {
   }
 }
 
+@customElement("hui-edit-card")
 export class HuiEditCard extends LitElement {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  public lovelace?: Lovelace;
-  public path?: [number] | [number, number];
-  public cardConfig?: LovelaceCardConfig;
-  public closeDialog?: () => void;
-  private _configElement?: LovelaceCardEditor | null;
-  private _uiEditor?: boolean;
-  private _configValue?: ConfigValue;
-  private _configState?: string;
-  private _loading?: boolean;
-  private _saving: boolean;
-  private _errorMsg?: TemplateResult;
-  private _cardType?: string;
 
-  static get properties(): PropertyDeclarations {
+  @property() public cardConfig?: LovelaceCardConfig;
-    return {
+
-      hass: {},
+  public lovelace?: Lovelace;
-      cardConfig: {},
+
-      viewIndex: {},
+  public path?: [number] | [number, number];
-      _cardIndex: {},
+
-      _configElement: {},
+  public closeDialog?: () => void;
-      _configValue: {},
+
-      _configState: {},
+  @property() private _configElement?: LovelaceCardEditor | null;
-      _errorMsg: {},
+
-      _uiEditor: {},
+  @property() private _uiEditor?: boolean;
-      _saving: {},
+
-      _loading: {},
+  @property() private _configValue?: ConfigValue;
-    };
+
-  }
+  @property() private _configState?: string;
+
+  @property() private _loading?: boolean;
+
+  @property() private _saving: boolean;
+
+  @property() private _errorMsg?: TemplateResult;
+
+  private _cardType?: string;
 
   private get _dialog(): PaperDialogElement {
     return this.shadowRoot!.querySelector("paper-dialog")!;
@@ -88,7 +86,7 @@ export class HuiEditCard extends LitElement {
     return this.shadowRoot!.querySelector("hui-card-preview")!;
   }
 
-  protected constructor() {
+  public constructor() {
     super();
     this._saving = false;
   }
@@ -270,7 +268,7 @@ export class HuiEditCard extends LitElement {
     this._updatePreview(value);
   }
 
-  private async _updatePreview(config: LovelaceCardConfig) {
+  private async _updatePreview(config: LovelaceCardConfig): Promise<void> {
     await this.updateComplete;
 
     if (!this._previewEl) {
@@ -286,7 +284,7 @@ export class HuiEditCard extends LitElement {
     }
   }
 
-  private _setPreviewError(error: ConfigError) {
+  private _setPreviewError(error: ConfigError): void {
     if (!this._previewEl) {
       return;
     }
@@ -323,7 +321,7 @@ export class HuiEditCard extends LitElement {
     this._resizeDialog();
   }
 
-  private _isConfigValid() {
+  private _isConfigValid(): boolean {
     if (!this._configValue || !this._configValue.value) {
       return false;
     }
@@ -401,7 +399,7 @@ export class HuiEditCard extends LitElement {
     return this.path!.length === 1;
   }
 
-  private _openedChanged(ev) {
+  private _openedChanged(ev): void {
     if (!ev.detail.value) {
       this.closeDialog!();
     }
@@ -518,5 +516,3 @@ declare global {
     "hui-edit-card": HuiEditCard;
   }
 }
-
-customElements.define("hui-edit-card", HuiEditCard);

src/panels/lovelace/editor/card-editor/show-edit-card-dialog.ts

@@ -17,7 +17,7 @@ export interface EditCardDialogParams {
   path: [number] | [number, number];
 }
 
-const registerEditCardDialog = (element: HTMLElement) =>
+const registerEditCardDialog = (element: HTMLElement): Event =>
   fireEvent(element, "register-dialog", {
     dialogShowEvent,
     dialogTag,
@@ -28,7 +28,7 @@ const registerEditCardDialog = (element: HTMLElement) =>
 export const showEditCardDialog = (
   element: HTMLElement,
   editCardDialogParams: EditCardDialogParams
-) => {
+): void => {
   if (!registeredDialog) {
     registeredDialog = true;
     registerEditCardDialog(element);

src/panels/lovelace/editor/card-editor/show-move-card-view-dialog.ts

@@ -15,7 +15,7 @@ export interface MoveCardViewDialogParams {
   lovelace: Lovelace;
 }
 
-const registerEditCardDialog = (element: HTMLElement) =>
+const registerEditCardDialog = (element: HTMLElement): Event =>
   fireEvent(element, "register-dialog", {
     dialogShowEvent: "show-move-card-view",
     dialogTag: "hui-dialog-move-card-view",
@@ -26,7 +26,7 @@ const registerEditCardDialog = (element: HTMLElement) =>
 export const showMoveCardViewDialog = (
   element: HTMLElement,
   moveCardViewDialogParams: MoveCardViewDialogParams
-) => {
+): void => {
   if (!registeredDialog) {
     registeredDialog = true;
     registerEditCardDialog(element);

src/panels/lovelace/editor/config-elements/hui-alarm-panel-card-editor.ts

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  CSSResult,
+  css,
 } from "lit-element";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
@@ -26,20 +29,18 @@ const cardConfigStruct = struct({
   states: "array?",
 });
 
+@customElement("hui-alarm-panel-card-editor")
 export class HuiAlarmPanelCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _entity(): string {
     return this._config!.entity || "";
   }
@@ -60,7 +61,7 @@ export class HuiAlarmPanelCardEditor extends LitElement
     const states = ["arm_home", "arm_away", "arm_night", "arm_custom_bypass"];
 
     return html`
-      ${configElementStyle} ${this.renderStyle()}
+      ${configElementStyle}
       <div class="card-config">
         <div class="side-by-side">
           <paper-input
@@ -107,23 +108,21 @@ export class HuiAlarmPanelCardEditor extends LitElement
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      .states {
-        .states {
+        display: flex;
-          display: flex;
+        flex-direction: row;
-          flex-direction: row;
+      }
-        }
+      .deleteState {
-        .deleteState {
+        visibility: hidden;
-          visibility: hidden;
+      }
-        }
+      .states:hover > .deleteState {
-        .states:hover > .deleteState {
+        visibility: visible;
-          visibility: visible;
+      }
-        }
+      ha-icon {
-        ha-icon {
+        padding-top: 12px;
-          padding-top: 12px;
+      }
-        }
-      </style>
     `;
   }
 
@@ -190,5 +189,3 @@ declare global {
     "hui-alarm-panel-card-editor": HuiAlarmPanelCardEditor;
   }
 }
-
-customElements.define("hui-alarm-panel-card-editor", HuiAlarmPanelCardEditor);

src/panels/lovelace/editor/config-elements/hui-entities-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
@@ -44,10 +45,19 @@ const cardConfigStruct = struct({
   entities: [entitiesConfigStruct],
 });
 
+@customElement("hui-entities-card-editor")
 export class HuiEntitiesCardEditor extends LitElement
   implements LovelaceCardEditor {
-  static get properties(): PropertyDeclarations {
+  @property() public hass?: HomeAssistant;
-    return { hass: {}, _config: {}, _configEntities: {} };
+
+  @property() private _config?: EntitiesCardConfig;
+
+  @property() private _configEntities?: EntitiesCardEntityConfig[];
+
+  public setConfig(config: EntitiesCardConfig): void {
+    config = cardConfigStruct(config);
+    this._config = config;
+    this._configEntities = processEditorEntities(config.entities);
   }
 
   get _title(): string {
@@ -58,16 +68,6 @@ export class HuiEntitiesCardEditor extends LitElement
     return this._config!.theme || "Backend-selected";
   }
 
-  public hass?: HomeAssistant;
-  private _config?: EntitiesCardConfig;
-  private _configEntities?: EntitiesCardEntityConfig[];
-
-  public setConfig(config: EntitiesCardConfig): void {
-    config = cardConfigStruct(config);
-    this._config = config;
-    this._configEntities = processEditorEntities(config.entities);
-  }
-
   protected render(): TemplateResult | void {
     if (!this.hass) {
       return html``;
@@ -141,5 +141,3 @@ declare global {
     "hui-entities-card-editor": HuiEntitiesCardEditor;
   }
 }
-
-customElements.define("hui-entities-card-editor", HuiEntitiesCardEditor);

src/panels/lovelace/editor/config-elements/hui-entity-button-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 
@@ -33,20 +34,18 @@ const cardConfigStruct = struct({
   theme: "string?",
 });
 
+@customElement("hui-entity-button-card-editor")
 export class HuiEntityButtonCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _entity(): string {
     return this._config!.entity || "";
   }
@@ -161,8 +160,3 @@ declare global {
     "hui-entity-button-card-editor": HuiEntityButtonCardEditor;
   }
 }
-
-customElements.define(
-  "hui-entity-button-card-editor",
-  HuiEntityButtonCardEditor
-);

src/panels/lovelace/editor/config-elements/hui-gauge-card-editor.ts

@@ -1,8 +1,11 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
+  css,
+  CSSResult,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-toggle-button/paper-toggle-button";
@@ -29,22 +32,21 @@ const cardConfigStruct = struct({
   theme: "string?",
 });
 
+@customElement("hui-gauge-card-editor")
 export class HuiGaugeCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
+
   private _useSeverity?: boolean;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
-    this._useSeverity = config.severity ? true : false;
+    this._useSeverity = !!config.severity;
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _name(): string {
     return this._config!.name || "";
   }
@@ -79,7 +81,7 @@ export class HuiGaugeCardEditor extends LitElement
     }
 
     return html`
-      ${configElementStyle} ${this.renderStyle()}
+      ${configElementStyle}
       <div class="card-config">
         <div class="side-by-side">
           <paper-input
@@ -161,24 +163,22 @@ export class HuiGaugeCardEditor extends LitElement
     `;
   }
 
-  private renderStyle(): TemplateResult {
+  static get styles(): CSSResult {
-    return html`
+    return css`
-      <style>
+      .severity {
-        .severity {
+        display: none;
-          display: none;
+        width: 100%;
-          width: 100%;
+        padding-left: 16px;
-          padding-left: 16px;
+        flex-direction: row;
-          flex-direction: row;
+        flex-wrap: wrap;
-          flex-wrap: wrap;
+      }
-        }
+      .severity > * {
-        .severity > * {
+        flex: 1 0 30%;
-          flex: 1 0 30%;
+        padding-right: 4px;
-          padding-right: 4px;
+      }
-        }
+      paper-toggle-button[checked] ~ .severity {
-        paper-toggle-button[checked] ~ .severity {
+        display: flex;
-          display: flex;
+      }
-        }
-      </style>
     `;
   }
 
@@ -243,5 +243,3 @@ declare global {
     "hui-gauge-card-editor": HuiGaugeCardEditor;
   }
 }
-
-customElements.define("hui-gauge-card-editor", HuiGaugeCardEditor);

src/panels/lovelace/editor/config-elements/hui-glance-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
 import "@polymer/paper-item/paper-item";
@@ -43,11 +44,14 @@ const cardConfigStruct = struct({
   entities: [entitiesConfigStruct],
 });
 
+@customElement("hui-glance-card-editor")
 export class HuiGlanceCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
-  private _configEntities?: ConfigEntity[];
+  @property() private _config?: Config;
+
+  @property() private _configEntities?: ConfigEntity[];
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
@@ -55,10 +59,6 @@ export class HuiGlanceCardEditor extends LitElement
     this._configEntities = processEditorEntities(config.entities);
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {}, _configEntities: {} };
-  }
-
   get _title(): string {
     return this._config!.title || "";
   }
@@ -162,5 +162,3 @@ declare global {
     "hui-glance-card-editor": HuiGlanceCardEditor;
   }
 }
-
-customElements.define("hui-glance-card-editor", HuiGlanceCardEditor);

src/panels/lovelace/editor/config-elements/hui-iframe-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 
@@ -21,20 +22,18 @@ const cardConfigStruct = struct({
   aspect_ratio: "string?",
 });
 
+@customElement("hui-iframe-card-editor")
 export class HuiIframeCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _title(): string {
     return this._config!.title || "";
   }
@@ -110,5 +109,3 @@ declare global {
     "hui-iframe-card-editor": HuiIframeCardEditor;
   }
 }
-
-customElements.define("hui-iframe-card-editor", HuiIframeCardEditor);

src/panels/lovelace/editor/config-elements/hui-light-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 
@@ -24,20 +25,18 @@ const cardConfigStruct = struct({
   theme: "string?",
 });
 
+@customElement("hui-light-card-editor")
 export class HuiLightCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {}, _configEntities: {} };
-  }
-
   get _name(): string {
     return this._config!.name || "";
   }
@@ -112,5 +111,3 @@ declare global {
     "hui-light-card-editor": HuiLightCardEditor;
   }
 }
-
-customElements.define("hui-light-card-editor", HuiLightCardEditor);

src/panels/lovelace/editor/config-elements/hui-map-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 
@@ -35,10 +36,13 @@ const cardConfigStruct = struct({
   entities: [entitiesConfigStruct],
 });
 
+@customElement("hui-map-card-editor")
 export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: MapCardConfig;
+
-  private _configEntities?: EntityConfig[];
+  @property() private _config?: MapCardConfig;
+
+  @property() private _configEntities?: EntityConfig[];
 
   public setConfig(config: MapCardConfig): void {
     config = cardConfigStruct(config);
@@ -46,10 +50,6 @@ export class HuiMapCardEditor extends LitElement implements LovelaceCardEditor {
     this._configEntities = processEditorEntities(config.entities);
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {}, _configEntities: {} };
-  }
-
   get _title(): string {
     return this._config!.title || "";
   }
@@ -137,5 +137,3 @@ declare global {
     "hui-map-card-editor": HuiMapCardEditor;
   }
 }
-
-customElements.define("hui-map-card-editor", HuiMapCardEditor);

src/panels/lovelace/editor/config-elements/hui-markdown-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-input/paper-textarea";
@@ -21,20 +22,18 @@ const cardConfigStruct = struct({
   content: "string",
 });
 
+@customElement("hui-markdown-card-editor")
 export class HuiMarkdownCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _title(): string {
     return this._config!.title || "";
   }
@@ -98,5 +97,3 @@ declare global {
     "hui-markdown-card-editor": HuiMarkdownCardEditor;
   }
 }
-
-customElements.define("hui-markdown-card-editor", HuiMarkdownCardEditor);

src/panels/lovelace/editor/config-elements/hui-media-control-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 
 import { struct } from "../../common/structs/struct";
@@ -19,20 +20,18 @@ const cardConfigStruct = struct({
   entity: "string?",
 });
 
+@customElement("hui-media-control-card-editor")
 export class HuiMediaControlCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _entity(): string {
     return this._config!.entity || "";
   }
@@ -83,8 +82,3 @@ declare global {
     "hui-media-control-card-editor": HuiMediaControlCardEditor;
   }
 }
-
-customElements.define(
-  "hui-media-control-card-editor",
-  HuiMediaControlCardEditor
-);

src/panels/lovelace/editor/config-elements/hui-picture-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 
@@ -28,20 +29,18 @@ const cardConfigStruct = struct({
   hold_action: struct.optional(actionConfigStruct),
 });
 
+@customElement("hui-picture-card-editor")
 export class HuiPictureCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _image(): string {
     return this._config!.image || "";
   }
@@ -123,5 +122,3 @@ declare global {
     "hui-picture-card-editor": HuiPictureCardEditor;
   }
 }
-
-customElements.define("hui-picture-card-editor", HuiPictureCardEditor);

src/panels/lovelace/editor/config-elements/hui-plant-status-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 
@@ -23,20 +24,18 @@ const cardConfigStruct = struct({
   name: "string?",
 });
 
+@customElement("hui-plant-status-card-editor")
 export class HuiPlantStatusCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _entity(): string {
     return this._config!.entity || "";
   }
@@ -100,5 +99,3 @@ declare global {
     "hui-plant-status-card-editor": HuiPlantStatusCardEditor;
   }
 }
-
-customElements.define("hui-plant-status-card-editor", HuiPlantStatusCardEditor);

src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-dropdown-menu/paper-dropdown-menu";
@@ -32,20 +33,18 @@ const cardConfigStruct = struct({
   hours_to_show: "number?",
 });
 
+@customElement("hui-sensor-card-editor")
 export class HuiSensorCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _entity(): string {
     return this._config!.entity || "";
   }
@@ -194,5 +193,3 @@ declare global {
     "hui-sensor-card-editor": HuiSensorCardEditor;
   }
 }
-
-customElements.define("hui-sensor-card-editor", HuiSensorCardEditor);

src/panels/lovelace/editor/config-elements/hui-shopping-list-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 
@@ -18,20 +19,18 @@ const cardConfigStruct = struct({
   title: "string?",
 });
 
+@customElement("hui-shopping-list-card-editor")
 export class HuiShoppingListEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _title(): string {
     return this._config!.title || "";
   }
@@ -81,5 +80,3 @@ declare global {
     "hui-shopping-list-card-editor": HuiShoppingListEditor;
   }
 }
-
-customElements.define("hui-shopping-list-card-editor", HuiShoppingListEditor);

src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 
@@ -24,20 +25,18 @@ const cardConfigStruct = struct({
   theme: "string?",
 });
 
+@customElement("hui-thermostat-card-editor")
 export class HuiThermostatCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _entity(): string {
     return this._config!.entity || "";
   }
@@ -109,5 +108,3 @@ declare global {
     "hui-thermostat-card-editor": HuiThermostatCardEditor;
   }
 }
-
-customElements.define("hui-thermostat-card-editor", HuiThermostatCardEditor);

src/panels/lovelace/editor/config-elements/hui-weather-forecast-card-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 
 import { struct } from "../../common/structs/struct";
@@ -21,20 +22,18 @@ const cardConfigStruct = struct({
   name: "string?",
 });
 
+@customElement("hui-weather-forecast-card-editor")
 export class HuiWeatherForecastCardEditor extends LitElement
   implements LovelaceCardEditor {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _config?: Config;
+
+  @property() private _config?: Config;
 
   public setConfig(config: Config): void {
     config = cardConfigStruct(config);
     this._config = config;
   }
 
-  static get properties(): PropertyDeclarations {
-    return { hass: {}, _config: {} };
-  }
-
   get _entity(): string {
     return this._config!.entity || "";
   }
@@ -98,8 +97,3 @@ declare global {
     "hui-weather-forecast-card-editor": HuiWeatherForecastCardEditor;
   }
 }
-
-customElements.define(
-  "hui-weather-forecast-card-editor",
-  HuiWeatherForecastCardEditor
-);

src/panels/lovelace/editor/hui-dialog-save-config.ts

@@ -2,11 +2,11 @@ import {
   html,
   css,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
   CSSResult,
+  customElement,
+  property,
 } from "lit-element";
-
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-dialog/paper-dialog";
 // This is not a duplicate import, one is for types, one is for element.
@@ -15,25 +15,18 @@ import { PaperDialogElement } from "@polymer/paper-dialog/paper-dialog";
 import "@material/mwc-button";
 
 import { haStyleDialog } from "../../../resources/styles";
-
 import { HomeAssistant } from "../../../types";
-
 import { SaveDialogParams } from "./show-save-config-dialog";
 
+@customElement("hui-save-config")
 export class HuiSaveConfig extends LitElement {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _params?: SaveDialogParams;
-  private _saving: boolean;
 
-  static get properties(): PropertyDeclarations {
+  @property() private _params?: SaveDialogParams;
-    return {
-      hass: {},
-      _params: {},
-      _saving: {},
-    };
-  }
 
-  protected constructor() {
+  @property() private _saving: boolean;
+
+  public constructor() {
     super();
     this._saving = false;
   }
@@ -145,5 +138,3 @@ declare global {
     "hui-dialog-save-config": HuiSaveConfig;
   }
 }
-
-customElements.define("hui-dialog-save-config", HuiSaveConfig);

src/panels/lovelace/editor/lovelace-editor/hui-dialog-edit-lovelace.ts

@@ -2,9 +2,10 @@ import {
   html,
   css,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
   CSSResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner";
 import "@polymer/paper-dialog/paper-dialog";
@@ -21,20 +22,17 @@ import { HomeAssistant } from "../../../../types";
 import { LovelaceConfig } from "../../../../data/lovelace";
 import { Lovelace } from "../../types";
 
+@customElement("hui-dialog-edit-lovelace")
 export class HuiDialogEditLovelace extends LitElement {
-  public hass?: HomeAssistant;
+  @property() public hass?: HomeAssistant;
-  private _lovelace?: Lovelace;
+
+  @property() private _lovelace?: Lovelace;
+
   private _config?: LovelaceConfig;
+
   private _saving: boolean;
 
-  static get properties(): PropertyDeclarations {
+  public constructor() {
-    return {
-      hass: {},
-      _lovelace: {},
-    };
-  }
-
-  protected constructor() {
     super();
     this._saving = false;
   }
@@ -168,5 +166,3 @@ declare global {
     "hui-dialog-edit-lovelace": HuiDialogEditLovelace;
   }
 }
-
-customElements.define("hui-dialog-edit-lovelace", HuiDialogEditLovelace);

src/panels/lovelace/editor/lovelace-editor/hui-lovelace-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 
@@ -21,13 +22,11 @@ declare global {
   }
 }
 
+@customElement("hui-lovelace-editor")
 export class HuiLovelaceEditor extends LitElement {
-  static get properties(): PropertyDeclarations {
+  @property() public hass?: HomeAssistant;
-    return { hass: {}, config: {} };
-  }
 
-  public hass?: HomeAssistant;
+  @property() public config?: LovelaceConfig;
-  public config?: LovelaceConfig;
 
   get _title(): string {
     if (!this.config) {
@@ -79,5 +78,3 @@ declare global {
     "hui-lovelace-editor": HuiLovelaceEditor;
   }
 }
-
-customElements.define("hui-lovelace-editor", HuiLovelaceEditor);

src/panels/lovelace/editor/lovelace-editor/show-edit-lovelace-dialog.ts

@@ -12,7 +12,7 @@ let registeredDialog = false;
 const dialogShowEvent = "show-edit-lovelace";
 const dialogTag = "hui-dialog-edit-lovelace";
 
-const registerEditLovelaceDialog = (element: HTMLElement) =>
+const registerEditLovelaceDialog = (element: HTMLElement): Event =>
   fireEvent(element, "register-dialog", {
     dialogShowEvent,
     dialogTag,
@@ -23,7 +23,7 @@ const registerEditLovelaceDialog = (element: HTMLElement) =>
 export const showEditLovelaceDialog = (
   element: HTMLElement,
   lovelace: Lovelace
-) => {
+): void => {
   if (!registeredDialog) {
     registeredDialog = true;
     registerEditLovelaceDialog(element);

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 
 import { HomeAssistant } from "../../../../types";
@@ -21,16 +22,11 @@ declare global {
   }
 }
 
+@customElement("hui-dialog-edit-view")
 export class HuiDialogEditView extends LitElement {
-  protected hass?: HomeAssistant;
+  @property() protected hass?: HomeAssistant;
-  private _params?: EditViewDialogParams;
 
-  static get properties(): PropertyDeclarations {
+  @property() private _params?: EditViewDialogParams;
-    return {
-      hass: {},
-      _params: {},
-    };
-  }
 
   public async showDialog(params: EditViewDialogParams): Promise<void> {
     this._params = params;
@@ -58,5 +54,3 @@ declare global {
     "hui-dialog-edit-view": HuiDialogEditView;
   }
 }
-
-customElements.define("hui-dialog-edit-view", HuiDialogEditView);

src/panels/lovelace/editor/view-editor/hui-edit-view.ts

@@ -2,9 +2,10 @@ import {
   html,
   css,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
   CSSResult,
+  customElement,
+  property,
 } from "lit-element";
 
 import "@polymer/paper-spinner/paper-spinner";
@@ -35,31 +36,27 @@ import { navigate } from "../../../../common/navigate";
 import { Lovelace } from "../../types";
 import { deleteView, addView, replaceView } from "../config-util";
 
+@customElement("hui-edit-view")
 export class HuiEditView extends LitElement {
-  public lovelace?: Lovelace;
+  @property() public lovelace?: Lovelace;
-  public viewIndex?: number;
+
-  public hass?: HomeAssistant;
+  @property() public viewIndex?: number;
-  private _config?: LovelaceViewConfig;
+
-  private _badges?: EntityConfig[];
+  @property() public hass?: HomeAssistant;
-  private _cards?: LovelaceCardConfig[];
+
-  private _saving: boolean;
+  @property() private _config?: LovelaceViewConfig;
+
+  @property() private _badges?: EntityConfig[];
+
+  @property() private _cards?: LovelaceCardConfig[];
+
+  @property() private _saving: boolean;
+
+  @property() private _curTab?: string;
+
   private _curTabIndex: number;
-  private _curTab?: string;
 
-  static get properties(): PropertyDeclarations {
+  public constructor() {
-    return {
-      hass: {},
-      lovelace: {},
-      viewIndex: {},
-      _config: {},
-      _badges: {},
-      _cards: {},
-      _saving: {},
-      _curTab: {},
-    };
-  }
-
-  protected constructor() {
     super();
     this._saving = false;
     this._curTabIndex = 0;
@@ -162,7 +159,7 @@ export class HuiEditView extends LitElement {
     `;
   }
 
-  private async _delete() {
+  private async _delete(): Promise<void> {
     if (this._cards && this._cards.length > 0) {
       alert(
         "You can't delete a view that has cards in it. Remove the cards first."
@@ -321,5 +318,3 @@ declare global {
     "hui-edit-view": HuiEditView;
   }
 }
-
-customElements.define("hui-edit-view", HuiEditView);

src/panels/lovelace/editor/view-editor/hui-view-editor.ts

@@ -1,8 +1,9 @@
 import {
   html,
   LitElement,
-  PropertyDeclarations,
   TemplateResult,
+  customElement,
+  property,
 } from "lit-element";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-toggle-button/paper-toggle-button";
@@ -23,10 +24,11 @@ declare global {
   }
 }
 
+@customElement("hui-view-editor")
 export class HuiViewEditor extends LitElement {
-  static get properties(): PropertyDeclarations {
+  @property() public hass?: HomeAssistant;
-    return { hass: {}, _config: {} };
+
-  }
+  @property() private _config?: LovelaceViewConfig;
 
   get _path(): string {
     if (!this._config) {
@@ -63,9 +65,6 @@ export class HuiViewEditor extends LitElement {
     return this._config.panel || false;
   }
 
-  public hass?: HomeAssistant;
-  private _config?: LovelaceViewConfig;
-
   set config(config: LovelaceViewConfig) {
     this._config = config;
   }
@@ -142,5 +141,3 @@ declare global {
     "hui-view-editor": HuiViewEditor;
   }
 }
-
-customElements.define("hui-view-editor", HuiViewEditor);

src/panels/lovelace/editor/view-editor/show-edit-view-dialog.ts

@@ -22,7 +22,7 @@ export interface EditViewDialogParams {
   viewIndex?: number;
 }
 
-const registerEditViewDialog = (element: HTMLElement) =>
+const registerEditViewDialog = (element: HTMLElement): Event =>
   fireEvent(element, "register-dialog", {
     dialogShowEvent,
     dialogTag,
@@ -33,7 +33,7 @@ const registerEditViewDialog = (element: HTMLElement) =>
 export const showEditViewDialog = (
   element: HTMLElement,
   editViewDialogParams: EditViewDialogParams
-) => {
+): void => {
   if (!registeredDialog) {
     registeredDialog = true;
     registerEditViewDialog(element);