UNPKG

@pazznetwork/ngx-chat

Version:

[![Build status](https://api.travis-ci.com/pazznetwork/ngx-chat.svg?branch=master)](https://travis-ci.com/pazznetwork/ngx-chat) [![Coverage](https://coveralls.io/repos/github/pazznetwork/ngx-chat/badge.svg?branch=master)](https://coveralls.io/github/pazzn

32 lines • 10.7 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import { Component, Inject, Input } from '@angular/core'; import { of } from 'rxjs'; import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators'; import { Presence } from '../../core/presence'; import { UnreadMessageCountPlugin } from '../../services/adapters/xmpp/plugins/unread-message-count.plugin'; import { CHAT_SERVICE_TOKEN } from '../../services/chat-service'; import * as i0 from "@angular/core"; import * as i1 from "@angular/common"; import * as i2 from "../chat-avatar/chat-avatar.component"; export class RosterRecipientComponent { constructor(chatService) { this.chatService = chatService; this.Presence = Presence; } ngOnInit() { this.unreadCount$ = this.chatService.getPlugin(UnreadMessageCountPlugin).jidToUnreadCount$ .pipe(map(jidToUnreadCount => jidToUnreadCount.get(this.recipient.jidBare.toString()) || 0), distinctUntilChanged(), debounceTime(20)); this.presence$ = this.recipient.recipientType === 'contact' ? this.recipient.presence$ : of(Presence.unavailable); } } RosterRecipientComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RosterRecipientComponent, deps: [{ token: CHAT_SERVICE_TOKEN }], target: i0.ɵɵFactoryTarget.Component }); RosterRecipientComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.9", type: RosterRecipientComponent, selector: "ngx-chat-roster-recipient", inputs: { recipient: "recipient" }, ngImport: i0, template: "<div class=\"roster-recipient\" [title]=\"recipient.name\">\n\n <div class=\"roster-recipient-avatar\">\n <ngx-chat-avatar [imageUrl]=\"recipient.avatar\"></ngx-chat-avatar>\n </div>\n\n <div class=\"roster-recipient-name\">\n {{recipient.name}}\n </div>\n\n <div class=\"roster-recipient-status\">\n <div class=\"unread-message-badge\" *ngIf=\"(unreadCount$ | async) > 0\">{{unreadCount$ | async}}</div>\n <ng-container *ngIf=\"presence$ | async as presence\">\n <div *ngIf=\"presence !== Presence.unavailable\"\n class=\"roster-presence\"\n [ngClass]=\"'roster-presence--' + presence\">\u25CF\n </div>\n </ng-container>\n </div>\n\n</div>\n", styles: ["@keyframes ngx-chat-message-in{0%{transform:translate(50px);opacity:0}to{transform:none;opacity:1}}@keyframes ngx-chat-message-out{0%{transform:translate(-50px);opacity:0}to{transform:none;opacity:1}}*{box-sizing:border-box;margin:0;padding:0;font-family:Helvetica,Arial,serif}.roster-recipient{display:flex;justify-content:space-between}.roster-recipient-avatar{min-width:2em;width:2em;min-height:2em;height:2em}.roster-recipient-name{padding-left:.5em;padding-top:.5em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-grow:1}.roster-recipient-status{white-space:nowrap}.roster-presence{display:inline-block;padding-top:.5em;margin-left:.3em}.roster-presence.roster-presence--present{color:#69ca48}.roster-presence.roster-presence--away{color:#ffbe00}.roster-presence.roster-presence--unavailable{color:transparent}.unread-message-badge{display:inline-block;padding-top:.2em;background-color:#ff5940;color:#fff;border-radius:50%;align-self:center;margin-top:.25em;width:1.5em;height:1.5em;text-align:center}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.ChatAvatarComponent, selector: "ngx-chat-avatar", inputs: ["imageUrl"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }] }); i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.9", ngImport: i0, type: RosterRecipientComponent, decorators: [{ type: Component, args: [{ selector: 'ngx-chat-roster-recipient', template: "<div class=\"roster-recipient\" [title]=\"recipient.name\">\n\n <div class=\"roster-recipient-avatar\">\n <ngx-chat-avatar [imageUrl]=\"recipient.avatar\"></ngx-chat-avatar>\n </div>\n\n <div class=\"roster-recipient-name\">\n {{recipient.name}}\n </div>\n\n <div class=\"roster-recipient-status\">\n <div class=\"unread-message-badge\" *ngIf=\"(unreadCount$ | async) > 0\">{{unreadCount$ | async}}</div>\n <ng-container *ngIf=\"presence$ | async as presence\">\n <div *ngIf=\"presence !== Presence.unavailable\"\n class=\"roster-presence\"\n [ngClass]=\"'roster-presence--' + presence\">\u25CF\n </div>\n </ng-container>\n </div>\n\n</div>\n", styles: ["@keyframes ngx-chat-message-in{0%{transform:translate(50px);opacity:0}to{transform:none;opacity:1}}@keyframes ngx-chat-message-out{0%{transform:translate(-50px);opacity:0}to{transform:none;opacity:1}}*{box-sizing:border-box;margin:0;padding:0;font-family:Helvetica,Arial,serif}.roster-recipient{display:flex;justify-content:space-between}.roster-recipient-avatar{min-width:2em;width:2em;min-height:2em;height:2em}.roster-recipient-name{padding-left:.5em;padding-top:.5em;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-grow:1}.roster-recipient-status{white-space:nowrap}.roster-presence{display:inline-block;padding-top:.5em;margin-left:.3em}.roster-presence.roster-presence--present{color:#69ca48}.roster-presence.roster-presence--away{color:#ffbe00}.roster-presence.roster-presence--unavailable{color:transparent}.unread-message-badge{display:inline-block;padding-top:.2em;background-color:#ff5940;color:#fff;border-radius:50%;align-self:center;margin-top:.25em;width:1.5em;height:1.5em;text-align:center}\n"] }] }], ctorParameters: function () { return [{ type: undefined, decorators: [{ type: Inject, args: [CHAT_SERVICE_TOKEN] }] }]; }, propDecorators: { recipient: [{ type: Input }] } }); //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm9zdGVyLXJlY2lwaWVudC5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9zcmMvbGliL2NvbXBvbmVudHMvcm9zdGVyLXJlY2lwaWVudC9yb3N0ZXItcmVjaXBpZW50LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uLy4uL3NyYy9saWIvY29tcG9uZW50cy9yb3N0ZXItcmVjaXBpZW50L3Jvc3Rlci1yZWNpcGllbnQuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLEVBQUUsS0FBSyxFQUFVLE1BQU0sZUFBZSxDQUFDO0FBQ2pFLE9BQU8sRUFBYyxFQUFFLEVBQUUsTUFBTSxNQUFNLENBQUM7QUFDdEMsT0FBTyxFQUFFLFlBQVksRUFBRSxvQkFBb0IsRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUN6RSxPQUFPLEVBQUUsUUFBUSxFQUFFLE1BQU0scUJBQXFCLENBQUM7QUFFL0MsT0FBTyxFQUFFLHdCQUF3QixFQUFFLE1BQU0sa0VBQWtFLENBQUM7QUFDNUcsT0FBTyxFQUFFLGtCQUFrQixFQUFlLE1BQU0sNkJBQTZCLENBQUM7Ozs7QUFPOUUsTUFBTSxPQUFPLHdCQUF3QjtJQVVqQyxZQUN3QyxXQUF3QjtRQUF4QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtRQUhoRSxhQUFRLEdBQUcsUUFBUSxDQUFDO0lBSWpCLENBQUM7SUFFSixRQUFRO1FBQ0osSUFBSSxDQUFDLFlBQVksR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyx3QkFBd0IsQ0FBQyxDQUFDLGlCQUFpQjthQUNyRixJQUFJLENBQ0QsR0FBRyxDQUFDLGdCQUFnQixDQUFDLEVBQUUsQ0FBQyxnQkFBZ0IsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQyxPQUFPLENBQUMsUUFBUSxFQUFFLENBQUMsSUFBSSxDQUFDLENBQUMsRUFDckYsb0JBQW9CLEVBQUUsRUFDdEIsWUFBWSxDQUFDLEVBQUUsQ0FBQyxDQUNuQixDQUFDO1FBQ04sSUFBSSxDQUFDLFNBQVMsR0FBRyxJQUFJLENBQUMsU0FBUyxDQUFDLGFBQWEsS0FBSyxTQUFTLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQyxTQUFTLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxFQUFFLENBQUMsUUFBUSxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQ3RILENBQUM7O3FIQXRCUSx3QkFBd0Isa0JBV3JCLGtCQUFrQjt5R0FYckIsd0JBQXdCLHFHQ2JyQywrdUJBcUJBOzJGRFJhLHdCQUF3QjtrQkFMcEMsU0FBUzsrQkFDSSwyQkFBMkI7OzBCQWVoQyxNQUFNOzJCQUFDLGtCQUFrQjs0Q0FSOUIsU0FBUztzQkFEUixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBJbmplY3QsIElucHV0LCBPbkluaXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE9ic2VydmFibGUsIG9mIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBkZWJvdW5jZVRpbWUsIGRpc3RpbmN0VW50aWxDaGFuZ2VkLCBtYXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBQcmVzZW5jZSB9IGZyb20gJy4uLy4uL2NvcmUvcHJlc2VuY2UnO1xuaW1wb3J0IHsgUmVjaXBpZW50IH0gZnJvbSAnLi4vLi4vY29yZS9yZWNpcGllbnQnO1xuaW1wb3J0IHsgVW5yZWFkTWVzc2FnZUNvdW50UGx1Z2luIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvYWRhcHRlcnMveG1wcC9wbHVnaW5zL3VucmVhZC1tZXNzYWdlLWNvdW50LnBsdWdpbic7XG5pbXBvcnQgeyBDSEFUX1NFUlZJQ0VfVE9LRU4sIENoYXRTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZXMvY2hhdC1zZXJ2aWNlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICduZ3gtY2hhdC1yb3N0ZXItcmVjaXBpZW50JyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vcm9zdGVyLXJlY2lwaWVudC5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vcm9zdGVyLXJlY2lwaWVudC5jb21wb25lbnQubGVzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBSb3N0ZXJSZWNpcGllbnRDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuXG4gICAgQElucHV0KClcbiAgICByZWNpcGllbnQ6IFJlY2lwaWVudDtcblxuICAgIHVucmVhZENvdW50JDogT2JzZXJ2YWJsZTxudW1iZXI+O1xuICAgIHByZXNlbmNlJDogT2JzZXJ2YWJsZTxQcmVzZW5jZT4gfCBudWxsO1xuXG4gICAgUHJlc2VuY2UgPSBQcmVzZW5jZTtcblxuICAgIGNvbnN0cnVjdG9yKFxuICAgICAgICBASW5qZWN0KENIQVRfU0VSVklDRV9UT0tFTikgcHJpdmF0ZSBjaGF0U2VydmljZTogQ2hhdFNlcnZpY2UsXG4gICAgKSB7fVxuXG4gICAgbmdPbkluaXQoKSB7XG4gICAgICAgIHRoaXMudW5yZWFkQ291bnQkID0gdGhpcy5jaGF0U2VydmljZS5nZXRQbHVnaW4oVW5yZWFkTWVzc2FnZUNvdW50UGx1Z2luKS5qaWRUb1VucmVhZENvdW50JFxuICAgICAgICAgICAgLnBpcGUoXG4gICAgICAgICAgICAgICAgbWFwKGppZFRvVW5yZWFkQ291bnQgPT4gamlkVG9VbnJlYWRDb3VudC5nZXQodGhpcy5yZWNpcGllbnQuamlkQmFyZS50b1N0cmluZygpKSB8fCAwKSxcbiAgICAgICAgICAgICAgICBkaXN0aW5jdFVudGlsQ2hhbmdlZCgpLFxuICAgICAgICAgICAgICAgIGRlYm91bmNlVGltZSgyMCksXG4gICAgICAgICAgICApO1xuICAgICAgICB0aGlzLnByZXNlbmNlJCA9IHRoaXMucmVjaXBpZW50LnJlY2lwaWVudFR5cGUgPT09ICdjb250YWN0JyA/IHRoaXMucmVjaXBpZW50LnByZXNlbmNlJCA6IG9mKFByZXNlbmNlLnVuYXZhaWxhYmxlKTtcbiAgICB9XG5cbn1cbiIsIjxkaXYgY2xhc3M9XCJyb3N0ZXItcmVjaXBpZW50XCIgW3RpdGxlXT1cInJlY2lwaWVudC5uYW1lXCI+XG5cbiAgICA8ZGl2IGNsYXNzPVwicm9zdGVyLXJlY2lwaWVudC1hdmF0YXJcIj5cbiAgICAgICAgPG5neC1jaGF0LWF2YXRhciBbaW1hZ2VVcmxdPVwicmVjaXBpZW50LmF2YXRhclwiPjwvbmd4LWNoYXQtYXZhdGFyPlxuICAgIDwvZGl2PlxuXG4gICAgPGRpdiBjbGFzcz1cInJvc3Rlci1yZWNpcGllbnQtbmFtZVwiPlxuICAgICAgICB7e3JlY2lwaWVudC5uYW1lfX1cbiAgICA8L2Rpdj5cblxuICAgIDxkaXYgY2xhc3M9XCJyb3N0ZXItcmVjaXBpZW50LXN0YXR1c1wiPlxuICAgICAgICA8ZGl2IGNsYXNzPVwidW5yZWFkLW1lc3NhZ2UtYmFkZ2VcIiAqbmdJZj1cIih1bnJlYWRDb3VudCQgfCBhc3luYykgPiAwXCI+e3t1bnJlYWRDb3VudCQgfCBhc3luY319PC9kaXY+XG4gICAgICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJwcmVzZW5jZSQgfCBhc3luYyBhcyBwcmVzZW5jZVwiPlxuICAgICAgICAgICAgPGRpdiAqbmdJZj1cInByZXNlbmNlICE9PSBQcmVzZW5jZS51bmF2YWlsYWJsZVwiXG4gICAgICAgICAgICAgICAgIGNsYXNzPVwicm9zdGVyLXByZXNlbmNlXCJcbiAgICAgICAgICAgICAgICAgW25nQ2xhc3NdPVwiJ3Jvc3Rlci1wcmVzZW5jZS0tJyArIHByZXNlbmNlXCI+4pePXG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgPC9kaXY+XG5cbjwvZGl2PlxuIl19