Updates to boilerplate

boilerplate-card.js

@@ -2302,21 +2302,41 @@ LitElement.finalized = true;
  */
 LitElement.render = render$1;
 
+// TODO Name your custom element
 let BoilerplateCard = class BoilerplateCard extends LitElement {
     setConfig(config) {
-        if (!this._config) ;
+        // TODO Check for required fields and that they are of the proper format
+        if (!config || config.show_error) {
+            throw new Error('Invalid configuration');
+        }
         this._config = config;
     }
     render() {
         if (!this._config || !this.hass) {
             return html ``;
         }
+        // TODO Check for stateObj or other necessary things and render a warning if missing
+        if (this._config.show_warning) {
             return html `
-      <div>boilerplate</div>
+        <ha-card>
+          <div class="warning">Show Warning</div>
+        </ha-card>`;
+        }
+        return html `
+      <ha-card
+        .header=${this._config.name ? this._config.name : 'Boilerplate'}
+      ></ha-card>
     `;
     }
     static get styles() {
-        return css ``;
+        return css `
+      .warning {
+        display: block;
+        color: black;
+        background-color: #fce588;
+        padding: 8px;
+      }
+    `;
     }
 };
 __decorate([

src/index.ts

@@ -8,19 +8,26 @@ import {
   css,
 } from 'lit-element';
 
+// TODO Add your configuration elements here for type-checking
 interface BoilerplateConfig {
   type: string;
+  name?: string;
+  show_warning?: boolean;
+  show_error?: boolean;
 }
 
+// TODO Name your custom element
 @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() private _config?: BoilerplateConfig;
 
   public setConfig(config: BoilerplateConfig): void {
-    if (!this._config) {
+    // TODO Check for required fields and that they are of the proper format
-      // TODO Log error
+    if (!config || config.show_error) {
+      throw new Error('Invalid configuration');
     }
 
     this._config = config;
@@ -31,12 +38,29 @@ class BoilerplateCard extends LitElement {
       return html``;
     }
 
+    // TODO Check for stateObj or other necessary things and render a warning if missing
+    if (this._config.show_warning) {
       return html`
-      <div>boilerplate</div>
+        <ha-card>
+          <div class="warning">Show Warning</div>
+        </ha-card>`;
+    }
+
+    return html`
+      <ha-card
+        .header=${this._config.name ? this._config.name : 'Boilerplate'}
+      ></ha-card>
     `;
   }
 
   static get styles(): CSSResult {
-    return css``;
+    return css`
+      .warning {
+        display: block;
+        color: black;
+        background-color: #fce588;
+        padding: 8px;
+      }
+    `;
   }
 }