@abp/ng.cms-kit 10.5.0-rc.4 → 10.6.0-rc.1

package/fesm2022/abp-ng.cms-kit-admin.mjs

@@ -1,5 +1,6 @@
 import * as i0 from '@angular/core';
-import { inject, Injectable, Component, Injector, input, output, DestroyRef, ChangeDetectionStrategy, InjectionToken } from '@angular/core';
+import { inject, Injectable, ChangeDetectionStrategy, Component, signal, Injector, input, output, DestroyRef, InjectionToken } from '@angular/core';
+import { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import * as i3$1 from '@angular/common';
 import { CommonModule, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
@@ -19,7 +20,6 @@ import * as i2$1 from '@ngx-validate/core';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 import { prepareSlugFromControl, CodeMirrorEditorComponent, ToastuiEditorComponent, dasharize } from '@abp/ng.cms-kit';
 import { forkJoin, of, Subject, map as map$1, tap as tap$1 } from 'rxjs';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { TreeComponent } from '@abp/ng.components/tree';
 
 var eCmsKitAdminComponents;
@@ -112,10 +112,10 @@ class PageFormService {
             this.router.navigate(['/cms/pages']);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageFormService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageFormService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageFormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -177,10 +177,10 @@ class BlogPostFormService {
             this.router.navigate(['/cms/blog-posts']);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogPostFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogPostFormService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogPostFormService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogPostFormService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogPostFormService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogPostFormService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -227,10 +227,10 @@ class CommentEntityService {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CommentEntityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CommentEntityService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CommentEntityService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CommentEntityService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CommentEntityService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CommentEntityService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root',
@@ -239,16 +239,24 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
 
 class CommentListComponent {
     constructor() {
-        this.data = { items: [], totalCount: 0 };
         this.list = inject((ListService));
         this.commentEntityService = inject(CommentEntityService);
         this.commentService = inject(CommentAdminService);
         this.fb = inject(FormBuilder);
+        this.data = toSignal(this.list.hookToQuery(query => {
+            const filters = this.list.filter || {};
+            const input = {
+                ...query,
+                ...filters,
+            };
+            return this.commentService.getList(input);
+        }), {
+            initialValue: { items: [], totalCount: 0 },
+        });
         this.commentApproveStateOptions = commentApproveStateOptions;
     }
     ngOnInit() {
         this.createFilterForm();
-        this.hookToQuery();
         this.requireApprovement = this.commentEntityService.requireApprovement;
     }
     createFilterForm() {
@@ -272,35 +280,23 @@ class CommentListComponent {
         this.list.filter = filters;
         this.list.get();
     }
-    hookToQuery() {
-        this.list
-            .hookToQuery(query => {
-            const filters = this.list.filter || {};
-            const input = {
-                ...query,
-                ...filters,
-            };
-            return this.commentService.getList(input);
-        })
-            .subscribe(res => (this.data = res));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CommentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CommentListComponent, isStandalone: true, selector: "abp-comment-list", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CommentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CommentListComponent, isStandalone: true, selector: "abp-comment-list", providers: [
             ListService,
             {
                 provide: EXTENSIONS_IDENTIFIER,
                 useValue: eCmsKitAdminComponents.CommentList,
             },
-        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Comments' | abpLocalization\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <form [formGroup]=\"filterForm\" (ngSubmit)=\"onFilter()\">\r\n        <div class=\"row align-items-end\">\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationStartDate\">\r\n                    {{ 'CmsKit::StartDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationStartDate\"\r\n                    formControlName=\"creationStartDate\"\r\n                    (click)=\"startDatePicker.open()\"\r\n                    (keyup.space)=\"startDatePicker.open()\"\r\n                    ngbDatepicker\r\n                    #startDatePicker=\"ngbDatepicker\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationEndDate\">\r\n                    {{ 'CmsKit::EndDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationEndDate\"\r\n                    formControlName=\"creationEndDate\"\r\n                    class=\"form-control\"\r\n                    ngbDatepicker\r\n                    #endDatePicker=\"ngbDatepicker\"\r\n                    (click)=\"endDatePicker.toggle()\"\r\n                    readonly\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-form-input\r\n              formControlName=\"author\"\r\n              [label]=\"'CmsKit::Username' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-form-input\r\n              formControlName=\"entityType\"\r\n              [label]=\"'CmsKit::EntityType' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n          @if (requireApprovement) {\r\n            <div class=\"col-lg-2 col-md-6\">\r\n              <div class=\"mb-3\">\r\n                <label class=\"mb-1 form-label\" for=\"commentApproveState\">\r\n                  {{ 'CmsKit::CommentFilter:ApproveState' | abpLocalization }}\r\n                </label>\r\n                <select\r\n                  id=\"commentApproveState\"\r\n                  formControlName=\"commentApproveState\"\r\n                  class=\"form-control\"\r\n                >\r\n                  @for (option of commentApproveStateOptions; track option.value) {\r\n                    <option [value]=\"option.value\">\r\n                      {{ 'CmsKit::CommentFilter:' + option.value | abpLocalization }}\r\n                    </option>\r\n                  }\r\n                </select>\r\n              </div>\r\n            </div>\r\n          }\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-button class=\"w-100 mb-3\" buttonType=\"Primary\" type=\"submit\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </abp-button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "ngmodule", type: ExtensibleModule }, { kind: "component", type: i1.ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "ngmodule", type: PageModule }, { kind: "component", type: i2.PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i3.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: CommonModule }, { kind: "component", type: FormInputComponent, selector: "abp-form-input", inputs: ["inputId", "inputReadonly", "label", "labelClass", "inputPlaceholder", "inputStyle", "inputClass"], outputs: ["formBlur", "formFocus"] }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], viewProviders: [
+        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Comments' | abpLocalization\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <form [formGroup]=\"filterForm\" (ngSubmit)=\"onFilter()\">\r\n        <div class=\"row align-items-end\">\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationStartDate\">\r\n                    {{ 'CmsKit::StartDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationStartDate\"\r\n                    formControlName=\"creationStartDate\"\r\n                    (click)=\"startDatePicker.open()\"\r\n                    (keyup.space)=\"startDatePicker.open()\"\r\n                    ngbDatepicker\r\n                    #startDatePicker=\"ngbDatepicker\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationEndDate\">\r\n                    {{ 'CmsKit::EndDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationEndDate\"\r\n                    formControlName=\"creationEndDate\"\r\n                    class=\"form-control\"\r\n                    ngbDatepicker\r\n                    #endDatePicker=\"ngbDatepicker\"\r\n                    (click)=\"endDatePicker.toggle()\"\r\n                    readonly\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-form-input\r\n              formControlName=\"author\"\r\n              [label]=\"'CmsKit::Username' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-form-input\r\n              formControlName=\"entityType\"\r\n              [label]=\"'CmsKit::EntityType' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n          @if (requireApprovement) {\r\n            <div class=\"col-lg-2 col-md-6\">\r\n              <div class=\"mb-3\">\r\n                <label class=\"mb-1 form-label\" for=\"commentApproveState\">\r\n                  {{ 'CmsKit::CommentFilter:ApproveState' | abpLocalization }}\r\n                </label>\r\n                <select\r\n                  id=\"commentApproveState\"\r\n                  formControlName=\"commentApproveState\"\r\n                  class=\"form-control\"\r\n                >\r\n                  @for (option of commentApproveStateOptions; track option.value) {\r\n                    <option [value]=\"option.value\">\r\n                      {{ 'CmsKit::CommentFilter:' + option.value | abpLocalization }}\r\n                    </option>\r\n                  }\r\n                </select>\r\n              </div>\r\n            </div>\r\n          }\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-button class=\"w-100 mb-3\" buttonType=\"Primary\" type=\"submit\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </abp-button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data().items\" [recordsTotal]=\"data().totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "ngmodule", type: ExtensibleModule }, { kind: "component", type: i1.ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "ngmodule", type: PageModule }, { kind: "component", type: i2.PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i3.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: CommonModule }, { kind: "component", type: FormInputComponent, selector: "abp-form-input", inputs: ["inputId", "inputReadonly", "label", "labelClass", "inputPlaceholder", "inputStyle", "inputClass"], outputs: ["formBlur", "formFocus"] }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], viewProviders: [
             {
                 provide: NgbDateAdapter,
                 useClass: DateTimeAdapter,
             },
-        ] }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CommentListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CommentListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-comment-list', providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-comment-list', providers: [
                         ListService,
                         {
                             provide: EXTENSIONS_IDENTIFIER,
@@ -320,29 +316,42 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         LocalizationPipe,
                         FormInputComponent,
                         ButtonComponent,
-                    ], template: "<abp-page [title]=\"'CmsKit::Comments' | abpLocalization\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <form [formGroup]=\"filterForm\" (ngSubmit)=\"onFilter()\">\r\n        <div class=\"row align-items-end\">\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationStartDate\">\r\n                    {{ 'CmsKit::StartDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationStartDate\"\r\n                    formControlName=\"creationStartDate\"\r\n                    (click)=\"startDatePicker.open()\"\r\n                    (keyup.space)=\"startDatePicker.open()\"\r\n                    ngbDatepicker\r\n                    #startDatePicker=\"ngbDatepicker\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationEndDate\">\r\n                    {{ 'CmsKit::EndDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationEndDate\"\r\n                    formControlName=\"creationEndDate\"\r\n                    class=\"form-control\"\r\n                    ngbDatepicker\r\n                    #endDatePicker=\"ngbDatepicker\"\r\n                    (click)=\"endDatePicker.toggle()\"\r\n                    readonly\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-form-input\r\n              formControlName=\"author\"\r\n              [label]=\"'CmsKit::Username' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-form-input\r\n              formControlName=\"entityType\"\r\n              [label]=\"'CmsKit::EntityType' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n          @if (requireApprovement) {\r\n            <div class=\"col-lg-2 col-md-6\">\r\n              <div class=\"mb-3\">\r\n                <label class=\"mb-1 form-label\" for=\"commentApproveState\">\r\n                  {{ 'CmsKit::CommentFilter:ApproveState' | abpLocalization }}\r\n                </label>\r\n                <select\r\n                  id=\"commentApproveState\"\r\n                  formControlName=\"commentApproveState\"\r\n                  class=\"form-control\"\r\n                >\r\n                  @for (option of commentApproveStateOptions; track option.value) {\r\n                    <option [value]=\"option.value\">\r\n                      {{ 'CmsKit::CommentFilter:' + option.value | abpLocalization }}\r\n                    </option>\r\n                  }\r\n                </select>\r\n              </div>\r\n            </div>\r\n          }\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-button class=\"w-100 mb-3\" buttonType=\"Primary\" type=\"submit\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </abp-button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n" }]
+                    ], template: "<abp-page [title]=\"'CmsKit::Comments' | abpLocalization\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <form [formGroup]=\"filterForm\" (ngSubmit)=\"onFilter()\">\r\n        <div class=\"row align-items-end\">\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationStartDate\">\r\n                    {{ 'CmsKit::StartDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationStartDate\"\r\n                    formControlName=\"creationStartDate\"\r\n                    (click)=\"startDatePicker.open()\"\r\n                    (keyup.space)=\"startDatePicker.open()\"\r\n                    ngbDatepicker\r\n                    #startDatePicker=\"ngbDatepicker\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationEndDate\">\r\n                    {{ 'CmsKit::EndDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationEndDate\"\r\n                    formControlName=\"creationEndDate\"\r\n                    class=\"form-control\"\r\n                    ngbDatepicker\r\n                    #endDatePicker=\"ngbDatepicker\"\r\n                    (click)=\"endDatePicker.toggle()\"\r\n                    readonly\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-form-input\r\n              formControlName=\"author\"\r\n              [label]=\"'CmsKit::Username' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-form-input\r\n              formControlName=\"entityType\"\r\n              [label]=\"'CmsKit::EntityType' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n          @if (requireApprovement) {\r\n            <div class=\"col-lg-2 col-md-6\">\r\n              <div class=\"mb-3\">\r\n                <label class=\"mb-1 form-label\" for=\"commentApproveState\">\r\n                  {{ 'CmsKit::CommentFilter:ApproveState' | abpLocalization }}\r\n                </label>\r\n                <select\r\n                  id=\"commentApproveState\"\r\n                  formControlName=\"commentApproveState\"\r\n                  class=\"form-control\"\r\n                >\r\n                  @for (option of commentApproveStateOptions; track option.value) {\r\n                    <option [value]=\"option.value\">\r\n                      {{ 'CmsKit::CommentFilter:' + option.value | abpLocalization }}\r\n                    </option>\r\n                  }\r\n                </select>\r\n              </div>\r\n            </div>\r\n          }\r\n          <div class=\"col-lg-2 col-md-6\">\r\n            <abp-button class=\"w-100 mb-3\" buttonType=\"Primary\" type=\"submit\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </abp-button>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data().items\" [recordsTotal]=\"data().totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n" }]
         }] });
 
 class CommentDetailsComponent {
     constructor() {
-        this.comment = null;
-        this.data = { items: [], totalCount: 0 };
+        this.comment = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "comment" }] : /* istanbul ignore next */ []));
+        this.commentId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "commentId" }] : /* istanbul ignore next */ []));
         this.list = inject((ListService));
         this.commentEntityService = inject(CommentEntityService);
         this.commentService = inject(CommentAdminService);
         this.route = inject(ActivatedRoute);
         this.router = inject(Router);
         this.fb = inject(FormBuilder);
