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

package/bundles/abp-ng.theme.shared.umd.js

@@ -1,10 +1,8 @@
 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/animations'), require('@abp/ng.core'), require('@angular/core'), require('@angular/router'), require('rxjs/operators'), require('rxjs'), require('snq'), require('@ng-bootstrap/ng-bootstrap'), require('@angular/common'), require('@swimlane/ngx-datatable'), require('just-clone'), require('@angular/common/http'), require('@ngxs/store'), require('@ngx-validate/core'), require('@angular/forms')) :
-    typeof define === 'function' && define.amd ? define('@abp/ng.theme.shared', ['exports', '@angular/animations', '@abp/ng.core', '@angular/core', '@angular/router', 'rxjs/operators', 'rxjs', 'snq', '@ng-bootstrap/ng-bootstrap', '@angular/common', '@swimlane/ngx-datatable', 'just-clone', '@angular/common/http', '@ngxs/store', '@ngx-validate/core', '@angular/forms'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.abp = global.abp || {}, global.abp.ng = global.abp.ng || {}, global.abp.ng.theme = global.abp.ng.theme || {}, global.abp.ng.theme.shared = {}), global.ng.animations, global.i1, global.ng.core, global.ng.router, global.rxjs.operators, global.rxjs, global.snq, global.ngBootstrap, global.ng.common, global.ngxDatatable, global.clone, global.ng.common.http, global.i1$1, global.core, global.ng.forms));
-}(this, (function (exports, animations, i1, i0, router, operators, rxjs, snq, ngBootstrap, common, ngxDatatable, clone, http, i1$1, core, forms) { 'use strict';
-
-    function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@angular/animations'), require('@angular/core'), require('@angular/common'), require('@angular/router'), require('@abp/ng.core'), require('rxjs/operators'), require('rxjs'), require('@ng-bootstrap/ng-bootstrap'), require('@swimlane/ngx-datatable'), require('@angular/common/http'), require('@ngx-validate/core'), require('@angular/forms')) :
+    typeof define === 'function' && define.amd ? define('@abp/ng.theme.shared', ['exports', '@angular/animations', '@angular/core', '@angular/common', '@angular/router', '@abp/ng.core', 'rxjs/operators', 'rxjs', '@ng-bootstrap/ng-bootstrap', '@swimlane/ngx-datatable', '@angular/common/http', '@ngx-validate/core', '@angular/forms'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.abp = global.abp || {}, global.abp.ng = global.abp.ng || {}, global.abp.ng.theme = global.abp.ng.theme || {}, global.abp.ng.theme.shared = {}), global.ng.animations, global.ng.core, global.ng.common, global.ng.router, global.i2, global.rxjs.operators, global.rxjs, global.i3, global.i1$2, global.ng.common.http, global.core, global.ng.forms));
+}(this, (function (exports, animations, i0, i1, i1$1, i2, operators, rxjs, i3, i1$2, http, core, forms) { 'use strict';
 
     function _interopNamespace(e) {
         if (e && e.__esModule) return e;
@@ -26,26 +24,27 @@
         return Object.freeze(n);
     }
 
-    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i0__namespace = /*#__PURE__*/_interopNamespace(i0);
-    var snq__default = /*#__PURE__*/_interopDefaultLegacy(snq);
-    var clone__default = /*#__PURE__*/_interopDefaultLegacy(clone);
+    var i1__namespace = /*#__PURE__*/_interopNamespace(i1);
     var i1__namespace$1 = /*#__PURE__*/_interopNamespace(i1$1);
+    var i2__namespace = /*#__PURE__*/_interopNamespace(i2);
+    var i3__namespace = /*#__PURE__*/_interopNamespace(i3);
+    var i1__namespace$2 = /*#__PURE__*/_interopNamespace(i1$2);
 
     var bounceIn = animations.animation([
         animations.style({ opacity: '0', display: '{{ display }}' }),
         animations.animate('{{ time}} {{ easing }}', animations.keyframes([
             animations.style({ opacity: '0', transform: '{{ transform }} scale(0.0)', offset: 0 }),
             animations.style({ opacity: '0', transform: '{{ transform }} scale(0.8)', offset: 0.5 }),
-            animations.style({ opacity: '1', transform: '{{ transform }} scale(1.0)', offset: 1 })
-        ]))
+            animations.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%)',
+        },
     });
 
     var collapseY = animations.animation([
@@ -162,6 +161,24 @@
         ]),
     ]);
 
+    var BreadcrumbItemsComponent = /** @class */ (function () {
+        function BreadcrumbItemsComponent() {
+            this.items = [];
+        }
+        return BreadcrumbItemsComponent;
+    }());
+    BreadcrumbItemsComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BreadcrumbItemsComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BreadcrumbItemsComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: BreadcrumbItemsComponent, selector: "abp-breadcrumb-items", inputs: { items: "items" }, ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }, { type: i1__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { type: i1__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }], pipes: { "abpLocalization": i2__namespace.LocalizationPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BreadcrumbItemsComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-breadcrumb-items',
+                        templateUrl: './breadcrumb-items.component.html',
+                    }]
+            }], propDecorators: { items: [{
+                    type: i0.Input
+                }] } });
+
     /*! *****************************************************************************
     Copyright (c) Microsoft Corporation.
 
@@ -397,7 +414,7 @@
                     ar[i] = from[i];
                 }
             }
-        return to.concat(ar || from);
+        return to.concat(ar || Array.prototype.slice.call(from));
     }
     function __await(v) {
         return this instanceof __await ? (this.v = v, this) : new __await(v);
@@ -491,15 +508,13 @@
         }
         BreadcrumbComponent.prototype.ngOnInit = function () {
             var _this = this;
-            this.subscription.addOne(this.routerEvents.getNavigationEvents('End').pipe(
-            // tslint:disable-next-line:deprecation
-            operators.startWith(null), operators.map(function () { return _this.routes.search({ path: i1.getRoutePath(_this.router) }); })), function (route) {
+            this.subscription.addOne(this.routerEvents.getNavigationEvents('End').pipe(operators.startWith(null), operators.map(function () { return _this.routes.search({ path: i2.getRoutePath(_this.router) }); })), function (route) {
                 _this.segments = [];
                 if (route) {
                     var node = { parent: route };
                     while (node.parent) {
                         node = node.parent;
-                        var parent = node.parent, children = node.children, isLeaf = node.isLeaf, segment = __rest(node, ["parent", "children", "isLeaf"]);
+                        var parent = node.parent, children = node.children, isLeaf = node.isLeaf, path = node.path, segment = __rest(node, ["parent", "children", "isLeaf", "path"]);
                         if (!isAdministration(segment))
                             _this.segments.unshift(segment);
                     }
@@ -509,21 +524,17 @@
         };
         return BreadcrumbComponent;
     }());
-    BreadcrumbComponent.decorators = [
-        { type: i0.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: i0.ChangeDetectionStrategy.OnPush,
-                    providers: [i1.SubscriptionService]
-                },] }
-    ];
-    BreadcrumbComponent.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: router.Router },
-        { type: i1.RoutesService },
-        { type: i1.SubscriptionService },
-        { type: i1.RouterEvents }
-    ]; };
+    BreadcrumbComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BreadcrumbComponent, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i1__namespace$1.Router }, { token: i2__namespace.RoutesService }, { token: i2__namespace.SubscriptionService }, { token: i2__namespace.RouterEvents }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    BreadcrumbComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: BreadcrumbComponent, selector: "abp-breadcrumb", providers: [i2.SubscriptionService], ngImport: i0__namespace, template: "<abp-breadcrumb-items [items]=\"segments\"></abp-breadcrumb-items>\n", components: [{ type: BreadcrumbItemsComponent, selector: "abp-breadcrumb-items", inputs: ["items"] }], changeDetection: i0__namespace.ChangeDetectionStrategy.OnPush });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BreadcrumbComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-breadcrumb',
+                        templateUrl: './breadcrumb.component.html',
+                        changeDetection: i0.ChangeDetectionStrategy.OnPush,
+                        providers: [i2.SubscriptionService],
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i1__namespace$1.Router }, { type: i2__namespace.RoutesService }, { type: i2__namespace.SubscriptionService }, { type: i2__namespace.RouterEvents }]; } });
     function isAdministration(route) {
         return route.name === "AbpUiNavigation::Menu:Administration" /* Administration */;
     }
@@ -536,11 +547,9 @@
             this.buttonType = 'button';
             this.loading = false;
             this.disabled = false;
-            // tslint:disable
             this.click = new i0.EventEmitter();
             this.focus = new i0.EventEmitter();
             this.blur = new i0.EventEmitter();
-            // tslint:enable
             this.abpClick = new i0.EventEmitter();
             this.abpFocus = new i0.EventEmitter();
             this.abpBlur = new i0.EventEmitter();
@@ -562,173 +571,44 @@
         };
         return ButtonComponent;
     }());
