V5

.eslintrc.json

@@ -1,10 +1,7 @@
 {
   "root": true,
   "ignorePatterns": ["projects/**/*"],
-  "plugins": ["unused-imports", "cypress", "jasmine"],
-  "env": {
-    "jasmine": true
-  },
+  "plugins": ["unused-imports"],
   "overrides": [
     {
       "files": ["*.ts"],
@@ -16,19 +13,38 @@
         "eslint:recommended",
         "plugin:@typescript-eslint/recommended-requiring-type-checking",
         "plugin:@angular-eslint/all",
-        "plugin:cypress/recommended",
-        "plugin:jasmine/recommended",
         "plugin:prettier/recommended" // This should always be the last in the extends array
       ],
       "rules": {
         "@angular-eslint/sort-ngmodule-metadata-arrays": "off",
         "@angular-eslint/prefer-on-push-component-change-detection": "off",
         "unused-imports/no-unused-imports": "error",
         "no-console": ["error", { "allow": ["warn", "error"] }],
-        "jasmine/no-spec-dupes": [1, "branch"],
         "@typescript-eslint/unbound-method": "off"
       }
     },
+    {
+      "files": ["*.spec.ts", "**/mocks/*.ts"],
+      "parserOptions": {
+        "project": ["tsconfig.json"],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "eslint:recommended",
+        "plugin:@typescript-eslint/recommended-requiring-type-checking",
+        "plugin:@angular-eslint/all",
+        "plugin:prettier/recommended" // This should always be the last in the extends array
+      ],
+      "rules": {
+        "@angular-eslint/sort-ngmodule-metadata-arrays": "off",
+        "@angular-eslint/prefer-on-push-component-change-detection": "off",
+        "unused-imports/no-unused-imports": "error",
+        "no-console": ["error", { "allow": ["warn", "error"] }],
+        "@typescript-eslint/unbound-method": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/ban-types": "off"
+      }
+    },
     {
       "files": ["*.html"],
       "extends": [
@@ -39,7 +55,12 @@
         "@angular-eslint/template/i18n": "off",
         "@angular-eslint/template/cyclomatic-complexity": "off",
         "@angular-eslint/template/no-call-expression": "off",
-        "@angular-eslint/template/no-autofocus": "off"
+        "@angular-eslint/template/no-autofocus": "off",
+        "@angular-eslint/template/no-interpolation-in-attributes": "off",
+        "@angular-eslint/template/button-has-type": "off",
+        "@angular-eslint/template/no-inline-styles": "off",
+        "@angular-eslint/template/accessibility-interactive-supports-focus": "off",
+        "@angular-eslint/template/attributes-order": "off"
       }
     }
   ]

.github/workflows/workflow.yml

@@ -15,7 +15,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
 
     steps:
       - uses: actions/checkout@v2

.gitignore

