@mediusinc/mng-commons 6.0.0-rc.5 → 6.0.0-rc.7

package/fesm2022/mediusinc-mng-commons-core.mjs

@@ -1,15 +1,9 @@
 import * as i0 from '@angular/core';
-import { computed, signal, Component, ChangeDetectionStrategy, inject, Injector, ElementRef, ApplicationRef, ViewContainerRef, EventEmitter, EnvironmentInjector, createComponent, Directive, Input, Output, TemplateRef, input, effect, booleanAttribute, numberAttribute, Pipe, untracked, InjectionToken, DestroyRef, Injectable, APP_INITIALIZER, ErrorHandler } from '@angular/core';
-import * as i4 from '@ngx-translate/core';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
-import * as i3 from 'primeng/confirmdialog';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
-import * as i5 from 'primeng/dialog';
-import { DialogModule } from 'primeng/dialog';
-import * as i1 from 'primeng/toast';
-import { ToastModule } from 'primeng/toast';
-import * as i2 from 'primeng/api';
-import { PrimeNGConfig, MessageService, ConfirmationService } from 'primeng/api';
+import { computed, signal, Component, ChangeDetectionStrategy, effect, untracked, inject, Injector, ElementRef, ApplicationRef, ViewContainerRef, input, booleanAttribute, output, EnvironmentInjector, createComponent, Directive, TemplateRef, numberAttribute, Pipe, InjectionToken, DestroyRef, Injectable, provideAppInitializer, ErrorHandler } from '@angular/core';
+import { TranslatePipe, TranslateService } from '@ngx-translate/core';
+import { ConfirmDialog } from 'primeng/confirmdialog';
+import { Dialog } from 'primeng/dialog';
+import { Toast } from 'primeng/toast';
 import { HttpErrorResponse, HttpClient, HttpBackend } from '@angular/common/http';
 import { DatePipe } from '@angular/common';
 import { isObservable, of, mergeMap, combineLatest, Observable, tap, ReplaySubject, Subject, take, throwError as throwError$1 } from 'rxjs';
@@ -18,6 +12,8 @@ import 'reflect-metadata';
 import { takeUntilDestroyed, toObservable as toObservable$1 } from '@angular/core/rxjs-interop';
 import { Title } from '@angular/platform-browser';
 import { Router, NavigationEnd, NavigationStart, RouteConfigLoadStart, RouteConfigLoadEnd, NavigationCancel, NavigationError } from '@angular/router';
