stream-chat-angular 4.22.0 → 4.23.1

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.22.0";
+export declare const version = "4.23.1";

package/bundles/stream-chat-angular.umd.js

@@ -355,7 +355,7 @@
         return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
     }
 
-    var version = '4.22.0';
+    var version = '4.23.1';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -3021,6 +3021,30 @@
              * For code examples to the different customizations see our [customizations example application](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example), specifically the [AppComponent](https://github.com/GetStream/stream-chat-angular/tree/master/projects/customizations-example/src/app) (see [README](https://github.com/GetStream/stream-chat-angular/blob/master/README.md#customization-examples) for instructions on how to start the application).
              */
             this.customAttachmentUploadTemplate$ = new rxjs.BehaviorSubject(undefined);
+            /**
+             * The template that can be used to override how a single image attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+             */
+            this.imageAttachmentTemplate$ = new rxjs.BehaviorSubject(undefined);
+            /**
+             * The template that can be used to override how a video attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+             */
+            this.videoAttachmentTemplate$ = new rxjs.BehaviorSubject(undefined);
+            /**
+             * The template that can be used to override how image gallery is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+             */
+            this.galleryAttachmentTemplate$ = new rxjs.BehaviorSubject(undefined);
+            /**
+             * The template that can be used to override how a file attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+             */
+            this.fileAttachmentTemplate$ = new rxjs.BehaviorSubject(undefined);
+            /**
+             * The template that can be used to override how a card attachment is displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+             */
+            this.cardAttachmentTemplate$ = new rxjs.BehaviorSubject(undefined);
+            /**
+             * The template that can be used to override how attachment actions are displayed inside the [attachment list](../components/AttachmentListComponent.mdx)
+             */
+            this.attachmentActionsTemplate$ = new rxjs.BehaviorSubject(undefined);
         }
         return CustomTemplatesService;
     }());
@@ -3448,8 +3472,18 @@
             this.imagesToView = [];
             this.imagesToViewCurrentIndex = 0;
             this.attachmentConfigurations = new Map();
+            this.subscriptions = [];
             this.themeVersion = themeService.themeVersion;
         }
+        AttachmentListComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            this.subscriptions.push(this.customTemplatesService.imageAttachmentTemplate$.subscribe(function (t) { return (_this.imageAttachmentTemplate = t); }));
+            this.subscriptions.push(this.customTemplatesService.galleryAttachmentTemplate$.subscribe(function (t) { return (_this.galleryAttachmentTemplate = t); }));
+            this.subscriptions.push(this.customTemplatesService.videoAttachmentTemplate$.subscribe(function (t) { return (_this.videoAttachmentTemplate = t); }));
+            this.subscriptions.push(this.customTemplatesService.fileAttachmentTemplate$.subscribe(function (t) { return (_this.fileAttachmentTemplate = t); }));
+            this.subscriptions.push(this.customTemplatesService.cardAttachmentTemplate$.subscribe(function (t) { return (_this.cardAttachmentTemplate = t); }));
+            this.subscriptions.push(this.customTemplatesService.attachmentActionsTemplate$.subscribe(function (t) { return (_this.attachmentActionsTemplate = t); }));
+        };
         AttachmentListComponent.prototype.ngOnChanges = function (changes) {
             var _a;
             var _this = this;
@@ -3465,6 +3499,9 @@
                 }
             }
         };
