stream-chat-angular 3.6.0 → 4.0.0-theming-v2.2

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

@@ -4,6 +4,7 @@ import { ImageLoadService } from '../message-list/image-load.service';
 import { ModalContext, DefaultStreamChatGenerics } from '../types';
 import { ChannelService } from '../channel.service';
 import { CustomTemplatesService } from '../custom-templates.service';
+import { ThemeService } from '../theme.service';
 import * as i0 from "@angular/core";
 /**
  * The `AttachmentList` compontent displays the attachments of a message
@@ -20,11 +21,13 @@ export declare class AttachmentListComponent implements OnChanges {
      * The attachments to display
      */
     attachments: Attachment<DefaultStreamChatGenerics>[];
+    class: string;
     orderedAttachments: Attachment<DefaultStreamChatGenerics>[];
     imagesToView: Attachment<DefaultStreamChatGenerics>[];
     imagesToViewCurrentIndex: number;
+    themeVersion: '1' | '2';
     private modalContent;
-    constructor(customTemplatesService: CustomTemplatesService, imageLoadService: ImageLoadService, channelService: ChannelService);
+    constructor(customTemplatesService: CustomTemplatesService, imageLoadService: ImageLoadService, channelService: ChannelService, themeService: ThemeService);
     ngOnChanges(): void;
     trackById(index: number): number;
     isImage(attachment: Attachment): boolean;

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from '@angular/core';
 import { Observable } from 'rxjs';
+import { ThemeService } from '../theme.service';
 import { AttachmentUpload } from '../types';
 import * as i0 from "@angular/core";
 /**
@@ -18,7 +19,8 @@ export declare class AttachmentPreviewListComponent {
      * An output to notify the parent component if the user wants to delete a file
      */
     readonly deleteAttachment: EventEmitter<AttachmentUpload>;
-    constructor();
+    themeVersion: '1' | '2';
+    constructor(themeService: ThemeService);
     attachmentUploadRetried(file: File): void;
     attachmentDeleted(upload: AttachmentUpload): void;
     trackByFile(_: number, item: AttachmentUpload): File;

package/lib/channel/channel.component.d.ts

@@ -1,16 +1,20 @@
 import { Observable, Subscription } from 'rxjs';
 import { ChannelService } from '../channel.service';
+import { ThemeService } from '../theme.service';
 import * as i0 from "@angular/core";
 /**
  * The `Channel` component is a container component that displays the [`ChannelHeader`](./ChannelHeaderComponent.mdx), [`MessageList`](./MessageListComponent.mdx), [`NotificationList`](./NotificationListComponent.mdx) and [`MessageInput`](./MessageInputComponent.mdx) components. You can also provide the [`Thread`](./ThreadComponent.mdx) component to use message [threads](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
  */
 export declare class ChannelComponent {
     private channelService;
+    private themeService;
     isError$: Observable<boolean>;
     isInitializing$: Observable<boolean>;
     isActiveThread$: Observable<boolean>;
+    isActiveChannel$: Observable<boolean>;
     subscriptions: Subscription[];
-    constructor(channelService: ChannelService);
+    theme$: Observable<string>;
+    constructor(channelService: ChannelService, themeService: ThemeService);
     static ɵfac: i0.ɵɵFactoryDeclaration<ChannelComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChannelComponent, "stream-channel", never, {}, {}, never, ["*", "[name=\"thread\"]"]>;
 }

package/lib/channel-header/channel-header.component.d.ts

