@abp/ng.theme.shared 4.4.1 → 5.0.0-beta.1-1

package/bundles/abp-ng.theme.shared-extensions.umd.js

@@ -1,10 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@ng-bootstrap/ng-bootstrap'), require('@angular/forms'), require('@abp/ng.core'), require('rxjs'), require('rxjs/operators'), require('snq'), require('@abp/utils'), require('@abp/ng.theme.shared'), require('@ngx-validate/core')) :
-    typeof define === 'function' && define.amd ? define('@abp/ng.theme.shared/extensions', ['exports', '@angular/core', '@angular/common', '@ng-bootstrap/ng-bootstrap', '@angular/forms', '@abp/ng.core', 'rxjs', 'rxjs/operators', 'snq', '@abp/utils', '@abp/ng.theme.shared', '@ngx-validate/core'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.abp = global.abp || {}, global.abp.ng = global.abp.ng || {}, global.abp.ng.theme = global.abp.ng.theme || {}, global.abp.ng.theme.shared = global.abp.ng.theme.shared || {}, global.abp.ng.theme.shared.extensions = {}), global.ng.core, global.ng.common, global.ngBootstrap, global.ng.forms, global.ng_core, global.rxjs, global.rxjs.operators, global.snq, global.utils, global.abp.ng.theme.shared, global.core));
-}(this, (function (exports, i0, common, ngBootstrap, forms, ng_core, rxjs, operators, snq, utils, ng_theme_shared, core) { 'use strict';
-
-    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/core'), require('@angular/common'), require('@ng-bootstrap/ng-bootstrap'), require('@angular/forms'), require('@ngx-validate/core'), require('@abp/ng.core'), require('rxjs'), require('rxjs/operators'), require('@abp/utils'), require('@swimlane/ngx-datatable'), require('@abp/ng.theme.shared')) :
+    typeof define === 'function' && define.amd ? define('@abp/ng.theme.shared/extensions', ['exports', '@angular/core', '@angular/common', '@ng-bootstrap/ng-bootstrap', '@angular/forms', '@ngx-validate/core', '@abp/ng.core', 'rxjs', 'rxjs/operators', '@abp/utils', '@swimlane/ngx-datatable', '@abp/ng.theme.shared'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.abp = global.abp || {}, global.abp.ng = global.abp.ng || {}, global.abp.ng.theme = global.abp.ng.theme || {}, global.abp.ng.theme.shared = global.abp.ng.theme.shared || {}, global.abp.ng.theme.shared.extensions = {}), global.ng.core, global.ng.common, global.i2, global.ng.forms, global.i6, global.i1, global.rxjs, global.rxjs.operators, global.utils, global.i2$2, global.abp.ng.theme.shared));
+}(this, (function (exports, i0, i5, i2, i2$1, i6, i1, rxjs, operators, utils, i2$2, i4) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -27,7 +25,13 @@
     }
 
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var snq__default = /*#__PURE__*/_interopDefaultLegacy(snq);
+    var i5__namespace = /*#__PURE__*/_interopNamespace(i5);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i2__namespace$1 = /*#__PURE__*/_interopNamespace(i2$1);
+    var i6__namespace = /*#__PURE__*/_interopNamespace(i6);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
+    var i2__namespace$2 = /*#__PURE__*/_interopNamespace(i2$2);
+    var i4__namespace = /*#__PURE__*/_interopNamespace(i4);
 
     var DateTimeAdapter = /** @class */ (function () {
         function DateTimeAdapter() {
@@ -58,9 +62,11 @@
         };
         return DateTimeAdapter;
     }());
-    DateTimeAdapter.decorators = [
-        { type: i0.Injectable }
-    ];
+    DateTimeAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateTimeAdapter, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DateTimeAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateTimeAdapter });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateTimeAdapter, decorators: [{
+                type: i0.Injectable
+            }] });
 
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
@@ -297,7 +303,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -407,7 +413,7 @@
             if (!value)
                 return '';
             var date = new Date(value.year, value.month - 1, value.day);
-            var formattedDate = common.formatDate(date, 'yyyy-MM-dd', 'en');
+            var formattedDate = i5.formatDate(date, 'yyyy-MM-dd', 'en');
             return formattedDate;
         };
         DateAdapter.prototype.dateOf = function (value) {
@@ -415,10 +421,12 @@
             return new Date(dateUtc.getTime() + Math.abs(dateUtc.getTimezoneOffset() * 60000));
         };
         return DateAdapter;
-    }(ngBootstrap.NgbDateAdapter));
-    DateAdapter.decorators = [
-        { type: i0.Injectable }
-    ];
+    }(i2.NgbDateAdapter));
+    DateAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateAdapter, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DateAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateAdapter });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateAdapter, decorators: [{
+                type: i0.Injectable
+            }] });
 
     var TimeAdapter = /** @class */ (function (_super) {
         __extends(TimeAdapter, _super);
@@ -429,7 +437,7 @@
             if (!value)
                 return null;
             var date = isTimeStr(value)
-                ? new (Date.bind.apply(Date, __spread([void 0, 0, 0, 1], value.split(':').map(Number))))() : new Date(value);
+                ? new (Date.bind.apply(Date, __spreadArray([void 0, 0, 0, 1], __read(value.split(':').map(Number)))))() : new Date(value);
             if (isNaN(date))
                 return null;
             return {
@@ -442,14 +450,16 @@
             if (!value)
                 return '';
             var date = new Date(0, 0, 1, value.hour, value.minute, value.second);
-            var formattedDate = common.formatDate(date, 'HH:mm', 'en');
+            var formattedDate = i5.formatDate(date, 'HH:mm', 'en');
             return formattedDate;
         };
         return TimeAdapter;
-    }(ngBootstrap.NgbTimeAdapter));
-    TimeAdapter.decorators = [
-        { type: i0.Injectable }
-    ];
+    }(i2.NgbTimeAdapter));
+    TimeAdapter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: TimeAdapter, deps: null, target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    TimeAdapter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: TimeAdapter });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: TimeAdapter, decorators: [{
+                type: i0.Injectable
+            }] });
     function isTimeStr(value) {
         return /^((2[123])|[01][0-9])(\:[0-5][0-9]){1,2}$/.test(String(value));
     }
@@ -458,7 +468,6 @@
         return dependency;
     }
 
-    var ɵ0$2 = selfFactory;
     var DateTimePickerComponent = /** @class */ (function () {
         function DateTimePickerComponent(cdRef) {
             this.cdRef = cdRef;
@@ -472,38 +481,56 @@
         };
         return DateTimePickerComponent;
     }());
