diff --git 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 index 65223b397e..fd40dd4c8e 100644 --- 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: [ diff --git 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 index 4a1e3647c7..8452915c4f 100644 --- 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) { - - @if (effectiveRowDetailTemplate) { - - - - - + + @if (effectiveRowDetailTemplate) { + + + + + - - - - - - } - @if(selectable()) { - - - - @if (selectionType() !== 'single') { -
- -
- } -
- - - @if(selectionType() === 'single') { -
- -
- } - @if (selectionType() !== 'single') { -
- -
- } -
+ + + + + + } + @if (selectable()) { + + + @if (selectionType() !== 'single') { +
+ +
+ } +
-
- } - @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) { - - - - - @if (isVisibleActions(row)) { - - } - - - - } - @for (prop of propList; track prop.name; let i = $index) { - - - @if (prop.tooltip) { - - {{ column.name }} - - } @else { - - {{ column.name }} - - } - - - - - @if (!row['_' + prop.name].component) { - @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') { -
- } @else { -
+ + @if (selectionType() === 'single') { +
+ +
+ } + @if (selectionType() !== 'single') { +
+ +
} +
+
+ } + @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) { + + + + + @if (isVisibleActions(row)) { + + } + + + + } + @for (prop of propList; track prop.name; let i = $index) { + + + @if (prop.tooltip) { + + {{ column.name }} + } @else { - + + {{ column.name }} + } - - - - - } -
-} \ No newline at end of file + + + + + @if (!row['_' + prop.name].component) { + @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') { +
+ } @else { +
+ } + } @else { + + } +
+
+
+ + } +
+} diff --git 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 index 81b9bdfc18..d4149f43e4 100644 --- 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 implements AfterViewInit, OnDestroy { readonly #injector = inject(Injector); @@ -101,10 +103,14 @@ export class ExtensibleTableComponent implements AfterViewInit, OnDestr readonly dataInput = input([], { alias: 'data' }); readonly list = input.required(); readonly recordsTotal = input.required(); - readonly actionsColumnWidthInput = input(undefined, { alias: 'actionsColumnWidth' }); + readonly actionsColumnWidthInput = input(undefined, { + alias: 'actionsColumnWidth', + }); readonly actionsTemplate = input | undefined>(undefined); readonly selectable = input(false); - readonly selectionTypeInput = input(SelectionType.multiClick, { alias: 'selectionType' }); + readonly selectionTypeInput = input(SelectionType.multiClick, { + alias: 'selectionType', + }); readonly selected = input([]); readonly infiniteScroll = input(false); readonly isLoading = input(false); @@ -199,36 +205,38 @@ export class ExtensibleTableComponent 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 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(); + }); } } diff --git 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 index a5882ab8e1..bda65957a6 100644 --- 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(propData: PropData) { - // Use .data to get resolved values (handles InputSignal) const data: ReadonlyPropData = propData.data; - + const extensions = data.getInjected(ExtensionsService); const identifier = data.getInjected(EXTENSIONS_IDENTIFIER); @@ -36,7 +35,7 @@ export function generateFormFromProps(propData: PropData) { 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(propData: PropData) { return form; } - diff --git 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 index 259d2f76a1..b341879995 100644 --- 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(undefined, { alias: 'abpFeatureManagementFreeText' }); + readonly feature = input(undefined, { + alias: 'abpFeatureManagementFreeText', + }); constructor() { effect(() => {