stream-chat-angular 5.7.3 → 5.8.0

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

@@ -260,7 +260,7 @@
     margin: var(--str-chat__attachment-margin);
 
     .str-chat__file-icon {
-      width: calc(var(--str-chat__spacing-px)* 30);
+      width: calc(var(--str-chat__spacing-px) * 30);
     }
 
     .str-chat__message-attachment-unsupported__metadata {
@@ -270,7 +270,6 @@
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
-
     }
 
     .str-chat__message-attachment-unsupported__title {
@@ -622,4 +621,31 @@
 
 .str-chat__attachment-list-angular-host {
   min-width: 0;
+
+  .str-chat__message-attachment-card--video {
+    width: 100%;
+
+    a {
+      display: block;
+      width: 100%;
+      height: 100%;
+      position: relative;
+
+      .str-chat__message-attachment-card--video-play,
+      stream-icon-placeholder {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        right: 0;
+        margin: auto;
+        transform: translateY(-50%);
+        width: calc(var(--str-chat__spacing-px) * 36);
+        height: calc(var(--str-chat__spacing-px) * 36);
+      }
+
+      img {
+        cursor: pointer;
+      }
+    }
+  }
 }

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

@@ -534,8 +534,16 @@
   }
 }
 
-
 .str-chat-angular__message-attachment-file-single
   .str-chat__message-attachment-file--item-first-row {
   color: var(--str-chat__attachment-list-color);
 }
+
+.str-chat__attachment-list-angular-host {
+  .str-chat__message-attachment-card--video-play {
+    --str-chat-icon-color: var(--str-chat__text-color);
+
+    background-color: var(--str-chat__secondary-background-color);
+    border-radius: var(--str-chat__border-radius-circle);
+  }
+}

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

@@ -114,7 +114,7 @@
     top: calc(var(--str-chat__spacing-px) * 2);
     inset-inline-end: calc(var(--str-chat__spacing-px) * 2);
     cursor: pointer;
-    z-index: 1;
+    z-index: 0;
 
     svg {
       width: calc(var(--str-chat__spacing-px) * 24);
@@ -128,7 +128,7 @@
     @include utils.unset-button(unset);
     inset-inline-start: 0;
     cursor: pointer;
-    z-index: 1;
+    z-index: 0;
   }
 }
 

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

@@ -30,6 +30,10 @@
   .stream-chat__avatar--message-status {
     --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15);
   }
