ngx-wachat
Version:
Chat UI Component for Angular Applications.
376 lines (368 loc) • 25.5 kB
JavaScript
import { __spread } from 'tslib';
import { Injectable, ɵɵdefineInjectable, EventEmitter, 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
*/
var ChatService = /** @class */ (function () {
function ChatService() {
this.messageList = [];
this.change = new EventEmitter();
}
Object.defineProperty(ChatService.prototype, "messages", {
get: /**
* @return {?}
*/
function () {
return this.messageList;
},
enumerable: true,
configurable: true
});
/**
* @param {?} collection
* @return {?}
*/
ChatService.prototype.loadMessages = /**
* @param {?} collection
* @return {?}
*/
function (collection) {
this.messageList = collection;
this.change.next(this.messages);
};
/**
* @param {?} message
* @return {?}
*/
ChatService.prototype.send = /**
* @param {?} message
* @return {?}
*/
function (message) {
this.messageList = __spread(this.messageList, [message]);
this.change.next(this.messages);
};
ChatService.decorators = [
{ type: Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
ChatService.ctorParameters = function () { return []; };
/** @nocollapse */ ChatService.ngInjectableDef = ɵɵdefineInjectable({ factory: function ChatService_Factory() { return new ChatService(); }, token: ChatService, providedIn: "root" });
return ChatService;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
/** @enum {string} */
var ChatStatus = {
ONLINE: 'online',
OFFLINE: 'offline',
BUSY: 'busy',
};
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxWachatComponent = /** @class */ (function () {
function NgxWachatComponent() {
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;
}
Object.defineProperty(NgxWachatComponent.prototype, "online", {
get: /**
* @return {?}
*/
function () {
return ChatStatus.ONLINE;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxWachatComponent.prototype, "offline", {
get: /**
* @return {?}
*/
function () {
return ChatStatus.OFFLINE;
},
enumerable: true,
configurable: true
});
Object.defineProperty(NgxWachatComponent.prototype, "busy", {
get: /**
* @return {?}
*/
function () {
return ChatStatus.BUSY;
},
enumerable: true,
configurable: true
});
/**
* @return {?}
*/
NgxWachatComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
};
/**
* @param {?} contact
* @return {?}
*/
NgxWachatComponent.prototype.selectTo = /**
* @param {?} contact
* @return {?}
*/
function (contact) {
this.destination = contact;
this.messaging = true;
};
/**
* @param {?} status
* @return {?}
*/
NgxWachatComponent.prototype.selectStatus = /**
* @param {?} status
* @return {?}
*/
function (status) {
this.selected = status;
};
/**
* @param {?} value
* @return {?}
*/
NgxWachatComponent.prototype.onSendMessage = /**
* @param {?} value
* @return {?}
*/
function (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 = function () { return []; };
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 }]
};
return NgxWachatComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxWachatContentComponent = /** @class */ (function () {
function NgxWachatContentComponent(chatService) {
this.chatService = chatService;
this.placeholder = '';
this.sendMessage = new EventEmitter();
this.control = new FormControl(null);
this.messages = [];
}
/**
* @return {?}
*/
NgxWachatContentComponent.prototype.ngOnInit = /**
* @return {?}
*/
function () {
this.listenChangeMessages();
this.messages = this.filterMessages(this.chatService.messages);
this.scrollToBottom();
};
/**
* @return {?}
*/
NgxWachatContentComponent.prototype.listenChangeMessages = /**
* @return {?}
*/
function () {
var _this = this;
this.chatService.change.subscribe((/**
* @param {?} messages
* @return {?}
*/
function (messages) {
_this.messages = _this.filterMessages(messages);
_this.scrollToBottom();
}));
};
/**
* @param {?} collection
* @return {?}
*/
NgxWachatContentComponent.prototype.filterMessages = /**
* @param {?} collection
* @return {?}
*/
function (collection) {
var _this = this;
return collection.filter((/**
* @param {?} item
* @return {?}
*/
function (item) {
return (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 {?}
*/
NgxWachatContentComponent.prototype.onKeyEnter = /**
* @return {?}
*/
function () {
if (this.control.value) {
this.sendMessage.emit(this.control.value);
this.control.setValue('');
}
};
/**
* @return {?}
*/
NgxWachatContentComponent.prototype.scrollToBottom = /**
* @return {?}
*/
function () {
var _this = this;
setTimeout((/**
* @return {?}
*/
function () { 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 = function () { return [
{ 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 },] }]
};
return NgxWachatContentComponent;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var ChatStatusPipe = /** @class */ (function () {
function ChatStatusPipe() {
}
/**
* @param {?} value
* @param {?} status
* @return {?}
*/
ChatStatusPipe.prototype.transform = /**
* @param {?} value
* @param {?} status
* @return {?}
*/
function (value, status) {
/** @type {?} */
var filter = value.filter((/**
* @param {?} item
* @return {?}
*/
function (item) { return status.indexOf(item.status) >= 0; }));
return filter.length > 0 ? filter : null;
};
ChatStatusPipe.decorators = [
{ type: Pipe, args: [{
name: 'status'
},] }
];
return ChatStatusPipe;
}());
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
var NgxWachatModule = /** @class */ (function () {
function NgxWachatModule() {
}
/**
* @return {?}
*/
NgxWachatModule.forRoot = /**
* @return {?}
*/
function () {
return {
ngModule: NgxWachatModule,
providers: [ChatService]
};
};
NgxWachatModule.decorators = [
{ type: NgModule, args: [{
declarations: [
NgxWachatComponent,
NgxWachatContentComponent,
ChatStatusPipe
],
imports: [
CommonModule,
BrowserModule,
ReactiveFormsModule,
],
exports: [
NgxWachatComponent,
NgxWachatContentComponent
],
providers: [ChatService]
},] }
];
return NgxWachatModule;
}());
export { ChatService, ChatStatus, ChatStatusPipe, NgxWachatComponent, NgxWachatContentComponent, NgxWachatModule };
//# sourceMappingURL=ngx-wachat.js.map