-    DateTimePickerComponent.decorators = [
-        { type: i0.Component, args: [{
-                    exportAs: 'abpDateTimePicker',
-                    selector: 'abp-date-time-picker',
-                    template: "\n    <input\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      (ngModelChange)=\"setTime($event)\"\n      (click)=\"datepicker.open()\"\n      (keyup.space)=\"datepicker.open()\"\n      ngbDatepicker\n      #datepicker=\"ngbDatepicker\"\n      type=\"text\"\n      class=\"form-control\"\n    />\n    <ngb-timepicker\n      #timepicker\n      [formControlName]=\"prop.name\"\n      (ngModelChange)=\"setDate($event)\"\n      [meridian]=\"meridian\"\n    ></ngb-timepicker>\n  ",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    viewProviders: [
-                        {
-                            provide: forms.ControlContainer,
-                            useFactory: ɵ0$2,
-                            deps: [[new i0.Optional(), new i0.SkipSelf(), forms.ControlContainer]],
-                        },
-                        {
-                            provide: ngBootstrap.NgbDateAdapter,
-                            useClass: DateTimeAdapter,
-                        },
-                        {
-                            provide: ngBootstrap.NgbTimeAdapter,
-                            useClass: DateTimeAdapter,
-                        },
-                    ]
-                },] }
-    ];
-    DateTimePickerComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    DateTimePickerComponent.propDecorators = {
-        prop: [{ type: i0.Input }],
-        meridian: [{ type: i0.Input }],
-        date: [{ type: i0.ViewChild, args: [ngBootstrap.NgbInputDatepicker,] }],
-        time: [{ type: i0.ViewChild, args: [ngBootstrap.NgbTimepicker,] }]
-    };
+    DateTimePickerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateTimePickerComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    DateTimePickerComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: DateTimePickerComponent, selector: "abp-date-time-picker", inputs: { prop: "prop", meridian: "meridian" }, viewQueries: [{ propertyName: "date", first: true, predicate: i2.NgbInputDatepicker, descendants: true }, { propertyName: "time", first: true, predicate: i2.NgbTimepicker, descendants: true }], exportAs: ["abpDateTimePicker"], ngImport: i0__namespace, template: "\n    <input\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      (ngModelChange)=\"setTime($event)\"\n      (click)=\"datepicker.open()\"\n      (keyup.space)=\"datepicker.open()\"\n      ngbDatepicker\n      #datepicker=\"ngbDatepicker\"\n      type=\"text\"\n      class=\"form-control\"\n    />\n    <ngb-timepicker\n      #timepicker\n      [formControlName]=\"prop.name\"\n      (ngModelChange)=\"setDate($event)\"\n      [meridian]=\"meridian\"\n    ></ngb-timepicker>\n  ", isInline: true, components: [{ type: i2__namespace.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }], directives: [{ type: i2__namespace.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6__namespace.ValidationDirective, selector: "[formControl],[formControlName]", inputs: ["blueprints", "errorTemplate", "invalidClasses", "mapErrorsFn", "skipValidation", "targetSelector", "validateOnSubmit"] }], viewProviders: [
+            {
+                provide: i2$1.ControlContainer,
+                useFactory: selfFactory,
+                deps: [[new i0.Optional(), new i0.SkipSelf(), i2$1.ControlContainer]],
+            },
+            {
+                provide: i2.NgbDateAdapter,
+                useClass: DateTimeAdapter,
+            },
+            {
+                provide: i2.NgbTimeAdapter,
+                useClass: DateTimeAdapter,
+            },
+        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateTimePickerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        exportAs: 'abpDateTimePicker',
+                        selector: 'abp-date-time-picker',
+                        template: "\n    <input\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      (ngModelChange)=\"setTime($event)\"\n      (click)=\"datepicker.open()\"\n      (keyup.space)=\"datepicker.open()\"\n      ngbDatepicker\n      #datepicker=\"ngbDatepicker\"\n      type=\"text\"\n      class=\"form-control\"\n    />\n    <ngb-timepicker\n      #timepicker\n      [formControlName]=\"prop.name\"\n      (ngModelChange)=\"setDate($event)\"\n      [meridian]=\"meridian\"\n    ></ngb-timepicker>\n  ",
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        viewProviders: [
+                            {
+                                provide: i2$1.ControlContainer,
+                                useFactory: selfFactory,
+                                deps: [[new i0.Optional(), new i0.SkipSelf(), i2$1.ControlContainer]],
+                            },
+                            {
+                                provide: i2.NgbDateAdapter,
+                                useClass: DateTimeAdapter,
+                            },
+                            {
+                                provide: i2.NgbTimeAdapter,
+                                useClass: DateTimeAdapter,
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }]; }, propDecorators: { prop: [{
+                    type: i0.Input
+                }], meridian: [{
+                    type: i0.Input
+                }], date: [{
+                    type: i0.ViewChild,
+                    args: [i2.NgbInputDatepicker]
+                }], time: [{
+                    type: i0.ViewChild,
+                    args: [i2.NgbTimepicker]
+                }] } });
 
     var EXTRA_PROPERTIES_KEY = 'extraProperties';
 
@@ -514,7 +541,7 @@
             var _a;
             return searchText
                 ? data
-                    .getInjected(ng_core.RestService)
+                    .getInjected(i1.RestService)
                     .request({
                     method: 'GET',
                     url: lookup.url,
@@ -559,7 +586,34 @@
         return name.replace(TYPEAHEAD_TEXT_SUFFIX_REGEX, '');
     }
 
-    var ɵ0$1 = selfFactory;
+    var DisabledDirective = /** @class */ (function () {
+        function DisabledDirective(ngControl) {
+            this.ngControl = ngControl;
+        }
+        // Related issue: https://github.com/angular/angular/issues/35330
+        DisabledDirective.prototype.ngOnChanges = function (_a) {
+            var abpDisabled = _a.abpDisabled;
+            if (this.ngControl.control && abpDisabled) {
+                this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
+            }
+        };
+        return DisabledDirective;
+    }());
+    DisabledDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DisabledDirective, deps: [{ token: i2__namespace$1.NgControl, host: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    DisabledDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: DisabledDirective, selector: "[abpDisabled]", inputs: { abpDisabled: "abpDisabled" }, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DisabledDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[abpDisabled]',
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i2__namespace$1.NgControl, decorators: [{
+                            type: i0.Host
+                        }] }];
+        }, propDecorators: { abpDisabled: [{
+                    type: i0.Input
+                }] } });
+
     var ExtensibleFormPropComponent = /** @class */ (function () {
         function ExtensibleFormPropComponent(cdRef, track, configState, groupDirective) {
             var _this = this;
@@ -656,7 +710,7 @@
         };
         ExtensibleFormPropComponent.prototype.ngOnChanges = function (_a) {
             var prop = _a.prop;
-            var currentProp = snq__default['default'](function () { return prop.currentValue; });
+            var currentProp = prop === null || prop === void 0 ? void 0 : prop.currentValue;
             var _b = currentProp || {}, options = _b.options, readonly = _b.readonly, disabled = _b.disabled, validators = _b.validators;
             if (options)
                 this.options$ = options(this.data);
@@ -674,38 +728,52 @@
         };
         return ExtensibleFormPropComponent;
     }());