@@ -31,6 +31,7 @@ chrome-profiler-events*.json
 .history/*
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage
@@ -56,3 +57,4 @@ Thumbs.db
 
 # Encapsulated stream-chat-css
 projects/stream-chat-angular/src/assets/styles
+projects/stream-chat-angular/src/assets/assets

README.md

@@ -10,10 +10,10 @@
 
 - [Register](https://getstream.io/chat/trial/) to get an API key for Stream Chat
 - [Angular Chat Tutorial](https://getstream.io/chat/angular/tutorial/)
-- [Demo Apps](https://getstream.io/chat/demos/)
 - [Docs](https://getstream.io/chat/docs/sdk/angular/)
 - [Chat UI Kit](https://getstream.io/chat/ui-kit/)
 - [Demo application](https://angular-chat-demo-getstreamio.vercel.app/)
+- [Codesandbox](https://codesandbox.io/p/devbox/stream-chat-angular-sample-app-gkczc5?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A11%2C32)
 
 With our component library, you can build a variety of chat use cases, including:
 
@@ -52,41 +52,33 @@ Check out our current openings and apply via [Stream's website](https://getstrea
 
 ### Install with NPM
 
-Run the following command if you are using **Angular 17**
+Supported Angular versions: **Angular 15-18**
 
-```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core
-```
-
-Run the following command if you are using **Angular 16**:
+Run this command if you are using **Angular 18**:
 
 ```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core
+npm install stream-chat-angular ngx-float-ui@beta
 ```
 
-Run the following command if you are using **Angular 15**:
+Run this command if you are using **Angular 17**:
 
 ```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core@14 ngx-popperjs@15
+npm install stream-chat-angular ngx-float-ui@17
 ```
 
-Run the following command if you are using **Angular 14**:
+Run this command if you are using **Angular 16**:
 
 ```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core@14 ngx-popperjs@14
+npm install stream-chat-angular ngx-float-ui@16
 ```
 
-Run the following command if you are using **Angular 13**:
+Run this command if you are using **Angular 15**:
 
 ```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core@14 [email protected] ngx-popperjs@13 --legacy-peer-deps
+npm install stream-chat-angular @ngx-translate/core@14 ngx-float-ui@15
 ```
 
-Run this command if you are using **Angular 12**:
-
-```shell
-npm install stream-chat-angular stream-chat @ngx-translate/core@14 [email protected] ngx-popperjs@12 --legacy-peer-deps
-```
+Supported node verisons: 18+
 
 ## Sample App
 
@@ -108,8 +100,6 @@ Run `npm install` to install dependencies.
 
 Run `npm start` and navigate to `http://localhost:4200/`.
 
-Preferred Node version: v16.
-
 ## Customization examples
 
 This repository includes a sample app that showcases how you can provide your own template for different components within the SDK:
@@ -128,8 +118,6 @@ Run `npm install` to install dependencies.
 
 Run `npm run start:customizations-example` and navigate to `http://localhost:4200/`.
 
-Preferred Node version: v16.
-
 ## Local development
 
 This repository includes a sample app to test our library.
@@ -151,5 +139,3 @@ A note about the documentation:
 - Documentations for Angular services are generated from doc comments in the source files (not under source control)
 - Documentations for inputs and outputs of Angular components are generated from doc comments in the source files (not under source control)
 - Everything else in the documentation is written in `mdx` files located in the `docusaurus` folder
-
-Preferred Node version: v16.

angular.json

@@ -1,7 +1,8 @@
 {
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "cli": {
-    "defaultCollection": "@angular-eslint/schematics"
+    "schematicCollections": ["@angular-eslint/schematics"],
+    "analytics": false
   },
   "version": 1,
   "newProjectRoot": "projects",
@@ -323,5 +324,12 @@
       }
     }
   },
-  "defaultProject": "stream-chat-angular"
+  "schematics": {
+    "@angular-eslint/schematics:application": {
+      "setParserOptionsProject": true
+    },
+    "@angular-eslint/schematics:library": {
+      "setParserOptionsProject": true
+    }
+  }
 }

copy-generated-service-docs.ts

@@ -31,7 +31,10 @@ fs.readdir(sourcePath, (err: any, files: string[]) => {
       }
 
       // Remove the thre prefix from the title
-      const result = data.replace(/# Class:/g, '#').replace('<T\\>', '');
+      const result = data
+        .replace(/# Class:/g, '#')
+        .replace('<T\\>', '')
+        .replace('\\', '');
 
       fs.writeFile(`${sourcePath}/${file}`, result, 'utf8', (err: any) => {
         if (err) {

docusaurus/angular-docusaurus-dontent-docs.plugin.js

@@ -5,13 +5,13 @@ module.exports = {
       {
         lastVersion: "current",
         versions: {
-          5: {
-            label: "v5 (beta)",
-            banner: "unreleased",
-            path: "5",
-          },
           current: {
+            label: "v5",
+          },
+          4: {
             label: "v4",
+            banner: "unmaintained",
+            path: "4",
           },
         },
       },

docusaurus/angular_versioned_docs/version-5/code-examples/channel-invites.mdx → docusaurus/angular_versioned_docs/version-4/code-examples/channel-invites.mdx

@@ -401,6 +401,14 @@ Add a reference to the template in your `app.component.ts`:
 
 #### Displaying the invitations
 
+The [`ChatClientService`](../services/ChatClientService.mdx) can keep track of pending invites, to enable this you have to initialize the service with the following flag:
+
+```typescript
+this.chatService.init("<API key>", "<user>", "<token provider>", {
+  trackPendingChannelInvites: true,
+});
+```
+
 The `pendingInvites$` Observable on the [`ChatClientService`](../services/ChatClientService.mdx) can notify us about the pending invitations of the current user. Let's subscribe to this Observable and [display the invites](../services/NotificationService.mdx) in the `ngOnInit` method of the `app.component.ts`
 
 ```typescript

docusaurus/angular_versioned_docs/version-5/components/AttachmentListComponent.mdx → docusaurus/angular_versioned_docs/version-4/components/AttachmentListComponent.mdx

@@ -122,7 +122,7 @@ The id of the message the attachments belong to
 
 #### Defined in
 
-[lib/attachment-list/attachment-list.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L40)
+[lib/attachment-list/attachment-list.component.ts:40](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L40)
 
 ---
 
@@ -134,7 +134,7 @@ The parent id of the message the attachments belong to
 
 #### Defined in
 
-[lib/attachment-list/attachment-list.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L44)
+[lib/attachment-list/attachment-list.component.ts:44](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L44)
 
 ---
 
@@ -146,7 +146,7 @@ The attachments to display
 
 #### Defined in
 
-[lib/attachment-list/attachment-list.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L48)
+[lib/attachment-list/attachment-list.component.ts:48](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L48)
 
 ---
 
@@ -158,6 +158,6 @@ Emits the state of the image carousel window
 
 #### Defined in
 
-[lib/attachment-list/attachment-list.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L52)
+[lib/attachment-list/attachment-list.component.ts:52](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-list/attachment-list.component.ts#L52)
 
 [//]: # "End of generated content"

docusaurus/angular_versioned_docs/version-5/components/AttachmentPreviewListComponent.mdx → docusaurus/angular_versioned_docs/version-4/components/AttachmentPreviewListComponent.mdx

@@ -47,7 +47,7 @@ A stream that emits the current file uploads and their states
 
 #### Defined in
 
-[lib/attachment-preview-list/attachment-preview-list.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L18)
+[lib/attachment-preview-list/attachment-preview-list.component.ts:18](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L18)
 
 ---
 
@@ -59,7 +59,7 @@ An output to notify the parent component if the user tries to retry a failed upl
 
 #### Defined in
 
-[lib/attachment-preview-list/attachment-preview-list.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L22)
+[lib/attachment-preview-list/attachment-preview-list.component.ts:22](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L22)
 
 ---
 
@@ -71,6 +71,6 @@ An output to notify the parent component if the user wants to delete a file
 
 #### Defined in
 
-[lib/attachment-preview-list/attachment-preview-list.component.ts:26](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L26)
+[lib/attachment-preview-list/attachment-preview-list.component.ts:26](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/attachment-preview-list/attachment-preview-list.component.ts#L26)
 
 [//]: # "End of generated content"

docusaurus/angular_versioned_docs/version-5/components/AutocompleteTextareaComponent.mdx → docusaurus/angular_versioned_docs/version-4/components/AutocompleteTextareaComponent.mdx

@@ -51,7 +51,7 @@ TextareaInterface.value
 
 #### Defined in
 
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
+[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:49](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L49)
 
 ---
 
@@ -67,7 +67,7 @@ TextareaInterface.placeholder
 
 #### Defined in
 
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
+[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:53](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L53)
 
 ---
 
@@ -83,7 +83,7 @@ TextareaInterface.areMentionsEnabled
 
 #### Defined in
 
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
+[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:57](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L57)
 
 ---
 
@@ -99,7 +99,7 @@ TextareaInterface.inputMode
 
 #### Defined in
 
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
+[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:61](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L61)
 
 ---
 
@@ -115,7 +115,7 @@ TextareaInterface.mentionScope
 
 #### Defined in
 
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
+[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:65](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L65)
 
 ---
 
@@ -131,7 +131,7 @@ TextareaInterface.autoFocus
 
 #### Defined in
 
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
+[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:69](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L69)
 
 ---
 
@@ -147,7 +147,7 @@ TextareaInterface.valueChange
 
 #### Defined in
 
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
+[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:73](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L73)
 
 ---
 
@@ -163,7 +163,7 @@ TextareaInterface.send
 
 #### Defined in
 
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
+[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:77](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L77)
 
 ---
 
@@ -179,6 +179,6 @@ TextareaInterface.userMentions
 
 #### Defined in
 
-[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/f9a1611/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
+[lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts:81](https://github.com/GetStream/stream-chat-angular/blob/2451bc8/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts#L81)
 
 [//]: # "End of generated content"