@abp/ng.theme.shared 4.4.1 → 5.0.0-beta.1-1

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

@@ -1,20 +1,20 @@
 import { animation, style, animate, keyframes, trigger, state, transition, useAnimation, query } from '@angular/animations';
-import { __rest } from 'tslib';
-import * as i1 from '@abp/ng.core';
-import { getRoutePath, SubscriptionService, RoutesService, RouterEvents, HttpWaitService, RouterWaitService, PROJECTION_STRATEGY, ContentProjectionService, uuid, LocalizationService, SortPipe, RestOccurError, AuthService, getLocaleDirection, LazyLoadService, LOADING_STRATEGY, InternalStore, DomInsertionService, CONTENT_STRATEGY, ConfigStateService, CoreModule, noop } from '@abp/ng.core';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, ChangeDetectorRef, EventEmitter, Renderer2, Input, Output, ViewChild, ElementRef, ViewEncapsulation, Injectable, InjectionToken, isDevMode, Optional, Inject, ContentChild, Directive, HostListener, ViewContainerRef, ComponentFactoryResolver, Injector, HostBinding, Host, Self, NgModule, ApplicationRef, RendererFactory2, APP_INITIALIZER, inject, LOCALE_ID } from '@angular/core';
-import { Router, ResolveEnd } from '@angular/router';
-import { startWith, map, debounceTime, filter, takeUntil, distinctUntilChanged, take, catchError, switchMap } from 'rxjs/operators';
-import { ReplaySubject, BehaviorSubject, fromEvent, Subscription, combineLatest, timer, Subject, throwError, Observable, of } from 'rxjs';
-import snq from 'snq';
-import { NgbModal, NgbInputDatepickerConfig, NgbTypeaheadConfig, NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { Component, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, ViewEncapsulation, Injectable, InjectionToken, Optional, Inject, ContentChild, Directive, HostListener, HostBinding, NgModule, ComponentFactoryResolver, RendererFactory2, ApplicationRef, APP_INITIALIZER, inject, LOCALE_ID, Injector } from '@angular/core';
+import * as i1 from '@angular/common';
 import { DOCUMENT, formatDate, DatePipe } from '@angular/common';
-import { ColumnMode, DatatableComponent, NgxDatatableModule } from '@swimlane/ngx-datatable';
-import clone from 'just-clone';
+import * as i1$1 from '@angular/router';
+import { ResolveEnd } from '@angular/router';
+import * as i2 from '@abp/ng.core';
+import { getRoutePath, SubscriptionService, PROJECTION_STRATEGY, uuid, HttpErrorReporterService, RouterEvents, AuthService, LocalizationService, getLocaleDirection, LazyLoadService, LOADING_STRATEGY, RoutesService, InternalStore, DomInsertionService, CONTENT_STRATEGY, CoreModule, noop, ConfigStateService } from '@abp/ng.core';
+import { __rest } from 'tslib';
+import { startWith, map, debounceTime, filter, takeUntil, distinctUntilChanged, take, catchError, switchMap } from 'rxjs/operators';
+import { fromEvent, Subscription, combineLatest, timer, ReplaySubject, Subject, throwError, Observable, of, BehaviorSubject } from 'rxjs';
+import * as i3 from '@ng-bootstrap/ng-bootstrap';
+import { NgbInputDatepickerConfig, NgbTypeaheadConfig, NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import * as i1$2 from '@swimlane/ngx-datatable';
+import { ColumnMode, NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { HttpErrorResponse } from '@angular/common/http';
-import * as i1$1 from '@ngxs/store';
-import { ofActionSuccessful, Actions } from '@ngxs/store';
 import { NgxValidateCoreModule, VALIDATION_BLUEPRINTS, VALIDATION_MAP_ERRORS_FN, defaultMapErrorsFn, VALIDATION_VALIDATE_ON_SUBMIT, validatePassword } from '@ngx-validate/core';
 import { Validators } from '@angular/forms';
 
@@ -23,15 +23,15 @@ const bounceIn = animation([
     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 })
-    ]))
+        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%)'
-    }
+        transform: 'translate(-50%, -50%)',
+    },
 });
 
 const collapseY = animation([
@@ -148,6 +148,23 @@ const toastInOut = trigger('toastInOut', [
     ]),
 ]);
 
+class BreadcrumbItemsComponent {
+    constructor() {
+        this.items = [];
+    }
+}
+BreadcrumbItemsComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: BreadcrumbItemsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+BreadcrumbItemsComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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.6", 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;
@@ -158,15 +175,13 @@ class BreadcrumbComponent {
         this.segments = [];
     }
     ngOnInit() {
-        this.subscription.addOne(this.routerEvents.getNavigationEvents('End').pipe(
-        // tslint:disable-next-line:deprecation
-        startWith(null), map(() => this.routes.search({ path: getRoutePath(this.router) }))), route => {
+        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 } = node, segment = __rest(node, ["parent", "children", "isLeaf"]);
+                    const { parent, children, isLeaf, path } = node, segment = __rest(node, ["parent", "children", "isLeaf", "path"]);
                     if (!isAdministration(segment))
                         this.segments.unshift(segment);
                 }
@@ -175,21 +190,17 @@ class BreadcrumbComponent {
         });
     }
 }
-BreadcrumbComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-breadcrumb',
-                template: "<ol class=\"breadcrumb\" *ngIf=\"segments.length\">\n  <li class=\"breadcrumb-item\">\n    <a routerLink=\"/\"><i class=\"fa fa-home\"></i> </a>\n  </li>\n  <li\n    *ngFor=\"let segment of segments; let last = last\"\n    class=\"breadcrumb-item\"\n    [class.active]=\"last\"\n    aria-current=\"page\"\n  >\n    {{ segment.name | abpLocalization }}\n  </li>\n</ol>\n",
-                changeDetection: ChangeDetectionStrategy.OnPush,
-                providers: [SubscriptionService]
-            },] }
-];
-BreadcrumbComponent.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: Router },
-    { type: RoutesService },
-    { type: SubscriptionService },
-    { type: RouterEvents }
-];
+BreadcrumbComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", 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.6", 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.6", 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 */;
 }
@@ -202,11 +213,9 @@ class ButtonComponent {
         this.buttonType = 'button';
         this.loading = false;
         this.disabled = false;
-        // tslint:disable
         this.click = new EventEmitter();
         this.focus = new EventEmitter();
         this.blur = new EventEmitter();
-        // tslint:enable
         this.abpClick = new EventEmitter();
         this.abpFocus = new EventEmitter();
         this.abpBlur = new EventEmitter();
@@ -222,10 +231,8 @@ class ButtonComponent {
         }
     }
 }
-ButtonComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-button',
-                template: `
+ButtonComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ButtonComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+ButtonComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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
       [id]="buttonId"
@@ -238,157 +245,56 @@ ButtonComponent.decorators = [
     >
       <i [ngClass]="icon" class="mr-1"></i><ng-content></ng-content>
     </button>
-  `
-            },] }
-];
-ButtonComponent.ctorParameters = () => [
-    { type: Renderer2 }
-];
-ButtonComponent.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 },] }]
-};
-
-function getRandomBackgroundColor(count) {
-    const colors = [];
-    for (let i = 0; i < count; i++) {
-        const r = ((i + 5) * (i + 5) * 474) % 255;
-        const g = ((i + 5) * (i + 5) * 1600) % 255;
-        const b = ((i + 5) * (i + 5) * 84065) % 255;
-        colors.push('rgba(' + r + ', ' + g + ', ' + b + ', 0.7)');
-    }
-    return colors;
-}
-const chartJsLoaded$ = new ReplaySubject(1);
-
-class ChartComponent {
-    constructor(el, cdRef) {
-        this.el = el;
-        this.cdRef = cdRef;
-        this.options = {};
-        this.plugins = [];
-        this.responsive = true;
-        // tslint:disable-next-line: no-output-on-prefix
-        this.onDataSelect = new EventEmitter();
-        this.initialized = new BehaviorSubject(this);
-        this.onCanvasClick = event => {
-            if (this.chart) {
-                const element = this.chart.getElementAtEvent(event);
-                const dataset = this.chart.getDatasetAtEvent(event);
-                if (element && element.length && dataset) {
-                    this.onDataSelect.emit({
-                        originalEvent: event,
-                        element: element[0],
-                        dataset,
-                    });
-                }
-            }
-        };
-        this.initChart = () => {
-            const opts = this.options || {};
-            opts.responsive = this.responsive;
-            // allows chart to resize in responsive mode
-            if (opts.responsive && (this.height || this.width)) {
-                opts.maintainAspectRatio = false;
-            }
-            this.chart = new Chart(this.canvas, {
-                type: this.type,
-                data: this.data,
-                options: this.options,
-                plugins: this.plugins,
-            });
-            this.cdRef.detectChanges();
-        };
-        this.generateLegend = () => {
-            if (this.chart) {
-                return this.chart.generateLegend();
-            }
-        };
-        this.refresh = () => {
-            if (this.chart) {
-                this.chart.update();
-                this.cdRef.detectChanges();
-            }
-        };
-        this.reinit = () => {
-            if (this.chart) {
-                this.chart.destroy();
-                this.initChart();
-            }
-        };
-    }
-    get data() {
-        return this._data;
-    }
-    set data(val) {
-        this._data = val;
-        this.reinit();
-    }
-    get canvas() {
-        return this.el.nativeElement.children[0].children[0];
-    }
-    get base64Image() {
-        return this.chart.toBase64Image();
-    }
-    ngAfterViewInit() {
-        chartJsLoaded$.subscribe(() => {
-            this.testChartJs();
-            this.initChart();
-            this._initialized = true;
-        });
-    }
-    testChartJs() {
-        try {
-            // tslint:disable-next-line: no-unused-expression
-            Chart;
-        }
-        catch (error) {
-            throw new Error(`Chart is not found. Import the Chart from app.module like shown below:
-      import('chart.js');
-      `);
-        }
-    }
-    ngOnDestroy() {
-        if (this.chart) {
-            this.chart.destroy();
-            this._initialized = false;
-            this.chart = null;
-        }
-    }
-}
-ChartComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-chart',
-                template: "<div\n  style=\"position:relative\"\n  [style.width]=\"responsive && !width ? null : width\"\n  [style.height]=\"responsive && !height ? null : height\"\n>\n  <canvas\n    [attr.width]=\"responsive && !width ? null : width\"\n    [attr.height]=\"responsive && !height ? null : height\"\n    (click)=\"onCanvasClick($event)\"\n  ></canvas>\n</div>\n"
-            },] }
-];
-ChartComponent.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ChangeDetectorRef }
-];
-ChartComponent.propDecorators = {
-    type: [{ type: Input }],
-    options: [{ type: Input }],
-    plugins: [{ type: Input }],
-    width: [{ type: Input }],
-    height: [{ type: Input }],
-    responsive: [{ type: Input }],
-    onDataSelect: [{ type: Output }],
-    initialized: [{ type: Output }],
-    data: [{ type: Input }]
-};
+  `, 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.6", ngImport: i0, type: ButtonComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-button',
+                    template: `
+    <button
+      #button
+      [id]="buttonId"
+      [attr.type]="buttonType"
+      [ngClass]="buttonClass"
+      [disabled]="loading || disabled"
+      (click.stop)="click.next($event); abpClick.next($event)"
+      (focus)="focus.next($event); abpFocus.next($event)"
+      (blur)="blur.next($event); abpBlur.next($event)"
+    >
+      <i [ngClass]="icon" class="mr-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 }]
+            }] } });
 
 var Confirmation;
 (function (Confirmation) {
@@ -424,13 +330,16 @@ class ConfirmationComponent {
         }
     }
 }
-ConfirmationComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-confirmation',
-                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}"]
-            },] }
-];
+ConfirmationComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ConfirmationComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ConfirmationComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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.6", ngImport: i0, type: ConfirmationComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'abp-confirmation',
+                    templateUrl: './confirmation.component.html',
+                    styleUrls: ['./confirmation.component.scss'],
+                }]
+        }] });
 
 class HttpErrorWrapperComponent {
     constructor(subscription) {
@@ -446,9 +355,9 @@ class HttpErrorWrapperComponent {
         return this.status ? `[${this.status}]` : '';
     }
     ngOnInit() {
+        var _a;
         this.backgroundColor =
-            snq(() => window.getComputedStyle(document.body).getPropertyValue('background-color')) ||
-                '#fff';
+            ((_a = window.getComputedStyle(document.body)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('background-color')) || '#fff';
     }
     ngAfterViewInit() {
         if (this.customComponent) {
@@ -464,26 +373,28 @@ class HttpErrorWrapperComponent {
         const keyup$ = fromEvent(document, 'keyup').pipe(debounceTime(150), filter((key) => key && key.key === 'Escape'));
         this.subscription.addOne(keyup$, () => this.destroy());
     }
-    ngOnDestroy() { }
+    ngOnDestroy() {
+        this.destroy();
+    }
     destroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
 }
-HttpErrorWrapperComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-http-error-wrapper',
-                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 mr-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",
-                providers: [SubscriptionService],
-                styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}"]
-            },] }
-];
-HttpErrorWrapperComponent.ctorParameters = () => [
-    { type: SubscriptionService }
-];
-HttpErrorWrapperComponent.propDecorators = {
-    containerRef: [{ type: ViewChild, args: ['container', { static: false },] }]
-};
+HttpErrorWrapperComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: HttpErrorWrapperComponent, deps: [{ token: i2.SubscriptionService }], target: i0.ɵɵFactoryTarget.Component });
+HttpErrorWrapperComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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 mr-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.6", 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) {
@@ -561,10 +472,25 @@ class LoaderBarComponent {
         this.timer = timer(this.stopDelay).subscribe(this.clearProgress);
     }
 }
-LoaderBarComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-loader-bar',
-                template: `
+LoaderBarComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", 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.6", 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
+        class="abp-progress"
+        [class.progressing]="progressLevel"
+        [style.width.vw]="progressLevel"
+        [ngStyle]="{
+          'background-color': color,
+          'box-shadow': boxShadow
+        }"
+      ></div>
+    </div>
+  `, isInline: true, styles: [".abp-loader-bar{left:0;opacity:0;position:fixed;top:0;transition:opacity .4s linear .4s;z-index:99999}.abp-loader-bar.is-loading{opacity:1;transition:none}.abp-loader-bar .abp-progress{height:3px;left:0;position:fixed;top:0}.abp-loader-bar .abp-progress.progressing{transition:width .4s ease}\n"], 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.6", 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
         class="abp-progress"
@@ -577,37 +503,37 @@ LoaderBarComponent.decorators = [
       ></div>
     </div>
   `,
-                providers: [SubscriptionService],
-                styles: [".abp-loader-bar{left:0;opacity:0;position:fixed;top:0;transition:opacity .4s linear .4s;z-index:99999}.abp-loader-bar.is-loading{opacity:1;transition:none}.abp-loader-bar .abp-progress{height:3px;left:0;position:fixed;top:0}.abp-loader-bar .abp-progress.progressing{transition:width .4s ease}"]
-            },] }
-];
-LoaderBarComponent.ctorParameters = () => [
-    { type: Router },
-    { type: ChangeDetectorRef },
-    { type: SubscriptionService },
-    { type: HttpWaitService },
-    { type: RouterWaitService }
-];
-LoaderBarComponent.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 {
-    constructor() { }
-    ngOnInit() { }
 }
-LoadingComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-loading',
-                template: `
+LoadingComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: LoadingComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+LoadingComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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.6", 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;
         width: 100%;
@@ -628,10 +554,10 @@ LoadingComponent.decorators = [
         -webkit-transform: translateX(-50%) translateY(-50%);
         transform: translateX(-50%) translateY(-50%);
       }
-    `]
-            },] }
-];
-LoadingComponent.ctorParameters = () => [];
+    `,
+                    ],
+                }]
+        }] });
 
 class ConfirmationService {
     constructor(contentProjectionService) {
@@ -686,15 +612,13 @@ class ConfirmationService {
         });
     }
 }
