@social.io/catalog 1.0.93

package/ts_web/elements/sio-subwidget-conversations.ts

@@ -0,0 +1,156 @@
+import { DeesElement, property, html, customElement, type TemplateResult } from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as sioInterfaces from '@social.io/interfaces';
+
+@customElement('sio-subwidget-conversations')
+export class SioSubwidgetConversations extends DeesElement {
+  // STATIC
+
+  // INSTANCE
+  public conversations: sioInterfaces.ISioConversation[] = [
+    {
+      subject: 'Pricing page',
+      parties: [
+        {
+          id: '1',
+          description: 'Lossless Support',
+          name: 'Lossless Support',
+        },
+        {
+          id: '2',
+          description: 'you',
+          name: 'you',
+        },
+      ],
+      conversationBlocks: [
+        {
+          partyId: '1',
+          text: 'Hello there :) How can we help you?',
+        },
+        {
+          partyId: '2',
+          text: 'Hi! Where is your pricing page?',
+        },
+      ],
+    },{
+      subject: 'Pricing page',
+      parties: [
+        {
+          id: '1',
+          description: 'Lossless Support',
+          name: 'Lossless Support',
+        },
+        {
+          id: '2',
+          description: 'you',
+          name: 'you',
+        },
+      ],
+      conversationBlocks: [
+        {
+          partyId: '1',
+          text: 'Hello there :) How can we help you?',
+        },
+        {
+          partyId: '2',
+          text: 'Hi! Where is your pricing page?',
+        },
+      ],
+    },
+  ];
+
+  public static demo = () => html`<sio-subwidget-conversations></sio-subwidget-conversations>`;
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          color: ${this.goBright ? '#666' : '#ccc'};
+          font-family: 'Dees Sans';
+        }
+
+        .conversationbox {
+          padding: 20px;
+          transition: all 0.1s;
+          min-height: 200px;
+          margin: 20px;
+          background: ${this.goBright ? '#fff' : '#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);
+          margin-bottom: 20px;
+        }
+
+        .conversationbox .text {
+          font-family: 'Dees Sans';
+          margin-bottom: 8px;
+        }
+
+        .conversation {
+          display: block;
+          transition: all 0.1s;
+          padding: 8px 0px 8px 0px;
+          border-bottom: 1px solid;
+          border-image: radial-gradient(rgba(136, 136, 136, 0.44), rgba(136, 136, 136, 0)) 1 / 1 / 0 stretch;
+          cursor: pointer;
+        }
+
+        .conversation:last-of-type {
+          border-bottom: none;
+          margin-bottom: 8px;
+        }
+
+        .conversation:hover {
+          cursor: default;
+        }
+
+        .conversation:hover .gridcontainer {
+          transform: translateX(2px)
+        }
+
+        .conversation .gridcontainer {
+          display: grid;
+          grid-template-columns: 50px auto;
+          transition: transform 0.2s;
+        }
+
+        .conversation .gridcontainer .profilePicture {
+          height: 40px;
+          width: 40px;
+          border-radius: 50px;
+          background: ${this.goBright ? '#EEE' : '#222'};
+        }
+
+        .conversation .gridcontainer .text .topLine {
+          font-family: 'Dees Sans';
+          padding-top: 3px;
+          font-size: 12px;
+        }
+
+        .gridcontainer .gridcontainer .text .bottomLine {
+          font-family: 'Dees Sans';
+          font-size: 14px;
+        }
+      </style>
+      <div class="conversationbox">
+        <div class="text">Your conversations:</div>
+
+        ${this.conversations.map((conversationArg) => {
+          return html`
+            <div class="conversation">
+              <div class="gridcontainer">
+                <div class="profilePicture"></div>
+                <div class="text">
+                  <div class="topLine">Today at 8:01</div>
+                  <div class="bottomLine">${conversationArg.subject}</div>
+                </div>
+              </div>
+            </div>
+          `;
+        })}
+        <dees-button>View more</dees-button>
+      </div>
+    `;
+  }
+}

package/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>
+    `;
+  }
+}

package/ts_web/index.ts

@@ -0,0 +1 @@
+export * from './elements/index.js';

package/ts_web/pages/firstpage.ts

@@ -0,0 +1,5 @@
+import { html } from '@design.estate/dees-element';
+
+export const firstpage = () => html`
+  <sio-fab></sio-fab>
+`;

package/ts_web/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './mainpage.js';
+export * from './firstpage.js';

package/ts_web/pages/mainpage.ts

@@ -0,0 +1,3 @@
+import { html } from '@design.estate/dees-element';
+
+export const mainpage = () => html` <lele-statusbar></lele-statusbar> `;