fix(core): update

ts_web/elements/wcc-dashboard.ts

@@ -24,6 +24,9 @@ export class WccDashboard extends LitElement {
   @property()
   public elements: { [key: string]: LitElement } = {};
 
+  @property()
+  public warning: string = null;
+
   constructor(elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) {
     super();
     if (elementsArg) {
@@ -52,7 +55,7 @@ export class WccDashboard extends LitElement {
       <wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
         this.selectedItem = eventArg.detail;
       }}></wcc-sidebar>
-      <wcc-properties .selectedItem=${this.selectedItem} .selectedInstance=${this.selectedInstance} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
+      <wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} .selectedInstance=${this.selectedInstance} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
       <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
         ${(() => {
           if (this.selectedItem instanceof TemplateResult) {
@@ -60,13 +63,18 @@ export class WccDashboard extends LitElement {
           } else if (this.selectedItem) {
             console.log(this.selectedItem);
             const anonItem: any = this.selectedItem;
-            if (anonItem.demo) {
-              return html`${anonItem.demo}`;
-            } else {
-              alert(`component does not expose a demo property.`);
+            if (!anonItem.demo) {
+              this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
+              return;
             }
+            if (!(typeof anonItem.demo === 'function')) {
+              this.setWarning(`component ${anonItem.name} has demo property, but it is not of type function`);
+              return;
+            }
+            this.setWarning(null);
+            return html`${anonItem.demo()}`;
           } else {
-
+            this.selectedItem = WccDefaultElement as any;
           }
         })()}
       </wcc-frame>
@@ -83,5 +91,13 @@ export class WccDashboard extends LitElement {
     }, 0);
   }
 
-
+  public setWarning(warningTextArg: string) {
+    if (this.warning !== warningTextArg) {
+      console.log(warningTextArg);
+      this.warning = warningTextArg;
+      setTimeout(() => {
+        super.performUpdate();
+      }, 0);
+    }
+  }
 }

ts_web/elements/wcc-defaultelement.ts

@@ -3,7 +3,7 @@ import { TemplateResult } from 'lit-html';
 
 @customElement('wcc-defaultelement')
 export class WccDefaultElement extends LitElement {
-  public static demo = html`<wcc-defaultelement></wcc-defaultelement>`;
+  public static demo = () => html`<wcc-defaultelement></wcc-defaultelement>`;
 
   @property()
   public footerText = `Lossless GmbH - 2018`;

ts_web/elements/wcc-properties.ts

@@ -19,6 +19,9 @@ export class WccProperties extends LitElement {
   @property()
   public selectedViewport = 'native';
 
+  @property()
+  public warning: string = null;
+
   public render(): TemplateResult {
     return html`
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
@@ -98,6 +101,18 @@ export class WccProperties extends LitElement {
           color: #333;
           background: #fff;
         }
+
+        .warning {
+          position: absolute;
+          background: #800000;
+          top: 0px;
+          bottom: 0px;
+          left: 0px;
+          right: 0px;
+          text-align: center;
+          padding: 20px;
+          font-size: 25px;
+        }
       </style>
       <div class="grid">
         <div class="properties">
@@ -167,6 +182,9 @@ ${(() => {
         </div>
         <div class="docs">Docs</div>
       </div>
+      ${this.warning ? html`<div class="warning">
+        ${this.warning}
+      </div>` : null}
     `;
   }