isomtrik-quickchat/dist/collection/stories/Components/MessageBubble/OutgoingTextMessageBubble/OutgoingTextMessageBubble.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 { LitElement } from 'lit';
import { html, css } from 'lit';
import '../../Time/Timestamp';
import { Text } from '../../Text/Text.js';
import '../../ReadMark/SingleMark/SingleMark.js';
import '../../ReadMark/BlueReadMark/BlueReadMark.js';
import '../../ReadMark/DoubleMark/DoubleMark.js';
import '../../ReadMark/ClockMark/ClockMark.js';
class OutgoingTextMessageBubble extends LitElement {
  static properties = {
    bgColor: { type: String },
    msgTextColor: { type: String },
    msgTextTimeColor: { type: String },
    borderWidth: { type: String },
    borderColor: { type: String },
    borderStyle: { type: String },
    borderRadius: { type: String },
    padding: { type: String },
    height: { type: String },
    width: { type: String },
    time: { type: String },
    textContent: { type: String },
    alignSelf: { type: String },
    isRead: { type: Boolean },
    isPopupOpen: { type: Boolean },
    fontFamily: { type: String },
    isDelivered: { type: String },
  };

  constructor() {
    super();
    this.isPopupOpen = false;
  }
  static styles = css`
    .message-container {
      position: relative;
      width: fit-content;
      max-width: 80% !important;
      align-self: center;
      overflow-wrap: break-word;
    }
   
    .message-footer {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: end;
      gap: 2px;
    }
    .actions {
      position: absolute;
      left: -15px;
      cursor: pointer;
      top: 5px;
    }

    .popup {
      position: absolute;
      top: 0px;
      left: -100px;
      background-color: white;
      border: 1px solid #eef1fa;
      border-radius: 5px;
      padding: 10px;
      box-shadow: 0 2px 10px #eef1fa;
      z-index: 10;
      display: flex;
      flex-items: column;
      align-items: center;
      justify-content: center;
    }

    .popup div {
      cursor: pointer;
    }
  `;

  openPopup() {
    this.isPopupOpen = !this.isPopupOpen;
  }
  openFullScreen() {
    this.isFullScreen = true;
  }

  closeFullScreen() {
    this.isFullScreen = false;
  }

  

  render() {
    return html`
      <div
        class="message-container"
        style="padding:${this.padding || '10px'}; 
          border-width: ${this.borderWidth};
          border-color: ${this.borderColor }
          border-style:${this.borderStyle || 'solid'};
          border-radius:${this.borderRadius || '10px'};
          height:${this.height};
          background-color:${this.bgColor || '#FFF'};
          align-self: ${this.alignSelf || 'right'}
         font-family: ${this.fontFamily}
     
         "
      >
        ${Text({
          content: this.textContent || 'some outgoing message sssj sj sj ssj ssj  some some smosk ajabfa bfa bfhjab ome somesomesomesome',
          textAlign: 'left',
          fontFamily: this.fontFamily,
          color: this.msgTextColor
        })}
        <div class="message-footer">
          <div><timestamp-element .time="${this.time || new Date().toISOString()}" .color="${this.msgTextTimeColor}"></timestamp-element></div>

          ${this.isRead == true
            ? html`<blue-read-mark></blue-read-mark>`
            : this.isDelivered == 'true'
              ? html`<double-mark></double-mark>`
              : this.isDelivered == 'pending'
                ? html`<clock-mark></clock-mark>`
                : html`<single-mark></single-mark>`}
        </div>
      </div>
    `;
  }
}

customElements.define('outgoing-text-message-bubble', OutgoingTextMessageBubble);