feat: Angular SDK emoji picker

Author: szuperaz

src/styles/Message.scss

@@ -370,6 +370,12 @@
       border: 1px solid var(--border);
       margin-left: 0; /* set spacing when unfocused */
 
+      // Fixes emoji display in Chrome https://bugs.chromium.org/p/chromium/issues/detail?id=596223
+      .str-chat__emoji-display-fix {
+        display: inline-block;
+        width: 20px;
+      }
+
       p {
         /* Make sure really long urls and words don't break out.
         ** https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ */

src/styles/MessageInputFlat.scss

@@ -108,6 +108,10 @@
 
   .str-chat__textarea {
     flex: 1;
+
+    &.str-chat-angular__textarea {
+      position: relative;
+    }
   }
 
   .str-chat__textarea > textarea {
@@ -142,6 +146,13 @@
     padding: 0;
     background-color: transparent;
 
+    &.str-chat-angular__emojiselect {
+      max-width: 28px;
+      top: 50%;
+      transform: translateY(-50%);
+      cursor: initial;
+    }
+
     svg {
       fill: var(--black);
       opacity: 0.5;

src/styles/ReactionList.scss

@@ -46,7 +46,8 @@
       }
     }
 
-    .emoji-mart-emoji {
+    .emoji-mart-emoji,
+    .str-chat__emoji {
       display: flex;
     }
 

src/styles/ReactionSelector.scss

@@ -143,7 +143,8 @@ button.str-chat__message-reactions-list-item {
     }
   }
 
-  .emoji-mart-emoji:hover {
+  .emoji-mart-emoji:hover,
+  .str-chat__emoji:hover {
     transition: 0.1s;
     transform: scale(1.2);
     cursor: pointer;

src/styles/SimpleReactionsList.scss

@@ -45,7 +45,8 @@
       line-height: 1;
     }
 
-    .emoji-mart-emoji {
+    .emoji-mart-emoji,
+    .str-chat__emoji {
       &:hover {
         transition: transform 0.2s ease-in-out;
         transform: scale(1.2);

src/styles/SmallMessageInput.scss

@@ -36,6 +36,13 @@
     background-color: transparent;
   }
 
+  .str-chat-angular__emojiselect {
+    width: auto;
+    height: auto;
+    left: 15px;
+    max-width: 20px;
+  }
+
   .rfu-file-upload-button {
     bottom: 9px;
     right: 26px;
@@ -95,6 +102,10 @@
     font-size: var(--sm-font);
     padding: 10px 44px 8px 8px;
 
+    &.str-chat__angular-textarea {
+      padding: 10px 35px 8px;
+    }
+
     &:focus {
       height: 36px;
     }
@@ -108,6 +119,10 @@
     font-size: var(--md-font);
   }
 
+  .str-chat-angular__textarea + .rfu-file-upload-button {
+    right: 15px;
+  }
+
   .rfu-file-upload-button {
     position: absolute;
     cursor: pointer;