1.0.84

.gitea/workflows/default_nottags.yaml

@@ -0,0 +1,66 @@
+name: Default (not tags)
+
+on:
+  push:
+    tags-ignore:
+      - '**'
+
+env:
+  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
+  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
+  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
+  NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm and npmci
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+
+      - name: Run npm prepare
+        run: npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${{ always() }}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build

.gitea/workflows/default_tags.yaml

@@ -0,0 +1,124 @@
+name: Default (tags)
+
+on:
+  push:
+    tags:
+      - '*'
+
+env:
+  IMAGE: registry.gitlab.com/hosttoday/ht-docker-node:npmci
+  NPMCI_COMPUTED_REPOURL: https://${{gitea.repository_owner}}:${{secrets.GITEA_TOKEN}}@gitea.lossless.digital/${{gitea.repository}}.git
+  NPMCI_TOKEN_NPM: ${{secrets.NPMCI_TOKEN_NPM}}
+  NPMCI_TOKEN_NPM2: ${{secrets.NPMCI_TOKEN_NPM2}}
+  NPMCI_GIT_GITHUBTOKEN: ${{secrets.NPMCI_GIT_GITHUBTOKEN}}
+  NPMCI_URL_CLOUDLY: ${{secrets.NPMCI_URL_CLOUDLY}}
+
+jobs:
+  security:
+    runs-on: ubuntu-latest
+    continue-on-error: true
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Audit production dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --prod
+        continue-on-error: true
+
+      - name: Audit development dependencies
+        run: |
+          npmci command npm config set registry https://registry.npmjs.org
+          npmci command pnpm audit --audit-level=high --dev
+        continue-on-error: true
+
+  test:
+    if: ${{ always() }}
+    needs: security
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Test stable
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm test
+
+      - name: Test build
+        run: |
+          npmci node install stable
+          npmci npm install
+          npmci npm build
+
+  release:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Release
+        run: |
+          npmci node install stable
+          npmci npm publish
+
+  metadata:
+    needs: test
+    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/')
+    runs-on: ubuntu-latest
+    container:
+      image: ${{ env.IMAGE }}
+    continue-on-error: true
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Prepare
+        run: |
+          pnpm install -g pnpm
+          pnpm install -g @shipzone/npmci
+          npmci npm prepare
+
+      - name: Code quality
+        run: |
+          npmci command npm install -g typescript
+          npmci npm install
+
+      - name: Trigger
+        run: npmci trigger
+
+      - name: Build docs and upload artifacts
+        run: |
+          npmci node install stable
+          npmci npm install
+          pnpm install -g @git.zone/tsdoc
+          npmci command tsdoc
+        continue-on-error: true

.gitlab-ci.yml

@@ -13,31 +13,24 @@ stages:
   - metadata
 
 before_script:
-  - npm install -g @shipzone/npmci
+  - pnpm install -g pnpm
+  - pnpm install -g @shipzone/npmci
+  - npmci npm prepare
 
 # ====================
 # security stage
 # ====================
-mirror:
-  stage: security
-  script:
-    - npmci git mirror
-  only:
-    - tags
-  tags:
-    - lossless
-    - docker
-    - notpriv
-
+# ====================
+# security stage
+# ====================
 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 npm config set registry https://registry.npmjs.org
+     - npmci command pnpm audit --audit-level=high --prod
   tags:
+    - lossless
     - docker
   allow_failure: true
 
@@ -45,11 +38,10 @@ 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
 
@@ -60,7 +52,6 @@ auditDevDependencies:
 testStable:
   stage: test
   script:
-    - npmci npm prepare
     - npmci node install stable
     - npmci npm install
     - npmci npm test
@@ -71,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
@@ -122,11 +112,9 @@ trigger:
 pages:
   stage: metadata
   script:
-    - npmci node install lts
-    - npmci command npm install -g @gitzone/tsdoc
-    - npmci npm prepare
+    - npmci node install stable
     - npmci npm install
-    - npmci command tsdoc
+    - npmci command npm run buildDocs
   tags:
     - lossless
     - docker

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,10 @@
     />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
