1.0.20

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@losslessone_private/dees-wcctools",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designestate/dees-wcctools",
-  "version": "1.0.19",
+  "version": "1.0.20",
   "private": false,
   "description": "wcc tools for creating element catalogues",
   "main": "dist_ts_web/index.js",

ts_web/elements/wcc-sidebar.ts

@@ -2,11 +2,14 @@ import { LitElement, property, html, customElement, TemplateResult } from 'lit-e
 
 @customElement('wcc-sidebar')
 export class WccSidebar extends LitElement {
-  @property()
-  public pages: { [key: string]: TemplateResult };
+  @property({type: Array})
+  public websites: string[] = [];
 
   @property()
-  public elements: { [key: string]: LitElement };
+  public pages: { [key: string]: TemplateResult } = {};
+
+  @property()
+  public elements: { [key: string]: LitElement } = {};
 
   @property({ attribute: false })
   public selectedItem: LitElement | TemplateResult;
@@ -92,9 +95,9 @@ export class WccSidebar extends LitElement {
       </div>
       <div class="menu">
         <h3>Live Websites</h3>
-        <div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">lossless.com</div></div>
-        <div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">central.eu</div></div>
-        <div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">coffee.link</div></div>
+        ${this.websites.map(website => {
+          return html`<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">${website}</div></div>`;
+        })}
         <h3>Pages</h3>
         ${(() => {
           const pages = Object.keys(this.pages);