-    ExtensibleFormPropComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'abp-extensible-form-prop',
-                    template: "<div class=\"form-group\" *abpPermission=\"prop.permission\" [ngSwitch]=\"getComponent(prop)\">\n  <ng-template ngSwitchCase=\"input\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <input\n      #field\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      [autocomplete]=\"prop.autocomplete\"\n      [type]=\"getType(prop)\"\n      [abpDisabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      class=\"form-control\"\n    />\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"hidden\">\n    <input [formControlName]=\"prop.name\" type=\"hidden\" />\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"checkbox\">\n    <div class=\"custom-checkbox custom-control\" validationTarget>\n      <input\n        #field\n        [id]=\"prop.id\"\n        [formControlName]=\"prop.name\"\n        [abpDisabled]=\"disabled\"\n        type=\"checkbox\"\n        class=\"custom-control-input\"\n      />\n      <ng-template\n        [ngTemplateOutlet]=\"label\"\n        [ngTemplateOutletContext]=\"{ $implicit: 'custom-control-label' }\"\n      ></ng-template>\n    </div>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"select\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <select\n      #field\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      [abpDisabled]=\"disabled\"\n      class=\"custom-select form-control\"\n    >\n      <option\n        *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\n        [ngValue]=\"option.value\"\n      >\n        {{ option.key }}\n      </option>\n    </select>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"multiselect\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <select\n      #field\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      [abpDisabled]=\"disabled\"\n      multiple=\"multiple\"\n      class=\"custom-select form-control\"\n    >\n      <option\n        *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\n        [ngValue]=\"option.value\"\n      >\n        {{ option.key }}\n      </option>\n    </select>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"typeahead\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <div #typeahead class=\"position-relative\" validationStyle validationTarget>\n      <input\n        #field\n        [id]=\"prop.id\"\n        [autocomplete]=\"prop.autocomplete\"\n        [abpDisabled]=\"disabled\"\n        [ngbTypeahead]=\"search\"\n        [editable]=\"false\"\n        [inputFormatter]=\"typeaheadFormatter\"\n        [resultFormatter]=\"typeaheadFormatter\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        [(ngModel)]=\"typeaheadModel\"\n        (selectItem)=\"setTypeaheadValue($event.item)\"\n        (blur)=\"setTypeaheadValue(typeaheadModel)\"\n        [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\n        class=\"form-control\"\n      />\n      <input [formControlName]=\"prop.name\" type=\"hidden\" />\n    </div>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"date\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <input\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      (click)=\"datepicker.open()\"\n      (keyup.space)=\"datepicker.open()\"\n      ngbDatepicker\n      #datepicker=\"ngbDatepicker\"\n      type=\"text\"\n      class=\"form-control\"\n    />\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"time\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"dateTime\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"textarea\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <textarea\n      #field\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      [abpDisabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      class=\"form-control\"\n    ></textarea>\n  </ng-template>\n</div>\n\n<ng-template #label let-classes>\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes\"\n    >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label\n  >\n</ng-template>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    viewProviders: [
-                        {
-                            provide: forms.ControlContainer,
-                            useFactory: ɵ0$1,
-                            deps: [[new i0.Optional(), new i0.SkipSelf(), forms.ControlContainer]],
-                        },
-                        { provide: ngBootstrap.NgbDateAdapter, useClass: DateAdapter },
-                        { provide: ngBootstrap.NgbTimeAdapter, useClass: TimeAdapter },
-                    ]
-                },] }
-    ];
-    ExtensibleFormPropComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: ng_core.TrackByService },
-        { type: ng_core.ConfigStateService },
-        { type: forms.FormGroupDirective }
-    ]; };
-    ExtensibleFormPropComponent.propDecorators = {
-        data: [{ type: i0.Input }],
-        prop: [{ type: i0.Input }],
-        first: [{ type: i0.Input }],
-        fieldRef: [{ type: i0.ViewChild, args: ['field',] }]
-    };
+    ExtensibleFormPropComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ExtensibleFormPropComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.TrackByService }, { token: i1__namespace.ConfigStateService }, { token: i2__namespace$1.FormGroupDirective }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ExtensibleFormPropComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first" }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0__namespace, template: "<div class=\"form-group\" *abpPermission=\"prop.permission\" [ngSwitch]=\"getComponent(prop)\">\n  <ng-template ngSwitchCase=\"input\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <input\n      #field\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      [autocomplete]=\"prop.autocomplete\"\n      [type]=\"getType(prop)\"\n      [abpDisabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      class=\"form-control\"\n    />\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"hidden\">\n    <input [formControlName]=\"prop.name\" type=\"hidden\" />\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"checkbox\">\n    <div class=\"custom-checkbox custom-control\" validationTarget>\n      <input\n        #field\n        [id]=\"prop.id\"\n        [formControlName]=\"prop.name\"\n        [abpDisabled]=\"disabled\"\n        type=\"checkbox\"\n        class=\"custom-control-input\"\n      />\n      <ng-template\n        [ngTemplateOutlet]=\"label\"\n        [ngTemplateOutletContext]=\"{ $implicit: 'custom-control-label' }\"\n      ></ng-template>\n    </div>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"select\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <select\n      #field\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      [abpDisabled]=\"disabled\"\n      class=\"custom-select form-control\"\n    >\n      <option\n        *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\n        [ngValue]=\"option.value\"\n      >\n        {{ option.key }}\n      </option>\n    </select>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"multiselect\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <select\n      #field\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      [abpDisabled]=\"disabled\"\n      multiple=\"multiple\"\n      class=\"custom-select form-control\"\n    >\n      <option\n        *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\n        [ngValue]=\"option.value\"\n      >\n        {{ option.key }}\n      </option>\n    </select>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"typeahead\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <div #typeahead class=\"position-relative\" validationStyle validationTarget>\n      <input\n        #field\n        [id]=\"prop.id\"\n        [autocomplete]=\"prop.autocomplete\"\n        [abpDisabled]=\"disabled\"\n        [ngbTypeahead]=\"search\"\n        [editable]=\"false\"\n        [inputFormatter]=\"typeaheadFormatter\"\n        [resultFormatter]=\"typeaheadFormatter\"\n        [ngModelOptions]=\"{ standalone: true }\"\n        [(ngModel)]=\"typeaheadModel\"\n        (selectItem)=\"setTypeaheadValue($event.item)\"\n        (blur)=\"setTypeaheadValue(typeaheadModel)\"\n        [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\n        class=\"form-control\"\n      />\n      <input [formControlName]=\"prop.name\" type=\"hidden\" />\n    </div>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"date\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <input\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      (click)=\"datepicker.open()\"\n      (keyup.space)=\"datepicker.open()\"\n      ngbDatepicker\n      #datepicker=\"ngbDatepicker\"\n      type=\"text\"\n      class=\"form-control\"\n    />\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"time\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"dateTime\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\n  </ng-template>\n\n  <ng-template ngSwitchCase=\"textarea\">\n    <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\n    <textarea\n      #field\n      [id]=\"prop.id\"\n      [formControlName]=\"prop.name\"\n      [abpDisabled]=\"disabled\"\n      [readonly]=\"readonly\"\n      class=\"form-control\"\n    ></textarea>\n  </ng-template>\n</div>\n\n<ng-template #label let-classes>\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes\"\n    >{{ prop.displayName | abpLocalization }} {{ asterisk }}</label\n  >\n</ng-template>\n", components: [{ type: i2__namespace.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { type: DateTimePickerComponent, selector: "abp-date-time-picker", inputs: ["prop", "meridian"], exportAs: ["abpDateTimePicker"] }], directives: [{ type: i1__namespace.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission"] }, { type: i5__namespace.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5__namespace.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2__namespace$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2__namespace$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2__namespace$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6__namespace.ValidationDirective, selector: "[formControl],[formControlName]", inputs: ["blueprints", "errorTemplate", "invalidClasses", "mapErrorsFn", "skipValidation", "targetSelector", "validateOnSubmit"] }, { type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { type: i6__namespace.ValidationTargetDirective, selector: "[validationTarget]" }, { type: i2__namespace$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2__namespace$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2__namespace$1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i6__namespace.ValidationStyleDirective, selector: "[validationStyle]" }, { type: i2__namespace.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i2__namespace$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2__namespace.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["disabled", "autoClose", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "restoreFocus", "showWeekdays", "showWeekNumbers", "startDate", "container", "positionTarget"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i5__namespace.AsyncPipe, "abpLocalization": i1__namespace.LocalizationPipe }, viewProviders: [
+            {
+                provide: i2$1.ControlContainer,
+                useFactory: selfFactory,
+                deps: [[new i0.Optional(), new i0.SkipSelf(), i2$1.ControlContainer]],
+            },
+            { provide: i2.NgbDateAdapter, useClass: DateAdapter },
+            { provide: i2.NgbTimeAdapter, useClass: TimeAdapter },
+        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ExtensibleFormPropComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-extensible-form-prop',
+                        templateUrl: './extensible-form-prop.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        viewProviders: [
+                            {
+                                provide: i2$1.ControlContainer,
+                                useFactory: selfFactory,
+                                deps: [[new i0.Optional(), new i0.SkipSelf(), i2$1.ControlContainer]],
+                            },
+                            { provide: i2.NgbDateAdapter, useClass: DateAdapter },
+                            { provide: i2.NgbTimeAdapter, useClass: TimeAdapter },
+                        ],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.TrackByService }, { type: i1__namespace.ConfigStateService }, { type: i2__namespace$1.FormGroupDirective }]; }, propDecorators: { data: [{
+                    type: i0.Input
+                }], prop: [{
+                    type: i0.Input
+                }], first: [{
+                    type: i0.Input
+                }], fieldRef: [{
+                    type: i0.ViewChild,
+                    args: ['field']
+                }] } });
     function isRequired(validator) {
-        return validator === forms.Validators.required || validator === ng_core.AbpValidators.required;
+        return validator === i2$1.Validators.required || validator === i1.AbpValidators.required;
     }
 
