ngx-wachat/bundles/ngx-wachat.umd.min.js

Chat UI Component for Angular Applications.

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("@angular/core"),require("@angular/forms"),require("@angular/common"),require("@angular/platform-browser")):"function"==typeof define&&define.amd?define("ngx-wachat",["exports","@angular/core","@angular/forms","@angular/common","@angular/platform-browser"],e):e((t=t||self)["ngx-wachat"]={},t.ng.core,t.ng.forms,t.ng.common,t.ng.platformBrowser)}(this,function(t,e,n,a,o){"use strict";function i(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var a,o,i=n.call(t),s=[];try{for(;(void 0===e||e-- >0)&&!(a=i.next()).done;)s.push(a.value)}catch(r){o={error:r}}finally{try{a&&!a.done&&(n=i["return"])&&n.call(i)}finally{if(o)throw o.error}}return s}var s=function(){function t(){this.messageList=[],this.change=new e.EventEmitter}return Object.defineProperty(t.prototype,"messages",{get:function(){return this.messageList},enumerable:!0,configurable:!0}),t.prototype.loadMessages=function(t){this.messageList=t,this.change.next(this.messages)},t.prototype.send=function(t){this.messageList=function(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(i(arguments[e]));return t}(this.messageList,[t]),this.change.next(this.messages)},t.decorators=[{type:e.Injectable,args:[{providedIn:"root"}]}],t.ctorParameters=function(){return[]},t.ngInjectableDef=e.ɵɵdefineInjectable({factory:function(){return new t},token:t,providedIn:"root"}),t}(),r={ONLINE:"online",OFFLINE:"offline",BUSY:"busy"},c=function(){function t(){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 e.EventEmitter,this.selected=r.ONLINE,this.messaging=!1}return Object.defineProperty(t.prototype,"online",{get:function(){return r.ONLINE},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"offline",{get:function(){return r.OFFLINE},enumerable:!0,configurable:!0}),Object.defineProperty(t.prototype,"busy",{get:function(){return r.BUSY},enumerable:!0,configurable:!0}),t.prototype.ngOnInit=function(){},t.prototype.selectTo=function(t){this.destination=t,this.messaging=!0},t.prototype.selectStatus=function(t){this.selected=t},t.prototype.onSendMessage=function(t){this.sendMessage.emit({origin:this.origin,destination:this.destination,message:t,date:new Date})},t.decorators=[{type:e.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)}}']}]}],t.ctorParameters=function(){return[]},t.propDecorators={contacts:[{type:e.Input}],origin:[{type:e.Input}],placeholder:[{type:e.Input}],statusColor:[{type:e.Input}],height:[{type:e.Input}],width:[{type:e.Input}],color:[{type:e.Input}],emptyListDescription:[{type:e.Input}],sendMessage:[{type:e.Output}]},t}(),l=function(){function t(t){this.chatService=t,this.placeholder="",this.sendMessage=new e.EventEmitter,this.control=new n.FormControl(null),this.messages=[]}return t.prototype.ngOnInit=function(){this.listenChangeMessages(),this.messages=this.filterMessages(this.chatService.messages),this.scrollToBottom()},t.prototype.listenChangeMessages=function(){var t=this;this.chatService.change.subscribe(function(e){t.messages=t.filterMessages(e),t.scrollToBottom()})},t.prototype.filterMessages=function(t){var e=this;return t.filter(function(t){return t.origin.id===e.origin.id&&t.destination.id===e.destination.id||t.origin.id===e.destination.id&&t.destination.id===e.origin.id})},t.prototype.onKeyEnter=function(){this.control.value&&(this.sendMessage.emit(this.control.value),this.control.setValue(""))},t.prototype.scrollToBottom=function(){var t=this;setTimeout(function(){return t.scrollContent.nativeElement.scrollTop=t.scrollContent.nativeElement.scrollHeight},100)},t.decorators=[{type:e.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)}}']}]}],t.ctorParameters=function(){return[{type:s}]},t.propDecorators={origin:[{type:e.Input}],destination:[{type:e.Input}],height:[{type:e.Input}],placeholder:[{type:e.Input}],sendMessage:[{type:e.Output}],scrollContent:[{type:e.ViewChild,args:["scrollContent",{"static":!0}]}]},t}(),g=function(){function t(){}return t.prototype.transform=function(t,e){var n=t.filter(function(t){return e.indexOf(t.status)>=0});return n.length>0?n:null},t.decorators=[{type:e.Pipe,args:[{name:"status"}]}],t}(),p=function(){function t(){}return t.forRoot=function(){return{ngModule:t,providers:[s]}},t.decorators=[{type:e.NgModule,args:[{declarations:[c,l,g],imports:[a.CommonModule,o.BrowserModule,n.ReactiveFormsModule],exports:[c,l],providers:[s]}]}],t}();t.ChatService=s,t.ChatStatus=r,t.ChatStatusPipe=g,t.NgxWachatComponent=c,t.NgxWachatContentComponent=l,t.NgxWachatModule=p,Object.defineProperty(t,"__esModule",{value:!0})});
//# sourceMappingURL=ngx-wachat.umd.min.js.map