@abp/ng.theme.shared 10.1.0 → 10.2.0-rc.1

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

@@ -1,7 +1,6 @@
 import * as i0 from '@angular/core';
-import { Injectable, inject, LOCALE_ID, Input, Component, ChangeDetectorRef, ChangeDetectionStrategy, Renderer2, EventEmitter, ViewChild, Output, InjectionToken, DestroyRef, createComponent, ViewEncapsulation, HostListener, RendererFactory2, Injector, EnvironmentInjector, ApplicationRef, model, input, viewChild, contentChild, output, effect, Directive, forwardRef, HostBinding, NgModule, ElementRef, ComponentFactoryResolver, PLATFORM_ID, ViewContainerRef, TemplateRef, provideAppInitializer, makeEnvironmentProviders } from '@angular/core';
-import * as i1 from '@angular/common';
-import { formatDate, NgTemplateOutlet, CommonModule, NgClass, AsyncPipe, DOCUMENT, NgStyle, isPlatformBrowser } from '@angular/common';
+import { Injectable, inject, LOCALE_ID, input, Component, ChangeDetectorRef, ChangeDetectionStrategy, Renderer2, signal, computed, output, viewChild, InjectionToken, DestroyRef, createComponent, effect, ViewEncapsulation, RendererFactory2, Injector, EnvironmentInjector, ApplicationRef, model, contentChild, HostListener, Directive, forwardRef, HostBinding, NgModule, ElementRef, ViewContainerRef, PLATFORM_ID, TemplateRef, provideAppInitializer, makeEnvironmentProviders } from '@angular/core';
+import { formatDate, NgTemplateOutlet, AsyncPipe, DOCUMENT, isPlatformBrowser } from '@angular/common';
 import { NgbDateAdapter, NgbDatepickerI18n, NgbTimeAdapter, NgbTimepickerI18n, NgbModal, NgbTooltip, NgbInputDatepickerConfig, NgbTypeaheadConfig, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
 import { ConfigStateService, LocalizationPipe, RoutesService, SubscriptionService, RouterEvents, getRoutePath, StopPropagationDirective, HttpWaitService, RouterWaitService, ContentProjectionService, PROJECTION_STRATEGY, SORT_COMPARE_FUNC, InternalStore, AuthService, SessionStateService, DomInsertionService, CONTENT_STRATEGY, uuid, AbstractNgModelComponent, InternetConnectionService, LocalizationService, getLocaleDirection, HttpErrorReporterService, TENANT_NOT_FOUND_BY_NAME } from '@abp/ng.core';
 import { animation, style, animate, keyframes, trigger, state, transition, useAnimation, query } from '@angular/animations';
@@ -10,7 +9,7 @@ import { startWith, map, debounceTime, filter, takeUntil, take, switchMap } from
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent, Subscription, combineLatest, timer, ReplaySubject, Subject, BehaviorSubject, distinctUntilChanged, of, from, Observable, EMPTY } from 'rxjs';
 import { HttpErrorResponse } from '@angular/common/http';
-import * as i1$1 from '@angular/forms';
+import * as i1 from '@angular/forms';
 import { FormsModule, NG_VALUE_ACCESSOR, NgControl, Validators } from '@angular/forms';
 import * as i2 from '@ngx-validate/core';
 import { NgxValidateCoreModule, normalizeDiacritics, VALIDATION_BLUEPRINTS, defaultMapErrorsFn, VALIDATION_MAP_ERRORS_FN, VALIDATION_VALIDATE_ON_SUBMIT } from '@ngx-validate/core';
