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

package/README.md

@@ -50,7 +50,7 @@ export function i18nHttpLoaderFactory(http: HttpBackend ) {
 - Konfiguracija v `main.ts` (v primeru uporabe modulov: `AppModule`):
 
 ```ts
-TranslateModule.forRoot({
+provideTranslateService({
     loader: {
         provide: TranslateLoader,
         useFactory: i18nHttpLoaderFactory,
@@ -59,12 +59,12 @@ TranslateModule.forRoot({
 })
 ```
 
-- Definicijo jezikov podamo preko konfiguracije `MngCommonsModule`:
+- Definicijo jezikov podamo preko konfiguracije `provideCommons()`:
 ```ts
-MngCommonsModule.forRoot({
-  app: {
-    languages: ['en', 'sl']
-  }
+provideCommons({
+        app: {
+            locales: ['en', 'sl']
+        }
 })
 ```
 

package/core/data-list/data-list-params-helpers.d.ts

@@ -21,6 +21,7 @@ export declare function fromTableLoadToDataListParams(event: TableLazyLoadEvent)
  */
 export declare function dataListParamsToUrlQuery(params: DataListParams<any, any>, defaults?: DataListParams<any, any> | null, opts?: {
     prependFilterName?: string;
+    skipPresetDefaultsLimit?: boolean;
 }): Params;
 /**
  * Merges the provided parameters with default values and returns the merged object.

package/core/directives/component.directive.d.ts

@@ -1,20 +1,18 @@
-import { ComponentRef, InjectionToken, Injector, OnInit, Type } from '@angular/core';
+import { ComponentRef, InjectionToken, Injector, Type } from '@angular/core';
 import * as i0 from "@angular/core";
-export declare class ComponentDirective<C> implements OnInit {
+export declare class ComponentDirective<C> {
     private readonly injector;
     private readonly elementRef;
     private readonly applicationRef;
     private readonly viewContainerRef;
-    component?: Type<C>;
-    componentIt?: InjectionToken<Type<C>>;
-    inputs?: {
-        [key: string]: any;
-    };
-    attachToHost: boolean;
-    parentInjector?: Injector;
-    private componentInstanceEventEmitter;
-    componentRef: ComponentRef<C>;
-    ngOnInit(): void;
+    readonly component: import("@angular/core").InputSignal<Type<C> | undefined>;
+    readonly componentIt: import("@angular/core").InputSignal<InjectionToken<Type<C>> | undefined>;
+    readonly inputs: import("@angular/core").InputSignal<Record<string, any> | undefined>;
+    readonly attachToHost: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
+    readonly parentInjector: import("@angular/core").InputSignal<Injector | undefined>;
+    readonly instanceCreated: import("@angular/core").OutputEmitterRef<C>;
+    componentRef?: ComponentRef<C>;
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<ComponentDirective<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ComponentDirective<any>, "[mngComponent]", never, { "component": { "alias": "mngComponent"; "required": false; }; "componentIt": { "alias": "injectionToken"; "required": false; }; "inputs": { "alias": "inputs"; "required": false; }; "attachToHost": { "alias": "attachToHost"; "required": false; }; "parentInjector": { "alias": "parentInjector"; "required": false; }; }, { "componentInstanceEventEmitter": "instanceCreated"; }, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ComponentDirective<any>, "[mngComponent]", never, { "component": { "alias": "mngComponent"; "required": false; "isSignal": true; }; "componentIt": { "alias": "injectionToken"; "required": false; "isSignal": true; }; "inputs": { "alias": "inputs"; "required": false; "isSignal": true; }; "attachToHost": { "alias": "attachToHost"; "required": false; "isSignal": true; }; "parentInjector": { "alias": "parentInjector"; "required": false; "isSignal": true; }; }, { "instanceCreated": "instanceCreated"; }, never, never, true, never>;
 }

package/core/directives/rerender.directive.d.ts

@@ -2,7 +2,7 @@ import * as i0 from "@angular/core";
 export declare class RerenderDirective {
     private readonly templateRef;
     private readonly viewContainerRef;
-    mngRerender: import("@angular/core").InputSignal<unknown>;
+    readonly mngRerender: import("@angular/core").InputSignal<unknown>;
     constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<RerenderDirective, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<RerenderDirective, "[mngRerender]", never, { "mngRerender": { "alias": "mngRerender"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;

package/core/directives/template.directive.d.ts

@@ -1,12 +1,8 @@
-import { TemplateRef, ViewContainerRef } from '@angular/core';
+import { TemplateRef } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TemplateDirective {
     readonly template: TemplateRef<any>;
-    private readonly viewContainerRef;
-    type: string;
-    name: string;
-    getType(): string;
-    getViewContainerRef(): ViewContainerRef;
+    readonly name: import("@angular/core").InputSignal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<TemplateDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<TemplateDirective, "[mngTemplate]", never, { "type": { "alias": "type"; "required": false; }; "name": { "alias": "mngTemplate"; "required": true; }; }, {}, never, never, true, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<TemplateDirective, "[mngTemplate]", never, { "name": { "alias": "mngTemplate"; "required": true; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package/core/i18n/i18n-common.d.ts

@@ -1,6 +1,6 @@
-import { TranslateService } from '@ngx-translate/core';
+import { TranslateService, TranslationObject } from '@ngx-translate/core';
 import { Observable } from 'rxjs';
 export declare function getI18nAsync(translate: TranslateService, params?: any, ...keys: Array<string>): Observable<string | null>;
 export declare function getI18n(translate: TranslateService, params?: any, ...keys: Array<string>): string | null;
 export declare function populateI18nParams(item?: any, params?: any): any;
-export declare function selectI18n(keys: string[], i18n: any): string | null;
+export declare function selectI18n(keys: string[], i18n: TranslationObject): string | null;

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

@@ -1,7 +1,6 @@
 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, provideAppInitializer, ErrorHandler } from '@angular/core';
-import * as i1 from '@ngx-translate/core';
-import { TranslateModule, TranslateService } from '@ngx-translate/core';
+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';
@@ -49,11 +48,11 @@ class NotificationWrapperComponent {
         }
     }
     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: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i1.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 }); }
+    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: "19.0.7", ngImport: i0, type: NotificationWrapperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'mng-notification-wrapper', imports: [ConfirmDialog, TranslateModule, 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"] }]
+            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 {
@@ -379,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;
     }
@@ -791,85 +793,99 @@ 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: "19.0.7", ngImport: i0, type: ComponentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", 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.ɵ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: "19.0.7", ngImport: i0, type: ComponentDirective, decorators: [{
             type: Directive,
             args: [{
                     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);
         });
@@ -887,28 +903,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
 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: "19.0.7", ngImport: i0, type: TemplateDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.7", type: TemplateDirective, isStandalone: true, selector: "[mngTemplate]", inputs: { type: "type", name: ["mngTemplate", "name"] }, ngImport: i0 }); }
+    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: "19.0.7", ngImport: i0, type: TemplateDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[mngTemplate]'
                 }]
-        }], propDecorators: { type: [{
-                type: Input
-            }], name: [{
-                type: Input,
-                args: [{ required: true, alias: 'mngTemplate' }]
-            }] } });
+        }] });
 
 /**
  * Returns array of names for constants in enum.
@@ -1779,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);
@@ -2286,32 +2291,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.7", ngImpor
                 }]
         }] });
 
-/**
- * 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;
-}
-
 function TypeName(typeName) {
     return function (target) {
         defineReflectTypeName(target, typeName);
@@ -2533,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');
@@ -2605,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);
                 });
@@ -2624,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]) {