refactor(chat): apply dragging part

Author: teodosiah

src/components/chat/chat-input.ts

@@ -78,7 +78,7 @@ export default class IgcChatInputComponent extends LitElement {
   private inputPlaceholder = '';
 
   @state()
-  private dragClass = '';
+  private dragPart = '';
 
   constructor() {
     super();
@@ -216,7 +216,7 @@ export default class IgcChatInputComponent extends LitElement {
       this._chatState?.isFileTypeAccepted(item.getAsFile() as File, item.type)
     );
 
-    this.dragClass = hasValidFiles ? 'dragging' : '';
+    this.dragPart = hasValidFiles ? 'dragging' : '';
 
     this._chatState?.emitEvent('igcAttachmentDrag');
   }
@@ -241,14 +241,14 @@ export default class IgcChatInputComponent extends LitElement {
       y <= rect.top ||
       y >= rect.bottom
     ) {
-      this.dragClass = '';
+      this.dragPart = '';
     }
   }
 
   private handleDrop(e: DragEvent) {
     e.preventDefault();
     e.stopPropagation();
-    this.dragClass = '';
+    this.dragPart = '';
 
     const files = Array.from(e.dataTransfer?.files || []);
     if (files.length === 0) return;
@@ -330,7 +330,7 @@ export default class IgcChatInputComponent extends LitElement {
 
   protected override render() {
     return html`
-      <div part="input-container" class="${this.dragClass}">
+      <div part="input-container ${this.dragPart}">
         ${this._chatState?.inputAttachments &&
         this._chatState?.inputAttachments.length > 0
           ? this.renderAttachmentsArea()

src/components/chat/chat.spec.ts

@@ -209,7 +209,7 @@ describe('Chat', () => {
       const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
 
       expect(inputArea).shadowDom.to.equal(
-        `<div part="input-container">
+        `<div part="input-container ">
                     <div part="input-wrapper">
                         <igc-textarea
                         part="text-input"
@@ -500,7 +500,7 @@ describe('Chat', () => {
       const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
 
       expect(inputArea).shadowDom.to.equal(
-        `<div part="input-container">
+        `<div part="input-container ">
                     <div part="input-wrapper">
                         <igc-textarea
                         part="text-input"
@@ -562,7 +562,7 @@ describe('Chat', () => {
       expect(eventArgs).to.deep.equal(args);
 
       expect(inputArea).shadowDom.to.equal(
-        `<div part="input-container">
+        `<div part="input-container ">
             <div aria-label="Attachments" part="attachments" role="list">
               <div part="attachment-wrapper" role="listitem">
                 <igc-chip removable="">
@@ -982,7 +982,7 @@ describe('Chat', () => {
       const inputArea = chat.shadowRoot?.querySelector('igc-chat-input');
 
       expect(inputArea).shadowDom.to.equal(
-        `<div part="input-container">
+        `<div part="input-container ">
           <div aria-label="Attachments" part="attachments" role="list">
               <div>
                 <a href=${draftMessage.attachments[0].url} target="_blank">