Consolidate button

gallery/src/demos/demo-hui-entity-button-card.ts → gallery/src/demos/demo-hui-button-card.ts

@@ -15,60 +15,55 @@ const CONFIGS = [
   {
     heading: "Basic example",
     config: `
-- type: entity-button
+- type: button
   entity: light.bed_light
     `,
   },
   {
     heading: "With Name",
     config: `
-- type: entity-button
-  name: Bedroom
+- type: button
+  title: Bedroom
   entity: light.bed_light
     `,
   },
   {
     heading: "With Icon",
     config: `
-- type: entity-button
+- type: button
   entity: light.bed_light
   icon: mdi:hotel
     `,
   },
-  {
-    heading: "Without State",
-    config: `
-- type: entity-button
-  entity: light.bed_light
-  show_state: false
-    `,
-  },
   {
     heading: "Custom Tap Action (toggle)",
     config: `
-- type: entity-button
+- type: button
   entity: light.bed_light
-  tap_action: toggle
+  tap_action:
+    action: toggle
     `,
   },
   {
     heading: "Running Service",
     config: `
-- type: entity-button
+- type: button
   entity: light.bed_light
-  service: light.toggle
+  tap_action:
+    type: call-service
+    service: light.toggle
     `,
   },
   {
     heading: "Invalid Entity",
     config: `
-- type: entity-button
+- type: button
   entity: sensor.invalid_entity
     `,
   },
 ];
 
-class DemoEntityButtonEntity extends PolymerElement {
+class DemoButtonCard extends PolymerElement {
   static get template() {
     return html`
       <demo-cards
@@ -96,4 +91,4 @@ class DemoEntityButtonEntity extends PolymerElement {
   }
 }
 
-customElements.define("demo-hui-entity-button-card", DemoEntityButtonEntity);
+customElements.define("demo-hui-button-card", DemoButtonCard);

gallery/src/demos/demo-hui-picture-elements-card.ts

@@ -34,15 +34,17 @@ const CONFIGS = [
 - type: picture-elements
   image: /images/floorplan.png
   elements:
-    - type: service-button
+    - type: button
       title: Lights Off
       style:
         top: 97%
         left: 90%
         padding: 0px
-      service: light.turn_off
-      service_data:
-        entity_id: group.all_lights
+      tap_action:
+        type: call-service
+        service: light.turn_off
+        service_data:
+          entity_id: group.all_lights
     - type: icon
       icon: mdi:cctv
       entity: camera.demo_camera

src/panels/lovelace/cards/hui-button-card.ts

@@ -0,0 +1,73 @@
+import { html, LitElement, PropertyDeclarations } from "@polymer/lit-element";
+import { TemplateResult } from "lit-html";
+
+import "../../../components/ha-card";
+
+import createHuiElement from "../common/create-hui-element";
+import { HomeAssistant } from "../../../types";
+import { hassLocalizeLitMixin } from "../../../mixins/lit-localize-mixin";
+import { LovelaceCard } from "../types";
+import { LovelaceCardConfig, ActionConfig } from "../../../data/lovelace";
+import { LovelaceElement } from "../elements/types";
+
+interface Config extends LovelaceCardConfig {
+  entity: string;
+  title?: string;
+  icon?: string;
+  theme?: string;
+  tap_action?: ActionConfig;
+  hold_action?: ActionConfig;
+}
+
+class HuiButtonCard extends hassLocalizeLitMixin(LitElement)
+  implements LovelaceCard {
+  private _hass?: HomeAssistant;
+  private _config?: Config;
+
+  static get properties(): PropertyDeclarations {
+    return {
+      hass: {},
+      _config: {},
+    };
+  }
+
+  set hass(hass: HomeAssistant) {
+    this._hass = hass;
+    for (const el of this.shadowRoot!.querySelectorAll("hui-button-element")) {
+      const element = el as LovelaceElement;
+      element.hass = this._hass;
+    }
+  }
+
+  public getCardSize(): number {
+    return 2;
+  }
+
+  public setConfig(config: Config): void {
+    this._config = { theme: "default", ...config };
+  }
+
+  protected render(): TemplateResult {
+    if (!this._config || !this._hass) {
+      return html``;
+    }
+
+    const element = createHuiElement({
+      type: "hui-button-element",
+      ...this._config,
+    }) as LovelaceElement;
+    element.hass = this._hass;
+
+    return html`
+      <ha-card> ${element} </ha-card>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "hui-button-card": HuiButtonCard;
+  }
+}
+
+customElements.define("hui-button-card", HuiButtonCard);

src/panels/lovelace/common/create-card-element.js

@@ -1,9 +1,9 @@
 import { fireEvent } from "../../../common/dom/fire_event";
 
 import "../cards/hui-alarm-panel-card";
+import "../cards/hui-button-card";
 import "../cards/hui-conditional-card";
 import "../cards/hui-entities-card";
-import "../cards/hui-entity-button-card";
 import "../cards/hui-entity-filter-card";
 import "../cards/hui-error-card";
 import "../cards/hui-glance-card";
@@ -30,9 +30,9 @@ import createErrorCardConfig from "./create-error-card-config";
 
 const CARD_TYPES = new Set([
   "alarm-panel",
+  "button",
   "conditional",
   "entities",
-  "entity-button",
   "entity-filter",
   "error",
   "gauge",

src/panels/lovelace/common/create-hui-element.js

@@ -1,6 +1,6 @@
+import "../elements/hui-button-element";
 import "../elements/hui-icon-element";
 import "../elements/hui-image-element";
-import "../elements/hui-service-button-element";
 import "../elements/hui-state-badge-element";
 import "../elements/hui-state-icon-element";
 import "../elements/hui-state-label-element";
@@ -10,9 +10,9 @@ import createErrorCardConfig from "./create-error-card-config";
 
 const CUSTOM_TYPE_PREFIX = "custom:";
 const ELEMENT_TYPES = new Set([
+  "button",
   "icon",
   "image",
-  "service-button",
   "state-badge",
   "state-icon",
   "state-label",