@abp/ng.theme.shared 6.0.0-rc.4 → 6.0.0

package/fesm2020/abp-ng.theme.shared-extensions.mjs

@@ -1,20 +1,20 @@
 import * as i0 from '@angular/core';
 import { Injectable, Optional, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, InjectionToken, Directive, Host, Injector, Inject, ViewChildren, LOCALE_ID, Pipe, NgModule } from '@angular/core';
-import * as i5 from '@angular/common';
+import * as i1$1 from '@angular/common';
 import { formatDate } from '@angular/common';
-import * as i2 from '@ng-bootstrap/ng-bootstrap';
+import * as i4$1 from '@ng-bootstrap/ng-bootstrap';
 import { NgbDateAdapter, NgbTimeAdapter, NgbInputDatepicker, NgbTimepicker, NgbDatepickerModule, NgbDropdownModule, NgbTimepickerModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
-import * as i2$1 from '@angular/forms';
-import { ControlContainer, FormGroupDirective, Validators, FormGroup, FormControl } from '@angular/forms';
+import * as i2 from '@angular/forms';
+import { ControlContainer, FormGroupDirective, Validators, UntypedFormGroup, UntypedFormControl } from '@angular/forms';
 import { LinkedList } from '@abp/utils';
-import * as i6 from '@ngx-validate/core';
+import * as i4 from '@ngx-validate/core';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import * as i1 from '@abp/ng.core';
 import { RestService, AbpValidators, escapeHtmlChars, PermissionService, getShortDateShortTimeFormat, getShortTimeFormat, getShortDateFormat, CoreModule, LocalizationService, createLocalizationPipeKeyGenerator } from '@abp/ng.core';
 import { of, merge, pipe, zip } from 'rxjs';
 import { map, debounceTime, distinctUntilChanged, switchMap, filter, take } from 'rxjs/operators';
-import * as i2$2 from '@swimlane/ngx-datatable';
-import * as i4 from '@abp/ng.theme.shared';
+import * as i3 from '@swimlane/ngx-datatable';
+import * as i4$2 from '@abp/ng.theme.shared';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 
 class DateTimeAdapter {
@@ -53,9 +53,9 @@ class DateTimeAdapter {
         return new Date(date).toISOString();
     }
 }
-DateTimeAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: DateTimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DateTimeAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: DateTimeAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: DateTimeAdapter, decorators: [{
+DateTimeAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateTimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DateTimeAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateTimeAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateTimeAdapter, decorators: [{
             type: Injectable
         }] });
 
@@ -90,9 +90,9 @@ class DateAdapter extends NgbDateAdapter {
         return new Date(dateUtc.getTime() + Math.abs(dateUtc.getTimezoneOffset() * 60000));
     }
 }
-DateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: DateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-DateAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: DateAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: DateAdapter, decorators: [{
+DateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+DateAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateAdapter, decorators: [{
             type: Injectable
         }] });
 
@@ -119,9 +119,9 @@ class TimeAdapter extends NgbTimeAdapter {
         return formattedDate;
     }
 }
-TimeAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: TimeAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-TimeAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: TimeAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: TimeAdapter, decorators: [{
+TimeAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: TimeAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+TimeAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: TimeAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: TimeAdapter, decorators: [{
             type: Injectable
         }] });
 function isTimeStr(value) {
@@ -187,6 +187,26 @@ class FormProps extends Props {
         this._ctor = FormPropList;
     }
 }
