1.0.63

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.59",
+  "version": "1.0.63",
   "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.96",
+    "@designestate/dees-domtools": "^1.0.102",
     "@designestate/dees-element": "^1.0.26",
-    "@gitzone/tsrun": "^1.2.17",
+    "@gitzone/tsrun": "^1.2.18",
     "@pushrocks/smartdelay": "^2.0.13",
-    "@pushrocks/smartexpress": "^3.0.106",
-    "lit-element": "^3.0.0",
-    "lit-html": "^2.0.0",
-    "typescript": "^4.4.3"
+    "@pushrocks/smartexpress": "^3.0.108",
+    "lit-element": "^3.0.2",
+    "lit-html": "^2.0.2",
+    "typescript": "^4.5.2"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.27",
-    "@gitzone/tsbundle": "^1.0.87",
+    "@gitzone/tsbuild": "^2.1.28",
+    "@gitzone/tsbundle": "^1.0.88",
     "@gitzone/tswatch": "^1.0.56",
     "@pushrocks/projectinfo": "^4.0.5",
     "tslint": "^6.1.3",

test/elements/test-demoelement.ts

@@ -4,6 +4,8 @@ import {
   TemplateResult,
   html,
   property,
+  css,
+  cssManager,
 } from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
@@ -18,6 +20,17 @@ enum ETestEnum {
 export class TestDemoelement extends DeesElement {
   public static demo = () => html`<test-demoelement>This is a slot text</test-demoelement>`;
 
+  @property()
+  public notTyped = 'hello';
+
+  @property({
+    type: String,
+  })
+  public typedAndNotInitizalized: string;
+
+  @property()
+  public notTypedAndNotInitizalized: string;
+
   @property({
     type: Boolean,
   })
@@ -38,10 +51,14 @@ export class TestDemoelement extends DeesElement {
   })
   public demoENum: ETestEnum = ETestEnum.first;
 
-  public render() {
-    return html`
-      <style>
-        .maincontainer, .themeindicator {
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    css`
+      .maincontainer,
+      .themeindicator {
         display: block;
         padding: 10px;
         border-radius: 10px;
@@ -52,18 +69,24 @@ export class TestDemoelement extends DeesElement {
         background: #000;
       }
       .themeindicator {
-          color: ${this.goBright ? '#000' : '#fff'};
-          background: ${this.goBright ? '#fff' : '#000'};
+        color: ${cssManager.bdTheme('#000', '#fff')};
+        background: ${cssManager.bdTheme('#fff', '#000')};
       }
-        ${domtools.breakpoints.cssForPhablet(`
-          .maincontainer, .themeindicator {
+      ${domtools.breakpoints.cssForPhablet(css`
+        .maincontainer,
+        .themeindicator {
           border-radius: 50px;
         }
       `)}
       pre b {
         color: green;
       }
-      </style>
+    `,
+  ];
+
+  public render() {
+    return html`
+      <style></style>
       <div class="maincontainer"><slot>This is a demo element</slot></div>
       <div class="themeindicator">
         You have selected the ${this.goBright ? 'bright' : 'dark'} theme.
@@ -72,7 +95,8 @@ export class TestDemoelement extends DeesElement {
           demoString is <b>"${this.demoString}"</b>
           demoNumber is <b>${this.demoNumber}</b>
           demoEnum is <b>"${this.demoENum}"</b>
-        </pre>
+        </pre
+        >
       </div>
     `;
   }

ts_web/elements/wcc-dashboard.ts

@@ -8,7 +8,7 @@ import './wcc-sidebar';
 import './wcc-properties';
 import { TTheme } from './wcc-properties';
 import { TElementType } from './wcc-sidebar';
-import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints';
+import { breakpoints } from '@designestate/dees-domtools';
 import { WccFrame } from './wcc-frame';
 
 @customElement('wcc-dashboard')
@@ -92,7 +92,7 @@ export class WccDashboard extends LitElement {
         .selectedTheme=${this.selectedTheme}
         @selectedViewport=${(eventArg) => {
           this.selectedViewport = eventArg.detail;
-          this.performUpdate();
+          this.scheduleUpdate();
         }}
         @selectedTheme=${(eventArg) => {
           this.selectedTheme = eventArg.detail;
@@ -133,7 +133,7 @@ export class WccDashboard extends LitElement {
       console.log(warningTextArg);
       this.warning = warningTextArg;
       setTimeout(() => {
-        super.performUpdate();
+        this.scheduleUpdate();
       }, 0);
     }
   }
@@ -145,7 +145,7 @@ export class WccDashboard extends LitElement {
       async (routeInfo) => {
         this.selectedType = routeInfo.params.itemType as TElementType;
         this.selectedItemName = routeInfo.params.itemName;
-        this.selectedViewport = routeInfo.params.viewport as TViewport;
+        this.selectedViewport = routeInfo.params.viewport as breakpoints.TViewport;
         this.selectedTheme = routeInfo.params.theme as TTheme;
         if (routeInfo.params.itemType === 'element') {
           this.selectedItem = this.elements[routeInfo.params.itemName];
@@ -153,7 +153,6 @@ export class WccDashboard extends LitElement {
           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();

ts_web/elements/wcc-frame.ts

@@ -49,6 +49,8 @@ export class WccFrame extends DeesElement {
         }
         
         .viewport {
+          container-type: inline-size;
+          container-name: wccToolsViewport;
           position: relative;
           ${this.viewport !== 'desktop'
           ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `

ts_web/elements/wcc-properties.ts

@@ -255,6 +255,9 @@ export class WccProperties extends LitElement {
     if (this.selectedItem && (this.selectedItem as any).demo) {
       console.log(`Got Dees-Element for property evaluation.`);
       const anonItem: any = this.selectedItem;
+      if (!anonItem) {
+        return;
+      }
       console.log(anonItem.elementProperties);
       const wccFrame = await this.dashboardRef.wccFrame;
       let selectedElement: HTMLElement;
@@ -265,6 +268,9 @@ export class WccProperties extends LitElement {
         }
       }
       const classProperties: Map<string, any> = anonItem.elementProperties;
+      if (!classProperties) {
+        return;
+      }
       const propertyArray: TemplateResult[] = [];
       for (const key of classProperties.keys()) {
         if (key === 'goBright' || key === 'domtools') {