stream-chat-angular 4.0.0-theming-v2.12 → 4.1.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/i18n/en.d.ts +2 -0
- package/assets/version.d.ts +1 -1
- package/bundles/stream-chat-angular.umd.js +545 -193
- package/bundles/stream-chat-angular.umd.js.map +1 -1
- package/esm2015/assets/i18n/en.js +3 -1
- package/esm2015/assets/version.js +2 -2
- package/esm2015/lib/attachment-configuration.service.js +83 -0
- package/esm2015/lib/attachment-list/attachment-list.component.js +22 -11
- package/esm2015/lib/channel-preview/channel-preview.component.js +4 -4
- package/esm2015/lib/channel.service.js +141 -32
- package/esm2015/lib/chat-client.service.js +5 -3
- package/esm2015/lib/message/message.component.js +11 -2
- package/esm2015/lib/message-actions-box/message-actions-box.component.js +5 -3
- package/esm2015/lib/message-list/image-load.service.js +2 -1
- package/esm2015/lib/message-list/message-list.component.js +158 -75
- package/esm2015/lib/types.js +1 -1
- package/esm2015/public-api.js +2 -1
- package/fesm2015/stream-chat-angular.js +462 -161
- package/fesm2015/stream-chat-angular.js.map +1 -1
- package/lib/attachment-configuration.service.d.ts +47 -0
- package/lib/attachment-list/attachment-list.component.d.ts +6 -4
- package/lib/channel.service.d.ts +35 -3
- package/lib/message/message.component.d.ts +6 -1
- package/lib/message-list/image-load.service.d.ts +1 -0
- package/lib/message-list/message-list.component.d.ts +14 -9
- package/lib/types.d.ts +6 -0
- package/package.json +1 -1
- package/public-api.d.ts +1 -0
- package/src/assets/i18n/en.ts +2 -0
- package/src/assets/styles/css/index.css +1 -1
- package/src/assets/styles/css/index.css.map +1 -1
- package/src/assets/styles/scss/Attachment.scss +11 -8
- package/src/assets/styles/scss/ImageCarousel.scss +6 -0
- package/src/assets/styles/scss/Message.scss +6 -1
- package/src/assets/styles/scss/MessageInput.scss +1 -0
- package/src/assets/styles/v2/css/index.css +1 -1
- package/src/assets/styles/v2/css/index.css.map +1 -1
- package/src/assets/styles/v2/css/index.layout.css +1 -1
- package/src/assets/styles/v2/css/index.layout.css.map +1 -1
- package/src/assets/styles/v2/scss/AttachmentList/AttachmentList-layout.scss +133 -26
- package/src/assets/styles/v2/scss/AttachmentList/AttachmentList-theme.scss +28 -21
- package/src/assets/styles/v2/scss/Autocomplete/Autocomplete-layout.scss +11 -1
- package/src/assets/styles/v2/scss/Autocomplete/Autocomplete-theme.scss +35 -0
- package/src/assets/styles/v2/scss/Avatar/Avatar-layout.scss +2 -0
- package/src/assets/styles/v2/scss/ChannelPreview/ChannelPreview-theme.scss +3 -5
- package/src/assets/styles/v2/scss/ChannelSearch/ChannelSearch-layout.scss +2 -1
- package/src/assets/styles/v2/scss/Message/Message-layout.scss +73 -23
- package/src/assets/styles/v2/scss/Message/Message-theme.scss +16 -0
- package/src/assets/styles/v2/scss/MessageInput/MessageInput-layout.scss +33 -2
- package/src/assets/styles/v2/scss/MessageInput/MessageInput-theme.scss +16 -0
- package/src/assets/styles/v2/scss/MessageList/{VirtualMessageList-layout.scss → VirtualizedMessageList-layout.scss} +12 -0
- package/src/assets/styles/v2/scss/MessageList/{VirtualMessageList-theme.scss → VirtualizedMessageList-theme.scss} +0 -0
- package/src/assets/styles/v2/scss/MessageReactions/MessageReactions-layout.scss +1 -0
- package/src/assets/styles/v2/scss/Modal/Modal-theme.scss +7 -0
- package/src/assets/styles/v2/scss/Thread/Thread-layout.scss +1 -2
- package/src/assets/styles/v2/scss/Tooltip/Tooltip-layout.scss +1 -1
- package/src/assets/styles/v2/scss/TypingIndicator/TypingIndicator-layout.scss +4 -0
- package/src/assets/styles/v2/scss/_global-theme-variables.scss +7 -0
- package/src/assets/styles/v2/scss/_utils.scss +1 -1
- package/src/assets/styles/v2/scss/index.layout.scss +1 -1
- package/src/assets/styles/v2/scss/index.scss +1 -1
- package/src/assets/styles/vendor/react-image-gallery.scss +6 -0
- package/src/assets/version.ts +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
(function (global, factory) {
|
|
2
2
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('rxjs'), require('stream-chat'), require('rxjs/operators'), require('uuid'), require('@ngx-translate/core'), require('@angular/common'), require('pretty-bytes'), require('dayjs'), require('dayjs/plugin/calendar'), require('emoji-regex'), require('ngx-popperjs'), require('@stream-io/transliterate'), require('angular-mentions')) :
|
|
3
3
|
typeof define === 'function' && define.amd ? define('stream-chat-angular', ['exports', '@angular/core', 'rxjs', 'stream-chat', 'rxjs/operators', 'uuid', '@ngx-translate/core', '@angular/common', 'pretty-bytes', 'dayjs', 'dayjs/plugin/calendar', 'emoji-regex', 'ngx-popperjs', '@stream-io/transliterate', 'angular-mentions'], factory) :
|
|
4
|
-
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['stream-chat-angular'] = {}, global.ng.core, global.rxjs, global.streamChat, global.rxjs.operators, global.uuid, global.
|
|
5
|
-
}(this, (function (exports, i0, rxjs, streamChat, operators, uuid,
|
|
4
|
+
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global['stream-chat-angular'] = {}, global.ng.core, global.rxjs, global.streamChat, global.rxjs.operators, global.uuid, global.i6, global.ng.common, global.prettybytes, global.Dayjs, global.calendar, global.emojiRegex, global.i2, global.transliterate, global.i8));
|
|
5
|
+
}(this, (function (exports, i0, rxjs, streamChat, operators, uuid, i6, i4, prettybytes, Dayjs, calendar, emojiRegex, i2, transliterate, i8) { 'use strict';
|
|
6
6
|
|
|
7
7
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
8
8
|
|
|
@@ -27,15 +27,15 @@
|
|
|
27
27
|
}
|
|
28
28
|
|
|
29
29
|
var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
|
|
30
|
-
var
|
|
31
|
-
var
|
|
30
|
+
var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
|
|
31
|
+
var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
|
|
32
32
|
var prettybytes__default = /*#__PURE__*/_interopDefaultLegacy(prettybytes);
|
|
33
33
|
var Dayjs__default = /*#__PURE__*/_interopDefaultLegacy(Dayjs);
|
|
34
34
|
var calendar__default = /*#__PURE__*/_interopDefaultLegacy(calendar);
|
|
35
35
|
var emojiRegex__default = /*#__PURE__*/_interopDefaultLegacy(emojiRegex);
|
|
36
36
|
var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
|
|
37
37
|
var transliterate__default = /*#__PURE__*/_interopDefaultLegacy(transliterate);
|
|
38
|
-
var i8__namespace
|
|
38
|
+
var i8__namespace = /*#__PURE__*/_interopNamespace(i8);
|
|
39
39
|
|
|
40
40
|
/*! *****************************************************************************
|
|
41
41
|
Copyright (c) Microsoft Corporation.
|
|
@@ -355,7 +355,7 @@
|
|
|
355
355
|
return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
|
|
356
356
|
}
|
|
357
357
|
|
|
358
|
-
var version = '4.
|
|
358
|
+
var version = '4.1.0';
|
|
359
359
|
|
|
360
360
|
/**
|
|
361
361
|
* The `NotificationService` can be used to add or remove notifications. By default the [`NotificationList`](../components/NotificationListComponent.mdx) component displays the currently active notifications.
|
|
@@ -475,7 +475,7 @@
|
|
|
475
475
|
this.chatClient = streamChat.StreamChat.getInstance(apiKey);
|
|
476
476
|
this.chatClient.devToken;
|
|
477
477
|
return [4 /*yield*/, this.ngZone.runOutsideAngular(function () { return __awaiter(_this, void 0, void 0, function () {
|
|
478
|
-
var user, _d, error_1;
|
|
478
|
+
var user, _d, error_1, sdkPrefix;
|
|
479
479
|
return __generator(this, function (_e) {
|
|
480
480
|
switch (_e.label) {
|
|
481
481
|
case 0:
|
|
@@ -501,8 +501,10 @@
|
|
|
501
501
|
throw error_1;
|
|
502
502
|
case 7:
|
|
503
503
|
this.userSubject.next(this.chatClient.user);
|
|
504
|
-
|
|
505
|
-
|
|
504
|
+
sdkPrefix = 'stream-chat-angular';
|
|
505
|
+
if (!this.chatClient.getUserAgent().includes(sdkPrefix)) {
|
|
506
|
+
this.chatClient.setUserAgent(sdkPrefix + "-" + version + "-" + this.chatClient.getUserAgent());
|
|
507
|
+
}
|
|
506
508
|
return [2 /*return*/];
|
|
507
509
|
}
|
|
508
510
|
});
|
|
@@ -688,10 +690,12 @@
|
|
|
688
690
|
this.channelsSubject = new rxjs.BehaviorSubject(undefined);
|
|
689
691
|
this.activeChannelSubject = new rxjs.BehaviorSubject(undefined);
|
|
690
692
|
this.activeChannelMessagesSubject = new rxjs.BehaviorSubject([]);
|
|
693
|
+
this.activeChannelPinnedMessagesSubject = new rxjs.BehaviorSubject([]);
|
|
691
694
|
this.hasMoreChannelsSubject = new rxjs.ReplaySubject(1);
|
|
692
695
|
this.activeChannelSubscriptions = [];
|
|
693
696
|
this.activeParentMessageIdSubject = new rxjs.BehaviorSubject(undefined);
|
|
694
697
|
this.activeThreadMessagesSubject = new rxjs.BehaviorSubject([]);
|
|
698
|
+
this.jumpToMessageSubject = new rxjs.BehaviorSubject({ id: undefined, parentId: undefined });
|
|
695
699
|
this.latestMessageDateByUserByChannelsSubject = new rxjs.BehaviorSubject({});
|
|
696
700
|
this.messagePageSize = 25;
|
|
697
701
|
this.messageToQuoteSubject = new rxjs.BehaviorSubject(undefined);
|
|
@@ -703,11 +707,8 @@
|
|
|
703
707
|
var currentChannels = _this.channelsSubject.getValue() || [];
|
|
704
708
|
var newChannels = channels.filter(function (c) { return !currentChannels.find(function (channel) { return channel.cid === c.cid; }); });
|
|
705
709
|
var deletedChannels = currentChannels.filter(function (c) { return !(channels === null || channels === void 0 ? void 0 : channels.find(function (channel) { return channel.cid === c.cid; })); });
|
|
706
|
-
_this.addChannelsFromNotification(newChannels);
|
|
710
|
+
void _this.addChannelsFromNotification(newChannels);
|
|
707
711
|
_this.removeChannelsFromChannelList(deletedChannels.map(function (c) { return c.cid; }));
|
|
708
|
-
if (!newChannels.length && !deletedChannels.length) {
|
|
709
|
-
_this.channelsSubject.next(channels);
|
|
710
|
-
}
|
|
711
712
|
};
|
|
712
713
|
this.messageListSetter = function (messages) {
|
|
713
714
|
_this.activeChannelMessagesSubject.next(messages);
|
|
@@ -740,10 +741,18 @@
|
|
|
740
741
|
return undefined;
|
|
741
742
|
}
|
|
742
743
|
else {
|
|
743
|
-
|
|
744
|
+
var message = messages.find(function (m) { return m.id === parentMessageId; });
|
|
745
|
+
if (!message) {
|
|
746
|
+
void _this.setAsActiveParentMessage(undefined);
|
|
747
|
+
return undefined;
|
|
748
|
+
}
|
|
749
|
+
else {
|
|
750
|
+
return message;
|
|
751
|
+
}
|
|
744
752
|
}
|
|
745
753
|
}), operators.shareReplay());
|
|
746
754
|
this.messageToQuote$ = this.messageToQuoteSubject.asObservable();
|
|
755
|
+
this.jumpToMessage$ = this.jumpToMessageSubject.asObservable();
|
|
747
756
|
this.chatClientService.connectionState$
|
|
748
757
|
.pipe(operators.filter(function (s) { return s === 'online'; }))
|
|
749
758
|
.subscribe(function () {
|
|
@@ -754,6 +763,8 @@
|
|
|
754
763
|
this.usersTypingInThread$ = this.usersTypingInThreadSubject.asObservable();
|
|
755
764
|
this.latestMessageDateByUserByChannels$ =
|
|
756
765
|
this.latestMessageDateByUserByChannelsSubject.asObservable();
|
|
766
|
+
this.activeChannelPinnedMessages$ =
|
|
767
|
+
this.activeChannelPinnedMessagesSubject.asObservable();
|
|
757
768
|
}
|
|
758
769
|
Object.defineProperty(ChannelService.prototype, "shouldMarkActiveChannelAsRead", {
|
|
759
770
|
/**
|
|
@@ -791,6 +802,7 @@
|
|
|
791
802
|
void channel.markRead();
|
|
792
803
|
}
|
|
793
804
|
this.activeChannelMessagesSubject.next(__spreadArray([], __read(channel.state.messages)));
|
|
805
|
+
this.activeChannelPinnedMessagesSubject.next(__spreadArray([], __read(channel.state.pinnedMessages)));
|
|
794
806
|
this.activeParentMessageIdSubject.next(undefined);
|
|
795
807
|
this.activeThreadMessagesSubject.next([]);
|
|
796
808
|
this.messageToQuoteSubject.next(undefined);
|
|
@@ -810,15 +822,19 @@
|
|
|
810
822
|
this.activeThreadMessagesSubject.next([]);
|
|
811
823
|
this.latestMessageDateByUserByChannelsSubject.next({});
|
|
812
824
|
this.selectMessageToQuote(undefined);
|
|
825
|
+
this.jumpToMessageSubject.next({ id: undefined, parentId: undefined });
|
|
826
|
+
this.activeChannelPinnedMessagesSubject.next([]);
|
|
813
827
|
};
|
|
814
828
|
/**
|
|
815
829
|
* Sets the given `message` as an active parent message. If `undefined` is provided, it will deleselect the current parent message.
|
|
816
830
|
* @param message
|
|
831
|
+
* @param loadMessagesForm
|
|
817
832
|
*/
|
|
818
|
-
ChannelService.prototype.setAsActiveParentMessage = function (message) {
|
|
833
|
+
ChannelService.prototype.setAsActiveParentMessage = function (message, loadMessagesForm) {
|
|
834
|
+
if (loadMessagesForm === void 0) { loadMessagesForm = 'request'; }
|
|
819
835
|
var _a;
|
|
820
836
|
return __awaiter(this, void 0, void 0, function () {
|
|
821
|
-
var messageToQuote, activeChannel, result;
|
|
837
|
+
var messageToQuote, messageToJumpTo, activeChannel, result;
|
|
822
838
|
return __generator(this, function (_h) {
|
|
823
839
|
switch (_h.label) {
|
|
824
840
|
case 0:
|
|
@@ -829,43 +845,64 @@
|
|
|
829
845
|
if (!!message) return [3 /*break*/, 1];
|
|
830
846
|
this.activeParentMessageIdSubject.next(undefined);
|
|
831
847
|
this.activeThreadMessagesSubject.next([]);
|
|
832
|
-
|
|
848
|
+
messageToJumpTo = this.jumpToMessageSubject.getValue();
|
|
849
|
+
if (messageToJumpTo && !!messageToJumpTo.parentId) {
|
|
850
|
+
this.jumpToMessageSubject.next({ id: undefined, parentId: undefined });
|
|
851
|
+
}
|
|
852
|
+
return [3 /*break*/, 4];
|
|
833
853
|
case 1:
|
|
834
854
|
this.activeParentMessageIdSubject.next(message.id);
|
|
835
855
|
activeChannel = this.activeChannelSubject.getValue();
|
|
856
|
+
if (!(loadMessagesForm === 'request')) return [3 /*break*/, 3];
|
|
836
857
|
return [4 /*yield*/, (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.getReplies(message.id, {
|
|
837
858
|
limit: (_a = this.options) === null || _a === void 0 ? void 0 : _a.message_limit,
|
|
838
859
|
}))];
|
|
839
860
|
case 2:
|
|
840
861
|
result = _h.sent();
|
|
841
862
|
this.activeThreadMessagesSubject.next((result === null || result === void 0 ? void 0 : result.messages) || []);
|
|
842
|
-
|
|
843
|
-
case 3:
|
|
863
|
+
return [3 /*break*/, 4];
|
|
864
|
+
case 3:
|
|
865
|
+
this.activeThreadMessagesSubject.next((activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.state.threads[message.id]) || []);
|
|
866
|
+
_h.label = 4;
|
|
867
|
+
case 4: return [2 /*return*/];
|
|
844
868
|
}
|
|
845
869
|
});
|
|
846
870
|
});
|
|
847
871
|
};
|
|
848
872
|
/**
|
|
849
873
|
* Loads the next page of messages of the active channel. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
|
|
874
|
+
* @param direction
|
|
850
875
|
*/
|
|
851
|
-
ChannelService.prototype.loadMoreMessages = function () {
|
|
852
|
-
|
|
876
|
+
ChannelService.prototype.loadMoreMessages = function (direction) {
|
|
877
|
+
if (direction === void 0) { direction = 'older'; }
|
|
878
|
+
var _a, _b, _c, _d, _e, _f, _g;
|
|
853
879
|
return __awaiter(this, void 0, void 0, function () {
|
|
854
|
-
var activeChnannel, lastMessageId;
|
|
855
|
-
|
|
856
|
-
|
|
880
|
+
var activeChnannel, messages, lastMessageId;
|
|
881
|
+
var _h;
|
|
882
|
+
return __generator(this, function (_j) {
|
|
883
|
+
switch (_j.label) {
|
|
857
884
|
case 0:
|
|
858
885
|
activeChnannel = this.activeChannelSubject.getValue();
|
|
859
|
-
|
|
886
|
+
messages = this.activeChannelMessagesSubject.getValue();
|
|
887
|
+
lastMessageId = (_a = messages[direction === 'older' ? 0 : messages.length - 1]) === null || _a === void 0 ? void 0 : _a.id;
|
|
888
|
+
if (direction === 'newer' &&
|
|
889
|
+
((_b = activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.state) === null || _b === void 0 ? void 0 : _b.latestMessages) === ((_c = activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.state) === null || _c === void 0 ? void 0 : _c.messages)) {
|
|
890
|
+
// If we are on latest message set, activeChannelMessages$ will be refreshed by WS events, no need for a request
|
|
891
|
+
return [2 /*return*/];
|
|
892
|
+
}
|
|
860
893
|
return [4 /*yield*/, (activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.query({
|
|
861
|
-
messages:
|
|
894
|
+
messages: (_h = {
|
|
895
|
+
limit: (_d = this.options) === null || _d === void 0 ? void 0 : _d.message_limit
|
|
896
|
+
},
|
|
897
|
+
_h[direction === 'older' ? 'id_lt' : 'id_gt'] = lastMessageId,
|
|
898
|
+
_h),
|
|
862
899
|
members: { limit: 0 },
|
|
863
900
|
watchers: { limit: 0 },
|
|
864
901
|
}))];
|
|
865
902
|
case 1:
|
|
866
|
-
|
|
867
|
-
if (((
|
|
868
|
-
((
|
|
903
|
+
_j.sent();
|
|
904
|
+
if (((_e = activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.data) === null || _e === void 0 ? void 0 : _e.id) ===
|
|
905
|
+
((_g = (_f = this.activeChannelSubject.getValue()) === null || _f === void 0 ? void 0 : _f.data) === null || _g === void 0 ? void 0 : _g.id)) {
|
|
869
906
|
this.activeChannelMessagesSubject.next(__spreadArray([], __read(activeChnannel.state.messages)));
|
|
870
907
|
}
|
|
871
908
|
return [2 /*return*/];
|
|
@@ -875,26 +912,35 @@
|
|
|
875
912
|
};
|
|
876
913
|
/**
|
|
877
914
|
* Loads the next page of messages of the active thread. The page size can be set in the [query option](https://getstream.io/chat/docs/javascript/query_channels/?language=javascript#query-options) object.
|
|
915
|
+
* @param direction
|
|
878
916
|
*/
|
|
879
|
-
ChannelService.prototype.loadMoreThreadReplies = function () {
|
|
917
|
+
ChannelService.prototype.loadMoreThreadReplies = function (direction) {
|
|
918
|
+
if (direction === void 0) { direction = 'older'; }
|
|
880
919
|
var _a, _b;
|
|
881
920
|
return __awaiter(this, void 0, void 0, function () {
|
|
882
|
-
var activeChnannel, parentMessageId, lastMessageId;
|
|
883
|
-
|
|
884
|
-
|
|
921
|
+
var activeChnannel, parentMessageId, threadMessages, lastMessageId;
|
|
922
|
+
var _h;
|
|
923
|
+
return __generator(this, function (_j) {
|
|
924
|
+
switch (_j.label) {
|
|
885
925
|
case 0:
|
|
926
|
+
if (direction === 'newer') {
|
|
927
|
+
// Thread replies aren't broke into different message sets, activeThreadMessages$ will be refreshed by WS events, no need for a request
|
|
928
|
+
return [2 /*return*/];
|
|
929
|
+
}
|
|
886
930
|
activeChnannel = this.activeChannelSubject.getValue();
|
|
887
931
|
parentMessageId = this.activeParentMessageIdSubject.getValue();
|
|
888
932
|
if (!parentMessageId) {
|
|
889
933
|
return [2 /*return*/];
|
|
890
934
|
}
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
|
|
935
|
+
threadMessages = this.activeThreadMessagesSubject.getValue();
|
|
936
|
+
lastMessageId = (_a = threadMessages[direction === 'older' ? 0 : threadMessages.length - 1]) === null || _a === void 0 ? void 0 : _a.id;
|
|
937
|
+
return [4 /*yield*/, (activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.getReplies(parentMessageId, (_h = {
|
|
938
|
+
limit: (_b = this.options) === null || _b === void 0 ? void 0 : _b.message_limit
|
|
939
|
+
},
|
|
940
|
+
_h[direction === 'older' ? 'id_lt' : 'id_gt'] = lastMessageId,
|
|
941
|
+
_h)))];
|
|
896
942
|
case 1:
|
|
897
|
-
|
|
943
|
+
_j.sent();
|
|
898
944
|
this.activeThreadMessagesSubject.next((activeChnannel === null || activeChnannel === void 0 ? void 0 : activeChnannel.state.threads[parentMessageId]) || []);
|
|
899
945
|
return [2 /*return*/];
|
|
900
946
|
}
|
|
@@ -1282,6 +1328,96 @@
|
|
|
1282
1328
|
});
|
|
1283
1329
|
});
|
|
1284
1330
|
};
|
|
1331
|
+
/**
|
|
1332
|
+
* Jumps to the selected message inside the message list, if the message is not yet loaded, it'll load the message (and it's surroundings) from the API.
|
|
1333
|
+
* @param messageId The ID of the message to be loaded, 'latest' means jump to the latest messages
|
|
1334
|
+
* @param parentMessageId The ID of the parent message if we want to load a thread message
|
|
1335
|
+
*/
|
|
1336
|
+
ChannelService.prototype.jumpToMessage = function (messageId, parentMessageId) {
|
|
1337
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
1338
|
+
var activeChannel, messages, parentMessage, error_3;
|
|
1339
|
+
return __generator(this, function (_h) {
|
|
1340
|
+
switch (_h.label) {
|
|
1341
|
+
case 0:
|
|
1342
|
+
activeChannel = this.activeChannelSubject.getValue();
|
|
1343
|
+
_h.label = 1;
|
|
1344
|
+
case 1:
|
|
1345
|
+
_h.trys.push([1, 3, , 4]);
|
|
1346
|
+
return [4 /*yield*/, (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.state.loadMessageIntoState(messageId, parentMessageId))];
|
|
1347
|
+
case 2:
|
|
1348
|
+
_h.sent();
|
|
1349
|
+
messages = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.state.messages) || [];
|
|
1350
|
+
this.activeChannelMessagesSubject.next(__spreadArray([], __read(messages)));
|
|
1351
|
+
if (parentMessageId) {
|
|
1352
|
+
parentMessage = messages.find(function (m) { return m.id === parentMessageId; });
|
|
1353
|
+
void this.setAsActiveParentMessage(parentMessage, 'state');
|
|
1354
|
+
}
|
|
1355
|
+
this.jumpToMessageSubject.next({
|
|
1356
|
+
id: messageId,
|
|
1357
|
+
parentId: parentMessageId,
|
|
1358
|
+
});
|
|
1359
|
+
return [3 /*break*/, 4];
|
|
1360
|
+
case 3:
|
|
1361
|
+
error_3 = _h.sent();
|
|
1362
|
+
this.notificationService.addTemporaryNotification('Message not found');
|
|
1363
|
+
throw error_3;
|
|
1364
|
+
case 4: return [2 /*return*/];
|
|
1365
|
+
}
|
|
1366
|
+
});
|
|
1367
|
+
});
|
|
1368
|
+
};
|
|
1369
|
+
/**
|
|
1370
|
+
* Pins the given message in the channel
|
|
1371
|
+
* @param message
|
|
1372
|
+
*/
|
|
1373
|
+
ChannelService.prototype.pinMessage = function (message) {
|
|
1374
|
+
var _a;
|
|
1375
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
1376
|
+
var error_4;
|
|
1377
|
+
return __generator(this, function (_h) {
|
|
1378
|
+
switch (_h.label) {
|
|
1379
|
+
case 0:
|
|
1380
|
+
_h.trys.push([0, 2, , 3]);
|
|
1381
|
+
return [4 /*yield*/, ((_a = this.chatClientService.chatClient) === null || _a === void 0 ? void 0 : _a.pinMessage(message))];
|
|
1382
|
+
case 1:
|
|
1383
|
+
_h.sent();
|
|
1384
|
+
this.notificationService.addTemporaryNotification('Message pinned', 'success');
|
|
1385
|
+
return [3 /*break*/, 3];
|
|
1386
|
+
case 2:
|
|
1387
|
+
error_4 = _h.sent();
|
|
1388
|
+
this.notificationService.addTemporaryNotification('Error pinning message');
|
|
1389
|
+
throw error_4;
|
|
1390
|
+
case 3: return [2 /*return*/];
|
|
1391
|
+
}
|
|
1392
|
+
});
|
|
1393
|
+
});
|
|
1394
|
+
};
|
|
1395
|
+
/**
|
|
1396
|
+
* Removes the given message from pinned messages
|
|
1397
|
+
* @param message
|
|
1398
|
+
*/
|
|
1399
|
+
ChannelService.prototype.unpinMessage = function (message) {
|
|
1400
|
+
var _a;
|
|
1401
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
1402
|
+
var error_5;
|
|
1403
|
+
return __generator(this, function (_h) {
|
|
1404
|
+
switch (_h.label) {
|
|
1405
|
+
case 0:
|
|
1406
|
+
_h.trys.push([0, 2, , 3]);
|
|
1407
|
+
return [4 /*yield*/, ((_a = this.chatClientService.chatClient) === null || _a === void 0 ? void 0 : _a.unpinMessage(message))];
|
|
1408
|
+
case 1:
|
|
1409
|
+
_h.sent();
|
|
1410
|
+
this.notificationService.addTemporaryNotification('Message unpinned', 'success');
|
|
1411
|
+
return [3 /*break*/, 3];
|
|
1412
|
+
case 2:
|
|
1413
|
+
error_5 = _h.sent();
|
|
1414
|
+
this.notificationService.addTemporaryNotification('Error removing message pin');
|
|
1415
|
+
throw error_5;
|
|
1416
|
+
case 3: return [2 /*return*/];
|
|
1417
|
+
}
|
|
1418
|
+
});
|
|
1419
|
+
});
|
|
1420
|
+
};
|
|
1285
1421
|
ChannelService.prototype.handleNotification = function (clientEvent) {
|
|
1286
1422
|
var _this = this;
|
|
1287
1423
|
switch (clientEvent.eventType) {
|
|
@@ -1354,24 +1490,41 @@
|
|
|
1354
1490
|
};
|
|
1355
1491
|
ChannelService.prototype.handleNewMessageNotification = function (clientEvent) {
|
|
1356
1492
|
if (clientEvent.event.channel) {
|
|
1357
|
-
this.addChannelsFromNotification([clientEvent.event.channel]);
|
|
1493
|
+
void this.addChannelsFromNotification([clientEvent.event.channel]);
|
|
1358
1494
|
}
|
|
1359
1495
|
};
|
|
1360
1496
|
ChannelService.prototype.handleAddedToChannelNotification = function (clientEvent) {
|
|
1361
1497
|
if (clientEvent.event.channel) {
|
|
1362
|
-
this.addChannelsFromNotification([clientEvent.event.channel]);
|
|
1498
|
+
void this.addChannelsFromNotification([clientEvent.event.channel]);
|
|
1363
1499
|
}
|
|
1364
1500
|
};
|
|
1365
1501
|
ChannelService.prototype.addChannelsFromNotification = function (channelResponses) {
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1502
|
+
return __awaiter(this, void 0, void 0, function () {
|
|
1503
|
+
var newChannels, watchRequests, currentChannels;
|
|
1504
|
+
var _this = this;
|
|
1505
|
+
return __generator(this, function (_h) {
|
|
1506
|
+
switch (_h.label) {
|
|
1507
|
+
case 0:
|
|
1508
|
+
newChannels = [];
|
|
1509
|
+
watchRequests = [];
|
|
1510
|
+
channelResponses.forEach(function (channelResponse) {
|
|
1511
|
+
var channel = _this.chatClientService.chatClient.channel(channelResponse.type, channelResponse.id);
|
|
1512
|
+
watchRequests.push(channel.watch());
|
|
1513
|
+
newChannels.push(channel);
|
|
1514
|
+
});
|
|
1515
|
+
return [4 /*yield*/, Promise.all(watchRequests)];
|
|
1516
|
+
case 1:
|
|
1517
|
+
_h.sent();
|
|
1518
|
+
currentChannels = this.channelsSubject.getValue() || [];
|
|
1519
|
+
newChannels = newChannels.filter(function (newChannel) { return !currentChannels.find(function (c) { return c.cid === newChannel.cid; }); });
|
|
1520
|
+
if (newChannels.length > 0) {
|
|
1521
|
+
newChannels.forEach(function (c) { return _this.watchForChannelEvents(c); });
|
|
1522
|
+
this.channelsSubject.next(__spreadArray(__spreadArray([], __read(newChannels)), __read(currentChannels)));
|
|
1523
|
+
}
|
|
1524
|
+
return [2 /*return*/];
|
|
1525
|
+
}
|
|
1526
|
+
});
|
|
1373
1527
|
});
|
|
1374
|
-
this.channelsSubject.next(__spreadArray(__spreadArray([], __read(newChannels)), __read((this.channelsSubject.getValue() || []))));
|
|
1375
1528
|
};
|
|
1376
1529
|
ChannelService.prototype.removeChannelsFromChannelList = function (cids) {
|
|
1377
1530
|
var _a;
|
|
@@ -1483,6 +1636,7 @@
|
|
|
1483
1636
|
isThreadReply
|
|
1484
1637
|
? _this.activeThreadMessagesSubject.next(__spreadArray([], __read(messages)))
|
|
1485
1638
|
: _this.activeChannelMessagesSubject.next(__spreadArray([], __read(messages)));
|
|
1639
|
+
_this.activeChannelPinnedMessagesSubject.next(__spreadArray([], __read(channel.state.pinnedMessages)));
|
|
1486
1640
|
}
|
|
1487
1641
|
});
|
|
1488
1642
|
};
|
|
@@ -1535,7 +1689,7 @@
|
|
|
1535
1689
|
};
|
|
1536
1690
|
ChannelService.prototype.queryChannels = function (shouldSetActiveChannel) {
|
|
1537
1691
|
return __awaiter(this, void 0, void 0, function () {
|
|
1538
|
-
var channels, prevChannels,
|
|
1692
|
+
var channels, prevChannels, error_6;
|
|
1539
1693
|
var _this = this;
|
|
1540
1694
|
return __generator(this, function (_h) {
|
|
1541
1695
|
switch (_h.label) {
|
|
@@ -1555,9 +1709,9 @@
|
|
|
1555
1709
|
this.hasMoreChannelsSubject.next(channels.length >= this.options.limit);
|
|
1556
1710
|
return [2 /*return*/, channels];
|
|
1557
1711
|
case 2:
|
|
1558
|
-
|
|
1559
|
-
this.channelsSubject.error(
|
|
1560
|
-
throw
|
|
1712
|
+
error_6 = _h.sent();
|
|
1713
|
+
this.channelsSubject.error(error_6);
|
|
1714
|
+
throw error_6;
|
|
1561
1715
|
case 3: return [2 /*return*/];
|
|
1562
1716
|
}
|
|
1563
1717
|
});
|
|
@@ -2180,6 +2334,90 @@
|
|
|
2180
2334
|
}]
|
|
2181
2335
|
}], ctorParameters: function () { return [{ type: ChannelService }, { type: NotificationService }]; } });
|
|
2182
2336
|
|
|
2337
|
+
/**
|
|
2338
|
+
* The `AttachmentConfigurationService` provides customization for certain attributes of attachments displayed inside the message component.
|
|
2339
|
+
*/
|
|
2340
|
+
var AttachmentConfigurationService = /** @class */ (function () {
|
|
2341
|
+
function AttachmentConfigurationService() {
|
|
2342
|
+
}
|
|
2343
|
+
/**
|
|
2344
|
+
* Handles the configuration for image attachments, it's possible to provide your own function to override the default logic
|
|
2345
|
+
* @param attachment The attachment to configure
|
|
2346
|
+
* @param location Specifies where the image is being displayed
|
|
2347
|
+
*/
|
|
2348
|
+
AttachmentConfigurationService.prototype.getImageAttachmentConfiguration = function (attachment, location) {
|
|
2349
|
+
if (this.customImageAttachmentConfigurationHandler) {
|
|
2350
|
+
return this.customImageAttachmentConfigurationHandler(attachment, location);
|
|
2351
|
+
}
|
|
2352
|
+
var height = {
|
|
2353
|
+
gallery: '',
|
|
2354
|
+
single: '300px',
|
|
2355
|
+
carousel: '', // Set from CSS
|
|
2356
|
+
}[location];
|
|
2357
|
+
return {
|
|
2358
|
+
url: (attachment.img_url ||
|
|
2359
|
+
attachment.thumb_url ||
|
|
2360
|
+
attachment.image_url ||
|
|
2361
|
+
''),
|
|
2362
|
+
width: '',
|
|
2363
|
+
height: height,
|
|
2364
|
+
};
|
|
2365
|
+
};
|
|
2366
|
+
/**
|
|
2367
|
+
* Handles the configuration for video attachments, it's possible to provide your own function to override the default logic
|
|
2368
|
+
* @param attachment The attachment to configure
|
|
2369
|
+
*/
|
|
2370
|
+
AttachmentConfigurationService.prototype.getVideoAttachmentConfiguration = function (attachment) {
|
|
2371
|
+
if (this.customVideoAttachmentConfigurationHandler) {
|
|
2372
|
+
return this.customVideoAttachmentConfigurationHandler(attachment);
|
|
2373
|
+
}
|
|
2374
|
+
return {
|
|
2375
|
+
url: attachment.asset_url || '',
|
|
2376
|
+
width: '100%',
|
|
2377
|
+
height: '100%',
|
|
2378
|
+
};
|
|
2379
|
+
};
|
|
2380
|
+
/**
|
|
2381
|
+
* Handles the configuration for giphy attachments, it's possible to provide your own function to override the default logic
|
|
2382
|
+
* @param attachment The attachment to configure
|
|
2383
|
+
*/
|
|
2384
|
+
AttachmentConfigurationService.prototype.getGiphyAttachmentConfiguration = function (attachment) {
|
|
2385
|
+
var _a;
|
|
2386
|
+
if (this.customGiphyAttachmentConfigurationHandler) {
|
|
2387
|
+
return this.customGiphyAttachmentConfigurationHandler(attachment);
|
|
2388
|
+
}
|
|
2389
|
+
var giphy = (_a = attachment.giphy) === null || _a === void 0 ? void 0 : _a.fixed_height_downsampled;
|
|
2390
|
+
return {
|
|
2391
|
+
url: (giphy === null || giphy === void 0 ? void 0 : giphy.url) || attachment.image_url || attachment.thumb_url || '',
|
|
2392
|
+
height: (giphy === null || giphy === void 0 ? void 0 : giphy.height) ? (giphy === null || giphy === void 0 ? void 0 : giphy.height) + "px" : '300px',
|
|
2393
|
+
width: (giphy === null || giphy === void 0 ? void 0 : giphy.width) ? (giphy === null || giphy === void 0 ? void 0 : giphy.width) + "px" : '',
|
|
2394
|
+
};
|
|
2395
|
+
};
|
|
2396
|
+
/**
|
|
2397
|
+
* Handles the configuration for scraped image attachments, it's possible to provide your own function to override the default logic
|
|
2398
|
+
* @param attachment The attachment to configure
|
|
2399
|
+
*/
|
|
2400
|
+
AttachmentConfigurationService.prototype.getScrapedImageAttachmentConfiguration = function (attachment) {
|
|
2401
|
+
if (this.customScrapedImageAttachmentConfigurationHandler) {
|
|
2402
|
+
return this.customScrapedImageAttachmentConfigurationHandler(attachment);
|
|
2403
|
+
}
|
|
2404
|
+
return {
|
|
2405
|
+
url: attachment.image_url || attachment.thumb_url || '',
|
|
2406
|
+
width: '',
|
|
2407
|
+
height: '', // Set from CSS
|
|
2408
|
+
};
|
|
2409
|
+
};
|
|
2410
|
+
return AttachmentConfigurationService;
|
|
2411
|
+
}());
|
|
2412
|
+
AttachmentConfigurationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentConfigurationService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
2413
|
+
AttachmentConfigurationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentConfigurationService, providedIn: 'root' });
|
|
2414
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentConfigurationService, decorators: [{
|
|
2415
|
+
type: i0.Injectable,
|
|
2416
|
+
args: [{
|
|
2417
|
+
providedIn: 'root',
|
|
2418
|
+
}]
|
|
2419
|
+
}] });
|
|
2420
|
+
|
|
2183
2421
|
var en = {
|
|
2184
2422
|
streamChat: {
|
|
2185
2423
|
'1 reply': '1 reply',
|
|
@@ -2215,6 +2453,7 @@
|
|
|
2215
2453
|
'Message deleted': 'Message deleted',
|
|
2216
2454
|
'Message has been successfully flagged': 'Message has been successfully flagged',
|
|
2217
2455
|
'Message pinned': 'Message pinned',
|
|
2456
|
+
'Message unpinned': 'Message unpinned',
|
|
2218
2457
|
Mute: 'Mute',
|
|
2219
2458
|
New: 'New',
|
|
2220
2459
|
'New Messages!': 'New Messages!',
|
|
@@ -2264,6 +2503,7 @@
|
|
|
2264
2503
|
"You can't send messages in this channel": "You can't send messages in this channel",
|
|
2265
2504
|
"You can't send thread replies in this channel": "You can't send thread replies in this channel",
|
|
2266
2505
|
'Unsupported file type: {{type}}': 'Unsupported file type: {{type}}',
|
|
2506
|
+
'Message not found': 'Message not found',
|
|
2267
2507
|
'No chats here yet…': 'No chats here yet…',
|
|
2268
2508
|
'user is typing': '{{ user }} is typing',
|
|
2269
2509
|
'users are typing': '{{ users }} are typing',
|
|
@@ -2292,14 +2532,14 @@
|
|
|
2292
2532
|
};
|
|
2293
2533
|
return StreamI18nService;
|
|
2294
2534
|
}());
|
|
2295
|
-
StreamI18nService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, deps: [{ token:
|
|
2535
|
+
StreamI18nService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, deps: [{ token: i6__namespace.TranslateService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
2296
2536
|
StreamI18nService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, providedIn: 'root' });
|
|
2297
2537
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamI18nService, decorators: [{
|
|
2298
2538
|
type: i0.Injectable,
|
|
2299
2539
|
args: [{
|
|
2300
2540
|
providedIn: 'root',
|
|
2301
2541
|
}]
|
|
2302
|
-
}], ctorParameters: function () { return [{ type:
|
|
2542
|
+
}], ctorParameters: function () { return [{ type: i6__namespace.TranslateService }]; } });
|
|
2303
2543
|
|
|
2304
2544
|
/**
|
|
2305
2545
|
* The `Avatar` component displays the provided image, with fallback to the first letter of the optional name input.
|
|
@@ -2344,7 +2584,7 @@
|
|
|
2344
2584
|
return AvatarComponent;
|
|
2345
2585
|
}());
|
|
2346
2586
|
AvatarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, deps: [{ token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2347
|
-
AvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type" }, ngImport: i0__namespace, template: "<div\n class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n location\n }}\"\n title=\"{{ name }}\"\n [style]=\"{\n flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n fontSize: 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')',\n height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n }\"\n>\n <img\n *ngIf=\"imageUrl && !isError; else fallback\"\n class=\"str-chat__avatar-image str-chat__avatar-image{{\n isLoaded ? ' str-chat__avatar-image--loaded' : ''\n }}\"\n src=\"{{ imageUrl }}\"\n alt=\"{{ initials }}\"\n data-testid=\"avatar-img\"\n (load)=\"isLoaded = true\"\n (error)=\"isError = true\"\n [style]=\"{\n flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n objectFit: 'cover',\n width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n }\"\n />\n <ng-template #fallback>\n <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n {{ initials }}\n </div>\n </ng-template>\n</div>\n", styles: [""], directives: [{ type:
|
|
2587
|
+
AvatarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type" }, ngImport: i0__namespace, template: "<div\n class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n location\n }}\"\n title=\"{{ name }}\"\n [style]=\"{\n flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n fontSize: 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')',\n height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n }\"\n>\n <img\n *ngIf=\"imageUrl && !isError; else fallback\"\n class=\"str-chat__avatar-image str-chat__avatar-image{{\n isLoaded ? ' str-chat__avatar-image--loaded' : ''\n }}\"\n src=\"{{ imageUrl }}\"\n alt=\"{{ initials }}\"\n data-testid=\"avatar-img\"\n (load)=\"isLoaded = true\"\n (error)=\"isError = true\"\n [style]=\"{\n flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n objectFit: 'cover',\n width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n }\"\n />\n <ng-template #fallback>\n <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n {{ initials }}\n </div>\n </ng-template>\n</div>\n", styles: [""], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
|
|
2348
2588
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarComponent, decorators: [{
|
|
2349
2589
|
type: i0.Component,
|
|
2350
2590
|
args: [{
|
|
@@ -2530,7 +2770,7 @@
|
|
|
2530
2770
|
return AvatarPlaceholderComponent;
|
|
2531
2771
|
}());
|
|
2532
2772
|
AvatarPlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2533
|
-
AvatarPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type" }, ngImport: i0__namespace, template: "<ng-template\n #defaultAvatar\n let-name=\"name\"\n let-imageUrl=\"imageUrl\"\n let-size=\"size\"\n let-type=\"type\"\n let-channel=\"channel\"\n let-user=\"user\"\n let-location=\"location\"\n>\n <stream-avatar\n [name]=\"name\"\n [imageUrl]=\"imageUrl\"\n [size]=\"size\"\n [type]=\"type\"\n [channel]=\"channel\"\n [user]=\"user\"\n [location]=\"location\"\n ></stream-avatar>\n</ng-template>\n<ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n context: getAvatarContext()\n \"\n></ng-container>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type:
|
|
2773
|
+
AvatarPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type" }, ngImport: i0__namespace, template: "<ng-template\n #defaultAvatar\n let-name=\"name\"\n let-imageUrl=\"imageUrl\"\n let-size=\"size\"\n let-type=\"type\"\n let-channel=\"channel\"\n let-user=\"user\"\n let-location=\"location\"\n>\n <stream-avatar\n [name]=\"name\"\n [imageUrl]=\"imageUrl\"\n [size]=\"size\"\n [type]=\"type\"\n [channel]=\"channel\"\n [user]=\"user\"\n [location]=\"location\"\n ></stream-avatar>\n</ng-template>\n<ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n context: getAvatarContext()\n \"\n></ng-container>\n", components: [{ type: AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4__namespace.AsyncPipe } });
|
|
2534
2774
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AvatarPlaceholderComponent, decorators: [{
|
|
2535
2775
|
type: i0.Component,
|
|
2536
2776
|
args: [{
|
|
@@ -2563,7 +2803,7 @@
|
|
|
2563
2803
|
return IconComponent;
|
|
2564
2804
|
}());
|
|
2565
2805
|
IconComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2566
|
-
IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<svg\n data-testid=\"action-icon\"\n *ngIf=\"icon === 'action-icon'\"\n height=\"4\"\n viewBox=\"0 0 11 4\"\n width=\"11\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n fillRule=\"nonzero\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'delivered-icon'\"\n data-testid=\"delivered-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.9999 16.2L4.7999 12L3.3999 13.4L8.9999 19L20.9999 6.99998L19.5999 5.59998L8.9999 16.2Z\"\n fill=\"black\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'reaction-icon'\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n width=\"12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-testid=\"reaction-icon\"\n>\n <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n <path\n d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n ></path>\n <path\n d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n ></path>\n </g>\n</svg>\n<svg\n data-testid=\"connection-error\"\n *ngIf=\"icon === 'connection-error'\"\n width=\"78px\"\n height=\"78px\"\n viewBox=\"0 0 78 78\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n <title>Combined Shape</title>\n <desc>Created with Sketch.</desc>\n <g\n id=\"Interactions\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g\n id=\"Connection-Error-_-Connectivity\"\n transform=\"translate(-270.000000, -30.000000)\"\n fill=\"#CF1F25\"\n >\n <g\n id=\"109-network-connection\"\n transform=\"translate(270.000000, 30.000000)\"\n >\n <path\n d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n id=\"Combined-Shape\"\n ></path>\n </g>\n </g>\n </g>\n</svg>\n<svg\n *ngIf=\"icon === 'send'\"\n data-testid=\"send\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <title translate>streamChat.Send</title>\n <path\n d=\"M4.00952 22L24 12L4.00952 2L4 9.77778L18.2857 12L4 14.2222L4.00952 22Z\"\n fill=\"black\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'file-upload'\"\n data-testid=\"file-upload\"\n height=\"14\"\n width=\"14\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <title translate>streamChat.Attach files</title>\n <path\n d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n fillRule=\"nonzero\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'retry'\"\n data-testid=\"retry\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z\"\n fill=\"black\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'close'\"\n data-testid=\"close\"\n width=\"28\"\n height=\"28\"\n viewBox=\"0 0 28 28\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <rect width=\"28\" height=\"28\" rx=\"14\" fill=\"#72767E\" />\n <circle cx=\"14\" cy=\"14\" r=\"12\" fill=\"#72767E\" />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14ZM26 14C26 20.6274 20.6274 26 14 26C7.37258 26 2 20.6274 2 14C2 7.37258 7.37258 2 14 2C20.6274 2 26 7.37258 26 14ZM19.59 7L21 8.41L15.41 14L21 19.59L19.59 21L14 15.41L8.41 21L7 19.59L12.59 14L7 8.41L8.41 7L14 12.59L19.59 7Z\"\n fill=\"white\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'file'\"\n data-testid=\"file\"\n className=\"rfu-file-icon--small fa-file-fallback\"\n [attr.height]=\"size || 20\"\n [attr.width]=\"size || 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 384 512\"\n>\n <path\n d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n fill=\"#414D54\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'unspecified-filetype'\"\n data-testid=\"unspecified-filetype\"\n width=\"34\"\n height=\"40\"\n viewBox=\"0 0 34 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M0 3C0 1.34315 1.34315 0 3 0H23L34 11V37C34 38.6569 32.6569 40 31 40H3C1.34315 40 0 38.6569 0 37V3Z\"\n fill=\"url(#paint0_linear)\"\n />\n <path d=\"M34 11L26 11C24.3431 11 23 9.65685 23 8V0L34 11Z\" fill=\"#DBDBDB\" />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8 13H23V15H8V13Z\"\n fill=\"#CFCFCF\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8 17H18V19H8V17Z\"\n fill=\"#CFCFCF\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8 21H23V23H8V21Z\"\n fill=\"#CFCFCF\"\n />\n <defs>\n <linearGradient\n id=\"paint0_linear\"\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"40\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"white\" />\n <stop offset=\"1\" stop-color=\"#DBDBDB\" />\n </linearGradient>\n </defs>\n</svg>\n<svg\n *ngIf=\"icon === 'reply'\"\n data-testid=\"reply\"\n height=\"15\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n fillRule=\"nonzero\"\n />\n</svg>\n<svg\n data-testid=\"close-no-outline\"\n *ngIf=\"icon === 'close-no-outline'\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n fill=\"black\"\n />\n</svg>\n<svg\n height=\"10\"\n width=\"14\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-testid=\"reply-in-thread\"\n *ngIf=\"icon === 'reply-in-thread'\"\n>\n <path\n d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n fillRule=\"evenodd\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'arrow-left'\"\n data-testid=\"arrow-left\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z\"\n fill=\"var(--black)\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow-right'\"\n data-testid=\"arrow-right\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z\"\n fill=\"var(--black)\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'menu'\"\n data-testid=\"menu\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z\"\n fill=\"black\"\n />\n</svg>\n\n<svg\n data-testid=\"arrow-up\"\n *ngIf=\"icon === 'arrow-up'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M16.59 15.7051L12 11.1251L7.41 15.7051L6 14.2951L12 8.29508L18 14.2951L16.59 15.7051Z\"\n fill=\"var(--primary-color)\"\n />\n</svg>\n<svg\n data-testid=\"arrow-down\"\n *ngIf=\"icon === 'arrow-down'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z\"\n fill=\"var(--primary-color)\"\n />\n</svg>\n<svg\n data-testid=\"chat-bubble\"\n *ngIf=\"icon === 'chat-bubble'\"\n viewBox=\"0 0 136 136\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M106 24.5H30C24.775 24.5 20.5 28.775 20.5 34V119.5L39.5 100.5H106C111.225 100.5 115.5 96.225 115.5 91V34C115.5 28.775 111.225 24.5 106 24.5ZM106 91H39.5L30 100.5V34H106V91Z\"\n fill=\"#B4B7BB\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'attach'\"\n data-testid=\"attach\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <g clip-path=\"url(#clip0_10878_5)\">\n <path\n d=\"M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z\"\n fill=\"black\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10878_5\">\n <rect width=\"24\" height=\"24\" fill=\"white\" />\n </clipPath>\n </defs>\n</svg>\n<svg\n *ngIf=\"icon === 'download'\"\n data-testid=\"download\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z\"\n fill=\"black\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'error'\"\n data-testid=\"error\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n id=\"background\"\n d=\"M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z\"\n fill=\"black\"\n />\n <path d=\"M13 17H11V15H13V17ZM13 13H11V7H13V13Z\" fill=\"white\" />\n</svg>\n", directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i8__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
|
|
2806
|
+
IconComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconComponent, selector: "stream-icon", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<svg\n data-testid=\"action-icon\"\n *ngIf=\"icon === 'action-icon'\"\n height=\"4\"\n viewBox=\"0 0 11 4\"\n width=\"11\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M1.5 3a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z\"\n fillRule=\"nonzero\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'delivered-icon'\"\n data-testid=\"delivered-icon\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8.9999 16.2L4.7999 12L3.3999 13.4L8.9999 19L20.9999 6.99998L19.5999 5.59998L8.9999 16.2Z\"\n fill=\"black\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'reaction-icon'\"\n height=\"12\"\n viewBox=\"0 0 12 12\"\n width=\"12\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-testid=\"reaction-icon\"\n>\n <g clipRule=\"evenodd\" fillRule=\"evenodd\">\n <path\n d=\"M6 1.2C3.3 1.2 1.2 3.3 1.2 6c0 2.7 2.1 4.8 4.8 4.8 2.7 0 4.8-2.1 4.8-4.8 0-2.7-2.1-4.8-4.8-4.8zM0 6c0-3.3 2.7-6 6-6s6 2.7 6 6-2.7 6-6 6-6-2.7-6-6z\"\n ></path>\n <path\n d=\"M5.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM8.4 4.5c0 .5-.4.9-.9.9s-.9-.4-.9-.9.4-.9.9-.9.9.4.9.9zM3.3 6.7c.3-.2.6-.1.8.1.3.4.8.9 1.5 1 .6.2 1.4.1 2.4-1 .2-.2.6-.3.8 0 .2.2.3.6 0 .8-1.1 1.3-2.4 1.7-3.5 1.5-1-.2-1.8-.9-2.2-1.5-.2-.3-.1-.7.2-.9z\"\n ></path>\n </g>\n</svg>\n<svg\n data-testid=\"connection-error\"\n *ngIf=\"icon === 'connection-error'\"\n width=\"78px\"\n height=\"78px\"\n viewBox=\"0 0 78 78\"\n version=\"1.1\"\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n>\n <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->\n <title>Combined Shape</title>\n <desc>Created with Sketch.</desc>\n <g\n id=\"Interactions\"\n stroke=\"none\"\n stroke-width=\"1\"\n fill=\"none\"\n fill-rule=\"evenodd\"\n >\n <g\n id=\"Connection-Error-_-Connectivity\"\n transform=\"translate(-270.000000, -30.000000)\"\n fill=\"#CF1F25\"\n >\n <g\n id=\"109-network-connection\"\n transform=\"translate(270.000000, 30.000000)\"\n >\n <path\n d=\"M66.4609744,11.414231 C81.6225232,26.5757798 81.6225232,51.157545 66.4609744,66.3188467 C51.2994256,81.4803954 26.7176604,81.4803954 11.5563587,66.3188467 C-3.60519004,51.1572979 -3.60519004,26.5755327 11.5563587,11.414231 C26.7179075,-3.74731776 51.2996727,-3.74731776 66.4609744,11.414231 Z M54.7853215,45.8823776 L54.7853215,40.5882574 C54.7853215,39.613638 53.9952341,38.8235506 53.0206147,38.8235506 L44.9576695,38.8235506 L41.428256,42.3529641 L51.255555,42.3529641 L51.255555,45.8823776 L54.7853215,45.8823776 Z M40.6659027,43.1153174 L37.8988425,45.8823776 L40.6659027,45.8823776 L40.6659027,43.1153174 Z M51.1764962,56.4702653 L58.2353232,56.4702653 C59.2099355,56.4702653 60.00003,55.6801708 60.00003,54.7055585 L60.00003,51.176145 C60.00003,50.2015327 59.2099355,49.4114382 58.2353232,49.4114382 L51.1764962,49.4114382 C50.2018839,49.4114382 49.4117894,50.2015327 49.4117894,51.176145 L49.4117894,54.7055585 C49.4117894,55.6801708 50.2018839,56.4702653 51.1764962,56.4702653 Z M35.2941353,56.4702653 L42.3529624,56.4702653 C43.3275746,56.4702653 44.1176691,55.6801708 44.1176691,54.7055585 L44.1176691,51.176145 C44.1176691,50.2015327 43.3275746,49.4114382 42.3529624,49.4114382 L35.2941353,49.4114382 C34.319523,49.4114382 33.5294285,50.2015327 33.5294285,51.176145 L33.5294285,54.7055585 C33.5294285,55.6801708 34.319523,56.4702653 35.2941353,56.4702653 Z M56.6964989,19.0874231 C56.007381,18.3985134 54.8903216,18.3985134 54.2012036,19.087423 L45.882376,27.4062507 L45.882376,19.4117761 C45.882376,18.4371568 45.0922885,17.6470693 44.1176692,17.6470693 L33.5294286,17.6470693 C32.5548092,17.6470694 31.7647218,18.4371568 31.7647218,19.4117761 L31.7647218,30.0000167 C31.7647219,30.9746363 32.5548092,31.7647237 33.5294285,31.7647237 L41.5239031,31.7647237 L34.4650761,38.8235508 L24.7058947,38.8235508 C23.7312753,38.8235508 22.9411879,39.6136382 22.9411879,40.5882575 L22.9411879,45.8823778 L26.4706014,45.8823778 L26.4706014,42.3529643 L30.9356624,42.3529643 L23.8768354,49.4117914 L19.4117743,49.4117914 C18.4371549,49.4117914 17.6470675,50.2018788 17.6470675,51.1764981 L17.6470675,54.7059117 C17.6504049,54.9674302 17.7129076,55.2248042 17.8298886,55.4587302 L16.4456526,56.8429662 C15.7446193,57.5200453 15.7252005,58.6372282 16.4022825,59.3382615 C17.0793616,60.0392948 18.1965445,60.0587136 18.8975778,59.3816316 C18.9122847,59.3674273 18.9267436,59.3529684 18.940948,59.3382615 L56.6964963,21.5830662 C57.3856425,20.8939094 57.3856425,19.7765747 56.6964963,19.0874179 Z\"\n id=\"Combined-Shape\"\n ></path>\n </g>\n </g>\n </g>\n</svg>\n<svg\n *ngIf=\"icon === 'send'\"\n data-testid=\"send\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <title translate>streamChat.Send</title>\n <path\n d=\"M4.00952 22L24 12L4.00952 2L4 9.77778L18.2857 12L4 14.2222L4.00952 22Z\"\n fill=\"black\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'file-upload'\"\n data-testid=\"file-upload\"\n height=\"14\"\n width=\"14\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <title translate>streamChat.Attach files</title>\n <path\n d=\"M1.667.333h10.666c.737 0 1.334.597 1.334 1.334v10.666c0 .737-.597 1.334-1.334 1.334H1.667a1.333 1.333 0 0 1-1.334-1.334V1.667C.333.93.93.333 1.667.333zm2 1.334a1.667 1.667 0 1 0 0 3.333 1.667 1.667 0 0 0 0-3.333zm-2 9.333v1.333h10.666v-4l-2-2-4 4-2-2L1.667 11z\"\n fillRule=\"nonzero\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'retry'\"\n data-testid=\"retry\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M17.6449 6.35C16.1949 4.9 14.2049 4 11.9949 4C7.57488 4 4.00488 7.58 4.00488 12C4.00488 16.42 7.57488 20 11.9949 20C15.7249 20 18.8349 17.45 19.7249 14H17.6449C16.8249 16.33 14.6049 18 11.9949 18C8.68488 18 5.99488 15.31 5.99488 12C5.99488 8.69 8.68488 6 11.9949 6C13.6549 6 15.1349 6.69 16.2149 7.78L12.9949 11H19.9949V4L17.6449 6.35Z\"\n fill=\"black\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'close'\"\n data-testid=\"close\"\n width=\"28\"\n height=\"28\"\n viewBox=\"0 0 28 28\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <rect width=\"28\" height=\"28\" rx=\"14\" fill=\"#72767E\" />\n <circle cx=\"14\" cy=\"14\" r=\"12\" fill=\"#72767E\" />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14ZM26 14C26 20.6274 20.6274 26 14 26C7.37258 26 2 20.6274 2 14C2 7.37258 7.37258 2 14 2C20.6274 2 26 7.37258 26 14ZM19.59 7L21 8.41L15.41 14L21 19.59L19.59 21L14 15.41L8.41 21L7 19.59L12.59 14L7 8.41L8.41 7L14 12.59L19.59 7Z\"\n fill=\"white\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'file'\"\n data-testid=\"file\"\n className=\"rfu-file-icon--small fa-file-fallback\"\n [attr.height]=\"size || 20\"\n [attr.width]=\"size || 20\"\n xmlns=\"http://www.w3.org/2000/svg\"\n viewBox=\"0 0 384 512\"\n>\n <path\n d=\"M369.9 97.9L286 14C277 5 264.8-.1 252.1-.1H48C21.5 0 0 21.5 0 48v416c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V131.9c0-12.7-5.1-25-14.1-34zM332.1 128H256V51.9l76.1 76.1zM48 464V48h160v104c0 13.3 10.7 24 24 24h104v288H48z\"\n fill=\"#414D54\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'unspecified-filetype'\"\n data-testid=\"unspecified-filetype\"\n width=\"34\"\n height=\"40\"\n viewBox=\"0 0 34 40\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M0 3C0 1.34315 1.34315 0 3 0H23L34 11V37C34 38.6569 32.6569 40 31 40H3C1.34315 40 0 38.6569 0 37V3Z\"\n fill=\"url(#paint0_linear)\"\n />\n <path d=\"M34 11L26 11C24.3431 11 23 9.65685 23 8V0L34 11Z\" fill=\"#DBDBDB\" />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8 13H23V15H8V13Z\"\n fill=\"#CFCFCF\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8 17H18V19H8V17Z\"\n fill=\"#CFCFCF\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M8 21H23V23H8V21Z\"\n fill=\"#CFCFCF\"\n />\n <defs>\n <linearGradient\n id=\"paint0_linear\"\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"40\"\n gradientUnits=\"userSpaceOnUse\"\n >\n <stop stop-color=\"white\" />\n <stop offset=\"1\" stop-color=\"#DBDBDB\" />\n </linearGradient>\n </defs>\n</svg>\n<svg\n *ngIf=\"icon === 'reply'\"\n data-testid=\"reply\"\n height=\"15\"\n width=\"18\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M.56 10.946H.06l-.002-.498L.025.92a.5.5 0 1 1 1-.004l.032 9.029H9.06v-4l9 4.5-9 4.5v-4H.56z\"\n fillRule=\"nonzero\"\n />\n</svg>\n<svg\n data-testid=\"close-no-outline\"\n *ngIf=\"icon === 'close-no-outline'\"\n viewBox=\"0 0 24 24\"\n width=\"24\"\n height=\"24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12L19 6.41Z\"\n fill=\"black\"\n />\n</svg>\n<svg\n height=\"10\"\n width=\"14\"\n xmlns=\"http://www.w3.org/2000/svg\"\n data-testid=\"reply-in-thread\"\n *ngIf=\"icon === 'reply-in-thread'\"\n>\n <path\n d=\"M8.516 3c4.78 0 4.972 6.5 4.972 6.5-1.6-2.906-2.847-3.184-4.972-3.184v2.872L3.772 4.994 8.516.5V3zM.484 5l4.5-4.237v1.78L2.416 5l2.568 2.125v1.828L.484 5z\"\n fillRule=\"evenodd\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'arrow-left'\"\n data-testid=\"arrow-left\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M15.7049 7.41L14.2949 6L8.29492 12L14.2949 18L15.7049 16.59L11.1249 12L15.7049 7.41Z\"\n fill=\"var(--black)\"\n />\n</svg>\n\n<svg\n *ngIf=\"icon === 'arrow-right'\"\n data-testid=\"arrow-right\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M9.70492 6L8.29492 7.41L12.8749 12L8.29492 16.59L9.70492 18L15.7049 12L9.70492 6Z\"\n fill=\"var(--black)\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'menu'\"\n data-testid=\"menu\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M3 8V6H21V8H3ZM3 13H21V11H3V13ZM3 18H21V16H3V18Z\"\n fill=\"black\"\n />\n</svg>\n\n<svg\n data-testid=\"arrow-up\"\n *ngIf=\"icon === 'arrow-up'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M16.59 15.7051L12 11.1251L7.41 15.7051L6 14.2951L12 8.29508L18 14.2951L16.59 15.7051Z\"\n fill=\"var(--primary-color)\"\n />\n</svg>\n<svg\n data-testid=\"arrow-down\"\n *ngIf=\"icon === 'arrow-down'\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M7.41 8.29504L12 12.875L16.59 8.29504L18 9.70504L12 15.705L6 9.70504L7.41 8.29504Z\"\n fill=\"var(--primary-color)\"\n />\n</svg>\n<svg\n data-testid=\"chat-bubble\"\n *ngIf=\"icon === 'chat-bubble'\"\n viewBox=\"0 0 136 136\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M106 24.5H30C24.775 24.5 20.5 28.775 20.5 34V119.5L39.5 100.5H106C111.225 100.5 115.5 96.225 115.5 91V34C115.5 28.775 111.225 24.5 106 24.5ZM106 91H39.5L30 100.5V34H106V91Z\"\n fill=\"#B4B7BB\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'attach'\"\n data-testid=\"attach\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <g clip-path=\"url(#clip0_10878_5)\">\n <path\n d=\"M12.9997 6.99993L10.9997 6.99993L10.9997 10.9999L6.99972 10.9999L6.99972 12.9999L10.9997 12.9999L10.9997 16.9999L12.9997 16.9999L12.9997 12.9999L16.9997 12.9999L16.9997 10.9999L12.9997 10.9999L12.9997 6.99993ZM11.9997 1.99992C6.47972 1.99992 1.99972 6.47993 1.99972 11.9999C1.99972 17.5199 6.47972 21.9999 11.9997 21.9999C17.5197 21.9999 21.9997 17.5199 21.9997 11.9999C21.9997 6.47993 17.5197 1.99992 11.9997 1.99992ZM11.9997 19.9999C7.58972 19.9999 3.99972 16.4099 3.99972 11.9999C3.99972 7.58993 7.58972 3.99993 11.9997 3.99993C16.4097 3.99993 19.9997 7.58993 19.9997 11.9999C19.9997 16.4099 16.4097 19.9999 11.9997 19.9999Z\"\n fill=\"black\"\n />\n </g>\n <defs>\n <clipPath id=\"clip0_10878_5\">\n <rect width=\"24\" height=\"24\" fill=\"white\" />\n </clipPath>\n </defs>\n</svg>\n<svg\n *ngIf=\"icon === 'download'\"\n data-testid=\"download\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n d=\"M19.35 10.04C18.67 6.59 15.64 4 12 4C9.11 4 6.6 5.64 5.35 8.04C2.34 8.36 0 10.91 0 14C0 17.31 2.69 20 6 20H19C21.76 20 24 17.76 24 15C24 12.36 21.95 10.22 19.35 10.04ZM19 18H6C3.79 18 2 16.21 2 14C2 11.95 3.53 10.24 5.56 10.03L6.63 9.92L7.13 8.97C8.08 7.14 9.94 6 12 6C14.62 6 16.88 7.86 17.39 10.43L17.69 11.93L19.22 12.04C20.78 12.14 22 13.45 22 15C22 16.65 20.65 18 19 18ZM13.45 10H10.55V13H8L12 17L16 13H13.45V10Z\"\n fill=\"black\"\n />\n</svg>\n<svg\n *ngIf=\"icon === 'error'\"\n data-testid=\"error\"\n width=\"24\"\n height=\"24\"\n viewBox=\"0 0 24 24\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n>\n <path\n id=\"background\"\n d=\"M12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z\"\n fill=\"black\"\n />\n <path d=\"M13 17H11V15H13V17ZM13 13H11V7H13V13Z\" fill=\"white\" />\n</svg>\n", directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }] });
|
|
2567
2807
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconComponent, decorators: [{
|
|
2568
2808
|
type: i0.Component,
|
|
2569
2809
|
args: [{
|
|
@@ -2593,7 +2833,7 @@
|
|
|
2593
2833
|
return IconPlaceholderComponent;
|
|
2594
2834
|
}());
|
|
2595
2835
|
IconPlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2596
|
-
IconPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<ng-template #defaultIcon let-icon=\"icon\" let-size=\"size\">\n <stream-icon [icon]=\"icon\" [size]=\"size\"></stream-icon>\n</ng-template>\n<ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.iconTemplate$ | async) || defaultIcon;\n context: getIconContext()\n \"\n></ng-container>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type:
|
|
2836
|
+
IconPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: { icon: "icon", size: "size" }, ngImport: i0__namespace, template: "<ng-template #defaultIcon let-icon=\"icon\" let-size=\"size\">\n <stream-icon [icon]=\"icon\" [size]=\"size\"></stream-icon>\n</ng-template>\n<ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.iconTemplate$ | async) || defaultIcon;\n context: getIconContext()\n \"\n></ng-container>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4__namespace.AsyncPipe } });
|
|
2597
2837
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: IconPlaceholderComponent, decorators: [{
|
|
2598
2838
|
type: i0.Component,
|
|
2599
2839
|
args: [{
|
|
@@ -2625,7 +2865,7 @@
|
|
|
2625
2865
|
return LoadingIndicatorComponent;
|
|
2626
2866
|
}());
|
|
2627
2867
|
LoadingIndicatorComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: LoadingIndicatorComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2628
|
-
LoadingIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: { size: "size", color: "color" }, ngImport: i0__namespace, template: "<div class=\"str-chat__loading-indicator\">\n <svg\n [attr.height]=\"size\"\n viewBox=\"0 0 30 30\"\n [attr.width]=\"size\"\n data-testid=\"loading-indicator\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n id=\"{{ linearGradientId }}\"\n x1=\"50%\"\n x2=\"50%\"\n y1=\"0%\"\n y2=\"100%\"\n >\n <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n <stop\n data-testid=\"stop-color\"\n offset=\"100%\"\n [attr.stop-color]=\"color\"\n stop-opacity=\"1\"\n [ngStyle]=\"{ stopColor: color }\"\n />\n </linearGradient>\n </defs>\n <path\n d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n [attr.fill]=\"'url(#' + linearGradientId + ')'\"\n fillRule=\"evenodd\"\n />\n </svg>\n</div>\n", directives: [{ type:
|
|
2868
|
+
LoadingIndicatorComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: { size: "size", color: "color" }, ngImport: i0__namespace, template: "<div class=\"str-chat__loading-indicator\">\n <svg\n [attr.height]=\"size\"\n viewBox=\"0 0 30 30\"\n [attr.width]=\"size\"\n data-testid=\"loading-indicator\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <defs>\n <linearGradient\n id=\"{{ linearGradientId }}\"\n x1=\"50%\"\n x2=\"50%\"\n y1=\"0%\"\n y2=\"100%\"\n >\n <stop offset=\"0%\" stop-color=\"#FFF\" stop-opacity=\"0\" />\n <stop\n data-testid=\"stop-color\"\n offset=\"100%\"\n [attr.stop-color]=\"color\"\n stop-opacity=\"1\"\n [ngStyle]=\"{ stopColor: color }\"\n />\n </linearGradient>\n </defs>\n <path\n d=\"M2.518 23.321l1.664-1.11A12.988 12.988 0 0 0 15 28c7.18 0 13-5.82 13-13S22.18 2 15 2V0c8.284 0 15 6.716 15 15 0 8.284-6.716 15-15 15-5.206 0-9.792-2.652-12.482-6.679z\"\n [attr.fill]=\"'url(#' + linearGradientId + ')'\"\n fillRule=\"evenodd\"\n />\n </svg>\n</div>\n", directives: [{ type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
2629
2869
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: LoadingIndicatorComponent, decorators: [{
|
|
2630
2870
|
type: i0.Component,
|
|
2631
2871
|
args: [{
|
|
@@ -2663,7 +2903,7 @@
|
|
|
2663
2903
|
return LoadingIndicatorPlaceholderComponent;
|
|
2664
2904
|
}());
|
|
2665
2905
|
LoadingIndicatorPlaceholderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: LoadingIndicatorPlaceholderComponent, deps: [{ token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2666
|
-
LoadingIndicatorPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: { size: "size", color: "color" }, ngImport: i0__namespace, template: "<ng-template #defaultLoadingIndicator let-size=\"size\" let-color=\"color\">\n <stream-loading-indicator\n [size]=\"size\"\n [color]=\"color\"\n ></stream-loading-indicator>\n</ng-template>\n<ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.loadingIndicatorTemplate$ | async) ||\n defaultLoadingIndicator;\n context: getLoadingIndicatorContext()\n \"\n></ng-container>\n", components: [{ type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type:
|
|
2906
|
+
LoadingIndicatorPlaceholderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: { size: "size", color: "color" }, ngImport: i0__namespace, template: "<ng-template #defaultLoadingIndicator let-size=\"size\" let-color=\"color\">\n <stream-loading-indicator\n [size]=\"size\"\n [color]=\"color\"\n ></stream-loading-indicator>\n</ng-template>\n<ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.loadingIndicatorTemplate$ | async) ||\n defaultLoadingIndicator;\n context: getLoadingIndicatorContext()\n \"\n></ng-container>\n", components: [{ type: LoadingIndicatorComponent, selector: "stream-loading-indicator", inputs: ["size", "color"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4__namespace.AsyncPipe } });
|
|
2667
2907
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: LoadingIndicatorPlaceholderComponent, decorators: [{
|
|
2668
2908
|
type: i0.Component,
|
|
2669
2909
|
args: [{
|
|
@@ -2731,7 +2971,7 @@
|
|
|
2731
2971
|
return ModalComponent;
|
|
2732
2972
|
}());
|
|
2733
2973
|
ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ModalComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
2734
|
-
ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ModalComponent, selector: "stream-modal", inputs: { isOpen: "isOpen", content: "content" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "innerContainer", first: true, predicate: ["modalInner"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n data-testid=\"modal\"\n class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n <div\n data-testid=\"close\"\n class=\"str-chat__modal__close-button\"\n (click)=\"close()\"\n (keyup.enter)=\"close()\"\n >\n <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n </div>\n <div class=\"str-chat__modal__inner\" #modalInner>\n <ng-container *ngIf=\"content; else elseContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #elseContent>\n <ng-content></ng-content>\n </ng-template>\n </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type:
|
|
2974
|
+
ModalComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ModalComponent, selector: "stream-modal", inputs: { isOpen: "isOpen", content: "content" }, outputs: { isOpenChange: "isOpenChange" }, viewQueries: [{ propertyName: "innerContainer", first: true, predicate: ["modalInner"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n data-testid=\"modal\"\n class=\"str-chat__modal str-chat__modal--{{ isOpen ? 'open' : 'close' }}\"\n>\n <div\n data-testid=\"close\"\n class=\"str-chat__modal__close-button\"\n (click)=\"close()\"\n (keyup.enter)=\"close()\"\n >\n <stream-icon-placeholder icon=\"close\"></stream-icon-placeholder>\n </div>\n <div class=\"str-chat__modal__inner\" #modalInner>\n <ng-container *ngIf=\"content; else elseContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #elseContent>\n <ng-content></ng-content>\n </ng-template>\n </div>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
2735
2975
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ModalComponent, decorators: [{
|
|
2736
2976
|
type: i0.Component,
|
|
2737
2977
|
args: [{
|
|
@@ -2882,35 +3122,14 @@
|
|
|
2882
3122
|
}]
|
|
2883
3123
|
}], ctorParameters: function () { return []; } });
|
|
2884
3124
|
|
|
2885
|
-
/**
|
|
2886
|
-
* The `ImageLoadService` is used to position the scrollbar in the message list
|
|
2887
|
-
*/
|
|
2888
|
-
var ImageLoadService = /** @class */ (function () {
|
|
2889
|
-
function ImageLoadService() {
|
|
2890
|
-
/**
|
|
2891
|
-
* A subject that can be used to notify the message list if an image attachment finished loading
|
|
2892
|
-
*/
|
|
2893
|
-
this.imageLoad$ = new rxjs.Subject();
|
|
2894
|
-
}
|
|
2895
|
-
return ImageLoadService;
|
|
2896
|
-
}());
|
|
2897
|
-
ImageLoadService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ImageLoadService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
2898
|
-
ImageLoadService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ImageLoadService, providedIn: 'root' });
|
|
2899
|
-
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ImageLoadService, decorators: [{
|
|
2900
|
-
type: i0.Injectable,
|
|
2901
|
-
args: [{
|
|
2902
|
-
providedIn: 'root',
|
|
2903
|
-
}]
|
|
2904
|
-
}], ctorParameters: function () { return []; } });
|
|
2905
|
-
|
|
2906
3125
|
/**
|
|
2907
3126
|
* The `AttachmentList` compontent displays the attachments of a message
|
|
2908
3127
|
*/
|
|
2909
3128
|
var AttachmentListComponent = /** @class */ (function () {
|
|
2910
|
-
function AttachmentListComponent(customTemplatesService,
|
|
3129
|
+
function AttachmentListComponent(customTemplatesService, channelService, attachmentConfigurationService, themeService) {
|
|
2911
3130
|
this.customTemplatesService = customTemplatesService;
|
|
2912
|
-
this.imageLoadService = imageLoadService;
|
|
2913
3131
|
this.channelService = channelService;
|
|
3132
|
+
this.attachmentConfigurationService = attachmentConfigurationService;
|
|
2914
3133
|
/**
|
|
2915
3134
|
* The attachments to display
|
|
2916
3135
|
*/
|
|
@@ -2960,9 +3179,6 @@
|
|
|
2960
3179
|
(attachment.type === 'image' && !this.isImage(attachment)) ||
|
|
2961
3180
|
attachment.type === 'giphy');
|
|
2962
3181
|
};
|
|
2963
|
-
AttachmentListComponent.prototype.imageLoaded = function () {
|
|
2964
|
-
this.imageLoadService.imageLoad$.next();
|
|
2965
|
-
};
|
|
2966
3182
|
AttachmentListComponent.prototype.hasFileSize = function (attachment) {
|
|
2967
3183
|
return (attachment.file_size && Number.isFinite(Number(attachment.file_size)));
|
|
2968
3184
|
};
|
|
@@ -3006,6 +3222,20 @@
|
|
|
3006
3222
|
AttachmentListComponent.prototype.trackByImageUrl = function (_, item) {
|
|
3007
3223
|
return item.image_url || item.img_url || item.thumb_url;
|
|
3008
3224
|
};
|
|
3225
|
+
AttachmentListComponent.prototype.getImageAttachmentConfiguration = function (attachment, type) {
|
|
3226
|
+
return this.attachmentConfigurationService.getImageAttachmentConfiguration(attachment, type);
|
|
3227
|
+
};
|
|
3228
|
+
AttachmentListComponent.prototype.getVideoAttachmentConfiguration = function (attachment) {
|
|
3229
|
+
return this.attachmentConfigurationService.getVideoAttachmentConfiguration(attachment);
|
|
3230
|
+
};
|
|
3231
|
+
AttachmentListComponent.prototype.getCardAttachmentConfiguration = function (attachment) {
|
|
3232
|
+
if (attachment.type === 'giphy') {
|
|
3233
|
+
return this.attachmentConfigurationService.getGiphyAttachmentConfiguration(attachment);
|
|
3234
|
+
}
|
|
3235
|
+
else {
|
|
3236
|
+
return this.attachmentConfigurationService.getScrapedImageAttachmentConfiguration(attachment);
|
|
3237
|
+
}
|
|
3238
|
+
};
|
|
3009
3239
|
Object.defineProperty(AttachmentListComponent.prototype, "isImageModalPrevButtonVisible", {
|
|
3010
3240
|
get: function () {
|
|
3011
3241
|
return this.imagesToViewCurrentIndex !== 0;
|
|
@@ -3033,8 +3263,8 @@
|
|
|
3033
3263
|
};
|
|
3034
3264
|
return AttachmentListComponent;
|
|
3035
3265
|
}());
|
|
3036
|
-
AttachmentListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token:
|
|
3037
|
-
AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n <ng-container\n *ngFor=\"let attachment of orderedAttachments; trackBy: trackById\"\n >\n <div\n data-testclass=\"attachment-container\"\n class=\"str-chat__message-attachment str-chat__message-attachment--{{\n attachment.type\n }}\"\n [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n [class.str-chat-angular__message-attachment-file-single]=\"\n isFile(attachment)\n \"\n [class.str-chat__message-attachment-with-actions]=\"\n attachment.actions && attachment.actions.length > 0\n \"\n [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n >\n <img\n *ngIf=\"isImage(attachment)\"\n class=\"str-chat__message-attachment--img\"\n data-testclass=\"image\"\n [src]=\"\n attachment.img_url || attachment.thumb_url || attachment.image_url\n \"\n [alt]=\"attachment?.fallback\"\n (load)=\"imageLoaded()\"\n (click)=\"openImageModal([attachment])\"\n (keyup.enter)=\"openImageModal([attachment])\"\n />\n <div\n class=\"str-chat__gallery\"\n data-testid=\"image-gallery\"\n *ngIf=\"isGallery(attachment)\"\n [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n [class.str-chat__gallery-two-rows]=\"(attachment?.images)!.length > 2\"\n >\n <ng-container\n *ngFor=\"\n let galleryImage of attachment.images;\n let index = index;\n let isLast = last;\n trackBy: trackByImageUrl\n \"\n >\n <button\n *ngIf=\"index < 3 || (index === 3 && isLast)\"\n class=\"str-chat__gallery-image\"\n data-testclass=\"gallery-image\"\n (click)=\"openImageModal(attachment.images!, index)\"\n (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n [class.str-chat__message-attachment--svg-image]=\"\n isSvg(galleryImage)\n \"\n >\n <img\n [src]=\"\n galleryImage.img_url ||\n galleryImage.thumb_url ||\n galleryImage.image_url\n \"\n [alt]=\"galleryImage.fallback\"\n (load)=\"imageLoaded()\"\n />\n </button>\n <button\n *ngIf=\"index === 3 && !isLast\"\n class=\"str-chat__gallery-placeholder\"\n data-testclass=\"gallery-image\"\n (click)=\"openImageModal(attachment.images!, index)\"\n (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n [class.str-chat__message-attachment--svg-image]=\"\n isSvg(galleryImage)\n \"\n [ngStyle]=\"{\n 'background-image':\n 'url(' +\n (galleryImage.img_url ||\n galleryImage.thumb_url ||\n galleryImage.image_url) +\n ')'\n }\"\n >\n <p\n [innerHTML]=\"\n 'streamChat.{{ imageCount }} more'\n | translate: { imageCount: attachment!.images!.length - 4 }\n \"\n ></p>\n </button>\n </ng-container>\n </div>\n <div class=\"str-chat__player-wrapper\" *ngIf=\"isVideo(attachment)\">\n <video\n class=\"str-chat__video-angular\"\n controls\n data-testclass=\"video-attachment\"\n [src]=\"attachment.asset_url\"\n ></video>\n </div>\n <div\n *ngIf=\"isFile(attachment)\"\n class=\"\n str-chat__message-attachment-file--item\n str-chat-angular__message-attachment-file-single\n \"\n >\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '1'\"\n icon=\"file\"\n [size]=\"30\"\n ></stream-icon-placeholder>\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '2'\"\n icon=\"unspecified-filetype\"\n [size]=\"30\"\n ></stream-icon-placeholder>\n <div class=\"str-chat__message-attachment-file--item-text\">\n <div class=\"str-chat__message-attachment-file--item-first-row\">\n <div\n data-testclass=\"file-title\"\n class=\"str-chat__message-attachment-file--item-name\"\n >\n {{ attachment.title }}\n </div>\n <a\n class=\"str-chat__message-attachment-file--item-download\"\n data-testclass=\"file-link\"\n download\n href=\"{{ attachment.asset_url }}\"\n target=\"_blank\"\n >\n <stream-icon-placeholder\n class=\"str-chat__message-attachment-download-icon\"\n icon=\"download\"\n ></stream-icon-placeholder>\n </a>\n </div>\n <span\n class=\"str-chat__message-attachment-file--item-size\"\n data-testclass=\"size\"\n *ngIf=\"hasFileSize(attachment)\"\n >{{ getFileSize(attachment) }}</span\n >\n </div>\n </div>\n <div\n *ngIf=\"isCard(attachment)\"\n class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n attachment.type\n }}\"\n >\n <div\n *ngIf=\"attachment.image_url || attachment.thumb_url\"\n class=\"str-chat__message-attachment-card--header\"\n >\n <img\n data-testclass=\"card-img\"\n alt=\"{{ attachment.image_url || attachment.thumb_url }}\"\n src=\"{{ attachment.image_url || attachment.thumb_url }}\"\n />\n </div>\n <div class=\"str-chat__message-attachment-card--content\">\n <div class=\"str-chat__message-attachment-card--flex\">\n <div\n *ngIf=\"attachment.title\"\n data-testclass=\"card-title\"\n class=\"str-chat__message-attachment-card--title\"\n >\n {{ attachment.title }}\n </div>\n <div\n *ngIf=\"attachment.text\"\n class=\"str-chat__message-attachment-card--text\"\n data-testclass=\"card-text\"\n >\n {{ attachment.text }}\n </div>\n <a\n class=\"str-chat__message-attachment-card--url\"\n *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n data-testclass=\"url-link\"\n noopener\n noreferrer\n href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n target=\"_blank\"\n >\n {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n </a>\n </div>\n </div>\n </div>\n <div\n class=\"str-chat__message-attachment-actions\"\n *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n >\n <div class=\"str-chat__message-attachment-actions-form\">\n <button\n *ngFor=\"\n let action of attachment.actions;\n trackBy: trackByActionValue\n \"\n class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n action.style\n }}\"\n data-testclass=\"attachment-action\"\n (click)=\"sendAction(action)\"\n (keyup.enter)=\"sendAction(action)\"\n >\n {{ action.text }}\n </button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.modalTemplate$ | async) || defaultModal;\n context: getModalContext()\n \"\n ></ng-container>\n </ng-container>\n</div>\n\n<ng-template\n #defaultModal\n let-isOpen=\"isOpen\"\n let-isOpenChangeHandler=\"isOpenChangeHandler\"\n let-content=\"content\"\n>\n <stream-modal\n [isOpen]=\"isOpen\"\n (isOpenChange)=\"isOpenChangeHandler($event)\"\n [content]=\"content\"\n >\n </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n <button\n class=\"\n stream-chat-angular__image-modal-stepper\n str-chat__image-carousel-stepper\n \"\n [ngStyle]=\"{\n visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n }\"\n data-testid=\"image-modal-prev\"\n type=\"button\"\n (click)=\"stepImages(-1)\"\n (keyup.enter)=\"stepImages(-1)\"\n >\n <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n </button>\n <img\n class=\"\n stream-chat-angular__image-modal-image\n str-chat__image-carousel-image\n \"\n data-testid=\"modal-image\"\n [src]=\"\n imagesToView[imagesToViewCurrentIndex].img_url ||\n imagesToView[imagesToViewCurrentIndex].thumb_url ||\n imagesToView[imagesToViewCurrentIndex].image_url\n \"\n [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n />\n <button\n class=\"\n stream-chat-angular__image-modal-stepper\n str-chat__image-carousel-stepper\n \"\n type=\"button\"\n [ngStyle]=\"{\n visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n }\"\n data-testid=\"image-modal-next\"\n (click)=\"stepImages(1)\"\n (keyup.enter)=\"stepImages(1)\"\n >\n <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n </button>\n </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i7__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i8__namespace.TranslatePipe, "async": i7__namespace.AsyncPipe } });
|
|
3266
|
+
AttachmentListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: AttachmentConfigurationService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3267
|
+
AttachmentListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentListComponent, selector: "stream-attachment-list", inputs: { messageId: "messageId", parentMessageId: "parentMessageId", attachments: "attachments" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div *ngIf=\"orderedAttachments.length > 0\" class=\"str-chat__attachment-list\">\n <ng-container\n *ngFor=\"let attachment of orderedAttachments; trackBy: trackById\"\n >\n <div\n data-testclass=\"attachment-container\"\n class=\"str-chat__message-attachment str-chat__message-attachment--{{\n attachment.type\n }}\"\n [class.str-chat__message-attachment--card]=\"isCard(attachment)\"\n [class.str-chat-angular__message-attachment-file-single]=\"\n isFile(attachment)\n \"\n [class.str-chat__message-attachment-with-actions]=\"\n attachment.actions && attachment.actions.length > 0\n \"\n [class.str-chat__message-attachment--svg-image]=\"isSvg(attachment)\"\n >\n <img\n *ngIf=\"\n isImage(attachment) &&\n getImageAttachmentConfiguration(\n attachment,\n 'single'\n ) as attachmentConfiguration\n \"\n class=\"str-chat__message-attachment--img\"\n data-testclass=\"image\"\n [src]=\"attachmentConfiguration.url\"\n [alt]=\"attachment?.fallback\"\n (click)=\"openImageModal([attachment])\"\n (keyup.enter)=\"openImageModal([attachment])\"\n [ngStyle]=\"{\n height: attachmentConfiguration.height,\n width: attachmentConfiguration.width\n }\"\n />\n <div\n class=\"str-chat__gallery\"\n data-testid=\"image-gallery\"\n *ngIf=\"isGallery(attachment)\"\n [class.str-chat__gallery--square]=\"(attachment?.images)!.length > 3\"\n [class.str-chat__gallery-two-rows]=\"(attachment?.images)!.length > 2\"\n >\n <ng-container\n *ngFor=\"\n let galleryImage of attachment.images;\n let index = index;\n let isLast = last;\n trackBy: trackByImageUrl\n \"\n >\n <button\n *ngIf=\"index < 3 || (index === 3 && isLast)\"\n class=\"str-chat__gallery-image\"\n data-testclass=\"gallery-image\"\n (click)=\"openImageModal(attachment.images!, index)\"\n (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n [class.str-chat__message-attachment--svg-image]=\"\n isSvg(galleryImage)\n \"\n >\n <img\n *ngIf=\"\n getImageAttachmentConfiguration(\n galleryImage,\n 'gallery'\n ) as attachmentConfiguration\n \"\n [src]=\"attachmentConfiguration.url\"\n [alt]=\"galleryImage.fallback\"\n [ngStyle]=\"{\n height: attachmentConfiguration.height,\n width: attachmentConfiguration.width\n }\"\n />\n </button>\n <button\n *ngIf=\"\n index === 3 &&\n !isLast &&\n getImageAttachmentConfiguration(\n galleryImage,\n 'gallery'\n ) as attachmentConfiguration\n \"\n class=\"str-chat__gallery-placeholder\"\n data-testclass=\"gallery-image\"\n data-testid=\"more-image-button\"\n (click)=\"openImageModal(attachment.images!, index)\"\n (keyup.enter)=\"openImageModal(attachment.images!, index)\"\n [class.str-chat__message-attachment--svg-image]=\"\n isSvg(galleryImage)\n \"\n [ngStyle]=\"{\n 'background-image': 'url(' + attachmentConfiguration.url + ')',\n height: attachmentConfiguration.height,\n width: attachmentConfiguration.width\n }\"\n >\n <p\n [innerHTML]=\"\n 'streamChat.{{ imageCount }} more'\n | translate: { imageCount: attachment!.images!.length - 4 }\n \"\n ></p>\n </button>\n </ng-container>\n </div>\n <div\n class=\"str-chat__player-wrapper\"\n *ngIf=\"\n isVideo(attachment) &&\n getVideoAttachmentConfiguration(attachment) as attachmentConfiguration\n \"\n >\n <video\n class=\"str-chat__video-angular\"\n controls\n data-testclass=\"video-attachment\"\n [src]=\"attachmentConfiguration.url\"\n [ngStyle]=\"{\n height: attachmentConfiguration.height,\n width: attachmentConfiguration.width\n }\"\n ></video>\n </div>\n <div\n *ngIf=\"isFile(attachment)\"\n class=\"\n str-chat__message-attachment-file--item\n str-chat-angular__message-attachment-file-single\n \"\n >\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '1'\"\n icon=\"file\"\n [size]=\"30\"\n ></stream-icon-placeholder>\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '2'\"\n icon=\"unspecified-filetype\"\n [size]=\"30\"\n ></stream-icon-placeholder>\n <div class=\"str-chat__message-attachment-file--item-text\">\n <div class=\"str-chat__message-attachment-file--item-first-row\">\n <div\n data-testclass=\"file-title\"\n class=\"str-chat__message-attachment-file--item-name\"\n >\n {{ attachment.title }}\n </div>\n <a\n class=\"str-chat__message-attachment-file--item-download\"\n data-testclass=\"file-link\"\n download\n href=\"{{ attachment.asset_url }}\"\n target=\"_blank\"\n >\n <stream-icon-placeholder\n class=\"str-chat__message-attachment-download-icon\"\n icon=\"download\"\n ></stream-icon-placeholder>\n </a>\n </div>\n <span\n class=\"str-chat__message-attachment-file--item-size\"\n data-testclass=\"size\"\n *ngIf=\"hasFileSize(attachment)\"\n >{{ getFileSize(attachment) }}</span\n >\n </div>\n </div>\n <div\n *ngIf=\"\n isCard(attachment) &&\n getCardAttachmentConfiguration(attachment) as attachmentConfiguration\n \"\n class=\"str-chat__message-attachment-card str-chat__message-attachment-card--{{\n attachment.type\n }}\"\n >\n <div\n *ngIf=\"attachmentConfiguration.url\"\n class=\"str-chat__message-attachment-card--header\"\n >\n <img\n data-testclass=\"card-img\"\n alt=\"{{ attachmentConfiguration.url }}\"\n src=\"{{ attachmentConfiguration.url }}\"\n [ngStyle]=\"{\n height: attachmentConfiguration.height,\n width: attachmentConfiguration.width\n }\"\n />\n </div>\n <div class=\"str-chat__message-attachment-card--content\">\n <div class=\"str-chat__message-attachment-card--flex\">\n <div\n *ngIf=\"attachment.title\"\n data-testclass=\"card-title\"\n class=\"str-chat__message-attachment-card--title\"\n >\n {{ attachment.title }}\n </div>\n <div\n *ngIf=\"attachment.text\"\n class=\"str-chat__message-attachment-card--text\"\n data-testclass=\"card-text\"\n >\n {{ attachment.text }}\n </div>\n <a\n class=\"str-chat__message-attachment-card--url\"\n *ngIf=\"attachment.title_link || attachment.og_scrape_url\"\n data-testclass=\"url-link\"\n noopener\n noreferrer\n href=\"{{ attachment.title_link || attachment.og_scrape_url }}\"\n target=\"_blank\"\n >\n {{ trimUrl(attachment.title_link || attachment.og_scrape_url) }}\n </a>\n </div>\n </div>\n </div>\n <div\n class=\"str-chat__message-attachment-actions\"\n *ngIf=\"attachment.actions && attachment.actions.length > 0\"\n >\n <div class=\"str-chat__message-attachment-actions-form\">\n <button\n *ngFor=\"\n let action of attachment.actions;\n trackBy: trackByActionValue\n \"\n class=\"str-chat__message-attachment-actions-button str-chat__message-attachment-actions-button--{{\n action.style\n }}\"\n data-testclass=\"attachment-action\"\n (click)=\"sendAction(action)\"\n (keyup.enter)=\"sendAction(action)\"\n >\n {{ action.text }}\n </button>\n </div>\n </div>\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"imagesToView && imagesToView.length > 0\">\n <ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.modalTemplate$ | async) || defaultModal;\n context: getModalContext()\n \"\n ></ng-container>\n </ng-container>\n</div>\n\n<ng-template\n #defaultModal\n let-isOpen=\"isOpen\"\n let-isOpenChangeHandler=\"isOpenChangeHandler\"\n let-content=\"content\"\n>\n <stream-modal\n class=\"stream-chat-angular__image-modal-host\"\n [isOpen]=\"isOpen\"\n (isOpenChange)=\"isOpenChangeHandler($event)\"\n [content]=\"content\"\n >\n </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n <div class=\"stream-chat-angular__image-modal str-chat__image-carousel\">\n <button\n class=\"\n stream-chat-angular__image-modal-stepper\n str-chat__image-carousel-stepper\n \"\n [ngStyle]=\"{\n visibility: isImageModalPrevButtonVisible ? 'visible' : 'hidden'\n }\"\n data-testid=\"image-modal-prev\"\n type=\"button\"\n (click)=\"stepImages(-1)\"\n (keyup.enter)=\"stepImages(-1)\"\n >\n <stream-icon-placeholder icon=\"arrow-left\"></stream-icon-placeholder>\n </button>\n <img\n *ngIf=\"\n getImageAttachmentConfiguration(\n imagesToView[imagesToViewCurrentIndex],\n 'carousel'\n ) as attachmentConfiguration\n \"\n class=\"\n stream-chat-angular__image-modal-image\n str-chat__image-carousel-image\n \"\n data-testid=\"modal-image\"\n [src]=\"attachmentConfiguration.url\"\n [alt]=\"imagesToView[imagesToViewCurrentIndex].fallback\"\n [ngStyle]=\"{\n width: attachmentConfiguration.width,\n height: attachmentConfiguration.height\n }\"\n />\n <button\n class=\"\n stream-chat-angular__image-modal-stepper\n str-chat__image-carousel-stepper\n \"\n type=\"button\"\n [ngStyle]=\"{\n visibility: isImageModalNextButtonVisible ? 'visible' : 'hidden'\n }\"\n data-testid=\"image-modal-next\"\n (click)=\"stepImages(1)\"\n (keyup.enter)=\"stepImages(1)\"\n >\n <stream-icon-placeholder icon=\"arrow-right\"></stream-icon-placeholder>\n </button>\n </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i4__namespace.AsyncPipe } });
|
|
3038
3268
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentListComponent, decorators: [{
|
|
3039
3269
|
type: i0.Component,
|
|
3040
3270
|
args: [{
|
|
@@ -3042,7 +3272,7 @@
|
|
|
3042
3272
|
templateUrl: './attachment-list.component.html',
|
|
3043
3273
|
styles: [],
|
|
3044
3274
|
}]
|
|
3045
|
-
}], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type:
|
|
3275
|
+
}], ctorParameters: function () { return [{ type: CustomTemplatesService }, { type: ChannelService }, { type: AttachmentConfigurationService }, { type: ThemeService }]; }, propDecorators: { messageId: [{
|
|
3046
3276
|
type: i0.Input
|
|
3047
3277
|
}], parentMessageId: [{
|
|
3048
3278
|
type: i0.Input
|
|
@@ -3082,7 +3312,7 @@
|
|
|
3082
3312
|
return AttachmentPreviewListComponent;
|
|
3083
3313
|
}());
|
|
3084
3314
|
AttachmentPreviewListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, deps: [{ token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3085
|
-
AttachmentPreviewListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: { attachmentUploads$: "attachmentUploads$" }, outputs: { retryAttachmentUpload: "retryAttachmentUpload", deleteAttachment: "deleteAttachment" }, ngImport: i0__namespace, template: "<div\n class=\"rfu-image-previewer\"\n *ngIf=\"(attachmentUploads$ | async)?.length && themeVersion === '1'\"\n>\n <ng-container\n *ngFor=\"\n let attachmentUpload of attachmentUploads$ | async;\n trackBy: trackByFile\n \"\n >\n <div\n *ngIf=\"attachmentUpload.type === 'image'\"\n class=\"rfu-image-previewer__image\"\n [class.rfu-image-previewer__image--loaded]=\"\n attachmentUpload.state === 'success'\n \"\n data-testclass=\"attachment-image-preview\"\n >\n <div\n *ngIf=\"attachmentUpload.state === 'error'\"\n class=\"rfu-image-previewer__retry\"\n (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n data-testclass=\"upload-retry\"\n >\n <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n </div>\n <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n <div class=\"rfu-thumbnail__overlay\">\n <div\n class=\"rfu-icon-button\"\n data-testclass=\"file-delete\"\n role=\"button\"\n (click)=\"attachmentDeleted(attachmentUpload)\"\n (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n >\n <stream-icon-placeholder\n icon=\"close-no-outline\"\n ></stream-icon-placeholder>\n </div>\n </div>\n <img\n *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n src=\"{{\n attachmentUpload.url\n ? attachmentUpload.url\n : attachmentUpload.previewUri\n }}\"\n alt=\"{{ attachmentUpload.file.name }}\"\n class=\"rfu-thumbnail__image\"\n data-testclass=\"attachment-image\"\n />\n </div>\n <stream-loading-indicator-placeholder\n data-testclass=\"loading-indicator\"\n color=\"rgba(255,255,255,0.7)\"\n *ngIf=\"attachmentUpload.state === 'uploading'\"\n ></stream-loading-indicator-placeholder>\n </div>\n <div\n class=\"rfu-file-previewer\"\n *ngIf=\"\n attachmentUpload.type === 'file' || attachmentUpload.type === 'video'\n \"\n data-testclass=\"attachment-file-preview\"\n >\n <ol>\n <li\n class=\"rfu-file-previewer__file\"\n [class.rfu-file-previewer__file--uploading]=\"\n attachmentUpload.state === 'uploading'\n \"\n [class.rfu-file-previewer__file--failed]=\"\n attachmentUpload.state === 'error'\n \"\n >\n <stream-icon-placeholder icon=\"file\"></stream-icon-placeholder>\n\n <a\n data-testclass=\"file-download-link\"\n href=\"{{ attachmentUpload.url }}\"\n (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n (keyup.enter)=\"\n attachmentUpload.url ? null : $event.preventDefault()\n \"\n download\n >\n {{ attachmentUpload.file.name }}\n <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n <div\n data-testclass=\"upload-retry\"\n class=\"rfu-file-previewer__failed\"\n (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n translate\n >\n streamChat.failed\n </div>\n <div\n class=\"rfu-file-previewer__retry\"\n (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n translate\n >\n streamChat.retry\n </div>\n </ng-container>\n </a>\n\n <span\n data-testclass=\"file-delete\"\n class=\"rfu-file-previewer__close-button\"\n (click)=\"attachmentDeleted(attachmentUpload)\"\n (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n >\n <stream-icon-placeholder\n icon=\"close-no-outline\"\n ></stream-icon-placeholder>\n </span>\n <div\n *ngIf=\"attachmentUpload.state === 'uploading'\"\n class=\"rfu-file-previewer__loading-indicator\"\n >\n <stream-loading-indicator-placeholder></stream-loading-indicator-placeholder>\n </div>\n </li>\n </ol>\n </div>\n </ng-container>\n</div>\n\n<div\n class=\"str-chat__attachment-preview-list\"\n *ngIf=\"(attachmentUploads$ | async)?.length && themeVersion === '2'\"\n>\n <div class=\"str-chat__attachment-list-scroll-container\">\n <ng-container\n *ngFor=\"\n let attachmentUpload of attachmentUploads$ | async;\n trackBy: trackByFile\n \"\n >\n <div\n *ngIf=\"attachmentUpload.type === 'image'\"\n class=\"str-chat__attachment-preview-image\"\n data-testclass=\"attachment-image-preview\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n deleteButton;\n context: { attachmentUpload: attachmentUpload }\n \"\n ></ng-container>\n <div\n *ngIf=\"attachmentUpload.state === 'uploading'\"\n class=\"str-chat__attachment-preview-image-loading\"\n >\n <stream-loading-indicator-placeholder\n data-testclass=\"loading-indicator\"\n [size]=\"18\"\n ></stream-loading-indicator-placeholder>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n retryButton;\n context: { attachmentUpload: attachmentUpload }\n \"\n ></ng-container>\n <img\n *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n src=\"{{\n attachmentUpload.url\n ? attachmentUpload.url\n : attachmentUpload.previewUri\n }}\"\n alt=\"{{ attachmentUpload.file.name }}\"\n class=\"str-chat__attachment-preview-thumbnail\"\n data-testclass=\"attachment-image\"\n />\n </div>\n <div\n class=\"str-chat__attachment-preview-file\"\n *ngIf=\"\n attachmentUpload.type === 'file' || attachmentUpload.type === 'video'\n \"\n data-testclass=\"attachment-file-preview\"\n >\n <stream-icon-placeholder\n icon=\"unspecified-filetype\"\n ></stream-icon-placeholder>\n\n <div class=\"str-chat__attachment-preview-file-end\">\n <div class=\"str-chat__attachment-preview-file-name\">\n {{ attachmentUpload.file.name }}\n </div>\n <a\n *ngIf=\"attachmentUpload.state === 'success'\"\n class=\"str-chat__attachment-preview-file-download\"\n data-testclass=\"file-download-link\"\n href=\"{{ attachmentUpload.url }}\"\n (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n (keyup.enter)=\"\n attachmentUpload.url ? null : $event.preventDefault()\n \"\n download\n >\n <stream-icon-placeholder icon=\"download\"></stream-icon-placeholder>\n </a>\n <stream-loading-indicator-placeholder\n *ngIf=\"attachmentUpload.state === 'uploading'\"\n data-testclass=\"loading-indicator\"\n [size]=\"18\"\n ></stream-loading-indicator-placeholder>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n deleteButton;\n context: { attachmentUpload: attachmentUpload }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n retryButton;\n context: { attachmentUpload: attachmentUpload }\n \"\n ></ng-container>\n </div>\n </ng-container>\n </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n <div\n class=\"str-chat__attachment-preview-delete\"\n data-testclass=\"file-delete\"\n role=\"button\"\n (click)=\"attachmentDeleted(attachmentUpload)\"\n (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n >\n <stream-icon-placeholder icon=\"close-no-outline\"></stream-icon-placeholder>\n </div>\n</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n <div\n *ngIf=\"attachmentUpload.state === 'error'\"\n class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n attachmentUpload.type === 'image' ? 'image' : 'file'\n }}\"\n (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n data-testclass=\"upload-retry\"\n >\n <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i7__namespace.AsyncPipe } });
|
|
3315
|
+
AttachmentPreviewListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: { attachmentUploads$: "attachmentUploads$" }, outputs: { retryAttachmentUpload: "retryAttachmentUpload", deleteAttachment: "deleteAttachment" }, ngImport: i0__namespace, template: "<div\n class=\"rfu-image-previewer\"\n *ngIf=\"(attachmentUploads$ | async)?.length && themeVersion === '1'\"\n>\n <ng-container\n *ngFor=\"\n let attachmentUpload of attachmentUploads$ | async;\n trackBy: trackByFile\n \"\n >\n <div\n *ngIf=\"attachmentUpload.type === 'image'\"\n class=\"rfu-image-previewer__image\"\n [class.rfu-image-previewer__image--loaded]=\"\n attachmentUpload.state === 'success'\n \"\n data-testclass=\"attachment-image-preview\"\n >\n <div\n *ngIf=\"attachmentUpload.state === 'error'\"\n class=\"rfu-image-previewer__retry\"\n (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n data-testclass=\"upload-retry\"\n >\n <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n </div>\n <div class=\"rfu-thumbnail__wrapper\" style=\"width: 100; height: 100\">\n <div class=\"rfu-thumbnail__overlay\">\n <div\n class=\"rfu-icon-button\"\n data-testclass=\"file-delete\"\n role=\"button\"\n (click)=\"attachmentDeleted(attachmentUpload)\"\n (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n >\n <stream-icon-placeholder\n icon=\"close-no-outline\"\n ></stream-icon-placeholder>\n </div>\n </div>\n <img\n *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n src=\"{{\n attachmentUpload.url\n ? attachmentUpload.url\n : attachmentUpload.previewUri\n }}\"\n alt=\"{{ attachmentUpload.file.name }}\"\n class=\"rfu-thumbnail__image\"\n data-testclass=\"attachment-image\"\n />\n </div>\n <stream-loading-indicator-placeholder\n data-testclass=\"loading-indicator\"\n color=\"rgba(255,255,255,0.7)\"\n *ngIf=\"attachmentUpload.state === 'uploading'\"\n ></stream-loading-indicator-placeholder>\n </div>\n <div\n class=\"rfu-file-previewer\"\n *ngIf=\"\n attachmentUpload.type === 'file' || attachmentUpload.type === 'video'\n \"\n data-testclass=\"attachment-file-preview\"\n >\n <ol>\n <li\n class=\"rfu-file-previewer__file\"\n [class.rfu-file-previewer__file--uploading]=\"\n attachmentUpload.state === 'uploading'\n \"\n [class.rfu-file-previewer__file--failed]=\"\n attachmentUpload.state === 'error'\n \"\n >\n <stream-icon-placeholder icon=\"file\"></stream-icon-placeholder>\n\n <a\n data-testclass=\"file-download-link\"\n href=\"{{ attachmentUpload.url }}\"\n (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n (keyup.enter)=\"\n attachmentUpload.url ? null : $event.preventDefault()\n \"\n download\n >\n {{ attachmentUpload.file.name }}\n <ng-container *ngIf=\"attachmentUpload.state === 'error'\">\n <div\n data-testclass=\"upload-retry\"\n class=\"rfu-file-previewer__failed\"\n (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n translate\n >\n streamChat.failed\n </div>\n <div\n class=\"rfu-file-previewer__retry\"\n (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n translate\n >\n streamChat.retry\n </div>\n </ng-container>\n </a>\n\n <span\n data-testclass=\"file-delete\"\n class=\"rfu-file-previewer__close-button\"\n (click)=\"attachmentDeleted(attachmentUpload)\"\n (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n >\n <stream-icon-placeholder\n icon=\"close-no-outline\"\n ></stream-icon-placeholder>\n </span>\n <div\n *ngIf=\"attachmentUpload.state === 'uploading'\"\n class=\"rfu-file-previewer__loading-indicator\"\n >\n <stream-loading-indicator-placeholder></stream-loading-indicator-placeholder>\n </div>\n </li>\n </ol>\n </div>\n </ng-container>\n</div>\n\n<div\n class=\"str-chat__attachment-preview-list\"\n *ngIf=\"(attachmentUploads$ | async)?.length && themeVersion === '2'\"\n>\n <div class=\"str-chat__attachment-list-scroll-container\">\n <ng-container\n *ngFor=\"\n let attachmentUpload of attachmentUploads$ | async;\n trackBy: trackByFile\n \"\n >\n <div\n *ngIf=\"attachmentUpload.type === 'image'\"\n class=\"str-chat__attachment-preview-image\"\n data-testclass=\"attachment-image-preview\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n deleteButton;\n context: { attachmentUpload: attachmentUpload }\n \"\n ></ng-container>\n <div\n *ngIf=\"attachmentUpload.state === 'uploading'\"\n class=\"str-chat__attachment-preview-image-loading\"\n >\n <stream-loading-indicator-placeholder\n data-testclass=\"loading-indicator\"\n [size]=\"18\"\n ></stream-loading-indicator-placeholder>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n retryButton;\n context: { attachmentUpload: attachmentUpload }\n \"\n ></ng-container>\n <img\n *ngIf=\"attachmentUpload.url || attachmentUpload.previewUri\"\n src=\"{{\n attachmentUpload.url\n ? attachmentUpload.url\n : attachmentUpload.previewUri\n }}\"\n alt=\"{{ attachmentUpload.file.name }}\"\n class=\"str-chat__attachment-preview-thumbnail\"\n data-testclass=\"attachment-image\"\n />\n </div>\n <div\n class=\"str-chat__attachment-preview-file\"\n *ngIf=\"\n attachmentUpload.type === 'file' || attachmentUpload.type === 'video'\n \"\n data-testclass=\"attachment-file-preview\"\n >\n <stream-icon-placeholder\n icon=\"unspecified-filetype\"\n ></stream-icon-placeholder>\n\n <div class=\"str-chat__attachment-preview-file-end\">\n <div class=\"str-chat__attachment-preview-file-name\">\n {{ attachmentUpload.file.name }}\n </div>\n <a\n *ngIf=\"attachmentUpload.state === 'success'\"\n class=\"str-chat__attachment-preview-file-download\"\n data-testclass=\"file-download-link\"\n href=\"{{ attachmentUpload.url }}\"\n (click)=\"attachmentUpload.url ? null : $event.preventDefault()\"\n (keyup.enter)=\"\n attachmentUpload.url ? null : $event.preventDefault()\n \"\n download\n >\n <stream-icon-placeholder icon=\"download\"></stream-icon-placeholder>\n </a>\n <stream-loading-indicator-placeholder\n *ngIf=\"attachmentUpload.state === 'uploading'\"\n data-testclass=\"loading-indicator\"\n [size]=\"18\"\n ></stream-loading-indicator-placeholder>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n deleteButton;\n context: { attachmentUpload: attachmentUpload }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n retryButton;\n context: { attachmentUpload: attachmentUpload }\n \"\n ></ng-container>\n </div>\n </ng-container>\n </div>\n</div>\n\n<ng-template #deleteButton let-attachmentUpload=\"attachmentUpload\">\n <div\n class=\"str-chat__attachment-preview-delete\"\n data-testclass=\"file-delete\"\n role=\"button\"\n (click)=\"attachmentDeleted(attachmentUpload)\"\n (keyup.enter)=\"attachmentDeleted(attachmentUpload)\"\n >\n <stream-icon-placeholder icon=\"close-no-outline\"></stream-icon-placeholder>\n </div>\n</ng-template>\n\n<ng-template #retryButton let-attachmentUpload=\"attachmentUpload\">\n <div\n *ngIf=\"attachmentUpload.state === 'error'\"\n class=\"str-chat__attachment-preview-error str-chat__attachment-preview-error-{{\n attachmentUpload.type === 'image' ? 'image' : 'file'\n }}\"\n (click)=\"attachmentUploadRetried(attachmentUpload.file)\"\n (keyup.enter)=\"attachmentUploadRetried(attachmentUpload.file)\"\n data-testclass=\"upload-retry\"\n >\n <stream-icon-placeholder icon=\"retry\"></stream-icon-placeholder>\n </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4__namespace.AsyncPipe } });
|
|
3086
3316
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AttachmentPreviewListComponent, decorators: [{
|
|
3087
3317
|
type: i0.Component,
|
|
3088
3318
|
args: [{
|
|
@@ -3515,7 +3745,7 @@
|
|
|
3515
3745
|
return MessageInputComponent;
|
|
3516
3746
|
}());
|
|
3517
3747
|
MessageInputComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, deps: [{ token: ChannelService }, { token: NotificationService }, { token: AttachmentService }, { token: MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.ChangeDetectorRef }, { token: ChatClientService }, { token: EmojiInputService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3518
|
-
MessageInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n *ngIf=\"themeVersion !== '2'\"\n class=\"{{\n mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n }}\"\n [class.str-chat__input-flat-has-attachments]=\"\n (attachmentUploads$ | async)!.length > 0\n \"\n [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n <div class=\"quoted-message-preview\" *ngIf=\"quotedMessage\">\n <div class=\"quoted-message-preview-header\">\n <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n <button\n class=\"str-chat__square-button\"\n data-testid=\"remove-quote\"\n (click)=\"deselectMessageToQuote()\"\n (keyup.enter)=\"deselectMessageToQuote()\"\n >\n <stream-icon-placeholder\n icon=\"close-no-outline\"\n style=\"font-size: 15px; line-height: 15px; width: 15px; height: 15px\"\n ></stream-icon-placeholder>\n </button>\n </div>\n <div class=\"quoted-message-preview-content\">\n <stream-avatar-placeholder\n data-testid=\"qouted-message-avatar\"\n class=\"str-chat-angular__avatar-host\"\n [imageUrl]=\"quotedMessage?.user?.image\"\n [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n [size]=\"20\"\n type=\"user\"\n location=\"quoted-message-sender\"\n [user]=\"quotedMessage?.user || undefined\"\n ></stream-avatar-placeholder>\n <div class=\"quoted-message-preview-content-inner\">\n <stream-attachment-list\n *ngIf=\"\n quotedMessage?.attachments && quotedMessage?.attachments?.length\n \"\n [attachments]=\"quotedMessageAttachments\"\n [messageId]=\"quotedMessage?.id\"\n ></stream-attachment-list>\n <div\n data-testid=\"quoted-message-text\"\n [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n ></div>\n </div>\n </div>\n </div>\n <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n <div\n class=\"{{\n mode === 'main'\n ? 'str-chat__input-flat--textarea-wrapper'\n : 'str-chat__small-message-input--textarea-wrapper'\n }}\"\n >\n <ng-template\n #defaultAttachmentsPreview\n let-attachmentUploads$=\"attachmentUploads$\"\n let-retryUploadHandler=\"retryUploadHandler\"\n let-deleteUploadHandler=\"deleteUploadHandler\"\n >\n <stream-attachment-preview-list\n [attachmentUploads$]=\"attachmentUploads$\"\n (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n (deleteAttachment)=\"deleteUploadHandler($event)\"\n class=\"rfu-image-previewer-angular-host\"\n ></stream-attachment-preview-list>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n attachmentPreviewListTemplate || defaultAttachmentsPreview;\n context: getAttachmentPreviewListContext()\n \"\n ></ng-container>\n <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n <div\n class=\"\n str-chat__input-flat-emojiselect\n str-chat-angular__emojiselect\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n emojiPickerTemplate;\n context: getEmojiPickerContext()\n \"\n ></ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"canSendMessages; else disabledTextarea\">\n <ng-container\n streamTextarea\n [(value)]=\"textareaValue\"\n (valueChange)=\"typingStart$.next()\"\n (send)=\"messageSent()\"\n [componentRef]=\"textareaRef\"\n (userMentions)=\"mentionedUsers = $event\"\n [areMentionsEnabled]=\"areMentionsEnabled\"\n [mentionScope]=\"mentionScope\"\n [placeholder]=\"textareaPlaceholder\"\n ></ng-container>\n </ng-container>\n <ng-template #disabledTextarea>\n <textarea\n disabled\n rows=\"1\"\n [value]=\"disabledTextareaText | translate\"\n class=\"rta__textarea str-chat__textarea__textarea\"\n data-testid=\"disabled-textarea\"\n ></textarea>\n </ng-template>\n </div>\n <div\n *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n class=\"str-chat__fileupload-wrapper\"\n data-testid=\"file-upload-button\"\n >\n <div class=\"str-chat__tooltip\">\n {{ \"streamChat.Attach files\" | translate }}\n </div>\n <div class=\"rfu-file-upload-button\">\n <label>\n <input\n #fileInput\n type=\"file\"\n class=\"rfu-file-input\"\n data-testid=\"file-input\"\n [multiple]=\"isMultipleFileUploadEnabled\"\n (change)=\"filesSelected(fileInput.files)\"\n />\n <span class=\"str-chat__input-flat-fileupload\">\n <stream-icon-placeholder\n icon=\"file-upload\"\n ></stream-icon-placeholder>\n </span>\n </label>\n </div>\n </div>\n </div>\n <button\n *ngIf=\"canSendMessages && !isCooldownInProgress\"\n data-testid=\"send-button\"\n class=\"str-chat__send-button\"\n (click)=\"messageSent()\"\n (keyup.enter)=\"messageSent()\"\n >\n <stream-icon-placeholder\n class=\"str-chat__send-button-angular\"\n icon=\"send\"\n ></stream-icon-placeholder>\n </button>\n <div\n class=\"str-chat__input-flat-cooldown\"\n *ngIf=\"isCooldownInProgress\"\n data-testid=\"cooldown-timer\"\n >\n <div class=\"str-chat__message-input-cooldown-text\">\n {{ cooldown$ | async }}\n </div>\n </div>\n </div>\n</div>\n\n<div\n *ngIf=\"themeVersion === '2'\"\n class=\"str-chat__message-input str-chat-angular__message-input\"\n>\n <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n <div class=\"str-chat__quoted-message-reply-to-message\">\n {{ \"streamChat.Reply to Message\" | translate }}\n </div>\n <button\n class=\"str-chat__quoted-message-remove\"\n data-testid=\"remove-quote\"\n (click)=\"deselectMessageToQuote()\"\n (keyup.enter)=\"deselectMessageToQuote()\"\n >\n <stream-icon-placeholder\n icon=\"close-no-outline\"\n ></stream-icon-placeholder>\n </button>\n </div>\n <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n <div\n class=\"\n str-chat__message-input-inner\n str-chat-angular__message-input-inner\n \"\n >\n <div\n *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n class=\"str-chat__file-input-container\"\n data-testid=\"file-upload-button\"\n >\n <input\n #fileInput\n type=\"file\"\n class=\"str-chat__file-input\"\n data-testid=\"file-input\"\n [multiple]=\"isMultipleFileUploadEnabled\"\n (change)=\"filesSelected(fileInput.files)\"\n id=\"{{ fileInputId }}\"\n />\n <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n </label>\n </div>\n <div class=\"str-chat__message-textarea-container\">\n <div\n data-testid=\"quoted-message-container\"\n class=\"str-chat__quoted-message-preview\"\n *ngIf=\"quotedMessage\"\n >\n <stream-avatar-placeholder\n data-testid=\"qouted-message-avatar\"\n class=\"\n str-chat-angular__avatar-host\n str-chat__message-sender-avatar\n \"\n [imageUrl]=\"quotedMessage?.user?.image\"\n [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n [size]=\"20\"\n type=\"user\"\n location=\"quoted-message-sender\"\n [user]=\"quotedMessage?.user || undefined\"\n ></stream-avatar-placeholder>\n <div\n class=\"\n quoted-message-preview-content-inner\n str-chat__quoted-message-bubble\n \"\n >\n <stream-attachment-list\n *ngIf=\"\n quotedMessage?.attachments && quotedMessage?.attachments?.length\n \"\n [attachments]=\"quotedMessageAttachments\"\n [messageId]=\"quotedMessage?.id\"\n ></stream-attachment-list>\n <div\n class=\"str-chat__quoted-message-text\"\n data-testid=\"quoted-message-text\"\n [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n ></div>\n </div>\n </div>\n <ng-template\n #defaultAttachmentsPreview\n let-attachmentUploads$=\"attachmentUploads$\"\n let-retryUploadHandler=\"retryUploadHandler\"\n let-deleteUploadHandler=\"deleteUploadHandler\"\n >\n <stream-attachment-preview-list\n [attachmentUploads$]=\"attachmentUploads$\"\n (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n (deleteAttachment)=\"deleteUploadHandler($event)\"\n class=\"str-chat__attachment-preview-list-angular-host\"\n ></stream-attachment-preview-list>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n attachmentPreviewListTemplate || defaultAttachmentsPreview;\n context: getAttachmentPreviewListContext()\n \"\n ></ng-container>\n <div class=\"str-chat__message-textarea-with-emoji-picker\">\n <ng-container\n streamTextarea\n [(value)]=\"textareaValue\"\n (valueChange)=\"typingStart$.next()\"\n (send)=\"messageSent()\"\n [componentRef]=\"textareaRef\"\n (userMentions)=\"mentionedUsers = $event\"\n [areMentionsEnabled]=\"areMentionsEnabled\"\n [mentionScope]=\"mentionScope\"\n [placeholder]=\"textareaPlaceholder\"\n ></ng-container>\n <div class=\"str-chat__message-textarea-emoji-picker\">\n <ng-container\n *ngIf=\"emojiPickerTemplate\"\n data-testid=\"emoji-picker\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n emojiPickerTemplate;\n context: getEmojiPickerContext()\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n <button\n *ngIf=\"canSendMessages && !isCooldownInProgress && !message\"\n [disabled]=\"\n (attachmentUploadInProgressCounter$ | async)! > 0 ||\n (!textareaValue && (attachmentUploads$ | async)!.length === 0)\n \"\n data-testid=\"send-button\"\n class=\"str-chat__send-button\"\n (click)=\"messageSent()\"\n (keyup.enter)=\"messageSent()\"\n >\n <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n </button>\n <div\n class=\"str-chat__message-input-cooldown\"\n *ngIf=\"isCooldownInProgress\"\n data-testid=\"cooldown-timer\"\n >\n {{ cooldown$ | async }}\n </div>\n </div>\n </ng-container>\n <ng-template #notAllowed>\n <div\n class=\"str-chat__message-input-not-allowed\"\n data-testid=\"disabled-textarea\"\n >\n {{ disabledTextareaText | translate }}\n </div>\n </ng-template>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "value", "placeholder"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i7__namespace.AsyncPipe, "translate": i8__namespace.TranslatePipe } });
|
|
3748
|
+
MessageInputComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n *ngIf=\"themeVersion !== '2'\"\n class=\"{{\n mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n }}\"\n [class.str-chat__input-flat-has-attachments]=\"\n (attachmentUploads$ | async)!.length > 0\n \"\n [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n <div class=\"quoted-message-preview\" *ngIf=\"quotedMessage\">\n <div class=\"quoted-message-preview-header\">\n <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n <button\n class=\"str-chat__square-button\"\n data-testid=\"remove-quote\"\n (click)=\"deselectMessageToQuote()\"\n (keyup.enter)=\"deselectMessageToQuote()\"\n >\n <stream-icon-placeholder\n icon=\"close-no-outline\"\n style=\"font-size: 15px; line-height: 15px; width: 15px; height: 15px\"\n ></stream-icon-placeholder>\n </button>\n </div>\n <div class=\"quoted-message-preview-content\">\n <stream-avatar-placeholder\n data-testid=\"qouted-message-avatar\"\n class=\"str-chat-angular__avatar-host\"\n [imageUrl]=\"quotedMessage?.user?.image\"\n [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n [size]=\"20\"\n type=\"user\"\n location=\"quoted-message-sender\"\n [user]=\"quotedMessage?.user || undefined\"\n ></stream-avatar-placeholder>\n <div class=\"quoted-message-preview-content-inner\">\n <stream-attachment-list\n *ngIf=\"\n quotedMessage?.attachments && quotedMessage?.attachments?.length\n \"\n [attachments]=\"quotedMessageAttachments\"\n [messageId]=\"quotedMessage?.id\"\n ></stream-attachment-list>\n <div\n data-testid=\"quoted-message-text\"\n [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n ></div>\n </div>\n </div>\n </div>\n <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n <div\n class=\"{{\n mode === 'main'\n ? 'str-chat__input-flat--textarea-wrapper'\n : 'str-chat__small-message-input--textarea-wrapper'\n }}\"\n >\n <ng-template\n #defaultAttachmentsPreview\n let-attachmentUploads$=\"attachmentUploads$\"\n let-retryUploadHandler=\"retryUploadHandler\"\n let-deleteUploadHandler=\"deleteUploadHandler\"\n >\n <stream-attachment-preview-list\n [attachmentUploads$]=\"attachmentUploads$\"\n (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n (deleteAttachment)=\"deleteUploadHandler($event)\"\n class=\"rfu-image-previewer-angular-host\"\n ></stream-attachment-preview-list>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n attachmentPreviewListTemplate || defaultAttachmentsPreview;\n context: getAttachmentPreviewListContext()\n \"\n ></ng-container>\n <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n <div\n class=\"\n str-chat__input-flat-emojiselect\n str-chat-angular__emojiselect\n \"\n >\n <ng-container\n *ngTemplateOutlet=\"\n emojiPickerTemplate;\n context: getEmojiPickerContext()\n \"\n ></ng-container>\n </div>\n </ng-container>\n <ng-container *ngIf=\"canSendMessages; else disabledTextarea\">\n <ng-container\n streamTextarea\n [(value)]=\"textareaValue\"\n (valueChange)=\"typingStart$.next()\"\n (send)=\"messageSent()\"\n [componentRef]=\"textareaRef\"\n (userMentions)=\"mentionedUsers = $event\"\n [areMentionsEnabled]=\"areMentionsEnabled\"\n [mentionScope]=\"mentionScope\"\n [placeholder]=\"textareaPlaceholder\"\n ></ng-container>\n </ng-container>\n <ng-template #disabledTextarea>\n <textarea\n disabled\n rows=\"1\"\n [value]=\"disabledTextareaText | translate\"\n class=\"rta__textarea str-chat__textarea__textarea\"\n data-testid=\"disabled-textarea\"\n ></textarea>\n </ng-template>\n </div>\n <div\n *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n class=\"str-chat__fileupload-wrapper\"\n data-testid=\"file-upload-button\"\n >\n <div class=\"str-chat__tooltip\">\n {{ \"streamChat.Attach files\" | translate }}\n </div>\n <div class=\"rfu-file-upload-button\">\n <label>\n <input\n #fileInput\n type=\"file\"\n class=\"rfu-file-input\"\n data-testid=\"file-input\"\n [multiple]=\"isMultipleFileUploadEnabled\"\n (change)=\"filesSelected(fileInput.files)\"\n />\n <span class=\"str-chat__input-flat-fileupload\">\n <stream-icon-placeholder\n icon=\"file-upload\"\n ></stream-icon-placeholder>\n </span>\n </label>\n </div>\n </div>\n </div>\n <button\n *ngIf=\"canSendMessages && !isCooldownInProgress\"\n data-testid=\"send-button\"\n class=\"str-chat__send-button\"\n (click)=\"messageSent()\"\n (keyup.enter)=\"messageSent()\"\n >\n <stream-icon-placeholder\n class=\"str-chat__send-button-angular\"\n icon=\"send\"\n ></stream-icon-placeholder>\n </button>\n <div\n class=\"str-chat__input-flat-cooldown\"\n *ngIf=\"isCooldownInProgress\"\n data-testid=\"cooldown-timer\"\n >\n <div class=\"str-chat__message-input-cooldown-text\">\n {{ cooldown$ | async }}\n </div>\n </div>\n </div>\n</div>\n\n<div\n *ngIf=\"themeVersion === '2'\"\n class=\"str-chat__message-input str-chat-angular__message-input\"\n>\n <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n <div class=\"str-chat__quoted-message-reply-to-message\">\n {{ \"streamChat.Reply to Message\" | translate }}\n </div>\n <button\n class=\"str-chat__quoted-message-remove\"\n data-testid=\"remove-quote\"\n (click)=\"deselectMessageToQuote()\"\n (keyup.enter)=\"deselectMessageToQuote()\"\n >\n <stream-icon-placeholder\n icon=\"close-no-outline\"\n ></stream-icon-placeholder>\n </button>\n </div>\n <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n <div\n class=\"\n str-chat__message-input-inner\n str-chat-angular__message-input-inner\n \"\n >\n <div\n *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n class=\"str-chat__file-input-container\"\n data-testid=\"file-upload-button\"\n >\n <input\n #fileInput\n type=\"file\"\n class=\"str-chat__file-input\"\n data-testid=\"file-input\"\n [multiple]=\"isMultipleFileUploadEnabled\"\n (change)=\"filesSelected(fileInput.files)\"\n id=\"{{ fileInputId }}\"\n />\n <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n </label>\n </div>\n <div class=\"str-chat__message-textarea-container\">\n <div\n data-testid=\"quoted-message-container\"\n class=\"str-chat__quoted-message-preview\"\n *ngIf=\"quotedMessage\"\n >\n <stream-avatar-placeholder\n data-testid=\"qouted-message-avatar\"\n class=\"\n str-chat-angular__avatar-host\n str-chat__message-sender-avatar\n \"\n [imageUrl]=\"quotedMessage?.user?.image\"\n [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n [size]=\"20\"\n type=\"user\"\n location=\"quoted-message-sender\"\n [user]=\"quotedMessage?.user || undefined\"\n ></stream-avatar-placeholder>\n <div\n class=\"\n quoted-message-preview-content-inner\n str-chat__quoted-message-bubble\n \"\n >\n <stream-attachment-list\n *ngIf=\"\n quotedMessage?.attachments && quotedMessage?.attachments?.length\n \"\n [attachments]=\"quotedMessageAttachments\"\n [messageId]=\"quotedMessage?.id\"\n ></stream-attachment-list>\n <div\n class=\"str-chat__quoted-message-text\"\n data-testid=\"quoted-message-text\"\n [innerHTML]=\"quotedMessage?.html || quotedMessage?.text\"\n ></div>\n </div>\n </div>\n <ng-template\n #defaultAttachmentsPreview\n let-attachmentUploads$=\"attachmentUploads$\"\n let-retryUploadHandler=\"retryUploadHandler\"\n let-deleteUploadHandler=\"deleteUploadHandler\"\n >\n <stream-attachment-preview-list\n [attachmentUploads$]=\"attachmentUploads$\"\n (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n (deleteAttachment)=\"deleteUploadHandler($event)\"\n class=\"str-chat__attachment-preview-list-angular-host\"\n ></stream-attachment-preview-list>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n attachmentPreviewListTemplate || defaultAttachmentsPreview;\n context: getAttachmentPreviewListContext()\n \"\n ></ng-container>\n <div class=\"str-chat__message-textarea-with-emoji-picker\">\n <ng-container\n streamTextarea\n [(value)]=\"textareaValue\"\n (valueChange)=\"typingStart$.next()\"\n (send)=\"messageSent()\"\n [componentRef]=\"textareaRef\"\n (userMentions)=\"mentionedUsers = $event\"\n [areMentionsEnabled]=\"areMentionsEnabled\"\n [mentionScope]=\"mentionScope\"\n [placeholder]=\"textareaPlaceholder\"\n ></ng-container>\n <div class=\"str-chat__message-textarea-emoji-picker\">\n <ng-container\n *ngIf=\"emojiPickerTemplate\"\n data-testid=\"emoji-picker\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n emojiPickerTemplate;\n context: getEmojiPickerContext()\n \"\n ></ng-container>\n </ng-container>\n </div>\n </div>\n </div>\n <button\n *ngIf=\"canSendMessages && !isCooldownInProgress && !message\"\n [disabled]=\"\n (attachmentUploadInProgressCounter$ | async)! > 0 ||\n (!textareaValue && (attachmentUploads$ | async)!.length === 0)\n \"\n data-testid=\"send-button\"\n class=\"str-chat__send-button\"\n (click)=\"messageSent()\"\n (keyup.enter)=\"messageSent()\"\n >\n <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n </button>\n <div\n class=\"str-chat__message-input-cooldown\"\n *ngIf=\"isCooldownInProgress\"\n data-testid=\"cooldown-timer\"\n >\n {{ cooldown$ | async }}\n </div>\n </div>\n </ng-container>\n <ng-template #notAllowed>\n <div\n class=\"str-chat__message-input-not-allowed\"\n data-testid=\"disabled-textarea\"\n >\n {{ disabledTextareaText | translate }}\n </div>\n </ng-template>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"] }, { type: AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "value", "placeholder"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i4__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
|
|
3519
3749
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageInputComponent, decorators: [{
|
|
3520
3750
|
type: i0.Component,
|
|
3521
3751
|
args: [{
|
|
@@ -3564,7 +3794,7 @@
|
|
|
3564
3794
|
return NotificationComponent;
|
|
3565
3795
|
}());
|
|
3566
3796
|
NotificationComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3567
|
-
NotificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationComponent, selector: "stream-notification", inputs: { type: "type", content: "content" }, ngImport: i0__namespace, template: "<div\n class=\"str-chat__custom-notification notification-{{\n type\n }} str-chat__notification\"\n data-testid=\"custom-notification\"\n>\n <ng-container *ngIf=\"content; else elseContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #elseContent>\n <ng-content></ng-content>\n </ng-template>\n</div>\n", directives: [{ type:
|
|
3797
|
+
NotificationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationComponent, selector: "stream-notification", inputs: { type: "type", content: "content" }, ngImport: i0__namespace, template: "<div\n class=\"str-chat__custom-notification notification-{{\n type\n }} str-chat__notification\"\n data-testid=\"custom-notification\"\n>\n <ng-container *ngIf=\"content; else elseContent\">\n <ng-container *ngTemplateOutlet=\"content\"></ng-container>\n </ng-container>\n <ng-template #elseContent>\n <ng-content></ng-content>\n </ng-template>\n</div>\n", directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
|
|
3568
3798
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationComponent, decorators: [{
|
|
3569
3799
|
type: i0.Component,
|
|
3570
3800
|
args: [{
|
|
@@ -3599,7 +3829,7 @@
|
|
|
3599
3829
|
return NotificationListComponent;
|
|
3600
3830
|
}());
|
|
3601
3831
|
NotificationListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, deps: [{ token: CustomTemplatesService }, { token: NotificationService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3602
|
-
NotificationListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0__namespace, template: "<div\n class=\"str-chat__theme-{{ theme$ | async }} str-chat__list-notifications\"\n [class.str-chat]=\"themeVersion === '2'\"\n data-testid=\"notification-list\"\n>\n <ng-container\n *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n >\n <ng-template #notificationContent>\n <div\n *ngIf=\"notification.text !== undefined\"\n data-testclass=\"notification-content\"\n >\n {{ notification.text | translate: notification.translateParams }}\n </div>\n <ng-container *ngIf=\"notification.template !== undefined\">\n <ng-container\n *ngTemplateOutlet=\"\n notification.template;\n context: getNotificationContentContext(notification)\n \"\n ></ng-container>\n </ng-container>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.notificationTemplate$ | async) ||\n defaultNotification;\n context: { type: notification.type, content: notificationContent }\n \"\n ></ng-container>\n </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n <stream-notification [type]=\"type\" [content]=\"content\"></stream-notification>\n</ng-template>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type", "content"] }], directives: [{ type:
|
|
3832
|
+
NotificationListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: NotificationListComponent, selector: "stream-notification-list", ngImport: i0__namespace, template: "<div\n class=\"str-chat__theme-{{ theme$ | async }} str-chat__list-notifications\"\n [class.str-chat]=\"themeVersion === '2'\"\n data-testid=\"notification-list\"\n>\n <ng-container\n *ngFor=\"let notification of notifications$ | async; trackBy: trackById\"\n >\n <ng-template #notificationContent>\n <div\n *ngIf=\"notification.text !== undefined\"\n data-testclass=\"notification-content\"\n >\n {{ notification.text | translate: notification.translateParams }}\n </div>\n <ng-container *ngIf=\"notification.template !== undefined\">\n <ng-container\n *ngTemplateOutlet=\"\n notification.template;\n context: getNotificationContentContext(notification)\n \"\n ></ng-container>\n </ng-container>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.notificationTemplate$ | async) ||\n defaultNotification;\n context: { type: notification.type, content: notificationContent }\n \"\n ></ng-container>\n </ng-container>\n</div>\n\n<ng-template #defaultNotification let-type=\"type\" let-content=\"content\">\n <stream-notification [type]=\"type\" [content]=\"content\"></stream-notification>\n</ng-template>\n", components: [{ type: NotificationComponent, selector: "stream-notification", inputs: ["type", "content"] }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
|
|
3603
3833
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: NotificationListComponent, decorators: [{
|
|
3604
3834
|
type: i0.Component,
|
|
3605
3835
|
args: [{
|
|
@@ -3661,8 +3891,10 @@
|
|
|
3661
3891
|
{
|
|
3662
3892
|
actionName: 'pin',
|
|
3663
3893
|
actionLabelOrTranslationKey: function () { var _a; return ((_a = _this.message) === null || _a === void 0 ? void 0 : _a.pinned) ? 'streamChat.Unpin' : 'streamChat.Pin'; },
|
|
3664
|
-
actionHandler: function () { return
|
|
3665
|
-
|
|
3894
|
+
actionHandler: function (message) { return message.pinned
|
|
3895
|
+
? _this.channelService.unpinMessage(message)
|
|
3896
|
+
: _this.channelService.pinMessage(message); },
|
|
3897
|
+
isVisible: function (enabledActions) { return enabledActions.indexOf('pin-message') !== -1; },
|
|
3666
3898
|
},
|
|
3667
3899
|
{
|
|
3668
3900
|
actionName: 'flag',
|
|
@@ -3778,7 +4010,7 @@
|
|
|
3778
4010
|
return MessageActionsBoxComponent;
|
|
3779
4011
|
}());
|
|
3780
4012
|
MessageActionsBoxComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, deps: [{ token: ChatClientService }, { token: NotificationService }, { token: ChannelService }, { token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3781
|
-
MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n #actionBox\n data-testid=\"action-box\"\n class=\"str-chat__message-actions-box str-chat__message-actions-box-angular\"\n [class.str-chat__message-actions-box--open]=\"true\"\n>\n <ul class=\"str-chat__message-actions-list\">\n <ng-container\n *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n messageActionItemTemplate || defaultMessageActionItem;\n context: item\n \"\n ></ng-container>\n </ng-container>\n </ul>\n</div>\n\n<ng-template\n #defaultMessageActionItem\n let-actionName=\"actionName\"\n let-actionHandler=\"actionHandler\"\n let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n <button\n class=\"str-chat__message-actions-list-item-button\"\n [attr.data-testid]=\"actionName + '-action'\"\n (click)=\"actionHandler()\"\n >\n <li class=\"str-chat__message-actions-list-item\">\n {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n </li>\n </button>\n</ng-template>\n\n<ng-container\n *ngTemplateOutlet=\"\n modalTemplate || defaultModal;\n context: getEditModalContext()\n \"\n></ng-container>\n\n<ng-template\n #defaultModal\n let-isOpen=\"isOpen\"\n let-isOpenChangeHandler=\"isOpenChangeHandler\"\n let-content=\"content\"\n>\n <stream-modal\n [isOpen]=\"isOpen\"\n (isOpenChange)=\"isOpenChangeHandler($event)\"\n [content]=\"content\"\n >\n </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n <ng-template\n #defaultInput\n let-messageInput=\"message\"\n let-messageUpdateHandler=\"messageUpdateHandler\"\n let-sendMessage$Input=\"sendMessage$\"\n >\n <stream-message-input\n [message]=\"messageInput\"\n (messageUpdate)=\"messageUpdateHandler()\"\n [sendMessage$]=\"sendMessage$Input\"\n ></stream-message-input>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n messageInputTemplate || defaultInput;\n context: getMessageInputContext()\n \"\n >\n </ng-container>\n\n <stream-notification-list></stream-notification-list>\n <div\n class=\"\n str-chat__message-team-form-footer\n str-chat__message-team-form-footer-angular\n \"\n >\n <div class=\"str-chat__edit-message-form-options\">\n <button\n class=\"str-chat__edit-message-cancel\"\n translate\n data-testid=\"cancel-button\"\n (click)=\"modalClosed()\"\n >\n streamChat.Cancel\n </button>\n <button\n type=\"submit\"\n translate\n class=\"str-chat__edit-message-send\"\n data-testid=\"send-button\"\n (click)=\"sendClicked()\"\n (keyup.enter)=\"sendClicked()\"\n >\n streamChat.Send\n </button>\n </div>\n </div>\n </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type:
|
|
4013
|
+
MessageActionsBoxComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: { isOpen: "isOpen", isMine: "isMine", message: "message", enabledActions: "enabledActions" }, outputs: { displayedActionsCount: "displayedActionsCount", isEditing: "isEditing" }, viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, static: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n #actionBox\n data-testid=\"action-box\"\n class=\"str-chat__message-actions-box str-chat__message-actions-box-angular\"\n [class.str-chat__message-actions-box--open]=\"true\"\n>\n <ul class=\"str-chat__message-actions-list\">\n <ng-container\n *ngFor=\"let item of visibleMessageActionItems; trackBy: trackByActionName\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n messageActionItemTemplate || defaultMessageActionItem;\n context: item\n \"\n ></ng-container>\n </ng-container>\n </ul>\n</div>\n\n<ng-template\n #defaultMessageActionItem\n let-actionName=\"actionName\"\n let-actionHandler=\"actionHandler\"\n let-actionLabelOrTranslationKey=\"actionLabelOrTranslationKey\"\n>\n <button\n class=\"str-chat__message-actions-list-item-button\"\n [attr.data-testid]=\"actionName + '-action'\"\n (click)=\"actionHandler()\"\n >\n <li class=\"str-chat__message-actions-list-item\">\n {{ getActionLabel(actionLabelOrTranslationKey) | translate }}\n </li>\n </button>\n</ng-template>\n\n<ng-container\n *ngTemplateOutlet=\"\n modalTemplate || defaultModal;\n context: getEditModalContext()\n \"\n></ng-container>\n\n<ng-template\n #defaultModal\n let-isOpen=\"isOpen\"\n let-isOpenChangeHandler=\"isOpenChangeHandler\"\n let-content=\"content\"\n>\n <stream-modal\n [isOpen]=\"isOpen\"\n (isOpenChange)=\"isOpenChangeHandler($event)\"\n [content]=\"content\"\n >\n </stream-modal>\n</ng-template>\n\n<ng-template #modalContent>\n <div class=\"str-chat__edit-message-form\" *ngIf=\"isEditModalOpen\">\n <ng-template\n #defaultInput\n let-messageInput=\"message\"\n let-messageUpdateHandler=\"messageUpdateHandler\"\n let-sendMessage$Input=\"sendMessage$\"\n >\n <stream-message-input\n [message]=\"messageInput\"\n (messageUpdate)=\"messageUpdateHandler()\"\n [sendMessage$]=\"sendMessage$Input\"\n ></stream-message-input>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n messageInputTemplate || defaultInput;\n context: getMessageInputContext()\n \"\n >\n </ng-container>\n\n <stream-notification-list></stream-notification-list>\n <div\n class=\"\n str-chat__message-team-form-footer\n str-chat__message-team-form-footer-angular\n \"\n >\n <div class=\"str-chat__edit-message-form-options\">\n <button\n class=\"str-chat__edit-message-cancel\"\n translate\n data-testid=\"cancel-button\"\n (click)=\"modalClosed()\"\n >\n streamChat.Cancel\n </button>\n <button\n type=\"submit\"\n translate\n class=\"str-chat__edit-message-send\"\n data-testid=\"send-button\"\n (click)=\"sendClicked()\"\n (keyup.enter)=\"sendClicked()\"\n >\n streamChat.Send\n </button>\n </div>\n </div>\n </div>\n</ng-template>\n", components: [{ type: ModalComponent, selector: "stream-modal", inputs: ["isOpen", "content"], outputs: ["isOpenChange"] }, { type: MessageInputComponent, selector: "stream-message-input", inputs: ["isFileUploadEnabled", "areMentionsEnabled", "mentionScope", "mode", "isMultipleFileUploadEnabled", "message", "sendMessage$"], outputs: ["messageUpdate"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
|
|
3782
4014
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageActionsBoxComponent, decorators: [{
|
|
3783
4015
|
type: i0.Component,
|
|
3784
4016
|
args: [{
|
|
@@ -3820,7 +4052,7 @@
|
|
|
3820
4052
|
return ChannelComponent;
|
|
3821
4053
|
}());
|
|
3822
4054
|
ChannelComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelComponent, deps: [{ token: ChannelService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
3823
|
-
ChannelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelComponent, selector: "stream-channel", ngImport: i0__namespace, template: "<div\n class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n theme$ | async\n }}\"\n>\n <div\n class=\"str-chat__container\"\n *ngIf=\"\n (isError$ | async) === false &&\n (isInitializing$ | async) === false &&\n (isActiveChannel$ | async) === true;\n else noChannel\n \"\n >\n <div class=\"str-chat__main-panel\">\n <ng-content></ng-content>\n </div>\n <ng-content\n *ngIf=\"isActiveThread$ | async\"\n select='[name=\"thread\"]'\n ></ng-content>\n </div>\n <ng-template #noChannel>\n <div\n class=\"str-chat__empty-channel\"\n *ngIf=\"\n (isInitializing$ | async) === false &&\n ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n \"\n >\n <stream-icon icon=\"chat-bubble\"></stream-icon>\n <p class=\"str-chat__empty-channel-text\">\n {{ \"streamChat.No chats here yet\u2026\" | translate }}\n </p>\n <div class=\"str-chat__empty-channel-notifications\">\n <stream-notification-list></stream-notification-list>\n </div>\n </div>\n <div\n *ngIf=\"\n (isInitializing$ | async) === true &&\n (isError$ | async) === false &&\n (isActiveChannel$ | async) === false\n \"\n class=\"str-chat__loading-channel\"\n >\n <div class=\"str-chat__loading-channel-header\">\n <div class=\"str-chat__loading-channel-header-avatar\"></div>\n <div class=\"str-chat__loading-channel-header-end\">\n <div class=\"str-chat__loading-channel-header-name\"></div>\n <div class=\"str-chat__loading-channel-header-info\"></div>\n </div>\n </div>\n <div class=\"str-chat__loading-channel-message-list\">\n <div class=\"str-chat__loading-channel-message\">\n <div class=\"str-chat__loading-channel-message-avatar\"></div>\n <div class=\"str-chat__loading-channel-message-end\">\n <div class=\"str-chat__loading-channel-message-sender\"></div>\n <div class=\"str-chat__loading-channel-message-last-row\">\n <div class=\"str-chat__loading-channel-message-text\"></div>\n <div class=\"str-chat__loading-channel-message-date\"></div>\n </div>\n </div>\n </div>\n <div class=\"str-chat__loading-channel-message\">\n <div class=\"str-chat__loading-channel-message-avatar\"></div>\n <div class=\"str-chat__loading-channel-message-end\">\n <div class=\"str-chat__loading-channel-message-sender\"></div>\n <div class=\"str-chat__loading-channel-message-last-row\">\n <div class=\"str-chat__loading-channel-message-text\"></div>\n <div class=\"str-chat__loading-channel-message-date\"></div>\n </div>\n </div>\n </div>\n <div class=\"str-chat__loading-channel-message\">\n <div class=\"str-chat__loading-channel-message-avatar\"></div>\n <div class=\"str-chat__loading-channel-message-end\">\n <div class=\"str-chat__loading-channel-message-sender\"></div>\n <div class=\"str-chat__loading-channel-message-last-row\">\n <div class=\"str-chat__loading-channel-message-text\"></div>\n <div class=\"str-chat__loading-channel-message-date\"></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"str-chat__loading-channel-message-input-row\">\n <div class=\"str-chat__loading-channel-message-input\"></div>\n <div class=\"str-chat__loading-channel-message-send\"></div>\n </div>\n </div>\n </ng-template>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type:
|
|
4055
|
+
ChannelComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelComponent, selector: "stream-channel", ngImport: i0__namespace, template: "<div\n class=\"str-chat str-chat-channel messaging str-chat__channel str-chat__theme-{{\n theme$ | async\n }}\"\n>\n <div\n class=\"str-chat__container\"\n *ngIf=\"\n (isError$ | async) === false &&\n (isInitializing$ | async) === false &&\n (isActiveChannel$ | async) === true;\n else noChannel\n \"\n >\n <div class=\"str-chat__main-panel\">\n <ng-content></ng-content>\n </div>\n <ng-content\n *ngIf=\"isActiveThread$ | async\"\n select='[name=\"thread\"]'\n ></ng-content>\n </div>\n <ng-template #noChannel>\n <div\n class=\"str-chat__empty-channel\"\n *ngIf=\"\n (isInitializing$ | async) === false &&\n ((isError$ | async) === true || (isActiveChannel$ | async) === false)\n \"\n >\n <stream-icon icon=\"chat-bubble\"></stream-icon>\n <p class=\"str-chat__empty-channel-text\">\n {{ \"streamChat.No chats here yet\u2026\" | translate }}\n </p>\n <div class=\"str-chat__empty-channel-notifications\">\n <stream-notification-list></stream-notification-list>\n </div>\n </div>\n <div\n *ngIf=\"\n (isInitializing$ | async) === true &&\n (isError$ | async) === false &&\n (isActiveChannel$ | async) === false\n \"\n class=\"str-chat__loading-channel\"\n >\n <div class=\"str-chat__loading-channel-header\">\n <div class=\"str-chat__loading-channel-header-avatar\"></div>\n <div class=\"str-chat__loading-channel-header-end\">\n <div class=\"str-chat__loading-channel-header-name\"></div>\n <div class=\"str-chat__loading-channel-header-info\"></div>\n </div>\n </div>\n <div class=\"str-chat__loading-channel-message-list\">\n <div class=\"str-chat__loading-channel-message\">\n <div class=\"str-chat__loading-channel-message-avatar\"></div>\n <div class=\"str-chat__loading-channel-message-end\">\n <div class=\"str-chat__loading-channel-message-sender\"></div>\n <div class=\"str-chat__loading-channel-message-last-row\">\n <div class=\"str-chat__loading-channel-message-text\"></div>\n <div class=\"str-chat__loading-channel-message-date\"></div>\n </div>\n </div>\n </div>\n <div class=\"str-chat__loading-channel-message\">\n <div class=\"str-chat__loading-channel-message-avatar\"></div>\n <div class=\"str-chat__loading-channel-message-end\">\n <div class=\"str-chat__loading-channel-message-sender\"></div>\n <div class=\"str-chat__loading-channel-message-last-row\">\n <div class=\"str-chat__loading-channel-message-text\"></div>\n <div class=\"str-chat__loading-channel-message-date\"></div>\n </div>\n </div>\n </div>\n <div class=\"str-chat__loading-channel-message\">\n <div class=\"str-chat__loading-channel-message-avatar\"></div>\n <div class=\"str-chat__loading-channel-message-end\">\n <div class=\"str-chat__loading-channel-message-sender\"></div>\n <div class=\"str-chat__loading-channel-message-last-row\">\n <div class=\"str-chat__loading-channel-message-text\"></div>\n <div class=\"str-chat__loading-channel-message-date\"></div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"str-chat__loading-channel-message-input-row\">\n <div class=\"str-chat__loading-channel-message-input\"></div>\n <div class=\"str-chat__loading-channel-message-send\"></div>\n </div>\n </div>\n </ng-template>\n</div>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: NotificationListComponent, selector: "stream-notification-list" }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "async": i4__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
|
|
3824
4056
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelComponent, decorators: [{
|
|
3825
4057
|
type: i0.Component,
|
|
3826
4058
|
args: [{
|
|
@@ -4005,7 +4237,7 @@
|
|
|
4005
4237
|
return ChannelHeaderComponent;
|
|
4006
4238
|
}());
|
|
4007
4239
|
ChannelHeaderComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: i0__namespace.ChangeDetectorRef }, { token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
4008
|
-
ChannelHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0__namespace, template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n <div\n class=\"str-chat__header-hamburger\"\n (click)=\"toggleMenu($event)\"\n (keyup.enter)=\"toggleMenu($event)\"\n >\n <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n </div>\n <ng-content></ng-content>\n <stream-avatar-placeholder\n imageUrl=\"{{ activeChannel?.data?.image }}\"\n name=\"{{ avatarName }}\"\n type=\"channel\"\n location=\"channel-header\"\n [channel]=\"activeChannel\"\n [size]=\"40\"\n ></stream-avatar-placeholder>\n <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n <p\n data-testid=\"name\"\n class=\"\n str-chat__header-livestream-left--title str-chat__channel-header-title\n \"\n >\n {{ displayText }}\n </p>\n <p\n data-testid=\"info\"\n class=\"\n str-chat__header-livestream-left--members str-chat__channel-header-info\n \"\n >\n {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n translate:watcherCountParam) : ''}}\n </p>\n </div>\n <ng-container *ngIf=\"channelActionsTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n channelActionsTemplate;\n context: getChannelActionsContext()\n \"\n ></ng-container>\n </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type:
|
|
4240
|
+
ChannelHeaderComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0__namespace, template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n <div\n class=\"str-chat__header-hamburger\"\n (click)=\"toggleMenu($event)\"\n (keyup.enter)=\"toggleMenu($event)\"\n >\n <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n </div>\n <ng-content></ng-content>\n <stream-avatar-placeholder\n imageUrl=\"{{ activeChannel?.data?.image }}\"\n name=\"{{ avatarName }}\"\n type=\"channel\"\n location=\"channel-header\"\n [channel]=\"activeChannel\"\n [size]=\"40\"\n ></stream-avatar-placeholder>\n <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n <p\n data-testid=\"name\"\n class=\"\n str-chat__header-livestream-left--title str-chat__channel-header-title\n \"\n >\n {{ displayText }}\n </p>\n <p\n data-testid=\"info\"\n class=\"\n str-chat__header-livestream-left--members str-chat__channel-header-info\n \"\n >\n {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n translate:watcherCountParam) : ''}}\n </p>\n </div>\n <ng-container *ngIf=\"channelActionsTemplate\">\n <ng-container\n *ngTemplateOutlet=\"\n channelActionsTemplate;\n context: getChannelActionsContext()\n \"\n ></ng-container>\n </ng-container>\n</div>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
|
|
4009
4241
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelHeaderComponent, decorators: [{
|
|
4010
4242
|
type: i0.Component,
|
|
4011
4243
|
args: [{
|
|
@@ -4033,7 +4265,7 @@
|
|
|
4033
4265
|
var _this = this;
|
|
4034
4266
|
var _a, _b, _c, _d;
|
|
4035
4267
|
this.subscriptions.push(this.channelService.activeChannel$.subscribe(function (activeChannel) { var _a; return (_this.isActive = (activeChannel === null || activeChannel === void 0 ? void 0 : activeChannel.id) === ((_a = _this.channel) === null || _a === void 0 ? void 0 : _a.id)); }));
|
|
4036
|
-
var messages = (_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.
|
|
4268
|
+
var messages = (_b = (_a = this.channel) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.latestMessages;
|
|
4037
4269
|
if (messages && messages.length > 0) {
|
|
4038
4270
|
this.setLatestMessage(messages[messages.length - 1]);
|
|
4039
4271
|
}
|
|
@@ -4084,12 +4316,12 @@
|
|
|
4084
4316
|
var _this = this;
|
|
4085
4317
|
this.ngZone.run(function () {
|
|
4086
4318
|
var _a, _b, _c;
|
|
4087
|
-
if (((_a = _this.channel) === null || _a === void 0 ? void 0 : _a.state.
|
|
4319
|
+
if (((_a = _this.channel) === null || _a === void 0 ? void 0 : _a.state.latestMessages.length) === 0) {
|
|
4088
4320
|
_this.latestMessage = 'streamChat.Nothing yet...';
|
|
4089
4321
|
return;
|
|
4090
4322
|
}
|
|
4091
4323
|
if (!event.message ||
|
|
4092
|
-
((_b = _this.channel) === null || _b === void 0 ? void 0 : _b.state.
|
|
4324
|
+
((_b = _this.channel) === null || _b === void 0 ? void 0 : _b.state.latestMessages[((_c = _this.channel) === null || _c === void 0 ? void 0 : _c.state.latestMessages.length) - 1].id) !== event.message.id) {
|
|
4093
4325
|
return;
|
|
4094
4326
|
}
|
|
4095
4327
|
_this.setLatestMessage(event.message);
|
|
@@ -4119,7 +4351,7 @@
|
|
|
4119
4351
|
return ChannelPreviewComponent;
|
|
4120
4352
|
}());
|
|
4121
4353
|
ChannelPreviewComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, deps: [{ token: ChannelService }, { token: i0__namespace.NgZone }, { token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
4122
|
-
ChannelPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0__namespace, template: "<button\n class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n [class.str-chat__channel-preview--active]=\"isActive\"\n [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n (click)=\"setAsActiveChannel()\"\n data-testid=\"channel-preview-container\"\n>\n <div class=\"str-chat__channel-preview-messenger--left\">\n <stream-avatar-placeholder\n name=\"{{ avatarName }}\"\n imageUrl=\"{{ avatarImage }}\"\n type=\"channel\"\n [channel]=\"channel\"\n location=\"channel-preview\"\n [size]=\"49\"\n ></stream-avatar-placeholder>\n </div>\n <div\n class=\"\n str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n \"\n >\n <div class=\"str-chat__channel-preview-end-first-row\">\n <div class=\"str-chat__channel-preview-messenger--name\">\n <span data-testid=\"channel-preview-title\">{{ title }}</span>\n </div>\n <div\n data-testid=\"unread-badge\"\n *ngIf=\"unreadCount\"\n class=\"str-chat__channel-preview-unread-badge\"\n >\n {{ unreadCount }}\n </div>\n </div>\n <div\n data-testid=\"latest-message\"\n class=\"str-chat__channel-preview-messenger--last-message\"\n >\n {{ latestMessage | translate }}\n </div>\n </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type:
|
|
4354
|
+
ChannelPreviewComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0__namespace, template: "<button\n class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n [class.str-chat__channel-preview--active]=\"isActive\"\n [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n (click)=\"setAsActiveChannel()\"\n data-testid=\"channel-preview-container\"\n>\n <div class=\"str-chat__channel-preview-messenger--left\">\n <stream-avatar-placeholder\n name=\"{{ avatarName }}\"\n imageUrl=\"{{ avatarImage }}\"\n type=\"channel\"\n [channel]=\"channel\"\n location=\"channel-preview\"\n [size]=\"49\"\n ></stream-avatar-placeholder>\n </div>\n <div\n class=\"\n str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n \"\n >\n <div class=\"str-chat__channel-preview-end-first-row\">\n <div class=\"str-chat__channel-preview-messenger--name\">\n <span data-testid=\"channel-preview-title\">{{ title }}</span>\n </div>\n <div\n data-testid=\"unread-badge\"\n *ngIf=\"unreadCount\"\n class=\"str-chat__channel-preview-unread-badge\"\n >\n {{ unreadCount }}\n </div>\n </div>\n <div\n data-testid=\"latest-message\"\n class=\"str-chat__channel-preview-messenger--last-message\"\n >\n {{ latestMessage | translate }}\n </div>\n </div>\n</button>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
|
|
4123
4355
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelPreviewComponent, decorators: [{
|
|
4124
4356
|
type: i0.Component,
|
|
4125
4357
|
args: [{
|
|
@@ -4186,7 +4418,7 @@
|
|
|
4186
4418
|
return ChannelListComponent;
|
|
4187
4419
|
}());
|
|
4188
4420
|
ChannelListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelListComponent, deps: [{ token: ChannelService }, { token: ChannelListToggleService }, { token: CustomTemplatesService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
4189
|
-
ChannelListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelListComponent, selector: "stream-channel-list", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0__namespace, template: "<div\n #container\n data-testid=\"channel-list-container\"\n style=\"max-width: unset\"\n class=\"str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n theme$ | async\n }}\"\n [class.str-chat-channel-list--open]=\"(isOpen$ | async) === true\"\n>\n <div\n *ngIf=\"\n (isError$ | async) === false && (isInitializing$ | async) === false;\n else statusIndicator\n \"\n class=\"str-chat__channel-list-messenger\"\n >\n <div class=\"str-chat__channel-list-messenger__main\">\n <div\n class=\"str-chat__channel-list-empty\"\n *ngIf=\"!(channels$ | async)?.length\"\n >\n <stream-icon icon=\"chat-bubble\"></stream-icon>\n <p data-testid=\"empty-channel-list-indicator\">\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n </div>\n <p\n *ngIf=\"!(channels$ | async)?.length\"\n class=\"str-chat__channel-list-empty-v1\"\n data-testid=\"empty-channel-list-indicator\"\n >\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n <ng-container\n *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n >\n <ng-template #defaultTemplate let-channelInput=\"channel\">\n <stream-channel-preview\n data-testclass=\"channel-preview\"\n [channel]=\"channelInput\"\n ></stream-channel-preview>\n </ng-template>\n <div (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n <ng-container\n *ngTemplateOutlet=\"\n customChannelPreviewTemplate || defaultTemplate;\n context: getChannelPreviewContext(channel)\n \"\n ></ng-container>\n </div>\n </ng-container>\n <div\n *ngIf=\"hasMoreChannels$ | async\"\n class=\"str-chat__load-more-button\"\n (click)=\"loadMoreChannels()\"\n (keyup.enter)=\"loadMoreChannels()\"\n data-testid=\"load-more\"\n >\n <button\n class=\"str-chat__load-more-button__button str-chat__cta-button\"\n data-testid=\"load-more-button\"\n [disabled]=\"isLoadingMoreChannels\"\n >\n <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n \"Load more\" | translate\n }}</span>\n <ng-template #loadingIndicator\n ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n ></ng-template>\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #statusIndicator>\n <ng-container *ngIf=\"isError$ | async\">\n <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"isInitializing$ | async\">\n <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n <div class=\"str-chat__down-main\">\n <stream-icon-placeholder\n icon=\"connection-error\"\n ></stream-icon-placeholder>\n <h1>{{ \"streamChat.Connection error\" | translate }}</h1>\n <h3>\n {{\n \"streamChat.Error connecting to chat, refresh the page to try again.\"\n | translate\n }}\n </h3>\n </div>\n </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n <div\n class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n >\n <div class=\"str-chat__loading-channels-avatar\"></div>\n <div\n class=\"\n str-chat__loading-channels-meta str-chat__channel-preview-end-loading\n \"\n >\n <div class=\"str-chat__loading-channels-username\"></div>\n <div class=\"str-chat__loading-channels-status\"></div>\n </div>\n </div>\n</ng-template>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type:
|
|
4421
|
+
ChannelListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelListComponent, selector: "stream-channel-list", viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], ngImport: i0__namespace, template: "<div\n #container\n data-testid=\"channel-list-container\"\n style=\"max-width: unset\"\n class=\"str-chat str-chat__channel-list str-chat-channel-list messaging str-chat__theme-{{\n theme$ | async\n }}\"\n [class.str-chat-channel-list--open]=\"(isOpen$ | async) === true\"\n>\n <div\n *ngIf=\"\n (isError$ | async) === false && (isInitializing$ | async) === false;\n else statusIndicator\n \"\n class=\"str-chat__channel-list-messenger\"\n >\n <div class=\"str-chat__channel-list-messenger__main\">\n <div\n class=\"str-chat__channel-list-empty\"\n *ngIf=\"!(channels$ | async)?.length\"\n >\n <stream-icon icon=\"chat-bubble\"></stream-icon>\n <p data-testid=\"empty-channel-list-indicator\">\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n </div>\n <p\n *ngIf=\"!(channels$ | async)?.length\"\n class=\"str-chat__channel-list-empty-v1\"\n data-testid=\"empty-channel-list-indicator\"\n >\n {{ \"streamChat.You have no channels currently\" | translate }}\n </p>\n <ng-container\n *ngFor=\"let channel of channels$ | async; trackBy: trackByChannelId\"\n >\n <ng-template #defaultTemplate let-channelInput=\"channel\">\n <stream-channel-preview\n data-testclass=\"channel-preview\"\n [channel]=\"channelInput\"\n ></stream-channel-preview>\n </ng-template>\n <div (click)=\"channelSelected()\" (keyup.enter)=\"channelSelected()\">\n <ng-container\n *ngTemplateOutlet=\"\n customChannelPreviewTemplate || defaultTemplate;\n context: getChannelPreviewContext(channel)\n \"\n ></ng-container>\n </div>\n </ng-container>\n <div\n *ngIf=\"hasMoreChannels$ | async\"\n class=\"str-chat__load-more-button\"\n (click)=\"loadMoreChannels()\"\n (keyup.enter)=\"loadMoreChannels()\"\n data-testid=\"load-more\"\n >\n <button\n class=\"str-chat__load-more-button__button str-chat__cta-button\"\n data-testid=\"load-more-button\"\n [disabled]=\"isLoadingMoreChannels\"\n >\n <span *ngIf=\"!isLoadingMoreChannels; else loadingIndicator\">{{\n \"Load more\" | translate\n }}</span>\n <ng-template #loadingIndicator\n ><stream-loading-indicator-placeholder></stream-loading-indicator-placeholder\n ></ng-template>\n </button>\n </div>\n </div>\n </div>\n</div>\n\n<ng-template #statusIndicator>\n <ng-container *ngIf=\"isError$ | async\">\n <ng-container *ngTemplateOutlet=\"chatDown\"></ng-container>\n </ng-container>\n <ng-container *ngIf=\"isInitializing$ | async\">\n <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n </ng-container>\n</ng-template>\n\n<ng-template #chatDown>\n <div data-testid=\"chatdown-container\" class=\"str-chat__down\">\n <ng-container *ngTemplateOutlet=\"loadingChannels\"></ng-container>\n <div class=\"str-chat__down-main\">\n <stream-icon-placeholder\n icon=\"connection-error\"\n ></stream-icon-placeholder>\n <h1>{{ \"streamChat.Connection error\" | translate }}</h1>\n <h3>\n {{\n \"streamChat.Error connecting to chat, refresh the page to try again.\"\n | translate\n }}\n </h3>\n </div>\n </div>\n</ng-template>\n\n<ng-template #loadingChannels>\n <div data-testid=\"loading-indicator\" class=\"str-chat__loading-channels\">\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n <ng-container *ngTemplateOutlet=\"loadingChannel\"></ng-container>\n </div>\n</ng-template>\n\n<ng-template #loadingChannel>\n <div\n class=\"str-chat__loading-channels-item str-chat__channel-preview-loading\"\n >\n <div class=\"str-chat__loading-channels-avatar\"></div>\n <div\n class=\"\n str-chat__loading-channels-meta str-chat__channel-preview-end-loading\n \"\n >\n <div class=\"str-chat__loading-channels-username\"></div>\n <div class=\"str-chat__loading-channels-status\"></div>\n </div>\n </div>\n</ng-template>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: ["channel"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i4__namespace.AsyncPipe, "translate": i6__namespace.TranslatePipe } });
|
|
4190
4422
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ChannelListComponent, decorators: [{
|
|
4191
4423
|
type: i0.Component,
|
|
4192
4424
|
args: [{
|
|
@@ -4345,7 +4577,7 @@
|
|
|
4345
4577
|
return MessageReactionsComponent;
|
|
4346
4578
|
}());
|
|
4347
4579
|
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 }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
4348
|
-
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 [popper]=\"popperContent\"\n [popperTrigger]=\"popperTriggerHover\"\n [popperPlacement]=\"popperPlacementAuto\"\n [popperHideOnScroll]=\"false\"\n [popperHideOnClickOutside]=\"false\"\n (hover)=\"$event.stopPropagation()\"\n >\n <popper-content #popperContent>\n <div\n data-testclass=\"tooltip\"\n class=\"str-chat__tooltip str-chat__tooltip-angular\"\n >\n <span>\n {{ getUsersByReaction(reactionType) }}\n </span>\n </div>\n </popper-content>\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 ></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", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: i2__namespace.NgxPopperjsContentComponent, selector: "popper-content" }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type:
|
|
4580
|
+
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 [popper]=\"popperContent\"\n [popperTrigger]=\"popperTriggerHover\"\n [popperPlacement]=\"popperPlacementAuto\"\n [popperHideOnScroll]=\"false\"\n [popperHideOnClickOutside]=\"false\"\n (hover)=\"$event.stopPropagation()\"\n >\n <popper-content #popperContent>\n <div\n data-testclass=\"tooltip\"\n class=\"str-chat__tooltip str-chat__tooltip-angular\"\n >\n <span>\n {{ getUsersByReaction(reactionType) }}\n </span>\n </div>\n </popper-content>\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 ></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", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: i2__namespace.NgxPopperjsContentComponent, selector: "popper-content" }, { type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i4__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
4349
4581
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageReactionsComponent, decorators: [{
|
|
4350
4582
|
type: i0.Component,
|
|
4351
4583
|
args: [{
|
|
@@ -4390,6 +4622,10 @@
|
|
|
4390
4622
|
* Determines if the message is being dispalyed in a channel or in a [thread](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
|
|
4391
4623
|
*/
|
|
4392
4624
|
this.mode = 'main';
|
|
4625
|
+
/**
|
|
4626
|
+
* Highlighting is used to add visual emphasize to a message when jumping to the message
|
|
4627
|
+
*/
|
|
4628
|
+
this.isHighlighted = false;
|
|
4393
4629
|
this.isActionBoxOpen = false;
|
|
4394
4630
|
this.isReactionSelectorOpen = false;
|
|
4395
4631
|
this.visibleMessageActionsCount = 0;
|
|
@@ -4610,6 +4846,9 @@
|
|
|
4610
4846
|
},
|
|
4611
4847
|
};
|
|
4612
4848
|
};
|
|
4849
|
+
MessageComponent.prototype.jumpToMessage = function (messageId, parentMessageId) {
|
|
4850
|
+
void this.channelService.jumpToMessage(messageId, parentMessageId);
|
|
4851
|
+
};
|
|
4613
4852
|
MessageComponent.prototype.createMessageParts = function () {
|
|
4614
4853
|
var _this = this;
|
|
4615
4854
|
var _a, _b;
|
|
@@ -4663,7 +4902,7 @@
|
|
|
4663
4902
|
return MessageComponent;
|
|
4664
4903
|
}());
|
|
4665
4904
|
MessageComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, deps: [{ token: ChatClientService }, { token: ChannelService }, { token: CustomTemplatesService }, { token: i0__namespace.ChangeDetectorRef }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
4666
|
-
MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n #container\n class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n message?.type\n }} str-chat__message--{{ message?.status }} {{\n message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n }}\"\n [class.str-chat__message--me]=\"isSentByCurrentUser\"\n [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n [class.str-chat__message--has-attachment]=\"hasAttachment\"\n [class.str-chat__message--with-reactions]=\"hasReactions\"\n [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n [class.str-chat__message-send-can-be-retried]=\"\n message?.status === 'failed' && message?.errorStatusCode !== 403\n \"\n data-testid=\"message-container\"\n (mouseleave)=\"isActionBoxOpen = false\"\n>\n <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n <ng-container *ngIf=\"themeVersion === '1'\">\n <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n </ng-container>\n <stream-avatar-placeholder\n data-testid=\"avatar\"\n class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n [imageUrl]=\"message?.user?.image\"\n [name]=\"message?.user?.name || message?.user?.id\"\n type=\"user\"\n location=\"message-sender\"\n [user]=\"message?.user || undefined\"\n ></stream-avatar-placeholder>\n <div class=\"str-chat__message-inner\">\n <div\n class=\"str-chat__message-simple__actions str-chat__message-options\"\n data-testid=\"message-options\"\n [class.str-chat__message-edit-in-progress]=\"isEditing\"\n *ngIf=\"areOptionsVisible\"\n >\n <div\n data-testid=\"message-actions-container\"\n #messageActionsToggle\n class=\"\n str-chat__message-actions-container\n str-chat__message-simple__actions__action\n str-chat__message-simple__actions__action--options\n \"\n [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n isEditing\n \"\n [popper]=\"popperContent\"\n [popperTrigger]=\"popperTriggerClick\"\n [popperPlacement]=\"popperPlacementAuto\"\n [popperHideOnScroll]=\"true\"\n [popperHideOnClickOutside]=\"true\"\n [popperHideOnMouseLeave]=\"false\"\n >\n <popper-content #popperContent>\n <ng-template\n #defaultMessageActionsBox\n let-isOpen=\"isOpen\"\n let-isMine=\"isMine\"\n let-enabledActions=\"enabledActions\"\n let-messageInput=\"message\"\n let-displayedActionsCountChaneHanler=\"displayedActionsCountChaneHanler\"\n let-isEditingChangeHandler=\"isEditingChangeHandler\"\n >\n <stream-message-actions-box\n [isOpen]=\"isOpen\"\n [isMine]=\"isMine\"\n [enabledActions]=\"enabledActions\"\n [message]=\"messageInput\"\n (displayedActionsCount)=\"\n displayedActionsCountChaneHanler($event)\n \"\n (isEditing)=\"isEditingChangeHandler($event)\"\n ></stream-message-actions-box>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n messageActionsBoxTemplate || defaultMessageActionsBox;\n context: getMessageActionsBoxContext()\n \"\n >\n </ng-container>\n </popper-content>\n <div\n class=\"str-chat__message-actions-box-button\"\n *ngIf=\"visibleMessageActionsCount > 0\"\n data-testid=\"action-icon\"\n (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n >\n <stream-icon-placeholder\n icon=\"action-icon\"\n class=\"str-chat__message-action-icon\"\n ></stream-icon-placeholder>\n </div>\n </div>\n <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n <div\n *ngIf=\"\n enabledMessageActions.indexOf('send-reply') !== -1 &&\n mode === 'main'\n \"\n class=\"\n str-chat__message-simple__actions__action\n str-chat__message-simple__actions__action--thread\n str-chat__message-reply-in-thread-button\n \"\n data-testid=\"reply-in-thread\"\n (click)=\"setAsActiveParentMessage()\"\n (keyup.enter)=\"setAsActiveParentMessage()\"\n >\n <stream-icon-placeholder\n class=\"str-chat__message-action-icon\"\n icon=\"reply-in-thread\"\n ></stream-icon-placeholder>\n </div>\n <div\n *ngIf=\"canReactToMessage\"\n class=\"\n str-chat__message-simple__actions__action\n str-chat__message-simple__actions__action--reactions\n str-chat__message-reactions-button\n \"\n data-testid=\"reaction-icon\"\n (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n >\n <stream-icon-placeholder\n class=\"str-chat__message-action-icon\"\n icon=\"reaction-icon\"\n ></stream-icon-placeholder>\n </div>\n </div>\n <div class=\"str-chat__message-reactions-host\">\n <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n <ng-template\n #defaultMessageReactions\n let-messageReactionCounts=\"messageReactionCounts\"\n let-latestReactions=\"latestReactions\"\n let-isSelectorOpen=\"isSelectorOpen\"\n let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n let-messageId=\"messageId\"\n let-ownReactions=\"ownReactions\"\n >\n <stream-message-reactions\n [messageReactionCounts]=\"messageReactionCounts\"\n [latestReactions]=\"latestReactions\"\n [isSelectorOpen]=\"isSelectorOpen\"\n (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\n [messageId]=\"messageId\"\n [ownReactions]=\"ownReactions\"\n ></stream-message-reactions>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n messageReactionsTemplate || defaultMessageReactions;\n context: getMessageReactionsContext()\n \"\n ></ng-container>\n </div>\n <div class=\"str-chat__message-bubble\">\n <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n <ng-template\n #defaultAttachments\n let-messageId=\"messageId\"\n let-attachments=\"attachments\"\n let-parentMessageId=\"parentMessageId\"\n >\n <stream-attachment-list\n [messageId]=\"messageId\"\n [attachments]=\"attachments\"\n [parentMessageId]=\"parentMessageId\"\n ></stream-attachment-list>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n attachmentListTemplate || defaultAttachments;\n context: getAttachmentListContext()\n \"\n ></ng-container>\n </ng-container>\n <div\n class=\"str-chat__message-text\"\n tabindex=\"0\"\n *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n >\n <div\n data-testid=\"inner-message\"\n class=\"\n str-chat__message-text-inner str-chat__message-simple-text-inner\n \"\n [class.str-chat__message-light-text-inner--has-attachment]=\"\n hasAttachment\n \"\n (click)=\"\n message?.status === 'failed' && message?.errorStatusCode !== 403\n ? resendMessage()\n : undefined\n \"\n (keyup.enter)=\"\n message?.status === 'failed' && message?.errorStatusCode !== 403\n ? resendMessage()\n : undefined\n \"\n >\n <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n <stream-attachment-list\n *ngIf=\"hasAttachment && message?.quoted_message\"\n [attachments]=\"message!.attachments!\"\n [messageId]=\"message!.id\"\n ></stream-attachment-list>\n <div\n data-testid=\"client-error-message\"\n *ngIf=\"message?.type === 'error'\"\n class=\"\n str-chat__simple-message--error-message\n str-chat__message--error-message\n \"\n >\n {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n </div>\n <div\n data-testid=\"error-message\"\n *ngIf=\"message?.status === 'failed'\"\n class=\"\n str-chat__simple-message--error-message\n str-chat__message--error-message\n \"\n >\n {{\n (message?.errorStatusCode === 403\n ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n : \"streamChat.Message Failed \u00B7 Click to try again\"\n ) | translate\n }}\n </div>\n <div data-testid=\"text\">\n <p>\n <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n <ng-container *ngFor=\"let part of messageTextParts\">\n <span\n *ngIf=\"part.type === 'text'; else mention\"\n [innerHTML]=\"part.content\"\n ></span>\n <ng-template #mention>\n <ng-template #defaultMention let-content=\"content\">\n <span class=\"str-chat__message-mention\">{{\n content\n }}</span>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n mentionTemplate || defaultMention;\n context: getMentionContext(part)\n \"\n ></ng-container>\n </ng-template>\n </ng-container>\n </p>\n </div>\n </div>\n </div>\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '2'\"\n class=\"str-chat__message-error-icon\"\n icon=\"error\"\n ></stream-icon-placeholder>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n replyCountButton;\n context: { position: 'inside-message-bubble' }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n messageDateAndSender;\n context: { position: 'inside-message-bubble' }\n \"\n ></ng-container>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n replyCountButton;\n context: { position: 'outside-message-bubble', message: message }\n \"\n ></ng-container>\n\n <ng-container\n *ngTemplateOutlet=\"\n messageDateAndSender;\n context: { position: 'outside-message-bubble' }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n <div data-testid=\"message-deleted-component\">\n <div class=\"str-chat__message--deleted-inner\" translate>\n streamChat.This message was deleted...\n </div>\n </div>\n</ng-template>\n\n<ng-template #systemMessage>\n <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n <div class=\"str-chat__message--system__text\">\n <div class=\"str-chat__message--system__line\"></div>\n <p>{{ message?.text }}</p>\n <div class=\"str-chat__message--system__line\"></div>\n </div>\n <div class=\"str-chat__message--system__date\">\n {{ parsedDate }}\n </div>\n </div>\n</ng-template>\n\n<ng-template #quotedMessage>\n <div\n *ngIf=\"message?.quoted_message\"\n class=\"quoted-message str-chat__quoted-message-preview\"\n data-testid=\"quoted-message-container\"\n [class.mine]=\"isSentByCurrentUser\"\n >\n <stream-avatar-placeholder\n data-testid=\"qouted-message-avatar\"\n class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n [imageUrl]=\"message?.quoted_message?.user?.image\"\n [name]=\"\n message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n \"\n [size]=\"20\"\n type=\"user\"\n location=\"quoted-message-sender\"\n [user]=\"message?.quoted_message?.user || undefined\"\n ></stream-avatar-placeholder>\n <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n <ng-container\n *ngIf=\"\n message?.quoted_message?.attachments &&\n message?.quoted_message?.attachments?.length\n \"\n >\n <ng-template\n #defaultAttachments\n let-messageId=\"messageId\"\n let-attachments=\"attachments\"\n let-parentMessageId=\"parentMessageId\"\n >\n <stream-attachment-list\n [messageId]=\"messageId\"\n [attachments]=\"attachments\"\n [parentMessageId]=\"parentMessageId\"\n ></stream-attachment-list>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n attachmentListTemplate || defaultAttachments;\n context: getQuotedMessageAttachmentListContext()\n \"\n ></ng-container>\n </ng-container>\n <div\n data-testid=\"quoted-message-text\"\n [innerHTML]=\"\n message?.quoted_message?.html || message?.quoted_message?.text\n \"\n ></div>\n </div>\n </div>\n</ng-template>\n\n<!-- We need these markups in slightly different positions in theme-v1 and theme-v2, this soultion makes that possible without duplicating the code -->\n<ng-template #messageDateAndSender let-position=\"position\">\n <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n <div\n class=\"\n str-chat__message-data\n str-chat__message-simple-data\n str-chat__message-metadata\n \"\n *ngIf=\"\n (position === 'inside-message-bubble' && themeVersion === '1') ||\n (position === 'outside-message-bubble' && themeVersion === '2')\n \"\n >\n <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n <ng-container *ngIf=\"themeVersion === '2'\">\n <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n </ng-container>\n <span\n data-testid=\"sender\"\n *ngIf=\"!isSentByCurrentUser\"\n class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n >\n {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n </span>\n <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n {{ parsedDate }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #messageStatus>\n <ng-container\n *ngIf=\"\n isSentByCurrentUser &&\n ((isLastSentMessage && message?.status === 'received') ||\n message?.status === 'sending')\n \"\n >\n <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n </ng-container>\n <ng-template #sentStatus>\n <ng-container\n *ngIf=\"\n mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n else deliveredStatus\n \"\n >\n <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n </ng-container>\n </ng-template>\n <ng-template #deliveredStatus>\n <span\n *ngIf=\"mode === 'main'\"\n class=\"\n str-chat__message-simple-status\n str-chat__message-simple-status-angular\n str-chat__message-status\n \"\n data-testid=\"delivered-indicator\"\n [popper]=\"popperContent\"\n [popperTrigger]=\"popperTriggerHover\"\n [popperPlacement]=\"popperPlacementAuto\"\n [popperHideOnScroll]=\"false\"\n [popperHideOnClickOutside]=\"false\"\n (hover)=\"$event.stopPropagation()\"\n >\n <popper-content #popperContent>\n <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n {{ \"streamChat.Delivered\" | translate }}\n </div>\n </popper-content>\n <stream-icon-placeholder\n data-testid=\"delivered-icon\"\n icon=\"delivered-icon\"\n ></stream-icon-placeholder>\n </span>\n </ng-template>\n <ng-template #sendingStatus>\n <span\n class=\"\n str-chat__message-simple-status\n str-chat__message-simple-status-angular\n str-chat__message-status\n \"\n data-testid=\"sending-indicator\"\n [popper]=\"popperContent\"\n [popperTrigger]=\"popperTriggerHover\"\n [popperPlacement]=\"popperPlacementAuto\"\n [popperHideOnScroll]=\"false\"\n [popperHideOnClickOutside]=\"false\"\n (hover)=\"$event.stopPropagation()\"\n >\n <popper-content #popperContent>\n <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n {{ \"streamChat.Sending...\" | translate }}\n </div>\n </popper-content>\n <stream-loading-indicator-placeholder\n data-testid=\"loading-indicator\"\n ></stream-loading-indicator-placeholder>\n </span>\n </ng-template>\n <ng-template #readStatus>\n <span\n class=\"\n str-chat__message-simple-status\n str-chat__message-simple-status-angular\n str-chat__message-status\n \"\n data-testid=\"read-indicator\"\n [popper]=\"popperContent\"\n [popperTrigger]=\"popperTriggerHover\"\n [popperPlacement]=\"popperPlacementAuto\"\n [popperHideOnScroll]=\"false\"\n [popperHideOnClickOutside]=\"false\"\n (hover)=\"$event.stopPropagation()\"\n >\n <popper-content #popperContent>\n <div\n class=\"str-chat__tooltip str-chat__tooltip-angular\"\n data-testid=\"read-by-tooltip\"\n >\n {{ readByText }}\n </div>\n </popper-content>\n <stream-avatar-placeholder\n class=\"str-chat-angular__avatar-host\"\n data-test-id=\"last-read-user-avatar\"\n [size]=\"15\"\n [imageUrl]=\"lastReadUser?.image\"\n [name]=\"lastReadUser?.name || lastReadUser?.id\"\n type=\"user\"\n location=\"message-reader\"\n [user]=\"lastReadUser\"\n ></stream-avatar-placeholder>\n <span\n data-test-id=\"read-by-length\"\n *ngIf=\"isReadByMultipleUsers\"\n class=\"str-chat__message-simple-status-number\"\n >\n {{ (message?.readBy)!.length }}\n </span>\n </span>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton let-position=\"position\">\n <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n <div\n *ngIf=\"\n (position === 'inside-message-bubble' && themeVersion === '1') ||\n (position === 'outside-message-bubble' && themeVersion === '2')\n \"\n class=\"\n str-chat__message-simple-reply-button\n str-chat__message-replies-count-button-wrapper\n \"\n >\n <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n <button\n *ngIf=\"shouldDisplayThreadLink\"\n class=\"str-chat__message-replies-count-button\"\n data-testid=\"reply-count-button\"\n (click)=\"setAsActiveParentMessage()\"\n >\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '1'\"\n stream-icon-placeholder\n icon=\"reply\"\n ></stream-icon-placeholder>\n {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n replies' | translate:replyCountParam)}}\n </button>\n </div>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }, { type: i2__namespace.NgxPopperjsContentComponent, selector: "popper-content" }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i7__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i7__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i7__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i8__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i8__namespace.TranslatePipe } });
|
|
4905
|
+
MessageComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n #container\n class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n message?.type\n }} str-chat__message--{{ message?.status }} {{\n message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n }}\"\n [class.str-chat__message--me]=\"isSentByCurrentUser\"\n [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n [class.str-chat__message--has-attachment]=\"hasAttachment\"\n [class.str-chat__message--with-reactions]=\"hasReactions\"\n [class.str-chat__message--highlighted]=\"isHighlighted\"\n [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n [class.str-chat__message-send-can-be-retried]=\"\n message?.status === 'failed' && message?.errorStatusCode !== 403\n \"\n data-testid=\"message-container\"\n (mouseleave)=\"isActionBoxOpen = false\"\n>\n <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n <ng-container *ngIf=\"themeVersion === '1'\">\n <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n </ng-container>\n <stream-avatar-placeholder\n data-testid=\"avatar\"\n class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n [imageUrl]=\"message?.user?.image\"\n [name]=\"message?.user?.name || message?.user?.id\"\n type=\"user\"\n location=\"message-sender\"\n [user]=\"message?.user || undefined\"\n ></stream-avatar-placeholder>\n <div class=\"str-chat__message-inner\">\n <div\n class=\"str-chat__message-simple__actions str-chat__message-options\"\n data-testid=\"message-options\"\n [class.str-chat__message-edit-in-progress]=\"isEditing\"\n *ngIf=\"areOptionsVisible\"\n >\n <div\n data-testid=\"message-actions-container\"\n #messageActionsToggle\n class=\"\n str-chat__message-actions-container\n str-chat__message-simple__actions__action\n str-chat__message-simple__actions__action--options\n \"\n [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n isEditing\n \"\n [popper]=\"popperContent\"\n [popperTrigger]=\"popperTriggerClick\"\n [popperPlacement]=\"popperPlacementAuto\"\n [popperHideOnScroll]=\"true\"\n [popperHideOnClickOutside]=\"true\"\n [popperHideOnMouseLeave]=\"false\"\n >\n <popper-content #popperContent>\n <ng-template\n #defaultMessageActionsBox\n let-isOpen=\"isOpen\"\n let-isMine=\"isMine\"\n let-enabledActions=\"enabledActions\"\n let-messageInput=\"message\"\n let-displayedActionsCountChaneHanler=\"displayedActionsCountChaneHanler\"\n let-isEditingChangeHandler=\"isEditingChangeHandler\"\n >\n <stream-message-actions-box\n [isOpen]=\"isOpen\"\n [isMine]=\"isMine\"\n [enabledActions]=\"enabledActions\"\n [message]=\"messageInput\"\n (displayedActionsCount)=\"\n displayedActionsCountChaneHanler($event)\n \"\n (isEditing)=\"isEditingChangeHandler($event)\"\n ></stream-message-actions-box>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n messageActionsBoxTemplate || defaultMessageActionsBox;\n context: getMessageActionsBoxContext()\n \"\n >\n </ng-container>\n </popper-content>\n <div\n class=\"str-chat__message-actions-box-button\"\n *ngIf=\"visibleMessageActionsCount > 0\"\n data-testid=\"action-icon\"\n (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n >\n <stream-icon-placeholder\n icon=\"action-icon\"\n class=\"str-chat__message-action-icon\"\n ></stream-icon-placeholder>\n </div>\n </div>\n <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n <div\n *ngIf=\"\n enabledMessageActions.indexOf('send-reply') !== -1 &&\n mode === 'main'\n \"\n class=\"\n str-chat__message-simple__actions__action\n str-chat__message-simple__actions__action--thread\n str-chat__message-reply-in-thread-button\n \"\n data-testid=\"reply-in-thread\"\n (click)=\"setAsActiveParentMessage()\"\n (keyup.enter)=\"setAsActiveParentMessage()\"\n >\n <stream-icon-placeholder\n class=\"str-chat__message-action-icon\"\n icon=\"reply-in-thread\"\n ></stream-icon-placeholder>\n </div>\n <div\n *ngIf=\"canReactToMessage\"\n class=\"\n str-chat__message-simple__actions__action\n str-chat__message-simple__actions__action--reactions\n str-chat__message-reactions-button\n \"\n data-testid=\"reaction-icon\"\n (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n >\n <stream-icon-placeholder\n class=\"str-chat__message-action-icon\"\n icon=\"reaction-icon\"\n ></stream-icon-placeholder>\n </div>\n </div>\n <div class=\"str-chat__message-reactions-host\">\n <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n <ng-template\n #defaultMessageReactions\n let-messageReactionCounts=\"messageReactionCounts\"\n let-latestReactions=\"latestReactions\"\n let-isSelectorOpen=\"isSelectorOpen\"\n let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n let-messageId=\"messageId\"\n let-ownReactions=\"ownReactions\"\n >\n <stream-message-reactions\n [messageReactionCounts]=\"messageReactionCounts\"\n [latestReactions]=\"latestReactions\"\n [isSelectorOpen]=\"isSelectorOpen\"\n (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\n [messageId]=\"messageId\"\n [ownReactions]=\"ownReactions\"\n ></stream-message-reactions>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n messageReactionsTemplate || defaultMessageReactions;\n context: getMessageReactionsContext()\n \"\n ></ng-container>\n </div>\n <div class=\"str-chat__message-bubble\">\n <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n <ng-template\n #defaultAttachments\n let-messageId=\"messageId\"\n let-attachments=\"attachments\"\n let-parentMessageId=\"parentMessageId\"\n >\n <stream-attachment-list\n [messageId]=\"messageId\"\n [attachments]=\"attachments\"\n [parentMessageId]=\"parentMessageId\"\n ></stream-attachment-list>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n attachmentListTemplate || defaultAttachments;\n context: getAttachmentListContext()\n \"\n ></ng-container>\n </ng-container>\n <div\n class=\"str-chat__message-text\"\n tabindex=\"0\"\n *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n >\n <div\n data-testid=\"inner-message\"\n class=\"\n str-chat__message-text-inner str-chat__message-simple-text-inner\n \"\n [class.str-chat__message-light-text-inner--has-attachment]=\"\n hasAttachment\n \"\n (click)=\"\n message?.status === 'failed' && message?.errorStatusCode !== 403\n ? resendMessage()\n : undefined\n \"\n (keyup.enter)=\"\n message?.status === 'failed' && message?.errorStatusCode !== 403\n ? resendMessage()\n : undefined\n \"\n >\n <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n <stream-attachment-list\n *ngIf=\"hasAttachment && message?.quoted_message\"\n [attachments]=\"message!.attachments!\"\n [messageId]=\"message!.id\"\n ></stream-attachment-list>\n <div\n data-testid=\"client-error-message\"\n *ngIf=\"message?.type === 'error'\"\n class=\"\n str-chat__simple-message--error-message\n str-chat__message--error-message\n \"\n >\n {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n </div>\n <div\n data-testid=\"error-message\"\n *ngIf=\"message?.status === 'failed'\"\n class=\"\n str-chat__simple-message--error-message\n str-chat__message--error-message\n \"\n >\n {{\n (message?.errorStatusCode === 403\n ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n : \"streamChat.Message Failed \u00B7 Click to try again\"\n ) | translate\n }}\n </div>\n <div data-testid=\"text\">\n <p>\n <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n <ng-container *ngFor=\"let part of messageTextParts\">\n <span\n *ngIf=\"part.type === 'text'; else mention\"\n [innerHTML]=\"part.content\"\n ></span>\n <ng-template #mention>\n <ng-template #defaultMention let-content=\"content\">\n <span class=\"str-chat__message-mention\">{{\n content\n }}</span>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n mentionTemplate || defaultMention;\n context: getMentionContext(part)\n \"\n ></ng-container>\n </ng-template>\n </ng-container>\n </p>\n </div>\n </div>\n </div>\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '2'\"\n class=\"str-chat__message-error-icon\"\n icon=\"error\"\n ></stream-icon-placeholder>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n replyCountButton;\n context: { position: 'inside-message-bubble' }\n \"\n ></ng-container>\n <ng-container\n *ngTemplateOutlet=\"\n messageDateAndSender;\n context: { position: 'inside-message-bubble' }\n \"\n ></ng-container>\n </div>\n <ng-container\n *ngTemplateOutlet=\"\n replyCountButton;\n context: { position: 'outside-message-bubble', message: message }\n \"\n ></ng-container>\n\n <ng-container\n *ngTemplateOutlet=\"\n messageDateAndSender;\n context: { position: 'outside-message-bubble' }\n \"\n ></ng-container>\n </ng-container>\n </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n <div data-testid=\"message-deleted-component\">\n <div class=\"str-chat__message--deleted-inner\" translate>\n streamChat.This message was deleted...\n </div>\n </div>\n</ng-template>\n\n<ng-template #systemMessage>\n <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n <div class=\"str-chat__message--system__text\">\n <div class=\"str-chat__message--system__line\"></div>\n <p>{{ message?.text }}</p>\n <div class=\"str-chat__message--system__line\"></div>\n </div>\n <div class=\"str-chat__message--system__date\">\n {{ parsedDate }}\n </div>\n </div>\n</ng-template>\n\n<ng-template #quotedMessage>\n <div\n *ngIf=\"message?.quoted_message\"\n class=\"quoted-message str-chat__quoted-message-preview\"\n data-testid=\"quoted-message-container\"\n [class.mine]=\"isSentByCurrentUser\"\n (click)=\"\n jumpToMessage(\n (message?.quoted_message)!.id,\n message?.quoted_message?.parent_id\n )\n \"\n (keyup.enter)=\"\n jumpToMessage(\n (message?.quoted_message)!.id,\n message?.quoted_message?.parent_id\n )\n \"\n >\n <stream-avatar-placeholder\n data-testid=\"qouted-message-avatar\"\n class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n [imageUrl]=\"message?.quoted_message?.user?.image\"\n [name]=\"\n message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n \"\n [size]=\"20\"\n type=\"user\"\n location=\"quoted-message-sender\"\n [user]=\"message?.quoted_message?.user || undefined\"\n ></stream-avatar-placeholder>\n <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n <ng-container\n *ngIf=\"\n message?.quoted_message?.attachments &&\n message?.quoted_message?.attachments?.length\n \"\n >\n <ng-template\n #defaultAttachments\n let-messageId=\"messageId\"\n let-attachments=\"attachments\"\n let-parentMessageId=\"parentMessageId\"\n >\n <stream-attachment-list\n [messageId]=\"messageId\"\n [attachments]=\"attachments\"\n [parentMessageId]=\"parentMessageId\"\n ></stream-attachment-list>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n attachmentListTemplate || defaultAttachments;\n context: getQuotedMessageAttachmentListContext()\n \"\n ></ng-container>\n </ng-container>\n <div\n data-testid=\"quoted-message-text\"\n [innerHTML]=\"\n message?.quoted_message?.html || message?.quoted_message?.text\n \"\n ></div>\n </div>\n </div>\n</ng-template>\n\n<!-- We need these markups in slightly different positions in theme-v1 and theme-v2, this soultion makes that possible without duplicating the code -->\n<ng-template #messageDateAndSender let-position=\"position\">\n <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n <div\n class=\"\n str-chat__message-data\n str-chat__message-simple-data\n str-chat__message-metadata\n \"\n *ngIf=\"\n (position === 'inside-message-bubble' && themeVersion === '1') ||\n (position === 'outside-message-bubble' && themeVersion === '2')\n \"\n >\n <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n <ng-container *ngIf=\"themeVersion === '2'\">\n <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n </ng-container>\n <span\n data-testid=\"sender\"\n *ngIf=\"!isSentByCurrentUser\"\n class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n >\n {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n </span>\n <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n {{ parsedDate }}\n </span>\n </div>\n</ng-template>\n\n<ng-template #messageStatus>\n <ng-container\n *ngIf=\"\n isSentByCurrentUser &&\n ((isLastSentMessage && message?.status === 'received') ||\n message?.status === 'sending')\n \"\n >\n <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n </ng-container>\n <ng-template #sentStatus>\n <ng-container\n *ngIf=\"\n mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n else deliveredStatus\n \"\n >\n <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n </ng-container>\n </ng-template>\n <ng-template #deliveredStatus>\n <span\n *ngIf=\"mode === 'main'\"\n class=\"\n str-chat__message-simple-status\n str-chat__message-simple-status-angular\n str-chat__message-status\n \"\n data-testid=\"delivered-indicator\"\n [popper]=\"popperContent\"\n [popperTrigger]=\"popperTriggerHover\"\n [popperPlacement]=\"popperPlacementAuto\"\n [popperHideOnScroll]=\"false\"\n [popperHideOnClickOutside]=\"false\"\n (hover)=\"$event.stopPropagation()\"\n >\n <popper-content #popperContent>\n <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n {{ \"streamChat.Delivered\" | translate }}\n </div>\n </popper-content>\n <stream-icon-placeholder\n data-testid=\"delivered-icon\"\n icon=\"delivered-icon\"\n ></stream-icon-placeholder>\n </span>\n </ng-template>\n <ng-template #sendingStatus>\n <span\n class=\"\n str-chat__message-simple-status\n str-chat__message-simple-status-angular\n str-chat__message-status\n \"\n data-testid=\"sending-indicator\"\n [popper]=\"popperContent\"\n [popperTrigger]=\"popperTriggerHover\"\n [popperPlacement]=\"popperPlacementAuto\"\n [popperHideOnScroll]=\"false\"\n [popperHideOnClickOutside]=\"false\"\n (hover)=\"$event.stopPropagation()\"\n >\n <popper-content #popperContent>\n <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n {{ \"streamChat.Sending...\" | translate }}\n </div>\n </popper-content>\n <stream-loading-indicator-placeholder\n data-testid=\"loading-indicator\"\n ></stream-loading-indicator-placeholder>\n </span>\n </ng-template>\n <ng-template #readStatus>\n <span\n class=\"\n str-chat__message-simple-status\n str-chat__message-simple-status-angular\n str-chat__message-status\n \"\n data-testid=\"read-indicator\"\n [popper]=\"popperContent\"\n [popperTrigger]=\"popperTriggerHover\"\n [popperPlacement]=\"popperPlacementAuto\"\n [popperHideOnScroll]=\"false\"\n [popperHideOnClickOutside]=\"false\"\n (hover)=\"$event.stopPropagation()\"\n >\n <popper-content #popperContent>\n <div\n class=\"str-chat__tooltip str-chat__tooltip-angular\"\n data-testid=\"read-by-tooltip\"\n >\n {{ readByText }}\n </div>\n </popper-content>\n <stream-avatar-placeholder\n class=\"str-chat-angular__avatar-host\"\n data-test-id=\"last-read-user-avatar\"\n [size]=\"15\"\n [imageUrl]=\"lastReadUser?.image\"\n [name]=\"lastReadUser?.name || lastReadUser?.id\"\n type=\"user\"\n location=\"message-reader\"\n [user]=\"lastReadUser\"\n ></stream-avatar-placeholder>\n <span\n data-test-id=\"read-by-length\"\n *ngIf=\"isReadByMultipleUsers\"\n class=\"str-chat__message-simple-status-number\"\n >\n {{ (message?.readBy)!.length }}\n </span>\n </span>\n </ng-template>\n </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton let-position=\"position\">\n <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n <div\n *ngIf=\"\n (position === 'inside-message-bubble' && themeVersion === '1') ||\n (position === 'outside-message-bubble' && themeVersion === '2')\n \"\n class=\"\n str-chat__message-simple-reply-button\n str-chat__message-replies-count-button-wrapper\n \"\n >\n <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n <button\n *ngIf=\"shouldDisplayThreadLink\"\n class=\"str-chat__message-replies-count-button\"\n data-testid=\"reply-count-button\"\n (click)=\"setAsActiveParentMessage()\"\n >\n <stream-icon-placeholder\n *ngIf=\"themeVersion === '1'\"\n stream-icon-placeholder\n icon=\"reply\"\n ></stream-icon-placeholder>\n {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n replies' | translate:replyCountParam)}}\n </button>\n </div>\n</ng-template>\n", components: [{ type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }, { type: i2__namespace.NgxPopperjsContentComponent, selector: "popper-content" }, { type: MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"] }, { type: LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
|
|
4667
4906
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageComponent, decorators: [{
|
|
4668
4907
|
type: i0.Component,
|
|
4669
4908
|
args: [{
|
|
@@ -4679,6 +4918,8 @@
|
|
|
4679
4918
|
type: i0.Input
|
|
4680
4919
|
}], mode: [{
|
|
4681
4920
|
type: i0.Input
|
|
4921
|
+
}], isHighlighted: [{
|
|
4922
|
+
type: i0.Input
|
|
4682
4923
|
}], container: [{
|
|
4683
4924
|
type: i0.ViewChild,
|
|
4684
4925
|
args: ['container']
|
|
@@ -4751,7 +4992,7 @@
|
|
|
4751
4992
|
return TextareaComponent;
|
|
4752
4993
|
}());
|
|
4753
4994
|
TextareaComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: TextareaComponent, deps: [{ token: EmojiInputService }, { token: ThemeService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
4754
|
-
TextareaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", send: "send" }, 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\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)=\"sent($event)\"\n></textarea>\n", pipes: { "translate":
|
|
4995
|
+
TextareaComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: TextareaComponent, selector: "stream-textarea", inputs: { value: "value", placeholder: "placeholder" }, outputs: { valueChange: "valueChange", send: "send" }, 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\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)=\"sent($event)\"\n></textarea>\n", pipes: { "translate": i6__namespace.TranslatePipe } });
|
|
4755
4996
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: TextareaComponent, decorators: [{
|
|
4756
4997
|
type: i0.Component,
|
|
4757
4998
|
args: [{
|
|
@@ -5022,7 +5263,7 @@
|
|
|
5022
5263
|
return AutocompleteTextareaComponent;
|
|
5023
5264
|
}());
|
|
5024
5265
|
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 });
|
|
5025
|
-
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", mentionScope: "mentionScope" }, 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\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)=\"sent($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"] }], directives: [{ type: i8__namespace
|
|
5266
|
+
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", mentionScope: "mentionScope" }, 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\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)=\"sent($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"] }], directives: [{ type: i8__namespace.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i4__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i4__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i6__namespace.TranslatePipe } });
|
|
5026
5267
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: AutocompleteTextareaComponent, decorators: [{
|
|
5027
5268
|
type: i0.Component,
|
|
5028
5269
|
args: [{
|
|
@@ -5100,11 +5341,10 @@
|
|
|
5100
5341
|
* The `MessageList` component renders a scrollable list of messages.
|
|
5101
5342
|
*/
|
|
5102
5343
|
var MessageListComponent = /** @class */ (function () {
|
|
5103
|
-
function MessageListComponent(channelService, chatClientService,
|
|
5344
|
+
function MessageListComponent(channelService, chatClientService, customTemplatesService) {
|
|
5104
5345
|
var _this = this;
|
|
5105
5346
|
this.channelService = channelService;
|
|
5106
5347
|
this.chatClientService = chatClientService;
|
|
5107
|
-
this.imageLoadService = imageLoadService;
|
|
5108
5348
|
this.customTemplatesService = customTemplatesService;
|
|
5109
5349
|
/**
|
|
5110
5350
|
* Determines if the message list should display channel messages or [thread messages](https://getstream.io/chat/docs/javascript/threads/?language=javascript).
|
|
@@ -5118,23 +5358,30 @@
|
|
|
5118
5358
|
this.class = 'str-chat-angular__main-panel-inner str-chat-angular__message-list-host str-chat__main-panel-inner';
|
|
5119
5359
|
this.unreadMessageCount = 0;
|
|
5120
5360
|
this.groupStyles = [];
|
|
5121
|
-
this.isUserScrolledUpThreshold = 300;
|
|
5122
5361
|
this.subscriptions = [];
|
|
5362
|
+
this.isLatestMessageInList = true;
|
|
5123
5363
|
this.subscriptions.push(this.channelService.activeChannel$.subscribe(function (channel) {
|
|
5124
|
-
var _a;
|
|
5364
|
+
var _a, _b;
|
|
5125
5365
|
_this.resetScrollState();
|
|
5126
5366
|
var capabilites = (_a = channel === null || channel === void 0 ? void 0 : channel.data) === null || _a === void 0 ? void 0 : _a.own_capabilities;
|
|
5127
5367
|
if (capabilites) {
|
|
5128
5368
|
_this.enabledMessageActions = capabilites;
|
|
5129
5369
|
}
|
|
5130
|
-
|
|
5131
|
-
|
|
5132
|
-
|
|
5133
|
-
|
|
5134
|
-
|
|
5135
|
-
|
|
5136
|
-
|
|
5137
|
-
|
|
5370
|
+
(_b = _this.newMessageSubscription) === null || _b === void 0 ? void 0 : _b.unsubscribe();
|
|
5371
|
+
if (channel) {
|
|
5372
|
+
_this.newMessageSubscription = channel.on('message.new', function (event) {
|
|
5373
|
+
// If we display main channel messages and we're switched to an older message set -> use message.new event to update unread count and detect new messages sent by current user
|
|
5374
|
+
if (!event.message ||
|
|
5375
|
+
channel.state.messages === channel.state.latestMessages ||
|
|
5376
|
+
_this.mode === 'thread') {
|
|
5377
|
+
return;
|
|
5378
|
+
}
|
|
5379
|
+
_this.newMessageReceived({
|
|
5380
|
+
id: event.message.id,
|
|
5381
|
+
user: event.message.user,
|
|
5382
|
+
created_at: new Date(event.message.created_at || ''),
|
|
5383
|
+
});
|
|
5384
|
+
});
|
|
5138
5385
|
}
|
|
5139
5386
|
}));
|
|
5140
5387
|
this.subscriptions.push(this.channelService.activeParentMessage$.subscribe(function (message) {
|
|
@@ -5161,16 +5408,45 @@
|
|
|
5161
5408
|
}
|
|
5162
5409
|
if (changes.direction) {
|
|
5163
5410
|
if ((_a = this.scrollContainer) === null || _a === void 0 ? void 0 : _a.nativeElement) {
|
|
5164
|
-
this.
|
|
5411
|
+
this.jumpToLatestMessage();
|
|
5165
5412
|
}
|
|
5166
5413
|
}
|
|
5167
5414
|
};
|
|
5168
|
-
MessageListComponent.prototype.
|
|
5415
|
+
MessageListComponent.prototype.ngAfterViewInit = function () {
|
|
5169
5416
|
var _this = this;
|
|
5417
|
+
this.subscriptions.push(this.channelService.jumpToMessage$
|
|
5418
|
+
.pipe(operators.filter(function (config) { return !!config.id; }))
|
|
5419
|
+
.subscribe(function (config) {
|
|
5420
|
+
var messageId = undefined;
|
|
5421
|
+
if (_this.mode === 'main') {
|
|
5422
|
+
messageId = config.parentId || config.id;
|
|
5423
|
+
}
|
|
5424
|
+
else if (config.parentId) {
|
|
5425
|
+
messageId = config.id;
|
|
5426
|
+
}
|
|
5427
|
+
if (messageId) {
|
|
5428
|
+
if (messageId === 'latest') {
|
|
5429
|
+
_this.scrollToLatestMessage();
|
|
5430
|
+
}
|
|
5431
|
+
else {
|
|
5432
|
+
_this.scrollMessageIntoView(messageId);
|
|
5433
|
+
_this.highlightedMessageId = messageId;
|
|
5434
|
+
}
|
|
5435
|
+
}
|
|
5436
|
+
}));
|
|
5437
|
+
};
|
|
5438
|
+
MessageListComponent.prototype.ngAfterViewChecked = function () {
|
|
5439
|
+
if (this.highlightedMessageId) {
|
|
5440
|
+
// Turn off programatic scroll adjustments while jump to message is in progress
|
|
5441
|
+
this.hasNewMessages = false;
|
|
5442
|
+
this.olderMassagesLoaded = false;
|
|
5443
|
+
}
|
|
5170
5444
|
if (this.direction === 'top-to-bottom') {
|
|
5171
5445
|
if (this.hasNewMessages &&
|
|
5172
5446
|
(this.isNewMessageSentByUser || !this.isUserScrolled)) {
|
|
5173
|
-
this.
|
|
5447
|
+
this.isLatestMessageInList
|
|
5448
|
+
? this.scrollToTop()
|
|
5449
|
+
: this.jumpToLatestMessage();
|
|
5174
5450
|
this.hasNewMessages = false;
|
|
5175
5451
|
this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
|
|
5176
5452
|
}
|
|
@@ -5178,11 +5454,9 @@
|
|
|
5178
5454
|
else {
|
|
5179
5455
|
if (this.hasNewMessages) {
|
|
5180
5456
|
if (!this.isUserScrolled || this.isNewMessageSentByUser) {
|
|
5181
|
-
this.
|
|
5182
|
-
|
|
5183
|
-
|
|
5184
|
-
_this.scrollToBottom();
|
|
5185
|
-
}, 300);
|
|
5457
|
+
this.isLatestMessageInList
|
|
5458
|
+
? this.scrollToBottom()
|
|
5459
|
+
: this.jumpToLatestMessage();
|
|
5186
5460
|
}
|
|
5187
5461
|
this.hasNewMessages = false;
|
|
5188
5462
|
this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
|
|
@@ -5196,13 +5470,17 @@
|
|
|
5196
5470
|
this.containerHeight <
|
|
5197
5471
|
this.scrollContainer.nativeElement.scrollHeight &&
|
|
5198
5472
|
!this.isUserScrolled) {
|
|
5199
|
-
this.
|
|
5473
|
+
this.isLatestMessageInList
|
|
5474
|
+
? this.scrollToBottom()
|
|
5475
|
+
: this.jumpToLatestMessage();
|
|
5200
5476
|
this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
|
|
5201
5477
|
}
|
|
5202
5478
|
}
|
|
5203
5479
|
};
|
|
5204
5480
|
MessageListComponent.prototype.ngOnDestroy = function () {
|
|
5481
|
+
var _a;
|
|
5205
5482
|
this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
|
|
5483
|
+
(_a = this.newMessageSubscription) === null || _a === void 0 ? void 0 : _a.unsubscribe();
|
|
5206
5484
|
};
|
|
5207
5485
|
MessageListComponent.prototype.trackByMessageId = function (index, item) {
|
|
5208
5486
|
return item.id;
|
|
@@ -5210,10 +5488,9 @@
|
|
|
5210
5488
|
MessageListComponent.prototype.trackByUserId = function (index, user) {
|
|
5211
5489
|
return user.id;
|
|
5212
5490
|
};
|
|
5213
|
-
MessageListComponent.prototype.
|
|
5214
|
-
|
|
5215
|
-
|
|
5216
|
-
: this.scrollToTop();
|
|
5491
|
+
MessageListComponent.prototype.jumpToLatestMessage = function () {
|
|
5492
|
+
var _a;
|
|
5493
|
+
void this.channelService.jumpToMessage('latest', this.mode === 'thread' ? (_a = this.parentMessage) === null || _a === void 0 ? void 0 : _a.id : undefined);
|
|
5217
5494
|
};
|
|
5218
5495
|
MessageListComponent.prototype.scrollToBottom = function () {
|
|
5219
5496
|
this.scrollContainer.nativeElement.scrollTop =
|
|
@@ -5223,21 +5500,26 @@
|
|
|
5223
5500
|
this.scrollContainer.nativeElement.scrollTop = 0;
|
|
5224
5501
|
};
|
|
5225
5502
|
MessageListComponent.prototype.scrolled = function () {
|
|
5503
|
+
var scrollPosition = this.getScrollPosition();
|
|
5226
5504
|
this.isUserScrolled =
|
|
5227
|
-
this.direction === 'bottom-to-top'
|
|
5228
|
-
?
|
|
5229
|
-
|
|
5230
|
-
this.scrollContainer.nativeElement.clientHeight) >
|
|
5231
|
-
this.isUserScrolledUpThreshold
|
|
5232
|
-
: this.scrollContainer.nativeElement.scrollTop > 0;
|
|
5505
|
+
(this.direction === 'bottom-to-top'
|
|
5506
|
+
? scrollPosition !== 'bottom'
|
|
5507
|
+
: scrollPosition !== 'top') || !this.isLatestMessageInList;
|
|
5233
5508
|
if (!this.isUserScrolled) {
|
|
5234
5509
|
this.unreadMessageCount = 0;
|
|
5235
5510
|
}
|
|
5236
|
-
if (this.shouldLoadMoreMessages()) {
|
|
5511
|
+
if (this.shouldLoadMoreMessages(scrollPosition)) {
|
|
5237
5512
|
this.containerHeight = this.scrollContainer.nativeElement.scrollHeight;
|
|
5513
|
+
var direction = void 0;
|
|
5514
|
+
if (this.direction === 'top-to-bottom') {
|
|
5515
|
+
direction = scrollPosition === 'top' ? 'newer' : 'older';
|
|
5516
|
+
}
|
|
5517
|
+
else {
|
|
5518
|
+
direction = scrollPosition === 'top' ? 'older' : 'newer';
|
|
5519
|
+
}
|
|
5238
5520
|
this.mode === 'main'
|
|
5239
|
-
? void this.channelService.loadMoreMessages()
|
|
5240
|
-
: void this.channelService.loadMoreThreadReplies();
|
|
5521
|
+
? void this.channelService.loadMoreMessages(direction)
|
|
5522
|
+
: void this.channelService.loadMoreThreadReplies(direction);
|
|
5241
5523
|
}
|
|
5242
5524
|
this.prevScrollTop = this.scrollContainer.nativeElement.scrollTop;
|
|
5243
5525
|
};
|
|
@@ -5252,6 +5534,7 @@
|
|
|
5252
5534
|
isLastSentMessage: !!(this.lastSentMessageId && (message === null || message === void 0 ? void 0 : message.id) === this.lastSentMessageId),
|
|
5253
5535
|
enabledMessageActions: this.enabledMessageActions,
|
|
5254
5536
|
mode: this.mode,
|
|
5537
|
+
isHighlighted: (message === null || message === void 0 ? void 0 : message.id) === this.highlightedMessageId,
|
|
5255
5538
|
};
|
|
5256
5539
|
};
|
|
5257
5540
|
MessageListComponent.prototype.getTypingIndicatorText = function (users) {
|
|
@@ -5271,48 +5554,44 @@
|
|
|
5271
5554
|
(this.prevScrollTop || 0) +
|
|
5272
5555
|
(this.scrollContainer.nativeElement.scrollHeight - this.containerHeight);
|
|
5273
5556
|
};
|
|
5274
|
-
MessageListComponent.prototype.
|
|
5557
|
+
MessageListComponent.prototype.getScrollPosition = function () {
|
|
5275
5558
|
var _a, _b;
|
|
5276
|
-
|
|
5277
|
-
|
|
5278
|
-
|
|
5279
|
-
|
|
5280
|
-
|
|
5281
|
-
|
|
5559
|
+
var position = 'middle';
|
|
5560
|
+
if (Math.floor(this.scrollContainer.nativeElement.scrollTop) <=
|
|
5561
|
+
(((_a = this.parentMessageElement) === null || _a === void 0 ? void 0 : _a.nativeElement.clientHeight) || 0) &&
|
|
5562
|
+
(this.prevScrollTop === undefined ||
|
|
5563
|
+
this.prevScrollTop >
|
|
5564
|
+
(((_b = this.parentMessageElement) === null || _b === void 0 ? void 0 : _b.nativeElement.clientHeight) || 0))) {
|
|
5565
|
+
position = 'top';
|
|
5282
5566
|
}
|
|
5283
|
-
else
|
|
5284
|
-
|
|
5285
|
-
|
|
5286
|
-
|
|
5567
|
+
else if (Math.round(this.scrollContainer.nativeElement.scrollTop) +
|
|
5568
|
+
this.scrollContainer.nativeElement.clientHeight >=
|
|
5569
|
+
this.scrollContainer.nativeElement.scrollHeight) {
|
|
5570
|
+
position = 'bottom';
|
|
5287
5571
|
}
|
|
5572
|
+
return position;
|
|
5573
|
+
};
|
|
5574
|
+
MessageListComponent.prototype.shouldLoadMoreMessages = function (scrollPosition) {
|
|
5575
|
+
return scrollPosition !== 'middle' && !this.highlightedMessageId;
|
|
5288
5576
|
};
|
|
5289
5577
|
MessageListComponent.prototype.setMessages$ = function () {
|
|
5290
5578
|
var _this = this;
|
|
5291
5579
|
this.messages$ = (this.mode === 'main'
|
|
5292
5580
|
? this.channelService.activeChannelMessages$
|
|
5293
5581
|
: this.channelService.activeThreadMessages$).pipe(operators.tap(function (messages) {
|
|
5294
|
-
var _a, _b, _c, _d, _e;
|
|
5295
5582
|
if (messages.length === 0) {
|
|
5296
5583
|
return;
|
|
5297
5584
|
}
|
|
5298
|
-
var
|
|
5299
|
-
|
|
5300
|
-
|
|
5301
|
-
|
|
5302
|
-
_this.
|
|
5303
|
-
_this.
|
|
5304
|
-
((_b = messages[messages.length - 1].user) === null || _b === void 0 ? void 0 : _b.id) ===
|
|
5305
|
-
((_d = (_c = _this.chatClientService.chatClient) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id);
|
|
5306
|
-
if (_this.isUserScrolled) {
|
|
5307
|
-
_this.unreadMessageCount++;
|
|
5308
|
-
}
|
|
5309
|
-
}
|
|
5310
|
-
var currentOldestMessageDate = messages[0].created_at;
|
|
5311
|
-
if (!_this.oldestMessageDate) {
|
|
5312
|
-
_this.oldestMessageDate = currentOldestMessageDate;
|
|
5585
|
+
var currentLatestMessage = messages[messages.length - 1];
|
|
5586
|
+
_this.newMessageReceived(currentLatestMessage);
|
|
5587
|
+
var currentOldestMessage = messages[0];
|
|
5588
|
+
if (!_this.oldestMessage ||
|
|
5589
|
+
!messages.find(function (m) { return m.id === _this.oldestMessage.id; })) {
|
|
5590
|
+
_this.oldestMessage = currentOldestMessage;
|
|
5313
5591
|
}
|
|
5314
|
-
else if (
|
|
5315
|
-
|
|
5592
|
+
else if (_this.oldestMessage.created_at.getTime() >
|
|
5593
|
+
currentOldestMessage.created_at.getTime()) {
|
|
5594
|
+
_this.oldestMessage = currentOldestMessage;
|
|
5316
5595
|
_this.olderMassagesLoaded = true;
|
|
5317
5596
|
}
|
|
5318
5597
|
}), operators.tap(function (messages) {
|
|
@@ -5323,20 +5602,29 @@
|
|
|
5323
5602
|
return ((_a = m.user) === null || _a === void 0 ? void 0 : _a.id) === ((_c = (_b = _this.chatClientService.chatClient) === null || _b === void 0 ? void 0 : _b.user) === null || _c === void 0 ? void 0 : _c.id) &&
|
|
5324
5603
|
m.status !== 'sending';
|
|
5325
5604
|
})) === null || _a === void 0 ? void 0 : _a.id);
|
|
5605
|
+
}), operators.tap(function (messages) {
|
|
5606
|
+
_this.isLatestMessageInList =
|
|
5607
|
+
!_this.latestMessage ||
|
|
5608
|
+
messages.length === 0 ||
|
|
5609
|
+
messages[messages.length - 1].id === _this.latestMessage.id;
|
|
5610
|
+
if (!_this.isLatestMessageInList) {
|
|
5611
|
+
_this.isUserScrolled = true;
|
|
5612
|
+
}
|
|
5326
5613
|
}), operators.map(function (messages) { return _this.direction === 'bottom-to-top' ? messages : __spreadArray([], __read(messages)).reverse(); }), operators.tap(function (messages) {
|
|
5327
5614
|
_this.groupStyles = messages.map(function (m, i) { return getGroupStyles(m, messages[i - 1], messages[i + 1]); });
|
|
5328
5615
|
}));
|
|
5329
5616
|
};
|
|
5330
5617
|
MessageListComponent.prototype.resetScrollState = function () {
|
|
5331
|
-
this.
|
|
5618
|
+
this.latestMessage = undefined;
|
|
5332
5619
|
this.hasNewMessages = true;
|
|
5333
5620
|
this.isUserScrolled = false;
|
|
5334
5621
|
this.containerHeight = undefined;
|
|
5335
5622
|
this.olderMassagesLoaded = false;
|
|
5336
|
-
this.
|
|
5623
|
+
this.oldestMessage = undefined;
|
|
5337
5624
|
this.unreadMessageCount = 0;
|
|
5338
5625
|
this.prevScrollTop = undefined;
|
|
5339
5626
|
this.isNewMessageSentByUser = undefined;
|
|
5627
|
+
this.isLatestMessageInList = true;
|
|
5340
5628
|
};
|
|
5341
5629
|
Object.defineProperty(MessageListComponent.prototype, "usersTyping$", {
|
|
5342
5630
|
get: function () {
|
|
@@ -5347,10 +5635,51 @@
|
|
|
5347
5635
|
enumerable: false,
|
|
5348
5636
|
configurable: true
|
|
5349
5637
|
});
|
|
5638
|
+
MessageListComponent.prototype.scrollMessageIntoView = function (messageId, withRetry) {
|
|
5639
|
+
var _this = this;
|
|
5640
|
+
if (withRetry === void 0) { withRetry = true; }
|
|
5641
|
+
var element = document.getElementById(messageId);
|
|
5642
|
+
if (!element && withRetry) {
|
|
5643
|
+
// If the message was newly inserted into activeChannelMessages$, the message will be rendered after the current change detection cycle -> wait for this cycle to complete
|
|
5644
|
+
setTimeout(function () { return _this.scrollMessageIntoView(messageId, false); });
|
|
5645
|
+
}
|
|
5646
|
+
else if (element) {
|
|
5647
|
+
element.scrollIntoView({ block: 'center' });
|
|
5648
|
+
setTimeout(function () {
|
|
5649
|
+
_this.highlightedMessageId = undefined;
|
|
5650
|
+
}, 1000);
|
|
5651
|
+
}
|
|
5652
|
+
};
|
|
5653
|
+
MessageListComponent.prototype.scrollToLatestMessage = function (withRetry) {
|
|
5654
|
+
var _this = this;
|
|
5655
|
+
if (withRetry === void 0) { withRetry = true; }
|
|
5656
|
+
if (document.getElementById(this.latestMessage.id)) {
|
|
5657
|
+
this.direction === 'bottom-to-top'
|
|
5658
|
+
? this.scrollToBottom()
|
|
5659
|
+
: this.scrollToTop();
|
|
5660
|
+
}
|
|
5661
|
+
else if (withRetry) {
|
|
5662
|
+
// If the message was newly inserted into activeChannelMessages$, the message will be rendered after the current change detection cycle -> wait for this cycle to complete
|
|
5663
|
+
setTimeout(function () { return _this.scrollToLatestMessage(false); }, 0);
|
|
5664
|
+
}
|
|
5665
|
+
};
|
|
5666
|
+
MessageListComponent.prototype.newMessageReceived = function (message) {
|
|
5667
|
+
var _a, _b, _c, _d;
|
|
5668
|
+
if (!this.latestMessage ||
|
|
5669
|
+
((_a = this.latestMessage.created_at) === null || _a === void 0 ? void 0 : _a.getTime()) < message.created_at.getTime()) {
|
|
5670
|
+
this.latestMessage = message;
|
|
5671
|
+
this.hasNewMessages = true;
|
|
5672
|
+
this.isNewMessageSentByUser =
|
|
5673
|
+
((_b = message.user) === null || _b === void 0 ? void 0 : _b.id) === ((_d = (_c = this.chatClientService.chatClient) === null || _c === void 0 ? void 0 : _c.user) === null || _d === void 0 ? void 0 : _d.id);
|
|
5674
|
+
if (this.isUserScrolled) {
|
|
5675
|
+
this.unreadMessageCount++;
|
|
5676
|
+
}
|
|
5677
|
+
}
|
|
5678
|
+
};
|
|
5350
5679
|
return MessageListComponent;
|
|
5351
5680
|
}());
|
|
5352
|
-
MessageListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token:
|
|
5353
|
-
MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n #scrollContainer\n data-testid=\"scroll-container\"\n class=\"str-chat__list\"\n (scroll)=\"scrolled()\"\n>\n <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n <ul class=\"str-chat__ul\">\n <li\n #parentMessageElement\n *ngIf=\"mode === 'thread'\"\n data-testid=\"parent-message\"\n class=\"str-chat__parent-message-li\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n messageTemplateContainer;\n context: { message: parentMessage }\n \"\n ></ng-container>\n <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n replies' | translate:replyCountParam)}}\n </div>\n </li>\n <li\n data-testclass=\"message\"\n *ngFor=\"\n let message of messages$ | async;\n let i = index;\n trackBy: trackByMessageId\n \"\n class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n messageTemplateContainer;\n context: { message: message }\n \"\n ></ng-container>\n </li>\n </ul>\n <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n <div\n *ngIf=\"users.length > 0\"\n data-testid=\"typing-indicator\"\n class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n >\n <div class=\"str-chat__typing-indicator__dots\">\n <span class=\"str-chat__typing-indicator__dot\"></span>\n <span class=\"str-chat__typing-indicator__dot\"></span>\n <span class=\"str-chat__typing-indicator__dot\"></span>\n </div>\n <div\n data-testid=\"typing-users\"\n class=\"str-chat__typing-indicator__users\"\n >\n {{\n users.length === 1\n ? (\"streamChat.user is typing\"\n | translate: { user: getTypingIndicatorText(users) })\n : (\"streamChat.users are typing\"\n | translate: { users: getTypingIndicatorText(users) })\n }}\n </div>\n </div>\n </ng-container>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n typingIndicatorTemplate || defaultTypingIndicator;\n context: getTypingIndicatorContext()\n \"\n ></ng-container>\n </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n <button\n data-testid=\"scroll-to-latest\"\n *ngIf=\"isUserScrolled\"\n class=\"\n str-chat__message-notification-scroll-to-latest\n str-chat__message-notification-scroll-to-latest-right\n str-chat__circle-fab\n \"\n (keyup.enter)=\"
|
|
5681
|
+
MessageListComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, deps: [{ token: ChannelService }, { token: ChatClientService }, { token: CustomTemplatesService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
5682
|
+
MessageListComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageListComponent, selector: "stream-message-list", inputs: { mode: "mode", direction: "direction" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "scrollContainer", first: true, predicate: ["scrollContainer"], descendants: true }, { propertyName: "parentMessageElement", first: true, predicate: ["parentMessageElement"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div\n #scrollContainer\n data-testid=\"scroll-container\"\n class=\"str-chat__list\"\n (scroll)=\"scrolled()\"\n>\n <div class=\"str-chat__reverse-infinite-scroll str-chat__message-list-scroll\">\n <ul class=\"str-chat__ul\">\n <li\n #parentMessageElement\n *ngIf=\"mode === 'thread'\"\n data-testid=\"parent-message\"\n class=\"str-chat__parent-message-li\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n messageTemplateContainer;\n context: { message: parentMessage }\n \"\n ></ng-container>\n <div data-testid=\"reply-count\" class=\"str-chat__thread-start\">\n {{parentMessage?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n replies' | translate:replyCountParam)}}\n </div>\n </li>\n <li\n data-testclass=\"message\"\n *ngFor=\"\n let message of messages$ | async;\n let i = index;\n trackBy: trackByMessageId\n \"\n class=\"str-chat__li str-chat__li--{{ groupStyles[i] }}\"\n id=\"{{ message.id }}\"\n >\n <ng-container\n *ngTemplateOutlet=\"\n messageTemplateContainer;\n context: { message: message }\n \"\n ></ng-container>\n </li>\n </ul>\n <ng-template #defaultTypingIndicator let-usersTyping$=\"usersTyping$\">\n <!-- eslint-disable-next-line @angular-eslint/template/no-any -->\n <ng-container *ngIf=\"$any(usersTyping$ | async) as users\">\n <div\n *ngIf=\"users.length > 0\"\n data-testid=\"typing-indicator\"\n class=\"str-chat__typing-indicator str-chat__typing-indicator--typing\"\n >\n <div class=\"str-chat__typing-indicator__dots\">\n <span class=\"str-chat__typing-indicator__dot\"></span>\n <span class=\"str-chat__typing-indicator__dot\"></span>\n <span class=\"str-chat__typing-indicator__dot\"></span>\n </div>\n <div\n data-testid=\"typing-users\"\n class=\"str-chat__typing-indicator__users\"\n >\n {{\n users.length === 1\n ? (\"streamChat.user is typing\"\n | translate: { user: getTypingIndicatorText(users) })\n : (\"streamChat.users are typing\"\n | translate: { users: getTypingIndicatorText(users) })\n }}\n </div>\n </div>\n </ng-container>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n typingIndicatorTemplate || defaultTypingIndicator;\n context: getTypingIndicatorContext()\n \"\n ></ng-container>\n </div>\n</div>\n<div class=\"str-chat__jump-to-latest-message\">\n <button\n data-testid=\"scroll-to-latest\"\n *ngIf=\"isUserScrolled\"\n class=\"\n str-chat__message-notification-scroll-to-latest\n str-chat__message-notification-scroll-to-latest-right\n str-chat__circle-fab\n \"\n (keyup.enter)=\"jumpToLatestMessage()\"\n (click)=\"jumpToLatestMessage()\"\n >\n <stream-icon\n class=\"str-chat__jump-to-latest-icon str-chat__circle-fab-icon\"\n [icon]=\"direction === 'bottom-to-top' ? 'arrow-down' : 'arrow-up'\"\n ></stream-icon>\n <div\n *ngIf=\"unreadMessageCount > 0\"\n class=\"\n str-chat__message-notification\n str-chat__message-notification-scroll-to-latest-unread-count\n str-chat__jump-to-latest-unread-count\n \"\n >\n {{ unreadMessageCount }}\n </div>\n </button>\n</div>\n\n<ng-template #messageTemplateContainer let-message=\"message\">\n <ng-template\n #defaultMessageTemplate\n let-messageInput=\"message\"\n let-isLastSentMessage=\"isLastSentMessage\"\n let-enabledMessageActions=\"enabledMessageActions\"\n let-mode=\"mode\"\n let-isHighlighted=\"isHighlighted\"\n >\n <stream-message\n [message]=\"messageInput\"\n [isLastSentMessage]=\"isLastSentMessage\"\n [enabledMessageActions]=\"enabledMessageActions\"\n [mode]=\"mode\"\n [isHighlighted]=\"isHighlighted\"\n ></stream-message>\n </ng-template>\n <ng-container\n *ngTemplateOutlet=\"\n messageTemplate || defaultMessageTemplate;\n context: getMessageContext(message)\n \"\n ></ng-container>\n</ng-template>\n", components: [{ type: IconComponent, selector: "stream-icon", inputs: ["icon", "size"] }, { type: MessageComponent, selector: "stream-message", inputs: ["message", "enabledMessageActions", "isLastSentMessage", "mode", "isHighlighted"] }], directives: [{ type: i4__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i4__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], pipes: { "translate": i6__namespace.TranslatePipe, "async": i4__namespace.AsyncPipe } });
|
|
5354
5683
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: MessageListComponent, decorators: [{
|
|
5355
5684
|
type: i0.Component,
|
|
5356
5685
|
args: [{
|
|
@@ -5358,7 +5687,7 @@
|
|
|
5358
5687
|
templateUrl: './message-list.component.html',
|
|
5359
5688
|
styles: [],
|
|
5360
5689
|
}]
|
|
5361
|
-
}], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type:
|
|
5690
|
+
}], ctorParameters: function () { return [{ type: ChannelService }, { type: ChatClientService }, { type: CustomTemplatesService }]; }, propDecorators: { mode: [{
|
|
5362
5691
|
type: i0.Input
|
|
5363
5692
|
}], direction: [{
|
|
5364
5693
|
type: i0.Input
|
|
@@ -5373,6 +5702,28 @@
|
|
|
5373
5702
|
args: ['parentMessageElement']
|
|
5374
5703
|
}] } });
|
|
5375
5704
|
|
|
5705
|
+
/**
|
|
5706
|
+
* The `ImageLoadService` is used to position the scrollbar in the message list
|
|
5707
|
+
* @deprecated - This class is no longer used by SDK components as image sizes are fixed
|
|
5708
|
+
*/
|
|
5709
|
+
var ImageLoadService = /** @class */ (function () {
|
|
5710
|
+
function ImageLoadService() {
|
|
5711
|
+
/**
|
|
5712
|
+
* A subject that can be used to notify the message list if an image attachment finished loading
|
|
5713
|
+
*/
|
|
5714
|
+
this.imageLoad$ = new rxjs.Subject();
|
|
5715
|
+
}
|
|
5716
|
+
return ImageLoadService;
|
|
5717
|
+
}());
|
|
5718
|
+
ImageLoadService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ImageLoadService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
|
|
5719
|
+
ImageLoadService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ImageLoadService, providedIn: 'root' });
|
|
5720
|
+
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ImageLoadService, decorators: [{
|
|
5721
|
+
type: i0.Injectable,
|
|
5722
|
+
args: [{
|
|
5723
|
+
providedIn: 'root',
|
|
5724
|
+
}]
|
|
5725
|
+
}], ctorParameters: function () { return []; } });
|
|
5726
|
+
|
|
5376
5727
|
/**
|
|
5377
5728
|
* 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.
|
|
5378
5729
|
*/
|
|
@@ -5413,7 +5764,7 @@
|
|
|
5413
5764
|
return ThreadComponent;
|
|
5414
5765
|
}());
|
|
5415
5766
|
ThreadComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ThreadComponent, deps: [{ token: CustomTemplatesService }, { token: ChannelService }, { token: ChatClientService }], target: i0__namespace.ɵɵFactoryTarget.Component });
|
|
5416
|
-
ThreadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0__namespace, template: "<div class=\"str-chat__thread-container\">\n <ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.threadHeaderTemplate$ | async) ||\n defaultThreadHeader;\n context: getThreadHeaderContext()\n \"\n ></ng-container>\n <ng-content></ng-content>\n</div>\n\n<ng-template\n #defaultThreadHeader\n let-parentMessage=\"parentMessage\"\n let-closeThreadHandler=\"closeThreadHandler\"\n>\n <div class=\"str-chat__thread-header\">\n <div class=\"str-chat__thread-header-details\">\n <div class=\"str-chat__thread-header-name\" translate>\n streamChat.Thread\n </div>\n <div\n class=\"str-chat__thread-header-channel-name\"\n data-testid=\"channel-name\"\n >\n {{ channelName }}\n </div>\n </div>\n <button\n class=\"str-chat__square-button str-chat__close-thread-button\"\n data-testid=\"close-button\"\n (click)=\"closeThreadHandler()\"\n >\n <stream-icon-placeholder\n icon=\"close-no-outline\"\n ></stream-icon-placeholder>\n </button>\n </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type:
|
|
5767
|
+
ThreadComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ThreadComponent, selector: "stream-thread", host: { properties: { "class": "this.class" } }, ngImport: i0__namespace, template: "<div class=\"str-chat__thread-container\">\n <ng-container\n *ngTemplateOutlet=\"\n (customTemplatesService.threadHeaderTemplate$ | async) ||\n defaultThreadHeader;\n context: getThreadHeaderContext()\n \"\n ></ng-container>\n <ng-content></ng-content>\n</div>\n\n<ng-template\n #defaultThreadHeader\n let-parentMessage=\"parentMessage\"\n let-closeThreadHandler=\"closeThreadHandler\"\n>\n <div class=\"str-chat__thread-header\">\n <div class=\"str-chat__thread-header-details\">\n <div class=\"str-chat__thread-header-name\" translate>\n streamChat.Thread\n </div>\n <div\n class=\"str-chat__thread-header-channel-name\"\n data-testid=\"channel-name\"\n >\n {{ channelName }}\n </div>\n </div>\n <button\n class=\"str-chat__square-button str-chat__close-thread-button\"\n data-testid=\"close-button\"\n (click)=\"closeThreadHandler()\"\n >\n <stream-icon-placeholder\n icon=\"close-no-outline\"\n ></stream-icon-placeholder>\n </button>\n </div>\n</ng-template>\n", components: [{ type: IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }], directives: [{ type: i4__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6__namespace.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "async": i4__namespace.AsyncPipe } });
|
|
5417
5768
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: ThreadComponent, decorators: [{
|
|
5418
5769
|
type: i0.Component,
|
|
5419
5770
|
args: [{
|
|
@@ -5432,13 +5783,13 @@
|
|
|
5432
5783
|
return StreamAvatarModule;
|
|
5433
5784
|
}());
|
|
5434
5785
|
StreamAvatarModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
5435
|
-
StreamAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, declarations: [AvatarComponent, AvatarPlaceholderComponent], imports: [
|
|
5436
|
-
StreamAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, imports: [[
|
|
5786
|
+
StreamAvatarModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, declarations: [AvatarComponent, AvatarPlaceholderComponent], imports: [i4.CommonModule, i6.TranslateModule], exports: [AvatarComponent, AvatarPlaceholderComponent] });
|
|
5787
|
+
StreamAvatarModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, imports: [[i4.CommonModule, i6.TranslateModule]] });
|
|
5437
5788
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAvatarModule, decorators: [{
|
|
5438
5789
|
type: i0.NgModule,
|
|
5439
5790
|
args: [{
|
|
5440
5791
|
declarations: [AvatarComponent, AvatarPlaceholderComponent],
|
|
5441
|
-
imports: [
|
|
5792
|
+
imports: [i4.CommonModule, i6.TranslateModule],
|
|
5442
5793
|
exports: [AvatarComponent, AvatarPlaceholderComponent],
|
|
5443
5794
|
}]
|
|
5444
5795
|
}] });
|
|
@@ -5468,8 +5819,8 @@
|
|
|
5468
5819
|
TextareaDirective,
|
|
5469
5820
|
ThreadComponent,
|
|
5470
5821
|
IconPlaceholderComponent,
|
|
5471
|
-
LoadingIndicatorPlaceholderComponent], imports: [
|
|
5472
|
-
|
|
5822
|
+
LoadingIndicatorPlaceholderComponent], imports: [i4.CommonModule,
|
|
5823
|
+
i6.TranslateModule,
|
|
5473
5824
|
StreamAvatarModule,
|
|
5474
5825
|
i2.NgxPopperjsModule], exports: [ChannelComponent,
|
|
5475
5826
|
ChannelHeaderComponent,
|
|
@@ -5492,8 +5843,8 @@
|
|
|
5492
5843
|
IconPlaceholderComponent,
|
|
5493
5844
|
LoadingIndicatorPlaceholderComponent] });
|
|
5494
5845
|
StreamChatModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamChatModule, imports: [[
|
|
5495
|
-
|
|
5496
|
-
|
|
5846
|
+
i4.CommonModule,
|
|
5847
|
+
i6.TranslateModule,
|
|
5497
5848
|
StreamAvatarModule,
|
|
5498
5849
|
i2.NgxPopperjsModule,
|
|
5499
5850
|
], StreamAvatarModule] });
|
|
@@ -5523,8 +5874,8 @@
|
|
|
5523
5874
|
LoadingIndicatorPlaceholderComponent,
|
|
5524
5875
|
],
|
|
5525
5876
|
imports: [
|
|
5526
|
-
|
|
5527
|
-
|
|
5877
|
+
i4.CommonModule,
|
|
5878
|
+
i6.TranslateModule,
|
|
5528
5879
|
StreamAvatarModule,
|
|
5529
5880
|
i2.NgxPopperjsModule,
|
|
5530
5881
|
],
|
|
@@ -5559,18 +5910,18 @@
|
|
|
5559
5910
|
return StreamAutocompleteTextareaModule;
|
|
5560
5911
|
}());
|
|
5561
5912
|
StreamAutocompleteTextareaModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
5562
|
-
StreamAutocompleteTextareaModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, declarations: [AutocompleteTextareaComponent], imports: [
|
|
5913
|
+
StreamAutocompleteTextareaModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, declarations: [AutocompleteTextareaComponent], imports: [i4.CommonModule, i6.TranslateModule, i8.MentionModule, StreamAvatarModule], exports: [AutocompleteTextareaComponent] });
|
|
5563
5914
|
StreamAutocompleteTextareaModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, providers: [
|
|
5564
5915
|
{
|
|
5565
5916
|
provide: textareaInjectionToken,
|
|
5566
5917
|
useValue: AutocompleteTextareaComponent,
|
|
5567
5918
|
},
|
|
5568
|
-
], imports: [[
|
|
5919
|
+
], imports: [[i4.CommonModule, i6.TranslateModule, i8.MentionModule, StreamAvatarModule]] });
|
|
5569
5920
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamAutocompleteTextareaModule, decorators: [{
|
|
5570
5921
|
type: i0.NgModule,
|
|
5571
5922
|
args: [{
|
|
5572
5923
|
declarations: [AutocompleteTextareaComponent],
|
|
5573
|
-
imports: [
|
|
5924
|
+
imports: [i4.CommonModule, i6.TranslateModule, i8.MentionModule, StreamAvatarModule],
|
|
5574
5925
|
exports: [AutocompleteTextareaComponent],
|
|
5575
5926
|
providers: [
|
|
5576
5927
|
{
|
|
@@ -5587,18 +5938,18 @@
|
|
|
5587
5938
|
return StreamTextareaModule;
|
|
5588
5939
|
}());
|
|
5589
5940
|
StreamTextareaModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
|
|
5590
|
-
StreamTextareaModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, declarations: [TextareaComponent], imports: [
|
|
5941
|
+
StreamTextareaModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, declarations: [TextareaComponent], imports: [i4.CommonModule, i6.TranslateModule], exports: [TextareaComponent] });
|
|
5591
5942
|
StreamTextareaModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, providers: [
|
|
5592
5943
|
{
|
|
5593
5944
|
provide: textareaInjectionToken,
|
|
5594
5945
|
useValue: TextareaComponent,
|
|
5595
5946
|
},
|
|
5596
|
-
], imports: [[
|
|
5947
|
+
], imports: [[i4.CommonModule, i6.TranslateModule]] });
|
|
5597
5948
|
i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0__namespace, type: StreamTextareaModule, decorators: [{
|
|
5598
5949
|
type: i0.NgModule,
|
|
5599
5950
|
args: [{
|
|
5600
5951
|
declarations: [TextareaComponent],
|
|
5601
|
-
imports: [
|
|
5952
|
+
imports: [i4.CommonModule, i6.TranslateModule],
|
|
5602
5953
|
exports: [TextareaComponent],
|
|
5603
5954
|
providers: [
|
|
5604
5955
|
{
|
|
@@ -5617,6 +5968,7 @@
|
|
|
5617
5968
|
* Generated bundle index. Do not edit.
|
|
5618
5969
|
*/
|
|
5619
5970
|
|
|
5971
|
+
exports.AttachmentConfigurationService = AttachmentConfigurationService;
|
|
5620
5972
|
exports.AttachmentListComponent = AttachmentListComponent;
|
|
5621
5973
|
exports.AttachmentPreviewListComponent = AttachmentPreviewListComponent;
|
|
5622
5974
|
exports.AttachmentService = AttachmentService;
|