From 1b70b6e88c9c56c5eb72c423a49ca3b9c906aa35 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@home-assistant.io>
Date: Sun, 7 Oct 2018 11:07:02 +0200
Subject: [PATCH] Introduce Lit Element (#1738)

---
 package.json                                 |  1 +
 src/components/buttons/ha-call-api-button.js | 95 ++++++++++----------
 yarn.lock                                    | 10 +++
 3 files changed, 57 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index 6ebcc0df99..0512d859dc 100644
--- a/package.json
+++ b/package.json
@@ -34,6 +34,7 @@
     "@polymer/iron-media-query": "^3.0.1",
     "@polymer/iron-pages": "^3.0.1",
     "@polymer/iron-resizable-behavior": "^3.0.1",
+    "@polymer/lit-element": "^0.6.1",
     "@polymer/neon-animation": "^3.0.1",
     "@polymer/paper-button": "^3.0.1",
     "@polymer/paper-card": "^3.0.1",
diff --git a/src/components/buttons/ha-call-api-button.js b/src/components/buttons/ha-call-api-button.js
index 4601a1bf94..869c7b8669 100644
--- a/src/components/buttons/ha-call-api-button.js
+++ b/src/components/buttons/ha-call-api-button.js
@@ -1,70 +1,67 @@
-import { html } from '@polymer/polymer/lib/utils/html-tag.js';
-import { PolymerElement } from '@polymer/polymer/polymer-element.js';
-
+import { LitElement, html } from '@polymer/lit-element';
 
 import './ha-progress-button.js';
-import EventsMixin from '../../mixins/events-mixin.js';
+import fireEvent from '../../common/dom/fire_event.js';
 
-/*
- * @appliesMixin EventsMixin
- */
-class HaCallApiButton extends EventsMixin(PolymerElement) {
-  static get template() {
+class HaCallApiButton extends LitElement {
+  render() {
     return html`
-    <ha-progress-button id="progress" progress="[[progress]]" on-click="buttonTapped" disabled="[[disabled]]"><slot></slot></ha-progress-button>
-`;
+      <ha-progress-button
+        .progress="${this.progress}"
+        @click="${this._buttonTapped}"
+        ?disabled="${this.disabled}"
+      ><slot></slot></ha-progress-button>
+    `;
+  }
+
+  constructor() {
+    super();
+    this.method = 'POST';
+    this.data = {};
+    this.disabled = false;
+    this.progress = false;
+    // Can be removed once this is merged:
+    // https://github.com/Polymer/lit-element/pull/244
+    this._buttonTapped = this._buttonTapped.bind(this);
   }
 
   static get properties() {
     return {
-      hass: Object,
-
-      progress: {
-        type: Boolean,
-        value: false,
-      },
-
+      hass: { },
+      progress: Boolean,
       path: String,
-
-      method: {
-        type: String,
-        value: 'POST',
-      },
-
-      data: {
-        type: Object,
-        value: {},
-      },
-
-      disabled: {
-        type: Boolean,
-        value: false,
-      },
+      method: String,
+      data: { },
+      disabled: Boolean
     };
   }
 
-  buttonTapped() {
+  get progressButton() {
+    return this.renderRoot.querySelector('ha-progress-button');
+  }
+
+  async _buttonTapped() {
     this.progress = true;
     const eventData = {
       method: this.method,
       path: this.path,
-      data: this.data,
+      data: this.data
     };
 
-    this.hass.callApi(this.method, this.path, this.data)
-      .then((resp) => {
-        this.progress = false;
-        this.$.progress.actionSuccess();
-        eventData.success = true;
-        eventData.response = resp;
-      }, (resp) => {
-        this.progress = false;
-        this.$.progress.actionError();
-        eventData.success = false;
-        eventData.response = resp;
-      }).then(() => {
-        this.fire('hass-api-called', eventData);
-      });
+    try {
+      const resp = await this.hass.callApi(this.method, this.path, this.data);
+      this.progress = false;
+      this.progressButton.actionSuccess();
+      eventData.success = true;
+      eventData.response = resp;
+    } catch (err) {
+      this.progress = false;
+      this.progressButton.actionError();
+      eventData.success = false;
+      eventData.response = err;
+    }
+
+    fireEvent(this, 'hass-api-called', eventData);
   }
 }
 
diff --git a/yarn.lock b/yarn.lock
index b2a2f12f6e..b41e77010a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -835,6 +835,12 @@
     "@polymer/iron-meta" "^3.0.0-pre.26"
     "@polymer/polymer" "^3.0.0"
 
+"@polymer/lit-element@^0.6.1":
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/@polymer/lit-element/-/lit-element-0.6.1.tgz#56772f8fb0c6d3d73a20a6d17f3bc82ec648664b"
+  dependencies:
+    lit-html "^0.11.4"
+
 "@polymer/neon-animation@^3.0.0-pre.26", "@polymer/neon-animation@^3.0.1":
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/@polymer/neon-animation/-/neon-animation-3.0.1.tgz#6658e4b524abc057477772a7473292493d366c24"
@@ -7829,6 +7835,10 @@ liftoff@^2.1.0:
     rechoir "^0.6.2"
     resolve "^1.1.7"
 
+lit-html@^0.11.4:
+  version "0.11.4"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-0.11.4.tgz#fa397d2b2f2d0523ebc136e5a1699aa4e9346152"
+
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"