1.0.32

package.json

@@ -1,19 +1,21 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.23",
+  "version": "1.0.32",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",
   "typings": "dist_ts_web/index.d.ts",
   "scripts": {
-    "test": "npm run build",
+    "test": "(npm run build)",
-    "build": "tsbuild custom ts_web --web",
+    "build": "(tsbuild custom ts_web --web && tsbundle element)",
     "watch": "tswatch element"
   },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@gitzone/tsrun": "^1.1.17",
+    "@designestate/dees-domtools": "^1.0.28",
+    "@gitzone/tsrun": "^1.2.12",
+    "@pushrocks/smartdelay": "^2.0.9",
     "@pushrocks/smartexpress": "^3.0.10",
     "lit-element": "^2.0.0-rc.5",
     "lit-html": "^1.0.0-rc.2",
@@ -21,8 +23,9 @@
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.24",
+    "@gitzone/tsbundle": "^1.0.69",
     "@gitzone/tswatch": "^1.0.46",
-    "@pushrocks/projectinfo": "^4.0.2",
+    "@pushrocks/projectinfo": "^4.0.5",
     "tslint": "^6.1.2",
     "tslint-config-prettier": "^1.17.0"
   },

ts_web/elements/wcc-dashboard.ts

@@ -1,5 +1,7 @@
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
 
+import * as plugins from '../wcctools.plugins';
+
 import { WccDefaultElement } from './wcc-defaultelement';
 
 // wcc tools
@@ -10,13 +12,10 @@ import './wcc-properties';
 @customElement('wcc-dashboard')
 export class WccDashboard extends LitElement {
   @property()
-  public selectedItem: TemplateResult | LitElement = WccDefaultElement as any;
+  public selectedItem: TemplateResult | LitElement;
 
   @property()
-  public selectedInstance;
+  public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
-
-  @property()
-  public selectedViewport: string = 'desktop';
 
   @property()
   public pages: { [key: string]: TemplateResult } = {};
@@ -55,7 +54,7 @@ export class WccDashboard extends LitElement {
       <wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
         this.selectedItem = eventArg.detail;
       }}></wcc-sidebar>
-      <wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} .selectedInstance=${this.selectedInstance} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
+      <wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
       <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
         ${(() => {
           if (this.selectedItem instanceof TemplateResult) {
@@ -74,21 +73,29 @@ export class WccDashboard extends LitElement {
             this.setWarning(null);
             return html`${anonItem.demo()}`;
           } else {
-            this.selectedItem = WccDefaultElement as any;
+            this.updateSlot();
           }
         })()}
       </wcc-frame>
-      ${this.selectedViewport}
     `;
   }
 
-  public updateSlot() {
+  private currentlyUpdating: boolean = false;
-    console.log('updateSlot');
+  public async updateSlot() {
-    const oldSelectedItem = this.selectedItem;
+    if (this.currentlyUpdating) {
+      return;
+    }
+    this.currentlyUpdating = true;
+    !this.selectedItem ? this.selectedItem = WccDefaultElement as any : null;
+    const localSelectedItem = this.selectedItem;
     this.selectedItem = null;
-    setTimeout(() => {
+    console.log('updateSlot');
-      this.selectedItem = oldSelectedItem;
+    const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-    }, 0);
+    domtools.setVirtualViewport(this.selectedViewport);
+    await super.performUpdate();
+    this.selectedItem = localSelectedItem;
+    await super.performUpdate();
+    this.currentlyUpdating = false;
   }
 
   public setWarning(warningTextArg: string) {

ts_web/elements/wcc-defaultelement.ts

@@ -5,9 +5,6 @@ import { TemplateResult } from 'lit-html';
 export class WccDefaultElement extends LitElement {
   public static demo = () => html`<wcc-defaultelement></wcc-defaultelement>`;
 
-  @property()
-  public footerText = `Lossless GmbH - 2018`;
-
   constructor() {
     super();
 

ts_web/elements/wcc-frame.ts

@@ -1,11 +1,6 @@
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
 
-const breakpoints = {
+import * as domtools from '@designestate/dees-domtools';
-  desktop: 1240,
-  tablet: 700,
-  phablet: 500,
-  phone: 340,
-};
 
 @customElement('wcc-frame')
 export class WccFrame extends LitElement {
@@ -33,19 +28,26 @@ export class WccFrame extends LitElement {
                 `;
             case 'tablet':
               return `
-                  padding: 0px ${(document.body.clientWidth - 200 - breakpoints.tablet) / 2}px;
+                  padding: 0px ${
+                    (document.body.clientWidth - 200 - domtools.breakpoints.tablet) / 2
+                  }px;
                 `;
             case 'phablet':
               return `
-                  padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phablet) / 2}px;
+                  padding: 0px ${
+                    (document.body.clientWidth - 200 - domtools.breakpoints.phablet) / 2
+                  }px;
                 `;
             case 'phone':
               return `
-                  padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phone) / 2}px;
+                  padding: 0px ${
+                    (document.body.clientWidth - 200 - domtools.breakpoints.phone) / 2
+                  }px;
                 `;
           }
         })()}
         }
+        
         .viewport {
           position: relative;
           ${this.viewport !== 'desktop'

ts_web/elements/wcc-properties.ts

@@ -13,9 +13,6 @@ export class WccProperties extends LitElement {
   @property()
   public selectedItem: TemplateResult | LitElement;
 
-  @property()
-  public selectedInstance;
-
   @property()
   public selectedViewport = 'native';
 
@@ -126,15 +123,7 @@ export class WccProperties extends LitElement {
                 returnArray.push(
                   html`
                     <div class="property">
-                      ${key} / ${classProperties.get(key).type.name} /
+                      ${key} / ${classProperties.get(key).type.name}
-                      <pre>
-${(() => {
-                          const result = this.selectedInstance
-                            ? JSON.stringify(this.selectedInstance[key], null, 2)
-                            : null;
-                          return result;
-                        })()}</pre
-                      >
                     </div>
                   `
                 );

ts_web/wcctools.plugins.ts

@@ -0,0 +1,11 @@
+import * as smartdelay from '@pushrocks/smartdelay';
+
+export {
+  smartdelay
+};
+
+import * as deesDomtools from '@designestate/dees-domtools';
+
+export {
+  deesDomtools
+};