[MNT-23166] Add resize flag to document list with option to disable blur

docs/content-services/components/document-list.component.md

@@ -60,6 +60,7 @@ Displays the documents from a repository.
 | ---- | ---- | ------------- | ----------- |
 | additionalSorting | [`DataSorting`](../../../lib/core/src/lib/datatable/data/data-sorting.model.ts) |  | Defines default sorting. The format is an array of strings `[key direction, otherKey otherDirection]` i.e. `['name desc', 'nodeType asc']` or `['name asc']`. Set this value if you want a base rule to be added to the sorting apart from the one driven by the header. |
 | allowDropFiles | `boolean` | false | When true, this enables you to drop files directly into subfolders shown as items in the list or into another file to trigger updating it's version. When false, the dropped file will be added to the current folder (ie, the one containing all the items shown in the list). See the [Upload directive](../../core/directives/upload.directive.md) for further details about how the file drop is handled. |
+| blurOnResize | `boolean` | true | Toggles blur when columns of the list are being resized. |
 | columnsPresetKey | `string` |  | Key of columns preset set in extension.json|
 | contentActions | `boolean` | false | Toggles content actions for each row |
 | contentActionsPosition | `string` | "right" | Position of the content actions dropdown menu. Can be set to "left" or "right". |
@@ -71,6 +72,7 @@ Displays the documents from a repository.
 | headerFilters | `boolean` | false | Toggles the header filters mode. |
 | imageResolver | `any \| null` | null | Custom function to choose image file paths to show. See the [Image Resolver Model](image-resolver.model.md) page for more information. |
 | includeFields | `string[]` |  | Include additional information about the node in the server request. For example: association, isLink, isLocked and others. |
+| isResizingEnabled | `boolean` | false | Toggles column resizing for document list. |
 | loading | `boolean` | false | Toggles the loading state and animated spinners for the component. Used in combination with `navigate=false` to perform custom navigation and loading state indication. |
 | locationFormat | `string` | "/" | The default route for all the location-based columns (if declared). |
 | maxColumnsVisible | `number` |  | Limit of possible visible columns, including "$thumbnail" column if provided |

docs/core/components/datatable.component.md

