1.0.72

fix(core): update
1.0.71
2022-03-24 17:08:26 +01:00 · 2022-03-24 17:08:25 +01:00 · 2022-03-24 16:14:12 +01:00 · 2022-03-24 16:14:12 +01:00 · 2022-03-24 15:53:03 +01:00 · 2022-03-24 15:53:02 +01:00
17 changed files with 14793 additions and 7668 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -12,6 +12,9 @@ stages:
  - release
  - metadata

+before_script:
+  - npm install -g @shipzone/npmci
+
 # ====================
 # security stage
 # ====================
@ -36,6 +39,7 @@ auditProductionDependencies:
    - npmci command npm audit --audit-level=high --only=prod --production
  tags:
    - docker
+  allow_failure: true

 auditDevDependencies:
  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
@ -96,10 +100,9 @@ codequality:
  only:
    - tags
  script:
-    - npmci command npm install -g tslint typescript
+    - npmci command npm install -g typescript
    - npmci npm prepare
    - npmci npm install
-    - npmci command "tslint -c tslint.json ./ts/**/*.ts"
  tags:
    - lossless
    - docker
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -2,28 +2,10 @@
  "version": "0.2.0",
  "configurations": [
    {
-      "name": "current file",
-      "type": "node",
+      "command": "npm test",
+      "name": "Run npm test",
      "request": "launch",
-      "args": [
-        "${relativeFile}"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
-    },
-    {
-      "name": "test.ts",
-      "type": "node",
-      "request": "launch",
-      "args": [
-        "test/test.ts"
-      ],
-      "runtimeArgs": ["-r", "@gitzone/tsrun"],
-      "cwd": "${workspaceRoot}",
-      "protocol": "inspector",
-      "internalConsoleOptions": "openOnSessionStart"
+      "type": "node-terminal"
    }
  ]
 }
--- a/assets/elements/elementone.ts
+++ b/assets/elements/elementone.ts
--- a/html/index.html
+++ b/html/index.html
@ -17,7 +17,7 @@
      }
    </style>

-    <script src="./index.ts"></script>
+    <script type="module" src="/bundle.js"></script>
  </head>
  <body>
  </body>
--- a/html/index.ts
+++ b/html/index.ts
@ -1,10 +1,10 @@
 // dees tools
-import * as deesWccTools from '@designestate/dees-wcctools';
+import * as deesWccTools from '../ts_web/index.js';
 import * as deesDomTools from '@designestate/dees-domtools';

 // elements and pages
-import * as elements from '../ts_web/elements';
-import * as pages from '../ts_web/pages';
+import * as elements from '../test/elements/index.js';
+import * as pages from '../test/pages/index.js';

 deesWccTools.setupWccTools(elements as any, pages);
 deesDomTools.elementBasic.setup();
--- a/npmextra.json
+++ b/npmextra.json
@ -5,7 +5,7 @@
      "githost": "gitlab.com",
      "gitscope": "designestate",
      "gitrepo": "dees-wcctools",
-      "shortDescription": "wcc tools for creating element catalogues",
+      "description": "wcc tools for creating element catalogues",
      "npmPackagename": "@designestate/dees-wcctools",
      "license": "MIT",
      "projectDomain": "design.estate"
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,30 +1,29 @@
 {
  "name": "@designestate/dees-wcctools",
-  "version": "1.0.42",
+  "version": "1.0.72",
  "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)",
+    "build": "(tsbuild element --web --allowimplicitany --skiplibcheck && tsbundle element)",
    "watch": "tswatch element"
  },
  "author": "Lossless GmbH",
  "license": "UNLICENSED",
  "dependencies": {
-    "@designestate/dees-domtools": "^1.0.74",
-    "@gitzone/tsrun": "^1.2.12",
-    "@pushrocks/smartdelay": "^2.0.10",
-    "@pushrocks/smartexpress": "^3.0.97",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0",
-    "typescript": "^4.1.2"
+    "@designestate/dees-domtools": "^2.0.1",
+    "@designestate/dees-element": "^2.0.4",
+    "@gitzone/tsrun": "^1.2.31",
+    "@pushrocks/smartdelay": "^2.0.13",
+    "@pushrocks/smartexpress": "^4.0.0"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
-    "@gitzone/tsbundle": "^1.0.78",
-    "@gitzone/tswatch": "^1.0.50",
+    "@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"
--- a/test/elements/index.ts
+++ b/test/elements/index.ts
@ -1 +1 @@
-export * from './test-demoelement';
+export * from './test-demoelement.js';
--- a/test/elements/test-demoelement.ts
+++ b/test/elements/test-demoelement.ts
@ -1,27 +1,112 @@
-import { LitElement, customElement, TemplateResult, html } from 'lit-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 LitElement {
-  public static demo = () => html`<test-demoelement></test-demoelement>`;
+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,
+  })
+  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 size(min-width: 1px) {
+        .maincontainer,
+        .themeindicator {
+          border-radius: 50px;
+        }
+      }
+
+      ${domtools.breakpoints.cssForPhablet(css`
+        .maincontainer,
+        .themeindicator {
+          border-radius: 50px;
+        }
+      `)}
+
+      pre b {
+        color: green;
+      }
+    `,
+  ];

  public render() {
    return html`
