catalog/ts_web/elements/sio-combox.ts

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-combox')
export class SioCombox extends DeesElement {
  public static demo = () => html` <sio-combox></sio-combox> `;

  @property({ type: Object })
  public referenceObject: HTMLElement;

  /**
   * computes the button offset
   */
  public cssComputeHeight() {
    let height = window.innerHeight < 760 ? window.innerHeight : 760;
    if (!this.referenceObject) {
      console.log('SioCombox: no reference object set');
    }
    if (this.referenceObject) {
      console.log(`referenceObject height is ${this.referenceObject.clientHeight}`);
      height = height - (this.referenceObject.clientHeight + 60);
    }
    return height;
  }

  public cssComputeInnerScroll() {
    console.log(
      `SioCombox clientHeight: ${this.shadowRoot.querySelector('.mainbox').clientHeight}`
    );
    console.log(
      `SioCombox content scrollheight is: ${
        this.shadowRoot.querySelector('.contentbox').clientHeight
      }`
    );
    if (
      this.shadowRoot.querySelector('.mainbox').clientHeight <
      this.shadowRoot.querySelector('.contentbox').clientHeight
    ) {
      (this.shadowRoot.querySelector('.mainbox') as HTMLElement).style.overflowY = 'scroll';
    } else {
      (this.shadowRoot.querySelector('.mainbox') as HTMLElement).style.overflowY = 'hidden';
    }
  }

  constructor() {
    super();
    domtools.DomTools.setupDomTools();
  }

  public render(): TemplateResult {
    return html`
      ${domtools.elementBasic.styles}
      <style>
        :host {
          overflow: hidden;
          font-family: 'Dees Sans';
          position: absolute;
          display: block;
          height: ${this.cssComputeHeight()}px;
          width: 375px;
          background: ${this.goBright ? '#eeeeee' : '#000000'};
          border-radius: 16px;
          border: 1px solid rgba(250, 250, 250, 0.2);
          right: 0px;
          z-index: 10000;
          box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.5)'};
          color: ${this.goBright ? '#333' : '#ccc'};
          cursor: default;
          user-select: none;
          text-align: left;
        }

        .mainbox {
          position: absolute;
          height: 100%;
          width: 100%;
          overflow: hidden;
          overscroll-behavior: contain;
          padding-bottom: 80px;
        }

        .toppanel {
          height: 200px;
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
          padding: 20px;
          --bg-color: ${this.goBright ? '#00000050' : '#ffffff30'};
          --dot-color: #ffffff00;
          --dot-size: 1px;
          --dot-space: 6px;

          background: linear-gradient(45deg, var(--bg-color) 1px, var(--dot-color) 1px) top left;
          background-size: var(--dot-space) var(--dot-space);
          margin-bottom: -50px;
        }

        #greeting {
          padding-top: 50px;
          font-family: 'Dees Sans';
          margin: 0px;
          font-size: 30px;
          font-weight: 400;
        }

        #callToAction {
          font-family: 'Dees Sans';
          margin: 0px;
          font-weight: 400;
        }

        .quicktabs {
          position: absolute;
          z-index: 100;
          bottom: 30px;
          display: grid;
          width: 100%;
          padding-bottom: 16px;
          grid-template-columns: repeat(2, 1fr);
          background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
          padding-top: 24px;
        }

        .quicktabs .quicktab {
          text-align: center;
          width: 100%;
        }
        .quicktabs .quicktab .quicktabicon {
          font-size: 20px;
          margin-bottom: 8px;
        }

        .quicktabs .quicktab .quicktabtext {
          font-size: 12px;
          font-weight: 600;
        }
        


        .brandingbox {
          z-index: 101;
          text-align: center;
          position: absolute;
          width: 100%;
          bottom: 0px;
          left: 0px;
          font-size: 12px;
          padding: 8px;
          border-top: 1px solid rgba(250, 250, 250, 0.1);
          font-family: 'Dees Sans';
          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
          background: ${this.goBright ? '#EEE' : '#000'};
          color: ${this.goBright ? '#333' : '#777'};
        }
      </style>
      <div class="mainbox">
        <div class="contentbox">
          <div class="toppanel">
            <div id="greeting">Hello :)</div>
            <div id="callToAction">Ask us anything or share your feedback!</div>
          </div>
          <sio-subwidget-conversations></sio-subwidget-conversations>
          <sio-subwidget-onboardme></sio-subwidget-onboardme>
        </div>
      </div>
      <div class="quicktabs">
        <div class="quicktab">
          <div class="quicktabicon">
            <dees-icon iconFA="message"></dees-icon>
          </div>
          <div class="quicktabtext">Conversations</div>
        </div>
        <div class="quicktab">
          <div class="quicktabicon">
            <dees-icon iconFA="mugHot"></dees-icon>
          </div>
          <div class="quicktabtext">Onboarding</div>
        </div>
      </div>
      <div class="brandingbox">powered by social.io</div>
    `;
  }

  async updated() {
    this.cssComputeHeight();
    window.requestAnimationFrame(() => {
      setTimeout(() => {
        this.cssComputeInnerScroll();
      }, 200);
    });
  }
}