1.0.54

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.51",
+  "version": "1.0.54",
   "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.51",
+  "version": "1.0.54",
   "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-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,8 +12,8 @@ export class WccFrame extends LitElement {
       <style>
         :host {
           border: 10px solid #ffaeaf;
-          background: #222;
           position: absolute;
+          background: ${this.goBright ? '#333': '#000'};
           left: 200px;
           right: 0px;
           top: 0px;
@@ -55,6 +55,16 @@ export class WccFrame extends LitElement {
           : html``}
           min-height: 100%;
           background:
+            ${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),
@@ -63,6 +73,7 @@ export class WccFrame extends LitElement {
               #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-properties.ts

@@ -62,6 +62,7 @@ export class WccProperties extends LitElement {
         }
         .viewportSelector,
         .themeSelector {
+          user-select: none;
           border-right: 1px solid #999;
         }
         .selectorButtons2 {

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);