diff --git a/package-lock.json b/package-lock.json
index c3cd8ff..eea26f1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1057,9 +1057,9 @@
}
},
"@designestate/dees-domtools": {
- "version": "1.0.25",
- "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-domtools/-/dees-domtools-1.0.25.tgz",
- "integrity": "sha512-JCsO/w6T6d4Jcp/C+ctQ99zzKrwrNHp265tzPaP8pfsy/LO6gN2C2wQ72+0fImDDvaZszd0NbUS4kt1LFQdvFg==",
+ "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.13",
"@pushrocks/smartpromise": "^3.0.6",
@@ -4549,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",
diff --git a/package.json b/package.json
index ea0a923..4d6f126 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
"author": "Lossless GmbH",
"license": "UNLICENSED",
"dependencies": {
- "@designestate/dees-domtools": "^1.0.25",
+ "@designestate/dees-domtools": "^1.0.26",
"@gitzone/tsrun": "^1.1.17",
"@pushrocks/smartexpress": "^3.0.10",
"lit-element": "^2.0.0-rc.5",
diff --git a/ts_web/elements/wcc-dashboard.ts b/ts_web/elements/wcc-dashboard.ts
index 40b732c..85c8c56 100644
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/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 {
{
this.selectedItem = eventArg.detail;
}}>
- {this.selectedViewport = eventArg.detail; this.updateSlot();}}>
+ {this.selectedViewport = eventArg.detail; this.updateSlot();}}>
${(() => {
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();
}
})()}
diff --git a/ts_web/elements/wcc-frame.ts b/ts_web/elements/wcc-frame.ts
index ac12649..1f0d1e0 100644
--- a/ts_web/elements/wcc-frame.ts
+++ b/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;
`;
}
})()}