@abp/ng.theme.shared 9.3.6 → 10.0.0-rc.2

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

@@ -1,23 +1,19 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ChangeDetectionStrategy, EventEmitter, ViewChild, Output, InjectionToken, Inject, inject, DestroyRef, createComponent, ViewEncapsulation, HostListener, RendererFactory2, Injector, EnvironmentInjector, ApplicationRef, model, input, viewChild, contentChild, output, effect, Optional, Directive, forwardRef, HostBinding, NgModule, ChangeDetectorRef, ViewContainerRef, Renderer2, Host, provideAppInitializer, LOCALE_ID, makeEnvironmentProviders } from '@angular/core';
-import * as i1 from '@angular/common';
-import { formatDate, CommonModule, DOCUMENT } from '@angular/common';
+import { Injectable, Input, Component, inject, 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, LOCALE_ID, makeEnvironmentProviders } from '@angular/core';
+import { formatDate, NgTemplateOutlet, NgClass, AsyncPipe, DOCUMENT, CommonModule, NgStyle, isPlatformBrowser } from '@angular/common';
 import { NgbDateAdapter, NgbTimeAdapter, NgbModal, NgbTooltip, NgbInputDatepickerConfig, NgbTypeaheadConfig, NgbDateParserFormatter } from '@ng-bootstrap/ng-bootstrap';
 import { animation, style, animate, keyframes, trigger, state, transition, useAnimation, query } from '@angular/animations';
-import * as i1$1 from '@angular/router';
-import { RouterModule, Router, ResolveEnd } from '@angular/router';
-import * as i2 from '@abp/ng.core';
-import { LocalizationPipe, getRoutePath, SubscriptionService, PROJECTION_STRATEGY, SORT_COMPARE_FUNC, InternalStore, ContentProjectionService, RouterEvents, AuthService, SessionStateService, DomInsertionService, CONTENT_STRATEGY, ConfigStateService, uuid, AbstractNgModelComponent, InternetConnectionService, LocalizationModule, LocalizationService, getLocaleDirection, HttpErrorReporterService, RoutesService, TENANT_NOT_FOUND_BY_NAME } from '@abp/ng.core';
+import { RouterLink, Router, ResolveEnd } from '@angular/router';
+import { LocalizationPipe, RoutesService, SubscriptionService, RouterEvents, getRoutePath, HttpWaitService, RouterWaitService, ContentProjectionService, PROJECTION_STRATEGY, SORT_COMPARE_FUNC, InternalStore, AuthService, SessionStateService, DomInsertionService, CONTENT_STRATEGY, ConfigStateService, uuid, AbstractNgModelComponent, InternetConnectionService, LocalizationService, getLocaleDirection, HttpErrorReporterService, TENANT_NOT_FOUND_BY_NAME } from '@abp/ng.core';
 import { startWith, map, debounceTime, filter, takeUntil, take, switchMap } from 'rxjs/operators';
 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 i2$1 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
