1.0.51

fix(core): update
1.0.50
2020-12-07 04:07:32 +00:00 · 2020-12-07 04:07:32 +00:00 · 2020-12-07 04:07:03 +00:00 · 2020-12-07 04:07:03 +00:00 · 2020-11-30 00:50:48 +00:00 · 2020-11-30 00:50:47 +00:00
13 changed files with 1104 additions and 3029 deletions
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -19,23 +19,35 @@ mirror:
  stage: security
  script:
    - npmci git mirror
  only:
    - tags
  tags:
    - lossless
    - docker
    - notpriv
-audit:
+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
  tags:
    - docker
 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
+    - npmci command npm audit --audit-level=high --only=dev
  tags:
    - lossless
    - docker
-    - notpriv
+  allow_failure: true
 # ====================
 # test stage
@ -50,9 +62,7 @@ testStable:
    - npmci npm test
  coverage: /\d+.?\d+?\%\s*coverage/
  tags:
    - lossless
    - docker
    - priv
 testBuild:
  stage: test
@ -63,9 +73,7 @@ testBuild:
    - npmci command npm run build
  coverage: /\d+.?\d+?\%\s*coverage/
  tags:
    - lossless
    - docker
    - notpriv
 release:
  stage: release
@ -85,6 +93,8 @@ release:
 codequality:
  stage: metadata
  allow_failure: true
  only:
    - tags
  script:
    - npmci command npm install -g tslint typescript
    - npmci npm prepare
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -15,7 +15,7 @@
            "properties": {
              "projectType": {
                "type": "string",
-                "enum": ["website", "element", "service", "npm"]
+                "enum": ["website", "element", "service", "npm", "wcc"]
              }
            }
          }
--- a/html/index.html
+++ b/html/index.html
@ -9,7 +9,6 @@
      content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"
    />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
    <style>
      body {
@ -18,7 +17,8 @@
      }
    </style>
-    <script src="../test/index.ts"></script>
+    <script src="./index.ts"></script>
  </head>
-  <body></body>
+  <body>
  </body>
 </html>
--- a/html/index.ts
+++ b/html/index.ts
@ -0,0 +1,10 @@
 // dees tools
 import * as deesWccTools from '../ts_web';
 import * as deesDomTools from '@designestate/dees-domtools';
 // elements and pages
 import * as elements from '../test/elements';
 import * as pages from '../test/pages';
 deesWccTools.setupWccTools(elements as any, pages);
 deesDomTools.elementBasic.setup();
