stream-chat-angular 5.13.0 → 5.14.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 +1 -0
- package/assets/version.d.ts +1 -1
- package/esm2020/assets/i18n/en.mjs +2 -1
- package/esm2020/assets/version.mjs +2 -2
- package/esm2020/lib/custom-templates.service.mjs +8 -2
- package/esm2020/lib/message/message.component.mjs +9 -9
- package/esm2020/lib/message-blocked/message-blocked.component.mjs +22 -0
- package/esm2020/lib/stream-chat.module.mjs +8 -3
- package/esm2020/lib/types.mjs +1 -1
- package/esm2020/public-api.mjs +2 -1
- package/fesm2015/stream-chat-angular.mjs +44 -15
- package/fesm2015/stream-chat-angular.mjs.map +1 -1
- package/fesm2020/stream-chat-angular.mjs +42 -13
- package/fesm2020/stream-chat-angular.mjs.map +1 -1
- package/lib/channel.service.d.ts +2 -0
- package/lib/custom-templates.service.d.ts +8 -2
- package/lib/message/message.component.d.ts +2 -1
- package/lib/message-blocked/message-blocked.component.d.ts +11 -0
- package/lib/stream-chat.module.d.ts +8 -7
- package/lib/types.d.ts +4 -0
- package/package.json +2 -2
- package/public-api.d.ts +1 -0
- package/src/assets/i18n/en.ts +2 -0
- package/src/assets/styles/css/emoji-mart.css +1 -1
- package/src/assets/styles/css/index.css +1 -3
- package/src/assets/styles/css/index.layout.css +1 -3
- package/src/assets/styles/scss/Channel/Channel-layout.scss +2 -1
- package/src/assets/styles/scss/ChannelSearch/ChannelSearch-layout.scss +1 -0
- package/src/assets/styles/scss/Message/Message-layout.scss +9 -1
- package/src/assets/styles/scss/Message/Message-theme.scss +34 -5
- package/src/assets/styles/scss/Poll/Poll-layout.scss +1 -1
- package/src/assets/styles/scss/Search/Search-layout.scss +148 -0
- package/src/assets/styles/scss/Search/Search-theme.scss +222 -0
- package/src/assets/styles/scss/_icons.scss +2 -0
- package/src/assets/styles/scss/index.layout.scss +1 -0
- package/src/assets/styles/scss/index.scss +1 -0
- package/src/assets/styles/scss/vendor/react-image-gallery.scss +3 -1
- package/src/assets/version.ts +1 -1
package/lib/channel.service.d.ts
CHANGED
|
@@ -342,6 +342,7 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
|
|
|
342
342
|
pinned_at?: string | null | undefined;
|
|
343
343
|
poll_id?: string | undefined;
|
|
344
344
|
quoted_message_id?: string | undefined;
|
|
345
|
+
restricted_visibility?: string[] | undefined;
|
|
345
346
|
show_in_channel?: boolean | undefined;
|
|
346
347
|
silent?: boolean | undefined;
|
|
347
348
|
text?: string | undefined;
|
|
@@ -366,6 +367,7 @@ export declare class ChannelService<T extends DefaultStreamChatGenerics = Defaul
|
|
|
366
367
|
latest_reactions?: ReactionResponse<T>[] | undefined;
|
|
367
368
|
mentioned_users?: UserResponse<T>[] | undefined;
|
|
368
369
|
message_text_updated_at?: string | undefined;
|
|
370
|
+
moderation?: import("stream-chat").ModerationResponse | undefined;
|
|
369
371
|
moderation_details?: import("stream-chat").ModerationDetailsResponse | undefined;
|
|
370
372
|
own_reactions?: ReactionResponse<T>[] | null | undefined;
|
|
371
373
|
pin_expires?: string | null | undefined;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { TemplateRef } from '@angular/core';
|
|
2
2
|
import { BehaviorSubject } from 'rxjs';
|
|
3
|
-
import { AttachmentContext, AttachmentListContext, AttachmentPreviewListContext, AvatarContext, ChannelActionsContext, ChannelHeaderInfoContext, ChannelPreviewContext, ChannelPreviewInfoContext, CommandAutocompleteListItemContext, CustomAttachmentListContext, CustomAttachmentPreviewListContext, CustomAttachmentUploadContext, CustomMetadataContext, DateSeparatorContext, DefaultStreamChatGenerics, DeliveredStatusContext, EmojiPickerContext, IconContext, MentionAutcompleteListItemContext, MentionTemplateContext, MessageActionBoxItemContext, MessageActionsBoxContext, MessageContext, MessageReactionsContext, MessageReactionsSelectorContext, MessageTextContext, ModalContext, NotificationContext, ReadStatusContext, SendingStatusContext, SystemMessageContext, ThreadHeaderContext, ThreadReplyButtonContext, TypingIndicatorContext, UnreadMessagesIndicatorContext, UnreadMessagesNotificationContext } from './types';
|
|
3
|
+
import { AttachmentContext, AttachmentListContext, AttachmentPreviewListContext, AvatarContext, ChannelActionsContext, ChannelHeaderInfoContext, ChannelPreviewContext, ChannelPreviewInfoContext, CommandAutocompleteListItemContext, CustomAttachmentListContext, CustomAttachmentPreviewListContext, CustomAttachmentUploadContext, CustomMetadataContext, DateSeparatorContext, DefaultStreamChatGenerics, DeliveredStatusContext, EmojiPickerContext, IconContext, MentionAutcompleteListItemContext, MentionTemplateContext, MessageActionBoxItemContext, MessageActionsBoxContext, MessageBlockedContext, MessageContext, MessageReactionsContext, MessageReactionsSelectorContext, MessageTextContext, ModalContext, NotificationContext, ReadStatusContext, SendingStatusContext, SystemMessageContext, ThreadHeaderContext, ThreadReplyButtonContext, TypingIndicatorContext, UnreadMessagesIndicatorContext, UnreadMessagesNotificationContext } from './types';
|
|
4
4
|
import * as i0 from "@angular/core";
|
|
5
5
|
/**
|
|
6
6
|
* A central location for registering your custom templates to override parts of the chat application.
|
|
@@ -79,7 +79,7 @@ export declare class CustomTemplatesService<T extends DefaultStreamChatGenerics
|
|
|
79
79
|
*/
|
|
80
80
|
messageActionsBoxTemplate$: BehaviorSubject<TemplateRef<MessageActionsBoxContext<DefaultStreamChatGenerics>> | undefined>;
|
|
81
81
|
/**
|
|
82
|
-
* The template used for displaying an item in the [message actions box](/chat/docs/
|
|
82
|
+
* The template used for displaying an item in the [message actions box](/chat/docs/angular/components/MessageActionsBoxComponent/)
|
|
83
83
|
*
|
|
84
84
|
*/
|
|
85
85
|
messageActionsBoxItemTemplate$: BehaviorSubject<TemplateRef<MessageActionBoxItemContext<DefaultStreamChatGenerics>> | undefined>;
|
|
@@ -231,6 +231,12 @@ export declare class CustomTemplatesService<T extends DefaultStreamChatGenerics
|
|
|
231
231
|
* Template to display the text content inside the [message component](/chat/docs/sdk/angular/components/MessageComponent/). The default component is [stream-message-text](/chat/docs/sdk/angular/components/MessageTextComponent/)
|
|
232
232
|
*/
|
|
233
233
|
messageTextTemplate$: BehaviorSubject<TemplateRef<MessageTextContext> | undefined>;
|
|
234
|
+
/**
|
|
235
|
+
* The template used to display blocked messages that have been removed by moderation policies instead of the default [message blocked component](/chat/docs/sdk/angular/components/MessageBlockedComponent/)
|
|
236
|
+
*
|
|
237
|
+
* The template has no effect if you're using a custom `messageTemplate$`
|
|
238
|
+
*/
|
|
239
|
+
messageBlockedTemplate$: BehaviorSubject<TemplateRef<MessageBlockedContext> | undefined>;
|
|
234
240
|
constructor();
|
|
235
241
|
static ɵfac: i0.ɵɵFactoryDeclaration<CustomTemplatesService<any>, never>;
|
|
236
242
|
static ɵprov: i0.ɵɵInjectableDeclaration<CustomTemplatesService<any>>;
|
|
@@ -2,7 +2,7 @@ import { OnChanges, SimpleChanges, OnDestroy, OnInit, ChangeDetectorRef, AfterVi
|
|
|
2
2
|
import { UserResponse } from 'stream-chat';
|
|
3
3
|
import { ChannelService } from '../channel.service';
|
|
4
4
|
import { ChatClientService } from '../chat-client.service';
|
|
5
|
-
import { AttachmentListContext, MessageActionsBoxContext, MessageReactionsContext, DefaultStreamChatGenerics, StreamMessage, DeliveredStatusContext, SendingStatusContext, ReadStatusContext, SystemMessageContext, CustomMetadataContext, MessageTextContext } from '../types';
|
|
5
|
+
import { AttachmentListContext, MessageActionsBoxContext, MessageReactionsContext, DefaultStreamChatGenerics, StreamMessage, DeliveredStatusContext, SendingStatusContext, ReadStatusContext, SystemMessageContext, CustomMetadataContext, MessageTextContext, MessageBlockedContext } from '../types';
|
|
6
6
|
import { Observable } from 'rxjs';
|
|
7
7
|
import { CustomTemplatesService } from '../custom-templates.service';
|
|
8
8
|
import { DateParserService } from '../date-parser.service';
|
|
@@ -110,6 +110,7 @@ export declare class MessageComponent implements OnInit, OnChanges, OnDestroy, A
|
|
|
110
110
|
getSendingStatusContext(): SendingStatusContext;
|
|
111
111
|
getReadStatusContext(): ReadStatusContext;
|
|
112
112
|
getMessageMetadataContext(): CustomMetadataContext;
|
|
113
|
+
getMessageBlockedContext(): MessageBlockedContext;
|
|
113
114
|
jumpToMessage(messageId: string, parentMessageId?: string): void;
|
|
114
115
|
openMessageBouncePrompt(): void;
|
|
115
116
|
displayTranslatedMessage(): void;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { StreamMessage } from '../types';
|
|
2
|
+
import * as i0 from "@angular/core";
|
|
3
|
+
/**
|
|
4
|
+
* The `MessageBlocked` component displays a message that has been blocked by moderation policies.
|
|
5
|
+
*/
|
|
6
|
+
export declare class MessageBlockedComponent {
|
|
7
|
+
message: StreamMessage | undefined;
|
|
8
|
+
isMyMessage: boolean;
|
|
9
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<MessageBlockedComponent, never>;
|
|
10
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MessageBlockedComponent, "stream-message-blocked", never, { "message": "message"; "isMyMessage": "isMyMessage"; }, {}, never, never, false, never>;
|
|
11
|
+
}
|
|
@@ -20,14 +20,15 @@ import * as i18 from "./message-reactions-selector/message-reactions-selector.co
|
|
|
20
20
|
import * as i19 from "./user-list/user-list.component";
|
|
21
21
|
import * as i20 from "./paginated-list/paginated-list.component";
|
|
22
22
|
import * as i21 from "./message-text/message-text.component";
|
|
23
|
-
import * as i22 from "
|
|
24
|
-
import * as i23 from "
|
|
25
|
-
import * as i24 from "
|
|
26
|
-
import * as i25 from "
|
|
27
|
-
import * as i26 from "
|
|
28
|
-
import * as i27 from "./
|
|
23
|
+
import * as i22 from "./message-blocked/message-blocked.component";
|
|
24
|
+
import * as i23 from "@angular/common";
|
|
25
|
+
import * as i24 from "ngx-float-ui";
|
|
26
|
+
import * as i25 from "./stream-avatar.module";
|
|
27
|
+
import * as i26 from "@ngx-translate/core";
|
|
28
|
+
import * as i27 from "./voice-recording/voice-recording.module";
|
|
29
|
+
import * as i28 from "./icon/icon.module";
|
|
29
30
|
export declare class StreamChatModule {
|
|
30
31
|
static ɵfac: i0.ɵɵFactoryDeclaration<StreamChatModule, never>;
|
|
31
|
-
static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.MessageActionsBoxComponent, typeof i9.AttachmentListComponent, typeof i10.MessageReactionsComponent, typeof i11.NotificationComponent, typeof i12.NotificationListComponent, typeof i13.AttachmentPreviewListComponent, typeof i14.ModalComponent, typeof i15.TextareaDirective, typeof i16.ThreadComponent, typeof i17.MessageBouncePromptComponent, typeof i18.MessageReactionsSelectorComponent, typeof i19.UserListComponent, typeof i20.PaginatedListComponent, typeof i21.MessageTextComponent], [typeof
|
|
32
|
+
static ɵmod: i0.ɵɵNgModuleDeclaration<StreamChatModule, [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.MessageActionsBoxComponent, typeof i9.AttachmentListComponent, typeof i10.MessageReactionsComponent, typeof i11.NotificationComponent, typeof i12.NotificationListComponent, typeof i13.AttachmentPreviewListComponent, typeof i14.ModalComponent, typeof i15.TextareaDirective, typeof i16.ThreadComponent, typeof i17.MessageBouncePromptComponent, typeof i18.MessageReactionsSelectorComponent, typeof i19.UserListComponent, typeof i20.PaginatedListComponent, typeof i21.MessageTextComponent, typeof i22.MessageBlockedComponent], [typeof i23.CommonModule, typeof i24.NgxFloatUiModule, typeof i25.StreamAvatarModule, typeof i26.TranslateModule, typeof i27.VoiceRecordingModule, typeof i28.IconModule], [typeof i1.ChannelComponent, typeof i2.ChannelHeaderComponent, typeof i3.ChannelListComponent, typeof i4.ChannelPreviewComponent, typeof i5.MessageComponent, typeof i6.MessageInputComponent, typeof i7.MessageListComponent, typeof i8.MessageActionsBoxComponent, typeof i9.AttachmentListComponent, typeof i10.MessageReactionsComponent, typeof i11.NotificationComponent, typeof i12.NotificationListComponent, typeof i13.AttachmentPreviewListComponent, typeof i14.ModalComponent, typeof i25.StreamAvatarModule, typeof i16.ThreadComponent, typeof i17.MessageBouncePromptComponent, typeof i27.VoiceRecordingModule, typeof i18.MessageReactionsSelectorComponent, typeof i19.UserListComponent, typeof i20.PaginatedListComponent, typeof i28.IconModule, typeof i21.MessageTextComponent, typeof i22.MessageBlockedComponent]>;
|
|
32
33
|
static ɵinj: i0.ɵɵInjectorDeclaration<StreamChatModule>;
|
|
33
34
|
}
|
package/lib/types.d.ts
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "stream-chat-angular",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.14.0",
|
|
4
4
|
"description": "Angular components to create chat conversations or livestream style chat",
|
|
5
5
|
"author": "GetStream",
|
|
6
6
|
"homepage": "https://getstream.io/chat/",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
"@breezystack/lamejs": "^1.2.7",
|
|
34
34
|
"@ngx-translate/core": "^14.0.0 || ^15.0.0",
|
|
35
35
|
"rxjs": "^7.4.0",
|
|
36
|
-
"stream-chat": "^8.
|
|
36
|
+
"stream-chat": "^8.60.0"
|
|
37
37
|
},
|
|
38
38
|
"peerDependenciesMeta": {
|
|
39
39
|
"@breezystack/lamejs": {
|
package/public-api.d.ts
CHANGED
|
@@ -16,6 +16,7 @@ export * from './lib/channel-header/channel-header.component';
|
|
|
16
16
|
export * from './lib/channel-preview/channel-preview.component';
|
|
17
17
|
export * from './lib/channel-list/channel-list.component';
|
|
18
18
|
export * from './lib/message/message.component';
|
|
19
|
+
export * from './lib/message-blocked/message-blocked.component';
|
|
19
20
|
export * from './lib/parse-date';
|
|
20
21
|
export * from './lib/list-users';
|
|
21
22
|
export * from './lib/message-input/message-input.component';
|
package/src/assets/i18n/en.ts
CHANGED
|
@@ -131,5 +131,7 @@ export const en = {
|
|
|
131
131
|
'You currently have {{count}} attachments, the maximum is {{max}}':
|
|
132
132
|
'You currently have {{count}} attachments, the maximum is {{max}}',
|
|
133
133
|
'and others': 'and others',
|
|
134
|
+
'Message was blocked by moderation policies':
|
|
135
|
+
'Message was blocked by moderation policies',
|
|
134
136
|
},
|
|
135
137
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.emoji-mart,.emoji-mart *{box-sizing:border-box;line-height:1.15}.emoji-mart{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;font-size:16px;display:inline-block;color:#222427;border:1px solid #d9d9d9;border-radius:5px;background:#fff}.emoji-mart .emoji-mart-emoji{padding:6px}.emoji-mart-bar{border:0 solid #d9d9d9}.emoji-mart-bar:first-child{border-bottom-width:1px;border-top-left-radius:5px;border-top-right-radius:5px}.emoji-mart-bar:last-child{border-top-width:1px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.emoji-mart-anchors{display:flex;flex-direction:row;justify-content:space-between;padding:0 6px;line-height:0}.emoji-mart-anchor{position:relative;display:block;flex:1 1 auto;color:#858585;text-align:center;padding:12px 4px;overflow:hidden;transition:color .1s ease-out;margin:0;box-shadow:none;background:none;border:none}.emoji-mart-anchor:focus{outline:0}.emoji-mart-anchor:hover,.emoji-mart-anchor:focus,.emoji-mart-anchor-selected{color:#464646}.emoji-mart-anchor-selected .emoji-mart-anchor-bar{bottom:0}.emoji-mart-anchor-bar{position:absolute;bottom:-3px;left:0;width:100%;height:3px;background-color:#464646}.emoji-mart-anchors i{display:inline-block;width:100%;max-width:22px}.emoji-mart-anchors svg,.emoji-mart-anchors img{fill:currentColor;height:18px;width:18px}.emoji-mart-scroll{overflow-y:scroll;overflow-x:hidden;height:270px;padding:0 6px 6px;will-change:transform}.emoji-mart-search{margin-top:6px;padding:0 6px;position:relative}.emoji-mart-search input{font-size:16px;display:block;width:100%;padding:5px 25px 6px 10px;border-radius:5px;border:1px solid #d9d9d9;outline:0}.emoji-mart-search input,.emoji-mart-search input::-webkit-search-decoration,.emoji-mart-search input::-webkit-search-cancel-button,.emoji-mart-search input::-webkit-search-results-button,.emoji-mart-search input::-webkit-search-results-decoration{-webkit-appearance:none}.emoji-mart-search-icon{position:absolute;top:7px;right:11px;z-index:2;padding:2px 5px 1px;border:none;background:none}.emoji-mart-category .emoji-mart-emoji span{z-index:1;position:relative;text-align:center;cursor:default}.emoji-mart-category .emoji-mart-emoji:hover::before{z-index:0;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#f4f4f4;border-radius:100%}.emoji-mart-category-label{z-index:2;position:relative;position:-webkit-sticky;position:sticky;top:0}.emoji-mart-category-label span{display:block;width:100%;font-weight:500;padding:5px 6px;background-color:#fff;background-color:
|
|
1
|
+
.emoji-mart,.emoji-mart *{box-sizing:border-box;line-height:1.15}.emoji-mart{font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif;font-size:16px;display:inline-block;color:#222427;border:1px solid #d9d9d9;border-radius:5px;background:#fff}.emoji-mart .emoji-mart-emoji{padding:6px}.emoji-mart-bar{border:0 solid #d9d9d9}.emoji-mart-bar:first-child{border-bottom-width:1px;border-top-left-radius:5px;border-top-right-radius:5px}.emoji-mart-bar:last-child{border-top-width:1px;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.emoji-mart-anchors{display:flex;flex-direction:row;justify-content:space-between;padding:0 6px;line-height:0}.emoji-mart-anchor{position:relative;display:block;flex:1 1 auto;color:#858585;text-align:center;padding:12px 4px;overflow:hidden;transition:color .1s ease-out;margin:0;box-shadow:none;background:none;border:none}.emoji-mart-anchor:focus{outline:0}.emoji-mart-anchor:hover,.emoji-mart-anchor:focus,.emoji-mart-anchor-selected{color:#464646}.emoji-mart-anchor-selected .emoji-mart-anchor-bar{bottom:0}.emoji-mart-anchor-bar{position:absolute;bottom:-3px;left:0;width:100%;height:3px;background-color:#464646}.emoji-mart-anchors i{display:inline-block;width:100%;max-width:22px}.emoji-mart-anchors svg,.emoji-mart-anchors img{fill:currentColor;height:18px;width:18px}.emoji-mart-scroll{overflow-y:scroll;overflow-x:hidden;height:270px;padding:0 6px 6px;will-change:transform}.emoji-mart-search{margin-top:6px;padding:0 6px;position:relative}.emoji-mart-search input{font-size:16px;display:block;width:100%;padding:5px 25px 6px 10px;border-radius:5px;border:1px solid #d9d9d9;outline:0}.emoji-mart-search input,.emoji-mart-search input::-webkit-search-decoration,.emoji-mart-search input::-webkit-search-cancel-button,.emoji-mart-search input::-webkit-search-results-button,.emoji-mart-search input::-webkit-search-results-decoration{-webkit-appearance:none}.emoji-mart-search-icon{position:absolute;top:7px;right:11px;z-index:2;padding:2px 5px 1px;border:none;background:none}.emoji-mart-category .emoji-mart-emoji span{z-index:1;position:relative;text-align:center;cursor:default}.emoji-mart-category .emoji-mart-emoji:hover::before{z-index:0;content:"";position:absolute;top:0;left:0;width:100%;height:100%;background-color:#f4f4f4;border-radius:100%}.emoji-mart-category-label{z-index:2;position:relative;position:-webkit-sticky;position:sticky;top:0}.emoji-mart-category-label span{display:block;width:100%;font-weight:500;padding:5px 6px;background-color:#fff;background-color:hsla(0,0%,100%,.95)}.emoji-mart-category-list{margin:0;padding:0}.emoji-mart-category-list li{list-style:none;margin:0;padding:0;display:inline-block}.emoji-mart-emoji{position:relative;display:inline-block;font-size:0;margin:0;padding:0;border:none;background:none;box-shadow:none}.emoji-mart-emoji-native{font-family:"Segoe UI Emoji","Segoe UI Symbol","Segoe UI","Apple Color Emoji","Twemoji Mozilla","Noto Color Emoji","Android Emoji"}.emoji-mart-no-results{font-size:14px;text-align:center;padding-top:70px;color:#858585}.emoji-mart-no-results-img{display:block;margin-left:auto;margin-right:auto;width:50%}.emoji-mart-no-results .emoji-mart-category-label{display:none}.emoji-mart-no-results .emoji-mart-no-results-label{margin-top:.2em}.emoji-mart-no-results .emoji-mart-emoji:hover::before{content:none}.emoji-mart-preview{position:relative;height:70px}.emoji-mart-preview-emoji,.emoji-mart-preview-data,.emoji-mart-preview-skins{position:absolute;top:50%;transform:translateY(-50%)}.emoji-mart-preview-emoji{left:12px}.emoji-mart-preview-data{left:68px;right:12px;word-break:break-all}.emoji-mart-preview-skins{right:30px;text-align:right}.emoji-mart-preview-skins.custom{right:10px;text-align:right}.emoji-mart-preview-name{font-size:14px}.emoji-mart-preview-shortname{font-size:12px;color:#888}.emoji-mart-preview-shortname+.emoji-mart-preview-shortname,.emoji-mart-preview-shortname+.emoji-mart-preview-emoticon,.emoji-mart-preview-emoticon+.emoji-mart-preview-emoticon{margin-left:.5em}.emoji-mart-preview-emoticon{font-size:11px;color:#bbb}.emoji-mart-title span{display:inline-block;vertical-align:middle}.emoji-mart-title .emoji-mart-emoji{padding:0}.emoji-mart-title-label{color:#999a9c;font-size:26px;font-weight:300}.emoji-mart-skin-swatches{font-size:0;padding:2px 0;border:1px solid #d9d9d9;border-radius:12px;background-color:#fff}.emoji-mart-skin-swatches.custom{font-size:0;border:none;background-color:#fff}.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch{width:16px;padding:0 2px}.emoji-mart-skin-swatches.opened .emoji-mart-skin-swatch.selected::after{opacity:.75}.emoji-mart-skin-swatch{display:inline-block;width:0;vertical-align:middle;transition-property:width,padding;transition-duration:.125s;transition-timing-function:ease-out}.emoji-mart-skin-swatch:nth-child(1){transition-delay:0s}.emoji-mart-skin-swatch:nth-child(2){transition-delay:.03s}.emoji-mart-skin-swatch:nth-child(3){transition-delay:.06s}.emoji-mart-skin-swatch:nth-child(4){transition-delay:.09s}.emoji-mart-skin-swatch:nth-child(5){transition-delay:.12s}.emoji-mart-skin-swatch:nth-child(6){transition-delay:.15s}.emoji-mart-skin-swatch.selected{position:relative;width:16px;padding:0 2px}.emoji-mart-skin-swatch.selected::after{content:"";position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;background-color:#fff;border-radius:100%;pointer-events:none;opacity:0;transition:opacity .2s ease-out}.emoji-mart-skin-swatch.custom{display:inline-block;width:0;height:38px;overflow:hidden;vertical-align:middle;transition-property:width,height;transition-duration:.125s;transition-timing-function:ease-out;cursor:default}.emoji-mart-skin-swatch.custom.selected{position:relative;width:36px;height:38px;padding:0 2px 0 0}.emoji-mart-skin-swatch.custom.selected::after{content:"";width:0;height:0}.emoji-mart-skin-swatches.custom .emoji-mart-skin-swatch.custom:hover{background-color:#f4f4f4;border-radius:10%}.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom{width:36px;height:38px;padding:0 2px 0 0}.emoji-mart-skin-swatches.custom.opened .emoji-mart-skin-swatch.custom.selected::after{opacity:.75}.emoji-mart-skin-text.opened{display:inline-block;vertical-align:middle;text-align:left;color:#888;font-size:11px;padding:5px 2px;width:95px;height:40px;border-radius:10%;background-color:#fff}.emoji-mart-skin{display:inline-block;width:100%;padding-top:100%;max-width:12px;border-radius:100%}.emoji-mart-skin-tone-1{background-color:#ffc93a}.emoji-mart-skin-tone-2{background-color:#fadcbc}.emoji-mart-skin-tone-3{background-color:#e0bb95}.emoji-mart-skin-tone-4{background-color:#bf8f68}.emoji-mart-skin-tone-5{background-color:#9b643d}.emoji-mart-skin-tone-6{background-color:#594539}.emoji-mart-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.emoji-mart-dark{color:#fff;border-color:#555453;background-color:#222}.emoji-mart-dark .emoji-mart-bar{border-color:#555453}.emoji-mart-dark .emoji-mart-search input{color:#fff;border-color:#555453;background-color:#2f2f2f}.emoji-mart-dark .emoji-mart-search-icon svg{fill:#fff}.emoji-mart-dark .emoji-mart-category .emoji-mart-emoji:hover::before{background-color:#444}.emoji-mart-dark .emoji-mart-category-label span{background-color:#222;color:#fff}.emoji-mart-dark .emoji-mart-skin-swatches{border-color:#555453;background-color:#222}.emoji-mart-dark .emoji-mart-anchor:hover,.emoji-mart-dark .emoji-mart-anchor:focus,.emoji-mart-dark .emoji-mart-anchor-selected{color:#bfbfbf}
|