+import { PrimeNG } from 'primeng/config';
+import { MessageService, ConfirmationService } from 'primeng/api';
 import { DialogService } from 'primeng/dynamicdialog';
 
 class NotificationWrapperComponent {
@@ -51,12 +47,12 @@ class NotificationWrapperComponent {
             this.dialogNotification.set(null);
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NotificationWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.12", type: NotificationWrapperComponent, isStandalone: true, selector: "mng-notification-wrapper", ngImport: i0, template: "<ng-content></ng-content>\n<p-confirmDialog appendTo=\"body\" [baseZIndex]=\"50\"></p-confirmDialog>\n\n<p-toast [baseZIndex]=\"50\">\n    <ng-template let-message pTemplate=\"message\">\n        <span [class]=\"'p-toast-message-icon pi ' + getMessageIcon(message)\"></span>\n        <div class=\"p-toast-message-text\">\n            <div class=\"p-toast-summary\">{{ message.summary }}</div>\n            @if (message.detail) {\n                <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n                @if (message.detail.length > notificationCutoff) {\n                    <div (click)=\"onShowNotificationInDialog(message)\" class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                        <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                    </div>\n                }\n            }\n        </div>\n    </ng-template>\n</p-toast>\n\n<p-dialog\n    [visible]=\"isDialogNotificationVisible()\"\n    (visibleChange)=\"onDialogNotificationVisibilityChange($event)\"\n    [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification()?.severity ?? '')\"\n    appendTo=\"body\"\n    draggable=\"false\"\n    modal=\"true\">\n    <ng-template pTemplate=\"header\" mngDialogKeydownHandler>\n        <span class=\"p-dialog-title font-bold mng-dialog-success\">\n            <span [class]=\"'mr-2 pi ' + dialogNotificationIconClass()\"></span>\n            {{ dialogNotification()?.summary ?? '' }}\n        </span>\n    </ng-template>\n    <div class=\"mng-notification-details\">\n        {{ dialogNotification()?.detail ?? '' }}\n    </div>\n</p-dialog>\n", styles: [".mng-notification-details{white-space:pre-wrap;word-wrap:break-word}\n"], dependencies: [{ kind: "ngmodule", type: ToastModule }, { kind: "component", type: i1.Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }, { kind: "directive", type: i2.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "ngmodule", type: ConfirmDialogModule }, { kind: "component", type: i3.ConfirmDialog, selector: "p-confirmDialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }, { kind: "ngmodule", type: DialogModule }, { kind: "component", type: i5.Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "visible", "style", "position"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NotificationWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.7", type: NotificationWrapperComponent, isStandalone: true, selector: "mng-notification-wrapper", ngImport: i0, template: "<ng-content></ng-content>\n<p-confirmDialog appendTo=\"body\" [baseZIndex]=\"50\"></p-confirmDialog>\n\n<p-toast [baseZIndex]=\"50\">\n    <ng-template #message let-message>\n        <span [class]=\"'p-toast-message-icon pi ' + getMessageIcon(message)\"></span>\n        <div class=\"p-toast-message-text\">\n            <div class=\"p-toast-summary\">{{ message.summary }}</div>\n            @if (message.detail) {\n                <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n                @if (message.detail.length > notificationCutoff) {\n                    <div (click)=\"onShowNotificationInDialog(message)\" class=\"font-semibold text-sm mt-2 flex items-center\">\n                        <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                    </div>\n                }\n            }\n        </div>\n    </ng-template>\n</p-toast>\n\n<p-dialog\n    [visible]=\"isDialogNotificationVisible()\"\n    (visibleChange)=\"onDialogNotificationVisibilityChange($event)\"\n    [styleClass]=\"'mng-dialog mng-dialog-xs mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification()?.severity ?? '')\"\n    appendTo=\"body\"\n    draggable=\"false\"\n    modal=\"true\">\n    <ng-template #header>\n        <span class=\"p-dialog-title font-bold mng-dialog-success\">\n            <span [class]=\"'mr-2 pi ' + dialogNotificationIconClass()\"></span>\n            {{ dialogNotification()?.summary ?? '' }}\n        </span>\n    </ng-template>\n    <div class=\"mng-notification-details\">\n        {{ dialogNotification()?.detail ?? '' }}\n    </div>\n</p-dialog>\n", styles: [".mng-notification-details{white-space:pre-wrap;word-wrap:break-word}\n"], dependencies: [{ kind: "component", type: ConfirmDialog, selector: "p-confirmDialog, p-confirmdialog, p-confirm-dialog", inputs: ["header", "icon", "message", "style", "styleClass", "maskStyleClass", "acceptIcon", "acceptLabel", "closeAriaLabel", "acceptAriaLabel", "acceptVisible", "rejectIcon", "rejectLabel", "rejectAriaLabel", "rejectVisible", "acceptButtonStyleClass", "rejectButtonStyleClass", "closeOnEscape", "dismissableMask", "blockScroll", "rtl", "closable", "appendTo", "key", "autoZIndex", "baseZIndex", "transitionOptions", "focusTrap", "defaultFocus", "breakpoints", "visible", "position"], outputs: ["onHide"] }, { kind: "pipe", type: TranslatePipe, name: "translate" }, { kind: "component", type: Dialog, selector: "p-dialog", inputs: ["header", "draggable", "resizable", "positionLeft", "positionTop", "contentStyle", "contentStyleClass", "modal", "closeOnEscape", "dismissableMask", "rtl", "closable", "responsive", "appendTo", "breakpoints", "styleClass", "maskStyleClass", "maskStyle", "showHeader", "breakpoint", "blockScroll", "autoZIndex", "baseZIndex", "minX", "minY", "focusOnShow", "maximizable", "keepInViewport", "focusTrap", "transitionOptions", "closeIcon", "closeAriaLabel", "closeTabindex", "minimizeIcon", "maximizeIcon", "closeButtonProps", "maximizeButtonProps", "visible", "style", "position", "role", "content", "contentTemplate", "footerTemplate", "closeIconTemplate", "maximizeIconTemplate", "minimizeIconTemplate", "headlessTemplate"], outputs: ["onShow", "onHide", "visibleChange", "onResizeInit", "onResizeEnd", "onDragEnd", "onMaximize"] }, { kind: "component", type: Toast, selector: "p-toast", inputs: ["key", "autoZIndex", "baseZIndex", "life", "style", "styleClass", "position", "preventOpenDuplicates", "preventDuplicates", "showTransformOptions", "hideTransformOptions", "showTransitionOptions", "hideTransitionOptions", "breakpoints"], outputs: ["onClose"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: NotificationWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: NotificationWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-notification-wrapper', standalone: true, imports: [ToastModule, ConfirmDialogModule, TranslateModule, DialogModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<p-confirmDialog appendTo=\"body\" [baseZIndex]=\"50\"></p-confirmDialog>\n\n<p-toast [baseZIndex]=\"50\">\n    <ng-template let-message pTemplate=\"message\">\n        <span [class]=\"'p-toast-message-icon pi ' + getMessageIcon(message)\"></span>\n        <div class=\"p-toast-message-text\">\n            <div class=\"p-toast-summary\">{{ message.summary }}</div>\n            @if (message.detail) {\n                <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n                @if (message.detail.length > notificationCutoff) {\n                    <div (click)=\"onShowNotificationInDialog(message)\" class=\"p-link font-semibold text-sm mt-2 flex align-items-center\">\n                        <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                    </div>\n                }\n            }\n        </div>\n    </ng-template>\n</p-toast>\n\n<p-dialog\n    [visible]=\"isDialogNotificationVisible()\"\n    (visibleChange)=\"onDialogNotificationVisibilityChange($event)\"\n    [styleClass]=\"'p-fluid mng-dialog mng-dialog-xs ' + 'mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification()?.severity ?? '')\"\n    appendTo=\"body\"\n    draggable=\"false\"\n    modal=\"true\">\n    <ng-template pTemplate=\"header\" mngDialogKeydownHandler>\n        <span class=\"p-dialog-title font-bold mng-dialog-success\">\n            <span [class]=\"'mr-2 pi ' + dialogNotificationIconClass()\"></span>\n            {{ dialogNotification()?.summary ?? '' }}\n        </span>\n    </ng-template>\n    <div class=\"mng-notification-details\">\n        {{ dialogNotification()?.detail ?? '' }}\n    </div>\n</p-dialog>\n", styles: [".mng-notification-details{white-space:pre-wrap;word-wrap:break-word}\n"] }]
+            args: [{ selector: 'mng-notification-wrapper', imports: [ConfirmDialog, TranslatePipe, Dialog, Toast], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-content></ng-content>\n<p-confirmDialog appendTo=\"body\" [baseZIndex]=\"50\"></p-confirmDialog>\n\n<p-toast [baseZIndex]=\"50\">\n    <ng-template #message let-message>\n        <span [class]=\"'p-toast-message-icon pi ' + getMessageIcon(message)\"></span>\n        <div class=\"p-toast-message-text\">\n            <div class=\"p-toast-summary\">{{ message.summary }}</div>\n            @if (message.detail) {\n                <div class=\"p-toast-detail\">{{ message.detail.slice(0, notificationCutoff) + (message.detail.length > notificationCutoff ? '...' : '') }}</div>\n                @if (message.detail.length > notificationCutoff) {\n                    <div (click)=\"onShowNotificationInDialog(message)\" class=\"font-semibold text-sm mt-2 flex items-center\">\n                        <i class=\"pi pi-chevron-down mr-1\"></i>{{ 'notification.details' | translate }}\n                    </div>\n                }\n            }\n        </div>\n    </ng-template>\n</p-toast>\n\n<p-dialog\n    [visible]=\"isDialogNotificationVisible()\"\n    (visibleChange)=\"onDialogNotificationVisibilityChange($event)\"\n    [styleClass]=\"'mng-dialog mng-dialog-xs mng-message-detail-dialog mng-message-detail-dialog-' + (dialogNotification()?.severity ?? '')\"\n    appendTo=\"body\"\n    draggable=\"false\"\n    modal=\"true\">\n    <ng-template #header>\n        <span class=\"p-dialog-title font-bold mng-dialog-success\">\n            <span [class]=\"'mr-2 pi ' + dialogNotificationIconClass()\"></span>\n            {{ dialogNotification()?.summary ?? '' }}\n        </span>\n    </ng-template>\n    <div class=\"mng-notification-details\">\n        {{ dialogNotification()?.detail ?? '' }}\n    </div>\n</p-dialog>\n", styles: [".mng-notification-details{white-space:pre-wrap;word-wrap:break-word}\n"] }]
         }] });
 
 class ACommonsErrorBase extends Error {
@@ -382,6 +378,9 @@ function dataListParamsToUrlQuery(params, defaults = {
     if (params.limit && params.limit !== defaults?.limit) {
         urlParams['limit'] = params.limit;
     }
+    else if (!opts?.skipPresetDefaultsLimit) {
+        urlParams['limit'] = defaults?.limit;
+    }
     if (params.offset && params.offset !== defaults?.offset) {
         urlParams['offset'] = params.offset;
     }
@@ -794,97 +793,109 @@ class DataProviderInst {
     }
 }
 
+/**
+ * Effect function with explicit declaration of dependencies. Dependencies will be tracked, whereas the main execution will not be.
+ *
+ * @param deps Array of dependencies to be tracked.
+ * @param fn Function where dependencies will no longer be tracked.
+ * @param opts Additional options:
+ *   - firstOnly Executes effect only once, then destroy it.
+ */
+function effectWithDeps(deps, fn, opts) {
+    let execCnt = 0;
+    const ref = effect(() => {
+        if (opts?.firstOnly) {
+            if (execCnt > 0) {
+                return;
+            }
+            ref.destroy();
+        }
+        const depsValues = deps.map(s => s());
+        execCnt++;
+        untracked(() => {
+            fn(depsValues);
+        });
+    });
+    return ref;
+}
+
 class ComponentDirective {
     constructor() {
         this.injector = inject(Injector);
         this.elementRef = inject(ElementRef);
         this.applicationRef = inject(ApplicationRef);
         this.viewContainerRef = inject(ViewContainerRef);
-        this.attachToHost = false;
-        this.componentInstanceEventEmitter = new EventEmitter();
-    }
-    ngOnInit() {
-        let component = null;
-        if (this.component) {
-            component = this.component;
-        }
-        else if (this.componentIt) {
-            component = this.injector.get(this.componentIt, null, { optional: true });
-        }
-        if (!component) {
-            throw new CommonsInternalError(`Component cannot be created, no component (${this.component}) or no or invalid injection token provided (${this.componentIt}).`);
-        }
-        const elementInjector = this.parentInjector ?? this.injector;
-        const environmentInjector = elementInjector.get(EnvironmentInjector, null, { optional: true }) ?? this.applicationRef.injector;
-        if (this.attachToHost) {
-            this.componentRef = createComponent(component, {
-                hostElement: this.elementRef.nativeElement,
-                environmentInjector: environmentInjector,
-                elementInjector: elementInjector
-            });
-        }
-        else {
-            this.viewContainerRef.clear();
-            this.componentRef = this.viewContainerRef.createComponent(component, {
-                environmentInjector: environmentInjector,
-                injector: elementInjector
-            });
-        }
-        if (this.inputs) {
-            for (const input in this.inputs) {
-                this.componentRef.setInput(input, this.inputs[input]);
+        this.component = input(undefined, { alias: 'mngComponent' });
+        this.componentIt = input(undefined, { alias: 'injectionToken' });
+        this.inputs = input();
+        this.attachToHost = input(false, { transform: booleanAttribute });
+        this.parentInjector = input();
+        this.instanceCreated = output();
+        effectWithDeps([this.component, this.componentIt], ([componentInput, componentItInput]) => {
+            let component = componentInput;
+            const componentIt = componentItInput;
+            if (!component && componentIt) {
+                component = this.injector.get(componentIt, null, { optional: true }) ?? undefined;
+            }
+            if (!component) {
+                throw new CommonsInternalError(`Component cannot be created, no component (${component}) or no or invalid injection token provided (${componentIt}).`);
+            }
+            const elementInjector = this.parentInjector() ?? this.injector;
+            const environmentInjector = elementInjector.get(EnvironmentInjector, null, { optional: true }) ?? this.applicationRef.injector;
+            if (this.attachToHost()) {
+                this.componentRef = createComponent(component, {
+                    hostElement: this.elementRef.nativeElement,
+                    environmentInjector: environmentInjector,
+                    elementInjector: elementInjector
+                });
             }
-        }
-        if (this.attachToHost) {
-            this.applicationRef.attachView(this.componentRef.hostView);
-        }
-        this.componentInstanceEventEmitter.next(this.componentRef.instance);
+            else {
+                this.viewContainerRef.clear();
+                this.componentRef = this.viewContainerRef.createComponent(component, {
+                    environmentInjector: environmentInjector,
+                    injector: elementInjector
+                });
+            }
+            const inputs = this.inputs();
+            if (inputs) {
+                for (const input in inputs) {
+                    this.componentRef.setInput(input, inputs[input]);
+                }
+            }
+            if (this.attachToHost()) {
+                this.applicationRef.attachView(this.componentRef.hostView);
+            }
+            if (this.componentRef) {
+                this.instanceCreated.emit(this.componentRef.instance);
+            }
+        });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ComponentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: ComponentDirective, isStandalone: true, selector: "[mngComponent]", inputs: { component: ["mngComponent", "component"], componentIt: ["injectionToken", "componentIt"], inputs: "inputs", attachToHost: "attachToHost", parentInjector: "parentInjector" }, outputs: { componentInstanceEventEmitter: "instanceCreated" }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ComponentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: ComponentDirective, isStandalone: true, selector: "[mngComponent]", inputs: { component: { classPropertyName: "component", publicName: "mngComponent", isSignal: true, isRequired: false, transformFunction: null }, componentIt: { classPropertyName: "componentIt", publicName: "injectionToken", isSignal: true, isRequired: false, transformFunction: null }, inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, attachToHost: { classPropertyName: "attachToHost", publicName: "attachToHost", isSignal: true, isRequired: false, transformFunction: null }, parentInjector: { classPropertyName: "parentInjector", publicName: "parentInjector", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { instanceCreated: "instanceCreated" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ComponentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ComponentDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[mngComponent]'
                 }]
-        }], propDecorators: { component: [{
-                type: Input,
-                args: [{ alias: 'mngComponent' }]
-            }], componentIt: [{
-                type: Input,
-                args: [{ alias: 'injectionToken' }]
-            }], inputs: [{
-                type: Input
-            }], attachToHost: [{
-                type: Input
-            }], parentInjector: [{
-                type: Input
-            }], componentInstanceEventEmitter: [{
-                type: Output,
-                args: ['instanceCreated']
-            }] } });
+        }], ctorParameters: () => [] });
 
 class RerenderDirective {
     constructor() {
         this.templateRef = inject((TemplateRef));
         this.viewContainerRef = inject(ViewContainerRef);
         this.mngRerender = input.required();
-        effect(() => {
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
-            const doRerender = this.mngRerender();
+        effectWithDeps([this.mngRerender], () => {
             this.viewContainerRef.clear();
             this.viewContainerRef.createEmbeddedView(this.templateRef);
         });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: RerenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "18.2.12", type: RerenderDirective, isStandalone: true, selector: "[mngRerender]", inputs: { mngRerender: { classPropertyName: "mngRerender", publicName: "mngRerender", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: RerenderDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: RerenderDirective, isStandalone: true, selector: "[mngRerender]", inputs: { mngRerender: { classPropertyName: "mngRerender", publicName: "mngRerender", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: RerenderDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: RerenderDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[mngRerender]'
                 }]
         }], ctorParameters: () => [] });
@@ -892,29 +903,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImpo
 class TemplateDirective {
     constructor() {
         this.template = inject((TemplateRef));
-        this.viewContainerRef = inject(ViewContainerRef);
-    }
-    getType() {
-        return this.name;
-    }
-    getViewContainerRef() {
-        return this.viewContainerRef;
+        this.name = input.required({ alias: 'mngTemplate' });
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.12", type: TemplateDirective, isStandalone: true, selector: "[mngTemplate]", inputs: { type: "type", name: ["mngTemplate", "name"] }, ngImport: i0 }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "19.0.7", type: TemplateDirective, isStandalone: true, selector: "[mngTemplate]", inputs: { name: { classPropertyName: "name", publicName: "mngTemplate", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TemplateDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TemplateDirective, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[mngTemplate]'
                 }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], name: [{
-                type: Input,
-                args: [{ required: true, alias: 'mngTemplate' }]
-            }] } });
+        }] });
 
 /**
  * Returns array of names for constants in enum.
@@ -1342,7 +1341,7 @@ function stringify(value) {
         try {
             return JSON.stringify(value);
         }
-        catch (e) {
+        catch {
             return value.toString();
         }
     }
@@ -1702,7 +1701,7 @@ function toastMessage(message, severity = 'success', opts) {
             severity = 'warn';
             break;
     }
-    const notification = { severity: severity, summary: opts?.title, detail: message, life: severity === 'error' ? 10000 : 5000, icon: opts?.icon };
+    const notification = { severity: severity, summary: opts?.title, detail: message, life: severity === 'error' ? 10_000 : 5000, icon: opts?.icon };
     // it will only be added if message service is provided, otherwise provide manually
     opts?.messageService?.add(notification);
     return notification;
@@ -1785,11 +1784,11 @@ function adjustRouteMenuLazyChildrenRouterLinks(rootMenuItem, lazyChildren) {
 }
 
 function findTemplateByName(templates, name) {
-    return templates.find(t => t.getType() === name)?.template ?? null;
+    return templates.find(t => t.name() === name)?.template ?? null;
 }
 
 function getI18nAsync(translate, params, ...keys) {
-    return translate.stream(keys, params).pipe(map(i18n => selectI18n(keys, i18n)));
+    return translate.stream(keys, params).pipe(map((i18n) => selectI18n(keys, i18n)));
 }
 function getI18n(translate, params, ...keys) {
     const i18n = translate.instant(keys, params);
@@ -1939,13 +1938,12 @@ class BooleanPipe {
             return value;
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BooleanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: BooleanPipe, isStandalone: true, name: "mngBoolean" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BooleanPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: BooleanPipe, isStandalone: true, name: "mngBoolean" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: BooleanPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: BooleanPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'mngBoolean',
                     pure: true
                 }]
@@ -1960,13 +1958,12 @@ class ClassMapPipe {
             return className ?? '';
         }
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ClassMapPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: ClassMapPipe, isStandalone: true, name: "mngClassMap" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ClassMapPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: ClassMapPipe, isStandalone: true, name: "mngClassMap" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ClassMapPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ClassMapPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'mngClassMap',
                     pure: true
                 }]
@@ -2054,13 +2051,12 @@ class EnumPipe {
         }
         return i18nPath ? `${i18nPath}.${enumValue}` : enumValue;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: EnumPipe, isStandalone: true, name: "mngEnum" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: EnumPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: EnumPipe, isStandalone: true, name: "mngEnum" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EnumPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: EnumPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'mngEnum',
                     pure: true
                 }]
@@ -2076,13 +2072,12 @@ class JsonPathPipe {
     transform(value, path = '') {
         return getObjectPropertyByPath(value, path);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: JsonPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: JsonPathPipe, isStandalone: true, name: "mngJsonPath" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: JsonPathPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: JsonPathPipe, isStandalone: true, name: "mngJsonPath" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: JsonPathPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: JsonPathPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'mngJsonPath',
                     pure: true
                 }]
@@ -2106,13 +2101,12 @@ class EnumeratePipe {
         })
             .join(valueSeparator);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EnumeratePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: EnumeratePipe, isStandalone: true, name: "mngEnumerate" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: EnumeratePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: EnumeratePipe, isStandalone: true, name: "mngEnumerate" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EnumeratePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: EnumeratePipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'mngEnumerate',
                     pure: true
                 }]
@@ -2151,13 +2145,12 @@ class EnumerateAsyncPipe {
             }))));
         }), map(i => i.join(valueSeparator)));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EnumerateAsyncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: EnumerateAsyncPipe, isStandalone: true, name: "mngEnumerateAsync" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: EnumerateAsyncPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: EnumerateAsyncPipe, isStandalone: true, name: "mngEnumerateAsync" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: EnumerateAsyncPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: EnumerateAsyncPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'mngEnumerateAsync',
                     pure: true
                 }]
@@ -2170,13 +2163,12 @@ class GetterPipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: GetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: GetterPipe, isStandalone: true, name: "mngGetter" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: GetterPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: GetterPipe, isStandalone: true, name: "mngGetter" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: GetterPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: GetterPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'mngGetter',
                     pure: true
                 }]
@@ -2186,13 +2178,12 @@ class I18nPropertyPipe {
     transform(property, model) {
         return getI18nTypePropertyKey(model.i18nBaseKey, property);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: I18nPropertyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: I18nPropertyPipe, isStandalone: true, name: "mngI18nProperty" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: I18nPropertyPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: I18nPropertyPipe, isStandalone: true, name: "mngI18nProperty" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: I18nPropertyPipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: I18nPropertyPipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'mngI18nProperty',
                     pure: true
                 }]
@@ -2268,13 +2259,12 @@ class ParametrizePipe {
     parametrizeString(s, params) {
         return s.replace(/{{\s?([^{}\s]*)\s?}}/g, (subs, key) => this.jsonPath.transform(params, key) ?? subs);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ParametrizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: ParametrizePipe, isStandalone: true, name: "mngParametrize" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ParametrizePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: ParametrizePipe, isStandalone: true, name: "mngParametrize" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: ParametrizePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: ParametrizePipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'mngParametrize',
                     pure: true
                 }]
@@ -2290,39 +2280,17 @@ class TemplatePipe {
         }
         return value;
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TemplatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
-    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.12", ngImport: i0, type: TemplatePipe, isStandalone: true, name: "template" }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TemplatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
+    static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.7", ngImport: i0, type: TemplatePipe, isStandalone: true, name: "template" }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: TemplatePipe, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: TemplatePipe, decorators: [{
             type: Pipe,
             args: [{
-                    standalone: true,
                     name: 'template',
                     pure: true
                 }]
         }] });
 
-/**
- * Effect function with explicit declaration of dependencies. Dependencies will be tracked, whereas the main execution will not be.
- *
- * @param deps Array of dependencies to be tracked.
- * @param fn Function where dependencies will no longer be tracked.
- * @param opts Additional options:
- *   - firstOnly Executes effect only once, then destroy it.
- */
-function effectWithDeps(deps, fn, opts) {
-    const ref = effect(() => {
-        if (opts?.firstOnly) {
-            ref.destroy();
-        }
-        const depsValues = deps.map(s => s());
-        untracked(() => {
-            fn(depsValues);
-        });
-    });
-    return ref;
-}
-
 function TypeName(typeName) {
     return function (target) {
         defineReflectTypeName(target, typeName);
@@ -2494,7 +2462,7 @@ class CommonsService {
         // internal
         this.logger = inject(LoggerService).create('CommonsService');
         this.router = inject(Router);
-        this.primengConfig = inject(PrimeNGConfig);
+        this.primengConfig = inject(PrimeNG);
         this.translate = inject(TranslateService);
         this.titleService = inject(Title);
         this.moduleConfig = inject(COMMONS_MODULE_CONFIG_IT, { optional: true });
@@ -2520,17 +2488,15 @@ class CommonsService {
         this.appDataLocale = computed(() => this._appDataLocale());
         this.appVersion = signal(this.moduleConfig?.app?.version);
         // ripple
-        this.primengConfig.ripple = true;
-        effect(() => {
-            const appLocales = this.appLocales();
+        this.primengConfig.ripple.set(true);
+        effectWithDeps([this.appLocales, this.appDataLocales], ([appLocales, appDataLocales]) => {
             if (appLocales) {
                 this.setAppLocale(this.initAppLocale());
-                this.translate.langs = this.appLocales();
+                this.translate.langs = appLocales;
             }
-            const appDataLocales = this.appDataLocales();
             if (appDataLocales)
                 this.setAppDataLocale(this.initAppDataLocale());
-        }, { allowSignalWrites: true });
+        });
         this.router.events
             .pipe(
         // Filter the NavigationEnd events as the breadcrumb is updated only when the route reaches its end
@@ -2546,7 +2512,7 @@ class CommonsService {
         this.translate
             .stream('mngPrime')
             .pipe(takeUntilDestroyed())
-            .subscribe(value => this.primengConfig.setTranslation(value));
+            .subscribe((value) => this.primengConfig.setTranslation(value));
     }
     initialize() {
         this.logger.debug('Initialize');
@@ -2618,7 +2584,7 @@ class CommonsService {
                 this.breadcrumbHomeTranslateSubscription = this.translate
                     .get(homeBreadcrumb.label)
                     .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe(i18n => {
+                    .subscribe((i18n) => {
                     homeBreadcrumb.label = i18n;
                     this.breadcrumbHome.set(homeBreadcrumb);
                 });
@@ -2637,7 +2603,7 @@ class CommonsService {
             this.breadcrumbsTranslateSubscription = this.translate
                 .get(i18nKeys)
                 .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe(i18n => {
+                .subscribe((i18n) => {
                 // Construct the breadcrumb hierarchy
                 breadcrumbs.forEach(b => {
                     if (b.label && i18n[b.label]) {
@@ -2747,10 +2713,10 @@ class CommonsService {
         titlePieces.push(this.translate.instant('app.name'));
         return titlePieces.join(' - ');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -2944,10 +2910,10 @@ class PermissionService {
         }
         return serviceInstance.isActionVisible(actionCtx, route);
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PermissionService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PermissionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PermissionService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: PermissionService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: PermissionService, decorators: [{
             type: Injectable
         }] });
 
@@ -3823,10 +3789,10 @@ class CommonsRouterService {
     getModulePathFromRouterLink(path) {
         return ('/' + (Array.isArray(path) ? path.join('/') : path)).replace(/\/\//g, '/');
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsRouterService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsRouterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsRouterService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsRouterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsRouterService, decorators: [{
             type: Injectable
         }], ctorParameters: () => [] });
 
@@ -3922,10 +3888,10 @@ class CommonsInitService {
             return throwError$1(() => err);
         }));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsInitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsInitService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsInitService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsInitService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsInitService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsInitService, decorators: [{
             type: Injectable
         }] });
 
@@ -3950,10 +3916,10 @@ class CommonsStorageService {
     removeItem(type, key) {
         this.localStorage.removeItem(this.buildLocalStorageKey(type, key));
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsStorageService }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsStorageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsStorageService }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.12", ngImport: i0, type: CommonsStorageService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImport: i0, type: CommonsStorageService, decorators: [{
             type: Injectable
         }] });
 
@@ -3975,17 +3941,19 @@ var StyleLevelEnum;
     StyleLevelEnum[StyleLevelEnum["Success"] = 5] = "Success";
     StyleLevelEnum[StyleLevelEnum["Warning"] = 6] = "Warning";
     StyleLevelEnum[StyleLevelEnum["Danger"] = 7] = "Danger";
+    StyleLevelEnum[StyleLevelEnum["Contrast"] = 8] = "Contrast";
 })(StyleLevelEnum || (StyleLevelEnum = {}));
 
 class Styles {
-    static { this.BUTTON_ROUNDED_WIDTH_XS = 26; }
-    static { this.BUTTON_ROUNDED_WIDTH_SM = 28; }
-    static { this.BUTTON_ROUNDED_WIDTH = 32; }
-    static { this.BUTTON_ROUNDED_WIDTH_LG = 45; }
-    static { this.ACTION_BUTTON_MARGIN_X = 2; }
-    static { this.TABLE_CELL_PADDING_X = 8; } // left and right paddings are same
-    static { this.TABLE_CELL_PADDING_X_SM = 4; }
-    static { this.TABLE_CELL_PADDING_X_LG = 12; }
+    static { this.BUTTON_ROUNDED_WIDTH_XS = 28; }
+    static { this.BUTTON_ROUNDED_WIDTH_SM = 31.5; }
+    static { this.BUTTON_ROUNDED_WIDTH = 35; }
+    static { this.BUTTON_ROUNDED_WIDTH_LG = 38.5; }
+    static { this.BUTTON_ROUNDED_WIDTH_XL = 42; }
+    static { this.ACTION_BUTTON_MARGIN_X = 2.1; }
+    static { this.TABLE_CELL_PADDING_X_SM = 7; }
+    static { this.TABLE_CELL_PADDING_X = 14; } // left and right paddings are same
+    static { this.TABLE_CELL_PADDING_X_LG = 17.5; }
 }
 
 var CommonsFeatureTypeEnum;
@@ -4019,12 +3987,10 @@ function provideCommons(config, ...features) {
             provide: CommonsConfigurationService,
             useFactory: () => CommonsConfigurationService.get()
         },
-        {
-            provide: APP_INITIALIZER,
-            useFactory: commonsInitializerProvider,
-            deps: [HttpBackend, CommonsInitService],
-            multi: true
-        },
+        provideAppInitializer(() => {
+            const initializerFn = commonsInitializerProvider(inject(HttpBackend), inject(CommonsInitService));
+            return initializerFn();
+        }),
         {
             provide: LoggerService,
             useFactory: () => LoggerService.get()