@magic-xpa/angular 4.1300.0-dev4130.26 → 4.1300.0-dev4130.260

package/fesm2022/magic-xpa-angular.mjs

@@ -1,28 +1,29 @@
 import { isNullOrUndefined, NString, List, isUndefined, StringBuilder, RefParam } from '@magic-xpa/mscorelib';
 import * as i0 from '@angular/core';
-import { Injectable, Component, Input, Output, Directive, EventEmitter, HostListener, ViewChild, InjectionToken, Inject, Optional, Pipe, forwardRef, NgModule } from '@angular/core';
+import { Injectable, createNgModule, ChangeDetectionStrategy, Component, Input, Output, Directive, EventEmitter, HostListener, ViewChild, InjectionToken, Inject, Optional, Pipe, forwardRef, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { DatePipe, CommonModule, formatDate } from '@angular/common';
 import * as i2 from '@angular/router';
 import { NavigationEnd, RouterModule } from '@angular/router';
 import { FormGroup, FormControl, Validators, NG_VALIDATORS, NG_VALUE_ACCESSOR, CheckboxControlValueAccessor, DefaultValueAccessor, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import * as i3 from 'ng-dynamic-component';
+import * as i2$3 from 'ng-dynamic-component';
 import { DynamicModule } from 'ng-dynamic-component';
 import { InteractiveCommandType, HtmlProperties, OverlayType, Styles, GuiConstants, CommandType, PIC, GuiEnvironment, Events, Modifiers } from '@magic-xpa/gui';
 import { MagicBridge, getGuiEventObj, CookieService, Environment, LastFocusedManager } from '@magic-xpa/engine';
 import { MagicProperties, Logger, StrUtil, StorageAttribute, PICInterface, MsgInterface, BindingLevel, StorageAttributeType, MgControlType } from '@magic-xpa/utils';
 import { filter, map, debounceTime, take } from 'rxjs/operators';
-import { Subject, EMPTY, fromEvent } from 'rxjs';
+import { Subject, EMPTY, fromEvent, Observable } from 'rxjs';
 import { __decorate, __metadata } from 'tslib';
 import * as i2$1 from '@angular/cdk/drag-drop';
 import { DragDropModule, CdkDragHandle, CdkDrag } from '@angular/cdk/drag-drop';
 import * as i1$1 from '@angular/platform-browser';
 import * as i1$2 from '@angular/common/http';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withXhr, withInterceptorsFromDi } from '@angular/common/http';
 import { maskitoTimeOptionsGenerator } from '@maskito/kit';
 import * as i2$2 from '@angular/cdk/platform';
-import { MaskitoModule } from '@maskito/angular';
+import { MaskitoDirective } from '@maskito/angular';
 import { NativeDateAdapter, MAT_DATE_LOCALE, DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
+import { io } from 'socket.io-client';
 
 /**
  * @ignore
@@ -460,7 +461,8 @@ class CommandsCollectorMagicService {
         commands.forEach(command => { this.commands.Remove(command); });
         return commands;
     }
-    /** @nocollapse */ static ɵfac = function CommandsCollectorMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CommandsCollectorMagicService)(i0.ɵɵinject(EngineMagicService)); };
+    /** @nocollapse */ static ɵfac = function CommandsCollectorMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || CommandsCollectorMagicService)(i0.ɵɵinject(EngineMagicService)); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: CommandsCollectorMagicService, factory: CommandsCollectorMagicService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CommandsCollectorMagicService, [{
@@ -531,13 +533,12 @@ class SubformMagicService {
     componentListMagicService;
     loader;
     injector;
-    compiler;
     subformsDict /*:{ [x: string]: SubformDefinition }*/ = {};
     routesDict = {}; // dictionary of router outlet to router path
     currentRouteDefinition = null;
     static currentCallerMgSubformServiceRef = null;
     static routerContainers = new Array();
-    constructor(task, activatedRoute, componentList, pendingCommandsCollector, router, routerCommandsMagicService, componentListMagicService, loader, injector, compiler) {
+    constructor(task, activatedRoute, componentList, pendingCommandsCollector, router, routerCommandsMagicService, componentListMagicService, loader, injector) {
         this.task = task;
         this.activatedRoute = activatedRoute;
         this.componentList = componentList;
@@ -547,7 +548,6 @@ class SubformMagicService {
         this.componentListMagicService = componentListMagicService;
         this.loader = loader;
         this.injector = injector;
-        this.compiler = compiler;
     }
     /**
      * Finds and returns the component according to the subform name
@@ -608,8 +608,7 @@ class SubformMagicService {
                     // extract name of module(XX) from 'MagicXXModule'
                     const moduleName = lazyLoadModule.moduleName.slice(Magic.length, -Module.length);
                     this.loader.Load(moduleName).then(m => {
-                        const compiled = this.compiler.compileModuleAndAllComponentsSync(m[lazyLoadModule.moduleName]);
-                        moduleRef = compiled.ngModuleFactory.create(this.injector);
+                        moduleRef = createNgModule(m[lazyLoadModule.moduleName], this.injector);
                         this.subformsDict[subformControlName] = {
                             formName,
                             parameters: { taskIdParam: taskId, taskDescription: taskDescription }
@@ -749,12 +748,13 @@ class SubformMagicService {
         }
         return currentActiveRoute;
     }
-    /** @nocollapse */ static ɵfac = function SubformMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SubformMagicService)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(i2.ActivatedRoute), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(CommandsCollectorMagicService), i0.ɵɵinject(i2.Router), i0.ɵɵinject(RouterCommandsMagicService), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(i0.Compiler)); };
+    /** @nocollapse */ static ɵfac = function SubformMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || SubformMagicService)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(i2.ActivatedRoute), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(CommandsCollectorMagicService), i0.ɵɵinject(i2.Router), i0.ɵɵinject(RouterCommandsMagicService), i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector)); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: SubformMagicService, factory: SubformMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubformMagicService, [{
         type: Injectable
-    }], () => [{ type: TaskMagicService }, { type: i2.ActivatedRoute }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: i2.Router }, { type: RouterCommandsMagicService }, { type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.Compiler }], null); })();
+    }], () => [{ type: TaskMagicService }, { type: i2.ActivatedRoute }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: i2.Router }, { type: RouterCommandsMagicService }, { type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }], null); })();
 
 /**
  * Mock component, implements routing by connecting the requested URL with the appropriate Magic task
@@ -872,8 +872,9 @@ class RouterContainerMagicComponent {
     getRouterPath() {
         return this.routePath;
     }
-    /** @nocollapse */ static ɵfac = function RouterContainerMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RouterContainerMagicComponent)(i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(RouterCommandsMagicService)); };
-    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: RouterContainerMagicComponent, selectors: [["magic-route-outlet"]], standalone: false, decls: 0, vars: 0, template: function RouterContainerMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
+    /** @nocollapse */ static ɵfac = function RouterContainerMagicComponent_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || RouterContainerMagicComponent)(i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(RouterCommandsMagicService)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: RouterContainerMagicComponent, selectors: [["magic-route-outlet"]], standalone: false, decls: 0, vars: 0, template: function RouterContainerMagicComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(RouterContainerMagicComponent, [{
         type: Component,
@@ -881,10 +882,11 @@ class RouterContainerMagicComponent {
                 selector: 'magic-route-outlet',
                 template: `
   `,
+                changeDetection: ChangeDetectionStrategy.Eager,
                 standalone: false
             }]
     }], () => [{ type: i2.ActivatedRoute }, { type: i2.Router }, { type: EngineMagicService }, { type: TaskMagicService }, { type: i0.ViewContainerRef }, { type: ComponentListMagicService }, { type: CommandsCollectorMagicService }, { type: RouterCommandsMagicService }], null); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RouterContainerMagicComponent, { className: "RouterContainerMagicComponent", filePath: "src/ui/router-container.magic.component.ts", lineNumber: 23 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(RouterContainerMagicComponent, { className: "RouterContainerMagicComponent", filePath: "src/ui/router-container.magic.component.ts", lineNumber: 24 }); })();
 
 /**
  * @ignore
@@ -1003,6 +1005,61 @@ class GuiInteractiveExecutor {
     }
 }
 
+class MagicModalProperties {
+    formName = "overlay";
+    showTitleBar = true;
+    x = 0;
+    y = 0;
+    width = "300px";
+    height = "300px";
+    isCenteredToWindow = true;
+    shouldCloseOnBackgroundClick = true;
+    isResizable = true;
+    isMovable = true;
+    constructor(formName, showTitleBar, x, y, width, height, isCenteredToWindow, shouldCloseOnBackgroundClick, isResizable, isMovable) {
+        this.formName = formName;
+        this.showTitleBar = showTitleBar;
+        this.x = x;
+        this.y = y;
+        this.width = width;
+        this.height = height;
+        this.isCenteredToWindow = isCenteredToWindow;
+        this.shouldCloseOnBackgroundClick = shouldCloseOnBackgroundClick;
+        this.isResizable = isResizable;
+        this.isMovable = isMovable;
+    }
+    X() {
+        return this.x;
+    }
+    Y() {
+        return this.y;
+    }
+    Width() {
+        return this.width;
+    }
+    Height() {
+        return this.height;
+    }
+    IsCenteredToWindow() {
+        return this.isCenteredToWindow;
+    }
+    FormName() {
+        return this.formName;
+    }
+    ShowTitleBar() {
+        return this.showTitleBar;
+    }
+    ShouldCloseOnBackgroundClick() {
+        return this.shouldCloseOnBackgroundClick;
+    }
+    IsResizable() {
+        return this.isResizable;
+    }
+    IsMovable() {
+        return this.isMovable;
+    }
+}
+
 let BaseMagicOverlayContainer = class BaseMagicOverlayContainer {
 };
 __decorate([
@@ -1033,7 +1090,8 @@ class MagicViewContainerRef {
         let comp = (this.vcRef._hostLView).find(v => v != null && !isNullOrUndefined(v.setViewContainerRef));
         comp.setViewContainerRef(vcRef);
     }
-    /** @nocollapse */ static ɵfac = function MagicViewContainerRef_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicViewContainerRef)(i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    /** @nocollapse */ static ɵfac = function MagicViewContainerRef_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || MagicViewContainerRef)(i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MagicViewContainerRef, selectors: [["", "magicViewContainerRef", ""]], standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicViewContainerRef, [{
@@ -1046,50 +1104,50 @@ class MagicViewContainerRef {
 
 const _c0$3 = ["modalheader"];
 const _c1$1 = ["modalForeground"];
-function MagicOverlayContainer_button_2_Template(rf, ctx) { if (rf & 1) {
-    const _r2 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "button", 14);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_button_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r2); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
+    i0.ɵɵlistener("click", function MagicOverlayContainer_Conditional_2_Template_button_click_0_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnClose()); });
     i0.ɵɵtext(1, "X");
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_span_5_Template(rf, ctx) { if (rf & 1) {
-    const _r4 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 15);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_5_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "right")); });
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_5_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event, "right")); });
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_span_6_Template(rf, ctx) { if (rf & 1) {
-    const _r5 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_6_Template(rf, ctx) { if (rf & 1) {
+    const _r4 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 16);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_6_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "left")); });
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_6_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event, "left")); });
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_span_7_Template(rf, ctx) { if (rf & 1) {
-    const _r6 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_7_Template(rf, ctx) { if (rf & 1) {
+    const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 17);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_7_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "corner")); });
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_7_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event, "corner")); });
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_span_8_Template(rf, ctx) { if (rf & 1) {
-    const _r7 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_8_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "span", 18);
-    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_span_8_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r7); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.onResizeStart($event, "bottom")); });
+    i0.ɵɵlistener("mousedown", function MagicOverlayContainer_Conditional_8_Template_span_mousedown_0_listener($event) { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onResizeStart($event, "bottom")); });
     i0.ɵɵelementEnd();
 } }