+    var EXTENSIONS_IDENTIFIER = new i0.InjectionToken('EXTENSIONS_IDENTIFIER');
+    var EXTENSIONS_ACTION_TYPE = new i0.InjectionToken('EXTENSIONS_ACTION_TYPE');
+    var EXTENSIONS_ACTION_DATA = new i0.InjectionToken('EXTENSIONS_ACTION_DATA');
+    var EXTENSIONS_ACTION_CALLBACK = new i0.InjectionToken('EXTENSIONS_ACTION_DATA');
+    var PROP_DATA_STREAM = new i0.InjectionToken('PROP_DATA_STREAM');
+
     var ActionList = /** @class */ (function (_super) {
         __extends(ActionList, _super);
         function ActionList() {
@@ -782,7 +850,7 @@
     var EntityActions = /** @class */ (function (_super) {
         __extends(EntityActions, _super);
         function EntityActions() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this._ctor = EntityActionList;
             return _this;
         }
@@ -791,7 +859,7 @@
     var EntityActionsFactory = /** @class */ (function (_super) {
         __extends(EntityActionsFactory, _super);
         function EntityActionsFactory() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this._ctor = EntityActions;
             return _this;
         }
@@ -894,7 +962,7 @@
     var EntityProps = /** @class */ (function (_super) {
         __extends(EntityProps, _super);
         function EntityProps() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this._ctor = EntityPropList;
             return _this;
         }
@@ -903,7 +971,7 @@
     var EntityPropsFactory = /** @class */ (function (_super) {
         __extends(EntityPropsFactory, _super);
         function EntityPropsFactory() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this._ctor = EntityProps;
             return _this;
         }
@@ -917,6 +985,8 @@
             _this.sortable = options.sortable || false;
             _this.valueResolver = options.valueResolver || (function (data) { return rxjs.of(data.record[_this.name]); });
             _this.action = options.action;
+            _this.component = options.component;
+            _this.enumList = options.enumList;
             return _this;
         }
         EntityProp.create = function (options) {
@@ -938,7 +1008,7 @@
     var FormProps = /** @class */ (function (_super) {
         __extends(FormProps, _super);
         function FormProps() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this._ctor = FormPropList;
             return _this;
         }
@@ -947,7 +1017,7 @@
     var CreateFormPropsFactory = /** @class */ (function (_super) {
         __extends(CreateFormPropsFactory, _super);
         function CreateFormPropsFactory() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this._ctor = FormProps;
             return _this;
         }
@@ -956,7 +1026,7 @@
     var EditFormPropsFactory = /** @class */ (function (_super) {
         __extends(EditFormPropsFactory, _super);
         function EditFormPropsFactory() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this._ctor = FormProps;
             return _this;
         }
@@ -990,7 +1060,6 @@
         function FormPropData(injector, record) {
             var _this = _super.call(this) || this;
             _this.record = record;
-            // tslint:disable-next-line
             _this.getInjected = injector.get.bind(injector);
             return _this;
         }
@@ -1010,7 +1079,7 @@
     var ToolbarActions = /** @class */ (function (_super) {
         __extends(ToolbarActions, _super);
         function ToolbarActions() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this._ctor = ToolbarActionList;
             return _this;
         }
@@ -1019,7 +1088,7 @@
     var ToolbarActionsFactory = /** @class */ (function (_super) {
         __extends(ToolbarActionsFactory, _super);
         function ToolbarActionsFactory() {
-            var _this = _super.apply(this, __spread(arguments)) || this;
+            var _this = _super.apply(this, __spreadArray([], __read(arguments))) || this;
             _this._ctor = ToolbarActions;
             return _this;
         }
@@ -1067,19 +1136,55 @@
         }
         return ExtensionsService;
     }());
-    ExtensionsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ExtensionsService_Factory() { return new ExtensionsService(); }, token: ExtensionsService, providedIn: "root" });
-    ExtensionsService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
+    ExtensionsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ExtensionsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ExtensionsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ExtensionsService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ExtensionsService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }] });
 
-    var EXTENSIONS_IDENTIFIER = new i0.InjectionToken('EXTENSIONS_IDENTIFIER');
-    var EXTENSIONS_ACTION_TYPE = new i0.InjectionToken('EXTENSIONS_ACTION_TYPE');
-    var EXTENSIONS_ACTION_DATA = new i0.InjectionToken('EXTENSIONS_ACTION_DATA');
-    var EXTENSIONS_ACTION_CALLBACK = new i0.InjectionToken('EXTENSIONS_ACTION_DATA');
+    var PropDataDirective = /** @class */ (function (_super) {
+        __extends(PropDataDirective, _super);
+        function PropDataDirective(tempRef, vcRef, injector) {
+            var _this = _super.call(this) || this;
+            _this.tempRef = tempRef;
+            _this.vcRef = vcRef;
+            _this.getInjected = injector.get.bind(injector);
+            return _this;
+        }
+        PropDataDirective.prototype.ngOnChanges = function () {
+            this.vcRef.clear();
+            this.vcRef.createEmbeddedView(this.tempRef, {
+                $implicit: this.data,
+                index: 0,
+            });
+        };
+        PropDataDirective.prototype.ngOnDestroy = function () {
+            this.vcRef.clear();
+        };
+        return PropDataDirective;
+    }(PropData));
+    PropDataDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: PropDataDirective, deps: [{ token: i0__namespace.TemplateRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    PropDataDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: PropDataDirective, selector: "[abpPropData]", inputs: { propList: ["abpPropDataFromList", "propList"], record: ["abpPropDataWithRecord", "record"], index: ["abpPropDataAtIndex", "index"] }, exportAs: ["abpPropData"], usesInheritance: true, usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: PropDataDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        exportAs: 'abpPropData',
+                        selector: '[abpPropData]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.TemplateRef }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.Injector }]; }, propDecorators: { propList: [{
+                    type: i0.Input,
+                    args: ['abpPropDataFromList']
+                }], record: [{
+                    type: i0.Input,
+                    args: ['abpPropDataWithRecord']
+                }], index: [{
+                    type: i0.Input,
+                    args: ['abpPropDataAtIndex']
+                }] } });
 
-    var ɵ0 = selfFactory;
     var ExtensibleFormComponent = /** @class */ (function () {
         function ExtensibleFormComponent(cdRef, track, container, extensions, identifier) {
             this.cdRef = cdRef;
@@ -1114,47 +1219,118 @@
         });
         return ExtensibleFormComponent;
     }());