+        this.data = toSignal(this.list.hookToQuery(query => {
+            const filters = this.list.filter || {};
+            const input = {
+                repliedCommentId: this.commentId() ?? undefined,
+                ...query,
+                ...filters,
+            };
+            return this.commentService.getList(input);
+        }), {
+            initialValue: { items: [], totalCount: 0 },
+        });
         this.commentApproveStateOptions = commentApproveStateOptions;
     }
     ngOnInit() {
         this.route.params.subscribe(params => {
             const id = params['id'];
             if (id) {
-                this.commentId = id;
+                this.commentId.set(id);
                 this.loadComment(id);
                 this.createFilterForm();
-                this.hookToQuery();
+                this.list.get();
             }
         });
         this.requireApprovement = this.commentEntityService.requireApprovement;
@@ -357,7 +366,7 @@ class CommentDetailsComponent {
     }
     loadComment(id) {
         this.commentService.get(id).subscribe(comment => {
-            this.comment = comment;
+            this.comment.set(comment);
         });
     }
     onFilter() {
@@ -365,46 +374,33 @@ class CommentDetailsComponent {
         const filters = {
             author: formValue.author || undefined,
             commentApproveState: formValue.commentApproveState,
-            repliedCommentId: this.commentId,
+            repliedCommentId: this.commentId() ?? undefined,
             creationStartDate: formValue.creationStartDate || undefined,
             creationEndDate: formValue.creationEndDate || undefined,
         };
         this.list.filter = filters;
         this.list.get();
     }
-    hookToQuery() {
-        this.list
-            .hookToQuery(query => {
-            const filters = this.list.filter || {};
-            const input = {
-                repliedCommentId: this.commentId,
-                ...query,
-                ...filters,
-            };
-            return this.commentService.getList(input);
-        })
-            .subscribe(res => (this.data = res));
-    }
     navigateToReply(id) {
         this.router.navigate(['/cms/comments', id]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CommentDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: CommentDetailsComponent, isStandalone: true, selector: "abp-comment-details", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CommentDetailsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: CommentDetailsComponent, isStandalone: true, selector: "abp-comment-details", providers: [
             ListService,
             {
                 provide: EXTENSIONS_IDENTIFIER,
                 useValue: eCmsKitAdminComponents.CommentDetails,
             },
-        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Comments' | abpLocalization\">\r\n  @if (comment) {\r\n    <div class=\"card mb-4\">\r\n      <div class=\"card-body\">\r\n        <table class=\"table\">\r\n          <tr>\r\n            <td width=\"10%\">\r\n              <b>{{ 'CmsKit::EntityType' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.entityType }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'CmsKit::EntityId' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.entityId }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'AbpIdentity::CreationTime' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.creationTime | date }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'CmsKit::Username' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.author?.name }}</td>\r\n          </tr>\r\n          @if (comment.repliedCommentId) {\r\n            <tr>\r\n              <td>\r\n                <b>{{ 'CmsKit::ReplyTo' | abpLocalization }}</b\r\n                >:\r\n              </td>\r\n              <td>\r\n                <a (click)=\"navigateToReply(comment.repliedCommentId!)\" style=\"cursor: pointer\">\r\n                  {{ comment.repliedCommentId }}\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          }\r\n          <tr>\r\n            <td class=\"align-text-top\">\r\n              <b>{{ 'CmsKit::Text' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.text }}</td>\r\n          </tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <form [formGroup]=\"filterForm\" (ngSubmit)=\"onFilter()\">\r\n        <input type=\"hidden\" [value]=\"commentId\" />\r\n        <div class=\"row\">\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationStartDate\">\r\n                    {{ 'CmsKit::StartDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationStartDate\"\r\n                    formControlName=\"creationStartDate\"\r\n                    (click)=\"startDatePicker.open()\"\r\n                    (keyup.space)=\"startDatePicker.open()\"\r\n                    ngbDatepicker\r\n                    #startDatePicker=\"ngbDatepicker\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationEndDate\">\r\n                    {{ 'CmsKit::EndDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationEndDate\"\r\n                    formControlName=\"creationEndDate\"\r\n                    class=\"form-control\"\r\n                    ngbDatepicker\r\n                    #endDatePicker=\"ngbDatepicker\"\r\n                    (click)=\"endDatePicker.toggle()\"\r\n                    readonly\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <abp-form-input\r\n              formControlName=\"author\"\r\n              [label]=\"'CmsKit::Username' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n          @if (requireApprovement) {\r\n            <div class=\"col-lg-2 col-md-12\">\r\n              <div class=\"mb-3\">\r\n                <label class=\"mb-1 form-label\" for=\"commentApproveState\">\r\n                  {{ 'CmsKit::CommentFilter:ApproveState' | abpLocalization }}\r\n                </label>\r\n                <select\r\n                  id=\"commentApproveState\"\r\n                  formControlName=\"commentApproveState\"\r\n                  class=\"form-control\"\r\n                >\r\n                  @for (option of commentApproveStateOptions; track option.value) {\r\n                    <option [value]=\"option.value\">\r\n                      {{ 'CmsKit::CommentFilter:' + option.value | abpLocalization }}\r\n                    </option>\r\n                  }\r\n                </select>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <div class=\"col-lg-2 col-md-12\">\r\n            <div class=\"d-grid gap-2\">\r\n              <abp-button class=\"mt-md-4\" buttonType=\"Primary\" type=\"submit\">\r\n                <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              </abp-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <h3>{{ 'CmsKit::RepliesToThisComment' | abpLocalization }}</h3>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i3.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: CommonModule }, { kind: "component", type: FormInputComponent, selector: "abp-form-input", inputs: ["inputId", "inputReadonly", "label", "labelClass", "inputPlaceholder", "inputStyle", "inputClass"], outputs: ["formBlur", "formFocus"] }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }], viewProviders: [
+        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Comments' | abpLocalization\">\r\n  @if (comment(); as comment) {\r\n    <div class=\"card mb-4\">\r\n      <div class=\"card-body\">\r\n        <table class=\"table\">\r\n          <tr>\r\n            <td width=\"10%\">\r\n              <b>{{ 'CmsKit::EntityType' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.entityType }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'CmsKit::EntityId' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.entityId }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'AbpIdentity::CreationTime' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.creationTime | date }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'CmsKit::Username' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.author?.name }}</td>\r\n          </tr>\r\n          @if (comment.repliedCommentId) {\r\n            <tr>\r\n              <td>\r\n                <b>{{ 'CmsKit::ReplyTo' | abpLocalization }}</b\r\n                >:\r\n              </td>\r\n              <td>\r\n                <a (click)=\"navigateToReply(comment.repliedCommentId!)\" style=\"cursor: pointer\">\r\n                  {{ comment.repliedCommentId }}\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          }\r\n          <tr>\r\n            <td class=\"align-text-top\">\r\n              <b>{{ 'CmsKit::Text' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.text }}</td>\r\n          </tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <form [formGroup]=\"filterForm\" (ngSubmit)=\"onFilter()\">\r\n        <input type=\"hidden\" [value]=\"commentId()\" />\r\n        <div class=\"row\">\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationStartDate\">\r\n                    {{ 'CmsKit::StartDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationStartDate\"\r\n                    formControlName=\"creationStartDate\"\r\n                    (click)=\"startDatePicker.open()\"\r\n                    (keyup.space)=\"startDatePicker.open()\"\r\n                    ngbDatepicker\r\n                    #startDatePicker=\"ngbDatepicker\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationEndDate\">\r\n                    {{ 'CmsKit::EndDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationEndDate\"\r\n                    formControlName=\"creationEndDate\"\r\n                    class=\"form-control\"\r\n                    ngbDatepicker\r\n                    #endDatePicker=\"ngbDatepicker\"\r\n                    (click)=\"endDatePicker.toggle()\"\r\n                    readonly\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <abp-form-input\r\n              formControlName=\"author\"\r\n              [label]=\"'CmsKit::Username' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n          @if (requireApprovement) {\r\n            <div class=\"col-lg-2 col-md-12\">\r\n              <div class=\"mb-3\">\r\n                <label class=\"mb-1 form-label\" for=\"commentApproveState\">\r\n                  {{ 'CmsKit::CommentFilter:ApproveState' | abpLocalization }}\r\n                </label>\r\n                <select\r\n                  id=\"commentApproveState\"\r\n                  formControlName=\"commentApproveState\"\r\n                  class=\"form-control\"\r\n                >\r\n                  @for (option of commentApproveStateOptions; track option.value) {\r\n                    <option [value]=\"option.value\">\r\n                      {{ 'CmsKit::CommentFilter:' + option.value | abpLocalization }}\r\n                    </option>\r\n                  }\r\n                </select>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <div class=\"col-lg-2 col-md-12\">\r\n            <div class=\"d-grid gap-2\">\r\n              <abp-button class=\"mt-md-4\" buttonType=\"Primary\" type=\"submit\">\r\n                <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              </abp-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <h3>{{ 'CmsKit::RepliesToThisComment' | abpLocalization }}</h3>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data().items\" [recordsTotal]=\"data().totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgbDatepickerModule }, { kind: "directive", type: i3.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: CommonModule }, { kind: "component", type: FormInputComponent, selector: "abp-form-input", inputs: ["inputId", "inputReadonly", "label", "labelClass", "inputPlaceholder", "inputStyle", "inputClass"], outputs: ["formBlur", "formFocus"] }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "pipe", type: i3$1.DatePipe, name: "date" }], viewProviders: [
             {
                 provide: NgbDateAdapter,
                 useClass: DateTimeAdapter,
             },
-        ] }); }
+        ], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CommentDetailsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CommentDetailsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-comment-details', providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-comment-details', providers: [
                         ListService,
                         {
                             provide: EXTENSIONS_IDENTIFIER,
@@ -425,7 +421,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         DatePipe,
                         FormInputComponent,
                         ButtonComponent,
-                    ], template: "<abp-page [title]=\"'CmsKit::Comments' | abpLocalization\">\r\n  @if (comment) {\r\n    <div class=\"card mb-4\">\r\n      <div class=\"card-body\">\r\n        <table class=\"table\">\r\n          <tr>\r\n            <td width=\"10%\">\r\n              <b>{{ 'CmsKit::EntityType' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.entityType }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'CmsKit::EntityId' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.entityId }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'AbpIdentity::CreationTime' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.creationTime | date }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'CmsKit::Username' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.author?.name }}</td>\r\n          </tr>\r\n          @if (comment.repliedCommentId) {\r\n            <tr>\r\n              <td>\r\n                <b>{{ 'CmsKit::ReplyTo' | abpLocalization }}</b\r\n                >:\r\n              </td>\r\n              <td>\r\n                <a (click)=\"navigateToReply(comment.repliedCommentId!)\" style=\"cursor: pointer\">\r\n                  {{ comment.repliedCommentId }}\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          }\r\n          <tr>\r\n            <td class=\"align-text-top\">\r\n              <b>{{ 'CmsKit::Text' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.text }}</td>\r\n          </tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <form [formGroup]=\"filterForm\" (ngSubmit)=\"onFilter()\">\r\n        <input type=\"hidden\" [value]=\"commentId\" />\r\n        <div class=\"row\">\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationStartDate\">\r\n                    {{ 'CmsKit::StartDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationStartDate\"\r\n                    formControlName=\"creationStartDate\"\r\n                    (click)=\"startDatePicker.open()\"\r\n                    (keyup.space)=\"startDatePicker.open()\"\r\n                    ngbDatepicker\r\n                    #startDatePicker=\"ngbDatepicker\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationEndDate\">\r\n                    {{ 'CmsKit::EndDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationEndDate\"\r\n                    formControlName=\"creationEndDate\"\r\n                    class=\"form-control\"\r\n                    ngbDatepicker\r\n                    #endDatePicker=\"ngbDatepicker\"\r\n                    (click)=\"endDatePicker.toggle()\"\r\n                    readonly\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <abp-form-input\r\n              formControlName=\"author\"\r\n              [label]=\"'CmsKit::Username' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n          @if (requireApprovement) {\r\n            <div class=\"col-lg-2 col-md-12\">\r\n              <div class=\"mb-3\">\r\n                <label class=\"mb-1 form-label\" for=\"commentApproveState\">\r\n                  {{ 'CmsKit::CommentFilter:ApproveState' | abpLocalization }}\r\n                </label>\r\n                <select\r\n                  id=\"commentApproveState\"\r\n                  formControlName=\"commentApproveState\"\r\n                  class=\"form-control\"\r\n                >\r\n                  @for (option of commentApproveStateOptions; track option.value) {\r\n                    <option [value]=\"option.value\">\r\n                      {{ 'CmsKit::CommentFilter:' + option.value | abpLocalization }}\r\n                    </option>\r\n                  }\r\n                </select>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <div class=\"col-lg-2 col-md-12\">\r\n            <div class=\"d-grid gap-2\">\r\n              <abp-button class=\"mt-md-4\" buttonType=\"Primary\" type=\"submit\">\r\n                <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              </abp-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <h3>{{ 'CmsKit::RepliesToThisComment' | abpLocalization }}</h3>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n" }]
+                    ], template: "<abp-page [title]=\"'CmsKit::Comments' | abpLocalization\">\r\n  @if (comment(); as comment) {\r\n    <div class=\"card mb-4\">\r\n      <div class=\"card-body\">\r\n        <table class=\"table\">\r\n          <tr>\r\n            <td width=\"10%\">\r\n              <b>{{ 'CmsKit::EntityType' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.entityType }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'CmsKit::EntityId' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.entityId }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'AbpIdentity::CreationTime' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.creationTime | date }}</td>\r\n          </tr>\r\n          <tr>\r\n            <td>\r\n              <b>{{ 'CmsKit::Username' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.author?.name }}</td>\r\n          </tr>\r\n          @if (comment.repliedCommentId) {\r\n            <tr>\r\n              <td>\r\n                <b>{{ 'CmsKit::ReplyTo' | abpLocalization }}</b\r\n                >:\r\n              </td>\r\n              <td>\r\n                <a (click)=\"navigateToReply(comment.repliedCommentId!)\" style=\"cursor: pointer\">\r\n                  {{ comment.repliedCommentId }}\r\n                </a>\r\n              </td>\r\n            </tr>\r\n          }\r\n          <tr>\r\n            <td class=\"align-text-top\">\r\n              <b>{{ 'CmsKit::Text' | abpLocalization }}</b\r\n              >:\r\n            </td>\r\n            <td>{{ comment.text }}</td>\r\n          </tr>\r\n        </table>\r\n      </div>\r\n    </div>\r\n  }\r\n\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <form [formGroup]=\"filterForm\" (ngSubmit)=\"onFilter()\">\r\n        <input type=\"hidden\" [value]=\"commentId()\" />\r\n        <div class=\"row\">\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <div class=\"row\">\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationStartDate\">\r\n                    {{ 'CmsKit::StartDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationStartDate\"\r\n                    formControlName=\"creationStartDate\"\r\n                    (click)=\"startDatePicker.open()\"\r\n                    (keyup.space)=\"startDatePicker.open()\"\r\n                    ngbDatepicker\r\n                    #startDatePicker=\"ngbDatepicker\"\r\n                    type=\"text\"\r\n                    class=\"form-control\"\r\n                  />\r\n                </div>\r\n              </div>\r\n              <div class=\"col-lg-6 col-md-6\">\r\n                <div class=\"mb-3\">\r\n                  <label class=\"form-label\" for=\"creationEndDate\">\r\n                    {{ 'CmsKit::EndDate' | abpLocalization }}\r\n                  </label>\r\n                  <input\r\n                    id=\"creationEndDate\"\r\n                    formControlName=\"creationEndDate\"\r\n                    class=\"form-control\"\r\n                    ngbDatepicker\r\n                    #endDatePicker=\"ngbDatepicker\"\r\n                    (click)=\"endDatePicker.toggle()\"\r\n                    readonly\r\n                  />\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <div class=\"col-lg-4 col-md-12\">\r\n            <abp-form-input\r\n              formControlName=\"author\"\r\n              [label]=\"'CmsKit::Username' | abpLocalization\"\r\n              type=\"text\"\r\n            />\r\n          </div>\r\n          @if (requireApprovement) {\r\n            <div class=\"col-lg-2 col-md-12\">\r\n              <div class=\"mb-3\">\r\n                <label class=\"mb-1 form-label\" for=\"commentApproveState\">\r\n                  {{ 'CmsKit::CommentFilter:ApproveState' | abpLocalization }}\r\n                </label>\r\n                <select\r\n                  id=\"commentApproveState\"\r\n                  formControlName=\"commentApproveState\"\r\n                  class=\"form-control\"\r\n                >\r\n                  @for (option of commentApproveStateOptions; track option.value) {\r\n                    <option [value]=\"option.value\">\r\n                      {{ 'CmsKit::CommentFilter:' + option.value | abpLocalization }}\r\n                    </option>\r\n                  }\r\n                </select>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <div class=\"col-lg-2 col-md-12\">\r\n            <div class=\"d-grid gap-2\">\r\n              <abp-button class=\"mt-md-4\" buttonType=\"Primary\" type=\"submit\">\r\n                <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n              </abp-button>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </form>\r\n    </div>\r\n  </div>\r\n\r\n  <h3>{{ 'CmsKit::RepliesToThisComment' | abpLocalization }}</h3>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data().items\" [recordsTotal]=\"data().totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n" }]
         }] });
 
 const CMS_KIT_COMMENTS_REQUIRE_APPROVEMENT = 'CmsKit.Comments.RequireApprovement';
@@ -435,8 +431,10 @@ class TagModalComponent {
         this.tagService = inject(TagAdminService);
         this.injector = inject(Injector);
         this.toasterService = inject(ToasterService);
-        this.selected = input(...(ngDevMode ? [undefined, { debugName: "selected" }] : /* istanbul ignore next */ []));
-        this.sectionId = input(...(ngDevMode ? [undefined, { debugName: "sectionId" }] : /* istanbul ignore next */ []));
+        this.selected = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.sectionId = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "sectionId" }] : /* istanbul ignore next */ []));
         this.visibleChange = output();
     }
     ngOnInit() {
@@ -467,12 +465,12 @@ class TagModalComponent {
             this.toasterService.success('AbpUi::SavedSuccessfully');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagModalComponent, isStandalone: true, selector: "abp-tag-modal", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      {{ (selected()?.id ? 'AbpUi::Edit' : 'AbpUi::New') | abpLocalization }}\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n        <abp-extensible-form [selectedRecord]=\"selected()\" />\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", dependencies: [{ kind: "component", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: ["selectedRecord"], exportAs: ["abpExtensibleForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "component", type: ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TagModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TagModalComponent, isStandalone: true, selector: "abp-tag-modal", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      {{ (selected()?.id ? 'AbpUi::Edit' : 'AbpUi::New') | abpLocalization }}\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n        <abp-extensible-form [selectedRecord]=\"selected()\" />\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", dependencies: [{ kind: "component", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: ["selectedRecord"], exportAs: ["abpExtensibleForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "component", type: ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TagModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-tag-modal', imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-tag-modal', imports: [
                         ExtensibleFormComponent,
                         LocalizationPipe,
                         ReactiveFormsModule,
@@ -481,57 +479,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         ModalComponent,
                         ModalCloseDirective,
                         ButtonComponent,
-                    ], template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      {{ (selected()?.id ? 'AbpUi::Edit' : 'AbpUi::New') | abpLocalization }}\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n        <abp-extensible-form [selectedRecord]=\"selected()\" />\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n" }]
+                    ], template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      {{ (selected()?.id ? 'AbpUi::Edit' : 'AbpUi::New') | abpLocalization }}\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n        <abp-extensible-form [selectedRecord]=\"selected()\" />\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n" }]
         }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], sectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionId", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
 
 class TagListComponent {
     constructor() {
-        this.data = { items: [], totalCount: 0 };
         this.list = inject((ListService));
         this.tagService = inject(TagAdminService);
         this.confirmationService = inject(ConfirmationService);
-        this.filter = '';
-        this.isModalVisible = false;
-        this.tagDefinitions = [];
-    }
-    ngOnInit() {
-        this.loadTagDefinitions();
-        this.hookToQuery();
-    }
-    loadTagDefinitions() {
-        this.tagService.getTagDefinitions().subscribe(definitions => {
-            this.tagDefinitions = definitions;
+        this.data = toSignal(this.list.hookToQuery(query => {
+            let filters = {};
+            if (this.list.filter) {
+                filters.filter = this.list.filter;
+            }
+            const input = {
+                ...query,
+                ...filters,
+            };
+            return this.tagService.getList(input);
+        }), {
+            initialValue: { items: [], totalCount: 0 },
+        });
+        this.tagDefinitions = toSignal(this.tagService.getTagDefinitions(), {
+            initialValue: [],
         });
+        this.filter = '';
+        this.isModalVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isModalVisible" }] : /* istanbul ignore next */ []));
+        this.selected = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
     }
     onSearch() {
         this.list.filter = this.filter;
         this.list.get();
     }
     add() {
-        this.selected = {};
-        this.isModalVisible = true;
+        this.selected.set({});
+        this.isModalVisible.set(true);
     }
     edit(id) {
         this.tagService.get(id).subscribe(tag => {
-            this.selected = tag;
-            this.isModalVisible = true;
-        });
-    }
-    hookToQuery() {
-        this.list
-            .hookToQuery(query => {
-            let filters = {};
-            if (this.list.filter) {
-                filters.filter = this.list.filter;
-            }
-            const input = {
-                ...query,
-                ...filters,
-            };
-            return this.tagService.getList(input);
-        })
-            .subscribe(res => {
-            this.data = res;
+            this.selected.set(tag);
+            this.isModalVisible.set(true);
         });
     }
     onVisibleModalChange(visibilityChange) {
@@ -541,8 +530,8 @@ class TagListComponent {
         if (visibilityChange.refresh) {
             this.list.get();
         }
-        this.selected = null;
-        this.isModalVisible = false;
+        this.selected.set(undefined);
+        this.isModalVisible.set(false);
     }
     delete(id, name) {
         this.confirmationService
@@ -551,24 +540,22 @@ class TagListComponent {
         })
             .subscribe((status) => {
             if (status === Confirmation.Status.confirm) {
-                this.tagService.delete(id).subscribe(() => {
-                    this.list.get();
-                });
+                this.tagService.delete(id).subscribe(() => this.list.get());
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: TagListComponent, isStandalone: true, selector: "abp-tag-list", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TagListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: TagListComponent, isStandalone: true, selector: "abp-tag-list", providers: [
             ListService,
             {
                 provide: EXTENSIONS_IDENTIFIER,
                 useValue: eCmsKitAdminComponents.Tags,
             },
-        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Tags' | abpLocalization\" [toolbar]=\"data.items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n\r\n  @if (isModalVisible) {\r\n    <abp-tag-modal [selected]=\"selected\" (visibleChange)=\"onVisibleModalChange($event)\" />\r\n  }\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: TagModalComponent, selector: "abp-tag-modal", inputs: ["selected", "sectionId"], outputs: ["visibleChange"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Tags' | abpLocalization\" [toolbar]=\"data().items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data().items\" [recordsTotal]=\"data().totalCount\" [list]=\"list\" />\r\n  </div>\r\n\r\n  @if (isModalVisible()) {\r\n    <abp-tag-modal [selected]=\"selected()\" (visibleChange)=\"onVisibleModalChange($event)\" />\r\n  }\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: TagModalComponent, selector: "abp-tag-modal", inputs: ["selected", "sectionId"], outputs: ["visibleChange"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: TagListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: TagListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-tag-list', providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-tag-list', providers: [
                         ListService,
                         {
                             provide: EXTENSIONS_IDENTIFIER,
@@ -581,28 +568,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         FormsModule,
                         CommonModule,
                         TagModalComponent,
-                    ], template: "<abp-page [title]=\"'CmsKit::Tags' | abpLocalization\" [toolbar]=\"data.items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n\r\n  @if (isModalVisible) {\r\n    <abp-tag-modal [selected]=\"selected\" (visibleChange)=\"onVisibleModalChange($event)\" />\r\n  }\r\n</abp-page>\r\n" }]
+                    ], template: "<abp-page [title]=\"'CmsKit::Tags' | abpLocalization\" [toolbar]=\"data().items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data().items\" [recordsTotal]=\"data().totalCount\" [list]=\"list\" />\r\n  </div>\r\n\r\n  @if (isModalVisible()) {\r\n    <abp-tag-modal [selected]=\"selected()\" (visibleChange)=\"onVisibleModalChange($event)\" />\r\n  }\r\n</abp-page>\r\n" }]
         }] });
 
 class PageListComponent {
     constructor() {
-        this.data = { items: [], totalCount: 0 };
         this.list = inject((ListService));
         this.pageService = inject(PageAdminService);
         this.confirmationService = inject(ConfirmationService);
         this.toasterService = inject(ToasterService);
-        this.filter = '';
-    }
-    ngOnInit() {
-        this.hookToQuery();
-    }
-    onSearch() {
-        this.list.filter = this.filter;
-        this.list.get();
-    }
-    hookToQuery() {
-        this.list
-            .hookToQuery(query => {
+        this.data = toSignal(this.list.hookToQuery(query => {
             let filters = {};
             if (this.list.filter) {
                 filters.filter = this.list.filter;
@@ -612,10 +587,14 @@ class PageListComponent {
                 ...filters,
             };
             return this.pageService.getList(input);
-        })
-            .subscribe(res => {
-            this.data = res;
+        }), {
+            initialValue: { items: [], totalCount: 0 },
         });
+        this.filter = '';
+    }
+    onSearch() {
+        this.list.filter = this.filter;
+        this.list.get();
     }
     delete(id) {
         this.confirmationService
@@ -625,9 +604,7 @@ class PageListComponent {
         })
             .subscribe((status) => {
             if (status === Confirmation.Status.confirm) {
-                this.pageService.delete(id).subscribe(() => {
-                    this.list.get();
-                });
+                this.pageService.delete(id).subscribe(() => this.list.get());
             }
         });
     }
@@ -642,24 +619,24 @@ class PageListComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: PageListComponent, isStandalone: true, selector: "abp-page-list", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: PageListComponent, isStandalone: true, selector: "abp-page-list", providers: [
             ListService,
             {
                 provide: EXTENSIONS_IDENTIFIER,
                 useValue: eCmsKitAdminComponents.Pages,
             },
-        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Pages' | abpLocalization\" [toolbar]=\"data.items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Pages' | abpLocalization\" [toolbar]=\"data().items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table\r\n      [data]=\"data().items\"\r\n      [recordsTotal]=\"data().totalCount\"\r\n      [list]=\"list\"\r\n    />\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-page-list', providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-page-list', providers: [
                         ListService,
                         {
                             provide: EXTENSIONS_IDENTIFIER,
                             useValue: eCmsKitAdminComponents.Pages,
                         },
-                    ], imports: [ExtensibleTableComponent, PageComponent, LocalizationPipe, FormsModule, CommonModule], template: "<abp-page [title]=\"'CmsKit::Pages' | abpLocalization\" [toolbar]=\"data.items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n" }]
+                    ], imports: [ExtensibleTableComponent, PageComponent, LocalizationPipe, FormsModule, CommonModule], template: "<abp-page [title]=\"'CmsKit::Pages' | abpLocalization\" [toolbar]=\"data().items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-12\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table\r\n      [data]=\"data().items\"\r\n      [recordsTotal]=\"data().totalCount\"\r\n      [list]=\"list\"\r\n    />\r\n  </div>\r\n</abp-page>\r\n" }]
         }] });
 
 class PageFormComponent {
@@ -669,53 +646,57 @@ class PageFormComponent {
         this.pageFormService = inject(PageFormService);
         this.route = inject(ActivatedRoute);
         this.destroyRef = inject(DestroyRef);
-        this.page = null;
+        this.page = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "page" }] : /* istanbul ignore next */ []));
         this.pageId = null;
