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

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

@@ -320,15 +320,24 @@
     background-size: 24px 24px;
   }
 
+  .str-chat__message-attachment-unsupported,
   .str-chat__message-attachment-file--item {
     @include utils.component-layer-overrides('file-attachment');
   }
 
+  .str-chat__message-attachment-unsupported {
+    .str-chat__message-attachment-unsupported__title {
+      font: var(--str-chat__subtitle-medium-text);
+      word-break: keep-all;
+    }
+  }
+
   .str-chat__message-attachment-file--item,
   .str-chat__message-attachment-audio-widget {
     .str-chat__message-attachment-file--item-name,
     .str-chat__message-attachment-audio-widget--title {
       font: var(--str-chat__subtitle-medium-text);
+      word-break: keep-all;
     }
 
     .str-chat__message-attachment-file--item-size {
@@ -476,6 +485,11 @@
   }
 }
 
+.str-chat__message-attachment-audio-widget--play-button {
+  @include utils.component-layer-overrides('audio-attachment-controls-button');
+  @include utils.circle-fab-overrides('audio-attachment-controls-button');
+}
+
 .str-chat__message-attachment-card.str-chat__message-attachment-card--audio {
   .str-chat__message-attachment-card--header {
     border-end-start-radius: 0;
@@ -483,6 +497,44 @@
   }
 }
 
+.str-chat__message-attachment__voice-recording-widget {
+  @include utils.component-layer-overrides('voice-recording-attachment-widget');
+
+  .str-chat__message-attachment__voice-recording-widget__title {
+    @include utils.ellipsis-text;
+    word-break: keep-all;
+    font: var(--str-chat__subtitle-medium-text);
+  }
+
+  .str-chat__message-attachment__voice-recording-widget__timer {
+    font: var(--str-chat__body-text);
+    color: var(--str-chat__text-low-emphasis-color);
+    white-space: nowrap;
+  }
+}
+
+.str-chat__audio_recorder__waveform-box,
+.str-chat__wave-progress-bar__track {
+  cursor: pointer;
+
+  .str-chat__wave-progress-bar__amplitude-bar {
+    background: var(--str-chat__text-low-emphasis-color);
+    border-radius: var(--str-chat__border-radius-circle);
+  }
+
+  .str-chat__wave-progress-bar__amplitude-bar--active {
+    background: var(--str-chat__primary-color);
+  }
+
+  .str-chat__wave-progress-bar__progress-indicator {
+    background-color: #fff;
+    border-radius: var(--str-chat__border-radius-circle);
+    border: 1px solid var(--str-chat__secondary-overlay-color);
+    cursor: grab;
+  }
+}
+
+
 .str-chat-angular__message-attachment-file-single
   .str-chat__message-attachment-file--item-first-row {
   color: var(--str-chat__attachment-list-color);

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

@@ -1,6 +1,7 @@
 @use '../utils';
 
 .str-chat__attachment-preview-list {
+  --str-chat__loading-indicator-size: calc(var(--str-chat__spacing-px) * 18);
   $preview-height: calc(var(--str-chat__spacing-px) * 72);
 
   @include utils.flex-row-center;
@@ -46,6 +47,8 @@
     }
   }
 
+  .str-chat__attachment-preview-unsupported,
+  .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
     display: flex;
     justify-content: flex-start;
@@ -57,28 +60,38 @@
     padding: 0 var(--str-chat__spacing-4);
     column-gap: var(--str-chat__spacing-2);
 
-    .str-chat__attachment-preview-file-icon {
-      @include utils.flex-row-center;
-
-      svg {
-        height: calc(var(--str-chat__spacing-px) * 37);
-        width: unset;
-      }
-    }
-
+    .str-chat__attachment-preview-metadata,
     .str-chat__attachment-preview-file-end {
       @include utils.ellipsis-text-parent;
+      flex: 1;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
 
+      .str-chat__attachment-preview-title,
       .str-chat__attachment-preview-file-name {
         @include utils.ellipsis-text;
         max-width: 100%;
       }
+    }
+
+    .str-chat__attachment-preview-file-icon {
+      --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 37);
+      --str-chat-icon-width: auto;
+      @include utils.flex-row-center;
+
+      svg {
+        height: calc(var(--str-chat__spacing-px) * 37);
+        width: unset;
+      }
+    }
+  }
 