-    ButtonComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'abp-button',
-                    template: "\n    <button\n      #button\n      [id]=\"buttonId\"\n      [attr.type]=\"buttonType\"\n      [ngClass]=\"buttonClass\"\n      [disabled]=\"loading || disabled\"\n      (click.stop)=\"click.next($event); abpClick.next($event)\"\n      (focus)=\"focus.next($event); abpFocus.next($event)\"\n      (blur)=\"blur.next($event); abpBlur.next($event)\"\n    >\n      <i [ngClass]=\"icon\" class=\"mr-1\"></i><ng-content></ng-content>\n    </button>\n  "
-                },] }
-    ];
-    ButtonComponent.ctorParameters = function () { return [
-        { type: i0.Renderer2 }
-    ]; };
-    ButtonComponent.propDecorators = {
-        buttonId: [{ type: i0.Input }],
-        buttonClass: [{ type: i0.Input }],
-        buttonType: [{ type: i0.Input }],
-        iconClass: [{ type: i0.Input }],
-        loading: [{ type: i0.Input }],
-        disabled: [{ type: i0.Input }],
-        attributes: [{ type: i0.Input }],
-        click: [{ type: i0.Output }],
-        focus: [{ type: i0.Output }],
-        blur: [{ type: i0.Output }],
-        abpClick: [{ type: i0.Output }],
-        abpFocus: [{ type: i0.Output }],
-        abpBlur: [{ type: i0.Output }],
-        buttonRef: [{ type: i0.ViewChild, args: ['button', { static: true },] }]
-    };
-
-    function getRandomBackgroundColor(count) {
-        var colors = [];
-        for (var i = 0; i < count; i++) {
-            var r = ((i + 5) * (i + 5) * 474) % 255;
-            var g = ((i + 5) * (i + 5) * 1600) % 255;
-            var b = ((i + 5) * (i + 5) * 84065) % 255;
-            colors.push('rgba(' + r + ', ' + g + ', ' + b + ', 0.7)');
-        }
-        return colors;
-    }
-    var chartJsLoaded$ = new rxjs.ReplaySubject(1);
-
-    var ChartComponent = /** @class */ (function () {
-        function ChartComponent(el, cdRef) {
-            var _this = this;
-            this.el = el;
-            this.cdRef = cdRef;
-            this.options = {};
-            this.plugins = [];
-            this.responsive = true;
-            // tslint:disable-next-line: no-output-on-prefix
-            this.onDataSelect = new i0.EventEmitter();
-            this.initialized = new rxjs.BehaviorSubject(this);
-            this.onCanvasClick = function (event) {
-                if (_this.chart) {
-                    var element = _this.chart.getElementAtEvent(event);
-                    var dataset = _this.chart.getDatasetAtEvent(event);
-                    if (element && element.length && dataset) {
-                        _this.onDataSelect.emit({
-                            originalEvent: event,
-                            element: element[0],
-                            dataset: dataset,
-                        });
-                    }
-                }
-            };
-            this.initChart = function () {
-                var 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 = function () {
-                if (_this.chart) {
-                    return _this.chart.generateLegend();
-                }
-            };
-            this.refresh = function () {
-                if (_this.chart) {
-                    _this.chart.update();
-                    _this.cdRef.detectChanges();
-                }
-            };
-            this.reinit = function () {
-                if (_this.chart) {
-                    _this.chart.destroy();
-                    _this.initChart();
-                }
-            };
-        }
-        Object.defineProperty(ChartComponent.prototype, "data", {
-            get: function () {
-                return this._data;
-            },
-            set: function (val) {
-                this._data = val;
-                this.reinit();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ChartComponent.prototype, "canvas", {
-            get: function () {
-                return this.el.nativeElement.children[0].children[0];
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ChartComponent.prototype, "base64Image", {
-            get: function () {
-                return this.chart.toBase64Image();
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ChartComponent.prototype.ngAfterViewInit = function () {
-            var _this = this;
-            chartJsLoaded$.subscribe(function () {
-                _this.testChartJs();
-                _this.initChart();
-                _this._initialized = true;
-            });
-        };
-        ChartComponent.prototype.testChartJs = function () {
-            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:\n      import('chart.js');\n      ");
-            }
-        };
-        ChartComponent.prototype.ngOnDestroy = function () {
-            if (this.chart) {
-                this.chart.destroy();
-                this._initialized = false;
-                this.chart = null;
-            }
-        };
-        return ChartComponent;
-    }());
-    ChartComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    ChartComponent.propDecorators = {
-        type: [{ type: i0.Input }],
-        options: [{ type: i0.Input }],
-        plugins: [{ type: i0.Input }],
-        width: [{ type: i0.Input }],
-        height: [{ type: i0.Input }],
-        responsive: [{ type: i0.Input }],
-        onDataSelect: [{ type: i0.Output }],
-        initialized: [{ type: i0.Output }],
-        data: [{ type: i0.Input }]
-    };
+    ButtonComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ButtonComponent, deps: [{ token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ButtonComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, template: "\n    <button\n      #button\n      [id]=\"buttonId\"\n      [attr.type]=\"buttonType\"\n      [ngClass]=\"buttonClass\"\n      [disabled]=\"loading || disabled\"\n      (click.stop)=\"click.next($event); abpClick.next($event)\"\n      (focus)=\"focus.next($event); abpFocus.next($event)\"\n      (blur)=\"blur.next($event); abpBlur.next($event)\"\n    >\n      <i [ngClass]=\"icon\" class=\"mr-1\"></i><ng-content></ng-content>\n    </button>\n  ", isInline: true, directives: [{ type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i2__namespace.StopPropagationDirective, selector: "[click.stop]", outputs: ["click.stop"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ButtonComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-button',
+                        template: "\n    <button\n      #button\n      [id]=\"buttonId\"\n      [attr.type]=\"buttonType\"\n      [ngClass]=\"buttonClass\"\n      [disabled]=\"loading || disabled\"\n      (click.stop)=\"click.next($event); abpClick.next($event)\"\n      (focus)=\"focus.next($event); abpFocus.next($event)\"\n      (blur)=\"blur.next($event); abpBlur.next($event)\"\n    >\n      <i [ngClass]=\"icon\" class=\"mr-1\"></i><ng-content></ng-content>\n    </button>\n  ",
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Renderer2 }]; }, propDecorators: { buttonId: [{
+                    type: i0.Input
+                }], buttonClass: [{
+                    type: i0.Input
+                }], buttonType: [{
+                    type: i0.Input
+                }], iconClass: [{
+                    type: i0.Input
+                }], loading: [{
+                    type: i0.Input
+                }], disabled: [{
+                    type: i0.Input
+                }], attributes: [{
+                    type: i0.Input
+                }], click: [{
+                    type: i0.Output
+                }], focus: [{
+                    type: i0.Output
+                }], blur: [{
+                    type: i0.Output
+                }], abpClick: [{
+                    type: i0.Output
+                }], abpFocus: [{
+                    type: i0.Output
+                }], abpBlur: [{
+                    type: i0.Output
+                }], buttonRef: [{
+                    type: i0.ViewChild,
+                    args: ['button', { static: true }]
+                }] } });
 
     exports.Confirmation = void 0;
     (function (Confirmation) {
@@ -766,13 +646,16 @@
         };
         return ConfirmationComponent;
     }());
-    ConfirmationComponent.decorators = [
-        { type: i0.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__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ConfirmationComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ConfirmationComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: ConfirmationComponent, selector: "abp-confirmation", ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], pipes: { "async": i1__namespace.AsyncPipe, "abpLocalization": i2__namespace.LocalizationPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ConfirmationComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-confirmation',
+                        templateUrl: './confirmation.component.html',
+                        styleUrls: ['./confirmation.component.scss'],
+                    }]
+            }] });
 
     var HttpErrorWrapperComponent = /** @class */ (function () {
         function HttpErrorWrapperComponent(subscription) {
@@ -792,9 +675,9 @@
             configurable: true
         });
         HttpErrorWrapperComponent.prototype.ngOnInit = function () {
+            var _a;
             this.backgroundColor =
-                snq__default['default'](function () { return window.getComputedStyle(document.body).getPropertyValue('background-color'); }) ||
-                    '#fff';
+                ((_a = window.getComputedStyle(document.body)) === null || _a === void 0 ? void 0 : _a.getPropertyValue('background-color')) || '#fff';
         };
         HttpErrorWrapperComponent.prototype.ngAfterViewInit = function () {
             var _this = this;
@@ -811,27 +694,29 @@
             var keyup$ = rxjs.fromEvent(document, 'keyup').pipe(operators.debounceTime(150), operators.filter(function (key) { return key && key.key === 'Escape'; }));
             this.subscription.addOne(keyup$, function () { return _this.destroy(); });
         };
-        HttpErrorWrapperComponent.prototype.ngOnDestroy = function () { };
+        HttpErrorWrapperComponent.prototype.ngOnDestroy = function () {
+            this.destroy();
+        };
         HttpErrorWrapperComponent.prototype.destroy = function () {
             this.destroy$.next();
             this.destroy$.complete();
         };
         return HttpErrorWrapperComponent;
     }());
-    HttpErrorWrapperComponent.decorators = [
-        { type: i0.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: [i1.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 = function () { return [
-        { type: i1.SubscriptionService }
-    ]; };
-    HttpErrorWrapperComponent.propDecorators = {
-        containerRef: [{ type: i0.ViewChild, args: ['container', { static: false },] }]
-    };
+    HttpErrorWrapperComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: HttpErrorWrapperComponent, deps: [{ token: i2__namespace.SubscriptionService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    HttpErrorWrapperComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: HttpErrorWrapperComponent, selector: "abp-http-error-wrapper", providers: [i2.SubscriptionService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0__namespace, 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__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i1__namespace$1.RouterLinkWithHref, selector: "a[routerLink],area[routerLink]", inputs: ["routerLink", "target", "queryParams", "fragment", "queryParamsHandling", "preserveFragment", "skipLocationChange", "replaceUrl", "state", "relativeTo"] }], pipes: { "abpLocalization": i2__namespace.LocalizationPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: HttpErrorWrapperComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-http-error-wrapper',
+                        templateUrl: './http-error-wrapper.component.html',
+                        styleUrls: ['http-error-wrapper.component.scss'],
+                        providers: [i2.SubscriptionService],
+                    }]
+            }], ctorParameters: function () { return [{ type: i2__namespace.SubscriptionService }]; }, propDecorators: { containerRef: [{
+                    type: i0.ViewChild,
+                    args: ['container', { static: false }]
+                }] } });
 
     var LoaderBarComponent = /** @class */ (function () {
         function LoaderBarComponent(router, cdRef, subscription, httpWaitService, routerWaitService) {
@@ -921,42 +806,44 @@
         };
         return LoaderBarComponent;
     }());
-    LoaderBarComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'abp-loader-bar',
-                    template: "\n    <div id=\"abp-loader-bar\" [ngClass]=\"containerClass\" [class.is-loading]=\"isLoading\">\n      <div\n        class=\"abp-progress\"\n        [class.progressing]=\"progressLevel\"\n        [style.width.vw]=\"progressLevel\"\n        [ngStyle]=\"{\n          'background-color': color,\n          'box-shadow': boxShadow\n        }\"\n      ></div>\n    </div>\n  ",
-                    providers: [i1.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 = function () { return [
-        { type: router.Router },
-        { type: i0.ChangeDetectorRef },
-        { type: i1.SubscriptionService },
-        { type: i1.HttpWaitService },
-        { type: i1.RouterWaitService }
-    ]; };
-    LoaderBarComponent.propDecorators = {
-        isLoading: [{ type: i0.Input }],
-        containerClass: [{ type: i0.Input }],
-        color: [{ type: i0.Input }]
-    };
+    LoaderBarComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: LoaderBarComponent, deps: [{ token: i1__namespace$1.Router }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.SubscriptionService }, { token: i2__namespace.HttpWaitService }, { token: i2__namespace.RouterWaitService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LoaderBarComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: LoaderBarComponent, selector: "abp-loader-bar", inputs: { isLoading: "isLoading", containerClass: "containerClass", color: "color" }, providers: [i2.SubscriptionService], ngImport: i0__namespace, template: "\n    <div id=\"abp-loader-bar\" [ngClass]=\"containerClass\" [class.is-loading]=\"isLoading\">\n      <div\n        class=\"abp-progress\"\n        [class.progressing]=\"progressLevel\"\n        [style.width.vw]=\"progressLevel\"\n        [ngStyle]=\"{\n          'background-color': color,\n          'box-shadow': boxShadow\n        }\"\n      ></div>\n    </div>\n  ", 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: LoaderBarComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-loader-bar',
+                        template: "\n    <div id=\"abp-loader-bar\" [ngClass]=\"containerClass\" [class.is-loading]=\"isLoading\">\n      <div\n        class=\"abp-progress\"\n        [class.progressing]=\"progressLevel\"\n        [style.width.vw]=\"progressLevel\"\n        [ngStyle]=\"{\n          'background-color': color,\n          'box-shadow': boxShadow\n        }\"\n      ></div>\n    </div>\n  ",
+                        styleUrls: ['./loader-bar.component.scss'],
+                        providers: [i2.SubscriptionService],
+                    }]
+            }], ctorParameters: function () { return [{ type: i1__namespace$1.Router }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.SubscriptionService }, { type: i2__namespace.HttpWaitService }, { type: i2__namespace.RouterWaitService }]; }, propDecorators: { isLoading: [{
+                    type: i0.Input
+                }], containerClass: [{
+                    type: i0.Input
+                }], color: [{
+                    type: i0.Input
+                }] } });
 
     var LoadingComponent = /** @class */ (function () {
         function LoadingComponent() {
         }
-        LoadingComponent.prototype.ngOnInit = function () { };
         return LoadingComponent;
     }());
