update: remove unused imports

2 days ago · bb5f10eb55
5 changed files with 260 additions and 169 deletions
--- a/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/components/extensible-form/extensible-form-prop.component.ts
@ -14,13 +14,11 @@ import {
  ElementRef,
  inject,
  Injector,
-  OnChanges,
  Optional,
-  SimpleChanges,
  SkipSelf,
  ViewChild,
  effect,
-  input
+  input,
 } from '@angular/core';
 import {
  ControlContainer,
@ -71,7 +69,7 @@ import { ExtensibleFormMultiselectComponent } from '../multi-select/extensible-f
    AsyncPipe,
    NgComponentOutlet,
    NgTemplateOutlet,
-    FormsModule
+    FormsModule,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,
  providers: [ExtensibleFormPropService],
@ -112,7 +110,7 @@ export class ExtensibleFormPropComponent implements AfterViewInit {
  disabledFn = (data: ReadonlyPropData) => false;

  get disabled() {
-    return this.disabledFn(this.data().data);
+    return this.disabledFn(this.data()?.data);
  }

  constructor() {
@ -120,9 +118,9 @@ export class ExtensibleFormPropComponent implements AfterViewInit {
    effect(() => {
      const currentProp = this.prop();
      if (!currentProp) return;
-      
+
      const { options, readonly, disabled, validators, className, template } = currentProp;
-      
+
      if (template) {
        this.injectorForCustomComponent = Injector.create({
          providers: [
--- 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
@ -1,119 +1,202 @@
@if (isBrowser) {
-<ngx-datatable #table default [rows]="data" [count]="recordsTotal()" [list]="list()"
-  [selectionType]="selectable() ? selectionType() : undefined" (activate)="tableActivate.emit($event)"
-  (select)="onSelect($event)" [selected]="selected()" (scroll)="onScroll($event)" [scrollbarV]="infiniteScroll()"
-  [style.height]="getTableHeight()" [loadingIndicator]="infiniteScroll() && isLoading()"
-  [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; context: { row: row, expanded: expanded }" />
-    </ng-template>
-  </ngx-datatable-row-detail>
+  <ngx-datatable
+    #table
+    default
+    [rows]="data"
+    [count]="recordsTotal()"
+    [list]="list()"
+    [selectionType]="selectable() ? selectionType() : undefined"
+    (activate)="tableActivate.emit($event)"
+    (select)="onSelect($event)"
+    [selected]="selected()"
+    (scroll)="onScroll($event)"
+    [scrollbarV]="infiniteScroll()"
+    [style.height]="getTableHeight()"
+    [loadingIndicator]="infiniteScroll() && isLoading()"
+    [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;
+              context: { row: row, expanded: expanded }
+            "
+          />
+        </ng-template>
+      </ngx-datatable-row-detail>

-  <ngx-datatable-column [width]="50" [resizeable]="false" [sortable]="false" [draggable]="false"
-    [canAutoResize]="false">
-    <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
-      <button type="button" class="btn btn-link text-decoration-none text-muted p-0"
-        [attr.aria-label]="expanded ? 'Collapse' : 'Expand'" (click)="toggleExpandRow(row)">
-        <i class="fa" [class.fa-chevron-down]="!expanded" [class.fa-chevron-up]="expanded"></i>
-      </button>
-    </ng-template>
-  </ngx-datatable-column>
-  }
-  @if(selectable()) {
-  <ngx-datatable-column [width]="50" [sortable]="false" [canAutoResize]="false" [draggable]="false"
-    [resizeable]="false">
-
-    <ng-template ngx-datatable-header-template let-value="value" let-allRowsSelected="allRowsSelected"
-      let-selectFn="selectFn">
-      @if (selectionType() !== 'single') {
-      <div class="form-check">
-        <input class="form-check-input table-check" type="checkbox" [checked]="allRowsSelected"
-          (change)="selectFn(!allRowsSelected)" />
-      </div>
-      }
-    </ng-template>
-
-    <ng-template ngx-datatable-cell-template let-value="value" let-row="row" let-isSelected="isSelected"
-      let-onCheckboxChangeFn="onCheckboxChangeFn">
-      @if(selectionType() === 'single') {
-      <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
-        <input class="form-check-input" type="radio" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
-      </div>
-      }
-      @if (selectionType() !== 'single') {
-      <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
-        <input class="form-check-input" type="checkbox" [checked]="isSelected" (change)="onCheckboxChangeFn($event)" />
-      </div>
-      }
-    </ng-template>
+      <ngx-datatable-column
+        [width]="50"
+        [resizeable]="false"
+        [sortable]="false"
+        [draggable]="false"
+        [canAutoResize]="false"
+      >
+        <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
+          <button
+            type="button"
+            class="btn btn-link text-decoration-none text-muted p-0"
+            [attr.aria-label]="expanded ? 'Collapse' : 'Expand'"
+            (click)="toggleExpandRow(row)"
+          >
+            <i class="fa" [class.fa-chevron-down]="!expanded" [class.fa-chevron-up]="expanded"></i>
+          </button>
+        </ng-template>
+      </ngx-datatable-column>
+    }
+    @if (selectable()) {
+      <ngx-datatable-column
+        [width]="50"
+        [sortable]="false"
+        [canAutoResize]="false"
+        [draggable]="false"
+        [resizeable]="false"
+      >
+        <ng-template
+          ngx-datatable-header-template
+          let-value="value"
+          let-allRowsSelected="allRowsSelected"
+          let-selectFn="selectFn"
+        >
+          @if (selectionType() !== 'single') {
+            <div class="form-check">
+              <input
+                class="form-check-input table-check"
+                type="checkbox"
+                [checked]="allRowsSelected"
+                (change)="selectFn(!allRowsSelected)"
+              />
+            </div>
+          }
+        </ng-template>

-  </ngx-datatable-column>
-  }
-  @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {
-  <ngx-datatable-column [name]="actionsText() | abpLocalization" [maxWidth]="_actionsColumnWidth() ?? undefined"
-    [width]="_actionsColumnWidth() ?? 200" [canAutoResize]="!_actionsColumnWidth()" [sortable]="false">
-    <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
-      <ng-container
-        *ngTemplateOutlet="actionsTemplate() || gridActions; context: { $implicit: row, index: i }"></ng-container>
-      <ng-template #gridActions>
-        @if (isVisibleActions(row)) {
-        <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
-        }
-      </ng-template>
-    </ng-template>
-  </ngx-datatable-column>
-  }
-  @for (prop of propList; track prop.name; let i = $index) {
-  <ngx-datatable-column *abpVisible="prop.columnVisible(getInjected)" [width]="columnWidths()[i] ?? 200"
-    [canAutoResize]="!columnWidths()[i]"
-    [name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization" [prop]="prop.name"
-    [sortable]="prop.sortable">
-    <ng-template ngx-datatable-header-template let-column="column" let-sortFn="sortFn">
-      @if (prop.tooltip) {
-      <span [ngbTooltip]="prop.tooltip.text | abpLocalization" [placement]="prop.tooltip.placement || 'auto'"
-        container="body" [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)">
-        {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
-      </span>
-      } @else {
-      <span [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)">
-        {{ column.name }}
-      </span>
-      }
-    </ng-template>
-    <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
-      <ng-container *abpPermission="prop.permission; runChangeDetection: false">
-        <ng-container *abpVisible="row['_' + prop.name]?.visible">
-          @if (!row['_' + prop.name].component) {
-          @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {
-          <div [innerHTML]="
-                  !prop.isExtra
-                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)
-                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)
-                " (click)="
-                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
-                " [class]="entityPropTypeClasses[prop.type]" [class.pointer]="prop.action"></div>
-          } @else {
-          <div [innerHTML]="
-                  !prop.isExtra
-                    ? (row['_' + prop.name]?.value | async)
-                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)
-                " (click)="
-                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })
-                " [class]="entityPropTypeClasses[prop.type]" [class.pointer]="prop.action"></div>
+        <ng-template
+          ngx-datatable-cell-template
+          let-value="value"
+          let-row="row"
+          let-isSelected="isSelected"
+          let-onCheckboxChangeFn="onCheckboxChangeFn"
+        >
+          @if (selectionType() === 'single') {
+            <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
+              <input
+                class="form-check-input"
+                type="radio"
+                [checked]="isSelected"
+                (change)="onCheckboxChangeFn($event)"
+              />
+            </div>
+          }
+          @if (selectionType() !== 'single') {
+            <div class="h-100 form-check form-check-sm form-check-custom form-check-solid">
+              <input
+                class="form-check-input"
+                type="checkbox"
+                [checked]="isSelected"
+                (change)="onCheckboxChangeFn($event)"
+              />
+            </div>
          }
+        </ng-template>
+      </ngx-datatable-column>
+    }
+    @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {
+      <ngx-datatable-column
+        [name]="actionsText() | abpLocalization"
+        [maxWidth]="_actionsColumnWidth() ?? undefined"
+        [width]="_actionsColumnWidth() ?? 200"
+        [canAutoResize]="!_actionsColumnWidth()"
+        [sortable]="false"
+      >
+        <ng-template let-row="row" let-i="rowIndex" ngx-datatable-cell-template>
+          <ng-container
+            *ngTemplateOutlet="
+              actionsTemplate() || gridActions;
+              context: { $implicit: row, index: i }
+            "
+          ></ng-container>
+          <ng-template #gridActions>
+            @if (isVisibleActions(row)) {
+              <abp-grid-actions [index]="i" [record]="row" text="AbpUi::Actions"></abp-grid-actions>
+            }
+          </ng-template>
+        </ng-template>
+      </ngx-datatable-column>
+    }
+    @for (prop of propList; track prop.name; let i = $index) {
+      <ngx-datatable-column
+        *abpVisible="prop.columnVisible(getInjected)"
+        [width]="columnWidths()[i] ?? 200"
+        [canAutoResize]="!columnWidths()[i]"
+        [name]="(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization"
+        [prop]="prop.name"
+        [sortable]="prop.sortable"
+      >
+        <ng-template ngx-datatable-header-template let-column="column" let-sortFn="sortFn">
+          @if (prop.tooltip) {
+            <span
+              [ngbTooltip]="prop.tooltip.text | abpLocalization"
+              [placement]="prop.tooltip.placement || 'auto'"
+              container="body"
+              [class.pointer]="prop.sortable"
+              (click)="prop.sortable && sortFn(column)"
+            >
+              {{ column.name }} <i class="fa fa-info-circle" aria-hidden="true"></i>
+            </span>
          } @else {
-          <ng-container *ngComponentOutlet="
-                  row['_' + prop.name].component;
-                  injector: row['_' + prop.name].injector
-                "></ng-container>
+            <span [class.pointer]="prop.sortable" (click)="prop.sortable && sortFn(column)">
+              {{ column.name }}
+            </span>
          }
-        </ng-container>
-      </ng-container>
-    </ng-template>
-  </ngx-datatable-column>
-  }
-</ngx-datatable>
-}
+        </ng-template>
+        <ng-template let-row="row" let-i="index" ngx-datatable-cell-template>
+          <ng-container *abpPermission="prop.permission; runChangeDetection: false">
+            <ng-container *abpVisible="row['_' + prop.name]?.visible">
+              @if (!row['_' + prop.name].component) {
+                @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {
+                  <div
+                    [innerHTML]="
+                      !prop.isExtra
+                        ? (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)
+                        : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)
+                          | abpLocalization)
+                    "
+                    (click)="
+                      prop.action &&
+                        prop.action({ getInjected: getInjected, record: row, index: i })
+                    "
+                    [class]="entityPropTypeClasses[prop.type]"
+                    [class.pointer]="prop.action"
+                  ></div>
+                } @else {
+                  <div
+                    [innerHTML]="
+                      !prop.isExtra
+                        ? (row['_' + prop.name]?.value | async)
+                        : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)
+                    "
+                    (click)="
+                      prop.action &&
+                        prop.action({ getInjected: getInjected, record: row, index: i })
+                    "
+                    [class]="entityPropTypeClasses[prop.type]"
+                    [class.pointer]="prop.action"
+                  ></div>
+                }
+              } @else {
+                <ng-container
+                  *ngComponentOutlet="
+                    row['_' + prop.name].component;
+                    injector: row['_' + prop.name].injector
+                  "
+                ></ng-container>
+              }
+            </ng-container>
+          </ng-container>
+        </ng-template>
+      </ngx-datatable-column>
+    }
+  </ngx-datatable>
+}
--- 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
@ -16,7 +16,7 @@ import {
  ViewChild,
  input,
  effect,
-  output
+  output,
 } from '@angular/core';
 import { AsyncPipe, isPlatformBrowser, NgComponentOutlet, NgTemplateOutlet } from '@angular/common';

@ -77,12 +77,14 @@ const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
  ],
  templateUrl: './extensible-table.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush,
-  styles: [`
-    :host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail {
-      background: none;
-      padding: 0;
-    }
-  `],
+  styles: [
+    `
+      :host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail {
+        background: none;
+        padding: 0;
+      }
+    `,
+  ],
 })
 export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestroy {
  readonly #injector = inject(Injector);
@ -101,10 +103,14 @@ export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestr
  readonly dataInput = input<R[]>([], { alias: 'data' });
  readonly list = input.required<ListService>();
  readonly recordsTotal = input.required<number>();
-  readonly actionsColumnWidthInput = input<number | undefined>(undefined, { alias: 'actionsColumnWidth' });
+  readonly actionsColumnWidthInput = input<number | undefined>(undefined, {
+    alias: 'actionsColumnWidth',
+  });
  readonly actionsTemplate = input<TemplateRef<any> | undefined>(undefined);
  readonly selectable = input(false);
-  readonly selectionTypeInput = input<SelectionType | string>(SelectionType.multiClick, { alias: 'selectionType' });
+  readonly selectionTypeInput = input<SelectionType | string>(SelectionType.multiClick, {
+    alias: 'selectionType',
+  });
  readonly selected = input<any[]>([]);
  readonly infiniteScroll = input(false);
  readonly isLoading = input(false);
@ -199,36 +205,38 @@ export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestr
        this.list().totalCount = this.recordsTotal();
      }

-      this._data.set(dataValue.map((record: any, index: number) => {
-        this.propList.forEach(prop => {
-          const propData = { getInjected: this.getInjected, record, index } as ReadonlyPropData;
-          const value = this.getContent(prop.value, propData);
-
-          const propKey = `_${prop.value.name}`;
-          record[propKey] = {
-            visible: prop.value.visible(propData),
-            value,
-          };
-          if (prop.value.component) {
-            record[propKey].injector = Injector.create({
-              providers: [
-                {
-                  provide: PROP_DATA_STREAM,
-                  useValue: value,
-                },
-                {
-                  provide: ROW_RECORD,
-                  useValue: record,
-                },
-              ],
-              parent: this.#injector,
-            });
-            record[propKey].component = prop.value.component;
-          }
-        });
-
-        return record;
-      }));
+      this._data.set(
+        dataValue.map((record: any, index: number) => {
+          this.propList.forEach(prop => {
+            const propData = { getInjected: this.getInjected, record, index } as ReadonlyPropData;
+            const value = this.getContent(prop.value, propData);
+
+            const propKey = `_${prop.value.name}`;
+            record[propKey] = {
+              visible: prop.value.visible(propData),
+              value,
+            };
+            if (prop.value.component) {
+              record[propKey].injector = Injector.create({
+                providers: [
+                  {
+                    provide: PROP_DATA_STREAM,
+                    useValue: value,
+                  },
+                  {
+                    provide: ROW_RECORD,
+                    useValue: record,
+                  },
+                ],
+                parent: this.#injector,
+              });
+              record[propKey].component = prop.value.component;
+            }
+          });
+
+          return record;
+        }),
+      );
    });
  }