-ConfirmationService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ConfirmationService_Factory() { return new ConfirmationService(i0.ɵɵinject(i1.ContentProjectionService)); }, token: ConfirmationService, providedIn: "root" });
-ConfirmationService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-ConfirmationService.ctorParameters = () => [
-    { type: ContentProjectionService }
-];
+ConfirmationService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ConfirmationService, deps: [{ token: i2.ContentProjectionService }], target: i0.ɵɵFactoryTarget.Injectable });
+ConfirmationService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ConfirmationService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ConfirmationService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i2.ContentProjectionService }]; } });
 
-// TODO: Should be documented
 const SUPPRESS_UNSAVED_CHANGES_WARNING = new InjectionToken('SUPPRESS_UNSAVED_CHANGES_WARNING');
 
 class ModalRefService {
@@ -714,10 +638,12 @@ class ModalRefService {
         this.modalRefs.forEach(modal => modal.dismiss(mode));
     }
 }
-ModalRefService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ModalRefService_Factory() { return new ModalRefService(); }, token: ModalRefService, providedIn: "root" });
-ModalRefService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
+ModalRefService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ModalRefService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+ModalRefService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ModalRefService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ModalRefService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 class ModalComponent {
     constructor(confirmationService, subscription, suppressUnsavedChangesWarningToken, modal, modalRefService) {
@@ -726,18 +652,6 @@ class ModalComponent {
         this.suppressUnsavedChangesWarningToken = suppressUnsavedChangesWarningToken;
         this.modal = modal;
         this.modalRefService = modalRefService;
-        /**
-         * @deprecated Use centered property of options input instead. To be deleted in v5.0.
-         */
-        this.centered = false;
-        /**
-         * @deprecated Use windowClass property of options input instead. To be deleted in v5.0.
-         */
-        this.modalClass = '';
-        /**
-         * @deprecated Use size property of options input instead. To be deleted in v5.0.
-         */
-        this.size = 'lg';
         this.options = {};
         this.suppressUnsavedChangesWarning = this.suppressUnsavedChangesWarningToken;
         this.visibleChange = new EventEmitter();
@@ -804,14 +718,12 @@ class ModalComponent {
             return;
         }
         setTimeout(() => this.listen(), 0);
-        this.modalRef = this.modal.open(this.modalContent, Object.assign(Object.assign({ 
-            // TODO: set size to 'lg' when removed the size variable
-            size: this.size, centered: this.centered, keyboard: false, scrollable: true, beforeDismiss: () => {
+        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.modalClass} ${this.options.windowClass || ''} ${this.modalIdentifier}` }));
+            } }, this.options), { windowClass: `${this.options.windowClass || ''} ${this.modalIdentifier}` }));
         this.appear.emit();
     }
     ngOnDestroy() {
@@ -854,56 +766,56 @@ class ModalComponent {
                 delete event.returnValue;
             }
         });
-        setTimeout(() => {
-            if (!this.abpClose)
-                return;
-            this.warnForDeprecatedClose();
-            fromEvent(this.abpClose.nativeElement, 'click')
-                .pipe(takeUntil(this.destroy$))
-                .subscribe(() => this.close());
-        }, 0);
         this.init.emit();
     }
-    warnForDeprecatedClose() {
-        if (isDevMode()) {
-            console.warn('Please use abpClose directive instead of #abpClose template variable. #abpClose will be removed in v5.0');
-        }
-    }
 }
-ModalComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-modal',
-                template: "<ng-content></ng-content>\n\n<ng-template #modalContent let-modal>\n  <div 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=\"close\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\"\n    >\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <div 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",
-                providers: [SubscriptionService],
-                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}"]
-            },] }
-];
-ModalComponent.ctorParameters = () => [
-    { type: ConfirmationService },
-    { type: SubscriptionService },
-    { type: Boolean, decorators: [{ type: Optional }, { type: Inject, args: [SUPPRESS_UNSAVED_CHANGES_WARNING,] }] },
-    { type: NgbModal },
-    { type: ModalRefService }
-];
-ModalComponent.propDecorators = {
-    centered: [{ type: Input }],
-    modalClass: [{ type: Input }],
-    size: [{ type: Input }],
-    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 },] }],
-    abpClose: [{ type: ContentChild, args: ['abpClose', { static: false, read: ElementRef },] }],
-    visibleChange: [{ type: Output }],
-    init: [{ type: Output }],
-    appear: [{ type: Output }],
-    disappear: [{ type: Output }]
-};
+ModalComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", 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.6", 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 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=\"close\"\n      aria-label=\"Close\"\n      (click)=\"modal.dismiss()\"\n    >\n      <span aria-hidden=\"true\">&times;</span>\n    </button>\n  </div>\n  <div 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.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", 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) {
@@ -917,310 +829,21 @@ class ModalCloseDirective {
         (_a = this.modal) === null || _a === void 0 ? void 0 : _a.close();
     }
 }
-ModalCloseDirective.decorators = [
-    { type: Directive, args: [{ selector: '[abpClose]' },] }
-];
-ModalCloseDirective.ctorParameters = () => [
-    { type: ModalComponent, decorators: [{ type: Optional }] }
-];
-ModalCloseDirective.propDecorators = {
-    onClick: [{ type: HostListener, args: ['click',] }]
-};
-
-/**
- * @deprecated To be deleted in v5.0. Use ngx-datatale instead.
- */
-class SortOrderIconComponent {
-    constructor() {
-        this.orderChange = new EventEmitter();
-        this.selectedSortKeyChange = new EventEmitter();
-    }
-    set selectedSortKey(value) {
-        this._selectedSortKey = value;
-        this.selectedSortKeyChange.emit(value);
-    }
-    get selectedSortKey() {
-        return this._selectedSortKey;
-    }
-    set order(value) {
-        this._order = value;
-        this.orderChange.emit(value);
-    }
-    get order() {
-        return this._order;
-    }
-    get icon() {
-        if (this.selectedSortKey === this.sortKey)
-            return `sorting_${this.order}`;
-        else
-            return 'sorting';
-    }
-    sort(key) {
-        this.selectedSortKey = key;
-        switch (this.order) {
-            case '':
-                this.order = 'asc';
-                this.orderChange.emit('asc');
-                break;
-            case 'asc':
-                this.order = 'desc';
-                this.orderChange.emit('desc');
-                break;
-            case 'desc':
-                this.order = '';
-                this.orderChange.emit('');
-                break;
-        }
-    }
-}
-SortOrderIconComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-sort-order-icon',
-                template: "<div class=\"float-right {{ iconClass }}\">\n  <span class=\"{{ icon }}\"></span>\n</div>\n"
-            },] }
-];
-SortOrderIconComponent.propDecorators = {
-    sortKey: [{ type: Input }],
-    selectedSortKey: [{ type: Input }],
-    order: [{ type: Input }],
-    orderChange: [{ type: Output }],
-    selectedSortKeyChange: [{ type: Output }],
-    iconClass: [{ type: Input }]
-};
-
-class TableEmptyMessageComponent {
-    constructor() {
-        this.colspan = 2;
-        this.localizationResource = 'AbpAccount';
-        this.localizationProp = 'NoDataAvailableInDatatable';
-    }
-    get emptyMessage() {
-        return this.message || `${this.localizationResource}::${this.localizationProp}`;
-    }
-}
-TableEmptyMessageComponent.decorators = [
-    { type: Component, args: [{
-                // tslint:disable-next-line: component-selector
-                selector: '[abp-table-empty-message]',
-                template: `
-    <td class="text-center" [attr.colspan]="colspan">
-      {{ emptyMessage | abpLocalization }}
-    </td>
-  `
-            },] }
-];
-TableEmptyMessageComponent.propDecorators = {
-    colspan: [{ type: Input }],
-    message: [{ type: Input }],
-    localizationResource: [{ type: Input }],
-    localizationProp: [{ type: Input }]
-};
-
-/**
- *
- * @deprecated To be deleted in v5.0. Use ngx-datatale instead.
- */
-class TableComponent {
-    constructor() {
-        this.bodyScrollLeft = 0;
-        this.page = 1;
-        this.trackingProp = 'id';
-        this.emptyMessage = 'AbpAccount::NoDataAvailableInDatatable';
-        this.pageChange = new EventEmitter();
-        this.trackByFn = (_, value) => {
-            return typeof value === 'object' ? value[this.trackingProp] || value : value;
-        };
-    }
-    get totalRecords() {
-        return this._totalRecords || this.value.length;
-    }
-    set totalRecords(newValue) {
-        if (newValue < 0)
-            this._totalRecords = 0;
-        this._totalRecords = newValue;
-    }
-    get totalPages() {
-        if (!this.rows) {
-            return;
-        }
-        return Math.ceil(this.totalRecords / this.rows);
-    }
-    get slicedValue() {
-        if (!this.rows || this.rows >= this.value.length) {
-            return this.value;
-        }
-        const start = (this.page - 1) * this.rows;
-        return this.value.slice(start, start + this.rows);
-    }
-    ngOnInit() {
-        this.marginCalculator = document.body.dir === 'rtl' ? rtlCalculator : ltrCalculator;
-    }
-}
-TableComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-table',
-                template: "<div #wrapper class=\"ui-table ui-widget\">\n  <div class=\"ui-table-wrapper\">\n    <ng-container\n      *ngTemplateOutlet=\"scrollable ? scrollableTemplate : defaultTemplate\"\n    ></ng-container>\n    <div class=\"pagination-wrapper\">\n      <ngb-pagination\n        [class.op-0]=\"!totalPages\"\n        [collectionSize]=\"totalPages\"\n        [pageSize]=\"1\"\n        [page]=\"page\"\n        (pageChange)=\"pageChange.emit($event)\"\n        [maxSize]=\"3\"\n        [rotate]=\"true\"\n      ></ngb-pagination>\n    </div>\n  </div>\n</div>\n\n<ng-template #scrollableTemplate>\n  <div class=\"ui-table-scrollable-wrapper\">\n    <div class=\"ui-table-scrollable-view\"></div>\n    <div class=\"ui-table-scrollable-header ui-widget-header\">\n      <div #header class=\"ui-table-scrollable-header-box\">\n        <table class=\"ui-table-scrollable-header-table\">\n          <ng-container *ngTemplateOutlet=\"colGroup\"></ng-container>\n          <ng-container *ngTemplateOutlet=\"head\"></ng-container>\n          <tbody></tbody>\n        </table>\n      </div>\n    </div>\n    <div\n      #scrollableBody\n      (scroll)=\"header.style.margin = marginCalculator(scrollableBody)\"\n      class=\"ui-table-scrollable-body\"\n      [style.max-height]=\"scrollHeight\"\n    >\n      <table class=\"ui-table-scrollable-body-table\">\n        <ng-container *ngTemplateOutlet=\"colGroup\"></ng-container>\n        <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n      </table>\n    </div>\n  </div>\n</ng-template>\n\n<ng-template #defaultTemplate>\n  <table>\n    <ng-container *ngTemplateOutlet=\"colGroup\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"head\"></ng-container>\n    <ng-container *ngTemplateOutlet=\"body\"></ng-container>\n  </table>\n</ng-template>\n\n<ng-template #colGroup>\n  <ng-container *ngTemplateOutlet=\"colgroupTemplate\"></ng-container>\n</ng-template>\n\n<ng-template #head>\n  <thead class=\"ui-table-thead\">\n    <ng-container *ngTemplateOutlet=\"headerTemplate\"></ng-container>\n  </thead>\n</ng-template>\n\n<ng-template #body>\n  <tbody class=\"ui-table-tbody\" *ngIf=\"value && value.length; else emptyTemplate\">\n    <ng-template\n      #bodyTemplateWrapper\n      *ngFor=\"let val of slicedValue; let index = index; trackBy: trackByFn\"\n      [ngTemplateOutlet]=\"bodyTemplate\"\n      [ngTemplateOutletContext]=\"{ $implicit: val, rowIndex: index }\"\n    ></ng-template>\n  </tbody>\n</ng-template>\n\n<ng-template #emptyTemplate>\n  <caption class=\"ui-table-empty\">\n    {{\n      emptyMessage | abpLocalization\n    }}\n  </caption>\n</ng-template>\n",
-                encapsulation: ViewEncapsulation.None,
-                styles: [".ui-table{position:relative}.ui-table .ui-table-tbody>tr:hover,.ui-table .ui-table-tbody>tr:nth-child(2n):hover{filter:brightness(90%)}.ui-table .ui-table-empty{padding:20px 0;text-align:center;border:1px solid #e0e0e0;border-top:0 solid #e0e0e0}.ui-table .ui-table-caption,.ui-table .ui-table-summary{background-color:#f4f4f4;color:#333;border:1px solid #c8c8c8;padding:.571em 1em}.ui-table .ui-table-caption,.ui-table .ui-table-summary{font-weight:700}.ui-table .ui-table-thead>tr>th{padding:.571em .857em;border:1px solid #c8c8c8;font-weight:700;color:#333;background-color:#f4f4f4}.ui-table .ui-table-tbody>tr>td{padding:.571em .857em}.ui-table .ui-table-tfoot>tr>td{padding:.571em .857em;border:1px solid #c8c8c8;font-weight:700;color:#333;background-color:#fff}.ui-table .ui-sortable-column{transition:box-shadow .2s}.ui-table .ui-sortable-column:focus{outline:0 none;outline-offset:0;box-shadow:inset 0 0 0 .2em #8dcdff}.ui-table .ui-sortable-column .ui-sortable-column-icon{color:#848484}.ui-table .ui-sortable-column:not(.ui-state-highlight):hover{background-color:#e0e0e0;color:#333}.ui-table .ui-sortable-column:not(.ui-state-highlight):hover .ui-sortable-column-icon{color:#333}.ui-table .ui-sortable-column.ui-state-highlight{background-color:#007ad9;color:#fff}.ui-table .ui-sortable-column.ui-state-highlight .ui-sortable-column-icon{color:#fff}.ui-table .ui-editable-column input{font-size:14px;font-family:Open Sans,Helvetica Neue,sans-serif}.ui-table .ui-editable-column input:focus{outline:1px solid #007ad9;outline-offset:2px}.ui-table .ui-table-tbody>tr{background-color:#fff;color:#333}.ui-table .ui-table-tbody>tr>td{background-color:inherit;border:1px solid #c8c8c8}.ui-table .ui-table-tbody>tr.ui-state-highlight{background-color:#007ad9;color:#fff}.ui-table .ui-table-tbody>tr.ui-state-highlight a{color:#fff}.ui-table .ui-table-tbody>tr.ui-contextmenu-selected{background-color:#007ad9;color:#fff}.ui-table .ui-table-tbody>tr.ui-table-dragpoint-top>td{box-shadow:inset 0 2px 0 0 #007ad9}.ui-table .ui-table-tbody>tr.ui-table-dragpoint-bottom>td{box-shadow:inset 0 -2px 0 0 #007ad9}.ui-table .ui-table-tbody>tr:nth-child(2n){background-color:#f9f9f9}.ui-table .ui-table-tbody>tr:nth-child(2n).ui-state-highlight{background-color:#007ad9;color:#fff}.ui-table .ui-table-tbody>tr:nth-child(2n).ui-state-highlight a{color:#fff}.ui-table .ui-table-tbody>tr:nth-child(2n).ui-contextmenu-selected{background-color:#007ad9;color:#fff}.ui-table.ui-table-hoverable-rows .ui-table-tbody>tr.ui-selectable-row:not(.ui-state-highlight):not(.ui-contextmenu-selected):hover{cursor:pointer;background-color:#eaeaea;color:#333}.ui-table .ui-column-resizer-helper{background-color:#007ad9}@media screen and (max-width:40em){.ui-table.ui-table-responsive .ui-table-tbody>tr>td{border:0}}.ui-table table{border-collapse:collapse;width:100%;table-layout:fixed}.ui-table .ui-table-tbody>tr>td,.ui-table .ui-table-tfoot>tr>td,.ui-table .ui-table-thead>tr>th{padding:.571em .857em}.ui-table .ui-sortable-column{cursor:pointer}.ui-table p-sorticon{vertical-align:middle}.ui-table .ui-table-auto-layout>.ui-table-wrapper{overflow-x:auto}.ui-table .ui-table-auto-layout>.ui-table-wrapper>table{table-layout:auto}.ui-table .ui-table-caption,.ui-table .ui-table-summary{padding:.25em .5em;text-align:center;font-weight:700}.ui-table .ui-table-caption{border-bottom:0}.ui-table .ui-table-summary{border-top:0}.ui-table .ui-table-scrollable-wrapper{position:relative}.ui-table .ui-table-scrollable-footer,.ui-table .ui-table-scrollable-header{overflow:hidden;border:0}.ui-table .ui-table-scrollable-body{overflow:auto;position:relative}.ui-table .ui-table-virtual-table{position:absolute}.ui-table .ui-table-loading-virtual-table{display:none}.ui-table .ui-table-frozen-view .ui-table-scrollable-body{overflow:hidden}.ui-table .ui-table-frozen-view>.ui-table-scrollable-body>table>.ui-table-tbody>tr>td:last-child{border-right:0}.ui-table .ui-table-unfrozen-view{position:absolute;top:0}.ui-table .ui-table-resizable>.ui-table-wrapper{overflow-x:auto}.ui-table .ui-table-resizable .ui-table-tbody>tr>td,.ui-table .ui-table-resizable .ui-table-tfoot>tr>td,.ui-table .ui-table-resizable .ui-table-thead>tr>th{overflow:hidden}.ui-table .ui-table-resizable .ui-resizable-column{background-clip:padding-box;position:relative}.ui-table .ui-table-resizable-fit .ui-resizable-column:last-child .ui-column-resizer{display:none}.ui-table .ui-column-resizer{display:block;position:absolute!important;top:0;right:0;margin:0;width:.5em;height:100%;padding:0;cursor:col-resize;border:1px solid transparent}.ui-table .ui-column-resizer-helper{width:1px;position:absolute;z-index:10;display:none}.ui-table .ui-table-tbody>tr>td.ui-editing-cell{padding:0}.ui-table .ui-table-tbody>tr>td.ui-editing-cell p-celleditor>*{width:100%}.ui-table .ui-table-reorder-indicator-down,.ui-table .ui-table-reorder-indicator-up{position:absolute;display:none}.ui-table .ui-table-responsive .ui-table-tbody>tr>td .ui-column-title{display:none}@media screen and (max-width:40em){.ui-table .ui-table-responsive .ui-table-tfoot>tr>td,.ui-table .ui-table-responsive .ui-table-thead>tr>th,.ui-table .ui-table-responsive colgroup{display:none!important}.ui-table .ui-table-responsive .ui-table-tbody>tr>td{text-align:left;display:block;border:0;width:100%!important;box-sizing:border-box;float:left;clear:left}.ui-table .ui-table-responsive .ui-table-tbody>tr>td .ui-column-title{padding:.4em;min-width:30%;display:inline-block;margin:-.4em 1em -.4em -.4em;font-weight:700}}.ui-table .ui-widget{font-family:Open Sans,Helvetica Neue,sans-serif;font-size:14px;text-decoration:none}.ui-table .page-item.disabled .page-link,.ui-table .page-link{background-color:transparent;border:none}.ui-table .page-item.disabled .page-link{box-shadow:none}.ui-table .pagination{margin-bottom:0}.ui-table .pagination-wrapper{display:flex;justify-content:center;border-top:0;padding:0}.ui-table .op-0{opacity:0}"]
-            },] }
-];
-TableComponent.propDecorators = {
-    value: [{ type: Input }],
-    headerTemplate: [{ type: Input }],
-    bodyTemplate: [{ type: Input }],
-    colgroupTemplate: [{ type: Input }],
-    scrollHeight: [{ type: Input }],
-    scrollable: [{ type: Input }],
-    rows: [{ type: Input }],
-    page: [{ type: Input }],
-    trackingProp: [{ type: Input }],
-    emptyMessage: [{ type: Input }],
-    pageChange: [{ type: Output }],
-    wrapperRef: [{ type: ViewChild, args: ['wrapper', { read: ElementRef },] }],
-    totalRecords: [{ type: Input }]
-};
-function ltrCalculator(div) {
-    return `0 auto 0 -${div.scrollLeft}px`;
-}
-function rtlCalculator(div) {
-    return `0 ${-(div.scrollWidth - div.clientWidth - div.scrollLeft)}px 0 auto`;
-}
-
-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) {
-        if (!toast)
-            return null;
-        return toast.options.id;
-    }
-}
-ToastContainerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-toast-container',
-                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 [toast]=\"toast\" *ngFor=\"let toast of toasts; trackBy: trackByFunc\"></abp-toast>\n</div>\n",
-                animations: [toastInOut],
-                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}"]
-            },] }
-];
-ToastContainerComponent.propDecorators = {
-    top: [{ type: Input }],
-    right: [{ type: Input }],
-    bottom: [{ type: Input }],
-    left: [{ type: Input }],
-    toastKey: [{ type: Input }]
-};
-
-class ToasterService {
-    constructor(contentProjectionService) {
-        this.contentProjectionService = contentProjectionService;
-        this.toasts$ = new ReplaySubject(1);
-        this.lastId = -1;
-        this.toasts = [];
-    }
-    setContainer() {
-        this.containerComponentRef = this.contentProjectionService.projectContent(PROJECTION_STRATEGY.AppendComponentToBody(ToastContainerComponent, { toasts$: this.toasts$ }));
-        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 = null, 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 the toast with given id.
-     * @param id ID of the toast to be removed.
-     */
-    remove(id) {
-        this.toasts = this.toasts.filter(toast => snq(() => toast.options.id) !== id);
-        this.toasts$.next(this.toasts);
-    }
-    /**
-     * Removes all open toasts at once.
-     */
-    clear(containerKey) {
-        this.toasts = !containerKey
-            ? []
-            : this.toasts.filter(toast => snq(() => toast.options.containerKey) !== containerKey);
-        this.toasts$.next(this.toasts);
-    }
-}
-ToasterService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ToasterService_Factory() { return new ToasterService(i0.ɵɵinject(i1.ContentProjectionService)); }, token: ToasterService, providedIn: "root" });
-ToasterService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-ToasterService.ctorParameters = () => [
-    { type: ContentProjectionService }
-];
+ModalCloseDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ModalCloseDirective, deps: [{ token: ModalComponent, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
+ModalCloseDirective.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: ModalCloseDirective, selector: "[abpClose]", host: { listeners: { "click": "onClick()" } }, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", 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(toasterService) {
-        this.toasterService = toasterService;
+    constructor() {
+        this.remove = new EventEmitter();
     }
     get severityClass() {
         if (!this.toast || !this.toast.severity)
@@ -1242,15 +865,16 @@ class ToastComponent {
         }
     }
     ngOnInit() {
-        if (snq(() => this.toast.options.sticky))
+        const { sticky, life } = this.toast.options || {};
+        if (sticky)
             return;
-        const timeout = snq(() => this.toast.options.life) || 5000;
+        const timeout = life || 5000;
         setTimeout(() => {
             this.close();
         }, timeout);
     }
     close() {
-        this.toasterService.remove(this.toast.options.id);
+        this.remove.emit(this.toast.options.id);
     }
     tap() {
         var _a;
@@ -1258,19 +882,63 @@ class ToastComponent {
             this.close();
     }
 }
-ToastComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-toast',
-                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;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 rgba(0,0,0,.4);opacity:1}.abp-toast:hover{border:2px solid #e3e3e3;background-color:#e3e3e3;box-shadow:0 0 15px -5px rgba(0,0,0,.4)}.abp-toast.abp-toast-success{border:2px solid #51a351;background-color:#51a351;color:#fff;box-shadow:0 0 10px -5px rgba(0,0,0,.4)}.abp-toast.abp-toast-success:hover{border:2px solid #499249;background-color:#499249;box-shadow:0 0 15px -5px rgba(0,0,0,.4)}.abp-toast.abp-toast-info{border:2px solid #2f96b4;background-color:#2f96b4;color:#fff;box-shadow:0 0 10px -5px rgba(0,0,0,.4)}.abp-toast.abp-toast-info:hover{border:2px solid #2a85a0;background-color:#2a85a0;box-shadow:0 0 15px -5px rgba(0,0,0,.4)}.abp-toast.abp-toast-warning{border:2px solid #f89406;background-color:#f89406;color:#fff;box-shadow:0 0 10px -5px rgba(0,0,0,.4)}.abp-toast.abp-toast-warning:hover{border:2px solid #df8505;background-color:#df8505;box-shadow:0 0 15px -5px rgba(0,0,0,.4)}.abp-toast.abp-toast-error{border:2px solid #bd362f;background-color:#bd362f;color:#fff;box-shadow:0 0 10px -5px rgba(0,0,0,.4)}.abp-toast.abp-toast-error:hover{border:2px solid #a9302a;background-color:#a9302a;box-shadow:0 0 15px -5px rgba(0,0,0,.4)}.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}"]
-            },] }
-];
-ToastComponent.ctorParameters = () => [
-    { type: ToasterService }
-];
-ToastComponent.propDecorators = {
-    toast: [{ type: Input }]
-};
+ToastComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ToastComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToastComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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.6", 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) {
+        if (!toast)
+            return null;
+        return toast.options.id;
+    }
+}
+ToastContainerComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ToastContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+ToastContainerComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", 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.6", 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
+            }] } });
 
 var styles = `
 .is-invalid .form-control {
@@ -1468,6 +1136,67 @@ const DEFAULT_VALIDATION_BLUEPRINTS = {
     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.6", 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.6", 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.6", 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.6", ngImport: i0, type: EllipsisModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+EllipsisModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: EllipsisModule, declarations: [EllipsisDirective], exports: [EllipsisDirective] });
+EllipsisModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: EllipsisModule });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: EllipsisModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    exports: [EllipsisDirective],
+                    declarations: [EllipsisDirective],
+                }]
+        }] });
+
 class LoadingDirective {
     constructor(elRef, vcRef, cdRes, injector, renderer) {
         this.elRef = elRef;
@@ -1531,22 +1260,24 @@ class LoadingDirective {
         }
     }
 }