-        this.isEditMode = false;
+        this.isEditMode = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         const id = this.route.snapshot.params['id'];
         if (id) {
-            this.isEditMode = true;
+            this.isEditMode.set(true);
             this.pageId = id;
             this.loadPage(id);
         }
         else {
-            this.isEditMode = false;
+            this.isEditMode.set(false);
             this.buildForm();
         }
     }
     loadPage(id) {
         this.pageService.get(id).subscribe(page => {
-            this.page = page;
+            this.page.set(page);
             this.buildForm();
         });
     }
     buildForm() {
-        const data = new FormPropData(this.injector, this.page || {});
+        const currentPage = this.page();
+        const data = new FormPropData(this.injector, currentPage || {});
         const baseForm = generateFormFromProps(data);
         this.form = new FormGroup({
             ...baseForm.controls,
-            content: new FormControl(this.page?.content || ''),
-            script: new FormControl(this.page?.script || ''),
-            style: new FormControl(this.page?.style || ''),
+            content: new FormControl(currentPage?.content || ''),
+            script: new FormControl(currentPage?.script || ''),
+            style: new FormControl(currentPage?.style || ''),
         });
         prepareSlugFromControl(this.form, 'title', 'slug', this.destroyRef);
     }
     executeSaveOperation(operation) {
-        if (this.isEditMode) {
-            if (!this.page || !this.pageId) {
+        if (this.isEditMode()) {
+            const currentPage = this.page();
+            if (!currentPage || !this.pageId) {
                 return;
             }
             switch (operation) {
                 case 'save':
-                    this.pageFormService.update(this.pageId, this.form, this.page).subscribe();
+                    this.pageFormService.update(this.pageId, this.form, currentPage).subscribe();
                     break;
                 case 'draft':
-                    this.pageFormService.updateAsDraft(this.pageId, this.form, this.page).subscribe();
+                    this.pageFormService.updateAsDraft(this.pageId, this.form, currentPage).subscribe();
                     break;
                 case 'publish':
-                    this.pageFormService.updateAndPublish(this.pageId, this.form, this.page).subscribe();
+                    this.pageFormService.updateAndPublish(this.pageId, this.form, currentPage).subscribe();
                     break;
             }
             return;
@@ -741,17 +722,17 @@ class PageFormComponent {
     publish() {
         this.executeSaveOperation('publish');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: PageFormComponent, isStandalone: true, selector: "abp-page-form", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: PageFormComponent, isStandalone: true, selector: "abp-page-form", providers: [
             {
                 provide: EXTENSIONS_IDENTIFIER,
                 useValue: eCmsKitAdminComponents.PageForm,
             },
-        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Pages' | abpLocalization\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (form && (!isEditMode || page)) {\r\n        <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n          <!-- Basic fields outside tabs -->\r\n          <abp-extensible-form [selectedRecord]=\"page || {}\" />\r\n\r\n          <!-- Tabs for Content, Script, and Style -->\r\n          <ul ngbNav #nav=\"ngbNav\" class=\"nav-tabs mt-3\">\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Content' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-toastui-editor formControlName=\"content\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Script' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-codemirror-editor formControlName=\"script\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Style' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-codemirror-editor formControlName=\"style\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n          </ul>\r\n          <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n        </form>\r\n      } @else {\r\n        <div class=\"text-center\">\r\n          <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"d-flex justify-content-start gap-2\">\r\n        <button class=\"btn btn-secondary\" (click)=\"saveAsDraft()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::SaveAsDraft' | abpLocalization }}\r\n        </button>\r\n        <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::Publish' | abpLocalization }}\r\n        </abp-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: CodeMirrorEditorComponent, selector: "abp-codemirror-editor" }, { kind: "component", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: ["selectedRecord"], exportAs: ["abpExtensibleForm"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "component", type: ToastuiEditorComponent, selector: "abp-toastui-editor" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i2$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "ngmodule", type: NgbNavModule }, { kind: "directive", type: i3.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i3.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i3.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i3.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i3.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i3.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i3.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Pages' | abpLocalization\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (form && (!isEditMode() || page())) {\r\n        <form [formGroup]=\"form\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n          <!-- Basic fields outside tabs -->\r\n          <abp-extensible-form [selectedRecord]=\"page() || {}\" />\r\n\r\n          <!-- Tabs for Content, Script, and Style -->\r\n          <ul ngbNav #nav=\"ngbNav\" class=\"nav-tabs mt-3\">\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Content' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-toastui-editor formControlName=\"content\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Script' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-codemirror-editor formControlName=\"script\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Style' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-codemirror-editor formControlName=\"style\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n          </ul>\r\n          <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n        </form>\r\n      } @else {\r\n        <div class=\"text-center\">\r\n          <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"d-flex justify-content-start gap-2\">\r\n        <button class=\"btn btn-secondary\" (click)=\"saveAsDraft()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::SaveAsDraft' | abpLocalization }}\r\n        </button>\r\n        <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::Publish' | abpLocalization }}\r\n        </abp-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: CodeMirrorEditorComponent, selector: "abp-codemirror-editor" }, { kind: "component", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: ["selectedRecord"], exportAs: ["abpExtensibleForm"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "component", type: ToastuiEditorComponent, selector: "abp-toastui-editor" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i2$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "ngmodule", type: NgbNavModule }, { kind: "directive", type: i3.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i3.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i3.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i3.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i3.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i3.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i3.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: PageFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: PageFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-page-form', providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-page-form', providers: [
                         {
                             provide: EXTENSIONS_IDENTIFIER,
                             useValue: eCmsKitAdminComponents.PageForm,
@@ -767,7 +748,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         CommonModule,
                         NgxValidateCoreModule,
                         NgbNavModule,
-                    ], template: "<abp-page [title]=\"'CmsKit::Pages' | abpLocalization\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (form && (!isEditMode || page)) {\r\n        <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n          <!-- Basic fields outside tabs -->\r\n          <abp-extensible-form [selectedRecord]=\"page || {}\" />\r\n\r\n          <!-- Tabs for Content, Script, and Style -->\r\n          <ul ngbNav #nav=\"ngbNav\" class=\"nav-tabs mt-3\">\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Content' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-toastui-editor formControlName=\"content\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Script' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-codemirror-editor formControlName=\"script\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Style' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-codemirror-editor formControlName=\"style\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n          </ul>\r\n          <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n        </form>\r\n      } @else {\r\n        <div class=\"text-center\">\r\n          <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"d-flex justify-content-start gap-2\">\r\n        <button class=\"btn btn-secondary\" (click)=\"saveAsDraft()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::SaveAsDraft' | abpLocalization }}\r\n        </button>\r\n        <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::Publish' | abpLocalization }}\r\n        </abp-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n" }]
+                    ], template: "<abp-page [title]=\"'CmsKit::Pages' | abpLocalization\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (form && (!isEditMode() || page())) {\r\n        <form [formGroup]=\"form\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n          <!-- Basic fields outside tabs -->\r\n          <abp-extensible-form [selectedRecord]=\"page() || {}\" />\r\n\r\n          <!-- Tabs for Content, Script, and Style -->\r\n          <ul ngbNav #nav=\"ngbNav\" class=\"nav-tabs mt-3\">\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Content' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-toastui-editor formControlName=\"content\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Script' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-codemirror-editor formControlName=\"script\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n\r\n            <li ngbNavItem>\r\n              <a ngbNavLink>{{ 'CmsKit::Style' | abpLocalization }}</a>\r\n              <ng-template ngbNavContent>\r\n                <div class=\"mt-3\">\r\n                  <abp-codemirror-editor formControlName=\"style\" />\r\n                </div>\r\n              </ng-template>\r\n            </li>\r\n          </ul>\r\n          <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n        </form>\r\n      } @else {\r\n        <div class=\"text-center\">\r\n          <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"d-flex justify-content-start gap-2\">\r\n        <button class=\"btn btn-secondary\" (click)=\"saveAsDraft()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::SaveAsDraft' | abpLocalization }}\r\n        </button>\r\n        <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::Publish' | abpLocalization }}\r\n        </abp-button>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n" }]
         }] });
 
 class BlogModalComponent {
@@ -776,9 +757,11 @@ class BlogModalComponent {
         this.injector = inject(Injector);
         this.toasterService = inject(ToasterService);
         this.destroyRef = inject(DestroyRef);
-        this.selected = input(...(ngDevMode ? [undefined, { debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.selected = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selected" }] : /* istanbul ignore next */ []));
         this.visibleChange = output();
-        this.modalBusy = false;
+        this.modalBusy = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "modalBusy" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.buildForm();
@@ -792,11 +775,12 @@ class BlogModalComponent {
         this.visibleChange.emit({ visible, refresh });
     }
     save() {
-        if (this.modalBusy) {
+        if (this.modalBusy()) {
             return;
         }
-        this.modalBusy = true;
+        this.modalBusy.set(true);
         if (!this.form.valid) {
+            this.modalBusy.set(false);
             return;
         }
         let observable$ = this.blogService.create(this.form.value);
@@ -808,17 +792,17 @@ class BlogModalComponent {
                 ...this.form.value,
             });
         }
-        observable$.pipe(finalize(() => (this.modalBusy = false))).subscribe(() => {
+        observable$.pipe(finalize(() => this.modalBusy.set(false))).subscribe(() => {
             this.onVisibleChange(false, true);
             this.toasterService.success('AbpUi::SavedSuccessfully');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BlogModalComponent, isStandalone: true, selector: "abp-blog-modal", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\" [busy]=\"modalBusy\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      {{ (selected()?.id ? 'AbpUi::Edit' : 'AbpUi::New') | abpLocalization }}\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n        <abp-extensible-form [selectedRecord]=\"selected()\" />\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", dependencies: [{ kind: "component", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: ["selectedRecord"], exportAs: ["abpExtensibleForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "component", type: ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: BlogModalComponent, isStandalone: true, selector: "abp-blog-modal", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\" [busy]=\"modalBusy()\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      {{ (selected()?.id ? 'AbpUi::Edit' : 'AbpUi::New') | abpLocalization }}\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n        <abp-extensible-form [selectedRecord]=\"selected()\" />\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", dependencies: [{ kind: "component", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: ["selectedRecord"], exportAs: ["abpExtensibleForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "component", type: ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-blog-modal', imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-blog-modal', imports: [
                         ExtensibleFormComponent,
                         LocalizationPipe,
                         ReactiveFormsModule,
@@ -827,7 +811,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         ModalComponent,
                         ModalCloseDirective,
                         ButtonComponent,
-                    ], template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\" [busy]=\"modalBusy\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      {{ (selected()?.id ? 'AbpUi::Edit' : 'AbpUi::New') | abpLocalization }}\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n        <abp-extensible-form [selectedRecord]=\"selected()\" />\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n" }]
+                    ], template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\" [busy]=\"modalBusy()\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      {{ (selected()?.id ? 'AbpUi::Edit' : 'AbpUi::New') | abpLocalization }}\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n        <abp-extensible-form [selectedRecord]=\"selected()\" />\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n" }]
         }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
 
 class BlogFeaturesModalComponent {
@@ -835,9 +819,13 @@ class BlogFeaturesModalComponent {
         this.blogFeatureService = inject(BlogFeatureAdminService);
         this.fb = inject(FormBuilder);
         this.toasterService = inject(ToasterService);
-        this.blogId = input(...(ngDevMode ? [undefined, { debugName: "blogId" }] : /* istanbul ignore next */ []));
+        this.blogId = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "blogId" }] : /* istanbul ignore next */ []));
         this.visibleChange = output();
-        this.features = [];
+        this.form = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []));
+        this.features = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "features" }] : /* istanbul ignore next */ []));
         this.initialFeatureStates = new Map();
     }
     ngOnInit() {
@@ -847,40 +835,39 @@ class BlogFeaturesModalComponent {
     }
     loadFeatures() {
         this.blogFeatureService.getList(this.blogId()).subscribe(features => {
-            this.features = features.sort((a, b) => (a.featureName || '').localeCompare(b.featureName || ''));
-            // Store initial states
-            this.initialFeatureStates = new Map(this.features.map(f => [f.featureName || '', f.isEnabled || false]));
-            this.buildForm();
+            const sorted = features.sort((a, b) => (a.featureName || '').localeCompare(b.featureName || ''));
+            this.features.set(sorted);
+            this.initialFeatureStates = new Map(sorted.map(f => [f.featureName || '', f.isEnabled || false]));
+            this.buildForm(sorted);
         });
     }
-    buildForm() {
-        const featureControls = this.features.map(feature => this.fb.group({
+    buildForm(features) {
+        const featureControls = features.map(feature => this.fb.group({
             featureName: [feature.featureName],
             isEnabled: [feature.isEnabled],
             isAvailable: [feature.isAvailable ?? true],
         }));
-        this.form = this.fb.group({
+        this.form.set(this.fb.group({
             features: this.fb.array(featureControls),
-        });
+        }));
     }
     get featuresFormArray() {
-        return this.form.get('features');
+        return this.form().get('features');
     }
     onVisibleChange(visible, refresh = false) {
         this.visibleChange.emit({ visible, refresh });
     }
     save() {
-        if (!this.form.valid || !this.blogId()) {
+        const currentForm = this.form();
+        if (!currentForm?.valid || !this.blogId()) {
             return;
         }
-        const featuresArray = this.form.get('features');
-        // Only save features that have changed
+        const featuresArray = currentForm.get('features');
         const changedFeatures = featuresArray.controls
             .map(control => {
             const featureName = control.get('featureName')?.value;
             const isEnabled = control.get('isEnabled')?.value;
             const initialIsEnabled = this.initialFeatureStates.get(featureName);
-            // Only include if the value has changed
             if (featureName && initialIsEnabled !== isEnabled) {
                 return {
                     featureName,
@@ -890,27 +877,22 @@ class BlogFeaturesModalComponent {
             return null;
         })
             .filter((input) => input !== null);
-        // If no features changed, just close the modal
         if (changedFeatures.length === 0) {
             this.onVisibleChange(false, false);
             return;
         }
-        // Save only changed features
         const saveObservables = changedFeatures.map(input => this.blogFeatureService.set(this.blogId(), input));
-        // Use forkJoin to save all changed features at once
-        forkJoin(saveObservables).subscribe({
-            next: () => {
-                this.onVisibleChange(false, true);
-                this.toasterService.success('AbpUi::SavedSuccessfully');
-            },
+        forkJoin(saveObservables).subscribe(() => {
+            this.onVisibleChange(false, true);
+            this.toasterService.success('AbpUi::SavedSuccessfully');
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogFeaturesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BlogFeaturesModalComponent, isStandalone: true, selector: "abp-blog-features-modal", inputs: { blogId: { classPropertyName: "blogId", publicName: "blogId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>{{ 'CmsKit::Features' | abpLocalization }}</h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n        <div formArrayName=\"features\">\r\n          @for (featureControl of featuresFormArray.controls; track $index; let i = $index) {\r\n            <div class=\"mb-3\" [formGroupName]=\"i\">\r\n              @let isAvailable = featureControl.get('isAvailable')?.value;\r\n              @if (isAvailable) {\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"form-check-input\"\r\n                    id=\"feature-{{ i }}\"\r\n                    formControlName=\"isEnabled\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"feature-{{ i }}\">\r\n                    {{ 'CmsKit::' + features[i]?.featureName | abpLocalization }}\r\n                  </label>\r\n                </div>\r\n              } @else {\r\n                <div\r\n                  data-toggle=\"tooltip\"\r\n                  [title]=\"'CmsKit::BlogFeatureNotAvailable' | abpLocalization\"\r\n                >\r\n                  <div class=\"form-check\">\r\n                    <input\r\n                      type=\"checkbox\"\r\n                      class=\"form-check-input\"\r\n                      id=\"feature-{{ i }}\"\r\n                      formControlName=\"isEnabled\"\r\n                      disabled\r\n                    />\r\n                    <label class=\"form-check-label\" for=\"feature-{{ i }}\">\r\n                      {{ 'CmsKit::' + features[i]?.featureName | abpLocalization }}\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n              }\r\n              <input type=\"hidden\" formControlName=\"featureName\" />\r\n              <input type=\"hidden\" formControlName=\"isAvailable\" />\r\n            </div>\r\n          }\r\n        </div>\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i2$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogFeaturesModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: BlogFeaturesModalComponent, isStandalone: true, selector: "abp-blog-features-modal", inputs: { blogId: { classPropertyName: "blogId", publicName: "blogId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>{{ 'CmsKit::Features' | abpLocalization }}</h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form(); as currentForm) {\r\n      <form [formGroup]=\"currentForm\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n        <div formArrayName=\"features\">\r\n          @for (featureControl of featuresFormArray.controls; track $index; let i = $index) {\r\n            <div class=\"mb-3\" [formGroupName]=\"i\">\r\n              @let isAvailable = featureControl.get('isAvailable')?.value;\r\n              @if (isAvailable) {\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"form-check-input\"\r\n                    id=\"feature-{{ i }}\"\r\n                    formControlName=\"isEnabled\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"feature-{{ i }}\">\r\n                    {{ 'CmsKit::' + features()[i]?.featureName | abpLocalization }}\r\n                  </label>\r\n                </div>\r\n              } @else {\r\n                <div\r\n                  data-toggle=\"tooltip\"\r\n                  [title]=\"'CmsKit::BlogFeatureNotAvailable' | abpLocalization\"\r\n                >\r\n                  <div class=\"form-check\">\r\n                    <input\r\n                      type=\"checkbox\"\r\n                      class=\"form-check-input\"\r\n                      id=\"feature-{{ i }}\"\r\n                      formControlName=\"isEnabled\"\r\n                      [disabled]=\"true\"\r\n                    />\r\n                    <label class=\"form-check-label\" for=\"feature-{{ i }}\">\r\n                      {{ 'CmsKit::' + features()[i]?.featureName | abpLocalization }}\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n              }\r\n              <input type=\"hidden\" formControlName=\"featureName\" />\r\n              <input type=\"hidden\" formControlName=\"isAvailable\" />\r\n            </div>\r\n          }\r\n        </div>\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form()?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i2$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogFeaturesModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogFeaturesModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-blog-features-modal', imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-blog-features-modal', imports: [
                         LocalizationPipe,
                         ReactiveFormsModule,
                         CommonModule,
@@ -918,34 +900,49 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         ModalComponent,
                         ModalCloseDirective,
                         ButtonComponent,
-                    ], template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>{{ 'CmsKit::Features' | abpLocalization }}</h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n        <div formArrayName=\"features\">\r\n          @for (featureControl of featuresFormArray.controls; track $index; let i = $index) {\r\n            <div class=\"mb-3\" [formGroupName]=\"i\">\r\n              @let isAvailable = featureControl.get('isAvailable')?.value;\r\n              @if (isAvailable) {\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"form-check-input\"\r\n                    id=\"feature-{{ i }}\"\r\n                    formControlName=\"isEnabled\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"feature-{{ i }}\">\r\n                    {{ 'CmsKit::' + features[i]?.featureName | abpLocalization }}\r\n                  </label>\r\n                </div>\r\n              } @else {\r\n                <div\r\n                  data-toggle=\"tooltip\"\r\n                  [title]=\"'CmsKit::BlogFeatureNotAvailable' | abpLocalization\"\r\n                >\r\n                  <div class=\"form-check\">\r\n                    <input\r\n                      type=\"checkbox\"\r\n                      class=\"form-check-input\"\r\n                      id=\"feature-{{ i }}\"\r\n                      formControlName=\"isEnabled\"\r\n                      disabled\r\n                    />\r\n                    <label class=\"form-check-label\" for=\"feature-{{ i }}\">\r\n                      {{ 'CmsKit::' + features[i]?.featureName | abpLocalization }}\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n              }\r\n              <input type=\"hidden\" formControlName=\"featureName\" />\r\n              <input type=\"hidden\" formControlName=\"isAvailable\" />\r\n            </div>\r\n          }\r\n        </div>\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n" }]
+                    ], template: "<abp-modal [visible]=\"true\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>{{ 'CmsKit::Features' | abpLocalization }}</h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form(); as currentForm) {\r\n      <form [formGroup]=\"currentForm\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n        <div formArrayName=\"features\">\r\n          @for (featureControl of featuresFormArray.controls; track $index; let i = $index) {\r\n            <div class=\"mb-3\" [formGroupName]=\"i\">\r\n              @let isAvailable = featureControl.get('isAvailable')?.value;\r\n              @if (isAvailable) {\r\n                <div class=\"form-check\">\r\n                  <input\r\n                    type=\"checkbox\"\r\n                    class=\"form-check-input\"\r\n                    id=\"feature-{{ i }}\"\r\n                    formControlName=\"isEnabled\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"feature-{{ i }}\">\r\n                    {{ 'CmsKit::' + features()[i]?.featureName | abpLocalization }}\r\n                  </label>\r\n                </div>\r\n              } @else {\r\n                <div\r\n                  data-toggle=\"tooltip\"\r\n                  [title]=\"'CmsKit::BlogFeatureNotAvailable' | abpLocalization\"\r\n                >\r\n                  <div class=\"form-check\">\r\n                    <input\r\n                      type=\"checkbox\"\r\n                      class=\"form-check-input\"\r\n                      id=\"feature-{{ i }}\"\r\n                      formControlName=\"isEnabled\"\r\n                      [disabled]=\"true\"\r\n                    />\r\n                    <label class=\"form-check-label\" for=\"feature-{{ i }}\">\r\n                      {{ 'CmsKit::' + features()[i]?.featureName | abpLocalization }}\r\n                    </label>\r\n                  </div>\r\n                </div>\r\n              }\r\n              <input type=\"hidden\" formControlName=\"featureName\" />\r\n              <input type=\"hidden\" formControlName=\"isAvailable\" />\r\n            </div>\r\n          }\r\n        </div>\r\n      </form>\r\n    } @else {\r\n      <div class=\"text-center\">\r\n        <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n      </div>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button iconClass=\"fa fa-check\" [disabled]=\"form()?.invalid\" (click)=\"save()\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n" }]
         }], propDecorators: { blogId: [{ type: i0.Input, args: [{ isSignal: true, alias: "blogId", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
 
 class BlogListComponent {
     constructor() {
-        this.data = { items: [], totalCount: 0 };
         this.list = inject((ListService));
         this.blogService = inject(BlogAdminService);
         this.confirmationService = inject(ConfirmationService);
+        this.data = toSignal(this.list.hookToQuery(query => {
+            let filters = {};
+            if (this.list.filter) {
+                filters.filter = this.list.filter;
+            }
+            const input = {
+                ...query,
+                ...filters,
+            };
+            return this.blogService.getList(input);
+        }), {
+            initialValue: { items: [], totalCount: 0 },
+        });
         this.filter = '';
-        this.isModalVisible = false;
-        this.isFeaturesModalVisible = false;
-    }
-    ngOnInit() {
-        this.hookToQuery();
+        this.isModalVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isModalVisible" }] : /* istanbul ignore next */ []));
+        this.selected = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.isFeaturesModalVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isFeaturesModalVisible" }] : /* istanbul ignore next */ []));
+        this.selectedBlogId = signal(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedBlogId" }] : /* istanbul ignore next */ []));
     }
     onSearch() {
         this.list.filter = this.filter;
         this.list.get();
     }
     add() {
-        this.selected = {};
-        this.isModalVisible = true;
+        this.selected.set({});
+        this.isModalVisible.set(true);
     }
     edit(id) {
         this.blogService.get(id).subscribe(blog => {
-            this.selected = blog;
-            this.isModalVisible = true;
+            this.selected.set(blog);
+            this.isModalVisible.set(true);
         });
     }
     delete(id, name) {
@@ -955,32 +952,13 @@ class BlogListComponent {
         })
             .subscribe((status) => {
             if (status === Confirmation.Status.confirm) {
-                this.blogService.delete(id).subscribe(() => {
-                    this.list.get();
-                });
+                this.blogService.delete(id).subscribe(() => this.list.get());
             }
         });
     }
     openFeatures(id) {
-        this.selectedBlogId = id;
-        this.isFeaturesModalVisible = true;
-    }
-    hookToQuery() {
-        this.list
-            .hookToQuery(query => {
-            let filters = {};
-            if (this.list.filter) {
-                filters.filter = this.list.filter;
-            }
-            const input = {
-                ...query,
-                ...filters,
-            };
-            return this.blogService.getList(input);
-        })
-            .subscribe(res => {
-            this.data = res;
-        });
+        this.selectedBlogId.set(id);
+        this.isFeaturesModalVisible.set(true);
     }
     onVisibleModalChange(visibilityChange) {
         if (visibilityChange.visible) {
@@ -989,8 +967,8 @@ class BlogListComponent {
         if (visibilityChange.refresh) {
             this.list.get();
         }
-        this.selected = null;
-        this.isModalVisible = false;
+        this.selected.set(undefined);
+        this.isModalVisible.set(false);
     }
     onFeaturesModalChange(visibilityChange) {
         if (visibilityChange.visible) {
@@ -999,21 +977,21 @@ class BlogListComponent {
         if (visibilityChange.refresh) {
             this.list.get();
         }
-        this.selectedBlogId = null;
-        this.isFeaturesModalVisible = false;
+        this.selectedBlogId.set(undefined);
+        this.isFeaturesModalVisible.set(false);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BlogListComponent, isStandalone: true, selector: "abp-blog-list", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: BlogListComponent, isStandalone: true, selector: "abp-blog-list", providers: [
             ListService,
             {
                 provide: EXTENSIONS_IDENTIFIER,
                 useValue: eCmsKitAdminComponents.Blogs,
             },
-        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Blogs' | abpLocalization\" [toolbar]=\"data.items\">\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n\r\n  @if (isModalVisible) {\r\n    <abp-blog-modal [selected]=\"selected\" (visibleChange)=\"onVisibleModalChange($event)\" />\r\n  }\r\n\r\n  @if (isFeaturesModalVisible) {\r\n    <abp-blog-features-modal\r\n      [blogId]=\"selectedBlogId\"\r\n      (visibleChange)=\"onFeaturesModalChange($event)\"\r\n    />\r\n  }\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BlogModalComponent, selector: "abp-blog-modal", inputs: ["selected"], outputs: ["visibleChange"] }, { kind: "component", type: BlogFeaturesModalComponent, selector: "abp-blog-features-modal", inputs: ["blogId"], outputs: ["visibleChange"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::Blogs' | abpLocalization\" [toolbar]=\"data().items\">\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data().items\" [recordsTotal]=\"data().totalCount\" [list]=\"list\" />\r\n  </div>\r\n\r\n  @if (isModalVisible()) {\r\n    <abp-blog-modal [selected]=\"selected()\" (visibleChange)=\"onVisibleModalChange($event)\" />\r\n  }\r\n\r\n  @if (isFeaturesModalVisible()) {\r\n    <abp-blog-features-modal\r\n      [blogId]=\"selectedBlogId()\"\r\n      (visibleChange)=\"onFeaturesModalChange($event)\"\r\n    />\r\n  }\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: BlogModalComponent, selector: "abp-blog-modal", inputs: ["selected"], outputs: ["visibleChange"] }, { kind: "component", type: BlogFeaturesModalComponent, selector: "abp-blog-features-modal", inputs: ["blogId"], outputs: ["visibleChange"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-blog-list', providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-blog-list', providers: [
                         ListService,
                         {
                             provide: EXTENSIONS_IDENTIFIER,
@@ -1027,32 +1005,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         CommonModule,
                         BlogModalComponent,
                         BlogFeaturesModalComponent,
-                    ], template: "<abp-page [title]=\"'CmsKit::Blogs' | abpLocalization\" [toolbar]=\"data.items\">\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n\r\n  @if (isModalVisible) {\r\n    <abp-blog-modal [selected]=\"selected\" (visibleChange)=\"onVisibleModalChange($event)\" />\r\n  }\r\n\r\n  @if (isFeaturesModalVisible) {\r\n    <abp-blog-features-modal\r\n      [blogId]=\"selectedBlogId\"\r\n      (visibleChange)=\"onFeaturesModalChange($event)\"\r\n    />\r\n  }\r\n</abp-page>\r\n" }]
+                    ], template: "<abp-page [title]=\"'CmsKit::Blogs' | abpLocalization\" [toolbar]=\"data().items\">\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data().items\" [recordsTotal]=\"data().totalCount\" [list]=\"list\" />\r\n  </div>\r\n\r\n  @if (isModalVisible()) {\r\n    <abp-blog-modal [selected]=\"selected()\" (visibleChange)=\"onVisibleModalChange($event)\" />\r\n  }\r\n\r\n  @if (isFeaturesModalVisible()) {\r\n    <abp-blog-features-modal\r\n      [blogId]=\"selectedBlogId()\"\r\n      (visibleChange)=\"onFeaturesModalChange($event)\"\r\n    />\r\n  }\r\n</abp-page>\r\n" }]
         }] });
 
 class BlogPostListComponent {
     constructor() {
-        this.data = { items: [], totalCount: 0 };
         this.list = inject((ListService));
         this.blogPostService = inject(BlogPostAdminService);
         this.confirmationService = inject(ConfirmationService);
-        this.filter = '';
-        this.statusFilter = null;
-        this.BlogPostStatus = BlogPostStatus;
-    }
-    ngOnInit() {
-        this.hookToQuery();
-    }
-    onSearch() {
-        this.list.filter = this.filter;
-        this.list.get();
-    }
-    onStatusChange() {
-        this.list.get();
-    }
-    hookToQuery() {
-        this.list
-            .hookToQuery(query => {
+        this.data = toSignal(this.list.hookToQuery(query => {
             let filters = {};
             if (this.list.filter) {
                 filters.filter = this.list.filter;
@@ -1065,8 +1026,19 @@ class BlogPostListComponent {
                 ...filters,
             };
             return this.blogPostService.getList(input);
-        })
-            .subscribe(res => (this.data = res));
+        }), {
+            initialValue: { items: [], totalCount: 0 },
+        });
+        this.filter = '';
+        this.statusFilter = null;
+        this.BlogPostStatus = BlogPostStatus;
+    }
+    onSearch() {
+        this.list.filter = this.filter;
+        this.list.get();
+    }
+    onStatusChange() {
+        this.list.get();
     }
     delete(id, title) {
         this.confirmationService
@@ -1077,30 +1049,28 @@ class BlogPostListComponent {
         })
             .subscribe((status) => {
             if (status === Confirmation.Status.confirm) {
-                this.blogPostService.delete(id).subscribe(() => {
-                    this.list.get();
-                });
+                this.blogPostService.delete(id).subscribe(() => this.list.get());
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogPostListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: BlogPostListComponent, isStandalone: true, selector: "abp-blog-post-list", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogPostListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: BlogPostListComponent, isStandalone: true, selector: "abp-blog-post-list", providers: [
             ListService,
             {
                 provide: EXTENSIONS_IDENTIFIER,
                 useValue: eCmsKitAdminComponents.BlogPosts,
             },
-        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::BlogPosts' | abpLocalization\" [toolbar]=\"data.items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-2\">\r\n          <select class=\"form-select\" [(ngModel)]=\"statusFilter\" (change)=\"onStatusChange()\">\r\n            <option [ngValue]=\"null\">{{ 'CmsKit::AllPosts' | abpLocalization }}</option>\r\n            <option [ngValue]=\"BlogPostStatus.Draft\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.0' | abpLocalization }}\r\n            </option>\r\n            <option [ngValue]=\"BlogPostStatus.Published\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.1' | abpLocalization }}\r\n            </option>\r\n            <option [ngValue]=\"BlogPostStatus.WaitingForReview\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.2' | abpLocalization }}\r\n            </option>\r\n          </select>\r\n        </div>\r\n        <div class=\"col-10\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::BlogPosts' | abpLocalization\" [toolbar]=\"data().items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-2\">\r\n          <select class=\"form-select\" [(ngModel)]=\"statusFilter\" (change)=\"onStatusChange()\">\r\n            <option [ngValue]=\"null\">{{ 'CmsKit::AllPosts' | abpLocalization }}</option>\r\n            <option [ngValue]=\"BlogPostStatus.Draft\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.0' | abpLocalization }}\r\n            </option>\r\n            <option [ngValue]=\"BlogPostStatus.Published\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.1' | abpLocalization }}\r\n            </option>\r\n            <option [ngValue]=\"BlogPostStatus.WaitingForReview\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.2' | abpLocalization }}\r\n            </option>\r\n          </select>\r\n        </div>\r\n        <div class=\"col-10\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table\r\n      [data]=\"data().items\"\r\n      [recordsTotal]=\"data().totalCount\"\r\n      [list]=\"list\"\r\n    />\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ExtensibleTableComponent, selector: "abp-extensible-table", inputs: ["actionsText", "data", "list", "recordsTotal", "actionsColumnWidth", "actionsTemplate", "selectable", "selectionType", "selected", "infiniteScroll", "isLoading", "scrollThreshold", "tableHeight", "rowDetailTemplate", "rowDetailHeight"], outputs: ["tableActivate", "selectionChange", "loadMore", "rowDetailToggle"], exportAs: ["abpExtensibleTable"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.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: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogPostListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogPostListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-blog-post-list', providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-blog-post-list', providers: [
                         ListService,
                         {
                             provide: EXTENSIONS_IDENTIFIER,
                             useValue: eCmsKitAdminComponents.BlogPosts,
                         },
-                    ], imports: [ExtensibleTableComponent, PageComponent, LocalizationPipe, FormsModule, CommonModule], template: "<abp-page [title]=\"'CmsKit::BlogPosts' | abpLocalization\" [toolbar]=\"data.items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-2\">\r\n          <select class=\"form-select\" [(ngModel)]=\"statusFilter\" (change)=\"onStatusChange()\">\r\n            <option [ngValue]=\"null\">{{ 'CmsKit::AllPosts' | abpLocalization }}</option>\r\n            <option [ngValue]=\"BlogPostStatus.Draft\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.0' | abpLocalization }}\r\n            </option>\r\n            <option [ngValue]=\"BlogPostStatus.Published\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.1' | abpLocalization }}\r\n            </option>\r\n            <option [ngValue]=\"BlogPostStatus.WaitingForReview\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.2' | abpLocalization }}\r\n            </option>\r\n          </select>\r\n        </div>\r\n        <div class=\"col-10\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table [data]=\"data.items\" [recordsTotal]=\"data.totalCount\" [list]=\"list\" />\r\n  </div>\r\n</abp-page>\r\n" }]
+                    ], imports: [ExtensibleTableComponent, PageComponent, LocalizationPipe, FormsModule, CommonModule], template: "<abp-page [title]=\"'CmsKit::BlogPosts' | abpLocalization\" [toolbar]=\"data().items\">\r\n  <div class=\"card mb-4\">\r\n    <div class=\"card-body\">\r\n      <div class=\"row\">\r\n        <div class=\"col-2\">\r\n          <select class=\"form-select\" [(ngModel)]=\"statusFilter\" (change)=\"onStatusChange()\">\r\n            <option [ngValue]=\"null\">{{ 'CmsKit::AllPosts' | abpLocalization }}</option>\r\n            <option [ngValue]=\"BlogPostStatus.Draft\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.0' | abpLocalization }}\r\n            </option>\r\n            <option [ngValue]=\"BlogPostStatus.Published\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.1' | abpLocalization }}\r\n            </option>\r\n            <option [ngValue]=\"BlogPostStatus.WaitingForReview\">\r\n              {{ 'CmsKit::' + 'CmsKit.BlogPost.Status.2' | abpLocalization }}\r\n            </option>\r\n          </select>\r\n        </div>\r\n        <div class=\"col-10\">\r\n          <div class=\"input-group\">\r\n            <input\r\n              type=\"search\"\r\n              class=\"form-control\"\r\n              [placeholder]=\"'AbpUi::PagerSearch' | abpLocalization\"\r\n              [(ngModel)]=\"filter\"\r\n              (keyup.enter)=\"onSearch()\"\r\n            />\r\n            <button class=\"btn btn-primary\" type=\"button\" (click)=\"onSearch()\">\r\n              <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div class=\"card\">\r\n    <abp-extensible-table\r\n      [data]=\"data().items\"\r\n      [recordsTotal]=\"data().totalCount\"\r\n      [list]=\"list\"\r\n    />\r\n  </div>\r\n</abp-page>\r\n" }]
         }] });
 
 class BlogPostFormComponent {
@@ -1113,39 +1083,43 @@ class BlogPostFormComponent {
         this.blogPostFormService = inject(BlogPostFormService);
         this.route = inject(ActivatedRoute);
         this.destroyRef = inject(DestroyRef);
-        this.blogPost = null;
+        this.blogPost = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "blogPost" }] : /* istanbul ignore next */ []));
         this.blogPostId = null;
-        this.isEditMode = false;
+        this.isEditMode = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isEditMode" }] : /* istanbul ignore next */ []));
         this.coverImageFile = null;
-        this.coverImagePreview = null;
-        this.tags = '';
-        this.isTagsEnabled = true;
+        this.coverImagePreview = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "coverImagePreview" }] : /* istanbul ignore next */ []));
+        this.tags = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "tags" }] : /* istanbul ignore next */ []));
+        this.isTagsEnabled = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isTagsEnabled" }] : /* istanbul ignore next */ []));
         this.BLOG_POST_ENTITY_TYPE = 'BlogPost';
     }
     ngOnInit() {
         const id = this.route.snapshot.params['id'];
         if (id) {
-            this.isEditMode = true;
+            this.isEditMode.set(true);
             this.blogPostId = id;
             this.loadBlogPost(id);
         }
         else {
-            this.isEditMode = false;
+            this.isEditMode.set(false);
             this.buildForm();
         }
     }
     loadBlogPost(id) {
         this.blogPostService.get(id).subscribe(blogPost => {
-            this.blogPost = blogPost;
+            this.blogPost.set(blogPost);
             if (blogPost.coverImageMediaId) {
-                this.coverImagePreview = `/api/cms-kit/media/${blogPost.coverImageMediaId}`;
+                this.coverImagePreview.set(`/api/cms-kit/media/${blogPost.coverImageMediaId}`);
             }
             this.buildForm();
             this.loadTags(id);
         });
     }
     loadTags(blogPostId) {
-        // TODO: use the public service to load the tags
         this.restService
             .request({
             method: 'GET',
@@ -1153,25 +1127,24 @@ class BlogPostFormComponent {
         })
             .subscribe(tags => {
             if (tags && tags.length > 0) {
-                this.tags = tags.map(t => t.name || '').join(', ');
+                this.tags.set(tags.map(t => t.name || '').join(', '));
             }
         });
     }
     buildForm() {
-        const data = new FormPropData(this.injector, this.blogPost || {});
+        const currentBlogPost = this.blogPost();
+        const data = new FormPropData(this.injector, currentBlogPost || {});
         const baseForm = generateFormFromProps(data);
         this.form = new FormGroup({
             ...baseForm.controls,
-            content: new FormControl(this.blogPost?.content || ''),
-            coverImageMediaId: new FormControl(this.blogPost?.coverImageMediaId || null),
+            content: new FormControl(currentBlogPost?.content || ''),
+            coverImageMediaId: new FormControl(currentBlogPost?.coverImageMediaId || null),
         });
         prepareSlugFromControl(this.form, 'title', 'slug', this.destroyRef);
-        // Check if tags feature is enabled for the blog
-        const blogId = this.form.get('blogId')?.value || this.blogPost?.blogId;
+        const blogId = this.form.get('blogId')?.value || currentBlogPost?.blogId;
         if (blogId) {
             this.checkTagsFeature(blogId);
         }
-        // Listen for blog selection changes
         this.form
             .get('blogId')
             ?.valueChanges.pipe(takeUntilDestroyed(this.destroyRef))
@@ -1189,7 +1162,7 @@ class BlogPostFormComponent {
         })
             .subscribe(feature => {
             const { isEnabled } = feature || {};
-            this.isTagsEnabled = isEnabled;
+            this.isTagsEnabled.set(isEnabled);
         });
     }
     onCoverImageChange(event) {
@@ -1198,14 +1171,14 @@ class BlogPostFormComponent {
             this.coverImageFile = input.files[0];
             const reader = new FileReader();
             reader.onload = (e) => {
-                this.coverImagePreview = e.target.result;
+                this.coverImagePreview.set(e.target.result);
             };
             reader.readAsDataURL(this.coverImageFile);
         }
     }
     removeCoverImage() {
         this.coverImageFile = null;
-        this.coverImagePreview = null;
+        this.coverImagePreview.set(null);
         this.form.patchValue({ coverImageMediaId: null });
     }
     uploadCoverImage() {
@@ -1221,10 +1194,11 @@ class BlogPostFormComponent {
         }), switchMap(result => of(result.id || null)));
     }
     setTags(blogPostId) {
-        if (!this.tags || !this.tags.trim()) {
+        const tagsValue = this.tags();
+        if (!tagsValue || !tagsValue.trim()) {
             return of(null);
         }
-        const tagArray = this.tags
+        const tagArray = tagsValue
             .split(',')
             .map(t => t.trim())
             .filter(t => t.length > 0);
@@ -1238,18 +1212,18 @@ class BlogPostFormComponent {
         });
     }
     executeSaveOperation(operation) {
-        // First upload cover image if selected
         this.uploadCoverImage()
             .pipe(tap(coverImageMediaId => {
             if (coverImageMediaId) {
                 this.form.patchValue({ coverImageMediaId });
             }
         }), switchMap(() => {
-            if (this.isEditMode) {
-                if (!this.blogPost || !this.blogPostId) {
+            if (this.isEditMode()) {
+                const currentBlogPost = this.blogPost();
+                if (!currentBlogPost || !this.blogPostId) {
                     return of(null);
                 }
-                return this.blogPostFormService.update(this.blogPostId, this.form, this.blogPost);
+                return this.blogPostFormService.update(this.blogPostId, this.form, currentBlogPost);
             }
             switch (operation) {
                 case 'save':
@@ -1266,7 +1240,6 @@ class BlogPostFormComponent {
             if (!result || !result.id) {
                 return of(null);
             }
-            // Set tags after blog post is created/updated
             return forkJoin([of(result), this.setTags(result.id)]);
         }))
             .subscribe();
@@ -1280,17 +1253,17 @@ class BlogPostFormComponent {
     sendToReview() {
         this.executeSaveOperation('sendToReview');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogPostFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: BlogPostFormComponent, isStandalone: true, selector: "abp-blog-post-form", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogPostFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: BlogPostFormComponent, isStandalone: true, selector: "abp-blog-post-form", providers: [
             {
                 provide: EXTENSIONS_IDENTIFIER,
                 useValue: eCmsKitAdminComponents.BlogPostForm,
             },
-        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::BlogPosts' | abpLocalization\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (form && (!isEditMode || blogPost)) {\r\n        <form [formGroup]=\"form\" (ngSubmit)=\"saveAsDraft()\" validateOnSubmit>\r\n          <!-- Cover Image -->\r\n          <div class=\"mb-3\">\r\n            @if (coverImagePreview) {\r\n              <div class=\"mb-2\">\r\n                <img [src]=\"coverImagePreview\" height=\"120\" alt=\"Cover Image\" />\r\n                <br />\r\n                <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"removeCoverImage()\">\r\n                  {{ 'CmsKit::RemoveCoverImage' | abpLocalization }}\r\n                </button>\r\n                <br />\r\n              </div>\r\n            }\r\n            <label class=\"form-label\"\r\n              >{{ 'CmsKit::CoverImage' | abpLocalization }}\r\n              <span class=\"badge text-bg-light\">16:9</span></label\r\n            >\r\n            <input\r\n              type=\"file\"\r\n              class=\"form-control\"\r\n              accept=\"image/*\"\r\n              (change)=\"onCoverImageChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Basic fields -->\r\n          <abp-extensible-form [selectedRecord]=\"blogPost || {}\" />\r\n\r\n          <!-- Content editor -->\r\n          <div class=\"mt-3\">\r\n            <label class=\"form-label\">{{ 'CmsKit::Content' | abpLocalization }}</label>\r\n            <abp-toastui-editor formControlName=\"content\" />\r\n          </div>\r\n        </form>\r\n\r\n        <!-- Tags Editor -->\r\n        @if (isTagsEnabled) {\r\n          <hr />\r\n          <div class=\"mb-3\">\r\n            <label class=\"form-label\">{{ 'CmsKit::Tags' | abpLocalization }}</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control\"\r\n              [(ngModel)]=\"tags\"\r\n              [ngModelOptions]=\"{ standalone: true }\"\r\n              [placeholder]=\"'CmsKit::TagsHelpText' | abpLocalization\"\r\n            />\r\n            <div class=\"form-text\">{{ 'CmsKit::TagsHelpText' | abpLocalization }}</div>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"text-center\">\r\n          <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"d-flex justify-content-start gap-2\">\r\n        <button class=\"btn btn-secondary\" (click)=\"saveAsDraft()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::SaveAsDraft' | abpLocalization }}\r\n        </button>\r\n        @if (isEditMode) {\r\n          <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::Publish' | abpLocalization }}\r\n          </abp-button>\r\n        } @else {\r\n          <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::Publish' | abpLocalization }}\r\n          </abp-button>\r\n          <abp-button (click)=\"sendToReview()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::SendToReviewToPublish' | abpLocalization }}\r\n          </abp-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: ["selectedRecord"], exportAs: ["abpExtensibleForm"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "component", type: ToastuiEditorComponent, selector: "abp-toastui-editor" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i2$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::BlogPosts' | abpLocalization\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (form && (!isEditMode() || blogPost())) {\r\n        <form [formGroup]=\"form\" (ngSubmit)=\"saveAsDraft()\" [validateOnSubmit]=\"true\">\r\n          <!-- Cover Image -->\r\n          <div class=\"mb-3\">\r\n            @if (coverImagePreview()) {\r\n              <div class=\"mb-2\">\r\n                <img [src]=\"coverImagePreview()\" height=\"120\" alt=\"Cover Image\" />\r\n                <br />\r\n                <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"removeCoverImage()\">\r\n                  {{ 'CmsKit::RemoveCoverImage' | abpLocalization }}\r\n                </button>\r\n                <br />\r\n              </div>\r\n            }\r\n            <label class=\"form-label\"\r\n              >{{ 'CmsKit::CoverImage' | abpLocalization }}\r\n              <span class=\"badge text-bg-light\">16:9</span></label\r\n            >\r\n            <input\r\n              type=\"file\"\r\n              class=\"form-control\"\r\n              accept=\"image/*\"\r\n              (change)=\"onCoverImageChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Basic fields -->\r\n          <abp-extensible-form [selectedRecord]=\"blogPost() || {}\" />\r\n\r\n          <!-- Content editor -->\r\n          <div class=\"mt-3\">\r\n            <label class=\"form-label\">{{ 'CmsKit::Content' | abpLocalization }}</label>\r\n            <abp-toastui-editor formControlName=\"content\" />\r\n          </div>\r\n        </form>\r\n\r\n        <!-- Tags Editor -->\r\n        @if (isTagsEnabled()) {\r\n          <hr />\r\n          <div class=\"mb-3\">\r\n            <label class=\"form-label\">{{ 'CmsKit::Tags' | abpLocalization }}</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control\"\r\n              [ngModel]=\"tags()\"\r\n              (ngModelChange)=\"tags.set($event)\"\r\n              [ngModelOptions]=\"{ standalone: true }\"\r\n              [placeholder]=\"'CmsKit::TagsHelpText' | abpLocalization\"\r\n            />\r\n            <div class=\"form-text\">{{ 'CmsKit::TagsHelpText' | abpLocalization }}</div>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"text-center\">\r\n          <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"d-flex justify-content-start gap-2\">\r\n        <button class=\"btn btn-secondary\" (click)=\"saveAsDraft()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::SaveAsDraft' | abpLocalization }}\r\n        </button>\r\n        @if (isEditMode()) {\r\n          <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::Publish' | abpLocalization }}\r\n          </abp-button>\r\n        } @else {\r\n          <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::Publish' | abpLocalization }}\r\n          </abp-button>\r\n          <abp-button (click)=\"sendToReview()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::SendToReviewToPublish' | abpLocalization }}\r\n          </abp-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n", dependencies: [{ kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "component", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: ["selectedRecord"], exportAs: ["abpExtensibleForm"] }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "component", type: ToastuiEditorComponent, selector: "abp-toastui-editor" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i2$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: BlogPostFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: BlogPostFormComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-blog-post-form', providers: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-blog-post-form', providers: [
                         {
                             provide: EXTENSIONS_IDENTIFIER,
                             useValue: eCmsKitAdminComponents.BlogPostForm,
@@ -1305,7 +1278,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         FormsModule,
                         CommonModule,
                         NgxValidateCoreModule,
-                    ], template: "<abp-page [title]=\"'CmsKit::BlogPosts' | abpLocalization\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (form && (!isEditMode || blogPost)) {\r\n        <form [formGroup]=\"form\" (ngSubmit)=\"saveAsDraft()\" validateOnSubmit>\r\n          <!-- Cover Image -->\r\n          <div class=\"mb-3\">\r\n            @if (coverImagePreview) {\r\n              <div class=\"mb-2\">\r\n                <img [src]=\"coverImagePreview\" height=\"120\" alt=\"Cover Image\" />\r\n                <br />\r\n                <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"removeCoverImage()\">\r\n                  {{ 'CmsKit::RemoveCoverImage' | abpLocalization }}\r\n                </button>\r\n                <br />\r\n              </div>\r\n            }\r\n            <label class=\"form-label\"\r\n              >{{ 'CmsKit::CoverImage' | abpLocalization }}\r\n              <span class=\"badge text-bg-light\">16:9</span></label\r\n            >\r\n            <input\r\n              type=\"file\"\r\n              class=\"form-control\"\r\n              accept=\"image/*\"\r\n              (change)=\"onCoverImageChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Basic fields -->\r\n          <abp-extensible-form [selectedRecord]=\"blogPost || {}\" />\r\n\r\n          <!-- Content editor -->\r\n          <div class=\"mt-3\">\r\n            <label class=\"form-label\">{{ 'CmsKit::Content' | abpLocalization }}</label>\r\n            <abp-toastui-editor formControlName=\"content\" />\r\n          </div>\r\n        </form>\r\n\r\n        <!-- Tags Editor -->\r\n        @if (isTagsEnabled) {\r\n          <hr />\r\n          <div class=\"mb-3\">\r\n            <label class=\"form-label\">{{ 'CmsKit::Tags' | abpLocalization }}</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control\"\r\n              [(ngModel)]=\"tags\"\r\n              [ngModelOptions]=\"{ standalone: true }\"\r\n              [placeholder]=\"'CmsKit::TagsHelpText' | abpLocalization\"\r\n            />\r\n            <div class=\"form-text\">{{ 'CmsKit::TagsHelpText' | abpLocalization }}</div>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"text-center\">\r\n          <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"d-flex justify-content-start gap-2\">\r\n        <button class=\"btn btn-secondary\" (click)=\"saveAsDraft()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::SaveAsDraft' | abpLocalization }}\r\n        </button>\r\n        @if (isEditMode) {\r\n          <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::Publish' | abpLocalization }}\r\n          </abp-button>\r\n        } @else {\r\n          <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::Publish' | abpLocalization }}\r\n          </abp-button>\r\n          <abp-button (click)=\"sendToReview()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::SendToReviewToPublish' | abpLocalization }}\r\n          </abp-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n" }]
+                    ], template: "<abp-page [title]=\"'CmsKit::BlogPosts' | abpLocalization\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (form && (!isEditMode() || blogPost())) {\r\n        <form [formGroup]=\"form\" (ngSubmit)=\"saveAsDraft()\" [validateOnSubmit]=\"true\">\r\n          <!-- Cover Image -->\r\n          <div class=\"mb-3\">\r\n            @if (coverImagePreview()) {\r\n              <div class=\"mb-2\">\r\n                <img [src]=\"coverImagePreview()\" height=\"120\" alt=\"Cover Image\" />\r\n                <br />\r\n                <button type=\"button\" class=\"btn btn-link p-0\" (click)=\"removeCoverImage()\">\r\n                  {{ 'CmsKit::RemoveCoverImage' | abpLocalization }}\r\n                </button>\r\n                <br />\r\n              </div>\r\n            }\r\n            <label class=\"form-label\"\r\n              >{{ 'CmsKit::CoverImage' | abpLocalization }}\r\n              <span class=\"badge text-bg-light\">16:9</span></label\r\n            >\r\n            <input\r\n              type=\"file\"\r\n              class=\"form-control\"\r\n              accept=\"image/*\"\r\n              (change)=\"onCoverImageChange($event)\"\r\n            />\r\n          </div>\r\n\r\n          <!-- Basic fields -->\r\n          <abp-extensible-form [selectedRecord]=\"blogPost() || {}\" />\r\n\r\n          <!-- Content editor -->\r\n          <div class=\"mt-3\">\r\n            <label class=\"form-label\">{{ 'CmsKit::Content' | abpLocalization }}</label>\r\n            <abp-toastui-editor formControlName=\"content\" />\r\n          </div>\r\n        </form>\r\n\r\n        <!-- Tags Editor -->\r\n        @if (isTagsEnabled()) {\r\n          <hr />\r\n          <div class=\"mb-3\">\r\n            <label class=\"form-label\">{{ 'CmsKit::Tags' | abpLocalization }}</label>\r\n            <input\r\n              type=\"text\"\r\n              class=\"form-control\"\r\n              [ngModel]=\"tags()\"\r\n              (ngModelChange)=\"tags.set($event)\"\r\n              [ngModelOptions]=\"{ standalone: true }\"\r\n              [placeholder]=\"'CmsKit::TagsHelpText' | abpLocalization\"\r\n            />\r\n            <div class=\"form-text\">{{ 'CmsKit::TagsHelpText' | abpLocalization }}</div>\r\n          </div>\r\n        }\r\n      } @else {\r\n        <div class=\"text-center\">\r\n          <i class=\"fa fa-pulse fa-spinner\" aria-hidden=\"true\"></i>\r\n        </div>\r\n      }\r\n    </div>\r\n    <div class=\"card-footer\">\r\n      <div class=\"d-flex justify-content-start gap-2\">\r\n        <button class=\"btn btn-secondary\" (click)=\"saveAsDraft()\" [disabled]=\"form?.invalid\">\r\n          {{ 'CmsKit::SaveAsDraft' | abpLocalization }}\r\n        </button>\r\n        @if (isEditMode()) {\r\n          <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::Publish' | abpLocalization }}\r\n          </abp-button>\r\n        } @else {\r\n          <abp-button (click)=\"publish()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::Publish' | abpLocalization }}\r\n          </abp-button>\r\n          <abp-button (click)=\"sendToReview()\" [disabled]=\"form?.invalid\">\r\n            {{ 'CmsKit::SendToReviewToPublish' | abpLocalization }}\r\n          </abp-button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n" }]
         }] });
 
 // Constants
