1.0.49

fix(core): update
1.0.48
2020-11-30 00:50:48 +00:00 · 2020-11-30 00:50:47 +00:00 · 2020-11-30 00:45:42 +00:00 · 2020-11-30 00:45:41 +00:00 · 2020-11-27 17:09:34 +00:00 · 2020-11-27 17:09:33 +00:00
15 changed files with 1951 additions and 2034 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,9 +17,8 @@
      }
    </style>

-    <script src="../ts_web/index.ts"></script>
+    <script src="./index.ts"></script>
  </head>
  <body>
-    <wcc-dashboard></wcc-dashboard>
  </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.35",
+  "version": "1.0.49",
  "private": false,
  "description": "wcc tools for creating element catalogues",
  "main": "dist_ts_web/index.js",
@ -13,20 +13,21 @@
  "author": "Lossless GmbH",
  "license": "UNLICENSED",
  "dependencies": {
-    "@designestate/dees-domtools": "^1.0.38",
+    "@designestate/dees-domtools": "^1.0.74",
+    "@designestate/dees-element": "^1.0.6",
    "@gitzone/tsrun": "^1.2.12",
    "@pushrocks/smartdelay": "^2.0.10",
-    "@pushrocks/smartexpress": "^3.0.73",
-    "lit-element": "^2.0.0-rc.5",
-    "lit-html": "^1.0.0-rc.2",
-    "typescript": "^3.9.6"
+    "@pushrocks/smartexpress": "^3.0.97",
+    "lit-element": "^2.4.0",
+    "lit-html": "^1.3.0",
+    "typescript": "^4.1.2"
  },
  "devDependencies": {
-    "@gitzone/tsbuild": "^2.1.24",
-    "@gitzone/tsbundle": "^1.0.72",
+    "@gitzone/tsbuild": "^2.1.25",
+    "@gitzone/tsbundle": "^1.0.78",
    "@gitzone/tswatch": "^1.0.50",
    "@pushrocks/projectinfo": "^4.0.5",
-    "tslint": "^6.1.2",
+    "tslint": "^6.1.3",
    "tslint-config-prettier": "^1.17.0"
  },
  "files": [
--- a/test/elements/index.ts
+++ b/test/elements/index.ts
@ -0,0 +1 @@
+export * from './test-demoelement';
--- a/test/elements/test-demoelement.ts
+++ b/test/elements/test-demoelement.ts
@ -0,0 +1,38 @@
+import { DeesElement, customElement, TemplateResult, html } from '@designestate/dees-element';
+
+import * as domtools from '@designestate/dees-domtools';
+
+@customElement('test-demoelement')
+export class TestDemoelement extends DeesElement {
+  public static demo = () => html`<test-demoelement></test-demoelement>`;
+
+  public render() {
+    return html`
+      <style>
+        .maincontainer, .themeindicator {
+          display: block;
+          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, .themeindicator {
+            border-radius: 50px;
+          }
+        `)}
+      </style>
+      <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/test/index.ts
+++ b/test/index.ts
@ -0,0 +1,3 @@
+import * as wcctools from '../ts_web/index';
+import * as elements from './elements';
+wcctools.setupWccTools(elements as any, {});
--- a/ts_web/elements/wcc-dashboard.ts
+++ b/ts_web/elements/wcc-dashboard.ts
@ -8,19 +8,31 @@ import { WccDefaultElement } from './wcc-defaultelement';
 import './wcc-frame';
 import './wcc-sidebar';
 import './wcc-properties';
+import { TTheme } from './wcc-properties';
+import { TElementType } from './wcc-sidebar';
+import { TViewport } from '@designestate/dees-domtools/dist_ts/domtools.breakpoints';

@customElement('wcc-dashboard')
 export class WccDashboard extends LitElement {
  public domtools: plugins.deesDomtools.DomTools;

  @property()
-  public selectedItem: TemplateResult | LitElement;
+  public selectedType: TElementType;
+
+  @property()
+  public selectedItemName: string;
+
+  @property()
+  public selectedItem: (() => TemplateResult) | LitElement;

  @property()
  public selectedViewport: plugins.deesDomtools.breakpoints.TViewport = 'desktop';

  @property()
-  public pages: { [key: string]: TemplateResult } = {};
+  public selectedTheme: TTheme = 'dark';
+
+  @property()
+  public pages: { [key: string]: () => TemplateResult } = {};

  @property()
  public elements: { [key: string]: LitElement } = {};
@ -28,34 +40,25 @@ export class WccDashboard extends LitElement {
  @property()
  public warning: string = null;

-  constructor(elementsArg?: { [key: string]: LitElement }, pagesArg?: { [key: string]: TemplateResult }) {
+  constructor(
+    elementsArg?: { [key: string]: LitElement },
+    pagesArg?: { [key: string]: () => TemplateResult }
+  ) {
    super();
    if (elementsArg) {
      this.elements = elementsArg;
+      console.log('got elements:');
+      console.log(this.elements);
    }

    if (pagesArg) {
      this.pages = pagesArg;
    }
-    this.init();
-  }
-
-  public async init() {
-    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-    this.domtools.router.on('/elements/:elementName', async routeInfo => {
-      this.selectedItem = this.elements[routeInfo.params.elementName];
-    });
-
-    this.domtools.router.on('/pages/:pageName', async routeInfo => {
-      this.selectedItem = this.pages[routeInfo.params.pageName];
-    });
-    this.domtools.router._handleRouteState();
  }

  public render(): TemplateResult {
    return html`
      <style>
-        @import url('https://fonts.googleapis.com/css?family=Roboto');
        :host {
          font-family: 'Roboto', sans-serif;
          background: #fcfcfc;
@ -66,53 +69,63 @@ export class WccDashboard extends LitElement {
          display: none;
        }
      </style>
-      <wcc-sidebar .dashboardRef=${this} @selectedItem=${eventArg => {
-        this.selectedItem = eventArg.detail;
-      }}></wcc-sidebar>
-      <wcc-properties .warning="${this.warning}" .selectedItem=${this.selectedItem} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
+      <wcc-sidebar
+        .dashboardRef=${this}
+        .selectedItem=${this.selectedItem}
+        @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();
+        }}
+        @selectedTheme=${(eventArg) => {
+          this.selectedTheme = eventArg.detail;
+        }}
+      ></wcc-properties>
      <wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
        ${(() => {
-          if (this.selectedItem instanceof TemplateResult) {
-            return this.selectedItem;
-          } else if (this.selectedItem) {
-            console.log(this.selectedItem);
+          if (this.selectedType === 'page' && this.selectedItem) {
+            if (typeof this.selectedItem === 'function') {
+              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) {
              this.setWarning(`component ${anonItem.name} does not expose a demo property.`);
              return;
            }
            if (!(typeof anonItem.demo === 'function')) {
-              this.setWarning(`component ${anonItem.name} has demo property, but it is not of type function`);
+              this.setWarning(
+                `component ${anonItem.name} has demo property, but it is not of type function`
+              );
              return;
            }
            this.setWarning(null);
            return html`${anonItem.demo()}`;
-          } else {
-            this.updateSlot();
          }
        })()}
      </wcc-frame>
    `;
  }

-  private currentlyUpdating: boolean = false;
-  public async updateSlot() {
-    if (this.currentlyUpdating) {
-      return;
-    }
-    this.currentlyUpdating = true;
-    !this.selectedItem ? this.selectedItem = WccDefaultElement as any : null;
-    const localSelectedItem = this.selectedItem;
-    this.selectedItem = null;
-    console.log('updateSlot');
-    this.domtools = await plugins.deesDomtools.DomTools.setupDomTools();
-    this.domtools.setVirtualViewport(this.selectedViewport);
-    // await super.performUpdate();
-    this.selectedItem = localSelectedItem;
-    await super.performUpdate();
-    this.currentlyUpdating = false;
-  }
-
  public setWarning(warningTextArg: string) {
    if (this.warning !== warningTextArg) {
      console.log(warningTextArg);
@ -122,4 +135,50 @@ export class WccDashboard extends LitElement {
      }, 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 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();
+      domtoolsInstance.setVirtualViewport(routeInfo.params.viewport as TViewport);
+      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(
+      `/wcctools-route/${this.selectedType}/${this.selectedItemName}/${this.selectedViewport}/${
+        this.selectedTheme
+      }`
+    );
+  }
 }
--- 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
@ -1,20 +1,28 @@
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { WccDashboard } from './wcc-dashboard';

 export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
+export type TTheme = 'bright' | 'dark';

 let environment: TEnvironment = 'native';

-export const setEnvironment = envArg => {
+export const setEnvironment = (envArg) => {
  environment = envArg;
 };

@customElement('wcc-properties')
 export class WccProperties extends LitElement {
+  @property()
+  dashboardRef: WccDashboard;
+
  @property()
  public selectedItem: TemplateResult | LitElement;

  @property()
-  public selectedViewport = 'native';
+  public selectedViewport: TEnvironment = 'native';
+
+  @property()
+  public selectedTheme: TTheme = 'dark';

  @property()
  public warning: string = null;
@ -37,7 +45,7 @@ export class WccProperties extends LitElement {
        }
        .grid {
          display: grid;
-          grid-template-columns: auto 300px 70px;
+          grid-template-columns: auto 150px 300px 70px;
        }
        .properties {
          border-right: 1px solid #999;
@ -52,30 +60,35 @@ export class WccProperties extends LitElement {
          background: #444;
          border: 1px solid #000;
        }
-        .viewports {
+        .viewportSelector,
+        .themeSelector {
          border-right: 1px solid #999;
        }
-        .viewport-selectors {
+        .selectorButtons2 {
+          display: grid;
+          grid-template-columns: 50% 50%;
+        }
+        .selectorButtons4 {
          display: grid;
          grid-template-columns: 25% 25% 25% 25%;
        }
-        .viewport {
+        .button {
          padding: 10px;
          text-align: center;
          border: 1px solid #000;
          transition: all 0.2s;
        }
-        .viewport:hover {
+        .button:hover {
          cursor: pointer;
          color: #333;
          background: #fff;
        }

-        .viewport.selected {
-          background: #455A64;
+        .button.selected {
+          background: #455a64;
        }

-        .viewport.selected:hover {
+        .button.selected:hover {
          cursor: pointer;
          color: #ffffff;
          background: #455a64;
@ -117,26 +130,46 @@ 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()) {
                returnArray.push(
-                  html`
-                    <div class="property">
-                      ${key} / ${classProperties.get(key).type.name}
-                    </div>
-                  `
+                  html` <div class="property">${key} / ${classProperties.get(key).type.name}</div> `
                );
              }
              return returnArray;
            }
          })()}
        </div>
-        <div class="viewports">
-          <div class="panelheading">Viewports</div>
-          <div class="viewport-selectors">
+        <div class="themeSelector">
+          <div class="panelheading">Theme</div>
+          <div class="selectorButtons2">
            <div
-              class="viewport ${this.selectedViewport === 'phone' ? 'selected' : null}"
+              class="button ${this.selectedTheme === 'dark' ? 'selected' : null}"
+              @click=${() => {
+                this.selectTheme('dark');
+              }}
+            >
+              Dark<br /><i class="material-icons">brightness_3</i>
+            </div>
+            <div
+              class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
+              @click=${() => {
+                this.selectTheme('bright');
+              }}
+            >
+              Bright<br /><i class="material-icons">flare</i>
+            </div>
+          </div>
+        </div>
+        <div class="viewportSelector">
+          <div class="panelheading">Viewport</div>
+          <div class="selectorButtons4">
+            <div
+              class="button ${this.selectedViewport === 'phone' ? 'selected' : null}"
              @click=${() => {
                this.selectViewport('phone');
              }}
@ -144,7 +177,7 @@ export class WccProperties extends LitElement {
              Phone<br /><i class="material-icons">smartphone</i>
            </div>
            <div
-              class="viewport ${this.selectedViewport === 'phablet' ? 'selected' : null}"
+              class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
              @click=${() => {
                this.selectViewport('phablet');
              }}
@ -152,7 +185,7 @@ export class WccProperties extends LitElement {
              Phablet<br /><i class="material-icons">smartphone</i>
            </div>
            <div
-              class="viewport ${this.selectedViewport === 'tablet' ? 'selected' : null}"
+              class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
              @click=${() => {
                this.selectViewport('tablet');
              }}
@ -160,7 +193,10 @@ export class WccProperties extends LitElement {
              Tablet<br /><i class="material-icons">tablet</i>
            </div>
            <div
-              class="viewport ${this.selectedViewport === 'desktop' || this.selectedViewport === 'native' ? 'selected' : null}"
+              class="button ${this.selectedViewport === 'desktop' ||
+              this.selectedViewport === 'native'
+                ? 'selected'
+                : null}"
              @click=${() => {
                this.selectViewport('native');
              }}
@ -171,19 +207,29 @@ export class WccProperties extends LitElement {
        </div>
        <div class="docs">Docs</div>
      </div>
-      ${this.warning ? html`<div class="warning">
-        ${this.warning}
-      </div>` : null}
+      ${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
    `;
  }

+  public selectTheme(themeArg: TTheme) {
+    this.selectedTheme = themeArg;
+    this.dispatchEvent(
+      new CustomEvent('selectedTheme', {
+        detail: themeArg,
+      })
+    );
+    console.log(this.dashboardRef.selectedType);
+    this.dashboardRef.buildUrl();
+  }
+
  public selectViewport(viewport: TEnvironment) {
    this.selectedViewport = viewport;
    setEnvironment(viewport);
    this.dispatchEvent(
      new CustomEvent('selectedViewport', {
-        detail: viewport
+        detail: viewport,
      })
    );
+    this.dashboardRef.buildUrl();
  }
 }
--- a/ts_web/elements/wcc-sidebar.ts
+++ b/ts_web/elements/wcc-sidebar.ts
@ -1,13 +1,19 @@
+import * as plugins from '../wcctools.plugins';
 import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
 import { WccDashboard } from './wcc-dashboard';

+export type TElementType = 'element' | 'page';
+
@customElement('wcc-sidebar')
 export class WccSidebar extends LitElement {
  @property({type: Array})
  public websites: string[] = [];

  @property({ attribute: false })
-  public selectedItem: LitElement | TemplateResult;
+  public selectedItem: LitElement | (() => TemplateResult);
+
+  @property({ attribute: false })
+  public selectedType: TElementType;

  @property()
  public dashboardRef: WccDashboard;
@ -35,9 +41,15 @@ export class WccSidebar extends LitElement {

        .heading {
          font-size: 24px;
-          text-align: center;
+          text-align: center;        
          margin: 20px 5px 5px 5px;
        }
+
+        .heading a {
+          text-decoration: none;
+          color: #fff;
+        }
+
        .subheading {
          text-align: center;
        }
@ -86,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>
@ -103,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')}"
-                @click=${() => {
-                  this.selectItem(item);
-                  this.dashboardRef.domtools.router.pushUrl(`/pages/${pageName}`);
+                class="selectOption ${this.selectedItem === item ? 'selected' : null}"
+                @click=${async () => {
+                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
+                  this.selectItem('page', pageName, item);
                }}
              >
                <i class="material-icons">insert_drive_file</i>
@ -123,9 +135,9 @@ export class WccSidebar extends LitElement {
            return html`
              <div
                class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
-                @click=${() => {
-                  this.selectItem(item);
-                  this.dashboardRef.domtools.router.pushUrl(`/elements/${elementName}`);
+                @click=${async () => {
+                  const domtools = await plugins.deesDomtools.DomTools.setupDomTools();
+                  this.selectItem('element', elementName, item);
                }}
              >
                <i class="material-icons">featured_video</i>
@ -138,13 +150,28 @@ export class WccSidebar extends LitElement {
    `;
  }

-  public selectItem(item: TemplateResult | LitElement) {
+  public selectItem(typeArg: TElementType, itemNameArg: string, itemArg: (() => TemplateResult) | LitElement) {
    console.log('selected item');
-    this.selectedItem = item;
+    console.log(itemNameArg);
+    console.log(itemArg);
+    this.selectedItem = itemArg;
+    this.selectedType = typeArg;
    this.dispatchEvent(
-      new CustomEvent('selectedItem', {
-        detail: item
+      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	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
Phil Kunz	b1350c463b	1.0.38	2020-11-26 02:28:17 +00:00
Phil Kunz	40f54c574d	fix(core): update	2020-11-26 02:28:17 +00:00
Phil Kunz	ebc2c82b7f	1.0.37	2020-07-15 21:30:02 +00:00
Phil Kunz	15481c5e24	fix(core): update	2020-07-15 21:30:01 +00:00
Phil Kunz	357320d40a	1.0.36	2020-07-15 21:00:48 +00:00
Phil Kunz	08d92d9d3e	fix(core): update	2020-07-15 21:00:47 +00:00