@@ -33,5 +33,5 @@ export declare class ChannelHeaderComponent implements OnInit, OnDestroy {
     get displayText(): string | undefined;
     get avatarName(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChannelHeaderComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ChannelHeaderComponent, "stream-channel-header", never, {}, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ChannelHeaderComponent, "stream-channel-header", never, {}, {}, never, ["*"]>;
 }

package/lib/channel-list/channel-list-toggle.service.d.ts

@@ -2,6 +2,8 @@ import { Observable } from 'rxjs';
 import * as i0 from "@angular/core";
 /**
  * The `ChannelListToggleService` can be used to toggle the channel list.
+ *
+ * @deprecated This service can only be used with [theming-v1](../concepts/theming-and-css.mdx), if you are using [thmeing-v2](../theming/introduction.mdx) please refer to our [responsive layout guide](../code-examples/responsive-layout.mdx)
  */
 export declare class ChannelListToggleService {
     /**

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

@@ -3,6 +3,7 @@ import { Observable, Subscription } from 'rxjs';
 import { Channel } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { CustomTemplatesService } from '../custom-templates.service';
+import { ThemeService } from '../theme.service';
 import { ChannelPreviewContext, DefaultStreamChatGenerics } from '../types';
 import { ChannelListToggleService } from './channel-list-toggle.service';
 import * as i0 from "@angular/core";
@@ -13,6 +14,7 @@ export declare class ChannelListComponent implements AfterViewInit, OnDestroy {
     private channelService;
     private channelListToggleService;
     private customTemplatesService;
+    private themeService;
     channels$: Observable<Channel<DefaultStreamChatGenerics>[] | undefined>;
     isError$: Observable<boolean>;
     isInitializing$: Observable<boolean>;
@@ -20,9 +22,10 @@ export declare class ChannelListComponent implements AfterViewInit, OnDestroy {
     isOpen$: Observable<boolean>;
     hasMoreChannels$: Observable<boolean>;
     customChannelPreviewTemplate: TemplateRef<ChannelPreviewContext> | undefined;
+    theme$: Observable<string>;
     subscriptions: Subscription[];
     private container;
-    constructor(channelService: ChannelService, channelListToggleService: ChannelListToggleService, customTemplatesService: CustomTemplatesService);
+    constructor(channelService: ChannelService, channelListToggleService: ChannelListToggleService, customTemplatesService: CustomTemplatesService, themeService: ThemeService);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     loadMoreChannels(): Promise<void>;

package/lib/channel-preview/channel-preview.component.d.ts

@@ -17,6 +17,7 @@ export declare class ChannelPreviewComponent implements OnInit, OnDestroy {
     channel: Channel<DefaultStreamChatGenerics> | undefined;
     isActive: boolean;
     isUnread: boolean;
+    unreadCount: number | undefined;
     latestMessage: string;
     private subscriptions;
     private canSendReadEvents;
@@ -29,6 +30,7 @@ export declare class ChannelPreviewComponent implements OnInit, OnDestroy {
     setAsActiveChannel(): void;
     private handleMessageEvent;
     private setLatestMessage;
+    private updateUnreadState;
     static ɵfac: i0.ɵɵFactoryDeclaration<ChannelPreviewComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<ChannelPreviewComponent, "stream-channel-preview", never, { "channel": "channel"; }, {}, never, never>;
 }

package/lib/channel.service.d.ts

@@ -2,6 +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, ClientEvent } from './chat-client.service';
+import { NotificationService } from './notification.service';
 import { AttachmentUpload, DefaultStreamChatGenerics, MessageReactionType, StreamMessage } from './types';
 import * as i0 from "@angular/core";
 /**
@@ -10,6 +11,7 @@ import * as i0 from "@angular/core";
 export declare class ChannelService<T extends DefaultStreamChatGenerics = DefaultStreamChatGenerics> {
     private chatClientService;
     private ngZone;
+    private notificationService;
     /**
      * Emits `false` if there are no more pages of channels that can be loaded.
      */
@@ -163,7 +165,7 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
     private messageListSetter;
     private threadListSetter;
     private parentMessageSetter;
-    constructor(chatClientService: ChatClientService<T>, ngZone: NgZone);
+    constructor(chatClientService: ChatClientService<T>, ngZone: NgZone, notificationService: NotificationService);
     /**
      * If set to false, read events won't be sent as new messages are received. If set to true active channel (if any) will immediately be marked as read.
      */

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

@@ -1,5 +1,5 @@
 import * as i0 from "@angular/core";
-export declare type Icon = 'action-icon' | 'delivered-icon' | 'reaction-icon' | 'connection-error' | 'send' | 'file-upload' | 'retry' | 'close' | 'file' | 'reply' | 'close-no-outline' | 'reply-in-thread' | 'arrow-left' | 'arrow-right' | 'menu' | 'arrow-up' | 'arrow-down';
+export declare type Icon = 'action-icon' | 'delivered-icon' | 'reaction-icon' | 'connection-error' | 'send' | 'file-upload' | 'retry' | 'close' | 'file' | 'reply' | 'close-no-outline' | 'reply-in-thread' | 'arrow-left' | 'arrow-right' | 'menu' | 'arrow-up' | 'arrow-down' | 'chat-bubble' | 'attach' | 'unspecified-filetype' | 'download' | 'error';
 /**
  * The `Icon` component can be used to display different icons (i. e. message delivered icon).
  */

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

@@ -11,6 +11,7 @@ export declare class LoadingIndicatorComponent {
      * The color of the indicator
      */
     color: string;
+    linearGradientId: string;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<LoadingIndicatorComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<LoadingIndicatorComponent, "stream-loading-indicator", never, { "size": "size"; "color": "color"; }, {}, never, never>;

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

@@ -4,6 +4,8 @@ import { ChannelService } from '../channel.service';
 import { ChatClientService } from '../chat-client.service';
 import { AttachmentListContext, MentionTemplateContext, MessageActionsBoxContext, MessageReactionsContext, DefaultStreamChatGenerics, StreamMessage } from '../types';
 import { CustomTemplatesService } from '../custom-templates.service';
+import { ThemeService } from '../theme.service';
+import { NgxPopperjsTriggers, NgxPopperjsPlacements } from 'ngx-popperjs';
 import * as i0 from "@angular/core";
 declare type MessagePart = {
     content: string;
@@ -34,25 +36,29 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy {
      * Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
      */
     mode: 'thread' | 'main';
+    readonly themeVersion: '1' | '2';
     canReceiveReadEvents: boolean | undefined;
     canReactToMessage: boolean | undefined;
     isEditing: boolean | undefined;
     isActionBoxOpen: boolean;
     isReactionSelectorOpen: boolean;
-    isPressedOnMobile: boolean;
     visibleMessageActionsCount: number;
     messageTextParts: MessagePart[];
     mentionTemplate: TemplateRef<MentionTemplateContext> | undefined;
     attachmentListTemplate: TemplateRef<AttachmentListContext> | undefined;
     messageActionsBoxTemplate: TemplateRef<MessageActionsBoxContext> | undefined;
     messageReactionsTemplate: TemplateRef<MessageReactionsContext> | undefined;
+    popperTriggerClick: NgxPopperjsTriggers;
+    popperTriggerHover: NgxPopperjsTriggers;
+    popperPlacementAuto: NgxPopperjsPlacements;
     private user;
     private subscriptions;
     private container;
-    constructor(chatClientService: ChatClientService, channelService: ChannelService, customTemplatesService: CustomTemplatesService, cdRef: ChangeDetectorRef);
+    constructor(chatClientService: ChatClientService, channelService: ChannelService, customTemplatesService: CustomTemplatesService, cdRef: ChangeDetectorRef, themeService: ThemeService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngOnDestroy(): void;
+    get shouldDisplayThreadLink(): boolean;
     get isSentByCurrentUser(): boolean;
     get readByText(): string;
     get lastReadUser(): UserResponse<DefaultStreamChatGenerics> | undefined;
@@ -90,7 +96,6 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy {
     getAttachmentListContext(): AttachmentListContext;
     getMessageReactionsContext(): MessageReactionsContext;
     resendMessage(): void;
-    textClicked(): void;
     setAsActiveParentMessage(): void;
     getMentionContext(messagePart: MessagePart): MentionTemplateContext;
     getMessageActionsBoxContext(): MessageActionsBoxContext;

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

@@ -16,6 +16,7 @@ export declare class MessageActionsBoxComponent implements OnChanges, OnDestroy
     private customTemplatesService;
     /**
      * Indicates if the list should be opened or closed. Adding a UI element to open and close the list is the parent's component responsibility.
+     * @deprecated No need for this since [theme-v2](../theming/introduction.mdx)
      */
     isOpen: boolean;
     /**

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

@@ -1,4 +1,4 @@
-import { EventEmitter, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
+import { AfterViewInit, EventEmitter, OnChanges, SimpleChanges, TemplateRef } from '@angular/core';
 import { MentionConfig } from 'angular-mentions';
 import { MentionAutcompleteListItemContext, MentionAutcompleteListItem, CommandAutocompleteListItemContext } from '../../types';
 import { UserResponse } from 'stream-chat';
@@ -8,21 +8,27 @@ import { ChatClientService } from '../../chat-client.service';
 import { TransliterationService } from '../../transliteration.service';
 import { EmojiInputService } from '../emoji-input.service';
 import { CustomTemplatesService } from '../../custom-templates.service';
+import { ThemeService } from '../../theme.service';
 import * as i0 from "@angular/core";
 /**
  * The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
  */
-export declare class AutocompleteTextareaComponent implements TextareaInterface, OnChanges {
+export declare class AutocompleteTextareaComponent implements TextareaInterface, OnChanges, AfterViewInit {
     private channelService;
     private chatClientService;
     private transliterationService;
     private emojiInputService;
     private customTemplatesService;
+    private themeService;
     class: string;
     /**
      * The value of the input HTML element.
      */
     value: string;
+    /**
+     * Placeholder of the textarea
+     */
+    placeholder: string;
     /**
      * If true, users can mention other users in messages. You can also set this input on the [`MessageInput`](./MessageInputComponent.mdx/#inputs-and-outputs) component.
      */
@@ -55,8 +61,9 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
     private userMentionConfig;
     private slashCommandConfig;
     private searchTerm$;
-    constructor(channelService: ChannelService, chatClientService: ChatClientService, transliterationService: TransliterationService, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService);
+    constructor(channelService: ChannelService, chatClientService: ChatClientService, transliterationService: TransliterationService, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService, themeService: ThemeService);
     ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
     filter(searchString: string, items: {
         autocompleteLabel: string;
     }[]): {
@@ -67,9 +74,10 @@ export declare class AutocompleteTextareaComponent implements TextareaInterface,
     inputChanged(): void;
     inputLeft(): void;
     sent(event: Event): void;
+    private adjustTextareaHeight;
     private transliterate;
     private updateMentionOptions;
     private updateMentionedUsersFromText;
     static ɵfac: i0.ɵɵFactoryDeclaration<AutocompleteTextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteTextareaComponent, "stream-autocomplete-textarea", never, { "value": "value"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<AutocompleteTextareaComponent, "stream-autocomplete-textarea", never, { "value": "value"; "placeholder": "placeholder"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; }, never, never>;
 }

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

@@ -10,6 +10,7 @@ import { MessageInputConfigService } from './message-input-config.service';
 import { TextareaInterface } from './textarea.interface';
 import { EmojiInputService } from './emoji-input.service';
 import { CustomTemplatesService } from '../custom-templates.service';
+import { ThemeService } from '../theme.service';
 import * as i0 from "@angular/core";
 /**
  * The `MessageInput` component displays an input where users can type their messages and upload files, and sends the message to the active channel. The component can be used to compose new messages or update existing ones. To send messages, the chat user needs to have the necessary [channel capability](https://getstream.io/chat/docs/javascript/channel_capabilities/?language=javascript).
@@ -57,10 +58,12 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
      * Emits when a message was successfuly sent or updated
      */
     readonly messageUpdate: EventEmitter<void>;
+    class: string;
     isFileUploadAuthorized: boolean | undefined;
     canSendLinks: boolean | undefined;
     canSendMessages: boolean | undefined;
     attachmentUploads$: Observable<AttachmentUpload[]>;
+    attachmentUploadInProgressCounter$: Observable<number>;
     textareaValue: string;
     textareaRef: ComponentRef<TextareaInterface> | undefined;
     mentionedUsers: UserResponse[];
@@ -70,6 +73,9 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
     isCooldownInProgress: boolean;
     emojiPickerTemplate: TemplateRef<EmojiPickerContext> | undefined;
     attachmentPreviewListTemplate: TemplateRef<AttachmentPreviewListContext> | undefined;
+    textareaPlaceholder: string;
+    themeVersion: '1' | '2';
+    fileInputId: string;
     private fileInput;
     private textareaAnchor;
     private subscriptions;
@@ -78,7 +84,9 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
     private appSettings;
     private channel;
     private sendMessageSubcription;
-    constructor(channelService: ChannelService, notificationService: NotificationService, attachmentService: AttachmentService, configService: MessageInputConfigService, textareaType: Type<TextareaInterface>, componentFactoryResolver: ComponentFactoryResolver, cdRef: ChangeDetectorRef, chatClient: ChatClientService, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService);
+    private readonly defaultTextareaPlaceholder;
+    private readonly slowModeTextareaPlaceholder;
+    constructor(channelService: ChannelService, notificationService: NotificationService, attachmentService: AttachmentService, configService: MessageInputConfigService, textareaType: Type<TextareaInterface>, componentFactoryResolver: ComponentFactoryResolver, cdRef: ChangeDetectorRef, chatClient: ChatClientService, emojiInputService: EmojiInputService, customTemplatesService: CustomTemplatesService, themeService: ThemeService);
     ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
@@ -105,7 +113,7 @@ export declare class MessageInputComponent implements OnInit, OnChanges, OnDestr
             mutes?: import("stream-chat").Mute<DefaultStreamChatGenerics>[] | undefined;
         };
     }>[];
-    get disabledTextareaText(): "" | "streamChat.You can't send thread replies in this channel" | "streamChat.You can't send messages in this channel" | "streamChat.Slow Mode ON";
+    get disabledTextareaText(): "" | "streamChat.You can't send thread replies in this channel" | "streamChat.You can't send messages in this channel";
     filesSelected(fileList: FileList | null): Promise<void>;
     deselectMessageToQuote(): void;
     getEmojiPickerContext(): EmojiPickerContext;

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

@@ -1,17 +1,23 @@
-import { EventEmitter, OnChanges, OnDestroy } from '@angular/core';
+import { AfterViewInit, EventEmitter, OnChanges, OnDestroy, SimpleChanges } from '@angular/core';
+import { ThemeService } from '../../theme.service';
 import { EmojiInputService } from '../emoji-input.service';
 import { TextareaInterface } from '../textarea.interface';
 import * as i0 from "@angular/core";
 /**
  * The `Textarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
  */
-export declare class TextareaComponent implements TextareaInterface, OnChanges, OnDestroy {
+export declare class TextareaComponent implements TextareaInterface, OnChanges, OnDestroy, AfterViewInit {
     private emojiInputService;
+    private themeService;
     class: string;
     /**
      * The value of the input HTML element.
      */
     value: string;
+    /**
+     * Placeholder of the textarea
+     */
+    placeholder: string;
     /**
      * Emits the current value of the input element when a user types.
      */
@@ -22,11 +28,13 @@ export declare class TextareaComponent implements TextareaInterface, OnChanges,
     readonly send: EventEmitter<void>;
     private messageInput;
     private subscriptions;
-    constructor(emojiInputService: EmojiInputService);
-    ngOnChanges(): void;
+    constructor(emojiInputService: EmojiInputService, themeService: ThemeService);
+    ngOnChanges(changes: SimpleChanges): void;
+    ngAfterViewInit(): void;
     ngOnDestroy(): void;
     inputChanged(): void;
     sent(event: Event): void;
+    private adjustTextareaHeight;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextareaComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaComponent, "stream-textarea", never, { "value": "value"; }, { "valueChange": "valueChange"; "send": "send"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TextareaComponent, "stream-textarea", never, { "value": "value"; "placeholder": "placeholder"; }, { "valueChange": "valueChange"; "send": "send"; }, never, never>;
 }

package/lib/message-input/textarea.directive.d.ts

@@ -8,6 +8,7 @@ export declare class TextareaDirective implements OnChanges {
     areMentionsEnabled: boolean | undefined;
     mentionScope?: 'channel' | 'application';
     value: string;
+    placeholder: string | undefined;
     readonly valueChange: EventEmitter<string>;
     readonly send: EventEmitter<void>;
     readonly userMentions: EventEmitter<UserResponse<import("stream-chat").DefaultGenerics>[]>;
@@ -16,5 +17,5 @@ export declare class TextareaDirective implements OnChanges {
     constructor(viewContainerRef: ViewContainerRef);
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TextareaDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TextareaDirective, "[streamTextarea]", never, { "componentRef": "componentRef"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; "value": "value"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; }, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TextareaDirective, "[streamTextarea]", never, { "componentRef": "componentRef"; "areMentionsEnabled": "areMentionsEnabled"; "mentionScope": "mentionScope"; "value": "value"; "placeholder": "placeholder"; }, { "valueChange": "valueChange"; "send": "send"; "userMentions": "userMentions"; }, never>;
 }

package/lib/message-input/textarea.interface.d.ts

@@ -7,4 +7,5 @@ export interface TextareaInterface extends OnChanges {
     userMentions?: EventEmitter<UserResponse[]>;
     areMentionsEnabled?: boolean;
     mentionScope?: 'channel' | 'application';
+    placeholder?: string;
 }

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

@@ -60,6 +60,10 @@ export declare class MessageListComponent implements AfterViewChecked, OnChanges
     scrolled(): void;
     getTypingIndicatorContext(): TypingIndicatorContext;
     getMessageContext(message: StreamMessage): MessageContext;
+    getTypingIndicatorText(users: UserResponse[]): string;
+    get replyCountParam(): {
+        replyCount: number | undefined;
+    };
     private preserveScrollbarPosition;
     private shouldLoadMoreMessages;
     private setMessages$;

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

@@ -2,6 +2,7 @@ import { AfterViewChecked, ChangeDetectorRef, EventEmitter, OnChanges, SimpleCha
 import { ReactionResponse } from 'stream-chat';
 import { ChannelService } from '../channel.service';
 import { MessageReactionType, DefaultStreamChatGenerics } from '../types';
+import { NgxPopperjsTriggers, NgxPopperjsPlacements } from 'ngx-popperjs';
 import * as i0 from "@angular/core";
 /**
  * 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.
@@ -43,6 +44,8 @@ export declare class MessageReactionsComponent implements AfterViewChecked, OnCh
     private selectorContainer;
     private selectorTooltip;
     currentTooltipTarget: HTMLElement | undefined;
+    popperTriggerHover: NgxPopperjsTriggers;
+    popperPlacementAuto: NgxPopperjsPlacements;
     constructor(cdRef: ChangeDetectorRef, channelService: ChannelService);
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewChecked(): void;
@@ -56,6 +59,7 @@ export declare class MessageReactionsComponent implements AfterViewChecked, OnCh
     hideTooltip(): void;
     trackByMessageReaction(index: number, item: MessageReactionType): MessageReactionType;
     react(type: MessageReactionType): void;
+    isOwnReaction(reactionType: MessageReactionType): boolean;
     private eventHandler;
     private watchForOutsideClicks;
     private stopWatchForOutsideClicks;

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

@@ -1,6 +1,7 @@
 import { Observable } from 'rxjs';
 import { CustomTemplatesService } from '../custom-templates.service';
 import { NotificationService } from '../notification.service';
+import { ThemeService } from '../theme.service';
 import { NotificationPayload } from '../types';
 import * as i0 from "@angular/core";
 /**
@@ -9,8 +10,11 @@ import * as i0 from "@angular/core";
 export declare class NotificationListComponent {
     readonly customTemplatesService: CustomTemplatesService;
     private notificationService;
+    private themeService;
     notifications$: Observable<NotificationPayload[]>;
-    constructor(customTemplatesService: CustomTemplatesService, notificationService: NotificationService);
+    themeVersion: '1' | '2';
+    theme$: Observable<string>;
+    constructor(customTemplatesService: CustomTemplatesService, notificationService: NotificationService, themeService: ThemeService);
     trackById(_: number, item: NotificationPayload): string;
     getNotificationContentContext(notification: NotificationPayload): {
         dismissFn: Function;

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

@@ -22,8 +22,9 @@ import * as i20 from "./loading-indicator-placeholder/loading-indicator-placehol
 import * as i21 from "@angular/common";
 import * as i22 from "@ngx-translate/core";
 import * as i23 from "./stream-avatar.module";
+import * as i24 from "ngx-popperjs";
 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.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 ɵ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 i24.NgxPopperjsModule], [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/theme.service.d.ts

@@ -2,13 +2,17 @@ import { BehaviorSubject } from 'rxjs';
 import * as i0 from "@angular/core";
 export declare type Theme = 'light' | 'dark';
 /**
- * The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [themeing guide](../concepts/themeing-and-css.mdx) gives a complete overview about the topic.
+ * The `ThemeService` can be used to change the theme of the chat UI and to customize the theme. Our [theming guide](../theming/introduction.mdx) gives a complete overview about the topic.
  */
 export declare class ThemeService {
     /**
      * A Subject that can be used to get or set the currently active theme.
      */
-    theme$: BehaviorSubject<Theme>;
+    theme$: BehaviorSubject<string>;
+    /**
+     * Stream chat theme version - this is used internally by some UI components of the SDK, integrators shouldn't need to use this variable
+     */
+    themeVersion: '1' | '2';
     private _customLightThemeVariables;
     private _customDarkThemeVariables;
     private defaultDarkModeVariables;
@@ -16,6 +20,7 @@ export declare class ThemeService {
     constructor();
     /**
      * A getter that returns the currently set custom light theme variables.
+     * @deprecated Only use with [theme v1](../concepts/theming-and-css.mdx)
      * @returns An object where the keys are theme variables, and the values are the currently set CSS values.
      */
     get customLightThemeVariables(): {
@@ -23,6 +28,7 @@ export declare class ThemeService {
     } | undefined;
     /**
      * A setter that can be used to overwrite the values of the CSS theme variables of the light theme.
+     * @deprecated Only use with [theme v1](../concepts/theming-and-css.mdx)
      * @param variables An object where the keys are theme variables, and the values are CSS values.
      */
     set customLightThemeVariables(variables: {
@@ -30,6 +36,7 @@ export declare class ThemeService {
     } | undefined);
     /**
      * A getter that returns the currently set custom dark theme variables.
+     * @deprecated Only use with [theme v1](../concepts/theming-and-css.mdx)
      * @returns An object where the keys are theme variables, and the values are the currently set CSS values.
      */
     get customDarkThemeVariables(): {
@@ -37,6 +44,7 @@ export declare class ThemeService {
     } | undefined;
     /**
      * A setter that can be used to overwrite the values of the CSS theme variables of the dark theme.
+     * @deprecated Only use with [theme v1](../concepts/theming-and-css.mdx)
      * @param variables An object where the keys are theme variables, and the values are CSS values.
      */
     set customDarkThemeVariables(variables: {

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

@@ -1,7 +1,9 @@
 import { OnDestroy } from '@angular/core';
+import { Channel } from 'stream-chat';
+import { ChatClientService } from '../chat-client.service';
 import { ChannelService } from '../channel.service';
 import { CustomTemplatesService } from '../custom-templates.service';
-import { StreamMessage, ThreadHeaderContext } from '../types';
+import { DefaultStreamChatGenerics, 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.
@@ -9,16 +11,16 @@ import * as i0 from "@angular/core";
 export declare class ThreadComponent implements OnDestroy {
     customTemplatesService: CustomTemplatesService;
     private channelService;
+    private chatClientService;
     private class;
     parentMessage: StreamMessage | undefined;
+    channel: Channel<DefaultStreamChatGenerics> | undefined;
     private subscriptions;
-    constructor(customTemplatesService: CustomTemplatesService, channelService: ChannelService);
+    constructor(customTemplatesService: CustomTemplatesService, channelService: ChannelService, chatClientService: ChatClientService);
     ngOnDestroy(): void;
     getThreadHeaderContext(): ThreadHeaderContext;
-    getReplyCountParam(parentMessage: StreamMessage | undefined): {
-        replyCount: number | undefined;
-    };
     closeThread(): void;
+    get channelName(): string | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<ThreadComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ThreadComponent, "stream-thread", never, {}, {}, never, ["[name=\"thread-message-list\"]", "[name=\"thread-message-input\"]"]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ThreadComponent, "stream-thread", never, {}, {}, never, ["*"]>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stream-chat-angular",
-  "version": "3.6.0",
+  "version": "4.0.0-theming-v2.2",
   "description": "Angular components to create chat conversations or livestream style chat",
   "author": "GetStream",
   "homepage": "https://getstream.io/chat/",
@@ -9,16 +9,18 @@
     "url": "https://github.com/GetStream/stream-chat-angular.git"
   },
   "peerDependencies": {
-    "@angular/common": "^12.2.0 || ^13.0.0",
-    "@angular/core": "^12.2.0 || ^13.0.0",
+    "@angular/common": "^12.2.0 || ^13.0.0 || ^14.0.0",
+    "@angular/core": "^12.2.0 || ^13.0.0 || ^14.0.0",
     "@ngx-translate/core": "^13.0.0 || ^14.0.0",
     "stream-chat": "^6.4.0"
   },
   "dependencies": {
     "angular-mentions": "^1.4.0",
     "@stream-io/transliterate": "^1.5.2",
+    "@popperjs/core": "^2.11.5",
     "dayjs": "^1.10.7",
     "emoji-regex": "^10.0.0",
+    "ngx-popperjs": "^12.2.1",
     "pretty-bytes": "^5.6.0",
     "tslib": "^2.3.0",
     "uuidv4": "^6.2.12"

package/public-api.d.ts

@@ -38,7 +38,6 @@ export * from './lib/modal/modal.component';
 export * from './lib/read-by';
 export * from './lib/is-image-attachment';
 export * from './lib/is-image-file';
-export * from './lib/device-width';
 export * from './lib/message-preview';
 export * from './lib/notification.service';
 export * from './lib/transliteration.service';