ngx-wachat
Version:
Chat UI Component for Angular Applications.
133 lines • 13.1 kB
JavaScript
/**
* @fileoverview added by tsickle
* @suppress {checkTypes,extraRequire,missingOverride,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
*/
import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
import { FormControl } from '@angular/forms';
import { ChatService } from '../../services/chat.service';
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;
}());
export { NgxWachatContentComponent };
if (false) {
/** @type {?} */
NgxWachatContentComponent.prototype.origin;
/** @type {?} */
NgxWachatContentComponent.prototype.destination;
/** @type {?} */
NgxWachatContentComponent.prototype.height;
/** @type {?} */
NgxWachatContentComponent.prototype.placeholder;
/** @type {?} */
NgxWachatContentComponent.prototype.sendMessage;
/** @type {?} */
NgxWachatContentComponent.prototype.scrollContent;
/** @type {?} */
NgxWachatContentComponent.prototype.control;
/** @type {?} */
NgxWachatContentComponent.prototype.messages;
/**
* @type {?}
* @private
*/
NgxWachatContentComponent.prototype.chatService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC1jb250ZW50LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL25neC13YWNoYXQvIiwic291cmNlcyI6WyJjb21wb25lbnRzL2NoYXQtY29udGVudC9jaGF0LWNvbnRlbnQuY29tcG9uZW50LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7QUFBQSxPQUFPLEVBQUMsU0FBUyxFQUFFLFVBQVUsRUFBRSxZQUFZLEVBQUUsS0FBSyxFQUFVLE1BQU0sRUFBRSxTQUFTLEVBQUMsTUFBTSxlQUFlLENBQUM7QUFDcEcsT0FBTyxFQUFDLFdBQVcsRUFBQyxNQUFNLGdCQUFnQixDQUFDO0FBRzNDLE9BQU8sRUFBQyxXQUFXLEVBQUMsTUFBTSw2QkFBNkIsQ0FBQztBQUV4RDtJQXVCRSxtQ0FBcUIsV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFWcEMsZ0JBQVcsR0FBRyxFQUFFLENBQUM7UUFFaEIsZ0JBQVcsR0FBeUIsSUFBSSxZQUFZLEVBQUUsQ0FBQztRQUkxRCxZQUFPLEdBQUcsSUFBSSxXQUFXLENBQUMsSUFBSSxDQUFDLENBQUM7UUFFaEMsYUFBUSxHQUFrQixFQUFFLENBQUM7SUFFYyxDQUFDOzs7O0lBRW5ELDRDQUFROzs7SUFBUjtRQUNFLElBQUksQ0FBQyxvQkFBb0IsRUFBRSxDQUFDO1FBQzVCLElBQUksQ0FBQyxRQUFRLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFFBQVEsQ0FBQyxDQUFDO1FBQy9ELElBQUksQ0FBQyxjQUFjLEVBQUUsQ0FBQztJQUN4QixDQUFDOzs7O0lBRUQsd0RBQW9COzs7SUFBcEI7UUFBQSxpQkFLQztRQUpDLElBQUksQ0FBQyxXQUFXLENBQUMsTUFBTSxDQUFDLFNBQVM7Ozs7UUFBQyxVQUFDLFFBQXVCO1lBQ3hELEtBQUksQ0FBQyxRQUFRLEdBQUcsS0FBSSxDQUFDLGNBQWMsQ0FBRSxRQUFRLENBQUUsQ0FBQztZQUNoRCxLQUFJLENBQUMsY0FBYyxFQUFFLENBQUM7UUFDeEIsQ0FBQyxFQUFDLENBQUM7SUFDTCxDQUFDOzs7OztJQUVELGtEQUFjOzs7O0lBQWQsVUFBZ0IsVUFBeUI7UUFBekMsaUJBS0M7UUFKQyxPQUFPLFVBQVUsQ0FBQyxNQUFNOzs7O1FBQUMsVUFBRSxJQUFpQjtZQUMxQyxPQUFBLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLEtBQUssS0FBSSxDQUFDLE1BQU0sQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsRUFBRSxLQUFLLEtBQUksQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDO2dCQUNwRixDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsRUFBRSxLQUFLLEtBQUksQ0FBQyxXQUFXLENBQUMsRUFBRSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLEVBQUUsS0FBSyxLQUFJLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQztRQURwRixDQUNvRixFQUNyRixDQUFDO0lBQ0osQ0FBQzs7OztJQUVELDhDQUFVOzs7SUFBVjtRQUNFLElBQUksSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLEVBQUU7WUFDdEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsQ0FBQztZQUMxQyxJQUFJLENBQUMsT0FBTyxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsQ0FBQztTQUMzQjtJQUNILENBQUM7Ozs7SUFFRCxrREFBYzs7O0lBQWQ7UUFBQSxpQkFFQztRQURDLFVBQVU7OztRQUFDLGNBQU0sT0FBQSxLQUFJLENBQUMsYUFBYSxDQUFDLGFBQWEsQ0FBQyxTQUFTLEdBQUcsS0FBSSxDQUFDLGFBQWEsQ0FBQyxhQUFhLENBQUMsWUFBWSxFQUExRixDQUEwRixHQUFFLEdBQUcsQ0FBQyxDQUFDO0lBQ3BILENBQUM7O2dCQXRERixTQUFTLFNBQUM7b0JBQ1QsUUFBUSxFQUFFLG9CQUFvQjtvQkFDOUIsZzdDQUE0Qzs7aUJBRTdDOzs7O2dCQU5PLFdBQVc7Ozt5QkFTaEIsS0FBSzs4QkFFTCxLQUFLO3lCQUVMLEtBQUs7OEJBRUwsS0FBSzs4QkFFTCxNQUFNO2dDQUVOLFNBQVMsU0FBQyxlQUFlLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFOztJQXVDOUMsZ0NBQUM7Q0FBQSxBQXhERCxJQXdEQztTQW5EWSx5QkFBeUI7OztJQUVwQywyQ0FBNkI7O0lBRTdCLGdEQUFrQzs7SUFFbEMsMkNBQWdCOztJQUVoQixnREFBMEI7O0lBRTFCLGdEQUFpRTs7SUFFakUsa0RBQXdFOztJQUV4RSw0Q0FBdUM7O0lBRXZDLDZDQUFvQzs7Ozs7SUFFdkIsZ0RBQWdDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtDb21wb25lbnQsIEVsZW1lbnRSZWYsIEV2ZW50RW1pdHRlciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0LCBWaWV3Q2hpbGR9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHtGb3JtQ29udHJvbH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xuaW1wb3J0IHtDaGF0Q29udGFjdH0gZnJvbSAnLi4vLi4vaW50ZXJmYWNlcy9jaGF0LWNvbnRhY3QuaW50ZXJmYWNlJztcbmltcG9ydCB7Q2hhdE1lc3NhZ2V9IGZyb20gJy4uLy4uL2ludGVyZmFjZXMvY2hhdC1tZXNzYWdlLmludGVyZmFjZSc7XG5pbXBvcnQge0NoYXRTZXJ2aWNlfSBmcm9tICcuLi8uLi9zZXJ2aWNlcy9jaGF0LnNlcnZpY2UnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICduZ3gtd2FjaGF0LWNvbnRlbnQnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hhdC1jb250ZW50LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY2hhdC1jb250ZW50LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTmd4V2FjaGF0Q29udGVudENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCB7XG5cbiAgQElucHV0KCkgb3JpZ2luOiBDaGF0Q29udGFjdDtcblxuICBASW5wdXQoKSBkZXN0aW5hdGlvbjogQ2hhdENvbnRhY3Q7XG5cbiAgQElucHV0KCkgaGVpZ2h0O1xuXG4gIEBJbnB1dCgpIHBsYWNlaG9sZGVyID0gJyc7XG5cbiAgQE91dHB1dCgpIHNlbmRNZXNzYWdlOiBFdmVudEVtaXR0ZXI8c3RyaW5nPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICBAVmlld0NoaWxkKCdzY3JvbGxDb250ZW50JywgeyBzdGF0aWM6IHRydWUgfSkgc2Nyb2xsQ29udGVudDogRWxlbWVudFJlZjtcblxuICBwdWJsaWMgY29udHJvbCA9IG5ldyBGb3JtQ29udHJvbChudWxsKTtcblxuICBwdWJsaWMgbWVzc2FnZXM6IENoYXRNZXNzYWdlW10gPSBbXTtcblxuICBjb25zdHJ1Y3RvciggcHJpdmF0ZSBjaGF0U2VydmljZTogQ2hhdFNlcnZpY2UgKSB7IH1cblxuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmxpc3RlbkNoYW5nZU1lc3NhZ2VzKCk7XG4gICAgdGhpcy5tZXNzYWdlcyA9IHRoaXMuZmlsdGVyTWVzc2FnZXModGhpcy5jaGF0U2VydmljZS5tZXNzYWdlcyk7XG4gICAgdGhpcy5zY3JvbGxUb0JvdHRvbSgpO1xuICB9XG5cbiAgbGlzdGVuQ2hhbmdlTWVzc2FnZXMoKSB7XG4gICAgdGhpcy5jaGF0U2VydmljZS5jaGFuZ2Uuc3Vic2NyaWJlKChtZXNzYWdlczogQ2hhdE1lc3NhZ2VbXSkgPT4ge1xuICAgICAgdGhpcy5tZXNzYWdlcyA9IHRoaXMuZmlsdGVyTWVzc2FnZXMoIG1lc3NhZ2VzICk7XG4gICAgICB0aGlzLnNjcm9sbFRvQm90dG9tKCk7XG4gICAgfSk7XG4gIH1cblxuICBmaWx0ZXJNZXNzYWdlcyggY29sbGVjdGlvbjogQ2hhdE1lc3NhZ2VbXSApIHtcbiAgICByZXR1cm4gY29sbGVjdGlvbi5maWx0ZXIoKCBpdGVtOiBDaGF0TWVzc2FnZSApID0+XG4gICAgICAoaXRlbS5vcmlnaW4uaWQgPT09IHRoaXMub3JpZ2luLmlkKSAmJiAoaXRlbS5kZXN0aW5hdGlvbi5pZCA9PT0gdGhpcy5kZXN0aW5hdGlvbi5pZCkgfHxcbiAgICAgIChpdGVtLm9yaWdpbi5pZCA9PT0gdGhpcy5kZXN0aW5hdGlvbi5pZCkgJiYgKGl0ZW0uZGVzdGluYXRpb24uaWQgPT09IHRoaXMub3JpZ2luLmlkKVxuICAgICk7XG4gIH1cblxuICBvbktleUVudGVyKCkge1xuICAgIGlmICh0aGlzLmNvbnRyb2wudmFsdWUpIHtcbiAgICAgIHRoaXMuc2VuZE1lc3NhZ2UuZW1pdCh0aGlzLmNvbnRyb2wudmFsdWUpO1xuICAgICAgdGhpcy5jb250cm9sLnNldFZhbHVlKCcnKTtcbiAgICB9XG4gIH1cblxuICBzY3JvbGxUb0JvdHRvbSgpIHtcbiAgICBzZXRUaW1lb3V0KCgpID0+IHRoaXMuc2Nyb2xsQ29udGVudC5uYXRpdmVFbGVtZW50LnNjcm9sbFRvcCA9IHRoaXMuc2Nyb2xsQ29udGVudC5uYXRpdmVFbGVtZW50LnNjcm9sbEhlaWdodCwgMTAwKTtcbiAgfVxuXG59XG4iXX0=