-      <style>
-        .maincontainer {
-          display: block;
-          background: #fff;
-          padding: 10px;
-          border-radius: 10px;
-        }
-        ${domtools.breakpoints.cssForPhablet(`
-          .maincontainer {
-            background: #000;
-          }
-        `)}
-      </style>
-      <div class="maincontainer">This is a demo element</div>
+      <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.
+        <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>
    `;
  }
 }
--- a/test/index.ts
+++ b/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, {});
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/ts_web/elements/wcc-dashboard.ts
@ -1,26 +1,27 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { DeesElement, property, html, customElement, TemplateResult, queryAsync } from '@designestate/dees-element';

-import * as plugins from '../wcctools.plugins';
-
-import { WccDefaultElement } from './wcc-defaultelement';
+import * as plugins from '../wcctools.plugins.js';

 // 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 './wcc-frame.js';
+import './wcc-sidebar.js';
+import './wcc-properties.js';
+import { TTheme } from './wcc-properties.js';
+import { TElementType } from './wcc-sidebar.js';
+import { breakpoints } from '@designestate/dees-domtools';
+import { WccFrame } from './wcc-frame.js';

@customElement('wcc-dashboard')
-export class WccDashboard extends LitElement {
-  public domtools: plugins.deesDomtools.DomTools;
+export class WccDashboard extends DeesElement {

  @property()
  public selectedType: TElementType;

  @property()
-  public selectedItem: TemplateResult | LitElement;
+  public selectedItemName: string;
+
+  @property()
+  public selectedItem: (() => TemplateResult) | DeesElement;

  @property()
  public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
@ -29,17 +30,20 @@ export class WccDashboard extends LitElement {
  public selectedTheme: TTheme = 'dark';

  @property()
-  public pages: { [key: string]: TemplateResult } = {};
+  public pages: { [key: string]: () => TemplateResult } = {};

  @property()
-  public elements: { [key: string]: LitElement } = {};
+  public elements: { [key: string]: DeesElement } = {};

  @property()
  public warning: string = null;
  
+  @queryAsync('wcc-frame')
+  public wccFrame: Promise<WccFrame>;
+
  constructor(
-    elementsArg?: { [key: string]: LitElement },
-    pagesArg?: { [key: string]: TemplateResult }
+    elementsArg?: { [key: string]: DeesElement },
+    pagesArg?: { [key: string]: () => TemplateResult }
  ) {
    super();
    if (elementsArg) {
@ -56,7 +60,6 @@ export class WccDashboard extends LitElement {
  public render(): TemplateResult {
    return html`
      <style>
