[ACS-7381][ADF] Break DataTable dependency on Material Module

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

@@ -1907,11 +1907,11 @@ describe('DocumentListComponent rendering', () => {
         const rows = fixture.nativeElement.querySelectorAll('.adf-datatable-body adf-datatable-row');
         expect(rows).toBeDefined();
         expect(rows.length).toBe(3);
-        const cell1 = fixture.nativeElement.querySelector('div[title="Name"][data-automation-id="Name 1"]');
+        const cell1 = fixture.nativeElement.querySelector('td[title="Name"][data-automation-id="Name 1"]');
         expect(cell1.innerText).toBe('Name 1');
-        const cell2 = fixture.nativeElement.querySelector('div[title="Name"][data-automation-id="Name 2"]');
+        const cell2 = fixture.nativeElement.querySelector('td[title="Name"][data-automation-id="Name 2"]');
         expect(cell2.innerText).toBe('Name 2');
-        const cell3 = fixture.nativeElement.querySelector('div[title="Id"][data-automation-id="Name 3"]');
+        const cell3 = fixture.nativeElement.querySelector('td[title="Id"][data-automation-id="Name 3"]');
         expect(cell3.innerText).toBe('3');
     });
 });

lib/core/src/lib/datatable/components/amount-cell/amount-cell.component.html

@@ -1,10 +1,11 @@
 <ng-container *ngIf="value$ | async as amount">
     <span [title]="amount">
