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

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>
    `;
  }
}