@@ -321,17 +320,15 @@ const toastInOut = trigger('toastInOut', [
 
 class BreadcrumbItemsComponent {
     constructor() {
-        this.items = [];
+        this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: BreadcrumbItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: BreadcrumbItemsComponent, isStandalone: true, selector: "abp-breadcrumb-items", inputs: { items: "items" }, ngImport: i0, template: "@if (items.length) {\r\n  <ol class=\"breadcrumb\">\r\n    <li class=\"breadcrumb-item\">\r\n      <a routerLink=\"/\"><i class=\"fa fa-home\" aria-hidden=\"true\"></i> </a>\r\n    </li>\r\n    @for (item of items; track $index; let last = $last) {\r\n      <li class=\"breadcrumb-item\" [class.active]=\"last\" aria-current=\"page\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"item.path ? linkTemplate : textTemplate; context: { $implicit: item }\"\r\n        ></ng-container>\r\n      </li>\r\n    }\r\n  </ol>\r\n}\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.path\"> {{ item.name | abpLocalization }}</a>\r\n</ng-template>\r\n\r\n<ng-template #textTemplate let-item>\r\n  {{ item.name | abpLocalization }}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: BreadcrumbItemsComponent, isStandalone: true, selector: "abp-breadcrumb-items", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (items().length) {\r\n  <ol class=\"breadcrumb\">\r\n    <li class=\"breadcrumb-item\">\r\n      <a routerLink=\"/\"><i class=\"fa fa-home\" aria-hidden=\"true\"></i> </a>\r\n    </li>\r\n    @for (item of items(); track $index; let last = $last) {\r\n      <li class=\"breadcrumb-item\" [class.active]=\"last\" aria-current=\"page\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"item.path ? linkTemplate : textTemplate; context: { $implicit: item }\"\r\n        ></ng-container>\r\n      </li>\r\n    }\r\n  </ol>\r\n}\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.path\"> {{ item.name | abpLocalization }}</a>\r\n</ng-template>\r\n\r\n<ng-template #textTemplate let-item>\r\n  {{ item.name | abpLocalization }}\r\n</ng-template>\r\n", dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: BreadcrumbItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-breadcrumb-items', imports: [NgTemplateOutlet, RouterLink, LocalizationPipe], template: "@if (items.length) {\r\n  <ol class=\"breadcrumb\">\r\n    <li class=\"breadcrumb-item\">\r\n      <a routerLink=\"/\"><i class=\"fa fa-home\" aria-hidden=\"true\"></i> </a>\r\n    </li>\r\n    @for (item of items; track $index; let last = $last) {\r\n      <li class=\"breadcrumb-item\" [class.active]=\"last\" aria-current=\"page\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"item.path ? linkTemplate : textTemplate; context: { $implicit: item }\"\r\n        ></ng-container>\r\n      </li>\r\n    }\r\n  </ol>\r\n}\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.path\"> {{ item.name | abpLocalization }}</a>\r\n</ng-template>\r\n\r\n<ng-template #textTemplate let-item>\r\n  {{ item.name | abpLocalization }}\r\n</ng-template>\r\n" }]
-        }], propDecorators: { items: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'abp-breadcrumb-items', imports: [NgTemplateOutlet, RouterLink, LocalizationPipe], template: "@if (items().length) {\r\n  <ol class=\"breadcrumb\">\r\n    <li class=\"breadcrumb-item\">\r\n      <a routerLink=\"/\"><i class=\"fa fa-home\" aria-hidden=\"true\"></i> </a>\r\n    </li>\r\n    @for (item of items(); track $index; let last = $last) {\r\n      <li class=\"breadcrumb-item\" [class.active]=\"last\" aria-current=\"page\">\r\n        <ng-container\r\n          *ngTemplateOutlet=\"item.path ? linkTemplate : textTemplate; context: { $implicit: item }\"\r\n        ></ng-container>\r\n      </li>\r\n    }\r\n  </ol>\r\n}\r\n\r\n<ng-template #linkTemplate let-item>\r\n  <a [routerLink]=\"item.path\"> {{ item.name | abpLocalization }}</a>\r\n</ng-template>\r\n\r\n<ng-template #textTemplate let-item>\r\n  {{ item.name | abpLocalization }}\r\n</ng-template>\r\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
 
 class BreadcrumbComponent {
     constructor() {
@@ -372,47 +369,62 @@ function isAdministration(route) {
 class ButtonComponent {
     constructor() {
         this.renderer = inject(Renderer2);
-        this.buttonId = '';
-        this.buttonClass = 'btn btn-primary';
-        this.buttonType = 'button';
-        this.formName = undefined;
-        this.loading = false;
-        this.disabled = false;
-        this.click = new EventEmitter();
-        this.focus = new EventEmitter();
-        this.blur = new EventEmitter();
-        this.abpClick = new EventEmitter();
-        this.abpFocus = new EventEmitter();
-        this.abpBlur = new EventEmitter();
-    }
-    get icon() {
-        return `${this.loading ? 'fa fa-spinner fa-spin' : this.iconClass || 'd-none'}`;
+        this.buttonId = input('', ...(ngDevMode ? [{ debugName: "buttonId" }] : []));
+        this.buttonClass = input('btn btn-primary', ...(ngDevMode ? [{ debugName: "buttonClass" }] : []));
+        this.buttonType = input('button', ...(ngDevMode ? [{ debugName: "buttonType" }] : []));
+        this.formName = input(undefined, ...(ngDevMode ? [{ debugName: "formName" }] : []));
+        this.iconClass = input(undefined, ...(ngDevMode ? [{ debugName: "iconClass" }] : []));
+        this.loadingInput = input(false, { ...(ngDevMode ? { debugName: "loadingInput" } : {}), alias: 'loading' });
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+        this.attributes = input(undefined, ...(ngDevMode ? [{ debugName: "attributes" }] : []));
+        // Internal writable signal for loading state - can be set programmatically
+        this._loading = signal(false, ...(ngDevMode ? [{ debugName: "_loading" }] : []));
+        // Computed that combines input and internal state
+        this.isLoading = computed(() => this.loadingInput() || this._loading(), ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
+        this.click = output();
+        this.focus = output();
+        this.blur = output();
+        this.abpClick = output();
+        this.abpFocus = output();
+        this.abpBlur = output();
+        this.buttonRef = viewChild.required('button');
+        this.icon = computed(() => {
+            return this.isLoading() ? 'fa fa-spinner fa-spin' : this.iconClass() || 'd-none';
+        }, ...(ngDevMode ? [{ debugName: "icon" }] : []));
+    }
+    // Getter/setter for backward compatibility (used by ModalComponent)
+    get loading() {
+        return this._loading();
+    }
+    set loading(value) {
+        this._loading.set(value);
     }
     ngOnInit() {
-        if (this.attributes) {
-            Object.keys(this.attributes).forEach(key => {
-                if (this.attributes?.[key]) {
-                    this.renderer.setAttribute(this.buttonRef.nativeElement, key, this.attributes[key]);
+        const attributes = this.attributes();
+        if (attributes) {
+            Object.keys(attributes).forEach(key => {
+                if (attributes[key]) {
+                    this.renderer.setAttribute(this.buttonRef().nativeElement, key, attributes[key]);
                 }
             });
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: ButtonComponent, isStandalone: true, selector: "abp-button", inputs: { buttonId: "buttonId", buttonClass: "buttonClass", buttonType: "buttonType", formName: "formName", iconClass: "iconClass", loading: "loading", disabled: "disabled", attributes: "attributes" }, outputs: { click: "click", focus: "focus", blur: "blur", abpClick: "abpClick", abpFocus: "abpFocus", abpBlur: "abpBlur" }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "21.0.9", type: ButtonComponent, isStandalone: true, selector: "abp-button", inputs: { buttonId: { classPropertyName: "buttonId", publicName: "buttonId", isSignal: true, isRequired: false, transformFunction: null }, buttonClass: { classPropertyName: "buttonClass", publicName: "buttonClass", isSignal: true, isRequired: false, transformFunction: null }, buttonType: { classPropertyName: "buttonType", publicName: "buttonType", isSignal: true, isRequired: false, transformFunction: null }, formName: { classPropertyName: "formName", publicName: "formName", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, loadingInput: { classPropertyName: "loadingInput", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, attributes: { classPropertyName: "attributes", publicName: "attributes", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { click: "click", focus: "focus", blur: "blur", abpClick: "abpClick", abpFocus: "abpFocus", abpBlur: "abpBlur" }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, isSignal: true }], ngImport: i0, template: `
     <button
       #button
-      [id]="buttonId"
-      [attr.type]="buttonType"
-      [attr.form]="formName"
-      [ngClass]="buttonClass"
-      [disabled]="loading || disabled"
-      (click.stop)="click.next($event); abpClick.next($event)"
-      (focus)="focus.next($event); abpFocus.next($event)"
-      (blur)="blur.next($event); abpBlur.next($event)"
+      [id]="buttonId()"
+      [attr.type]="buttonType()"
+      [attr.form]="formName()"
+      [class]="buttonClass()"
+      [disabled]="isLoading() || disabled()"
+      (click.stop)="click.emit($event); abpClick.emit($event)"
+      (focus)="focus.emit($event); abpFocus.emit($event)"
+      (blur)="blur.emit($event); abpBlur.emit($event)"
     >
-      <i [ngClass]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
+      <i [class]="icon()" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -421,52 +433,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     template: `
     <button
       #button
-      [id]="buttonId"
-      [attr.type]="buttonType"
-      [attr.form]="formName"
-      [ngClass]="buttonClass"
-      [disabled]="loading || disabled"
-      (click.stop)="click.next($event); abpClick.next($event)"
-      (focus)="focus.next($event); abpFocus.next($event)"
-      (blur)="blur.next($event); abpBlur.next($event)"
+      [id]="buttonId()"
+      [attr.type]="buttonType()"
+      [attr.form]="formName()"
+      [class]="buttonClass()"
+      [disabled]="isLoading() || disabled()"
+      (click.stop)="click.emit($event); abpClick.emit($event)"
+      (focus)="focus.emit($event); abpFocus.emit($event)"
+      (blur)="blur.emit($event); abpBlur.emit($event)"
     >
-      <i [ngClass]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
+      <i [class]="icon()" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
   `,
-                    imports: [CommonModule, StopPropagationDirective],
+                    imports: [StopPropagationDirective],
                 }]
-        }], propDecorators: { buttonId: [{
-                type: Input
-            }], buttonClass: [{
-                type: Input
-            }], buttonType: [{
-                type: Input
-            }], formName: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], attributes: [{
-                type: Input
-            }], click: [{
-                type: Output
-            }], focus: [{
-                type: Output
-            }], blur: [{
-                type: Output
-            }], abpClick: [{
-                type: Output
-            }], abpFocus: [{
-                type: Output
-            }], abpBlur: [{
-                type: Output
-            }], buttonRef: [{
-                type: ViewChild,
-                args: ['button', { static: true }]
-            }] } });
+        }], propDecorators: { buttonId: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonId", required: false }] }], buttonClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonClass", required: false }] }], buttonType: [{ type: i0.Input, args: [{ isSignal: true, alias: "buttonType", required: false }] }], formName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formName", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], loadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], attributes: [{ type: i0.Input, args: [{ isSignal: true, alias: "attributes", required: false }] }], click: [{ type: i0.Output, args: ["click"] }], focus: [{ type: i0.Output, args: ["focus"] }], blur: [{ type: i0.Output, args: ["blur"] }], abpClick: [{ type: i0.Output, args: ["abpClick"] }], abpFocus: [{ type: i0.Output, args: ["abpFocus"] }], abpBlur: [{ type: i0.Output, args: ["abpBlur"] }], buttonRef: [{ type: i0.ViewChild, args: ['button', { isSignal: true }] }] } });
 
 var Confirmation;
 (function (Confirmation) {
@@ -517,11 +498,11 @@ class ConfirmationComponent {
         return !!(options && options.iconTemplate);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ConfirmationComponent, isStandalone: true, selector: "abp-confirmation", ngImport: i0, template: "@if (confirmation$ | async; as data) {\r\n  <div class=\"confirmation\">\r\n    <div\r\n      class=\"confirmation-backdrop\"\r\n      (click)=\"data.options?.dismissible ? close(dismiss) : null\"\r\n    ></div>\r\n    <div class=\"confirmation-dialog\">\r\n      @if (data.severity || isCustomIconExists(data)) {\r\n        <div class=\"icon-container\" [ngClass]=\"data.severity\">\r\n          @if (isIconTemplateExits(data)) {\r\n            <div [outerHTML]=\"data.options.iconTemplate\"></div>\r\n          } @else {\r\n            <i class=\"icon\" [ngClass]=\"getIconClass(data)\"></i>\r\n          }\r\n        </div>\r\n      }\r\n      <div class=\"content\">\r\n        @if (data.title) {\r\n          <h1\r\n            class=\"title\"\r\n            [innerHTML]=\"data.title | abpLocalization: data.options?.titleLocalizationParams\"\r\n          ></h1>\r\n        }\r\n        @if (data.message) {\r\n          <p\r\n            class=\"message\"\r\n            [innerHTML]=\"data.message | abpLocalization: data.options?.messageLocalizationParams\"\r\n          ></p>\r\n        }\r\n      </div>\r\n      <div class=\"footer\">\r\n        @if (!data?.options?.hideCancelBtn) {\r\n          <button\r\n            id=\"cancel\"\r\n            class=\"btn btn-outline-primary me-2\"\r\n            [innerHTML]=\"data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization\"\r\n            (click)=\"close(reject)\"\r\n          ></button>\r\n        }\r\n        @if (!data?.options?.hideYesBtn) {\r\n          <button\r\n            id=\"confirm\"\r\n            class=\"btn btn-primary\"\r\n            [innerHTML]=\"data.options?.yesText || 'AbpUi::Yes' | abpLocalization\"\r\n            (click)=\"close(confirm)\"\r\n          ></button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".confirmation{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1060}.confirmation .confirmation-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1061!important}.confirmation .confirmation-dialog{display:flex;flex-direction:column;margin:20px auto;padding:0;width:450px;min-height:300px;z-index:1062!important}@media screen and (max-width:500px){.confirmation .confirmation-dialog{width:90vw}}.confirmation .confirmation-dialog .icon-container{display:flex;align-items:center;justify-content:center;padding:40px 20px 10px}.confirmation .confirmation-dialog .icon-container .icon{width:100px;height:100px;stroke-width:1;font-size:80px;text-align:center}.confirmation .confirmation-dialog .content{flex-grow:1;display:block}.confirmation .confirmation-dialog .content .title{display:block;margin:0;padding:0;font-size:27px;font-weight:600;text-align:center}.confirmation .confirmation-dialog .content .message{display:block;padding:8px 20px 20px;font-size:16px;font-weight:400;text-align:center;margin-bottom:0}.confirmation .confirmation-dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:20px;width:100%}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ConfirmationComponent, isStandalone: true, selector: "abp-confirmation", ngImport: i0, template: "@if (confirmation$ | async; as data) {\r\n<div class=\"confirmation\">\r\n  <div class=\"confirmation-backdrop\" (click)=\"data.options?.dismissible ? close(dismiss) : null\"></div>\r\n  <div class=\"confirmation-dialog\">\r\n    @if (data.severity || isCustomIconExists(data)) {\r\n    <div class=\"icon-container\" [class]=\"data.severity\">\r\n      @if (isIconTemplateExits(data)) {\r\n      <div [outerHTML]=\"data.options.iconTemplate\"></div>\r\n      } @else {\r\n      <i class=\"icon\" [class]=\"getIconClass(data)\"></i>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"content\">\r\n      @if (data.title) {\r\n      <h1 class=\"title\" [innerHTML]=\"data.title | abpLocalization: data.options?.titleLocalizationParams\"></h1>\r\n      }\r\n      @if (data.message) {\r\n      <p class=\"message\" [innerHTML]=\"data.message | abpLocalization: data.options?.messageLocalizationParams\"></p>\r\n      }\r\n    </div>\r\n    <div class=\"footer\">\r\n      @if (!data?.options?.hideCancelBtn) {\r\n      <button id=\"cancel\" class=\"btn btn-outline-primary me-2\"\r\n        [innerHTML]=\"data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization\" (click)=\"close(reject)\"></button>\r\n      }\r\n      @if (!data?.options?.hideYesBtn) {\r\n      <button id=\"confirm\" class=\"btn btn-primary\" [innerHTML]=\"data.options?.yesText || 'AbpUi::Yes' | abpLocalization\"\r\n        (click)=\"close(confirm)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n}", styles: [".confirmation{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1060}.confirmation .confirmation-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1061!important}.confirmation .confirmation-dialog{display:flex;flex-direction:column;margin:20px auto;padding:0;width:450px;min-height:300px;z-index:1062!important}@media screen and (max-width:500px){.confirmation .confirmation-dialog{width:90vw}}.confirmation .confirmation-dialog .icon-container{display:flex;align-items:center;justify-content:center;padding:40px 20px 10px}.confirmation .confirmation-dialog .icon-container .icon{width:100px;height:100px;stroke-width:1;font-size:80px;text-align:center}.confirmation .confirmation-dialog .content{flex-grow:1;display:block}.confirmation .confirmation-dialog .content .title{display:block;margin:0;padding:0;font-size:27px;font-weight:600;text-align:center}.confirmation .confirmation-dialog .content .message{display:block;padding:8px 20px 20px;font-size:16px;font-weight:400;text-align:center;margin-bottom:0}.confirmation .confirmation-dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:20px;width:100%}\n"], dependencies: [{ kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ConfirmationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-confirmation', imports: [NgClass, AsyncPipe, LocalizationPipe], template: "@if (confirmation$ | async; as data) {\r\n  <div class=\"confirmation\">\r\n    <div\r\n      class=\"confirmation-backdrop\"\r\n      (click)=\"data.options?.dismissible ? close(dismiss) : null\"\r\n    ></div>\r\n    <div class=\"confirmation-dialog\">\r\n      @if (data.severity || isCustomIconExists(data)) {\r\n        <div class=\"icon-container\" [ngClass]=\"data.severity\">\r\n          @if (isIconTemplateExits(data)) {\r\n            <div [outerHTML]=\"data.options.iconTemplate\"></div>\r\n          } @else {\r\n            <i class=\"icon\" [ngClass]=\"getIconClass(data)\"></i>\r\n          }\r\n        </div>\r\n      }\r\n      <div class=\"content\">\r\n        @if (data.title) {\r\n          <h1\r\n            class=\"title\"\r\n            [innerHTML]=\"data.title | abpLocalization: data.options?.titleLocalizationParams\"\r\n          ></h1>\r\n        }\r\n        @if (data.message) {\r\n          <p\r\n            class=\"message\"\r\n            [innerHTML]=\"data.message | abpLocalization: data.options?.messageLocalizationParams\"\r\n          ></p>\r\n        }\r\n      </div>\r\n      <div class=\"footer\">\r\n        @if (!data?.options?.hideCancelBtn) {\r\n          <button\r\n            id=\"cancel\"\r\n            class=\"btn btn-outline-primary me-2\"\r\n            [innerHTML]=\"data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization\"\r\n            (click)=\"close(reject)\"\r\n          ></button>\r\n        }\r\n        @if (!data?.options?.hideYesBtn) {\r\n          <button\r\n            id=\"confirm\"\r\n            class=\"btn btn-primary\"\r\n            [innerHTML]=\"data.options?.yesText || 'AbpUi::Yes' | abpLocalization\"\r\n            (click)=\"close(confirm)\"\r\n          ></button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".confirmation{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1060}.confirmation .confirmation-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1061!important}.confirmation .confirmation-dialog{display:flex;flex-direction:column;margin:20px auto;padding:0;width:450px;min-height:300px;z-index:1062!important}@media screen and (max-width:500px){.confirmation .confirmation-dialog{width:90vw}}.confirmation .confirmation-dialog .icon-container{display:flex;align-items:center;justify-content:center;padding:40px 20px 10px}.confirmation .confirmation-dialog .icon-container .icon{width:100px;height:100px;stroke-width:1;font-size:80px;text-align:center}.confirmation .confirmation-dialog .content{flex-grow:1;display:block}.confirmation .confirmation-dialog .content .title{display:block;margin:0;padding:0;font-size:27px;font-weight:600;text-align:center}.confirmation .confirmation-dialog .content .message{display:block;padding:8px 20px 20px;font-size:16px;font-weight:400;text-align:center;margin-bottom:0}.confirmation .confirmation-dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:20px;width:100%}\n"] }]
+            args: [{ selector: 'abp-confirmation', imports: [AsyncPipe, LocalizationPipe], template: "@if (confirmation$ | async; as data) {\r\n<div class=\"confirmation\">\r\n  <div class=\"confirmation-backdrop\" (click)=\"data.options?.dismissible ? close(dismiss) : null\"></div>\r\n  <div class=\"confirmation-dialog\">\r\n    @if (data.severity || isCustomIconExists(data)) {\r\n    <div class=\"icon-container\" [class]=\"data.severity\">\r\n      @if (isIconTemplateExits(data)) {\r\n      <div [outerHTML]=\"data.options.iconTemplate\"></div>\r\n      } @else {\r\n      <i class=\"icon\" [class]=\"getIconClass(data)\"></i>\r\n      }\r\n    </div>\r\n    }\r\n    <div class=\"content\">\r\n      @if (data.title) {\r\n      <h1 class=\"title\" [innerHTML]=\"data.title | abpLocalization: data.options?.titleLocalizationParams\"></h1>\r\n      }\r\n      @if (data.message) {\r\n      <p class=\"message\" [innerHTML]=\"data.message | abpLocalization: data.options?.messageLocalizationParams\"></p>\r\n      }\r\n    </div>\r\n    <div class=\"footer\">\r\n      @if (!data?.options?.hideCancelBtn) {\r\n      <button id=\"cancel\" class=\"btn btn-outline-primary me-2\"\r\n        [innerHTML]=\"data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization\" (click)=\"close(reject)\"></button>\r\n      }\r\n      @if (!data?.options?.hideYesBtn) {\r\n      <button id=\"confirm\" class=\"btn btn-primary\" [innerHTML]=\"data.options?.yesText || 'AbpUi::Yes' | abpLocalization\"\r\n        (click)=\"close(confirm)\"></button>\r\n      }\r\n    </div>\r\n  </div>\r\n</div>\r\n}", styles: [".confirmation{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1060}.confirmation .confirmation-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1061!important}.confirmation .confirmation-dialog{display:flex;flex-direction:column;margin:20px auto;padding:0;width:450px;min-height:300px;z-index:1062!important}@media screen and (max-width:500px){.confirmation .confirmation-dialog{width:90vw}}.confirmation .confirmation-dialog .icon-container{display:flex;align-items:center;justify-content:center;padding:40px 20px 10px}.confirmation .confirmation-dialog .icon-container .icon{width:100px;height:100px;stroke-width:1;font-size:80px;text-align:center}.confirmation .confirmation-dialog .content{flex-grow:1;display:block}.confirmation .confirmation-dialog .content .title{display:block;margin:0;padding:0;font-size:27px;font-weight:600;text-align:center}.confirmation .confirmation-dialog .content .message{display:block;padding:8px 20px 20px;font-size:16px;font-weight:400;text-align:center;margin-bottom:0}.confirmation .confirmation-dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:20px;width:100%}\n"] }]
         }] });
 
 class HttpErrorWrapperComponent {
@@ -536,6 +517,7 @@ class HttpErrorWrapperComponent {
         this.customComponent = undefined;
         this.hideCloseIcon = false;
         this.isHomeShow = true;
+        this.containerRef = viewChild('container', ...(ngDevMode ? [{ debugName: "containerRef" }] : []));
     }
     get statusText() {
         return this.status ? `[${this.status}]` : '';
@@ -560,8 +542,9 @@ class HttpErrorWrapperComponent {
             }
             customComponentRef.instance.destroy$ = this.destroy$;
             this.appRef.attachView(customComponentRef.hostView);
-            if (this.containerRef) {
-                this.containerRef.nativeElement.appendChild(customComponentRef.hostView.rootNodes[0]);
+            const containerRef = this.containerRef();
+            if (containerRef) {
+                containerRef.nativeElement.appendChild(customComponentRef.hostView.rootNodes[0]);
             }
             customComponentRef.changeDetectorRef.detectChanges();
         }
@@ -581,15 +564,12 @@ class HttpErrorWrapperComponent {
         this.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: HttpErrorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: HttpErrorWrapperComponent, isStandalone: true, selector: "abp-http-error-wrapper", viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (!hideCloseIcon) {\r\n    <button id=\"abp-close-button\" type=\"button\" class=\"btn-close me-2\" (click)=\"destroy()\"></button>\r\n  }\r\n\r\n  @if (!customComponent) {\r\n    <div class=\"row centered\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"error-template\">\r\n          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n          <div class=\"error-details\">\r\n            {{ details | abpLocalization }}\r\n          </div>\r\n          <div class=\"error-actions\">\r\n            @if (isHomeShow) {\r\n              <a (click)=\"goHome()\" class=\"btn btn-primary btn-md mt-2\"\r\n                ><span class=\"glyphicon glyphicon-home\"></span>\r\n                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: HttpErrorWrapperComponent, isStandalone: true, selector: "abp-http-error-wrapper", viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true, isSignal: true }], ngImport: i0, template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (!hideCloseIcon) {\r\n    <button id=\"abp-close-button\" type=\"button\" class=\"btn-close me-2\" (click)=\"destroy()\"></button>\r\n  }\r\n\r\n  @if (!customComponent) {\r\n    <div class=\"row centered\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"error-template\">\r\n          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n          <div class=\"error-details\">\r\n            {{ details | abpLocalization }}\r\n          </div>\r\n          <div class=\"error-actions\">\r\n            @if (isHomeShow) {\r\n              <a (click)=\"goHome()\" class=\"btn btn-primary btn-md mt-2\"\r\n                ><span class=\"glyphicon glyphicon-home\"></span>\r\n                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: HttpErrorWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-http-error-wrapper', imports: [CommonModule, LocalizationPipe], template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (!hideCloseIcon) {\r\n    <button id=\"abp-close-button\" type=\"button\" class=\"btn-close me-2\" (click)=\"destroy()\"></button>\r\n  }\r\n\r\n  @if (!customComponent) {\r\n    <div class=\"row centered\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"error-template\">\r\n          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n          <div class=\"error-details\">\r\n            {{ details | abpLocalization }}\r\n          </div>\r\n          <div class=\"error-actions\">\r\n            @if (isHomeShow) {\r\n              <a (click)=\"goHome()\" class=\"btn btn-primary btn-md mt-2\"\r\n                ><span class=\"glyphicon glyphicon-home\"></span>\r\n                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
-        }], propDecorators: { containerRef: [{
-                type: ViewChild,
-                args: ['container', { static: false }]
-            }] } });
+            args: [{ selector: 'abp-http-error-wrapper', imports: [LocalizationPipe], template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (!hideCloseIcon) {\r\n    <button id=\"abp-close-button\" type=\"button\" class=\"btn-close me-2\" (click)=\"destroy()\"></button>\r\n  }\r\n\r\n  @if (!customComponent) {\r\n    <div class=\"row centered\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"error-template\">\r\n          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n          <div class=\"error-details\">\r\n            {{ details | abpLocalization }}\r\n          </div>\r\n          <div class=\"error-actions\">\r\n            @if (isHomeShow) {\r\n              <a (click)=\"goHome()\" class=\"btn btn-primary btn-md mt-2\"\r\n                ><span class=\"glyphicon glyphicon-home\"></span>\r\n                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
+        }], propDecorators: { containerRef: [{ type: i0.ViewChild, args: ['container', { isSignal: true }] }] } });
 
 class LoaderBarComponent {
     constructor() {
@@ -597,8 +577,10 @@ class LoaderBarComponent {
         this.subscription = inject(SubscriptionService);
         this.httpWaitService = inject(HttpWaitService);
         this.routerWaitService = inject(RouterWaitService);
-        this.containerClass = 'abp-loader-bar';
-        this.color = '#77b6ff';
+        this.isLoadingInput = input(false, { ...(ngDevMode ? { debugName: "isLoadingInput" } : {}), alias: 'isLoading' });
+        this.containerClass = input('abp-loader-bar', ...(ngDevMode ? [{ debugName: "containerClass" }] : []));
+        this.color = input('#77b6ff', ...(ngDevMode ? [{ debugName: "color" }] : []));
+        this.isLoading = signal(false, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
         this.progressLevel = 0;
         this.interval = new Subscription();
         this.timer = new Subscription();
@@ -623,16 +605,14 @@ class LoaderBarComponent {
             }
             this.cdRef.detectChanges();
         };
-    }
-    set isLoading(value) {
-        this._isLoading = value;
-        this.cdRef.detectChanges();
-    }
-    get isLoading() {
-        return this._isLoading;
+        effect(() => {
+            const value = this.isLoadingInput();
+            this.isLoading.set(value);
+            this.cdRef.detectChanges();
+        });
     }
     get boxShadow() {
-        return `0 0 10px rgba(${this.color}, 0.5)`;
+        return `0 0 10px rgba(${this.color()}, 0.5)`;
     }
     ngOnInit() {
         this.subscribeLoading();
@@ -649,9 +629,9 @@ class LoaderBarComponent {
         this.interval.unsubscribe();
     }
     startLoading() {
-        if (this.isLoading || !this.interval.closed)
+        if (this.isLoading() || !this.interval.closed)
             return;
-        this.isLoading = true;
+        this.isLoading.set(true);
         this.progressLevel = 0;
         this.cdRef.detectChanges();
         this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress);
@@ -660,48 +640,42 @@ class LoaderBarComponent {
     stopLoading() {
         this.interval.unsubscribe();
         this.progressLevel = 100;
-        this.isLoading = false;
+        this.isLoading.set(false);
         if (!this.timer.closed)
             return;
         this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LoaderBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: LoaderBarComponent, isStandalone: true, selector: "abp-loader-bar", inputs: { isLoading: "isLoading", containerClass: "containerClass", color: "color" }, providers: [SubscriptionService], ngImport: i0, template: `
-    <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: LoaderBarComponent, isStandalone: true, selector: "abp-loader-bar", inputs: { isLoadingInput: { classPropertyName: "isLoadingInput", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, containerClass: { classPropertyName: "containerClass", publicName: "containerClass", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, providers: [SubscriptionService], ngImport: i0, template: `
+    <div id="abp-loader-bar" [class]="containerClass()" [class.is-loading]="isLoading()">
       <div
         class="abp-progress"
         [class.progressing]="progressLevel"
         [style.width.vw]="progressLevel"
-        [ngStyle]="{
-          'background-color': color,
+        [style]="{
+          'background-color': color(),
           'box-shadow': boxShadow,
         }"
       ></div>
     </div>
-  `, isInline: true, styles: [".abp-loader-bar{left:0;opacity:0;position:fixed;top:0;transition:opacity .4s linear .4s;z-index:99999}.abp-loader-bar.is-loading{opacity:1;transition:none}.abp-loader-bar .abp-progress{height:3px;left:0;position:fixed;top:0}.abp-loader-bar .abp-progress.progressing{transition:width .4s ease}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  `, isInline: true, styles: [".abp-loader-bar{left:0;opacity:0;position:fixed;top:0;transition:opacity .4s linear .4s;z-index:99999}.abp-loader-bar.is-loading{opacity:1;transition:none}.abp-loader-bar .abp-progress{height:3px;left:0;position:fixed;top:0}.abp-loader-bar .abp-progress.progressing{transition:width .4s ease}\n"] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LoaderBarComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-loader-bar', template: `
-    <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
+    <div id="abp-loader-bar" [class]="containerClass()" [class.is-loading]="isLoading()">
       <div
         class="abp-progress"
         [class.progressing]="progressLevel"
         [style.width.vw]="progressLevel"
-        [ngStyle]="{
-          'background-color': color,
+        [style]="{
+          'background-color': color(),
           'box-shadow': boxShadow,
         }"
       ></div>
     </div>
-  `, providers: [SubscriptionService], imports: [NgClass, NgStyle], styles: [".abp-loader-bar{left:0;opacity:0;position:fixed;top:0;transition:opacity .4s linear .4s;z-index:99999}.abp-loader-bar.is-loading{opacity:1;transition:none}.abp-loader-bar .abp-progress{height:3px;left:0;position:fixed;top:0}.abp-loader-bar .abp-progress.progressing{transition:width .4s ease}\n"] }]
-        }], propDecorators: { isLoading: [{
-                type: Input
-            }], containerClass: [{
-                type: Input
-            }], color: [{
-                type: Input
-            }] } });
+  `, providers: [SubscriptionService], imports: [], styles: [".abp-loader-bar{left:0;opacity:0;position:fixed;top:0;transition:opacity .4s linear .4s;z-index:99999}.abp-loader-bar.is-loading{opacity:1;transition:none}.abp-loader-bar .abp-progress{height:3px;left:0;position:fixed;top:0}.abp-loader-bar .abp-progress.progressing{transition:width .4s ease}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { isLoadingInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "isLoading", required: false }] }], containerClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "containerClass", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
 
 class LoadingComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
@@ -876,19 +850,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 
 class ToastComponent {
     constructor() {
-        this.remove = new EventEmitter();
+        this.toast = input.required(...(ngDevMode ? [{ debugName: "toast" }] : []));
+        this.remove = output();
     }
     get severityClass() {
-        if (!this.toast || !this.toast.severity)
+        const toast = this.toast();
+        if (!toast || !toast.severity)
             return '';
-        return `abp-toast-${this.toast.severity}`;
+        return `abp-toast-${toast.severity}`;
     }
     get iconClass() {
-        const { iconClass } = this.toast.options || {};
+        const { iconClass } = this.toast().options || {};
         if (iconClass) {
             return iconClass;
         }
-        switch (this.toast.severity) {
+        switch (this.toast().severity) {
             case 'success':
                 return 'bi-check';
             case 'info':
@@ -902,7 +878,7 @@ class ToastComponent {
         }
     }
     ngOnInit() {
-        const { sticky, life } = this.toast.options || {};
+        const { sticky, life } = this.toast().options || {};
         if (sticky)
             return;
         const timeout = life || 5000;
@@ -911,38 +887,41 @@ class ToastComponent {
         }, timeout);
     }
     close() {
-        this.remove.emit(this.toast.options?.id);
+        this.remove.emit(this.toast().options?.id);
     }
     tap() {
-        if (this.toast.options?.tapToDismiss)
+        if (this.toast().options?.tapToDismiss)
             this.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ToastComponent, isStandalone: true, selector: "abp-toast", inputs: { toast: "toast" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"abp-toast\" [ngClass]=\"severityClass\" (click)=\"tap()\">\r\n  <div class=\"abp-toast-icon\">\r\n    <i class=\"bi icon\" [ngClass]=\"iconClass\" aria-hidden=\"true\"></i>\r\n  </div>\r\n  <div class=\"abp-toast-content\">\r\n    @if (toast.options?.closable) {\r\n      <button class=\"abp-toast-close-button\" (click)=\"close()\">\r\n        <i class=\"bi bi-x fs-4\" aria-hidden=\"true\"></i>\r\n      </button>\r\n    }\r\n    <div class=\"abp-toast-title\">\r\n      {{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }}\r\n    </div>\r\n    <p\r\n      class=\"abp-toast-message\"\r\n      [innerHTML]=\"toast.message | abpLocalization: toast.options?.messageLocalizationParams\"\r\n    ></p>\r\n  </div>\r\n</div>\r\n", styles: [".abp-toast{display:grid;grid-template-columns:35px 1fr;gap:5px;margin:5px 0;padding:7px;width:350px;-webkit-user-select:none;user-select:none;z-index:9999;color:#fff;border-radius:8px;font-size:14px;box-shadow:0 0 20px #4c577d05;border:2px solid #f0f0f0;background-color:#f0f0f0;color:#000;box-shadow:0 0 10px -5px #0006}.abp-toast:hover{border:2px solid #e4e4e4;background-color:#e4e4e4;box-shadow:0 0 15px -5px #0006}.abp-toast{opacity:1}.abp-toast.abp-toast-success{border:2px solid #4fbf67;background-color:#4fbf67;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-success:hover{border:2px solid rgb(69.1,187.4,94.45);background-color:#45bb5e;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-info{border:2px solid #438aa7;background-color:#438aa7;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-info:hover{border:2px solid rgb(63.65,131.1,158.65);background-color:#40839f;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-warning{border:2px solid #ff9f38;background-color:#ff9f38;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-warning:hover{border:2px solid rgb(255,151.4984924623,40.45);background-color:#ff9728;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-error{border:2px solid #c00d49;background-color:#c00d49;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-error:hover{border:2px solid rgb(182.4,12.35,69.35);background-color:#b60c45;box-shadow:0 0 15px -5px #0006}.abp-toast .abp-toast-icon{display:flex;align-items:center;justify-content:center}.abp-toast .abp-toast-icon .icon{font-size:32px}.abp-toast .abp-toast-content{position:relative;display:flex;align-self:center;flex-direction:column;word-break:break-word;padding-bottom:2px}.abp-toast .abp-toast-content .abp-toast-close-button{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 5px 0 0;width:25px;height:100%;border:none;border-radius:50%;background:transparent;color:inherit}.abp-toast .abp-toast-content .abp-toast-close-button:focus{outline:none}.abp-toast .abp-toast-content .abp-toast-title{margin:0;padding:0;font-size:1rem;font-weight:600}.abp-toast .abp-toast-content .abp-toast-message{margin:0;padding:0;max-width:240px}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ToastComponent, isStandalone: true, selector: "abp-toast", inputs: { toast: { classPropertyName: "toast", publicName: "toast", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"abp-toast\" [class]=\"severityClass\" (click)=\"tap()\">\r\n  <div class=\"abp-toast-icon\">\r\n    <i class=\"bi icon\" [class]=\"iconClass\" aria-hidden=\"true\"></i>\r\n  </div>\r\n  <div class=\"abp-toast-content\">\r\n    @if (toast().options?.closable) {\r\n    <button class=\"abp-toast-close-button\" (click)=\"close()\">\r\n      <i class=\"bi bi-x fs-4\" aria-hidden=\"true\"></i>\r\n    </button>\r\n    }\r\n    <div class=\"abp-toast-title\">\r\n      {{ toast().title | abpLocalization: toast().options?.titleLocalizationParams }}\r\n    </div>\r\n    <p class=\"abp-toast-message\"\r\n      [innerHTML]=\"toast().message | abpLocalization: toast().options?.messageLocalizationParams\"></p>\r\n  </div>\r\n</div>", styles: [".abp-toast{display:grid;grid-template-columns:35px 1fr;gap:5px;margin:5px 0;padding:7px;width:350px;-webkit-user-select:none;user-select:none;z-index:9999;color:#fff;border-radius:8px;font-size:14px;box-shadow:0 0 20px #4c577d05;border:2px solid #f0f0f0;background-color:#f0f0f0;color:#000;box-shadow:0 0 10px -5px #0006}.abp-toast:hover{border:2px solid #e4e4e4;background-color:#e4e4e4;box-shadow:0 0 15px -5px #0006}.abp-toast{opacity:1}.abp-toast.abp-toast-success{border:2px solid #4fbf67;background-color:#4fbf67;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-success:hover{border:2px solid rgb(69.1,187.4,94.45);background-color:#45bb5e;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-info{border:2px solid #438aa7;background-color:#438aa7;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-info:hover{border:2px solid rgb(63.65,131.1,158.65);background-color:#40839f;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-warning{border:2px solid #ff9f38;background-color:#ff9f38;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-warning:hover{border:2px solid rgb(255,151.4984924623,40.45);background-color:#ff9728;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-error{border:2px solid #c00d49;background-color:#c00d49;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-error:hover{border:2px solid rgb(182.4,12.35,69.35);background-color:#b60c45;box-shadow:0 0 15px -5px #0006}.abp-toast .abp-toast-icon{display:flex;align-items:center;justify-content:center}.abp-toast .abp-toast-icon .icon{font-size:32px}.abp-toast .abp-toast-content{position:relative;display:flex;align-self:center;flex-direction:column;word-break:break-word;padding-bottom:2px}.abp-toast .abp-toast-content .abp-toast-close-button{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 5px 0 0;width:25px;height:100%;border:none;border-radius:50%;background:transparent;color:inherit}.abp-toast .abp-toast-content .abp-toast-close-button:focus{outline:none}.abp-toast .abp-toast-content .abp-toast-title{margin:0;padding:0;font-size:1rem;font-weight:600}.abp-toast .abp-toast-content .abp-toast-message{margin:0;padding:0;max-width:240px}\n"], dependencies: [{ kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-toast', imports: [NgClass, LocalizationPipe], template: "<div class=\"abp-toast\" [ngClass]=\"severityClass\" (click)=\"tap()\">\r\n  <div class=\"abp-toast-icon\">\r\n    <i class=\"bi icon\" [ngClass]=\"iconClass\" aria-hidden=\"true\"></i>\r\n  </div>\r\n  <div class=\"abp-toast-content\">\r\n    @if (toast.options?.closable) {\r\n      <button class=\"abp-toast-close-button\" (click)=\"close()\">\r\n        <i class=\"bi bi-x fs-4\" aria-hidden=\"true\"></i>\r\n      </button>\r\n    }\r\n    <div class=\"abp-toast-title\">\r\n      {{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }}\r\n    </div>\r\n    <p\r\n      class=\"abp-toast-message\"\r\n      [innerHTML]=\"toast.message | abpLocalization: toast.options?.messageLocalizationParams\"\r\n    ></p>\r\n  </div>\r\n</div>\r\n", styles: [".abp-toast{display:grid;grid-template-columns:35px 1fr;gap:5px;margin:5px 0;padding:7px;width:350px;-webkit-user-select:none;user-select:none;z-index:9999;color:#fff;border-radius:8px;font-size:14px;box-shadow:0 0 20px #4c577d05;border:2px solid #f0f0f0;background-color:#f0f0f0;color:#000;box-shadow:0 0 10px -5px #0006}.abp-toast:hover{border:2px solid #e4e4e4;background-color:#e4e4e4;box-shadow:0 0 15px -5px #0006}.abp-toast{opacity:1}.abp-toast.abp-toast-success{border:2px solid #4fbf67;background-color:#4fbf67;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-success:hover{border:2px solid rgb(69.1,187.4,94.45);background-color:#45bb5e;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-info{border:2px solid #438aa7;background-color:#438aa7;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-info:hover{border:2px solid rgb(63.65,131.1,158.65);background-color:#40839f;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-warning{border:2px solid #ff9f38;background-color:#ff9f38;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-warning:hover{border:2px solid rgb(255,151.4984924623,40.45);background-color:#ff9728;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-error{border:2px solid #c00d49;background-color:#c00d49;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-error:hover{border:2px solid rgb(182.4,12.35,69.35);background-color:#b60c45;box-shadow:0 0 15px -5px #0006}.abp-toast .abp-toast-icon{display:flex;align-items:center;justify-content:center}.abp-toast .abp-toast-icon .icon{font-size:32px}.abp-toast .abp-toast-content{position:relative;display:flex;align-self:center;flex-direction:column;word-break:break-word;padding-bottom:2px}.abp-toast .abp-toast-content .abp-toast-close-button{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 5px 0 0;width:25px;height:100%;border:none;border-radius:50%;background:transparent;color:inherit}.abp-toast .abp-toast-content .abp-toast-close-button:focus{outline:none}.abp-toast .abp-toast-content .abp-toast-title{margin:0;padding:0;font-size:1rem;font-weight:600}.abp-toast .abp-toast-content .abp-toast-message{margin:0;padding:0;max-width:240px}\n"] }]
-        }], propDecorators: { toast: [{
-                type: Input
-            }], remove: [{
-                type: Output
-            }] } });
+            args: [{ selector: 'abp-toast', imports: [LocalizationPipe], template: "<div class=\"abp-toast\" [class]=\"severityClass\" (click)=\"tap()\">\r\n  <div class=\"abp-toast-icon\">\r\n    <i class=\"bi icon\" [class]=\"iconClass\" aria-hidden=\"true\"></i>\r\n  </div>\r\n  <div class=\"abp-toast-content\">\r\n    @if (toast().options?.closable) {\r\n    <button class=\"abp-toast-close-button\" (click)=\"close()\">\r\n      <i class=\"bi bi-x fs-4\" aria-hidden=\"true\"></i>\r\n    </button>\r\n    }\r\n    <div class=\"abp-toast-title\">\r\n      {{ toast().title | abpLocalization: toast().options?.titleLocalizationParams }}\r\n    </div>\r\n    <p class=\"abp-toast-message\"\r\n      [innerHTML]=\"toast().message | abpLocalization: toast().options?.messageLocalizationParams\"></p>\r\n  </div>\r\n</div>", styles: [".abp-toast{display:grid;grid-template-columns:35px 1fr;gap:5px;margin:5px 0;padding:7px;width:350px;-webkit-user-select:none;user-select:none;z-index:9999;color:#fff;border-radius:8px;font-size:14px;box-shadow:0 0 20px #4c577d05;border:2px solid #f0f0f0;background-color:#f0f0f0;color:#000;box-shadow:0 0 10px -5px #0006}.abp-toast:hover{border:2px solid #e4e4e4;background-color:#e4e4e4;box-shadow:0 0 15px -5px #0006}.abp-toast{opacity:1}.abp-toast.abp-toast-success{border:2px solid #4fbf67;background-color:#4fbf67;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-success:hover{border:2px solid rgb(69.1,187.4,94.45);background-color:#45bb5e;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-info{border:2px solid #438aa7;background-color:#438aa7;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-info:hover{border:2px solid rgb(63.65,131.1,158.65);background-color:#40839f;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-warning{border:2px solid #ff9f38;background-color:#ff9f38;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-warning:hover{border:2px solid rgb(255,151.4984924623,40.45);background-color:#ff9728;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-error{border:2px solid #c00d49;background-color:#c00d49;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-error:hover{border:2px solid rgb(182.4,12.35,69.35);background-color:#b60c45;box-shadow:0 0 15px -5px #0006}.abp-toast .abp-toast-icon{display:flex;align-items:center;justify-content:center}.abp-toast .abp-toast-icon .icon{font-size:32px}.abp-toast .abp-toast-content{position:relative;display:flex;align-self:center;flex-direction:column;word-break:break-word;padding-bottom:2px}.abp-toast .abp-toast-content .abp-toast-close-button{position:absolute;top:0;right:0;display:flex;align-items:center;justify-content:center;margin:0;padding:0 5px 0 0;width:25px;height:100%;border:none;border-radius:50%;background:transparent;color:inherit}.abp-toast .abp-toast-content .abp-toast-close-button:focus{outline:none}.abp-toast .abp-toast-content .abp-toast-title{margin:0;padding:0;font-size:1rem;font-weight:600}.abp-toast .abp-toast-content .abp-toast-message{margin:0;padding:0;max-width:240px}\n"] }]
+        }], propDecorators: { toast: [{ type: i0.Input, args: [{ isSignal: true, alias: "toast", required: true }] }], remove: [{ type: i0.Output, args: ["remove"] }] } });
 
 class ToastContainerComponent {
     constructor() {
         this.toasts = [];
-        this.right = '30px';
+        this.top = input(undefined, ...(ngDevMode ? [{ debugName: "top" }] : []));
+        this.rightInput = input('30px', { ...(ngDevMode ? { debugName: "rightInput" } : {}), alias: 'right' });
+        this.bottom = input('30px', ...(ngDevMode ? [{ debugName: "bottom" }] : []));
+        this.left = input(undefined, ...(ngDevMode ? [{ debugName: "left" }] : []));
+        this.toastKey = input(undefined, ...(ngDevMode ? [{ debugName: "toastKey" }] : []));
+        this.right = signal('30px', ...(ngDevMode ? [{ debugName: "right" }] : []));
         this.defaultRight = '30px';
         this.defaultMobileRight = '0';
-        this.bottom = '30px';
+        effect(() => {
+            this.right.set(this.rightInput());
+        });
     }
     ngOnInit() {
         this.setDefaultRight();
         this.toasts$.subscribe(toasts => {
-            this.toasts = this.toastKey
+            this.toasts = this.toastKey()
                 ? toasts.filter(t => {
-                    return t.options && t.options.containerKey !== this.toastKey;
+                    return t.options && t.options.containerKey !== this.toastKey();
                 })
                 : toasts;
         });
@@ -952,8 +931,8 @@ class ToastContainerComponent {
     }
     setDefaultRight() {
         const screenWidth = window.innerWidth;
-        if (screenWidth < 768 && this.right == this.defaultRight) {
-            this.right = this.defaultMobileRight;
+        if (screenWidth < 768 && this.right() === this.defaultRight) {
+            this.right.set(this.defaultMobileRight);
         }
     }
     trackByFunc(index, toast) {
@@ -962,25 +941,14 @@ class ToastContainerComponent {
         return toast.options?.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ToastContainerComponent, isStandalone: true, selector: "abp-toast-container", inputs: { top: "top", right: "right", bottom: "bottom", left: "left", toastKey: "toastKey" }, host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top || 'auto'\"\r\n  [style.right]=\"right || 'auto'\"\r\n  [style.bottom]=\"bottom || 'auto'\"\r\n  [style.left]=\"left || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  @for (toast of toasts; track toast.options?.id) {\r\n    <abp-toast\r\n      [toast]=\"toast\"\r\n      (remove)=\"remove($event)\"\r\n    ></abp-toast>\r\n  }\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}@media only screen and (max-width:768px){.abp-toast-container{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "abp-toast", inputs: ["toast"], outputs: ["remove"] }], animations: [toastInOut] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: ToastContainerComponent, isStandalone: true, selector: "abp-toast-container", inputs: { top: { classPropertyName: "top", publicName: "top", isSignal: true, isRequired: false, transformFunction: null }, rightInput: { classPropertyName: "rightInput", publicName: "right", isSignal: true, isRequired: false, transformFunction: null }, bottom: { classPropertyName: "bottom", publicName: "bottom", isSignal: true, isRequired: false, transformFunction: null }, left: { classPropertyName: "left", publicName: "left", isSignal: true, isRequired: false, transformFunction: null }, toastKey: { classPropertyName: "toastKey", publicName: "toastKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "window:resize": "onWindowResize()" } }, ngImport: i0, template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top() || 'auto'\"\r\n  [style.right]=\"right() || 'auto'\"\r\n  [style.bottom]=\"bottom() || 'auto'\"\r\n  [style.left]=\"left() || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  @for (toast of toasts; track toast.options?.id) {\r\n    <abp-toast\r\n      [toast]=\"toast\"\r\n      (remove)=\"remove($event)\"\r\n    ></abp-toast>\r\n  }\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}@media only screen and (max-width:768px){.abp-toast-container{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "abp-toast", inputs: ["toast"], outputs: ["remove"] }], animations: [toastInOut] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: ToastContainerComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-toast-container', animations: [toastInOut], imports: [ToastComponent], template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top || 'auto'\"\r\n  [style.right]=\"right || 'auto'\"\r\n  [style.bottom]=\"bottom || 'auto'\"\r\n  [style.left]=\"left || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  @for (toast of toasts; track toast.options?.id) {\r\n    <abp-toast\r\n      [toast]=\"toast\"\r\n      (remove)=\"remove($event)\"\r\n    ></abp-toast>\r\n  }\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}@media only screen and (max-width:768px){.abp-toast-container{min-width:100%}}\n"] }]
-        }], propDecorators: { top: [{
-                type: Input
-            }], right: [{
-                type: Input
-            }], bottom: [{
-                type: Input
-            }], left: [{
-                type: Input
-            }], toastKey: [{
-                type: Input
-            }], onWindowResize: [{
-                type: HostListener,
-                args: ['window:resize']
-            }] } });
+            args: [{ selector: 'abp-toast-container', animations: [toastInOut], imports: [ToastComponent], host: {
+                        '(window:resize)': 'onWindowResize()'
+                    }, template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top() || 'auto'\"\r\n  [style.right]=\"right() || 'auto'\"\r\n  [style.bottom]=\"bottom() || 'auto'\"\r\n  [style.left]=\"left() || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  @for (toast of toasts; track toast.options?.id) {\r\n    <abp-toast\r\n      [toast]=\"toast\"\r\n      (remove)=\"remove($event)\"\r\n    ></abp-toast>\r\n  }\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}@media only screen and (max-width:768px){.abp-toast-container{min-width:100%}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { top: [{ type: i0.Input, args: [{ isSignal: true, alias: "top", required: false }] }], rightInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "right", required: false }] }], bottom: [{ type: i0.Input, args: [{ isSignal: true, alias: "bottom", required: false }] }], left: [{ type: i0.Input, args: [{ isSignal: true, alias: "left", required: false }] }], toastKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "toastKey", required: false }] }] } });
 
 class ToasterService {
     setContainer() {
@@ -1880,134 +1848,128 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
  * https://abp.io/docs/latest/framework/ui/angular/show-password-directive
  */
 class PasswordComponent extends AbstractNgModelComponent {
+    constructor() {
+        super(...arguments);
+        this.inputId = input.required(...(ngDevMode ? [{ debugName: "inputId" }] : []));
+        this.formControlName = input.required(...(ngDevMode ? [{ debugName: "formControlName" }] : []));
+    }
     toggleFieldTextType() {
         this.fieldTextType = !this.fieldTextType;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: PasswordComponent, isStandalone: true, selector: "abp-password", inputs: { inputId: "inputId", formControlName: "formControlName" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: PasswordComponent, isStandalone: true, selector: "abp-password", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: true, transformFunction: null }, formControlName: { classPropertyName: "formControlName", publicName: "formControlName", isSignal: true, isRequired: true, transformFunction: null } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PasswordComponent),
                 multi: true,
             },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"input-group\" validationTarget>\r\n  <input\r\n    [type]=\"fieldTextType ? 'text' : 'password'\"\r\n    class=\"form-control\"\r\n    [id]=\"inputId\"\r\n    [(ngModel)]=\"value\"\r\n  />\r\n\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"toggleFieldTextType()\">\r\n    <i\r\n      class=\"fa\"\r\n      aria-hidden=\"true\"\r\n      [ngClass]=\"{\r\n        'fa-eye-slash': !fieldTextType,\r\n        'fa-eye': fieldTextType\r\n      }\"\r\n    ></i>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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: NgxValidateCoreModule }, { kind: "directive", type: i2.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }] }); }
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"input-group\" validationTarget>\r\n  <input\r\n    [type]=\"fieldTextType ? 'text' : 'password'\"\r\n    class=\"form-control\"\r\n    [id]=\"inputId()\"\r\n    [(ngModel)]=\"value\"\r\n  />\r\n\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"toggleFieldTextType()\">\r\n    <i\r\n      class=\"fa\"\r\n      aria-hidden=\"true\"\r\n      [class]=\"{\r\n        'fa-eye-slash': !fieldTextType,\r\n        'fa-eye': fieldTextType\r\n      }\"\r\n    ></i>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i2.ValidationTargetDirective, selector: "[validationTarget]", exportAs: ["validationTarget"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-password', imports: [NgClass, FormsModule, NgxValidateCoreModule], providers: [
+            args: [{ selector: 'abp-password', imports: [FormsModule, NgxValidateCoreModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => PasswordComponent),
                             multi: true,
                         },
-                    ], template: "<div class=\"input-group\" validationTarget>\r\n  <input\r\n    [type]=\"fieldTextType ? 'text' : 'password'\"\r\n    class=\"form-control\"\r\n    [id]=\"inputId\"\r\n    [(ngModel)]=\"value\"\r\n  />\r\n\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"toggleFieldTextType()\">\r\n    <i\r\n      class=\"fa\"\r\n      aria-hidden=\"true\"\r\n      [ngClass]=\"{\r\n        'fa-eye-slash': !fieldTextType,\r\n        'fa-eye': fieldTextType\r\n      }\"\r\n    ></i>\r\n  </button>\r\n</div>\r\n" }]
-        }], propDecorators: { inputId: [{
-                type: Input
-            }], formControlName: [{
-                type: Input
-            }] } });
+                    ], template: "<div class=\"input-group\" validationTarget>\r\n  <input\r\n    [type]=\"fieldTextType ? 'text' : 'password'\"\r\n    class=\"form-control\"\r\n    [id]=\"inputId()\"\r\n    [(ngModel)]=\"value\"\r\n  />\r\n\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"toggleFieldTextType()\">\r\n    <i\r\n      class=\"fa\"\r\n      aria-hidden=\"true\"\r\n      [class]=\"{\r\n        'fa-eye-slash': !fieldTextType,\r\n        'fa-eye': fieldTextType\r\n      }\"\r\n    ></i>\r\n  </button>\r\n</div>\r\n" }]
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: true }] }], formControlName: [{ type: i0.Input, args: [{ isSignal: true, alias: "formControlName", required: true }] }] } });
 
 class CardBodyComponent {
     constructor() {
         this.componentClass = 'card-body';
+        this.cardBodyClass = input(undefined, ...(ngDevMode ? [{ debugName: "cardBodyClass" }] : []));
+        this.cardBodyStyle = input(undefined, ...(ngDevMode ? [{ debugName: "cardBodyStyle" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: CardBodyComponent, isStandalone: true, selector: "abp-card-body", inputs: { cardBodyClass: "cardBodyClass", cardBodyStyle: "cardBodyStyle" }, host: { properties: { "class": "this.componentClass" } }, ngImport: i0, template: ` <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: CardBodyComponent, isStandalone: true, selector: "abp-card-body", inputs: { cardBodyClass: { classPropertyName: "cardBodyClass", publicName: "cardBodyClass", isSignal: true, isRequired: false, transformFunction: null }, cardBodyStyle: { classPropertyName: "cardBodyStyle", publicName: "cardBodyStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.componentClass" } }, ngImport: i0, template: ` <div [class]="cardBodyClass()" [style]="cardBodyStyle()">
     <ng-content></ng-content>
-  </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  </div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardBodyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'abp-card-body',
-                    template: ` <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle">
+                    template: ` <div [class]="cardBodyClass()" [style]="cardBodyStyle()">
     <ng-content></ng-content>
   </div>`,
-                    imports: [NgClass, NgStyle],
                 }]
         }], propDecorators: { componentClass: [{
                 type: HostBinding,
                 args: ['class']
-            }], cardBodyClass: [{
-                type: Input
-            }], cardBodyStyle: [{
-                type: Input
-            }] } });
+            }], cardBodyClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardBodyClass", required: false }] }], cardBodyStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardBodyStyle", required: false }] }] } });
 
 class CardComponent {
+    constructor() {
+        this.cardClass = input(undefined, ...(ngDevMode ? [{ debugName: "cardClass" }] : []));
+        this.cardStyle = input(undefined, ...(ngDevMode ? [{ debugName: "cardStyle" }] : []));
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: CardComponent, isStandalone: true, selector: "abp-card", inputs: { cardClass: "cardClass", cardStyle: "cardStyle" }, ngImport: i0, template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: CardComponent, isStandalone: true, selector: "abp-card", inputs: { cardClass: { classPropertyName: "cardClass", publicName: "cardClass", isSignal: true, isRequired: false, transformFunction: null }, cardStyle: { classPropertyName: "cardStyle", publicName: "cardStyle", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: ` <div class="card" [class]="cardClass()" [style]="cardStyle()">
     <ng-content></ng-content>
-  </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  </div>`, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'abp-card',
-                    template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
+                    template: ` <div class="card" [class]="cardClass()" [style]="cardStyle()">
     <ng-content></ng-content>
   </div>`,
-                    imports: [NgClass, NgStyle],
+                    imports: [],
                 }]
-        }], propDecorators: { cardClass: [{
-                type: Input
-            }], cardStyle: [{
-                type: Input
-            }] } });
+        }], propDecorators: { cardClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardClass", required: false }] }], cardStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardStyle", required: false }] }] } });
 
 class CardHeaderComponent {
     constructor() {
         this.componentClass = 'card-header';
+        this.cardHeaderClass = input(undefined, ...(ngDevMode ? [{ debugName: "cardHeaderClass" }] : []));
+        this.cardHeaderStyle = input(undefined, ...(ngDevMode ? [{ debugName: "cardHeaderStyle" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: CardHeaderComponent, isStandalone: true, selector: "abp-card-header", inputs: { cardHeaderClass: "cardHeaderClass", cardHeaderStyle: "cardHeaderStyle" }, host: { properties: { "class": "this.componentClass" } }, ngImport: i0, template: `
-    <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: CardHeaderComponent, isStandalone: true, selector: "abp-card-header", inputs: { cardHeaderClass: { classPropertyName: "cardHeaderClass", publicName: "cardHeaderClass", isSignal: true, isRequired: false, transformFunction: null }, cardHeaderStyle: { classPropertyName: "cardHeaderStyle", publicName: "cardHeaderStyle", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.componentClass" } }, ngImport: i0, template: `
+    <div [class]="cardHeaderClass()" [style]="cardHeaderStyle()">
       <ng-content></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-card-header', template: `
-    <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
+    <div [class]="cardHeaderClass()" [style]="cardHeaderStyle()">
       <ng-content></ng-content>
     </div>
-  `, imports: [NgClass, NgStyle] }]
+  `, imports: [] }]
         }], propDecorators: { componentClass: [{
                 type: HostBinding,
                 args: ['class']
-            }], cardHeaderClass: [{
-                type: Input
-            }], cardHeaderStyle: [{
-                type: Input
-            }] } });
+            }], cardHeaderClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardHeaderClass", required: false }] }], cardHeaderStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardHeaderStyle", required: false }] }] } });
 
 class CardFooterComponent {
     constructor() {
         this.componentClass = 'card-footer';
+        this.cardFooterStyle = input(undefined, ...(ngDevMode ? [{ debugName: "cardFooterStyle" }] : []));
+        this.cardFooterClass = input(undefined, ...(ngDevMode ? [{ debugName: "cardFooterClass" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.9", type: CardFooterComponent, isStandalone: true, selector: "abp-card-footer", inputs: { cardFooterStyle: "cardFooterStyle", cardFooterClass: "cardFooterClass" }, host: { properties: { "class": "this.componentClass" } }, ngImport: i0, template: `
-    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.0.9", type: CardFooterComponent, isStandalone: true, selector: "abp-card-footer", inputs: { cardFooterStyle: { classPropertyName: "cardFooterStyle", publicName: "cardFooterStyle", isSignal: true, isRequired: false, transformFunction: null }, cardFooterClass: { classPropertyName: "cardFooterClass", publicName: "cardFooterClass", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.componentClass" } }, ngImport: i0, template: `
+    <div [style]="cardFooterStyle()" [class]="cardFooterClass()">
       <ng-content></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  `, isInline: true }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: CardFooterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-card-footer', template: `
-    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
+    <div [style]="cardFooterStyle()" [class]="cardFooterClass()">
       <ng-content></ng-content>
     </div>
-  `, imports: [NgClass, NgStyle] }]
+  `, imports: [] }]
         }], propDecorators: { componentClass: [{
                 type: HostBinding,
                 args: ['class']
-            }], cardFooterStyle: [{
-                type: Input
-            }], cardFooterClass: [{
-                type: Input
-            }] } });
+            }], cardFooterStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardFooterStyle", required: false }] }], cardFooterClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "cardFooterClass", required: false }] }] } });
 
 class CardTitleDirective {
     constructor() {
@@ -2118,14 +2080,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
 class FormCheckboxComponent extends AbstractNgModelComponent {
     constructor() {
         super(...arguments);
-        this.labelClass = 'form-check-label';
-        this.checkboxClass = 'form-check-input';
-        this.checkboxReadonly = false;
-        this.checkboxBlur = new EventEmitter();
-        this.checkboxFocus = new EventEmitter();
+        this.label = input(undefined, ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.labelClass = input('form-check-label', ...(ngDevMode ? [{ debugName: "labelClass" }] : []));
+        this.checkboxId = input.required(...(ngDevMode ? [{ debugName: "checkboxId" }] : []));
+        this.checkboxStyle = input(undefined, ...(ngDevMode ? [{ debugName: "checkboxStyle" }] : []));
+        this.checkboxClass = input('form-check-input', ...(ngDevMode ? [{ debugName: "checkboxClass" }] : []));
+        this.checkboxReadonly = input(false, ...(ngDevMode ? [{ debugName: "checkboxReadonly" }] : []));
+        this.checkboxBlur = output();
+        this.checkboxFocus = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: FormCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: FormCheckboxComponent, isStandalone: true, selector: "abp-checkbox", inputs: { label: "label", labelClass: "labelClass", checkboxId: "checkboxId", checkboxStyle: "checkboxStyle", checkboxClass: "checkboxClass", checkboxReadonly: "checkboxReadonly" }, outputs: { checkboxBlur: "checkboxBlur", checkboxFocus: "checkboxFocus" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: FormCheckboxComponent, isStandalone: true, selector: "abp-checkbox", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, checkboxId: { classPropertyName: "checkboxId", publicName: "checkboxId", isSignal: true, isRequired: true, transformFunction: null }, checkboxStyle: { classPropertyName: "checkboxStyle", publicName: "checkboxStyle", isSignal: true, isRequired: false, transformFunction: null }, checkboxClass: { classPropertyName: "checkboxClass", publicName: "checkboxClass", isSignal: true, isRequired: false, transformFunction: null }, checkboxReadonly: { classPropertyName: "checkboxReadonly", publicName: "checkboxReadonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { checkboxBlur: "checkboxBlur", checkboxFocus: "checkboxFocus" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FormCheckboxComponent),
@@ -2136,20 +2101,20 @@ class FormCheckboxComponent extends AbstractNgModelComponent {
       <input
         type="checkbox"
         [(ngModel)]="value"
-        [id]="checkboxId"
-        [readonly]="checkboxReadonly"
-        [ngClass]="checkboxClass"
-        [ngStyle]="checkboxStyle"
-        (blur)="checkboxBlur.next()"
-        (focus)="checkboxFocus.next()"
+        [id]="checkboxId()"
+        [readonly]="checkboxReadonly()"
+        [class]="checkboxClass()"
+        [style]="checkboxStyle()"
+        (blur)="checkboxBlur.emit()"
+        (focus)="checkboxFocus.emit()"
       />
-      @if (label) {
-        <label [ngClass]="labelClass" [for]="checkboxId">
-          {{ label | abpLocalization }}
+      @if (label()) {
+        <label [class]="labelClass()" [for]="checkboxId()">
+          {{ label() | abpLocalization }}
         </label>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: FormCheckboxComponent, decorators: [{
             type: Component,
@@ -2160,16 +2125,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
       <input
         type="checkbox"
         [(ngModel)]="value"
-        [id]="checkboxId"
-        [readonly]="checkboxReadonly"
-        [ngClass]="checkboxClass"
-        [ngStyle]="checkboxStyle"
-        (blur)="checkboxBlur.next()"
-        (focus)="checkboxFocus.next()"
+        [id]="checkboxId()"
+        [readonly]="checkboxReadonly()"
+        [class]="checkboxClass()"
+        [style]="checkboxStyle()"
+        (blur)="checkboxBlur.emit()"
+        (focus)="checkboxFocus.emit()"
       />
-      @if (label) {
-        <label [ngClass]="labelClass" [for]="checkboxId">
-          {{ label | abpLocalization }}
+      @if (label()) {
+        <label [class]="labelClass()" [for]="checkboxId()">
+          {{ label() | abpLocalization }}
         </label>
       }
     </div>
@@ -2181,39 +2146,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             multi: true,
                         },
                     ],
-                    imports: [NgClass, NgStyle, FormsModule, LocalizationPipe],
+                    imports: [FormsModule, LocalizationPipe],
                 }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], labelClass: [{
-                type: Input
-            }], checkboxId: [{
-                type: Input
-            }], checkboxStyle: [{
-                type: Input
-            }], checkboxClass: [{
-                type: Input
-            }], checkboxReadonly: [{
-                type: Input
-            }], checkboxBlur: [{
-                type: Output
-            }], checkboxFocus: [{
-                type: Output
-            }] } });
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], checkboxId: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxId", required: true }] }], checkboxStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxStyle", required: false }] }], checkboxClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxClass", required: false }] }], checkboxReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "checkboxReadonly", required: false }] }], checkboxBlur: [{ type: i0.Output, args: ["checkboxBlur"] }], checkboxFocus: [{ type: i0.Output, args: ["checkboxFocus"] }] } });
 
 class FormInputComponent extends AbstractNgModelComponent {
     constructor() {
         super(...arguments);
-        this.inputReadonly = false;
-        this.label = '';
-        this.labelClass = 'form-label';
-        this.inputPlaceholder = '';
-        this.inputClass = 'form-control';
-        this.formBlur = new EventEmitter();
-        this.formFocus = new EventEmitter();
+        this.inputId = input(...(ngDevMode ? [undefined, { debugName: "inputId" }] : []));
+        this.inputReadonly = input(false, ...(ngDevMode ? [{ debugName: "inputReadonly" }] : []));
+        this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+        this.labelClass = input('form-label', ...(ngDevMode ? [{ debugName: "labelClass" }] : []));
+        this.inputPlaceholder = input('', ...(ngDevMode ? [{ debugName: "inputPlaceholder" }] : []));
+        this.inputStyle = input(undefined, ...(ngDevMode ? [{ debugName: "inputStyle" }] : []));
+        this.inputClass = input('form-control', ...(ngDevMode ? [{ debugName: "inputClass" }] : []));
+        this.formBlur = output();
+        this.formFocus = output();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: FormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: FormInputComponent, isStandalone: true, selector: "abp-form-input", inputs: { inputId: "inputId", inputReadonly: "inputReadonly", label: "label", labelClass: "labelClass", inputPlaceholder: "inputPlaceholder", inputStyle: "inputStyle", inputClass: "inputClass" }, outputs: { formBlur: "formBlur", formFocus: "formFocus" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.9", type: FormInputComponent, isStandalone: true, selector: "abp-form-input", inputs: { inputId: { classPropertyName: "inputId", publicName: "inputId", isSignal: true, isRequired: false, transformFunction: null }, inputReadonly: { classPropertyName: "inputReadonly", publicName: "inputReadonly", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelClass: { classPropertyName: "labelClass", publicName: "labelClass", isSignal: true, isRequired: false, transformFunction: null }, inputPlaceholder: { classPropertyName: "inputPlaceholder", publicName: "inputPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, inputStyle: { classPropertyName: "inputStyle", publicName: "inputStyle", isSignal: true, isRequired: false, transformFunction: null }, inputClass: { classPropertyName: "inputClass", publicName: "inputClass", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formBlur: "formBlur", formFocus: "formFocus" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => FormInputComponent),
@@ -2221,24 +2172,24 @@ class FormInputComponent extends AbstractNgModelComponent {
             },
         ], usesInheritance: true, ngImport: i0, template: `
     <div class="mb-3">
-      @if (label) {
-        <label [ngClass]="labelClass" [for]="inputId">
-          {{ label | abpLocalization }}
+      @if (label()) {
+        <label [class]="labelClass()" [for]="inputId()">
+          {{ label() | abpLocalization }}
         </label>
       }
       <input
         type="text"
-        [id]="inputId"
-        [placeholder]="inputPlaceholder"
-        [readonly]="inputReadonly"
-        [ngClass]="inputClass"
-        [ngStyle]="inputStyle"
-        (blur)="formBlur.next()"
-        (focus)="formFocus.next()"
+        [id]="inputId()"
+        [placeholder]="inputPlaceholder()"
+        [readonly]="inputReadonly()"
+        [class]="inputClass()"
+        [style]="inputStyle()"
+        (blur)="formBlur.emit()"
+        (focus)="formFocus.emit()"
         [(ngModel)]="value"
       />
     </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: FormInputComponent, decorators: [{
             type: Component,
@@ -2246,20 +2197,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     selector: 'abp-form-input',
                     template: `
     <div class="mb-3">
-      @if (label) {
-        <label [ngClass]="labelClass" [for]="inputId">
-          {{ label | abpLocalization }}
+      @if (label()) {
+        <label [class]="labelClass()" [for]="inputId()">
+          {{ label() | abpLocalization }}
         </label>
       }
       <input
         type="text"
-        [id]="inputId"
-        [placeholder]="inputPlaceholder"
-        [readonly]="inputReadonly"
-        [ngClass]="inputClass"
-        [ngStyle]="inputStyle"
-        (blur)="formBlur.next()"
-        (focus)="formFocus.next()"
+        [id]="inputId()"
+        [placeholder]="inputPlaceholder()"
+        [readonly]="inputReadonly()"
+        [class]="inputClass()"
+        [style]="inputStyle()"
+        (blur)="formBlur.emit()"
+        (focus)="formFocus.emit()"
         [(ngModel)]="value"
       />
     </div>
@@ -2271,27 +2222,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                             multi: true,
                         },
                     ],
-                    imports: [NgClass, NgStyle, LocalizationPipe, FormsModule],
+                    imports: [LocalizationPipe, FormsModule],
                 }]
