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

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

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

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;
@@ -17,7 +21,7 @@
       }
     </style>
 
-    <script src="./index.ts"></script>
+    <script type="module" src="/bundle.js"></script>
   </head>
   <body>
   </body>

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';
+import * as deesDomTools from '@design.estate/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();

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"

package.json

@@ -1,34 +1,32 @@
 {
-  "name": "@designestate/dees-wcctools",
+  "name": "@design.estate/dees-wcctools",
-  "version": "1.0.44",
+  "version": "1.0.84",
   "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.74",
+    "@design.estate/dees-domtools": "^2.0.55",
-    "@designestate/dees-element": "^1.0.6",
+    "@design.estate/dees-element": "^2.0.33",
-    "@gitzone/tsrun": "^1.2.12",
+    "@push.rocks/smartdelay": "^3.0.5",
-    "@pushrocks/smartdelay": "^2.0.10",
+    "lit": "^3.1.0"
-    "@pushrocks/smartexpress": "^3.0.97",
-    "lit-element": "^2.4.0",
-    "lit-html": "^1.3.0",
-    "typescript": "^4.1.2"
   },
   "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.25",
+    "@api.global/typedserver": "^3.0.9",
-    "@gitzone/tsbundle": "^1.0.78",
+    "@git.zone/tsbuild": "^2.1.66",
-    "@gitzone/tswatch": "^1.0.50",
+    "@git.zone/tsbundle": "^2.0.8",
-    "@pushrocks/projectinfo": "^4.0.5",
+    "@git.zone/tsrun": "^1.2.44",
-    "tslint": "^6.1.3",
+    "@git.zone/tswatch": "^2.0.7",
-    "tslint-config-prettier": "^1.17.0"
+    "@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/index.ts

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

test/elements/test-demoelement.ts

@@ -1,15 +1,64 @@
-import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
+import {
+  DeesElement,
+  customElement,
+  type TemplateResult,
+  html,
+  property,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
 
-import * as domtools from '@designestate/dees-domtools';
+import * as domtools from '@design.estate/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>
     `;
   }

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, {});

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,20 +1,18 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { DeesElement, property, html, customElement, type TemplateResult, queryAsync, render, domtools } from '@design.estate/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 { type TTheme } from './wcc-properties.js';
-import { TElementType } from './wcc-sidebar';
+import { type TElementType } from './wcc-sidebar.js';
-import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints';
+import { breakpoints } from '@design.estate/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();
@@ -60,7 +61,6 @@ export class WccDashboard extends LitElement {
     return html`
       <style>
         :host {
-          font-family: 'Roboto', sans-serif;
           background: #fcfcfc;
           display: block;
           box-sizing: border-box;
@@ -90,23 +90,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.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,66 +163,14 @@ 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('/:itemType/:itemName/:viewport/:theme', async (routeInfo) => {
-      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.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';
-    });
-  }
-
-  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() {
     this.domtools.router.pushUrl(
-      `/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
+      `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`
-        this.selectedTheme
-      }`
     );
   }
 }

ts_web/elements/wcc-defaultelement.ts

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

ts_web/elements/wcc-frame.ts

@@ -1,25 +1,45 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-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 LitElement {
+export class WccFrame extends DeesElement {
   @property()
   public viewport: string;
 
-  public render(): TemplateResult {
+  public static styles = [
-    return html`
+    css`
-      <style>
       :host {
         border: 10px solid #ffaeaf;
-          background: #222;
         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 {
           ${(() => {
           switch (this.viewport) {
             case 'desktop':
@@ -49,12 +69,22 @@ export class WccFrame extends LitElement {
         }
 
         .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 ? `
+              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,11 +93,23 @@ 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">
-        <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;
+  }
 }

ts_web/elements/wcc-properties.ts

@@ -1,5 +1,7 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { DeesElement, property, html, customElement, type TemplateResult, state } from '@design.estate/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,13 +61,39 @@ 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' 400, '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;
           border-right: 1px solid #999;
         }
         .selectorButtons2 {
@@ -79,7 +111,6 @@ export class WccProperties extends LitElement {
           transition: all 0.2s;
         }
         .button:hover {
-          cursor: pointer;
           color: #333;
           background: #fff;
         }
@@ -89,7 +120,6 @@ export class WccProperties extends LitElement {
         }
 
         .button.selected:hover {
-          cursor: pointer;
           color: #ffffff;
           background: #455a64;
         }
@@ -107,42 +137,27 @@ export class WccProperties extends LitElement {
         }
 
         .docs:hover {
-          cursor: pointer;
           color: #333;
           background: #fff;
         }
 
         .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>
@@ -153,7 +168,7 @@ export class WccProperties extends LitElement {
                 this.selectTheme('dark');
               }}
             >
-              Dark<br /><i class="material-icons">nights_stay</i>
+              Dark<br /><i class="material-symbols-outlined">brightness_3</i>
             </div>
             <div
               class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@@ -161,7 +176,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>
@@ -174,7 +189,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}"
@@ -182,7 +197,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}"
@@ -190,7 +205,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' ||
@@ -201,7 +216,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>
@@ -211,6 +226,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(
@@ -222,6 +372,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);

ts_web/elements/wcc-sidebar.ts

@@ -1,16 +1,13 @@
-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, type TemplateResult } from '@design.estate/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;
@@ -25,7 +22,8 @@ export class WccSidebar extends LitElement {
         :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,15 +37,23 @@ export class WccSidebar extends LitElement {
           padding: 5px;
         }
 
-        .heading {
+        .material-symbols-outlined {
-          font-size: 24px;
+          font-family: 'Material Symbols Outlined';
-          text-align: center;
+          font-weight: normal;
-          margin: 20px 5px 5px 5px;
+          font-style: normal;
-        }
+          font-size: 24px;  /* Preferred icon size */
-        .subheading {
+          display: inline-block;
-          text-align: center;
+          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;
         }
+
         .selectOption {
+          user-select: none;
           position: relative;
           line-height: 24px;
           padding: 5px;
@@ -56,7 +62,6 @@ export class WccSidebar extends LitElement {
           grid-template-columns: 28px auto;
         }
         .selectOption:hover {
-          cursor: pointer;
           padding: 5px;
           color: #333;
           background: #fff;
@@ -67,18 +72,17 @@ export class WccSidebar extends LitElement {
         }
 
         .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;
         }
 
@@ -91,16 +95,7 @@ export class WccSidebar extends LitElement {
 
         
       </style>
-      <div class="heading">
-        wcc-tools
-      </div>
-      <div class="subheading">
-      </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);
@@ -114,7 +109,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>
             `;
@@ -127,23 +122,23 @@ 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', 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>
     `;
   }
 
-  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
+  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | DeesElement) {
     console.log('selected item');
     console.log(itemNameArg);
     console.log(itemArg);

ts_web/index.ts

@@ -1,7 +1,7 @@
-import { WccDashboard } from './elements/wcc-dashboard';
+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 }) => {
+const setupWccTools = (elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: () => TemplateResult }) => {
   let hasRun = false;
   const runWccToolsSetup = async () => {
     if (document.readyState === 'complete' && !hasRun) {

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",
+    "useDefineForClassFields": false,
-    "moduleResolution": "Node"
+    "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"
-}