stream-chat-angular 4.66.2 → 5.0.0-v5.10

package/lib/channel-list/channel-list-toggle.service.d.ts

@@ -1,40 +0,0 @@
-import { Observable } from 'rxjs';
-import * as i0 from "@angular/core";
-/**
- * The `ChannelListToggleService` can be used to toggle the channel list.
- *
- * @deprecated This service can only be used with [theming-v1](../concepts/theming-and-css.mdx), if you are using [thmeing-v2](../theming/introduction.mdx) please refer to our [responsive layout guide](../code-examples/responsive-layout.mdx)
- */
-export declare class ChannelListToggleService {
-    /**
-     * Emits `true` if the channel list is in open state, otherwise it emits `false`
-     */
-    isOpen$: Observable<boolean>;
-    private isOpenSubject;
-    private menuElement;
-    constructor();
-    /**
-     * Opens the channel list.
-     */
-    open(): void;
-    /**
-     * Closes the channel list.
-     */
-    close(): void;
-    /**
-     * Opens the channel list if it was closed, and closes if it was opened.
-     */
-    toggle(): void;
-    /**
-     * Sets the channel list element, on mobile screen size if the user opens the channel list, and clicks outside, the service automatically closes the channel list if a reference to the HTML element is provided.
-     * @param element
-     */
-    setMenuElement(element: HTMLElement | undefined): void;
-    /**
-     * This method should be called if a channel was selected, if on mobile, the channel list will be closed.
-     */
-    channelSelected(): void;
-    private watchForOutsideClicks;
-    static ɵfac: i0.ɵɵFactoryDeclaration<ChannelListToggleService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ChannelListToggleService>;
-}

package/lib/message-list/image-load.service.d.ts

@@ -1,15 +0,0 @@
-import { Subject } from 'rxjs';
-import * as i0 from "@angular/core";
-/**
- * The `ImageLoadService` is used to position the scrollbar in the message list
- * @deprecated - This class is no longer used by SDK components as image sizes are fixed
- */
-export declare class ImageLoadService {
-    /**
-     * A subject that can be used to notify the message list if an image attachment finished loading
-     */
-    imageLoad$: Subject<void>;
-    constructor();
-    static ɵfac: i0.ɵɵFactoryDeclaration<ImageLoadService, never>;
-    static ɵprov: i0.ɵɵInjectableDeclaration<ImageLoadService>;
-}

package/src/assets/str-chat__alert.svg

@@ -1 +0,0 @@
-<svg width="14" height="14" xmlns="http://www.w3.org/2000/svg"><path d="M7 0a7 7 0 1 0 0 14A7 7 0 0 0 7 0zm.875 10.938a.438.438 0 0 1-.438.437h-.875a.438.438 0 0 1-.437-.438v-.874c0-.242.196-.438.438-.438h.875c.241 0 .437.196.437.438v.874zm0-2.626a.438.438 0 0 1-.438.438h-.875a.438.438 0 0 1-.437-.438v-5.25c0-.241.196-.437.438-.437h.875c.241 0 .437.196.437.438v5.25z" fill="#EA152F" fill-rule="evenodd"/></svg>

package/src/assets/str-chat__file-file.svg

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="25px" height="30px" viewBox="0 0 25 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
-    <title>file icon</title>
-    <desc>Created with Sketch.</desc>
-    <g id="Team-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="LIGHT_02-Team-Chat" transform="translate(-399.000000, -2328.000000)">
-            <g id="Channel-Conversations" transform="translate(300.000000, 0.000000)">
-                <g id="ConversationMessageView" transform="translate(40.000000, 2239.000000)">
-                    <g id="MessageContent_file" transform="translate(49.000000, 83.000000)">
-                        <g id="file-icon" transform="translate(10.000000, 6.000000)">
-                            <path d="M0,1.99161703 C0,0.891677316 0.889763236,0 2.00359486,0 L22.9964051,0 C24.10296,0 25,0.89784041 25,1.99161703 L25,28.008383 C25,29.1083227 24.1102368,30 22.9964051,30 L2.00359486,30 C0.897039974,30 0,29.1021596 0,28.008383 L0,1.99161703 Z" id="placeholder" fill="#D1D1D1"></path>
-                            <path d="M5,5 L20,5 L20,7 L5,7 L5,5 Z M5,9 L20,9 L20,11 L5,11 L5,9 Z M5,13 L20,13 L20,15 L5,15 L5,13 Z M5,17 L12,17 L12,19 L5,19 L5,17 Z" id="lines" fill="#FFFFFF"></path>
-                        </g>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