-    LoadingComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'abp-loading',
-                    template: "\n    <div class=\"abp-loading\">\n      <i class=\"fa fa-spinner fa-pulse abp-spinner\"></i>\n    </div>\n  ",
-                    encapsulation: i0.ViewEncapsulation.None,
-                    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    "]
-                },] }
-    ];
-    LoadingComponent.ctorParameters = function () { return []; };
+    LoadingComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: LoadingComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    LoadingComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: LoadingComponent, selector: "abp-loading", ngImport: i0__namespace, template: "\n    <div class=\"abp-loading\">\n      <i class=\"fa fa-spinner fa-pulse abp-spinner\"></i>\n    </div>\n  ", 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__namespace.ViewEncapsulation.None });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: LoadingComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-loading',
+                        template: "\n    <div class=\"abp-loading\">\n      <i class=\"fa fa-spinner fa-pulse abp-spinner\"></i>\n    </div>\n  ",
+                        encapsulation: i0.ViewEncapsulation.None,
+                        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    ",
+                        ],
+                    }]
+            }] });
+
+    var SUPPRESS_UNSAVED_CHANGES_WARNING = new i0.InjectionToken('SUPPRESS_UNSAVED_CHANGES_WARNING');
 
     var ConfirmationService = /** @class */ (function () {
         function ConfirmationService(contentProjectionService) {
@@ -971,7 +858,7 @@
         }
         ConfirmationService.prototype.setContainer = function () {
             var _this = this;
-            this.containerComponentRef = this.contentProjectionService.projectContent(i1.PROJECTION_STRATEGY.AppendComponentToBody(ConfirmationComponent, {
+            this.containerComponentRef = this.contentProjectionService.projectContent(i2.PROJECTION_STRATEGY.AppendComponentToBody(ConfirmationComponent, {
                 confirmation$: this.confirmation$,
                 clear: this.clear,
             }));
@@ -1017,16 +904,12 @@
         };
         return ConfirmationService;
     }());
-    ConfirmationService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ConfirmationService_Factory() { return new ConfirmationService(i0__namespace.ɵɵinject(i1__namespace.ContentProjectionService)); }, token: ConfirmationService, providedIn: "root" });
-    ConfirmationService.decorators = [
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
-    ];
-    ConfirmationService.ctorParameters = function () { return [
-        { type: i1.ContentProjectionService }
-    ]; };
-
-    // TODO: Should be documented
-    var SUPPRESS_UNSAVED_CHANGES_WARNING = new i0.InjectionToken('SUPPRESS_UNSAVED_CHANGES_WARNING');
+    ConfirmationService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ConfirmationService, deps: [{ token: i2__namespace.ContentProjectionService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ConfirmationService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ConfirmationService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ConfirmationService, decorators: [{
+                type: i0.Injectable,
+                args: [{ providedIn: 'root' }]
+            }], ctorParameters: function () { return [{ type: i2__namespace.ContentProjectionService }]; } });
 
     var ModalRefService = /** @class */ (function () {
         function ModalRefService() {
@@ -1046,10 +929,12 @@
         };
         return ModalRefService;
     }());
-    ModalRefService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ModalRefService_Factory() { return new ModalRefService(); }, token: ModalRefService, providedIn: "root" });
-    ModalRefService.decorators = [
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
-    ];
+    ModalRefService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ModalRefService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ModalRefService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ModalRefService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ModalRefService, decorators: [{
+                type: i0.Injectable,
+                args: [{ providedIn: 'root' }]
+            }] });
 
     var ModalComponent = /** @class */ (function () {
         function ModalComponent(confirmationService, subscription, suppressUnsavedChangesWarningToken, modal, modalRefService) {
@@ -1058,18 +943,6 @@
             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 i0.EventEmitter();
@@ -1080,7 +953,7 @@
             this._busy = false;
             this.isConfirmationOpen = false;
             this.destroy$ = new rxjs.Subject();
-            this.modalIdentifier = "modal-" + i1.uuid();
+            this.modalIdentifier = "modal-" + i2.uuid();
             this.toggle$ = new rxjs.Subject();
             this.initToggleStream();
         }
@@ -1154,16 +1027,12 @@
                 return;
             }
             setTimeout(function () { return _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: function () {
+            this.modalRef = this.modal.open(this.modalContent, Object.assign(Object.assign({ size: 'md', centered: false, keyboard: false, scrollable: true, beforeDismiss: function () {
                     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();
         };
         ModalComponent.prototype.ngOnDestroy = function () {
@@ -1208,57 +1077,59 @@
                     delete event.returnValue;
                 }
             });
-            setTimeout(function () {
-                if (!_this.abpClose)
-                    return;
-                _this.warnForDeprecatedClose();
-                rxjs.fromEvent(_this.abpClose.nativeElement, 'click')
-                    .pipe(operators.takeUntil(_this.destroy$))
-                    .subscribe(function () { return _this.close(); });
-            }, 0);
             this.init.emit();
         };
-        ModalComponent.prototype.warnForDeprecatedClose = function () {
-            if (i0.isDevMode()) {
-                console.warn('Please use abpClose directive instead of #abpClose template variable. #abpClose will be removed in v5.0');
-            }
-        };
         return ModalComponent;
     }());
-    ModalComponent.decorators = [
-        { type: i0.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: [i1.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 = function () { return [
-        { type: ConfirmationService },
-        { type: i1.SubscriptionService },
-        { type: Boolean, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [SUPPRESS_UNSAVED_CHANGES_WARNING,] }] },
-        { type: ngBootstrap.NgbModal },
-        { type: ModalRefService }
-    ]; };
-    ModalComponent.propDecorators = {
-        centered: [{ type: i0.Input }],
-        modalClass: [{ type: i0.Input }],
-        size: [{ type: i0.Input }],
-        visible: [{ type: i0.Input }],
-        busy: [{ type: i0.Input }],
-        options: [{ type: i0.Input }],
-        suppressUnsavedChangesWarning: [{ type: i0.Input }],
-        modalContent: [{ type: i0.ViewChild, args: ['modalContent',] }],
-        abpHeader: [{ type: i0.ContentChild, args: ['abpHeader', { static: false },] }],
-        abpBody: [{ type: i0.ContentChild, args: ['abpBody', { static: false },] }],
-        abpFooter: [{ type: i0.ContentChild, args: ['abpFooter', { static: false },] }],
-        abpSubmit: [{ type: i0.ContentChild, args: [ButtonComponent, { static: false, read: ButtonComponent },] }],
-        abpClose: [{ type: i0.ContentChild, args: ['abpClose', { static: false, read: i0.ElementRef },] }],
-        visibleChange: [{ type: i0.Output }],
-        init: [{ type: i0.Output }],
-        appear: [{ type: i0.Output }],
-        disappear: [{ type: i0.Output }]
-    };
+    ModalComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ModalComponent, deps: [{ token: ConfirmationService }, { token: i2__namespace.SubscriptionService }, { token: SUPPRESS_UNSAVED_CHANGES_WARNING, optional: true }, { token: i3__namespace.NgbModal }, { token: ModalRefService }], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ModalComponent.ɵcmp = i0__namespace.ɵɵ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: [i2.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__namespace, 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__namespace.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ModalComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-modal',
+                        templateUrl: './modal.component.html',
+                        styleUrls: ['./modal.component.scss'],
+                        providers: [i2.SubscriptionService],
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: ConfirmationService }, { type: i2__namespace.SubscriptionService }, { type: undefined, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Inject,
+                            args: [SUPPRESS_UNSAVED_CHANGES_WARNING]
+                        }] }, { type: i3__namespace.NgbModal }, { type: ModalRefService }];
+        }, propDecorators: { visible: [{
+                    type: i0.Input
+                }], busy: [{
+                    type: i0.Input
+                }], options: [{
+                    type: i0.Input
+                }], suppressUnsavedChangesWarning: [{
+                    type: i0.Input
+                }], modalContent: [{
+                    type: i0.ViewChild,
+                    args: ['modalContent']
+                }], abpHeader: [{
+                    type: i0.ContentChild,
+                    args: ['abpHeader', { static: false }]
+                }], abpBody: [{
+                    type: i0.ContentChild,
+                    args: ['abpBody', { static: false }]
+                }], abpFooter: [{
+                    type: i0.ContentChild,
+                    args: ['abpFooter', { static: false }]
+                }], abpSubmit: [{
+                    type: i0.ContentChild,
+                    args: [ButtonComponent, { static: false, read: ButtonComponent }]
+                }], visibleChange: [{
+                    type: i0.Output
+                }], init: [{
+                    type: i0.Output
+                }], appear: [{
+                    type: i0.Output
+                }], disappear: [{
+                    type: i0.Output
+                }] } });
 
     var ModalCloseDirective = /** @class */ (function () {
         function ModalCloseDirective(modal) {
@@ -1273,202 +1144,85 @@
         };
         return ModalCloseDirective;
     }());
