stream-chat-angular 4.18.0 → 4.19.0

package/esm2015/assets/version.js

@@ -1,2 +1,2 @@
-export const version = '4.18.0';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2Fzc2V0cy92ZXJzaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBRyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgdmVyc2lvbiA9ICc0LjE4LjAnO1xuIl19
+export const version = '4.19.0';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmVyc2lvbi5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2Fzc2V0cy92ZXJzaW9uLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE1BQU0sQ0FBQyxNQUFNLE9BQU8sR0FBRyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgY29uc3QgdmVyc2lvbiA9ICc0LjE5LjAnO1xuIl19

package/esm2015/lib/avatar/avatar.component.js

@@ -19,6 +19,10 @@ export class AvatarComponent {
          * If a channel avatar is displayed, and if the channel has exactly two members a green dot is displayed if the other member is online. Set this flag to `false` to turn off this behavior.
          */
         this.showOnlineIndicator = true;
+        /**
+         * If channel/user image isn't provided the initials of the name of the channel/user is shown instead, you can choose how the initals should be computed
+         */
+        this.initialsType = 'first-letter-of-first-word';
         this.isLoaded = false;
         this.isError = false;
         this.isOnline = false;
@@ -83,7 +87,15 @@ export class AvatarComponent {
                 }
             }
         }
