@acorex/components 18.14.1-next.4 → 18.15.0

package/fesm2022/acorex-components-data-table.mjs

@@ -1,8 +1,10 @@
 import * as i5$1 from '@acorex/components/common';
 import { MXBaseComponent, convertArrayToDataSource, AXListDataSource, AXPagedComponent, AXCommonModule, AXRippleDirective } from '@acorex/components/common';
 import * as i0 from '@angular/core';
-import { EventEmitter, signal, Injectable, Input, Output, Directive, HostListener, inject, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, NgZone, computed, ContentChildren, NgModule } from '@angular/core';
+import { EventEmitter, signal, Injectable, Input, Output, inject, Directive, HostListener, Component, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, ChangeDetectorRef, NgZone, computed, ContentChildren, NgModule } from '@angular/core';
 import { isBrowser } from '@acorex/core/platform';
+import * as i1$1 from '@angular/common';
+import { DOCUMENT, CommonModule } from '@angular/common';
 import { Subject, debounceTime, buffer, filter } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import * as i2 from '@acorex/core/format';
@@ -17,8 +19,6 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i4 from '@acorex/components/dropdown';
 import { AXDropdownModule } from '@acorex/components/dropdown';
 import { AXUnsubscriber, AXHtmlUtil } from '@acorex/core/utils';
-import * as i1$1 from '@angular/common';
-import { CommonModule } from '@angular/common';
 import * as i6 from '@acorex/components/data-pager';
 import { AXDataPagerModule } from '@acorex/components/data-pager';
 import { AXResultModule } from '@acorex/components/result';