@@ -1324,16 +1297,24 @@ class MenuItemModalComponent {
         this.toasterService = inject(ToasterService);
         this.destroyRef = inject(DestroyRef);
         // Inputs/Outputs
-        this.selected = input(...(ngDevMode ? [undefined, { debugName: "selected" }] : /* istanbul ignore next */ []));
-        this.parentId = input(...(ngDevMode ? [undefined, { debugName: "parentId" }] : /* istanbul ignore next */ []));
-        this.visible = input(true, ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
+        this.selected = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "selected" }] : /* istanbul ignore next */ []));
+        this.parentId = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "parentId" }] : /* istanbul ignore next */ []));
+        this.visible = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []));
         this.visibleChange = output();
-        this.activeTab = TABS.URL;
-        // Page selection state
-        this.pages = [];
-        this.selectedPage = null;
-        this.pageSearchText = '';
-        this.filteredPages = [];
+        this.activeTab = signal(TABS.URL, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
+        // Page search state
+        this.pages = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pages" }] : /* istanbul ignore next */ []));
+        this.selectedPage = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedPage" }] : /* istanbul ignore next */ []));
+        this.pageSearchText = signal('', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pageSearchText" }] : /* istanbul ignore next */ []));
+        this.filteredPages = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "filteredPages" }] : /* istanbul ignore next */ []));
         // Search subject for debouncing
         this.pageSearchSubject = new Subject();
     }
