@abp/ng.components 10.6.0-rc.3 → 10.7.0-rc.1

package/fesm2022/abp-ng.components-extensible.mjs

@@ -39,8 +39,8 @@ class ExtensibleDateTimePickerComponent {
     setTime(dateStr) {
         this.time().writeValue(dateStr);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleDateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: ExtensibleDateTimePickerComponent, isStandalone: true, selector: "abp-extensible-date-time-picker", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: false, transformFunction: null }, meridian: { classPropertyName: "meridian", publicName: "meridian", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "date", first: true, predicate: NgbInputDatepicker, descendants: true, isSignal: true }, { propertyName: "time", first: true, predicate: NgbTimepicker, descendants: true, isSignal: true }], exportAs: ["abpExtensibleDateTimePicker"], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleDateTimePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: ExtensibleDateTimePickerComponent, isStandalone: true, selector: "abp-extensible-date-time-picker", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: false, transformFunction: null }, meridian: { classPropertyName: "meridian", publicName: "meridian", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "date", first: true, predicate: NgbInputDatepicker, descendants: true, isSignal: true }, { propertyName: "time", first: true, predicate: NgbTimepicker, descendants: true, isSignal: true }], exportAs: ["abpExtensibleDateTimePicker"], ngImport: i0, template: `
     <input
       [id]="prop().id"
       [formControlName]="prop().name"
@@ -75,7 +75,7 @@ class ExtensibleDateTimePickerComponent {
             },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleDateTimePickerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleDateTimePickerComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'abpExtensibleDateTimePicker',
@@ -254,10 +254,10 @@ class ExtensibleFormPropService {
         const required = validators.find(v => this.isRequired(v));
         return required ? '*' : '';
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleFormPropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleFormPropService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleFormPropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleFormPropService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleFormPropService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleFormPropService, decorators: [{
             type: Injectable
         }] });
 
@@ -299,8 +299,8 @@ class ExtensibleFormMultiselectComponent {
     registerOnTouched(fn) {
         this.onTouched = fn;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleFormMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ExtensibleFormMultiselectComponent, isStandalone: true, selector: "abp-extensible-form-multi-select", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: `
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleFormMultiselectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExtensibleFormMultiselectComponent, isStandalone: true, selector: "abp-extensible-form-multi-select", inputs: { prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: true, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: true, transformFunction: null } }, providers: [EXTENSIBLE_FORM_MULTI_SELECT_CONTROL_VALUE_ACCESSOR], ngImport: i0, template: `
     <div [id]="prop().id">
       @for (option of options(); track option.value) {
         <div class="form-check" validationTarget>
@@ -324,7 +324,7 @@ class ExtensibleFormMultiselectComponent {
     </div>
   `, isInline: true, dependencies: [{ kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleFormMultiselectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleFormMultiselectComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'abp-extensible-form-multi-select',
@@ -496,8 +496,8 @@ class ExtensibleFormPropComponent {
     getType(prop) {
         return this.service.getType(prop);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleFormPropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ExtensibleFormPropComponent, isStandalone: true, selector: "abp-extensible-form-prop", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: true, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, isFirstGroup: { classPropertyName: "isFirstGroup", publicName: "isFirstGroup", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ExtensibleFormPropService], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *abpPermission=\"prop().permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop())) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop().template; injector: injectorForCustomComponent()\" />\r\n    }\r\n  }\r\n\r\n  <div [class]=\"containerClassName()\" class=\"mb-2\">\r\n    @switch (getComponent(prop())) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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]=\"isReadonly()\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop().name\" type=\"hidden\" />\r\n      }\r\n      @case ('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          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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          @for (option of options$() | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop().isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop()\"\r\n          [options]=\"options$() | async\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled()\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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            (ngModelChange)=\"typeaheadModel.set($event)\"\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      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop().name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop()\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled()\"\r\n          [readonly]=\"isReadonly()\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop().id\"\r\n            [formControlName]=\"prop().name\"\r\n            [abpShowPassword]=\"showPassword()\"\r\n          />\r\n          <button\r\n            class=\"btn btn-secondary\"\r\n            type=\"button\"\r\n            (click)=\"showPassword.update(value => !value)\"\r\n          >\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [class]=\"{\r\n                'fa-eye-slash': !showPassword(),\r\n                'fa-eye': showPassword(),\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop().formText) {\r\n      <small class=\"text-muted d-block\">{{ prop().formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop().id\" [class]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop().displayTextResolver) {\r\n        {{ prop().displayTextResolver(data()) | abpLocalization }}\r\n      } @else {\r\n        @if (prop().isExtra) {\r\n          {{ '::' + prop().displayName | abpLocalization }}\r\n        } @else {\r\n          {{ prop().displayName | abpLocalization }}\r\n        }\r\n      }\r\n      {{ asterisk() }}\r\n      @if (prop().tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop().tooltip.text | abpLocalization\"\r\n          [placement]=\"prop().tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: ExtensibleDateTimePickerComponent, selector: "abp-extensible-date-time-picker", inputs: ["prop", "meridian", "placement"], exportAs: ["abpExtensibleDateTimePicker"] }, { kind: "component", type: ExtensibleFormMultiselectComponent, selector: "abp-extensible-form-multi-select", inputs: ["prop", "options"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i1.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: "ngmodule", type: NgbTimepickerModule }, { kind: "component", type: i1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: ShowPasswordDirective, selector: "[abpShowPassword]", inputs: ["abpShowPassword"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleFormPropComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExtensibleFormPropComponent, isStandalone: true, selector: "abp-extensible-form-prop", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, prop: { classPropertyName: "prop", publicName: "prop", isSignal: true, isRequired: true, transformFunction: null }, first: { classPropertyName: "first", publicName: "first", isSignal: true, isRequired: false, transformFunction: null }, isFirstGroup: { classPropertyName: "isFirstGroup", publicName: "isFirstGroup", isSignal: true, isRequired: false, transformFunction: null } }, providers: [ExtensibleFormPropService], viewQueries: [{ propertyName: "fieldRef", first: true, predicate: ["field"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-container *abpPermission=\"prop().permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop())) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop().template; injector: injectorForCustomComponent()\" />\r\n    }\r\n  }\r\n\r\n  <div [class]=\"containerClassName()\" class=\"mb-2\">\r\n    @switch (getComponent(prop())) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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]=\"isReadonly()\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop().name\" type=\"hidden\" />\r\n      }\r\n      @case ('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          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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          @for (option of options$() | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop().isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop()\"\r\n          [options]=\"options$() | async\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled()\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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            (ngModelChange)=\"typeaheadModel.set($event)\"\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      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop().name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop()\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled()\"\r\n          [readonly]=\"isReadonly()\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop().id\"\r\n            [formControlName]=\"prop().name\"\r\n            [abpShowPassword]=\"showPassword()\"\r\n          />\r\n          <button\r\n            class=\"btn btn-secondary\"\r\n            type=\"button\"\r\n            (click)=\"showPassword.update(value => !value)\"\r\n          >\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [class]=\"{\r\n                'fa-eye-slash': !showPassword(),\r\n                'fa-eye': showPassword(),\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop().formText) {\r\n      <small class=\"text-muted d-block\">{{ prop().formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop().id\" [class]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop().displayTextResolver) {\r\n        {{ prop().displayTextResolver(data()) | abpLocalization }}\r\n      } @else {\r\n        {{ prop().displayName | abpLocalization }}\r\n      }\r\n      {{ asterisk() }}\r\n      @if (prop().tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop().tooltip.text | abpLocalization\"\r\n          [placement]=\"prop().tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n", dependencies: [{ kind: "component", type: ExtensibleDateTimePickerComponent, selector: "abp-extensible-date-time-picker", inputs: ["prop", "meridian", "placement"], exportAs: ["abpExtensibleDateTimePicker"] }, { kind: "component", type: ExtensibleFormMultiselectComponent, selector: "abp-extensible-form-multi-select", inputs: ["prop", "options"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i1.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: "ngmodule", type: NgbTimepickerModule }, { kind: "component", type: i1.NgbTimepicker, selector: "ngb-timepicker", inputs: ["meridian", "spinners", "seconds", "hourStep", "minuteStep", "secondStep", "readonlyInputs", "size"], exportAs: ["ngbTimepicker"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i2.SelectControlValueAccessor, selector: "select:not([multiple]):not([ngNoCva])[formControlName],select:not([multiple]):not([ngNoCva])[formControl],select:not([multiple]):not([ngNoCva])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: DisabledDirective, selector: "[abpDisabled]", inputs: ["abpDisabled"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.ValidationStyleDirective, selector: "[validationStyle]", exportAs: ["validationStyle"] }, { kind: "directive", type: i3.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }, { kind: "directive", type: i3.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "ngmodule", type: NgbTypeaheadModule }, { kind: "directive", type: i1.NgbTypeahead, selector: "input[ngbTypeahead]", inputs: ["autocomplete", "container", "editable", "focusFirst", "inputFormatter", "ngbTypeahead", "resultFormatter", "resultTemplate", "selectOnExact", "showHint", "placement", "popperOptions", "popupClass"], outputs: ["selectItem"], exportAs: ["ngbTypeahead"] }, { kind: "directive", type: ShowPasswordDirective, selector: "[abpShowPassword]", inputs: ["abpShowPassword"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: AsyncPipe, name: "async" }], viewProviders: [
             {
                 provide: ControlContainer,
                 useFactory: selfFactory,
@@ -507,7 +507,7 @@ class ExtensibleFormPropComponent {
             { provide: NgbTimeAdapter, useClass: TimeAdapter },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleFormPropComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleFormPropComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-extensible-form-prop', imports: [
                         ExtensibleDateTimePickerComponent,
@@ -534,7 +534,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         },
                         { provide: NgbDateAdapter, useClass: DateAdapter },
                         { provide: NgbTimeAdapter, useClass: TimeAdapter },
-                    ], template: "<ng-container *abpPermission=\"prop().permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop())) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop().template; injector: injectorForCustomComponent()\" />\r\n    }\r\n  }\r\n\r\n  <div [class]=\"containerClassName()\" class=\"mb-2\">\r\n    @switch (getComponent(prop())) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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]=\"isReadonly()\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop().name\" type=\"hidden\" />\r\n      }\r\n      @case ('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          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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          @for (option of options$() | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop().isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop()\"\r\n          [options]=\"options$() | async\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled()\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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            (ngModelChange)=\"typeaheadModel.set($event)\"\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      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop().name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop()\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled()\"\r\n          [readonly]=\"isReadonly()\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop().id\"\r\n            [formControlName]=\"prop().name\"\r\n            [abpShowPassword]=\"showPassword()\"\r\n          />\r\n          <button\r\n            class=\"btn btn-secondary\"\r\n            type=\"button\"\r\n            (click)=\"showPassword.update(value => !value)\"\r\n          >\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [class]=\"{\r\n                'fa-eye-slash': !showPassword(),\r\n                'fa-eye': showPassword(),\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop().formText) {\r\n      <small class=\"text-muted d-block\">{{ prop().formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop().id\" [class]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop().displayTextResolver) {\r\n        {{ prop().displayTextResolver(data()) | abpLocalization }}\r\n      } @else {\r\n        @if (prop().isExtra) {\r\n          {{ '::' + prop().displayName | abpLocalization }}\r\n        } @else {\r\n          {{ prop().displayName | abpLocalization }}\r\n        }\r\n      }\r\n      {{ asterisk() }}\r\n      @if (prop().tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop().tooltip.text | abpLocalization\"\r\n          [placement]=\"prop().tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n" }]
+                    ], template: "<ng-container *abpPermission=\"prop().permission; runChangeDetection: false\">\r\n  @switch (getComponent(prop())) {\r\n    @case ('template') {\r\n      <ng-container *ngComponentOutlet=\"prop().template; injector: injectorForCustomComponent()\" />\r\n    }\r\n  }\r\n\r\n  <div [class]=\"containerClassName()\" class=\"mb-2\">\r\n    @switch (getComponent(prop())) {\r\n      @case ('input') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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]=\"isReadonly()\"\r\n          class=\"form-control\"\r\n        />\r\n      }\r\n      @case ('hidden') {\r\n        <input [formControlName]=\"prop().name\" type=\"hidden\" />\r\n      }\r\n      @case ('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          />\r\n        </div>\r\n      }\r\n      @case ('select') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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          @for (option of options$() | async; track option.value) {\r\n            <option [ngValue]=\"option.value\">\r\n              @if (prop().isExtra) {\r\n                {{ '::' + option.key | abpLocalization }}\r\n              } @else {\r\n                {{ option.key }}\r\n              }\r\n            </option>\r\n          }\r\n        </select>\r\n      }\r\n      @case ('multiselect') {\r\n        <ng-template [ngTemplateOutlet]=\"label\"></ng-template>\r\n        <abp-extensible-form-multi-select\r\n          [prop]=\"prop()\"\r\n          [options]=\"options$() | async\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled()\"\r\n        />\r\n      }\r\n      @case ('typeahead') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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            (ngModelChange)=\"typeaheadModel.set($event)\"\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      }\r\n      @case ('date') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\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      }\r\n      @case ('time') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <ngb-timepicker [formControlName]=\"prop().name\" />\r\n      }\r\n      @case ('dateTime') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <abp-extensible-date-time-picker [prop]=\"prop()\" [meridian]=\"meridian$ | async\" />\r\n      }\r\n      @case ('textarea') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <textarea\r\n          #field\r\n          [id]=\"prop().id\"\r\n          [formControlName]=\"prop().name\"\r\n          [abpDisabled]=\"disabled()\"\r\n          [readonly]=\"isReadonly()\"\r\n          class=\"form-control\"\r\n        ></textarea>\r\n      }\r\n      @case ('passwordinputgroup') {\r\n        <ng-template [ngTemplateOutlet]=\"label\" />\r\n        <div class=\"input-group form-group\" validationTarget>\r\n          <input\r\n            class=\"form-control\"\r\n            [id]=\"prop().id\"\r\n            [formControlName]=\"prop().name\"\r\n            [abpShowPassword]=\"showPassword()\"\r\n          />\r\n          <button\r\n            class=\"btn btn-secondary\"\r\n            type=\"button\"\r\n            (click)=\"showPassword.update(value => !value)\"\r\n          >\r\n            <i\r\n              class=\"fa\"\r\n              aria-hidden=\"true\"\r\n              [class]=\"{\r\n                'fa-eye-slash': !showPassword(),\r\n                'fa-eye': showPassword(),\r\n              }\"\r\n            ></i>\r\n          </button>\r\n        </div>\r\n      }\r\n    }\r\n\r\n    @if (prop().formText) {\r\n      <small class=\"text-muted d-block\">{{ prop().formText | abpLocalization }}</small>\r\n    }\r\n  </div>\r\n</ng-container>\r\n\r\n<ng-template #label let-classes>\r\n  <label [htmlFor]=\"prop().id\" [class]=\"classes || 'form-label d-inline-block'\">\r\n    <span class=\"d-inline-flex align-items-center gap-1 text-nowrap\">\r\n      @if (prop().displayTextResolver) {\r\n        {{ prop().displayTextResolver(data()) | abpLocalization }}\r\n      } @else {\r\n        {{ prop().displayName | abpLocalization }}\r\n      }\r\n      {{ asterisk() }}\r\n      @if (prop().tooltip) {\r\n        <i\r\n          [ngbTooltip]=\"prop().tooltip.text | abpLocalization\"\r\n          [placement]=\"prop().tooltip.placement || 'auto'\"\r\n          container=\"body\"\r\n          class=\"bi bi-info-circle\"\r\n        ></i>\r\n      }\r\n    </span>\r\n  </label>\r\n</ng-template>\r\n" }]
         }], ctorParameters: () => [], propDecorators: { data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], prop: [{ type: i0.Input, args: [{ isSignal: true, alias: "prop", required: true }] }], first: [{ type: i0.Input, args: [{ isSignal: true, alias: "first", required: false }] }], isFirstGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFirstGroup", required: false }] }], fieldRef: [{ type: i0.ViewChild, args: ['field', { isSignal: true }] }] } });
 
 class PropList extends LinkedList {
@@ -842,10 +842,10 @@ class ExtensionsService {
         this.createFormProps = new CreateFormPropsFactory();
         this.editFormProps = new EditFormPropsFactory();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensionsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensionsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensionsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensionsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -879,10 +879,10 @@ class PropDataDirective extends PropData {
     ngOnDestroy() {
         this.vcRef.clear();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PropDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: PropDataDirective, isStandalone: true, selector: "[abpPropData]", inputs: { propList: { classPropertyName: "propList", publicName: "abpPropDataFromList", isSignal: true, isRequired: false, transformFunction: null }, record: { classPropertyName: "record", publicName: "abpPropDataWithRecord", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "abpPropDataAtIndex", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["abpPropData"], usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PropDataDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: PropDataDirective, isStandalone: true, selector: "[abpPropData]", inputs: { propList: { classPropertyName: "propList", publicName: "abpPropDataFromList", isSignal: true, isRequired: false, transformFunction: null }, record: { classPropertyName: "record", publicName: "abpPropDataWithRecord", isSignal: true, isRequired: true, transformFunction: null }, index: { classPropertyName: "index", publicName: "abpPropDataAtIndex", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["abpPropData"], usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PropDataDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PropDataDirective, decorators: [{
             type: Directive,
             args: [{
                     exportAs: 'abpPropData',
@@ -935,8 +935,8 @@ class ExtensibleFormComponent {
         const formPropList = items[index].formPropList.toArray();
         return formPropList.some(prop => prop.visible(data));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ExtensibleFormComponent, isStandalone: true, selector: "abp-extensible-form", inputs: { selectedRecord: { classPropertyName: "selectedRecord", publicName: "selectedRecord", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true, isSignal: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "@if (form) {\r\n@for (groupedProp of groupedPropList()?.items; track i; let i = $index; let first = $first) {\r\n<ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record()\">\r\n  @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {\r\n  <div [class]=\"groupedProp.group?.className\"\r\n    [attr.data-name]=\"groupedProp.group?.name || groupedProp.group?.className\">\r\n    <ng-container [ngTemplateOutlet]=\"propListTemplate\"\r\n      [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first}\">\r\n    </ng-container>\r\n  </div>\r\n  } @else {\r\n  <ng-container [ngTemplateOutlet]=\"propListTemplate\"\r\n    [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first }\">\r\n  </ng-container>\r\n  }\r\n</ng-container>\r\n}\r\n}\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" let-isFirstGroup=\"isFirstGroup\" #propListTemplate>\r\n  @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {\r\n  @if (prop.visible(data)) {\r\n  @if (extraProperties.controls[prop.name]) {\r\n  <ng-container [formGroupName]=\"extraPropertiesKey\">\r\n    <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\" [class]=\"prop.className\" />\r\n  </ng-container>\r\n  } @else {\r\n  @if (form.get(prop.name)) {\r\n  <abp-extensible-form-prop [class]=\"prop.className\" [prop]=\"prop\" [data]=\"data\" [first]=\"first\"\r\n    [isFirstGroup]=\"isFirstGroup\" />\r\n  }\r\n  }\r\n  }\r\n  }\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first", "isFirstGroup"] }], viewProviders: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExtensibleFormComponent, isStandalone: true, selector: "abp-extensible-form", inputs: { selectedRecord: { classPropertyName: "selectedRecord", publicName: "selectedRecord", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "formProps", predicate: ExtensibleFormPropComponent, descendants: true, isSignal: true }], exportAs: ["abpExtensibleForm"], ngImport: i0, template: "@if (form) {\r\n@for (groupedProp of groupedPropList()?.items; track i; let i = $index; let first = $first) {\r\n<ng-container *abpPropData=\"let data; fromList: groupedProp.formPropList; withRecord: record()\">\r\n  @if (isAnyGroupMemberVisible(i, data) && groupedProp.group?.className) {\r\n  <div [class]=\"groupedProp.group?.className\"\r\n    [attr.data-name]=\"groupedProp.group?.name || groupedProp.group?.className\">\r\n    <ng-container [ngTemplateOutlet]=\"propListTemplate\"\r\n      [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first}\">\r\n    </ng-container>\r\n  </div>\r\n  } @else {\r\n  <ng-container [ngTemplateOutlet]=\"propListTemplate\"\r\n    [ngTemplateOutletContext]=\"{ groupedProp: groupedProp, data: data, isFirstGroup: first }\">\r\n  </ng-container>\r\n  }\r\n</ng-container>\r\n}\r\n}\r\n\r\n<ng-template let-groupedProp=\"groupedProp\" let-data=\"data\" let-isFirstGroup=\"isFirstGroup\" #propListTemplate>\r\n  @for (prop of groupedProp.formPropList; let index = $index; let first = $first; track prop.name) {\r\n  @if (prop.visible(data)) {\r\n  @if (extraProperties.controls[prop.name]) {\r\n  <ng-container [formGroupName]=\"extraPropertiesKey\">\r\n    <abp-extensible-form-prop [prop]=\"prop\" [data]=\"data\" [class]=\"prop.className\" />\r\n  </ng-container>\r\n  } @else {\r\n  @if (form.get(prop.name)) {\r\n  <abp-extensible-form-prop [class]=\"prop.className\" [prop]=\"prop\" [data]=\"data\" [first]=\"first\"\r\n    [isFirstGroup]=\"isFirstGroup\" />\r\n  }\r\n  }\r\n  }\r\n  }\r\n</ng-template>", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: PropDataDirective, selector: "[abpPropData]", inputs: ["abpPropDataFromList", "abpPropDataWithRecord", "abpPropDataAtIndex"], exportAs: ["abpPropData"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "component", type: ExtensibleFormPropComponent, selector: "abp-extensible-form-prop", inputs: ["data", "prop", "first", "isFirstGroup"] }], viewProviders: [
             {
                 provide: ControlContainer,
                 useFactory: selfFactory,
@@ -944,7 +944,7 @@ class ExtensibleFormComponent {
             },
         ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleFormComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpExtensibleForm', selector: 'abp-extensible-form', imports: [NgTemplateOutlet, PropDataDirective, ReactiveFormsModule, ExtensibleFormPropComponent], changeDetection: ChangeDetectionStrategy.OnPush, viewProviders: [
                         {
@@ -969,10 +969,10 @@ class AbstractActionsComponent extends ActionData {
         const type = injector.get(EXTENSIONS_ACTION_TYPE);
         this.actionList = extensions[type].get(name).actions;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AbstractActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.7", type: AbstractActionsComponent, isStandalone: true, inputs: { record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AbstractActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "22.0.8", type: AbstractActionsComponent, isStandalone: true, inputs: { record: { classPropertyName: "record", publicName: "record", isSignal: true, isRequired: true, transformFunction: null } }, usesInheritance: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: AbstractActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AbstractActionsComponent, decorators: [{
             type: Directive
         }], ctorParameters: () => [], propDecorators: { record: [{ type: i0.Input, args: [{ isSignal: true, alias: "record", required: true }] }] } });
 
@@ -987,15 +987,15 @@ class GridActionsComponent extends AbstractActionsComponent {
         ...(ngDevMode ? [{ debugName: "text" }] : /* istanbul ignore next */ []));
         this.trackByFn = (_, item) => item.text;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: GridActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: GridActionsComponent, isStandalone: true, selector: "abp-grid-actions", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GridActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: GridActionsComponent, isStandalone: true, selector: "abp-grid-actions", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, index: { classPropertyName: "index", publicName: "index", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
             {
                 provide: EXTENSIONS_ACTION_TYPE,
                 useValue: 'entityActions',
             },
         ], exportAs: ["abpGridActions"], usesInheritance: true, ngImport: i0, template: "@if (actionList.length > 1) {\r\n  <div 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 [class]=\"icon()\" [class.me-1]=\"icon()\"></i>{{ text() | abpLocalization }}\r\n    </button>\r\n    <div ngbDropdownMenu>\r\n      @for (action of actionList; track $index) {\r\n        <ng-container\r\n          [ngTemplateOutlet]=\"dropDownBtnItemTmp\"\r\n          [ngTemplateOutletContext]=\"{ $implicit: action }\"\r\n        />\r\n      }\r\n    </div>\r\n  </div>\r\n}\r\n\r\n@if (actionList.length === 1) {\r\n  <ng-container\r\n    [ngTemplateOutlet]=\"btnTmp\"\r\n    [ngTemplateOutletContext]=\"{ $implicit: actionList.get(0).value }\"\r\n  />\r\n}\r\n\r\n<ng-template #dropDownBtnItemTmp let-action>\r\n  @if (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 *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\" />\r\n    </button>\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #buttonContentTmp let-action>\r\n  <i [class]=\"action.icon\" [class.me-1]=\"action.icon && !action.showOnlyIcon\"></i>\r\n  @if (!action.showOnlyIcon) {\r\n    @if (action.icon) {\r\n      <span>{{ action.text | abpLocalization }}</span>\r\n    } @else {\r\n      <div abpEllipsis>{{ action.text | abpLocalization }}</div>\r\n    }\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #btnTmp let-action>\r\n  @if (action.visible(data)) {\r\n    @if (action.tooltip) {\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        [ngbTooltip]=\"action.tooltip.text | abpLocalization\"\r\n        [placement]=\"action.tooltip.placement || 'auto'\"\r\n        triggers=\"hover\"\r\n        container=\"body\"\r\n      >\r\n        <ng-container *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\" />\r\n      </button>\r\n    } @else {\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 *ngTemplateOutlet=\"buttonContentTmp; context: { $implicit: action }\" />\r\n      </button>\r\n    }\r\n  }\r\n</ng-template>\r\n", dependencies: [{ kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i1.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i1.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i1.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "directive", type: i1.NgbDropdownItem, selector: "[ngbDropdownItem]", inputs: ["tabindex", "disabled"] }, { kind: "directive", type: i1.NgbDropdownButtonItem, selector: "button[ngbDropdownItem]" }, { kind: "directive", type: EllipsisDirective, selector: "[abpEllipsis]", inputs: ["abpEllipsis", "title", "abpEllipsisEnabled"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: NgbTooltipModule }, { kind: "directive", type: i1.NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: GridActionsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: GridActionsComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpGridActions', imports: [
                         NgbDropdownModule,
@@ -1019,10 +1019,10 @@ class ExtensibleTableRowDetailComponent {
         this.template = contentChild((TemplateRef), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "template" }] : /* istanbul ignore next */ []));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleTableRowDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.7", type: ExtensibleTableRowDetailComponent, isStandalone: true, selector: "abp-extensible-table-row-detail", inputs: { rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleTableRowDetailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "22.0.8", type: ExtensibleTableRowDetailComponent, isStandalone: true, selector: "abp-extensible-table-row-detail", inputs: { rowHeight: { classPropertyName: "rowHeight", publicName: "rowHeight", isSignal: true, isRequired: false, transformFunction: null } }, queries: [{ propertyName: "template", first: true, predicate: (TemplateRef), descendants: true, isSignal: true }], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleTableRowDetailComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleTableRowDetailComponent, decorators: [{
             type: Component,
             args: [{
                     changeDetection: ChangeDetectionStrategy.OnPush,
@@ -1271,10 +1271,10 @@ class ExtensibleTableComponent {
     ngOnDestroy() {
         this.loadMoreSubscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsTextInput: { classPropertyName: "actionsTextInput", publicName: "actionsText", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, recordsTotal: { classPropertyName: "recordsTotal", publicName: "recordsTotal", isSignal: true, isRequired: true, transformFunction: null }, actionsColumnWidthInput: { classPropertyName: "actionsColumnWidthInput", publicName: "actionsColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionTypeInput: { classPropertyName: "selectionTypeInput", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, rowDetailTemplate: { classPropertyName: "rowDetailTemplate", publicName: "rowDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowDetailHeight: { classPropertyName: "rowDetailHeight", publicName: "rowDetailHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange", loadMore: "loadMore", rowDetailToggle: "rowDetailToggle" }, queries: [{ propertyName: "rowDetailComponent", first: true, predicate: ExtensibleTableRowDetailComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, isSignal: true }], exportAs: ["abpExtensibleTable"], ngImport: i0, template: "@if (isBrowser) {\r\n  <ngx-datatable\r\n    #table\r\n    default\r\n    [rows]=\"data\"\r\n    [count]=\"recordsTotal()\"\r\n    [list]=\"list()\"\r\n    [selectionType]=\"selectable() ? selectionType() : undefined\"\r\n    (activate)=\"tableActivate.emit($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    [selected]=\"selected()\"\r\n    (scroll)=\"onScroll($event)\"\r\n    [scrollbarV]=\"infiniteScroll()\"\r\n    [style.height]=\"getTableHeight()\"\r\n    [loadingIndicator]=\"infiniteScroll() && isLoading()\"\r\n    [footerHeight]=\"infiniteScroll() ? false : 50\"\r\n  >\r\n    @if (effectiveRowDetailTemplate) {\r\n      @let detailRowHeight = effectiveRowDetailRowHeight();\r\n      @if (detailRowHeight !== undefined) {\r\n        <ngx-datatable-row-detail [rowHeight]=\"detailRowHeight\">\r\n          <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n              [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      } @else {\r\n        <ngx-datatable-row-detail>\r\n          <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n              [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      }\r\n\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [resizeable]=\"false\"\r\n        [sortable]=\"false\"\r\n        [draggable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-cell-template>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-link text-decoration-none text-muted p-0\"\r\n            [attr.aria-label]=\"expanded ? 'Collapse' : 'Expand'\"\r\n            (click)=\"toggleExpandRow(row)\"\r\n          >\r\n            <i class=\"fa\" [class.fa-chevron-down]=\"!expanded\" [class.fa-chevron-up]=\"expanded\"></i>\r\n          </button>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (selectable()) {\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [sortable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n        [draggable]=\"false\"\r\n        [resizeable]=\"false\"\r\n      >\r\n        <ng-template\r\n          ngx-datatable-header-template\r\n          let-allRowsSelected=\"allRowsSelected\"\r\n          let-selectFn=\"selectFn\"\r\n        >\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input table-check\"\r\n                type=\"checkbox\"\r\n                [checked]=\"allRowsSelected\"\r\n                (change)=\"selectFn()\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          ngx-datatable-cell-template\r\n          let-value=\"value\"\r\n          let-row=\"row\"\r\n          let-isSelected=\"isSelected\"\r\n          let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n        >\r\n          @if (selectionType() === 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"radio\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n      <ngx-datatable-column\r\n        [name]=\"actionsText() | abpLocalization\"\r\n        [maxWidth]=\"_actionsColumnWidth()\"\r\n        [width]=\"_actionsColumnWidth() || 200\"\r\n        [canAutoResize]=\"!_actionsColumnWidth()\"\r\n        [sortable]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n          @if (actionsTemplate(); as template) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"template\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n            ></ng-container>\r\n          } @else if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @for (prop of propList; track prop.name; let i = $index) {\r\n      <ngx-datatable-column\r\n        *abpVisible=\"prop.columnVisible(getInjected)\"\r\n        [width]=\"columnWidths()[i] || 200\"\r\n        [canAutoResize]=\"!columnWidths()[i]\"\r\n        [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n        [prop]=\"prop.name\"\r\n        [sortable]=\"prop.sortable\"\r\n      >\r\n        <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n          @if (prop.tooltip) {\r\n            <span\r\n              [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n              [placement]=\"prop.tooltip.placement || 'auto'\"\r\n              container=\"body\"\r\n              [class.pointer]=\"prop.sortable\"\r\n              (click)=\"prop.sortable && sortFn()\"\r\n            >\r\n              {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n            </span>\r\n          } @else {\r\n            <span [class.pointer]=\"prop.sortable\" (click)=\"prop.sortable && sortFn()\">\r\n              {{ column.name }}\r\n            </span>\r\n          }\r\n        </ng-template>\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n          <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n            <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n              @if (!row['_' + prop.name].component) {\r\n                @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                        : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                          | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                } @else {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async)\r\n                        : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                }\r\n              } @else {\r\n                <ng-container\r\n                  *ngComponentOutlet=\"\r\n                    row['_' + prop.name].component;\r\n                    injector: row['_' + prop.name].injector\r\n                  \"\r\n                />\r\n              }\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n  </ngx-datatable>\r\n}\r\n", styles: [":host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail{background:none;padding:0}\n"], dependencies: [{ kind: "directive", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: ["abpVisible"] }, { kind: "ngmodule", type: NgxDatatableModule }, { kind: "component", type: i1$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i1$1.DatatableRowDetailDirective, selector: "ngx-datatable-row-detail", inputs: ["rowHeight", "template"], outputs: ["toggle"] }, { kind: "directive", type: i1$1.DatatableRowDetailTemplateDirective, selector: "[ngx-datatable-row-detail-template]" }, { kind: "directive", type: i1$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i1$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i1$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: UtcToLocalPipe, name: "abpUtcToLocal" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: ExtensibleTableComponent, isStandalone: true, selector: "abp-extensible-table", inputs: { actionsTextInput: { classPropertyName: "actionsTextInput", publicName: "actionsText", isSignal: true, isRequired: false, transformFunction: null }, dataInput: { classPropertyName: "dataInput", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null }, recordsTotal: { classPropertyName: "recordsTotal", publicName: "recordsTotal", isSignal: true, isRequired: true, transformFunction: null }, actionsColumnWidthInput: { classPropertyName: "actionsColumnWidthInput", publicName: "actionsColumnWidth", isSignal: true, isRequired: false, transformFunction: null }, actionsTemplate: { classPropertyName: "actionsTemplate", publicName: "actionsTemplate", isSignal: true, isRequired: false, transformFunction: null }, selectable: { classPropertyName: "selectable", publicName: "selectable", isSignal: true, isRequired: false, transformFunction: null }, selectionTypeInput: { classPropertyName: "selectionTypeInput", publicName: "selectionType", isSignal: true, isRequired: false, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, scrollThreshold: { classPropertyName: "scrollThreshold", publicName: "scrollThreshold", isSignal: true, isRequired: false, transformFunction: null }, tableHeight: { classPropertyName: "tableHeight", publicName: "tableHeight", isSignal: true, isRequired: false, transformFunction: null }, rowDetailTemplate: { classPropertyName: "rowDetailTemplate", publicName: "rowDetailTemplate", isSignal: true, isRequired: false, transformFunction: null }, rowDetailHeight: { classPropertyName: "rowDetailHeight", publicName: "rowDetailHeight", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { tableActivate: "tableActivate", selectionChange: "selectionChange", loadMore: "loadMore", rowDetailToggle: "rowDetailToggle" }, queries: [{ propertyName: "rowDetailComponent", first: true, predicate: ExtensibleTableRowDetailComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "table", first: true, predicate: ["table"], descendants: true, isSignal: true }], exportAs: ["abpExtensibleTable"], ngImport: i0, template: "@if (isBrowser) {\r\n  <ngx-datatable\r\n    #table\r\n    default\r\n    [rows]=\"data\"\r\n    [count]=\"recordsTotal()\"\r\n    [list]=\"list()\"\r\n    [selectionType]=\"selectable() ? selectionType() : undefined\"\r\n    (activate)=\"tableActivate.emit($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    [selected]=\"selected()\"\r\n    (scroll)=\"onScroll($event)\"\r\n    [scrollbarV]=\"infiniteScroll()\"\r\n    [style.height]=\"getTableHeight()\"\r\n    [loadingIndicator]=\"infiniteScroll() && isLoading()\"\r\n    [footerHeight]=\"infiniteScroll() ? false : 50\"\r\n  >\r\n    @if (effectiveRowDetailTemplate) {\r\n      @let detailRowHeight = effectiveRowDetailRowHeight();\r\n      @if (detailRowHeight !== undefined) {\r\n        <ngx-datatable-row-detail [rowHeight]=\"detailRowHeight\">\r\n          <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n              [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      } @else {\r\n        <ngx-datatable-row-detail>\r\n          <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n              [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      }\r\n\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [resizeable]=\"false\"\r\n        [sortable]=\"false\"\r\n        [draggable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-cell-template>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-link text-decoration-none text-muted p-0\"\r\n            [attr.aria-label]=\"expanded ? 'Collapse' : 'Expand'\"\r\n            (click)=\"toggleExpandRow(row)\"\r\n          >\r\n            <i class=\"fa\" [class.fa-chevron-down]=\"!expanded\" [class.fa-chevron-up]=\"expanded\"></i>\r\n          </button>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (selectable()) {\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [sortable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n        [draggable]=\"false\"\r\n        [resizeable]=\"false\"\r\n      >\r\n        <ng-template\r\n          ngx-datatable-header-template\r\n          let-allRowsSelected=\"allRowsSelected\"\r\n          let-selectFn=\"selectFn\"\r\n        >\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input table-check\"\r\n                type=\"checkbox\"\r\n                [checked]=\"allRowsSelected\"\r\n                (change)=\"selectFn()\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          ngx-datatable-cell-template\r\n          let-value=\"value\"\r\n          let-row=\"row\"\r\n          let-isSelected=\"isSelected\"\r\n          let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n        >\r\n          @if (selectionType() === 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"radio\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n      <ngx-datatable-column\r\n        [name]=\"actionsText() | abpLocalization\"\r\n        [maxWidth]=\"_actionsColumnWidth()\"\r\n        [width]=\"_actionsColumnWidth() || 200\"\r\n        [canAutoResize]=\"!_actionsColumnWidth()\"\r\n        [sortable]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n          @if (actionsTemplate(); as template) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"template\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n            ></ng-container>\r\n          } @else if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @for (prop of propList; track prop.name; let i = $index) {\r\n      <ngx-datatable-column\r\n        *abpVisible=\"prop.columnVisible(getInjected)\"\r\n        [width]=\"columnWidths()[i] || 200\"\r\n        [canAutoResize]=\"!columnWidths()[i]\"\r\n        [name]=\"prop.displayName | abpLocalization\"\r\n        [prop]=\"prop.name\"\r\n        [sortable]=\"prop.sortable\"\r\n      >\r\n        <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n          @if (prop.tooltip) {\r\n            <span\r\n              [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n              [placement]=\"prop.tooltip.placement || 'auto'\"\r\n              container=\"body\"\r\n              [class.pointer]=\"prop.sortable\"\r\n              (click)=\"prop.sortable && sortFn()\"\r\n            >\r\n              {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n            </span>\r\n          } @else {\r\n            <span [class.pointer]=\"prop.sortable\" (click)=\"prop.sortable && sortFn()\">\r\n              {{ column.name }}\r\n            </span>\r\n          }\r\n        </ng-template>\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n          <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n            <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n              @if (!row['_' + prop.name].component) {\r\n                @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                        : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                          | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                } @else {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async)\r\n                        : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                }\r\n              } @else {\r\n                <ng-container\r\n                  *ngComponentOutlet=\"\r\n                    row['_' + prop.name].component;\r\n                    injector: row['_' + prop.name].injector\r\n                  \"\r\n                />\r\n              }\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n  </ngx-datatable>\r\n}\r\n", styles: [":host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail{background:none;padding:0}\n"], dependencies: [{ kind: "directive", type: AbpVisibleDirective, selector: "[abpVisible]", inputs: ["abpVisible"] }, { kind: "ngmodule", type: NgxDatatableModule }, { kind: "component", type: i1$1.DatatableComponent, selector: "ngx-datatable", inputs: ["targetMarkerTemplate", "rows", "groupRowsBy", "groupedRows", "columns", "selected", "scrollbarV", "scrollbarVDynamic", "scrollbarH", "rowHeight", "columnMode", "headerHeight", "footerHeight", "externalPaging", "externalSorting", "limit", "count", "offset", "loadingIndicator", "ghostLoadingIndicator", "selectionType", "reorderable", "swapColumns", "sortType", "sorts", "cssClasses", "messages", "rowClass", "selectCheck", "displayCheck", "groupExpansionDefault", "trackByProp", "selectAllRowsOnPage", "virtualization", "treeFromRelation", "treeToRelation", "summaryRow", "summaryHeight", "summaryPosition", "disableRowCheck", "rowDraggable", "enableClearingSortState", "rowIdentity"], outputs: ["scroll", "activate", "select", "sort", "page", "reorder", "resize", "tableContextmenu", "treeAction", "rowDragEvents"] }, { kind: "directive", type: i1$1.DatatableRowDetailDirective, selector: "ngx-datatable-row-detail", inputs: ["rowHeight", "template"], outputs: ["toggle"] }, { kind: "directive", type: i1$1.DatatableRowDetailTemplateDirective, selector: "[ngx-datatable-row-detail-template]" }, { kind: "directive", type: i1$1.DataTableColumnDirective, selector: "ngx-datatable-column", inputs: ["name", "prop", "bindAsUnsafeHtml", "frozenLeft", "frozenRight", "flexGrow", "resizeable", "comparator", "pipe", "sortable", "draggable", "canAutoResize", "minWidth", "width", "maxWidth", "checkboxable", "headerCheckboxable", "headerClass", "cellClass", "isTreeColumn", "treeLevelIndent", "summaryFunc", "summaryTemplate", "cellTemplate", "headerTemplate", "treeToggleTemplate", "ghostCellTemplate"] }, { kind: "directive", type: i1$1.DataTableColumnHeaderDirective, selector: "[ngx-datatable-header-template]" }, { kind: "directive", type: i1$1.DataTableColumnCellDirective, selector: "[ngx-datatable-cell-template]" }, { kind: "component", type: GridActionsComponent, selector: "abp-grid-actions", inputs: ["icon", "index", "text"], exportAs: ["abpGridActions"] }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }, { kind: "directive", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: ["class"], exportAs: ["ngxDatatableDefault"] }, { kind: "directive", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: ["list"], exportAs: ["ngxDatatableList"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: UtcToLocalPipe, name: "abpUtcToLocal" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleTableComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpExtensibleTable', selector: 'abp-extensible-table', imports: [
                         AbpVisibleDirective,
@@ -1289,7 +1289,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImpor
                         AsyncPipe,
                         NgTemplateOutlet,
                         NgComponentOutlet,
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isBrowser) {\r\n  <ngx-datatable\r\n    #table\r\n    default\r\n    [rows]=\"data\"\r\n    [count]=\"recordsTotal()\"\r\n    [list]=\"list()\"\r\n    [selectionType]=\"selectable() ? selectionType() : undefined\"\r\n    (activate)=\"tableActivate.emit($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    [selected]=\"selected()\"\r\n    (scroll)=\"onScroll($event)\"\r\n    [scrollbarV]=\"infiniteScroll()\"\r\n    [style.height]=\"getTableHeight()\"\r\n    [loadingIndicator]=\"infiniteScroll() && isLoading()\"\r\n    [footerHeight]=\"infiniteScroll() ? false : 50\"\r\n  >\r\n    @if (effectiveRowDetailTemplate) {\r\n      @let detailRowHeight = effectiveRowDetailRowHeight();\r\n      @if (detailRowHeight !== undefined) {\r\n        <ngx-datatable-row-detail [rowHeight]=\"detailRowHeight\">\r\n          <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n              [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      } @else {\r\n        <ngx-datatable-row-detail>\r\n          <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n              [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      }\r\n\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [resizeable]=\"false\"\r\n        [sortable]=\"false\"\r\n        [draggable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-cell-template>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-link text-decoration-none text-muted p-0\"\r\n            [attr.aria-label]=\"expanded ? 'Collapse' : 'Expand'\"\r\n            (click)=\"toggleExpandRow(row)\"\r\n          >\r\n            <i class=\"fa\" [class.fa-chevron-down]=\"!expanded\" [class.fa-chevron-up]=\"expanded\"></i>\r\n          </button>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (selectable()) {\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [sortable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n        [draggable]=\"false\"\r\n        [resizeable]=\"false\"\r\n      >\r\n        <ng-template\r\n          ngx-datatable-header-template\r\n          let-allRowsSelected=\"allRowsSelected\"\r\n          let-selectFn=\"selectFn\"\r\n        >\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input table-check\"\r\n                type=\"checkbox\"\r\n                [checked]=\"allRowsSelected\"\r\n                (change)=\"selectFn()\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          ngx-datatable-cell-template\r\n          let-value=\"value\"\r\n          let-row=\"row\"\r\n          let-isSelected=\"isSelected\"\r\n          let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n        >\r\n          @if (selectionType() === 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"radio\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n      <ngx-datatable-column\r\n        [name]=\"actionsText() | abpLocalization\"\r\n        [maxWidth]=\"_actionsColumnWidth()\"\r\n        [width]=\"_actionsColumnWidth() || 200\"\r\n        [canAutoResize]=\"!_actionsColumnWidth()\"\r\n        [sortable]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n          @if (actionsTemplate(); as template) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"template\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n            ></ng-container>\r\n          } @else if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @for (prop of propList; track prop.name; let i = $index) {\r\n      <ngx-datatable-column\r\n        *abpVisible=\"prop.columnVisible(getInjected)\"\r\n        [width]=\"columnWidths()[i] || 200\"\r\n        [canAutoResize]=\"!columnWidths()[i]\"\r\n        [name]=\"(prop.isExtra ? '::' + prop.displayName : prop.displayName) | abpLocalization\"\r\n        [prop]=\"prop.name\"\r\n        [sortable]=\"prop.sortable\"\r\n      >\r\n        <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n          @if (prop.tooltip) {\r\n            <span\r\n              [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n              [placement]=\"prop.tooltip.placement || 'auto'\"\r\n              container=\"body\"\r\n              [class.pointer]=\"prop.sortable\"\r\n              (click)=\"prop.sortable && sortFn()\"\r\n            >\r\n              {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n            </span>\r\n          } @else {\r\n            <span [class.pointer]=\"prop.sortable\" (click)=\"prop.sortable && sortFn()\">\r\n              {{ column.name }}\r\n            </span>\r\n          }\r\n        </ng-template>\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n          <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n            <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n              @if (!row['_' + prop.name].component) {\r\n                @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                        : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                          | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                } @else {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async)\r\n                        : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                }\r\n              } @else {\r\n                <ng-container\r\n                  *ngComponentOutlet=\"\r\n                    row['_' + prop.name].component;\r\n                    injector: row['_' + prop.name].injector\r\n                  \"\r\n                />\r\n              }\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n  </ngx-datatable>\r\n}\r\n", styles: [":host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail{background:none;padding:0}\n"] }]
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (isBrowser) {\r\n  <ngx-datatable\r\n    #table\r\n    default\r\n    [rows]=\"data\"\r\n    [count]=\"recordsTotal()\"\r\n    [list]=\"list()\"\r\n    [selectionType]=\"selectable() ? selectionType() : undefined\"\r\n    (activate)=\"tableActivate.emit($event)\"\r\n    (select)=\"onSelect($event)\"\r\n    [selected]=\"selected()\"\r\n    (scroll)=\"onScroll($event)\"\r\n    [scrollbarV]=\"infiniteScroll()\"\r\n    [style.height]=\"getTableHeight()\"\r\n    [loadingIndicator]=\"infiniteScroll() && isLoading()\"\r\n    [footerHeight]=\"infiniteScroll() ? false : 50\"\r\n  >\r\n    @if (effectiveRowDetailTemplate) {\r\n      @let detailRowHeight = effectiveRowDetailRowHeight();\r\n      @if (detailRowHeight !== undefined) {\r\n        <ngx-datatable-row-detail [rowHeight]=\"detailRowHeight\">\r\n          <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n              [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      } @else {\r\n        <ngx-datatable-row-detail>\r\n          <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-row-detail-template>\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"effectiveRowDetailTemplate\"\r\n              [ngTemplateOutletContext]=\"{ row: row, expanded: expanded }\"\r\n            />\r\n          </ng-template>\r\n        </ngx-datatable-row-detail>\r\n      }\r\n\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [resizeable]=\"false\"\r\n        [sortable]=\"false\"\r\n        [draggable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-expanded=\"expanded\" ngx-datatable-cell-template>\r\n          <button\r\n            type=\"button\"\r\n            class=\"btn btn-link text-decoration-none text-muted p-0\"\r\n            [attr.aria-label]=\"expanded ? 'Collapse' : 'Expand'\"\r\n            (click)=\"toggleExpandRow(row)\"\r\n          >\r\n            <i class=\"fa\" [class.fa-chevron-down]=\"!expanded\" [class.fa-chevron-up]=\"expanded\"></i>\r\n          </button>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (selectable()) {\r\n      <ngx-datatable-column\r\n        [width]=\"50\"\r\n        [sortable]=\"false\"\r\n        [canAutoResize]=\"false\"\r\n        [draggable]=\"false\"\r\n        [resizeable]=\"false\"\r\n      >\r\n        <ng-template\r\n          ngx-datatable-header-template\r\n          let-allRowsSelected=\"allRowsSelected\"\r\n          let-selectFn=\"selectFn\"\r\n        >\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"form-check\">\r\n              <input\r\n                class=\"form-check-input table-check\"\r\n                type=\"checkbox\"\r\n                [checked]=\"allRowsSelected\"\r\n                (change)=\"selectFn()\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n\r\n        <ng-template\r\n          ngx-datatable-cell-template\r\n          let-value=\"value\"\r\n          let-row=\"row\"\r\n          let-isSelected=\"isSelected\"\r\n          let-onCheckboxChangeFn=\"onCheckboxChangeFn\"\r\n        >\r\n          @if (selectionType() === 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"radio\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n          @if (selectionType() !== 'single') {\r\n            <div class=\"h-100 form-check form-check-sm form-check-custom form-check-solid\">\r\n              <input\r\n                class=\"form-check-input\"\r\n                type=\"checkbox\"\r\n                [checked]=\"isSelected\"\r\n                (change)=\"onCheckboxChangeFn($event)\"\r\n              />\r\n            </div>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @if (actionsTemplate() || (actionList.length && hasAtLeastOnePermittedAction)) {\r\n      <ngx-datatable-column\r\n        [name]=\"actionsText() | abpLocalization\"\r\n        [maxWidth]=\"_actionsColumnWidth()\"\r\n        [width]=\"_actionsColumnWidth() || 200\"\r\n        [canAutoResize]=\"!_actionsColumnWidth()\"\r\n        [sortable]=\"false\"\r\n      >\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n          @if (actionsTemplate(); as template) {\r\n            <ng-container\r\n              [ngTemplateOutlet]=\"template\"\r\n              [ngTemplateOutletContext]=\"{ $implicit: row, index: i }\"\r\n            ></ng-container>\r\n          } @else if (isVisibleActions(row)) {\r\n            <abp-grid-actions [index]=\"i\" [record]=\"row\" text=\"AbpUi::Actions\"></abp-grid-actions>\r\n          }\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n    @for (prop of propList; track prop.name; let i = $index) {\r\n      <ngx-datatable-column\r\n        *abpVisible=\"prop.columnVisible(getInjected)\"\r\n        [width]=\"columnWidths()[i] || 200\"\r\n        [canAutoResize]=\"!columnWidths()[i]\"\r\n        [name]=\"prop.displayName | abpLocalization\"\r\n        [prop]=\"prop.name\"\r\n        [sortable]=\"prop.sortable\"\r\n      >\r\n        <ng-template ngx-datatable-header-template let-column=\"column\" let-sortFn=\"sortFn\">\r\n          @if (prop.tooltip) {\r\n            <span\r\n              [ngbTooltip]=\"prop.tooltip.text | abpLocalization\"\r\n              [placement]=\"prop.tooltip.placement || 'auto'\"\r\n              container=\"body\"\r\n              [class.pointer]=\"prop.sortable\"\r\n              (click)=\"prop.sortable && sortFn()\"\r\n            >\r\n              {{ column.name }} <i class=\"fa fa-info-circle\" aria-hidden=\"true\"></i>\r\n            </span>\r\n          } @else {\r\n            <span [class.pointer]=\"prop.sortable\" (click)=\"prop.sortable && sortFn()\">\r\n              {{ column.name }}\r\n            </span>\r\n          }\r\n        </ng-template>\r\n        <ng-template let-row=\"row\" let-i=\"rowIndex\" ngx-datatable-cell-template>\r\n          <ng-container *abpPermission=\"prop.permission; runChangeDetection: false\">\r\n            <ng-container *abpVisible=\"row['_' + prop.name]?.visible\">\r\n              @if (!row['_' + prop.name].component) {\r\n                @if (prop.type === 'datetime' || prop.type === 'date' || prop.type === 'time') {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                        : ('::' + (row['_' + prop.name]?.value | async | abpUtcToLocal: prop.type)\r\n                          | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                } @else {\r\n                  <div\r\n                    [innerHTML]=\"\r\n                      !prop.isExtra\r\n                        ? (row['_' + prop.name]?.value | async)\r\n                        : ('::' + (row['_' + prop.name]?.value | async) | abpLocalization)\r\n                    \"\r\n                    (click)=\"\r\n                      prop.action &&\r\n                        prop.action({ getInjected: getInjected, record: row, index: i })\r\n                    \"\r\n                    [class]=\"entityPropTypeClasses[prop.type]\"\r\n                    [class.pointer]=\"prop.action\"\r\n                  ></div>\r\n                }\r\n              } @else {\r\n                <ng-container\r\n                  *ngComponentOutlet=\"\r\n                    row['_' + prop.name].component;\r\n                    injector: row['_' + prop.name].injector\r\n                  \"\r\n                />\r\n              }\r\n            </ng-container>\r\n          </ng-container>\r\n        </ng-template>\r\n      </ngx-datatable-column>\r\n    }\r\n  </ngx-datatable>\r\n}\r\n", styles: [":host ::ng-deep .ngx-datatable.material .datatable-body .datatable-row-detail{background:none;padding:0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { actionsTextInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsText", required: false }] }], dataInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: false }] }], list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }], recordsTotal: [{ type: i0.Input, args: [{ isSignal: true, alias: "recordsTotal", required: true }] }], actionsColumnWidthInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsColumnWidth", required: false }] }], actionsTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsTemplate", required: false }] }], selectable: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectable", required: false }] }], selectionTypeInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionType", required: false }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], infiniteScroll: [{ type: i0.Input, args: [{ isSignal: true, alias: "infiniteScroll", required: false }] }], isLoading: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], scrollThreshold: [{ type: i0.Input, args: [{ isSignal: true, alias: "scrollThreshold", required: false }] }], tableHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "tableHeight", required: false }] }], rowDetailTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDetailTemplate", required: false }] }], rowDetailHeight: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowDetailHeight", required: false }] }], tableActivate: [{ type: i0.Output, args: ["tableActivate"] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], loadMore: [{ type: i0.Output, args: ["loadMore"] }], rowDetailToggle: [{ type: i0.Output, args: ["rowDetailToggle"] }], rowDetailComponent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => ExtensibleTableRowDetailComponent), { isSignal: true }] }], table: [{ type: i0.ViewChild, args: ['table', { isSignal: true }] }] } });
 
 class CreateInjectorPipe {
@@ -1315,10 +1315,10 @@ class CreateInjectorPipe {
         };
         return { get };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CreateInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: CreateInjectorPipe, isStandalone: true, name: "createInjector" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CreateInjectorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: CreateInjectorPipe, isStandalone: true, name: "createInjector" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: CreateInjectorPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: CreateInjectorPipe, decorators: [{
             type: Pipe,
             args: [{
                     name: 'createInjector',
@@ -1339,15 +1339,15 @@ class PageToolbarComponent extends AbstractActionsComponent {
             value: value,
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PageToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.7", type: PageToolbarComponent, isStandalone: true, selector: "abp-page-toolbar", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PageToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: PageToolbarComponent, isStandalone: true, selector: "abp-page-toolbar", providers: [
             {
                 provide: EXTENSIONS_ACTION_TYPE,
                 useValue: 'toolbarActions',
             },
         ], exportAs: ["abpPageToolbar"], usesInheritance: true, ngImport: i0, template: "<div class=\"row justify-content-end mx-0 gap-2\" id=\"AbpContentToolbar\">\r\n  @for (action of actionList; track action.component || action.action; let last = $last) {\r\n  <div class=\"col-auto px-0 pt-0\" [class.pe-0]=\"last\">\r\n    @if (action.visible(data)) {\r\n    <ng-container *abpPermission=\"action.permission; runChangeDetection: false\">\r\n      @if (action.component; as component) {\r\n      <ng-container *ngComponentOutlet=\"component; injector: record | createInjector: action:this\"></ng-container>\r\n\r\n      }@else {\r\n      @if (asToolbarAction(action).value; as toolbarAction ) {\r\n      <button (click)=\"action.action(data)\" type=\"button\"\r\n        [class]=\"toolbarAction?.btnClass ? toolbarAction?.btnClass : defaultBtnClass\"\r\n        class=\"d-inline-flex align-items-center gap-1\">\r\n        <i [class]=\"toolbarAction?.icon\" [class.me-1]=\"toolbarAction?.icon\"></i>\r\n        {{ toolbarAction?.text | abpLocalization }}\r\n      </button>\r\n      }\r\n      }\r\n    </ng-container>\r\n    }\r\n  </div>\r\n  }\r\n</div>", dependencies: [{ kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletEnvironmentInjector", "ngComponentOutletContent", "ngComponentOutletNgModule"], exportAs: ["ngComponentOutlet"] }, { kind: "pipe", type: CreateInjectorPipe, name: "createInjector" }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: PageToolbarComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: PageToolbarComponent, decorators: [{
             type: Component,
             args: [{ exportAs: 'abpPageToolbar', selector: 'abp-page-toolbar', imports: [
                         CreateInjectorPipe,
@@ -1672,8 +1672,8 @@ const importWithExport = [
     ExtensibleFormMultiselectComponent,
 ];
 class ExtensibleModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
             ThemeSharedModule,
             NgxValidateCoreModule,
             NgbDatepickerModule,
@@ -1701,7 +1701,7 @@ class ExtensibleModule {
             ExtensibleTableComponent,
             ExtensibleTableRowDetailComponent,
             ExtensibleFormMultiselectComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleModule, imports: [CoreModule,
             ThemeSharedModule,
             NgxValidateCoreModule,
             NgbDatepickerModule,
@@ -1715,7 +1715,7 @@ class ExtensibleModule {
             ExtensibleTableComponent,
             ExtensibleFormMultiselectComponent] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: ExtensibleModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: ExtensibleModule, decorators: [{
             type: NgModule,
             args: [{
                     declarations: [],