@abp/ng.theme.shared 7.3.1 → 7.4.0-rc.1

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

@@ -472,7 +472,7 @@ class ExtensibleFormPropComponent {
         this.configState = configState;
         this.injector = injector;
         this.asterisk = '';
-        this.containerClassName = 'mb-3';
+        this.containerClassName = 'mb-2';
         this.options$ = of([]);
         this.validators = [];
         this.passwordKey = "ThemeShared.Extensions.PasswordComponent" /* eThemeSharedComponents.PasswordComponent */;
@@ -584,7 +584,7 @@ class ExtensibleFormPropComponent {
             this.typeaheadModel = { key: keyControl.value, value: valueControl.value };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: ExtensibleFormPropComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1.TrackByService }, { token: i1.ConfigStateService }, { token: i2.FormGroupDirective }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first" }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\r\n  [ngSwitch]=\"getComponent(prop)\"\r\n  *abpPermission=\"prop.permission; runChangeDetection: false\"\r\n>\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-3\">\r\n    <ng-template ngSwitchCase=\"input\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <input\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [autocomplete]=\"prop.autocomplete\"\r\n        [type]=\"getType(prop)\"\r\n        [abpDisabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        class=\"form-control\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"hidden\">\r\n      <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"checkbox\">\r\n      <div class=\"form-check\" validationTarget>\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          type=\"checkbox\"\r\n          class=\"form-check-input\"\r\n        />\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"label\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n        ></ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"select\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"multiselect\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        multiple=\"multiple\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"typeahead\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [autocomplete]=\"prop.autocomplete\"\r\n          [abpDisabled]=\"disabled\"\r\n          [ngbTypeahead]=\"search\"\r\n          [editable]=\"false\"\r\n          [inputFormatter]=\"typeaheadFormatter\"\r\n          [resultFormatter]=\"typeaheadFormatter\"\r\n          [ngModelOptions]=\"{ standalone: true }\"\r\n          [(ngModel)]=\"typeaheadModel\"\r\n          (selectItem)=\"setTypeaheadValue($event.item)\"\r\n          (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n          [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n          class=\"form-control\"\r\n        />\r\n        <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"date\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <input\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        (click)=\"datepicker.open()\"\r\n        (keyup.space)=\"datepicker.open()\"\r\n        ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"time\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"dateTime\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"textarea\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <textarea\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        class=\"form-control\"\r\n      ></textarea>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"passwordinputgroup\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-password\r\n        *abpReplaceableTemplate=\"{\r\n          componentKey: passwordKey,\r\n          inputs: {\r\n            inputId: { value: prop.id },\r\n            formControlName: { value: prop.name }\r\n          }\r\n        }\"\r\n        [inputId]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n      ></abp-password>\r\n    </ng-template>\r\n\r\n    <small *ngIf=\"prop.formText\" class=\"text-muted d-block\">{{\r\n      prop.formText | abpLocalization\r\n    }}</small>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\">\r\n    <ng-container *ngIf=\"prop.displayTextResolver; else displayNameTemplate\">\r\n      {{ prop.displayTextResolver(data) | abpLocalization }}\r\n    </ng-container>\r\n    <ng-template #displayNameTemplate> {{ prop.displayName | abpLocalization }}</ng-template>\r\n    {{ asterisk }}\r\n  </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: i1.ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }, { kind: "directive", type: i4.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i4.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i4.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i4$2.PasswordComponent, selector: "abp-password", inputs: ["inputId", "formControlName"] }, { kind: "directive", type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "directive", type: i4$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: DateTimePickerComponent, selector: "abp-date-time-picker", inputs: ["prop", "meridian"], exportAs: ["abpDateTimePicker"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], viewProviders: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.0.6", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: { data: "data", prop: "prop", first: "first" }, viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<ng-container\r\n  [ngSwitch]=\"getComponent(prop)\"\r\n  *abpPermission=\"prop.permission; runChangeDetection: false\"\r\n>\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-2\">\r\n    <ng-template ngSwitchCase=\"input\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <input\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [autocomplete]=\"prop.autocomplete\"\r\n        [type]=\"getType(prop)\"\r\n        [abpDisabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        class=\"form-control\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"hidden\">\r\n      <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"checkbox\">\r\n      <div class=\"form-check\" validationTarget>\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          type=\"checkbox\"\r\n          class=\"form-check-input\"\r\n        />\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"label\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n        ></ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"select\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"multiselect\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        multiple=\"multiple\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"typeahead\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [autocomplete]=\"prop.autocomplete\"\r\n          [abpDisabled]=\"disabled\"\r\n          [ngbTypeahead]=\"search\"\r\n          [editable]=\"false\"\r\n          [inputFormatter]=\"typeaheadFormatter\"\r\n          [resultFormatter]=\"typeaheadFormatter\"\r\n          [ngModelOptions]=\"{ standalone: true }\"\r\n          [(ngModel)]=\"typeaheadModel\"\r\n          (selectItem)=\"setTypeaheadValue($event.item)\"\r\n          (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n          [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n          class=\"form-control\"\r\n        />\r\n        <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"date\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <input\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        (click)=\"datepicker.open()\"\r\n        (keyup.space)=\"datepicker.open()\"\r\n        ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"time\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"dateTime\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"textarea\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <textarea\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        class=\"form-control\"\r\n      ></textarea>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"passwordinputgroup\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-password\r\n        *abpReplaceableTemplate=\"{\r\n          componentKey: passwordKey,\r\n          inputs: {\r\n            inputId: { value: prop.id },\r\n            formControlName: { value: prop.name }\r\n          }\r\n        }\"\r\n        [inputId]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n      ></abp-password>\r\n    </ng-template>\r\n\r\n    <small *ngIf=\"prop.formText\" class=\"text-muted d-block\">{{\r\n      prop.formText | abpLocalization\r\n    }}</small>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\">\r\n    <ng-container *ngIf=\"prop.displayTextResolver; else displayNameTemplate\">\r\n      {{ prop.displayTextResolver(data) | abpLocalization }}\r\n    </ng-container>\r\n    <ng-template #displayNameTemplate> {{ prop.displayName | abpLocalization }}</ng-template>\r\n    {{ asterisk }}\r\n  </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i3.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: i1.ReplaceableTemplateDirective, selector: "[abpReplaceableTemplate]", inputs: ["abpReplaceableTemplate"] }, { kind: "directive", type: i4.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i4.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i4.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: i4$2.PasswordComponent, selector: "abp-password", inputs: ["inputId", "formControlName"] }, { kind: "directive", type: i4$1.NgbInputDatepicker, selector: "input[ngbDatepicker]", inputs: ["autoClose", "contentTemplate", "datepickerClass", "dayTemplate", "dayTemplateData", "displayMonths", "firstDayOfWeek", "footerTemplate", "markDisabled", "minDate", "maxDate", "navigation", "outsideDays", "placement", "popperOptions", "restoreFocus", "showWeekNumbers", "startDate", "container", "positionTarget", "weekdays", "disabled"], outputs: ["dateSelect", "navigate", "closed"], exportAs: ["ngbDatepicker"] }, { kind: "component", type: i4$1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "directive", type: i4$1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "component", type: DateTimePickerComponent, selector: "abp-date-time-picker", inputs: ["prop", "meridian"], exportAs: ["abpDateTimePicker"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], viewProviders: [
             {
                 provide: ControlContainer,
                 useFactory: selfFactory,
@@ -604,7 +604,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImpor
                         },
                         { provide: NgbDateAdapter, useClass: DateAdapter },
                         { provide: NgbTimeAdapter, useClass: TimeAdapter },
-                    ], template: "<ng-container\r\n  [ngSwitch]=\"getComponent(prop)\"\r\n  *abpPermission=\"prop.permission; runChangeDetection: false\"\r\n>\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-3\">\r\n    <ng-template ngSwitchCase=\"input\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <input\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [autocomplete]=\"prop.autocomplete\"\r\n        [type]=\"getType(prop)\"\r\n        [abpDisabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        class=\"form-control\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"hidden\">\r\n      <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"checkbox\">\r\n      <div class=\"form-check\" validationTarget>\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          type=\"checkbox\"\r\n          class=\"form-check-input\"\r\n        />\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"label\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n        ></ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"select\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"multiselect\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        multiple=\"multiple\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"typeahead\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [autocomplete]=\"prop.autocomplete\"\r\n          [abpDisabled]=\"disabled\"\r\n          [ngbTypeahead]=\"search\"\r\n          [editable]=\"false\"\r\n          [inputFormatter]=\"typeaheadFormatter\"\r\n          [resultFormatter]=\"typeaheadFormatter\"\r\n          [ngModelOptions]=\"{ standalone: true }\"\r\n          [(ngModel)]=\"typeaheadModel\"\r\n          (selectItem)=\"setTypeaheadValue($event.item)\"\r\n          (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n          [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n          class=\"form-control\"\r\n        />\r\n        <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"date\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <input\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        (click)=\"datepicker.open()\"\r\n        (keyup.space)=\"datepicker.open()\"\r\n        ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"time\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"dateTime\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"textarea\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <textarea\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        class=\"form-control\"\r\n      ></textarea>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"passwordinputgroup\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-password\r\n        *abpReplaceableTemplate=\"{\r\n          componentKey: passwordKey,\r\n          inputs: {\r\n            inputId: { value: prop.id },\r\n            formControlName: { value: prop.name }\r\n          }\r\n        }\"\r\n        [inputId]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n      ></abp-password>\r\n    </ng-template>\r\n\r\n    <small *ngIf=\"prop.formText\" class=\"text-muted d-block\">{{\r\n      prop.formText | abpLocalization\r\n    }}</small>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\">\r\n    <ng-container *ngIf=\"prop.displayTextResolver; else displayNameTemplate\">\r\n      {{ prop.displayTextResolver(data) | abpLocalization }}\r\n    </ng-container>\r\n    <ng-template #displayNameTemplate> {{ prop.displayName | abpLocalization }}</ng-template>\r\n    {{ asterisk }}\r\n  </label>\r\n</ng-template>\r\n" }]
+                    ], template: "<ng-container\r\n  [ngSwitch]=\"getComponent(prop)\"\r\n  *abpPermission=\"prop.permission; runChangeDetection: false\"\r\n>\r\n  <ng-template ngSwitchCase=\"template\">\r\n    <ng-container *ngComponentOutlet=\"prop.template; injector: injectorForCustomComponent\">\r\n    </ng-container>\r\n  </ng-template>\r\n\r\n  <div [ngClass]=\"containerClassName\" class=\"mb-2\">\r\n    <ng-template ngSwitchCase=\"input\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <input\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [autocomplete]=\"prop.autocomplete\"\r\n        [type]=\"getType(prop)\"\r\n        [abpDisabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        class=\"form-control\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"hidden\">\r\n      <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"checkbox\">\r\n      <div class=\"form-check\" validationTarget>\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [formControlName]=\"prop.name\"\r\n          [abpDisabled]=\"disabled\"\r\n          type=\"checkbox\"\r\n          class=\"form-check-input\"\r\n        />\r\n        <ng-template\r\n          [ngTemplateOutlet]=\"label\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: 'form-check-label' }\"\r\n        ></ng-template>\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"select\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"multiselect\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <select\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        multiple=\"multiple\"\r\n        class=\"form-select form-control\"\r\n      >\r\n        <option\r\n          *ngFor=\"let option of options$ | async; trackBy: track.by('value')\"\r\n          [ngValue]=\"option.value\"\r\n        >\r\n          {{ option.key }}\r\n        </option>\r\n      </select>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"typeahead\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <div #typeahead class=\"position-relative\" validationStyle validationTarget>\r\n        <input\r\n          #field\r\n          [id]=\"prop.id\"\r\n          [autocomplete]=\"prop.autocomplete\"\r\n          [abpDisabled]=\"disabled\"\r\n          [ngbTypeahead]=\"search\"\r\n          [editable]=\"false\"\r\n          [inputFormatter]=\"typeaheadFormatter\"\r\n          [resultFormatter]=\"typeaheadFormatter\"\r\n          [ngModelOptions]=\"{ standalone: true }\"\r\n          [(ngModel)]=\"typeaheadModel\"\r\n          (selectItem)=\"setTypeaheadValue($event.item)\"\r\n          (blur)=\"setTypeaheadValue(typeaheadModel)\"\r\n          [class.is-invalid]=\"typeahead.classList.contains('is-invalid')\"\r\n          class=\"form-control\"\r\n        />\r\n        <input [formControlName]=\"prop.name\" type=\"hidden\" />\r\n      </div>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"date\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <input\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        (click)=\"datepicker.open()\"\r\n        (keyup.space)=\"datepicker.open()\"\r\n        ngbDatepicker\r\n        #datepicker=\"ngbDatepicker\"\r\n        type=\"text\"\r\n        class=\"form-control\"\r\n      />\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"time\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <ngb-timepicker [formControlName]=\"prop.name\"></ngb-timepicker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"dateTime\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-date-time-picker [prop]=\"prop\" [meridian]=\"meridian\"></abp-date-time-picker>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"textarea\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <textarea\r\n        #field\r\n        [id]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n        [abpDisabled]=\"disabled\"\r\n        [readonly]=\"readonly\"\r\n        class=\"form-control\"\r\n      ></textarea>\r\n    </ng-template>\r\n\r\n    <ng-template ngSwitchCase=\"passwordinputgroup\">\r\n      <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n      <abp-password\r\n        *abpReplaceableTemplate=\"{\r\n          componentKey: passwordKey,\r\n          inputs: {\r\n            inputId: { value: prop.id },\r\n            formControlName: { value: prop.name }\r\n          }\r\n        }\"\r\n        [inputId]=\"prop.id\"\r\n        [formControlName]=\"prop.name\"\r\n      ></abp-password>\r\n    </ng-template>\r\n\r\n    <small *ngIf=\"prop.formText\" class=\"text-muted d-block\">{{\r\n      prop.formText | abpLocalization\r\n    }}</small>\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop.id\" [ngClass]=\"classes || 'form-label'\">\r\n    <ng-container *ngIf=\"prop.displayTextResolver; else displayNameTemplate\">\r\n      {{ prop.displayTextResolver(data) | abpLocalization }}\r\n    </ng-container>\r\n    <ng-template #displayNameTemplate> {{ prop.displayName | abpLocalization }}</ng-template>\r\n    {{ asterisk }}\r\n  </label>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i1.TrackByService }, { type: i1.ConfigStateService }, { type: i2.FormGroupDirective }, { type: i0.Injector }]; }, propDecorators: { data: [{
                 type: Input
             }], prop: [{
@@ -633,10 +633,12 @@ class ActionData {
     }
 }
 class Action {
-    constructor(permission, visible = () => true, action = () => { }) {
+    constructor(permission, visible = () => true, action = () => { }, btnClass, btnStyle) {
         this.permission = permission;
         this.visible = visible;
         this.action = action;
+        this.btnClass = btnClass;
+        this.btnStyle = btnStyle;
     }
 }
 class ActionsFactory {
@@ -685,6 +687,8 @@ class EntityAction extends Action {
         super(options.permission || '', options.visible, options.action);
         this.text = options.text;
         this.icon = options.icon || '';
+        this.btnClass = options.btnClass || 'btn btn-primary text-center';
+        this.btnStyle = options.btnStyle;
     }
     static create(options) {
         return new EntityAction(options);
@@ -923,7 +927,7 @@ class GridActionsComponent extends AbstractActionsComponent {
                 provide: EXTENSIONS_ACTION_TYPE,
                 useValue: 'entityActions',
             },
-        ], exportAs: ["abpGridActions"], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"actionList.length > 1\" ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n  <button\r\n    class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n    data-toggle=\"dropdown\"\r\n    aria-haspopup=\"true\"\r\n    ngbDropdownToggle\r\n  >\r\n    <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n  </button>\r\n  <div ngbDropdownMenu>\r\n    <ng-container\r\n      *ngFor=\"let action of actionList; trackBy: trackByFn\"\r\n      [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n    >\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-container\r\n  *ngIf=\"actionList.length === 1\"\r\n  [ngTemplateOutlet]=\"btnTmp\"\r\n  [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n></ng-container>\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  <ng-container *ngIf=\"action.visible(data)\">\r\n    <button\r\n      ngbDropdownItem\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon\"></i>\r\n  <span *ngIf=\"action.icon; else ellipsis\">{{ action.text | abpLocalization }}</span>\r\n  <ng-template #ellipsis>\r\n    <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  <ng-container *ngIf=\"action.visible(data)\">\r\n    <button\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n      class=\"btn btn-primary text-center\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  </ng-container>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: i4$2.EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }, { kind: "directive", type: i4$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i4$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+        ], exportAs: ["abpGridActions"], usesInheritance: true, ngImport: i0, template: "<div *ngIf=\"actionList.length > 1\" ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n  <button\r\n    class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n    data-toggle=\"dropdown\"\r\n    aria-haspopup=\"true\"\r\n    ngbDropdownToggle\r\n  >\r\n    <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n  </button>\r\n  <div ngbDropdownMenu>\r\n    <ng-container\r\n      *ngFor=\"let action of actionList; trackBy: trackByFn\"\r\n      [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n    >\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-container\r\n  *ngIf=\"actionList.length === 1\"\r\n  [ngTemplateOutlet]=\"btnTmp\"\r\n  [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n></ng-container>\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  <ng-container *ngIf=\"action.visible(data)\">\r\n    <button\r\n      ngbDropdownItem\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon\"></i>\r\n  <span *ngIf=\"action.icon; else ellipsis\">{{ action.text | abpLocalization }}</span>\r\n  <ng-template #ellipsis>\r\n    <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  <ng-container *ngIf=\"action.visible(data)\">\r\n    <button\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n      [class]=\"action.btnClass\"\r\n      [style]=\"action.btnStyle\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  </ng-container>\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: i4$2.EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }, { kind: "directive", type: i4$1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i4$1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i4$1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i4$1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["disabled"] }, { kind: "pipe", type: i1.LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImport: i0, type: GridActionsComponent, decorators: [{
             type: Component,
@@ -932,7 +936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.0.6", ngImpor
                             provide: EXTENSIONS_ACTION_TYPE,
                             useValue: 'entityActions',
                         },
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"actionList.length > 1\" ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n  <button\r\n    class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n    data-toggle=\"dropdown\"\r\n    aria-haspopup=\"true\"\r\n    ngbDropdownToggle\r\n  >\r\n    <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n  </button>\r\n  <div ngbDropdownMenu>\r\n    <ng-container\r\n      *ngFor=\"let action of actionList; trackBy: trackByFn\"\r\n      [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n    >\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-container\r\n  *ngIf=\"actionList.length === 1\"\r\n  [ngTemplateOutlet]=\"btnTmp\"\r\n  [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n></ng-container>\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  <ng-container *ngIf=\"action.visible(data)\">\r\n    <button\r\n      ngbDropdownItem\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon\"></i>\r\n  <span *ngIf=\"action.icon; else ellipsis\">{{ action.text | abpLocalization }}</span>\r\n  <ng-template #ellipsis>\r\n    <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  <ng-container *ngIf=\"action.visible(data)\">\r\n    <button\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n      class=\"btn btn-primary text-center\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div *ngIf=\"actionList.length > 1\" ngbDropdown container=\"body\" class=\"d-inline-block\">\r\n  <button\r\n    class=\"btn btn-primary btn-sm dropdown-toggle\"\r\n    data-toggle=\"dropdown\"\r\n    aria-haspopup=\"true\"\r\n    ngbDropdownToggle\r\n  >\r\n    <i [ngClass]=\"icon\" [class.me-1]=\"icon\"></i>{{ text | abpLocalization }}\r\n  </button>\r\n  <div ngbDropdownMenu>\r\n    <ng-container\r\n      *ngFor=\"let action of actionList; trackBy: trackByFn\"\r\n      [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n      [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n    >\r\n    </ng-container>\r\n  </div>\r\n</div>\r\n\r\n<ng-container\r\n  *ngIf=\"actionList.length === 1\"\r\n  [ngTemplateOutlet]=\"btnTmp\"\r\n  [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n></ng-container>\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  <ng-container *ngIf=\"action.visible(data)\">\r\n    <button\r\n      ngbDropdownItem\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  </ng-container>\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [ngClass]=\"action.icon\" [class.me-1]=\"action.icon\"></i>\r\n  <span *ngIf=\"action.icon; else ellipsis\">{{ action.text | abpLocalization }}</span>\r\n  <ng-template #ellipsis>\r\n    <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n  </ng-template>\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  <ng-container *ngIf=\"action.visible(data)\">\r\n    <button\r\n      *abpPermission=\"action.permission; runChangeDetection: false\"\r\n      (click)=\"action.action(data)\"\r\n      type=\"button\"\r\n      [class]=\"action.btnClass\"\r\n      [style]=\"action.btnStyle\"\r\n    >\r\n      <ng-container\r\n        *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\"\r\n      ></ng-container>\r\n    </button>\r\n  </ng-container>\r\n</ng-template>\r\n" }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; }, propDecorators: { icon: [{
                 type: Input
             }], index: [{
@@ -1013,6 +1017,9 @@ class ExtensibleTableComponent {
     ngOnChanges({ data }) {
         if (!data?.currentValue)
             return;
+        if (data.currentValue.length < 1) {
+            this.list.totalCount = this.recordsTotal;
+        }
         this.data = data.currentValue.map((record, index) => {
             this.propList.forEach(prop => {
                 const propData = { getInjected: this.getInjected, record, index };