+class GroupedFormPropList {
+    constructor() {
+        this.items = [];
+    }
+    addItem(item) {
+        const groupName = item.group?.name;
+        let group = this.items.find(i => i.group?.name === groupName);
+        if (group) {
+            group.formPropList.addTail(item);
+        }
+        else {
+            group = {
+                formPropList: new FormPropList(),
+                group: item.group,
+            };
+            group.formPropList.addHead(item);
+            this.items.push(group);
+        }
+    }
+}
 class CreateFormPropsFactory extends PropsFactory {
     constructor() {
         super(...arguments);
@@ -202,6 +222,8 @@ class EditFormPropsFactory extends PropsFactory {
 class FormProp extends Prop {
     constructor(options) {
         super(options.type, options.name, options.displayName, options.permission, options.visible, options.isExtra, options.template, options.className);
+        this.group = options.group;
+        this.className = options.className;
         this.asyncValidators = options.asyncValidators || (_ => []);
         this.validators = options.validators || (_ => []);
         this.disabled = options.disabled || (_ => false);
@@ -246,8 +268,8 @@ class DateTimePickerComponent {
         this.time.writeValue(datestr);
     }
 }
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: DateTimePickerComponent, selector: "abp-date-time-picker", inputs: { prop: "prop", meridian: "meridian" }, viewQueries: [{ propertyName: "date", first: true, predicate: NgbInputDatepicker, descendants: true }, { propertyName: "time", first: true, predicate: NgbTimepicker, descendants: true }], exportAs: ["abpDateTimePicker"], ngImport: i0, template: `
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: DateTimePickerComponent, selector: "abp-date-time-picker", inputs: { prop: "prop", meridian: "meridian" }, viewQueries: [{ propertyName: "date", first: true, predicate: NgbInputDatepicker, descendants: true }, { propertyName: "time", first: true, predicate: NgbTimepicker, descendants: true }], exportAs: ["abpDateTimePicker"], ngImport: i0, template: `
     <input
       [id]="prop.id"
       [formControlName]="prop.name"
@@ -265,7 +287,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
       (ngModelChange)="setDate($event)"
       [meridian]="meridian"
     ></ngb-timepicker>
-  `, isInline: true, components: [{ type: i2.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }], directives: [{ type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }], viewProviders: [
+  `, isInline: true, dependencies: [{ 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: "directive", type: i4.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }], viewProviders: [
         {
             provide: ControlContainer,
             useFactory: selfFactory,
@@ -280,7 +302,7 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0"
             useClass: DateTimeAdapter,
         },
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'abpDateTimePicker',
@@ -371,9 +393,9 @@ function createTypeaheadOptions(lookup) {
 }
 function getTypeaheadType(lookup, name) {
     return Boolean(lookup.url)
-        ? "typeahead" /* Typeahead */
+        ? "typeahead" /* ePropType.Typeahead */
         : name.endsWith(TYPEAHEAD_TEXT_SUFFIX)
-            ? "hidden" /* Hidden */
+            ? "hidden" /* ePropType.Hidden */
             : undefined;
 }
 function createTypeaheadDisplayNameGenerator(displayNameGeneratorFn, properties) {
@@ -407,14 +429,14 @@ class DisabledDirective {
         }
     }
 }
-DisabledDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: DisabledDirective, deps: [{ token: i2$1.NgControl, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-DisabledDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: DisabledDirective, selector: "[abpDisabled]", inputs: { abpDisabled: "abpDisabled" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: DisabledDirective, decorators: [{
+DisabledDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DisabledDirective, deps: [{ token: i2.NgControl, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DisabledDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: DisabledDirective, selector: "[abpDisabled]", inputs: { abpDisabled: "abpDisabled" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: DisabledDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[abpDisabled]',
                 }]
-        }], ctorParameters: function () { return [{ type: i2$1.NgControl, decorators: [{
+        }], ctorParameters: function () { return [{ type: i2.NgControl, decorators: [{
                     type: Host
                 }] }]; }, propDecorators: { abpDisabled: [{
                 type: Input
@@ -427,6 +449,7 @@ class ExtensibleFormPropComponent {
         this.configState = configState;
         this.injector = injector;
         this.asterisk = '';
+        this.containerClassName = 'mb-3 form-group';
         this.options$ = of([]);
         this.validators = [];
         this.disabledFn = (data) => false;
@@ -476,21 +499,21 @@ class ExtensibleFormPropComponent {
             return 'template';
         }
         switch (prop.type) {
-            case "boolean" /* Boolean */:
+            case "boolean" /* ePropType.Boolean */:
                 return 'checkbox';
-            case "date" /* Date */:
+            case "date" /* ePropType.Date */:
                 return 'date';
-            case "datetime" /* DateTime */:
+            case "datetime" /* ePropType.DateTime */:
                 return 'dateTime';
-            case "hidden" /* Hidden */:
+            case "hidden" /* ePropType.Hidden */:
                 return 'hidden';
-            case "multiselect" /* MultiSelect */:
+            case "multiselect" /* ePropType.MultiSelect */:
                 return 'multiselect';
-            case "text" /* Text */:
+            case "text" /* ePropType.Text */:
                 return 'textarea';
-            case "time" /* Time */:
+            case "time" /* ePropType.Time */:
                 return 'time';
-            case "typeahead" /* Typeahead */:
+            case "typeahead" /* ePropType.Typeahead */:
                 return 'typeahead';
             default:
                 return prop.options ? 'select' : 'input';
@@ -498,16 +521,16 @@ class ExtensibleFormPropComponent {
     }
     getType(prop) {
         switch (prop.type) {
-            case "date" /* Date */:
-            case "string" /* String */:
+            case "date" /* ePropType.Date */:
+            case "string" /* ePropType.String */:
                 return 'text';
-            case "boolean" /* Boolean */:
+            case "boolean" /* ePropType.Boolean */:
                 return 'checkbox';
-            case "number" /* Number */:
+            case "number" /* ePropType.Number */:
                 return 'number';
-            case "email" /* Email */:
+            case "email" /* ePropType.Email */:
                 return 'email';
-            case "password" /* Password */:
+            case "password" /* ePropType.Password */:
                 return 'password';
             default:
                 return 'hidden';
@@ -515,7 +538,7 @@ class ExtensibleFormPropComponent {
     }
     ngOnChanges({ prop, data }) {
         const currentProp = prop?.currentValue;
-        const { options, readonly, disabled, validators, template } = currentProp || {};
+        const { options, readonly, disabled, validators, className, template } = currentProp || {};
         if (template) {
             this.injectorForCustomComponent = Injector.create({
                 providers: [
@@ -543,13 +566,16 @@ class ExtensibleFormPropComponent {
             this.validators = validators(this.data);
             this.setAsterisk();
         }
+        if (className !== undefined) {
+            this.containerClassName = className;
+        }
         const [keyControl, valueControl] = this.getTypeaheadControls();
         if (keyControl && valueControl)
             this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
     }
 }
-ExtensibleFormPropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensibleFormPropComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i1.ConfigStateService }, { token: i2$1.FormGroupDirective }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ExtensibleFormPropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first" }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"getComponent(prop)\"\r\n              *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"prop.template;injector:injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div\r\n    class=\"mb-3 form-group\"\r\n  >\r\n\r\n    <ng-template ngSwitchCase=\"input\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"hidden\">\r\n      <input [formControlName]=\"prop.name\" type=\"hidden\"/>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"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        ></ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"select\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"multiselect\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        multiple=\"multiple\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"typeahead\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"date\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"time\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"dateTime\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"textarea\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\" x\r\n  >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label\r\n  >\r\n</ng-template>\r\n", components: [{ type: i2.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { type: DateTimePickerComponent, selector: "abp-date-time-picker", inputs: ["prop", "meridian"], exportAs: ["abpDateTimePicker"] }], directives: [{ type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { type: i6.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i6.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { type: i2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i5.AsyncPipe, "abpLocalization": i1.LocalizationPipe }, viewProviders: [
+ExtensibleFormPropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ExtensibleFormPropComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i1.ConfigStateService }, { token: i2.FormGroupDirective }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleFormPropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first" }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container [ngSwitch]=\"getComponent(prop)\"\r\n\r\n              *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"prop.template;injector:injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div\r\n    [ngClass]=\"containerClassName\"\r\n    class=\"mb-3 form-group\"\r\n  >\r\n    <ng-template ngSwitchCase=\"input\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"hidden\">\r\n      <input [formControlName]=\"prop.name\" type=\"hidden\"/>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"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        ></ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"select\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"multiselect\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        multiple=\"multiple\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"typeahead\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"date\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"time\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"dateTime\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"textarea\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\" x\r\n  >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label\r\n  >\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1$1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { 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.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: i4.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i4.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i4.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { kind: "directive", type: i4$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: DateTimePickerComponent, selector: "abp-date-time-picker", inputs: ["prop", "meridian"], exportAs: ["abpDateTimePicker"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], viewProviders: [
         {
             provide: ControlContainer,
             useFactory: selfFactory,
@@ -558,7 +584,7 @@ ExtensibleFormPropComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.
         { provide: NgbDateAdapter, useClass: DateAdapter },
         { provide: NgbTimeAdapter, useClass: TimeAdapter },
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensibleFormPropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ExtensibleFormPropComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-extensible-form-prop', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         {
@@ -568,8 +594,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
                         },
                         { provide: NgbDateAdapter, useClass: DateAdapter },
                         { provide: NgbTimeAdapter, useClass: TimeAdapter },
-                    ], template: "<ng-container [ngSwitch]=\"getComponent(prop)\"\r\n              *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"prop.template;injector:injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div\r\n    class=\"mb-3 form-group\"\r\n  >\r\n\r\n    <ng-template ngSwitchCase=\"input\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"hidden\">\r\n      <input [formControlName]=\"prop.name\" type=\"hidden\"/>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"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        ></ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"select\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"multiselect\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        multiple=\"multiple\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"typeahead\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"date\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"time\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"dateTime\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"textarea\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\" x\r\n  >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label\r\n  >\r\n</ng-template>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TrackByService }, { type: i1.ConfigStateService }, { type: i2$1.FormGroupDirective }, { type: i0.Injector }]; }, propDecorators: { data: [{
+                    ], template: "<ng-container [ngSwitch]=\"getComponent(prop)\"\r\n\r\n              *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container\r\n      *ngComponentOutlet=\"prop.template;injector:injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div\r\n    [ngClass]=\"containerClassName\"\r\n    class=\"mb-3 form-group\"\r\n  >\r\n    <ng-template ngSwitchCase=\"input\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"hidden\">\r\n      <input [formControlName]=\"prop.name\" type=\"hidden\"/>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"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        ></ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"select\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"multiselect\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        multiple=\"multiple\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"typeahead\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"date\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"time\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"dateTime\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"textarea\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\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    </ng-template>\r\n  </div>\r\n\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\" x\r\n  >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label\r\n  >\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TrackByService }, { type: i1.ConfigStateService }, { type: i2.FormGroupDirective }, { type: i0.Injector }]; }, propDecorators: { data: [{
                 type: Input
             }], prop: [{
                 type: Input
@@ -743,9 +769,9 @@ class ExtensionsService {
         this.editFormProps = new EditFormPropsFactory();
     }
 }
-ExtensionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ExtensionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensionsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensionsService, decorators: [{
+ExtensionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ExtensionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ExtensionsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ExtensionsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -771,9 +797,9 @@ class PropDataDirective extends PropData {
         this.vcRef.clear();
     }
 }
-PropDataDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: PropDataDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-PropDataDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: PropDataDirective, 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: "13.3.6", ngImport: i0, type: PropDataDirective, decorators: [{
+PropDataDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: PropDataDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+PropDataDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: PropDataDirective, 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: "14.2.1", ngImport: i0, type: PropDataDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'abpPropData',
@@ -801,9 +827,17 @@ class ExtensibleFormComponent {
     }
     set selectedRecord(record) {
         const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit';
-        this.propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
+        const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
+        this.groupedPropList = this.createGroupedList(propList);
         this.record = record;
     }
+    createGroupedList(propList) {
+        const groupedFormPropList = new GroupedFormPropList();
+        propList.forEach(item => {
+            groupedFormPropList.addItem(item.value);
+        });
+        return groupedFormPropList;
+    }
     get form() {
         return (this.container ? this.container.control : { controls: {} });
     }
@@ -811,15 +845,15 @@ class ExtensibleFormComponent {
         return (this.form.controls.extraProperties || { controls: {} });
     }
 }
-ExtensibleFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensibleFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i2$1.ControlContainer }, { token: ExtensionsService }, { token: EXTENSIONS_IDENTIFIER }], target: i0.ɵɵFactoryTarget.Component });
-ExtensibleFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: { selectedRecord: "selectedRecord" }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "<ng-container *ngIf=\"form\">\r\n  <ng-container *abpPropData=\"let data; fromList: propList; withRecord: record\">\r\n    <ng-container *ngFor=\"let prop of propList; let first = first; trackBy: track.by('name')\">\r\n      <ng-container *ngIf=\"prop.visible(data)\">\r\n        <ng-container\r\n          [formGroupName]=\"extraPropertiesKey\"\r\n          *ngIf=\"extraProperties.controls[prop.name]; else tempDefault\"\r\n        >\r\n          <abp-extensible-form-prop [class]=\"prop.className\" [prop]=\"prop\" [data]=\"data\"></abp-extensible-form-prop>\r\n        </ng-container>\r\n\r\n        <ng-template #tempDefault>\r\n          <abp-extensible-form-prop [class]=\"prop.className\"\r\n            *ngIf=\"form.get(prop.name)\"\r\n            [prop]=\"prop\"\r\n            [data]=\"data\"\r\n            [first]=\"first\"\r\n          ></abp-extensible-form-prop>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n", components: [{ type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first"] }], directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i6.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }], viewProviders: [
+ExtensibleFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ExtensibleFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i2.ControlContainer }, { token: ExtensionsService }, { token: EXTENSIONS_IDENTIFIER }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: { selectedRecord: "selectedRecord" }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "<ng-container *ngIf=\"form\">\r\n\r\n  <ng-container *ngFor=\"let groupedProp of groupedPropList.items\">\r\n    <ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record\">\r\n\r\n      <div *ngIf=\"groupedProp.group?.className; else withoutClassName\"\r\n           [class]=\"groupedProp.group?.className\" [attr.data-name]=\"groupedProp.group?.className\">\r\n        <ng-container [ngTemplateOutlet]=\"propListTemplate\" [ngTemplateOutletContext]=\"{groupedProp:groupedProp,data:data}\">\r\n        </ng-container>\r\n      </div>\r\n\r\n      <ng-template #withoutClassName>\r\n        <ng-container [ngTemplateOutlet]=\"propListTemplate\" [ngTemplateOutletContext]=\"{groupedProp:groupedProp,data:data}\">\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n  </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" #propListTemplate>\r\n  <ng-container *ngFor=\"let prop of groupedProp.formPropList; let first = first; trackBy: track.by('name')\">\r\n    <ng-container *ngIf=\"prop.visible(data)\">\r\n      <ng-container\r\n        [formGroupName]=\"extraPropertiesKey\"\r\n        *ngIf=\"extraProperties.controls[prop.name]; else tempDefault\"\r\n      >\r\n        <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\"\r\n                                  [class]=\"prop.className\">\r\n        </abp-extensible-form-prop>\r\n      </ng-container>\r\n\r\n      <ng-template #tempDefault>\r\n        <abp-extensible-form-prop\r\n          [class]=\"prop.className\"\r\n          *ngIf=\"form.get(prop.name)\"\r\n          [prop]=\"prop\"\r\n          [data]=\"data\"\r\n          [first]=\"first\"\r\n        ></abp-extensible-form-prop>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i4.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "component", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first"] }, { kind: "directive", type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }], viewProviders: [
         {
             provide: ControlContainer,
             useFactory: selfFactory,
             deps: [[new Optional(), new SkipSelf(), ControlContainer]],
         },
     ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpExtensibleForm', selector: 'abp-extensible-form', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         {
@@ -827,8 +861,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
                             useFactory: selfFactory,
                             deps: [[new Optional(), new SkipSelf(), ControlContainer]],
                         },
-                    ], template: "<ng-container *ngIf=\"form\">\r\n  <ng-container *abpPropData=\"let data; fromList: propList; withRecord: record\">\r\n    <ng-container *ngFor=\"let prop of propList; let first = first; trackBy: track.by('name')\">\r\n      <ng-container *ngIf=\"prop.visible(data)\">\r\n        <ng-container\r\n          [formGroupName]=\"extraPropertiesKey\"\r\n          *ngIf=\"extraProperties.controls[prop.name]; else tempDefault\"\r\n        >\r\n          <abp-extensible-form-prop [class]=\"prop.className\" [prop]=\"prop\" [data]=\"data\"></abp-extensible-form-prop>\r\n        </ng-container>\r\n\r\n        <ng-template #tempDefault>\r\n          <abp-extensible-form-prop [class]=\"prop.className\"\r\n            *ngIf=\"form.get(prop.name)\"\r\n            [prop]=\"prop\"\r\n            [data]=\"data\"\r\n            [first]=\"first\"\r\n          ></abp-extensible-form-prop>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-container>\r\n" }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TrackByService }, { type: i2$1.ControlContainer }, { type: ExtensionsService }, { type: undefined, decorators: [{
+                    ], template: "<ng-container *ngIf=\"form\">\r\n\r\n  <ng-container *ngFor=\"let groupedProp of groupedPropList.items\">\r\n    <ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record\">\r\n\r\n      <div *ngIf=\"groupedProp.group?.className; else withoutClassName\"\r\n           [class]=\"groupedProp.group?.className\" [attr.data-name]=\"groupedProp.group?.className\">\r\n        <ng-container [ngTemplateOutlet]=\"propListTemplate\" [ngTemplateOutletContext]=\"{groupedProp:groupedProp,data:data}\">\r\n        </ng-container>\r\n      </div>\r\n\r\n      <ng-template #withoutClassName>\r\n        <ng-container [ngTemplateOutlet]=\"propListTemplate\" [ngTemplateOutletContext]=\"{groupedProp:groupedProp,data:data}\">\r\n        </ng-container>\r\n      </ng-template>\r\n    </ng-container>\r\n\r\n  </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" #propListTemplate>\r\n  <ng-container *ngFor=\"let prop of groupedProp.formPropList; let first = first; trackBy: track.by('name')\">\r\n    <ng-container *ngIf=\"prop.visible(data)\">\r\n      <ng-container\r\n        [formGroupName]=\"extraPropertiesKey\"\r\n        *ngIf=\"extraProperties.controls[prop.name]; else tempDefault\"\r\n      >\r\n        <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\"\r\n                                  [class]=\"prop.className\">\r\n        </abp-extensible-form-prop>\r\n      </ng-container>\r\n\r\n      <ng-template #tempDefault>\r\n        <abp-extensible-form-prop\r\n          [class]=\"prop.className\"\r\n          *ngIf=\"form.get(prop.name)\"\r\n          [prop]=\"prop\"\r\n          [data]=\"data\"\r\n          [first]=\"first\"\r\n        ></abp-extensible-form-prop>\r\n      </ng-template>\r\n    </ng-container>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TrackByService }, { type: i2.ControlContainer }, { type: ExtensionsService }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [EXTENSIONS_IDENTIFIER]
                 }] }]; }, propDecorators: { formProps: [{
@@ -850,9 +884,9 @@ class AbstractActionsComponent extends ActionData {
         this.actionList = extensions[type].get(name).actions;
     }
 }
-AbstractActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: AbstractActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-AbstractActionsComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "13.3.6", type: AbstractActionsComponent, inputs: { record: "record" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: AbstractActionsComponent, decorators: [{
+AbstractActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: AbstractActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractActionsComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "14.2.1", type: AbstractActionsComponent, inputs: { record: "record" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: AbstractActionsComponent, decorators: [{
             type: Directive
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { record: [{
                 type: Input
@@ -866,14 +900,14 @@ class GridActionsComponent extends AbstractActionsComponent {
         this.trackByFn = (_, item) => item.text;
     }
 }
-GridActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: GridActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-GridActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: GridActionsComponent, selector: "abp-grid-actions", inputs: { icon: "icon", index: "index", text: "text" }, providers: [
+GridActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: GridActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+GridActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: GridActionsComponent, 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: "<div *ngIf=\"actionList.length > 1\" 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    <ng-container\r\n      *ngFor=\"let action of actionList; trackBy: trackByFn\"\r\n      [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n    >\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-container\r\n  *ngIf=\"actionList.length === 1\"\r\n  [ngTemplateOutlet]=\"btnTmp\"\r\n  [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n></ng-container>\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  <ng-container *ngIf=\"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  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon\"></i>\r\n  <span *ngIf=\"action.icon; else ellipsis\">{{ action.text | abpLocalization }}</span>\r\n  <ng-template #ellipsis>\r\n    <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  <ng-container *ngIf=\"action.visible(data)\">\r\n    <button\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n      class=\"btn btn-primary text-center\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  </ng-container>\r\n</ng-template>\r\n", directives: [{ type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { type: i2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { type: i4.EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }], pipes: { "abpLocalization": i1.LocalizationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: GridActionsComponent, decorators: [{
+    ], exportAs: ["abpGridActions"], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"actionList.length > 1\" 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    <ng-container\r\n      *ngFor=\"let action of actionList; trackBy: trackByFn\"\r\n      [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n    >\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-container\r\n  *ngIf=\"actionList.length === 1\"\r\n  [ngTemplateOutlet]=\"btnTmp\"\r\n  [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n></ng-container>\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  <ng-container *ngIf=\"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  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon\"></i>\r\n  <span *ngIf=\"action.icon; else ellipsis\">{{ action.text | abpLocalization }}</span>\r\n  <ng-template #ellipsis>\r\n    <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  <ng-container *ngIf=\"action.visible(data)\">\r\n    <button\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n      class=\"btn btn-primary text-center\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  </ng-container>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: i4$2.EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }, { kind: "directive", type: i4$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i4$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: GridActionsComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpGridActions', selector: 'abp-grid-actions', providers: [
                         {
@@ -941,15 +975,15 @@ class ExtensibleTableComponent {
     getContent(prop, data) {
         return prop.valueResolver(data).pipe(map(value => {
             switch (prop.type) {
-                case "boolean" /* Boolean */:
+                case "boolean" /* ePropType.Boolean */:
                     return this.getIcon(value);
-                case "date" /* Date */:
+                case "date" /* ePropType.Date */:
                     return this.getDate(value, getShortDateFormat(this.config));
-                case "time" /* Time */:
+                case "time" /* ePropType.Time */:
                     return this.getDate(value, getShortTimeFormat(this.config));
-                case "datetime" /* DateTime */:
+                case "datetime" /* ePropType.DateTime */:
                     return this.getDate(value, getShortDateShortTimeFormat(this.config));
-                case "enum" /* Enum */:
+                case "enum" /* ePropType.Enum */:
                     return this.getEnum(value, prop.enumList);
                 default:
                     return value;
@@ -987,9 +1021,9 @@ class ExtensibleTableComponent {
         });
     }
 }
-ExtensibleTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensibleTableComponent, deps: [{ token: LOCALE_ID }, { token: i1.ConfigStateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-ExtensibleTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "<ngx-datatable default [rows]=\"data\" [count]=\"recordsTotal\" [list]=\"list\">\r\n  <ngx-datatable-column\r\n    *ngIf=\"actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)\"\r\n    [name]=\"actionsText | abpLocalization\"\r\n    [maxWidth]=\"columnWidths[0]\"\r\n    [width]=\"columnWidths[0]\"\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        <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n      </ng-template>\r\n    </ng-template>\r\n  </ngx-datatable-column>\r\n\r\n  <ng-container *ngFor=\"let prop of propList; let i = index; trackBy: trackByFn\">\r\n    <ngx-datatable-column\r\n      [width]=\"columnWidths[i + 1] || 200\"\r\n      [name]=\"prop.displayName | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\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 *ngIf=\"row['_' + prop.name]?.visible\">\r\n            <div\r\n              *ngIf=\"!row['_' + prop.name].component; else component\"\r\n              [innerHTML]=\"row['_' + prop.name]?.value | async\"\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          </ng-container>\r\n          <ng-template #component>\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          </ng-template>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  </ng-container>\r\n</ngx-datatable>\r\n", components: [{ type: i2$2.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }], directives: [{ type: i4.NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { type: i4.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { type: i2$2.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }], pipes: { "abpLocalization": i1.LocalizationPipe, "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
+ExtensibleTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ExtensibleTableComponent, deps: [{ token: LOCALE_ID }, { token: i1.ConfigStateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "<ngx-datatable default [rows]=\"data\" [count]=\"recordsTotal\" [list]=\"list\">\r\n  <ngx-datatable-column\r\n    *ngIf=\"actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)\"\r\n    [name]=\"actionsText | abpLocalization\"\r\n    [maxWidth]=\"columnWidths[0]\"\r\n    [width]=\"columnWidths[0]\"\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        <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n      </ng-template>\r\n    </ng-template>\r\n  </ngx-datatable-column>\r\n\r\n  <ng-container *ngFor=\"let prop of propList; let i = index; trackBy: trackByFn\">\r\n    <ngx-datatable-column\r\n      [width]=\"columnWidths[i + 1] || 200\"\r\n      [name]=\"prop.displayName | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\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 *ngIf=\"row['_' + prop.name]?.visible\">\r\n            <div\r\n              *ngIf=\"!row['_' + prop.name].component; else component\"\r\n              [innerHTML]=\"row['_' + prop.name]?.value | async\"\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          </ng-container>\r\n          <ng-template #component>\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          </ng-template>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  </ng-container>\r\n</ngx-datatable>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "component", type: i3.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i3.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { kind: "directive", type: i3.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "directive", type: i4$2.NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: i4$2.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpExtensibleTable', selector: 'abp-extensible-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngx-datatable default [rows]=\"data\" [count]=\"recordsTotal\" [list]=\"list\">\r\n  <ngx-datatable-column\r\n    *ngIf=\"actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)\"\r\n    [name]=\"actionsText | abpLocalization\"\r\n    [maxWidth]=\"columnWidths[0]\"\r\n    [width]=\"columnWidths[0]\"\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        <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n      </ng-template>\r\n    </ng-template>\r\n  </ngx-datatable-column>\r\n\r\n  <ng-container *ngFor=\"let prop of propList; let i = index; trackBy: trackByFn\">\r\n    <ngx-datatable-column\r\n      [width]=\"columnWidths[i + 1] || 200\"\r\n      [name]=\"prop.displayName | abpLocalization\"\r\n      [prop]=\"prop.name\"\r\n      [sortable]=\"prop.sortable\"\r\n    >\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 *ngIf=\"row['_' + prop.name]?.visible\">\r\n            <div\r\n              *ngIf=\"!row['_' + prop.name].component; else component\"\r\n              [innerHTML]=\"row['_' + prop.name]?.value | async\"\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          </ng-container>\r\n          <ng-template #component>\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          </ng-template>\r\n        </ng-container>\r\n      </ng-template>\r\n    </ngx-datatable-column>\r\n  </ng-container>\r\n</ngx-datatable>\r\n" }]
         }], ctorParameters: function () { return [{ type: undefined, decorators: [{
@@ -1033,9 +1067,9 @@ class CreateInjectorPipe {
         return { get };
     }
 }
-CreateInjectorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: CreateInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-CreateInjectorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: CreateInjectorPipe, name: "createInjector" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: CreateInjectorPipe, decorators: [{
+CreateInjectorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: CreateInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
+CreateInjectorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: CreateInjectorPipe, name: "createInjector" });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: CreateInjectorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'createInjector',
@@ -1051,14 +1085,14 @@ class PageToolbarComponent extends AbstractActionsComponent {
         this.trackByFn = (_, item) => item.action || item.component;
     }
 }
-PageToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: PageToolbarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-PageToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.6", type: PageToolbarComponent, selector: "abp-page-toolbar", providers: [
+PageToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: PageToolbarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+PageToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "14.2.1", type: PageToolbarComponent, 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\" id=\"AbpContentToolbar\">\r\n  <div\r\n    class=\"col-auto px-1 pt-0 pt-md-2\"\r\n    [class.pe-0]=\"last\"\r\n    *ngFor=\"let action of actionList; trackBy: trackByFn; let last = last\"\r\n  >\r\n    <ng-container *ngIf=\"action.visible(data)\">\r\n      <ng-container *abpPermission=\"action.permission;runChangeDetection: false\">\r\n        <ng-container *ngIf=\"action.component as component; else button\">\r\n          <ng-container\r\n            *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n          ></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #button>\r\n          <button\r\n            (click)=\"action.action(data)\"\r\n            type=\"button\"\r\n            [ngClass]=\"action.btnClass ? action.btnClass : defaultBtnClass\"\r\n          >\r\n            <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon\"></i>\r\n            {{ action.text | abpLocalization }}\r\n          </button>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", directives: [{ type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "createInjector": CreateInjectorPipe, "abpLocalization": i1.LocalizationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: PageToolbarComponent, decorators: [{
+    ], exportAs: ["abpPageToolbar"], usesInheritance: true, ngImport: i0, template: "<div class=\"row justify-content-end mx-0\" id=\"AbpContentToolbar\">\r\n  <div\r\n    class=\"col-auto px-1 pt-0 pt-md-2\"\r\n    [class.pe-0]=\"last\"\r\n    *ngFor=\"let action of actionList; trackBy: trackByFn; let last = last\"\r\n  >\r\n    <ng-container *ngIf=\"action.visible(data)\">\r\n      <ng-container *abpPermission=\"action.permission;runChangeDetection: false\">\r\n        <ng-container *ngIf=\"action.component as component; else button\">\r\n          <ng-container\r\n            *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"\r\n          ></ng-container>\r\n        </ng-container>\r\n\r\n        <ng-template #button>\r\n          <button\r\n            (click)=\"action.action(data)\"\r\n            type=\"button\"\r\n            [ngClass]=\"action.btnClass ? action.btnClass : defaultBtnClass\"\r\n          >\r\n            <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon\"></i>\r\n            {{ action.text | abpLocalization }}\r\n          </button>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: CreateInjectorPipe, name: "createInjector" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: PageToolbarComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpPageToolbar', selector: 'abp-page-toolbar', providers: [
                         {
@@ -1076,8 +1110,8 @@ const EXTENSIBLE_FORM_VIEW_PROVIDER = { provide: ControlContainer, useExisting:
 
 class BaseUiExtensionsModule {
 }
-BaseUiExtensionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BaseUiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BaseUiExtensionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BaseUiExtensionsModule, declarations: [DateTimePickerComponent,
+BaseUiExtensionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaseUiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaseUiExtensionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: BaseUiExtensionsModule, declarations: [DateTimePickerComponent,
         PageToolbarComponent,
         GridActionsComponent,
         ExtensibleFormPropComponent,
@@ -1099,16 +1133,14 @@ BaseUiExtensionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0",
         PropDataDirective,
         DisabledDirective,
         CreateInjectorPipe] });
-BaseUiExtensionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BaseUiExtensionsModule, imports: [[
-            CoreModule,
-            ThemeSharedModule,
-            NgxValidateCoreModule,
-            NgbDatepickerModule,
-            NgbDropdownModule,
-            NgbTimepickerModule,
-            NgbTypeaheadModule,
-        ]] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: BaseUiExtensionsModule, decorators: [{
+BaseUiExtensionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaseUiExtensionsModule, imports: [CoreModule,
+        ThemeSharedModule,
+        NgxValidateCoreModule,
+        NgbDatepickerModule,
+        NgbDropdownModule,
+        NgbTimepickerModule,
+        NgbTypeaheadModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: BaseUiExtensionsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [
@@ -1145,10 +1177,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImpor
         }] });
 class UiExtensionsModule {
 }
-UiExtensionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: UiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UiExtensionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: UiExtensionsModule, imports: [BaseUiExtensionsModule], exports: [BaseUiExtensionsModule] });
-UiExtensionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: UiExtensionsModule, imports: [[BaseUiExtensionsModule], BaseUiExtensionsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.6", ngImport: i0, type: UiExtensionsModule, decorators: [{
+UiExtensionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: UiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UiExtensionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "14.2.1", ngImport: i0, type: UiExtensionsModule, imports: [BaseUiExtensionsModule], exports: [BaseUiExtensionsModule] });
+UiExtensionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: UiExtensionsModule, imports: [BaseUiExtensionsModule, BaseUiExtensionsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "14.2.1", ngImport: i0, type: UiExtensionsModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [BaseUiExtensionsModule],
@@ -1168,8 +1200,8 @@ function mergeWithDefaultActions(extension, defaultActions, ...contributors) {
 function generateFormFromProps(data) {
     const extensions = data.getInjected(ExtensionsService);
     const identifier = data.getInjected(EXTENSIONS_IDENTIFIER);
-    const form = new FormGroup({});
-    const extraForm = new FormGroup({});
+    const form = new UntypedFormGroup({});
+    const extraForm = new UntypedFormGroup({});
     form.addControl(EXTRA_PROPERTIES_KEY, extraForm);
     const record = data.record || {};
     const type = JSON.stringify(record) === '{}' ? 'create' : 'edit';
@@ -1184,15 +1216,15 @@ function generateFormFromProps(data) {
         if (value) {
             let adapter;
             switch (prop.type) {
-                case "date" /* Date */:
+                case "date" /* ePropType.Date */:
                     adapter = new DateAdapter();
                     value = adapter.toModel(adapter.fromModel(value));
                     break;
-                case "time" /* Time */:
+                case "time" /* ePropType.Time */:
                     adapter = new TimeAdapter();
                     value = adapter.toModel(adapter.fromModel(value));
                     break;
-                case "datetime" /* DateTime */:
+                case "datetime" /* ePropType.DateTime */:
                     adapter = new DateTimeAdapter();
                     value = adapter.toModel(adapter.fromModel(value));
                     break;
@@ -1200,7 +1232,7 @@ function generateFormFromProps(data) {
                     break;
             }
         }
-        const formControl = new FormControl(value, {
+        const formControl = new UntypedFormControl(value, {
             asyncValidators: prop.asyncValidators(data),
             validators: prop.validators(data),
         });
@@ -1343,8 +1375,8 @@ function createPropertiesToContributorsMapper(generateDisplayName, resource, enu
             const displayName = generateDN(property.displayName, { name, resource });
             if (property.ui.onTable.isVisible) {
                 const sortable = Boolean(property.ui.onTable.isSortable);
-                const columnWidth = type === "boolean" /* Boolean */ ? 150 : 250;
-                const valueResolver = type === "enum" /* Enum */
+                const columnWidth = type === "boolean" /* ePropType.Boolean */ ? 150 : 250;
+                const valueResolver = type === "enum" /* ePropType.Enum */
                     ? createEnumValueResolver(property.type, enums[property.type], propName)
                     : createExtraPropertyValueResolver(propName);
                 const entityProp = new EntityProp({
@@ -1365,9 +1397,9 @@ function createPropertiesToContributorsMapper(generateDisplayName, resource, enu
                 const defaultValue = property.defaultValue;
                 const validators = () => getValidatorsFromProperty(property);
                 let options;
-                if (type === "enum" /* Enum */)
+                if (type === "enum" /* ePropType.Enum */)
                     options = createEnumOptions(propName, enums[property.type || '']);
-                else if (type === "typeahead" /* Typeahead */)
+                else if (type === "typeahead" /* ePropType.Typeahead */)
                     options = createTypeaheadOptions(lookup);
                 const formProp = new FormProp({
                     type,