add UI editor

src/boilerplate-card.ts

@@ -5,15 +5,19 @@ import {
   hasAction,
   ActionHandlerEvent,
   handleAction,
+  LovelaceCardEditor,
+  getLovelace,
 } from 'custom-card-helpers';
 
-import { BoilerplateConfig } from './types';
+import './editor';
+
+import { BoilerplateCardConfig } from './types';
 import { actionHandler } from './action-handler-directive';
 import { CARD_VERSION } from './const';
 
 /* eslint no-console: 0 */
 console.info(
-  `%c  BOILERPLATE-CARD     \n%c  Version ${CARD_VERSION}     `,
+  `%c  BOILERPLATE-CARD \n%c  Version ${CARD_VERSION}    `,
   'color: orange; font-weight: bold; background: black',
   'color: white; font-weight: bold; background: dimgray',
 );
@@ -21,16 +25,28 @@ console.info(
 // TODO Name your custom element
 @customElement('boilerplate-card')
 export class BoilerplateCard extends LitElement {
+  public static async getConfigElement(): Promise<LovelaceCardEditor> {
+    return document.createElement('boilerplate-card-editor') as LovelaceCardEditor;
+  }
+
+  public static getStubConfig(): object {
+    return {};
+  }
+
   // TODO Add any properities that should cause your element to re-render here
   @property() public hass?: HomeAssistant;
-  @property() private _config?: BoilerplateConfig;
+  @property() private _config?: BoilerplateCardConfig;
 
-  public setConfig(config: BoilerplateConfig): void {
+  public setConfig(config: BoilerplateCardConfig): void {
     // TODO Check for required fields and that they are of the proper format
     if (!config || config.show_error) {
       throw new Error('Invalid configuration');
     }
 
+    if (config.test_gui) {
+      getLovelace().setEditMode(true);
+    }
+
     this._config = {
       name: 'Boilerplate',
       ...config,
@@ -64,6 +80,8 @@ export class BoilerplateCard extends LitElement {
           hasDoubleTap: hasAction(this._config.double_tap_action),
           repeat: this._config.hold_action ? this._config.hold_action.repeat : undefined,
         })}
+        tabindex="0"
+        aria-label=${`Boilerplate: ${this._config.entity}`}
       ></ha-card>
     `;
   }