@@ -1361,10 +1342,10 @@ class MenuItemModalComponent {
         }), takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: result => {
-                this.filteredPages = result.items || [];
+                this.filteredPages.set(result.items || []);
             },
             error: () => {
-                this.filteredPages = [];
+                this.filteredPages.set([]);
             },
         });
     }
@@ -1392,8 +1373,8 @@ class MenuItemModalComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: ({ menuItem, pages }) => {
-                this.pages = pages.items || [];
-                this.filteredPages = this.pages;
+                this.pages.set(pages.items || []);
+                this.filteredPages.set(pages.items || []);
                 this.buildForm(menuItem);
                 this.initializePageSelection(menuItem);
             },
@@ -1411,8 +1392,8 @@ class MenuItemModalComponent {
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: result => {
-                this.pages = result.items || [];
-                this.filteredPages = this.pages;
+                this.pages.set(result.items || []);
+                this.filteredPages.set(result.items || []);
             },
             error: () => {
                 this.toasterService.error('AbpUi::ErrorMessage');
@@ -1424,16 +1405,15 @@ class MenuItemModalComponent {
      */
     initializePageSelection(menuItem) {
         if (menuItem.pageId) {
-            this.activeTab = TABS.PAGE;
-            this.selectedPage = this.pages.find(p => p.id === menuItem.pageId) || null;
-            const url = this.selectedPage
-                ? this.generateUrlFromPage(this.selectedPage)
-                : menuItem.url || '';
+            this.activeTab.set(TABS.PAGE);
+            const page = this.pages().find(p => p.id === menuItem.pageId) || null;
+            this.selectedPage.set(page);
+            const url = page ? this.generateUrlFromPage(page) : menuItem.url || '';
             this.form.patchValue({ pageId: menuItem.pageId, url }, { emitEvent: false });
-            this.pageSearchText = this.selectedPage?.title || '';
+            this.pageSearchText.set(page?.title || '');
         }
         else if (menuItem.url) {
-            this.activeTab = TABS.URL;
+            this.activeTab.set(TABS.URL);
             this.form.patchValue({ url: menuItem.url, pageId: null }, { emitEvent: false });
         }
     }
@@ -1452,9 +1432,9 @@ class MenuItemModalComponent {
      * Handles page search input changes
      */
     onPageSearchChange(searchText) {
-        this.pageSearchText = searchText;
+        this.pageSearchText.set(searchText);
         if (!searchText?.trim()) {
-            this.filteredPages = this.pages;
+            this.filteredPages.set(this.pages());
             return;
         }
         this.pageSearchSubject.next(searchText);
@@ -1463,8 +1443,8 @@ class MenuItemModalComponent {
      * Handles dropdown open event
      */
     onDropdownOpen() {
-        if (!this.pageSearchText?.trim()) {
-            this.filteredPages = this.pages;
+        if (!this.pageSearchText()?.trim()) {
+            this.filteredPages.set(this.pages());
         }
     }
     /**
@@ -1473,19 +1453,19 @@ class MenuItemModalComponent {
     selectPage(page) {
         if (!page)
             return;
-        this.selectedPage = page;
+        this.selectedPage.set(page);
         const url = this.generateUrlFromPage(page);
         this.form.patchValue({ pageId: page.id, url }, { emitEvent: false });
-        this.pageSearchText = page.title || '';
+        this.pageSearchText.set(page.title || '');
     }
     /**
      * Clears the selected page
      */
     clearPageSelection() {
         this.form.patchValue({ pageId: null }, { emitEvent: false });
-        this.selectedPage = null;
-        this.pageSearchText = '';
-        this.filteredPages = this.pages;
+        this.selectedPage.set(null);
+        this.pageSearchText.set('');
+        this.filteredPages.set(this.pages());
     }
     /**
      * Builds the reactive form for menu item creation/editing
@@ -1507,7 +1487,7 @@ class MenuItemModalComponent {
      */
     loadAvailableOrder(parentId, menuItemId) {
         if (menuItemId)
-            return; // Only needed for new items
+            return;
         const order$ = parentId
             ? this.menuItemService.getAvailableMenuOrder(parentId)
             : this.menuItemService.getAvailableMenuOrder();
@@ -1527,7 +1507,7 @@ class MenuItemModalComponent {
      * Handles tab changes
      */
     onTabChange(activeId) {
-        this.activeTab = activeId;
+        this.activeTab.set(activeId);
     }
     /**
      * Handles URL input changes - clears page selection if URL is manually entered
@@ -1536,8 +1516,8 @@ class MenuItemModalComponent {
         const urlValue = this.form.get('url')?.value;
         if (urlValue && this.form.get('pageId')?.value) {
             this.clearPageSelection();
-            if (this.activeTab === TABS.PAGE) {
-                this.activeTab = TABS.URL;
+            if (this.activeTab() === TABS.PAGE) {
+                this.activeTab.set(TABS.URL);
             }
         }
     }
@@ -1570,17 +1550,14 @@ class MenuItemModalComponent {
     prepareFormValue() {
         const formValue = { ...this.form.value };
         if (formValue.pageId) {
-            // If pageId is set, generate URL from the page
-            const selectedPage = this.pages.find(p => p.id === formValue.pageId);
-            if (selectedPage) {
-                formValue.url = this.generateUrlFromPage(selectedPage);
+            const page = this.pages().find(p => p.id === formValue.pageId);
+            if (page) {
+                formValue.url = this.generateUrlFromPage(page);
             }
         }
         else if (formValue.url) {
-            // If URL is manually entered, ensure pageId is cleared
             formValue.pageId = null;
         }
-        // Clean up undefined values
         return {
             ...formValue,
             url: formValue.url || undefined,
@@ -1604,12 +1581,12 @@ class MenuItemModalComponent {
         };
         return this.menuItemService.update(id, updateInput);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuItemModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MenuItemModalComponent, isStandalone: true, selector: "abp-menu-item-modal", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<abp-modal [visible]=\"visible()\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      @if (selected()?.id) {\r\n        {{ 'AbpUi::Edit' | abpLocalization }}\r\n      } @else {\r\n        {{ 'AbpUi::New' | abpLocalization }}\r\n      }\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          class=\"nav-tabs\"\r\n          [(activeId)]=\"activeTab\"\r\n          (activeIdChange)=\"onTabChange($event)\"\r\n        >\r\n          <li ngbNavItem=\"url\">\r\n            <a ngbNavLink>{{ 'CmsKit::Url' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <label class=\"form-label\">{{ 'CmsKit::Url' | abpLocalization }}</label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  formControlName=\"url\"\r\n                  [disabled]=\"isPageSelected\"\r\n                  (input)=\"onUrlInput()\"\r\n                />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n          <li ngbNavItem=\"page\">\r\n            <a ngbNavLink>{{ 'CmsKit::Page' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <label class=\"form-label\">{{ 'CmsKit::Page' | abpLocalization }}</label>\r\n                <div\r\n                  class=\"position-relative\"\r\n                  ngbDropdown\r\n                  #pageDropdown=\"ngbDropdown\"\r\n                  display=\"static\"\r\n                  (openChange)=\"onDropdownOpen()\"\r\n                >\r\n                  <button\r\n                    class=\"form-select form-control text-start d-flex align-items-center justify-content-between\"\r\n                    type=\"button\"\r\n                    id=\"pageSelectDropdown\"\r\n                    ngbDropdownToggle\r\n                    [class.text-muted]=\"!selectedPage\"\r\n                  >\r\n                    <span>{{ selectedPage?.title || ('CmsKit::Page' | abpLocalization) }}</span>\r\n                  </button>\r\n                  <div\r\n                    class=\"dropdown-menu w-100\"\r\n                    ngbDropdownMenu\r\n                    aria-labelledby=\"pageSelectDropdown\"\r\n                    style=\"max-height: 300px; overflow-y: auto\"\r\n                  >\r\n                    <div class=\"p-2 border-bottom\">\r\n                      <input\r\n                        type=\"text\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [(ngModel)]=\"pageSearchText\"\r\n                        [ngModelOptions]=\"{ standalone: true }\"\r\n                        (input)=\"onPageSearchChange($any($event.target).value)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        placeholder=\"{{ 'AbpUi::Search' | abpLocalization }}\"\r\n                        autocomplete=\"off\"\r\n                      />\r\n                    </div>\r\n                    @if (filteredPages.length > 0) {\r\n                      @for (page of filteredPages; track page.id) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"dropdown-item\"\r\n                          (click)=\"selectPage(page); pageDropdown.close()\"\r\n                        >\r\n                          {{ page.title }}\r\n                        </button>\r\n                      }\r\n                    } @else if (pageSearchText && pageSearchText.length > 0) {\r\n                      <div class=\"dropdown-item text-muted\">\r\n                        {{ 'No results found' }}\r\n                      </div>\r\n                    } @else if (pages.length === 0) {\r\n                      <div class=\"dropdown-item text-muted\">\r\n                        {{ 'No pages found' }}\r\n                      </div>\r\n                    }\r\n                    @if (selectedPage) {\r\n                      <div class=\"dropdown-divider\"></div>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"dropdown-item text-danger\"\r\n                        (click)=\"clearPageSelection(); pageDropdown.close()\"\r\n                      >\r\n                        {{ 'AbpUi::Clear' | abpLocalization }}\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                  <input [formControlName]=\"'pageId'\" type=\"hidden\" />\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n        <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n        <hr />\r\n        <abp-extensible-form [selectedRecord]=\"selected() || {}\" />\r\n      </form>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button (click)=\"save()\" [disabled]=\"form?.invalid\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", styles: [".dropdown-toggle:after{display:none!important}\n"], dependencies: [{ kind: "component", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: ["selectedRecord"], exportAs: ["abpExtensibleForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i2$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "ngmodule", type: NgbNavModule }, { kind: "directive", type: i3.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i3.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i3.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i3.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i3.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i3.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i3.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i3.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MenuItemModalComponent, isStandalone: true, selector: "abp-menu-item-modal", inputs: { selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visibleChange: "visibleChange" }, ngImport: i0, template: "<abp-modal [visible]=\"visible()\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      @if (selected()?.id) {\r\n        {{ 'AbpUi::Edit' | abpLocalization }}\r\n      } @else {\r\n        {{ 'AbpUi::New' | abpLocalization }}\r\n      }\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          class=\"nav-tabs\"\r\n          [activeId]=\"activeTab()\"\r\n          (activeIdChange)=\"onTabChange($event)\"\r\n        >\r\n          <li ngbNavItem=\"url\">\r\n            <a ngbNavLink>{{ 'CmsKit::Url' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <label class=\"form-label\">{{ 'CmsKit::Url' | abpLocalization }}</label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  formControlName=\"url\"\r\n                  [disabled]=\"isPageSelected\"\r\n                  (input)=\"onUrlInput()\"\r\n                />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n          <li ngbNavItem=\"page\">\r\n            <a ngbNavLink>{{ 'CmsKit::Page' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <label class=\"form-label\">{{ 'CmsKit::Page' | abpLocalization }}</label>\r\n                <div\r\n                  class=\"position-relative\"\r\n                  ngbDropdown\r\n                  #pageDropdown=\"ngbDropdown\"\r\n                  display=\"static\"\r\n                  (openChange)=\"onDropdownOpen()\"\r\n                >\r\n                  <button\r\n                    class=\"form-select form-control text-start d-flex align-items-center justify-content-between\"\r\n                    type=\"button\"\r\n                    id=\"pageSelectDropdown\"\r\n                    ngbDropdownToggle\r\n                    [class.text-muted]=\"!selectedPage()\"\r\n                  >\r\n                    <span>{{ selectedPage()?.title || ('CmsKit::Page' | abpLocalization) }}</span>\r\n                  </button>\r\n                  <div\r\n                    class=\"dropdown-menu w-100\"\r\n                    ngbDropdownMenu\r\n                    aria-labelledby=\"pageSelectDropdown\"\r\n                    style=\"max-height: 300px; overflow-y: auto\"\r\n                  >\r\n                    <div class=\"p-2 border-bottom\">\r\n                      <input\r\n                        type=\"text\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"pageSearchText()\"\r\n                        (ngModelChange)=\"onPageSearchChange($event)\"\r\n                        [ngModelOptions]=\"{ standalone: true }\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        placeholder=\"{{ 'AbpUi::Search' | abpLocalization }}\"\r\n                        autocomplete=\"off\"\r\n                      />\r\n                    </div>\r\n                    @if (filteredPages().length > 0) {\r\n                      @for (page of filteredPages(); track page.id) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"dropdown-item\"\r\n                          (click)=\"selectPage(page); pageDropdown.close()\"\r\n                        >\r\n                          {{ page.title }}\r\n                        </button>\r\n                      }\r\n                    } @else if (pageSearchText() && pageSearchText().length > 0) {\r\n                      <div class=\"dropdown-item text-muted\">\r\n                        {{ 'No results found' }}\r\n                      </div>\r\n                    } @else if (pages().length === 0) {\r\n                      <div class=\"dropdown-item text-muted\">\r\n                        {{ 'No pages found' }}\r\n                      </div>\r\n                    }\r\n                    @if (selectedPage()) {\r\n                      <div class=\"dropdown-divider\"></div>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"dropdown-item text-danger\"\r\n                        (click)=\"clearPageSelection(); pageDropdown.close()\"\r\n                      >\r\n                        {{ 'AbpUi::Clear' | abpLocalization }}\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                  <input [formControlName]=\"'pageId'\" type=\"hidden\" />\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n        <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n        <hr />\r\n        <abp-extensible-form [selectedRecord]=\"selected() || {}\" />\r\n      </form>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button (click)=\"save()\" [disabled]=\"form?.invalid\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", styles: [".dropdown-toggle:after{display:none!important}\n"], dependencies: [{ kind: "component", type: ExtensibleFormComponent, selector: "abp-extensible-form", inputs: ["selectedRecord"], exportAs: ["abpExtensibleForm"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i2$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "component", type: ModalComponent, selector: "abp-modal", inputs: ["visible", "busy", "options", "suppressUnsavedChangesWarning"], outputs: ["visibleChange", "init", "appear", "disappear"] }, { kind: "directive", type: ModalCloseDirective, selector: "[abpClose]" }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "ngmodule", type: NgbNavModule }, { kind: "directive", type: i3.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i3.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i3.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i3.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i3.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i3.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i3.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "ngmodule", type: NgbDropdownModule }, { kind: "directive", type: i3.NgbDropdown, selector: "[ngbDropdown]", inputs: ["autoClose", "dropdownClass", "open", "placement", "popperOptions", "container", "display"], outputs: ["openChange"], exportAs: ["ngbDropdown"] }, { kind: "directive", type: i3.NgbDropdownToggle, selector: "[ngbDropdownToggle]" }, { kind: "directive", type: i3.NgbDropdownMenu, selector: "[ngbDropdownMenu]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuItemModalComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-menu-item-modal', imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-menu-item-modal', imports: [
                         ExtensibleFormComponent,
                         LocalizationPipe,
                         ReactiveFormsModule,
@@ -1621,20 +1598,27 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         NgbNavModule,
                         NgbDropdownModule,
                         FormsModule,
-                    ], template: "<abp-modal [visible]=\"visible()\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      @if (selected()?.id) {\r\n        {{ 'AbpUi::Edit' | abpLocalization }}\r\n      } @else {\r\n        {{ 'AbpUi::New' | abpLocalization }}\r\n      }\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          class=\"nav-tabs\"\r\n          [(activeId)]=\"activeTab\"\r\n          (activeIdChange)=\"onTabChange($event)\"\r\n        >\r\n          <li ngbNavItem=\"url\">\r\n            <a ngbNavLink>{{ 'CmsKit::Url' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <label class=\"form-label\">{{ 'CmsKit::Url' | abpLocalization }}</label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  formControlName=\"url\"\r\n                  [disabled]=\"isPageSelected\"\r\n                  (input)=\"onUrlInput()\"\r\n                />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n          <li ngbNavItem=\"page\">\r\n            <a ngbNavLink>{{ 'CmsKit::Page' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <label class=\"form-label\">{{ 'CmsKit::Page' | abpLocalization }}</label>\r\n                <div\r\n                  class=\"position-relative\"\r\n                  ngbDropdown\r\n                  #pageDropdown=\"ngbDropdown\"\r\n                  display=\"static\"\r\n                  (openChange)=\"onDropdownOpen()\"\r\n                >\r\n                  <button\r\n                    class=\"form-select form-control text-start d-flex align-items-center justify-content-between\"\r\n                    type=\"button\"\r\n                    id=\"pageSelectDropdown\"\r\n                    ngbDropdownToggle\r\n                    [class.text-muted]=\"!selectedPage\"\r\n                  >\r\n                    <span>{{ selectedPage?.title || ('CmsKit::Page' | abpLocalization) }}</span>\r\n                  </button>\r\n                  <div\r\n                    class=\"dropdown-menu w-100\"\r\n                    ngbDropdownMenu\r\n                    aria-labelledby=\"pageSelectDropdown\"\r\n                    style=\"max-height: 300px; overflow-y: auto\"\r\n                  >\r\n                    <div class=\"p-2 border-bottom\">\r\n                      <input\r\n                        type=\"text\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [(ngModel)]=\"pageSearchText\"\r\n                        [ngModelOptions]=\"{ standalone: true }\"\r\n                        (input)=\"onPageSearchChange($any($event.target).value)\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        placeholder=\"{{ 'AbpUi::Search' | abpLocalization }}\"\r\n                        autocomplete=\"off\"\r\n                      />\r\n                    </div>\r\n                    @if (filteredPages.length > 0) {\r\n                      @for (page of filteredPages; track page.id) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"dropdown-item\"\r\n                          (click)=\"selectPage(page); pageDropdown.close()\"\r\n                        >\r\n                          {{ page.title }}\r\n                        </button>\r\n                      }\r\n                    } @else if (pageSearchText && pageSearchText.length > 0) {\r\n                      <div class=\"dropdown-item text-muted\">\r\n                        {{ 'No results found' }}\r\n                      </div>\r\n                    } @else if (pages.length === 0) {\r\n                      <div class=\"dropdown-item text-muted\">\r\n                        {{ 'No pages found' }}\r\n                      </div>\r\n                    }\r\n                    @if (selectedPage) {\r\n                      <div class=\"dropdown-divider\"></div>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"dropdown-item text-danger\"\r\n                        (click)=\"clearPageSelection(); pageDropdown.close()\"\r\n                      >\r\n                        {{ 'AbpUi::Clear' | abpLocalization }}\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                  <input [formControlName]=\"'pageId'\" type=\"hidden\" />\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n        <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n        <hr />\r\n        <abp-extensible-form [selectedRecord]=\"selected() || {}\" />\r\n      </form>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button (click)=\"save()\" [disabled]=\"form?.invalid\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", styles: [".dropdown-toggle:after{display:none!important}\n"] }]
+                    ], template: "<abp-modal [visible]=\"visible()\" (visibleChange)=\"onVisibleChange($event)\">\r\n  <ng-template #abpHeader>\r\n    <h3>\r\n      @if (selected()?.id) {\r\n        {{ 'AbpUi::Edit' | abpLocalization }}\r\n      } @else {\r\n        {{ 'AbpUi::New' | abpLocalization }}\r\n      }\r\n    </h3>\r\n  </ng-template>\r\n\r\n  <ng-template #abpBody>\r\n    @if (form) {\r\n      <form [formGroup]=\"form\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          class=\"nav-tabs\"\r\n          [activeId]=\"activeTab()\"\r\n          (activeIdChange)=\"onTabChange($event)\"\r\n        >\r\n          <li ngbNavItem=\"url\">\r\n            <a ngbNavLink>{{ 'CmsKit::Url' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <label class=\"form-label\">{{ 'CmsKit::Url' | abpLocalization }}</label>\r\n                <input\r\n                  type=\"text\"\r\n                  class=\"form-control\"\r\n                  formControlName=\"url\"\r\n                  [disabled]=\"isPageSelected\"\r\n                  (input)=\"onUrlInput()\"\r\n                />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n          <li ngbNavItem=\"page\">\r\n            <a ngbNavLink>{{ 'CmsKit::Page' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <label class=\"form-label\">{{ 'CmsKit::Page' | abpLocalization }}</label>\r\n                <div\r\n                  class=\"position-relative\"\r\n                  ngbDropdown\r\n                  #pageDropdown=\"ngbDropdown\"\r\n                  display=\"static\"\r\n                  (openChange)=\"onDropdownOpen()\"\r\n                >\r\n                  <button\r\n                    class=\"form-select form-control text-start d-flex align-items-center justify-content-between\"\r\n                    type=\"button\"\r\n                    id=\"pageSelectDropdown\"\r\n                    ngbDropdownToggle\r\n                    [class.text-muted]=\"!selectedPage()\"\r\n                  >\r\n                    <span>{{ selectedPage()?.title || ('CmsKit::Page' | abpLocalization) }}</span>\r\n                  </button>\r\n                  <div\r\n                    class=\"dropdown-menu w-100\"\r\n                    ngbDropdownMenu\r\n                    aria-labelledby=\"pageSelectDropdown\"\r\n                    style=\"max-height: 300px; overflow-y: auto\"\r\n                  >\r\n                    <div class=\"p-2 border-bottom\">\r\n                      <input\r\n                        type=\"text\"\r\n                        class=\"form-control form-control-sm\"\r\n                        [ngModel]=\"pageSearchText()\"\r\n                        (ngModelChange)=\"onPageSearchChange($event)\"\r\n                        [ngModelOptions]=\"{ standalone: true }\"\r\n                        (click)=\"$event.stopPropagation()\"\r\n                        placeholder=\"{{ 'AbpUi::Search' | abpLocalization }}\"\r\n                        autocomplete=\"off\"\r\n                      />\r\n                    </div>\r\n                    @if (filteredPages().length > 0) {\r\n                      @for (page of filteredPages(); track page.id) {\r\n                        <button\r\n                          type=\"button\"\r\n                          class=\"dropdown-item\"\r\n                          (click)=\"selectPage(page); pageDropdown.close()\"\r\n                        >\r\n                          {{ page.title }}\r\n                        </button>\r\n                      }\r\n                    } @else if (pageSearchText() && pageSearchText().length > 0) {\r\n                      <div class=\"dropdown-item text-muted\">\r\n                        {{ 'No results found' }}\r\n                      </div>\r\n                    } @else if (pages().length === 0) {\r\n                      <div class=\"dropdown-item text-muted\">\r\n                        {{ 'No pages found' }}\r\n                      </div>\r\n                    }\r\n                    @if (selectedPage()) {\r\n                      <div class=\"dropdown-divider\"></div>\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"dropdown-item text-danger\"\r\n                        (click)=\"clearPageSelection(); pageDropdown.close()\"\r\n                      >\r\n                        {{ 'AbpUi::Clear' | abpLocalization }}\r\n                      </button>\r\n                    }\r\n                  </div>\r\n                  <input [formControlName]=\"'pageId'\" type=\"hidden\" />\r\n                </div>\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n        <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n        <hr />\r\n        <abp-extensible-form [selectedRecord]=\"selected() || {}\" />\r\n      </form>\r\n    }\r\n  </ng-template>\r\n\r\n  <ng-template #abpFooter>\r\n    <button type=\"button\" class=\"btn btn-outline-primary\" abpClose>\r\n      {{ 'AbpUi::Cancel' | abpLocalization }}\r\n    </button>\r\n    <abp-button (click)=\"save()\" [disabled]=\"form?.invalid\">\r\n      {{ 'AbpUi::Save' | abpLocalization }}\r\n    </abp-button>\r\n  </ng-template>\r\n</abp-modal>\r\n", styles: [".dropdown-toggle:after{display:none!important}\n"] }]
         }], propDecorators: { selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }], visible: [{ type: i0.Input, args: [{ isSignal: true, alias: "visible", required: false }] }], visibleChange: [{ type: i0.Output, args: ["visibleChange"] }] } });
 
 class MenuItemListComponent {
     constructor() {
         this.menuItemService = inject(MenuItemAdminService);
         this.confirmationService = inject(ConfirmationService);
-        this.nodes = [];
-        this.selectedNode = null;
-        this.expandedKeys = [];
-        this.draggable = true;
-        this.isModalVisible = false;
-        this.selectedMenuItem = null;
-        this.parentId = null;
+        this.nodes = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "nodes" }] : /* istanbul ignore next */ []));
+        this.selectedNode = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedNode" }] : /* istanbul ignore next */ []));
+        this.expandedKeys = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "expandedKeys" }] : /* istanbul ignore next */ []));
+        this.draggable = signal(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draggable" }] : /* istanbul ignore next */ []));
+        this.isModalVisible = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "isModalVisible" }] : /* istanbul ignore next */ []));
+        this.selectedMenuItem = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedMenuItem" }] : /* istanbul ignore next */ []));
+        this.parentId = signal(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "parentId" }] : /* istanbul ignore next */ []));
         this.beforeDrop = (event) => {
             return of(true);
         };