-    ModalCloseDirective.decorators = [
-        { type: i0.Directive, args: [{ selector: '[abpClose]' },] }
-    ];
-    ModalCloseDirective.ctorParameters = function () { return [
-        { type: ModalComponent, decorators: [{ type: i0.Optional }] }
-    ]; };
-    ModalCloseDirective.propDecorators = {
-        onClick: [{ type: i0.HostListener, args: ['click',] }]
-    };
-
-    /**
-     * @deprecated To be deleted in v5.0. Use ngx-datatale instead.
-     */
-    var SortOrderIconComponent = /** @class */ (function () {
-        function SortOrderIconComponent() {
-            this.orderChange = new i0.EventEmitter();
-            this.selectedSortKeyChange = new i0.EventEmitter();
-        }
-        Object.defineProperty(SortOrderIconComponent.prototype, "selectedSortKey", {
-            get: function () {
-                return this._selectedSortKey;
-            },
-            set: function (value) {
-                this._selectedSortKey = value;
-                this.selectedSortKeyChange.emit(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SortOrderIconComponent.prototype, "order", {
-            get: function () {
-                return this._order;
-            },
-            set: function (value) {
-                this._order = value;
-                this.orderChange.emit(value);
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(SortOrderIconComponent.prototype, "icon", {
-            get: function () {
-                if (this.selectedSortKey === this.sortKey)
-                    return "sorting_" + this.order;
-                else
-                    return 'sorting';
-            },
-            enumerable: false,
-            configurable: true
-        });
-        SortOrderIconComponent.prototype.sort = function (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;
-            }
-        };
-        return SortOrderIconComponent;
-    }());
-    SortOrderIconComponent.decorators = [
-        { type: i0.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: i0.Input }],
-        selectedSortKey: [{ type: i0.Input }],
-        order: [{ type: i0.Input }],
-        orderChange: [{ type: i0.Output }],
-        selectedSortKeyChange: [{ type: i0.Output }],
-        iconClass: [{ type: i0.Input }]
-    };
-
-    var TableEmptyMessageComponent = /** @class */ (function () {
-        function TableEmptyMessageComponent() {
-            this.colspan = 2;
-            this.localizationResource = 'AbpAccount';
-            this.localizationProp = 'NoDataAvailableInDatatable';
-        }
-        Object.defineProperty(TableEmptyMessageComponent.prototype, "emptyMessage", {
-            get: function () {
-                return this.message || this.localizationResource + "::" + this.localizationProp;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        return TableEmptyMessageComponent;
-    }());
-    TableEmptyMessageComponent.decorators = [
-        { type: i0.Component, args: [{
-                    // tslint:disable-next-line: component-selector
-                    selector: '[abp-table-empty-message]',
-                    template: "\n    <td class=\"text-center\" [attr.colspan]=\"colspan\">\n      {{ emptyMessage | abpLocalization }}\n    </td>\n  "
-                },] }
-    ];
-    TableEmptyMessageComponent.propDecorators = {
-        colspan: [{ type: i0.Input }],
-        message: [{ type: i0.Input }],
-        localizationResource: [{ type: i0.Input }],
-        localizationProp: [{ type: i0.Input }]
-    };
+    ModalCloseDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ModalCloseDirective, deps: [{ token: ModalComponent, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    ModalCloseDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: ModalCloseDirective, selector: "[abpClose]", host: { listeners: { "click": "onClick()" } }, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ModalCloseDirective, decorators: [{
+                type: i0.Directive,
+                args: [{ selector: '[abpClose]' }]
+            }], ctorParameters: function () {
+            return [{ type: ModalComponent, decorators: [{
+                            type: i0.Optional
+                        }] }];
+        }, propDecorators: { onClick: [{
+                    type: i0.HostListener,
+                    args: ['click']
+                }] } });
 
-    /**
-     *
-     * @deprecated To be deleted in v5.0. Use ngx-datatale instead.
-     */
-    var TableComponent = /** @class */ (function () {
-        function TableComponent() {
-            var _this = this;
-            this.bodyScrollLeft = 0;
-            this.page = 1;
-            this.trackingProp = 'id';
-            this.emptyMessage = 'AbpAccount::NoDataAvailableInDatatable';
-            this.pageChange = new i0.EventEmitter();
-            this.trackByFn = function (_, value) {
-                return typeof value === 'object' ? value[_this.trackingProp] || value : value;
-            };
+    var ToastComponent = /** @class */ (function () {
+        function ToastComponent() {
+            this.remove = new i0.EventEmitter();
         }
-        Object.defineProperty(TableComponent.prototype, "totalRecords", {
-            get: function () {
-                return this._totalRecords || this.value.length;
-            },
-            set: function (newValue) {
-                if (newValue < 0)
-                    this._totalRecords = 0;
-                this._totalRecords = newValue;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(TableComponent.prototype, "totalPages", {
+        Object.defineProperty(ToastComponent.prototype, "severityClass", {
             get: function () {
-                if (!this.rows) {
-                    return;
-                }
-                return Math.ceil(this.totalRecords / this.rows);
+                if (!this.toast || !this.toast.severity)
+                    return '';
+                return "abp-toast-" + this.toast.severity;
             },
             enumerable: false,
             configurable: true
         });
-        Object.defineProperty(TableComponent.prototype, "slicedValue", {
+        Object.defineProperty(ToastComponent.prototype, "iconClass", {
             get: function () {
-                if (!this.rows || this.rows >= this.value.length) {
-                    return this.value;
+                switch (this.toast.severity) {
+                    case 'success':
+                        return 'fa-check-circle';
+                    case 'info':
+                        return 'fa-info-circle';
+                    case 'warning':
+                        return 'fa-exclamation-triangle';
+                    case 'error':
+                        return 'fa-times-circle';
+                    default:
+                        return 'fa-exclamation-circle';
                 }
-                var start = (this.page - 1) * this.rows;
-                return this.value.slice(start, start + this.rows);
             },
             enumerable: false,
             configurable: true
         });
-        TableComponent.prototype.ngOnInit = function () {
-            this.marginCalculator = document.body.dir === 'rtl' ? rtlCalculator : ltrCalculator;
+        ToastComponent.prototype.ngOnInit = function () {
+            var _this = this;
+            var _b = this.toast.options || {}, sticky = _b.sticky, life = _b.life;
+            if (sticky)
+                return;
+            var timeout = life || 5000;
+            setTimeout(function () {
+                _this.close();
+            }, timeout);
+        };
+        ToastComponent.prototype.close = function () {
+            this.remove.emit(this.toast.options.id);
+        };
+        ToastComponent.prototype.tap = function () {
+            var _a;
+            if ((_a = this.toast.options) === null || _a === void 0 ? void 0 : _a.tapToDismiss)
+                this.close();
         };
-        return TableComponent;
+        return ToastComponent;
     }());
-    TableComponent.decorators = [
-        { type: i0.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: i0.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: i0.Input }],
-        headerTemplate: [{ type: i0.Input }],
-        bodyTemplate: [{ type: i0.Input }],
-        colgroupTemplate: [{ type: i0.Input }],
-        scrollHeight: [{ type: i0.Input }],
-        scrollable: [{ type: i0.Input }],
-        rows: [{ type: i0.Input }],
-        page: [{ type: i0.Input }],
-        trackingProp: [{ type: i0.Input }],
-        emptyMessage: [{ type: i0.Input }],
-        pageChange: [{ type: i0.Output }],
-        wrapperRef: [{ type: i0.ViewChild, args: ['wrapper', { read: i0.ElementRef },] }],
-        totalRecords: [{ type: i0.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";
-    }
+    ToastComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ToastComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ToastComponent.ɵcmp = i0__namespace.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "12.2.6", type: ToastComponent, selector: "abp-toast", inputs: { toast: "toast" }, outputs: { remove: "remove" }, ngImport: i0__namespace, 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__namespace.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { type: i1__namespace.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], pipes: { "abpLocalization": i2__namespace.LocalizationPipe } });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ToastComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-toast',
+                        templateUrl: './toast.component.html',
+                        styleUrls: ['./toast.component.scss'],
+                    }]
+            }], propDecorators: { toast: [{
+                    type: i0.Input
+                }], remove: [{
+                    type: i0.Output
+                }] } });
 
     var ToastContainerComponent = /** @class */ (function () {
         function ToastContainerComponent() {
@@ -1493,202 +1247,122 @@
         };
         return ToastContainerComponent;
     }());
-    ToastContainerComponent.decorators = [
-        { type: i0.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: i0.Input }],
-        right: [{ type: i0.Input }],
-        bottom: [{ type: i0.Input }],
-        left: [{ type: i0.Input }],
-        toastKey: [{ type: i0.Input }]
+    ToastContainerComponent.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ToastContainerComponent, deps: [], target: i0__namespace.ɵɵFactoryTarget.Component });
+    ToastContainerComponent.ɵcmp = i0__namespace.ɵɵ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__namespace, 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__namespace.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }], animations: [toastInOut] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ToastContainerComponent, decorators: [{
+                type: i0.Component,
+                args: [{
+                        selector: 'abp-toast-container',
+                        templateUrl: './toast-container.component.html',
+                        styleUrls: ['./toast-container.component.scss'],
+                        animations: [toastInOut],
+                    }]
+            }], propDecorators: { top: [{
+                    type: i0.Input
+                }], right: [{
+                    type: i0.Input
+                }], bottom: [{
+                    type: i0.Input
+                }], left: [{
+                    type: i0.Input
+                }], toastKey: [{
+                    type: i0.Input
+                }] } });
+
+    var styles = "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n  padding-right: calc(1.5em + .75rem);\n  background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);\n  background-repeat: no-repeat;\n  background-position: right calc(.375em + .1875rem) center;\n  background-size: calc(.75em + .375rem) calc(.75em + .375rem);\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n[dir=rtl] .data-tables-filter {\n  text-align: left;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n.navbar .dropdown-menu {\n  min-width: 215px;\n}\n\n.datatable-scroll {\n  margin-bottom: 5px !important;\n  width: unset !important;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar {\n  height: 5px !important;\n  width: 5px !important;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar-track {\n  background: #ddd;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar-thumb {\n  background: #8a8686;\n}\n\n.abp-ellipsis-inline {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.abp-ellipsis {\n  overflow: hidden !important;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ui-widget-overlay {\n  z-index: 1000;\n}\n\n.color-white {\n  color: #FFF !important;\n}\n\n.custom-checkbox > label {\n  cursor: pointer;\n}\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.2s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.2s ease-in-out;\n}\n\n.abp-collapsed-height {\n  -moz-transition: max-height linear 0.35s;\n  -ms-transition: max-height linear 0.35s;\n  -o-transition: max-height linear 0.35s;\n  -webkit-transition: max-height linear 0.35s;\n  overflow:hidden;\n  transition:max-height 0.35s linear;\n  height:auto;\n  max-height: 0;\n}\n\n.abp-mh-25 {\n  max-height: 25vh;\n}\n\n.abp-mh-50 {\n  transition:max-height 0.65s linear;\n  max-height: 50vh;\n}\n\n.abp-mh-75 {\n  transition:max-height 0.85s linear;\n  max-height: 75vh;\n}\n\n.abp-mh-100 {\n  transition:max-height 1s linear;\n  max-height: 100vh;\n}\n\n[class^=\"sorting\"] {\n  opacity: .3;\n  cursor: pointer;\n}\n[class^=\"sorting\"]:before {\n  right: 0.5rem;\n  content: \"\u2191\";\n}\n[class^=\"sorting\"]:after {\n  right: 0.5rem;\n  content: \"\u2193\";\n}\n\n.sorting_desc {\n  opacity: 1;\n}\n.sorting_desc:before {\n  opacity: .3;\n}\n\n.sorting_asc {\n  opacity: 1;\n}\n.sorting_asc:after {\n  opacity: .3;\n}\n.ngx-datatable.material {\n  box-shadow: none;\n}\nngb-typeahead-window, ngb-typeahead-window.dropdown-menu {\n  max-height: 25em;\n  overflow-y: scroll !important;\n  z-index: 1050;\n}\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n";
+    var BOOTSTRAP = 'bootstrap-{{dir}}.min.css';
+
+    var DEFAULT_VALIDATION_BLUEPRINTS = {
+        creditCard: 'AbpValidation::ThisFieldIsNotAValidCreditCardNumber.',
+        email: 'AbpValidation::ThisFieldIsNotAValidEmailAddress.',
+        invalid: 'AbpValidation::ThisFieldIsNotValid.',
+        max: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
+        maxlength: 'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMaximumLengthOf{0}[{{ requiredLength }}]',
+        min: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
+        minlength: 'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMinimumLengthOf{0}[{{ requiredLength }}]',
+        ngbDate: 'AbpValidation::ThisFieldIsNotValid.',
+        passwordMismatch: 'AbpIdentity::Volo.Abp.Identity:PasswordConfirmationFailed',
+        range: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
+        required: 'AbpValidation::ThisFieldIsRequired.',
+        url: 'AbpValidation::ThisFieldIsNotAValidFullyQualifiedHttpHttpsOrFtpUrl',
     };
 
-    var ToasterService = /** @class */ (function () {
-        function ToasterService(contentProjectionService) {
-            this.contentProjectionService = contentProjectionService;
-            this.toasts$ = new rxjs.ReplaySubject(1);
-            this.lastId = -1;
-            this.toasts = [];
+    var EllipsisDirective = /** @class */ (function () {
+        function EllipsisDirective(cdRef, elRef) {
+            this.cdRef = cdRef;
+            this.elRef = elRef;
+            this.enabled = true;
         }
-        ToasterService.prototype.setContainer = function () {
-            this.containerComponentRef = this.contentProjectionService.projectContent(i1.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
-         */
-        ToasterService.prototype.info = function (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
-         */
-        ToasterService.prototype.success = function (message, title, options) {
-            return this.show(message, title, 'success', options);
+        Object.defineProperty(EllipsisDirective.prototype, "inlineClass", {
+            get: function () {
+                return this.enabled && this.width;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EllipsisDirective.prototype, "class", {
+            get: function () {
+                return this.enabled && !this.width;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        Object.defineProperty(EllipsisDirective.prototype, "maxWidth", {
+            get: function () {
+                return this.enabled && this.width ? this.width || '170px' : undefined;
+            },
+            enumerable: false,
+            configurable: true
+        });
+        EllipsisDirective.prototype.ngAfterViewInit = function () {
+            this.title = this.title || this.elRef.nativeElement.innerText;
+            this.cdRef.detectChanges();
         };
-        /**
-         * 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
-         */
-        ToasterService.prototype.warn = function (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
-         */
-        ToasterService.prototype.error = function (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
-         */
-        ToasterService.prototype.show = function (message, title, severity, options) {
-            if (title === void 0) { title = null; }
-            if (severity === void 0) { severity = 'neutral'; }
-            if (options === void 0) { options = {}; }
-            if (!this.containerComponentRef)
-                this.setContainer();
-            var id = ++this.lastId;
-            this.toasts.push({
-                message: message,
-                title: title,
-                severity: severity,
-                options: Object.assign({ closable: true, id: id }, options),
-            });
-            this.toasts$.next(this.toasts);
-            return id;
-        };
-        /**
-         * Removes the toast with given id.
-         * @param id ID of the toast to be removed.
-         */
-        ToasterService.prototype.remove = function (id) {
-            this.toasts = this.toasts.filter(function (toast) { return snq__default['default'](function () { return toast.options.id; }) !== id; });
-            this.toasts$.next(this.toasts);
-        };
-        /**
-         * Removes all open toasts at once.
-         */
-        ToasterService.prototype.clear = function (containerKey) {
-            this.toasts = !containerKey
-                ? []
-                : this.toasts.filter(function (toast) { return snq__default['default'](function () { return toast.options.containerKey; }) !== containerKey; });
-            this.toasts$.next(this.toasts);
-        };
-        return ToasterService;
+        return EllipsisDirective;
     }());
-    ToasterService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ToasterService_Factory() { return new ToasterService(i0__namespace.ɵɵinject(i1__namespace.ContentProjectionService)); }, token: ToasterService, providedIn: "root" });
-    ToasterService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    ToasterService.ctorParameters = function () { return [
-        { type: i1.ContentProjectionService }
-    ]; };
-
-    var ToastComponent = /** @class */ (function () {
-        function ToastComponent(toasterService) {
-            this.toasterService = toasterService;
+    EllipsisDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: EllipsisDirective, deps: [{ token: i0__namespace.ChangeDetectorRef }, { token: i0__namespace.ElementRef }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    EllipsisDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: EllipsisDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        selector: '[abpEllipsis]',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ChangeDetectorRef }, { type: i0__namespace.ElementRef }]; }, propDecorators: { width: [{
+                    type: i0.Input,
+                    args: ['abpEllipsis']
+                }], title: [{
+                    type: i0.HostBinding,
+                    args: ['title']
+                }, {
+                    type: i0.Input
+                }], enabled: [{
+                    type: i0.Input,
+                    args: ['abpEllipsisEnabled']
+                }], inlineClass: [{
+                    type: i0.HostBinding,
+                    args: ['class.abp-ellipsis-inline']
+                }], class: [{
+                    type: i0.HostBinding,
+                    args: ['class.abp-ellipsis']
+                }], maxWidth: [{
+                    type: i0.HostBinding,
+                    args: ['style.max-width']
+                }] } });
+    var EllipsisModule = /** @class */ (function () {
+        function EllipsisModule() {
         }
-        Object.defineProperty(ToastComponent.prototype, "severityClass", {
-            get: function () {
-                if (!this.toast || !this.toast.severity)
-                    return '';
-                return "abp-toast-" + this.toast.severity;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(ToastComponent.prototype, "iconClass", {
-            get: function () {
-                switch (this.toast.severity) {
-                    case 'success':
-                        return 'fa-check-circle';
-                    case 'info':
-                        return 'fa-info-circle';
-                    case 'warning':
-                        return 'fa-exclamation-triangle';
-                    case 'error':
-                        return 'fa-times-circle';
-                    default:
-                        return 'fa-exclamation-circle';
-                }
-            },
-            enumerable: false,
-            configurable: true
-        });
-        ToastComponent.prototype.ngOnInit = function () {
-            var _this = this;
-            if (snq__default['default'](function () { return _this.toast.options.sticky; }))
-                return;
-            var timeout = snq__default['default'](function () { return _this.toast.options.life; }) || 5000;
-            setTimeout(function () {
-                _this.close();
-            }, timeout);
-        };
-        ToastComponent.prototype.close = function () {
-            this.toasterService.remove(this.toast.options.id);
-        };
-        ToastComponent.prototype.tap = function () {
-            var _a;
-            if ((_a = this.toast.options) === null || _a === void 0 ? void 0 : _a.tapToDismiss)
-                this.close();
-        };
-        return ToastComponent;
+        return EllipsisModule;
     }());
-    ToastComponent.decorators = [
-        { type: i0.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 = function () { return [
-        { type: ToasterService }
-    ]; };
-    ToastComponent.propDecorators = {
-        toast: [{ type: i0.Input }]
-    };
-
-    var styles = "\n.is-invalid .form-control {\n  border-color: #dc3545;\n  border-style: solid !important;\n  padding-right: calc(1.5em + .75rem);\n  background-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545' viewBox='0 0 12 12'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e);\n  background-repeat: no-repeat;\n  background-position: right calc(.375em + .1875rem) center;\n  background-size: calc(.75em + .375rem) calc(.75em + .375rem);\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n  display: block;\n}\n\n.data-tables-filter {\n  text-align: right;\n}\n\n[dir=rtl] .data-tables-filter {\n  text-align: left;\n}\n\n.pointer {\n  cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n  transform: rotate(-90deg);\n  position: absolute;\n  right: 16px;\n  top: 18px;\n}\n\n.navbar .dropdown-menu {\n  min-width: 215px;\n}\n\n.datatable-scroll {\n  margin-bottom: 5px !important;\n  width: unset !important;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar {\n  height: 5px !important;\n  width: 5px !important;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar-track {\n  background: #ddd;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar-thumb {\n  background: #8a8686;\n}\n\n.abp-ellipsis-inline {\n  display: inline-block;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.abp-ellipsis {\n  overflow: hidden !important;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ui-widget-overlay {\n  z-index: 1000;\n}\n\n.color-white {\n  color: #FFF !important;\n}\n\n.custom-checkbox > label {\n  cursor: pointer;\n}\n\n/* <animations */\n\n.fade-in-top {\n  animation: fadeInTop 0.2s ease-in-out;\n}\n\n.fade-out-top {\n  animation: fadeOutTop 0.2s ease-in-out;\n}\n\n.abp-collapsed-height {\n  -moz-transition: max-height linear 0.35s;\n  -ms-transition: max-height linear 0.35s;\n  -o-transition: max-height linear 0.35s;\n  -webkit-transition: max-height linear 0.35s;\n  overflow:hidden;\n  transition:max-height 0.35s linear;\n  height:auto;\n  max-height: 0;\n}\n\n.abp-mh-25 {\n  max-height: 25vh;\n}\n\n.abp-mh-50 {\n  transition:max-height 0.65s linear;\n  max-height: 50vh;\n}\n\n.abp-mh-75 {\n  transition:max-height 0.85s linear;\n  max-height: 75vh;\n}\n\n.abp-mh-100 {\n  transition:max-height 1s linear;\n  max-height: 100vh;\n}\n\n[class^=\"sorting\"] {\n  opacity: .3;\n  cursor: pointer;\n}\n[class^=\"sorting\"]:before {\n  right: 0.5rem;\n  content: \"\u2191\";\n}\n[class^=\"sorting\"]:after {\n  right: 0.5rem;\n  content: \"\u2193\";\n}\n\n.sorting_desc {\n  opacity: 1;\n}\n.sorting_desc:before {\n  opacity: .3;\n}\n\n.sorting_asc {\n  opacity: 1;\n}\n.sorting_asc:after {\n  opacity: .3;\n}\n.ngx-datatable.material {\n  box-shadow: none;\n}\nngb-typeahead-window, ngb-typeahead-window.dropdown-menu {\n  max-height: 25em;\n  overflow-y: scroll !important;\n  z-index: 1050;\n}\n\n@keyframes fadeInTop {\n  from {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n\n  to {\n    transform: translateY(0px);\n    opacity: 1;\n  }\n}\n\n@keyframes fadeOutTop {\n  to {\n    transform: translateY(-5px);\n    opacity: 0;\n  }\n}\n\n/* </animations */\n\n";
-    var BOOTSTRAP = 'bootstrap-{{dir}}.min.css';
-
-    var DEFAULT_VALIDATION_BLUEPRINTS = {
-        creditCard: 'AbpValidation::ThisFieldIsNotAValidCreditCardNumber.',
-        email: 'AbpValidation::ThisFieldIsNotAValidEmailAddress.',
-        invalid: 'AbpValidation::ThisFieldIsNotValid.',
-        max: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
-        maxlength: 'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMaximumLengthOf{0}[{{ requiredLength }}]',
-        min: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
-        minlength: 'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMinimumLengthOf{0}[{{ requiredLength }}]',
-        ngbDate: 'AbpValidation::ThisFieldIsNotValid.',
-        passwordMismatch: 'AbpIdentity::Volo.Abp.Identity:PasswordConfirmationFailed',
-        range: 'AbpValidation::ThisFieldMustBeBetween{0}And{1}[{{ min }},{{ max }}]',
-        required: 'AbpValidation::ThisFieldIsRequired.',
-        url: 'AbpValidation::ThisFieldIsNotAValidFullyQualifiedHttpHttpsOrFtpUrl',
-    };
+    EllipsisModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: EllipsisModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    EllipsisModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: EllipsisModule, declarations: [EllipsisDirective], exports: [EllipsisDirective] });
+    EllipsisModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: EllipsisModule });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: EllipsisModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        exports: [EllipsisDirective],
+                        declarations: [EllipsisDirective],
+                    }]
+            }] });
 
     var LoadingDirective = /** @class */ (function () {
         function LoadingDirective(elRef, vcRef, cdRes, injector, renderer) {
@@ -1759,22 +1433,24 @@
         };
         return LoadingDirective;
     }());
-    LoadingDirective.decorators = [
-        { type: i0.Directive, args: [{ selector: '[abpLoading]' },] }
-    ];
-    LoadingDirective.ctorParameters = function () { return [
-        { type: i0.ElementRef },
-        { type: i0.ViewContainerRef },
-        { type: i0.ComponentFactoryResolver },
-        { type: i0.Injector },
-        { type: i0.Renderer2 }
-    ]; };
-    LoadingDirective.propDecorators = {
-        position: [{ type: i0.HostBinding, args: ['style.position',] }],
-        loading: [{ type: i0.Input, args: ['abpLoading',] }],
-        targetElement: [{ type: i0.Input, args: ['abpLoadingTargetElement',] }],
-        delay: [{ type: i0.Input, args: ['abpLoadingDelay',] }]
-    };
+    LoadingDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: LoadingDirective, deps: [{ token: i0__namespace.ElementRef }, { token: i0__namespace.ViewContainerRef }, { token: i0__namespace.ComponentFactoryResolver }, { token: i0__namespace.Injector }, { token: i0__namespace.Renderer2 }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    LoadingDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: LoadingDirective, decorators: [{
+                type: i0.Directive,
+                args: [{ selector: '[abpLoading]' }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.ElementRef }, { type: i0__namespace.ViewContainerRef }, { type: i0__namespace.ComponentFactoryResolver }, { type: i0__namespace.Injector }, { type: i0__namespace.Renderer2 }]; }, propDecorators: { position: [{
+                    type: i0.HostBinding,
+                    args: ['style.position']
+                }], loading: [{
+                    type: i0.Input,
+                    args: ['abpLoading']
+                }], targetElement: [{
+                    type: i0.Input,
+                    args: ['abpLoadingTargetElement']
+                }], delay: [{
+                    type: i0.Input,
+                    args: ['abpLoadingDelay']
+                }] } });
 
     var NgxDatatableDefaultDirective = /** @class */ (function () {
         function NgxDatatableDefaultDirective(table, document) {
@@ -1783,7 +1459,7 @@
             this.subscription = new rxjs.Subscription();
             this.resizeDiff = 0;
             this.class = 'material bordered';
-            this.table.columnMode = ngxDatatable.ColumnMode.force;
+            this.table.columnMode = i1$2.ColumnMode.force;
             this.table.footerHeight = 50;
             this.table.headerHeight = 50;
             this.table.rowHeight = 'auto';
@@ -1831,21 +1507,26 @@
         };
         return NgxDatatableDefaultDirective;
     }());
-    NgxDatatableDefaultDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    // tslint:disable-next-line
-                    selector: 'ngx-datatable[default]',
-                    exportAs: 'ngxDatatableDefault',
-                },] }
-    ];
-    NgxDatatableDefaultDirective.ctorParameters = function () { return [
-        { type: ngxDatatable.DatatableComponent },
-        { type: undefined, decorators: [{ type: i0.Inject, args: [common.DOCUMENT,] }] }
-    ]; };
-    NgxDatatableDefaultDirective.propDecorators = {
-        class: [{ type: i0.Input }],
-        classes: [{ type: i0.HostBinding, args: ['class',] }]
-    };
+    NgxDatatableDefaultDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: NgxDatatableDefaultDirective, deps: [{ token: i1__namespace$2.DatatableComponent }, { token: i1.DOCUMENT }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    NgxDatatableDefaultDirective.ɵdir = i0__namespace.ɵɵ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__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: NgxDatatableDefaultDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'ngx-datatable[default]',
+                        exportAs: 'ngxDatatableDefault',
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i1__namespace$2.DatatableComponent }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i1.DOCUMENT]
+                        }] }];
+        }, propDecorators: { class: [{
+                    type: i0.Input
+                }], classes: [{
+                    type: i0.HostBinding,
+                    args: ['class']
+                }] } });
 
     var defaultNgxDatatableMessages = {
         emptyMessage: 'AbpUi::NoDataAvailableInDatatable',
@@ -1929,129 +1610,25 @@
         };
         return NgxDatatableListDirective;
     }());
