custom-card-helpers

src/card.ts

@@ -6,33 +6,38 @@ import {
   CSSResult,
   TemplateResult,
   css,
-} from 'lit-element';
+  PropertyValues
+} from "lit-element";
+import {
+  HomeAssistant,
+  handleClick,
+  longPress,
+  hasConfigOrEntityChanged
+} from "custom-card-helpers";
 
-// TODO Add your configuration elements here for type-checking
-interface BoilerplateConfig {
-  type: string;
-  name?: string;
-  show_warning?: boolean;
-  show_error?: boolean;
-}
+import { BoilerplateConfig } from "./types";
 
 // TODO Name your custom element
-@customElement('boilerplate-card')
+@customElement("boilerplate-card")
 class BoilerplateCard extends LitElement {
   // TODO Add any properities that should cause your element to re-render here
-  @property() public hass?: any;
+  @property() public hass?: HomeAssistant;
 
   @property() private _config?: BoilerplateConfig;
 
   public setConfig(config: BoilerplateConfig): void {
     // TODO Check for required fields and that they are of the proper format
     if (!config || config.show_error) {
-      throw new Error('Invalid configuration');
+      throw new Error("Invalid configuration");
     }
 
     this._config = config;
   }
 
+  protected shouldUpdate(changedProps: PropertyValues): boolean {
+    return hasConfigOrEntityChanged(this, changedProps);
+  }
+
   protected render(): TemplateResult | void {
     if (!this._config || !this.hass) {
       return html``;
@@ -48,10 +53,23 @@ class BoilerplateCard extends LitElement {
     }
 
     return html`
-      <ha-card .header=${this._config.name ? this._config.name : 'Boilerplate'}></ha-card>
+      <ha-card
+        .header=${this._config.name ? this._config.name : "Boilerplate"}
+        @ha-click="${this._handleTap}"
+        @ha-hold="${this._handleHold}"
+        .longpress="${longPress()}"
+      ></ha-card>
     `;
   }
 
+  private _handleTap(): void {
+    handleClick(this, this.hass!, this._config!, false);
+  }
+
+  private _handleHold(): void {
+    handleClick(this, this.hass!, this._config!, true);
+  }
+
   static get styles(): CSSResult {
     return css`
       .warning {

src/editor.ts

@@ -0,0 +1 @@
+// TODO

src/types.ts

@@ -0,0 +1,12 @@
+import { ActionConfig } from "custom-card-helpers";
+
+// TODO Add your configuration elements here for type-checking
+export interface BoilerplateConfig {
+  type: string;
+  name?: string;
+  show_warning?: boolean;
+  show_error?: boolean;
+  entity?: string;
+  tap_aciton?: ActionConfig;
+  hold_action?: ActionConfig;
+}