-function MagicOverlayContainer_div_9_Template(rf, ctx) { if (rf & 1) {
-    const _r8 = i0.ɵɵgetCurrentView();
+function MagicOverlayContainer_Conditional_9_Template(rf, ctx) { if (rf & 1) {
+    const _r7 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 19, 2);
     i0.ɵɵtext(2);
     i0.ɵɵelementStart(3, "button", 20);
-    i0.ɵɵlistener("click", function MagicOverlayContainer_div_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r8); const ctx_r2 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r2.OnClose()); });
+    i0.ɵɵlistener("click", function MagicOverlayContainer_Conditional_9_Template_button_click_3_listener() { i0.ɵɵrestoreView(_r7); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.OnClose()); });
     i0.ɵɵtext(4, "X");
     i0.ɵɵelementEnd()();
 } if (rf & 2) {
-    const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵclassProp("movable", ctx_r2.IsMovable());
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("movable", ctx_r1.IsMovable());
     i0.ɵɵadvance(2);
-    i0.ɵɵtextInterpolate1(" ", ctx_r2.getText(), " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r1.getText(), " ");
 } }
 /**
  * Creates a modal window for Magic modal window components
@@ -1142,7 +1200,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     ngOnInit() {
         this.componentRef = this.modalbodyViewContainerRef.createComponent(this.ModalComp);
         Object.assign(this.componentRef.instance, this.ModalCompParameters);
-        let comp = this.componentRef.instance;
+        let comp = this.getOverlayProps();
         this.isCenteredToWindow = comp.IsCenteredToWindow();
     }
     ngAfterViewInit() {
@@ -1161,7 +1219,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      */
     getText() {
         if (this.componentRef !== null) {
-            let comp = this.componentRef.instance;
+            let comp = this.getOverlayProps();
             return comp.FormName();
         }
         else
@@ -1180,7 +1238,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     getStyle() {
         let styles = {};
         if (this.componentRef != undefined) {
-            let comp = this.componentRef.instance;
+            let comp = this.getOverlayProps();
             styles['width'] = comp.Width();
             styles['height'] = comp.Height();
             if (this.isCenteredToWindow) {
@@ -1217,7 +1275,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      */
     getShowTitleBar() {
         if (this.componentRef != undefined) {
-            let comp = this.componentRef.instance;
+            let comp = this.getOverlayProps();
             return comp.ShowTitleBar();
         }
     }
@@ -1231,7 +1289,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      * Handles click in the background window
      */
     OnBackgroundClick() {
-        let comp = this.componentRef.instance;
+        let comp = this.getOverlayProps();
         if (comp.ShouldCloseOnBackgroundClick())
             this.OnClose();
     }
@@ -1240,7 +1298,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      * @returns {boolean} True if the overlay is resizable, false otherwise.
      */
     IsResizable() {
-        let comp = this.componentRef.instance;
+        let comp = this.getOverlayProps();
         return comp.IsResizable();
     }
     /**
@@ -1248,7 +1306,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
      * @returns {boolean} True if the overlay is movable, false otherwise.
      */
     IsMovable() {
-        let comp = this.componentRef.instance;
+        let comp = this.getOverlayProps();
         return comp.IsMovable();
     }
     /**
@@ -1342,45 +1400,59 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         this.resizing = false;
         this.resizeDirection = null;
     }
+    getOverlayProps() {
+        let obj = this.componentRef.instance;
+        if (obj && obj.magicModalProperties instanceof MagicModalProperties)
+            obj = obj.magicModalProperties;
+        if (!(obj instanceof MagicModalProperties)) {
+            const componentName = this.componentRef?.instance?.constructor?.name || 'Unknown';
+            throw new Error(`Overlay component '${componentName}' cannot be opened. ` +
+                `Ensure that the component contains a 'magicModalProperties' property of type MagicModalProperties. ` +
+                `Example: magicModalProperties: MagicModalProperties = new MagicModalProperties("formName", true, 0, 0, "300px", "300px", true, true, true, true);`);
+        }
+        return obj;
+    }
     /** @nocollapse */ static ɵfac = function MagicOverlayContainer_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicOverlayContainer)(); };
     /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicOverlayContainer, selectors: [["app-magic-overlay-container"]], viewQuery: function MagicOverlayContainer_Query(rf, ctx) { if (rf & 1) {
-            i0.ɵɵviewQuery(_c0$3, 5);
-            i0.ɵɵviewQuery(_c1$1, 5);
+            i0.ɵɵviewQuery(_c0$3, 5)(_c1$1, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.headerElementRef = _t.first);
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.foregroundElementRef = _t.first);
         } }, hostBindings: function MagicOverlayContainer_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("mousemove", function MagicOverlayContainer_mousemove_HostBindingHandler($event) { return ctx.onResize($event); }, false, i0.ɵɵresolveWindow)("mouseup", function MagicOverlayContainer_mouseup_HostBindingHandler() { return ctx.onResizeEnd(); }, false, i0.ɵɵresolveWindow);
-        } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 9, consts: [["modalForeground", ""], ["modalbody", ""], ["modalheader", ""], [1, "boundary-line"], [1, "modal-background", 3, "click"], ["tabindex", "-1", "style", "float:right; border: none; background-color: transparent; outline: none; color: white", 3, "click", 4, "ngIf"], ["cdkDragBoundary", ".boundary-line", "cdkDrag", "", 1, "modal-foreground", 3, "ngStyle", "cdkDragDisabled"], ["class", "dragHandle right", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle left", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle corner", 3, "mousedown", 4, "ngIf"], ["class", "dragHandle bottom", 3, "mousedown", 4, "ngIf"], ["class", "modal-header", "cdkDragHandle", "", 3, "movable", 4, "ngIf"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "dragHandle", "right", 3, "mousedown"], [1, "dragHandle", "left", 3, "mousedown"], [1, "dragHandle", "corner", 3, "mousedown"], [1, "dragHandle", "bottom", 3, "mousedown"], ["cdkDragHandle", "", 1, "modal-header"], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
-            const _r1 = i0.ɵɵgetCurrentView();
+            i0.ɵɵlistener("mousemove", function MagicOverlayContainer_mousemove_HostBindingHandler($event) { return ctx.onResize($event); }, i0.ɵɵresolveWindow)("mouseup", function MagicOverlayContainer_mouseup_HostBindingHandler() { return ctx.onResizeEnd(); }, i0.ɵɵresolveWindow);
+        } }, inputs: { ModalComp: "ModalComp", ModalCompParameters: "ModalCompParameters" }, outputs: { onClose: "onClose" }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature], decls: 13, vars: 9, consts: [["modalForeground", ""], ["modalbody", ""], ["modalheader", ""], [1, "boundary-line"], [1, "modal-background", 3, "click"], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white"], ["cdkDragBoundary", ".boundary-line", "cdkDrag", "", 1, "modal-foreground", 3, "ngStyle", "cdkDragDisabled"], [1, "dragHandle", "right"], [1, "dragHandle", "left"], [1, "dragHandle", "corner"], [1, "dragHandle", "bottom"], ["cdkDragHandle", "", 1, "modal-header", 3, "movable"], [3, "ngStyle"], ["magicViewContainerRef", ""], ["tabindex", "-1", 2, "float", "right", "border", "none", "background-color", "transparent", "outline", "none", "color", "white", 3, "click"], [1, "dragHandle", "right", 3, "mousedown"], [1, "dragHandle", "left", 3, "mousedown"], [1, "dragHandle", "corner", 3, "mousedown"], [1, "dragHandle", "bottom", 3, "mousedown"], ["cdkDragHandle", "", 1, "modal-header"], ["tabindex", "-1", 2, "float", "right", 3, "click"]], template: function MagicOverlayContainer_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 3)(1, "div", 4);
-            i0.ɵɵlistener("click", function MagicOverlayContainer_Template_div_click_1_listener() { i0.ɵɵrestoreView(_r1); return i0.ɵɵresetView(ctx.OnBackgroundClick()); });
-            i0.ɵɵtemplate(2, MagicOverlayContainer_button_2_Template, 2, 0, "button", 5);
+            i0.ɵɵlistener("click", function MagicOverlayContainer_Template_div_click_1_listener() { return ctx.OnBackgroundClick(); });
+            i0.ɵɵconditionalCreate(2, MagicOverlayContainer_Conditional_2_Template, 2, 0, "button", 5);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(3, "div", 6, 0);
-            i0.ɵɵtemplate(5, MagicOverlayContainer_span_5_Template, 1, 0, "span", 7)(6, MagicOverlayContainer_span_6_Template, 1, 0, "span", 8)(7, MagicOverlayContainer_span_7_Template, 1, 0, "span", 9)(8, MagicOverlayContainer_span_8_Template, 1, 0, "span", 10)(9, MagicOverlayContainer_div_9_Template, 5, 3, "div", 11);
+            i0.ɵɵconditionalCreate(5, MagicOverlayContainer_Conditional_5_Template, 1, 0, "span", 7);
+            i0.ɵɵconditionalCreate(6, MagicOverlayContainer_Conditional_6_Template, 1, 0, "span", 8);
+            i0.ɵɵconditionalCreate(7, MagicOverlayContainer_Conditional_7_Template, 1, 0, "span", 9);
+            i0.ɵɵconditionalCreate(8, MagicOverlayContainer_Conditional_8_Template, 1, 0, "span", 10);
+            i0.ɵɵconditionalCreate(9, MagicOverlayContainer_Conditional_9_Template, 5, 3, "div", 11);
             i0.ɵɵelementStart(10, "div", 12);
             i0.ɵɵelement(11, "div", 13, 1);
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", !ctx.getShowTitleBar());
+            i0.ɵɵconditional(!ctx.getShowTitleBar() ? 2 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngStyle", ctx.getStyle())("cdkDragDisabled", !ctx.IsMovable());
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.IsResizable() && !ctx.isRtl);
+            i0.ɵɵconditional(ctx.IsResizable() && !ctx.isRtl ? 5 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsResizable() && ctx.isRtl);
+            i0.ɵɵconditional(ctx.IsResizable() && ctx.isRtl ? 6 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵconditional(ctx.IsResizable() ? 7 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.IsResizable());
+            i0.ɵɵconditional(ctx.IsResizable() ? 8 : -1);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.getShowTitleBar());
+            i0.ɵɵconditional(ctx.getShowTitleBar() ? 9 : -1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngStyle", ctx.getClientAreaStyles());
-        } }, dependencies: [i1.NgIf, i1.NgStyle, i2$1.CdkDragHandle, i2$1.CdkDrag, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}.modal-header.movable[_ngcontent-%COMP%]:active{cursor:move}.container[_ngcontent-%COMP%]{position:relative}.dragHandle[_ngcontent-%COMP%]{position:absolute}.dragHandle.corner[_ngcontent-%COMP%]{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%);position:absolute}[dir=\"rtl\"][_nghost-%COMP%]   .dragHandle.corner[_ngcontent-%COMP%], [dir=\"rtl\"]   [_nghost-%COMP%]   .dragHandle.corner[_ngcontent-%COMP%]{right:auto!important;left:0;cursor:nesw-resize;background:linear-gradient(225deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.left[_ngcontent-%COMP%]{width:2px;left:-2px;height:100%;cursor:ew-resize}.dragHandle.right[_ngcontent-%COMP%]{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom[_ngcontent-%COMP%]{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line[_ngcontent-%COMP%]{width:100%;height:100%;max-width:100%}"] });
+        } }, dependencies: [i1.NgStyle, i2$1.CdkDragHandle, i2$1.CdkDrag, MagicViewContainerRef], styles: [".modal-foreground[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#fff}.modal-background[_ngcontent-%COMP%]{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header[_ngcontent-%COMP%]{background-color:beige;border-bottom:2px solid red}.modal-header.movable[_ngcontent-%COMP%]:active{cursor:move}.container[_ngcontent-%COMP%]{position:relative}.dragHandle[_ngcontent-%COMP%]{position:absolute}.dragHandle.corner[_ngcontent-%COMP%]{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%);position:absolute}[dir=\"rtl\"][_nghost-%COMP%]   .dragHandle.corner[_ngcontent-%COMP%], [dir=\"rtl\"]   [_nghost-%COMP%]   .dragHandle.corner[_ngcontent-%COMP%]{right:auto!important;left:0;cursor:nesw-resize;background:linear-gradient(225deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.left[_ngcontent-%COMP%]{width:2px;left:-2px;height:100%;cursor:ew-resize}.dragHandle.right[_ngcontent-%COMP%]{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom[_ngcontent-%COMP%]{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line[_ngcontent-%COMP%]{width:100%;height:100%;max-width:100%}"], changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainer, [{
         type: Component,
@@ -1388,20 +1460,32 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
     <div class="boundary-line">
 
       <div class="modal-background" (click)="OnBackgroundClick()">
-        <button (click)="OnClose()" tabindex="-1" style="float:right; border: none; background-color: transparent; outline: none; color: white" *ngIf="!getShowTitleBar()">X</button>
+        @if (!getShowTitleBar()) {
+          <button (click)="OnClose()" tabindex="-1" style="float:right; border: none; background-color: transparent; outline: none; color: white">X</button>
+        }
       </div>
 
       <div #modalForeground class="modal-foreground" [ngStyle]="getStyle()" cdkDragBoundary=".boundary-line" cdkDrag [cdkDragDisabled]="!IsMovable()">
 
-        <span *ngIf="IsResizable() && !isRtl" class="dragHandle right" (mousedown)="onResizeStart($event, 'right')"></span>
-        <span *ngIf="IsResizable() && isRtl" class="dragHandle left" (mousedown)="onResizeStart($event, 'left')"></span>
-        <span *ngIf="IsResizable()" class="dragHandle corner" (mousedown)="onResizeStart($event, 'corner')"></span>
-        <span *ngIf="IsResizable()" class="dragHandle bottom" (mousedown)="onResizeStart($event, 'bottom')"></span>
+        @if (IsResizable() && !isRtl) {
+          <span class="dragHandle right" (mousedown)="onResizeStart($event, 'right')"></span>
+        }
+        @if (IsResizable() && isRtl) {
+          <span class="dragHandle left" (mousedown)="onResizeStart($event, 'left')"></span>
+        }
+        @if (IsResizable()) {
+          <span class="dragHandle corner" (mousedown)="onResizeStart($event, 'corner')"></span>
+        }
+        @if (IsResizable()) {
+          <span class="dragHandle bottom" (mousedown)="onResizeStart($event, 'bottom')"></span>
+        }
 
-        <div #modalheader class="modal-header" *ngIf="getShowTitleBar()" cdkDragHandle [class.movable]="IsMovable()">
-          {{getText()}}
-          <button (click)="OnClose()" style="float:right" tabindex="-1">X</button>
-        </div>
+        @if (getShowTitleBar()) {
+          <div #modalheader class="modal-header" cdkDragHandle [class.movable]="IsMovable()">
+            {{getText()}}
+            <button (click)="OnClose()" style="float:right" tabindex="-1">X</button>
+          </div>
+        }
 
         <div [ngStyle]="getClientAreaStyles()">
           <div #modalbody magicViewContainerRef>
@@ -1409,7 +1493,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
         </div>
       </div>
     </div>
-  `, standalone: false, styles: [".modal-foreground{position:fixed;inset:0;background-color:#fff}.modal-background{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}.modal-header.movable:active{cursor:move}.container{position:relative}.dragHandle{position:absolute}.dragHandle.corner{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%);position:absolute}:host-context([dir=\"rtl\"]) .dragHandle.corner{right:auto!important;left:0;cursor:nesw-resize;background:linear-gradient(225deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.left{width:2px;left:-2px;height:100%;cursor:ew-resize}.dragHandle.right{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line{width:100%;height:100%;max-width:100%}\n"] }]
+    `, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [".modal-foreground{position:fixed;inset:0;background-color:#fff}.modal-background{position:fixed;inset:0;background-color:#000;opacity:.75}.modal-header{background-color:beige;border-bottom:2px solid red}.modal-header.movable:active{cursor:move}.container{position:relative}.dragHandle{position:absolute}.dragHandle.corner{width:10px;right:0;bottom:0;height:10px;cursor:nwse-resize;background:linear-gradient(135deg,rgba(0,0,0,.4) 50%,transparent 50%);position:absolute}:host-context([dir=\"rtl\"]) .dragHandle.corner{right:auto!important;left:0;cursor:nesw-resize;background:linear-gradient(225deg,rgba(0,0,0,.4) 50%,transparent 50%)}.dragHandle.left{width:2px;left:-2px;height:100%;cursor:ew-resize}.dragHandle.right{width:2px;right:-2px;height:100%;cursor:ew-resize}.dragHandle.bottom{height:2px;bottom:-2px;width:100%;cursor:ns-resize}.boundary-line{width:100%;height:100%;max-width:100%}\n"] }]
     }], () => [], { headerElementRef: [{
             type: ViewChild,
             args: ['modalheader', { static: false }]
@@ -1429,7 +1513,7 @@ class MagicOverlayContainer extends BaseMagicOverlayContainer {
             type: HostListener,
             args: ['window:mouseup']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src/ui/magic-modal/magic-overlay-container.ts", lineNumber: 52 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainer, { className: "MagicOverlayContainer", filePath: "src/ui/magic-modal/magic-overlay-container.ts", lineNumber: 67 }); })();
 
 /**
  * Service managing overlay windows
@@ -1472,11 +1556,11 @@ class BaseMagicConfirmComponent {
         this.onClose.emit(result);
     }
     /** @nocollapse */ static ɵfac = function BaseMagicConfirmComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseMagicConfirmComponent)(); };
-    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-confirm"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, standalone: false, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { }, encapsulation: 2 });
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: BaseMagicConfirmComponent, selectors: [["mg-base-confirm"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, standalone: false, decls: 0, vars: 0, template: function BaseMagicConfirmComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicConfirmComponent, [{
         type: Component,
-        args: [{ selector: 'mg-base-confirm', template: '', standalone: false }]
+        args: [{ selector: 'mg-base-confirm', template: '', changeDetection: ChangeDetectionStrategy.Eager, standalone: false }]
     }], null, { title: [{
             type: Input
         }], message: [{
@@ -1484,7 +1568,7 @@ class BaseMagicConfirmComponent {
         }], onClose: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicConfirmComponent, { className: "BaseMagicConfirmComponent", filePath: "src/ui/components/base-magic-confirm.component.ts", lineNumber: 13 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicConfirmComponent, { className: "BaseMagicConfirmComponent", filePath: "src/ui/components/base-magic-confirm.component.ts", lineNumber: 14 }); })();
 
 /**
  * This is a base class for the magic alert components
@@ -1510,11 +1594,11 @@ class BaseMagicAlertComponent {
         this.onClose.emit();
     }
     /** @nocollapse */ static ɵfac = function BaseMagicAlertComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || BaseMagicAlertComponent)(); };
-    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: BaseMagicAlertComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, standalone: false, decls: 0, vars: 0, template: function BaseMagicAlertComponent_Template(rf, ctx) { }, encapsulation: 2 });
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: BaseMagicAlertComponent, selectors: [["mg-base-alert"]], inputs: { title: "title", message: "message" }, outputs: { onClose: "onClose" }, standalone: false, decls: 0, vars: 0, template: function BaseMagicAlertComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(BaseMagicAlertComponent, [{
         type: Component,
-        args: [{ selector: 'mg-base-alert', template: '', standalone: false }]
+        args: [{ selector: 'mg-base-alert', template: '', changeDetection: ChangeDetectionStrategy.Eager, standalone: false }]
     }], null, { title: [{
             type: Input
         }], message: [{
@@ -1522,7 +1606,7 @@ class BaseMagicAlertComponent {
         }], onClose: [{
             type: Output
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicAlertComponent, { className: "BaseMagicAlertComponent", filePath: "src/ui/components/base-magic-alert.component.ts", lineNumber: 14 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(BaseMagicAlertComponent, { className: "BaseMagicAlertComponent", filePath: "src/ui/components/base-magic-alert.component.ts", lineNumber: 15 }); })();
 
 /**
  * Directive for setting focus on element
@@ -1535,7 +1619,8 @@ class MagicFocusDirective {
     ngAfterViewInit() {
         this.hostElement.nativeElement.focus();
     }
-    /** @nocollapse */ static ɵfac = function MagicFocusDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicFocusDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    /** @nocollapse */ static ɵfac = function MagicFocusDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || MagicFocusDirective)(i0.ɵɵdirectiveInject(i0.ElementRef)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MagicFocusDirective, selectors: [["", "magicFocus", ""]], standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicFocusDirective, [{
@@ -1552,7 +1637,6 @@ class MagicOverlayContainerWrapper {
     magicLazyModuleLoader;
     injector;
     changeDetectorRef;
-    compiler;
     /**
      *
      */
@@ -1581,12 +1665,11 @@ class MagicOverlayContainerWrapper {
      *
      * @param componentFactoryResolver
      */
-    constructor(componentListMagicService, magicLazyModuleLoader, injector, changeDetectorRef, compiler) {
+    constructor(componentListMagicService, magicLazyModuleLoader, injector, changeDetectorRef) {
         this.componentListMagicService = componentListMagicService;
         this.magicLazyModuleLoader = magicLazyModuleLoader;
         this.injector = injector;
         this.changeDetectorRef = changeDetectorRef;
-        this.compiler = compiler;
     }
     /**
      *
@@ -1601,8 +1684,7 @@ class MagicOverlayContainerWrapper {
                 // extract name of module(XX) from 'MagicXXModule'
                 const moduleName = lazyLoadModule.moduleName.slice(Magic.length, -Module.length);
                 this.magicLazyModuleLoader.Load(moduleName).then(m => {
-                    const compiled = this.compiler.compileModuleAndAllComponentsSync(m[lazyLoadModule.moduleName]);
-                    moduleRef = compiled.ngModuleFactory.create(this.injector);
+                    moduleRef = createNgModule(m[lazyLoadModule.moduleName], this.injector);
                     this.loadComponent(moduleRef);
                 });
             }
@@ -1637,7 +1719,8 @@ class MagicOverlayContainerWrapper {
     DetectChanges() {
         this.changeDetectorRef.detectChanges();
     }
-    /** @nocollapse */ static ɵfac = function MagicOverlayContainerWrapper_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicOverlayContainerWrapper)(i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(MagicLazyLoaderService), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i0.Compiler)); };
+    /** @nocollapse */ static ɵfac = function MagicOverlayContainerWrapper_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || MagicOverlayContainerWrapper)(i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(MagicLazyLoaderService), i0.ɵɵdirectiveInject(i0.Injector), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicOverlayContainerWrapper, selectors: [["app-magic-overlay-container-wrapper"]], viewQuery: function MagicOverlayContainerWrapper_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$2, 7);
         } if (rf & 2) {
@@ -1651,7 +1734,7 @@ class MagicOverlayContainerWrapper {
             i0.ɵɵelementEnd();
             i0.ɵɵelement(6, "div", 5);
             i0.ɵɵelementEnd();
-        } }, dependencies: [MagicFocusDirective, MagicViewContainerRef], styles: [".overlay-container-wrapper-background[_ngcontent-%COMP%]{position:fixed;z-index:999;inset:0}"] });
+        } }, dependencies: [MagicFocusDirective, MagicViewContainerRef], styles: [".overlay-container-wrapper-background[_ngcontent-%COMP%]{position:fixed;z-index:999;inset:0}"], changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicOverlayContainerWrapper, [{
         type: Component,
@@ -1664,8 +1747,8 @@ class MagicOverlayContainerWrapper {
       </div>
       <div class="overlay-container-wrapper-background" tabIndex="0" style="width: 0px; height: 0px;" ></div>
     </div>
-  `, standalone: false, styles: [".overlay-container-wrapper-background{position:fixed;z-index:999;inset:0}\n"] }]
-    }], () => [{ type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }, { type: i0.Compiler }], { Component: [{
+  `, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [".overlay-container-wrapper-background{position:fixed;z-index:999;inset:0}\n"] }]
+    }], () => [{ type: ComponentListMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.ChangeDetectorRef }], { Component: [{
             type: Input
         }], Parameters: [{
             type: Input
@@ -1677,7 +1760,7 @@ class MagicOverlayContainerWrapper {
             type: ViewChild,
             args: ['overlayContainerWrapper', { static: true }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainerWrapper, { className: "MagicOverlayContainerWrapper", filePath: "src/ui/magic-modal/magic-overlay-container-wrapper.ts", lineNumber: 46 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicOverlayContainerWrapper, { className: "MagicOverlayContainerWrapper", filePath: "src/ui/magic-modal/magic-overlay-container-wrapper.ts", lineNumber: 48 }); })();
 
 /***
  * This is sample component for the alert message
@@ -1697,7 +1780,7 @@ class MagicAlertComponent extends BaseMagicAlertComponent {
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", ctx.title, "");
+            i0.ɵɵtextInterpolate1(" ", ctx.title);
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate1("", ctx.message, " ");
         } }, styles: [".mg-message-background[_ngcontent-%COMP%]{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button[_ngcontent-%COMP%]{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}"] });
@@ -1736,7 +1819,7 @@ class MagicConfirmationBoxComponent extends BaseMagicConfirmComponent {
             i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate1(" ", ctx.title, "");
+            i0.ɵɵtextInterpolate1(" ", ctx.title);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", ctx.message, " ");
         } }, styles: [".mg-message-background[_ngcontent-%COMP%]{background-color:#f5f5f5;width:40%;font-family:Open Sans,Helvetica Neue,Helvetica,Arial,sans-serif;padding:17px;border-radius:5px;text-align:center;margin-top:10%;margin-left:auto;margin-right:auto;border:1px solid gray}button[_ngcontent-%COMP%]{background-color:#8cd4f5;color:#fff;border:none;box-shadow:none;font-size:17px;font-weight:500;-webkit-border-radius:4px;border-radius:5px;padding:10px 32px;margin:26px 5px 0;cursor:pointer}button.cancel[_ngcontent-%COMP%]{background-color:#c1c1c1}"] });
@@ -1867,15 +1950,13 @@ class OverlayWindowService {
     engineMagicService;
     magicLazyModuleLoader;
     injector;
-    compiler;
     overlayContainerMagicProvider;
     confirmationComponentsMagicProvider;
-    constructor(componentList, engineMagicService, magicLazyModuleLoader, injector, compiler, overlayContainerMagicProvider, confirmationComponentsMagicProvider) {
+    constructor(componentList, engineMagicService, magicLazyModuleLoader, injector, overlayContainerMagicProvider, confirmationComponentsMagicProvider) {
         this.componentList = componentList;
         this.engineMagicService = engineMagicService;
         this.magicLazyModuleLoader = magicLazyModuleLoader;
         this.injector = injector;
-        this.compiler = compiler;
         this.overlayContainerMagicProvider = overlayContainerMagicProvider;
         this.confirmationComponentsMagicProvider = confirmationComponentsMagicProvider;
     }
@@ -1898,8 +1979,7 @@ class OverlayWindowService {
                 // extract name of module(XX) from 'MagicXXModule'
                 const moduleName = lazyLoadModule.moduleName.slice(Magic.length, -Module.length);
                 this.magicLazyModuleLoader.Load(moduleName).then(m => {
-                    const compiled = this.compiler.compileModuleAndAllComponentsSync(m[lazyLoadModule.moduleName]);
-                    moduleRef = compiled.ngModuleFactory.create(this.injector);
+                    moduleRef = createNgModule(m[lazyLoadModule.moduleName], this.injector);
                     this.open(formName, taskId, taskDescription);
                     this.finishConfirmation(Styles.MSGBOX_BUTTON_OK, true);
                 });
@@ -1986,7 +2066,8 @@ class OverlayWindowService {
         componentRef.instance.DetectChanges();
         return componentRef;
     }
-    /** @nocollapse */ static ɵfac = function OverlayWindowService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || OverlayWindowService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(i0.Compiler), i0.ɵɵinject(OverlayContainerMagicProvider), i0.ɵɵinject(ConfirmationComponentsMagicProvider)); };
+    /** @nocollapse */ static ɵfac = function OverlayWindowService_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || OverlayWindowService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(MagicLazyLoaderService), i0.ɵɵinject(i0.Injector), i0.ɵɵinject(OverlayContainerMagicProvider), i0.ɵɵinject(ConfirmationComponentsMagicProvider)); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: OverlayWindowService, factory: OverlayWindowService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(OverlayWindowService, [{
@@ -1994,7 +2075,7 @@ class OverlayWindowService {
         args: [{
                 providedIn: 'root'
             }]
-    }], () => [{ type: ComponentListMagicService }, { type: EngineMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: i0.Compiler }, { type: OverlayContainerMagicProvider }, { type: ConfirmationComponentsMagicProvider }], null); })();
+    }], () => [{ type: ComponentListMagicService }, { type: EngineMagicService }, { type: MagicLazyLoaderService }, { type: i0.Injector }, { type: OverlayContainerMagicProvider }, { type: ConfirmationComponentsMagicProvider }], null); })();
 class OverlayWindowFocusManager {
     rootMagicElement = null;
     openDialogList = new Array(0);
@@ -2981,12 +3062,13 @@ class TaskMagicService {
     }
     /**
      * Handle the Radio button "change" event
-     * @param  event The event received from the UI
      * @param idx Id of the control raising the event
+     * @param rowId Id of the row containing the control (defaults to '0' for non-table controls)
      */
-    mgOnRadioSelectionChanged(idx) {
-        let result = this.getFormControl('0', idx);
-        let guiEvent = getGuiEventObj('selectionchanged', idx, 0);
+    mgOnRadioSelectionChanged(idx, rowId = '0') {
+        // Fetch the Form Control for the specific table row (or row '0' for non-table child controls)
+        let result = this.getFormControl(rowId, idx);
+        let guiEvent = getGuiEventObj('selectionchanged', idx, +rowId);
         if (typeof result.value !== 'number')
             guiEvent.Value = result.value.index;
         else
@@ -3061,7 +3143,8 @@ class TaskMagicService {
             }
         }
     }
-    /** @nocollapse */ static ɵfac = function TaskMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TaskMagicService)(i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(OverlayWindowService)); };
+    /** @nocollapse */ static ɵfac = function TaskMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || TaskMagicService)(i0.ɵɵinject(EngineMagicService), i0.ɵɵinject(OverlayWindowService)); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TaskMagicService, factory: TaskMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TaskMagicService, [{
@@ -3193,7 +3276,8 @@ class TableMagicService {
             topIndex--;
         return topIndex;
     }
-    /** @nocollapse */ static ɵfac = function TableMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TableMagicService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(TaskMagicService)); };
+    /** @nocollapse */ static ɵfac = function TableMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || TableMagicService)(i0.ɵɵinject(ComponentListMagicService), i0.ɵɵinject(TaskMagicService)); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TableMagicService, factory: TableMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TableMagicService, [{
@@ -3219,7 +3303,8 @@ class TitleMagicService {
     setTitle(newTitle) {
         this.titleService.setTitle(newTitle);
     }
-    /** @nocollapse */ static ɵfac = function TitleMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TitleMagicService)(i0.ɵɵinject(i1$1.Title)); };
+    /** @nocollapse */ static ɵfac = function TitleMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || TitleMagicService)(i0.ɵɵinject(i1$1.Title)); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: TitleMagicService, factory: TitleMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TitleMagicService, [{
@@ -3320,7 +3405,8 @@ class MagicColorService {
         }
         return '';
     }
-    /** @nocollapse */ static ɵfac = function MagicColorService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicColorService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(COLOR_FILE_NAME)); };
+    /** @nocollapse */ static ɵfac = function MagicColorService_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || MagicColorService)(i0.ɵɵinject(i1$2.HttpClient), i0.ɵɵinject(COLOR_FILE_NAME)); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MagicColorService, factory: MagicColorService.ɵfac, providedIn: 'root' });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicColorService, [{
@@ -3960,7 +4046,8 @@ class AccessorMagicService {
     getColor(colorNumber, colorType) {
         return this.magicColor.getColor(colorNumber, colorType);
     }
-    /** @nocollapse */ static ɵfac = function AccessorMagicService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || AccessorMagicService)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(MagicColorService)); };
+    /** @nocollapse */ static ɵfac = function AccessorMagicService_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || AccessorMagicService)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(MagicColorService)); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: AccessorMagicService, factory: AccessorMagicService.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(AccessorMagicService, [{
@@ -3990,7 +4077,8 @@ class MagicServices {
         task.mgTitleService = titleService;
         task.mgAccessorService = mgAccessorService;
     }
-    /** @nocollapse */ static ɵfac = function MagicServices_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicServices)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(SubformMagicService), i0.ɵɵinject(TableMagicService), i0.ɵɵinject(TitleMagicService), i0.ɵɵinject(AccessorMagicService)); };
+    /** @nocollapse */ static ɵfac = function MagicServices_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || MagicServices)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(SubformMagicService), i0.ɵɵinject(TableMagicService), i0.ɵɵinject(TitleMagicService), i0.ɵɵinject(AccessorMagicService)); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MagicServices, factory: MagicServices.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicServices, [{
@@ -4146,8 +4234,9 @@ class TaskBaseMagicComponent {
     ngOnDestroy() {
         this.task.dispose();
     }
-    /** @nocollapse */ static ɵfac = function TaskBaseMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TaskBaseMagicComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MagicServices)); };
-    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TaskBaseMagicComponent, selectors: [["task-magic"]], inputs: { taskIdParam: "taskIdParam", taskDescription: "taskDescription" }, standalone: false, features: [i0.ɵɵProvidersFeature([TaskMagicService, SubformMagicService, TableMagicService])], decls: 0, vars: 0, template: function TaskBaseMagicComponent_Template(rf, ctx) { }, encapsulation: 2 });
+    /** @nocollapse */ static ɵfac = function TaskBaseMagicComponent_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || TaskBaseMagicComponent)(i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(MagicServices)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: TaskBaseMagicComponent, selectors: [["task-magic"]], inputs: { taskIdParam: "taskIdParam", taskDescription: "taskDescription" }, standalone: false, features: [i0.ɵɵProvidersFeature([TaskMagicService, SubformMagicService, TableMagicService])], decls: 0, vars: 0, template: function TaskBaseMagicComponent_Template(rf, ctx) { }, encapsulation: 2, changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TaskBaseMagicComponent, [{
         type: Component,
@@ -4155,6 +4244,7 @@ class TaskBaseMagicComponent {
                 selector: 'task-magic',
                 providers: [TaskMagicService, SubformMagicService, TableMagicService],
                 template: '',
+                changeDetection: ChangeDetectionStrategy.Eager,
                 standalone: false
             }]
     }], () => [{ type: i0.ChangeDetectorRef }, { type: MagicServices }], { taskIdParam: [{
@@ -4162,7 +4252,7 @@ class TaskBaseMagicComponent {
         }], taskDescription: [{
             type: Input
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TaskBaseMagicComponent, { className: "TaskBaseMagicComponent", filePath: "src/ui/task-base.magic.component.ts", lineNumber: 21 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(TaskBaseMagicComponent, { className: "TaskBaseMagicComponent", filePath: "src/ui/task-base.magic.component.ts", lineNumber: 22 }); })();
 
 /**
  * @ignore
@@ -4222,7 +4312,8 @@ class RowMagicDirective {
                 event.cancelBubble = true;
         }
     }
-    /** @nocollapse */ static ɵfac = function RowMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RowMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
+    /** @nocollapse */ static ɵfac = function RowMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || RowMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: RowMagicDirective, selectors: [["", "magicRow", ""]], hostBindings: function RowMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("click", function RowMagicDirective_click_HostBindingHandler($event) { return ctx.onClick($event); });
         } }, inputs: { rowId: [0, "magicRow", "rowId"] }, standalone: false });
