1.0.52

html/index.ts

@@ -1,10 +1,10 @@
 // dees tools
-import * as deesWccTools from '@designestate/dees-wcctools';
+import * as deesWccTools from '../ts_web';
 import * as deesDomTools from '@designestate/dees-domtools';
 
 // elements and pages
-import * as elements from '../ts_web/elements';
-import * as pages from '../ts_web/pages';
+import * as elements from '../test/elements';
+import * as pages from '../test/pages';
 
 deesWccTools.setupWccTools(elements as any, pages);
 deesDomTools.elementBasic.setup();

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.42",
+  "version": "1.0.52",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1135,17 +1135,18 @@
       }
     },
     "@designestate/dees-domtools": {
-      "version": "1.0.74",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.74.tgz",
-      "integrity": "sha512-iqo6EyKpbHyKPgYA88omFzuBKQ47iGmsR92PbL/wsSxGvqtS/CuaShhrQN1+I6569eh9iqMNltwf9kRm29AGng==",
+      "version": "1.0.81",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.81.tgz",
+      "integrity": "sha512-Djov5qo1zeM9uoBobApNTmI6CkXPm7ozx6m22EziAKMxcpa2Sa0UuLqpuUNmHlgm7I74MC3x6/gVCzkX3HNkMQ==",
       "requires": {
         "@apiglobal/typedrequest": "^1.0.54",
         "@designestate/dees-comms": "^1.0.7",
         "@pushrocks/lik": "^4.0.20",
         "@pushrocks/smartdelay": "^2.0.10",
         "@pushrocks/smartpromise": "^3.1.3",
-        "@pushrocks/smartrouter": "^1.0.4",
-        "@pushrocks/smartstate": "^1.0.17",
+        "@pushrocks/smartrouter": "^1.0.6",
+        "@pushrocks/smartrx": "^2.0.19",
+        "@pushrocks/smartstate": "^1.0.21",
         "@pushrocks/webrequest": "^2.0.13",
         "@pushrocks/websetup": "^3.0.11",
         "@pushrocks/webstore": "^1.0.16",
@@ -1153,6 +1154,16 @@
         "sweet-scroll": "^4.0.0"
       }
     },