-LoadingDirective.decorators = [
-    { type: Directive, args: [{ selector: '[abpLoading]' },] }
-];
-LoadingDirective.ctorParameters = () => [
-    { type: ElementRef },
-    { type: ViewContainerRef },
-    { type: ComponentFactoryResolver },
-    { type: Injector },
-    { type: Renderer2 }
-];
-LoadingDirective.propDecorators = {
-    position: [{ type: HostBinding, args: ['style.position',] }],
-    loading: [{ type: Input, args: ['abpLoading',] }],
-    targetElement: [{ type: Input, args: ['abpLoadingTargetElement',] }],
-    delay: [{ type: Input, args: ['abpLoadingDelay',] }]
-};
+LoadingDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", 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.6", 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.6", 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) {
@@ -1597,21 +1328,24 @@ class NgxDatatableDefaultDirective {
         this.subscription.unsubscribe();
     }
 }
-NgxDatatableDefaultDirective.decorators = [
-    { type: Directive, args: [{
-                // tslint:disable-next-line
-                selector: 'ngx-datatable[default]',
-                exportAs: 'ngxDatatableDefault',
-            },] }
-];
-NgxDatatableDefaultDirective.ctorParameters = () => [
-    { type: DatatableComponent },
-    { type: undefined, decorators: [{ type: Inject, args: [DOCUMENT,] }] }
-];
-NgxDatatableDefaultDirective.propDecorators = {
-    class: [{ type: Input }],
-    classes: [{ type: HostBinding, args: ['class',] }]
-};
+NgxDatatableDefaultDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", 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.6", 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.6", 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',
@@ -1688,106 +1422,23 @@ class NgxDatatableListDirective {
         this.subscribeToSort();
     }
 }
