initial

ts_web/elements/sio-subwidget-onboardme.ts

@@ -0,0 +1,64 @@
+import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as deesCatalog from '@design.estate/dees-catalog';
+deesCatalog;
+
+@customElement('sio-subwidget-onboardme')
+export class SioSubwidgetOnboardme extends DeesElement {
+  @property()
+  public showCombox = false;
+
+  public static demo = () => html`
+    <sio-subwidget-onboardme></sio-subwidget-onboardme>
+  `;
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        
+        :host {
+          display: block;
+          position: relative;
+          transition: all 0.1s;
+          min-height: 200px;
+          margin: 20px 20px 40px 20px;
+          background: ${this.goBright ? '#fafafa' : '#111111'};
+          border-radius: 16px;
+          border-top: 1px solid rgba(250,250,250,0.1);
+          box-shadow: 0px 0px 5px rgba(0,0,0,0.3);
+          padding: 24px 24px 32px 24px;
+          color: #CCC;
+          overflow: hidden;
+        }
+
+        :host(:hover) {
+        }
+
+        .brandingbox {
+          text-align: center;
+          position: absolute;
+          width: 100%;
+          bottom: 0px;
+          left: 0px;
+          font-size: 10px;
+          padding: 3px;
+          border-top: 1px solid rgba(250,250,250, 0.1);
+          font-family: 'Dees Code';
+          background: ${this.goBright ? '#eee' : '#111111'};
+          color: #666;
+        }
+      </style>
+      Or search through our documentation
+      <dees-input-text key="searchTerm" label="Search Term:"></dees-input-text>
+      <dees-button>Search</dees-button>
+      <div class="brandingbox">last updated: ${new Date().toISOString()}</div>
+    `;
+  }
+}