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

package/fesm2015/abp-ng.theme.shared-extensions.js

@@ -1,15 +1,21 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, Optional, SkipSelf, ChangeDetectorRef, Input, ViewChild, InjectionToken, Inject, ViewChildren, LOCALE_ID, Injector, Directive, Host, TemplateRef, ViewContainerRef, NgModule } from '@angular/core';
+import { Injectable, Optional, SkipSelf, Component, ChangeDetectionStrategy, Input, ViewChild, Directive, Host, InjectionToken, Inject, ViewChildren, Injector, LOCALE_ID, NgModule } from '@angular/core';
+import * as i5 from '@angular/common';
 import { formatDate } from '@angular/common';
+import * as i2 from '@ng-bootstrap/ng-bootstrap';
 import { NgbDateAdapter, NgbTimeAdapter, NgbInputDatepicker, NgbTimepicker, NgbDatepickerModule, NgbDropdownModule, NgbTimepickerModule, NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
-import { ControlContainer, FormGroupDirective, Validators, NgControl, FormGroup, FormControl } from '@angular/forms';
-import { RestService, TrackByService, ConfigStateService, AbpValidators, PermissionService, getShortDateShortTimeFormat, getShortTimeFormat, getShortDateFormat, CoreModule, LocalizationService, createLocalizationPipeKeyGenerator } from '@abp/ng.core';
+import * as i2$1 from '@angular/forms';
+import { ControlContainer, Validators, FormGroup, FormControl } from '@angular/forms';
+import { LinkedList } from '@abp/utils';
+import * as i6 from '@ngx-validate/core';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+import * as i1 from '@abp/ng.core';
+import { RestService, AbpValidators, PermissionService, getShortDateShortTimeFormat, getShortTimeFormat, getShortDateFormat, CoreModule, LocalizationService, createLocalizationPipeKeyGenerator } from '@abp/ng.core';
 import { of, merge, pipe, zip } from 'rxjs';
 import { map, debounceTime, distinctUntilChanged, switchMap, filter, take } from 'rxjs/operators';
-import snq from 'snq';
-import { LinkedList } from '@abp/utils';
+import * as i2$2 from '@swimlane/ngx-datatable';
+import * as i4 from '@abp/ng.theme.shared';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 class DateTimeAdapter {
     fromModel(value) {
@@ -37,9 +43,11 @@ class DateTimeAdapter {
         return new Date(date).toISOString();
     }
 }
-DateTimeAdapter.decorators = [
-    { type: Injectable }
-];
+DateTimeAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DateTimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+DateTimeAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DateTimeAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DateTimeAdapter, decorators: [{
+            type: Injectable
+        }] });
 
 class DateAdapter extends NgbDateAdapter {
     fromModel(value) {
@@ -72,9 +80,11 @@ class DateAdapter extends NgbDateAdapter {
         return new Date(dateUtc.getTime() + Math.abs(dateUtc.getTimezoneOffset() * 60000));
     }
 }
-DateAdapter.decorators = [
-    { type: Injectable }
-];
+DateAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DateAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+DateAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DateAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DateAdapter, decorators: [{
+            type: Injectable
+        }] });
 
 class TimeAdapter extends NgbTimeAdapter {
     fromModel(value) {
@@ -99,18 +109,119 @@ class TimeAdapter extends NgbTimeAdapter {
         return formattedDate;
     }
 }
-TimeAdapter.decorators = [
-    { type: Injectable }
-];
+TimeAdapter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: TimeAdapter, deps: null, target: i0.ɵɵFactoryTarget.Injectable });
+TimeAdapter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: TimeAdapter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: TimeAdapter, decorators: [{
+            type: Injectable
+        }] });
 function isTimeStr(value) {
     return /^((2[123])|[01][0-9])(\:[0-5][0-9]){1,2}$/.test(String(value));
 }
 
