@abp/ng.components 10.1.0 → 10.2.0-rc.1

package/fesm2022/abp-ng.components-extensible.mjs

@@ -1,17 +1,17 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, input, Optional, SkipSelf, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, Injectable, forwardRef, Injector, Input, TemplateRef, ViewContainerRef, Directive, ViewChildren, LOCALE_ID, PLATFORM_ID, EventEmitter, signal, computed, Output, Pipe, NgModule } from '@angular/core';
+import { inject, ChangeDetectorRef, input, viewChild, Optional, SkipSelf, ChangeDetectionStrategy, Component, InjectionToken, Injectable, forwardRef, Injector, effect, isSignal, TemplateRef, ViewContainerRef, Directive, viewChildren, signal, contentChild, LOCALE_ID, PLATFORM_ID, output, computed, Pipe, NgModule } from '@angular/core';
 import * as i2 from '@angular/forms';
 import { ControlContainer, ReactiveFormsModule, Validators, NG_VALUE_ACCESSOR, FormGroupDirective, FormsModule, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import * as i1 from '@ng-bootstrap/ng-bootstrap';
-import { NgbDateAdapter, NgbTimeAdapter, NgbDatepickerModule, NgbTimepickerModule, NgbInputDatepicker, NgbTimepicker, NgbTooltip, NgbTypeaheadModule, NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbInputDatepicker, NgbTimepicker, NgbDateAdapter, NgbTimeAdapter, NgbDatepickerModule, NgbTimepickerModule, NgbTooltip, NgbTypeaheadModule, NgbDropdownModule, NgbTooltipModule } from '@ng-bootstrap/ng-bootstrap';
 import * as i3 from '@ngx-validate/core';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { DateTimeAdapter, DateAdapter, TimeAdapter, DisabledDirective, EllipsisDirective, AbpVisibleDirective, NgxDatatableDefaultDirective, NgxDatatableListDirective, ThemeSharedModule } from '@abp/ng.theme.shared';
 import { RestService, ConfigStateService, AbpValidators, LocalizationPipe, TrackByService, ShowPasswordDirective, PermissionDirective, escapeHtmlChars, TimezoneService, PermissionService, UtcToLocalPipe, LocalizationService, createLocalizationPipeKeyGenerator, CoreModule } from '@abp/ng.core';
 import { of, Subject, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, map as map$1, filter, merge, pipe, zip } from 'rxjs';
 import { map, debounceTime, distinctUntilChanged, switchMap, filter as filter$1, take } from 'rxjs/operators';
+import { NgComponentOutlet, NgTemplateOutlet, AsyncPipe, isPlatformBrowser } from '@angular/common';
 import { LinkedList } from '@abp/utils';
-import { NgClass, NgComponentOutlet, NgTemplateOutlet, AsyncPipe, isPlatformBrowser } from '@angular/common';
 import * as i1$1 from '@swimlane/ngx-datatable';
 import { SelectionType, NgxDatatableModule } from '@swimlane/ngx-datatable';
 
@@ -25,15 +25,17 @@ class ExtensibleDateTimePickerComponent {
         this.prop = input(...(ngDevMode ? [undefined, { debugName: "prop" }] : []));
         this.meridian = input(false, ...(ngDevMode ? [{ debugName: "meridian" }] : []));
         this.placement = input('bottom-left', ...(ngDevMode ? [{ debugName: "placement" }] : []));
+        this.date = viewChild.required(NgbInputDatepicker);
+        this.time = viewChild.required(NgbTimepicker);
     }
     setDate(dateStr) {
-        this.date.writeValue(dateStr);
+        this.date().writeValue(dateStr);
     }
     setTime(dateStr) {
-        this.time.writeValue(dateStr);
+        this.time().writeValue(dateStr);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExtensibleDateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: ExtensibleDateTimePickerComponent, isStandalone: true, selector: "abp-extensible-date-time-picker", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: false, transformFunction: null }, meridian: { classPropertyName: "meridian", publicName: "meridian", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "date", first: true, predicate: NgbInputDatepicker, descendants: true }, { propertyName: "time", first: true, predicate: NgbTimepicker, descendants: true }], exportAs: ["abpExtensibleDateTimePicker"], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.9", type: ExtensibleDateTimePickerComponent, isStandalone: true, selector: "abp-extensible-date-time-picker", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: false, transformFunction: null }, meridian: { classPropertyName: "meridian", publicName: "meridian", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "date", first: true, predicate: NgbInputDatepicker, descendants: true, isSignal: true }, { propertyName: "time", first: true, predicate: NgbTimepicker, descendants: true, isSignal: true }], exportAs: ["abpExtensibleDateTimePicker"], ngImport: i0, template: `
     <input
       [id]="prop().id"
       [formControlName]="prop().name"
@@ -116,13 +118,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         },
                     ],
                 }]
-        }], propDecorators: { prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: false }] }], meridian: [{ type: i0.Input, args: [{ isSignal: true, alias: "meridian", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], date: [{
-                type: ViewChild,
-                args: [NgbInputDatepicker]
-            }], time: [{
-                type: ViewChild,
-                args: [NgbTimepicker]
-            }] } });
+        }], propDecorators: { prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: false }] }], meridian: [{ type: i0.Input, args: [{ isSignal: true, alias: "meridian", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], date: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgbInputDatepicker), { isSignal: true }] }], time: [{ type: i0.ViewChild, args: [i0.forwardRef(() => NgbTimepicker), { isSignal: true }] }] } });
 
 const EXTENSIONS_IDENTIFIER = new InjectionToken('EXTENSIONS_IDENTIFIER');
 const EXTENSIONS_ACTION_TYPE = new InjectionToken('EXTENSIONS_ACTION_TYPE');
