@abp/ng.components 9.3.6 → 10.0.0-rc.2

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

@@ -1,7 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, ChangeDetectorRef, input, Optional, SkipSelf, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, Injectable, forwardRef, Injector, Input, Directive, ViewChildren, LOCALE_ID, EventEmitter, signal, computed, Output, Pipe, NgModule } from '@angular/core';
-import * as i5 from '@angular/common';
-import { CommonModule, NgClass, NgTemplateOutlet, AsyncPipe, NgComponentOutlet } from '@angular/common';
+import { inject, ChangeDetectorRef, input, Optional, SkipSelf, ViewChild, ChangeDetectionStrategy, Component, InjectionToken, Injectable, forwardRef, Injector, signal, effect, Input, TemplateRef, ViewContainerRef, Directive, ViewChildren, LOCALE_ID, PLATFORM_ID, EventEmitter, computed, 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';
@@ -9,11 +7,11 @@ import { NgbDateAdapter, NgbTimeAdapter, NgbDatepickerModule, NgbTimepickerModul
 import * as i3 from '@ngx-validate/core';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { DateTimeAdapter, DateAdapter, TimeAdapter, DisabledDirective, EllipsisDirective, AbpVisibleDirective, NgxDatatableDefaultDirective, NgxDatatableListDirective, ThemeSharedModule } from '@abp/ng.theme.shared';
-import * as i2$1 from '@abp/ng.core';
-import { RestService, ConfigStateService, AbpValidators, LocalizationPipe, TrackByService, ShowPasswordDirective, PermissionDirective, LocalizationModule, escapeHtmlChars, TimezoneService, PermissionService, UtcToLocalPipe, LocalizationService, createLocalizationPipeKeyGenerator, CoreModule } from '@abp/ng.core';
-import { of, map as map$1, filter, merge, pipe, zip } from 'rxjs';
+import { RestService, ConfigStateService, AbpValidators, LocalizationPipe, TrackByService, ShowPasswordDirective, PermissionDirective, escapeHtmlChars, TimezoneService, PermissionService, UtcToLocalPipe, LocalizationService, createLocalizationPipeKeyGenerator, CoreModule } from '@abp/ng.core';
+import { of, Subject, debounceTime as debounceTime$1, distinctUntilChanged as distinctUntilChanged$1, map as map$1, filter, merge, pipe, zip } from 'rxjs';
 import { map, debounceTime, distinctUntilChanged, switchMap, filter as filter$1, take } from 'rxjs/operators';
 import { LinkedList } from '@abp/utils';
+import { AsyncPipe, NgClass, NgComponentOutlet, NgTemplateOutlet, isPlatformBrowser } from '@angular/common';
 import * as i1$1 from '@swimlane/ngx-datatable';
 import { SelectionType, NgxDatatableModule } from '@swimlane/ngx-datatable';
 
@@ -54,7 +52,7 @@ class ExtensibleDateTimePickerComponent {
       (ngModelChange)="setDate($event)"
       [meridian]="meridian()"
     />
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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])[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: [
             {
                 provide: ControlContainer,
                 useFactory: selfFactory,
@@ -75,7 +73,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             args: [{
                     exportAs: 'abpExtensibleDateTimePicker',
                     imports: [
-                        CommonModule,
                         ReactiveFormsModule,
                         NgbDatepickerModule,
                         NgbTimepickerModule,
@@ -453,7 +450,7 @@ class ExtensibleFormMultiselectComponent {
         </div>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ExtensibleFormMultiselectComponent, decorators: [{
             type: Component,
@@ -483,12 +480,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
     </div>
   `,
                     providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR],
-                    imports: [LocalizationPipe, CommonModule, ReactiveFormsModule, NgxValidateCoreModule],
+                    imports: [LocalizationPipe, NgxValidateCoreModule],
                     changeDetection: ChangeDetectionStrategy.OnPush,
                 }]
         }] });
 
 class ExtensibleFormPropComponent {
+    #groupDirective;
+    get disabled() {
+        return this.disabledFn(this.data);
+    }
     constructor() {
         this.service = inject(ExtensibleFormPropService);
         this.cdRef = inject(ChangeDetectorRef);
@@ -496,6 +497,8 @@ class ExtensibleFormPropComponent {
         this.#groupDirective = inject(FormGroupDirective);
         this.injector = inject(Injector);
         this.form = this.#groupDirective.form;
+        this.shouldFocus = signal(false);
+        this.isViewReady = signal(false);
         this.asterisk = '';
         this.containerClassName = 'mb-2';
         this.showPassword = false;
@@ -508,10 +511,12 @@ class ExtensibleFormPropComponent {
             : of([]);
         this.typeaheadFormatter = (option) => option.key;
         this.meridian$ = this.service.meridian$;
-    }
-    #groupDirective;
-    get disabled() {
-        return this.disabledFn(this.data);
+        // Effect to handle focus when both conditions are met
+        effect(() => {
+            if (this.shouldFocus() && this.isViewReady() && this.fieldRef?.nativeElement) {
+                this.focusElement();
+            }
+        });
     }
     setTypeaheadValue(selectedOption) {
         this.typeaheadModel = selectedOption || { key: null, value: null };
@@ -537,9 +542,19 @@ class ExtensibleFormPropComponent {
     setAsterisk() {
         this.asterisk = this.service.calcAsterisks(this.validators);
     }
-    ngAfterViewInit() {
-        if (this.isFirstGroup && this.first && this.fieldRef) {
+    focusElement() {
+        try {
             this.fieldRef.nativeElement.focus();
+            this.shouldFocus.set(false);
+        }
+        catch (error) {
+            console.error('Error focusing field:', error);
+        }
+    }
+    ngAfterViewInit() {
+        this.isViewReady.set(true);
+        if (this.isFirstGroup && this.first) {
+            this.shouldFocus.set(true);
         }
     }
     getComponent(prop) {
@@ -586,7 +601,7 @@ class ExtensibleFormPropComponent {
             this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ExtensibleFormPropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ExtensibleFormPropComponent, isStandalone: true, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first", isFirstGroup: "isFirstGroup" }, providers: [ExtensibleFormPropService], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop)) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\" />\r\n    }\r\n  }\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-2\">\r\n    @switch (getComponent(prop)) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [autocomplete]=\"prop.autocomplete\"\r\n          [type]=\"getType(prop)\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n      }\r\n      @case ('checkbox') {\r\n        <div class=\"form-check\" validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpDisabled]=\"disabled\"\r\n            type=\"checkbox\"\r\n            class=\"form-check-input\"\r\n          />\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"label\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <select\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          class=\"form-select form-control\"\r\n        >\r\n          @for (option of options$ | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop.isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop\"\r\n          [options]=\"options$ | async\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [autocomplete]=\"prop.autocomplete\"\r\n            [abpDisabled]=\"disabled\"\r\n            [ngbTypeahead]=\"search\"\r\n            [editable]=\"false\"\r\n            [inputFormatter]=\"typeaheadFormatter\"\r\n            [resultFormatter]=\"typeaheadFormatter\"\r\n            [ngModelOptions]=\"{ standalone: true }\"\r\n            [(ngModel)]=\"typeaheadModel\"\r\n            (selectItem)=\"setTypeaheadValue($event.item)\"\r\n            (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n            [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n            class=\"form-control\"\r\n          />\r\n          <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n        </div>\r\n      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          (click)=\"datepicker.open()\"\r\n          (keyup.space)=\"datepicker.open()\"\r\n          ngbDatepicker\r\n          #datepicker=\"ngbDatepicker\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop.name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpShowPassword]=\"showPassword\"\r\n          />\r\n          <button class=\"btn btn-secondary\" type=\"button\" (click)=\"showPassword = !showPassword\">\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [ngClass]=\"{\r\n                'fa-eye-slash': !showPassword,\r\n                'fa-eye': showPassword,\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop.formText) {\r\n      <small class=\"text-muted d-block\">{{ prop.formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop.displayTextResolver) {\r\n        {{ prop.displayTextResolver(data) | abpLocalization }}\r\n      } @else {\r\n        @if (prop.isExtra) {\r\n          {{ '::' + prop.displayName | abpLocalization }}\r\n        } @else {\r\n          {{ prop.displayName | abpLocalization }}\r\n        }\r\n      }\r\n      {{ asterisk }}\r\n      @if (prop.tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n          [placement]=\"prop.tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: ExtensibleDateTimePickerComponent, selector: "abp-extensible-date-time-picker", inputs: ["prop", "meridian", "placement"], exportAs: ["abpExtensibleDateTimePicker"] }, { kind: "component", type: ExtensibleFormMultiselectComponent, selector: "abp-extensible-form-multi-select", inputs: ["prop", "options"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: NgbTimepickerModule }, { kind: "component", type: i1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: ShowPasswordDirective, selector: "[abpShowPassword]", inputs: ["abpShowPassword"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i2$1.LocalizationPipe, name: "abpLocalization" }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: i5.AsyncPipe, name: "async" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ExtensibleFormPropComponent, isStandalone: true, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first", isFirstGroup: "isFirstGroup" }, providers: [ExtensibleFormPropService], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop)) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\" />\r\n    }\r\n  }\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-2\">\r\n    @switch (getComponent(prop)) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [autocomplete]=\"prop.autocomplete\"\r\n          [type]=\"getType(prop)\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n      }\r\n      @case ('checkbox') {\r\n        <div class=\"form-check\" validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpDisabled]=\"disabled\"\r\n            type=\"checkbox\"\r\n            class=\"form-check-input\"\r\n          />\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"label\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <select\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          class=\"form-select form-control\"\r\n        >\r\n          @for (option of options$ | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop.isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop\"\r\n          [options]=\"options$ | async\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [autocomplete]=\"prop.autocomplete\"\r\n            [abpDisabled]=\"disabled\"\r\n            [ngbTypeahead]=\"search\"\r\n            [editable]=\"false\"\r\n            [inputFormatter]=\"typeaheadFormatter\"\r\n            [resultFormatter]=\"typeaheadFormatter\"\r\n            [ngModelOptions]=\"{ standalone: true }\"\r\n            [(ngModel)]=\"typeaheadModel\"\r\n            (selectItem)=\"setTypeaheadValue($event.item)\"\r\n            (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n            [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n            class=\"form-control\"\r\n          />\r\n          <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n        </div>\r\n      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          (click)=\"datepicker.open()\"\r\n          (keyup.space)=\"datepicker.open()\"\r\n          ngbDatepicker\r\n          #datepicker=\"ngbDatepicker\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop.name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpShowPassword]=\"showPassword\"\r\n          />\r\n          <button class=\"btn btn-secondary\" type=\"button\" (click)=\"showPassword = !showPassword\">\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [ngClass]=\"{\r\n                'fa-eye-slash': !showPassword,\r\n                'fa-eye': showPassword,\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop.formText) {\r\n      <small class=\"text-muted d-block\">{{ prop.formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop.displayTextResolver) {\r\n        {{ prop.displayTextResolver(data) | abpLocalization }}\r\n      } @else {\r\n        @if (prop.isExtra) {\r\n          {{ '::' + prop.displayName | abpLocalization }}\r\n        } @else {\r\n          {{ prop.displayName | abpLocalization }}\r\n        }\r\n      }\r\n      {{ asterisk }}\r\n      @if (prop.tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n          [placement]=\"prop.tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: ExtensibleDateTimePickerComponent, selector: "abp-extensible-date-time-picker", inputs: ["prop", "meridian", "placement"], exportAs: ["abpExtensibleDateTimePicker"] }, { kind: "component", type: ExtensibleFormMultiselectComponent, selector: "abp-extensible-form-multi-select", inputs: ["prop", "options"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "ngmodule", type: NgbTimepickerModule }, { kind: "component", type: i1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: ShowPasswordDirective, selector: "[abpShowPassword]", inputs: ["abpShowPassword"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], 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"] }], viewProviders: [
             {
                 provide: ControlContainer,
                 useFactory: selfFactory,
@@ -610,8 +625,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         NgbTypeaheadModule,
                         ShowPasswordDirective,
                         PermissionDirective,
-                        LocalizationModule,
-                        CommonModule,
+                        LocalizationPipe,
+                        AsyncPipe,
+                        NgClass,
+                        NgComponentOutlet,
+                        NgTemplateOutlet,
                         FormsModule,
                     ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [ExtensibleFormPropService], viewProviders: [
                         {
@@ -622,7 +640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         { provide: NgbDateAdapter, useClass: DateAdapter },
                         { provide: NgbTimeAdapter, useClass: TimeAdapter },
                     ], template: "<ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop)) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\" />\r\n    }\r\n  }\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-2\">\r\n    @switch (getComponent(prop)) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [autocomplete]=\"prop.autocomplete\"\r\n          [type]=\"getType(prop)\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n      }\r\n      @case ('checkbox') {\r\n        <div class=\"form-check\" validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpDisabled]=\"disabled\"\r\n            type=\"checkbox\"\r\n            class=\"form-check-input\"\r\n          />\r\n          <ng-template\r\n            [ngTemplateOutlet]=\"label\"\r\n            [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <select\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          class=\"form-select form-control\"\r\n        >\r\n          @for (option of options$ | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop.isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop\"\r\n          [options]=\"options$ | async\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n          <input\r\n            #field\r\n            [id]=\"prop.id\"\r\n            [autocomplete]=\"prop.autocomplete\"\r\n            [abpDisabled]=\"disabled\"\r\n            [ngbTypeahead]=\"search\"\r\n            [editable]=\"false\"\r\n            [inputFormatter]=\"typeaheadFormatter\"\r\n            [resultFormatter]=\"typeaheadFormatter\"\r\n            [ngModelOptions]=\"{ standalone: true }\"\r\n            [(ngModel)]=\"typeaheadModel\"\r\n            (selectItem)=\"setTypeaheadValue($event.item)\"\r\n            (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n            [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n            class=\"form-control\"\r\n          />\r\n          <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n        </div>\r\n      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <input\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          (click)=\"datepicker.open()\"\r\n          (keyup.space)=\"datepicker.open()\"\r\n          ngbDatepicker\r\n          #datepicker=\"ngbDatepicker\"\r\n          type=\"text\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop.name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          [readonly]=\"readonly\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop.id\"\r\n            [formControlName]=\"prop.name\"\r\n            [abpShowPassword]=\"showPassword\"\r\n          />\r\n          <button class=\"btn btn-secondary\" type=\"button\" (click)=\"showPassword = !showPassword\">\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [ngClass]=\"{\r\n                'fa-eye-slash': !showPassword,\r\n                'fa-eye': showPassword,\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop.formText) {\r\n      <small class=\"text-muted d-block\">{{ prop.formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop.displayTextResolver) {\r\n        {{ prop.displayTextResolver(data) | abpLocalization }}\r\n      } @else {\r\n        @if (prop.isExtra) {\r\n          {{ '::' + prop.displayName | abpLocalization }}\r\n        } @else {\r\n          {{ prop.displayName | abpLocalization }}\r\n        }\r\n      }\r\n      {{ asterisk }}\r\n      @if (prop.tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n          [placement]=\"prop.tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n" }]
-        }], propDecorators: { data: [{
+        }], ctorParameters: () => [], propDecorators: { data: [{
                 type: Input
             }], prop: [{
                 type: Input
@@ -819,10 +837,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 
 /* eslint-disable @angular-eslint/no-input-rename */
 class PropDataDirective extends PropData {
-    constructor(tempRef, vcRef, injector) {
+    constructor() {
+        const injector = inject(Injector);
         super();
-        this.tempRef = tempRef;
-        this.vcRef = vcRef;
+        this.tempRef = inject(TemplateRef);
+        this.vcRef = inject(ViewContainerRef);
         this.getInjected = injector.get.bind(injector);
     }
     ngOnChanges() {
@@ -835,7 +854,7 @@ class PropDataDirective extends PropData {
     ngOnDestroy() {
         this.vcRef.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PropDataDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PropDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: PropDataDirective, isStandalone: true, selector: "[abpPropData]", inputs: { propList: ["abpPropDataFromList", "propList"], record: ["abpPropDataWithRecord", "record"], index: ["abpPropDataAtIndex", "index"] }, exportAs: ["abpPropData"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PropDataDirective, decorators: [{
@@ -844,7 +863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                     exportAs: 'abpPropData',
                     selector: '[abpPropData]',
                 }]
-        }], ctorParameters: () => [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i0.Injector }], propDecorators: { propList: [{
+        }], ctorParameters: () => [], propDecorators: { propList: [{
                 type: Input,
                 args: ['abpPropDataFromList']
             }], record: [{
@@ -890,7 +909,7 @@ class ExtensibleFormComponent {
         return formPropList.some(prop => prop.visible(data));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ExtensibleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ExtensibleFormComponent, isStandalone: true, selector: "abp-extensible-form", inputs: { selectedRecord: "selectedRecord" }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "@if (form) {\r\n  @for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) {\r\n    <ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record\">\r\n      @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {\r\n        <div\r\n          [ngClass]=\"groupedProp.group?.className\"\r\n          [attr.data-name]=\"groupedProp.group?.name || groupedProp.group?.className\"\r\n        >\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"propListTemplate\"\r\n            [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first}\"\r\n          >\r\n          </ng-container>\r\n        </div>\r\n      } @else {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"propListTemplate\"\r\n          [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first }\"\r\n        >\r\n        </ng-container>\r\n      }\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" let-isFirstGroup=\"isFirstGroup\" #propListTemplate>\r\n  @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {\r\n    @if (prop.visible(data)) {\r\n      @if (extraProperties.controls[prop.name]) {\r\n        <ng-container [formGroupName]=\"extraPropertiesKey\">\r\n          <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\" [class]=\"prop.className\" />\r\n        </ng-container>\r\n      } @else {\r\n        @if (form.get(prop.name)) {\r\n          <abp-extensible-form-prop\r\n            [class]=\"prop.className\"\r\n            [prop]=\"prop\"\r\n            [data]=\"data\"\r\n            [first]=\"first\"\r\n            [isFirstGroup]=\"isFirstGroup\"\r\n          />\r\n        }\r\n      }\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.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],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first", "isFirstGroup"] }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ExtensibleFormComponent, isStandalone: true, selector: "abp-extensible-form", inputs: { selectedRecord: "selectedRecord" }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "@if (form) {\r\n  @for (groupedProp of groupedPropList.items; track i; let i = $index; let first = $first) {\r\n    <ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record\">\r\n      @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {\r\n        <div\r\n          [ngClass]=\"groupedProp.group?.className\"\r\n          [attr.data-name]=\"groupedProp.group?.name || groupedProp.group?.className\"\r\n        >\r\n          <ng-container\r\n            [ngTemplateOutlet]=\"propListTemplate\"\r\n            [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first}\"\r\n          >\r\n          </ng-container>\r\n        </div>\r\n      } @else {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"propListTemplate\"\r\n          [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first }\"\r\n        >\r\n        </ng-container>\r\n      }\r\n    </ng-container>\r\n  }\r\n}\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" let-isFirstGroup=\"isFirstGroup\" #propListTemplate>\r\n  @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {\r\n    @if (prop.visible(data)) {\r\n      @if (extraProperties.controls[prop.name]) {\r\n        <ng-container [formGroupName]=\"extraPropertiesKey\">\r\n          <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\" [class]=\"prop.className\" />\r\n        </ng-container>\r\n      } @else {\r\n        @if (form.get(prop.name)) {\r\n          <abp-extensible-form-prop\r\n            [class]=\"prop.className\"\r\n            [prop]=\"prop\"\r\n            [data]=\"data\"\r\n            [first]=\"first\"\r\n            [isFirstGroup]=\"isFirstGroup\"\r\n          />\r\n        }\r\n      }\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],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,
@@ -900,7 +919,7 @@ class ExtensibleFormComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
             type: Component,
-            args: [{ exportAs: 'abpExtensibleForm', selector: 'abp-extensible-form', imports: [CommonModule, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
+            args: [{ exportAs: 'abpExtensibleForm', selector: 'abp-extensible-form', imports: [NgClass, NgTemplateOutlet, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         {
                             provide: ControlContainer,
                             useFactory: selfFactory,
@@ -917,7 +936,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 // Fix for https://github.com/angular/angular/issues/23904
 // @dynamic
 class AbstractActionsComponent extends ActionData {
-    constructor(injector) {
+    constructor() {
+        const injector = inject(Injector);
         super();
         this.getInjected = injector.get.bind(injector);
         const extensions = injector.get(ExtensionsService);
@@ -925,29 +945,29 @@ class AbstractActionsComponent extends ActionData {
         const type = injector.get(EXTENSIONS_ACTION_TYPE);
         this.actionList = extensions[type].get(name).actions;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AbstractActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AbstractActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: AbstractActionsComponent, isStandalone: true, inputs: { record: "record" }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AbstractActionsComponent, decorators: [{
             type: Directive
-        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { record: [{
+        }], ctorParameters: () => [], propDecorators: { record: [{
                 type: Input
             }] } });
 
 class GridActionsComponent extends AbstractActionsComponent {
-    constructor(injector) {
-        super(injector);
+    constructor() {
+        super();
         this.icon = 'fa fa-cog';
         this.text = '';
         this.trackByFn = (_, item) => item.text;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: GridActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: GridActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: GridActionsComponent, isStandalone: true, selector: "abp-grid-actions", inputs: { icon: "icon", index: "index", text: "text" }, providers: [
             {
                 provide: EXTENSIONS_ACTION_TYPE,
                 useValue: 'entityActions',
             },
-        ], exportAs: ["abpGridActions"], usesInheritance: true, ngImport: i0, template: "@if (actionList.length > 1) {\r\n  <div ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n    <button\r\n      class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n      data-toggle=\"dropdown\"\r\n      aria-haspopup=\"true\"\r\n      ngbDropdownToggle\r\n    >\r\n      <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n    </button>\r\n    <div ngbDropdownMenu>\r\n      @for (action of actionList; track action.text) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n        >\r\n        </ng-container>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (actionList.length === 1) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"btnTmp\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n  ></ng-container>\r\n}\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  @if (action.visible(data)) {\r\n    <button\r\n      ngbDropdownItem\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon && !action.showOnlyIcon\"></i>\r\n  @if (!action.showOnlyIcon) {\r\n    @if (action.icon) {\r\n      <span>{{ action.text | abpLocalization }}</span>\r\n    } @else {\r\n      <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  @if (action.visible(data)) {\r\n    @if (action.tooltip) {\r\n      <button\r\n        *abpPermission=\"action.permission; runChangeDetection: false\"\r\n        (click)=\"action.action(data)\"\r\n        type=\"button\"\r\n        [class]=\"action.btnClass\"\r\n        [style]=\"action.btnStyle\"\r\n        [ngbTooltip]=\"action.tooltip.text | abpLocalization\"\r\n        [placement]=\"action.tooltip.placement || 'auto'\"\r\n        triggers=\"hover\"\r\n        container=\"body\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n        ></ng-container>\r\n      </button>\r\n    } @else {\r\n      <button\r\n        *abpPermission=\"action.permission; runChangeDetection: false\"\r\n        (click)=\"action.action(data)\"\r\n        type=\"button\"\r\n        [class]=\"action.btnClass\"\r\n        [style]=\"action.btnStyle\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n        ></ng-container>\r\n      </button>\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i2$1.LocalizationPipe, name: "abpLocalization" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["abpGridActions"], usesInheritance: true, ngImport: i0, template: "@if (actionList.length > 1) {\r\n  <div ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n    <button\r\n      class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n      data-toggle=\"dropdown\"\r\n      aria-haspopup=\"true\"\r\n      ngbDropdownToggle\r\n    >\r\n      <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n    </button>\r\n    <div ngbDropdownMenu>\r\n      @for (action of actionList; track action.text) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n        >\r\n        </ng-container>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (actionList.length === 1) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"btnTmp\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n  ></ng-container>\r\n}\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  @if (action.visible(data)) {\r\n    <button\r\n      ngbDropdownItem\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon && !action.showOnlyIcon\"></i>\r\n  @if (!action.showOnlyIcon) {\r\n    @if (action.icon) {\r\n      <span>{{ action.text | abpLocalization }}</span>\r\n    } @else {\r\n      <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  @if (action.visible(data)) {\r\n    @if (action.tooltip) {\r\n      <button\r\n        *abpPermission=\"action.permission; runChangeDetection: false\"\r\n        (click)=\"action.action(data)\"\r\n        type=\"button\"\r\n        [class]=\"action.btnClass\"\r\n        [style]=\"action.btnStyle\"\r\n        [ngbTooltip]=\"action.tooltip.text | abpLocalization\"\r\n        [placement]=\"action.tooltip.placement || 'auto'\"\r\n        triggers=\"hover\"\r\n        container=\"body\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n        ></ng-container>\r\n      </button>\r\n    } @else {\r\n      <button\r\n        *abpPermission=\"action.permission; runChangeDetection: false\"\r\n        (click)=\"action.action(data)\"\r\n        type=\"button\"\r\n        [class]=\"action.btnClass\"\r\n        [style]=\"action.btnStyle\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n        ></ng-container>\r\n      </button>\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: GridActionsComponent, decorators: [{
             type: Component,
@@ -956,7 +976,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         EllipsisDirective,
                         PermissionDirective,
                         NgClass,
-                        LocalizationModule,
+                        LocalizationPipe,
                         NgTemplateOutlet,
                         NgbTooltipModule,
                     ], selector: 'abp-grid-actions', providers: [
@@ -965,7 +985,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useValue: 'entityActions',
                         },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (actionList.length > 1) {\r\n  <div ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n    <button\r\n      class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n      data-toggle=\"dropdown\"\r\n      aria-haspopup=\"true\"\r\n      ngbDropdownToggle\r\n    >\r\n      <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n    </button>\r\n    <div ngbDropdownMenu>\r\n      @for (action of actionList; track action.text) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n        >\r\n        </ng-container>\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (actionList.length === 1) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"btnTmp\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n  ></ng-container>\r\n}\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  @if (action.visible(data)) {\r\n    <button\r\n      ngbDropdownItem\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon && !action.showOnlyIcon\"></i>\r\n  @if (!action.showOnlyIcon) {\r\n    @if (action.icon) {\r\n      <span>{{ action.text | abpLocalization }}</span>\r\n    } @else {\r\n      <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  @if (action.visible(data)) {\r\n    @if (action.tooltip) {\r\n      <button\r\n        *abpPermission=\"action.permission; runChangeDetection: false\"\r\n        (click)=\"action.action(data)\"\r\n        type=\"button\"\r\n        [class]=\"action.btnClass\"\r\n        [style]=\"action.btnStyle\"\r\n        [ngbTooltip]=\"action.tooltip.text | abpLocalization\"\r\n        [placement]=\"action.tooltip.placement || 'auto'\"\r\n        triggers=\"hover\"\r\n        container=\"body\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n        ></ng-container>\r\n      </button>\r\n    } @else {\r\n      <button\r\n        *abpPermission=\"action.permission; runChangeDetection: false\"\r\n        (click)=\"action.action(data)\"\r\n        type=\"button\"\r\n        [class]=\"action.btnClass\"\r\n        [style]=\"action.btnStyle\"\r\n      >\r\n        <ng-container\r\n          *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n        ></ng-container>\r\n      </button>\r\n    }\r\n  }\r\n</ng-template>\r\n" }]
-        }], ctorParameters: () => [{ type: i0.Injector }], propDecorators: { icon: [{
+        }], ctorParameters: () => [], propDecorators: { icon: [{
                 type: Input
             }], index: [{
                 type: Input
@@ -997,14 +1017,26 @@ class ExtensibleTableComponent {
         this.timeZoneService = inject(TimezoneService);
         this.entityPropTypeClasses = inject(ENTITY_PROP_TYPE_CLASSES);
         this.permissionService = inject(PermissionService);
+        this.platformId = inject(PLATFORM_ID);
+        this.isBrowser = isPlatformBrowser(this.platformId);
         this.tableActivate = new EventEmitter();
         this.selectable = false;
         this._selectionType = SelectionType.multiClick;
         this.selected = [];
         this.selectionChange = new EventEmitter();
+        // Infinite scroll configuration
+        this.infiniteScroll = false;
+        this.isLoading = false;
+        this.scrollThreshold = 10;
+        this.loadMore = new EventEmitter();
         this.trackByFn = (_, item) => item.name;
         // Signal for actions column width
         this._actionsColumnWidth = signal(DEFAULT_ACTIONS_COLUMN_WIDTH);
+        // Infinite scroll: debounced load more subject
+        this.loadMoreSubject = new Subject();
+        this.loadMoreSubscription = this.loadMoreSubject
+            .pipe(debounceTime$1(100), distinctUntilChanged$1())
+            .subscribe(() => this.triggerLoadMore());
         this.columnWidths = computed(() => {
             return this.propList.toArray().map(prop => prop.columnWidth);
         });
@@ -1096,14 +1128,46 @@ class ExtensibleTableComponent {
         this.selected.push(...selected);
         this.selectionChange.emit(selected);
     }
+    onScroll(scrollEvent) {
+        if (!this.shouldHandleScroll()) {
+            return;
+        }
+        const target = scrollEvent.target;
+        if (!target) {
+            return;
+        }
+        if (this.isNearScrollBottom(target)) {
+            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();
+    }
+    getTableHeight() {
+        if (!this.infiniteScroll)
+            return 'auto';
+        return this.tableHeight ? `${this.tableHeight}px` : 'auto';
+    }
     ngAfterViewInit() {
-        this.list?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
-            this.data = [];
-            this.cdr.markForCheck();
-        });
+        if (!this.infiniteScroll) {
+            this.list?.requestStatus$?.pipe(filter(status => status === 'loading')).subscribe(() => {
+                this.data = [];
+                this.cdr.markForCheck();
+            });
+        }
+    }
+    ngOnDestroy() {
+        this.loadMoreSubscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ExtensibleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate", selectable: "selectable", selectionType: "selectionType", selected: "selected" }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "<ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  [selectionType]=\"selectable ? _selectionType : undefined\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n  (select)=\"onSelect($event)\"\r\n  [selected]=\"selected\"\r\n>\r\n@if(selectable) {\r\n  <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n  \r\n    <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n      let-selectFn=\"selectFn\">\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n          (change)=\"selectFn(!allRowsSelected)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n    <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n      let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n      @if(_selectionType === 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n  </ngx-datatable-column>\r\n  }\r\n  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n    <ngx-datatable-column\r\n      [name]=\"actionsText | abpLocalization\"\r\n      [maxWidth]=\"_actionsColumnWidth() ?? undefined\"\r\n      [width]=\"_actionsColumnWidth() ?? 200\"\r\n      [canAutoResize]=\"!_actionsColumnWidth()\"\r\n      [sortable]=\"false\"\r\n    >\r\n      <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n        ></ng-container>\r\n        <ng-template #gridActions>\r\n          @if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n  @for (prop of propList; track prop.name; let i = $index) {\r\n    <ngx-datatable-column\r\n      *abpVisible=\"prop.columnVisible(getInjected)\"\r\n      [width]=\"columnWidths[i] ?? 200\"\r\n      [canAutoResize]=\"!columnWidths[i]\"\r\n      [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\r\n      <ng-template ngx-datatable-header-template let-column=\"column\">\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          >\r\n            {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        } @else {\r\n          {{ column.name }}\r\n        }\r\n      </ng-template>\r\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n        <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n          <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n            @if (!row['_' + prop.name].component) {\r\n              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              } @else {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async)\r\n                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              <ng-container\r\n                *ngComponentOutlet=\"\r\n                  row['_' + prop.name].component;\r\n                  injector: row['_' + prop.name].injector\r\n                \"\r\n              ></ng-container>\r\n            }\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n</ngx-datatable>\r\n", dependencies: [{ kind: "directive", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: ["abpVisible"] }, { kind: "ngmodule", type: NgxDatatableModule }, { kind: "component", type: i1$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i1$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i1$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i1$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i2$1.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: UtcToLocalPipe, name: "abpUtcToLocal" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate", selectable: "selectable", selectionType: "selectionType", selected: "selected", infiniteScroll: "infiniteScroll", isLoading: "isLoading", scrollThreshold: "scrollThreshold", tableHeight: "tableHeight" }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange", loadMore: "loadMore" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "@if (isBrowser) {\r\n  <ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  [selectionType]=\"selectable ? _selectionType : undefined\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n  (select)=\"onSelect($event)\"\r\n  [selected]=\"selected\"\r\n  (scroll)=\"onScroll($event)\"\r\n  [scrollbarV]=\"infiniteScroll\"\r\n  [style.height]=\"getTableHeight()\"\r\n  [loadingIndicator]=\"infiniteScroll && isLoading\"\r\n  [footerHeight]=\"infiniteScroll ? false : 50\"\r\n>\r\n@if(selectable) {\r\n  <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n\r\n    <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n      let-selectFn=\"selectFn\">\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n          (change)=\"selectFn(!allRowsSelected)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n      let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n      @if(_selectionType === 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n  </ngx-datatable-column>\r\n  }\r\n  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n    <ngx-datatable-column\r\n      [name]=\"actionsText | abpLocalization\"\r\n      [maxWidth]=\"_actionsColumnWidth() ?? undefined\"\r\n      [width]=\"_actionsColumnWidth() ?? 200\"\r\n      [canAutoResize]=\"!_actionsColumnWidth()\"\r\n      [sortable]=\"false\"\r\n    >\r\n      <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n        ></ng-container>\r\n        <ng-template #gridActions>\r\n          @if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n  @for (prop of propList; track prop.name; let i = $index) {\r\n    <ngx-datatable-column\r\n      *abpVisible=\"prop.columnVisible(getInjected)\"\r\n      [width]=\"columnWidths[i] ?? 200\"\r\n      [canAutoResize]=\"!columnWidths[i]\"\r\n      [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\r\n      <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n        @if (prop.tooltip) {\r\n          <span\r\n            [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n            [placement]=\"prop.tooltip.placement || 'auto'\"\r\n            container=\"body\"\r\n            [class.pointer]=\"prop.sortable\"\r\n            (click)=\"prop.sortable && sortFn(column)\"\r\n          >\r\n            {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        } @else {\r\n          <span\r\n            [class.pointer]=\"prop.sortable\"\r\n            (click)=\"prop.sortable && sortFn(column)\"\r\n          >\r\n            {{ column.name }}\r\n          </span>\r\n        }\r\n      </ng-template>\r\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n        <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n          <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n            @if (!row['_' + prop.name].component) {\r\n              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              } @else {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async)\r\n                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              <ng-container\r\n                *ngComponentOutlet=\"\r\n                  row['_' + prop.name].component;\r\n                  injector: row['_' + prop.name].injector\r\n                \"\r\n              ></ng-container>\r\n            }\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n</ngx-datatable>\r\n}\r\n", dependencies: [{ kind: "directive", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: ["abpVisible"] }, { kind: "ngmodule", type: NgxDatatableModule }, { kind: "component", type: i1$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i1$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i1$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i1$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: UtcToLocalPipe, name: "abpUtcToLocal" }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
             type: Component,
@@ -1115,12 +1179,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                         NgxDatatableDefaultDirective,
                         NgxDatatableListDirective,
                         PermissionDirective,
-                        LocalizationModule,
+                        LocalizationPipe,
                         UtcToLocalPipe,
                         AsyncPipe,
                         NgTemplateOutlet,
                         NgComponentOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  [selectionType]=\"selectable ? _selectionType : undefined\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n  (select)=\"onSelect($event)\"\r\n  [selected]=\"selected\"\r\n>\r\n@if(selectable) {\r\n  <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n  \r\n    <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n      let-selectFn=\"selectFn\">\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n          (change)=\"selectFn(!allRowsSelected)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n    <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n      let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n      @if(_selectionType === 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n  \r\n  </ngx-datatable-column>\r\n  }\r\n  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n    <ngx-datatable-column\r\n      [name]=\"actionsText | abpLocalization\"\r\n      [maxWidth]=\"_actionsColumnWidth() ?? undefined\"\r\n      [width]=\"_actionsColumnWidth() ?? 200\"\r\n      [canAutoResize]=\"!_actionsColumnWidth()\"\r\n      [sortable]=\"false\"\r\n    >\r\n      <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n        ></ng-container>\r\n        <ng-template #gridActions>\r\n          @if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n  @for (prop of propList; track prop.name; let i = $index) {\r\n    <ngx-datatable-column\r\n      *abpVisible=\"prop.columnVisible(getInjected)\"\r\n      [width]=\"columnWidths[i] ?? 200\"\r\n      [canAutoResize]=\"!columnWidths[i]\"\r\n      [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\r\n      <ng-template ngx-datatable-header-template let-column=\"column\">\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          >\r\n            {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        } @else {\r\n          {{ column.name }}\r\n        }\r\n      </ng-template>\r\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n        <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n          <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n            @if (!row['_' + prop.name].component) {\r\n              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              } @else {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async)\r\n                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              <ng-container\r\n                *ngComponentOutlet=\"\r\n                  row['_' + prop.name].component;\r\n                  injector: row['_' + prop.name].injector\r\n                \"\r\n              ></ng-container>\r\n            }\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n</ngx-datatable>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isBrowser) {\r\n  <ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  [selectionType]=\"selectable ? _selectionType : undefined\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n  (select)=\"onSelect($event)\"\r\n  [selected]=\"selected\"\r\n  (scroll)=\"onScroll($event)\"\r\n  [scrollbarV]=\"infiniteScroll\"\r\n  [style.height]=\"getTableHeight()\"\r\n  [loadingIndicator]=\"infiniteScroll && isLoading\"\r\n  [footerHeight]=\"infiniteScroll ? false : 50\"\r\n>\r\n@if(selectable) {\r\n  <ngx-datatable-column [width]=\"50\" [sortable]=\"false\" [canAutoResize]=\"false\" [draggable]=\"false\" [resizeable]=\"false\">\r\n\r\n    <ng-template ngx-datatable-header-template let-value=\"value\" let-allRowsSelected=\"allRowsSelected\"\r\n      let-selectFn=\"selectFn\">\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"form-check\">\r\n        <input class=\"form-check-input table-check\" type=\"checkbox\" [checked]=\"allRowsSelected\"\r\n          (change)=\"selectFn(!allRowsSelected)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n    <ng-template ngx-datatable-cell-template let-value=\"value\" let-row=\"row\" let-isSelected=\"isSelected\"\r\n      let-onCheckboxChangeFn=\"onCheckboxChangeFn\">\r\n      @if(_selectionType === 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"radio\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n      @if (_selectionType !== 'single') {\r\n      <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n        <input class=\"form-check-input\" type=\"checkbox\" [checked]=\"isSelected\" (change)=\"onCheckboxChangeFn($event)\" />\r\n      </div>\r\n      }\r\n    </ng-template>\r\n\r\n  </ngx-datatable-column>\r\n  }\r\n  @if (actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n    <ngx-datatable-column\r\n      [name]=\"actionsText | abpLocalization\"\r\n      [maxWidth]=\"_actionsColumnWidth() ?? undefined\"\r\n      [width]=\"_actionsColumnWidth() ?? 200\"\r\n      [canAutoResize]=\"!_actionsColumnWidth()\"\r\n      [sortable]=\"false\"\r\n    >\r\n      <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n        <ng-container\r\n          *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\r\n        ></ng-container>\r\n        <ng-template #gridActions>\r\n          @if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n  @for (prop of propList; track prop.name; let i = $index) {\r\n    <ngx-datatable-column\r\n      *abpVisible=\"prop.columnVisible(getInjected)\"\r\n      [width]=\"columnWidths[i] ?? 200\"\r\n      [canAutoResize]=\"!columnWidths[i]\"\r\n      [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\r\n      <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n        @if (prop.tooltip) {\r\n          <span\r\n            [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n            [placement]=\"prop.tooltip.placement || 'auto'\"\r\n            container=\"body\"\r\n            [class.pointer]=\"prop.sortable\"\r\n            (click)=\"prop.sortable && sortFn(column)\"\r\n          >\r\n            {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n          </span>\r\n        } @else {\r\n          <span\r\n            [class.pointer]=\"prop.sortable\"\r\n            (click)=\"prop.sortable && sortFn(column)\"\r\n          >\r\n            {{ column.name }}\r\n          </span>\r\n        }\r\n      </ng-template>\r\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\r\n        <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n          <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n            @if (!row['_' + prop.name].component) {\r\n              @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type)\r\n                    : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal:prop.type) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              } @else {\r\n                <div\r\n                  [innerHTML]=\"\r\n                  !prop.isExtra\r\n                    ? (row['_' + prop.name]?.value | async)\r\n                    : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                \"\r\n                  (click)=\"\r\n                  prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\r\n                \"\r\n                  [ngClass]=\"entityPropTypeClasses[prop.type]\"\r\n                  [class.pointer]=\"prop.action\"\r\n                ></div>\r\n              }\r\n            } @else {\r\n              <ng-container\r\n                *ngComponentOutlet=\"\r\n                  row['_' + prop.name].component;\r\n                  injector: row['_' + prop.name].injector\r\n                \"\r\n              ></ng-container>\r\n            }\r\n          </ng-container>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  }\r\n</ngx-datatable>\r\n}\r\n" }]
         }], ctorParameters: () => [], propDecorators: { actionsText: [{
                 type: Input
             }], data: [{
@@ -1143,6 +1207,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                 type: Input
             }], selectionChange: [{
                 type: Output
+            }], infiniteScroll: [{
+                type: Input
+            }], isLoading: [{
+                type: Input
+            }], scrollThreshold: [{
+                type: Input
+            }], loadMore: [{
+                type: Output
+            }], tableHeight: [{
+                type: Input
             }] } });
 
 class CreateInjectorPipe {
@@ -1179,32 +1253,33 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
         }] });
 
 class PageToolbarComponent extends AbstractActionsComponent {
-    constructor(injector) {
-        super(injector);
-        this.injector = injector;
+    constructor() {
+        const injector = inject(Injector);
+        super();
         this.defaultBtnClass = 'btn btn-sm btn-primary';
         this.getData = () => this.data;
         this.trackByFn = (_, item) => item.action || item.component;
+        this.injector = injector;
     }
     asToolbarAction(value) {
         return {
             value: value,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PageToolbarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PageToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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\r\n        *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n      ></ng-container>\r\n\r\n      }@else {\r\n         @if (asToolbarAction(action).value; as toolbarAction ) {\r\n          <button\r\n            (click)=\"action.action(data)\"\r\n            type=\"button\"\r\n            [ngClass]=\"toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass\"\r\n            class=\"d-inline-flex align-items-center gap-1\"\r\n          >\r\n            <i [ngClass]=\"toolbarAction?.icon\" [class.me-1]=\"toolbarAction?.icon\"></i>\r\n            {{ toolbarAction?.text | abpLocalization }}\r\n          </button>\r\n        } \r\n      }\r\n    </ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n", dependencies: [{ kind: "pipe", type: CreateInjectorPipe, name: "createInjector" }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i2$1.LocalizationPipe, name: "abpLocalization" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["abpPageToolbar"], usesInheritance: true, ngImport: i0, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  @for (action of actionList; track action.component || action.action; let last = $last) {\r\n  <div class=\"col-auto px-0 pt-0\" [class.pe-0]=\"last\">\r\n    @if (action.visible(data)) {\r\n    <ng-container *abpPermission=\"action.permission; runChangeDetection: false\">\r\n      @if (action.component; as component) {\r\n      <ng-container\r\n        *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n      ></ng-container>\r\n\r\n      }@else {\r\n         @if (asToolbarAction(action).value; as toolbarAction ) {\r\n          <button\r\n            (click)=\"action.action(data)\"\r\n            type=\"button\"\r\n            [ngClass]=\"toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass\"\r\n            class=\"d-inline-flex align-items-center gap-1\"\r\n          >\r\n            <i [ngClass]=\"toolbarAction?.icon\" [class.me-1]=\"toolbarAction?.icon\"></i>\r\n            {{ toolbarAction?.text | abpLocalization }}\r\n          </button>\r\n        } \r\n      }\r\n    </ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n", dependencies: [{ kind: "pipe", type: CreateInjectorPipe, name: "createInjector" }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"], exportAs: ["ngComponentOutlet"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: PageToolbarComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpPageToolbar', selector: 'abp-page-toolbar', imports: [
                         CreateInjectorPipe,
                         PermissionDirective,
-                        LocalizationModule,
+                        LocalizationPipe,
                         NgClass,
                         NgComponentOutlet,
                     ], providers: [
@@ -1213,7 +1288,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             useValue: 'toolbarActions',
                         },
                     ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  @for (action of actionList; track action.component || action.action; let last = $last) {\r\n  <div class=\"col-auto px-0 pt-0\" [class.pe-0]=\"last\">\r\n    @if (action.visible(data)) {\r\n    <ng-container *abpPermission=\"action.permission; runChangeDetection: false\">\r\n      @if (action.component; as component) {\r\n      <ng-container\r\n        *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n      ></ng-container>\r\n\r\n      }@else {\r\n         @if (asToolbarAction(action).value; as toolbarAction ) {\r\n          <button\r\n            (click)=\"action.action(data)\"\r\n            type=\"button\"\r\n            [ngClass]=\"toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass\"\r\n            class=\"d-inline-flex align-items-center gap-1\"\r\n          >\r\n            <i [ngClass]=\"toolbarAction?.icon\" [class.me-1]=\"toolbarAction?.icon\"></i>\r\n            {{ toolbarAction?.text | abpLocalization }}\r\n          </button>\r\n        } \r\n      }\r\n    </ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</div>\r\n\r\n" }]
-        }], ctorParameters: () => [{ type: i0.Injector }] });
+        }], ctorParameters: () => [] });
 
 var objectExtensions = /*#__PURE__*/Object.freeze({
     __proto__: null
@@ -1560,7 +1635,6 @@ class ExtensibleModule {
             NgbTooltipModule, ExtensibleDateTimePickerComponent,
             ExtensibleFormPropComponent,
             GridActionsComponent,
-            PageToolbarComponent,
             ExtensibleFormComponent,
             ExtensibleTableComponent,
             ExtensibleFormMultiselectComponent] }); }