isomtrik-quickchat/dist/cjs/ImageMessageBubble-1efdd496.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

'use strict';

const ClockMark = require('./ClockMark-6b4b6198.js');
const Image = require('./Image-6ad8d97b.js');

class ImageMessageBubble extends ClockMark.h {
  static properties = {
    bgColor: { type: String },
    borderWidth: { type: String },
    borderColor: { type: String },
    borderStyle: { type: String },
    borderRadius: { type: String },
    padding: { type: String },
    imageSrc: { type: String },
    height: { type: String },
    width: { type: String },
    isFullScreen: { type: String },
    time: { type: String },
    isRead: { type: Boolean },
    isSelf: { type: Boolean },
    isPopupOpen: { type: Boolean },
    isDelivered: { type: String },
  };

  constructor() {
    super();
    this.isFullScreen = false;
    this.isPopupOpen = false;
  }
  static styles = ClockMark.i$1`

    .image-message-container {
      position:relative;
    }

    .image-container {
      cursor: pointer;
      overflow-hidden;
    }

    .full-screen-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 9999;
    }

    .full-screen-image {
      max-width: 90%;
      max-height: 90%;
      object-fit: cover;
    }

    .close-button {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 2rem;
      color: white;
      cursor: pointer;
      background: transparent;
      border: none;
    }

    .message-footer{ 
      display: flex;
      align-items:center;
      justify-content: end;
      gap:3px;
    }

    .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 ClockMark.ke`
      <div
        class="image-message-container"
        style="padding:${this.padding}; 
          border-width: ${this.borderWidth};
          border-color: ${this.borderColor};
          border-style:${this.borderStyle};
          border-radius:${this.borderRadius};
          width:${this.width};
          height:${this.height};
          background-color:${this.bgColor}
         "
      >
        <div
          class="image-container"
          style=" width:${this.width};
          height:${this.height};"
          @click="${this.openFullScreen}"
        >
          ${Image.Image({
            src: this.imageSrc,
            alt: 'image',
            height: '100%',
            width: '100%',
            objectFit: 'cover',
            borderRadius: this.borderRadius
          })}
        </div>
      <div class="message-footer" style="margin-top: ${this.isSelf ? '0' : '4px'};">
          <timestamp-element .time="${this.time || new Date().toISOString()}" .color="${'#000'}"></timestamp-element>
          ${this.isSelf
            ? this.isRead == true
              ? ClockMark.ke`<blue-read-mark></blue-read-mark>`
              : this.isDelivered == 'true'
                ? ClockMark.ke`<double-mark></double-mark>`
                : this.isDelivered == 'pending'
                  ? ClockMark.ke`<clock-mark></clock-mark>` 
                  : ClockMark.ke`<single-mark></single-mark>`
            : null}
        </div>
      </div>

      ${this.isFullScreen
        ? ClockMark.ke`
            <div class="full-screen-overlay">
              <button class="close-button" @click="${this.closeFullScreen}">&times;</button>
              <img src="${this.imageSrc}" alt="image" class="full-screen-image" />
            </div>
          `
        : ''}
    `;
  }
}

customElements.define('image-message', ImageMessageBubble);

//# sourceMappingURL=ImageMessageBubble-1efdd496.js.map