-    ExtensibleFormComponent.decorators = [
-        { type: i0.Component, args: [{
-                    exportAs: 'abpExtensibleForm',
-                    selector: 'abp-extensible-form',
-                    template: "<ng-container *ngIf=\"form\">\n  <ng-container *abpPropData=\"let data; fromList: propList; withRecord: record\">\n    <ng-container *ngFor=\"let prop of propList; let first = first; trackBy: track.by('name')\">\n      <ng-container *ngIf=\"prop.visible(data)\">\n        <ng-container\n          [formGroupName]=\"extraPropertiesKey\"\n          *ngIf=\"extraProperties.controls[prop.name]; else tempDefault\"\n        >\n          <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\"></abp-extensible-form-prop>\n        </ng-container>\n\n        <ng-template #tempDefault>\n          <abp-extensible-form-prop\n            *ngIf=\"form.get(prop.name)\"\n            [prop]=\"prop\"\n            [data]=\"data\"\n            [first]=\"first\"\n          ></abp-extensible-form-prop>\n        </ng-template>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-container>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush,
-                    viewProviders: [
-                        {
-                            provide: forms.ControlContainer,
-                            useFactory: ɵ0,
-                            deps: [[new i0.Optional(), new i0.SkipSelf(), forms.ControlContainer]],
-                        },
-                    ]
-                },] }
-    ];
-    ExtensibleFormComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: ng_core.TrackByService },
-        { type: forms.ControlContainer },
-        { type: ExtensionsService },
-        { type: String, decorators: [{ type: i0.Inject, args: [EXTENSIONS_IDENTIFIER,] }] }
-    ]; };
-    ExtensibleFormComponent.propDecorators = {
-        formProps: [{ type: i0.ViewChildren, args: [ExtensibleFormPropComponent,] }],
-        selectedRecord: [{ type: i0.Input }]
-    };
+    ExtensibleFormComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ExtensibleFormComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace.TrackByService }, { token: i2__namespace$1.ControlContainer }, { token: ExtensionsService }, { token: EXTENSIONS_IDENTIFIER }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ExtensibleFormComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: { selectedRecord: "selectedRecord" }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true }], exportAs: ["abpExtensibleForm"], ngImport: i0__namespace, template: "<ng-container *ngIf=\"form\">\n  <ng-container *abpPropData=\"let data; fromList: propList; withRecord: record\">\n    <ng-container *ngFor=\"let prop of propList; let first = first; trackBy: track.by('name')\">\n      <ng-container *ngIf=\"prop.visible(data)\">\n        <ng-container\n          [formGroupName]=\"extraPropertiesKey\"\n          *ngIf=\"extraProperties.controls[prop.name]; else tempDefault\"\n        >\n          <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\"></abp-extensible-form-prop>\n        </ng-container>\n\n        <ng-template #tempDefault>\n          <abp-extensible-form-prop\n            *ngIf=\"form.get(prop.name)\"\n            [prop]=\"prop\"\n            [data]=\"data\"\n            [first]=\"first\"\n          ></abp-extensible-form-prop>\n        </ng-template>\n      </ng-container>\n    </ng-container>\n  </ng-container>\n</ng-container>\n", components: [{ type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first"] }], directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2__namespace$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2__namespace$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i6__namespace.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", inputs: ["blueprints", "errorTemplate", "invalidClasses", "mapErrorsFn", "skipValidation", "targetSelector", "validateOnSubmit"] }], viewProviders: [
+            {
+                provide: i2$1.ControlContainer,
+                useFactory: selfFactory,
+                deps: [[new i0.Optional(), new i0.SkipSelf(), i2$1.ControlContainer]],
+            },
+        ], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ExtensibleFormComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        exportAs: 'abpExtensibleForm',
+                        selector: 'abp-extensible-form',
+                        templateUrl: './extensible-form.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        viewProviders: [
+                            {
+                                provide: i2$1.ControlContainer,
+                                useFactory: selfFactory,
+                                deps: [[new i0.Optional(), new i0.SkipSelf(), i2$1.ControlContainer]],
+                            },
+                        ],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace.TrackByService }, { type: i2__namespace$1.ControlContainer }, { type: ExtensionsService }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [EXTENSIONS_IDENTIFIER]
+                        }] }];
+        }, propDecorators: { formProps: [{
+                    type: i0.ViewChildren,
+                    args: [ExtensibleFormPropComponent]
+                }], selectedRecord: [{
+                    type: i0.Input
+                }] } });
+
+    // Fix for https://github.com/angular/angular/issues/23904
+    // @dynamic
+    var AbstractActionsComponent = /** @class */ (function (_super) {
+        __extends(AbstractActionsComponent, _super);
+        function AbstractActionsComponent(injector) {
+            var _this = _super.call(this) || this;
+            _this.getInjected = injector.get.bind(injector);
+            var extensions = injector.get(ExtensionsService);
+            var name = injector.get(EXTENSIONS_IDENTIFIER);
+            var type = injector.get(EXTENSIONS_ACTION_TYPE);
+            _this.actionList = extensions[type].get(name).actions;
+            return _this;
+        }
+        return AbstractActionsComponent;
+    }(ActionData));
+    AbstractActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AbstractActionsComponent, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    AbstractActionsComponent.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: AbstractActionsComponent, inputs: { record: "record" }, usesInheritance: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: AbstractActionsComponent, decorators: [{
+                type: i0.Directive
+            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; }, propDecorators: { record: [{
+                    type: i0.Input
+                }] } });
+
+    var GridActionsComponent = /** @class */ (function (_super) {
+        __extends(GridActionsComponent, _super);
+        function GridActionsComponent(injector) {
+            var _this = _super.call(this, injector) || this;
+            _this.icon = 'fa fa-cog';
+            _this.text = '';
+            _this.trackByFn = function (_, item) { return item.text; };
+            return _this;
+        }
+        return GridActionsComponent;
+    }(AbstractActionsComponent));
+    GridActionsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: GridActionsComponent, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    GridActionsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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__namespace, template: "<div *ngIf=\"actionList.length > 1\" ngbDropdown container=\"body\" class=\"d-inline-block\">\n  <button\n    class=\"btn btn-primary btn-sm dropdown-toggle\"\n    data-toggle=\"dropdown\"\n    aria-haspopup=\"true\"\n    ngbDropdownToggle\n  >\n    <i [ngClass]=\"icon\" [class.mr-1]=\"icon\"></i>{{ text | abpLocalization }}\n  </button>\n  <div ngbDropdownMenu>\n    <ng-container\n      *ngFor=\"let action of actionList; trackBy: trackByFn\"\n      [ngTemplateOutlet]=\"btnItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: action }\"\n    >\n    </ng-container>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"actionList.length === 1\"\n  [ngTemplateOutlet]=\"btnItem\"\n  [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\n></ng-container>\n\n<ng-template #btnItem let-action>\n  <ng-container *ngIf=\"action.visible(data)\">\n    <button\n      ngbDropdownItem\n      *abpPermission=\"action.permission\"\n      (click)=\"action.action(data)\"\n      type=\"button\"\n      class=\"{{ actionList.length === 1 ? 'btn btn-primary' : '' }}\"\n      [class.text-center]=\"actionList.length === 1\"\n    >\n      <i [ngClass]=\"action.icon\" [class.mr-1]=\"action.icon\"></i>\n      <span *ngIf=\"action.icon; else ellipsis\">{{ action.text | abpLocalization }}</span>\n      <ng-template #ellipsis>\n        <div abpEllipsis>{{ action.text | abpLocalization }}</div>\n      </ng-template>\n    </button>\n  </ng-container>\n</ng-template>\n", directives: [{ type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace.NgbDropdown, selector: "[ngbDropdown]", inputs: ["open", "placement", "container", "autoClose", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i2__namespace.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission"] }, { type: i2__namespace.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { type: i4__namespace.EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }], pipes: { "abpLocalization": i1__namespace.LocalizationPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: GridActionsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        exportAs: 'abpGridActions',
+                        selector: 'abp-grid-actions',
+                        templateUrl: './grid-actions.component.html',
+                        providers: [
+                            {
+                                provide: EXTENSIONS_ACTION_TYPE,
+                                useValue: 'entityActions',
+                            },
+                        ],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; }, propDecorators: { icon: [{
+                    type: i0.Input
+                }], index: [{
+                    type: i0.Input
+                }], text: [{
+                    type: i0.Input
+                }] } });
 
     var DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
     var ExtensibleTableComponent = /** @class */ (function () {
         function ExtensibleTableComponent(locale, config, injector) {
             this.locale = locale;
             this.config = config;
+            this.injector = injector;
             this.trackByFn = function (_, item) { return item.name; };
-            // tslint:disable-next-line
             this.getInjected = injector.get.bind(injector);
             var extensions = injector.get(ExtensionsService);
             var name = injector.get(EXTENSIONS_IDENTIFIER);
             this.propList = extensions.entityProps.get(name).props;
             this.actionList = extensions['entityActions'].get(name)
                 .actions;
-            var permissionService = injector.get(ng_core.PermissionService);
+            var permissionService = injector.get(i1.PermissionService);
             this.hasAtLeastOnePermittedAction =
                 permissionService.filterItemsByPolicy(this.actionList.toArray().map(function (action) { return ({ requiredPolicy: action.permission }); })).length > 0;
             this.setColumnWidths(DEFAULT_ACTIONS_COLUMN_WIDTH);
@@ -1186,13 +1362,22 @@
             this.columnWidths = widths;
         };
         ExtensibleTableComponent.prototype.getDate = function (value, format) {
-            return value ? common.formatDate(value, format, this.locale) : '';
+            return value ? i5.formatDate(value, format, this.locale) : '';
         };
         ExtensibleTableComponent.prototype.getIcon = function (value) {
             return value
                 ? '<div class="text-center text-success"><i class="fa fa-check"></i></div>'
                 : '<div class="text-center text-danger"><i class="fa fa-times"></i></div>';
         };
+        ExtensibleTableComponent.prototype.getEnum = function (rowValue, list) {
+            if (!list)
+                return rowValue;
+            var key = list.find(function (_b) {
+                var value = _b.value;
+                return value === rowValue;
+            }).key;
+            return key;
+        };
         ExtensibleTableComponent.prototype.getContent = function (prop, data) {
             var _this = this;
             return prop.valueResolver(data).pipe(operators.map(function (value) {
@@ -1200,11 +1385,13 @@
                     case "boolean" /* Boolean */:
                         return _this.getIcon(value);
                     case "date" /* Date */:
-                        return _this.getDate(value, ng_core.getShortDateFormat(_this.config));
+                        return _this.getDate(value, i1.getShortDateFormat(_this.config));
                     case "time" /* Time */:
-                        return _this.getDate(value, ng_core.getShortTimeFormat(_this.config));
+                        return _this.getDate(value, i1.getShortTimeFormat(_this.config));
                     case "dateTime" /* DateTime */:
-                        return _this.getDate(value, ng_core.getShortDateShortTimeFormat(_this.config));
+                        return _this.getDate(value, i1.getShortDateShortTimeFormat(_this.config));
+                    case "enum" /* Enum */:
+                        return _this.getEnum(value, prop.enumList);
                     default:
                         return value;
                     // More types can be handled in the future
@@ -1219,98 +1406,56 @@
             this.data = data.currentValue.map(function (record, index) {
                 _this.propList.forEach(function (prop) {
                     var propData = { getInjected: _this.getInjected, record: record, index: index };
-                    record["_" + prop.value.name] = {
+                    var value = _this.getContent(prop.value, propData);
+                    var propKey = "_" + prop.value.name;
+                    record[propKey] = {
                         visible: prop.value.visible(propData),
-                        value: _this.getContent(prop.value, propData),
+                        value: value,
                     };
+                    if (prop.value.component) {
+                        var injector = i0.Injector.create([
+                            {
+                                provide: PROP_DATA_STREAM,
+                                useValue: value,
+                            },
+                        ], _this.injector);
+                        record[propKey].injector = injector;
+                        record[propKey].component = prop.value.component;
+                    }
                 });
                 return record;
             });
         };
         return ExtensibleTableComponent;
     }());
-    ExtensibleTableComponent.decorators = [
-        { type: i0.Component, args: [{
-                    exportAs: 'abpExtensibleTable',
-                    selector: 'abp-extensible-table',
-                    template: "<ngx-datatable default [rows]=\"data\" [count]=\"recordsTotal\" [list]=\"list\">\n  <ngx-datatable-column\n    *ngIf=\"actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)\"\n    [name]=\"actionsText | abpLocalization\"\n    [maxWidth]=\"columnWidths[0]\"\n    [width]=\"columnWidths[0]\"\n    [sortable]=\"false\"\n  >\n    <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\n      <ng-container\n        *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\n      ></ng-container>\n      <ng-template #gridActions>\n        <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\n      </ng-template>\n    </ng-template>\n  </ngx-datatable-column>\n\n  <ng-container *ngFor=\"let prop of propList; let i = index; trackBy: trackByFn\">\n    <ngx-datatable-column\n      [width]=\"columnWidths[i + 1] || 200\"\n      [name]=\"prop.displayName | abpLocalization\"\n      [prop]=\"prop.name\"\n      [sortable]=\"prop.sortable\"\n    >\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\n        <ng-container *abpPermission=\"prop.permission\">\n          <div\n            *ngIf=\"row['_' + prop.name]?.visible\"\n            [innerHTML]=\"row['_' + prop.name]?.value | async\"\n            (click)=\"\n              prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\n            \"\n            [class.pointer]=\"prop.action\"\n          ></div>\n        </ng-container>\n      </ng-template>\n    </ngx-datatable-column>\n  </ng-container>\n</ngx-datatable>\n",
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    ExtensibleTableComponent.ctorParameters = function () { return [
-        { type: String, decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] },
-        { type: ng_core.ConfigStateService },
-        { type: i0.Injector }
-    ]; };
-    ExtensibleTableComponent.propDecorators = {
-        actionsText: [{ type: i0.Input }],
-        data: [{ type: i0.Input }],
-        list: [{ type: i0.Input }],
-        recordsTotal: [{ type: i0.Input }],
-        actionsColumnWidth: [{ type: i0.Input }],
-        actionsTemplate: [{ type: i0.Input }]
-    };
-
-    // tslint:disable: directive-class-suffix
-    // Fix for https://github.com/angular/angular/issues/23904
-    // @dynamic
-    var AbstractActionsComponent = /** @class */ (function (_super) {
-        __extends(AbstractActionsComponent, _super);
-        function AbstractActionsComponent(injector) {
-            var _this = _super.call(this) || this;
-            // tslint:disable-next-line
-            _this.getInjected = injector.get.bind(injector);
-            var extensions = injector.get(ExtensionsService);
-            var name = injector.get(EXTENSIONS_IDENTIFIER);
-            var type = injector.get(EXTENSIONS_ACTION_TYPE);
-            _this.actionList = extensions[type].get(name).actions;
-            return _this;
-        }
-        return AbstractActionsComponent;
-    }(ActionData));
-    AbstractActionsComponent.decorators = [
-        { type: i0.Directive }
-    ];
-    AbstractActionsComponent.ctorParameters = function () { return [
-        { type: i0.Injector }
-    ]; };
-    AbstractActionsComponent.propDecorators = {
-        record: [{ type: i0.Input }]
-    };
-
-    var GridActionsComponent = /** @class */ (function (_super) {
-        __extends(GridActionsComponent, _super);
-        function GridActionsComponent(injector) {
-            var _this = _super.call(this, injector) || this;
-            _this.icon = 'fa fa-cog';
-            _this.text = '';
-            _this.trackByFn = function (_, item) { return item.text; };
-            return _this;
-        }
-        return GridActionsComponent;
-    }(AbstractActionsComponent));
-    GridActionsComponent.decorators = [
-        { type: i0.Component, args: [{
-                    exportAs: 'abpGridActions',
-                    selector: 'abp-grid-actions',
-                    template: "<div *ngIf=\"actionList.length > 1\" ngbDropdown container=\"body\" class=\"d-inline-block\">\n  <button\n    class=\"btn btn-primary btn-sm dropdown-toggle\"\n    data-toggle=\"dropdown\"\n    aria-haspopup=\"true\"\n    ngbDropdownToggle\n  >\n    <i [ngClass]=\"icon\" [class.mr-1]=\"icon\"></i>{{ text | abpLocalization }}\n  </button>\n  <div ngbDropdownMenu>\n    <ng-container\n      *ngFor=\"let action of actionList; trackBy: trackByFn\"\n      [ngTemplateOutlet]=\"btnItem\"\n      [ngTemplateOutletContext]=\"{ $implicit: action }\"\n    >\n    </ng-container>\n  </div>\n</div>\n\n<ng-container\n  *ngIf=\"actionList.length === 1\"\n  [ngTemplateOutlet]=\"btnItem\"\n  [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\n></ng-container>\n\n<ng-template #btnItem let-action>\n  <ng-container *ngIf=\"action.visible(data)\">\n    <button\n      ngbDropdownItem\n      *abpPermission=\"action.permission\"\n      (click)=\"action.action(data)\"\n      type=\"button\"\n      class=\"{{ actionList.length === 1 ? 'btn btn-primary' : '' }}\"\n      [class.text-center]=\"actionList.length === 1\"\n    >\n      <i [ngClass]=\"action.icon\" [class.mr-1]=\"action.icon\"></i>\n      <span *ngIf=\"action.icon; else ellipsis\">{{ action.text | abpLocalization }}</span>\n      <ng-template #ellipsis>\n        <div abpEllipsis>{{ action.text | abpLocalization }}</div>\n      </ng-template>\n    </button>\n  </ng-container>\n</ng-template>\n",
-                    providers: [
-                        {
-                            provide: EXTENSIONS_ACTION_TYPE,
-                            useValue: 'entityActions',
-                        },
-                    ],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    GridActionsComponent.ctorParameters = function () { return [
-        { type: i0.Injector }
-    ]; };
-    GridActionsComponent.propDecorators = {
-        icon: [{ type: i0.Input }],
-        index: [{ type: i0.Input }],
-        text: [{ type: i0.Input }]
-    };
+    ExtensibleTableComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ExtensibleTableComponent, deps: [{ token: i0.LOCALE_ID }, { token: i1__namespace.ConfigStateService }, { token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ExtensibleTableComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: { actionsText: "actionsText", data: "data", list: "list", recordsTotal: "recordsTotal", actionsColumnWidth: "actionsColumnWidth", actionsTemplate: "actionsTemplate" }, exportAs: ["abpExtensibleTable"], usesOnChanges: true, ngImport: i0__namespace, template: "<ngx-datatable default [rows]=\"data\" [count]=\"recordsTotal\" [list]=\"list\">\n  <ngx-datatable-column\n    *ngIf=\"actionsTemplate || (actionList.length && hasAtLeastOnePermittedAction)\"\n    [name]=\"actionsText | abpLocalization\"\n    [maxWidth]=\"columnWidths[0]\"\n    [width]=\"columnWidths[0]\"\n    [sortable]=\"false\"\n  >\n    <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\n      <ng-container\n        *ngTemplateOutlet=\"actionsTemplate || gridActions; context: { $implicit: row, index: i }\"\n      ></ng-container>\n      <ng-template #gridActions>\n        <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\n      </ng-template>\n    </ng-template>\n  </ngx-datatable-column>\n\n  <ng-container *ngFor=\"let prop of propList; let i = index; trackBy: trackByFn\">\n    <ngx-datatable-column\n      [width]=\"columnWidths[i + 1] || 200\"\n      [name]=\"prop.displayName | abpLocalization\"\n      [prop]=\"prop.name\"\n      [sortable]=\"prop.sortable\"\n    >\n      <ng-template let-row=\"row\" let-i=\"index\" ngx-datatable-cell-template>\n        <ng-container *abpPermission=\"prop.permission\">\n          <ng-container *ngIf=\"row['_' + prop.name]?.visible\">\n            <div\n              *ngIf=\"!row['_' + prop.name].component; else component\"\n              [innerHTML]=\"row['_' + prop.name]?.value | async\"\n              (click)=\"\n                prop.action && prop.action({ getInjected: getInjected, record: row, index: i })\n              \"\n              [class.pointer]=\"prop.action\"\n            ></div>\n          </ng-container>\n          <ng-template #component>\n            <ng-container\n              *ngComponentOutlet=\"\n                row['_' + prop.name].component;\n                injector: row['_' + prop.name].injector\n              \"\n            ></ng-container>\n          </ng-template>\n        </ng-container>\n      </ng-template>\n    </ngx-datatable-column>\n  </ng-container>\n</ngx-datatable>\n", components: [{ type: i2__namespace$2.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }], directives: [{ type: i4__namespace.NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { type: i4__namespace.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2__namespace$2.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { type: i2__namespace$2.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i5__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission"] }, { type: i5__namespace.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }], pipes: { "abpLocalization": i1__namespace.LocalizationPipe, "async": i5__namespace.AsyncPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ExtensibleTableComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        exportAs: 'abpExtensibleTable',
+                        selector: 'abp-extensible-table',
+                        templateUrl: './extensible-table.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.LOCALE_ID]
+                        }] }, { type: i1__namespace.ConfigStateService }, { type: i0__namespace.Injector }];
+        }, propDecorators: { actionsText: [{
+                    type: i0.Input
+                }], data: [{
+                    type: i0.Input
+                }], list: [{
+                    type: i0.Input
+                }], recordsTotal: [{
+                    type: i0.Input
+                }], actionsColumnWidth: [{
+                    type: i0.Input
+                }], actionsTemplate: [{
+                    type: i0.Input
+                }] } });
 
     var PageToolbarComponent = /** @class */ (function (_super) {
         __extends(PageToolbarComponent, _super);
@@ -1336,87 +1481,28 @@
         };
         return PageToolbarComponent;
     }(AbstractActionsComponent));
-    PageToolbarComponent.decorators = [
-        { type: i0.Component, args: [{
-                    exportAs: 'abpPageToolbar',
-                    selector: 'abp-page-toolbar',
-                    template: "<div class=\"row justify-content-end mx-n1\" id=\"AbpContentToolbar\">\n  <div class=\"col-auto px-1 pt-0 pt-md-2\" *ngFor=\"let action of actionList; trackBy: trackByFn\">\n    <ng-container *ngIf=\"action.visible(data)\">\n      <ng-container *abpPermission=\"action.permission\">\n        <ng-container *ngIf=\"action.component as component; else button\">\n          <ng-container\n            *ngComponentOutlet=\"component; injector: createInjector(action)\"\n          ></ng-container>\n        </ng-container>\n\n        <ng-template #button>\n          <button (click)=\"action.action(data)\" type=\"button\" class=\"btn btn-primary btn-sm\">\n            <i [ngClass]=\"action.icon\" [class.mr-1]=\"action.icon\"></i>\n            {{ action.text | abpLocalization }}\n          </button>\n        </ng-template>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n",
-                    providers: [
-                        {
-                            provide: EXTENSIONS_ACTION_TYPE,
-                            useValue: 'toolbarActions',
-                        },
-                    ],
-                    changeDetection: i0.ChangeDetectionStrategy.OnPush
-                },] }
-    ];
-    PageToolbarComponent.ctorParameters = function () { return [
-        { type: i0.Injector }
-    ]; };
-
-    var DisabledDirective = /** @class */ (function () {
-        function DisabledDirective(ngControl) {
-            this.ngControl = ngControl;
-        }
-        // Related issue: https://github.com/angular/angular/issues/35330
-        DisabledDirective.prototype.ngOnChanges = function (_a) {
-            var abpDisabled = _a.abpDisabled;
-            if (this.ngControl.control && abpDisabled) {
-                this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
-            }
-        };
-        return DisabledDirective;
-    }());
-    DisabledDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[abpDisabled]',
-                },] }
-    ];
-    DisabledDirective.ctorParameters = function () { return [
-        { type: forms.NgControl, decorators: [{ type: i0.Host }] }
-    ]; };
-    DisabledDirective.propDecorators = {
-        abpDisabled: [{ type: i0.Input }]
-    };
-
-    var PropDataDirective = /** @class */ (function (_super) {
-        __extends(PropDataDirective, _super);
-        function PropDataDirective(tempRef, vcRef, injector) {
-            var _this = _super.call(this) || this;
-            _this.tempRef = tempRef;
-            _this.vcRef = vcRef;
-            // tslint:disable-next-line
-            _this.getInjected = injector.get.bind(injector);
-            return _this;
-        }
-        PropDataDirective.prototype.ngOnChanges = function () {
-            this.vcRef.clear();
-            this.vcRef.createEmbeddedView(this.tempRef, {
-                $implicit: this.data,
-                index: 0,
-            });
-        };
-        PropDataDirective.prototype.ngOnDestroy = function () {
-            this.vcRef.clear();
-        };
-        return PropDataDirective;
-    }(PropData));
-    PropDataDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    exportAs: 'abpPropData',
-                    selector: '[abpPropData]',
-                },] }
-    ];
-    PropDataDirective.ctorParameters = function () { return [
-        { type: i0.TemplateRef },
-        { type: i0.ViewContainerRef },
-        { type: i0.Injector }
-    ]; };
-    PropDataDirective.propDecorators = {
-        propList: [{ type: i0.Input, args: ['abpPropDataFromList',] }],
-        record: [{ type: i0.Input, args: ['abpPropDataWithRecord',] }],
-        index: [{ type: i0.Input, args: ['abpPropDataAtIndex',] }]
-    };
+    PageToolbarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: PageToolbarComponent, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    PageToolbarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: PageToolbarComponent, selector: "abp-page-toolbar", providers: [
+            {
+                provide: EXTENSIONS_ACTION_TYPE,
+                useValue: 'toolbarActions',
+            },
+        ], exportAs: ["abpPageToolbar"], usesInheritance: true, ngImport: i0__namespace, template: "<div class=\"row justify-content-end mx-n1\" id=\"AbpContentToolbar\">\n  <div class=\"col-auto px-1 pt-0 pt-md-2\" *ngFor=\"let action of actionList; trackBy: trackByFn\">\n    <ng-container *ngIf=\"action.visible(data)\">\n      <ng-container *abpPermission=\"action.permission\">\n        <ng-container *ngIf=\"action.component as component; else button\">\n          <ng-container\n            *ngComponentOutlet=\"component; injector: createInjector(action)\"\n          ></ng-container>\n        </ng-container>\n\n        <ng-template #button>\n          <button (click)=\"action.action(data)\" type=\"button\" class=\"btn btn-primary btn-sm\">\n            <i [ngClass]=\"action.icon\" [class.mr-1]=\"action.icon\"></i>\n            {{ action.text | abpLocalization }}\n          </button>\n        </ng-template>\n      </ng-container>\n    </ng-container>\n  </div>\n</div>\n", directives: [{ type: i5__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission"] }, { type: i5__namespace.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i5__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "abpLocalization": i1__namespace.LocalizationPipe }, changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: PageToolbarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        exportAs: 'abpPageToolbar',
+                        selector: 'abp-page-toolbar',
+                        templateUrl: './page-toolbar.component.html',
+                        providers: [
+                            {
+                                provide: EXTENSIONS_ACTION_TYPE,
+                                useValue: 'toolbarActions',
+                            },
+                        ],
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; } });
 
     var objectExtensions = /*#__PURE__*/Object.freeze({
         __proto__: null
@@ -1427,49 +1513,84 @@
         }
         return BaseUiExtensionsModule;
     }());
