stream-chat-angular 5.0.0-v5.9 → 5.1.0

package/src/assets/styles/scss/LoadingIndicator/LoadingIndicator-layout.scss

@@ -1,10 +1,19 @@
-// todo: this is a copy of src/styles/LoadingIndicator.scss - find a shared folder for it
+.str-chat {
+  /* The size of the loading indicator, only available in Angular v5+ */
+  --str-chat__loading-indicator-size: calc(var(--str-chat__spacing-px) * 15);
+}
+
 .str-chat__loading-indicator {
   display: flex;
   align-items: center;
   justify-content: center;
   animation: rotate 1s linear infinite;
 
+  svg {
+    width: var(--str-chat__loading-indicator-size);
+    height: var(--str-chat__loading-indicator-size);
+  }
+
   @-webkit-keyframes rotate {
     from {
       -webkit-transform: rotate(0deg);
@@ -37,3 +46,19 @@
     }
   }
 }
+
+stream-loading-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  .str-chat__loading-indicator {
+    width: var(--str-chat__loading-indicator-size);
+    height: var(--str-chat__loading-indicator-size);
+  }
+}
+
+.str-chat__loading-indicator-placeholder {
+  width: var(--str-chat__loading-indicator-size);
+  height: var(--str-chat__loading-indicator-size);
+}

package/src/assets/styles/scss/LoadingIndicator/LoadingIndicator-theme.scss

@@ -1,11 +1,13 @@
+.str-chat {
+  /* The color of the loading indicator */
+  --str-chat__loading-indicator-color: var(--str-chat__primary-color);
+}
+
 .str-chat__loading-indicator {
   svg {
     linearGradient {
       stop:last-child {
-        stop-color: var(
-          --str-chat__loading-indicator-color,
-          var(--str-chat__primary-color, #006cff)
-        );
+        stop-color: var(--str-chat__loading-indicator-color);
       }
     }
   }

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

@@ -1,7 +1,7 @@
 @use '../utils';
 
 .str-chat {
-  /* The width/height of the message options buttons */
+  /* The width/height of the message options button(s), for Angular SDK it's only used on desktop devices starting from version 5 */
   --str-chat__message-options-button-size: calc(var(--str-chat__spacing-px) * 26);
 
   /* The maximum allowed width of the message component */
@@ -26,9 +26,19 @@
 }
 
 .str-chat__message {
+  --str-chat-message-options-size: calc(3 * var(--str-chat__message-options-button-size));
+
+  &.str-chat__message-without-touch-support {
+    --str-chat-message-options-size: calc(1 * var(--str-chat__message-options-button-size));
+  }
+
   .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 {
@@ -123,7 +133,7 @@
       align-items: flex-start;
       justify-content: flex-end;
       flex-direction: row-reverse;
-      width: calc(3 * var(--str-chat__message-options-button-size));
+      width: var(--str-chat-message-options-size);
 
       .str-chat__message-actions-box-button,
       .str-chat__message-reply-in-thread-button,
@@ -218,6 +228,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;
@@ -282,8 +293,8 @@
 }
 
 // Message options display - default mode: they appear when .str-chat__li is hovered
-.str-chat__ul:not(.str-chat__message-options-in-bubble),
-.str-chat__virtual-list:not(.str-chat__message-options-in-bubble) {
+.str-chat__ul:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support),
+.str-chat__virtual-list:not(.str-chat__message-options-in-bubble, .str-chat__message-with-touch-support) {
   /* This rule won't be applied in browsers that don't support :has() */
   .str-chat__li:hover:not(:has(.str-chat__reaction-list:hover, .str-chat__modal--open)),
   .str-chat__li:focus-within:not(:has(.str-chat__reaction-list:focus-within, .str-chat__modal--open)) {
@@ -350,11 +361,11 @@
 }
 
 .str-chat__message--other .str-chat__message-inner {
-  margin-inline-end: calc(var(--str-chat__message-options-button-size) * 3);
+  margin-inline-end: var(--str-chat-message-options-size);
 }
 
 .str-chat__message--me .str-chat__message-inner {
-  margin-inline-start: calc(var(--str-chat__message-options-button-size) * 3);
+  margin-inline-start: var(--str-chat-message-options-size);
 }
 
 .str-chat__li--middle,
@@ -453,6 +464,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;
@@ -506,3 +518,30 @@
 .str-chat__message-text--pointer-cursor {
   cursor: pointer;
 }
+
+.str-chat__message-with-touch-support {
+  .str-chat__message-bubble {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    user-select: none;
+  }
+
+  &.str-chat__message-menu-opened {
+    .str-chat__attachments-container,
+    .str-chat__message-text-inner {
+      pointer-events: none;
+    }
+  }
+
+  .str-chat__message-inner {
+    margin-inline: 0;
+  }
+
+  .str-chat__message-options {
+    display: none;
+  }
+
+  .stream-chat-angular__image-modal-host {
+    -webkit-touch-callout: default;
+  }
+}

package/src/assets/styles/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/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/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/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/scss/MessageReactions/MessageReactionsSelector-layout.scss

@@ -6,6 +6,24 @@
   position: absolute;
   inset-block-end: 100%;
 
+  &.str-chat-angular-v5__reaction-selector {
+    margin: var(--str-chat__spacing-2);
+    position: static;
+    justify-content: flex-start;
+
+    .str-chat__message-reactions-options {
+      max-width: 100%;
+      overflow-y: hidden;
+      overflow-x: auto;
+      scrollbar-width: none;
+      padding: 0;
+
+      .str-chat__message-reactions-option {
+        flex-shrink: 0;
+      }
+    }
+  }
+
   .str-chat__message-reactions-options {
     list-style: none;
     display: flex;

package/src/assets/styles/scss/MessageReactions/MessageReactionsSelector-theme.scss

@@ -62,6 +62,11 @@
 
   /* Box shadow applied to the component */
   --str-chat__message-reactions-option-box-shadow: none;
+
+  .str-chat-angular-v5__reaction-selector {
+    --str-chat__message-reactions-options-box-shadow: none;
+    --str-chat__message-reactions-options-border-radius: 0;
+  }
 }
 
 .str-chat__reaction-selector {

package/src/assets/styles/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/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/scss/_base.scss

@@ -1,17 +1,19 @@
 .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/ngx-float-ui
-  .ngxp__container, .float-ui-container {
+  .ngxp__container,
+  .float-ui-container {
     z-index: 1;
     padding: 0 !important;
     box-shadow: none !important;
     border-color: transparent !important;
+    max-width: 100vw;
 
     .ngxp__arrow {
       display: none;

package/src/assets/styles/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/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/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/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/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 = '5.0.0-v5.9';
+export const version = '5.1.0';