+  .str-chat__attachment-preview-file {
+    .str-chat__attachment-preview-file-end {
       .str-chat__attachment-preview-file-download {
+        --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 16);
         line-height: calc(var(--str-chat__spacing-px) * 13);
 
         svg {
@@ -96,6 +109,7 @@
   }
 
   .str-chat__attachment-preview-delete {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
     position: absolute;
     top: calc(var(--str-chat__spacing-px) * 2);
     inset-inline-end: calc(var(--str-chat__spacing-px) * 2);
@@ -109,6 +123,7 @@
   }
 
   .str-chat__attachment-preview-error {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
     @include overlay;
     @include utils.unset-button(unset);
     inset-inline-start: 0;

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

@@ -107,13 +107,27 @@
     }
   }
 
+  .str-chat__attachment-preview-unsupported,
+  .str-chat__attachment-preview-voice-recording,
   .str-chat__attachment-preview-file {
     @include utils.component-layer-overrides('attachment-preview-file');
 
+    .str-chat__attachment-preview-title,
     .str-chat__attachment-preview-file-name {
       font: var(--str-chat__subtitle-medium-text);
     }
 
+    .str-chat__attachment-preview-file-download {
+      --str-chat-icon-color: var(--str-chat__attachment-preview-download-icon-color);
+      text-decoration: none;
+
+      svg path {
+        fill: var(--str-chat__attachment-preview-download-icon-color);
+      }
+    }
+  }
+
+  .str-chat__attachment-preview-file {
     .str-chat__attachment-preview-file-download {
       svg path {
         fill: var(--str-chat__attachment-preview-download-icon-color);
@@ -121,7 +135,21 @@
     }
   }
 
+  .str-chat__attachment-preview-voice-recording {
+    .str-chat__recording-timer {
+      color: var(--str-chat__text-low-emphasis-color);
+      font: var(--str-chat__caption-medium-text);
+    }
+  }
+
   .str-chat__attachment-preview-delete {
+    --str-chat-icon-color: var(--str-chat__attachment-preview-close-icon-color);
+
+    .str-chat__icon {
+      background-color: var(--str-chat__attachment-preview-close-icon-background);
+      border-radius: 999px;
+    }
+
     svg {
       background-color: var(--str-chat__attachment-preview-close-icon-background);
       border-radius: 999px;
@@ -133,6 +161,7 @@
   }
 
   .str-chat__attachment-preview-error {
+    --str-chat-icon-color: var(--str-chat__attachment-preview-retry-icon-color);
     background-color: var(--str-chat__attachment-preview-overlay-color);
 
     svg path {

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

@@ -0,0 +1,89 @@
+@use '../utils';
+
+.str-chat__audio_recorder-container {
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+  min-height: 3.25rem;
+  padding-inline: 1rem;
+}
+
+.str-chat__audio_recorder {
+  @include utils.flex-row-center;
+  gap: 0.375rem;
+
+  button {
+    @include utils.flex-row-center;
+    height: 32px;
+    width: 32px;
+    padding: 0;
+  }
+
+  .str-chat__audio_recorder__cancel-button svg {
+    height: 28px;
+  }
+
+  .str-chat__audio_recorder__toggle-playback-button svg {
+    height: 16px;
+  }
+
+  .str-chat__audio_recorder__pause-recording-button svg {
+    height: 12px;
+  }
+
+  .str-chat__audio_recorder__resume-recording-button svg {
+    height: 24px;
+  }
+
+  .str-chat__audio_recorder__stop-button svg {
+    height: 12px;
+  }
+
+  .str-chat__audio_recorder__complete-button svg {
+    height: 16px;
+  }
+
+  .str-chat__recording-timer {
+    display: flex;
+    align-items: center;
+    width: 3rem;
+  }
+
+  .str-chat__recording-timer--hours {
+    width: 3.75rem;
+  }
+
+  .str-chat__wave-progress-bar__track-container {
+    padding-block: 0.5rem;
+    overflow-x: auto;
+    height: fit-content;
+  }
+
+  .str-chat__waveform-box-container {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    width: 100%;
+  }
+
+  .str-chat__audio_recorder__waveform-box,
+  .str-chat__wave-progress-bar__track {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    flex-wrap: nowrap;
+    height: 2rem;
+    margin-inline: 1rem;
+  }
+
+  .str-chat__wave-progress-bar__track {
+    width: 120px;
+  }
+
+  .str-chat__audio_recorder__waveform-box {
+    overflow-x: hidden;
+  }
+}

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

@@ -0,0 +1,51 @@
+@use '../utils';
+
+.str-chat__audio_recorder-container {
+  background-color: var(--str-chat__background-color);
+}
+
+.str-chat__audio_recorder {
+  //@include utils.component-layer-overrides('audio-recorder');
+
+  button {
+    @include utils.button-reset;
+    cursor: pointer;
+
+    &:disabled {
+      cursor: default;
+    }
+  }
+
+  .str-chat__audio_recorder__cancel-button {
+    color: var(--str-chat__text-low-emphasis-color);
+  }
+
+  .str-chat__audio_recorder__toggle-playback-button {
+    color: var(--str-chat__text-low-emphasis-color);
+  }
+
+  .str-chat__audio_recorder__pause-recording-button,
+  .str-chat__audio_recorder__resume-recording-button {
+    color: var(--str-chat__danger-color);
+  }
+
+  .str-chat__audio_recorder__pause-recording-button {
+    border: 3px solid var(--str-chat__danger-color);
+    border-radius: var(--str-chat__border-radius-circle);
+  }
+
+  .str-chat__audio_recorder__stop-button,
+  .str-chat__audio_recorder__complete-button {
+    border-radius: var(--str-chat__border-radius-circle);
+    color: var(--str-chat__on-primary-color);
+    background-color: var(--str-chat__primary-color);
+
+    .str-chat__loading-indicator svg {
+      linearGradient {
+        stop:last-child {
+          stop-color: var(--str-chat__background-color);
+        }
+      }
+    }
+  }
+}

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

@@ -23,7 +23,7 @@
 // React SDK's version of Angular SDK's .dropup (mention-list)
 .str-chat__suggestion-list-container {
   position: absolute;
-  bottom: var(--str-chat__spacing-7);
+  bottom: calc(100% + var(--str-chat__spacing-2_5));
   width: 100%;
   padding: var(--str-chat__spacing-2) 0;
 

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

@@ -1,3 +1,28 @@
+.str-chat {
+  /* The size of the avatar, only available in Angular v5+ */
+  --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 32);
+
+  .stream-chat__avatar--autocomplete-item {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
+  }
+
+  .stream-chat__avatar--channel-header {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 40);
+  }
+
+  .stream-chat__avatar--channel-preview {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 49);
+  }
+
+  .stream-chat__avatar--quoted-message-sender {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20);
+  }
+
+  .stream-chat__avatar--reaction {
+    --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 30);
+  }
+}
+
 .str-chat__avatar {
   position: relative;
 
@@ -21,3 +46,24 @@
   width: calc(var(--str-chat__spacing-px) * 49);
   height: calc(var(--str-chat__spacing-px) * 49);
 }
+
+.str-chat-angular__avatar {
+  height: var(--str-chat__avatar-size);
+  line-height: var(--str-chat__avatar-size);
+  width: var(--str-chat__avatar-size);
+
+  &.stream-chat__avatar--one-letter {
+    font-size: calc(var(--str-chat__avatar-size) * 0.5);
+  }
+
+  &.stream-chat__avatar--multiple-letters {
+    font-size: calc(var(--str-chat__avatar-size) * 0.3);
+  }
+
+  .str-chat__avatar-image {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;;
+  }
+  
+}

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

@@ -25,6 +25,7 @@
 }
 
 .str-chat__empty-channel {
+  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
   @include utils.empty-layout;
   position: relative;
 

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

@@ -40,6 +40,7 @@
 }
 
 .str-chat__empty-channel {
+  --str-chat-icon-color: var(--str-chat__channel-empty-color);
   @include utils.component-layer-overrides('channel');
   @include utils.empty-theme('channel');
 

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

@@ -14,6 +14,7 @@
       height: 100%;
 
       .str-chat__channel-list-empty {
+        --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 136);
         @include utils.empty-layout;
       }
 