-    NgxDatatableListDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    // tslint:disable-next-line
-                    selector: 'ngx-datatable[list]',
-                    exportAs: 'ngxDatatableList',
-                },] }
-    ];
-    NgxDatatableListDirective.ctorParameters = function () { return [
-        { type: ngxDatatable.DatatableComponent },
-        { type: i0.ChangeDetectorRef },
-        { type: i1.LocalizationService },
-        { type: undefined, decorators: [{ type: i0.Optional }, { type: i0.Inject, args: [NGX_DATATABLE_MESSAGES,] }] }
-    ]; };
-    NgxDatatableListDirective.propDecorators = {
-        list: [{ type: i0.Input }]
-    };
-
-    /**
-     *
-     * @deprecated To be deleted in v5.0
-     */
-    var TableSortDirective = /** @class */ (function () {
-        function TableSortDirective(abpTable, sortPipe, cdRef) {
-            this.abpTable = abpTable;
-            this.sortPipe = sortPipe;
-            this.cdRef = cdRef;
-            this.value = [];
-        }
-        Object.defineProperty(TableSortDirective.prototype, "table", {
-            get: function () {
-                var _this = this;
-                return (this.abpTable || snq__default['default'](function () { return _this.cdRef['_view'].component; }) || snq__default['default'](function () { return _this.cdRef['context']; }) // 'context' for ivy
-                );
-            },
-            enumerable: false,
-            configurable: true
-        });
-        TableSortDirective.prototype.ngOnChanges = function (_a) {
-            var value = _a.value, abpTableSort = _a.abpTableSort;
-            if (this.table && (value || abpTableSort)) {
-                this.abpTableSort = this.abpTableSort || {};
-                this.table.value = this.sortPipe.transform(clone__default['default'](this.value), this.abpTableSort.order, this.abpTableSort.key);
-            }
-        };
-        return TableSortDirective;
-    }());
-    TableSortDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[abpTableSort]',
-                    providers: [i1.SortPipe],
-                },] }
-    ];
-    TableSortDirective.ctorParameters = function () { return [
-        { type: TableComponent, decorators: [{ type: i0.Host }, { type: i0.Optional }, { type: i0.Self }] },
-        { type: i1.SortPipe },
-        { type: i0.ChangeDetectorRef }
-    ]; };
-    TableSortDirective.propDecorators = {
-        abpTableSort: [{ type: i0.Input }],
-        value: [{ type: i0.Input }]
-    };
-
-    var EllipsisDirective = /** @class */ (function () {
-        function EllipsisDirective(cdRef, elRef) {
-            this.cdRef = cdRef;
-            this.elRef = elRef;
-            this.enabled = true;
-        }
-        Object.defineProperty(EllipsisDirective.prototype, "inlineClass", {
-            get: function () {
-                return this.enabled && this.width;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(EllipsisDirective.prototype, "class", {
-            get: function () {
-                return this.enabled && !this.width;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        Object.defineProperty(EllipsisDirective.prototype, "maxWidth", {
-            get: function () {
-                return this.enabled && this.width ? this.width || '170px' : undefined;
-            },
-            enumerable: false,
-            configurable: true
-        });
-        EllipsisDirective.prototype.ngAfterViewInit = function () {
-            this.title = this.title || this.elRef.nativeElement.innerText;
-            this.cdRef.detectChanges();
-        };
-        return EllipsisDirective;
-    }());
-    EllipsisDirective.decorators = [
-        { type: i0.Directive, args: [{
-                    selector: '[abpEllipsis]',
-                },] }
-    ];
-    EllipsisDirective.ctorParameters = function () { return [
-        { type: i0.ChangeDetectorRef },
-        { type: i0.ElementRef }
-    ]; };
-    EllipsisDirective.propDecorators = {
-        width: [{ type: i0.Input, args: ['abpEllipsis',] }],
-        title: [{ type: i0.HostBinding, args: ['title',] }, { type: i0.Input }],
-        enabled: [{ type: i0.Input, args: ['abpEllipsisEnabled',] }],
-        inlineClass: [{ type: i0.HostBinding, args: ['class.abp-ellipsis-inline',] }],
-        class: [{ type: i0.HostBinding, args: ['class.abp-ellipsis',] }],
-        maxWidth: [{ type: i0.HostBinding, args: ['style.max-width',] }]
-    };
-    var EllipsisModule = /** @class */ (function () {
-        function EllipsisModule() {
-        }
-        return EllipsisModule;
-    }());
-    EllipsisModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    exports: [EllipsisDirective],
-                    declarations: [EllipsisDirective],
-                },] }
-    ];
+    NgxDatatableListDirective.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: NgxDatatableListDirective, deps: [{ token: i1__namespace$2.DatatableComponent }, { token: i0__namespace.ChangeDetectorRef }, { token: i2__namespace.LocalizationService }, { token: NGX_DATATABLE_MESSAGES, optional: true }], target: i0__namespace.ɵɵFactoryTarget.Directive });
+    NgxDatatableListDirective.ɵdir = i0__namespace.ɵɵngDeclareDirective({ minVersion: "12.0.0", version: "12.2.6", type: NgxDatatableListDirective, selector: "ngx-datatable[list]", inputs: { list: "list" }, exportAs: ["ngxDatatableList"], usesOnChanges: true, ngImport: i0__namespace });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: NgxDatatableListDirective, decorators: [{
+                type: i0.Directive,
+                args: [{
+                        // eslint-disable-next-line @angular-eslint/directive-selector
+                        selector: 'ngx-datatable[list]',
+                        exportAs: 'ngxDatatableList',
+                    }]
+            }], ctorParameters: function () {
+            return [{ type: i1__namespace$2.DatatableComponent }, { type: i0__namespace.ChangeDetectorRef }, { type: i2__namespace.LocalizationService }, { type: undefined, decorators: [{
+                            type: i0.Optional
+                        }, {
+                            type: i0.Inject,
+                            args: [NGX_DATATABLE_MESSAGES]
+                        }] }];
+        }, propDecorators: { list: [{
+                    type: i0.Input
+                }] } });
 
     function httpErrorConfigFactory(config) {
         if (config === void 0) { config = {}; }
@@ -2108,15 +1685,9 @@
         },
     };
     var ErrorHandler = /** @class */ (function () {
-        function ErrorHandler(actions, routerEvents, confirmationService, cfRes, rendererFactory, injector, httpErrorConfig) {
+        function ErrorHandler(injector) {
             var _this = this;
-            this.actions = actions;
-            this.routerEvents = routerEvents;
-            this.confirmationService = confirmationService;
-            this.cfRes = cfRes;
-            this.rendererFactory = rendererFactory;
             this.injector = injector;
-            this.httpErrorConfig = httpErrorConfig;
             this.httpErrorHandler = this.injector.get(HTTP_ERROR_HANDLER, function (_, err) { return rxjs.throwError(err); });
             this.executeErrorHandler = function (error) {
                 var returnValue = _this.httpErrorHandler(_this.injector, error);
@@ -2125,16 +1696,23 @@
                     return rxjs.of(null);
                 }));
             };
-            this.filterRestErrors = function (_a) {
-                var status = _a.status;
+            this.filterRestErrors = function (_f) {
+                var status = _f.status;
                 if (typeof status !== 'number')
                     return false;
                 return _this.httpErrorConfig.skipHandledErrorCodes.findIndex(function (code) { return code === status; }) < 0;
             };
             this.filterRouteErrors = function (navigationError) {
-                return (snq__default['default'](function () { return 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(function (code) { return code === 404; }) < 0);
             };
+            this.httpErrorReporter = injector.get(i2.HttpErrorReporterService);
+            this.routerEvents = injector.get(i2.RouterEvents);
+            this.confirmationService = injector.get(ConfirmationService);
+            this.cfRes = injector.get(i0.ComponentFactoryResolver);
+            this.rendererFactory = injector.get(i0.RendererFactory2);
+            this.httpErrorConfig = injector.get('HTTP_ERROR_CONFIG');
             this.listenToRestError();
             this.listenToRouterError();
             this.listenToRouterDataResolved();
@@ -2149,7 +1727,7 @@
         ErrorHandler.prototype.listenToRouterDataResolved = function () {
             var _this = this;
             this.routerEvents
-                .getEvents(router.ResolveEnd)
+                .getEvents(i1$1.ResolveEnd)
                 .pipe(operators.filter(function () { return !!_this.componentRef; }))
                 .subscribe(function () {
                 _this.componentRef.destroy();
@@ -2157,16 +1735,17 @@
             });
         };
         ErrorHandler.prototype.listenToRestError = function () {
-            this.actions
-                .pipe(i1$1.ofActionSuccessful(i1.RestOccurError), operators.map(function (action) { return action.payload; }), operators.filter(this.filterRestErrors), operators.switchMap(this.executeErrorHandler))
+            this.httpErrorReporter.reporter$
+                .pipe(operators.filter(this.filterRestErrors), operators.switchMap(this.executeErrorHandler))
                 .subscribe();
         };
         ErrorHandler.prototype.handleError = function (err) {
             var _this = this;
-            var body = snq__default['default'](function () { return err.error.error; }, {
+            var _a;
+            var 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 http.HttpErrorResponse && err.headers.get('_AbpErrorFormat')) {
                 var confirmation$ = this.showError(null, null, body);
                 if (err.status === 401) {
@@ -2293,7 +1872,7 @@
             });
         };
         ErrorHandler.prototype.navigateToLogin = function () {
-            this.injector.get(i1.AuthService).navigateToLogin();
+            this.injector.get(i2.AuthService).navigateToLogin();
         };
         ErrorHandler.prototype.createErrorComponent = function (instance) {
             var _this = this;
@@ -2304,7 +1883,7 @@
                 .create(this.injector);
             for (var 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];
                 }
             }
@@ -2326,25 +1905,18 @@
             });
         };
         ErrorHandler.prototype.canCreateCustomError = function (status) {
-            var _this = this;
-            return snq__default['default'](function () { return _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);
         };
         return ErrorHandler;
     }());
