ngx-wachat
Version:
Chat UI Component for Angular Applications.
423 lines (408 loc) • 29.2 kB
JavaScript
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('/core'), require('@angular/forms'), require('/common'), require('@angular/platform-browser')) :
typeof define === 'function' && define.amd ? define('ngx-wachat', ['exports', '/core', '@angular/forms', '/common', '@angular/platform-browser'], factory) :
(global = global || self, factory(global['ngx-wachat'] = {}, global.ng.core, global.ng.forms, global.ng.common, global.ng.platformBrowser));
}(this, function (exports, core, forms, common, platformBrowser) { 'use strict';
/*! *****************************************************************************
Copyright (c) Microsoft Corporation. All rights reserved.
Licensed under the Apache License, Version 2.0 (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy of the
License at http://www.apache.org/licenses/LICENSE-2.0
THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
MERCHANTABLITY OR NON-INFRINGEMENT.
See the Apache Version 2.0 License for specific language governing permissions
and limitations under the License.
***************************************************************************** */
function __read(o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
}
function __spread() {
for (var ar = [], i = 0; i < arguments.length; i++)
ar = ar.concat(__read(arguments[i]));
return ar;
}
/**
* @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 core.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: core.Injectable, args: [{
providedIn: 'root'
},] }
];
/** @nocollapse */
ChatService.ctorParameters = function () { return []; };
/** @nocollapse */ ChatService.ngInjectableDef = core.ɵɵ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 core.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: core.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: core.Input }],
origin: [{ type: core.Input }],
placeholder: [{ type: core.Input }],
statusColor: [{ type: core.Input }],
height: [{ type: core.Input }],
width: [{ type: core.Input }],
color: [{ type: core.Input }],
emptyListDescription: [{ type: core.Input }],
sendMessage: [{ type: core.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 core.EventEmitter();
this.control = new forms.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: core.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: core.Input }],
destination: [{ type: core.Input }],
height: [{ type: core.Input }],
placeholder: [{ type: core.Input }],
sendMessage: [{ type: core.Output }],
scrollContent: [{ type: core.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: core.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: core.NgModule, args: [{
declarations: [
NgxWachatComponent,
NgxWachatContentComponent,
ChatStatusPipe
],
imports: [
common.CommonModule,
platformBrowser.BrowserModule,
forms.ReactiveFormsModule,
],
exports: [
NgxWachatComponent,
NgxWachatContentComponent
],
providers: [ChatService]
},] }
];
return NgxWachatModule;
}());
exports.ChatService = ChatService;
exports.ChatStatus = ChatStatus;
exports.ChatStatusPipe = ChatStatusPipe;
exports.NgxWachatComponent = NgxWachatComponent;
exports.NgxWachatContentComponent = NgxWachatContentComponent;
exports.NgxWachatModule = NgxWachatModule;
Object.defineProperty(exports, '__esModule', { value: true });
}));
//# sourceMappingURL=ngx-wachat.umd.js.map