-    BaseUiExtensionsModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    exports: [
-                        DateTimePickerComponent,
-                        PageToolbarComponent,
-                        GridActionsComponent,
-                        ExtensibleFormComponent,
-                        ExtensibleTableComponent,
-                        PropDataDirective,
-                        DisabledDirective,
-                    ],
-                    declarations: [
-                        DateTimePickerComponent,
-                        PageToolbarComponent,
-                        GridActionsComponent,
-                        ExtensibleFormPropComponent,
-                        ExtensibleFormComponent,
-                        ExtensibleTableComponent,
-                        PropDataDirective,
-                        DisabledDirective,
-                    ],
-                    imports: [
-                        ng_core.CoreModule,
-                        ng_theme_shared.ThemeSharedModule,
-                        core.NgxValidateCoreModule,
-                        ngBootstrap.NgbDatepickerModule,
-                        ngBootstrap.NgbDropdownModule,
-                        ngBootstrap.NgbTimepickerModule,
-                        ngBootstrap.NgbTypeaheadModule,
-                    ],
-                },] }
-    ];
+    BaseUiExtensionsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BaseUiExtensionsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    BaseUiExtensionsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BaseUiExtensionsModule, declarations: [DateTimePickerComponent,
+            PageToolbarComponent,
+            GridActionsComponent,
+            ExtensibleFormPropComponent,
+            ExtensibleFormComponent,
+            ExtensibleTableComponent,
+            PropDataDirective,
+            DisabledDirective], imports: [i1.CoreModule,
+            i4.ThemeSharedModule,
+            i6.NgxValidateCoreModule,
+            i2.NgbDatepickerModule,
+            i2.NgbDropdownModule,
+            i2.NgbTimepickerModule,
+            i2.NgbTypeaheadModule], exports: [DateTimePickerComponent,
+            PageToolbarComponent,
+            GridActionsComponent,
+            ExtensibleFormComponent,
+            ExtensibleTableComponent,
+            PropDataDirective,
+            DisabledDirective] });
+    BaseUiExtensionsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BaseUiExtensionsModule, imports: [[
+                i1.CoreModule,
+                i4.ThemeSharedModule,
+                i6.NgxValidateCoreModule,
+                i2.NgbDatepickerModule,
+                i2.NgbDropdownModule,
+                i2.NgbTimepickerModule,
+                i2.NgbTypeaheadModule,
+            ]] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BaseUiExtensionsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [
+                            DateTimePickerComponent,
+                            PageToolbarComponent,
+                            GridActionsComponent,
+                            ExtensibleFormComponent,
+                            ExtensibleTableComponent,
+                            PropDataDirective,
+                            DisabledDirective,
+                        ],
+                        declarations: [
+                            DateTimePickerComponent,
+                            PageToolbarComponent,
+                            GridActionsComponent,
+                            ExtensibleFormPropComponent,
+                            ExtensibleFormComponent,
+                            ExtensibleTableComponent,
+                            PropDataDirective,
+                            DisabledDirective,
+                        ],
+                        imports: [
+                            i1.CoreModule,
+                            i4.ThemeSharedModule,
+                            i6.NgxValidateCoreModule,
+                            i2.NgbDatepickerModule,
+                            i2.NgbDropdownModule,
+                            i2.NgbTimepickerModule,
+                            i2.NgbTypeaheadModule,
+                        ],
+                    }]
+            }] });
     var UiExtensionsModule = /** @class */ (function () {
         function UiExtensionsModule() {
         }
         return UiExtensionsModule;
     }());