+class PropList extends LinkedList {
+}
+class PropData {
+    get data() {
+        return {
+            getInjected: this.getInjected,
+            index: this.index,
+            record: this.record,
+        };
+    }
+}
+class Prop {
+    constructor(type, name, displayName, permission, visible = _ => true, isExtra = false) {
+        this.type = type;
+        this.name = name;
+        this.displayName = displayName;
+        this.permission = permission;
+        this.visible = visible;
+        this.isExtra = isExtra;
+        this.displayName = this.displayName || this.name;
+    }
+}
+class PropsFactory {
+    constructor() {
+        this.contributorCallbacks = {};
+    }
+    get(name) {
+        this.contributorCallbacks[name] = this.contributorCallbacks[name] || [];
+        return new this._ctor(this.contributorCallbacks[name]);
+    }
+}
+class Props {
+    constructor(callbackList) {
+        this.callbackList = callbackList;
+    }
+    get props() {
+        const propList = new this._ctor();
+        this.callbackList.forEach(callback => callback(propList));
+        return propList;
+    }
+    addContributor(contributeCallback) {
+        this.callbackList.push(contributeCallback);
+    }
+    clearContributors() {
+        while (this.callbackList.length)
+            this.callbackList.pop();
+    }
+}
+
+class FormPropList extends PropList {
+}
+class FormProps extends Props {
+    constructor() {
+        super(...arguments);
+        this._ctor = FormPropList;
+    }
+}
+class CreateFormPropsFactory extends PropsFactory {
+    constructor() {
+        super(...arguments);
+        this._ctor = FormProps;
+    }
+}
+class EditFormPropsFactory extends PropsFactory {
+    constructor() {
+        super(...arguments);
+        this._ctor = FormProps;
+    }
+}
+class FormProp extends Prop {
+    constructor(options) {
+        super(options.type, options.name, options.displayName, options.permission, options.visible, options.isExtra);
+        this.asyncValidators = options.asyncValidators || (_ => []);
+        this.validators = options.validators || (_ => []);
+        this.disabled = options.disabled || (_ => false);
+        this.readonly = options.readonly || (_ => false);
+        this.autocomplete = options.autocomplete || 'off';
+        this.options = options.options;
+        this.id = options.id || options.name;
+        const defaultValue = options.defaultValue;
+        this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || null;
+    }
+    static create(options) {
+        return new FormProp(options);
+    }
+    static createMany(arrayOfOptions) {
+        return arrayOfOptions.map(FormProp.create);
+    }
+}
+class FormPropData extends PropData {
+    constructor(injector, record) {
+        super();
+        this.record = record;
+        this.getInjected = injector.get.bind(injector);
+    }
+}
+function isFalsyValue(defaultValue) {
+    return [0, '', false].indexOf(defaultValue) > -1;
+}
+
 function selfFactory(dependency) {
     return dependency;
 }
 
