1.0.68

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.64",
+  "version": "1.0.68",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",
@@ -13,18 +13,18 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.102",
+    "@designestate/dees-domtools": "^1.0.114",
-    "@designestate/dees-element": "^1.0.26",
+    "@designestate/dees-element": "^1.0.35",
     "@gitzone/tsrun": "^1.2.18",
     "@pushrocks/smartdelay": "^2.0.13",
     "@pushrocks/smartexpress": "^3.0.108",
-    "lit-element": "^3.0.2",
+    "lit-element": "^3.2.0",
-    "lit-html": "^2.0.2",
+    "lit-html": "^2.2.0",
-    "typescript": "^4.5.2"
+    "typescript": "^4.6.2"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.28",
+    "@gitzone/tsbuild": "^2.1.29",
-    "@gitzone/tsbundle": "^1.0.88",
+    "@gitzone/tsbundle": "^1.0.89",
     "@gitzone/tswatch": "^1.0.56",
     "@pushrocks/projectinfo": "^4.0.5",
     "tslint": "^6.1.3",

test/elements/test-demoelement.ts

@@ -72,12 +72,21 @@ export class TestDemoelement extends DeesElement {
         color: ${cssManager.bdTheme('#000', '#fff')};
         background: ${cssManager.bdTheme('#fff', '#000')};
       }
+
+      @container wccToolsViewport size(min-width: 1px) {
+        .maincontainer,
+        .themeindicator {
+          border-radius: 50px;
+        }
+      }
+
       ${domtools.breakpoints.cssForPhablet(css`
         .maincontainer,
         .themeindicator {
           border-radius: 50px;
         }
       `)}
+      
       pre b {
         color: green;
       }

ts_web/elements/wcc-properties.ts

@@ -130,13 +130,14 @@ export class WccProperties extends LitElement {
 
         .warning {
           position: absolute;
-          background: #800000;
+          background: #222;
+          color: #CCC;
           top: 0px;
           bottom: 0px;
           left: 0px;
-          right: 0px;
+          right: 520px;
           text-align: center;
-          padding: 20px;
+          padding: 35px;
           font-size: 25px;
         }
       </style>
@@ -256,6 +257,7 @@ export class WccProperties extends LitElement {
       console.log(`Got Dees-Element for property evaluation.`);
       const anonItem: any = this.selectedItem;
       if (!anonItem) {
+        this.warning = 'no element selected';
         return;
       }
       console.log(anonItem.elementProperties);
@@ -268,12 +270,15 @@ export class WccProperties extends LitElement {
         }
       }
       if (!firstFoundInstantiatedElement) {
+        this.warning = `no first instantiated element found for >>${anonItem.name}<<`;
         return;
       }
       const classProperties: Map<string, any> = anonItem.elementProperties;
       if (!classProperties) {
+        this.warning = `selected element >>${anonItem.name}<< does not expose element properties`;
         return;
       }
+      this.warning = null;
       const propertyArray: TemplateResult[] = [];
       for (const key of classProperties.keys()) {
         if (key === 'goBright' || key === 'domtools') {
@@ -337,7 +342,8 @@ export class WccProperties extends LitElement {
       }
       this.propertyContent = propertyArray;
     } else {
-      console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`)
+      console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`);
+      this.warning = `You selected a page.`;
       return null;
     }
   }
@@ -353,9 +359,9 @@ export class WccProperties extends LitElement {
     this.dashboardRef.buildUrl();
   }
 
-  public async performUpdate() {
+  public async scheduleUpdate() {
     await this.createProperties();
-    super.performUpdate();
+    super.scheduleUpdate();
   }
 
   public selectViewport(viewport: TEnvironment) {