@hsaadawy/ngx-chat
Version:
84 lines • 12.6 kB
JavaScript
import { Component, Inject, Input } from '@angular/core';
import { defaultTranslations } from '../core/translations-default';
import { CHAT_SERVICE_TOKEN } from '../services/chat-service';
/**
* The main UI component. Should be instantiated near the root of your application.
*
* ```html
* <!-- plain usage, no configuration -->
* <ngx-chat></ngx-chat>
*
* <!-- if supplied, translations contain an object with the structure of the Translations interface. -->
* <ngx-chat translations="{'contacts': 'Kontakte', ...}"></ngx-chat>
*
* <!-- if supplied, the contacts input attribute takes an Observable<Contact[]> as source for your roster list -->
* <ngx-chat contacts="..."></ngx-chat>
*
* <!-- if supplied, userAvatar$ contains an Obervable<string>, which is used as the src attribute of the img for the current user. -->
* <ngx-chat userAvatar$="Observable.of('http://...')"></ngx-chat>
* ```
*/
export class ChatComponent {
constructor(chatService) {
this.chatService = chatService;
this.showChatComponent = false;
}
/**
* If supplied, translations contain an object with the structure of the Translations interface.
*/
set translations(translations) {
const defaultTranslation = defaultTranslations();
if (translations) {
this.chatService.translations = Object.assign(Object.assign(Object.assign({}, defaultTranslation), translations), { presence: Object.assign(Object.assign({}, defaultTranslation.presence), translations.presence) });
}
}
ngOnInit() {
this.chatService.state$.subscribe($e => this.onChatStateChange($e));
this.onRosterStateChanged(this.rosterState);
if (this.userAvatar$) {
this.userAvatar$.subscribe(avatar => this.chatService.userAvatar$.next(avatar));
}
}
ngOnChanges(changes) {
if (changes.rosterState) {
this.onRosterStateChanged(changes.rosterState.currentValue);
}
}
onChatStateChange(state) {
this.showChatComponent = state === 'online';
this.updateBodyClass();
}
onRosterStateChanged(state) {
this.rosterState = state;
this.updateBodyClass();
}
updateBodyClass() {
const rosterClass = 'has-roster';
if (this.showChatComponent && this.rosterState !== 'hidden') {
document.body.classList.add(rosterClass);
}
else {
document.body.classList.remove(rosterClass);
}
}
}
ChatComponent.decorators = [
{ type: Component, args: [{
selector: 'ngx-chat',
template: "<ngx-chat-window-list *ngIf=\"showChatComponent\"\r\n [rosterState]=\"rosterState\">\r\n</ngx-chat-window-list>\r\n<ngx-chat-roster-list [rosterState]=\"rosterState\"\r\n [contacts]=\"contacts\"\r\n [contactRequestsReceived$]=\"contactRequestsReceived$\"\r\n [contactRequestsSent$]=\"contactRequestsSent$\"\r\n [contactsUnaffiliated$]=\"contactsUnaffiliated$\"\r\n *ngIf=\"showChatComponent\"\r\n (rosterStateChanged)=\"onRosterStateChanged($event)\">\r\n</ngx-chat-roster-list>\r\n",
styles: [".messageItem{background-color:red;width:100%;border-radius:2px}\n"]
},] }
];
ChatComponent.ctorParameters = () => [
{ type: undefined, decorators: [{ type: Inject, args: [CHAT_SERVICE_TOKEN,] }] }
];
ChatComponent.propDecorators = {
translations: [{ type: Input }],
contacts: [{ type: Input }],
contactRequestsReceived$: [{ type: Input }],
contactRequestsSent$: [{ type: Input }],
contactsUnaffiliated$: [{ type: Input }],
userAvatar$: [{ type: Input }],
rosterState: [{ type: Input }]
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhdC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9wYXp6bmV0d29yay9uZ3gtY2hhdC9zcmMvbGliL2NvbXBvbmVudHMvY2hhdC5jb21wb25lbnQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFvQyxNQUFNLGVBQWUsQ0FBQztBQUkzRixPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSw4QkFBOEIsQ0FBQztBQUNuRSxPQUFPLEVBQUUsa0JBQWtCLEVBQWUsTUFBTSwwQkFBMEIsQ0FBQztBQUUzRTs7Ozs7Ozs7Ozs7Ozs7OztHQWdCRztBQU1ILE1BQU0sT0FBTyxhQUFhO0lBNkR0QixZQUN3QyxXQUF3QjtRQUF4QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUhoRSxzQkFBaUIsR0FBRyxLQUFLLENBQUM7SUFLMUIsQ0FBQztJQTlERDs7T0FFRztJQUNILElBQ1csWUFBWSxDQUFDLFlBQW1DO1FBQ3ZELE1BQU0sa0JBQWtCLEdBQUcsbUJBQW1CLEVBQUUsQ0FBQztRQUNqRCxJQUFJLFlBQVksRUFBRTtZQUNkLElBQUksQ0FBQyxXQUFXLENBQUMsWUFBWSxpREFDdEIsa0JBQWtCLEdBQ2xCLFlBQVksS0FDZixRQUFRLGtDQUNELGtCQUFrQixDQUFDLFFBQVEsR0FDM0IsWUFBWSxDQUFDLFFBQVEsSUFFL0IsQ0FBQztTQUNMO0lBQ0wsQ0FBQztJQWdERCxRQUFRO1FBQ0osSUFBSSxDQUFDLFdBQVcsQ0FBQyxNQUFNLENBQUMsU0FBUyxDQUFDLEVBQUUsQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLGlCQUFpQixDQUFDLEVBQUUsQ0FBQyxDQUFDLENBQUM7UUFDcEUsSUFBSSxDQUFDLG9CQUFvQixDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztRQUU1QyxJQUFJLElBQUksQ0FBQyxXQUFXLEVBQUU7WUFDbEIsSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLEVBQUUsQ0FBQyxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztTQUNuRjtJQUNMLENBQUM7SUFFRCxXQUFXLENBQUMsT0FBc0I7UUFDOUIsSUFBSSxPQUFPLENBQUMsV0FBVyxFQUFFO1lBQ3JCLElBQUksQ0FBQyxvQkFBb0IsQ0FBQyxPQUFPLENBQUMsV0FBVyxDQUFDLFlBQVksQ0FBQyxDQUFDO1NBQy9EO0lBQ0wsQ0FBQztJQUVPLGlCQUFpQixDQUFDLEtBQWE7UUFDbkMsSUFBSSxDQUFDLGlCQUFpQixHQUFHLEtBQUssS0FBSyxRQUFRLENBQUM7UUFDNUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDO0lBQzNCLENBQUM7SUFFRCxvQkFBb0IsQ0FBQyxLQUF5QjtRQUMxQyxJQUFJLENBQUMsV0FBVyxHQUFHLEtBQUssQ0FBQztRQUN6QixJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDM0IsQ0FBQztJQUVPLGVBQWU7UUFDbkIsTUFBTSxXQUFXLEdBQUcsWUFBWSxDQUFDO1FBQ2pDLElBQUksSUFBSSxDQUFDLGlCQUFpQixJQUFJLElBQUksQ0FBQyxXQUFXLEtBQUssUUFBUSxFQUFFO1lBQ3pELFFBQVEsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxXQUFXLENBQUMsQ0FBQztTQUM1QzthQUFNO1lBQ0gsUUFBUSxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsTUFBTSxDQUFDLFdBQVcsQ0FBQyxDQUFDO1NBQy9DO0lBQ0wsQ0FBQzs7O1lBdkdKLFNBQVMsU0FBQztnQkFDUCxRQUFRLEVBQUUsVUFBVTtnQkFDcEIsaW9CQUFvQzs7YUFFdkM7Ozs0Q0ErRFEsTUFBTSxTQUFDLGtCQUFrQjs7OzJCQXpEN0IsS0FBSzt1QkFrQkwsS0FBSzt1Q0FPTCxLQUFLO21DQU9MLEtBQUs7b0NBT0wsS0FBSzswQkFNTCxLQUFLOzBCQU1MLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIEluamVjdCwgSW5wdXQsIE9uQ2hhbmdlcywgT25Jbml0LCBTaW1wbGVDaGFuZ2VzIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcclxuaW1wb3J0IHsgQ29udGFjdCB9IGZyb20gJy4uL2NvcmUvY29udGFjdCc7XHJcbmltcG9ydCB7IFRyYW5zbGF0aW9ucyB9IGZyb20gJy4uL2NvcmUvdHJhbnNsYXRpb25zJztcclxuaW1wb3J0IHsgZGVmYXVsdFRyYW5zbGF0aW9ucyB9IGZyb20gJy4uL2NvcmUvdHJhbnNsYXRpb25zLWRlZmF1bHQnO1xyXG5pbXBvcnQgeyBDSEFUX1NFUlZJQ0VfVE9LRU4sIENoYXRTZXJ2aWNlIH0gZnJvbSAnLi4vc2VydmljZXMvY2hhdC1zZXJ2aWNlJztcclxuXHJcbi8qKlxyXG4gKiBUaGUgbWFpbiBVSSBjb21wb25lbnQuIFNob3VsZCBiZSBpbnN0YW50aWF0ZWQgbmVhciB0aGUgcm9vdCBvZiB5b3VyIGFwcGxpY2F0aW9uLlxyXG4gKlxyXG4gKiBgYGBodG1sXHJcbiAqIDwhLS0gcGxhaW4gdXNhZ2UsIG5vIGNvbmZpZ3VyYXRpb24gLS0+XHJcbiAqIDxuZ3gtY2hhdD48L25neC1jaGF0PlxyXG4gKlxyXG4gKiA8IS0tIGlmIHN1cHBsaWVkLCB0cmFuc2xhdGlvbnMgY29udGFpbiBhbiBvYmplY3Qgd2l0aCB0aGUgc3RydWN0dXJlIG9mIHRoZSBUcmFuc2xhdGlvbnMgaW50ZXJmYWNlLiAtLT5cclxuICogPG5neC1jaGF0IHRyYW5zbGF0aW9ucz1cInsnY29udGFjdHMnOiAnS29udGFrdGUnLCAuLi59XCI+PC9uZ3gtY2hhdD5cclxuICpcclxuICogPCEtLSBpZiBzdXBwbGllZCwgdGhlIGNvbnRhY3RzIGlucHV0IGF0dHJpYnV0ZSB0YWtlcyBhbiBPYnNlcnZhYmxlPENvbnRhY3RbXT4gYXMgc291cmNlIGZvciB5b3VyIHJvc3RlciBsaXN0IC0tPlxyXG4gKiA8bmd4LWNoYXQgY29udGFjdHM9XCIuLi5cIj48L25neC1jaGF0PlxyXG4gKlxyXG4gKiA8IS0tIGlmIHN1cHBsaWVkLCB1c2VyQXZhdGFyJCBjb250YWlucyBhbiBPYmVydmFibGU8c3RyaW5nPiwgd2hpY2ggaXMgdXNlZCBhcyB0aGUgc3JjIGF0dHJpYnV0ZSBvZiB0aGUgaW1nIGZvciB0aGUgY3VycmVudCB1c2VyLiAtLT5cclxuICogPG5neC1jaGF0IHVzZXJBdmF0YXIkPVwiT2JzZXJ2YWJsZS5vZignaHR0cDovLy4uLicpXCI+PC9uZ3gtY2hhdD5cclxuICogYGBgXHJcbiAqL1xyXG5AQ29tcG9uZW50KHtcclxuICAgIHNlbGVjdG9yOiAnbmd4LWNoYXQnLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2NoYXQuY29tcG9uZW50Lmh0bWwnLFxyXG4gICAgc3R5bGVVcmxzOiBbJy4vY2hhdC5jb21wb25lbnQubGVzcyddLFxyXG59KVxyXG5leHBvcnQgY2xhc3MgQ2hhdENvbXBvbmVudCBpbXBsZW1lbnRzIE9uSW5pdCwgT25DaGFuZ2VzIHtcclxuXHJcbiAgICAvKipcclxuICAgICAqIElmIHN1cHBsaWVkLCB0cmFuc2xhdGlvbnMgY29udGFpbiBhbiBvYmplY3Qgd2l0aCB0aGUgc3RydWN0dXJlIG9mIHRoZSBUcmFuc2xhdGlvbnMgaW50ZXJmYWNlLlxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKVxyXG4gICAgcHVibGljIHNldCB0cmFuc2xhdGlvbnModHJhbnNsYXRpb25zOiBQYXJ0aWFsPFRyYW5zbGF0aW9ucz4pIHtcclxuICAgICAgICBjb25zdCBkZWZhdWx0VHJhbnNsYXRpb24gPSBkZWZhdWx0VHJhbnNsYXRpb25zKCk7XHJcbiAgICAgICAgaWYgKHRyYW5zbGF0aW9ucykge1xyXG4gICAgICAgICAgICB0aGlzLmNoYXRTZXJ2aWNlLnRyYW5zbGF0aW9ucyA9IHtcclxuICAgICAgICAgICAgICAgIC4uLmRlZmF1bHRUcmFuc2xhdGlvbixcclxuICAgICAgICAgICAgICAgIC4uLnRyYW5zbGF0aW9ucyxcclxuICAgICAgICAgICAgICAgIHByZXNlbmNlOiB7XHJcbiAgICAgICAgICAgICAgICAgICAgLi4uZGVmYXVsdFRyYW5zbGF0aW9uLnByZXNlbmNlLFxyXG4gICAgICAgICAgICAgICAgICAgIC4uLnRyYW5zbGF0aW9ucy5wcmVzZW5jZSxcclxuICAgICAgICAgICAgICAgIH0sXHJcbiAgICAgICAgICAgIH07XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIC8qKlxyXG4gICAgICogSWYgc3VwcGxpZWQsIHRoZSBjb250YWN0cyBpbnB1dCBhdHRyaWJ1dGUgdGFrZXMgYW4gW09ic2VydmFibGU8Q29udGFjdFtdPl17QGxpbmsgQ29udGFjdH0gYXMgc291cmNlIGZvciB5b3VyIHJvc3RlciBsaXN0LlxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKVxyXG4gICAgcHVibGljIGNvbnRhY3RzPzogT2JzZXJ2YWJsZTxDb250YWN0W10+O1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogSWYgc3VwcGxpZWQsIHRoZSBjb250YWN0cyBpbnB1dCBhdHRyaWJ1dGUgdGFrZXMgYW4gW09ic2VydmFibGU8Q29udGFjdFtdPl17QGxpbmsgQ29udGFjdH0gYXMgc291cmNlIGZvciB5b3VyIGluY29taW5nIGNvbnRhY3RcclxuICAgICAqIHJlcXVlc3RzIGxpc3QuXHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpXHJcbiAgICBjb250YWN0UmVxdWVzdHNSZWNlaXZlZCQ/OiBPYnNlcnZhYmxlPENvbnRhY3RbXT47XHJcblxyXG4gICAgLyoqXHJcbiAgICAgKiBJZiBzdXBwbGllZCwgdGhlIGNvbnRhY3RzIGlucHV0IGF0dHJpYnV0ZSB0YWtlcyBhbiBbT2JzZXJ2YWJsZTxDb250YWN0W10+XXtAbGluayBDb250YWN0fSBhcyBzb3VyY2UgZm9yIHlvdXIgb3V0Z29pbmcgY29udGFjdFxyXG4gICAgICogcmVxdWVzdHMgbGlzdC5cclxuICAgICAqL1xyXG4gICAgQElucHV0KClcclxuICAgIGNvbnRhY3RSZXF1ZXN0c1NlbnQkPzogT2JzZXJ2YWJsZTxDb250YWN0W10+O1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogSWYgc3VwcGxpZWQsIHRoZSBjb250YWN0cyBpbnB1dCBhdHRyaWJ1dGUgdGFrZXMgYW4gW09ic2VydmFibGU8Q29udGFjdFtdPl17QGxpbmsgQ29udGFjdH0gYXMgc291cmNlIGZvciB5b3VyIHVuYWZmaWxpYXRlZCBjb250YWN0XHJcbiAgICAgKiBsaXN0LlxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKVxyXG4gICAgY29udGFjdHNVbmFmZmlsaWF0ZWQkPzogT2JzZXJ2YWJsZTxDb250YWN0W10+O1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogSWYgc3VwcGxpZWQsIHVzZXJBdmF0YXIkIGNvbnRhaW5zIGFuIE9ic2VydmFibGU8c3RyaW5nPiwgd2hpY2ggaXMgdXNlZCBhcyB0aGUgc3JjIGF0dHJpYnV0ZSBvZiB0aGUgaW1nIGZvciB0aGUgY3VycmVudCB1c2VyLlxyXG4gICAgICovXHJcbiAgICBASW5wdXQoKVxyXG4gICAgcHVibGljIHVzZXJBdmF0YXIkPzogT2JzZXJ2YWJsZTxzdHJpbmc+O1xyXG5cclxuICAgIC8qKlxyXG4gICAgICogJ3Nob3duJyBzaG93cyByb3N0ZXIgbGlzdCwgJ2hpZGRlbicgaGlkZXMgaXQuXHJcbiAgICAgKi9cclxuICAgIEBJbnB1dCgpXHJcbiAgICByb3N0ZXJTdGF0ZTogJ3Nob3duJyB8ICdoaWRkZW4nO1xyXG5cclxuICAgIHNob3dDaGF0Q29tcG9uZW50ID0gZmFsc2U7XHJcblxyXG4gICAgY29uc3RydWN0b3IoXHJcbiAgICAgICAgQEluamVjdChDSEFUX1NFUlZJQ0VfVE9LRU4pIHByaXZhdGUgY2hhdFNlcnZpY2U6IENoYXRTZXJ2aWNlLFxyXG4gICAgKSB7XHJcbiAgICB9XHJcblxyXG4gICAgbmdPbkluaXQoKSB7XHJcbiAgICAgICAgdGhpcy5jaGF0U2VydmljZS5zdGF0ZSQuc3Vic2NyaWJlKCRlID0+IHRoaXMub25DaGF0U3RhdGVDaGFuZ2UoJGUpKTtcclxuICAgICAgICB0aGlzLm9uUm9zdGVyU3RhdGVDaGFuZ2VkKHRoaXMucm9zdGVyU3RhdGUpO1xyXG5cclxuICAgICAgICBpZiAodGhpcy51c2VyQXZhdGFyJCkge1xyXG4gICAgICAgICAgICB0aGlzLnVzZXJBdmF0YXIkLnN1YnNjcmliZShhdmF0YXIgPT4gdGhpcy5jaGF0U2VydmljZS51c2VyQXZhdGFyJC5uZXh0KGF2YXRhcikpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbiAgICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKTogdm9pZCB7XHJcbiAgICAgICAgaWYgKGNoYW5nZXMucm9zdGVyU3RhdGUpIHtcclxuICAgICAgICAgICAgdGhpcy5vblJvc3RlclN0YXRlQ2hhbmdlZChjaGFuZ2VzLnJvc3RlclN0YXRlLmN1cnJlbnRWYWx1ZSk7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG5cclxuICAgIHByaXZhdGUgb25DaGF0U3RhdGVDaGFuZ2Uoc3RhdGU6IHN0cmluZykge1xyXG4gICAgICAgIHRoaXMuc2hvd0NoYXRDb21wb25lbnQgPSBzdGF0ZSA9PT0gJ29ubGluZSc7XHJcbiAgICAgICAgdGhpcy51cGRhdGVCb2R5Q2xhc3MoKTtcclxuICAgIH1cclxuXHJcbiAgICBvblJvc3RlclN0YXRlQ2hhbmdlZChzdGF0ZTogJ3Nob3duJyB8ICdoaWRkZW4nKSB7XHJcbiAgICAgICAgdGhpcy5yb3N0ZXJTdGF0ZSA9IHN0YXRlO1xyXG4gICAgICAgIHRoaXMudXBkYXRlQm9keUNsYXNzKCk7XHJcbiAgICB9XHJcblxyXG4gICAgcHJpdmF0ZSB1cGRhdGVCb2R5Q2xhc3MoKSB7XHJcbiAgICAgICAgY29uc3Qgcm9zdGVyQ2xhc3MgPSAnaGFzLXJvc3Rlcic7XHJcbiAgICAgICAgaWYgKHRoaXMuc2hvd0NoYXRDb21wb25lbnQgJiYgdGhpcy5yb3N0ZXJTdGF0ZSAhPT0gJ2hpZGRlbicpIHtcclxuICAgICAgICAgICAgZG9jdW1lbnQuYm9keS5jbGFzc0xpc3QuYWRkKHJvc3RlckNsYXNzKTtcclxuICAgICAgICB9IGVsc2Uge1xyXG4gICAgICAgICAgICBkb2N1bWVudC5ib2R5LmNsYXNzTGlzdC5yZW1vdmUocm9zdGVyQ2xhc3MpO1xyXG4gICAgICAgIH1cclxuICAgIH1cclxuXHJcbn1cclxuIl19