@@ -112,6 +112,7 @@ class AXDataTableColumnResizableDirective {
         this.renderer = renderer;
         this.ngZone = ngZone;
         this.cdr = cdr;
+        this.document = inject(DOCUMENT);
         this.resize$ = new Subject();
         this.onMouseMoveRawBound = this.onMouseMoveRaw.bind(this);
         this.onMouseUpBound = this.onMouseUp.bind(this);
@@ -123,8 +124,8 @@ class AXDataTableColumnResizableDirective {
             this.ngZone.runOutsideAngular(() => {
                 this.startX = event.pageX;
                 this.startWidth = this.el?.nativeElement?.parentElement.offsetWidth;
-                document.addEventListener('mousemove', this.onMouseMoveRawBound);
-                document.addEventListener('mouseup', this.onMouseUpBound);
+                this.document.addEventListener('mousemove', this.onMouseMoveRawBound);
+                this.document.addEventListener('mouseup', this.onMouseUpBound);
             });
             this.cdr.detach(); // Detach the change detector
         }
@@ -140,8 +141,8 @@ class AXDataTableColumnResizableDirective {
         }
     }
     onMouseUp() {
-        document.removeEventListener('mousemove', this.onMouseMoveRawBound);
-        document.removeEventListener('mouseup', this.onMouseUpBound);
+        this.document.removeEventListener('mousemove', this.onMouseMoveRawBound);
+        this.document.removeEventListener('mouseup', this.onMouseUpBound);
         this.cdr.reattach(); // Reattach the change detector
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: AXDataTableColumnResizableDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }, { token: i0.NgZone }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Directive }); }
@@ -911,6 +912,7 @@ class AXDataTableComponent extends AXBaseDataTable {
         super(...arguments);
         this._unsubscriber = inject(AXUnsubscriber);
         this._zone = inject(NgZone);
+        this.document = inject(DOCUMENT);
         /**
          *  @ignore
          */
@@ -992,73 +994,73 @@ class AXDataTableComponent extends AXBaseDataTable {
          */
         this.fixedHeader = true;
         /**
-        * Indicates if the table footer should be displayed.
-        *
-        * @defaultValue `false`
-        */
+         * Indicates if the table footer should be displayed.
+         *
+         * @defaultValue `false`
+         */
         this.showFooter = false;
         /**
-       * Indicates if the table footer should be fixed.
-       *
-       * @defaultValue `true`
-       */
+         * Indicates if the table footer should be fixed.
+         *
+         * @defaultValue `true`
+         */
         this.fixedFooter = true;
         /**
-       * Specifies the height of each item in the table.
-       *
-       * @defaultValue `40`
-       */
+         * Specifies the height of each item in the table.
+         *
+         * @defaultValue `40`
+         */
         this.itemHeight = 40;
         /**
-        * Enables or disables row reordering.
-        *
-        * @defaultValue `false`
-        */
+         * Enables or disables row reordering.
+         *
+         * @defaultValue `false`
+         */
         this.allowReordering = false;
         /**
-       * Enables or disables paging.
-       *
-       * @defaultValue `true`
-       */
+         * Enables or disables paging.
+         *
+         * @defaultValue `true`
+         */
         this.paging = true;
         /**
-       * Specifies how data should be fetched.
-       *
-       * @defaultValue `'auto'`
-       */
+         * Specifies how data should be fetched.
+         *
+         * @defaultValue `'auto'`
+         */
         this.fetchDataMode = 'auto';
         /**
-       * Configuration for loading state.
-       *
-       * @defaultValue `{ enabled: true, animation: true }`
-       */
+         * Configuration for loading state.
+         *
+         * @defaultValue `{ enabled: true, animation: true }`
+         */
         this.loading = {
             enabled: true,
             animation: true,
         };
         /**
-       * Emits when the focused row changes.
-       *
-       * @event
-       */
+         * Emits when the focused row changes.
+         *
+         * @event
+         */
         this.focusedRowChange = new EventEmitter();
         /**
-       * Emits when a row is clicked.
-       *
-       * @event onRowClick
-       */
+         * Emits when a row is clicked.
+         *
+         * @event onRowClick
+         */
         this.onRowClick = new EventEmitter();
         /**
-       * Emits when a row is double-clicked.
-       *
-       * @event onRowDbClick
-       */
+         * Emits when a row is double-clicked.
+         *
+         * @event onRowDbClick
+         */
         this.onRowDbClick = new EventEmitter();
         /**
-       * Emits when the order of columns changes.
-       *
-       * @event onColumnsOrderChanged
-       */
+         * Emits when the order of columns changes.
+         *
+         * @event onColumnsOrderChanged
+         */
         this.onColumnsOrderChanged = new EventEmitter();
         /**
          *  @ignore
@@ -1069,7 +1071,9 @@ class AXDataTableComponent extends AXBaseDataTable {
          */
         this.onResizeColumnMove = (event) => {
             const diffX = event.pageX - this.resizeColumnProp.startX;
-            const newWidth = this.rtl ? this.resizeColumnProp.startWidth - diffX : this.resizeColumnProp.startWidth + diffX;
+            const newWidth = this.rtl
+                ? this.resizeColumnProp.startWidth - diffX
+                : this.resizeColumnProp.startWidth + diffX;
             this.resizeColumnProp.thElement.style.width = `${Math.max(100, newWidth)}px`;
             this.resizeColumnProp.thElement.setAttribute('new-width', `${newWidth}`);
         };
@@ -1077,24 +1081,24 @@ class AXDataTableComponent extends AXBaseDataTable {
          *  @ignore
          */
         this.onResizeColumnEnd = () => {
-            document.removeEventListener('mousemove', this.onResizeColumnMove);
-            document.removeEventListener('mouseup', this.onResizeColumnEnd);
+            this.document.removeEventListener('mousemove', this.onResizeColumnMove);
+            this.document.removeEventListener('mouseup', this.onResizeColumnEnd);
             const newWidth = parseInt(this.resizeColumnProp.thElement.attributes.getNamedItem('new-width').value);
             this.columns.get(this.resizeColumnProp.columnIndex).width = `${Math.max(100, newWidth)}px`;
             this.resetResizingProcess();
         };
     }
     /**
-   * Gets the currently focused row.
-   */
+     * Gets the currently focused row.
+     */
     get focusedRow() {
         return this._focusedRow;
     }
     /**
-   * Sets the currently focused row and emits the change event.
-   *
-   * @param v - The row to be focused.
-   */
+     * Sets the currently focused row and emits the change event.
+     *
+     * @param v - The row to be focused.
+     */
     set focusedRow(v) {
         this._focusedRow = v;
         this.focusedRowChange.emit(v);
@@ -1208,13 +1212,13 @@ class AXDataTableComponent extends AXBaseDataTable {
         });
     }
     /**
-   * Handles the click event on a column header.
-   * Toggles the sorting direction or removes the sort if already sorted.
-   *
-   * @param e - The mouse event triggered by the click.
-   * @param column - The column that was clicked.
-   * @ignore
-   */
+     * Handles the click event on a column header.
+     * Toggles the sorting direction or removes the sort if already sorted.
+     *
+     * @param e - The mouse event triggered by the click.
+     * @param column - The column that was clicked.
+     * @ignore
+     */
     handleColumnClick(e, column) {
         if (column instanceof AXDataTableTextColumnComponent) {
             const sort = this.dataSource.query.sort.find((c) => c.field == column.dataField);
@@ -1246,9 +1250,9 @@ class AXDataTableComponent extends AXBaseDataTable {
         return undefined;
     }
     /**
-   * Refreshes the data in the data source and resets the data pager to the first page.
-   * @ignore
-   */
+     * Refreshes the data in the data source and resets the data pager to the first page.
+     * @ignore
+     */
     refresh() {
         this.dataSource.refresh();
         if (this.dataPager) {
@@ -1272,8 +1276,8 @@ class AXDataTableComponent extends AXBaseDataTable {
         this.resizeColumnProp.startWidth = parseInt(this.resizeColumnProp.thElement.style.width);
         this.resizeColumnProp.columnIndex = columnIndex;
         this._zone.runOutsideAngular(() => {
-            document.addEventListener('mousemove', this.onResizeColumnMove);
-            document.addEventListener('mouseup', this.onResizeColumnEnd);
+            this.document.addEventListener('mousemove', this.onResizeColumnMove);
+            this.document.addEventListener('mouseup', this.onResizeColumnEnd);
         });
     }
     /**
@@ -1398,6 +1402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
 class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
     constructor() {
         super(...arguments);
+        this.document = inject(DOCUMENT);
         this.ngZone = inject(NgZone);
         /**
          * Emits an event when the page changes.
@@ -1607,14 +1612,17 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
      *  @ignore
      */
     updateHeight() {
-        this.height = `calc(100% - ${(this.headerContainer?.nativeElement.clientHeight ?? 0) + (this.footerContainer?.nativeElement.clientHeight ?? 0)}px)`;
+        this.height = `calc(100% - ${(this.headerContainer?.nativeElement.clientHeight ?? 0) +
+            (this.footerContainer?.nativeElement.clientHeight ?? 0)}px)`;
     }
     /**
      *  @ignore
      */
     updateWidth() {
         if (this.columns && this.columns.length) {
-            const sumPx = sum(this.columns.toArray().map((c) => (typeof c.width == 'number' ? c.width : Number(c.width.replace('px', '')))));
+            const sumPx = sum(this.columns
+                .toArray()
+                .map((c) => (typeof c.width == 'number' ? c.width : Number(c.width.replace('px', '')))));
             this.width = `${Math.max(sumPx, this.getHostElement().clientWidth - 5)}px`;
         }
     }
@@ -1640,7 +1648,7 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
         fixedColumnTable.querySelectorAll('tr').forEach((n) => n.remove());
         for (const row of originalRows) {
             const fixedCells = Array.from(row.querySelectorAll('[data-fixed="start"]'));
-            const fixedRow = document.createElement('tr');
+            const fixedRow = this.document.createElement('tr');
             for (const cell of fixedCells) {
                 const clonedCell = cell.cloneNode(true);
                 fixedRow.appendChild(clonedCell);
@@ -1705,12 +1713,12 @@ class AXInfiniteScrollDataTableComponent extends AXBaseDataTable {
         });
     }
     /**
-   * Handles column header clicks to toggle sorting on the column.
-   *
-   * @param e - The mouse event triggered by the click.
-   * @param column - The column that was clicked.
-   * @ignore
-   */
+     * Handles column header clicks to toggle sorting on the column.
+     *
+     * @param e - The mouse event triggered by the click.
+     * @param column - The column that was clicked.
+     * @ignore
+     */
     handleColumnClick(e, column) {
         if (column instanceof AXDataTableTextColumnComponent) {
             const sort = this.dataSource.query.sort.find((c) => c.field == column.dataField);