+    <!--Lets load standard fonts-->
+    <link rel="preconnect" href="https://assetbroker.lossless.one/" crossorigin>
+    <link rel="stylesheet" href="https://assetbroker.lossless.one/fonts/fonts.css">
+
     <style>
       body {
         margin: 0px;

html/index.ts

@@ -1,6 +1,6 @@
 // dees tools
 import * as deesWccTools from '../ts_web/index.js';
-import * as deesDomTools from '@designestate/dees-domtools';
+import * as deesDomTools from '@design.estate/dees-domtools';
 
 // elements and pages
 import * as elements from '../test/elements/index.js';

package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@designestate/dees-wcctools",
-  "version": "1.0.73",
+  "name": "@design.estate/dees-wcctools",
+  "version": "1.0.84",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",
@@ -8,25 +8,25 @@
   "type": "module",
   "scripts": {
     "test": "(npm run build)",
-    "build": "(tsbuild element --web --allowimplicitany --skiplibcheck && tsbundle element)",
-    "watch": "tswatch element"
+    "build": "(tsbuild element --web --allowimplicitany && tsbundle element)",
+    "watch": "tswatch element",
+    "buildDocs": "tsdoc"
   },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@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"
+    "@design.estate/dees-domtools": "^2.0.55",
+    "@design.estate/dees-element": "^2.0.33",
+    "@push.rocks/smartdelay": "^3.0.5",
+    "lit": "^3.1.0"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.61",
-    "@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"
+    "@api.global/typedserver": "^3.0.9",
+    "@git.zone/tsbuild": "^2.1.66",
+    "@git.zone/tsbundle": "^2.0.8",
+    "@git.zone/tsrun": "^1.2.44",
+    "@git.zone/tswatch": "^2.0.7",
+    "@push.rocks/projectinfo": "^5.0.2"
   },
   "files": [
     "ts/**/*",

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 | **©** [Lossless GmbH](https://lossless.gmbh)
+## Legal
+> MIT licensed | **©** [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)

test/elements/test-demoelement.ts

@@ -1,14 +1,14 @@
 import {
   DeesElement,
   customElement,
-  TemplateResult,
+  type TemplateResult,
   html,
   property,
   css,
   cssManager,
-} from '@designestate/dees-element';
+} from '@design.estate/dees-element';
 
-import * as domtools from '@designestate/dees-domtools';
+import * as domtools from '@design.estate/dees-domtools';
 
 enum ETestEnum {
   'first' = 'first',

ts_web/00_commitinfo_data.ts

@@ -0,0 +1,8 @@
+/**
+ * autocreated commitinfo by @pushrocks/commitinfo
+ */
+export const commitinfo = {
+  name: '@design.estate/dees-wcctools',
+  version: '1.0.84',
+  description: 'wcc tools for creating element catalogues'
+}

ts_web/elements/wcc-dashboard.ts

@@ -1,4 +1,4 @@
-import { DeesElement, property, html, customElement, TemplateResult, queryAsync } from '@designestate/dees-element';
+import { DeesElement, property, html, customElement, type TemplateResult, queryAsync, render, domtools } from '@design.estate/dees-element';
 
 import * as plugins from '../wcctools.plugins.js';
 
@@ -6,9 +6,9 @@ import * as plugins from '../wcctools.plugins.js';
 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 { type TTheme } from './wcc-properties.js';
+import { type TElementType } from './wcc-sidebar.js';
+import { breakpoints } from '@design.estate/dees-domtools';
 import { WccFrame } from './wcc-frame.js';
 
 @customElement('wcc-dashboard')
@@ -61,7 +61,6 @@ export class WccDashboard extends DeesElement {
     return html`
       <style>
         :host {
-          font-family: 'Roboto', sans-serif;
           background: #fcfcfc;
           display: block;
           box-sizing: border-box;
@@ -98,32 +97,6 @@ export class WccDashboard extends DeesElement {
         }}
       ></wcc-properties>
       <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
-        ${(() => {
-          if (this.selectedType === 'page' && this.selectedItem) {
-            if (typeof this.selectedItem === 'function') {
-              console.log('slotting 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('slotting element.');
-            const anonItem: any = this.selectedItem;
-            if (!anonItem.demo) {
-              this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
-              return;
-            }
-            if (!(typeof anonItem.demo === 'function')) {
-              this.setWarning(
-                `component ${anonItem.name} has demo property, but it is not of type function`
-              );
-              return;
-            }
-            this.setWarning(null);
-            return html`${anonItem.demo()}`;
-          }
-        })()}
       </wcc-frame>
     `;
   }
@@ -160,24 +133,39 @@ export class WccDashboard extends DeesElement {
     );
   }
 
-  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);
+    const wccFrame: WccFrame = this.shadowRoot.querySelector('wcc-frame');
+
+    if (this.selectedType === 'page' && this.selectedItem) {
+      if (typeof this.selectedItem === 'function') {
+        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('slotting element.');
+      const anonItem: any = this.selectedItem;
+      if (!anonItem.demo) {
+        this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
+        return;
+      }
+      if (!(typeof anonItem.demo === 'function')) {
+        this.setWarning(
+          `component ${anonItem.name} has demo property, but it is not of type function`
+        );
+        return;
+      }
+      this.setWarning(null);
+      const viewport = await wccFrame.getViewportElement();
+      render(anonItem.demo(), viewport);;
+    }
   }
 
   public buildUrl() {

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, type TemplateResult, css, cssManager } from '@design.estate/dees-element';
 
