From 6e203d3aa020b4897d8e95229bce83ff098bf31a Mon Sep 17 00:00:00 2001
From: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Date: Mon, 10 Jul 2023 10:39:22 +0200
Subject: [PATCH] [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
---
 .../components/datatable/datatable.component.html  |  1 +
 .../components/datatable/datatable.component.ts    | 10 +++++++++-
 .../resizable/resizable.directive.spec.ts          | 14 ++++++++++++++
 .../directives/resizable/resizable.directive.ts    |  9 +++++++--
 4 files changed, 31 insertions(+), 3 deletions(-)

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.html b/lib/core/src/lib/datatable/components/datatable/datatable.component.html
index 7717b32dd3..255c07138e 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.html
+++ b/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()"
diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts b/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
index 47a241866c..a7b5700def 100644
--- a/lib/core/src/lib/datatable/components/datatable/datatable.component.ts
+++ b/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;
+                    }
                 }
             });
         }
diff --git a/lib/core/src/lib/datatable/directives/resizable/resizable.directive.spec.ts b/lib/core/src/lib/datatable/directives/resizable/resizable.directive.spec.ts
index 0979c12a23..a3ba81d6b6 100644
--- a/lib/core/src/lib/datatable/directives/resizable/resizable.directive.spec.ts
+++ b/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 } });
+    });
 });
diff --git a/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts b/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts
index a0addc3b5a..6095ce2523 100644
--- a/lib/core/src/lib/datatable/directives/resizable/resizable.directive.ts
+++ b/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) {