+        AttachmentListComponent.prototype.ngOnDestroy = function () {
+            this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
+        };
         AttachmentListComponent.prototype.trackByUrl = function (_, attachment) {
             return (attachment.image_url ||
                 attachment.img_url ||
@@ -3539,6 +3576,9 @@
         AttachmentListComponent.prototype.trackByImageUrl = function (_, item) {
             return item.image_url || item.img_url || item.thumb_url;
         };
+        AttachmentListComponent.prototype.getAttachmentContext = function (attachment) {
+            return { attachment: attachment };
+        };
         AttachmentListComponent.prototype.getImageAttachmentConfiguration = function (attachment, type, element) {
             var existingConfiguration = this.attachmentConfigurations.get(attachment);
             if (existingConfiguration) {
@@ -3603,7 +3643,7 @@
         return AttachmentListComponent;
     }());
     AttachmentListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, outputs: { imageModalStateChange: "imageModalStateChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <img\n        #imgElement\n        *ngIf=\"isImage(attachment)\"\n        class=\"str-chat__message-attachment--img\"\n        data-testclass=\"image\"\n        [src]=\"\n          getImageAttachmentConfiguration(attachment, 'single', imgElement).url\n        \"\n        [alt]=\"attachment?.fallback\"\n        (click)=\"openImageModal([attachment])\"\n        (keyup.enter)=\"openImageModal([attachment])\"\n        [style.--original-height]=\"\n          getImageAttachmentConfiguration(attachment, 'single', imgElement)\n            .originalHeight\n        \"\n        [style.--original-width]=\"\n          getImageAttachmentConfiguration(attachment, 'single', imgElement)\n            .originalWidth\n        \"\n        [ngStyle]=\"{\n          height: getImageAttachmentConfiguration(\n            attachment,\n            'single',\n            imgElement\n          ).height,\n          width: getImageAttachmentConfiguration(\n            attachment,\n            'single',\n            imgElement\n          ).width\n        }\"\n      />\n      <div\n        class=\"str-chat__gallery\"\n        data-testid=\"image-gallery\"\n        *ngIf=\"isGallery(attachment)\"\n        [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n        [class.str-chat__gallery-two-rows]=\"(attachment?.images)!.length > 2\"\n      >\n        <ng-container\n          *ngFor=\"\n            let galleryImage of attachment.images;\n            let index = index;\n            let isLast = last;\n            trackBy: trackByImageUrl\n          \"\n        >\n          <button\n            *ngIf=\"index < 3 || (index === 3 && isLast)\"\n            class=\"str-chat__gallery-image\"\n            data-testclass=\"gallery-image\"\n            (click)=\"openImageModal(attachment.images!, index)\"\n            (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n            [class.str-chat__message-attachment--svg-image]=\"\n              isSvg(galleryImage)\n            \"\n          >\n            <img\n              #imgElement\n              [src]=\"\n                getImageAttachmentConfiguration(\n                  galleryImage,\n                  'gallery',\n                  imgElement\n                ).url\n              \"\n              [alt]=\"galleryImage.fallback\"\n              [style.--original-height]=\"\n                getImageAttachmentConfiguration(\n                  galleryImage,\n                  'gallery',\n                  imgElement\n                ).originalHeight\n              \"\n              [style.--original-width]=\"\n                getImageAttachmentConfiguration(\n                  galleryImage,\n                  'gallery',\n                  imgElement\n                ).originalWidth\n              \"\n              [ngStyle]=\"{\n                height: getImageAttachmentConfiguration(\n                  galleryImage,\n                  'gallery',\n                  imgElement\n                ).height,\n                width: getImageAttachmentConfiguration(\n                  galleryImage,\n                  'gallery',\n                  imgElement\n                ).width\n              }\"\n            />\n          </button>\n          <button\n            #element\n            *ngIf=\"index === 3 && !isLast\"\n            class=\"str-chat__gallery-placeholder\"\n            data-testclass=\"gallery-image\"\n            data-testid=\"more-image-button\"\n            (click)=\"openImageModal(attachment.images!, index)\"\n            (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n            [class.str-chat__message-attachment--svg-image]=\"\n              isSvg(galleryImage)\n            \"\n            [style.--original-height]=\"\n              getImageAttachmentConfiguration(galleryImage, 'gallery', element)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getImageAttachmentConfiguration(galleryImage, 'gallery', element)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              'background-image':\n                'url(' +\n                getImageAttachmentConfiguration(\n                  galleryImage,\n                  'gallery',\n                  element\n                ).url +\n                ')',\n              height: getImageAttachmentConfiguration(\n                galleryImage,\n                'gallery',\n                element\n              ).height,\n              width: getImageAttachmentConfiguration(\n                galleryImage,\n                'gallery',\n                element\n              ).width\n            }\"\n          >\n            <p\n              [innerHTML]=\"\n                'streamChat.{{ imageCount }} more'\n                  | translate: { imageCount: attachment!.images!.length - 4 }\n              \"\n            ></p>\n          </button>\n        </ng-container>\n      </div>\n      <div\n        class=\"str-chat__player-wrapper\"\n        *ngIf=\"isVideo(attachment)\"\n        data-testclass=\"video-attachment-parent\"\n        [style.--original-height]=\"\n          getVideoAttachmentConfiguration(attachment, videoElement)\n            .originalHeight\n        \"\n        [style.--original-width]=\"\n          getVideoAttachmentConfiguration(attachment, videoElement)\n            .originalWidth\n        \"\n        [ngStyle]=\"{\n          height: getVideoAttachmentConfiguration(attachment, videoElement)\n            .height,\n          width: getVideoAttachmentConfiguration(attachment, videoElement).width\n        }\"\n      >\n        <video\n          #videoElement\n          class=\"str-chat__video-angular\"\n          controls\n          data-testclass=\"video-attachment\"\n          [src]=\"getVideoAttachmentConfiguration(attachment, videoElement).url\"\n          [poster]=\"\n            getVideoAttachmentConfiguration(attachment, videoElement).thumbUrl\n          \"\n        ></video>\n      </div>\n      <a\n        *ngIf=\"isFile(attachment)\"\n        class=\"\n          str-chat__message-attachment-file--item\n          str-chat-angular__message-attachment-file-single\n        \"\n        style=\"cursor: pointer; text-decoration: none\"\n        data-testclass=\"file-link\"\n        href=\"{{ attachment.asset_url }}\"\n        target=\"_blank\"\n      >\n        <stream-icon-placeholder\n          *ngIf=\"themeVersion === '1'\"\n          icon=\"file\"\n          [size]=\"30\"\n        ></stream-icon-placeholder>\n        <stream-icon-placeholder\n          *ngIf=\"themeVersion === '2'\"\n          icon=\"unspecified-filetype\"\n          [size]=\"30\"\n        ></stream-icon-placeholder>\n        <div class=\"str-chat__message-attachment-file--item-text\">\n          <div class=\"str-chat__message-attachment-file--item-first-row\">\n            <div\n              data-testclass=\"file-title\"\n              class=\"str-chat__message-attachment-file--item-name\"\n            >\n              {{ attachment.title }}\n            </div>\n            <!-- Temporary disabled, will be fixed with this: https://github.com/GetStream/stream-chat-angular/issues/393  -->\n            <!-- <a\n              class=\"str-chat__message-attachment-file--item-download\"\n              data-testclass=\"file-link\"\n              download\n              href=\"{{ attachment.asset_url }}\"\n              target=\"_blank\"\n            >\n              <stream-icon-placeholder\n                class=\"str-chat__message-attachment-download-icon\"\n                icon=\"download\"\n              ></stream-icon-placeholder>\n            </a> -->\n          </div>\n          <span\n            class=\"str-chat__message-attachment-file--item-size\"\n            data-testclass=\"size\"\n            *ngIf=\"hasFileSize(attachment)\"\n            >{{ getFileSize(attachment) }}</span\n          >\n        </div>\n      </a>\n      <div\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n        class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n          attachment.type\n        }}\"\n      >\n        <div\n          *ngIf=\"attachmentConfiguration.url\"\n          class=\"str-chat__message-attachment-card--header\"\n        >\n          <img\n            data-testclass=\"card-img\"\n            alt=\"{{ attachmentConfiguration.url }}\"\n            src=\"{{ attachmentConfiguration.url }}\"\n            [ngStyle]=\"{\n              height: attachmentConfiguration.height,\n              width: attachmentConfiguration.width\n            }\"\n          />\n        </div>\n        <div class=\"str-chat__message-attachment-card--content\">\n          <div class=\"str-chat__message-attachment-card--flex\">\n            <div\n              *ngIf=\"attachment.title\"\n              data-testclass=\"card-title\"\n              class=\"str-chat__message-attachment-card--title\"\n            >\n              {{ attachment.title }}\n            </div>\n            <div\n              *ngIf=\"attachment.text\"\n              class=\"str-chat__message-attachment-card--text\"\n              data-testclass=\"card-text\"\n            >\n              {{ attachment.text }}\n            </div>\n            <a\n              class=\"str-chat__message-attachment-card--url\"\n              *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n              data-testclass=\"url-link\"\n              noopener\n              noreferrer\n              href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n              target=\"_blank\"\n            >\n              {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n            </a>\n          </div>\n        </div>\n      </div>\n      <div\n        class=\"str-chat__message-attachment-actions\"\n        *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n      >\n        <div class=\"str-chat__message-attachment-actions-form\">\n          <button\n            *ngFor=\"\n              let action of attachment.actions;\n              trackBy: trackByActionValue\n            \"\n            class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n              action.style\n            }}\"\n            data-testclass=\"attachment-action\"\n            (click)=\"sendAction(action)\"\n            (keyup.enter)=\"sendAction(action)\"\n          >\n            {{ action.text }}\n          </button>\n        </div>\n      </div>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <button\n      class=\"\n        stream-chat-angular__image-modal-stepper\n        str-chat__image-carousel-stepper\n      \"\n      [ngStyle]=\"{\n        visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-prev\"\n      type=\"button\"\n      (click)=\"stepImages(-1)\"\n      (keyup.enter)=\"stepImages(-1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n    </button>\n    <img\n      #imgElement\n      class=\"\n        stream-chat-angular__image-modal-image\n        str-chat__image-carousel-image\n      \"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <button\n      class=\"\n        stream-chat-angular__image-modal-stepper\n        str-chat__image-carousel-stepper\n      \"\n      type=\"button\"\n      [ngStyle]=\"{\n        visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-next\"\n      (click)=\"stepImages(1)\"\n      (keyup.enter)=\"stepImages(1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i8__namespace.TranslatePipe, "async": i7__namespace.AsyncPipe } });
+    AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, outputs: { imageModalStateChange: "imageModalStateChange" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n  <ng-container\n    *ngFor=\"let attachment of orderedAttachments; trackBy: trackByUrl\"\n  >\n    <div\n      data-testclass=\"attachment-container\"\n      class=\"str-chat__message-attachment str-chat__message-attachment--{{\n        attachment.type\n      }} str-chat__message-attachment-dynamic-size\"\n      [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n      [class.str-chat-angular__message-attachment-file-single]=\"\n        isFile(attachment)\n      \"\n      [class.str-chat__message-attachment-with-actions]=\"\n        attachment.actions && attachment.actions.length > 0\n      \"\n      [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n    >\n      <ng-container *ngIf=\"isImage(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            imageAttachmentTemplate || defaultImage;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultImage let-attachmentContext=\"attachment\">\n          <img\n            #imgElement\n            class=\"str-chat__message-attachment--img\"\n            data-testclass=\"image\"\n            [src]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).url\n            \"\n            [alt]=\"attachmentContext?.fallback\"\n            (click)=\"openImageModal([attachmentContext])\"\n            (keyup.enter)=\"openImageModal([attachmentContext])\"\n            [style.--original-height]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalHeight\n            \"\n            [style.--original-width]=\"\n              getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).height,\n              width: getImageAttachmentConfiguration(\n                attachmentContext,\n                'single',\n                imgElement\n              ).width\n            }\"\n          />\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isGallery(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            galleryAttachmentTemplate || defaultGallery;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultGallery let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__gallery\"\n            data-testid=\"image-gallery\"\n            [class.str-chat__gallery--square]=\"\n              (attachmentContext?.images)!.length > 3\n            \"\n            [class.str-chat__gallery-two-rows]=\"\n              (attachmentContext?.images)!.length > 2\n            \"\n          >\n            <ng-container\n              *ngFor=\"\n                let galleryImage of attachmentContext.images;\n                let index = index;\n                let isLast = last;\n                trackBy: trackByImageUrl\n              \"\n            >\n              <button\n                *ngIf=\"index < 3 || (index === 3 && isLast)\"\n                class=\"str-chat__gallery-image\"\n                data-testclass=\"gallery-image\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n              >\n                <img\n                  #imgElement\n                  [src]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).url\n                  \"\n                  [alt]=\"galleryImage.fallback\"\n                  [style.--original-height]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalHeight\n                  \"\n                  [style.--original-width]=\"\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).originalWidth\n                  \"\n                  [ngStyle]=\"{\n                    height: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).height,\n                    width: getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      imgElement\n                    ).width\n                  }\"\n                />\n              </button>\n              <button\n                #element\n                *ngIf=\"index === 3 && !isLast\"\n                class=\"str-chat__gallery-placeholder\"\n                data-testclass=\"gallery-image\"\n                data-testid=\"more-image-button\"\n                (click)=\"openImageModal(attachmentContext.images!, index)\"\n                (keyup.enter)=\"openImageModal(attachmentContext.images!, index)\"\n                [class.str-chat__message-attachment--svg-image]=\"\n                  isSvg(galleryImage)\n                \"\n                [style.--original-height]=\"\n                  getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalHeight\n                \"\n                [style.--original-width]=\"\n                  getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).originalWidth\n                \"\n                [ngStyle]=\"{\n                  'background-image':\n                    'url(' +\n                    getImageAttachmentConfiguration(\n                      galleryImage,\n                      'gallery',\n                      element\n                    ).url +\n                    ')',\n                  height: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).height,\n                  width: getImageAttachmentConfiguration(\n                    galleryImage,\n                    'gallery',\n                    element\n                  ).width\n                }\"\n              >\n                <p\n                  [innerHTML]=\"\n                    'streamChat.{{ imageCount }} more'\n                      | translate\n                        : { imageCount: attachmentContext!.images!.length - 4 }\n                  \"\n                ></p>\n              </button>\n            </ng-container>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isVideo(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            videoAttachmentTemplate || defaultVideo;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultVideo let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__player-wrapper\"\n            data-testclass=\"video-attachment-parent\"\n            [style.--original-height]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalHeight\n            \"\n            [style.--original-width]=\"\n              getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                .originalWidth\n            \"\n            [ngStyle]=\"{\n              height: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).height,\n              width: getVideoAttachmentConfiguration(\n                attachmentContext,\n                videoElement\n              ).width\n            }\"\n          >\n            <video\n              #videoElement\n              class=\"str-chat__video-angular\"\n              controls\n              data-testclass=\"video-attachment\"\n              [src]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .url\n              \"\n              [poster]=\"\n                getVideoAttachmentConfiguration(attachmentContext, videoElement)\n                  .thumbUrl\n              \"\n            ></video>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"isFile(attachment)\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            fileAttachmentTemplate || defaultFile;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultFile let-attachmentContext=\"attachment\">\n          <a\n            class=\"\n              str-chat__message-attachment-file--item\n              str-chat-angular__message-attachment-file-single\n            \"\n            style=\"cursor: pointer; text-decoration: none\"\n            data-testclass=\"file-link\"\n            href=\"{{ attachmentContext.asset_url }}\"\n            target=\"_blank\"\n          >\n            <stream-icon-placeholder\n              *ngIf=\"themeVersion === '1'\"\n              icon=\"file\"\n              [size]=\"30\"\n            ></stream-icon-placeholder>\n            <stream-icon-placeholder\n              *ngIf=\"themeVersion === '2'\"\n              icon=\"unspecified-filetype\"\n              [size]=\"30\"\n            ></stream-icon-placeholder>\n            <div class=\"str-chat__message-attachment-file--item-text\">\n              <div class=\"str-chat__message-attachment-file--item-first-row\">\n                <div\n                  data-testclass=\"file-title\"\n                  class=\"str-chat__message-attachment-file--item-name\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <!-- Temporary disabled, will be fixed with this: https://github.com/GetStream/stream-chat-angular/issues/393  -->\n                <!-- <a\n              class=\"str-chat__message-attachment-file--item-download\"\n              data-testclass=\"file-link\"\n              download\n              href=\"{{ attachment.asset_url }}\"\n              target=\"_blank\"\n            >\n              <stream-icon-placeholder\n                class=\"str-chat__message-attachment-download-icon\"\n                icon=\"download\"\n              ></stream-icon-placeholder>\n            </a> -->\n              </div>\n              <span\n                class=\"str-chat__message-attachment-file--item-size\"\n                data-testclass=\"size\"\n                *ngIf=\"hasFileSize(attachmentContext)\"\n                >{{ getFileSize(attachmentContext) }}</span\n              >\n            </div>\n          </a>\n        </ng-template>\n      </ng-container>\n      <ng-container\n        *ngIf=\"\n          isCard(attachment) &&\n          getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n        \"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            cardAttachmentTemplate || defaultCard;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultCard let-attachmentContext=\"attachment\">\n          <div\n            class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n              attachmentContext.type\n            }}\"\n          >\n            <div\n              *ngIf=\"attachmentConfiguration.url\"\n              class=\"str-chat__message-attachment-card--header\"\n            >\n              <img\n                data-testclass=\"card-img\"\n                alt=\"{{ attachmentConfiguration.url }}\"\n                src=\"{{ attachmentConfiguration.url }}\"\n                [ngStyle]=\"{\n                  height: attachmentConfiguration.height,\n                  width: attachmentConfiguration.width\n                }\"\n              />\n            </div>\n            <div class=\"str-chat__message-attachment-card--content\">\n              <div class=\"str-chat__message-attachment-card--flex\">\n                <div\n                  *ngIf=\"attachmentContext.title\"\n                  data-testclass=\"card-title\"\n                  class=\"str-chat__message-attachment-card--title\"\n                >\n                  {{ attachmentContext.title }}\n                </div>\n                <div\n                  *ngIf=\"attachmentContext.text\"\n                  class=\"str-chat__message-attachment-card--text\"\n                  data-testclass=\"card-text\"\n                >\n                  {{ attachmentContext.text }}\n                </div>\n                <a\n                  class=\"str-chat__message-attachment-card--url\"\n                  *ngIf=\"\n                    attachmentContext.title_link ||\n                    attachmentContext.og_scrape_url\n                  \"\n                  data-testclass=\"url-link\"\n                  noopener\n                  noreferrer\n                  href=\"{{\n                    attachmentContext.title_link ||\n                      attachmentContext.og_scrape_url\n                  }}\"\n                  target=\"_blank\"\n                >\n                  {{\n                    trimUrl(\n                      attachmentContext.title_link ||\n                        attachmentContext.og_scrape_url\n                    )\n                  }}\n                </a>\n              </div>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n      <ng-container *ngIf=\"attachment.actions && attachment.actions.length > 0\">\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentActionsTemplate || defaultActions;\n            context: getAttachmentContext(attachment)\n          \"\n        ></ng-container>\n        <ng-template #defaultActions let-attachmentContext=\"attachment\">\n          <div class=\"str-chat__message-attachment-actions\">\n            <div class=\"str-chat__message-attachment-actions-form\">\n              <button\n                *ngFor=\"\n                  let action of attachmentContext.actions;\n                  trackBy: trackByActionValue\n                \"\n                class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n                  action.style\n                }}\"\n                data-testclass=\"attachment-action\"\n                (click)=\"sendAction(action)\"\n                (keyup.enter)=\"sendAction(action)\"\n              >\n                {{ action.text }}\n              </button>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n  </ng-container>\n\n  <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        (customTemplatesService.modalTemplate$ | async) || defaultModal;\n        context: getModalContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\n    class=\"stream-chat-angular__image-modal-host\"\n    [isOpen]=\"isOpen\"\n    (isOpenChange)=\"isOpenChangeHandler($event)\"\n    [content]=\"content\"\n  >\n  </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n  <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n    <button\n      class=\"\n        stream-chat-angular__image-modal-stepper\n        str-chat__image-carousel-stepper\n      \"\n      [ngStyle]=\"{\n        visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-prev\"\n      type=\"button\"\n      (click)=\"stepImages(-1)\"\n      (keyup.enter)=\"stepImages(-1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n    </button>\n    <img\n      #imgElement\n      class=\"\n        stream-chat-angular__image-modal-image\n        str-chat__image-carousel-image\n      \"\n      data-testid=\"modal-image\"\n      [src]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).url\n      \"\n      [style.--original-height]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalHeight\n      \"\n      [style.--original-width]=\"\n        getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).originalWidth\n      \"\n      [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n      [ngStyle]=\"{\n        width: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).width,\n        height: getCarouselImageAttachmentConfiguration(\n          imagesToView[imagesToViewCurrentIndex],\n          imgElement\n        ).height\n      }\"\n    />\n    <button\n      class=\"\n        stream-chat-angular__image-modal-stepper\n        str-chat__image-carousel-stepper\n      \"\n      type=\"button\"\n      [ngStyle]=\"{\n        visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n      }\"\n      data-testid=\"image-modal-next\"\n      (click)=\"stepImages(1)\"\n      (keyup.enter)=\"stepImages(1)\"\n    >\n      <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n    </button>\n  </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], pipes: { "translate": i8__namespace.TranslatePipe, "async": i7__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4791,7 +4831,7 @@
         return ChannelListComponent;
     }());
     ChannelListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    ChannelListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelListComponent, selector: "stream-channel-list", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0__namespace, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  style=\"max-width: unset\"\n  class=\"str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n  [class.str-chat-channel-list--open]=\"(isOpen$ | async) === true\"\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      <div\n        class=\"str-chat__channel-list-empty\"\n        *ngIf=\"!(channels$ | async)?.length\"\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-content select=\"[channel-list-top]\"></ng-content>\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 (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customChannelPreviewTemplate || defaultTemplate;\n              context: getChannelPreviewContext(channel)\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n        data-testid=\"load-more\"\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 class=\"str-chat__down-main\">\n      <stream-icon-placeholder\n        icon=\"connection-error\"\n      ></stream-icon-placeholder>\n      <h1>{{ \"streamChat.Connection error\" | translate }}</h1>\n      <h3>\n        {{\n          \"streamChat.Error connecting to chat, refresh the page to try again.\"\n            | translate\n        }}\n      </h3>\n    </div>\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=\"\n        str-chat__loading-channels-meta str-chat__channel-preview-end-loading\n      \"\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", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7__namespace.AsyncPipe, "translate": i8__namespace.TranslatePipe } });
