1.0.67

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.52",
+  "version": "1.0.67",
   "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.81",
-    "@designestate/dees-element": "^1.0.9",
-    "@gitzone/tsrun": "^1.2.12",
-    "@pushrocks/smartdelay": "^2.0.10",
-    "@pushrocks/smartexpress": "^3.0.98",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0",
-    "typescript": "^4.1.2"
+    "@designestate/dees-domtools": "^1.0.113",
+    "@designestate/dees-element": "^1.0.35",
+    "@gitzone/tsrun": "^1.2.18",
+    "@pushrocks/smartdelay": "^2.0.13",
+    "@pushrocks/smartexpress": "^3.0.108",
+    "lit-element": "^3.2.0",
+    "lit-html": "^2.2.0",
+    "typescript": "^4.6.2"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
-    "@gitzone/tsbundle": "^1.0.78",
-    "@gitzone/tswatch": "^1.0.50",
+    "@gitzone/tsbuild": "^2.1.29",
+    "@gitzone/tsbundle": "^1.0.89",
+    "@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

@@ -1,37 +1,111 @@
-import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
+import {
+  DeesElement,
+  customElement,
+  TemplateResult,
+  html,
+  property,
+  css,
+  cssManager,
+} from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
+enum ETestEnum {
+  'first' = 'first',
+  'second' = 'second',
+  'awesome' = 'awesome',
+}
+
 @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()
+  public notTyped = 'hello';
+
+  @property({
+    type: String,
+  })
+  public typedAndNotInitizalized: string;
+
+  @property()
+  public notTypedAndNotInitizalized: string;
+
+  @property({
+    type: Boolean,
+  })
+  public demoBoolean = false;
+
+  @property({
+    type: String,
+  })
+  public demoString = 'default demo string';
+
+  @property({
+    type: Number,
+  })
+  public demoNumber = 2;
+
+  @property({
+    type: ETestEnum,
+  })
+  public demoENum: ETestEnum = ETestEnum.first;
+
+  constructor() {
+    super();
+  }
+
+  public static styles = [
+    css`
+      .maincontainer,
+      .themeindicator {
+        display: block;
+        padding: 10px;
+        border-radius: 10px;
+        margin-bottom: 20px;
+      }
+      .maincontainer {
+        color: #fff;
+        background: #000;
+      }
+      .themeindicator {
+        color: ${cssManager.bdTheme('#000', '#fff')};
+        background: ${cssManager.bdTheme('#fff', '#000')};
+      }
+
+      @container wccToolsViewport (max-width: 3000px) {
+        .maincontainer,
+        .themeindicator {
+          border-radius: 50px;
+        }
+      }
+
+      ${domtools.breakpoints.cssForPhablet(css`
+        .maincontainer,
+        .themeindicator {
+          border-radius: 50px;
+        }
+      `)}
+      
+      pre b {
+        color: green;
+      }
+    `,
+  ];
 
   public render() {
     return html`
-      <style>
-        .maincontainer, .themeindicator {
-          display: block;
-          padding: 10px;
-          border-radius: 10px;
-          margin-bottom: 20px;
-        }
-        .maincontainer {
-            color: #fff;
-            background: #000;
-        }
-        .themeindicator {
-          color: ${this.goBright ? '#000' : '#fff'};
-          background: ${this.goBright ? '#fff' : '#000'};
-        }
-        ${domtools.breakpoints.cssForPhablet(`
-          .maincontainer, .themeindicator {
-            border-radius: 50px;
-          }
-        `)}
-      </style>
+      <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;
+        You have selected the ${this.goBright ? 'bright' : 'dark'} theme.
+        <pre>
+          demoBoolean is <b>${this.demoBoolean}</b>
+          demoString is <b>"${this.demoString}"</b>
+          demoNumber is <b>${this.demoNumber}</b>
+          demoEnum is <b>"${this.demoENum}"</b>
+        </pre
+        >
       </div>
     `;
   }

ts_web/elements/wcc-dashboard.ts

@@ -1,16 +1,15 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { LitElement, property, html, customElement, TemplateResult, queryAsync } from 'lit-element';
 
 import * as plugins from '../wcctools.plugins';
 
