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
265 lines (241 loc) • 16.1 kB
JavaScript
'use strict';
const ClockMark = require('./ClockMark-6b4b6198.js');
const Image = require('./Image-6ad8d97b.js');
const Button = ({
primary,
backgroundColor = null,
backgroundImage = null,
size,
label,
onClick,
fontSize,
fontFamily,
borderWidth,
borderColor,
borderRadius,
textColor,
textAlign,
width,
height,
fontStyle,
fontWeight,
cursor
}) => {
const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
const styles = {
backgroundColor,
backgroundImage: backgroundImage ? `url(${backgroundImage})` : 'none',
backgroundSize: 'cover',
backgroundPosition: 'center',
fontSize,
fontFamily,
borderWidth,
borderColor,
borderStyle: 'solid',
borderRadius,
color: textColor,
textAlign,
width,
height,
fontStyle,
fontWeight,
cursor: 'pointer'
};
const handleKeyDown = (e) => {
if (e.key === 'Enter') {
console.log('enter is pressed');
onClick();
}
};
return ClockMark.ke`
<button
type="button"
class=${['storybook-button', `storybook-button--${size || 'medium'}`, mode].join(' ')}
style='${ClockMark.se(styles)}'
@click=${onClick}
@keydown=${handleKeyDown}
>
${label}
</button>
`;
};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/class le extends ClockMark.i{constructor(i){if(super(i),this.it=ClockMark.D,i.type!==ClockMark.t.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===ClockMark.D||null==t)return this._t=void 0,this.it=t;if(t===ClockMark.R)return t;if("string"!=typeof t)throw Error(this.constructor.directiveName+"() called with a non-string value");if(t===this.it)return this._t;this.it=t;const i=[t];return i.raw=i,this._t={_$litType$:this.constructor.resultType,strings:i,values:[]}}}le.directiveName="unsafeHTML",le.resultType=1;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/class pe extends le{}pe.directiveName="unsafeSVG",pe.resultType=2;const fe=ClockMark.e(pe);
const pdfSvg = `
<svg version="1.1" id="_x35_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" width="25px" height="25px" 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"> <g> <polygon style="fill:#B12A27;" points="475.435,117.825 475.435,512 47.791,512 47.791,0.002 357.613,0.002 412.491,54.881 "></polygon> <rect x="36.565" y="34.295" style="fill:#F2F2F2;" width="205.097" height="91.768"></rect> <g> <g> <path style="fill:#B12A27;" d="M110.132,64.379c-0.905-2.186-2.111-4.146-3.769-5.804c-1.658-1.658-3.694-3.015-6.031-3.92 c-2.412-0.98-5.126-1.432-8.141-1.432H69.651v58.195h11.383V89.481h11.157c3.015,0,5.729-0.452,8.141-1.432 c2.337-0.905,4.372-2.261,6.031-3.92c1.659-1.658,2.865-3.543,3.769-5.804c0.829-2.186,1.282-4.523,1.282-6.935 C111.413,68.902,110.961,66.565,110.132,64.379z M97.844,77.118c-1.508,1.432-3.618,2.186-6.181,2.186H81.034V63.323h10.629 c2.563,0,4.674,0.754,6.181,2.261c1.432,1.432,2.186,3.392,2.186,5.804C100.031,73.726,99.277,75.686,97.844,77.118z"></path> <path style="fill:#B12A27;" d="M164.558,75.761c-0.075-2.035-0.151-3.844-0.377-5.503c-0.226-1.659-0.603-3.166-1.131-4.598 c-0.528-1.357-1.206-2.714-2.111-3.92c-2.035-2.94-4.523-5.126-7.312-6.483c-2.865-1.357-6.257-2.035-10.252-2.035h-20.956 v58.195h20.956c3.995,0,7.387-0.678,10.252-2.035c2.789-1.357,5.277-3.543,7.312-6.483c0.905-1.206,1.583-2.563,2.111-3.92 c0.528-1.432,0.905-2.94,1.131-4.598c0.226-1.658,0.301-3.468,0.377-5.503c0.075-1.96,0.075-4.146,0.075-6.558 C164.633,79.908,164.633,77.721,164.558,75.761z M153.175,88.2c0,1.734-0.151,3.091-0.302,4.297 c-0.151,1.131-0.377,2.186-0.678,2.94c-0.301,0.829-0.754,1.583-1.281,2.261c-1.885,2.412-4.749,3.543-8.518,3.543h-8.669V63.323 h8.669c3.769,0,6.634,1.206,8.518,3.618c0.528,0.678,0.98,1.357,1.281,2.186s0.528,1.809,0.678,3.015 c0.151,1.131,0.302,2.563,0.302,4.221c0.075,1.659,0.075,3.694,0.075,5.955C153.251,84.581,153.251,86.541,153.175,88.2z"></path> <path style="fill:#B12A27;" d="M213.18,63.323V53.222h-38.37v58.195h11.383V87.823h22.992V77.646h-22.992V63.323H213.18z"></path> </g> <g> <path style="fill:#B12A27;" d="M110.132,64.379c-0.905-2.186-2.111-4.146-3.769-5.804c-1.658-1.658-3.694-3.015-6.031-3.92 c-2.412-0.98-5.126-1.432-8.141-1.432H69.651v58.195h11.383V89.481h11.157c3.015,0,5.729-0.452,8.141-1.432 c2.337-0.905,4.372-2.261,6.031-3.92c1.659-1.658,2.865-3.543,3.769-5.804c0.829-2.186,1.282-4.523,1.282-6.935 C111.413,68.902,110.961,66.565,110.132,64.379z M97.844,77.118c-1.508,1.432-3.618,2.186-6.181,2.186H81.034V63.323h10.629 c2.563,0,4.674,0.754,6.181,2.261c1.432,1.432,2.186,3.392,2.186,5.804C100.031,73.726,99.277,75.686,97.844,77.118z"></path> </g> </g> <polygon style="opacity:0.08;fill:#040000;" points="475.435,117.825 475.435,512 47.791,512 47.791,419.581 247.705,219.667 259.54,207.832 266.098,201.273 277.029,190.343 289.995,177.377 412.491,54.881 "></polygon> <polygon style="fill:#771B1B;" points="475.435,117.836 357.599,117.836 357.599,0 "></polygon> <g> <path style="fill:#F2F2F2;" d="M414.376,370.658c-2.488-4.372-5.88-8.518-10.101-12.287c-3.467-3.166-7.538-6.106-12.137-8.82 c-18.544-10.93-45.003-16.207-80.961-16.207h-3.618c-1.96-1.809-3.995-3.618-6.106-5.503 c-13.644-12.287-24.499-25.63-32.942-40.48c16.584-36.561,24.499-69.126,23.519-96.867c-0.151-4.674-0.829-9.046-2.035-13.117 c-1.809-6.558-4.824-12.363-9.046-17.112c-0.075-0.075-0.075-0.075-0.151-0.151c-6.709-7.538-16.056-11.835-25.555-11.835 c-9.574,0-18.393,4.146-24.801,11.76c-6.332,7.538-9.724,17.866-9.875,30.002c-0.226,18.544,1.281,36.108,4.448,52.315 c0.301,1.282,0.528,2.563,0.829,3.844c3.166,14.7,7.84,28.645,13.87,41.611c-7.086,14.398-14.247,26.836-19.223,35.279 c-3.769,6.408-7.915,13.117-12.212,19.826c-19.373,3.468-35.807,7.689-50.129,12.966c-19.373,7.011-34.902,16.056-46.059,26.836 c-7.237,6.935-12.137,14.323-14.549,22.012c-2.563,7.915-2.412,15.83,0.452,22.916c2.638,6.558,7.387,12.061,13.72,15.83 c1.508,0.905,3.091,1.658,4.749,2.337c4.825,1.96,10.101,3.015,15.604,3.015c12.74,0,25.856-5.503,36.937-15.378 c20.655-18.469,41.988-48.169,54.577-66.94c10.327-1.583,21.559-2.94,34.224-4.297c14.926-1.508,28.118-2.412,40.104-2.865 c3.694,3.317,7.237,6.483,10.629,9.498c18.846,16.81,33.168,28.947,46.134,37.465c0,0.075,0.075,0.075,0.151,0.075 c5.126,3.392,10.026,6.181,14.926,8.443c5.503,2.563,11.081,3.92,16.81,3.92c7.237,0,14.021-2.186,19.675-6.181 c5.729-4.146,9.875-10.101,11.76-16.81C420.18,387.694,418.899,378.724,414.376,370.658z M247.705,219.667 c-1.055-9.348-1.508-19.072-1.357-29.324c0.151-9.724,3.694-16.283,8.895-16.283c3.92,0,8.066,3.543,9.95,10.327 c0.528,2.035,0.905,4.372,0.98,7.01c0.151,3.166,0.075,6.483-0.075,9.875c-0.452,9.574-2.111,19.75-4.975,30.681 c-1.734,7.011-3.995,14.323-6.784,21.936C251.173,243.186,248.911,231.803,247.705,219.667z M121.967,418.073 c-1.282-3.166,0.151-9.272,7.991-16.81c11.986-11.458,30.756-20.504,56.914-27.364c-4.975,6.784-9.875,12.966-14.624,18.619 c-7.237,8.744-14.172,16.132-20.429,21.71c-5.352,4.824-11.232,7.84-16.81,8.594c-0.98,0.151-1.96,0.226-2.94,0.226 C127.168,423.049,123.173,421.089,121.967,418.073z M242.428,337.942l0.528-0.829l-0.829,0.151 c0.151-0.377,0.377-0.754,0.603-1.055c3.166-5.352,7.161-12.212,11.458-20.127l0.377,0.829l0.98-2.035 c3.166,4.523,6.634,8.971,10.252,13.267c1.734,2.035,3.543,3.995,5.352,5.955l-1.206,0.075l1.055,0.98 c-3.091,0.226-6.332,0.528-9.574,0.829c-2.035,0.226-4.146,0.377-6.257,0.603C250.796,337.037,246.499,337.49,242.428,337.942z M369.297,384.98c-8.971-5.729-18.996-13.795-31.359-24.575c17.564,1.809,31.359,5.654,41.159,11.383 c4.297,2.488,7.538,5.051,9.724,7.538c3.618,3.844,4.9,7.312,4.221,9.649c-0.603,2.337-3.241,3.92-6.483,3.92 c-1.885,0-3.844-0.452-5.88-1.432c-3.468-1.658-7.086-3.694-10.93-6.181C369.598,385.282,369.448,385.131,369.297,384.98z"></path> </g> </g> </g></svg>`;
const excelSvg = `<svg width="32px" height="32px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 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"><defs><linearGradient id="a" x1="4.494" y1="-2092.086" x2="13.832" y2="-2075.914" gradientTransform="translate(0 2100)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#18884f"></stop><stop offset="0.5" stop-color="#117e43"></stop><stop offset="1" stop-color="#0b6631"></stop></linearGradient></defs><title>file_type_excel</title><path d="M19.581,15.35,8.512,13.4V27.809A1.192,1.192,0,0,0,9.705,29h19.1A1.192,1.192,0,0,0,30,27.809h0V22.5Z" style="fill:#185c37"></path><path d="M19.581,3H9.705A1.192,1.192,0,0,0,8.512,4.191h0V9.5L19.581,16l5.861,1.95L30,16V9.5Z" style="fill:#21a366"></path><path d="M8.512,9.5H19.581V16H8.512Z" style="fill:#107c41"></path><path d="M16.434,8.2H8.512V24.45h7.922a1.2,1.2,0,0,0,1.194-1.191V9.391A1.2,1.2,0,0,0,16.434,8.2Z" style="opacity:0.10000000149011612;isolation:isolate"></path><path d="M15.783,8.85H8.512V25.1h7.271a1.2,1.2,0,0,0,1.194-1.191V10.041A1.2,1.2,0,0,0,15.783,8.85Z" style="opacity:0.20000000298023224;isolation:isolate"></path><path d="M15.783,8.85H8.512V23.8h7.271a1.2,1.2,0,0,0,1.194-1.191V10.041A1.2,1.2,0,0,0,15.783,8.85Z" style="opacity:0.20000000298023224;isolation:isolate"></path><path d="M15.132,8.85H8.512V23.8h6.62a1.2,1.2,0,0,0,1.194-1.191V10.041A1.2,1.2,0,0,0,15.132,8.85Z" style="opacity:0.20000000298023224;isolation:isolate"></path><path d="M3.194,8.85H15.132a1.193,1.193,0,0,1,1.194,1.191V21.959a1.193,1.193,0,0,1-1.194,1.191H3.194A1.192,1.192,0,0,1,2,21.959V10.041A1.192,1.192,0,0,1,3.194,8.85Z" style="fill:url(#a)"></path><path d="M5.7,19.873l2.511-3.884-2.3-3.862H7.758L9.013,14.6c.116.234.2.408.238.524h.017c.082-.188.169-.369.26-.546l1.342-2.447h1.7l-2.359,3.84,2.419,3.905H10.821l-1.45-2.711A2.355,2.355,0,0,1,9.2,16.8H9.176a1.688,1.688,0,0,1-.168.351L7.515,19.873Z" style="fill:#fff"></path><path d="M28.806,3H19.581V9.5H30V4.191A1.192,1.192,0,0,0,28.806,3Z" style="fill:#33c481"></path><path d="M19.581,16H30v6.5H19.581Z" style="fill:#107c41"></path></g></svg>
`;
class DocumentMessageBubble extends ClockMark.h {
static properties = {
bgColor: { type: String },
borderWidth: { type: String },
borderColor: { type: String },
borderStyle: { type: String },
borderRadius: { type: String },
padding: { type: String },
docName: { type: String },
width: { type: String },
height: { type: String },
documentNameBg: { type: String },
documentNamePadding: { type: String },
time: { type: String },
href: { type: String },
fileName: { type: String },
isRead: { type: Boolean },
isSelf: { type: Boolean },
isPopupOpen: { type: Boolean },
isDelivered: { type: String },
docType: { type: String },
};
constructor() {
super();
this.isPopupOpen = false;
}
static styles = ClockMark.i$1`
.document-message-container {
display: flex;
align-items: center;
font-size: 16px;
justify-content: space-between;
flex-direction: column;
position: relative;
}
.doc-container {
display: flex;
align-items: center;
width: 90%;
padding: 4px 8px 4px 8px;
}
.document-name {
display: flex;
align-items: center;
gap: 2px;
width: 100%;
font-size: 14px;
}
.truncate {
display: inline-block;
max-width: 90%;
word-wrap: break-word;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.time-stamp-container {
position: absolute;
bottom: 5px;
right: 10px;
display: flex;
align-items: center;
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;
}
truncateDocName(docName) {
const lastDotIndex = docName.lastIndexOf('.');
const name = lastDotIndex !== -1 ? docName.slice(0, lastDotIndex) : docName;
const extension = lastDotIndex !== -1 ? docName.slice(lastDotIndex) : '';
const availableSpace = 40 - extension.length;
if (name.length <= availableSpace) {
const firstLine = name.slice(0, Math.min(20, name.length));
const secondLine = name.slice(20);
return `${firstLine}<br/>${secondLine}${extension}`;
} else {
const truncatedName = name.slice(0, availableSpace - 3) + '...';
const firstLine = truncatedName.slice(0, 20);
const secondLine = truncatedName.slice(20);
return `${firstLine} ${secondLine}${extension}`;
}
}
render() {
console.log(this.docType, 'ok from document message bubble');
return ClockMark.ke`
<div
class="document-message-container"
style="padding:${this.padding};
border-width: ${this.borderWidth};
border-color: ${this.borderColor};
border-style:${this.borderStyle};
border-radius:${this.borderRadius || '6px'};
background-color: ${this.bgColor || '#000'};
height: ${this.height};
width: ${this.width};
"
>
<div class="doc-container" style="background-color: ${this.documentNameBg || '#fff'};">
<div class="document-name" style=" padding: ${this.documentNamePadding || '5px 10px 5px 0'}">
${this.docType.includes('vnd.openxmlformats-officedocument.spreadsheetml.sheet')
? ClockMark.ke`<div class='attachment-icon'>${fe(excelSvg)}</div>`
: this.docType.includes('application/pdf')
? ClockMark.ke`<div class='attachment-icon'>${fe(pdfSvg)}</div>`
: Image.Image({
src: 'https://flexcrew.s3.us-west-1.amazonaws.com/document_text_svgrepo_com_1_2583e4b5fc.svg',
alt: 'documentIcon',
height: '25px',
width: '25px',
})}
<span .innerHTML=${this.truncateDocName(this.docName || 'Document')}></span>
</div>
<a href=${this.href} download=${this.fileName} target="_blank">
${Button({
backgroundImage: 'https://flexcrew.s3.us-west-1.amazonaws.com/download_icon_4d03a645bf.svg',
height: '25px',
width: '25px',
borderColor: 'transparent',
backgroundColor: 'transparent ',
})}
</a>
</div>
<div class="time-stamp-container">
<timestamp-element .time="${this.time}" .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>
`;
}
}
customElements.define('document-message', DocumentMessageBubble);
exports.Button = Button;
//# sourceMappingURL=DocumentMessageBubble-a17c8aa2.js.map