import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import * as i0 from "@angular/core";
import * as i1 from "../channel.service";
import * as i2 from "../custom-templates.service";
import * as i3 from "../theme.service";
import * as i4 from "@angular/common";
import * as i5 from "../icon/icon.component";
import * as i6 from "../channel-preview/channel-preview.component";
import * as i7 from "../paginated-list/paginated-list.component";
import * as i8 from "@ngx-translate/core";
/**
 * The `ChannelList` component renders the list of channels.
 */
export class ChannelListComponent {
    constructor(channelService, customTemplatesService, themeService) {
        this.channelService = channelService;
        this.customTemplatesService = customTemplatesService;
        this.themeService = themeService;
        this.isLoadingMoreChannels = false;
        this.subscriptions = [];
        this.theme$ = this.themeService.theme$;
        this.channels$ = this.channelService.channels$;
        this.hasMoreChannels$ = this.channelService.hasMoreChannels$;
        this.isError$ = this.channelService.shouldRecoverState$;
        this.isInitializing$ = this.channelService.channelQueryState$.pipe(map((s) => !this.isLoadingMoreChannels && s?.state === 'in-progress'));
        this.subscriptions.push(this.customTemplatesService.channelPreviewTemplate$.subscribe((template) => (this.customChannelPreviewTemplate = template)));
    }
    ngOnDestroy() {
        this.subscriptions.forEach((s) => s.unsubscribe());
    }
    async loadMoreChannels() {
        this.isLoadingMoreChannels = true;
        await this.channelService.loadMoreChannels();
        this.isLoadingMoreChannels = false;
    }
    recoverState() {
        void this.channelService.recoverState();
    }
    trackByChannelId(_, item) {
        return item.cid;
    }
    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: ChannelListComponent, deps: [{ token: i1.ChannelService }, { token: i2.CustomTemplatesService }, { token: i3.ThemeService }], target: i0.ɵɵFactoryTarget.Component }); }
    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.0.0", type: ChannelListComponent, selector: "stream-channel-list", ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-angular__channel-list str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  @if ((isError$ | async) === false && (isInitializing$ | async) === false) {\n    <div class=\"str-chat__channel-list-messenger\">\n      <div class=\"str-chat__channel-list-messenger__main\">\n        <ng-content select=\"[channel-list-top]\" />\n        @if (!(channels$ | async)?.length) {\n          <div class=\"str-chat__channel-list-empty\">\n            <stream-icon icon=\"chat-bubble\" />\n            <p data-testid=\"empty-channel-list-indicator\">\n              {{ \"streamChat.You have no channels currently\" | translate }}\n            </p>\n          </div>\n        }\n        <stream-paginated-list\n          [items]=\"(channels$ | async) ?? []\"\n          [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n          [isLoading]=\"isLoadingMoreChannels\"\n          (loadMore)=\"loadMoreChannels()\"\n          [trackBy]=\"trackByChannelId\"\n        >\n          <ng-template let-channel=\"item\">\n            <ng-template #defaultTemplate let-channelInput=\"channel\">\n              <stream-channel-preview\n                data-testclass=\"channel-preview\"\n                [channel]=\"channelInput\"\n              />\n            </ng-template>\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customChannelPreviewTemplate || defaultTemplate;\n                  context: { channel: channel }\n                \"\n              />\n            </div>\n          </ng-template>\n        </stream-paginated-list>\n        <ng-content select=\"[channel-list-bottom]\" />\n      </div>\n    </div>\n  } @else {\n    @if (isError$ | async) {\n      <div\n        data-testid=\"chatdown-container\"\n        class=\"str-chat__dow str-chat__channel-list-empty\"\n      >\n        <button (click)=\"recoverState()\" class=\"str-chat__cta-button\">\n          {{ \"streamChat.Reload channels\" | translate }}\n        </button>\n      </div>\n    }\n    @if (isInitializing$ | async) {\n      <ng-container *ngTemplateOutlet=\"loadingChannels\" />\n    }\n  }\n</div>\n\n<ng-template #loadingChannels>\n  <div\n    data-testid=\"loading-indicator-full-size\"\n    class=\"str-chat__loading-channels\"\n  >\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n    >\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: i6.ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "component", type: i7.PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.0", ngImport: i0, type: ChannelListComponent, decorators: [{
            type: Component,
            args: [{ selector: 'stream-channel-list', template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat-angular__channel-list str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  @if ((isError$ | async) === false && (isInitializing$ | async) === false) {\n    <div class=\"str-chat__channel-list-messenger\">\n      <div class=\"str-chat__channel-list-messenger__main\">\n        <ng-content select=\"[channel-list-top]\" />\n        @if (!(channels$ | async)?.length) {\n          <div class=\"str-chat__channel-list-empty\">\n            <stream-icon icon=\"chat-bubble\" />\n            <p data-testid=\"empty-channel-list-indicator\">\n              {{ \"streamChat.You have no channels currently\" | translate }}\n            </p>\n          </div>\n        }\n        <stream-paginated-list\n          [items]=\"(channels$ | async) ?? []\"\n          [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n          [isLoading]=\"isLoadingMoreChannels\"\n          (loadMore)=\"loadMoreChannels()\"\n          [trackBy]=\"trackByChannelId\"\n        >\n          <ng-template let-channel=\"item\">\n            <ng-template #defaultTemplate let-channelInput=\"channel\">\n              <stream-channel-preview\n                data-testclass=\"channel-preview\"\n                [channel]=\"channelInput\"\n              />\n            </ng-template>\n            <div>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  customChannelPreviewTemplate || defaultTemplate;\n                  context: { channel: channel }\n                \"\n              />\n            </div>\n          </ng-template>\n        </stream-paginated-list>\n        <ng-content select=\"[channel-list-bottom]\" />\n      </div>\n    </div>\n  } @else {\n    @if (isError$ | async) {\n      <div\n        data-testid=\"chatdown-container\"\n        class=\"str-chat__dow str-chat__channel-list-empty\"\n      >\n        <button (click)=\"recoverState()\" class=\"str-chat__cta-button\">\n          {{ \"streamChat.Reload channels\" | translate }}\n        </button>\n      </div>\n    }\n    @if (isInitializing$ | async) {\n      <ng-container *ngTemplateOutlet=\"loadingChannels\" />\n    }\n  }\n</div>\n\n<ng-template #loadingChannels>\n  <div\n    data-testid=\"loading-indicator-full-size\"\n    class=\"str-chat__loading-channels\"\n  >\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n    <ng-container *ngTemplateOutlet=\"loadingChannel\" />\n  </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n  <div\n    class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n  >\n    <div class=\"str-chat__loading-channels-avatar\"></div>\n    <div\n      class=\"str-chat__loading-channels-meta str-chat__channel-preview-end-loading\"\n    >\n      <div class=\"str-chat__loading-channels-username\"></div>\n      <div class=\"str-chat__loading-channels-status\"></div>\n    </div>\n  </div>\n</ng-template>\n" }]
        }], ctorParameters: () => [{ type: i1.ChannelService }, { type: i2.CustomTemplatesService }, { type: i3.ThemeService }] });
//# sourceMappingURL=data:application/json;base64, 