/**
 * @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';
var ChannelListComponent = /** @class */ (function () {
    function ChannelListComponent(chatService) {
        this.chatService = chatService;
        this.selectedChannelJid$ = this.chatService.selectedChannel$.pipe(map(function (channel) { return channel && channel.jid; }));
    }
    /**
     * @return {?}
     */
    ChannelListComponent.prototype.back = /**
     * @return {?}
     */
    function () {
        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 = function () { return [
        { type: ChatService }
    ]; };
    return ChannelListComponent;
}());
export { ChannelListComponent };
if (false) {
    /** @type {?} */
    ChannelListComponent.prototype.selectedChannelJid$;
    /** @type {?} */
    ChannelListComponent.prototype.chatService;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhbm5lbC1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiJuZzovL0BiaWRpL2NvbW1vbi1jb21wb25lbnRzLyIsInNvdXJjZXMiOlsibGliL21vZHVsZXMvY2hhdC9jaGFubmVsLWxpc3QvY2hhbm5lbC1saXN0LmNvbXBvbmVudC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7O0FBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUMxQyxPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFFOUMsT0FBTyxFQUFFLEdBQUcsRUFBRSxNQUFNLGdCQUFnQixDQUFDO0FBRXJDO0lBVUUsOEJBQW9CLFdBQXdCO1FBQXhCLGdCQUFXLEdBQVgsV0FBVyxDQUFhO1FBSjVDLHdCQUFtQixHQUF1QixJQUFJLENBQUMsV0FBVyxDQUFDLGdCQUFnQixDQUFDLElBQUksQ0FDOUUsR0FBRyxDQUFDLFVBQUEsT0FBTyxJQUFJLE9BQUEsT0FBTyxJQUFJLE9BQU8sQ0FBQyxHQUFHLEVBQXRCLENBQXNCLENBQUMsQ0FDdkMsQ0FBQztJQUdGLENBQUM7Ozs7SUFFRCxtQ0FBSTs7O0lBQUo7UUFDRSxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsQ0FBQztRQUNuQyxJQUFJLENBQUMsV0FBVyxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQUMsQ0FBQztJQUN2QyxDQUFDOztnQkFoQkYsU0FBUyxTQUFDO29CQUNULFFBQVEsRUFBRSxtQkFBbUI7b0JBQzdCLHM4Q0FBNEM7O2lCQUU3Qzs7OztnQkFSUSxXQUFXOztJQXFCcEIsMkJBQUM7Q0FBQSxBQWpCRCxJQWlCQztTQVpZLG9CQUFvQjs7O0lBQy9CLG1EQUVFOztJQUVXLDJDQUErQiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgQ2hhdFNlcnZpY2UgfSBmcm9tICcuLi9jaGF0LnNlcnZpY2UnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgbWFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdiaWRpLWNoYW5uZWwtbGlzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGFubmVsLWxpc3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9jaGFubmVsLWxpc3QuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBDaGFubmVsTGlzdENvbXBvbmVudCB7XG4gIHNlbGVjdGVkQ2hhbm5lbEppZCQ6IE9ic2VydmFibGU8c3RyaW5nPiA9IHRoaXMuY2hhdFNlcnZpY2Uuc2VsZWN0ZWRDaGFubmVsJC5waXBlKFxuICAgIG1hcChjaGFubmVsID0+IGNoYW5uZWwgJiYgY2hhbm5lbC5qaWQpXG4gICk7XG5cbiAgY29uc3RydWN0b3IgKHB1YmxpYyBjaGF0U2VydmljZTogQ2hhdFNlcnZpY2UpIHtcbiAgfVxuXG4gIGJhY2sgKCkge1xuICAgIHRoaXMuY2hhdFNlcnZpY2Uuc2VsZWN0R3JvdXAobnVsbCk7XG4gICAgdGhpcy5jaGF0U2VydmljZS5zZWxlY3RDaGFubmVsKG51bGwpO1xuICB9XG59XG4iXX0=