stream-chat-angular 4.54.0 → 4.55.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/version.d.ts +1 -1
- package/bundles/stream-chat-angular.umd.js +21 -9
- package/bundles/stream-chat-angular.umd.js.map +1 -1
- package/esm2015/assets/version.js +2 -2
- package/esm2015/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.js +6 -4
- package/esm2015/lib/message-reactions/message-reactions.component.js +16 -6
- package/esm2015/lib/message-reactions.service.js +1 -1
- package/esm2015/lib/types.js +1 -1
- package/fesm2015/stream-chat-angular.js +21 -9
- package/fesm2015/stream-chat-angular.js.map +1 -1
- package/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.d.ts +3 -2
- package/lib/message-reactions/message-reactions.component.d.ts +1 -1
- package/lib/message-reactions.service.d.ts +7 -1
- package/lib/types.d.ts +4 -0
- package/package.json +1 -1
- package/src/assets/version.ts +1 -1
package/assets/version.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export declare const version = "4.
|
|
1
|
+
export declare const version = "4.55.0";
|
|
@@ -356,7 +356,7 @@
|
|
|
356
356
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
357
357
|
}
|
|
358
358
|
|
|
359
|
-
var version = '4.
|
|
359
|
+
var version = '4.55.0';
|
|
360
360
|
|
|
361
361
|
/**
|
|
362
362
|
* The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
|
|
@@ -5508,13 +5508,23 @@
|
|
|
5508
5508
|
MessageReactionsComponent.prototype.getEmojiByReaction = function (reactionType) {
|
|
5509
5509
|
return this.messageReactionsService.reactions[reactionType];
|
|
5510
5510
|
};
|
|
5511
|
-
MessageReactionsComponent.prototype.reactionSelected = function (
|
|
5512
|
-
event.stopPropagation();
|
|
5511
|
+
MessageReactionsComponent.prototype.reactionSelected = function (reactionType) {
|
|
5513
5512
|
if (this.themeService.themeVersion === '1') {
|
|
5514
5513
|
return;
|
|
5515
5514
|
}
|
|
5516
|
-
this.
|
|
5517
|
-
|
|
5515
|
+
if (!this.messageId) {
|
|
5516
|
+
return;
|
|
5517
|
+
}
|
|
5518
|
+
if (this.messageReactionsService.customReactionClickHandler) {
|
|
5519
|
+
this.messageReactionsService.customReactionClickHandler({
|
|
5520
|
+
messageId: this.messageId,
|
|
5521
|
+
reactionType: reactionType,
|
|
5522
|
+
});
|
|
5523
|
+
}
|
|
5524
|
+
else {
|
|
5525
|
+
this.selectedReactionType = reactionType;
|
|
5526
|
+
void this.fetchAllReactions();
|
|
5527
|
+
}
|
|
5518
5528
|
};
|
|
5519
5529
|
MessageReactionsComponent.prototype.getUsersByReaction = function (reactionType) {
|
|
5520
5530
|
return this.latestReactions
|
|
@@ -5632,7 +5642,7 @@
|
|
|
5632
5642
|
return MessageReactionsComponent;
|
|
5633
5643
|
}());
|
|
5634
5644
|
MessageReactionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageReactionsComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: ChannelService }, { token: MessageReactionsService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
5635
|
-
MessageReactionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", isSelectorOpen: "isSelectorOpen", latestReactions: "latestReactions", ownReactions: "ownReactions" }, outputs: { isSelectorOpenChange: "isSelectorOpenChange" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }, { propertyName: "selectorTooltip", first: true, predicate: ["selectorTooltip"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n *ngIf=\"existingReactions.length > 0\"\n class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n [class.str-chat__reaction-list--reverse]=\"true\"\n [class.str-chat__reaction-list-hidden]=\"isSelectorOpen\"\n data-testid=\"reaction-list\"\n>\n <ul class=\"str-chat__message-reactions\">\n <li\n class=\"str-chat__message-reaction\"\n *ngFor=\"\n let reactionType of existingReactions;\n trackBy: trackByMessageReaction\n \"\n [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n data-testclass=\"emoji\"\n (click)=\"reactionSelected(
|
|
5645
|
+
MessageReactionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", isSelectorOpen: "isSelectorOpen", latestReactions: "latestReactions", ownReactions: "ownReactions" }, outputs: { isSelectorOpenChange: "isSelectorOpenChange" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }, { propertyName: "selectorTooltip", first: true, predicate: ["selectorTooltip"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n *ngIf=\"existingReactions.length > 0\"\n class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n [class.str-chat__reaction-list--reverse]=\"true\"\n [class.str-chat__reaction-list-hidden]=\"isSelectorOpen\"\n data-testid=\"reaction-list\"\n>\n <ul class=\"str-chat__message-reactions\">\n <li\n class=\"str-chat__message-reaction\"\n *ngFor=\"\n let reactionType of existingReactions;\n trackBy: trackByMessageReaction\n \"\n [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n data-testclass=\"emoji\"\n (click)=\"reactionSelected(reactionType)\"\n (keyup.enter)=\"reactionSelected(reactionType)\"\n >\n <span class=\"emoji str-chat__message-reaction-emoji\">\n {{ getEmojiByReaction(reactionType) }} \n </span>\n <span\n data-testclass=\"reaction-list-reaction-count\"\n class=\"str-chat__message-reaction-count\"\n >\n {{ messageReactionCounts[reactionType] }}\n </span>\n </li>\n <li>\n <span\n data-testid=\"reactions-count\"\n class=\"str-chat__reaction-list--counter\"\n >{{ reactionsCount }}</span\n >\n </li>\n </ul>\n</div>\n\n<div\n #selectorContainer\n class=\"str-chat__reaction-selector str-chat__message-reaction-selector\"\n *ngIf=\"isSelectorOpen\"\n data-testid=\"reaction-selector\"\n>\n <div\n *ngIf=\"tooltipText\"\n data-testid=\"tooltip\"\n #selectorTooltip\n class=\"str-chat__reaction-selector-tooltip\"\n [ngStyle]=\"{\n left: tooltipPositions?.tooltip + 'px',\n visibility: tooltipPositions ? 'visible' : 'hidden'\n }\"\n >\n <div\n class=\"arrow\"\n [ngStyle]=\"{ left: tooltipPositions?.arrow + 'px' }\"\n ></div>\n <span class=\"latest-user-username\">\n {{ tooltipText }}\n </span>\n </div>\n <ul\n class=\"str-chat__message-reactions-list str-chat__message-reactions-options\"\n >\n <li\n class=\"\n str-chat__message-reactions-option\n str-chat__message-reactions-list-item\n str-chat__emoji\n \"\n *ngFor=\"\n let reactionType of reactionOptions;\n trackBy: trackByMessageReaction\n \"\n [class.str-chat__message-reactions-option-selected]=\"\n isOwnReaction(reactionType)\n \"\n data-testclass=\"emoji-option\"\n (click)=\"react(reactionType)\"\n (keyup.enter)=\"react(reactionType)\"\n >\n <div\n *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n class=\"latest-user str-chat__message-reactions-last-user\"\n (click)=\"hideTooltip()\"\n (keyup.enter)=\"hideTooltip()\"\n (mouseenter)=\"showTooltip($event, reactionType)\"\n (mouseleave)=\"hideTooltip()\"\n attr.data-testid=\"{{ reactionType }}-last-user\"\n >\n <stream-avatar-placeholder\n attr.data-testid=\"{{ reactionType }}-avatar\"\n [imageUrl]=\"user.image\"\n [name]=\"user.name || user.id\"\n [size]=\"20\"\n location=\"reaction\"\n ></stream-avatar-placeholder>\n </div>\n <span\n class=\"\n emoji\n str-chat__emoji-selector-emoji-angular\n str-chat__message-reaction-emoji\n \"\n >\n {{ getEmojiByReaction(reactionType) }}\n </span>\n <span\n *ngIf=\"\n messageReactionCounts[reactionType] &&\n messageReactionCounts[reactionType]! > 0\n \"\n class=\"str-chat__message-reactions-list-item__count\"\n attr.data-testid=\"{{ reactionType }}-reaction-count\"\n >\n {{ messageReactionCounts[reactionType] }}\n </span>\n </li>\n </ul>\n</div>\n\n<ng-container *ngIf=\"selectedReactionType\">\n <ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.modalTemplate$ | async) || defaultModal;\n context: {\n isOpen: !!selectedReactionType,\n messageId: messageId,\n reactionType: selectedReactionType,\n isOpenChangeHandler: isOpenChange\n }\n \"\n ></ng-container>\n</ng-container>\n\n<ng-template\n #defaultModal\n let-isOpen=\"isOpen\"\n let-messageId=\"messageId\"\n let-reactionType=\"reactionType\"\n let-isOpenChangeHandler=\"isOpenChangeHandler\"\n>\n <stream-modal\n class=\"str-chat__message-reactions-details-modal\"\n [isOpen]=\"isOpen\"\n (isOpenChange)=\"isOpenChangeHandler($event)\"\n >\n <div class=\"str-chat__message-reactions-details\">\n <div class=\"str-chat__message-reactions-details-reaction-types\">\n <div\n class=\"str-chat__message-reactions-details-reaction-type\"\n *ngFor=\"\n let reactionType of existingReactions;\n trackBy: trackByMessageReaction\n \"\n attr.data-testid=\"reaction-details-selector-{{ reactionType }}\"\n [class.str-chat__message-reactions-details-reaction-type--selected]=\"\n reactionType === selectedReactionType\n \"\n (click)=\"selectedReactionType = reactionType; allUsers.scrollTop = 0\"\n (keyup.enter)=\"\n selectedReactionType = reactionType; allUsers.scrollTop = 0\n \"\n >\n <span class=\"emoji str-chat__message-reaction-emoji\">\n {{ getEmojiByReaction(reactionType) }} \n </span>\n <span class=\"str-chat__message-reaction-count\">\n {{ messageReactionCounts[reactionType] }}\n </span>\n </div>\n </div>\n <div\n class=\"\n emoji\n str-chat__message-reaction-emoji str-chat__message-reaction-emoji-big\n \"\n >\n {{ getEmojiByReaction(selectedReactionType!) }}\n </div>\n <div\n #allUsers\n data-testid=\"all-reacting-users\"\n class=\"str-chat__message-reactions-details-reacting-users\"\n >\n <stream-loading-indicator\n *ngIf=\"isLoading; else reactions\"\n ></stream-loading-indicator>\n <ng-template #reactions>\n <div\n class=\"str-chat__message-reactions-details-reacting-user\"\n *ngFor=\"\n let user of getAllUsersByReaction(selectedReactionType);\n trackBy: trackByUserId\n \"\n >\n <stream-avatar-placeholder\n data-testclass=\"avatar\"\n class=\"str-chat__avatar str-chat__avatar--circle\"\n style=\"max-height: 100%; overflow-y: hidden\"\n [size]=\"30\"\n [imageUrl]=\"user.image\"\n [name]=\"user.name\"\n type=\"user\"\n location=\"reaction\"\n [user]=\"user\"\n ></stream-avatar-placeholder>\n <span\n data-testclass=\"reaction-user-username\"\n class=\"str-chat__user-item--name\"\n >{{ user.name }}</span\n >\n </div>\n </ng-template>\n </div>\n </div>\n </stream-modal>\n</ng-template>\n", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i8__namespace.AsyncPipe } });
|
|
5636
5646
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageReactionsComponent, decorators: [{
|
|
5637
5647
|
type: i0.Component,
|
|
5638
5648
|
args: [{
|
|
@@ -6164,7 +6174,7 @@
|
|
|
6164
6174
|
* The `AutocompleteTextarea` component is used by the [`MessageInput`](./MessageInputComponent.mdx) component to display the input HTML element where users can type their message.
|
|
6165
6175
|
*/
|
|
6166
6176
|
var AutocompleteTextareaComponent = /** @class */ (function () {
|
|
6167
|
-
function AutocompleteTextareaComponent(channelService, chatClientService, transliterationService, emojiInputService, customTemplatesService, themeService) {
|
|
6177
|
+
function AutocompleteTextareaComponent(channelService, chatClientService, transliterationService, emojiInputService, customTemplatesService, themeService, cdRef) {
|
|
6168
6178
|
var _this = this;
|
|
6169
6179
|
this.channelService = channelService;
|
|
6170
6180
|
this.chatClientService = chatClientService;
|
|
@@ -6172,6 +6182,7 @@
|
|
|
6172
6182
|
this.emojiInputService = emojiInputService;
|
|
6173
6183
|
this.customTemplatesService = customTemplatesService;
|
|
6174
6184
|
this.themeService = themeService;
|
|
6185
|
+
this.cdRef = cdRef;
|
|
6175
6186
|
this.class = 'str-chat__textarea str-chat__message-textarea-angular-host';
|
|
6176
6187
|
/**
|
|
6177
6188
|
* The value of the input HTML element.
|
|
@@ -6368,6 +6379,7 @@
|
|
|
6368
6379
|
this.slashCommandConfig,
|
|
6369
6380
|
];
|
|
6370
6381
|
this.autocompleteConfig = Object.assign({}, this.autocompleteConfig);
|
|
6382
|
+
this.cdRef.detectChanges();
|
|
6371
6383
|
return [2 /*return*/];
|
|
6372
6384
|
}
|
|
6373
6385
|
});
|
|
@@ -6389,7 +6401,7 @@
|
|
|
6389
6401
|
};
|
|
6390
6402
|
return AutocompleteTextareaComponent;
|
|
6391
6403
|
}());
|
|
6392
|
-
AutocompleteTextareaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
6404
|
+
AutocompleteTextareaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AutocompleteTextareaComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: TransliterationService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: ThemeService }, { token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
6393
6405
|
AutocompleteTextareaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope", autoFocus: "autoFocus" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<textarea\n [value]=\"value || ''\"\n [autofocus]=\"autoFocus\"\n data-testid=\"textarea\"\n #input\n placeholder=\"{{ placeholder | translate }}\"\n class=\"\n rta__textarea\n str-chat__textarea__textarea\n str-chat__angular-textarea\n str-chat__message-textarea\n \"\n rows=\"1\"\n (input)=\"inputChanged()\"\n (keydown.enter)=\"enterHit($event)\"\n [mentionConfig]=\"autocompleteConfig\"\n (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n [mentionListTemplate]=\"autocompleteItem\"\n (blur)=\"inputLeft()\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n <div class=\"rta__entity\" *ngSwitchCase=\"'mention'\">\n <ng-container\n *ngTemplateOutlet=\"\n mentionAutocompleteItemTemplate || defaultMentionTemplate;\n context: { item: item }\n \"\n ></ng-container>\n </div>\n <div class=\"rta__entity\" *ngSwitchCase=\"'command'\">\n <ng-container\n *ngTemplateOutlet=\"\n commandAutocompleteItemTemplate || defaultCommandTemplate;\n context: { item: item }\n \"\n ></ng-container>\n </div>\n </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n <div class=\"str-chat__slash-command\">\n <span class=\"str-chat__slash-command-header\">\n <strong\n class=\"str-chat__slash-command-name\"\n data-testclass=\"command-name\"\n >{{ item.name }}</strong\n >\n <span class=\"str-chat__slash-command-args\"\n >/{{ item.name }} {{ item.args }}</span\n >\n </span>\n <br />\n </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n <div class=\"str-chat__user-item\">\n <stream-avatar-placeholder\n data-testclass=\"avatar\"\n class=\"str-chat__avatar str-chat__avatar--circle\"\n [style]=\"'height: ' + themeVersion === '2' ? 56 : 20 + 'px'\"\n [size]=\"themeVersion === '2' ? 56 : 20\"\n [imageUrl]=\"item.image || item.user?.image\"\n [name]=\"item.autocompleteLabel\"\n type=\"user\"\n location=\"autocomplete-item\"\n [user]=\"item.user || item\"\n ></stream-avatar-placeholder>\n <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n item.autocompleteLabel\n }}</span>\n <div *ngIf=\"themeVersion === '2'\" class=\"str-chat__user-item-at\">@</div>\n </div>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType", "showOnlineIndicator"] }], directives: [{ type: i8__namespace$2.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i8__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i8__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i8__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i8__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i9__namespace.TranslatePipe } });
|
|
6394
6406
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AutocompleteTextareaComponent, decorators: [{
|
|
6395
6407
|
type: i0.Component,
|
|
@@ -6398,7 +6410,7 @@
|
|
|
6398
6410
|
templateUrl: './autocomplete-textarea.component.html',
|
|
6399
6411
|
styles: [],
|
|
6400
6412
|
}]
|
|
6401
|
-
}], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: TransliterationService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: ThemeService }]; }, propDecorators: { class: [{
|
|
6413
|
+
}], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: TransliterationService }, { type: EmojiInputService }, { type: CustomTemplatesService }, { type: ThemeService }, { type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { class: [{
|
|
6402
6414
|
type: i0.HostBinding
|
|
6403
6415
|
}], value: [{
|
|
6404
6416
|
type: i0.Input
|