stream-chat-angular 3.0.0-beta.2 → 3.0.0-beta.3

package/lib/attachment-list/attachment-list.component.d.ts

@@ -1,13 +1,15 @@
 import { OnChanges } from '@angular/core';
 import { Action, Attachment } from 'stream-chat';
 import { ImageLoadService } from '../message-list/image-load.service';
-import { DefaultAttachmentType } from '../types';
+import { DefaultAttachmentType, ModalContext } from '../types';
 import { ChannelService } from '../channel.service';
+import { CustomTemplatesService } from '../custom-templates.service';
 import * as i0 from "@angular/core";
 /**
  * The `AttachmentList` compontent displays the attachments of a message
  */
 export declare class AttachmentListComponent implements OnChanges {
+    readonly customTemplatesService: CustomTemplatesService;
     private imageLoadService;
     private channelService;
     /**
@@ -21,7 +23,8 @@ export declare class AttachmentListComponent implements OnChanges {
     orderedAttachments: Attachment<DefaultAttachmentType>[];
     imagesToView: Attachment<DefaultAttachmentType>[];
     imagesToViewCurrentIndex: number;
-    constructor(imageLoadService: ImageLoadService, channelService: ChannelService);
+    private modalContent;
+    constructor(customTemplatesService: CustomTemplatesService, imageLoadService: ImageLoadService, channelService: ChannelService);
     ngOnChanges(): void;
     trackById(index: number): number;
     isImage(attachment: Attachment): boolean;
@@ -31,16 +34,17 @@ export declare class AttachmentListComponent implements OnChanges {
     imageLoaded(): void;
     hasFileSize(attachment: Attachment<DefaultAttachmentType>): boolean | "" | 0 | undefined;
     getFileSize(attachment: Attachment<DefaultAttachmentType>): string;
+    getModalContext(): ModalContext;
     trimUrl(url?: string | null): string | null;
     sendAction(action: Action): void;
     trackByActionValue(_: number, item: Action): string | undefined;
     openImageModal(attachments: Attachment[], selectedIndex?: number): void;
-    closeImageModal(): void;
     stepImages(dir: -1 | 1): void;
     trackByImageUrl(_: number, item: Attachment): unknown;
     get isImageModalPrevButtonVisible(): boolean;
     get isImageModalNextButtonVisible(): boolean;
     private createGallery;
+    private closeImageModal;
     static ɵfac: i0.ɵɵFactoryDeclaration<AttachmentListComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<AttachmentListComponent, "stream-attachment-list", never, { "messageId": "messageId"; "attachments": "attachments"; }, {}, never, never>;
 }

package/lib/attachment-preview-list/attachment-preview-list.component.d.ts

@@ -1,17 +1,27 @@
+import { EventEmitter } from '@angular/core';
 import { Observable } from 'rxjs';
-import { AttachmentService } from '../attachment.service';
 import { AttachmentUpload } from '../types';
 import * as i0 from "@angular/core";
 /**
  * The `AttachmentPreviewList` compontent displays a preview of the attachments uploaded to a message. Users can delete attachments using the preview component, or retry upload if it failed previously.
  */
 export declare class AttachmentPreviewListComponent {
-    private attachmentService;
-    attachmentUploads$: Observable<AttachmentUpload[]>;
-    constructor(attachmentService: AttachmentService);
-    retryAttachmentUpload(file: File): Promise<void>;
-    deleteAttachment(upload: AttachmentUpload): Promise<void>;
+    /**
+     * A stream that emits the current file uploads and their states
+     */
+    attachmentUploads$: Observable<AttachmentUpload[]> | undefined;
+    /**
+     * An output to notify the parent component if the user tries to retry a failed upload
+     */
+    readonly retryAttachmentUpload: EventEmitter<File>;
+    /**
+     * An output to notify the parent component if the user wants to delete a file
+     */
+    readonly deleteAttachment: EventEmitter<AttachmentUpload>;
+    constructor();
+    attachmentUploadRetried(file: File): void;
+    attachmentDeleted(upload: AttachmentUpload): void;
     trackByFile(_: number, item: AttachmentUpload): File;
     static ɵfac: i0.ɵɵFactoryDeclaration<AttachmentPreviewListComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AttachmentPreviewListComponent, "stream-attachment-preview-list", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AttachmentPreviewListComponent, "stream-attachment-preview-list", never, { "attachmentUploads$": "attachmentUploads$"; }, { "retryAttachmentUpload": "retryAttachmentUpload"; "deleteAttachment": "deleteAttachment"; }, never, never>;
 }

package/lib/avatar-placeholder/avatar-placeholder.component.d.ts

@@ -0,0 +1,25 @@
+import { CustomTemplatesService } from '../custom-templates.service';
+import { AvatarContext } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * The `AvatarPlaceholder` component displays the [default avatar](./AvatarComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This componet is used by the SDK internally, you likely won't need to use it.
+ */
+export declare class AvatarPlaceholderComponent {
+    customTemplatesService: CustomTemplatesService;
+    /**
+     * An optional name of the image, used for fallback image or image title (if `imageUrl` is provided)
+     */
+    name: string | undefined;
+    /**
+     * The URL of the image to be displayed. If the image can't be displayed the first letter of the name input is displayed.
+     */
+    imageUrl: string | undefined;
+    /**
+     * The size in pixels of the avatar image.
+     */
+    size: number;
+    constructor(customTemplatesService: CustomTemplatesService);
+    getAvatarContext(): AvatarContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<AvatarPlaceholderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AvatarPlaceholderComponent, "stream-avatar-placeholder", never, { "name": "name"; "imageUrl": "imageUrl"; "size": "size"; }, {}, never, never>;
+}

package/lib/channel.service.d.ts

@@ -2,8 +2,7 @@ import { NgZone } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Attachment, Channel, ChannelFilters, ChannelOptions, ChannelResponse, ChannelSort, Event, UserResponse } from 'stream-chat';
 import { ChatClientService, Notification } from './chat-client.service';
-import { MessageReactionType } from './message-reactions/message-reactions.component';
-import { AttachmentUpload, StreamMessage } from './types';
+import { AttachmentUpload, MessageReactionType, StreamMessage } from './types';
 import * as i0 from "@angular/core";
 /**
  * The `ChannelService` provides data and interaction for the channel list and message list. TEST

package/lib/custom-templates.service.d.ts

@@ -1,6 +1,6 @@
 import { TemplateRef } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
-import { ChannelActionsContext, ChannelPreviewContext, CommandAutocompleteListItemContext, EmojiPickerContext, MentionAutcompleteListItemContext, MentionTemplateContext, MessageContext, MessageInputContext, TypingIndicatorContext } from './types';
+import { AttachmentListContext, AttachmentPreviewListContext, AvatarContext, ChannelActionsContext, ChannelPreviewContext, CommandAutocompleteListItemContext, EmojiPickerContext, IconContext, LoadingIndicatorContext, MentionAutcompleteListItemContext, MentionTemplateContext, MessageActionBoxItemContext, MessageActionsBoxContext, MessageContext, MessageInputContext, MessageReactionsContext, ModalContext, NotificationContext, ThreadHeaderContext, TypingIndicatorContext } from './types';
 import * as i0 from "@angular/core";
 /**
  * A central location for registering your custom templates to override parts of the chat application
@@ -42,6 +42,50 @@ export declare class CustomTemplatesService {
      * The template for channel actions
      */
     channelActionsTemplate$: BehaviorSubject<TemplateRef<ChannelActionsContext> | undefined>;
+    /**
+     * The template used to display attachments of a message
+     */
+    attachmentListTemplate$: BehaviorSubject<TemplateRef<AttachmentListContext> | undefined>;
+    /**
+     * The template used to display attachments in the message input component
+     */
+    attachmentPreviewListTemplate$: BehaviorSubject<TemplateRef<AttachmentPreviewListContext> | undefined>;
+    /**
+     * The template used to display avatars for channels and users
+     */
+    avatarTemplate$: BehaviorSubject<TemplateRef<AvatarContext> | undefined>;
+    /**
+     * Template for displaying icons
+     */
+    iconTemplate$: BehaviorSubject<TemplateRef<IconContext> | undefined>;
+    /**
+     * Template for displaying the loading indicator (instead of the [default loading indicator](../components/LoadingIndicatorComponent.mdx))
+     */
+    loadingIndicatorTemplate$: BehaviorSubject<TemplateRef<LoadingIndicatorContext> | undefined>;
+    /**
+     * Template for displaying the message actions box (instead of the [default message actions box](../components/MessageActionsBoxComponent.mdx))
+     */
+    messageActionsBoxTemplate$: BehaviorSubject<TemplateRef<MessageActionsBoxContext> | undefined>;
+    /**
+     * The template used for displaying an item in the [message actions box](../components/MessageActionsBoxComponent.mdx)]
+     */
+    messageActionsBoxItemTemplate$: BehaviorSubject<TemplateRef<MessageActionBoxItemContext> | undefined>;
+    /**
+     * The template used to display the reactions of a message, and the selector to add a reaction to a message (instead of the [default message reactions component](../components/MessageReactionsComponent.mdx))
+     */
+    messageReactionsTemplate$: BehaviorSubject<TemplateRef<MessageReactionsContext> | undefined>;
+    /**
+     * The template used to display a modal window (instead of the [default modal](../components/ModalComponent.mdx))
+     */
+    modalTemplate$: BehaviorSubject<TemplateRef<ModalContext> | undefined>;
+    /**
+     * The template used to override the [default notification component](../components/NotificationComponent.mdx)
+     */
+    notificationTemplate$: BehaviorSubject<TemplateRef<NotificationContext> | undefined>;
+    /**
+     * The template used for header of thread
+     */
+    threadHeaderTemplate$: BehaviorSubject<TemplateRef<ThreadHeaderContext> | undefined>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<CustomTemplatesService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<CustomTemplatesService>;

package/lib/icon-placeholder/icon-placeholder.component.d.ts

@@ -0,0 +1,22 @@
+import { CustomTemplatesService } from '../custom-templates.service';
+import { Icon } from '../icon/icon.component';
+import { IconContext } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * The `IconPlaceholder` component displays the [default icons](./IconComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This componet is used by the SDK internally, you likely won't need to use it.
+ */
+export declare class IconPlaceholderComponent {
+    customTemplatesService: CustomTemplatesService;
+    /**
+     * The icon to display, the list of [supported icons](https://github.com/GetStream/stream-chat-angular/tree/master/projects/stream-chat-angular/src/lib/icon/icon.component.ts) can be found on GitHub.
+     */
+    icon: Icon | undefined;
+    /**
+     * The size of the icon (in pixels)
+     */
+    size: number | undefined;
+    constructor(customTemplatesService: CustomTemplatesService);
+    getIconContext(): IconContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconPlaceholderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<IconPlaceholderComponent, "stream-icon-placeholder", never, { "icon": "icon"; "size": "size"; }, {}, never, never>;
+}

package/lib/loading-indicator-placeholder/loading-indicator-placeholder.component.d.ts

@@ -0,0 +1,21 @@
+import { CustomTemplatesService } from '../custom-templates.service';
+import { LoadingIndicatorContext } from '../types';
+import * as i0 from "@angular/core";
+/**
+ * The `LoadingInficatorPlaceholder` component displays the [default loading indicator](./LoadingIndicatorComponent.mdx) unless a [custom template](../services/CustomTemplatesService.mdx) is provided. This componet is used by the SDK internally, you likely won't need to use it.
+ */
+export declare class LoadingIndicatorPlaceholderComponent {
+    customTemplatesService: CustomTemplatesService;
+    /**
+     * The size of the indicator (in pixels)
+     */
+    size: number;
+    /**
+     * The color of the indicator
+     */
+    color: string;
+    constructor(customTemplatesService: CustomTemplatesService);
+    getLoadingIndicatorContext(): LoadingIndicatorContext;
+    static ɵfac: i0.ɵɵFactoryDeclaration<LoadingIndicatorPlaceholderComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LoadingIndicatorPlaceholderComponent, "stream-loading-indicator-placeholder", never, { "size": "size"; "color": "color"; }, {}, never, never>;
+}

package/lib/message/message.component.d.ts

@@ -1,8 +1,8 @@
-import { TemplateRef, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
+import { TemplateRef, OnChanges, SimpleChanges, OnDestroy, OnInit, ChangeDetectorRef } from '@angular/core';
 import { UserResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
-import { DefaultUserType, MentionTemplateContext, StreamMessage } from '../types';
+import { AttachmentListContext, DefaultUserType, MentionTemplateContext, MessageActionsBoxContext, MessageReactionsContext, StreamMessage } from '../types';
 import { CustomTemplatesService } from '../custom-templates.service';
 import * as i0 from "@angular/core";
 declare type MessagePart = {
@@ -13,10 +13,11 @@ declare type MessagePart = {
 /**
  * The `Message` component displays a message with additional information such as sender and date, and enables [interaction with the message (i.e. edit or react)](../concepts/message-interactions.mdx).
  */
-export declare class MessageComponent implements OnChanges, OnDestroy {
+export declare class MessageComponent implements OnInit, OnChanges, OnDestroy {
     private chatClientService;
     private channelService;
     private customTemplatesService;
+    private cdRef;
     /**
      * The message to be displayed
      */
@@ -42,10 +43,14 @@ export declare class MessageComponent implements OnChanges, OnDestroy {
     visibleMessageActionsCount: number;
     messageTextParts: MessagePart[];
     mentionTemplate: TemplateRef<MentionTemplateContext> | undefined;
+    attachmentListTemplate: TemplateRef<AttachmentListContext> | undefined;
+    messageActionsBoxTemplate: TemplateRef<MessageActionsBoxContext> | undefined;
+    messageReactionsTemplate: TemplateRef<MessageReactionsContext> | undefined;
     private user;
     private subscriptions;
     private container;
-    constructor(chatClientService: ChatClientService, channelService: ChannelService, customTemplatesService: CustomTemplatesService);
+    constructor(chatClientService: ChatClientService, channelService: ChannelService, customTemplatesService: CustomTemplatesService, cdRef: ChangeDetectorRef);
+    ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
     get isSentByCurrentUser(): boolean;
@@ -63,10 +68,13 @@ export declare class MessageComponent implements OnChanges, OnDestroy {
     };
     get canDisplayReadStatus(): boolean;
     get quotedMessageAttachments(): import("stream-chat").Attachment<import("../types").DefaultAttachmentType>[];
+    getAttachmentListContext(): AttachmentListContext;
+    getMessageReactionsContext(): MessageReactionsContext;
     resendMessage(): void;
     textClicked(): void;
     setAsActiveParentMessage(): void;
     getMentionContext(messagePart: MessagePart): MentionTemplateContext;
+    getMessageActionsBoxContext(): MessageActionsBoxContext;
     private createMessageParts;
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessageComponent, "stream-message", never, { "message": "message"; "enabledMessageActions": "enabledMessageActions"; "isLastSentMessage": "isLastSentMessage"; "mode": "mode"; }, {}, never, never>;

package/lib/message-actions-box/message-actions-box.component.d.ts

@@ -4,7 +4,7 @@ import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { NotificationService } from '../notification.service';
-import { MessageInputContext, StreamMessage } from '../types';
+import { MessageActionBoxItemContext, MessageActionItem, MessageInputContext, ModalContext, StreamMessage } from '../types';
 import * as i0 from "@angular/core";
 /**
  * The `MessageActionsBox` component displays a list of message actions (i.e edit), that can be opened or closed. You can find the [list of the supported actions](../concepts/message-interactions.mdx) in the message interaction guide.
@@ -40,26 +40,22 @@ export declare class MessageActionsBoxComponent implements OnChanges, OnDestroy
     readonly isEditing: EventEmitter<boolean>;
     isEditModalOpen: boolean;
     messageInputTemplate: TemplateRef<MessageInputContext> | undefined;
+    messageActionItemTemplate: TemplateRef<MessageActionBoxItemContext> | undefined;
+    modalTemplate: TemplateRef<ModalContext> | undefined;
     subscriptions: Subscription[];
+    visibleMessageActionItems: MessageActionItem[];
+    private readonly messageActionItems;
     private messageInput;
+    private modalContent;
     constructor(chatClientService: ChatClientService, notificationService: NotificationService, channelService: ChannelService, customTemplatesService: CustomTemplatesService);
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
-    get isQuoteVisible(): boolean;
-    get isEditVisible(): boolean;
-    get isDeleteVisible(): boolean;
-    get isMuteVisible(): boolean;
-    get isFlagVisible(): boolean;
-    get isPinVisible(): boolean;
-    pinClicked(): void;
-    flagClicked(): Promise<void>;
-    muteClicked(): void;
-    quoteClicked(): void;
-    editClicked(): void;
+    getActionLabel(actionLabelOrTranslationKey: (() => string) | string): string;
     sendClicked(): void;
     modalClosed: () => void;
     getMessageInputContext(): MessageInputContext;
-    deleteClicked(): Promise<void>;
+    getEditModalContext(): ModalContext;
+    trackByActionName(_: number, item: MessageActionItem): "mute" | "delete" | "flag" | "quote" | "pin" | "edit";
     static ɵfac: i0.ɵɵFactoryDeclaration<MessageActionsBoxComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<MessageActionsBoxComponent, "stream-message-actions-box", never, { "isOpen": "isOpen"; "isMine": "isMine"; "message": "message"; "enabledActions": "enabledActions"; }, { "displayedActionsCount": "displayedActionsCount"; "isEditing": "isEditing"; }, never, never>;
 }

package/lib/message-input/message-input.component.d.ts

@@ -5,7 +5,7 @@ import { UserResponse } from 'stream-chat';
 import { AttachmentService } from '../attachment.service';
 import { ChannelService } from '../channel.service';
 import { NotificationService } from '../notification.service';
-import { AttachmentUpload, EmojiPickerContext, StreamMessage } from '../types';
+import { AttachmentPreviewListContext, AttachmentUpload, EmojiPickerContext, StreamMessage } from '../types';
 import { MessageInputConfigService } from './message-input-config.service';
 import { TextareaInterface } from './textarea.interface';
 import { EmojiInputService } from './emoji-input.service';
@@ -65,6 +65,7 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
     cooldown$: Observable<number> | undefined;
     isCooldownInProgress: boolean;
     emojiPickerTemplate: TemplateRef<EmojiPickerContext> | undefined;
+    attachmentPreviewListTemplate: TemplateRef<AttachmentPreviewListContext> | undefined;
     private fileInput;
     private textareaAnchor;
     private subscriptions;
@@ -84,6 +85,9 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
     filesSelected(fileList: FileList | null): Promise<void>;
     deselectMessageToQuote(): void;
     getEmojiPickerContext(): EmojiPickerContext;
+    getAttachmentPreviewListContext(): AttachmentPreviewListContext;
+    private deleteUpload;
+    private retryUpload;
     private clearFileInput;
     private get isUpdate();
     private initTextarea;

package/lib/message-reactions/message-reactions.component.d.ts

@@ -1,9 +1,8 @@
 import { AfterViewChecked, ChangeDetectorRef, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
 import { ReactionResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
-import { DefaultReactionType, DefaultUserType } from '../types';
+import { DefaultReactionType, DefaultUserType, MessageReactionType } from '../types';
 import * as i0 from "@angular/core";
-export declare type MessageReactionType = 'angry' | 'haha' | 'like' | 'love' | 'sad' | 'wow';
 /**
  * The `MessageReactions` component displays the reactions of a message, the current user can add and remove reactions. You can read more about [message reactions](https://getstream.io/chat/docs/javascript/send_reaction/?language=javascript) in the platform documentation.
  */

package/lib/modal/modal.component.d.ts

@@ -1,4 +1,4 @@
-import { EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { EventEmitter, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 /**
  * The `Modal` component displays its content in an overlay. The modal can be closed with a close button, if the user clicks outside of the modal content, or if the escape button is pressed. The modal can also be closed from outside.
@@ -8,11 +8,15 @@ export declare class ModalComponent implements OnChanges {
      * If `true` the modal will be displayed, if `false` the modal will be hidden
      */
     isOpen: boolean;
+    /**
+     * The content of the modal  (can also be provided using `ng-content`)
+     */
+    content: TemplateRef<void> | undefined;
     /**
      * Emits `true` if the modal becomes visible, and `false` if the modal is closed.
      */
     readonly isOpenChange: EventEmitter<boolean>;
-    private content;
+    private innerContainer;
     constructor();
     ngOnChanges(changes: SimpleChanges): void;
     close(): void;
@@ -21,5 +25,5 @@ export declare class ModalComponent implements OnChanges {
     private watchForOutsideClicks;
     private stopWatchForOutsideClicks;
     static ɵfac: i0.ɵɵFactoryDeclaration<ModalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "stream-modal", never, { "isOpen": "isOpen"; }, { "isOpenChange": "isOpenChange"; }, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ModalComponent, "stream-modal", never, { "isOpen": "isOpen"; "content": "content"; }, { "isOpenChange": "isOpenChange"; }, never, ["*"]>;
 }

package/lib/notification/notification.component.d.ts

@@ -1,3 +1,4 @@
+import { TemplateRef } from '@angular/core';
 import { NotificationType } from '../types';
 import * as i0 from "@angular/core";
 /**
@@ -8,7 +9,11 @@ export declare class NotificationComponent {
      * The type of the notification
      */
     type: NotificationType | undefined;
+    /**
+     * The content of the notification (can also be provided using `ng-content`)
+     */
+    content: TemplateRef<void> | undefined;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<NotificationComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<NotificationComponent, "stream-notification", never, { "type": "type"; }, {}, never, ["*"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<NotificationComponent, "stream-notification", never, { "type": "type"; "content": "content"; }, {}, never, ["*"]>;
 }

package/lib/notification-list/notification-list.component.d.ts

@@ -1,4 +1,5 @@
 import { Observable } from 'rxjs';
+import { CustomTemplatesService } from '../custom-templates.service';
 import { NotificationService } from '../notification.service';
 import { NotificationPayload } from '../types';
 import * as i0 from "@angular/core";
@@ -6,11 +7,12 @@ import * as i0 from "@angular/core";
  * The `NotificationList` component displays the list of active notifications.
  */
 export declare class NotificationListComponent {
+    readonly customTemplatesService: CustomTemplatesService;
     private notificationService;
     notifications$: Observable<NotificationPayload[]>;
-    constructor(notificationService: NotificationService);
+    constructor(customTemplatesService: CustomTemplatesService, notificationService: NotificationService);
     trackById(_: number, item: NotificationPayload): string;
-    getTemplateContext(notification: NotificationPayload): {
+    getNotificationContentContext(notification: NotificationPayload): {
         dismissFn: Function;
     };
     static ɵfac: i0.ɵɵFactoryDeclaration<NotificationListComponent, never>;

package/lib/stream-avatar.module.d.ts

@@ -1,9 +1,10 @@
 import * as i0 from "@angular/core";
 import * as i1 from "./avatar/avatar.component";
-import * as i2 from "@angular/common";
-import * as i3 from "@ngx-translate/core";
+import * as i2 from "./avatar-placeholder/avatar-placeholder.component";
+import * as i3 from "@angular/common";
+import * as i4 from "@ngx-translate/core";
 export declare class StreamAvatarModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StreamAvatarModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamAvatarModule, [typeof i1.AvatarComponent], [typeof i2.CommonModule, typeof i3.TranslateModule], [typeof i1.AvatarComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamAvatarModule, [typeof i1.AvatarComponent, typeof i2.AvatarPlaceholderComponent], [typeof i3.CommonModule, typeof i4.TranslateModule], [typeof i1.AvatarComponent, typeof i2.AvatarPlaceholderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<StreamAvatarModule>;
 }

package/lib/stream-chat.module.d.ts

@@ -17,11 +17,13 @@ import * as i15 from "./attachment-preview-list/attachment-preview-list.componen
 import * as i16 from "./modal/modal.component";
 import * as i17 from "./message-input/textarea.directive";
 import * as i18 from "./thread/thread.component";
-import * as i19 from "@angular/common";
-import * as i20 from "@ngx-translate/core";
-import * as i21 from "./stream-avatar.module";
+import * as i19 from "./icon-placeholder/icon-placeholder.component";
+import * as i20 from "./loading-indicator-placeholder/loading-indicator-placeholder.component";
+import * as i21 from "@angular/common";
+import * as i22 from "@ngx-translate/core";
+import * as i23 from "./stream-avatar.module";
 export declare class StreamChatModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<StreamChatModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i17.TextareaDirective, typeof i18.ThreadComponent], [typeof i19.CommonModule, typeof i20.TranslateModule, typeof i21.StreamAvatarModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i21.StreamAvatarModule, typeof i18.ThreadComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i17.TextareaDirective, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent], [typeof i21.CommonModule, typeof i22.TranslateModule, typeof i23.StreamAvatarModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.LoadingIndicatorComponent, typeof i9.IconComponent, typeof i10.MessageActionsBoxComponent, typeof i11.AttachmentListComponent, typeof i12.MessageReactionsComponent, typeof i13.NotificationComponent, typeof i14.NotificationListComponent, typeof i15.AttachmentPreviewListComponent, typeof i16.ModalComponent, typeof i23.StreamAvatarModule, typeof i18.ThreadComponent, typeof i19.IconPlaceholderComponent, typeof i20.LoadingIndicatorPlaceholderComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<StreamChatModule>;
 }

package/lib/thread/thread.component.d.ts

@@ -1,18 +1,21 @@
 import { OnDestroy } from '@angular/core';
 import { ChannelService } from '../channel.service';
-import { StreamMessage } from '../types';
+import { CustomTemplatesService } from '../custom-templates.service';
+import { StreamMessage, ThreadHeaderContext } from '../types';
 import * as i0 from "@angular/core";
 /**
  * The `Thread` component represents a [message thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript), it is a container component that displays a thread with a header, [`MessageList`](./MessageListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components.
  */
 export declare class ThreadComponent implements OnDestroy {
+    customTemplatesService: CustomTemplatesService;
     private channelService;
     private class;
     parentMessage: StreamMessage | undefined;
     private subscriptions;
-    constructor(channelService: ChannelService);
+    constructor(customTemplatesService: CustomTemplatesService, channelService: ChannelService);
     ngOnDestroy(): void;
-    get replyCountParam(): {
+    getThreadHeaderContext(): ThreadHeaderContext;
+    getReplyCountParam(parentMessage: StreamMessage | undefined): {
         replyCount: number | undefined;
     };
     closeThread(): void;

package/lib/types.d.ts

@@ -1,6 +1,7 @@
 import { TemplateRef } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import type { Attachment, Channel, ChannelMemberResponse, CommandResponse, Event, FormatMessageResponse, LiteralStringForUnion, Mute, UserResponse } from 'stream-chat';
+import type { Attachment, Channel, ChannelMemberResponse, CommandResponse, Event, FormatMessageResponse, LiteralStringForUnion, Mute, ReactionResponse, UserResponse } from 'stream-chat';
+import { Icon } from './icon/icon.component';
 export declare type UnknownType = Record<string, unknown>;
 export declare type CustomTrigger = {
     [key: string]: {
@@ -98,3 +99,68 @@ export declare type MessageContext = {
 export declare type ChannelActionsContext = {
     channel: Channel;
 };
+export declare type AttachmentListContext = {
+    messageId: string;
+    attachments: Attachment<DefaultAttachmentType>[];
+};
+export declare type AvatarContext = {
+    name: string | undefined;
+    imageUrl: string | undefined;
+    size: number | undefined;
+};
+export declare type AttachmentPreviewListContext = {
+    attachmentUploads$: Observable<AttachmentUpload[]> | undefined;
+    retryUploadHandler: (f: File) => any;
+    deleteUploadHandler: (u: AttachmentUpload) => any;
+};
+export declare type IconContext = {
+    icon: Icon | undefined;
+    size: number | undefined;
+};
+export declare type LoadingIndicatorContext = {
+    size: number | undefined;
+    color: string | undefined;
+};
+export declare type MessageActionsBoxContext = {
+    isOpen: boolean;
+    isMine: boolean;
+    message: StreamMessage | undefined;
+    enabledActions: string[];
+    displayedActionsCountChaneHanler: (count: number) => any;
+    isEditingChangeHandler: (isEditing: boolean) => any;
+};
+export declare type MessageActionBoxItemContext = {
+    actionName: 'quote' | 'pin' | 'flag' | 'mute' | 'edit' | 'delete';
+    actionLabelOrTranslationKey: (() => string) | string;
+    actionHandler: () => any;
+};
+export declare type MessageActionItem = {
+    actionName: 'quote' | 'pin' | 'flag' | 'mute' | 'edit' | 'delete';
+    actionLabelOrTranslationKey: (() => string) | string;
+    isVisible: (enabledActions: string[], isMine: boolean, message: StreamMessage) => boolean;
+    actionHandler: (message: StreamMessage, isMine: boolean) => any;
+};
+export declare type MessageReactionsContext = {
+    messageId: string | undefined;
+    messageReactionCounts: {
+        [key in MessageReactionType]?: number;
+    };
+    isSelectorOpen: boolean;
+    latestReactions: ReactionResponse<DefaultReactionType, DefaultUserType>[];
+    ownReactions: ReactionResponse<DefaultReactionType, DefaultUserType>[];
+    isSelectorOpenChangeHandler: (isOpen: boolean) => any;
+};
+export declare type ModalContext = {
+    isOpen: boolean;
+    isOpenChangeHandler: (isOpen: boolean) => any;
+    content: TemplateRef<void>;
+};
+export declare type NotificationContext = {
+    type: NotificationType | undefined;
+    content: TemplateRef<void> | undefined;
+};
+export declare type ThreadHeaderContext = {
+    parentMessage: StreamMessage | undefined;
+    closeThreadHandler: Function;
+};
+export declare type MessageReactionType = 'angry' | 'haha' | 'like' | 'love' | 'sad' | 'wow';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-angular",
-  "version": "3.0.0-beta.2",
+  "version": "3.0.0-beta.3",
   "description": "Angular components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",

package/public-api.d.ts

@@ -4,8 +4,11 @@ export * from './lib/theme.service';
 export * from './lib/attachment.service';
 export * from './lib/stream-i18n.service';
 export * from './lib/avatar/avatar.component';
+export * from './lib/avatar-placeholder/avatar-placeholder.component';
 export * from './lib/icon/icon.component';
+export * from './lib/icon-placeholder/icon-placeholder.component';
 export * from './lib/loading-indicator/loading-indicator.component';
+export * from './lib/loading-indicator-placeholder/loading-indicator-placeholder.component';
 export * from './lib/message-actions-box/message-actions-box.component';
 export * from './lib/channel/channel.component';
 export * from './lib/channel-header/channel-header.component';

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '3.0.0-beta.2';
+export const version = '3.0.0-beta.3';