@abp/ng.theme.shared 9.2.1 → 9.3.0-rc.2

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

@@ -1,22 +1,23 @@
 import * as i0 from '@angular/core';
-import { Injectable, Input, Component, ChangeDetectionStrategy, EventEmitter, ViewChild, Output, InjectionToken, Inject, inject, DestroyRef, createComponent, ViewEncapsulation, model, input, viewChild, contentChild, output, effect, HostListener, Optional, Directive, forwardRef, HostBinding, NgModule, ChangeDetectorRef, ViewContainerRef, Renderer2, Host, RendererFactory2, Injector, EnvironmentInjector, ApplicationRef, provideAppInitializer, LOCALE_ID, makeEnvironmentProviders } 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, DOCUMENT, CommonModule, DatePipe } from '@angular/common';
-import { NgbDateAdapter, NgbTimeAdapter, NgbModal, NgbTooltip, NgbInputDatepickerConfig, NgbTypeaheadConfig, NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { formatDate, CommonModule, DOCUMENT } 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 { Router, ResolveEnd } from '@angular/router';
+import { RouterModule, Router, ResolveEnd } from '@angular/router';
 import * as i2 from '@abp/ng.core';
-import { getRoutePath, SubscriptionService, PROJECTION_STRATEGY, uuid, AbstractNgModelComponent, InternetConnectionService, LocalizationModule, LocalizationService, getLocaleDirection, DomInsertionService, CONTENT_STRATEGY, SORT_COMPARE_FUNC, InternalStore, ContentProjectionService, RouterEvents, AuthService, SessionStateService, ConfigStateService, HttpErrorReporterService, RoutesService, TENANT_NOT_FOUND_BY_NAME, CoreModule } 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 { startWith, map, debounceTime, filter, takeUntil, take, switchMap } from 'rxjs/operators';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { fromEvent, Subscription, combineLatest, timer, ReplaySubject, Subject, distinctUntilChanged, of, from, Observable, EMPTY, BehaviorSubject } from 'rxjs';
+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, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import * as i3 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 { HttpErrorResponse } from '@angular/common/http';
-import { normalizeDiacritics, VALIDATION_BLUEPRINTS, defaultMapErrorsFn, VALIDATION_MAP_ERRORS_FN, VALIDATION_VALIDATE_ON_SUBMIT, NgxValidateCoreModule } from '@ngx-validate/core';
 
 class DateTimeAdapter {
     fromModel(value) {
@@ -267,11 +268,11 @@ class BreadcrumbItemsComponent {
         this.items = [];
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: BreadcrumbItemsComponent, isStandalone: false, 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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BreadcrumbItemsComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'abp-breadcrumb-items', 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: [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" }]
         }], propDecorators: { items: [{
                 type: Input
             }] } });
@@ -301,16 +302,17 @@ class BreadcrumbComponent {
         });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: BreadcrumbComponent, isStandalone: false, 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 }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", 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: "19.1.8", ngImport: i0, type: BreadcrumbComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'abp-breadcrumb', changeDetection: ChangeDetectionStrategy.OnPush, providers: [SubscriptionService], template: "<abp-breadcrumb-items [items]=\"segments\"></abp-breadcrumb-items>\r\n" }]
+            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'}`;
@@ -340,7 +342,7 @@ class ButtonComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: ButtonComponent, isStandalone: false, selector: "abp-button", inputs: { buttonId: "buttonId", buttonClass: "buttonClass", buttonType: "buttonType", formName: "formName", iconClass: "iconClass", loading: "loading", disabled: "disabled", attributes: "attributes" }, outputs: { click: "click", focus: "focus", blur: "blur", abpClick: "abpClick", abpFocus: "abpFocus", abpBlur: "abpBlur" }, viewQueries: [{ propertyName: "buttonRef", first: true, predicate: ["button"], descendants: true, static: true }], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", 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
       [id]="buttonId"
@@ -354,12 +356,11 @@ class ButtonComponent {
     >
       <i [ngClass]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] }); }
