stream-chat-angular 5.2.0 → 5.3.1

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "5.2.0";
+export declare const version = "5.3.1";

package/esm2020/assets/version.mjs

@@ -1,2 +1,2 @@
-export const version = '5.2.0';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2Fzc2V0cy92ZXJzaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBRyxPQUFPLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgdmVyc2lvbiA9ICc1LjIuMCc7XG4iXX0=
+export const version = '5.3.1';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2Fzc2V0cy92ZXJzaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBRyxPQUFPLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgdmVyc2lvbiA9ICc1LjMuMSc7XG4iXX0=

package/esm2020/lib/channel-list/channel-list.component.mjs

@@ -1,4 +1,4 @@
-import { Component, ViewChild, } from '@angular/core';
+import { Component } from '@angular/core';
 import { map } from 'rxjs/operators';
 import * as i0 from "@angular/core";
 import * as i1 from "../channel.service";
@@ -7,7 +7,7 @@ import * as i3 from "../theme.service";
 import * as i4 from "@angular/common";
 import * as i5 from "../channel-preview/channel-preview.component";
 import * as i6 from "../icon/icon.component";
-import * as i7 from "../loading-indicator-placeholder/loading-indicator-placeholder.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.
@@ -39,12 +39,9 @@ export class ChannelListComponent {
     }
 }
 ChannelListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelListComponent, deps: [{ token: i1.ChannelService }, { token: i2.CustomTemplatesService }, { token: i3.ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelListComponent, selector: "stream-channel-list", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\n        <ng-template #defaultTemplate let-channelInput=\"channel\">\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channelInput\"\n          ></stream-channel-preview>\n        </ng-template>\n        <div>\n          <ng-container\n            *ngTemplateOutlet=\"\n              customChannelPreviewTemplate || defaultTemplate;\n              context: { channel: channel }\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        data-testid=\"load-more\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button str-chat__cta-button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n          ></ng-template>\n        </button>\n      </div>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "component", type: i6.IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: i7.LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i8.TranslatePipe, name: "translate" }] });
+ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\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            ></stream-channel-preview>\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\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\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i5.ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "component", type: i6.IconComponent, selector: "stream-icon", inputs: ["icon"] }, { 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: "15.0.4", 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__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\n        <ng-template #defaultTemplate let-channelInput=\"channel\">\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channelInput\"\n          ></stream-channel-preview>\n        </ng-template>\n        <div>\n          <ng-container\n            *ngTemplateOutlet=\"\n              customChannelPreviewTemplate || defaultTemplate;\n              context: { channel: channel }\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        data-testid=\"load-more\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button str-chat__cta-button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n          ></ng-template>\n        </button>\n      </div>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\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: function () { return [{ type: i1.ChannelService }, { type: i2.CustomTemplatesService }, { type: i3.ThemeService }]; }, propDecorators: { container: [{
-                type: ViewChild,
-                args: ['container']
-            }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhbm5lbC1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9jaGFubmVsLWxpc3QvY2hhbm5lbC1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9jaGFubmVsLWxpc3QvY2hhbm5lbC1saXN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFDTCxTQUFTLEVBSVQsU0FBUyxHQUNWLE1BQU0sZUFBZSxDQUFDO0FBRXZCLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7OztBQU9yQzs7R0FFRztBQU1ILE1BQU0sT0FBTyxvQkFBb0I7SUFXL0IsWUFDVSxjQUE4QixFQUM5QixzQkFBOEMsRUFDOUMsWUFBMEI7UUFGMUIsbUJBQWMsR0FBZCxjQUFjLENBQWdCO1FBQzlCLDJCQUFzQixHQUF0QixzQkFBc0IsQ0FBd0I7UUFDOUMsaUJBQVksR0FBWixZQUFZLENBQWM7UUFWcEMsMEJBQXFCLEdBQUcsS0FBSyxDQUFDO1FBSTlCLGtCQUFhLEdBQW1CLEVBQUUsQ0FBQztRQVFqQyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxTQUFTLENBQUM7UUFDL0MsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsZ0JBQWdCLENBQUM7UUFDN0QsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FDekQsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxxQkFBcUIsSUFBSSxDQUFDLEVBQUUsS0FBSyxLQUFLLE9BQU8sQ0FBQyxDQUNoRSxDQUFDO1FBQ0YsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FDaEUsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxxQkFBcUIsSUFBSSxDQUFDLEVBQUUsS0FBSyxLQUFLLGFBQWEsQ0FBQyxDQUN0RSxDQUFDO1FBQ0YsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQ3JCLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyx1QkFBdUIsQ0FBQyxTQUFTLENBQzNELENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyw0QkFBNEIsR0FBRyxRQUFRLENBQUMsQ0FDN0QsQ0FDRixDQUFDO0lBQ0osQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDckQsQ0FBQztJQUVELEtBQUssQ0FBQyxnQkFBZ0I7UUFDcEIsSUFBSSxDQUFDLHFCQUFxQixHQUFHLElBQUksQ0FBQztRQUNsQyxNQUFNLElBQUksQ0FBQyxjQUFjLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztRQUM3QyxJQUFJLENBQUMscUJBQXFCLEdBQUcsS0FBSyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxDQUFTLEVBQUUsSUFBd0M7UUFDbEUsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDO0lBQ2xCLENBQUM7O2lIQTVDVSxvQkFBb0I7cUdBQXBCLG9CQUFvQixtS0N2QmpDLHEwSEErR0E7MkZEeEZhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxxQkFBcUI7cUtBYUMsU0FBUztzQkFBeEMsU0FBUzt1QkFBQyxXQUFXIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBFbGVtZW50UmVmLFxuICBPbkRlc3Ryb3ksXG4gIFRlbXBsYXRlUmVmLFxuICBWaWV3Q2hpbGQsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZSwgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBtYXAgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBDaGFubmVsIH0gZnJvbSAnc3RyZWFtLWNoYXQnO1xuaW1wb3J0IHsgQ2hhbm5lbFNlcnZpY2UgfSBmcm9tICcuLi9jaGFubmVsLnNlcnZpY2UnO1xuaW1wb3J0IHsgQ3VzdG9tVGVtcGxhdGVzU2VydmljZSB9IGZyb20gJy4uL2N1c3RvbS10ZW1wbGF0ZXMuc2VydmljZSc7XG5pbXBvcnQgeyBUaGVtZVNlcnZpY2UgfSBmcm9tICcuLi90aGVtZS5zZXJ2aWNlJztcbmltcG9ydCB7IENoYW5uZWxQcmV2aWV3Q29udGV4dCwgRGVmYXVsdFN0cmVhbUNoYXRHZW5lcmljcyB9IGZyb20gJy4uL3R5cGVzJztcblxuLyoqXG4gKiBUaGUgYENoYW5uZWxMaXN0YCBjb21wb25lbnQgcmVuZGVycyB0aGUgbGlzdCBvZiBjaGFubmVscy5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3RyZWFtLWNoYW5uZWwtbGlzdCcsXG4gIHRlbXBsYXRlVXJsOiAnLi9jaGFubmVsLWxpc3QuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZXM6IFtdLFxufSlcbmV4cG9ydCBjbGFzcyBDaGFubmVsTGlzdENvbXBvbmVudCBpbXBsZW1lbnRzIE9uRGVzdHJveSB7XG4gIGNoYW5uZWxzJDogT2JzZXJ2YWJsZTxDaGFubmVsPERlZmF1bHRTdHJlYW1DaGF0R2VuZXJpY3M+W10gfCB1bmRlZmluZWQ+O1xuICBpc0Vycm9yJDogT2JzZXJ2YWJsZTxib29sZWFuPjtcbiAgaXNJbml0aWFsaXppbmckOiBPYnNlcnZhYmxlPGJvb2xlYW4+O1xuICBpc0xvYWRpbmdNb3JlQ2hhbm5lbHMgPSBmYWxzZTtcbiAgaGFzTW9yZUNoYW5uZWxzJDogT2JzZXJ2YWJsZTxib29sZWFuPjtcbiAgY3VzdG9tQ2hhbm5lbFByZXZpZXdUZW1wbGF0ZTogVGVtcGxhdGVSZWY8Q2hhbm5lbFByZXZpZXdDb250ZXh0PiB8IHVuZGVmaW5lZDtcbiAgdGhlbWUkOiBPYnNlcnZhYmxlPHN0cmluZz47XG4gIHN1YnNjcmlwdGlvbnM6IFN1YnNjcmlwdGlvbltdID0gW107XG4gIEBWaWV3Q2hpbGQoJ2NvbnRhaW5lcicpIHByaXZhdGUgY29udGFpbmVyITogRWxlbWVudFJlZjxIVE1MRWxlbWVudD47XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBjaGFubmVsU2VydmljZTogQ2hhbm5lbFNlcnZpY2UsXG4gICAgcHJpdmF0ZSBjdXN0b21UZW1wbGF0ZXNTZXJ2aWNlOiBDdXN0b21UZW1wbGF0ZXNTZXJ2aWNlLFxuICAgIHByaXZhdGUgdGhlbWVTZXJ2aWNlOiBUaGVtZVNlcnZpY2VcbiAgKSB7XG4gICAgdGhpcy50aGVtZSQgPSB0aGlzLnRoZW1lU2VydmljZS50aGVtZSQ7XG4gICAgdGhpcy5jaGFubmVscyQgPSB0aGlzLmNoYW5uZWxTZXJ2aWNlLmNoYW5uZWxzJDtcbiAgICB0aGlzLmhhc01vcmVDaGFubmVscyQgPSB0aGlzLmNoYW5uZWxTZXJ2aWNlLmhhc01vcmVDaGFubmVscyQ7XG4gICAgdGhpcy5pc0Vycm9yJCA9IHRoaXMuY2hhbm5lbFNlcnZpY2UuY2hhbm5lbFF1ZXJ5U3RhdGUkLnBpcGUoXG4gICAgICBtYXAoKHMpID0+ICF0aGlzLmlzTG9hZGluZ01vcmVDaGFubmVscyAmJiBzPy5zdGF0ZSA9PT0gJ2Vycm9yJylcbiAgICApO1xuICAgIHRoaXMuaXNJbml0aWFsaXppbmckID0gdGhpcy5jaGFubmVsU2VydmljZS5jaGFubmVsUXVlcnlTdGF0ZSQucGlwZShcbiAgICAgIG1hcCgocykgPT4gIXRoaXMuaXNMb2FkaW5nTW9yZUNoYW5uZWxzICYmIHM/LnN0YXRlID09PSAnaW4tcHJvZ3Jlc3MnKVxuICAgICk7XG4gICAgdGhpcy5zdWJzY3JpcHRpb25zLnB1c2goXG4gICAgICB0aGlzLmN1c3RvbVRlbXBsYXRlc1NlcnZpY2UuY2hhbm5lbFByZXZpZXdUZW1wbGF0ZSQuc3Vic2NyaWJlKFxuICAgICAgICAodGVtcGxhdGUpID0+ICh0aGlzLmN1c3RvbUNoYW5uZWxQcmV2aWV3VGVtcGxhdGUgPSB0ZW1wbGF0ZSlcbiAgICAgIClcbiAgICApO1xuICB9XG5cbiAgbmdPbkRlc3Ryb3koKTogdm9pZCB7XG4gICAgdGhpcy5zdWJzY3JpcHRpb25zLmZvckVhY2goKHMpID0+IHMudW5zdWJzY3JpYmUoKSk7XG4gIH1cblxuICBhc3luYyBsb2FkTW9yZUNoYW5uZWxzKCkge1xuICAgIHRoaXMuaXNMb2FkaW5nTW9yZUNoYW5uZWxzID0gdHJ1ZTtcbiAgICBhd2FpdCB0aGlzLmNoYW5uZWxTZXJ2aWNlLmxvYWRNb3JlQ2hhbm5lbHMoKTtcbiAgICB0aGlzLmlzTG9hZGluZ01vcmVDaGFubmVscyA9IGZhbHNlO1xuICB9XG5cbiAgdHJhY2tCeUNoYW5uZWxJZChfOiBudW1iZXIsIGl0ZW06IENoYW5uZWw8RGVmYXVsdFN0cmVhbUNoYXRHZW5lcmljcz4pIHtcbiAgICByZXR1cm4gaXRlbS5jaWQ7XG4gIH1cbn1cbiIsIjxkaXZcbiAgI2NvbnRhaW5lclxuICBkYXRhLXRlc3RpZD1cImNoYW5uZWwtbGlzdC1jb250YWluZXJcIlxuICBjbGFzcz1cInN0ci1jaGF0IHN0ci1jaGF0X19jaGFubmVsLWxpc3Qgc3RyLWNoYXQtY2hhbm5lbC1saXN0IG1lc3NhZ2luZyBzdHItY2hhdF9fdGhlbWUte3tcbiAgICB0aGVtZSQgfCBhc3luY1xuICB9fVwiXG4+XG4gIDxkaXZcbiAgICAqbmdJZj1cIlxuICAgICAgKGlzRXJyb3IkIHwgYXN5bmMpID09PSBmYWxzZSAmJiAoaXNJbml0aWFsaXppbmckIHwgYXN5bmMpID09PSBmYWxzZTtcbiAgICAgIGVsc2Ugc3RhdHVzSW5kaWNhdG9yXG4gICAgXCJcbiAgICBjbGFzcz1cInN0ci1jaGF0X19jaGFubmVsLWxpc3QtbWVzc2VuZ2VyXCJcbiAgPlxuICAgIDxkaXYgY2xhc3M9XCJzdHItY2hhdF9fY2hhbm5lbC1saXN0LW1lc3Nlbmdlcl9fbWFpblwiPlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2NoYW5uZWwtbGlzdC10b3BdXCI+PC9uZy1jb250ZW50PlxuICAgICAgPGRpdlxuICAgICAgICAqbmdJZj1cIiEoY2hhbm5lbHMkIHwgYXN5bmMpPy5sZW5ndGhcIlxuICAgICAgICBjbGFzcz1cInN0ci1jaGF0X19jaGFubmVsLWxpc3QtZW1wdHlcIlxuICAgICAgPlxuICAgICAgICA8c3RyZWFtLWljb24gaWNvbj1cImNoYXQtYnViYmxlXCI+PC9zdHJlYW0taWNvbj5cbiAgICAgICAgPHAgZGF0YS10ZXN0aWQ9XCJlbXB0eS1jaGFubmVsLWxpc3QtaW5kaWNhdG9yXCI+XG4gICAgICAgICAge3sgXCJzdHJlYW1DaGF0LllvdSBoYXZlIG5vIGNoYW5uZWxzIGN1cnJlbnRseVwiIHwgdHJhbnNsYXRlIH19XG4gICAgICAgIDwvcD5cbiAgICAgIDwvZGl2PlxuICAgICAgPHBcbiAgICAgICAgKm5nSWY9XCIhKGNoYW5uZWxzJCB8IGFzeW5jKT8ubGVuZ3RoXCJcbiAgICAgICAgY2xhc3M9XCJzdHItY2hhdF9fY2hhbm5lbC1saXN0LWVtcHR5LXYxXCJcbiAgICAgICAgZGF0YS10ZXN0aWQ9XCJlbXB0eS1jaGFubmVsLWxpc3QtaW5kaWNhdG9yXCJcbiAgICAgID5cbiAgICAgICAge3sgXCJzdHJlYW1DaGF0LllvdSBoYXZlIG5vIGNoYW5uZWxzIGN1cnJlbnRseVwiIHwgdHJhbnNsYXRlIH19XG4gICAgICA8L3A+XG4gICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICpuZ0Zvcj1cImxldCBjaGFubmVsIG9mIGNoYW5uZWxzJCB8IGFzeW5jOyB0cmFja0J5OiB0cmFja0J5Q2hhbm5lbElkXCJcbiAgICAgID5cbiAgICAgICAgPG5nLXRlbXBsYXRlICNkZWZhdWx0VGVtcGxhdGUgbGV0LWNoYW5uZWxJbnB1dD1cImNoYW5uZWxcIj5cbiAgICAgICAgICA8c3RyZWFtLWNoYW5uZWwtcHJldmlld1xuICAgICAgICAgICAgZGF0YS10ZXN0Y2xhc3M9XCJjaGFubmVsLXByZXZpZXdcIlxuICAgICAgICAgICAgW2NoYW5uZWxdPVwiY2hhbm5lbElucHV0XCJcbiAgICAgICAgICA+PC9zdHJlYW0tY2hhbm5lbC1wcmV2aWV3PlxuICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICA8ZGl2PlxuICAgICAgICAgIDxuZy1jb250YWluZXJcbiAgICAgICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiXG4gICAgICAgICAgICAgIGN1c3RvbUNoYW5uZWxQcmV2aWV3VGVtcGxhdGUgfHwgZGVmYXVsdFRlbXBsYXRlO1xuICAgICAgICAgICAgICBjb250ZXh0OiB7IGNoYW5uZWw6IGNoYW5uZWwgfVxuICAgICAgICAgICAgXCJcbiAgICAgICAgICA+PC9uZy1jb250YWluZXI+XG4gICAgICAgIDwvZGl2PlxuICAgICAgPC9uZy1jb250YWluZXI+XG4gICAgICA8ZGl2XG4gICAgICAgICpuZ0lmPVwiaGFzTW9yZUNoYW5uZWxzJCB8IGFzeW5jXCJcbiAgICAgICAgY2xhc3M9XCJzdHItY2hhdF9fbG9hZC1tb3JlLWJ1dHRvblwiXG4gICAgICAgIGRhdGEtdGVzdGlkPVwibG9hZC1tb3JlXCJcbiAgICAgICAgKGNsaWNrKT1cImxvYWRNb3JlQ2hhbm5lbHMoKVwiXG4gICAgICAgIChrZXl1cC5lbnRlcik9XCJsb2FkTW9yZUNoYW5uZWxzKClcIlxuICAgICAgPlxuICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgY2xhc3M9XCJzdHItY2hhdF9fbG9hZC1tb3JlLWJ1dHRvbl9fYnV0dG9uIHN0ci1jaGF0X19jdGEtYnV0dG9uXCJcbiAgICAgICAgICBkYXRhLXRlc3RpZD1cImxvYWQtbW9yZS1idXR0b25cIlxuICAgICAgICAgIFtkaXNhYmxlZF09XCJpc0xvYWRpbmdNb3JlQ2hhbm5lbHNcIlxuICAgICAgICA+XG4gICAgICAgICAgPHNwYW4gKm5nSWY9XCIhaXNMb2FkaW5nTW9yZUNoYW5uZWxzOyBlbHNlIGxvYWRpbmdJbmRpY2F0b3JcIj57e1xuICAgICAgICAgICAgXCJMb2FkIG1vcmVcIiB8IHRyYW5zbGF0ZVxuICAgICAgICAgIH19PC9zcGFuPlxuICAgICAgICAgIDxuZy10ZW1wbGF0ZSAjbG9hZGluZ0luZGljYXRvclxuICAgICAgICAgICAgPjxzdHJlYW0tbG9hZGluZy1pbmRpY2F0b3ItcGxhY2Vob2xkZXI+PC9zdHJlYW0tbG9hZGluZy1pbmRpY2F0b3ItcGxhY2Vob2xkZXJcbiAgICAgICAgICA+PC9uZy10ZW1wbGF0ZT5cbiAgICAgICAgPC9idXR0b24+XG4gICAgICA8L2Rpdj5cbiAgICAgIDxuZy1jb250ZW50IHNlbGVjdD1cIltjaGFubmVsLWxpc3QtYm90dG9tXVwiPjwvbmctY29udGVudD5cbiAgICA8L2Rpdj5cbiAgPC9kaXY+XG48L2Rpdj5cblxuPG5nLXRlbXBsYXRlICNzdGF0dXNJbmRpY2F0b3I+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJpc0Vycm9yJCB8IGFzeW5jXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdUZW1wbGF0ZU91dGxldD1cImNoYXREb3duXCI+PC9uZy1jb250YWluZXI+XG4gIDwvbmctY29udGFpbmVyPlxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiaXNJbml0aWFsaXppbmckIHwgYXN5bmNcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibG9hZGluZ0NoYW5uZWxzXCI+PC9uZy1jb250YWluZXI+XG4gIDwvbmctY29udGFpbmVyPlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNjaGF0RG93bj5cbiAgPGRpdiBkYXRhLXRlc3RpZD1cImNoYXRkb3duLWNvbnRhaW5lclwiIGNsYXNzPVwic3RyLWNoYXRfX2Rvd25cIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibG9hZGluZ0NoYW5uZWxzXCI+PC9uZy1jb250YWluZXI+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cblxuPG5nLXRlbXBsYXRlICNsb2FkaW5nQ2hhbm5lbHM+XG4gIDxkaXYgZGF0YS10ZXN0aWQ9XCJsb2FkaW5nLWluZGljYXRvclwiIGNsYXNzPVwic3RyLWNoYXRfX2xvYWRpbmctY2hhbm5lbHNcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibG9hZGluZ0NoYW5uZWxcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibG9hZGluZ0NoYW5uZWxcIj48L25nLWNvbnRhaW5lcj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwibG9hZGluZ0NoYW5uZWxcIj48L25nLWNvbnRhaW5lcj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2xvYWRpbmdDaGFubmVsPlxuICA8ZGl2XG4gICAgY2xhc3M9XCJzdHItY2hhdF9fbG9hZGluZy1jaGFubmVscy1pdGVtIHN0ci1jaGF0X19jaGFubmVsLXByZXZpZXctbG9hZGluZ1wiXG4gID5cbiAgICA8ZGl2IGNsYXNzPVwic3RyLWNoYXRfX2xvYWRpbmctY2hhbm5lbHMtYXZhdGFyXCI+PC9kaXY+XG4gICAgPGRpdlxuICAgICAgY2xhc3M9XCJzdHItY2hhdF9fbG9hZGluZy1jaGFubmVscy1tZXRhIHN0ci1jaGF0X19jaGFubmVsLXByZXZpZXctZW5kLWxvYWRpbmdcIlxuICAgID5cbiAgICAgIDxkaXYgY2xhc3M9XCJzdHItY2hhdF9fbG9hZGluZy1jaGFubmVscy11c2VybmFtZVwiPjwvZGl2PlxuICAgICAgPGRpdiBjbGFzcz1cInN0ci1jaGF0X19sb2FkaW5nLWNoYW5uZWxzLXN0YXR1c1wiPjwvZGl2PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG4iXX0=
+            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  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\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            ></stream-channel-preview>\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\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\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\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: function () { return [{ type: i1.ChannelService }, { type: i2.CustomTemplatesService }, { type: i3.ThemeService }]; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiY2hhbm5lbC1saXN0LmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9jaGFubmVsLWxpc3QvY2hhbm5lbC1saXN0LmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9jaGFubmVsLWxpc3QvY2hhbm5lbC1saXN0LmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQTBCLE1BQU0sZUFBZSxDQUFDO0FBRWxFLE9BQU8sRUFBRSxHQUFHLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQzs7Ozs7Ozs7OztBQU9yQzs7R0FFRztBQU1ILE1BQU0sT0FBTyxvQkFBb0I7SUFVL0IsWUFDVSxjQUE4QixFQUM5QixzQkFBOEMsRUFDOUMsWUFBMEI7UUFGMUIsbUJBQWMsR0FBZCxjQUFjLENBQWdCO1FBQzlCLDJCQUFzQixHQUF0QixzQkFBc0IsQ0FBd0I7UUFDOUMsaUJBQVksR0FBWixZQUFZLENBQWM7UUFUcEMsMEJBQXFCLEdBQUcsS0FBSyxDQUFDO1FBSTlCLGtCQUFhLEdBQW1CLEVBQUUsQ0FBQztRQU9qQyxJQUFJLENBQUMsTUFBTSxHQUFHLElBQUksQ0FBQyxZQUFZLENBQUMsTUFBTSxDQUFDO1FBQ3ZDLElBQUksQ0FBQyxTQUFTLEdBQUcsSUFBSSxDQUFDLGNBQWMsQ0FBQyxTQUFTLENBQUM7UUFDL0MsSUFBSSxDQUFDLGdCQUFnQixHQUFHLElBQUksQ0FBQyxjQUFjLENBQUMsZ0JBQWdCLENBQUM7UUFDN0QsSUFBSSxDQUFDLFFBQVEsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FDekQsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxxQkFBcUIsSUFBSSxDQUFDLEVBQUUsS0FBSyxLQUFLLE9BQU8sQ0FBQyxDQUNoRSxDQUFDO1FBQ0YsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsY0FBYyxDQUFDLGtCQUFrQixDQUFDLElBQUksQ0FDaEUsR0FBRyxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyxxQkFBcUIsSUFBSSxDQUFDLEVBQUUsS0FBSyxLQUFLLGFBQWEsQ0FBQyxDQUN0RSxDQUFDO1FBQ0YsSUFBSSxDQUFDLGFBQWEsQ0FBQyxJQUFJLENBQ3JCLElBQUksQ0FBQyxzQkFBc0IsQ0FBQyx1QkFBdUIsQ0FBQyxTQUFTLENBQzNELENBQUMsUUFBUSxFQUFFLEVBQUUsQ0FBQyxDQUFDLElBQUksQ0FBQyw0QkFBNEIsR0FBRyxRQUFRLENBQUMsQ0FDN0QsQ0FDRixDQUFDO0lBQ0osQ0FBQztJQUVELFdBQVc7UUFDVCxJQUFJLENBQUMsYUFBYSxDQUFDLE9BQU8sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLFdBQVcsRUFBRSxDQUFDLENBQUM7SUFDckQsQ0FBQztJQUVELEtBQUssQ0FBQyxnQkFBZ0I7UUFDcEIsSUFBSSxDQUFDLHFCQUFxQixHQUFHLElBQUksQ0FBQztRQUNsQyxNQUFNLElBQUksQ0FBQyxjQUFjLENBQUMsZ0JBQWdCLEVBQUUsQ0FBQztRQUM3QyxJQUFJLENBQUMscUJBQXFCLEdBQUcsS0FBSyxDQUFDO0lBQ3JDLENBQUM7SUFFRCxnQkFBZ0IsQ0FBQyxDQUFTLEVBQUUsSUFBd0M7UUFDbEUsT0FBTyxJQUFJLENBQUMsR0FBRyxDQUFDO0lBQ2xCLENBQUM7O2lIQTNDVSxvQkFBb0I7cUdBQXBCLG9CQUFvQiwyRENqQmpDLDQyR0FtR0E7MkZEbEZhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxxQkFBcUIiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21wb25lbnQsIE9uRGVzdHJveSwgVGVtcGxhdGVSZWYgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IE9ic2VydmFibGUsIFN1YnNjcmlwdGlvbiB9IGZyb20gJ3J4anMnO1xuaW1wb3J0IHsgbWFwIH0gZnJvbSAncnhqcy9vcGVyYXRvcnMnO1xuaW1wb3J0IHsgQ2hhbm5lbCB9IGZyb20gJ3N0cmVhbS1jaGF0JztcbmltcG9ydCB7IENoYW5uZWxTZXJ2aWNlIH0gZnJvbSAnLi4vY2hhbm5lbC5zZXJ2aWNlJztcbmltcG9ydCB7IEN1c3RvbVRlbXBsYXRlc1NlcnZpY2UgfSBmcm9tICcuLi9jdXN0b20tdGVtcGxhdGVzLnNlcnZpY2UnO1xuaW1wb3J0IHsgVGhlbWVTZXJ2aWNlIH0gZnJvbSAnLi4vdGhlbWUuc2VydmljZSc7XG5pbXBvcnQgeyBDaGFubmVsUHJldmlld0NvbnRleHQsIERlZmF1bHRTdHJlYW1DaGF0R2VuZXJpY3MgfSBmcm9tICcuLi90eXBlcyc7XG5cbi8qKlxuICogVGhlIGBDaGFubmVsTGlzdGAgY29tcG9uZW50IHJlbmRlcnMgdGhlIGxpc3Qgb2YgY2hhbm5lbHMuXG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ3N0cmVhbS1jaGFubmVsLWxpc3QnLFxuICB0ZW1wbGF0ZVVybDogJy4vY2hhbm5lbC1saXN0LmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVzOiBbXSxcbn0pXG5leHBvcnQgY2xhc3MgQ2hhbm5lbExpc3RDb21wb25lbnQgaW1wbGVtZW50cyBPbkRlc3Ryb3kge1xuICBjaGFubmVscyQ6IE9ic2VydmFibGU8Q2hhbm5lbDxEZWZhdWx0U3RyZWFtQ2hhdEdlbmVyaWNzPltdIHwgdW5kZWZpbmVkPjtcbiAgaXNFcnJvciQ6IE9ic2VydmFibGU8Ym9vbGVhbj47XG4gIGlzSW5pdGlhbGl6aW5nJDogT2JzZXJ2YWJsZTxib29sZWFuPjtcbiAgaXNMb2FkaW5nTW9yZUNoYW5uZWxzID0gZmFsc2U7XG4gIGhhc01vcmVDaGFubmVscyQ6IE9ic2VydmFibGU8Ym9vbGVhbj47XG4gIGN1c3RvbUNoYW5uZWxQcmV2aWV3VGVtcGxhdGU6IFRlbXBsYXRlUmVmPENoYW5uZWxQcmV2aWV3Q29udGV4dD4gfCB1bmRlZmluZWQ7XG4gIHRoZW1lJDogT2JzZXJ2YWJsZTxzdHJpbmc+O1xuICBzdWJzY3JpcHRpb25zOiBTdWJzY3JpcHRpb25bXSA9IFtdO1xuXG4gIGNvbnN0cnVjdG9yKFxuICAgIHByaXZhdGUgY2hhbm5lbFNlcnZpY2U6IENoYW5uZWxTZXJ2aWNlLFxuICAgIHByaXZhdGUgY3VzdG9tVGVtcGxhdGVzU2VydmljZTogQ3VzdG9tVGVtcGxhdGVzU2VydmljZSxcbiAgICBwcml2YXRlIHRoZW1lU2VydmljZTogVGhlbWVTZXJ2aWNlXG4gICkge1xuICAgIHRoaXMudGhlbWUkID0gdGhpcy50aGVtZVNlcnZpY2UudGhlbWUkO1xuICAgIHRoaXMuY2hhbm5lbHMkID0gdGhpcy5jaGFubmVsU2VydmljZS5jaGFubmVscyQ7XG4gICAgdGhpcy5oYXNNb3JlQ2hhbm5lbHMkID0gdGhpcy5jaGFubmVsU2VydmljZS5oYXNNb3JlQ2hhbm5lbHMkO1xuICAgIHRoaXMuaXNFcnJvciQgPSB0aGlzLmNoYW5uZWxTZXJ2aWNlLmNoYW5uZWxRdWVyeVN0YXRlJC5waXBlKFxuICAgICAgbWFwKChzKSA9PiAhdGhpcy5pc0xvYWRpbmdNb3JlQ2hhbm5lbHMgJiYgcz8uc3RhdGUgPT09ICdlcnJvcicpXG4gICAgKTtcbiAgICB0aGlzLmlzSW5pdGlhbGl6aW5nJCA9IHRoaXMuY2hhbm5lbFNlcnZpY2UuY2hhbm5lbFF1ZXJ5U3RhdGUkLnBpcGUoXG4gICAgICBtYXAoKHMpID0+ICF0aGlzLmlzTG9hZGluZ01vcmVDaGFubmVscyAmJiBzPy5zdGF0ZSA9PT0gJ2luLXByb2dyZXNzJylcbiAgICApO1xuICAgIHRoaXMuc3Vic2NyaXB0aW9ucy5wdXNoKFxuICAgICAgdGhpcy5jdXN0b21UZW1wbGF0ZXNTZXJ2aWNlLmNoYW5uZWxQcmV2aWV3VGVtcGxhdGUkLnN1YnNjcmliZShcbiAgICAgICAgKHRlbXBsYXRlKSA9PiAodGhpcy5jdXN0b21DaGFubmVsUHJldmlld1RlbXBsYXRlID0gdGVtcGxhdGUpXG4gICAgICApXG4gICAgKTtcbiAgfVxuXG4gIG5nT25EZXN0cm95KCk6IHZvaWQge1xuICAgIHRoaXMuc3Vic2NyaXB0aW9ucy5mb3JFYWNoKChzKSA9PiBzLnVuc3Vic2NyaWJlKCkpO1xuICB9XG5cbiAgYXN5bmMgbG9hZE1vcmVDaGFubmVscygpIHtcbiAgICB0aGlzLmlzTG9hZGluZ01vcmVDaGFubmVscyA9IHRydWU7XG4gICAgYXdhaXQgdGhpcy5jaGFubmVsU2VydmljZS5sb2FkTW9yZUNoYW5uZWxzKCk7XG4gICAgdGhpcy5pc0xvYWRpbmdNb3JlQ2hhbm5lbHMgPSBmYWxzZTtcbiAgfVxuXG4gIHRyYWNrQnlDaGFubmVsSWQoXzogbnVtYmVyLCBpdGVtOiBDaGFubmVsPERlZmF1bHRTdHJlYW1DaGF0R2VuZXJpY3M+KSB7XG4gICAgcmV0dXJuIGl0ZW0uY2lkO1xuICB9XG59XG4iLCI8ZGl2XG4gICNjb250YWluZXJcbiAgZGF0YS10ZXN0aWQ9XCJjaGFubmVsLWxpc3QtY29udGFpbmVyXCJcbiAgY2xhc3M9XCJzdHItY2hhdCBzdHItY2hhdC1hbmd1bGFyX19jaGFubmVsLWxpc3Qgc3RyLWNoYXRfX2NoYW5uZWwtbGlzdCBzdHItY2hhdC1jaGFubmVsLWxpc3QgbWVzc2FnaW5nIHN0ci1jaGF0X190aGVtZS17e1xuICAgIHRoZW1lJCB8IGFzeW5jXG4gIH19XCJcbj5cbiAgPGRpdlxuICAgICpuZ0lmPVwiXG4gICAgICAoaXNFcnJvciQgfCBhc3luYykgPT09IGZhbHNlICYmIChpc0luaXRpYWxpemluZyQgfCBhc3luYykgPT09IGZhbHNlO1xuICAgICAgZWxzZSBzdGF0dXNJbmRpY2F0b3JcbiAgICBcIlxuICAgIGNsYXNzPVwic3RyLWNoYXRfX2NoYW5uZWwtbGlzdC1tZXNzZW5nZXJcIlxuICA+XG4gICAgPGRpdiBjbGFzcz1cInN0ci1jaGF0X19jaGFubmVsLWxpc3QtbWVzc2VuZ2VyX19tYWluXCI+XG4gICAgICA8bmctY29udGVudCBzZWxlY3Q9XCJbY2hhbm5lbC1saXN0LXRvcF1cIj48L25nLWNvbnRlbnQ+XG4gICAgICA8ZGl2XG4gICAgICAgICpuZ0lmPVwiIShjaGFubmVscyQgfCBhc3luYyk/Lmxlbmd0aFwiXG4gICAgICAgIGNsYXNzPVwic3RyLWNoYXRfX2NoYW5uZWwtbGlzdC1lbXB0eVwiXG4gICAgICA+XG4gICAgICAgIDxzdHJlYW0taWNvbiBpY29uPVwiY2hhdC1idWJibGVcIj48L3N0cmVhbS1pY29uPlxuICAgICAgICA8cCBkYXRhLXRlc3RpZD1cImVtcHR5LWNoYW5uZWwtbGlzdC1pbmRpY2F0b3JcIj5cbiAgICAgICAgICB7eyBcInN0cmVhbUNoYXQuWW91IGhhdmUgbm8gY2hhbm5lbHMgY3VycmVudGx5XCIgfCB0cmFuc2xhdGUgfX1cbiAgICAgICAgPC9wPlxuICAgICAgPC9kaXY+XG4gICAgICA8cFxuICAgICAgICAqbmdJZj1cIiEoY2hhbm5lbHMkIHwgYXN5bmMpPy5sZW5ndGhcIlxuICAgICAgICBjbGFzcz1cInN0ci1jaGF0X19jaGFubmVsLWxpc3QtZW1wdHktdjFcIlxuICAgICAgICBkYXRhLXRlc3RpZD1cImVtcHR5LWNoYW5uZWwtbGlzdC1pbmRpY2F0b3JcIlxuICAgICAgPlxuICAgICAgICB7eyBcInN0cmVhbUNoYXQuWW91IGhhdmUgbm8gY2hhbm5lbHMgY3VycmVudGx5XCIgfCB0cmFuc2xhdGUgfX1cbiAgICAgIDwvcD5cbiAgICAgIDxzdHJlYW0tcGFnaW5hdGVkLWxpc3RcbiAgICAgICAgW2l0ZW1zXT1cIihjaGFubmVscyQgfCBhc3luYykgPz8gW11cIlxuICAgICAgICBbaGFzTW9yZV09XCIoaGFzTW9yZUNoYW5uZWxzJCB8IGFzeW5jKSA/PyBmYWxzZVwiXG4gICAgICAgIFtpc0xvYWRpbmddPVwiaXNMb2FkaW5nTW9yZUNoYW5uZWxzXCJcbiAgICAgICAgKGxvYWRNb3JlKT1cImxvYWRNb3JlQ2hhbm5lbHMoKVwiXG4gICAgICA+XG4gICAgICAgIDxuZy10ZW1wbGF0ZSBsZXQtY2hhbm5lbD1cIml0ZW1cIj5cbiAgICAgICAgICA8bmctdGVtcGxhdGUgI2RlZmF1bHRUZW1wbGF0ZSBsZXQtY2hhbm5lbElucHV0PVwiY2hhbm5lbFwiPlxuICAgICAgICAgICAgPHN0cmVhbS1jaGFubmVsLXByZXZpZXdcbiAgICAgICAgICAgICAgZGF0YS10ZXN0Y2xhc3M9XCJjaGFubmVsLXByZXZpZXdcIlxuICAgICAgICAgICAgICBbY2hhbm5lbF09XCJjaGFubmVsSW5wdXRcIlxuICAgICAgICAgICAgPjwvc3RyZWFtLWNoYW5uZWwtcHJldmlldz5cbiAgICAgICAgICA8L25nLXRlbXBsYXRlPlxuICAgICAgICAgIDxkaXY+XG4gICAgICAgICAgICA8bmctY29udGFpbmVyXG4gICAgICAgICAgICAgICpuZ1RlbXBsYXRlT3V0bGV0PVwiXG4gICAgICAgICAgICAgICAgY3VzdG9tQ2hhbm5lbFByZXZpZXdUZW1wbGF0ZSB8fCBkZWZhdWx0VGVtcGxhdGU7XG4gICAgICAgICAgICAgICAgY29udGV4dDogeyBjaGFubmVsOiBjaGFubmVsIH1cbiAgICAgICAgICAgICAgXCJcbiAgICAgICAgICAgID48L25nLWNvbnRhaW5lcj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cbiAgICAgIDwvc3RyZWFtLXBhZ2luYXRlZC1saXN0PlxuICAgICAgPG5nLWNvbnRlbnQgc2VsZWN0PVwiW2NoYW5uZWwtbGlzdC1ib3R0b21dXCI+PC9uZy1jb250ZW50PlxuICAgIDwvZGl2PlxuICA8L2Rpdj5cbjwvZGl2PlxuXG48bmctdGVtcGxhdGUgI3N0YXR1c0luZGljYXRvcj5cbiAgPG5nLWNvbnRhaW5lciAqbmdJZj1cImlzRXJyb3IkIHwgYXN5bmNcIj5cbiAgICA8bmctY29udGFpbmVyICpuZ1RlbXBsYXRlT3V0bGV0PVwiY2hhdERvd25cIj48L25nLWNvbnRhaW5lcj5cbiAgPC9uZy1jb250YWluZXI+XG4gIDxuZy1jb250YWluZXIgKm5nSWY9XCJpc0luaXRpYWxpemluZyQgfCBhc3luY1wiPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJsb2FkaW5nQ2hhbm5lbHNcIj48L25nLWNvbnRhaW5lcj5cbiAgPC9uZy1jb250YWluZXI+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2NoYXREb3duPlxuICA8ZGl2IGRhdGEtdGVzdGlkPVwiY2hhdGRvd24tY29udGFpbmVyXCIgY2xhc3M9XCJzdHItY2hhdF9fZG93blwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJsb2FkaW5nQ2hhbm5lbHNcIj48L25nLWNvbnRhaW5lcj5cbiAgPC9kaXY+XG48L25nLXRlbXBsYXRlPlxuXG48bmctdGVtcGxhdGUgI2xvYWRpbmdDaGFubmVscz5cbiAgPGRpdlxuICAgIGRhdGEtdGVzdGlkPVwibG9hZGluZy1pbmRpY2F0b3ItZnVsbC1zaXplXCJcbiAgICBjbGFzcz1cInN0ci1jaGF0X19sb2FkaW5nLWNoYW5uZWxzXCJcbiAgPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJsb2FkaW5nQ2hhbm5lbFwiPjwvbmctY29udGFpbmVyPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJsb2FkaW5nQ2hhbm5lbFwiPjwvbmctY29udGFpbmVyPlxuICAgIDxuZy1jb250YWluZXIgKm5nVGVtcGxhdGVPdXRsZXQ9XCJsb2FkaW5nQ2hhbm5lbFwiPjwvbmctY29udGFpbmVyPlxuICA8L2Rpdj5cbjwvbmctdGVtcGxhdGU+XG5cbjxuZy10ZW1wbGF0ZSAjbG9hZGluZ0NoYW5uZWw+XG4gIDxkaXZcbiAgICBjbGFzcz1cInN0ci1jaGF0X19sb2FkaW5nLWNoYW5uZWxzLWl0ZW0gc3RyLWNoYXRfX2NoYW5uZWwtcHJldmlldy1sb2FkaW5nXCJcbiAgPlxuICAgIDxkaXYgY2xhc3M9XCJzdHItY2hhdF9fbG9hZGluZy1jaGFubmVscy1hdmF0YXJcIj48L2Rpdj5cbiAgICA8ZGl2XG4gICAgICBjbGFzcz1cInN0ci1jaGF0X19sb2FkaW5nLWNoYW5uZWxzLW1ldGEgc3RyLWNoYXRfX2NoYW5uZWwtcHJldmlldy1lbmQtbG9hZGluZ1wiXG4gICAgPlxuICAgICAgPGRpdiBjbGFzcz1cInN0ci1jaGF0X19sb2FkaW5nLWNoYW5uZWxzLXVzZXJuYW1lXCI+PC9kaXY+XG4gICAgICA8ZGl2IGNsYXNzPVwic3RyLWNoYXRfX2xvYWRpbmctY2hhbm5lbHMtc3RhdHVzXCI+PC9kaXY+XG4gICAgPC9kaXY+XG4gIDwvZGl2PlxuPC9uZy10ZW1wbGF0ZT5cbiJdfQ==

package/fesm2015/stream-chat-angular.mjs

@@ -20,7 +20,7 @@ import transliterate from '@stream-io/transliterate';
 import * as i8$1 from 'angular-mentions';
 import { MentionModule } from 'angular-mentions';
 
-const version = '5.2.0';
+const version = '5.3.1';
 
 /**
  * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -4175,6 +4175,96 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 type: Input
             }] } });
 
+/**
+ * The `PaginatedListComponent` is a utility element that can display a list of any items. It uses infinite scrolls to load more elements. Providing the data to display, is the responsibility of the parent component.
+ */
+class PaginatedListComponent {
+    constructor(ngZone, cdRef) {
+        this.ngZone = ngZone;
+        this.cdRef = cdRef;
+        /**
+         * The items to display
+         */
+        this.items = [];
+        /**
+         * If `true`, the loading indicator will be displayed
+         */
+        this.isLoading = false;
+        /**
+         * If `false` the component won't ask for more data vua the `loadMore` output
+         */
+        this.hasMore = false;
+        /**
+         * The `trackBy` to use with the `NgFor` directive
+         * @param i
+         * @returns the track by id
+         */
+        this.trackBy = (i) => i;
+        /**
+         * The component will signal via this output when more items should be fetched
+         *
+         * The new items should be appended to the `items` array
+         */
+        this.loadMore = new EventEmitter();
+        this.isScrollable = false;
+        this.isAtBottom = false;
+    }
+    ngAfterViewInit() {
+        this.ngZone.runOutsideAngular(() => {
+            var _a, _b;
+            (_b = (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', () => this.scrolled());
+        });
+    }
+    scrolled() {
+        if (!this.hasMore) {
+            return;
+        }
+        const isScrollable = this.scrollContainer.nativeElement.scrollHeight >
+            this.scrollContainer.nativeElement.clientHeight;
+        if (this.isScrollable !== isScrollable) {
+            this.ngZone.run(() => {
+                this.isScrollable = isScrollable;
+                this.cdRef.detectChanges();
+            });
+        }
+        const isAtBottom = Math.ceil(this.scrollContainer.nativeElement.scrollTop) +
+            this.scrollContainer.nativeElement.clientHeight +
+            1 >=
+            this.scrollContainer.nativeElement.scrollHeight;
+        if (this.isAtBottom !== isAtBottom) {
+            this.ngZone.run(() => {
+                this.isAtBottom = isAtBottom;
+                if (this.isAtBottom && !this.isLoading) {
+                    this.loadMore.emit();
+                }
+                this.cdRef.detectChanges();
+            });
+        }
+    }
+}
+PaginatedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+PaginatedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: { items: "items", isLoading: "isLoading", hasMore: "hasMore", trackBy: "trackBy" }, outputs: { loadMore: "loadMore" }, queries: [{ propertyName: "itemTempalteRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  ></stream-loading-indicator-placeholder>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'stream-paginated-list', template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  ></stream-loading-indicator-placeholder>\n</div>\n" }]
+        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], hasMore: [{
+                type: Input
+            }], trackBy: [{
+                type: Input
+            }], itemTempalteRef: [{
+                type: ContentChild,
+                args: [TemplateRef]
+            }], loadMore: [{
+                type: Output
+            }], scrollContainer: [{
+                type: ViewChild,
+                args: ['container']
+            }] } });
+
 /**
  * The `ChannelList` component renders the list of channels.
  */