-NgxDatatableListDirective.decorators = [
-    { type: Directive, args: [{
-                // tslint:disable-next-line
-                selector: 'ngx-datatable[list]',
-                exportAs: 'ngxDatatableList',
-            },] }
-];
-NgxDatatableListDirective.ctorParameters = () => [
-    { type: DatatableComponent },
-    { type: ChangeDetectorRef },
-    { type: LocalizationService },
-    { type: undefined, decorators: [{ type: Optional }, { type: Inject, args: [NGX_DATATABLE_MESSAGES,] }] }
-];
-NgxDatatableListDirective.propDecorators = {
-    list: [{ type: Input }]
-};
-
-/**
- *
- * @deprecated To be deleted in v5.0
- */
-class TableSortDirective {
-    constructor(abpTable, sortPipe, cdRef) {
-        this.abpTable = abpTable;
-        this.sortPipe = sortPipe;
-        this.cdRef = cdRef;
-        this.value = [];
-    }
-    get table() {
-        return (this.abpTable || snq(() => this.cdRef['_view'].component) || snq(() => this.cdRef['context']) // 'context' for ivy
-        );
-    }
-    ngOnChanges({ value, abpTableSort }) {
-        if (this.table && (value || abpTableSort)) {
-            this.abpTableSort = this.abpTableSort || {};
-            this.table.value = this.sortPipe.transform(clone(this.value), this.abpTableSort.order, this.abpTableSort.key);
-        }
-    }
-}
-TableSortDirective.decorators = [
-    { type: Directive, args: [{
-                selector: '[abpTableSort]',
-                providers: [SortPipe],
-            },] }
-];
-TableSortDirective.ctorParameters = () => [
-    { type: TableComponent, decorators: [{ type: Host }, { type: Optional }, { type: Self }] },
-    { type: SortPipe },
-    { type: ChangeDetectorRef }
-];
-TableSortDirective.propDecorators = {
-    abpTableSort: [{ type: Input }],
-    value: [{ type: Input }]
-};
-
-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.decorators = [
-    { type: Directive, args: [{
-                selector: '[abpEllipsis]',
-            },] }
-];
-EllipsisDirective.ctorParameters = () => [
-    { type: ChangeDetectorRef },
-    { type: ElementRef }
-];
-EllipsisDirective.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.decorators = [
-    { type: NgModule, args: [{
-                exports: [EllipsisDirective],
-                declarations: [EllipsisDirective],
-            },] }
-];
+NgxDatatableListDirective.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", 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.6", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: { list: "list" }, exportAs: ["ngxDatatableList"], usesOnChanges: true, ngImport: i0 });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", 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
+            }] } });
 
 function httpErrorConfigFactory(config = {}) {
     if (config.errorScreen && config.errorScreen.component && !config.errorScreen.forWhichErrors) {
@@ -1843,14 +1494,8 @@ const DEFAULT_ERROR_LOCALIZATIONS = {
     },
 };
 class ErrorHandler {
-    constructor(actions, routerEvents, confirmationService, cfRes, rendererFactory, injector, httpErrorConfig) {
-        this.actions = actions;
-        this.routerEvents = routerEvents;
-        this.confirmationService = confirmationService;
-        this.cfRes = cfRes;
-        this.rendererFactory = rendererFactory;
+    constructor(injector) {
         this.injector = injector;
-        this.httpErrorConfig = httpErrorConfig;
         this.httpErrorHandler = this.injector.get(HTTP_ERROR_HANDLER, (_, err) => throwError(err));
         this.executeErrorHandler = error => {
             const returnValue = this.httpErrorHandler(this.injector, error);
@@ -1865,9 +1510,16 @@ class ErrorHandler {
             return this.httpErrorConfig.skipHandledErrorCodes.findIndex(code => code === status) < 0;
         };
         this.filterRouteErrors = (navigationError) => {
-            return (snq(() => navigationError.error.message.indexOf('Cannot match') > -1) &&
+            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.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();
@@ -1888,15 +1540,16 @@ class ErrorHandler {
         });
     }
     listenToRestError() {
-        this.actions
-            .pipe(ofActionSuccessful(RestOccurError), map(action => action.payload), filter(this.filterRestErrors), switchMap(this.executeErrorHandler))
+        this.httpErrorReporter.reporter$
+            .pipe(filter(this.filterRestErrors), switchMap(this.executeErrorHandler))
             .subscribe();
     }
     handleError(err) {
-        const body = snq(() => err.error.error, {
+        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.showError(null, null, body);
             if (err.status === 401) {
@@ -2033,7 +1686,7 @@ class ErrorHandler {
             .create(this.injector);
         for (const key in instance) {
             /* istanbul ignore else */
-            if (this.componentRef.instance.hasOwnProperty(key)) {
+            if (Object.prototype.hasOwnProperty.call(this.componentRef.instance, key)) {
                 this.componentRef.instance[key] = instance[key];
             }
         }
@@ -2055,23 +1708,17 @@ class ErrorHandler {
         });
     }
     canCreateCustomError(status) {
-        return snq(() => this.httpErrorConfig.errorScreen.component &&
-            this.httpErrorConfig.errorScreen.forWhichErrors.indexOf(status) > -1);
+        var _a, _b, _c, _d, _e;
+        return (((_b = (_a = this.httpErrorConfig) === null || _a === void 0 ? void 0 : _a.errorScreen) === null || _b === void 0 ? void 0 : _b.component) &&
+            ((_e = (_d = (_c = this.httpErrorConfig) === null || _c === void 0 ? void 0 : _c.errorScreen) === null || _d === void 0 ? void 0 : _d.forWhichErrors) === null || _e === void 0 ? void 0 : _e.indexOf(status)) > -1);
     }
 }
-ErrorHandler.ɵprov = i0.ɵɵdefineInjectable({ factory: function ErrorHandler_Factory() { return new ErrorHandler(i0.ɵɵinject(i1$1.Actions), i0.ɵɵinject(i1.RouterEvents), i0.ɵɵinject(ConfirmationService), i0.ɵɵinject(i0.ComponentFactoryResolver), i0.ɵɵinject(i0.RendererFactory2), i0.ɵɵinject(i0.INJECTOR), i0.ɵɵinject("HTTP_ERROR_CONFIG")); }, token: ErrorHandler, providedIn: "root" });
-ErrorHandler.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-ErrorHandler.ctorParameters = () => [
-    { type: Actions },
-    { type: RouterEvents },
-    { type: ConfirmationService },
-    { type: ComponentFactoryResolver },
-    { type: RendererFactory2 },
-    { type: Injector },
-    { type: undefined, decorators: [{ type: Inject, args: ['HTTP_ERROR_CONFIG',] }] }
-];
+ErrorHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ErrorHandler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+ErrorHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ErrorHandler, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ErrorHandler, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 
 const LAZY_STYLES = new InjectionToken('LAZY_STYLES');
 
@@ -2143,15 +1790,14 @@ class LazyStyleHandler {
         });
     }
 }
-LazyStyleHandler.ɵprov = i0.ɵɵdefineInjectable({ factory: function LazyStyleHandler_Factory() { return new LazyStyleHandler(i0.ɵɵinject(i0.INJECTOR)); }, token: LazyStyleHandler, providedIn: "root" });
-LazyStyleHandler.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-LazyStyleHandler.ctorParameters = () => [
-    { type: Injector }
-];
+LazyStyleHandler.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: LazyStyleHandler, deps: [{ token: i0.Injector }], target: i0.ɵɵFactoryTarget.Injectable });
+LazyStyleHandler.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: LazyStyleHandler, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: LazyStyleHandler, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i0.Injector }]; } });
 function createLazyStyleHref(style, dir) {
     return style.replace(/{{\s*dir\s*}}/g, dir);
 }
@@ -2197,62 +1843,6 @@ function configureRoutes(routesService) {
     };
 }
 
-/**
- * @deprecated To be removed in v5.0
- */
-class ModalContainerComponent {
-}
-ModalContainerComponent.decorators = [
-    { type: Component, args: [{
-                selector: 'abp-modal-container',
-                template: '<ng-container #container></ng-container>'
-            },] }
-];
-ModalContainerComponent.propDecorators = {
-    container: [{ type: ViewChild, args: ['container', { static: true, read: ViewContainerRef },] }]
-};
-
-/**
- * @deprecated Use ng-bootstrap modal. To be deleted in v5.0.
- */
-class ModalService {
-    constructor(contentProjectionService) {
-        this.contentProjectionService = contentProjectionService;
-        this.setContainer();
-    }
-    setContainer() {
-        this.containerComponentRef = this.contentProjectionService.projectContent(PROJECTION_STRATEGY.AppendComponentToBody(ModalContainerComponent));
-        this.containerComponentRef.changeDetectorRef.detectChanges();
-    }
-    clearModal() {
-        this.getContainer().clear();
-        this.detectChanges();
-    }
-    detectChanges() {
-        this.containerComponentRef.changeDetectorRef.detectChanges();
-    }
-    getContainer() {
-        return this.containerComponentRef.instance.container;
-    }
-    renderTemplate(template, context) {
-        const containerRef = this.getContainer();
-        const strategy = PROJECTION_STRATEGY.ProjectTemplateToContainer(template, containerRef, context);
-        this.contentProjectionService.projectContent(strategy);
-    }
-    ngOnDestroy() {
-        this.containerComponentRef.destroy();
-    }
-}
-ModalService.ɵprov = i0.ɵɵdefineInjectable({ factory: function ModalService_Factory() { return new ModalService(i0.ɵɵinject(i1.ContentProjectionService)); }, token: ModalService, providedIn: "root" });
-ModalService.decorators = [
-    { type: Injectable, args: [{
-                providedIn: 'root',
-            },] }
-];
-ModalService.ctorParameters = () => [
-    { type: ContentProjectionService }
-];
-
 class NavItemsService {
     constructor() {
         this._items$ = new BehaviorSubject([]);
@@ -2286,10 +1876,12 @@ class NavItemsService {
         this._items$.next(items);
     }
 }
-NavItemsService.ɵprov = i0.ɵɵdefineInjectable({ factory: function NavItemsService_Factory() { return new NavItemsService(); }, token: NavItemsService, providedIn: "root" });
-NavItemsService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
+NavItemsService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: NavItemsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+NavItemsService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: NavItemsService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: NavItemsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 function sortItems(a, b) {
     if (!a.order)
         return 1;
@@ -2314,18 +1906,115 @@ class PageAlertService {
         this.alerts.set(alerts);
     }
 }
-PageAlertService.ɵprov = i0.ɵɵdefineInjectable({ factory: function PageAlertService_Factory() { return new PageAlertService(); }, token: PageAlertService, providedIn: "root" });
-PageAlertService.decorators = [
-    { type: Injectable, args: [{ providedIn: 'root' },] }
-];
-PageAlertService.ctorParameters = () => [];
+PageAlertService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: PageAlertService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+PageAlertService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: PageAlertService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", 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 = null, 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.6", ngImport: i0, type: ToasterService, deps: [{ token: i2.ContentProjectionService }], target: i0.ɵɵFactoryTarget.Injectable });
+ToasterService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ToasterService, providedIn: 'root' });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ToasterService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: function () { return [{ type: i2.ContentProjectionService }]; } });
 
 const THEME_SHARED_APPEND_CONTENT = new InjectionToken('THEME_SHARED_APPEND_CONTENT', {
     providedIn: 'root',
     factory: () => {
         const domInsertion = inject(DomInsertionService);
         domInsertion.insertContent(CONTENT_STRATEGY.AppendStyleToHead(styles));
-        import('chart.js').then(() => chartJsLoaded$.next(true));
     },
 });
 