@@ -40,7 +41,6 @@
   }
 }
 
-
 .str-chat__channel-list-react {
   overflow: hidden;
 
@@ -52,4 +52,4 @@
       overflow-y: auto;
     }
   }
-}
+}

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

@@ -68,8 +68,8 @@
   /* The text/icon color of the load more button in disabled state */
   --str-chat__channel-list-load-more-disabled-color: var(--str-chat__cta-button-disabled-color);
 
-  /* The icon color for the empty list state */
-  --str-chat__channel-list-empty-indicator-color: var(--str-chat__disabled-color);
+  /* The text/icon color for the empty list state */
+  --str-chat__channel-list-empty-indicator-color: var(--str-chat__text-low-emphasis-color);
 }
 
 .str-chat__channel-list {
@@ -82,6 +82,8 @@
   }
 
   .str-chat__channel-list-empty {
+    --str-chat-icon-color: var(--str-chat__channel-list-empty-indicator-color);
     @include utils.empty-theme('channel-list');
+    color: var(--str-chat__channel-list-empty-indicator-color);
   }
 }

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

@@ -60,6 +60,8 @@
       }
 
       .str-chat__channel-preview-messenger--status {
+        --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 15);
+
         svg {
           width: calc(var(--str-chat__spacing-px) * 15);
           height: calc(var(--str-chat__spacing-px) * 15);

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

@@ -98,6 +98,7 @@
   }
 
   .str-chat__channel-preview-messenger--status {
+    --str-chat-icon-color: var(--str-chat__channel-preview-message-status-color);
     color: var(--str-chat__channel-preview-message-status-color);
 
     svg {

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

@@ -1,31 +1,31 @@
 @use '../utils';
 
 .str-chat {
-  /* The border radius used for the borders of the component */
+  /* The border radius used for the borders of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-radius: none;
 
-  /* The text color used for the send button */
+  /* The text color used for the send button. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-send-button-color: var(--str-chat__primary-color);
 
-  /* The text color used for the cancel button */
+  /* The text color used for the cancel button. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-cancel-button-color: var(--str-chat__text-low-emphasis-color);
 
-  /* The background color of the component */
+  /* The background color of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-background-color: transparent;
 
-  /* Top border of the component */
+  /* Top border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-block-start: none;
 
-  /* Bottom border of the component */
+  /* Bottom border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-block-end: none;
 
-  /* Left (right in RTL layout) border of the component */
+  /* Left (right in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-inline-start: none;
 
-  /* Right (left in RTL layout) border of the component */
+  /* Right (left in RTL layout) border of the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-border-inline-end: none;
 
-  /* Box shadow applied to the component */
+  /* Box shadow applied to the component. Note for Angular SDK users: this variable isn't available starting from version 5 */
   --str-chat__edit-message-modal-button-box-shadow: none;
 }
 

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

@@ -0,0 +1,87 @@
+/* Only available in Angular v5+ */
+.str-chat {
+  /* The height of the icon, only available in Angular v5+ */
+  --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 24);
+  /* The width of the icon, only available in Angular v5+ */
+  --str-chat-icon-width: auto;
+}
+
+.str-chat__icon {
+  display: flex;
+  font-family: 'stream-chat-icons';
+  font-style: normal;
+  font-weight: normal;
+  font-size: var(--str-chat-icon-height);
+  line-height: var(--str-chat-icon-height);
+  height: var(--str-chat-icon-height);
+  width: var(--str-chat-icon-width);
+
+  &::before {
+    line-height: var(--str-chat-icon-height);
+  }
+}
+
+// File type icons
+.str-chat__icon--unspecified-filetype {
+  content: url('data:image/svg+xml;base64,PHN2ZwogIGRhdGEtdGVzdGlkPSJ1bnNwZWNpZmllZC1maWxldHlwZSIKICB3aWR0aD0iMzQiCiAgaGVpZ2h0PSI0MCIKICB2aWV3Qm94PSIwIDAgMzQgNDAiCiAgZmlsbD0ibm9uZSIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCj4KICA8cGF0aAogICAgZD0iTTAgM0MwIDEuMzQzMTUgMS4zNDMxNSAwIDMgMEgyM0wzNCAxMVYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjNaIgogICAgZmlsbD0idXJsKCNwYWludDBfbGluZWFyKSIKICAvPgogIDxwYXRoIGQ9Ik0zNCAxMUwyNiAxMUMyNC4zNDMxIDExIDIzIDkuNjU2ODUgMjMgOFYwTDM0IDExWiIgZmlsbD0iI0RCREJEQiIgLz4KICA8cGF0aAogICAgZmlsbC1ydWxlPSJldmVub2RkIgogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTggMTNIMjNWMTVIOFYxM1oiCiAgICBmaWxsPSIjQ0ZDRkNGIgogIC8+CiAgPHBhdGgKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICAgIGNsaXAtcnVsZT0iZXZlbm9kZCIKICAgIGQ9Ik04IDE3SDE4VjE5SDhWMTdaIgogICAgZmlsbD0iI0NGQ0ZDRiIKICAvPgogIDxwYXRoCiAgICBmaWxsLXJ1bGU9ImV2ZW5vZGQiCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOCAyMUgyM1YyM0g4VjIxWiIKICAgIGZpbGw9IiNDRkNGQ0YiCiAgLz4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudAogICAgICBpZD0icGFpbnQwX2xpbmVhciIKICAgICAgeDE9IjAiCiAgICAgIHkxPSIwIgogICAgICB4Mj0iMCIKICAgICAgeTI9IjQwIgogICAgICBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIKICAgID4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0id2hpdGUiIC8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iI0RCREJEQiIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4=');
+}
+
+.str-chat__icon--audio-file {
+  content: url('data:image/svg+xml;base64,PHN2ZwogIGNsYXNzPSJyZnUtZmlsZS1hdWRpbyIKICBmaWxsPSJub25lIgogIHZpZXdCb3g9IjAgMCAzNCA0MCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgaGVpZ2h0PSIyMCIKICB3aWR0aD0iMjAiCj4KICA8cGF0aAogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTE3LjcxNjggMzMuMTcyQzE4LjIzNDggMzMuMTcyIDE4LjQyMzggMzMuNjU1IDE4LjQyMzggMzQuMThDMTguNDIzOCAzNC42NDIgMTguMjk3OCAzNS4xOTUgMTcuNzE2OCAzNS4xOTVDMTcuMTcwOCAzNS4xOTUgMTYuOTg4OCAzNC42NDIgMTYuOTg4OCAzNC4xNDVDMTYuOTg4OCAzMy42ODMgMTcuMTcwOCAzMy4xNzIgMTcuNzE2OCAzMy4xNzJaTTE5LjU3MTggMzEuMDAySDE4LjM4MThWMzIuNzU4OUgxOC4zNjc4QzE4LjEyMjggMzIuNDMgMTcuNzc5OCAzMi4yNjIgMTcuMzMxOCAzMi4yNjJDMTYuMzAyOCAzMi4yNjIgMTUuNzk4OCAzMy4xNTggMTUuNzk4OCAzNC4xMDNDMTUuNzk4OCAzNS4xMjUgMTYuMjgxOCAzNi4xMDQ5IDE3LjQyMjggMzYuMTA0OUMxNy44NDI4IDM2LjEwNDkgMTguMTkyOCAzNS45MjMgMTguNDIzOCAzNS41OEgxOC40Mzc4VjM2SDE5LjU3MThWMzEuMDAyWk0xMi43MDk1IDM0LjE4NzJDMTIuNzA5NSAzMy43MjUyIDEyLjg3NzUgMzMuMTcyMiAxMy40MzA1IDMzLjE3MjJDMTMuOTgzNSAzMy4xNzIyIDE0LjE1ODUgMzMuNzI1MiAxNC4xNTg1IDM0LjE4NzJDMTQuMTU4NSAzNC42NDkyIDEzLjk4MzUgMzUuMTk1MiAxMy40MzA1IDM1LjE5NTJDMTIuODc3NSAzNS4xOTUyIDEyLjcwOTUgMzQuNjQ5MiAxMi43MDk1IDM0LjE4NzJaTTExLjUxOTUgMzQuMTg3MkMxMS41MTk1IDM1LjI3OTIgMTIuMzAzNSAzNi4xMDUyIDEzLjQzMDUgMzYuMTA1MkMxNC41NTc1IDM2LjEwNTIgMTUuMzQ4NSAzNS4yNzkyIDE1LjM0ODUgMzQuMTg3MkMxNS4zNDg1IDMzLjA5NTIgMTQuNTU3NSAzMi4yNjIyIDEzLjQzMDUgMzIuMjYyMkMxMi4zMDM1IDMyLjI2MjIgMTEuNTE5NSAzMy4wOTUyIDExLjUxOTUgMzQuMTg3MlpNMjEuODM5IDMyLjM2NzFIMjIuNTc0VjMzLjEzNzFIMjEuODM5VjM0Ljc4OTFDMjEuODM5IDM1LjA3NjEgMjIuMDA3IDM1LjEzOTEgMjIuMjY2IDM1LjEzOTFDMjIuMzE0MiAzNS4xMzkxIDIyLjM2NCAzNS4xMzU3IDIyLjQxNDcgMzUuMTMyM0MyMi40NjcyIDM1LjEyODcgMjIuNTIwNiAzNS4xMjUxIDIyLjU3NCAzNS4xMjUxVjM2LjAwMDFDMjIuNDgxIDM2LjAwMzEgMjIuMzg4IDM2LjAwOTkgMjIuMjk1IDM2LjAxNjhDMjIuMTcxIDM2LjAyNTkgMjIuMDQ3IDM2LjAzNTEgMjEuOTIzIDM2LjAzNTFDMjAuOTA4IDM2LjAzNTEgMjAuNjQ5IDM1Ljc0MTEgMjAuNjQ5IDM0Ljc1NDFWMzMuMTM3MUgyMC4wNDdWMzIuMzY3MUgyMC42NDlWMzEuMjY4MUgyMS44MzlWMzIuMzY3MVoiCiAgICBmaWxsPSJ3aGl0ZSIKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBkPSJNMCAyOEgzNFYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjI4WiIKICAgIGZpbGw9IiMyNzI3QjAiCiAgPjwvcGF0aD4KICA8cGF0aCBkPSJNMCAzQzAgMS4zNDMxNSAxLjM0MzE1IDAgMyAwSDIzTDM0IDExVjI4SDBWM1oiIGZpbGw9IiNGNUY1RjUiPjwvcGF0aD4KICA8cGF0aAogICAgZD0iTTM0IDExTDI2IDExQzI0LjM0MzEgMTEgMjMgOS42NTY4NSAyMyA4VjBMMzQgMTFaIgogICAgZmlsbD0iI0RCREJEQiIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOC44NzkxMiAyMS45NDFIMTIuMjk4TDE2Ljk1MjEgMjQuNzQ5M0MxNy4wMzA3IDI0LjgxMzggMTcuMTI5MyAyNC44NDkgMTcuMjMxMSAyNC44NDlDMTcuNDczOCAyNC44NDg4IDE3LjY3MDUgMjQuNjUxOSAxNy42NzAzIDI0LjQwOTJWMTIuNDM5OUMxNy42NzA0IDEyLjMzODEgMTcuNjM1MiAxMi4yMzk2IDE3LjU3MDcgMTIuMTYwOUMxNy40MTY4IDExLjk3MzIgMTcuMTM5OCAxMS45NDU3IDE2Ljk1MjEgMTIuMDk5NkwxMi4yOTggMTQuOTA4SDguODc5MTJDOC4zOTM2IDE0LjkwOCA4IDE1LjMwMTYgOCAxNS43ODcxVjIxLjA2MTlDOCAyMS41NDc0IDguMzkzNiAyMS45NDEgOC44NzkxMiAyMS45NDFaTTEyLjkyNTggMTYuNjY2NEwxNS45MTIyIDE1LjIyMjRWMjEuNjI2OEwxMi45MjU4IDIwLjE4MjlIOS43NTgzVjE2LjY2NjRIMTIuOTI1OFpNMTkuODUxMSAxNi4zNTE3QzE5LjQ3NCAxNi40MDkyIDE5LjIzOTcgMTYuNjYzNyAxOS4zMjgzIDE2LjkxOTFMMTkuMzI2MiAxNi45MkMxOS41Mjk1IDE3LjQ5OTUgMTkuNjMwNSAxOC4wOTggMTkuNjI4NCAxOC42OTUzQzE5LjYzMDUgMTkuMjk3NSAxOS41MjM3IDE5LjkwMTQgMTkuMzE5NiAyMC40OTA5QzE5LjIyOSAyMC43NDYyIDE5LjQ2ODIgMjAuOTk5NiAxOS44NDc0IDIxLjA2QzE5LjkwMDggMjEuMDY4MyAxOS45NTQyIDIxLjA3MiAyMC4wMDc2IDIxLjA3MkMyMC4zMjU5IDIxLjA3MiAyMC42MTU2IDIwLjkyMzQgMjAuNjkyMiAyMC43MDU3QzIwLjkxOTQgMjAuMDQ1MSAyMS4wMzM3IDE5LjM3IDIxLjAzNzQgMTguNjk1M0MyMS4wMzQ5IDE4LjAyNTEgMjAuOTIxMSAxNy4zNTc1IDIwLjY5NTUgMTYuNzAzNUMyMC42MDUzIDE2LjQ0NzcgMjAuMjI5IDE2LjI5MDggMTkuODUxMSAxNi4zNTE3Wk0yMi4xNjA1IDE0LjYwMjhDMjIuNTI1MiAxNC41MTYzIDIyLjkyNTkgMTQuNjQ1NCAyMy4wNTUgMTQuODkzOEMyMy42ODkxIDE2LjExNTcgMjQgMTcuNDA0MiAyNCAxOC42OTIzQzI0LjAwMDQgMTkuOTg5NSAyMy42Nzk2IDIxLjI4MzkgMjMuMDUyMSAyMi41MTUzQzIyLjk1MDMgMjIuNzEyMyAyMi42NzYzIDIyLjgzNDQgMjIuMzgyOCAyMi44MzQ0QzIyLjMwNzEgMjIuODM0NCAyMi4yMzAxIDIyLjgyNjEgMjIuMTU0MyAyMi44MDkyQzIxLjc4NjMgMjIuNzI1MSAyMS41OTE0IDIyLjQ1MzYgMjEuNzE4NSAyMi4yMDc3QzIyLjI5ODggMjEuMDc2MSAyMi41OTIyIDE5Ljg4MzYgMjIuNTkzMSAxOC42OTE5QzIyLjU5MzEgMTcuNTA1NiAyMi4zMDU0IDE2LjMyMjIgMjEuNzI3NiAxNS4yMDI1QzIxLjYwMDEgMTQuOTU2MyAyMS43OTUgMTQuNjg2IDIyLjE2MDUgMTQuNjAyOFoiCiAgICBmaWxsPSIjMjcyN0IwIgogICAgZmlsbC1ydWxlPSJldmVub2RkIgogID48L3BhdGg+Cjwvc3ZnPg==');
+}
+
+// Copy icon mapping here
+.str-chat__icon--action::before {
+  content: '\e800';
+} /* '' */
+.str-chat__icon--arrow-down::before {
+  content: '\e801';
+} /* '' */
+.str-chat__icon--arrow-left::before {
+  content: '\e802';
+} /* '' */
+.str-chat__icon--arrow-right::before {
+  content: '\e803';
+} /* '' */
+.str-chat__icon--close::before {
+  content: '\e804';
+} /* '' */
+.str-chat__icon--arrow-up::before {
+  content: '\e805';
+} /* '' */
+.str-chat__icon--chat-bubble::before {
+  content: '\e806';
+} /* '' */
+.str-chat__icon--pause::before {
+  content: '\e807';
+} /* '' */
+.str-chat__icon--download::before {
+  content: '\e808';
+} /* '' */
+.str-chat__icon--delivered::before {
+  content: '\e809';
+} /* '' */
+.str-chat__icon--play::before {
+  content: '\e80a';
+} /* '' */
+.str-chat__icon--reaction::before {
+  content: '\e80b';
+} /* '' */
+.str-chat__icon--error::before {
+  content: '\e80c';
+} /* '' */
+.str-chat__icon--read::before {
+  content: '\e80d';
+} /* '' */
+.str-chat__icon--retry::before {
+  content: '\e80e';
+} /* '' */
+.str-chat__icon--reply-in-thread::before {
+  content: '\e80f';
+} /* '' */
+.str-chat__icon--send::before {
+  content: '\e810';
+} /* '' */
+.str-chat__icon--attach::before {
+  content: '\e811';
+} /* '' */

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

@@ -0,0 +1,13 @@
+/* Only available in Angular v5+ */
+.str-chat {
+  /* The color of the icon, only available in Angular v5+ */
+  --str-chat-icon-color: var(--str-chat__text-color);
+}
+
+.str-chat__icon {
+  color: var(--str-chat-icon-color);
+}
+
+.str-chat__icon--error {
+  --str-chat-icon-color: var(--str-chat__danger-color);
+}

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

@@ -10,6 +10,7 @@
   height: 100%;
 
   .str-chat__image-carousel-stepper {
+    --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 30);
     padding: var(--str-chat__spacing-2_5);
     border: none;
     cursor: pointer;

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

@@ -20,6 +20,7 @@
 
 .str-chat__image-carousel {
   .str-chat__image-carousel-stepper {
+    --str-chat-icon-color: var(--str-chat__image-carousel-stepper-color);
     cursor: pointer;
 
     svg path {