@@ -4207,14 +4297,11 @@ class ChannelListComponent {
     }
 }
 ChannelListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: ChannelListComponent, selector: "stream-channel-list", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  class=\"str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\n        <ng-template #defaultTemplate let-channelInput=\"channel\">\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channelInput\"\n          ></stream-channel-preview>\n        </ng-template>\n        <div>\n          <ng-container\n            *ngTemplateOutlet=\"\n              customChannelPreviewTemplate || defaultTemplate;\n              context: { channel: channel }\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        data-testid=\"load-more\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button str-chat__cta-button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n          ></ng-template>\n        </button>\n      </div>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
+ChannelListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\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            ></stream-channel-preview>\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\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\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { kind: "component", type: IconComponent, selector: "stream-icon", inputs: ["icon"] }, { kind: "component", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: ["items", "isLoading", "hasMore", "trackBy"], outputs: ["loadMore"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", 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__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n>\n  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <ng-container\n        *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n      >\n        <ng-template #defaultTemplate let-channelInput=\"channel\">\n          <stream-channel-preview\n            data-testclass=\"channel-preview\"\n            [channel]=\"channelInput\"\n          ></stream-channel-preview>\n        </ng-template>\n        <div>\n          <ng-container\n            *ngTemplateOutlet=\"\n              customChannelPreviewTemplate || defaultTemplate;\n              context: { channel: channel }\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        data-testid=\"load-more\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n      >\n        <button\n          class=\"str-chat__load-more-button__button str-chat__cta-button\"\n          data-testid=\"load-more-button\"\n          [disabled]=\"isLoadingMoreChannels\"\n        >\n          <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n            \"Load more\" | translate\n          }}</span>\n          <ng-template #loadingIndicator\n            ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n          ></ng-template>\n        </button>\n      </div>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n  <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\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: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: ThemeService }]; }, propDecorators: { container: [{
-                type: ViewChild,
-                args: ['container']
-            }] } });
+            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  <div\n    *ngIf=\"\n      (isError$ | async) === false && (isInitializing$ | async) === false;\n      else statusIndicator\n    \"\n    class=\"str-chat__channel-list-messenger\"\n  >\n    <div class=\"str-chat__channel-list-messenger__main\">\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty\"\n      >\n        <stream-icon icon=\"chat-bubble\"></stream-icon>\n        <p data-testid=\"empty-channel-list-indicator\">\n          {{ \"streamChat.You have no channels currently\" | translate }}\n        </p>\n      </div>\n      <p\n        *ngIf=\"!(channels$ | async)?.length\"\n        class=\"str-chat__channel-list-empty-v1\"\n        data-testid=\"empty-channel-list-indicator\"\n      >\n        {{ \"streamChat.You have no channels currently\" | translate }}\n      </p>\n      <stream-paginated-list\n        [items]=\"(channels$ | async) ?? []\"\n        [hasMore]=\"(hasMoreChannels$ | async) ?? false\"\n        [isLoading]=\"isLoadingMoreChannels\"\n        (loadMore)=\"loadMoreChannels()\"\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            ></stream-channel-preview>\n          </ng-template>\n          <div>\n            <ng-container\n              *ngTemplateOutlet=\"\n                customChannelPreviewTemplate || defaultTemplate;\n                context: { channel: channel }\n              \"\n            ></ng-container>\n          </div>\n        </ng-template>\n      </stream-paginated-list>\n      <ng-content select=\"[channel-list-bottom]\"></ng-content>\n    </div>\n  </div>\n</div>\n\n<ng-template #statusIndicator>\n  <ng-container *ngIf=\"isError$ | async\">\n    <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n  </ng-container>\n  <ng-container *ngIf=\"isInitializing$ | async\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n  <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n    <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n  </div>\n</ng-template>\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\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\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: function () { return [{ type: ChannelService }, { type: CustomTemplatesService }, { type: ThemeService }]; } });
 
 /**
  * This component can be used to visualize the wave bar of a voice recording
@@ -4695,96 +4782,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
                 args: ['modalContent', { static: true }]
             }] } });
 
-/**
- * The `PaginatedListComponent` is a utility element that can display a list of any items. It uses infinite scrolls to load more elements. Providing the data to display, is the responsibility of the parent component.
- */
-class PaginatedListComponent {
-    constructor(ngZone, cdRef) {
-        this.ngZone = ngZone;
-        this.cdRef = cdRef;
-        /**
-         * The items to display
-         */
-        this.items = [];
-        /**
-         * If `true`, the loading indicator will be displayed
-         */
-        this.isLoading = false;
-        /**
-         * If `false` the component won't ask for more data vua the `loadMore` output
-         */
-        this.hasMore = false;
-        /**
-         * The `trackBy` to use with the `NgFor` directive
-         * @param i
-         * @returns the track by id
-         */
-        this.trackBy = (i) => i;
-        /**
-         * The component will signal via this output when more items should be fetched
-         *
-         * The new items should be appended to the `items` array
-         */
-        this.loadMore = new EventEmitter();
-        this.isScrollable = false;
-        this.isAtBottom = false;
-    }
-    ngAfterViewInit() {
-        this.ngZone.runOutsideAngular(() => {
-            var _a, _b;
-            (_b = (_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) === null || _b === void 0 ? void 0 : _b.addEventListener('scroll', () => this.scrolled());
-        });
-    }
-    scrolled() {
-        if (!this.hasMore) {
-            return;
-        }
-        const isScrollable = this.scrollContainer.nativeElement.scrollHeight >
-            this.scrollContainer.nativeElement.clientHeight;
-        if (this.isScrollable !== isScrollable) {
-            this.ngZone.run(() => {
-                this.isScrollable = isScrollable;
-                this.cdRef.detectChanges();
-            });
-        }
-        const isAtBottom = Math.ceil(this.scrollContainer.nativeElement.scrollTop) +
-            this.scrollContainer.nativeElement.clientHeight +
-            1 >=
-            this.scrollContainer.nativeElement.scrollHeight;
-        if (this.isAtBottom !== isAtBottom) {
-            this.ngZone.run(() => {
-                this.isAtBottom = isAtBottom;
-                if (this.isAtBottom && !this.isLoading) {
-                    this.loadMore.emit();
-                }
-                this.cdRef.detectChanges();
-            });
-        }
-    }
-}
-PaginatedListComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, deps: [{ token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-PaginatedListComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", type: PaginatedListComponent, selector: "stream-paginated-list", inputs: { items: "items", isLoading: "isLoading", hasMore: "hasMore", trackBy: "trackBy" }, outputs: { loadMore: "loadMore" }, queries: [{ propertyName: "itemTempalteRef", first: true, predicate: TemplateRef, descendants: true }], viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  ></stream-loading-indicator-placeholder>\n</div>\n", dependencies: [{ kind: "directive", type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder" }, { kind: "pipe", type: i10.TranslatePipe, name: "translate" }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PaginatedListComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'stream-paginated-list', template: "<div class=\"stream-chat__paginated-list\" #container>\n  <div\n    data-testid=\"item\"\n    class=\"stream-chat__paginated-list-item\"\n    *ngFor=\"let item of items; let index = index; trackBy: trackBy\"\n  >\n    <ng-template\n      *ngIf=\"itemTempalteRef\"\n      [ngTemplateOutlet]=\"itemTempalteRef\"\n      [ngTemplateOutletContext]=\"{ item: item, index: index }\"\n    ></ng-template>\n  </div>\n  <button\n    *ngIf=\"hasMore && !isScrollable\"\n    class=\"str-chat__load-more-button__button str-chat__cta-button\"\n    data-testid=\"load-more-button\"\n    [disabled]=\"isLoading\"\n    (click)=\"loadMore.emit()\"\n    (keyup.enter)=\"loadMore.emit()\"\n  >\n    <span>{{ \"Load more\" | translate }}</span>\n  </button>\n  <stream-loading-indicator-placeholder\n    data-testid=\"loading-indicator\"\n    *ngIf=\"isLoading\"\n  ></stream-loading-indicator-placeholder>\n</div>\n" }]
-        }], ctorParameters: function () { return [{ type: i0.NgZone }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { items: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], hasMore: [{
-                type: Input
-            }], trackBy: [{
-                type: Input
-            }], itemTempalteRef: [{
-                type: ContentChild,
-                args: [TemplateRef]
-            }], loadMore: [{
-                type: Output
-            }], scrollContainer: [{
-                type: ViewChild,
-                args: ['container']
-            }] } });
-
 /**
  * The `UserListComponent` can display a list of Stream users with pagination
  */