@@ -423,6 +423,7 @@ Learm more about styling your datatable: [Customizing the component's styles](#c
 | actionsPosition | `string` | "right" | Position of the actions dropdown menu. Can be "left" or "right". |
 | actionsVisibleOnHover | `boolean` | false | Toggles whether the actions dropdown should only be visible if the row is hovered over or the dropdown menu is open. |
 | allowFiltering | `boolean` | false | Flag that indicate if the datatable allow the use [facet widget](../../../lib/content-services/src/lib/search/models/facet-widget.interface.ts) search for filtering. |
+| blurOnResize | `boolean` | true | Toggles blur when columns of the datatable are being resized. |
 | columns | `any[]` | \[] | The columns that the datatable will show. |
 | contextMenu | `boolean` | false | Toggles custom context menu for the component. |
 | data | [`DataTableAdapter`](../../../lib/core/src/lib/datatable/data/datatable-adapter.ts) |  | Data source for the table |

lib/content-services/src/lib/document-list/components/document-list.component.html

@@ -16,6 +16,8 @@
     [rowMenuCacheEnabled]="false"
     [stickyHeader]="stickyHeader"
     [allowFiltering]="allowFiltering"
+    [isResizingEnabled]="isResizingEnabled"
+    [blurOnResize]="blurOnResize"
     (showRowContextMenu)="onShowRowContextMenu($event)"
     (showRowActionsMenu)="onShowRowActionsMenu($event)"
     (executeRowAction)="onExecuteRowAction($event)"

lib/content-services/src/lib/document-list/components/document-list.component.ts

@@ -323,6 +323,14 @@ export class DocumentListComponent extends DataTableSchema implements OnInit, On
     @Input()
     maxColumnsVisible?: number;
 
+    /** Enables column resizing for datatable */
+    @Input()
+    isResizingEnabled = false;
+
+    /** Enables blur when resizing datatable columns */
+    @Input()
+    blurOnResize = true;
+
     /** Emitted when the user clicks a list node */
     @Output()
     nodeClick = new EventEmitter<NodeEntityEvent>();

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

@@ -160,7 +160,7 @@
 
     <div
         class="adf-datatable-body"
-        [ngClass]="{ 'adf-blur-datatable-body': isDraggingHeaderColumn || isResizing }"
+        [ngClass]="{ 'adf-blur-datatable-body': blurOnResize && (isDraggingHeaderColumn || isResizing) }"
         role="rowgroup">
         <ng-container *ngIf="!loading && !noPermission">
             <adf-datatable-row *ngFor="let row of data.getRows(); let idx = index"

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

@@ -1646,11 +1646,16 @@ describe('Column Resizing', () => {
     let data: { id: number; name: string }[] = [];
     let dataTableSchema: DataColumn[] = [];
 
+    const getTableBody = (): HTMLDivElement => fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
+
+    const getResizeHandler = (): HTMLDivElement => fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
+
+
     const testClassesAfterResizing = (headerColumnsSelector = '.adf-datatable-cell-header', excludedClass = 'adf-datatable__cursor--pointer') => {
         dataTable.isResizingEnabled = true;
         fixture.detectChanges();
 
-        const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
+        const resizeHandle: HTMLElement = getResizeHandler();
         resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
         fixture.detectChanges();
 
@@ -1685,7 +1690,7 @@ describe('Column Resizing', () => {
     });
 
     it('should NOT display resize handle when the feature is Disabled [isResizingEnabled=false]', () => {
-        const resizeHandle = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
+        const resizeHandle = getResizeHandler();
 
         expect(resizeHandle).toBeNull();
         const headerColumns = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable-cell-header');
@@ -1699,7 +1704,7 @@ describe('Column Resizing', () => {
         dataTable.isResizingEnabled = true;
 
         fixture.detectChanges();
-        const resizeHandle = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
+        const resizeHandle = getResizeHandler();
 
         expect(resizeHandle).not.toBeNull();
         const headerColumns = fixture.debugElement.nativeElement.querySelectorAll('.adf-datatable-cell-header');
@@ -1738,18 +1743,29 @@ describe('Column Resizing', () => {
         expect(dragIcon).toBeNull();
     });
 
-    it('should blur the table body upon resizing starts', () => {
-        dataTable.isResizingEnabled = true;
-        fixture.detectChanges();
+    describe('Datatable blur', () => {
+        beforeEach(() => {
+            dataTable.isResizingEnabled = true;
+            fixture.detectChanges();
 
-        const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
-        resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
-        fixture.detectChanges();
+            const resizeHandle: HTMLElement = getResizeHandler();
+            resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
+            fixture.detectChanges();
+        });
 
-        const tableBody = fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
+        it('should blur the table body upon resizing starts', () => {
+            const tableBody = getTableBody();
+            expect(dataTable.isResizing).toBeTrue();
+            expect(tableBody.classList).toContain('adf-blur-datatable-body');
+        });
 
-        expect(dataTable.isResizing).toBeTrue();
-        expect(tableBody.classList).toContain('adf-blur-datatable-body');
+        it('should not blur the table body upon resizing starts when blurOnResize is false', () => {
+            dataTable.blurOnResize = false;
+            fixture.detectChanges();
+            const tableBody = getTableBody();
+            expect(dataTable.isResizing).toBeTrue();
+            expect(tableBody.classList).not.toContain('adf-blur-datatable-body');
+        });
     });
 
     it('should set column width on resizing', fakeAsync(() => {
@@ -1819,7 +1835,7 @@ describe('Column Resizing', () => {
         tick();
         fixture.detectChanges();
 
-        const tableBody = fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
+        const tableBody = getTableBody();
         const firstCell: HTMLElement = tableBody.querySelector('[data-automation-id="name1"]');
         const secondCell: HTMLElement = tableBody.querySelector('[data-automation-id="name2"]');
 
@@ -1832,7 +1848,7 @@ describe('Column Resizing', () => {
         tick();
         fixture.detectChanges();
 
-        const tableBody = fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
+        const tableBody = getTableBody();
         const firstCell: HTMLElement = tableBody.querySelector('[data-automation-id="name1"]');
         const secondCell: HTMLElement = tableBody.querySelector('[data-automation-id="name2"]');
 
@@ -1844,11 +1860,11 @@ describe('Column Resizing', () => {
         dataTable.isResizingEnabled = true;
         fixture.detectChanges();
 
-        const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
+        const resizeHandle: HTMLElement = getResizeHandler();
         resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
         fixture.detectChanges();
 
-        const tableBody = fixture.debugElement.nativeElement.querySelector('.adf-datatable-body');
+        const tableBody = getTableBody();
 
         expect(dataTable.isResizing).toBeTrue();
         expect(tableBody.classList).toContain('adf-blur-datatable-body');
@@ -1869,7 +1885,7 @@ describe('Column Resizing', () => {
         dataTable.isResizingEnabled = true;
         fixture.detectChanges();
 
-        const resizeHandle: HTMLElement = fixture.debugElement.nativeElement.querySelector('.adf-datatable__resize-handle');
+        const resizeHandle: HTMLElement = getResizeHandler();
         resizeHandle.dispatchEvent(new MouseEvent('mousedown'));
         fixture.detectChanges();
 

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

@@ -236,7 +236,13 @@ export class DataTableComponent implements OnInit, AfterContentInit, OnChanges,
      * Flag that indicates if the datatable allows column resizing.
      */
     @Input()
-    isResizingEnabled: boolean = false;
+    isResizingEnabled = false;
+
+    /**
+     * Flag that indicates if the datatable should be blurred when resizing.
+     */
+     @Input()
+     blurOnResize = true;
 
     headerFilterTemplate: TemplateRef<any>;
     noContentTemplate: TemplateRef<any>;