UNPKG

ngx-wachat

Version:

Chat UI Component for Angular Applications.

1 lines 20.6 kB
{"__symbolic":"module","version":4,"metadata":{"ChatService":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Injectable","line":3,"character":1},"arguments":[{"providedIn":"root"}]}],"members":{"__ctor__":[{"__symbolic":"constructor"}],"loadMessages":[{"__symbolic":"method"}],"send":[{"__symbolic":"method"}]},"statics":{"ngInjectableDef":{}}},"NgxWachatComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":5,"character":1},"arguments":[{"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)}}"]}]}],"members":{"contacts":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":12,"character":3}}]}],"origin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":14,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":16,"character":3}}]}],"statusColor":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":18,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":24,"character":3}}]}],"width":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":26,"character":3}}]}],"color":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":28,"character":3}}]}],"emptyListDescription":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":30,"character":3}}]}],"sendMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":32,"character":3}}]}],"__ctor__":[{"__symbolic":"constructor"}],"ngOnInit":[{"__symbolic":"method"}],"selectTo":[{"__symbolic":"method"}],"selectStatus":[{"__symbolic":"method"}],"onSendMessage":[{"__symbolic":"method"}]}},"NgxWachatContentComponent":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Component","line":6,"character":1},"arguments":[{"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)}}"]}]}],"members":{"origin":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":13,"character":3}}]}],"destination":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":15,"character":3}}]}],"height":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":17,"character":3}}]}],"placeholder":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Input","line":19,"character":3}}]}],"sendMessage":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Output","line":21,"character":3}}]}],"scrollContent":[{"__symbolic":"property","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"ViewChild","line":23,"character":3},"arguments":["scrollContent",{"static":true}]}]}],"__ctor__":[{"__symbolic":"constructor","parameters":[{"__symbolic":"reference","name":"ChatService"}]}],"ngOnInit":[{"__symbolic":"method"}],"listenChangeMessages":[{"__symbolic":"method"}],"filterMessages":[{"__symbolic":"method"}],"onKeyEnter":[{"__symbolic":"method"}],"scrollToBottom":[{"__symbolic":"method"}]}},"ChatContact":{"__symbolic":"interface"},"ChatMessage":{"__symbolic":"interface"},"ChatStatusPipe":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"Pipe","line":4,"character":1},"arguments":[{"name":"status"}]}],"members":{"transform":[{"__symbolic":"method"}]}},"ChatStatus":{"ONLINE":"online","OFFLINE":"offline","BUSY":"busy"},"NgxWachatModule":{"__symbolic":"class","decorators":[{"__symbolic":"call","expression":{"__symbolic":"reference","module":"@angular/core","name":"NgModule","line":9,"character":1},"arguments":[{"declarations":[{"__symbolic":"reference","name":"NgxWachatComponent"},{"__symbolic":"reference","name":"NgxWachatContentComponent"},{"__symbolic":"reference","name":"ChatStatusPipe"}],"imports":[{"__symbolic":"reference","module":"@angular/common","name":"CommonModule","line":16,"character":4},{"__symbolic":"reference","module":"@angular/platform-browser","name":"BrowserModule","line":17,"character":4},{"__symbolic":"reference","module":"@angular/forms","name":"ReactiveFormsModule","line":18,"character":4}],"exports":[{"__symbolic":"reference","name":"NgxWachatComponent"},{"__symbolic":"reference","name":"NgxWachatContentComponent"}],"providers":[{"__symbolic":"reference","name":"ChatService"}]}]}],"members":{},"statics":{"forRoot":{"__symbolic":"function","parameters":[],"value":{"ngModule":{"__symbolic":"reference","name":"NgxWachatModule"},"providers":[{"__symbolic":"reference","name":"ChatService"}]}}}}},"origins":{"ChatService":"./services/chat.service","NgxWachatComponent":"./components/chat/chat.component","NgxWachatContentComponent":"./components/chat-content/chat-content.component","ChatContact":"./interfaces/chat-contact.interface","ChatMessage":"./interfaces/chat-message.interface","ChatStatusPipe":"./pipes/chat-status.pipe","ChatStatus":"./enums/status.enum","NgxWachatModule":"./ngx-wachat.module"},"importAs":"ngx-wachat"}