1.0.69

package.json

@@ -1,10 +1,11 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.63",
+  "version": "1.0.69",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
+  "type": "module",
   "scripts": {
     "test": "(npm run build)",
     "build": "(tsbuild custom ts_web --web && tsbundle element)",
@@ -13,19 +14,16 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.102",
-    "@designestate/dees-element": "^1.0.26",
-    "@gitzone/tsrun": "^1.2.18",
+    "@designestate/dees-domtools": "^2.0.1",
+    "@designestate/dees-element": "^2.0.4",
+    "@gitzone/tsrun": "^1.2.31",
     "@pushrocks/smartdelay": "^2.0.13",
-    "@pushrocks/smartexpress": "^3.0.108",
-    "lit-element": "^3.0.2",
-    "lit-html": "^2.0.2",
-    "typescript": "^4.5.2"
+    "@pushrocks/smartexpress": "^4.0.0"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.28",
-    "@gitzone/tsbundle": "^1.0.88",
-    "@gitzone/tswatch": "^1.0.56",
+    "@gitzone/tsbuild": "^2.1.60",
+    "@gitzone/tsbundle": "^1.0.101",
+    "@gitzone/tswatch": "^1.0.73",
     "@pushrocks/projectinfo": "^4.0.5",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.17.0"

test/elements/index.ts

@@ -1 +1 @@
-export * from './test-demoelement';
+export * from './test-demoelement.js';

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

test/index.ts

@@ -1,3 +1,3 @@
-import * as wcctools from '../ts_web/index';
-import * as elements from './elements';
+import * as wcctools from '../ts_web/index.js';
+import * as elements from './elements/index.js';
 wcctools.setupWccTools(elements as any, {});

ts_web/elements/wcc-dashboard.ts

@@ -1,6 +1,6 @@
-import { LitElement, property, html, customElement, TemplateResult, queryAsync } from 'lit-element';
+import { DeesElement, property, html, customElement, TemplateResult, queryAsync } from '@designestate/dees-element';
 
-import * as plugins from '../wcctools.plugins';
+import * as plugins from '../wcctools.plugins.js';
 
 // wcc tools
 import './wcc-frame';
@@ -12,7 +12,7 @@ import { breakpoints } from '@designestate/dees-domtools';
 import { WccFrame } from './wcc-frame';
 
 @customElement('wcc-dashboard')
-export class WccDashboard extends LitElement {
+export class WccDashboard extends DeesElement {
   public domtools: plugins.deesDomtools.DomTools;
 
   @property()
@@ -22,7 +22,7 @@ export class WccDashboard extends LitElement {
   public selectedItemName: string;
 
   @property()
-  public selectedItem: (() => TemplateResult) | LitElement;
+  public selectedItem: (() => TemplateResult) | DeesElement;
 
   @property()
   public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
@@ -34,7 +34,7 @@ export class WccDashboard extends LitElement {
   public pages: { [key: string]: () => TemplateResult } = {};
 
   @property()
-  public elements: { [key: string]: LitElement } = {};
+  public elements: { [key: string]: DeesElement } = {};
 
   @property()
   public warning: string = null;
@@ -43,7 +43,7 @@ export class WccDashboard extends LitElement {
   public wccFrame: Promise<WccFrame>;
 
   constructor(
-    elementsArg?: { [key: string]: LitElement },
+    elementsArg?: { [key: string]: DeesElement },
     pagesArg?: { [key: string]: () => TemplateResult }
   ) {
     super();

ts_web/elements/wcc-properties.ts

@@ -1,5 +1,5 @@
 import { LitElement, property, html, customElement, TemplateResult, state } from 'lit-element';
-import { WccDashboard } from './wcc-dashboard';
+import { WccDashboard } from './wcc-dashboard.js';
 
 export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
 
@@ -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,21 +257,28 @@ 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);
       const wccFrame = await this.dashboardRef.wccFrame;
-      let selectedElement: HTMLElement;
+      let firstFoundInstantiatedElement: HTMLElement;
       for (const element of Array.from(wccFrame.children)) {
         if (element instanceof (this.selectedItem as any)) {
-          selectedElement = element as HTMLElement;
+          firstFoundInstantiatedElement = element as HTMLElement;
           break;
         }
       }
-      const classProperties: Map<string, any> = anonItem.elementProperties;
-      if (!classProperties) {
+      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') {
@@ -287,38 +295,38 @@ export class WccProperties extends LitElement {
                   case 'Boolean':
                     return html`<input
                       type="checkbox"
-                      ?checked=${selectedElement[key]}
+                      ?checked=${firstFoundInstantiatedElement[key]}
                       @input="${(eventArg: any) => {
-                        selectedElement[key] = eventArg.target.checked;
+                        firstFoundInstantiatedElement[key] = eventArg.target.checked;
                       }}"
                     />`;
                   case 'String':
                     return html`<input
                       type="text"
-                      value=${selectedElement[key]}
+                      value=${firstFoundInstantiatedElement[key]}
                       @input="${(eventArg: any) => {
-                        selectedElement[key] = eventArg.target.value;
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
                     />`;
                   case 'Number':
                     return html`<input
                       type="number"
-                      value=${selectedElement[key]}
+                      value=${firstFoundInstantiatedElement[key]}
                       @input="${(eventArg: any) => {
-                        selectedElement[key] = eventArg.target.value;
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
                     />`;
                   case 'Enum':
                     const enumValues: any[] = getEnumValues(property);
                     return html`<select
                       @change="${(eventArg: any) => {
-                        selectedElement[key] = eventArg.target.value;
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
                       }}"
                     >
                       ${enumValues.map((valueArg) => {
                         return html`
                           <option
-                            ?selected=${valueArg === selectedElement[key] ? true : false}
+                            ?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
                             name="${valueArg}"
                           >
                             ${valueArg}
@@ -334,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;
     }
   }
@@ -350,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) {

ts_web/elements/wcc-sidebar.ts

@@ -1,16 +1,16 @@
-import * as plugins from '../wcctools.plugins';
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
-import { WccDashboard } from './wcc-dashboard';
+import * as plugins from '../wcctools.plugins.js';
+import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
+import { WccDashboard } from './wcc-dashboard.js';
 
 export type TElementType = 'element' | 'page';
 
 @customElement('wcc-sidebar')
-export class WccSidebar extends LitElement {
+export class WccSidebar extends DeesElement {
   @property({type: Array})
   public websites: string[] = [];
 
   @property({ attribute: false })
-  public selectedItem: LitElement | (() => TemplateResult);
+  public selectedItem: DeesElement | (() => TemplateResult);
 
   @property({ attribute: false })
   public selectedType: TElementType;
@@ -150,7 +150,7 @@ export class WccSidebar extends LitElement {
     `;
   }
 
-  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
+  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | DeesElement) {
     console.log('selected item');
     console.log(itemNameArg);
     console.log(itemArg);

ts_web/index.ts

@@ -1,4 +1,4 @@
-import { WccDashboard } from './elements/wcc-dashboard';
+import { WccDashboard } from './elements/wcc-dashboard.js';
 import { LitElement, TemplateResult } from 'lit-element';
 
 const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => {