@abp/ng.theme.shared 5.0.0-rc.1 → 5.0.2

package/fesm2015/abp-ng.theme.shared.js

@@ -18,223 +18,223 @@ import { HttpErrorResponse } from '@angular/common/http';
 import { NgxValidateCoreModule, VALIDATION_BLUEPRINTS, VALIDATION_MAP_ERRORS_FN, defaultMapErrorsFn, VALIDATION_VALIDATE_ON_SUBMIT, validatePassword } from '@ngx-validate/core';
 import { Validators } from '@angular/forms';
 
-const bounceIn = animation([
-    style({ opacity: '0', display: '{{ display }}' }),
-    animate('{{ time}} {{ easing }}', keyframes([
-        style({ opacity: '0', transform: '{{ transform }} scale(0.0)', offset: 0 }),
-        style({ opacity: '0', transform: '{{ transform }} scale(0.8)', offset: 0.5 }),
-        style({ opacity: '1', transform: '{{ transform }} scale(1.0)', offset: 1 }),
-    ])),
-], {
-    params: {
-        time: '350ms',
-        easing: 'cubic-bezier(.7,.31,.72,1.47)',
-        display: 'block',
-        transform: 'translate(-50%, -50%)',
-    },
+const bounceIn = animation([
+    style({ opacity: '0', display: '{{ display }}' }),
+    animate('{{ time}} {{ easing }}', keyframes([
+        style({ opacity: '0', transform: '{{ transform }} scale(0.0)', offset: 0 }),
+        style({ opacity: '0', transform: '{{ transform }} scale(0.8)', offset: 0.5 }),
+        style({ opacity: '1', transform: '{{ transform }} scale(1.0)', offset: 1 }),
+    ])),
+], {
+    params: {
+        time: '350ms',
+        easing: 'cubic-bezier(.7,.31,.72,1.47)',
+        display: 'block',
+        transform: 'translate(-50%, -50%)',
+    },
 });
 
-const collapseY = animation([
-    style({ height: '*', overflow: 'hidden', 'box-sizing': 'border-box' }),
-    animate('{{ time }} {{ easing }}', style({ height: '0', padding: '0px' })),
-], { params: { time: '350ms', easing: 'ease' } });
-const collapseYWithMargin = animation([
-    style({ 'margin-top': '0' }),
-    animate('{{ time }} {{ easing }}', style({ 'margin-left': '-100%' })),
-], {
-    params: { time: '500ms', easing: 'ease' },
-});
-const collapseX = animation([
-    style({ width: '*', overflow: 'hidden', 'box-sizing': 'border-box' }),
-    animate('{{ time }} {{ easing }}', style({ width: '0', padding: '0px' })),
-], { params: { time: '350ms', easing: 'ease' } });
-const expandY = animation([
-    style({ height: '0', overflow: 'hidden', 'box-sizing': 'border-box' }),
-    animate('{{ time }} {{ easing }}', style({ height: '*', padding: '*' })),
-], { params: { time: '350ms', easing: 'ease' } });
-const expandYWithMargin = animation([
-    style({ 'margin-top': '-100%' }),
-    animate('{{ time }} {{ easing }}', style({ 'margin-top': '0' })),
-], {
-    params: { time: '500ms', easing: 'ease' },
-});
-const expandX = animation([
-    style({ width: '0', overflow: 'hidden', 'box-sizing': 'border-box' }),
-    animate('{{ time }} {{ easing }}', style({ width: '*', padding: '*' })),
-], { params: { time: '350ms', easing: 'ease' } });
-const collapse = trigger('collapse', [
-    state('collapsed', style({ height: '0', overflow: 'hidden' })),
-    state('expanded', style({ height: '*', overflow: 'hidden' })),
-    transition('expanded => collapsed', useAnimation(collapseY)),
-    transition('collapsed => expanded', useAnimation(expandY)),
-]);
-const collapseWithMargin = trigger('collapseWithMargin', [
-    state('collapsed', style({ 'margin-top': '-100%' })),
-    state('expanded', style({ 'margin-top': '0' })),
-    transition('expanded => collapsed', useAnimation(collapseYWithMargin), {
-        params: { time: '400ms', easing: 'linear' },
-    }),
-    transition('collapsed => expanded', useAnimation(expandYWithMargin)),
-]);
-const collapseLinearWithMargin = trigger('collapseLinearWithMargin', [
-    state('collapsed', style({ 'margin-top': '-100vh' })),
-    state('expanded', style({ 'margin-top': '0' })),
-    transition('expanded => collapsed', useAnimation(collapseYWithMargin, { params: { time: '200ms', easing: 'linear' } })),
-    transition('collapsed => expanded', useAnimation(expandYWithMargin, { params: { time: '250ms', easing: 'linear' } })),
+const collapseY = animation([
+    style({ height: '*', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ height: '0', padding: '0px' })),
+], { params: { time: '350ms', easing: 'ease' } });
+const collapseYWithMargin = animation([
+    style({ 'margin-top': '0' }),
+    animate('{{ time }} {{ easing }}', style({ 'margin-left': '-100%' })),
+], {
+    params: { time: '500ms', easing: 'ease' },
+});
+const collapseX = animation([
+    style({ width: '*', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ width: '0', padding: '0px' })),
+], { params: { time: '350ms', easing: 'ease' } });
+const expandY = animation([
+    style({ height: '0', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ height: '*', padding: '*' })),
+], { params: { time: '350ms', easing: 'ease' } });
+const expandYWithMargin = animation([
+    style({ 'margin-top': '-100%' }),
+    animate('{{ time }} {{ easing }}', style({ 'margin-top': '0' })),
+], {
+    params: { time: '500ms', easing: 'ease' },
+});
+const expandX = animation([
+    style({ width: '0', overflow: 'hidden', 'box-sizing': 'border-box' }),
+    animate('{{ time }} {{ easing }}', style({ width: '*', padding: '*' })),
+], { params: { time: '350ms', easing: 'ease' } });
+const collapse = trigger('collapse', [
+    state('collapsed', style({ height: '0', overflow: 'hidden' })),
+    state('expanded', style({ height: '*', overflow: 'hidden' })),
+    transition('expanded => collapsed', useAnimation(collapseY)),
+    transition('collapsed => expanded', useAnimation(expandY)),
+]);
+const collapseWithMargin = trigger('collapseWithMargin', [
+    state('collapsed', style({ 'margin-top': '-100%' })),
+    state('expanded', style({ 'margin-top': '0' })),
+    transition('expanded => collapsed', useAnimation(collapseYWithMargin), {
+        params: { time: '400ms', easing: 'linear' },
+    }),
+    transition('collapsed => expanded', useAnimation(expandYWithMargin)),
+]);
+const collapseLinearWithMargin = trigger('collapseLinearWithMargin', [
+    state('collapsed', style({ 'margin-top': '-100vh' })),
+    state('expanded', style({ 'margin-top': '0' })),
+    transition('expanded => collapsed', useAnimation(collapseYWithMargin, { params: { time: '200ms', easing: 'linear' } })),
+    transition('collapsed => expanded', useAnimation(expandYWithMargin, { params: { time: '250ms', easing: 'linear' } })),
 ]);
 
-const fadeIn = animation([style({ opacity: '0' }), animate('{{ time}} {{ easing }}', style({ opacity: '1' }))], {
-    params: { time: '350ms', easing: 'ease' },
-});
-const fadeOut = animation([style({ opacity: '1' }), animate('{{ time}} {{ easing }}', style({ opacity: '0' }))], { params: { time: '350ms', easing: 'ease' } });
-const fadeInDown = animation([
-    style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' })),
-], { params: { time: '350ms', easing: 'ease', transform: '' } });
-const fadeInUp = animation([
-    style({ opacity: '0', transform: '{{ transform }} translateY(20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' })),
-], { params: { time: '350ms', easing: 'ease', transform: '' } });
-const fadeInLeft = animation([
-    style({ opacity: '0', transform: '{{ transform }} translateX(20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' })),
-], { params: { time: '350ms', easing: 'ease', transform: '' } });
-const fadeInRight = animation([
-    style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' })),
-], { params: { time: '350ms', easing: 'ease', transform: '' } });
-const fadeOutDown = animation([
-    style({ opacity: '1', transform: '{{ transform }} translateY(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(20px)' })),
-], { params: { time: '350ms', easing: 'ease', transform: '' } });
-const fadeOutUp = animation([
-    style({ opacity: '1', transform: '{{ transform }} translateY(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' })),
-], { params: { time: '350ms', easing: 'ease', transform: '' } });
-const fadeOutLeft = animation([
-    style({ opacity: '1', transform: '{{ transform }} translateX(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(20px)' })),
-], { params: { time: '350ms', easing: 'ease', transform: '' } });
-const fadeOutRight = animation([
-    style({ opacity: '1', transform: '{{ transform }} translateX(0)' }),
-    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' })),
+const fadeIn = animation([style({ opacity: '0' }), animate('{{ time}} {{ easing }}', style({ opacity: '1' }))], {
+    params: { time: '350ms', easing: 'ease' },
+});
+const fadeOut = animation([style({ opacity: '1' }), animate('{{ time}} {{ easing }}', style({ opacity: '0' }))], { params: { time: '350ms', easing: 'ease' } });
+const fadeInDown = animation([
+    style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' })),
+], { params: { time: '350ms', easing: 'ease', transform: '' } });
+const fadeInUp = animation([
+    style({ opacity: '0', transform: '{{ transform }} translateY(20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateY(0)' })),
+], { params: { time: '350ms', easing: 'ease', transform: '' } });
+const fadeInLeft = animation([
+    style({ opacity: '0', transform: '{{ transform }} translateX(20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' })),
+], { params: { time: '350ms', easing: 'ease', transform: '' } });
+const fadeInRight = animation([
+    style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '1', transform: '{{ transform }} translateX(0)' })),
+], { params: { time: '350ms', easing: 'ease', transform: '' } });
+const fadeOutDown = animation([
+    style({ opacity: '1', transform: '{{ transform }} translateY(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(20px)' })),
+], { params: { time: '350ms', easing: 'ease', transform: '' } });
+const fadeOutUp = animation([
+    style({ opacity: '1', transform: '{{ transform }} translateY(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateY(-20px)' })),
+], { params: { time: '350ms', easing: 'ease', transform: '' } });
+const fadeOutLeft = animation([
+    style({ opacity: '1', transform: '{{ transform }} translateX(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(20px)' })),
+], { params: { time: '350ms', easing: 'ease', transform: '' } });
+const fadeOutRight = animation([
+    style({ opacity: '1', transform: '{{ transform }} translateX(0)' }),
+    animate('{{ time }} {{ easing }}', style({ opacity: '0', transform: '{{ transform }} translateX(-20px)' })),
 ], { params: { time: '350ms', easing: 'ease', transform: '' } });
 
-const fadeAnimation = trigger('fade', [
-    transition(':enter', useAnimation(fadeIn)),
-    transition(':leave', useAnimation(fadeOut)),
-]);
-const dialogAnimation = trigger('dialog', [
-    transition(':enter', useAnimation(fadeInDown)),
-    transition(':leave', useAnimation(fadeOut)),
+const fadeAnimation = trigger('fade', [
+    transition(':enter', useAnimation(fadeIn)),
+    transition(':leave', useAnimation(fadeOut)),
+]);
+const dialogAnimation = trigger('dialog', [
+    transition(':enter', useAnimation(fadeInDown)),
+    transition(':leave', useAnimation(fadeOut)),
 ]);
 
-const slideFromBottom = trigger('slideFromBottom', [
-    transition('* <=> *', [
-        style({ 'margin-top': '20px', opacity: '0' }),
-        animate('0.2s ease-out', style({ opacity: '1', 'margin-top': '0px' })),
-    ]),
+const slideFromBottom = trigger('slideFromBottom', [
+    transition('* <=> *', [
+        style({ 'margin-top': '20px', opacity: '0' }),
+        animate('0.2s ease-out', style({ opacity: '1', 'margin-top': '0px' })),
+    ]),
 ]);
 
-const toastInOut = trigger('toastInOut', [
-    transition('* <=> *', [
-        query(':enter', [
-            style({ opacity: 0, transform: 'translateY(20px)' }),
-            animate('350ms ease', style({ opacity: 1, transform: 'translateY(0)' })),
-        ], { optional: true }),
-        query(':leave', animate('450ms ease', style({ opacity: 0 })), {
-            optional: true,
-        }),
-    ]),
+const toastInOut = trigger('toastInOut', [
+    transition('* <=> *', [
+        query(':enter', [
+            style({ opacity: 0, transform: 'translateY(20px)' }),
+            animate('350ms ease', style({ opacity: 1, transform: 'translateY(0)' })),
+        ], { optional: true }),
+        query(':leave', animate('450ms ease', style({ opacity: 0 })), {
+            optional: true,
+        }),
+    ]),
 ]);
 
-class BreadcrumbItemsComponent {
-    constructor() {
-        this.items = [];
-    }
-}
-BreadcrumbItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BreadcrumbItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-BreadcrumbItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: BreadcrumbItemsComponent, selector: "abp-breadcrumb-items", inputs: { items: "items" }, ngImport: i0, template: "<ol class=\"breadcrumb\" *ngIf=\"items.length\">\n  <li class=\"breadcrumb-item\">\n    <a routerLink=\"/\"><i class=\"fa fa-home\"></i> </a>\n  </li>\n  <li\n    *ngFor=\"let item of items; let last = last\"\n    class=\"breadcrumb-item\"\n    [class.active]=\"last\"\n    aria-current=\"page\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"item.path ? linkTemplate : textTemplate; context: { $implicit: item }\"\n    ></ng-container>\n  </li>\n</ol>\n\n<ng-template #linkTemplate let-item>\n  <a [routerLink]=\"item.path\"> {{ item.name | abpLocalization }}</a>\n</ng-template>\n\n<ng-template #textTemplate let-item>\n  {{ item.name | abpLocalization }}\n</ng-template>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "abpLocalization": i2.LocalizationPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BreadcrumbItemsComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-breadcrumb-items',
-                    templateUrl: './breadcrumb-items.component.html',
-                }]
-        }], propDecorators: { items: [{
-                type: Input
+class BreadcrumbItemsComponent {
+    constructor() {
+        this.items = [];
+    }
+}
+BreadcrumbItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BreadcrumbItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: BreadcrumbItemsComponent, selector: "abp-breadcrumb-items", inputs: { items: "items" }, ngImport: i0, template: "<ol class=\"breadcrumb\" *ngIf=\"items.length\">\n  <li class=\"breadcrumb-item\">\n    <a routerLink=\"/\"><i class=\"fa fa-home\"></i> </a>\n  </li>\n  <li\n    *ngFor=\"let item of items; let last = last\"\n    class=\"breadcrumb-item\"\n    [class.active]=\"last\"\n    aria-current=\"page\"\n  >\n    <ng-container\n      *ngTemplateOutlet=\"item.path ? linkTemplate : textTemplate; context: { $implicit: item }\"\n    ></ng-container>\n  </li>\n</ol>\n\n<ng-template #linkTemplate let-item>\n  <a [routerLink]=\"item.path\"> {{ item.name | abpLocalization }}</a>\n</ng-template>\n\n<ng-template #textTemplate let-item>\n  {{ item.name | abpLocalization }}\n</ng-template>\n", directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "abpLocalization": i2.LocalizationPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BreadcrumbItemsComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-breadcrumb-items',
+                    templateUrl: './breadcrumb-items.component.html',
+                }]
+        }], propDecorators: { items: [{
+                type: Input
             }] } });
 
-class BreadcrumbComponent {
-    constructor(cdRef, router, routes, subscription, routerEvents) {
-        this.cdRef = cdRef;
-        this.router = router;
-        this.routes = routes;
-        this.subscription = subscription;
-        this.routerEvents = routerEvents;
-        this.segments = [];
-    }
-    ngOnInit() {
-        this.subscription.addOne(this.routerEvents.getNavigationEvents('End').pipe(startWith(null), map(() => this.routes.search({ path: getRoutePath(this.router) }))), route => {
-            this.segments = [];
-            if (route) {
-                let node = { parent: route };
-                while (node.parent) {
-                    node = node.parent;
-                    const { parent, children, isLeaf, path } = node, segment = __rest(node, ["parent", "children", "isLeaf", "path"]);
-                    if (!isAdministration(segment))
-                        this.segments.unshift(segment);
-                }
-                this.cdRef.detectChanges();
-            }
-        });
-    }
-}
-BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", 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 });
-BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: BreadcrumbComponent, selector: "abp-breadcrumb", providers: [SubscriptionService], ngImport: i0, template: "<abp-breadcrumb-items [items]=\"segments\"></abp-breadcrumb-items>\n", components: [{ type: BreadcrumbItemsComponent, selector: "abp-breadcrumb-items", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BreadcrumbComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-breadcrumb',
-                    templateUrl: './breadcrumb.component.html',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
-                    providers: [SubscriptionService],
-                }]
-        }], ctorParameters: function () { return [{ 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" /* Administration */;
-}
-
-class ButtonComponent {
-    constructor(renderer) {
-        this.renderer = renderer;
-        this.buttonId = '';
-        this.buttonClass = 'btn btn-primary';
-        this.buttonType = 'button';
-        this.loading = false;
-        this.disabled = false;
-        this.click = new EventEmitter();
-        this.focus = new EventEmitter();
-        this.blur = new EventEmitter();
-        this.abpClick = new EventEmitter();
-        this.abpFocus = new EventEmitter();
-        this.abpBlur = new EventEmitter();
-    }
-    get icon() {
-        return `${this.loading ? 'fa fa-spinner fa-spin' : this.iconClass || 'd-none'}`;
-    }
-    ngOnInit() {
-        if (this.attributes) {
-            Object.keys(this.attributes).forEach(key => {
-                var _a;
-                if ((_a = this.attributes) === null || _a === void 0 ? void 0 : _a[key]) {
-                    this.renderer.setAttribute(this.buttonRef.nativeElement, key, this.attributes[key]);
-                }
-            });
-        }
-    }
-}
-ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+class BreadcrumbComponent {
+    constructor(cdRef, router, routes, subscription, routerEvents) {
+        this.cdRef = cdRef;
+        this.router = router;
+        this.routes = routes;
+        this.subscription = subscription;
+        this.routerEvents = routerEvents;
+        this.segments = [];
+    }
+    ngOnInit() {
+        this.subscription.addOne(this.routerEvents.getNavigationEvents('End').pipe(startWith(null), map(() => this.routes.search({ path: getRoutePath(this.router) }))), route => {
+            this.segments = [];
+            if (route) {
+                let node = { parent: route };
+                while (node.parent) {
+                    node = node.parent;
+                    const { parent, children, isLeaf, path } = node, segment = __rest(node, ["parent", "children", "isLeaf", "path"]);
+                    if (!isAdministration(segment))
+                        this.segments.unshift(segment);
+                }
+                this.cdRef.detectChanges();
+            }
+        });
+    }
+}
+BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", 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 });
+BreadcrumbComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: BreadcrumbComponent, selector: "abp-breadcrumb", providers: [SubscriptionService], ngImport: i0, template: "<abp-breadcrumb-items [items]=\"segments\"></abp-breadcrumb-items>\n", components: [{ type: BreadcrumbItemsComponent, selector: "abp-breadcrumb-items", inputs: ["items"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BreadcrumbComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-breadcrumb',
+                    templateUrl: './breadcrumb.component.html',
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [SubscriptionService],
+                }]
+        }], ctorParameters: function () { return [{ 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" /* Administration */;
+}
+
+class ButtonComponent {
+    constructor(renderer) {
+        this.renderer = renderer;
+        this.buttonId = '';
+        this.buttonClass = 'btn btn-primary';
+        this.buttonType = 'button';
+        this.loading = false;
+        this.disabled = false;
+        this.click = new EventEmitter();
+        this.focus = new EventEmitter();
+        this.blur = new EventEmitter();
+        this.abpClick = new EventEmitter();
+        this.abpFocus = new EventEmitter();
+        this.abpBlur = new EventEmitter();
+    }
+    get icon() {
+        return `${this.loading ? 'fa fa-spinner fa-spin' : this.iconClass || 'd-none'}`;
+    }
+    ngOnInit() {
+        if (this.attributes) {
+            Object.keys(this.attributes).forEach(key => {
+                var _a;
+                if ((_a = this.attributes) === null || _a === void 0 ? void 0 : _a[key]) {
+                    this.renderer.setAttribute(this.buttonRef.nativeElement, key, this.attributes[key]);
+                }
+            });
+        }
+    }
+}
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
 ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ButtonComponent, selector: "abp-button", inputs: { buttonId: "buttonId", buttonClass: "buttonClass", buttonType: "buttonType", 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
@@ -248,11 +248,11 @@ ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", versio
     >
       <i [ngClass]="icon" class="me-1"></i><ng-content></ng-content>
     </button>
-  `, isInline: true, directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-button',
+  `, isInline: true, directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-button',
                     template: `
     <button
       #button
@@ -266,218 +266,218 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
     >
       <i [ngClass]="icon" class="me-1"></i><ng-content></ng-content>
     </button>
-  `,
-                }]
-        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { buttonId: [{
-                type: Input
-            }], buttonClass: [{
-                type: Input
-            }], buttonType: [{
-                type: Input
-            }], iconClass: [{
-                type: Input
-            }], loading: [{
-                type: Input
-            }], disabled: [{
-                type: Input
-            }], attributes: [{
-                type: Input
-            }], click: [{
-                type: Output
-            }], focus: [{
-                type: Output
-            }], blur: [{
-                type: Output
-            }], abpClick: [{
-                type: Output
-            }], abpFocus: [{
-                type: Output
-            }], abpBlur: [{
-                type: Output
-            }], buttonRef: [{
-                type: ViewChild,
-                args: ['button', { static: true }]
+  `,
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Renderer2 }]; }, propDecorators: { buttonId: [{
+                type: Input
+            }], buttonClass: [{
+                type: Input
+            }], buttonType: [{
+                type: Input
+            }], iconClass: [{
+                type: Input
+            }], loading: [{
+                type: Input
+            }], disabled: [{
+                type: Input
+            }], attributes: [{
+                type: Input
+            }], click: [{
+                type: Output
+            }], focus: [{
+                type: Output
+            }], blur: [{
+                type: Output
+            }], abpClick: [{
+                type: Output
+            }], abpFocus: [{
+                type: Output
+            }], abpBlur: [{
+                type: Output
+            }], buttonRef: [{
+                type: ViewChild,
+                args: ['button', { static: true }]
             }] } });
 
-var Confirmation;
-(function (Confirmation) {
-    let Status;
-    (function (Status) {
-        Status["confirm"] = "confirm";
-        Status["reject"] = "reject";
-        Status["dismiss"] = "dismiss";
-    })(Status = Confirmation.Status || (Confirmation.Status = {}));
+var Confirmation;
+(function (Confirmation) {
+    let Status;
+    (function (Status) {
+        Status["confirm"] = "confirm";
+        Status["reject"] = "reject";
+        Status["dismiss"] = "dismiss";
+    })(Status = Confirmation.Status || (Confirmation.Status = {}));
 })(Confirmation || (Confirmation = {}));
 
-class ConfirmationComponent {
-    constructor() {
-        this.confirm = Confirmation.Status.confirm;
-        this.reject = Confirmation.Status.reject;
-        this.dismiss = Confirmation.Status.dismiss;
-    }
-    close(status) {
-        this.clear(status);
-    }
-    getIconClass({ severity }) {
-        switch (severity) {
-            case 'info':
-                return 'fa-info-circle';
-            case 'success':
-                return 'fa-check-circle';
-            case 'warning':
-                return 'fa-exclamation-triangle';
-            case 'error':
-                return 'fa-times-circle';
-            default:
-                return 'fa-question-circle';
-        }
-    }
-}
-ConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ConfirmationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ConfirmationComponent, selector: "abp-confirmation", ngImport: i0, template: "<div class=\"confirmation\" *ngIf=\"confirmation$ | async as data\">\n  <div\n    class=\"confirmation-backdrop\"\n    (click)=\"data.options?.dismissible ? close(dismiss) : null\"\n  ></div>\n  <div class=\"confirmation-dialog\">\n    <div class=\"icon-container\" [ngClass]=\"data.severity\" *ngIf=\"data.severity\">\n      <i class=\"fa icon\" [ngClass]=\"getIconClass(data)\"></i>\n    </div>\n    <div class=\"content\">\n      <h1\n        class=\"title\"\n        *ngIf=\"data.title\"\n        [innerHTML]=\"data.title | abpLocalization: data.options?.titleLocalizationParams\"\n      ></h1>\n      <p\n        class=\"message\"\n        *ngIf=\"data.message\"\n        [innerHTML]=\"data.message | abpLocalization: data.options?.messageLocalizationParams\"\n      ></p>\n    </div>\n    <div class=\"footer\">\n      <button\n        id=\"cancel\"\n        class=\"confirmation-button confirmation-button--reject\"\n        [innerHTML]=\"data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization\"\n        *ngIf=\"!data?.options?.hideCancelBtn\"\n        (click)=\"close(reject)\"\n      ></button>\n      <button\n        id=\"confirm\"\n        class=\"confirmation-button confirmation-button--approve\"\n        [innerHTML]=\"data.options?.yesText || 'AbpUi::Yes' | abpLocalization\"\n        *ngIf=\"!data?.options?.hideYesBtn\"\n        (click)=\"close(confirm)\"\n      ></button>\n    </div>\n  </div>\n</div>\n", styles: [".confirmation{position:fixed;top:0;right:0;bottom:0;left: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;margin:0 0 10px;padding:20px}.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;margin:10px auto;padding:20px;font-size:16px;font-weight:400;text-align:center}.confirmation .confirmation-dialog .footer{display:flex;align-items:center;justify-content:flex-end;margin:10px 0 0;padding:20px;width:100%}.confirmation .confirmation-dialog .footer .confirmation-button{display:inline-block;margin:0 5px;padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:600}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe, "abpLocalization": i2.LocalizationPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-confirmation',
-                    templateUrl: './confirmation.component.html',
-                    styleUrls: ['./confirmation.component.scss'],
-                }]
+class ConfirmationComponent {
+    constructor() {
+        this.confirm = Confirmation.Status.confirm;
+        this.reject = Confirmation.Status.reject;
+        this.dismiss = Confirmation.Status.dismiss;
+    }
+    close(status) {
+        this.clear(status);
+    }
+    getIconClass({ severity }) {
+        switch (severity) {
+            case 'info':
+                return 'fa-info-circle';
+            case 'success':
+                return 'fa-check-circle';
+            case 'warning':
+                return 'fa-exclamation-triangle';
+            case 'error':
+                return 'fa-times-circle';
+            default:
+                return 'fa-question-circle';
+        }
+    }
+}
+ConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ConfirmationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ConfirmationComponent, selector: "abp-confirmation", ngImport: i0, template: "<div class=\"confirmation\" *ngIf=\"confirmation$ | async as data\">\n  <div\n    class=\"confirmation-backdrop\"\n    (click)=\"data.options?.dismissible ? close(dismiss) : null\"\n  ></div>\n  <div class=\"confirmation-dialog\">\n    <div class=\"icon-container\" [ngClass]=\"data.severity\" *ngIf=\"data.severity\">\n      <i class=\"fa icon\" [ngClass]=\"getIconClass(data)\"></i>\n    </div>\n    <div class=\"content\">\n      <h1\n        class=\"title\"\n        *ngIf=\"data.title\"\n        [innerHTML]=\"data.title | abpLocalization: data.options?.titleLocalizationParams\"\n      ></h1>\n      <p\n        class=\"message\"\n        *ngIf=\"data.message\"\n        [innerHTML]=\"data.message | abpLocalization: data.options?.messageLocalizationParams\"\n      ></p>\n    </div>\n    <div class=\"footer\">\n      <button\n        id=\"cancel\"\n        class=\"confirmation-button confirmation-button--reject\"\n        [innerHTML]=\"data.options?.cancelText || 'AbpUi::Cancel' | abpLocalization\"\n        *ngIf=\"!data?.options?.hideCancelBtn\"\n        (click)=\"close(reject)\"\n      ></button>\n      <button\n        id=\"confirm\"\n        class=\"confirmation-button confirmation-button--approve\"\n        [innerHTML]=\"data.options?.yesText || 'AbpUi::Yes' | abpLocalization\"\n        *ngIf=\"!data?.options?.hideYesBtn\"\n        (click)=\"close(confirm)\"\n      ></button>\n    </div>\n  </div>\n</div>\n", styles: [".confirmation{position:fixed;top:0;right:0;bottom:0;left: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;margin:0 0 10px;padding:20px}.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;margin:10px auto;padding:20px;font-size:16px;font-weight:400;text-align:center}.confirmation .confirmation-dialog .footer{display:flex;align-items:center;justify-content:flex-end;margin:10px 0 0;padding:20px;width:100%}.confirmation .confirmation-dialog .footer .confirmation-button{display:inline-block;margin:0 5px;padding:10px 20px;border:none;border-radius:6px;font-size:14px;font-weight:600}\n"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1.AsyncPipe, "abpLocalization": i2.LocalizationPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-confirmation',
+                    templateUrl: './confirmation.component.html',
+                    styleUrls: ['./confirmation.component.scss'],
+                }]
         }] });
 
-class HttpErrorWrapperComponent {
-    constructor(subscription) {
-        this.subscription = subscription;
-        this.status = 0;
-        this.title = 'Oops!';
-        this.details = 'Sorry, an error has occured.';
-        this.customComponent = undefined;
-        this.hideCloseIcon = false;
-        this.isHomeShow = true;
-    }
-    get statusText() {
-        return this.status ? `[${this.status}]` : '';
-    }
-    ngOnInit() {
-        var _a;
-        this.backgroundColor =
-            ((_a = window.getComputedStyle(document.body)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('background-color')) || '#fff';
-    }
-    ngAfterViewInit() {
-        if (this.customComponent) {
-            const customComponentRef = this.cfRes
-                .resolveComponentFactory(this.customComponent)
-                .create(this.injector);
-            customComponentRef.instance.errorStatus = this.status;
-            customComponentRef.instance.destroy$ = this.destroy$;
-            this.appRef.attachView(customComponentRef.hostView);
-            if (this.containerRef) {
-                this.containerRef.nativeElement.appendChild(customComponentRef.hostView.rootNodes[0]);
-            }
-            customComponentRef.changeDetectorRef.detectChanges();
-        }
-        const keyup$ = fromEvent(document, 'keyup').pipe(debounceTime(150), filter((key) => key && key.key === 'Escape'));
-        this.subscription.addOne(keyup$, () => this.destroy());
-    }
-    ngOnDestroy() {
-        this.destroy();
-    }
-    destroy() {
-        this.destroy$.next();
-        this.destroy$.complete();
-    }
-}
-HttpErrorWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: HttpErrorWrapperComponent, deps: [{ token: i2.SubscriptionService }], target: i0.ɵɵFactoryTarget.Component });
-HttpErrorWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: HttpErrorWrapperComponent, selector: "abp-http-error-wrapper", providers: [SubscriptionService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  #container\n  id=\"abp-http-error-container\"\n  class=\"error\"\n  [style.backgroundColor]=\"backgroundColor\"\n>\n  <button\n    *ngIf=\"!hideCloseIcon\"\n    id=\"abp-close-button\"\n    type=\"button\"\n    class=\"close me-2\"\n    (click)=\"destroy()\"\n  >\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n\n  <div *ngIf=\"!customComponent\" class=\"row centered\">\n    <div class=\"col-md-12\">\n      <div class=\"error-template\">\n        <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\n        <div class=\"error-details\">\n          {{ details | abpLocalization }}\n        </div>\n        <div class=\"error-actions\">\n          <a\n            *ngIf=\"isHomeShow\"\n            (click)=\"destroy()\"\n            routerLink=\"/\"\n            class=\"btn btn-primary btn-md mt-2\"\n            ><span class=\"glyphicon glyphicon-home\"></span>\n            {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\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"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "abpLocalization": i2.LocalizationPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: HttpErrorWrapperComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-http-error-wrapper',
-                    templateUrl: './http-error-wrapper.component.html',
-                    styleUrls: ['http-error-wrapper.component.scss'],
-                    providers: [SubscriptionService],
-                }]
-        }], ctorParameters: function () { return [{ type: i2.SubscriptionService }]; }, propDecorators: { containerRef: [{
-                type: ViewChild,
-                args: ['container', { static: false }]
+class HttpErrorWrapperComponent {
+    constructor(subscription) {
+        this.subscription = subscription;
+        this.status = 0;
+        this.title = 'Oops!';
+        this.details = 'Sorry, an error has occured.';
+        this.customComponent = undefined;
+        this.hideCloseIcon = false;
+        this.isHomeShow = true;
+    }
+    get statusText() {
+        return this.status ? `[${this.status}]` : '';
+    }
+    ngOnInit() {
+        var _a;
+        this.backgroundColor =
+            ((_a = window.getComputedStyle(document.body)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('background-color')) || '#fff';
+    }
+    ngAfterViewInit() {
+        if (this.customComponent) {
+            const customComponentRef = this.cfRes
+                .resolveComponentFactory(this.customComponent)
+                .create(this.injector);
+            customComponentRef.instance.errorStatus = this.status;
+            customComponentRef.instance.destroy$ = this.destroy$;
+            this.appRef.attachView(customComponentRef.hostView);
+            if (this.containerRef) {
+                this.containerRef.nativeElement.appendChild(customComponentRef.hostView.rootNodes[0]);
+            }
+            customComponentRef.changeDetectorRef.detectChanges();
+        }
+        const keyup$ = fromEvent(document, 'keyup').pipe(debounceTime(150), filter((key) => key && key.key === 'Escape'));
+        this.subscription.addOne(keyup$, () => this.destroy());
+    }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    destroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+    }
+}
+HttpErrorWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: HttpErrorWrapperComponent, deps: [{ token: i2.SubscriptionService }], target: i0.ɵɵFactoryTarget.Component });
+HttpErrorWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: HttpErrorWrapperComponent, selector: "abp-http-error-wrapper", providers: [SubscriptionService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\n  #container\n  id=\"abp-http-error-container\"\n  class=\"error\"\n  [style.backgroundColor]=\"backgroundColor\"\n>\n  <button\n    *ngIf=\"!hideCloseIcon\"\n    id=\"abp-close-button\"\n    type=\"button\"\n    class=\"btn-close me-2\"\n    (click)=\"destroy()\"\n  ></button>\n\n  <div *ngIf=\"!customComponent\" class=\"row centered\">\n    <div class=\"col-md-12\">\n      <div class=\"error-template\">\n        <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\n        <div class=\"error-details\">\n          {{ details | abpLocalization }}\n        </div>\n        <div class=\"error-actions\">\n          <a\n            *ngIf=\"isHomeShow\"\n            (click)=\"destroy()\"\n            routerLink=\"/\"\n            class=\"btn btn-primary btn-md mt-2\"\n            ><span class=\"glyphicon glyphicon-home\"></span>\n            {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\n          </a>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\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"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "abpLocalization": i2.LocalizationPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: HttpErrorWrapperComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-http-error-wrapper',
+                    templateUrl: './http-error-wrapper.component.html',
+                    styleUrls: ['http-error-wrapper.component.scss'],
+                    providers: [SubscriptionService],
+                }]
+        }], ctorParameters: function () { return [{ type: i2.SubscriptionService }]; }, propDecorators: { containerRef: [{
+                type: ViewChild,
+                args: ['container', { static: false }]
             }] } });
 
-class LoaderBarComponent {
-    constructor(router, cdRef, subscription, httpWaitService, routerWaitService) {
-        this.router = router;
-        this.cdRef = cdRef;
-        this.subscription = subscription;
-        this.httpWaitService = httpWaitService;
-        this.routerWaitService = routerWaitService;
-        this.containerClass = 'abp-loader-bar';
-        this.color = '#77b6ff';
-        this.progressLevel = 0;
-        this.interval = new Subscription();
-        this.timer = new Subscription();
-        this.intervalPeriod = 350;
-        this.stopDelay = 800;
-        this.clearProgress = () => {
-            this.progressLevel = 0;
-            this.cdRef.detectChanges();
-        };
-        this.reportProgress = () => {
-            if (this.progressLevel < 75) {
-                this.progressLevel += 1 + Math.random() * 9;
-            }
-            else if (this.progressLevel < 90) {
-                this.progressLevel += 0.4;
-            }
-            else if (this.progressLevel < 100) {
-                this.progressLevel += 0.1;
-            }
-            else {
-                this.interval.unsubscribe();
-            }
-            this.cdRef.detectChanges();
-        };
-    }
-    set isLoading(value) {
-        this._isLoading = value;
-        this.cdRef.detectChanges();
-    }
-    get isLoading() {
-        return this._isLoading;
-    }
-    get boxShadow() {
-        return `0 0 10px rgba(${this.color}, 0.5)`;
-    }
-    ngOnInit() {
-        this.subscribeLoading();
-    }
-    subscribeLoading() {
-        this.subscription.addOne(combineLatest([this.httpWaitService.getLoading$(), this.routerWaitService.getLoading$()]), ([httpLoading, routerLoading]) => {
-            if (httpLoading || routerLoading)
-                this.startLoading();
-            else
-                this.stopLoading();
-        });
-    }
-    ngOnDestroy() {
-        this.interval.unsubscribe();
-    }
-    startLoading() {
-        if (this.isLoading || !this.interval.closed)
-            return;
-        this.isLoading = true;
-        this.progressLevel = 0;
-        this.cdRef.detectChanges();
-        this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress);
-        this.timer.unsubscribe();
-    }
-    stopLoading() {
-        this.interval.unsubscribe();
-        this.progressLevel = 100;
-        this.isLoading = false;
-        if (!this.timer.closed)
-            return;
-        this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
-    }
-}
-LoaderBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", 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 });
+class LoaderBarComponent {
+    constructor(router, cdRef, subscription, httpWaitService, routerWaitService) {
+        this.router = router;
+        this.cdRef = cdRef;
+        this.subscription = subscription;
+        this.httpWaitService = httpWaitService;
+        this.routerWaitService = routerWaitService;
+        this.containerClass = 'abp-loader-bar';
+        this.color = '#77b6ff';
+        this.progressLevel = 0;
+        this.interval = new Subscription();
+        this.timer = new Subscription();
+        this.intervalPeriod = 350;
+        this.stopDelay = 800;
+        this.clearProgress = () => {
+            this.progressLevel = 0;
+            this.cdRef.detectChanges();
+        };
+        this.reportProgress = () => {
+            if (this.progressLevel < 75) {
+                this.progressLevel += 1 + Math.random() * 9;
+            }
+            else if (this.progressLevel < 90) {
+                this.progressLevel += 0.4;
+            }
+            else if (this.progressLevel < 100) {
+                this.progressLevel += 0.1;
+            }
+            else {
+                this.interval.unsubscribe();
+            }
+            this.cdRef.detectChanges();
+        };
+    }
+    set isLoading(value) {
+        this._isLoading = value;
+        this.cdRef.detectChanges();
+    }
+    get isLoading() {
+        return this._isLoading;
+    }
+    get boxShadow() {
+        return `0 0 10px rgba(${this.color}, 0.5)`;
+    }
+    ngOnInit() {
+        this.subscribeLoading();
+    }
+    subscribeLoading() {
+        this.subscription.addOne(combineLatest([this.httpWaitService.getLoading$(), this.routerWaitService.getLoading$()]), ([httpLoading, routerLoading]) => {
+            if (httpLoading || routerLoading)
+                this.startLoading();
+            else
+                this.stopLoading();
+        });
+    }
+    ngOnDestroy() {
+        this.interval.unsubscribe();
+    }
+    startLoading() {
+        if (this.isLoading || !this.interval.closed)
+            return;
+        this.isLoading = true;
+        this.progressLevel = 0;
+        this.cdRef.detectChanges();
+        this.interval = timer(0, this.intervalPeriod).subscribe(this.reportProgress);
+        this.timer.unsubscribe();
+    }
+    stopLoading() {
+        this.interval.unsubscribe();
+        this.progressLevel = 100;
+        this.isLoading = false;
+        if (!this.timer.closed)
+            return;
+        this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
+    }
+}
+LoaderBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", 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 });
 LoaderBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: LoaderBarComponent, 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
@@ -490,11 +490,11 @@ LoaderBarComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", ver
         }"
       ></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"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LoaderBarComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-loader-bar',
+  `, 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"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LoaderBarComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-loader-bar',
                     template: `
     <div id="abp-loader-bar" [ngClass]="containerClass" [class.is-loading]="isLoading">
       <div
@@ -507,37 +507,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
         }"
       ></div>
     </div>
-  `,
-                    styleUrls: ['./loader-bar.component.scss'],
-                    providers: [SubscriptionService],
-                }]
-        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i0.ChangeDetectorRef }, { type: i2.SubscriptionService }, { type: i2.HttpWaitService }, { type: i2.RouterWaitService }]; }, propDecorators: { isLoading: [{
-                type: Input
-            }], containerClass: [{
-                type: Input
-            }], color: [{
-                type: Input
+  `,
+                    styleUrls: ['./loader-bar.component.scss'],
+                    providers: [SubscriptionService],
+                }]
+        }], ctorParameters: function () { return [{ type: i1$1.Router }, { type: i0.ChangeDetectorRef }, { type: i2.SubscriptionService }, { type: i2.HttpWaitService }, { type: i2.RouterWaitService }]; }, propDecorators: { isLoading: [{
+                type: Input
+            }], containerClass: [{
+                type: Input
+            }], color: [{
+                type: Input
             }] } });
 
-class LoadingComponent {
-}
-LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+class LoadingComponent {
+}
+LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
 LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: LoadingComponent, selector: "abp-loading", ngImport: i0, template: `
     <div class="abp-loading">
       <i class="fa fa-spinner fa-pulse abp-spinner"></i>
     </div>
-  `, isInline: true, styles: ["\n      .abp-loading {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        z-index: 1040;\n      }\n\n      .abp-loading .abp-spinner {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        font-size: 14px;\n        -moz-transform: translateX(-50%) translateY(-50%);\n        -o-transform: translateX(-50%) translateY(-50%);\n        -ms-transform: translateX(-50%) translateY(-50%);\n        -webkit-transform: translateX(-50%) translateY(-50%);\n        transform: translateX(-50%) translateY(-50%);\n      }\n    "], encapsulation: i0.ViewEncapsulation.None });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LoadingComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-loading',
+  `, isInline: true, styles: ["\n      .abp-loading {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        z-index: 1040;\n      }\n\n      .abp-loading .abp-spinner {\n        position: absolute;\n        top: 50%;\n        left: 50%;\n        font-size: 14px;\n        -moz-transform: translateX(-50%) translateY(-50%);\n        -o-transform: translateX(-50%) translateY(-50%);\n        -ms-transform: translateX(-50%) translateY(-50%);\n        -webkit-transform: translateX(-50%) translateY(-50%);\n        transform: translateX(-50%) translateY(-50%);\n      }\n    "], encapsulation: i0.ViewEncapsulation.None });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LoadingComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-loading',
                     template: `
     <div class="abp-loading">
       <i class="fa fa-spinner fa-pulse abp-spinner"></i>
     </div>
-  `,
-                    encapsulation: ViewEncapsulation.None,
-                    styles: [
+  `,
+                    encapsulation: ViewEncapsulation.None,
+                    styles: [
                         `
       .abp-loading {
         position: absolute;
@@ -559,1238 +559,1238 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImpo
         -webkit-transform: translateX(-50%) translateY(-50%);
         transform: translateX(-50%) translateY(-50%);
       }
-    `,
-                    ],
-                }]
+    `,
+                    ],
+                }]
         }] });
 