-const ɵ0$2 = selfFactory;
 class DateTimePickerComponent {
     constructor(cdRef) {
         this.cdRef = cdRef;
@@ -123,11 +234,46 @@ class DateTimePickerComponent {
         this.time.writeValue(datestr);
     }
 }
-DateTimePickerComponent.decorators = [
-    { type: Component, args: [{
-                exportAs: 'abpDateTimePicker',
-                selector: 'abp-date-time-picker',
-                template: `
+DateTimePickerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DateTimePickerComponent, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+DateTimePickerComponent.ɵcmp = i0.ɵɵ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: NgbInputDatepicker, descendants: true }, { propertyName: "time", first: true, predicate: NgbTimepicker, descendants: true }], exportAs: ["abpDateTimePicker"], ngImport: i0, template: `
+    <input
+      [id]="prop.id"
+      [formControlName]="prop.name"
+      (ngModelChange)="setTime($event)"
+      (click)="datepicker.open()"
+      (keyup.space)="datepicker.open()"
+      ngbDatepicker
+      #datepicker="ngbDatepicker"
+      type="text"
+      class="form-control"
+    />
+    <ngb-timepicker
+      #timepicker
+      [formControlName]="prop.name"
+      (ngModelChange)="setDate($event)"
+      [meridian]="meridian"
+    ></ngb-timepicker>
+  `, isInline: true, components: [{ type: i2.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }], directives: [{ type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["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$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.ValidationDirective, selector: "[formControl],[formControlName]", inputs: ["blueprints", "errorTemplate", "invalidClasses", "mapErrorsFn", "skipValidation", "targetSelector", "validateOnSubmit"] }], viewProviders: [
+        {
+            provide: ControlContainer,
+            useFactory: selfFactory,
+            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+        },
+        {
+            provide: NgbDateAdapter,
+            useClass: DateTimeAdapter,
+        },
+        {
+            provide: NgbTimeAdapter,
+            useClass: DateTimeAdapter,
+        },
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DateTimePickerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'abpDateTimePicker',
+                    selector: 'abp-date-time-picker',
+                    template: `
     <input
       [id]="prop.id"
       [formControlName]="prop.name"
@@ -146,33 +292,34 @@ DateTimePickerComponent.decorators = [
       [meridian]="meridian"
     ></ngb-timepicker>
   `,
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                viewProviders: [
-                    {
-                        provide: ControlContainer,
-                        useFactory: ɵ0$2,
-                        deps: [[new Optional(), new SkipSelf(), ControlContainer]],
-                    },
-                    {
-                        provide: NgbDateAdapter,
-                        useClass: DateTimeAdapter,
-                    },
-                    {
-                        provide: NgbTimeAdapter,
-                        useClass: DateTimeAdapter,
-                    },
-                ]
-            },] }
-];
-DateTimePickerComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef }
-];
-DateTimePickerComponent.propDecorators = {
-    prop: [{ type: Input }],
-    meridian: [{ type: Input }],
-    date: [{ type: ViewChild, args: [NgbInputDatepicker,] }],
-    time: [{ type: ViewChild, args: [NgbTimepicker,] }]
-};
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useFactory: selfFactory,
+                            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+                        },
+                        {
+                            provide: NgbDateAdapter,
+                            useClass: DateTimeAdapter,
+                        },
+                        {
+                            provide: NgbTimeAdapter,
+                            useClass: DateTimeAdapter,
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }]; }, propDecorators: { prop: [{
+                type: Input
+            }], meridian: [{
+                type: Input
+            }], date: [{
+                type: ViewChild,
+                args: [NgbInputDatepicker]
+            }], time: [{
+                type: ViewChild,
+                args: [NgbTimepicker]
+            }] } });
 
 const EXTRA_PROPERTIES_KEY = 'extraProperties';
 
@@ -225,7 +372,30 @@ function removeTypeaheadTextSuffix(name) {
     return name.replace(TYPEAHEAD_TEXT_SUFFIX_REGEX, '');
 }
 
-const ɵ0$1 = selfFactory;
+class DisabledDirective {
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+    }
+    // Related issue: https://github.com/angular/angular/issues/35330
+    ngOnChanges({ abpDisabled }) {
+        if (this.ngControl.control && abpDisabled) {
+            this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
+        }
+    }
+}
+DisabledDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DisabledDirective, deps: [{ token: i2$1.NgControl, host: true }], target: i0.ɵɵFactoryTarget.Directive });
+DisabledDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: DisabledDirective, selector: "[abpDisabled]", inputs: { abpDisabled: "abpDisabled" }, usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: DisabledDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[abpDisabled]',
+                }]
+        }], ctorParameters: function () { return [{ type: i2$1.NgControl, decorators: [{
+                    type: Host
+                }] }]; }, propDecorators: { abpDisabled: [{
+                type: Input
+            }] } });
+
 class ExtensibleFormPropComponent {
     constructor(cdRef, track, configState, groupDirective) {
         this.cdRef = cdRef;
@@ -312,7 +482,7 @@ class ExtensibleFormPropComponent {
         }
     }
     ngOnChanges({ prop }) {
-        const currentProp = snq(() => prop.currentValue);
+        const currentProp = prop === null || prop === void 0 ? void 0 : prop.currentValue;
         const { options, readonly, disabled, validators } = currentProp || {};
         if (options)
             this.options$ = options(this.data);
@@ -329,39 +499,46 @@ class ExtensibleFormPropComponent {
             this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
     }
 }
-ExtensibleFormPropComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush,
-                viewProviders: [
-                    {
-                        provide: ControlContainer,
-                        useFactory: ɵ0$1,
-                        deps: [[new Optional(), new SkipSelf(), ControlContainer]],
-                    },
-                    { provide: NgbDateAdapter, useClass: DateAdapter },
-                    { provide: NgbTimeAdapter, useClass: TimeAdapter },
-                ]
-            },] }
-];
-ExtensibleFormPropComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: TrackByService },
-    { type: ConfigStateService },
-    { type: FormGroupDirective }
-];
-ExtensibleFormPropComponent.propDecorators = {
-    data: [{ type: Input }],
-    prop: [{ type: Input }],
-    first: [{ type: Input }],
-    fieldRef: [{ type: ViewChild, args: ['field',] }]
-};
+ExtensibleFormPropComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ExtensibleFormPropComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i1.ConfigStateService }, { token: i2$1.FormGroupDirective }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleFormPropComponent.ɵcmp = i0.ɵɵ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, 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.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"] }, { type: DateTimePickerComponent, selector: "abp-date-time-picker", inputs: ["prop", "meridian"], exportAs: ["abpDateTimePicker"] }], directives: [{ type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission"] }, { type: i5.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { type: i5.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["disabled", "formControlName", "ngModel"], outputs: ["ngModelChange"] }, { type: i6.ValidationDirective, selector: "[formControl],[formControlName]", inputs: ["blueprints", "errorTemplate", "invalidClasses", "mapErrorsFn", "skipValidation", "targetSelector", "validateOnSubmit"] }, { type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { type: i6.ValidationTargetDirective, selector: "[validationTarget]" }, { type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { type: i2$1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { type: i6.ValidationStyleDirective, selector: "[validationStyle]" }, { type: i2.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "placement", "container", "editable", "focusFirst", "showHint", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { type: i2.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["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.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i5.AsyncPipe, "abpLocalization": i1.LocalizationPipe }, viewProviders: [
+        {
+            provide: ControlContainer,
+            useFactory: selfFactory,
+            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+        },
+        { provide: NgbDateAdapter, useClass: DateAdapter },
+        { provide: NgbTimeAdapter, useClass: TimeAdapter },
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ExtensibleFormPropComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-extensible-form-prop',
+                    templateUrl: './extensible-form-prop.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useFactory: selfFactory,
+                            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+                        },
+                        { provide: NgbDateAdapter, useClass: DateAdapter },
+                        { provide: NgbTimeAdapter, useClass: TimeAdapter },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TrackByService }, { type: i1.ConfigStateService }, { type: i2$1.FormGroupDirective }]; }, propDecorators: { data: [{
+                type: Input
+            }], prop: [{
+                type: Input
+            }], first: [{
+                type: Input
+            }], fieldRef: [{
+                type: ViewChild,
+                args: ['field']
+            }] } });
 function isRequired(validator) {
     return validator === Validators.required || validator === AbpValidators.required;
 }
 
-/* tslint:disable:variable-name */
 class ActionList extends LinkedList {
 }
 class ActionData {
@@ -435,56 +612,6 @@ class EntityAction extends Action {
     }
 }
 
-/* tslint:disable:variable-name */
-class PropList extends LinkedList {
-}
-class PropData {
-    get data() {
-        return {
-            getInjected: this.getInjected,
-            index: this.index,
-            record: this.record,
-        };
-    }
-}
-class Prop {
-    constructor(type, name, displayName, permission, visible = _ => true, isExtra = false) {
-        this.type = type;
-        this.name = name;
-        this.displayName = displayName;
-        this.permission = permission;
-        this.visible = visible;
-        this.isExtra = isExtra;
-        this.displayName = this.displayName || this.name;
-    }
-}
-class PropsFactory {
-    constructor() {
-        this.contributorCallbacks = {};
-    }
-    get(name) {
-        this.contributorCallbacks[name] = this.contributorCallbacks[name] || [];
-        return new this._ctor(this.contributorCallbacks[name]);
-    }
-}
-class Props {
-    constructor(callbackList) {
-        this.callbackList = callbackList;
-    }
-    get props() {
-        const propList = new this._ctor();
-        this.callbackList.forEach(callback => callback(propList));
-        return propList;
-    }
-    addContributor(contributeCallback) {
-        this.callbackList.push(contributeCallback);
-    }
-    clearContributors() {
-        while (this.callbackList.length)
-            this.callbackList.pop();
-    }
-}
-
 class EntityPropList extends PropList {
 }
 class EntityProps extends Props {
@@ -506,6 +633,8 @@ class EntityProp extends Prop {
         this.sortable = options.sortable || false;
         this.valueResolver = options.valueResolver || (data => of(data.record[this.name]));
         this.action = options.action;
+        this.component = options.component;
+        this.enumList = options.enumList;
     }
     static create(options) {
         return new EntityProp(options);
@@ -515,58 +644,6 @@ class EntityProp extends Prop {
     }
 }
 
-class FormPropList extends PropList {
-}
-class FormProps extends Props {
-    constructor() {
-        super(...arguments);
-        this._ctor = FormPropList;
-    }
-}
-class CreateFormPropsFactory extends PropsFactory {
-    constructor() {
-        super(...arguments);
-        this._ctor = FormProps;
-    }
-}
-class EditFormPropsFactory extends PropsFactory {
-    constructor() {
-        super(...arguments);
-        this._ctor = FormProps;
-    }
-}
-class FormProp extends Prop {
-    constructor(options) {
-        super(options.type, options.name, options.displayName, options.permission, options.visible, options.isExtra);
-        this.asyncValidators = options.asyncValidators || (_ => []);
-        this.validators = options.validators || (_ => []);
-        this.disabled = options.disabled || (_ => false);
-        this.readonly = options.readonly || (_ => false);
-        this.autocomplete = options.autocomplete || 'off';
-        this.options = options.options;
-        this.id = options.id || options.name;
-        const defaultValue = options.defaultValue;
-        this.defaultValue = isFalsyValue(defaultValue) ? defaultValue : defaultValue || null;
-    }
-    static create(options) {
-        return new FormProp(options);
-    }
-    static createMany(arrayOfOptions) {
-        return arrayOfOptions.map(FormProp.create);
-    }
-}
-class FormPropData extends PropData {
-    constructor(injector, record) {
-        super();
-        this.record = record;
-        // tslint:disable-next-line
-        this.getInjected = injector.get.bind(injector);
-    }
-}
-function isFalsyValue(defaultValue) {
-    return [0, '', false].indexOf(defaultValue) > -1;
-}
-
 class ToolbarActionList extends ActionList {
 }
 class ToolbarActions extends Actions {
@@ -616,19 +693,59 @@ class ExtensionsService {
         this.editFormProps = new EditFormPropsFactory();
     }
 }
-ExtensionsService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ExtensionsService_Factory() { return new ExtensionsService(); }, token: ExtensionsService, providedIn: "root" });
-ExtensionsService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
+ExtensionsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ExtensionsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ExtensionsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ExtensionsService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }] });
 
 const EXTENSIONS_IDENTIFIER = new InjectionToken('EXTENSIONS_IDENTIFIER');
 const EXTENSIONS_ACTION_TYPE = new InjectionToken('EXTENSIONS_ACTION_TYPE');
 const EXTENSIONS_ACTION_DATA = new InjectionToken('EXTENSIONS_ACTION_DATA');
-const EXTENSIONS_ACTION_CALLBACK = new InjectionToken('EXTENSIONS_ACTION_DATA');
+const EXTENSIONS_ACTION_CALLBACK = new InjectionToken('EXTENSIONS_ACTION_DATA');
+const PROP_DATA_STREAM = new InjectionToken('PROP_DATA_STREAM');
+
+/* eslint-disable @angular-eslint/no-input-rename */
+class PropDataDirective extends PropData {
+    constructor(tempRef, vcRef, injector) {
+        super();
+        this.tempRef = tempRef;
+        this.vcRef = vcRef;
+        this.getInjected = injector.get.bind(injector);
+    }
+    ngOnChanges() {
+        this.vcRef.clear();
+        this.vcRef.createEmbeddedView(this.tempRef, {
+            $implicit: this.data,
+            index: 0,
+        });
+    }
+    ngOnDestroy() {
+        this.vcRef.clear();
+    }
+}
+PropDataDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: PropDataDirective, deps: [{ token: i0.TemplateRef }, { token: i0.ViewContainerRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+PropDataDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "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 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: PropDataDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    exportAs: 'abpPropData',
+                    selector: '[abpPropData]',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.TemplateRef }, { type: i0.ViewContainerRef }, { type: i0.Injector }]; }, propDecorators: { propList: [{
+                type: Input,
+                args: ['abpPropDataFromList']
+            }], record: [{
+                type: Input,
+                args: ['abpPropDataWithRecord']
+            }], index: [{
+                type: Input,
+                args: ['abpPropDataAtIndex']
+            }] } });
 
-const ɵ0 = selfFactory;
 class ExtensibleFormComponent {
     constructor(cdRef, track, container, extensions, identifier) {
         this.cdRef = cdRef;
@@ -650,40 +767,103 @@ class ExtensibleFormComponent {
         return (this.form.controls.extraProperties || { controls: {} });
     }
 }
-ExtensibleFormComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush,
-                viewProviders: [
-                    {
-                        provide: ControlContainer,
-                        useFactory: ɵ0,
-                        deps: [[new Optional(), new SkipSelf(), ControlContainer]],
-                    },
-                ]
-            },] }
-];
-ExtensibleFormComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: TrackByService },
-    { type: ControlContainer },
-    { type: ExtensionsService },
-    { type: String, decorators: [{ type: Inject, args: [EXTENSIONS_IDENTIFIER,] }] }
-];
-ExtensibleFormComponent.propDecorators = {
-    formProps: [{ type: ViewChildren, args: [ExtensibleFormPropComponent,] }],
-    selectedRecord: [{ type: Input }]
-};
+ExtensibleFormComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ExtensibleFormComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i2$1.ControlContainer }, { token: ExtensionsService }, { token: EXTENSIONS_IDENTIFIER }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleFormComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: { selectedRecord: "selectedRecord" }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "<ng-container *ngIf=\"form\">\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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { type: i2$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { type: i6.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", inputs: ["blueprints", "errorTemplate", "invalidClasses", "mapErrorsFn", "skipValidation", "targetSelector", "validateOnSubmit"] }], viewProviders: [
+        {
+            provide: ControlContainer,
+            useFactory: selfFactory,
+            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+        },
+    ], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'abpExtensibleForm',
+                    selector: 'abp-extensible-form',
+                    templateUrl: './extensible-form.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    viewProviders: [
+                        {
+                            provide: ControlContainer,
+                            useFactory: selfFactory,
+                            deps: [[new Optional(), new SkipSelf(), ControlContainer]],
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TrackByService }, { type: i2$1.ControlContainer }, { type: ExtensionsService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [EXTENSIONS_IDENTIFIER]
+                }] }]; }, propDecorators: { formProps: [{
+                type: ViewChildren,
+                args: [ExtensibleFormPropComponent]
+            }], selectedRecord: [{
+                type: Input
+            }] } });
+
+// Fix for https://github.com/angular/angular/issues/23904
+// @dynamic
+class AbstractActionsComponent extends ActionData {
+    constructor(injector) {
+        super();
+        this.getInjected = injector.get.bind(injector);
+        const extensions = injector.get(ExtensionsService);
+        const name = injector.get(EXTENSIONS_IDENTIFIER);
+        const type = injector.get(EXTENSIONS_ACTION_TYPE);
+        this.actionList = extensions[type].get(name).actions;
+    }
+}
+AbstractActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AbstractActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+AbstractActionsComponent.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: AbstractActionsComponent, inputs: { record: "record" }, usesInheritance: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: AbstractActionsComponent, decorators: [{
+            type: Directive
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { record: [{
+                type: Input
+            }] } });
+
+class GridActionsComponent extends AbstractActionsComponent {
+    constructor(injector) {
+        super(injector);
+        this.icon = 'fa fa-cog';
+        this.text = '';
+        this.trackByFn = (_, item) => item.text;
+    }
+}
+GridActionsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: GridActionsComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+GridActionsComponent.ɵcmp = i0.ɵɵ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, 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.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2.NgbDropdown, selector: "[ngbDropdown]", inputs: ["open", "placement", "container", "autoClose", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { type: i2.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission"] }, { type: i2.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { type: i4.EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }], pipes: { "abpLocalization": i1.LocalizationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: GridActionsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'abpGridActions',
+                    selector: 'abp-grid-actions',
+                    templateUrl: './grid-actions.component.html',
+                    providers: [
+                        {
+                            provide: EXTENSIONS_ACTION_TYPE,
+                            useValue: 'entityActions',
+                        },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { icon: [{
+                type: Input
+            }], index: [{
+                type: Input
+            }], text: [{
+                type: Input
+            }] } });
 
 const DEFAULT_ACTIONS_COLUMN_WIDTH = 150;
 class ExtensibleTableComponent {
     constructor(locale, config, injector) {
         this.locale = locale;
         this.config = config;
+        this.injector = injector;
         this.trackByFn = (_, item) => item.name;
-        // tslint:disable-next-line
         this.getInjected = injector.get.bind(injector);
         const extensions = injector.get(ExtensionsService);
         const name = injector.get(EXTENSIONS_IDENTIFIER);
@@ -720,6 +900,12 @@ class ExtensibleTableComponent {
             ? '<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>';
     }
+    getEnum(rowValue, list) {
+        if (!list)
+            return rowValue;
+        const { key } = list.find(({ value }) => value === rowValue);
+        return key;
+    }
     getContent(prop, data) {
         return prop.valueResolver(data).pipe(map(value => {
             switch (prop.type) {
@@ -731,6 +917,8 @@ class ExtensibleTableComponent {
                     return this.getDate(value, getShortTimeFormat(this.config));
                 case "dateTime" /* DateTime */:
                     return this.getDate(value, getShortDateShortTimeFormat(this.config));
+                case "enum" /* Enum */:
+                    return this.getEnum(value, prop.enumList);
                 default:
                     return value;
                 // More types can be handled in the future
@@ -743,91 +931,53 @@ class ExtensibleTableComponent {
         this.data = data.currentValue.map((record, index) => {
             this.propList.forEach(prop => {
                 const propData = { getInjected: this.getInjected, record, index };
-                record[`_${prop.value.name}`] = {
+                const value = this.getContent(prop.value, propData);
+                const propKey = `_${prop.value.name}`;
+                record[propKey] = {
                     visible: prop.value.visible(propData),
-                    value: this.getContent(prop.value, propData),
+                    value,
                 };
+                if (prop.value.component) {
+                    const injector = Injector.create([
+                        {
+                            provide: PROP_DATA_STREAM,
+                            useValue: value,
+                        },
+                    ], this.injector);
+                    record[propKey].injector = injector;
+                    record[propKey].component = prop.value.component;
+                }
             });
             return record;
         });
     }
 }
-ExtensibleTableComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush
-            },] }
-];
-ExtensibleTableComponent.ctorParameters = () => [
-    { type: String, decorators: [{ type: Inject, args: [LOCALE_ID,] }] },
-    { type: ConfigStateService },
-    { type: Injector }
-];
-ExtensibleTableComponent.propDecorators = {
-    actionsText: [{ type: Input }],
-    data: [{ type: Input }],
-    list: [{ type: Input }],
-    recordsTotal: [{ type: Input }],
-    actionsColumnWidth: [{ type: Input }],
-    actionsTemplate: [{ type: Input }]
-};
-
-// tslint:disable: directive-class-suffix
-// Fix for https://github.com/angular/angular/issues/23904
-// @dynamic
-class AbstractActionsComponent extends ActionData {
-    constructor(injector) {
-        super();
-        // tslint:disable-next-line
-        this.getInjected = injector.get.bind(injector);
-        const extensions = injector.get(ExtensionsService);
-        const name = injector.get(EXTENSIONS_IDENTIFIER);
-        const type = injector.get(EXTENSIONS_ACTION_TYPE);
-        this.actionList = extensions[type].get(name).actions;
-    }
-}
-AbstractActionsComponent.decorators = [
-    { type: Directive }
-];
-AbstractActionsComponent.ctorParameters = () => [
-    { type: Injector }
-];
-AbstractActionsComponent.propDecorators = {
-    record: [{ type: Input }]
-};
-
-class GridActionsComponent extends AbstractActionsComponent {
-    constructor(injector) {
-        super(injector);
-        this.icon = 'fa fa-cog';
-        this.text = '';
-        this.trackByFn = (_, item) => item.text;
-    }
-}
-GridActionsComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush
-            },] }
-];
-GridActionsComponent.ctorParameters = () => [
-    { type: Injector }
-];
-GridActionsComponent.propDecorators = {
-    icon: [{ type: Input }],
-    index: [{ type: Input }],
-    text: [{ type: Input }]
-};
+ExtensibleTableComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ExtensibleTableComponent, deps: [{ token: LOCALE_ID }, { token: i1.ConfigStateService }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+ExtensibleTableComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "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, 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$2.DatatableComponent, selector: "ngx-datatable", inputs: ["selected", "scrollbarV", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "loadingIndicator", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "groupExpansionDefault", "selectAllRowsOnPage", "virtualization", "summaryRow", "summaryHeight", "summaryPosition", "rowIdentity", "rows", "groupedRows", "groupRowsBy", "columns", "limit", "count", "offset", "targetMarkerTemplate", "selectionType", "rowClass", "selectCheck", "displayCheck", "trackByProp", "treeFromRelation", "treeToRelation"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction"] }, { type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }], directives: [{ type: i4.NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { type: i4.NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i2$2.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate"] }, { type: i2$2.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { type: i5.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission"] }, { type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }], pipes: { "abpLocalization": i1.LocalizationPipe, "async": i5.AsyncPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'abpExtensibleTable',
+                    selector: 'abp-extensible-table',
+                    templateUrl: './extensible-table.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
+                }] }, { type: i1.ConfigStateService }, { type: i0.Injector }]; }, propDecorators: { actionsText: [{
+                type: Input
+            }], data: [{
+                type: Input
+            }], list: [{
+                type: Input
+            }], recordsTotal: [{
+                type: Input
+            }], actionsColumnWidth: [{
+                type: Input
+            }], actionsTemplate: [{
+                type: Input
+            }] } });
 
 class PageToolbarComponent extends AbstractActionsComponent {
     constructor(injector) {
@@ -846,82 +996,28 @@ class PageToolbarComponent extends AbstractActionsComponent {
         return { get };
     }
 }
-PageToolbarComponent.decorators = [
-    { type: 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: ChangeDetectionStrategy.OnPush
-            },] }
-];
-PageToolbarComponent.ctorParameters = () => [
-    { type: Injector }
-];
-
-class DisabledDirective {
-    constructor(ngControl) {
-        this.ngControl = ngControl;
-    }
-    // Related issue: https://github.com/angular/angular/issues/35330
-    ngOnChanges({ abpDisabled }) {
-        if (this.ngControl.control && abpDisabled) {
-            this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
-        }
-    }
-}
-DisabledDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[abpDisabled]',
-            },] }
-];
-DisabledDirective.ctorParameters = () => [
-    { type: NgControl, decorators: [{ type: Host }] }
-];
-DisabledDirective.propDecorators = {
-    abpDisabled: [{ type: Input }]
-};
-
-class PropDataDirective extends PropData {
-    constructor(tempRef, vcRef, injector) {
-        super();
-        this.tempRef = tempRef;
-        this.vcRef = vcRef;
-        // tslint:disable-next-line
-        this.getInjected = injector.get.bind(injector);
-    }
-    ngOnChanges() {
-        this.vcRef.clear();
-        this.vcRef.createEmbeddedView(this.tempRef, {
-            $implicit: this.data,
-            index: 0,
-        });
-    }
-    ngOnDestroy() {
-        this.vcRef.clear();
-    }
-}
-PropDataDirective.decorators = [
-    { type: Directive, args: [{
-                exportAs: 'abpPropData',
-                selector: '[abpPropData]',
-            },] }
-];
-PropDataDirective.ctorParameters = () => [
-    { type: TemplateRef },
-    { type: ViewContainerRef },
-    { type: Injector }
-];
-PropDataDirective.propDecorators = {
-    propList: [{ type: Input, args: ['abpPropDataFromList',] }],
-    record: [{ type: Input, args: ['abpPropDataWithRecord',] }],
-    index: [{ type: Input, args: ['abpPropDataAtIndex',] }]
-};
+PageToolbarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: PageToolbarComponent, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component });
+PageToolbarComponent.ɵcmp = i0.ɵɵ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, 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.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission"] }, { type: i5.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModuleFactory"] }, { type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "abpLocalization": i1.LocalizationPipe }, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: PageToolbarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    exportAs: 'abpPageToolbar',
+                    selector: 'abp-page-toolbar',
+                    templateUrl: './page-toolbar.component.html',
+                    providers: [
+                        {
+                            provide: EXTENSIONS_ACTION_TYPE,
+                            useValue: 'toolbarActions',
+                        },
+                    ],
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 var objectExtensions = /*#__PURE__*/Object.freeze({
     __proto__: null
@@ -929,46 +1025,81 @@ var objectExtensions = /*#__PURE__*/Object.freeze({
 
 class BaseUiExtensionsModule {
 }
-BaseUiExtensionsModule.decorators = [
-    { type: NgModule, args: [{
-                exports: [
-                    DateTimePickerComponent,
-                    PageToolbarComponent,
-                    GridActionsComponent,
-                    ExtensibleFormComponent,
-                    ExtensibleTableComponent,
-                    PropDataDirective,
-                    DisabledDirective,
-                ],
-                declarations: [
-                    DateTimePickerComponent,
-                    PageToolbarComponent,
-                    GridActionsComponent,
-                    ExtensibleFormPropComponent,
-                    ExtensibleFormComponent,
-                    ExtensibleTableComponent,
-                    PropDataDirective,
-                    DisabledDirective,
-                ],
-                imports: [
-                    CoreModule,
-                    ThemeSharedModule,
-                    NgxValidateCoreModule,
-                    NgbDatepickerModule,
-                    NgbDropdownModule,
-                    NgbTimepickerModule,
-                    NgbTypeaheadModule,
-                ],
-            },] }
-];
+BaseUiExtensionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: BaseUiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaseUiExtensionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: BaseUiExtensionsModule, declarations: [DateTimePickerComponent,
+        PageToolbarComponent,
+        GridActionsComponent,
+        ExtensibleFormPropComponent,
+        ExtensibleFormComponent,
+        ExtensibleTableComponent,
+        PropDataDirective,
+        DisabledDirective], imports: [CoreModule,
+        ThemeSharedModule,
+        NgxValidateCoreModule,
+        NgbDatepickerModule,
+        NgbDropdownModule,
+        NgbTimepickerModule,
+        NgbTypeaheadModule], exports: [DateTimePickerComponent,
+        PageToolbarComponent,
+        GridActionsComponent,
+        ExtensibleFormComponent,
+        ExtensibleTableComponent,
+        PropDataDirective,
+        DisabledDirective] });
+BaseUiExtensionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: BaseUiExtensionsModule, imports: [[
+            CoreModule,
+            ThemeSharedModule,
+            NgxValidateCoreModule,
+            NgbDatepickerModule,
+            NgbDropdownModule,
+            NgbTimepickerModule,
+            NgbTypeaheadModule,
+        ]] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: BaseUiExtensionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [
+                        DateTimePickerComponent,
+                        PageToolbarComponent,
+                        GridActionsComponent,
+                        ExtensibleFormComponent,
+                        ExtensibleTableComponent,
+                        PropDataDirective,
+                        DisabledDirective,
+                    ],
+                    declarations: [
+                        DateTimePickerComponent,
+                        PageToolbarComponent,
+                        GridActionsComponent,
+                        ExtensibleFormPropComponent,
+                        ExtensibleFormComponent,
+                        ExtensibleTableComponent,
+                        PropDataDirective,
+                        DisabledDirective,
+                    ],
+                    imports: [
+                        CoreModule,
+                        ThemeSharedModule,
+                        NgxValidateCoreModule,
+                        NgbDatepickerModule,
+                        NgbDropdownModule,
+                        NgbTimepickerModule,
+                        NgbTypeaheadModule,
+                    ],
+                }]
+        }] });
 class UiExtensionsModule {
 }
-UiExtensionsModule.decorators = [
-    { type: NgModule, args: [{
-                exports: [BaseUiExtensionsModule],
-                imports: [BaseUiExtensionsModule],
-            },] }
-];
+UiExtensionsModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: UiExtensionsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+UiExtensionsModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: UiExtensionsModule, imports: [BaseUiExtensionsModule], exports: [BaseUiExtensionsModule] });
+UiExtensionsModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: UiExtensionsModule, imports: [[BaseUiExtensionsModule], BaseUiExtensionsModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: UiExtensionsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [BaseUiExtensionsModule],
+                    imports: [BaseUiExtensionsModule],
+                }]
+        }] });
 
 function mergeWithDefaultActions(extension, defaultActions, ...contributors) {
     Object.keys(defaultActions).forEach((name) => {
@@ -1212,5 +1343,5 @@ function isUndefined(obj) {
  * Generated bundle index. Do not edit.
  */
 
-export { ActionList, BaseUiExtensionsModule, CreateFormPropsFactory, DateAdapter, DateTimeAdapter, DateTimePickerComponent, DisabledDirective, EXTENSIONS_ACTION_CALLBACK, EXTENSIONS_ACTION_DATA, EXTENSIONS_ACTION_TYPE, EXTENSIONS_IDENTIFIER, EXTRA_PROPERTIES_KEY, EditFormPropsFactory, EntityAction, EntityActionList, EntityActions, EntityActionsFactory, EntityProp, EntityPropList, EntityProps, EntityPropsFactory, ExtensibleFormComponent, ExtensibleFormPropComponent, ExtensibleTableComponent, ExtensionsService, FormProp, FormPropData, FormPropList, FormProps, GridActionsComponent, objectExtensions as ObjectExtensions, PageToolbarComponent, PropDataDirective, PropList, TimeAdapter, ToolbarAction, ToolbarActionList, ToolbarActions, ToolbarActionsFactory, ToolbarComponent, UiExtensionsModule, createExtraPropertyValueResolver, generateFormFromProps, getObjectExtensionEntitiesFromStore, mapEntitiesToContributors, mergeWithDefaultActions, mergeWithDefaultProps, ActionData as ɵa, Action as ɵb, ActionsFactory as ɵc, Actions as ɵd, PropData as ɵe, Prop as ɵf, PropsFactory as ɵg, Props as ɵh, selfFactory as ɵi, AbstractActionsComponent as ɵj };
+export { ActionList, BaseUiExtensionsModule, CreateFormPropsFactory, DateAdapter, DateTimeAdapter, DateTimePickerComponent, DisabledDirective, EXTENSIONS_ACTION_CALLBACK, EXTENSIONS_ACTION_DATA, EXTENSIONS_ACTION_TYPE, EXTENSIONS_IDENTIFIER, EXTRA_PROPERTIES_KEY, EditFormPropsFactory, EntityAction, EntityActionList, EntityActions, EntityActionsFactory, EntityProp, EntityPropList, EntityProps, EntityPropsFactory, ExtensibleFormComponent, ExtensibleFormPropComponent, ExtensibleTableComponent, ExtensionsService, FormProp, FormPropData, FormPropList, FormProps, GridActionsComponent, objectExtensions as ObjectExtensions, PROP_DATA_STREAM, PageToolbarComponent, PropDataDirective, PropList, TimeAdapter, ToolbarAction, ToolbarActionList, ToolbarActions, ToolbarActionsFactory, ToolbarComponent, UiExtensionsModule, createExtraPropertyValueResolver, generateFormFromProps, getObjectExtensionEntitiesFromStore, mapEntitiesToContributors, mergeWithDefaultActions, mergeWithDefaultProps };
 //# sourceMappingURL=abp-ng.theme.shared-extensions.js.map