-        }], propDecorators: { inputId: [{
-                type: Input
-            }], inputReadonly: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], labelClass: [{
-                type: Input
-            }], inputPlaceholder: [{
-                type: Input
-            }], inputStyle: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }], formBlur: [{
-                type: Output
-            }], formFocus: [{
-                type: Output
-            }] } });
+        }], propDecorators: { inputId: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputId", required: false }] }], inputReadonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputReadonly", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelClass", required: false }] }], inputPlaceholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputPlaceholder", required: false }] }], inputStyle: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputStyle", required: false }] }], inputClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputClass", required: false }] }], formBlur: [{ type: i0.Output, args: ["formBlur"] }], formFocus: [{ type: i0.Output, args: ["formFocus"] }] } });
 
 class InternetConnectionStatusComponent {
     constructor() {
@@ -2358,84 +2291,75 @@ class EllipsisDirective {
     constructor() {
         this.cdRef = inject(ChangeDetectorRef);
         this.elRef = inject(ElementRef);
-        this.enabled = true;
-    }
-    get inlineClass() {
-        return this.enabled && this.width;
-    }
-    get class() {
-        return this.enabled && !this.width;
-    }
-    get maxWidth() {
-        return this.enabled && this.width ? this.width || '170px' : undefined;
+        this.width = input(undefined, { ...(ngDevMode ? { debugName: "width" } : {}), alias: 'abpEllipsis' });
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : []));
+        this.enabled = input(true, { ...(ngDevMode ? { debugName: "enabled" } : {}), alias: 'abpEllipsisEnabled' });
+        this.autoTitle = signal(undefined, ...(ngDevMode ? [{ debugName: "autoTitle" }] : []));
+        this.effectiveTitle = computed(() => this.title() || this.autoTitle(), ...(ngDevMode ? [{ debugName: "effectiveTitle" }] : []));
+        this.inlineClass = computed(() => this.enabled() && !!this.width(), ...(ngDevMode ? [{ debugName: "inlineClass" }] : []));
+        this.ellipsisClass = computed(() => this.enabled() && !this.width(), ...(ngDevMode ? [{ debugName: "ellipsisClass" }] : []));
+        this.maxWidth = computed(() => {
+            const width = this.width();
+            return this.enabled() && width ? width || '170px' : undefined;
+        }, ...(ngDevMode ? [{ debugName: "maxWidth" }] : []));
     }
     ngAfterViewInit() {
-        this.title = this.title || this.elRef.nativeElement.innerText;
-        this.cdRef.detectChanges();
+        if (!this.title()) {
+            this.autoTitle.set(this.elRef.nativeElement.innerText);
+            this.cdRef.detectChanges();
+        }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: EllipsisDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: EllipsisDirective, isStandalone: true, selector: "[abpEllipsis]", inputs: { width: ["abpEllipsis", "width"], title: "title", enabled: ["abpEllipsisEnabled", "enabled"] }, host: { properties: { "title": "this.title", "class.abp-ellipsis-inline": "this.inlineClass", "class.abp-ellipsis": "this.class", "style.max-width": "this.maxWidth" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: EllipsisDirective, isStandalone: true, selector: "[abpEllipsis]", inputs: { width: { classPropertyName: "width", publicName: "abpEllipsis", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, enabled: { classPropertyName: "enabled", publicName: "abpEllipsisEnabled", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "title": "effectiveTitle()", "class.abp-ellipsis-inline": "inlineClass()", "class.abp-ellipsis": "ellipsisClass()", "style.max-width": "maxWidth()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: EllipsisDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[abpEllipsis]',
+                    host: {
+                        '[title]': 'effectiveTitle()',
+                        '[class.abp-ellipsis-inline]': 'inlineClass()',
+                        '[class.abp-ellipsis]': 'ellipsisClass()',
+                        '[style.max-width]': 'maxWidth()'
+                    }
                 }]
-        }], propDecorators: { width: [{
-                type: Input,
-                args: ['abpEllipsis']
-            }], title: [{
-                type: HostBinding,
-                args: ['title']
-            }, {
-                type: Input
-            }], enabled: [{
-                type: Input,
-                args: ['abpEllipsisEnabled']
-            }], inlineClass: [{
-                type: HostBinding,
-                args: ['class.abp-ellipsis-inline']
-            }], class: [{
-                type: HostBinding,
-                args: ['class.abp-ellipsis']
-            }], maxWidth: [{
-                type: HostBinding,
-                args: ['style.max-width']
-            }] } });
+        }], propDecorators: { width: [{ type: i0.Input, args: [{ isSignal: true, alias: "abpEllipsis", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], enabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "abpEllipsisEnabled", required: false }] }] } });
 
 class LoadingDirective {
     constructor() {
         this.elRef = inject(ElementRef);
-        this.cdRes = inject(ComponentFactoryResolver);
         this.injector = inject(Injector);
         this.renderer = inject(Renderer2);
-        this.position = 'relative';
-        this.delay = 0;
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.loading = input(false, { ...(ngDevMode ? { debugName: "loading" } : {}), alias: 'abpLoading' });
+        this.targetElementInput = input(undefined, { ...(ngDevMode ? { debugName: "targetElementInput" } : {}), alias: 'abpLoadingTargetElement' });
+        this.delay = input(0, { ...(ngDevMode ? { debugName: "delay" } : {}), alias: 'abpLoadingDelay' });
+        this.componentRef = null;
         this.rootNode = null;
         this.timerSubscription = null;
+        effect(() => {
+            const newValue = this.loading();
+            this.handleLoadingChange(newValue);
+        });
     }
-    get loading() {
-        return this._loading;
-    }
-    set loading(newValue) {
+    handleLoadingChange(newValue) {
         setTimeout(() => {
             if (!newValue && this.timerSubscription) {
                 this.timerSubscription.unsubscribe();
                 this.timerSubscription = null;
-                this._loading = newValue;
                 if (this.rootNode) {
                     this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
                     this.rootNode = null;
                 }
                 return;
             }
-            this.timerSubscription = timer(this.delay)
+            this.timerSubscription = timer(this.delay())
                 .pipe(take(1))
                 .subscribe(() => {
                 if (!this.componentRef) {
-                    this.componentRef = this.cdRes
-                        .resolveComponentFactory(LoadingComponent)
-                        .create(this.injector);
+                    this.componentRef = this.viewContainerRef.createComponent(LoadingComponent, {
+                        injector: this.injector
+                    });
                 }
                 if (newValue && !this.rootNode) {
                     this.rootNode = this.componentRef.hostView.rootNodes[0];
@@ -2445,12 +2369,12 @@ class LoadingDirective {
                     this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
                     this.rootNode = null;
                 }
-                this._loading = newValue;
                 this.timerSubscription = null;
             });
         }, 0);
     }
     ngOnInit() {
+        this.targetElement = this.targetElementInput();
         if (!this.targetElement) {
             const { offsetHeight, offsetWidth } = this.elRef.nativeElement;
             if (!offsetHeight && !offsetWidth && this.elRef.nativeElement.children?.length) {
@@ -2467,30 +2391,21 @@ class LoadingDirective {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: LoadingDirective, isStandalone: true, selector: "[abpLoading]", inputs: { loading: ["abpLoading", "loading"], targetElement: ["abpLoadingTargetElement", "targetElement"], delay: ["abpLoadingDelay", "delay"] }, host: { properties: { "style.position": "this.position" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: LoadingDirective, isStandalone: true, selector: "[abpLoading]", inputs: { loading: { classPropertyName: "loading", publicName: "abpLoading", isSignal: true, isRequired: false, transformFunction: null }, targetElementInput: { classPropertyName: "targetElementInput", publicName: "abpLoadingTargetElement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "abpLoadingDelay", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "style.position": "\"relative\"" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: LoadingDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[abpLoading]',
+                    host: {
+                        '[style.position]': '"relative"'
+                    }
                 }]
-        }], propDecorators: { position: [{
-                type: HostBinding,
-                args: ['style.position']
-            }], loading: [{
-                type: Input,
-                args: ['abpLoading']
-            }], targetElement: [{
-                type: Input,
-                args: ['abpLoadingTargetElement']
-            }], delay: [{
-                type: Input,
-                args: ['abpLoadingDelay']
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "abpLoading", required: false }] }], targetElementInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "abpLoadingTargetElement", required: false }] }], delay: [{ type: i0.Input, args: [{ isSignal: true, alias: "abpLoadingDelay", required: false }] }] } });
 
 class NgxDatatableDefaultDirective {
     get classes() {
-        return `ngx-datatable ${this.class}`;
+        return `ngx-datatable ${this.class()}`;
     }
     constructor() {
         this.table = inject(DatatableComponent);
@@ -2498,7 +2413,7 @@ class NgxDatatableDefaultDirective {
         this.platformId = inject(PLATFORM_ID);
         this.subscription = new Subscription();
         this.resizeDiff = 0;
-        this.class = 'material bordered';
+        this.class = input('material bordered', ...(ngDevMode ? [{ debugName: "class" }] : []));
         this.table.columnMode = ColumnMode.force;
         this.table.footerHeight = 50;
         this.table.headerHeight = 50;
@@ -2541,7 +2456,7 @@ class NgxDatatableDefaultDirective {
         this.subscription.unsubscribe();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgxDatatableDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgxDatatableDefaultDirective, isStandalone: true, selector: "ngx-datatable[default]", inputs: { class: "class" }, host: { properties: { "class": "this.classes" } }, exportAs: ["ngxDatatableDefault"], ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: NgxDatatableDefaultDirective, isStandalone: true, selector: "ngx-datatable[default]", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "this.classes" } }, exportAs: ["ngxDatatableDefault"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgxDatatableDefaultDirective, decorators: [{
             type: Directive,
@@ -2550,9 +2465,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     selector: 'ngx-datatable[default]',
                     exportAs: 'ngxDatatableDefault',
                 }]
-        }], ctorParameters: () => [], propDecorators: { class: [{
-                type: Input
-            }], classes: [{
+        }], ctorParameters: () => [], propDecorators: { class: [{ type: i0.Input, args: [{ isSignal: true, alias: "class", required: false }] }], classes: [{
                 type: HostBinding,
                 args: ['class']
             }] } });