-class ConfirmationService {
-    constructor(contentProjectionService) {
-        this.contentProjectionService = contentProjectionService;
-        this.confirmation$ = new ReplaySubject(1);
-        this.clear = (status = Confirmation.Status.dismiss) => {
-            this.confirmation$.next();
-            this.status$.next(status);
-        };
-    }
-    setContainer() {
-        this.containerComponentRef = this.contentProjectionService.projectContent(PROJECTION_STRATEGY.AppendComponentToBody(ConfirmationComponent, {
-            confirmation$: this.confirmation$,
-            clear: this.clear,
-        }));
-        setTimeout(() => {
-            this.containerComponentRef.changeDetectorRef.detectChanges();
-        }, 0);
-    }
-    info(message, title, options) {
-        return this.show(message, title, 'info', options);
-    }
-    success(message, title, options) {
-        return this.show(message, title, 'success', options);
-    }
-    warn(message, title, options) {
-        return this.show(message, title, 'warning', options);
-    }
-    error(message, title, options) {
-        return this.show(message, title, 'error', options);
-    }
-    show(message, title, severity, options = {}) {
-        if (!this.containerComponentRef)
-            this.setContainer();
-        this.confirmation$.next({
-            message,
-            title,
-            severity: severity || 'neutral',
-            options,
-        });
-        this.status$ = new Subject();
-        const { dismissible = true } = options;
-        if (dismissible)
-            this.listenToEscape();
-        return this.status$;
-    }
-    listenToEscape() {
-        fromEvent(document, 'keyup')
-            .pipe(takeUntil(this.status$), debounceTime(150), filter((key) => key && key.key === 'Escape'))
-            .subscribe(_ => {
-            this.clear();
-        });
-    }
-}
-ConfirmationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationService, deps: [{ token: i2.ContentProjectionService }], target: i0.ɵɵFactoryTarget.Injectable });
-ConfirmationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+class ConfirmationService {
+    constructor(contentProjectionService) {
+        this.contentProjectionService = contentProjectionService;
+        this.confirmation$ = new ReplaySubject(1);
+        this.clear = (status = Confirmation.Status.dismiss) => {
+            this.confirmation$.next();
+            this.status$.next(status);
+        };
+    }
+    setContainer() {
+        this.containerComponentRef = this.contentProjectionService.projectContent(PROJECTION_STRATEGY.AppendComponentToBody(ConfirmationComponent, {
+            confirmation$: this.confirmation$,
+            clear: this.clear,
+        }));
+        setTimeout(() => {
+            this.containerComponentRef.changeDetectorRef.detectChanges();
+        }, 0);
+    }
+    info(message, title, options) {
+        return this.show(message, title, 'info', options);
+    }
+    success(message, title, options) {
+        return this.show(message, title, 'success', options);
+    }
+    warn(message, title, options) {
+        return this.show(message, title, 'warning', options);
+    }
+    error(message, title, options) {
+        return this.show(message, title, 'error', options);
+    }
+    show(message, title, severity, options = {}) {
+        if (!this.containerComponentRef)
+            this.setContainer();
+        this.confirmation$.next({
+            message,
+            title,
+            severity: severity || 'neutral',
+            options,
+        });
+        this.status$ = new Subject();
+        const { dismissible = true } = options;
+        if (dismissible)
+            this.listenToEscape();
+        return this.status$;
+    }
+    listenToEscape() {
+        fromEvent(document, 'keyup')
+            .pipe(takeUntil(this.status$), debounceTime(150), filter((key) => key && key.key === 'Escape'))
+            .subscribe(_ => {
+            this.clear();
+        });
+    }
+}
+ConfirmationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationService, deps: [{ token: i2.ContentProjectionService }], target: i0.ɵɵFactoryTarget.Injectable });
+ConfirmationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ 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));
-    }
-}
-ModalRefService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalRefService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ModalRefService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalRefService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalRefService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+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));
+    }
+}
+ModalRefService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalRefService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ModalRefService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalRefService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalRefService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }] });
 
-class ModalComponent {
-    constructor(confirmationService, subscription, suppressUnsavedChangesWarningToken, modal, modalRefService) {
-        this.confirmationService = confirmationService;
-        this.subscription = subscription;
-        this.suppressUnsavedChangesWarningToken = suppressUnsavedChangesWarningToken;
-        this.modal = modal;
-        this.modalRefService = modalRefService;
-        this.options = {};
-        this.suppressUnsavedChangesWarning = this.suppressUnsavedChangesWarningToken;
-        this.visibleChange = new EventEmitter();
-        this.init = new EventEmitter();
-        this.appear = new EventEmitter();
-        this.disappear = new EventEmitter();
-        this._visible = false;
-        this._busy = false;
-        this.isConfirmationOpen = false;
-        this.destroy$ = new Subject();
-        this.modalIdentifier = `modal-${uuid()}`;
-        this.toggle$ = new Subject();
-        this.initToggleStream();
-    }
-    get visible() {
-        return this._visible;
-    }
-    set visible(value) {
-        if (typeof value !== 'boolean')
-            return;
-        this.toggle$.next(value);
-    }
-    get busy() {
-        return this._busy;
-    }
-    set busy(value) {
-        if (this.abpSubmit && this.abpSubmit instanceof ButtonComponent) {
-            this.abpSubmit.loading = value;
-        }
-        this._busy = value;
-    }
-    get modalWindowRef() {
-        return document.querySelector(`ngb-modal-window.${this.modalIdentifier}`);
-    }
-    get isFormDirty() {
-        var _a;
-        return Boolean((_a = this.modalWindowRef) === null || _a === void 0 ? void 0 : _a.querySelector('.ng-dirty'));
-    }
-    ngOnInit() {
-        this.modalRefService.register(this);
-    }
-    dismiss(mode) {
-        switch (mode) {
-            case 'hard':
-                this.visible = false;
-                break;
-            case 'soft':
-                this.close();
-                break;
-            default:
-                break;
-        }
-    }
-    initToggleStream() {
-        this.subscription.addOne(this.toggle$.pipe(debounceTime(0), distinctUntilChanged()), value => this.toggle(value));
-    }
-    toggle(value) {
-        var _a;
-        this._visible = value;
-        this.visibleChange.emit(value);
-        if (!value) {
-            (_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.dismiss();
-            this.disappear.emit();
-            this.destroy$.next();
-            return;
-        }
-        setTimeout(() => this.listen(), 0);
-        this.modalRef = this.modal.open(this.modalContent, Object.assign(Object.assign({ 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();
-    }
-    ngOnDestroy() {
-        this.modalRefService.unregister(this);
-        this.toggle(false);
-        this.destroy$.next();
-    }
-    close() {
-        if (this.busy)
-            return;
-        if (this.isFormDirty && !this.suppressUnsavedChangesWarning) {
-            if (this.isConfirmationOpen)
-                return;
-            this.isConfirmationOpen = true;
-            this.confirmationService
-                .warn('AbpAccount::AreYouSureYouWantToCancelEditingWarningMessage', 'AbpAccount::AreYouSure', { dismissible: false })
-                .subscribe((status) => {
-                this.isConfirmationOpen = false;
-                if (status === Confirmation.Status.confirm) {
-                    this.visible = false;
-                }
-            });
-        }
-        else {
-            this.visible = false;
-        }
-    }
-    listen() {
-        if (this.modalWindowRef) {
-            fromEvent(this.modalWindowRef, 'keyup')
-                .pipe(takeUntil(this.destroy$), debounceTime(150), filter((key) => key && key.key === 'Escape'))
-                .subscribe(() => this.close());
-        }
-        fromEvent(window, 'beforeunload')
-            .pipe(takeUntil(this.destroy$))
-            .subscribe(event => {
-            // TODO: check this
-            if (!this.isFormDirty || this.suppressUnsavedChangesWarning) {
-                event.preventDefault();
-            }
-        });
-        this.init.emit();
-    }
-}
-ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalComponent, deps: [{ token: ConfirmationService }, { token: i2.SubscriptionService }, { token: SUPPRESS_UNSAVED_CHANGES_WARNING, optional: true }, { token: i3.NgbModal }, { token: ModalRefService }], target: i0.ɵɵFactoryTarget.Component });
-ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ModalComponent, selector: "abp-modal", inputs: { visible: "visible", busy: "busy", options: "options", suppressUnsavedChangesWarning: "suppressUnsavedChangesWarning" }, outputs: { visibleChange: "visibleChange", init: "init", appear: "appear", disappear: "disappear" }, providers: [SubscriptionService], queries: [{ propertyName: "abpHeader", first: true, predicate: ["abpHeader"], descendants: true }, { propertyName: "abpBody", first: true, predicate: ["abpBody"], descendants: true }, { propertyName: "abpFooter", first: true, predicate: ["abpFooter"], descendants: true }, { propertyName: "abpSubmit", first: true, predicate: ButtonComponent, descendants: true, read: ButtonComponent }], viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #modalContent let-modal>\n  <div *ngIf=\"abpHeader\" id=\"abp-modal-header\" class=\"modal-header\">\n    <ng-container *ngTemplateOutlet=\"abpHeader\"></ng-container>\n    \u200B\n    <button\n      id=\"abp-modal-close-button\"\n      type=\"button\"\n      class=\"btn-sm btn-close\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\"\n    ></button>\n  </div>\n  <div *ngIf=\"abpBody\" id=\"abp-modal-body\" class=\"modal-body\">\n    <ng-container *ngTemplateOutlet=\"abpBody\"></ng-container>\n  </div>\n  <div *ngIf=\"abpFooter\" id=\"abp-modal-footer\" class=\"modal-footer\">\n    <ng-container *ngTemplateOutlet=\"abpFooter\"></ng-container>\n  </div>\n</ng-template>\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"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-modal',
-                    templateUrl: './modal.component.html',
-                    styleUrls: ['./modal.component.scss'],
-                    providers: [SubscriptionService],
-                }]
-        }], ctorParameters: function () { return [{ type: ConfirmationService }, { type: i2.SubscriptionService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [SUPPRESS_UNSAVED_CHANGES_WARNING]
-                }] }, { type: i3.NgbModal }, { type: ModalRefService }]; }, propDecorators: { visible: [{
-                type: Input
-            }], busy: [{
-                type: Input
-            }], options: [{
-                type: Input
-            }], suppressUnsavedChangesWarning: [{
-                type: Input
-            }], modalContent: [{
-                type: ViewChild,
-                args: ['modalContent']
-            }], abpHeader: [{
-                type: ContentChild,
-                args: ['abpHeader', { static: false }]
-            }], abpBody: [{
-                type: ContentChild,
-                args: ['abpBody', { static: false }]
-            }], abpFooter: [{
-                type: ContentChild,
-                args: ['abpFooter', { static: false }]
-            }], abpSubmit: [{
-                type: ContentChild,
-                args: [ButtonComponent, { static: false, read: ButtonComponent }]
-            }], visibleChange: [{
-                type: Output
-            }], init: [{
-                type: Output
-            }], appear: [{
-                type: Output
-            }], disappear: [{
-                type: Output
+class ModalComponent {
+    constructor(confirmationService, subscription, suppressUnsavedChangesWarningToken, modal, modalRefService) {
+        this.confirmationService = confirmationService;
+        this.subscription = subscription;
+        this.suppressUnsavedChangesWarningToken = suppressUnsavedChangesWarningToken;
+        this.modal = modal;
+        this.modalRefService = modalRefService;
+        this.options = {};
+        this.suppressUnsavedChangesWarning = this.suppressUnsavedChangesWarningToken;
+        this.visibleChange = new EventEmitter();
+        this.init = new EventEmitter();
+        this.appear = new EventEmitter();
+        this.disappear = new EventEmitter();
+        this._visible = false;
+        this._busy = false;
+        this.isConfirmationOpen = false;
+        this.destroy$ = new Subject();
+        this.modalIdentifier = `modal-${uuid()}`;
+        this.toggle$ = new Subject();
+        this.initToggleStream();
+    }
+    get visible() {
+        return this._visible;
+    }
+    set visible(value) {
+        if (typeof value !== 'boolean')
+            return;
+        this.toggle$.next(value);
+    }
+    get busy() {
+        return this._busy;
+    }
+    set busy(value) {
+        if (this.abpSubmit && this.abpSubmit instanceof ButtonComponent) {
+            this.abpSubmit.loading = value;
+        }
+        this._busy = value;
+    }
+    get modalWindowRef() {
+        return document.querySelector(`ngb-modal-window.${this.modalIdentifier}`);
+    }
+    get isFormDirty() {
+        var _a;
+        return Boolean((_a = this.modalWindowRef) === null || _a === void 0 ? void 0 : _a.querySelector('.ng-dirty'));
+    }
+    ngOnInit() {
+        this.modalRefService.register(this);
+    }
+    dismiss(mode) {
+        switch (mode) {
+            case 'hard':
+                this.visible = false;
+                break;
+            case 'soft':
+                this.close();
+                break;
+            default:
+                break;
+        }
+    }
+    initToggleStream() {
+        this.subscription.addOne(this.toggle$.pipe(debounceTime(0), distinctUntilChanged()), value => this.toggle(value));
+    }
+    toggle(value) {
+        var _a;
+        this._visible = value;
+        this.visibleChange.emit(value);
+        if (!value) {
+            (_a = this.modalRef) === null || _a === void 0 ? void 0 : _a.dismiss();
+            this.disappear.emit();
+            this.destroy$.next();
+            return;
+        }
+        setTimeout(() => this.listen(), 0);
+        this.modalRef = this.modal.open(this.modalContent, Object.assign(Object.assign({ 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();
+    }
+    ngOnDestroy() {
+        this.modalRefService.unregister(this);
+        this.toggle(false);
+        this.destroy$.next();
+    }
+    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 = false;
+                }
+            });
+        }
+        else {
+            this.visible = false;
+        }
+    }
+    listen() {
+        if (this.modalWindowRef) {
+            fromEvent(this.modalWindowRef, 'keyup')
+                .pipe(takeUntil(this.destroy$), debounceTime(150), filter((key) => key && key.key === 'Escape'))
+                .subscribe(() => this.close());
+        }
+        fromEvent(window, 'beforeunload')
+            .pipe(takeUntil(this.destroy$))
+            .subscribe(event => {
+            // TODO: check this
+            if (!this.isFormDirty || this.suppressUnsavedChangesWarning) {
+                event.preventDefault();
+            }
+        });
+        this.init.emit();
+    }
+}
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalComponent, deps: [{ token: ConfirmationService }, { token: i2.SubscriptionService }, { token: SUPPRESS_UNSAVED_CHANGES_WARNING, optional: true }, { token: i3.NgbModal }, { token: ModalRefService }], target: i0.ɵɵFactoryTarget.Component });
+ModalComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ModalComponent, selector: "abp-modal", inputs: { visible: "visible", busy: "busy", options: "options", suppressUnsavedChangesWarning: "suppressUnsavedChangesWarning" }, outputs: { visibleChange: "visibleChange", init: "init", appear: "appear", disappear: "disappear" }, providers: [SubscriptionService], queries: [{ propertyName: "abpHeader", first: true, predicate: ["abpHeader"], descendants: true }, { propertyName: "abpBody", first: true, predicate: ["abpBody"], descendants: true }, { propertyName: "abpFooter", first: true, predicate: ["abpFooter"], descendants: true }, { propertyName: "abpSubmit", first: true, predicate: ButtonComponent, descendants: true, read: ButtonComponent }], viewQueries: [{ propertyName: "modalContent", first: true, predicate: ["modalContent"], descendants: true }], ngImport: i0, template: "<ng-content></ng-content>\n\n<ng-template #modalContent let-modal>\n  <div *ngIf=\"abpHeader\" id=\"abp-modal-header\" class=\"modal-header\">\n    <ng-container *ngTemplateOutlet=\"abpHeader\"></ng-container>\n    \u200B\n    <button\n      id=\"abp-modal-close-button\"\n      type=\"button\"\n      class=\"btn-sm btn-close\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\"\n    ></button>\n  </div>\n  <div *ngIf=\"abpBody\" id=\"abp-modal-body\" class=\"modal-body\">\n    <ng-container *ngTemplateOutlet=\"abpBody\"></ng-container>\n  </div>\n  <div *ngIf=\"abpFooter\" id=\"abp-modal-footer\" class=\"modal-footer\">\n    <ng-container *ngTemplateOutlet=\"abpFooter\"></ng-container>\n  </div>\n</ng-template>\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"], directives: [{ type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-modal',
+                    templateUrl: './modal.component.html',
+                    styleUrls: ['./modal.component.scss'],
+                    providers: [SubscriptionService],
+                }]
+        }], ctorParameters: function () { return [{ type: ConfirmationService }, { type: i2.SubscriptionService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [SUPPRESS_UNSAVED_CHANGES_WARNING]
+                }] }, { type: i3.NgbModal }, { type: ModalRefService }]; }, propDecorators: { visible: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], options: [{
+                type: Input
+            }], suppressUnsavedChangesWarning: [{
+                type: Input
+            }], modalContent: [{
+                type: ViewChild,
+                args: ['modalContent']
+            }], abpHeader: [{
+                type: ContentChild,
+                args: ['abpHeader', { static: false }]
+            }], abpBody: [{
+                type: ContentChild,
+                args: ['abpBody', { static: false }]
+            }], abpFooter: [{
+                type: ContentChild,
+                args: ['abpFooter', { static: false }]
+            }], abpSubmit: [{
+                type: ContentChild,
+                args: [ButtonComponent, { static: false, read: ButtonComponent }]
+            }], visibleChange: [{
+                type: Output
+            }], init: [{
+                type: Output
+            }], appear: [{
+                type: Output
+            }], disappear: [{
+                type: Output
             }] } });
 
-class ModalCloseDirective {
-    constructor(modal) {
-        this.modal = modal;
-        if (!modal) {
-            console.error('Please use abpClose within an abp-modal');
-        }
-    }
-    onClick() {
-        var _a;
-        (_a = this.modal) === null || _a === void 0 ? void 0 : _a.close();
-    }
-}
-ModalCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalCloseDirective, deps: [{ token: ModalComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-ModalCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ModalCloseDirective, selector: "[abpClose]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalCloseDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[abpClose]' }]
-        }], ctorParameters: function () { return [{ type: ModalComponent, decorators: [{
-                    type: Optional
-                }] }]; }, propDecorators: { onClick: [{
-                type: HostListener,
-                args: ['click']
+class ModalCloseDirective {
+    constructor(modal) {
+        this.modal = modal;
+        if (!modal) {
+            console.error('Please use abpClose within an abp-modal');
+        }
+    }
+    onClick() {
+        var _a;
+        (_a = this.modal) === null || _a === void 0 ? void 0 : _a.close();
+    }
+}
+ModalCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalCloseDirective, deps: [{ token: ModalComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ModalCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: ModalCloseDirective, selector: "[abpClose]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ModalCloseDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[abpClose]' }]
+        }], ctorParameters: function () { return [{ type: ModalComponent, decorators: [{
+                    type: Optional
+                }] }]; }, propDecorators: { onClick: [{
+                type: HostListener,
+                args: ['click']
             }] } });
 
-class ToastComponent {
-    constructor() {
-        this.remove = new EventEmitter();
-    }
-    get severityClass() {
-        if (!this.toast || !this.toast.severity)
-            return '';
-        return `abp-toast-${this.toast.severity}`;
-    }
-    get iconClass() {
-        switch (this.toast.severity) {
-            case 'success':
-                return 'fa-check-circle';
-            case 'info':
-                return 'fa-info-circle';
-            case 'warning':
-                return 'fa-exclamation-triangle';
-            case 'error':
-                return 'fa-times-circle';
-            default:
-                return 'fa-exclamation-circle';
-        }
-    }
-    ngOnInit() {
-        const { sticky, life } = this.toast.options || {};
-        if (sticky)
-            return;
-        const timeout = life || 5000;
-        setTimeout(() => {
-            this.close();
-        }, timeout);
-    }
-    close() {
-        var _a;
-        this.remove.emit((_a = this.toast.options) === null || _a === void 0 ? void 0 : _a.id);
-    }
-    tap() {
-        var _a;
-        if ((_a = this.toast.options) === null || _a === void 0 ? void 0 : _a.tapToDismiss)
-            this.close();
-    }
-}
-ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ToastComponent, selector: "abp-toast", inputs: { toast: "toast" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"abp-toast\" [ngClass]=\"severityClass\" (click)=\"tap()\">\n  <div class=\"abp-toast-icon\">\n    <i class=\"fa icon\" [ngClass]=\"iconClass\"></i>\n  </div>\n  <div class=\"abp-toast-content\">\n    <button class=\"abp-toast-close-button\" (click)=\"close()\" *ngIf=\"toast.options?.closable\">\n      <i class=\"fa fa-times\"></i>\n    </button>\n    <div class=\"abp-toast-title\">\n      {{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }}\n    </div>\n    <p\n      class=\"abp-toast-message\"\n      [innerHTML]=\"toast.message | abpLocalization: toast.options?.messageLocalizationParams\"\n    ></p>\n  </div>\n</div>\n", styles: [".abp-toast{display:grid;grid-template-columns:50px 1fr;grid-gap:10px;gap:10px;margin:5px 0;padding:10px;border-radius:0;width:350px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9999;border:2px solid #f0f0f0;background-color:#f0f0f0;color:#000;box-shadow:0 0 10px -5px #0006;opacity:1}.abp-toast:hover{border:2px solid #e3e3e3;background-color:#e3e3e3;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-success{border:2px solid #51a351;background-color:#51a351;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-success:hover{border:2px solid #499249;background-color:#499249;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-info{border:2px solid #2f96b4;background-color:#2f96b4;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-info:hover{border:2px solid #2a85a0;background-color:#2a85a0;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-warning{border:2px solid #f89406;background-color:#f89406;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-warning:hover{border:2px solid #df8505;background-color:#df8505;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-error{border:2px solid #bd362f;background-color:#bd362f;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-error:hover{border:2px solid #a9302a;background-color:#a9302a;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:36px}.abp-toast .abp-toast-content{position:relative}.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:25px;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"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "abpLocalization": i2.LocalizationPipe } });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToastComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-toast',
-                    templateUrl: './toast.component.html',
-                    styleUrls: ['./toast.component.scss'],
-                }]
-        }], propDecorators: { toast: [{
-                type: Input
-            }], remove: [{
-                type: Output
+class ToastComponent {
+    constructor() {
+        this.remove = new EventEmitter();
+    }
+    get severityClass() {
+        if (!this.toast || !this.toast.severity)
+            return '';
+        return `abp-toast-${this.toast.severity}`;
+    }
+    get iconClass() {
+        switch (this.toast.severity) {
+            case 'success':
+                return 'fa-check-circle';
+            case 'info':
+                return 'fa-info-circle';
+            case 'warning':
+                return 'fa-exclamation-triangle';
+            case 'error':
+                return 'fa-times-circle';
+            default:
+                return 'fa-exclamation-circle';
+        }
+    }
+    ngOnInit() {
+        const { sticky, life } = this.toast.options || {};
+        if (sticky)
+            return;
+        const timeout = life || 5000;
+        setTimeout(() => {
+            this.close();
+        }, timeout);
+    }
+    close() {
+        var _a;
+        this.remove.emit((_a = this.toast.options) === null || _a === void 0 ? void 0 : _a.id);
+    }
+    tap() {
+        var _a;
+        if ((_a = this.toast.options) === null || _a === void 0 ? void 0 : _a.tapToDismiss)
+            this.close();
+    }
+}
+ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ToastComponent, selector: "abp-toast", inputs: { toast: "toast" }, outputs: { remove: "remove" }, ngImport: i0, template: "<div class=\"abp-toast\" [ngClass]=\"severityClass\" (click)=\"tap()\">\n  <div class=\"abp-toast-icon\">\n    <i class=\"fa icon\" [ngClass]=\"iconClass\"></i>\n  </div>\n  <div class=\"abp-toast-content\">\n    <button class=\"abp-toast-close-button\" (click)=\"close()\" *ngIf=\"toast.options?.closable\">\n      <i class=\"fa fa-times\"></i>\n    </button>\n    <div class=\"abp-toast-title\">\n      {{ toast.title | abpLocalization: toast.options?.titleLocalizationParams }}\n    </div>\n    <p\n      class=\"abp-toast-message\"\n      [innerHTML]=\"toast.message | abpLocalization: toast.options?.messageLocalizationParams\"\n    ></p>\n  </div>\n</div>\n", styles: [".abp-toast{display:grid;grid-template-columns:50px 1fr;grid-gap:10px;gap:10px;margin:5px 0;padding:10px;border-radius:0;width:350px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;z-index:9999;border:2px solid #f0f0f0;background-color:#f0f0f0;color:#000;box-shadow:0 0 10px -5px #0006;opacity:1}.abp-toast:hover{border:2px solid #e3e3e3;background-color:#e3e3e3;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-success{border:2px solid #51a351;background-color:#51a351;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-success:hover{border:2px solid #499249;background-color:#499249;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-info{border:2px solid #2f96b4;background-color:#2f96b4;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-info:hover{border:2px solid #2a85a0;background-color:#2a85a0;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-warning{border:2px solid #f89406;background-color:#f89406;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-warning:hover{border:2px solid #df8505;background-color:#df8505;box-shadow:0 0 15px -5px #0006}.abp-toast.abp-toast-error{border:2px solid #bd362f;background-color:#bd362f;color:#fff;box-shadow:0 0 10px -5px #0006}.abp-toast.abp-toast-error:hover{border:2px solid #a9302a;background-color:#a9302a;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:36px}.abp-toast .abp-toast-content{position:relative}.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:25px;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"], directives: [{ type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "abpLocalization": i2.LocalizationPipe } });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToastComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-toast',
+                    templateUrl: './toast.component.html',
+                    styleUrls: ['./toast.component.scss'],
+                }]
+        }], propDecorators: { toast: [{
+                type: Input
+            }], remove: [{
+                type: Output
             }] } });
 
-class ToastContainerComponent {
-    constructor() {
-        this.toasts = [];
-        this.right = '30px';
-        this.bottom = '30px';
-    }
-    ngOnInit() {
-        this.toasts$.subscribe(toasts => {
-            this.toasts = this.toastKey
-                ? toasts.filter(t => {
-                    return t.options && t.options.containerKey !== this.toastKey;
-                })
-                : toasts;
-        });
-    }
-    trackByFunc(index, toast) {
-        var _a;
-        if (!toast)
-            return null;
-        return (_a = toast.options) === null || _a === void 0 ? void 0 : _a.id;
-    }
-}
-ToastContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ToastContainerComponent, selector: "abp-toast-container", inputs: { top: "top", right: "right", bottom: "bottom", left: "left", toastKey: "toastKey" }, ngImport: i0, template: "<div\n  class=\"abp-toast-container\"\n  [style.top]=\"top || 'auto'\"\n  [style.right]=\"right || 'auto'\"\n  [style.bottom]=\"bottom || 'auto'\"\n  [style.left]=\"left || 'auto'\"\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\n  [@toastInOut]=\"toasts.length\"\n>\n  <abp-toast\n    [toast]=\"toast\"\n    *ngFor=\"let toast of toasts; trackBy: trackByFunc\"\n    (remove)=\"remove($event)\"\n  ></abp-toast>\n</div>\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}\n"], components: [{ type: ToastComponent, selector: "abp-toast", inputs: ["toast"], outputs: ["remove"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [toastInOut] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToastContainerComponent, decorators: [{
-            type: Component,
-            args: [{
-                    selector: 'abp-toast-container',
-                    templateUrl: './toast-container.component.html',
-                    styleUrls: ['./toast-container.component.scss'],
-                    animations: [toastInOut],
-                }]
-        }], propDecorators: { top: [{
-                type: Input
-            }], right: [{
-                type: Input
-            }], bottom: [{
-                type: Input
-            }], left: [{
-                type: Input
-            }], toastKey: [{
-                type: Input
+class ToastContainerComponent {
+    constructor() {
+        this.toasts = [];
+        this.right = '30px';
+        this.bottom = '30px';
+    }
+    ngOnInit() {
+        this.toasts$.subscribe(toasts => {
+            this.toasts = this.toastKey
+                ? toasts.filter(t => {
+                    return t.options && t.options.containerKey !== this.toastKey;
+                })
+                : toasts;
+        });
+    }
+    trackByFunc(index, toast) {
+        var _a;
+        if (!toast)
+            return null;
+        return (_a = toast.options) === null || _a === void 0 ? void 0 : _a.id;
+    }
+}
+ToastContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.13", type: ToastContainerComponent, selector: "abp-toast-container", inputs: { top: "top", right: "right", bottom: "bottom", left: "left", toastKey: "toastKey" }, ngImport: i0, template: "<div\n  class=\"abp-toast-container\"\n  [style.top]=\"top || 'auto'\"\n  [style.right]=\"right || 'auto'\"\n  [style.bottom]=\"bottom || 'auto'\"\n  [style.left]=\"left || 'auto'\"\n  [style.display]=\"toasts.length ? 'flex' : 'none'\"\n  [@toastInOut]=\"toasts.length\"\n>\n  <abp-toast\n    [toast]=\"toast\"\n    *ngFor=\"let toast of toasts; trackBy: trackByFunc\"\n    (remove)=\"remove($event)\"\n  ></abp-toast>\n</div>\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}\n"], components: [{ type: ToastComponent, selector: "abp-toast", inputs: ["toast"], outputs: ["remove"] }], directives: [{ type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [toastInOut] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToastContainerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-toast-container',
+                    templateUrl: './toast-container.component.html',
+                    styleUrls: ['./toast-container.component.scss'],
+                    animations: [toastInOut],
+                }]
+        }], propDecorators: { top: [{
+                type: Input
+            }], right: [{
+                type: Input
+            }], bottom: [{
+                type: Input
+            }], left: [{
+                type: Input
+            }], toastKey: [{
+                type: Input
             }] } });
 
-const DEFAULT_VALIDATION_BLUEPRINTS = {
-    creditCard: 'AbpValidation::ThisFieldIsNotAValidCreditCardNumber.',
-    email: 'AbpValidation::ThisFieldIsNotAValidEmailAddress.',
-    invalid: 'AbpValidation::ThisFieldIsNotValid.',
-    max: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
-    maxlength: 'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMaximumLengthOf{0}[{{ requiredLength }}]',
-    min: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
-    minlength: 'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMinimumLengthOf{0}[{{ requiredLength }}]',
-    ngbDate: 'AbpValidation::ThisFieldIsNotValid.',
-    passwordMismatch: 'AbpIdentity::Volo.Abp.Identity:PasswordConfirmationFailed',
-    range: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
-    required: 'AbpValidation::ThisFieldIsRequired.',
-    url: 'AbpValidation::ThisFieldIsNotAValidFullyQualifiedHttpHttpsOrFtpUrl',
+const DEFAULT_VALIDATION_BLUEPRINTS = {
+    creditCard: 'AbpValidation::ThisFieldIsNotAValidCreditCardNumber.',
+    email: 'AbpValidation::ThisFieldIsNotAValidEmailAddress.',
+    invalid: 'AbpValidation::ThisFieldIsNotValid.',
+    max: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
+    maxlength: 'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMaximumLengthOf{0}[{{ requiredLength }}]',
+    min: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
+    minlength: 'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMinimumLengthOf{0}[{{ requiredLength }}]',
+    ngbDate: 'AbpValidation::ThisFieldIsNotValid.',
+    passwordMismatch: 'AbpIdentity::Volo.Abp.Identity:PasswordConfirmationFailed',
+    range: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
+    required: 'AbpValidation::ThisFieldIsRequired.',
+    url: 'AbpValidation::ThisFieldIsNotAValidFullyQualifiedHttpHttpsOrFtpUrl',
 };
 
-class EllipsisDirective {
-    constructor(cdRef, elRef) {
-        this.cdRef = cdRef;
-        this.elRef = elRef;
-        this.enabled = true;
-    }
-    get inlineClass() {
-        return this.enabled && this.width;
-    }
-    get class() {
-        return this.enabled && !this.width;
-    }
-    get maxWidth() {
-        return this.enabled && this.width ? this.width || '170px' : undefined;
-    }
-    ngAfterViewInit() {
-        this.title = this.title || this.elRef.nativeElement.innerText;
-        this.cdRef.detectChanges();
-    }
-}
-EllipsisDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EllipsisDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
-EllipsisDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: EllipsisDirective, 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: "12.2.13", ngImport: i0, type: EllipsisDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: '[abpEllipsis]',
-                }]
-        }], ctorParameters: function () { return [{ 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 EllipsisModule {
-}
-EllipsisModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EllipsisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-EllipsisModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EllipsisModule, declarations: [EllipsisDirective], exports: [EllipsisDirective] });
-EllipsisModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EllipsisModule });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EllipsisModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    exports: [EllipsisDirective],
-                    declarations: [EllipsisDirective],
-                }]
+class EllipsisDirective {
+    constructor(cdRef, elRef) {
+        this.cdRef = cdRef;
+        this.elRef = elRef;
+        this.enabled = true;
+    }
+    get inlineClass() {
+        return this.enabled && this.width;
+    }
+    get class() {
+        return this.enabled && !this.width;
+    }
+    get maxWidth() {
+        return this.enabled && this.width ? this.width || '170px' : undefined;
+    }
+    ngAfterViewInit() {
+        this.title = this.title || this.elRef.nativeElement.innerText;
+        this.cdRef.detectChanges();
+    }
+}
+EllipsisDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EllipsisDirective, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
+EllipsisDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: EllipsisDirective, 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: "12.2.13", ngImport: i0, type: EllipsisDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[abpEllipsis]',
+                }]
+        }], ctorParameters: function () { return [{ 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 EllipsisModule {
+}
+EllipsisModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EllipsisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EllipsisModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EllipsisModule, declarations: [EllipsisDirective], exports: [EllipsisDirective] });
+EllipsisModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EllipsisModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: EllipsisModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [EllipsisDirective],
+                    declarations: [EllipsisDirective],
+                }]
         }] });
 
