@abp/ng.theme.shared 8.1.0-rc.2 → 8.1.0-rc.4

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

@@ -1,30 +1,33 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, InjectionToken, Inject, inject, ViewEncapsulation, Optional, ContentChild, Directive, HostListener, forwardRef, HostBinding, NgModule, Host, RendererFactory2, ComponentFactoryResolver, Injector, ApplicationRef, APP_INITIALIZER, LOCALE_ID } from '@angular/core';
+import { Injectable, Component, Input, ChangeDetectionStrategy, EventEmitter, Output, ViewChild, InjectionToken, Inject, inject, DestroyRef, createComponent, ViewEncapsulation, Optional, ContentChild, Directive, HostListener, forwardRef, HostBinding, NgModule, ChangeDetectorRef, Host, RendererFactory2, Injector, EnvironmentInjector, ApplicationRef, APP_INITIALIZER, LOCALE_ID } from '@angular/core';
 import * as i1 from '@angular/common';
-import { formatDate, DOCUMENT, CommonModule, NgIf, DatePipe } from '@angular/common';
+import { formatDate, DOCUMENT, CommonModule, DatePipe } from '@angular/common';
 import * as i3 from '@ng-bootstrap/ng-bootstrap';
-import { NgbDateAdapter, NgbTimeAdapter, NgbInputDatepickerConfig, NgbTypeaheadConfig, NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgbDateAdapter, NgbTimeAdapter, NgbTooltip, NgbInputDatepickerConfig, NgbTypeaheadConfig, NgbDateParserFormatter, NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap';
 import { animation, style, animate, keyframes, trigger, state, transition, useAnimation, query } from '@angular/animations';
 import * as i1$1 from '@angular/router';
-import { ResolveEnd } from '@angular/router';
+import { Router, ResolveEnd } from '@angular/router';
 import * as i2 from '@abp/ng.core';
 import { getRoutePath, SubscriptionService, PROJECTION_STRATEGY, uuid, AbstractNgModelComponent, InternetConnectionService, LocalizationModule, LocalizationService, getLocaleDirection, DomInsertionService, CONTENT_STRATEGY, InternalStore, RouterEvents, AuthService, SessionStateService, HttpErrorReporterService, RoutesService, TENANT_NOT_FOUND_BY_NAME, CoreModule, noop, ConfigStateService } from '@abp/ng.core';
 import { startWith, map, debounceTime, filter, takeUntil, distinctUntilChanged, take, switchMap } from 'rxjs/operators';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { fromEvent, Subscription, combineLatest, timer, ReplaySubject, Subject, of, from, Observable, EMPTY, BehaviorSubject } from 'rxjs';
 import * as i2$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule, Validators } from '@angular/forms';
 import * as i1$2 from '@swimlane/ngx-datatable';