-    UiExtensionsModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    exports: [BaseUiExtensionsModule],
-                    imports: [BaseUiExtensionsModule],
-                },] }
-    ];
+    UiExtensionsModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: UiExtensionsModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    UiExtensionsModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: UiExtensionsModule, imports: [BaseUiExtensionsModule], exports: [BaseUiExtensionsModule] });
+    UiExtensionsModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: UiExtensionsModule, imports: [[BaseUiExtensionsModule], BaseUiExtensionsModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: UiExtensionsModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [BaseUiExtensionsModule],
+                        imports: [BaseUiExtensionsModule],
+                    }]
+            }] });
 
     function mergeWithDefaultActions(extension, defaultActions) {
         var contributors = [];
@@ -1487,8 +1608,8 @@
     function generateFormFromProps(data) {
         var extensions = data.getInjected(ExtensionsService);
         var identifier = data.getInjected(EXTENSIONS_IDENTIFIER);
-        var form = new forms.FormGroup({});
-        var extraForm = new forms.FormGroup({});
+        var form = new i2$1.FormGroup({});
+        var extraForm = new i2$1.FormGroup({});
         form.addControl(EXTRA_PROPERTIES_KEY, extraForm);
         var record = data.record || {};
         var type = JSON.stringify(record) === '{}' ? 'create' : 'edit';
@@ -1520,7 +1641,7 @@
                         break;
                 }
             }
