[AAE-15610] - Fixed column resizing issue (#8742)

* [AAE-15610] - Fixed column resizing issue

* AAE-15610: Code improvement

* AAE-15610: Added coverPadding input to resize directive

* AAE-15610: Code Improvement by setting first and last column width based on padding dynamically

* AAE-15610: Fixing lint issue

lib/core/src/lib/datatable/components/datatable/datatable.component.html

@@ -56,6 +56,7 @@
                 <div
                     adf-resizable
                     #resizableElement="adf-resizable"
+                    [coverPadding]="10"
                     (resizing)="onResizing($event, columnIndex)"
                     (resizeStart)="isResizing = true"
                     (resizeEnd)="onResizingEnd()"

lib/core/src/lib/datatable/components/datatable/datatable.component.ts

@@ -980,7 +980,15 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
 
             headerContainerColumns.forEach((column: HTMLElement, index: number): void => {
                 if (allColumns[index]) {
-                    allColumns[index].width = column.offsetWidth ?? DataTableComponent.MINIMUM_COLUMN_SIZE;
+                    if (index === 0) {
+                        allColumns[index].width =
+                            column.clientWidth - parseInt(window.getComputedStyle(column).paddingLeft, 10);
+                    } else if ( index === headerContainerColumns.length - 1) {
+                        allColumns[index].width =
+                            column.clientWidth - parseInt(window.getComputedStyle(column).paddingRight, 10);
+                    } else {
+                        allColumns[index].width = column.clientWidth;
+                    }
                 }
             });
         }

lib/core/src/lib/datatable/directives/resizable/resizable.directive.spec.ts

@@ -139,4 +139,18 @@ describe('ResizableDirective', () => {
 
         expect(directive.resizing.emit).toHaveBeenCalledWith({ rectangle: { top: 0, left: 0, bottom: 0, right: 120, width: 120 } });
     });
+
+    it('should emit resizing on mousemove considering cover padding', () => {
+        spyOn(directive.resizing, 'emit');
+        directive.coverPadding = 10;
+        directive.resizing.subscribe();
+
+        const mouseDownEvent = new MouseEvent('mousedown');
+        const mouseMoveEvent = new MouseEvent('mousemove', { clientX: 120 });
+
+        directive.mousedown.next({ ...mouseDownEvent, resize: true });
+        directive.mousemove.next(mouseMoveEvent);
+
+        expect(directive.resizing.emit).toHaveBeenCalledWith({ rectangle: { top: 0, left: 0, bottom: 0, right: 130, width: 130 } });
+    });
 });

lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts

@@ -18,7 +18,7 @@
 import { Subject, Observable, Observer, merge } from 'rxjs';
 import { BoundingRectangle, ResizeEvent, IResizeMouseEvent, ICoordinateX } from './types';
 import { map, take, share, filter, pairwise, mergeMap, takeUntil } from 'rxjs/operators';
-import { OnInit, Output, NgZone, OnDestroy, Directive, Renderer2, ElementRef, EventEmitter } from '@angular/core';
+import { OnInit, Output, NgZone, OnDestroy, Directive, Renderer2, ElementRef, EventEmitter, Input } from '@angular/core';
 
 @Directive({
   selector: '[adf-resizable]',
@@ -40,6 +40,11 @@ export class ResizableDirective implements OnInit, OnDestroy {
    */
   @Output() resizeEnd = new EventEmitter<ResizeEvent>();
 
+  /**
+   * This is to cover sum of the left and right padding between resize handler and its parent.
+   */
+  @Input() coverPadding = 0;
+
   mouseup = new Subject<IResizeMouseEvent>();
 
   mousedown = new Subject<IResizeMouseEvent>();
@@ -151,7 +156,7 @@ export class ResizableDirective implements OnInit, OnDestroy {
 
     mousedrag
       .pipe(
-        map(({ clientX }) => this.getNewBoundingRectangle(this.startingRect, clientX))
+        map(({ clientX }) => this.getNewBoundingRectangle(this.startingRect, clientX + this.coverPadding))
       )
       .subscribe((rectangle: BoundingRectangle) => {
         if (this.resizing.observers.length > 0) {