@abp/ng.components 10.5.0-rc.4 → 10.6.0-rc.1

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

@@ -1,5 +1,5 @@
 import * as i0 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 { inject, ChangeDetectorRef, input, viewChild, Optional, SkipSelf, ChangeDetectionStrategy, Component, InjectionToken, Injectable, forwardRef, Injector, signal, computed, effect, isSignal, TemplateRef, ViewContainerRef, Directive, viewChildren, contentChild, LOCALE_ID, PLATFORM_ID, output, 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';
@@ -22,9 +22,12 @@ function selfFactory(dependency) {
 class ExtensibleDateTimePickerComponent {
     constructor() {
         this.cdRef = inject(ChangeDetectorRef);
-        this.prop = input(...(ngDevMode ? [undefined, { debugName: "prop" }] : /* istanbul ignore next */ []));
-        this.meridian = input(false, ...(ngDevMode ? [{ debugName: "meridian" }] : /* istanbul ignore next */ []));
-        this.placement = input('bottom-left', ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
+        this.prop = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "prop" }] : /* istanbul ignore next */ []));
+        this.meridian = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "meridian" }] : /* istanbul ignore next */ []));
+        this.placement = input('bottom-left', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "placement" }] : /* istanbul ignore next */ []));
         this.date = viewChild.required(NgbInputDatepicker);
         this.time = viewChild.required(NgbTimepicker);
     }
