ACS-7381: Break DataTable dependency on Material Module (#9981)

lib/core/src/lib/core.module.ts

@@ -23,7 +23,7 @@ import { MaterialModule } from './material.module';
 import { ABOUT_DIRECTIVES } from './about/about.module';
 import { CardViewModule } from './card-view/card-view.module';
 import { ContextMenuModule } from './context-menu/context-menu.module';
-import { DataTableModule } from './datatable/datatable.module';
+import { DATATABLE_DIRECTIVES } from './datatable/datatable.module';
 import { InfoDrawerModule } from './info-drawer/info-drawer.module';
 import { LanguageMenuModule } from './language-menu/language-menu.module';
 import { LoginModule } from './login/login.module';
@@ -92,7 +92,7 @@ import { IconComponent } from './icon';
         LoginModule,
         LanguageMenuModule,
         InfoDrawerModule,
-        DataTableModule,
+        ...DATATABLE_DIRECTIVES,
         TemplateModule,
         IconComponent,
         SortingPickerModule,
@@ -130,7 +130,7 @@ import { IconComponent } from './icon';
         LoginModule,
         LanguageMenuModule,
         InfoDrawerModule,
-        DataTableModule,
+        ...DATATABLE_DIRECTIVES,
         TranslateModule,
         TemplateModule,
         SortingPickerModule,

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.spec.ts

@@ -40,8 +40,7 @@ describe('ColumnsSelectorComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule],
+            imports: [CoreTestingModule, ColumnsSelectorComponent]
-            declarations: [ColumnsSelectorComponent]
         }).compileComponents();
 
         fixture = TestBed.createComponent(ColumnsSelectorComponent);

lib/core/src/lib/datatable/components/columns-selector/columns-selector.component.ts

