isomtrik-quickchat/dist/collection/stories/Components/AttachmentBox/AttachmentBox.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 {css, html, LitElement} from 'lit';
import {Image} from "../Image/Image";

class AttachmentBox extends LitElement {
  static properties = {
    bgColor: { type: String },
    textColor: { type: String },
    documentIcon: { type: String },
    mediaIcon: { type: String },
    documentIconHeight: { type: String },
    documentIconWidth: { type: String },
    mediaIconHeight: { type: String },
    mediaIconWidth: { type: String },
    containerBorderWidth: { type: String },
    containerBorderColor: { type: String },
    containerBorderStyle: { type: String },
    width: { type: String },
    flexDirection: { type: String },
    padding: { type: String },
    iconGap: { type: String },
    containerBorderRadius: { type: String },
    onFileUploaded: {type: String}
  };

  static styles = css`
    .attachment-box-container {
      display: flex;
      gap: 2px;
      color: white;
      align-items: center;
    }

    .document-container,
    .media-container {
      cursor: pointer !important;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    input[type="file"] {
      opacity: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      cursor: pointer;
    }
  `;

  handleFileChange(event, fileType) {
    const file = event.target.files[0];
    if (file) {
      console.log(`${fileType} uploaded:`, file);

      this.dispatchEvent(new CustomEvent('file-uploaded', {
        detail: {fileType, file},
        bubbles:  true,
        composed: true
      }))
    }
  }

  render() {
    return html`
      <div class='attachment-box-container' style='background-color: ${this.bgColor}; 
        border-width: ${this.containerBorderWidth};
        border-color: ${this.containerBorderColor};
        border-style: ${this.containerBorderStyle};
        border-radius: ${this.containerBorderRadius || '10px'};
        width: ${this.width};
        flex-direction: ${this.flexDirection};
        padding: ${this.padding};
        gap: ${this.iconGap};
      '>
        <div class='document-container'>
          ${this.documentIcon
            ? Image({
                src: this.documentIcon,
                alt: 'document icon',
                width: this.documentIconWidth,
                height: this.documentIconHeight,
              })
            : ''}
          <input
            id="documentUpload"
            type="file"
            accept="application/"
            @change="${(e) => this.handleFileChange(e, 'Document')}"
          />
        </div>

        <div class='media-container'>
          ${this.mediaIcon
            ? Image({
                src: this.mediaIcon,
                alt: 'media icon',
                width: this.mediaIconWidth,
                height: this.mediaIconHeight,
              })
            : ''}
          <!-- Hidden file input for media -->
          <input
            id="mediaUpload"
            type="file"
            accept="image/*,video/*"
            @change="${(e) => this.handleFileChange(e, 'Media')}"
          />
        </div>
      </div>
    `;
  }
}

customElements.define('attachment-box', AttachmentBox);