stream-chat-angular 4.66.3 → 4.66.5

package/src/assets/styles/v2/scss/Message/Message-layout.scss

@@ -29,6 +29,10 @@
   .str-chat__message-bubble {
     max-width: var(--str-chat__message-max-width);
   }
+
+  .str-chat__message-options {
+    --str-chat-icon-height: calc(var(--str-chat__message-options-button-size) * 0.7);
+  }
 }
 
 .str-chat__message.str-chat__message--has-attachment {
@@ -76,7 +80,7 @@
       '. metadata';
     column-gap: var(--str-chat__spacing-2);
     grid-template-columns: auto 1fr;
-    justify-items: start;
+    justify-items: flex-start;
   }
 
   &.str-chat__message--me {
@@ -120,7 +124,7 @@
 
     .str-chat__message-options {
       grid-area: options;
-      align-items: start;
+      align-items: flex-start;
       justify-content: flex-end;
       flex-direction: row-reverse;
       width: calc(3 * var(--str-chat__message-options-button-size));
@@ -218,6 +222,7 @@
   }
 
   .str-chat__message-status {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15);
     @include utils.flex-row-center;
     column-gap: var(--str-chat__spacing-0_5);
     position: relative;
@@ -453,6 +458,7 @@
 }
 
 .str-chat__unread-messages-notification {
+  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
   position: absolute;
   top: 0.75rem;
   z-index: 2;

package/src/assets/styles/v2/scss/Message/Message-theme.scss

@@ -220,12 +220,15 @@
   }
 
   .str-chat__message-options {
+    --str-chat-icon-color: var(--str-chat__message-options-color);
+
     .str-chat__message-actions-box-button,
     .str-chat__message-reply-in-thread-button,
     .str-chat__message-reactions-button {
       // remove default button styles (React SDK uses button compared to div in Angular SDK)
       @include utils.button-reset;
       border-radius: var(--str-chat__message-options-border-radius);
+      color: var(--str-chat__message-options-color);
 
       .str-chat__message-action-icon path {
         fill: var(--str-chat__message-options-color);
@@ -272,6 +275,7 @@
   }
 
   .str-chat__message-status {
+    --str-chat-icon-color: var(--str-chat__message-status-color);
     color: var(--str-chat__message-status-color);
     font: var(--str-chat__body-text);
 
@@ -297,6 +301,7 @@
   }
 
   .str-chat__message-error-icon {
+    --str-chat-icon-color: var(--str-chat__message-error-message-color);
     /* stylelint-disable-next-line selector-max-id */
     svg #background {
       fill: var(--str-chat__message-error-message-color);
@@ -393,6 +398,7 @@
 }
 
 .str-chat__unread-messages-notification {
+  --str-chat-icon-color: var(--str-chat__on-primary-color);
   background-color: var(--str-chat__text-low-emphasis-color);
   border-radius: 1.125rem;
 

package/src/assets/styles/v2/scss/MessageInput/MessageInput-layout.scss

@@ -2,6 +2,7 @@
 
 .str-chat__message-input {
   $send-button-size: calc(var(--str-chat__spacing-px) * 45);
+  $start-audio-recording-button-size: calc(var(--str-chat__spacing-px) * 40);
 
   @include utils.flex-col-center;
   width: 100%;
@@ -46,6 +47,7 @@
     justify-content: center;
 
     .str-chat__file-input-container {
+      --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
       @include utils.flex-row-center;
       width: calc(var(--str-chat__spacing-px) * 45);
       height: calc(var(--str-chat__spacing-px) * 45);
@@ -132,6 +134,7 @@
   }
 
   .str-chat__send-button {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 32);
     @include utils.flex-row-center;
     cursor: pointer;
     padding: 0;
@@ -145,6 +148,19 @@
     }
   }
 
+  .str-chat__start-recording-audio-button {
+    @include utils.flex-row-center;
+    cursor: pointer;
+    padding: 0;
+    width: $start-audio-recording-button-size;
+    height: $start-audio-recording-button-size;
+    min-width: $start-audio-recording-button-size;
+
+    svg {
+      height: calc(var(--str-chat__spacing-px) * 25);
+    }
+  }
+
   .str-chat__message-input-cooldown {
     @include utils.flex-row-center;
     margin-inline-start: var(--str-chat__spacing-2);
@@ -161,6 +177,21 @@
   .str-chat__quoted-message-preview {
     padding: var(--str-chat__spacing-2);
   }
+
+  .str-chat__recording-permission-denied-notification {
+    position: absolute;
+    left: 0.5rem;
+    max-width: 100%;
+    bottom: 100%;
+    padding: 1rem;
+    margin-inline: 0.5rem;
+    z-index: 2;
+
+    .str-chat__recording-permission-denied-notification__dismiss-button-container {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
 }
 
 .str-chat__message-input-angular-host {
@@ -179,7 +210,8 @@
   flex-grow: initial;
 }
 
-[dir='rtl'] .str-chat__send-button {
+[dir='rtl'] .str-chat__send-button,
+[dir='rtl'] .str-chat__start-recording-audio-button {
   svg {
     transform: scale(-1, 1);
   }

package/src/assets/styles/v2/scss/MessageInput/MessageInput-theme.scss

@@ -86,7 +86,37 @@
   --str-chat__message-send-disabled-color: var(--str-chat__disabled-color);
 
   /* The background color of the send button in disabled state */
-  --str-chat__message-send-disabled-background-color: transparent;
+  --str-chat__message-send-disabled-background-color: var(--str-chat__disabled-color);
+
+  /* The border radius used for the borders of the audio recording button */
+  --str-chat__start-recording-audio-button-border-radius: var(--str-chat__border-radius-circle);
+
+  /* The text/icon color of the audio recording button */
+  --str-chat__start-recording-audio-button-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color of the audio recording button */
+  --str-chat__start-recording-audio-button-background-color: transparent;
+
+  /* Top border of the audio recording button */
+  --str-chat__start-recording-audio-button-border-block-start: 0;
+
+  /* Bottom border of the audio recording button */
+  --str-chat__start-recording-audio-button-border-block-end: 0;
+
+  /* Left (right in RTL layout) border of the audio recording button */
+  --str-chat__start-recording-audio-button-border-inline-start: 0;
+
+  /* Right (left in RTL layout) border of the audio recording button */
+  --str-chat__start-recording-audio-button-border-inline-end: 0;
+
+  /* Box shadow applied to the audio recording button */
+  --str-chat__start-recording-audio-button-box-shadow: none;
+
+  /* The color of the audio recording button in disabled state */
+  --str-chat__start-recording-audio-button-disabled-color: var(--str-chat__disabled-color);
+
+  /* The background color of the audio recording button in disabled state */
+  --str-chat__start-recording-audio-button-disabled-background-color: transparent;
 
   /* The border radius used for the borders of the tool buttons of the message input (such as attachment upload button) */
   --str-chat__message-input-tools-border-radius: var(--str-chat__border-radius-circle);
@@ -151,6 +181,7 @@
   }
 
   .str-chat__file-input-container {
+    --str-chat-icon-color: var(--str-chat__message-input-tools-color);
     @include utils.component-layer-overrides('message-input-tools');
 
     svg path {
@@ -179,6 +210,7 @@
   }
 
   .str-chat__send-button {
+    --str-chat-icon-color: var(--str-chat__message-send-color);
     @include utils.component-layer-overrides('message-send');
 
     svg path {
@@ -186,7 +218,8 @@
     }
 
     &:disabled {
-      background-color: var(--str-chat__message-send-disabled-background-color);
+      --str-chat-icon-color: var(--str-chat__message-send-disabled-color);
+      background-color: transparent;
 
       svg path {
         fill: var(--str-chat__message-send-disabled-color);
@@ -194,6 +227,14 @@
     }
   }
 
+  .str-chat__start-recording-audio-button {
+    @include utils.component-layer-overrides('start-recording-audio-button');
+
+    &:disabled {
+      background-color: var(--str-chat__message-send-disabled-background-color);
+    }
+  }
+
   .str-chat__message-input-cooldown {
     @include utils.component-layer-overrides('cooldown');
     font: var(--str-chat__subtitle-medium-text);
@@ -218,4 +259,26 @@
       }
     }
   }
+
+  .str-chat__recording-permission-denied-notification {
+    background-color: var(--str-chat__text-color);
+    border-radius: var(--str-chat__border-radius-md);
+    color: var(--str-chat__background-color);
+
+    .str-chat__recording-permission-denied-notification__heading,
+    .str-chat__recording-permission-denied-notification__dismiss-button {
+      font: var(--str-chat__subtitle2-medium-text);
+    }
+
+    .str-chat__recording-permission-denied-notification__message {
+      font: var(--str-chat__subtitle-text);
+    }
+
+    .str-chat__recording-permission-denied-notification__dismiss-button {
+      @include utils.button-reset;
+      color: var(--str-chat__background-color);
+      cursor: pointer;
+      text-transform: uppercase;
+    }
+  }
 }

package/src/assets/styles/v2/scss/MessageList/MessageList-theme.scss

@@ -91,6 +91,8 @@
 }
 
 .str-chat__jump-to-latest-message {
+  --str-chat-icon-color: var(--str-chat__jump-to-latest-message-unread-count-background-color);
+
   .str-chat__circle-fab {
     @include utils.component-layer-overrides('jump-to-latest-message');
     @include utils.circle-fab-overrides('jump-to-latest-message');

package/src/assets/styles/v2/scss/Modal/Modal-layout.scss

@@ -18,6 +18,7 @@
   }
 
   .str-chat__modal__close-button {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 28);
     @include utils.flex-row-center;
     padding: var(--str-chat__spacing-2);
     position: absolute;

package/src/assets/styles/v2/scss/Modal/Modal-theme.scss

@@ -47,8 +47,14 @@
   }
 
   .str-chat__modal__close-button {
+    --str-chat-icon-color: var(--str-chat__modal-close-icon-color);
     @include utils.button-reset;
 
+    .str-chat__icon {
+      background-color: var(--str-chat__modal-close-icon-background);
+      border-radius: 999px;
+    }
+
     svg {
       path {
         fill: var(--str-chat__modal-close-icon-color);

package/src/assets/styles/v2/scss/_base.scss

@@ -1,13 +1,14 @@
 .str-chat {
   box-sizing: border-box;
+  font-family: var(--str-chat__font-family);
 
   * {
-    font-family: var(--str-chat__font-family);
     box-sizing: border-box;
   }
 
-  // Overriding styles of ngx-popperjs
-  .ngxp__container {
+  // Overriding styles of ngx-popperjs/ngx-float-ui
+  .ngxp__container,
+  .float-ui-container {
     z-index: 1;
     padding: 0 !important;
     box-shadow: none !important;

package/src/assets/styles/v2/scss/_emoji-replacement.scss

@@ -1,5 +1,7 @@
-/* declare a font faces for our Emoji Replacement font, based on the default font used by Stream Chat React */
-$assetsPath: '../../assets' !default;
+@use 'variables';
+
+$assetsPath: variables.$assetsPath !default;
+
 $emoji-flag-unicode-range: U+1F1E6-1F1FF;
 
 /* png based woff for most browsers */

package/src/assets/styles/v2/scss/_icons.scss

@@ -1,3 +1,25 @@
+@use 'variables';
+
 .str-chat {
-  --str-chat__image-fallback-icon: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgY2xhc3M9InN0ci1jaGF0X19pbWFnZS1mYWxsYmFja19faWNvbiIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTYgMnYxNEgyVjJoMTRabTAtMkgyQy45IDAgMCAuOSAwIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlYyYzAtMS4xLS45LTItMi0yWm0tNC44NiA4Ljg2LTMgMy44N0w2IDEwLjE0IDMgMTRoMTJsLTMuODYtNS4xNFoiLz48L3N2Zz4=");
-}
+  --str-chat__image-fallback-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgY2xhc3M9InN0ci1jaGF0X19pbWFnZS1mYWxsYmFja19faWNvbiIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTYgMnYxNEgyVjJoMTRabTAtMkgyQy45IDAgMCAuOSAwIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlYyYzAtMS4xLS45LTItMi0yWm0tNC44NiA4Ljg2LTMgMy44N0w2IDEwLjE0IDMgMTRoMTJsLTMuODYtNS4xNFoiLz48L3N2Zz4=');
+}
+
+@font-face {
+  font-family: 'stream-chat-icons';
+  src: url('#{variables.$assetsPath}/icons/stream-chat-icons.eot');
+  src: url('#{variables.$assetsPath}/icons/stream-chat-icons.eot#iefix') format('embedded-opentype'),
+    url('#{variables.$assetsPath}/icons/stream-chat-icons.woff') format('woff2'),
+    url('#{variables.$assetsPath}/icons/stream-chat-icons.woff') format('woff'),
+    url('#{variables.$assetsPath}/icons/stream-chat-icons.ttf') format('truetype'),
+    url('#{variables.$assetsPath}/icons/stream-chat-icons.svg#stream-chat-icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+@media screen and (-webkit-min-device-pixel-ratio: 0) {
+  @font-face {
+    font-family: 'stream-chat-icons';
+    src: url('#{variables.$assetsPath}/icons/stream-chat-icons.svg#stream-chat-icons') format('svg');
+  }
+}

package/src/assets/styles/v2/scss/_variables.scss

@@ -0,0 +1,2 @@
+/* declare asset path, useful if you want to create your own style bundle */
+$assetsPath: '../../assets' !default;

package/src/assets/styles/v2/scss/index.layout.scss

@@ -6,6 +6,7 @@
 @use 'AttachmentList/AttachmentList-layout';
 @use 'AttachmentPreviewList/AttachmentPreviewList-layout';
 @use 'Autocomplete/Autocomplete-layout';
+@use 'AudioRecorder/AudioRecorder-layout';
 @use 'BaseImage/BaseImage-layout';
 @use 'Channel/Channel-layout';
 @use 'ChannelHeader/ChannelHeader-layout';
@@ -16,6 +17,7 @@
 @use 'common/CircleFAButton/CircleFAButton-layout';
 @use 'EditMessageForm/EditMessageForm-layout';
 @use 'ImageCarousel/ImageCarousel-layout';
+@use 'Icon/Icon-layout';
 @use 'LinkPreview/LinkPreview-layout';
 @use 'LoadingIndicator/LoadingIndicator-layout';
 @use 'Message/Message-layout';

package/src/assets/styles/v2/scss/index.scss

@@ -9,6 +9,7 @@
 @use 'Avatar/Avatar-theme';
 @use 'AttachmentList/AttachmentList-theme';
 @use 'AttachmentPreviewList/AttachmentPreviewList-theme';
+@use 'AudioRecorder/AudioRecorder-theme';
 @use 'Autocomplete/Autocomplete-theme';
 @use 'BaseImage/BaseImage-theme';
 @use 'Channel/Channel-theme.scss';
@@ -17,6 +18,7 @@
 @use 'ChannelPreview/ChannelPreview-theme';
 @use 'ChannelSearch/ChannelSearch-theme';
 @use 'EditMessageForm/EditMessageForm-theme';
+@use 'Icon/Icon-theme';
 @use 'ImageCarousel/ImageCarousel-theme';
 @use 'LinkPreview/LinkPreview-theme';
 @use 'LoadingIndicator/LoadingIndicator-theme';

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '4.66.3';
+export const version = '4.66.5';