package/src/assets/str-chat__icon-chevron-down.svg

@@ -1 +0,0 @@
-<svg width="8" height="5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="b" d="M.667.667L4 4 7.333.667z"/><filter x="-7.5%" y="-15%" width="115%" height="160%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.685858243 0" in="shadowOffsetOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><use fill="#000" filter="url(#a)" xlink:href="#b"/><use fill-opacity=".7" fill="#FFF" xlink:href="#b"/></g></svg>

package/src/assets/str-chat__icon-search.svg

@@ -1 +0,0 @@
-<svg width="24" height="25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M8.667 0a8.667 8.667 0 0 1 6.581 14.305l.361.362h1.058l6.666 6.666-2 2-6.666-6.666v-1.058l-.362-.36A8.667 8.667 0 1 1 8.666 0zm0 2.667a6 6 0 1 0 0 12 6 6 0 0 0 0-12z" id="b"/><filter x="-2.1%" y="-2.1%" width="104.3%" height="108.6%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0" in="shadowOffsetOuter1"/></filter></defs><g fill="#000" fill-rule="evenodd"><use filter="url(#a)" xlink:href="#b"/><use fill-opacity=".8" xlink:href="#b"/></g></svg>

package/src/assets/str-chat__icon-send.svg

@@ -1 +0,0 @@
-<svg width="29" height="25" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="b" d="M.68 24l27.987-12L.68 0 .667 9.333l20 2.667-20 2.667z"/><filter x="-1.8%" y="-2.1%" width="103.6%" height="108.3%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feComposite in="shadowOffsetOuter1" in2="SourceAlpha" operator="out" result="shadowOffsetOuter1"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.1 0" in="shadowOffsetOuter1"/></filter></defs><g fill="#000" fill-rule="evenodd"><use filter="url(#a)" xlink:href="#b"/><use fill-opacity=".8" xlink:href="#b"/></g></svg>

package/src/assets/str-chat__loading-indicator.svg

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="28px" height="30px" viewBox="0 0 28 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
-    <title>Combined Shape</title>
-    <desc>Created with Sketch.</desc>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#FFFFFF" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#000000" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="Messenger-Chat" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="LIGHT_03-Messenger-Chat" transform="translate(-707.000000, -100.000000)" fill="url(#linearGradient-1)">
-            <g id="Chat" transform="translate(300.000000, 20.000000)">
-                <g id="Reverse-Pagination" transform="translate(40.000000, 80.000000)">
-                    <g id="Loading" transform="translate(365.000000, 0.000000)">
-                        <path d="M2.51792449,23.3213837 L4.18220122,22.2118659 C6.51334745,25.7016346 10.4882677,28 15,28 C22.1797017,28 28,22.1797017 28,15 C28,7.82029825 22.1797017,2 15,2 L15,0 C23.2842712,0 30,6.71572875 30,15 C30,23.2842712 23.2842712,30 15,30 C9.79415507,30 5.2077086,27.3480399 2.51792449,23.3213837 Z" id="Combined-Shape"></path>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

package/src/assets/styles/scss/ActionsBox.scss

@@ -1,56 +0,0 @@
-.str-chat__actions-box {
-  background: var(--white);
-  background-image: linear-gradient(-180deg, var(--bg-gradient-start), var(--bg-gradient-end));
-  box-shadow: 0 1px 0 0 var(--border);
-  border-radius: var(--border-radius-md);
-  display: flex;
-  flex-direction: column;
-  z-index: 1000;
-  position: absolute;
-  min-width: 150px;
-
-  &--right {
-    right: 0;
-    top: calc(100% + 2px);
-  }
-
-  &--left {
-    left: 0;
-    top: calc(100% + 2px);
-  }
-
-  > button {
-    text-align: left;
-    width: 100%;
-    border: none;
-    margin: 0;
-    padding: var(--xs-p);
-    font-size: var(--sm-font);
-    background: none;
-    cursor: pointer;
-
-    &:not(:last-of-type) {
-      box-shadow: 0 1px 0 0 var(--border);
-    }
-
-    &:hover {
-      color: var(--primary-color);
-    }
-  }
-}
-
-.dark.str-chat {
-  .str-chat__message-actions-box {
-    background: var(--dark-grey);
-    background-image: linear-gradient(-180deg, var(--dark-grey), var(--black20));
-    box-shadow: 0 0 2px 0 var(--border), 0 1px 0 0 var(--border), 0 1px 8px 0 var(--border);
-
-    button {
-      color: var(--white);
-
-      &:hover {
-        color: var(--primary-color);
-      }
-    }
-  }
-}