-class LoadingDirective {
-    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;
-    }
-    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(() => {
-                var _a;
-                if (!this.componentRef) {
-                    this.componentRef = this.cdRes
-                        .resolveComponentFactory(LoadingComponent)
-                        .create(this.injector);
-                }
-                if (newValue && !this.rootNode) {
-                    this.rootNode = this.componentRef.hostView.rootNodes[0];
-                    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.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);
-    }
-    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;
-            }
-        }
-    }
-    ngOnDestroy() {
-        if (this.timerSubscription) {
-            this.timerSubscription.unsubscribe();
-        }
-    }
-}
-LoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-LoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: LoadingDirective, 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: "12.2.13", ngImport: i0, type: LoadingDirective, decorators: [{
-            type: Directive,
-            args: [{ selector: '[abpLoading]' }]
-        }], ctorParameters: function () { return [{ 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 LoadingDirective {
+    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;
+    }
+    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(() => {
+                var _a;
+                if (!this.componentRef) {
+                    this.componentRef = this.cdRes
+                        .resolveComponentFactory(LoadingComponent)
+                        .create(this.injector);
+                }
+                if (newValue && !this.rootNode) {
+                    this.rootNode = this.componentRef.hostView.rootNodes[0];
+                    (_a = this.targetElement) === null || _a === void 0 ? void 0 : _a.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);
+    }
+    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;
+            }
+        }
+    }
+    ngOnDestroy() {
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe();
+        }
+    }
+}
+LoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: LoadingDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }, { token: i0.ComponentFactoryResolver }, { token: i0.Injector }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+LoadingDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: LoadingDirective, 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: "12.2.13", ngImport: i0, type: LoadingDirective, decorators: [{
+            type: Directive,
+            args: [{ selector: '[abpLoading]' }]
+        }], ctorParameters: function () { return [{ 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 {
-    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;
-    }
-    get classes() {
-        return `ngx-datatable ${this.class}`;
-    }
-    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;
-        }
-    }
-    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();
-    }
-}
-NgxDatatableDefaultDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxDatatableDefaultDirective, deps: [{ token: i1$2.DatatableComponent }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
-NgxDatatableDefaultDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: { class: "class" }, host: { properties: { "class": "this.classes" } }, exportAs: ["ngxDatatableDefault"], ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxDatatableDefaultDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'ngx-datatable[default]',
-                    exportAs: 'ngxDatatableDefault',
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.DatatableComponent }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [DOCUMENT]
-                }] }]; }, propDecorators: { class: [{
-                type: Input
-            }], classes: [{
-                type: HostBinding,
-                args: ['class']
+class NgxDatatableDefaultDirective {
+    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;
+    }
+    get classes() {
+        return `ngx-datatable ${this.class}`;
+    }
+    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;
+        }
+    }
+    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();
+    }
+}
+NgxDatatableDefaultDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxDatatableDefaultDirective, deps: [{ token: i1$2.DatatableComponent }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Directive });
+NgxDatatableDefaultDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: NgxDatatableDefaultDirective, selector: "ngx-datatable[default]", inputs: { class: "class" }, host: { properties: { "class": "this.classes" } }, exportAs: ["ngxDatatableDefault"], ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxDatatableDefaultDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ngx-datatable[default]',
+                    exportAs: 'ngxDatatableDefault',
+                }]
+        }], ctorParameters: function () { return [{ 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',
-    totalMessage: 'AbpUi::Total',
-    selectedMessage: 'AbpUi::Selected',
-};
+const defaultNgxDatatableMessages = {
+    emptyMessage: 'AbpUi::NoDataAvailableInDatatable',
+    totalMessage: 'AbpUi::Total',
+    selectedMessage: 'AbpUi::Selected',
+};
 const NGX_DATATABLE_MESSAGES = new InjectionToken('NGX_DATATABLE_MESSAGES');
 
-class NgxDatatableListDirective {
-    constructor(table, cdRef, localizationService, ngxDatatableMessages) {
-        this.table = table;
-        this.cdRef = cdRef;
-        this.localizationService = localizationService;
-        this.ngxDatatableMessages = ngxDatatableMessages;
-        this.subscription = new Subscription();
-        this.querySubscription = new Subscription();
-        this.setInitialValues();
-    }
-    setInitialValues() {
-        this.table.externalPaging = true;
-        this.table.externalSorting = true;
-        const { emptyMessage, selectedMessage, totalMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages;
-        this.table.messages = {
-            emptyMessage: this.localizationService.instant(emptyMessage),
-            totalMessage: this.localizationService.instant(totalMessage),
-            selectedMessage: this.localizationService.instant(selectedMessage),
-        };
-    }
-    subscribeToPage() {
-        const sub = this.table.page.subscribe(({ offset }) => {
-            this.list.page = offset;
-            this.table.offset = offset;
-        });
-        this.subscription.add(sub);
-    }
-    subscribeToSort() {
-        const sub = this.table.sort.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;
-            }
-        });
-        this.subscription.add(sub);
-    }
-    subscribeToQuery() {
-        if (!this.querySubscription.closed)
-            this.querySubscription.unsubscribe();
-        this.querySubscription = this.list.query$.subscribe(() => {
-            const offset = this.list.page;
-            if (this.table.offset !== offset)
-                this.table.offset = offset;
-        });
-    }
-    ngOnChanges({ list }) {
-        this.subscribeToQuery();
-        if (!list.firstChange)
-            return;
-        const { maxResultCount, page } = list.currentValue;
-        this.table.limit = maxResultCount;
-        this.table.offset = page;
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-        this.querySubscription.unsubscribe();
-    }
-    ngOnInit() {
-        this.subscribeToPage();
-        this.subscribeToSort();
-    }
-}
-NgxDatatableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxDatatableListDirective, deps: [{ token: i1$2.DatatableComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: NGX_DATATABLE_MESSAGES, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
-NgxDatatableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: { list: "list" }, exportAs: ["ngxDatatableList"], usesOnChanges: true, ngImport: i0 });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxDatatableListDirective, decorators: [{
-            type: Directive,
-            args: [{
-                    // eslint-disable-next-line @angular-eslint/directive-selector
-                    selector: 'ngx-datatable[list]',
-                    exportAs: 'ngxDatatableList',
-                }]
-        }], ctorParameters: function () { return [{ type: i1$2.DatatableComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [NGX_DATATABLE_MESSAGES]
-                }] }]; }, propDecorators: { list: [{
-                type: Input
+class NgxDatatableListDirective {
+    constructor(table, cdRef, localizationService, ngxDatatableMessages) {
+        this.table = table;
+        this.cdRef = cdRef;
+        this.localizationService = localizationService;
+        this.ngxDatatableMessages = ngxDatatableMessages;
+        this.subscription = new Subscription();
+        this.querySubscription = new Subscription();
+        this.setInitialValues();
+    }
+    setInitialValues() {
+        this.table.externalPaging = true;
+        this.table.externalSorting = true;
+        const { emptyMessage, selectedMessage, totalMessage } = this.ngxDatatableMessages || defaultNgxDatatableMessages;
+        this.table.messages = {
+            emptyMessage: this.localizationService.instant(emptyMessage),
+            totalMessage: this.localizationService.instant(totalMessage),
+            selectedMessage: this.localizationService.instant(selectedMessage),
+        };
+    }
+    subscribeToPage() {
+        const sub = this.table.page.subscribe(({ offset }) => {
+            this.list.page = offset;
+            this.table.offset = offset;
+        });
+        this.subscription.add(sub);
+    }
+    subscribeToSort() {
+        const sub = this.table.sort.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;
+            }
+        });
+        this.subscription.add(sub);
+    }
+    subscribeToQuery() {
+        if (!this.querySubscription.closed)
+            this.querySubscription.unsubscribe();
+        this.querySubscription = this.list.query$.subscribe(() => {
+            const offset = this.list.page;
+            if (this.table.offset !== offset)
+                this.table.offset = offset;
+        });
+    }
+    ngOnChanges({ list }) {
+        this.subscribeToQuery();
+        if (!list.firstChange)
+            return;
+        const { maxResultCount, page } = list.currentValue;
+        this.table.limit = maxResultCount;
+        this.table.offset = page;
+    }
+    ngOnDestroy() {
+        this.subscription.unsubscribe();
+        this.querySubscription.unsubscribe();
+    }
+    ngOnInit() {
+        this.subscribeToPage();
+        this.subscribeToSort();
+    }
+}
+NgxDatatableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxDatatableListDirective, deps: [{ token: i1$2.DatatableComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: NGX_DATATABLE_MESSAGES, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+NgxDatatableListDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.13", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: { list: "list" }, exportAs: ["ngxDatatableList"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NgxDatatableListDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ngx-datatable[list]',
+                    exportAs: 'ngxDatatableList',
+                }]
+        }], ctorParameters: function () { return [{ type: i1$2.DatatableComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [NGX_DATATABLE_MESSAGES]
+                }] }]; }, propDecorators: { list: [{
+                type: Input
             }] } });
 
