update: components package for the latest upgrade (html properties)

4 months ago · 29d667a1b6
7 changed files with 75 additions and 41 deletions
--- a/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
+++ b/npm/ng-packs/packages/components/dynamic-form/src/dynamic-form-field/dynamic-form-field.component.html
@ -51,7 +51,8 @@
  <div class="form-group form-check mb-3" role="group">
    <abp-checkbox 
      [label]="field().label | abpLocalization" 
-      formControlName="value" 
+      formControlName="value"
+      [checkboxId]="fieldId" 
      [id]="fieldId"
      [attr.aria-required]="field().required || null"
      [attr.aria-invalid]="isInvalid || null"
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.html
@ -16,14 +16,26 @@
    [footerHeight]="infiniteScroll() ? false : 50"
  >
    @if (effectiveRowDetailTemplate) {
-      <ngx-datatable-row-detail [rowHeight]="effectiveRowDetailHeight">
-        <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
-          <ng-container
-            [ngTemplateOutlet]="effectiveRowDetailTemplate"
-            [ngTemplateOutletContext]="{ row: row, expanded: expanded }"
-          ></ng-container>
-        </ng-template>
-      </ngx-datatable-row-detail>
+      @let detailRowHeight = effectiveRowDetailRowHeight();
+      @if (detailRowHeight !== undefined) {
+        <ngx-datatable-row-detail [rowHeight]="detailRowHeight">
+          <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
+            <ng-container
+              [ngTemplateOutlet]="effectiveRowDetailTemplate"
+              [ngTemplateOutletContext]="{ row: row, expanded: expanded }"
+            />
+          </ng-template>
+        </ngx-datatable-row-detail>
+      } @else {
+        <ngx-datatable-row-detail>
+          <ng-template let-row="row" let-expanded="expanded" ngx-datatable-row-detail-template>
+            <ng-container
+              [ngTemplateOutlet]="effectiveRowDetailTemplate"
+              [ngTemplateOutletContext]="{ row: row, expanded: expanded }"
+            />
+          </ng-template>
+        </ngx-datatable-row-detail>
+      }

      <ngx-datatable-column
        [width]="50"
@ -54,7 +66,6 @@
      >
        <ng-template
          ngx-datatable-header-template
-          let-value="value"
          let-allRowsSelected="allRowsSelected"
          let-selectFn="selectFn"
        >
@ -64,7 +75,7 @@
                class="form-check-input table-check"
                type="checkbox"
                [checked]="allRowsSelected"
-                (change)="selectFn(!allRowsSelected)"
+                (change)="selectFn()"
              />
            </div>
          }
@ -136,17 +147,17 @@
              [placement]="prop.tooltip.placement || 'auto'"
              container="body"
              [class.pointer]="prop.sortable"
-              (click)="prop.sortable && sortFn(column)"
+              (click)="prop.sortable && sortFn()"
            >
              {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
            </span>
          } @else {
-            <span [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)">
+            <span [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn()">
              {{ column.name }}
            </span>
          }
        </ng-template>
-        <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
+        <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
          <ng-container *abpPermission="prop.permission; runChangeDetection: false">
            <ng-container *abpVisible="row['_' + prop.name]?.visible">
              @if (!row['_' + prop.name].component) {
@ -186,7 +197,7 @@
                    row['_' + prop.name].component;
                    injector: row['_' + prop.name].injector
                  "
-                ></ng-container>
+                />
              }
            </ng-container>
          </ng-container>
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-table/extensible-table.component.ts
@ -23,7 +23,12 @@ import { AsyncPipe, isPlatformBrowser, NgComponentOutlet, NgTemplateOutlet } fro
 import { Observable, filter, map, Subject, debounceTime, distinctUntilChanged } from 'rxjs';

 import { NgbTooltip } from '@ng-bootstrap/ng-bootstrap';
-import { NgxDatatableModule, SelectionType, DatatableComponent } from '@swimlane/ngx-datatable';
+import {
+  NgxDatatableModule,
+  SelectionType,
+  DatatableComponent,
+  ScrollEvent,
+} from '@swimlane/ngx-datatable';

 import {
  ABP,
@ -130,7 +135,7 @@ export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestr

  // Internal signals
  protected readonly _data = signal<R[]>([]);
-  private readonly _actionsColumnWidth = signal<number | undefined>(DEFAULT_ACTIONS_COLUMN_WIDTH);
+  protected readonly _actionsColumnWidth = signal<number | undefined>(DEFAULT_ACTIONS_COLUMN_WIDTH);

  readonly rowDetailComponent = contentChild(ExtensibleTableRowDetailComponent);

@ -162,6 +167,27 @@ export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestr
    return this.rowDetailComponent()?.rowHeight() ?? this.rowDetailHeight();
  }

+  protected readonly effectiveRowDetailRowHeight = computed(
+    (): number | ((row?: R, index?: number) => number) | undefined => {
+      const height = this.effectiveRowDetailHeight;
+
+      if (typeof height === 'number') {
+        return height as number;
+      }
+
+      if (typeof height === 'function') {
+        return height as (row?: R, index?: number) => number;
+      }
+
+      if (typeof height === 'string' && !height.endsWith('%')) {
+        const parsed = Number.parseInt(height, 10);
+        return Number.isNaN(parsed) ? undefined : parsed;
+      }
+
+      return undefined;
+    },
+  );
+
  hasAtLeastOnePermittedAction: boolean;

  readonly propList: EntityPropList<R>;
@ -299,17 +325,16 @@ export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestr
    this.selectionChange.emit(selected);
  }