-        {{ amount | currency:
-            (currencyConfig?.code || defaultCurrencyConfig.code):
-            (currencyConfig?.display || defaultCurrencyConfig.display):
-            (currencyConfig?.digitsInfo || defaultCurrencyConfig.digitsInfo):
-            (currencyConfig?.locale || defaultCurrencyConfig.locale)
+        {{
+            amount | currency:
+                (currencyConfig?.code || defaultCurrencyConfig.code):
+                (currencyConfig?.display || defaultCurrencyConfig.display):
+                (currencyConfig?.digitsInfo || defaultCurrencyConfig.digitsInfo):
+                (currencyConfig?.locale || defaultCurrencyConfig.locale)
         }}
     </span>
 </ng-container>

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

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { AmountCellComponent } from './amount-cell.component';
-import { CurrencyConfig } from '../../data/data-column.model';
-import { BehaviorSubject } from 'rxjs';
-import { LOCALE_ID } from '@angular/core';
 import { registerLocaleData } from '@angular/common';
 import localePL from '@angular/common/locales/pl';
+import { LOCALE_ID } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { BehaviorSubject } from 'rxjs';
+import { CurrencyConfig } from '../../data/data-column.model';
+import { AmountCellComponent } from './amount-cell.component';
 
 describe('AmountCellComponent', () => {
     let component: AmountCellComponent;
@@ -58,7 +58,14 @@ describe('AmountCellComponent', () => {
     });
 
     it('should render currency value with custom currency code', () => {
-        renderAndCheckCurrencyValue({ code: 'MY CUSTOM CURRENCY', display: 'symbol' }, 123.45, 'MY CUSTOM CURRENCY123.45');
+        renderAndCheckCurrencyValue(
+            {
+                code: 'MY CUSTOM CURRENCY',
+                display: 'symbol'
+            },
+            123.45,
+            'MY CUSTOM CURRENCY123.45'
+        );
     });
 
     it('should render currency value with custom display code', () => {

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

@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
-import { ChangeDetectionStrategy, Component, ViewEncapsulation, Input, OnInit, DEFAULT_CURRENCY_CODE, inject } from '@angular/core';
-import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
+import { AsyncPipe, CurrencyPipe, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, DEFAULT_CURRENCY_CODE, inject, Input, OnInit, ViewEncapsulation } from '@angular/core';
 import { CurrencyConfig } from '../../data/data-column.model';
-import { CommonModule } from '@angular/common';
+import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
 
 @Component({
-    standalone: true,
-    imports: [CommonModule],
     selector: 'adf-amount-cell',
+    standalone: true,
+    imports: [AsyncPipe, CurrencyPipe, NgIf],
     templateUrl: './amount-cell.component.html',
     host: { class: 'adf-datatable-content-cell' },
     encapsulation: ViewEncapsulation.None,

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

@@ -16,9 +16,9 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { BooleanCellComponent } from './boolean-cell.component';
-import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
 import { ObjectDataColumn } from '../../data/object-datacolumn.model';
+import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
+import { BooleanCellComponent } from './boolean-cell.component';
 
 describe('BooleanCellComponent', () => {
     let component: BooleanCellComponent;

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

@@ -15,15 +15,15 @@
  * limitations under the License.
  */
 
+import { AsyncPipe, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit, ViewEncapsulation } from '@angular/core';
+import { BooleanPipe } from '../../../pipes';
 import { DataTableCellComponent } from '../datatable-cell/datatable-cell.component';
-import { CommonModule } from '@angular/common';
-import { BooleanPipe } from '../../../pipes/boolean.pipe';
 
 @Component({
-    standalone: true,
-    imports: [CommonModule, BooleanPipe],
     selector: 'adf-boolean-cell',
+    standalone: true,
+    imports: [AsyncPipe, BooleanPipe, NgIf],
     changeDetection: ChangeDetectionStrategy.OnPush,
     template: `
         <ng-container *ngIf="value$ | async | adfBoolean as value">
@@ -36,7 +36,6 @@ import { BooleanPipe } from '../../../pipes/boolean.pipe';
     host: { class: 'adf-datatable-content-cell' }
 })
 export class BooleanCellComponent extends DataTableCellComponent implements OnInit {
-
     ngOnInit() {
         super.ngOnInit();
     }

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

@@ -1,54 +1,46 @@
-<div
-    class="adf-columns-selector"
-    data-automation-id="adf-columns-selector"
-    tabindex="0"
-    role="button"
-    (keyup.enter)="$event.stopPropagation()"
-    (click)="$event.stopPropagation();"
->
+<div class="adf-columns-selector"
+     data-automation-id="adf-columns-selector"
+     tabindex="0"
+     role="button"
+     (keyup.enter)="$event.stopPropagation()"
+     (click)="$event.stopPropagation();">
     <div class="adf-columns-selector-header">
         <span class="adf-columns-selector-header-label">
-            {{"ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS" | translate}}
+            {{ 'ADF-DATATABLE.COLUMNS_SELECTOR.COLUMNS' | translate }}
         </span>
 
-        <button
-            data-automation-id="adf-columns-selector-close-button"
-            mat-icon-button
-            (click)="closeMenu()"
-        >
+        <button data-automation-id="adf-columns-selector-close-button"
+                mat-icon-button
+                (click)="closeMenu()">
             <mat-icon>close</mat-icon>
         </button>
     </div>
 
     <mat-divider class="adf-columns-selector-divider"></mat-divider>
 
     <div class="adf-columns-selector-search-input-container">
-        <mat-icon
-            class="adf-columns-selector-search-input-icon">
+        <mat-icon class="adf-columns-selector-search-input-icon">
             search
         </mat-icon>
 
-        <input
-            [formControl]="searchInputControl"
-            class="adf-columns-selector-search-input"
-            data-automation-id="adf-columns-selector-search-input"
-            type="text"
-            [placeholder]='"ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH" | translate'>
+        <input [formControl]="searchInputControl"
+               class="adf-columns-selector-search-input"
+               data-automation-id="adf-columns-selector-search-input"
+               type="text"
+               [placeholder]="'ADF-DATATABLE.COLUMNS_SELECTOR.SEARCH' | translate">
     </div>
 
     <div class="adf-columns-selector-list-container">
         <ng-container *ngFor="let column of columnItems">
-            <div
-                *ngIf="(column.title | translate | filterString:searchQuery) as translatedTitle"
-                class="adf-columns-selector-list-item">
-                <mat-checkbox
-                    color="primary"
-                    class="adf-columns-selector-column-checkbox"
-                    [attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
-                    [checked]="!column.isHidden"
-                    [disabled]="isCheckboxDisabled(column)"
-                    (change)="changeColumnVisibility(column)">
-                    <div class="adf-columns-selector-list-content">{{translatedTitle}}</div>
+            <div *ngIf="(column.title | translate | filterString:searchQuery) as translatedTitle"
+                 class="adf-columns-selector-list-item">
+                <mat-checkbox color="primary"
+                              class="adf-columns-selector-column-checkbox"
+                              [attr.data-automation-id]="'adf-columns-selector-column-checkbox-' + column.title"
+                              [checked]="!column.isHidden"
+                              [disabled]="isCheckboxDisabled(column)"
+                              (change)="changeColumnVisibility(column)">
+                    <div class="adf-columns-selector-list-content">{{ translatedTitle }}</div>
                 </mat-checkbox>
             </div>
         </ng-container>
@@ -57,12 +49,11 @@
     <mat-divider class="adf-columns-selector-divider"></mat-divider>
 
     <div class="adf-columns-selector-footer">
-        <button
-            mat-flat-button
-            data-automation-id="adf-columns-selector-apply-button"
-            color="primary"
-            (click)="apply()">
-            {{"ADF-DATATABLE.COLUMNS_SELECTOR.APPLY" | translate}}
+        <button mat-flat-button
+                data-automation-id="adf-columns-selector-apply-button"
+                color="primary"
+                (click)="apply()">
+            {{ 'ADF-DATATABLE.COLUMNS_SELECTOR.APPLY' | translate }}
         </button>
     </div>
 </div>

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

@@ -15,16 +15,16 @@
  * limitations under the License.
  */
 
+import { HarnessLoader } from '@angular/cdk/testing';
+import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
-import { ColumnsSelectorComponent } from './columns-selector.component';
-import { DataColumn } from '../../data/data-column.model';
-import { Observable, Subject } from 'rxjs';
+import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
 import { MatMenuTrigger } from '@angular/material/menu';
-import { CoreTestingModule } from '../../../testing';
 import { By } from '@angular/platform-browser';
-import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
-import { HarnessLoader } from '@angular/cdk/testing';
-import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
+import { Observable, Subject } from 'rxjs';
+import { CoreTestingModule } from '../../../testing';
+import { DataColumn } from '../../data/data-column.model';
+import { ColumnsSelectorComponent } from './columns-selector.component';
 
 describe('ColumnsSelectorComponent', () => {
     let fixture: ComponentFixture<ColumnsSelectorComponent>;
@@ -40,8 +40,7 @@ describe('ColumnsSelectorComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            imports: [CoreTestingModule],
-            declarations: [ColumnsSelectorComponent]
+            imports: [CoreTestingModule, ColumnsSelectorComponent]
         }).compileComponents();
 
         fixture = TestBed.createComponent(ColumnsSelectorComponent);

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

@@ -15,16 +15,36 @@
  * limitations under the License.
  */
 
+import { NgForOf, NgIf } from '@angular/common';
 import { Component, EventEmitter, Input, OnDestroy, OnInit, Output, ViewEncapsulation } from '@angular/core';
-import { UntypedFormControl } from '@angular/forms';
+import { ReactiveFormsModule, UntypedFormControl } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
 import { MatMenuTrigger } from '@angular/material/menu';
+import { TranslateModule } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 import { debounceTime, takeUntil } from 'rxjs/operators';
+import { FilterStringPipe } from '../../../pipes';
 import { DataColumn } from '../../data/data-column.model';
+
 @Component({
     selector: 'adf-datatable-column-selector',
+    standalone: true,
     templateUrl: './columns-selector.component.html',
     styleUrls: ['./columns-selector.component.scss'],
+    imports: [
+        MatButtonModule,
+        TranslateModule,
+        MatIconModule,
+        MatDividerModule,
+        ReactiveFormsModule,
+        MatCheckboxModule,
+        NgIf,
+        NgForOf,
+        FilterStringPipe
+    ],
     encapsulation: ViewEncapsulation.None
 })
 export class ColumnsSelectorComponent implements OnInit, OnDestroy {
@@ -49,23 +69,16 @@ export class ColumnsSelectorComponent implements OnInit, OnDestroy {
     searchQuery = '';
 
     ngOnInit(): void {
-        this.mainMenuTrigger.menuOpened.pipe(
-            takeUntil(this.onDestroy$)
-        ).subscribe(() => {
-            const columns = this.columns.map(column => ({...column}));
+        this.mainMenuTrigger.menuOpened.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
+            const columns = this.columns.map((column) => ({ ...column }));
             this.columnItems = this.columnsSorting ? this.sortColumns(columns) : columns;
         });
 
-        this.mainMenuTrigger.menuClosed.pipe(
-            takeUntil(this.onDestroy$)
-        ).subscribe(() => {
+        this.mainMenuTrigger.menuClosed.pipe(takeUntil(this.onDestroy$)).subscribe(() => {
             this.searchInputControl.setValue('');
         });
 
-        this.searchInputControl.valueChanges.pipe(
-            debounceTime(300),
-            takeUntil(this.onDestroy$)
-        ).subscribe((searchQuery) => {
+        this.searchInputControl.valueChanges.pipe(debounceTime(300), takeUntil(this.onDestroy$)).subscribe((searchQuery) => {
             this.searchQuery = searchQuery;
         });
     }
@@ -89,12 +102,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 hiddenColumns = columns.filter(column => column.isHidden);
+        const shownColumns = 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.html

@@ -0,0 +1,16 @@
+<ng-container>
+    <span *ngIf="copyContent; else defaultCell"
+          adf-clipboard="CLIPBOARD.CLICK_TO_COPY"
+          [clipboard-notification]="'CLIPBOARD.SUCCESS_COPY'"
+          [attr.aria-label]="value$ | async"
+          [title]="tooltip"
+          class="adf-datatable-cell-value">
+        {{ value$ | async }}
+    </span>
+</ng-container>
+<ng-template #defaultCell>
+    <span [title]="tooltip"
+          class="adf-datatable-cell-value">
+        {{ value$ | async }}
+    </span>
+</ng-template>

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

@@ -16,12 +16,12 @@
  */
 
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DataTableCellComponent } from './datatable-cell.component';
-import { DataRow } from '../../data/data-row.model';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
-import { DataTableService } from '../../services/datatable.service';
+import { DataRow } from '../../data/data-row.model';
 import { ObjectDataTableAdapter } from '../../data/object-datatable-adapter';
+import { DataTableService } from '../../services/datatable.service';
 import { mockCarsData, mockCarsSchemaDefinition } from '../mocks/datatable.mock';
+import { DataTableCellComponent } from './datatable-cell.component';
 
 describe('DataTableCellComponent', () => {
     let component: DataTableCellComponent;
@@ -51,7 +51,7 @@ describe('DataTableCellComponent', () => {
 
     beforeEach(() => {
         TestBed.configureTestingModule({
-            declarations: [DataTableCellComponent],
+            imports: [DataTableCellComponent],
             providers: [DataTableService]
         });