@ -333,10 +341,12 @@ export class ExtensibleTableComponent<R = any> implements AfterViewInit, OnDestr

  ngAfterViewInit(): void {
    if (!this.infiniteScroll()) {
-      this.list()?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
-        this._data.set([]);
-        this.cdr.markForCheck();
-      });
+      this.list()
+        ?.requestStatus$?.pipe(filter(status => status === 'loading'))
+        .subscribe(() => {
+          this._data.set([]);
+          this.cdr.markForCheck();
+        });
    }
  }

--- a/npm/ng-packs/packages/components/extensible/src/lib/utils/form-props.util.ts
+++ b/npm/ng-packs/packages/components/extensible/src/lib/utils/form-props.util.ts
@ -9,9 +9,8 @@ import { ExtensionsService } from '../services/extensions.service';
 import { EXTENSIONS_IDENTIFIER } from '../tokens/extensions.token';

 export function generateFormFromProps<R = any>(propData: PropData<R>) {
-  // Use .data to get resolved values (handles InputSignal)
  const data: ReadonlyPropData<R> = propData.data;
-  
+
  const extensions = data.getInjected(ExtensionsService<R>);
  const identifier = data.getInjected(EXTENSIONS_IDENTIFIER);

@ -36,7 +35,7 @@ export function generateFormFromProps<R = any>(propData: PropData<R>) {
      value = record[name];
    }

-    if (typeof value === 'undefined') value = prop.defaultValue;
+    if (typeof value === 'undefined') value = prop.defaultValue as any;

    if (value) {
      let adapter: DateAdapter | TimeAdapter | DateTimeAdapter;
@ -68,4 +67,3 @@ export function generateFormFromProps<R = any>(propData: PropData<R>) {

  return form;
 }
-
--- a/npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/directives/free-text-input.directive.ts
@ -1,4 +1,4 @@
-import { Directive, effect, inject, input, signal, ElementRef, Renderer2 } from '@angular/core';
+import { Directive, effect, inject, input, ElementRef, Renderer2 } from '@angular/core';

 // TODO: improve this type
 export interface FreeTextType {
@ -22,7 +22,9 @@ export class FreeTextInputDirective {
  private readonly elRef = inject(ElementRef);
  private readonly renderer = inject(Renderer2);

-  readonly feature = input<FreeTextType | undefined>(undefined, { alias: 'abpFeatureManagementFreeText' });
+  readonly feature = input<FreeTextType | undefined>(undefined, {
+    alias: 'abpFeatureManagementFreeText',
+  });

  constructor() {
    effect(() => {