Merge pull request #414 from GetStream/avatar-initials

feat: Add initialsType input to avatar

Author: szuperaz

projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.html

@@ -7,6 +7,7 @@
   let-channel="channel"
   let-user="user"
   let-location="location"
+  let-initialsType="initialsType"
 >
   <stream-avatar
     [name]="name"
@@ -16,6 +17,7 @@
     [channel]="channel"
     [user]="user"
     [location]="location"
+    [initialsType]="initialsType"
   ></stream-avatar>
 </ng-template>
 <ng-container

projects/stream-chat-angular/src/lib/avatar-placeholder/avatar-placeholder.component.ts

@@ -45,6 +45,12 @@ export class AvatarPlaceholderComponent {
    * The type of the avatar: channel if channel avatar is displayed, user if user avatar is displayed
    */
   @Input() type: AvatarType | undefined;
+  /**
+   * 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
+   */
+  @Input() initialsType:
+    | 'first-letter-of-first-word'
+    | 'first-letter-of-each-word' = 'first-letter-of-first-word';
   constructor(public customTemplatesService: CustomTemplatesService) {}
 
   getAvatarContext(): AvatarContext {
@@ -56,6 +62,7 @@ export class AvatarPlaceholderComponent {
       type: this.type,
       user: this.user,
       channel: this.channel,
+      initialsType: this.initialsType,
     };
   }
 }

projects/stream-chat-angular/src/lib/avatar/avatar.component.html

@@ -5,7 +5,10 @@
   title="{{ name }}"
   [style]="{
     flexBasis: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',
-    fontSize: 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')',
+    fontSize:
+      initialsType === 'first-letter-of-first-word'
+        ? 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 2 + ')'
+        : 'calc(var(--str-chat__spacing-px, 1px) * ' + size / 3 + ')',
     height: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',
     lineHeight: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')',
     width: 'calc(var(--str-chat__spacing-px, 1px) * ' + size + ')'
@@ -29,7 +32,11 @@
     }"
   />
   <ng-template #fallback>
-    <div data-testid="fallback-img" class="str-chat__avatar-fallback">
+    <div
+      data-testid="fallback-img"
+      style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis"
+      class="str-chat__avatar-fallback"
+    >
       {{ initials }}
     </div>
   </ng-template>

projects/stream-chat-angular/src/lib/avatar/avatar.component.spec.ts

@@ -370,4 +370,13 @@ describe('AvatarComponent', () => {
 
     expect(queryOnlineIndicator()).not.toBeNull();
   });
+
+  it('should display initials correctly, #initialsType is "first-letter-of-each-word"', () => {
+    component.type = 'user';
+    component.initialsType = 'first-letter-of-each-word';
+    component.name = 'John Doe';
+    fixture.detectChanges();
+
+    expect(component.initials).toBe('JD');
+  });
 });

projects/stream-chat-angular/src/lib/avatar/avatar.component.ts

@@ -56,6 +56,12 @@ export class AvatarComponent implements OnChanges {
    * 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.
    */
   @Input() 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
+   */
+  @Input() initialsType:
+    | 'first-letter-of-first-word'
+    | 'first-letter-of-each-word' = 'first-letter-of-first-word';
   isLoaded = false;
   isError = false;
   isOnline = false;
@@ -118,7 +124,14 @@ export class AvatarComponent implements OnChanges {
       }
     }
 
-    return result.charAt(0) || '';
+    const words = result.split(' ');
+    let initials: string;
+    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() {

projects/stream-chat-angular/src/lib/types.ts

@@ -190,6 +190,7 @@ export type AvatarContext = {
   location: AvatarLocation | undefined;
   channel?: Channel<DefaultStreamChatGenerics>;
   user?: User<DefaultStreamChatGenerics>;
+  initialsType?: 'first-letter-of-first-word' | 'first-letter-of-each-word';
 };
 
 export type AttachmentPreviewListContext = {