@@ -4539,7 +4630,8 @@ class MagicDirective {
     ngOnDestroy() {
         this.subscribeRefreshDom.unsubscribe();
     }
-    /** @nocollapse */ static ɵfac = function MagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$2.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
+    /** @nocollapse */ static ɵfac = function MagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || MagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$2.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MagicDirective, selectors: [["", "magic", ""]], inputs: { magic: "magic", eventsOnly: "eventsOnly", pollTime: "pollTime", rowId: "rowId" }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicDirective, [{
@@ -4737,7 +4829,8 @@ class NoControlMagicDirective extends MagicDirective {
                 break;
         }
     }
-    /** @nocollapse */ static ɵfac = function NoControlMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NoControlMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$2.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
+    /** @nocollapse */ static ɵfac = function NoControlMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || NoControlMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(i2$2.Platform), i0.ɵɵdirectiveInject(RowMagicDirective, 8)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: NoControlMagicDirective, selectors: [["", "magicnc", ""]], inputs: { magic: [0, "magicnc", "magic"] }, standalone: false, features: [i0.ɵɵInheritDefinitionFeature] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NoControlMagicDirective, [{
@@ -4787,7 +4880,8 @@ class DateMagicPipe extends DatePipe {
             value = "";
         return value;
     }
-    /** @nocollapse */ static ɵfac = function DateMagicPipe_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DateMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
+    /** @nocollapse */ static ɵfac = function DateMagicPipe_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || DateMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
     /** @nocollapse */ static ɵpipe = /** @pureOrBreakMyCode */ i0.ɵɵdefinePipe({ name: "magicDate", type: DateMagicPipe, pure: true, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DateMagicPipe, [{
@@ -5467,7 +5561,8 @@ class MgformatMagicDirective {
                 return true;
         return false;
     }
-    /** @nocollapse */ static ɵfac = function MgformatMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MgformatMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
+    /** @nocollapse */ static ɵfac = function MgformatMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || MgformatMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: MgformatMagicDirective, selectors: [["", "mgFormat", ""]], hostBindings: function MgformatMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("focus", function MgformatMagicDirective_focus_HostBindingHandler($event) { return ctx.onFocusEvent($event); })("paste", function MgformatMagicDirective_paste_HostBindingHandler($event) { return ctx.onPaste($event); })("input", function MgformatMagicDirective_input_HostBindingHandler($event) { return ctx.onInputEvent($event); })("change", function MgformatMagicDirective_change_HostBindingHandler($event) { return ctx.onChangeEvent($event); })("blur", function MgformatMagicDirective_blur_HostBindingHandler($event) { return ctx.onBlurEvent($event); });
         } }, standalone: false });
@@ -5533,7 +5628,8 @@ class TimeMagicPipe extends DatePipe {
         }
         return value;
     }
-    /** @nocollapse */ static ɵfac = function TimeMagicPipe_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || TimeMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
+    /** @nocollapse */ static ɵfac = function TimeMagicPipe_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || TimeMagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
     /** @nocollapse */ static ɵpipe = /** @pureOrBreakMyCode */ i0.ɵɵdefinePipe({ name: "magicTime", type: TimeMagicPipe, pure: true, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimeMagicPipe, [{
@@ -5592,7 +5688,8 @@ class RangeValidatorMagicDirective {
         const formGroup = c.parent.controls;
         return Object.keys(formGroup).find(name => c === formGroup[name]) || null;
     }
-    /** @nocollapse */ static ɵfac = function RangeValidatorMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || RangeValidatorMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    /** @nocollapse */ static ɵfac = function RangeValidatorMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || RangeValidatorMagicDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: RangeValidatorMagicDirective, selectors: [["", "rangevalidator", ""]], standalone: false, features: [i0.ɵɵProvidersFeature([
                 {
                     provide: NG_VALIDATORS,
@@ -5616,8 +5713,8 @@ class RangeValidatorMagicDirective {
             }]
     }], () => [{ type: TaskMagicService }, { type: i0.ViewContainerRef }], null); })();
 
-function SubformMagicComponent_ndc_dynamic_0_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ndc-dynamic", 1);
+function SubformMagicComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ndc-dynamic", 0);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ndcDynamicComponent", ctx_r0.Component)("ndcDynamicInputs", ctx_r0.Parameters);
@@ -5662,35 +5759,38 @@ class SubformMagicComponent {
     get Parameters() {
         return this.mgSub.mgGetParameters(this.id);
     }
-    /** @nocollapse */ static ɵfac = function SubformMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SubformMagicComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(SubformMagicService)); };
-    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: SubformMagicComponent, selectors: [["magic-subform"]], inputs: { magic: "magic" }, standalone: false, decls: 1, vars: 1, consts: [[3, "ndcDynamicComponent", "ndcDynamicInputs", 4, "ngIf"], [3, "ndcDynamicComponent", "ndcDynamicInputs"]], template: function SubformMagicComponent_Template(rf, ctx) { if (rf & 1) {
-            i0.ɵɵtemplate(0, SubformMagicComponent_ndc_dynamic_0_Template, 1, 2, "ndc-dynamic", 0);
+    /** @nocollapse */ static ɵfac = function SubformMagicComponent_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || SubformMagicComponent)(i0.ɵɵdirectiveInject(i0.ViewContainerRef), i0.ɵɵdirectiveInject(SubformMagicService)); };
+    /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: SubformMagicComponent, selectors: [["magic-subform"]], inputs: { magic: "magic" }, standalone: false, decls: 1, vars: 1, consts: [[3, "ndcDynamicComponent", "ndcDynamicInputs"]], template: function SubformMagicComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵconditionalCreate(0, SubformMagicComponent_Conditional_0_Template, 1, 2, "ndc-dynamic", 0);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.Component);
-        } }, dependencies: [i1.NgIf, i3.DynamicIoDirective, i3.DynamicComponent], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.Component ? 0 : -1);
+        } }, dependencies: [i2$3.DynamicIoDirective, i2$3.DynamicComponent], encapsulation: 2, changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubformMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'magic-subform',
-                template: `
-    <ndc-dynamic
-      *ngIf="Component"  
-      [ndcDynamicComponent]="Component" 
-      [ndcDynamicInputs]="Parameters">
-    </ndc-dynamic>
-`,
+                template: `
+    @if (Component) {
+      <ndc-dynamic
+        [ndcDynamicComponent]="Component"
+        [ndcDynamicInputs]="Parameters">
+      </ndc-dynamic>
+    }
+    `,
+                changeDetection: ChangeDetectionStrategy.Eager,
                 standalone: false
             }]
     }], () => [{ type: i0.ViewContainerRef }, { type: SubformMagicService }], { magic: [{
             type: Input,
             args: ['magic']
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubformMagicComponent, { className: "SubformMagicComponent", filePath: "src/ui/subform.magic.component.ts", lineNumber: 22 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(SubformMagicComponent, { className: "SubformMagicComponent", filePath: "src/ui/subform.magic.component.ts", lineNumber: 24 }); })();
 
 const _c0$1 = ["customContent"];
 const _c1 = ["*"];
-function ErrorMagicComponent_div_0_span_4_Template(rf, ctx) { if (rf & 1) {
+function ErrorMagicComponent_Conditional_0_Conditional_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "span");
     i0.ɵɵtext(1);
     i0.ɵɵelementEnd();
@@ -5699,16 +5799,16 @@ function ErrorMagicComponent_div_0_span_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵtextInterpolate1(" ", ctx_r0.mgService.getErrMsg(ctx_r0.id, ctx_r0.rowId), " ");
 } }
-function ErrorMagicComponent_div_0_Template(rf, ctx) { if (rf & 1) {
+function ErrorMagicComponent_Conditional_0_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div")(1, "div", null, 0);
     i0.ɵɵprojection(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵtemplate(4, ErrorMagicComponent_div_0_span_4_Template, 2, 1, "span", 1);
+    i0.ɵɵconditionalCreate(4, ErrorMagicComponent_Conditional_0_Conditional_4_Template, 2, 1, "span");
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵadvance(4);
-    i0.ɵɵproperty("ngIf", ctx_r0.defaultDisplay);
+    i0.ɵɵconditional(ctx_r0.defaultDisplay ? 4 : -1);
 } }
 /**
  * Represents a Magic subform
@@ -5786,32 +5886,38 @@ class ErrorMagicComponent {
         }
         return false;
     }
-    /** @nocollapse */ static ɵfac = function ErrorMagicComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ErrorMagicComponent)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(AccessorMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
+    /** @nocollapse */ static ɵfac = function ErrorMagicComponent_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || ErrorMagicComponent)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(AccessorMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef)); };
     /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: ErrorMagicComponent, selectors: [["mgError"]], viewQuery: function ErrorMagicComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0$1, 5);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.CustomContent = _t.first);
