1.0.60

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.56",
+  "version": "1.0.60",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",
@@ -13,19 +13,19 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.87",
+    "@designestate/dees-domtools": "^1.0.102",
-    "@designestate/dees-element": "^1.0.19",
+    "@designestate/dees-element": "^1.0.26",
-    "@gitzone/tsrun": "^1.2.12",
+    "@gitzone/tsrun": "^1.2.18",
-    "@pushrocks/smartdelay": "^2.0.10",
+    "@pushrocks/smartdelay": "^2.0.13",
-    "@pushrocks/smartexpress": "^3.0.100",
+    "@pushrocks/smartexpress": "^3.0.108",
-    "lit-element": "^2.4.0",
+    "lit-element": "^3.0.2",
-    "lit-html": "^1.3.0",
+    "lit-html": "^2.0.2",
-    "typescript": "^4.2.3"
+    "typescript": "^4.5.2"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
+    "@gitzone/tsbuild": "^2.1.28",
-    "@gitzone/tsbundle": "^1.0.80",
+    "@gitzone/tsbundle": "^1.0.88",
-    "@gitzone/tswatch": "^1.0.52",
+    "@gitzone/tswatch": "^1.0.56",
     "@pushrocks/projectinfo": "^4.0.5",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.17.0"

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';
@@ -16,7 +18,7 @@ enum ETestEnum {
 
 @customElement('test-demoelement')
 export class TestDemoelement extends DeesElement {
-  public static demo = () => html`<test-demoelement></test-demoelement>`;
+  public static demo = () => html`<test-demoelement>This is a slot text</test-demoelement>`;
 
   @property({
     type: Boolean,
@@ -38,10 +40,14 @@ export class TestDemoelement extends DeesElement {
   })
   public demoENum: ETestEnum = ETestEnum.first;
 
-  public render() {
+  constructor() {
-    return html`
+    super();
-      <style>
+  }
-        .maincontainer, .themeindicator {
+
+  public static styles = [
+    css`
+      .maincontainer,
+      .themeindicator {
         display: block;
         padding: 10px;
         border-radius: 10px;
@@ -52,18 +58,24 @@ export class TestDemoelement extends DeesElement {
         background: #000;
       }
       .themeindicator {
-          color: ${this.goBright ? '#000' : '#fff'};
+        color: ${cssManager.bdTheme('#000', '#fff')};
-          background: ${this.goBright ? '#fff' : '#000'};
+        background: ${cssManager.bdTheme('#fff', '#000')};
       }
-        ${domtools.breakpoints.cssForPhablet(`
+      ${domtools.breakpoints.cssForPhablet(css`
-          .maincontainer, .themeindicator {
+        .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 +84,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

@@ -2,8 +2,6 @@ import { LitElement, property, html, customElement, TemplateResult, queryAsync }
 
 import * as plugins from '../wcctools.plugins';
 
-import { WccDefaultElement } from './wcc-defaultelement';
-
 // wcc tools
 import './wcc-frame';
 import './wcc-sidebar';
@@ -94,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;
@@ -135,7 +133,7 @@ export class WccDashboard extends LitElement {
       console.log(warningTextArg);
       this.warning = warningTextArg;
       setTimeout(() => {
-        super.performUpdate();
+        this.scheduleUpdate();
       }, 0);
     }
   }

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

@@ -1,11 +1,4 @@
-import {
+import { LitElement, property, html, customElement, TemplateResult, state } from 'lit-element';
-  LitElement,
-  property,
-  html,
-  customElement,
-  TemplateResult,
-  internalProperty,
-} from 'lit-element';
 import { WccDashboard } from './wcc-dashboard';
 
 export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
@@ -25,7 +18,7 @@ export class WccProperties extends LitElement {
   dashboardRef: WccDashboard;
 
   @property()
-  public selectedItem: TemplateResult | LitElement;
+  public selectedItem: (() => TemplateResult) | LitElement;
 
   @property()
   public selectedViewport: TEnvironment = 'native';
@@ -36,7 +29,7 @@ export class WccProperties extends LitElement {
   @property()
   public warning: string = null;
 
-  @internalProperty()
+  @state()
   propertyContent: TemplateResult[] = [];
 
   public render(): TemplateResult {
@@ -73,7 +66,8 @@ export class WccProperties extends LitElement {
           border: 1px solid #000;
         }
 
-        .properties input, .properties select {
+        .properties input,
+        .properties select {
           display: block;
           width: 100%;
           background: #333;
@@ -81,7 +75,6 @@ export class WccProperties extends LitElement {
           color: #fff;
         }
 
-
         .viewportSelector,
         .themeSelector {
           user-select: none;
@@ -220,7 +213,8 @@ export class WccProperties extends LitElement {
   }
 
   public async createProperties() {
-    console.log('creating properties');
+    console.log('creating properties for:');
+    console.log(this.selectedItem);
     const isEnumeration = (propertyArg): boolean => {
       const keys = Object.keys(propertyArg.type);
       const values = [];
@@ -240,7 +234,7 @@ export class WccProperties extends LitElement {
     };
     const getEnumValues = (propertyArg): any[] => {
       console.log(JSON.stringify(propertyArg));
-      const enumValues : any[] = [];
+      const enumValues: any[] = [];
       Object.keys(propertyArg.type).forEach((valueArg: string) => {
         enumValues.push(valueArg);
       });
@@ -258,11 +252,10 @@ export class WccProperties extends LitElement {
           : 'Object';
       }
     };
-    if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
+    if (this.selectedItem && (this.selectedItem as any).demo) {
+      console.log(`Got Dees-Element for property evaluation.`);
       const anonItem: any = this.selectedItem;
-      if (!anonItem._classProperties) {
+      console.log(anonItem.elementProperties);
-        return html`You have selected a page!`;
-      }
       const wccFrame = await this.dashboardRef.wccFrame;
       let selectedElement: HTMLElement;
       for (const element of Array.from(wccFrame.children)) {
@@ -271,11 +264,10 @@ export class WccProperties extends LitElement {
           break;
         }
       }
-      console.log(selectedElement);
+      const classProperties: Map<string, any> = anonItem.elementProperties;
-      const classProperties: Map<string, any> = anonItem._classProperties;
       const propertyArray: TemplateResult[] = [];
       for (const key of classProperties.keys()) {
-        if (key === 'goBright' || key === 'domtools') {
+        if (key === 'goBright' || key === 'domtools') {
           continue;
         }
         const property = classProperties.get(key);
@@ -283,7 +275,7 @@ export class WccProperties extends LitElement {
         propertyArray.push(
           html`
             <div class="property">
-              ${key} / ${propertyTypeString}<br>
+              ${key} / ${propertyTypeString}<br />
               ${(() => {
                 switch (propertyTypeString) {
                   case 'Boolean':
@@ -313,12 +305,18 @@ export class WccProperties extends LitElement {
                   case 'Enum':
                     const enumValues: any[] = getEnumValues(property);
                     return html`<select
-                        @change="${(eventArg:any)=>{
+                      @change="${(eventArg: any) => {
-                        selectedElement[key]=eventArg.target.value;
+                        selectedElement[key] = eventArg.target.value;
-                    }}">
+                      }}"
-                    ${enumValues.map(valueArg => {
+                    >
+                      ${enumValues.map((valueArg) => {
                         return html`
-                        <option ?selected=${valueArg === selectedElement[key] ? true : false} name="${valueArg}">${valueArg}</option>
+                          <option
+                            ?selected=${valueArg === selectedElement[key] ? true : false}
+                            name="${valueArg}"
+                          >
+                            ${valueArg}
+                          </option>
                         `;
                       })}
                     </select>`;
@@ -330,6 +328,7 @@ export class WccProperties extends LitElement {
       }
       this.propertyContent = propertyArray;
     } else {
+      console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`)
       return null;
     }
   }