@@ -34,8 +37,8 @@ class ExtensibleDateTimePickerComponent {
     setTime(dateStr) {
         this.time().writeValue(dateStr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleDateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", 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: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleDateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", 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"
@@ -54,7 +57,7 @@ class ExtensibleDateTimePickerComponent {
       (ngModelChange)="setDate($event)"
       [meridian]="meridian()"
     />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }], viewProviders: [
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { 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: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }], viewProviders: [
             {
                 provide: ControlContainer,
                 useFactory: selfFactory,
@@ -70,7 +73,7 @@ class ExtensibleDateTimePickerComponent {
             },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleDateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleDateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'abpExtensibleDateTimePicker',
@@ -249,10 +252,10 @@ class ExtensibleFormPropService {
         const required = validators.find(v => this.isRequired(v));
         return required ? '*' : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleFormPropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleFormPropService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleFormPropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleFormPropService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleFormPropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleFormPropService, decorators: [{
             type: Injectable
         }] });
 
@@ -263,8 +266,10 @@ const EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR = {
 };
 class ExtensibleFormMultiselectComponent {
     constructor() {
-        this.prop = input.required(...(ngDevMode ? [{ debugName: "prop" }] : /* istanbul ignore next */ []));
-        this.options = input.required(...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
+        this.prop = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prop" }] : /* istanbul ignore next */ []));
+        this.options = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options" }] : /* istanbul ignore next */ []));
         this.selectedValues = [];
         this.disabled = false;
         this.onChange = () => { };
@@ -292,8 +297,8 @@ class ExtensibleFormMultiselectComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleFormMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: ExtensibleFormMultiselectComponent, isStandalone: true, selector: "abp-extensible-form-multi-select", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleFormMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: ExtensibleFormMultiselectComponent, isStandalone: true, selector: "abp-extensible-form-multi-select", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: `
     <div [id]="prop().id">
       @for (option of options(); track option.value) {
         <div class="form-check" validationTarget>
@@ -317,7 +322,7 @@ class ExtensibleFormMultiselectComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleFormMultiselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleFormMultiselectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'abp-extensible-form-multi-select',
@@ -352,37 +357,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 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);
         this.track = inject(TrackByService);
         this.#groupDirective = inject(FormGroupDirective);
         this.injector = inject(Injector);
         this.form = this.#groupDirective.form;
-        this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
-        this.prop = input.required(...(ngDevMode ? [{ debugName: "prop" }] : /* istanbul ignore next */ []));
-        this.first = input(undefined, ...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
-        this.isFirstGroup = input(undefined, ...(ngDevMode ? [{ debugName: "isFirstGroup" }] : /* istanbul ignore next */ []));
+        this.data = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []));
+        this.prop = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "prop" }] : /* istanbul ignore next */ []));
+        this.first = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "first" }] : /* istanbul ignore next */ []));
+        this.isFirstGroup = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFirstGroup" }] : /* istanbul ignore next */ []));
         this.fieldRef = viewChild.required('field');
-        this.asterisk = '';
-        this.containerClassName = 'mb-2';
-        this.showPassword = false;
-        this.options$ = of([]);
-        this.validators = [];
+        this.injectorForCustomComponent = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "injectorForCustomComponent" }] : /* istanbul ignore next */ []));
+        this.asterisk = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "asterisk" }] : /* istanbul ignore next */ []));
+        this.containerClassName = signal('mb-2', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "containerClassName" }] : /* istanbul ignore next */ []));
+        this.showPassword = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showPassword" }] : /* istanbul ignore next */ []));
+        this.options$ = signal(of([]), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "options$" }] : /* istanbul ignore next */ []));
+        this.validators = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "validators" }] : /* istanbul ignore next */ []));
+        this.isReadonly = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isReadonly" }] : /* istanbul ignore next */ []));
+        this.typeaheadModel = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "typeaheadModel" }] : /* istanbul ignore next */ []));
         this.passwordKey = "ThemeShared.Extensions.PasswordComponent" /* eExtensibleComponents.PasswordComponent */;
-        this.disabledFn = (data) => false;
+        this.disabledFn = signal(() => false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabledFn" }] : /* istanbul ignore next */ []));
+        this.disabled = computed(() => {
+            const data = this.data();
+            if (!data)
+                return false;
+            return this.disabledFn()(data);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
         this.search = (text$) => text$
             ? 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$;
-        // Watch prop changes and update state
         effect(() => {
             const currentProp = this.prop();
             const data = this.data();
@@ -390,7 +410,7 @@ class ExtensibleFormPropComponent {
                 return;
             const { options, readonly, disabled, validators, className, template } = currentProp;
             if (template) {
-                this.injectorForCustomComponent = Injector.create({
+                this.injectorForCustomComponent.set(Injector.create({
                     providers: [
                         {
                             provide: EXTENSIONS_FORM_PROP,
@@ -403,31 +423,45 @@ class ExtensibleFormPropComponent {
                         { provide: ControlContainer, useExisting: FormGroupDirective },
                     ],
                     parent: this.injector,
-                });
+                }));
+            }
+            else {
+                this.injectorForCustomComponent.set(undefined);
             }
             if (options)
-                this.options$ = options(data);
+                this.options$.set(options(data));
             if (readonly)
-                this.readonly = readonly(data);
+                this.isReadonly.set(readonly(data));
             if (disabled) {
-                this.disabledFn = disabled;
+                this.disabledFn.set(disabled);
+            }
+            else {
+                this.disabledFn.set(() => false);
             }
             if (validators) {
-                this.validators = validators(data);
-                this.setAsterisk();
+                this.validators.set(validators(data));
+                this.asterisk.set(this.service.calcAsterisks(validators(data)));
+            }
+            else {
+                this.validators.set([]);
+                this.asterisk.set('');
             }
             if (className !== undefined) {
-                this.containerClassName = className;
+                this.containerClassName.set(className);
+            }
+            else {
+                this.containerClassName.set('mb-2');
             }
             const [keyControl, valueControl] = this.getTypeaheadControls();
-            if (keyControl && valueControl)
-                this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
-            this.cdRef.markForCheck();
+            if (keyControl && valueControl) {
+                this.typeaheadModel.set({ key: keyControl.value, value: valueControl.value });
+            }
         });
     }
     setTypeaheadValue(selectedOption) {
-        this.typeaheadModel = selectedOption || { key: null, value: null };
-        const { key, value } = this.typeaheadModel;
+        const model = selectedOption || { key: null, value: null };
+        this.typeaheadModel.set(model);
+        const { key, value } = model;
         const [keyControl, valueControl] = this.getTypeaheadControls();
         if (valueControl?.value && !value)
             valueControl.markAsDirty();
@@ -446,9 +480,6 @@ class ExtensibleFormPropComponent {
         const valueControl = this.form.get(extraPropName) || this.form.get(name);
         return [keyControl, valueControl];
     }
-    setAsterisk() {
-        this.asterisk = this.service.calcAsterisks(this.validators);
-    }
     ngAfterViewInit() {
         if (this.isFirstGroup() && this.first() && this.fieldRef()) {
             requestAnimationFrame(() => {
@@ -462,8 +493,8 @@ class ExtensibleFormPropComponent {
     getType(prop) {
         return this.service.getType(prop);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleFormPropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleFormPropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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]=\"isReadonly()\"\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            (ngModelChange)=\"typeaheadModel.set($event)\"\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]=\"isReadonly()\"\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\r\n            class=\"btn btn-secondary\"\r\n            type=\"button\"\r\n            (click)=\"showPassword.update(value => !value)\"\r\n          >\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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[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,
@@ -473,7 +504,7 @@ class ExtensibleFormPropComponent {
             { provide: NgbTimeAdapter, useClass: TimeAdapter },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleFormPropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleFormPropComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-extensible-form-prop', imports: [
                         ExtensibleDateTimePickerComponent,
@@ -500,7 +531,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         },
                         { 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 [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" }]
+                    ], 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]=\"isReadonly()\"\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            (ngModelChange)=\"typeaheadModel.set($event)\"\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]=\"isReadonly()\"\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\r\n            class=\"btn btn-secondary\"\r\n            type=\"button\"\r\n            (click)=\"showPassword.update(value => !value)\"\r\n          >\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 {
@@ -808,10 +839,10 @@ class ExtensionsService {
         this.createFormProps = new CreateFormPropsFactory();
         this.editFormProps = new EditFormPropsFactory();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensionsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensionsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensionsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -845,10 +876,10 @@ class PropDataDirective extends PropData {
     ngOnDestroy() {
         this.vcRef.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PropDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PropDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", 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.2.17", ngImport: i0, type: PropDataDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PropDataDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'abpPropData',
@@ -858,16 +889,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class ExtensibleFormComponent {
     constructor() {
-        this.cdRef = inject(ChangeDetectorRef);
         this.track = inject(TrackByService);
         this.container = inject(ControlContainer);
         this.extensions = inject(ExtensionsService);
         this.identifier = inject(EXTENSIONS_IDENTIFIER);
-        this.formProps = viewChildren(ExtensibleFormPropComponent, ...(ngDevMode ? [{ debugName: "formProps" }] : /* istanbul ignore next */ []));
-        this.selectedRecord = input(undefined, ...(ngDevMode ? [{ debugName: "selectedRecord" }] : /* istanbul ignore next */ []));
+        this.formProps = viewChildren(ExtensibleFormPropComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "formProps" }] : /* istanbul ignore next */ []));
+        this.selectedRecord = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedRecord" }] : /* istanbul ignore next */ []));
         this.extraPropertiesKey = EXTRA_PROPERTIES_KEY;
-        this.groupedPropList = signal(undefined, ...(ngDevMode ? [{ debugName: "groupedPropList" }] : /* istanbul ignore next */ []));
-        this.record = signal(undefined, ...(ngDevMode ? [{ debugName: "record" }] : /* istanbul ignore next */ []));
+        this.groupedPropList = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "groupedPropList" }] : /* istanbul ignore next */ []));
+        this.record = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "record" }] : /* istanbul ignore next */ []));
         effect(() => {
             const recordValue = this.selectedRecord();
             const type = !recordValue || JSON.stringify(recordValue) === '{}' ? 'create' : 'edit';
@@ -898,8 +932,8 @@ class ExtensibleFormComponent {
         const formPropList = items[index].formPropList.toArray();
         return formPropList.some(prop => prop.visible(data));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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,
@@ -907,7 +941,7 @@ class ExtensibleFormComponent {
             },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpExtensibleForm', selector: 'abp-extensible-form', imports: [NgTemplateOutlet, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         {
@@ -924,37 +958,41 @@ class AbstractActionsComponent extends ActionData {
     constructor() {
         const injector = inject(Injector);
         super();
-        this.record = input.required(...(ngDevMode ? [{ debugName: "record" }] : /* istanbul ignore next */ []));
+        this.record = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "record" }] : /* istanbul ignore next */ []));
         this.getInjected = injector.get.bind(injector);
         const extensions = injector.get(ExtensionsService);
         const name = injector.get(EXTENSIONS_IDENTIFIER);
         const type = injector.get(EXTENSIONS_ACTION_TYPE);
         this.actionList = extensions[type].get(name).actions;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: AbstractActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.17", type: AbstractActionsComponent, isStandalone: true, inputs: { record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AbstractActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.5", 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.2.17", ngImport: i0, type: AbstractActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: AbstractActionsComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { record: [{ type: i0.Input, args: [{ isSignal: true, alias: "record", required: true }] }] } });
 
 class GridActionsComponent extends AbstractActionsComponent {
     constructor() {
         super();
-        this.icon = input('fa fa-cog', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
-        this.index = input(undefined, ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
-        this.text = input('', ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
+        this.icon = input('fa fa-cog', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+        this.index = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []));
+        this.text = input('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
         this.trackByFn = (_, item) => item.text;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GridActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 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.2.17", ngImport: i0, type: GridActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GridActionsComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpGridActions', imports: [
                         NgbDropdownModule,
@@ -973,15 +1011,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class ExtensibleTableRowDetailComponent {
     constructor() {
-        this.rowHeight = input('100%', ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
-        this.template = contentChild((TemplateRef), ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
+        this.rowHeight = input('100%', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowHeight" }] : /* istanbul ignore next */ []));
+        this.template = contentChild((TemplateRef), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleTableRowDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.2.17", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleTableRowDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.5", 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, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleTableRowDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleTableRowDetailComponent, decorators: [{
             type: Component,
             args: [{
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     selector: 'abp-extensible-table-row-detail',
                     template: '',
                 }]
@@ -1005,7 +1046,6 @@ class ExtensibleTableComponent {
     constructor() {
         this.#injector = inject(Injector);
         this.getInjected = this.#injector.get.bind(this.#injector);
-        this.cdr = inject(ChangeDetectorRef);
         this.locale = inject(LOCALE_ID);
         this.config = inject(ConfigStateService);
         this.timeZoneService = inject(TimezoneService);
@@ -1016,37 +1056,68 @@ class ExtensibleTableComponent {
         // Input signals
         this.actionsTextInput = input(undefined, { ...(ngDevMode ? { debugName: "actionsTextInput" } : /* istanbul ignore next */ {}), alias: 'actionsText' });
         this.dataInput = input([], { ...(ngDevMode ? { debugName: "dataInput" } : /* istanbul ignore next */ {}), alias: 'data' });
-        this.list = input.required(...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
-        this.recordsTotal = input.required(...(ngDevMode ? [{ debugName: "recordsTotal" }] : /* istanbul ignore next */ []));
+        this.list = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "list" }] : /* istanbul ignore next */ []));
+        this.recordsTotal = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "recordsTotal" }] : /* istanbul ignore next */ []));
         this.actionsColumnWidthInput = input(undefined, { ...(ngDevMode ? { debugName: "actionsColumnWidthInput" } : /* istanbul ignore next */ {}), alias: 'actionsColumnWidth' });
-        this.actionsTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "actionsTemplate" }] : /* istanbul ignore next */ []));
-        this.selectable = input(false, ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
+        this.actionsTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsTemplate" }] : /* istanbul ignore next */ []));
+        this.selectable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectable" }] : /* istanbul ignore next */ []));
         this.selectionTypeInput = input(SelectionType.multiClick, { ...(ngDevMode ? { debugName: "selectionTypeInput" } : /* istanbul ignore next */ {}), alias: 'selectionType' });
-        this.selected = input([], ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
-        this.infiniteScroll = input(false, ...(ngDevMode ? [{ debugName: "infiniteScroll" }] : /* istanbul ignore next */ []));
-        this.isLoading = input(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
-        this.scrollThreshold = input(10, ...(ngDevMode ? [{ debugName: "scrollThreshold" }] : /* istanbul ignore next */ []));
-        this.tableHeight = input(undefined, ...(ngDevMode ? [{ debugName: "tableHeight" }] : /* istanbul ignore next */ []));
-        this.rowDetailTemplate = input(undefined, ...(ngDevMode ? [{ debugName: "rowDetailTemplate" }] : /* istanbul ignore next */ []));
-        this.rowDetailHeight = input('100%', ...(ngDevMode ? [{ debugName: "rowDetailHeight" }] : /* istanbul ignore next */ []));
+        this.selected = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.infiniteScroll = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "infiniteScroll" }] : /* istanbul ignore next */ []));
+        this.isLoading = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isLoading" }] : /* istanbul ignore next */ []));
+        this.scrollThreshold = input(10, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "scrollThreshold" }] : /* istanbul ignore next */ []));
+        this.tableHeight = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tableHeight" }] : /* istanbul ignore next */ []));
+        this.rowDetailTemplate = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowDetailTemplate" }] : /* istanbul ignore next */ []));
+        this.rowDetailHeight = input('100%', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowDetailHeight" }] : /* istanbul ignore next */ []));
         // Output signals
         this.tableActivate = output();
         this.selectionChange = output();
         this.loadMore = output();
         this.rowDetailToggle = output();
         // Internal signals
-        this._data = signal([], ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
-        this._actionsColumnWidth = signal(DEFAULT_ACTIONS_COLUMN_WIDTH, ...(ngDevMode ? [{ debugName: "_actionsColumnWidth" }] : /* istanbul ignore next */ []));
-        this.rowDetailComponent = contentChild(ExtensibleTableRowDetailComponent, ...(ngDevMode ? [{ debugName: "rowDetailComponent" }] : /* istanbul ignore next */ []));
+        this._data = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_data" }] : /* istanbul ignore next */ []));
+        this._actionsColumnWidth = signal(DEFAULT_ACTIONS_COLUMN_WIDTH, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "_actionsColumnWidth" }] : /* istanbul ignore next */ []));
+        this.rowDetailComponent = contentChild(ExtensibleTableRowDetailComponent, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "rowDetailComponent" }] : /* istanbul ignore next */ []));
         this.table = viewChild.required('table');
         // Computed values
         this.actionsText = computed(() => {
             return this.actionsTextInput() ?? (this.actionList.length >= 1 ? 'AbpUi::Actions' : '');
-        }, ...(ngDevMode ? [{ debugName: "actionsText" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "actionsText" }] : /* istanbul ignore next */ []));
         this.selectionType = computed(() => {
             const value = this.selectionTypeInput();
             return typeof value === 'string' ? SelectionType[value] : value;
-        }, ...(ngDevMode ? [{ debugName: "selectionType" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectionType" }] : /* istanbul ignore next */ []));
+        this.effectiveRowDetailRowHeight = computed(() => {
+            const height = this.effectiveRowDetailHeight;
+            if (typeof height === 'number') {
+                return height;
+            }
+            if (typeof height === 'function') {
+                return height;
+            }
+            if (typeof height === 'string' && !height.endsWith('%')) {
+                const parsed = Number.parseInt(height, 10);
+                return Number.isNaN(parsed) ? undefined : parsed;
+            }
+            return undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "effectiveRowDetailRowHeight" }] : /* istanbul ignore next */ []));
         this.trackByFn = (_, item) => item.name;
         // Infinite scroll: debounced load more subject
         this.loadMoreSubject = new Subject();
@@ -1055,7 +1126,8 @@ class ExtensibleTableComponent {
             .subscribe(() => this.triggerLoadMore());
         this.columnWidths = computed(() => {
             return this.propList.toArray().map(prop => prop.columnWidth);
-        }, ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "columnWidths" }] : /* istanbul ignore next */ []));
         const extensions = this.#injector.get(ExtensionsService);
         const name = this.#injector.get(EXTENSIONS_IDENTIFIER);
         this.propList = extensions.entityProps.get(name).props;
@@ -1157,21 +1229,16 @@ class ExtensibleTableComponent {
         if (!this.shouldHandleScroll()) {
             return;
         }
-        const target = scrollEvent.target;
-        if (!target) {
-            return;
-        }
-        if (this.isNearScrollBottom(target)) {
+        const table = this.table();
+        const viewportHeight = table.bodyHeight;
+        const scrollHeight = table.bodyComponent.scrollHeight();
+        if (scrollEvent.offsetY + viewportHeight >= scrollHeight - this.scrollThreshold()) {
             this.loadMoreSubject.next();
         }
     }
     shouldHandleScroll() {
         return this.infiniteScroll() && !this.isLoading();
     }
-    isNearScrollBottom(element) {
-        const { offsetHeight, scrollTop, scrollHeight } = element;
-        return offsetHeight + scrollTop >= scrollHeight - this.scrollThreshold();
-    }
     triggerLoadMore() {
         this.loadMore.emit();
     }
@@ -1194,17 +1261,16 @@ class ExtensibleTableComponent {
                 ?.requestStatus$?.pipe(filter(status => status === 'loading'))
                 .subscribe(() => {
                 this._data.set([]);
-                this.cdr.markForCheck();
             });
         }
     }
     ngOnDestroy() {
         this.loadMoreSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", 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 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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      @let detailRowHeight = effectiveRowDetailRowHeight();\r\n      @if (detailRowHeight !== undefined) {\r\n        <ngx-datatable-row-detail [rowHeight]=\"detailRowHeight\">\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            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      } @else {\r\n        <ngx-datatable-row-detail>\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            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      }\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-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()\"\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()\"\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()\"\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()\">\r\n              {{ column.name }}\r\n            </span>\r\n          }\r\n        </ng-template>\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" 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                />\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.2.17", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpExtensibleTable', selector: 'abp-extensible-table', imports: [
                         AbpVisibleDirective,
@@ -1219,7 +1285,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         AsyncPipe,
                         NgTemplateOutlet,
                         NgComponentOutlet,
-                    ], 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"] }]
+                    ], 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      @let detailRowHeight = effectiveRowDetailRowHeight();\r\n      @if (detailRowHeight !== undefined) {\r\n        <ngx-datatable-row-detail [rowHeight]=\"detailRowHeight\">\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            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      } @else {\r\n        <ngx-datatable-row-detail>\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            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      }\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-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()\"\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()\"\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()\"\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()\">\r\n              {{ column.name }}\r\n            </span>\r\n          }\r\n        </ng-template>\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" 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                />\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 {
@@ -1245,10 +1311,10 @@ class CreateInjectorPipe {
         };
         return { get };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CreateInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: CreateInjectorPipe, isStandalone: true, name: "createInjector" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CreateInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: CreateInjectorPipe, isStandalone: true, name: "createInjector" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CreateInjectorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CreateInjectorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'createInjector',
@@ -1269,15 +1335,15 @@ class PageToolbarComponent extends AbstractActionsComponent {
             value: value,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PageToolbarComponent, isStandalone: true, selector: "abp-page-toolbar", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PageToolbarComponent, isStandalone: true, selector: "abp-page-toolbar", providers: [
             {
                 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 *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.2.17", ngImport: i0, type: PageToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageToolbarComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpPageToolbar', selector: 'abp-page-toolbar', imports: [
                         CreateInjectorPipe,
@@ -1602,8 +1668,8 @@ const importWithExport = [
     ExtensibleFormMultiselectComponent,
 ];
 class ExtensibleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
             ThemeSharedModule,
             NgxValidateCoreModule,
             NgbDatepickerModule,
@@ -1631,7 +1697,7 @@ class ExtensibleModule {
             ExtensibleTableComponent,
             ExtensibleTableRowDetailComponent,
             ExtensibleFormMultiselectComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
             ThemeSharedModule,
             NgxValidateCoreModule,
             NgbDatepickerModule,
@@ -1645,7 +1711,7 @@ class ExtensibleModule {
             ExtensibleTableComponent,
             ExtensibleFormMultiselectComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: ExtensibleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: ExtensibleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],