+    "@designestate/dees-element": {
+      "version": "1.0.9",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-element/-/dees-element-1.0.9.tgz",
+      "integrity": "sha512-zea4bTPbCSoJFDDX24L4kK5FdC2snYODhA+fSJ70D9dh1um8mGeoJKZL8D6jbGPOnmHT//cML2vgNBGvs8UvIw==",
+      "requires": {
+        "@designestate/dees-domtools": "^1.0.80",
+        "@pushrocks/smartrx": "^2.0.19",
+        "lit-element": "^2.4.0"
+      }
+    },
     "@gitzone/tsbuild": {
       "version": "2.1.25",
       "resolved": "https://verdaccio.lossless.one/@gitzone%2ftsbuild/-/tsbuild-2.1.25.tgz",
@@ -1751,13 +1762,13 @@
       }
     },
     "@pushrocks/smartexpress": {
-      "version": "3.0.97",
-      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartexpress/-/smartexpress-3.0.97.tgz",
-      "integrity": "sha512-mg7sAanDRpDgUGvUNY3fvaG8RWDN45JQIiv7d71O5Li8MACOpEGThJ05400RzHZ51EgXWwAUstikXsgN+iXUNg==",
+      "version": "3.0.98",
+      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartexpress/-/smartexpress-3.0.98.tgz",
+      "integrity": "sha512-GQNeIZIVEMkTaH0WAkLxoeIax1KbDclXNpOrOHe9329YxgNSz+3KflxdhgcTvXnTz8QniL3VgvC+d+FbWLxg7g==",
       "requires": {
         "@apiglobal/typedrequest": "^1.0.53",
-        "@pushrocks/lik": "^4.0.17",
-        "@pushrocks/smartfeed": "^1.0.9",
+        "@pushrocks/lik": "^4.0.20",
+        "@pushrocks/smartfeed": "^1.0.10",
         "@pushrocks/smartfile": "^8.0.8",
         "@pushrocks/smartmanifest": "^1.0.8",
         "@pushrocks/smartmime": "^1.0.3",
@@ -1840,9 +1851,9 @@
       }
     },
     "@pushrocks/smartfeed": {
-      "version": "1.0.9",
-      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartfeed/-/smartfeed-1.0.9.tgz",
-      "integrity": "sha512-ntkvG/uGw8X7NO93LRuCAH7FkTVSRih1gLM8z/gilIQh6L5pMX9plnlx9w8RvspKgU4YMfl2Lw0kXUXzr79Cwg==",
+      "version": "1.0.10",
+      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartfeed/-/smartfeed-1.0.10.tgz",
+      "integrity": "sha512-vu9UUQcw0UT0wblb/y0RbYtcp9ty9M4iRfqsv7utAWI9MRer4HcufWZO9M05oRrpxsGmGMi+W5a3DHZ6XhcmNA==",
       "requires": {
         "@tsclass/tsclass": "^3.0.29",
         "feed": "^4.2.1",
@@ -2178,9 +2189,9 @@
       }
     },
     "@pushrocks/smartrouter": {
-      "version": "1.0.4",
-      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartrouter/-/smartrouter-1.0.4.tgz",
-      "integrity": "sha512-6ahtHvZvwH/IQh7EtachXJkHxfQZe3i/TqCxmzFdhppDTWek+v8E/fpHit0av/568tLmC6Jc2B+WHPge6whVhg==",
+      "version": "1.0.7",
+      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartrouter/-/smartrouter-1.0.7.tgz",
+      "integrity": "sha512-ns4ye4uyzjpFUDr/vciOZog4y5QDsFBxwnYmXkSMxCA7hwiL0Fn64lvCexjez05t6Gz54ge5yflWSvyv63X0kA==",
       "requires": {
         "path-to-regexp": "^6.1.0"
       }
@@ -2239,14 +2250,14 @@
       }
     },
     "@pushrocks/smartstate": {
-      "version": "1.0.17",
-      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartstate/-/smartstate-1.0.17.tgz",
-      "integrity": "sha512-lzcN6zeGXdDxG67cJPSgC2Of0Up7iQf7hKI0KMAxricYCQp514DJYdfrv82SAEoTqB4eG4bOVqq5M9IYkvEfZw==",
+      "version": "1.0.21",
+      "resolved": "https://verdaccio.lossless.one/@pushrocks%2fsmartstate/-/smartstate-1.0.21.tgz",
+      "integrity": "sha512-uyrnTrBoIP6Ka3pYAMZFZVZ4AOgFSTPgM5sURWMNogC5Fncx1A7PuDL5nE1oRJIZOl5U/kH3vq+/81gmPn4QbA==",
       "requires": {
-        "@pushrocks/lik": "^4.0.12",
-        "@pushrocks/smartpromise": "^3.0.6",
-        "@pushrocks/smartrx": "^2.0.15",
-        "rxjs": "^6.5.5"
+        "@pushrocks/lik": "^4.0.20",
+        "@pushrocks/smartpromise": "^3.1.3",
+        "@pushrocks/smartrx": "^2.0.19",
+        "rxjs": "^6.6.3"
       }
     },
     "@pushrocks/smartstring": {
@@ -5195,9 +5206,9 @@
       "dev": true
     },
     "fast-xml-parser": {
-      "version": "3.17.4",
-      "resolved": "https://verdaccio.lossless.one/fast-xml-parser/-/fast-xml-parser-3.17.4.tgz",
-      "integrity": "sha512-qudnQuyYBgnvzf5Lj/yxMcf4L9NcVWihXJg7CiU1L+oUCq8MUnFEfH2/nXR/W5uq+yvUN1h7z6s7vs2v1WkL1A=="
+      "version": "3.17.5",
+      "resolved": "https://verdaccio.lossless.one/fast-xml-parser/-/fast-xml-parser-3.17.5.tgz",
+      "integrity": "sha512-lEvThd1Xq+CCylf1n+05bUZCDZjTufaaaqpxM3JZ+4iDqtlG+d/oKgtMmg9GEMOuzBgUoalIzFOaClht9YiGJQ=="
     },
     "fastparse": {
       "version": "1.1.2",
@@ -6330,9 +6341,9 @@
       "dev": true
     },
     "idb": {
-      "version": "5.0.7",
-      "resolved": "https://verdaccio.lossless.one/idb/-/idb-5.0.7.tgz",
-      "integrity": "sha512-tXkkEtzOEolCKNLpxEvE5ctPqUhgTEi+wPWVWIWavl/Z0/NjSJx0o/79z4/etJWpEpVjhbQNZ7fvmp/UFv/Yog=="
+      "version": "5.0.8",
+      "resolved": "https://verdaccio.lossless.one/idb/-/idb-5.0.8.tgz",
+      "integrity": "sha512-K9xInRkVbT3ZsYimD2KVj6B4E93IBvOjEQTryu99WuuN7G+7x3SzA79+yubbX0QRN9V64Gi+L+ulG5QYTVydOg=="
     },
     "ieee754": {
       "version": "1.2.1",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.42",
+  "version": "1.0.52",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",
@@ -13,10 +13,11 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.74",
+    "@designestate/dees-domtools": "^1.0.81",
+    "@designestate/dees-element": "^1.0.9",
     "@gitzone/tsrun": "^1.2.12",
     "@pushrocks/smartdelay": "^2.0.10",
-    "@pushrocks/smartexpress": "^3.0.97",
+    "@pushrocks/smartexpress": "^3.0.98",
     "lit-element": "^2.4.0",
     "lit-html": "^1.3.0",
     "typescript": "^4.1.2"

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

@@ -20,7 +20,10 @@ export class WccDashboard extends LitElement {
   public selectedType: TElementType;
 
   @property()
-  public selectedItem: TemplateResult | LitElement;
+  public selectedItemName: string;
+
+  @property()
+  public selectedItem: (() => TemplateResult) | LitElement;
 
   @property()
   public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
@@ -29,7 +32,7 @@ export class WccDashboard extends LitElement {
   public selectedTheme: TTheme = 'dark';
 
   @property()
-  public pages: { [key: string]: TemplateResult } = {};
+  public pages: { [key: string]: () => TemplateResult } = {};
 
   @property()
   public elements: { [key: string]: LitElement } = {};
@@ -39,7 +42,7 @@ export class WccDashboard extends LitElement {
 
   constructor(
     elementsArg?: { [key: string]: LitElement },
-    pagesArg?: { [key: string]: TemplateResult }
+    pagesArg?: { [key: string]: () => TemplateResult }
   ) {
     super();
     if (elementsArg) {
@@ -56,7 +59,6 @@ export class WccDashboard extends LitElement {
   public render(): TemplateResult {
     return html`
       <style>
-        @import url('https://fonts.googleapis.com/css?family=Roboto');
         :host {
           font-family: 'Roboto', sans-serif;
           background: #fcfcfc;
@@ -70,12 +72,15 @@ export class WccDashboard extends LitElement {
       <wcc-sidebar
         .dashboardRef=${this}
         .selectedItem=${this.selectedItem}
-        @selectedItem=${(eventArg) => {
-          this.selectedItem = eventArg.detail;
-        }}
         @selectedType=${(eventArg) => {
           this.selectedType = eventArg.detail;
         }}
+        @selectedItemName=${(eventArg) => {
+          this.selectedItemName = eventArg.detail;
+        }}
+        @selectedItem=${(eventArg) => {
+          this.selectedItem = eventArg.detail;
+        }}
       ></wcc-sidebar>
       <wcc-properties
         .dashboardRef=${this}
@@ -93,9 +98,14 @@ export class WccDashboard extends LitElement {
       ></wcc-properties>
       <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
         ${(() => {
-          if (this.selectedItem instanceof TemplateResult) {
-            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) {
@@ -128,20 +138,25 @@ export class WccDashboard extends LitElement {
 
   public async firstUpdated() {
     this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-    this.domtools.router.on('/:itemType/:itemName/:viewport/:theme', async (routeInfo) => {
-      if (routeInfo.params.itemType === 'element') {
-        this.selectedType = 'element';
-        this.selectedItem = this.elements[routeInfo.params.itemName];
-      } else if (routeInfo.params.itemType === 'page') {
-        this.selectedType = 'page';
-        this.selectedItem = this.pages[routeInfo.params.pageName];
+    this.domtools.router.on(
+      '/wcctools-route/:itemType/:itemName/:viewport/:theme',
+      async (routeInfo) => {
+        this.selectedType = routeInfo.params.itemType as TElementType;
+        this.selectedItemName = routeInfo.params.itemName;
+        this.selectedViewport = routeInfo.params.viewport as TViewport;
+        this.selectedTheme = routeInfo.params.theme as TTheme;
+        if (routeInfo.params.itemType === 'element') {
+          this.selectedItem = this.elements[routeInfo.params.itemName];
+        } else if (routeInfo.params.itemType === 'page') {
+          this.selectedItem = this.pages[routeInfo.params.itemName];
+        }
+        const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
+        domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
+        this.selectedTheme === 'bright'
+          ? domtoolsInstance.themeManager.goBright()
+          : domtoolsInstance.themeManager.goDark();
       }
-      const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
-      domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
-      this.selectedViewport = routeInfo.params.viewport as TViewport;
-      this.selectedTheme = routeInfo.params.theme as TTheme;
-      domtoolsInstance.themeManager.goBrightBoolean = this.selectedTheme === 'bright';
-    });
+    );
   }
 
   private updating = false;
@@ -166,10 +181,7 @@ export class WccDashboard extends LitElement {
 
   public buildUrl() {
     this.domtools.router.pushUrl(
-      `/${this.selectedType}/${(this.selectedItem as any).name}/${this.selectedViewport}/${
-        this.selectedTheme
-      }`,
-      0
+      `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`
     );
   }
 }

ts_web/elements/wcc-defaultelement.ts

@@ -16,7 +16,6 @@ export class WccDefaultElement extends LitElement {
   public render(): TemplateResult {
     return html`
       <style>
-        @import url('https://fonts.googleapis.com/css?family=Roboto');
         :host {
           font-family: 'Roboto', sans-serif;
           background: #333;

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()) {
@@ -150,7 +153,7 @@ export class WccProperties extends LitElement {
                 this.selectTheme('dark');
               }}
             >
-              Dark<br /><i class="material-icons">nights_stay</i>
+              Dark<br /><i class="material-icons">brightness_3</i>
             </div>
             <div
               class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"

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;
@@ -41,9 +41,15 @@ export class WccSidebar extends LitElement {
 
         .heading {
           font-size: 24px;
-          text-align: center;
+          text-align: center;        
           margin: 20px 5px 5px 5px;
         }
+
+        .heading a {
+          text-decoration: none;
+          color: #fff;
+        }
+
         .subheading {
           text-align: center;
         }
@@ -92,10 +98,10 @@ export class WccSidebar extends LitElement {
         
       </style>
       <div class="heading">
-        lele-catalog
+        <a href="https://gitlab.com/designestate/dees-wcctools" target="_blank">wcctools</a>
       </div>
       <div class="subheading">
-        Lossless GmbH
+        by Lossless GmbH
       </div>
       <div class="menu">
         <h3>Live Websites</h3>
@@ -112,7 +118,7 @@ export class WccSidebar extends LitElement {
                 class="selectOption ${this.selectedItem === item ? 'selected' : null}"
                 @click=${async () => {
                   const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                  this.selectItem('page', item);
+                  this.selectItem('page', pageName, item);
                 }}
               >
                 <i class="material-icons">insert_drive_file</i>
@@ -128,10 +134,10 @@ export class WccSidebar extends LitElement {
             const item = this.dashboardRef.elements[elementName];
             return html`
               <div
-                class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
+                class="selectOption ${this.selectedItem === item ? 'selected' : null}"
                 @click=${async () => {
                   const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                  this.selectItem('element', item);
+                  this.selectItem('element', elementName, item);
                 }}
               >
                 <i class="material-icons">featured_video</i>
@@ -144,20 +150,28 @@ export class WccSidebar extends LitElement {
     `;
   }
 
-  public selectItem(typeArg: TElementType, itemArg: TemplateResult | 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(
-      new CustomEvent('selectedItem', {
-        detail: itemArg
-      })
-    );
     this.dispatchEvent(
       new CustomEvent('selectedType', {
         detail: typeArg
       })
     );
+    this.dispatchEvent(
+      new CustomEvent('selectedItemName', {
+        detail: itemNameArg
+      })
+    );
+    this.dispatchEvent(
+      new CustomEvent('selectedItem', {
+        detail: itemArg
+      })
+    );
+    
     this.dashboardRef.buildUrl();
   }
 }

ts_web/index.ts

@@ -1,7 +1,7 @@
 import { WccDashboard } from './elements/wcc-dashboard';
 import { LitElement, TemplateResult } from 'lit-element';
 
-const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) => {
+const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => {
   let hasRun = false;
   const runWccToolsSetup = async () => {
     if (document.readyState === 'complete' && !hasRun) {