-        } }, inputs: { magic: "magic", rowId1: [0, "rowId", "rowId1"] }, standalone: false, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["customContent", ""], [4, "ngIf"]], template: function ErrorMagicComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { magic: "magic", rowId1: [0, "rowId", "rowId1"] }, standalone: false, ngContentSelectors: _c1, decls: 1, vars: 1, consts: [["customContent", ""]], template: function ErrorMagicComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵprojectionDef();
-            i0.ɵɵtemplate(0, ErrorMagicComponent_div_0_Template, 5, 1, "div", 1);
+            i0.ɵɵconditionalCreate(0, ErrorMagicComponent_Conditional_0_Template, 5, 1, "div");
         } if (rf & 2) {
-            i0.ɵɵproperty("ngIf", ctx.HasErrors(ctx.id));
-        } }, dependencies: [i1.NgIf], encapsulation: 2 });
+            i0.ɵɵconditional(ctx.HasErrors(ctx.id) ? 0 : -1);
+        } }, encapsulation: 2, changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ErrorMagicComponent, [{
         type: Component,
         args: [{
                 selector: 'mgError',
-                template: `<div *ngIf="HasErrors(id)">
-    <div #customContent>
-      <ng-content></ng-content>
-    </div>
-     <span *ngIf="defaultDisplay">
-      {{mgService.getErrMsg(id, rowId)}} 
-    </span>
-    </div>
+                template: `@if (HasErrors(id)) {
+  <div>
+    <div #customContent>
+      <ng-content></ng-content>
+    </div>
+    @if (defaultDisplay) {
+      <span>
+        {{mgService.getErrMsg(id, rowId)}}
+      </span>
+    }
+  </div>
+}
 `,
+                changeDetection: ChangeDetectionStrategy.Eager,
                 standalone: false
             }]
     }], () => [{ type: TaskMagicService }, { type: AccessorMagicService }, { type: i0.ChangeDetectorRef }], { magic: [{
@@ -5824,7 +5930,7 @@ class ErrorMagicComponent {
             type: ViewChild,
             args: ['customContent', { static: false }]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ErrorMagicComponent, { className: "ErrorMagicComponent", filePath: "src/ui/mgerror.magic.component.ts", lineNumber: 24 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(ErrorMagicComponent, { className: "ErrorMagicComponent", filePath: "src/ui/mgerror.magic.component.ts", lineNumber: 29 }); })();
 
 /**
  * Directive for checkboxes, to handle the 'change' event
@@ -5911,7 +6017,8 @@ class CheckboxMagicDirective {
         if (this.subscribeRefreshDom !== null)
             this.subscribeRefreshDom.unsubscribe();
     }
-    /** @nocollapse */ static ɵfac = function CheckboxMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(TaskMagicService)); };
+    /** @nocollapse */ static ɵfac = function CheckboxMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || CheckboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(TaskMagicService)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: CheckboxMagicDirective, selectors: [["input", "type", "checkbox", "magic", "", 3, "noFormControl", ""]], hostBindings: function CheckboxMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("change", function CheckboxMagicDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
         } }, inputs: { threeState: "threeState" }, standalone: false });
@@ -5959,7 +6066,8 @@ class ComboboxMagicDirective {
     onComboboxItemsListChanged() {
         this.magicDirective.task.refreshView();
     }
-    /** @nocollapse */ static ɵfac = function ComboboxMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || ComboboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+    /** @nocollapse */ static ɵfac = function ComboboxMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || ComboboxMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: ComboboxMagicDirective, selectors: [["select", "magic", "", 3, "multiple", ""]], hostBindings: function ComboboxMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("change", function ComboboxMagicDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
         } }, standalone: false });
@@ -5993,15 +6101,15 @@ class ExitMagicService {
     }], null, null); })();
 
 const _c0 = ["magicRoot"];
-function MagicShellComponent_ndc_dynamic_2_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "ndc-dynamic", 6);
+function MagicShellComponent_Conditional_2_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "ndc-dynamic", 3);
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
     i0.ɵɵproperty("ndcDynamicComponent", ctx_r0.RootComponent)("ndcDynamicInputs", ctx_r0.RootComponentParameters);
 } }
-function MagicShellComponent_div_5_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelementStart(0, "div", 7);
-    i0.ɵɵelementContainer(1, 8);
+function MagicShellComponent_Conditional_5_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 5);
+    i0.ɵɵelementContainer(1, 6);
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r0 = i0.ɵɵnextContext();
@@ -6010,7 +6118,7 @@ function MagicShellComponent_div_5_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵproperty("ngTemplateOutlet", ctx_r0.SpinnerTemplate ? ctx_r0.SpinnerTemplate : defaultSpinner_r2);
 } }
 function MagicShellComponent_ng_template_6_Template(rf, ctx) { if (rf & 1) {
-    i0.ɵɵelement(0, "div", 9);
+    i0.ɵɵelement(0, "div", 7);
 } }
 /**
  * Root Magic component
@@ -6198,53 +6306,58 @@ class MagicShellComponent {
                 break;
         }
     }
-    /** @nocollapse */ static ɵfac = function MagicShellComponent_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicShellComponent)(i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.Title), i0.ɵɵdirectiveInject(OverlayWindowService), i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(ExitMagicService, 8)); };
+    /** @nocollapse */ static ɵfac = function MagicShellComponent_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || MagicShellComponent)(i0.ɵɵdirectiveInject(EngineMagicService), i0.ɵɵdirectiveInject(ComponentListMagicService), i0.ɵɵdirectiveInject(i0.ChangeDetectorRef), i0.ɵɵdirectiveInject(i1$1.Title), i0.ɵɵdirectiveInject(OverlayWindowService), i0.ɵɵdirectiveInject(i1$2.HttpClient), i0.ɵɵdirectiveInject(CommandsCollectorMagicService), i0.ɵɵdirectiveInject(i2.ActivatedRoute), i0.ɵɵdirectiveInject(i2.Router), i0.ɵɵdirectiveInject(ExitMagicService, 8)); };
     /** @nocollapse */ static ɵcmp = /** @pureOrBreakMyCode */ i0.ɵɵdefineComponent({ type: MagicShellComponent, selectors: [["magic-root"]], viewQuery: function MagicShellComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(_c0, 7);
         } if (rf & 2) {
             let _t;
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.rootMagicElementRef = _t.first);
         } }, hostBindings: function MagicShellComponent_HostBindings(rf, ctx) { if (rf & 1) {
-            i0.ɵɵlistener("beforeunload", function MagicShellComponent_beforeunload_HostBindingHandler($event) { return ctx.onBeforeUnload($event); }, false, i0.ɵɵresolveWindow)("unload", function MagicShellComponent_unload_HostBindingHandler($event) { return ctx.onUnload($event); }, false, i0.ɵɵresolveWindow);
+            i0.ɵɵlistener("beforeunload", function MagicShellComponent_beforeunload_HostBindingHandler($event) { return ctx.onBeforeUnload($event); }, i0.ɵɵresolveWindow)("unload", function MagicShellComponent_unload_HostBindingHandler($event) { return ctx.onUnload($event); }, i0.ɵɵresolveWindow);
         } }, inputs: { SpinnerTemplate: "SpinnerTemplate" }, standalone: false, features: [i0.ɵɵProvidersFeature([
             // ExitMagicService
-            ])], decls: 8, vars: 2, consts: [["magicRoot", ""], ["overlayWindowsContainer", ""], ["defaultSpinner", ""], [3, "ndcDynamicComponent", "ndcDynamicInputs", 4, "ngIf"], ["magicViewContainerRef", ""], ["class", "spinner-background", 4, "ngIf"], [3, "ndcDynamicComponent", "ndcDynamicInputs"], [1, "spinner-background"], [3, "ngTemplateOutlet"], [1, "mgSpinnerClass"]], template: function MagicShellComponent_Template(rf, ctx) { if (rf & 1) {
+            ])], decls: 8, vars: 2, consts: [["magicRoot", ""], ["overlayWindowsContainer", ""], ["defaultSpinner", ""], [3, "ndcDynamicComponent", "ndcDynamicInputs"], ["magicViewContainerRef", ""], [1, "spinner-background"], [3, "ngTemplateOutlet"], [1, "mgSpinnerClass"]], template: function MagicShellComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", null, 0);
-            i0.ɵɵtemplate(2, MagicShellComponent_ndc_dynamic_2_Template, 1, 2, "ndc-dynamic", 3);
+            i0.ɵɵconditionalCreate(2, MagicShellComponent_Conditional_2_Template, 1, 2, "ndc-dynamic", 3);
             i0.ɵɵelement(3, "div", 4, 1);
             i0.ɵɵelementEnd();
-            i0.ɵɵtemplate(5, MagicShellComponent_div_5_Template, 2, 1, "div", 5)(6, MagicShellComponent_ng_template_6_Template, 1, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
+            i0.ɵɵconditionalCreate(5, MagicShellComponent_Conditional_5_Template, 2, 1, "div", 5);
+            i0.ɵɵtemplate(6, MagicShellComponent_ng_template_6_Template, 1, 0, "ng-template", null, 2, i0.ɵɵtemplateRefExtractor);
         } if (rf & 2) {
             i0.ɵɵadvance(2);
-            i0.ɵɵproperty("ngIf", ctx.RootComponent !== null);
+            i0.ɵɵconditional(ctx.RootComponent !== null ? 2 : -1);
             i0.ɵɵadvance(3);
-            i0.ɵɵproperty("ngIf", ctx.showSpinner);
-        } }, dependencies: [i1.NgIf, i1.NgTemplateOutlet, i3.DynamicIoDirective, i3.DynamicComponent, MagicViewContainerRef], styles: [".mgSpinnerClass[_ngcontent-%COMP%]{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:_ngcontent-%COMP%_spin 2s linear infinite}.spinner-background[_ngcontent-%COMP%]{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"] });
+            i0.ɵɵconditional(ctx.showSpinner ? 5 : -1);
+        } }, dependencies: [i1.NgTemplateOutlet, i2$3.DynamicIoDirective, i2$3.DynamicComponent, MagicViewContainerRef], styles: [".mgSpinnerClass[_ngcontent-%COMP%]{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:_ngcontent-%COMP%_spin 2s linear infinite}.spinner-background[_ngcontent-%COMP%]{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes _ngcontent-%COMP%_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}"], changeDetection: 1 });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicShellComponent, [{
         type: Component,
         args: [{ selector: 'magic-root', providers: [
                 // ExitMagicService
-                ], template: `
-    <div #magicRoot>
-      <ndc-dynamic
-        *ngIf = "RootComponent !== null"
-        [ndcDynamicComponent]="RootComponent"
-        [ndcDynamicInputs]   ="RootComponentParameters">
-      </ndc-dynamic>
-
-      <div #overlayWindowsContainer magicViewContainerRef>
-      </div>
-    </div>
-
-    <div class="spinner-background" *ngIf="showSpinner">
-      <ng-container [ngTemplateOutlet]="SpinnerTemplate ? SpinnerTemplate:defaultSpinner"></ng-container>
-    </div>
-
-    <ng-template #defaultSpinner>
-      <div class="mgSpinnerClass"></div>
-    </ng-template>
-  `, standalone: false, styles: [".mgSpinnerClass{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:spin 2s linear infinite}.spinner-background{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
+                ], template: `
+    <div #magicRoot>
+      @if (RootComponent !== null) {
+        <ndc-dynamic
+          [ndcDynamicComponent]="RootComponent"
+          [ndcDynamicInputs]   ="RootComponentParameters">
+        </ndc-dynamic>
+      }
+    
+      <div #overlayWindowsContainer magicViewContainerRef>
+      </div>
+    </div>
+    
+    @if (showSpinner) {
+      <div class="spinner-background">
+        <ng-container [ngTemplateOutlet]="SpinnerTemplate ? SpinnerTemplate:defaultSpinner"></ng-container>
+      </div>
+    }
+    
+    <ng-template #defaultSpinner>
+      <div class="mgSpinnerClass"></div>
+    </ng-template>
+    `, changeDetection: ChangeDetectionStrategy.Eager, standalone: false, styles: [".mgSpinnerClass{border:10px solid #cccccc;border-top:10px solid black;border-radius:50%;position:fixed;margin:auto;inset:0;width:100px;height:100px;animation:spin 2s linear infinite}.spinner-background{position:fixed;z-index:1000;inset:0;opacity:.5}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}\n"] }]
     }], () => [{ type: EngineMagicService }, { type: ComponentListMagicService }, { type: i0.ChangeDetectorRef }, { type: i1$1.Title }, { type: OverlayWindowService }, { type: i1$2.HttpClient }, { type: CommandsCollectorMagicService }, { type: i2.ActivatedRoute }, { type: i2.Router }, { type: ExitMagicService, decorators: [{
                 type: Optional
             }] }], { rootMagicElementRef: [{
@@ -6259,7 +6372,7 @@ class MagicShellComponent {
             type: HostListener,
             args: ['window:unload', ['$event']]
         }] }); })();
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicShellComponent, { className: "MagicShellComponent", filePath: "src/ui/magic-root.component.ts", lineNumber: 86 }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(MagicShellComponent, { className: "MagicShellComponent", filePath: "src/ui/magic-root.component.ts", lineNumber: 92 }); })();
 
 /**
  * @ignore
@@ -6286,7 +6399,7 @@ class MagicCheckboxControlValueAccessor extends CheckboxControlValueAccessor {
       input[type=checkbox][magic]:not([formControl]),
       input[type=checkbox][magic]:not([ngModel])
     `,
-                host: { '(change)': 'onChange($event.target.checked)', '(blur)': 'onTouched()' },
+                host: { '(change)': 'onChange($any($event.target).checked)', '(blur)': 'onTouched()' },
                 providers: [CHECKBOX_VALUE_ACCESSOR],
                 standalone: false
             }]
@@ -6317,10 +6430,10 @@ class MagicDefaultValueAccessor extends DefaultValueAccessor {
     textarea[magic]:not([formControlName]):not([noFormControl]):not([no-form-control])
   `,
                 host: {
-                    '(input)': '$any(this)._handleInput($event.target.value)',
+                    '(input)': '$any(this)._handleInput($any($event.target).value)',
                     '(blur)': 'onTouched()',
                     '(compositionstart)': '$any(this)._compositionStart()',
-                    '(compositionend)': '$any(this)._compositionEnd($event.target.value)'
+                    '(compositionend)': '$any(this)._compositionEnd($any($event.target).value)'
                 },
                 providers: [MAGIC_DEFAULT_VALUE_ACCESSOR],
                 exportAs: 'magic',
@@ -6342,7 +6455,8 @@ class CheckboxNoFormControlMagicDirective {
     onChange($event) {
         this.magicDirective.task.onCheckChanged($event, this.magicDirective.id, +this.magicDirective.rowId);
     }
-    /** @nocollapse */ static ɵfac = function CheckboxNoFormControlMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || CheckboxNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+    /** @nocollapse */ static ɵfac = function CheckboxNoFormControlMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || CheckboxNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: CheckboxNoFormControlMagicDirective, selectors: [["input", "type", "checkbox", "magic", "", "noFormControl", ""]], hostBindings: function CheckboxNoFormControlMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("change", function CheckboxNoFormControlMagicDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
         } }, standalone: false });
@@ -6374,7 +6488,8 @@ class InputNoFormControlMagicDirective {
     onChange($event) {
         this.magicDirective.task.setInputTextValue(this.magicDirective.id, this.magicDirective.rowId, event.srcElement.value);
     }
-    /** @nocollapse */ static ɵfac = function InputNoFormControlMagicDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || InputNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
+    /** @nocollapse */ static ɵfac = function InputNoFormControlMagicDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || InputNoFormControlMagicDirective)(i0.ɵɵdirectiveInject(MagicDirective)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: InputNoFormControlMagicDirective, selectors: [["input", "magic", "", "noFormControl", "", 3, "type", "checkbox"], ["textarea", "magic", "", "noFormControl", "", 3, "type", "checkbox"]], hostBindings: function InputNoFormControlMagicDirective_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("change", function InputNoFormControlMagicDirective_change_HostBindingHandler($event) { return ctx.onChange($event); });
         } }, standalone: false });
@@ -6459,7 +6574,8 @@ class DateValueAccessor {
     setDisabledState(isDisabled) {
         this.renderer.setProperty(this.elementRef.nativeElement, "disabled", isDisabled);
     }
-    /** @nocollapse */ static ɵfac = function DateValueAccessor_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || DateValueAccessor)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
+    /** @nocollapse */ static ɵfac = function DateValueAccessor_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || DateValueAccessor)(i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(MagicDirective), i0.ɵɵdirectiveInject(TaskMagicService)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: DateValueAccessor, selectors: [["", "dateInput", ""]], hostBindings: function DateValueAccessor_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("input", function DateValueAccessor_input_HostBindingHandler($event) { return ctx.onChange($event.target.valueAsDate); })("blur", function DateValueAccessor_blur_HostBindingHandler($event) { return ctx.onBlurEvent($event); });
         } }, standalone: false, features: [i0.ɵɵProvidersFeature([DATE_VALUE_ACCESSOR])] });
@@ -6564,7 +6680,8 @@ class NonMagicControlDirective {
     ngOnInit() {
         this.regEvents();
     }
-    /** @nocollapse */ static ɵfac = function NonMagicControlDirective_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || NonMagicControlDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
+    /** @nocollapse */ static ɵfac = function NonMagicControlDirective_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || NonMagicControlDirective)(i0.ɵɵdirectiveInject(TaskMagicService), i0.ɵɵdirectiveInject(i0.ElementRef), i0.ɵɵdirectiveInject(i0.Renderer2), i0.ɵɵdirectiveInject(i0.ViewContainerRef)); };
     /** @nocollapse */ static ɵdir = /** @pureOrBreakMyCode */ i0.ɵɵdefineDirective({ type: NonMagicControlDirective, selectors: [["", "NonMagicControl", ""]], inputs: { magic: [0, "NonMagicControl", "magic"] }, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(NonMagicControlDirective, [{
@@ -6599,7 +6716,8 @@ class Time24MagicPipe {
         }
         return value;
     }
-    /** @nocollapse */ static ɵfac = function Time24MagicPipe_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || Time24MagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
+    /** @nocollapse */ static ɵfac = function Time24MagicPipe_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || Time24MagicPipe)(i0.ɵɵdirectiveInject(TaskMagicService, 16)); };
     /** @nocollapse */ static ɵpipe = /** @pureOrBreakMyCode */ i0.ɵɵdefinePipe({ name: "magicTime24", type: Time24MagicPipe, pure: true, standalone: false });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(Time24MagicPipe, [{
@@ -6650,27 +6768,28 @@ const decs = [
 class MagicModule {
     /** @nocollapse */ static ɵfac = function MagicModule_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MagicModule)(); };
     /** @nocollapse */ static ɵmod = /** @pureOrBreakMyCode */ i0.ɵɵdefineNgModule({ type: MagicModule });
-    /** @nocollapse */ static ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider, provideHttpClient(withInterceptorsFromDi())], imports: [CommonModule,
+    /** @nocollapse */ static ɵinj = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjector({ providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider, provideHttpClient(withXhr(), withInterceptorsFromDi())], imports: [CommonModule,
             FormsModule,
             ReactiveFormsModule,
             RouterModule,
             DynamicModule,
-            DragDropModule, MaskitoModule] });
+            DragDropModule] });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MagicModule, [{
         type: NgModule,
         args: [{
                 declarations: [...decs],
-                exports: [...decs, MaskitoModule],
+                exports: [...decs, MaskitoDirective],
                 imports: [CommonModule,
                     FormsModule,
                     ReactiveFormsModule,
                     RouterModule,
                     DynamicModule,
+                    MaskitoDirective,
                     CdkDragHandle,
                     CdkDrag,
                     DragDropModule],
-                providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider, provideHttpClient(withInterceptorsFromDi())]
+                providers: [ConfirmationComponentsMagicProvider, OverlayContainerMagicProvider, provideHttpClient(withXhr(), withInterceptorsFromDi())]
             }]
     }], null, null); })();
 (function () { (typeof ngJitMode === "undefined" || ngJitMode) && i0.ɵɵsetNgModuleScope(MagicModule, { declarations: [MagicDirective,
@@ -6706,6 +6825,7 @@ class MagicModule {
         ReactiveFormsModule,
         RouterModule,
         DynamicModule,
+        MaskitoDirective,
         CdkDragHandle,
         CdkDrag,
         DragDropModule], exports: [MagicDirective,
@@ -6736,7 +6856,7 @@ class MagicModule {
         NonMagicControlDirective,
         MagicFocusDirective,
         MagicViewContainerRef,
-        Time24MagicPipe, MaskitoModule] }); })();
+        Time24MagicPipe, MaskitoDirective] }); })();
 
 const MG_FORMATS = {
     parse: { dateInput: { month: 'short', year: 'numeric', day: 'numeric' } },
@@ -6752,7 +6872,7 @@ class MgDateAdapter extends NativeDateAdapter {
     localeId;
     mgdtfmt = null;
     constructor(task, localeId) {
-        super(localeId);
+        super();
         this.task = task;
         this.localeId = localeId;
         this.setLocale(localeId);
@@ -6830,7 +6950,8 @@ class MgDateAdapter extends NativeDateAdapter {
             return date.toDateString();
         }
     }
-    /** @nocollapse */ static ɵfac = function MgDateAdapter_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || MgDateAdapter)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(MAT_DATE_LOCALE)); };
+    /** @nocollapse */ static ɵfac = function MgDateAdapter_Factory(__ngFactoryType__) { /* @ts-ignore */
+    return new (__ngFactoryType__ || MgDateAdapter)(i0.ɵɵinject(TaskMagicService), i0.ɵɵinject(MAT_DATE_LOCALE)); };
     /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: MgDateAdapter, factory: MgDateAdapter.ɵfac });
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MgDateAdapter, [{
@@ -6860,6 +6981,109 @@ const magicProviders = [
     TableMagicService
 ];
 
+class SubscriberService {
+    static instance;
+    socket;
+    constructor() {
+        // Connect to the Socket.IO server with subscriber role
+        this.socket = io('http://localhost:3000', {
+            query: {
+                role: 'subscriber',
+                token: 'abc123' // Default token for testing; replace with actual authentication
+            }
+        });
+        // Handle connection
+        this.socket.on('connect', () => {
+            console.log('Connected to server as subscriber:', this.socket.id);
+        });
+        // Handle disconnection
+        this.socket.on('disconnect', () => {
+            console.log('Disconnected from server');
+        });
+        // Handle subscription confirmation
+        this.socket.on('subscribed', (data) => {
+            console.log('Subscribed to topic:', data.topic, data.message);
+        });
+        // Handle unsubscription confirmation
+        this.socket.on('unsubscribed', (data) => {
+            console.log('Unsubscribed from topic:', data.topic, data.message);
+        });
+        // Handle errors
+        this.socket.on('error', (error) => {
+            console.error('Socket error:', error.message);
+        });
+        this.socket.on('message', (error) => {
+            console.error('Message from xpa:', error.message);
+        });
+    }
+    /**
+     * Subscribe to a specific topic
+     * @param topic The topic to subscribe to
+     */
+    subscribe(topic) {
+        this.socket.emit('subscribe', topic);
+    }
+    /**
+     * Unsubscribe from a specific topic
+     * @param topic The topic to unsubscribe from
+     */
+    unsubscribe(topic) {
+        this.socket.emit('unsubscribe', topic);
+    }
+    /**
+     * Get an Observable for incoming messages
+     * @returns Observable that emits message data
+     */
+    onMessage() {
+        return new Observable(observer => {
+            this.socket.on('message', (data) => {
+                observer.next(data);
+            });
+        });
+    }
+    /**
+     * Get current subscriptions (for debugging)
+     */
+    getSubscriptions() {
+        this.socket.emit('getSubscriptions');
+    }
+    /**
+     * Listen for subscriptions data
+     * @returns Observable that emits subscriptions list
+     */
+    onSubscriptionsData() {
+        return new Observable(observer => {
+            this.socket.on('subscriptionsData', (data) => {
+                observer.next(data);
+            });
+        });
+    }
+    /**
+     * Get the singleton instance of SubscriberService
+     * @returns {SubscriberService} The singleton instance
+     */
+    static getInstance() {
+        if (!SubscriberService.instance) {
+            SubscriberService.instance = new SubscriberService();
+        }
+        return SubscriberService.instance;
+    }
+    /**
+     * Disconnect from the server
+     */
+    disconnect() {
+        this.socket.disconnect();
+    }
+    /** @nocollapse */ static ɵfac = function SubscriberService_Factory(__ngFactoryType__) { return new (__ngFactoryType__ || SubscriberService)(); };
+    /** @nocollapse */ static ɵprov = /** @pureOrBreakMyCode */ i0.ɵɵdefineInjectable({ token: SubscriberService, factory: SubscriberService.ɵfac, providedIn: 'root' });
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SubscriberService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root'
+            }]
+    }], () => [], null); })();
+
 /**
  * @ignore
  */
@@ -6945,5 +7169,5 @@ class ModalFormDefinition {
  * Generated bundle index. Do not edit.
  */
 
-export { AccessorMagicService, BaseMagicAlertComponent, BaseMagicConfirmComponent, BaseMagicOverlayContainer, CHECKBOX_VALUE_ACCESSOR, COLOR_FILE_NAME, CheckboxMagicDirective, CheckboxNoFormControlMagicDirective, ComboboxMagicDirective, CommandsCollectorMagicService, ComponentListMagicService, ConfirmationComponentsMagicProvider, Constants, ControlMetadata, ControlsMetadata, DATE_VALUE_ACCESSOR, DateMagicPipe, DateValueAccessor, EngineMagicService, ErrorMagicComponent, ExitMagicService, GuiInteractiveExecutor, HtmlClasses, InputNoFormControlMagicDirective, MAGIC_BG_COLOR, MAGIC_DEFAULT_VALUE_ACCESSOR, MAGIC_FG_COLOR, MG_FORMATS, MagicAlertComponent, MagicCheckboxControlValueAccessor, MagicColorService, MagicConfirmationBoxComponent, MagicDefaultValueAccessor, MagicDirective, MagicFocusDirective, MagicLazyLoaderService, MagicModule, MagicOverlayContainer, MagicOverlayContainerWrapper, MagicServices, MagicShellComponent, MagicViewContainerRef, MgDateAdapter, MgDateFormatter, MgformatMagicDirective, ModalFormDefinition, NoControlMagicDirective, NonMagicControlDirective, OverlayContainerMagicProvider, OverlayWindowService, RangeValidatorMagicDirective, Records, RouteCommand, RouterCommandsMagicService, RouterContainerMagicComponent, RowMagicDirective, StylesMapManager, SubformMagicComponent, SubformMagicService, TableMagicService, TaskBaseMagicComponent, TaskMagicService, Time24MagicPipe, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
+export { AccessorMagicService, BaseMagicAlertComponent, BaseMagicConfirmComponent, BaseMagicOverlayContainer, CHECKBOX_VALUE_ACCESSOR, COLOR_FILE_NAME, CheckboxMagicDirective, CheckboxNoFormControlMagicDirective, ComboboxMagicDirective, CommandsCollectorMagicService, ComponentListMagicService, ConfirmationComponentsMagicProvider, Constants, ControlMetadata, ControlsMetadata, DATE_VALUE_ACCESSOR, DateMagicPipe, DateValueAccessor, EngineMagicService, ErrorMagicComponent, ExitMagicService, GuiInteractiveExecutor, HtmlClasses, InputNoFormControlMagicDirective, MAGIC_BG_COLOR, MAGIC_DEFAULT_VALUE_ACCESSOR, MAGIC_FG_COLOR, MG_FORMATS, MagicAlertComponent, MagicCheckboxControlValueAccessor, MagicColorService, MagicConfirmationBoxComponent, MagicDefaultValueAccessor, MagicDirective, MagicFocusDirective, MagicLazyLoaderService, MagicModalProperties, MagicModule, MagicOverlayContainer, MagicOverlayContainerWrapper, MagicServices, MagicShellComponent, MagicViewContainerRef, MgDateAdapter, MgDateFormatter, MgformatMagicDirective, ModalFormDefinition, NoControlMagicDirective, NonMagicControlDirective, OverlayContainerMagicProvider, OverlayWindowService, RangeValidatorMagicDirective, Records, RouteCommand, RouterCommandsMagicService, RouterContainerMagicComponent, RowMagicDirective, StylesMapManager, SubformMagicComponent, SubformMagicService, SubscriberService, TableMagicService, TaskBaseMagicComponent, TaskMagicService, Time24MagicPipe, TimeMagicPipe, TitleMagicService, basicMagicProviders, confirmationBox, magicProviders, matDateProviders, utils };
 //# sourceMappingURL=magic-xpa-angular.mjs.map