isomtrik-quickchat
Version:
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
132 lines (124 loc) • 7.09 kB
JavaScript
import { css, html, LitElement } from 'lit';
import { Image } from '../../Image/Image';
class AttachmentPreview extends LitElement {
static properties = {
bgColor: { type: String },
textColor: { type: String },
width: { type: String },
padding: { type: String },
borderRadius: { type: String },
borderWidth: { type: String },
borderColor: { type: String },
onClose: { type: Function },
fontSize: { type: String },
fontWeight: { type: String },
fontFamily: { type: String },
content: { type: String }, // Can be a media URL or document name
height: { type: String },
contentType: { type: String }, // Type of content (e.g., 'image', 'video', 'document')
};
static styles = css`
.close-button {
cursor: pointer;
background: none;
border: none;
font-size: 20px;
position: absolute;
right: -5px;
top: -5px;
padding: 0px;
border-radius: 50%;
height: 14px;
width: 14px;
aspect-ratio: 1:1
}
.attachment-preview-container {
display: flex;
align-items: center;
position: absolute;
bottom:70px;
margin-left: 10px;
}
.document-preview {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
}
.document-name {
max-width: 90%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
`;
render() {
return html`
<div
class="attachment-preview-container"
style="background-color: ${this.bgColor}; width: ${this.width};
border-radius: ${this.borderRadius}; border-width: ${this.borderWidth}; border-color: ${this.borderColor};
padding: ${this.padding}; height: ${this.height};"
>
<div class="attachment-details" style="height: ${this.height}; width: ${this.width}">
${
this.contentType === 'image'
? Image({
src: this.content,
alt: 'attachment-preview',
height: '100%',
width: '100%',
objectFit: 'cover',
})
: this.contentType === 'video'
? html`<video src="${this.content}" controls width="100%" height="100%" style="object-fit: cover;"></video>`
: html`
<div class="document-preview">
<span class="document-icon">
<svg
width="64px"
height="64px"
viewBox="0 0 1024 1024"
class="icon"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
fill="#000000"
data-darkreader-inline-fill=""
style="--darkreader-inline-fill: #000000;"
>
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
<g id="SVGRepo_iconCarrier">
<path
d="M719.8 651.8m-10 0a10 10 0 1 0 20 0 10 10 0 1 0-20 0Z"
fill="#EFF1FA"
style="--darkreader-inline-fill: #cddcef;"
data-darkreader-inline-fill=""
></path>
<path
d="M512.1 64H172v896h680V385.6L512.1 64z m278.8 324.3h-280v-265l280 265zM808 916H216V108h278.6l0.2 0.2v296.2h312.9l0.2 0.2V916z"
fill="#EFF1FA39393A"
style="--darkreader-inline-fill: rgba(166, 13, 13, 0.23);"
></path>
<path d="M280.5 530h325.9v16H280.5z" fill="#EFF1FA39393A" style="--darkreader-inline-fill: rgba(166, 13, 13, 0.23);"></path>
<path d="M639.5 530h90.2v16h-90.2z" fill="#EFF1FA" style="--darkreader-inline-fill: #cddcef;" data-darkreader-inline-fill=""></path>
<path d="M403.5 641.8h277v16h-277z" fill="#EFF1FA39393A" style="--darkreader-inline-fill: rgba(166, 13, 13, 0.23);"></path>
<path d="M280.6 641.8h91.2v16h-91.2z" fill="#EFF1FA" style="--darkreader-inline-fill: #cddcef;" data-darkreader-inline-fill=""></path>
<path d="M279.9 753.7h326.5v16H279.9z" fill="#EFF1FA39393A" style="--darkreader-inline-fill: rgba(166, 13, 13, 0.23);"></path>
<path d="M655.8 753.7h73.9v16h-73.9z" fill="#EFF1FA" style="--darkreader-inline-fill: #cddcef;" data-darkreader-inline-fill=""></path>
</g>
</svg>
</span>
<span class="document-name">${this.content}</span>
</div>
`
}
</div>
<button class="close-button" @click="${this.onClose}">
<svg width="20px" height="20px" viewBox="0 0 32.00 32.00" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" fill="#ffffff" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0" transform="translate(7.52,7.52), scale(0.53)"><rect x="0" y="0" width="32.00" height="32.00" rx="16" fill="#000" strokewidth="0"></rect></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="1.6"></g><g id="SVGRepo_iconCarrier"> <title>cross-circle</title> <desc>Created with Sketch Beta.</desc> <defs> </defs> <g id="Page-1" stroke-width="0.00032" fill="none" fill-rule="evenodd" sketch:type="MSPage"> <g id="Icon-Set-Filled" sketch:type="MSLayerGroup" transform="translate(-570.000000, -1089.000000)" fill="#EFF1FA"> <path d="M591.657,1109.24 C592.048,1109.63 592.048,1110.27 591.657,1110.66 C591.267,1111.05 590.633,1111.05 590.242,1110.66 L586.006,1106.42 L581.74,1110.69 C581.346,1111.08 580.708,1111.08 580.314,1110.69 C579.921,1110.29 579.921,1109.65 580.314,1109.26 L584.58,1104.99 L580.344,1100.76 C579.953,1100.37 579.953,1099.73 580.344,1099.34 C580.733,1098.95 581.367,1098.95 581.758,1099.34 L585.994,1103.58 L590.292,1099.28 C590.686,1098.89 591.323,1098.89 591.717,1099.28 C592.11,1099.68 592.11,1100.31 591.717,1100.71 L587.42,1105.01 L591.657,1109.24 L591.657,1109.24 Z M586,1089 C577.163,1089 570,1096.16 570,1105 C570,1113.84 577.163,1121 586,1121 C594.837,1121 602,1113.84 602,1105 C602,1096.16 594.837,1089 586,1089 L586,1089 Z" id="cross-circle" sketch:type="MSShapeGroup"> </path> </g> </g> </g></svg> </div>
`;
}
}
customElements.define('attachment-preview', AttachmentPreview);