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
115 lines (111 loc) • 14.2 kB
JavaScript
import{k as t,s as e,i as o,D as i,t as s,R as r,e as n,h as c,a as l}from"./p-3a537be0.js";import{I as a}from"./p-30b883d0.js";const p=({primary:o,backgroundColor:i=null,backgroundImage:s=null,size:r,label:n,onClick:c,fontSize:l,fontFamily:a,borderWidth:p,borderColor:d,borderRadius:h,textColor:g,textAlign:u,width:f,height:y,fontStyle:m,fontWeight:x,cursor:b})=>{const w=o?"storybook-button--primary":"storybook-button--secondary";const k={backgroundColor:i,backgroundImage:s?`url(${s})`:"none",backgroundSize:"cover",backgroundPosition:"center",fontSize:l,fontFamily:a,borderWidth:p,borderColor:d,borderStyle:"solid",borderRadius:h,color:g,textAlign:u,width:f,height:y,fontStyle:m,fontWeight:x,cursor:"pointer"};const v=t=>{if(t.key==="Enter"){console.log("enter is pressed");c()}};return t`
<button
type="button"
class=${["storybook-button",`storybook-button--${r||"medium"}`,w].join(" ")}
style='${e(k)}'
@click=${c}
@keydown=${v}
>
${n}
</button>
`};
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/class d extends o{constructor(t){if(super(t),this.it=i,t.type!==s.CHILD)throw Error(this.constructor.directiveName+"() can only be used in child bindings")}render(t){if(t===i||null==t)return this._t=void 0,this.it=t;if(t===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 e=[t];return e.raw=e,this._t={_$litType$:this.constructor.resultType,strings:e,values:[]}}}d.directiveName="unsafeHTML",d.resultType=1;
/**
* @license
* Copyright 2017 Google LLC
* SPDX-License-Identifier: BSD-3-Clause
*/class h extends d{}h.directiveName="unsafeSVG",h.resultType=2;const g=n(h);const u=`\n<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 f=`<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>\n`;class y extends c{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=l`
.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(t){const e=t.lastIndexOf(".");const o=e!==-1?t.slice(0,e):t;const i=e!==-1?t.slice(e):"";const s=40-i.length;if(o.length<=s){const t=o.slice(0,Math.min(20,o.length));const e=o.slice(20);return`${t}<br/>${e}${i}`}else{const t=o.slice(0,s-3)+"...";const e=t.slice(0,20);const r=t.slice(20);return`${e} ${r}${i}`}}render(){console.log(this.docType,"ok from document message bubble");return t`
<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")?t`<div class='attachment-icon'>${g(f)}</div>`:this.docType.includes("application/pdf")?t`<div class='attachment-icon'>${g(u)}</div>`:a({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">
${p({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?t`<blue-read-mark></blue-read-mark>`:this.isDelivered=="true"?t`<double-mark></double-mark>`:this.isDelivered=="pending"?t`<clock-mark></clock-mark>`:t`<single-mark></single-mark>`:null}
</div>
</div>
`}}customElements.define("document-message",y);export{p as B};
//# sourceMappingURL=p-f8b36946.js.map