-import * as i3 from '@ngx-validate/core';
+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';
-import * as i1$2 from '@swimlane/ngx-datatable';
-import { ColumnMode, DatatableComponent, NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { DatatableComponent, ColumnMode, NgxDatatableModule } from '@swimlane/ngx-datatable';
 
 class DateTimeAdapter {
     fromModel(value) {
@@ -268,22 +264,22 @@ class BreadcrumbItemsComponent {
         this.items = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$1.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: "20.0.7", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbItemsComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-breadcrumb-items', imports: [CommonModule, RouterModule, 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" }]
+            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
             }] } });
 
 class BreadcrumbComponent {
-    constructor(cdRef, router, routes, subscription, routerEvents) {
-        this.cdRef = cdRef;
-        this.router = router;
-        this.routes = routes;
-        this.subscription = subscription;
-        this.routerEvents = routerEvents;
+    constructor() {
+        this.cdRef = inject(ChangeDetectorRef);
+        this.router = inject(Router);
+        this.routes = inject(RoutesService);
+        this.subscription = inject(SubscriptionService);
+        this.routerEvents = inject(RouterEvents);
         this.segments = [];
     }
     ngOnInit() {
@@ -301,24 +297,21 @@ class BreadcrumbComponent {
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i1$1.Router }, { token: i2.RoutesService }, { token: i2.SubscriptionService }, { token: i2.RouterEvents }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: BreadcrumbComponent, isStandalone: true, selector: "abp-breadcrumb", providers: [SubscriptionService], ngImport: i0, template: "<abp-breadcrumb-items [items]=\"segments\"></abp-breadcrumb-items>\r\n", dependencies: [{ kind: "component", type: BreadcrumbItemsComponent, selector: "abp-breadcrumb-items", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
             args: [{ selector: 'abp-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SubscriptionService], imports: [BreadcrumbItemsComponent], template: "<abp-breadcrumb-items [items]=\"segments\"></abp-breadcrumb-items>\r\n" }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i1$1.Router }, { type: i2.RoutesService }, { type: i2.SubscriptionService }, { type: i2.RouterEvents }] });
+        }] });
 function isAdministration(route) {
     return route.name === "AbpUiNavigation::Menu:Administration" /* eThemeSharedRouteNames.Administration */;
 }
 
 /* eslint-disable @angular-eslint/no-output-native */
 class ButtonComponent {
-    get icon() {
-        return `${this.loading ? 'fa fa-spinner fa-spin' : this.iconClass || 'd-none'}`;
-    }
-    constructor(renderer) {
-        this.renderer = renderer;
+    constructor() {
+        this.renderer = inject(Renderer2);
         this.buttonId = '';
         this.buttonClass = 'btn btn-primary';
         this.buttonType = 'button';
@@ -332,6 +325,9 @@ class ButtonComponent {
         this.abpFocus = new EventEmitter();
         this.abpBlur = new EventEmitter();
     }
+    get icon() {
+        return `${this.loading ? 'fa fa-spinner fa-spin' : this.iconClass || 'd-none'}`;
+    }
     ngOnInit() {
         if (this.attributes) {
             Object.keys(this.attributes).forEach(key => {
@@ -341,7 +337,7 @@ class ButtonComponent {
             });
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", 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: `
     <button
       #button
@@ -356,7 +352,7 @@ class ButtonComponent {
     >
       <i [ngClass]="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"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
@@ -377,9 +373,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
       <i [ngClass]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
   `,
-                    imports: [CommonModule],
+                    imports: [NgClass],
                 }]
-        }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { buttonId: [{
+        }], propDecorators: { buttonId: [{
                 type: Input
             }], buttonClass: [{
                 type: Input
@@ -433,8 +429,8 @@ const DEFAULT_CONFIRMATION_ICONS = {
 };
 
 class ConfirmationComponent {
-    constructor(icons) {
-        this.icons = icons;
+    constructor() {
+        this.icons = inject(CONFIRMATION_ICONS);
         this.confirm = Confirmation.Status.confirm;
         this.reject = Confirmation.Status.reject;
         this.dismiss = Confirmation.Status.dismiss;
@@ -460,16 +456,13 @@ class ConfirmationComponent {
     isIconTemplateExits({ options }) {
         return !!(options && options.iconTemplate);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ConfirmationComponent, deps: [{ token: CONFIRMATION_ICONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ConfirmationComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-confirmation', imports: [CommonModule, 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"] }]
-        }], ctorParameters: () => [{ type: undefined, decorators: [{
-                    type: Inject,
-                    args: [CONFIRMATION_ICONS]
-                }] }] });
+            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"] }]
+        }] });
 
 class HttpErrorWrapperComponent {
     constructor() {
@@ -478,8 +471,8 @@ class HttpErrorWrapperComponent {
         this.window = this.document.defaultView;
         this.router = inject(Router);
         this.status = 0;
-        this.title = 'Oops!';
-        this.details = 'Sorry, an error has occured.';
+        this.title = '_::Oops!';
+        this.details = '_::Sorry, an error has occured.';
         this.customComponent = undefined;
         this.hideCloseIcon = false;
         this.isHomeShow = true;
@@ -539,22 +532,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }] } });
 
 class LoaderBarComponent {
-    set isLoading(value) {
-        this._isLoading = value;
-        this.cdRef.detectChanges();
-    }
-    get isLoading() {
-        return this._isLoading;
-    }
-    get boxShadow() {
-        return `0 0 10px rgba(${this.color}, 0.5)`;
-    }
-    constructor(router, cdRef, subscription, httpWaitService, routerWaitService) {
-        this.router = router;
-        this.cdRef = cdRef;
-        this.subscription = subscription;
-        this.httpWaitService = httpWaitService;
-        this.routerWaitService = routerWaitService;
+    constructor() {
+        this.cdRef = inject(ChangeDetectorRef);
+        this.subscription = inject(SubscriptionService);
+        this.httpWaitService = inject(HttpWaitService);
+        this.routerWaitService = inject(RouterWaitService);
         this.containerClass = 'abp-loader-bar';
         this.color = '#77b6ff';
         this.progressLevel = 0;
@@ -582,6 +564,16 @@ class LoaderBarComponent {
             this.cdRef.detectChanges();
         };
     }
+    set isLoading(value) {
+        this._isLoading = value;
+        this.cdRef.detectChanges();
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    get boxShadow() {
+        return `0 0 10px rgba(${this.color}, 0.5)`;
+    }
     ngOnInit() {
         this.subscribeLoading();
     }
@@ -613,7 +605,7 @@ class LoaderBarComponent {
             return;
         this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LoaderBarComponent, deps: [{ token: i1$1.Router }, { token: i0.ChangeDetectorRef }, { token: i2.SubscriptionService }, { token: i2.HttpWaitService }, { token: i2.RouterWaitService }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LoaderBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", 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">
       <div
@@ -626,7 +618,7 @@ class LoaderBarComponent {
         }"
       ></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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LoaderBarComponent, decorators: [{
             type: Component,
@@ -642,8 +634,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
         }"
       ></div>
     </div>
-  `, providers: [SubscriptionService], imports: [CommonModule], 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: () => [{ type: i1$1.Router }, { type: i0.ChangeDetectorRef }, { type: i2.SubscriptionService }, { type: i2.HttpWaitService }, { type: i2.RouterWaitService }], propDecorators: { isLoading: [{
+  `, 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
@@ -678,8 +670,9 @@ class UserMenu extends NavItem {
 }
 
 class ConfirmationService {
-    constructor(contentProjectionService) {
-        this.contentProjectionService = contentProjectionService;
+    constructor() {
+        this.contentProjectionService = inject(ContentProjectionService);
+        this.document = inject(DOCUMENT);
         this.confirmation$ = new ReplaySubject(1);
         this.clear = (status = Confirmation.Status.dismiss) => {
             this.confirmation$.next(null);
@@ -723,19 +716,19 @@ class ConfirmationService {
         return this.status$;
     }
     listenToEscape() {
-        fromEvent(document, 'keyup')
+        fromEvent(this.document, 'keyup')
             .pipe(takeUntil(this.status$), debounceTime(150), filter((key) => key && key.key === 'Escape'))
             .subscribe(() => {
             this.clear();
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ConfirmationService, deps: [{ token: i2.ContentProjectionService }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ConfirmationService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ConfirmationService, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ConfirmationService, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i2.ContentProjectionService }] });
+        }] });
 
 class AbstractMenuService {
     get items() {
@@ -865,11 +858,11 @@ class ToastComponent {
             this.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-toast', imports: [CommonModule, 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"] }]
+            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: [{
@@ -1581,6 +1574,9 @@ const NGX_DATATABLE_MESSAGES = new InjectionToken('NGX_DATATABLE_MESSAGES');
 
 const SUPPRESS_UNSAVED_CHANGES_WARNING = new InjectionToken('SUPPRESS_UNSAVED_CHANGES_WARNING');
 
+const LOGO_URL_TOKEN = new InjectionToken('LOGO_URL_TOKEN');
+const LOGO_APP_NAME_TOKEN = new InjectionToken('LOGO_APP_NAME_TOKEN');
+
 class RouterErrorHandlerService {
     constructor() {
         this.routerEvents = inject(RouterEvents);
@@ -1668,7 +1664,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
 
 class ModalComponent {
     get modalWindowRef() {
-        return document.querySelector(`ngb-modal-window.${this.modalIdentifier}`);
+        return this.document.querySelector(`ngb-modal-window.${this.modalIdentifier}`);
     }
     get isFormDirty() {
         return Boolean(this.modalWindowRef?.querySelector('.ng-dirty'));
@@ -1681,6 +1677,7 @@ class ModalComponent {
             optional: true,
         });
         this.destroyRef = inject(DestroyRef);
+        this.document = inject(DOCUMENT);
         this.visible = model(false);
         this.busy = input(false, {
             transform: (value) => {
@@ -1787,16 +1784,17 @@ class ModalComponent {
         this.init.emit();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ModalComponent, isStandalone: true, selector: "abp-modal", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, suppressUnsavedChangesWarning: { classPropertyName: "suppressUnsavedChangesWarning", publicName: "suppressUnsavedChangesWarning", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", init: "init", appear: "appear", disappear: "disappear" }, providers: [SubscriptionService], queries: [{ propertyName: "abpHeader", first: true, predicate: ["abpHeader"], descendants: true, isSignal: true }, { propertyName: "abpBody", first: true, predicate: ["abpBody"], descendants: true, isSignal: true }, { propertyName: "abpFooter", first: true, predicate: ["abpFooter"], descendants: true, isSignal: true }, { propertyName: "abpSubmit", first: true, predicate: ButtonComponent, descendants: true, read: ButtonComponent, isSignal: true }], viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n<ng-template #modalContent let-modal>\r\n  @if (abpHeader()) {\r\n    <div id=\"abp-modal-header\" class=\"modal-header abp-modal-header\">\r\n      <ng-container *ngTemplateOutlet=\"abpHeader()\"></ng-container>\r\n      \u200B\r\n      <button\r\n        id=\"abp-modal-close-button\"\r\n        type=\"button\"\r\n        class=\"btn-sm btn-close\"\r\n        aria-label=\"Close\"\r\n        (click)=\"modal.dismiss()\"\r\n      ></button>\r\n    </div>\r\n  }\r\n  @if (abpBody()) {\r\n    <div id=\"abp-modal-body\" class=\"modal-body\">\r\n      <ng-container *ngTemplateOutlet=\"abpBody()\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (abpFooter()) {\r\n    <div id=\"abp-modal-footer\" class=\"modal-footer\">\r\n      <ng-container *ngTemplateOutlet=\"abpFooter()\"></ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".modal.show{display:block!important}.modal-backdrop{opacity:.8}.modal::-webkit-scrollbar{width:7px}.modal::-webkit-scrollbar-track{background:#ddd}.modal::-webkit-scrollbar-thumb{background:#8a8686}.modal-dialog{z-index:1050}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.7", type: ModalComponent, isStandalone: true, selector: "abp-modal", inputs: { visible: { classPropertyName: "visible", publicName: "visible", isSignal: true, isRequired: false, transformFunction: null }, busy: { classPropertyName: "busy", publicName: "busy", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null }, suppressUnsavedChangesWarning: { classPropertyName: "suppressUnsavedChangesWarning", publicName: "suppressUnsavedChangesWarning", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { visible: "visibleChange", init: "init", appear: "appear", disappear: "disappear" }, providers: [SubscriptionService], queries: [{ propertyName: "abpHeader", first: true, predicate: ["abpHeader"], descendants: true, isSignal: true }, { propertyName: "abpBody", first: true, predicate: ["abpBody"], descendants: true, isSignal: true }, { propertyName: "abpFooter", first: true, predicate: ["abpFooter"], descendants: true, isSignal: true }, { propertyName: "abpSubmit", first: true, predicate: ButtonComponent, descendants: true, read: ButtonComponent, isSignal: true }], viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true, isSignal: true }], ngImport: i0, template: "<ng-content></ng-content>\r\n\r\n<ng-template #modalContent let-modal>\r\n  @if (abpHeader()) {\r\n    <div id=\"abp-modal-header\" class=\"modal-header abp-modal-header\">\r\n      <ng-container *ngTemplateOutlet=\"abpHeader()\"></ng-container>\r\n      \u200B\r\n      <button\r\n        id=\"abp-modal-close-button\"\r\n        type=\"button\"\r\n        class=\"btn-sm btn-close\"\r\n        aria-label=\"Close\"\r\n        (click)=\"modal.dismiss()\"\r\n      ></button>\r\n    </div>\r\n  }\r\n  @if (abpBody()) {\r\n    <div id=\"abp-modal-body\" class=\"modal-body\">\r\n      <ng-container *ngTemplateOutlet=\"abpBody()\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (abpFooter()) {\r\n    <div id=\"abp-modal-footer\" class=\"modal-footer\">\r\n      <ng-container *ngTemplateOutlet=\"abpFooter()\"></ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".modal.show{display:block!important}.modal-backdrop{opacity:.8}.modal::-webkit-scrollbar{width:7px}.modal::-webkit-scrollbar-track{background:#ddd}.modal::-webkit-scrollbar-thumb{background:#8a8686}.modal-dialog{z-index:1050}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-modal', providers: [SubscriptionService], imports: [CommonModule], template: "<ng-content></ng-content>\r\n\r\n<ng-template #modalContent let-modal>\r\n  @if (abpHeader()) {\r\n    <div id=\"abp-modal-header\" class=\"modal-header abp-modal-header\">\r\n      <ng-container *ngTemplateOutlet=\"abpHeader()\"></ng-container>\r\n      \u200B\r\n      <button\r\n        id=\"abp-modal-close-button\"\r\n        type=\"button\"\r\n        class=\"btn-sm btn-close\"\r\n        aria-label=\"Close\"\r\n        (click)=\"modal.dismiss()\"\r\n      ></button>\r\n    </div>\r\n  }\r\n  @if (abpBody()) {\r\n    <div id=\"abp-modal-body\" class=\"modal-body\">\r\n      <ng-container *ngTemplateOutlet=\"abpBody()\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (abpFooter()) {\r\n    <div id=\"abp-modal-footer\" class=\"modal-footer\">\r\n      <ng-container *ngTemplateOutlet=\"abpFooter()\"></ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".modal.show{display:block!important}.modal-backdrop{opacity:.8}.modal::-webkit-scrollbar{width:7px}.modal::-webkit-scrollbar-track{background:#ddd}.modal::-webkit-scrollbar-thumb{background:#8a8686}.modal-dialog{z-index:1050}\n"] }]
+            args: [{ selector: 'abp-modal', providers: [SubscriptionService], imports: [NgTemplateOutlet], template: "<ng-content></ng-content>\r\n\r\n<ng-template #modalContent let-modal>\r\n  @if (abpHeader()) {\r\n    <div id=\"abp-modal-header\" class=\"modal-header abp-modal-header\">\r\n      <ng-container *ngTemplateOutlet=\"abpHeader()\"></ng-container>\r\n      \u200B\r\n      <button\r\n        id=\"abp-modal-close-button\"\r\n        type=\"button\"\r\n        class=\"btn-sm btn-close\"\r\n        aria-label=\"Close\"\r\n        (click)=\"modal.dismiss()\"\r\n      ></button>\r\n    </div>\r\n  }\r\n  @if (abpBody()) {\r\n    <div id=\"abp-modal-body\" class=\"modal-body\">\r\n      <ng-container *ngTemplateOutlet=\"abpBody()\"></ng-container>\r\n    </div>\r\n  }\r\n  @if (abpFooter()) {\r\n    <div id=\"abp-modal-footer\" class=\"modal-footer\">\r\n      <ng-container *ngTemplateOutlet=\"abpFooter()\"></ng-container>\r\n    </div>\r\n  }\r\n</ng-template>\r\n", styles: [".modal.show{display:block!important}.modal-backdrop{opacity:.8}.modal::-webkit-scrollbar{width:7px}.modal::-webkit-scrollbar-track{background:#ddd}.modal::-webkit-scrollbar-thumb{background:#8a8686}.modal-dialog{z-index:1050}\n"] }]
         }], ctorParameters: () => [] });
 
 class ModalCloseDirective {
-    constructor(modal) {
-        this.modal = modal;
+    constructor() {
+        this.modal = inject(ModalComponent, { optional: true });
+        const modal = this.modal;
         if (!modal) {
             console.error('Please use abpClose within an abp-modal');
         }
@@ -1804,7 +1802,7 @@ class ModalCloseDirective {
     onClick() {
         this.modal?.close();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ModalCloseDirective, deps: [{ token: ModalComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ModalCloseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: ModalCloseDirective, isStandalone: true, selector: "[abpClose]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ModalCloseDirective, decorators: [{
@@ -1812,9 +1810,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             args: [{
                     selector: '[abpClose]',
                 }]
-        }], ctorParameters: () => [{ type: ModalComponent, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { onClick: [{
+        }], ctorParameters: () => [], propDecorators: { onClick: [{
                 type: HostListener,
                 args: ['click']
             }] } });
@@ -1834,11 +1830,11 @@ class PasswordComponent extends AbstractNgModelComponent {
                 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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: NgxValidateCoreModule }, { kind: "directive", type: i3.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      [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.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: "20.0.7", ngImport: i0, type: PasswordComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-password', imports: [CommonModule, FormsModule, ReactiveFormsModule, NgxValidateCoreModule], providers: [
+            args: [{ selector: 'abp-password', imports: [NgClass, FormsModule, NgxValidateCoreModule], providers: [
                         {
                             provide: NG_VALUE_ACCESSOR,
                             useExisting: forwardRef(() => PasswordComponent),
@@ -1858,7 +1854,7 @@ class CardBodyComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", 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">
     <ng-content></ng-content>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CardBodyComponent, decorators: [{
             type: Component,
@@ -1867,7 +1863,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                     template: ` <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle">
     <ng-content></ng-content>
   </div>`,
-                    imports: [CommonModule],
+                    imports: [NgClass, NgStyle],
                 }]
         }], propDecorators: { componentClass: [{
                 type: HostBinding,
@@ -1882,7 +1878,7 @@ class CardComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
     static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.7", type: CardComponent, isStandalone: true, selector: "abp-card", inputs: { cardClass: "cardClass", cardStyle: "cardStyle" }, ngImport: i0, template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
     <ng-content></ng-content>
-  </div>`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  </div>`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CardComponent, decorators: [{
             type: Component,
@@ -1891,7 +1887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                     template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
     <ng-content></ng-content>
   </div>`,
-                    imports: [CommonModule],
+                    imports: [NgClass, NgStyle],
                 }]
         }], propDecorators: { cardClass: [{
                 type: Input
@@ -1908,7 +1904,7 @@ class CardHeaderComponent {
     <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
       <ng-content></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CardHeaderComponent, decorators: [{
             type: Component,
@@ -1916,7 +1912,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
     <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
       <ng-content></ng-content>
     </div>
-  `, imports: [CommonModule] }]
+  `, imports: [NgClass, NgStyle] }]
         }], propDecorators: { componentClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -1935,7 +1931,7 @@ class CardFooterComponent {
     <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
       <ng-content></ng-content>
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CardFooterComponent, decorators: [{
             type: Component,
@@ -1943,7 +1939,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
     <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
       <ng-content></ng-content>
     </div>
-  `, imports: [CommonModule] }]
+  `, imports: [NgClass, NgStyle] }]
         }], propDecorators: { componentClass: [{
                 type: HostBinding,
                 args: ['class']
@@ -2048,7 +2044,7 @@ class CardModule {
             CardSubtitleDirective,
             CardImgTopDirective,
             CardHeaderDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CardModule, imports: [CARD_COMPONENTS] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CardModule }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: CardModule, decorators: [{
             type: NgModule,
@@ -2093,7 +2089,7 @@ class FormCheckboxComponent extends AbstractNgModelComponent {
         </label>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "20.0.7", ngImport: i0, type: FormCheckboxComponent, decorators: [{
             type: Component,
@@ -2125,7 +2121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             multi: true,
                         },
                     ],
-                    imports: [CommonModule, FormsModule, LocalizationPipe],
+                    imports: [NgClass, NgStyle, FormsModule, LocalizationPipe],
                 }]
         }], propDecorators: { label: [{
                 type: Input
@@ -2182,7 +2178,7 @@ class FormInputComponent extends AbstractNgModelComponent {
         [(ngModel)]="value"
       />
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { 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"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: FormInputComponent, decorators: [{
             type: Component,
@@ -2215,7 +2211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                             multi: true,
                         },
                     ],
-                    imports: [CommonModule, LocalizationPipe, FormsModule],
+                    imports: [NgClass, NgStyle, LocalizationPipe, FormsModule],
                 }]
         }], propDecorators: { inputId: [{
                 type: Input
@@ -2255,11 +2251,11 @@ class InternetConnectionStatusComponent {
         </i>
       </div>
     }
-  `, isInline: true, styles: [".blink{animation:blinker .9s cubic-bezier(.5,0,1,1) infinite alternate}@keyframes blinker{0%{color:#c1c1c1}70%{color:#fa2379}to{color:#fa2379}}.text-blinking{font-size:30px}.status-icon{position:fixed;z-index:999999;top:50%;left:50%;width:30px;text-align:center;margin-left:-15px;margin-top:-15px;translate:transform(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
+  `, isInline: true, styles: [".blink{animation:blinker .9s cubic-bezier(.5,0,1,1) infinite alternate}@keyframes blinker{0%{color:#c1c1c1}70%{color:#fa2379}to{color:#fa2379}}.text-blinking{font-size:30px}.status-icon{position:fixed;z-index:999999;top:50%;left:50%;width:30px;text-align:center;margin-left:-15px;margin-top:-15px;translate:transform(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: InternetConnectionStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-internet-status', imports: [LocalizationModule, NgbTooltip], template: `
+            args: [{ selector: 'abp-internet-status', imports: [LocalizationPipe, NgbTooltip], template: `
     @if (!isOnline()) {
       <div class="status-icon">
         <i
@@ -2299,6 +2295,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
         }] });
 
 class EllipsisDirective {
+    constructor() {
+        this.cdRef = inject(ChangeDetectorRef);
+        this.elRef = inject(ElementRef);
+        this.enabled = true;
+    }
     get inlineClass() {
         return this.enabled && this.width;
     }
@@ -2308,16 +2309,11 @@ class EllipsisDirective {
     get maxWidth() {
         return this.enabled && this.width ? this.width || '170px' : undefined;
     }
-    constructor(cdRef, elRef) {
-        this.cdRef = cdRef;
-        this.elRef = elRef;
-        this.enabled = true;
-    }
     ngAfterViewInit() {
         this.title = this.title || this.elRef.nativeElement.innerText;
         this.cdRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: EllipsisDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: EllipsisDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", 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 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: EllipsisDirective, decorators: [{
@@ -2325,7 +2321,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             args: [{
                     selector: '[abpEllipsis]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { width: [{
+        }], propDecorators: { width: [{
                 type: Input,
                 args: ['abpEllipsis']
             }], title: [{
@@ -2348,6 +2344,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }] } });
 
 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.rootNode = null;
+        this.timerSubscription = null;
+    }
     get loading() {
         return this._loading;
     }
@@ -2384,17 +2390,6 @@ class LoadingDirective {
             });
         }, 0);
     }
-    constructor(elRef, vcRef, cdRes, injector, renderer) {
-        this.elRef = elRef;
-        this.vcRef = vcRef;
-        this.cdRes = cdRes;
-        this.injector = injector;
-        this.renderer = renderer;
-        this.position = 'relative';
-        this.delay = 0;
-        this.rootNode = null;
-        this.timerSubscription = null;
-    }
     ngOnInit() {
         if (!this.targetElement) {
             const { offsetHeight, offsetWidth } = this.elRef.nativeElement;
@@ -2411,7 +2406,7 @@ class LoadingDirective {
             this.timerSubscription.unsubscribe();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LoadingDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: LoadingDirective, isStandalone: true, selector: "[abpLoading]", inputs: { loading: ["abpLoading", "loading"], targetElement: ["abpLoadingTargetElement", "targetElement"], delay: ["abpLoadingDelay", "delay"] }, host: { properties: { "style.position": "this.position" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: LoadingDirective, decorators: [{
@@ -2419,7 +2414,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             args: [{
                     selector: '[abpLoading]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.Renderer2 }], propDecorators: { position: [{
+        }], propDecorators: { position: [{
                 type: HostBinding,
                 args: ['style.position']
             }], loading: [{
@@ -2437,9 +2432,10 @@ class NgxDatatableDefaultDirective {
     get classes() {
         return `ngx-datatable ${this.class}`;
     }
-    constructor(table, document) {
-        this.table = table;
-        this.document = document;
+    constructor() {
+        this.table = inject(DatatableComponent);
+        this.document = inject(DOCUMENT);
+        this.platformId = inject(PLATFORM_ID);
         this.subscription = new Subscription();
         this.resizeDiff = 0;
         this.class = 'material bordered';
@@ -2452,28 +2448,31 @@ class NgxDatatableDefaultDirective {
     }
     fixHorizontalGap(scroller) {
         const { body, documentElement } = this.document;
-        if (documentElement.scrollHeight !== documentElement.clientHeight) {
-            if (this.resizeDiff === 0) {
-                this.resizeDiff = window.innerWidth - body.offsetWidth;
-                scroller.scrollWidth -= this.resizeDiff;
+        if (isPlatformBrowser(this.platformId)) {
+            if (documentElement.scrollHeight !== documentElement.clientHeight) {
+                if (this.resizeDiff === 0) {
+                    this.resizeDiff = window.innerWidth - body.offsetWidth;
+                    scroller.scrollWidth -= this.resizeDiff;
+                }
+            }
+            else {
+                scroller.scrollWidth += this.resizeDiff;
+                this.resizeDiff = 0;
             }
-        }
-        else {
-            scroller.scrollWidth += this.resizeDiff;
-            this.resizeDiff = 0;
         }
     }
     fixStyleOnWindowResize() {
-        // avoided @HostListener('window:resize') in favor of performance
-        const subscription = fromEvent(window, 'resize')
-            .pipe(debounceTime(500))
-            .subscribe(() => {
-            const { scroller } = this.table.bodyComponent;
-            if (!scroller)
-                return;
-            this.fixHorizontalGap(scroller);
-        });
-        this.subscription.add(subscription);
+        if (isPlatformBrowser(this.platformId)) {
+            const subscription = fromEvent(window, 'resize')
+                .pipe(debounceTime(500))
+                .subscribe(() => {
+                const { scroller } = this.table.bodyComponent;
+                if (!scroller)
+                    return;
+                this.fixHorizontalGap(scroller);
+            });
+            this.subscription.add(subscription);
+        }
     }
     ngAfterViewInit() {
         this.fixStyleOnWindowResize();
@@ -2481,7 +2480,7 @@ class NgxDatatableDefaultDirective {
     ngOnDestroy() {
         this.subscription.unsubscribe();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NgxDatatableDefaultDirective, deps: [{ token: i1$2.DatatableComponent }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NgxDatatableDefaultDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: NgxDatatableDefaultDirective, isStandalone: true, selector: "ngx-datatable[default]", inputs: { class: "class" }, host: { properties: { "class": "this.classes" } }, exportAs: ["ngxDatatableDefault"], ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: NgxDatatableDefaultDirective, decorators: [{
@@ -2491,10 +2490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
                     selector: 'ngx-datatable[default]',
                     exportAs: 'ngxDatatableDefault',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.DatatableComponent }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { class: [{
+        }], ctorParameters: () => [], propDecorators: { class: [{
                 type: Input
             }], classes: [{
                 type: HostBinding,
@@ -2647,15 +2643,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             }] } });
 
 class AbpVisibleDirective {
+    constructor() {
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.templateRef = inject(TemplateRef);
+        this.condition$ = of(false);
+    }
     set abpVisible(value) {
         this.condition$ = checkType(value);
         this.subscribeToCondition();
     }
-    constructor(viewContainerRef, templateRef) {
-        this.viewContainerRef = viewContainerRef;
-        this.templateRef = templateRef;
-        this.condition$ = of(false);
-    }
     ngOnInit() {
         this.updateVisibility();
     }
@@ -2676,7 +2672,7 @@ class AbpVisibleDirective {
         }
         this.viewContainerRef.createEmbeddedView(this.templateRef);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AbpVisibleDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AbpVisibleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: AbpVisibleDirective, isStandalone: true, selector: "[abpVisible]", inputs: { abpVisible: "abpVisible" }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: AbpVisibleDirective, decorators: [{
@@ -2684,7 +2680,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             args: [{
                     selector: '[abpVisible]',
                 }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }], propDecorators: { abpVisible: [{
+        }], propDecorators: { abpVisible: [{
                 type: Input
             }] } });
 function checkType(value) {
@@ -2706,8 +2702,8 @@ function checkType(value) {
 }
 
 class DisabledDirective {
-    constructor(ngControl) {
-        this.ngControl = ngControl;
+    constructor() {
+        this.ngControl = inject(NgControl, { host: true });
         this.abpDisabled = false;
     }
     // Related issue: https://github.com/angular/angular/issues/35330
@@ -2716,7 +2712,7 @@ class DisabledDirective {
             this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DisabledDirective, deps: [{ token: i2$1.NgControl, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DisabledDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.7", type: DisabledDirective, isStandalone: true, selector: "[abpDisabled]", inputs: { abpDisabled: "abpDisabled" }, usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DisabledDirective, decorators: [{
@@ -2724,9 +2720,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
             args: [{
                     selector: '[abpDisabled]',
                 }]
-        }], ctorParameters: () => [{ type: i2$1.NgControl, decorators: [{
-                    type: Host
-                }] }], propDecorators: { abpDisabled: [{
+        }], propDecorators: { abpDisabled: [{
                 type: Input
             }] } });
 
@@ -2737,8 +2731,8 @@ var eFormComponets;
 })(eFormComponets || (eFormComponets = {}));
 
 class DocumentDirHandlerService {
-    constructor(injector) {
-        this.injector = injector;
+    constructor() {
+        this.injector = inject(Injector);
         this.dir = new BehaviorSubject('ltr');
         this.dir$ = this.dir.asObservable();
         this.listenToLanguageChanges();
@@ -2752,19 +2746,19 @@ class DocumentDirHandlerService {
         });
     }
     setBodyDir(dir) {
-        document.body.dir = dir;
-        document.dir = dir;
+        this.injector.get(DOCUMENT).body.dir = dir;
+        this.injector.get(DOCUMENT).dir = dir;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DocumentDirHandlerService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DocumentDirHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DocumentDirHandlerService }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DocumentDirHandlerService, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i0.Injector }] });
+        }], ctorParameters: () => [] });
 
 class ErrorHandler {
-    constructor(injector) {
-        this.injector = injector;
+    constructor() {
+        this.injector = inject(Injector);
         this.httpErrorReporter = inject(HttpErrorReporterService);
         this.confirmationService = inject(ConfirmationService);
         this.routerErrorHandlerService = inject(RouterErrorHandlerService);
@@ -2825,13 +2819,13 @@ class ErrorHandler {
             yesText: 'AbpAccount::Close',
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ErrorHandler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ErrorHandler, providedIn: 'root' }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: ErrorHandler, decorators: [{
             type: Injectable,
             args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [{ type: i0.Injector }] });
+        }], ctorParameters: () => [] });
 
 const NG_BOOTSTRAP_CONFIG_PROVIDERS = [
     provideAppInitializer(() => {
@@ -2866,6 +2860,7 @@ const tenantNotFoundProvider = {
     provide: TENANT_NOT_FOUND_BY_NAME,
     useFactory: function () {
         const confirm = inject(ConfirmationService);
+        const document = inject(DOCUMENT);
         return (response) => {
             const { error } = response.error;
             // hide loading donut
@@ -2936,10 +2931,10 @@ function toInteger(value) {
     return parseInt(`${value}`, 10);
 }
 class DateParserFormatter extends NgbDateParserFormatter {
-    constructor(configState, locale) {
+    constructor() {
         super();
-        this.configState = configState;
-        this.locale = locale;
+        this.configState = inject(ConfigStateService);
+        this.locale = inject(LOCALE_ID);
     }
     parse(value) {
         if (value) {
@@ -2971,15 +2966,12 @@ class DateParserFormatter extends NgbDateParserFormatter {
         const dateFormat = localization.currentCulture?.dateTimeFormat?.shortDatePattern || 'yyyy-MM-dd';
         return formatDate(new Date(date.year, date.month - 1, date.day), dateFormat, this.locale);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DateParserFormatter, deps: [{ token: i2.ConfigStateService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DateParserFormatter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DateParserFormatter }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: DateParserFormatter, decorators: [{
             type: Injectable
-        }], ctorParameters: () => [{ type: i2.ConfigStateService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
-                }] }] });
+        }], ctorParameters: () => [] });
 
 const { minLength, maxLength } = Validators;
 function getPasswordValidators(injector) {
@@ -3135,6 +3127,35 @@ function provideAbpThemeShared(...features) {
     return makeEnvironmentProviders(providers);
 }
 
+var LogoFeatureKind;
+(function (LogoFeatureKind) {
+    LogoFeatureKind[LogoFeatureKind["Options"] = 0] = "Options";
+})(LogoFeatureKind || (LogoFeatureKind = {}));
+function makeLogoFeature(kind, providers) {
+    return {
+        ɵkind: kind,
+        ɵproviders: providers,
+    };
+}
+function withEnvironmentOptions(options = {}) {
+    const { name, logoUrl } = options.application || {};
+    return makeLogoFeature(LogoFeatureKind.Options, [
+        {
+            provide: LOGO_URL_TOKEN,
+            useValue: logoUrl || '',
+        },
+        {
+            provide: LOGO_APP_NAME_TOKEN,
+            useValue: name || 'ProjectName',
+        },
+    ]);
+}
+function provideLogo(...features) {
+    const providers = [];
+    features.forEach(({ ɵproviders }) => providers.push(...ɵproviders));
+    return makeEnvironmentProviders(providers);
+}
+
 const THEME_SHARED_EXPORTS = [
     BreadcrumbComponent,
     BreadcrumbItemsComponent,
@@ -3204,15 +3225,7 @@ class BaseThemeSharedModule {
             NgxDatatableListDirective,
             NgxDatatableDefaultDirective,
             PasswordComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BaseThemeSharedModule, imports: [BreadcrumbComponent,
-            BreadcrumbItemsComponent,
-            ButtonComponent,
-            ConfirmationComponent,
-            LoaderBarComponent,
-            ModalComponent,
-            ToastComponent,
-            ToastContainerComponent,
-            FormInputComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.0.7", ngImport: i0, type: BaseThemeSharedModule, imports: [FormInputComponent,
             FormCheckboxComponent,
             HttpErrorWrapperComponent,
             NgxDatatableModule,
@@ -3263,5 +3276,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbpAuthenticationErrorHandler, AbpFormatErrorHandlerService, AbpVisibleDirective, BaseThemeSharedModule, BreadcrumbComponent, BreadcrumbItemsComponent, ButtonComponent, CARD_COMPONENTS, CARD_DIRECTIVES, CONFIRMATION_ICONS, CUSTOM_ERROR_HANDLERS, CUSTOM_HTTP_ERROR_HANDLER_PRIORITY, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardHeaderDirective, CardImgTopDirective, CardModule, CardSubtitleDirective, CardTitleDirective, Confirmation, ConfirmationComponent, ConfirmationService, CreateErrorComponentService, DEFAULT_CONFIRMATION_ICONS, DEFAULT_ERROR_LOCALIZATIONS, DEFAULT_ERROR_MESSAGES, DEFAULT_HANDLERS_PROVIDERS, DEFAULT_VALIDATION_BLUEPRINTS, DateAdapter, DateParserFormatter, DateTimeAdapter, DisabledDirective, DocumentDirHandlerService, EllipsisDirective, ErrorHandler, FormCheckboxComponent, FormInputComponent, HTTP_ERROR_CONFIG, HTTP_ERROR_DETAIL, HTTP_ERROR_HANDLER, HTTP_ERROR_STATUS, HttpErrorWrapperComponent, InternetConnectionStatusComponent, LoaderBarComponent, LoadingComponent, LoadingDirective, ModalCloseDirective, ModalComponent, ModalRefService, NGX_DATATABLE_MESSAGES, NG_BOOTSTRAP_CONFIG_PROVIDERS, NavItem, NavItemsService, NgxDatatableDefaultDirective, NgxDatatableListDirective, PageAlertService, PasswordComponent, RouterErrorHandlerService, SUPPRESS_UNSAVED_CHANGES_WARNING, SpinnerComponent, StatusCodeErrorHandlerService, THEME_SHARED_APPEND_CONTENT, THEME_SHARED_EXPORTS, THEME_SHARED_ROUTE_PROVIDERS, TenantResolveErrorHandlerService, ThemeSharedFeatureKind, ThemeSharedModule, TimeAdapter, ToastComponent, ToastContainerComponent, ToasterService, UnknownStatusCodeErrorHandlerService, UserMenu, UserMenuService, bounceIn, collapse, collapseLinearWithMargin, collapseWithMargin, collapseX, collapseY, collapseYWithMargin, configureNgBootstrap, configureRoutes, defaultNgxDatatableMessages, dialogAnimation, eFormComponets, expandX, expandY, expandYWithMargin, fadeAnimation, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp, getErrorFromRequestBody, getPasswordValidators, provideAbpThemeShared, slideFromBottom, tenantNotFoundProvider, toastInOut, validatePassword, withConfirmationIcon, withHttpErrorConfig, withValidateOnSubmit, withValidationBluePrint, withValidationMapErrorsFn };
+export { AbpAuthenticationErrorHandler, AbpFormatErrorHandlerService, AbpVisibleDirective, BaseThemeSharedModule, BreadcrumbComponent, BreadcrumbItemsComponent, ButtonComponent, CARD_COMPONENTS, CARD_DIRECTIVES, CONFIRMATION_ICONS, CUSTOM_ERROR_HANDLERS, CUSTOM_HTTP_ERROR_HANDLER_PRIORITY, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardHeaderDirective, CardImgTopDirective, CardModule, CardSubtitleDirective, CardTitleDirective, Confirmation, ConfirmationComponent, ConfirmationService, CreateErrorComponentService, DEFAULT_CONFIRMATION_ICONS, DEFAULT_ERROR_LOCALIZATIONS, DEFAULT_ERROR_MESSAGES, DEFAULT_HANDLERS_PROVIDERS, DEFAULT_VALIDATION_BLUEPRINTS, DateAdapter, DateParserFormatter, DateTimeAdapter, DisabledDirective, DocumentDirHandlerService, EllipsisDirective, ErrorHandler, FormCheckboxComponent, FormInputComponent, HTTP_ERROR_CONFIG, HTTP_ERROR_DETAIL, HTTP_ERROR_HANDLER, HTTP_ERROR_STATUS, HttpErrorWrapperComponent, InternetConnectionStatusComponent, LOGO_APP_NAME_TOKEN, LOGO_URL_TOKEN, LoaderBarComponent, LoadingComponent, LoadingDirective, LogoFeatureKind, ModalCloseDirective, ModalComponent, ModalRefService, NGX_DATATABLE_MESSAGES, NG_BOOTSTRAP_CONFIG_PROVIDERS, NavItem, NavItemsService, NgxDatatableDefaultDirective, NgxDatatableListDirective, PageAlertService, PasswordComponent, RouterErrorHandlerService, SUPPRESS_UNSAVED_CHANGES_WARNING, SpinnerComponent, StatusCodeErrorHandlerService, THEME_SHARED_APPEND_CONTENT, THEME_SHARED_EXPORTS, THEME_SHARED_ROUTE_PROVIDERS, TenantResolveErrorHandlerService, ThemeSharedFeatureKind, ThemeSharedModule, TimeAdapter, ToastComponent, ToastContainerComponent, ToasterService, UnknownStatusCodeErrorHandlerService, UserMenu, UserMenuService, bounceIn, collapse, collapseLinearWithMargin, collapseWithMargin, collapseX, collapseY, collapseYWithMargin, configureNgBootstrap, configureRoutes, defaultNgxDatatableMessages, dialogAnimation, eFormComponets, expandX, expandY, expandYWithMargin, fadeAnimation, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp, getErrorFromRequestBody, getPasswordValidators, provideAbpThemeShared, provideLogo, slideFromBottom, tenantNotFoundProvider, toastInOut, validatePassword, withConfirmationIcon, withEnvironmentOptions, withHttpErrorConfig, withValidateOnSubmit, withValidationBluePrint, withValidationMapErrorsFn };
 //# sourceMappingURL=abp-ng.theme.shared.mjs.map