fix(core): update

test/elements/test-demoelement.ts

@@ -1,27 +1,38 @@
-import { LitElement, customElement, TemplateResult, html } from 'lit-element';
+import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
 @customElement('test-demoelement')
-export class TestDemoelement extends LitElement {
+export class TestDemoelement extends DeesElement {
   public static demo = () => html`<test-demoelement></test-demoelement>`;
 
   public render() {
     return html`
       <style>
-        .maincontainer {
+        .maincontainer, .themeindicator {
           display: block;
-          background: #fff;
           padding: 10px;
           border-radius: 10px;
+          margin-bottom: 20px;
+        }
+        .maincontainer {
+            color: #fff;
+            background: #000;
+        }
+        .themeindicator {
+          color: ${this.goBright ? '#000' : '#fff'};
+          background: ${this.goBright ? '#fff' : '#000'};
         }
         ${domtools.breakpoints.cssForPhablet(`
-          .maincontainer {
-            background: #000;
+          .maincontainer, .themeindicator {
+            border-radius: 50px;
           }
         `)}
       </style>
-      <div class="maincontainer">This is a demo element</div>
+      <div class="maincontainer"><slot>This is a demo element</slot></div>
+      <div class="themeindicator">
+        You have selected the ${this.goBright ? 'bright' : 'dark'} theme;
+      </div>
     `;
   }
 }

ts_web/elements/wcc-dashboard.ts

@@ -98,9 +98,14 @@ export class WccDashboard extends LitElement {
       ></wcc-properties>
       <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
         ${(() => {
-          if (this.selectedType === 'page') {
-            return this.selectedItem();
-          } else if (this.selectedItem) {
+          if (this.selectedType === 'page' && this.selectedItem) {
+            if (typeof this.selectedItem === 'function') {
+              return this.selectedItem();
+            } else {
+              console.error('The selected item looks strange:')
+              console.log(this.selectedItem);
+            }
+          } else if (this.selectedType === 'element' && this.selectedItem) {
             // console.log(this.selectedItem);
             const anonItem: any = this.selectedItem;
             if (!anonItem.demo) {
@@ -139,7 +144,7 @@ export class WccDashboard extends LitElement {
         this.selectedItem = this.elements[routeInfo.params.itemName];
       } else if (routeInfo.params.itemType === 'page') {
         this.selectedType = 'page';
-        this.selectedItem = this.pages[routeInfo.params.pageName];
+        this.selectedItem = this.pages[routeInfo.params.itemName];
       }
       const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
       domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
@@ -173,8 +178,7 @@ export class WccDashboard extends LitElement {
     this.domtools.router.pushUrl(
       `/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
         this.selectedTheme
-      }`,
-      0
+      }`
     );
   }
 }

ts_web/elements/wcc-properties.ts

@@ -130,6 +130,9 @@ export class WccProperties extends LitElement {
           ${(() => {
             if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
               const anonItem: any = this.selectedItem;
+              if (!anonItem._classProperties) {
+                return `You have selected a page!`;
+              }
               const classProperties: Map<string, any> = anonItem._classProperties;
               const returnArray: TemplateResult[] = [];
               for (const key of classProperties.keys()) {

ts_web/elements/wcc-sidebar.ts

@@ -10,7 +10,7 @@ export class WccSidebar extends LitElement {
   public websites: string[] = [];
 
   @property({ attribute: false })
-  public selectedItem: LitElement | () => TemplateResult;
+  public selectedItem: LitElement | (() => TemplateResult);
 
   @property({ attribute: false })
   public selectedType: TElementType;
@@ -92,10 +92,9 @@ export class WccSidebar extends LitElement {
         
       </style>
       <div class="heading">
-        lele-catalog
+        wcc-tools
       </div>
       <div class="subheading">
-        Lossless GmbH
       </div>
       <div class="menu">
         <h3>Live Websites</h3>
@@ -146,6 +145,8 @@ export class WccSidebar extends LitElement {
 
   public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
     console.log('selected item');
+    console.log(itemNameArg);
+    console.log(itemArg);
     this.selectedItem = itemArg;
     this.selectedType = typeArg;
     this.dispatchEvent(