ngx-wachat
Version:
Chat UI Component for Angular Applications.
301 lines (293 loc) • 22.6 kB
JavaScript
import { EventEmitter, Injectable, ɵɵdefineInjectable, Component, Input, Output, ViewChild, Pipe, NgModule } from '@angular/core';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ChatService {
constructor() {
this.messageList = [];
this.change = new EventEmitter();
}
/**
* @return {?}
*/
get messages() {
return this.messageList;
}
/**
* @param {?} collection
* @return {?}
*/
loadMessages(collection) {
this.messageList = collection;
this.change.next(this.messages);
}
/**
* @param {?} message
* @return {?}
*/
send(message) {
this.messageList = [...this.messageList, message];
this.change.next(this.messages);
}
}
ChatService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
ChatService.ctorParameters = () => [];
/** @nocollapse */ ChatService.ngInjectableDef = ɵɵdefineInjectable({ factory: function ChatService_Factory() { return new ChatService(); }, token: ChatService, providedIn: "root" });
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
const ChatStatus = {
ONLINE: 'online',
OFFLINE: 'offline',
BUSY: 'busy',
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxWachatComponent {
constructor() {
this.contacts = [];
this.placeholder = 'Say Hi';
this.statusColor = {
online: '#66CC99',
busy: '#CCBF72',
offline: '#CC575A'
};
this.height = '400px';
this.width = '350px';
this.color = '#629ce4';
this.emptyListDescription = 'No Contacts Found';
this.sendMessage = new EventEmitter();
this.selected = ChatStatus.ONLINE;
this.messaging = false;
}
/**
* @return {?}
*/
get online() {
return ChatStatus.ONLINE;
}
/**
* @return {?}
*/
get offline() {
return ChatStatus.OFFLINE;
}
/**
* @return {?}
*/
get busy() {
return ChatStatus.BUSY;
}
/**
* @return {?}
*/
ngOnInit() {
}
/**
* @param {?} contact
* @return {?}
*/
selectTo(contact) {
this.destination = contact;
this.messaging = true;
}
/**
* @param {?} status
* @return {?}
*/
selectStatus(status) {
this.selected = status;
}
/**
* @param {?} value
* @return {?}
*/
onSendMessage(value) {
this.sendMessage.emit({
origin: this.origin,
destination: this.destination,
message: value,
date: new Date()
});
}
}
NgxWachatComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-wachat',
template: "<div class=\"chat-wrapper\"\n [style.minHeight]=\"height\"\n [style.maxHeight]=\"height\"\n [style.width]=\"width\">\n <div class=\"chat-header\" [style.backgroundColor]=\"color\">\n <ng-container *ngIf=\"!messaging; else destinationTemplate\">\n <div class=\"chat-status-wrapper\">\n <div class=\"chat-status\" (click)=\"selectStatus(online)\" [class.selected]=\"selected === online\">Online</div>\n <div class=\"chat-status\" (click)=\"selectStatus(offline)\" [class.selected]=\"selected === offline\">Offline</div>\n </div>\n </ng-container>\n </div>\n <div class=\"chat-container\"\n [style.minHeight]=\"'calc(' + height + ' - 40px)'\"\n [style.maxHeight]=\"'calc(' + height + ' - 40px)'\" *ngIf=\"!messaging; else content\">\n <ng-container *ngIf=\"selected === online\">\n <ng-container *ngIf=\"(contacts | status:[online]) as online; else emptyTemplate\">\n <ng-container *ngFor=\"let contact of online\">\n <ng-container *ngTemplateOutlet=\"contactTemplate; context: { item: contact }\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"selected === offline\">\n <ng-container *ngIf=\"(contacts | status:[offline, busy]) as offline; else emptyTemplate\">\n <ng-container *ngFor=\"let contact of offline\">\n <ng-container *ngTemplateOutlet=\"contactTemplate; context: { item: contact }\"></ng-container>\n </ng-container>\n </ng-container>\n </ng-container>\n\n <ng-template #contactTemplate let-contact=\"item\">\n <div class=\"chat-contact\" (click)=\"selectTo(contact)\">\n <img *ngIf=\"contact?.avatar\" [style.borderColor]=\"statusColor[ contact?.status ]\" class=\"avatar\" [src]=\"contact?.avatar\">\n <img *ngIf=\"!contact?.avatar\" [style.borderColor]=\"statusColor[ contact?.status ]\" class=\"avatar no-avatar\">\n <div class=\"contact-info\">\n <span>{{ contact?.name }}</span>\n <span>{{ contact?.description }}</span>\n </div>\n </div>\n </ng-template>\n\n </div>\n</div>\n\n<ng-template #emptyTemplate>\n <div class=\"chat-emptylist\">\n <img class=\"chat-image\">\n <span class=\"label\">{{ emptyListDescription }}</span>\n </div>\n</ng-template>\n\n<ng-template #content>\n <ngx-wachat-content (sendMessage)=\"onSendMessage($event)\"\n [placeholder]=\"placeholder\"\n [origin]=\"origin\"\n [destination]=\"destination\"\n [height]=\"height\">\n </ngx-wachat-content>\n</ng-template>\n\n<ng-template #destinationTemplate>\n <div class=\"chat-header-messaging\">\n <div (click)=\"messaging = false\" class=\"chat-icon-back\"><i class=\"ion-ios-arrow-back\"></i></div>\n <span class=\"chat-label-name\">{{ destination.name }}</span>\n </div>\n</ng-template>\n",
styles: [".chat-wrapper{box-shadow:0 0 4px 0 #ccc;border-radius:5px;overflow:hidden}.chat-wrapper>.chat-header{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;place-content:space-evenly;color:#fff;font-variant:all-petite-caps;font-family:\"Segoe UI\",serif;cursor:pointer;padding:2px;flex-wrap:wrap;height:40px}.chat-wrapper>.chat-header>.chat-header-origin{width:100%;text-align:center}.chat-wrapper>.chat-header>.chat-status-wrapper{flex-basis:100%;display:-webkit-box;display:flex}.chat-wrapper>.chat-header>.chat-status-wrapper>.chat-status{width:50%;height:25px;margin:5px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;place-content:center;border-radius:5px;-webkit-transition:background .3s ease-in-out;transition:background .3s ease-in-out}.chat-wrapper>.chat-header>.chat-status-wrapper>.chat-status.selected{background:#fff;color:#67696e}.chat-wrapper>.chat-container{padding:10px;display:-webkit-box;display:flex;box-sizing:border-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;overflow-y:auto}.chat-wrapper>.chat-container>.chat-contact{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;place-content:flex-start;box-shadow:0 0 2px #cccc;background:#f7f7f7cc;width:100%;height:60px;padding:10px;border-radius:5px;cursor:pointer;-webkit-transition:background 250ms linear;transition:background 250ms linear;margin-bottom:10px;-webkit-animation:.3s forwards showIn;animation:.3s forwards showIn;box-sizing:border-box}.chat-wrapper>.chat-container>.chat-contact>.avatar{width:40px;height:40px;border-radius:50%;border:2px solid}.chat-wrapper>.chat-container>.chat-contact>.avatar.no-avatar{background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTMgNTMiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDUzIDUzOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cGF0aCBzdHlsZT0iZmlsbDojRTdFQ0VEOyIgZD0iTTE4LjYxMyw0MS41NTJsLTcuOTA3LDQuMzEzYy0wLjQ2NCwwLjI1My0wLjg4MSwwLjU2NC0xLjI2OSwwLjkwM0MxNC4wNDcsNTAuNjU1LDE5Ljk5OCw1MywyNi41LDUzDQoJYzYuNDU0LDAsMTIuMzY3LTIuMzEsMTYuOTY0LTYuMTQ0Yy0wLjQyNC0wLjM1OC0wLjg4NC0wLjY4LTEuMzk0LTAuOTM0bC04LjQ2Ny00LjIzM2MtMS4wOTQtMC41NDctMS43ODUtMS42NjUtMS43ODUtMi44ODh2LTMuMzIyDQoJYzAuMjM4LTAuMjcxLDAuNTEtMC42MTksMC44MDEtMS4wM2MxLjE1NC0xLjYzLDIuMDI3LTMuNDIzLDIuNjMyLTUuMzA0YzEuMDg2LTAuMzM1LDEuODg2LTEuMzM4LDEuODg2LTIuNTN2LTMuNTQ2DQoJYzAtMC43OC0wLjM0Ny0xLjQ3Ny0wLjg4Ni0xLjk2NXYtNS4xMjZjMCwwLDEuMDUzLTcuOTc3LTkuNzUtNy45NzdzLTkuNzUsNy45NzctOS43NSw3Ljk3N3Y1LjEyNg0KCWMtMC41NCwwLjQ4OC0wLjg4NiwxLjE4NS0wLjg4NiwxLjk2NXYzLjU0NmMwLDAuOTM0LDAuNDkxLDEuNzU2LDEuMjI2LDIuMjMxYzAuODg2LDMuODU3LDMuMjA2LDYuNjMzLDMuMjA2LDYuNjMzdjMuMjQNCglDMjAuMjk2LDM5Ljg5OSwxOS42NSw0MC45ODYsMTguNjEzLDQxLjU1MnoiLz4NCjxnPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiM1NTYwODA7IiBkPSJNMjYuOTUzLDAuMDA0QzEyLjMyLTAuMjQ2LDAuMjU0LDExLjQxNCwwLjAwNCwyNi4wNDdDLTAuMTM4LDM0LjM0NCwzLjU2LDQxLjgwMSw5LjQ0OCw0Ni43Ng0KCQljMC4zODUtMC4zMzYsMC43OTgtMC42NDQsMS4yNTctMC44OTRsNy45MDctNC4zMTNjMS4wMzctMC41NjYsMS42ODMtMS42NTMsMS42ODMtMi44MzV2LTMuMjRjMCwwLTIuMzIxLTIuNzc2LTMuMjA2LTYuNjMzDQoJCWMtMC43MzQtMC40NzUtMS4yMjYtMS4yOTYtMS4yMjYtMi4yMzF2LTMuNTQ2YzAtMC43OCwwLjM0Ny0xLjQ3NywwLjg4Ni0xLjk2NXYtNS4xMjZjMCwwLTEuMDUzLTcuOTc3LDkuNzUtNy45NzcNCgkJczkuNzUsNy45NzcsOS43NSw3Ljk3N3Y1LjEyNmMwLjU0LDAuNDg4LDAuODg2LDEuMTg1LDAuODg2LDEuOTY1djMuNTQ2YzAsMS4xOTItMC44LDIuMTk1LTEuODg2LDIuNTMNCgkJYy0wLjYwNSwxLjg4MS0xLjQ3OCwzLjY3NC0yLjYzMiw1LjMwNGMtMC4yOTEsMC40MTEtMC41NjMsMC43NTktMC44MDEsMS4wM1YzOC44YzAsMS4yMjMsMC42OTEsMi4zNDIsMS43ODUsMi44ODhsOC40NjcsNC4yMzMNCgkJYzAuNTA4LDAuMjU0LDAuOTY3LDAuNTc1LDEuMzksMC45MzJjNS43MS00Ljc2Miw5LjM5OS0xMS44ODIsOS41MzYtMTkuOUM1My4yNDYsMTIuMzIsNDEuNTg3LDAuMjU0LDI2Ljk1MywwLjAwNHoiLz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjwvc3ZnPg0K)}.chat-wrapper>.chat-container>.chat-contact>.contact-info{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;font-family:\"Segoe UI\",serif;color:#696969;margin-left:8px}.chat-wrapper>.chat-container>.chat-contact>.contact-info span:last-child{font-size:12px}.chat-wrapper>.chat-container>.chat-contact:hover{background:#ededed}.chat-wrapper>.chat-container>.chat-contact:last-child{margin-bottom:0}.chat-wrapper>.chat-container::-webkit-scrollbar-thumb{background:#929292}.chat-wrapper>.chat-container::-webkit-scrollbar-track{background:#ccc}.chat-wrapper>.chat-container::-webkit-scrollbar{width:5px}.chat-header-messaging{display:-webkit-box;display:flex;width:100%;-webkit-box-align:center;align-items:center}.chat-header-messaging>.chat-icon-back{width:40px;height:40px;display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;place-content:center;font-size:1.3em;margin-right:5px;border-radius:2px}.chat-header-messaging>.chat-icon-back:hover{background:#fff;color:#67696e}.chat-header-messaging>.chat-label-name{-webkit-box-flex:1;flex:1}.chat-emptylist{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;place-content:center;width:100%;height:350px}.chat-emptylist>.chat-image{padding:25px;opacity:.5;background:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgdmlld0JveD0iMCAwIDU4IDU4IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1OCA1ODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzAzOTFGRDsiIGQ9Ik00OCwxOS45Mjl2MjEuMTQxQzQ4LDQzLjc5Myw0NS43OTMsNDYsNDMuMDcxLDQ2SDIyTDEyLDU3VjQ2SDQuOTI5QzIuMjA3LDQ2LDAsNDMuNzkzLDAsNDEuMDcxDQoJCWwwLTIxLjE0MUMwLDE3LjIwNywyLjIwNywxNSw0LjkyOSwxNWgzOC4xNDFDNDUuNzkzLDE1LDQ4LDE3LjIwNyw0OCwxOS45Mjl6Ii8+DQoJPHBhdGggc3R5bGU9ImZpbGw6IzBGNzFEMzsiIGQ9Ik01My4wNzEsMUgxNC45MjlDMTIuMjA3LDEsMTAsMy4yMDcsMTAsNS45M1YxNWgzMy4wNzFDNDUuNzkzLDE1LDQ4LDE3LjIwNyw0OCwxOS45M1YzMmg1LjA3MQ0KCQlDNTUuNzkzLDMyLDU4LDI5Ljc5Myw1OCwyNy4wN1Y1LjkzQzU4LDMuMjA3LDU1Ljc5MywxLDUzLjA3MSwxeiIvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMjUsMjYuMDE1SDExYy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDE0YzAuNTUzLDAsMSwwLjQ0OCwxLDFTMjUuNTUzLDI2LjAxNSwyNSwyNi4wMTV6Ig0KCQkvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzgsMzIuMDE1SDExYy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDI3YzAuNTUzLDAsMSwwLjQ0OCwxLDFTMzguNTUzLDMyLjAxNSwzOCwzMi4wMTV6Ig0KCQkvPg0KCTxwYXRoIHN0eWxlPSJmaWxsOiNGRkZGRkY7IiBkPSJNMzgsMzguMDE1SDExYy0wLjU1MywwLTEtMC40NDgtMS0xczAuNDQ3LTEsMS0xaDI3YzAuNTUzLDAsMSwwLjQ0OCwxLDFTMzguNTUzLDM4LjAxNSwzOCwzOC4wMTV6Ig0KCQkvPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=)}.chat-emptylist>.label{margin:10px 0;font-family:Segoe UI;color:#929292}@-webkit-keyframes showIn{from{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes showIn{from{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}"]
}] }
];
/** @nocollapse */
NgxWachatComponent.ctorParameters = () => [];
NgxWachatComponent.propDecorators = {
contacts: [{ type: Input }],
origin: [{ type: Input }],
placeholder: [{ type: Input }],
statusColor: [{ type: Input }],
height: [{ type: Input }],
width: [{ type: Input }],
color: [{ type: Input }],
emptyListDescription: [{ type: Input }],
sendMessage: [{ type: Output }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxWachatContentComponent {
/**
* @param {?} chatService
*/
constructor(chatService) {
this.chatService = chatService;
this.placeholder = '';
this.sendMessage = new EventEmitter();
this.control = new FormControl(null);
this.messages = [];
}
/**
* @return {?}
*/
ngOnInit() {
this.listenChangeMessages();
this.messages = this.filterMessages(this.chatService.messages);
this.scrollToBottom();
}
/**
* @return {?}
*/
listenChangeMessages() {
this.chatService.change.subscribe((/**
* @param {?} messages
* @return {?}
*/
(messages) => {
this.messages = this.filterMessages(messages);
this.scrollToBottom();
}));
}
/**
* @param {?} collection
* @return {?}
*/
filterMessages(collection) {
return collection.filter((/**
* @param {?} item
* @return {?}
*/
(item) => (item.origin.id === this.origin.id) && (item.destination.id === this.destination.id) ||
(item.origin.id === this.destination.id) && (item.destination.id === this.origin.id)));
}
/**
* @return {?}
*/
onKeyEnter() {
if (this.control.value) {
this.sendMessage.emit(this.control.value);
this.control.setValue('');
}
}
/**
* @return {?}
*/
scrollToBottom() {
setTimeout((/**
* @return {?}
*/
() => this.scrollContent.nativeElement.scrollTop = this.scrollContent.nativeElement.scrollHeight), 100);
}
}
NgxWachatContentComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-wachat-content',
template: "<div class=\"chat-content-wrapper\">\n\n <div class=\"chat-content\"\n #scrollContent\n [style.minHeight]=\"'calc(' + height + ' - 84px)'\"\n [style.maxHeight]=\"'calc(' + height + ' - 84px)'\">\n\n <ng-container *ngFor=\"let message of messages\">\n\n <ng-container *ngIf=\"message?.origin?.id === destination?.id\">\n <ng-container *ngTemplateOutlet=\"templateFrom; context: { message: message }\"></ng-container>\n </ng-container>\n\n <ng-container *ngIf=\"message?.origin?.id === origin?.id\">\n <ng-container *ngTemplateOutlet=\"templateTo; context: { message: message }\"></ng-container>\n </ng-container>\n\n </ng-container>\n\n </div>\n\n <textarea [placeholder]=\"placeholder\"\n [formControl]=\"control\"\n (keydown.enter)=\"$event.preventDefault(); onKeyEnter()\"\n class=\"chat-input\">\n </textarea>\n\n</div>\n\n<ng-template #templateFrom let-message=\"message\">\n <div class=\"message-wrapper\">\n <div class=\"chat-from\">\n <p>{{ message.message }}</p>\n <p class=\"chat-date\">{{ message.date | date:'HH:ss' }}</p>\n </div>\n </div>\n</ng-template>\n\n<ng-template #templateTo let-message=\"message\">\n <div class=\"message-wrapper-to\">\n <div class=\"chat-to\">\n <p>{{ message.message }}</p>\n <p class=\"chat-date\">{{ message.date | date:'HH:ss' }}</p>\n </div>\n </div>\n</ng-template>\n",
styles: [".chat-content-wrapper{min-height:calc(400px - 44px);position:relative;font-family:\"Segoe UI\",serif;font-size:14px}.chat-content-wrapper p{margin:0}.chat-content-wrapper .chat-content{padding:10px;display:-webkit-box;display:flex;box-sizing:border-box;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;overflow-y:auto}.chat-content-wrapper .chat-content::-webkit-scrollbar-thumb{background:#e6e6e6}.chat-content-wrapper .chat-content::-webkit-scrollbar-track{background:#f5f5f5}.chat-content-wrapper .chat-content::-webkit-scrollbar{width:5px}.chat-content-wrapper .message-wrapper{display:-webkit-box;display:flex;-webkit-animation:.3s forwards showIn;animation:.3s forwards showIn}.chat-content-wrapper .message-wrapper-to{-webkit-box-align:center;align-items:center;place-content:flex-end;display:-webkit-box;display:flex;-webkit-animation:.3s forwards showIn;animation:.3s forwards showIn}.chat-content-wrapper .chat-from{background:#fff;padding:10px;border-radius:5px;box-shadow:1px 1px 3px 0 #dedede;margin:5px 0;color:#565656}.chat-content-wrapper .chat-from>.chat-date{font-size:10px;text-align:right;margin-top:5px;color:#888}.chat-content-wrapper .chat-to{background:#d8e4db;padding:10px;border-radius:5px;box-shadow:1px 1px 3px 0 #dedede;margin:5px 0;color:#565656}.chat-content-wrapper .chat-to>.chat-date{font-size:10px;text-align:right;margin-top:5px;color:#888}.chat-content-wrapper .chat-input{position:absolute;bottom:0;width:100%;box-shadow:1px 0 1px #cccccc7a;border:0;resize:none;outline:0;box-sizing:border-box;font-family:\"Segoe UI\",serif;padding:10px 10px 0;color:#333}@-webkit-keyframes showIn{from{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes showIn{from{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}to{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}"]
}] }
];
/** @nocollapse */
NgxWachatContentComponent.ctorParameters = () => [
{ type: ChatService }
];
NgxWachatContentComponent.propDecorators = {
origin: [{ type: Input }],
destination: [{ type: Input }],
height: [{ type: Input }],
placeholder: [{ type: Input }],
sendMessage: [{ type: Output }],
scrollContent: [{ type: ViewChild, args: ['scrollContent', { static: true },] }]
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class ChatStatusPipe {
/**
* @param {?} value
* @param {?} status
* @return {?}
*/
transform(value, status) {
/** @type {?} */
const filter = value.filter((/**
* @param {?} item
* @return {?}
*/
item => status.indexOf(item.status) >= 0));
return filter.length > 0 ? filter : null;
}
}
ChatStatusPipe.decorators = [
{ type: Pipe, args: [{
name: 'status'
},] }
];
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
class NgxWachatModule {
/**
* @return {?}
*/
static forRoot() {
return {
ngModule: NgxWachatModule,
providers: [ChatService]
};
}
}
NgxWachatModule.decorators = [
{ type: NgModule, args: [{
declarations: [
NgxWachatComponent,
NgxWachatContentComponent,
ChatStatusPipe
],
imports: [
CommonModule,
BrowserModule,
ReactiveFormsModule,
],
exports: [
NgxWachatComponent,
NgxWachatContentComponent
],
providers: [ChatService]
},] }
];
export { ChatService, ChatStatus, ChatStatusPipe, NgxWachatComponent, NgxWachatContentComponent, NgxWachatModule };
//# sourceMappingURL=ngx-wachat.js.map