diff --git a/.github/workflows/workflow.yml b/.github/workflows/workflow.yml index 377569ef..f08c4e5f 100644 --- a/.github/workflows/workflow.yml +++ b/.github/workflows/workflow.yml @@ -3,6 +3,7 @@ on: push: branches: - master + - feat/ngx-translate-v18-support pull_request: branches: - master diff --git a/README.md b/README.md index 095b0381..99dbaa25 100644 --- a/README.md +++ b/README.md @@ -52,10 +52,20 @@ Check out our current openings and apply via [Stream's website](https://getstrea ### Install with NPM -Supported Angular versions: **Angular 17-21** +Supported Angular versions: **Angular 17-22** _Zoneless mode isn't yet supported_ +`stream-chat-angular` supports both `@ngx-translate/core` v17 and v18. Use **v18 on Angular 18+** and **v17 on Angular 17** (v18 requires Angular 18 or newer). + +Run this command if you are using **Angular 22**: + +```shell +npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@21 --legacy-peer-deps +``` + +> `ngx-float-ui` does not have an Angular 22 build yet, so install its latest (v21) with `--legacy-peer-deps` until an Angular 22 release is available. + Run this command if you are using **Angular 21**: ```shell @@ -83,7 +93,7 @@ npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@18 Run this command if you are using **Angular 17**: ```shell -npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@17 +npm install stream-chat-angular stream-chat @ngx-translate/core@17 ngx-float-ui@17 ``` Supported node verisons: 18+ diff --git a/package-lock.json b/package-lock.json index f8148cb8..aa82624a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,9 +21,9 @@ "@ctrl/ngx-emoji-mart": "^8.2.0", "@floating-ui/dom": "^1.6.3", "@ngx-translate/core": "^17.0.0", + "@stream-io/angular-mentions": "1.5.0", "@stream-io/stream-chat-css": "5.14.0", "@stream-io/transliterate": "^1.5.2", - "angular-mentions": "1.5.0", "dayjs": "^1.11.10", "dotenv": "^16.4.5", "emoji-regex": "^10.3.0", @@ -756,18 +756,6 @@ "node": ">=12" } }, - "node_modules/@angular-devkit/build-angular/node_modules/@types/node": { - "version": "24.10.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", - "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "undici-types": "~7.16.0" - } - }, "node_modules/@angular-devkit/build-angular/node_modules/@vitejs/plugin-basic-ssl": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz", @@ -7108,6 +7096,19 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/@stream-io/angular-mentions": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@stream-io/angular-mentions/-/angular-mentions-1.5.0.tgz", + "integrity": "sha512-tSfo/FJd3A90YXe8hzJ82FyoAnQCJsn0L5HC3UyOeKtgz6zpWzgLvdMvIYI5+hJNG/tUyXxHDtQitreBXteBPg==", + "license": "MIT", + "dependencies": { + "tslib": "^2.0.0" + }, + "peerDependencies": { + "@angular/common": ">=13.0.0", + "@angular/core": ">=13.0.0" + } + }, "node_modules/@stream-io/stream-chat-css": { "version": "5.14.0", "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-5.14.0.tgz", @@ -9388,19 +9389,6 @@ "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==", "dev": true }, - "node_modules/angular-mentions": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/angular-mentions/-/angular-mentions-1.5.0.tgz", - "integrity": "sha512-6l63v7AvrX9vFzj2h7jAPTnQ390IomCz3HiQP+b3PnDvaZiycd+tiVavi5RxAIX8WYjsamAR+tTPCkOkBkqZ+w==", - "license": "MIT", - "dependencies": { - "tslib": "^2.0.0" - }, - "peerDependencies": { - "@angular/common": ">=7.2.0", - "@angular/core": ">=7.2.0" - } - }, "node_modules/ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -24475,15 +24463,6 @@ "node": ">=14.0" } }, - "node_modules/undici-types": { - "version": "7.16.0", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz", - "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/unicode-canonical-property-names-ecmascript": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz", @@ -25923,17 +25902,6 @@ "dev": true, "optional": true }, - "@types/node": { - "version": "24.10.1", - "resolved": "https://registry.npmjs.org/@types/node/-/node-24.10.1.tgz", - "integrity": "sha512-GNWcUTRBgIRJD5zj+Tq0fKOJ5XZajIiBroOF0yvj2bSU1WvNdYS/dn9UxwsujGW4JX06dnHyjV2y9rRaybH0iQ==", - "dev": true, - "optional": true, - "peer": true, - "requires": { - "undici-types": "~7.16.0" - } - }, "@vitejs/plugin-basic-ssl": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@vitejs/plugin-basic-ssl/-/plugin-basic-ssl-1.1.0.tgz", @@ -29881,6 +29849,14 @@ "integrity": "sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==", "dev": true }, + "@stream-io/angular-mentions": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/@stream-io/angular-mentions/-/angular-mentions-1.5.0.tgz", + "integrity": "sha512-tSfo/FJd3A90YXe8hzJ82FyoAnQCJsn0L5HC3UyOeKtgz6zpWzgLvdMvIYI5+hJNG/tUyXxHDtQitreBXteBPg==", + "requires": { + "tslib": "^2.0.0" + } + }, "@stream-io/stream-chat-css": { "version": "5.14.0", "resolved": "https://registry.npmjs.org/@stream-io/stream-chat-css/-/stream-chat-css-5.14.0.tgz", @@ -31442,14 +31418,6 @@ "dev": true, "requires": {} }, - "angular-mentions": { - "version": "1.5.0", - "resolved": "https://registry.npmjs.org/angular-mentions/-/angular-mentions-1.5.0.tgz", - "integrity": "sha512-6l63v7AvrX9vFzj2h7jAPTnQ390IomCz3HiQP+b3PnDvaZiycd+tiVavi5RxAIX8WYjsamAR+tTPCkOkBkqZ+w==", - "requires": { - "tslib": "^2.0.0" - } - }, "ansi-colors": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", @@ -42027,14 +41995,6 @@ "@fastify/busboy": "^2.0.0" } }, - "undici-types": { - "version": "7.16.0", - "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz", - "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==", - "dev": true, - "optional": true, - "peer": true - }, "unicode-canonical-property-names-ecmascript": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz", diff --git a/package.json b/package.json index 5c272d0e..07a138cc 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "branches": [ "master", { - "name": "support-for-float-ui-21", + "name": "feat/ngx-translate-v18-support", "prerelease": "rc", "channel": "rc" } @@ -118,7 +118,7 @@ "@ngx-translate/core": "^17.0.0", "@stream-io/stream-chat-css": "5.14.0", "@stream-io/transliterate": "^1.5.2", - "angular-mentions": "1.5.0", + "@stream-io/angular-mentions": "1.5.0", "dayjs": "^1.11.10", "dotenv": "^16.4.5", "emoji-regex": "^10.3.0", diff --git a/projects/stream-chat-angular/README.md b/projects/stream-chat-angular/README.md index efd8bcfb..6f6a590a 100644 --- a/projects/stream-chat-angular/README.md +++ b/projects/stream-chat-angular/README.md @@ -51,7 +51,17 @@ Check out our current openings and apply via [Stream's website](https://getstrea ### Install with NPM -Supported Angular versions: **Angular 17-21** +Supported Angular versions: **Angular 17-22** + +`stream-chat-angular` supports both `@ngx-translate/core` v17 and v18. Use **v18 on Angular 18+** and **v17 on Angular 17** (v18 requires Angular 18 or newer). + +Run this command if you are using **Angular 22**: + +```shell +npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@21 --legacy-peer-deps +``` + +> `ngx-float-ui` does not have an Angular 22 build yet, so install its latest (v21) with `--legacy-peer-deps` until an Angular 22 release is available. Run this command if you are using **Angular 21**: @@ -80,7 +90,7 @@ npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@18 Run this command if you are using **Angular 17**: ```shell -npm install stream-chat-angular stream-chat @ngx-translate/core ngx-float-ui@17 +npm install stream-chat-angular stream-chat @ngx-translate/core@17 ngx-float-ui@17 ``` Supported node verisons: 18+ diff --git a/projects/stream-chat-angular/ng-package.json b/projects/stream-chat-angular/ng-package.json index f0393f9a..08faff8a 100644 --- a/projects/stream-chat-angular/ng-package.json +++ b/projects/stream-chat-angular/ng-package.json @@ -13,7 +13,7 @@ "pretty-bytes", "emoji-regex", "@floating-ui/dom", - "angular-mentions", + "@stream-io/angular-mentions", "ngx-float-ui" ] } diff --git a/projects/stream-chat-angular/package.json b/projects/stream-chat-angular/package.json index 28643795..d6efbfe3 100644 --- a/projects/stream-chat-angular/package.json +++ b/projects/stream-chat-angular/package.json @@ -1,6 +1,6 @@ { "name": "stream-chat-angular", - "version": "7.1.5", + "version": "7.2.0", "description": "Angular components to create chat conversations or livestream style chat", "author": "GetStream", "homepage": "https://getstream.io/chat/", @@ -17,11 +17,11 @@ } }, "peerDependencies": { - "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^21.0.0-rc.2", - "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^21.0.0-rc.2", - "@angular/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^21.0.0-rc.2", + "@angular/common": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^21.0.0-rc.2 || ^22.0.0", + "@angular/core": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^21.0.0-rc.2 || ^22.0.0", + "@angular/forms": "^17.0.0 || ^18.0.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^21.0.0-rc.2 || ^22.0.0", "@breezystack/lamejs": "^1.2.7", - "@ngx-translate/core": "^17.0.0", + "@ngx-translate/core": "^17.0.0 || ^18.0.0", "rxjs": "^7.4.0", "stream-chat": "^9.20.0" }, @@ -36,11 +36,11 @@ "dependencies": { "@floating-ui/dom": "^1.6.3", "@stream-io/transliterate": "^1.5.2", - "angular-mentions": "^1.5.0", + "@stream-io/angular-mentions": "^1.5.0", "dayjs": "^1.11.10", "emoji-regex": "^10.3.0", "fix-webm-duration": "^1.0.6", - "ngx-float-ui": "^17.0.0 || ^18.0.0 || ^18.0.1-rc.0 || ^19.0.0 || ^20.0.0 || ^21.0.0", + "ngx-float-ui": "^17.0.0 || ^18.0.0 || ^18.0.1-rc.0 || ^19.0.0 || ^20.0.0 || ^21.0.0 || ^22.0.0", "pretty-bytes": "^6.1.1", "tslib": "^2.3.0", "uuid": "^9.0.1" diff --git a/projects/stream-chat-angular/src/assets/version.ts b/projects/stream-chat-angular/src/assets/version.ts index eec885d9..8bc2d056 100644 --- a/projects/stream-chat-angular/src/assets/version.ts +++ b/projects/stream-chat-angular/src/assets/version.ts @@ -1 +1 @@ -export const version = '7.1.5'; +export const version = '7.2.0'; diff --git a/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.spec.ts b/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.spec.ts index db993fef..9af2f0f6 100644 --- a/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.spec.ts +++ b/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.spec.ts @@ -6,7 +6,7 @@ import { tick, } from '@angular/core/testing'; import { TranslateModule } from '@ngx-translate/core'; -import { MentionModule } from 'angular-mentions'; +import { MentionModule } from '@stream-io/angular-mentions'; import { Channel } from 'stream-chat'; import { ChatClientService } from '../../chat-client.service'; import { ChannelService } from '../../channel.service'; diff --git a/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts b/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts index 8b5517e8..1f4324c2 100644 --- a/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts +++ b/projects/stream-chat-angular/src/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.ts @@ -12,7 +12,7 @@ import { TemplateRef, ViewChild, } from '@angular/core'; -import { MentionConfig, Mentions } from 'angular-mentions'; +import { MentionConfig, Mentions } from '@stream-io/angular-mentions'; import { MentionAutcompleteListItemContext, MentionAutcompleteListItem, diff --git a/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts b/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts index 0c8a43dd..0edcea2b 100644 --- a/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts +++ b/projects/stream-chat-angular/src/lib/message-input/message-input.component.ts @@ -2,7 +2,6 @@ import { AfterViewInit, ChangeDetectorRef, Component, - ComponentFactoryResolver, ComponentRef, ContentChild, ElementRef, @@ -192,7 +191,6 @@ export class MessageInputComponent private configService: MessageInputConfigService, @Inject(textareaInjectionToken) private textareaType: Type, - private componentFactoryResolver: ComponentFactoryResolver, private cdRef: ChangeDetectorRef, private emojiInputService: EmojiInputService, readonly customTemplatesService: CustomTemplatesService, @@ -708,12 +706,9 @@ export class MessageInputComponent return; } - const componentFactory = - this.componentFactoryResolver.resolveComponentFactory(this.textareaType); - this.textareaRef = - this.textareaAnchor.viewContainerRef.createComponent( - componentFactory - ); + this.textareaRef = this.textareaAnchor.viewContainerRef.createComponent( + this.textareaType + ); this.cdRef.detectChanges(); } diff --git a/projects/stream-chat-angular/src/lib/message/message.component.html b/projects/stream-chat-angular/src/lib/message/message.component.html index 1e165c84..2e5bfd5e 100644 --- a/projects/stream-chat-angular/src/lib/message/message.component.html +++ b/projects/stream-chat-angular/src/lib/message/message.component.html @@ -291,8 +291,8 @@
-
- streamChat.This message was deleted... +
+ {{ "streamChat.This message was deleted..." | translate }}
@@ -432,20 +432,18 @@
streamChat.Edited{{ "streamChat.Edited" | translate }}
- streamChat.Edited + {{ "streamChat.Edited" | translate }}