1.0.75

fix(core): update
1.0.74
2023-01-07 14:05:26 +01:00 · 2023-01-07 14:05:25 +01:00 · 2022-04-14 16:56:04 +02:00 · 2022-04-14 16:56:04 +02:00 · 2022-03-24 18:30:55 +01:00 · 2022-03-24 18:30:54 +01:00
23 changed files with 3222 additions and 10865 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -12,40 +12,36 @@ stages:
  - release
  - metadata
 before_script:
  - pnpm install -g pnpm
  - pnpm install -g @shipzone/npmci
  - npmci npm prepare
 # ====================
 # security stage
 # ====================
 # ====================
 # security stage
 # ====================
 mirror:
  stage: security
  script:
    - npmci git mirror
  only:
    - tags
  tags:
    - lossless
    - docker
    - notpriv
 auditProductionDependencies:
  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
  stage: security
  script:
    - npmci npm prepare
    - npmci command npm install --production --ignore-scripts
     - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high --only=prod --production
+     - npmci command pnpm audit --audit-level=high --prod
  tags:
    - lossless
    - docker
  allow_failure: true
 auditDevDependencies:
  image: registry.gitlab.com/hosttoday/ht-docker-node:npmci
  stage: security
  script:
    - npmci npm prepare
    - npmci command npm install --ignore-scripts
    - npmci command npm config set registry https://registry.npmjs.org
-    - npmci command npm audit --audit-level=high --only=dev
+    - npmci command pnpm audit --audit-level=high --dev
  tags:
    - lossless
    - docker
  allow_failure: true
@ -56,7 +52,6 @@ auditDevDependencies:
 testStable:
  stage: test
  script:
    - npmci npm prepare
    - npmci node install stable
    - npmci npm install
    - npmci npm test
@ -67,10 +62,9 @@ testStable:
 testBuild:
  stage: test
  script:
    - npmci npm prepare
    - npmci node install stable
    - npmci npm install
-    - npmci command npm run build
+    - npmci npm build
  coverage: /\d+.?\d+?\%\s*coverage/
  tags:
    - docker
@ -96,10 +90,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
@ -119,11 +112,9 @@ trigger:
 pages:
  stage: metadata
  script:
-    - npmci node install lts
+    - npmci node install stable
    - npmci command npm install -g @gitzone/tsdoc
    - npmci npm prepare
    - npmci npm install
-    - npmci command tsdoc
+    - npmci command npm run buildDocs
  tags:
    - lossless
    - docker
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -2,28 +2,10 @@
  "version": "0.2.0",
  "configurations": [
    {
-      "name": "current file",
+      "command": "npm test",
-      "type": "node",
+      "name": "Run npm test",
      "request": "launch",
-      "args": [
+      "type": "node-terminal"
        "${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"
    }
  ]
 }
--- a/assets/elements/elementone.ts
+++ b/assets/elements/elementone.ts
--- a/html/index.html
+++ b/html/index.html
@ -1,5 +1,5 @@
 <!--gitzone element-->
-<!-- made by Lossless GmbH -->
+<!-- made by Task Venture Capital GmbH -->
 <!-- checkout https://maintainedby.lossless.com for awesome OpenSource projects -->
 <html lang="en">
  <head>
