@abp/ng.theme.shared 7.2.2 → 7.3.0-rc.1

package/{fesm2020 → fesm2022}/abp-ng.theme.shared-extensions.mjs

@@ -17,261 +17,262 @@ import * as i4$2 from '@abp/ng.theme.shared';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import * as i3$1 from '@swimlane/ngx-datatable';
 
-class DateTimeAdapter {
-    fromModel(value) {
-        if (!value)
-            return null;
-        const date = new Date(value);
-        if (isNaN(date))
-            return null;
-        this.value = {
-            year: date.getFullYear(),
-            month: date.getMonth() + 1,
-            day: date.getDate(),
-            hour: date.getHours(),
-            minute: date.getMinutes(),
-            second: date.getSeconds(),
-        };
-        return this.value;
-    }
-    toModel(value) {
-        if (!value)
-            return '';
-        const now = new Date();
-        const newValue = {
-            // TODO look for strict mode errors
-            year: now.getUTCFullYear(),
-            month: now.getMonth() + 1,
-            day: now.getDate(),
-            hour: 0,
-            minute: 0,
-            second: 0,
-            ...this.value,
-            ...value,
-        };
-        const date = new Date(newValue.year, newValue.month - 1, newValue.day, newValue.hour, newValue.minute, newValue.second);
-        return new Date(date).toISOString();
-    }
-}
-DateTimeAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-DateTimeAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimeAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimeAdapter, decorators: [{
-            type: Injectable
+class DateTimeAdapter {
+    fromModel(value) {
+        if (!value)
+            return null;
+        const date = new Date(value);
+        if (isNaN(date))
+            return null;
+        this.value = {
+            year: date.getFullYear(),
+            month: date.getMonth() + 1,
+            day: date.getDate(),
+            hour: date.getHours(),
+            minute: date.getMinutes(),
+            second: date.getSeconds(),
+        };
+        return this.value;
+    }
+    toModel(value) {
+        if (!value)
+            return '';
+        const now = new Date();
+        const newValue = {
+            // TODO look for strict mode errors
+            year: now.getUTCFullYear(),
+            month: now.getMonth() + 1,
+            day: now.getDate(),
+            hour: 0,
+            minute: 0,
+            second: 0,
+            ...this.value,
+            ...value,
+        };
+        const date = new Date(newValue.year, newValue.month - 1, newValue.day, newValue.hour, newValue.minute, newValue.second);
+        return new Date(date).toISOString();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: DateTimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: DateTimeAdapter }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: DateTimeAdapter, decorators: [{
+            type: Injectable
         }] });
 
-class DateAdapter extends NgbDateAdapter {
-    fromModel(value) {
-        if (!value)
-            return null;
-        let date;
-        if (typeof value === 'string') {
-            date = this.dateOf(value);
-        }
-        else {
-            date = new Date(value);
-        }
-        if (isNaN(date))
-            return null;
-        return {
-            day: date.getDate(),
-            month: date.getMonth() + 1,
-            year: date.getFullYear(),
-        };
-    }
-    toModel(value) {
-        if (!value)
-            return '';
-        const date = new Date(value.year, value.month - 1, value.day);
-        const formattedDate = formatDate(date, 'yyyy-MM-dd', 'en');
-        return formattedDate;
-    }
-    dateOf(value) {
-        const dateUtc = new Date(Date.parse(value));
-        return new Date(dateUtc.getTime() + Math.abs(dateUtc.getTimezoneOffset() * 60000));
-    }
-}
-DateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-DateAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateAdapter, decorators: [{
-            type: Injectable
+class DateAdapter extends NgbDateAdapter {
+    fromModel(value) {
+        if (!value)
+            return null;
+        let date;
+        if (typeof value === 'string') {
+            date = this.dateOf(value);
+        }
+        else {
+            date = new Date(value);
+        }
+        if (isNaN(date))
+            return null;
+        return {
+            day: date.getDate(),
+            month: date.getMonth() + 1,
+            year: date.getFullYear(),
+        };
+    }
+    toModel(value) {
+        if (!value)
+            return '';
+        const date = new Date(value.year, value.month - 1, value.day);
+        const formattedDate = formatDate(date, 'yyyy-MM-dd', 'en');
+        return formattedDate;
+    }
+    dateOf(value) {
+        const dateUtc = new Date(Date.parse(value));
+        return new Date(dateUtc.getTime() + Math.abs(dateUtc.getTimezoneOffset() * 60000));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: DateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: DateAdapter }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: DateAdapter, decorators: [{
+            type: Injectable
         }] });
 
-class TimeAdapter extends NgbTimeAdapter {
-    fromModel(value) {
-        if (!value)
-            return null;
-        const date = isTimeStr(value)
-            ? new Date(0, 0, 1, ...value.split(':').map(Number))
-            : new Date(value);
-        if (isNaN(date))
-            return null;
-        return {
-            hour: date.getHours(),
-            minute: date.getMinutes(),
-            second: date.getSeconds(),
-        };
-    }
-    toModel(value) {
-        if (!value)
-            return '';
-        const date = new Date(0, 0, 1, value.hour, value.minute, value.second);
-        const formattedDate = formatDate(date, 'HH:mm', 'en');
-        return formattedDate;
-    }
-}
-TimeAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
-TimeAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeAdapter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: TimeAdapter, decorators: [{
-            type: Injectable
-        }] });
-function isTimeStr(value) {
-    return /^((2[123])|[01][0-9])(\:[0-5][0-9]){1,2}$/.test(String(value));
+class TimeAdapter extends NgbTimeAdapter {
+    fromModel(value) {
+        if (!value)
+            return null;
+        const date = isTimeStr(value)
+            ? new Date(0, 0, 1, ...value.split(':').map(Number))
+            : new Date(value);
+        if (isNaN(date))
+            return null;
+        return {
+            hour: date.getHours(),
+            minute: date.getMinutes(),
+            second: date.getSeconds(),
+        };
+    }
+    toModel(value) {
+        if (!value)
+            return '';
+        const date = new Date(0, 0, 1, value.hour, value.minute, value.second);
+        const formattedDate = formatDate(date, 'HH:mm', 'en');
+        return formattedDate;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: TimeAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: TimeAdapter }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: TimeAdapter, decorators: [{
+            type: Injectable
+        }] });
+function isTimeStr(value) {
+    return /^((2[123])|[01][0-9])(\:[0-5][0-9]){1,2}$/.test(String(value));
 }
 
-class PropList extends LinkedList {
-}
-class PropData {
-    get data() {
-        return {
-            getInjected: this.getInjected,
-            index: this.index,
-            record: this.record,
-        };
-    }
-}
-class Prop {
-    constructor(type, name, displayName, permission, visible = _ => true, isExtra = false, template, className, displayTextResolver) {
-        this.type = type;
-        this.name = name;
-        this.displayName = displayName;
-        this.permission = permission;
-        this.visible = visible;
-        this.isExtra = isExtra;
-        this.template = template;
-        this.className = className;
-        this.displayTextResolver = displayTextResolver;
-        this.displayName = this.displayName || this.name;
-    }
-}
-class PropsFactory {
-    constructor() {
-        this.contributorCallbacks = {};
-    }
-    get(name) {
-        this.contributorCallbacks[name] = this.contributorCallbacks[name] || [];
-        return new this._ctor(this.contributorCallbacks[name]);
-    }
-}
-class Props {
-    constructor(callbackList) {
-        this.callbackList = callbackList;
-    }
-    get props() {
-        const propList = new this._ctor();
-        this.callbackList.forEach(callback => callback(propList));
-        return propList;
-    }
-    addContributor(contributeCallback) {
-        this.callbackList.push(contributeCallback);
-    }
-    clearContributors() {
-        while (this.callbackList.length)
-            this.callbackList.pop();
-    }
+class PropList extends LinkedList {
+}
+class PropData {
+    get data() {
+        return {
+            getInjected: this.getInjected,
+            index: this.index,
+            record: this.record,
+        };
+    }
+}
+class Prop {
+    constructor(type, name, displayName, permission, visible = _ => true, isExtra = false, template, className, formText, displayTextResolver) {
+        this.type = type;
+        this.name = name;
+        this.displayName = displayName;
+        this.permission = permission;
+        this.visible = visible;
+        this.isExtra = isExtra;
+        this.template = template;
+        this.className = className;
+        this.formText = formText;
+        this.displayTextResolver = displayTextResolver;
+        this.displayName = this.displayName || this.name;
+    }
+}
+class PropsFactory {
+    constructor() {
+        this.contributorCallbacks = {};
+    }
+    get(name) {
+        this.contributorCallbacks[name] = this.contributorCallbacks[name] || [];
+        return new this._ctor(this.contributorCallbacks[name]);
+    }
+}
+class Props {
+    get props() {
+        const propList = new this._ctor();
+        this.callbackList.forEach(callback => callback(propList));
+        return propList;
+    }
+    constructor(callbackList) {
+        this.callbackList = callbackList;
+    }
+    addContributor(contributeCallback) {
+        this.callbackList.push(contributeCallback);
+    }
+    clearContributors() {
+        while (this.callbackList.length)
+            this.callbackList.pop();
+    }
 }
 
-class FormPropList extends PropList {
-}
-class FormProps extends Props {
-    constructor() {
-        super(...arguments);
-        this._ctor = FormPropList;
-    }
-}
-class GroupedFormPropList {
-    constructor() {
-        this.items = [];
-    }
-    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);
-        this._ctor = FormProps;
-    }
-}
-class EditFormPropsFactory extends PropsFactory {
-    constructor() {
-        super(...arguments);
-        this._ctor = FormProps;
-    }
-}
-class FormProp extends Prop {
-    constructor(options) {
-        super(options.type, options.name, options.displayName || '', options.permission || '', options.visible, options.isExtra, options.template, options.className);
-        this.group = options.group;
-        this.className = options.className;
-        this.asyncValidators = options.asyncValidators || (_ => []);
-        this.validators = options.validators || (_ => []);
-        this.disabled = options.disabled || (_ => false);
-        this.readonly = options.readonly || (_ => false);
-        this.autocomplete = options.autocomplete || 'off';
-        this.options = options.options;
-        this.id = options.id || options.name;
-        const defaultValue = options.defaultValue;
-        this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || '';
-        this.displayTextResolver = options.displayTextResolver;
-    }
-    static create(options) {
-        return new FormProp(options);
-    }
-    static createMany(arrayOfOptions) {
-        return arrayOfOptions.map(FormProp.create);
-    }
-}
-class FormPropData extends PropData {
-    constructor(injector, record) {
-        super();
-        this.record = record;
-        this.getInjected = injector.get.bind(injector);
-    }
-}
-function isFalsyValue(defaultValue) {
-    return [0, '', false].indexOf(defaultValue) > -1;
+class FormPropList extends PropList {
+}
+class FormProps extends Props {
+    constructor() {
+        super(...arguments);
+        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);
+        this._ctor = FormProps;
+    }
+}
+class EditFormPropsFactory extends PropsFactory {
+    constructor() {
+        super(...arguments);
+        this._ctor = FormProps;
+    }
+}
+class FormProp extends Prop {
+    constructor(options) {
+        super(options.type, options.name, options.displayName || '', options.permission || '', options.visible, options.isExtra, options.template, options.className, options.formText);
+        this.group = options.group;
+        this.className = options.className;
+        this.formText = options.formText;
+        this.asyncValidators = options.asyncValidators || (_ => []);
+        this.validators = options.validators || (_ => []);
+        this.disabled = options.disabled || (_ => false);
+        this.readonly = options.readonly || (_ => false);
+        this.autocomplete = options.autocomplete || 'off';
+        this.options = options.options;
+        this.id = options.id || options.name;
+        const defaultValue = options.defaultValue;
+        this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || '';
+        this.displayTextResolver = options.displayTextResolver;
+    }
+    static create(options) {
+        return new FormProp(options);
+    }
+    static createMany(arrayOfOptions) {
+        return arrayOfOptions.map(FormProp.create);
+    }
+}
+class FormPropData extends PropData {
+    constructor(injector, record) {
+        super();
+        this.record = record;
+        this.getInjected = injector.get.bind(injector);
+    }
+}
+function isFalsyValue(defaultValue) {
+    return [0, '', false].indexOf(defaultValue) > -1;
 }
 
