feat(chat): fix lint errors

Author: teodosiah

src/components/chat/chat-input.ts

@@ -201,9 +201,11 @@ export default class IgcChatInputComponent extends LitElement {
 
         ${this.showEmojiPicker
           ? html`
-                <div class="emoji-picker-container">
-                  <igc-emoji-picker @emoji-selected=${this.addEmoji}></emoji-picker>
-                </div>
+              <div class="emoji-picker-container">
+                <igc-emoji-picker
+                  @emoji-selected=${this.addEmoji}
+                ></igc-emoji-picker>
+              </div>
             `
           : ''}
       </div>

src/components/chat/chat-message-list.ts

@@ -22,13 +22,13 @@ export default class IgcChatMessageListComponent extends LitElement {
     registerComponent(IgcChatMessageListComponent, IgcChatMessageComponent);
   }
 
-  @property({ reflect: true })
+  @property({ reflect: true, attribute: false })
   public user: IgcUser | undefined;
 
-  @property({ reflect: true })
+  @property({ reflect: true, attribute: false })
   public messages: IgcMessage[] = [];
 
-  @property({ reflect: true, attribute: 'typing-users' })
+  @property({ reflect: true, attribute: false })
   public typingUsers: IgcUser[] = [];
 
   @property({ type: Boolean, attribute: 'scroll-bottom' })
@@ -126,7 +126,7 @@ export default class IgcChatMessageListComponent extends LitElement {
                 <igc-chat-message
                   .message=${message}
                   .user=${this.user}
-                  .enable-reactions=${this.enableReactions}
+                  .enableReactions=${this.enableReactions}
                   @add-reaction=${this.handleReaction}
                 ></igc-chat-message>
               `

src/components/chat/chat-message.ts

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit';
 import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import IgcAvatarComponent from '../avatar/avatar.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { IgcMessageAttachmentsComponent } from './message-attachments.js';
@@ -28,10 +29,10 @@ export default class IgcChatMessageComponent extends LitElement {
     );
   }
 
-  @property({ reflect: true })
+  @property({ reflect: true, attribute: false })
   public message: IgcMessage | undefined;
 
-  @property({ reflect: true })
+  @property({ reflect: true, attribute: false })
   public user: IgcUser | undefined;
 
   @property({ type: Boolean, attribute: 'enable-reactions' })
@@ -78,7 +79,11 @@ export default class IgcChatMessageComponent extends LitElement {
 
     return html`
       <div class=${containerClass}>
-        <igc-avatar src=${sender?.avatar} alt=${sender?.name} shape="circle">
+        <igc-avatar
+          src=${ifDefined(sender?.avatar)}
+          alt=${ifDefined(sender?.name)}
+          shape="circle"
+        >
         </igc-avatar>
         <div class="message-content">
           ${this.message?.text.trim()

src/components/chat/chat.ts

@@ -37,13 +37,13 @@ export default class IgcChatComponent extends EventEmitterMixin<
     );
   }
 
-  @property()
+  @property({ attribute: false })
   public user: IgcUser | undefined;
 
-  @property({ reflect: true })
+  @property({ reflect: true, attribute: false })
   public messages: IgcMessage[] = [];
 
-  @property({ reflect: true, attribute: 'typing-users' })
+  @property({ reflect: true, attribute: false })
   public typingUsers: IgcUser[] = [];
 
   @property({ type: Boolean, attribute: 'scroll-bottom' })
@@ -183,14 +183,14 @@ export default class IgcChatComponent extends EventEmitterMixin<
         <igc-chat-message-list
           .messages=${this.messages}
           .user=${this.user}
-          .typing-users=${this.typingUsers}
-          .scroll-bottom=${this.scrollBottom}
-          .enable-reactions=${this.enableReactions}
+          .typingUsers=${this.typingUsers}
+          .scrollBottom=${this.scrollBottom}
+          .enableReactions=${this.enableReactions}
         >
         </igc-chat-message-list>
         <igc-chat-input
-          .enable-attachments=${this.enableAttachments}
-          .enable-emoji-picker=${this.enableEmojiPicker}
+          .enableAttachments=${this.enableAttachments}
+          .enableEmojiPicker=${this.enableEmojiPicker}
           @message-send=${this.handleSendMessage}
         ></igc-chat-input>
       </div>

src/components/chat/message-reactions.ts

@@ -111,10 +111,12 @@ export class IgcMessageReactionsComponent extends LitElement {
 
         ${this.showEmojiPicker
           ? html`
-          <div class="emoji-picker-container">
-            <igc-emoji-picker @emoji-selected=${this.addEmoji}></emoji-picker>
-          </div>
-        `
+              <div class="emoji-picker-container">
+                <igc-emoji-picker
+                  @emoji-selected=${this.addEmoji}
+                ></igc-emoji-picker>
+              </div>
+            `
           : ''}
       </div>
     `;