-import { WccDefaultElement } from './wcc-defaultelement';
-
 // wcc tools
 import './wcc-frame';
 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')
 export class WccDashboard extends LitElement {
@@ -39,6 +38,9 @@ export class WccDashboard extends LitElement {
 
   @property()
   public warning: string = null;
+  
+  @queryAsync('wcc-frame')
+  public wccFrame: Promise<WccFrame>;
 
   constructor(
     elementsArg?: { [key: string]: LitElement },
@@ -90,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;
@@ -131,7 +133,7 @@ export class WccDashboard extends LitElement {
       console.log(warningTextArg);
       this.warning = warningTextArg;
       setTimeout(() => {
-        super.performUpdate();
+        this.scheduleUpdate();
       }, 0);
     }
   }
@@ -143,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];
@@ -151,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-defaultelement.ts

@@ -1,37 +0,0 @@
-import { LitElement, property, html, customElement } from 'lit-element';
-import { TemplateResult } from 'lit-html';
-
-@customElement('wcc-defaultelement')
-export class WccDefaultElement extends LitElement {
-  public static demo = () => html`<wcc-defaultelement></wcc-defaultelement>`;
-
-  constructor() {
-    super();
-
-    // you have access to all kinds of things through this.
-    // this.setAttribute('gotIt','true');
-    
-  }
-
-  public render(): TemplateResult {
-    return html`
-      <style>
-        :host {
-          font-family: 'Roboto', sans-serif;
-          background: #333;
-          text-align: center;
-          padding:30px;
-          box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
-          display: block;
-          box-sizing: border-box;
-          color: #fff;
-          font-size: 30px;
-        }
-        :host([hidden]) {
-          display: none;
-        }
-      </style>
-      No Element specified!
-    `;
-  }
-}

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;
@@ -49,20 +49,33 @@ export class WccFrame extends LitElement {
         }
         
         .viewport {
+          container-type: inline-size;
+          container-name: wccToolsViewport;
           position: relative;
           ${this.viewport !== 'desktop'
           ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
           : html``}
           min-height: 100%;
           background:
-            radial-gradient(#444444 3px, transparent 4px),
-            radial-gradient(#444444 3px, transparent 4px),
-            linear-gradient(#222222 4px, transparent 0),
-            linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
-            linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
-            #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;
+            ${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),
+              linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
+              linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
+              #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">
@@ -70,4 +83,10 @@ export class WccFrame extends LitElement {
       </div>
     `;
   }
+
+  public async getDisplayedInstance() {
+    await this.updateComplete;
+    const slottedContent = this.children;
+    console.log(slottedContent);
+  }
 }

ts_web/elements/wcc-properties.ts

@@ -1,6 +1,8 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { LitElement, property, html, customElement, TemplateResult, state } from 'lit-element';
 import { WccDashboard } from './wcc-dashboard';
 
+export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
+
 export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
 export type TTheme = 'bright' | 'dark';
 
@@ -16,7 +18,7 @@ export class WccProperties extends LitElement {
   dashboardRef: WccDashboard;
 
   @property()
-  public selectedItem: TemplateResult | LitElement;
+  public selectedItem: (() => TemplateResult) | LitElement;
 
   @property()
   public selectedViewport: TEnvironment = 'native';
@@ -27,6 +29,9 @@ export class WccProperties extends LitElement {
   @property()
   public warning: string = null;
 
+  @state()
+  propertyContent: TemplateResult[] = [];
+
   public render(): TemplateResult {
     return html`
       <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
@@ -60,8 +65,19 @@ export class WccProperties extends LitElement {
           background: #444;
           border: 1px solid #000;
         }
+
+        .properties input,
+        .properties select {
+          display: block;
+          width: 100%;
+          background: #333;
+          border: none;
+          color: #fff;
+        }
+
         .viewportSelector,
         .themeSelector {
+          user-select: none;
           border-right: 1px solid #999;
         }
         .selectorButtons2 {
@@ -114,35 +130,21 @@ 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>
       <div class="grid">
         <div class="properties">
           <div class="panelheading">Properties</div>
-          ${(() => {
-            if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
-              const anonItem: any = this.selectedItem;
-              if (!anonItem._classProperties) {
-                return `You have selected a page!`;
-              }
-              const classProperties: Map<string, any> = anonItem._classProperties;
-              const returnArray: TemplateResult[] = [];
-              for (const key of classProperties.keys()) {
-                returnArray.push(
-                  html` <div class="property">${key} / ${classProperties.get(key).type.name}</div> `
-                );
-              }
-              return returnArray;
-            }
-          })()}
+          ${this.propertyContent}
         </div>
         <div class="themeSelector">
           <div class="panelheading">Theme</div>
@@ -211,6 +213,141 @@ export class WccProperties extends LitElement {
     `;
   }
 
+  public async createProperties() {
+    console.log('creating properties for:');
+    console.log(this.selectedItem);
+    const isEnumeration = (propertyArg): boolean => {
+      const keys = Object.keys(propertyArg.type);
+      const values = [];
+      for (const key of keys) {
+        let value = propertyArg.type[key];
+        if (typeof value === 'number') {
+          value = value.toString();
+        }
+        values.push(value);
+      }
+      for (const key of keys) {
+        if (values.indexOf(key) < 0) {
+          return false;
+        }
+      }
+      return true;
+    };
+    const getEnumValues = (propertyArg): any[] => {
+      console.log(JSON.stringify(propertyArg));
+      const enumValues: any[] = [];
+      Object.keys(propertyArg.type).forEach((valueArg: string) => {
+        enumValues.push(valueArg);
+      });
+      return enumValues;
+    };
+    const determinePropertyType = (propertyArg: any): TPropertyType => {
+      const typeName: any | undefined = propertyArg.type.name;
+      if (typeName) {
+        return typeName;
+      } else {
+        return Array.isArray(propertyArg)
+          ? 'Array'
+          : isEnumeration(propertyArg)
+          ? 'Enum'
+          : 'Object';
+      }
+    };
+    if (this.selectedItem && (this.selectedItem as any).demo) {
+      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 firstFoundInstantiatedElement: HTMLElement;
+      for (const element of Array.from(wccFrame.children)) {
+        if (element instanceof (this.selectedItem as any)) {
+          firstFoundInstantiatedElement = element as HTMLElement;
+          break;
+        }
+      }
+      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') {
+          continue;
+        }
+        const property = classProperties.get(key);
+        const propertyTypeString = determinePropertyType(property);
+        propertyArray.push(
+          html`
+            <div class="property">
+              ${key} / ${propertyTypeString}<br />
+              ${(() => {
+                switch (propertyTypeString) {
+                  case 'Boolean':
+                    return html`<input
+                      type="checkbox"
+                      ?checked=${firstFoundInstantiatedElement[key]}
+                      @input="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.checked;
+                      }}"
+                    />`;
+                  case 'String':
+                    return html`<input
+                      type="text"
+                      value=${firstFoundInstantiatedElement[key]}
+                      @input="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                      }}"
+                    />`;
+                  case 'Number':
+                    return html`<input
+                      type="number"
+                      value=${firstFoundInstantiatedElement[key]}
+                      @input="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                      }}"
+                    />`;
+                  case 'Enum':
+                    const enumValues: any[] = getEnumValues(property);
+                    return html`<select
+                      @change="${(eventArg: any) => {
+                        firstFoundInstantiatedElement[key] = eventArg.target.value;
+                      }}"
+                    >
+                      ${enumValues.map((valueArg) => {
+                        return html`
+                          <option
+                            ?selected=${valueArg === firstFoundInstantiatedElement[key] ? true : false}
+                            name="${valueArg}"
+                          >
+                            ${valueArg}
+                          </option>
+                        `;
+                      })}
+                    </select>`;
+                }
+              })()}
+            </div>
+          `
+        );
+      }
+      this.propertyContent = propertyArray;
+    } else {
+      console.log(`Cannot extract properties of ${(this.selectedItem as any)?.name}`);
+      this.warning = `You selected a page.`;
+      return null;
+    }
+  }
+
   public selectTheme(themeArg: TTheme) {
     this.selectedTheme = themeArg;
     this.dispatchEvent(
@@ -222,6 +359,11 @@ export class WccProperties extends LitElement {
     this.dashboardRef.buildUrl();
   }
 
+  public async scheduleUpdate() {
+    await this.createProperties();
+    super.scheduleUpdate();
+  }
+
   public selectViewport(viewport: TEnvironment) {
     this.selectedViewport = viewport;
     setEnvironment(viewport);