Lint

src/components/ha-icon.ts

@@ -4,6 +4,7 @@ import "@polymer/iron-icon/iron-icon";
 // Not duplicate, this is for typing.
 // tslint:disable-next-line
 import { IronIconElement } from "@polymer/iron-icon/iron-icon";
+import { html } from "@polymer/polymer/lib/utils/html-tag.js";
 
 const ironIconClass = customElements.get("iron-icon") as Constructor<
   IronIconElement
@@ -12,7 +13,88 @@ const ironIconClass = customElements.get("iron-icon") as Constructor<
 let loaded = false;
 
 export class HaIcon extends ironIconClass {
-  private _iconsetName?: string;
+  public _template = html`
+    ${super._template}
+    <style>
+      :host([effect="rotate-45"]) {
+        -webkit-transform: rotate(45deg);
+        -ms-transform: rotate(45deg);
+        transform: rotate(45deg);
+      }
+      :host([effect="rotate-90"]) {
+        -webkit-transform: rotate(90deg);
+        -ms-transform: rotate(90deg);
+        transform: rotate(90deg);
+      }
+      :host([effect="rotate-135"]) {
+        -webkit-transform: rotate(135deg);
+        -ms-transform: rotate(135deg);
+        transform: rotate(135deg);
+      }
+      :host([effect="rotate-180"]) {
+        -webkit-transform: rotate(180deg);
+        -ms-transform: rotate(180deg);
+        transform: rotate(180deg);
+      }
+      :host([effect="rotate-225"]) {
+        -webkit-transform: rotate(225deg);
+        -ms-transform: rotate(225deg);
+        transform: rotate(225deg);
+      }
+      :host([effect="rotate-270"]) {
+        -webkit-transform: rotate(270deg);
+        -ms-transform: rotate(270deg);
+        transform: rotate(270deg);
+      }
+      :host([effect="rotate-315"]) {
+        -webkit-transform: rotate(315deg);
+        -ms-transform: rotate(315deg);
+        transform: rotate(315deg);
+      }
+
+      :host([effect="flip-h"]) {
+        -webkit-transform: scaleX(-1);
+        transform: scaleX(-1);
+        filter: FlipH;
+        -ms-filter: "FlipH";
+      }
+      :host([effect="flip-v"]) {
+        -webkit-transform: scaleY(-1);
+        transform: scaleY(-1);
+        filter: FlipV;
+        -ms-filter: "FlipV";
+      }
+
+      @-webkit-keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(359deg);
+          transform: rotate(359deg);
+        }
+      }
+      @keyframes spin {
+        0% {
+          -webkit-transform: rotate(0deg);
+          transform: rotate(0deg);
+        }
+        100% {
+          -webkit-transform: rotate(359deg);
+          transform: rotate(359deg);
+        }
+      }
+      :host([effect="spin"]) {
+        -webkit-animation: spin 2s infinite linear;
+        animation: spin 2s infinite linear;
+      }
+    </style>
+  `;
+
+  public _iconName?: string;
+  public _iconsetName?: string;
+  private _iconEffect?: string;
 
   public listen(
     node: EventTarget | null,
@@ -26,6 +108,21 @@ export class HaIcon extends ironIconClass {
       import(/* webpackChunkName: "mdi-icons" */ "../resources/mdi-icons");
     }
   }
+
+  public _iconChanged(icon) {
+    const parts = (icon || "").split(":");
+    if (parts.length === 3) {
+      this._iconEffect = parts.pop();
+    }
+    this._iconName = parts.pop();
+    this._iconsetName = parts.pop() || this._DEFAULT_ICONSET;
+    if (this._iconEffect) {
+      this.setAttribute("effect", this._iconEffect);
+    } else {
+      this.removeAttribute("effect");
+    }
+    this._updateIcon();
+  }
 }
 
 declare global {