/**
 * @fileoverview added by tsickle
 * @suppress {checkTypes,extraRequire,missingReturn,unusedPrivateMembers,uselessCode} checked by tsc
 */
import { Component } from '@angular/core';
import { ChatService } from '../chat.service';
import { map } from 'rxjs/operators';
export class ChannelListComponent {
    /**
     * @param {?} chatService
     */
    constructor(chatService) {
        this.chatService = chatService;
        this.selectedChannelJid$ = this.chatService.selectedChannel$.pipe(map(channel => channel && channel.jid));
    }
    /**
     * @return {?}
     */
    back() {
        this.chatService.selectGroup(null);
        this.chatService.selectChannel(null);
    }
}
ChannelListComponent.decorators = [
    { type: Component, args: [{
                selector: 'bidi-channel-list',
                template: "<ng-container *ngIf=\"chatService.selectedGroup$ | async as channels\">\n  <div [ngClass]=\"{'is-open':channels.length}\" class=\"chat-list-content is-relative\">\n    <div style=\"padding:25px;\">\n      <div class=\"chat-list-header\">\n        <nav class=\"panel-chat mobile-title\" (click)=\"chatService.selectGroup(null)\" >\n          <svg\n            class=\"icon-svg-tt-angle-left is-small is-pulled-left\"\n            style=\"cursor: pointer;height: 1em; width: 1em;fill: white;margin-top: 4px;\">\n            <use xlink:href=\"#icon-svg-tt-angle-left\"></use>\n          </svg>\n          <p\n            *ngIf=\"channels[0]\"\n            class=\"has-text-tt is-uppercase is-size-7 is-relative mobile-title\"\n            style=\"padding-top: 4px;\"\n           >\n            {{ channels[0].groupName }}\n          </p>\n\n        </nav>\n      </div>\n      <p class=\"has-text-tt is-uppercase is-size-7 is-relative desk-title\" style=\"padding-top: 4px;    margin-top: 58px;\">Selecciona un canal</p>\n\n      <div class=\"chat-list\">\n        <div\n          *ngFor=\"let channel of channels\"\n          (click)=\"chatService.selectChannel(channel)\"\n          [ngClass]=\"{ 'has-text-tt': channel.jid === (selectedChannelJid$ | async) }\"\n          class=\"label-chat is-ff-light has-text-light is-size-8 is-relative\"\n        >\n          <span>{{ channel.name }}</span>\n        </div>\n      </div>\n    </div>\n  </div>\n</ng-container>\n",
                styles: [".chat-list-content{width:0;background:rgba(30,54,72,.95);height:100vh;transition:width .25s;overflow:hidden}.chat-list-content.is-open{width:230px}@media screen and (max-width:680px){.chat-list-content .chat-list-header p{margin-left:17px}}.panel-chat{margin-bottom:50px}.label-chat{padding:15px 0;border-bottom:1px solid;cursor:pointer}.label-chat:hover{color:#00dd89!important;border-color:#00dd89!important}.label-chat span{margin-right:4px}.label-chat .conversations-counter{position:relative;display:inline-block;font-size:9px}.label-chat .conversations-counter .counter{width:15px;height:15px;text-align:center;border-radius:99999px;color:#fff;font-weight:700;padding-top:1px;border:1px solid #00dd89;position:absolute;top:-16px}@media (min-width:610px){.mobile-title{display:none}}@media (max-width:610px){.desk-title{display:none}}"]
            }] }
];
/** @nocollapse */
ChannelListComponent.ctorParameters = () => [
    { type: ChatService }
];
if (false) {
    /** @type {?} */
    ChannelListComponent.prototype.selectedChannelJid$;
    /** @type {?} */
    ChannelListComponent.prototype.chatService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhbm5lbC1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BiaWRpL2NvbW1vbi1jb21wb25lbnRzLyIsInNvdXJjZXMiOlsibGliL21vZHVsZXMvY2hhdC9jaGFubmVsLWxpc3QvY2hhbm5lbC1saXN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFOUMsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBT3JDLE1BQU0sT0FBTyxvQkFBb0I7Ozs7SUFLL0IsWUFBb0IsV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7UUFKNUMsd0JBQW1CLEdBQXVCLElBQUksQ0FBQyxXQUFXLENBQUMsZ0JBQWdCLENBQUMsSUFBSSxDQUM5RSxHQUFHLENBQUMsT0FBTyxDQUFDLEVBQUUsQ0FBQyxPQUFPLElBQUksT0FBTyxDQUFDLEdBQUcsQ0FBQyxDQUN2QyxDQUFDO0lBR0YsQ0FBQzs7OztJQUVELElBQUk7UUFDRixJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN2QyxDQUFDOzs7WUFoQkYsU0FBUyxTQUFDO2dCQUNULFFBQVEsRUFBRSxtQkFBbUI7Z0JBQzdCLHM4Q0FBNEM7O2FBRTdDOzs7O1lBUlEsV0FBVzs7OztJQVVsQixtREFFRTs7SUFFVywyQ0FBK0IiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENoYXRTZXJ2aWNlIH0gZnJvbSAnLi4vY2hhdC5zZXJ2aWNlJztcbmltcG9ydCB7IE9ic2VydmFibGUgfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IG1hcCB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcblxuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYmlkaS1jaGFubmVsLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hhbm5lbC1saXN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vY2hhbm5lbC1saXN0LmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgQ2hhbm5lbExpc3RDb21wb25lbnQge1xuICBzZWxlY3RlZENoYW5uZWxKaWQkOiBPYnNlcnZhYmxlPHN0cmluZz4gPSB0aGlzLmNoYXRTZXJ2aWNlLnNlbGVjdGVkQ2hhbm5lbCQucGlwZShcbiAgICBtYXAoY2hhbm5lbCA9PiBjaGFubmVsICYmIGNoYW5uZWwuamlkKVxuICApO1xuXG4gIGNvbnN0cnVjdG9yIChwdWJsaWMgY2hhdFNlcnZpY2U6IENoYXRTZXJ2aWNlKSB7XG4gIH1cblxuICBiYWNrICgpIHtcbiAgICB0aGlzLmNoYXRTZXJ2aWNlLnNlbGVjdEdyb3VwKG51bGwpO1xuICAgIHRoaXMuY2hhdFNlcnZpY2Uuc2VsZWN0Q2hhbm5lbChudWxsKTtcbiAgfVxufVxuIl19