@@ -2566,6 +2479,7 @@ class NgxDatatableListDirective {
         this.ngxDatatableMessages = inject(NGX_DATATABLE_MESSAGES, { optional: true });
         this.viewContainerRef = inject(ViewContainerRef);
         this.renderer = inject(Renderer2);
+        this.list = input.required(...(ngDevMode ? [{ debugName: "list" }] : []));
         this.setInitialValues();
     }
     ngDoCheck() {
@@ -2585,7 +2499,7 @@ class NgxDatatableListDirective {
         this.table.offset = page;
     }
     subscribeToRequestStatus() {
-        const requestStatus$ = this.list.requestStatus$.pipe(distinctUntilChanged());
+        const requestStatus$ = this.list().requestStatus$.pipe(distinctUntilChanged());
         const { emptyMessage, errorMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages;
         requestStatus$.subscribe(status => {
             this.table.loadingIndicator = false;
@@ -2643,15 +2557,16 @@ class NgxDatatableListDirective {
         this.table.sort
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(({ sorts: [{ prop, dir }] }) => {
-            if (prop === this.list.sortKey && this.list.sortOrder === 'desc') {
-                this.list.sortKey = '';
-                this.list.sortOrder = '';
+            const list = this.list();
+            if (prop === list.sortKey && list.sortOrder === 'desc') {
+                list.sortKey = '';
+                list.sortOrder = '';
                 this.table.sorts = [];
                 this.cdRef.detectChanges();
             }
             else {
-                this.list.sortKey = prop;
-                this.list.sortOrder = dir;
+                list.sortKey = prop;
+                list.sortOrder = dir;
             }
         });
     }
@@ -2661,35 +2576,35 @@ class NgxDatatableListDirective {
         });
     }
     subscribeToQuery() {
-        this.list.query$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            const offset = this.list.page;
+        this.list().query$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            const offset = this.list().page;
             if (this.table.offset !== offset)
                 this.table.offset = offset;
         });
     }
     setTablePage(pageNum) {
-        this.list.page = pageNum;
+        this.list().page = pageNum;
         this.table.offset = pageNum;
     }
     refreshPageIfDataExist() {
         if (this.table.rows?.length < 1 && this.table.count > 0) {
-            let maxPage = Math.floor(Number(this.table.count / this.list.maxResultCount));
-            if (this.table.count < this.list.maxResultCount) {
+            let maxPage = Math.floor(Number(this.table.count / this.list().maxResultCount));
+            if (this.table.count < this.list().maxResultCount) {
                 this.setTablePage(0);
                 return;
             }
-            if (this.table.count % this.list.maxResultCount === 0) {
+            if (this.table.count % this.list().maxResultCount === 0) {
                 maxPage -= 1;
             }
-            if (this.list.page < maxPage) {
-                this.setTablePage(this.list.page);
+            if (this.list().page < maxPage) {
+                this.setTablePage(this.list().page);
                 return;
             }
             this.setTablePage(maxPage);
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgxDatatableListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: NgxDatatableListDirective, isStandalone: true, selector: "ngx-datatable[list]", inputs: { list: "list" }, exportAs: ["ngxDatatableList"], usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: NgxDatatableListDirective, isStandalone: true, selector: "ngx-datatable[list]", inputs: { list: { classPropertyName: "list", publicName: "list", isSignal: true, isRequired: true, transformFunction: null } }, exportAs: ["ngxDatatableList"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: NgxDatatableListDirective, decorators: [{
             type: Directive,
@@ -2698,27 +2613,28 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImpor
                     selector: 'ngx-datatable[list]',
                     exportAs: 'ngxDatatableList',
                 }]
-        }], ctorParameters: () => [], propDecorators: { list: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { list: [{ type: i0.Input, args: [{ isSignal: true, alias: "list", required: true }] }] } });
 
 class AbpVisibleDirective {
     constructor() {
         this.viewContainerRef = inject(ViewContainerRef);
         this.templateRef = inject(TemplateRef);
         this.condition$ = of(false);
-    }
-    set abpVisible(value) {
-        this.condition$ = checkType(value);
-        this.subscribeToCondition();
-    }
-    ngOnInit() {
-        this.updateVisibility();
+        this.abpVisible = input(...(ngDevMode ? [undefined, { debugName: "abpVisible" }] : []));
+        effect(() => {
+            const value = this.abpVisible();
+            if (value === this.lastInput)
+                return;
+            this.lastInput = value;
+            this.condition$ = checkType(value);
+            this.subscribeToCondition();
+        });
     }
     ngOnDestroy() {
         this.conditionSubscription?.unsubscribe();
     }
     subscribeToCondition() {
+        this.conditionSubscription?.unsubscribe();
         this.conditionSubscription = this.condition$.subscribe(value => {
             this.isVisible = value;
             this.updateVisibility();
@@ -2733,16 +2649,14 @@ class AbpVisibleDirective {
         this.viewContainerRef.createEmbeddedView(this.templateRef);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AbpVisibleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: AbpVisibleDirective, isStandalone: true, selector: "[abpVisible]", inputs: { abpVisible: "abpVisible" }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: AbpVisibleDirective, isStandalone: true, selector: "[abpVisible]", inputs: { abpVisible: { classPropertyName: "abpVisible", publicName: "abpVisible", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: AbpVisibleDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[abpVisible]',
                 }]
-        }], propDecorators: { abpVisible: [{
-                type: Input
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { abpVisible: [{ type: i0.Input, args: [{ isSignal: true, alias: "abpVisible", required: false }] }] } });
 function checkType(value) {
     if (value instanceof Promise) {
         return from(value);
@@ -2764,25 +2678,24 @@ function checkType(value) {
 class DisabledDirective {
     constructor() {
         this.ngControl = inject(NgControl, { host: true });
-        this.abpDisabled = false;
-    }
-    // Related issue: https://github.com/angular/angular/issues/35330
-    ngOnChanges({ abpDisabled }) {
-        if (this.ngControl.control && abpDisabled) {
-            this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
-        }
+        this.abpDisabled = input(false, ...(ngDevMode ? [{ debugName: "abpDisabled" }] : []));
+        // Related issue: https://github.com/angular/angular/issues/35330
+        this.disabledEffect = effect(() => {
+            const disabled = this.abpDisabled();
+            if (this.ngControl.control) {
+                this.ngControl.control[disabled ? 'disable' : 'enable']();
+            }
+        }, ...(ngDevMode ? [{ debugName: "disabledEffect" }] : []));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DisabledDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.9", type: DisabledDirective, isStandalone: true, selector: "[abpDisabled]", inputs: { abpDisabled: "abpDisabled" }, usesOnChanges: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.0.9", type: DisabledDirective, isStandalone: true, selector: "[abpDisabled]", inputs: { abpDisabled: { classPropertyName: "abpDisabled", publicName: "abpDisabled", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: DisabledDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[abpDisabled]',
                 }]
-        }], propDecorators: { abpDisabled: [{
-                type: Input
-            }] } });
+        }], propDecorators: { abpDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "abpDisabled", required: false }] }] } });
 
 var eFormComponets;
 (function (eFormComponets) {
@@ -3293,10 +3206,8 @@ class BaseThemeSharedModule {
             NgxDatatableListDirective,
             NgxDatatableDefaultDirective,
             PasswordComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: BaseThemeSharedModule, imports: [ButtonComponent,
-            FormInputComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.9", ngImport: i0, type: BaseThemeSharedModule, imports: [FormInputComponent,
             FormCheckboxComponent,
-            HttpErrorWrapperComponent,
             NgxDatatableModule,
             NgxValidateCoreModule,
             CardModule,