+
+  .str-chat__avatar--poll-vote-author {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
+  }
 }
 
 .str-chat__avatar {

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

@@ -1,3 +1,5 @@
+@use '../utils';
+
 .str-chat__dialog-overlay {
   inset: 0;
   overflow: hidden;
@@ -5,4 +7,56 @@
   height: var(--str-chat__dialog-overlay-height);
   width: 100%;
   z-index: 2;
+}
+
+.str-chat__dialog {
+  width: 100%;
+
+  .str-chat__dialog__body {
+    padding: 2rem 1rem;
+    overflow-y: auto;
+
+    .str-chat__dialog__title {
+      margin-bottom: 1rem;
+    }
+
+  }
+
+  .str-chat__dialog__controls {
+    display: flex;
+    justify-content: flex-end;
+    gap: 1.25rem;
+    padding: 1.25rem;
+
+    .str-chat__dialog__controls-button {
+      @include utils.button-reset;
+    }
+  }
+}
+
+.str-chat__prompt-dialog {
+  input[type=text] {
+    width: 100%;
+    padding: 0.625rem 1rem;
+  }
+}
+
+.str-chat__dialog-menu {
+  overflow: hidden;
+
+  .str-chat__dialog-menu__button {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 0.5rem 0.75rem;
+
+    .str-chat__dialog-menu__button-icon {
+      height: 1rem;
+      width: 1rem;
+    }
+
+    .str-chat__dialog-menu__button-text {
+      padding-inline: 0.675rem;
+    }
+  }
 }

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

@@ -0,0 +1,103 @@
+@use '../utils';
+
+.str-chat {
+  /* The border radius used for the borders of the component */
+  --str-chat__dialog-menu-border-radius: var(--str-chat__border-radius-sm);
+
+  /* The text/icon color of the component */
+  --str-chat__dialog-menu-color: var(--str-chat__text-color);
+
+  /* The background color of the component */
+  --str-chat__dialog-menu-background-color: var(--str-chat__secondary-background-color);
+
+  /* Top border of the component */
+  --str-chat__dialog-menu-border-block-start: none;
+
+  /* Bottom border of the component */
+  --str-chat__dialog-menu-border-block-end: none;
+
+  /* Left (right in RTL layout) border of the component */
+  --str-chat__dialog-menu-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component */
+  --str-chat__dialog-menu-border-inline-end: none;
+
+  /* Box shadow applied to the component */
+  --str-chat__dialog-menu-box-shadow: 0 0 8px var(--str-chat__box-shadow-color);
+
+  /* The border radius used for the borders of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-radius: 0;
+
+  /* The text/icon color of an item in the message actions box */
+  --str-chat__dialog-menu-button-color: var(--str-chat__text-color);
+
+  /* The background color of an item in the message actions box */
+  --str-chat__dialog-menu-button-background-color: transparent;
+
+  /* The background color of an item in the message actions box when hovered */
+  --str-chat__dialog-menu-button-hover-background-color: var(--str-chat__secondary-surface-color);
+
+  /* Top border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-block-start: none;
+
+  /* Bottom border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-block-end: none;
+
+  /* Left (right in RTL layout) border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of an item in the message actions box */
+  --str-chat__dialog-menu-button-border-inline-end: none;
+
+  /* Box shadow applied to an item in the message actions box */
+  --str-chat__dialog-menu-button-box-shadow: none;
+}
+
+.str-chat__dialog {
+  .str-chat__dialog__title {
+    font: var(--str-chat__subtitle-medium-text);
+  }
+
+  .str-chat__dialog__prompt {
+    font: var(--str-chat__subtitle-text);
+  }
+
+  .str-chat__dialog__controls {
+    .str-chat__dialog__controls-button {
+      cursor: pointer;
+      font: var(--str-chat__body-medium-text);
+      color: var(--str-chat__primary-color);
+    }
+
+    .str-chat__dialog__controls-button--submit {
+      text-transform: uppercase;
+
+      &:disabled {
+        color: var(--str-chat__disabled-color);
+      }
+    }
+  }
+}
+
+.str-chat__prompt-dialog {
+  input[type=text] {
+    font: var(--str-chat__subtitle-text);
+    border-radius: 20px;
+    border: 1px solid var(--str-chat__primary-color);
+  }
+}
+
+
+.str-chat__dialog-menu {
+  @include utils.component-layer-overrides('dialog-menu');
+
+  .str-chat__dialog-menu__button {
+    @include utils.component-layer-overrides('dialog-menu-button');
+    cursor: pointer;
+    font: var(--str-chat__subtitle-text);
+
+    &:hover, &:focus{
+      background-color: var(--str-chat__dialog-menu-button-hover-background-color);
+    }
+  }
+}

package/src/assets/styles/scss/DragAndDropContainer/DragAmdDropContainer-layout.scss

@@ -0,0 +1,5 @@
+.str-chat__drag-and-drop-container__item {
+  display: flex;
+  width: 100%;
+  padding-block: 0.25rem;
+}

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

@@ -0,0 +1,47 @@
+.str-chat {
+  /* Top border of the component */
+  --str-chat__drag-and-drop-container-border-block-start: 2px solid transparent;
+
+  /* Bottom border of the component */
+  --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent;
+
+  /* Top border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid var(--str-chat__primary-color);
+
+  /* Bottom border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid var(--str-chat__primary-color);
+
+  /* Left (right in RTL layout) border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none;
+
+  /* Right (left in RTL layout) border of the component on dragover */
+  --str-chat__drag-and-drop-container-on-dragover-border-inline-end: none;
+}
+
+
+.str-chat__drag-and-drop-container--dragging {
+  cursor: grabbing;
+}
+
+.str-chat__drag-and-drop-container__item[draggable="true"] {
+  cursor: grab;
+
+  &:active {
+    background: transparent;
+  }
+}
+
+
+.str-chat__drag-and-drop-container__item {
+  border-bottom: var(--str-chat__drag-and-drop-container-border-block-start);
+  border-top: var(--str-chat__drag-and-drop-container-border-block-start);
+
+  &.str-chat__drag-and-drop-container__item--dragged-over-from-top {
+    border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end);
+  }
+
+  &.str-chat__drag-and-drop-container__item--dragged-over-from-bottom {
+    border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start);
+  }
+}
+

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