@ -10,6 +10,12 @@
    />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="preconnect" href="https://rsms.me/">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Courier+Prime:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
    <style>
      body {
        margin: 0px;
@ -17,7 +23,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 '../ts_web';
+import * as deesWccTools from '../ts_web/index.js';
 import * as deesDomTools from '@designestate/dees-domtools';
 // elements and pages
-import * as elements from '../test/elements';
+import * as elements from '../test/elements/index.js';
-import * as pages from '../test/pages';
+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,34 +1,32 @@
 {
  "name": "@designestate/dees-wcctools",
-  "version": "1.0.54",
+  "version": "1.0.75",
  "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 && tsbundle element)",
-    "watch": "tswatch element"
+    "watch": "tswatch element",
    "buildDocs": "tsdoc"
  },
  "author": "Lossless GmbH",
  "license": "UNLICENSED",
  "dependencies": {
-    "@designestate/dees-domtools": "^1.0.81",
+    "@designestate/dees-domtools": "^2.0.6",
-    "@designestate/dees-element": "^1.0.10",
+    "@designestate/dees-element": "^2.0.6",
-    "@gitzone/tsrun": "^1.2.12",
+    "@gitzone/tsrun": "^1.2.32",
-    "@pushrocks/smartdelay": "^2.0.10",
+    "@pushrocks/smartdelay": "^2.0.13",
-    "@pushrocks/smartexpress": "^3.0.98",
+    "@pushrocks/smartexpress": "^4.0.4",
-    "lit-element": "^2.4.0",
+    "lit": "^2.5.0"
    "lit-html": "^1.3.0",
    "typescript": "^4.1.2"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
+    "@gitzone/tsbuild": "^2.1.61",
-    "@gitzone/tsbundle": "^1.0.78",
+    "@gitzone/tsbundle": "^2.0.7",
-    "@gitzone/tswatch": "^1.0.50",
+    "@gitzone/tswatch": "^2.0.5",
-    "@pushrocks/projectinfo": "^4.0.5",
+    "@pushrocks/projectinfo": "^5.0.1"
    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.17.0"
  },
  "files": [
    "ts/**/*",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/readme.md
+++ b/readme.md
@ -21,7 +21,6 @@ Code Style | [![Code Style](https://badgen.net/badge/style/prettier/purple)](htt
 PackagePhobia (total standalone install weight) | [![PackagePhobia](https://badgen.net/packagephobia/install/@designestate/dees-wcctools)](https://lossless.cloud)
 PackagePhobia (package size on registry) | [![PackagePhobia](https://badgen.net/packagephobia/publish/@designestate/dees-wcctools)](https://lossless.cloud)
 BundlePhobia (total size when bundled) | [![BundlePhobia](https://badgen.net/bundlephobia/minzip/@designestate/dees-wcctools)](https://lossless.cloud)
 Platform support | [![Supports Windows 10](https://badgen.net/badge/supports%20Windows%2010/yes/green?icon=windows)](https://lossless.cloud) [![Supports Mac OS X](https://badgen.net/badge/supports%20Mac%20OS%20X/yes/green?icon=apple)](https://lossless.cloud)
 ## Usage
@ -35,7 +34,6 @@ We are always happy for code contributions. If you are not the code contributing
 For further information read the linked docs at the top of this readme.
-> MIT licensed | **&copy;** [Lossless GmbH](https://lossless.gmbh)
+## Legal
 > MIT licensed | **&copy;** [Task Venture Capital GmbH](https://task.vc)
 | By using this npm module you agree to our [privacy policy](https://lossless.gmbH/privacy)
 [![repo-footer](https://lossless.gitlab.io/publicrelations/repofooter.svg)](https://maintainedby.lossless.com)
--- 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,15 +1,64 @@
-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>`;
-  public render() {
+  @property()
-    return html`
+  public notTyped = 'hello';
-      <style>
+
-        .maincontainer, .themeindicator {
+  @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;
@ -20,18 +69,43 @@ 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(`
+
-          .maincontainer, .themeindicator {
+      @container wccToolsViewport size(min-width: 1px) {
        .maincontainer,
        .themeindicator {
          border-radius: 50px;
        }
      }
      ${domtools.breakpoints.cssForPhablet(css`
        .maincontainer,
        .themeindicator {
          border-radius: 50px;
        }
      `)}
-      </style>
+
      pre b {
        color: green;
      }
    `,
  ];
  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;
+        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 wcctools from '../ts_web/index.js';
-import * as elements from './elements';
+import * as elements from './elements/index.js';
 wcctools.setupWccTools(elements as any, {});
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@ -0,0 +1,8 @@
 /**
 * autocreated commitinfo by @pushrocks/commitinfo
 */
 export const commitinfo = {
  name: '@designestate/dees-wcctools',
  version: '1.0.75',
  description: 'wcc tools for creating element catalogues'
 }
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/ts_web/elements/wcc-dashboard.ts
@ -1,20 +1,18 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { DeesElement, property, html, customElement, TemplateResult, queryAsync, render, domtools } from '@designestate/dees-element';
-import * as plugins from '../wcctools.plugins';
+import * as plugins from '../wcctools.plugins.js';
 import { WccDefaultElement } from './wcc-defaultelement';
 // wcc tools
-import './wcc-frame';
+import './wcc-frame.js';
-import './wcc-sidebar';
+import './wcc-sidebar.js';
-import './wcc-properties';
+import './wcc-properties.js';
-import { TTheme } from './wcc-properties';
+import { TTheme } from './wcc-properties.js';
-import { TElementType } from './wcc-sidebar';
+import { TElementType } from './wcc-sidebar.js';
-import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints';
+import { breakpoints } from '@designestate/dees-domtools';
 import { WccFrame } from './wcc-frame.js';
@customElement('wcc-dashboard')
-export class WccDashboard extends LitElement {
+export class WccDashboard extends DeesElement {
  public domtools: plugins.deesDomtools.DomTools;
  @property()
  public selectedType: TElementType;
@ -23,7 +21,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';
@ -35,13 +33,16 @@ 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;
  @queryAsync('wcc-frame')
  public wccFrame: Promise<WccFrame>;
  constructor(
-    elementsArg?: { [key: string]: LitElement },
+    elementsArg?: { [key: string]: DeesElement },
    pagesArg?: { [key: string]: () => TemplateResult }
  ) {
    super();
@ -90,23 +91,67 @@ export class WccDashboard extends LitElement {
        .selectedTheme=${this.selectedTheme}
        @selectedViewport=${(eventArg) => {
          this.selectedViewport = eventArg.detail;
-          this.performUpdate();
+          this.scheduleUpdate();
        }}
        @selectedTheme=${(eventArg) => {
          this.selectedTheme = eventArg.detail;
        }}
      ></wcc-properties>
      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
-        ${(() => {
+      </wcc-frame>
    `;
  }
  public setWarning(warningTextArg: string) {
    if (this.warning !== warningTextArg) {
      console.log(warningTextArg);
      this.warning = warningTextArg;
      setTimeout(() => {
        this.scheduleUpdate();
      }, 0);
    }
  }
  public async firstUpdated() {
    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
    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.selectedItem = this.elements[routeInfo.params.itemName];
        } else if (routeInfo.params.itemType === 'page') {
          this.selectedItem = this.pages[routeInfo.params.itemName];
        }
        const domtoolsInstance = await plugins.deesDomtools.elementBasic.setup();
        this.selectedTheme === 'bright'
          ? domtoolsInstance.themeManager.goBright()
          : domtoolsInstance.themeManager.goDark();
      }
    );
  }
  public async updated() {
    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
    await this.domtools.router._handleRouteState();
    const storeElement = this.selectedItem;
    const wccFrame: WccFrame = this.shadowRoot.querySelector('wcc-frame');
    if (this.selectedType === 'page' && this.selectedItem) {
      if (typeof this.selectedItem === 'function') {
-              return this.selectedItem();
+        console.log('slotting page.');
        const viewport = await wccFrame.getViewportElement();
        render(this.selectedItem(), viewport);
        console.log('rendered page.');
      } else {
        console.error('The selected item looks strange:');
        console.log(this.selectedItem);
      }
    } else if (this.selectedType === 'element' && this.selectedItem) {
-            // console.log(this.selectedItem);
+      console.log('slotting element.');
      const anonItem: any = this.selectedItem;
      if (!anonItem.demo) {
        this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
@ -119,64 +164,9 @@ export class WccDashboard extends LitElement {
        return;
      }
      this.setWarning(null);
-            return html`${anonItem.demo()}`;
+      const viewport = await wccFrame.getViewportElement();
      render(anonItem.demo(), viewport);;
    }
        })()}
      </wcc-frame>
    `;
  }
  public setWarning(warningTextArg: string) {
    if (this.warning !== warningTextArg) {
      console.log(warningTextArg);
      this.warning = warningTextArg;
      setTimeout(() => {
        super.performUpdate();
      }, 0);
    }
  }
  public async firstUpdated() {
    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
    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 TViewport;
        this.selectedTheme = routeInfo.params.theme as TTheme;
        if (routeInfo.params.itemType === 'element') {
          this.selectedItem = this.elements[routeInfo.params.itemName];
        } else if (routeInfo.params.itemType === 'page') {
          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();
      }
    );
  }
  private updating = false;
  public async updated() {
    if (this.updating) {
      return;
    }
    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
    await this.domtools.router._handleRouteState();
    this.updating = true;
    const storeElement = this.selectedItem;
    setTimeout(async () => {
      this.selectedItem = null;
      setTimeout(async () => {
        this.selectedItem = storeElement;
        setTimeout(() => {
          this.updating = false;
        }, 0);
      });
    }, 0);
  }
  public buildUrl() {
--- a/ts_web/elements/wcc-defaultelement.ts
+++ b/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!
    `;
  }
 }
--- a/ts_web/elements/wcc-frame.ts
+++ b/ts_web/elements/wcc-frame.ts
@ -1,25 +1,45 @@
-import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
+import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 declare global {
  interface HTMLElementTagNameMap {
    'wcc-frame': WccFrame;
  }
 }
@customElement('wcc-frame')
 export class WccFrame extends DeesElement {
  @property()
  public viewport: string;
-  public render(): TemplateResult {
+  public static styles = [
-    return html`
+    css`
      <style>
      :host {
        border: 10px solid #ffaeaf;
        position: absolute;
-          background: ${this.goBright ? '#333': '#000'};
+        background: ${cssManager.bdTheme('#333', '#000')};
        left: 200px;
        right: 0px;
        top: 0px;
        bottom: 100px;
        overflow-y: auto;
        overflow-x: auto;
      }
      .viewport {
        container-type: inline-size;
        container-name: wccToolsViewport;
        position: relative;
        min-height: 100%;
      }
    `,
  ]
  public render(): TemplateResult {
    return html`
      <style>
        :host {
          ${(() => {
          switch (this.viewport) {
            case 'desktop':
@ -49,13 +69,13 @@ export class WccFrame extends DeesElement {
        }
        .viewport {
          position: relative;
          ${this.viewport !== 'desktop'
            ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
-          : html``}
+            : html``
-          min-height: 100%;
+          }
          background:
-            ${this.goBright ? `
+          ${
            this.goBright ? `
              radial-gradient(#CCCCCC 3px, transparent 4px),
              radial-gradient(#CCCCCC 3px, transparent 4px),
              linear-gradient(#eeeeee 4px, transparent 0),
@ -73,12 +93,23 @@ export class WccFrame extends DeesElement {
              #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">
-        <slot></slot>
+        
      </div>
    `;
  }
  public async getDisplayedInstance() {
    await this.updateComplete;
    const slottedContent = this.children;
    console.log(slottedContent);
  }
  public async getViewportElement(): Promise<HTMLElement> {
    return this.shadowRoot.querySelector('.viewport') as HTMLElement;
  }
 }
--- 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 { DeesElement, property, html, customElement, TemplateResult, state } from '@designestate/dees-element';
-import { WccDashboard } from './wcc-dashboard';
+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 {
+export class WccProperties extends DeesElement {
-  @property()
+  @property({
-  dashboardRef: WccDashboard;
+    type: WccDashboard
  })
  public dashboardRef: WccDashboard;
  @property()
-  public selectedItem: TemplateResult | LitElement;
+  public selectedItem: (() => TemplateResult) | DeesElement;
  @property()
  public selectedViewport: TEnvironment = 'native';
@ -27,9 +31,11 @@ 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" />
      <style>
        :host {
          font-family: 'Roboto', sans-serif;
@ -55,11 +61,36 @@ export class WccProperties extends LitElement {
          grid-template-columns: 33% 33% 33%;
        }
        .material-symbols-outlined {
          font-family: 'Material Symbols Outlined';
          font-weight: normal;
          font-style: normal;
          font-size: 24px;  /* Preferred icon size */
          display: inline-block;
          line-height: 1;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;
          font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
        }
        .properties .property {
          padding: 5px;
          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;
@ -115,35 +146,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>
-          ${(() => {
+          ${this.propertyContent}
            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;
            }
          })()}
        </div>
        <div class="themeSelector">
          <div class="panelheading">Theme</div>
@ -154,7 +171,7 @@ export class WccProperties extends LitElement {
                this.selectTheme('dark');
              }}
            >
-              Dark<br /><i class="material-icons">brightness_3</i>
+              Dark<br /><i class="material-symbols-outlined">brightness_3</i>
            </div>
            <div
              class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@ -162,7 +179,7 @@ export class WccProperties extends LitElement {
                this.selectTheme('bright');
              }}
            >
-              Bright<br /><i class="material-icons">flare</i>
+              Bright<br /><i class="material-symbols-outlined">flare</i>
            </div>
          </div>
        </div>
@ -175,7 +192,7 @@ export class WccProperties extends LitElement {
                this.selectViewport('phone');
              }}
            >
-              Phone<br /><i class="material-icons">smartphone</i>
+              Phone<br /><i class="material-symbols-outlined">smartphone</i>
            </div>
            <div
              class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
@ -183,7 +200,7 @@ export class WccProperties extends LitElement {
                this.selectViewport('phablet');
              }}
            >
-              Phablet<br /><i class="material-icons">smartphone</i>
+              Phablet<br /><i class="material-symbols-outlined">smartphone</i>
            </div>
            <div
              class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
@ -191,7 +208,7 @@ export class WccProperties extends LitElement {
                this.selectViewport('tablet');
              }}
            >
-              Tablet<br /><i class="material-icons">tablet</i>
+              Tablet<br /><i class="material-symbols-outlined">tablet</i>
            </div>
            <div
              class="button ${this.selectedViewport === 'desktop' ||
@ -202,7 +219,7 @@ export class WccProperties extends LitElement {
                this.selectViewport('native');
              }}
            >
-              Desktop<br /><i class="material-icons">desktop_windows</i>
+              Desktop<br /><i class="material-symbols-outlined">desktop_windows</i>
            </div>
          </div>
        </div>
@ -212,6 +229,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 = async (propertyArg: any): Promise<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((await wccFrame.getViewportElement()).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 = await 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(
@ -223,6 +375,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 * as plugins from '../wcctools.plugins.js';
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
-import { WccDashboard } from './wcc-dashboard';
+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;
@ -39,6 +39,21 @@ export class WccSidebar extends LitElement {
          padding: 5px;
        }
        .material-symbols-outlined {
          font-family: 'Material Symbols Outlined';
          font-weight: normal;
          font-style: normal;
          font-size: 24px;  /* Preferred icon size */
          display: inline-block;
          line-height: 1;
          text-transform: none;
          letter-spacing: normal;
          word-wrap: normal;
          white-space: nowrap;
          direction: ltr;
          font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;
        }
        .heading {
          font-size: 24px;
          text-align: center;        
@ -78,13 +93,13 @@ export class WccSidebar extends LitElement {
          background: #455A64;
        }
-        .selectOption .material-icons {
+        .selectOption .material-symbols-outlined {
          color: #666;
          display: block;
          transition: all 0.2s;
        }
-        .selectOption.selected .material-icons {
+        .selectOption.selected .material-symbols-outlined {
          color: #000;
        }
@ -106,7 +121,7 @@ export class WccSidebar extends LitElement {
      <div class="menu">
        <h3>Live Websites</h3>
        ${this.websites.map(website => {
-          return html`<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">${website}</div></div>`;
+          return html`<div class="selectOption"><i class="material-symbols-outlined">ondemand_video</i><div class="text">${website}</div></div>`;
        })}
        <h3>Pages</h3>
        ${(() => {
@ -121,7 +136,7 @@ export class WccSidebar extends LitElement {
                  this.selectItem('page', pageName, item);
                }}
              >
-                <i class="material-icons">insert_drive_file</i>
+                <i class="material-symbols-outlined">insert_drive_file</i>
                <div class="text">${pageName}</div>
              </div>
            `;
@ -140,7 +155,7 @@ export class WccSidebar extends LitElement {
                  this.selectItem('element', elementName, item);
                }}
              >
-                <i class="material-icons">featured_video</i>
+                <i class="material-symbols-outlined">featured_video</i>
                <div class="text">${elementName}</div>
              </div>
            `;
@ -150,7 +165,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);
--- a/ts_web/index.ts
+++ b/ts_web/index.ts
@ -1,5 +1,5 @@
-import { WccDashboard } from './elements/wcc-dashboard';
+import { WccDashboard } from './elements/wcc-dashboard.js';
-import { LitElement, TemplateResult } from 'lit-element';
+import { LitElement, TemplateResult } from 'lit';
 const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => {
  let hasRun = false;
--- a/ts_web/tsconfig.json
+++ b/ts_web/tsconfig.json
@ -1,16 +0,0 @@
 {
  "compilerOptions": {
    "target": "es2017",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": ["es2017", "dom"],
    "declaration": true,
    "inlineSources": true,
    "inlineSourceMap": true,
    "noUnusedLocals": true,
    "noFallthroughCasesInSwitch": true,
    "outDir": "dist/",
    "skipLibCheck": true,
    "experimentalDecorators": true
  }
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,7 +1,9 @@
 {
  "compilerOptions": {
    "experimentalDecorators": true,
-    "target": "ES2017",
+    "useDefineForClassFields": false,
-    "moduleResolution": "Node"
+    "target": "ES2022",
    "module": "ES2022",
    "moduleResolution": "nodenext"
  }
 }
--- a/tslint.json
+++ b/tslint.json
@ -1,17 +0,0 @@
 {
  "extends": ["tslint:latest", "tslint-config-prettier"],
  "rules": {
    "semicolon": [true, "always"],
    "no-console": false,
    "ordered-imports": false,
    "object-literal-sort-keys": false,
    "member-ordering": {
      "options":{
        "order": [
          "static-method"
        ]
      }
    }
  },
  "defaultSeverity": "warning"
 }
Author	SHA1	Message	Date
Philipp Kunz	d1fe66f1ba	1.0.75	2023-01-07 14:05:26 +01:00
Philipp Kunz	8ea7c53154	fix(core): update	2023-01-07 14:05:25 +01:00
Philipp Kunz	ea0858fd27	1.0.74	2022-04-14 16:56:04 +02:00
Philipp Kunz	03c00919df	fix(core): update	2022-04-14 16:56:04 +02:00
Philipp Kunz	6917145b58	1.0.73	2022-03-24 18:30:55 +01:00
Philipp Kunz	2e2ad98ed8	fix(core): update	2022-03-24 18:30:54 +01:00
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
`@ -1 +1 @@`
	`export * from './test-demoelement';`	`export * from './test-demoelement.js';`