isomtrik-quickchat/dist/collection/stories/Components/Head/ClosedHeader/ClosedHead.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';
import { Image } from '../../Image/Image';
import { Text } from '../../Text/Text';

class ClosedHead extends LitElement {
  static properties = {
    image: { type: Object },
    text: { type: Object },
    lastSeenText: { type: String },
    lastSeenTextColor: { type: String },
    lastSeenTextFontSize: { type: String },
    textHref: { type: String },
    onFirstSvgClick: { type: Function },
    onSecondSvgClick: { type: Function },
    padding: { type: String },
    conversationDetails: { type: Object },
    profileImage: { type: String },
    borderRadius: { type: String },
    borderColor: { type: String },
    borderStyle: { type: String },
    borderWidth: { type: String },
    boxShadow: { type: String },
    bgColor: {type: String},
    textColor: {type: String},
    nameTextColor: {type: String},
    closeIconColor: {type: String},
    minimizeIconColor: {type: String}
  };

  constructor() {
    super();

    this.profilePlaceholderImage = 'https://isometrik-website-bucket.s3.ap-south-1.amazonaws.com/Frame_02577f7cb1.svg';
    this.borderWidth = '0px 0px 2px 0px';
    this.borderColor = '#E6E8F3';
    this.borderStyle = 'solid';
  }
  static styles = css`
    .head-container {
      display: flex;
      align-items: center;
    }
    .image-container {
      margin-right: 16px;
    }
    .text-container {
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      flex-direction: column;
    }
    .actions {
      display: flex;
      gap: 8px;
      margin-left: auto;
      cursor: pointer;
    }

    .last-seen {
      color: var(--last-seen-text-color, gray);
      font-size: var(--last-seen-text-font-size, 14px);
      margin-top: 4px;
    }
  `;
  _handleTextClick() {
    if (this.textHref) {
      window.location.href = this.textHref;
    }
  }

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

  _handleSecondSvgClick() {
    if (this.onSecondSvgClick) {
      this.onSecondSvgClick();
    }
  }
  render() {
    return html`
      <div class="head-container" style="padding: ${this.padding}; background-color: ${this.bgColor}">
        <div class="image-container">
          ${Image({
            src: this.profileImage || this.profilePlaceholderImage,
            height: '50px',
            width: '50px',
            placeholderImage: this.profilePlaceholderImage
          })}
        </div>

        <div class="text-container" @click=${this._handleTextClick}>
          ${Text({
            fontSize: '20px',
            fontWeight: 'bold',
            content: this.text || '',
            color: this.nameTextColor
          })}
          ${this.lastSeenText
            ? html` <div
                class="last-seen"
                style="
                color: ${this.lastSeenTextColor || 'gray'};
                font-size: ${this.lastSeenTextFontSize || '14px'};
              "
              >
                ${this.lastSeenText}
              </div>`
            : ''}
        </div>
        <div class="actions">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" @click=${this._handleFirstSvgClick}>
            <path
              d="M19.6373 14.2635L15.968 10.5943L13.7276 8.34242C12.7789 7.39367 11.2357 7.39367 10.287 8.34242L4.36586 14.2635C3.58858 15.0408 4.14868 16.3668 5.2346 16.3668H11.6472H18.7685C19.8659 16.3668 20.4146 15.0408 19.6373 14.2635Z"
              fill=${this.minimizeIconColor || '#000'}
            />
          </svg>

          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" @click=${this._handleSecondSvgClick}>
            <path d="M7.05078 7.05078L16.9503 16.9503" stroke=${this.closeIconColor || '#000'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path d="M7.04972 16.9503L16.9492 7.05078" stroke=${this.closeIconColor || '#000'} stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
    `;
  }
}

customElements.define('close-head', ClosedHead);
export default { ClosedHead };