-function selfFactory(dependency) {
-    return dependency;
+function selfFactory(dependency) {
+    return dependency;
 }
 
-class DateTimePickerComponent {
-    constructor(cdRef) {
-        this.cdRef = cdRef;
-        this.meridian = false;
-    }
-    setDate(datestr) {
-        this.date.writeValue(datestr);
-    }
-    setTime(datestr) {
-        this.time.writeValue(datestr);
-    }
-}
-DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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: `
+class DateTimePickerComponent {
+    constructor(cdRef) {
+        this.cdRef = cdRef;
+        this.meridian = false;
+    }
+    setDate(datestr) {
+        this.date.writeValue(datestr);
+    }
+    setTime(datestr) {
+        this.time.writeValue(datestr);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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"
@@ -289,26 +290,27 @@ DateTimePickerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0"
       (ngModelChange)="setDate($event)"
       [meridian]="meridian"
     ></ngb-timepicker>
-  `, 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", "popperOptions", "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"], exportAs: ["ngbTimepicker"] }], viewProviders: [
-        {
-            provide: ControlContainer,
-            useFactory: selfFactory,
-            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
-        },
-        {
-            provide: NgbDateAdapter,
-            useClass: DateTimeAdapter,
-        },
-        {
-            provide: NgbTimeAdapter,
-            useClass: DateTimeAdapter,
-        },
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DateTimePickerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    exportAs: 'abpDateTimePicker',
-                    selector: 'abp-date-time-picker',
+  `, 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", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }], viewProviders: [
+            {
+                provide: ControlContainer,
+                useFactory: selfFactory,
+                deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+            },
+            {
+                provide: NgbDateAdapter,
+                useClass: DateTimeAdapter,
+            },
+            {
+                provide: NgbTimeAdapter,
+                useClass: DateTimeAdapter,
+            },
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'abpDateTimePicker',
+                    selector: 'abp-date-time-picker',
                     template: `
     <input
       [id]="prop.id"
@@ -327,802 +329,802 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImpor
       (ngModelChange)="setDate($event)"
       [meridian]="meridian"
     ></ngb-timepicker>
-  `,
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    viewProviders: [
-                        {
-                            provide: ControlContainer,
-                            useFactory: selfFactory,
-                            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
-                        },
-                        {
-                            provide: NgbDateAdapter,
-                            useClass: DateTimeAdapter,
-                        },
-                        {
-                            provide: NgbTimeAdapter,
-                            useClass: DateTimeAdapter,
-                        },
-                    ],
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { prop: [{
-                type: Input
-            }], meridian: [{
-                type: Input
-            }], date: [{
-                type: ViewChild,
-                args: [NgbInputDatepicker]
-            }], time: [{
-                type: ViewChild,
-                args: [NgbTimepicker]
+  `,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useFactory: selfFactory,
+                            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+                        },
+                        {
+                            provide: NgbDateAdapter,
+                            useClass: DateTimeAdapter,
+                        },
+                        {
+                            provide: NgbTimeAdapter,
+                            useClass: DateTimeAdapter,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { prop: [{
+                type: Input
+            }], meridian: [{
+                type: Input
+            }], date: [{
+                type: ViewChild,
+                args: [NgbInputDatepicker]
+            }], time: [{
+                type: ViewChild,
+                args: [NgbTimepicker]
             }] } });
 
-const EXTENSIONS_IDENTIFIER = new InjectionToken('EXTENSIONS_IDENTIFIER');
-const EXTENSIONS_ACTION_TYPE = new InjectionToken('EXTENSIONS_ACTION_TYPE');
-const EXTENSIONS_ACTION_DATA = new InjectionToken('EXTENSIONS_ACTION_DATA');
-const EXTENSIONS_ACTION_CALLBACK = new InjectionToken('EXTENSIONS_ACTION_DATA');
-const PROP_DATA_STREAM = new InjectionToken('PROP_DATA_STREAM');
-const ENTITY_PROP_TYPE_CLASSES = new InjectionToken('ENTITY_PROP_TYPE_CLASSES', {
-    factory: () => ({}),
-});
-const EXTENSIONS_FORM_PROP = new InjectionToken('EXTENSIONS_FORM_PROP');
+const EXTENSIONS_IDENTIFIER = new InjectionToken('EXTENSIONS_IDENTIFIER');
+const EXTENSIONS_ACTION_TYPE = new InjectionToken('EXTENSIONS_ACTION_TYPE');
+const EXTENSIONS_ACTION_DATA = new InjectionToken('EXTENSIONS_ACTION_DATA');
+const EXTENSIONS_ACTION_CALLBACK = new InjectionToken('EXTENSIONS_ACTION_DATA');
+const PROP_DATA_STREAM = new InjectionToken('PROP_DATA_STREAM');
+const ENTITY_PROP_TYPE_CLASSES = new InjectionToken('ENTITY_PROP_TYPE_CLASSES', {
+    factory: () => ({}),
+});
+const EXTENSIONS_FORM_PROP = new InjectionToken('EXTENSIONS_FORM_PROP');
 const EXTENSIONS_FORM_PROP_DATA = new InjectionToken('EXTENSIONS_FORM_PROP_DATA');
 
 const EXTRA_PROPERTIES_KEY = 'extraProperties';
 