-    ErrorHandler.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ErrorHandler_Factory() { return new ErrorHandler(i0__namespace.ɵɵinject(i1__namespace$1.Actions), i0__namespace.ɵɵinject(i1__namespace.RouterEvents), i0__namespace.ɵɵinject(ConfirmationService), i0__namespace.ɵɵinject(i0__namespace.ComponentFactoryResolver), i0__namespace.ɵɵinject(i0__namespace.RendererFactory2), i0__namespace.ɵɵinject(i0__namespace.INJECTOR), i0__namespace.ɵɵinject("HTTP_ERROR_CONFIG")); }, token: ErrorHandler, providedIn: "root" });
-    ErrorHandler.decorators = [
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
-    ];
-    ErrorHandler.ctorParameters = function () { return [
-        { type: i1$1.Actions },
-        { type: i1.RouterEvents },
-        { type: ConfirmationService },
-        { type: i0.ComponentFactoryResolver },
-        { type: i0.RendererFactory2 },
-        { type: i0.Injector },
-        { type: undefined, decorators: [{ type: i0.Inject, args: ['HTTP_ERROR_CONFIG',] }] }
-    ]; };
+    ErrorHandler.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ErrorHandler, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ErrorHandler.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ErrorHandler, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ErrorHandler, decorators: [{
+                type: i0.Injectable,
+                args: [{ providedIn: 'root' }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; } });
 
     var LAZY_STYLES = new i0.InjectionToken('LAZY_STYLES');
 
@@ -2385,17 +1957,17 @@
         };
         LazyStyleHandler.prototype.listenToLanguageChanges = function (injector) {
             var _this = this;
-            var l10n = injector.get(i1.LocalizationService);
+            var l10n = injector.get(i2.LocalizationService);
             // will always listen, no need to unsubscribe
             l10n.languageChange$.pipe(operators.startWith(l10n.currentLang)).subscribe(function (locale) {
-                _this.dir = i1.getLocaleDirection(locale);
+                _this.dir = i2.getLocaleDirection(locale);
             });
         };
         LazyStyleHandler.prototype.setBodyDir = function (dir) {
             document.body.dir = dir;
         };
         LazyStyleHandler.prototype.setLazyLoad = function (injector) {
-            this.lazyLoad = injector.get(i1.LazyLoadService);
+            this.lazyLoad = injector.get(i2.LazyLoadService);
             var _a = this.getLoadedBootstrap(), href = _a.href, link = _a.link;
             this.lazyLoad.loaded.set(href, link);
         };
@@ -2409,7 +1981,7 @@
                 var newHref = createLazyStyleHref(style, dir);
                 var link = _this.loaded.get(newHref);
                 var href = _this.getHrefFromLink(link) || newHref;