-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.languageChange$
-            .pipe(startWith(l10n.currentLang), map(locale => getLocaleDirection(locale)))
-            .subscribe(dir => {
-            this.dir.next(dir);
-            this.setBodyDir(dir);
-        });
-    }
-    setBodyDir(dir) {
-        document.body.dir = dir;
-        document.dir = dir;
-    }
-}
-DocumentDirHandlerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DocumentDirHandlerService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-DocumentDirHandlerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DocumentDirHandlerService });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DocumentDirHandlerService, decorators: [{
-            type: Injectable
+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.languageChange$
+            .pipe(startWith(l10n.currentLang), map(locale => getLocaleDirection(locale)))
+            .subscribe(dir => {
+            this.dir.next(dir);
+            this.setBodyDir(dir);
+        });
+    }
+    setBodyDir(dir) {
+        document.body.dir = dir;
+        document.dir = dir;
+    }
+}
+DocumentDirHandlerService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DocumentDirHandlerService, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+DocumentDirHandlerService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DocumentDirHandlerService });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DocumentDirHandlerService, decorators: [{
+            type: Injectable
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
-function httpErrorConfigFactory(config = {}) {
-    if (config.errorScreen && config.errorScreen.component && !config.errorScreen.forWhichErrors) {
-        config.errorScreen.forWhichErrors = [401, 403, 404, 500];
-    }
-    return Object.assign({ skipHandledErrorCodes: [], errorScreen: {} }, config);
-}
-const HTTP_ERROR_CONFIG = new InjectionToken('HTTP_ERROR_CONFIG');
+function httpErrorConfigFactory(config = {}) {
+    if (config.errorScreen && config.errorScreen.component && !config.errorScreen.forWhichErrors) {
+        config.errorScreen.forWhichErrors = [401, 403, 404, 500];
+    }
+    return Object.assign({ skipHandledErrorCodes: [], errorScreen: {} }, config);
+}
+const HTTP_ERROR_CONFIG = new InjectionToken('HTTP_ERROR_CONFIG');
 const HTTP_ERROR_HANDLER = new InjectionToken('HTTP_ERROR_HANDLER');
 
-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',
-    },
-};
-class ErrorHandler {
-    constructor(injector) {
-        this.injector = injector;
-        this.componentRef = null;
-        this.httpErrorHandler = this.injector.get(HTTP_ERROR_HANDLER, (_, err) => throwError(err));
-        this.executeErrorHandler = (error) => {
-            const returnValue = this.httpErrorHandler(this.injector, error);
-            return (returnValue instanceof Observable ? returnValue : of(null)).pipe(catchError(err => {
-                this.handleError(err);
-                return of(null);
-            }));
-        };
-        this.filterRestErrors = ({ status }) => {
-            if (typeof status !== 'number')
-                return false;
-            return (!!this.httpErrorConfig.skipHandledErrorCodes &&
-                this.httpErrorConfig.skipHandledErrorCodes.findIndex(code => code === status) < 0);
-        };
-        this.filterRouteErrors = (navigationError) => {
-            var _a, _b;
-            return (((_b = (_a = navigationError.error) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.indexOf('Cannot match')) > -1 &&
-                !!this.httpErrorConfig.skipHandledErrorCodes &&
-                this.httpErrorConfig.skipHandledErrorCodes.findIndex(code => code === 404) < 0);
-        };
-        this.httpErrorReporter = injector.get(HttpErrorReporterService);
-        this.routerEvents = injector.get(RouterEvents);
-        this.confirmationService = injector.get(ConfirmationService);
-        this.cfRes = injector.get(ComponentFactoryResolver);
-        this.rendererFactory = injector.get(RendererFactory2);
-        this.httpErrorConfig = injector.get('HTTP_ERROR_CONFIG');
-        this.listenToRestError();
-        this.listenToRouterError();
-        this.listenToRouterDataResolved();
-    }
-    listenToRouterError() {
-        this.routerEvents
-            .getNavigationEvents('Error')
-            .pipe(filter(this.filterRouteErrors))
-            .subscribe(() => this.show404Page());
-    }
-    listenToRouterDataResolved() {
-        this.routerEvents
-            .getEvents(ResolveEnd)
-            .pipe(filter(() => !!this.componentRef))
-            .subscribe(() => {
-            var _a;
-            (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.destroy();
-            this.componentRef = null;
-        });
-    }
-    listenToRestError() {
-        this.httpErrorReporter.reporter$
-            .pipe(filter(this.filterRestErrors), switchMap(this.executeErrorHandler))
-            .subscribe();
-    }
-    handleError(err) {
-        var _a;
-        const body = ((_a = err === null || err === void 0 ? void 0 : err.error) === null || _a === void 0 ? void 0 : _a.error) || {
-            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
-            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
-        };
-        if (err instanceof HttpErrorResponse && err.headers.get('_AbpErrorFormat')) {
-            const confirmation$ = this.showErrorWithRequestBody(body);
-            if (err.status === 401) {
-                confirmation$.subscribe(() => {
-                    this.navigateToLogin();
-                });
-            }
-        }
-        else {
-            switch (err.status) {
-                case 401:
-                    this.canCreateCustomError(401)
-                        ? this.show401Page()
-                        : this.showError({
-                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError401.title,
-                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError401.title,
-                        }, {
-                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError401.details,
-                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError401.details,
-                        }).subscribe(() => this.navigateToLogin());
-                    break;
-                case 403:
-                    this.createErrorComponent({
-                        title: {
-                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError403.title,
-                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError403.title,
-                        },
-                        details: {
-                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError403.details,
-                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError403.details,
-                        },
-                        status: 403,
-                    });
-                    break;
-                case 404:
-                    this.canCreateCustomError(404)
-                        ? this.show404Page()
-                        : this.showError({
-                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError404.details,
-                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError404.details,
-                        }, {
-                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError404.title,
-                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError404.title,
-                        });
-                    break;
-                case 500:
-                    this.createErrorComponent({
-                        title: {
-                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError500.title,
-                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError500.title,
-                        },
-                        details: {
-                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError500.details,
-                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError500.details,
-                        },
-                        status: 500,
-                    });
-                    break;
-                case 0:
-                    if (err.statusText === 'Unknown Error') {
-                        this.createErrorComponent({
-                            title: {
-                                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
-                                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
-                            },
-                            details: err.message,
-                            isHomeShow: false,
-                        });
-                    }
-                    break;
-                default:
-                    this.showError({
-                        key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.details,
-                        defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.details,
-                    }, {
-                        key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
-                        defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
-                    });
-                    break;
-            }
-        }
-    }
-    show401Page() {
-        this.createErrorComponent({
-            title: {
-                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError401.title,
-                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError401.title,
-            },
-            status: 401,
-        });
-    }
-    show404Page() {
-        this.createErrorComponent({
-            title: {
-                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError404.title,
-                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError404.title,
-            },
-            status: 404,
-        });
-    }
-    showErrorWithRequestBody(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 = body.message || {
-                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
-                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
-            };
-            title = '';
-        }
-        return this.showError(message, title);
-    }
-    showError(message, title) {
-        return this.confirmationService.error(message, title, {
-            hideCancelBtn: true,
-            yesText: 'AbpAccount::Close',
-        });
-    }
-    navigateToLogin() {
-        this.injector.get(AuthService).navigateToLogin();
-    }
-    createErrorComponent(instance) {
-        var _a, _b;
-        const renderer = this.rendererFactory.createRenderer(null, null);
-        const host = renderer.selectRootElement(document.body, true);
-        this.componentRef = this.cfRes
-            .resolveComponentFactory(HttpErrorWrapperComponent)
-            .create(this.injector);
-        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 = !!((_a = this.httpErrorConfig.errorScreen) === null || _a === void 0 ? void 0 : _a.hideCloseIcon);
-        const appRef = this.injector.get(ApplicationRef);
-        if (this.canCreateCustomError(instance.status)) {
-            this.componentRef.instance.cfRes = this.cfRes;
-            this.componentRef.instance.appRef = appRef;
-            this.componentRef.instance.injector = this.injector;
-            this.componentRef.instance.customComponent = (_b = this.httpErrorConfig.errorScreen) === null || _b === void 0 ? void 0 : _b.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(() => {
-            var _a;
-            (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.destroy();
-            this.componentRef = null;
-        });
-    }
-    canCreateCustomError(status) {
-        var _a, _b, _c, _d, _e, _f;
-        return !!(((_b = (_a = this.httpErrorConfig) === null || _a === void 0 ? void 0 : _a.errorScreen) === null || _b === void 0 ? void 0 : _b.component) &&
-            ((_d = (_c = this.httpErrorConfig) === null || _c === void 0 ? void 0 : _c.errorScreen) === null || _d === void 0 ? void 0 : _d.forWhichErrors) &&
-            ((_f = (_e = this.httpErrorConfig) === null || _e === void 0 ? void 0 : _e.errorScreen) === null || _f === void 0 ? void 0 : _f.forWhichErrors.indexOf(status)) > -1);
-    }
-}
-ErrorHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ErrorHandler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
-ErrorHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ErrorHandler, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ErrorHandler, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+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',
+    },
+};
+class ErrorHandler {
+    constructor(injector) {
+        this.injector = injector;
+        this.componentRef = null;
+        this.httpErrorHandler = this.injector.get(HTTP_ERROR_HANDLER, (_, err) => throwError(err));
+        this.executeErrorHandler = (error) => {
+            const returnValue = this.httpErrorHandler(this.injector, error);
+            return (returnValue instanceof Observable ? returnValue : of(null)).pipe(catchError(err => {
+                this.handleError(err);
+                return of(null);
+            }));
+        };
+        this.filterRestErrors = ({ status }) => {
+            if (typeof status !== 'number')
+                return false;
+            return (!!this.httpErrorConfig.skipHandledErrorCodes &&
+                this.httpErrorConfig.skipHandledErrorCodes.findIndex(code => code === status) < 0);
+        };
+        this.filterRouteErrors = (navigationError) => {
+            var _a, _b;
+            return (((_b = (_a = navigationError.error) === null || _a === void 0 ? void 0 : _a.message) === null || _b === void 0 ? void 0 : _b.indexOf('Cannot match')) > -1 &&
+                !!this.httpErrorConfig.skipHandledErrorCodes &&
+                this.httpErrorConfig.skipHandledErrorCodes.findIndex(code => code === 404) < 0);
+        };
+        this.httpErrorReporter = injector.get(HttpErrorReporterService);
+        this.routerEvents = injector.get(RouterEvents);
+        this.confirmationService = injector.get(ConfirmationService);
+        this.cfRes = injector.get(ComponentFactoryResolver);
+        this.rendererFactory = injector.get(RendererFactory2);
+        this.httpErrorConfig = injector.get('HTTP_ERROR_CONFIG');
+        this.listenToRestError();
+        this.listenToRouterError();
+        this.listenToRouterDataResolved();
+    }
+    listenToRouterError() {
+        this.routerEvents
+            .getNavigationEvents('Error')
+            .pipe(filter(this.filterRouteErrors))
+            .subscribe(() => this.show404Page());
+    }
+    listenToRouterDataResolved() {
+        this.routerEvents
+            .getEvents(ResolveEnd)
+            .pipe(filter(() => !!this.componentRef))
+            .subscribe(() => {
+            var _a;
+            (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.componentRef = null;
+        });
+    }
+    listenToRestError() {
+        this.httpErrorReporter.reporter$
+            .pipe(filter(this.filterRestErrors), switchMap(this.executeErrorHandler))
+            .subscribe();
+    }
+    handleError(err) {
+        var _a;
+        const body = ((_a = err === null || err === void 0 ? void 0 : err.error) === null || _a === void 0 ? void 0 : _a.error) || {
+            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
+            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
+        };
+        if (err instanceof HttpErrorResponse && err.headers.get('_AbpErrorFormat')) {
+            const confirmation$ = this.showErrorWithRequestBody(body);
+            if (err.status === 401) {
+                confirmation$.subscribe(() => {
+                    this.navigateToLogin();
+                });
+            }
+        }
+        else {
+            switch (err.status) {
+                case 401:
+                    this.canCreateCustomError(401)
+                        ? this.show401Page()
+                        : this.showError({
+                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError401.title,
+                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError401.title,
+                        }, {
+                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError401.details,
+                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError401.details,
+                        }).subscribe(() => this.navigateToLogin());
+                    break;
+                case 403:
+                    this.createErrorComponent({
+                        title: {
+                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError403.title,
+                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError403.title,
+                        },
+                        details: {
+                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError403.details,
+                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError403.details,
+                        },
+                        status: 403,
+                    });
+                    break;
+                case 404:
+                    this.canCreateCustomError(404)
+                        ? this.show404Page()
+                        : this.showError({
+                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError404.details,
+                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError404.details,
+                        }, {
+                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError404.title,
+                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError404.title,
+                        });
+                    break;
+                case 500:
+                    this.createErrorComponent({
+                        title: {
+                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError500.title,
+                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError500.title,
+                        },
+                        details: {
+                            key: DEFAULT_ERROR_LOCALIZATIONS.defaultError500.details,
+                            defaultValue: DEFAULT_ERROR_MESSAGES.defaultError500.details,
+                        },
+                        status: 500,
+                    });
+                    break;
+                case 0:
+                    if (err.statusText === 'Unknown Error') {
+                        this.createErrorComponent({
+                            title: {
+                                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
+                                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
+                            },
+                            details: err.message,
+                            isHomeShow: false,
+                        });
+                    }
+                    break;
+                default:
+                    this.showError({
+                        key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.details,
+                        defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.details,
+                    }, {
+                        key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
+                        defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
+                    });
+                    break;
+            }
+        }
+    }
+    show401Page() {
+        this.createErrorComponent({
+            title: {
+                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError401.title,
+                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError401.title,
+            },
+            status: 401,
+        });
+    }
+    show404Page() {
+        this.createErrorComponent({
+            title: {
+                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError404.title,
+                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError404.title,
+            },
+            status: 404,
+        });
+    }
+    showErrorWithRequestBody(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 = body.message || {
+                key: DEFAULT_ERROR_LOCALIZATIONS.defaultError.title,
+                defaultValue: DEFAULT_ERROR_MESSAGES.defaultError.title,
+            };
+            title = '';
+        }
+        return this.showError(message, title);
+    }
+    showError(message, title) {
+        return this.confirmationService.error(message, title, {
+            hideCancelBtn: true,
+            yesText: 'AbpAccount::Close',
+        });
+    }
+    navigateToLogin() {
+        this.injector.get(AuthService).navigateToLogin();
+    }
+    createErrorComponent(instance) {
+        var _a, _b;
+        const renderer = this.rendererFactory.createRenderer(null, null);
+        const host = renderer.selectRootElement(document.body, true);
+        this.componentRef = this.cfRes
+            .resolveComponentFactory(HttpErrorWrapperComponent)
+            .create(this.injector);
+        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 = !!((_a = this.httpErrorConfig.errorScreen) === null || _a === void 0 ? void 0 : _a.hideCloseIcon);
+        const appRef = this.injector.get(ApplicationRef);
+        if (this.canCreateCustomError(instance.status)) {
+            this.componentRef.instance.cfRes = this.cfRes;
+            this.componentRef.instance.appRef = appRef;
+            this.componentRef.instance.injector = this.injector;
+            this.componentRef.instance.customComponent = (_b = this.httpErrorConfig.errorScreen) === null || _b === void 0 ? void 0 : _b.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(() => {
+            var _a;
+            (_a = this.componentRef) === null || _a === void 0 ? void 0 : _a.destroy();
+            this.componentRef = null;
+        });
+    }
+    canCreateCustomError(status) {
+        var _a, _b, _c, _d, _e, _f;
+        return !!(((_b = (_a = this.httpErrorConfig) === null || _a === void 0 ? void 0 : _a.errorScreen) === null || _b === void 0 ? void 0 : _b.component) &&
+            ((_d = (_c = this.httpErrorConfig) === null || _c === void 0 ? void 0 : _c.errorScreen) === null || _d === void 0 ? void 0 : _d.forWhichErrors) &&
+            ((_f = (_e = this.httpErrorConfig) === null || _e === void 0 ? void 0 : _e.errorScreen) === null || _f === void 0 ? void 0 : _f.forWhichErrors.indexOf(status)) > -1);
+    }
+}
+ErrorHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ErrorHandler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+ErrorHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ErrorHandler, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ErrorHandler, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
-class NavItem {
-    constructor(props) {
-        props = Object.assign(Object.assign({}, props), { visible: props.visible || (() => true) });
-        Object.assign(this, props);
-    }
-}
-
-const NG_BOOTSTRAP_CONFIG_PROVIDERS = [
-    {
-        provide: APP_INITIALIZER,
-        useFactory: configureNgBootstrap,
-        deps: [NgbInputDatepickerConfig, NgbTypeaheadConfig],
-        multi: true,
-    },
-];
-function configureNgBootstrap(datepicker, typeahead) {
-    return () => {
-        datepicker.container = 'body';
-        typeahead.container = 'body';
-    };
-}
-
-const THEME_SHARED_ROUTE_PROVIDERS = [
-    { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
-];
-function configureRoutes(routesService) {
-    return () => {
-        routesService.add([
-            {
-                path: undefined,
-                name: "AbpUiNavigation::Menu:Administration" /* Administration */,
-                iconClass: 'fa fa-wrench',
-                order: 100,
-            },
-        ]);
-    };
-}
-
-class NavItemsService {
-    constructor() {
-        this._items$ = new BehaviorSubject([]);
-    }
-    get items() {
-        return this._items$.value;
-    }
-    get items$() {
-        return this._items$.asObservable();
-    }
-    addItems(newItems) {
-        const items = [...this.items];
-        newItems.forEach(item => items.push(new NavItem(item)));
-        items.sort(sortItems);
-        this._items$.next(items);
-    }
-    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);
-    }
-    patchItem(id, item) {
-        const index = this.items.findIndex(i => i.id === id);
-        if (index < 0)
-            return;
-        const items = [...this.items];
-        items[index] = new NavItem(Object.assign(Object.assign({}, items[index]), item));
-        items.sort(sortItems);
-        this._items$.next(items);
-    }
-}
-NavItemsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NavItemsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-NavItemsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NavItemsService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NavItemsService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-function sortItems(a, b) {
-    if (!a.order)
-        return 1;
-    if (!b.order)
-        return -1;
-    return a.order - b.order;
-}
-
-class PageAlertService {
-    constructor() {
-        this.alerts = new InternalStore([]);
-        this.alerts$ = this.alerts.sliceState(state => state);
-    }
-    show(alert) {
-        var _a;
-        const newAlert = Object.assign(Object.assign({}, alert), { dismissible: (_a = alert.dismissible) !== null && _a !== void 0 ? _a : true });
-        this.alerts.set([newAlert, ...this.alerts.state]);
-    }
-    remove(index) {
-        const alerts = [...this.alerts.state];
-        alerts.splice(index, 1);
-        this.alerts.set(alerts);
-    }
-}
-PageAlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PageAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-PageAlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PageAlertService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PageAlertService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
+class NavItem {
+    constructor(props) {
+        props = Object.assign(Object.assign({}, props), { visible: props.visible || (() => true) });
+        Object.assign(this, props);
+    }
+}
+
+const NG_BOOTSTRAP_CONFIG_PROVIDERS = [
+    {
+        provide: APP_INITIALIZER,
+        useFactory: configureNgBootstrap,
+        deps: [NgbInputDatepickerConfig, NgbTypeaheadConfig],
+        multi: true,
+    },
+];
+function configureNgBootstrap(datepicker, typeahead) {
+    return () => {
+        datepicker.container = 'body';
+        typeahead.container = 'body';
+    };
+}
+
+const THEME_SHARED_ROUTE_PROVIDERS = [
+    { provide: APP_INITIALIZER, useFactory: configureRoutes, deps: [RoutesService], multi: true },
+];
+function configureRoutes(routesService) {
+    return () => {
+        routesService.add([
+            {
+                path: undefined,
+                name: "AbpUiNavigation::Menu:Administration" /* Administration */,
+                iconClass: 'fa fa-wrench',
+                order: 100,
+            },
+        ]);
+    };
+}
+
+class NavItemsService {
+    constructor() {
+        this._items$ = new BehaviorSubject([]);
+    }
+    get items() {
+        return this._items$.value;
+    }
+    get items$() {
+        return this._items$.asObservable();
+    }
+    addItems(newItems) {
+        const items = [...this.items];
+        newItems.forEach(item => items.push(new NavItem(item)));
+        items.sort(sortItems);
+        this._items$.next(items);
+    }
+    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);
+    }
+    patchItem(id, item) {
+        const index = this.items.findIndex(i => i.id === id);
+        if (index < 0)
+            return;
+        const items = [...this.items];
+        items[index] = new NavItem(Object.assign(Object.assign({}, items[index]), item));
+        items.sort(sortItems);
+        this._items$.next(items);
+    }
+}
+NavItemsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NavItemsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NavItemsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NavItemsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: NavItemsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+function sortItems(a, b) {
+    if (!a.order)
+        return 1;
+    if (!b.order)
+        return -1;
+    return a.order - b.order;
+}
+
+class PageAlertService {
+    constructor() {
+        this.alerts = new InternalStore([]);
+        this.alerts$ = this.alerts.sliceState(state => state);
+    }
+    show(alert) {
+        var _a;
+        const newAlert = Object.assign(Object.assign({}, alert), { dismissible: (_a = alert.dismissible) !== null && _a !== void 0 ? _a : true });
+        this.alerts.set([newAlert, ...this.alerts.state]);
+    }
+    remove(index) {
+        const alerts = [...this.alerts.state];
+        alerts.splice(index, 1);
+        this.alerts.set(alerts);
+    }
+}
+PageAlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PageAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PageAlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PageAlertService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: PageAlertService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
         }], ctorParameters: function () { return []; } });
 