+    ChannelListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelListComponent, selector: "stream-channel-list", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0__namespace, template: "<div\n  #container\n  data-testid=\"channel-list-container\"\n  style=\"max-width: unset\"\n  class=\"str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n    theme$ | async\n  }}\"\n  [class.str-chat-channel-list--open]=\"(isOpen$ | async) === true\"\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\n      class=\"str-chat__channel-list-messenger__main\"\n      style=\"display: flex; flex-direction: column\"\n    >\n      <ng-content select=\"[channel-list-top]\"></ng-content>\n      <div\n        class=\"str-chat__channel-list-empty\"\n        *ngIf=\"!(channels$ | async)?.length\"\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 (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n          <ng-container\n            *ngTemplateOutlet=\"\n              customChannelPreviewTemplate || defaultTemplate;\n              context: getChannelPreviewContext(channel)\n            \"\n          ></ng-container>\n        </div>\n      </ng-container>\n      <div\n        *ngIf=\"hasMoreChannels$ | async\"\n        class=\"str-chat__load-more-button\"\n        (click)=\"loadMoreChannels()\"\n        (keyup.enter)=\"loadMoreChannels()\"\n        data-testid=\"load-more\"\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 class=\"str-chat__down-main\">\n      <stream-icon-placeholder\n        icon=\"connection-error\"\n      ></stream-icon-placeholder>\n      <h1>{{ \"streamChat.Connection error\" | translate }}</h1>\n      <h3>\n        {{\n          \"streamChat.Error connecting to chat, refresh the page to try again.\"\n            | translate\n        }}\n      </h3>\n    </div>\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=\"\n        str-chat__loading-channels-meta str-chat__channel-preview-end-loading\n      \"\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", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7__namespace.AsyncPipe, "translate": i8__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelListComponent, decorators: [{
                 type: i0.Component,
                 args: [{