-            var formControl = new forms.FormControl(value, {
+            var formControl = new i2$1.FormControl(value, {
                 asyncValidators: prop.asyncValidators(data),
                 validators: prop.validators(data),
             });
@@ -1557,14 +1678,14 @@
         return function (data) {
             var value = data.record[EXTRA_PROPERTIES_KEY][propName];
             var key = lookupEnum.transformed[value];
-            var l10n = data.getInjected(ng_core.LocalizationService);
+            var l10n = data.getInjected(i1.LocalizationService);
             var localizeEnum = createEnumLocalizer(l10n, enumType, lookupEnum);
             return createLocalizationStream(l10n, localizeEnum(key));
         };
     }
     function createEnumOptions(enumType, lookupEnum) {
         return function (data) {
-            var l10n = data.getInjected(ng_core.LocalizationService);
+            var l10n = data.getInjected(i1.LocalizationService);
             var localizeEnum = createEnumLocalizer(l10n, enumType, lookupEnum);
             return createLocalizationStream(l10n, lookupEnum.fields.map(function (_a) {
                 var name = _a.name, value = _a.value;
@@ -1588,7 +1709,7 @@
     }
 
     function createDisplayNameLocalizationPipeKeyGenerator(localization) {
-        var generateLocalizationPipeKey = ng_core.createLocalizationPipeKeyGenerator(localization);
+        var generateLocalizationPipeKey = i1.createLocalizationPipeKeyGenerator(localization);
         return function (displayName, fallback) {
             if (displayName && displayName.name)
                 return generateLocalizationPipeKey([displayName.resource], [displayName.name], displayName.name);
@@ -1602,8 +1723,8 @@
     function getValidatorsFromProperty(property) {
         var validators = [];
         property.attributes.forEach(function (attr) {
-            if (attr.typeSimple in ng_core.AbpValidators)
-                validators.push(ng_core.AbpValidators[attr.typeSimple](attr.config));
+            if (attr.typeSimple in i1.AbpValidators)
+                validators.push(i1.AbpValidators[attr.typeSimple](attr.config));
         });
         return validators;
     }
@@ -1758,6 +1879,7 @@
     exports.FormProps = FormProps;
     exports.GridActionsComponent = GridActionsComponent;
     exports.ObjectExtensions = objectExtensions;
+    exports.PROP_DATA_STREAM = PROP_DATA_STREAM;
     exports.PageToolbarComponent = PageToolbarComponent;
     exports.PropDataDirective = PropDataDirective;
     exports.PropList = PropList;
@@ -1774,16 +1896,6 @@
     exports.mapEntitiesToContributors = mapEntitiesToContributors;
     exports.mergeWithDefaultActions = mergeWithDefaultActions;
     exports.mergeWithDefaultProps = mergeWithDefaultProps;
-    exports.ɵa = ActionData;
-    exports.ɵb = Action;
-    exports.ɵc = ActionsFactory;
-    exports.ɵd = Actions;
-    exports.ɵe = PropData;
-    exports.ɵf = Prop;
-    exports.ɵg = PropsFactory;
-    exports.ɵh = Props;
-    exports.ɵi = selfFactory;
-    exports.ɵj = AbstractActionsComponent;
 
     Object.defineProperty(exports, '__esModule', { value: true });