@@ -16,13 +16,31 @@
  */
 
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
 import { DataColumn } from '../../data/data-column.model';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { FilterStringPipe } from '../../../pipes';
 @Component({
     selector: 'adf-datatable-column-selector',
+    standalone: true,
+    imports: [
+        CommonModule,
+        TranslateModule,
+        MatButtonModule,
+        MatIconModule,
+        MatDividerModule,
+        ReactiveFormsModule,
+        MatCheckboxModule,
+        FilterStringPipe
+    ],
     templateUrl: './columns-selector.component.html',
     styleUrls: ['./columns-selector.component.scss'],
     encapsulation: ViewEncapsulation.None
@@ -49,23 +67,16 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy {
     searchQuery = '';
 
     ngOnInit(): void {
-        this.mainMenuTrigger.menuOpened.pipe(
+        this.mainMenuTrigger.menuOpened.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
-            takeUntil(this.onDestroy$)
+            const columns = this.columns.map((column) => ({ ...column }));
-        ).subscribe(() => {
-            const columns = this.columns.map(column => ({...column}));
             this.columnItems = this.columnsSorting ? this.sortColumns(columns) : columns;
         });
 
-        this.mainMenuTrigger.menuClosed.pipe(
+        this.mainMenuTrigger.menuClosed.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
-            takeUntil(this.onDestroy$)
-        ).subscribe(() => {
             this.searchInputControl.setValue('');
         });
 
-        this.searchInputControl.valueChanges.pipe(
+        this.searchInputControl.valueChanges.pipe(debounceTime(300), takeUntil(this.onDestroy$)).subscribe((searchQuery) => {
-            debounceTime(300),
-            takeUntil(this.onDestroy$)
-        ).subscribe((searchQuery) => {
             this.searchQuery = searchQuery;
         });
     }
@@ -89,12 +100,16 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy {
     }
 
     isCheckboxDisabled(column: DataColumn): boolean {
-        return this.maxColumnsVisible && column.isHidden && this.maxColumnsVisible === this.columnItems.filter(dataColumn => !dataColumn.isHidden).length;
+        return (
+            this.maxColumnsVisible &&
+            column.isHidden &&
+            this.maxColumnsVisible === this.columnItems.filter((dataColumn) => !dataColumn.isHidden).length
+        );
     }
 
     private sortColumns(columns: DataColumn[]): DataColumn[] {
-        const shownColumns = columns.filter(column => !column.isHidden);
+        const shownColumns = columns.filter((column) => !column.isHidden);
-        const hiddenColumns = columns.filter(column => column.isHidden);
+        const hiddenColumns = columns.filter((column) => column.isHidden);
 
         return [...shownColumns, ...hiddenColumns];
     }

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

@@ -51,7 +51,7 @@ describe('DataTableCellComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [DataTableCellComponent],
+            imports: [DataTableCellComponent],
             providers: [DataTableService]
         });
 

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

@@ -22,9 +22,13 @@ import { DataTableAdapter } from '../../data/datatable-adapter';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { DataTableService } from '../../services/datatable.service';
+import { CommonModule } from '@angular/common';
+import { ClipboardModule } from '../../../clipboard';
 
 @Component({
     selector: 'adf-datatable-cell',
+    standalone: true,
+    imports: [CommonModule, ClipboardModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container>

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

@@ -31,7 +31,7 @@ describe('DataTableRowComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [DataTableRowComponent]
+            imports: [DataTableRowComponent]
         });
 
         fixture = TestBed.createComponent(DataTableRowComponent);
@@ -51,16 +51,14 @@ describe('DataTableRowComponent', () => {
         component.row = row;
         fixture.detectChanges();
 
-        expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected'))
+        expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected')).not.toBe(true);
-            .not.toBe(true);
     });
 
     it('should not have select class when row data is null', () => {
         row.isSelected = false;
         fixture.detectChanges();
 
-        expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected'))
+        expect(fixture.debugElement.nativeElement.classList.contains('adf-is-selected')).not.toBe(true);
-            .not.toBe(true);
     });
 
     it('should set aria selected to true when row is selected', () => {

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

@@ -15,21 +15,13 @@
  * limitations under the License.
  */
 
-import {
+import { Component, ViewEncapsulation, ElementRef, Input, HostBinding, HostListener, Output, EventEmitter } from '@angular/core';
-    Component,
-    ViewEncapsulation,
-    ElementRef,
-    Input,
-    HostBinding,
-    HostListener,
-    Output,
-    EventEmitter
-} from '@angular/core';
 import { FocusableOption } from '@angular/cdk/a11y';
 import { DataRow } from '../../data/data-row.model';
 
 @Component({
     selector: 'adf-datatable-row',
+    standalone: true,
     template: `<ng-content></ng-content>`,
     encapsulation: ViewEncapsulation.None,
     host: {

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

@@ -34,13 +34,18 @@ import { mockCarsData, mockCarsSchemaDefinition } from '../mocks/datatable.mock'
 import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 
-@Component({ selector: 'adf-custom-column-template-component', template: ` <ng-template #tmplRef></ng-template> ` })
+@Component({
+    selector: 'adf-custom-column-template-component',
+    standalone: true,
+    template: ` <ng-template #tmplRef></ng-template> `
+})
 class CustomColumnTemplateComponent {
     @ViewChild('tmplRef', { static: true }) templateRef: TemplateRef<any>;
 }
 
 @Component({
     selector: 'adf-custom-column-header-component',
+    standalone: true,
     template: ` <ng-template #tmplRef> CUSTOM HEADER </ng-template> `
 })
 class CustomColumnHeaderComponent {
@@ -140,8 +145,7 @@ describe('DataTable', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule],
+            imports: [CoreTestingModule, CustomColumnHeaderComponent]
-            declarations: [CustomColumnHeaderComponent]
         });
         fixture = TestBed.createComponent(DataTableComponent);
         dataTable = fixture.componentInstance;
@@ -1315,8 +1319,7 @@ describe('Accesibility', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule],
+            imports: [CoreTestingModule, CustomColumnTemplateComponent],
-            declarations: [CustomColumnTemplateComponent],
             schemas: [NO_ERRORS_SCHEMA]
         });
         columnCustomTemplate = TestBed.createComponent(CustomColumnTemplateComponent).componentInstance.templateRef;
@@ -1518,8 +1521,7 @@ describe('Drag&Drop column header', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule],
+            imports: [CoreTestingModule, CustomColumnTemplateComponent],
-            declarations: [CustomColumnTemplateComponent],
             schemas: [NO_ERRORS_SCHEMA]
         });
         fixture = TestBed.createComponent(DataTableComponent);
@@ -1619,8 +1621,7 @@ describe('Show/hide columns', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule],
+            imports: [CoreTestingModule, CustomColumnTemplateComponent],
-            declarations: [CustomColumnTemplateComponent],
             schemas: [NO_ERRORS_SCHEMA]
         });
         fixture = TestBed.createComponent(DataTableComponent);
@@ -1726,8 +1727,7 @@ describe('Column Resizing', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule],
+            imports: [CoreTestingModule, CustomColumnTemplateComponent],
-            declarations: [CustomColumnTemplateComponent],
             schemas: [NO_ERRORS_SCHEMA]
         });
         fixture = TestBed.createComponent(DataTableComponent);

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

@@ -18,7 +18,7 @@
 import { applicationConfig, Meta, StoryFn, moduleMetadata } from '@storybook/angular';
 import { CoreStoryModule } from '../../../testing/core.story.module';
 import { DataTableComponent } from './datatable.component';
-import { DataTableModule } from '../../datatable.module';
+import { DATATABLE_DIRECTIVES } from '../../datatable.module';
 import { RouterTestingModule } from '@angular/router/testing';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { mockPathInfos } from '../mocks/datatable.mock';
@@ -29,7 +29,7 @@ export default {
     title: 'Core/Datatable/Datatable',
     decorators: [
         moduleMetadata({
-            imports: [DataTableModule, MatProgressSpinnerModule, RouterTestingModule]
+            imports: [...DATATABLE_DIRECTIVES, MatProgressSpinnerModule, RouterTestingModule]
         }),
         applicationConfig({
             providers: [importProvidersFrom(CoreStoryModule)]
@@ -376,7 +376,6 @@ export default {
         noPermission: false,
         rowMenuCacheEnabled: false,
         allowFiltering: false
-
     }
 } as Meta<DataTableComponent>;
 

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

@@ -40,8 +40,8 @@ import {
     ViewEncapsulation
 } from '@angular/core';
 import { FocusKeyManager } from '@angular/cdk/a11y';
-import { MatCheckboxChange } from '@angular/material/checkbox';
+import { MatCheckboxChange, MatCheckboxModule } from '@angular/material/checkbox';
-import { MatMenuTrigger } from '@angular/material/menu';
+import { MatMenuModule, MatMenuTrigger } from '@angular/material/menu';
 import { Observable, Observer, Subscription } from 'rxjs';
 import { DataColumnListComponent } from '../../data-column/data-column-list.component';
 import { DataColumn } from '../../data/data-column.model';
@@ -57,10 +57,29 @@ import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
 import { DataCellEvent } from '../data-cell.event';
 import { DataRowActionEvent } from '../data-row-action.event';
 import { buffer, debounceTime, filter, map, share } from 'rxjs/operators';
-import { CdkDrag, CdkDragDrop, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
+import { CdkDrag, CdkDragDrop, CdkDragHandle, CdkDropList, moveItemInArray } from '@angular/cdk/drag-drop';
-import { MatIconRegistry } from '@angular/material/icon';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 import { DomSanitizer } from '@angular/platform-browser';
 import { ResizeEvent } from '../../directives/resizable/types';
+import { CommonModule } from '@angular/common';
+import { TranslateModule } from '@ngx-translate/core';
+import { FileTypePipe, FilterOutArrayObjectsByPropPipe, LocalizedDatePipe } from '../../../pipes';
+import { DropZoneDirective } from '../../directives/drop-zone.directive';
+import { ResizableDirective } from '../../directives/resizable/resizable.directive';
+import { IconComponent } from '../../../icon';
+import { ResizeHandleDirective } from '../../directives/resizable/resize-handle.directive';
+import { MatButtonModule } from '@angular/material/button';
+import { UploadDirective } from '../../../directives';
+import { ContextMenuDirective } from '../../../context-menu';
+import { IconCellComponent } from '../icon-cell/icon-cell.component';
+import { DateCellComponent } from '../date-cell/date-cell.component';
+import { LocationCellComponent } from '../location-cell/location-cell.component';
+import { FileSizeCellComponent } from '../filesize-cell/filesize-cell.component';
+import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
+import { BooleanCellComponent } from '../boolean-cell/boolean-cell.component';
+import { JsonCellComponent } from '../json-cell/json-cell.component';
+import { AmountCellComponent } from '../amount-cell/amount-cell.component';
+import { NumberCellComponent } from '../number-cell/number-cell.component';
 
 // eslint-disable-next-line no-shadow
 export enum ShowHeaderMode {
@@ -71,6 +90,37 @@ export enum ShowHeaderMode {
 
 @Component({
     selector: 'adf-datatable',
+    standalone: true,
+    imports: [
+        CommonModule,
+        DataTableRowComponent,
+        CdkDropList,
+        TranslateModule,
+        MatCheckboxModule,
+        FilterOutArrayObjectsByPropPipe,
+        CdkDrag,
+        DropZoneDirective,
+        ResizableDirective,
+        CdkDragHandle,
+        IconComponent,
+        ResizeHandleDirective,
+        MatButtonModule,
+        MatMenuModule,
+        MatIconModule,
+        UploadDirective,
+        ContextMenuDirective,
+        FileTypePipe,
+        IconCellComponent,
+        LocalizedDatePipe,
+        DateCellComponent,
+        LocationCellComponent,
+        FileSizeCellComponent,
+        DataTableCellComponent,
+        BooleanCellComponent,
+        JsonCellComponent,
+        AmountCellComponent,
+        NumberCellComponent
+    ],
     templateUrl: './datatable.component.html',
     styleUrls: ['./datatable.component.scss'],
     encapsulation: ViewEncapsulation.None,

lib/core/src/lib/datatable/components/empty-list/empty-list.component.ts

@@ -19,12 +19,27 @@ import { Component, Directive, ViewEncapsulation } from '@angular/core';
 
 @Component({
     selector: 'adf-empty-list',
+    standalone: true,
     styleUrls: ['./empty-list.component.scss'],
     templateUrl: './empty-list.component.html',
     encapsulation: ViewEncapsulation.None
 })
 export class EmptyListComponent {}
 
-@Directive({ selector: '[adf-empty-list-header]' }) export class EmptyListHeaderDirective {}
+@Directive({
-@Directive({ selector: '[adf-empty-list-body]' }) export class EmptyListBodyDirective {}
+    selector: '[adf-empty-list-header]',
-@Directive({ selector: '[adf-empty-list-footer]' }) export class EmptyListFooterDirective {}
+    standalone: true
+})
+export class EmptyListHeaderDirective {}
+
+@Directive({
+    selector: '[adf-empty-list-body]',
+    standalone: true
+})
+export class EmptyListBodyDirective {}
+
+@Directive({
+    selector: '[adf-empty-list-footer]',
+    standalone: true
+})
+export class EmptyListFooterDirective {}

lib/core/src/lib/datatable/components/filesize-cell/filesize-cell.component.ts

@@ -17,9 +17,13 @@
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
 import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
+import { CommonModule } from '@angular/common';
+import { FileSizePipe } from '../../../pipes';
 
 @Component({
     selector: 'adf-filesize-cell',
+    standalone: true,
+    imports: [CommonModule, FileSizePipe],
     template: `
         <ng-container *ngIf="value$ | async | adfFileSize as fileSize">
             <span [title]="tooltip">{{ fileSize }}</span>
@@ -29,7 +33,6 @@ import { DataTableCellComponent } from '../datatable-cell/datatable-cell.compone
     host: { class: 'adf-filesize-cell' }
 })
 export class FileSizeCellComponent extends DataTableCellComponent implements OnInit {
-
     ngOnInit(): void {
         super.ngOnInit();
     }

lib/core/src/lib/datatable/components/json-cell/json-cell.component.ts

@@ -19,9 +19,13 @@ import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation, Input }
 import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
 import { MatDialog } from '@angular/material/dialog';
 import { EditJsonDialogComponent, EditJsonDialogSettings } from '../../../dialogs/edit-json/edit-json.dialog';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
 
 @Component({
     selector: 'adf-json-cell',
+    standalone: true,
+    imports: [CommonModule, MatButtonModule],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container *ngIf="value$ | async as value; else editEmpty">

lib/core/src/lib/datatable/data-column/data-column-header.component.ts

@@ -22,10 +22,10 @@ import { DataColumnComponent } from './data-column.component';
 
 @Component({
     selector: 'adf-data-column-header',
+    standalone: true,
     template: ''
 })
 export class DateColumnHeaderComponent implements AfterContentInit {
-
     @ContentChild(TemplateRef)
     public header: TemplateRef<any>;
 

lib/core/src/lib/datatable/data-column/data-column-list.component.ts

@@ -22,10 +22,9 @@ import { DataColumnComponent } from './data-column.component';
 
 @Component({
     selector: 'data-columns',
+    standalone: true,
     template: ''
 })
 export class DataColumnListComponent {
-
     @ContentChildren(DataColumnComponent) columns: QueryList<DataColumnComponent>;
-
 }

lib/core/src/lib/datatable/data-column/data-column.component.stories.ts

@@ -17,7 +17,7 @@
 
 import { applicationConfig, Meta, StoryFn, moduleMetadata } from '@storybook/angular';
 import { DataColumnComponent } from './data-column.component';
-import { DataTableModule } from '../datatable.module';
+import { DATATABLE_DIRECTIVES } from '../datatable.module';
 import { CoreStoryModule } from '../../testing/core.story.module';
 import * as mockData from '../../mock/data-column.mock';
 import { RouterTestingModule } from '@angular/router/testing';
@@ -29,7 +29,7 @@ export default {
     title: 'Core/Data Column/Data Column',
     decorators: [
         moduleMetadata({
-            imports: [DataTableModule, RouterTestingModule]
+            imports: [...DATATABLE_DIRECTIVES, RouterTestingModule]
         }),
         applicationConfig({
             providers: [importProvidersFrom(CoreStoryModule)]
@@ -37,8 +37,7 @@ export default {
     ],
     argTypes: {
         copyContent: {
-            description:
+            description: 'Enables/disables a Clipboard directive to allow copying of cell contents.',
-                'Enables/disables a Clipboard directive to allow copying of cell contents.',
             control: { type: 'boolean' },
             table: {
                 category: 'Component Inputs',
@@ -48,8 +47,7 @@ export default {
             }
         },
         cssClass: {
-            description:
+            description: 'Additional CSS class to be applied to column (header and cells).',
-                'Additional CSS class to be applied to column (header and cells).',
             control: { type: 'text' },
             table: {
                 category: 'Component Inputs',
@@ -59,8 +57,7 @@ export default {
             }
         },
         customData: {
-            description:
+            description: 'You can specify any custom data which can be used by any specific feature',
-                'You can specify any custom data which can be used by any specific feature',
             control: { disable: true },
             table: {
                 category: 'Component Inputs',
@@ -122,8 +119,7 @@ export default {
             }
         },
         format: {
-            description:
+            description: 'Used for location type. Setups root path for router navigation.',
-                'Used for location type. Setups root path for router navigation.',
             control: { type: 'text', disable: true },
             table: {
                 category: 'Component Inputs',
@@ -169,8 +165,7 @@ export default {
             }
         },
         key: {
-            description:
+            description: 'Data source key. Can be either a column/property key like title or a property path like `createdBy.name`.',
-                'Data source key. Can be either a column/property key like title or a property path like `createdBy.name`.',
             control: { type: 'text', disable: false },
             table: {
                 category: 'Component Inputs',
@@ -180,8 +175,7 @@ export default {
             }
         },
         sortable: {
-            description:
+            description: 'Toggles ability to sort by this column, for example by clicking the column header.',
-                'Toggles ability to sort by this column, for example by clicking the column header.',
             control: { type: 'boolean' },
             table: {
                 category: 'Component Inputs',
@@ -194,8 +188,7 @@ export default {
             }
         },
         sortingKey: {
-            description:
+            description: 'When using server side sorting the column used by the api call where the sorting will be performed',
-                'When using server side sorting the column used by the api call where the sorting will be performed',
             control: { disable: true },
             table: {
                 category: 'Component Inputs',
@@ -235,18 +228,7 @@ export default {
             description:
                 'Value type for the column. Possible settings are: `text`, `icon`, `image`, `date`, `fileSize`, `location`, `boolean`, `amount`, `number` and `json`.',
             control: { type: 'select', disable: false },
-            options: [
+            options: ['text', 'icon', 'image', 'date', 'fileSize', 'location', 'boolean', 'amount', 'number', 'json'],
-                'text',
-                'icon',
-                'image',
-                'date',
-                'fileSize',
-                'location',
-                'boolean',
-                'amount',
-                'number',
-                'json'
-            ],
             table: {
                 category: 'Component Inputs',
                 type: {
@@ -258,8 +240,7 @@ export default {
             }
         },
         currencyConfig: {
-            description:
+            description: `The currencyConfig input allows you to customize the formatting and display of currency values within the component.`,
-                `The currencyConfig input allows you to customize the formatting and display of currency values within the component.`,
             control: { type: 'object', disable: true },
             table: {
                 category: 'Component Inputs',
@@ -272,8 +253,7 @@ export default {
             }
         },
         decimalConfig: {
-            description:
+            description: `The decimalConfig input allows you to customize the formatting and display of decimal values within the component.`,
-                `The decimalConfig input allows you to customize the formatting and display of decimal values within the component.`,
             control: { type: 'object', disable: true },
             table: {
                 category: 'Component Inputs',
@@ -286,8 +266,7 @@ export default {
             }
         },
         dateConfig: {
-            description:
+            description: `The dateConfig input allows you to configure date formatting and localization for a component.`,
-                `The dateConfig input allows you to configure date formatting and localization for a component.`,
             control: { type: 'object', disable: true },
             table: {
                 category: 'Component Inputs',
@@ -345,8 +324,7 @@ export default {
     }
 } as Meta<DataColumnComponent>;
 
-const formatCustomTooltip = (row: DataRow): string =>
+const formatCustomTooltip = (row: DataRow): string => (row ? 'This is ' + row.getValue('firstname') : null);
-    row ? 'This is ' + row.getValue('firstname') : null;
 
 const template: StoryFn<DataColumnComponent> = (args: DataColumnComponent & { rows: DataRow[] }) => ({
     props: args,
@@ -525,4 +503,3 @@ NumberColumn.args = {
     type: 'number',
     title: 'Number Column'
 };
-

lib/core/src/lib/datatable/data-column/data-column.component.ts

@@ -23,10 +23,10 @@ import { CurrencyConfig, DateConfig, DecimalConfig } from '../data/data-column.m
 
 @Component({
     selector: 'data-column',
+    standalone: true,
     template: ''
 })
 export class DataColumnComponent implements OnInit {
-
     /** Id of the Column */
     @Input()
     id: string = '';

lib/core/src/lib/datatable/data-column/data-column.module.ts

@@ -1,40 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { CommonModule } from '@angular/common';
-import { NgModule } from '@angular/core';
-
-import { DataColumnListComponent } from './data-column-list.component';
-import { DataColumnComponent } from './data-column.component';
-import { DateColumnHeaderComponent } from './data-column-header.component';
-
-@NgModule({
-    imports: [
-        CommonModule
-    ],
-    declarations: [
-        DataColumnComponent,
-        DataColumnListComponent,
-        DateColumnHeaderComponent
-    ],
-    exports: [
-        DataColumnComponent,
-        DataColumnListComponent,
-        DateColumnHeaderComponent
-    ]
-})
-export class DataColumnModule {}

lib/core/src/lib/datatable/datatable.module.ts

@@ -15,25 +15,18 @@
  * limitations under the License.
  */
 
-import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { RouterModule } from '@angular/router';
-import { TranslateModule } from '@ngx-translate/core';
-
-import { MaterialModule } from '../material.module';
-import { ContextMenuModule } from '../context-menu/context-menu.module';
-import { PipeModule } from '../pipes/pipe.module';
-
-import { DirectiveModule } from '../directives/directive.module';
 import { DataTableCellComponent } from './components/datatable-cell/datatable-cell.component';
 import { DataTableRowComponent } from './components/datatable-row/datatable-row.component';
 import { DataTableComponent } from './components/datatable/datatable.component';
 import { DateCellComponent } from './components/date-cell/date-cell.component';
 import { ColumnsSelectorComponent } from './components/columns-selector/columns-selector.component';
-import { EmptyListBodyDirective,
+import {
+    EmptyListBodyDirective,
     EmptyListComponent,
     EmptyListFooterDirective,
-    EmptyListHeaderDirective } from './components/empty-list/empty-list.component';
+    EmptyListHeaderDirective
+} from './components/empty-list/empty-list.component';
 import { FileSizeCellComponent } from './components/filesize-cell/filesize-cell.component';
 import { LocationCellComponent } from './components/location-cell/location-cell.component';
 import { LoadingContentTemplateDirective } from './directives/loading-template.directive';
@@ -45,88 +38,53 @@ import { CustomLoadingContentTemplateDirective } from './directives/custom-loadi
 import { CustomNoPermissionTemplateDirective } from './directives/custom-no-permission-template.directive';
 import { MainMenuDataTableTemplateDirective } from './directives/main-data-table-action-template.directive';
 import { JsonCellComponent } from './components/json-cell/json-cell.component';
-import { ClipboardModule } from '../clipboard/clipboard.module';
 import { DropZoneDirective } from './directives/drop-zone.directive';
-import { DragDropModule } from '@angular/cdk/drag-drop';
-import { IconModule } from '../icon/icon.module';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { DataColumnComponent, DataColumnListComponent, DateColumnHeaderComponent } from './data-column';
-import { ResizableModule } from './directives/resizable/resizable.module';
-import { DataColumnModule } from './data-column/data-column.module';
 import { BooleanCellComponent } from './components/boolean-cell/boolean-cell.component';
 import { AmountCellComponent } from './components/amount-cell/amount-cell.component';
 import { NumberCellComponent } from './components/number-cell/number-cell.component';
 import { LocalizedDatePipe } from '../pipes';
 import { IconCellComponent } from './components/icon-cell/icon-cell.component';
+import { ResizableDirective } from './directives/resizable/resizable.directive';
+import { ResizeHandleDirective } from './directives/resizable/resize-handle.directive';
 
-@NgModule({
+export const DATATABLE_DIRECTIVES = [
-    imports: [
-        RouterModule,
-        MaterialModule,
-        CommonModule,
-        TranslateModule,
-        ContextMenuModule,
-        PipeModule,
-        DirectiveModule,
-        ClipboardModule,
-        DragDropModule,
-        IconModule,
-        FormsModule,
-        ReactiveFormsModule,
-        ResizableModule,
-        DataColumnModule,
     BooleanCellComponent,
     AmountCellComponent,
     NumberCellComponent,
     LocationCellComponent,
     DateCellComponent,
-        LocalizedDatePipe,
+    IconCellComponent,
-        IconCellComponent
-    ],
-    declarations: [
-        DataTableComponent,
-        EmptyListComponent,
-        EmptyListHeaderDirective,
-        EmptyListBodyDirective,
-        EmptyListFooterDirective,
-        DataTableCellComponent,
-        DataTableRowComponent,
-        FileSizeCellComponent,
-        JsonCellComponent,
     ColumnsSelectorComponent,
-        NoContentTemplateDirective,
-        NoPermissionTemplateDirective,
-        LoadingContentTemplateDirective,
-        HeaderFilterTemplateDirective,
-        CustomEmptyContentTemplateDirective,
-        CustomLoadingContentTemplateDirective,
-        CustomNoPermissionTemplateDirective,
-        MainMenuDataTableTemplateDirective,
-        DropZoneDirective
-    ],
-    exports: [
-        DataTableComponent,
-        EmptyListComponent,
-        EmptyListHeaderDirective,
-        EmptyListBodyDirective,
-        EmptyListFooterDirective,
-        DataTableCellComponent,
-        DataTableRowComponent,
-        ColumnsSelectorComponent,
-        FileSizeCellComponent,
-        JsonCellComponent,
-        NoContentTemplateDirective,
-        NoPermissionTemplateDirective,
-        LoadingContentTemplateDirective,
-        HeaderFilterTemplateDirective,
-        CustomEmptyContentTemplateDirective,
-        CustomLoadingContentTemplateDirective,
-        CustomNoPermissionTemplateDirective,
-        MainMenuDataTableTemplateDirective,
-        DropZoneDirective,
     DataColumnComponent,
     DataColumnListComponent,
-        DateColumnHeaderComponent
+    DateColumnHeaderComponent,
-    ]
+    LocalizedDatePipe,
+    ResizableDirective,
+    ResizeHandleDirective,
+    DropZoneDirective,
+    EmptyListComponent,
+    EmptyListHeaderDirective,
+    EmptyListBodyDirective,
+    EmptyListFooterDirective,
+    FileSizeCellComponent,
+    JsonCellComponent,
+    NoContentTemplateDirective,
+    NoPermissionTemplateDirective,
+    LoadingContentTemplateDirective,
+    HeaderFilterTemplateDirective,
+    CustomEmptyContentTemplateDirective,
+    CustomLoadingContentTemplateDirective,
+    CustomNoPermissionTemplateDirective,
+    MainMenuDataTableTemplateDirective,
+    DataTableRowComponent,
+    DataTableCellComponent,
+    DataTableComponent
+] as const;
+
+/** @deprecated use `...DATATABLE_DIRECTIVES` instead, or import standalone components directly */
+@NgModule({
+    imports: [...DATATABLE_DIRECTIVES],
+    exports: [...DATATABLE_DIRECTIVES]
 })
 export class DataTableModule {}

lib/core/src/lib/datatable/directives/custom-empty-content-template.directive.ts

@@ -23,7 +23,7 @@ import { Directive } from '@angular/core';
  * adf-custom-empty-content-template.
  */
 @Directive({
-    selector: 'adf-custom-empty-content-template, empty-folder-content'
+    selector: 'adf-custom-empty-content-template, empty-folder-content',
+    standalone: true
 })
-
 export class CustomEmptyContentTemplateDirective {}

lib/core/src/lib/datatable/directives/custom-loading-template.directive.ts

@@ -18,6 +18,7 @@
 import { Directive } from '@angular/core';
 
 @Directive({
-    selector: 'adf-custom-loading-content-template'
+    selector: 'adf-custom-loading-content-template',
+    standalone: true
 })
 export class CustomLoadingContentTemplateDirective {}

lib/core/src/lib/datatable/directives/custom-no-permission-template.directive.ts

@@ -23,6 +23,7 @@ import { Directive } from '@angular/core';
  * adf-custom-no-permission-template.
  */
 @Directive({
-    selector: 'adf-custom-no-permission-template, no-permission-content'
+    selector: 'adf-custom-no-permission-template, no-permission-content',
+    standalone: true
 })
 export class CustomNoPermissionTemplateDirective {}

lib/core/src/lib/datatable/directives/drop-zone.directive.ts

@@ -20,7 +20,8 @@ import { DataRow } from '../data/data-row.model';
 import { DataColumn } from '../data/data-column.model';
 
 @Directive({
-    selector: '[adf-drop-zone]'
+    selector: '[adf-drop-zone]',
+    standalone: true
 })
 export class DropZoneDirective implements OnInit, OnDestroy {
     private element: HTMLElement;

lib/core/src/lib/datatable/directives/header-filter-template.directive.ts

@@ -19,15 +19,14 @@ import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular
 import { DataTableComponent } from '../components/datatable/datatable.component';
 
 @Directive({
-    selector: 'adf-header-filter-template'
+    selector: 'adf-header-filter-template',
+    standalone: true
 })
 export class HeaderFilterTemplateDirective implements AfterContentInit {
-
     @ContentChild(TemplateRef)
     template: any;
 
-    constructor(private dataTable: DataTableComponent) {
+    constructor(private dataTable: DataTableComponent) {}
-    }
 
     ngAfterContentInit() {
         if (this.dataTable) {

lib/core/src/lib/datatable/directives/loading-template.directive.ts

@@ -22,20 +22,18 @@ import { DataTableComponent } from '../components/datatable/datatable.component'
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
 @Directive({
-    selector: 'adf-loading-content-template, loading-content-template'
+    selector: 'adf-loading-content-template, loading-content-template',
+    standalone: true
 })
 export class LoadingContentTemplateDirective implements AfterContentInit {
-
     @ContentChild(TemplateRef)
     template: any;
 
-    constructor(private dataTable: DataTableComponent) {
+    constructor(private dataTable: DataTableComponent) {}
-    }
 
     ngAfterContentInit() {
         if (this.dataTable) {
             this.dataTable.loadingTemplate = this.template;
         }
     }
-
 }

lib/core/src/lib/datatable/directives/main-data-table-action-template.directive.ts

@@ -19,10 +19,10 @@ import { AfterContentInit, ContentChild, Directive, TemplateRef } from '@angular
 import { DataTableComponent } from '../components/datatable/datatable.component';
 
 @Directive({
-    selector: 'adf-main-menu-datatable-template'
+    selector: 'adf-main-menu-datatable-template',
+    standalone: true
 })
 export class MainMenuDataTableTemplateDirective implements AfterContentInit {
-
     @ContentChild(TemplateRef)
     template: any;
 

lib/core/src/lib/datatable/directives/no-content-template.directive.ts

@@ -22,15 +22,14 @@ import { DataTableComponent } from '../components/datatable/datatable.component'
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
 @Directive({
-    selector: 'adf-no-content-template, no-content-template'
+    selector: 'adf-no-content-template, no-content-template',
+    standalone: true
 })
 export class NoContentTemplateDirective implements AfterContentInit {
-
     @ContentChild(TemplateRef)
     template: any;
 
-    constructor(private dataTable: DataTableComponent) {
+    constructor(private dataTable: DataTableComponent) {}
-    }
 
     ngAfterContentInit() {
         if (this.dataTable) {

lib/core/src/lib/datatable/directives/no-permission-template.directive.ts

@@ -22,15 +22,14 @@ import { DataTableComponent } from '../components/datatable/datatable.component'
  * Directive selectors without adf- prefix will be deprecated on 3.0.0
  */
 @Directive({
-    selector: 'adf-no-permission-template, no-permission-template'
+    selector: 'adf-no-permission-template, no-permission-template',
+    standalone: true
 })
 export class NoPermissionTemplateDirective implements AfterContentInit {
-
     @ContentChild(TemplateRef)
     template: any;
 
-    constructor(private dataTable: DataTableComponent) {
+    constructor(private dataTable: DataTableComponent) {}
-    }
 
     ngAfterContentInit() {
         if (this.dataTable) {

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

@@ -54,7 +54,7 @@ describe('ResizableDirective', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [ResizableDirective],
+            imports: [ResizableDirective],
             providers: [
                 { provide: Renderer2, useValue: rendererMock },
                 { provide: ElementRef, useValue: elementRefMock }
@@ -125,7 +125,9 @@ describe('ResizableDirective', () => {
         directive.mousedown.next({ ...mouseDownEvent, resize: true });
         directive.mouseup.next(mouseUpEvent);
 
-        expect(directive.resizeEnd.emit).toHaveBeenCalledWith({ rectangle: { top: 0, left: 0, right: 0, width: 150, height: 0, bottom: 0, scrollTop: 0, scrollLeft: 0 } });
+        expect(directive.resizeEnd.emit).toHaveBeenCalledWith({
+            rectangle: { top: 0, left: 0, right: 0, width: 150, height: 0, bottom: 0, scrollTop: 0, scrollLeft: 0 }
+        });
     });
 
     it('should emit resizing on mousemove', () => {

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

@@ -22,6 +22,7 @@ import { OnInit, Output, NgZone, OnDestroy, Directive, Renderer2, ElementRef, Ev
 
 @Directive({
     selector: '[adf-resizable]',
+    standalone: true,
     exportAs: 'adf-resizable'
 })
 export class ResizableDirective implements OnInit, OnDestroy {

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

@@ -1,26 +0,0 @@
-/*!
- * @license
- * Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-import { NgModule } from '@angular/core';
-import { ResizableDirective } from './resizable.directive';
-import { ResizeHandleDirective } from './resize-handle.directive';
-
-@NgModule({
-  declarations: [ResizableDirective, ResizeHandleDirective],
-  exports: [ResizableDirective, ResizeHandleDirective]
-})
-export class ResizableModule {}

lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.spec.ts

@@ -35,7 +35,7 @@ describe('ResizeHandleDirective', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [ResizeHandleDirective],
+            imports: [ResizeHandleDirective],
             providers: [
                 { provide: Renderer2, useValue: rendererMock },
                 { provide: ElementRef, useValue: elementRefMock }

lib/core/src/lib/datatable/directives/resizable/resize-handle.directive.ts

@@ -20,7 +20,8 @@ import { ResizableDirective } from './resizable.directive';
 import { Input, OnInit, Directive, Renderer2, ElementRef, OnDestroy, NgZone } from '@angular/core';
 
 @Directive({
-    selector: '[adf-resize-handle]'
+    selector: '[adf-resize-handle]',
+    standalone: true
 })
 export class ResizeHandleDirective implements OnInit, OnDestroy {
     /**

lib/core/src/lib/datatable/public-api.ts

@@ -15,32 +15,37 @@
  * limitations under the License.
  */
 
-export * from './data/datatable-adapter';
+export * from './components/amount-cell/amount-cell.component';
-
+export * from './components/boolean-cell/boolean-cell.component';
-export * from './data/data-row.model';
+export * from './components/columns-selector/columns-selector.component';
-export * from './data/data-row-event.model';
-export * from './data/data-column.model';
-export * from './data/data-sorting.model';
-
-export * from './data/object-datarow.model';
-export * from './data/object-datatable-adapter';
-export * from './data/object-datacolumn.model';
-
-export * from './components/data-cell.event';
-export * from './components/data-row-action.event';
-export * from './directives/drop-zone.directive';
-
 export * from './components/datatable/datatable.component';
 export * from './components/datatable-cell/datatable-cell.component';
 export * from './components/datatable-row/datatable-row.component';
 export * from './components/date-cell/date-cell.component';
 export * from './components/empty-list/empty-list.component';
 export * from './components/filesize-cell/filesize-cell.component';
+export * from './components/icon-cell/icon-cell.component';
 export * from './components/json-cell/json-cell.component';
 export * from './components/location-cell/location-cell.component';
-export * from './components/columns-selector/columns-selector.component';
+export * from './components/number-cell/number-cell.component';
+export * from './components/data-row-action.event';
+export * from './components/data-cell.event';
+
+export * from './data/datatable-adapter';
+export * from './data/data-row.model';
+export * from './data/data-row-event.model';
+export * from './data/data-column.model';
+export * from './data/data-sorting.model';
+export * from './data/object-datarow.model';
+export * from './data/object-datatable-adapter';
+export * from './data/object-datacolumn.model';
 export * from './data/data-table.schema';
 
+export * from './data-column';
+
+export * from './directives/resizable/resizable.directive';
+export * from './directives/resizable/resize-handle.directive';
+export * from './directives/drop-zone.directive';
 export * from './directives/loading-template.directive';
 export * from './directives/no-content-template.directive';
 export * from './directives/no-permission-template.directive';
@@ -52,6 +57,4 @@ export * from './directives/main-data-table-action-template.directive';
 
 export * from './services/datatable.service';
 
-
 export * from './datatable.module';
-export * from './data-column';

lib/core/src/lib/dialogs/dialog/dialog.component.html

@@ -70,7 +70,6 @@
                 mat-stroked-button
                 color="primary"
                 mat-dialog-close
-                adf-auto-focus
                 data-automation-id="adf-dialog-actions-cancel"
             >
                 {{ cancelButtonTitle | translate }}

lib/core/src/lib/dialogs/dialog/dialog.component.ts

@@ -16,14 +16,15 @@
  */
 
 import { Component, Inject, InjectionToken, Injector, OnDestroy, ViewEncapsulation } from '@angular/core';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MAT_DIALOG_DATA, MatDialogModule, MatDialogRef } from '@angular/material/dialog';
 import { AdditionalDialogActionButton, DialogData } from './dialog-data.interface';
 import { BehaviorSubject, Subject } from 'rxjs';
 import { DialogSize, DialogSizes } from './dialog.model';
-import { MaterialModule } from '../../material.module';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { takeUntil } from 'rxjs/operators';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
 
 export const DIALOG_COMPONENT_DATA = new InjectionToken<any>('dialog component data');
 
@@ -32,7 +33,7 @@ export const DIALOG_COMPONENT_DATA = new InjectionToken<any>('dialog component d
     selector: 'adf-dialog',
     templateUrl: './dialog.component.html',
     styleUrls: ['./dialog.component.scss'],
-    imports: [CommonModule, MaterialModule, TranslateModule],
+    imports: [CommonModule, TranslateModule, MatIconModule, MatDialogModule, MatButtonModule],
     encapsulation: ViewEncapsulation.None
 })
 export class DialogComponent implements OnDestroy {

lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.ts

@@ -18,7 +18,7 @@
 /* eslint-disable @angular-eslint/component-selector */
 
 import { Component, OnInit, ViewEncapsulation } from '@angular/core';
-import { WidgetComponent, FormService, DataTableModule, FormBaseModule, DataRow, DataColumn } from '@alfresco/adf-core';
+import { WidgetComponent, FormService, FormBaseModule, DataRow, DataColumn, DataTableComponent } from '@alfresco/adf-core';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { FormCloudService } from '../../../services/form-cloud.service';
@@ -28,7 +28,7 @@ import { DataTablePathParserHelper } from './helpers/data-table-path-parser.help
 
 @Component({
     standalone: true,
-    imports: [CommonModule, TranslateModule, DataTableModule, FormBaseModule],
+    imports: [CommonModule, TranslateModule, FormBaseModule, DataTableComponent],
     selector: 'data-table',
     templateUrl: './data-table.widget.html',
     styleUrls: ['./data-table.widget.scss'],

lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.spec.ts

@@ -24,7 +24,6 @@ import {
     CustomEmptyContentTemplateDirective,
     DataColumn,
     DataRowEvent,
-    DataTableModule,
     getDataColumnMock,
     ObjectDataRow,
     User
@@ -636,9 +635,9 @@ describe('ProcessListCloudComponent: Creating an empty custom template - EmptyTe
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [ProcessServiceCloudTestingModule, DataTableModule, MatProgressSpinnerModule],
+            imports: [ProcessServiceCloudTestingModule, MatProgressSpinnerModule, CustomEmptyContentTemplateDirective],
             providers: [{ provide: PROCESS_LISTS_PREFERENCES_SERVICE_TOKEN, useValue: preferencesService }],
-            declarations: [EmptyTemplateComponent, ProcessListCloudComponent, CustomEmptyContentTemplateDirective]
+            declarations: [EmptyTemplateComponent, ProcessListCloudComponent]
         });
         fixtureEmpty = TestBed.createComponent(EmptyTemplateComponent);
         fixtureEmpty.detectChanges();

lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.ts

@@ -15,7 +15,16 @@
  * limitations under the License.
  */
 
-import { DataTableModule, DownloadService, EmptyListComponent, ThumbnailService } from '@alfresco/adf-core';
+import {
+    DataColumnComponent,
+    DataColumnListComponent,
+    DataTableComponent,
+    DownloadService,
+    EmptyListComponent,
+    LoadingContentTemplateDirective,
+    NoContentTemplateDirective,
+    ThumbnailService
+} from '@alfresco/adf-core';
 import {
     AfterContentInit,
     ContentChild,
@@ -36,7 +45,17 @@ import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 @Component({
     selector: 'adf-process-attachment-list',
     standalone: true,
-    imports: [CommonModule, DataTableModule, TranslateModule, MatProgressSpinnerModule],
+    imports: [
+        CommonModule,
+        TranslateModule,
+        MatProgressSpinnerModule,
+        DataTableComponent,
+        NoContentTemplateDirective,
+        EmptyListComponent,
+        DataColumnListComponent,
+        DataColumnComponent,
+        LoadingContentTemplateDirective
+    ],
     styleUrls: ['./process-attachment-list.component.scss'],
     templateUrl: './process-attachment-list.component.html',
     encapsulation: ViewEncapsulation.None

lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.ts

@@ -15,7 +15,17 @@
  * limitations under the License.
  */
 
-import { ThumbnailService, EmptyListComponent, DownloadService, DataTableModule } from '@alfresco/adf-core';
+import {
+    ThumbnailService,
+    EmptyListComponent,
+    DownloadService,
+    DataTableComponent,
+    EmptyListHeaderDirective,
+    DataColumnListComponent,
+    DataColumnComponent,
+    LoadingContentTemplateDirective,
+    NoContentTemplateDirective
+} from '@alfresco/adf-core';
 import {
     AfterContentInit,
     ContentChild,
@@ -30,13 +40,25 @@ import {
 } from '@angular/core';
 import { ProcessContentService } from '../../form/services/process-content.service';
 import { CommonModule } from '@angular/common';
-import { TranslateModule } from '@ngx-translate/core';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { TranslateModule } from '@ngx-translate/core';
 
 @Component({
     selector: 'adf-task-attachment-list',
     standalone: true,
-    imports: [CommonModule, DataTableModule, TranslateModule, MatProgressSpinnerModule],
+    imports: [
+        CommonModule,
+        TranslateModule,
+        MatProgressSpinnerModule,
+        DataTableComponent,
+        EmptyListHeaderDirective,
+        TranslateModule,
+        DataColumnListComponent,
+        DataColumnComponent,
+        LoadingContentTemplateDirective,
+        EmptyListComponent,
+        NoContentTemplateDirective
+    ],
     styleUrls: ['./task-attachment-list.component.scss'],
     templateUrl: './task-attachment-list.component.html',
     encapsulation: ViewEncapsulation.None

lib/process-services/src/lib/form/form-list/form-list.component.ts

@@ -18,12 +18,12 @@
 import { Component, Input, OnChanges, ViewEncapsulation } from '@angular/core';
 import { ModelService } from '../services/model.service';
 import { CommonModule } from '@angular/common';
-import { DataTableModule } from '@alfresco/adf-core';
+import { DataColumnComponent, DataColumnListComponent, DataTableComponent } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-form-list',
     standalone: true,
-    imports: [CommonModule, DataTableModule],
+    imports: [CommonModule, DataTableComponent, DataColumnListComponent, DataColumnComponent],
     templateUrl: './form-list.component.html',
     encapsulation: ViewEncapsulation.None
 })

lib/process-services/src/lib/people/components/people-list/people-list.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { DataTableComponent, DataCellEvent, DataColumnListComponent, ShowHeaderMode, DataTableModule } from '@alfresco/adf-core';
+import { DataTableComponent, DataCellEvent, DataColumnListComponent, ShowHeaderMode } from '@alfresco/adf-core';
 import { AfterContentInit, Component, ContentChild, EventEmitter, Input, Output, ViewChild } from '@angular/core';
 import { UserEventModel } from '../../../task-list/models/user-event.model';
 import { LightUserRepresentation } from '@alfresco/js-api';
@@ -24,7 +24,7 @@ import { CommonModule } from '@angular/common';
 @Component({
     selector: 'adf-people-list',
     standalone: true,
-    imports: [CommonModule, DataTableModule],
+    imports: [CommonModule, DataTableComponent],
     templateUrl: './people-list.component.html',
     styleUrls: ['./people-list.component.scss']
 })

lib/process-services/src/lib/people/components/people-search-field/people-search-field.component.ts

@@ -15,7 +15,7 @@
  * limitations under the License.
  */
 
-import { DataTableModule, TranslationService } from '@alfresco/adf-core';
+import { DataColumnComponent, DataColumnListComponent, TranslationService } from '@alfresco/adf-core';
 import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
 import { debounceTime, switchMap } from 'rxjs/operators';
@@ -32,7 +32,15 @@ import { PeopleListComponent } from '../people-list/people-list.component';
 @Component({
     selector: 'adf-people-search-field',
     standalone: true,
-    imports: [CommonModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, DataTableModule, PeopleListComponent],
+    imports: [
+        CommonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
+        PeopleListComponent,
+        DataColumnListComponent,
+        DataColumnComponent
+    ],
     templateUrl: './people-search-field.component.html',
     styleUrls: ['./people-search-field.component.scss'],
     host: { class: 'adf-people-search-field' },

lib/process-services/src/lib/people/components/people/people.component.ts

@@ -26,13 +26,22 @@ import { CommonModule } from '@angular/common';
 import { MatCardModule } from '@angular/material/card';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatIconModule } from '@angular/material/icon';
-import { DataTableModule } from '@alfresco/adf-core';
 import { PeopleListComponent } from '../people-list/people-list.component';
+import { DataColumnComponent, DataColumnListComponent } from '@alfresco/adf-core';
 
 @Component({
     selector: 'adf-people',
     standalone: true,
-    imports: [CommonModule, MatCardModule, TranslateModule, MatIconModule, DataTableModule, PeopleSearchComponent, PeopleListComponent],
+    imports: [
+        CommonModule,
+        MatCardModule,
+        TranslateModule,
+        MatIconModule,
+        PeopleSearchComponent,
+        PeopleListComponent,
+        DataColumnListComponent,
+        DataColumnComponent
+    ],
     templateUrl: './people.component.html',
     styleUrls: ['./people.component.scss'],
     encapsulation: ViewEncapsulation.None

lib/process-services/src/lib/process-list/components/process-list/process-list.component.ts

@@ -29,8 +29,10 @@ import {
     UserPreferencesService,
     DataCellEvent,
     DEFAULT_PAGINATION,
-    DataTableModule,
+    EmptyContentComponent,
-    EmptyContentComponent
+    DataTableComponent,
+    LoadingContentTemplateDirective,
+    NoContentTemplateDirective
 } from '@alfresco/adf-core';
 import { AfterContentInit, Component, ContentChild, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { ProcessService } from '../../services/process.service';
@@ -69,7 +71,15 @@ export const processPresetsDefaultModel = {
 @Component({
     selector: 'adf-process-instance-list',
     standalone: true,
-    imports: [CommonModule, DataTableModule, MatProgressSpinnerModule, EmptyContentComponent, TranslateModule],
+    imports: [
+        CommonModule,
+        MatProgressSpinnerModule,
+        EmptyContentComponent,
+        TranslateModule,
+        DataTableComponent,
+        LoadingContentTemplateDirective,
+        NoContentTemplateDirective
+    ],
     styleUrls: ['./process-list.component.css'],
     templateUrl: './process-list.component.html'
 })

lib/process-services/src/lib/task-list/components/task-list/task-list.component.spec.ts

@@ -24,7 +24,6 @@ import {
     ObjectDataRow,
     DataCellEvent,
     ObjectDataColumn,
-    DataTableModule,
     AppConfigServiceMock,
     AlfrescoApiServiceMock,
     AlfrescoApiService
@@ -106,14 +105,7 @@ describe('TaskListComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [
+            imports: [TranslateModule.forRoot(), NoopAnimationsModule, MatProgressSpinnerModule, HttpClientTestingModule, TaskListComponent],
-                TranslateModule.forRoot(),
-                DataTableModule,
-                NoopAnimationsModule,
-                MatProgressSpinnerModule,
-                HttpClientTestingModule,
-                TaskListComponent
-            ],
             providers: [
                 TaskListService,
                 { provide: AlfrescoApiService, useClass: AlfrescoApiServiceMock },

lib/process-services/src/lib/task-list/components/task-list/task-list.component.ts

@@ -28,8 +28,10 @@ import {
     PaginationModel,
     DataCellEvent,
     DEFAULT_PAGINATION,
-    DataTableModule,
+    EmptyContentComponent,
-    EmptyContentComponent
+    DataTableComponent,
+    LoadingContentTemplateDirective,
+    NoContentTemplateDirective
 } from '@alfresco/adf-core';
 import { AfterContentInit, Component, ContentChild, EventEmitter, Input, OnChanges, Output, SimpleChanges, OnDestroy, OnInit } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
@@ -46,7 +48,15 @@ export const PRESET_KEY = 'adf-task-list.presets';
 @Component({
     selector: 'adf-tasklist',
     standalone: true,
-    imports: [CommonModule, DataTableModule, MatProgressSpinnerModule, EmptyContentComponent, TranslateModule],
+    imports: [
+        CommonModule,
+        MatProgressSpinnerModule,
+        EmptyContentComponent,
+        TranslateModule,
+        DataTableComponent,
+        LoadingContentTemplateDirective,
+        NoContentTemplateDirective
+    ],
     templateUrl: './task-list.component.html',
     styleUrls: ['./task-list.component.css']
 })