@@ -2364,63 +2053,98 @@ class DateParserFormatter extends NgbDateParserFormatter {
         return null;
     }
     format(date) {
+        var _a, _b;
         if (!date)
             return '';
         const localization = this.configState.getOne('localization');
-        const dateFormat = snq(() => localization.currentCulture.dateTimeFormat.shortDatePattern) || 'yyyy-MM-dd';
+        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.decorators = [
-    { type: Injectable }
-];
-DateParserFormatter.ctorParameters = () => [
-    { type: ConfigStateService },
-    { type: String, decorators: [{ type: Inject, args: [LOCALE_ID,] }] }
-];
+DateParserFormatter.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", 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.6", ngImport: i0, type: DateParserFormatter });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", 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,
-    ChartComponent,
     ConfirmationComponent,
     LoaderBarComponent,
     LoadingComponent,
     ModalComponent,
-    TableComponent,
-    TableEmptyMessageComponent,
     ToastComponent,
     ToastContainerComponent,
-    SortOrderIconComponent,
     NgxDatatableDefaultDirective,
     NgxDatatableListDirective,
     LoadingDirective,
-    TableSortDirective,
     ModalCloseDirective,
 ];
 class BaseThemeSharedModule {
 }
-BaseThemeSharedModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [
-                    CoreModule,
-                    NgxDatatableModule,
-                    NgxValidateCoreModule,
-                    NgbPaginationModule,
-                    EllipsisModule,
-                ],
-                declarations: [...declarationsWithExports, HttpErrorWrapperComponent, ModalContainerComponent],
-                exports: [NgxDatatableModule, EllipsisModule, ...declarationsWithExports],
-                providers: [DatePipe],
-                entryComponents: [
-                    HttpErrorWrapperComponent,
-                    LoadingComponent,
-                    ModalContainerComponent,
-                    ToastContainerComponent,
-                    ConfirmationComponent,
-                ],
-            },] }
-];
+BaseThemeSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: BaseThemeSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+BaseThemeSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", 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.6", ngImport: i0, type: BaseThemeSharedModule, providers: [DatePipe], imports: [[
+            CoreModule,
+            NgxDatatableModule,
+            NgxValidateCoreModule,
+            NgbPaginationModule,
+            EllipsisModule,
+        ], NgxDatatableModule, EllipsisModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", 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 {
@@ -2469,12 +2193,16 @@ class ThemeSharedModule {
         };
     }
 }