-  onScroll(scrollEvent: Event): void {
+  onScroll(scrollEvent: ScrollEvent): void {
    if (!this.shouldHandleScroll()) {
      return;
    }

-    const target = scrollEvent.target as HTMLElement;
-    if (!target) {
-      return;
-    }
+    const table = this.table();
+    const viewportHeight = table.bodyHeight;
+    const scrollHeight = table.bodyComponent.scrollHeight();

-    if (this.isNearScrollBottom(target)) {
+    if (scrollEvent.offsetY + viewportHeight >= scrollHeight - this.scrollThreshold()) {
      this.loadMoreSubject.next();
    }
  }
@ -318,11 +343,6 @@ export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestr
    return this.infiniteScroll() && !this.isLoading();
  }

-  private isNearScrollBottom(element: HTMLElement): boolean {
-    const { offsetHeight, scrollTop, scrollHeight } = element;
-    return offsetHeight + scrollTop >= scrollHeight - this.scrollThreshold();
-  }
-
  private triggerLoadMore(): void {
    this.loadMore.emit();
  }
--- a/npm/ng-packs/packages/components/package.json
+++ b/npm/ng-packs/packages/components/package.json
@ -12,7 +12,7 @@
  },
  "dependencies": {
    "chart.js": "^3.5.1",
-    "ng-zorro-antd": "~21.0.0-next.1",
+    "ng-zorro-antd": "~21.3.1",
    "@ctrl/tinycolor": "^4.0.0",
    "tslib": "^2.0.0"
  },
--- a/npm/ng-packs/packages/components/project.json
+++ b/npm/ng-packs/packages/components/project.json
@ -31,7 +31,7 @@
      "executor": "@nx/vitest:test",
      "outputs": ["{options.reportsDirectory}"],
      "options": {
-        "reportsDirectory": "../../coverage/packages/components"
+        "reportsDirectory": "{projectRoot}/../../coverage/packages/components"
      }
    }
  }
--- a/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
+++ b/npm/ng-packs/packages/components/tree/src/lib/components/tree.component.ts
@ -163,23 +163,25 @@ export class TreeComponent implements OnInit {
    }
  }

-  onCheckboxChange(event: { keys: any[] }) {
-    this._checkedKeys.set([...event.keys]);
-    this.checkedKeysChange.emit(event.keys);
+  onCheckboxChange(event: NzFormatEmitEvent) {
+    this._checkedKeys.set([...event.keys as any[]]);
+    this.checkedKeysChange.emit(event.keys as any[]);
  }

-  onExpandedKeysChange(event: { keys: string[] } & NzFormatEmitEvent) {
-    this._expandedKeys.set([...event.keys]);
-    this.expandedKeysChange.emit(event.keys);
+  onExpandedKeysChange(event: NzFormatEmitEvent) {
+    this._expandedKeys.set([...event.keys as string[]]);
+    this.expandedKeysChange.emit(event.keys as string[]);
    this.nzExpandChange.emit(event);
  }

-  onDrop(event: DropEvent) {
+  onDrop(event: NzFormatEmitEvent) {
    event.event?.stopPropagation();
    event.event?.preventDefault();
-    event.pos = this.dropPosition;

-    this.dropOver.emit(event);
+    this.dropOver.emit({
+      ...event,
+      pos: this.dropPosition,
+    });
  }

  initDropdown(key: string, dropdown: NgbDropdown) {
--- a/npm/ng-packs/packages/components/tsconfig.lib.json
+++ b/npm/ng-packs/packages/components/tsconfig.lib.json
@ -12,7 +12,7 @@
  },
  "exclude": [
    "src/test-setup.ts",
-    "src/**/*.spec.ts",
+    "**/*.spec.ts",
    "jest.config.ts",
    "vite.config.ts",
    "vite.config.mts",
@ -27,5 +27,5 @@
    "src/**/*.spec.jsx",
    "src/test-setup.ts"
  ],
-  "include": ["src/**/*.ts"]
+  "include": ["**/*.ts"]
 }