-        @import url('https://fonts.googleapis.com/css?family=Roboto');
        :host {
          font-family: 'Roboto', sans-serif;
          background: #fcfcfc;
@ -70,12 +73,15 @@ export class WccDashboard extends LitElement {
      <wcc-sidebar
        .dashboardRef=${this}
        .selectedItem=${this.selectedItem}
-        @selectedItem=${(eventArg) => {
-          this.selectedItem = eventArg.detail;
-        }}
        @selectedType=${(eventArg) => {
          this.selectedType = eventArg.detail;
        }}
+        @selectedItemName=${(eventArg) => {
+          this.selectedItemName = eventArg.detail;
+        }}
+        @selectedItem=${(eventArg) => {
+          this.selectedItem = eventArg.detail;
+        }}
      ></wcc-sidebar>
      <wcc-properties
        .dashboardRef=${this}
@ -85,7 +91,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;
@ -93,9 +99,16 @@ export class WccDashboard extends LitElement {
      ></wcc-properties>
      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
        ${(() => {
-          if (this.selectedItem instanceof TemplateResult) {
-            return this.selectedItem;
-          } else if (this.selectedItem) {
+          console.log('jojo');
+          if (this.selectedType === 'page' && this.selectedItem) {
+            if (typeof this.selectedItem === 'function') {
+              console.log('jojo page')
+              return this.selectedItem();
+            } else {
+              console.error('The selected item looks strange:');
+              console.log(this.selectedItem);
+            }
+          } else if (this.selectedType === 'element' && this.selectedItem) {
            // console.log(this.selectedItem);
            const anonItem: any = this.selectedItem;
            if (!anonItem.demo) {
@ -121,27 +134,31 @@ export class WccDashboard extends LitElement {
      console.log(warningTextArg);
      this.warning = warningTextArg;
      setTimeout(() => {
-        super.performUpdate();
+        this.scheduleUpdate();
      }, 0);
    }
  }

  public async firstUpdated() {
    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-    this.domtools.router.on('/:itemType/:itemName/:viewport/:theme', async (routeInfo) => {
+    this.domtools.router.on(
+      '/wcctools-route/:itemType/:itemName/:viewport/:theme',
+      async (routeInfo) => {
+        this.selectedType = routeInfo.params.itemType as TElementType;
+        this.selectedItemName = routeInfo.params.itemName;
+        this.selectedViewport = routeInfo.params.viewport as breakpoints.TViewport;
+        this.selectedTheme = routeInfo.params.theme as TTheme;
        if (routeInfo.params.itemType === 'element') {
-        this.selectedType = 'element';
          this.selectedItem = this.elements[routeInfo.params.itemName];
        } else if (routeInfo.params.itemType === 'page') {
-        this.selectedType = 'page';
-        this.selectedItem = this.pages[routeInfo.params.pageName];
+          this.selectedItem = this.pages[routeInfo.params.itemName];
        }
        const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
-      domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
-      this.selectedViewport = routeInfo.params.viewport as TViewport;
-      this.selectedTheme = routeInfo.params.theme as TTheme;
-      domtoolsInstance.themeManager.goBrightBoolean = this.selectedTheme === 'bright';
-    });
+        this.selectedTheme === 'bright'
+          ? domtoolsInstance.themeManager.goBright()
+          : domtoolsInstance.themeManager.goDark();
+      }
+    );
  }

  private updating = false;
@ -166,10 +183,7 @@ export class WccDashboard extends LitElement {

  public buildUrl() {
    this.domtools.router.pushUrl(
-      `/${this.selectedType}/${(this.selectedItem as any).name}/${this.selectedViewport}/${
-        this.selectedTheme
-      }`,
-      0
+      `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`
    );
  }
 }
--- a/ts_web/elements/wcc-defaultelement.ts
+++ b/ts_web/elements/wcc-defaultelement.ts
@ -1,38 +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>
-        @import url('https://fonts.googleapis.com/css?family=Roboto');
-        :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!
-    `;
-  }
-}
--- a/ts_web/elements/wcc-frame.ts
+++ b/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,12 +49,24 @@ 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:
+            ${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),
@ -63,6 +75,7 @@ export class WccFrame extends LitElement {
              #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);
+  }
 }
--- a/ts_web/elements/wcc-properties.ts
+++ b/ts_web/elements/wcc-properties.ts
@ -1,5 +1,7 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
-import { WccDashboard } from './wcc-dashboard';
+import { DeesElement, property, html, customElement, TemplateResult, state } from '@designestate/dees-element';
+import { WccDashboard } from './wcc-dashboard.js';
+
+export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';

 export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
 export type TTheme = 'bright' | 'dark';
@ -11,12 +13,14 @@ export const setEnvironment = (envArg) => {
 };

@customElement('wcc-properties')
-export class WccProperties extends LitElement {
-  @property()
-  dashboardRef: WccDashboard;
+export class WccProperties extends DeesElement {
+  @property({
+    type: WccDashboard
+  })
+  public dashboardRef: WccDashboard;

  @property()
-  public selectedItem: TemplateResult | LitElement;
+  public selectedItem: (() => TemplateResult) | DeesElement;

  @property()
  public selectedViewport: TEnvironment = 'native';
@ -27,6 +31,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 +67,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,32 +132,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;
-              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>
@ -150,7 +157,7 @@ export class WccProperties extends LitElement {
                this.selectTheme('dark');
              }}
            >
-              Dark<br /><i class="material-icons">nights_stay</i>
+              Dark<br /><i class="material-icons">brightness_3</i>
            </div>
            <div
              class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@ -208,6 +215,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(
@ -219,6 +361,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);
--- a/ts_web/elements/wcc-sidebar.ts
+++ b/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;
@ -44,6 +44,12 @@ export class WccSidebar extends LitElement {
          text-align: center;        
          margin: 20px 5px 5px 5px;
        }
+
+        .heading a {
+          text-decoration: none;
+          color: #fff;
+        }
+
        .subheading {
          text-align: center;
        }
@ -92,10 +98,10 @@ export class WccSidebar extends LitElement {
        
      </style>
      <div class="heading">
-        lele-catalog
+        <a href="https://gitlab.com/designestate/dees-wcctools" target="_blank">wcctools</a>
      </div>
      <div class="subheading">
-        Lossless GmbH
+        by Lossless GmbH
      </div>
      <div class="menu">
        <h3>Live Websites</h3>
@ -112,7 +118,7 @@ export class WccSidebar extends LitElement {
                class="selectOption ${this.selectedItem === item ? 'selected' : null}"
                @click=${async () => {
                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                  this.selectItem('page', item);
+                  this.selectItem('page', pageName, item);
                }}
              >
                <i class="material-icons">insert_drive_file</i>
@ -128,10 +134,10 @@ export class WccSidebar extends LitElement {
            const item = this.dashboardRef.elements[elementName];
            return html`
              <div
-                class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
+                class="selectOption ${this.selectedItem === item ? 'selected' : null}"
                @click=${async () => {
                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                  this.selectItem('element', item);
+                  this.selectItem('element', elementName, item);
                }}
              >
                <i class="material-icons">featured_video</i>
@ -144,20 +150,28 @@ export class WccSidebar extends LitElement {
    `;
  }

-  public selectItem(typeArg: TElementType, itemArg: TemplateResult | LitElement) {
+  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | DeesElement) {
    console.log('selected item');
+    console.log(itemNameArg);
+    console.log(itemArg);
    this.selectedItem = itemArg;
    this.selectedType = typeArg;
-    this.dispatchEvent(
-      new CustomEvent('selectedItem', {
-        detail: itemArg
-      })
-    );
    this.dispatchEvent(
      new CustomEvent('selectedType', {
        detail: typeArg
      })
    );
+    this.dispatchEvent(
+      new CustomEvent('selectedItemName', {
+        detail: itemNameArg
+      })
+    );
+    this.dispatchEvent(
+      new CustomEvent('selectedItem', {
+        detail: itemArg
+      })
+    );
+    
    this.dashboardRef.buildUrl();
  }
 }
--- a/ts_web/index.ts
+++ b/ts_web/index.ts
@ -1,7 +1,7 @@
-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 }) => {
+const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => {
  let hasRun = false;
  const runWccToolsSetup = async () => {
    if (document.readyState === 'complete' && !hasRun) {
Author	SHA1	Message	Date
Philipp Kunz	68375a5e58	1.0.72	2022-03-24 17:08:26 +01:00
Philipp Kunz	5876225b39	fix(core): update	2022-03-24 17:08:25 +01:00
Philipp Kunz	342ac96429	1.0.71	2022-03-24 16:14:12 +01:00
Philipp Kunz	85a472fe1c	fix(core): update	2022-03-24 16:14:12 +01:00
Philipp Kunz	4fecae83dc	1.0.70	2022-03-24 15:53:03 +01:00
Philipp Kunz	b7a666ac66	fix(core): update	2022-03-24 15:53:02 +01:00
Philipp Kunz	e559ed072c	1.0.69	2022-03-24 15:39:18 +01:00
Philipp Kunz	c44d9e7365	fix(core): update	2022-03-24 15:39:17 +01:00
Philipp Kunz	53f53be991	1.0.68	2022-03-04 10:24:04 +01:00
Philipp Kunz	9dec6e25b5	fix(core): update	2022-03-04 10:24:03 +01:00
Philipp Kunz	03fa323eb9	1.0.67	2022-03-02 20:01:15 +01:00
Philipp Kunz	e0344bb513	fix(core): update	2022-03-02 20:01:14 +01:00
Philipp Kunz	a6f583b8c4	1.0.66	2021-11-26 19:18:14 +01:00
Philipp Kunz	60e173b7be	fix(core): update	2021-11-26 19:18:14 +01:00
Philipp Kunz	d51027d4be	1.0.65	2021-11-26 19:16:09 +01:00
Philipp Kunz	2efa465930	fix(core): update	2021-11-26 19:16:09 +01:00
Philipp Kunz	19081caacd	1.0.64	2021-11-26 19:05:05 +01:00
Philipp Kunz	c42e8b8bef	fix(core): update	2021-11-26 19:05:04 +01:00
Philipp Kunz	750e8cef32	1.0.63	2021-11-26 18:52:44 +01:00
Philipp Kunz	c0d057949d	fix(core): update	2021-11-26 18:52:44 +01:00
Philipp Kunz	82a5283edd	1.0.62	2021-11-26 18:27:29 +01:00
Philipp Kunz	abb20def4b	fix(core): update	2021-11-26 18:27:29 +01:00
Philipp Kunz	dd71751864	1.0.61	2021-11-26 17:53:05 +01:00
Philipp Kunz	c4562c797e	fix(core): update	2021-11-26 17:53:04 +01:00
Philipp Kunz	643317811b	1.0.60	2021-11-26 17:47:09 +01:00
Philipp Kunz	3667070094	fix(core): update	2021-11-26 17:47:08 +01:00
Philipp Kunz	a86ef5bfce	1.0.59	2021-09-27 14:45:06 +02:00
Philipp Kunz	77d058f403	fix(core): update	2021-09-27 14:45:05 +02:00
Philipp Kunz	1639a57bd1	1.0.58	2021-09-27 13:30:03 +02:00
Philipp Kunz	b546d1a2c5	fix(core): update	2021-09-27 13:30:02 +02:00
Phil Kunz	5639c152a2	1.0.57	2021-04-02 09:55:15 +00:00
Phil Kunz	05a093f080	fix(core): update	2021-04-02 09:55:15 +00:00
Phil Kunz	08156b2d47	1.0.56	2021-04-01 19:11:24 +00:00
Phil Kunz	0b119c481c	fix(core): update	2021-04-01 19:11:23 +00:00
Phil Kunz	bf4ef900f8	1.0.55	2021-04-01 19:09:57 +00:00
Phil Kunz	a812a12c10	fix(core): update	2021-04-01 19:09:57 +00:00
Phil Kunz	71e885f3e4	1.0.54	2020-12-09 18:35:49 +00:00
Phil Kunz	57bc2b76bc	fix(core): update	2020-12-09 18:35:49 +00:00
Phil Kunz	f21a20b652	1.0.53	2020-12-09 18:32:12 +00:00
Phil Kunz	91b9c424d8	fix(core): update	2020-12-09 18:32:11 +00:00
Phil Kunz	5cf4752ad9	1.0.52	2020-12-07 04:20:30 +00:00
Phil Kunz	5f347153fc	fix(core): update	2020-12-07 04:20:29 +00:00
Phil Kunz	e1aebc7db8	1.0.51	2020-12-07 04:07:32 +00:00
Phil Kunz	97b88d965c	fix(core): update	2020-12-07 04:07:32 +00:00
Phil Kunz	37d343da03	1.0.50	2020-12-07 04:07:03 +00:00
Phil Kunz	47cb726716	fix(core): update	2020-12-07 04:07:03 +00:00
Phil Kunz	4220131bc4	1.0.49	2020-11-30 00:50:48 +00:00
Phil Kunz	edee4fa446	fix(core): update	2020-11-30 00:50:47 +00:00
Phil Kunz	c2a0fd26e2	1.0.48	2020-11-30 00:45:42 +00:00
Phil Kunz	693c8ca3f0	fix(core): update	2020-11-30 00:45:41 +00:00
Phil Kunz	ca58c55a37	1.0.47	2020-11-27 17:09:34 +00:00
Phil Kunz	79d2be98c5	fix(core): update	2020-11-27 17:09:33 +00:00
Phil Kunz	7971f48963	1.0.46	2020-11-27 16:49:58 +00:00
Phil Kunz	a15629a960	fix(core): update	2020-11-27 16:49:57 +00:00
Phil Kunz	ad5c25d80e	1.0.45	2020-11-27 16:44:35 +00:00
Phil Kunz	a713d88f27	fix(core): update	2020-11-27 16:44:34 +00:00
Phil Kunz	100f657e04	1.0.44	2020-11-27 16:40:38 +00:00
Phil Kunz	46e0b9f9db	fix(core): update	2020-11-27 16:40:38 +00:00
Phil Kunz	64d6379cd2	1.0.43	2020-11-27 15:59:18 +00:00
Phil Kunz	847733286c	fix(core): update	2020-11-27 15:59:18 +00:00