@@ -138,137 +134,6 @@ const EXTENSIONS_FORM_PROP_DATA = new InjectionToken('EXTENSIONS_FORM_PROP_DATA'
 
 const EXTRA_PROPERTIES_KEY = 'extraProperties';
 
-class PropList extends LinkedList {
-}
-class PropData {
-    get data() {
-        return {
-            getInjected: this.getInjected,
-            index: this.index,
-            record: this.record,
-        };
-    }
-}
-class Prop {
-    constructor(type, name, displayName, permission, visible = _ => true, isExtra = false, template, className, formText, tooltip, displayTextResolver) {
-        this.type = type;
-        this.name = name;
-        this.displayName = displayName;
-        this.permission = permission;
-        this.visible = visible;
-        this.isExtra = isExtra;
-        this.template = template;
-        this.className = className;
-        this.formText = formText;
-        this.tooltip = tooltip;
-        this.displayTextResolver = displayTextResolver;
-        this.displayName = this.displayName || this.name;
-    }
-}
-class PropsFactory {
-    constructor() {
-        this.contributorCallbacks = {};
-    }
-    get(name) {
-        this.contributorCallbacks[name] = this.contributorCallbacks[name] || [];
-        return new this._ctor(this.contributorCallbacks[name]);
-    }
-}
-class Props {
-    get props() {
-        const propList = new this._ctor();
-        this.callbackList.forEach(callback => callback(propList));
-        return propList;
-    }
-    constructor(callbackList) {
-        this.callbackList = callbackList;
-    }
-    addContributor(contributeCallback) {
-        this.callbackList.push(contributeCallback);
-    }
-    clearContributors() {
-        while (this.callbackList.length)
-            this.callbackList.pop();
-    }
-}
-
-class FormPropList extends PropList {
-}
-class FormProps extends Props {
-    constructor() {
-        super(...arguments);
-        this._ctor = FormPropList;
-    }
-}
-class GroupedFormPropList {
-    constructor() {
-        this.items = [];
-        this.count = 1;
-    }
-    addItem(item) {
-        const groupName = item.group?.name;
-        let group = this.items.find(i => i.group?.name === groupName);
-        if (group) {
-            group.formPropList.addTail(item);
-        }
-        else {
-            group = {
-                formPropList: new FormPropList(),
-                group: item.group || { name: `default${this.count++}`, className: item.group?.className },
-            };
-            group.formPropList.addHead(item);
-            this.items.push(group);
-        }
-    }
-}
-class CreateFormPropsFactory extends PropsFactory {
-    constructor() {
-        super(...arguments);
-        this._ctor = FormProps;
-    }
-}
-class EditFormPropsFactory extends PropsFactory {
-    constructor() {
-        super(...arguments);
-        this._ctor = FormProps;
-    }
-}
-class FormProp extends Prop {
-    constructor(options) {
-        super(options.type, options.name, options.displayName || '', options.permission || '', options.visible, options.isExtra, options.template, options.className, options.formText, options.tooltip);
-        this.group = options.group;
-        this.className = options.className;
-        this.formText = options.formText;
-        this.tooltip = options.tooltip;
-        this.asyncValidators = options.asyncValidators || (_ => []);
-        this.validators = options.validators || (_ => []);
-        this.disabled = options.disabled || (_ => false);
-        this.readonly = options.readonly || (_ => false);
-        this.autocomplete = options.autocomplete || 'off';
-        this.options = options.options;
-        this.id = options.id || options.name;
-        const defaultValue = options.defaultValue;
-        this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || '';
-        this.displayTextResolver = options.displayTextResolver;
-    }
-    static create(options) {
-        return new FormProp(options);
-    }
-    static createMany(arrayOfOptions) {
-        return arrayOfOptions.map(FormProp.create);
-    }
-}
-class FormPropData extends PropData {
-    constructor(injector, record) {
-        super();
-        this.record = record;
-        this.getInjected = injector.get.bind(injector);
-    }
-}
-function isFalsyValue(defaultValue) {
-    return [0, '', false].indexOf(defaultValue) > -1;
-}
-
 const TYPEAHEAD_TEXT_SUFFIX = '_Text';
 const TYPEAHEAD_TEXT_SUFFIX_REGEX = /_Text$/;
 function createTypeaheadOptions(lookup) {
@@ -486,6 +351,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
         }], propDecorators: { prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: true }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: true }] }] } });
 
 class ExtensibleFormPropComponent {
+    #groupDirective;
+    get disabled() {
+        const data = this.data();
+        if (!data)
+            return false;
+        return this.disabledFn(data);
+    }
     constructor() {
         this.service = inject(ExtensibleFormPropService);
         this.cdRef = inject(ChangeDetectorRef);
@@ -493,6 +365,11 @@ class ExtensibleFormPropComponent {
         this.#groupDirective = inject(FormGroupDirective);
         this.injector = inject(Injector);
         this.form = this.#groupDirective.form;
+        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
+        this.prop = input.required(...(ngDevMode ? [{ debugName: "prop" }] : []));
+        this.first = input(undefined, ...(ngDevMode ? [{ debugName: "first" }] : []));
+        this.isFirstGroup = input(undefined, ...(ngDevMode ? [{ debugName: "isFirstGroup" }] : []));
+        this.fieldRef = viewChild.required('field');
         this.asterisk = '';
         this.containerClassName = 'mb-2';
         this.showPassword = false;
@@ -501,14 +378,52 @@ class ExtensibleFormPropComponent {
         this.passwordKey = "ThemeShared.Extensions.PasswordComponent" /* eExtensibleComponents.PasswordComponent */;
         this.disabledFn = (data) => false;
         this.search = (text$) => text$
-            ? text$.pipe(debounceTime(300), distinctUntilChanged(), switchMap(text => this.prop?.options?.(this.data, text) || of([])))
+            ? text$.pipe(debounceTime(300), distinctUntilChanged(), switchMap(text => this.prop()?.options?.(this.data(), text) || of([])))
             : of([]);
         this.typeaheadFormatter = (option) => option.key;
         this.meridian$ = this.service.meridian$;
-    }
-    #groupDirective;
-    get disabled() {
-        return this.disabledFn(this.data);
+        // Watch prop changes and update state
+        effect(() => {
+            const currentProp = this.prop();
+            const data = this.data();
+            if (!currentProp || !data)
+                return;
+            const { options, readonly, disabled, validators, className, template } = currentProp;
+            if (template) {
+                this.injectorForCustomComponent = Injector.create({
+                    providers: [
+                        {
+                            provide: EXTENSIONS_FORM_PROP,
+                            useValue: currentProp,
+                        },
+                        {
+                            provide: EXTENSIONS_FORM_PROP_DATA,
+                            useValue: data?.record,
+                        },
+                        { provide: ControlContainer, useExisting: FormGroupDirective },
+                    ],
+                    parent: this.injector,
+                });
+            }
+            if (options)
+                this.options$ = options(data);
+            if (readonly)
+                this.readonly = readonly(data);
+            if (disabled) {
+                this.disabledFn = disabled;
+            }
+            if (validators) {
+                this.validators = validators(data);
+                this.setAsterisk();
+            }
+            if (className !== undefined) {
+                this.containerClassName = className;
+            }
+            const [keyControl, valueControl] = this.getTypeaheadControls();
+            if (keyControl && valueControl)
+                this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
+            this.cdRef.markForCheck();
+        });
     }
     setTypeaheadValue(selectedOption) {
         this.typeaheadModel = selectedOption || { key: null, value: null };
@@ -520,11 +435,11 @@ class ExtensibleFormPropComponent {
         valueControl?.setValue(value);
     }
     get isInvalid() {
-        const control = this.form.get(this.prop.name);
+        const control = this.form.get(this.prop().name);
         return control?.touched && control.invalid;
     }
     getTypeaheadControls() {
-        const { name } = this.prop;
+        const { name } = this.prop();
         const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`;
         const keyControl = this.form.get(addTypeaheadTextSuffix(extraPropName)) ||
             this.form.get(addTypeaheadTextSuffix(name));
@@ -535,9 +450,9 @@ class ExtensibleFormPropComponent {
         this.asterisk = this.service.calcAsterisks(this.validators);
     }
     ngAfterViewInit() {
-        if (this.isFirstGroup && this.first && this.fieldRef) {
+        if (this.isFirstGroup() && this.first() && this.fieldRef()) {
             requestAnimationFrame(() => {
-                this.fieldRef.nativeElement.focus();
+                this.fieldRef().nativeElement.focus();
             });
         }
     }
@@ -547,45 +462,8 @@ class ExtensibleFormPropComponent {
     getType(prop) {
         return this.service.getType(prop);
     }
-    ngOnChanges({ prop, data }) {
-        const currentProp = prop?.currentValue;
-        const { options, readonly, disabled, validators, className, template } = currentProp || {};
-        if (template) {
-            this.injectorForCustomComponent = Injector.create({
-                providers: [
-                    {
-                        provide: EXTENSIONS_FORM_PROP,
-                        useValue: currentProp,
-                    },
-                    {
-                        provide: EXTENSIONS_FORM_PROP_DATA,
-                        useValue: data?.currentValue?.record,
-                    },
-                    { provide: ControlContainer, useExisting: FormGroupDirective },
-                ],
-                parent: this.injector,
-            });
-        }
-        if (options)
-            this.options$ = options(this.data);
-        if (readonly)
-            this.readonly = readonly(this.data);
-        if (disabled) {
-            this.disabledFn = disabled;
-        }
-        if (validators) {
-            this.validators = validators(this.data);
-            this.setAsterisk();
-        }
-        if (className !== undefined) {
-            this.containerClassName = className;
-        }
-        const [keyControl, valueControl] = this.getTypeaheadControls();
-        if (keyControl && valueControl)
-            this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
-    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExtensibleFormPropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ExtensibleFormPropComponent, isStandalone: true, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first", isFirstGroup: "isFirstGroup" }, providers: [ExtensibleFormPropService], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop)) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\" />\r\n    }\r\n  }\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-2\">\r\n    @switch (getComponent(prop)) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [autocomplete]=\"prop.autocomplete\"\r\n          [type]=\"getType(prop)\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n      }\r\n      @case ('checkbox') {\r\n        <div class=\"form-check\" validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpDisabled]=\"disabled\"\r\n            type=\"checkbox\"\r\n            class=\"form-check-input\"\r\n          />\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"label\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <select\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          class=\"form-select form-control\"\r\n        >\r\n          @for (option of options$ | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop.isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop\"\r\n          [options]=\"options$ | async\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [autocomplete]=\"prop.autocomplete\"\r\n            [abpDisabled]=\"disabled\"\r\n            [ngbTypeahead]=\"search\"\r\n            [editable]=\"false\"\r\n            [inputFormatter]=\"typeaheadFormatter\"\r\n            [resultFormatter]=\"typeaheadFormatter\"\r\n            [ngModelOptions]=\"{ standalone: true }\"\r\n            [(ngModel)]=\"typeaheadModel\"\r\n            (selectItem)=\"setTypeaheadValue($event.item)\"\r\n            (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n            [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n            class=\"form-control\"\r\n          />\r\n          <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n        </div>\r\n      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          (click)=\"datepicker.open()\"\r\n          (keyup.space)=\"datepicker.open()\"\r\n          ngbDatepicker\r\n          #datepicker=\"ngbDatepicker\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop.name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpShowPassword]=\"showPassword\"\r\n          />\r\n          <button class=\"btn btn-secondary\" type=\"button\" (click)=\"showPassword = !showPassword\">\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [ngClass]=\"{\r\n                'fa-eye-slash': !showPassword,\r\n                'fa-eye': showPassword,\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop.formText) {\r\n      <small class=\"text-muted d-block\">{{ prop.formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop.displayTextResolver) {\r\n        {{ prop.displayTextResolver(data) | abpLocalization }}\r\n      } @else {\r\n        @if (prop.isExtra) {\r\n          {{ '::' + prop.displayName | abpLocalization }}\r\n        } @else {\r\n          {{ prop.displayName | abpLocalization }}\r\n        }\r\n      }\r\n      {{ asterisk }}\r\n      @if (prop.tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n          [placement]=\"prop.tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: ExtensibleDateTimePickerComponent, selector: "abp-extensible-date-time-picker", inputs: ["prop", "meridian", "placement"], exportAs: ["abpExtensibleDateTimePicker"] }, { kind: "component", type: ExtensibleFormMultiselectComponent, selector: "abp-extensible-form-multi-select", inputs: ["prop", "options"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: NgbTimepickerModule }, { kind: "component", type: i1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: ShowPasswordDirective, selector: "[abpShowPassword]", inputs: ["abpShowPassword"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ExtensibleFormPropComponent, isStandalone: true, selector: "abp-extensible-form-prop", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: true, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, isFirstGroup: { classPropertyName: "isFirstGroup", publicName: "isFirstGroup", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ExtensibleFormPropService], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *abpPermission=\"prop().permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop())) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop().template; injector: injectorForCustomComponent\" />\r\n    }\r\n  }\r\n\r\n  <div [class]=\"containerClassName\" class=\"mb-2\">\r\n    @switch (getComponent(prop())) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          #field\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          [autocomplete]=\"prop().autocomplete\"\r\n          [type]=\"getType(prop())\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop().name\" type=\"hidden\" />\r\n      }\r\n      @case ('checkbox') {\r\n        <div class=\"form-check\" validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop().id\"\r\n            [formControlName]=\"prop().name\"\r\n            [abpDisabled]=\"disabled\"\r\n            type=\"checkbox\"\r\n            class=\"form-check-input\"\r\n          />\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"label\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <select\r\n          #field\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled\"\r\n          class=\"form-select form-control\"\r\n        >\r\n          @for (option of options$ | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop().isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop()\"\r\n          [options]=\"options$ | async\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop().id\"\r\n            [autocomplete]=\"prop().autocomplete\"\r\n            [abpDisabled]=\"disabled\"\r\n            [ngbTypeahead]=\"search\"\r\n            [editable]=\"false\"\r\n            [inputFormatter]=\"typeaheadFormatter\"\r\n            [resultFormatter]=\"typeaheadFormatter\"\r\n            [ngModelOptions]=\"{ standalone: true }\"\r\n            [(ngModel)]=\"typeaheadModel\"\r\n            (selectItem)=\"setTypeaheadValue($event.item)\"\r\n            (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n            [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n            class=\"form-control\"\r\n          />\r\n          <input [formControlName]=\"prop().name\" type=\"hidden\" />\r\n        </div>\r\n      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          (click)=\"datepicker.open()\"\r\n          (keyup.space)=\"datepicker.open()\"\r\n          ngbDatepicker\r\n          #datepicker=\"ngbDatepicker\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop().name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop()\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop().id\"\r\n            [formControlName]=\"prop().name\"\r\n            [abpShowPassword]=\"showPassword\"\r\n          />\r\n          <button class=\"btn btn-secondary\" type=\"button\" (click)=\"showPassword = !showPassword\">\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [class]=\"{\r\n                'fa-eye-slash': !showPassword,\r\n                'fa-eye': showPassword,\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop().formText) {\r\n      <small class=\"text-muted d-block\">{{ prop().formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop().id\" [class]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop().displayTextResolver) {\r\n        {{ prop().displayTextResolver(data()) | abpLocalization }}\r\n      } @else {\r\n        @if (prop().isExtra) {\r\n          {{ '::' + prop().displayName | abpLocalization }}\r\n        } @else {\r\n          {{ prop().displayName | abpLocalization }}\r\n        }\r\n      }\r\n      {{ asterisk }}\r\n      @if (prop().tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop().tooltip.text | abpLocalization\"\r\n          [placement]=\"prop().tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: ExtensibleDateTimePickerComponent, selector: "abp-extensible-date-time-picker", inputs: ["prop", "meridian", "placement"], exportAs: ["abpExtensibleDateTimePicker"] }, { kind: "component", type: ExtensibleFormMultiselectComponent, selector: "abp-extensible-form-multi-select", inputs: ["prop", "options"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: NgbTimepickerModule }, { kind: "component", type: i1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: ShowPasswordDirective, selector: "[abpShowPassword]", inputs: ["abpShowPassword"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [
             {
                 provide: ControlContainer,
                 useFactory: selfFactory,
@@ -611,7 +489,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         PermissionDirective,
                         LocalizationPipe,
                         AsyncPipe,
-                        NgClass,
                         NgComponentOutlet,
                         NgTemplateOutlet,
                         FormsModule,
@@ -623,19 +500,140 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         },
                         { provide: NgbDateAdapter, useClass: DateAdapter },
                         { provide: NgbTimeAdapter, useClass: TimeAdapter },
-                    ], template: "<ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop)) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\" />\r\n    }\r\n  }\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-2\">\r\n    @switch (getComponent(prop)) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [autocomplete]=\"prop.autocomplete\"\r\n          [type]=\"getType(prop)\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n      }\r\n      @case ('checkbox') {\r\n        <div class=\"form-check\" validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpDisabled]=\"disabled\"\r\n            type=\"checkbox\"\r\n            class=\"form-check-input\"\r\n          />\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"label\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <select\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          class=\"form-select form-control\"\r\n        >\r\n          @for (option of options$ | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop.isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop\"\r\n          [options]=\"options$ | async\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [autocomplete]=\"prop.autocomplete\"\r\n            [abpDisabled]=\"disabled\"\r\n            [ngbTypeahead]=\"search\"\r\n            [editable]=\"false\"\r\n            [inputFormatter]=\"typeaheadFormatter\"\r\n            [resultFormatter]=\"typeaheadFormatter\"\r\n            [ngModelOptions]=\"{ standalone: true }\"\r\n            [(ngModel)]=\"typeaheadModel\"\r\n            (selectItem)=\"setTypeaheadValue($event.item)\"\r\n            (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n            [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n            class=\"form-control\"\r\n          />\r\n          <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n        </div>\r\n      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          (click)=\"datepicker.open()\"\r\n          (keyup.space)=\"datepicker.open()\"\r\n          ngbDatepicker\r\n          #datepicker=\"ngbDatepicker\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop.name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpShowPassword]=\"showPassword\"\r\n          />\r\n          <button class=\"btn btn-secondary\" type=\"button\" (click)=\"showPassword = !showPassword\">\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [ngClass]=\"{\r\n                'fa-eye-slash': !showPassword,\r\n                'fa-eye': showPassword,\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop.formText) {\r\n      <small class=\"text-muted d-block\">{{ prop.formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop.displayTextResolver) {\r\n        {{ prop.displayTextResolver(data) | abpLocalization }}\r\n      } @else {\r\n        @if (prop.isExtra) {\r\n          {{ '::' + prop.displayName | abpLocalization }}\r\n        } @else {\r\n          {{ prop.displayName | abpLocalization }}\r\n        }\r\n      }\r\n      {{ asterisk }}\r\n      @if (prop.tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n          [placement]=\"prop.tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n" }]
-        }], propDecorators: { data: [{
-                type: Input
-            }], prop: [{
-                type: Input
-            }], first: [{
-                type: Input
-            }], isFirstGroup: [{
-                type: Input
-            }], fieldRef: [{
-                type: ViewChild,
-                args: ['field']
-            }] } });
+                    ], template: "<ng-container *abpPermission=\"prop().permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop())) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop().template; injector: injectorForCustomComponent\" />\r\n    }\r\n  }\r\n\r\n  <div [class]=\"containerClassName\" class=\"mb-2\">\r\n    @switch (getComponent(prop())) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          #field\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          [autocomplete]=\"prop().autocomplete\"\r\n          [type]=\"getType(prop())\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop().name\" type=\"hidden\" />\r\n      }\r\n      @case ('checkbox') {\r\n        <div class=\"form-check\" validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop().id\"\r\n            [formControlName]=\"prop().name\"\r\n            [abpDisabled]=\"disabled\"\r\n            type=\"checkbox\"\r\n            class=\"form-check-input\"\r\n          />\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"label\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <select\r\n          #field\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled\"\r\n          class=\"form-select form-control\"\r\n        >\r\n          @for (option of options$ | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop().isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop()\"\r\n          [options]=\"options$ | async\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop().id\"\r\n            [autocomplete]=\"prop().autocomplete\"\r\n            [abpDisabled]=\"disabled\"\r\n            [ngbTypeahead]=\"search\"\r\n            [editable]=\"false\"\r\n            [inputFormatter]=\"typeaheadFormatter\"\r\n            [resultFormatter]=\"typeaheadFormatter\"\r\n            [ngModelOptions]=\"{ standalone: true }\"\r\n            [(ngModel)]=\"typeaheadModel\"\r\n            (selectItem)=\"setTypeaheadValue($event.item)\"\r\n            (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n            [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n            class=\"form-control\"\r\n          />\r\n          <input [formControlName]=\"prop().name\" type=\"hidden\" />\r\n        </div>\r\n      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          (click)=\"datepicker.open()\"\r\n          (keyup.space)=\"datepicker.open()\"\r\n          ngbDatepicker\r\n          #datepicker=\"ngbDatepicker\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop().name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop()\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop().id\"\r\n            [formControlName]=\"prop().name\"\r\n            [abpShowPassword]=\"showPassword\"\r\n          />\r\n          <button class=\"btn btn-secondary\" type=\"button\" (click)=\"showPassword = !showPassword\">\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [class]=\"{\r\n                'fa-eye-slash': !showPassword,\r\n                'fa-eye': showPassword,\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop().formText) {\r\n      <small class=\"text-muted d-block\">{{ prop().formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop().id\" [class]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop().displayTextResolver) {\r\n        {{ prop().displayTextResolver(data()) | abpLocalization }}\r\n      } @else {\r\n        @if (prop().isExtra) {\r\n          {{ '::' + prop().displayName | abpLocalization }}\r\n        } @else {\r\n          {{ prop().displayName | abpLocalization }}\r\n        }\r\n      }\r\n      {{ asterisk }}\r\n      @if (prop().tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop().tooltip.text | abpLocalization\"\r\n          [placement]=\"prop().tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: true }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }], isFirstGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFirstGroup", required: false }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
+
+class PropList extends LinkedList {
+}
+class PropData {
+    get data() {
+        return {
+            getInjected: this.getInjected,
+            // `record` / `index` may be signals; always use `data.record` / `data.index`.
+            index: isSignal(this.index) ? this.index() : this.index,
+            record: isSignal(this.record) ? this.record() : this.record,
+        };
+    }
+}
+class Prop {
+    constructor(type, name, displayName, permission, visible = _ => true, isExtra = false, template, className, formText, tooltip, displayTextResolver) {
+        this.type = type;
+        this.name = name;
+        this.displayName = displayName;
+        this.permission = permission;
+        this.visible = visible;
+        this.isExtra = isExtra;
+        this.template = template;
+        this.className = className;
+        this.formText = formText;
+        this.tooltip = tooltip;
+        this.displayTextResolver = displayTextResolver;
+        this.displayName = this.displayName || this.name;
+    }
+}
+class PropsFactory {
+    constructor() {
+        this.contributorCallbacks = {};
+    }
+    get(name) {
+        this.contributorCallbacks[name] = this.contributorCallbacks[name] || [];
+        return new this._ctor(this.contributorCallbacks[name]);
+    }
+}
+class Props {
+    get props() {
+        const propList = new this._ctor();
+        this.callbackList.forEach(callback => callback(propList));
+        return propList;
+    }
+    constructor(callbackList) {
+        this.callbackList = callbackList;
+    }
+    addContributor(contributeCallback) {
+        this.callbackList.push(contributeCallback);
+    }
+    clearContributors() {
+        while (this.callbackList.length)
+            this.callbackList.pop();
+    }
+}
+
+class FormPropList extends PropList {
+}
+class FormProps extends Props {
+    constructor() {
+        super(...arguments);
+        this._ctor = FormPropList;
+    }
+}
+class GroupedFormPropList {
+    constructor() {
+        this.items = [];
+        this.count = 1;
+    }
+    addItem(item) {
+        const groupName = item.group?.name;
+        let group = this.items.find(i => i.group?.name === groupName);
+        if (group) {
+            group.formPropList.addTail(item);
+        }
+        else {
+            group = {
+                formPropList: new FormPropList(),
+                group: item.group || { name: `default${this.count++}`, className: item.group?.className },
+            };
+            group.formPropList.addHead(item);
+            this.items.push(group);
+        }
+    }
+}
+class CreateFormPropsFactory extends PropsFactory {
+    constructor() {
+        super(...arguments);
+        this._ctor = FormProps;
+    }
+}
+class EditFormPropsFactory extends PropsFactory {
+    constructor() {
+        super(...arguments);
+        this._ctor = FormProps;
+    }
+}
+class FormProp extends Prop {
+    constructor(options) {
+        super(options.type, options.name, options.displayName || '', options.permission || '', options.visible, options.isExtra, options.template, options.className, options.formText, options.tooltip);
+        this.group = options.group;
+        this.className = options.className;
+        this.formText = options.formText;
+        this.tooltip = options.tooltip;
+        this.asyncValidators = options.asyncValidators || (_ => []);
+        this.validators = options.validators || (_ => []);
+        this.disabled = options.disabled || (_ => false);
+        this.readonly = options.readonly || (_ => false);
+        this.autocomplete = options.autocomplete || 'off';
+        this.options = options.options;
+        this.id = options.id || options.name;
+        const defaultValue = options.defaultValue;
+        this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || '';
+        this.displayTextResolver = options.displayTextResolver;
+    }
+    static create(options) {
+        return new FormProp(options);
+    }
+    static createMany(arrayOfOptions) {
+        return arrayOfOptions.map(FormProp.create);
+    }
+}
+class FormPropData extends PropData {
+    constructor(injector, record) {
+        super();
+        this.record = record;
+        this.getInjected = injector.get.bind(injector);
+    }
+}
+function isFalsyValue(defaultValue) {
+    return [0, '', false].indexOf(defaultValue) > -1;
+}
 
 class ActionList extends LinkedList {
 }
@@ -643,8 +641,9 @@ class ActionData {
     get data() {
         return {
             getInjected: this.getInjected,
-            index: this.index,
-            record: this.record,
+            // `record` / `index` may be signals; always use `data.record` / `data.index`.
+            index: isSignal(this.index) ? this.index() : this.index,
+            record: isSignal(this.record) ? this.record() : this.record,
         };
     }
 }
@@ -826,20 +825,28 @@ class PropDataDirective extends PropData {
         super();
         this.tempRef = inject(TemplateRef);
         this.vcRef = inject(ViewContainerRef);
+        this.propList = input(undefined, { ...(ngDevMode ? { debugName: "propList" } : {}), alias: 'abpPropDataFromList' });
+        this.record = input.required({ ...(ngDevMode ? { debugName: "record" } : {}), alias: 'abpPropDataWithRecord' });
+        this.index = input(undefined, { ...(ngDevMode ? { debugName: "index" } : {}), alias: 'abpPropDataAtIndex' });
         this.getInjected = injector.get.bind(injector);
-    }
-    ngOnChanges() {
-        this.vcRef.clear();
-        this.vcRef.createEmbeddedView(this.tempRef, {
-            $implicit: this.data,
-            index: 0,
+        // Watch for input changes and re-render
+        effect(() => {
+            // Read all inputs to track them
+            this.record();
+            this.index();
+            this.propList();
+            this.vcRef.clear();
+            this.vcRef.createEmbeddedView(this.tempRef, {
+                $implicit: this.data,
+                index: 0,
+            });
         });
     }
     ngOnDestroy() {
         this.vcRef.clear();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PropDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: PropDataDirective, isStandalone: true, selector: "[abpPropData]", inputs: { propList: ["abpPropDataFromList", "propList"], record: ["abpPropDataWithRecord", "record"], index: ["abpPropDataAtIndex", "index"] }, exportAs: ["abpPropData"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: PropDataDirective, isStandalone: true, selector: "[abpPropData]", inputs: { propList: { classPropertyName: "propList", publicName: "abpPropDataFromList", isSignal: true, isRequired: false, transformFunction: null }, record: { classPropertyName: "record", publicName: "abpPropDataWithRecord", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "abpPropDataAtIndex", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["abpPropData"], usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PropDataDirective, decorators: [{
             type: Directive,
@@ -847,16 +854,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     exportAs: 'abpPropData',
                     selector: '[abpPropData]',
                 }]
-        }], ctorParameters: () => [], propDecorators: { propList: [{
-                type: Input,
-                args: ['abpPropDataFromList']
-            }], record: [{
-                type: Input,
-                args: ['abpPropDataWithRecord']
-            }], index: [{
-                type: Input,
-                args: ['abpPropDataAtIndex']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { propList: [{ type: i0.Input, args: [{ isSignal: true, alias: "abpPropDataFromList", required: false }] }], record: [{ type: i0.Input, args: [{ isSignal: true, alias: "abpPropDataWithRecord", required: true }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "abpPropDataAtIndex", required: false }] }] } });
 
 class ExtensibleFormComponent {
     constructor() {
@@ -865,13 +863,18 @@ class ExtensibleFormComponent {
         this.container = inject(ControlContainer);
         this.extensions = inject(ExtensionsService);
         this.identifier = inject(EXTENSIONS_IDENTIFIER);
+        this.formProps = viewChildren(ExtensibleFormPropComponent, ...(ngDevMode ? [{ debugName: "formProps" }] : []));
+        this.selectedRecord = input(undefined, ...(ngDevMode ? [{ debugName: "selectedRecord" }] : []));
         this.extraPropertiesKey = EXTRA_PROPERTIES_KEY;
-    }
-    set selectedRecord(record) {
-        const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit';
-        const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
-        this.groupedPropList = this.createGroupedList(propList);
-        this.record = record;
+        this.groupedPropList = signal(undefined, ...(ngDevMode ? [{ debugName: "groupedPropList" }] : []));
+        this.record = signal(undefined, ...(ngDevMode ? [{ debugName: "record" }] : []));
+        effect(() => {
+            const recordValue = this.selectedRecord();
+            const type = !recordValue || JSON.stringify(recordValue) === '{}' ? 'create' : 'edit';
+            const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
+            this.groupedPropList.set(this.createGroupedList(propList));
+            this.record.set(recordValue);
+        });
     }
     get form() {
         return (this.container ? this.container.control : { controls: {} });
@@ -888,12 +891,15 @@ class ExtensibleFormComponent {
     }
     //TODO: Reactor this method
     isAnyGroupMemberVisible(index, data) {
-        const { items } = this.groupedPropList;
+        const groupedPropListValue = this.groupedPropList();
+        if (!groupedPropListValue)
+            return false;
+        const { items } = groupedPropListValue;
         const formPropList = items[index].formPropList.toArray();
         return formPropList.some(prop => prop.visible(data));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExtensibleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ExtensibleFormComponent, isStandalone: true, selector: "abp-extensible-form", inputs: { selectedRecord: "selectedRecord" }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "@if (form) {\r\n  @for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) {\r\n    <ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record\">\r\n      @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {\r\n        <div\r\n          [ngClass]=\"groupedProp.group?.className\"\r\n          [attr.data-name]=\"groupedProp.group?.name || groupedProp.group?.className\"\r\n        >\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"propListTemplate\"\r\n            [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first}\"\r\n          >\r\n          </ng-container>\r\n        </div>\r\n      } @else {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"propListTemplate\"\r\n          [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first }\"\r\n        >\r\n        </ng-container>\r\n      }\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" let-isFirstGroup=\"isFirstGroup\" #propListTemplate>\r\n  @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {\r\n    @if (prop.visible(data)) {\r\n      @if (extraProperties.controls[prop.name]) {\r\n        <ng-container [formGroupName]=\"extraPropertiesKey\">\r\n          <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\" [class]=\"prop.className\" />\r\n        </ng-container>\r\n      } @else {\r\n        @if (form.get(prop.name)) {\r\n          <abp-extensible-form-prop\r\n            [class]=\"prop.className\"\r\n            [prop]=\"prop\"\r\n            [data]=\"data\"\r\n            [first]=\"first\"\r\n            [isFirstGroup]=\"isFirstGroup\"\r\n          />\r\n        }\r\n      }\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first", "isFirstGroup"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ExtensibleFormComponent, isStandalone: true, selector: "abp-extensible-form", inputs: { selectedRecord: { classPropertyName: "selectedRecord", publicName: "selectedRecord", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true, isSignal: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "@if (form) {\r\n@for (groupedProp of groupedPropList()?.items; track i; let i = $index; let first = $first) {\r\n<ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record()\">\r\n  @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {\r\n  <div [class]=\"groupedProp.group?.className\"\r\n    [attr.data-name]=\"groupedProp.group?.name || groupedProp.group?.className\">\r\n    <ng-container [ngTemplateOutlet]=\"propListTemplate\"\r\n      [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first}\">\r\n    </ng-container>\r\n  </div>\r\n  } @else {\r\n  <ng-container [ngTemplateOutlet]=\"propListTemplate\"\r\n    [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first }\">\r\n  </ng-container>\r\n  }\r\n</ng-container>\r\n}\r\n}\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" let-isFirstGroup=\"isFirstGroup\" #propListTemplate>\r\n  @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {\r\n  @if (prop.visible(data)) {\r\n  @if (extraProperties.controls[prop.name]) {\r\n  <ng-container [formGroupName]=\"extraPropertiesKey\">\r\n    <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\" [class]=\"prop.className\" />\r\n  </ng-container>\r\n  } @else {\r\n  @if (form.get(prop.name)) {\r\n  <abp-extensible-form-prop [class]=\"prop.className\" [prop]=\"prop\" [data]=\"data\" [first]=\"first\"\r\n    [isFirstGroup]=\"isFirstGroup\" />\r\n  }\r\n  }\r\n  }\r\n  }\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first", "isFirstGroup"] }], viewProviders: [
             {
                 provide: ControlContainer,
                 useFactory: selfFactory,
@@ -903,19 +909,14 @@ class ExtensibleFormComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
             type: Component,
-            args: [{ exportAs: 'abpExtensibleForm', selector: 'abp-extensible-form', imports: [NgClass, NgTemplateOutlet, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
+            args: [{ exportAs: 'abpExtensibleForm', selector: 'abp-extensible-form', imports: [NgTemplateOutlet, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         {
                             provide: ControlContainer,
                             useFactory: selfFactory,
                             deps: [[new Optional(), new SkipSelf(), ControlContainer]],
                         },
-                    ], template: "@if (form) {\r\n  @for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) {\r\n    <ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record\">\r\n      @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {\r\n        <div\r\n          [ngClass]=\"groupedProp.group?.className\"\r\n          [attr.data-name]=\"groupedProp.group?.name || groupedProp.group?.className\"\r\n        >\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"propListTemplate\"\r\n            [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first}\"\r\n          >\r\n          </ng-container>\r\n        </div>\r\n      } @else {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"propListTemplate\"\r\n          [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first }\"\r\n        >\r\n        </ng-container>\r\n      }\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" let-isFirstGroup=\"isFirstGroup\" #propListTemplate>\r\n  @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {\r\n    @if (prop.visible(data)) {\r\n      @if (extraProperties.controls[prop.name]) {\r\n        <ng-container [formGroupName]=\"extraPropertiesKey\">\r\n          <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\" [class]=\"prop.className\" />\r\n        </ng-container>\r\n      } @else {\r\n        @if (form.get(prop.name)) {\r\n          <abp-extensible-form-prop\r\n            [class]=\"prop.className\"\r\n            [prop]=\"prop\"\r\n            [data]=\"data\"\r\n            [first]=\"first\"\r\n            [isFirstGroup]=\"isFirstGroup\"\r\n          />\r\n        }\r\n      }\r\n    }\r\n  }\r\n</ng-template>\r\n" }]
-        }], propDecorators: { formProps: [{
-                type: ViewChildren,
-                args: [ExtensibleFormPropComponent]
-            }], selectedRecord: [{
-                type: Input
-            }] } });
+                    ], template: "@if (form) {\r\n@for (groupedProp of groupedPropList()?.items; track i; let i = $index; let first = $first) {\r\n<ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record()\">\r\n  @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {\r\n  <div [class]=\"groupedProp.group?.className\"\r\n    [attr.data-name]=\"groupedProp.group?.name || groupedProp.group?.className\">\r\n    <ng-container [ngTemplateOutlet]=\"propListTemplate\"\r\n      [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first}\">\r\n    </ng-container>\r\n  </div>\r\n  } @else {\r\n  <ng-container [ngTemplateOutlet]=\"propListTemplate\"\r\n    [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first }\">\r\n  </ng-container>\r\n  }\r\n</ng-container>\r\n}\r\n}\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" let-isFirstGroup=\"isFirstGroup\" #propListTemplate>\r\n  @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {\r\n  @if (prop.visible(data)) {\r\n  @if (extraProperties.controls[prop.name]) {\r\n  <ng-container [formGroupName]=\"extraPropertiesKey\">\r\n    <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\" [class]=\"prop.className\" />\r\n  </ng-container>\r\n  } @else {\r\n  @if (form.get(prop.name)) {\r\n  <abp-extensible-form-prop [class]=\"prop.className\" [prop]=\"prop\" [data]=\"data\" [first]=\"first\"\r\n    [isFirstGroup]=\"isFirstGroup\" />\r\n  }\r\n  }\r\n  }\r\n  }\r\n</ng-template>" }]
+        }], ctorParameters: () => [], propDecorators: { formProps: [{ type: i0.ViewChildren, args: [i0.forwardRef(() => ExtensibleFormPropComponent), { isSignal: true }] }], selectedRecord: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedRecord", required: false }] }] } });
 
 // Fix for https://github.com/angular/angular/issues/23904
 // @dynamic
@@ -923,6 +924,7 @@ class AbstractActionsComponent extends ActionData {
     constructor() {
         const injector = inject(Injector);
         super();
+        this.record = input.required(...(ngDevMode ? [{ debugName: "record" }] : []));
         this.getInjected = injector.get.bind(injector);
         const extensions = injector.get(ExtensionsService);
         const name = injector.get(EXTENSIONS_IDENTIFIER);
@@ -930,28 +932,27 @@ class AbstractActionsComponent extends ActionData {
         this.actionList = extensions[type].get(name).actions;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AbstractActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: AbstractActionsComponent, isStandalone: true, inputs: { record: "record" }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: AbstractActionsComponent, isStandalone: true, inputs: { record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AbstractActionsComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [], propDecorators: { record: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { record: [{ type: i0.Input, args: [{ isSignal: true, alias: "record", required: true }] }] } });
 
 class GridActionsComponent extends AbstractActionsComponent {
     constructor() {
         super();
-        this.icon = 'fa fa-cog';
-        this.text = '';
+        this.icon = input('fa fa-cog', ...(ngDevMode ? [{ debugName: "icon" }] : []));
+        this.index = input(undefined, ...(ngDevMode ? [{ debugName: "index" }] : []));
+        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : []));
         this.trackByFn = (_, item) => item.text;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: GridActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: GridActionsComponent, isStandalone: true, selector: "abp-grid-actions", inputs: { icon: "icon", index: "index", text: "text" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: GridActionsComponent, isStandalone: true, selector: "abp-grid-actions", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: EXTENSIONS_ACTION_TYPE,
                 useValue: 'entityActions',
             },
-        ], exportAs: ["abpGridActions"], usesInheritance: true, ngImport: i0, template: "@if (actionList.length > 1) {\r\n  <div ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n    <button\r\n      class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n      data-toggle=\"dropdown\"\r\n      aria-haspopup=\"true\"\r\n      ngbDropdownToggle\r\n    >\r\n      <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n    </button>\r\n    <div ngbDropdownMenu>\r\n      @for (action of actionList; track action.text) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n        >\r\n        </ng-container>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (actionList.length === 1) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"btnTmp\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n  ></ng-container>\r\n}\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  @if (action.visible(data)) {\r\n    <button\r\n      ngbDropdownItem\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon && !action.showOnlyIcon\"></i>\r\n  @if (!action.showOnlyIcon) {\r\n    @if (action.icon) {\r\n      <span>{{ action.text | abpLocalization }}</span>\r\n    } @else {\r\n      <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  @if (action.visible(data)) {\r\n    @if (action.tooltip) {\r\n      <button\r\n        *abpPermission=\"action.permission; runChangeDetection: false\"\r\n        (click)=\"action.action(data)\"\r\n        type=\"button\"\r\n        [class]=\"action.btnClass\"\r\n        [style]=\"action.btnStyle\"\r\n        [ngbTooltip]=\"action.tooltip.text | abpLocalization\"\r\n        [placement]=\"action.tooltip.placement || 'auto'\"\r\n        triggers=\"hover\"\r\n        container=\"body\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n        ></ng-container>\r\n      </button>\r\n    } @else {\r\n      <button\r\n        *abpPermission=\"action.permission; runChangeDetection: false\"\r\n        (click)=\"action.action(data)\"\r\n        type=\"button\"\r\n        [class]=\"action.btnClass\"\r\n        [style]=\"action.btnStyle\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n        ></ng-container>\r\n      </button>\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["abpGridActions"], usesInheritance: true, ngImport: i0, template: "@if (actionList.length > 1) {\r\n<div ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n  <button class=\"btn btn-primary btn-sm dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" ngbDropdownToggle>\r\n    <i [class]=\"icon()\" [class.me-1]=\"icon()\"></i>{{ text() | abpLocalization }}\r\n  </button>\r\n  <div ngbDropdownMenu>\r\n    @for (action of actionList; track action.text) {\r\n    <ng-container [ngTemplateOutlet]=\"dropDownBtnItemTmp\" [ngTemplateOutletContext]=\"{ $implicit: action }\">\r\n    </ng-container>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n\r\n@if (actionList.length === 1) {\r\n<ng-container [ngTemplateOutlet]=\"btnTmp\"\r\n  [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"></ng-container>\r\n}\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  @if (action.visible(data)) {\r\n  <button ngbDropdownItem *abpPermission=\"action.permission; runChangeDetection: false\" (click)=\"action.action(data)\"\r\n    type=\"button\">\r\n    <ng-container *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"></ng-container>\r\n  </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [class]=\"action.icon\" [class.me-1]=\"action.icon && !action.showOnlyIcon\"></i>\r\n  @if (!action.showOnlyIcon) {\r\n  @if (action.icon) {\r\n  <span>{{ action.text | abpLocalization }}</span>\r\n  } @else {\r\n  <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n  }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  @if (action.visible(data)) {\r\n  @if (action.tooltip) {\r\n  <button *abpPermission=\"action.permission; runChangeDetection: false\" (click)=\"action.action(data)\" type=\"button\"\r\n    [class]=\"action.btnClass\" [style]=\"action.btnStyle\" [ngbTooltip]=\"action.tooltip.text | abpLocalization\"\r\n    [placement]=\"action.tooltip.placement || 'auto'\" triggers=\"hover\" container=\"body\">\r\n    <ng-container *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"></ng-container>\r\n  </button>\r\n  } @else {\r\n  <button *abpPermission=\"action.permission; runChangeDetection: false\" (click)=\"action.action(data)\" type=\"button\"\r\n    [class]=\"action.btnClass\" [style]=\"action.btnStyle\">\r\n    <ng-container *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"></ng-container>\r\n  </button>\r\n  }\r\n  }\r\n</ng-template>", dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: GridActionsComponent, decorators: [{
             type: Component,
@@ -959,7 +960,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         NgbDropdownModule,
                         EllipsisDirective,
                         PermissionDirective,
-                        NgClass,
                         LocalizationPipe,
                         NgTemplateOutlet,
                         NgbTooltipModule,
@@ -968,29 +968,39 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             provide: EXTENSIONS_ACTION_TYPE,
                             useValue: 'entityActions',
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (actionList.length > 1) {\r\n  <div ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n    <button\r\n      class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n      data-toggle=\"dropdown\"\r\n      aria-haspopup=\"true\"\r\n      ngbDropdownToggle\r\n    >\r\n      <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n    </button>\r\n    <div ngbDropdownMenu>\r\n      @for (action of actionList; track action.text) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n        >\r\n        </ng-container>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (actionList.length === 1) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"btnTmp\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n  ></ng-container>\r\n}\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  @if (action.visible(data)) {\r\n    <button\r\n      ngbDropdownItem\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon && !action.showOnlyIcon\"></i>\r\n  @if (!action.showOnlyIcon) {\r\n    @if (action.icon) {\r\n      <span>{{ action.text | abpLocalization }}</span>\r\n    } @else {\r\n      <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  @if (action.visible(data)) {\r\n    @if (action.tooltip) {\r\n      <button\r\n        *abpPermission=\"action.permission; runChangeDetection: false\"\r\n        (click)=\"action.action(data)\"\r\n        type=\"button\"\r\n        [class]=\"action.btnClass\"\r\n        [style]=\"action.btnStyle\"\r\n        [ngbTooltip]=\"action.tooltip.text | abpLocalization\"\r\n        [placement]=\"action.tooltip.placement || 'auto'\"\r\n        triggers=\"hover\"\r\n        container=\"body\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n        ></ng-container>\r\n      </button>\r\n    } @else {\r\n      <button\r\n        *abpPermission=\"action.permission; runChangeDetection: false\"\r\n        (click)=\"action.action(data)\"\r\n        type=\"button\"\r\n        [class]=\"action.btnClass\"\r\n        [style]=\"action.btnStyle\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n        ></ng-container>\r\n      </button>\r\n    }\r\n  }\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { icon: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], text: [{
-                type: Input
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (actionList.length > 1) {\r\n<div ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n  <button class=\"btn btn-primary btn-sm dropdown-toggle\" data-toggle=\"dropdown\" aria-haspopup=\"true\" ngbDropdownToggle>\r\n    <i [class]=\"icon()\" [class.me-1]=\"icon()\"></i>{{ text() | abpLocalization }}\r\n  </button>\r\n  <div ngbDropdownMenu>\r\n    @for (action of actionList; track action.text) {\r\n    <ng-container [ngTemplateOutlet]=\"dropDownBtnItemTmp\" [ngTemplateOutletContext]=\"{ $implicit: action }\">\r\n    </ng-container>\r\n    }\r\n  </div>\r\n</div>\r\n}\r\n\r\n@if (actionList.length === 1) {\r\n<ng-container [ngTemplateOutlet]=\"btnTmp\"\r\n  [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"></ng-container>\r\n}\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  @if (action.visible(data)) {\r\n  <button ngbDropdownItem *abpPermission=\"action.permission; runChangeDetection: false\" (click)=\"action.action(data)\"\r\n    type=\"button\">\r\n    <ng-container *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"></ng-container>\r\n  </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [class]=\"action.icon\" [class.me-1]=\"action.icon && !action.showOnlyIcon\"></i>\r\n  @if (!action.showOnlyIcon) {\r\n  @if (action.icon) {\r\n  <span>{{ action.text | abpLocalization }}</span>\r\n  } @else {\r\n  <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n  }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  @if (action.visible(data)) {\r\n  @if (action.tooltip) {\r\n  <button *abpPermission=\"action.permission; runChangeDetection: false\" (click)=\"action.action(data)\" type=\"button\"\r\n    [class]=\"action.btnClass\" [style]=\"action.btnStyle\" [ngbTooltip]=\"action.tooltip.text | abpLocalization\"\r\n    [placement]=\"action.tooltip.placement || 'auto'\" triggers=\"hover\" container=\"body\">\r\n    <ng-container *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"></ng-container>\r\n  </button>\r\n  } @else {\r\n  <button *abpPermission=\"action.permission; runChangeDetection: false\" (click)=\"action.action(data)\" type=\"button\"\r\n    [class]=\"action.btnClass\" [style]=\"action.btnStyle\">\r\n    <ng-container *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"></ng-container>\r\n  </button>\r\n  }\r\n  }\r\n</ng-template>" }]
+        }], ctorParameters: () => [], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], index: [{ type: i0.Input, args: [{ isSignal: true, alias: "index", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }] } });
+
+class ExtensibleTableRowDetailComponent {
+    constructor() {
+        this.rowHeight = input('100%', ...(ngDevMode ? [{ debugName: "rowHeight" }] : []));
+        this.template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExtensibleTableRowDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.9", type: ExtensibleTableRowDetailComponent, isStandalone: true, selector: "abp-extensible-table-row-detail", inputs: { rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExtensibleTableRowDetailComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-extensible-table-row-detail',
+                    template: '',
+                }]
+        }], propDecorators: { rowHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowHeight", required: false }] }], template: [{ type: i0.ContentChild, args: [i0.forwardRef(() => TemplateRef), { isSignal: true }] }] } });
 
 const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
 class ExtensibleTableComponent {
     #injector;
-    set actionsText(value) {
-        this._actionsText = value;
+    get data() {
+        return this._data();
     }
-    get actionsText() {
-        return this._actionsText ?? (this.actionList.length >= 1 ? 'AbpUi::Actions' : '');
+    set data(value) {
+        this._data.set(value);
     }
-    set actionsColumnWidth(width) {
-        this._actionsColumnWidth.set(width ? Number(width) : undefined);
+    get effectiveRowDetailTemplate() {
+        return this.rowDetailComponent()?.template() ?? this.rowDetailTemplate();
     }
-    set selectionType(value) {
-        this._selectionType = typeof value === 'string' ? SelectionType[value] : value;
+    get effectiveRowDetailHeight() {
+        return this.rowDetailComponent()?.rowHeight() ?? this.rowDetailHeight();
     }
     constructor() {
         this.#injector = inject(Injector);
@@ -1003,19 +1013,41 @@ class ExtensibleTableComponent {
         this.permissionService = inject(PermissionService);
         this.platformId = inject(PLATFORM_ID);
         this.isBrowser = isPlatformBrowser(this.platformId);
-        this.tableActivate = new EventEmitter();
-        this.selectable = false;
-        this._selectionType = SelectionType.multiClick;
-        this.selected = [];
-        this.selectionChange = new EventEmitter();
-        // Infinite scroll configuration
-        this.infiniteScroll = false;
-        this.isLoading = false;
-        this.scrollThreshold = 10;
-        this.loadMore = new EventEmitter();
-        this.trackByFn = (_, item) => item.name;
-        // Signal for actions column width
+        // Input signals
+        this.actionsTextInput = input(undefined, { ...(ngDevMode ? { debugName: "actionsTextInput" } : {}), alias: 'actionsText' });
+        this.dataInput = input([], { ...(ngDevMode ? { debugName: "dataInput" } : {}), alias: 'data' });
+        this.list = input.required(...(ngDevMode ? [{ debugName: "list" }] : []));
+        this.recordsTotal = input.required(...(ngDevMode ? [{ debugName: "recordsTotal" }] : []));
+        this.actionsColumnWidthInput = input(undefined, { ...(ngDevMode ? { debugName: "actionsColumnWidthInput" } : {}), alias: 'actionsColumnWidth' });
+        this.actionsTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "actionsTemplate" }] : []));
+        this.selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : []));
+        this.selectionTypeInput = input(SelectionType.multiClick, { ...(ngDevMode ? { debugName: "selectionTypeInput" } : {}), alias: 'selectionType' });
+        this.selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : []));
+        this.infiniteScroll = input(false, ...(ngDevMode ? [{ debugName: "infiniteScroll" }] : []));
+        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.scrollThreshold = input(10, ...(ngDevMode ? [{ debugName: "scrollThreshold" }] : []));
+        this.tableHeight = input(undefined, ...(ngDevMode ? [{ debugName: "tableHeight" }] : []));
+        this.rowDetailTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "rowDetailTemplate" }] : []));
+        this.rowDetailHeight = input('100%', ...(ngDevMode ? [{ debugName: "rowDetailHeight" }] : []));
+        // Output signals
+        this.tableActivate = output();
+        this.selectionChange = output();
+        this.loadMore = output();
+        this.rowDetailToggle = output();
+        // Internal signals
+        this._data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : []));
         this._actionsColumnWidth = signal(DEFAULT_ACTIONS_COLUMN_WIDTH, ...(ngDevMode ? [{ debugName: "_actionsColumnWidth" }] : []));
+        this.rowDetailComponent = contentChild(ExtensibleTableRowDetailComponent, ...(ngDevMode ? [{ debugName: "rowDetailComponent" }] : []));
+        this.table = viewChild.required('table');
+        // Computed values
+        this.actionsText = computed(() => {
+            return this.actionsTextInput() ?? (this.actionList.length >= 1 ? 'AbpUi::Actions' : '');
+        }, ...(ngDevMode ? [{ debugName: "actionsText" }] : []));
+        this.selectionType = computed(() => {
+            const value = this.selectionTypeInput();
+            return typeof value === 'string' ? SelectionType[value] : value;
+        }, ...(ngDevMode ? [{ debugName: "selectionType" }] : []));
+        this.trackByFn = (_, item) => item.name;
         // Infinite scroll: debounced load more subject
         this.loadMoreSubject = new Subject();
         this.loadMoreSubscription = this.loadMoreSubject
@@ -1031,6 +1063,49 @@ class ExtensibleTableComponent {
             .actions;
         this.hasAtLeastOnePermittedAction =
             this.permissionService.filterItemsByPolicy(this.actionList.toArray().map(action => ({ requiredPolicy: action.permission }))).length > 0;
+        // Watch actionsColumnWidth input
+        effect(() => {
+            const width = this.actionsColumnWidthInput();
+            this._actionsColumnWidth.set(width ? Number(width) : undefined);
+        });
+        // Watch data input changes
+        effect(() => {
+            const dataValue = this.dataInput();
+            if (!dataValue)
+                return;
+            if (dataValue.length < 1) {
+                this.list().totalCount = this.recordsTotal();
+            }
+            this._data.set(dataValue.map((record, index) => this.prepareRecord(record, index)));
+        });
+    }
+    prepareRecord(record, index) {
+        this.propList.forEach(prop => {
+            const propData = { getInjected: this.getInjected, record, index };
+            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;
     }
     getIcon(value) {
         return value
@@ -1056,41 +1131,6 @@ class ExtensibleTableComponent {
             }
         }));
     }
-    ngOnChanges({ data }) {
-        if (!data?.currentValue)
-            return;
-        if (data.currentValue.length < 1) {
-            this.list.totalCount = this.recordsTotal;
-        }
-        this.data = data.currentValue.map((record, index) => {
-            this.propList.forEach(prop => {
-                const propData = { getInjected: this.getInjected, record, index };
-                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;
-        });
-    }
     isVisibleActions(rowData) {
         const actions = this.actionList.toArray();
         const visibleActions = actions.filter(action => {
@@ -1108,8 +1148,9 @@ class ExtensibleTableComponent {
         return visibleActions.length > 0;
     }
     onSelect({ selected }) {
-        this.selected.splice(0, this.selected.length);
-        this.selected.push(...selected);
+        const selectedValue = this.selected();
+        selectedValue.splice(0, selectedValue.length);
+        selectedValue.push(...selected);
         this.selectionChange.emit(selected);
     }
     onScroll(scrollEvent) {
@@ -1125,24 +1166,34 @@ class ExtensibleTableComponent {
         }
     }
     shouldHandleScroll() {
-        return this.infiniteScroll && !this.isLoading;
+        return this.infiniteScroll() && !this.isLoading();
     }
     isNearScrollBottom(element) {
         const { offsetHeight, scrollTop, scrollHeight } = element;
-        return offsetHeight + scrollTop >= scrollHeight - this.scrollThreshold;
+        return offsetHeight + scrollTop >= scrollHeight - this.scrollThreshold();
     }
     triggerLoadMore() {
         this.loadMore.emit();
     }
     getTableHeight() {
-        if (!this.infiniteScroll)
+        if (!this.infiniteScroll())
             return 'auto';
-        return this.tableHeight ? `${this.tableHeight}px` : 'auto';
+        const tableHeight = this.tableHeight();
+        return tableHeight ? `${tableHeight}px` : 'auto';
+    }
+    toggleExpandRow(row) {
+        const table = this.table();
+        if (table && table.rowDetail) {
+            table.rowDetail.toggleExpandRow(row);
+        }
+        this.rowDetailToggle.emit(row);
     }
     ngAfterViewInit() {
-        if (!this.infiniteScroll) {
-            this.list?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
-                this.data = [];
+        if (!this.infiniteScroll()) {
+            this.list()
+                ?.requestStatus$?.pipe(filter(status => status === 'loading'))
+                .subscribe(() => {
+                this._data.set([]);
                 this.cdr.markForCheck();
             });
         }
@@ -1151,7 +1202,7 @@ class ExtensibleTableComponent {
         this.loadMoreSubscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExtensibleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate", selectable: "selectable", selectionType: "selectionType", selected: "selected", infiniteScroll: "infiniteScroll", isLoading: "isLoading", scrollThreshold: "scrollThreshold", tableHeight: "tableHeight" }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange", loadMore: "loadMore" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "@if (isBrowser) {\r\n  <ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  [selectionType]=\"selectable ? _selectionType : undefined\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n  (select)=\"onSelect($event)\"\r\n  [selected]=\"selected\"\r\n  (scroll)=\"onScroll($event)\"\r\n  [scrollbarV]=\"infiniteScroll\"\r\n  [style.height]=\"getTableHeight()\"\r\n  [loadingIndicator]=\"infiniteScroll && isLoading\"\r\n  [footerHeight]=\"infiniteScroll ? false : 50\"\r\n>\r\n@if(selectable) {\r\n  <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n\r\n    <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n      let-selectFn=\"selectFn\">\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n          (change)=\"selectFn(!allRowsSelected)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n      let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n      @if(_selectionType === 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n  </ngx-datatable-column>\r\n  }\r\n  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n    <ngx-datatable-column\r\n      [name]=\"actionsText | abpLocalization\"\r\n      [maxWidth]=\"_actionsColumnWidth() ?? undefined\"\r\n      [width]=\"_actionsColumnWidth() ?? 200\"\r\n      [canAutoResize]=\"!_actionsColumnWidth()\"\r\n      [sortable]=\"false\"\r\n    >\r\n      <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n        ></ng-container>\r\n        <ng-template #gridActions>\r\n          @if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n  @for (prop of propList; track prop.name; let i = $index) {\r\n    <ngx-datatable-column\r\n      *abpVisible=\"prop.columnVisible(getInjected)\"\r\n      [width]=\"columnWidths[i] ?? 200\"\r\n      [canAutoResize]=\"!columnWidths[i]\"\r\n      [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\r\n      <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n        @if (prop.tooltip) {\r\n          <span\r\n            [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n            [placement]=\"prop.tooltip.placement || 'auto'\"\r\n            container=\"body\"\r\n            [class.pointer]=\"prop.sortable\"\r\n            (click)=\"prop.sortable && sortFn(column)\"\r\n          >\r\n            {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        } @else {\r\n          <span\r\n            [class.pointer]=\"prop.sortable\"\r\n            (click)=\"prop.sortable && sortFn(column)\"\r\n          >\r\n            {{ column.name }}\r\n          </span>\r\n        }\r\n      </ng-template>\r\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n        <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n          <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n            @if (!row['_' + prop.name].component) {\r\n              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              } @else {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async)\r\n                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              <ng-container\r\n                *ngComponentOutlet=\"\r\n                  row['_' + prop.name].component;\r\n                  injector: row['_' + prop.name].injector\r\n                \"\r\n              ></ng-container>\r\n            }\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n</ngx-datatable>\r\n}\r\n", dependencies: [{ kind: "directive", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: ["abpVisible"] }, { kind: "ngmodule", type: NgxDatatableModule }, { kind: "component", type: i1$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i1$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i1$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i1$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: UtcToLocalPipe, name: "abpUtcToLocal" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsTextInput: { classPropertyName: "actionsTextInput", publicName: "actionsText", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, recordsTotal: { classPropertyName: "recordsTotal", publicName: "recordsTotal", isSignal: true, isRequired: true, transformFunction: null }, actionsColumnWidthInput: { classPropertyName: "actionsColumnWidthInput", publicName: "actionsColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionTypeInput: { classPropertyName: "selectionTypeInput", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, rowDetailTemplate: { classPropertyName: "rowDetailTemplate", publicName: "rowDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowDetailHeight: { classPropertyName: "rowDetailHeight", publicName: "rowDetailHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange", loadMore: "loadMore", rowDetailToggle: "rowDetailToggle" }, queries: [{ propertyName: "rowDetailComponent", first: true, predicate: ExtensibleTableRowDetailComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, isSignal: true }], exportAs: ["abpExtensibleTable"], ngImport: i0, template: "@if (isBrowser) {\r\n  <ngx-datatable\r\n    #table\r\n    default\r\n    [rows]=\"data\"\r\n    [count]=\"recordsTotal()\"\r\n    [list]=\"list()\"\r\n    [selectionType]=\"selectable() ? selectionType() : undefined\"\r\n    (activate)=\"tableActivate.emit($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    [selected]=\"selected()\"\r\n    (scroll)=\"onScroll($event)\"\r\n    [scrollbarV]=\"infiniteScroll()\"\r\n    [style.height]=\"getTableHeight()\"\r\n    [loadingIndicator]=\"infiniteScroll() && isLoading()\"\r\n    [footerHeight]=\"infiniteScroll() ? false : 50\"\r\n  >\r\n    @if (effectiveRowDetailTemplate) {\r\n      <ngx-datatable-row-detail [rowHeight]=\"effectiveRowDetailHeight\">\r\n        <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n            [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n          ></ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-row-detail>\r\n\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [resizeable]=\"false\"\r\n        [sortable]=\"false\"\r\n        [draggable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-cell-template>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-link text-decoration-none text-muted p-0\"\r\n            [attr.aria-label]=\"expanded ? 'Collapse' : 'Expand'\"\r\n            (click)=\"toggleExpandRow(row)\"\r\n          >\r\n            <i class=\"fa\" [class.fa-chevron-down]=\"!expanded\" [class.fa-chevron-up]=\"expanded\"></i>\r\n          </button>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (selectable()) {\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [sortable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n        [draggable]=\"false\"\r\n        [resizeable]=\"false\"\r\n      >\r\n        <ng-template\r\n          ngx-datatable-header-template\r\n          let-value=\"value\"\r\n          let-allRowsSelected=\"allRowsSelected\"\r\n          let-selectFn=\"selectFn\"\r\n        >\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input table-check\"\r\n                type=\"checkbox\"\r\n                [checked]=\"allRowsSelected\"\r\n                (change)=\"selectFn(!allRowsSelected)\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          ngx-datatable-cell-template\r\n          let-value=\"value\"\r\n          let-row=\"row\"\r\n          let-isSelected=\"isSelected\"\r\n          let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n        >\r\n          @if (selectionType() === 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"radio\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n      <ngx-datatable-column\r\n        [name]=\"actionsText() | abpLocalization\"\r\n        [maxWidth]=\"_actionsColumnWidth() ?? undefined\"\r\n        [width]=\"_actionsColumnWidth() ?? 200\"\r\n        [canAutoResize]=\"!_actionsColumnWidth()\"\r\n        [sortable]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n          @if (actionsTemplate(); as template) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"template\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n            ></ng-container>\r\n          } @else if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @for (prop of propList; track prop.name; let i = $index) {\r\n      <ngx-datatable-column\r\n        *abpVisible=\"prop.columnVisible(getInjected)\"\r\n        [width]=\"columnWidths()[i] ?? 200\"\r\n        [canAutoResize]=\"!columnWidths()[i]\"\r\n        [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n        [prop]=\"prop.name\"\r\n        [sortable]=\"prop.sortable\"\r\n      >\r\n        <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n          @if (prop.tooltip) {\r\n            <span\r\n              [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n              [placement]=\"prop.tooltip.placement || 'auto'\"\r\n              container=\"body\"\r\n              [class.pointer]=\"prop.sortable\"\r\n              (click)=\"prop.sortable && sortFn(column)\"\r\n            >\r\n              {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n            </span>\r\n          } @else {\r\n            <span [class.pointer]=\"prop.sortable\" (click)=\"prop.sortable && sortFn(column)\">\r\n              {{ column.name }}\r\n            </span>\r\n          }\r\n        </ng-template>\r\n        <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n          <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n            <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n              @if (!row['_' + prop.name].component) {\r\n                @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                        : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                          | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                } @else {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async)\r\n                        : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                }\r\n              } @else {\r\n                <ng-container\r\n                  *ngComponentOutlet=\"\r\n                    row['_' + prop.name].component;\r\n                    injector: row['_' + prop.name].injector\r\n                  \"\r\n                ></ng-container>\r\n              }\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n  </ngx-datatable>\r\n}\r\n", styles: [":host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail{background:none;padding:0}\n"], dependencies: [{ kind: "directive", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: ["abpVisible"] }, { kind: "ngmodule", type: NgxDatatableModule }, { kind: "component", type: i1$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i1$1.DatatableRowDetailDirective, selector: "ngx-datatable-row-detail", inputs: ["rowHeight", "template"], outputs: ["toggle"] }, { kind: "directive", type: i1$1.DatatableRowDetailTemplateDirective, selector: "[ngx-datatable-row-detail-template]" }, { kind: "directive", type: i1$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i1$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i1$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: UtcToLocalPipe, name: "abpUtcToLocal" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
             type: Component,
@@ -1168,40 +1219,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         AsyncPipe,
                         NgTemplateOutlet,
                         NgComponentOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isBrowser) {\r\n  <ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  [selectionType]=\"selectable ? _selectionType : undefined\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n  (select)=\"onSelect($event)\"\r\n  [selected]=\"selected\"\r\n  (scroll)=\"onScroll($event)\"\r\n  [scrollbarV]=\"infiniteScroll\"\r\n  [style.height]=\"getTableHeight()\"\r\n  [loadingIndicator]=\"infiniteScroll && isLoading\"\r\n  [footerHeight]=\"infiniteScroll ? false : 50\"\r\n>\r\n@if(selectable) {\r\n  <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n\r\n    <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n      let-selectFn=\"selectFn\">\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n          (change)=\"selectFn(!allRowsSelected)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n      let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n      @if(_selectionType === 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n  </ngx-datatable-column>\r\n  }\r\n  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n    <ngx-datatable-column\r\n      [name]=\"actionsText | abpLocalization\"\r\n      [maxWidth]=\"_actionsColumnWidth() ?? undefined\"\r\n      [width]=\"_actionsColumnWidth() ?? 200\"\r\n      [canAutoResize]=\"!_actionsColumnWidth()\"\r\n      [sortable]=\"false\"\r\n    >\r\n      <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n        ></ng-container>\r\n        <ng-template #gridActions>\r\n          @if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n  @for (prop of propList; track prop.name; let i = $index) {\r\n    <ngx-datatable-column\r\n      *abpVisible=\"prop.columnVisible(getInjected)\"\r\n      [width]=\"columnWidths[i] ?? 200\"\r\n      [canAutoResize]=\"!columnWidths[i]\"\r\n      [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\r\n      <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n        @if (prop.tooltip) {\r\n          <span\r\n            [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n            [placement]=\"prop.tooltip.placement || 'auto'\"\r\n            container=\"body\"\r\n            [class.pointer]=\"prop.sortable\"\r\n            (click)=\"prop.sortable && sortFn(column)\"\r\n          >\r\n            {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        } @else {\r\n          <span\r\n            [class.pointer]=\"prop.sortable\"\r\n            (click)=\"prop.sortable && sortFn(column)\"\r\n          >\r\n            {{ column.name }}\r\n          </span>\r\n        }\r\n      </ng-template>\r\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n        <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n          <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n            @if (!row['_' + prop.name].component) {\r\n              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              } @else {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async)\r\n                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              <ng-container\r\n                *ngComponentOutlet=\"\r\n                  row['_' + prop.name].component;\r\n                  injector: row['_' + prop.name].injector\r\n                \"\r\n              ></ng-container>\r\n            }\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n</ngx-datatable>\r\n}\r\n" }]
-        }], ctorParameters: () => [], propDecorators: { actionsText: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], list: [{
-                type: Input
-            }], recordsTotal: [{
-                type: Input
-            }], actionsColumnWidth: [{
-                type: Input
-            }], actionsTemplate: [{
-                type: Input
-            }], tableActivate: [{
-                type: Output
-            }], selectable: [{
-                type: Input
-            }], selectionType: [{
-                type: Input
-            }], selected: [{
-                type: Input
-            }], selectionChange: [{
-                type: Output
-            }], infiniteScroll: [{
-                type: Input
-            }], isLoading: [{
-                type: Input
-            }], scrollThreshold: [{
-                type: Input
-            }], loadMore: [{
-                type: Output
-            }], tableHeight: [{
-                type: Input
-            }] } });
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isBrowser) {\r\n  <ngx-datatable\r\n    #table\r\n    default\r\n    [rows]=\"data\"\r\n    [count]=\"recordsTotal()\"\r\n    [list]=\"list()\"\r\n    [selectionType]=\"selectable() ? selectionType() : undefined\"\r\n    (activate)=\"tableActivate.emit($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    [selected]=\"selected()\"\r\n    (scroll)=\"onScroll($event)\"\r\n    [scrollbarV]=\"infiniteScroll()\"\r\n    [style.height]=\"getTableHeight()\"\r\n    [loadingIndicator]=\"infiniteScroll() && isLoading()\"\r\n    [footerHeight]=\"infiniteScroll() ? false : 50\"\r\n  >\r\n    @if (effectiveRowDetailTemplate) {\r\n      <ngx-datatable-row-detail [rowHeight]=\"effectiveRowDetailHeight\">\r\n        <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n            [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n          ></ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-row-detail>\r\n\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [resizeable]=\"false\"\r\n        [sortable]=\"false\"\r\n        [draggable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-cell-template>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-link text-decoration-none text-muted p-0\"\r\n            [attr.aria-label]=\"expanded ? 'Collapse' : 'Expand'\"\r\n            (click)=\"toggleExpandRow(row)\"\r\n          >\r\n            <i class=\"fa\" [class.fa-chevron-down]=\"!expanded\" [class.fa-chevron-up]=\"expanded\"></i>\r\n          </button>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (selectable()) {\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [sortable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n        [draggable]=\"false\"\r\n        [resizeable]=\"false\"\r\n      >\r\n        <ng-template\r\n          ngx-datatable-header-template\r\n          let-value=\"value\"\r\n          let-allRowsSelected=\"allRowsSelected\"\r\n          let-selectFn=\"selectFn\"\r\n        >\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input table-check\"\r\n                type=\"checkbox\"\r\n                [checked]=\"allRowsSelected\"\r\n                (change)=\"selectFn(!allRowsSelected)\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          ngx-datatable-cell-template\r\n          let-value=\"value\"\r\n          let-row=\"row\"\r\n          let-isSelected=\"isSelected\"\r\n          let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n        >\r\n          @if (selectionType() === 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"radio\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n      <ngx-datatable-column\r\n        [name]=\"actionsText() | abpLocalization\"\r\n        [maxWidth]=\"_actionsColumnWidth() ?? undefined\"\r\n        [width]=\"_actionsColumnWidth() ?? 200\"\r\n        [canAutoResize]=\"!_actionsColumnWidth()\"\r\n        [sortable]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n          @if (actionsTemplate(); as template) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"template\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n            ></ng-container>\r\n          } @else if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @for (prop of propList; track prop.name; let i = $index) {\r\n      <ngx-datatable-column\r\n        *abpVisible=\"prop.columnVisible(getInjected)\"\r\n        [width]=\"columnWidths()[i] ?? 200\"\r\n        [canAutoResize]=\"!columnWidths()[i]\"\r\n        [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n        [prop]=\"prop.name\"\r\n        [sortable]=\"prop.sortable\"\r\n      >\r\n        <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n          @if (prop.tooltip) {\r\n            <span\r\n              [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n              [placement]=\"prop.tooltip.placement || 'auto'\"\r\n              container=\"body\"\r\n              [class.pointer]=\"prop.sortable\"\r\n              (click)=\"prop.sortable && sortFn(column)\"\r\n            >\r\n              {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n            </span>\r\n          } @else {\r\n            <span [class.pointer]=\"prop.sortable\" (click)=\"prop.sortable && sortFn(column)\">\r\n              {{ column.name }}\r\n            </span>\r\n          }\r\n        </ng-template>\r\n        <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n          <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n            <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n              @if (!row['_' + prop.name].component) {\r\n                @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                        : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                          | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                } @else {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async)\r\n                        : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                }\r\n              } @else {\r\n                <ng-container\r\n                  *ngComponentOutlet=\"\r\n                    row['_' + prop.name].component;\r\n                    injector: row['_' + prop.name].injector\r\n                  \"\r\n                ></ng-container>\r\n              }\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n  </ngx-datatable>\r\n}\r\n", styles: [":host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail{background:none;padding:0}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { actionsTextInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsText", required: false }] }], dataInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], recordsTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordsTotal", required: true }] }], actionsColumnWidthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsColumnWidth", required: false }] }], actionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsTemplate", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectionTypeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionType", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], infiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScroll", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], tableHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableHeight", required: false }] }], rowDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDetailTemplate", required: false }] }], rowDetailHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDetailHeight", required: false }] }], tableActivate: [{ type: i0.Output, args: ["tableActivate"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], rowDetailToggle: [{ type: i0.Output, args: ["rowDetailToggle"] }], rowDetailComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ExtensibleTableRowDetailComponent), { isSignal: true }] }], table: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }] } });
 
 class CreateInjectorPipe {
     transform(_, action, context) {
@@ -1256,7 +1275,7 @@ class PageToolbarComponent extends AbstractActionsComponent {
                 provide: EXTENSIONS_ACTION_TYPE,
                 useValue: 'toolbarActions',
             },
-        ], exportAs: ["abpPageToolbar"], usesInheritance: true, ngImport: i0, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  @for (action of actionList; track action.component || action.action; let last = $last) {\r\n  <div class=\"col-auto px-0 pt-0\" [class.pe-0]=\"last\">\r\n    @if (action.visible(data)) {\r\n    <ng-container *abpPermission=\"action.permission; runChangeDetection: false\">\r\n      @if (action.component; as component) {\r\n      <ng-container\r\n        *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n      ></ng-container>\r\n\r\n      }@else {\r\n         @if (asToolbarAction(action).value; as toolbarAction ) {\r\n          <button\r\n            (click)=\"action.action(data)\"\r\n            type=\"button\"\r\n            [ngClass]=\"toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass\"\r\n            class=\"d-inline-flex align-items-center gap-1\"\r\n          >\r\n            <i [ngClass]=\"toolbarAction?.icon\" [class.me-1]=\"toolbarAction?.icon\"></i>\r\n            {{ toolbarAction?.text | abpLocalization }}\r\n          </button>\r\n        } \r\n      }\r\n    </ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n", dependencies: [{ kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: CreateInjectorPipe, name: "createInjector" }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["abpPageToolbar"], usesInheritance: true, ngImport: i0, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  @for (action of actionList; track action.component || action.action; let last = $last) {\r\n  <div class=\"col-auto px-0 pt-0\" [class.pe-0]=\"last\">\r\n    @if (action.visible(data)) {\r\n    <ng-container *abpPermission=\"action.permission; runChangeDetection: false\">\r\n      @if (action.component; as component) {\r\n      <ng-container *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"></ng-container>\r\n\r\n      }@else {\r\n      @if (asToolbarAction(action).value; as toolbarAction ) {\r\n      <button (click)=\"action.action(data)\" type=\"button\"\r\n        [class]=\"toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass\"\r\n        class=\"d-inline-flex align-items-center gap-1\">\r\n        <i [class]=\"toolbarAction?.icon\" [class.me-1]=\"toolbarAction?.icon\"></i>\r\n        {{ toolbarAction?.text | abpLocalization }}\r\n      </button>\r\n      }\r\n      }\r\n    </ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</div>", dependencies: [{ kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: CreateInjectorPipe, name: "createInjector" }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PageToolbarComponent, decorators: [{
             type: Component,
@@ -1264,14 +1283,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                         CreateInjectorPipe,
                         PermissionDirective,
                         LocalizationPipe,
-                        NgClass,
                         NgComponentOutlet,
                     ], providers: [
                         {
                             provide: EXTENSIONS_ACTION_TYPE,
                             useValue: 'toolbarActions',
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  @for (action of actionList; track action.component || action.action; let last = $last) {\r\n  <div class=\"col-auto px-0 pt-0\" [class.pe-0]=\"last\">\r\n    @if (action.visible(data)) {\r\n    <ng-container *abpPermission=\"action.permission; runChangeDetection: false\">\r\n      @if (action.component; as component) {\r\n      <ng-container\r\n        *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n      ></ng-container>\r\n\r\n      }@else {\r\n         @if (asToolbarAction(action).value; as toolbarAction ) {\r\n          <button\r\n            (click)=\"action.action(data)\"\r\n            type=\"button\"\r\n            [ngClass]=\"toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass\"\r\n            class=\"d-inline-flex align-items-center gap-1\"\r\n          >\r\n            <i [ngClass]=\"toolbarAction?.icon\" [class.me-1]=\"toolbarAction?.icon\"></i>\r\n            {{ toolbarAction?.text | abpLocalization }}\r\n          </button>\r\n        } \r\n      }\r\n    </ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  @for (action of actionList; track action.component || action.action; let last = $last) {\r\n  <div class=\"col-auto px-0 pt-0\" [class.pe-0]=\"last\">\r\n    @if (action.visible(data)) {\r\n    <ng-container *abpPermission=\"action.permission; runChangeDetection: false\">\r\n      @if (action.component; as component) {\r\n      <ng-container *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"></ng-container>\r\n\r\n      }@else {\r\n      @if (asToolbarAction(action).value; as toolbarAction ) {\r\n      <button (click)=\"action.action(data)\" type=\"button\"\r\n        [class]=\"toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass\"\r\n        class=\"d-inline-flex align-items-center gap-1\">\r\n        <i [class]=\"toolbarAction?.icon\" [class.me-1]=\"toolbarAction?.icon\"></i>\r\n        {{ toolbarAction?.text | abpLocalization }}\r\n      </button>\r\n      }\r\n      }\r\n    </ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</div>" }]
         }], ctorParameters: () => [] });
 
 var objectExtensions = /*#__PURE__*/Object.freeze({
@@ -1289,7 +1307,8 @@ function mergeWithDefaultActions(extension, defaultActions, ...contributors) {
     });
 }
 
-function generateFormFromProps(data) {
+function generateFormFromProps(propData) {
+    const data = propData.data;
     const extensions = data.getInjected((ExtensionsService));
     const identifier = data.getInjected(EXTENSIONS_IDENTIFIER);
     const form = new UntypedFormGroup({});
@@ -1579,6 +1598,7 @@ const importWithExport = [
     CreateInjectorPipe,
     ExtensibleFormComponent,
     ExtensibleTableComponent,
+    ExtensibleTableRowDetailComponent,
     ExtensibleFormMultiselectComponent,
 ];
 class ExtensibleModule {
@@ -1599,6 +1619,7 @@ class ExtensibleModule {
             CreateInjectorPipe,
             ExtensibleFormComponent,
             ExtensibleTableComponent,
+            ExtensibleTableRowDetailComponent,
             ExtensibleFormMultiselectComponent], exports: [DisabledDirective,
             ExtensibleDateTimePickerComponent,
             ExtensibleFormPropComponent,
@@ -1608,6 +1629,7 @@ class ExtensibleModule {
             CreateInjectorPipe,
             ExtensibleFormComponent,
             ExtensibleTableComponent,
+            ExtensibleTableRowDetailComponent,
             ExtensibleFormMultiselectComponent] }); }
     static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
             ThemeSharedModule,
@@ -1646,5 +1668,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { ActionList, CreateFormPropsFactory, CreateInjectorPipe, ENTITY_PROP_TYPE_CLASSES, EXTENSIBLE_FORM_VIEW_PROVIDER, EXTENSIONS_ACTION_CALLBACK, EXTENSIONS_ACTION_DATA, EXTENSIONS_ACTION_TYPE, EXTENSIONS_FORM_PROP, EXTENSIONS_FORM_PROP_DATA, EXTENSIONS_IDENTIFIER, EXTRA_PROPERTIES_KEY, EditFormPropsFactory, EntityAction, EntityActionList, EntityActions, EntityActionsFactory, EntityProp, EntityPropList, EntityProps, EntityPropsFactory, ExtensibleDateTimePickerComponent, ExtensibleFormComponent, ExtensibleFormMultiselectComponent, ExtensibleFormPropComponent, ExtensibleModule, ExtensibleTableComponent, ExtensionsService, FormProp, FormPropData, FormPropList, FormProps, GridActionsComponent, objectExtensions as ObjectExtensions, PROP_DATA_STREAM, PageToolbarComponent, PropDataDirective, PropList, ROW_RECORD, ToolbarAction, ToolbarActionList, ToolbarActions, ToolbarActionsFactory, ToolbarComponent, checkPolicies, createExtraPropertyValueResolver, generateFormFromProps, getObjectExtensionEntitiesFromStore, mapEntitiesToContributors, mergeWithDefaultActions, mergeWithDefaultProps };
+export { ActionList, CreateFormPropsFactory, CreateInjectorPipe, ENTITY_PROP_TYPE_CLASSES, EXTENSIBLE_FORM_VIEW_PROVIDER, EXTENSIONS_ACTION_CALLBACK, EXTENSIONS_ACTION_DATA, EXTENSIONS_ACTION_TYPE, EXTENSIONS_FORM_PROP, EXTENSIONS_FORM_PROP_DATA, EXTENSIONS_IDENTIFIER, EXTRA_PROPERTIES_KEY, EditFormPropsFactory, EntityAction, EntityActionList, EntityActions, EntityActionsFactory, EntityProp, EntityPropList, EntityProps, EntityPropsFactory, ExtensibleDateTimePickerComponent, ExtensibleFormComponent, ExtensibleFormMultiselectComponent, ExtensibleFormPropComponent, ExtensibleModule, ExtensibleTableComponent, ExtensibleTableRowDetailComponent, ExtensionsService, FormProp, FormPropData, FormPropList, FormProps, GridActionsComponent, objectExtensions as ObjectExtensions, PROP_DATA_STREAM, PageToolbarComponent, PropDataDirective, PropList, ROW_RECORD, ToolbarAction, ToolbarActionList, ToolbarActions, ToolbarActionsFactory, ToolbarComponent, checkPolicies, createExtraPropertyValueResolver, generateFormFromProps, getObjectExtensionEntitiesFromStore, mapEntitiesToContributors, mergeWithDefaultActions, mergeWithDefaultProps };
 //# sourceMappingURL=abp-ng.components-extensible.mjs.map