package/src/assets/styles/scss/Attachment.scss

@@ -1,329 +0,0 @@
-@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)
-  );
-}
-
-.str-chat__attachment,
-.str-chat__message-attachment {
-  --attachment-max-width: 450px;
-  --video-width: 300px;
-
-  max-width: var(--attachment-max-width);
-}
-
-.str-chat__message-attachment.str-chat__message-attachment--video:not(.str-chat__message-attachment--card) {
-  --attachment-max-width: var(--video-width);
-  width: var(--video-width);
-}
-
-.str-chat__player-wrapper {
-  position: relative;
-  padding-top: 56.25%; /* Player ratio: 100 / (1280 / 720) */
-  display: flex;
-  flex-direction: column;
-
-  .react-player,
-  .str-chat__video-angular {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    min-height: 0;
-    max-height: 100%;
-  }
-}
-
-.str-chat__message-attachment-dynamic-size {
-  --video-max-height: 300px;
-
-  max-height: var(--video-max-height);
-
-  .str-chat__player-wrapper {
-    @include clamped-height-from-original-image-dimensions(
-      '--video-max-height',
-      '--attachment-max-width'
-    );
-    padding-top: 0;
-    position: static;
-    // CDN resize requires to have max-height/height and max-width set on this element - React
-    max-height: var(--video-max-height);
-    max-width: var(--attachment-max-width);
-
-    .str-chat__video-angular,
-    .react-player {
-      position: static;
-      // CDN resize requires to have max-height/height and max-width set on this element - Angular
-      max-height: var(--video-max-height);
-      max-width: var(--attachment-max-width);
-    }
-  }
-}
-
-/* border radius for attachments */
-.str-chat__message .str-chat__player-wrapper .react-player {
-  border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
-  overflow: hidden;
-}
-
-.str-chat__message--me .str-chat__player-wrapper .react-player {
-  border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
-  overflow: hidden;
-}
-
-.str-chat__message {
-  &-attachment {
-    --attachment-max-width: 375px;
-    width: 100%;
-
-    border-radius: var(--border-radius);
-    padding: var(--xs-m) auto var(--xs-m) 0;
-  }
-
-  /** Let giphies stretch their containers */
-  &-attachment--giphy {
-    max-width: unset;
-  }
-
-  .str-chat__message-attachment {
-    margin: var(--xs-m) 0 var(--xs-m) auto;
-  }
-
-  &--me {
-    .str-chat__message-attachment {
-      padding-left: 0;
-    }
-  }
-}
-
-.str-chat__message-team.thread-list {
-  .str-chat__message-attachment {
-    --attachment-max-width: 200px;
-  }
-}
-
-.str-chat__message-attachment {
-  overflow: hidden;
-
-  &:hover {
-    background: transparent;
-  }
-
-  &--card {
-    &--no-image {
-      height: 60px;
-    }
-
-    &--actions {
-      height: auto;
-    }
-  }
-
-  &-file {
-    width: 100%;
-
-    &--item {
-      position: relative;
-      height: 50px;
-      display: flex;
-      align-items: center;
-      font-size: var(--md-font);
-      line-height: 22px;
-      border-left: 1px solid var(--border);
-      width: auto;
-      padding-left: var(--xxs-p);
-
-      &:hover {
-        background: var(--white);
-      }
-
-      .str-chat__message-attachment-file--item-text {
-        display: flex;
-        flex-direction: column;
-        align-items: flex-start;
-        justify-content: center;
-        row-gap: 2px;
-        width: 100%;
-        min-width: 0;
-
-        .str-chat__message-attachment-file--item-first-row {
-          display: flex;
-          align-items: center;
-          justify-content: space-between;
-          column-gap: 8px;
-          width: 100%;
-
-          .str-chat__message-attachment-file--item-name {
-            font-weight: var(--font-weight-bold);
-            color: var(--black);
-
-            white-space: nowrap;
-            overflow-y: visible;
-            // Not every browser support clip overflow, so hidden is defined as a fallback
-            overflow-x: hidden;
-            overflow-x: clip;
-            text-overflow: ellipsis;
-            min-width: 0;
-          }
-
-          .str-chat__message-attachment-file--item-download {
-            display: flex;
-
-            svg {
-              width: 24px;
-              height: 16px;
-
-              path {
-                fill: var(--black);
-              }
-            }
-          }
-        }
-      }
-
-      img,
-      svg {
-        margin-right: var(--xs-m);
-      }
-
-      &-text {
-        max-width: 100%;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-
-      span {
-        line-height: 14px;
-        font-size: var(--sm-font);
-        font-weight: var(--font-weight-bold);
-        text-transform: uppercase;
-        display: block;
-        color: var(--black);
-        opacity: 0.5;
-      }
-    }
-  }
-
-  &--image {
-    --image-max-height: 300px;
-    max-height: var(--image-max-height);
-    max-width: var(--attachment-max-width);
-    border-radius: 0;
-
-    &:hover {
-      background: transparent;
-    }
-
-    img {
-      @include clamped-height-from-original-image-dimensions(
-        '--image-max-height',
-        '--attachment-max-width'
-      );
-      width: auto;
-      max-height: inherit;
-      display: block;
-      object-fit: cover;
-      overflow: hidden;
-
-      &:hover {
-        background: transparent;
-      }
-    }
-
-    &--actions {
-      height: 320px;
-
-      img {
-        height: calc(320px - 40px);
-      }
-    }
-  }
-
-  &--media {
-    width: 300px;
-  }
-
-  &-card {
-    min-height: 60px;
-  }
-}
-
-.str-chat__message-attachment:not(.str-chat__message-attachment-dynamic-size) {
-  .str-chat__message-attachment--image {
-    img {
-      max-width: 100%;
-    }
-  }
-}
-
-.str-chat__message-attachment-dynamic-size {
-  &.str-chat__message-attachment--svg-image {
-    img {
-      object-fit: contain;
-    }
-  }
-
-  &.str-chat__message-attachment--image {
-    width: auto;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    overflow: hidden;
-  }
-}
-
-.str-chat__message-attachment-card__giphy-logo {
-  height: 20px;
-  width: auto;
-}
-
-.messaging {
-  &.str-chat {
-    .str-chat {
-      &__message-attachment {
-        &.str-chat__message-attachment--image--actions {
-          .str-chat__message-attachment--img {
-            max-height: 254px;
-          }
-        }
-      }
-    }
-  }
-}
-
-.livestream.str-chat {
-  .str-chat {
-    &__message-attachment {
-      &.str-chat__message-attachment--file {
-        max-width: 100%;
-
-        .str-chat__message-attachment-file--item {
-          border-left: none;
-
-          &:hover {
-            background: var(--grey-whisper);
-          }
-        }
-      }
-    }
-  }
-
-  &.dark {
-    .str-chat {
-      &__message-attachment-file--item {
-        a,
-        span {
-          color: var(--white);
-        }
-
-        &:hover {
-          background: transparent;
-        }
-      }
-    }
-  }
-}

package/src/assets/styles/scss/AttachmentActions.scss

@@ -1,44 +0,0 @@
-.str-chat__message-attachment-actions {
-  &-form {
-    width: 100%;
-    margin: var(--xs-m) 0;
-    padding: 0;
-    display: flex;
-  }
-
-  &-button {
-    flex: 1;
-    border: none;
-    background: none;
-    margin: 0 var(--xxs-m);
-    padding: var(--xs-p) var(--xs-p);
-    border-radius: var(--border-radius-round);
-    outline: none;
-
-    &:focus {
-      border: 1px solid var(--primary-color);
-      box-shadow: 0 0 0 2px var(--primary-color-faded);
-    }
-
-    &--primary {
-      background-color: var(--primary-color);
-      color: var(--white);
-    }
-
-    &--default {
-      border: 2px solid var(--border);
-    }
-  }
-}
-
-.dark.str-chat {
-  .str-chat__message-attachment-actions {
-    &-button {
-      color: var(--white);
-
-      &--default {
-        border-color: var(--grey-whisper);
-      }
-    }
-  }
-}