@@ -0,0 +1,9 @@
+.str-chat__dialog__field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+
+  .str-chat__form-field-error {
+    margin-left: 0.5rem;
+  }
+}

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

@@ -0,0 +1,17 @@
+.str-chat__form-field-error {
+  font-size: 0.75rem;
+  color: var(--str-chat__danger-color)
+}
+
+// hide spin buttons form input of type number
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type=number] {
+  -moz-appearance: textfield;
+}

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

@@ -61,7 +61,7 @@
   content: '\e809';
 } /* '' */
 .str-chat__icon--play::before {
-  content: '\e80a';
+  content: '\e814';
 } /* '' */
 .str-chat__icon--reaction::before {
   content: '\e80b';

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

@@ -0,0 +1,4 @@
+.str-chat__infinite-scroll-paginator {
+  overflow-y: auto;
+  overflow-x: hidden;
+}

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

@@ -18,12 +18,3 @@
     }
   }
 }
-
-.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular) {
-  display: none;
-  z-index: 1;
-
-  &.str-chat__message-actions-box--open {
-    display: block;
-  }
-}

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

@@ -53,10 +53,6 @@
       height: calc(var(--str-chat__spacing-px) * 45);
       cursor: pointer;
 
-      .str-chat__file-input {
-        display: none;
-      }
-
       .str-chat__file-input-label {
         @include utils.flex-row-center;
         cursor: pointer;
@@ -217,3 +213,31 @@
     transform: scale(-1, 1);
   }
 }
+
+.str-chat__attachment-selector-actions-menu,
+.str-chat__attachment-selector {
+  button {
+    @include utils.button-reset;
+  }
+}
+
+.str-chat__attachment-selector {
+  .str-chat__attachment-selector__menu-button {
+    padding: 0.25rem 0.5rem;
+    cursor: pointer;
+
+    .str-chat__attachment-selector__menu-button__icon {
+      height: 26px;
+      width: 26px;
+    }
+  }
+}
+
+.str-chat__file-input {
+  display: none;
+}
+
+.str-chat__attachment-selector-actions-menu {
+  min-width: 300px;
+  padding-block: 0.5rem;
+}

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

@@ -168,6 +168,18 @@
 
   /* Box shadow applied to the cooldown timer */
   --str-chat__cooldown-box-shadow: none;
+  
+  /* Color applied to an icon in a button that opens attachment selector */
+  --str-chat__attachment-selector-button-icon-color: var(--str-chat__text-low-emphasis-color);
+  
+  /* Color applied to an icon in a button that opens attachment selector when hovered over */
+  --str-chat__attachment-selector-button-icon-color-hover: var(--str-chat__primary-color);
+
+  /* Color applied to an attachment selector menu item icon when hovered over */
+  --str-chat__attachment-selector-actions-menu-button-icon-color: var(--str-chat__primary-color);
+
+  /* Color applied to an attachment selector menu item icon when hovered over or focused */
+  --str-chat__attachment-selector-actions-menu-button-icon-color-active: var(--str-chat__primary-color);
 }
 
 .str-chat__message-input {
@@ -283,3 +295,51 @@
     }
   }
 }