--- a/npmextra.json
+++ b/npmextra.json
@ -1,6 +1,6 @@
 {
  "gitzone": {
-    "projectType": "element",
+    "projectType": "wcc",
    "module": {
      "githost": "gitlab.com",
      "gitscope": "designestate",
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "@designestate/dees-wcctools",
-  "version": "1.0.38",
+  "version": "1.0.51",
  "private": false,
  "description": "wcc tools for creating element catalogues",
  "main": "dist_ts_web/index.js",
@ -13,10 +13,11 @@
  "author": "Lossless GmbH",
  "license": "UNLICENSED",
  "dependencies": {
-    "@designestate/dees-domtools": "^1.0.74",
+    "@designestate/dees-domtools": "^1.0.81",
    "@designestate/dees-element": "^1.0.9",
    "@gitzone/tsrun": "^1.2.12",
    "@pushrocks/smartdelay": "^2.0.10",
-    "@pushrocks/smartexpress": "^3.0.97",
+    "@pushrocks/smartexpress": "^3.0.98",
    "lit-element": "^2.4.0",
    "lit-html": "^1.3.0",
    "typescript": "^4.1.2"
--- a/test/elements/test-demoelement.ts
+++ b/test/elements/test-demoelement.ts
@ -1,27 +1,38 @@
-import { LitElement, customElement, TemplateResult, html } from 'lit-element';
+import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
@customElement('test-demoelement')
-export class TestDemoelement extends LitElement {
+export class TestDemoelement extends DeesElement {
  public static demo = () => html`<test-demoelement></test-demoelement>`;
  public render() {
    return html`
      <style>
-        .maincontainer {
+        .maincontainer, .themeindicator {
          display: block;
          background: #fff;
          padding: 10px;
          border-radius: 10px;
          margin-bottom: 20px;
        }
        .maincontainer {
            color: #fff;
            background: #000;
        }
        .themeindicator {
          color: ${this.goBright ? '#000' : '#fff'};
          background: ${this.goBright ? '#fff' : '#000'};
        }
        ${domtools.breakpoints.cssForPhablet(`
-          .maincontainer {
+          .maincontainer, .themeindicator {
-            background: #000;
+            border-radius: 50px;
          }
        `)}
      </style>
-      <div class="maincontainer">This is a demo element</div>
+      <div class="maincontainer"><slot>This is a demo element</slot></div>
      <div class="themeindicator">
        You have selected the ${this.goBright ? 'bright' : 'dark'} theme;
      </div>
    `;
  }
 }
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/ts_web/elements/wcc-dashboard.ts
@ -20,7 +20,10 @@ export class WccDashboard extends LitElement {
  public selectedType: TElementType;
  @property()
-  public selectedItem: TemplateResult | LitElement;
+  public selectedItemName: string;
  @property()
  public selectedItem: (() => TemplateResult) | LitElement;
  @property()
  public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';
@ -29,7 +32,7 @@ export class WccDashboard extends LitElement {
  public selectedTheme: TTheme = 'dark';
  @property()
-  public pages: { [key: string]: TemplateResult } = {};
+  public pages: { [key: string]: () => TemplateResult } = {};
  @property()
  public elements: { [key: string]: LitElement } = {};
@ -39,7 +42,7 @@ export class WccDashboard extends LitElement {
  constructor(
    elementsArg?: { [key: string]: LitElement },
-    pagesArg?: { [key: string]: TemplateResult }
+    pagesArg?: { [key: string]: () => TemplateResult }
  ) {
    super();
    if (elementsArg) {
@ -56,7 +59,6 @@ export class WccDashboard extends LitElement {
  public render(): TemplateResult {
    return html`
      <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto');
        :host {
          font-family: 'Roboto', sans-serif;
          background: #fcfcfc;
@ -70,17 +72,22 @@ export class WccDashboard extends LitElement {
      <wcc-sidebar
        .dashboardRef=${this}
        .selectedItem=${this.selectedItem}
        @selectedItem=${(eventArg) => {
          this.selectedItem = eventArg.detail;
        }}
        @selectedType=${(eventArg) => {
          this.selectedType = eventArg.detail;
        }}
        @selectedItemName=${(eventArg) => {
          this.selectedItemName = eventArg.detail;
        }}
        @selectedItem=${(eventArg) => {
          this.selectedItem = eventArg.detail;
        }}
      ></wcc-sidebar>
      <wcc-properties
        .dashboardRef=${this}
        .warning="${this.warning}"
        .selectedItem=${this.selectedItem}
        .selectedViewport=${this.selectedViewport}
        .selectedTheme=${this.selectedTheme}
        @selectedViewport=${(eventArg) => {
          this.selectedViewport = eventArg.detail;
          this.performUpdate();
@ -91,9 +98,14 @@ export class WccDashboard extends LitElement {
      ></wcc-properties>
      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
        ${(() => {
-          if (this.selectedItem instanceof TemplateResult) {
+          if (this.selectedType === 'page' && this.selectedItem) {
-            return this.selectedItem;
+            if (typeof this.selectedItem === 'function') {
-          } else if (this.selectedItem) {
+              return this.selectedItem();
            } else {
              console.error('The selected item looks strange:');
              console.log(this.selectedItem);
            }
          } else if (this.selectedType === 'element' && this.selectedItem) {
            // console.log(this.selectedItem);
            const anonItem: any = this.selectedItem;
            if (!anonItem.demo) {
@ -126,19 +138,25 @@ export class WccDashboard extends LitElement {
  public async firstUpdated() {
    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-    this.domtools.router.on('/:itemType/:itemName/:viewport/:theme', async (routeInfo) => {
+    this.domtools.router.on(
-      if (routeInfo.params.itemType === 'element') {
+      '/wcctools-route/:itemType/:itemName/:viewport/:theme',
-        this.selectedType = 'element';
+      async (routeInfo) => {
-        this.selectedItem = this.elements[routeInfo.params.itemName];
+        this.selectedType = routeInfo.params.itemType as TElementType;
-      } else if (routeInfo.params.itemType === 'page') {
+        this.selectedItemName = routeInfo.params.itemName;
-        this.selectedType = 'page';
+        this.selectedViewport = routeInfo.params.viewport as TViewport;
-        this.selectedItem = this.pages[routeInfo.params.pageName];
+        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();
        domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
        this.selectedTheme === 'bright'
          ? domtoolsInstance.themeManager.goBright()
          : domtoolsInstance.themeManager.goDark();
      }
-      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;
    });
  }
  private updating = false;
@ -150,10 +168,8 @@ export class WccDashboard extends LitElement {
    await this.domtools.router._handleRouteState();
    this.updating = true;
    const storeElement = this.selectedItem;
    setTimeout(async () => {
      this.selectedItem = null;
      setTimeout(async () => {
        this.selectedItem = storeElement;
        setTimeout(() => {
@ -165,10 +181,7 @@ export class WccDashboard extends LitElement {
  public buildUrl() {
    this.domtools.router.pushUrl(
-      `/${this.selectedType}/${(this.selectedItem as any).name}/${this.selectedViewport}/${
+      `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${this.selectedTheme}`
        this.selectedTheme
      }`,
      0
    );
  }
 }
--- a/ts_web/elements/wcc-defaultelement.ts
+++ b/ts_web/elements/wcc-defaultelement.ts
@ -16,7 +16,6 @@ export class WccDefaultElement extends LitElement {
  public render(): TemplateResult {
    return html`
      <style>
        @import url('https://fonts.googleapis.com/css?family=Roboto');
        :host {
          font-family: 'Roboto', sans-serif;
          background: #333;
--- a/ts_web/elements/wcc-properties.ts
+++ b/ts_web/elements/wcc-properties.ts
@ -130,6 +130,9 @@ export class WccProperties extends LitElement {
          ${(() => {
            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()) {
@ -150,7 +153,7 @@ export class WccProperties extends LitElement {
                this.selectTheme('dark');
              }}
            >
-              Dark<br /><i class="material-icons">nights_stay</i>
+              Dark<br /><i class="material-icons">brightness_3</i>
            </div>
            <div
              class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
--- a/ts_web/elements/wcc-sidebar.ts
+++ b/ts_web/elements/wcc-sidebar.ts
@ -10,7 +10,7 @@ export class WccSidebar extends LitElement {
  public websites: string[] = [];
  @property({ attribute: false })
-  public selectedItem: LitElement | TemplateResult;
+  public selectedItem: LitElement | (() => TemplateResult);
  @property({ attribute: false })
  public selectedType: TElementType;
@ -44,6 +44,12 @@ export class WccSidebar extends LitElement {
          text-align: center;        
          margin: 20px 5px 5px 5px;
        }
        .heading a {
          text-decoration: none;
          color: #fff;
        }
        .subheading {
          text-align: center;
        }
@ -92,10 +98,10 @@ export class WccSidebar extends LitElement {
      </style>
      <div class="heading">
-        lele-catalog
+        <a href="https://gitlab.com/designestate/dees-wcctools" target="_blank">wcctools</a>
      </div>
      <div class="subheading">
-        Lossless GmbH
+        by Lossless GmbH
      </div>
      <div class="menu">
        <h3>Live Websites</h3>
@ -109,10 +115,10 @@ export class WccSidebar extends LitElement {
            const item = this.dashboardRef.pages[pageName];
            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('page', item);
+                  this.selectItem('page', pageName, item);
                }}
              >
                <i class="material-icons">insert_drive_file</i>
@ -131,7 +137,7 @@ export class WccSidebar extends LitElement {
                class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
                @click=${async () => {
                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-                  this.selectItem('element', item);
+                  this.selectItem('element', elementName, item);
                }}
              >
                <i class="material-icons">featured_video</i>
@ -144,20 +150,28 @@ export class WccSidebar extends LitElement {
    `;
  }
-  public selectItem(typeArg: TElementType, itemArg: TemplateResult | LitElement) {
+  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
    console.log('selected item');
    console.log(itemNameArg);
    console.log(itemArg);
    this.selectedItem = itemArg;
    this.selectedType = typeArg;
    this.dispatchEvent(
      new CustomEvent('selectedItem', {
        detail: itemArg
      })
    );
    this.dispatchEvent(
      new CustomEvent('selectedType', {
        detail: typeArg
      })
    );
    this.dispatchEvent(
      new CustomEvent('selectedItemName', {
        detail: itemNameArg
      })
    );
    this.dispatchEvent(
      new CustomEvent('selectedItem', {
        detail: itemArg
      })
    );
    this.dashboardRef.buildUrl();
  }
 }
--- a/ts_web/index.ts
+++ b/ts_web/index.ts
@ -1,7 +1,7 @@
 import { WccDashboard } from './elements/wcc-dashboard';
 import { LitElement, TemplateResult } from 'lit-element';
-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) {
Author	SHA1	Message	Date
Phil Kunz	e1aebc7db8	1.0.51	2020-12-07 04:07:32 +00:00
Phil Kunz	97b88d965c	fix(core): update	2020-12-07 04:07:32 +00:00
Phil Kunz	37d343da03	1.0.50	2020-12-07 04:07:03 +00:00
Phil Kunz	47cb726716	fix(core): update	2020-12-07 04:07:03 +00:00
Phil Kunz	4220131bc4	1.0.49	2020-11-30 00:50:48 +00:00
Phil Kunz	edee4fa446	fix(core): update	2020-11-30 00:50:47 +00:00
Phil Kunz	c2a0fd26e2	1.0.48	2020-11-30 00:45:42 +00:00
Phil Kunz	693c8ca3f0	fix(core): update	2020-11-30 00:45:41 +00:00
Phil Kunz	ca58c55a37	1.0.47	2020-11-27 17:09:34 +00:00
Phil Kunz	79d2be98c5	fix(core): update	2020-11-27 17:09:33 +00:00
Phil Kunz	7971f48963	1.0.46	2020-11-27 16:49:58 +00:00
Phil Kunz	a15629a960	fix(core): update	2020-11-27 16:49:57 +00:00
Phil Kunz	ad5c25d80e	1.0.45	2020-11-27 16:44:35 +00:00
Phil Kunz	a713d88f27	fix(core): update	2020-11-27 16:44:34 +00:00
Phil Kunz	100f657e04	1.0.44	2020-11-27 16:40:38 +00:00
Phil Kunz	46e0b9f9db	fix(core): update	2020-11-27 16:40:38 +00:00
Phil Kunz	64d6379cd2	1.0.43	2020-11-27 15:59:18 +00:00
Phil Kunz	847733286c	fix(core): update	2020-11-27 15:59:18 +00:00
Phil Kunz	67a037c511	1.0.42	2020-11-26 03:16:19 +00:00
Phil Kunz	21bcdb2e01	fix(core): update	2020-11-26 03:16:18 +00:00
Phil Kunz	1743490a26	1.0.41	2020-11-26 02:59:47 +00:00
Phil Kunz	2f9ec6a700	fix(core): update	2020-11-26 02:59:46 +00:00
Phil Kunz	3a89888289	1.0.40	2020-11-26 02:56:12 +00:00
Phil Kunz	98909c61ff	fix(core): update	2020-11-26 02:56:11 +00:00
Phil Kunz	324808dd03	1.0.39	2020-11-26 02:50:50 +00:00
Phil Kunz	c5eec2ac22	fix(core): update	2020-11-26 02:50:50 +00:00