-import * as domtools from '@designestate/dees-domtools';
+import * as domtools from '@design.estate/dees-domtools';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'wcc-frame': WccFrame;
+  }
+}
 
 @customElement('wcc-frame')
 export class WccFrame extends DeesElement {
   @property()
   public viewport: string;
 
+  public static styles = [
+    css`
+      :host {
+        border: 10px solid #ffaeaf;
+        position: absolute;
+        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 {
-          border: 10px solid #ffaeaf;
-          position: absolute;
-          background: ${this.goBright ? '#333': '#000'};
-          left: 200px;
-          right: 0px;
-          top: 0px;
-          bottom: 100px;
-          overflow-y: auto;
-          overflow-x: auto;
           ${(() => {
           switch (this.viewport) {
             case 'desktop':
@@ -45,19 +65,17 @@ export class WccFrame extends DeesElement {
                   }px;
                 `;
           }
-        })()}
+          })()}
         }
-        
+
         .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%;
+            ? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
+            : html``
+          }
           background:
-            ${this.goBright ? `
+          ${
+            this.goBright ? `
               radial-gradient(#CCCCCC 3px, transparent 4px),
               radial-gradient(#CCCCCC 3px, transparent 4px),
               linear-gradient(#eeeeee 4px, transparent 0),
@@ -75,11 +93,12 @@ 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>
     `;
   }
@@ -89,4 +108,8 @@ export class WccFrame extends DeesElement {
     const slottedContent = this.children;
     console.log(slottedContent);
   }
+
+  public async getViewportElement(): Promise<HTMLElement> {
+    return this.shadowRoot.querySelector('.viewport') as HTMLElement;
+  }
 }

ts_web/elements/wcc-properties.ts

@@ -1,4 +1,4 @@
-import { DeesElement, property, html, customElement, TemplateResult, state } from '@designestate/dees-element';
+import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/dees-element';
 import { WccDashboard } from './wcc-dashboard.js';
 
 export type TPropertyType = 'String' | 'Number' | 'Boolean' | 'Object' | 'Enum' | 'Array';
@@ -36,7 +36,6 @@ export class WccProperties extends DeesElement {
 
   public render(): TemplateResult {
     return html`
-      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
       <style>
         :host {
           font-family: 'Roboto', sans-serif;
@@ -62,6 +61,21 @@ export class WccProperties extends DeesElement {
           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' 400, 'GRAD' 0, 'opsz' 48;
+        }
+
         .properties .property {
           padding: 5px;
           background: #444;
@@ -97,7 +111,6 @@ export class WccProperties extends DeesElement {
           transition: all 0.2s;
         }
         .button:hover {
-          cursor: pointer;
           color: #333;
           background: #fff;
         }
@@ -107,7 +120,6 @@ export class WccProperties extends DeesElement {
         }
 
         .button.selected:hover {
-          cursor: pointer;
           color: #ffffff;
           background: #455a64;
         }
@@ -125,7 +137,6 @@ export class WccProperties extends DeesElement {
         }
 
         .docs:hover {
-          cursor: pointer;
           color: #333;
           background: #fff;
         }
@@ -157,7 +168,7 @@ export class WccProperties extends DeesElement {
                 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}"
@@ -165,7 +176,7 @@ export class WccProperties extends DeesElement {
                 this.selectTheme('bright');
               }}
             >
-              Bright<br /><i class="material-icons">flare</i>
+              Bright<br /><i class="material-symbols-outlined">flare</i>
             </div>
           </div>
         </div>
@@ -178,7 +189,7 @@ export class WccProperties extends DeesElement {
                 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}"
@@ -186,7 +197,7 @@ export class WccProperties extends DeesElement {
                 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}"
@@ -194,7 +205,7 @@ export class WccProperties extends DeesElement {
                 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' ||
@@ -205,7 +216,7 @@ export class WccProperties extends DeesElement {
                 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>
@@ -243,7 +254,7 @@ export class WccProperties extends DeesElement {
       });
       return enumValues;
     };
-    const determinePropertyType = (propertyArg: any): TPropertyType => {
+    const determinePropertyType = async (propertyArg: any): Promise<TPropertyType> => {
       const typeName: any | undefined = propertyArg.type.name;
       if (typeName) {
         return typeName;
@@ -265,7 +276,7 @@ export class WccProperties extends DeesElement {
       console.log(anonItem.elementProperties);
       const wccFrame = await this.dashboardRef.wccFrame;
       let firstFoundInstantiatedElement: HTMLElement;
-      for (const element of Array.from(wccFrame.children)) {
+      for (const element of Array.from((await wccFrame.getViewportElement()).children)) {
         if (element instanceof (this.selectedItem as any)) {
           firstFoundInstantiatedElement = element as HTMLElement;
           break;
@@ -287,7 +298,7 @@ export class WccProperties extends DeesElement {
           continue;
         }
         const property = classProperties.get(key);
-        const propertyTypeString = determinePropertyType(property);
+        const propertyTypeString = await determinePropertyType(property);
         propertyArray.push(
           html`
             <div class="property">

ts_web/elements/wcc-sidebar.ts

@@ -1,14 +1,11 @@
 import * as plugins from '../wcctools.plugins.js';
-import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
+import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
 import { WccDashboard } from './wcc-dashboard.js';
 
 export type TElementType = 'element' | 'page';
 
 @customElement('wcc-sidebar')
 export class WccSidebar extends DeesElement {
-  @property({type: Array})
-  public websites: string[] = [];
-
   @property({ attribute: false })
   public selectedItem: DeesElement | (() => TemplateResult);
 
@@ -25,7 +22,8 @@ export class WccSidebar extends DeesElement {
         :host {
           display: block;
           border-right: 1px solid #999;
-          font-family: 'Roboto', sans-serif;
+          font-family: 'Roboto', 'Inter', sans-serif;
+          font-size: 12px;
           box-sizing: border-box;
           position: absolute;
           left: 0px;
@@ -39,21 +37,23 @@ export class WccSidebar extends DeesElement {
           padding: 5px;
         }
 
-        .heading {
-          font-size: 24px;
-          text-align: center;        
-          margin: 20px 5px 5px 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' 400, 'GRAD' 0, 'opsz' 48;
         }
 
-        .heading a {
-          text-decoration: none;
-          color: #fff;
-        }
-
-        .subheading {
-          text-align: center;
-        }
         .selectOption {
+          user-select: none;
           position: relative;
           line-height: 24px;
           padding: 5px;
@@ -62,7 +62,6 @@ export class WccSidebar extends DeesElement {
           grid-template-columns: 28px auto;
         }
         .selectOption:hover {
-          cursor: pointer;
           padding: 5px;
           color: #333;
           background: #fff;
@@ -73,18 +72,17 @@ export class WccSidebar extends DeesElement {
         }
 
         .selectOption.selected:hover {
-          cursor: pointer;
           color: #ffffff;
           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;
         }
 
@@ -97,17 +95,7 @@ export class WccSidebar extends DeesElement {
 
         
       </style>
-      <div class="heading">
-        <a href="https://gitlab.com/designestate/dees-wcctools" target="_blank">wcctools</a>
-      </div>
-      <div class="subheading">
-        by Lossless GmbH
-      </div>
       <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>`;
-        })}
         <h3>Pages</h3>
         ${(() => {
           const pages = Object.keys(this.dashboardRef.pages);
@@ -121,7 +109,7 @@ export class WccSidebar extends DeesElement {
                   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,13 +128,13 @@ export class WccSidebar extends DeesElement {
                   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>
             `;
           });
         })()}
-      </menu>
+      </div>
     `;
   }
 

ts_web/index.ts

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

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

ts_web/wcctools.plugins.ts

@@ -1,10 +1,10 @@
-import * as smartdelay from '@pushrocks/smartdelay';
+import * as smartdelay from '@push.rocks/smartdelay';
 
 export {
   smartdelay
 };
 
-import * as deesDomtools from '@designestate/dees-domtools';
+import * as deesDomtools from '@design.estate/dees-domtools';
 
 export {
   deesDomtools

tsconfig.json

@@ -1,7 +1,14 @@
 {
   "compilerOptions": {
     "experimentalDecorators": true,
-    "target": "ES2017",
-    "moduleResolution": "Node"
-  }
+    "useDefineForClassFields": false,
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true
+  },
+  "exclude": [
+    "dist_*/**/*.d.ts"
+  ]
 }

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