-class ToasterService {
-    constructor(contentProjectionService) {
-        this.contentProjectionService = contentProjectionService;
-        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 => { var _a; return ((_a = toast.options) === null || _a === void 0 ? void 0 : _a.id) !== id; });
-            this.toasts$.next(this.toasts);
-        };
-    }
-    setContainer() {
-        this.containerComponentRef = this.contentProjectionService.projectContent(PROJECTION_STRATEGY.AppendComponentToBody(ToastContainerComponent, {
-            toasts$: this.toasts$,
-            remove: this.remove,
-        }));
-        this.containerComponentRef.changeDetectorRef.detectChanges();
-    }
-    /**
-     * 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);
-    }
-    /**
-     * 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);
-    }
-    /**
-     * 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);
-    }
-    /**
-     * 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: Object.assign({ 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 => { var _a; return ((_a = toast.options) === null || _a === void 0 ? void 0 : _a.containerKey) !== containerKey; });
-        this.toasts$.next(this.toasts);
-    }
-}
-ToasterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToasterService, deps: [{ token: i2.ContentProjectionService }], target: i0.ɵɵFactoryTarget.Injectable });
-ToasterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToasterService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToasterService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
+class ToasterService {
+    constructor(contentProjectionService) {
+        this.contentProjectionService = contentProjectionService;
+        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 => { var _a; return ((_a = toast.options) === null || _a === void 0 ? void 0 : _a.id) !== id; });
+            this.toasts$.next(this.toasts);
+        };
+    }
+    setContainer() {
+        this.containerComponentRef = this.contentProjectionService.projectContent(PROJECTION_STRATEGY.AppendComponentToBody(ToastContainerComponent, {
+            toasts$: this.toasts$,
+            remove: this.remove,
+        }));
+        this.containerComponentRef.changeDetectorRef.detectChanges();
+    }
+    /**
+     * 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);
+    }
+    /**
+     * 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);
+    }
+    /**
+     * 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);
+    }
+    /**
+     * 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: Object.assign({ 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 => { var _a; return ((_a = toast.options) === null || _a === void 0 ? void 0 : _a.containerKey) !== containerKey; });
+        this.toasts$.next(this.toasts);
+    }
+}
+ToasterService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToasterService, deps: [{ token: i2.ContentProjectionService }], target: i0.ɵɵFactoryTarget.Injectable });
+ToasterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToasterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ToasterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
         }], ctorParameters: function () { return [{ type: i2.ContentProjectionService }]; } });
 
 var styles = `
@@ -1975,238 +1975,238 @@ ngb-typeahead-window, ngb-typeahead-window.dropdown-menu {
 }
 `;
 
-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 THEME_SHARED_APPEND_CONTENT = new InjectionToken('THEME_SHARED_APPEND_CONTENT', {
+    providedIn: 'root',
+    factory: () => {
+        const domInsertion = inject(DomInsertionService);
+        domInsertion.insertContent(CONTENT_STRATEGY.AppendStyleToHead(styles));
+    },
 });
 
-function isNumber(value) {
-    return !isNaN(toInteger(value));
-}
-function toInteger(value) {
-    return parseInt(`${value}`, 10);
-}
-class DateParserFormatter extends NgbDateParserFormatter {
-    constructor(configState, locale) {
-        super();
-        this.configState = configState;
-        this.locale = locale;
-    }
-    parse(value) {
-        if (value) {
-            const dateParts = value.trim().split('-');
-            // TODO: CHANGED
-            if (dateParts.length === 1 && isNumber(dateParts[0])) {
-                return { year: toInteger(dateParts[0]), month: -1, day: -1 };
-            }
-            else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
-                return { year: toInteger(dateParts[0]), month: toInteger(dateParts[1]), day: -1 };
-            }
-            else if (dateParts.length === 3 &&
-                isNumber(dateParts[0]) &&
-                isNumber(dateParts[1]) &&
-                isNumber(dateParts[2])) {
-                return {
-                    year: toInteger(dateParts[0]),
-                    month: toInteger(dateParts[1]),
-                    day: toInteger(dateParts[2]),
-                };
-            }
-        }
-        return null;
-    }
-    format(date) {
-        var _a, _b;
-        if (!date)
-            return '';
-        const localization = this.configState.getOne('localization');
-        const dateFormat = ((_b = (_a = localization.currentCulture) === null || _a === void 0 ? void 0 : _a.dateTimeFormat) === null || _b === void 0 ? void 0 : _b.shortDatePattern) || 'yyyy-MM-dd';
-        return formatDate(new Date(date.year, date.month - 1, date.day), dateFormat, this.locale);
-    }
-}
-DateParserFormatter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DateParserFormatter, deps: [{ token: i2.ConfigStateService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
-DateParserFormatter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DateParserFormatter });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DateParserFormatter, decorators: [{
-            type: Injectable
-        }], ctorParameters: function () { return [{ type: i2.ConfigStateService }, { type: undefined, decorators: [{
-                    type: Inject,
-                    args: [LOCALE_ID]
+function isNumber(value) {
+    return !isNaN(toInteger(value));
+}
+function toInteger(value) {
+    return parseInt(`${value}`, 10);
+}
+class DateParserFormatter extends NgbDateParserFormatter {
+    constructor(configState, locale) {
+        super();
+        this.configState = configState;
+        this.locale = locale;
+    }
+    parse(value) {
+        if (value) {
+            const dateParts = value.trim().split('-');
+            // TODO: CHANGED
+            if (dateParts.length === 1 && isNumber(dateParts[0])) {
+                return { year: toInteger(dateParts[0]), month: -1, day: -1 };
+            }
+            else if (dateParts.length === 2 && isNumber(dateParts[0]) && isNumber(dateParts[1])) {
+                return { year: toInteger(dateParts[0]), month: toInteger(dateParts[1]), day: -1 };
+            }
+            else if (dateParts.length === 3 &&
+                isNumber(dateParts[0]) &&
+                isNumber(dateParts[1]) &&
+                isNumber(dateParts[2])) {
+                return {
+                    year: toInteger(dateParts[0]),
+                    month: toInteger(dateParts[1]),
+                    day: toInteger(dateParts[2]),
+                };
+            }
+        }
+        return null;
+    }
+    format(date) {
+        var _a, _b;
+        if (!date)
+            return '';
+        const localization = this.configState.getOne('localization');
+        const dateFormat = ((_b = (_a = localization.currentCulture) === null || _a === void 0 ? void 0 : _a.dateTimeFormat) === null || _b === void 0 ? void 0 : _b.shortDatePattern) || 'yyyy-MM-dd';
+        return formatDate(new Date(date.year, date.month - 1, date.day), dateFormat, this.locale);
+    }
+}
+DateParserFormatter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DateParserFormatter, deps: [{ token: i2.ConfigStateService }, { token: LOCALE_ID }], target: i0.ɵɵFactoryTarget.Injectable });
+DateParserFormatter.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DateParserFormatter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: DateParserFormatter, decorators: [{
+            type: Injectable
+        }], ctorParameters: function () { return [{ type: i2.ConfigStateService }, { type: undefined, decorators: [{
+                    type: Inject,
+                    args: [LOCALE_ID]
                 }] }]; } });
 
-const declarationsWithExports = [
-    BreadcrumbComponent,
-    BreadcrumbItemsComponent,
-    ButtonComponent,
-    ConfirmationComponent,
-    LoaderBarComponent,
-    LoadingComponent,
-    ModalComponent,
-    ToastComponent,
-    ToastContainerComponent,
-    NgxDatatableDefaultDirective,
-    NgxDatatableListDirective,
-    LoadingDirective,
-    ModalCloseDirective,
-];
-class BaseThemeSharedModule {
-}
-BaseThemeSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BaseThemeSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-BaseThemeSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BaseThemeSharedModule, declarations: [BreadcrumbComponent,
-        BreadcrumbItemsComponent,
-        ButtonComponent,
-        ConfirmationComponent,
-        LoaderBarComponent,
-        LoadingComponent,
-        ModalComponent,
-        ToastComponent,
-        ToastContainerComponent,
-        NgxDatatableDefaultDirective,
-        NgxDatatableListDirective,
-        LoadingDirective,
-        ModalCloseDirective, HttpErrorWrapperComponent], imports: [CoreModule,
-        NgxDatatableModule,
-        NgxValidateCoreModule,
-        NgbPaginationModule,
-        EllipsisModule], exports: [NgxDatatableModule, EllipsisModule, BreadcrumbComponent,
-        BreadcrumbItemsComponent,
-        ButtonComponent,
-        ConfirmationComponent,
-        LoaderBarComponent,
-        LoadingComponent,
-        ModalComponent,
-        ToastComponent,
-        ToastContainerComponent,
-        NgxDatatableDefaultDirective,
-        NgxDatatableListDirective,
-        LoadingDirective,
-        ModalCloseDirective] });
-BaseThemeSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BaseThemeSharedModule, providers: [DatePipe], imports: [[
-            CoreModule,
-            NgxDatatableModule,
-            NgxValidateCoreModule,
-            NgbPaginationModule,
-            EllipsisModule,
-        ], NgxDatatableModule, EllipsisModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BaseThemeSharedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [
-                        CoreModule,
-                        NgxDatatableModule,
-                        NgxValidateCoreModule,
-                        NgbPaginationModule,
-                        EllipsisModule,
-                    ],
-                    declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
-                    exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
-                    providers: [DatePipe],
-                    entryComponents: [
-                        HttpErrorWrapperComponent,
-                        LoadingComponent,
-                        ToastContainerComponent,
-                        ConfirmationComponent,
-                    ],
-                }]
-        }] });
-class ThemeSharedModule {
-    static forRoot({ httpErrorConfig, validation = {} } = {}) {
-        return {
-            ngModule: ThemeSharedModule,
-            providers: [
-                {
-                    provide: APP_INITIALIZER,
-                    multi: true,
-                    deps: [ErrorHandler],
-                    useFactory: noop,
-                },
-                THEME_SHARED_ROUTE_PROVIDERS,
-                {
-                    provide: APP_INITIALIZER,
-                    multi: true,
-                    deps: [THEME_SHARED_APPEND_CONTENT],
-                    useFactory: noop,
-                },
-                { provide: HTTP_ERROR_CONFIG, useValue: httpErrorConfig },
-                {
-                    provide: 'HTTP_ERROR_CONFIG',
-                    useFactory: httpErrorConfigFactory,
-                    deps: [HTTP_ERROR_CONFIG],
-                },
-                { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
-                NG_BOOTSTRAP_CONFIG_PROVIDERS,
-                {
-                    provide: VALIDATION_BLUEPRINTS,
-                    useValue: Object.assign(Object.assign({}, DEFAULT_VALIDATION_BLUEPRINTS), (validation.blueprints || {})),
-                },
-                {
-                    provide: VALIDATION_MAP_ERRORS_FN,
-                    useValue: validation.mapErrorsFn || defaultMapErrorsFn,
-                },
-                {
-                    provide: VALIDATION_VALIDATE_ON_SUBMIT,
-                    useValue: validation.validateOnSubmit,
-                },
-                DocumentDirHandlerService,
-                {
-                    provide: APP_INITIALIZER,
-                    useFactory: noop,
-                    multi: true,
-                    deps: [DocumentDirHandlerService],
-                },
-            ],
-        };
-    }
-}
-ThemeSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ThemeSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-ThemeSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ThemeSharedModule, imports: [BaseThemeSharedModule], exports: [BaseThemeSharedModule] });
-ThemeSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ThemeSharedModule, imports: [[BaseThemeSharedModule], BaseThemeSharedModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ThemeSharedModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [BaseThemeSharedModule],
-                    exports: [BaseThemeSharedModule],
-                }]
+const declarationsWithExports = [
+    BreadcrumbComponent,
+    BreadcrumbItemsComponent,
+    ButtonComponent,
+    ConfirmationComponent,
+    LoaderBarComponent,
+    LoadingComponent,
+    ModalComponent,
+    ToastComponent,
+    ToastContainerComponent,
+    NgxDatatableDefaultDirective,
+    NgxDatatableListDirective,
+    LoadingDirective,
+    ModalCloseDirective,
+];
+class BaseThemeSharedModule {
+}
+BaseThemeSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BaseThemeSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaseThemeSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BaseThemeSharedModule, declarations: [BreadcrumbComponent,
+        BreadcrumbItemsComponent,
+        ButtonComponent,
+        ConfirmationComponent,
+        LoaderBarComponent,
+        LoadingComponent,
+        ModalComponent,
+        ToastComponent,
+        ToastContainerComponent,
+        NgxDatatableDefaultDirective,
+        NgxDatatableListDirective,
+        LoadingDirective,
+        ModalCloseDirective, HttpErrorWrapperComponent], imports: [CoreModule,
+        NgxDatatableModule,
+        NgxValidateCoreModule,
+        NgbPaginationModule,
+        EllipsisModule], exports: [NgxDatatableModule, EllipsisModule, BreadcrumbComponent,
+        BreadcrumbItemsComponent,
+        ButtonComponent,
+        ConfirmationComponent,
+        LoaderBarComponent,
+        LoadingComponent,
+        ModalComponent,
+        ToastComponent,
+        ToastContainerComponent,
+        NgxDatatableDefaultDirective,
+        NgxDatatableListDirective,
+        LoadingDirective,
+        ModalCloseDirective] });
+BaseThemeSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BaseThemeSharedModule, providers: [DatePipe], imports: [[
+            CoreModule,
+            NgxDatatableModule,
+            NgxValidateCoreModule,
+            NgbPaginationModule,
+            EllipsisModule,
+        ], NgxDatatableModule, EllipsisModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: BaseThemeSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        CoreModule,
+                        NgxDatatableModule,
+                        NgxValidateCoreModule,
+                        NgbPaginationModule,
+                        EllipsisModule,
+                    ],
+                    declarations: [...declarationsWithExports, HttpErrorWrapperComponent],
+                    exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
+                    providers: [DatePipe],
+                    entryComponents: [
+                        HttpErrorWrapperComponent,
+                        LoadingComponent,
+                        ToastContainerComponent,
+                        ConfirmationComponent,
+                    ],
+                }]
+        }] });
+class ThemeSharedModule {
+    static forRoot({ httpErrorConfig, validation = {} } = {}) {
+        return {
+            ngModule: ThemeSharedModule,
+            providers: [
+                {
+                    provide: APP_INITIALIZER,
+                    multi: true,
+                    deps: [ErrorHandler],
+                    useFactory: noop,
+                },
+                THEME_SHARED_ROUTE_PROVIDERS,
+                {
+                    provide: APP_INITIALIZER,
+                    multi: true,
+                    deps: [THEME_SHARED_APPEND_CONTENT],
+                    useFactory: noop,
+                },
+                { provide: HTTP_ERROR_CONFIG, useValue: httpErrorConfig },
+                {
+                    provide: 'HTTP_ERROR_CONFIG',
+                    useFactory: httpErrorConfigFactory,
+                    deps: [HTTP_ERROR_CONFIG],
+                },
+                { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
+                NG_BOOTSTRAP_CONFIG_PROVIDERS,
+                {
+                    provide: VALIDATION_BLUEPRINTS,
+                    useValue: Object.assign(Object.assign({}, DEFAULT_VALIDATION_BLUEPRINTS), (validation.blueprints || {})),
+                },
+                {
+                    provide: VALIDATION_MAP_ERRORS_FN,
+                    useValue: validation.mapErrorsFn || defaultMapErrorsFn,
+                },
+                {
+                    provide: VALIDATION_VALIDATE_ON_SUBMIT,
+                    useValue: validation.validateOnSubmit,
+                },
+                DocumentDirHandlerService,
+                {
+                    provide: APP_INITIALIZER,
+                    useFactory: noop,
+                    multi: true,
+                    deps: [DocumentDirHandlerService],
+                },
+            ],
+        };
+    }
+}
+ThemeSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ThemeSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ThemeSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ThemeSharedModule, imports: [BaseThemeSharedModule], exports: [BaseThemeSharedModule] });
+ThemeSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ThemeSharedModule, imports: [[BaseThemeSharedModule], BaseThemeSharedModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.13", ngImport: i0, type: ThemeSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [BaseThemeSharedModule],
+                    exports: [BaseThemeSharedModule],
+                }]
         }] });
 
-const { minLength, maxLength } = Validators;
-function getPasswordValidators(injector) {
-    const getRule = getRuleFn(injector);
-    const passwordRulesArr = [];
-    let requiredLength = 1;
-    if (getRule('RequireDigit') === 'true') {
-        passwordRulesArr.push('number');
-    }
-    if (getRule('RequireLowercase') === 'true') {
-        passwordRulesArr.push('small');
-    }
-    if (getRule('RequireUppercase') === 'true') {
-        passwordRulesArr.push('capital');
-    }
-    if (getRule('RequireNonAlphanumeric') === 'true') {
-        passwordRulesArr.push('special');
-    }
-    if (Number.isInteger(+getRule('RequiredLength'))) {
-        requiredLength = +getRule('RequiredLength');
-    }
-    return [validatePassword(passwordRulesArr), minLength(requiredLength), maxLength(128)];
-}
-function getRuleFn(injector) {
-    const configState = injector.get(ConfigStateService);
-    return (key) => {
-        const passwordRules = configState.getSettings('Identity.Password');
-        return (passwordRules[`Abp.Identity.Password.${key}`] || '').toLowerCase();
-    };
-}
-
-/*
- * Public API Surface of theme-shared
+const { minLength, maxLength } = Validators;
+function getPasswordValidators(injector) {
+    const getRule = getRuleFn(injector);
+    const passwordRulesArr = [];
+    let requiredLength = 1;
+    if (getRule('RequireDigit') === 'true') {
+        passwordRulesArr.push('number');
+    }
+    if (getRule('RequireLowercase') === 'true') {
+        passwordRulesArr.push('small');
+    }
+    if (getRule('RequireUppercase') === 'true') {
+        passwordRulesArr.push('capital');
+    }
+    if (getRule('RequireNonAlphanumeric') === 'true') {
+        passwordRulesArr.push('special');
+    }
+    if (Number.isInteger(+getRule('RequiredLength'))) {
+        requiredLength = +getRule('RequiredLength');
+    }
+    return [validatePassword(passwordRulesArr), minLength(requiredLength), maxLength(128)];
+}
+function getRuleFn(injector) {
+    const configState = injector.get(ConfigStateService);
+    return (key) => {
+        const passwordRules = configState.getSettings('Identity.Password');
+        return (passwordRules[`Abp.Identity.Password.${key}`] || '').toLowerCase();
+    };
+}
+
+/*
+ * Public API Surface of theme-shared
  */
 
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
 export { BaseThemeSharedModule, BreadcrumbComponent, BreadcrumbItemsComponent, ButtonComponent, Confirmation, ConfirmationComponent, ConfirmationService, DEFAULT_ERROR_LOCALIZATIONS, DEFAULT_ERROR_MESSAGES, DEFAULT_VALIDATION_BLUEPRINTS, DateParserFormatter, DocumentDirHandlerService, EllipsisDirective, EllipsisModule, ErrorHandler, HTTP_ERROR_CONFIG, HTTP_ERROR_HANDLER, HttpErrorWrapperComponent, LoaderBarComponent, LoadingComponent, LoadingDirective, ModalCloseDirective, ModalComponent, ModalRefService, NGX_DATATABLE_MESSAGES, NG_BOOTSTRAP_CONFIG_PROVIDERS, NavItem, NavItemsService, NgxDatatableDefaultDirective, NgxDatatableListDirective, PageAlertService, SUPPRESS_UNSAVED_CHANGES_WARNING, THEME_SHARED_APPEND_CONTENT, THEME_SHARED_ROUTE_PROVIDERS, ThemeSharedModule, ToastComponent, ToastContainerComponent, ToasterService, bounceIn, collapse, collapseLinearWithMargin, collapseWithMargin, collapseX, collapseY, collapseYWithMargin, configureNgBootstrap, configureRoutes, defaultNgxDatatableMessages, dialogAnimation, expandX, expandY, expandYWithMargin, fadeAnimation, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp, getPasswordValidators, httpErrorConfigFactory, slideFromBottom, toastInOut };