fix(core): update

ts_web/elements/wcc-properties.ts

@@ -0,0 +1,182 @@
+import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+
+export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
+
+let environment: TEnvironment = 'native';
+
+export const setEnvironment = envArg => {
+  environment = envArg;
+};
+
+@customElement('wcc-properties')
+export class WccProperties extends LitElement {
+  @property()
+  public selectedItem: TemplateResult | LitElement;
+
+  @property()
+  public selectedInstance;
+
+  @property()
+  public selectedViewport = 'native';
+
+  public render(): TemplateResult {
+    return html`
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+      <style>
+        :host {
+          font-family: 'Roboto', sans-serif;
+          box-sizing: border-box;
+          position: absolute;
+          left: 200px;
+          height: 100px;
+          bottom: 0px;
+          right: 0px;
+          overflow: hidden;
+          background: #111;
+          color: #fff;
+        }
+        .grid {
+          display: grid;
+          grid-template-columns: auto 300px 70px;
+        }
+        .properties {
+          border-right: 1px solid #999;
+          height: 100px;
+          overflow-y: auto;
+          display: grid;
+          grid-template-columns: 33% 33% 33%;
+        }
+
+        .properties .property {
+          padding: 5px;
+          background: #444;
+          border: 1px solid #000;
+        }
+        .viewports {
+          border-right: 1px solid #999;
+        }
+        .viewport-selectors {
+          display: grid;
+          grid-template-columns: 25% 25% 25% 25%;
+        }
+        .viewport {
+          padding: 10px;
+          text-align: center;
+          border: 1px solid #000;
+          transition: all 0.2s;
+        }
+        .viewport:hover {
+          cursor: pointer;
+          color: #333;
+          background: #fff;
+        }
+
+        .viewport.selected {
+          background: #455A64;
+        }
+
+        .viewport.selected:hover {
+          cursor: pointer;
+          color: #ffffff;
+          background: #455a64;
+        }
+
+        .panelheading {
+          padding: 5px;
+          font-weight: bold;
+          background: #444;
+          border: 1px solid #000;
+        }
+        .docs {
+          text-align: center;
+          line-height: 100px;
+          text-transform: uppercase;
+        }
+
+        .docs:hover {
+          cursor: pointer;
+          color: #333;
+          background: #fff;
+        }
+      </style>
+      <div class="grid">
+        <div class="properties">
+          <div class="panelheading">Properties</div>
+          ${(() => {
+            if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
+              const anonItem: any = this.selectedItem;
+              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} /
+                      <pre>
+${(() => {
+                          const result = this.selectedInstance
+                            ? JSON.stringify(this.selectedInstance[key], null, 2)
+                            : null;
+                          return result;
+                        })()}</pre
+                      >
+                    </div>
+                  `
+                );
+              }
+              return returnArray;
+            }
+          })()}
+        </div>
+        <div class="viewports">
+          <div class="panelheading">Viewports</div>
+          <div class="viewport-selectors">
+            <div
+              class="viewport ${this.selectedViewport === 'phone' ? 'selected' : null}"
+              @click=${() => {
+                this.selectViewport('phone');
+              }}
+            >
+              Phone<br /><i class="material-icons">smartphone</i>
+            </div>
+            <div
+              class="viewport ${this.selectedViewport === 'phablet' ? 'selected' : null}"
+              @click=${() => {
+                this.selectViewport('phablet');
+              }}
+            >
+              Phablet<br /><i class="material-icons">smartphone</i>
+            </div>
+            <div
+              class="viewport ${this.selectedViewport === 'tablet' ? 'selected' : null}"
+              @click=${() => {
+                this.selectViewport('tablet');
+              }}
+            >
+              Tablet<br /><i class="material-icons">tablet</i>
+            </div>
+            <div
+              class="viewport ${this.selectedViewport === 'desktop' || this.selectedViewport === 'native' ? 'selected' : null}"
+              @click=${() => {
+                this.selectViewport('native');
+              }}
+            >
+              Desktop<br /><i class="material-icons">desktop_windows</i>
+            </div>
+          </div>
+        </div>
+        <div class="docs">Docs</div>
+      </div>
+    `;
+  }
+
+  public selectViewport(viewport: TEnvironment) {
+    this.selectedViewport = viewport;
+    setEnvironment(viewport);
+    this.dispatchEvent(
+      new CustomEvent('selectedViewport', {
+        detail: viewport
+      })
+    );
+  }
+}