stream-chat-angular 4.6.0 → 4.8.0

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

@@ -39,3 +39,17 @@
     display: none;
   }
 }
+
+
+.str-chat__channel-list-react {
+  overflow: hidden;
+
+  .str-chat__channel-list-messenger-react {
+    overflow: hidden;
+    padding-bottom: var(--str-chat__spacing-2_5);
+
+    .str-chat__channel-list-messenger-react__main {
+      overflow-y: auto;
+    }
+  }
+}

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

@@ -1,71 +1,88 @@
 @use '../utils';
 
-.str-chat__channel-search-bar {
-  @include utils.flex-row-center;
-  padding: var(--str-chat__spacing-2_5);
+.str-chat__channel-search {
+  position: relative;
 
-  .str-chat__channel-search-bar-button {
-    @include utils.button-reset;
-    width: calc(var(--str-chat__spacing-px) * 40);
-    height: calc(var(--str-chat__spacing-px) * 40);
+  .str-chat__channel-search-bar {
+    @include utils.flex-row-center;
     padding: var(--str-chat__spacing-2_5);
-    cursor: pointer;
-  }
-
-  .str-chat__channel-search-input--wrapper {
-    display: flex;
-    align-items: center;
-    flex: 1;
-    padding: var(--str-chat__spacing-2_5);
-    min-width: 0;
 
-    .str-chat__channel-search-input--icon,
-    .str-chat__channel-search-input--clear-button {
-      display: inline-flex;
-      padding: 0 var(--str-chat__spacing-2_5);
-    }
-
-    .str-chat__channel-search-input--clear-button {
+    .str-chat__channel-search-bar-button {
       @include utils.button-reset;
+      width: calc(var(--str-chat__spacing-px) * 40);
+      height: calc(var(--str-chat__spacing-px) * 40);
+      padding: var(--str-chat__spacing-2_5);
       cursor: pointer;
-
-      &:disabled {
-        cursor: default;
-      }
     }
 
-    input {
+    .str-chat__channel-search-input--wrapper {
+      display: flex;
+      align-items: center;
       flex: 1;
+      padding: var(--str-chat__spacing-2_5);
       min-width: 0;
+
+      .str-chat__channel-search-input--icon,
+      .str-chat__channel-search-input--clear-button {
+        display: inline-flex;
+        padding: 0 var(--str-chat__spacing-2_5);
+      }
+
+      .str-chat__channel-search-input--clear-button {
+        @include utils.button-reset;
+        cursor: pointer;
+
+        &:disabled {
+          cursor: default;
+        }
+      }
+
+      input {
+        flex: 1;
+        min-width: 0;
+      }
     }
   }
-}
 
-.str-chat__channel-search-results-header {
-  width: 100%;
-  padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
-}
+  .str-chat__channel-search-container-searching {
+    width: 100%;
+    padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
+  }
 
-.str-chat__channel-search-result-list {
-  .str-chat__channel-search-container-empty {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  .str-chat__channel-search-results-header {
     width: 100%;
+    padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
+  }
 
-    svg {
-      height: calc(var(--str-chat__spacing-px) * 90 + var(--str-chat__spacing-20));
-      width: calc(var(--str-chat__spacing-px) * 90);
-      padding: var(--str-chat__spacing-10) 0;
+
+  .str-chat__channel-search-result-list {
+    &.popup {
+      position: absolute;
+      left: 0;
+      right: 0;
     }
-  }
 
-  .str-chat__channel-search-result {
-    @include utils.button-reset;
-    display: flex;
-    align-items: center;
-    width: 100%;
-    column-gap: var(--str-chat__spacing-2);
-    padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
+    .str-chat__channel-search-container-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      width: 100%;
+      padding: var(--str-chat__spacing-5) var(--str-chat__spacing-4);
+
+      svg {
+        height: calc(var(--str-chat__spacing-px) * 90 + var(--str-chat__spacing-20));
+        width: calc(var(--str-chat__spacing-px) * 90);
+        padding: var(--str-chat__spacing-10) 0;
+      }
+    }
+
+    .str-chat__channel-search-result {
+      @include utils.button-reset;
+      display: flex;
+      align-items: center;
+      width: 100%;
+      column-gap: var(--str-chat__spacing-2);
+      padding: var(--str-chat__spacing-3) var(--str-chat__spacing-2);
+    }
   }
-}
+}

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

@@ -89,6 +89,25 @@
     --str-chat__secondary-surface-color
   );
 
+  --str-chat__channel-search-result-list-color: var(--str-chat__text-color);
+
+  --str-chat__channel-search-result-list-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component  */
+  --str-chat__channel-search-result-list-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-search-result-list-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-search-result-list-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-search-result-list-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__channel-search-result-list-popup-box-shadow: 0 4px 4px var(--str-chat__box-shadow-color);
+
   /* The font color used in the search results header  */
   --str-chat__channel-search-results-header-color: var(--str-chat__text-low-emphasis-color);
 
@@ -108,6 +127,25 @@
   /* Right (left in RTL layout) border of the component */
   --str-chat__channel-search-results-header-border-inline-end: none;
 
+  /* The font color used in the search results loading indicator  */
+  --str-chat__channel-search-results-loading-indicator-color: var(--str-chat__text-low-emphasis-color);
+
+  /* The background color used in the search results loading indicator  */
+  --str-chat__channel-search-results-loading-indicator-background-color: var(--str-chat__background-color);
+
+  /* Top border of the component  */
+  --str-chat__channel-search-results-loading-indicator-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__channel-search-results-loading-indicator-border-block-end: var(--str-chat__surface-color) 1px
+    solid;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__channel-search-results-loading-indicator-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__channel-search-results-loading-indicator-border-inline-end: none;
+
   /* The font color used in the empty search results indicator  */
   --str-chat__channel-search-results-empty-color: var(--str-chat__text-low-emphasis-color);
 
@@ -162,6 +200,16 @@
 }
 
 .str-chat__channel-search-result-list {
+  @include utils.component-layer-overrides('channel-search-result-list');
+
+  &.popup {
+    box-shadow: var(--str-chat__channel-search-result-list-popup-box-shadow);
+  }
+
+  .str-chat__channel-search-container-searching {
+    @include utils.component-layer-overrides('channel-search-results-loading-indicator');
+  }
+
   .str-chat__channel-search-container-empty {
     @include utils.component-layer-overrides('channel-search-results-empty');
     font: var(--str-chat__subtitle2-medium-text);

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

@@ -32,12 +32,9 @@
 
     .str-chat__thread-start {
       text-align: start;
+      padding-top: var(--str-chat__spacing-3);
     }
   }
-
-  .str-chat__parent-message-li .str-chat__thread-start {
-    padding-top: var(--str-chat__spacing-3);
-  }
 }
 
 .str-chat__jump-to-latest-message {

package/src/assets/styles/v2/scss/MessageList/VirtualizedMessageList-layout.scss

@@ -14,6 +14,15 @@
     @include utils.message-list-spacing;
   }
 
+  .str-chat__parent-message-li {
+    padding-block-end: var(--str-chat__spacing-4);
+
+    .str-chat__thread-start {
+      text-align: start;
+      padding-top: var(--str-chat__spacing-3);
+    }
+  }
+
   // conditionally showing the header displaces items when prepending.
   // a simple workaround is to make the loading indicator an overlay.
   &__loading {
@@ -42,3 +51,15 @@
     padding-block-end: var(--str-chat__spacing-0_5);
   }
 }
+
+
+.str-chat__thread--virtualized {
+  .str-chat__main-panel-inner {
+    height: 100%;
+
+    // the first message in virtualized thread has to be separated from the top by padding, not margin
+    .str-chat__virtual-list-message-wrapper:first-of-type {
+      padding-block-start: var(--str-chat__spacing-4);
+    }
+  }
+}

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

@@ -29,4 +29,13 @@
 
 .str-chat__virtual-list {
   @include utils.component-layer-overrides('virtual-list');
+
+  .str-chat__parent-message-li {
+    border-block-end: 1px solid var(--str-chat__thread-head-start-border-block-end-color);
+
+    .str-chat__thread-start {
+      color: var(--str-chat__thread-head-start-color);
+      font: var(--str-chat__subtitle-text);
+    }
+  }
 }

package/src/assets/styles/v2/scss/Notification/NotificationList-theme.scss

@@ -26,6 +26,6 @@
   --str-chat__notification-list-box-shadow: none;
 }
 
-.str-chat__list-notification-lists {
-  @include utils.component-layer-overrides('notification-list-list');
+.str-chat__list-notifications {
+  @include utils.component-layer-overrides('notification-list');
 }

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

@@ -4,6 +4,6 @@
   display: flex;
   padding: var(--str-chat__spacing-2);
   z-index: 1;
-  word-break: normal;
   max-width: calc(var(--str-chat__spacing-px) * 150);
+  width: max-content;
 }

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

@@ -186,3 +186,11 @@
 @mixin channel-preview-display-name-theme {
   font: var(--str-chat__subtitle-medium-text);
 }
+
+@mixin clamped-height-from-original-image-dimensions($max-height-css-var, $max-width-css-var) {
+  height: min(
+    var(#{$max-height-css-var}),
+    min(var(#{$max-width-css-var}, 1000000) / var(--original-width, 1000000), 1px) *
+      var(--original-height, 1000000)
+  );
+}

package/src/assets/version.ts

@@ -1 +1 @@
-export const version = '4.6.0';
+export const version = '4.8.0';