-                var strategy = i1.LOADING_STRATEGY.PrependAnonymousStyleToHead(href);
+                var strategy = i2.LOADING_STRATEGY.PrependAnonymousStyleToHead(href);
                 _this.lazyLoad.load(strategy).subscribe(function () {
                     var oldLink = _this.lazyLoad.loaded.get(oldHref);
                     _this.loaded.delete(newHref);
@@ -2423,15 +1995,14 @@
         };
         return LazyStyleHandler;
     }());
-    LazyStyleHandler.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function LazyStyleHandler_Factory() { return new LazyStyleHandler(i0__namespace.ɵɵinject(i0__namespace.INJECTOR)); }, token: LazyStyleHandler, providedIn: "root" });
-    LazyStyleHandler.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    LazyStyleHandler.ctorParameters = function () { return [
-        { type: i0.Injector }
-    ]; };
+    LazyStyleHandler.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: LazyStyleHandler, deps: [{ token: i0__namespace.Injector }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    LazyStyleHandler.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: LazyStyleHandler, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: LazyStyleHandler, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }], ctorParameters: function () { return [{ type: i0__namespace.Injector }]; } });
     function createLazyStyleHref(style, dir) {
         return style.replace(/{{\s*dir\s*}}/g, dir);
     }
@@ -2451,7 +2022,7 @@
         {
             provide: i0.APP_INITIALIZER,
             useFactory: configureNgBootstrap,
-            deps: [ngBootstrap.NgbInputDatepickerConfig, ngBootstrap.NgbTypeaheadConfig],
+            deps: [i3.NgbInputDatepickerConfig, i3.NgbTypeaheadConfig],
             multi: true,
         },
     ];
@@ -2463,7 +2034,7 @@
     }
 
     var THEME_SHARED_ROUTE_PROVIDERS = [
-        { provide: i0.APP_INITIALIZER, useFactory: configureRoutes, deps: [i1.RoutesService], multi: true },
+        { provide: i0.APP_INITIALIZER, useFactory: configureRoutes, deps: [i2.RoutesService], multi: true },
     ];
     function configureRoutes(routesService) {
         return function () {
@@ -2478,66 +2049,6 @@
         };
     }
 
-    /**
-     * @deprecated To be removed in v5.0
-     */
-    var ModalContainerComponent = /** @class */ (function () {
-        function ModalContainerComponent() {
-        }
-        return ModalContainerComponent;
-    }());
-    ModalContainerComponent.decorators = [
-        { type: i0.Component, args: [{
-                    selector: 'abp-modal-container',
-                    template: '<ng-container #container></ng-container>'
-                },] }
-    ];
-    ModalContainerComponent.propDecorators = {
-        container: [{ type: i0.ViewChild, args: ['container', { static: true, read: i0.ViewContainerRef },] }]
-    };
-
-    /**
-     * @deprecated Use ng-bootstrap modal. To be deleted in v5.0.
-     */
-    var ModalService = /** @class */ (function () {
-        function ModalService(contentProjectionService) {
-            this.contentProjectionService = contentProjectionService;
-            this.setContainer();
-        }
-        ModalService.prototype.setContainer = function () {
-            this.containerComponentRef = this.contentProjectionService.projectContent(i1.PROJECTION_STRATEGY.AppendComponentToBody(ModalContainerComponent));
-            this.containerComponentRef.changeDetectorRef.detectChanges();
-        };
-        ModalService.prototype.clearModal = function () {
-            this.getContainer().clear();
-            this.detectChanges();
-        };
-        ModalService.prototype.detectChanges = function () {
-            this.containerComponentRef.changeDetectorRef.detectChanges();
-        };
-        ModalService.prototype.getContainer = function () {
-            return this.containerComponentRef.instance.container;
-        };
-        ModalService.prototype.renderTemplate = function (template, context) {
-            var containerRef = this.getContainer();
-            var strategy = i1.PROJECTION_STRATEGY.ProjectTemplateToContainer(template, containerRef, context);
-            this.contentProjectionService.projectContent(strategy);
-        };
-        ModalService.prototype.ngOnDestroy = function () {
-            this.containerComponentRef.destroy();
-        };
-        return ModalService;
-    }());
-    ModalService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function ModalService_Factory() { return new ModalService(i0__namespace.ɵɵinject(i1__namespace.ContentProjectionService)); }, token: ModalService, providedIn: "root" });
-    ModalService.decorators = [
-        { type: i0.Injectable, args: [{
-                    providedIn: 'root',
-                },] }
-    ];
-    ModalService.ctorParameters = function () { return [
-        { type: i1.ContentProjectionService }
-    ]; };
-
     var NavItemsService = /** @class */ (function () {
         function NavItemsService() {
             this._items$ = new rxjs.BehaviorSubject([]);
@@ -2557,7 +2068,7 @@
             configurable: true
         });
         NavItemsService.prototype.addItems = function (newItems) {
-            var items = __spread(this.items);
+            var items = __spreadArray([], __read(this.items));
             newItems.forEach(function (item) { return items.push(new NavItem(item)); });
             items.sort(sortItems);
             this._items$.next(items);
@@ -2566,24 +2077,26 @@
             var index = this.items.findIndex(function (item) { return item.id === id; });
             if (index < 0)
                 return;
-            var items = __spread(this.items.slice(0, index), this.items.slice(index + 1));
+            var items = __spreadArray(__spreadArray([], __read(this.items.slice(0, index))), __read(this.items.slice(index + 1)));
             this._items$.next(items);
         };
         NavItemsService.prototype.patchItem = function (id, item) {
             var index = this.items.findIndex(function (i) { return i.id === id; });
             if (index < 0)
                 return;
-            var items = __spread(this.items);
+            var items = __spreadArray([], __read(this.items));
             items[index] = new NavItem(Object.assign(Object.assign({}, items[index]), item));
             items.sort(sortItems);
             this._items$.next(items);
         };
         return NavItemsService;
     }());
-    NavItemsService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function NavItemsService_Factory() { return new NavItemsService(); }, token: NavItemsService, providedIn: "root" });
-    NavItemsService.decorators = [
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
-    ];
+    NavItemsService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: NavItemsService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    NavItemsService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: NavItemsService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: NavItemsService, decorators: [{
+                type: i0.Injectable,
+                args: [{ providedIn: 'root' }]
+            }] });
     function sortItems(a, b) {
         if (!a.order)
             return 1;
@@ -2594,33 +2107,135 @@
 
     var PageAlertService = /** @class */ (function () {
         function PageAlertService() {
-            this.alerts = new i1.InternalStore([]);
+            this.alerts = new i2.InternalStore([]);
             this.alerts$ = this.alerts.sliceState(function (state) { return state; });
         }
         PageAlertService.prototype.show = function (alert) {
             var _a;
             var newAlert = Object.assign(Object.assign({}, alert), { dismissible: (_a = alert.dismissible) !== null && _a !== void 0 ? _a : true });
-            this.alerts.set(__spread([newAlert], this.alerts.state));
+            this.alerts.set(__spreadArray([newAlert], __read(this.alerts.state)));
         };
         PageAlertService.prototype.remove = function (index) {
-            var alerts = __spread(this.alerts.state);
+            var alerts = __spreadArray([], __read(this.alerts.state));
             alerts.splice(index, 1);
             this.alerts.set(alerts);
         };
         return PageAlertService;
     }());
-    PageAlertService.ɵprov = i0__namespace.ɵɵdefineInjectable({ factory: function PageAlertService_Factory() { return new PageAlertService(); }, token: PageAlertService, providedIn: "root" });
-    PageAlertService.decorators = [
-        { type: i0.Injectable, args: [{ providedIn: 'root' },] }
-    ];
-    PageAlertService.ctorParameters = function () { return []; };
+    PageAlertService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: PageAlertService, deps: [], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    PageAlertService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: PageAlertService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: PageAlertService, decorators: [{
+                type: i0.Injectable,
+                args: [{ providedIn: 'root' }]
+            }], ctorParameters: function () { return []; } });
+
+    var ToasterService = /** @class */ (function () {
+        function ToasterService(contentProjectionService) {
+            var _this = this;
+            this.contentProjectionService = contentProjectionService;
+            this.toasts$ = new rxjs.ReplaySubject(1);
+            this.lastId = -1;
+            this.toasts = [];
+            /**
+             * Removes the toast with given id.
+             * @param id ID of the toast to be removed.
+             */
+            this.remove = function (id) {
+                _this.toasts = _this.toasts.filter(function (toast) { var _a; return ((_a = toast.options) === null || _a === void 0 ? void 0 : _a.id) !== id; });
+                _this.toasts$.next(_this.toasts);
+            };
+        }
+        ToasterService.prototype.setContainer = function () {
+            this.containerComponentRef = this.contentProjectionService.projectContent(i2.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
+         */
+        ToasterService.prototype.info = function (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
+         */
+        ToasterService.prototype.success = function (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
+         */
+        ToasterService.prototype.warn = function (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
+         */
+        ToasterService.prototype.error = function (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
+         */
+        ToasterService.prototype.show = function (message, title, severity, options) {
+            if (title === void 0) { title = null; }
+            if (severity === void 0) { severity = 'neutral'; }
+            if (options === void 0) { options = {}; }
+            if (!this.containerComponentRef)
+                this.setContainer();
+            var id = ++this.lastId;
+            this.toasts.push({
+                message: message,
+                title: title,
+                severity: severity,
+                options: Object.assign({ closable: true, id: id }, options),
+            });
+            this.toasts$.next(this.toasts);
+            return id;
+        };
+        /**
+         * Removes all open toasts at once.
+         */
+        ToasterService.prototype.clear = function (containerKey) {
+            this.toasts = !containerKey
+                ? []
+                : this.toasts.filter(function (toast) { var _a; return ((_a = toast.options) === null || _a === void 0 ? void 0 : _a.containerKey) !== containerKey; });
+            this.toasts$.next(this.toasts);
+        };
+        return ToasterService;
+    }());
+    ToasterService.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ToasterService, deps: [{ token: i2__namespace.ContentProjectionService }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    ToasterService.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ToasterService, providedIn: 'root' });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ToasterService, decorators: [{
+                type: i0.Injectable,
+                args: [{
+                        providedIn: 'root',
+                    }]
+            }], ctorParameters: function () { return [{ type: i2__namespace.ContentProjectionService }]; } });
 
     var THEME_SHARED_APPEND_CONTENT = new i0.InjectionToken('THEME_SHARED_APPEND_CONTENT', {
         providedIn: 'root',
         factory: function () {
-            var domInsertion = i0.inject(i1.DomInsertionService);
-            domInsertion.insertContent(i1.CONTENT_STRATEGY.AppendStyleToHead(styles));
-            import('chart.js').then(function () { return chartJsLoaded$.next(true); });
+            var domInsertion = i0.inject(i2.DomInsertionService);
+            domInsertion.insertContent(i2.CONTENT_STRATEGY.AppendStyleToHead(styles));
         },
     });
 
@@ -2661,39 +2276,39 @@
             return null;
         };
         DateParserFormatter.prototype.format = function (date) {
+            var _a, _b;
             if (!date)
                 return '';
             var localization = this.configState.getOne('localization');
-            var dateFormat = snq__default['default'](function () { return localization.currentCulture.dateTimeFormat.shortDatePattern; }) || 'yyyy-MM-dd';
-            return common.formatDate(new Date(date.year, date.month - 1, date.day), dateFormat, this.locale);
+            var 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 i1.formatDate(new Date(date.year, date.month - 1, date.day), dateFormat, this.locale);
         };
         return DateParserFormatter;
-    }(ngBootstrap.NgbDateParserFormatter));
-    DateParserFormatter.decorators = [
-        { type: i0.Injectable }
-    ];
-    DateParserFormatter.ctorParameters = function () { return [
-        { type: i1.ConfigStateService },
-        { type: String, decorators: [{ type: i0.Inject, args: [i0.LOCALE_ID,] }] }
-    ]; };
+    }(i3.NgbDateParserFormatter));
+    DateParserFormatter.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateParserFormatter, deps: [{ token: i2__namespace.ConfigStateService }, { token: i0.LOCALE_ID }], target: i0__namespace.ɵɵFactoryTarget.Injectable });
+    DateParserFormatter.ɵprov = i0__namespace.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateParserFormatter });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: DateParserFormatter, decorators: [{
+                type: i0.Injectable
+            }], ctorParameters: function () {
+            return [{ type: i2__namespace.ConfigStateService }, { type: undefined, decorators: [{
+                            type: i0.Inject,
+                            args: [i0.LOCALE_ID]
+                        }] }];
+        } });
 
     var declarationsWithExports = [
         BreadcrumbComponent,
+        BreadcrumbItemsComponent,
         ButtonComponent,
-        ChartComponent,
         ConfirmationComponent,
         LoaderBarComponent,
         LoadingComponent,
         ModalComponent,
-        TableComponent,
-        TableEmptyMessageComponent,
         ToastComponent,
         ToastContainerComponent,
-        SortOrderIconComponent,
         NgxDatatableDefaultDirective,
         NgxDatatableListDirective,
         LoadingDirective,
-        TableSortDirective,
         ModalCloseDirective,
     ];
     var BaseThemeSharedModule = /** @class */ (function () {
@@ -2701,27 +2316,64 @@
         }
         return BaseThemeSharedModule;
     }());
