stream-chat-angular 4.8.0 → 4.9.1

package/assets/version.d.ts

@@ -1 +1 @@
-export declare const version = "4.8.0";
+export declare const version = "4.9.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.8.0';
+    var version = '4.9.1';
 
     /**
      * The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
@@ -3452,7 +3452,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" }, 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      <div\n        *ngIf=\"isFile(attachment)\"\n        class=\"\n          str-chat__message-attachment-file--item\n          str-chat-angular__message-attachment-file-single\n        \"\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            <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      </div>\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: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i4__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" }, 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: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i4__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -4151,7 +4151,6 @@
         MessageActionsBoxComponent.prototype.ngOnChanges = function (changes) {
             var _this = this;
             if (changes.isMine || changes.enabledActions || changes.message) {
-                this.messageActionItems.forEach(function (i) { return (i.actionHandler = i.actionHandler.bind(_this, _this.message, _this.isMine)); });
                 this.visibleMessageActionItems = this.messageActionItems.filter(function (item) { return item.isVisible(_this.enabledActions, _this.isMine, _this.message); });
                 this.displayedActionsCount.emit(this.visibleMessageActionItems.length);
             }
@@ -4198,7 +4197,7 @@
         return MessageActionsBoxComponent;
     }());
     MessageActionsBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }, { token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular\"\n  [class.str-chat__message-actions-box--open]=\"true\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageActionItemTemplate || defaultMessageActionItem;\n          context: item\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler()\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\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=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button\n          class=\"str-chat__edit-message-cancel\"\n          translate\n          data-testid=\"cancel-button\"\n          (click)=\"modalClosed()\"\n        >\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          class=\"str-chat__edit-message-send\"\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
+    MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #actionBox\n  data-testid=\"action-box\"\n  class=\"str-chat__message-actions-box str-chat__message-actions-box-angular\"\n  [class.str-chat__message-actions-box--open]=\"true\"\n>\n  <ul class=\"str-chat__message-actions-list\">\n    <ng-container\n      *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n    >\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageActionItemTemplate || defaultMessageActionItem;\n          context: item\n        \"\n      ></ng-container>\n    </ng-container>\n  </ul>\n</div>\n\n<ng-template\n  #defaultMessageActionItem\n  let-actionName=\"actionName\"\n  let-actionHandler=\"actionHandler\"\n  let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n  <button\n    class=\"str-chat__message-actions-list-item-button\"\n    [attr.data-testid]=\"actionName + '-action'\"\n    (click)=\"actionHandler(message, isMine)\"\n  >\n    <li class=\"str-chat__message-actions-list-item\">\n      {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n    </li>\n  </button>\n</ng-template>\n\n<ng-container\n  *ngTemplateOutlet=\"\n    modalTemplate || defaultModal;\n    context: getEditModalContext()\n  \"\n></ng-container>\n\n<ng-template\n  #defaultModal\n  let-isOpen=\"isOpen\"\n  let-isOpenChangeHandler=\"isOpenChangeHandler\"\n  let-content=\"content\"\n>\n  <stream-modal\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=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n    <ng-template\n      #defaultInput\n      let-messageInput=\"message\"\n      let-messageUpdateHandler=\"messageUpdateHandler\"\n      let-sendMessage$Input=\"sendMessage$\"\n    >\n      <stream-message-input\n        [message]=\"messageInput\"\n        (messageUpdate)=\"messageUpdateHandler()\"\n        [sendMessage$]=\"sendMessage$Input\"\n      ></stream-message-input>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        messageInputTemplate || defaultInput;\n        context: getMessageInputContext()\n      \"\n    >\n    </ng-container>\n\n    <stream-notification-list></stream-notification-list>\n    <div\n      class=\"\n        str-chat__message-team-form-footer\n        str-chat__message-team-form-footer-angular\n      \"\n    >\n      <div class=\"str-chat__edit-message-form-options\">\n        <button\n          class=\"str-chat__edit-message-cancel\"\n          translate\n          data-testid=\"cancel-button\"\n          (click)=\"modalClosed()\"\n        >\n          streamChat.Cancel\n        </button>\n        <button\n          type=\"submit\"\n          translate\n          class=\"str-chat__edit-message-send\"\n          data-testid=\"send-button\"\n          (click)=\"sendClicked()\"\n          (keyup.enter)=\"sendClicked()\"\n        >\n          streamChat.Send\n        </button>\n      </div>\n    </div>\n  </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
                 type: i0.Component,
                 args: [{
@@ -5916,7 +5915,7 @@
         return MessageListComponent;
     }());
     MessageListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
-    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul class=\"str-chat__ul\">\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread'\"\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <li\n        tabindex=\"0\"\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n        id=\"{{ message.id }}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: message }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate: { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate: { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    data-testid=\"scroll-to-latest\"\n    *ngIf=\"isUserScrolled\"\n    class=\"\n      str-chat__message-notification-scroll-to-latest\n      str-chat__message-notification-scroll-to-latest-right\n      str-chat__circle-fab\n    \"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n        str-chat__jump-to-latest-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: getMessageContext(message)\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i4__namespace.AsyncPipe } });
+    MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n  #scrollContainer\n  data-testid=\"scroll-container\"\n  class=\"str-chat__list\"\n  (scroll)=\"scrolled()\"\n>\n  <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n    <ul class=\"str-chat__ul\" style=\"-webkit-transform: translate3d(0, 0, 0)\">\n      <li\n        #parentMessageElement\n        *ngIf=\"mode === 'thread'\"\n        data-testid=\"parent-message\"\n        class=\"str-chat__parent-message-li\"\n        style=\"-webkit-transform: translate3d(0, 0, 0)\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: parentMessage }\n          \"\n        ></ng-container>\n        <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n          {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n          replies' | translate:replyCountParam)}}\n        </div>\n      </li>\n      <li\n        tabindex=\"0\"\n        data-testclass=\"message\"\n        *ngFor=\"\n          let message of messages$ | async;\n          let i = index;\n          trackBy: trackByMessageId\n        \"\n        class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n        id=\"{{ message.id }}\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageTemplateContainer;\n            context: { message: message }\n          \"\n        ></ng-container>\n      </li>\n    </ul>\n    <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n      <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n      <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n        <div\n          *ngIf=\"users.length > 0\"\n          data-testid=\"typing-indicator\"\n          class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n        >\n          <div class=\"str-chat__typing-indicator__dots\">\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n            <span class=\"str-chat__typing-indicator__dot\"></span>\n          </div>\n          <div\n            data-testid=\"typing-users\"\n            class=\"str-chat__typing-indicator__users\"\n          >\n            {{\n              users.length === 1\n                ? (\"streamChat.user is typing\"\n                  | translate: { user: getTypingIndicatorText(users) })\n                : (\"streamChat.users are typing\"\n                  | translate: { users: getTypingIndicatorText(users) })\n            }}\n          </div>\n        </div>\n      </ng-container>\n    </ng-template>\n    <ng-container\n      *ngTemplateOutlet=\"\n        typingIndicatorTemplate || defaultTypingIndicator;\n        context: getTypingIndicatorContext()\n      \"\n    ></ng-container>\n  </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n  <button\n    data-testid=\"scroll-to-latest\"\n    *ngIf=\"isUserScrolled\"\n    class=\"\n      str-chat__message-notification-scroll-to-latest\n      str-chat__message-notification-scroll-to-latest-right\n      str-chat__circle-fab\n    \"\n    (keyup.enter)=\"jumpToLatestMessage()\"\n    (click)=\"jumpToLatestMessage()\"\n  >\n    <stream-icon\n      class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n      [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n    ></stream-icon>\n    <div\n      *ngIf=\"unreadMessageCount > 0\"\n      class=\"\n        str-chat__message-notification\n        str-chat__message-notification-scroll-to-latest-unread-count\n        str-chat__jump-to-latest-unread-count\n      \"\n    >\n      {{ unreadMessageCount }}\n    </div>\n  </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n  <ng-template\n    #defaultMessageTemplate\n    let-messageInput=\"message\"\n    let-isLastSentMessage=\"isLastSentMessage\"\n    let-enabledMessageActions=\"enabledMessageActions\"\n    let-mode=\"mode\"\n    let-isHighlighted=\"isHighlighted\"\n  >\n    <stream-message\n      [message]=\"messageInput\"\n      [isLastSentMessage]=\"isLastSentMessage\"\n      [enabledMessageActions]=\"enabledMessageActions\"\n      [mode]=\"mode\"\n      [isHighlighted]=\"isHighlighted\"\n    ></stream-message>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      messageTemplate || defaultMessageTemplate;\n      context: getMessageContext(message)\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i4__namespace.AsyncPipe } });
     i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, decorators: [{
                 type: i0.Component,
                 args: [{