+
+.str-chat__attachment-selector {
+  .str-chat__attachment-selector__menu-button {
+    .str-chat__attachment-selector__menu-button__icon {
+      background-color: var(--str-chat__attachment-selector-button-icon-color);
+      -webkit-mask: var(--str-chat__add-attachment-icon) no-repeat center / contain;
+      mask: var(--str-chat__add-attachment-icon) no-repeat center / contain;
+    }
+
+    &:hover {
+      .str-chat__attachment-selector__menu-button__icon {
+        background-color: var(--str-chat__attachment-selector-button-icon-color-hover);
+      }
+    }
+  }
+}
+
+.str-chat__attachment-selector-actions-menu {
+  .str-chat__attachment-selector-actions-menu__button {
+    color: var(--str-chat__text-low-emphasis-color);
+
+    .str-chat__dialog-menu__button-icon {
+      background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color);
+    }
+
+    &:hover, &:focus {
+      color: var(--str-chat__text-color);
+
+      .str-chat__dialog-menu__button-icon {
+        background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color-active);
+      }
+    }
+  }
+
+  .str-chat__attachment-selector-actions-menu__upload-file-button {
+    .str-chat__dialog-menu__button-icon {
+      -webkit-mask: var(--str-chat__folder-icon) no-repeat center / contain;
+      mask: var(--str-chat__folder-icon) no-repeat center / contain;
+    }
+  }
+
+  .str-chat__attachment-selector-actions-menu__create-poll-button {
+    .str-chat__dialog-menu__button-icon {
+      -webkit-mask: var(--str-chat__poll-icon) no-repeat center / contain;
+      mask: var(--str-chat__poll-icon) no-repeat center / contain;
+    }
+  }
+}

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

@@ -11,6 +11,36 @@
   height: 100%;
   z-index: 100;
 
+  .str-chat__modal-header {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 1.25rem 1rem;
+
+    button.str-chat__modal-header__go-back-button,
+    .str-chat__modal__close-button {
+      padding: 1rem;
+      background-size: 0.875rem;
+      background-repeat: no-repeat;
+      background-position: center;
+    }
+
+    button.str-chat__modal-header__go-back-button {
+      background-image: var(--str-chat__arrow-left-icon);
+    }
+
+    .str-chat__modal-header__close-button {
+      background-image: var(--str-chat__close-icon);
+      background-repeat: no-repeat;
+      height: 0.875rem;
+      width: 0.875rem;
+    }
+
+    .str-chat__modal-header__title {
+      flex: 1;
+    }
+  }
+
   button.str-chat__modal__close-button {
     @include utils.unset-button;
     margin: var(--str-chat__spacing-2);
@@ -31,6 +61,7 @@
     @include utils.flex-col-center;
     padding: var(--str-chat__spacing-8) var(--str-chat__spacing-4);
     width: 40%;
+    max-height: 80%;
     min-width: 0;
     min-height: 0;
   }

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

@@ -46,6 +46,12 @@
     @include utils.component-layer-overrides('modal');
   }
 
+  .str-chat__modal-header {
+    .str-chat__modal-header__title {
+      font: var(--str-chat__subtitle2-medium-text);
+    }
+  }
+
   .str-chat__modal__close-button {
     --str-chat-icon-color: var(--str-chat__modal-close-icon-color);
     @include utils.button-reset;

package/src/assets/styles/scss/Notification/MessageNotification-layout.scss

@@ -4,7 +4,7 @@
   align-self: center;
   padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2);
   bottom: calc(var(--str-chat__spacing-px) * 10);
-  z-index: 101;
+  z-index: 100;
 }
 
 .str-chat__list-notifications {