-        return result.charAt(0) || '';
+        const words = result.split(' ');
+        let initials;
+        if (this.initialsType === 'first-letter-of-each-word') {
+            initials = words.map((w) => w.charAt(0) || '').join('');
+        }
+        else {
+            initials = words[0].charAt(0) || '';
+        }
+        return initials;
     }
     get fallbackChannelImage() {
         if (this.type !== 'channel') {
@@ -111,7 +123,7 @@ export class AvatarComponent {
     }
 }
 AvatarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.ChatClientService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type", showOnlineIndicator: "showOnlineIndicator" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }}\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    fontSize: 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')',\n    height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n  }\"\n>\n  <img\n    *ngIf=\"(imageUrl || fallbackChannelImage) && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image{{\n      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      objectFit: 'cover',\n      width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n    }\"\n  />\n  <ng-template #fallback>\n    <div data-testid=\"fallback-img\" class=\"str-chat__avatar-fallback\">\n      {{ initials }}\n    </div>\n  </ng-template>\n  <div\n    data-testid=\"online-indicator\"\n    *ngIf=\"isOnline\"\n    class=\"str-chat__avatar--online-indicator\"\n  ></div>\n</div>\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+AvatarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarComponent, selector: "stream-avatar", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type", showOnlineIndicator: "showOnlineIndicator", initialsType: "initialsType" }, usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"str-chat__avatar str-chat__avatar--circle stream-chat__avatar--{{\n    location\n  }}\"\n  title=\"{{ name }}\"\n  [style]=\"{\n    flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    fontSize:\n      initialsType === 'first-letter-of-first-word'\n        ? 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')'\n        : 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 3 + ')',\n    height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n    width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n  }\"\n>\n  <img\n    *ngIf=\"(imageUrl || fallbackChannelImage) && !isError; else fallback\"\n    class=\"str-chat__avatar-image str-chat__avatar-image{{\n      isLoaded ? ' str-chat__avatar-image--loaded' : ''\n    }}\"\n    src=\"{{ imageUrl || fallbackChannelImage }}\"\n    alt=\"{{ initials }}\"\n    data-testid=\"avatar-img\"\n    (load)=\"isLoaded = true\"\n    (error)=\"isError = true\"\n    [style]=\"{\n      flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',\n      objectFit: 'cover',\n      width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'\n    }\"\n  />\n  <ng-template #fallback>\n    <div\n      data-testid=\"fallback-img\"\n      style=\"overflow: hidden; white-space: nowrap; text-overflow: ellipsis\"\n      class=\"str-chat__avatar-fallback\"\n    >\n      {{ initials }}\n    </div>\n  </ng-template>\n  <div\n    data-testid=\"online-indicator\"\n    *ngIf=\"isOnline\"\n    class=\"str-chat__avatar--online-indicator\"\n  ></div>\n</div>\n", styles: [""], directives: [{ type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
             args: [{
@@ -135,5 +147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], showOnlineIndicator: [{
                 type: Input
+            }], initialsType: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssR0FJTixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUFTeEM7O0dBRUc7QUFNSCxNQUFNLE9BQU8sZUFBZTtJQXNDMUIsWUFDVSxpQkFBb0MsRUFDcEMsTUFBYztRQURkLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7UUFDcEMsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQS9CeEI7O1dBRUc7UUFDTSxTQUFJLEdBQUcsRUFBRSxDQUFDO1FBaUJuQjs7V0FFRztRQUNNLHdCQUFtQixHQUFHLElBQUksQ0FBQztRQUNwQyxhQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ2pCLFlBQU8sR0FBRyxLQUFLLENBQUM7UUFDaEIsYUFBUSxHQUFHLEtBQUssQ0FBQztJQU1kLENBQUM7SUFFRSxXQUFXLENBQUMsT0FBc0I7OztZQUN0QyxJQUFJLE9BQU8sQ0FBQyxTQUFTLENBQUMsRUFBRTtnQkFDdEIsSUFBSSxJQUFJLENBQUMsT0FBTyxFQUFFO29CQUNoQixNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsK0JBQStCLEVBQUUsQ0FBQztvQkFDM0QsSUFBSSxXQUFXLEVBQUU7d0JBQ2YsSUFBSSxDQUFDLG9CQUFvQixHQUFHLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxPQUFPOzZCQUN2RCxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsQ0FBQyxDQUFDLENBQUMsU0FBUyxLQUFLLHVCQUF1QixDQUFDLENBQUM7NkJBQzVELFNBQVMsQ0FBQyxDQUFDLEtBQUssRUFBRSxFQUFFOzs0QkFDbkIsSUFBSSxDQUFBLE1BQUEsS0FBSyxDQUFDLEtBQUssQ0FBQyxJQUFJLDBDQUFFLEVBQUUsTUFBSyxXQUFXLENBQUMsRUFBRSxFQUFFO2dDQUMzQyxJQUFJLENBQUMsTUFBTSxDQUFDLEdBQUcsQ0FBQyxHQUFHLEVBQUU7O29DQUNuQixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUEsTUFBQSxLQUFLLENBQUMsS0FBSyxDQUFDLElBQUksMENBQUUsTUFBTSxLQUFJLEtBQUssQ0FBQztnQ0FDcEQsQ0FBQyxDQUFDLENBQUM7NkJBQ0o7d0JBQ0gsQ0FBQyxDQUFDLENBQUM7d0JBQ0wsSUFBSTs0QkFDRixNQUFNLFFBQVEsR0FBRyxNQUFNLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxVQUFVLENBQUMsVUFBVSxDQUNqRTtnQ0FDRSxFQUFFLEVBQUUsRUFBRSxHQUFHLEVBQUUsV0FBVyxDQUFDLEVBQUUsRUFBRTs2QkFDNUIsQ0FDRixDQUFDOzRCQUNGLElBQUksQ0FBQyxRQUFRLEdBQUcsQ0FBQSxNQUFBLFFBQVEsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLDBDQUFFLE1BQU0sS0FBSSxLQUFLLENBQUM7eUJBQ3BEO3dCQUFDLE9BQU8sS0FBSyxFQUFFOzRCQUNkLDRFQUE0RTs0QkFDNUUsSUFBSSxDQUFDLFFBQVEsR0FBRyxXQUFXLENBQUMsTUFBTSxJQUFJLEtBQUssQ0FBQzt5QkFDN0M7cUJBQ0Y7eUJBQU07d0JBQ0wsTUFBQSxJQUFJLENBQUMsb0JBQW9CLDBDQUFFLFdBQVcsRUFBRSxDQUFDO3FCQUMxQztpQkFDRjtxQkFBTTtvQkFDTCxJQUFJLENBQUMsUUFBUSxHQUFHLEtBQUssQ0FBQztvQkFDdEIsTUFBQSxJQUFJLENBQUMsb0JBQW9CLDBDQUFFLFdBQVcsRUFBRSxDQUFDO2lCQUMxQzthQUNGOztLQUNGO0lBRUQsSUFBSSxRQUFROztRQUNWLElBQUksTUFBTSxHQUFXLEVBQUUsQ0FBQztRQUN4QixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssTUFBTSxFQUFFO1lBQ3hCLE1BQU0sR0FBRyxDQUFBLE1BQUEsSUFBSSxDQUFDLElBQUksMENBQUUsUUFBUSxFQUFFLEtBQUksRUFBRSxDQUFDO1NBQ3RDO2FBQU0sSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLFNBQVMsRUFBRTtZQUNsQyxJQUFJLE1BQUEsTUFBQSxJQUFJLENBQUMsT0FBTywwQ0FBRSxJQUFJLDBDQUFFLElBQUksRUFBRTtnQkFDNUIsTUFBTSxHQUFHLE1BQUEsTUFBQSxJQUFJLENBQUMsT0FBTywwQ0FBRSxJQUFJLDBDQUFFLElBQUksQ0FBQzthQUNuQztpQkFBTTtnQkFDTCxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsK0JBQStCLEVBQUUsQ0FBQztnQkFDM0QsSUFBSSxXQUFXLEVBQUU7b0JBQ2YsTUFBTSxHQUFHLFdBQVcsQ0FBQyxJQUFJLElBQUksV0FBVyxDQUFDLEVBQUUsSUFBSSxFQUFFLENBQUM7aUJBQ25EO3FCQUFNO29CQUNMLE1BQU0sR0FBRyxHQUFHLENBQUM7aUJBQ2Q7YUFDRjtTQUNGO1FBRUQsT0FBTyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztJQUNoQyxDQUFDO0lBRUQsSUFBSSxvQkFBb0I7UUFDdEIsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLFNBQVMsRUFBRTtZQUMzQixPQUFPLFNBQVMsQ0FBQztTQUNsQjthQUFNO1lBQ0wsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLCtCQUErQixFQUFFLENBQUM7WUFDM0QsSUFBSSxXQUFXLEVBQUU7Z0JBQ2YsT0FBTyxXQUFXLENBQUMsS0FBSyxDQUFDO2FBQzFCO2lCQUFNO2dCQUNMLE9BQU8sU0FBUyxDQUFDO2FBQ2xCO1NBQ0Y7SUFDSCxDQUFDO0lBRU8sK0JBQStCOztRQUNyQyxNQUFNLFlBQVksR0FBRyxNQUFNLENBQUMsTUFBTSxDQUNoQyxDQUFBLE1BQUEsTUFBQSxJQUFJLENBQUMsT0FBTywwQ0FBRSxLQUFLLDBDQUFFLE9BQU8sS0FBSSxFQUFFLENBQ25DLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxFQUFFLEVBQUUsV0FBQyxPQUFBLENBQUMsQ0FBQyxPQUFPLE1BQUssTUFBQSxJQUFJLENBQUMsaUJBQWlCLENBQUMsVUFBVSxDQUFDLElBQUksMENBQUUsRUFBRSxDQUFBLENBQUEsRUFBQSxDQUFDLENBQUM7UUFDMUUsSUFBSSxZQUFZLENBQUMsTUFBTSxLQUFLLENBQUMsRUFBRTtZQUM3QixPQUFPLFlBQVksQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7U0FDN0I7YUFBTTtZQUNMLE9BQU8sU0FBUyxDQUFDO1NBQ2xCO0lBQ0gsQ0FBQzs7NEdBeEhVLGVBQWU7Z0dBQWYsZUFBZSwwUEN6QjVCLG84Q0F5Q0E7MkZEaEJhLGVBQWU7a0JBTDNCLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLGVBQWU7b0JBQ3pCLFdBQVcsRUFBRSx5QkFBeUI7b0JBQ3RDLFNBQVMsRUFBRSxDQUFDLHlCQUF5QixDQUFDO2lCQUN2Qzs2SEFLVSxJQUFJO3NCQUFaLEtBQUs7Z0JBSUcsUUFBUTtzQkFBaEIsS0FBSztnQkFJRyxJQUFJO3NCQUFaLEtBQUs7Z0JBSUcsUUFBUTtzQkFBaEIsS0FBSztnQkFJRyxPQUFPO3NCQUFmLEtBQUs7Z0JBSUcsSUFBSTtzQkFBWixLQUFLO2dCQUlHLElBQUk7c0JBQVosS0FBSztnQkFJRyxtQkFBbUI7c0JBQTNCLEtBQUsiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge1xuICBDb21wb25lbnQsXG4gIElucHV0LFxuICBOZ1pvbmUsXG4gIE9uQ2hhbmdlcyxcbiAgU2ltcGxlQ2hhbmdlcyxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBTdWJzY3JpcHRpb24gfSBmcm9tICdyeGpzJztcbmltcG9ydCB7IGZpbHRlciB9IGZyb20gJ3J4anMvb3BlcmF0b3JzJztcbmltcG9ydCB7IENoYW5uZWwsIFVzZXIgfSBmcm9tICdzdHJlYW0tY2hhdCc7XG5pbXBvcnQgeyBDaGF0Q2xpZW50U2VydmljZSB9IGZyb20gJy4uL2NoYXQtY2xpZW50LnNlcnZpY2UnO1xuaW1wb3J0IHtcbiAgQXZhdGFyTG9jYXRpb24sXG4gIEF2YXRhclR5cGUsXG4gIERlZmF1bHRTdHJlYW1DaGF0R2VuZXJpY3MsXG59IGZyb20gJy4uL3R5cGVzJztcblxuLyoqXG4gKiBUaGUgYEF2YXRhcmAgY29tcG9uZW50IGRpc3BsYXlzIHRoZSBwcm92aWRlZCBpbWFnZSwgd2l0aCBmYWxsYmFjayB0byB0aGUgZmlyc3QgbGV0dGVyIG9mIHRoZSBvcHRpb25hbCBuYW1lIGlucHV0LlxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdzdHJlYW0tYXZhdGFyJyxcbiAgdGVtcGxhdGVVcmw6ICcuL2F2YXRhci5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2F2YXRhci5jb21wb25lbnQuc2NzcyddLFxufSlcbmV4cG9ydCBjbGFzcyBBdmF0YXJDb21wb25lbnQgaW1wbGVtZW50cyBPbkNoYW5nZXMge1xuICAvKipcbiAgICogQW4gb3B0aW9uYWwgbmFtZSBvZiB0aGUgaW1hZ2UsIHVzZWQgZm9yIGZhbGxiYWNrIGltYWdlIG9yIGltYWdlIHRpdGxlIChpZiBgaW1hZ2VVcmxgIGlzIHByb3ZpZGVkKVxuICAgKi9cbiAgQElucHV0KCkgbmFtZTogc3RyaW5nIHwgdW5kZWZpbmVkO1xuICAvKipcbiAgICogVGhlIFVSTCBvZiB0aGUgaW1hZ2UgdG8gYmUgZGlzcGxheWVkLiBJZiB0aGUgaW1hZ2UgY2FuJ3QgYmUgZGlzcGxheWVkIHRoZSBmaXJzdCBsZXR0ZXIgb2YgdGhlIG5hbWUgaW5wdXQgaXMgZGlzcGxheWVkLlxuICAgKi9cbiAgQElucHV0KCkgaW1hZ2VVcmw6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgLyoqXG4gICAqIFRoZSBzaXplIGluIHBpeGVscyBvZiB0aGUgYXZhdGFyIGltYWdlLlxuICAgKi9cbiAgQElucHV0KCkgc2l6ZSA9IDMyO1xuICAvKipcbiAgICogVGhlIGxvY2F0aW9uIHRoZSBhdmF0YXIgd2lsbCBiZSBkaXNwbGF5ZWQgaW5cbiAgICovXG4gIEBJbnB1dCgpIGxvY2F0aW9uOiBBdmF0YXJMb2NhdGlvbiB8IHVuZGVmaW5lZDtcbiAgLyoqXG4gICAqIFRoZSBjaGFubmVsIHRoZSBhdmF0YXIgYmVsb25ncyB0byAoaWYgYXZhdGFyIG9mIGEgY2hhbm5lbCBpcyBkaXNwbGF5ZWQpXG4gICAqL1xuICBASW5wdXQoKSBjaGFubmVsPzogQ2hhbm5lbDxEZWZhdWx0U3RyZWFtQ2hhdEdlbmVyaWNzPjtcbiAgLyoqXG4gICAqIFRoZSB1c2VyIHRoZSBhdmF0YXIgYmVsb25ncyB0byAoaWYgYXZhdGFyIG9mIGEgdXNlciBpcyBkaXNwbGF5ZWQpXG4gICAqL1xuICBASW5wdXQoKSB1c2VyPzogVXNlcjxEZWZhdWx0U3RyZWFtQ2hhdEdlbmVyaWNzPjtcbiAgLyoqXG4gICAqIFRoZSB0eXBlIG9mIHRoZSBhdmF0YXI6IGNoYW5uZWwgaWYgY2hhbm5lbCBhdmF0YXIgaXMgZGlzcGxheWVkLCB1c2VyIGlmIHVzZXIgYXZhdGFyIGlzIGRpc3BsYXllZFxuICAgKi9cbiAgQElucHV0KCkgdHlwZTogQXZhdGFyVHlwZSB8IHVuZGVmaW5lZDtcbiAgLyoqXG4gICAqIElmIGEgY2hhbm5lbCBhdmF0YXIgaXMgZGlzcGxheWVkLCBhbmQgaWYgdGhlIGNoYW5uZWwgaGFzIGV4YWN0bHkgdHdvIG1lbWJlcnMgYSBncmVlbiBkb3QgaXMgZGlzcGxheWVkIGlmIHRoZSBvdGhlciBtZW1iZXIgaXMgb25saW5lLiBTZXQgdGhpcyBmbGFnIHRvIGBmYWxzZWAgdG8gdHVybiBvZmYgdGhpcyBiZWhhdmlvci5cbiAgICovXG4gIEBJbnB1dCgpIHNob3dPbmxpbmVJbmRpY2F0b3IgPSB0cnVlO1xuICBpc0xvYWRlZCA9IGZhbHNlO1xuICBpc0Vycm9yID0gZmFsc2U7XG4gIGlzT25saW5lID0gZmFsc2U7XG4gIHByaXZhdGUgaXNPbmxpbmVTdWJzY3JpcHRpb24/OiBTdWJzY3JpcHRpb247XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBjaGF0Q2xpZW50U2VydmljZTogQ2hhdENsaWVudFNlcnZpY2UsXG4gICAgcHJpdmF0ZSBuZ1pvbmU6IE5nWm9uZVxuICApIHt9XG5cbiAgYXN5bmMgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzWydjaGFubmVsJ10pIHtcbiAgICAgIGlmICh0aGlzLmNoYW5uZWwpIHtcbiAgICAgICAgY29uc3Qgb3RoZXJNZW1iZXIgPSB0aGlzLmdldE90aGVyTWVtYmVySWZPbmVUb09uZUNoYW5uZWwoKTtcbiAgICAgICAgaWYgKG90aGVyTWVtYmVyKSB7XG4gICAgICAgICAgdGhpcy5pc09ubGluZVN1YnNjcmlwdGlvbiA9IHRoaXMuY2hhdENsaWVudFNlcnZpY2UuZXZlbnRzJFxuICAgICAgICAgICAgLnBpcGUoZmlsdGVyKChlKSA9PiBlLmV2ZW50VHlwZSA9PT0gJ3VzZXIucHJlc2VuY2UuY2hhbmdlZCcpKVxuICAgICAgICAgICAgLnN1YnNjcmliZSgoZXZlbnQpID0+IHtcbiAgICAgICAgICAgICAgaWYgKGV2ZW50LmV2ZW50LnVzZXI/LmlkID09PSBvdGhlck1lbWJlci5pZCkge1xuICAgICAgICAgICAgICAgIHRoaXMubmdab25lLnJ1bigoKSA9PiB7XG4gICAgICAgICAgICAgICAgICB0aGlzLmlzT25saW5lID0gZXZlbnQuZXZlbnQudXNlcj8ub25saW5lIHx8IGZhbHNlO1xuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgICB0cnkge1xuICAgICAgICAgICAgY29uc3QgcmVzcG9uc2UgPSBhd2FpdCB0aGlzLmNoYXRDbGllbnRTZXJ2aWNlLmNoYXRDbGllbnQucXVlcnlVc2VycyhcbiAgICAgICAgICAgICAge1xuICAgICAgICAgICAgICAgIGlkOiB7ICRlcTogb3RoZXJNZW1iZXIuaWQgfSxcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgKTtcbiAgICAgICAgICAgIHRoaXMuaXNPbmxpbmUgPSByZXNwb25zZS51c2Vyc1swXT8ub25saW5lIHx8IGZhbHNlO1xuICAgICAgICAgIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgICAgICAgICAvLyBGYWxsYmFjayBpZiB3ZSBjYW4ndCBxdWVyeSB1c2VyIC0+IGZvciBleGFtcGxlIGR1ZSB0byBwZXJtaXNzaW9uIHByb2JsZW1zXG4gICAgICAgICAgICB0aGlzLmlzT25saW5lID0gb3RoZXJNZW1iZXIub25saW5lIHx8IGZhbHNlO1xuICAgICAgICAgIH1cbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0aGlzLmlzT25saW5lU3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICAgICAgICB9XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLmlzT25saW5lID0gZmFsc2U7XG4gICAgICAgIHRoaXMuaXNPbmxpbmVTdWJzY3JpcHRpb24/LnVuc3Vic2NyaWJlKCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgZ2V0IGluaXRpYWxzKCkge1xuICAgIGxldCByZXN1bHQ6IHN0cmluZyA9ICcnO1xuICAgIGlmICh0aGlzLnR5cGUgPT09ICd1c2VyJykge1xuICAgICAgcmVzdWx0ID0gdGhpcy5uYW1lPy50b1N0cmluZygpIHx8ICcnO1xuICAgIH0gZWxzZSBpZiAodGhpcy50eXBlID09PSAnY2hhbm5lbCcpIHtcbiAgICAgIGlmICh0aGlzLmNoYW5uZWw/LmRhdGE/Lm5hbWUpIHtcbiAgICAgICAgcmVzdWx0ID0gdGhpcy5jaGFubmVsPy5kYXRhPy5uYW1lO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgY29uc3Qgb3RoZXJNZW1iZXIgPSB0aGlzLmdldE90aGVyTWVtYmVySWZPbmVUb09uZUNoYW5uZWwoKTtcbiAgICAgICAgaWYgKG90aGVyTWVtYmVyKSB7XG4gICAgICAgICAgcmVzdWx0ID0gb3RoZXJNZW1iZXIubmFtZSB8fCBvdGhlck1lbWJlci5pZCB8fCAnJztcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICByZXN1bHQgPSAnIyc7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICByZXR1cm4gcmVzdWx0LmNoYXJBdCgwKSB8fCAnJztcbiAgfVxuXG4gIGdldCBmYWxsYmFja0NoYW5uZWxJbWFnZSgpIHtcbiAgICBpZiAodGhpcy50eXBlICE9PSAnY2hhbm5lbCcpIHtcbiAgICAgIHJldHVybiB1bmRlZmluZWQ7XG4gICAgfSBlbHNlIHtcbiAgICAgIGNvbnN0IG90aGVyTWVtYmVyID0gdGhpcy5nZXRPdGhlck1lbWJlcklmT25lVG9PbmVDaGFubmVsKCk7XG4gICAgICBpZiAob3RoZXJNZW1iZXIpIHtcbiAgICAgICAgcmV0dXJuIG90aGVyTWVtYmVyLmltYWdlO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICBwcml2YXRlIGdldE90aGVyTWVtYmVySWZPbmVUb09uZUNoYW5uZWwoKSB7XG4gICAgY29uc3Qgb3RoZXJNZW1iZXJzID0gT2JqZWN0LnZhbHVlcyhcbiAgICAgIHRoaXMuY2hhbm5lbD8uc3RhdGU/Lm1lbWJlcnMgfHwge31cbiAgICApLmZpbHRlcigobSkgPT4gbS51c2VyX2lkICE9PSB0aGlzLmNoYXRDbGllbnRTZXJ2aWNlLmNoYXRDbGllbnQudXNlcj8uaWQpO1xuICAgIGlmIChvdGhlck1lbWJlcnMubGVuZ3RoID09PSAxKSB7XG4gICAgICByZXR1cm4gb3RoZXJNZW1iZXJzWzBdLnVzZXI7XG4gICAgfSBlbHNlIHtcbiAgICAgIHJldHVybiB1bmRlZmluZWQ7XG4gICAgfVxuICB9XG59XG4iLCI8ZGl2XG4gIGNsYXNzPVwic3RyLWNoYXRfX2F2YXRhciBzdHItY2hhdF9fYXZhdGFyLS1jaXJjbGUgc3RyZWFtLWNoYXRfX2F2YXRhci0te3tcbiAgICBsb2NhdGlvblxuICB9fVwiXG4gIHRpdGxlPVwie3sgbmFtZSB9fVwiXG4gIFtzdHlsZV09XCJ7XG4gICAgZmxleEJhc2lzOiAnY2FsYyh2YXIoLS1zdHItY2hhdF9fc3BhY2luZy1weCwgMXB4KSAqICcgKyBzaXplICsgJyknLFxuICAgIGZvbnRTaXplOiAnY2FsYyh2YXIoLS1zdHItY2hhdF9fc3BhY2luZy1weCwgMXB4KSAqICcgKyBzaXplIC8gMiArICcpJyxcbiAgICBoZWlnaHQ6ICdjYWxjKHZhcigtLXN0ci1jaGF0X19zcGFjaW5nLXB4LCAxcHgpICogJyArIHNpemUgKyAnKScsXG4gICAgbGluZUhlaWdodDogJ2NhbGModmFyKC0tc3RyLWNoYXRfX3NwYWNpbmctcHgsIDFweCkgKiAnICsgc2l6ZSArICcpJyxcbiAgICB3aWR0aDogJ2NhbGModmFyKC0tc3RyLWNoYXRfX3NwYWNpbmctcHgsIDFweCkgKiAnICsgc2l6ZSArICcpJ1xuICB9XCJcbj5cbiAgPGltZ1xuICAgICpuZ0lmPVwiKGltYWdlVXJsIHx8IGZhbGxiYWNrQ2hhbm5lbEltYWdlKSAmJiAhaXNFcnJvcjsgZWxzZSBmYWxsYmFja1wiXG4gICAgY2xhc3M9XCJzdHItY2hhdF9fYXZhdGFyLWltYWdlIHN0ci1jaGF0X19hdmF0YXItaW1hZ2V7e1xuICAgICAgaXNMb2FkZWQgPyAnIHN0ci1jaGF0X19hdmF0YXItaW1hZ2UtLWxvYWRlZCcgOiAnJ1xuICAgIH19XCJcbiAgICBzcmM9XCJ7eyBpbWFnZVVybCB8fCBmYWxsYmFja0NoYW5uZWxJbWFnZSB9fVwiXG4gICAgYWx0PVwie3sgaW5pdGlhbHMgfX1cIlxuICAgIGRhdGEtdGVzdGlkPVwiYXZhdGFyLWltZ1wiXG4gICAgKGxvYWQpPVwiaXNMb2FkZWQgPSB0cnVlXCJcbiAgICAoZXJyb3IpPVwiaXNFcnJvciA9IHRydWVcIlxuICAgIFtzdHlsZV09XCJ7XG4gICAgICBmbGV4QmFzaXM6ICdjYWxjKHZhcigtLXN0ci1jaGF0X19zcGFjaW5nLXB4LCAxcHgpICogJyArIHNpemUgKyAnKScsXG4gICAgICBoZWlnaHQ6ICdjYWxjKHZhcigtLXN0ci1jaGF0X19zcGFjaW5nLXB4LCAxcHgpICogJyArIHNpemUgKyAnKScsXG4gICAgICBvYmplY3RGaXQ6ICdjb3ZlcicsXG4gICAgICB3aWR0aDogJ2NhbGModmFyKC0tc3RyLWNoYXRfX3NwYWNpbmctcHgsIDFweCkgKiAnICsgc2l6ZSArICcpJ1xuICAgIH1cIlxuICAvPlxuICA8bmctdGVtcGxhdGUgI2ZhbGxiYWNrPlxuICAgIDxkaXYgZGF0YS10ZXN0aWQ9XCJmYWxsYmFjay1pbWdcIiBjbGFzcz1cInN0ci1jaGF0X19hdmF0YXItZmFsbGJhY2tcIj5cbiAgICAgIHt7IGluaXRpYWxzIH19XG4gICAgPC9kaXY+XG4gIDwvbmctdGVtcGxhdGU+XG4gIDxkaXZcbiAgICBkYXRhLXRlc3RpZD1cIm9ubGluZS1pbmRpY2F0b3JcIlxuICAgICpuZ0lmPVwiaXNPbmxpbmVcIlxuICAgIGNsYXNzPVwic3RyLWNoYXRfX2F2YXRhci0tb25saW5lLWluZGljYXRvclwiXG4gID48L2Rpdj5cbjwvZGl2PlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9hdmF0YXIvYXZhdGFyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7QUFBQSxPQUFPLEVBQ0wsU0FBUyxFQUNULEtBQUssR0FJTixNQUFNLGVBQWUsQ0FBQztBQUV2QixPQUFPLEVBQUUsTUFBTSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7Ozs7QUFTeEM7O0dBRUc7QUFNSCxNQUFNLE9BQU8sZUFBZTtJQTRDMUIsWUFDVSxpQkFBb0MsRUFDcEMsTUFBYztRQURkLHNCQUFpQixHQUFqQixpQkFBaUIsQ0FBbUI7UUFDcEMsV0FBTSxHQUFOLE1BQU0sQ0FBUTtRQXJDeEI7O1dBRUc7UUFDTSxTQUFJLEdBQUcsRUFBRSxDQUFDO1FBaUJuQjs7V0FFRztRQUNNLHdCQUFtQixHQUFHLElBQUksQ0FBQztRQUNwQzs7V0FFRztRQUNNLGlCQUFZLEdBRWEsNEJBQTRCLENBQUM7UUFDL0QsYUFBUSxHQUFHLEtBQUssQ0FBQztRQUNqQixZQUFPLEdBQUcsS0FBSyxDQUFDO1FBQ2hCLGFBQVEsR0FBRyxLQUFLLENBQUM7SUFNZCxDQUFDO0lBRUUsV0FBVyxDQUFDLE9BQXNCOzs7WUFDdEMsSUFBSSxPQUFPLENBQUMsU0FBUyxDQUFDLEVBQUU7Z0JBQ3RCLElBQUksSUFBSSxDQUFDLE9BQU8sRUFBRTtvQkFDaEIsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLCtCQUErQixFQUFFLENBQUM7b0JBQzNELElBQUksV0FBVyxFQUFFO3dCQUNmLElBQUksQ0FBQyxvQkFBb0IsR0FBRyxJQUFJLENBQUMsaUJBQWlCLENBQUMsT0FBTzs2QkFDdkQsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLFNBQVMsS0FBSyx1QkFBdUIsQ0FBQyxDQUFDOzZCQUM1RCxTQUFTLENBQUMsQ0FBQyxLQUFLLEVBQUUsRUFBRTs7NEJBQ25CLElBQUksQ0FBQSxNQUFBLEtBQUssQ0FBQyxLQUFLLENBQUMsSUFBSSwwQ0FBRSxFQUFFLE1BQUssV0FBVyxDQUFDLEVBQUUsRUFBRTtnQ0FDM0MsSUFBSSxDQUFDLE1BQU0sQ0FBQyxHQUFHLENBQUMsR0FBRyxFQUFFOztvQ0FDbkIsSUFBSSxDQUFDLFFBQVEsR0FBRyxDQUFBLE1BQUEsS0FBSyxDQUFDLEtBQUssQ0FBQyxJQUFJLDBDQUFFLE1BQU0sS0FBSSxLQUFLLENBQUM7Z0NBQ3BELENBQUMsQ0FBQyxDQUFDOzZCQUNKO3dCQUNILENBQUMsQ0FBQyxDQUFDO3dCQUNMLElBQUk7NEJBQ0YsTUFBTSxRQUFRLEdBQUcsTUFBTSxJQUFJLENBQUMsaUJBQWlCLENBQUMsVUFBVSxDQUFDLFVBQVUsQ0FDakU7Z0NBQ0UsRUFBRSxFQUFFLEVBQUUsR0FBRyxFQUFFLFdBQVcsQ0FBQyxFQUFFLEVBQUU7NkJBQzVCLENBQ0YsQ0FBQzs0QkFDRixJQUFJLENBQUMsUUFBUSxHQUFHLENBQUEsTUFBQSxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQywwQ0FBRSxNQUFNLEtBQUksS0FBSyxDQUFDO3lCQUNwRDt3QkFBQyxPQUFPLEtBQUssRUFBRTs0QkFDZCw0RUFBNEU7NEJBQzVFLElBQUksQ0FBQyxRQUFRLEdBQUcsV0FBVyxDQUFDLE1BQU0sSUFBSSxLQUFLLENBQUM7eUJBQzdDO3FCQUNGO3lCQUFNO3dCQUNMLE1BQUEsSUFBSSxDQUFDLG9CQUFvQiwwQ0FBRSxXQUFXLEVBQUUsQ0FBQztxQkFDMUM7aUJBQ0Y7cUJBQU07b0JBQ0wsSUFBSSxDQUFDLFFBQVEsR0FBRyxLQUFLLENBQUM7b0JBQ3RCLE1BQUEsSUFBSSxDQUFDLG9CQUFvQiwwQ0FBRSxXQUFXLEVBQUUsQ0FBQztpQkFDMUM7YUFDRjs7S0FDRjtJQUVELElBQUksUUFBUTs7UUFDVixJQUFJLE1BQU0sR0FBVyxFQUFFLENBQUM7UUFDeEIsSUFBSSxJQUFJLENBQUMsSUFBSSxLQUFLLE1BQU0sRUFBRTtZQUN4QixNQUFNLEdBQUcsQ0FBQSxNQUFBLElBQUksQ0FBQyxJQUFJLDBDQUFFLFFBQVEsRUFBRSxLQUFJLEVBQUUsQ0FBQztTQUN0QzthQUFNLElBQUksSUFBSSxDQUFDLElBQUksS0FBSyxTQUFTLEVBQUU7WUFDbEMsSUFBSSxNQUFBLE1BQUEsSUFBSSxDQUFDLE9BQU8sMENBQUUsSUFBSSwwQ0FBRSxJQUFJLEVBQUU7Z0JBQzVCLE1BQU0sR0FBRyxNQUFBLE1BQUEsSUFBSSxDQUFDLE9BQU8sMENBQUUsSUFBSSwwQ0FBRSxJQUFJLENBQUM7YUFDbkM7aUJBQU07Z0JBQ0wsTUFBTSxXQUFXLEdBQUcsSUFBSSxDQUFDLCtCQUErQixFQUFFLENBQUM7Z0JBQzNELElBQUksV0FBVyxFQUFFO29CQUNmLE1BQU0sR0FBRyxXQUFXLENBQUMsSUFBSSxJQUFJLFdBQVcsQ0FBQyxFQUFFLElBQUksRUFBRSxDQUFDO2lCQUNuRDtxQkFBTTtvQkFDTCxNQUFNLEdBQUcsR0FBRyxDQUFDO2lCQUNkO2FBQ0Y7U0FDRjtRQUVELE1BQU0sS0FBSyxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsR0FBRyxDQUFDLENBQUM7UUFDaEMsSUFBSSxRQUFnQixDQUFDO1FBQ3JCLElBQUksSUFBSSxDQUFDLFlBQVksS0FBSywyQkFBMkIsRUFBRTtZQUNyRCxRQUFRLEdBQUcsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUMsRUFBRSxFQUFFLENBQUMsQ0FBQyxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUMsSUFBSSxFQUFFLENBQUMsQ0FBQyxJQUFJLENBQUMsRUFBRSxDQUFDLENBQUM7U0FDekQ7YUFBTTtZQUNMLFFBQVEsR0FBRyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQyxJQUFJLEVBQUUsQ0FBQztTQUNyQztRQUNELE9BQU8sUUFBUSxDQUFDO0lBQ2xCLENBQUM7SUFFRCxJQUFJLG9CQUFvQjtRQUN0QixJQUFJLElBQUksQ0FBQyxJQUFJLEtBQUssU0FBUyxFQUFFO1lBQzNCLE9BQU8sU0FBUyxDQUFDO1NBQ2xCO2FBQU07WUFDTCxNQUFNLFdBQVcsR0FBRyxJQUFJLENBQUMsK0JBQStCLEVBQUUsQ0FBQztZQUMzRCxJQUFJLFdBQVcsRUFBRTtnQkFDZixPQUFPLFdBQVcsQ0FBQyxLQUFLLENBQUM7YUFDMUI7aUJBQU07Z0JBQ0wsT0FBTyxTQUFTLENBQUM7YUFDbEI7U0FDRjtJQUNILENBQUM7SUFFTywrQkFBK0I7O1FBQ3JDLE1BQU0sWUFBWSxHQUFHLE1BQU0sQ0FBQyxNQUFNLENBQ2hDLENBQUEsTUFBQSxNQUFBLElBQUksQ0FBQyxPQUFPLDBDQUFFLEtBQUssMENBQUUsT0FBTyxLQUFJLEVBQUUsQ0FDbkMsQ0FBQyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxXQUFDLE9BQUEsQ0FBQyxDQUFDLE9BQU8sTUFBSyxNQUFBLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxVQUFVLENBQUMsSUFBSSwwQ0FBRSxFQUFFLENBQUEsQ0FBQSxFQUFBLENBQUMsQ0FBQztRQUMxRSxJQUFJLFlBQVksQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFFO1lBQzdCLE9BQU8sWUFBWSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksQ0FBQztTQUM3QjthQUFNO1lBQ0wsT0FBTyxTQUFTLENBQUM7U0FDbEI7SUFDSCxDQUFDOzs0R0FySVUsZUFBZTtnR0FBZixlQUFlLHdSQ3pCNUIsK3FEQWdEQTsyRkR2QmEsZUFBZTtrQkFMM0IsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsZUFBZTtvQkFDekIsV0FBVyxFQUFFLHlCQUF5QjtvQkFDdEMsU0FBUyxFQUFFLENBQUMseUJBQXlCLENBQUM7aUJBQ3ZDOzZIQUtVLElBQUk7c0JBQVosS0FBSztnQkFJRyxRQUFRO3NCQUFoQixLQUFLO2dCQUlHLElBQUk7c0JBQVosS0FBSztnQkFJRyxRQUFRO3NCQUFoQixLQUFLO2dCQUlHLE9BQU87c0JBQWYsS0FBSztnQkFJRyxJQUFJO3NCQUFaLEtBQUs7Z0JBSUcsSUFBSTtzQkFBWixLQUFLO2dCQUlHLG1CQUFtQjtzQkFBM0IsS0FBSztnQkFJRyxZQUFZO3NCQUFwQixLQUFLIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgQ29tcG9uZW50LFxuICBJbnB1dCxcbiAgTmdab25lLFxuICBPbkNoYW5nZXMsXG4gIFNpbXBsZUNoYW5nZXMsXG59IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBmaWx0ZXIgfSBmcm9tICdyeGpzL29wZXJhdG9ycyc7XG5pbXBvcnQgeyBDaGFubmVsLCBVc2VyIH0gZnJvbSAnc3RyZWFtLWNoYXQnO1xuaW1wb3J0IHsgQ2hhdENsaWVudFNlcnZpY2UgfSBmcm9tICcuLi9jaGF0LWNsaWVudC5zZXJ2aWNlJztcbmltcG9ydCB7XG4gIEF2YXRhckxvY2F0aW9uLFxuICBBdmF0YXJUeXBlLFxuICBEZWZhdWx0U3RyZWFtQ2hhdEdlbmVyaWNzLFxufSBmcm9tICcuLi90eXBlcyc7XG5cbi8qKlxuICogVGhlIGBBdmF0YXJgIGNvbXBvbmVudCBkaXNwbGF5cyB0aGUgcHJvdmlkZWQgaW1hZ2UsIHdpdGggZmFsbGJhY2sgdG8gdGhlIGZpcnN0IGxldHRlciBvZiB0aGUgb3B0aW9uYWwgbmFtZSBpbnB1dC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3RyZWFtLWF2YXRhcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZVVybHM6IFsnLi9hdmF0YXIuY29tcG9uZW50LnNjc3MnXSxcbn0pXG5leHBvcnQgY2xhc3MgQXZhdGFyQ29tcG9uZW50IGltcGxlbWVudHMgT25DaGFuZ2VzIHtcbiAgLyoqXG4gICAqIEFuIG9wdGlvbmFsIG5hbWUgb2YgdGhlIGltYWdlLCB1c2VkIGZvciBmYWxsYmFjayBpbWFnZSBvciBpbWFnZSB0aXRsZSAoaWYgYGltYWdlVXJsYCBpcyBwcm92aWRlZClcbiAgICovXG4gIEBJbnB1dCgpIG5hbWU6IHN0cmluZyB8IHVuZGVmaW5lZDtcbiAgLyoqXG4gICAqIFRoZSBVUkwgb2YgdGhlIGltYWdlIHRvIGJlIGRpc3BsYXllZC4gSWYgdGhlIGltYWdlIGNhbid0IGJlIGRpc3BsYXllZCB0aGUgZmlyc3QgbGV0dGVyIG9mIHRoZSBuYW1lIGlucHV0IGlzIGRpc3BsYXllZC5cbiAgICovXG4gIEBJbnB1dCgpIGltYWdlVXJsOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIC8qKlxuICAgKiBUaGUgc2l6ZSBpbiBwaXhlbHMgb2YgdGhlIGF2YXRhciBpbWFnZS5cbiAgICovXG4gIEBJbnB1dCgpIHNpemUgPSAzMjtcbiAgLyoqXG4gICAqIFRoZSBsb2NhdGlvbiB0aGUgYXZhdGFyIHdpbGwgYmUgZGlzcGxheWVkIGluXG4gICAqL1xuICBASW5wdXQoKSBsb2NhdGlvbjogQXZhdGFyTG9jYXRpb24gfCB1bmRlZmluZWQ7XG4gIC8qKlxuICAgKiBUaGUgY2hhbm5lbCB0aGUgYXZhdGFyIGJlbG9uZ3MgdG8gKGlmIGF2YXRhciBvZiBhIGNoYW5uZWwgaXMgZGlzcGxheWVkKVxuICAgKi9cbiAgQElucHV0KCkgY2hhbm5lbD86IENoYW5uZWw8RGVmYXVsdFN0cmVhbUNoYXRHZW5lcmljcz47XG4gIC8qKlxuICAgKiBUaGUgdXNlciB0aGUgYXZhdGFyIGJlbG9uZ3MgdG8gKGlmIGF2YXRhciBvZiBhIHVzZXIgaXMgZGlzcGxheWVkKVxuICAgKi9cbiAgQElucHV0KCkgdXNlcj86IFVzZXI8RGVmYXVsdFN0cmVhbUNoYXRHZW5lcmljcz47XG4gIC8qKlxuICAgKiBUaGUgdHlwZSBvZiB0aGUgYXZhdGFyOiBjaGFubmVsIGlmIGNoYW5uZWwgYXZhdGFyIGlzIGRpc3BsYXllZCwgdXNlciBpZiB1c2VyIGF2YXRhciBpcyBkaXNwbGF5ZWRcbiAgICovXG4gIEBJbnB1dCgpIHR5cGU6IEF2YXRhclR5cGUgfCB1bmRlZmluZWQ7XG4gIC8qKlxuICAgKiBJZiBhIGNoYW5uZWwgYXZhdGFyIGlzIGRpc3BsYXllZCwgYW5kIGlmIHRoZSBjaGFubmVsIGhhcyBleGFjdGx5IHR3byBtZW1iZXJzIGEgZ3JlZW4gZG90IGlzIGRpc3BsYXllZCBpZiB0aGUgb3RoZXIgbWVtYmVyIGlzIG9ubGluZS4gU2V0IHRoaXMgZmxhZyB0byBgZmFsc2VgIHRvIHR1cm4gb2ZmIHRoaXMgYmVoYXZpb3IuXG4gICAqL1xuICBASW5wdXQoKSBzaG93T25saW5lSW5kaWNhdG9yID0gdHJ1ZTtcbiAgLyoqXG4gICAqIElmIGNoYW5uZWwvdXNlciBpbWFnZSBpc24ndCBwcm92aWRlZCB0aGUgaW5pdGlhbHMgb2YgdGhlIG5hbWUgb2YgdGhlIGNoYW5uZWwvdXNlciBpcyBzaG93biBpbnN0ZWFkLCB5b3UgY2FuIGNob29zZSBob3cgdGhlIGluaXRhbHMgc2hvdWxkIGJlIGNvbXB1dGVkXG4gICAqL1xuICBASW5wdXQoKSBpbml0aWFsc1R5cGU6XG4gICAgfCAnZmlyc3QtbGV0dGVyLW9mLWZpcnN0LXdvcmQnXG4gICAgfCAnZmlyc3QtbGV0dGVyLW9mLWVhY2gtd29yZCcgPSAnZmlyc3QtbGV0dGVyLW9mLWZpcnN0LXdvcmQnO1xuICBpc0xvYWRlZCA9IGZhbHNlO1xuICBpc0Vycm9yID0gZmFsc2U7XG4gIGlzT25saW5lID0gZmFsc2U7XG4gIHByaXZhdGUgaXNPbmxpbmVTdWJzY3JpcHRpb24/OiBTdWJzY3JpcHRpb247XG5cbiAgY29uc3RydWN0b3IoXG4gICAgcHJpdmF0ZSBjaGF0Q2xpZW50U2VydmljZTogQ2hhdENsaWVudFNlcnZpY2UsXG4gICAgcHJpdmF0ZSBuZ1pvbmU6IE5nWm9uZVxuICApIHt9XG5cbiAgYXN5bmMgbmdPbkNoYW5nZXMoY2hhbmdlczogU2ltcGxlQ2hhbmdlcykge1xuICAgIGlmIChjaGFuZ2VzWydjaGFubmVsJ10pIHtcbiAgICAgIGlmICh0aGlzLmNoYW5uZWwpIHtcbiAgICAgICAgY29uc3Qgb3RoZXJNZW1iZXIgPSB0aGlzLmdldE90aGVyTWVtYmVySWZPbmVUb09uZUNoYW5uZWwoKTtcbiAgICAgICAgaWYgKG90aGVyTWVtYmVyKSB7XG4gICAgICAgICAgdGhpcy5pc09ubGluZVN1YnNjcmlwdGlvbiA9IHRoaXMuY2hhdENsaWVudFNlcnZpY2UuZXZlbnRzJFxuICAgICAgICAgICAgLnBpcGUoZmlsdGVyKChlKSA9PiBlLmV2ZW50VHlwZSA9PT0gJ3VzZXIucHJlc2VuY2UuY2hhbmdlZCcpKVxuICAgICAgICAgICAgLnN1YnNjcmliZSgoZXZlbnQpID0+IHtcbiAgICAgICAgICAgICAgaWYgKGV2ZW50LmV2ZW50LnVzZXI/LmlkID09PSBvdGhlck1lbWJlci5pZCkge1xuICAgICAgICAgICAgICAgIHRoaXMubmdab25lLnJ1bigoKSA9PiB7XG4gICAgICAgICAgICAgICAgICB0aGlzLmlzT25saW5lID0gZXZlbnQuZXZlbnQudXNlcj8ub25saW5lIHx8IGZhbHNlO1xuICAgICAgICAgICAgICAgIH0pO1xuICAgICAgICAgICAgICB9XG4gICAgICAgICAgICB9KTtcbiAgICAgICAgICB0cnkge1xuICAgICAgICAgICAgY29uc3QgcmVzcG9uc2UgPSBhd2FpdCB0aGlzLmNoYXRDbGllbnRTZXJ2aWNlLmNoYXRDbGllbnQucXVlcnlVc2VycyhcbiAgICAgICAgICAgICAge1xuICAgICAgICAgICAgICAgIGlkOiB7ICRlcTogb3RoZXJNZW1iZXIuaWQgfSxcbiAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgKTtcbiAgICAgICAgICAgIHRoaXMuaXNPbmxpbmUgPSByZXNwb25zZS51c2Vyc1swXT8ub25saW5lIHx8IGZhbHNlO1xuICAgICAgICAgIH0gY2F0Y2ggKGVycm9yKSB7XG4gICAgICAgICAgICAvLyBGYWxsYmFjayBpZiB3ZSBjYW4ndCBxdWVyeSB1c2VyIC0+IGZvciBleGFtcGxlIGR1ZSB0byBwZXJtaXNzaW9uIHByb2JsZW1zXG4gICAgICAgICAgICB0aGlzLmlzT25saW5lID0gb3RoZXJNZW1iZXIub25saW5lIHx8IGZhbHNlO1xuICAgICAgICAgIH1cbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICB0aGlzLmlzT25saW5lU3Vic2NyaXB0aW9uPy51bnN1YnNjcmliZSgpO1xuICAgICAgICB9XG4gICAgICB9IGVsc2Uge1xuICAgICAgICB0aGlzLmlzT25saW5lID0gZmFsc2U7XG4gICAgICAgIHRoaXMuaXNPbmxpbmVTdWJzY3JpcHRpb24/LnVuc3Vic2NyaWJlKCk7XG4gICAgICB9XG4gICAgfVxuICB9XG5cbiAgZ2V0IGluaXRpYWxzKCkge1xuICAgIGxldCByZXN1bHQ6IHN0cmluZyA9ICcnO1xuICAgIGlmICh0aGlzLnR5cGUgPT09ICd1c2VyJykge1xuICAgICAgcmVzdWx0ID0gdGhpcy5uYW1lPy50b1N0cmluZygpIHx8ICcnO1xuICAgIH0gZWxzZSBpZiAodGhpcy50eXBlID09PSAnY2hhbm5lbCcpIHtcbiAgICAgIGlmICh0aGlzLmNoYW5uZWw/LmRhdGE/Lm5hbWUpIHtcbiAgICAgICAgcmVzdWx0ID0gdGhpcy5jaGFubmVsPy5kYXRhPy5uYW1lO1xuICAgICAgfSBlbHNlIHtcbiAgICAgICAgY29uc3Qgb3RoZXJNZW1iZXIgPSB0aGlzLmdldE90aGVyTWVtYmVySWZPbmVUb09uZUNoYW5uZWwoKTtcbiAgICAgICAgaWYgKG90aGVyTWVtYmVyKSB7XG4gICAgICAgICAgcmVzdWx0ID0gb3RoZXJNZW1iZXIubmFtZSB8fCBvdGhlck1lbWJlci5pZCB8fCAnJztcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICByZXN1bHQgPSAnIyc7XG4gICAgICAgIH1cbiAgICAgIH1cbiAgICB9XG5cbiAgICBjb25zdCB3b3JkcyA9IHJlc3VsdC5zcGxpdCgnICcpO1xuICAgIGxldCBpbml0aWFsczogc3RyaW5nO1xuICAgIGlmICh0aGlzLmluaXRpYWxzVHlwZSA9PT0gJ2ZpcnN0LWxldHRlci1vZi1lYWNoLXdvcmQnKSB7XG4gICAgICBpbml0aWFscyA9IHdvcmRzLm1hcCgodykgPT4gdy5jaGFyQXQoMCkgfHwgJycpLmpvaW4oJycpO1xuICAgIH0gZWxzZSB7XG4gICAgICBpbml0aWFscyA9IHdvcmRzWzBdLmNoYXJBdCgwKSB8fCAnJztcbiAgICB9XG4gICAgcmV0dXJuIGluaXRpYWxzO1xuICB9XG5cbiAgZ2V0IGZhbGxiYWNrQ2hhbm5lbEltYWdlKCkge1xuICAgIGlmICh0aGlzLnR5cGUgIT09ICdjaGFubmVsJykge1xuICAgICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgICB9IGVsc2Uge1xuICAgICAgY29uc3Qgb3RoZXJNZW1iZXIgPSB0aGlzLmdldE90aGVyTWVtYmVySWZPbmVUb09uZUNoYW5uZWwoKTtcbiAgICAgIGlmIChvdGhlck1lbWJlcikge1xuICAgICAgICByZXR1cm4gb3RoZXJNZW1iZXIuaW1hZ2U7XG4gICAgICB9IGVsc2Uge1xuICAgICAgICByZXR1cm4gdW5kZWZpbmVkO1xuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHByaXZhdGUgZ2V0T3RoZXJNZW1iZXJJZk9uZVRvT25lQ2hhbm5lbCgpIHtcbiAgICBjb25zdCBvdGhlck1lbWJlcnMgPSBPYmplY3QudmFsdWVzKFxuICAgICAgdGhpcy5jaGFubmVsPy5zdGF0ZT8ubWVtYmVycyB8fCB7fVxuICAgICkuZmlsdGVyKChtKSA9PiBtLnVzZXJfaWQgIT09IHRoaXMuY2hhdENsaWVudFNlcnZpY2UuY2hhdENsaWVudC51c2VyPy5pZCk7XG4gICAgaWYgKG90aGVyTWVtYmVycy5sZW5ndGggPT09IDEpIHtcbiAgICAgIHJldHVybiBvdGhlck1lbWJlcnNbMF0udXNlcjtcbiAgICB9IGVsc2Uge1xuICAgICAgcmV0dXJuIHVuZGVmaW5lZDtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXZcbiAgY2xhc3M9XCJzdHItY2hhdF9fYXZhdGFyIHN0ci1jaGF0X19hdmF0YXItLWNpcmNsZSBzdHJlYW0tY2hhdF9fYXZhdGFyLS17e1xuICAgIGxvY2F0aW9uXG4gIH19XCJcbiAgdGl0bGU9XCJ7eyBuYW1lIH19XCJcbiAgW3N0eWxlXT1cIntcbiAgICBmbGV4QmFzaXM6ICdjYWxjKHZhcigtLXN0ci1jaGF0X19zcGFjaW5nLXB4LCAxcHgpICogJyArIHNpemUgKyAnKScsXG4gICAgZm9udFNpemU6XG4gICAgICBpbml0aWFsc1R5cGUgPT09ICdmaXJzdC1sZXR0ZXItb2YtZmlyc3Qtd29yZCdcbiAgICAgICAgPyAnY2FsYyh2YXIoLS1zdHItY2hhdF9fc3BhY2luZy1weCwgMXB4KSAqICcgKyBzaXplIC8gMiArICcpJ1xuICAgICAgICA6ICdjYWxjKHZhcigtLXN0ci1jaGF0X19zcGFjaW5nLXB4LCAxcHgpICogJyArIHNpemUgLyAzICsgJyknLFxuICAgIGhlaWdodDogJ2NhbGModmFyKC0tc3RyLWNoYXRfX3NwYWNpbmctcHgsIDFweCkgKiAnICsgc2l6ZSArICcpJyxcbiAgICBsaW5lSGVpZ2h0OiAnY2FsYyh2YXIoLS1zdHItY2hhdF9fc3BhY2luZy1weCwgMXB4KSAqICcgKyBzaXplICsgJyknLFxuICAgIHdpZHRoOiAnY2FsYyh2YXIoLS1zdHItY2hhdF9fc3BhY2luZy1weCwgMXB4KSAqICcgKyBzaXplICsgJyknXG4gIH1cIlxuPlxuICA8aW1nXG4gICAgKm5nSWY9XCIoaW1hZ2VVcmwgfHwgZmFsbGJhY2tDaGFubmVsSW1hZ2UpICYmICFpc0Vycm9yOyBlbHNlIGZhbGxiYWNrXCJcbiAgICBjbGFzcz1cInN0ci1jaGF0X19hdmF0YXItaW1hZ2Ugc3RyLWNoYXRfX2F2YXRhci1pbWFnZXt7XG4gICAgICBpc0xvYWRlZCA/ICcgc3RyLWNoYXRfX2F2YXRhci1pbWFnZS0tbG9hZGVkJyA6ICcnXG4gICAgfX1cIlxuICAgIHNyYz1cInt7IGltYWdlVXJsIHx8IGZhbGxiYWNrQ2hhbm5lbEltYWdlIH19XCJcbiAgICBhbHQ9XCJ7eyBpbml0aWFscyB9fVwiXG4gICAgZGF0YS10ZXN0aWQ9XCJhdmF0YXItaW1nXCJcbiAgICAobG9hZCk9XCJpc0xvYWRlZCA9IHRydWVcIlxuICAgIChlcnJvcik9XCJpc0Vycm9yID0gdHJ1ZVwiXG4gICAgW3N0eWxlXT1cIntcbiAgICAgIGZsZXhCYXNpczogJ2NhbGModmFyKC0tc3RyLWNoYXRfX3NwYWNpbmctcHgsIDFweCkgKiAnICsgc2l6ZSArICcpJyxcbiAgICAgIGhlaWdodDogJ2NhbGModmFyKC0tc3RyLWNoYXRfX3NwYWNpbmctcHgsIDFweCkgKiAnICsgc2l6ZSArICcpJyxcbiAgICAgIG9iamVjdEZpdDogJ2NvdmVyJyxcbiAgICAgIHdpZHRoOiAnY2FsYyh2YXIoLS1zdHItY2hhdF9fc3BhY2luZy1weCwgMXB4KSAqICcgKyBzaXplICsgJyknXG4gICAgfVwiXG4gIC8+XG4gIDxuZy10ZW1wbGF0ZSAjZmFsbGJhY2s+XG4gICAgPGRpdlxuICAgICAgZGF0YS10ZXN0aWQ9XCJmYWxsYmFjay1pbWdcIlxuICAgICAgc3R5bGU9XCJvdmVyZmxvdzogaGlkZGVuOyB3aGl0ZS1zcGFjZTogbm93cmFwOyB0ZXh0LW92ZXJmbG93OiBlbGxpcHNpc1wiXG4gICAgICBjbGFzcz1cInN0ci1jaGF0X19hdmF0YXItZmFsbGJhY2tcIlxuICAgID5cbiAgICAgIHt7IGluaXRpYWxzIH19XG4gICAgPC9kaXY+XG4gIDwvbmctdGVtcGxhdGU+XG4gIDxkaXZcbiAgICBkYXRhLXRlc3RpZD1cIm9ubGluZS1pbmRpY2F0b3JcIlxuICAgICpuZ0lmPVwiaXNPbmxpbmVcIlxuICAgIGNsYXNzPVwic3RyLWNoYXRfX2F2YXRhci0tb25saW5lLWluZGljYXRvclwiXG4gID48L2Rpdj5cbjwvZGl2PlxuIl19

package/esm2015/lib/avatar-placeholder/avatar-placeholder.component.js

@@ -13,6 +13,10 @@ export class AvatarPlaceholderComponent {
          * The size in pixels of the avatar image.
          */
         this.size = 32;
+        /**
+         * If channel/user image isn't provided the initials of the name of the channel/user is shown instead, you can choose how the initals should be computed
+         */
+        this.initialsType = 'first-letter-of-first-word';
     }
     getAvatarContext() {
         return {
@@ -23,11 +27,12 @@ export class AvatarPlaceholderComponent {
             type: this.type,
             user: this.user,
             channel: this.channel,
+            initialsType: this.initialsType,
         };
     }
 }
 AvatarPlaceholderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarPlaceholderComponent, deps: [{ token: i1.CustomTemplatesService }], target: i0.ɵɵFactoryTarget.Component });
-AvatarPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type" }, ngImport: i0, template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-size=\"size\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [size]=\"size\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: getAvatarContext()\n  \"\n></ng-container>\n", components: [{ type: i2.AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "showOnlineIndicator"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe } });
+AvatarPlaceholderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: { name: "name", imageUrl: "imageUrl", size: "size", location: "location", channel: "channel", user: "user", type: "type", initialsType: "initialsType" }, ngImport: i0, template: "<ng-template\n  #defaultAvatar\n  let-name=\"name\"\n  let-imageUrl=\"imageUrl\"\n  let-size=\"size\"\n  let-type=\"type\"\n  let-channel=\"channel\"\n  let-user=\"user\"\n  let-location=\"location\"\n  let-initialsType=\"initialsType\"\n>\n  <stream-avatar\n    [name]=\"name\"\n    [imageUrl]=\"imageUrl\"\n    [size]=\"size\"\n    [type]=\"type\"\n    [channel]=\"channel\"\n    [user]=\"user\"\n    [location]=\"location\"\n    [initialsType]=\"initialsType\"\n  ></stream-avatar>\n</ng-template>\n<ng-container\n  *ngTemplateOutlet=\"\n    (customTemplatesService.avatarTemplate$ | async) || defaultAvatar;\n    context: getAvatarContext()\n  \"\n></ng-container>\n", components: [{ type: i2.AvatarComponent, selector: "stream-avatar", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "showOnlineIndicator", "initialsType"] }], directives: [{ type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "async": i3.AsyncPipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AvatarPlaceholderComponent, decorators: [{
             type: Component,
             args: [{
@@ -49,5 +54,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImpor
                 type: Input
             }], type: [{
                 type: Input
+            }], initialsType: [{
+                type: Input
             }] } });
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLXBsYWNlaG9sZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9hdmF0YXItcGxhY2Vob2xkZXIvYXZhdGFyLXBsYWNlaG9sZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9hdmF0YXItcGxhY2Vob2xkZXIvYXZhdGFyLXBsYWNlaG9sZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQVVqRDs7R0FFRztBQU1ILE1BQU0sT0FBTywwQkFBMEI7SUE2QnJDLFlBQW1CLHNCQUE4QztRQUE5QywyQkFBc0IsR0FBdEIsc0JBQXNCLENBQXdCO1FBcEJqRTs7V0FFRztRQUNNLFNBQUksR0FBRyxFQUFFLENBQUM7SUFpQmlELENBQUM7SUFFckUsZ0JBQWdCO1FBQ2QsT0FBTztZQUNMLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtZQUNmLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUTtZQUN2QixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7WUFDZixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7WUFDdkIsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJO1lBQ2YsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJO1lBQ2YsT0FBTyxFQUFFLElBQUksQ0FBQyxPQUFPO1NBQ3RCLENBQUM7SUFDSixDQUFDOzt1SEF6Q1UsMEJBQTBCOzJHQUExQiwwQkFBMEIscU1DbEJ2QyxzbEJBMEJBOzJGRFJhLDBCQUEwQjtrQkFMdEMsU0FBUzttQkFBQztvQkFDVCxRQUFRLEVBQUUsMkJBQTJCO29CQUNyQyxXQUFXLEVBQUUscUNBQXFDO29CQUNsRCxNQUFNLEVBQUUsRUFBRTtpQkFDWDs2R0FLVSxJQUFJO3NCQUFaLEtBQUs7Z0JBSUcsUUFBUTtzQkFBaEIsS0FBSztnQkFJRyxJQUFJO3NCQUFaLEtBQUs7Z0JBSUcsUUFBUTtzQkFBaEIsS0FBSztnQkFJRyxPQUFPO3NCQUFmLEtBQUs7Z0JBSUcsSUFBSTtzQkFBWixLQUFLO2dCQUlHLElBQUk7c0JBQVosS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENoYW5uZWwsIFVzZXIgfSBmcm9tICdzdHJlYW0tY2hhdCc7XG5pbXBvcnQgeyBDdXN0b21UZW1wbGF0ZXNTZXJ2aWNlIH0gZnJvbSAnLi4vY3VzdG9tLXRlbXBsYXRlcy5zZXJ2aWNlJztcbmltcG9ydCB7XG4gIEF2YXRhckNvbnRleHQsXG4gIEF2YXRhckxvY2F0aW9uLFxuICBBdmF0YXJUeXBlLFxuICBEZWZhdWx0U3RyZWFtQ2hhdEdlbmVyaWNzLFxufSBmcm9tICcuLi90eXBlcyc7XG5cbi8qKlxuICogVGhlIGBBdmF0YXJQbGFjZWhvbGRlcmAgY29tcG9uZW50IGRpc3BsYXlzIHRoZSBbZGVmYXVsdCBhdmF0YXJdKC4vQXZhdGFyQ29tcG9uZW50Lm1keCkgdW5sZXNzIGEgW2N1c3RvbSB0ZW1wbGF0ZV0oLi4vc2VydmljZXMvQ3VzdG9tVGVtcGxhdGVzU2VydmljZS5tZHgpIGlzIHByb3ZpZGVkLiBUaGlzIGNvbXBvbmVudCBpcyB1c2VkIGJ5IHRoZSBTREsgaW50ZXJuYWxseSwgeW91IGxpa2VseSB3b24ndCBuZWVkIHRvIHVzZSBpdC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3RyZWFtLWF2YXRhci1wbGFjZWhvbGRlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXItcGxhY2Vob2xkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZXM6IFtdLFxufSlcbmV4cG9ydCBjbGFzcyBBdmF0YXJQbGFjZWhvbGRlckNvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBBbiBvcHRpb25hbCBuYW1lIG9mIHRoZSBpbWFnZSwgdXNlZCBmb3IgZmFsbGJhY2sgaW1hZ2Ugb3IgaW1hZ2UgdGl0bGUgKGlmIGBpbWFnZVVybGAgaXMgcHJvdmlkZWQpXG4gICAqL1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIC8qKlxuICAgKiBUaGUgVVJMIG9mIHRoZSBpbWFnZSB0byBiZSBkaXNwbGF5ZWQuIElmIHRoZSBpbWFnZSBjYW4ndCBiZSBkaXNwbGF5ZWQgdGhlIGZpcnN0IGxldHRlciBvZiB0aGUgbmFtZSBpbnB1dCBpcyBkaXNwbGF5ZWQuXG4gICAqL1xuICBASW5wdXQoKSBpbWFnZVVybDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuICAvKipcbiAgICogVGhlIHNpemUgaW4gcGl4ZWxzIG9mIHRoZSBhdmF0YXIgaW1hZ2UuXG4gICAqL1xuICBASW5wdXQoKSBzaXplID0gMzI7XG4gIC8qKlxuICAgKiBUaGUgbG9jYXRpb24gdGhlIGF2YXRhciB3aWxsIGJlIGRpc3BsYXllZCBpblxuICAgKi9cbiAgQElucHV0KCkgbG9jYXRpb246IEF2YXRhckxvY2F0aW9uIHwgdW5kZWZpbmVkO1xuICAvKipcbiAgICogVGhlIGNoYW5uZWwgdGhlIGF2YXRhciBiZWxvbmdzIHRvIChpZiBhdmF0YXIgb2YgYSBjaGFubmVsIGlzIGRpc3BsYXllZClcbiAgICovXG4gIEBJbnB1dCgpIGNoYW5uZWw/OiBDaGFubmVsPERlZmF1bHRTdHJlYW1DaGF0R2VuZXJpY3M+O1xuICAvKipcbiAgICogVGhlIHVzZXIgdGhlIGF2YXRhciBiZWxvbmdzIHRvIChpZiBhdmF0YXIgb2YgYSB1c2VyIGlzIGRpc3BsYXllZClcbiAgICovXG4gIEBJbnB1dCgpIHVzZXI/OiBVc2VyPERlZmF1bHRTdHJlYW1DaGF0R2VuZXJpY3M+O1xuICAvKipcbiAgICogVGhlIHR5cGUgb2YgdGhlIGF2YXRhcjogY2hhbm5lbCBpZiBjaGFubmVsIGF2YXRhciBpcyBkaXNwbGF5ZWQsIHVzZXIgaWYgdXNlciBhdmF0YXIgaXMgZGlzcGxheWVkXG4gICAqL1xuICBASW5wdXQoKSB0eXBlOiBBdmF0YXJUeXBlIHwgdW5kZWZpbmVkO1xuICBjb25zdHJ1Y3RvcihwdWJsaWMgY3VzdG9tVGVtcGxhdGVzU2VydmljZTogQ3VzdG9tVGVtcGxhdGVzU2VydmljZSkge31cblxuICBnZXRBdmF0YXJDb250ZXh0KCk6IEF2YXRhckNvbnRleHQge1xuICAgIHJldHVybiB7XG4gICAgICBuYW1lOiB0aGlzLm5hbWUsXG4gICAgICBpbWFnZVVybDogdGhpcy5pbWFnZVVybCxcbiAgICAgIHNpemU6IHRoaXMuc2l6ZSxcbiAgICAgIGxvY2F0aW9uOiB0aGlzLmxvY2F0aW9uLFxuICAgICAgdHlwZTogdGhpcy50eXBlLFxuICAgICAgdXNlcjogdGhpcy51c2VyLFxuICAgICAgY2hhbm5lbDogdGhpcy5jaGFubmVsLFxuICAgIH07XG4gIH1cbn1cbiIsIjxuZy10ZW1wbGF0ZVxuICAjZGVmYXVsdEF2YXRhclxuICBsZXQtbmFtZT1cIm5hbWVcIlxuICBsZXQtaW1hZ2VVcmw9XCJpbWFnZVVybFwiXG4gIGxldC1zaXplPVwic2l6ZVwiXG4gIGxldC10eXBlPVwidHlwZVwiXG4gIGxldC1jaGFubmVsPVwiY2hhbm5lbFwiXG4gIGxldC11c2VyPVwidXNlclwiXG4gIGxldC1sb2NhdGlvbj1cImxvY2F0aW9uXCJcbj5cbiAgPHN0cmVhbS1hdmF0YXJcbiAgICBbbmFtZV09XCJuYW1lXCJcbiAgICBbaW1hZ2VVcmxdPVwiaW1hZ2VVcmxcIlxuICAgIFtzaXplXT1cInNpemVcIlxuICAgIFt0eXBlXT1cInR5cGVcIlxuICAgIFtjaGFubmVsXT1cImNoYW5uZWxcIlxuICAgIFt1c2VyXT1cInVzZXJcIlxuICAgIFtsb2NhdGlvbl09XCJsb2NhdGlvblwiXG4gID48L3N0cmVhbS1hdmF0YXI+XG48L25nLXRlbXBsYXRlPlxuPG5nLWNvbnRhaW5lclxuICAqbmdUZW1wbGF0ZU91dGxldD1cIlxuICAgIChjdXN0b21UZW1wbGF0ZXNTZXJ2aWNlLmF2YXRhclRlbXBsYXRlJCB8IGFzeW5jKSB8fCBkZWZhdWx0QXZhdGFyO1xuICAgIGNvbnRleHQ6IGdldEF2YXRhckNvbnRleHQoKVxuICBcIlxuPjwvbmctY29udGFpbmVyPlxuIl19
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYXZhdGFyLXBsYWNlaG9sZGVyLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9hdmF0YXItcGxhY2Vob2xkZXIvYXZhdGFyLXBsYWNlaG9sZGVyLmNvbXBvbmVudC50cyIsIi4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3N0cmVhbS1jaGF0LWFuZ3VsYXIvc3JjL2xpYi9hdmF0YXItcGxhY2Vob2xkZXIvYXZhdGFyLXBsYWNlaG9sZGVyLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sZUFBZSxDQUFDOzs7OztBQVVqRDs7R0FFRztBQU1ILE1BQU0sT0FBTywwQkFBMEI7SUFtQ3JDLFlBQW1CLHNCQUE4QztRQUE5QywyQkFBc0IsR0FBdEIsc0JBQXNCLENBQXdCO1FBMUJqRTs7V0FFRztRQUNNLFNBQUksR0FBRyxFQUFFLENBQUM7UUFpQm5COztXQUVHO1FBQ00saUJBQVksR0FFYSw0QkFBNEIsQ0FBQztJQUNLLENBQUM7SUFFckUsZ0JBQWdCO1FBQ2QsT0FBTztZQUNMLElBQUksRUFBRSxJQUFJLENBQUMsSUFBSTtZQUNmLFFBQVEsRUFBRSxJQUFJLENBQUMsUUFBUTtZQUN2QixJQUFJLEVBQUUsSUFBSSxDQUFDLElBQUk7WUFDZixRQUFRLEVBQUUsSUFBSSxDQUFDLFFBQVE7WUFDdkIsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJO1lBQ2YsSUFBSSxFQUFFLElBQUksQ0FBQyxJQUFJO1lBQ2YsT0FBTyxFQUFFLElBQUksQ0FBQyxPQUFPO1lBQ3JCLFlBQVksRUFBRSxJQUFJLENBQUMsWUFBWTtTQUNoQyxDQUFDO0lBQ0osQ0FBQzs7dUhBaERVLDBCQUEwQjsyR0FBMUIsMEJBQTBCLG1PQ2xCdkMsZ3FCQTRCQTsyRkRWYSwwQkFBMEI7a0JBTHRDLFNBQVM7bUJBQUM7b0JBQ1QsUUFBUSxFQUFFLDJCQUEyQjtvQkFDckMsV0FBVyxFQUFFLHFDQUFxQztvQkFDbEQsTUFBTSxFQUFFLEVBQUU7aUJBQ1g7NkdBS1UsSUFBSTtzQkFBWixLQUFLO2dCQUlHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBSUcsSUFBSTtzQkFBWixLQUFLO2dCQUlHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBSUcsT0FBTztzQkFBZixLQUFLO2dCQUlHLElBQUk7c0JBQVosS0FBSztnQkFJRyxJQUFJO3NCQUFaLEtBQUs7Z0JBSUcsWUFBWTtzQkFBcEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgSW5wdXQgfSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IENoYW5uZWwsIFVzZXIgfSBmcm9tICdzdHJlYW0tY2hhdCc7XG5pbXBvcnQgeyBDdXN0b21UZW1wbGF0ZXNTZXJ2aWNlIH0gZnJvbSAnLi4vY3VzdG9tLXRlbXBsYXRlcy5zZXJ2aWNlJztcbmltcG9ydCB7XG4gIEF2YXRhckNvbnRleHQsXG4gIEF2YXRhckxvY2F0aW9uLFxuICBBdmF0YXJUeXBlLFxuICBEZWZhdWx0U3RyZWFtQ2hhdEdlbmVyaWNzLFxufSBmcm9tICcuLi90eXBlcyc7XG5cbi8qKlxuICogVGhlIGBBdmF0YXJQbGFjZWhvbGRlcmAgY29tcG9uZW50IGRpc3BsYXlzIHRoZSBbZGVmYXVsdCBhdmF0YXJdKC4vQXZhdGFyQ29tcG9uZW50Lm1keCkgdW5sZXNzIGEgW2N1c3RvbSB0ZW1wbGF0ZV0oLi4vc2VydmljZXMvQ3VzdG9tVGVtcGxhdGVzU2VydmljZS5tZHgpIGlzIHByb3ZpZGVkLiBUaGlzIGNvbXBvbmVudCBpcyB1c2VkIGJ5IHRoZSBTREsgaW50ZXJuYWxseSwgeW91IGxpa2VseSB3b24ndCBuZWVkIHRvIHVzZSBpdC5cbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnc3RyZWFtLWF2YXRhci1wbGFjZWhvbGRlcicsXG4gIHRlbXBsYXRlVXJsOiAnLi9hdmF0YXItcGxhY2Vob2xkZXIuY29tcG9uZW50Lmh0bWwnLFxuICBzdHlsZXM6IFtdLFxufSlcbmV4cG9ydCBjbGFzcyBBdmF0YXJQbGFjZWhvbGRlckNvbXBvbmVudCB7XG4gIC8qKlxuICAgKiBBbiBvcHRpb25hbCBuYW1lIG9mIHRoZSBpbWFnZSwgdXNlZCBmb3IgZmFsbGJhY2sgaW1hZ2Ugb3IgaW1hZ2UgdGl0bGUgKGlmIGBpbWFnZVVybGAgaXMgcHJvdmlkZWQpXG4gICAqL1xuICBASW5wdXQoKSBuYW1lOiBzdHJpbmcgfCB1bmRlZmluZWQ7XG4gIC8qKlxuICAgKiBUaGUgVVJMIG9mIHRoZSBpbWFnZSB0byBiZSBkaXNwbGF5ZWQuIElmIHRoZSBpbWFnZSBjYW4ndCBiZSBkaXNwbGF5ZWQgdGhlIGZpcnN0IGxldHRlciBvZiB0aGUgbmFtZSBpbnB1dCBpcyBkaXNwbGF5ZWQuXG4gICAqL1xuICBASW5wdXQoKSBpbWFnZVVybDogc3RyaW5nIHwgdW5kZWZpbmVkO1xuICAvKipcbiAgICogVGhlIHNpemUgaW4gcGl4ZWxzIG9mIHRoZSBhdmF0YXIgaW1hZ2UuXG4gICAqL1xuICBASW5wdXQoKSBzaXplID0gMzI7XG4gIC8qKlxuICAgKiBUaGUgbG9jYXRpb24gdGhlIGF2YXRhciB3aWxsIGJlIGRpc3BsYXllZCBpblxuICAgKi9cbiAgQElucHV0KCkgbG9jYXRpb246IEF2YXRhckxvY2F0aW9uIHwgdW5kZWZpbmVkO1xuICAvKipcbiAgICogVGhlIGNoYW5uZWwgdGhlIGF2YXRhciBiZWxvbmdzIHRvIChpZiBhdmF0YXIgb2YgYSBjaGFubmVsIGlzIGRpc3BsYXllZClcbiAgICovXG4gIEBJbnB1dCgpIGNoYW5uZWw/OiBDaGFubmVsPERlZmF1bHRTdHJlYW1DaGF0R2VuZXJpY3M+O1xuICAvKipcbiAgICogVGhlIHVzZXIgdGhlIGF2YXRhciBiZWxvbmdzIHRvIChpZiBhdmF0YXIgb2YgYSB1c2VyIGlzIGRpc3BsYXllZClcbiAgICovXG4gIEBJbnB1dCgpIHVzZXI/OiBVc2VyPERlZmF1bHRTdHJlYW1DaGF0R2VuZXJpY3M+O1xuICAvKipcbiAgICogVGhlIHR5cGUgb2YgdGhlIGF2YXRhcjogY2hhbm5lbCBpZiBjaGFubmVsIGF2YXRhciBpcyBkaXNwbGF5ZWQsIHVzZXIgaWYgdXNlciBhdmF0YXIgaXMgZGlzcGxheWVkXG4gICAqL1xuICBASW5wdXQoKSB0eXBlOiBBdmF0YXJUeXBlIHwgdW5kZWZpbmVkO1xuICAvKipcbiAgICogSWYgY2hhbm5lbC91c2VyIGltYWdlIGlzbid0IHByb3ZpZGVkIHRoZSBpbml0aWFscyBvZiB0aGUgbmFtZSBvZiB0aGUgY2hhbm5lbC91c2VyIGlzIHNob3duIGluc3RlYWQsIHlvdSBjYW4gY2hvb3NlIGhvdyB0aGUgaW5pdGFscyBzaG91bGQgYmUgY29tcHV0ZWRcbiAgICovXG4gIEBJbnB1dCgpIGluaXRpYWxzVHlwZTpcbiAgICB8ICdmaXJzdC1sZXR0ZXItb2YtZmlyc3Qtd29yZCdcbiAgICB8ICdmaXJzdC1sZXR0ZXItb2YtZWFjaC13b3JkJyA9ICdmaXJzdC1sZXR0ZXItb2YtZmlyc3Qtd29yZCc7XG4gIGNvbnN0cnVjdG9yKHB1YmxpYyBjdXN0b21UZW1wbGF0ZXNTZXJ2aWNlOiBDdXN0b21UZW1wbGF0ZXNTZXJ2aWNlKSB7fVxuXG4gIGdldEF2YXRhckNvbnRleHQoKTogQXZhdGFyQ29udGV4dCB7XG4gICAgcmV0dXJuIHtcbiAgICAgIG5hbWU6IHRoaXMubmFtZSxcbiAgICAgIGltYWdlVXJsOiB0aGlzLmltYWdlVXJsLFxuICAgICAgc2l6ZTogdGhpcy5zaXplLFxuICAgICAgbG9jYXRpb246IHRoaXMubG9jYXRpb24sXG4gICAgICB0eXBlOiB0aGlzLnR5cGUsXG4gICAgICB1c2VyOiB0aGlzLnVzZXIsXG4gICAgICBjaGFubmVsOiB0aGlzLmNoYW5uZWwsXG4gICAgICBpbml0aWFsc1R5cGU6IHRoaXMuaW5pdGlhbHNUeXBlLFxuICAgIH07XG4gIH1cbn1cbiIsIjxuZy10ZW1wbGF0ZVxuICAjZGVmYXVsdEF2YXRhclxuICBsZXQtbmFtZT1cIm5hbWVcIlxuICBsZXQtaW1hZ2VVcmw9XCJpbWFnZVVybFwiXG4gIGxldC1zaXplPVwic2l6ZVwiXG4gIGxldC10eXBlPVwidHlwZVwiXG4gIGxldC1jaGFubmVsPVwiY2hhbm5lbFwiXG4gIGxldC11c2VyPVwidXNlclwiXG4gIGxldC1sb2NhdGlvbj1cImxvY2F0aW9uXCJcbiAgbGV0LWluaXRpYWxzVHlwZT1cImluaXRpYWxzVHlwZVwiXG4+XG4gIDxzdHJlYW0tYXZhdGFyXG4gICAgW25hbWVdPVwibmFtZVwiXG4gICAgW2ltYWdlVXJsXT1cImltYWdlVXJsXCJcbiAgICBbc2l6ZV09XCJzaXplXCJcbiAgICBbdHlwZV09XCJ0eXBlXCJcbiAgICBbY2hhbm5lbF09XCJjaGFubmVsXCJcbiAgICBbdXNlcl09XCJ1c2VyXCJcbiAgICBbbG9jYXRpb25dPVwibG9jYXRpb25cIlxuICAgIFtpbml0aWFsc1R5cGVdPVwiaW5pdGlhbHNUeXBlXCJcbiAgPjwvc3RyZWFtLWF2YXRhcj5cbjwvbmctdGVtcGxhdGU+XG48bmctY29udGFpbmVyXG4gICpuZ1RlbXBsYXRlT3V0bGV0PVwiXG4gICAgKGN1c3RvbVRlbXBsYXRlc1NlcnZpY2UuYXZhdGFyVGVtcGxhdGUkIHwgYXN5bmMpIHx8IGRlZmF1bHRBdmF0YXI7XG4gICAgY29udGV4dDogZ2V0QXZhdGFyQ29udGV4dCgpXG4gIFwiXG4+PC9uZy1jb250YWluZXI+XG4iXX0=

package/esm2015/lib/channel-header/channel-header.component.js

@@ -74,7 +74,7 @@ export class ChannelHeaderComponent {
     }
 }
 ChannelHeaderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, deps: [{ token: i1.ChannelService }, { token: i2.ChannelListToggleService }, { token: i3.CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: i4.ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n  </div>\n  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    type=\"channel\"\n    location=\"channel-header\"\n    [channel]=\"activeChannel\"\n    [size]=\"40\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"\n        str-chat__header-livestream-left--title str-chat__channel-header-title\n      \"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"\n          str-chat__header-livestream-left--members\n          str-chat__channel-header-info\n        \"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: i5.IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: i6.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i8.TranslatePipe } });
+ChannelHeaderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelHeaderComponent, selector: "stream-channel-header", ngImport: i0, template: "<div class=\"str-chat__header-livestream str-chat__channel-header\">\n  <div\n    class=\"str-chat__header-hamburger\"\n    (click)=\"toggleMenu($event)\"\n    (keyup.enter)=\"toggleMenu($event)\"\n  >\n    <stream-icon-placeholder icon=\"menu\"></stream-icon-placeholder>\n  </div>\n  <ng-content></ng-content>\n  <stream-avatar-placeholder\n    imageUrl=\"{{ activeChannel?.data?.image }}\"\n    name=\"{{ avatarName }}\"\n    type=\"channel\"\n    location=\"channel-header\"\n    [channel]=\"activeChannel\"\n    [size]=\"40\"\n  ></stream-avatar-placeholder>\n  <div class=\"str-chat__header-livestream-left str-chat__channel-header-end\">\n    <p\n      data-testid=\"name\"\n      class=\"\n        str-chat__header-livestream-left--title str-chat__channel-header-title\n      \"\n    >\n      {{ displayText }}\n    </p>\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelHeaderInfoTemplate || defaultChannelInfo;\n        context: getChannelInfoContext()\n      \"\n    ></ng-container>\n    <ng-template #defaultChannelInfo>\n      <p\n        data-testid=\"info\"\n        class=\"\n          str-chat__header-livestream-left--members\n          str-chat__channel-header-info\n        \"\n      >\n        {{'streamChat.{{ memberCount }} members' | translate:memberCountParam}}\n        {{canReceiveConnectEvents ? ('streamChat.{{ watcherCount }} online' |\n        translate:watcherCountParam) : ''}}\n      </p>\n    </ng-template>\n  </div>\n  <ng-container *ngIf=\"channelActionsTemplate\">\n    <ng-container\n      *ngTemplateOutlet=\"\n        channelActionsTemplate;\n        context: getChannelActionsContext()\n      \"\n    ></ng-container>\n  </ng-container>\n</div>\n", components: [{ type: i5.IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: i6.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType"] }], directives: [{ type: i7.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i7.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i8.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelHeaderComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/lib/channel-preview/channel-preview.component.js

@@ -97,7 +97,7 @@ export class ChannelPreviewComponent {
     }
 }
 ChannelPreviewComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, deps: [{ token: i1.ChannelService }, { token: i0.NgZone }, { token: i2.ChatClientService }], target: i0.ɵɵFactoryTarget.Component });
-ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, template: "<button\n  class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      type=\"channel\"\n      [channel]=\"channel\"\n      location=\"channel-preview\"\n      [size]=\"49\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"\n      str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n    \"\n  >\n    <div class=\"str-chat__channel-preview-end-first-row\">\n      <div class=\"str-chat__channel-preview-messenger--name\">\n        <span data-testid=\"channel-preview-title\">{{ title }}</span>\n      </div>\n      <div\n        data-testid=\"unread-badge\"\n        *ngIf=\"unreadCount\"\n        class=\"str-chat__channel-preview-unread-badge\"\n      >\n        {{ unreadCount }}\n      </div>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: i3.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i5.TranslatePipe } });
+ChannelPreviewComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: ChannelPreviewComponent, selector: "stream-channel-preview", inputs: { channel: "channel" }, ngImport: i0, template: "<button\n  class=\"str-chat__channel-preview-messenger str-chat__channel-preview\"\n  [class.str-chat__channel-preview-messenger--active]=\"isActive\"\n  [class.str-chat__channel-preview--active]=\"isActive\"\n  [class.str-chat__channel-preview-messenger--unread]=\"isUnread\"\n  (click)=\"setAsActiveChannel()\"\n  data-testid=\"channel-preview-container\"\n>\n  <div class=\"str-chat__channel-preview-messenger--left\">\n    <stream-avatar-placeholder\n      name=\"{{ avatarName }}\"\n      imageUrl=\"{{ avatarImage }}\"\n      type=\"channel\"\n      [channel]=\"channel\"\n      location=\"channel-preview\"\n      [size]=\"49\"\n    ></stream-avatar-placeholder>\n  </div>\n  <div\n    class=\"\n      str-chat__channel-preview-messenger--right str-chat__channel-preview-end\n    \"\n  >\n    <div class=\"str-chat__channel-preview-end-first-row\">\n      <div class=\"str-chat__channel-preview-messenger--name\">\n        <span data-testid=\"channel-preview-title\">{{ title }}</span>\n      </div>\n      <div\n        data-testid=\"unread-badge\"\n        *ngIf=\"unreadCount\"\n        class=\"str-chat__channel-preview-unread-badge\"\n      >\n        {{ unreadCount }}\n      </div>\n    </div>\n    <div\n      data-testid=\"latest-message\"\n      class=\"str-chat__channel-preview-messenger--last-message\"\n    >\n      {{ latestMessage | translate }}\n    </div>\n  </div>\n</button>\n", components: [{ type: i3.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i5.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: ChannelPreviewComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/lib/message/message.component.js

@@ -320,7 +320,7 @@ export class MessageComponent {
     }
 }
 MessageComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, deps: [{ token: i1.ChatClientService }, { token: i2.ChannelService }, { token: i3.CustomTemplatesService }, { token: i0.ChangeDetectorRef }, { token: i4.ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    message?.status === 'failed' && message?.errorStatusCode !== 403\n  \"\n  data-testid=\"message-container\"\n  (mouseleave)=\"isActionBoxOpen = false\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container *ngIf=\"themeVersion === '1'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        type=\"user\"\n        location=\"message-sender\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-edit-in-progress]=\"isEditing\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            #messageActionsToggle\n            class=\"\n              str-chat__message-actions-container\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n            [popper]=\"popperContent\"\n            [popperTrigger]=\"popperTriggerClick\"\n            [popperPlacement]=\"popperPlacementAuto\"\n            [popperHideOnScroll]=\"true\"\n            [popperHideOnClickOutside]=\"true\"\n            [popperHideOnMouseLeave]=\"false\"\n          >\n            <popper-content #popperContent>\n              <ng-template\n                #defaultMessageActionsBox\n                let-isOpen=\"isOpen\"\n                let-isMine=\"isMine\"\n                let-enabledActions=\"enabledActions\"\n                let-messageInput=\"message\"\n                let-displayedActionsCountChaneHanler=\"displayedActionsCountChaneHanler\"\n                let-isEditingChangeHandler=\"isEditingChangeHandler\"\n              >\n                <stream-message-actions-box\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [message]=\"messageInput\"\n                  (displayedActionsCount)=\"\n                    displayedActionsCountChaneHanler($event)\n                  \"\n                  (isEditing)=\"isEditingChangeHandler($event)\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  messageActionsBoxTemplate || defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </popper-content>\n            <div\n              class=\"str-chat__message-actions-box-button\"\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n            >\n              <stream-icon-placeholder\n                icon=\"action-icon\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n          <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n              str-chat__message-reply-in-thread-button\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reply-in-thread\"\n            ></stream-icon-placeholder>\n          </div>\n          <div\n            *ngIf=\"canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n              str-chat__message-reactions-button\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\n          <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-isSelectorOpen=\"isSelectorOpen\"\n            let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [isSelectorOpen]=\"isSelectorOpen\"\n              (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              messageReactionsTemplate || defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <!-- transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 -->\n        <!-- transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  -->\n        <div\n          class=\"str-chat__message-bubble\"\n          style=\"transform: {{\n            imageAttachmentModalState === 'opened'\n              ? 'none'\n              : 'translate3d(0, 0, 0)'\n          }}\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <ng-container\n              *ngTemplateOutlet=\"attachmentsTemplate\"\n            ></ng-container>\n          </ng-container>\n          <div\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n          >\n            <div\n              data-testid=\"inner-message\"\n              class=\"\n                str-chat__message-text-inner str-chat__message-simple-text-inner\n              \"\n              [class.str-chat__message-light-text-inner--has-attachment]=\"\n                hasAttachment\n              \"\n              (click)=\"\n                message?.status === 'failed' && message?.errorStatusCode !== 403\n                  ? resendMessage()\n                  : undefined\n              \"\n              (keyup.enter)=\"\n                message?.status === 'failed' && message?.errorStatusCode !== 403\n                  ? resendMessage()\n                  : undefined\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                data-testid=\"client-error-message\"\n                *ngIf=\"message?.type === 'error'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\n              >\n                {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n              </div>\n              <div\n                data-testid=\"error-message\"\n                *ngIf=\"message?.status === 'failed'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\n              >\n                {{\n                  (message?.errorStatusCode === 403\n                    ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                    : \"streamChat.Message Failed \u00B7 Click to try again\"\n                  ) | translate\n                }}\n              </div>\n              <div data-testid=\"text\">\n                <p>\n                  <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                  <ng-container *ngFor=\"let part of messageTextParts\">\n                    <span\n                      *ngIf=\"part.type === 'text'; else mention\"\n                      [innerHTML]=\"part.content\"\n                    ></span>\n                    <ng-template #mention>\n                      <ng-template #defaultMention let-content=\"content\">\n                        <span class=\"str-chat__message-mention\">{{\n                          content\n                        }}</span>\n                      </ng-template>\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          mentionTemplate || defaultMention;\n                          context: getMentionContext(part)\n                        \"\n                      ></ng-container>\n                    </ng-template>\n                  </ng-container>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            *ngIf=\"themeVersion === '2'\"\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            replyCountButton;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageDateAndSender;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"\n          replyCountButton;\n          context: { position: 'outside-message-bubble', message: message }\n        \"\n      ></ng-container>\n\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageDateAndSender;\n          context: { position: 'outside-message-bubble' }\n        \"\n      ></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [size]=\"20\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentListTemplate || defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- We need these markups in slightly different positions in theme-v1 and theme-v2, this soultion makes that possible without duplicating the code -->\n<ng-template #messageDateAndSender let-position=\"position\">\n  <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n  <ng-container\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n  >\n    <div\n      class=\"str-chat__translation-notice\"\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        data-testid=\"see-original\"\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n        translate\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        data-testid=\"see-translation\"\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n        translate\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <div\n      class=\"\n        str-chat__message-data\n        str-chat__message-simple-data\n        str-chat__message-metadata\n      \"\n    >\n      <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n      <ng-container *ngIf=\"themeVersion === '2'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <span\n        data-testid=\"sender\"\n        *ngIf=\"!isSentByCurrentUser\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n        {{ parsedDate }}\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\n  <ng-container\n    *ngIf=\"\n      isSentByCurrentUser &&\n      ((isLastSentMessage && message?.status === 'received') ||\n        message?.status === 'sending')\n    \"\n  >\n    <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n      <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n    </ng-container>\n    <ng-template #sentStatus>\n      <ng-container\n        *ngIf=\"\n          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          customDeliveredStatusTemplate || defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </popper-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered-icon\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          customSendingStatusTemplate || defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </popper-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          customReadStatusTemplate || defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </popper-content>\n        <stream-avatar-placeholder\n          class=\"str-chat-angular__avatar-host\"\n          data-test-id=\"last-read-user-avatar\"\n          [size]=\"15\"\n          [imageUrl]=\"lastReadUser?.image\"\n          [name]=\"lastReadUser?.name || lastReadUser?.id\"\n          type=\"user\"\n          location=\"message-reader\"\n          [user]=\"lastReadUser\"\n        ></stream-avatar-placeholder>\n        <span\n          data-test-id=\"read-by-length\"\n          *ngIf=\"isReadByMultipleUsers\"\n          class=\"str-chat__message-simple-status-number\"\n        >\n          {{ (message?.readBy)!.length }}\n        </span>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton let-position=\"position\">\n  <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n  <div\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n    class=\"\n      str-chat__message-simple-reply-button\n      str-chat__message-replies-count-button-wrapper\n    \"\n  >\n    <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      <stream-icon-placeholder\n        *ngIf=\"themeVersion === '1'\"\n        stream-icon-placeholder\n        icon=\"reply\"\n      ></stream-icon-placeholder>\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      attachmentListTemplate || defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: i5.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }, { type: i6.NgxPopperjsContentComponent, selector: "popper-content" }, { type: i7.MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: i8.IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: i9.MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: i10.AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: i11.LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i13.TranslatePipe } });
+MessageComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageComponent, selector: "stream-message", inputs: { message: "message", enabledMessageActions: "enabledMessageActions", isLastSentMessage: "isLastSentMessage", mode: "mode", isHighlighted: "isHighlighted" }, viewQueries: [{ propertyName: "container", first: true, predicate: ["container"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  #container\n  class=\"str-chat__message-simple str-chat__message str-chat__message--{{\n    message?.type\n  }} str-chat__message--{{ message?.status }} {{\n    message?.text ? 'str-chat__message--has-text' : 'has-no-text'\n  }}\"\n  [class.str-chat__message--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--other]=\"!isSentByCurrentUser\"\n  [class.str-chat__message-simple--me]=\"isSentByCurrentUser\"\n  [class.str-chat__message--has-attachment]=\"hasAttachment\"\n  [class.str-chat__message--with-reactions]=\"hasReactions\"\n  [class.str-chat__message--highlighted]=\"isHighlighted\"\n  [class.str-chat__message-with-thread-link]=\"shouldDisplayThreadLink\"\n  [class.str-chat__message-send-can-be-retried]=\"\n    message?.status === 'failed' && message?.errorStatusCode !== 403\n  \"\n  data-testid=\"message-container\"\n  (mouseleave)=\"isActionBoxOpen = false\"\n>\n  <ng-container *ngIf=\"!message?.deleted_at; else deletedMessage\">\n    <ng-container *ngIf=\"message?.type !== 'system'; else systemMessage\">\n      <ng-container *ngIf=\"themeVersion === '1'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <stream-avatar-placeholder\n        data-testid=\"avatar\"\n        class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n        [imageUrl]=\"message?.user?.image\"\n        [name]=\"message?.user?.name || message?.user?.id\"\n        type=\"user\"\n        location=\"message-sender\"\n        [user]=\"message?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"str-chat__message-inner\">\n        <div\n          class=\"str-chat__message-simple__actions str-chat__message-options\"\n          data-testid=\"message-options\"\n          [class.str-chat__message-edit-in-progress]=\"isEditing\"\n          *ngIf=\"areOptionsVisible\"\n        >\n          <div\n            data-testid=\"message-actions-container\"\n            #messageActionsToggle\n            class=\"\n              str-chat__message-actions-container\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--options\n            \"\n            [class.str-chat-angular__message-simple__actions__action--options--editing]=\"\n              isEditing\n            \"\n            [popper]=\"popperContent\"\n            [popperTrigger]=\"popperTriggerClick\"\n            [popperPlacement]=\"popperPlacementAuto\"\n            [popperHideOnScroll]=\"true\"\n            [popperHideOnClickOutside]=\"true\"\n            [popperHideOnMouseLeave]=\"false\"\n          >\n            <popper-content #popperContent>\n              <ng-template\n                #defaultMessageActionsBox\n                let-isOpen=\"isOpen\"\n                let-isMine=\"isMine\"\n                let-enabledActions=\"enabledActions\"\n                let-messageInput=\"message\"\n                let-displayedActionsCountChaneHanler=\"displayedActionsCountChaneHanler\"\n                let-isEditingChangeHandler=\"isEditingChangeHandler\"\n              >\n                <stream-message-actions-box\n                  [isOpen]=\"isOpen\"\n                  [isMine]=\"isMine\"\n                  [enabledActions]=\"enabledActions\"\n                  [message]=\"messageInput\"\n                  (displayedActionsCount)=\"\n                    displayedActionsCountChaneHanler($event)\n                  \"\n                  (isEditing)=\"isEditingChangeHandler($event)\"\n                ></stream-message-actions-box>\n              </ng-template>\n              <ng-container\n                *ngTemplateOutlet=\"\n                  messageActionsBoxTemplate || defaultMessageActionsBox;\n                  context: getMessageActionsBoxContext()\n                \"\n              >\n              </ng-container>\n            </popper-content>\n            <div\n              class=\"str-chat__message-actions-box-button\"\n              *ngIf=\"visibleMessageActionsCount > 0\"\n              data-testid=\"action-icon\"\n              (click)=\"isActionBoxOpen = !isActionBoxOpen\"\n              (keyup.enter)=\"isActionBoxOpen = !isActionBoxOpen\"\n            >\n              <stream-icon-placeholder\n                icon=\"action-icon\"\n                class=\"str-chat__message-action-icon\"\n              ></stream-icon-placeholder>\n            </div>\n          </div>\n          <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n          <div\n            *ngIf=\"\n              enabledMessageActions.indexOf('send-reply') !== -1 &&\n              mode === 'main'\n            \"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--thread\n              str-chat__message-reply-in-thread-button\n            \"\n            data-testid=\"reply-in-thread\"\n            (click)=\"setAsActiveParentMessage()\"\n            (keyup.enter)=\"setAsActiveParentMessage()\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reply-in-thread\"\n            ></stream-icon-placeholder>\n          </div>\n          <div\n            *ngIf=\"canReactToMessage\"\n            class=\"\n              str-chat__message-simple__actions__action\n              str-chat__message-simple__actions__action--reactions\n              str-chat__message-reactions-button\n            \"\n            data-testid=\"reaction-icon\"\n            (click)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n            (keyup.enter)=\"isReactionSelectorOpen = !isReactionSelectorOpen\"\n          >\n            <stream-icon-placeholder\n              class=\"str-chat__message-action-icon\"\n              icon=\"reaction-icon\"\n            ></stream-icon-placeholder>\n          </div>\n        </div>\n        <div class=\"str-chat__message-reactions-host\">\n          <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n          <ng-template\n            #defaultMessageReactions\n            let-messageReactionCounts=\"messageReactionCounts\"\n            let-latestReactions=\"latestReactions\"\n            let-isSelectorOpen=\"isSelectorOpen\"\n            let-isSelectorOpenChangeHandler=\"isSelectorOpenChangeHandler\"\n            let-messageId=\"messageId\"\n            let-ownReactions=\"ownReactions\"\n          >\n            <stream-message-reactions\n              [messageReactionCounts]=\"messageReactionCounts\"\n              [latestReactions]=\"latestReactions\"\n              [isSelectorOpen]=\"isSelectorOpen\"\n              (isSelectorOpenChange)=\"isSelectorOpenChangeHandler($event)\"\n              [messageId]=\"messageId\"\n              [ownReactions]=\"ownReactions\"\n            ></stream-message-reactions>\n          </ng-template>\n          <ng-container\n            *ngTemplateOutlet=\"\n              messageReactionsTemplate || defaultMessageReactions;\n              context: getMessageReactionsContext()\n            \"\n          ></ng-container>\n        </div>\n        <!-- transform: translate3d(0, 0, 0) fixes scrolling issues on iOS, see: https://stackoverflow.com/questions/50105780/elements-disappear-when-scrolling-in-safari-webkit-transform-fix-only-works-t/50144295#50144295 -->\n        <!-- transform: none is required when image carousel is open in order for the modal to be correctly positioned, see how the transform property changes the behavior of fixed positioned elements https://developer.mozilla.org/en-US/docs/Web/CSS/position  -->\n        <div\n          class=\"str-chat__message-bubble\"\n          style=\"transform: {{\n            imageAttachmentModalState === 'opened'\n              ? 'none'\n              : 'translate3d(0, 0, 0)'\n          }}\"\n        >\n          <ng-container *ngIf=\"hasAttachment && !message?.quoted_message\">\n            <ng-container\n              *ngTemplateOutlet=\"attachmentsTemplate\"\n            ></ng-container>\n          </ng-container>\n          <div\n            class=\"str-chat__message-text\"\n            tabindex=\"0\"\n            *ngIf=\"message?.text || (message?.quoted_message && hasAttachment)\"\n          >\n            <div\n              data-testid=\"inner-message\"\n              class=\"\n                str-chat__message-text-inner str-chat__message-simple-text-inner\n              \"\n              [class.str-chat__message-light-text-inner--has-attachment]=\"\n                hasAttachment\n              \"\n              (click)=\"\n                message?.status === 'failed' && message?.errorStatusCode !== 403\n                  ? resendMessage()\n                  : undefined\n              \"\n              (keyup.enter)=\"\n                message?.status === 'failed' && message?.errorStatusCode !== 403\n                  ? resendMessage()\n                  : undefined\n              \"\n            >\n              <ng-container *ngTemplateOutlet=\"quotedMessage\"></ng-container>\n              <ng-container *ngIf=\"hasAttachment && message?.quoted_message\">\n                <ng-container\n                  *ngTemplateOutlet=\"attachmentsTemplate\"\n                ></ng-container>\n              </ng-container>\n              <div\n                data-testid=\"client-error-message\"\n                *ngIf=\"message?.type === 'error'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\n              >\n                {{ \"streamChat.Error \u00B7 Unsent\" | translate }}\n              </div>\n              <div\n                data-testid=\"error-message\"\n                *ngIf=\"message?.status === 'failed'\"\n                class=\"\n                  str-chat__simple-message--error-message\n                  str-chat__message--error-message\n                \"\n              >\n                {{\n                  (message?.errorStatusCode === 403\n                    ? \"streamChat.Message Failed \u00B7 Unauthorized\"\n                    : \"streamChat.Message Failed \u00B7 Click to try again\"\n                  ) | translate\n                }}\n              </div>\n              <div data-testid=\"text\">\n                <p>\n                  <!-- eslint-disable-next-line @angular-eslint/template/use-track-by-function -->\n                  <ng-container *ngFor=\"let part of messageTextParts\">\n                    <span\n                      *ngIf=\"part.type === 'text'; else mention\"\n                      [innerHTML]=\"part.content\"\n                    ></span>\n                    <ng-template #mention>\n                      <ng-template #defaultMention let-content=\"content\">\n                        <span class=\"str-chat__message-mention\">{{\n                          content\n                        }}</span>\n                      </ng-template>\n                      <ng-container\n                        *ngTemplateOutlet=\"\n                          mentionTemplate || defaultMention;\n                          context: getMentionContext(part)\n                        \"\n                      ></ng-container>\n                    </ng-template>\n                  </ng-container>\n                </p>\n              </div>\n            </div>\n          </div>\n          <stream-icon-placeholder\n            *ngIf=\"themeVersion === '2'\"\n            class=\"str-chat__message-error-icon\"\n            icon=\"error\"\n          ></stream-icon-placeholder>\n        </div>\n        <ng-container\n          *ngTemplateOutlet=\"\n            replyCountButton;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n        <ng-container\n          *ngTemplateOutlet=\"\n            messageDateAndSender;\n            context: { position: 'inside-message-bubble' }\n          \"\n        ></ng-container>\n      </div>\n      <ng-container\n        *ngTemplateOutlet=\"\n          replyCountButton;\n          context: { position: 'outside-message-bubble', message: message }\n        \"\n      ></ng-container>\n\n      <ng-container\n        *ngTemplateOutlet=\"\n          messageDateAndSender;\n          context: { position: 'outside-message-bubble' }\n        \"\n      ></ng-container>\n    </ng-container>\n  </ng-container>\n</div>\n\n<ng-template #deletedMessage>\n  <div data-testid=\"message-deleted-component\">\n    <div class=\"str-chat__message--deleted-inner\" translate>\n      streamChat.This message was deleted...\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #systemMessage>\n  <div data-testid=\"system-message\" class=\"str-chat__message--system\">\n    <div class=\"str-chat__message--system__text\">\n      <div class=\"str-chat__message--system__line\"></div>\n      <p>{{ message?.text }}</p>\n      <div class=\"str-chat__message--system__line\"></div>\n    </div>\n    <div class=\"str-chat__message--system__date\">\n      {{ parsedDate }}\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #quotedMessage>\n  <div\n    *ngIf=\"message?.quoted_message\"\n    class=\"quoted-message str-chat__quoted-message-preview\"\n    data-testid=\"quoted-message-container\"\n    [class.mine]=\"isSentByCurrentUser\"\n    (click)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n    (keyup.enter)=\"\n      jumpToMessage(\n        (message?.quoted_message)!.id,\n        message?.quoted_message?.parent_id\n      )\n    \"\n  >\n    <stream-avatar-placeholder\n      data-testid=\"qouted-message-avatar\"\n      class=\"str-chat-angular__avatar-host str-chat__message-sender-avatar\"\n      [imageUrl]=\"message?.quoted_message?.user?.image\"\n      [name]=\"\n        message?.quoted_message?.user?.name || message?.quoted_message?.user?.id\n      \"\n      [size]=\"20\"\n      type=\"user\"\n      location=\"quoted-message-sender\"\n      [user]=\"message?.quoted_message?.user || undefined\"\n    ></stream-avatar-placeholder>\n    <div class=\"quoted-message-inner str-chat__quoted-message-bubble\">\n      <ng-container\n        *ngIf=\"\n          message?.quoted_message?.attachments &&\n          message?.quoted_message?.attachments?.length\n        \"\n      >\n        <ng-template\n          #defaultAttachments\n          let-messageId=\"messageId\"\n          let-attachments=\"attachments\"\n          let-parentMessageId=\"parentMessageId\"\n          let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n        >\n          <stream-attachment-list\n            [messageId]=\"messageId\"\n            [attachments]=\"attachments\"\n            [parentMessageId]=\"parentMessageId\"\n            (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n          ></stream-attachment-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentListTemplate || defaultAttachments;\n            context: getQuotedMessageAttachmentListContext()\n          \"\n        ></ng-container>\n      </ng-container>\n      <div\n        data-testid=\"quoted-message-text\"\n        [innerHTML]=\"\n          message?.quoted_message?.translation ||\n          message?.quoted_message?.html ||\n          message?.quoted_message?.text\n        \"\n      ></div>\n    </div>\n  </div>\n</ng-template>\n\n<!-- We need these markups in slightly different positions in theme-v1 and theme-v2, this soultion makes that possible without duplicating the code -->\n<ng-template #messageDateAndSender let-position=\"position\">\n  <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n  <ng-container\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n  >\n    <div\n      class=\"str-chat__translation-notice\"\n      *ngIf=\"shouldDisplayTranslationNotice\"\n      data-testid=\"translation-notice\"\n    >\n      <button\n        data-testid=\"see-original\"\n        *ngIf=\"displayedMessageTextContent === 'translation'\"\n        (click)=\"displayOriginalMessage()\"\n        (keyup.enter)=\"displayOriginalMessage()\"\n        translate\n      >\n        streamChat.See original (automatically translated)\n      </button>\n      <button\n        data-testid=\"see-translation\"\n        *ngIf=\"displayedMessageTextContent === 'original'\"\n        (click)=\"displayTranslatedMessage()\"\n        (keyup.enter)=\"displayTranslatedMessage()\"\n        translate\n      >\n        streamChat.See translation\n      </button>\n    </div>\n    <div\n      class=\"\n        str-chat__message-data\n        str-chat__message-simple-data\n        str-chat__message-metadata\n      \"\n    >\n      <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n      <ng-container *ngIf=\"themeVersion === '2'\">\n        <ng-container *ngTemplateOutlet=\"messageStatus\"></ng-container>\n      </ng-container>\n      <span\n        data-testid=\"sender\"\n        *ngIf=\"!isSentByCurrentUser\"\n        class=\"str-chat__message-simple-name str-chat__message-sender-name\"\n      >\n        {{ message?.user?.name ? message?.user?.name : message?.user?.id }}\n      </span>\n      <span data-testid=\"date\" class=\"str-chat__message-simple-timestamp\">\n        {{ parsedDate }}\n      </span>\n    </div>\n  </ng-container>\n</ng-template>\n\n<ng-template #messageStatus>\n  <ng-container\n    *ngIf=\"\n      isSentByCurrentUser &&\n      ((isLastSentMessage && message?.status === 'received') ||\n        message?.status === 'sending')\n    \"\n  >\n    <ng-container *ngIf=\"message?.status === 'sending'; else sentStatus\">\n      <ng-container *ngTemplateOutlet=\"sendingStatus\"></ng-container>\n    </ng-container>\n    <ng-template #sentStatus>\n      <ng-container\n        *ngIf=\"\n          mode === 'main' && isMessageDeliveredAndRead && canDisplayReadStatus;\n          else deliveredStatus\n        \"\n      >\n        <ng-container *ngTemplateOutlet=\"readStatus\"></ng-container>\n      </ng-container>\n    </ng-template>\n    <ng-template #deliveredStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          customDeliveredStatusTemplate || defaultDeliveredStatus;\n          context: getDeliveredStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultDeliveredStatus>\n      <span\n        *ngIf=\"mode === 'main'\"\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"delivered-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Delivered\" | translate }}\n          </div>\n        </popper-content>\n        <stream-icon-placeholder\n          data-testid=\"delivered-icon\"\n          icon=\"delivered-icon\"\n        ></stream-icon-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #sendingStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          customSendingStatusTemplate || defaultSendingStatus;\n          context: getSendingStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultSendingStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"sending-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div class=\"str-chat__tooltip str-chat__tooltip-angular\">\n            {{ \"streamChat.Sending...\" | translate }}\n          </div>\n        </popper-content>\n        <stream-loading-indicator-placeholder\n          data-testid=\"loading-indicator\"\n        ></stream-loading-indicator-placeholder>\n      </span>\n    </ng-template>\n    <ng-template #readStatus>\n      <ng-container\n        *ngTemplateOutlet=\"\n          customReadStatusTemplate || defaultReadStatus;\n          context: getReadStatusContext()\n        \"\n      ></ng-container>\n    </ng-template>\n    <ng-template #defaultReadStatus>\n      <span\n        class=\"\n          str-chat__message-simple-status\n          str-chat__message-simple-status-angular\n          str-chat__message-status\n        \"\n        data-testid=\"read-indicator\"\n        tabindex=\"0\"\n        [popper]=\"popperContent\"\n        [popperTrigger]=\"popperTriggerHover\"\n        [popperPlacement]=\"popperPlacementAuto\"\n        [popperHideOnScroll]=\"false\"\n        [popperHideOnClickOutside]=\"false\"\n        (hover)=\"$event.stopPropagation()\"\n      >\n        <popper-content #popperContent>\n          <div\n            class=\"str-chat__tooltip str-chat__tooltip-angular\"\n            data-testid=\"read-by-tooltip\"\n          >\n            {{ readByText }}\n          </div>\n        </popper-content>\n        <stream-avatar-placeholder\n          class=\"str-chat-angular__avatar-host\"\n          data-test-id=\"last-read-user-avatar\"\n          [size]=\"15\"\n          [imageUrl]=\"lastReadUser?.image\"\n          [name]=\"lastReadUser?.name || lastReadUser?.id\"\n          type=\"user\"\n          location=\"message-reader\"\n          [user]=\"lastReadUser\"\n        ></stream-avatar-placeholder>\n        <span\n          data-test-id=\"read-by-length\"\n          *ngIf=\"isReadByMultipleUsers\"\n          class=\"str-chat__message-simple-status-number\"\n        >\n          {{ (message?.readBy)!.length }}\n        </span>\n      </span>\n    </ng-template>\n  </ng-container>\n</ng-template>\n\n<ng-template #replyCountButton let-position=\"position\">\n  <!-- eslint-disable @angular-eslint/template/conditional-complexity -->\n  <div\n    *ngIf=\"\n      (position === 'inside-message-bubble' && themeVersion === '1') ||\n      (position === 'outside-message-bubble' && themeVersion === '2')\n    \"\n    class=\"\n      str-chat__message-simple-reply-button\n      str-chat__message-replies-count-button-wrapper\n    \"\n  >\n    <!-- eslint-enable @angular-eslint/template/conditional-complexity -->\n    <button\n      *ngIf=\"shouldDisplayThreadLink\"\n      class=\"str-chat__message-replies-count-button\"\n      data-testid=\"reply-count-button\"\n      (click)=\"setAsActiveParentMessage()\"\n    >\n      <stream-icon-placeholder\n        *ngIf=\"themeVersion === '1'\"\n        stream-icon-placeholder\n        icon=\"reply\"\n      ></stream-icon-placeholder>\n      {{message?.reply_count === 1 ? ('streamChat.1 reply' | translate) : ('streamChat.{{ replyCount }}\n      replies' | translate:replyCountParam)}}\n    </button>\n  </div>\n</ng-template>\n\n<ng-template #attachmentsTemplate>\n  <ng-template\n    #defaultAttachments\n    let-messageId=\"messageId\"\n    let-attachments=\"attachments\"\n    let-parentMessageId=\"parentMessageId\"\n    let-imageModalStateChangeHandler=\"imageModalStateChangeHandler\"\n  >\n    <stream-attachment-list\n      [messageId]=\"messageId\"\n      [attachments]=\"attachments\"\n      [parentMessageId]=\"parentMessageId\"\n      (imageModalStateChange)=\"imageModalStateChangeHandler($event)\"\n    ></stream-attachment-list>\n  </ng-template>\n  <ng-container\n    *ngTemplateOutlet=\"\n      attachmentListTemplate || defaultAttachments;\n      context: getAttachmentListContext()\n    \"\n  ></ng-container>\n</ng-template>\n", components: [{ type: i5.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType"] }, { type: i6.NgxPopperjsContentComponent, selector: "popper-content" }, { type: i7.MessageActionsBoxComponent, selector: "stream-message-actions-box", inputs: ["isOpen", "isMine", "message", "enabledActions"], outputs: ["displayedActionsCount", "isEditing"] }, { type: i8.IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: i9.MessageReactionsComponent, selector: "stream-message-reactions", inputs: ["messageId", "messageReactionCounts", "isSelectorOpen", "latestReactions", "ownReactions"], outputs: ["isSelectorOpenChange"] }, { type: i10.AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: i11.LoadingIndicatorPlaceholderComponent, selector: "stream-loading-indicator-placeholder", inputs: ["size", "color"] }], directives: [{ type: i12.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i12.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i6.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i12.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i13.TranslateDirective, selector: "[translate],[ngx-translate]", inputs: ["translate", "translateParams"] }], pipes: { "translate": i13.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/lib/message-input/autocomplete-textarea/autocomplete-textarea.component.js

@@ -222,7 +222,7 @@ export class AutocompleteTextareaComponent {
     }
 }
 AutocompleteTextareaComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AutocompleteTextareaComponent, deps: [{ token: i1.ChannelService }, { token: i2.ChatClientService }, { token: i3.TransliterationService }, { token: i4.EmojiInputService }, { token: i5.CustomTemplatesService }, { token: i6.ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-AutocompleteTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  [value]=\"value || ''\"\n  autofocus\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ placeholder | translate }}\"\n  class=\"\n    rta__textarea\n    str-chat__textarea__textarea\n    str-chat__angular-textarea\n    str-chat__message-textarea\n  \"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  [mentionConfig]=\"autocompleteConfig\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (blur)=\"inputLeft()\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div class=\"rta__entity\" *ngSwitchCase=\"'mention'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div class=\"rta__entity\" *ngSwitchCase=\"'command'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      [style]=\"'height: ' + themeVersion === '2' ? 56 : 20 + 'px'\"\n      [size]=\"themeVersion === '2' ? 56 : 20\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n    <div *ngIf=\"themeVersion === '2'\" class=\"str-chat__user-item-at\">@</div>\n  </div>\n</ng-template>\n", components: [{ type: i7.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i8.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i10.TranslatePipe } });
+AutocompleteTextareaComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: AutocompleteTextareaComponent, selector: "stream-autocomplete-textarea", inputs: { value: "value", placeholder: "placeholder", areMentionsEnabled: "areMentionsEnabled", inputMode: "inputMode", mentionScope: "mentionScope" }, outputs: { valueChange: "valueChange", send: "send", userMentions: "userMentions" }, host: { properties: { "class": "this.class" } }, viewQueries: [{ propertyName: "messageInput", first: true, predicate: ["input"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<textarea\n  [value]=\"value || ''\"\n  autofocus\n  data-testid=\"textarea\"\n  #input\n  placeholder=\"{{ placeholder | translate }}\"\n  class=\"\n    rta__textarea\n    str-chat__textarea__textarea\n    str-chat__angular-textarea\n    str-chat__message-textarea\n  \"\n  rows=\"1\"\n  (input)=\"inputChanged()\"\n  (keydown.enter)=\"enterHit($event)\"\n  [mentionConfig]=\"autocompleteConfig\"\n  (searchTerm)=\"autcompleteSearchTermChanged($event)\"\n  [mentionListTemplate]=\"autocompleteItem\"\n  (blur)=\"inputLeft()\"\n></textarea>\n<ng-template #autocompleteItem let-item=\"item\">\n  <div class=\"rta rta__item str-chat__emojisearch__item\" [ngSwitch]=\"item.type\">\n    <div class=\"rta__entity\" *ngSwitchCase=\"'mention'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          mentionAutocompleteItemTemplate || defaultMentionTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n    <div class=\"rta__entity\" *ngSwitchCase=\"'command'\">\n      <ng-container\n        *ngTemplateOutlet=\"\n          commandAutocompleteItemTemplate || defaultCommandTemplate;\n          context: { item: item }\n        \"\n      ></ng-container>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultCommandTemplate let-item=\"item\">\n  <div class=\"str-chat__slash-command\">\n    <span class=\"str-chat__slash-command-header\">\n      <strong\n        class=\"str-chat__slash-command-name\"\n        data-testclass=\"command-name\"\n        >{{ item.name }}</strong\n      >\n      <span class=\"str-chat__slash-command-args\"\n        >/{{ item.name }} {{ item.args }}</span\n      >\n    </span>\n    <br />\n  </div>\n</ng-template>\n\n<ng-template #defaultMentionTemplate let-item=\"item\">\n  <div class=\"str-chat__user-item\">\n    <stream-avatar-placeholder\n      data-testclass=\"avatar\"\n      class=\"str-chat__avatar str-chat__avatar--circle\"\n      [style]=\"'height: ' + themeVersion === '2' ? 56 : 20 + 'px'\"\n      [size]=\"themeVersion === '2' ? 56 : 20\"\n      [imageUrl]=\"item.image || item.user?.image\"\n      [name]=\"item.autocompleteLabel\"\n      type=\"user\"\n      location=\"autocomplete-item\"\n      [user]=\"item.user || item\"\n    ></stream-avatar-placeholder>\n    <span data-testclass=\"username\" class=\"str-chat__user-item--name\">{{\n      item.autocompleteLabel\n    }}</span>\n    <div *ngIf=\"themeVersion === '2'\" class=\"str-chat__user-item-at\">@</div>\n  </div>\n</ng-template>\n", components: [{ type: i7.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType"] }], directives: [{ type: i8.MentionDirective, selector: "[mention], [mentionConfig]", inputs: ["mentionConfig", "mention", "mentionListTemplate"], outputs: ["searchTerm", "itemSelected", "opened", "closed"] }, { type: i9.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i9.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i9.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i9.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "translate": i10.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: AutocompleteTextareaComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/lib/message-input/message-input.component.js

@@ -403,7 +403,7 @@ export class MessageInputComponent {
     }
 }
 MessageInputComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageInputComponent, deps: [{ token: i1.ChannelService }, { token: i2.NotificationService }, { token: i3.AttachmentService }, { token: i4.MessageInputConfigService }, { token: textareaInjectionToken }, { token: i0.ComponentFactoryResolver }, { token: i0.ChangeDetectorRef }, { token: i5.ChatClientService }, { token: i6.EmojiInputService }, { token: i7.CustomTemplatesService }, { token: i8.ThemeService }], target: i0.ɵɵFactoryTarget.Component });
-MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$", inputMode: "inputMode" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"themeVersion !== '2'\"\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div class=\"quoted-message-preview\" *ngIf=\"quotedMessage\">\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon-placeholder\n          icon=\"close-no-outline\"\n          style=\"font-size: 15px; line-height: 15px; width: 15px; height: 15px\"\n        ></stream-icon-placeholder>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n        type=\"user\"\n        location=\"quoted-message-sender\"\n        [user]=\"quotedMessage?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"quoted-message-preview-content-inner\">\n        <stream-attachment-list\n          *ngIf=\"\n            quotedMessage?.attachments && quotedMessage?.attachments?.length\n          \"\n          [attachments]=\"quotedMessageAttachments\"\n          [messageId]=\"quotedMessage?.id\"\n        ></stream-attachment-list>\n        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"\n            message?.quoted_message?.translation ||\n            quotedMessage?.html ||\n            quotedMessage?.text\n          \"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <ng-template\n        #defaultAttachmentsPreview\n        let-attachmentUploads$=\"attachmentUploads$\"\n        let-retryUploadHandler=\"retryUploadHandler\"\n        let-deleteUploadHandler=\"deleteUploadHandler\"\n      >\n        <stream-attachment-preview-list\n          [attachmentUploads$]=\"attachmentUploads$\"\n          (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n          (deleteAttachment)=\"deleteUploadHandler($event)\"\n          class=\"rfu-image-previewer-angular-host\"\n        ></stream-attachment-preview-list>\n      </ng-template>\n      <ng-container\n        *ngTemplateOutlet=\"\n          attachmentPreviewListTemplate || defaultAttachmentsPreview;\n          context: getAttachmentPreviewListContext()\n        \"\n      ></ng-container>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"canSendMessages; else disabledTextarea\">\n          <ng-container\n            streamTextarea\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next()\"\n            (send)=\"messageSent()\"\n            [componentRef]=\"textareaRef\"\n            (userMentions)=\"mentionedUsers = $event\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [placeholder]=\"textareaPlaceholder\"\n            [inputMode]=\"inputMode\"\n          ></ng-container>\n        </ng-container>\n        <ng-template #disabledTextarea>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"disabledTextareaText | translate\"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n            data-testid=\"disabled-textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__fileupload-wrapper\"\n            data-testid=\"file-upload-button\"\n          >\n            <div class=\"str-chat__tooltip\">\n              {{ \"streamChat.Attach files\" | translate }}\n            </div>\n            <div class=\"rfu-file-upload-button\">\n              <label>\n                <input\n                  #fileInput\n                  type=\"file\"\n                  class=\"rfu-file-input\"\n                  data-testid=\"file-input\"\n                  [multiple]=\"isMultipleFileUploadEnabled\"\n                  (change)=\"filesSelected(fileInput.files)\"\n                />\n                <span class=\"str-chat__input-flat-fileupload\">\n                  <stream-icon-placeholder\n                    icon=\"file-upload\"\n                  ></stream-icon-placeholder>\n                </span>\n              </label>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n    <button\n      *ngIf=\"canSendMessages && !isCooldownInProgress\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon-placeholder\n        class=\"str-chat__send-button-angular\"\n        icon=\"send\"\n      ></stream-icon-placeholder>\n    </button>\n    <div\n      class=\"str-chat__input-flat-cooldown\"\n      *ngIf=\"isCooldownInProgress\"\n      data-testid=\"cooldown-timer\"\n    >\n      <div class=\"str-chat__message-input-cooldown-text\">\n        {{ cooldown$ | async }}\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  *ngIf=\"themeVersion === '2'\"\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder\n        icon=\"close-no-outline\"\n      ></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"\n        str-chat__message-input-inner\n        str-chat-angular__message-input-inner\n      \"\n    >\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n              id=\"{{ fileInputId }}\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n          *ngIf=\"quotedMessage\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"\n              str-chat-angular__avatar-host\n              str-chat__message-sender-avatar\n            \"\n            [imageUrl]=\"quotedMessage?.user?.image\"\n            [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n            [size]=\"20\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [user]=\"quotedMessage?.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"\n              quoted-message-preview-content-inner\n              str-chat__quoted-message-bubble\n            \"\n          >\n            <stream-attachment-list\n              *ngIf=\"\n                quotedMessage?.attachments && quotedMessage?.attachments?.length\n              \"\n              [attachments]=\"quotedMessageAttachments\"\n              [messageId]=\"quotedMessage?.id\"\n            ></stream-attachment-list>\n            <div\n              class=\"str-chat__quoted-message-text\"\n              data-testid=\"quoted-message-text\"\n              [innerHTML]=\"\n                quotedMessage?.translation ||\n                quotedMessage?.html ||\n                quotedMessage?.text\n              \"\n            ></div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\n            class=\"str-chat__attachment-preview-list-angular-host\"\n          ></stream-attachment-preview-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentPreviewListTemplate || defaultAttachmentsPreview;\n            context: getAttachmentPreviewListContext()\n          \"\n        ></ng-container>\n        <div class=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next()\"\n            (send)=\"messageSent()\"\n            [componentRef]=\"textareaRef\"\n            (userMentions)=\"mentionedUsers = $event\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [placeholder]=\"textareaPlaceholder\"\n          ></ng-container>\n          <div class=\"str-chat__message-textarea-emoji-picker\">\n            <ng-container\n              *ngIf=\"emojiPickerTemplate\"\n              data-testid=\"emoji-picker\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  emojiPickerTemplate;\n                  context: getEmojiPickerContext()\n                \"\n              ></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && !message\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (!textareaValue && (attachmentUploads$ | async)!.length === 0)\n        \"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        class=\"str-chat__message-input-cooldown\"\n        *ngIf=\"isCooldownInProgress\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n", components: [{ type: i9.IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: i10.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }, { type: i11.AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: i12.AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "inputMode", "value", "placeholder"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i13.AsyncPipe, "translate": i15.TranslatePipe } });
+MessageInputComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageInputComponent, selector: "stream-message-input", inputs: { isFileUploadEnabled: "isFileUploadEnabled", areMentionsEnabled: "areMentionsEnabled", mentionScope: "mentionScope", mode: "mode", isMultipleFileUploadEnabled: "isMultipleFileUploadEnabled", message: "message", sendMessage$: "sendMessage$", inputMode: "inputMode" }, outputs: { messageUpdate: "messageUpdate" }, host: { properties: { "class": "this.class" } }, providers: [AttachmentService, EmojiInputService], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "textareaAnchor", first: true, predicate: TextareaDirective, descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"themeVersion !== '2'\"\n  class=\"{{\n    mode === 'main' ? 'str-chat__input-flat' : 'str-chat__small-message-input'\n  }}\"\n  [class.str-chat__input-flat-has-attachments]=\"\n    (attachmentUploads$ | async)!.length > 0\n  \"\n  [class.str-chat__input-flat-quoted]=\"!!quotedMessage\"\n>\n  <div class=\"quoted-message-preview\" *ngIf=\"quotedMessage\">\n    <div class=\"quoted-message-preview-header\">\n      <div>{{ \"streamChat.Reply to Message\" | translate }}</div>\n      <button\n        class=\"str-chat__square-button\"\n        data-testid=\"remove-quote\"\n        (click)=\"deselectMessageToQuote()\"\n        (keyup.enter)=\"deselectMessageToQuote()\"\n      >\n        <stream-icon-placeholder\n          icon=\"close-no-outline\"\n          style=\"font-size: 15px; line-height: 15px; width: 15px; height: 15px\"\n        ></stream-icon-placeholder>\n      </button>\n    </div>\n    <div class=\"quoted-message-preview-content\">\n      <stream-avatar-placeholder\n        data-testid=\"qouted-message-avatar\"\n        class=\"str-chat-angular__avatar-host\"\n        [imageUrl]=\"quotedMessage?.user?.image\"\n        [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n        [size]=\"20\"\n        type=\"user\"\n        location=\"quoted-message-sender\"\n        [user]=\"quotedMessage?.user || undefined\"\n      ></stream-avatar-placeholder>\n      <div class=\"quoted-message-preview-content-inner\">\n        <stream-attachment-list\n          *ngIf=\"\n            quotedMessage?.attachments && quotedMessage?.attachments?.length\n          \"\n          [attachments]=\"quotedMessageAttachments\"\n          [messageId]=\"quotedMessage?.id\"\n        ></stream-attachment-list>\n        <div\n          data-testid=\"quoted-message-text\"\n          [innerHTML]=\"\n            message?.quoted_message?.translation ||\n            quotedMessage?.html ||\n            quotedMessage?.text\n          \"\n        ></div>\n      </div>\n    </div>\n  </div>\n  <div class=\"str-chat__input-flat-wrapper\" style=\"width: 100%\">\n    <div\n      class=\"{{\n        mode === 'main'\n          ? 'str-chat__input-flat--textarea-wrapper'\n          : 'str-chat__small-message-input--textarea-wrapper'\n      }}\"\n    >\n      <ng-template\n        #defaultAttachmentsPreview\n        let-attachmentUploads$=\"attachmentUploads$\"\n        let-retryUploadHandler=\"retryUploadHandler\"\n        let-deleteUploadHandler=\"deleteUploadHandler\"\n      >\n        <stream-attachment-preview-list\n          [attachmentUploads$]=\"attachmentUploads$\"\n          (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n          (deleteAttachment)=\"deleteUploadHandler($event)\"\n          class=\"rfu-image-previewer-angular-host\"\n        ></stream-attachment-preview-list>\n      </ng-template>\n      <ng-container\n        *ngTemplateOutlet=\"\n          attachmentPreviewListTemplate || defaultAttachmentsPreview;\n          context: getAttachmentPreviewListContext()\n        \"\n      ></ng-container>\n      <div class=\"rta str-chat__textarea str-chat-angular__textarea\">\n        <ng-container *ngIf=\"emojiPickerTemplate\" data-testid=\"emoji-picker\">\n          <div\n            class=\"\n              str-chat__input-flat-emojiselect\n              str-chat-angular__emojiselect\n            \"\n          >\n            <ng-container\n              *ngTemplateOutlet=\"\n                emojiPickerTemplate;\n                context: getEmojiPickerContext()\n              \"\n            ></ng-container>\n          </div>\n        </ng-container>\n        <ng-container *ngIf=\"canSendMessages; else disabledTextarea\">\n          <ng-container\n            streamTextarea\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next()\"\n            (send)=\"messageSent()\"\n            [componentRef]=\"textareaRef\"\n            (userMentions)=\"mentionedUsers = $event\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [placeholder]=\"textareaPlaceholder\"\n            [inputMode]=\"inputMode\"\n          ></ng-container>\n        </ng-container>\n        <ng-template #disabledTextarea>\n          <textarea\n            disabled\n            rows=\"1\"\n            [value]=\"disabledTextareaText | translate\"\n            class=\"rta__textarea str-chat__textarea__textarea\"\n            data-testid=\"disabled-textarea\"\n          ></textarea>\n        </ng-template>\n      </div>\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__fileupload-wrapper\"\n            data-testid=\"file-upload-button\"\n          >\n            <div class=\"str-chat__tooltip\">\n              {{ \"streamChat.Attach files\" | translate }}\n            </div>\n            <div class=\"rfu-file-upload-button\">\n              <label>\n                <input\n                  #fileInput\n                  type=\"file\"\n                  class=\"rfu-file-input\"\n                  data-testid=\"file-input\"\n                  [multiple]=\"isMultipleFileUploadEnabled\"\n                  (change)=\"filesSelected(fileInput.files)\"\n                />\n                <span class=\"str-chat__input-flat-fileupload\">\n                  <stream-icon-placeholder\n                    icon=\"file-upload\"\n                  ></stream-icon-placeholder>\n                </span>\n              </label>\n            </div>\n          </div>\n        </ng-template>\n      </ng-container>\n    </div>\n    <button\n      *ngIf=\"canSendMessages && !isCooldownInProgress\"\n      data-testid=\"send-button\"\n      class=\"str-chat__send-button\"\n      (click)=\"messageSent()\"\n      (keyup.enter)=\"messageSent()\"\n    >\n      <stream-icon-placeholder\n        class=\"str-chat__send-button-angular\"\n        icon=\"send\"\n      ></stream-icon-placeholder>\n    </button>\n    <div\n      class=\"str-chat__input-flat-cooldown\"\n      *ngIf=\"isCooldownInProgress\"\n      data-testid=\"cooldown-timer\"\n    >\n      <div class=\"str-chat__message-input-cooldown-text\">\n        {{ cooldown$ | async }}\n      </div>\n    </div>\n  </div>\n</div>\n\n<div\n  *ngIf=\"themeVersion === '2'\"\n  class=\"str-chat__message-input str-chat-angular__message-input\"\n>\n  <div *ngIf=\"quotedMessage\" class=\"str-chat__quoted-message-preview-header\">\n    <div class=\"str-chat__quoted-message-reply-to-message\">\n      {{ \"streamChat.Reply to Message\" | translate }}\n    </div>\n    <button\n      class=\"str-chat__quoted-message-remove\"\n      data-testid=\"remove-quote\"\n      (click)=\"deselectMessageToQuote()\"\n      (keyup.enter)=\"deselectMessageToQuote()\"\n    >\n      <stream-icon-placeholder\n        icon=\"close-no-outline\"\n      ></stream-icon-placeholder>\n    </button>\n  </div>\n  <ng-container *ngIf=\"canSendMessages; else notAllowed\">\n    <div\n      class=\"\n        str-chat__message-input-inner\n        str-chat-angular__message-input-inner\n      \"\n    >\n      <ng-container\n        *ngIf=\"isFileUploadEnabled && isFileUploadAuthorized && canSendMessages\"\n      >\n        <ng-container\n          *ngTemplateOutlet=\"\n            customAttachmentUploadTemplate || defaultAttachmentUpload;\n            context: getAttachmentUploadContext()\n          \"\n        ></ng-container>\n        <ng-template #defaultAttachmentUpload>\n          <div\n            class=\"str-chat__file-input-container\"\n            data-testid=\"file-upload-button\"\n          >\n            <input\n              #fileInput\n              type=\"file\"\n              class=\"str-chat__file-input\"\n              data-testid=\"file-input\"\n              [multiple]=\"isMultipleFileUploadEnabled\"\n              (change)=\"filesSelected(fileInput.files)\"\n              id=\"{{ fileInputId }}\"\n            />\n            <label class=\"str-chat__file-input-label\" for=\"{{ fileInputId }}\">\n              <stream-icon-placeholder icon=\"attach\"></stream-icon-placeholder>\n            </label>\n          </div>\n        </ng-template>\n      </ng-container>\n      <div class=\"str-chat__message-textarea-container\">\n        <div\n          data-testid=\"quoted-message-container\"\n          class=\"str-chat__quoted-message-preview\"\n          *ngIf=\"quotedMessage\"\n        >\n          <stream-avatar-placeholder\n            data-testid=\"qouted-message-avatar\"\n            class=\"\n              str-chat-angular__avatar-host\n              str-chat__message-sender-avatar\n            \"\n            [imageUrl]=\"quotedMessage?.user?.image\"\n            [name]=\"quotedMessage?.user?.name || quotedMessage?.user?.id\"\n            [size]=\"20\"\n            type=\"user\"\n            location=\"quoted-message-sender\"\n            [user]=\"quotedMessage?.user || undefined\"\n          ></stream-avatar-placeholder>\n          <div\n            class=\"\n              quoted-message-preview-content-inner\n              str-chat__quoted-message-bubble\n            \"\n          >\n            <stream-attachment-list\n              *ngIf=\"\n                quotedMessage?.attachments && quotedMessage?.attachments?.length\n              \"\n              [attachments]=\"quotedMessageAttachments\"\n              [messageId]=\"quotedMessage?.id\"\n            ></stream-attachment-list>\n            <div\n              class=\"str-chat__quoted-message-text\"\n              data-testid=\"quoted-message-text\"\n              [innerHTML]=\"\n                quotedMessage?.translation ||\n                quotedMessage?.html ||\n                quotedMessage?.text\n              \"\n            ></div>\n          </div>\n        </div>\n        <ng-template\n          #defaultAttachmentsPreview\n          let-attachmentUploads$=\"attachmentUploads$\"\n          let-retryUploadHandler=\"retryUploadHandler\"\n          let-deleteUploadHandler=\"deleteUploadHandler\"\n        >\n          <stream-attachment-preview-list\n            [attachmentUploads$]=\"attachmentUploads$\"\n            (retryAttachmentUpload)=\"retryUploadHandler($event)\"\n            (deleteAttachment)=\"deleteUploadHandler($event)\"\n            class=\"str-chat__attachment-preview-list-angular-host\"\n          ></stream-attachment-preview-list>\n        </ng-template>\n        <ng-container\n          *ngTemplateOutlet=\"\n            attachmentPreviewListTemplate || defaultAttachmentsPreview;\n            context: getAttachmentPreviewListContext()\n          \"\n        ></ng-container>\n        <div class=\"str-chat__message-textarea-with-emoji-picker\">\n          <ng-container\n            streamTextarea\n            [(value)]=\"textareaValue\"\n            (valueChange)=\"typingStart$.next()\"\n            (send)=\"messageSent()\"\n            [componentRef]=\"textareaRef\"\n            (userMentions)=\"mentionedUsers = $event\"\n            [areMentionsEnabled]=\"areMentionsEnabled\"\n            [mentionScope]=\"mentionScope\"\n            [inputMode]=\"inputMode\"\n            [placeholder]=\"textareaPlaceholder\"\n          ></ng-container>\n          <div class=\"str-chat__message-textarea-emoji-picker\">\n            <ng-container\n              *ngIf=\"emojiPickerTemplate\"\n              data-testid=\"emoji-picker\"\n            >\n              <ng-container\n                *ngTemplateOutlet=\"\n                  emojiPickerTemplate;\n                  context: getEmojiPickerContext()\n                \"\n              ></ng-container>\n            </ng-container>\n          </div>\n        </div>\n      </div>\n      <button\n        *ngIf=\"canSendMessages && !isCooldownInProgress && !message\"\n        [disabled]=\"\n          (attachmentUploadInProgressCounter$ | async)! > 0 ||\n          (!textareaValue && (attachmentUploads$ | async)!.length === 0)\n        \"\n        data-testid=\"send-button\"\n        class=\"str-chat__send-button\"\n        (click)=\"messageSent()\"\n        (keyup.enter)=\"messageSent()\"\n      >\n        <stream-icon-placeholder icon=\"send\"></stream-icon-placeholder>\n      </button>\n      <div\n        class=\"str-chat__message-input-cooldown\"\n        *ngIf=\"isCooldownInProgress\"\n        data-testid=\"cooldown-timer\"\n      >\n        {{ cooldown$ | async }}\n      </div>\n    </div>\n  </ng-container>\n  <ng-template #notAllowed>\n    <div\n      class=\"str-chat__message-input-not-allowed\"\n      data-testid=\"disabled-textarea\"\n    >\n      {{ disabledTextareaText | translate }}\n    </div>\n  </ng-template>\n</div>\n", components: [{ type: i9.IconPlaceholderComponent, selector: "stream-icon-placeholder", inputs: ["icon", "size"] }, { type: i10.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType"] }, { type: i11.AttachmentListComponent, selector: "stream-attachment-list", inputs: ["messageId", "parentMessageId", "attachments"], outputs: ["imageModalStateChange"] }, { type: i12.AttachmentPreviewListComponent, selector: "stream-attachment-preview-list", inputs: ["attachmentUploads$"], outputs: ["retryAttachmentUpload", "deleteAttachment"] }], directives: [{ type: i13.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i13.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i14.TextareaDirective, selector: "[streamTextarea]", inputs: ["componentRef", "areMentionsEnabled", "mentionScope", "inputMode", "value", "placeholder"], outputs: ["valueChange", "send", "userMentions"] }], pipes: { "async": i13.AsyncPipe, "translate": i15.TranslatePipe } });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageInputComponent, decorators: [{
             type: Component,
             args: [{

package/esm2015/lib/message-reactions/message-reactions.component.js

@@ -129,7 +129,7 @@ export class MessageReactionsComponent {
     }
 }
 MessageReactionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageReactionsComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.ChannelService }], target: i0.ɵɵFactoryTarget.Component });
-MessageReactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", isSelectorOpen: "isSelectorOpen", latestReactions: "latestReactions", ownReactions: "ownReactions" }, outputs: { isSelectorOpenChange: "isSelectorOpenChange" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }, { propertyName: "selectorTooltip", first: true, predicate: ["selectorTooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n  [class.str-chat__reaction-list-hidden]=\"isSelectorOpen\"\n  data-testid=\"reaction-list\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      class=\"str-chat__message-reaction\"\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      data-testclass=\"emoji\"\n      [popper]=\"popperContent\"\n      [popperTrigger]=\"popperTriggerHover\"\n      [popperPlacement]=\"popperPlacementAuto\"\n      [popperHideOnScroll]=\"false\"\n      [popperHideOnClickOutside]=\"false\"\n      (hover)=\"$event.stopPropagation()\"\n    >\n      <popper-content #popperContent>\n        <div\n          data-testclass=\"tooltip\"\n          class=\"str-chat__tooltip str-chat__tooltip-angular\"\n        >\n          <span>\n            {{ getUsersByReaction(reactionType) }}\n          </span>\n        </div>\n      </popper-content>\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<div\n  #selectorContainer\n  class=\"str-chat__reaction-selector str-chat__message-reaction-selector\"\n  *ngIf=\"isSelectorOpen\"\n  data-testid=\"reaction-selector\"\n>\n  <div\n    *ngIf=\"tooltipText\"\n    data-testid=\"tooltip\"\n    #selectorTooltip\n    class=\"str-chat__reaction-selector-tooltip\"\n    [ngStyle]=\"{\n      left: tooltipPositions?.tooltip + 'px',\n      visibility: tooltipPositions ? 'visible' : 'hidden'\n    }\"\n  >\n    <div\n      class=\"arrow\"\n      [ngStyle]=\"{ left: tooltipPositions?.arrow + 'px' }\"\n    ></div>\n    <span class=\"latest-user-username\">\n      {{ tooltipText }}\n    </span>\n  </div>\n  <ul\n    class=\"str-chat__message-reactions-list str-chat__message-reactions-options\"\n  >\n    <li\n      class=\"\n        str-chat__message-reactions-option\n        str-chat__message-reactions-list-item\n        str-chat__emoji\n      \"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      [class.str-chat__message-reactions-option-selected]=\"\n        isOwnReaction(reactionType)\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user str-chat__message-reactions-last-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar-placeholder\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n        ></stream-avatar-placeholder>\n      </div>\n      <span\n        class=\"\n          emoji\n          str-chat__emoji-selector-emoji-angular\n          str-chat__message-reaction-emoji\n        \"\n      >\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: i2.NgxPopperjsContentComponent, selector: "popper-content" }, { type: i3.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+MessageReactionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.5", type: MessageReactionsComponent, selector: "stream-message-reactions", inputs: { messageId: "messageId", messageReactionCounts: "messageReactionCounts", isSelectorOpen: "isSelectorOpen", latestReactions: "latestReactions", ownReactions: "ownReactions" }, outputs: { isSelectorOpenChange: "isSelectorOpenChange" }, viewQueries: [{ propertyName: "selectorContainer", first: true, predicate: ["selectorContainer"], descendants: true }, { propertyName: "selectorTooltip", first: true, predicate: ["selectorTooltip"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  *ngIf=\"existingReactions.length > 0\"\n  class=\"str-chat__reaction-list str-chat__message-reactions-container\"\n  [class.str-chat__reaction-list--reverse]=\"true\"\n  [class.str-chat__reaction-list-hidden]=\"isSelectorOpen\"\n  data-testid=\"reaction-list\"\n>\n  <ul class=\"str-chat__message-reactions\">\n    <li\n      class=\"str-chat__message-reaction\"\n      *ngFor=\"\n        let reactionType of existingReactions;\n        trackBy: trackByMessageReaction\n      \"\n      [class.str-chat__message-reaction-own]=\"isOwnReaction(reactionType)\"\n      data-testclass=\"emoji\"\n      [popper]=\"popperContent\"\n      [popperTrigger]=\"popperTriggerHover\"\n      [popperPlacement]=\"popperPlacementAuto\"\n      [popperHideOnScroll]=\"false\"\n      [popperHideOnClickOutside]=\"false\"\n      (hover)=\"$event.stopPropagation()\"\n    >\n      <popper-content #popperContent>\n        <div\n          data-testclass=\"tooltip\"\n          class=\"str-chat__tooltip str-chat__tooltip-angular\"\n        >\n          <span>\n            {{ getUsersByReaction(reactionType) }}\n          </span>\n        </div>\n      </popper-content>\n      <span class=\"emoji str-chat__message-reaction-emoji\">\n        {{ getEmojiByReaction(reactionType) }}&nbsp;\n      </span>\n      <span\n        data-testclass=\"reaction-list-reaction-count\"\n        class=\"str-chat__message-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n    <li>\n      <span\n        data-testid=\"reactions-count\"\n        class=\"str-chat__reaction-list--counter\"\n        >{{ reactionsCount }}</span\n      >\n    </li>\n  </ul>\n</div>\n\n<div\n  #selectorContainer\n  class=\"str-chat__reaction-selector str-chat__message-reaction-selector\"\n  *ngIf=\"isSelectorOpen\"\n  data-testid=\"reaction-selector\"\n>\n  <div\n    *ngIf=\"tooltipText\"\n    data-testid=\"tooltip\"\n    #selectorTooltip\n    class=\"str-chat__reaction-selector-tooltip\"\n    [ngStyle]=\"{\n      left: tooltipPositions?.tooltip + 'px',\n      visibility: tooltipPositions ? 'visible' : 'hidden'\n    }\"\n  >\n    <div\n      class=\"arrow\"\n      [ngStyle]=\"{ left: tooltipPositions?.arrow + 'px' }\"\n    ></div>\n    <span class=\"latest-user-username\">\n      {{ tooltipText }}\n    </span>\n  </div>\n  <ul\n    class=\"str-chat__message-reactions-list str-chat__message-reactions-options\"\n  >\n    <li\n      class=\"\n        str-chat__message-reactions-option\n        str-chat__message-reactions-list-item\n        str-chat__emoji\n      \"\n      *ngFor=\"\n        let reactionType of reactionOptions;\n        trackBy: trackByMessageReaction\n      \"\n      [class.str-chat__message-reactions-option-selected]=\"\n        isOwnReaction(reactionType)\n      \"\n      data-testclass=\"emoji-option\"\n      (click)=\"react(reactionType)\"\n      (keyup.enter)=\"react(reactionType)\"\n    >\n      <div\n        *ngIf=\"getLatestUserByReaction(reactionType) as user\"\n        class=\"latest-user str-chat__message-reactions-last-user\"\n        (click)=\"hideTooltip()\"\n        (keyup.enter)=\"hideTooltip()\"\n        (mouseenter)=\"showTooltip($event, reactionType)\"\n        (mouseleave)=\"hideTooltip()\"\n        attr.data-testid=\"{{ reactionType }}-last-user\"\n      >\n        <stream-avatar-placeholder\n          attr.data-testid=\"{{ reactionType }}-avatar\"\n          [imageUrl]=\"user.image\"\n          [name]=\"user.name || user.id\"\n          [size]=\"20\"\n        ></stream-avatar-placeholder>\n      </div>\n      <span\n        class=\"\n          emoji\n          str-chat__emoji-selector-emoji-angular\n          str-chat__message-reaction-emoji\n        \"\n      >\n        {{ getEmojiByReaction(reactionType) }}\n      </span>\n      <span\n        *ngIf=\"\n          messageReactionCounts[reactionType] &&\n          messageReactionCounts[reactionType]! > 0\n        \"\n        class=\"str-chat__message-reactions-list-item__count\"\n        attr.data-testid=\"{{ reactionType }}-reaction-count\"\n      >\n        {{ messageReactionCounts[reactionType] }}\n      </span>\n    </li>\n  </ul>\n</div>\n", styles: [".emoji {position: relative; display: inline-block; }"], components: [{ type: i2.NgxPopperjsContentComponent, selector: "popper-content" }, { type: i3.AvatarPlaceholderComponent, selector: "stream-avatar-placeholder", inputs: ["name", "imageUrl", "size", "location", "channel", "user", "type", "initialsType"] }], directives: [{ type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i4.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2.NgxPopperjsDirective, selector: "[popper]", inputs: ["popperTimeout", "popperTimeoutAfterShow", "popperApplyClass", "popper", "popperDisabled", "popperPlacement", "popperApplyArrowClass", "popperPreventOverflow", "popperHideOnClickOutside", "popperTrigger", "popperStyles", "popperAriaDescribeBy", "popperAriaRole", "popperBoundaries", "popperCloseOnClickOutside", "popperDisableAnimation", "popperDisableStyle", "popperHideOnMouseLeave", "popperHideOnScroll", "popperAppendTo", "popperModifiers", "popperPositionFixed", "popperDelay", "popperShowOnStart", "popperTarget"], outputs: ["popperOnHidden", "popperOnShown", "popperOnUpdate"], exportAs: ["popper"] }, { type: i4.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.5", ngImport: i0, type: MessageReactionsComponent, decorators: [{
             type: Component,
             args: [{