-const TYPEAHEAD_TEXT_SUFFIX = '_Text';
-const TYPEAHEAD_TEXT_SUFFIX_REGEX = /_Text$/;
-function createTypeaheadOptions(lookup) {
-    return (data, searchText) => searchText && data
-        ? data
-            .getInjected(RestService)
-            .request({
-            method: 'GET',
-            url: lookup.url || '',
-            params: {
-                [lookup.filterParamName || '']: searchText,
-            },
-        }, { apiName: 'Default' })
-            .pipe(map((response) => {
-            const list = response[lookup.resultListPropertyName || ''];
-            const mapToOption = (item) => ({
-                key: item[lookup.displayPropertyName || ''],
-                value: item[lookup.valuePropertyName || ''],
-            });
-            return list.map(mapToOption);
-        }))
-        : of([]);
-}
-function getTypeaheadType(lookup, name) {
-    return Boolean(lookup.url)
-        ? "typeahead" /* ePropType.Typeahead */
-        : name.endsWith(TYPEAHEAD_TEXT_SUFFIX)
-            ? "hidden" /* ePropType.Hidden */
-            : undefined;
-}
-function createTypeaheadDisplayNameGenerator(displayNameGeneratorFn, properties) {
-    return (displayName, fallback) => {
-        const name = removeTypeaheadTextSuffix(fallback.name || '');
-        return displayNameGeneratorFn(displayName || properties[name].displayName, {
-            name,
-            resource: fallback.resource,
-        });
-    };
-}
-function addTypeaheadTextSuffix(name) {
-    return name + TYPEAHEAD_TEXT_SUFFIX;
-}
-function hasTypeaheadTextSuffix(name) {
-    return TYPEAHEAD_TEXT_SUFFIX_REGEX.test(name);
-}
-function removeTypeaheadTextSuffix(name) {
-    return name.replace(TYPEAHEAD_TEXT_SUFFIX_REGEX, '');
+const TYPEAHEAD_TEXT_SUFFIX = '_Text';
+const TYPEAHEAD_TEXT_SUFFIX_REGEX = /_Text$/;
+function createTypeaheadOptions(lookup) {
+    return (data, searchText) => searchText && data
+        ? data
+            .getInjected(RestService)
+            .request({
+            method: 'GET',
+            url: lookup.url || '',
+            params: {
+                [lookup.filterParamName || '']: searchText,
+            },
+        }, { apiName: 'Default' })
+            .pipe(map((response) => {
+            const list = response[lookup.resultListPropertyName || ''];
+            const mapToOption = (item) => ({
+                key: item[lookup.displayPropertyName || ''],
+                value: item[lookup.valuePropertyName || ''],
+            });
+            return list.map(mapToOption);
+        }))
+        : of([]);
+}
+function getTypeaheadType(lookup, name) {
+    return Boolean(lookup.url)
+        ? "typeahead" /* ePropType.Typeahead */
+        : name.endsWith(TYPEAHEAD_TEXT_SUFFIX)
+            ? "hidden" /* ePropType.Hidden */
+            : undefined;
+}
+function createTypeaheadDisplayNameGenerator(displayNameGeneratorFn, properties) {
+    return (displayName, fallback) => {
+        const name = removeTypeaheadTextSuffix(fallback.name || '');
+        return displayNameGeneratorFn(displayName || properties[name].displayName, {
+            name,
+            resource: fallback.resource,
+        });
+    };
+}
+function addTypeaheadTextSuffix(name) {
+    return name + TYPEAHEAD_TEXT_SUFFIX;
+}
+function hasTypeaheadTextSuffix(name) {
+    return TYPEAHEAD_TEXT_SUFFIX_REGEX.test(name);
+}
+function removeTypeaheadTextSuffix(name) {
+    return name.replace(TYPEAHEAD_TEXT_SUFFIX_REGEX, '');
 }
 
-class DisabledDirective {
-    constructor(ngControl) {
-        this.ngControl = ngControl;
-        this.abpDisabled = false;
-    }
-    // Related issue: https://github.com/angular/angular/issues/35330
-    ngOnChanges({ abpDisabled }) {
-        if (this.ngControl.control && abpDisabled) {
-            this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
-        }
-    }
-}
-DisabledDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DisabledDirective, deps: [{ token: i2.NgControl, host: true }], target: i0.ɵɵFactoryTarget.Directive });
-DisabledDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: DisabledDirective, selector: "[abpDisabled]", inputs: { abpDisabled: "abpDisabled" }, usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: DisabledDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[abpDisabled]',
-                }]
-        }], ctorParameters: function () { return [{ type: i2.NgControl, decorators: [{
-                    type: Host
-                }] }]; }, propDecorators: { abpDisabled: [{
-                type: Input
+class DisabledDirective {
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        this.abpDisabled = false;
+    }
+    // Related issue: https://github.com/angular/angular/issues/35330
+    ngOnChanges({ abpDisabled }) {
+        if (this.ngControl.control && abpDisabled) {
+            this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: DisabledDirective, deps: [{ token: i2.NgControl, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: DisabledDirective, selector: "[abpDisabled]", inputs: { abpDisabled: "abpDisabled" }, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: DisabledDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[abpDisabled]',
+                }]
+        }], ctorParameters: function () { return [{ type: i2.NgControl, decorators: [{
+                    type: Host
+                }] }]; }, propDecorators: { abpDisabled: [{
+                type: Input
             }] } });
 
-class ExtensibleFormPropComponent {
-    constructor(cdRef, track, configState, groupDirective, injector) {
-        this.cdRef = cdRef;
-        this.track = track;
-        this.configState = configState;
-        this.injector = injector;
-        this.asterisk = '';
-        this.containerClassName = 'mb-3';
-        this.options$ = of([]);
-        this.validators = [];
-        this.passwordKey = "ThemeShared.Extensions.PasswordComponent" /* eThemeSharedComponents.PasswordComponent */;
-        this.disabledFn = (data) => false;
-        this.search = (text$) => text$
-            ? text$.pipe(debounceTime(300), distinctUntilChanged(), switchMap(text => this.prop?.options?.(this.data, text) || of([])))
-            : of([]);
-        this.typeaheadFormatter = (option) => option.key;
-        this.form = groupDirective.form;
-    }
-    get disabled() {
-        return this.disabledFn(this.data);
-    }
-    setTypeaheadValue(selectedOption) {
-        this.typeaheadModel = selectedOption || { key: null, value: null };
-        const { key, value } = this.typeaheadModel;
-        const [keyControl, valueControl] = this.getTypeaheadControls();
-        if (valueControl?.value && !value)
-            valueControl.markAsDirty();
-        keyControl?.setValue(key);
-        valueControl?.setValue(value);
-    }
-    get meridian() {
-        return (this.configState.getDeep('localization.currentCulture.dateTimeFormat.shortTimePattern') || '').includes('tt');
-    }
-    get isInvalid() {
-        const control = this.form.get(this.prop.name);
-        return control?.touched && control.invalid;
-    }
-    getTypeaheadControls() {
-        const { name } = this.prop;
-        const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`;
-        const keyControl = this.form.get(addTypeaheadTextSuffix(extraPropName)) ||
-            this.form.get(addTypeaheadTextSuffix(name));
-        const valueControl = this.form.get(extraPropName) || this.form.get(name);
-        return [keyControl, valueControl];
-    }
-    setAsterisk() {
-        this.asterisk = this.validators.some(isRequired) ? '*' : '';
-    }
-    ngAfterViewInit() {
-        if (this.first && this.fieldRef) {
-            this.fieldRef.nativeElement.focus();
-            this.cdRef.detectChanges();
-        }
-    }
-    getComponent(prop) {
-        if (prop.template) {
-            return 'template';
-        }
-        switch (prop.type) {
-            case "boolean" /* ePropType.Boolean */:
-                return 'checkbox';
-            case "date" /* ePropType.Date */:
-                return 'date';
-            case "datetime" /* ePropType.DateTime */:
-                return 'dateTime';
-            case "hidden" /* ePropType.Hidden */:
-                return 'hidden';
-            case "multiselect" /* ePropType.MultiSelect */:
-                return 'multiselect';
-            case "text" /* ePropType.Text */:
-                return 'textarea';
-            case "time" /* ePropType.Time */:
-                return 'time';
-            case "typeahead" /* ePropType.Typeahead */:
-                return 'typeahead';
-            case "passwordinputgroup" /* ePropType.PasswordInputGroup */:
-                return 'passwordinputgroup';
-            default:
-                return prop.options ? 'select' : 'input';
-        }
-    }
-    getType(prop) {
-        switch (prop.type) {
-            case "date" /* ePropType.Date */:
-            case "string" /* ePropType.String */:
-                return 'text';
-            case "boolean" /* ePropType.Boolean */:
-                return 'checkbox';
-            case "number" /* ePropType.Number */:
-                return 'number';
-            case "email" /* ePropType.Email */:
-                return 'email';
-            case "password" /* ePropType.Password */:
-                return 'password';
-            case "passwordinputgroup" /* ePropType.PasswordInputGroup */:
-                return 'passwordinputgroup';
-            default:
-                return 'hidden';
-        }
-    }
-    ngOnChanges({ prop, data }) {
-        const currentProp = prop?.currentValue;
-        const { options, readonly, disabled, validators, className, template } = currentProp || {};
-        if (template) {
-            this.injectorForCustomComponent = Injector.create({
-                providers: [
-                    {
-                        provide: EXTENSIONS_FORM_PROP,
-                        useValue: currentProp,
-                    },
-                    {
-                        provide: EXTENSIONS_FORM_PROP_DATA,
-                        useValue: data?.currentValue?.record,
-                    },
-                    { provide: ControlContainer, useExisting: FormGroupDirective },
-                ],
-                parent: this.injector,
-            });
-        }
-        if (options)
-            this.options$ = options(this.data);
-        if (readonly)
-            this.readonly = readonly(this.data);
-        if (disabled) {
-            this.disabledFn = disabled;
-        }
-        if (validators) {
-            this.validators = validators(this.data);
-            this.setAsterisk();
-        }
-        if (className !== undefined) {
-            this.containerClassName = className;
-        }
-        const [keyControl, valueControl] = this.getTypeaheadControls();
-        if (keyControl && valueControl)
-            this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
-    }
-}
-ExtensibleFormPropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", 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: "15.0.4", 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\r\n  [ngSwitch]=\"getComponent(prop)\"\r\n  *abpPermission=\"prop.permission; runChangeDetection: false\"\r\n>\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-3\">\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\r\n    <ng-template ngSwitchCase=\"passwordinputgroup\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-password\r\n        *abpReplaceableTemplate=\"{\r\n          componentKey: passwordKey,\r\n          inputs: {\r\n            inputId: { value: prop.id },\r\n            formControlName: { value: prop.name }\r\n          }\r\n        }\"\r\n        [inputId]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n      ></abp-password>\r\n    </ng-template>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\">\r\n    <ng-container *ngIf=\"prop.displayTextResolver; else displayNameTemplate\">\r\n      {{ prop.displayTextResolver(data) | abpLocalization }}\r\n    </ng-container>\r\n    <ng-template #displayNameTemplate> {{ prop.displayName | abpLocalization }}</ng-template>\r\n    {{ asterisk }}\r\n  </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.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: i1.ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }, { 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: "component", type: i4$2.PasswordComponent, selector: "abp-password", inputs: ["inputId", "formControlName"] }, { kind: "directive", type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "directive", type: i4$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "showHint", "placement", "popperOptions", "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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], viewProviders: [
-        {
-            provide: ControlContainer,
-            useFactory: selfFactory,
-            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
-        },
-        { provide: NgbDateAdapter, useClass: DateAdapter },
-        { provide: NgbTimeAdapter, useClass: TimeAdapter },
-    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ExtensibleFormPropComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'abp-extensible-form-prop', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
-                        {
-                            provide: ControlContainer,
-                            useFactory: selfFactory,
-                            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
-                        },
-                        { provide: NgbDateAdapter, useClass: DateAdapter },
-                        { provide: NgbTimeAdapter, useClass: TimeAdapter },
-                    ], template: "<ng-container\r\n  [ngSwitch]=\"getComponent(prop)\"\r\n  *abpPermission=\"prop.permission; runChangeDetection: false\"\r\n>\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-3\">\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\r\n    <ng-template ngSwitchCase=\"passwordinputgroup\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-password\r\n        *abpReplaceableTemplate=\"{\r\n          componentKey: passwordKey,\r\n          inputs: {\r\n            inputId: { value: prop.id },\r\n            formControlName: { value: prop.name }\r\n          }\r\n        }\"\r\n        [inputId]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n      ></abp-password>\r\n    </ng-template>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\">\r\n    <ng-container *ngIf=\"prop.displayTextResolver; else displayNameTemplate\">\r\n      {{ prop.displayTextResolver(data) | abpLocalization }}\r\n    </ng-container>\r\n    <ng-template #displayNameTemplate> {{ prop.displayName | abpLocalization }}</ng-template>\r\n    {{ asterisk }}\r\n  </label>\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
-            }], first: [{
-                type: Input
-            }], fieldRef: [{
-                type: ViewChild,
-                args: ['field']
-            }] } });
-function isRequired(validator) {
-    return (validator === Validators.required ||
-        validator === AbpValidators.required ||
-        validator.name === 'required');
+class ExtensibleFormPropComponent {
+    get disabled() {
+        return this.disabledFn(this.data);
+    }
+    setTypeaheadValue(selectedOption) {
+        this.typeaheadModel = selectedOption || { key: null, value: null };
+        const { key, value } = this.typeaheadModel;
+        const [keyControl, valueControl] = this.getTypeaheadControls();
+        if (valueControl?.value && !value)
+            valueControl.markAsDirty();
+        keyControl?.setValue(key);
+        valueControl?.setValue(value);
+    }
+    get meridian() {
+        return (this.configState.getDeep('localization.currentCulture.dateTimeFormat.shortTimePattern') || '').includes('tt');
+    }
+    get isInvalid() {
+        const control = this.form.get(this.prop.name);
+        return control?.touched && control.invalid;
+    }
+    constructor(cdRef, track, configState, groupDirective, injector) {
+        this.cdRef = cdRef;
+        this.track = track;
+        this.configState = configState;
+        this.injector = injector;
+        this.asterisk = '';
+        this.containerClassName = 'mb-3';
+        this.options$ = of([]);
+        this.validators = [];
+        this.passwordKey = "ThemeShared.Extensions.PasswordComponent" /* eThemeSharedComponents.PasswordComponent */;
+        this.disabledFn = (data) => false;
+        this.search = (text$) => text$
+            ? text$.pipe(debounceTime(300), distinctUntilChanged(), switchMap(text => this.prop?.options?.(this.data, text) || of([])))
+            : of([]);
+        this.typeaheadFormatter = (option) => option.key;
+        this.form = groupDirective.form;
+    }
+    getTypeaheadControls() {
+        const { name } = this.prop;
+        const extraPropName = `${EXTRA_PROPERTIES_KEY}.${name}`;
+        const keyControl = this.form.get(addTypeaheadTextSuffix(extraPropName)) ||
+            this.form.get(addTypeaheadTextSuffix(name));
+        const valueControl = this.form.get(extraPropName) || this.form.get(name);
+        return [keyControl, valueControl];
+    }
+    setAsterisk() {
+        this.asterisk = this.validators.some(isRequired) ? '*' : '';
+    }
+    ngAfterViewInit() {
+        if (this.first && this.fieldRef) {
+            this.fieldRef.nativeElement.focus();
+            this.cdRef.detectChanges();
+        }
+    }
+    getComponent(prop) {
+        if (prop.template) {
+            return 'template';
+        }
+        switch (prop.type) {
+            case "boolean" /* ePropType.Boolean */:
+                return 'checkbox';
+            case "date" /* ePropType.Date */:
+                return 'date';
+            case "datetime" /* ePropType.DateTime */:
+                return 'dateTime';
+            case "hidden" /* ePropType.Hidden */:
+                return 'hidden';
+            case "multiselect" /* ePropType.MultiSelect */:
+                return 'multiselect';
+            case "text" /* ePropType.Text */:
+                return 'textarea';
+            case "time" /* ePropType.Time */:
+                return 'time';
+            case "typeahead" /* ePropType.Typeahead */:
+                return 'typeahead';
+            case "passwordinputgroup" /* ePropType.PasswordInputGroup */:
+                return 'passwordinputgroup';
+            default:
+                return prop.options ? 'select' : 'input';
+        }
+    }
+    getType(prop) {
+        switch (prop.type) {
+            case "date" /* ePropType.Date */:
+            case "string" /* ePropType.String */:
+                return 'text';
+            case "boolean" /* ePropType.Boolean */:
+                return 'checkbox';
+            case "number" /* ePropType.Number */:
+                return 'number';
+            case "email" /* ePropType.Email */:
+                return 'email';
+            case "password" /* ePropType.Password */:
+                return 'password';
+            case "passwordinputgroup" /* ePropType.PasswordInputGroup */:
+                return 'passwordinputgroup';
+            default:
+                return 'hidden';
+        }
+    }
+    ngOnChanges({ prop, data }) {
+        const currentProp = prop?.currentValue;
+        const { options, readonly, disabled, validators, className, template } = currentProp || {};
+        if (template) {
+            this.injectorForCustomComponent = Injector.create({
+                providers: [
+                    {
+                        provide: EXTENSIONS_FORM_PROP,
+                        useValue: currentProp,
+                    },
+                    {
+                        provide: EXTENSIONS_FORM_PROP_DATA,
+                        useValue: data?.currentValue?.record,
+                    },
+                    { provide: ControlContainer, useExisting: FormGroupDirective },
+                ],
+                parent: this.injector,
+            });
+        }
+        if (options)
+            this.options$ = options(this.data);
+        if (readonly)
+            this.readonly = readonly(this.data);
+        if (disabled) {
+            this.disabledFn = disabled;
+        }
+        if (validators) {
+            this.validators = validators(this.data);
+            this.setAsterisk();
+        }
+        if (className !== undefined) {
+            this.containerClassName = className;
+        }
+        const [keyControl, valueControl] = this.getTypeaheadControls();
+        if (keyControl && valueControl)
+            this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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\r\n  [ngSwitch]=\"getComponent(prop)\"\r\n  *abpPermission=\"prop.permission; runChangeDetection: false\"\r\n>\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-3\">\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\r\n    <ng-template ngSwitchCase=\"passwordinputgroup\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-password\r\n        *abpReplaceableTemplate=\"{\r\n          componentKey: passwordKey,\r\n          inputs: {\r\n            inputId: { value: prop.id },\r\n            formControlName: { value: prop.name }\r\n          }\r\n        }\"\r\n        [inputId]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n      ></abp-password>\r\n    </ng-template>\r\n\r\n    <small *ngIf=\"prop.formText\" class=\"form-text text-muted\">{{\r\n      prop.formText | abpLocalization\r\n    }}</small>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\">\r\n    <ng-container *ngIf=\"prop.displayTextResolver; else displayNameTemplate\">\r\n      {{ prop.displayTextResolver(data) | abpLocalization }}\r\n    </ng-container>\r\n    <ng-template #displayNameTemplate> {{ prop.displayName | abpLocalization }}</ng-template>\r\n    {{ asterisk }}\r\n  </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.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: i1.ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }, { 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: "component", type: i4$2.PasswordComponent, selector: "abp-password", inputs: ["inputId", "formControlName"] }, { kind: "directive", type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "directive", type: i4$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], viewProviders: [
+            {
+                provide: ControlContainer,
+                useFactory: selfFactory,
+                deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+            },
+            { provide: NgbDateAdapter, useClass: DateAdapter },
+            { provide: NgbTimeAdapter, useClass: TimeAdapter },
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ExtensibleFormPropComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-extensible-form-prop', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useFactory: selfFactory,
+                            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+                        },
+                        { provide: NgbDateAdapter, useClass: DateAdapter },
+                        { provide: NgbTimeAdapter, useClass: TimeAdapter },
+                    ], template: "<ng-container\r\n  [ngSwitch]=\"getComponent(prop)\"\r\n  *abpPermission=\"prop.permission; runChangeDetection: false\"\r\n>\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-3\">\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\r\n    <ng-template ngSwitchCase=\"passwordinputgroup\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-password\r\n        *abpReplaceableTemplate=\"{\r\n          componentKey: passwordKey,\r\n          inputs: {\r\n            inputId: { value: prop.id },\r\n            formControlName: { value: prop.name }\r\n          }\r\n        }\"\r\n        [inputId]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n      ></abp-password>\r\n    </ng-template>\r\n\r\n    <small *ngIf=\"prop.formText\" class=\"form-text text-muted\">{{\r\n      prop.formText | abpLocalization\r\n    }}</small>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\">\r\n    <ng-container *ngIf=\"prop.displayTextResolver; else displayNameTemplate\">\r\n      {{ prop.displayTextResolver(data) | abpLocalization }}\r\n    </ng-container>\r\n    <ng-template #displayNameTemplate> {{ prop.displayName | abpLocalization }}</ng-template>\r\n    {{ asterisk }}\r\n  </label>\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
+            }], first: [{
+                type: Input
+            }], fieldRef: [{
+                type: ViewChild,
+                args: ['field']
+            }] } });
+function isRequired(validator) {
+    return (validator === Validators.required ||
+        validator === AbpValidators.required ||
+        validator.name === 'required');
 }
 
-class ActionList extends LinkedList {
-}
-class ActionData {
-    get data() {
-        return {
-            getInjected: this.getInjected,
-            index: this.index,
-            record: this.record,
-        };
-    }
-}
-class Action {
-    constructor(permission, visible = () => true, action = () => { }) {
-        this.permission = permission;
-        this.visible = visible;
-        this.action = action;
-    }
-}
-class ActionsFactory {
-    constructor() {
-        this.contributorCallbacks = {};
-    }
-    get(name) {
-        this.contributorCallbacks[name] = this.contributorCallbacks[name] || [];
-        return new this._ctor(this.contributorCallbacks[name]);
-    }
-}
-class Actions {
-    constructor(callbackList) {
-        this.callbackList = callbackList;
-    }
-    get actions() {
-        const actionList = new this._ctor();
-        this.callbackList.forEach(callback => callback(actionList));
-        return actionList;
-    }
-    addContributor(contributeCallback) {
-        this.callbackList.push(contributeCallback);
-    }
-    clearContributors() {
-        while (this.callbackList.length)
-            this.callbackList.pop();
-    }
+class ActionList extends LinkedList {
+}
+class ActionData {
+    get data() {
+        return {
+            getInjected: this.getInjected,
+            index: this.index,
+            record: this.record,
+        };
+    }
+}
+class Action {
+    constructor(permission, visible = () => true, action = () => { }) {
+        this.permission = permission;
+        this.visible = visible;
+        this.action = action;
+    }
+}
+class ActionsFactory {
+    constructor() {
+        this.contributorCallbacks = {};
+    }
+    get(name) {
+        this.contributorCallbacks[name] = this.contributorCallbacks[name] || [];
+        return new this._ctor(this.contributorCallbacks[name]);
+    }
+}
+class Actions {
+    get actions() {
+        const actionList = new this._ctor();
+        this.callbackList.forEach(callback => callback(actionList));
+        return actionList;
+    }
+    constructor(callbackList) {
+        this.callbackList = callbackList;
+    }
+    addContributor(contributeCallback) {
+        this.callbackList.push(contributeCallback);
+    }
+    clearContributors() {
+        while (this.callbackList.length)
+            this.callbackList.pop();
+    }
 }
 
-class EntityActionList extends ActionList {
-}
-class EntityActions extends Actions {
-    constructor() {
-        super(...arguments);
-        this._ctor = EntityActionList;
-    }
-}
-class EntityActionsFactory extends ActionsFactory {
-    constructor() {
-        super(...arguments);
-        this._ctor = EntityActions;
-    }
-}
-class EntityAction extends Action {
-    constructor(options) {
-        super(options.permission || '', options.visible, options.action);
-        this.text = options.text;
-        this.icon = options.icon || '';
-    }
-    static create(options) {
-        return new EntityAction(options);
-    }
-    static createMany(arrayOfOptions) {
-        return arrayOfOptions.map(EntityAction.create);
-    }
+class EntityActionList extends ActionList {
+}
+class EntityActions extends Actions {
+    constructor() {
+        super(...arguments);
+        this._ctor = EntityActionList;
+    }
+}
+class EntityActionsFactory extends ActionsFactory {
+    constructor() {
+        super(...arguments);
+        this._ctor = EntityActions;
+    }
+}
+class EntityAction extends Action {
+    constructor(options) {
+        super(options.permission || '', options.visible, options.action);
+        this.text = options.text;
+        this.icon = options.icon || '';
+    }
+    static create(options) {
+        return new EntityAction(options);
+    }
+    static createMany(arrayOfOptions) {
+        return arrayOfOptions.map(EntityAction.create);
+    }
 }
 
-class EntityPropList extends PropList {
-}
-class EntityProps extends Props {
-    constructor() {
-        super(...arguments);
-        this._ctor = EntityPropList;
-    }
-}
-class EntityPropsFactory extends PropsFactory {
-    constructor() {
-        super(...arguments);
-        this._ctor = EntityProps;
-    }
-}
-class EntityProp extends Prop {
-    constructor(options) {
-        super(options.type, options.name, options.displayName || '', options.permission || '', options.visible, options.isExtra);
-        this.columnWidth = options.columnWidth;
-        this.sortable = options.sortable || false;
-        this.valueResolver =
-            options.valueResolver ||
-                (data => of(escapeHtmlChars(data.record[this.name])));
-        if (options.action) {
-            this.action = options.action;
-        }
-        if (options.component) {
-            this.component = options.component;
-        }
-        if (options.enumList) {
-            this.enumList = options.enumList;
-        }
-    }
-    static create(options) {
-        return new EntityProp(options);
-    }
-    static createMany(arrayOfOptions) {
-        return arrayOfOptions.map(EntityProp.create);
-    }
+class EntityPropList extends PropList {
+}
+class EntityProps extends Props {
+    constructor() {
+        super(...arguments);
+        this._ctor = EntityPropList;
+    }
+}
+class EntityPropsFactory extends PropsFactory {
+    constructor() {
+        super(...arguments);
+        this._ctor = EntityProps;
+    }
+}
+class EntityProp extends Prop {
+    constructor(options) {
+        super(options.type, options.name, options.displayName || '', options.permission || '', options.visible, options.isExtra);
+        this.columnWidth = options.columnWidth;
+        this.sortable = options.sortable || false;
+        this.valueResolver =
+            options.valueResolver ||
+                (data => of(escapeHtmlChars(data.record[this.name])));
+        if (options.action) {
+            this.action = options.action;
+        }
+        if (options.component) {
+            this.component = options.component;
+        }
+        if (options.enumList) {
+            this.enumList = options.enumList;
+        }
+    }
+    static create(options) {
+        return new EntityProp(options);
+    }
+    static createMany(arrayOfOptions) {
+        return arrayOfOptions.map(EntityProp.create);
+    }
 }
 
-class ToolbarActionList extends ActionList {
-}
-class ToolbarActions extends Actions {
-    constructor() {
-        super(...arguments);
-        this._ctor = ToolbarActionList;
-    }
-}
-class ToolbarActionsFactory extends ActionsFactory {
-    constructor() {
-        super(...arguments);
-        this._ctor = ToolbarActions;
-    }
-}
-class ToolbarAction extends Action {
-    constructor(options) {
-        super(options.permission || '', options.visible, options.action);
-        this.text = options.text;
-        this.icon = options.icon || '';
-        if (options.btnClass) {
-            this.btnClass = options.btnClass;
-        }
-    }
-    static create(options) {
-        return new ToolbarAction(options);
-    }
-    static createMany(arrayOfOptions) {
-        return arrayOfOptions.map(ToolbarAction.create);
-    }
-}
-class ToolbarComponent extends Action {
-    constructor(options) {
-        super(options.permission || '', options.visible, options.action);
-        this.component = options.component;
-    }
-    static create(options) {
-        return new ToolbarComponent(options);
-    }
-    static createMany(arrayOfOptions) {
-        return arrayOfOptions.map(ToolbarComponent.create);
-    }
+class ToolbarActionList extends ActionList {
+}
+class ToolbarActions extends Actions {
+    constructor() {
+        super(...arguments);
+        this._ctor = ToolbarActionList;
+    }
+}
+class ToolbarActionsFactory extends ActionsFactory {
+    constructor() {
+        super(...arguments);
+        this._ctor = ToolbarActions;
+    }
+}
+class ToolbarAction extends Action {
+    constructor(options) {
+        super(options.permission || '', options.visible, options.action);
+        this.text = options.text;
+        this.icon = options.icon || '';
+        if (options.btnClass) {
+            this.btnClass = options.btnClass;
+        }
+    }
+    static create(options) {
+        return new ToolbarAction(options);
+    }
+    static createMany(arrayOfOptions) {
+        return arrayOfOptions.map(ToolbarAction.create);
+    }
+}
+class ToolbarComponent extends Action {
+    constructor(options) {
+        super(options.permission || '', options.visible, options.action);
+        this.component = options.component;
+    }
+    static create(options) {
+        return new ToolbarComponent(options);
+    }
+    static createMany(arrayOfOptions) {
+        return arrayOfOptions.map(ToolbarComponent.create);
+    }
 }
 
-class ExtensionsService {
-    constructor() {
-        this.entityActions = new EntityActionsFactory();
-        this.toolbarActions = new ToolbarActionsFactory();
-        this.entityProps = new EntityPropsFactory();
-        this.createFormProps = new CreateFormPropsFactory();
-        this.editFormProps = new EditFormPropsFactory();
-    }
-}
-ExtensionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ExtensionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ExtensionsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ExtensionsService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class ExtensionsService {
+    constructor() {
+        this.entityActions = new EntityActionsFactory();
+        this.toolbarActions = new ToolbarActionsFactory();
+        this.entityProps = new EntityPropsFactory();
+        this.createFormProps = new CreateFormPropsFactory();
+        this.editFormProps = new EditFormPropsFactory();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ExtensionsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ExtensionsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }] });
 
-/* eslint-disable @angular-eslint/no-input-rename */
-class PropDataDirective extends PropData {
-    constructor(tempRef, vcRef, injector) {
-        super();
-        this.tempRef = tempRef;
-        this.vcRef = vcRef;
-        this.getInjected = injector.get.bind(injector);
-    }
-    ngOnChanges() {
-        this.vcRef.clear();
-        this.vcRef.createEmbeddedView(this.tempRef, {
-            $implicit: this.data,
-            index: 0,
-        });
-    }
-    ngOnDestroy() {
-        this.vcRef.clear();
-    }
-}
-PropDataDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", 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: "15.0.4", 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: "15.0.4", ngImport: i0, type: PropDataDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    exportAs: 'abpPropData',
-                    selector: '[abpPropData]',
-                }]
-        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { propList: [{
-                type: Input,
-                args: ['abpPropDataFromList']
-            }], record: [{
-                type: Input,
-                args: ['abpPropDataWithRecord']
-            }], index: [{
-                type: Input,
-                args: ['abpPropDataAtIndex']
+/* eslint-disable @angular-eslint/no-input-rename */
+class PropDataDirective extends PropData {
+    constructor(tempRef, vcRef, injector) {
+        super();
+        this.tempRef = tempRef;
+        this.vcRef = vcRef;
+        this.getInjected = injector.get.bind(injector);
+    }
+    ngOnChanges() {
+        this.vcRef.clear();
+        this.vcRef.createEmbeddedView(this.tempRef, {
+            $implicit: this.data,
+            index: 0,
+        });
+    }
+    ngOnDestroy() {
+        this.vcRef.clear();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PropDataDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.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: "16.0.1", ngImport: i0, type: PropDataDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'abpPropData',
+                    selector: '[abpPropData]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { propList: [{
+                type: Input,
+                args: ['abpPropDataFromList']
+            }], record: [{
+                type: Input,
+                args: ['abpPropDataWithRecord']
+            }], index: [{
+                type: Input,
+                args: ['abpPropDataAtIndex']
             }] } });
 
-class ExtensibleFormComponent {
-    constructor(cdRef, track, container, extensions, identifier) {
-        this.cdRef = cdRef;
-        this.track = track;
-        this.container = container;
-        this.extensions = extensions;
-        this.identifier = identifier;
-        this.extraPropertiesKey = EXTRA_PROPERTIES_KEY;
-    }
-    set selectedRecord(record) {
-        const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit';
-        const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
-        this.groupedPropList = this.createGroupedList(propList);
-        this.record = record;
-    }
-    createGroupedList(propList) {
-        const groupedFormPropList = new GroupedFormPropList();
-        propList.forEach(item => {
-            groupedFormPropList.addItem(item.value);
-        });
-        return groupedFormPropList;
-    }
-    get form() {
-        return (this.container ? this.container.control : { controls: {} });
-    }
-    get extraProperties() {
-        return (this.form.controls.extraProperties || { controls: {} });
-    }
-}
-ExtensibleFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", 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: "15.0.4", 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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: "15.0.4", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
-            type: Component,
-            args: [{ exportAs: 'abpExtensibleForm', selector: 'abp-extensible-form', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
-                        {
-                            provide: ControlContainer,
-                            useFactory: selfFactory,
-                            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
-                        },
-                    ], 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: [{
-                type: ViewChildren,
-                args: [ExtensibleFormPropComponent]
-            }], selectedRecord: [{
-                type: Input
+class ExtensibleFormComponent {
+    set selectedRecord(record) {
+        const type = !record || JSON.stringify(record) === '{}' ? 'create' : 'edit';
+        const propList = this.extensions[`${type}FormProps`].get(this.identifier).props;
+        this.groupedPropList = this.createGroupedList(propList);
+        this.record = record;
+    }
+    createGroupedList(propList) {
+        const groupedFormPropList = new GroupedFormPropList();
+        propList.forEach(item => {
+            groupedFormPropList.addItem(item.value);
+        });
+        return groupedFormPropList;
+    }
+    get form() {
+        return (this.container ? this.container.control : { controls: {} });
+    }
+    get extraProperties() {
+        return (this.form.controls.extraProperties || { controls: {} });
+    }
+    constructor(cdRef, track, container, extensions, identifier) {
+        this.cdRef = cdRef;
+        this.track = track;
+        this.container = container;
+        this.extensions = extensions;
+        this.identifier = identifier;
+        this.extraPropertiesKey = EXTRA_PROPERTIES_KEY;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ExtensibleFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i2.ControlContainer }, { token: ExtensionsService }, { token: EXTENSIONS_IDENTIFIER }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: "16.0.1", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'abpExtensibleForm', selector: 'abp-extensible-form', changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useFactory: selfFactory,
+                            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+                        },
+                    ], 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: [{
+                type: ViewChildren,
+                args: [ExtensibleFormPropComponent]
+            }], selectedRecord: [{
+                type: Input
             }] } });
 
-// Fix for https://github.com/angular/angular/issues/23904
-// @dynamic
-class AbstractActionsComponent extends ActionData {
-    constructor(injector) {
-        super();
-        this.getInjected = injector.get.bind(injector);
-        const extensions = injector.get(ExtensionsService);
-        const name = injector.get(EXTENSIONS_IDENTIFIER);
-        const type = injector.get(EXTENSIONS_ACTION_TYPE);
-        this.actionList = extensions[type].get(name).actions;
-    }
-}
-AbstractActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-AbstractActionsComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "15.0.4", type: AbstractActionsComponent, inputs: { record: "record" }, usesInheritance: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: AbstractActionsComponent, decorators: [{
-            type: Directive
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { record: [{
-                type: Input
+// Fix for https://github.com/angular/angular/issues/23904
+// @dynamic
+class AbstractActionsComponent extends ActionData {
+    constructor(injector) {
+        super();
+        this.getInjected = injector.get.bind(injector);
+        const extensions = injector.get(ExtensionsService);
+        const name = injector.get(EXTENSIONS_IDENTIFIER);
+        const type = injector.get(EXTENSIONS_ACTION_TYPE);
+        this.actionList = extensions[type].get(name).actions;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AbstractActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.0.1", type: AbstractActionsComponent, inputs: { record: "record" }, usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: AbstractActionsComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { record: [{
+                type: Input
             }] } });
 
-class GridActionsComponent extends AbstractActionsComponent {
-    constructor(injector) {
-        super(injector);
-        this.icon = 'fa fa-cog';
-        this.text = '';
-        this.trackByFn = (_, item) => item.text;
-    }
-}
-GridActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: GridActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-GridActionsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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", "popperOptions", "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: "15.0.4", ngImport: i0, type: GridActionsComponent, decorators: [{
-            type: Component,
-            args: [{ exportAs: 'abpGridActions', selector: 'abp-grid-actions', providers: [
-                        {
-                            provide: EXTENSIONS_ACTION_TYPE,
-                            useValue: 'entityActions',
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
-        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { icon: [{
-                type: Input
-            }], index: [{
-                type: Input
-            }], text: [{
-                type: Input
+class GridActionsComponent extends AbstractActionsComponent {
+    constructor(injector) {
+        super(injector);
+        this.icon = 'fa fa-cog';
+        this.text = '';
+        this.trackByFn = (_, item) => item.text;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: GridActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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", "popperOptions", "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: "16.0.1", ngImport: i0, type: GridActionsComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'abpGridActions', selector: 'abp-grid-actions', providers: [
+                        {
+                            provide: EXTENSIONS_ACTION_TYPE,
+                            useValue: 'entityActions',
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, 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" }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { icon: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], text: [{
+                type: Input
             }] } });
 
-const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
-class ExtensibleTableComponent {
-    constructor(locale, config, injector) {
-        this.locale = locale;
-        this.config = config;
-        this.injector = injector;
-        this.tableActivate = new EventEmitter();
-        this.trackByFn = (_, item) => item.name;
-        this.entityPropTypeClasses = injector.get(ENTITY_PROP_TYPE_CLASSES);
-        this.getInjected = injector.get.bind(injector);
-        const extensions = injector.get(ExtensionsService);
-        const name = injector.get(EXTENSIONS_IDENTIFIER);
-        this.propList = extensions.entityProps.get(name).props;
-        this.actionList = extensions['entityActions'].get(name)
-            .actions;
-        const permissionService = injector.get(PermissionService);
-        this.hasAtLeastOnePermittedAction =
-            permissionService.filterItemsByPolicy(this.actionList.toArray().map(action => ({ requiredPolicy: action.permission }))).length > 0;
-        this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH);
-    }
-    set actionsText(value) {
-        this._actionsText = value;
-    }
-    get actionsText() {
-        return this._actionsText ?? (this.actionList.length > 1 ? 'AbpUi::Actions' : '');
-    }
-    set actionsColumnWidth(width) {
-        this.setColumnWidths(width ? Number(width) : undefined);
-    }
-    setColumnWidths(actionsColumn) {
-        const widths = [actionsColumn];
-        this.propList.forEach(({ value: prop }) => {
-            widths.push(prop.columnWidth);
-        });
-        this.columnWidths = widths;
-    }
-    getDate(value, format) {
-        return value && format ? formatDate(value, format, this.locale) : '';
-    }
-    getIcon(value) {
-        return value
-            ? '<div class="text-success"><i class="fa fa-check"></i></div>'
-            : '<div class="text-danger"><i class="fa fa-times"></i></div>';
-    }
-    getEnum(rowValue, list) {
-        if (!list)
-            return rowValue;
-        const { key } = list.find(({ value }) => value === rowValue) || {};
-        return key;
-    }
-    getContent(prop, data) {
-        return prop.valueResolver(data).pipe(map(value => {
-            switch (prop.type) {
-                case "boolean" /* ePropType.Boolean */:
-                    return this.getIcon(value);
-                case "date" /* ePropType.Date */:
-                    return this.getDate(value, getShortDateFormat(this.config));
-                case "time" /* ePropType.Time */:
-                    return this.getDate(value, getShortTimeFormat(this.config));
-                case "datetime" /* ePropType.DateTime */:
-                    return this.getDate(value, getShortDateShortTimeFormat(this.config));
-                case "enum" /* ePropType.Enum */:
-                    return this.getEnum(value, prop.enumList || []);
-                default:
-                    return value;
-                // More types can be handled in the future
-            }
-        }));
-    }
-    ngOnChanges({ data }) {
-        if (!data?.currentValue)
-            return;
-        this.data = data.currentValue.map((record, index) => {
-            this.propList.forEach(prop => {
-                const propData = { getInjected: this.getInjected, record, index };
-                const value = this.getContent(prop.value, propData);
-                const propKey = `_${prop.value.name}`;
-                record[propKey] = {
-                    visible: prop.value.visible(propData),
-                    value,
-                };
-                if (prop.value.component) {
-                    const injector = Injector.create({
-                        providers: [
-                            {
-                                provide: PROP_DATA_STREAM,
-                                useValue: value,
-                            },
-                        ],
-                        parent: this.injector,
-                    });
-                    record[propKey].injector = injector;
-                    record[propKey].component = prop.value.component;
-                }
-            });
-            return record;
-        });
-    }
-}
-ExtensibleTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", 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: "15.0.4", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate" }, outputs: { tableActivate: "tableActivate" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "<ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n>\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "component", type: i3$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i3$1.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$1.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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
-            type: Component,
-            args: [{ exportAs: 'abpExtensibleTable', selector: 'abp-extensible-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n>\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: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }, { type: i1.ConfigStateService }, { type: i0.Injector }]; }, propDecorators: { actionsText: [{
-                type: Input
-            }], data: [{
-                type: Input
-            }], list: [{
-                type: Input
-            }], recordsTotal: [{
-                type: Input
-            }], actionsColumnWidth: [{
-                type: Input
-            }], actionsTemplate: [{
-                type: Input
-            }], tableActivate: [{
-                type: Output
+const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
+class ExtensibleTableComponent {
+    set actionsText(value) {
+        this._actionsText = value;
+    }
+    get actionsText() {
+        return this._actionsText ?? (this.actionList.length > 1 ? 'AbpUi::Actions' : '');
+    }
+    set actionsColumnWidth(width) {
+        this.setColumnWidths(width ? Number(width) : undefined);
+    }
+    constructor(locale, config, injector) {
+        this.locale = locale;
+        this.config = config;
+        this.injector = injector;
+        this.tableActivate = new EventEmitter();
+        this.trackByFn = (_, item) => item.name;
+        this.entityPropTypeClasses = injector.get(ENTITY_PROP_TYPE_CLASSES);
+        this.getInjected = injector.get.bind(injector);
+        const extensions = injector.get(ExtensionsService);
+        const name = injector.get(EXTENSIONS_IDENTIFIER);
+        this.propList = extensions.entityProps.get(name).props;
+        this.actionList = extensions['entityActions'].get(name)
+            .actions;
+        const permissionService = injector.get(PermissionService);
+        this.hasAtLeastOnePermittedAction =
+            permissionService.filterItemsByPolicy(this.actionList.toArray().map(action => ({ requiredPolicy: action.permission }))).length > 0;
+        this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH);
+    }
+    setColumnWidths(actionsColumn) {
+        const widths = [actionsColumn];
+        this.propList.forEach(({ value: prop }) => {
+            widths.push(prop.columnWidth);
+        });
+        this.columnWidths = widths;
+    }
+    getDate(value, format) {
+        return value && format ? formatDate(value, format, this.locale) : '';
+    }
+    getIcon(value) {
+        return value
+            ? '<div class="text-success"><i class="fa fa-check" aria-hidden="true"></i></div>'
+            : '<div class="text-danger"><i class="fa fa-times" aria-hidden="true"></i></div>';
+    }
+    getEnum(rowValue, list) {
+        if (!list)
+            return rowValue;
+        const { key } = list.find(({ value }) => value === rowValue) || {};
+        return key;
+    }
+    getContent(prop, data) {
+        return prop.valueResolver(data).pipe(map(value => {
+            switch (prop.type) {
+                case "boolean" /* ePropType.Boolean */:
+                    return this.getIcon(value);
+                case "date" /* ePropType.Date */:
+                    return this.getDate(value, getShortDateFormat(this.config));
+                case "time" /* ePropType.Time */:
+                    return this.getDate(value, getShortTimeFormat(this.config));
+                case "datetime" /* ePropType.DateTime */:
+                    return this.getDate(value, getShortDateShortTimeFormat(this.config));
+                case "enum" /* ePropType.Enum */:
+                    return this.getEnum(value, prop.enumList || []);
+                default:
+                    return value;
+                // More types can be handled in the future
+            }
+        }));
+    }
+    ngOnChanges({ data }) {
+        if (!data?.currentValue)
+            return;
+        this.data = data.currentValue.map((record, index) => {
+            this.propList.forEach(prop => {
+                const propData = { getInjected: this.getInjected, record, index };
+                const value = this.getContent(prop.value, propData);
+                const propKey = `_${prop.value.name}`;
+                record[propKey] = {
+                    visible: prop.value.visible(propData),
+                    value,
+                };
+                if (prop.value.component) {
+                    const injector = Injector.create({
+                        providers: [
+                            {
+                                provide: PROP_DATA_STREAM,
+                                useValue: value,
+                            },
+                        ],
+                        parent: this.injector,
+                    });
+                    record[propKey].injector = injector;
+                    record[propKey].component = prop.value.component;
+                }
+            });
+            return record;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ExtensibleTableComponent, deps: [{ token: LOCALE_ID }, { token: i1.ConfigStateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.1", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate" }, outputs: { tableActivate: "tableActivate" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0, template: "<ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n>\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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "component", type: i3$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { kind: "directive", type: i3$1.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$1.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: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'abpExtensibleTable', selector: 'abp-extensible-table', changeDetection: ChangeDetectionStrategy.OnPush, template: "<ngx-datatable\r\n  default\r\n  [rows]=\"data\"\r\n  [count]=\"recordsTotal\"\r\n  [list]=\"list\"\r\n  (activate)=\"tableActivate.emit($event)\"\r\n>\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: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: i1.ConfigStateService }, { type: i0.Injector }]; }, propDecorators: { actionsText: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], list: [{
+                type: Input
+            }], recordsTotal: [{
+                type: Input
+            }], actionsColumnWidth: [{
+                type: Input
+            }], actionsTemplate: [{
+                type: Input
+            }], tableActivate: [{
+                type: Output
             }] } });
 
-class CreateInjectorPipe {
-    transform(_, action, context) {
-        const get = (token, notFoundValue, options) => {
-            const componentData = context.getData();
-            const componentDataCallback = (data) => {
-                data = data ?? context.getData();
-                return action.action(data);
-            };
-            let extensionData;
-            switch (token) {
-                case EXTENSIONS_ACTION_DATA:
-                    extensionData = componentData;
-                    break;
-                case EXTENSIONS_ACTION_CALLBACK:
-                    extensionData = componentDataCallback;
-                    break;
-                default:
-                    extensionData = context.getInjected.call(context.injector, token, notFoundValue, options);
-            }
-            return extensionData;
-        };
-        return { get };
-    }
-}
-CreateInjectorPipe.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CreateInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
-CreateInjectorPipe.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: CreateInjectorPipe, name: "createInjector" });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: CreateInjectorPipe, decorators: [{
-            type: Pipe,
-            args: [{
-                    name: 'createInjector',
-                }]
+class CreateInjectorPipe {
+    transform(_, action, context) {
+        const get = (token, notFoundValue, options) => {
+            const componentData = context.getData();
+            const componentDataCallback = (data) => {
+                data = data ?? context.getData();
+                return action.action(data);
+            };
+            let extensionData;
+            switch (token) {
+                case EXTENSIONS_ACTION_DATA:
+                    extensionData = componentData;
+                    break;
+                case EXTENSIONS_ACTION_CALLBACK:
+                    extensionData = componentDataCallback;
+                    break;
+                default:
+                    extensionData = context.getInjected.call(context.injector, token, notFoundValue, options);
+            }
+            return extensionData;
+        };
+        return { get };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CreateInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: CreateInjectorPipe, name: "createInjector" }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: CreateInjectorPipe, decorators: [{
+            type: Pipe,
+            args: [{
+                    name: 'createInjector',
+                }]
         }] });
 
-class PageToolbarComponent extends AbstractActionsComponent {
-    constructor(injector) {
-        super(injector);
-        this.injector = injector;
-        this.defaultBtnClass = 'btn btn-sm btn-primary';
-        this.getData = () => this.data;
-        this.trackByFn = (_, item) => item.action || item.component;
-    }
-    asToolbarAction(value) {
-        return {
-            value: value,
-        };
-    }
-}
-PageToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: PageToolbarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
-PageToolbarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.0.4", 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 gap-2\" id=\"AbpContentToolbar\">\r\n  <div\r\n    class=\"col-auto px-0 pt-0 \"\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          <ng-container *ngIf=\"asToolbarAction(action).value as toolbarAction\">\r\n            <button\r\n              (click)=\"action.action(data)\"\r\n              type=\"button\"\r\n              [ngClass]=\"toolbarAction.btnClass ? toolbarAction.btnClass : defaultBtnClass\"\r\n              class=\"d-inline-flex align-items-center gap-1\"\r\n            >\r\n              <i [ngClass]=\"toolbarAction.icon\" [class.me-1]=\"toolbarAction.icon\"></i>\r\n              {{ toolbarAction.text | abpLocalization }}\r\n            </button>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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: "15.0.4", ngImport: i0, type: PageToolbarComponent, decorators: [{
-            type: Component,
-            args: [{ exportAs: 'abpPageToolbar', selector: 'abp-page-toolbar', providers: [
-                        {
-                            provide: EXTENSIONS_ACTION_TYPE,
-                            useValue: 'toolbarActions',
-                        },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  <div\r\n    class=\"col-auto px-0 pt-0 \"\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          <ng-container *ngIf=\"asToolbarAction(action).value as toolbarAction\">\r\n            <button\r\n              (click)=\"action.action(data)\"\r\n              type=\"button\"\r\n              [ngClass]=\"toolbarAction.btnClass ? toolbarAction.btnClass : defaultBtnClass\"\r\n              class=\"d-inline-flex align-items-center gap-1\"\r\n            >\r\n              <i [ngClass]=\"toolbarAction.icon\" [class.me-1]=\"toolbarAction.icon\"></i>\r\n              {{ toolbarAction.text | abpLocalization }}\r\n            </button>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
+class PageToolbarComponent extends AbstractActionsComponent {
+    constructor(injector) {
+        super(injector);
+        this.injector = injector;
+        this.defaultBtnClass = 'btn btn-sm btn-primary';
+        this.getData = () => this.data;
+        this.trackByFn = (_, item) => item.action || item.component;
+    }
+    asToolbarAction(value) {
+        return {
+            value: value,
+        };
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: PageToolbarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.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 gap-2\" id=\"AbpContentToolbar\">\r\n  <div\r\n    class=\"col-auto px-0 pt-0 \"\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          <ng-container *ngIf=\"asToolbarAction(action).value as toolbarAction\">\r\n            <button\r\n              (click)=\"action.action(data)\"\r\n              type=\"button\"\r\n              [ngClass]=\"toolbarAction.btnClass ? toolbarAction.btnClass : defaultBtnClass\"\r\n              class=\"d-inline-flex align-items-center gap-1\"\r\n            >\r\n              <i [ngClass]=\"toolbarAction.icon\" [class.me-1]=\"toolbarAction.icon\"></i>\r\n              {{ toolbarAction.text | abpLocalization }}\r\n            </button>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.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: "16.0.1", ngImport: i0, type: PageToolbarComponent, decorators: [{
+            type: Component,
+            args: [{ exportAs: 'abpPageToolbar', selector: 'abp-page-toolbar', providers: [
+                        {
+                            provide: EXTENSIONS_ACTION_TYPE,
+                            useValue: 'toolbarActions',
+                        },
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  <div\r\n    class=\"col-auto px-0 pt-0 \"\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          <ng-container *ngIf=\"asToolbarAction(action).value as toolbarAction\">\r\n            <button\r\n              (click)=\"action.action(data)\"\r\n              type=\"button\"\r\n              [ngClass]=\"toolbarAction.btnClass ? toolbarAction.btnClass : defaultBtnClass\"\r\n              class=\"d-inline-flex align-items-center gap-1\"\r\n            >\r\n              <i [ngClass]=\"toolbarAction.icon\" [class.me-1]=\"toolbarAction.icon\"></i>\r\n              {{ toolbarAction.text | abpLocalization }}\r\n            </button>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ng-container>\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 var objectExtensions = /*#__PURE__*/Object.freeze({
@@ -1131,327 +1133,330 @@ var objectExtensions = /*#__PURE__*/Object.freeze({
 
 const EXTENSIBLE_FORM_VIEW_PROVIDER = { provide: ControlContainer, useExisting: FormGroupDirective };
 
-class BaseUiExtensionsModule {
-}
-BaseUiExtensionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseUiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BaseUiExtensionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: BaseUiExtensionsModule, declarations: [DateTimePickerComponent,
-        PageToolbarComponent,
-        GridActionsComponent,
-        ExtensibleFormPropComponent,
-        ExtensibleFormComponent,
-        ExtensibleTableComponent,
-        PropDataDirective,
-        DisabledDirective,
-        CreateInjectorPipe], imports: [CoreModule,
-        ThemeSharedModule,
-        NgxValidateCoreModule,
-        NgbDatepickerModule,
-        NgbDropdownModule,
-        NgbTimepickerModule,
-        NgbTypeaheadModule], exports: [DateTimePickerComponent,
-        PageToolbarComponent,
-        GridActionsComponent,
-        ExtensibleFormComponent,
-        ExtensibleTableComponent,
-        PropDataDirective,
-        DisabledDirective,
-        CreateInjectorPipe] });
-BaseUiExtensionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseUiExtensionsModule, imports: [CoreModule,
-        ThemeSharedModule,
-        NgxValidateCoreModule,
-        NgbDatepickerModule,
-        NgbDropdownModule,
-        NgbTimepickerModule,
-        NgbTypeaheadModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: BaseUiExtensionsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [
-                        DateTimePickerComponent,
-                        PageToolbarComponent,
-                        GridActionsComponent,
-                        ExtensibleFormComponent,
-                        ExtensibleTableComponent,
-                        PropDataDirective,
-                        DisabledDirective,
-                        CreateInjectorPipe,
-                    ],
-                    declarations: [
-                        DateTimePickerComponent,
-                        PageToolbarComponent,
-                        GridActionsComponent,
-                        ExtensibleFormPropComponent,
-                        ExtensibleFormComponent,
-                        ExtensibleTableComponent,
-                        PropDataDirective,
-                        DisabledDirective,
-                        CreateInjectorPipe,
-                    ],
-                    imports: [
-                        CoreModule,
-                        ThemeSharedModule,
-                        NgxValidateCoreModule,
-                        NgbDatepickerModule,
-                        NgbDropdownModule,
-                        NgbTimepickerModule,
-                        NgbTypeaheadModule,
-                    ],
-                }]
-        }] });
-class UiExtensionsModule {
-}
-UiExtensionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-UiExtensionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.0.4", ngImport: i0, type: UiExtensionsModule, imports: [BaseUiExtensionsModule], exports: [BaseUiExtensionsModule] });
-UiExtensionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UiExtensionsModule, imports: [BaseUiExtensionsModule, BaseUiExtensionsModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.0.4", ngImport: i0, type: UiExtensionsModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [BaseUiExtensionsModule],
-                    imports: [BaseUiExtensionsModule],
-                }]
+class BaseUiExtensionsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: BaseUiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: BaseUiExtensionsModule, declarations: [DateTimePickerComponent,
+            PageToolbarComponent,
+            GridActionsComponent,
+            ExtensibleFormPropComponent,
+            ExtensibleFormComponent,
+            ExtensibleTableComponent,
+            PropDataDirective,
+            DisabledDirective,
+            CreateInjectorPipe], imports: [CoreModule,
+            ThemeSharedModule,
+            NgxValidateCoreModule,
+            NgbDatepickerModule,
+            NgbDropdownModule,
+            NgbTimepickerModule,
+            NgbTypeaheadModule], exports: [DateTimePickerComponent,
+            PageToolbarComponent,
+            GridActionsComponent,
+            ExtensibleFormComponent,
+            ExtensibleTableComponent,
+            PropDataDirective,
+            DisabledDirective,
+            CreateInjectorPipe] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: BaseUiExtensionsModule, imports: [CoreModule,
+            ThemeSharedModule,
+            NgxValidateCoreModule,
+            NgbDatepickerModule,
+            NgbDropdownModule,
+            NgbTimepickerModule,
+            NgbTypeaheadModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: BaseUiExtensionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        DateTimePickerComponent,
+                        PageToolbarComponent,
+                        GridActionsComponent,
+                        ExtensibleFormComponent,
+                        ExtensibleTableComponent,
+                        PropDataDirective,
+                        DisabledDirective,
+                        CreateInjectorPipe,
+                    ],
+                    declarations: [
+                        DateTimePickerComponent,
+                        PageToolbarComponent,
+                        GridActionsComponent,
+                        ExtensibleFormPropComponent,
+                        ExtensibleFormComponent,
+                        ExtensibleTableComponent,
+                        PropDataDirective,
+                        DisabledDirective,
+                        CreateInjectorPipe,
+                    ],
+                    imports: [
+                        CoreModule,
+                        ThemeSharedModule,
+                        NgxValidateCoreModule,
+                        NgbDatepickerModule,
+                        NgbDropdownModule,
+                        NgbTimepickerModule,
+                        NgbTypeaheadModule,
+                    ],
+                }]
+        }] });
+class UiExtensionsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: UiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.0.1", ngImport: i0, type: UiExtensionsModule, imports: [BaseUiExtensionsModule], exports: [BaseUiExtensionsModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: UiExtensionsModule, imports: [BaseUiExtensionsModule, BaseUiExtensionsModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.1", ngImport: i0, type: UiExtensionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [BaseUiExtensionsModule],
+                    imports: [BaseUiExtensionsModule],
+                }]
         }] });
 
-function mergeWithDefaultActions(extension, defaultActions, ...contributors) {
-    Object.keys(defaultActions).forEach((name) => {
-        const actions = extension.get(name);
-        actions.clearContributors();
-        actions.addContributor((actionList) => actionList.addManyTail(defaultActions[name]));
-        contributors.forEach(contributor => (contributor[name] || []).forEach((callback) => actions.addContributor(callback)));
-    });
+function mergeWithDefaultActions(extension, defaultActions, ...contributors) {
+    Object.keys(defaultActions).forEach((name) => {
+        const actions = extension.get(name);
+        actions.clearContributors();
+        actions.addContributor((actionList) => actionList.addManyTail(defaultActions[name]));
+        contributors.forEach(contributor => (contributor[name] || []).forEach((callback) => actions.addContributor(callback)));
+    });
 }
 
-function generateFormFromProps(data) {
-    const extensions = data.getInjected((ExtensionsService));
-    const identifier = data.getInjected(EXTENSIONS_IDENTIFIER);
-    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';
-    const props = extensions[`${type}FormProps`].get(identifier).props;
-    const extraProperties = record[EXTRA_PROPERTIES_KEY] || {};
-    props.forEach(({ value: prop }) => {
-        const name = prop.name;
-        const isExtraProperty = prop.isExtra || name in extraProperties;
-        let value = isExtraProperty ? extraProperties[name] : name in record ? record[name] : undefined;
-        if (typeof value === 'undefined')
-            value = prop.defaultValue;
-        if (value) {
-            let adapter;
-            switch (prop.type) {
-                case "date" /* ePropType.Date */:
-                    adapter = new DateAdapter();
-                    value = adapter.toModel(adapter.fromModel(value));
-                    break;
-                case "time" /* ePropType.Time */:
-                    adapter = new TimeAdapter();
-                    value = adapter.toModel(adapter.fromModel(value));
-                    break;
-                case "datetime" /* ePropType.DateTime */:
-                    adapter = new DateTimeAdapter();
-                    value = adapter.toModel(adapter.fromModel(value));
-                    break;
-                default:
-                    break;
-            }
-        }
-        const formControl = new UntypedFormControl(value, {
-            asyncValidators: prop.asyncValidators(data),
-            validators: prop.validators(data),
-        });
-        (isExtraProperty ? extraForm : form).addControl(name, formControl);
-    });
-    return form;
+function generateFormFromProps(data) {
+    const extensions = data.getInjected((ExtensionsService));
+    const identifier = data.getInjected(EXTENSIONS_IDENTIFIER);
+    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';
+    const props = extensions[`${type}FormProps`].get(identifier).props;
+    const extraProperties = record[EXTRA_PROPERTIES_KEY] || {};
+    props.forEach(({ value: prop }) => {
+        const name = prop.name;
+        const isExtraProperty = prop.isExtra || name in extraProperties;
+        let value = isExtraProperty ? extraProperties[name] : name in record ? record[name] : undefined;
+        if (typeof value === 'undefined')
+            value = prop.defaultValue;
+        if (value) {
+            let adapter;
+            switch (prop.type) {
+                case "date" /* ePropType.Date */:
+                    adapter = new DateAdapter();
+                    value = adapter.toModel(adapter.fromModel(value));
+                    break;
+                case "time" /* ePropType.Time */:
+                    adapter = new TimeAdapter();
+                    value = adapter.toModel(adapter.fromModel(value));
+                    break;
+                case "datetime" /* ePropType.DateTime */:
+                    adapter = new DateTimeAdapter();
+                    value = adapter.toModel(adapter.fromModel(value));
+                    break;
+                default:
+                    break;
+            }
+        }
+        const formControl = new UntypedFormControl(value, {
+            asyncValidators: prop.asyncValidators(data),
+            validators: prop.validators(data),
+        });
+        (isExtraProperty ? extraForm : form).addControl(name, formControl);
+    });
+    return form;
 }
 
-function createExtraPropertyValueResolver(name) {
-    return (data) => of(data.record[EXTRA_PROPERTIES_KEY][name]);
-}
-function mergeWithDefaultProps(extension, defaultProps, ...contributors) {
-    Object.keys(defaultProps).forEach((name) => {
-        const props = extension.get(name);
-        props.clearContributors();
-        props.addContributor((propList) => propList.addManyTail(defaultProps[name]));
-        contributors.forEach(contributor => (contributor[name] || []).forEach((callback) => props.addContributor(callback)));
-    });
+function createExtraPropertyValueResolver(name) {
+    return (data) => of(data.record[EXTRA_PROPERTIES_KEY][name]);
+}
+function mergeWithDefaultProps(extension, defaultProps, ...contributors) {
+    Object.keys(defaultProps).forEach((name) => {
+        const props = extension.get(name);
+        props.clearContributors();
+        props.addContributor((propList) => propList.addManyTail(defaultProps[name]));
+        contributors.forEach(contributor => (contributor[name] || []).forEach((callback) => props.addContributor(callback)));
+    });
 }
 
-function createEnum(members) {
-    const enumObject = {};
-    members.forEach(({ name = '', value }) => {
-        enumObject[(enumObject[name] = value)] = name;
-    });
-    return enumObject;
-}
-function createEnumValueResolver(enumType, lookupEnum, propName) {
-    return data => {
-        const value = data.record[EXTRA_PROPERTIES_KEY][propName];
-        const key = lookupEnum.transformed[value];
-        const l10n = data.getInjected(LocalizationService);
-        const localizeEnum = createEnumLocalizer(l10n, enumType, lookupEnum);
-        return createLocalizationStream(l10n, localizeEnum(key));
-    };
-}
-function createEnumOptions(enumType, lookupEnum) {
-    return data => {
-        const l10n = data.getInjected(LocalizationService);
-        const localizeEnum = createEnumLocalizer(l10n, enumType, lookupEnum);
-        return createLocalizationStream(l10n, lookupEnum.fields.map(({ name = '', value }) => ({
-            key: localizeEnum(name),
-            value,
-        })));
-    };
-}
-function createLocalizationStream(l10n, mapTarget) {
-    return merge(of(null), l10n.languageChange$).pipe(map(() => mapTarget));
-}
-function createEnumLocalizer(l10n, enumType, lookupEnum) {
-    const resource = lookupEnum.localizationResource;
-    const shortType = getShortEnumType(enumType);
-    return key => l10n.localizeWithFallbackSync([resource || ''], ['Enum:' + shortType + '.' + key, shortType + '.' + key, key], key);
-}
-function getShortEnumType(enumType) {
-    return enumType.split('.').pop();
+function createEnum(members) {
+    const enumObject = {};
+    members.forEach(({ name = '', value }) => {
+        enumObject[(enumObject[name] = value)] = name;
+    });
+    return enumObject;
+}
+function createEnumValueResolver(enumType, lookupEnum, propName) {
+    return data => {
+        const value = data.record[EXTRA_PROPERTIES_KEY][propName];
+        const key = lookupEnum.transformed[value];
+        const l10n = data.getInjected(LocalizationService);
+        const localizeEnum = createEnumLocalizer(l10n, enumType, lookupEnum);
+        return createLocalizationStream(l10n, localizeEnum(key));
+    };
+}
+function createEnumOptions(enumType, lookupEnum) {
+    return data => {
+        const l10n = data.getInjected(LocalizationService);
+        const localizeEnum = createEnumLocalizer(l10n, enumType, lookupEnum);
+        return createLocalizationStream(l10n, lookupEnum.fields.map(({ name = '', value }) => ({
+            key: localizeEnum(name),
+            value,
+        })));
+    };
+}
+function createLocalizationStream(l10n, mapTarget) {
+    return merge(of(null), l10n.languageChange$).pipe(map(() => mapTarget));
+}
+function createEnumLocalizer(l10n, enumType, lookupEnum) {
+    const resource = lookupEnum.localizationResource;
+    const shortType = getShortEnumType(enumType);
+    return key => l10n.localizeWithFallbackSync([resource || ''], ['Enum:' + shortType + '.' + key, shortType + '.' + key, key], key);
+}
+function getShortEnumType(enumType) {
+    return enumType.split('.').pop();
 }
 
-function createDisplayNameLocalizationPipeKeyGenerator(localization) {
-    const generateLocalizationPipeKey = createLocalizationPipeKeyGenerator(localization);
-    return (displayName, fallback) => {
-        if (displayName && displayName.name)
-            return generateLocalizationPipeKey([displayName.resource || ''], [displayName.name], displayName.name);
-        const key = generateLocalizationPipeKey([fallback.resource || ''], ['DisplayName:' + fallback.name], undefined);
-        if (key)
-            return key;
-        return generateLocalizationPipeKey([fallback.resource || ''], [fallback.name || ''], fallback.name);
-    };
+function createDisplayNameLocalizationPipeKeyGenerator(localization) {
+    const generateLocalizationPipeKey = createLocalizationPipeKeyGenerator(localization);
+    return (displayName, fallback) => {
+        if (displayName && displayName.name)
+            return generateLocalizationPipeKey([displayName.resource || ''], [displayName.name], displayName.name);
+        const key = generateLocalizationPipeKey([fallback.resource || ''], ['DisplayName:' + fallback.name], undefined);
+        if (key)
+            return key;
+        return generateLocalizationPipeKey([fallback.resource || ''], [fallback.name || ''], fallback.name);
+    };
 }
 
-function getValidatorsFromProperty(property) {
-    const validators = [];
-    property.attributes.forEach(attr => {
-        if (attr.typeSimple && attr.typeSimple in AbpValidators) {
-            validators.push(AbpValidators[attr.typeSimple](attr.config));
-        }
-    });
-    return validators;
+function getValidatorsFromProperty(property) {
+    const validators = [];
+    property.attributes.forEach(attr => {
+        if (attr.typeSimple && attr.typeSimple in AbpValidators) {
+            validators.push(AbpValidators[attr.typeSimple](attr.config));
+        }
+    });
+    return validators;
 }
 
-function selectObjectExtensions(configState) {
-    return configState.getOne$('objectExtensions');
-}
-function selectLocalization(configState) {
-    return configState.getOne$('localization');
-}
-function selectEnums(configState) {
-    return selectObjectExtensions(configState).pipe(map((extensions) => Object.keys(extensions.enums).reduce((acc, key) => {
-        const { fields, localizationResource } = extensions.enums[key];
-        acc[key] = {
-            fields,
-            localizationResource,
-            transformed: createEnum(fields),
-        };
-        return acc;
-    }, {})));
-}
-function getObjectExtensionEntitiesFromStore(configState, moduleKey) {
-    return selectObjectExtensions(configState).pipe(map(extensions => {
-        if (!extensions)
-            return null;
-        return (extensions.modules[moduleKey] || {})
-            .entities;
-    }), map(entities => (isUndefined(entities) ? {} : entities)), filter(Boolean), take(1));
-}
-function mapEntitiesToContributors(configState, resource) {
-    return pipe(switchMap((entities) => zip(selectLocalization(configState), selectEnums(configState)).pipe(map(([localization, enums]) => {
-        const generateDisplayName = createDisplayNameLocalizationPipeKeyGenerator(localization);
-        return Object.keys(entities).reduce((acc, key) => {
-            acc.prop[key] = [];
-            acc.createForm[key] = [];
-            acc.editForm[key] = [];
-            const entity = entities[key];
-            if (!entity)
-                return acc;
-            const properties = entity.properties;
-            if (!properties)
-                return acc;
-            const mapPropertiesToContributors = createPropertiesToContributorsMapper(generateDisplayName, resource, enums);
-            return mapPropertiesToContributors(properties, acc, key);
-        }, {
-            prop: {},
-            createForm: {},
-            editForm: {},
-        });
-    }))), take(1));
-}
-function createPropertiesToContributorsMapper(generateDisplayName, resource, enums) {
-    return (properties, contributors, key) => {
-        const isExtra = true;
-        const generateTypeaheadDisplayName = createTypeaheadDisplayNameGenerator(generateDisplayName, properties);
-        Object.keys(properties).forEach((name) => {
-            const property = properties[name];
-            const propName = name;
-            const lookup = property.ui.lookup || {};
-            const type = getTypeaheadType(lookup, name) || getTypeFromProperty(property);
-            const generateDN = hasTypeaheadTextSuffix(name)
-                ? generateTypeaheadDisplayName
-                : generateDisplayName;
-            const displayName = generateDN(property.displayName, { name, resource });
-            if (property.ui.onTable.isVisible) {
-                const sortable = Boolean(property.ui.onTable.isSortable);
-                const columnWidth = type === "boolean" /* ePropType.Boolean */ ? 150 : 250;
-                const valueResolver = type === "enum" /* ePropType.Enum */ && property.type
-                    ? createEnumValueResolver(property.type, enums[property.type], propName)
-                    : createExtraPropertyValueResolver(propName);
-                const entityProp = new EntityProp({
-                    type,
-                    name: propName,
-                    displayName,
-                    sortable,
-                    columnWidth,
-                    valueResolver,
-                    isExtra,
-                });
-                const contributor = (propList) => propList.addTail(entityProp);
-                contributors.prop[key].push(contributor);
-            }
-            const isOnCreateForm = property.ui.onCreateForm.isVisible;
-            const isOnEditForm = property.ui.onEditForm.isVisible;
-            if (isOnCreateForm || isOnEditForm) {
-                const defaultValue = property.defaultValue;
-                const validators = () => getValidatorsFromProperty(property);
-                let options;
-                if (type === "enum" /* ePropType.Enum */)
-                    options = createEnumOptions(propName, enums[property.type || '']);
-                else if (type === "typeahead" /* ePropType.Typeahead */)
-                    options = createTypeaheadOptions(lookup);
-                const formProp = new FormProp({
-                    type,
-                    name: propName,
-                    displayName,
-                    options,
-                    defaultValue,
-                    validators,
-                    isExtra,
-                });
-                const formContributor = (propList) => propList.addTail(formProp);
-                if (isOnCreateForm)
-                    contributors.createForm[key].push(formContributor);
-                if (isOnEditForm)
-                    contributors.editForm[key].push(formContributor);
-            }
-        });
-        return contributors;
-    };
-}
-function getTypeFromProperty(property) {
-    return property?.typeSimple?.replace(/\?$/, '');
-}
-function isUndefined(obj) {
-    return typeof obj === 'undefined';
+function selectObjectExtensions(configState) {
+    return configState.getOne$('objectExtensions');
+}
+function selectLocalization(configState) {
+    return configState.getOne$('localization');
+}
+function selectEnums(configState) {
+    return selectObjectExtensions(configState).pipe(map((extensions) => Object.keys(extensions.enums).reduce((acc, key) => {
+        const { fields, localizationResource } = extensions.enums[key];
+        acc[key] = {
+            fields,
+            localizationResource,
+            transformed: createEnum(fields),
+        };
+        return acc;
+    }, {})));
+}
+function getObjectExtensionEntitiesFromStore(configState, moduleKey) {
+    return selectObjectExtensions(configState).pipe(map(extensions => {
+        if (!extensions)
+            return null;
+        return (extensions.modules[moduleKey] || {})
+            .entities;
+    }), map(entities => (isUndefined(entities) ? {} : entities)), filter(Boolean), take(1));
+}
+function mapEntitiesToContributors(configState, resource) {
+    return pipe(switchMap((entities) => zip(selectLocalization(configState), selectEnums(configState)).pipe(map(([localization, enums]) => {
+        const generateDisplayName = createDisplayNameLocalizationPipeKeyGenerator(localization);
+        return Object.keys(entities).reduce((acc, key) => {
+            acc.prop[key] = [];
+            acc.createForm[key] = [];
+            acc.editForm[key] = [];
+            const entity = entities[key];
+            if (!entity)
+                return acc;
+            const properties = entity.properties;
+            if (!properties)
+                return acc;
+            const mapPropertiesToContributors = createPropertiesToContributorsMapper(generateDisplayName, resource, enums);
+            return mapPropertiesToContributors(properties, acc, key);
+        }, {
+            prop: {},
+            createForm: {},
+            editForm: {},
+        });
+    }))), take(1));
+}
+function createPropertiesToContributorsMapper(generateDisplayName, resource, enums) {
+    return (properties, contributors, key) => {
+        const isExtra = true;
+        const generateTypeaheadDisplayName = createTypeaheadDisplayNameGenerator(generateDisplayName, properties);
+        Object.keys(properties).forEach((name) => {
+            const property = properties[name];
+            const propName = name;
+            const lookup = property.ui.lookup || {};
+            const type = getTypeaheadType(lookup, name) || getTypeFromProperty(property);
+            const generateDN = hasTypeaheadTextSuffix(name)
+                ? generateTypeaheadDisplayName
+                : generateDisplayName;
+            const displayName = generateDN(property.displayName, { name, resource });
+            if (property.ui.onTable.isVisible) {
+                const sortable = Boolean(property.ui.onTable.isSortable);
+                const columnWidth = type === "boolean" /* ePropType.Boolean */ ? 150 : 250;
+                const valueResolver = type === "enum" /* ePropType.Enum */ &&
+                    property.type
+                    ? createEnumValueResolver(property.type, enums[property.type], propName)
+                    : createExtraPropertyValueResolver(propName);
+                const entityProp = new EntityProp({
+                    type,
+                    name: propName,
+                    displayName,
+                    sortable,
+                    columnWidth,
+                    valueResolver,
+                    isExtra,
+                });
+                const contributor = (propList) => propList.addTail(entityProp);
+                contributors.prop[key].push(contributor);
+            }
+            const isOnCreateForm = property.ui.onCreateForm.isVisible;
+            const isOnEditForm = property.ui.onEditForm.isVisible;
+            if (isOnCreateForm || isOnEditForm) {
+                const defaultValue = property.defaultValue;
+                const formText = property.formText;
+                const validators = () => getValidatorsFromProperty(property);
+                let options;
+                if (type === "enum" /* ePropType.Enum */)
+                    options = createEnumOptions(propName, enums[property.type || '']);
+                else if (type === "typeahead" /* ePropType.Typeahead */)
+                    options = createTypeaheadOptions(lookup);
+                const formProp = new FormProp({
+                    type,
+                    name: propName,
+                    displayName,
+                    options,
+                    defaultValue,
+                    validators,
+                    isExtra,
+                    formText,
+                });
+                const formContributor = (propList) => propList.addTail(formProp);
+                if (isOnCreateForm)
+                    contributors.createForm[key].push(formContributor);
+                if (isOnEditForm)
+                    contributors.editForm[key].push(formContributor);
+            }
+        });
+        return contributors;
+    };
+}
+function getTypeFromProperty(property) {
+    return property?.typeSimple?.replace(/\?$/, '');
+}
+function isUndefined(obj) {
+    return typeof obj === 'undefined';
 }
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { ActionList, BaseUiExtensionsModule, CreateFormPropsFactory, CreateInjectorPipe, DateAdapter, DateTimeAdapter, DateTimePickerComponent, DisabledDirective, ENTITY_PROP_TYPE_CLASSES, EXTENSIBLE_FORM_VIEW_PROVIDER, EXTENSIONS_ACTION_CALLBACK, EXTENSIONS_ACTION_DATA, EXTENSIONS_ACTION_TYPE, EXTENSIONS_FORM_PROP, EXTENSIONS_FORM_PROP_DATA, EXTENSIONS_IDENTIFIER, EXTRA_PROPERTIES_KEY, EditFormPropsFactory, EntityAction, EntityActionList, EntityActions, EntityActionsFactory, EntityProp, EntityPropList, EntityProps, EntityPropsFactory, ExtensibleFormComponent, ExtensibleFormPropComponent, ExtensibleTableComponent, ExtensionsService, FormProp, FormPropData, FormPropList, FormProps, GridActionsComponent, objectExtensions as ObjectExtensions, PROP_DATA_STREAM, PageToolbarComponent, PropDataDirective, PropList, TimeAdapter, ToolbarAction, ToolbarActionList, ToolbarActions, ToolbarActionsFactory, ToolbarComponent, UiExtensionsModule, createExtraPropertyValueResolver, generateFormFromProps, getObjectExtensionEntitiesFromStore, mapEntitiesToContributors, mergeWithDefaultActions, mergeWithDefaultProps };