feat(chat): expose attachment header click event

Author: teodosiah

src/components/chat/chat.ts

@@ -7,11 +7,17 @@ import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import IgcChatInputComponent from './chat-input.js';
 import IgcChatMessageListComponent from './chat-message-list.js';
 import { styles } from './themes/chat.base.css.js';
-import type { IgcMessage, IgcMessageReaction, IgcUser } from './types.js';
+import type {
+  IgcMessage,
+  IgcMessageAttachment,
+  IgcMessageReaction,
+  IgcUser,
+} from './types.js';
 
 export interface IgcChatComponentEventMap {
   igcMessageSend: CustomEvent<IgcMessage>;
   igcTypingChange: CustomEvent<IgcTypingChangeEventArgs>;
+  igcAttachmentClick: CustomEvent<IgcMessageAttachment>;
 }
 
 export interface IgcTypingChangeEventArgs {
@@ -86,6 +92,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
       'message-send',
       this.handleSendMessage as EventListener
     );
+    this.addEventListener(
+      'attachment-click',
+      this.handleAttachmentClick as EventListener
+    );
   }
 
   public override disconnectedCallback() {
@@ -98,6 +108,10 @@ export default class IgcChatComponent extends EventEmitterMixin<
       'add-reaction',
       this.handleAddReaction as EventListener
     );
+    this.removeEventListener(
+      'attachment-click',
+      this.handleAttachmentClick as EventListener
+    );
   }
 
   private handleSendMessage(e: CustomEvent) {
@@ -183,6 +197,11 @@ export default class IgcChatComponent extends EventEmitterMixin<
     });
   }
 
+  private handleAttachmentClick(e: CustomEvent) {
+    const attachmentArgs = e.detail.attachment;
+    this.emitEvent('igcAttachmentClick', { detail: attachmentArgs });
+  }
+
   protected override render() {
     return html`
       <div class="chat-container">

src/components/chat/message-attachments.ts

@@ -64,10 +64,21 @@ export class IgcMessageAttachmentsComponent extends LitElement {
     this.previewImage = '';
   }
 
-  private preventToggle(e: CustomEvent) {
+  private handleToggle(e: CustomEvent, attachment: IgcMessageAttachment) {
+    this.handleAttachmentClick(attachment);
     e.preventDefault();
   }
 
+  private handleAttachmentClick(attachment: IgcMessageAttachment) {
+    this.dispatchEvent(
+      new CustomEvent('attachment-click', {
+        detail: { attachment },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
   protected override render() {
     return html`
       <div class="attachments-container">
@@ -76,8 +87,10 @@ export class IgcMessageAttachmentsComponent extends LitElement {
             <igc-expansion-panel
               indicator-position="none"
               .open=${attachment.type === 'image'}
-              @igcClosing=${this.preventToggle}
-              @igcOpening=${this.preventToggle}
+              @igcClosing=${(ev: CustomEvent) =>
+                this.handleToggle(ev, attachment)}
+              @igcOpening=${(ev: CustomEvent) =>
+                this.handleToggle(ev, attachment)}
             >
               <div slot="title" class="attachment">
                 <div class="details">