1.0.53

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.50",
+  "version": "1.0.53",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1155,9 +1155,9 @@
       }
     },
     "@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==",
+      "version": "1.0.10",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-element/-/dees-element-1.0.10.tgz",
+      "integrity": "sha512-aYVFBnXOn5oLno4A9eAAtBg90xTTiGI7ys7tYJ1DlGVxPFi3HJcUAMZskm6KCVaTxyhcSl2RQHpp4UqeFDtCQw==",
       "requires": {
         "@designestate/dees-domtools": "^1.0.80",
         "@pushrocks/smartrx": "^2.0.19",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.50",
+  "version": "1.0.53",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",
@@ -14,7 +14,7 @@
   "license": "UNLICENSED",
   "dependencies": {
     "@designestate/dees-domtools": "^1.0.81",
-    "@designestate/dees-element": "^1.0.9",
+    "@designestate/dees-element": "^1.0.10",
     "@gitzone/tsrun": "^1.2.12",
     "@pushrocks/smartdelay": "^2.0.10",
     "@pushrocks/smartexpress": "^3.0.98",

ts_web/elements/wcc-dashboard.ts

@@ -102,7 +102,7 @@ export class WccDashboard extends LitElement {
             if (typeof this.selectedItem === 'function') {
               return this.selectedItem();
             } else {
-              console.error('The selected item looks strange:')
+              console.error('The selected item looks strange:');
               console.log(this.selectedItem);
             }
           } else if (this.selectedType === 'element' && this.selectedItem) {
@@ -138,22 +138,25 @@ export class WccDashboard extends LitElement {
 
   public async firstUpdated() {
     this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-    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];
+    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.selectedTheme === 'bright' ? 
-      domtoolsInstance.themeManager.goBright() :
-      domtoolsInstance.themeManager.goDark();
-    });
+    );
   }
 
   private updating = false;
@@ -178,9 +181,7 @@ export class WccDashboard extends LitElement {
 
   public buildUrl() {
     this.domtools.router.pushUrl(
-      `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
-        this.selectedTheme
-      }`
+      `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`
     );
   }
 }

ts_web/elements/wcc-frame.ts

@@ -1,9 +1,9 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
 @customElement('wcc-frame')
-export class WccFrame extends LitElement {
+export class WccFrame extends DeesElement {
   @property()
   public viewport: string;
 
@@ -12,7 +12,6 @@ export class WccFrame extends LitElement {
       <style>
         :host {
           border: 10px solid #ffaeaf;
-          background: #222;
           position: absolute;
           left: 200px;
           right: 0px;
@@ -55,14 +54,25 @@ export class WccFrame extends LitElement {
           : html``}
           min-height: 100%;
           background:
-            radial-gradient(#444444 3px, transparent 4px),
-            radial-gradient(#444444 3px, transparent 4px),
-            linear-gradient(#222222 4px, transparent 0),
-            linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
-            linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
-            #222222;
-            background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
-            background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
+            ${this.goBright ? `
+              radial-gradient(#CCCCCC 3px, transparent 4px),
+              radial-gradient(#CCCCCC 3px, transparent 4px),
+              linear-gradient(#eeeeee 4px, transparent 0),
+              linear-gradient(45deg, transparent 74px, transparent 75px, #CCCCCC 75px, #CCCCCC 76px, transparent 77px, transparent 109px),
+              linear-gradient(-45deg, transparent 75px, transparent 76px, #CCCCCC 76px, #CCCCCC 77px, transparent 78px, transparent 109px),
+              #eeeeee;
+              background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
+              background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
+            ` : `
+              radial-gradient(#444444 3px, transparent 4px),
+              radial-gradient(#444444 3px, transparent 4px),
+              linear-gradient(#222222 4px, transparent 0),
+              linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
+              linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
+              #222222;
+              background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
+              background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
+            `}
         }
       </style>
       <div class="viewport">

ts_web/elements/wcc-sidebar.ts

@@ -134,7 +134,7 @@ 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', elementName, item);