isomtrik-quickchat/dist/collection/stories/Components/Splitscreen/Splitscreen.js

isomtrik-quickchat is a lightweight, real-time chat component built with Stencil JS. It is designed to be seamlessly integrated into web applications, offering customizable and responsive chat functionalities. The module supports both CommonJS and ES modu

import { html, css, LitElement } from 'lit';
class SplitScreen extends LitElement {
  static properties = {
    leftImage: { type: Object },
    leftText: { type: String },
    rightImage: { type: Object },
    rightText: { type: String },
    lastSeenText: { type: String },
    rightLastSeenTextColor: { type: String },
    rightLastSeenTextFontSize: { type: String },
    rightTextHref: { type: String },
    onRightFirstSvgClick: { type: Function },
    onRightSecondSvgClick: { type: Function },
    backgroundColor: { type: String },
    leftSideJustifyContent: { type: String },
    rightSideJustifyContent: { type: String },
    leftSideGap: { type: String },
    rightSideGap: { type: String },
    boxShadow: {type: String},
    boxBorderStyle: {type: String},
    boxBorderColor: {type: String},
    boxBorderWidth: {type: String},
    boxBorderRadius: {type: String}
  };

  constructor() {
    super();
    this.leftImage = { src: 'https://via.placeholder.com/50', alt: 'Default Left Image', height: '50px', width: '50px' };
    this.leftText = 'Name';
    this.rightImage = { src: 'https://via.placeholder.com/50', alt: 'Default Right Image' };
    this.rightText = 'Default Right Text';
    this.backgroundColor = '#ffffff';
    this.leftSideJustifyContent = 'left';
    this.rightSideJustifyContent = 'right';
    this.boxBorderColor = 'black';
    this.boxBorderWidth = '2px';
    this.boxBorderStyle = 'solid';
  }
  static styles = css`
    :host {
      display: block;
      height: auto;
      width: auto;
    }

    .container {
      display: flex;
      height: 100%;
      width: 100%;
      // border: 1px solid;
    }

    .left-side,
    .right-side {
      flex: 1;
      padding: 20px;
      box-sizing: border-box;
      display: flex;
      // flex-direction: column;
      // justify-content: center;
      align-items: center;
      width: 50%;
    }

    .left-side {
      // background:red;
    }

    .right-side {
      // background:blue;
      // justify-content: flex-end;
      // gap: 10px;
    }

    .left-text {
      margin:0
    }

    .dividerline {
      width: 1px;
      background-color: black;
    }

    img {
      max-width: 100%;
      height: auto;
      margin-bottom: 10px;
    }

    .text-container {
      display:flex;
      align-items: flex-start;
      text-align:left;
      gap:0px;
      flex-direction: column;
\    }

    p {
      font-size: 1em;
      text-align: center;
    }

    .last-seen {
      margin-top: 4px;
    }

    .actions {
      display: flex;
      gap: 8px;
    }
  `;

  render() {
    return html`
      <div class="container" style="background-color: ${this.backgroundColor || '#ffffff'}; box-shadow: ${this.boxShadow || ''};
       border-width: ${this.boxBorderWidth || ''};
       border-style: ${this.boxBorderStyle || ''};
       border-color: ${this.boxBorderColor || ''};
       border-radius: ${this.boxBorderRadius || ''};
      ">
        <div
          class="left-side"
          style="justify-content:${this.leftSideJustifyContent || 'center'};
         gap: ${this.leftSideGap || '0px'} "
        >
          ${this.leftImage ? html`<img src="${this.leftImage.src}" alt="${this.leftImage.alt}" />` : ''}
          <div class="text-container">
            ${this.leftText ? html`<p class="left-text">${this.leftText}</p>` : ''}
            ${this.lastSeenText
              ? html`
                  <div class="last-seen" style="color: ${this.rightLastSeenTextColor || 'gray'}; font-size: ${this.rightLastSeenTextFontSize || '12px'};">${this.lastSeenText}</div>
                `
              : ''}
          </div>
        </div>
        <div class="right-side" style="justify-content:${this.rightSideJustifyContent || 'center'}; gap: ${this.rightSideGap}">
          ${this.rightImage ? html`<img src="${this.rightImage.src}" alt="${this.rightImage.alt}" />` : ''} ${this.rightText ? html`<p>${this.rightText}</p>` : ''}
        </div>
      </div>
    `;
  }

  _handleFirstSvgClick() {
    if (this.onRightFirstSvgClick) {
      this.onRightFirstSvgClick();
    }
  }

  _handleSecondSvgClick() {
    if (this.onRightSecondSvgClick) {
      this.onRightSecondSvgClick();
    }
  }
}

customElements.define('split-screen', SplitScreen);
export default SplitScreen