@@ -1645,19 +1629,19 @@ class MenuItemListComponent {
     loadMenuItems() {
         this.menuItemService.getList().subscribe(result => {
             if (result.items && result.items.length > 0) {
-                this.nodes = this.buildTreeNodes(result.items);
-                // Expand all nodes by default
-                this.expandedKeys = this.nodes.map(n => n.key);
+                const treeNodes = this.buildTreeNodes(result.items);
+                this.nodes.set(treeNodes);
+                this.expandedKeys.set(treeNodes.map(n => n.key));
             }
             else {
-                this.nodes = [];
+                this.nodes.set([]);
+                this.expandedKeys.set([]);
             }
         });
     }
     buildTreeNodes(items) {
         const nodeMap = new Map();
         const rootNodes = [];
-        // First pass: create all nodes
         items.forEach(item => {
             const node = {
                 key: item.id,
@@ -1668,7 +1652,6 @@ class MenuItemListComponent {
             };
             nodeMap.set(item.id, node);
         });
-        // Second pass: build tree structure
         items.forEach(item => {
             const node = nodeMap.get(item.id);
             if (item.parentId) {
@@ -1685,7 +1668,6 @@ class MenuItemListComponent {
                 rootNodes.push(node);
             }
         });
-        // Sort by order
         const sortByOrder = (nodes) => {
             nodes.sort((a, b) => (a.entity.order || 0) - (b.entity.order || 0));
             nodes.forEach(node => {
@@ -1698,7 +1680,7 @@ class MenuItemListComponent {
         return rootNodes;
     }
     onSelectedNodeChange(node) {
-        this.selectedNode = node?.entity || null;
+        this.selectedNode.set(node?.entity || null);
     }
     onDrop(event) {
         const node = event.dragNode?.origin?.entity;
@@ -1723,36 +1705,30 @@ class MenuItemListComponent {
                     position: position,
                 };
                 this.menuItemService.moveMenuItem(node.id, input).subscribe({
-                    next: () => {
-                        this.loadMenuItems();
-                    },
-                    error: () => {
-                        // Reload to rollback
-                        this.loadMenuItems();
-                    },
+                    next: () => this.loadMenuItems(),
+                    error: () => this.loadMenuItems(),
                 });
             }
             else {
-                // Reload to rollback
                 this.loadMenuItems();
             }
         });
     }
     add() {
-        this.selectedMenuItem = null;
-        this.parentId = null;
-        this.isModalVisible = true;
+        this.selectedMenuItem.set(null);
+        this.parentId.set(null);
+        this.isModalVisible.set(true);
     }
     addSubMenuItem(parentId) {
-        this.selectedMenuItem = null;
-        this.parentId = parentId || null;
-        this.isModalVisible = true;
+        this.selectedMenuItem.set(null);
+        this.parentId.set(parentId || null);
+        this.isModalVisible.set(true);
     }
     edit(id) {
         this.menuItemService.get(id).subscribe(menuItem => {
-            this.selectedMenuItem = menuItem;
-            this.parentId = null;
-            this.isModalVisible = true;
+            this.selectedMenuItem.set(menuItem);
+            this.parentId.set(null);
+            this.isModalVisible.set(true);
         });
     }
     onVisibleModalChange(visibilityChange) {
@@ -1762,9 +1738,9 @@ class MenuItemListComponent {
         if (visibilityChange.refresh) {
             this.loadMenuItems();
         }
-        this.selectedMenuItem = null;
-        this.parentId = null;
-        this.isModalVisible = false;
+        this.selectedMenuItem.set(null);
+        this.parentId.set(null);
+        this.isModalVisible.set(false);
     }
     delete(id, displayName) {
         this.confirmationService
@@ -1776,25 +1752,23 @@ class MenuItemListComponent {
             .subscribe((status) => {
             if (status === Confirmation.Status.confirm) {
                 this.menuItemService.delete(id).subscribe({
-                    next: () => {
-                        this.loadMenuItems();
-                    },
+                    next: () => this.loadMenuItems(),
                 });
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.17", type: MenuItemListComponent, isStandalone: true, selector: "abp-menu-item-list", providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: MenuItemListComponent, isStandalone: true, selector: "abp-menu-item-list", providers: [
             ListService,
             {
                 provide: EXTENSIONS_IDENTIFIER,
                 useValue: eCmsKitAdminComponents.Menus,
             },
-        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::MenuItems' | abpLocalization\" [toolbar]=\"nodes\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (nodes.length > 0) {\r\n        <abp-tree\r\n          [nodes]=\"nodes\"\r\n          [draggable]=\"draggable\"\r\n          [expandedKeys]=\"expandedKeys\"\r\n          [selectedNode]=\"selectedNode\"\r\n          (selectedNodeChange)=\"onSelectedNodeChange($event)\"\r\n          [beforeDrop]=\"beforeDrop\"\r\n          (dropOver)=\"onDrop($event)\"\r\n        >\r\n          <ng-template #menu let-node>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"edit(node.key)\"\r\n              *abpPermission=\"'CmsKit.Menus.Update'\"\r\n            >\r\n              <i class=\"fa fa-pencil me-2\"></i>\r\n              {{ 'AbpUi::Edit' | abpLocalization }}\r\n            </button>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"addSubMenuItem(node.key)\"\r\n              *abpPermission=\"'CmsKit.Menus.Create'\"\r\n            >\r\n              <i class=\"fa fa-plus me-2\"></i>\r\n              {{ 'CmsKit::AddSubMenuItem' | abpLocalization }}\r\n            </button>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"delete(node.key, node.title)\"\r\n              *abpPermission=\"'CmsKit.Menus.Delete'\"\r\n            >\r\n              <i class=\"fa fa-remove me-2\"></i>\r\n              {{ 'AbpUi::Delete' | abpLocalization }}\r\n            </button>\r\n          </ng-template>\r\n        </abp-tree>\r\n      } @else {\r\n        <div class=\"text-muted text-center\">\r\n          {{ 'CmsKit::NoMenuItems' | abpLocalization }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n\r\n@if (isModalVisible) {\r\n  <abp-menu-item-modal\r\n    [selected]=\"selectedMenuItem || undefined\"\r\n    [parentId]=\"parentId\"\r\n    (visibleChange)=\"onVisibleModalChange($event)\"\r\n  />\r\n}\r\n", dependencies: [{ kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "component", type: TreeComponent, selector: "abp-tree", inputs: ["noAnimation", "draggable", "checkable", "checkStrictly", "checkedKeys", "nodes", "expandedKeys", "selectedNode", "changeCheckboxWithNode", "isNodeSelected", "beforeDrop"], outputs: ["checkedKeysChange", "expandedKeysChange", "selectedNodeChange", "dropOver", "nzExpandChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: MenuItemModalComponent, selector: "abp-menu-item-modal", inputs: ["selected", "parentId", "visible"], outputs: ["visibleChange"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+        ], ngImport: i0, template: "<abp-page [title]=\"'CmsKit::MenuItems' | abpLocalization\" [toolbar]=\"nodes()\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (nodes().length > 0) {\r\n        <abp-tree\r\n          [nodes]=\"nodes()\"\r\n          [draggable]=\"draggable()\"\r\n          [expandedKeys]=\"expandedKeys()\"\r\n          [selectedNode]=\"selectedNode()\"\r\n          (selectedNodeChange)=\"onSelectedNodeChange($event)\"\r\n          [beforeDrop]=\"beforeDrop\"\r\n          (dropOver)=\"onDrop($event)\"\r\n        >\r\n          <ng-template #menu let-node>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"edit(node.key)\"\r\n              *abpPermission=\"'CmsKit.Menus.Update'\"\r\n            >\r\n              <i class=\"fa fa-pencil me-2\"></i>\r\n              {{ 'AbpUi::Edit' | abpLocalization }}\r\n            </button>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"addSubMenuItem(node.key)\"\r\n              *abpPermission=\"'CmsKit.Menus.Create'\"\r\n            >\r\n              <i class=\"fa fa-plus me-2\"></i>\r\n              {{ 'CmsKit::AddSubMenuItem' | abpLocalization }}\r\n            </button>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"delete(node.key, node.title)\"\r\n              *abpPermission=\"'CmsKit.Menus.Delete'\"\r\n            >\r\n              <i class=\"fa fa-remove me-2\"></i>\r\n              {{ 'AbpUi::Delete' | abpLocalization }}\r\n            </button>\r\n          </ng-template>\r\n        </abp-tree>\r\n      } @else {\r\n        <div class=\"text-muted text-center\">\r\n          {{ 'CmsKit::NoMenuItems' | abpLocalization }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n\r\n@if (isModalVisible()) {\r\n  <abp-menu-item-modal\r\n    [selected]=\"selectedMenuItem() || undefined\"\r\n    [parentId]=\"parentId()\"\r\n    (visibleChange)=\"onVisibleModalChange($event)\"\r\n  />\r\n}\r\n", dependencies: [{ kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "component", type: TreeComponent, selector: "abp-tree", inputs: ["noAnimation", "draggable", "checkable", "checkStrictly", "checkedKeys", "nodes", "expandedKeys", "selectedNode", "changeCheckboxWithNode", "isNodeSelected", "beforeDrop"], outputs: ["checkedKeysChange", "expandedKeysChange", "selectedNodeChange", "dropOver", "nzExpandChange"] }, { kind: "ngmodule", type: CommonModule }, { kind: "component", type: MenuItemModalComponent, selector: "abp-menu-item-modal", inputs: ["selected", "parentId", "visible"], outputs: ["visibleChange"] }, { kind: "directive", type: PermissionDirective, selector: "[abpPermission]", inputs: ["abpPermission", "abpPermissionRunChangeDetection"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: MenuItemListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: MenuItemListComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-menu-item-list', imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-menu-item-list', imports: [
                         PageComponent,
                         TreeComponent,
                         LocalizationPipe,
@@ -1807,7 +1781,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                             provide: EXTENSIONS_IDENTIFIER,
                             useValue: eCmsKitAdminComponents.Menus,
                         },
-                    ], template: "<abp-page [title]=\"'CmsKit::MenuItems' | abpLocalization\" [toolbar]=\"nodes\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (nodes.length > 0) {\r\n        <abp-tree\r\n          [nodes]=\"nodes\"\r\n          [draggable]=\"draggable\"\r\n          [expandedKeys]=\"expandedKeys\"\r\n          [selectedNode]=\"selectedNode\"\r\n          (selectedNodeChange)=\"onSelectedNodeChange($event)\"\r\n          [beforeDrop]=\"beforeDrop\"\r\n          (dropOver)=\"onDrop($event)\"\r\n        >\r\n          <ng-template #menu let-node>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"edit(node.key)\"\r\n              *abpPermission=\"'CmsKit.Menus.Update'\"\r\n            >\r\n              <i class=\"fa fa-pencil me-2\"></i>\r\n              {{ 'AbpUi::Edit' | abpLocalization }}\r\n            </button>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"addSubMenuItem(node.key)\"\r\n              *abpPermission=\"'CmsKit.Menus.Create'\"\r\n            >\r\n              <i class=\"fa fa-plus me-2\"></i>\r\n              {{ 'CmsKit::AddSubMenuItem' | abpLocalization }}\r\n            </button>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"delete(node.key, node.title)\"\r\n              *abpPermission=\"'CmsKit.Menus.Delete'\"\r\n            >\r\n              <i class=\"fa fa-remove me-2\"></i>\r\n              {{ 'AbpUi::Delete' | abpLocalization }}\r\n            </button>\r\n          </ng-template>\r\n        </abp-tree>\r\n      } @else {\r\n        <div class=\"text-muted text-center\">\r\n          {{ 'CmsKit::NoMenuItems' | abpLocalization }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n\r\n@if (isModalVisible) {\r\n  <abp-menu-item-modal\r\n    [selected]=\"selectedMenuItem || undefined\"\r\n    [parentId]=\"parentId\"\r\n    (visibleChange)=\"onVisibleModalChange($event)\"\r\n  />\r\n}\r\n" }]
+                    ], template: "<abp-page [title]=\"'CmsKit::MenuItems' | abpLocalization\" [toolbar]=\"nodes()\">\r\n  <div class=\"card\">\r\n    <div class=\"card-body\">\r\n      @if (nodes().length > 0) {\r\n        <abp-tree\r\n          [nodes]=\"nodes()\"\r\n          [draggable]=\"draggable()\"\r\n          [expandedKeys]=\"expandedKeys()\"\r\n          [selectedNode]=\"selectedNode()\"\r\n          (selectedNodeChange)=\"onSelectedNodeChange($event)\"\r\n          [beforeDrop]=\"beforeDrop\"\r\n          (dropOver)=\"onDrop($event)\"\r\n        >\r\n          <ng-template #menu let-node>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"edit(node.key)\"\r\n              *abpPermission=\"'CmsKit.Menus.Update'\"\r\n            >\r\n              <i class=\"fa fa-pencil me-2\"></i>\r\n              {{ 'AbpUi::Edit' | abpLocalization }}\r\n            </button>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"addSubMenuItem(node.key)\"\r\n              *abpPermission=\"'CmsKit.Menus.Create'\"\r\n            >\r\n              <i class=\"fa fa-plus me-2\"></i>\r\n              {{ 'CmsKit::AddSubMenuItem' | abpLocalization }}\r\n            </button>\r\n            <button\r\n              class=\"dropdown-item\"\r\n              (click)=\"delete(node.key, node.title)\"\r\n              *abpPermission=\"'CmsKit.Menus.Delete'\"\r\n            >\r\n              <i class=\"fa fa-remove me-2\"></i>\r\n              {{ 'AbpUi::Delete' | abpLocalization }}\r\n            </button>\r\n          </ng-template>\r\n        </abp-tree>\r\n      } @else {\r\n        <div class=\"text-muted text-center\">\r\n          {{ 'CmsKit::NoMenuItems' | abpLocalization }}\r\n        </div>\r\n      }\r\n    </div>\r\n  </div>\r\n</abp-page>\r\n\r\n@if (isModalVisible()) {\r\n  <abp-menu-item-modal\r\n    [selected]=\"selectedMenuItem() || undefined\"\r\n    [parentId]=\"parentId()\"\r\n    (visibleChange)=\"onVisibleModalChange($event)\"\r\n  />\r\n}\r\n" }]
         }] });
 
 class CmsSettingsComponent {
@@ -1815,6 +1789,8 @@ class CmsSettingsComponent {
         this.commentAdminService = inject(CommentAdminService);
         this.configState = inject(ConfigStateService);
         this.toaster = inject(ToasterService);
+        this.loading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
         this.commentApprovalControl = new FormControl(false);
     }
     ngOnInit() {
@@ -1822,17 +1798,19 @@ class CmsSettingsComponent {
         this.commentApprovalControl.setValue(isCommentApprovalEnabled);
     }
     submit() {
+        this.loading.set(true);
         this.commentAdminService
             .updateSettings({ commentRequireApprovement: this.commentApprovalControl.value })
             .pipe(finalize(() => {
+            this.loading.set(false);
             this.configState.refreshAppState().subscribe();
         }))
             .subscribe(() => this.toaster.success('AbpUi::SavedSuccessfully', null));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CmsSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: CmsSettingsComponent, isStandalone: true, selector: "abp-cms-settings", ngImport: i0, template: "<div id=\"CmsSettingsForm\" class=\"row\">\r\n  <div class=\"col-md-12\">\r\n    <ul ngbNav #nav=\"ngbNav\" class=\"nav-tabs\">\r\n      <!-- Comments -->\r\n      <li ngbNavItem>\r\n        <a ngbNavLink>{{ 'CmsKit::CmsKit:Comment' | abpLocalization }}</a>\r\n        <ng-template ngbNavContent>\r\n          <div class=\"abp-md-form\">\r\n            <div (keyup.enter)=\"submit()\">\r\n              <div class=\"mt-3\">\r\n                <div class=\"form-check mb-2\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    [formControl]=\"commentApprovalControl\"\r\n                    type=\"checkbox\"\r\n                    id=\"EnableCommentApproval\"\r\n                    [checked]=\"commentApprovalControl.value\"\r\n                    (input)=\"commentApprovalControl.setValue($event.target.checked)\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"EnableCommentApproval\">\r\n                    {{ 'CmsKit::CmsKitCommentOptions:RequireApprovement' | abpLocalization }}\r\n                  </label>\r\n                  <br />\r\n                  <small class=\"form-text text-muted\">{{\r\n                    'CmsKit::CmsKitCommentOptions:RequireApprovementDescription' | abpLocalization\r\n                  }}</small>\r\n                </div>\r\n              </div>\r\n              <hr class=\"my-3\" />\r\n              <div>\r\n                <abp-button (click)=\"submit()\" iconClass=\"fa fa-save\" [loading]=\"loading\">\r\n                  {{ 'AbpAccount::Save' | abpLocalization }}\r\n                </abp-button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </li>\r\n    </ul>\r\n    <div [ngbNavOutlet]=\"nav\"></div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "directive", type: NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "component", type: NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CmsSettingsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: CmsSettingsComponent, isStandalone: true, selector: "abp-cms-settings", ngImport: i0, template: "<div id=\"CmsSettingsForm\" class=\"row\">\r\n  <div class=\"col-md-12\">\r\n    <ul ngbNav #nav=\"ngbNav\" class=\"nav-tabs\">\r\n      <!-- Comments -->\r\n      <li ngbNavItem>\r\n        <a ngbNavLink>{{ 'CmsKit::CmsKit:Comment' | abpLocalization }}</a>\r\n        <ng-template ngbNavContent>\r\n          <div class=\"abp-md-form\">\r\n            <div (keyup.enter)=\"submit()\">\r\n              <div class=\"mt-3\">\r\n                <div class=\"form-check mb-2\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    [formControl]=\"commentApprovalControl\"\r\n                    type=\"checkbox\"\r\n                    id=\"EnableCommentApproval\"\r\n                    [checked]=\"commentApprovalControl.value\"\r\n                    (input)=\"commentApprovalControl.setValue($event.target.checked)\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"EnableCommentApproval\">\r\n                    {{ 'CmsKit::CmsKitCommentOptions:RequireApprovement' | abpLocalization }}\r\n                  </label>\r\n                  <br />\r\n                  <small class=\"form-text text-muted\">{{\r\n                    'CmsKit::CmsKitCommentOptions:RequireApprovementDescription' | abpLocalization\r\n                  }}</small>\r\n                </div>\r\n              </div>\r\n              <hr class=\"my-3\" />\r\n              <div>\r\n                <abp-button (click)=\"submit()\" iconClass=\"fa fa-save\" [loading]=\"loading()\">\r\n                  {{ 'AbpAccount::Save' | abpLocalization }}\r\n                </abp-button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </li>\r\n    </ul>\r\n    <div [ngbNavOutlet]=\"nav\"></div>\r\n  </div>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "directive", type: NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "component", type: NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox]:not([ngNoCva])[formControlName],input[type=checkbox]:not([ngNoCva])[formControl],input[type=checkbox]:not([ngNoCva])[ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: CmsSettingsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: CmsSettingsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-cms-settings', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
                         NgbNav,
@@ -1845,7 +1823,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         LocalizationPipe,
                         ButtonComponent,
                         ReactiveFormsModule,
-                    ], template: "<div id=\"CmsSettingsForm\" class=\"row\">\r\n  <div class=\"col-md-12\">\r\n    <ul ngbNav #nav=\"ngbNav\" class=\"nav-tabs\">\r\n      <!-- Comments -->\r\n      <li ngbNavItem>\r\n        <a ngbNavLink>{{ 'CmsKit::CmsKit:Comment' | abpLocalization }}</a>\r\n        <ng-template ngbNavContent>\r\n          <div class=\"abp-md-form\">\r\n            <div (keyup.enter)=\"submit()\">\r\n              <div class=\"mt-3\">\r\n                <div class=\"form-check mb-2\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    [formControl]=\"commentApprovalControl\"\r\n                    type=\"checkbox\"\r\n                    id=\"EnableCommentApproval\"\r\n                    [checked]=\"commentApprovalControl.value\"\r\n                    (input)=\"commentApprovalControl.setValue($event.target.checked)\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"EnableCommentApproval\">\r\n                    {{ 'CmsKit::CmsKitCommentOptions:RequireApprovement' | abpLocalization }}\r\n                  </label>\r\n                  <br />\r\n                  <small class=\"form-text text-muted\">{{\r\n                    'CmsKit::CmsKitCommentOptions:RequireApprovementDescription' | abpLocalization\r\n                  }}</small>\r\n                </div>\r\n              </div>\r\n              <hr class=\"my-3\" />\r\n              <div>\r\n                <abp-button (click)=\"submit()\" iconClass=\"fa fa-save\" [loading]=\"loading\">\r\n                  {{ 'AbpAccount::Save' | abpLocalization }}\r\n                </abp-button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </li>\r\n    </ul>\r\n    <div [ngbNavOutlet]=\"nav\"></div>\r\n  </div>\r\n</div>\r\n" }]
+                    ], template: "<div id=\"CmsSettingsForm\" class=\"row\">\r\n  <div class=\"col-md-12\">\r\n    <ul ngbNav #nav=\"ngbNav\" class=\"nav-tabs\">\r\n      <!-- Comments -->\r\n      <li ngbNavItem>\r\n        <a ngbNavLink>{{ 'CmsKit::CmsKit:Comment' | abpLocalization }}</a>\r\n        <ng-template ngbNavContent>\r\n          <div class=\"abp-md-form\">\r\n            <div (keyup.enter)=\"submit()\">\r\n              <div class=\"mt-3\">\r\n                <div class=\"form-check mb-2\">\r\n                  <input\r\n                    class=\"form-check-input\"\r\n                    [formControl]=\"commentApprovalControl\"\r\n                    type=\"checkbox\"\r\n                    id=\"EnableCommentApproval\"\r\n                    [checked]=\"commentApprovalControl.value\"\r\n                    (input)=\"commentApprovalControl.setValue($event.target.checked)\"\r\n                  />\r\n                  <label class=\"form-check-label\" for=\"EnableCommentApproval\">\r\n                    {{ 'CmsKit::CmsKitCommentOptions:RequireApprovement' | abpLocalization }}\r\n                  </label>\r\n                  <br />\r\n                  <small class=\"form-text text-muted\">{{\r\n                    'CmsKit::CmsKitCommentOptions:RequireApprovementDescription' | abpLocalization\r\n                  }}</small>\r\n                </div>\r\n              </div>\r\n              <hr class=\"my-3\" />\r\n              <div>\r\n                <abp-button (click)=\"submit()\" iconClass=\"fa fa-save\" [loading]=\"loading()\">\r\n                  {{ 'AbpAccount::Save' | abpLocalization }}\r\n                </abp-button>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </ng-template>\r\n      </li>\r\n    </ul>\r\n    <div [ngbNavOutlet]=\"nav\"></div>\r\n  </div>\r\n</div>\r\n" }]
         }] });
 
 class GlobalResourcesComponent {
@@ -1853,7 +1831,8 @@ class GlobalResourcesComponent {
         this.globalResourceService = inject(GlobalResourceAdminService);
         this.toasterService = inject(ToasterService);
         this.destroyRef = inject(DestroyRef);
-        this.activeTab = 'script';
+        this.activeTab = signal('script', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "activeTab" }] : /* istanbul ignore next */ []));
     }
     ngOnInit() {
         this.buildForm();
@@ -1882,7 +1861,7 @@ class GlobalResourcesComponent {
         });
     }
     onTabChange(activeId) {
-        this.activeTab = activeId;
+        this.activeTab.set(activeId);
     }
     save() {
         if (!this.form.valid) {
@@ -1905,12 +1884,12 @@ class GlobalResourcesComponent {
             },
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GlobalResourcesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.17", type: GlobalResourcesComponent, isStandalone: true, selector: "abp-global-resources", ngImport: i0, template: "<abp-page [title]=\"'CmsKit::GlobalResources' | abpLocalization\">\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n    <div class=\"card\">\r\n      <div class=\"card-body\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          class=\"nav-tabs\"\r\n          [(activeId)]=\"activeTab\"\r\n          (activeIdChange)=\"onTabChange($event)\"\r\n        >\r\n          <li ngbNavItem=\"script\">\r\n            <a ngbNavLink>{{ 'CmsKit::Script' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <abp-codemirror-editor formControlName=\"script\" />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n          <li ngbNavItem=\"style\">\r\n            <a ngbNavLink>{{ 'CmsKit::Style' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <abp-codemirror-editor formControlName=\"style\" />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n        <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n      </div>\r\n      <div class=\"card-footer\">\r\n        <!-- *abpPermission=\"'CmsKit.GlobalResources.Update'\" -->\r\n        <abp-button type=\"submit\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n          {{ 'AbpUi::Save' | abpLocalization }}\r\n        </abp-button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</abp-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i2$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "ngmodule", type: NgbNavModule }, { kind: "directive", type: i3.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i3.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i3.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i3.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i3.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i3.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i3.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: CodeMirrorEditorComponent, selector: "abp-codemirror-editor" }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GlobalResourcesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: GlobalResourcesComponent, isStandalone: true, selector: "abp-global-resources", ngImport: i0, template: "<abp-page [title]=\"'CmsKit::GlobalResources' | abpLocalization\">\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n    <div class=\"card\">\r\n      <div class=\"card-body\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          class=\"nav-tabs\"\r\n          [activeId]=\"activeTab()\"\r\n          (activeIdChange)=\"onTabChange($event)\"\r\n        >\r\n          <li ngbNavItem=\"script\">\r\n            <a ngbNavLink>{{ 'CmsKit::Script' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <abp-codemirror-editor formControlName=\"script\" />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n          <li ngbNavItem=\"style\">\r\n            <a ngbNavLink>{{ 'CmsKit::Style' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <abp-codemirror-editor formControlName=\"style\" />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n        <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n      </div>\r\n      <div class=\"card-footer\">\r\n        <!-- *abpPermission=\"'CmsKit.GlobalResources.Update'\" -->\r\n        <abp-button type=\"submit\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n          {{ 'AbpUi::Save' | abpLocalization }}\r\n        </abp-button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</abp-page>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2$1.ValidationGroupDirective, selector: "[formGroup],[formGroupName]", exportAs: ["validationGroup"] }, { kind: "directive", type: i2$1.ValidationDirective, selector: "[formControl],[formControlName]", exportAs: ["validationDirective"] }, { kind: "ngmodule", type: NgbNavModule }, { kind: "directive", type: i3.NgbNavContent, selector: "ng-template[ngbNavContent]" }, { kind: "directive", type: i3.NgbNav, selector: "[ngbNav]", inputs: ["activeId", "animation", "destroyOnHide", "orientation", "roles", "keyboard"], outputs: ["activeIdChange", "shown", "hidden", "navChange"], exportAs: ["ngbNav"] }, { kind: "directive", type: i3.NgbNavItem, selector: "[ngbNavItem]", inputs: ["destroyOnHide", "disabled", "domId", "ngbNavItem"], outputs: ["shown", "hidden"], exportAs: ["ngbNavItem"] }, { kind: "directive", type: i3.NgbNavItemRole, selector: "[ngbNavItem]:not(ng-container)" }, { kind: "directive", type: i3.NgbNavLink, selector: "a[ngbNavLink]" }, { kind: "directive", type: i3.NgbNavLinkBase, selector: "[ngbNavLink]" }, { kind: "component", type: i3.NgbNavOutlet, selector: "[ngbNavOutlet]", inputs: ["paneRole", "ngbNavOutlet"] }, { kind: "component", type: CodeMirrorEditorComponent, selector: "abp-codemirror-editor" }, { kind: "component", type: PageComponent, selector: "abp-page", inputs: ["title", "toolbar", "breadcrumb"] }, { kind: "component", type: ButtonComponent, selector: "abp-button", inputs: ["buttonId", "buttonClass", "buttonType", "formName", "iconClass", "loading", "disabled", "attributes"], outputs: ["click", "focus", "blur", "abpClick", "abpFocus", "abpBlur"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImport: i0, type: GlobalResourcesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: GlobalResourcesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-global-resources', imports: [
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'abp-global-resources', imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         NgxValidateCoreModule,
@@ -1919,7 +1898,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.17", ngImpo
                         LocalizationPipe,
                         PageComponent,
                         ButtonComponent,
-                    ], template: "<abp-page [title]=\"'CmsKit::GlobalResources' | abpLocalization\">\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"save()\" validateOnSubmit>\r\n    <div class=\"card\">\r\n      <div class=\"card-body\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          class=\"nav-tabs\"\r\n          [(activeId)]=\"activeTab\"\r\n          (activeIdChange)=\"onTabChange($event)\"\r\n        >\r\n          <li ngbNavItem=\"script\">\r\n            <a ngbNavLink>{{ 'CmsKit::Script' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <abp-codemirror-editor formControlName=\"script\" />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n          <li ngbNavItem=\"style\">\r\n            <a ngbNavLink>{{ 'CmsKit::Style' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <abp-codemirror-editor formControlName=\"style\" />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n        <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n      </div>\r\n      <div class=\"card-footer\">\r\n        <!-- *abpPermission=\"'CmsKit.GlobalResources.Update'\" -->\r\n        <abp-button type=\"submit\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n          {{ 'AbpUi::Save' | abpLocalization }}\r\n        </abp-button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</abp-page>\r\n" }]
+                    ], template: "<abp-page [title]=\"'CmsKit::GlobalResources' | abpLocalization\">\r\n  <form [formGroup]=\"form\" (ngSubmit)=\"save()\" [validateOnSubmit]=\"true\">\r\n    <div class=\"card\">\r\n      <div class=\"card-body\">\r\n        <ul\r\n          ngbNav\r\n          #nav=\"ngbNav\"\r\n          class=\"nav-tabs\"\r\n          [activeId]=\"activeTab()\"\r\n          (activeIdChange)=\"onTabChange($event)\"\r\n        >\r\n          <li ngbNavItem=\"script\">\r\n            <a ngbNavLink>{{ 'CmsKit::Script' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <abp-codemirror-editor formControlName=\"script\" />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n          <li ngbNavItem=\"style\">\r\n            <a ngbNavLink>{{ 'CmsKit::Style' | abpLocalization }}</a>\r\n            <ng-template ngbNavContent>\r\n              <div class=\"mt-3\">\r\n                <abp-codemirror-editor formControlName=\"style\" />\r\n              </div>\r\n            </ng-template>\r\n          </li>\r\n        </ul>\r\n        <div class=\"mt-2 fade-in-top\" [ngbNavOutlet]=\"nav\"></div>\r\n      </div>\r\n      <div class=\"card-footer\">\r\n        <!-- *abpPermission=\"'CmsKit.GlobalResources.Update'\" -->\r\n        <abp-button type=\"submit\" [disabled]=\"form?.invalid\" (click)=\"save()\">\r\n          {{ 'AbpUi::Save' | abpLocalization }}\r\n        </abp-button>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</abp-page>\r\n" }]
         }] });
 
 const DEFAULT_COMMENT_ENTITY_ACTIONS = EntityAction.createMany([