Pick unused entities for lovelace cards (#3614)

* Pick unused entities for lovelace cards

* Type

* Table layout for unused entities

* properties

* remove unused import

* mwc-button

Need to find a way to set the color

* add icons to pick view dialog

* Comments

* Lint

* Restore unused entities for yaml mode

* Remove _elements

* decorators, types, comments

* flexbox + comments

* remove unused import

src/components/ha-fab.ts

@@ -0,0 +1,49 @@
+import {
+  classMap,
+  html,
+  customElement,
+  Constructor,
+} from "@material/mwc-base/base-element";
+import { ripple } from "@material/mwc-ripple/ripple-directive.js";
+
+import "@material/mwc-fab";
+// tslint:disable-next-line
+import { Fab } from "@material/mwc-fab";
+// tslint:disable-next-line
+const MwcFab = customElements.get("mwc-fab") as Constructor<Fab>;
+
+@customElement("ha-fab")
+export class HaFab extends MwcFab {
+  // We override the render method because we don't have an icon font and mwc-fab doesn't support our svg-icon sets.
+  // Based on version mwc-fab 0.8
+  protected render() {
+    const classes = {
+      "mdc-fab--mini": this.mini,
+      "mdc-fab--exited": this.exited,
+      "mdc-fab--extended": this.extended,
+    };
+    const showLabel = this.label !== "" && this.extended;
+    return html`
+      <button
+        .ripple="${ripple()}"
+        class="mdc-fab ${classMap(classes)}"
+        ?disabled="${this.disabled}"
+        aria-label="${this.label || this.icon}"
+      >
+        ${showLabel && this.showIconAtEnd ? this.label : ""}
+        ${this.icon
+          ? html`
+              <ha-icon .icon=${this.icon}></ha-icon>
+            `
+          : ""}
+        ${showLabel && !this.showIconAtEnd ? this.label : ""}
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-fab": HaFab;
+  }
+}