1.0.28

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.24",
+  "version": "1.0.28",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1057,27 +1057,26 @@
       }
     },
     "@designestate/dees-domtools": {
-      "version": "1.0.21",
-      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.21.tgz",
-      "integrity": "sha512-oT8f0vjxitSUn+452u3IZj8D9zQGMh7POw+zH1bGLrlmhHrh+b9hshLyMIec6gjNejAa+HSp+3pyxSALfq0wiQ==",
+      "version": "1.0.26",
+      "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.26.tgz",
+      "integrity": "sha512-EubzqqBQeKZ1f9tRg0QaYygDnsrwlzp8pbAYMfPFlorsAG8JxzrBElnOnd2sBkJOnCT8toNJ6UTH8TtC1G//iQ==",
       "requires": {
-        "@pushrocks/lik": "^4.0.12",
+        "@pushrocks/lik": "^4.0.13",
         "@pushrocks/smartpromise": "^3.0.6",
         "@pushrocks/smartstate": "^1.0.16",
         "lit-element": "^2.3.1"
       },
       "dependencies": {
         "@pushrocks/lik": {
-          "version": "4.0.12",
-          "resolved": "https://verdaccio.lossless.one/@pushrocks%2flik/-/lik-4.0.12.tgz",
-          "integrity": "sha512-ffd3bJL+kMuhXDulO5VC5OqgfhZR3I4HoVN7IBLlN1z6Dco6j4NFrp+/GKDoPssFPNQY4okv+N4Hm2T/7t+4CQ==",
+          "version": "4.0.13",
+          "resolved": "https://verdaccio.lossless.one/@pushrocks%2flik/-/lik-4.0.13.tgz",
+          "integrity": "sha512-Nde8rq1DjaDCREKlGGY/zS8g+eFu4zSU2jrbO4DdtYD+9oiauBMz2jzao3fr8401XpNW1Ex8T8FPdjUW8lUMow==",
           "requires": {
             "@pushrocks/smartdelay": "^2.0.9",
             "@pushrocks/smartmatch": "^1.0.7",
             "@pushrocks/smartpromise": "^3.0.6",
             "@pushrocks/smartrx": "^2.0.15",
             "@pushrocks/smarttime": "^3.0.18",
-            "@pushrocks/smartunique": "^3.0.3",
             "@types/minimatch": "^3.0.3",
             "symbol-tree": "^3.2.4"
           }
@@ -2463,16 +2462,15 @@
       },
       "dependencies": {
         "@pushrocks/lik": {
-          "version": "4.0.12",
-          "resolved": "https://verdaccio.lossless.one/@pushrocks%2flik/-/lik-4.0.12.tgz",
-          "integrity": "sha512-ffd3bJL+kMuhXDulO5VC5OqgfhZR3I4HoVN7IBLlN1z6Dco6j4NFrp+/GKDoPssFPNQY4okv+N4Hm2T/7t+4CQ==",
+          "version": "4.0.13",
+          "resolved": "https://verdaccio.lossless.one/@pushrocks%2flik/-/lik-4.0.13.tgz",
+          "integrity": "sha512-Nde8rq1DjaDCREKlGGY/zS8g+eFu4zSU2jrbO4DdtYD+9oiauBMz2jzao3fr8401XpNW1Ex8T8FPdjUW8lUMow==",
           "requires": {
             "@pushrocks/smartdelay": "^2.0.9",
             "@pushrocks/smartmatch": "^1.0.7",
             "@pushrocks/smartpromise": "^3.0.6",
             "@pushrocks/smartrx": "^2.0.15",
             "@pushrocks/smarttime": "^3.0.18",
-            "@pushrocks/smartunique": "^3.0.3",
             "@types/minimatch": "^3.0.3",
             "symbol-tree": "^3.2.4"
           }
@@ -4551,9 +4549,9 @@
       }
     },
     "dayjs": {
-      "version": "1.8.27",
-      "resolved": "https://verdaccio.lossless.one/dayjs/-/dayjs-1.8.27.tgz",
-      "integrity": "sha512-Jpa2acjWIeOkg8KURUHICk0EqnEFSSF5eMEscsOgyJ92ZukXwmpmRkPSUka7KHSfbj5eKH30ieosYip+ky9emQ=="
+      "version": "1.8.28",
+      "resolved": "https://verdaccio.lossless.one/dayjs/-/dayjs-1.8.28.tgz",
+      "integrity": "sha512-ccnYgKC0/hPSGXxj7Ju6AV/BP4HUkXC2u15mikXT5mX9YorEaoi1bEKOmAqdkJHN4EEkmAf97SpH66Try5Mbeg=="
     },
     "deasync": {
       "version": "0.1.20",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.24",
+  "version": "1.0.28",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",
@@ -13,7 +13,7 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.21",
+    "@designestate/dees-domtools": "^1.0.26",
     "@gitzone/tsrun": "^1.1.17",
     "@pushrocks/smartexpress": "^3.0.10",
     "lit-element": "^2.0.0-rc.5",

ts_web/elements/wcc-dashboard.ts

@@ -12,10 +12,7 @@ import './wcc-properties';
 @customElement('wcc-dashboard')
 export class WccDashboard extends LitElement {
   @property()
-  public selectedItem: TemplateResult | LitElement = WccDefaultElement as any;
-
-  @property()
-  public selectedInstance;
+  public selectedItem: TemplateResult | LitElement;
 
   @property()
   public selectedViewport: deesDomtools.breakpoints.TViewport = 'desktop';
@@ -57,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) {
@@ -77,6 +74,7 @@ export class WccDashboard extends LitElement {
             return html`${anonItem.demo()}`;
           } else {
             this.selectedItem = WccDefaultElement as any;
+            this.updateSlot();
           }
         })()}
       </wcc-frame>

ts_web/elements/wcc-frame.ts

@@ -1,11 +1,6 @@
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
 
-const breakpoints = {
-  desktop: 1240,
-  tablet: 700,
-  phablet: 500,
-  phone: 340,
-};
+import * as domtools from '@designestate/dees-domtools';
 
 @customElement('wcc-frame')
 export class WccFrame extends LitElement {
@@ -33,15 +28,21 @@ 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;
                 `;
           }
         })()}