-ThemeSharedModule.decorators = [
-    { type: NgModule, args: [{
-                imports: [BaseThemeSharedModule],
-                exports: [BaseThemeSharedModule],
-            },] }
-];
+ThemeSharedModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ThemeSharedModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+ThemeSharedModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ThemeSharedModule, imports: [BaseThemeSharedModule], exports: [BaseThemeSharedModule] });
+ThemeSharedModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ThemeSharedModule, imports: [[BaseThemeSharedModule], BaseThemeSharedModule] });
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0, type: ThemeSharedModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [BaseThemeSharedModule],
+                    exports: [BaseThemeSharedModule],
+                }]
+        }] });
 
 const { minLength, maxLength } = Validators;
 function getPasswordValidators(injector) {
@@ -2514,5 +2242,5 @@ function getRuleFn(injector) {
  * Generated bundle index. Do not edit.
  */
 
-export { BOOTSTRAP, BaseThemeSharedModule, BreadcrumbComponent, ButtonComponent, ChartComponent, Confirmation, ConfirmationComponent, ConfirmationService, DEFAULT_ERROR_LOCALIZATIONS, DEFAULT_ERROR_MESSAGES, DEFAULT_VALIDATION_BLUEPRINTS, DateParserFormatter, EllipsisDirective, EllipsisModule, ErrorHandler, HTTP_ERROR_CONFIG, HTTP_ERROR_HANDLER, HttpErrorWrapperComponent, LAZY_STYLES, LazyStyleHandler, LoaderBarComponent, LoadingComponent, LoadingDirective, ModalCloseDirective, ModalComponent, ModalRefService, ModalService, NGX_DATATABLE_MESSAGES, NG_BOOTSTRAP_CONFIG_PROVIDERS, NavItem, NavItemsService, NgxDatatableDefaultDirective, NgxDatatableListDirective, PageAlertService, SUPPRESS_UNSAVED_CHANGES_WARNING, SortOrderIconComponent, THEME_SHARED_APPEND_CONTENT, THEME_SHARED_ROUTE_PROVIDERS, TableComponent, TableEmptyMessageComponent, TableSortDirective, ThemeSharedModule, ToastComponent, ToastContainerComponent, ToasterService, bounceIn, chartJsLoaded$, collapse, collapseLinearWithMargin, collapseWithMargin, collapseX, collapseY, collapseYWithMargin, configureNgBootstrap, configureRoutes, createLazyStyleHref, defaultNgxDatatableMessages, dialogAnimation, expandX, expandY, expandYWithMargin, fadeAnimation, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp, getPasswordValidators, getRandomBackgroundColor, httpErrorConfigFactory, initLazyStyleHandler, slideFromBottom, toastInOut, EllipsisDirective as ɵa, EllipsisModule as ɵb, HttpErrorWrapperComponent as ɵba, ModalContainerComponent as ɵbb, ErrorHandler as ɵbc, THEME_SHARED_ROUTE_PROVIDERS as ɵbe, configureRoutes as ɵbf, THEME_SHARED_APPEND_CONTENT as ɵbg, initLazyStyleHandler as ɵbh, httpErrorConfigFactory as ɵbi, HTTP_ERROR_CONFIG as ɵbj, DateParserFormatter as ɵbk, NG_BOOTSTRAP_CONFIG_PROVIDERS as ɵbl, BreadcrumbComponent as ɵc, ButtonComponent as ɵd, ChartComponent as ɵe, ConfirmationComponent as ɵf, LoaderBarComponent as ɵg, LoadingComponent as ɵh, ModalComponent as ɵi, SUPPRESS_UNSAVED_CHANGES_WARNING as ɵj, ConfirmationService as ɵk, ModalRefService as ɵl, TableComponent as ɵm, TableEmptyMessageComponent as ɵn, ToastComponent as ɵo, ToasterService as ɵp, ToastContainerComponent as ɵq, toastInOut as ɵr, SortOrderIconComponent as ɵs, NgxDatatableDefaultDirective as ɵt, NgxDatatableListDirective as ɵu, NGX_DATATABLE_MESSAGES as ɵw, LoadingDirective as ɵx, TableSortDirective as ɵy, ModalCloseDirective as ɵz };
+export { BOOTSTRAP, BaseThemeSharedModule, BreadcrumbComponent, BreadcrumbItemsComponent, ButtonComponent, Confirmation, ConfirmationComponent, ConfirmationService, DEFAULT_ERROR_LOCALIZATIONS, DEFAULT_ERROR_MESSAGES, DEFAULT_VALIDATION_BLUEPRINTS, DateParserFormatter, EllipsisDirective, EllipsisModule, ErrorHandler, HTTP_ERROR_CONFIG, HTTP_ERROR_HANDLER, HttpErrorWrapperComponent, LAZY_STYLES, LazyStyleHandler, 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, createLazyStyleHref, defaultNgxDatatableMessages, dialogAnimation, expandX, expandY, expandYWithMargin, fadeAnimation, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp, getPasswordValidators, httpErrorConfigFactory, initLazyStyleHandler, slideFromBottom, toastInOut };
 //# sourceMappingURL=abp-ng.theme.shared.js.map