-    BaseThemeSharedModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [
-                        i1.CoreModule,
-                        ngxDatatable.NgxDatatableModule,
-                        core.NgxValidateCoreModule,
-                        ngBootstrap.NgbPaginationModule,
-                        EllipsisModule,
-                    ],
-                    declarations: __spread(declarationsWithExports, [HttpErrorWrapperComponent, ModalContainerComponent]),
-                    exports: __spread([ngxDatatable.NgxDatatableModule, EllipsisModule], declarationsWithExports),
-                    providers: [common.DatePipe],
-                    entryComponents: [
-                        HttpErrorWrapperComponent,
-                        LoadingComponent,
-                        ModalContainerComponent,
-                        ToastContainerComponent,
-                        ConfirmationComponent,
-                    ],
-                },] }
-    ];
+    BaseThemeSharedModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BaseThemeSharedModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    BaseThemeSharedModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BaseThemeSharedModule, declarations: [BreadcrumbComponent,
+            BreadcrumbItemsComponent,
+            ButtonComponent,
+            ConfirmationComponent,
+            LoaderBarComponent,
+            LoadingComponent,
+            ModalComponent,
+            ToastComponent,
+            ToastContainerComponent,
+            NgxDatatableDefaultDirective,
+            NgxDatatableListDirective,
+            LoadingDirective,
+            ModalCloseDirective, HttpErrorWrapperComponent], imports: [i2.CoreModule,
+            i1$2.NgxDatatableModule,
+            core.NgxValidateCoreModule,
+            i3.NgbPaginationModule,
+            EllipsisModule], exports: [i1$2.NgxDatatableModule, EllipsisModule, BreadcrumbComponent,
+            BreadcrumbItemsComponent,
+            ButtonComponent,
+            ConfirmationComponent,
+            LoaderBarComponent,
+            LoadingComponent,
+            ModalComponent,
+            ToastComponent,
+            ToastContainerComponent,
+            NgxDatatableDefaultDirective,
+            NgxDatatableListDirective,
+            LoadingDirective,
+            ModalCloseDirective] });
+    BaseThemeSharedModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BaseThemeSharedModule, providers: [i1.DatePipe], imports: [[
+                i2.CoreModule,
+                i1$2.NgxDatatableModule,
+                core.NgxValidateCoreModule,
+                i3.NgbPaginationModule,
+                EllipsisModule,
+            ], i1$2.NgxDatatableModule, EllipsisModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: BaseThemeSharedModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [
+                            i2.CoreModule,
+                            i1$2.NgxDatatableModule,
+                            core.NgxValidateCoreModule,
+                            i3.NgbPaginationModule,
+                            EllipsisModule,
+                        ],
+                        declarations: __spreadArray(__spreadArray([], __read(declarationsWithExports)), [HttpErrorWrapperComponent]),
+                        exports: __spreadArray([i1$2.NgxDatatableModule, EllipsisModule], __read(declarationsWithExports)),
+                        providers: [i1.DatePipe],
+                        entryComponents: [
+                            HttpErrorWrapperComponent,
+                            LoadingComponent,
+                            ToastContainerComponent,
+                            ConfirmationComponent,
+                        ],
+                    }]
+            }] });
     var ThemeSharedModule = /** @class */ (function () {
         function ThemeSharedModule() {
         }
@@ -2734,14 +2386,14 @@
                         provide: i0.APP_INITIALIZER,
                         multi: true,
                         deps: [ErrorHandler],
-                        useFactory: i1.noop,
+                        useFactory: i2.noop,
                     },
                     THEME_SHARED_ROUTE_PROVIDERS,
                     {
                         provide: i0.APP_INITIALIZER,
                         multi: true,
                         deps: [THEME_SHARED_APPEND_CONTENT],
-                        useFactory: i1.noop,
+                        useFactory: i2.noop,
                     },
                     {
                         provide: i0.APP_INITIALIZER,
@@ -2755,7 +2407,7 @@
                         useFactory: httpErrorConfigFactory,
                         deps: [HTTP_ERROR_CONFIG],
                     },
-                    { provide: ngBootstrap.NgbDateParserFormatter, useClass: DateParserFormatter },
+                    { provide: i3.NgbDateParserFormatter, useClass: DateParserFormatter },
                     NG_BOOTSTRAP_CONFIG_PROVIDERS,
                     {
                         provide: core.VALIDATION_BLUEPRINTS,
@@ -2774,12 +2426,16 @@
         };
         return ThemeSharedModule;
     }());
-    ThemeSharedModule.decorators = [
-        { type: i0.NgModule, args: [{
-                    imports: [BaseThemeSharedModule],
-                    exports: [BaseThemeSharedModule],
-                },] }
-    ];
+    ThemeSharedModule.ɵfac = i0__namespace.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ThemeSharedModule, deps: [], target: i0__namespace.ɵɵFactoryTarget.NgModule });
+    ThemeSharedModule.ɵmod = i0__namespace.ɵɵngDeclareNgModule({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ThemeSharedModule, imports: [BaseThemeSharedModule], exports: [BaseThemeSharedModule] });
+    ThemeSharedModule.ɵinj = i0__namespace.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ThemeSharedModule, imports: [[BaseThemeSharedModule], BaseThemeSharedModule] });
+    i0__namespace.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "12.2.6", ngImport: i0__namespace, type: ThemeSharedModule, decorators: [{
+                type: i0.NgModule,
+                args: [{
+                        imports: [BaseThemeSharedModule],
+                        exports: [BaseThemeSharedModule],
+                    }]
+            }] });
 
     var minLength = forms.Validators.minLength, maxLength = forms.Validators.maxLength;
     function getPasswordValidators(injector) {
@@ -2804,7 +2460,7 @@
         return [core.validatePassword(passwordRulesArr), minLength(requiredLength), maxLength(128)];
     }
     function getRuleFn(injector) {
-        var configState = injector.get(i1.ConfigStateService);
+        var configState = injector.get(i2.ConfigStateService);
         return function (key) {
             var passwordRules = configState.getSettings('Identity.Password');
             return (passwordRules["Abp.Identity.Password." + key] || '').toLowerCase();
@@ -2822,8 +2478,8 @@
     exports.BOOTSTRAP = BOOTSTRAP;
     exports.BaseThemeSharedModule = BaseThemeSharedModule;
     exports.BreadcrumbComponent = BreadcrumbComponent;
+    exports.BreadcrumbItemsComponent = BreadcrumbItemsComponent;
     exports.ButtonComponent = ButtonComponent;
-    exports.ChartComponent = ChartComponent;
     exports.ConfirmationComponent = ConfirmationComponent;
     exports.ConfirmationService = ConfirmationService;
     exports.DEFAULT_ERROR_LOCALIZATIONS = DEFAULT_ERROR_LOCALIZATIONS;
@@ -2844,7 +2500,6 @@
     exports.ModalCloseDirective = ModalCloseDirective;
     exports.ModalComponent = ModalComponent;
     exports.ModalRefService = ModalRefService;
-    exports.ModalService = ModalService;
     exports.NGX_DATATABLE_MESSAGES = NGX_DATATABLE_MESSAGES;
     exports.NG_BOOTSTRAP_CONFIG_PROVIDERS = NG_BOOTSTRAP_CONFIG_PROVIDERS;
     exports.NavItem = NavItem;
@@ -2853,18 +2508,13 @@
     exports.NgxDatatableListDirective = NgxDatatableListDirective;
     exports.PageAlertService = PageAlertService;
     exports.SUPPRESS_UNSAVED_CHANGES_WARNING = SUPPRESS_UNSAVED_CHANGES_WARNING;
-    exports.SortOrderIconComponent = SortOrderIconComponent;
     exports.THEME_SHARED_APPEND_CONTENT = THEME_SHARED_APPEND_CONTENT;
     exports.THEME_SHARED_ROUTE_PROVIDERS = THEME_SHARED_ROUTE_PROVIDERS;
-    exports.TableComponent = TableComponent;
-    exports.TableEmptyMessageComponent = TableEmptyMessageComponent;
-    exports.TableSortDirective = TableSortDirective;
     exports.ThemeSharedModule = ThemeSharedModule;
     exports.ToastComponent = ToastComponent;
     exports.ToastContainerComponent = ToastContainerComponent;
     exports.ToasterService = ToasterService;
     exports.bounceIn = bounceIn;
-    exports.chartJsLoaded$ = chartJsLoaded$;
     exports.collapse = collapse;
     exports.collapseLinearWithMargin = collapseLinearWithMargin;
     exports.collapseWithMargin = collapseWithMargin;
@@ -2891,47 +2541,10 @@
     exports.fadeOutRight = fadeOutRight;
     exports.fadeOutUp = fadeOutUp;
     exports.getPasswordValidators = getPasswordValidators;
-    exports.getRandomBackgroundColor = getRandomBackgroundColor;
     exports.httpErrorConfigFactory = httpErrorConfigFactory;
     exports.initLazyStyleHandler = initLazyStyleHandler;
     exports.slideFromBottom = slideFromBottom;
     exports.toastInOut = toastInOut;
-    exports.ɵa = EllipsisDirective;
-    exports.ɵb = EllipsisModule;
-    exports.ɵba = HttpErrorWrapperComponent;
-    exports.ɵbb = ModalContainerComponent;
-    exports.ɵbc = ErrorHandler;
-    exports.ɵbe = THEME_SHARED_ROUTE_PROVIDERS;
-    exports.ɵbf = configureRoutes;
-    exports.ɵbg = THEME_SHARED_APPEND_CONTENT;
-    exports.ɵbh = initLazyStyleHandler;
-    exports.ɵbi = httpErrorConfigFactory;
-    exports.ɵbj = HTTP_ERROR_CONFIG;
-    exports.ɵbk = DateParserFormatter;
-    exports.ɵbl = NG_BOOTSTRAP_CONFIG_PROVIDERS;
-    exports.ɵc = BreadcrumbComponent;
-    exports.ɵd = ButtonComponent;
-    exports.ɵe = ChartComponent;
-    exports.ɵf = ConfirmationComponent;
-    exports.ɵg = LoaderBarComponent;
-    exports.ɵh = LoadingComponent;
-    exports.ɵi = ModalComponent;
-    exports.ɵj = SUPPRESS_UNSAVED_CHANGES_WARNING;
-    exports.ɵk = ConfirmationService;
-    exports.ɵl = ModalRefService;
-    exports.ɵm = TableComponent;
-    exports.ɵn = TableEmptyMessageComponent;
-    exports.ɵo = ToastComponent;
-    exports.ɵp = ToasterService;
-    exports.ɵq = ToastContainerComponent;
-    exports.ɵr = toastInOut;
-    exports.ɵs = SortOrderIconComponent;
-    exports.ɵt = NgxDatatableDefaultDirective;
-    exports.ɵu = NgxDatatableListDirective;
-    exports.ɵw = NGX_DATATABLE_MESSAGES;
-    exports.ɵx = LoadingDirective;
-    exports.ɵy = TableSortDirective;
-    exports.ɵz = ModalCloseDirective;
 
     Object.defineProperty(exports, '__esModule', { value: true });