+  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ButtonComponent, decorators: [{
             type: Component,
             args: [{
-                    standalone: false,
                     selector: 'abp-button',
                     template: `
     <button
@@ -376,6 +377,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
       <i [ngClass]="icon" class="me-1" aria-hidden="true"></i><ng-content></ng-content>
     </button>
   `,
+                    imports: [CommonModule],
                 }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { buttonId: [{
                 type: Input
@@ -459,11 +461,11 @@ class ConfirmationComponent {
         return !!(options && options.iconTemplate);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ConfirmationComponent, deps: [{ token: CONFIRMATION_ICONS }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: ConfirmationComponent, isStandalone: false, 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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", 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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ConfirmationComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'abp-confirmation', template: "@if (confirmation$ | async; as data) {\r\n  <div class=\"confirmation\">\r\n    <div\r\n      class=\"confirmation-backdrop\"\r\n      (click)=\"data.options?.dismissible ? close(dismiss) : null\"\r\n    ></div>\r\n    <div class=\"confirmation-dialog\">\r\n      @if (data.severity || isCustomIconExists(data)) {\r\n        <div class=\"icon-container\" [ngClass]=\"data.severity\">\r\n          @if (isIconTemplateExits(data)) {\r\n            <div [outerHTML]=\"data.options.iconTemplate\"></div>\r\n          } @else {\r\n            <i class=\"icon\" [ngClass]=\"getIconClass(data)\"></i>\r\n          }\r\n        </div>\r\n      }\r\n      <div class=\"content\">\r\n        @if (data.title) {\r\n          <h1\r\n            class=\"title\"\r\n            [innerHTML]=\"data.title | abpLocalization: data.options?.titleLocalizationParams\"\r\n          ></h1>\r\n        }\r\n        @if (data.message) {\r\n          <p\r\n            class=\"message\"\r\n            [innerHTML]=\"data.message | abpLocalization: data.options?.messageLocalizationParams\"\r\n          ></p>\r\n        }\r\n      </div>\r\n      <div class=\"footer\">\r\n        @if (!data?.options?.hideCancelBtn) {\r\n          <button\r\n            id=\"cancel\"\r\n            class=\"btn btn-outline-primary me-2\"\r\n            [innerHTML]=\"data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization\"\r\n            (click)=\"close(reject)\"\r\n          ></button>\r\n        }\r\n        @if (!data?.options?.hideYesBtn) {\r\n          <button\r\n            id=\"confirm\"\r\n            class=\"btn btn-primary\"\r\n            [innerHTML]=\"data.options?.yesText || 'AbpUi::Yes' | abpLocalization\"\r\n            (click)=\"close(confirm)\"\r\n          ></button>\r\n        }\r\n      </div>\r\n    </div>\r\n  </div>\r\n}\r\n", styles: [".confirmation{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:1060}.confirmation .confirmation-backdrop{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1061!important}.confirmation .confirmation-dialog{display:flex;flex-direction:column;margin:20px auto;padding:0;width:450px;min-height:300px;z-index:1062!important}@media screen and (max-width: 500px){.confirmation .confirmation-dialog{width:90vw}}.confirmation .confirmation-dialog .icon-container{display:flex;align-items:center;justify-content:center;padding:40px 20px 10px}.confirmation .confirmation-dialog .icon-container .icon{width:100px;height:100px;stroke-width:1;font-size:80px;text-align:center}.confirmation .confirmation-dialog .content{flex-grow:1;display:block}.confirmation .confirmation-dialog .content .title{display:block;margin:0;padding:0;font-size:27px;font-weight:600;text-align:center}.confirmation .confirmation-dialog .content .message{display:block;padding:8px 20px 20px;font-size:16px;font-weight:400;text-align:center;margin-bottom:0}.confirmation .confirmation-dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:20px;width:100%}\n"] }]
+            args: [{ selector: 'abp-confirmation', imports: [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]
@@ -526,11 +528,11 @@ class HttpErrorWrapperComponent {
         this.destroy();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: HttpErrorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: HttpErrorWrapperComponent, isStandalone: false, selector: "abp-http-error-wrapper", viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (!hideCloseIcon) {\r\n    <button id=\"abp-close-button\" type=\"button\" class=\"btn-close me-2\" (click)=\"destroy()\"></button>\r\n  }\r\n\r\n  @if (!customComponent) {\r\n    <div class=\"row centered\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"error-template\">\r\n          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n          <div class=\"error-details\">\r\n            {{ details | abpLocalization }}\r\n          </div>\r\n          <div class=\"error-actions\">\r\n            @if (isHomeShow) {\r\n              <a (click)=\"goHome()\" class=\"btn btn-primary btn-md mt-2\"\r\n                ><span class=\"glyphicon glyphicon-home\"></span>\r\n                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: HttpErrorWrapperComponent, isStandalone: true, selector: "abp-http-error-wrapper", viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (!hideCloseIcon) {\r\n    <button id=\"abp-close-button\" type=\"button\" class=\"btn-close me-2\" (click)=\"destroy()\"></button>\r\n  }\r\n\r\n  @if (!customComponent) {\r\n    <div class=\"row centered\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"error-template\">\r\n          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n          <div class=\"error-details\">\r\n            {{ details | abpLocalization }}\r\n          </div>\r\n          <div class=\"error-actions\">\r\n            @if (isHomeShow) {\r\n              <a (click)=\"goHome()\" class=\"btn btn-primary btn-md mt-2\"\r\n                ><span class=\"glyphicon glyphicon-home\"></span>\r\n                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: LocalizationPipe, name: "abpLocalization" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: HttpErrorWrapperComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'abp-http-error-wrapper', template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (!hideCloseIcon) {\r\n    <button id=\"abp-close-button\" type=\"button\" class=\"btn-close me-2\" (click)=\"destroy()\"></button>\r\n  }\r\n\r\n  @if (!customComponent) {\r\n    <div class=\"row centered\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"error-template\">\r\n          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n          <div class=\"error-details\">\r\n            {{ details | abpLocalization }}\r\n          </div>\r\n          <div class=\"error-actions\">\r\n            @if (isHomeShow) {\r\n              <a (click)=\"goHome()\" class=\"btn btn-primary btn-md mt-2\"\r\n                ><span class=\"glyphicon glyphicon-home\"></span>\r\n                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
+            args: [{ selector: 'abp-http-error-wrapper', imports: [CommonModule, LocalizationPipe], template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (!hideCloseIcon) {\r\n    <button id=\"abp-close-button\" type=\"button\" class=\"btn-close me-2\" (click)=\"destroy()\"></button>\r\n  }\r\n\r\n  @if (!customComponent) {\r\n    <div class=\"row centered\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"error-template\">\r\n          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n          <div class=\"error-details\">\r\n            {{ details | abpLocalization }}\r\n          </div>\r\n          <div class=\"error-actions\">\r\n            @if (isHomeShow) {\r\n              <a (click)=\"goHome()\" class=\"btn btn-primary btn-md mt-2\"\r\n                ><span class=\"glyphicon glyphicon-home\"></span>\r\n                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
         }], propDecorators: { containerRef: [{
                 type: ViewChild,
                 args: ['container', { static: false }]
@@ -612,7 +614,7 @@ class LoaderBarComponent {
         this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", 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.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LoaderBarComponent, isStandalone: false, selector: "abp-loader-bar", inputs: { isLoading: "isLoading", containerClass: "containerClass", color: "color" }, providers: [SubscriptionService], ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", 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
         class="abp-progress"
@@ -624,11 +626,11 @@ 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: "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: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LoaderBarComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'abp-loader-bar', template: `
+            args: [{ selector: 'abp-loader-bar', template: `
     <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
       <div
         class="abp-progress"
@@ -640,7 +642,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
         }"
       ></div>
     </div>
-  `, providers: [SubscriptionService], 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"] }]
+  `, 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: [{
                 type: Input
             }], containerClass: [{
@@ -651,7 +653,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
 
 class LoadingComponent {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LoadingComponent, isStandalone: false, selector: "abp-loading", ngImport: i0, template: `
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: LoadingComponent, isStandalone: true, selector: "abp-loading", ngImport: i0, template: `
     <div class="abp-loading">
       <i class="fa fa-spinner fa-pulse abp-spinner" aria-hidden="true"></i>
     </div>
@@ -659,13 +661,22 @@ class LoadingComponent {
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LoadingComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'abp-loading', template: `
+            args: [{ selector: 'abp-loading', template: `
     <div class="abp-loading">
       <i class="fa fa-spinner fa-pulse abp-spinner" aria-hidden="true"></i>
     </div>
-  `, encapsulation: ViewEncapsulation.None, styles: [".abp-loading{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1040}.abp-loading .abp-spinner{position:absolute;top:50%;left:50%;font-size:14px;-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);transform:translate(-50%) translateY(-50%)}\n"] }]
+  `, encapsulation: ViewEncapsulation.None, imports: [], styles: [".abp-loading{position:absolute;width:100%;height:100%;top:0;left:0;z-index:1040}.abp-loading .abp-spinner{position:absolute;top:50%;left:50%;font-size:14px;-moz-transform:translateX(-50%) translateY(-50%);-o-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);transform:translate(-50%) translateY(-50%)}\n"] }]
         }] });
 
+class NavItem {
+    constructor(props) {
+        Object.assign(this, props);
+    }
+}
+
+class UserMenu extends NavItem {
+}
+
 class ConfirmationService {
     constructor(contentProjectionService) {
         this.contentProjectionService = contentProjectionService;
@@ -726,185 +737,89 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
             args: [{ providedIn: 'root' }]
         }], ctorParameters: () => [{ type: i2.ContentProjectionService }] });
 
-const SUPPRESS_UNSAVED_CHANGES_WARNING = new InjectionToken('SUPPRESS_UNSAVED_CHANGES_WARNING');
-
-class ModalRefService {
-    constructor() {
-        this.modalRefs = [];
-    }
-    register(modal) {
-        this.modalRefs.push(modal);
-    }
-    unregister(modal) {
-        const index = this.modalRefs.indexOf(modal);
-        if (index > -1) {
-            this.modalRefs.splice(index, 1);
-        }
-    }
-    dismissAll(mode) {
-        this.modalRefs.forEach(modal => modal.dismiss(mode));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalRefService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalRefService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalRefService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class ModalComponent {
-    get modalWindowRef() {
-        return document.querySelector(`ngb-modal-window.${this.modalIdentifier}`);
+class AbstractMenuService {
+    get items() {
+        return this._items$.value;
     }
-    get isFormDirty() {
-        return Boolean(this.modalWindowRef?.querySelector('.ng-dirty'));
+    get items$() {
+        return this._items$.asObservable();
     }
     constructor() {
-        this.confirmationService = inject(ConfirmationService);
-        this.modal = inject(NgbModal);
-        this.modalRefService = inject(ModalRefService);
-        this.suppressUnsavedChangesWarningToken = inject(SUPPRESS_UNSAVED_CHANGES_WARNING, {
-            optional: true,
-        });
-        this.destroyRef = inject(DestroyRef);
-        this.visible = model(false);
-        this.busy = input(false, {
-            transform: (value) => {
-                if (this.abpSubmit() && this.abpSubmit() instanceof ButtonComponent) {
-                    this.abpSubmit().loading = value;
-                }
-                return value;
-            },
-        });
-        this.options = input({ keyboard: true });
-        this.suppressUnsavedChangesWarning = input(this.suppressUnsavedChangesWarningToken);
-        this.modalContent = viewChild('modalContent');
-        this.abpHeader = contentChild('abpHeader');
-        this.abpBody = contentChild('abpBody');
-        this.abpFooter = contentChild('abpFooter');
-        this.abpSubmit = contentChild(ButtonComponent, { read: ButtonComponent });
-        this.init = output();
-        this.appear = output();
-        this.disappear = output();
-        this.isConfirmationOpen = false;
-        this.modalIdentifier = `modal-${uuid()}`;
-        effect(() => {
-            this.toggle(this.visible());
-        });
-    }
-    ngOnInit() {
-        this.modalRefService.register(this);
-    }
-    dismiss(mode) {
-        switch (mode) {
-            case 'hard':
-                this.visible.set(false);
-                break;
-            case 'soft':
-                this.close();
-                break;
-            default:
-                break;
-        }
+        this._items$ = new BehaviorSubject([]);
+        this.sortItems = (a, b) => {
+            return this.sortFn(a, b);
+        };
+        this.sortFn = inject(SORT_COMPARE_FUNC);
     }
-    toggle(value) {
-        this.visible.set(value);
-        if (!value) {
-            this.modalRef?.dismiss();
-            this.disappear.emit();
-            return;
-        }
-        setTimeout(() => this.listen(), 0);
-        this.modalRef = this.modal.open(this.modalContent(), {
-            size: 'md',
-            centered: false,
-            keyboard: false,
-            scrollable: true,
-            beforeDismiss: () => {
-                if (!this.visible())
-                    return true;
-                this.close();
-                return !this.visible();
-            },
-            ...this.options(),
-            windowClass: `${this.options().windowClass || ''} ${this.modalIdentifier}`,
+    addItems(newItems) {
+        const items = [...this.items];
+        newItems.forEach(item => {
+            const index = items.findIndex(i => i.id === item.id);
+            const data = new this.baseClass(item);
+            if (index > -1) {
+                items[index] = data;
+                return;
+            }
+            items.push(data);
         });
-        this.appear.emit();
+        items.sort(this.sortItems);
+        this._items$.next(items);
     }
-    ngOnDestroy() {
-        this.modalRefService.unregister(this);
-        this.toggle(false);
+    removeItem(id) {
+        const index = this.items.findIndex(item => item.id === id);
+        if (index < 0)
+            return;
+        const items = [...this.items.slice(0, index), ...this.items.slice(index + 1)];
+        this._items$.next(items);
     }
-    close() {
-        if (this.busy())
+    patchItem(id, item) {
+        const index = this.items.findIndex(i => i.id === id);
+        if (index < 0)
             return;
-        if (this.isFormDirty && !this.suppressUnsavedChangesWarning()) {
-            if (this.isConfirmationOpen)
-                return;
-            this.isConfirmationOpen = true;
-            this.confirmationService
-                .warn('AbpUi::AreYouSureYouWantToCancelEditingWarningMessage', 'AbpUi::AreYouSure', {
-                dismissible: false,
-            })
-                .subscribe((status) => {
-                this.isConfirmationOpen = false;
-                if (status === Confirmation.Status.confirm) {
-                    this.visible.set(false);
-                }
-            });
-        }
-        else {
-            this.visible.set(false);
-        }
+        const items = [...this.items];
+        items[index] = new this.baseClass({ ...items[index], ...item });
+        items.sort(this.sortItems);
+        this._items$.next(items);
     }
-    listen() {
-        if (this.modalWindowRef) {
-            fromEvent(this.modalWindowRef, 'keyup')
-                .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(150), filter((key) => key && key.key === 'Escape' && this.options().keyboard))
-                .subscribe(() => this.close());
-        }
-        fromEvent(window, 'beforeunload')
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(event => {
-            if (this.isFormDirty && !this.suppressUnsavedChangesWarning()) {
-                event.preventDefault();
-            }
-        });
-        this.init.emit();
+}
+
+class NavItemsService extends AbstractMenuService {
+    constructor() {
+        super(...arguments);
+        this.baseClass = NavItem;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: ModalComponent, isStandalone: false, 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: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavItemsService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavItemsService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'abp-modal', providers: [SubscriptionService], 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: () => [] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavItemsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class ModalCloseDirective {
-    constructor(modal) {
-        this.modal = modal;
-        if (!modal) {
-            console.error('Please use abpClose within an abp-modal');
-        }
+class PageAlertService {
+    constructor() {
+        this.alerts = new InternalStore([]);
+        this.alerts$ = this.alerts.sliceState(state => state);
     }
-    onClick() {
-        this.modal?.close();
+    show(alert) {
+        const newAlert = {
+            ...alert,
+            dismissible: alert.dismissible ?? true,
+        };
+        this.alerts.set([newAlert, ...this.alerts.state]);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalCloseDirective, deps: [{ token: ModalComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ModalCloseDirective, isStandalone: false, selector: "[abpClose]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
+    remove(index) {
+        const alerts = [...this.alerts.state];
+        alerts.splice(index, 1);
+        this.alerts.set(alerts);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PageAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PageAlertService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalCloseDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: '[abpClose]',
-                }]
-        }], ctorParameters: () => [{ type: ModalComponent, decorators: [{
-                    type: Optional
-                }] }], propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click']
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PageAlertService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class ToastComponent {
     constructor() {
@@ -950,11 +865,11 @@ class ToastComponent {
             this.close();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: ToastComponent, isStandalone: false, 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;opacity:1}.abp-toast:hover{border:2px solid #e4e4e4;background-color:#e4e4e4;box-shadow:0 0 15px -5px #0006}.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: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", 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;opacity:1}.abp-toast:hover{border:2px solid #e4e4e4;background-color:#e4e4e4;box-shadow:0 0 15px -5px #0006}.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" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToastComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'abp-toast', 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;opacity:1}.abp-toast:hover{border:2px solid #e4e4e4;background-color:#e4e4e4;box-shadow:0 0 15px -5px #0006}.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: [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;opacity:1}.abp-toast:hover{border:2px solid #e4e4e4;background-color:#e4e4e4;box-shadow:0 0 15px -5px #0006}.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: [{
@@ -994,11 +909,11 @@ class ToastContainerComponent {
         return toast.options?.id;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: ToastContainerComponent, isStandalone: false, selector: "abp-toast-container", inputs: { top: "top", right: "right", bottom: "bottom", left: "left", toastKey: "toastKey" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, ngImport: i0, template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top || 'auto'\"\r\n  [style.right]=\"right || 'auto'\"\r\n  [style.bottom]=\"bottom || 'auto'\"\r\n  [style.left]=\"left || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  @for (toast of toasts; track toast.options?.id) {\r\n    <abp-toast\r\n      [toast]=\"toast\"\r\n      (remove)=\"remove($event)\"\r\n    ></abp-toast>\r\n  }\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}@media only screen and (max-width: 768px){.abp-toast-container{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "abp-toast", inputs: ["toast"], outputs: ["remove"] }], animations: [toastInOut] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: ToastContainerComponent, isStandalone: true, selector: "abp-toast-container", inputs: { top: "top", right: "right", bottom: "bottom", left: "left", toastKey: "toastKey" }, host: { listeners: { "window:resize": "onWindowResize($event)" } }, ngImport: i0, template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top || 'auto'\"\r\n  [style.right]=\"right || 'auto'\"\r\n  [style.bottom]=\"bottom || 'auto'\"\r\n  [style.left]=\"left || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  @for (toast of toasts; track toast.options?.id) {\r\n    <abp-toast\r\n      [toast]=\"toast\"\r\n      (remove)=\"remove($event)\"\r\n    ></abp-toast>\r\n  }\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}@media only screen and (max-width: 768px){.abp-toast-container{min-width:100%}}\n"], dependencies: [{ kind: "component", type: ToastComponent, selector: "abp-toast", inputs: ["toast"], outputs: ["remove"] }], animations: [toastInOut] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToastContainerComponent, decorators: [{
             type: Component,
-            args: [{ standalone: false, selector: 'abp-toast-container', animations: [toastInOut], template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top || 'auto'\"\r\n  [style.right]=\"right || 'auto'\"\r\n  [style.bottom]=\"bottom || 'auto'\"\r\n  [style.left]=\"left || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  @for (toast of toasts; track toast.options?.id) {\r\n    <abp-toast\r\n      [toast]=\"toast\"\r\n      (remove)=\"remove($event)\"\r\n    ></abp-toast>\r\n  }\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}@media only screen and (max-width: 768px){.abp-toast-container{min-width:100%}}\n"] }]
+            args: [{ selector: 'abp-toast-container', animations: [toastInOut], imports: [ToastComponent], template: "<div\r\n  class=\"abp-toast-container\"\r\n  [style.top]=\"top || 'auto'\"\r\n  [style.right]=\"right || 'auto'\"\r\n  [style.bottom]=\"bottom || 'auto'\"\r\n  [style.left]=\"left || 'auto'\"\r\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\r\n  [@toastInOut]=\"toasts.length\"\r\n>\r\n  @for (toast of toasts; track toast.options?.id) {\r\n    <abp-toast\r\n      [toast]=\"toast\"\r\n      (remove)=\"remove($event)\"\r\n    ></abp-toast>\r\n  }\r\n</div>\r\n", styles: [".abp-toast-container{position:fixed;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;min-width:350px;min-height:80px;z-index:1900}.abp-toast-container.new-on-top{flex-direction:column-reverse}@media only screen and (max-width: 768px){.abp-toast-container{min-width:100%}}\n"] }]
         }], propDecorators: { top: [{
                 type: Input
             }], right: [{
@@ -1014,1760 +929,1835 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
                 args: ['window:resize', ['$event']]
             }] } });
 
-/**
- * @deprecated use ShowPasswordDirective directive
- * https://abp.io/docs/latest/framework/ui/angular/show-password-directive
- */
-class PasswordComponent extends AbstractNgModelComponent {
-    toggleFieldTextType() {
-        this.fieldTextType = !this.fieldTextType;
+class ToasterService {
+    setContainer() {
+        this.containerComponentRef = this.contentProjectionService.projectContent(PROJECTION_STRATEGY.AppendComponentToBody(ToastContainerComponent, {
+            toasts$: this.toasts$,
+            remove: this.remove,
+        }));
+        this.containerComponentRef.changeDetectorRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: PasswordComponent, isStandalone: true, selector: "abp-password", inputs: { inputId: "inputId", formControlName: "formControlName" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => PasswordComponent),
-                multi: true,
-            },
-        ], usesInheritance: true, ngImport: i0, template: "<div class=\"input-group\" validationTarget>\r\n  <input\r\n    [type]=\"fieldTextType ? 'text' : 'password'\"\r\n    class=\"form-control\"\r\n    [id]=\"inputId\"\r\n    [(ngModel)]=\"value\"\r\n  />\r\n\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"toggleFieldTextType()\">\r\n    <i\r\n      class=\"fa\"\r\n      aria-hidden=\"true\"\r\n      [ngClass]=\"{\r\n        'fa-eye-slash': !fieldTextType,\r\n        'fa-eye': fieldTextType\r\n      }\"\r\n    ></i>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "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"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PasswordComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'abp-password', imports: [CommonModule, FormsModule], providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => PasswordComponent),
-                            multi: true,
-                        },
-                    ], template: "<div class=\"input-group\" validationTarget>\r\n  <input\r\n    [type]=\"fieldTextType ? 'text' : 'password'\"\r\n    class=\"form-control\"\r\n    [id]=\"inputId\"\r\n    [(ngModel)]=\"value\"\r\n  />\r\n\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"toggleFieldTextType()\">\r\n    <i\r\n      class=\"fa\"\r\n      aria-hidden=\"true\"\r\n      [ngClass]=\"{\r\n        'fa-eye-slash': !fieldTextType,\r\n        'fa-eye': fieldTextType\r\n      }\"\r\n    ></i>\r\n  </button>\r\n</div>\r\n" }]
-        }], propDecorators: { inputId: [{
-                type: Input
-            }], formControlName: [{
-                type: Input
-            }] } });
-
-class CardBodyComponent {
     constructor() {
-        this.componentClass = 'card-body';
+        this.toasts$ = new ReplaySubject(1);
+        this.lastId = -1;
+        this.toasts = [];
+        /**
+         * Removes the toast with given id.
+         * @param id ID of the toast to be removed.
+         */
+        this.remove = (id) => {
+            this.toasts = this.toasts.filter(toast => toast.options?.id !== id);
+            this.toasts$.next(this.toasts);
+        };
+        this.contentProjectionService = inject(ContentProjectionService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: CardBodyComponent, isStandalone: false, 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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardBodyComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: false,
-                    selector: 'abp-card-body',
-                    template: ` <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle">
-    <ng-content></ng-content>
-  </div>`,
-                }]
-        }], propDecorators: { componentClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], cardBodyClass: [{
-                type: Input
-            }], cardBodyStyle: [{
-                type: Input
-            }] } });
-
-class CardComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: CardComponent, isStandalone: false, 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: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: false,
-                    selector: 'abp-card',
-                    template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
-    <ng-content></ng-content>
-  </div>`,
-                }]
-        }], propDecorators: { cardClass: [{
-                type: Input
-            }], cardStyle: [{
-                type: Input
-            }] } });
-
-class CardHeaderComponent {
-    constructor() {
-        this.componentClass = 'card-header';
+    /**
+     * Creates an info toast with given parameters.
+     * @param message Content of the toast
+     * @param title Title of the toast
+     * @param options Spesific style or structural options for individual toast
+     */
+    info(message, title, options) {
+        return this.show(message, title, 'info', options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: CardHeaderComponent, isStandalone: false, selector: "abp-card-header", inputs: { cardHeaderClass: "cardHeaderClass", cardHeaderStyle: "cardHeaderStyle" }, host: { properties: { "class": "this.componentClass" } }, ngImport: i0, template: `
-    <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardHeaderComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'abp-card-header', template: `
-    <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
-      <ng-content></ng-content>
-    </div>
-  ` }]
-        }], propDecorators: { componentClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], cardHeaderClass: [{
-                type: Input
-            }], cardHeaderStyle: [{
-                type: Input
-            }] } });
-
-class CardFooterComponent {
-    constructor() {
-        this.componentClass = 'card-footer';
+    /**
+     * Creates a success toast with given parameters.
+     * @param message Content of the toast
+     * @param title Title of the toast
+     * @param options Spesific style or structural options for individual toast
+     */
+    success(message, title, options) {
+        return this.show(message, title, 'success', options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: CardFooterComponent, isStandalone: false, selector: "abp-card-footer", inputs: { cardFooterStyle: "cardFooterStyle", cardFooterClass: "cardFooterClass" }, host: { properties: { "class": "this.componentClass" } }, ngImport: i0, template: `
-    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
-      <ng-content></ng-content>
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardFooterComponent, decorators: [{
-            type: Component,
-            args: [{ standalone: false, selector: 'abp-card-footer', template: `
-    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
-      <ng-content></ng-content>
-    </div>
-  ` }]
-        }], propDecorators: { componentClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], cardFooterStyle: [{
-                type: Input
-            }], cardFooterClass: [{
-                type: Input
-            }] } });
-
-class CardTitleDirective {
-    constructor() {
-        this.directiveClass = 'card-title';
+    /**
+     * Creates a warning toast with given parameters.
+     * @param message Content of the toast
+     * @param title Title of the toast
+     * @param options Spesific style or structural options for individual toast
+     */
+    warn(message, title, options) {
+        return this.show(message, title, 'warning', options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: CardTitleDirective, isStandalone: false, selector: "abp-card-title, [abp-card-title], [abpCardTitle]", host: { properties: { "class": "this.directiveClass" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardTitleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: `abp-card-title, [abp-card-title], [abpCardTitle]`,
-                }]
-        }], propDecorators: { directiveClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-class CardSubtitleDirective {
-    constructor() {
-        this.directiveClass = 'card-subtitle';
+    /**
+     * Creates an error toast with given parameters.
+     * @param message Content of the toast
+     * @param title Title of the toast
+     * @param options Spesific style or structural options for individual toast
+     */
+    error(message, title, options) {
+        return this.show(message, title, 'error', options);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: CardSubtitleDirective, isStandalone: false, selector: "abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]", host: { properties: { "class": "this.directiveClass" } }, ngImport: i0 }); }
+    /**
+     * Creates a toast with given parameters.
+     * @param message Content of the toast
+     * @param title Title of the toast
+     * @param severity Sets color of the toast. "success", "warning" etc.
+     * @param options Spesific style or structural options for individual toast
+     */
+    show(message, title = undefined, severity = 'neutral', options = {}) {
+        if (!this.containerComponentRef)
+            this.setContainer();
+        const id = ++this.lastId;
+        this.toasts.push({
+            message,
+            title,
+            severity,
+            options: { closable: true, id, ...options },
+        });
+        this.toasts$.next(this.toasts);
+        return id;
+    }
+    /**
+     * Removes all open toasts at once.
+     */
+    clear(containerKey) {
+        this.toasts = !containerKey
+            ? []
+            : this.toasts.filter(toast => toast.options?.containerKey !== containerKey);
+        this.toasts$.next(this.toasts);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToasterService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardSubtitleDirective, decorators: [{
-            type: Directive,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToasterService, decorators: [{
+            type: Injectable,
             args: [{
-                    standalone: false,
-                    selector: `abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]`,
+                    providedIn: 'root',
                 }]
-        }], propDecorators: { directiveClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+        }], ctorParameters: () => [] });
 
-class CardImgTopDirective {
+class UserMenuService extends AbstractMenuService {
     constructor() {
-        this.directiveClass = 'card-img-top';
+        super(...arguments);
+        this.baseClass = UserMenu;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardImgTopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: CardImgTopDirective, isStandalone: false, selector: "abp-card-img-top, [abp-card-img-top], [abpCardImgTop]", host: { properties: { "class": "this.directiveClass" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UserMenuService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UserMenuService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardImgTopDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: `abp-card-img-top, [abp-card-img-top], [abpCardImgTop]`,
-                }]
-        }], propDecorators: { directiveClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UserMenuService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class CardHeaderDirective {
+const HTTP_ERROR_CONFIG = new InjectionToken('HTTP_ERROR_CONFIG');
+/**
+  @deprecated use **`CUSTOM_ERROR_HANDLERS`** injection token instead of this, see more info https://abp.io/docs/latest/framework/ui/angular/http-requests
+*/
+const HTTP_ERROR_HANDLER = new InjectionToken('HTTP_ERROR_HANDLER');
+const CUSTOM_ERROR_HANDLERS = new InjectionToken('CUSTOM_ERROR_HANDLERS');
+
+class CreateErrorComponentService {
     constructor() {
-        this.directiveClass = 'card-header';
+        this.document = inject(DOCUMENT);
+        this.rendererFactory = inject(RendererFactory2);
+        this.routerEvents = inject(RouterEvents);
+        this.injector = inject(Injector);
+        this.envInjector = inject(EnvironmentInjector);
+        this.httpErrorConfig = inject(HTTP_ERROR_CONFIG);
+        this.componentRef = null;
+        this.listenToRouterDataResolved();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: CardHeaderDirective, isStandalone: false, selector: "abp-card-header, [abp-card-header], [abpCardHeader]", host: { properties: { "class": "this.directiveClass" } }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardHeaderDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: `abp-card-header, [abp-card-header], [abpCardHeader]`,
-                }]
-        }], propDecorators: { directiveClass: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
+    listenToRouterDataResolved() {
+        this.routerEvents
+            .getEvents(ResolveEnd)
+            .pipe(filter(() => !!this.componentRef))
+            .subscribe(() => {
+            this.componentRef?.destroy();
+            this.componentRef = null;
+        });
+    }
+    getErrorHostElement() {
+        return this.document.body;
+    }
+    isCloseIconHidden() {
+        return !!this.httpErrorConfig?.errorScreen?.hideCloseIcon;
+    }
+    canCreateCustomError(status) {
+        const { component, forWhichErrors } = this.httpErrorConfig?.errorScreen || {};
+        if (!component || !forWhichErrors) {
+            return false;
+        }
+        return forWhichErrors.indexOf(status) > -1;
+    }
+    execute(instance) {
+        const renderer = this.rendererFactory.createRenderer(null, null);
+        const hostElement = this.getErrorHostElement();
+        const host = renderer.selectRootElement(hostElement, true);
+        this.componentRef = createComponent(HttpErrorWrapperComponent, {
+            environmentInjector: this.envInjector,
+        });
+        for (const key in instance) {
+            /* istanbul ignore else */
+            if (Object.prototype.hasOwnProperty.call(this.componentRef.instance, key)) {
+                this.componentRef.instance[key] = instance[key];
+            }
+        }
+        this.componentRef.instance.hideCloseIcon = this.isCloseIconHidden();
+        const appRef = this.injector.get(ApplicationRef);
+        if (this.canCreateCustomError(instance.status)) {
+            this.componentRef.instance.appRef = appRef;
+            this.componentRef.instance.environmentInjector = this.envInjector;
+            this.componentRef.instance.customComponent = this.httpErrorConfig.errorScreen?.component;
+        }
+        appRef.attachView(this.componentRef.hostView);
+        renderer.appendChild(host, this.componentRef.hostView.rootNodes[0]);
+        const destroy$ = new Subject();
+        this.componentRef.instance.destroy$ = destroy$;
+        destroy$.subscribe(() => {
+            this.componentRef?.destroy();
+            this.componentRef = null;
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CreateErrorComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CreateErrorComponentService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CreateErrorComponentService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: () => [] });
 
-const declarationsWithExports$1 = [
-    CardComponent,
-    CardBodyComponent,
-    CardHeaderComponent,
-    CardFooterComponent,
-    CardTitleDirective,
-    CardSubtitleDirective,
-    CardImgTopDirective,
-    CardHeaderDirective,
-];
-class CardModule {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: CardModule, declarations: [CardComponent,
-            CardBodyComponent,
-            CardHeaderComponent,
-            CardFooterComponent,
-            CardTitleDirective,
-            CardSubtitleDirective,
-            CardImgTopDirective,
-            CardHeaderDirective], imports: [CommonModule], exports: [CardComponent,
-            CardBodyComponent,
-            CardHeaderComponent,
-            CardFooterComponent,
-            CardTitleDirective,
-            CardSubtitleDirective,
-            CardImgTopDirective,
-            CardHeaderDirective] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardModule, imports: [CommonModule] }); }
+const DEFAULT_ERROR_MESSAGES = {
+    defaultError: {
+        title: 'An error has occurred!',
+        details: 'Error detail not sent by server.',
+    },
+    defaultError401: {
+        title: 'You are not authenticated!',
+        details: 'You should be authenticated (sign in) in order to perform this operation.',
+    },
+    defaultError403: {
+        title: 'You are not authorized!',
+        details: 'You are not allowed to perform this operation.',
+    },
+    defaultError404: {
+        title: 'Resource not found!',
+        details: 'The resource requested could not found on the server.',
+    },
+    defaultError500: {
+        title: 'Internal server error',
+        details: 'Error detail not sent by server.',
+    },
+};
+const DEFAULT_ERROR_LOCALIZATIONS = {
+    defaultError: {
+        title: 'AbpUi::DefaultErrorMessage',
+        details: 'AbpUi::DefaultErrorMessageDetail',
+    },
+    defaultError401: {
+        title: 'AbpUi::DefaultErrorMessage401',
+        details: 'AbpUi::DefaultErrorMessage401Detail',
+    },
+    defaultError403: {
+        title: 'AbpUi::DefaultErrorMessage403',
+        details: 'AbpUi::DefaultErrorMessage403Detail',
+    },
+    defaultError404: {
+        title: 'AbpUi::DefaultErrorMessage404',
+        details: 'AbpUi::DefaultErrorMessage404Detail',
+    },
+    defaultError500: {
+        title: 'AbpUi::500Message',
+        details: 'AbpUi::DefaultErrorMessage',
+    },
+};
+const CUSTOM_HTTP_ERROR_HANDLER_PRIORITY = Object.freeze({
+    veryLow: -99,
+    low: -9,
+    normal: 0,
+    high: 9,
+    veryHigh: 99,
+});
+const HTTP_ERROR_STATUS = {
+    '401': 'AbpUi::401Message',
+    '403': 'AbpUi::403Message',
+    '404': 'AbpUi::404Message',
+    '500': 'AbpUi::500Message',
+};
+const HTTP_ERROR_DETAIL = {
+    '401': 'AbpUi::DefaultErrorMessage401Detail',
+    '403': 'AbpUi::DefaultErrorMessage403Detail',
+    '404': 'AbpUi::DefaultErrorMessage404Detail',
+    '500': 'AbpUi::DefaultErrorMessage',
+};
+
+function getErrorFromRequestBody(body) {
+    let message;
+    let title;
+    if (body.details) {
+        message = body.details;
+        title = body.message;
+    }
+    else if (body.message) {
+        title = {
+            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
+            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
+        };
+        message = body.message;
+    }
+    else {
+        message = {
+            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
+            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
+        };
+        title = '';
+    }
+    return { message, title };
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    declarations: [...declarationsWithExports$1],
-                    imports: [CommonModule],
-                    exports: [...declarationsWithExports$1],
-                }]
+
+class AbpFormatErrorHandlerService {
+    constructor() {
+        this.priority = CUSTOM_HTTP_ERROR_HANDLER_PRIORITY.high;
+        this.confirmationService = inject(ConfirmationService);
+        this.authService = inject(AuthService);
+        this.error = undefined;
+    }
+    navigateToLogin() {
+        return this.authService.navigateToLogin();
+    }
+    canHandle(error) {
+        if (error instanceof HttpErrorResponse && error.headers.get('_AbpErrorFormat')) {
+            this.error = error;
+            return true;
+        }
+        return false;
+    }
+    execute() {
+        const { message, title } = getErrorFromRequestBody(this.error?.error?.error);
+        this.confirmationService
+            .error(message, title, {
+            hideCancelBtn: true,
+            yesText: 'AbpAccount::Close',
+        })
+            .subscribe(() => {
+            if (this.error?.status === 401) {
+                this.navigateToLogin();
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpFormatErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpFormatErrorHandlerService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpFormatErrorHandlerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
-class FormCheckboxComponent extends AbstractNgModelComponent {
+class TenantResolveErrorHandlerService {
     constructor() {
-        super(...arguments);
-        this.labelClass = 'form-check-label';
-        this.checkboxClass = 'form-check-input';
-        this.checkboxReadonly = false;
-        this.checkboxBlur = new EventEmitter();
-        this.checkboxFocus = new EventEmitter();
+        this.sessionService = inject(SessionStateService);
+        this.priority = CUSTOM_HTTP_ERROR_HANDLER_PRIORITY.high;
+        this.authService = inject(AuthService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: FormCheckboxComponent, isStandalone: false, selector: "abp-checkbox", inputs: { label: "label", labelClass: "labelClass", checkboxId: "checkboxId", checkboxStyle: "checkboxStyle", checkboxClass: "checkboxClass", checkboxReadonly: "checkboxReadonly" }, outputs: { checkboxBlur: "checkboxBlur", checkboxFocus: "checkboxFocus" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => FormCheckboxComponent),
-                multi: true,
-            },
-        ], usesInheritance: true, ngImport: i0, template: `
-    <div class="mb-3">
-      <input
-        type="checkbox"
-        [(ngModel)]="value"
-        [id]="checkboxId"
-        [readonly]="checkboxReadonly"
-        [ngClass]="checkboxClass"
-        [ngStyle]="checkboxStyle"
-        (blur)="checkboxBlur.next()"
-        (focus)="checkboxFocus.next()"
-      />
-      @if (label) {
-        <label [ngClass]="labelClass" [for]="checkboxId">
-          {{ label | abpLocalization }}
-        </label>
-      }
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: i2.LocalizationPipe, name: "abpLocalization" }] }); }
+    isTenantResolveError(error) {
+        return error instanceof HttpErrorResponse && !!error.headers.get('Abp-Tenant-Resolve-Error');
+    }
+    canHandle(error) {
+        return this.isTenantResolveError(error);
+    }
+    execute() {
+        this.sessionService.setTenant(null);
+        this.authService.logout().subscribe();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TenantResolveErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TenantResolveErrorHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormCheckboxComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: false,
-                    selector: 'abp-checkbox',
-                    template: `
-    <div class="mb-3">
-      <input
-        type="checkbox"
-        [(ngModel)]="value"
-        [id]="checkboxId"
-        [readonly]="checkboxReadonly"
-        [ngClass]="checkboxClass"
-        [ngStyle]="checkboxStyle"
-        (blur)="checkboxBlur.next()"
-        (focus)="checkboxFocus.next()"
-      />
-      @if (label) {
-        <label [ngClass]="labelClass" [for]="checkboxId">
-          {{ label | abpLocalization }}
-        </label>
-      }
-    </div>
-  `,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => FormCheckboxComponent),
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], propDecorators: { label: [{
-                type: Input
-            }], labelClass: [{
-                type: Input
-            }], checkboxId: [{
-                type: Input
-            }], checkboxStyle: [{
-                type: Input
-            }], checkboxClass: [{
-                type: Input
-            }], checkboxReadonly: [{
-                type: Input
-            }], checkboxBlur: [{
-                type: Output
-            }], checkboxFocus: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TenantResolveErrorHandlerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class FormInputComponent extends AbstractNgModelComponent {
+class StatusCodeErrorHandlerService {
     constructor() {
-        super(...arguments);
-        this.inputReadonly = false;
-        this.label = '';
-        this.labelClass = 'form-label';
-        this.inputPlaceholder = '';
-        this.inputClass = 'form-control';
-        this.formBlur = new EventEmitter();
-        this.formFocus = new EventEmitter();
+        this.confirmationService = inject(ConfirmationService);
+        this.createErrorComponentService = inject(CreateErrorComponentService);
+        this.authService = inject(AuthService);
+        this.handledStatusCodes = [401, 403, 404, 500];
+        this.priority = CUSTOM_HTTP_ERROR_HANDLER_PRIORITY.normal;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: FormInputComponent, isStandalone: false, selector: "abp-form-input", inputs: { inputId: "inputId", inputReadonly: "inputReadonly", label: "label", labelClass: "labelClass", inputPlaceholder: "inputPlaceholder", inputStyle: "inputStyle", inputClass: "inputClass" }, outputs: { formBlur: "formBlur", formFocus: "formFocus" }, providers: [
-            {
-                provide: NG_VALUE_ACCESSOR,
-                useExisting: forwardRef(() => FormInputComponent),
-                multi: true,
+    navigateToLogin() {
+        this.authService.navigateToLogin();
+    }
+    showConfirmation(message, title) {
+        return this.confirmationService.error(message, title, {
+            hideCancelBtn: true,
+            yesText: 'AbpAccount::Close',
+        });
+    }
+    showPage() {
+        const key = `defaultError${this.status}`;
+        const shouldRemoveDetail = [401, 404].indexOf(this.status) > -1;
+        const instance = {
+            title: {
+                key: DEFAULT_ERROR_LOCALIZATIONS[key]?.title,
+                defaultValue: DEFAULT_ERROR_MESSAGES[key]?.title,
             },
-        ], usesInheritance: true, ngImport: i0, template: `
-    <div class="mb-3">
-      @if (label) {
-        <label [ngClass]="labelClass" [for]="inputId">
-          {{ label | abpLocalization }}
-        </label>
-      }
-      <input
-        type="text"
-        [id]="inputId"
-        [placeholder]="inputPlaceholder"
-        [readonly]="inputReadonly"
-        [ngClass]="inputClass"
-        [ngStyle]="inputStyle"
-        (blur)="formBlur.next()"
-        (focus)="formFocus.next()"
-        [(ngModel)]="value"
-      />
-    </div>
-  `, isInline: true, dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] }); }
+            details: {
+                key: DEFAULT_ERROR_LOCALIZATIONS[key]?.details,
+                defaultValue: DEFAULT_ERROR_MESSAGES[key]?.details,
+            },
+            status: this.status,
+        };
+        if (shouldRemoveDetail) {
+            delete instance.details;
+        }
+        this.createErrorComponentService.execute(instance);
+    }
+    canHandle(error) {
+        this.status = error?.status || 0;
+        return this.handledStatusCodes.indexOf(this.status) > -1;
+    }
+    execute() {
+        const key = `defaultError${this.status}`;
+        const title = {
+            key: DEFAULT_ERROR_LOCALIZATIONS[key]?.title,
+            defaultValue: DEFAULT_ERROR_MESSAGES[key]?.title,
+        };
+        const message = {
+            key: DEFAULT_ERROR_LOCALIZATIONS[key]?.details,
+            defaultValue: DEFAULT_ERROR_MESSAGES[key]?.details,
+        };
+        const canCreateCustomError = this.createErrorComponentService.canCreateCustomError(this.status);
+        switch (this.status) {
+            case 401:
+            case 404:
+                if (canCreateCustomError) {
+                    this.showPage();
+                    break;
+                }
+                if (this.status === 401) {
+                    this.authService.navigateToLogin();
+                    break;
+                }
+                this.showConfirmation(title, message).subscribe();
+                break;
+            case 403:
+            case 500:
+                this.showPage();
+                break;
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: StatusCodeErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: StatusCodeErrorHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormInputComponent, decorators: [{
-            type: Component,
-            args: [{
-                    standalone: false,
-                    selector: 'abp-form-input',
-                    template: `
-    <div class="mb-3">
-      @if (label) {
-        <label [ngClass]="labelClass" [for]="inputId">
-          {{ label | abpLocalization }}
-        </label>
-      }
-      <input
-        type="text"
-        [id]="inputId"
-        [placeholder]="inputPlaceholder"
-        [readonly]="inputReadonly"
-        [ngClass]="inputClass"
-        [ngStyle]="inputStyle"
-        (blur)="formBlur.next()"
-        (focus)="formFocus.next()"
-        [(ngModel)]="value"
-      />
-    </div>
-  `,
-                    providers: [
-                        {
-                            provide: NG_VALUE_ACCESSOR,
-                            useExisting: forwardRef(() => FormInputComponent),
-                            multi: true,
-                        },
-                    ],
-                }]
-        }], propDecorators: { inputId: [{
-                type: Input
-            }], inputReadonly: [{
-                type: Input
-            }], label: [{
-                type: Input
-            }], labelClass: [{
-                type: Input
-            }], inputPlaceholder: [{
-                type: Input
-            }], inputStyle: [{
-                type: Input
-            }], inputClass: [{
-                type: Input
-            }], formBlur: [{
-                type: Output
-            }], formFocus: [{
-                type: Output
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: StatusCodeErrorHandlerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class InternetConnectionStatusComponent {
+class UnknownStatusCodeErrorHandlerService {
     constructor() {
-        this.internetConnectionService = inject(InternetConnectionService);
-        this.isOnline = this.internetConnectionService.networkStatus;
+        this.priority = CUSTOM_HTTP_ERROR_HANDLER_PRIORITY.normal;
+        this.statusText = 'Unknown Error';
+        this.message = '';
+        this.createErrorComponentService = inject(CreateErrorComponentService);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: InternetConnectionStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: InternetConnectionStatusComponent, isStandalone: true, selector: "abp-internet-status", ngImport: i0, template: `
-    @if (!isOnline()) {
-      <div class="status-icon">
-        <i
-          ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
-          container="body"
-          placement="left-top"
-          class="fa fa-wifi text-blinking blink"
-        >
-        </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"] }] }); }
+    canHandle(error) {
+        if (error && error.status === 0 && error.statusText === this.statusText) {
+            this.message = error.message;
+            return true;
+        }
+        return false;
+    }
+    execute() {
+        this.createErrorComponentService.execute({
+            title: {
+                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
+                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
+            },
+            details: this.message,
+            isHomeShow: false,
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UnknownStatusCodeErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UnknownStatusCodeErrorHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: InternetConnectionStatusComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'abp-internet-status', imports: [LocalizationModule, NgbTooltip], template: `
-    @if (!isOnline()) {
-      <div class="status-icon">
-        <i
-          ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
-          container="body"
-          placement="left-top"
-          class="fa fa-wifi text-blinking blink"
-        >
-        </i>
-      </div>
-    }
-  `, 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"] }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UnknownStatusCodeErrorHandlerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
-class SpinnerComponent {
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: SpinnerComponent, isStandalone: true, selector: "abp-spinner", ngImport: i0, template: `
-    <div class="d-flex justify-content-center align-items-center border-top" style="height: 62px">
-      <div class="spinner-border" role="status" id="loading">
-        <span class="visually-hidden">Loading...</span>
-      </div>
-    </div>
-  `, isInline: true }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SpinnerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-spinner',
-                    standalone: true,
-                    template: `
-    <div class="d-flex justify-content-center align-items-center border-top" style="height: 62px">
-      <div class="spinner-border" role="status" id="loading">
-        <span class="visually-hidden">Loading...</span>
-      </div>
-    </div>
-  `,
-                }]
-        }] });
+var styles = `
+.is-invalid .form-control {
+  border-color: #dc3545;
+  border-style: solid !important;
+  padding-right: calc(1.5em + .75rem);
+  background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);
+  background-repeat: no-repeat;
+  background-position: right calc(.375em + .1875rem) center;
+  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
+}
+
+.is-invalid .invalid-feedback,
+.is-invalid + * .invalid-feedback {
+  display: block;
+}
+
+.data-tables-filter {
+  text-align: right;
+}
+
+[dir=rtl] .data-tables-filter {
+  text-align: left;
+}
+
+.pointer {
+  cursor: pointer;
+}
+
+.navbar .dropdown-submenu a::after {
+  transform: rotate(-90deg);
+  position: absolute;
+  right: 16px;
+  top: 18px;
+}
+
+.navbar .dropdown-menu {
+  min-width: 215px;
+}
+
+.datatable-scroll {
+  margin-bottom: 5px !important;
+  width: unset !important;
+}
+
+.ui-table-scrollable-body::-webkit-scrollbar {
+  height: 5px !important;
+  width: 5px !important;
+}
+
+.ui-table-scrollable-body::-webkit-scrollbar-track {
+  background: #ddd;
+}
+
+.ui-table-scrollable-body::-webkit-scrollbar-thumb {
+  background: #8a8686;
+}
+
+.abp-ellipsis-inline {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.abp-ellipsis {
+  overflow: hidden !important;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-widget-overlay {
+  z-index: 1000;
+}
+
+.color-white {
+  color: #FFF !important;
+}
+
+.custom-checkbox > label {
+  cursor: pointer;
+}
+
+/* <animations */
+
+.fade-in-top {
+  animation: fadeInTop 0.2s ease-in-out;
+}
+
+.fade-out-top {
+  animation: fadeOutTop 0.2s ease-in-out;
+}
+
+.abp-collapsed-height {
+  -moz-transition: max-height linear 0.35s;
+  -ms-transition: max-height linear 0.35s;
+  -o-transition: max-height linear 0.35s;
+  -webkit-transition: max-height linear 0.35s;
+  overflow:hidden;
+  transition:max-height 0.35s linear;
+  height:auto;
+  max-height: 0;
+}
+
+.abp-mh-25 {
+  max-height: 25vh;
+}
+
+.abp-mh-50 {
+  transition:max-height 0.65s linear;
+  max-height: 50vh;
+}
+
+.abp-mh-75 {
+  transition:max-height 0.85s linear;
+  max-height: 75vh;
+}
+
+.abp-mh-100 {
+  transition:max-height 1s linear;
+  max-height: 100vh;
+}
+
+[class^="sorting"] {
+  opacity: .3;
+  cursor: pointer;
+}
+[class^="sorting"]:before {
+  right: 0.5rem;
+  content: "↑";
+}
+[class^="sorting"]:after {
+  right: 0.5rem;
+  content: "↓";
+}
+
+.sorting_desc {
+  opacity: 1;
+}
+.sorting_desc:before {
+  opacity: .3;
+}
+
+.sorting_asc {
+  opacity: 1;
+}
+.sorting_asc:after {
+  opacity: .3;
+}
+.ngx-datatable.material {
+  box-shadow: none;
+}
+ngb-typeahead-window, ngb-typeahead-window.dropdown-menu {
+  max-height: 25em;
+  overflow-y: scroll !important;
+  z-index: 1050;
+}
+
+.abp-modal-header {
+  word-break: break-word;
+}
+
+
+@keyframes fadeInTop {
+  from {
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+
+  to {
+    transform: translateY(0px);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeOutTop {
+  to {
+    transform: translateY(-5px);
+    opacity: 0;
+  }
+}
+
+/* </animations */
+.ngb-dp-body {
+  z-index: 1055 !important;
+}
+`;
 
-class EllipsisDirective {
-    get inlineClass() {
-        return this.enabled && this.width;
+const THEME_SHARED_APPEND_CONTENT = new InjectionToken('THEME_SHARED_APPEND_CONTENT', {
+    providedIn: 'root',
+    factory: () => {
+        const domInsertion = inject(DomInsertionService);
+        domInsertion.insertContent(CONTENT_STRATEGY.AppendStyleToHead(styles));
+    },
+});
+
+const defaultNgxDatatableMessages = {
+    emptyMessage: 'AbpUi::NoDataAvailableInDatatable',
+    errorMessage: 'AbpUi::ErrorLoadingDatatable',
+    totalMessage: 'AbpUi::Total',
+    selectedMessage: 'AbpUi::Selected',
+};
+const NGX_DATATABLE_MESSAGES = new InjectionToken('NGX_DATATABLE_MESSAGES');
+
+const SUPPRESS_UNSAVED_CHANGES_WARNING = new InjectionToken('SUPPRESS_UNSAVED_CHANGES_WARNING');
+
+class RouterErrorHandlerService {
+    constructor() {
+        this.routerEvents = inject(RouterEvents);
+        this.httpErrorConfig = inject(HTTP_ERROR_CONFIG);
+        this.createErrorComponentService = inject(CreateErrorComponentService);
+        this.filterRouteErrors = (navigationError) => {
+            if (!this.httpErrorConfig?.skipHandledErrorCodes) {
+                return true;
+            }
+            return (navigationError.error?.message?.indexOf('Cannot match') > -1 &&
+                this.httpErrorConfig.skipHandledErrorCodes.findIndex(code => code === 404) < 0);
+        };
     }
-    get class() {
-        return this.enabled && !this.width;
-    }
-    get maxWidth() {
-        return this.enabled && this.width ? this.width || '170px' : undefined;
-    }
-    constructor(cdRef, elRef) {
-        this.cdRef = cdRef;
-        this.elRef = elRef;
-        this.enabled = true;
+    listen() {
+        this.routerEvents
+            .getNavigationEvents('Error')
+            .pipe(filter(this.filterRouteErrors))
+            .subscribe(() => this.show404Page());
     }
-    ngAfterViewInit() {
-        this.title = this.title || this.elRef.nativeElement.innerText;
-        this.cdRef.detectChanges();
+    show404Page() {
+        const instance = {
+            title: {
+                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError404.title,
+                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError404.title,
+            },
+            status: 404,
+        };
+        this.createErrorComponentService.execute(instance);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: EllipsisDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: EllipsisDirective, isStandalone: true, selector: "[abpEllipsis]", inputs: { width: ["abpEllipsis", "width"], title: "title", enabled: ["abpEllipsisEnabled", "enabled"] }, host: { properties: { "title": "this.title", "class.abp-ellipsis-inline": "this.inlineClass", "class.abp-ellipsis": "this.class", "style.max-width": "this.maxWidth" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RouterErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RouterErrorHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: EllipsisDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[abpEllipsis]',
-                    standalone: true
-                }]
-        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { width: [{
-                type: Input,
-                args: ['abpEllipsis']
-            }], title: [{
-                type: HostBinding,
-                args: ['title']
-            }, {
-                type: Input
-            }], enabled: [{
-                type: Input,
-                args: ['abpEllipsisEnabled']
-            }], inlineClass: [{
-                type: HostBinding,
-                args: ['class.abp-ellipsis-inline']
-            }], class: [{
-                type: HostBinding,
-                args: ['class.abp-ellipsis']
-            }], maxWidth: [{
-                type: HostBinding,
-                args: ['style.max-width']
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RouterErrorHandlerService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class LoadingDirective {
-    get loading() {
-        return this._loading;
-    }
-    set loading(newValue) {
-        setTimeout(() => {
-            if (!newValue && this.timerSubscription) {
-                this.timerSubscription.unsubscribe();
-                this.timerSubscription = null;
-                this._loading = newValue;
-                if (this.rootNode) {
-                    this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
-                    this.rootNode = null;
-                }
-                return;
-            }
-            this.timerSubscription = timer(this.delay)
-                .pipe(take(1))
-                .subscribe(() => {
-                if (!this.componentRef) {
-                    this.componentRef = this.cdRes
-                        .resolveComponentFactory(LoadingComponent)
-                        .create(this.injector);
-                }
-                if (newValue && !this.rootNode) {
-                    this.rootNode = this.componentRef.hostView.rootNodes[0];
-                    this.targetElement?.appendChild(this.rootNode);
-                }
-                else if (this.rootNode) {
-                    this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
-                    this.rootNode = null;
-                }
-                this._loading = newValue;
-                this.timerSubscription = null;
-            });
-        }, 0);
+class AbpAuthenticationErrorHandler {
+    constructor() {
+        this.priority = CUSTOM_HTTP_ERROR_HANDLER_PRIORITY.veryHigh;
+        this.authService = inject(AuthService);
+        this.configStateService = inject(ConfigStateService);
     }
-    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;
+    canHandle(error) {
+        return error instanceof HttpErrorResponse && error.status === 401;
     }
-    ngOnInit() {
-        if (!this.targetElement) {
-            const { offsetHeight, offsetWidth } = this.elRef.nativeElement;
-            if (!offsetHeight && !offsetWidth && this.elRef.nativeElement.children.length) {
-                this.targetElement = this.elRef.nativeElement.children[0];
-            }
-            else {
-                this.targetElement = this.elRef.nativeElement;
+    execute() {
+        this.configStateService.refreshAppState().subscribe(({ currentUser }) => {
+            if (!currentUser.isAuthenticated) {
+                this.authService.logout({ noRedirectToLogoutUrl: true });
             }
-        }
-    }
-    ngOnDestroy() {
-        if (this.timerSubscription) {
-            this.timerSubscription.unsubscribe();
-        }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", 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.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: LoadingDirective, isStandalone: false, selector: "[abpLoading]", inputs: { loading: ["abpLoading", "loading"], targetElement: ["abpLoadingTargetElement", "targetElement"], delay: ["abpLoadingDelay", "delay"] }, host: { properties: { "style.position": "this.position" } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpAuthenticationErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpAuthenticationErrorHandler, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: LoadingDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: false,
-                    selector: '[abpLoading]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.Renderer2 }], propDecorators: { position: [{
-                type: HostBinding,
-                args: ['style.position']
-            }], loading: [{
-                type: Input,
-                args: ['abpLoading']
-            }], targetElement: [{
-                type: Input,
-                args: ['abpLoadingTargetElement']
-            }], delay: [{
-                type: Input,
-                args: ['abpLoadingDelay']
-            }] } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpAuthenticationErrorHandler, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class NgxDatatableDefaultDirective {
-    get classes() {
-        return `ngx-datatable ${this.class}`;
+class ModalRefService {
+    constructor() {
+        this.modalRefs = [];
     }
-    constructor(table, document) {
-        this.table = table;
-        this.document = document;
-        this.subscription = new Subscription();
-        this.resizeDiff = 0;
-        this.class = 'material bordered';
-        this.table.columnMode = ColumnMode.force;
-        this.table.footerHeight = 50;
-        this.table.headerHeight = 50;
-        this.table.rowHeight = 'auto';
-        this.table.scrollbarH = true;
-        this.table.virtualization = false;
+    register(modal) {
+        this.modalRefs.push(modal);
     }
-    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;
-            }
-        }
-        else {
-            scroller.scrollWidth += this.resizeDiff;
-            this.resizeDiff = 0;
+    unregister(modal) {
+        const index = this.modalRefs.indexOf(modal);
+        if (index > -1) {
+            this.modalRefs.splice(index, 1);
         }
     }
-    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);
-    }
-    ngAfterViewInit() {
-        this.fixStyleOnWindowResize();
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
+    dismissAll(mode) {
+        this.modalRefs.forEach(modal => modal.dismiss(mode));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxDatatableDefaultDirective, deps: [{ token: i1$2.DatatableComponent }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: NgxDatatableDefaultDirective, isStandalone: true, selector: "ngx-datatable[default]", inputs: { class: "class" }, host: { properties: { "class": "this.classes" } }, exportAs: ["ngxDatatableDefault"], ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalRefService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalRefService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxDatatableDefaultDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'ngx-datatable[default]',
-                    standalone: true,
-                    exportAs: 'ngxDatatableDefault',
-                }]
-        }], ctorParameters: () => [{ type: i1$2.DatatableComponent }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }], propDecorators: { class: [{
-                type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
-            }] } });
-
-const defaultNgxDatatableMessages = {
-    emptyMessage: 'AbpUi::NoDataAvailableInDatatable',
-    errorMessage: 'AbpUi::ErrorLoadingDatatable',
-    totalMessage: 'AbpUi::Total',
-    selectedMessage: 'AbpUi::Selected',
-};
-const NGX_DATATABLE_MESSAGES = new InjectionToken('NGX_DATATABLE_MESSAGES');
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalRefService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
-class NgxDatatableListDirective {
-    constructor() {
-        this.table = inject(DatatableComponent);
-        this.cdRef = inject(ChangeDetectorRef);
-        this.destroyRef = inject(DestroyRef);
-        this.localizationService = inject(LocalizationService);
-        this.ngxDatatableMessages = inject(NGX_DATATABLE_MESSAGES, { optional: true });
-        this.viewContainerRef = inject(ViewContainerRef);
-        this.renderer = inject(Renderer2);
-        this.setInitialValues();
+class ModalComponent {
+    get modalWindowRef() {
+        return document.querySelector(`ngb-modal-window.${this.modalIdentifier}`);
     }
-    ngDoCheck() {
-        this.refreshPageIfDataExist();
+    get isFormDirty() {
+        return Boolean(this.modalWindowRef?.querySelector('.ng-dirty'));
+    }
+    constructor() {
+        this.confirmationService = inject(ConfirmationService);
+        this.modal = inject(NgbModal);
+        this.modalRefService = inject(ModalRefService);
+        this.suppressUnsavedChangesWarningToken = inject(SUPPRESS_UNSAVED_CHANGES_WARNING, {
+            optional: true,
+        });
+        this.destroyRef = inject(DestroyRef);
+        this.visible = model(false);
+        this.busy = input(false, {
+            transform: (value) => {
+                if (this.abpSubmit() && this.abpSubmit() instanceof ButtonComponent) {
+                    this.abpSubmit().loading = value;
+                }
+                return value;
+            },
+        });
+        this.options = input({ keyboard: true });
+        this.suppressUnsavedChangesWarning = input(this.suppressUnsavedChangesWarningToken);
+        this.modalContent = viewChild('modalContent');
+        this.abpHeader = contentChild('abpHeader');
+        this.abpBody = contentChild('abpBody');
+        this.abpFooter = contentChild('abpFooter');
+        this.abpSubmit = contentChild(ButtonComponent, { read: ButtonComponent });
+        this.init = output();
+        this.appear = output();
+        this.disappear = output();
+        this.isConfirmationOpen = false;
+        this.modalIdentifier = `modal-${uuid()}`;
+        effect(() => {
+            this.toggle(this.visible());
+        });
     }
     ngOnInit() {
-        this.subscribeToPage();
-        this.subscribeToSort();
-        this.subscribeToRequestStatus();
+        this.modalRefService.register(this);
     }
-    ngOnChanges({ list }) {
-        this.subscribeToQuery();
-        if (!list.firstChange)
-            return;
-        const { maxResultCount, page } = list.currentValue;
-        this.table.limit = maxResultCount;
-        this.table.offset = page;
+    dismiss(mode) {
+        switch (mode) {
+            case 'hard':
+                this.visible.set(false);
+                break;
+            case 'soft':
+                this.close();
+                break;
+            default:
+                break;
+        }
     }
-    subscribeToRequestStatus() {
-        const requestStatus$ = this.list.requestStatus$.pipe(distinctUntilChanged());
-        const { emptyMessage, errorMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages;
-        requestStatus$.subscribe(status => {
-            this.table.loadingIndicator = false;
-            if (status === 'idle') {
-                return;
-            }
-            if (status === 'loading') {
-                this.table.messages.emptyMessage = undefined;
-                this.table.loadingIndicator = true;
-                this.cdRef.detectChanges();
-                this.updateLoadingIndicator();
-                return;
-            }
-            if (status === 'error') {
-                this.table.messages.emptyMessage = this.localizationService.instant(errorMessage);
-                this.viewContainerRef.clear();
-                this.cdRef.markForCheck();
-            }
-            if (status === 'success') {
-                this.table.messages.emptyMessage = this.localizationService.instant(emptyMessage);
-                this.viewContainerRef.clear();
-            }
+    toggle(value) {
+        this.visible.set(value);
+        if (!value) {
+            this.modalRef?.dismiss();
+            this.disappear.emit();
+            return;
+        }
+        setTimeout(() => this.listen(), 0);
+        this.modalRef = this.modal.open(this.modalContent(), {
+            size: 'md',
+            centered: false,
+            keyboard: false,
+            scrollable: true,
+            beforeDismiss: () => {
+                if (!this.visible())
+                    return true;
+                this.close();
+                return !this.visible();
+            },
+            ...this.options(),
+            windowClass: `${this.options().windowClass || ''} ${this.modalIdentifier}`,
         });
+        this.appear.emit();
     }
-    updateLoadingIndicator() {
-        const body = this.table.element.querySelector('datatable-body');
-        const progress = this.table.element.querySelector('datatable-progress');
-        if (!body) {
+    ngOnDestroy() {
+        this.modalRefService.unregister(this);
+        this.toggle(false);
+    }
+    close() {
+        if (this.busy())
             return;
+        if (this.isFormDirty && !this.suppressUnsavedChangesWarning()) {
+            if (this.isConfirmationOpen)
+                return;
+            this.isConfirmationOpen = true;
+            this.confirmationService
+                .warn('AbpUi::AreYouSureYouWantToCancelEditingWarningMessage', 'AbpUi::AreYouSure', {
+                dismissible: false,
+            })
+                .subscribe((status) => {
+                this.isConfirmationOpen = false;
+                if (status === Confirmation.Status.confirm) {
+                    this.visible.set(false);
+                }
+            });
         }
-        if (progress) {
-            this.replaceLoadingIndicator(body, progress);
+        else {
+            this.visible.set(false);
         }
     }
-    replaceLoadingIndicator(parent, placeholder) {
-        this.viewContainerRef.clear();
-        const spinnerRef = this.viewContainerRef.createComponent(SpinnerComponent);
-        const spinnerElement = spinnerRef.location.nativeElement;
-        this.renderer.insertBefore(parent, spinnerElement, placeholder);
-        this.renderer.removeChild(parent, placeholder);
-    }
-    setInitialValues() {
-        this.table.externalPaging = true;
-        this.table.externalSorting = true;
-        const { selectedMessage, totalMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages;
-        this.table.messages = {
-            totalMessage: this.localizationService.instant(totalMessage),
-            selectedMessage: this.localizationService.instant(selectedMessage),
-        };
-    }
-    subscribeToSort() {
-        this.table.sort
+    listen() {
+        if (this.modalWindowRef) {
+            fromEvent(this.modalWindowRef, 'keyup')
+                .pipe(takeUntilDestroyed(this.destroyRef), debounceTime(150), filter((key) => key && key.key === 'Escape' && this.options().keyboard))
+                .subscribe(() => this.close());
+        }
+        fromEvent(window, 'beforeunload')
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(({ sorts: [{ prop, dir }] }) => {
-            if (prop === this.list.sortKey && this.list.sortOrder === 'desc') {
-                this.list.sortKey = '';
-                this.list.sortOrder = '';
-                this.table.sorts = [];
-                this.cdRef.detectChanges();
-            }
-            else {
-                this.list.sortKey = prop;
-                this.list.sortOrder = dir;
+            .subscribe(event => {
+            if (this.isFormDirty && !this.suppressUnsavedChangesWarning()) {
+                event.preventDefault();
             }
         });
+        this.init.emit();
     }
-    subscribeToPage() {
-        this.table.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ offset }) => {
-            this.setTablePage(offset);
-        });
-    }
-    subscribeToQuery() {
-        this.list.query$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
-            const offset = this.list.page;
-            if (this.table.offset !== offset)
-                this.table.offset = offset;
-        });
-    }
-    setTablePage(pageNum) {
-        this.list.page = pageNum;
-        this.table.offset = pageNum;
-    }
-    refreshPageIfDataExist() {
-        if (this.table.rows?.length < 1 && this.table.count > 0) {
-            let maxPage = Math.floor(Number(this.table.count / this.list.maxResultCount));
-            if (this.table.count < this.list.maxResultCount) {
-                this.setTablePage(0);
-                return;
-            }
-            if (this.table.count % this.list.maxResultCount === 0) {
-                maxPage -= 1;
-            }
-            if (this.list.page < maxPage) {
-                this.setTablePage(this.list.page);
-                return;
-            }
-            this.setTablePage(maxPage);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", 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"] }]
+        }], ctorParameters: () => [] });
+
+class ModalCloseDirective {
+    constructor(modal) {
+        this.modal = modal;
+        if (!modal) {
+            console.error('Please use abpClose within an abp-modal');
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxDatatableListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: NgxDatatableListDirective, isStandalone: true, selector: "ngx-datatable[list]", inputs: { list: "list" }, exportAs: ["ngxDatatableList"], usesOnChanges: true, ngImport: i0 }); }
+    onClick() {
+        this.modal?.close();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalCloseDirective, deps: [{ token: ModalComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: ModalCloseDirective, isStandalone: true, selector: "[abpClose]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxDatatableListDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ModalCloseDirective, decorators: [{
             type: Directive,
             args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'ngx-datatable[list]',
-                    standalone: true,
-                    exportAs: 'ngxDatatableList',
+                    selector: '[abpClose]',
                 }]
-        }], ctorParameters: () => [], propDecorators: { list: [{
-                type: Input
+        }], ctorParameters: () => [{ type: ModalComponent, decorators: [{
+                    type: Optional
+                }] }], propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
-class AbpVisibleDirective {
-    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();
-    }
-    ngOnDestroy() {
-        this.conditionSubscription?.unsubscribe();
+/**
+ * @deprecated use ShowPasswordDirective directive
+ * https://abp.io/docs/latest/framework/ui/angular/show-password-directive
+ */
+class PasswordComponent extends AbstractNgModelComponent {
+    toggleFieldTextType() {
+        this.fieldTextType = !this.fieldTextType;
     }
-    subscribeToCondition() {
-        this.conditionSubscription = this.condition$.subscribe(value => {
-            this.isVisible = value;
-            this.updateVisibility();
-        });
-    }
-    updateVisibility() {
-        this.viewContainerRef.clear();
-        // it should be false not falsy
-        if (this.isVisible === false) {
-            return;
-        }
-        this.viewContainerRef.createEmbeddedView(this.templateRef);
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpVisibleDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: AbpVisibleDirective, isStandalone: true, selector: "[abpVisible]", inputs: { abpVisible: "abpVisible" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpVisibleDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    standalone: true,
-                    selector: '[abpVisible]',
-                }]
-        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }], propDecorators: { abpVisible: [{
-                type: Input
-            }] } });
-function checkType(value) {
-    if (value instanceof Promise) {
-        return from(value);
-    }
-    else if (value instanceof Observable) {
-        return value;
-    }
-    else if (typeof value === 'boolean') {
-        return of(value);
-    }
-    else if (value === undefined || value === null) {
-        return of(true);
-    }
-    else {
-        return EMPTY;
-    }
-}
-
-class DisabledDirective {
-    constructor(ngControl) {
-        this.ngControl = ngControl;
-        this.abpDisabled = false;
-    }
-    // Related issue: https://github.com/angular/angular/issues/35330
-    ngOnChanges({ abpDisabled }) {
-        if (this.ngControl.control && abpDisabled) {
-            this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
-        }
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DisabledDirective, deps: [{ token: i2$1.NgControl, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: DisabledDirective, isStandalone: true, selector: "[abpDisabled]", inputs: { abpDisabled: "abpDisabled" }, usesOnChanges: true, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DisabledDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[abpDisabled]',
-                    standalone: true,
-                }]
-        }], ctorParameters: () => [{ type: i2$1.NgControl, decorators: [{
-                    type: Host
-                }] }], propDecorators: { abpDisabled: [{
-                type: Input
-            }] } });
-
-var eFormComponets;
-(function (eFormComponets) {
-    eFormComponets["FormInputComponent"] = "FormInputComponent";
-    eFormComponets["FormCheckboxComponent"] = "FormCheckboxComponent";
-})(eFormComponets || (eFormComponets = {}));
-
-class DocumentDirHandlerService {
-    constructor(injector) {
-        this.injector = injector;
-        this.dir = new BehaviorSubject('ltr');
-        this.dir$ = this.dir.asObservable();
-        this.listenToLanguageChanges();
-    }
-    listenToLanguageChanges() {
-        const l10n = this.injector.get(LocalizationService);
-        // will always listen, no need to unsubscribe
-        l10n.currentLang$.pipe(map(locale => getLocaleDirection(locale))).subscribe(dir => {
-            this.dir.next(dir);
-            this.setBodyDir(dir);
-        });
-    }
-    setBodyDir(dir) {
-        document.body.dir = dir;
-        document.dir = dir;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DocumentDirHandlerService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DocumentDirHandlerService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: PasswordComponent, isStandalone: true, selector: "abp-password", inputs: { inputId: "inputId", formControlName: "formControlName" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PasswordComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: "<div class=\"input-group\" validationTarget>\r\n  <input\r\n    [type]=\"fieldTextType ? 'text' : 'password'\"\r\n    class=\"form-control\"\r\n    [id]=\"inputId\"\r\n    [(ngModel)]=\"value\"\r\n  />\r\n\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"toggleFieldTextType()\">\r\n    <i\r\n      class=\"fa\"\r\n      aria-hidden=\"true\"\r\n      [ngClass]=\"{\r\n        'fa-eye-slash': !fieldTextType,\r\n        'fa-eye': fieldTextType\r\n      }\"\r\n    ></i>\r\n  </button>\r\n</div>\r\n", dependencies: [{ kind: "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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DocumentDirHandlerService, decorators: [{
-            type: Injectable
-        }], ctorParameters: () => [{ type: i0.Injector }] });
-
-const HTTP_ERROR_CONFIG = new InjectionToken('HTTP_ERROR_CONFIG');
-/**
-  @deprecated use **`CUSTOM_ERROR_HANDLERS`** injection token instead of this, see more info https://abp.io/docs/latest/framework/ui/angular/http-requests
-*/
-const HTTP_ERROR_HANDLER = new InjectionToken('HTTP_ERROR_HANDLER');
-const CUSTOM_ERROR_HANDLERS = new InjectionToken('CUSTOM_ERROR_HANDLERS');
-
-const DEFAULT_ERROR_MESSAGES = {
-    defaultError: {
-        title: 'An error has occurred!',
-        details: 'Error detail not sent by server.',
-    },
-    defaultError401: {
-        title: 'You are not authenticated!',
-        details: 'You should be authenticated (sign in) in order to perform this operation.',
-    },
-    defaultError403: {
-        title: 'You are not authorized!',
-        details: 'You are not allowed to perform this operation.',
-    },
-    defaultError404: {
-        title: 'Resource not found!',
-        details: 'The resource requested could not found on the server.',
-    },
-    defaultError500: {
-        title: 'Internal server error',
-        details: 'Error detail not sent by server.',
-    },
-};
-const DEFAULT_ERROR_LOCALIZATIONS = {
-    defaultError: {
-        title: 'AbpUi::DefaultErrorMessage',
-        details: 'AbpUi::DefaultErrorMessageDetail',
-    },
-    defaultError401: {
-        title: 'AbpUi::DefaultErrorMessage401',
-        details: 'AbpUi::DefaultErrorMessage401Detail',
-    },
-    defaultError403: {
-        title: 'AbpUi::DefaultErrorMessage403',
-        details: 'AbpUi::DefaultErrorMessage403Detail',
-    },
-    defaultError404: {
-        title: 'AbpUi::DefaultErrorMessage404',
-        details: 'AbpUi::DefaultErrorMessage404Detail',
-    },
-    defaultError500: {
-        title: 'AbpUi::500Message',
-        details: 'AbpUi::DefaultErrorMessage',
-    },
-};
-const CUSTOM_HTTP_ERROR_HANDLER_PRIORITY = Object.freeze({
-    veryLow: -99,
-    low: -9,
-    normal: 0,
-    high: 9,
-    veryHigh: 99,
-});
-const HTTP_ERROR_STATUS = {
-    '401': 'AbpUi::401Message',
-    '403': 'AbpUi::403Message',
-    '404': 'AbpUi::404Message',
-    '500': 'AbpUi::500Message',
-};
-const HTTP_ERROR_DETAIL = {
-    '401': 'AbpUi::DefaultErrorMessage401Detail',
-    '403': 'AbpUi::DefaultErrorMessage403Detail',
-    '404': 'AbpUi::DefaultErrorMessage404Detail',
-    '500': 'AbpUi::DefaultErrorMessage',
-};
-
-var styles = `
-.is-invalid .form-control {
-  border-color: #dc3545;
-  border-style: solid !important;
-  padding-right: calc(1.5em + .75rem);
-  background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);
-  background-repeat: no-repeat;
-  background-position: right calc(.375em + .1875rem) center;
-  background-size: calc(.75em + .375rem) calc(.75em + .375rem);
-}
-
-.is-invalid .invalid-feedback,
-.is-invalid + * .invalid-feedback {
-  display: block;
-}
-
-.data-tables-filter {
-  text-align: right;
-}
-
-[dir=rtl] .data-tables-filter {
-  text-align: left;
-}
-
-.pointer {
-  cursor: pointer;
-}
-
-.navbar .dropdown-submenu a::after {
-  transform: rotate(-90deg);
-  position: absolute;
-  right: 16px;
-  top: 18px;
-}
-
-.navbar .dropdown-menu {
-  min-width: 215px;
-}
-
-.datatable-scroll {
-  margin-bottom: 5px !important;
-  width: unset !important;
-}
-
-.ui-table-scrollable-body::-webkit-scrollbar {
-  height: 5px !important;
-  width: 5px !important;
-}
-
-.ui-table-scrollable-body::-webkit-scrollbar-track {
-  background: #ddd;
-}
-
-.ui-table-scrollable-body::-webkit-scrollbar-thumb {
-  background: #8a8686;
-}
-
-.abp-ellipsis-inline {
-  display: inline-block;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.abp-ellipsis {
-  overflow: hidden !important;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ui-widget-overlay {
-  z-index: 1000;
-}
-
-.color-white {
-  color: #FFF !important;
-}
-
-.custom-checkbox > label {
-  cursor: pointer;
-}
-
-/* <animations */
-
-.fade-in-top {
-  animation: fadeInTop 0.2s ease-in-out;
-}
-
-.fade-out-top {
-  animation: fadeOutTop 0.2s ease-in-out;
-}
-
-.abp-collapsed-height {
-  -moz-transition: max-height linear 0.35s;
-  -ms-transition: max-height linear 0.35s;
-  -o-transition: max-height linear 0.35s;
-  -webkit-transition: max-height linear 0.35s;
-  overflow:hidden;
-  transition:max-height 0.35s linear;
-  height:auto;
-  max-height: 0;
-}
-
-.abp-mh-25 {
-  max-height: 25vh;
-}
-
-.abp-mh-50 {
-  transition:max-height 0.65s linear;
-  max-height: 50vh;
-}
-
-.abp-mh-75 {
-  transition:max-height 0.85s linear;
-  max-height: 75vh;
-}
-
-.abp-mh-100 {
-  transition:max-height 1s linear;
-  max-height: 100vh;
-}
-
-[class^="sorting"] {
-  opacity: .3;
-  cursor: pointer;
-}
-[class^="sorting"]:before {
-  right: 0.5rem;
-  content: "↑";
-}
-[class^="sorting"]:after {
-  right: 0.5rem;
-  content: "↓";
-}
-
-.sorting_desc {
-  opacity: 1;
-}
-.sorting_desc:before {
-  opacity: .3;
-}
-
-.sorting_asc {
-  opacity: 1;
-}
-.sorting_asc:after {
-  opacity: .3;
-}
-.ngx-datatable.material {
-  box-shadow: none;
-}
-ngb-typeahead-window, ngb-typeahead-window.dropdown-menu {
-  max-height: 25em;
-  overflow-y: scroll !important;
-  z-index: 1050;
-}
-
-.abp-modal-header {
-  word-break: break-word;
-}
-
-
-@keyframes fadeInTop {
-  from {
-    transform: translateY(-5px);
-    opacity: 0;
-  }
-
-  to {
-    transform: translateY(0px);
-    opacity: 1;
-  }
-}
-
-@keyframes fadeOutTop {
-  to {
-    transform: translateY(-5px);
-    opacity: 0;
-  }
-}
-
-/* </animations */
-.ngb-dp-body {
-  z-index: 1055 !important;
-}
-`;
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PasswordComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-password', imports: [CommonModule, FormsModule, ReactiveFormsModule, NgxValidateCoreModule], providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PasswordComponent),
+                            multi: true,
+                        },
+                    ], template: "<div class=\"input-group\" validationTarget>\r\n  <input\r\n    [type]=\"fieldTextType ? 'text' : 'password'\"\r\n    class=\"form-control\"\r\n    [id]=\"inputId\"\r\n    [(ngModel)]=\"value\"\r\n  />\r\n\r\n  <button class=\"btn btn-secondary\" type=\"button\" (click)=\"toggleFieldTextType()\">\r\n    <i\r\n      class=\"fa\"\r\n      aria-hidden=\"true\"\r\n      [ngClass]=\"{\r\n        'fa-eye-slash': !fieldTextType,\r\n        'fa-eye': fieldTextType\r\n      }\"\r\n    ></i>\r\n  </button>\r\n</div>\r\n" }]
+        }], propDecorators: { inputId: [{
+                type: Input
+            }], formControlName: [{
+                type: Input
+            }] } });
 
-const THEME_SHARED_APPEND_CONTENT = new InjectionToken('THEME_SHARED_APPEND_CONTENT', {
-    providedIn: 'root',
-    factory: () => {
-        const domInsertion = inject(DomInsertionService);
-        domInsertion.insertContent(CONTENT_STRATEGY.AppendStyleToHead(styles));
-    },
-});
+class CardBodyComponent {
+    constructor() {
+        this.componentClass = 'card-body';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardBodyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardBodyComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-card-body',
+                    template: ` <div [ngClass]="cardBodyClass" [ngStyle]="cardBodyStyle">
+    <ng-content></ng-content>
+  </div>`,
+                    imports: [CommonModule],
+                }]
+        }], propDecorators: { componentClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], cardBodyClass: [{
+                type: Input
+            }], cardBodyStyle: [{
+                type: Input
+            }] } });
 
-class NavItem {
-    constructor(props) {
-        Object.assign(this, props);
+class CardComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", 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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-card',
+                    template: ` <div class="card" [ngClass]="cardClass" [ngStyle]="cardStyle">
+    <ng-content></ng-content>
+  </div>`,
+                    imports: [CommonModule],
+                }]
+        }], propDecorators: { cardClass: [{
+                type: Input
+            }], cardStyle: [{
+                type: Input
+            }] } });
+
+class CardHeaderComponent {
+    constructor() {
+        this.componentClass = 'card-header';
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: CardHeaderComponent, isStandalone: true, selector: "abp-card-header", inputs: { cardHeaderClass: "cardHeaderClass", cardHeaderStyle: "cardHeaderStyle" }, host: { properties: { "class": "this.componentClass" } }, ngImport: i0, template: `
+    <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
+      <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"] }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardHeaderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-card-header', template: `
+    <div [ngClass]="cardHeaderClass" [ngStyle]="cardHeaderStyle">
+      <ng-content></ng-content>
+    </div>
+  `, imports: [CommonModule] }]
+        }], propDecorators: { componentClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], cardHeaderClass: [{
+                type: Input
+            }], cardHeaderStyle: [{
+                type: Input
+            }] } });
 
-class AbstractMenuService {
-    get items() {
-        return this._items$.value;
+class CardFooterComponent {
+    constructor() {
+        this.componentClass = 'card-footer';
     }
-    get items$() {
-        return this._items$.asObservable();
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: CardFooterComponent, isStandalone: true, selector: "abp-card-footer", inputs: { cardFooterStyle: "cardFooterStyle", cardFooterClass: "cardFooterClass" }, host: { properties: { "class": "this.componentClass" } }, ngImport: i0, template: `
+    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
+      <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"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardFooterComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-card-footer', template: `
+    <div [ngStyle]="cardFooterStyle" [ngClass]="cardFooterClass">
+      <ng-content></ng-content>
+    </div>
+  `, imports: [CommonModule] }]
+        }], propDecorators: { componentClass: [{
+                type: HostBinding,
+                args: ['class']
+            }], cardFooterStyle: [{
+                type: Input
+            }], cardFooterClass: [{
+                type: Input
+            }] } });
+
+class CardTitleDirective {
+    constructor() {
+        this.directiveClass = 'card-title';
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardTitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: CardTitleDirective, isStandalone: true, selector: "abp-card-title, [abp-card-title], [abpCardTitle]", host: { properties: { "class": "this.directiveClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardTitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `abp-card-title, [abp-card-title], [abpCardTitle]`,
+                }]
+        }], propDecorators: { directiveClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class CardSubtitleDirective {
     constructor() {
-        this._items$ = new BehaviorSubject([]);
-        this.sortItems = (a, b) => {
-            return this.sortFn(a, b);
-        };
-        this.sortFn = inject(SORT_COMPARE_FUNC);
+        this.directiveClass = 'card-subtitle';
     }
-    addItems(newItems) {
-        const items = [...this.items];
-        newItems.forEach(item => {
-            const index = items.findIndex(i => i.id === item.id);
-            const data = new this.baseClass(item);
-            if (index > -1) {
-                items[index] = data;
-                return;
-            }
-            items.push(data);
-        });
-        items.sort(this.sortItems);
-        this._items$.next(items);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardSubtitleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: CardSubtitleDirective, isStandalone: true, selector: "abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]", host: { properties: { "class": "this.directiveClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardSubtitleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `abp-card-subtitle, [abp-card-subtitle], [abpCardSubtitle]`,
+                }]
+        }], propDecorators: { directiveClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class CardImgTopDirective {
+    constructor() {
+        this.directiveClass = 'card-img-top';
     }
-    removeItem(id) {
-        const index = this.items.findIndex(item => item.id === id);
-        if (index < 0)
-            return;
-        const items = [...this.items.slice(0, index), ...this.items.slice(index + 1)];
-        this._items$.next(items);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardImgTopDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: CardImgTopDirective, isStandalone: true, selector: "abp-card-img-top, [abp-card-img-top], [abpCardImgTop]", host: { properties: { "class": "this.directiveClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardImgTopDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `abp-card-img-top, [abp-card-img-top], [abpCardImgTop]`,
+                }]
+        }], propDecorators: { directiveClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+class CardHeaderDirective {
+    constructor() {
+        this.directiveClass = 'card-header';
     }
-    patchItem(id, item) {
-        const index = this.items.findIndex(i => i.id === id);
-        if (index < 0)
-            return;
-        const items = [...this.items];
-        items[index] = new this.baseClass({ ...items[index], ...item });
-        items.sort(this.sortItems);
-        this._items$.next(items);
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardHeaderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: CardHeaderDirective, isStandalone: true, selector: "abp-card-header, [abp-card-header], [abpCardHeader]", host: { properties: { "class": "this.directiveClass" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardHeaderDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `abp-card-header, [abp-card-header], [abpCardHeader]`,
+                }]
+        }], propDecorators: { directiveClass: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
+
+const CARD_DIRECTIVES = [
+    CardTitleDirective,
+    CardSubtitleDirective,
+    CardImgTopDirective,
+    CardHeaderDirective,
+];
+const CARD_COMPONENTS = [
+    CardComponent,
+    CardBodyComponent,
+    CardHeaderComponent,
+    CardFooterComponent,
+];
+class CardModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: CardModule, imports: [CardComponent,
+            CardBodyComponent,
+            CardHeaderComponent,
+            CardFooterComponent, CardTitleDirective,
+            CardSubtitleDirective,
+            CardImgTopDirective,
+            CardHeaderDirective], exports: [CardComponent,
+            CardBodyComponent,
+            CardHeaderComponent,
+            CardFooterComponent, CardTitleDirective,
+            CardSubtitleDirective,
+            CardImgTopDirective,
+            CardHeaderDirective] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardModule, imports: [CARD_COMPONENTS] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CardModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [...CARD_COMPONENTS, ...CARD_DIRECTIVES],
+                    exports: [...CARD_COMPONENTS, ...CARD_DIRECTIVES],
+                }]
+        }] });
+
+class FormCheckboxComponent extends AbstractNgModelComponent {
+    constructor() {
+        super(...arguments);
+        this.labelClass = 'form-check-label';
+        this.checkboxClass = 'form-check-input';
+        this.checkboxReadonly = false;
+        this.checkboxBlur = new EventEmitter();
+        this.checkboxFocus = new EventEmitter();
     }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormCheckboxComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: FormCheckboxComponent, isStandalone: true, selector: "abp-checkbox", inputs: { label: "label", labelClass: "labelClass", checkboxId: "checkboxId", checkboxStyle: "checkboxStyle", checkboxClass: "checkboxClass", checkboxReadonly: "checkboxReadonly" }, outputs: { checkboxBlur: "checkboxBlur", checkboxFocus: "checkboxFocus" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FormCheckboxComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <div class="mb-3">
+      <input
+        type="checkbox"
+        [(ngModel)]="value"
+        [id]="checkboxId"
+        [readonly]="checkboxReadonly"
+        [ngClass]="checkboxClass"
+        [ngStyle]="checkboxStyle"
+        (blur)="checkboxBlur.next()"
+        (focus)="checkboxFocus.next()"
+      />
+      @if (label) {
+        <label [ngClass]="labelClass" [for]="checkboxId">
+          {{ label | abpLocalization }}
+        </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" }] }); }
 }
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormCheckboxComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-checkbox',
+                    template: `
+    <div class="mb-3">
+      <input
+        type="checkbox"
+        [(ngModel)]="value"
+        [id]="checkboxId"
+        [readonly]="checkboxReadonly"
+        [ngClass]="checkboxClass"
+        [ngStyle]="checkboxStyle"
+        (blur)="checkboxBlur.next()"
+        (focus)="checkboxFocus.next()"
+      />
+      @if (label) {
+        <label [ngClass]="labelClass" [for]="checkboxId">
+          {{ label | abpLocalization }}
+        </label>
+      }
+    </div>
+  `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FormCheckboxComponent),
+                            multi: true,
+                        },
+                    ],
+                    imports: [CommonModule, FormsModule, LocalizationPipe],
+                }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], checkboxId: [{
+                type: Input
+            }], checkboxStyle: [{
+                type: Input
+            }], checkboxClass: [{
+                type: Input
+            }], checkboxReadonly: [{
+                type: Input
+            }], checkboxBlur: [{
+                type: Output
+            }], checkboxFocus: [{
+                type: Output
+            }] } });
 
-class NavItemsService extends AbstractMenuService {
+class FormInputComponent extends AbstractNgModelComponent {
     constructor() {
         super(...arguments);
-        this.baseClass = NavItem;
+        this.inputReadonly = false;
+        this.label = '';
+        this.labelClass = 'form-label';
+        this.inputPlaceholder = '';
+        this.inputClass = 'form-control';
+        this.formBlur = new EventEmitter();
+        this.formFocus = new EventEmitter();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavItemsService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavItemsService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: FormInputComponent, isStandalone: true, selector: "abp-form-input", inputs: { inputId: "inputId", inputReadonly: "inputReadonly", label: "label", labelClass: "labelClass", inputPlaceholder: "inputPlaceholder", inputStyle: "inputStyle", inputClass: "inputClass" }, outputs: { formBlur: "formBlur", formFocus: "formFocus" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FormInputComponent),
+                multi: true,
+            },
+        ], usesInheritance: true, ngImport: i0, template: `
+    <div class="mb-3">
+      @if (label) {
+        <label [ngClass]="labelClass" [for]="inputId">
+          {{ label | abpLocalization }}
+        </label>
+      }
+      <input
+        type="text"
+        [id]="inputId"
+        [placeholder]="inputPlaceholder"
+        [readonly]="inputReadonly"
+        [ngClass]="inputClass"
+        [ngStyle]="inputStyle"
+        (blur)="formBlur.next()"
+        (focus)="formFocus.next()"
+        [(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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NavItemsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: FormInputComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-form-input',
+                    template: `
+    <div class="mb-3">
+      @if (label) {
+        <label [ngClass]="labelClass" [for]="inputId">
+          {{ label | abpLocalization }}
+        </label>
+      }
+      <input
+        type="text"
+        [id]="inputId"
+        [placeholder]="inputPlaceholder"
+        [readonly]="inputReadonly"
+        [ngClass]="inputClass"
+        [ngStyle]="inputStyle"
+        (blur)="formBlur.next()"
+        (focus)="formFocus.next()"
+        [(ngModel)]="value"
+      />
+    </div>
+  `,
+                    providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FormInputComponent),
+                            multi: true,
+                        },
+                    ],
+                    imports: [CommonModule, LocalizationPipe, FormsModule],
+                }]
+        }], propDecorators: { inputId: [{
+                type: Input
+            }], inputReadonly: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], labelClass: [{
+                type: Input
+            }], inputPlaceholder: [{
+                type: Input
+            }], inputStyle: [{
+                type: Input
+            }], inputClass: [{
+                type: Input
+            }], formBlur: [{
+                type: Output
+            }], formFocus: [{
+                type: Output
+            }] } });
 
-class PageAlertService {
+class InternetConnectionStatusComponent {
     constructor() {
-        this.alerts = new InternalStore([]);
-        this.alerts$ = this.alerts.sliceState(state => state);
-    }
-    show(alert) {
-        const newAlert = {
-            ...alert,
-            dismissible: alert.dismissible ?? true,
-        };
-        this.alerts.set([newAlert, ...this.alerts.state]);
-    }
-    remove(index) {
-        const alerts = [...this.alerts.state];
-        alerts.splice(index, 1);
-        this.alerts.set(alerts);
+        this.internetConnectionService = inject(InternetConnectionService);
+        this.isOnline = this.internetConnectionService.networkStatus;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PageAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PageAlertService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: InternetConnectionStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.1.8", type: InternetConnectionStatusComponent, isStandalone: true, selector: "abp-internet-status", ngImport: i0, template: `
+    @if (!isOnline()) {
+      <div class="status-icon">
+        <i
+          ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
+          container="body"
+          placement="left-top"
+          class="fa fa-wifi text-blinking blink"
+        >
+        </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"] }] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: PageAlertService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: InternetConnectionStatusComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'abp-internet-status', imports: [LocalizationModule, NgbTooltip], template: `
+    @if (!isOnline()) {
+      <div class="status-icon">
+        <i
+          ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
+          container="body"
+          placement="left-top"
+          class="fa fa-wifi text-blinking blink"
+        >
+        </i>
+      </div>
+    }
+  `, 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"] }]
         }] });
 
-class ToasterService {
-    setContainer() {
-        this.containerComponentRef = this.contentProjectionService.projectContent(PROJECTION_STRATEGY.AppendComponentToBody(ToastContainerComponent, {
-            toasts$: this.toasts$,
-            remove: this.remove,
-        }));
-        this.containerComponentRef.changeDetectorRef.detectChanges();
-    }
-    constructor() {
-        this.toasts$ = new ReplaySubject(1);
-        this.lastId = -1;
-        this.toasts = [];
-        /**
-         * Removes the toast with given id.
-         * @param id ID of the toast to be removed.
-         */
-        this.remove = (id) => {
-            this.toasts = this.toasts.filter(toast => toast.options?.id !== id);
-            this.toasts$.next(this.toasts);
-        };
-        this.contentProjectionService = inject(ContentProjectionService);
-    }
-    /**
-     * Creates an info toast with given parameters.
-     * @param message Content of the toast
-     * @param title Title of the toast
-     * @param options Spesific style or structural options for individual toast
-     */
-    info(message, title, options) {
-        return this.show(message, title, 'info', options);
-    }
-    /**
-     * Creates a success toast with given parameters.
-     * @param message Content of the toast
-     * @param title Title of the toast
-     * @param options Spesific style or structural options for individual toast
-     */
-    success(message, title, options) {
-        return this.show(message, title, 'success', options);
+class SpinnerComponent {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.1.8", type: SpinnerComponent, isStandalone: true, selector: "abp-spinner", ngImport: i0, template: `
+    <div class="d-flex justify-content-center align-items-center border-top" style="height: 62px">
+      <div class="spinner-border" role="status" id="loading">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  `, isInline: true }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: SpinnerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-spinner',
+                    template: `
+    <div class="d-flex justify-content-center align-items-center border-top" style="height: 62px">
+      <div class="spinner-border" role="status" id="loading">
+        <span class="visually-hidden">Loading...</span>
+      </div>
+    </div>
+  `,
+                }]
+        }] });
+
+class EllipsisDirective {
+    get inlineClass() {
+        return this.enabled && this.width;
     }
-    /**
-     * Creates a warning toast with given parameters.
-     * @param message Content of the toast
-     * @param title Title of the toast
-     * @param options Spesific style or structural options for individual toast
-     */
-    warn(message, title, options) {
-        return this.show(message, title, 'warning', options);
+    get class() {
+        return this.enabled && !this.width;
     }
-    /**
-     * Creates an error toast with given parameters.
-     * @param message Content of the toast
-     * @param title Title of the toast
-     * @param options Spesific style or structural options for individual toast
-     */
-    error(message, title, options) {
-        return this.show(message, title, 'error', options);
+    get maxWidth() {
+        return this.enabled && this.width ? this.width || '170px' : undefined;
     }
-    /**
-     * Creates a toast with given parameters.
-     * @param message Content of the toast
-     * @param title Title of the toast
-     * @param severity Sets color of the toast. "success", "warning" etc.
-     * @param options Spesific style or structural options for individual toast
-     */
-    show(message, title = undefined, severity = 'neutral', options = {}) {
-        if (!this.containerComponentRef)
-            this.setContainer();
-        const id = ++this.lastId;
-        this.toasts.push({
-            message,
-            title,
-            severity,
-            options: { closable: true, id, ...options },
-        });
-        this.toasts$.next(this.toasts);
-        return id;
+    constructor(cdRef, elRef) {
+        this.cdRef = cdRef;
+        this.elRef = elRef;
+        this.enabled = true;
     }
-    /**
-     * Removes all open toasts at once.
-     */
-    clear(containerKey) {
-        this.toasts = !containerKey
-            ? []
-            : this.toasts.filter(toast => toast.options?.containerKey !== containerKey);
-        this.toasts$.next(this.toasts);
+    ngAfterViewInit() {
+        this.title = this.title || this.elRef.nativeElement.innerText;
+        this.cdRef.detectChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: ToasterService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: EllipsisDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", 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: "19.1.8", ngImport: i0, type: ToasterService, decorators: [{
-            type: Injectable,
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: EllipsisDirective, decorators: [{
+            type: Directive,
             args: [{
-                    providedIn: 'root',
+                    selector: '[abpEllipsis]',
                 }]
-        }], ctorParameters: () => [] });
-
-class UserMenu extends NavItem {
-}
-
-class UserMenuService extends AbstractMenuService {
-    constructor() {
-        super(...arguments);
-        this.baseClass = UserMenu;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UserMenuService, deps: null, target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UserMenuService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UserMenuService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }], propDecorators: { width: [{
+                type: Input,
+                args: ['abpEllipsis']
+            }], title: [{
+                type: HostBinding,
+                args: ['title']
+            }, {
+                type: Input
+            }], enabled: [{
+                type: Input,
+                args: ['abpEllipsisEnabled']
+            }], inlineClass: [{
+                type: HostBinding,
+                args: ['class.abp-ellipsis-inline']
+            }], class: [{
+                type: HostBinding,
+                args: ['class.abp-ellipsis']
+            }], maxWidth: [{
+                type: HostBinding,
+                args: ['style.max-width']
+            }] } });
 
-class CreateErrorComponentService {
-    constructor() {
-        this.document = inject(DOCUMENT);
-        this.rendererFactory = inject(RendererFactory2);
-        this.routerEvents = inject(RouterEvents);
-        this.injector = inject(Injector);
-        this.envInjector = inject(EnvironmentInjector);
-        this.httpErrorConfig = inject(HTTP_ERROR_CONFIG);
-        this.componentRef = null;
-        this.listenToRouterDataResolved();
+class LoadingDirective {
+    get loading() {
+        return this._loading;
     }
-    listenToRouterDataResolved() {
-        this.routerEvents
-            .getEvents(ResolveEnd)
-            .pipe(filter(() => !!this.componentRef))
-            .subscribe(() => {
-            this.componentRef?.destroy();
-            this.componentRef = null;
-        });
+    set loading(newValue) {
+        setTimeout(() => {
+            if (!newValue && this.timerSubscription) {
+                this.timerSubscription.unsubscribe();
+                this.timerSubscription = null;
+                this._loading = newValue;
+                if (this.rootNode) {
+                    this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
+                    this.rootNode = null;
+                }
+                return;
+            }
+            this.timerSubscription = timer(this.delay)
+                .pipe(take(1))
+                .subscribe(() => {
+                if (!this.componentRef) {
+                    this.componentRef = this.cdRes
+                        .resolveComponentFactory(LoadingComponent)
+                        .create(this.injector);
+                }
+                if (newValue && !this.rootNode) {
+                    this.rootNode = this.componentRef.hostView.rootNodes[0];
+                    this.targetElement?.appendChild(this.rootNode);
+                }
+                else if (this.rootNode) {
+                    this.renderer.removeChild(this.rootNode.parentElement, this.rootNode);
+                    this.rootNode = null;
+                }
+                this._loading = newValue;
+                this.timerSubscription = null;
+            });
+        }, 0);
     }
-    getErrorHostElement() {
-        return this.document.body;
+    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;
     }
-    isCloseIconHidden() {
-        return !!this.httpErrorConfig?.errorScreen?.hideCloseIcon;
+    ngOnInit() {
+        if (!this.targetElement) {
+            const { offsetHeight, offsetWidth } = this.elRef.nativeElement;
+            if (!offsetHeight && !offsetWidth && this.elRef.nativeElement.children.length) {
+                this.targetElement = this.elRef.nativeElement.children[0];
+            }
+            else {
+                this.targetElement = this.elRef.nativeElement;
+            }
+        }
     }
-    canCreateCustomError(status) {
-        const { component, forWhichErrors } = this.httpErrorConfig?.errorScreen || {};
-        if (!component || !forWhichErrors) {
-            return false;
+    ngOnDestroy() {
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe();
         }
-        return forWhichErrors.indexOf(status) > -1;
     }
-    execute(instance) {
-        const renderer = this.rendererFactory.createRenderer(null, null);
-        const hostElement = this.getErrorHostElement();
-        const host = renderer.selectRootElement(hostElement, true);
-        this.componentRef = createComponent(HttpErrorWrapperComponent, {
-            environmentInjector: this.envInjector,
-        });
-        for (const key in instance) {
-            /* istanbul ignore else */
-            if (Object.prototype.hasOwnProperty.call(this.componentRef.instance, key)) {
-                this.componentRef.instance[key] = instance[key];
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", 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.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", 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: "19.1.8", ngImport: i0, type: LoadingDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[abpLoading]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }, { type: i0.ComponentFactoryResolver }, { type: i0.Injector }, { type: i0.Renderer2 }], propDecorators: { position: [{
+                type: HostBinding,
+                args: ['style.position']
+            }], loading: [{
+                type: Input,
+                args: ['abpLoading']
+            }], targetElement: [{
+                type: Input,
+                args: ['abpLoadingTargetElement']
+            }], delay: [{
+                type: Input,
+                args: ['abpLoadingDelay']
+            }] } });
+
+class NgxDatatableDefaultDirective {
+    get classes() {
+        return `ngx-datatable ${this.class}`;
+    }
+    constructor(table, document) {
+        this.table = table;
+        this.document = document;
+        this.subscription = new Subscription();
+        this.resizeDiff = 0;
+        this.class = 'material bordered';
+        this.table.columnMode = ColumnMode.force;
+        this.table.footerHeight = 50;
+        this.table.headerHeight = 50;
+        this.table.rowHeight = 'auto';
+        this.table.scrollbarH = true;
+        this.table.virtualization = false;
+    }
+    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;
             }
         }
-        this.componentRef.instance.hideCloseIcon = this.isCloseIconHidden();
-        const appRef = this.injector.get(ApplicationRef);
-        if (this.canCreateCustomError(instance.status)) {
-            this.componentRef.instance.appRef = appRef;
-            this.componentRef.instance.environmentInjector = this.envInjector;
-            this.componentRef.instance.customComponent = this.httpErrorConfig.errorScreen?.component;
+        else {
+            scroller.scrollWidth += this.resizeDiff;
+            this.resizeDiff = 0;
         }
-        appRef.attachView(this.componentRef.hostView);
-        renderer.appendChild(host, this.componentRef.hostView.rootNodes[0]);
-        const destroy$ = new Subject();
-        this.componentRef.instance.destroy$ = destroy$;
-        destroy$.subscribe(() => {
-            this.componentRef?.destroy();
-            this.componentRef = null;
-        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CreateErrorComponentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CreateErrorComponentService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: CreateErrorComponentService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }], ctorParameters: () => [] });
-
-function getErrorFromRequestBody(body) {
-    let message;
-    let title;
-    if (body.details) {
-        message = body.details;
-        title = body.message;
+    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);
     }
-    else if (body.message) {
-        title = {
-            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
-            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
-        };
-        message = body.message;
+    ngAfterViewInit() {
+        this.fixStyleOnWindowResize();
     }
-    else {
-        message = {
-            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
-            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
-        };
-        title = '';
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
     }
-    return { message, title };
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxDatatableDefaultDirective, deps: [{ token: i1$2.DatatableComponent }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", 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: "19.1.8", ngImport: i0, type: NgxDatatableDefaultDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ngx-datatable[default]',
+                    exportAs: 'ngxDatatableDefault',
+                }]
+        }], ctorParameters: () => [{ type: i1$2.DatatableComponent }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [DOCUMENT]
+                }] }], propDecorators: { class: [{
+                type: Input
+            }], classes: [{
+                type: HostBinding,
+                args: ['class']
+            }] } });
 
-class AbpFormatErrorHandlerService {
+class NgxDatatableListDirective {
     constructor() {
-        this.priority = CUSTOM_HTTP_ERROR_HANDLER_PRIORITY.high;
-        this.confirmationService = inject(ConfirmationService);
-        this.authService = inject(AuthService);
-        this.error = undefined;
+        this.table = inject(DatatableComponent);
+        this.cdRef = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
+        this.localizationService = inject(LocalizationService);
+        this.ngxDatatableMessages = inject(NGX_DATATABLE_MESSAGES, { optional: true });
+        this.viewContainerRef = inject(ViewContainerRef);
+        this.renderer = inject(Renderer2);
+        this.setInitialValues();
     }
-    navigateToLogin() {
-        return this.authService.navigateToLogin();
+    ngDoCheck() {
+        this.refreshPageIfDataExist();
     }
-    canHandle(error) {
-        if (error instanceof HttpErrorResponse && error.headers.get('_AbpErrorFormat')) {
-            this.error = error;
-            return true;
+    ngOnInit() {
+        this.subscribeToPage();
+        this.subscribeToSort();
+        this.subscribeToRequestStatus();
+    }
+    ngOnChanges({ list }) {
+        this.subscribeToQuery();
+        if (!list.firstChange)
+            return;
+        const { maxResultCount, page } = list.currentValue;
+        this.table.limit = maxResultCount;
+        this.table.offset = page;
+    }
+    subscribeToRequestStatus() {
+        const requestStatus$ = this.list.requestStatus$.pipe(distinctUntilChanged());
+        const { emptyMessage, errorMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages;
+        requestStatus$.subscribe(status => {
+            this.table.loadingIndicator = false;
+            if (status === 'idle') {
+                return;
+            }
+            if (status === 'loading') {
+                this.table.messages.emptyMessage = undefined;
+                this.table.loadingIndicator = true;
+                this.cdRef.detectChanges();
+                this.updateLoadingIndicator();
+                return;
+            }
+            if (status === 'error') {
+                this.table.messages.emptyMessage = this.localizationService.instant(errorMessage);
+                this.viewContainerRef.clear();
+                this.cdRef.markForCheck();
+            }
+            if (status === 'success') {
+                this.table.messages.emptyMessage = this.localizationService.instant(emptyMessage);
+                this.viewContainerRef.clear();
+            }
+        });
+    }
+    updateLoadingIndicator() {
+        const body = this.table.element.querySelector('datatable-body');
+        const progress = this.table.element.querySelector('datatable-progress');
+        if (!body) {
+            return;
+        }
+        if (progress) {
+            this.replaceLoadingIndicator(body, progress);
         }
-        return false;
     }
-    execute() {
-        const { message, title } = getErrorFromRequestBody(this.error?.error?.error);
-        this.confirmationService
-            .error(message, title, {
-            hideCancelBtn: true,
-            yesText: 'AbpAccount::Close',
-        })
-            .subscribe(() => {
-            if (this.error?.status === 401) {
-                this.navigateToLogin();
+    replaceLoadingIndicator(parent, placeholder) {
+        this.viewContainerRef.clear();
+        const spinnerRef = this.viewContainerRef.createComponent(SpinnerComponent);
+        const spinnerElement = spinnerRef.location.nativeElement;
+        this.renderer.insertBefore(parent, spinnerElement, placeholder);
+        this.renderer.removeChild(parent, placeholder);
+    }
+    setInitialValues() {
+        this.table.externalPaging = true;
+        this.table.externalSorting = true;
+        const { selectedMessage, totalMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages;
+        this.table.messages = {
+            totalMessage: this.localizationService.instant(totalMessage),
+            selectedMessage: this.localizationService.instant(selectedMessage),
+        };
+    }
+    subscribeToSort() {
+        this.table.sort
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(({ sorts: [{ prop, dir }] }) => {
+            if (prop === this.list.sortKey && this.list.sortOrder === 'desc') {
+                this.list.sortKey = '';
+                this.list.sortOrder = '';
+                this.table.sorts = [];
+                this.cdRef.detectChanges();
+            }
+            else {
+                this.list.sortKey = prop;
+                this.list.sortOrder = dir;
             }
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpFormatErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpFormatErrorHandlerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpFormatErrorHandlerService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class TenantResolveErrorHandlerService {
-    constructor() {
-        this.sessionService = inject(SessionStateService);
-        this.priority = CUSTOM_HTTP_ERROR_HANDLER_PRIORITY.high;
-        this.authService = inject(AuthService);
+    subscribeToPage() {
+        this.table.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ offset }) => {
+            this.setTablePage(offset);
+        });
     }
-    isTenantResolveError(error) {
-        return error instanceof HttpErrorResponse && !!error.headers.get('Abp-Tenant-Resolve-Error');
+    subscribeToQuery() {
+        this.list.query$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
+            const offset = this.list.page;
+            if (this.table.offset !== offset)
+                this.table.offset = offset;
+        });
     }
-    canHandle(error) {
-        return this.isTenantResolveError(error);
+    setTablePage(pageNum) {
+        this.list.page = pageNum;
+        this.table.offset = pageNum;
     }
-    execute() {
-        this.sessionService.setTenant(null);
-        this.authService.logout().subscribe();
+    refreshPageIfDataExist() {
+        if (this.table.rows?.length < 1 && this.table.count > 0) {
+            let maxPage = Math.floor(Number(this.table.count / this.list.maxResultCount));
+            if (this.table.count < this.list.maxResultCount) {
+                this.setTablePage(0);
+                return;
+            }
+            if (this.table.count % this.list.maxResultCount === 0) {
+                maxPage -= 1;
+            }
+            if (this.list.page < maxPage) {
+                this.setTablePage(this.list.page);
+                return;
+            }
+            this.setTablePage(maxPage);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TenantResolveErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TenantResolveErrorHandlerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxDatatableListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: NgxDatatableListDirective, isStandalone: true, selector: "ngx-datatable[list]", inputs: { list: "list" }, exportAs: ["ngxDatatableList"], usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: TenantResolveErrorHandlerService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: NgxDatatableListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ngx-datatable[list]',
+                    exportAs: 'ngxDatatableList',
+                }]
+        }], ctorParameters: () => [], propDecorators: { list: [{
+                type: Input
+            }] } });
 
-class StatusCodeErrorHandlerService {
-    constructor() {
-        this.confirmationService = inject(ConfirmationService);
-        this.createErrorComponentService = inject(CreateErrorComponentService);
-        this.authService = inject(AuthService);
-        this.handledStatusCodes = [401, 403, 404, 500];
-        this.priority = CUSTOM_HTTP_ERROR_HANDLER_PRIORITY.normal;
+class AbpVisibleDirective {
+    set abpVisible(value) {
+        this.condition$ = checkType(value);
+        this.subscribeToCondition();
+    }
+    constructor(viewContainerRef, templateRef) {
+        this.viewContainerRef = viewContainerRef;
+        this.templateRef = templateRef;
+        this.condition$ = of(false);
     }
-    navigateToLogin() {
-        this.authService.navigateToLogin();
+    ngOnInit() {
+        this.updateVisibility();
     }
-    showConfirmation(message, title) {
-        return this.confirmationService.error(message, title, {
-            hideCancelBtn: true,
-            yesText: 'AbpAccount::Close',
+    ngOnDestroy() {
+        this.conditionSubscription?.unsubscribe();
+    }
+    subscribeToCondition() {
+        this.conditionSubscription = this.condition$.subscribe(value => {
+            this.isVisible = value;
+            this.updateVisibility();
         });
     }
-    showPage() {
-        const key = `defaultError${this.status}`;
-        const shouldRemoveDetail = [401, 404].indexOf(this.status) > -1;
-        const instance = {
-            title: {
-                key: DEFAULT_ERROR_LOCALIZATIONS[key]?.title,
-                defaultValue: DEFAULT_ERROR_MESSAGES[key]?.title,
-            },
-            details: {
-                key: DEFAULT_ERROR_LOCALIZATIONS[key]?.details,
-                defaultValue: DEFAULT_ERROR_MESSAGES[key]?.details,
-            },
-            status: this.status,
-        };
-        if (shouldRemoveDetail) {
-            delete instance.details;
+    updateVisibility() {
+        this.viewContainerRef.clear();
+        // it should be false not falsy
+        if (this.isVisible === false) {
+            return;
         }
-        this.createErrorComponentService.execute(instance);
+        this.viewContainerRef.createEmbeddedView(this.templateRef);
     }
-    canHandle(error) {
-        this.status = error?.status || 0;
-        return this.handledStatusCodes.indexOf(this.status) > -1;
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpVisibleDirective, deps: [{ token: i0.ViewContainerRef }, { token: i0.TemplateRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: AbpVisibleDirective, isStandalone: true, selector: "[abpVisible]", inputs: { abpVisible: "abpVisible" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpVisibleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[abpVisible]',
+                }]
+        }], ctorParameters: () => [{ type: i0.ViewContainerRef }, { type: i0.TemplateRef }], propDecorators: { abpVisible: [{
+                type: Input
+            }] } });
+function checkType(value) {
+    if (value instanceof Promise) {
+        return from(value);
     }
-    execute() {
-        const key = `defaultError${this.status}`;
-        const title = {
-            key: DEFAULT_ERROR_LOCALIZATIONS[key]?.title,
-            defaultValue: DEFAULT_ERROR_MESSAGES[key]?.title,
-        };
-        const message = {
-            key: DEFAULT_ERROR_LOCALIZATIONS[key]?.details,
-            defaultValue: DEFAULT_ERROR_MESSAGES[key]?.details,
-        };
-        const canCreateCustomError = this.createErrorComponentService.canCreateCustomError(this.status);
-        switch (this.status) {
-            case 401:
-            case 404:
-                if (canCreateCustomError) {
-                    this.showPage();
-                    break;
-                }
-                if (this.status === 401) {
-                    this.authService.navigateToLogin();
-                    break;
-                }
-                this.showConfirmation(title, message).subscribe();
-                break;
-            case 403:
-            case 500:
-                this.showPage();
-                break;
-        }
+    else if (value instanceof Observable) {
+        return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: StatusCodeErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: StatusCodeErrorHandlerService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: StatusCodeErrorHandlerService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class UnknownStatusCodeErrorHandlerService {
-    constructor() {
-        this.priority = CUSTOM_HTTP_ERROR_HANDLER_PRIORITY.normal;
-        this.statusText = 'Unknown Error';
-        this.message = '';
-        this.createErrorComponentService = inject(CreateErrorComponentService);
+    else if (typeof value === 'boolean') {
+        return of(value);
     }
-    canHandle(error) {
-        if (error && error.status === 0 && error.statusText === this.statusText) {
-            this.message = error.message;
-            return true;
-        }
-        return false;
+    else if (value === undefined || value === null) {
+        return of(true);
     }
-    execute() {
-        this.createErrorComponentService.execute({
-            title: {
-                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
-                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
-            },
-            details: this.message,
-            isHomeShow: false,
-        });
+    else {
+        return EMPTY;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UnknownStatusCodeErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UnknownStatusCodeErrorHandlerService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: UnknownStatusCodeErrorHandlerService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
 
-class AbpAuthenticationErrorHandler {
-    constructor() {
-        this.priority = CUSTOM_HTTP_ERROR_HANDLER_PRIORITY.veryHigh;
-        this.authService = inject(AuthService);
-        this.configStateService = inject(ConfigStateService);
-    }
-    canHandle(error) {
-        return error instanceof HttpErrorResponse && error.status === 401;
+class DisabledDirective {
+    constructor(ngControl) {
+        this.ngControl = ngControl;
+        this.abpDisabled = false;
     }
-    execute() {
-        this.configStateService.refreshAppState().subscribe(({ currentUser }) => {
-            if (!currentUser.isAuthenticated) {
-                this.authService.logout({ noRedirectToLogoutUrl: true });
-            }
-        });
+    // Related issue: https://github.com/angular/angular/issues/35330
+    ngOnChanges({ abpDisabled }) {
+        if (this.ngControl.control && abpDisabled) {
+            this.ngControl.control[abpDisabled.currentValue ? 'disable' : 'enable']();
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpAuthenticationErrorHandler, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpAuthenticationErrorHandler, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DisabledDirective, deps: [{ token: i2$1.NgControl, host: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.1.8", type: DisabledDirective, isStandalone: true, selector: "[abpDisabled]", inputs: { abpDisabled: "abpDisabled" }, usesOnChanges: true, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: AbpAuthenticationErrorHandler, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DisabledDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[abpDisabled]',
+                }]
+        }], ctorParameters: () => [{ type: i2$1.NgControl, decorators: [{
+                    type: Host
+                }] }], propDecorators: { abpDisabled: [{
+                type: Input
+            }] } });
 
-class RouterErrorHandlerService {
-    constructor() {
-        this.routerEvents = inject(RouterEvents);
-        this.httpErrorConfig = inject(HTTP_ERROR_CONFIG);
-        this.createErrorComponentService = inject(CreateErrorComponentService);
-        this.filterRouteErrors = (navigationError) => {
-            if (!this.httpErrorConfig?.skipHandledErrorCodes) {
-                return true;
-            }
-            return (navigationError.error?.message?.indexOf('Cannot match') > -1 &&
-                this.httpErrorConfig.skipHandledErrorCodes.findIndex(code => code === 404) < 0);
-        };
+var eFormComponets;
+(function (eFormComponets) {
+    eFormComponets["FormInputComponent"] = "FormInputComponent";
+    eFormComponets["FormCheckboxComponent"] = "FormCheckboxComponent";
+})(eFormComponets || (eFormComponets = {}));
+
+class DocumentDirHandlerService {
+    constructor(injector) {
+        this.injector = injector;
+        this.dir = new BehaviorSubject('ltr');
+        this.dir$ = this.dir.asObservable();
+        this.listenToLanguageChanges();
     }
-    listen() {
-        this.routerEvents
-            .getNavigationEvents('Error')
-            .pipe(filter(this.filterRouteErrors))
-            .subscribe(() => this.show404Page());
+    listenToLanguageChanges() {
+        const l10n = this.injector.get(LocalizationService);
+        // will always listen, no need to unsubscribe
+        l10n.currentLang$.pipe(map(locale => getLocaleDirection(locale))).subscribe(dir => {
+            this.dir.next(dir);
+            this.setBodyDir(dir);
+        });
     }
-    show404Page() {
-        const instance = {
-            title: {
-                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError404.title,
-                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError404.title,
-            },
-            status: 404,
-        };
-        this.createErrorComponentService.execute(instance);
+    setBodyDir(dir) {
+        document.body.dir = dir;
+        document.dir = dir;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RouterErrorHandlerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RouterErrorHandlerService, providedIn: 'root' }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DocumentDirHandlerService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DocumentDirHandlerService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: RouterErrorHandlerService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: DocumentDirHandlerService, decorators: [{
+            type: Injectable
+        }], ctorParameters: () => [{ type: i0.Injector }] });
 
 class ErrorHandler {
     constructor(injector) {
@@ -3142,7 +3132,7 @@ function provideAbpThemeShared(...features) {
     return makeEnvironmentProviders(providers);
 }
 
-const declarationsWithExports = [
+const THEME_SHARED_EXPORTS = [
     BreadcrumbComponent,
     BreadcrumbItemsComponent,
     ButtonComponent,
@@ -3156,10 +3146,19 @@ const declarationsWithExports = [
     ModalCloseDirective,
     FormInputComponent,
     FormCheckboxComponent,
+    HttpErrorWrapperComponent,
+    NgxDatatableModule,
+    NgxValidateCoreModule,
+    CardModule,
+    DisabledDirective,
+    AbpVisibleDirective,
+    NgxDatatableListDirective,
+    NgxDatatableDefaultDirective,
+    PasswordComponent,
 ];
 class BaseThemeSharedModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseThemeSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: BaseThemeSharedModule, declarations: [BreadcrumbComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.1.8", ngImport: i0, type: BaseThemeSharedModule, imports: [BreadcrumbComponent,
             BreadcrumbItemsComponent,
             ButtonComponent,
             ConfirmationComponent,
@@ -3171,24 +3170,16 @@ class BaseThemeSharedModule {
             LoadingDirective,
             ModalCloseDirective,
             FormInputComponent,
-            FormCheckboxComponent, HttpErrorWrapperComponent], imports: [CoreModule,
+            FormCheckboxComponent,
+            HttpErrorWrapperComponent,
             NgxDatatableModule,
             NgxValidateCoreModule,
-            NgbPaginationModule,
-            EllipsisDirective,
-            CardModule,
-            PasswordComponent,
-            NgxDatatableDefaultDirective,
-            NgxDatatableListDirective,
-            DisabledDirective,
-            AbpVisibleDirective], exports: [NgxDatatableModule,
-            NgxValidateCoreModule,
             CardModule,
             DisabledDirective,
             AbpVisibleDirective,
             NgxDatatableListDirective,
             NgxDatatableDefaultDirective,
-            PasswordComponent, BreadcrumbComponent,
+            PasswordComponent], exports: [BreadcrumbComponent,
             BreadcrumbItemsComponent,
             ButtonComponent,
             ConfirmationComponent,
@@ -3200,45 +3191,41 @@ class BaseThemeSharedModule {
             LoadingDirective,
             ModalCloseDirective,
             FormInputComponent,
-            FormCheckboxComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseThemeSharedModule, providers: [DatePipe], imports: [CoreModule,
+            FormCheckboxComponent,
+            HttpErrorWrapperComponent,
+            NgxDatatableModule,
+            NgxValidateCoreModule,
+            CardModule,
+            DisabledDirective,
+            AbpVisibleDirective,
+            NgxDatatableListDirective,
+            NgxDatatableDefaultDirective,
+            PasswordComponent] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseThemeSharedModule, imports: [BreadcrumbComponent,
+            BreadcrumbItemsComponent,
+            ButtonComponent,
+            ConfirmationComponent,
+            LoaderBarComponent,
+            ModalComponent,
+            ToastComponent,
+            ToastContainerComponent,
+            FormInputComponent,
+            FormCheckboxComponent,
+            HttpErrorWrapperComponent,
             NgxDatatableModule,
             NgxValidateCoreModule,
-            NgbPaginationModule,
             CardModule,
-            PasswordComponent, NgxDatatableModule,
+            PasswordComponent,
+            NgxDatatableModule,
             NgxValidateCoreModule,
             CardModule] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImport: i0, type: BaseThemeSharedModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [
-                        CoreModule,
-                        NgxDatatableModule,
-                        NgxValidateCoreModule,
-                        NgbPaginationModule,
-                        EllipsisDirective,
-                        CardModule,
-                        PasswordComponent,
-                        NgxDatatableDefaultDirective,
-                        NgxDatatableListDirective,
-                        DisabledDirective,
-                        AbpVisibleDirective,
-                    ],
-                    declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
-                    exports: [
-                        NgxDatatableModule,
-                        NgxValidateCoreModule,
-                        CardModule,
-                        DisabledDirective,
-                        AbpVisibleDirective,
-                        NgxDatatableListDirective,
-                        NgxDatatableDefaultDirective,
-                        PasswordComponent,
-                        ...declarationsWithExports,
-                    ],
-                    providers: [DatePipe],
+                    imports: [...THEME_SHARED_EXPORTS],
+                    declarations: [],
+                    exports: [...THEME_SHARED_EXPORTS],
                 }]
         }] });
 class ThemeSharedModule {
@@ -3273,5 +3260,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.1.8", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AbpAuthenticationErrorHandler, AbpFormatErrorHandlerService, AbpVisibleDirective, BaseThemeSharedModule, BreadcrumbComponent, BreadcrumbItemsComponent, ButtonComponent, 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_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, 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 };
 //# sourceMappingURL=abp-ng.theme.shared.mjs.map