Merge branch 'master' into refactor/header

siemens · Nov 21, 2024 · f8100bf · f8100bf
2 parents a0de679 + ab910c3
commit f8100bf
Show file tree

Hide file tree

Showing 61 changed files with 284 additions and 290 deletions.
diff --git a/angular.json b/angular.json
@@ -18,22 +18,23 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@angular-devkit/build-angular:application",
           "options": {
-            "outputPath": "dist/ngx-datatable",
+            "outputPath": {
+              "base": "dist/ngx-datatable",
+              "browser": ""
+            },
             "index": "src/index.html",
-            "main": "src/main.ts",
-            "polyfills": "src/polyfills.ts",
+            "polyfills": ["src/polyfills.ts"],
             "tsConfig": "tsconfig.app.json",
             "assets": ["src/favicon.ico", "src/assets"],
             "styles": ["src/styles.scss"],
             "scripts": [],
-            "vendorChunk": true,
             "extractLicenses": false,
-            "buildOptimizer": false,
             "sourceMap": true,
             "optimization": false,
-            "namedChunks": true
+            "namedChunks": true,
+            "browser": "src/main.ts"
           },
           "configurations": {
             "production": {
@@ -48,8 +49,6 @@
               "sourceMap": false,
               "namedChunks": false,
               "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
               "budgets": [
                 {
                   "type": "initial",

diff --git a/projects/ngx-datatable/src/lib/components/body/body-cell.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/body-cell.component.spec.ts
@@ -12,7 +12,7 @@ describe('DataTableBodyCellComponent', () => {
   // provide our implementations or mocks to the dependency injector
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [DataTableBodyCellComponent]
+      imports: [DataTableBodyCellComponent]
     });
   });
 

diff --git a/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts b/projects/ngx-datatable/src/lib/components/body/body-cell.component.ts
@@ -27,6 +27,8 @@ import {
   SortPropDir,
   TreeStatus
 } from '../../types/public.types';
+import { DataTableGhostLoaderComponent } from './ghost-loader/ghost-loader.component';
+import { AsyncPipe, NgTemplateOutlet } from '@angular/common';
 
 @Component({
   selector: 'datatable-body-cell',
@@ -89,7 +91,9 @@ import {
         <ghost-loader [columns]="[column]" [pageSize]="1"></ghost-loader>
       }
     }
-  `
+  `,
+  standalone: true,
+  imports: [NgTemplateOutlet, DataTableGhostLoaderComponent, AsyncPipe]
 })
 export class DataTableBodyCellComponent<TRow extends { level?: number } = any>
   implements DoCheck, OnDestroy
@@ -406,15 +410,15 @@ export class DataTableBodyCellComponent<TRow extends { level?: number } = any>
 
   @HostListener('keydown', ['$event'])
   onKeyDown(event: KeyboardEvent): void {
-    const keyCode = event.keyCode;
+    const key = event.key;
     const isTargetCell = event.target === this._element;
 
     const isAction =
-      keyCode === Keys.return ||
-      keyCode === Keys.down ||
-      keyCode === Keys.up ||
-      keyCode === Keys.left ||
-      keyCode === Keys.right;
+      key === Keys.return ||
+      key === Keys.down ||
+      key === Keys.up ||
+      key === Keys.left ||
+      key === Keys.right;
 
     if (isAction && isTargetCell) {
       event.preventDefault();

diff --git a/projects/ngx-datatable/src/lib/components/body/body-group-header-template.directive.ts b/projects/ngx-datatable/src/lib/components/body/body-group-header-template.directive.ts
@@ -2,7 +2,8 @@ import { Directive } from '@angular/core';
 import { GroupContext } from '../../types/public.types';
 
 @Directive({
-  selector: '[ngx-datatable-group-header-template]'
+  selector: '[ngx-datatable-group-header-template]',
+  standalone: true
 })
 export class DatatableGroupHeaderTemplateDirective {
   static ngTemplateContextGuard(

diff --git a/projects/ngx-datatable/src/lib/components/body/body-group-header.directive.spec.ts b/projects/ngx-datatable/src/lib/components/body/body-group-header.directive.spec.ts
@@ -12,7 +12,9 @@ import { DatatableGroupHeaderTemplateDirective } from './body-group-header-templ
     <ngx-datatable-group-header id="t2">
       <ng-template ngx-datatable-group-header-template></ng-template>
     </ngx-datatable-group-header>
-  `
+  `,
+  standalone: true,
+  imports: [DatatableGroupHeaderDirective, DatatableGroupHeaderTemplateDirective]
 })
 class TestFixtureComponent {}
 
@@ -23,7 +25,7 @@ describe('DatatableGroupHeaderDirective', () => {
   // provide our implementations or mocks to the dependency injector
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         DatatableGroupHeaderDirective,
         DatatableGroupHeaderTemplateDirective,
         TestFixtureComponent

diff --git a/projects/ngx-datatable/src/lib/components/body/body-group-header.directive.ts b/projects/ngx-datatable/src/lib/components/body/body-group-header.directive.ts
@@ -2,7 +2,10 @@ import { ContentChild, Directive, EventEmitter, Input, Output, TemplateRef } fro
 import { DatatableGroupHeaderTemplateDirective } from './body-group-header-template.directive';
 import { Group, GroupContext, GroupToggleEvents } from '../../types/public.types';
 
-@Directive({ selector: 'ngx-datatable-group-header' })
+@Directive({
+  selector: 'ngx-datatable-group-header',
+  standalone: true
+})
 export class DatatableGroupHeaderDirective<TRow = any> {
   /**
    * Row height is required when virtual scroll is enabled.

diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row-def.component.ts
@@ -9,6 +9,7 @@ import {
   TemplateRef,
   ViewContainerRef
 } from '@angular/core';
+import { NgTemplateOutlet } from '@angular/common';
 
 /**
  * This component is passed as ng-template and rendered by BodyComponent.
@@ -22,14 +23,17 @@ import {
       [ngTemplateOutlet]="rowDef.rowDefInternal.rowTemplate"
       [ngTemplateOutletContext]="rowDef"
     />
-  }`
+  }`,
+  standalone: true,
+  imports: [NgTemplateOutlet]
 })
 export class DatatableRowDefComponent {
   rowDef = inject(RowDefToken);
 }
 
 @Directive({
-  selector: '[rowDef]'
+  selector: '[rowDef]',
+  standalone: true
 })
 export class DatatableRowDefDirective {
   static ngTemplateContextGuard(
@@ -44,7 +48,8 @@ export class DatatableRowDefDirective {
  * @internal To be used internally by ngx-datatable.
  */
 @Directive({
-  selector: '[rowDefInternal]'
+  selector: '[rowDefInternal]',
+  standalone: true
 })
 export class DatatableRowDefInternalDirective implements OnInit {
   vc = inject(ViewContainerRef);

diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.spec.ts
@@ -9,7 +9,7 @@ describe('DataTableRowWrapperComponent', () => {
   // provide our implementations or mocks to the dependency injector
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [DataTableRowWrapperComponent],
+      imports: [DataTableRowWrapperComponent],
       providers: [
         {
           provide: DatatableComponentToken,

diff --git a/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row-wrapper.component.ts
@@ -3,6 +3,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  computed,
   DoCheck,
   ElementRef,
   EventEmitter,
@@ -16,10 +17,12 @@ import {
   OnChanges,
   OnInit,
   Output,
+  signal,
   SimpleChanges,
   ViewChild
 } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+import { NgTemplateOutlet } from '@angular/common';
 import { DatatableComponentToken } from '../../utils/table-token';
 import { Group, GroupContext, RowDetailContext, RowOrGroup } from '../../types/public.types';
 import { DatatableGroupHeaderDirective } from './body-group-header.directive';
@@ -42,7 +45,7 @@ import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive'
                 <input
                   #select
                   type="checkbox"
-                  [checked]="selectedGroupRows.length === group.value.length"
+                  [checked]="selectedGroupRows().length === group().value.length"
                   (change)="onCheckboxChange(select.checked)"
                 />
               </label>
@@ -68,7 +71,9 @@ import { DatatableRowDetailDirective } from '../row-detail/row-detail.directive'
   `,
   host: {
     class: 'datatable-row-wrapper'
-  }
+  },
+  standalone: true,
+  imports: [NgTemplateOutlet]
 })
 export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit, OnChanges {
   @ViewChild('select') checkBoxInput!: ElementRef<HTMLInputElement>;
@@ -89,7 +94,7 @@ export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit
 
   @Input() rowIndex?: number;
 
-  selectedGroupRows: TRow[] = [];
+  selectedGroupRows = signal<TRow[]>([]);
 
   @Input({ transform: booleanAttribute }) expanded = false;
 
@@ -105,13 +110,11 @@ export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit
   private tableComponent = inject(DatatableComponentToken);
   private cd = inject(ChangeDetectorRef);
 
-  get group(): Group<TRow> {
+  protected group = computed(() => {
     if (typeof this.row === 'object' && 'value' in this.row) {
       return this.row;
-    } else {
-      throw new Error('Row is not a group');
     }
-  }
+  });
 
   ngOnInit(): void {
     if (this.disableCheck) {
@@ -173,15 +176,17 @@ export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit
     // if any of the row of this group is not present in `selected` rows array
     // mark group header checkbox state as indeterminate
     if (this.groupHeader?.checkboxable && this.selectedRowsDiffer.diff(this.selected)) {
-      const selectedRows = this.selected.filter(row => this.group.value.find(item => item === row));
+      const selectedRows = this.selected.filter(row =>
+        this.group()?.value.find(item => item === row)
+      );
       if (this.checkBoxInput) {
-        if (selectedRows.length && selectedRows.length !== this.group.value.length) {
+        if (selectedRows.length && selectedRows.length !== this.group()?.value.length) {
           this.checkBoxInput.nativeElement.indeterminate = true;
         } else {
           this.checkBoxInput.nativeElement.indeterminate = false;
         }
       }
-      this.selectedGroupRows = selectedRows;
+      this.selectedGroupRows.set(selectedRows);
     }
   }
 
@@ -192,10 +197,12 @@ export class DataTableRowWrapperComponent<TRow = any> implements DoCheck, OnInit
 
   onCheckboxChange(groupSelected: boolean): void {
     // First remove all rows of this group from `selected`
-    this.selected = [...this.selected.filter(row => !this.group.value.find(item => item === row))];
+    this.selected = [
+      ...this.selected.filter(row => !this.group().value.find(item => item === row))
+    ];
     // If checkbox is checked then add all rows of this group in `selected`
     if (groupSelected) {
-      this.selected = [...this.selected, ...this.group.value];
+      this.selected = [...this.selected, ...this.group().value];
     }
     // Update `selected` of DatatableComponent with newly evaluated `selected`
     this.tableComponent.selected = [...this.selected];

diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/body-row.component.spec.ts
@@ -9,7 +9,7 @@ describe('DataTableBodyRowComponent', () => {
   // provide our implementations or mocks to the dependency injector
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [DataTableBodyCellComponent, DataTableBodyRowComponent]
+      imports: [DataTableBodyCellComponent, DataTableBodyRowComponent]
     });
   });
 

diff --git a/projects/ngx-datatable/src/lib/components/body/body-row.component.ts b/projects/ngx-datatable/src/lib/components/body/body-row.component.ts
@@ -20,8 +20,10 @@ import { columnGroupWidths, columnsByPin, columnsByPinArr } from '../../utils/co
 import { Keys } from '../../utils/keys';
 import { BehaviorSubject } from 'rxjs';
 import { ActivateEvent, RowOrGroup, TreeStatus } from '../../types/public.types';
+import { AsyncPipe } from '@angular/common';
 import { TableColumn } from '../../types/table-column.type';
 import { ColumnGroupWidth, PinnedColumns } from '../../types/internal.types';
+import { DataTableBodyCellComponent } from './body-cell.component';
 
 @Component({
   selector: 'datatable-body-row',
@@ -55,7 +57,9 @@ import { ColumnGroupWidth, PinnedColumns } from '../../types/internal.types';
         }
       </div>
     }
-  `
+  `,
+  standalone: true,
+  imports: [DataTableBodyCellComponent, AsyncPipe]
 })
 export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges {
   private cd = inject(ChangeDetectorRef);
@@ -179,15 +183,15 @@ export class DataTableBodyRowComponent<TRow = any> implements DoCheck, OnChanges
 
   @HostListener('keydown', ['$event'])
   onKeyDown(event: KeyboardEvent): void {
-    const keyCode = event.keyCode;
+    const key = event.key;
     const isTargetRow = event.target === this._element;
 
     const isAction =
-      keyCode === Keys.return ||
-      keyCode === Keys.down ||
-      keyCode === Keys.up ||
-      keyCode === Keys.left ||
-      keyCode === Keys.right;
+      key === Keys.return ||
+      key === Keys.down ||
+      key === Keys.up ||
+      key === Keys.left ||
+      key === Keys.right;
 
     const isCtrlA = event.key === 'a' && (event.ctrlKey || event.metaKey);
 

diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.spec.ts b/projects/ngx-datatable/src/lib/components/body/body.component.spec.ts
@@ -16,7 +16,7 @@ describe('DataTableBodyComponent', () => {
   // provide our implementations or mocks to the dependency injector
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [
+      imports: [
         DataTableBodyComponent,
         DataTableBodyRowComponent,
         DataTableRowWrapperComponent,

diff --git a/projects/ngx-datatable/src/lib/components/body/body.component.ts b/projects/ngx-datatable/src/lib/components/body/body.component.ts
@@ -33,6 +33,13 @@ import {
   SelectionType,
   TreeStatus
 } from '../../types/public.types';
+import { DraggableDirective } from '../../directives/draggable.directive';
+import { DatatableRowDefInternalDirective } from './body-row-def.component';
+import { DataTableRowWrapperComponent } from './body-row-wrapper.component';
+import { DataTableSummaryRowComponent } from './summary/summary-row.component';
+import { DataTableSelectionComponent } from './selection.component';
+import { DataTableGhostLoaderComponent } from './ghost-loader/ghost-loader.component';
+import { ProgressBarComponent } from './progress-bar.component';
 
 @Component({
   selector: 'datatable-body',
@@ -246,7 +253,20 @@ import {
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     class: 'datatable-body'
-  }
+  },
+  standalone: true,
+  imports: [
+    ProgressBarComponent,
+    DataTableGhostLoaderComponent,
+    DataTableSelectionComponent,
+    ScrollerComponent,
+    DataTableSummaryRowComponent,
+    DataTableRowWrapperComponent,
+    NgStyle,
+    DatatableRowDefInternalDirective,
+    DataTableBodyRowComponent,
+    DraggableDirective
+  ]
 })
 export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = any>
   implements OnInit, OnDestroy
@@ -693,8 +713,6 @@ export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = a
    * heights of the rows before it (i.e. row0 and row1).
    *
    * @returns the CSS3 style to be applied
-   *
-   * @memberOf DataTableBodyComponent
    */
   rowsStyles = computed(() => {
     const rowsStyles: NgStyle['ngStyle'][] = [];
@@ -738,8 +756,6 @@ export class DataTableBodyComponent<TRow extends { treeStatus?: TreeStatus } = a
    * see description for `rowsStyles` signal
    *
    * @returns the CSS3 style to be applied
-   *
-   * @memberOf DataTableBodyComponent
    */
   bottomSummaryRowsStyles = computed(() => {
     if (!this.scrollbarV || !this.rows || !this.rows.length || !this.rowsToRender()) {