-import { ColumnMode, NgxDatatableModule } from '@swimlane/ngx-datatable';
+import { ColumnMode, DatatableComponent, NgxDatatableModule } from '@swimlane/ngx-datatable';
 import { HttpErrorResponse } from '@angular/common/http';
 import { NgxValidateCoreModule, VALIDATION_BLUEPRINTS, VALIDATION_MAP_ERRORS_FN, defaultMapErrorsFn, VALIDATION_VALIDATE_ON_SUBMIT, normalizeDiacritics } from '@ngx-validate/core';
 
 class DateTimeAdapter {
     fromModel(value) {
-        if (!value)
+        if (!value) {
             return null;
+        }
         const date = new Date(value);
-        if (isNaN(date))
+        if (isNaN(date)) {
             return null;
+        }
         this.value = {
             year: date.getFullYear(),
             month: date.getMonth() + 1,
@@ -36,11 +39,11 @@ class DateTimeAdapter {
         return this.value;
     }
     toModel(value) {
-        if (!value)
+        if (!value) {
             return '';
+        }
         const now = new Date();
         const newValue = {
-            // TODO look for strict mode errors
             year: now.getUTCFullYear(),
             month: now.getMonth() + 1,
             day: now.getDate(),
@@ -50,8 +53,8 @@ class DateTimeAdapter {
             ...this.value,
             ...value,
         };
-        const date = new Date(newValue.year, newValue.month - 1, newValue.day, newValue.hour, newValue.minute, newValue.second);
-        return new Date(date).toISOString();
+        const date = new Date(Date.UTC(newValue.year, newValue.month - 1, newValue.day, newValue.hour, newValue.minute, newValue.second));
+        return date.toISOString().replace('Z', '');
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DateTimeAdapter, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: DateTimeAdapter }); }
@@ -466,13 +469,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                 }] }] });
 
 class HttpErrorWrapperComponent {
-    get statusText() {
-        return this.status ? `[${this.status}]` : '';
-    }
-    constructor(subscription) {
-        this.subscription = subscription;
+    constructor() {
+        this.destroyRef = inject(DestroyRef);
         this.document = inject(DOCUMENT);
         this.window = this.document.defaultView;
+        this.router = inject(Router);
         this.status = 0;
         this.title = 'Oops!';
         this.details = 'Sorry, an error has occured.';
@@ -480,16 +481,27 @@ class HttpErrorWrapperComponent {
         this.hideCloseIcon = false;
         this.isHomeShow = true;
     }
+    get statusText() {
+        return this.status ? `[${this.status}]` : '';
+    }
     ngOnInit() {
-        this.backgroundColor =
-            this.window.getComputedStyle(this.document.body)?.getPropertyValue('background-color') || '#fff';
+        const computedStyle = this.window.getComputedStyle(this.document.body);
+        const backgroundColor = computedStyle?.getPropertyValue('background-color');
+        this.backgroundColor = backgroundColor || '#fff';
     }
     ngAfterViewInit() {
         if (this.customComponent) {
-            const customComponentRef = this.cfRes
-                .resolveComponentFactory(this.customComponent)
-                .create(this.injector);
+            const customComponentRef = createComponent(this.customComponent, {
+                environmentInjector: this.environmentInjector,
+            });
             customComponentRef.instance.errorStatus = this.status;
+            //In our custom "HttpErrorComponent", we have a "status" property.
+            //We used to have "errorStatus", but it wasn't signal type. "status" variable is signal type.
+            //I've checked because of backward compatibility. Developers might have their own custom HttpErrorComponent.
+            //We need to deprecated and remove "errorStatus" in the future.
+            if (customComponentRef.instance.status) {
+                customComponentRef.instance.status.set(this.status);
+            }
             customComponentRef.instance.destroy$ = this.destroy$;
             this.appRef.attachView(customComponentRef.hostView);
             if (this.containerRef) {
@@ -497,23 +509,28 @@ class HttpErrorWrapperComponent {
             }
             customComponentRef.changeDetectorRef.detectChanges();
         }
-        const keyup$ = fromEvent(this.document, 'keyup').pipe(debounceTime(150), filter((key) => key && key.key === 'Escape'));
-        this.subscription.addOne(keyup$, () => this.destroy());
+        fromEvent(this.document, 'keyup')
+            .pipe(debounceTime(150), filter((key) => key && key.key === 'Escape'), takeUntilDestroyed(this.destroyRef))
+            .subscribe(() => this.destroy());
     }
-    ngOnDestroy() {
+    goHome() {
+        this.router.navigateByUrl('/', { onSameUrlNavigation: 'reload' });
         this.destroy();
     }
     destroy() {
         this.destroy$.next();
         this.destroy$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: HttpErrorWrapperComponent, deps: [{ token: i2.SubscriptionService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: HttpErrorWrapperComponent, selector: "abp-http-error-wrapper", providers: [SubscriptionService], viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  <button\r\n    *ngIf=\"!hideCloseIcon\"\r\n    id=\"abp-close-button\"\r\n    type=\"button\"\r\n    class=\"btn-close me-2\"\r\n    (click)=\"destroy()\"\r\n  ></button>\r\n\r\n  <div *ngIf=\"!customComponent\" class=\"row centered\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"error-template\">\r\n        <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n        <div class=\"error-details\">\r\n          {{ details | abpLocalization }}\r\n        </div>\r\n        <div class=\"error-actions\">\r\n          <a\r\n            *ngIf=\"isHomeShow\"\r\n            (click)=\"destroy()\"\r\n            routerLink=\"/\"\r\n            class=\"btn btn-primary btn-md mt-2\"\r\n            ><span class=\"glyphicon glyphicon-home\"></span>\r\n            {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] }); }
+    ngOnDestroy() {
+        this.destroy();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: HttpErrorWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: HttpErrorWrapperComponent, selector: "abp-http-error-wrapper", viewQueries: [{ propertyName: "containerRef", first: true, predicate: ["container"], descendants: true }], ngImport: i0, template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (!hideCloseIcon) {\r\n    <button id=\"abp-close-button\" type=\"button\" class=\"btn-close me-2\" (click)=\"destroy()\"></button>\r\n  }\r\n\r\n  @if (!customComponent) {\r\n    <div class=\"row centered\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"error-template\">\r\n          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n          <div class=\"error-details\">\r\n            {{ details | abpLocalization }}\r\n          </div>\r\n          <div class=\"error-actions\">\r\n            @if (isHomeShow) {\r\n              <a (click)=\"goHome()\" class=\"btn btn-primary btn-md mt-2\"\r\n                ><span class=\"glyphicon glyphicon-home\"></span>\r\n                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"], dependencies: [{ kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: HttpErrorWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-http-error-wrapper', providers: [SubscriptionService], template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  <button\r\n    *ngIf=\"!hideCloseIcon\"\r\n    id=\"abp-close-button\"\r\n    type=\"button\"\r\n    class=\"btn-close me-2\"\r\n    (click)=\"destroy()\"\r\n  ></button>\r\n\r\n  <div *ngIf=\"!customComponent\" class=\"row centered\">\r\n    <div class=\"col-md-12\">\r\n      <div class=\"error-template\">\r\n        <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n        <div class=\"error-details\">\r\n          {{ details | abpLocalization }}\r\n        </div>\r\n        <div class=\"error-actions\">\r\n          <a\r\n            *ngIf=\"isHomeShow\"\r\n            (click)=\"destroy()\"\r\n            routerLink=\"/\"\r\n            class=\"btn btn-primary btn-md mt-2\"\r\n            ><span class=\"glyphicon glyphicon-home\"></span>\r\n            {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n          </a>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
-        }], ctorParameters: () => [{ type: i2.SubscriptionService }], propDecorators: { containerRef: [{
+            args: [{ selector: 'abp-http-error-wrapper', template: "<div\r\n  #container\r\n  id=\"abp-http-error-container\"\r\n  class=\"error\"\r\n  [style.backgroundColor]=\"backgroundColor\"\r\n>\r\n  @if (!hideCloseIcon) {\r\n    <button id=\"abp-close-button\" type=\"button\" class=\"btn-close me-2\" (click)=\"destroy()\"></button>\r\n  }\r\n\r\n  @if (!customComponent) {\r\n    <div class=\"row centered\">\r\n      <div class=\"col-md-12\">\r\n        <div class=\"error-template\">\r\n          <h1>{{ statusText }} {{ title | abpLocalization }}</h1>\r\n          <div class=\"error-details\">\r\n            {{ details | abpLocalization }}\r\n          </div>\r\n          <div class=\"error-actions\">\r\n            @if (isHomeShow) {\r\n              <a (click)=\"goHome()\" class=\"btn btn-primary btn-md mt-2\"\r\n                ><span class=\"glyphicon glyphicon-home\"></span>\r\n                {{ { key: '::Menu:Home', defaultValue: 'Home' } | abpLocalization }}\r\n              </a>\r\n            }\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [".error{position:fixed;top:0;width:100vw;height:100vh;z-index:999999}.centered{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}\n"] }]
+        }], propDecorators: { containerRef: [{
                 type: ViewChild,
                 args: ['container', { static: false }]
             }] } });
@@ -1452,96 +1469,37 @@ class InternetConnectionStatusComponent {
         this.isOnline = this.internetConnectionService.networkStatus;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: InternetConnectionStatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.1.3", type: InternetConnectionStatusComponent, isStandalone: true, selector: "abp-internet-status", ngImport: i0, template: `
-    <div class="status-icon" *ngIf="!isOnline()">
-      <i data-toggle="tooltip" title="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}" data-placement="left" class="fa fa-circle text-blinking blink">
-      </i>
-    </div>
-  `, isInline: true, styles: [".blink{animation:blinker .9s cubic-bezier(.5,0,1,1) infinite alternate}@keyframes blinker{0%{color:#c1c1c1}70%{color:#dc3545}to{color:#dc3545}}.text-blinking{font-size:1.2rem}.status-icon{position:fixed;z-index:999999;top:10px;right:10px}@media (width < 768px){.status-icon{top:26px;right:134px}}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.1.3", type: InternetConnectionStatusComponent, isStandalone: true, selector: "abp-internet-status", ngImport: i0, template: `
+    @if (!isOnline()) {
+      <div class="status-icon">
+        <i
+          ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
+          container="body"
+          placement="left-top" 
+          class="fa fa-wifi text-blinking blink"
+        >
+        </i>
+      </div>
+    }
+  `, isInline: true, styles: [".blink{animation:blinker .9s cubic-bezier(.5,0,1,1) infinite alternate}@keyframes blinker{0%{color:#c1c1c1}70%{color:#fa2379}to{color:#fa2379}}.text-blinking{font-size:30px}.status-icon{position:fixed;z-index:999999;top:50%;left:50%;width:30px;text-align:center;margin-left:-15px;margin-top:-15px;translate:transform(-50%,-50%)}\n"], dependencies: [{ kind: "ngmodule", type: LocalizationModule }, { kind: "pipe", type: i2.LocalizationPipe, name: "abpLocalization" }, { kind: "directive", type: NgbTooltip, selector: "[ngbTooltip]", inputs: ["animation", "autoClose", "placement", "popperOptions", "triggers", "positionTarget", "container", "disableTooltip", "tooltipClass", "tooltipContext", "openDelay", "closeDelay", "ngbTooltip"], outputs: ["shown", "hidden"], exportAs: ["ngbTooltip"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: InternetConnectionStatusComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'abp-internet-status', standalone: true, imports: [NgIf, LocalizationModule], template: `
-    <div class="status-icon" *ngIf="!isOnline()">
-      <i data-toggle="tooltip" title="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}" data-placement="left" class="fa fa-circle text-blinking blink">
-      </i>
-    </div>
-  `, styles: [".blink{animation:blinker .9s cubic-bezier(.5,0,1,1) infinite alternate}@keyframes blinker{0%{color:#c1c1c1}70%{color:#dc3545}to{color:#dc3545}}.text-blinking{font-size:1.2rem}.status-icon{position:fixed;z-index:999999;top:10px;right:10px}@media (width < 768px){.status-icon{top:26px;right:134px}}\n"] }]
+            args: [{ selector: 'abp-internet-status', standalone: true, imports: [LocalizationModule, NgbTooltip], template: `
+    @if (!isOnline()) {
+      <div class="status-icon">
+        <i
+          ngbTooltip="{{ 'AbpUi::InternetConnectionInfo' | abpLocalization }}"
+          container="body"
+          placement="left-top" 
+          class="fa fa-wifi text-blinking blink"
+        >
+        </i>
+      </div>
+    }
+  `, styles: [".blink{animation:blinker .9s cubic-bezier(.5,0,1,1) infinite alternate}@keyframes blinker{0%{color:#c1c1c1}70%{color:#fa2379}to{color:#fa2379}}.text-blinking{font-size:30px}.status-icon{position:fixed;z-index:999999;top:50%;left:50%;width:30px;text-align:center;margin-left:-15px;margin-top:-15px;translate:transform(-50%,-50%)}\n"] }]
         }] });
 
-const DEFAULT_VALIDATION_BLUEPRINTS = {
-    creditCard: 'AbpValidation::ThisFieldIsNotAValidCreditCardNumber.',
-    email: 'AbpValidation::ThisFieldIsNotAValidEmailAddress.',
-    invalid: 'AbpValidation::ThisFieldIsNotValid.',
-    max: 'AbpValidation::ThisFieldMustBeLessOrEqual{0}[{{ max }}]',
-    maxlength: 'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMaximumLengthOf{0}[{{ requiredLength }}]',
-    min: 'AbpValidation::ThisFieldMustBeGreaterThanOrEqual{0}[{{ min }}]',
-    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',
-    passwordRequiresLower: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresLower',
-    passwordRequiresUpper: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresUpper',
-    passwordRequiresDigit: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresDigit',
-    passwordRequiresNonAlphanumeric: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresNonAlphanumeric',
-    usernamePattern: 'AbpIdentity::Volo.Abp.Identity:InvalidUserName[{{ actualValue }}]',
-    customMessage: '{{ customMessage }}'
-};
-
-const DEFAULT_ERROR_MESSAGES = {
-    defaultError: {
-        title: 'An error has occurred!',
-        details: 'Error detail not sent by server.',
-    },
-    defaultError401: {
-        title: 'You are not authenticated!',
-        details: 'You should be authenticated (sign in) in order to perform this operation.',
-    },
-    defaultError403: {
-        title: 'You are not authorized!',
-        details: 'You are not allowed to perform this operation.',
-    },
-    defaultError404: {
-        title: 'Resource not found!',
-        details: 'The resource requested could not found on the server.',
-    },
-    defaultError500: {
-        title: 'Internal server error',
-        details: 'Error detail not sent by server.',
-    },
-};
-const DEFAULT_ERROR_LOCALIZATIONS = {
-    defaultError: {
-        title: 'AbpUi::DefaultErrorMessage',
-        details: 'AbpUi::DefaultErrorMessageDetail',
-    },
-    defaultError401: {
-        title: 'AbpUi::DefaultErrorMessage401',
-        details: 'AbpUi::DefaultErrorMessage401Detail',
-    },
-    defaultError403: {
-        title: 'AbpUi::DefaultErrorMessage403',
-        details: 'AbpUi::DefaultErrorMessage403Detail',
-    },
-    defaultError404: {
-        title: 'AbpUi::DefaultErrorMessage404',
-        details: 'AbpUi::DefaultErrorMessage404Detail',
-    },
-    defaultError500: {
-        title: 'AbpUi::500Message',
-        details: 'AbpUi::DefaultErrorMessage',
-    },
-};
-const CUSTOM_HTTP_ERROR_HANDLER_PRIORITY = Object.freeze({
-    veryLow: -99,
-    low: -9,
-    normal: 0,
-    high: 9,
-    veryHigh: 99,
-});
-
 class EllipsisDirective {
     get inlineClass() {
         return this.enabled && this.width;
@@ -1753,15 +1711,29 @@ const defaultNgxDatatableMessages = {
 const NGX_DATATABLE_MESSAGES = new InjectionToken('NGX_DATATABLE_MESSAGES');
 
 class NgxDatatableListDirective {
-    constructor(table, cdRef, localizationService, ngxDatatableMessages) {
-        this.table = table;
-        this.cdRef = cdRef;
-        this.localizationService = localizationService;
-        this.ngxDatatableMessages = ngxDatatableMessages;
-        this.subscription = new Subscription();
-        this.querySubscription = new Subscription();
+    constructor() {
+        this.table = inject(DatatableComponent);
+        this.cdRef = inject(ChangeDetectorRef);
+        this.destroyRef = inject(DestroyRef);
+        this.localizationService = inject(LocalizationService);
+        this.ngxDatatableMessages = inject(NGX_DATATABLE_MESSAGES, { optional: true });
         this.setInitialValues();
     }
+    ngDoCheck() {
+        this.refreshPageIfDataExist();
+    }
+    ngOnInit() {
+        this.subscribeToPage();
+        this.subscribeToSort();
+    }
+    ngOnChanges({ list }) {
+        this.subscribeToQuery();
+        if (!list.firstChange)
+            return;
+        const { maxResultCount, page } = list.currentValue;
+        this.table.limit = maxResultCount;
+        this.table.offset = page;
+    }
     setInitialValues() {
         this.table.externalPaging = true;
         this.table.externalSorting = true;
@@ -1772,15 +1744,8 @@ class NgxDatatableListDirective {
             selectedMessage: this.localizationService.instant(selectedMessage),
         };
     }
-    subscribeToPage() {
-        const sub = this.table.page.subscribe(({ offset }) => {
-            this.list.page = offset;
-            this.table.offset = offset;
-        });
-        this.subscription.add(sub);
-    }
     subscribeToSort() {
-        const sub = this.table.sort.subscribe(({ sorts: [{ prop, dir }] }) => {
+        this.table.sort.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ sorts: [{ prop, dir }] }) => {
             if (prop === this.list.sortKey && this.list.sortOrder === 'desc') {
                 this.list.sortKey = '';
                 this.list.sortOrder = '';
@@ -1792,34 +1757,41 @@ class NgxDatatableListDirective {
                 this.list.sortOrder = dir;
             }
         });
-        this.subscription.add(sub);
+    }
+    subscribeToPage() {
+        this.table.page.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(({ offset }) => {
+            this.setTablePage(offset);
+        });
     }
     subscribeToQuery() {
-        if (!this.querySubscription.closed)
-            this.querySubscription.unsubscribe();
-        this.querySubscription = this.list.query$.subscribe(() => {
+        this.list.query$.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => {
             const offset = this.list.page;
             if (this.table.offset !== offset)
                 this.table.offset = offset;
         });
     }
-    ngOnChanges({ list }) {
-        this.subscribeToQuery();
-        if (!list.firstChange)
-            return;
-        const { maxResultCount, page } = list.currentValue;
-        this.table.limit = maxResultCount;
-        this.table.offset = page;
-    }
-    ngOnDestroy() {
-        this.subscription.unsubscribe();
-        this.querySubscription.unsubscribe();
+    setTablePage(pageNum) {
+        this.list.page = pageNum;
+        this.table.offset = pageNum;
     }
-    ngOnInit() {
-        this.subscribeToPage();
-        this.subscribeToSort();
+    refreshPageIfDataExist() {
+        if (this.table.rows?.length < 1 && this.table.count > 0) {
+            let maxPage = Math.floor(Number(this.table.count / this.list.maxResultCount));
+            if (this.table.count < this.list.maxResultCount) {
+                this.setTablePage(0);
+                return;
+            }
+            if (this.table.count % this.list.maxResultCount === 0) {
+                maxPage -= 1;
+            }
+            if (this.list.page < maxPage) {
+                this.setTablePage(this.list.page);
+                return;
+            }
+            this.setTablePage(maxPage);
+        }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NgxDatatableListDirective, deps: [{ token: i1$2.DatatableComponent }, { token: i0.ChangeDetectorRef }, { token: i2.LocalizationService }, { token: NGX_DATATABLE_MESSAGES, optional: true }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NgxDatatableListDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
     static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.1.3", type: NgxDatatableListDirective, isStandalone: true, selector: "ngx-datatable[list]", inputs: { list: "list" }, exportAs: ["ngxDatatableList"], usesOnChanges: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImport: i0, type: NgxDatatableListDirective, decorators: [{
@@ -1830,12 +1802,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
                     standalone: true,
                     exportAs: 'ngxDatatableList',
                 }]
-        }], ctorParameters: () => [{ type: i1$2.DatatableComponent }, { type: i0.ChangeDetectorRef }, { type: i2.LocalizationService }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [NGX_DATATABLE_MESSAGES]
-                }] }], propDecorators: { list: [{
+        }], ctorParameters: () => [], propDecorators: { list: [{
                 type: Input
             }] } });
 
@@ -1957,16 +1924,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.1.3", ngImpor
             type: Injectable
         }], ctorParameters: () => [{ type: i0.Injector }] });
 
-function httpErrorConfigFactory(config = {}) {
-    if (config.errorScreen && config.errorScreen.component && !config.errorScreen.forWhichErrors) {
-        config.errorScreen.forWhichErrors = [401, 403, 404, 500];
-    }
-    return {
-        skipHandledErrorCodes: [],
-        errorScreen: {},
-        ...config,
-    };
-}
 const HTTP_ERROR_CONFIG = new InjectionToken('HTTP_ERROR_CONFIG');
 /**
   @deprecated use **`CUSTOM_ERROR_HANDLERS`** injection token instead of this, see more info https://docs.abp.io/en/abp/latest/UI/Angular/HTTP-Requests
@@ -1974,6 +1931,70 @@ const HTTP_ERROR_CONFIG = new InjectionToken('HTTP_ERROR_CONFIG');
 const HTTP_ERROR_HANDLER = new InjectionToken('HTTP_ERROR_HANDLER');
 const CUSTOM_ERROR_HANDLERS = new InjectionToken('CUSTOM_ERROR_HANDLERS');
 
+const DEFAULT_ERROR_MESSAGES = {
+    defaultError: {
+        title: 'An error has occurred!',
+        details: 'Error detail not sent by server.',
+    },
+    defaultError401: {
+        title: 'You are not authenticated!',
+        details: 'You should be authenticated (sign in) in order to perform this operation.',
+    },
+    defaultError403: {
+        title: 'You are not authorized!',
+        details: 'You are not allowed to perform this operation.',
+    },
+    defaultError404: {
+        title: 'Resource not found!',
+        details: 'The resource requested could not found on the server.',
+    },
+    defaultError500: {
+        title: 'Internal server error',
+        details: 'Error detail not sent by server.',
+    },
+};
+const DEFAULT_ERROR_LOCALIZATIONS = {
+    defaultError: {
+        title: 'AbpUi::DefaultErrorMessage',
+        details: 'AbpUi::DefaultErrorMessageDetail',
+    },
+    defaultError401: {
+        title: 'AbpUi::DefaultErrorMessage401',
+        details: 'AbpUi::DefaultErrorMessage401Detail',
+    },
+    defaultError403: {
+        title: 'AbpUi::DefaultErrorMessage403',
+        details: 'AbpUi::DefaultErrorMessage403Detail',
+    },
+    defaultError404: {
+        title: 'AbpUi::DefaultErrorMessage404',
+        details: 'AbpUi::DefaultErrorMessage404Detail',
+    },
+    defaultError500: {
+        title: 'AbpUi::500Message',
+        details: 'AbpUi::DefaultErrorMessage',
+    },
+};
+const CUSTOM_HTTP_ERROR_HANDLER_PRIORITY = Object.freeze({
+    veryLow: -99,
+    low: -9,
+    normal: 0,
+    high: 9,
+    veryHigh: 99,
+});
+const HTTP_ERROR_STATUS = {
+    '401': 'AbpUi::401Message',
+    '403': 'AbpUi::403Message',
+    '404': 'AbpUi::404Message',
+    '500': 'AbpUi::500Message',
+};
+const HTTP_ERROR_DETAIL = {
+    '401': 'AbpUi::DefaultErrorMessage401Detail',
+    '403': 'AbpUi::DefaultErrorMessage403Detail',
+    '404': 'AbpUi::DefaultErrorMessage404Detail',
+    '500': 'AbpUi::DefaultErrorMessage',
+};
+
 var styles = `
 .is-invalid .form-control {
   border-color: #dc3545;
@@ -2379,9 +2400,9 @@ class CreateErrorComponentService {
     constructor() {
         this.document = inject(DOCUMENT);
         this.rendererFactory = inject(RendererFactory2);
-        this.cfRes = inject(ComponentFactoryResolver);
         this.routerEvents = inject(RouterEvents);
         this.injector = inject(Injector);
+        this.envInjector = inject(EnvironmentInjector);
         this.httpErrorConfig = inject(HTTP_ERROR_CONFIG);
         this.componentRef = null;
         this.listenToRouterDataResolved();
@@ -2412,9 +2433,9 @@ class CreateErrorComponentService {
         const renderer = this.rendererFactory.createRenderer(null, null);
         const hostElement = this.getErrorHostElement();
         const host = renderer.selectRootElement(hostElement, true);
-        this.componentRef = this.cfRes
-            .resolveComponentFactory(HttpErrorWrapperComponent)
-            .create(this.injector);
+        this.componentRef = createComponent(HttpErrorWrapperComponent, {
+            environmentInjector: this.envInjector,
+        });
         for (const key in instance) {
             /* istanbul ignore else */
             if (Object.prototype.hasOwnProperty.call(this.componentRef.instance, key)) {
@@ -2424,9 +2445,8 @@ class CreateErrorComponentService {
         this.componentRef.instance.hideCloseIcon = this.isCloseIconHidden();
         const appRef = this.injector.get(ApplicationRef);
         if (this.canCreateCustomError(instance.status)) {
-            this.componentRef.instance.cfRes = this.cfRes;
             this.componentRef.instance.appRef = appRef;
-            this.componentRef.instance.injector = this.injector;
+            this.componentRef.instance.environmentInjector = this.envInjector;
             this.componentRef.instance.customComponent = this.httpErrorConfig.errorScreen?.component;
         }
         appRef.attachView(this.componentRef.hostView);
@@ -2697,7 +2717,7 @@ class ErrorHandler {
         this.filterRestErrors = ({ status }) => {
             if (typeof status !== 'number')
                 return false;
-            if (!this.httpErrorConfig || !this.httpErrorConfig.skipHandledErrorCodes) {
+            if (!this.httpErrorConfig?.skipHandledErrorCodes) {
                 return true;
             }
             return this.httpErrorConfig.skipHandledErrorCodes?.findIndex(code => code === status) < 0;
@@ -2820,6 +2840,27 @@ const DEFAULT_HANDLERS_PROVIDERS = [
     },
 ];
 
+const DEFAULT_VALIDATION_BLUEPRINTS = {
+    creditCard: 'AbpValidation::ThisFieldIsNotAValidCreditCardNumber.',
+    email: 'AbpValidation::ThisFieldIsNotAValidEmailAddress.',
+    invalid: 'AbpValidation::ThisFieldIsNotValid.',
+    max: 'AbpValidation::ThisFieldMustBeLessOrEqual{0}[{{ max }}]',
+    maxlength: 'AbpValidation::ThisFieldMustBeAStringOrArrayTypeWithAMaximumLengthOf{0}[{{ requiredLength }}]',
+    min: 'AbpValidation::ThisFieldMustBeGreaterThanOrEqual{0}[{{ min }}]',
+    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',
+    passwordRequiresLower: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresLower',
+    passwordRequiresUpper: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresUpper',
+    passwordRequiresDigit: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresDigit',
+    passwordRequiresNonAlphanumeric: 'AbpIdentity::Volo.Abp.Identity:PasswordRequiresNonAlphanumeric',
+    usernamePattern: 'AbpIdentity::Volo.Abp.Identity:InvalidUserName[{{ actualValue }}]',
+    customMessage: '{{ customMessage }}'
+};
+
 function isNumber(value) {
     return !isNaN(toInteger(value));
 }
@@ -2988,11 +3029,6 @@ class ThemeSharedModule {
                     useFactory: noop,
                 },
                 { provide: HTTP_ERROR_CONFIG, useValue: httpErrorConfig },
-                {
-                    provide: 'HTTP_ERROR_CONFIG',
-                    useFactory: httpErrorConfigFactory,
-                    deps: [HTTP_ERROR_CONFIG],
-                },
                 { provide: NgbDateParserFormatter, useClass: DateParserFormatter },
                 NG_BOOTSTRAP_CONFIG_PROVIDERS,
                 {
@@ -3100,6 +3136,8 @@ function validatePassword(shouldContain) {
     };
 }
 
+var scripts = '';
+
 /*
  * Public API Surface of theme-shared
  */
@@ -3108,5 +3146,5 @@ function validatePassword(shouldContain) {
  * Generated bundle index. Do not edit.
  */
 
-export { AbpFormatErrorHandlerService, AbpVisibleDirective, BaseThemeSharedModule, BreadcrumbComponent, BreadcrumbItemsComponent, ButtonComponent, CUSTOM_ERROR_HANDLERS, CUSTOM_HTTP_ERROR_HANDLER_PRIORITY, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardHeaderDirective, CardImgTopDirective, CardModule, CardSubtitleDirective, CardTitleDirective, Confirmation, ConfirmationComponent, ConfirmationService, CreateErrorComponentService, DEFAULT_ERROR_LOCALIZATIONS, DEFAULT_ERROR_MESSAGES, DEFAULT_HANDLERS_PROVIDERS, DEFAULT_VALIDATION_BLUEPRINTS, DateAdapter, DateParserFormatter, DateTimeAdapter, DisabledDirective, DocumentDirHandlerService, EllipsisDirective, ErrorHandler, FormCheckboxComponent, FormInputComponent, HTTP_ERROR_CONFIG, HTTP_ERROR_HANDLER, HttpErrorWrapperComponent, InternetConnectionStatusComponent, LoaderBarComponent, LoadingComponent, LoadingDirective, ModalCloseDirective, ModalComponent, ModalRefService, NGX_DATATABLE_MESSAGES, NG_BOOTSTRAP_CONFIG_PROVIDERS, NavItem, NavItemsService, NgxDatatableDefaultDirective, NgxDatatableListDirective, PageAlertService, PasswordComponent, RouterErrorHandlerService, SUPPRESS_UNSAVED_CHANGES_WARNING, StatusCodeErrorHandlerService, THEME_SHARED_APPEND_CONTENT, THEME_SHARED_ROUTE_PROVIDERS, TenantResolveErrorHandlerService, ThemeSharedModule, TimeAdapter, ToastComponent, ToastContainerComponent, ToasterService, UnknownStatusCodeErrorHandlerService, UserMenu, UserMenuService, bounceIn, collapse, collapseLinearWithMargin, collapseWithMargin, collapseX, collapseY, collapseYWithMargin, configureNgBootstrap, configureRoutes, defaultNgxDatatableMessages, dialogAnimation, eFormComponets, expandX, expandY, expandYWithMargin, fadeAnimation, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp, getErrorFromRequestBody, getPasswordValidators, httpErrorConfigFactory, slideFromBottom, tenantNotFoundProvider, toastInOut, validatePassword };
+export { AbpFormatErrorHandlerService, AbpVisibleDirective, BaseThemeSharedModule, BreadcrumbComponent, BreadcrumbItemsComponent, ButtonComponent, CUSTOM_ERROR_HANDLERS, CUSTOM_HTTP_ERROR_HANDLER_PRIORITY, CardBodyComponent, CardComponent, CardFooterComponent, CardHeaderComponent, CardHeaderDirective, CardImgTopDirective, CardModule, CardSubtitleDirective, CardTitleDirective, Confirmation, ConfirmationComponent, ConfirmationService, CreateErrorComponentService, DEFAULT_ERROR_LOCALIZATIONS, DEFAULT_ERROR_MESSAGES, DEFAULT_HANDLERS_PROVIDERS, DEFAULT_VALIDATION_BLUEPRINTS, DateAdapter, DateParserFormatter, DateTimeAdapter, DisabledDirective, DocumentDirHandlerService, EllipsisDirective, ErrorHandler, FormCheckboxComponent, FormInputComponent, HTTP_ERROR_CONFIG, HTTP_ERROR_DETAIL, HTTP_ERROR_HANDLER, HTTP_ERROR_STATUS, HttpErrorWrapperComponent, InternetConnectionStatusComponent, LoaderBarComponent, LoadingComponent, LoadingDirective, ModalCloseDirective, ModalComponent, ModalRefService, NGX_DATATABLE_MESSAGES, NG_BOOTSTRAP_CONFIG_PROVIDERS, NavItem, NavItemsService, NgxDatatableDefaultDirective, NgxDatatableListDirective, PageAlertService, PasswordComponent, RouterErrorHandlerService, SUPPRESS_UNSAVED_CHANGES_WARNING, StatusCodeErrorHandlerService, THEME_SHARED_APPEND_CONTENT, THEME_SHARED_ROUTE_PROVIDERS, TenantResolveErrorHandlerService, ThemeSharedModule, TimeAdapter, ToastComponent, ToastContainerComponent, ToasterService, UnknownStatusCodeErrorHandlerService, UserMenu, UserMenuService, bounceIn, collapse, collapseLinearWithMargin, collapseWithMargin, collapseX, collapseY, collapseYWithMargin, configureNgBootstrap, configureRoutes, defaultNgxDatatableMessages, dialogAnimation, eFormComponets, expandX, expandY, expandYWithMargin, fadeAnimation, fadeIn, fadeInDown, fadeInLeft, fadeInRight, fadeInUp, fadeOut, fadeOutDown, fadeOutLeft, fadeOutRight, fadeOutUp, getErrorFromRequestBody, getPasswordValidators, slideFromBottom, tenantNotFoundProvider, toastInOut, validatePassword };
 //# sourceMappingURL=abp-ng.theme.shared.mjs.map